/* ===== Reset ===== */
html, body { margin: 0; padding: 0; }

/* ===== Navbar ===== */
.custom-navbar {
  height: 3.5rem;
  background: linear-gradient(135deg,#f7f7f7 0%,#e5e5e5 25%,#f7f7f7 50%,#e5e5e5 75%,#f7f7f7 100%);
  background-size: 300% 300%;
  animation: shine 6s ease-in-out infinite;
}
@keyframes shine {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.custom-navbar .navbar-brand img { max-height: 2.5rem; }
.custom-navbar .navbar-nav .nav-link { line-height: 3.5rem; font-weight: 500; }
.custom-navbar .dropdown-menu { text-align: left; }

/* ===== Layout-Variablen ===== */
:root {
  --carousel-h: 800px; /* bei Bedarf via MQ/JS anpassen */
}


/* ===== Carousel ===== */
.carousel-container {
  position: relative;
  max-width: 1920px;
  height: var(--carousel-h);
  margin: auto;
  overflow: hidden;
  z-index: 1;
}
.carousel-container .carousel-item img {
  display: block;          /* Baseline-Lücke vermeiden */
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
}

/* Fade-Übergang */
.carousel-fade .carousel-item {
  opacity: 0;
  transition: opacity 2s ease-in-out !important;
  backface-visibility: hidden;
}
.carousel-fade .carousel-item.active { opacity: 1; }
.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end { opacity: 0; }
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end { opacity: 1; }

/* Optionaler Zoom der aktiven Slide */
@keyframes zoomIn { from {transform:scale(1);} to {transform:scale(1.1);} }
.carousel-container .carousel-item.active img { animation: zoomIn 10s ease-in-out forwards; }

/* Text-Layer im Carousel */
.carousel-text-layer {
  position: absolute;
  width: 66.6667%;
  left: 16.6667%;
  top: calc(10% + 8rem);
  opacity: 0;
  z-index: 6;
  animation: slideInTextVertical 0.5s cubic-bezier(0.22,0.61,0.36,1) forwards;
}
@keyframes slideInTextVertical { to { top: 10%; opacity: 1; } }
.carousel-text-content {
  display: inline-block;
  background: rgba(0,0,0,0.2);
  font-size: 2.8rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 0.5rem rgba(0,0,0,1.0);
}

/* Carousel-Controls dürfen über dem Grid bleiben */
.carousel-control-prev,
.carousel-control-next{
  position: absolute;
  top: 0;
  bottom: 0;
  height: auto;
  z-index: 15;   /* über dem Grid */
}







/* Flip-Grid im Flow; eigener Stacking-Kontext über dem Carousel */
#layer_benefits.flip-grid{
  position: relative;  /* NEU: Stacking-Kontext erzeugen */
  z-index: 5;          /* > 1 (Carousel), aber < 15 (Controls) */
  width: 70vw;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 8px 8px;
  opacity: 0;
  visibility: hidden;
}

#layer_benefits .row{
  --bs-gutter-x: 8px;
  --bs-gutter-y: 8px;
  margin: 0;
  height: 100%;
}
#layer_benefits .row > [class*="col-"]{ display:flex; }
.flip-box{ height:100%; }

/* Reveal-Animation (per JS 500ms verzögert) */
@keyframes flipGridReveal {
  0%   { opacity: 0; transform: translate(-24px,24px) scale(.96); }
  100% { opacity: 1; transform: translate(0,0)        scale(1); }
}
#layer_benefits.is-ready   { visibility: visible; }
#layer_benefits.is-visible { animation: flipGridReveal 600ms cubic-bezier(.2,.7,.2,1) forwards; }





/* ===== Flip-Grid – absolut an Carousel andocken ===== */

.flip-box { height: 100%; }

/* ===== Flip-Box Styles ===== */
.flip-box {
  position: relative;
  width: 100%;
  perspective: 1000px;
  outline: none;
  cursor: pointer;
}
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(0.2,0.6,0.2,1);
}
.flip-box:hover .flip-box-inner,
.flip-box:focus-within .flip-box-inner,
.flip-box.is-flipped .flip-box-inner { transform: rotateY(180deg); }

