/* ============================================================
   HOMEPAGE - HERO (Light-Fade + Team-Foto rechts) + SERVICES
   ============================================================ */

:root{
  --home-bg:        #faf7ef;
  --home-bg-deep:   #f2ecdd;
  --home-surface:   #ffffff;
  --home-ink:       #0a0a0a;
  --home-ink-soft:  #3b3b3b;
  --home-muted:     #6a6a6a;
  --home-line:      rgba(10,10,10,.08);
  --home-line-soft: rgba(10,10,10,.04);
  --home-gold:      #c9971f;
  --home-gold-2:    #f3d36a;
  --home-gold-3:    #b98519;
  --home-container: 1440px;
}

/* Reset & Basis */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background:var(--home-bg);
  color:var(--home-ink);
  overflow-x:clip;     /* clip statt hidden — behält position:sticky funktional */
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button, a{font-family:inherit}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}


/* ============================================================
   HERO (Team-Foto rechts, weißer Fade links)
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  isolation:isolate;
  background:#ffffff;
  color:var(--home-ink);
}

/* Full-Bleed Bild + REINER WEIß-Fade auf der linken Seite */
.hero-bg{
  position:absolute;
  inset:0;
  z-index:-5;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.05) 0%,
      transparent 30%,
      rgba(255,255,255,.20) 70%,
      rgba(255,255,255,.55) 100%),
    /* Der Weiss-Fade endet frueher als beim alten Bild: Lucas steht hier
       weiter links (Gesicht bei 52%), die Textspalte reicht bis 46,6%. */
    linear-gradient(90deg,
      rgba(255,255,255,1)   0%,
      rgba(255,255,255,.97) 22%,
      rgba(255,255,255,.88) 34%,
      rgba(255,255,255,.60) 43%,
      rgba(255,255,255,.20) 52%,
      rgba(255,255,255,.04) 62%,
      transparent          72%),
    url("../../assets/hero.webp?v=20261016b") center 25% / cover no-repeat;
  transform:scale(1.02);
}

/* Hochformatige Viewports: Mobilzuschnitt mit gleichmäßigem Schleier */
@media (min-width: 769px) and (max-aspect-ratio: 1/1){
  .hero-bg{
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.05) 0%,
        transparent 30%,
        rgba(255,255,255,.20) 70%,
        rgba(255,255,255,.55) 100%),
      /* gleichmaessiger Schleier statt harter Kante: der Text laeuft hier
         über fast die ganze Breite, das Bild bleibt ruhiger Hintergrund */
      linear-gradient(90deg,
        rgba(255,255,255,.93)  0%,
        rgba(255,255,255,.90) 38%,
        rgba(255,255,255,.72) 58%,
        rgba(255,255,255,.42) 74%,
        rgba(255,255,255,.22) 88%,
        rgba(255,255,255,.16) 100%),
      url("../../assets/hero-mobile.webp?v=20261016a") center 30% / cover no-repeat;
  }
}

/* Sanfter Fade zur Service-Bar hin (weiß) */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(ellipse at 30% 90%, rgba(255,255,255,.55), transparent 55%),
    linear-gradient(180deg, transparent 78%, rgba(255,255,255,.90) 100%);
  pointer-events:none;
}


/* ============================================================
   HEADER (weiß-transparent, glass)
   ============================================================ */
.header{
  position:relative;
  z-index:20;
  width:100%;
  height:88px;
  display:flex;
  align-items:center;
  background:rgba(255,255,255,.55);
  border-bottom:1px solid rgba(10,10,10,.08);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.header-inner{
  width:min(calc(100% - 80px), var(--home-container));
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:50px;
}

/* Logo */
.logo{
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
}
.logo-mark{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  background:transparent;
  padding:0;
}
.logo-mark img{
  width:44px;
  height:44px;
  object-fit:contain;
}
.logo-copy{display:flex; flex-direction:column}
.logo-name{
  font-family:"Manrope", sans-serif;
  font-size:19px;
  font-weight:700;
  letter-spacing:.14em;
  line-height:1;
  color:var(--home-ink);
}
.logo-sub{
  margin-top:5px;
  font-size:9px;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--home-muted);
  font-weight:600;
}

/* Nav (dark auf light) */
.nav{
  display:flex;
  align-items:center;
  gap:34px;
  margin-left:auto;
}
.nav a{
  position:relative;
  font-size:14px;
  font-weight:600;
  color:var(--home-ink-soft);
  transition:color .25s ease;
}
.nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:0;
  height:1.5px;
  background:linear-gradient(90deg, var(--home-gold-2), var(--home-gold-3));
  transition:width .3s ease;
}
.nav a:hover{color:var(--home-ink)}
.nav a:hover::after{width:100%}

/* Header CTA (bleibt gold) */
.header-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 22px;
  border-radius:100px;
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  color:#0a0a0a;
  font-size:13.5px;
  font-weight:800;
  letter-spacing:.005em;
  box-shadow:0 12px 32px rgba(201,151,31,.28);
  transition:transform .25s ease, box-shadow .25s ease;
}
.header-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 44px rgba(201,151,31,.42);
}
.header-cta svg{width:16px}


/* ============================================================
   HERO MAIN (Content left)
   ============================================================ */
.hero-main{
  position:relative;
  flex:1;
  width:min(calc(100% - 80px), var(--home-container));
  margin:0 auto;
  display:flex;
  align-items:center;
  padding:clamp(130px, 16vh, 170px) 0 clamp(150px, 18vh, 200px);
}
.hero-content{
  position:relative;
  z-index:5;
  max-width:720px;
}

/* Eyebrow (einheitlich mit .compare-kicker/.route-kicker/.wdb-kicker etc.) */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
  font-family:"Manrope",sans-serif;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--home-gold);
}
.eyebrow::before,
.eyebrow::after{
  content:"";
  width:32px;
  height:1.5px;
  background:linear-gradient(90deg, transparent, var(--home-gold-3), transparent);
}

/* H1 SEO (schwarz muted) */
.hero-h1{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Hero Claim (schwarz mit gold italic "Klarheit") */
.hero-claim{
  max-width:820px;
  font-family:"Manrope", sans-serif;
  font-size:clamp(46px, 4.6vw, 78px);
  font-weight:800;
  letter-spacing:-.045em;
  line-height:1.02;
  color:var(--home-ink);
  text-wrap:balance;
}
.hero-claim .gold{
  color:var(--home-gold);
  font-style:italic;
  font-weight:800;
}

/* Description (dunkelgrau) */
.hero-description{
  max-width:600px;
  margin-top:25px;
  font-size:17px;
  line-height:1.6;
  color:var(--home-ink-soft);
}


/* ============================================================
   CTAs (Primary gold, Secondary dark outline)
   ============================================================ */
.hero-actions{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:32px;
  flex-wrap:wrap;
}
.btn-primary, .btn-secondary{
  min-height:58px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border-radius:100px;
  font-size:15px;
  font-weight:800;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.btn-primary{
  padding:0 30px;
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  color:#0a0a0a;
  box-shadow:0 14px 40px rgba(201,151,31,.28);
}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 52px rgba(201,151,31,.42);
}
.btn-primary svg{width:17px}
.btn-secondary{
  padding:0 26px;
  border:1.5px solid var(--home-ink);
  background:transparent;
  color:var(--home-ink);
}
.btn-secondary:hover{
  background:var(--home-ink);
  color:#fff;
  transform:translateY(-2px);
}
.btn-secondary svg{width:16px}


/* ============================================================
   TRUST ROW (dunkel auf hell)
   ============================================================ */
.trust-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  margin-top:36px;
  flex-wrap:nowrap;
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}
.trust-item{
  display:flex;
  align-items:center;
  gap:12px;
}
/* Google-Rating im Hero öffnet die Bewertungen */
.trust-item--link{
  text-decoration:none;
  color:inherit;
  border-radius:10px;
  transition:opacity .25s ease;
}
.trust-item--link:hover{ opacity:.78; }
.trust-item--link:focus-visible{
  outline:2px solid var(--home-gold-3);
  outline-offset:5px;
}
.trust-divider{
  width:1px;
  height:44px;
  background:rgba(10,10,10,.15);
}
.trust-copy{display:flex; flex-direction:column; line-height:1.3}
.trust-copy strong{
  font-size:14px;
  font-weight:800;
  color:var(--home-ink);
  letter-spacing:.005em;
}
.trust-copy span{
  margin-top:2px;
  font-size:12px;
  color:var(--home-muted);
}

/* Team Portraits */
.portraits{
  display:flex;
  align-items:center;
}
.portrait{
  width:38px;
  height:38px;
  margin-left:-10px;
  border:2px solid var(--home-bg);
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.10);
}
.portrait:first-child{margin-left:0}
.portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.portrait.plus{
  display:grid;
  place-items:center;
  background:var(--home-ink);
  color:var(--home-gold-2);
  font-size:14px;
  font-weight:900;
}

.stars{
  color:var(--home-gold);
  font-size:18px;
  letter-spacing:1.5px;
  line-height:1;
}


/* ============================================================
   SERVICE BAR
   ============================================================ */
.service-bar{
  position:absolute;
  left:0; right:0;
  bottom:0;
  z-index:15;
  min-height:118px;
  border-top:1px solid var(--home-line);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}
.services{
  width:min(calc(100% - 80px), var(--home-container));
  height:118px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
}
.service{
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 22px;
  border-right:1px solid var(--home-line);
  transition:background .25s ease;
}
.service:first-child{padding-left:0}
.service:last-of-type{border-right:none}
.service:hover{background:rgba(201,151,31,.06)}
.service-icon{
  flex-shrink:0;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(201,151,31,.10);
  color:var(--home-gold);
}
.service-icon svg{width:22px; height:22px; stroke-width:1.8}
.service-copy strong{
  display:block;
  font-size:14px;
  font-weight:800;
  color:var(--home-ink);
  line-height:1;
}
.service-copy span{
  display:block;
  margin-top:5px;
  font-size:11.5px;
  color:var(--home-muted);
  font-weight:500;
}


/* ============================================================
   MOBILE MENU
   ============================================================ */
.menu-toggle{
  display:none;
  width:44px;
  height:44px;
  border:1px solid rgba(10,10,10,.15);
  border-radius:50%;
  background:transparent;
  color:var(--home-ink);
  cursor:pointer;
}
.mobile-nav{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:28px;
  background:rgba(250,247,239,.98);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.mobile-nav.active{opacity:1; pointer-events:auto}
.mobile-nav a{
  font-family:"Manrope", sans-serif;
  font-size:26px;
  font-weight:700;
  color:var(--home-ink);
}
.mobile-close{
  position:absolute;
  top:22px;
  right:22px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(10,10,10,.15);
  border-radius:50%;
  background:transparent;
  color:var(--home-ink);
  cursor:pointer;
}


/* ============================================================
   ENTRANCE ANIMATION
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
body.loaded .reveal{opacity:1; transform:translateY(0)}
body.loaded .delay-1{transition-delay:.10s}
body.loaded .delay-2{transition-delay:.20s}
body.loaded .delay-3{transition-delay:.30s}
body.loaded .delay-4{transition-delay:.40s}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1250px){
  .nav{gap:22px}
  .services{padding-right:0}
  .service{padding:0 14px}
}

@media (max-width: 1024px){
  .header-inner, .hero-main, .services{
    width:min(calc(100% - 40px), var(--home-container));
  }
  .nav, .header-cta{display:none}
  .menu-toggle{display:grid; place-items:center}
  .hero-content{max-width:75%}
  .hero-claim{font-size:clamp(42px, 5.6vw, 62px)}
  .services{grid-template-columns:repeat(3, 1fr); padding-right:0}
  .service:nth-child(4), .service:nth-child(5){display:none}
}

@media (max-width: 768px){
  .header{height:74px}
  .header-inner, .hero-main{width:calc(100% - 32px)}
  .logo-name{font-size:15px; letter-spacing:.12em}
  .logo-mark{width:38px; height:38px}
  .logo-mark img{width:38px; height:38px}
  .logo-sub{font-size:8px}

  /* ------------------------------------------------------------------
     Mobile-Hero nach dem Vorbild der Silicon-Saxony-Seite:
     Das Bild bekommt eine eigene Box im oberen Bereich, keine Vollfläche,
     und faded nach unten auf deckendes Weiss aus. Der Text startet
     darunter auf sauberem Grund, es steht also nichts mehr im Bild.
     ------------------------------------------------------------------ */
  .hero-bg{
    inset:0 0 auto 0;          /* statt inset:0, Bild nur im oberen Bereich */
    height:var(--hero-img-h);
    transform:none;            /* scale wuerde die Fade-Kante verschieben */
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.30)  0%,
        rgba(255,255,255,.05) 14%,
        rgba(255,255,255,.04) 50%,
        rgba(255,255,255,.26) 66%,
        rgba(255,255,255,.72) 83%,
        rgba(255,255,255,.96) 94%,
        rgba(255,255,255,1)  100%),
      /* eigener Zuschnitt: beide mittig, Seitenverhältnis passend zum Band */
      url("../../assets/hero-mobile.webp?v=20261016a") center 32% / cover no-repeat;
  }

  .hero{
    --hero-img-h:52svh;
    min-height:auto;
  }

  .hero-main{
    align-items:flex-start;
    /* Text beginnt knapp unter der ausgefadeten Bildkante */
    padding:calc(var(--hero-img-h) + 16px) 0 96px;
  }

  .hero-content{max-width:100%}
  .eyebrow{font-size:10.5px; letter-spacing:.16em}
  .hero-h1{font-size:11.5px}
  .hero-claim{
    max-width:100%;
    font-size:clamp(36px, 10vw, 54px);
    line-height:1.02;
  }
  .hero-description{font-size:15px}
  .hero-actions{
    align-items:stretch;
    flex-direction:column;
  }
  .btn-primary, .btn-secondary{width:100%}
  .trust-row{
    gap:14px 18px;
    margin-top:28px;
    /* Nebeneinander wird es unter ~420px zu eng — dann umbrechen statt quetschen */
    flex-wrap:wrap;
  }
  .trust-row .trust-item{min-width:0}
  .trust-divider{display:none}

  .service-bar{
    position:relative;
    min-height:auto;
  }
  .services{
    width:100%;
    height:auto;
    grid-template-columns:1fr;
    padding:8px 16px;
  }
  .service{
    min-height:72px;
    padding:0 10px;
    border-right:0;
    border-bottom:1px solid var(--home-line);
  }
  .service:first-child{padding-left:10px}
  .service:last-of-type{border-bottom:none}
  .service:nth-child(4), .service:nth-child(5){display:flex}
}


/* ============================================================
   02 · STATS-SEKTION — 3D Sculptures on Cream Podium
   Light-Theme mit Gold-Akzent, museum-artige Ästhetik
   ============================================================ */

.ae-stats{
  --st-gold:       var(--home-gold);
  --st-gold-light: var(--home-gold-2);
  --st-gold-dark:  var(--home-gold-3);
  --st-ink:        var(--home-ink);
  --st-ink-soft:   var(--home-ink-soft);
  --st-muted:      var(--home-muted);

  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 68% 42%, rgba(201,151,31,.08), transparent 34%),
    radial-gradient(circle at 15% 82%, rgba(201,151,31,.05), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fbf8f0 55%, #f4ecd6 100%);
}

/* Subtile Papier-Grain */
.ae-stats::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.045;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* Warmer Gold-Glow rechts unten */
.ae-glow{
  position:absolute;
  width:520px;
  height:520px;
  right:12%;
  bottom:-280px;
  border-radius:50%;
  background:rgba(232,181,49,.28);
  filter:blur(130px);
  pointer-events:none;
}

/* Container — 2-Spalten: Content links, Stage rechts, beide bottom-aligned */
.ae-container{
  position:relative;
  z-index:5;
  width:min(calc(100% - 100px), 1500px);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(420px, 460px) minmax(700px, 1fr);
  align-items:end;
  gap:60px;
  padding:56px 0 70px;
}

/* CONTENT — links */
.ae-content{
  position:relative;
  z-index:10;
}

/* Label im einheitlichen Kicker-Style (Linie davor + danach) */
.ae-label{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-bottom:22px;
  font-family:"Manrope", sans-serif;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--home-gold);
}
.ae-label::before,
.ae-label::after{
  content:"";
  width:32px;
  height:1.5px;
  background:linear-gradient(90deg, transparent, var(--home-gold-3), transparent);
}
.ae-label-dot{display:none}

.ae-title{
  max-width:460px;
  font-family:"Manrope", sans-serif;
  font-size:clamp(46px, 4vw, 66px);
  line-height:1.12;
  letter-spacing:-.055em;
  font-weight:800;
  color:var(--st-ink);
  text-wrap:balance;
}
.ae-title-gold{
  color:var(--st-gold);
  font-style:italic;
  position:relative;
}

.ae-description{
  max-width:440px;
  margin-top:26px;
  color:var(--st-ink-soft);
  font-size:16px;
  line-height:1.65;
}

