/*
Theme Name: Zenit Child
Template: zenit
Version: 2.0
Author: giraffo GmbH
*/

/* Schriften */

@font-face {
    font-family: 'Myriad Pro';
    src: url('./Schriften/MYRIADPRO-BOLD.woff2') format('woff2'),
         url('./Schriften/MYRIADPRO-BOLD.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

    

/* Open Sans normal */
@font-face {
    font-family: 'Open Sans';
    src: url('./Schriften/OpenSans.woff2') format('woff2'),
         url('./Schriften/OpenSans.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Open Sans italic */
@font-face {
    font-family: 'Open Sans italic';
    src: url('./Schriften/OpenSans_Italic.woff2') format('woff2'),
         url('./Schriften/OpenSans_Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}


.blauh1 {
	font-family: 'Myriad Pro' !important;
	font-weight: bold !important;
	font-size: 60px !important;
	line-height: 65px;
	text-transform: uppercase !important;
	color: rgb(39, 78, 138) !important;
	letter-spacing: normal;
    }
    
.blauh2 {
	font-family: 'Myriad Pro' !important;
	font-weight: bold !important;
	font-size: 50px !important;
	text-transform: uppercase !important;
	color: rgb(39, 78, 138) !important;
    }
    
.blauh3 {
	font-family: 'Myriad Pro' !important;
	font-weight: bold !important;
	font-size: 35px !important;
	color: rgb(39, 78, 138) !important;
    }
    
.orangeh1 {
	font-family: 'Myriad Pro' !important;
	font-weight: bold !important;
	font-size: 60px !important;
	line-height: 65px;
	text-transform: uppercase !important;
	color: rgb(232, 115, 26) !important;
	letter-spacing: normal;
    }  

    
.orangeh2 {
	font-family: 'Myriad Pro' !important;
	font-weight: bold !important;
	font-size: 50px !important;
	text-transform: uppercase !important;
	color: rgb(232, 115, 26) !important;
    }
    
.orangeh3 {
	font-family: 'Myriad Pro' !important;
	font-weight: bold !important;
	font-size: 35px !important;
	color: rgb(232, 115, 26) !important;
    }

.weissh2 {
	font-family: 'Myriad Pro' !important;
	font-weight: bold !important;
	font-size: 50px !important;
	text-transform: uppercase !important;
	color: white !important;
    }
    
.weissh3 {
	font-family: 'Myriad Pro' !important;
	font-weight: bold !important;
	font-size: 35px !important;
	color: white !important;
    }
  
.weissh3button {
	font-family: 'Myriad Pro' !important;
	font-weight: bold !important;
	font-size: 35px !important;
	color: white !important;
    }  
    
.schwarzh1 {
	font-family: 'Myriad Pro' !important;
	font-weight: bold !important;
	font-size: 60px !important;
	line-height: 65px;
	text-transform: uppercase !important;
	color: black !important;
	letter-spacing: normal;
    }
    
.schwarzh2 {
	font-family: 'Myriad Pro' !important;
	font-weight: bold !important;
	font-size: 50px !important;
	text-transform: uppercase !important;
	color: black !important;
    }
    
.schwarzh3 {
	font-family: 'Myriad Pro' !important;
	font-weight: bold !important;
	font-size: 35px !important;
	color: black !important;
    }
    
.schwarz p {
	font-size: 22px !important;
	line-height: normal !important;
	color: black !important;
    }
    
.weiss p {
	font-size: 22px !important;
	line-height: normal !important;
	color: white !important;
    }
    
.blauh p {
	font-size: 22px !important;
	line-height: normal !important;
	color: rgb(39, 78, 138) !important;
    }
    
.orange p {
	font-size: 22px !important;
	line-height: normal !important;
	color: rgb(232, 115, 26) !important;
    }

.blauli ul {
    font-size: 22px !important;
    line-height: 30px;
    font-family: 'Open Sans' !important;
    color: rgb(39, 78, 138) !important;
    font-weight: normal;
    padding-left: 1.5em;
    list-style-position: outside;
}

.blauli ul li {
    padding-left: 0.5em;
}

.schwarzli ul {
    font-size: 22px !important;
    line-height: 30px;
    font-family: 'Open Sans' !important;
    color: black !important;
    font-weight: normal;
    padding-left: 1.5em;
    list-style-position: outside;
}

.schwarzli ul li {
    padding-left: 0.5em;
}


.zentriert {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}
 

.hintergrundtextorange {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  
    font-family: 'Myriad Pro', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: normal;

    font-size: 15vw; /* macht es responsiv – passt sich Bildschirmbreite an */
    color: rgb(232, 115, 26);
  
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
    opacity: 0.05; /* optional, macht es dezent im Hintergrund */
}

.hintergrundtextblau {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -170%);
  
    font-family: 'Myriad Pro', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: normal;
    
    font-size: 15vw; /* macht es responsiv – passt sich Bildschirmbreite an */
    color: rgb(39, 78, 138);
    
    white-space: nowrap;
    pointer-events: none;
    z-index: -1;
    opacity: 0.05; /* optional, macht es dezent im Hintergrund */
}




.blau-overlay {
  position: relative;
  z-index: 1 !important;
  overflow: hidden;
}

.blau-overlay::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(39, 78, 138, 0.4);
  z-index: 2;
  pointer-events: none;
}

.orange-overlay {
  position: relative;
  z-index: 1 !important;
  overflow: hidden;
}

.orange-overlay::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgb(232, 115, 26, 0.4);
  z-index: 2;
  pointer-events: none;
}

.schwarz-overlay {
  position: relative;
  z-index: 1 !important;
  overflow: hidden;
}

.schwarz-overlay::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
    pointer-events: none;
}

.text-on-overlay {
    position: relative;
    z-index: 3 !important;
}

.vc_row.vc_row-flex > .vc_column_container > .vc_column-inner {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    z-index: auto;
}

.hintergrundblau {
    display: block;
    width: fit-content;
    margin: 0 auto;
    background-color: #274E8A;
    padding: 10px;
}

.hintergrundschwarz {
    display: block;
    width: fit-content;
    margin: 0 auto;
    background-color: black !important;
    padding: 10px;
}


/*soll nur für Buttons*/
.weissh3button:hover {
    color: #000000 !important;
}

.weissh3button-projekt {
	font-family: 'Myriad Pro Bold' !important;
	font-weight: bold !important;
	font-size: 35px !important;
	color: white !important;
    }
    

.weissh3button-projekt:hover {
    color: #e8731a !important;
}

.schwarzh3button {
	font-family: 'Myriad Pro' !important;
	font-weight: bold !important;
	font-size: 20px !important;
	color: black !important;
    }

.weissh3button {
	font-family: 'Myriad Pro' !important;
	font-weight: bold !important;
	font-size: 20px !important;
	color: white !important;
    }


/*-- RESPONSIVE --*/
@media (max-width: 768px) {
    .hintergrundtextorange,
    .hintergrundtextblau {
        display: none;
    }
}

@media (max-width: 1024px) {
  h1, h2, h3, h4, p {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: normal;
    margin: 0;
    }
    
    /* Button volle Breite */
    .qodef-btn {
    width: 100%;
    max-width: 300px;
    text-align: center;
    box-sizing: border-box;
    margin-top: 5% !important;
    }
    
    .schwarzli ul {
    padding-left: 2em;
    }
}

.qodef-main-menu > ul > li > a {
  color: #274e8a;
  font-family: 'Myriad Pro' !important;
  font-size: 14px;
  line-height: 16px;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
}

.qodef-drop-down .second .inner > ul > li > a {
  color: #274e8a;
  font-family: 'Myriad Pro' !important;
  font-size: 14px;
  line-height: 16px;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
}

.qodef-mobile-header .qodef-mobile-nav ul {
  font-family: 'Myriad Pro' !important;
  text-transform: uppercase;
}





/* ── RESPONSIVE SCHRIFTGRÖSSEN (Mobile) ── */
@media (max-width: 768px) {

  /* H1-Klassen: 60px → 32px */
  .blauh1,
  .orangeh1,
  .schwarzh1 {
    font-size: 32px !important;
    line-height: 38px !important;
  }

  /* H2-Klassen: 50px → 26px */
  .blauh2,
  .orangeh2,
  .weissh2,
  .schwarzh2 {
    font-size: 26px !important;
    line-height: 32px !important;
  }

  /* H3-Klassen: 35px → 20px */
  .blauh3,
  .orangeh3,
  .weissh3,
  .schwarzh3 {
    font-size: 20px !important;
    line-height: 26px !important;
  }

  /* Fließtext: 22px → 16px */
  .schwarz p,
  .weiss p,
  .blauh p,
  .orange p {
    font-size: 16px !important;
    line-height: 24px !important;
  }

  /* Listen: 22px → 16px */
  .blauli ul,
  .schwarzli ul {
    font-size: 16px !important;
    line-height: 24px !important;
  }

  /* Buttons */
  .weissh3button,
  .weissh3button-projekt,
  .schwarzh3button {
    font-size: 16px !important;
  }
}