/*
 Theme Name:   Impulsis Kreativ Case Study Child-Theme
 Theme URI:    https://www.impulsis-grafik.ch/casestudy
 Description:  Child Theme for impulsis-grafik.ch/casestudy
 Author:       Rob Schneider
 Author URI:   https://www.impulsis.ch
 Template:     bs4wpbt
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  impcasestudy
*/

@import url("https://fast.fonts.net/lt/1.css?apiType=css&c=951fabc3-ce7c-416f-8d6c-0fa9b916e2cb&fontids=5730920");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css");

@font-face{
  font-family:"Trade Gothic LT W05 Bold";
  src:url("fonts/30aba873-93af-406b-b54a-66c5b5e82896.woff2") format("woff2"),url("fonts/59cd5e10-9d20-4b86-850d-78b9beb6dfcd.woff") format("woff");
  font-display: fallback;
}

:root {
  /* Colors: */
  --color-hellblau: #46A0D9;
  --color-hellblau-transparent: #46A0D933;
  --color-dunkelblau: #19394F;
  --color-gruen: #326238;
  --color-weiss: #fff;
    /* Fonts */
    --h1-fontsize: 233px;
    --h1-lineheight: 0.8;
    --h1-letterspacing: -2.4px;
    --h2-fontsize: 120px;
    --h2-lineheight: 0.8;
    --h2-letterspacing: -4.66px;
    --h2-margin: 0 0 44px 0;

  --header-height: 160px;
  --header-padding: 40px 82px 34px;
  --header-mainmenu-width: calc(100% - 215px);
  --header-mainmenu-ul-fontsize: 30px;
  --header-mainmenu-ul-li-margin: 68px;
  --header-mainmenu-ul-li-firstitem-a-svg-padding: 4.5px;

  --main-content-p-fontsize: 55px;
  --main-content-p-lineheight: 1.27;
  --main-content-p-letterspacing: -1.1px;
  --main-content-wpblockcolumns-padding: 82px 82px 68px;
  --main-content-wpblockcolumns-gap: 2.4%;
  --main-content-detail-wpblockcolumns-width: 72%;
  --main-content-projektcover-wpblockcoverbackground-height: 70%;
  --main-content-wpblockvideo-width: 80%;
  --main-content-safesvgcover-margin: 10px;
  --main-content-safesvgcover-has-arrowdown-width: 33%;
  --main-content-safesvgcover-has-arrowdown-margin: 82px;
  --main-content-wpblockbutton-link-padding: 185px;

  --unserebenefits-wpblockcolumns-h2-margin: 61px;
  --unserebenefits-wpblockcolumns-h2before-left: -180px;
  --unserebenefits-wpblockcolumns-h2before-top: -16px;
  --unserebenefits-wpblockcolumns-h2before-padding: 1rem 3rem;

  --kontakt-h2-margin: 61px;
  --kontakt-div-p-width: 66%;
  --kontakt-personen-p-margin: 31px;
  --kontakt-personen-p-fontsize: 35px;
  --kontakt-personen-p-lineheight: 1.28;
  --kontakt-personen-p-letterspacing: -0.7px;
  --kontakt-personen-wpblockimage-figureafter-margin: 0 0 0 -100px;
  --kontakt-personen-wpblockimage-figureafter-widthheight: 145px;

  --footer-padding: 62px 214px 62px 82px;
  --footer-fontsize: 30px;
  --footer-lineheight: 1.33;
  --footer-kontakt-h4-margin: 47px;
  --footer-kontakt-h4-fontsize: 30px;
  --footer-kontakt-h4-lineheight: 1.33;
}

html {
  -ms-text-size-adjust: 100%; /* 1 */
  -webkit-text-size-adjust: 100%; /* 1 */
  box-sizing: border-box; /* 2 */
  scroll-behavior: smooth; /* 3 */
  overflow-x: hidden;
}

body {
  font-family:"Trade Gothic LT W05 Bold";
  -moz-osx-font-smoothing: grayscale; /* 2 */
  -webkit-font-smoothing: antialiased; /* 2 */
  hyphens: auto;
  counter-reset: section;
  overflow-x: hidden;
  margin-top: var(--header-height);
}

h1, h2, h3, h4 {
  font-family:"Trade Gothic LT W05 Bold";
}

h1 {
  font-size: var(--h1-fontsize);
  line-height: var(--h1-lineheight);
  letter-spacing: var(--h1-letterspacing);
  text-transform: uppercase;
}