.ae-button{
  min-height:56px;
  margin-top:32px;
  padding:0 26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:1.5px solid var(--st-ink);
  border-radius:100px;
  color:var(--st-ink);
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  background:transparent;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.ae-button:hover{
  transform:translateY(-3px);
  background:var(--st-ink);
  color:#fff;
}
.ae-button svg{width:17px; height:17px}


/* ============================================================
   3D STAGE — rechts neben Content
   ============================================================ */
.ae-stage{
  position:relative;
  width:100%;
  height:440px;
  perspective:1600px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}




/* ============================================================
   STAT-ICON (im Block, oben mittig)
   ============================================================ */
.stat-icon{
  width:36px;
  height:36px;
  margin:0 auto 14px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(201,151,31,.28);
  color:var(--st-gold-dark);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 2px 6px rgba(80,60,20,.10);
}
.stat-icon svg{width:20px; height:20px; stroke-width:1.7}

/* Glass-Block: Icon transparent-weiß mit gold-Kontur */
.block-3 .stat-icon{
  background:rgba(255,255,255,.85);
  border-color:rgba(201,151,31,.35);
}

/* Gold-Block: Icon dunkel getönt für Kontrast auf gold */
.block-4 .stat-icon{
  background:rgba(255,240,190,.35);
  border-color:rgba(80,50,10,.35);
  color:rgba(30,20,5,.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 2px 6px rgba(80,50,10,.20);
}


/* ============================================================
   STAT BLOCKS WRAPPER — sauber ausgerichtet, kein Überstand
   ============================================================ */
.ae-blocks{
  position:absolute;
  left:8%;
  right:8%;
  bottom:0;
  height:410px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:20px;
  z-index:10;
  transform-style:preserve-3d;
  transition:transform .3s ease-out;
  padding-right:16px; /* Reserveplatz für Side-Faces des letzten Blocks */
}


/* ============================================================
   BASE BLOCK — Saubere 3D-Skulptur (Front + Top + Side)
   ============================================================ */
.stat-block{
  --depth:18px;
  position:relative;
  flex:1;
  max-width:170px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  opacity:0;
  transform:translateY(70px);
  transition:
    transform 1s cubic-bezier(.16,1,.3,1),
    opacity .9s ease,
    filter .35s ease;
  cursor:default;
}
.ae-stats.visible .stat-block{
  opacity:1;
  transform:translateY(0);
}
.stat-block:nth-child(1){transition-delay:.05s}
.stat-block:nth-child(2){transition-delay:.15s}
.stat-block:nth-child(3){transition-delay:.25s}
.stat-block:nth-child(4){transition-delay:.35s}

/*
   SIDE FACE (rechts) — Wand, nach oben-rechts geneigt (Fluchtpunkt hinten)
   skewY(-45deg) mit origin oben-links: rechte Kante geht nach oben,
   Ecken treffen sich exakt an Block-Top-Right + Block-Bottom-Right
*/
.stat-block::before{
  content:"";
  position:absolute;
  right:calc(var(--depth) * -1);
  top:0;
  bottom:0;
  width:var(--depth);
  transform:skewY(-45deg);
  transform-origin:0 0;
  z-index:1;
}

/*
   TOP FACE (oben, heller) — sitzt genau auf Block-Top
   skewX(45deg) mit origin unten-links: schiebt rechte Kante nach rechts,
   sodass die rechte-untere Ecke bündig mit Block-Top-Right sitzt
*/
.stat-block::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:calc(var(--depth) * -1);
  height:var(--depth);
  transform:skewX(-45deg);
  transform-origin:0 100%;
  border-top:1px solid rgba(255,255,255,.55);
  z-index:1;
}

/* Ambient Occlusion am Fußpunkt */
.stat-block .stat-inner{position:relative; z-index:5; width:100%; padding:22px 12px 24px}
.stat-block .stat-inner::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:12px;
  background:radial-gradient(ellipse 70% 100% at 50% 100%, rgba(45,30,10,.35), transparent 70%);
  filter:blur(3px);
  pointer-events:none;
  z-index:-1;
}


/* ============================================================
   BLOCK CONTENT
   ============================================================ */
.stat-number{
  font-family:"Manrope", sans-serif;
  font-size:50px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.05em;
  color:var(--st-ink);
  text-shadow:0 2px 6px rgba(255,255,255,.5);
}
.stat-number .plus{
  color:var(--st-gold);
  font-size:.55em;
  margin-left:2px;
  font-style:italic;
}
.stat-number .star{
  color:#fff;
  font-size:.55em;
  margin-left:4px;
  vertical-align:12px;
  text-shadow:0 2px 8px rgba(90,60,15,.55);
}
.stat-label{
  margin-top:14px;
  color:var(--st-ink-soft);
  font-family:"Manrope", sans-serif;
  font-size:10.5px;
  font-weight:800;
  line-height:1.55;
  letter-spacing:.19em;
  text-transform:uppercase;
}


/* ============================================================
   BLOCK 01 · CREAM (glatt, ohne Highlight-Fleck)
   ============================================================ */
.block-1{
  height:200px;
  background:linear-gradient(145deg, #f8f0dc 0%, #e6d5a8 100%);
  border:1px solid rgba(201,151,31,.30);
  box-shadow:
    0 30px 50px rgba(80,60,20,.25),
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -2px 8px rgba(160,120,50,.15);
}
.block-1::before{background:linear-gradient(90deg, rgba(180,140,60,.4), rgba(80,55,10,.55))}
.block-1::after{background:linear-gradient(180deg, rgba(255,250,235,.95), rgba(230,215,180,.75))}


/* ============================================================
   BLOCK 02 · CHAMPAGNE (glatt, ohne Adern)
   ============================================================ */
.block-2{
  height:255px;
  background:linear-gradient(145deg, #f5eeda 0%, #ddc98f 100%);
  border:1px solid rgba(201,151,31,.35);
  box-shadow:
    0 32px 55px rgba(80,60,20,.28),
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -2px 10px rgba(160,120,50,.18);
}
.block-2::before{background:linear-gradient(90deg, rgba(180,140,60,.45), rgba(80,55,10,.6))}
.block-2::after {background:linear-gradient(180deg, rgba(255,250,240,.95), rgba(225,205,155,.7))}


/* ============================================================
   BLOCK 03 · FROSTED GLASS (Milk Glass)
   ============================================================ */
.block-3{
  height:310px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.7));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    inset 0 0 30px rgba(255,255,255,.5),
    inset 4px 4px 12px rgba(255,255,255,.3),
    0 32px 60px rgba(80,60,20,.28),
    0 0 30px rgba(255,220,120,.10);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.block-3::before{background:linear-gradient(90deg, rgba(200,180,140,.5), rgba(140,110,60,.6))}
.block-3::after {background:linear-gradient(180deg, rgba(255,255,255,1), rgba(240,235,220,.85))}


/* ============================================================
   BLOCK 04 · MASSIVE GOLD — glatter Verlauf, kein Shine-Streifen
   ============================================================ */
.block-4{
  height:380px;
  background:linear-gradient(145deg, #b57e18 0%, #e6b944 30%, #f0ca63 55%, #c99226 85%, #9b6914 100%);
  border:1px solid #f6d578;
  box-shadow:
    inset 0 0 40px rgba(255,240,180,.25),
    inset 0 2px 0 rgba(255,255,255,.5),
    0 0 40px rgba(233,186,63,.35),
    0 40px 70px rgba(80,50,10,.50);
}
.block-4::before{background:linear-gradient(90deg, #a06810, #4e3106)}
.block-4::after {background:linear-gradient(180deg, #fbe390, #b57e18)}
.block-4 .stat-label{color:rgba(30,20,5,.72)}
.block-4 .stat-number{color:#fff; text-shadow:0 2px 12px rgba(80,50,10,.45)}

/* block-light + block-shimmer + ae-side-copy entfernt (User-Wunsch) */
.block-light, .block-shimmer{display:none}


/* ============================================================
   HOVER-EFFEKTE
   ============================================================ */
.stat-block:hover{
  transform:translateY(-10px) !important;
}
.block-4:hover{
  box-shadow:
    inset 0 0 40px rgba(255,240,180,.35),
    inset 0 2px 0 rgba(255,255,255,.6),
    0 0 55px rgba(233,186,63,.55),
    0 45px 75px rgba(80,50,10,.55);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1250px){
  .ae-container{
    width:calc(100% - 60px);
    gap:60px;
  }
}

@media (max-width: 1024px){
  .ae-container{
    /* Desktop-Grid verlangt 420px + 700px Mindestbreite — ab hier einspaltig,
       sonst ragen Content und Stage aus dem Viewport. */
    grid-template-columns:1fr;
    gap:50px;
    padding:48px 0 60px;
    width:calc(100% - 40px);
  }
  .ae-content{max-width:100%}
  .ae-stage{height:440px; max-width:720px; margin:0 auto}
}

@media (max-width: 768px){
  .ae-container{padding:40px 0 50px; width:calc(100% - 32px)}
  .ae-title{font-size:clamp(36px, 9vw, 46px)}
  /* Sprungmarke zum Logo-Slider: mobil liegt der direkt darunter,
     der Button bringt dort nichts und kostet nur Höhe. */
  .ae-button{display:none}
  .ae-stage{height:340px; perspective:none; max-width:100%}
  /* min-width:0, sonst schrumpfen die Blöcke nicht unter ihren Inhalt */
  .ae-blocks{
    left:0;
    right:0;
    gap:6px;
    bottom:0;
    height:340px;
    padding-right:0;
  }
  .stat-block{min-width:0; max-width:none}
  .stat-block::before, .stat-block::after{display:none}
  .stat-block .stat-inner{padding:16px 5px 18px}
  .stat-number{font-size:clamp(19px, 6vw, 26px); letter-spacing:-.045em}
  .stat-label{
    /* skaliert mit der Viewportbreite, sonst lief "Bewertungen" unter
       360px aus dem Block; Trennung als Sicherheitsnetz */
    font-size:clamp(7px, 2.1vw, 8.5px);
    letter-spacing:.08em;
    line-height:1.4;
    margin-top:8px;
    overflow-wrap:break-word;
    hyphens:auto;
  }
  .stat-icon{width:28px; height:28px; margin-bottom:8px}
  .stat-icon svg{width:15px; height:15px}
  .block-1{height:130px}
  .block-2{height:180px}
  .block-3{height:230px}
  .block-4{height:280px}
}


/* ============================================================
   03 · LOGO SLIDER — endloser Loop, rechts nach links, kein Hover-Stop
   ============================================================ */
.ae-logos{
  position:relative;
  padding:56px 0 72px;
  background:linear-gradient(180deg, #f4ecd6 0%, #faf7ef 45%, #ffffff 100%);
  overflow:hidden;
}

.ae-logos-header{
  width:min(calc(100% - 80px), var(--home-container));
  margin:0 auto 40px;
  text-align:center;
}
.ae-logos-label{
  display:inline-block;
  font-family:"Manrope", sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--home-gold);
  position:relative;
  padding:0 40px;
}
.ae-logos-label::before,
.ae-logos-label::after{
  content:"";
  position:absolute;
  top:50%;
  width:28px;
  height:1.5px;
  background:linear-gradient(90deg, transparent, var(--home-gold-3));
}
.ae-logos-label::before{
  right:100%;
  background:linear-gradient(90deg, transparent, var(--home-gold-3));
}
.ae-logos-label::after{
  left:100%;
  background:linear-gradient(90deg, var(--home-gold-3), transparent);
}

/* Viewport mit weißen Fades an den Rändern */
.ae-logos-viewport{
  position:relative;
  overflow:hidden;
  mask-image:linear-gradient(90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%);
}

/* Track: läuft von 0 nach -50% (Set-2 rutscht auf Set-1-Position → seamless) */
.ae-logos-track{
  display:flex;
  width:max-content;
  animation:ae-logo-scroll 55s linear infinite;
}

.ae-logos-set{
  display:flex;
  align-items:center;
  gap:56px;
  padding-right:56px;
  flex-shrink:0;
}

/* Jedes Logo ist ein Link zur Anbieter-Website.
   Das <a> übernimmt die Flex-Maße, damit der Slider-Takt gleich bleibt. */
.ae-logos-set a{
  flex:0 0 130px;
  display:flex;
  align-items:center;
  justify-content:center;
  height:44px;
  border-radius:8px;
  text-decoration:none;
}
.ae-logos-set a:focus-visible{
  outline:2px solid var(--home-gold-3);
  outline-offset:6px;
}

.ae-logos-set img{
  height:44px;
  width:130px;
  max-width:130px;
  flex:0 0 130px;
  object-fit:contain;
  object-position:center;
  filter:grayscale(1) brightness(.35) contrast(1.1);
  opacity:.55;
  transition:filter .35s ease, opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.ae-logos-set img:hover,
.ae-logos-set a:hover img,
.ae-logos-set a:focus-visible img{
  filter:none;
  opacity:1;
  transform:scale(1.06);
}

/* Der Lauf pausiert beim Hover/Fokus (Maus, Tastatur) und per JS bei Touch,
   damit man ein Logo überhaupt treffen kann. */
.ae-logos-viewport:hover .ae-logos-track,
.ae-logos-viewport:focus-within .ae-logos-track,
.ae-logos-viewport.is-paused .ae-logos-track{
  animation-play-state:paused;
}

@keyframes ae-logo-scroll{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}

/* Kein Pause-on-Hover (Wunsch: durchlaufen lassen) */

@media (max-width: 768px){
  .ae-logos{padding:50px 0 55px}
  .ae-logos-header{margin-bottom:28px}
  .ae-logos-label{font-size:10.5px; letter-spacing:.18em; padding:0 24px}
  .ae-logos-label::before, .ae-logos-label::after{width:18px}
  .ae-logos-set{gap:44px; padding-right:44px}
  .ae-logos-set img{height:32px; max-width:110px}
  .ae-logos-track{animation-duration:38s}
}


/* ============================================================
   03 · PROBLEM — Flip-Cards (weiß, gerundet, Hover-Flip)
   ============================================================ */
.p-desk{
  position:relative;
  padding:96px 0 110px;
  background:
    radial-gradient(circle at 78% 42%, rgba(201,151,31,.06), transparent 42%),
    radial-gradient(circle at 8% 62%, rgba(201,151,31,.04), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #fbf8f0 45%, #ffffff 100%);
  overflow:hidden;
}

/* Header */
.p-desk-header{
  width:min(calc(100% - 80px), 900px);
  margin:0 auto 60px;
  text-align:center;
}
.p-desk-label{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-bottom:24px;
  font-family:"Manrope",sans-serif;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--home-gold);
}
.p-desk-label::before,
.p-desk-label::after{
  content:"";
  width:32px;
  height:1.5px;
  background:linear-gradient(90deg, transparent, var(--home-gold-3), transparent);
}
.p-desk-title{
  font-family:"Manrope",sans-serif;
  font-size:clamp(38px, 3.4vw, 58px);
  line-height:1.12;
  letter-spacing:-.045em;
  font-weight:800;
  color:var(--home-ink);
  text-wrap:balance;
  max-width:820px;
  margin:0 auto;
}
.p-desk-title em{
  color:var(--home-gold);
  font-style:italic;
  font-weight:800;
}
.p-desk-sub{
  max-width:600px;
  margin:22px auto 0;
  font-size:16px;
  color:var(--home-ink-soft);
  line-height:1.65;
}

/* Deck */
.p-deck{
  width:min(calc(100% - 60px), 1500px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:24px;
}

/* Card wrapper */
.p-card{
  position:relative;
  height:360px;
  perspective:1600px;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.p-desk.visible .p-card{opacity:1; transform:translateY(0)}
.p-desk.visible .p-card:nth-child(1){transition-delay:.00s}
.p-desk.visible .p-card:nth-child(2){transition-delay:.10s}
.p-desk.visible .p-card:nth-child(3){transition-delay:.20s}
.p-desk.visible .p-card:nth-child(4){transition-delay:.30s}
.p-desk.visible .p-card:nth-child(5){transition-delay:.40s}

.p-card-inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.4,.05,.2,1);
}
.p-card.flipped .p-card-inner{transform:rotateY(180deg)}
/* Hover nur mit echtem Zeiger, auf Touch bliebe er nach dem Antippen hängen */
@media (hover: hover) and (pointer: fine){
  .p-card:hover .p-card-inner{transform:rotateY(180deg)}
}

.p-face{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  padding:36px 26px 28px;
  background:#ffffff;
  border:1px solid rgba(10,10,10,.06);
  border-radius:22px;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 12px 30px rgba(80,60,20,.08),
    0 2px 6px rgba(80,60,20,.04);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  overflow:hidden;
}
.p-card.flipped .p-face{
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 22px 44px rgba(80,60,20,.14),
    0 4px 10px rgba(80,60,20,.06);
}

/* FRONT */
.p-face-front{
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:26px;
}
.p-icon{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(243,211,106,.18), rgba(201,151,31,.10));
  border:1px solid rgba(201,151,31,.28);
  color:var(--home-gold-3);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.p-icon svg{width:28px; height:28px; stroke-width:1.7}
@media (hover: hover) and (pointer: fine){
  .p-card:hover .p-face{
    box-shadow:
      0 1px 0 rgba(255,255,255,1) inset,
      0 22px 44px rgba(80,60,20,.14),
      0 4px 10px rgba(80,60,20,.06);
  }
  .p-card:hover .p-icon{transform:translateY(-2px) rotate(-2deg)}
}

.p-front-quote{
  font-family:Georgia, "Times New Roman", serif;
  font-size:20px;
  font-style:italic;
  font-weight:500;
  line-height:1.36;
  color:var(--home-ink);
  letter-spacing:-.005em;
  text-wrap:balance;
}
.p-front-quote::before{content:"„"; margin-right:1px}
.p-front-quote::after {content:"\""; margin-left:1px}

.p-front-hint{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:"Manrope",sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--home-muted);
  opacity:.7;
  transition:color .3s ease, opacity .3s ease;
}
.p-front-hint svg{width:12px; height:12px}
@media (hover: hover) and (pointer: fine){
  .p-card:hover .p-front-hint{color:var(--home-gold); opacity:1}
}

/* BACK */
.p-face-back{
  align-items:flex-start;
  justify-content:center;
  padding:34px 28px 30px;
  transform:rotateY(180deg);
  background:linear-gradient(160deg, #ffffff 0%, #fbf8f0 100%);
}
.p-back-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  font-family:"Manrope",sans-serif;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--home-gold);
}
.p-back-tag::before{
  content:"";
  width:14px;
  height:1.5px;
  background:var(--home-gold-3);
}
.p-back-text{
  font-family:"DM Sans",sans-serif;
  font-size:14.5px;
  line-height:1.6;
  color:var(--home-ink-soft);
  letter-spacing:-.003em;
}

/* Footer */
.p-desk-footer{
  margin-top:64px;
  text-align:center;
}
.p-desk-footer-q{
  font-family:"Manrope",sans-serif;
  font-size:18px;
  font-weight:600;
  color:var(--home-ink-soft);
  margin-bottom:22px;
}
.p-desk-cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding:0 30px;
  border-radius:100px;
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  color:#0a0a0a;
  font-family:"DM Sans",sans-serif;
  font-size:15px;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 14px 40px rgba(201,151,31,.28);
  transition:transform .25s ease, box-shadow .25s ease;
}
.p-desk-cta:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 52px rgba(201,151,31,.42);
}
.p-desk-cta svg{width:17px; height:17px}

/* Responsive */
@media (max-width: 1200px){
  .p-deck{grid-template-columns:repeat(3, 1fr); gap:26px 22px}
}
@media (max-width: 768px){
  .p-desk{padding:64px 0 80px}
  .p-desk-header{margin-bottom:40px}
  .p-desk-title{font-size:clamp(30px, 8vw, 40px)}
  .p-deck{grid-template-columns:1fr; gap:22px; width:calc(100% - 30px)}
  .p-card{height:300px}
  .p-front-quote{font-size:18px}
}


/* ============================================================
   05 · DIREKTVERGLEICH — Auto-Slider mit 6 Szenarien
   ============================================================ */
:root{
  --home-gold-soft: #fbf3dc;
  --cmp-neutral-1:  #f2f0eb;
  --cmp-neutral-2:  #e8e5dd;
  --cmp-neutral-ink:#6a655d;
}

.compare-section{
  position:relative;
  padding:110px 50px 120px;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 24%, rgba(201,151,31,.08), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbf8f0 55%, #f4ecd6 100%);
}
.compare-inner{
  position:relative;
  z-index:2;
  width:min(1450px, 100%);
  margin:0 auto;
}

/* Header (Aura-Homepage-Stil) */
.compare-header{
  max-width:930px;
  margin:0 auto 65px;
  text-align:center;
}
.compare-kicker{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-bottom:24px;
  font-family:"Manrope",sans-serif;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--home-gold);
}
.compare-kicker::before,
.compare-kicker::after{
  content:"";
  width:32px;
  height:1.5px;
  background:linear-gradient(90deg, transparent, var(--home-gold-3), transparent);
}
.compare-header h2{
  font-family:"Manrope",sans-serif;
  font-size:clamp(42px, 4.4vw, 68px);
  line-height:1.12;
  letter-spacing:-.045em;
  font-weight:800;
  color:var(--home-ink);
  text-wrap:balance;
}
.compare-header h2 em{
  display:block;
  color:var(--home-gold);
  font-style:italic;
  font-weight:800;
}
.compare-header p{
  max-width:640px;
  margin:24px auto 0;
  font-size:16px;
  line-height:1.65;
  color:var(--home-ink-soft);
}

/* Layout 2 Spalten */
.compare-app{
  display:grid;
  grid-template-columns:360px minmax(0, 1fr);
  gap:28px;
}

/* Szenarien-Panel */
.scenario-panel{
  position:relative;
  padding:26px 22px;
  border-radius:24px;
  background:#ffffff;
  border:1px solid var(--home-line);
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 25px 60px rgba(80,60,20,.10);
}
.panel-title{
  margin-bottom:18px;
  padding-left:4px;
  font-family:"Manrope",sans-serif;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--home-muted);
}
.scenario-list{
  display:grid;
  gap:6px;
}
.scenario{
  position:relative;
  display:grid;
  grid-template-columns:38px 1fr;
  gap:12px;
  align-items:center;
  min-height:66px;
  padding:11px 14px 11px 16px;
  border-radius:14px;
  cursor:pointer;
  transition:background .3s ease, transform .3s ease;
}
.scenario:hover{background:var(--home-bg)}
.scenario.active{
  background:var(--home-gold-soft);
  transform:translateX(4px);
}
.scenario::after{
  content:"";
  position:absolute;
  left:4px;
  top:12px;
  bottom:12px;
  width:2.5px;
  border-radius:4px;
  background:var(--home-gold);
  transform:scaleY(0);
  transform-origin:center;
  transition:transform .3s ease;
}
.scenario.active::after{transform:scaleY(1)}
.scenario-num{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--cmp-neutral-1);
  color:var(--home-muted);
  font-family:"Manrope",sans-serif;
  font-size:11px;
  font-weight:800;
  transition:.3s ease;
}
.scenario.active .scenario-num{
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  color:#0a0a0a;
  box-shadow:0 8px 18px rgba(201,151,31,.28);
}
.scenario-copy small{
  display:block;
  margin-bottom:3px;
  font-family:"Manrope",sans-serif;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--home-muted);
}
.scenario-copy strong{
  display:block;
  font-family:"DM Sans",sans-serif;
  font-size:13px;
  font-weight:700;
  line-height:1.36;
  color:var(--home-ink);
  letter-spacing:-.005em;
}

