/*
Theme Name: Bridge Child
Theme URI: http://demo.qodeinteractive.com/bridge/
Description: A child theme of Bridge Theme
Author: Qode Interactive
Author URI: http://www.qodethemes.com/
Version: 1.0.0
Template: bridge
*/
@import url("../bridge/style.css");

h1 {margin-bottom:20px;}
h2 {margin-bottom:20px;}
p {margin-bottom:20px;}

@media (max-width: 800px) {
	.qode_elementor_container_inner, .full_width .parallax_content, .qode_elementor_container_inner, .steps_holder_inner, div.grid_section .section_inner, nav.content_menu ul {width:84%!important;}
}

.bg1 {/* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#ffffff+0,f7f7eb+50,ffffff+100 */
background: linear-gradient(to bottom,  #ffffff 0%,#f7f7eb 50%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

/* =================================================
   FONTS
================================================= */

@font-face {
  font-family: "ZalandoRegular";
  src: url("/wp-content/uploads/2025/12/ZalandoSansExpanded-Regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "ZalandoBold";
  src: url("/wp-content/uploads/2025/12/ZalandoSansExpanded-Bold.ttf") format("truetype");
  font-weight: 700;
}

/* =================================================
   HERO – GELBER BEREICH
================================================= */

.hero {
  position: relative;
  width: 100%;
  height: 645px;
  background: url("/wp-content/uploads/2025/12/background-hero.webp") no-repeat top center;
  background-size: cover;
  overflow: hidden;
}

@media (max-width: 1280px) {
  .hero {
  height: 500px;
}
	}

@media (max-width: 990px) {
  .hero {
  height: 400px;
 
}
	}




/* =================================================
   HERO INNER
================================================= */

.hero-inner {
  max-width: 1400px;
  height: 100%;
  margin: 0 auto;
  padding: 0 40px;

  display: flex;
  align-items: flex-end;   /* Unterkante fix */
  justify-content: center;
  gap: 140px;
}

/* =================================================
   DAME
================================================= */

.hero-image {
  display: flex;
  align-items: flex-end;
}

.hero-image img {
  display: block;
  height: auto;
  max-height: 100%;
}

/* =================================================
   TEXT IM HERO (DESKTOP + TABLET)
================================================= */

.hero-text {
  max-width: 640px;
  padding-bottom: 72px;
  text-align: left;
}

/* =================================================
   TYPOGRAFIE – STABIL
================================================= */

.hero-eyebrow {
  font-family: "ZalandoRegular", sans-serif !important;
  font-size: clamp(18px, 2vw, 28px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 24px;
  color: #1e2126;
}

.hero-headline {
  font-family: "ZalandoBold", sans-serif !important;
  font-size: clamp(52px, 6.5vw, 100px);
  line-height: 1.05;
  margin: 0 0 20px;
  color: #1e2126;
}

.hero-button {
  display: inline-block;
  padding: 12px 32px;
  border-radius: 999px;
  background: #ffffff;
  color: #1e2126;

  font-family: "ZalandoRegular", sans-serif !important;
  font-size: 16px;
  letter-spacing: 0.08em;

  text-decoration: none;
  box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}

/* =================================================
   TABLET
================================================= */

@media (max-width: 1024px) {
  .hero-inner {
    gap: 80px;
  }

  .hero-text {
    padding-bottom: 56px;
  }
}

/* =================================================
   MOBILE – LOGIK KORREKT
================================================= */

@media (max-width: 600px) {

  /* Hero bleibt klar abgeschlossen */
  .hero {
    height: auto;
    
  }

  .hero-inner {
    flex-direction: column;
    align-items: center;
    height: auto;
    gap: 0;  }

  .hero-image img {
    max-width: 100%;
    margin: 0 auto;
  }

  /* Text NICHT im gelben Bereich */
  .hero-text {
    display: none;
  }
}

/* =================================================
   TEXT UNTER DEM HERO (WEISS, 100 %)
================================================= */

.hero-follow-text {
  width: 100%;
  padding: 48px 24px; 0 24px;
  background: #ffffff;
}

.hero-follow-text-inner {
  max-width: 1400px;
  margin: 0 auto;
}

.hero-follow-text .hero-eyebrow,
.hero-follow-text .hero-headline,
.hero-follow-text .hero-button {
  color: #1e2126;
}

@media (min-width: 601px) {
.dis-none {display:none;} }

/* =========================================
   BRIDGE POPUP MENU – HAMBURGER GRÖSSER
========================================= */

.popup_menu .line,
.popup_menu .line:before,
.popup_menu .line:after {
  width: 32px;
  height: 5px;
  border-radius: 2px;

}

/* Abstand zwischen den Linien */
.popup_menu .line:before {
  top: -9px;
}

.popup_menu .line:after {
  top: 9px;
}

.popup_menu_inner {
  position: relative;
  left: -28px;
}

/* Negativ */

.neg-slider {margin-top:-140px;}

/* ====== Carousels ====== */
.qode_carousels .slides>li{ margin:4px 20px 0 0; }


/* ====== Reverse mobile ====== */

@media (max-width: 768px) {
  .reverse-mobile > .section_inner > .section_inner_margin {
    display: flex;
    flex-direction: column-reverse;
  }

  .reverse-mobile .wpb_column {
    width: 100% !important;
    float: none !important;
    clear: both !important;
  }

  .reverse-mobile .wpb_column:first-child {
    margin-top: 20px;
  }
}

/* IMG */

.img-w img {width:80%}

/* YT */

.youtube h2 {font-size: 36px;  }

@media (max-width: 768px) {
.youtube h2 {font-size: 26px;  }
	}

/* Double */

.double p {font-size:26px; margin-top:8%; padding-bottom:30px; }

@media (max-width: 768px) {
 .double p {font-size:22px; margin-top:0%; padding-bottom:0px; }
	}

.double h2 {font-size: 50px; line-height:60px; }

@media (max-width: 768px) {
.double h2 {font-size: 26px; line-height:32px; }
	}

.qbutton {box-shadow: 0 8px 18px rgba(0,0,0,0.15);}

footer {margin-top:40px;}