.flip-box-front, .flip-box-back {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: 1px solid rgba(255,255,255,.35);
  overflow: hidden;
}
.flip-box-front { background-size: cover; background-position: center; }
.flip-label {
  display: inline-block;
  padding: .25rem .5rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 .5rem rgba(0,0,0,.8);
  background: rgba(0,0,0,.33);
  font-size: clamp(1rem, 2.2vw, 1.6rem);
  line-height: 1.15;
  width: 100%;
  text-align: center;
}
.flip-label-sub {
  display: inline-block;
  padding: .25rem .5rem;
  font-weight: 400;
  color: #fff;
  text-shadow: 0 0 .5rem rgba(0,0,0,.8);
  background: rgba(0,0,0,.33);
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  line-height: 1.15;
  width: 100%;
  text-align: center;
}
.flip-box-back {
  transform: rotateY(180deg);
  background: #2b2b2b;
  color: #fff;
  text-align: center;
  padding: 1.25rem;
}
.flip-back-content { max-width: 90%; margin: 0 auto; }
.flip-box-back h3 { font-size: clamp(1.1rem, 2.1vw, 1.4rem); font-weight: 700; }
.flip-box-back p  { font-size: clamp(.9rem, 1.8vw, 1.1rem); opacity: .9; }
.flip-box:hover, .flip-box:focus-within { box-shadow: 0 .25rem 1rem rgba(0,0,0,.25); }

@media (prefers-reduced-motion: reduce) { .flip-box-inner { transition: none; } }

/* ===== (Optional) Responsive Carousel-Höhe =====
@media (max-width: 992px) { :root { --carousel-h: 60vh; } }
@media (max-width: 576px) { :root { --carousel-h: 50vh; } }
*/

/* ==== HERO v2 (Single Source of Truth) ==================================== */
/* Konfiguration */
:root{
  --hero-ar-w: 1920;                 /* Seitenverhältnis Breite  */
  --hero-ar-h: 420;                  /* Seitenverhältnis Höhe    */
  --hero-fade: 900ms;                /* Crossfade Dauer          */
  --hero-zoom-time: 6500ms;          /* Ken-Burns Dauer          */
  --hero-zoom-scale: 1.08;           /* Ken-Burns End-Skalierung */
}

/* Container */
.hero-bleed{ position:relative; overflow:hidden; }

/* Bild-Stack mit Ratio (nur für Slideshow-Seiten) */
.hero-bleed .hero-stack{ position:relative; aspect-ratio: var(--hero-ar-w) / var(--hero-ar-h); }
@supports not (aspect-ratio: 1 / 1){
  .hero-bleed .hero-stack::before{
    content:""; display:block; padding-bottom: calc(var(--hero-ar-h) / var(--hero-ar-w) * 100%);
  }
}

/* --- Slideshow: Bilder übereinander legen (kompatibel zu .img-fluid) --- */
.hero-bleed .hero-stack > .hero-img{
  position:absolute !important;
  top:0; right:0; bottom:0; left:0;
  width:100%;
  height:100% !important;        /* überschreibt .img-fluid { height:auto } */
  object-fit:cover;
  display:block;
  opacity:0 !important;          /* nur aktives Bild sichtbar */
  transition: opacity var(--hero-fade) ease-in-out;
  will-change: transform, opacity;
}

/* Nur das aktive Bild ist sichtbar und zoomt sanft */
.hero-bleed .hero-stack > .hero-img.is-active{
  opacity:1 !important;
  z-index:1;
  animation: heroZoom var(--hero-zoom-time) ease-in-out forwards;
}

@keyframes heroZoom{
  from{ transform: scale(1); }
  to  { transform: scale(var(--hero-zoom-scale)); }
}

/* --- Einzelbild-Header (ohne .hero-stack) ------------------------------- */
/* Bild bleibt im normalen Flow -> Header hat Höhe */
.hero-bleed > .hero-img{
  position: static !important;
  display:block;
  width:100%;
  height:auto !important;
  object-fit:cover;               /* wirkt bei height:auto praktisch nicht */
  opacity:1 !important;           /* sichtbar */
  animation: heroZoom var(--hero-zoom-time) ease-in-out forwards; /* optionaler Ken-Burns */
}