/* Progress-Rail */
.auto-progress{
  margin:20px 4px 12px;
  height:3px;
  border-radius:10px;
  background:#eee9dc;
  overflow:hidden;
}
.auto-progress span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--home-gold-2), var(--home-gold-3));
  transition:width .12s linear;
}
.panel-note{
  padding:0 4px;
  font-family:"DM Sans",sans-serif;
  font-size:10.5px;
  line-height:1.5;
  color:var(--home-muted);
}


/* Split-Card */
.split-card{
  position:relative;
  min-height:585px;
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  border-radius:28px;
  border:1px solid var(--home-line);
  background:#ffffff;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 30px 100px rgba(80,60,20,.12);
}

.split-divider{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:1px;
  transform:translateX(-50%);
  background:linear-gradient(to bottom,
    transparent,
    #e6dfc9 15%,
    #f0d585 50%,
    #e6dfc9 85%,
    transparent);
  z-index:10;
}
.split-divider::after{
  content:"";
  position:absolute;
  left:50%;
  top:-60px;
  width:1px;
  height:60px;
  transform:translateX(-50%);
  background:linear-gradient(to bottom, transparent, var(--home-gold), transparent);
  box-shadow:0 0 12px rgba(201,151,31,.40);
  animation:dividerScan 4s linear infinite;
}
@keyframes dividerScan{
  from{top:-60px}
  to  {top:100%}
}

/* Halves */
.compare-half{
  position:relative;
  padding:38px 38px 34px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* OHNE (gedämpftes Neutral) */
.without{
  background:
    radial-gradient(circle at 15% 0%, rgba(90,80,60,.06), transparent 35%),
    linear-gradient(145deg, #f4f2ed 0%, #ebe8df 100%);
}

/* MIT AURA (Gold-Verlauf + Logo als Wasserzeichen) */
.with-aura{
  background:
    radial-gradient(circle at 90% 0%, rgba(201,151,31,.18), transparent 38%),
    linear-gradient(145deg, #ffffff 0%, #fbf3dc 100%);
}
.with-aura::before{
  content:"";
  position:absolute;
  right:-40px;
  bottom:-50px;
  width:300px;
  height:300px;
  background-image:url("../../assets/auralogo.webp");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.09;
  pointer-events:none;
  z-index:0;
}
.with-aura > *{position:relative; z-index:1}

/* Badge */
.half-badge{
  width:max-content;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  margin-bottom:32px;
  border-radius:100px;
  font-family:"Manrope",sans-serif;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.without .half-badge{
  background:#e0ddd5;
  color:var(--cmp-neutral-ink);
}
.with-aura .half-badge{
  background:var(--home-gold-soft);
  color:var(--home-gold-3);
}
.half-badge i{
  width:6px;
  height:6px;
  border-radius:50%;
  display:block;
}
.without .half-badge i{background:#a19a8c}
.with-aura .half-badge i{
  background:var(--home-gold);
  box-shadow:0 0 10px rgba(201,151,31,.55);
}

/* Kicker/Title/Text */
.half-kicker{
  margin-bottom:12px;
  font-family:"Manrope",sans-serif;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--home-muted);
}
.half-title{
  max-width:490px;
  margin-bottom:20px;
  font-family:"Manrope",sans-serif;
  font-size:clamp(30px, 2.8vw, 42px);
  line-height:1.12;
  letter-spacing:-.04em;
  font-weight:800;
}
.without .half-title{color:#5a5548}
.with-aura .half-title{color:var(--home-ink)}
.half-title span{
  display:block;
  margin-top:6px;
}
.without .half-title span{color:#8c8578}
.with-aura .half-title span{
  color:var(--home-gold);
  font-style:italic;
}

.half-text{
  max-width:520px;
  font-family:"DM Sans",sans-serif;
  font-size:14.5px;
  line-height:1.65;
  color:var(--home-ink-soft);
}
.without .half-text{color:#6f6a5f}
.with-aura .half-text{color:var(--home-ink-soft)}
.half-text strong{
  font-weight:700;
  color:var(--home-ink);
}
.with-aura .half-text strong{color:var(--home-gold-3)}

/* Flow */
.flow-visual{
  margin-top:auto;
  padding-top:30px;
}
.flow-title{
  margin-bottom:12px;
  font-family:"Manrope",sans-serif;
  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--home-muted);
}
.flow{
  display:flex;
  align-items:center;
  gap:8px;
}
.flow-node{
  flex:1;
  padding:10px 8px;
  border-radius:9px;
  text-align:center;
  font-family:"DM Sans",sans-serif;
  font-size:10px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:.01em;
}
.without .flow-node{
  background:#e3dfd5;
  color:#6f6a5f;
}
.with-aura .flow-node{
  background:var(--home-gold-soft);
  color:var(--home-gold-3);
}
.flow-arrow{
  font-family:"Manrope",sans-serif;
  font-size:12px;
  color:#a8a294;
}
.with-aura .flow-arrow{color:var(--home-gold)}

/* Footer */
.half-footer{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid rgba(70,60,30,.10);
}
.half-footer small{
  display:block;
  margin-bottom:5px;
  font-family:"Manrope",sans-serif;
  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--home-muted);
}
.half-footer strong{
  font-family:"DM Sans",sans-serif;
  font-size:14px;
  font-weight:700;
}
.without .half-footer strong{color:#5a5548}
.with-aura .half-footer strong{color:var(--home-gold-3)}

/* Status-Meter */
.status-meter{
  display:flex;
  gap:4px;
  align-items:flex-end;
}
.status-meter span{
  width:6px;
  border-radius:5px;
  display:block;
}
.status-meter span:nth-child(1){height:7px}
.status-meter span:nth-child(2){height:11px}
.status-meter span:nth-child(3){height:15px}
.status-meter span:nth-child(4){height:19px}
.status-meter span:nth-child(5){height:24px}
.without .status-meter span{background:#b5ada0}
.with-aura .status-meter span{background:var(--home-gold)}
.with-aura .status-meter span:nth-child(4),
.with-aura .status-meter span:nth-child(5){opacity:.20}

/* Bottom-CTA */
.compare-bottom{
  display:flex;
  justify-content:center;
  margin-top:40px;
}
.compare-bottom p{
  max-width:720px;
  text-align:center;
  font-family:"DM Sans",sans-serif;
  font-size:15px;
  line-height:1.6;
  color:var(--home-ink-soft);
}
.compare-bottom strong{
  color:var(--home-ink);
  font-weight:700;
}
.compare-bottom em{
  color:var(--home-gold);
  font-style:italic;
  font-weight:700;
}

/* Aktives Szenario im Klartext, nur mobil sichtbar */
.cmp-active{display:none}

/* Responsive */
@media (max-width:1000px){
  .compare-app{grid-template-columns:1fr}
  .scenario-list{grid-template-columns:repeat(2, 1fr)}
}

/* Mobil: Szenarien als wischbare Chip-Leiste, klebt unter der Navigation */
@media (max-width:750px){
  .compare-section{
    padding:76px 18px 84px;
    /* clip statt hidden, sonst wäre position:sticky der Chips wirkungslos */
    overflow:visible;
    overflow-x:clip;
  }
  .compare-header{margin-bottom:26px}
  /* minmax(0,...) statt 1fr: sonst verhindert das auto-Minimum, dass die
     Chip-Leiste schmaler als ihr Inhalt wird, und sie sprengt das Grid. */
  .compare-app{grid-template-columns:minmax(0, 1fr); gap:14px}
  .scenario-panel{min-width:0}
  .scenario-list{min-width:0}

  /* ---- Chip-Leiste ---- */
  .scenario-panel{
    position:sticky;
    top:63px;                 /* direkt unter der fixen Navigation (67px) */
    z-index:20;
    margin-inline:-18px;      /* randlos, damit man bis zum Displayrand wischt */
    padding:11px 0 9px;
    border-radius:0;
    border-left:0;
    border-right:0;
    border-top-color:transparent;
    background:rgba(255,255,255,.93);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    box-shadow:0 10px 26px rgba(80,60,20,.09);
  }
  .panel-title{
    margin:0 18px 9px;
    padding-left:0;
    font-size:9px;
  }
  .scenario-list{
    display:flex;
    grid-template-columns:none;
    gap:8px;
    padding:2px 18px 4px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scroll-padding-inline:18px;
    scrollbar-width:none;
  }
  .scenario-list::-webkit-scrollbar{display:none}

  .scenario{
    flex:0 0 auto;
    scroll-snap-align:center;
    display:inline-flex;
    align-items:center;
    gap:9px;
    min-height:0;
    padding:7px 15px 7px 8px;
    border:1px solid var(--home-line);
    border-radius:100px;
    background:#ffffff;
    transition:background .25s ease, border-color .25s ease;
  }
  .scenario:hover{background:#ffffff}
  .scenario::after{display:none}
  .scenario.active{
    transform:none;
    background:var(--home-gold-soft);
    border-color:rgba(201,151,31,.40);
  }
  .scenario.active:hover{background:var(--home-gold-soft)}
  .scenario-num{
    width:25px;
    height:25px;
    border-radius:50%;
    font-size:10px;
  }
  .scenario-copy{display:block}
  .scenario-copy small{
    margin-bottom:0;
    font-size:10px;
    letter-spacing:.10em;
    white-space:nowrap;
    color:var(--home-ink-soft);
  }
  .scenario.active .scenario-copy small{color:var(--home-gold-3)}
  /* Volltext bleibt für Screenreader erhalten, nur optisch ausgeblendet */
  .scenario-copy strong{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .auto-progress{margin:9px 18px 0; height:2px}

  /* ---- Aktives Szenario im Klartext ---- */
  .cmp-active{
    display:flex;
    align-items:center;
    gap:11px;
    padding:2px 2px 0;
  }
  .cmp-active-num{
    flex:0 0 auto;
    font-family:"Manrope",sans-serif;
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    color:var(--home-gold-3);
  }
  .cmp-active-text{
    font-family:"Manrope",sans-serif;
    font-size:17px;
    font-weight:800;
    line-height:1.22;
    letter-spacing:-.025em;
    color:var(--home-ink);
  }

  /* ---- Beide Haelften kompakt untereinander ---- */
  .split-card{
    grid-template-columns:1fr;
    min-height:0;
    border-radius:22px;
  }
  .split-divider{display:none}
  .compare-half{
    min-height:0;
    padding:20px 20px 18px;
  }
  .half-badge{
    margin-bottom:12px;
    padding:6px 11px;
    font-size:9px;
  }
  .half-kicker{margin-bottom:7px; font-size:9px}
  .half-title{
    margin-bottom:10px;
    font-size:clamp(21px, 5.8vw, 26px);
    line-height:1.14;
    letter-spacing:-.03em;
  }
  .half-title span{margin-top:2px}
  .half-text{font-size:13.5px; line-height:1.55}
  .flow-visual{padding-top:16px}
  .flow-title{margin-bottom:8px; font-size:8.5px}
  .flow{gap:6px}
  .flow-node{padding:8px 5px; font-size:9.5px}
  .half-footer{
    margin-top:14px;
    padding-top:12px;
  }
  .half-footer small{margin-bottom:3px; font-size:8.5px}
  .half-footer strong{font-size:12.5px}
  .status-meter{transform:scale(.85); transform-origin:right bottom}
  .with-aura{border-top:1px solid rgba(201,151,31,.20)}
  .with-aura::before{
    width:180px;
    height:180px;
    right:-32px;
    bottom:-34px;
  }
}


/* ============================================================
   06 · GESCHÄFTSFÜHRER — Toggle + Parallax + freistehende Portraits
   (kompakt: alles in einem typischen Desktop-Viewport sichtbar)
   ============================================================ */
.gf-section{
  position:relative;
  padding:24px 50px 32px;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 30%, rgba(201,151,31,.06), transparent 38%),
    radial-gradient(circle at 82% 78%, rgba(201,151,31,.05), transparent 34%),
    linear-gradient(180deg, #f4ecd6 0%, #fbf8f0 22%, #ffffff 55%, #faf7ef 100%);
}
.gf-inner{
  position:relative;
  z-index:2;
  width:min(1400px, 100%);
  margin:0 auto;
}

/* Header */
.gf-header{
  text-align:center;
  margin-bottom:16px;
}
.gf-kicker{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  font-family:"Manrope",sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--home-gold);
}
.gf-kicker::before,
.gf-kicker::after{
  content:"";
  width:28px;
  height:1.5px;
  background:linear-gradient(90deg, transparent, var(--home-gold-3), transparent);
}
.gf-title{
  max-width:820px;
  margin:0 auto 18px;
  font-family:"Manrope",sans-serif;
  font-size:clamp(28px, 2.8vw, 40px);
  line-height:1.12;
  letter-spacing:-.04em;
  font-weight:800;
  color:var(--home-ink);
  text-wrap:balance;
}
.gf-title em{
  display:block;
  margin-top:4px;
  color:var(--home-gold);
  font-style:italic;
  font-weight:800;
}


/* ============================================================
   TOGGLE (iPhone-Style Regler)
   ============================================================ */
.gf-toggle{
  position:relative;
  display:inline-flex;
  padding:5px;
  background:#ffffff;
  border:1px solid rgba(10,10,10,.08);
  border-radius:100px;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 10px 24px rgba(80,60,20,.10);
  user-select:none;
}
.gf-thumb{
  position:absolute;
  top:5px;
  left:5px;
  width:calc(50% - 5px);
  height:calc(100% - 10px);
  border-radius:100px;
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  box-shadow:0 6px 18px rgba(201,151,31,.32);
  transform:translateX(0);
  transition:transform .5s cubic-bezier(.4,.05,.2,1);
  z-index:0;
}
.gf-toggle[data-active="sebastian"] .gf-thumb{
  transform:translateX(100%);
}
.gf-option{
  position:relative;
  z-index:1;
  padding:9px 24px;
  min-width:150px;
  border:none;
  background:transparent;
  font-family:"Manrope",sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--home-muted);
  cursor:pointer;
  border-radius:100px;
  transition:color .4s ease .1s;
}
.gf-toggle[data-active="lukas"] .gf-option[data-value="lukas"],
.gf-toggle[data-active="sebastian"] .gf-option[data-value="sebastian"]{
  color:#0a0a0a;
}


/* ============================================================
   STAGE · zwei Personas übereinander (fade), bottom-aligned
   ============================================================ */
.gf-stage{
  position:relative;
  min-height:430px;
  margin-top:4px;
}
.gf-persona{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;   /* mehr Abstand zwischen Portrait und Card */
  align-items:end;
  opacity:0;
  pointer-events:none;
  transition:opacity .6s ease;
}
.gf-persona.active{
  opacity:1;
  pointer-events:auto;
}


/* PORTRAIT · freistehend, kein Container, kein BG, kein Border */
.gf-portrait{
  position:relative;
  width:100%;
  height:100%;
  min-height:430px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  transform:translateX(0);
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
  overflow:visible;
}
.gf-portrait-inner{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.gf-portrait img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:430px;
  object-fit:contain;
  object-position:center bottom;
  /* Sanfter Schatten unter der Person (kein Container-Shadow) */
  filter:drop-shadow(0 22px 32px rgba(80,60,20,.16)) drop-shadow(0 8px 14px rgba(80,60,20,.08));
}

/* Für Lucas Bild rechts-bündig (er steht links im Layout) */
.gf-persona[data-persona="lukas"] .gf-portrait-inner{justify-content:flex-end}
.gf-persona[data-persona="lukas"] .gf-portrait img{margin-right:12px}

/* Für Sebastian Bild links-bündig (er steht rechts im Layout) */
.gf-persona[data-persona="sebastian"] .gf-portrait-inner{justify-content:flex-start}
.gf-persona[data-persona="sebastian"] .gf-portrait img{margin-left:12px}

/* Slide-in direction */
.gf-persona[data-persona="lukas"] .gf-portrait{
  transform:translateX(-40px);
}
.gf-persona[data-persona="lukas"].active .gf-portrait{
  transform:translateX(0);
}
.gf-persona[data-persona="sebastian"] .gf-portrait{
  transform:translateX(40px);
}
.gf-persona[data-persona="sebastian"].active .gf-portrait{
  transform:translateX(0);
}


/* ============================================================
   CARD · Editorial-Premium: warm, gestufte Schatten, Gold-Line
   ============================================================ */
.gf-card{
  position:relative;
  padding:30px 34px 26px;
  margin-bottom:0;  /* Card bündig mit Bild-Bottom, Divider darunter */
  background:linear-gradient(160deg, #ffffff 0%, #fdf7e4 100%);
  border-radius:22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(201,151,31,.10),
    0 2px 4px rgba(80,60,20,.04),
    0 10px 24px rgba(80,60,20,.08),
    0 30px 70px rgba(80,60,20,.12);
  transform:translateY(14px);
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;
}
.gf-persona.active .gf-card{
  transform:translateY(0);
}

/* Feine Gold-Linie oben als redaktionelles Detail */
.gf-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--home-gold-3) 20%,
    var(--home-gold-2) 50%,
    var(--home-gold-3) 80%,
    transparent 100%);
}

/* Zart-goldene Ecken-Marker (redaktionell) */
.gf-card::after{
  content:"";
  position:absolute;
  top:16px;
  right:16px;
  width:12px;
  height:12px;
  border-top:1.5px solid rgba(201,151,31,.55);
  border-right:1.5px solid rgba(201,151,31,.55);
  opacity:.85;
}

/* EYEBROW mit Gold-Punkt */
.gf-card-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:12px;
  font-family:"Manrope",sans-serif;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--home-gold);
}
.gf-card-eyebrow::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--home-gold);
  box-shadow:0 0 0 3px rgba(201,151,31,.15);
}

/* NAME — editorial, kompakt */
.gf-card-name{
  margin-bottom:6px;
  font-family:"Manrope",sans-serif;
  font-size:clamp(24px, 2.1vw, 32px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1;
  color:var(--home-ink);
}

/* Signature-Line unter Namen */
.gf-card-name + .gf-card-text{
  margin-top:22px;
  position:relative;
}
.gf-card-name + .gf-card-text::before{
  content:"";
  position:absolute;
  top:-12px;
  left:0;
  width:32px;
  height:1.5px;
  background:linear-gradient(90deg, var(--home-gold-3), transparent);
}

.gf-card-text{
  margin-bottom:11px;
  font-family:"DM Sans",sans-serif;
  font-size:13.5px;
  line-height:1.6;
  color:var(--home-ink-soft);
  letter-spacing:-.003em;
}
.gf-card-text strong{
  color:var(--home-ink);
  font-weight:700;
}

/* ZITAT — dekorativ, aber kompakt */
.gf-card-quote{
  position:relative;
  margin:16px 0 18px;
  padding:14px 18px 14px 30px;
  font-family:Georgia, "Times New Roman", serif;
  font-size:13.5px;
  font-style:italic;
  font-weight:500;
  line-height:1.5;
  color:var(--home-ink);
  background:linear-gradient(90deg, rgba(201,151,31,.05), transparent 70%);
  border-left:2px solid var(--home-gold);
}
.gf-card-quote::before{
  content:"\201E";
  position:absolute;
  top:-4px;
  left:10px;
  font-family:Georgia, serif;
  font-size:36px;
  line-height:1;
  color:var(--home-gold);
  opacity:.45;
  font-style:normal;
}

/* LEGAL-Zeile — dezent, mit Gold-Marker */
.gf-card-legal{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(201,151,31,.18);
  font-family:"Manrope",sans-serif;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--home-muted);
}
.gf-card-legal::before{
  content:"";
  width:16px;
  height:1.5px;
  background:var(--home-gold);
  flex-shrink:0;
}


/* Grid-Order: bei Sebastian wechselt Card und Portrait die Seite */
.gf-persona[data-persona="lukas"] .gf-portrait{grid-column:1}
.gf-persona[data-persona="lukas"] .gf-card{grid-column:2}
.gf-persona[data-persona="sebastian"] .gf-card{grid-column:1}
.gf-persona[data-persona="sebastian"] .gf-portrait{grid-column:2}


/* ============================================================
   TRENNLINIE + TEAM-HERLEITUNG (kompakt)
   ============================================================ */
.gf-divider{
  position:relative;
  height:1px;
  margin:0;  /* Divider sitzt direkt am Bild-/Card-Bottom */
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(201,151,31,.15) 12%,
    rgba(201,151,31,.42) 50%,
    rgba(201,151,31,.15) 88%,
    transparent 100%);
}
.gf-divider::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  transform:translate(-50%, -50%) rotate(45deg);
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  box-shadow:0 0 0 3px #ffffff, 0 3px 8px rgba(201,151,31,.30);
}