h2 {
  font-size: var(--h2-fontsize);
  line-height: var(--h2-lineheight);
  letter-spacing: var(--h2-letterspacing);
  text-transform: uppercase;
  color: var(--color-hellblau);
  margin: var(--h2-margin);
}

/* Header */
.header {
  width: 100%;
  height: var(--header-height);
  display: flex;
  padding: var(--header-padding);
  background-color: var(--color-weiss);
  box-shadow: 0px 3px 6px #00000029;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

.header .logo {

}

.header .main-menu {
  width: var(--header-mainmenu-width);
}

.header .main-menu ul {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-end;
  align-content: center;
  list-style: none;
  font-size: var(--header-mainmenu-ul-fontsize);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-dunkelblau);
}

.header .main-menu ul li {
  margin-right: var(--header-mainmenu-ul-li-margin);
}

.header .main-menu ul li:last-child {
  margin-right: 0;
}

.header .main-menu ul li a {
  color: var(--color-dunkelblau);
}

.header .main-menu ul li a:hover {
  color: var(--color-hellblau);
  text-decoration: none;
}

.header .main-menu ul li.first-item a svg {
  padding-bottom: var(--header-mainmenu-ul-li-firstitem-a-svg-padding);
}

.header .main-menu ul a.active {
  color: var(--color-hellblau);
}

.sooblue {
  color: var(--color-hellblau);
}

/* Main content */
.main {

}

.main .content {
}

.main .content a {
  color: var(--color-hellblau);
}

.main .content p {
  font-size: var(--main-content-p-fontsize);
  line-height: var(--main-content-p-lineheight);
  letter-spacing: var(--main-content-p-letterspacing);
  color: var(--color-dunkelblau);
}

.main .content .wp-block-columns {
  width: 100%;
  padding: var(--main-content-wpblockcolumns-padding);
  margin: 0;
  gap: var(--main-content-wpblockcolumns-gap);
}

.main .content .detail .wp-block-columns {
  width: var(--main-content-detail-wpblockcolumns-width);
  color: var(--color-gruen);
  margin: 0 auto;
}

.main .content .detail .wp-block-columns p,
.main .content .detail .wp-block-columns h2 {
  color: var(--color-gruen);
}

.main .content .wp-block-columns p:last-of-type {
  margin-bottom: 0;
}

.main .content .projekt-cover .wp-block-cover__background {
  height: var(--main-content-projektcover-wpblockcoverbackground-height);
}

.main .content .wp-block-image {
  width: var(--main-content-wpblockvideo-width);
  height: auto;
  margin: 0 auto;
}

.main .content .wp-block-video {
  width: var(--main-content-wpblockvideo-width);
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
}

.main .content .wp-block-button__link {
  background-color: transparent;
  font-size: var(--kontakt-personen-p-fontsize);
  line-height: var(--kontakt-personen-p-lineheight);
  letter-spacing: var(--kontakt-personen-p-letterspacing);
  position: relative;
  padding-left: var(--main-content-wpblockbutton-link-padding);
}

.main .content .wp-block-button__link:hover {
  text-decoration: none;
}

.main .content .wp-block-button__link::before {
  overflow: hidden;
  object-fit: cover;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  margin: 0;
  transform: translateY(-50%); /* Vertikal zentrieren */
  z-index: 200;
  width: var(--kontakt-personen-wpblockimage-figureafter-widthheight);
  height: var(--kontakt-personen-wpblockimage-figureafter-widthheight);
}

.main .content .wp-block-button.icon-mail a::before {
  content: url(img/casestudy-icon-mail.svg);
}

.main .content .wp-block-button.icon-website a::before {
  content: url(img/casestudy-icon-feather-eye.svg);
}

.main .content .wp-block-button__link::after {
  content: url(img/casestudy-icon-arrow-forward.svg);
  display: inline-block;
  z-index: 200;
  margin: 0 0 0 13px;
}

.main .content .safe-svg-cover {
  width: 100%;
  height: auto;
  margin-bottom: var(--main-content-safesvgcover-margin);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
  align-content: stretch;
}

.main .content .safe-svg-cover:has(.arrowdown) {
  align-items: center;
  justify-content: center;
  width: var(--main-content-safesvgcover-has-arrowdown-width);
  margin-left: var(--main-content-safesvgcover-has-arrowdown-margin);
}

.main .content .safe-svg-cover .arrowdown path {
  fill: var(--color-hellblau-transparent);
}