/* Overlay: echte Mittelzentrierung; neutralisiert ältere left:50%/translate-Regeln */
.hero-bleed .hero-overlay{
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  display:flex; flex-direction:column;
  justify-content:center;            /* vertikal mittig */
  align-items:center;                 /* horizontal mittig */
  text-align:center;
  padding: clamp(8px, 2vw, 32px);
  z-index:2;
  pointer-events:none;

  animation:none !important;          /* blockiert alte Animationen */
  transform: translate3d(0, 8px, 0) !important;
  opacity:0;
  transition: opacity 400ms ease, transform 400ms ease;
}
.hero-bleed .hero-overlay.is-in{
  animation:none !important;
  transform: translate3d(0, 0, 0) !important;
  opacity:1;
}

/* Typografie */
/* Typografie */
.hero-bleed .hero-title{  margin: 0 0 .25em;  line-height: 1.1;  color: #ffffff;  text-shadow: 2px 2px 12px rgba(0,0,0,1.0); }
.hero-bleed .hero-sub{  margin: 0;  line-height: 1.3;  opacity: .95;  color: #ffffff;  text-shadow: 2px 2px 12px rgba(0,0,0,1.0); }


/* Barrierefreiheit / Bewegungsreduktion */
@media (prefers-reduced-motion: reduce){
  .hero-bleed .hero-stack > .hero-img.is-active{ animation:none; }
  .hero-bleed .hero-overlay{
    animation:none !important; transform:none !important;
    transition: opacity 200ms ease; opacity:1;
  }
}

/* Responsive Schriftgrößen */
@media (max-width: 576px){
  .hero-bleed .hero-title{ font-size: clamp(1.4rem, 6vw, 2.2rem); }
  .hero-bleed .hero-sub  { font-size: clamp(0.9rem, 3.2vw, 1.1rem); }
}
@media (min-width: 577px) and (max-width: 992px){
  .hero-bleed .hero-title{ font-size: clamp(1.8rem, 4.2vw, 2.8rem); }
  .hero-bleed .hero-sub  { font-size: clamp(1.0rem, 2.2vw, 1.25rem); }
}
@media (min-width: 993px){
  .hero-bleed .hero-title{ font-size: clamp(2.2rem, 3.2vw, 3.2rem); }
  .hero-bleed .hero-sub  { font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
}
/* ========================================================================== */

/* === HERO Fallback: Single-Image-Header ohne Slideshow =================== */
/* 1) Wenn der Stack genau ein Bild enthält */
.hero-bleed .hero-stack > .hero-img:only-child,
/* 2) Wenn im Header genau ein <img> existiert (Overlay zählt nicht) */
.hero-bleed > .hero-img:only-of-type{
  opacity:1 !important;
  z-index:1;
  animation: heroZoom var(--hero-zoom-time) ease-in-out forwards;
}





/* ===== Flip-Grid: Handy & Tablet ======================================= */
@media (max-width: 992px) {
  /* Container: volle Breite, aber links/rechts max. 5rem Innenabstand */
  #layer_benefits.flip-grid{
    width: 100vw;
    margin: 0 auto;
    padding-left:  clamp(8px, 3vw, 5rem);
    padding-right: clamp(8px, 3vw, 5rem);
  }

  /* Grid enger, 2 Spalten nebeneinander */
  #layer_benefits .row{
    --bs-gutter-x: clamp(6px, 2.5vw, 16px);
    --bs-gutter-y: clamp(6px, 2.5vw, 16px);
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Jede Spalte/Kachel feste Breite ~45vw (statt Bootstrap-50%) */
  #layer_benefits .row > [class*="col-"]{
    flex: 0 0 auto;         /* Bootstrap-Flexbasis übersteuern */
    width: 45vw;            /* ~45% der Viewportbreite */
  }

  /* Flipbox: Höhe ~50vw über aspect-ratio (45:50 ~= 0.9) */
  #layer_benefits .flip-box{
    width: 45vw;
    height: auto;           /* Höhe kommt aus aspect-ratio */
    aspect-ratio: 9 / 10;   /* = 45/50 -> ergibt ca. 50vw Höhe */
  }

  /* ensure absolute children füllen den Eltern-Container */
  #layer_benefits .flip-box-inner,
  #layer_benefits .flip-box-front,
  #layer_benefits .flip-box-back{ height: 100%; }
}