.gf-team{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  margin-top:34px;   /* etwas mehr Luft zur Trennlinie */
  text-align:center;
}
.gf-team-text{
  max-width:640px;
  font-family:"DM Sans",sans-serif;
  font-size:13.5px;
  line-height:1.55;
  color:var(--home-ink-soft);
  letter-spacing:-.003em;
}
.gf-team-text strong{
  color:var(--home-ink);
  font-weight:700;
}
/* Team-CTA — identisch zum „So machen wir's anders"-Button (Problem-Section) */
.gf-team-cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding:0 30px;
  border-radius:100px;
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  color:#0a0a0a;
  font-family:"DM Sans",sans-serif;
  font-size:15px;
  font-weight:800;
  letter-spacing:.005em;
  text-decoration:none;
  box-shadow:0 14px 40px rgba(201,151,31,.28);
  transition:transform .25s ease, box-shadow .25s ease;
}
.gf-team-cta:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 52px rgba(201,151,31,.42);
}
.gf-team-cta svg{width:17px; height:17px}


/* Responsive */
@media (max-width: 1024px){
  .gf-section{padding:80px 30px 70px}
  .gf-divider{margin-top:36px}
  .gf-team{margin-top:32px; gap:22px}
  .gf-stage{min-height:auto}
  .gf-persona{
    position:relative;
    grid-template-columns:1fr;
    gap:0;
    inset:auto;
    align-items:stretch;
  }
  .gf-persona:not(.active){display:none}
  .gf-persona[data-persona="sebastian"] .gf-card,
  .gf-persona[data-persona="sebastian"] .gf-portrait,
  .gf-persona[data-persona="lukas"] .gf-card,
  .gf-persona[data-persona="lukas"] .gf-portrait{grid-column:1}
  .gf-card{padding:36px 28px 32px; margin-bottom:20px}
  .gf-portrait{min-height:auto; height:auto}
  .gf-persona[data-persona="lukas"] .gf-portrait-inner,
  .gf-persona[data-persona="sebastian"] .gf-portrait-inner{justify-content:center}
  .gf-persona[data-persona="lukas"] .gf-portrait img,
  .gf-persona[data-persona="sebastian"] .gf-portrait img{margin:0; max-height:560px}
  /* Card zuerst, Portrait darunter (bündig zur Section-Bottom) */
  .gf-persona[data-persona="lukas"] .gf-card{order:1}
  .gf-persona[data-persona="lukas"] .gf-portrait{order:2}
  .gf-persona[data-persona="sebastian"] .gf-card{order:1}
  .gf-persona[data-persona="sebastian"] .gf-portrait{order:2}
}

/* Mobil: Portrait als Bildband über der Card, Ausschnitt je Person gesetzt */
@media (max-width: 760px){
  .gf-persona{gap:0}

  /* Bild nach oben, Card darunter, beide optisch ein Block */
  .gf-persona[data-persona="lukas"] .gf-portrait,
  .gf-persona[data-persona="sebastian"] .gf-portrait{order:1}
  .gf-persona[data-persona="lukas"] .gf-card,
  .gf-persona[data-persona="sebastian"] .gf-card{order:2}

  .gf-portrait{
    position:relative;
    height:208px;
    min-height:0;
    margin-bottom:0;
    overflow:hidden;
    border-radius:22px 22px 0 0;
    background:
      radial-gradient(circle at 50% 120%, rgba(201,151,31,.16), transparent 62%),
      linear-gradient(165deg, #ffffff 0%, #fbf3dc 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 -2px 4px rgba(80,60,20,.03);
  }
  .gf-portrait-inner{
    position:static;
    display:block;
    width:auto;
    height:auto;
  }
  /* Die beiden Freisteller sind unterschiedlich gerahmt, deshalb wird
     die Kopfhöhe je Person gesetzt (Alpha-Bbox: Lucas 24,6%, Sebastian 20,1%). */
  .gf-persona[data-persona="lukas"] .gf-portrait img,
  .gf-persona[data-persona="sebastian"] .gf-portrait img{
    position:absolute;
    left:50%;
    top:0;
    width:var(--gf-w);
    max-width:none;
    height:auto;
    max-height:none;
    margin:0;
    object-fit:fill;
    filter:drop-shadow(0 14px 26px rgba(80,60,20,.14));
    transform:translate(calc(-50% + var(--gf-x)), var(--gf-y));
  }
  /* --gf-w gleicht zusätzlich die unterschiedliche Brennweite aus, damit
     beide Koepfe im Band gleich gross erscheinen. */
  /* Werte neu gerechnet, nachdem das Bild von Lucas getauscht wurde.
     Sein Kopf beginnt jetzt bei 16,5 % statt 24,6 % der Bildhöhe,
     mit der alten Verschiebung war er oben abgeschnitten. */
  .gf-persona[data-persona="lukas"]     .gf-portrait img{--gf-w:360px; --gf-x:-19px; --gf-y:-88px}
  .gf-persona[data-persona="sebastian"] .gf-portrait img{--gf-w:324px; --gf-x:-27px; --gf-y:-98px}

  /* Card schließt buendig unter dem Band an */
  .gf-card{
    border-radius:0 0 22px 22px;
    margin-bottom:0;
    padding:26px 22px 26px;
  }
  .gf-card::before{display:none}   /* Goldlinie sitzt jetzt am Bandkopf */
  .gf-card::after{display:none}    /* Eckmarke gehörte an die Card-Oberkante */

  /* Goldlinie oben am Band */
  .gf-portrait::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:2px;
    z-index:3;
    background:linear-gradient(90deg,
      transparent 0%,
      var(--home-gold-3) 20%,
      var(--home-gold-2) 50%,
      var(--home-gold-3) 80%,
      transparent 100%);
  }
  /* Weicher Übergang in die Card, statt harter Schnittkante am Oberkoerper */
  .gf-portrait::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:58px;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(180deg,
      rgba(255,253,246,0)   0%,
      rgba(255,253,246,.55) 48%,
      rgba(255,253,246,.92) 80%,
      #fffdf6              100%);
  }
}

@media (max-width: 640px){
  .gf-toggle{width:100%; display:flex}
  .gf-option{flex:1; min-width:0; padding:14px 12px; font-size:12px}
  .gf-thumb{width:calc(50% - 6px)}
  .gf-title{font-size:clamp(32px, 8.5vw, 42px)}
  .gf-header{margin-bottom:34px}
  .gf-card{padding:26px 22px 26px}
  .gf-card-name{font-size:30px}
  .gf-card-quote{padding:18px 18px 18px 32px; font-size:14.5px}
}


/* ============================================================
   07 · ANSATZ / ORBIT — helle Aura-Konstellation
   12 Pills mit Lucide-Icons um Logo-Center
   ============================================================ */
.orbit-section{
  position:relative;
  padding:96px 50px 110px;
  background:
    radial-gradient(circle at 50% 50%, rgba(201,151,31,.08), transparent 45%),
    radial-gradient(circle at 20% 90%, rgba(201,151,31,.05), transparent 40%),
    linear-gradient(180deg, #ffffff 0%, #fbf8f0 50%, #f4ecd6 100%);
  overflow:hidden;
}
.orbit-inner{
  position:relative;
  z-index:2;
  width:min(1400px, 100%);
  margin:0 auto;
}

.orbit-header{
  text-align:center;
  max-width:820px;
  margin:0 auto 24px;
}
.orbit-kicker{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
  font-family:"Manrope",sans-serif;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--home-gold);
}
.orbit-kicker::before,
.orbit-kicker::after{
  content:"";
  width:28px;
  height:1.5px;
  background:linear-gradient(90deg, transparent, var(--home-gold-3), transparent);
}
.orbit-title{
  font-family:"Manrope",sans-serif;
  font-size:clamp(30px, 3vw, 46px);
  line-height:1.12;
  letter-spacing:-.04em;
  font-weight:800;
  color:var(--home-ink);
  text-wrap:balance;
}
.orbit-title em{
  display:block;
  margin-top:4px;
  color:var(--home-gold);
  font-style:italic;
  font-weight:800;
}
.orbit-sub{
  max-width:600px;
  margin:18px auto 0;
  font-size:15.5px;
  line-height:1.6;
  color:var(--home-ink-soft);
}


/* Stage — quadratisch, zentriert */
.orbit-stage{
  position:relative;
  width:min(100%, 880px);
  aspect-ratio:1;
  margin:8px auto 0;
}
.orbit-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
  z-index:1;
}


/* Center · Aura — Gold-Ring mit weißem Inner-Circle + Logo */
.orbit-center{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:130px;
  height:130px;
  background:transparent;
  z-index:3;
  pointer-events:none;
}
.orbit-center::before{
  content:"";
  position:absolute;
  inset:-24px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(201,151,31,.32) 0%, rgba(201,151,31,.18) 40%, transparent 70%);
  animation:orbitCorePulse 4s ease-in-out infinite;
  z-index:-1;
}
@keyframes orbitCorePulse{
  0%,100%{transform:scale(1);   opacity:.55}
  50%    {transform:scale(1.15); opacity:.95}
}
/* Wrapper — kein Hintergrund, Logo freistehend */
.orbit-center-inner{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  background:transparent;
}
.orbit-center img{
  width:85%;
  height:85%;
  object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(80,60,20,.20)) drop-shadow(0 0 18px rgba(201,151,31,.25));
}


/* PILLS — Weiße Chips mit Lucide-Icon + Label (klickbar) */
.orbit-node{
  position:absolute;
  top:var(--y);
  left:var(--x);
  transform:translate(-50%, -50%);
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px 10px 10px;
  background:#ffffff;
  border:1px solid rgba(10,10,10,.06);
  border-radius:100px;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 8px 20px rgba(80,60,20,.10),
    0 2px 5px rgba(80,60,20,.05);
  z-index:2;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, opacity .3s ease;
  cursor:pointer;
  white-space:nowrap;
  font:inherit;    /* button-reset */
  color:inherit;
}
/* Hover nur mit echtem Zeiger */
@media (hover: hover) and (pointer: fine){
  .orbit-node:hover{
    transform:translate(-50%, -50%) scale(1.06);
    box-shadow:
      0 1px 0 rgba(255,255,255,1) inset,
      0 14px 30px rgba(80,60,20,.14),
      0 4px 8px rgba(80,60,20,.07);
  }
}
.orbit-node.active .node-icon,
.orbit-node.related .node-icon{
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  color:#0a0a0a;
  border-color:var(--home-gold-3);
}
@media (hover: hover) and (pointer: fine){
  .orbit-node:hover .node-icon{
    background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
    color:#0a0a0a;
    border-color:var(--home-gold-3);
  }
}