/* Unsere Benefits */
.unsere-benefits .wp-block-columns h2 {
  color: var(--color-weiss);
  margin-bottom: var(--unserebenefits-wpblockcolumns-h2-margin);
  text-transform: none;
  line-height: 1;
  position: relative;
  padding-left: 0;
}

.unsere-benefits .wp-block-columns h2::before {
  aspect-ratio: 1 / 1;
  counter-increment: section;
  content: counter(section);
  text-align: center;
  border-radius: 50%; /* Optional: für einen runden Rahmen */
  background-color: var(--color-weiss); /* Optional: Hintergrundfarbe */
  color: var(--color-hellblau); /* Textfarbe */
  position: absolute;
  left: var(--unserebenefits-wpblockcolumns-h2before-left);
  top: var(--unserebenefits-wpblockcolumns-h2before-top);
  padding: var(--unserebenefits-wpblockcolumns-h2before-padding);
}

.unsere-benefits .wp-block-columns p {
  color: var(--color-weiss);
}

/* Kontakt */
.kontakt h2 {
  margin-bottom: var(--kontakt-h2-margin);
}

.kontakt > div > p {
  width: var(--kontakt-div-p-width);
  margin-left: auto;
  margin-right: auto;
}

.kontakt .personen p {
  margin-top: var(--kontakt-personen-p-margin);
  font-size: var(--kontakt-personen-p-fontsize);
  line-height: var(--kontakt-personen-p-lineheight);
  letter-spacing: var(--kontakt-personen-p-letterspacing);
  color: var(--color-hellblau);
}

.kontakt .personen p strong {
  color: var(--color-dunkelblau);
}

.kontakt .personen .wp-block-image figure::after {
  display: inline-block;
  margin: var(--kontakt-personen-wpblockimage-figureafter-margin);
  z-index: 2000;
  content: url("img/casestudy-icon-mail.svg");
  width: var(--kontakt-personen-wpblockimage-figureafter-widthheight);
  height: var(--kontakt-personen-wpblockimage-figureafter-widthheight);
}

/* Footer */
.footer {
  font-family:"Trade Gothic LT W05 Bold";
  padding: var(--footer-padding);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: normal;
  align-content: normal;
  background-color: var(--color-dunkelblau);
  color: var(--color-weiss);
  font-size: var(--footer-fontsize);
  line-height: var(--footer-lineheight);
}

.footer a {
  color: var(--color-weiss);
}

.footer a:hover {
  text-decoration: none;
  color: var(--color-hellblau);
}

.footer .kontakt {
  display: flex;
}

.footer .kontakt h4 {
  color: var(--color-hellblau);
  text-transform: uppercase;
  margin-right: var(--footer-kontakt-h4-margin);
  font-size: var(--footer-kontakt-h4-fontsize);
  line-height: var(--footer-kontakt-h4-lineheight);
}

.footer .links {

}

/* MEDIA QUERIES */

/* !Media max-width 1600px */
@media all and (max-width: 1600px) {
  :root {
    /* Fonts */
    --h1-fontsize: 194px;
    --h2-fontsize: 100px;
    --h2-margin: 0 0 37px 0;

    --header-height: 133px;
    --header-padding: 33px 68px 28px;
    --header-mainmenu-width: calc(100% - 179px);
    --header-mainmenu-ul-fontsize: 30px;
    --header-mainmenu-ul-li-margin: 68px;
    --header-mainmenu-ul-li-firstitem-a-svg-padding: 4.5px;

    --main-content-p-fontsize: 46px;
    --main-content-wpblockcolumns-padding: 68px 68px 57px;
    --main-content-safesvgcover-has-arrowdown-margin: 68px;
    --main-content-wpblockbutton-link-padding: 154px;

    --unserebenefits-wpblockcolumns-h2-margin: 51px;
    --unserebenefits-wpblockcolumns-h2before-left: -150px;
    --unserebenefits-wpblockcolumns-h2before-top: -13px;
    --unserebenefits-wpblockcolumns-h2before-padding: 0.83rem 2.08rem;

    --kontakt-h2-margin: 51px;
    --kontakt-personen-p-margin: 26px;
    --kontakt-personen-p-fontsize: 29px;
    --kontakt-personen-wpblockimage-figureafter-margin: 0 0 0 -83px;
    --kontakt-personen-wpblockimage-figureafter-widthheight: 121px;

    --footer-padding: 52px 178px 52px 68px;
    --footer-fontsize: 25px;
    --footer-kontakt-h4-margin: 39px;
    --footer-kontakt-h4-fontsize: 25px;
  }
}