/* Optional: ganz kleine Phones – leicht kompakter, um Überlauf zu vermeiden */
@media (max-width: 360px) {
  #layer_benefits .row > [class*="col-"],
  #layer_benefits .flip-box{
    width: 44vw;            /* 2×44vw + Gutter passt sicher */
    aspect-ratio: 10 / 11;  /* etwas höher, damit Text besser passt */
  }
}

@media (max-width: 992px){
  footer.site-footer { margin-top: 37vh !important; }
}




/* ===== Navbar über Carousel & Benefits legen (nur Mobile/Tablet) ===== */
@media (max-width: 992px) {
  /* eigene Stacking-Ebene für die Navbar */
  .custom-navbar{
    position: sticky;     /* bleibt oben kleben */
    top: 0;
    z-index: 1200;        /* > Carousel (1/15) und > Benefits (5) */
  }

  /* aufgeklappter Collapse: als Overlay über die Seite legen */
  .custom-navbar .navbar-collapse.collapse.show{
    position: absolute;
    top: 100%;            /* direkt unter der Navbar-Leiste */
    left: 0; right: 0;
    z-index: 1250;        /* noch über der Navbar-Basis */
    background: rgba(255,255,255,.98);
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    padding: .75rem 1rem;
  }

  /* Toggler sicher ganz oben halten */
  .custom-navbar .navbar-toggler{
    position: relative;
    z-index: 1300;
  }

  /* Dropdown-Menüs innerhalb des Collapses */
  .custom-navbar .dropdown-menu{
    z-index: 1260;        /* zur Sicherheit über dem Collapse-Hintergrund */
  }

  /* etwas bessere Klickflächen im Overlay */
  .custom-navbar .navbar-nav .nav-link{
    line-height: 1.6;
    padding: .5rem 1rem;
  }
}





/* Mobile/Tablet: Overlay breiter, Textgrößen fluid */
@media (max-width: 992px){
  .carousel-text-layer{
    width: 90vw;           /* statt 66.6% */
    left: 5vw;
    top: 10%;              /* ruhigerer Startpunkt */
  }
  .carousel-text-content{
    padding: .5rem .75rem;
    font-size: clamp(1.1rem, 4.6vw, 2.0rem);  /* Hauptzeile */
    line-height: 1.2;
    background: rgba(0,0,0,.28);              /* etwas transparenter auf klein */
  }
  .carousel-text-content .carousel-sub{
    margin-top: .25rem;
    font-size: clamp(.95rem, 3.6vw, 1.25rem); /* Unterzeile */
    line-height: 1.3;
    opacity: .95;
  }
  .carousel-text-content .carousel-bull{
    height: clamp(1.2rem, 5vw, 2.2rem);       /* Logo/Bullet skaliert mit */
    vertical-align: -.15em;
  }
}

@media (max-width: 576px){
  .carousel-text-layer{
    width: 94vw;
    left: 3vw;
    top: 8%;
  }
  .carousel-text-content{
    font-size: clamp(1.0rem, 5vw, 1.6rem);
  }
  .carousel-text-content .carousel-sub{
    font-size: clamp(.9rem, 4vw, 1.1rem);
  }
}


/* ===== Desktop-Defaults für Carousel-Overlay (>= 993px) ===== */
@media (min-width: 993px){
  /* Hauptzeile – bleibt wie bisher */
  .carousel-text-content{
    font-size: 2.8rem;      /* war vorher schon gesetzt */
    line-height: 1.2;
  }

  /* Unterzeile (Ersatz für frühere Inline-Styles) */
  .carousel-text-content .carousel-sub{
    display: block;
    margin-top: .25rem;
    font-size: 1.5rem;
    line-height: 2.0rem;
    opacity: .98;
  }

  /* Bullet/Logo links (Ersatz für height:2.5rem inline) */
  .carousel-text-content .carousel-bull{
    height: 2.5rem;
    width: auto;
    vertical-align: -.15rem;   /* optische Ausrichtung */
  }
}

/* Sicherheitsnetz: nie höher als 12vh – falls sehr geringe Höhe */
.carousel-text-content .carousel-bull{ max-height: 12vh; }