/* Aktiver Node — geklickt */
.orbit-node.active{
  transform:translate(-50%, -50%) scale(1.15);
  box-shadow:
    0 0 0 3px rgba(201,151,31,.55),
    0 1px 0 rgba(255,255,255,1) inset,
    0 18px 38px rgba(201,151,31,.35),
    0 4px 10px rgba(80,60,20,.10);
  z-index:4;
}
/* Related Nodes — thematisch verbunden mit aktivem */
.orbit-node.related{
  transform:translate(-50%, -50%) scale(1.08);
  box-shadow:
    0 0 0 2px rgba(201,151,31,.35),
    0 1px 0 rgba(255,255,255,1) inset,
    0 14px 30px rgba(201,151,31,.25),
    0 3px 8px rgba(80,60,20,.08);
  z-index:3;
}
/* Dimmed Nodes — nicht verbunden */
.orbit-node.dimmed{
  opacity:.30;
  transform:translate(-50%, -50%) scale(.95);
}

.node-icon{
  flex-shrink:0;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(243,211,106,.18), rgba(201,151,31,.10));
  border:1px solid rgba(201,151,31,.22);
  color:var(--home-gold-3);
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.node-icon svg{width:15px; height:15px; stroke-width:1.9}

.node-label{
  font-family:"Manrope",sans-serif;
  font-size:12.5px;
  font-weight:800;
  color:var(--home-ink);
  letter-spacing:-.005em;
  line-height:1;
}


/* ============================================================
   ORBIT-OUTRO · Silicon Saxony · Zielgruppen-Absprung (kein Card)
   ============================================================ */
.orbit-outro{
  position:relative;
  max-width:680px;
  margin:36px auto 0;
  padding:36px 24px 8px;
  text-align:center;
}
/* Gold-Diamant als Trenner oben (redaktionell) */
.orbit-outro-diamond{
  width:9px;
  height:9px;
  margin:0 auto 22px;
  transform:rotate(45deg);
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  box-shadow:0 0 0 5px #ffffff, 0 6px 14px rgba(201,151,31,.30);
}
.orbit-outro-kicker{
  display:inline-block;
  margin-bottom:14px;
  font-family:"Manrope",sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--home-gold);
}
.orbit-outro-text{
  max-width:600px;
  margin:0 auto 20px;
  font-family:"DM Sans",sans-serif;
  font-size:15.5px;
  line-height:1.65;
  color:var(--home-ink-soft);
  letter-spacing:-.003em;
}
.orbit-outro-text strong{
  color:var(--home-ink);
  font-weight:700;
}
/* Gold-Primary-Button — identisch zu „So machen wir's anders" & „Team kennenlernen" */
.orbit-outro-cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding:0 30px;
  margin-top:6px;
  border-radius:100px;
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  color:#0a0a0a;
  font-family:"DM Sans",sans-serif;
  font-size:15px;
  font-weight:800;
  letter-spacing:.005em;
  text-decoration:none;
  box-shadow:0 14px 40px rgba(201,151,31,.28);
  transition:transform .25s ease, box-shadow .25s ease;
}
.orbit-outro-cta:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 52px rgba(201,151,31,.42);
}
.orbit-outro-cta svg{width:17px; height:17px}


/* Responsive */
@media (max-width: 1024px){
  .orbit-stage{max-width:720px}
  .orbit-node{padding:8px 12px 8px 8px; gap:8px}
  .node-icon{width:26px; height:26px}
  .node-icon svg{width:13px; height:13px}
  .node-label{font-size:11px}
  .orbit-center{width:96px; height:96px}
  .orbit-center img{width:85%; height:85%}
}
@media (max-width: 700px){
  .orbit-section{padding:70px 12px 90px}
  .orbit-stage{max-width:100%}
  .orbit-node{padding:6px 10px 6px 6px; gap:6px}
  .node-icon{width:22px; height:22px}
  .node-icon svg{width:11px; height:11px}
  .node-label{font-size:9.5px}
  .orbit-center{width:80px; height:80px}
  .orbit-center img{width:85%; height:85%}
  .orbit-outro{margin-top:24px; padding:24px 16px 0}
  .orbit-outro-text{font-size:14.5px}
}


/* ============================================================
   08 · WAS DU BEKOMMST — Sticky-Card-Stack + iPhone-Banking
   (WICHTIG: overflow-x:clip statt overflow:hidden — sonst
   funktioniert position:sticky auf den Cards NICHT)
   ============================================================ */
.wdb-section{
  position:relative;
  padding:110px 50px 130px;
  background:
    radial-gradient(circle at 20% 20%, rgba(201,151,31,.06), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(201,151,31,.05), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #fbf8f0 50%, #f4ecd6 100%);
  overflow-x:clip;
  overflow-y:visible;
}
.wdb-inner{
  position:relative;
  z-index:2;
  width:min(1400px, 100%);
  margin:0 auto;
}

/* Header */
.wdb-header{
  text-align:center;
  max-width:820px;
  margin:0 auto 80px;
}
.wdb-kicker{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
  font-family:"Manrope",sans-serif;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--home-gold);
}
.wdb-kicker::before,
.wdb-kicker::after{
  content:"";
  width:28px;
  height:1.5px;
  background:linear-gradient(90deg, transparent, var(--home-gold-3), transparent);
}
.wdb-title{
  font-family:"Manrope",sans-serif;
  font-size:clamp(34px, 3.4vw, 52px);
  line-height:1.12;
  letter-spacing:-.04em;
  font-weight:800;
  color:var(--home-ink);
  text-wrap:balance;
}
.wdb-title em{
  display:block;
  margin-top:4px;
  color:var(--home-gold);
  font-style:italic;
  font-weight:800;
}
.wdb-sub{
  max-width:620px;
  margin:20px auto 0;
  font-size:15.5px;
  line-height:1.65;
  color:var(--home-ink-soft);
}

/* Layout: 2 Spalten (rechte Spalte schmaler für kompaktes iPhone) */
.wdb-layout{
  display:grid;
  grid-template-columns:1fr minmax(240px, 280px);
  gap:80px;
  align-items:start;
}


/* LEFT · Sticky-Cards */
.wdb-cards{
  display:flex;
  flex-direction:column;
  gap:32vh;
  padding-bottom:20vh;
}
.wdb-card{
  position:sticky;
  top:calc(20vh + var(--stack-offset, 0px));
  padding:40px 34px 36px;
  background:linear-gradient(160deg, #ffffff 0%, #fdf7e4 100%);
  border:1px solid rgba(10,10,10,.05);
  border-radius:22px;
  text-align:center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(201,151,31,.06),
    0 1px 2px rgba(80,60,20,.04),
    0 6px 14px rgba(80,60,20,.06);
  overflow:hidden;
}
/* Gold-Line oben (editorial) */
.wdb-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--home-gold-3) 20%,
    var(--home-gold-2) 50%,
    var(--home-gold-3) 80%,
    transparent 100%);
}
/* Cards mit unterschiedlichem sticky offset — Fächer-Effekt */
.wdb-card:nth-child(1){--stack-offset:  0px}
.wdb-card:nth-child(2){--stack-offset: 14px}
.wdb-card:nth-child(3){--stack-offset: 28px}
.wdb-card:nth-child(4){--stack-offset: 42px}
.wdb-card:nth-child(5){--stack-offset: 56px}
.wdb-card:nth-child(6){--stack-offset: 70px}
.wdb-card:nth-child(7){--stack-offset: 84px}

.wdb-card-num{
  display:inline-block;
  margin-bottom:14px;
  font-family:"Manrope",sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:.22em;
  color:var(--home-gold);
}
.wdb-card-title{
  margin-bottom:14px;
  font-family:"Manrope",sans-serif;
  font-size:clamp(24px, 2.2vw, 32px);
  font-weight:800;
  letter-spacing:-.028em;
  line-height:1.18;
  color:var(--home-ink);
}
.wdb-card-text{
  font-family:"DM Sans",sans-serif;
  font-size:15.5px;
  line-height:1.6;
  color:var(--home-ink-soft);
}
.wdb-card-text strong{
  color:var(--home-ink);
  font-weight:700;
}

/* Wert-Chip unten in der Card */
.wdb-card-value{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px 10px;
  margin-top:20px;
  padding:9px 18px;
  background:linear-gradient(135deg, rgba(243,211,106,.20), rgba(201,151,31,.12));
  border:1px solid rgba(201,151,31,.35);
  border-radius:100px;
  font-family:"Manrope",sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.015em;
  color:var(--home-gold-3);
}

/* „Hat einen Wert von 400 €" — Preis wird beim Reveal durchgestrichen */
.wdb-value-worth{
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}
.wdb-value-price{
  position:relative;
  font-weight:800;
  white-space:nowrap;
  transition:opacity .45s ease .3s;
}
.wdb-value-price::after{
  content:"";
  position:absolute;
  left:-3px; right:-3px;
  top:54%;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .55s cubic-bezier(.65,0,.35,1) .2s;
}

/* „für dich kostenlos" — erscheint nach dem Durchstreichen */
.wdb-value-free{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  font-weight:900;
  color:#0a0a0a;
  opacity:0;
  transform:translateX(-7px);
  transition:
    opacity .5s ease .82s,
    transform .5s cubic-bezier(.16,1,.3,1) .82s;
}
.wdb-value-free::before{
  content:"";
  width:4px; height:4px;
  border-radius:50%;
  background:var(--home-gold-3);
  flex-shrink:0;
}

/* Reveal-State · wird per JS gesetzt, sobald die Card „gebucht" wurde */
.wdb-card-value.is-struck .wdb-value-price::after{ transform:scaleX(1); }
.wdb-card-value.is-struck .wdb-value-price{ opacity:.5; }
.wdb-card-value.is-struck .wdb-value-free{ opacity:1; transform:none; }

/* Reduzierte Bewegung: Endzustand ohne Animation */
@media(prefers-reduced-motion: reduce){
  .wdb-value-price::after,
  .wdb-value-price,
  .wdb-value-free{ transition:none; }
}


/* RIGHT · iPhone Sticky Container · slidet mit erster/letzter Card */
.wdb-device-wrap{
  position:sticky;
  top:12vh;
  height:fit-content;
  display:flex;
  justify-content:center;
}

/* Section 08 iPhone · slidet horizontal (rechts rein / rechts raus) */
.wdb-phone{
  /* Start: rechts außerhalb des Viewports */
  transform:translateX(140%);
  opacity:0;
  transition:
    transform 0.9s cubic-bezier(.5,0,.2,1),
    opacity   0.5s ease;
  will-change:transform, opacity;
}
/* Slide-in bei erster Card in View */
.wdb-phone.slide-in{
  transform:translateX(0);
  opacity:1;
}
/* Slide-out beim Verlassen der letzten Card nach oben */
.wdb-phone.slide-out{
  transform:translateX(140%);
  opacity:0;
}

/* iPhone Frame (kompakt · 240px statt 340px) */
.wdb-device{
  position:relative;
  width:240px;
  aspect-ratio:37/76;
  background:#0a0a0a;
  border-radius:38px;
  padding:10px;
  box-shadow:
    0 0 0 2px rgba(160,160,160,.6),
    0 28px 56px rgba(80,60,20,.24),
    0 10px 22px rgba(80,60,20,.14);
}
.wdb-device::before{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:42px;
  border:1.5px solid rgba(255,255,255,.08);
  pointer-events:none;
}
/* Side buttons */
.wdb-buttons{
  position:absolute;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.wdb-buttons-left{
  left:-5px;
  top:20%;
}
.wdb-buttons-left .wdb-btn:nth-child(1){height:22px}
.wdb-buttons-left .wdb-btn:nth-child(2),
.wdb-buttons-left .wdb-btn:nth-child(3){height:38px; margin-top:10px}
.wdb-buttons-right{
  right:-5px;
  top:28%;
}
.wdb-buttons-right .wdb-btn{height:64px}
.wdb-btn{
  display:block;
  width:2.5px;
  background:#3a3a3a;
  border-radius:2px 0 0 2px;
  box-shadow:inset -1px 0 0 rgba(0,0,0,.4);
}
.wdb-buttons-right .wdb-btn{
  border-radius:0 2px 2px 0;
  box-shadow:inset 1px 0 0 rgba(0,0,0,.4);
}

/* Notch (Dynamic Island Style) */
.wdb-notch{
  position:absolute;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  width:68px;
  height:18px;
  background:#000;
  border-radius:14px;
  z-index:3;
  pointer-events:none;
}

/* Screen */
.wdb-screen{
  position:relative;
  width:100%;
  height:100%;
  background:linear-gradient(180deg, #ffffff 0%, #f9f5eb 100%);
  border-radius:28px;
  overflow:hidden;
  padding:40px 13px 8px;
  z-index:1;
}
.wdb-app{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* App-Header */
.wdb-app-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:2px 3px;
}
.wdb-app-greet{
  display:flex;
  flex-direction:column;
  gap:1px;
  font-family:"DM Sans",sans-serif;
  font-size:9px;
  color:var(--home-ink);
  line-height:1.15;
}
.wdb-app-greet strong{font-weight:700}
.wdb-app-sub{
  font-size:8px;
  color:var(--home-muted);
  font-weight:500;
}
.wdb-app-avatar{
  width:24px;
  height:24px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  display:grid;
  place-items:center;
  padding:4px;
  box-shadow:0 3px 8px rgba(201,151,31,.28);
}
.wdb-app-avatar img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Total */
.wdb-app-total{
  padding:9px 11px 11px;
  background:linear-gradient(160deg, #fbf3dc 0%, #f4ecd6 100%);
  border:1px solid rgba(201,151,31,.20);
  border-radius:10px;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.wdb-total-label{
  font-family:"Manrope",sans-serif;
  font-size:7.5px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--home-gold-3);
}
.wdb-total-value{
  display:flex;
  align-items:baseline;
  gap:4px;
  font-family:"Manrope",sans-serif;
  font-size:17px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--home-ink);
  line-height:1;
}
#wdbTotal{
  transition:color .3s ease;
}
.wdb-total-cur{
  font-size:9px;
  font-weight:700;
  color:var(--home-muted);
}
.wdb-total-status{
  margin-top:1px;
  font-family:"DM Sans",sans-serif;
  font-size:7.5px;
  color:var(--home-muted);
  font-weight:500;
}

/* Buchungs-Header */
.wdb-book-header{
  padding:0 3px;
  margin-top:2px;
  font-family:"Manrope",sans-serif;
  font-size:7.5px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--home-muted);
}

/* Buchungs-Liste */
.wdb-app-list{
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:0;
  margin:0;
  list-style:none;
  scrollbar-width:none;
}
.wdb-app-list::-webkit-scrollbar{display:none}

.wdb-book{
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px 8px;
  background:#ffffff;
  border:1px solid rgba(10,10,10,.06);
  border-radius:9px;
  box-shadow:0 2px 5px rgba(80,60,20,.04);
  animation:wdbBookIn .55s cubic-bezier(.2,.8,.2,1);
  min-height:32px;
}
@keyframes wdbBookIn{
  0%   {opacity:0; transform:translateY(-6px) scale(.95)}
  50%  {opacity:1; transform:translateY(1px)  scale(1.02);
        box-shadow:0 0 0 2px rgba(201,151,31,.30), 0 3px 10px rgba(80,60,20,.10)}
  100% {opacity:1; transform:translateY(0)    scale(1)}
}

.wdb-book-icon{
  flex-shrink:0;
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  color:#0a0a0a;
  font-family:"Manrope",sans-serif;
  font-size:8.5px;
  font-weight:800;
}
.wdb-book-body{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:0;
}
.wdb-book-name{
  font-family:"DM Sans",sans-serif;
  font-size:8.5px;
  font-weight:700;
  color:var(--home-ink);
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.wdb-book-desc{
  font-family:"DM Sans",sans-serif;
  font-size:6.8px;
  color:var(--home-muted);
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:.01em;
}
.wdb-book-value{
  flex-shrink:0;
  font-family:"Manrope",sans-serif;
  font-size:8.5px;
  font-weight:800;
  color:#1a8f5a;
  letter-spacing:-.005em;
  white-space:nowrap;
}
.wdb-book-value::before{content:"+ "}

/* Bottom-Nav */
.wdb-app-nav{
  display:grid;
  grid-template-columns:1fr 1fr auto 1fr 1fr;
  gap:4px;
  align-items:center;
  padding:6px 4px 2px;
  border-top:1px solid rgba(10,10,10,.06);
  margin-top:4px;
}
.wdb-nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  font-family:"DM Sans",sans-serif;
  font-size:6px;
  font-weight:600;
  color:var(--home-muted);
  letter-spacing:.02em;
}
.wdb-nav-item svg{width:11px; height:11px; stroke-width:2}
.wdb-nav-item.active{color:var(--home-gold-3)}
.wdb-nav-euro{
  width:30px;
  height:30px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  color:#0a0a0a;
  display:grid;
  place-items:center;
  font-family:"Manrope",sans-serif;
  font-size:13px;
  font-weight:800;
  box-shadow:0 4px 10px rgba(201,151,31,.28);
  margin-top:-11px;
}


/* Responsive */
@media (max-width: 1024px){
  .wdb-section{padding:80px 24px 100px}
  .wdb-header{margin-bottom:50px}
  .wdb-layout{grid-template-columns:1fr; gap:40px}
  .wdb-device-wrap{position:relative; top:auto; order:-1}
  .wdb-device{width:220px}
  .wdb-cards{gap:24vh}
  .wdb-card{position:relative; top:auto !important}
}