/* !Media max-width 1440px */
@media all and (max-width: 1440px) {
  :root {
    /* Fonts */
    --h1-fontsize: 175px;
    --h2-fontsize: 90px;
    --h2-margin: 0 0 33px 0;

    --header-height: 120px;
    --header-padding: 30px 61px 25px;
    --header-mainmenu-width: calc(100% - 161px);
    --header-mainmenu-ul-fontsize: 22px;
    --header-mainmenu-ul-li-margin: 51px;

    --main-content-p-fontsize: 41px;
    --main-content-wpblockcolumns-padding: 61px 61px 51px;
    --main-content-safesvgcover-margin: 10px;
    --main-content-safesvgcover-has-arrowdown-margin: 61px;
    --main-content-wpblockbutton-link-padding: 139px;

    --unserebenefits-wpblockcolumns-h2-margin: 46px;
    --unserebenefits-wpblockcolumns-h2before-left: -135px;
    --unserebenefits-wpblockcolumns-h2before-top: -12px;
    --unserebenefits-wpblockcolumns-h2before-padding: 0.75rem 1.875rem;

    --kontakt-h2-margin: 46px;
    --kontakt-personen-p-margin: 23px;
    --kontakt-personen-p-fontsize: 26px;
    --kontakt-personen-wpblockimage-figureafter-margin: 0 0 0 -75px;
    --kontakt-personen-wpblockimage-figureafter-widthheight: 109px;

    --footer-padding: 46px 160px 46px 61px;
    --footer-fontsize: 22px;
    --footer-kontakt-h4-margin: 35px;
    --footer-kontakt-h4-fontsize: 22px;
  }
}

/* !Media max-width 1280px */
@media all and (max-width: 1280px) {
  :root {
    /* Fonts */
    --h1-fontsize: 155px;
    --h2-fontsize: 80px;
    --h2-margin: 0 0 29px 0;

    --header-height: 107px;
    --header-padding: 27px 55px 23px;
    --header-mainmenu-width: calc(100% - 143px);
    --header-mainmenu-ul-fontsize: 20px;
    --header-mainmenu-ul-li-margin: 45px;

    --main-content-p-fontsize: 37px;
    --main-content-wpblockcolumns-padding: 55px 55px 45px;
    --main-content-safesvgcover-margin: 10px;
    --main-content-safesvgcover-has-arrowdown-margin: 55px;
    --main-content-wpblockbutton-link-padding: 123px;

    --unserebenefits-wpblockcolumns-h2-margin: 41px;
    --unserebenefits-wpblockcolumns-h2before-left: -120px;
    --unserebenefits-wpblockcolumns-h2before-top: -11px;
    --unserebenefits-wpblockcolumns-h2before-padding: 0.66rem 1.66rem;

    --kontakt-h2-margin: 41px;
    --kontakt-personen-p-margin: 21px;
    --kontakt-personen-p-fontsize: 23px;
    --kontakt-personen-wpblockimage-figureafter-margin: 0 0 0 -67px;
    --kontakt-personen-wpblockimage-figureafter-widthheight: 98px;

    --footer-padding: 41px 143px 41px 55px;
    --footer-fontsize: 20px;
    --footer-kontakt-h4-margin: 31px;
    --footer-kontakt-h4-fontsize: 20px;
  }
}

/* !Media max-width 1180px */
@media all and (max-width: 1180px) and (orientation: landscape) {
  :root {}
}

/* !Media max-width 1024px */
@media all and (max-width: 1024px) {
  :root {}
}

/* !Media max-width 820px Portrait */
@media all and (max-width: 896px) {
  :root {}
}

/* !Media max-width 896px Landscape */
@media all and (max-width: 896px) and (orientation: landscape) {
  :root {}
}

/* !Media max-width 667px Landscape */
@media all and (max-width: 667px) and (orientation: landscape) {
  :root {}
}

/* !Media max-width 428px Portrait */
@media all and (max-width: 428px) and (orientation: portrait) {
  :root {}
}

/* !Media max-width 390px Portrait */
@media all and (max-width: 390px) and (orientation: portrait) {
  :root {}
}

/* !Media max-width 375px Portrait */
@media all and (max-width: 375px) and (orientation: portrait) {
  :root {}
}