/* Mobil: nur das iPhone bleibt stehen, der Inhalt wechselt beim Scrollen */
@media (max-width: 768px){
  .wdb-section{padding:76px 18px 88px}
  .wdb-header{margin-bottom:28px}

  .wdb-layout{
    display:flex;
    flex-direction:column;
    gap:0;
    /* Basis setzt align-items:start — in der Spalte schrumpft der
       Wrapper dadurch auf Inhaltsbreite und klebt links. */
    align-items:stretch;
  }

  .wdb-device-wrap{
    order:-1;
    position:sticky;
    /* etwas tiefer als die Navigation, damit das Handy im Blickfeld
       mittig steht statt oben zu kleben */
    top:clamp(84px, 13vh, 140px);
    z-index:3;
    padding-bottom:14px;
  }
  /* zwei Klassen, sonst gewinnt .phone-frame weiter unten in der Datei */
  .wdb-phone.phone-frame{width:218px}

  .wdb-cards{
    order:0;
    gap:0;
    /* Auslauf, damit das Handy nach der sechsten Buchung noch einen
       Moment stehen bleibt und man die volle Summe sieht */
    padding-bottom:26vh;
  }

  /* Scrolltreiber, Höhe in vh passend zum Beobachtungsfenster des Observers */
  .wdb-card{
    height:44vh;
    min-height:240px;
    margin:0;
    padding:0;
    opacity:0;
    pointer-events:none;
    background:none;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
}

@media (max-width: 600px){
  .wdb-device{width:210px}
}


/* ============================================================
   iPhone-Frame · Basis-Styling (gemeinsam für Section 08 + 09)
   ============================================================ */
.phone-frame{
  position:relative;
  width:240px;
  aspect-ratio:37/76;
  background:#0a0a0a;
  border-radius:38px;
  padding:10px;
  box-shadow:
    0 0 0 2px rgba(160,160,160,.6),
    0 28px 56px rgba(80,60,20,.24),
    0 10px 22px rgba(80,60,20,.14);
}
.phone-frame::before{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:42px;
  border:1.5px solid rgba(255,255,255,.08);
  pointer-events:none;
}
/* Side buttons */
.phone-buttons{
  position:absolute;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.phone-buttons-left{left:-5px; top:20%}
.phone-buttons-left .wdb-btn:nth-child(1){height:22px}
.phone-buttons-left .wdb-btn:nth-child(2),
.phone-buttons-left .wdb-btn:nth-child(3){height:38px; margin-top:10px}
.phone-buttons-right{right:-5px; top:28%}
.phone-buttons-right .wdb-btn{height:64px}
/* Notch */
.phone-notch{
  position:absolute;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  width:68px;
  height:18px;
  background:#000;
  border-radius:14px;
  z-index:3;
  pointer-events:none;
}
/* Screen */
.phone-screen{
  position:relative;
  width:100%;
  height:100%;
  background:linear-gradient(180deg, #ffffff 0%, #f9f5eb 100%);
  border-radius:28px;
  overflow:hidden;
  padding:40px 13px 8px;
  z-index:1;
}
/* Content-View im iPhone-Screen — jedes iPhone hat genau eine View */
.phone-view{
  position:absolute;
  inset:40px 13px 8px;
  display:flex;
  flex-direction:column;
  gap:10px;
  opacity:1;
  pointer-events:auto;
}


/* ============================================================
   09 · DER AURA-EMPORA-WEG
   ============================================================ */
.route-section{
  position:relative;
  padding:110px 50px 130px;
  background:
    radial-gradient(circle at 50% 30%, rgba(201,151,31,.10), transparent 45%),
    radial-gradient(circle at 15% 80%, rgba(201,151,31,.05), transparent 40%),
    linear-gradient(180deg, #f4ecd6 0%, #fbf8f0 45%, #ffffff 100%);
}
.route-inner{
  position:relative;
  z-index:2;
  width:min(1100px, 100%);
  margin:0 auto;
}

/* Header — mittig */
.route-header{
  text-align:center;
  max-width:720px;
  margin:0 auto 50px;
}
.route-kicker{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
  font-family:"Manrope",sans-serif;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--home-gold);
}
.route-kicker::before,
.route-kicker::after{
  content:"";
  width:28px;
  height:1.5px;
  background:linear-gradient(90deg, transparent, var(--home-gold-3), transparent);
}
.route-title{
  font-family:"Manrope",sans-serif;
  font-size:clamp(42px, 4.4vw, 68px);
  line-height:1.12;
  letter-spacing:-.05em;
  font-weight:800;
  color:var(--home-ink);
}
.route-sub{
  max-width:560px;
  margin:22px auto 0;
  font-size:16px;
  line-height:1.6;
  color:var(--home-ink-soft);
}
.route-sub em{
  color:var(--home-gold);
  font-style:italic;
  font-weight:700;
}


/* Timeline oberhalb iPhone · 4 Steps horizontal */
.route-timeline{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  max-width:720px;
  margin:0 auto 32px;
  padding:8px 0;
}

/* Section 09 iPhone Wrapper · slidet von rechts rein wenn Section 09 sichtbar
   overflow-x:clip verhindert horizontal-scroll durch die Start-Position */
.route-phone-wrap{
  display:flex;
  justify-content:center;
  margin:24px auto;
  overflow-x:clip;
  overflow-y:visible;
}

/* Section 09 iPhone · Slide-in von rechts */
.route-phone{
  transform:translateX(140%);
  opacity:0;
  transition:
    transform 0.9s cubic-bezier(.5,0,.2,1),
    opacity   0.5s ease;
  will-change:transform, opacity;
}
.route-phone.slide-in{
  transform:translateX(0);
  opacity:1;
}
.route-timeline-line{
  position:absolute;
  top:26px;
  left:12.5%;
  right:12.5%;
  height:1px;
  background:repeating-linear-gradient(90deg, rgba(201,151,31,.35) 0 6px, transparent 6px 12px);
  z-index:0;
}
.route-tl-step{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:0;
  background:transparent;
  border:none;
  cursor:pointer;
}
.route-tl-num{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#ffffff;
  border:1.5px solid rgba(201,151,31,.35);
  color:rgba(10,10,10,.30);
  font-family:"Manrope",sans-serif;
  font-size:14px;
  font-weight:800;
  letter-spacing:.02em;
  transition:background .35s ease, color .35s ease, border-color .35s ease, transform .35s cubic-bezier(.5,1.7,.5,1);
  box-shadow:0 3px 8px rgba(80,60,20,.06);
}
.route-tl-label{
  font-family:"Manrope",sans-serif;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--home-muted);
  transition:color .35s ease;
  text-align:center;
  max-width:130px;
  line-height:1.25;
}
.route-tl-step.active .route-tl-num{
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  color:#0a0a0a;
  border-color:var(--home-gold-3);
  transform:scale(1.12);
  box-shadow:0 8px 18px rgba(201,151,31,.30);
}
.route-tl-step.active .route-tl-label{
  color:var(--home-gold-3);
}
.route-tl-step.done .route-tl-num{
  background:#ffffff;
  color:var(--home-gold-3);
  border-color:var(--home-gold);
}
.route-tl-step.done .route-tl-label{
  color:var(--home-ink);
}
.route-tl-step:hover .route-tl-num{
  transform:scale(1.08);
  border-color:var(--home-gold-3);
}


.route-app-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:2px 3px;
}
.route-app-greet{
  display:flex;
  flex-direction:column;
  gap:1px;
  font-family:"DM Sans",sans-serif;
  font-size:9px;
  color:var(--home-ink);
  line-height:1.15;
}
.route-app-greet strong{font-weight:700}
.route-app-sub{
  font-size:8px;
  color:var(--home-muted);
  font-weight:500;
}
.route-app-avatar{
  width:24px;
  height:24px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  display:grid;
  place-items:center;
  padding:4px;
  box-shadow:0 3px 8px rgba(201,151,31,.28);
}
.route-app-avatar img{width:100%; height:100%; object-fit:contain}

/* Slides-Container */
.route-slides{
  position:relative;
  flex:1;
  overflow:hidden;
  border-radius:12px;
  background:linear-gradient(160deg, #fbf3dc 0%, #f4ecd6 100%);
  border:1px solid rgba(201,151,31,.20);
}
.route-slide{
  position:absolute;
  inset:0;
  padding:20px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;      /* horizontal zentriert */
  text-align:center;       /* text-Zentrierung für alle inneren texte */
  gap:8px;
  opacity:0;
  transform:translateX(30px);
  transition:opacity .5s ease, transform .55s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.route-slide.active{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}
.route-slide.leaving{
  transform:translateX(-30px);
}
.route-slide-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#ffffff;
  color:var(--home-gold-3);
  box-shadow:0 3px 8px rgba(80,60,20,.10);
  border:1px solid rgba(201,151,31,.25);
  margin-bottom:2px;
}
.route-slide-icon svg{width:20px; height:20px; stroke-width:1.9}
.route-slide-num{
  font-family:"Manrope",sans-serif;
  font-size:9px;
  font-weight:800;
  letter-spacing:.20em;
  color:var(--home-gold);
  margin-top:6px;
}
.route-slide-title{
  font-family:"Manrope",sans-serif;
  font-size:14.5px;
  font-weight:800;
  color:var(--home-ink);
  letter-spacing:-.015em;
  line-height:1.15;
  max-width:180px;
}
.route-slide-text{
  font-family:"DM Sans",sans-serif;
  font-size:10px;
  line-height:1.55;
  color:var(--home-ink-soft);
  max-width:185px;
  margin-top:2px;
}
.route-slide-text strong{
  color:var(--home-ink);
  font-weight:700;
}
.route-slide-tag{
  margin-top:auto;
  padding:6px 12px;
  border-radius:100px;
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  color:#0a0a0a;
  font-family:"Manrope",sans-serif;
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  box-shadow:0 3px 8px rgba(201,151,31,.28);
}

/* Progress Bar (Autoplay) */
.route-progress{
  height:2px;
  border-radius:2px;
  background:rgba(201,151,31,.15);
  overflow:hidden;
  margin:2px 3px 0;
}
.route-progress-fill{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg, var(--home-gold-2), var(--home-gold-3));
  transition:width .12s linear;
}


/* Slider-Controls */
.route-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin-top:40px;
}
.route-arrow{
  width:52px;
  height:52px;
  border-radius:50%;
  background:#ffffff;
  border:1px solid rgba(10,10,10,.08);
  color:var(--home-ink);
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(80,60,20,.10);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.route-arrow:hover{
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  color:#0a0a0a;
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(201,151,31,.30);
}
.route-arrow svg{width:20px; height:20px}

.route-dots{
  display:flex;
  align-items:center;
  gap:10px;
}
.route-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  border:none;
  background:rgba(10,10,10,.15);
  cursor:pointer;
  padding:0;
  transition:background .3s ease, transform .3s ease, width .3s ease;
}
.route-dot:hover{background:rgba(201,151,31,.5)}
.route-dot.active{
  background:linear-gradient(90deg, var(--home-gold-2), var(--home-gold-3));
  width:26px;
  border-radius:5px;
}


/* CTA */
.route-cta-wrap{
  text-align:center;
  margin-top:44px;
}
.route-cta-lead{
  font-family:"Manrope",sans-serif;
  font-size:17px;
  font-weight:600;
  color:var(--home-ink-soft);
  margin-bottom:22px;
}
.route-cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding:0 30px;
  border-radius:100px;
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  color:#0a0a0a;
  font-family:"DM Sans",sans-serif;
  font-size:15px;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 14px 40px rgba(201,151,31,.28);
  transition:transform .25s ease, box-shadow .25s ease;
}
.route-cta:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 52px rgba(201,151,31,.42);
}
.route-cta svg{width:17px; height:17px}


/* Responsive */
@media (max-width: 700px){
  .route-section{padding:70px 20px 90px}
  .route-header{margin-bottom:36px}
  .route-controls{gap:14px; margin-top:28px}
  .route-arrow{width:44px; height:44px}
  .route-arrow svg{width:17px; height:17px}
  .route-cta-wrap{margin-top:32px}
}


/* ============================================================
   10 · BEWERTUNGEN · Testimonials (1:1 aus SiliconSaxoncy)
   ============================================================ */
.testimonials-section{position:relative;background:#ebe5d4;color:#0a0a0a;padding:110px 0 100px;overflow:hidden}
.testimonials-section::before{content:"";position:absolute;top:0;left:0;right:0;height:160px;background:linear-gradient(180deg,#ffffff 0%,#f8f3e3 50%,#ebe5d4 100%);pointer-events:none;z-index:1}
.testimonials-section::after{content:"";position:absolute;top:0;left:0;right:0;height:380px;background:radial-gradient(ellipse 60% 100% at 50% 0%,rgba(212,175,55,.12),transparent 60%);pointer-events:none;z-index:1}
.testi-shell{position:relative;z-index:2;max-width:1340px;margin:0 auto;padding:0 7vw}
.testi-head{max-width:920px;margin:0 auto 60px;text-align:center}
.testi-head .eyebrow{display:inline-block;color:#b98519;text-transform:uppercase;font-family:"Manrope",sans-serif;font-size:12px;letter-spacing:.22em;font-weight:800;margin-bottom:18px}
.testi-head h2{font-family:"Manrope",sans-serif;font-size:clamp(42px,5vw,82px);line-height:1.12;letter-spacing:-.045em;color:#0a0a0a;font-weight:800}
.testi-head h2 .accent{background:linear-gradient(135deg,#d4af37 0%,#b98519 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-style:italic;font-weight:800}
.testi-head p{margin:24px auto 0;color:rgba(0,0,0,.62);font-size:18px;line-height:1.65;max-width:680px}
.testi-stat{position:relative;max-width:920px;margin:0 auto 60px;padding:36px 42px;border-radius:32px;background:linear-gradient(155deg,rgba(28,22,12,.95) 0%,rgba(14,12,8,.97) 50%,rgba(8,7,5,.99) 100%);border:1px solid rgba(212,175,55,.28);box-shadow:inset 0 1px 0 rgba(243,211,106,.22),0 50px 140px rgba(0,0,0,.30),0 0 80px rgba(212,175,55,.08);display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:center;overflow:hidden}
.testi-stat::before{content:"";position:absolute;top:-160px;right:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(243,211,106,.22),transparent 65%);pointer-events:none;filter:blur(10px)}
.testi-stat-google{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.testi-google-logo{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
.testi-google-logo svg{width:18px;height:18px}
.testi-google-logo span{color:#fff;font-size:13px;font-weight:800}
.testi-google-sub{color:rgba(255,255,255,.5);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.testi-stat-rating{position:relative;z-index:2;display:flex;align-items:center;gap:22px;justify-content:center}
.testi-rating-num{font-family:"Manrope",sans-serif;font-size:clamp(52px,5.5vw,76px);font-weight:900;line-height:1;letter-spacing:-.05em;background:linear-gradient(135deg,#f4d765 0%,#d4af37 50%,#b98519 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 8px 20px rgba(212,175,55,.3))}
.testi-rating-side{display:flex;flex-direction:column;gap:6px}
.testi-stars{display:inline-flex;gap:3px;color:#f4d765;filter:drop-shadow(0 4px 10px rgba(212,175,55,.5))}
.testi-stars svg{width:17px;height:17px;fill:currentColor;stroke:none}
.testi-rating-count{color:rgba(255,255,255,.78);font-size:13.5px;font-weight:700}
.testi-rating-count strong{color:#fff;font-weight:900}
.testi-stat-cta{position:relative;z-index:2}
.testi-stat-link{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;background:linear-gradient(135deg,#f4d765,#b98519);color:#111;text-decoration:none;font-weight:900;font-size:13.5px;box-shadow:0 18px 50px rgba(212,175,55,.30);transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;white-space:nowrap}
.testi-stat-link:hover{transform:translateY(-2px);box-shadow:0 28px 70px rgba(212,175,55,.45)}
.testi-stat-link svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.testi-bento{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:50px}
.testi-card{position:relative;padding:30px 28px 26px;border-radius:24px;background:linear-gradient(180deg,#ffffff 0%,#fbf8f0 100%);border:1px solid rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 26px 60px -16px rgba(0,0,0,.10);display:flex;flex-direction:column;overflow:hidden;transition:border-color .4s ease,box-shadow .4s ease}
.testi-card:hover{border-color:rgba(212,175,55,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 44px 90px -16px rgba(0,0,0,.15),0 0 0 1px rgba(212,175,55,.18)}
.testi-card.featured{grid-column:span 2;grid-row:span 2;padding:42px 40px 36px}
.testi-card.featured::after{content:"\201C";position:absolute;top:-30px;left:30px;font-size:180px;line-height:1;font-family:Georgia,"Times New Roman",serif;background:linear-gradient(135deg,#f4d765,#b98519);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;opacity:.40;pointer-events:none}
.testi-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;position:relative;z-index:1}
.testi-card-stars{display:inline-flex;gap:2px;color:#f4d765}
.testi-card-stars svg{width:14px;height:14px;fill:currentColor;stroke:none;filter:drop-shadow(0 2px 4px rgba(212,175,55,.4))}
.testi-card.featured .testi-card-stars svg{width:17px;height:17px}
.testi-source{display:inline-flex;align-items:center;gap:6px;color:rgba(0,0,0,.45);font-size:11px;font-weight:600}
.testi-quote{position:relative;z-index:1;color:rgba(0,0,0,.78);font-size:14.5px;line-height:1.6;font-weight:400;flex:1;margin-bottom:22px}
.testi-card.featured .testi-quote{font-size:20px;line-height:1.5;letter-spacing:-.012em;font-weight:500;color:rgba(0,0,0,.88)}
.testi-card:not(.featured) .testi-quote{flex:none;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.testi-card:not(.featured) .testi-quote.ae-expanded{display:block;overflow:visible}
.testi-read-more{display:inline-flex;align-items:center;gap:5px;background:none;border:none;padding:0;margin-top:8px;margin-bottom:6px;color:#b98519;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;letter-spacing:.01em;transition:color .2s ease;flex-shrink:0}
.testi-read-more:hover{color:#d4af37}
.testi-read-more svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
.testi-read-more.ae-open svg{transform:rotate(180deg)}
.testi-author{position:relative;z-index:1;display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid rgba(212,175,55,.20)}
.testi-avatar{flex-shrink:0;width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(243,211,106,.30),rgba(212,175,55,.10));border:1px solid rgba(212,175,55,.45);color:#b98519;font-weight:900;font-size:12.5px}
.testi-card.featured .testi-avatar{width:44px;height:44px;font-size:14.5px}
.testi-author-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.testi-author-name{color:#0a0a0a;font-size:13.5px;font-weight:800}
.testi-author-date{color:rgba(0,0,0,.48);font-size:11.5px;font-weight:500}

/* Testimonials CTA (unter Bento-Grid)
   Nutzt .route-cta für den Button (gold-primary Pattern) */
.testi-cta-wrap{
  text-align:center;
  margin-top:20px;
}
.testi-cta-lead{
  font-family:"Manrope",sans-serif;
  font-size:18px;
  font-weight:700;
  color:#0a0a0a;
  margin-bottom:20px;
}
.testi-cta-lead strong{font-weight:800}
.testi-cta-wrap .route-cta i[data-lucide]{
  width:17px; height:17px;
}

/* Responsive Bewertungen */
@media (max-width:1024px){
  .testi-bento{grid-template-columns:repeat(2,1fr)}
  .testi-card.featured{grid-column:span 2;grid-row:auto}
  .testi-stat{grid-template-columns:1fr;gap:20px;padding:26px 24px;text-align:center}
  .testi-stat-google,.testi-stat-rating,.testi-stat-cta{justify-content:center;align-items:center}
}
@media (max-width:700px){
  .testimonials-section{padding:70px 0 60px}
  .testi-shell{padding:0 5vw}
  .testi-bento{grid-template-columns:1fr;gap:14px}
  .testi-card.featured{grid-column:auto;padding:32px 26px 26px}
  .testi-head{margin-bottom:36px}
}


/* ============================================================
   11 · FAQ · Neu-Design (Home-Aura Style)
   ============================================================ */
.faq-section{
  position:relative;
  padding:120px 50px 130px;
  background:
    radial-gradient(circle at 100% 0%, rgba(201,151,31,.06), transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(201,151,31,.05), transparent 40%),
    linear-gradient(180deg, #ebe5d4 0%, #f4ecd6 40%, #fbf8f0 100%);
  overflow:hidden;
}
.faq-shell{
  position:relative;
  z-index:2;
  max-width:1300px;
  margin:0 auto;
}

/* Header */
.faq-head{
  text-align:center;
  max-width:780px;
  margin:0 auto 70px;
}
.faq-kicker{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
  font-family:"Manrope",sans-serif;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--home-gold);
}
.faq-kicker::before,
.faq-kicker::after{
  content:"";
  width:32px;
  height:1.5px;
  background:linear-gradient(90deg, transparent, var(--home-gold-3), transparent);
}
.faq-title{
  font-family:"Manrope",sans-serif;
  font-size:clamp(38px, 4.2vw, 62px);
  line-height:1.12;
  letter-spacing:-.045em;
  font-weight:800;
  color:var(--home-ink);
  text-wrap:balance;
}
.faq-title em{
  display:block;
  margin-top:6px;
  padding-bottom:.08em;
  font-style:italic;
  font-weight:800;
  color:var(--home-gold);
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.faq-sub{
  max-width:580px;
  margin:24px auto 0;
  font-size:16px;
  line-height:1.65;
  color:var(--home-ink-soft);
}

/* Layout: 2 columns (Fragen links, Aside rechts) */
.faq-layout{
  display:grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap:60px;
  align-items:start;
}

/* Fragen-Liste */
.faq-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.faq-item{
  position:relative;
  background:#ffffff;
  border:1px solid rgba(10,10,10,.06);
  border-radius:20px;
  padding:0;
  box-shadow:0 6px 20px rgba(80,60,20,.06);
  transition:border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.faq-item[open]{
  border-color:rgba(201,151,31,.45);
  box-shadow:
    0 20px 44px rgba(201,151,31,.14),
    0 0 0 1px rgba(201,151,31,.15);
  transform:translateY(-2px);
}
.faq-item:hover:not([open]){
  border-color:rgba(201,151,31,.28);
  box-shadow:0 12px 32px rgba(80,60,20,.10);
}

/* Frage-Zeile */
.faq-q{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:20px;
  padding:22px 26px;
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.faq-q::-webkit-details-marker{display:none}
.faq-q-num{
  font-family:"Manrope",sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--home-gold);
  padding:6px 10px;
  border-radius:8px;
  background:rgba(201,151,31,.10);
  border:1px solid rgba(201,151,31,.22);
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.faq-item[open] .faq-q-num{
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  color:#0a0a0a;
  border-color:transparent;
}
.faq-q-text{
  font-family:"Manrope",sans-serif;
  font-size:17px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:-.012em;
  color:var(--home-ink);
}
.faq-q-toggle{
  position:relative;
  width:32px;
  height:32px;
  border-radius:50%;
  border:1.5px solid rgba(201,151,31,.35);
  background:#ffffff;
  transition:background .35s ease, border-color .35s ease, transform .5s cubic-bezier(.5,1.7,.5,1);
  flex-shrink:0;
}
.faq-q-toggle::before,
.faq-q-toggle::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:12px;
  height:1.8px;
  background:var(--home-gold-3);
  transform:translate(-50%, -50%);
  border-radius:2px;
  transition:transform .35s cubic-bezier(.4,0,.2,1), background .3s ease;
}
.faq-q-toggle::after{
  transform:translate(-50%, -50%) rotate(90deg);
}
.faq-item[open] .faq-q-toggle{
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  border-color:transparent;
  transform:rotate(180deg);
}
.faq-item[open] .faq-q-toggle::before,
.faq-item[open] .faq-q-toggle::after{
  background:#0a0a0a;
}
.faq-item[open] .faq-q-toggle::after{
  transform:translate(-50%, -50%) rotate(0deg);
}

/* Antwort */
.faq-a{
  padding:0 26px 24px 82px;
  font-family:"DM Sans",sans-serif;
  font-size:15.5px;
  line-height:1.65;
  color:var(--home-ink-soft);
  animation:faqSlideDown .4s cubic-bezier(.2,.8,.2,1);
}
.faq-a strong{
  color:var(--home-ink);
  font-weight:700;
}
@keyframes faqSlideDown{
  from{opacity:0; transform:translateY(-6px)}
  to  {opacity:1; transform:translateY(0)}
}

/* Aside (rechte Spalte) */
.faq-aside{
  position:sticky;
  top:80px;
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* Hilfe-Card (dunkel/gold) */
.faq-help-card{
  position:relative;
  padding:40px 32px 34px;
  border-radius:24px;
  background:
    linear-gradient(155deg, rgba(28,22,12,.98) 0%, rgba(14,12,8,.99) 60%, rgba(8,7,5,1) 100%);
  border:1px solid rgba(201,151,31,.30);
  box-shadow:
    inset 0 1px 0 rgba(243,211,106,.22),
    0 30px 70px -18px rgba(0,0,0,.35),
    0 0 60px rgba(201,151,31,.10);
  text-align:center;
  overflow:hidden;
  color:#ffffff;
}
.faq-help-card::before{
  content:"";
  position:absolute;
  top:-120px;
  left:50%;
  transform:translateX(-50%);
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(243,211,106,.28), transparent 70%);
  pointer-events:none;
  filter:blur(10px);
}
.faq-help-icon{
  position:relative;
  z-index:2;
  width:56px;
  height:56px;
  margin:0 auto 20px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  display:grid;
  place-items:center;
  box-shadow:
    0 14px 32px rgba(201,151,31,.45),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.faq-help-icon svg{
  width:24px;
  height:24px;
  stroke:#111111;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.faq-help-label{
  position:relative;
  z-index:2;
  color:var(--home-gold-2);
  font-family:"Manrope",sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.faq-help-title{
  position:relative;
  z-index:2;
  font-family:"Manrope",sans-serif;
  color:#ffffff;
  font-size:22px;
  line-height:1.22;
  letter-spacing:-.02em;
  margin-bottom:14px;
  font-weight:800;
}
.faq-help-text{
  position:relative;
  z-index:2;
  font-size:14.5px;
  line-height:1.55;
  color:rgba(255,255,255,.70);
  margin-bottom:22px;
}
.faq-help-cta{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 22px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  color:#0a0a0a;
  text-decoration:none;
  font-family:"Manrope",sans-serif;
  font-weight:800;
  font-size:13.5px;
  box-shadow:0 12px 30px rgba(201,151,31,.35);
  transition:transform .3s ease, box-shadow .3s ease;
}
.faq-help-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 44px rgba(201,151,31,.50);
}
.faq-help-cta svg{
  width:14px;
  height:14px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ============================================================
   FAQ Aside · Profile-Card mit Sebastian / Lucas Toggle
   ============================================================ */
.faq-profile-card{
  position:relative;
  border-radius:24px;
  background:#ffffff;
  border:1px solid rgba(201,151,31,.22);
  box-shadow:0 12px 40px rgba(80,60,20,.10);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* Top-Toggle: Sebastian / Lucas */
.fp-toggle{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:6px;
  gap:0;
  background:rgba(201,151,31,.08);
  border-bottom:1px solid rgba(201,151,31,.18);
}
.fp-toggle-btn{
  position:relative;
  z-index:2;
  padding:10px 8px;
  border:none;
  background:transparent;
  cursor:pointer;
  font-family:"Manrope",sans-serif;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.02em;
  color:rgba(10,10,10,.55);
  transition:color .35s ease;
  border-radius:12px;
}
.fp-toggle-btn.is-active{
  color:#0a0a0a;
}
.fp-toggle-pill{
  position:absolute;
  top:6px;
  left:6px;
  width:calc(50% - 6px);
  height:calc(100% - 12px);
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  border-radius:12px;
  box-shadow:0 4px 12px rgba(201,151,31,.30);
  transition:transform .45s cubic-bezier(.5,1.7,.5,1);
  z-index:1;
}
.faq-profile-card[data-active="lucas"] .fp-toggle-pill{
  transform:translateX(100%);
}

/* Panels (Sebastian / Lucas) */
.fp-panel{
  display:none;
  flex-direction:column;
}
.fp-panel.is-active{
  display:flex;
}

/* Cover-Foto */
.fp-cover{
  position:relative;
  width:100%;
  height:200px;
  background-size:cover;
  background-position:center 20%;
  background-color:#f4ecd6;
}
.fp-cover-fade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(255,255,255,.6) 90%, #ffffff 100%);
  pointer-events:none;
}

/* Main-Content */
.fp-main{
  position:relative;
  padding:20px 22px 18px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* Sub-Sections (Über / Werdegang / Kontakt) */
.fp-section{
  display:none;
}
.fp-section.is-active{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.fp-subtitle{
  font-family:"Manrope",sans-serif;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--home-gold);
}

/* Über */
.fp-desc{
  font-family:"DM Sans",sans-serif;
  font-size:14px;
  line-height:1.55;
  color:var(--home-ink-soft);
}
.fp-desc strong{
  color:var(--home-ink);
  font-weight:700;
}

/* Stats */
.fp-stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin-top:4px;
}
.fp-stat{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:12px 8px;
  background:rgba(201,151,31,.06);
  border:1px solid rgba(201,151,31,.15);
  border-radius:12px;
  text-align:center;
}
.fp-stat strong{
  font-family:"Manrope",sans-serif;
  font-size:16px;
  font-weight:800;
  color:var(--home-gold-3);
  line-height:1;
}
.fp-stat span{
  font-family:"DM Sans",sans-serif;
  font-size:9.5px;
  font-weight:600;
  color:var(--home-ink-soft);
  line-height:1.2;
}

/* Werdegang */
.fp-timeline{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.fp-item{
  position:relative;
  padding:12px 12px 12px 46px;
  background:rgba(201,151,31,.05);
  border:1px solid rgba(201,151,31,.14);
  border-radius:12px;
}
.fp-item::before{
  content:attr(data-year);
  position:absolute;
  left:8px;
  top:12px;
  width:32px;
  height:26px;
  display:grid;
  place-items:center;
  font-family:"Manrope",sans-serif;
  font-size:10px;
  font-weight:800;
  color:#0a0a0a;
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  border-radius:6px;
  letter-spacing:.02em;
}
.fp-item-title{
  font-family:"Manrope",sans-serif;
  font-size:12.5px;
  font-weight:800;
  color:var(--home-ink);
  line-height:1.25;
  margin-bottom:2px;
}
.fp-item-title span{
  color:var(--home-gold-3);
  font-weight:700;
}
.fp-item-desc{
  font-family:"DM Sans",sans-serif;
  font-size:11.5px;
  line-height:1.4;
  color:var(--home-ink-soft);
}

/* Kontakt */
.fp-contact-wrap{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.fp-contact{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:rgba(201,151,31,.05);
  border:1px solid rgba(201,151,31,.14);
  border-radius:10px;
  font-family:"DM Sans",sans-serif;
  font-size:12.5px;
  font-weight:600;
  color:var(--home-ink);
}
.fp-contact svg{
  width:14px;
  height:14px;
  stroke:var(--home-gold-3);
  flex-shrink:0;
}
.fp-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:4px;
  padding:12px 18px;
  border-radius:100px;
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  color:#0a0a0a;
  text-decoration:none;
  font-family:"Manrope",sans-serif;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:0 8px 20px rgba(201,151,31,.30);
  transition:transform .25s ease, box-shadow .25s ease;
}
.fp-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(201,151,31,.45);
}

/* Bottom Tabs */
.fp-tabs{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  margin:14px -22px -18px;
  border-top:1px solid rgba(201,151,31,.15);
}
.fp-tabs button{
  position:relative;
  padding:14px 6px;
  border:none;
  background:transparent;
  cursor:pointer;
  font-family:"Manrope",sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(10,10,10,.42);
  transition:color .3s ease;
}
.fp-tabs button:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;
  top:20%;
  bottom:20%;
  width:1px;
  background:rgba(201,151,31,.15);
}
.fp-tabs button.is-active{
  color:var(--home-gold-3);
}
.fp-tabs button.is-active::before{
  content:"";
  position:absolute;
  bottom:0;
  left:20%;
  right:20%;
  height:2px;
  background:linear-gradient(90deg, var(--home-gold-2), var(--home-gold-3));
  border-radius:2px 2px 0 0;
}

/* Responsive FAQ */
@media (max-width:1060px){
  .faq-layout{grid-template-columns:1fr; gap:36px}
  .faq-aside{
    position:relative;
    top:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    align-items:stretch;
  }
}
@media (max-width:800px){
  .faq-aside{grid-template-columns:1fr}
}
@media (max-width:700px){
  .faq-section{padding:70px 20px 90px}
  .faq-head{margin-bottom:44px}
  .faq-q{padding:18px 18px; gap:14px}
  .faq-q-text{font-size:15px}
  .faq-a{padding:0 18px 20px 60px; font-size:14.5px}
  .faq-help-card{padding:32px 24px 26px}
  .faq-help-title{font-size:19px}
  .fp-cover{height:180px}
}


/* ============================================================
   12 · KOSTENLOSER KLARHEITS-CHECK · STANDORT DRESDEN
   ============================================================ */
.check-section{
  position:relative;
  padding:120px 50px 140px;
  background:
    radial-gradient(circle at 15% 10%, rgba(201,151,31,.08), transparent 45%),
    radial-gradient(circle at 90% 90%, rgba(201,151,31,.10), transparent 50%),
    linear-gradient(180deg, #fbf8f0 0%, #f4ecd6 55%, #ebe5d4 100%);
  overflow:hidden;
}
.check-section::before{
  content:"";
  position:absolute;
  top:-100px;
  left:50%;
  transform:translateX(-50%);
  width:900px;
  height:900px;
  background:radial-gradient(circle, rgba(201,151,31,.08), transparent 60%);
  pointer-events:none;
  filter:blur(30px);
}
.check-shell{
  position:relative;
  z-index:2;
  max-width:1340px;
  margin:0 auto;
}

/* Header · zentriert (nur Eyebrow + Headline) */
.check-head{
  text-align:center;
  max-width:820px;
  margin:0 auto 70px;
}
.check-kicker{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
  font-family:"Manrope",sans-serif;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--home-gold);
}
.check-kicker::before,
.check-kicker::after{
  content:"";
  width:28px;
  height:1.5px;
  background:linear-gradient(90deg, transparent, var(--home-gold-3), transparent);
}
.check-title{
  font-family:"Manrope",sans-serif;
  font-size:clamp(38px, 4.4vw, 66px);
  line-height:1.12;
  letter-spacing:-.048em;
  font-weight:800;
  color:var(--home-ink);
  text-wrap:balance;
}
.check-title em{
  display:block;
  margin-top:6px;
  padding-bottom:.08em;
  font-style:italic;
  font-weight:800;
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* Grid: Wizard 1.15fr · Standort 0.85fr · gleiche Höhe */
.check-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap:40px;
  align-items:stretch;
}


/* ============================================================
   LINKS · WIZARD
   ============================================================ */
.check-wizard-wrap{
  position:relative;
}
.check-wizard{
  position:relative;
  padding:40px 42px 32px;
  border-radius:32px;
  background:linear-gradient(180deg, #ffffff 0%, #fdfcf7 100%);
  border:1px solid rgba(201,151,31,.20);
  box-shadow:
    0 40px 100px -30px rgba(80,60,20,.22),
    0 0 0 1px rgba(255,255,255,.5) inset;
  overflow:hidden;
}
.check-wizard::before{
  content:"";
  position:absolute;
  top:-100px;
  right:-100px;
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(243,211,106,.24), transparent 65%);
  pointer-events:none;
  filter:blur(20px);
}

/* Progress-Steps */
.cw-progress{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:32px;
}
.cw-step{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px 8px 8px;
  border-radius:100px;
  background:rgba(201,151,31,.06);
  border:1px solid rgba(201,151,31,.14);
  transition:background .35s ease, border-color .35s ease;
}
.cw-step em{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#ffffff;
  border:1.5px solid rgba(201,151,31,.30);
  font-family:"Manrope",sans-serif;
  font-size:12px;
  font-weight:800;
  font-style:normal;
  color:rgba(10,10,10,.45);
  transition:background .35s ease, color .35s ease, border-color .35s ease, transform .35s cubic-bezier(.5,1.7,.5,1);
}
.cw-step b{
  font-family:"Manrope",sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(10,10,10,.55);
  transition:color .35s ease;
}
.cw-step.is-active{
  background:linear-gradient(135deg, rgba(243,211,106,.22), rgba(201,151,31,.10));
  border-color:rgba(201,151,31,.40);
}
.cw-step.is-active em{
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  color:#0a0a0a;
  border-color:transparent;
  transform:scale(1.08);
  box-shadow:0 6px 14px rgba(201,151,31,.30);
}
.cw-step.is-active b{color:var(--home-gold-3)}
.cw-step.is-done em{
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  color:#0a0a0a;
  border-color:transparent;
}
.cw-step.is-done b{color:var(--home-ink)}
.cw-bar{
  flex:1;
  height:3px;
  border-radius:100px;
  background:rgba(201,151,31,.16);
  overflow:hidden;
  position:relative;
}
.cw-bar i{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg, var(--home-gold-2), var(--home-gold-3));
  border-radius:100px;
  transition:width .5s cubic-bezier(.5,0,.2,1);
}
.cw-bar.is-done i{width:100%}

/* Form */
.cw-form{position:relative}

/* Panels */
.cw-panel{
  display:none;
  border:none;
  padding:0;
  margin:0;
  animation:cwFadeUp .5s cubic-bezier(.2,.8,.2,1);
}
.cw-panel.is-active{display:block}
@keyframes cwFadeUp{
  from{opacity:0; transform:translateY(10px)}
  to  {opacity:1; transform:translateY(0)}
}

.cw-panel-head{margin-bottom:24px}
.cw-panel-sub{
  font-family:"Manrope",sans-serif;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--home-gold);
  margin-bottom:8px;
}
.cw-panel-title{
  font-family:"Manrope",sans-serif;
  font-size:26px;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.028em;
  color:var(--home-ink);
  margin-bottom:8px;
}
.cw-panel-hint{
  font-family:"DM Sans",sans-serif;
  font-size:14px;
  color:var(--home-ink-soft);
  line-height:1.5;
}

/* Choice-Grid */
.cw-choices{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.cw-choices--3col{grid-template-columns:repeat(3, 1fr)}
.cw-choices--2col{grid-template-columns:1fr 1fr}

.cw-choice{
  position:relative;
  cursor:pointer;
}
.cw-choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.cw-choice-inner{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:16px;
  background:#ffffff;
  border:1.5px solid rgba(201,151,31,.16);
  box-shadow:0 4px 14px rgba(80,60,20,.05);
  transition:border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.cw-choice:hover .cw-choice-inner{
  border-color:rgba(201,151,31,.40);
  box-shadow:0 8px 24px rgba(201,151,31,.12);
  transform:translateY(-1px);
}
.cw-choice-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(243,211,106,.18), rgba(201,151,31,.05));
  border:1px solid rgba(201,151,31,.22);
  color:var(--home-gold-3);
  flex-shrink:0;
}
.cw-choice-icon svg{width:16px; height:16px}
.cw-choice-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.cw-choice-copy strong{
  font-family:"Manrope",sans-serif;
  font-size:13.5px;
  font-weight:800;
  color:var(--home-ink);
  letter-spacing:-.005em;
}
.cw-choice-copy em{
  font-family:"DM Sans",sans-serif;
  font-size:11.5px;
  font-weight:500;
  font-style:normal;
  color:var(--home-ink-soft);
}
.cw-choice-check{
  width:22px;
  height:22px;
  border-radius:50%;
  border:1.5px solid rgba(201,151,31,.35);
  background:#ffffff;
  position:relative;
  flex-shrink:0;
  transition:background .3s ease, border-color .3s ease;
}
.cw-choice-check::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -60%) rotate(45deg) scale(0);
  width:5px; height:10px;
  border:1.8px solid #0a0a0a;
  border-top:none;
  border-left:none;
  transition:transform .3s cubic-bezier(.5,1.7,.5,1);
}
.cw-choice input:checked ~ .cw-choice-inner{
  border-color:rgba(201,151,31,.65);
  background:linear-gradient(135deg, rgba(243,211,106,.14), rgba(255,255,255,1) 60%);
  box-shadow:
    0 12px 30px rgba(201,151,31,.20),
    0 0 0 3px rgba(201,151,31,.15);
}
.cw-choice input:checked ~ .cw-choice-inner .cw-choice-icon{
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  color:#0a0a0a;
  border-color:transparent;
}
.cw-choice input:checked ~ .cw-choice-inner .cw-choice-check{
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  border-color:transparent;
}
.cw-choice input:checked ~ .cw-choice-inner .cw-choice-check::after{
  transform:translate(-50%, -60%) rotate(45deg) scale(1);
}
/* Slim variant (Einkommen) */
.cw-choice--slim .cw-choice-inner{
  grid-template-columns:1fr auto;
  padding:12px 14px;
}
.cw-choice--slim .cw-choice-copy strong{font-size:13px}
/* Radio-variant für 3-col */
.cw-choice--radio .cw-choice-inner{
  grid-template-columns:auto 1fr auto;
  padding:12px 14px;
}
.cw-choice--radio.cw-choice--slim .cw-choice-inner{
  grid-template-columns:1fr auto;
  justify-items:start;
}

/* Field-Blocks (Step 2) */
.cw-field-block{margin-bottom:20px}
.cw-field-block:last-child{margin-bottom:0}
.cw-field-label{
  display:block;
  font-family:"Manrope",sans-serif;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--home-ink-soft);
  margin-bottom:10px;
}

/* Fields (Step 3) */
.cw-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.cw-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.cw-field--wide{grid-column:1 / -1}
.cw-field-lbl{
  font-family:"Manrope",sans-serif;
  font-size:12px;
  font-weight:700;
  color:var(--home-ink-soft);
  letter-spacing:.02em;
}
.cw-field input:not([type="checkbox"]),
.cw-field textarea{
  width:100%;
  padding:13px 16px;
  border-radius:12px;
  background:#ffffff;
  border:1.5px solid rgba(201,151,31,.20);
  font-family:"DM Sans",sans-serif;
  font-size:14.5px;
  color:var(--home-ink);
  transition:border-color .3s ease, box-shadow .3s ease;
  outline:none;
}
.cw-field input:focus,
.cw-field textarea:focus{
  border-color:rgba(201,151,31,.65);
  box-shadow:0 0 0 3px rgba(201,151,31,.15);
}
.cw-field textarea{resize:vertical; min-height:80px}
.cw-field--consent{
  flex-direction:row;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(201,151,31,.05);
  border:1px solid rgba(201,151,31,.14);
  font-family:"DM Sans",sans-serif;
  font-size:12.5px;
  color:var(--home-ink-soft);
  line-height:1.5;
}
.cw-field--consent input[type="checkbox"]{
  margin-top:2px;
  accent-color:var(--home-gold-3);
  flex-shrink:0;
}
.cw-field--consent a{
  color:var(--home-gold-3);
  text-decoration:underline;
}

/* Qualify-Card (Step 4 · "Du passt zur Zielgruppe") — mit Logo + persönlichem Satz */
.cw-qualify-card{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:center;
  margin-bottom:22px;
  padding:18px 20px;
  border-radius:18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(243,211,106,.18), transparent 55%),
    linear-gradient(135deg, rgba(243,211,106,.14), rgba(201,151,31,.04) 65%, #ffffff 100%);
  border:1px solid rgba(201,151,31,.35);
  box-shadow:
    0 12px 32px rgba(201,151,31,.14),
    inset 0 1px 0 rgba(255,255,255,.6);
  overflow:hidden;
}
.cw-qualify-card::before{
  content:"";
  position:absolute;
  top:-40px;
  right:-40px;
  width:140px;
  height:140px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(243,211,106,.28), transparent 65%);
  pointer-events:none;
  filter:blur(6px);
}
.cw-qualify-logo{
  position:relative;
  z-index:1;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg, #ffffff, #fdf9ea);
  border:1px solid rgba(201,151,31,.30);
  box-shadow:0 8px 20px rgba(201,151,31,.20);
  flex-shrink:0;
}
.cw-qualify-logo img{
  width:34px;
  height:34px;
  object-fit:contain;
  filter:drop-shadow(0 4px 8px rgba(201,151,31,.20));
}
.cw-qualify-copy{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.cw-qualify-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:"Manrope",sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--home-gold-3);
}
.cw-qualify-eyebrow i[data-lucide]{width:12px; height:12px}
.cw-qualify-title{
  font-family:"Manrope",sans-serif;
  font-size:15.5px;
  font-weight:800;
  color:var(--home-ink);
  line-height:1.25;
  letter-spacing:-.015em;
}
.cw-qualify-text{
  font-family:"DM Sans",sans-serif;
  font-size:12.5px;
  line-height:1.55;
  color:var(--home-ink-soft);
}
.cw-qualify-text strong{color:var(--home-ink); font-weight:700}

/* Success */
.cw-panel--success{padding:30px 12px; text-align:center}
.cw-success-icon{
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  margin:0 auto 16px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  color:#0a0a0a;
  box-shadow:0 16px 40px rgba(201,151,31,.35);
}
.cw-success-icon svg{width:32px; height:32px}
.cw-success-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border-radius:100px;
  background:linear-gradient(135deg, rgba(243,211,106,.22), rgba(201,151,31,.10));
  border:1px solid rgba(201,151,31,.40);
  color:var(--home-gold-3);
  font-family:"Manrope",sans-serif;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.20em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.cw-success-badge i[data-lucide]{width:13px; height:13px}
.cw-success h3{
  font-family:"Manrope",sans-serif;
  font-size:26px;
  font-weight:800;
  color:var(--home-ink);
  margin-bottom:10px;
  letter-spacing:-.02em;
}
.cw-success p{
  font-family:"DM Sans",sans-serif;
  font-size:15px;
  color:var(--home-ink-soft);
  line-height:1.6;
  max-width:440px;
  margin:0 auto 22px;
}
.cw-success-summary{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  max-width:520px;
  margin:0 auto;
}
.cws-item{
  padding:14px 10px;
  border-radius:12px;
  background:rgba(201,151,31,.06);
  border:1px solid rgba(201,151,31,.18);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.cws-item em{
  font-family:"Manrope",sans-serif;
  font-style:normal;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--home-gold-3);
}
.cws-item strong{
  font-family:"Manrope",sans-serif;
  font-size:12.5px;
  font-weight:800;
  color:var(--home-ink);
  line-height:1.2;
}

/* Controls */
.cw-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:32px;
}
.cw-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 20px;
  border-radius:100px;
  background:transparent;
  border:1.5px solid rgba(10,10,10,.10);
  color:var(--home-ink-soft);
  font-family:"Manrope",sans-serif;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:border-color .3s ease, background .3s ease, color .3s ease;
}
.cw-back:not(:disabled):hover{
  border-color:rgba(201,151,31,.40);
  color:var(--home-ink);
  background:rgba(201,151,31,.06);
}
.cw-back:disabled{opacity:0.35; cursor:not-allowed}
.cw-back i[data-lucide]{width:14px; height:14px}

.cw-next{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:0 28px;
  border-radius:100px;
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  color:#0a0a0a;
  border:none;
  font-family:"Manrope",sans-serif;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 14px 36px rgba(201,151,31,.30);
  transition:transform .25s ease, box-shadow .25s ease;
}
.cw-next:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 48px rgba(201,151,31,.42);
}
.cw-next i[data-lucide]{width:16px; height:16px}

.cw-hint{
  margin-top:18px;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(201,151,31,.06);
  border:1px solid rgba(201,151,31,.14);
  display:flex;
  align-items:center;
  gap:10px;
  font-family:"DM Sans",sans-serif;
  font-size:12.5px;
  color:var(--home-ink-soft);
  line-height:1.4;
}
.cw-hint i[data-lucide]{
  width:16px; height:16px;
  color:var(--home-gold-3);
  flex-shrink:0;
}
.cw-hint strong{color:var(--home-ink); font-weight:800}

/* Flash message */
.cw-flash{
  margin:14px 0 0;
  padding:12px 16px;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(201,60,60,.10), rgba(201,60,60,.04));
  border:1px solid rgba(201,60,60,.30);
  color:#a52020;
  font-family:"DM Sans",sans-serif;
  font-size:13px;
  font-weight:600;
  opacity:0;
  transition:opacity .3s ease;
}
.cw-flash.is-visible{opacity:1}


/* ============================================================
   RECHTS · STANDORT · gleiche Höhe wie Wizard, kompakter Inhalt
   ============================================================ */
.check-standort{
  height:100%;
  display:flex;
  flex-direction:column;
  border-radius:32px;
  background:linear-gradient(180deg, #ffffff 0%, #fdfcf7 100%);
  border:1px solid rgba(201,151,31,.20);
  box-shadow:0 40px 100px -30px rgba(80,60,20,.22);
  overflow:hidden;
}

/* Aura-Logo Kopf · mittig zentriert, gold-Glow im Hintergrund */
.cs-logo-wrap{
  position:relative;
  flex-shrink:0;
  padding:36px 20px 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 45%, rgba(243,211,106,.30), transparent 60%),
    linear-gradient(180deg, #fbf8f0 0%, #ffffff 100%);
  border-bottom:1px solid rgba(201,151,31,.14);
}
.cs-logo{
  width:110px;
  height:auto;
  filter:drop-shadow(0 12px 24px rgba(201,151,31,.28));
}

/* Body · flex-1 füllt Rest der Card-Höhe */
.cs-body{
  padding:22px 24px 22px;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.cs-eyebrow{
  font-family:"Manrope",sans-serif;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--home-gold);
}
.cs-address{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(201,151,31,.15);
}
.cs-address strong{
  font-family:"Manrope",sans-serif;
  font-size:19px;
  font-weight:800;
  color:var(--home-ink);
  letter-spacing:-.02em;
  line-height:1.1;
}
.cs-address span{
  font-family:"DM Sans",sans-serif;
  font-size:13px;
  color:var(--home-ink-soft);
  font-weight:500;
}

/* Facts-Liste · kompakter */
.cs-facts{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}
.cs-facts li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:9px 10px;
  border-radius:10px;
  background:rgba(201,151,31,.05);
  border:1px solid rgba(201,151,31,.12);
}
.cs-facts-icon{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  color:#0a0a0a;
  flex-shrink:0;
}
.cs-facts-icon svg{width:13px; height:13px}
.cs-facts li strong{
  display:block;
  font-family:"Manrope",sans-serif;
  font-size:11.5px;
  font-weight:800;
  color:var(--home-ink);
  line-height:1.25;
  margin-bottom:1px;
}
.cs-facts li em{
  display:block;
  font-family:"DM Sans",sans-serif;
  font-size:10.5px;
  font-weight:500;
  font-style:normal;
  color:var(--home-ink-soft);
  line-height:1.3;
}

/* Contact-Row · kompakter */
.cs-contact-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.cs-contact-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 10px;
  border-radius:10px;
  background:#ffffff;
  border:1.5px solid rgba(201,151,31,.22);
  color:var(--home-ink);
  text-decoration:none;
  font-family:"DM Sans",sans-serif;
  font-size:11.5px;
  font-weight:700;
  transition:border-color .3s ease, background .3s ease, transform .3s ease;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  min-width:0;
}
.cs-contact-btn span{
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.cs-contact-btn i[data-lucide]{
  width:13px; height:13px;
  color:var(--home-gold-3);
  flex-shrink:0;
}
.cs-contact-btn:hover{
  border-color:rgba(201,151,31,.55);
  background:rgba(201,151,31,.05);
  transform:translateY(-1px);
}

.cs-route-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 18px;
  border-radius:100px;
  background:linear-gradient(135deg, var(--home-gold-2), var(--home-gold-3));
  color:#0a0a0a;
  text-decoration:none;
  font-family:"Manrope",sans-serif;
  font-size:12.5px;
  font-weight:800;
  box-shadow:0 10px 24px rgba(201,151,31,.30);
  transition:transform .25s ease, box-shadow .25s ease;
}
.cs-route-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(201,151,31,.45);
}
.cs-route-cta i[data-lucide]{width:14px; height:14px}
.cs-route-cta i[data-lucide]:last-child{width:11px; height:11px; opacity:.7}

/* Wizard Wrap braucht auch height:100% damit stretch klappt */
.check-wizard-wrap{
  height:100%;
  display:flex;
}
.check-wizard{
  flex:1;
  display:flex;
  flex-direction:column;
}
.cw-form{
  flex:1;
  display:flex;
  flex-direction:column;
}


/* Responsive Check-Section */
@media (max-width:1000px){
  /* minmax(0,1fr) statt 1fr: sonst verhindert das implizite auto-Minimum,
     dass die Spalte unter die Breite ihres breitesten Kindes schrumpft. */
  .check-grid{grid-template-columns:minmax(0, 1fr); gap:32px}
  .check-wizard-wrap{min-width:0}
  .check-standort{position:relative; top:auto}
}
@media (max-width:700px){
  .check-section{padding:80px 20px 100px}
  .check-head{margin-bottom:44px}
  .check-wizard{padding:28px 22px 24px}
  /* Vier beschriftete Schritte brauchten 489px bei 289px Platz, Schritt 4
     lag komplett ausserhalb. Mobil nur die Ziffern, beschriftet wird der
     Schritt, auf dem man gerade steht. */
  .cw-progress{gap:6px; margin-bottom:24px}
  .cw-step{padding:5px; gap:0}
  .cw-step b{display:none}
  .cw-step.is-active{padding:5px 13px 5px 5px; gap:9px}
  .cw-step.is-active b{display:inline}
  .cw-bar{min-width:8px}
  .cw-choices{grid-template-columns:1fr}
  .cw-choices--3col{grid-template-columns:1fr 1fr 1fr; gap:8px}
  .cw-choices--3col .cw-choice-inner{padding:10px 8px; grid-template-columns:1fr; justify-items:center; text-align:center; gap:6px}
  .cw-choices--3col .cw-choice-check{display:none}
  .cw-choices--2col{grid-template-columns:1fr 1fr}
  .cw-fields{grid-template-columns:1fr}
  .cw-panel-title{font-size:22px}
  .cs-body{padding:22px 20px}
  .cs-contact-row{grid-template-columns:1fr}
}