/* ===== Lokale Web-Fonts (Abmahnschutz DE: keine Google-Server, latin-Subset, self-hosted) =====
   Familien-Namen EXAKT wie bisher (Schibsted Grotesk / Inter / Caveat), font-display:swap.
   Hinweis: Schibsted Grotesk hat als reales Instance-Minimum 400 — ein echtes 300er-Gewicht
   existiert nicht (Google liefert für wght@300 keine Datei). Das Design nutzt 400 als "thin",
   daher ist 300 kein Verlust; ein evtl. font-weight:300 fällt sauber auf 400 zurueck. */
@font-face{ font-family:'Schibsted Grotesk'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/schibsted-grotesk-400.woff2') format('woff2'); }
@font-face{ font-family:'Schibsted Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/schibsted-grotesk-700.woff2') format('woff2'); }
@font-face{ font-family:'Schibsted Grotesk'; font-style:normal; font-weight:900; font-display:swap;
  src:url('fonts/schibsted-grotesk-900.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/inter-400.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/inter-500.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/inter-600.woff2') format('woff2'); }
@font-face{ font-family:'Caveat'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/caveat-600.woff2') format('woff2'); }

:root{
  --crimson:#b51e4b; --maroon:#2e0c16; --wine:#4a1024; --cream:#fbf7f1;
  --greige:#cbbfae; --ink:#26222a;
  --serif:'Schibsted Grotesk',sans-serif; --sans:'Inter',sans-serif;
}

/* ===== HERO · "hinter der Hand" — 3-Akt-Sequenz =====
   Additiv. render()/canvas/hand bleiben unberuehrt.
   Alter Farb-Wisch wird optisch neutralisiert (bewegt sich unsichtbar weiter). */
#bgtrack .panel{ background:transparent !important; }
#bgtrack .flist, #bgtrack .cta-block{ display:none !important; }

/* #hero-acts is positioned but z-index:auto -> it does NOT create its own stacking
   context. So its positioned children participate directly in #stage's stacking
   context and are compared against #hand (z20): atmosphere (z6/7/9) renders BEHIND
   the hand, #phone-screen (z25) renders ABOVE it. Video phase stays pixel-identical
   because every new layer is opacity:0 while p<0.53. */
#hero-acts{ position:absolute; inset:0; z-index:auto; pointer-events:none; }

/* Rebrand-Abdeckung nur fuer die letzten bewegten Smartphone-Frames:
   direkt im #stage zwischen Canvas (z5) und fixer Hand (z20), damit sie in der
   Canvas-Phase nicht vom Browser hinter das Video composited wird. */
#video-login-screen{ position:absolute; z-index:18; overflow:hidden; opacity:0;
  pointer-events:none; width:0; height:0; background:#faf7ee;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  will-change:opacity,left,top,width,height; }
#video-login-screen img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; }
#video-login-screen.legacy-mask{ background:rgba(25,29,34,.34);
  -webkit-backdrop-filter:blur(8px) brightness(.62);
  backdrop-filter:blur(8px) brightness(.62);
  border-radius:0 0 8px 8px !important; }
#video-login-screen.legacy-mask img{ opacity:0; }

/* ---- Concept C: scroll-coupled tint drift (crimson -> cream -> gold) ---- */
#ha-tint{ position:absolute; inset:0; z-index:7; opacity:0; mix-blend-mode:soft-light;
  background:radial-gradient(120% 120% at 50% 30%, rgba(181,30,75,.0), rgba(181,30,75,.0) 60%, rgba(181,30,75,.0));
  transition:none; pointer-events:none; }
/* ---- Concept C: single diagonal god-ray sweep over p 0.55->1.0 ---- */
#ha-ray{ position:absolute; top:-40%; left:-30%; width:60%; height:180%; z-index:9; opacity:0;
  transform:rotate(18deg) translateX(-60vw); filter:blur(38px); pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,244,224,.85) 45%, rgba(255,236,205,.55) 60%, transparent);
  mix-blend-mode:screen; }

/* ---- Concept A: live screen inside the phone glass (above the hand) ---- */
#phone-screen{ position:absolute; z-index:25; overflow:hidden; opacity:0; pointer-events:none;
  width:0; height:0; background:#faf7ee; box-shadow:inset 0 0 0 1px rgba(46,12,22,.06);
  will-change:opacity,left,top,width,height; container-type:size; }
/* ============ Chat-Story im Glas (Beispiel-Dialog Studio <-> SALOONEA) ============
   Alle Groessen in cqw (Container-Query-Breite des Glases) -> skaliert proportional
   auf jeder Viewport-Groesse. Bubbles werden scroll-gekoppelt via JS eingeblendet. */
#chat-ui{ position:absolute; inset:0; z-index:2; background:#f6f0e8; display:flex;
  flex-direction:column; font-family:var(--sans); }
.ch-status{ position:relative; height:10cqw; display:flex; align-items:center;
  justify-content:space-between; padding:1.4cqw 6cqw 0; flex:none; }
.ch-time{ font-size:3.9cqw; font-weight:600; color:#1c1418; letter-spacing:.02em; }
.ch-island{ position:absolute; left:50%; top:56%; transform:translate(-50%,-50%);
  width:24cqw; height:6.6cqw; background:#0d0a0c; border-radius:99px; }
.ch-ics{ display:flex; gap:1.8cqw; align-items:center; }
.ch-sig{ width:4.4cqw; height:3cqw; background:#1c1418;
  clip-path:polygon(0 62%,22% 62%,22% 100%,0 100%,28% 100%,28% 42%,50% 42%,50% 100%,56% 100%,56% 22%,78% 22%,78% 100%,84% 100%,84% 0,100% 0,100% 100%,0 100%); }
.ch-wifi{ width:4.2cqw; height:3cqw; background:#1c1418;
  clip-path:polygon(50% 100%, 0 28%, 14% 12%, 50% 62%, 86% 12%, 100% 28%); }
.ch-bat{ width:6.6cqw; height:3.2cqw; border-radius:1cqw; border:.45cqw solid rgba(28,20,24,.9);
  background:linear-gradient(to right,#1c1418 0 72%,transparent 72%); background-clip:content-box; padding:.4cqw; }
.ch-head{ display:flex; align-items:center; gap:3cqw; padding:2.6cqw 5cqw 3cqw;
  background:#fff; border-bottom:1px solid rgba(46,12,22,.08); flex:none; }
.ch-av{ width:9cqw; height:9cqw; border-radius:26%; background:linear-gradient(140deg,#c4275a,#8a1a3c);
  color:#fff; font-family:var(--serif); font-weight:900; font-size:4.6cqw;
  display:flex; align-items:center; justify-content:center; flex:none; }
.ch-who{ font-family:var(--serif); font-weight:700; font-size:4.4cqw; color:var(--ink); line-height:1.15; }
.ch-who em{ display:block; font-style:normal; font-family:var(--sans); font-weight:400;
  font-size:3.1cqw; color:#3f9e63; }
.ch-scroll{ flex:1; overflow:hidden; padding:4cqw 5cqw 0; }
.ch-track{ display:flex; flex-direction:column; gap:2.8cqw; will-change:transform; padding-bottom:12cqw; }
.ch-b{ max-width:84%; padding:3cqw 4cqw; border-radius:4.6cqw; font-size:4.3cqw;
  line-height:1.42; opacity:0; will-change:opacity,transform; }
.ch-b.me{ align-self:flex-end; background:var(--crimson); color:#fff; border-bottom-right-radius:1.4cqw; }
.ch-b.sa{ align-self:flex-start; background:#fff; color:var(--ink);
  border:1px solid rgba(46,12,22,.08); border-bottom-left-radius:1.4cqw; }
.ch-tag{ display:inline-flex; align-items:center; gap:.8cqw; font-size:2.9cqw; font-weight:600;
  color:#8a6a3c; background:rgba(232,192,140,.28); border-radius:99px; padding:.7cqw 2.2cqw;
  margin-bottom:1.4cqw; }
.ch-card{ display:block; margin-top:1.8cqw; background:var(--maroon); border-radius:2.6cqw;
  padding:2.6cqw 3cqw; }
.ch-card-k{ display:block; font-size:2.6cqw; letter-spacing:.14em; color:#e8c074; font-weight:600; }
.ch-bars{ display:flex; align-items:flex-end; gap:1.2cqw; height:9cqw; margin-top:1.6cqw; }
.ch-bars i{ flex:1; border-radius:.8cqw .8cqw 0 0; background:linear-gradient(to top,#8a6a3c,#e8c074); }
.ch-bars i:last-child{ background:linear-gradient(to top,#b51e4b,#e86a90); }
.ch-slots{ display:flex; gap:1.6cqw; margin:1.8cqw 0; }
.ch-slot{ flex:1; background:rgba(181,30,75,.1); border:1px solid rgba(181,30,75,.3);
  border-radius:2cqw; padding:1.6cqw; font-size:3.4cqw; color:#8a1a3c; font-weight:600; text-align:center; }
.ch-task{ display:block; margin:1.8cqw 0; background:rgba(232,192,140,.16);
  border:1px solid rgba(232,192,140,.55); border-radius:2cqw; padding:2cqw 2.4cqw;
  font-size:3.8cqw; color:#5a4020; }
.ch-note{ position:absolute; right:4cqw; bottom:2.6cqw; font-size:2.8cqw;
  letter-spacing:.08em; color:rgba(46,12,22,.35); }
/* Login-Replik: Basisbild + pressed-Variante (Button gedrueckt), Crossfade via opacity */
#ps-login{ position:absolute; inset:0; z-index:4; overflow:hidden;
  will-change:opacity,transform; transform-origin:50% 46%; }
#ps-login img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
#ps-login-pressed{ opacity:0; will-change:opacity; }

@media (prefers-reduced-motion:reduce){ #ha-ray{ display:none; } }
#ha-aurora{ position:absolute; inset:0; z-index:6; opacity:0; overflow:hidden; background:linear-gradient(160deg,#fdf7f2,#f7ece6 58%,#f1ddd8); }
#ha-aurora .hab{ position:absolute; border-radius:50%; filter:blur(72px); }
#ha-aurora .hab1{ width:46vw;height:46vw;background:radial-gradient(circle,rgba(181,30,75,.30),transparent 64%);top:-12%;left:-6%;animation:haDriftA 22s ease-in-out infinite; }
#ha-aurora .hab2{ width:40vw;height:40vw;background:radial-gradient(circle,rgba(224,122,150,.26),transparent 64%);top:8%;right:-10%;animation:haDriftB 27s ease-in-out infinite; }
#ha-aurora .hab3{ width:36vw;height:36vw;background:radial-gradient(circle,rgba(232,192,140,.26),transparent 64%);bottom:-16%;left:40%;animation:haDriftA 25s ease-in-out infinite reverse; }
@keyframes haDriftA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5vw,4vw) scale(1.2)}}
@keyframes haDriftB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-4vw,3vw) scale(1.18)}}
.ha-grain{ position:absolute; inset:0; opacity:.05; background-size:200px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
#hand{ -webkit-mask-image:none; mask-image:none; }
.hb{ position:absolute; top:50%; left:7%; width:36%;
  max-width:min(480px, calc(var(--glass-l, 60vw) - 7vw - 44px));
  transform:translateY(-50%); opacity:0; z-index:8; transition:opacity .25s ease; }
.hb-k{ font-family:var(--sans); font-size:13px; letter-spacing:4px; text-transform:uppercase; color:#9c1a3f; font-weight:600; }
.hb-h{ font-family:var(--serif); font-size:clamp(40px,5vw,66px); line-height:1.02; color:var(--maroon); margin-top:16px; letter-spacing:-1px; }
.hb-h .t{ font-weight:400; } .hb-h .b{ font-weight:900; color:var(--crimson); }
@media (prefers-reduced-motion:reduce){ #ha-aurora .hab{ animation:none!important; } }
@media (max-width:1280px) and (min-width:761px){ .hb-h{ font-size:clamp(30px,4.2vw,50px); } }
/* Mobile: Das Glas fuellt fast den ganzen Viewport und der Chat liegt darueber (z25>z8) —
   die Beats waeren unsichtbar hinterm Glas. Bewusste Degradation: mobil erzaehlt der
   Chat selbst die Story, die Beat-Ebene entfaellt (unabhaengiger QA-Fund 03.07.). */
@media (max-width:760px){ .hb{ display:none; } }

/* overflow-x:clip statt hidden — verhindert H-Scroll OHNE einen Scroll-Container
   zu erzeugen (hidden => overflow-y:auto), damit position:sticky in Sektion 03
   relativ zum Viewport funktioniert. Optisch identisch für alle anderen Sektionen. */
.s-site{ font-family:var(--sans); color:var(--ink); background:var(--cream); overflow-x:clip; }
.s-site *{ box-sizing:border-box; }
.s-site img{ max-width:100%; }
.s-site .g{ font-family:var(--serif); }
.s-site .thin{ font-weight:400; } .s-site .thick{ font-weight:900; }
.s-wrap{ max-width:1440px; margin:0 auto; }

/* ===== Navigation · Skeleton (überm Video) → Glas-Pill (ab Hart-Schnitt, .pill via navScroll) ===== */
html{ scroll-behavior:smooth; }
.s-nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; justify-content:center; padding:14px 20px;
  pointer-events:none; font-family:var(--sans);
}
.s-nav-shell{
  pointer-events:auto; display:flex; align-items:center; justify-content:space-between;
  gap:26px; padding:10px 12px 10px 22px; border-radius:999px;
  width:100%; max-width:100vw; /* Länge statt %: macht den max-width-Morph zur Pill interpolierbar */
  background:transparent; border:1px solid transparent;
  backdrop-filter:blur(0px) saturate(1); -webkit-backdrop-filter:blur(0px) saturate(1);
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease,
    backdrop-filter .35s ease, -webkit-backdrop-filter .35s ease, max-width .45s ease;
}
.s-nav-logo{
  font-family:var(--serif); font-weight:900; font-size:17px; letter-spacing:.28em;
  color:var(--cream); text-decoration:none; text-shadow:0 1px 18px rgba(46,12,22,.35);
  transition:color .35s ease, text-shadow .35s ease, letter-spacing .35s ease, font-size .35s ease;
}
.s-nav-links{ display:flex; align-items:center; gap:22px; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.s-nav-links a{
  font-family:var(--serif); font-weight:400; font-size:13.5px; color:#4a3a40;
  text-decoration:none; text-align:center;
}
/* Bold-Doppelgänger reserviert die 700er-Breite -> kein Layout-Shift beim Hover */
.s-nav-links a::after{
  content:attr(data-t); font-weight:700; height:0; overflow:hidden;
  visibility:hidden; display:block;
}
.s-nav-links a:hover{ font-weight:700; color:var(--maroon); }
.s-nav-cta{
  background:var(--crimson); color:#fff; padding:9px 18px; border-radius:30px;
  font-family:var(--sans); font-size:13.5px; font-weight:500; text-decoration:none;
  transition:background .2s ease;
}
.s-nav-cta:hover{ background:#9c1a3f; }
.s-nav.pill .s-nav-shell{
  max-width:760px;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(22px) saturate(1.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  border-color:rgba(255,255,255,.75);
  box-shadow:0 10px 34px rgba(46,12,22,.14);
}
.s-nav.pill .s-nav-logo{ color:var(--maroon); text-shadow:none; letter-spacing:.22em; font-size:14px; }
.s-nav.pill .s-nav-links{ opacity:1; pointer-events:auto; }

/* fixe Nav verdeckt keine Sektion beim Ankersprung */
.s-site section{ scroll-margin-top:88px; }

@media (max-width:720px){
  .s-nav{ padding:12px 14px; }
  .s-nav-links{ display:none; }
  .s-nav-shell{ padding:8px 10px 8px 18px; }
  .s-nav-logo{ font-size:15px; letter-spacing:.24em; }
  .s-nav-cta{ padding:8px 16px; font-size:13px; }
}

/* ===== Scroll-Reveals + Hover-Politur ===== */
.s-site .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.s-site .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .s-site .reveal{ opacity:1; transform:none; transition:none; } }
.s-site .s03-card, .s-site .s05-ccard, .s-site .s05-pill,
.s-site .s10-pil{
  transition:transform .3s ease, box-shadow .3s ease;
}
.s-site .s03-card:hover, .s-site .s05-ccard:hover,
.s-site .s10-pil:hover{ transform:translateY(-4px); box-shadow:0 18px 44px rgba(46,12,22,.14); }
.s-site .s05-pill:hover{ transform:translateY(-2px); }

/* ===== Sektion 02 · Der Feierabend + Zeit-Rechner (Marquee · Notification-Flut · Feierabend-Uhr · Wende) ===== */
.s02f{ position:relative; padding:0 0 clamp(64px,8vw,104px); }
.s02f-inner{ max-width:1180px; margin:0 auto; padding:clamp(44px,5.5vw,72px) clamp(20px,6vw,96px) 0; }

/* --- warmer Wende-Glow (erst mit .s02f-healed sichtbar) --- */
.s02f-glow{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  transition:opacity 1.1s ease; overflow:hidden; }
.s02f.s02f-healed .s02f-glow{ opacity:1; }
.s02f-glow .gb{ position:absolute; border-radius:50%; filter:blur(90px); }
.s02f-glow .gb1{ width:60vw; height:60vw; max-width:900px; max-height:900px;
  background:radial-gradient(circle,rgba(181,30,75,.34),transparent 62%); right:-14%; bottom:-20%; }
.s02f-glow .gb2{ width:46vw; height:46vw; max-width:700px; max-height:700px;
  background:radial-gradient(circle,rgba(247,180,190,.4),transparent 64%); left:-8%; bottom:2%; }
.s02f-inner{ position:relative; z-index:2; }

/* --- 2 · Headline-Beat --- */
.s02f-head{ max-width:640px; }
.s02f-kick{ font-size:13px; letter-spacing:4px; text-transform:uppercase; color:var(--crimson); font-weight:600; }
.s02f-hl{ font-size:clamp(34px,5vw,62px); line-height:1.05; color:var(--maroon); margin:18px 0 20px; letter-spacing:-.5px; max-width:16ch; }
.s02f-hl .thin{ font-weight:300; }
.s02f-hl .thick{ font-weight:900; color:var(--crimson); }
.s02f-frisst{ display:inline-block; font-weight:300; letter-spacing:0;
  transition:font-weight .35s ease, letter-spacing .35s ease, color .35s ease; }
.s02f-hl.kick .s02f-frisst{ font-weight:900; letter-spacing:.4px; color:var(--crimson); }
.s02f-sub{ font-size:18px; line-height:1.66; color:#5b5158; max-width:520px; margin:0; }

/* --- 3 · Szene-Beat --- */
.s02f-scene{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px);
  align-items:center; margin-top:clamp(44px,6vw,76px); }

/* Feierabend-Uhr */
.s02f-clockwrap{ display:flex; align-items:center; gap:clamp(20px,3vw,34px); }
.s02f-clock{ position:relative; width:110px; height:110px; border-radius:50%; flex:none; }
.s02f-clock::before{ right:auto; }
.s02f-clock .tick{ position:absolute; width:3px; height:9px; background:rgba(46,12,22,.32); border-radius:2px; left:50%; margin-left:-1.5px; }
.s02f-clock .t12{ top:8px; } .s02f-clock .t6{ bottom:8px; }
.s02f-clock .t3{ top:50%; right:8px; left:auto; margin:-1.5px 0 0; width:9px; height:3px; }
.s02f-clock .t9{ top:50%; left:8px; margin:-1.5px 0 0; width:9px; height:3px; }
.s02f-hand{ position:absolute; left:50%; bottom:50%; transform-origin:50% 100%; border-radius:3px;
  background:var(--maroon); transition:transform 0s linear; }
.s02f-hour{ width:4px; height:28px; margin-left:-2px; background:var(--maroon); }
.s02f-minute{ width:3px; height:40px; margin-left:-1.5px; background:var(--crimson); }
.s02f-center{ position:absolute; left:50%; top:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border-radius:50%; background:var(--maroon); z-index:2; box-shadow:0 0 0 2px rgba(251,247,241,.7); }
.s02f-clockmeta{ min-width:0; }
.s02f-time{ font-weight:900; font-size:clamp(38px,5vw,58px); color:var(--maroon); line-height:1; letter-spacing:-1px; }
.s02f-clabel{ font-size:15px; color:#6b5560; margin-top:8px; }

/* Notification-Stack */
.s02f-stack{ display:flex; flex-direction:column; gap:14px; }
/* Notifications sliden von RECHTS ins Bild (symmetrisch zum Abgang bei der Wende);
   Stagger 0/120/240ms via transition-delay — gilt fuer Slide-in UND Slide-out,
   damit die Wende reversibel bleibt (kein JS-Inline-Delay noetig). */
.s02f-note{ padding:16px 20px; opacity:0; transform:translateX(80px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); }
.s02f-note[data-note="2"]{ transition-delay:.12s; }
.s02f-note[data-note="3"]{ transition-delay:.24s; }
.s02f-note.in{ opacity:1; transform:translateX(0); }
.s02f-nrow{ display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.s02f-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.s02f-dot.d-ig{ background:linear-gradient(135deg,#f9a03c,#c13584 55%,#6a2fb0); }
.s02f-dot.d-wa{ background:#25d366; }
.s02f-dot.d-in{ background:var(--crimson); }
.s02f-app{ font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:#9a7f88; font-weight:600; }
.s02f-nt{ font-family:var(--serif); font-weight:700; font-size:18px; color:var(--maroon); line-height:1.2; }
.s02f-nd{ font-size:14px; color:#6b5560; margin-top:5px; line-height:1.45; }
/* Wende: Notifications wischen nach rechts raus (reversibel — ohne .s02f-healed
   sliden sie ueber dieselbe Transition wieder von rechts rein) */
.s02f.s02f-healed .s02f-note{ opacity:0; transform:translateX(120%); pointer-events:none; }

/* --- 4 · Die Wende --- */
.s02f-turn{ margin-top:clamp(80px,16vh,200px); display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(28px,4vw,48px); align-items:center; }
.s02f-bridge{ position:relative; }
.s02f-btxt{ font-size:clamp(30px,4vw,52px); line-height:1.06; color:var(--maroon); letter-spacing:-.5px;
  opacity:0; transform:translateY(16px); transition:opacity .8s ease .15s, transform .8s ease .15s; }
.s02f-btxt .thin{ font-weight:300; }
.s02f-btxt b{ font-weight:900; color:var(--crimson); }
.s02f.s02f-healed .s02f-btxt{ opacity:1; transform:none; }
.s02f-bsmall{ font-size:16px; color:#6b5560; margin-top:14px; opacity:0; transition:opacity .8s ease .45s; }
.s02f.s02f-healed .s02f-bsmall{ opacity:1; }
.s02f-pill{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; background:var(--crimson); color:#fff;
  text-decoration:none; padding:14px 30px; border-radius:30px; font-size:15.5px; font-weight:600; letter-spacing:.2px;
  box-shadow:0 14px 32px rgba(181,30,75,.32); opacity:0; transform:translateY(10px);
  transition:opacity .7s ease .6s, transform .7s ease .6s, box-shadow .25s ease, background .2s ease; }
.s02f.s02f-healed .s02f-pill{ opacity:1; transform:none; }
.s02f-pill:hover{ transform:translateY(-3px); box-shadow:0 20px 42px rgba(181,30,75,.4); background:#9c1a3f; }
.s02f-cue{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin-left:14px;
  border-radius:50%; border:1px solid rgba(46,12,22,.18); color:var(--maroon); text-decoration:none; font-size:18px;
  vertical-align:middle; opacity:0; transition:opacity .7s ease .75s, transform .25s ease, border-color .2s ease;
  animation:s02fBob 1.8s ease-in-out infinite; }
.s02f.s02f-healed .s02f-cue{ opacity:.85; }
.s02f-cue:hover{ border-color:var(--crimson); color:var(--crimson); }
@keyframes s02fBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }

/* --- 5 · Zeit-Rechner --- */
.s02f-calc{ padding:28px 30px 26px; }
.s02f-clk{ font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--crimson); font-weight:600; }
.s02f-crange{ display:flex; align-items:center; gap:16px; margin:22px 0 6px; }
.s02f-slider{ -webkit-appearance:none; appearance:none; flex:1; height:6px; border-radius:6px; margin:0;
  background:linear-gradient(90deg,var(--crimson) 0%,var(--crimson) 40%,rgba(46,12,22,.14) 40%,rgba(46,12,22,.14) 100%);
  cursor:pointer; outline:none; }
.s02f-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%;
  background:#fff; border:2px solid var(--crimson); box-shadow:0 4px 12px rgba(181,30,75,.35); cursor:pointer; transition:transform .12s ease; }
.s02f-slider::-webkit-slider-thumb:active{ transform:scale(1.12); }
.s02f-slider::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:#fff; border:2px solid var(--crimson);
  box-shadow:0 4px 12px rgba(181,30,75,.35); cursor:pointer; }
.s02f-slider::-moz-range-track{ height:6px; border-radius:6px; background:rgba(46,12,22,.14); }
.s02f-slider:focus-visible{ box-shadow:0 0 0 3px rgba(181,30,75,.25); }
.s02f-cval{ font-size:14px; color:#5b5158; white-space:nowrap; }
.s02f-cval b{ font-family:var(--serif); font-weight:700; color:var(--maroon); font-size:16px; }
.s02f-cres{ font-family:var(--serif); font-weight:400; font-size:clamp(22px,2.4vw,28px); color:var(--maroon); margin-top:16px; }
.s02f-cres b{ font-weight:900; color:var(--crimson); }
.s02f-cres span{ font-weight:400; font-size:.62em; color:#8a7f86; }
.s02f-cfoot{ font-size:12.5px; color:#8a7f86; margin-top:12px; line-height:1.5; }

@media (max-width:900px){
  .s02f-hl{ max-width:none; }
  .s02f-sub{ max-width:none; }
  .s02f-scene{ grid-template-columns:1fr; gap:28px; }
  .s02f-clockwrap{ gap:22px; }
  .s02f-clock{ width:88px; height:88px; }
  .s02f-hour{ height:22px; } .s02f-minute{ height:32px; }
  .s02f-turn{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:520px){
  .s02f-inner{ padding-top:34px; }
  .s02f-time{ font-size:clamp(34px,12vw,46px); }
  .s02f-calc{ padding:24px 22px; }
}

/* prefers-reduced-motion: Uhr statisch, Notifications einfaches Fade, Kick aus */
@media (prefers-reduced-motion:reduce){
  .s02f-cue{ animation:none; }
  .s02f-hl.kick .s02f-frisst{ font-weight:300; letter-spacing:0; color:inherit; }
  .s02f-note{ transform:none; transition:opacity .4s ease; }
  .s02f-note.in{ transform:none; }
  .s02f.s02f-healed .s02f-note{ transform:none; opacity:0; }
}

/* ===== Sektion 03 · Leistungen — gepinntes Scrollytelling „Sechs Stationen" =====
   Präfix .s03s-. Alle Zustände sind reine Funktionen des Scroll-Fortschritts — keine Timer.
   Der Bühnen-Pin braucht overflow-x:clip (nicht hidden) auf .s-site. */
.s03s{ position:relative; background:linear-gradient(178deg,#fdf6f0,#fbf7f1 42%,#f6ece4); }
.s03s .g{ font-family:var(--serif); }

.s03s-intro{ max-width:840px; margin:0 auto; padding:96px 64px 34px; text-align:center; }
.s03s-kick{ font-size:13px; letter-spacing:4px; text-transform:uppercase; color:var(--crimson); font-weight:600; }
.s03s-hl{ font-family:var(--serif); font-weight:400; font-size:clamp(30px,5vw,50px); line-height:1.04; color:var(--maroon); margin:14px 0; letter-spacing:-.5px; }
.s03s-hl .thin{ font-weight:300; }
.s03s-hl b{ font-weight:900; color:var(--crimson); }
.s03s-sub{ font-size:18px; line-height:1.55; color:#5b5158; max-width:62ch; margin:0 auto; }

/* Bühne: pinnt über die volle Strecke */
.s03s-strip{ position:relative; height:760vh; }
.s03s-stage{ position:sticky; top:0; height:100svh; min-height:600px; display:grid;
  grid-template-columns:64px minmax(0,1fr) auto; gap:34px; align-items:center;
  max-width:1300px; margin:0 auto; padding:24px 64px; }

/* Route: Stations-Ziffern */
.s03s-rail{ display:flex; flex-direction:column; align-items:center; justify-self:center; height:min(70vh,540px); }
.s03s-rn{ font-family:var(--serif); font-weight:900; font-size:20px; color:#d9c8ae; line-height:1;
  transition:font-size .4s ease, color .4s ease; }
.s03s-rn.on{ font-size:38px; color:var(--crimson); }
.s03s-rline{ flex:1; width:2.5px; background:#eadfce; border-radius:2px; margin:10px 0; position:relative; overflow:hidden; }
.s03s-rfill{ position:absolute; left:0; top:0; width:100%; height:0%; background:linear-gradient(180deg,#b98a3e,var(--crimson)); }

/* Text-Spalte */
.s03s-copy{ position:relative; display:grid; align-items:center; min-height:min(66vh,520px); }
.s03s-vc{ grid-area:1/1; display:flex; flex-direction:column; justify-content:center;
  opacity:0; transform:translateY(26px); transition:opacity .45s ease, transform .45s ease; pointer-events:none; }
.s03s-vc.on{ opacity:1; transform:none; pointer-events:auto; }
.s03s-cnt{ font-family:var(--serif); font-weight:900; font-size:19px; color:var(--crimson); margin-bottom:8px; }
.s03s-cnt span{ color:var(--greige); font-weight:400; }
.s03s-vkick{ font-size:12.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--crimson); margin:0 0 12px; }
.s03s-vh{ font-family:var(--serif); font-weight:400; font-size:clamp(30px,3.6vw,46px); line-height:1.1; margin:0 0 18px; color:var(--ink); letter-spacing:-.4px; }
.s03s-vh .l1{ display:block; }
.s03s-vh .l2{ display:block; font-weight:900; }
.s03s-bul{ list-style:none; margin:0; padding:0; max-width:46ch; }
.s03s-bul li{ display:flex; gap:12px; align-items:flex-start; font-size:16px; line-height:1.55; color:#4a4139; padding:9px 0; }
.s03s-bul s{ flex:0 0 22px; height:22px; margin-top:2px; border-radius:50%; border:1.5px solid #d9c8ae;
  position:relative; text-decoration:none; transition:background .3s ease, border-color .3s ease; }
.s03s-bul s::after{ content:'✓'; position:absolute; inset:0; display:grid; place-items:center;
  font-size:11px; font-weight:700; color:#fff; opacity:0; transition:opacity .3s ease; }
.s03s-bul li.ok s{ background:var(--crimson); border-color:var(--crimson); }
.s03s-bul li.ok s::after{ opacity:1; }
.s03s-fakt{ display:inline-flex; align-self:flex-start; margin-top:16px; border:1.5px solid rgba(181,30,75,.35);
  border-radius:99px; padding:9px 18px; background:rgba(255,255,255,.5); }
.s03s-fakt b{ font-size:13px; font-weight:600; color:var(--crimson); }
.s03s-nxt{ display:flex; align-items:center; gap:6px; margin-top:22px; font-size:12.5px; color:#8a7f74; letter-spacing:.04em; }
.s03s-nxt b{ font-weight:600; color:#6f6257; }
.s03s-nxt i{ font-style:normal; color:var(--crimson); }

/* iPhone — abgenommen, nicht verändern */
.s03s-phonecol{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.s03s-iph{ position:relative; height:min(72vh,560px); aspect-ratio:433/882; border-radius:58px; background:#0d0507; padding:9px;
  box-shadow:0 30px 70px rgba(18,6,8,.36), inset 0 0 0 1.5px #3a2c33, inset 0 0 0 4px #060203; }
.s03s-btnl{ position:absolute; left:-2.5px; top:23%; width:3px; height:8.5%; background:#060203; border-radius:2px; box-shadow:0 68px 0 #060203; }
.s03s-btnr{ position:absolute; right:-2.5px; top:26%; width:3px; height:13%; background:#060203; border-radius:2px; }
.s03s-scr{ position:relative; width:100%; height:100%; border-radius:49px; background:#fdf9f3;
  overflow:hidden; container-type:size; }
.s03s-istat{ position:relative; height:8.118cqh; z-index:5; }
.s03s-isl{ position:absolute; left:50%; top:2.214cqh; transform:translateX(-50%); width:32%; height:4.428cqh; border-radius:18.266cqh; background:#0d0507; }
.s03s-istat em{ position:absolute; left:4.428cqh; top:2.768cqh; font-size:2.306cqh; font-weight:600; font-style:normal; color:var(--ink); letter-spacing:.02em; }
.s03s-istat b{ position:absolute; right:3.321cqh; top:2.399cqh; width:12.177cqh; height:2.583cqh; }
.s03s-istat b svg{ width:100%; height:100%; display:block; }
.s03s-plabel{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#a89a8c; }

/* Screens */
.s03s-fades{ position:absolute; inset:8.118cqh 0 0; }
.s03s-pane{ position:absolute; inset:0; display:flex; flex-direction:column; padding-bottom:4.059cqh;
  opacity:0; transition:opacity .35s ease; pointer-events:none; }
.s03s-pane.on{ opacity:1; }
.s03s-pk{ font-size:2.122cqh; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#a8843c; margin:1.107cqh 3.69cqh 2.583cqh; }
.s03s-pf{ margin:auto 3.69cqh 0; padding-top:2.583cqh; font-size:2.214cqh; font-weight:500; color:var(--crimson); }
.s03s-pli{ display:flex; gap:1.661cqh; align-items:center; font-size:2.399cqh; color:#4a4139; padding:2.03cqh 0;
  border-bottom:0.185cqh solid #eee3d2; margin:0 3.69cqh; }
.s03s-pli i{ font-style:normal; width:3.506cqh; height:3.506cqh; border-radius:50%; display:grid; place-items:center;
  font-size:2.03cqh; background:#f4e8d4; color:#a8843c; flex:0 0 3.506cqh; transition:background .3s ease, color .3s ease; }
.s03s-pli.on i{ background:#1d9e75; color:#fff; }

/* 01 · Formate + Wochenstreifen */
.s03s-fmt{ display:grid; grid-template-columns:1fr 1fr; gap:1.476cqh; margin:0 3.69cqh 2.583cqh; }
.s03s-fmt span{ position:relative; border-radius:2.583cqh; aspect-ratio:1/1.6; padding:2.03cqh; display:flex; align-items:flex-end;
  background-size:cover; background-position:center; overflow:hidden; }
.s03s-fmt span::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(18,6,8,0) 30%,rgba(18,6,8,.72) 100%); }
.s03s-fmt b{ position:relative; z-index:1; font-size:2.306cqh; line-height:1.3; font-weight:600; color:#fff; }
.s03s-fmt i{ position:absolute; right:1.476cqh; top:1.476cqh; z-index:2; font-size:1.753cqh; font-weight:600; font-style:normal; color:var(--maroon);
  background:#f3d9a4; border-radius:18.266cqh; padding:0.646cqh 1.476cqh; opacity:0; transform:scale(.6);
  transition:opacity .3s cubic-bezier(.3,1.4,.4,1), transform .3s cubic-bezier(.3,1.4,.4,1); }
.s03s-fmt span.sel i{ opacity:1; transform:none; }
.s03s-wcap{ font-size:1.845cqh; letter-spacing:.14em; text-transform:uppercase; color:#a89a8c; margin:0 3.69cqh 1.292cqh; }
.s03s-week{ display:grid; grid-template-columns:repeat(7,1fr); gap:0.738cqh; margin:0 3.69cqh; }
.s03s-week b{ font-size:1.845cqh; font-weight:600; color:#a89a8c; text-align:center; padding:1.292cqh 0; border-radius:1.476cqh;
  background:#f4ece0; transition:background .3s ease, color .3s ease; }
.s03s-week b.on{ background:var(--crimson); color:#fff; }

/* 02 · Content Day */
.s03s-cdhero{ position:relative; margin:0 3.69cqh 1.476cqh; border-radius:2.583cqh; aspect-ratio:1/1; background-size:cover;
  background-position:center 28%; overflow:hidden; display:flex; align-items:flex-end; padding:2.214cqh; }
.s03s-cdhero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(18,6,8,0) 35%,rgba(18,6,8,.7) 100%); }
.s03s-cdhero b{ position:relative; z-index:1; font-size:2.399cqh; font-weight:600; color:#fff; }

/* 03 · Instagram */
.s03s-prof{ display:flex; align-items:center; gap:1.845cqh; margin:0 3.69cqh 2.214cqh; }
.s03s-pav{ width:7.011cqh; height:7.011cqh; border-radius:50%; background-size:cover; background-position:center;
  box-shadow:0 0 0 0.369cqh #fdf9f3, 0 0 0 0.646cqh var(--crimson); flex:0 0 7.011cqh; }
.s03s-pnm b{ display:block; font-size:2.306cqh; font-weight:600; color:var(--ink); }
.s03s-pnm em{ display:block; font-size:2.03cqh; font-style:normal; color:#a89a8c; }
.s03s-ig{ display:grid; grid-template-columns:repeat(3,1fr); gap:0.923cqh; margin:0 3.69cqh 1.476cqh; }
.s03s-ig span{ position:relative; aspect-ratio:1/1.3; border-radius:1.476cqh; background-size:cover; background-position:center; overflow:hidden; }
.s03s-ig span::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(18,6,8,0) 55%,rgba(18,6,8,.45) 100%); }
.s03s-ig u{ position:absolute; left:1.107cqh; bottom:0.923cqh; z-index:2; font-size:1.753cqh; font-weight:600; text-decoration:none;
  color:#fff; text-shadow:0 0.185cqh 0.369cqh rgba(0,0,0,.6); }
.s03s-ig .lv em{ position:absolute; left:0.923cqh; top:0.923cqh; z-index:2; font-size:1.476cqh; font-weight:700; font-style:normal;
  letter-spacing:.08em; color:#fff; background:var(--crimson); border-radius:0.738cqh; padding:0.461cqh 0.923cqh; }
.s03s-strip.lvon .s03s-ig .lv{ animation:s03sLv 1.6s ease infinite; border-radius:1.476cqh; }
@keyframes s03sLv{ 0%,100%{ box-shadow:0 0 0 0 rgba(181,30,75,.35); } 50%{ box-shadow:0 0 0 0.923cqh rgba(181,30,75,0); } }

/* 04 · Website + Buchung */
.s03s-web{ margin:0 3.69cqh 2.214cqh; border-radius:2.583cqh; overflow:hidden; border:0.185cqh solid #eee3d2; background:#fff; }
.s03s-webbar{ display:flex; align-items:center; gap:0.738cqh; padding:1.292cqh 1.845cqh; background:#f4ece0; }
.s03s-webbar s{ width:1.107cqh; height:1.107cqh; border-radius:50%; background:#d9c8ae; text-decoration:none; }
.s03s-webbar em{ margin-left:1.476cqh; font-size:1.753cqh; font-style:normal; color:#a89a8c; letter-spacing:.04em; }
.s03s-webhero{ position:relative; aspect-ratio:16/13; background-size:cover; background-position:center 25%;
  display:flex; align-items:center; justify-content:center; }
.s03s-webhero::after{ content:''; position:absolute; inset:0; background:rgba(18,6,8,.32); }
.s03s-webhero b{ position:relative; z-index:1; font-size:2.768cqh; font-weight:900; line-height:1.15; letter-spacing:.14em;
  color:#fff; text-align:center; }
.s03s-webhero u{ text-decoration:none; font-weight:300; }
.s03s-webtx{ padding:1.845cqh 2.214cqh 2.214cqh; }
.s03s-webtx i{ display:block; height:1.107cqh; border-radius:0.554cqh; background:#f0e6d8; margin-bottom:1.107cqh; }
.s03s-webtx i.sh{ width:62%; margin-bottom:0; }
.s03s-bk{ margin:0 3.69cqh; border:0.185cqh solid #eee3d2; border-radius:2.583cqh; padding:2.214cqh; background:#fff; }
.s03s-bkrow{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:1.845cqh; }
.s03s-bkrow b{ font-size:2.306cqh; font-weight:600; color:var(--ink); }
.s03s-bkrow span{ font-size:2.122cqh; color:#a89a8c; }
.s03s-bkbtn{ position:relative; height:6.273cqh; border-radius:18.266cqh; background:var(--crimson); overflow:hidden; }
.s03s-bkbtn i, .s03s-bkbtn em{ position:absolute; inset:0; display:grid; place-items:center; font-style:normal;
  font-size:2.214cqh; font-weight:600; color:#fff; transition:opacity .3s ease, transform .3s ease; }
.s03s-bkbtn em{ opacity:0; transform:translateY(1.476cqh); }
.s03s-bkbtn.done{ background:#1d9e75; }
.s03s-bkbtn.done i{ opacity:0; transform:translateY(-1.476cqh); }
.s03s-bkbtn.done em{ opacity:1; transform:none; }

/* 05 · Studio OS */
.s03s-agenda{ margin:0 3.69cqh 2.214cqh; }
.s03s-ag{ display:flex; align-items:center; gap:1.845cqh; padding:2.583cqh 1.845cqh; border-radius:2.03cqh; background:#f7efe4; margin-bottom:1.476cqh; }
.s03s-ag b{ font-size:2.122cqh; font-weight:700; color:var(--crimson); flex:0 0 auto; transition:opacity .3s ease; }
.s03s-ag span{ font-size:2.214cqh; color:#4a4139; }
.s03s-ag em{ margin-left:auto; font-size:2.122cqh; font-weight:700; font-style:normal; color:#1d9e75;
  opacity:0; transform:translateX(1.107cqh); transition:opacity .35s ease, transform .35s ease; }
.s03s-ag.moved{ background:#e9f6f0; }
.s03s-ag.moved b{ opacity:.35; text-decoration:line-through; }
.s03s-ag.moved em{ opacity:1; transform:none; }
.s03s-say{ margin:0 3.69cqh; border:0.277cqh solid rgba(181,30,75,.28); border-radius:2.583cqh; padding:1.845cqh 2.214cqh; background:#fff; }
.s03s-saylbl{ font-size:1.753cqh; letter-spacing:.14em; text-transform:uppercase; color:var(--crimson); font-weight:600; margin-bottom:0.923cqh; }
.s03s-sayin{ display:flex; align-items:center; min-height:10.701cqh; font-size:2.214cqh; color:var(--ink); line-height:1.35; }
.s03s-cur{ display:inline-block; width:0.277cqh; height:2.399cqh; background:var(--crimson); margin-left:0.369cqh; flex:0 0 0.277cqh; animation:s03sCur 1s steps(2) infinite; }
@keyframes s03sCur{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }
.s03s-saydone{ display:flex; align-items:center; gap:1.476cqh; margin:1.845cqh 3.69cqh 0; font-size:2.122cqh; color:#1d7f60;
  opacity:0; transform:translateY(1.107cqh); transition:opacity .4s ease, transform .4s ease; }
.s03s-saydone.on{ opacity:1; transform:none; }
.s03s-saydone i{ font-style:normal; width:3.137cqh; height:3.137cqh; flex:0 0 3.137cqh; border-radius:50%; background:#1d9e75;
  color:#fff; display:grid; place-items:center; font-size:1.845cqh; }

/* 06 · Monatsblick */
.s03s-note{ display:flex; align-items:flex-end; justify-content:space-between; margin:0 3.69cqh 2.214cqh;
  padding:4.059cqh 2.952cqh; border-radius:2.583cqh; background:#f7efe4; }
.s03s-nl{ font-size:1.845cqh; letter-spacing:.14em; text-transform:uppercase; color:#a89a8c; margin-bottom:0.369cqh; }
.s03s-nn{ font-family:var(--serif); font-weight:900; font-size:8.487cqh; line-height:1; color:var(--crimson); }
.s03s-ntr{ font-size:1.845cqh; letter-spacing:.1em; text-transform:uppercase; color:#a89a8c; text-align:right; }
.s03s-ntr b{ display:block; font-size:2.122cqh; letter-spacing:0; text-transform:none; color:#1d7f60; margin-top:0.554cqh; }
.s03s-spark{ display:block; width:calc(100% - 7.38cqh); height:20.664cqh; margin:0 3.69cqh 1.476cqh; }
.s03s-sl{ stroke-dasharray:1; stroke-dashoffset:1; }
.s03s-scap{ font-size:1.845cqh; letter-spacing:.1em; text-transform:uppercase; color:#a89a8c; margin:0 3.69cqh 0.738cqh; }

/* Screen-Füllelemente */
.s03s-cdteam{ display:flex; align-items:center; gap:1.292cqh; margin:2.214cqh 3.69cqh 0; }
.s03s-cdteam span{ width:4.797cqh; height:4.797cqh; border-radius:50%; background-size:cover; background-position:center;
  box-shadow:0 0 0 0.369cqh #fdf9f3; flex:0 0 4.797cqh; }
.s03s-cdteam span:nth-child(2){ margin-left:-2.583cqh; }
.s03s-cdteam b{ margin-left:0.738cqh; font-size:2.122cqh; font-weight:600; color:#6f6257; }
.s03s-bkslots{ display:grid; grid-template-columns:repeat(4,1fr); gap:0.923cqh; margin-bottom:1.845cqh; }
.s03s-bkslots s{ text-decoration:none; text-align:center; font-size:1.937cqh; font-weight:600; color:#a89a8c;
  background:#f7efe4; border-radius:1.292cqh; padding:1.107cqh 0; }
.s03s-bkslots s.sel{ background:rgba(181,30,75,.12); color:var(--crimson); box-shadow:inset 0 0 0 0.185cqh rgba(181,30,75,.3); }
.s03s-saytips{ display:flex; gap:0.923cqh; margin-top:1.476cqh; }
.s03s-saytips s{ text-decoration:none; font-size:1.753cqh; font-weight:600; color:#a8843c; background:#f7efe4;
  border-radius:18.266cqh; padding:0.738cqh 1.661cqh; }

/* Outro */
.s03s-outro{ max-width:1240px; margin:0 auto; padding:72px 64px 96px; }
.s03s-ohead{ text-align:center; margin-bottom:34px; }
.s03s-oh{ font-family:var(--serif); font-weight:900; font-size:clamp(26px,3.4vw,40px); color:var(--maroon); margin:0 0 10px; letter-spacing:-.4px; }
.s03s-osub{ font-size:16px; color:#5b5158; margin:0; }
.s03s-ocards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.s03s-oc{ display:block; text-decoration:none; color:inherit; background:rgba(255,255,255,.72);
  border:1px solid rgba(46,12,22,.09); border-radius:20px; padding:26px 24px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
a.s03s-oc:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(20,6,10,.12); border-color:rgba(181,30,75,.28); }
.s03s-oct{ font-family:var(--serif); font-weight:900; font-size:19px; color:var(--maroon); margin:0 0 8px; }
.s03s-ocx{ font-size:14.5px; line-height:1.6; color:#5f554e; margin:0; }
.s03s-oclink{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:13px; font-weight:600; color:var(--crimson); }
.s03s-oclink i{ font-style:normal; }
.s03s-ofoot{ margin-top:26px; text-align:center; font-size:13px; color:#8a7f74; }

@media (max-width:1180px){
  .s03s-stage{ grid-template-columns:52px minmax(0,1fr) auto; gap:24px; padding:20px 34px; }
  .s03s-iph{ height:min(66vh,510px); }
}
@media (max-width:900px){
  .s03s-intro{ padding:64px 22px 22px; }
  .s03s-sub{ font-size:16px; }
  .s03s-strip{ height:600vh; }
  /* Oben Luft für den fixierten Nav-Pill, der sonst die Zählzeile überdeckt */
  .s03s-stage{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; gap:15px;
    padding:86px 22px 18px; justify-items:center; align-content:center; min-height:0; }
  .s03s-rail{ display:none; }
  .s03s-copy{ width:100%; max-width:540px; min-height:0; align-items:start; }
  .s03s-vc{ justify-content:flex-start; }
  .s03s-cnt{ font-size:15px; margin-bottom:5px; }
  .s03s-vkick{ font-size:10.5px; margin-bottom:8px; }
  .s03s-vh{ font-size:23px; margin-bottom:12px; }
  .s03s-bul li{ font-size:13px; padding:6px 0; gap:9px; }
  .s03s-bul s{ flex:0 0 18px; height:18px; }
  .s03s-bul s::after{ font-size:9px; }
  .s03s-fakt{ margin-top:11px; padding:6px 13px; }
  .s03s-fakt b{ font-size:11.5px; }
  .s03s-nxt{ display:none; }
  .s03s-iph{ height:min(45svh,400px); border-radius:42px; padding:7px; }
  .s03s-scr{ border-radius:35px; }
  .s03s-plabel{ font-size:9.5px; }
  .s03s-phonecol{ gap:7px; }
  .s03s-outro{ padding:56px 22px 72px; }
  .s03s-ocards{ grid-template-columns:1fr; gap:14px; }
  .s03s-oc{ padding:22px 20px; }
}
/* Kurze Handy-Displays (iPhone SE & Co.): Textblock und Handy zusammenrücken */
@media (max-width:900px) and (max-height:700px){
  .s03s-stage{ gap:10px; }
  .s03s-vh{ font-size:19px; margin-bottom:10px; }
  .s03s-bul li{ font-size:12px; padding:4px 0; }
  .s03s-fakt{ margin-top:9px; padding:5px 11px; }
  .s03s-fakt b{ font-size:10.5px; }
  .s03s-iph{ height:min(40svh,400px); }
}
@media (max-width:900px) and (max-height:600px){
  .s03s-fakt{ display:none; }
  .s03s-vh{ font-size:17px; }
  .s03s-iph{ height:min(37svh,400px); }
}

@media (prefers-reduced-motion:reduce){
  .s03s-vc, .s03s-pane, .s03s-rn, .s03s-bul s, .s03s-bul s::after, .s03s-fmt i,
  .s03s-week b, .s03s-pli i, .s03s-bkbtn i, .s03s-bkbtn em, .s03s-ag em, .s03s-saydone{ transition:none !important; }
  .s03s-strip.lvon .s03s-ig .lv, .s03s-cur{ animation:none !important; }
}

/* ===== Sektion 04 · Kontrast-Balken-Strip (KOMPAKT) ===== */
.s04k{ padding:72px 96px 78px; }
.s04k .g{ font-family:var(--serif); }
.s04k-head{ text-align:center; max-width:720px; margin:0 auto 40px; }
.s04k-kick{ font-size:13px; letter-spacing:4px; text-transform:uppercase; color:var(--crimson); font-weight:600; }
.s04k-hl{ font-family:var(--serif); font-size:clamp(30px,5vw,50px); line-height:1.04; color:var(--maroon); margin:14px 0 14px; letter-spacing:-.5px; }
.s04k-hl .thin{ font-weight:300; } .s04k-hl .thick{ font-weight:900; color:var(--crimson); }
.s04k-sub{ font-size:18px; line-height:1.55; color:#5b5158; }

/* ---------- Der Kontrast-Balken ---------- */
.s04k-bar{ display:flex; align-items:stretch; gap:14px; height:clamp(130px,17vw,150px);
  margin:0 auto; max-width:1180px; }
.s04k-seg{ position:relative; border-radius:22px; overflow:hidden; min-width:0; }

/* Segment 1 · Dein Part — bewusst schmal, Crimson */
.s04k-seg1{ flex:0 0 13%; display:flex; align-items:center; justify-content:center; text-align:center;
  background:linear-gradient(155deg,#d4295a 0%,var(--crimson) 46%,#8f1338 100%);
  box-shadow:0 16px 34px rgba(181,30,75,.34), inset 0 1px 0 rgba(255,255,255,.24);
  transform:scaleX(.14); transform-origin:left center; opacity:0;
  transition:transform .7s cubic-bezier(.22,1,.36,1), opacity .4s ease; }
.s04k-seg1::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.28),transparent 46%); }
.s04k-seg1-in{ position:relative; z-index:1; padding:10px 6px; }
.s04k-mins{ font-weight:900; font-size:clamp(20px,2.1vw,27px); color:#fff; line-height:1; letter-spacing:-.5px;
  text-shadow:0 2px 10px rgba(46,12,22,.3); white-space:nowrap; }
.s04k-mins-l{ margin-top:8px; font-size:9px; letter-spacing:1.4px; text-transform:uppercase; font-weight:700;
  color:rgba(255,255,255,.9); line-height:1.35; }

/* Segment 2 · Unser Part — dominant, Liquid-Glass */
.s04k-seg2{ flex:1 1 auto; display:flex; align-items:center;
  background:rgba(255,255,255,.5); transform:scaleX(.9); transform-origin:left center; opacity:0;
  transition:transform .75s cubic-bezier(.22,1,.36,1) .18s, opacity .5s ease .18s; }
.s04k-seg2-in{ padding:0 clamp(20px,3vw,42px); width:100%; }
.s04k-seg2-t{ font-weight:900; font-size:clamp(22px,2.6vw,34px); color:var(--maroon); line-height:1.05; letter-spacing:-.4px; }
.s04k-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.s04k-chip{ font-size:12px; font-weight:600; letter-spacing:.2px; color:var(--crimson);
  background:rgba(181,30,75,.09); border:1px solid rgba(181,30,75,.16); padding:6px 13px; border-radius:20px;
  opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1); }

/* Segment 3 · Dein Ergebnis — warmer Gold-Ton, Kurve */
.s04k-seg3{ flex:0 0 15%; display:flex; align-items:flex-end; justify-content:center;
  background:linear-gradient(160deg,#fdf3e0,#f6e4c2 60%,#efd3a3);
  border:1px solid rgba(232,192,140,.55);
  box-shadow:0 16px 34px rgba(197,150,74,.22), inset 0 1px 0 rgba(255,255,255,.7);
  transform:scaleX(.9); transform-origin:right center; opacity:0;
  transition:transform .7s cubic-bezier(.22,1,.36,1) .1s, opacity .5s ease .1s; }
.s04k-seg3-in{ position:relative; width:100%; height:100%; }
.s04k-curve{ position:absolute; inset:14px 12px 30px; width:calc(100% - 24px); height:auto; overflow:visible; }
.s04k-curve-p{ stroke-dasharray:140; stroke-dashoffset:140; transition:stroke-dashoffset 1s ease .55s; }
.s04k-grow{ position:absolute; left:0; right:0; bottom:12px; text-align:center; font-weight:900;
  font-size:clamp(13px,1.3vw,16px); color:#8a5a12; letter-spacing:-.2px; }

/* --- Scroll-Einzug (getriggert per .go am Balken) --- */
.s04k-bar.go .s04k-seg1{ transform:scaleX(1); opacity:1; }
.s04k-bar.go .s04k-seg2{ transform:scaleX(1); opacity:1; }
.s04k-bar.go .s04k-seg3{ transform:scaleX(1); opacity:1; }
.s04k-bar.go .s04k-chip{ opacity:1; transform:translateY(0); }
.s04k-bar.go .s04k-chip:nth-child(1){ transition-delay:.6s; }
.s04k-bar.go .s04k-chip:nth-child(2){ transition-delay:.68s; }
.s04k-bar.go .s04k-chip:nth-child(3){ transition-delay:.76s; }
.s04k-bar.go .s04k-chip:nth-child(4){ transition-delay:.84s; }
.s04k-bar.go .s04k-chip:nth-child(5){ transition-delay:.92s; }
.s04k-bar.go .s04k-curve-p{ stroke-dashoffset:0; }

/* ---------- Die 3 Schritte als schmale Zeilen ---------- */
.s04k-rows{ max-width:1180px; margin:42px auto 0; display:flex; flex-direction:column; }
.s04k-row{ display:grid; grid-template-columns:230px 128px 1fr; align-items:center; gap:22px;
  padding:20px 4px; border-top:1px solid rgba(46,12,22,.1); }
.s04k-row:last-child{ border-bottom:1px solid rgba(46,12,22,.1); }
.s04k-row-t{ font-weight:700; font-size:clamp(19px,1.6vw,23px); color:var(--maroon); line-height:1.15; letter-spacing:-.3px; }
.s04k-badge{ justify-self:start; display:inline-block; font-size:11px; letter-spacing:1px; text-transform:uppercase;
  font-weight:700; padding:6px 14px; border-radius:20px; white-space:nowrap; }
.s04k-badge-crim{ color:var(--crimson); background:rgba(181,30,75,.1); }
.s04k-badge-glass{ color:var(--maroon); background:rgba(46,12,22,.07); border:1px solid rgba(46,12,22,.12); }
.s04k-badge-gold{ color:#8a5a12; background:rgba(232,192,140,.28); border:1px solid rgba(232,192,140,.6); }
.s04k-row-d{ font-size:15.5px; line-height:1.55; color:#6b6168; }

/* ---------- Brücke ---------- */
.s04k-foot{ text-align:center; max-width:640px; margin:44px auto 0; font-size:17px; color:#6b6168; line-height:1.55; }
.s04k-foot a{ text-decoration:none; }
.s04k-foot b{ font-family:var(--serif); color:var(--crimson); font-weight:900; }
.s04k-foot-arw{ color:#b7a9b0; }

@media (prefers-reduced-motion:reduce){
  .s04k-seg1,.s04k-seg2,.s04k-seg3{ transform:none; opacity:1; transition:none; }
  .s04k-chip{ opacity:1; transform:none; transition:none; }
  .s04k-curve-p{ stroke-dashoffset:0; transition:none; }
}

/* ---------- Mobile: Balken vertikal gestapelt (gleiche Asymmetrie in der Höhe) ---------- */
@media (max-width:768px){
  .s04k{ padding:56px 20px 62px; }
  .s04k-head{ margin-bottom:30px; }
  .s04k-bar{ flex-direction:column; height:auto; gap:12px; max-width:440px; }
  .s04k-seg{ transform-origin:top center !important; }
  .s04k-seg1{ flex:0 0 auto; height:88px; }
  .s04k-seg2{ flex:0 0 auto; min-height:172px; }
  .s04k-seg2-in{ padding:20px 22px; }
  .s04k-seg3{ flex:0 0 auto; height:110px; align-items:stretch; }
  .s04k-curve{ inset:14px 16px 32px; }
  /* vertikaler Einzug: Höhe/Fade statt scaleX */
  .s04k-seg1,.s04k-seg2,.s04k-seg3{ transform:translateY(14px); }
  .s04k-bar.go .s04k-seg1,.s04k-bar.go .s04k-seg2,.s04k-bar.go .s04k-seg3{ transform:translateY(0); }
  @media (prefers-reduced-motion:reduce){
    .s04k-seg1,.s04k-seg2,.s04k-seg3{ transform:none; }
  }
  .s04k-rows{ margin-top:30px; max-width:440px; }
  .s04k-row{ grid-template-columns:1fr; gap:8px; padding:18px 2px; }
  .s04k-badge{ margin-top:2px; }
  .s04k-foot{ margin-top:34px; }
}

/* ===== Sektion 05 · Studio OS / Das System erwacht (Sticky-Runway) ===== */
/* Bühnen-BG = warmes Maroon (Tag). Der Nacht-Prolog wird per .s05-night daruebergelegt
   und scroll-gekoppelt ausgeblendet (Nacht 22:41 -> heller Maroon + Gold-Glow 9:41). */
.s05{ position:relative; background:radial-gradient(130% 100% at 50% -6%,#4a1226,#2a0b15 62%,#1c0710); }
.s05-runway{ position:relative; height:240vh; }
.s05-sticky{ position:sticky; top:0; height:100svh; min-height:600px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; padding:40px 72px 20px; }
/* Nacht-Overlay: dunkler, kuehler; wird per JS opacity 1->0 gescrubbt.
   Der Gold-Glow (Tag) liegt in der Basis-Section darunter und scheint durch, wenn Nacht faded. */
.s05-night{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 8%,#3a0f1e 0%,#1c0710 46%,#140509 100%); }
.s05 .s-wrap{ position:relative; z-index:2; width:100%; }
/* Warmer Tag-Glow, der beim Faden der Nacht hervortritt */
.s05-sticky::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(70% 55% at 50% 4%,rgba(232,192,140,.20),transparent 60%);
  opacity:0; transition:none; }
.s05.s05-day .s05-sticky::after{ opacity:1; }

/* Zeit-Label oben rechts (Crossfade 22:41 -> 9:41) */
.s05-clock{ position:absolute; top:78px; right:34px; z-index:8; width:84px; height:24px; pointer-events:none; }
.s05-clk{ position:absolute; top:0; right:0; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:2px;
  color:rgba(255,255,255,.62); opacity:0; transition:opacity .4s ease; white-space:nowrap; }
.s05-clk::before{ content:""; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.5); }
.s05-clk.is-on{ opacity:1; }
.s05-clk-day{ color:rgba(232,192,140,.95); }
.s05-clk-day::before{ background:var(--gold); box-shadow:0 0 8px rgba(232,192,140,.7); }

.s05-head{ text-align:center; max-width:720px; margin:0 auto 16px; }
.s05-kick{ font-size:12px; letter-spacing:4px; text-transform:uppercase; color:var(--greige); font-weight:600; }
.s05-hl{ font-size:clamp(28px,5.4vw,46px); line-height:1.03; color:var(--cream); margin:10px 0 10px; letter-spacing:-.5px; }
.s05-hl .thin{ opacity:0; transition:opacity .5s ease; }
.s05-hl .thick{ color:#ef8aa6; opacity:0; transition:opacity .5s ease; }
.s05-hl-beat{ display:block; font-size:.46em; font-weight:500; color:var(--greige); letter-spacing:1px;
  margin-top:6px; opacity:0; transform:translateY(6px); transition:opacity .5s ease,transform .5s ease; }
.s05-hl.act1 .thin{ opacity:1; }
.s05-hl.act2 .thick{ opacity:1; }
.s05-hl.act3 .s05-hl-beat{ opacity:1; transform:none; }
.s05-sub{ font-size:15px; line-height:1.5; color:#d9c3cc; max-width:620px; margin:0 auto;
  opacity:0; transition:opacity .5s ease; }
.s05-hl.act1 ~ .s05-sub{ opacity:.9; }

.s05-stage{ position:relative; max-width:1080px; margin:0 auto; width:100%; }

/* ---- Die 6 Chips: verstreut/rotiert, fliegen scroll-gekoppelt in die Tabs (JS-FLIP) ---- */
.s05-chips{ position:absolute; inset:0; z-index:6; pointer-events:none; }
.s05-chip{ position:absolute; left:0; top:0; will-change:transform,opacity;
  font-family:var(--sans); font-size:11.5px; line-height:1.32; font-weight:500;
  padding:11px 14px; border-radius:12px; color:#3a2a30; text-align:left; white-space:nowrap;
  box-shadow:0 16px 34px rgba(0,0,0,.34); }
.s05-chip .t{ display:block; font-size:9px; letter-spacing:1.5px; text-transform:uppercase; opacity:.6; margin-bottom:3px; }
.s05-chip b{ font-weight:800; }
.s05-chip-postit{ background:#f6e58a; color:#5c4a12; border-radius:4px; box-shadow:0 14px 30px rgba(80,60,0,.32); transform:rotate(-6deg); }
.s05-chip-postit .pin{ position:absolute; top:-6px; left:50%; margin-left:-5px; width:10px; height:10px; border-radius:50%; background:#c4275a; box-shadow:0 2px 4px rgba(0,0,0,.3); }
.s05-chip-wa{ background:#dcf8c6; color:#123b1a; border-radius:12px 12px 12px 3px; }
.s05-chip-wa .t{ color:#4a7c59; opacity:.9; }
.s05-chip-dm{ background:#fbe4ec; color:#7a1f3d; }
.s05-chip-dm .t{ color:#c4275a; opacity:.85; }
.s05-chip-bon{ background:#ffffff; color:#3a3a3a; border-top:2px dashed #d8d0c6; border-bottom:2px dashed #d8d0c6; border-radius:3px; }
.s05-chip-bon .t{ color:#9a8f80; }
.s05-chip-xls{ background:#eef7f0; color:#1f5c37; border:1px solid #cfe6d6; border-radius:6px; }
.s05-chip-xls .x{ display:inline-block; background:#217346; color:#fff; font-size:8px; font-weight:800; letter-spacing:1px; padding:2px 5px; border-radius:3px; margin-bottom:4px; }
.s05-chip-note{ background:#fff7e6; color:#6b5320; border-radius:4px; transform:rotate(4deg); box-shadow:0 14px 28px rgba(80,60,0,.24); }
.s05-chip-note .t{ color:#b08a3a; }
.s05-win{ background:var(--cream); border-radius:20px; overflow:hidden; box-shadow:0 50px 120px rgba(0,0,0,.45); display:grid; grid-template-columns:248px 1fr; }
.s05-toolbar{ grid-column:1 / -1; display:flex; align-items:center; gap:10px; padding:12px 20px; background:#f1e8e0; border-bottom:1px solid #e7dccf; }
.s05-dots{ display:flex; gap:8px; }
.s05-dots i{ width:11px; height:11px; border-radius:50%; }
.s05-dots i:nth-child(1){ background:#e36b6b; } .s05-dots i:nth-child(2){ background:#e9b84e; } .s05-dots i:nth-child(3){ background:#5cb86a; }
.s05-tlabel{ margin-left:12px; font-size:11px; letter-spacing:2px; color:#9a8f80; text-transform:uppercase; }
.s05-tright{ margin-left:auto; font-weight:700; font-size:12px; letter-spacing:2px; color:var(--maroon); }

.s05-rail{ background:#f6efe8; padding:14px 13px; border-right:1px solid #ece2d6; }
.s05-railgrp{ font-size:9.5px; letter-spacing:2px; color:#b3a89c; text-transform:uppercase; margin:11px 12px 6px; }
.s05-railgrp:first-child{ margin-top:0; }
.s05-tab{ display:flex; align-items:center; gap:11px; width:100%; padding:9px 13px; border:none; background:none; border-radius:10px; font-family:var(--sans); font-size:13.5px; color:#5b5158; text-align:left; margin-bottom:2px; cursor:pointer; transition:background .15s,color .15s; }
.s05-tab .ic{ width:16px; height:16px; border-radius:5px; background:#e0d4c7; flex:none; }
.s05-tab:hover{ background:#efe4d8; }
.s05-tab.on{ background:var(--maroon); color:var(--cream); font-weight:500; }
.s05-tab.on .ic{ background:var(--crimson); }

/* ---- Schlaf-Zustand: Rail-Tabs als gedimmte Umrisse, bis ein Chip andockt ---- */
.s05-tab{ position:relative; }
.s05 .s05-win.sleeping .s05-tab{ opacity:.35; color:#8a7f76; }
.s05 .s05-win.sleeping .s05-tab .ic{ background:none; border:1px solid #cbbfae; }
.s05 .s05-win.sleeping .s05-tab.on{ background:none; color:#8a7f76; font-weight:400; }
.s05 .s05-win.sleeping .s05-tab.on .ic{ background:none; border:1px solid #cbbfae; }
.s05-win{ box-shadow:0 40px 100px rgba(0,0,0,.30); transition:box-shadow .6s ease,transform .5s ease; }
.s05 .s05-win.sleeping{ box-shadow:0 24px 60px rgba(0,0,0,.30); }
.s05-tab{ transition:opacity .45s ease,color .3s ease,background .15s; }
.s05-tab .ic{ transition:background .3s ease,border-color .3s ease; }
/* Ein Tab „erwacht": cream-Schrift, rosé Border/Glow */
.s05-tab.awake{ opacity:1; color:var(--maroon); }
.s05-tab.awake .ic{ background:var(--crimson); border:none; }
.s05-tab.awake:not(.on){ box-shadow:inset 0 0 0 1px rgba(239,138,166,.7); }
.s05-tab.awake.on{ background:var(--maroon); color:var(--cream); box-shadow:0 0 0 1px rgba(239,138,166,.55),0 6px 18px rgba(239,138,166,.25); }
@keyframes s05wake{ 0%{ transform:scale(1); } 40%{ transform:scale(1.035); } 100%{ transform:scale(1); } }
.s05-tab.just-woke{ animation:s05wake .5s ease; }

/* Zaehler-Badge (crimson) am Tab / an Pille */
.s05-badge{ display:inline-flex; align-items:center; justify-content:center; margin-left:auto;
  min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--crimson); color:#fff;
  font-size:10.5px; font-weight:700; line-height:1; transform:scale(0); transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.s05-badge.show{ transform:scale(1); }
@keyframes s05badgepop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.4); } 100%{ transform:scale(1); } }
.s05-badge.bump{ animation:s05badgepop .32s ease; }

.s05-main{ position:relative; padding:26px 36px; min-height:372px; }

/* Solange das Fenster schlaeft: echte Screens ausblenden -> nur Schlaf-Label + Ergebnis-Zeilen.
   Ab .live uebernehmen die echten Screens; Schlaf/Ergebnisse verschwinden. */
.s05 .s05-win.sleeping .os-screen{ opacity:0; pointer-events:none; }
.s05-sleep{ position:absolute; left:36px; right:36px; top:34px; z-index:5; display:flex; flex-direction:column;
  align-items:center; gap:16px; padding-top:44px; pointer-events:none; opacity:0; transition:opacity .45s ease; }
.s05 .s05-win.sleeping .s05-sleep{ opacity:1; }
.s05 .s05-win.has-results .s05-sleep{ opacity:0; }
.s05-sleep-ring{ width:32px; height:32px; border-radius:50%; border:2px solid #e3d6c8;
  border-top-color:#c9985f; animation:s05spin 1.6s linear infinite; }
@keyframes s05spin{ to{ transform:rotate(360deg); } }
.s05-sleep-lab{ font-size:13px; letter-spacing:1px; color:#a99a8c; }
.s05 .s05-win.live .s05-sleep{ opacity:0; visibility:hidden; }

/* Ergebnis-Zeilen: gestapelt + vertikal zentriert in der Buehne, sichtbar solange geschlafen wird */
.s05-results{ position:absolute; left:36px; right:36px; top:0; bottom:0; z-index:5;
  display:flex; flex-direction:column; justify-content:center; gap:9px; pointer-events:none; }
.s05-res{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:12px;
  background:linear-gradient(150deg,#fbeef2,#f7e6ec); border:1px solid #f0d9e0;
  opacity:0; transform:translateY(10px); transition:opacity .45s ease,transform .45s ease; box-shadow:0 6px 16px rgba(46,12,22,.05); }
.s05-res.in{ opacity:1; transform:none; }
.s05-res .dot{ width:9px; height:9px; border-radius:50%; background:#e8c9d3; flex:none; }
.s05-res .rt{ font-size:13.5px; font-weight:700; color:var(--maroon); }
.s05-res .rd{ font-size:12px; color:#8a6f78; margin-left:auto; text-align:right; }
.s05-res-sal{ background:linear-gradient(150deg,#f4d4de,#efc3d0); border-color:#e6a9bb; }
.s05-res-sal .dot{ background:var(--crimson); box-shadow:0 0 0 3px rgba(181,30,75,.16); }
.s05-res-sal .rt{ color:var(--crimson); }
.s05-res-leg{ display:flex; align-items:center; gap:7px; margin-top:6px; font-size:11px; color:#a98a94; opacity:0; transition:opacity .4s ease; }
.s05-res-leg.in{ opacity:1; }
.s05-res-leg .lg{ width:10px; height:10px; border-radius:2px; background:var(--crimson); flex:none; }
/* Wenn live: Ergebnis-Zeilen ausblenden, echte Screens uebernehmen (visibility -> kein Ghost) */
.s05 .s05-win.live .s05-results{ opacity:0; visibility:hidden; transition:opacity .4s ease,visibility 0s linear .4s; }

.s05 .os-screen{ display:none; }
.s05 .os-screen.on{ display:block; }
.s05-mlabel{ font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--crimson); font-weight:600; }
.s05-mh{ font-weight:700; font-size:32px; color:var(--maroon); margin:9px 0 6px; line-height:1.1; letter-spacing:-.3px; }
.s05-msub{ font-size:14.5px; color:#7a6f76; margin-bottom:24px; }

.s05-crow{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.s05-ccard{ background:#fff; border:1px solid #efe6dd; border-radius:14px; padding:18px; position:relative; }
.s05-ccard .t{ font-weight:900; font-size:15px; color:var(--crimson); }
.s05-ccard .ti{ font-size:14.5px; font-weight:600; margin:7px 0 4px; color:var(--ink); }
.s05-ccard .ds{ font-size:12.5px; color:#8a7f86; line-height:1.45; }
.s05-task .badge{ display:inline-block; margin-top:12px; font-size:10.5px; letter-spacing:1px; text-transform:uppercase; font-weight:600; padding:4px 11px; border-radius:18px; }
.s05-task .badge.ok{ background:#e6f3ea; color:#3f8f56; }
.s05-task .badge.wait{ background:#f3ece1; color:#a98a52; }
.s05-task .badge.due{ background:#f6e6ec; color:var(--crimson); }

.s05-cal{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.s05-caldon .d{ font-size:12px; font-weight:700; color:var(--maroon); text-align:center; margin-bottom:8px; letter-spacing:1px; }
.s05-caldon .slot{ border-radius:9px; padding:11px 8px; font-size:11.5px; font-weight:500; text-align:center; margin-bottom:7px; line-height:1.2; }
.s05-caldon .slot.busy{ background:linear-gradient(150deg,#c4275a,#9c1a3f); color:#fff; }
.s05-caldon .slot.free{ background:#f4ece3; color:#a99a8c; border:1px dashed #ddd0c2; }

.s05-list{ display:flex; flex-direction:column; gap:11px; }
.s05-litem{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid #efe6dd; border-radius:14px; padding:14px 18px; }
.s05-litem .av{ width:40px; height:40px; border-radius:11px; background:linear-gradient(150deg,#c4275a,#9c1a3f); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex:none; }
.s05-litem .info{ flex:1; }
.s05-litem .nm{ font-size:14.5px; font-weight:600; color:var(--ink); }
.s05-litem .meta{ font-size:12.5px; color:#8a7f86; margin-top:2px; }
.s05-litem .act{ font-size:12.5px; font-weight:600; color:var(--crimson); white-space:nowrap; }

.s05-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }
.s05-kpi{ background:#fff; border:1px solid #efe6dd; border-radius:14px; padding:18px; text-align:center; }
.s05-kpi .num{ font-weight:900; font-size:26px; color:var(--crimson); line-height:1; }
.s05-kpi .lab{ font-size:12px; color:#8a7f86; margin-top:7px; }
.s05-chart{ display:flex; align-items:flex-end; gap:16px; height:96px; padding:0 8px; }
.s05-chart .bar{ flex:1; border-radius:7px 7px 0 0; background:linear-gradient(180deg,#c4275a,#9c1a3f); min-height:8px; }

.s05-ins{ margin-top:22px; background:linear-gradient(160deg,#fbeaf0,#f8e2ea); border-radius:14px; padding:16px 22px; display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.s05-ins .il{ font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--crimson); font-weight:600; }
.s05-ins .it{ font-weight:700; font-size:16px; color:var(--maroon); }
.s05-ins .pts{ font-size:12.5px; color:#7a5560; }

/* Die alten Heute-Karten weichen der KI-Demo (Screen darf nicht ueberlaufen). */
.s05-heute-legacy{ display:none; }

/* ---- „Sag's einfach"-KI-Demo im Heute-Screen (echte Schnell-Erfassung) ---- */
.s05-ai{ margin-bottom:0; }
.s05-ai-bar{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:14px;
  background:#fff; border:1px solid #f0d9e0; box-shadow:0 6px 18px rgba(181,30,75,.06); }
.s05-ai-mic{ width:12px; height:12px; border-radius:50%; background:var(--crimson); flex:none;
  box-shadow:0 0 0 0 rgba(181,30,75,.4); animation:s05mic 1.8s ease-out infinite; }
@keyframes s05mic{ 0%{ box-shadow:0 0 0 0 rgba(181,30,75,.42); } 70%{ box-shadow:0 0 0 9px rgba(181,30,75,0); } 100%{ box-shadow:0 0 0 0 rgba(181,30,75,0); } }
.s05-ai-txt{ flex:1; font-size:14px; color:var(--ink); min-height:1.2em; }
.s05-ai-txt.typing::after{ content:"▋"; color:var(--crimson); animation:s05caret .8s step-end infinite; margin-left:1px; }
@keyframes s05caret{ 50%{ opacity:0; } }
.s05-ai-txt.placeholder{ color:#a99aa0; }
.s05-ai-hint{ font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--crimson); font-weight:600; flex:none; }
.s05-ai-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }
.s05-ai-card{ background:#fff; border:1px solid #efe6dd; border-radius:12px; padding:13px 15px;
  opacity:0; transform:translateY(10px) scale(.98); transition:opacity .32s ease,transform .32s ease; }
.s05-ai-card.pop{ opacity:1; transform:none; }
.s05-ai-card .ck{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:#e6f3ea; color:#3f8f56; font-size:12px; font-weight:800; margin-bottom:9px; }
.s05-ai-card .ai-t{ font-size:13.5px; font-weight:600; color:var(--ink); }
.s05-ai-card .ai-d{ font-size:12px; color:#8a7f86; margin-top:3px; }
.s05-ai-done{ margin-top:12px; font-size:13px; font-weight:600; color:var(--crimson);
  opacity:0; transform:translateY(6px); transition:opacity .35s ease,transform .35s ease; }
.s05-ai-done.show{ opacity:1; transform:none; }

.s05-pills{ display:flex; gap:11px; justify-content:center; margin-top:24px; flex-wrap:wrap; }
.s05-pill{ position:relative; padding:10px 18px; border-radius:30px; font-family:var(--sans); font-size:13.5px; border:1px solid rgba(255,255,255,.28); background:none; color:#e9d6dd; cursor:pointer; transition:background .15s,color .15s,border-color .15s; }
.s05-pill:hover{ border-color:rgba(255,255,255,.55); color:#fff; }
.s05-pill.on{ background:var(--cream); color:var(--maroon); font-weight:600; border-color:var(--cream); }
.s05-pill .s05-badge{ margin-left:7px; }

/* Fuss-Zeile: erst im Live-Zustand sichtbar */
.s05-foot{ text-align:center; font-size:16px; color:#d9c3cc; margin-top:26px;
  opacity:0; transform:translateY(6px); transition:opacity .5s ease,transform .5s ease; }
.s05.s05-live .s05-foot{ opacity:1; transform:none; }
.s05-foot b{ font-family:var(--serif); color:#fff; font-weight:700; }

/* Einmaliger dezenter Tab-Shimmer beim Live-Werden */
@keyframes s05shimmer{ 0%{ background-position:-140% 0; } 100%{ background-position:240% 0; } }
.s05.s05-live .s05-win.shimmer .s05-rail::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(239,138,166,.28) 50%,transparent 60%);
  background-size:220% 100%; animation:s05shimmer 1.1s ease-out 1; }
.s05-rail{ position:relative; overflow:hidden; }

@media (max-width:1120px){
  .s05-sticky{ padding:0 28px; }
  .s05-win{ grid-template-columns:1fr; }
  .s05-rail{ display:none; }
  /* Pillen werden zur Hauptsteuerung und wandern ueber das Fenster (+ Chip-Ziele) */
  .s05-stage{ display:flex; flex-direction:column; }
  .s05-pills{ order:-1; margin-top:0; margin-bottom:18px; }
  .s05-pill{ position:relative; }
  /* Pillen-Erwachen (statt Rail-Tabs) */
  .s05 .s05-win.sleeping ~ .s05-pills .s05-pill{ opacity:.4; }
  .s05-pill.awake{ opacity:1; }
  .s05-pill.awake:not(.on){ border-color:rgba(239,138,166,.8); color:#fff; }
  .s05-pill.just-woke{ animation:s05wake .5s ease; }
}
@media (max-width:760px){
  .s05-runway{ height:170vh; }
  .s05-sticky{ padding:74px 18px 16px; min-height:600px; justify-content:flex-start; }
  .s05-head{ margin:0 auto 14px; }
  .s05-hl{ font-size:clamp(26px,8vw,34px); }
  .s05-sub{ display:none; }               /* Platz sparen auf Mobile — Headline traegt die Botschaft */
  .s05-main{ padding:18px 16px; min-height:300px; }
  .s05-mh{ font-size:22px; margin:7px 0 5px; }
  .s05-msub{ font-size:13px; margin-bottom:16px; }
  .s05-crow,.s05-kpis{ grid-template-columns:1fr; }
  .s05-cal{ grid-template-columns:repeat(5,1fr); gap:6px; }
  .s05-caldon .slot{ font-size:10px; padding:8px 3px; }
  .s05-caldon .d{ font-size:11px; }
  .s05-litem{ padding:12px 14px; gap:11px; }
  .s05-litem .act{ display:none; }
  .s05-ins{ gap:10px; padding:14px 18px; }
  .s05-pills{ gap:7px; margin-bottom:14px; }
  .s05-pill{ padding:8px 13px; font-size:12px; }
  .s05-clock{ top:14px; right:18px; }
  .s05-results{ left:16px; right:16px; }
  .s05-res{ padding:10px 13px; }
  .s05-res .rt{ font-size:12.5px; }
  .s05-res .rd{ display:none; }
  .s05-res-sal .rd{ display:block; font-size:10.5px; }
  .s05-chip{ font-size:10px; padding:8px 10px; }
  /* KI-Demo mobil: kompakte Karten (Icon links, Titel+Detail rechts gestapelt) */
  .s05-ai-cards{ grid-template-columns:1fr; gap:8px; }
  .s05-ai-card{ display:grid; grid-template-columns:22px 1fr; grid-template-rows:auto auto;
    column-gap:11px; align-items:center; padding:10px 13px; }
  .s05-ai-card .ck{ margin-bottom:0; width:22px; height:22px; grid-row:1 / 3; align-self:center; }
  .s05-ai-card .ai-t{ grid-column:2; }
  .s05-ai-card .ai-d{ grid-column:2; margin-top:1px; }
  .s05-ai-bar{ padding:12px 14px; }
  .s05-ai-txt{ font-size:12.5px; }
  .s05-ai-hint{ display:none; }
  .s05-ai-done{ font-size:12px; }
}

/* ---- prefers-reduced-motion: statischer Endzustand (alles wach, Ergebnisse da, Demo fertig) ---- */
@media (prefers-reduced-motion:reduce){
  .s05-runway{ height:auto; }
  .s05-sticky{ position:relative; height:auto; min-height:0; padding:96px 72px; }
  .s05-night{ display:none; }
  .s05-clk-night{ opacity:0!important; }
  .s05-clk-day{ opacity:1!important; }
  .s05-hl .thin,.s05-hl .thick{ opacity:1!important; }
  .s05-hl-beat{ opacity:1!important; transform:none!important; }
  .s05-sub{ opacity:.9!important; }
  .s05-chips{ display:none; }
  .s05-sleep{ display:none!important; }
  .s05-results{ display:none!important; }
  .s05-sleep-ring{ animation:none; }
  .s05-ai-mic{ animation:none; }
  .s05-ai-card{ opacity:1!important; transform:none!important; }
  .s05-ai-done{ opacity:1!important; transform:none!important; }
}
@media (prefers-reduced-motion:reduce) and (max-width:1120px){
  .s05-sticky{ padding:72px 28px; }
}

/* ===== Sektion 07u · Der Unterschied — Duell-Tabelle + Waage-Finale =====
   Präfix .s07u-. Ersetzt den früheren Demo-Monat. Alles scroll-getrieben, keine Timer.
   KEIN .sec-light auf der Sektion: dessen overflow:hidden würde den sticky-Pin killen. */
.s07u{ position:relative; background:linear-gradient(178deg,#fdf6f0,#f7e9e4 55%,#f1dad6); }
.s07u .g{ font-family:var(--serif); }
.s07u-head{ max-width:820px; margin:0 auto; padding:96px 64px 6px; text-align:center; }
.s07u-kick{ font-size:13px; letter-spacing:4px; text-transform:uppercase; color:var(--crimson); font-weight:600; }
.s07u-hl{ font-family:var(--serif); font-weight:400; font-size:clamp(30px,5vw,50px); line-height:1.04; color:var(--maroon); margin:14px 0; letter-spacing:-.5px; }
.s07u-hl .thin{ font-weight:300; }
.s07u-hl b{ font-weight:900; color:var(--crimson); }
.s07u-sub{ font-size:17px; line-height:1.55; color:#5b5158; max-width:60ch; margin:0 auto; }

/* Duell-Tabelle */
.s07u-tablewrap{ max-width:1000px; margin:0 auto; padding:34px 64px 0; }
.s07u-grid{ border-radius:20px; overflow:hidden; box-shadow:0 22px 50px rgba(20,6,10,.16); --sp:1fr; --sp2:1fr; }
.s07u-grid.lean{ --sp:.68fr; --sp2:1.32fr; }
.s07u-head-row, .s07u-row{ display:grid; grid-template-columns:var(--sp) var(--sp2); transition:grid-template-columns .55s cubic-bezier(.4,0,.2,1); }
.s07u-l{ background:#332d33; color:#a99fa6; padding:15px 22px; border-bottom:1px solid rgba(255,255,255,.06); }
.s07u-r{ position:relative; background:#fff; padding:15px 22px; border-bottom:1px solid rgba(46,12,22,.07); transition:background .4s ease; }
.s07u-head-row .s07u-l, .s07u-head-row .s07u-r{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; padding:17px 22px; }
.s07u-head-row .s07u-l{ color:#c7bdc4; }
.s07u-head-row .s07u-r{ background:var(--maroon); color:var(--gold,#e8c074); border-bottom:none; }
.s07u-q{ display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#8a7f74; margin-bottom:3px; }
.s07u-l .s07u-q{ color:#7d7379; }
.s07u-a{ font-size:14px; line-height:1.45; }
.s07u-r .s07u-a{ color:var(--maroon); font-weight:600; }
.s07u-l{ transition:opacity .45s ease; }
.s07u-ck{ position:absolute; right:16px; top:50%; transform:translateY(-50%) scale(0); width:23px; height:23px; border-radius:50%;
  background:var(--crimson); color:#fff; display:grid; place-items:center; font-size:11px; font-weight:700;
  transition:transform .38s cubic-bezier(.3,1.5,.4,1); }
.s07u-row.on .s07u-ck{ transform:translateY(-50%) scale(1); }
.s07u-row.on .s07u-r{ background:rgba(181,30,75,.05); }
.s07u-row.on .s07u-l{ opacity:.72; }

/* Waage-Finale: eigene Scroll-Strecke */
.s07u-strip{ position:relative; height:320vh; }
.s07u-stage{ position:sticky; top:0; height:100svh; min-height:620px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; padding:96px 20px 0; }
.s07u-shead{ text-align:center; max-width:60ch; }
.s07u-hl2{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,4.2vw,42px); line-height:1.05; color:var(--maroon); margin:10px 0 8px; letter-spacing:-.5px; }
.s07u-hl2 .thin{ font-weight:300; } .s07u-hl2 b{ font-weight:900; color:var(--crimson); }
.s07u-shead .s07u-sub{ font-size:15px; }
.s07u-scene{ position:relative; width:min(780px,96%); height:500px; margin-top:14px; }
.s07u-post{ position:absolute; left:50%; bottom:44px; transform:translateX(-50%); width:12px; height:288px; border-radius:7px; background:linear-gradient(180deg,#4a3a42,#2e0c16); }
.s07u-base{ position:absolute; left:50%; bottom:28px; transform:translateX(-50%); width:190px; height:16px; border-radius:9px; background:var(--maroon); box-shadow:0 10px 22px rgba(20,6,10,.22); }
.s07u-beam{ position:absolute; left:50%; top:168px; width:min(600px,92%); height:10px; margin-left:calc(min(600px,92%) / -2); margin-top:-5px;
  border-radius:6px; background:linear-gradient(90deg,#6a5560,#2e0c16 50%,#6a5560); z-index:5;
  transform:rotate(var(--rot,-9deg)); transform-origin:center; transition:transform .55s cubic-bezier(.34,1.45,.38,1); }
.s07u-pivot{ position:absolute; left:50%; top:168px; transform:translate(-50%,-50%); width:26px; height:26px; border-radius:50%; z-index:6;
  background:radial-gradient(circle at 34% 30%,#f3d9a4,#b98a3e); box-shadow:0 4px 10px rgba(20,6,10,.3); }
.s07u-hang{ position:absolute; top:3px; width:264px; transform:rotate(calc(var(--rot,-9deg) * -1)); transition:transform .55s cubic-bezier(.34,1.45,.38,1); }
.s07u-hang-l{ left:-30px; transform-origin:132px 2px; }
.s07u-hang-r{ right:-30px; transform-origin:132px 2px; }
.s07u-rope{ position:absolute; top:0; left:132px; width:1.5px; height:124px; background:linear-gradient(180deg,#b98a3e,#8a6a34); transform-origin:top; }
.s07u-rope.a{ transform:rotate(27deg); } .s07u-rope.b{ transform:rotate(-27deg); }
.s07u-dish{ position:absolute; top:118px; left:50%; transform:translateX(-50%); width:252px; height:17px; border-radius:50%/9px;
  background:radial-gradient(ellipse at 50% 22%,#5a4a52,#2e0c16 70%); box-shadow:0 12px 20px rgba(20,6,10,.22); }
.s07u-load{ position:absolute; top:118px; left:50%; transform:translateX(-50%) translateY(-100%);
  display:grid; grid-template-columns:auto auto; justify-content:center; align-items:end; gap:4px; padding-bottom:5px; }
.s07u-hang-l .s07u-load{ grid-template-columns:auto; }
.s07u-tag{ position:absolute; top:144px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:#8a7f74; }
.s07u-chip{ font-size:10.5px; font-weight:600; border-radius:99px; padding:6px 10px; white-space:nowrap;
  box-shadow:0 4px 10px rgba(20,6,10,.16); transition:transform .55s cubic-bezier(.3,1.35,.4,1), opacity .4s ease; }
.s07u-chip-g{ background:#4a424a; color:#cfc6cc; }
.s07u-chip-s{ background:#fff; color:var(--maroon); border:1px solid rgba(181,30,75,.25); }
.s07u-chip-s i{ font-style:normal; color:var(--crimson); font-weight:700; margin-right:4px; }
.s07u-chip.wait{ opacity:0; transform:translate(150px,-190px) rotate(12deg); }
.s07u-hint{ position:absolute; right:0; bottom:-48px; display:flex; align-items:center; gap:14px; text-decoration:none;
  background:var(--maroon); border-radius:16px; padding:14px 18px; box-shadow:0 16px 34px rgba(20,6,10,.28);
  opacity:0; transform:translate(60px,18px) rotate(4deg); transition:opacity .55s cubic-bezier(.3,1.3,.4,1), transform .55s cubic-bezier(.3,1.3,.4,1); }
.s07u-hint.on{ opacity:1; transform:translate(0,0) rotate(-2deg); }
.s07u-hint:hover{ transform:translate(0,-3px) rotate(-2deg); }
.s07u-hint-t{ font-size:12.5px; line-height:1.45; color:var(--greige); max-width:230px; }
.s07u-hint-t b{ display:block; font-family:var(--serif); font-weight:900; font-size:17px; color:var(--gold,#e8c074); margin-bottom:1px; }
.s07u-hint-ar{ flex:0 0 34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 34% 30%,#f3d9a4,#b98a3e); color:var(--maroon); font-weight:700; font-size:16px; }
.s07u-hint.on .s07u-hint-ar{ animation:s07uAr 1.6s ease-in-out infinite; }
@keyframes s07uAr{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }
.s07u-seal{ position:absolute; left:50%; top:20px; transform:translateX(-50%) scale(0); width:92px; height:92px; border-radius:50%; z-index:8;
  background:radial-gradient(circle at 32% 28%,#f3d9a4,#b98a3e); display:grid; place-items:center; text-align:center;
  font-family:var(--serif); font-weight:900; font-size:10.5px; line-height:1.25; color:var(--maroon);
  box-shadow:0 12px 28px rgba(0,0,0,.32); transition:transform .5s cubic-bezier(.3,1.5,.4,1); }
.s07u-seal.on{ transform:translateX(-50%) scale(1); }
.s07u-qm{ display:none; }
.s07u-foot{ text-align:center; font-size:13px; color:#8a7f74; margin:0; padding:0 24px 88px; }

/* ===== Early Access mobil · Karte von der Landing-Seite (Desktop behaelt das Register) ===== */
  /* ================= Sektion 5 · Early Access — Einer von 100 ================= */
  .s08r-mob{ display:none; }
  @media (max-width:900px){
    .s08r-mob{ display:block; position:relative; z-index:1; padding:8px 20px 4px; }
    #early-access .s08r-sec{ display:none; }   /* Register der 100 nur am Desktop */
  }
  .ea-aur{ position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(55% 40% at 50% -6%, rgba(181,30,75,.10), transparent 60%),
               radial-gradient(50% 40% at 100% 18%, rgba(232,192,116,.16), transparent 60%),
               radial-gradient(45% 40% at 0% 42%, rgba(181,30,75,.06), transparent 60%); }
  .ea-wrap{ position:relative; max-width:600px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; }
  .ea-kick{ font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--crimson); margin-bottom:10px; }
  .ea-h{ font-family:var(--serif); color:var(--ink); font-size:clamp(30px,6vw,58px); line-height:1.04; letter-spacing:-.01em; }
  .ea-h .l1{ font-weight:400; color:#4a4139; } .ea-h .l2{ font-weight:900; }
  .ea-sub{ font-family:var(--sans); font-weight:500; font-size:clamp(14px,1.6vw,16.5px); line-height:1.5; color:#5a4f46; max-width:42ch; margin:16px auto 0; }
  .ea-sub b{ color:var(--crimson); font-weight:600; }

  .ea-cardwrap{ perspective:1000px; margin:clamp(30px,5vh,48px) auto clamp(24px,4vh,38px); width:min(340px,80vw); }
  .ea-card{ position:relative; width:100%; aspect-ratio:1.586; border-radius:18px; overflow:hidden; transform-style:preserve-3d; will-change:transform;
    background:radial-gradient(120% 120% at 20% 12%, #5a1530, #3a0e1f 55%, #280a15);
    box-shadow:0 26px 60px rgba(46,12,22,.42), 0 3px 10px rgba(46,12,22,.3);
    animation:ea-float 7s ease-in-out infinite; }
  .ea-holo{ position:absolute; inset:0; pointer-events:none; transform:translateX(-120%);
    background:linear-gradient(112deg, transparent 34%, rgba(232,192,116,.5) 44%, rgba(120,205,225,.46) 50%, rgba(214,74,114,.5) 56%, transparent 66%);
    mix-blend-mode:screen; opacity:.72; animation:ea-sweep 5.5s ease-in-out infinite; }
  .ea-spec{ position:absolute; inset:0; pointer-events:none; transform:translateX(-120%);
    background:linear-gradient(112deg, transparent 46%, rgba(255,255,255,.5) 50%, transparent 54%);
    animation:ea-sweep 5.5s ease-in-out infinite; }
  .ea-cc{ position:absolute; inset:0; padding:clamp(14px,4.5%,20px) clamp(16px,5.5%,24px); color:#fbf7f1; display:flex; flex-direction:column; justify-content:space-between; }
  .ea-crow{ display:flex; justify-content:space-between; align-items:flex-start; }
  .ea-crow-b{ align-items:flex-end; }
  .ea-wm{ font-family:var(--serif); font-weight:900; letter-spacing:.12em; font-size:clamp(16px,5vw,20px);
    background:linear-gradient(180deg,#f6e0a6,#e8c074 58%,#c99a3e); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .ea-ealab{ font-family:var(--sans); font-size:9px; letter-spacing:.16em; color:#e8c074; border:1px solid rgba(232,192,116,.5); border-radius:5px; padding:3px 6px; }
  .ea-chip{ display:block; width:42px; height:30px; border-radius:7px; background:linear-gradient(135deg,#f0d9a6,#c99a3e); box-shadow:inset 0 1px 2px rgba(255,255,255,.5); }
  .ea-no{ font-family:var(--sans); font-weight:600; font-size:clamp(13px,3.8vw,15px); letter-spacing:.06em; text-shadow:0 1px 0 rgba(0,0,0,.4); }
  .ea-osx{ font-family:var(--sans); font-size:9px; letter-spacing:.12em; color:rgba(251,247,241,.6); }

  .ea-lock{ position:relative; overflow:hidden; display:flex; align-items:flex-start; gap:11px; text-align:left; max-width:440px;
    background:linear-gradient(180deg,#fdf6e8,#f4e8d2); border:1px solid #e6cf9e; border-radius:14px; padding:15px 17px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 6px rgba(176,136,58,.14), 0 10px 26px rgba(120,90,30,.10); }
  .ea-shine{ position:absolute; inset:0; z-index:0; pointer-events:none; transform:translateX(-120%);
    background:linear-gradient(112deg, transparent 40%, rgba(255,255,255,.62) 50%, transparent 60%); animation:ea-sweep 4.6s ease-in-out infinite; }
  .ea-lock .ic{ position:relative; z-index:1; flex:0 0 auto; width:34px; height:34px; border-radius:9px; background:rgba(122,16,36,.09); color:#7a1a34; display:flex; align-items:center; justify-content:center;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
  .ea-lock .ic svg{ width:18px; height:18px; }
  .ea-lt{ position:relative; z-index:1; font-family:var(--serif); font-weight:900; font-size:15px; color:var(--ink); margin-bottom:2px; text-shadow:0 1px 0 rgba(255,255,255,.6); }
  .ea-ls{ position:relative; z-index:1; font-family:var(--sans); font-size:12.5px; line-height:1.45; color:#6a5f4c; }

  .ea-scar{ width:min(340px,80vw); margin:22px auto 0; }
  .ea-bar{ height:8px; border-radius:999px; background:rgba(46,12,22,.09); overflow:hidden; }
  .ea-fill{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#d64a72,#b51e4b);
    transform:scaleX(var(--ea-belegt,.37)); transform-origin:left; transition:transform 1.1s cubic-bezier(.16,1,.3,1); }
  .ea-scart{ font-family:var(--sans); font-size:12.5px; color:#8a7d70; margin-top:9px; }
  .ea-scart b{ color:var(--crimson); font-weight:700; }

  .ea-cta{ display:inline-flex; align-items:center; gap:9px; margin-top:clamp(26px,4vh,38px); background:var(--crimson); color:#fff;
    font-family:var(--sans); font-weight:600; font-size:15px; text-decoration:none; padding:15px 30px; border-radius:999px;
    box-shadow:0 14px 30px rgba(181,30,75,.28); transition:transform .18s ease, box-shadow .18s ease; }
  .ea-cta svg{ width:18px; height:18px; }
  @media (hover:hover) and (pointer:fine){ .ea-cta:hover{ transform:translateY(-2px); box-shadow:0 18px 38px rgba(181,30,75,.34); } }
  .ea-cta:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

  @keyframes ea-float{ 0%,100%{transform:rotateY(-9deg) rotateX(5deg)} 50%{transform:rotateY(9deg) rotateX(-3deg)} }
  @keyframes ea-sweep{ 0%{transform:translateX(-120%)} 55%,100%{transform:translateX(120%)} }

  html.rm .ea-card{ animation:none; }
  html.rm .ea-holo, html.rm .ea-spec{ animation:none; transform:translateX(0); opacity:.42; }
  html.rm .ea-shine{ animation:none; opacity:0; }
  html.rm .ea-fill{ transition:none; }

  @media (max-width:760px){
    .s08r-mob{ padding:clamp(56px,9vh,90px) 18px clamp(64px,10vh,100px); }
    .ea-lock{ padding:12px 14px; }
  }



/* 12-Fragen-Strecke: zwei Felder nebeneinander (PLZ/Stadt, Vor-/Nachname) */
.bw-fieldrow{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.bw-fieldrow .bw-field{ min-width:0; }
@media (max-width:480px){ .bw-fieldrow{ grid-template-columns:1fr; gap:0; } }
/* Zielgruppen-Bestaetigung im Intro + „kein Instagram" im Kontaktschritt */
.bw-check-intro{ margin-top:18px; }
.bw-check-ig{ margin-top:-4px; }
.bw-field input:disabled{ opacity:.45; cursor:not-allowed; }

/* ===== K1 · Mobile Erzaehlung der Sektion „So geht's": Clip -> Feed -> Kurve ===== */
.s04m{ display:none; }
@media (max-width:900px){
  /* Desktop-Darstellung weicht der mobilen Erzaehlung.
     .s04k-rows bleibt fuer Screenreader lesbar (nur visuell entfernt). */
  .s04k-bar{ display:none !important; }
  .s04k-rows{ position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
  .s04m{ display:block; width:100vw; margin-left:calc(50% - 50vw); }

  .s04m-strip{ position:relative; height:340vh; }
  .s04m-stick{ position:sticky; top:0; height:100svh; overflow:hidden;
    display:flex; flex-direction:column; }
  .s04m-step{ flex:0 0 auto; text-align:center; padding:96px 20px 0; z-index:9; }
  .s04m-k{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--crimson); font-weight:600; }
  .s04m-h{ font-family:var(--serif); font-weight:900; font-size:21px; color:var(--maroon); margin-top:3px; }
  .s04m-stage{ flex:1 1 auto; position:relative; display:grid; place-items:center; min-height:0; }

  /* Der Feed */
  .s04m-grid{ --kt:clamp(66px,21vw,92px);
    position:relative; z-index:5; display:grid; grid-template-columns:repeat(3,var(--kt)); gap:7px; }
  .s04m-col{ display:flex; flex-direction:column; gap:7px;
    transition:transform .55s cubic-bezier(.4,0,.2,1), opacity .5s; }
  .s04m-col:nth-child(odd){ transform:translateY(-120%); opacity:0; }
  .s04m-col:nth-child(even){ transform:translateY(120%); opacity:0; }
  .s04m-grid.s1 .s04m-col:nth-child(1),
  .s04m-grid.s2 .s04m-col:nth-child(1), .s04m-grid.s2 .s04m-col:nth-child(2),
  .s04m-grid.s3 .s04m-col:nth-child(1), .s04m-grid.s3 .s04m-col:nth-child(2),
  .s04m-grid.s3 .s04m-col:nth-child(3){ transform:none; opacity:1; }
  /* Kein transform-Uebergang: der Flug haengt direkt am Scroll-Fortschritt,
     eine Transition wuerde die Kacheln dem Finger hinterherhinken lassen. */
  .s04m-col img{ width:var(--kt); height:calc(var(--kt)*1.26); object-fit:cover; border-radius:8px; display:block;
    transition:opacity .5s, border-radius .5s, box-shadow .4s; }

  /* Der eine Clip am Anfang */
  .s04m-solo{ position:absolute; inset:0; display:grid; place-items:center; z-index:6; transition:opacity .5s; }
  .s04m-solo-in{ position:relative; }
  .s04m-solo img{ width:clamp(118px,34vw,152px); aspect-ratio:112/142; object-fit:cover; border-radius:14px;
    box-shadow:0 18px 40px rgba(20,6,10,.3); display:block; }
  .s04m-solo.gone{ opacity:0; pointer-events:none; }
  .s04m-badge{ position:absolute; left:50%; transform:translateX(-50%); bottom:-26px; white-space:nowrap;
    font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--crimson); font-weight:600; }

  /* Die Kurve */
  .s04m-chart{ position:absolute; inset:0; z-index:4; opacity:0; transition:opacity .5s; }
  .s04m-chart.on{ opacity:1; }
  .s04m-chart svg{ position:absolute; inset:0; width:100%; height:100%; }
  .s04m-gl line{ stroke:rgba(46,12,22,.08); stroke-width:1; }
  .s04m-line{ fill:none; stroke:var(--crimson); stroke-width:2.8; stroke-linecap:round; }
  .s04m-ax{ position:absolute; bottom:4%; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:#a89a8c; }
  .s04m-ax-l{ left:4%; } .s04m-ax-r{ right:4%; }

  /* Der Satz in der Mitte */
  /* Schleier statt Blur: der Feed tritt zurueck, sobald der Satz steht.
     Ein Filter ueber 12 Bildern waere beim Scrollen zu teuer. */
  .s04m-stage::after{ content:''; position:absolute; inset:0; z-index:7; pointer-events:none;
    background:rgba(251,247,241,.78); opacity:0; transition:opacity .45s; }
  .s04m-stage.dim::after{ opacity:1; }
  .s04m-mid{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); z-index:8;
    text-align:center; padding:0 20px; opacity:0; transition:opacity .45s; pointer-events:none; }
  .s04m-mid.on{ opacity:1; }
  .s04m-mid b{ display:block; font-family:var(--serif); font-weight:900; font-size:23px; line-height:1.16; color:var(--maroon);
    text-shadow:0 2px 16px rgba(251,247,241,.9); }
  .s04m-mid b i{ font-style:normal; color:var(--crimson); }
  .s04m-mid span{ display:inline-block; margin-top:7px; font-size:12px; color:#5b5158;
    background:rgba(251,247,241,.94); border-radius:99px; padding:5px 13px; }

  /* Die Zahl unten */
  .s04m-foot{ flex:0 0 auto; z-index:10; display:flex; justify-content:space-between; align-items:flex-end;
    padding:0 18px 18px; opacity:0; transition:opacity .45s; }
  .s04m-foot.on{ opacity:1; }
  .s04m-num{ display:flex; align-items:baseline; gap:3px; }
  .s04m-dg{ position:relative; height:32px; width:20px; overflow:hidden; }
  .s04m-dgi{ position:absolute; left:0; top:0; transition:transform .8s cubic-bezier(.4,0,.2,1);
    font-family:var(--serif); font-weight:900; font-size:28px; line-height:32px; color:var(--crimson);
    font-variant-numeric:tabular-nums; }
  .s04m-dgi span{ display:block; height:32px; }
  .s04m-unit{ font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:#8a7f74; font-weight:600; max-width:150px; line-height:1.35; }
  .s04m-tag{ font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:#a8843c; font-weight:600; text-align:right; }
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .s04m-strip{ height:auto; }
  .s04m-stick{ position:static; height:auto; padding-bottom:28px; }
  .s04m-stage{ min-height:440px; }
  .s04m-col, .s04m-col img, .s04m-solo, .s04m-chart, .s04m-mid, .s04m-foot, .s04m-dgi{ transition:none !important; }
  .s04m-solo{ display:none; }
  .s04m-col:nth-child(n){ transform:none; opacity:1; }
  .s04m-foot{ opacity:1; }
}

@media (max-width:900px){
  .s07u-head{ padding:64px 22px 4px; }
  .s07u-sub{ font-size:15px; }
  .s07u-tablewrap{ padding:26px 18px 0; }
  /* A1a · Kompakt-Tabelle: Frage als Zeile darueber, beide Antworten nebeneinander */
  .s07u-grid{ background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 14px 34px rgba(20,6,10,.14); }
  .s07u-head-row{ display:grid; grid-template-columns:.82fr 1.18fr; }
  .s07u-head-row .s07u-l{ background:#332d33; color:#c7bdc4; }
  .s07u-head-row .s07u-r{ background:var(--maroon); color:var(--gold); }
  .s07u-head-row .s07u-l, .s07u-head-row .s07u-r{
    font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; padding:10px 12px; border:none; }
  .s07u-row{ display:grid; grid-template-columns:.82fr 1.18fr; border:none; }
  .s07u-qm{ display:block; grid-column:1/-1; background:#f4ece4; color:#8a7f74;
    font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; padding:7px 12px;
    border-top:1px solid rgba(46,12,22,.06); }
  .s07u-row .s07u-q{ display:none; }
  .s07u-l{ background:#3a343a; color:#a99fa6; padding:10px 12px; border:none; }
  .s07u-l .s07u-a{ font-size:12px; line-height:1.35; display:block; }
  .s07u-r{ background:#fff; padding:10px 26px 10px 12px; border:none; }
  .s07u-r .s07u-a{ font-size:13px; line-height:1.35; font-weight:600; color:var(--maroon); display:block; }
  .s07u-row.on .s07u-r{ background:rgba(181,30,75,.05); }
  .s07u-row.on .s07u-l{ opacity:.55; }
  .s07u-ck{ right:9px; width:17px; height:17px; font-size:10px; }
  .s07u-strip{ height:260vh; }
  .s07u-stage{ min-height:0; padding:96px 14px 0; }
  .s07u-scene{ height:352px; margin-top:8px; }
  .s07u-post{ height:196px; bottom:34px; }
  .s07u-base{ bottom:20px; width:150px; height:13px; }
  .s07u-beam{ top:132px; width:96%; margin-left:-48%; }
  .s07u-pivot{ top:132px; width:20px; height:20px; }
  .s07u-hang{ width:180px; }
  .s07u-hang-l{ left:-16px; transform-origin:90px 2px; }
  .s07u-hang-r{ right:-16px; transform-origin:90px 2px; }
  .s07u-rope{ left:90px; height:96px; }
  .s07u-dish{ top:92px; width:172px; height:13px; }
  .s07u-load{ top:92px; gap:3px; }
  .s07u-tag{ top:110px; font-size:9px; }
  /* Sechs Chips in zwei Spalten passen mobil nicht nebeneinander:
     umbrechen lassen und auf eine Breite begrenzen, die in die Schale passt. */
  .s07u-chip{ font-size:8.5px; padding:4px 6px; white-space:normal; line-height:1.3;
    max-width:84px; text-align:center; }
  .s07u-hang-l .s07u-chip{ max-width:110px; }
  .s07u-load{ gap:3px; }
  .s07u-seal{ width:74px; height:74px; font-size:9px; top:6px; }
  .s07u-hint{ bottom:-52px; padding:11px 14px; gap:10px; }
  .s07u-hint-t{ font-size:11px; max-width:180px; }
  .s07u-hint-t b{ font-size:14px; }
  .s07u-hint-ar{ flex-basis:28px; height:28px; font-size:13px; }
  .s07u-foot{ padding-bottom:60px; }
}
@media (prefers-reduced-motion:reduce){
  .s07u-row, .s07u-head-row, .s07u-ck, .s07u-chip, .s07u-beam, .s07u-hang, .s07u-seal, .s07u-hint{ transition:none !important; animation:none !important; }
}

/* Kurze Handy-Displays: Waage-Bühne kompakt, damit alles in 100svh bleibt */
@media (max-width:900px) and (max-height:720px){
  .s07u-stage{ padding-top:88px; }
  .s07u-hl2{ font-size:22px; margin:6px 0 4px; }
  .s07u-shead .s07u-sub{ font-size:12px; }
  .s07u-scene{ height:262px; margin-top:4px; }
  .s07u-post{ height:142px; bottom:26px; }
  .s07u-base{ bottom:14px; width:120px; height:10px; }
  .s07u-beam{ top:100px; }
  .s07u-pivot{ top:100px; width:16px; height:16px; }
  .s07u-hang{ width:150px; }
  .s07u-hang-l{ left:-12px; transform-origin:75px 2px; }
  .s07u-hang-r{ right:-12px; transform-origin:75px 2px; }
  .s07u-rope{ left:75px; height:72px; }
  .s07u-dish{ top:68px; width:142px; height:11px; }
  .s07u-load{ top:68px; }
  .s07u-tag{ top:84px; font-size:8px; }
  .s07u-chip{ font-size:7.5px; padding:3px 5px; max-width:72px; }
  .s07u-hang-l .s07u-chip{ max-width:96px; }
  .s07u-seal{ width:60px; height:60px; font-size:7.5px; top:2px; }
  .s07u-hint{ bottom:-44px; padding:9px 12px; }
  .s07u-hint-t{ font-size:10px; max-width:160px; }
  .s07u-hint-t b{ font-size:12.5px; }
}

/* ===== Sektion 09k · Die Kernsanierung (Einmal-Projekt) =====
   Präfix .s09k-. Scroll-getriebener Morph + Reel-Mechanik (portiert von der Landing). */
.s09k{ position:relative; background:linear-gradient(178deg,#fbf7f1,#f8efe4 60%,#f3e6da); }
.s09k .g{ font-family:var(--serif); }
.s09k-strip{ position:relative; height:300vh; }
.s09k-stage{ position:sticky; top:0; height:100svh; min-height:620px; overflow:hidden; padding:96px 20px 0; text-align:center; }
.s09k-kick{ font-size:12.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--crimson); font-weight:600; }
.s09k-hl{ font-family:var(--serif); font-weight:400; font-size:clamp(34px,5.6vw,58px); line-height:1.03; color:var(--maroon); margin:12px 0 8px; letter-spacing:-.6px; }
.s09k-hl .thin{ font-weight:300; } .s09k-hl b{ font-weight:900; color:var(--crimson); }
.s09k-sub{ font-size:15px; line-height:1.55; color:#5b5158; max-width:56ch; margin:0 auto; }
.s09k-sub b{ font-weight:600; color:var(--maroon); }
.s09k-route{ display:flex; justify-content:center; gap:34px; margin:16px 0 2px; }
.s09k-rn{ display:flex; align-items:baseline; gap:7px; font-family:var(--serif); font-weight:900; font-size:21px; color:#d9c8ae; transition:color .4s ease, font-size .4s ease; }
.s09k-rn span{ font-family:var(--sans); font-weight:600; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; }
.s09k-rn.on{ color:var(--crimson); font-size:27px; }
.s09k-scene{ position:relative; width:min(740px,96%); height:418px; margin:18px auto 0; text-align:left; }
.s09k-win{ position:absolute; left:0; top:14px; width:min(400px,60%); border-radius:14px;
  filter:drop-shadow(0 22px 40px rgba(20,6,10,.2)); transform:rotate(var(--tilt,-2deg)); transition:transform .5s ease; }
.s09k-winin{ border-radius:14px; overflow:hidden; }
.s09k-state{ position:absolute; top:-12px; left:14px; z-index:4; font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  border-radius:99px; padding:4.5px 11px; transition:opacity .4s ease; }
.s09k-state.alt{ background:#5a5250; color:#fff; }
.s09k-state.neu{ background:#1d9e75; color:#fff; opacity:0; }
.s09k-stage.p1 .s09k-state.alt{ opacity:0; }
.s09k-stage.p1 .s09k-state.neu{ opacity:1; }
.s09k-stage.p1 .s09k-win{ --tilt:0deg; }
.s09k-bar{ display:flex; align-items:center; gap:5px; background:#e8dccb; padding:8px 11px; }
.s09k-bar i{ width:8px; height:8px; border-radius:50%; background:#c9b8a0; }
.s09k-bar em{ font-style:normal; font-size:10px; color:#8a7f74; margin-left:6px; }
.s09k-body{ position:relative; height:230px; background:#f4ead6; }
.s09k-old, .s09k-neu{ position:absolute; inset:0; padding:18px; transition:opacity .5s ease; }
.s09k-old .t{ font-family:Georgia,serif; font-style:italic; font-size:17px; color:#6b5d51; }
.s09k-old .l{ height:7px; border-radius:3px; background:#e0d2ba; margin:9px 0; }
.s09k-old .l.s{ width:60%; }
.s09k-old .btn{ display:inline-block; margin-top:10px; background:#8a97a8; color:#fff; font-size:10px; padding:6px 12px; border-radius:3px; }
.s09k-old .cc{ position:absolute; left:18px; bottom:8px; font-size:9px; color:#a89a8c; }
.s09k-neu{ opacity:0; background:linear-gradient(178deg,#fdf6f0,#f8ede4); }
.s09k-stage.p1 .s09k-old{ opacity:0; }
.s09k-stage.p1 .s09k-neu{ opacity:1; }
.s09k-whero{ position:relative; height:104px; border-radius:9px; overflow:hidden; margin-bottom:10px;
  background:url('models/m02.jpg') center 24%/cover; display:flex; align-items:center; justify-content:center; }
.s09k-whero:after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(18,6,8,.1),rgba(18,6,8,.48)); }
.s09k-whero b{ position:relative; z-index:1; font-family:var(--serif); font-weight:900; font-size:17px; line-height:1.2; letter-spacing:.14em; color:#fff; text-align:center; }
.s09k-whero b i{ font-style:normal; font-weight:400; background:linear-gradient(100deg,#b98a3e,#f3d9a4 45%,#e8c074);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.s09k-slots{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin:8px 0; }
.s09k-slots s{ text-decoration:none; text-align:center; font-size:8.5px; font-weight:600; color:#a89a8c; background:#f7efe4; border-radius:6px; padding:4px 0; }
.s09k-slots s.sel{ background:rgba(181,30,75,.12); color:var(--crimson); box-shadow:inset 0 0 0 1px rgba(181,30,75,.3); }
.s09k-neu .btn{ display:inline-block; margin-top:2px; background:var(--crimson); color:#fff; font-size:10.5px; font-weight:600; padding:8px 16px; border-radius:99px; }
/* Reel-iPhone */
/* Das Bildschirmformat sitzt am Screen (nicht am Rahmen) und entspricht dem Bild:
   dadurch rechnen WebKit und Chromium gleich und es wird nichts beschnitten.
   container-type sitzt am RAHMEN, nicht am Screen: ein Element kann seinen eigenen
   Container nicht abfragen (border-radius:cqw fiele sonst auf die Viewportbreite
   zurueck). Die Content-Box des Rahmens ist exakt so breit wie der Screen, daher
   stimmen alle cqw-Werte. Feste px waren auf kleinen Handys bis zu 3x zu gross
   und der Eckbogen schnitt das Wort „Reels" an. */
.s09k-phone{ position:absolute; right:4px; bottom:0; width:min(178px,26%); border-radius:26px; background:#0d0507; padding:5px; container-type:inline-size;
  box-shadow:0 22px 46px rgba(20,6,10,.28); opacity:0; transform:translateY(34px); transition:opacity .5s ease, transform .5s ease; }
.s09k-stage.p2 .s09k-phone{ opacity:1; transform:none; }
.s09k-scr{ position:relative; width:100%; height:auto; aspect-ratio:560/1238; border-radius:13.1cqw; overflow:hidden; background:#000;
  isolation:isolate; -webkit-mask-image:-webkit-radial-gradient(white,black); transform:translateZ(0); }
.s09k-island{ position:absolute; left:50%; top:4.17cqw; transform:translateX(-50%); width:34%; height:6.55cqw; border-radius:99px; background:#000; z-index:6; }
.s09k-bg, .s09k-grey{ position:absolute; inset:0; background:url('models/reel_kern.jpg') 50% 50%/cover; }
.s09k-grey{ background:#8a8078; mix-blend-mode:saturation; z-index:2; transition:opacity .12s linear; }
.s09k-grade{ position:absolute; inset:0; z-index:3; background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.62)); }
.s09k-reels{ position:absolute; left:5.36cqw; top:5.36cqw; z-index:5; font-size:5.65cqw; font-weight:700; color:#fff; }
.s09k-side{ position:absolute; right:4.17cqw; bottom:30.95cqw; z-index:5; display:flex; flex-direction:column; align-items:center; gap:5.36cqw; }
.s09k-mx{ position:relative; display:flex; flex-direction:column; align-items:center; gap:1.19cqw; color:#fff; }
.s09k-mx svg{ width:8.93cqw; height:8.93cqw; }
.s09k-mx em{ font-style:normal; font-size:5.06cqw; font-weight:600; }
.s09k-heart{ position:absolute; top:-1.19cqw; left:50%; font-size:6.55cqw; color:#ff375f; opacity:0; pointer-events:none; }
.s09k-bot{ position:absolute; left:5.36cqw; right:20.24cqw; bottom:8.33cqw; z-index:5; color:#fff; }
.s09k-views{ display:flex; align-items:center; gap:2.38cqw; font-size:5.36cqw; font-weight:600; }
.s09k-views svg{ width:5.36cqw; height:5.36cqw; fill:#fff; }
.s09k-nm{ font-size:5.06cqw; font-weight:700; margin-top:1.79cqw; }
.s09k-cap{ font-size:4.46cqw; opacity:.85; margin-top:1.19cqw; }
.s09k-seek{ position:absolute; left:4.17cqw; right:4.17cqw; bottom:2.98cqw; height:1.19cqw; border-radius:2px; background:rgba(255,255,255,.28); z-index:5; }
.s09k-seekfill{ display:block; height:100%; width:8%; border-radius:2px; background:#fff; }
/* Stempel + Fußzeile */
.s09k-stamp{ position:absolute; left:2%; top:71%; transform:rotate(-9deg) scale(0); border:3.5px solid var(--crimson); color:var(--crimson);
  border-radius:16px; padding:14px 20px; background:rgba(251,247,241,.92); z-index:6; text-align:center;
  transition:transform .45s cubic-bezier(.3,1.6,.4,1); }
.s09k-stamp b{ font-family:var(--serif); font-weight:900; font-size:26px; }
.s09k-stamp small{ display:block; font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.s09k-stage.p3 .s09k-stamp{ transform:rotate(-9deg) scale(1); }
.s09k-after{ position:absolute; left:0; right:0; bottom:-40px; margin:0; text-align:center; font-size:11.5px; color:#5b5158; opacity:0; transition:opacity .5s ease; }
.s09k-stage.p3 .s09k-after{ opacity:1; }
/* Banner */
.s09k-banner{ max-width:900px; margin:0 auto; padding:0 24px 96px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.s09k-btxt{ flex:1 1 320px; background:var(--maroon); color:var(--cream); border-radius:20px; padding:24px 28px; }
.s09k-banner{ display:block; }
.s09k-btxt{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.s09k-btxt b{ display:block; font-family:var(--serif); font-weight:900; font-size:19px; color:#fff; }
.s09k-btxt b i{ font-style:normal; color:var(--gold,#e8c074); }
.s09k-btxt span{ display:block; font-size:13px; color:var(--greige); margin-top:4px; }
.s09k-cta{ flex:0 0 auto; background:var(--crimson); color:#fff; font-weight:600; font-size:14px; text-decoration:none;
  border-radius:99px; padding:14px 26px; white-space:nowrap; transition:transform .25s ease, box-shadow .25s ease; }
.s09k-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(181,30,75,.35); }

@media (max-width:900px){
  .s09k-stage{ min-height:0; padding:96px 14px 0; }
  .s09k-hl{ font-size:clamp(28px,8vw,40px); }
  .s09k-sub{ font-size:13.5px; }
  .s09k-route{ gap:16px; margin:12px 0 0; }
  .s09k-rn{ font-size:16px; } .s09k-rn.on{ font-size:21px; }
  .s09k-rn span{ font-size:9px; }
  /* Fenster + Phone nebeneinander, damit die Bühne in 100svh passt */
  .s09k-scene{ height:auto; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:center; gap:10px; margin-top:12px; }
  .s09k-win{ position:relative; left:auto; top:auto; flex:0 1 auto; width:58%; max-width:330px; }
  .s09k-body{ height:150px; }
  .s09k-old{ padding:12px; } .s09k-neu{ padding:12px; }
  .s09k-old .t{ font-size:13px; }
  .s09k-whero{ height:62px; margin-bottom:7px; }
  .s09k-whero b{ font-size:13px; }
  .s09k-slots{ margin:5px 0; }
  .s09k-slots s{ font-size:7.5px; }
  .s09k-neu .btn{ font-size:9.5px; padding:6px 12px; }
  .s09k-phone{ position:relative; right:auto; bottom:auto; flex:0 0 auto; width:33%; max-width:124px; border-radius:18px; }
  .s09k-stamp{ position:relative; left:auto; top:auto; flex:0 0 100%; justify-self:center; margin:10px auto 30px; width:max-content; padding:9px 14px; }
  .s09k-stamp b{ font-size:19px; }
  .s09k-stamp small{ font-size:8.5px; }
  .s09k-after{ position:relative; bottom:auto; flex:0 0 100%; margin-top:0; }
  .s09k-strip{ height:260vh; }
  .s09k-banner{ padding:0 18px 72px; }
  .s09k-btxt{ padding:20px 22px; }
  .s09k-cta{ margin-top:14px; display:inline-block; }
}
@media (max-width:900px) and (max-height:720px){
  .s09k-stage{ padding-top:88px; }
  .s09k-hl{ font-size:26px; margin:6px 0 4px; }
  .s09k-sub{ font-size:11.5px; line-height:1.45; }
  .s09k-route{ gap:12px; margin:6px 0 0; }
  .s09k-rn{ font-size:13px; } .s09k-rn.on{ font-size:17px; }
  .s09k-rn span{ font-size:8px; }
  .s09k-scene{ margin-top:6px; gap:5px; }
  .s09k-body{ height:104px; }
  .s09k-whero{ height:46px; margin-bottom:5px; }
  .s09k-whero b{ font-size:11px; }
  .s09k-old .t{ font-size:11px; }
  .s09k-old .l{ height:5px; margin:6px 0; }
  .s09k-slots s{ font-size:6.5px; padding:3px 0; }
  .s09k-neu .btn{ font-size:8.5px; padding:5px 10px; }
  .s09k-phone{ max-width:96px; border-radius:14px; }
  .s09k-stamp{ padding:7px 11px; margin:6px auto 24px; }
  .s09k-stamp b{ font-size:15px; }
  .s09k-stamp small{ font-size:7px; }
  .s09k-after{ font-size:10px; }
}
@media (prefers-reduced-motion:reduce){
  .s09k-win, .s09k-old, .s09k-neu, .s09k-phone, .s09k-stamp, .s09k-after, .s09k-rn, .s09k-state{ transition:none !important; }
}

/* Kurze Desktop-Fenster (1024x768, 1280x720): Bühnen bleiben unter 100svh.
   Kopfraum für den fixierten Nav-Pill NICHT antasten — stattdessen Szenen skalieren. */
@media (min-width:901px) and (max-height:840px){
  .s07u-hl2{ font-size:clamp(23px,3vw,30px); margin:6px 0 4px; }
  .s07u-shead .s07u-sub{ font-size:13.5px; }
  .s07u-scene{ height:400px; margin-top:4px; }
  .s07u-post{ height:220px; bottom:34px; }
  .s07u-base{ bottom:20px; width:160px; height:13px; }
  .s07u-beam{ top:128px; }
  .s07u-pivot{ top:128px; width:21px; height:21px; }
  .s07u-hang{ width:220px; }
  .s07u-hang-l{ left:-24px; transform-origin:110px 2px; }
  .s07u-hang-r{ right:-24px; transform-origin:110px 2px; }
  .s07u-rope{ left:110px; height:96px; }
  .s07u-dish{ top:92px; width:210px; height:14px; }
  .s07u-load{ top:92px; }
  .s07u-tag{ top:112px; }
  .s07u-seal{ top:2px; width:76px; height:76px; font-size:9px; }
  .s07u-hint{ bottom:-42px; }

  .s09k-hl{ font-size:clamp(30px,4.4vw,42px); margin:8px 0 5px; }
  .s09k-sub{ font-size:13.5px; }
  .s09k-route{ margin:10px 0 0; }
  .s09k-rn{ font-size:18px; } .s09k-rn.on{ font-size:23px; }
  .s09k-scene{ height:346px; margin-top:10px; }
  .s09k-win{ top:8px; width:min(360px,56%); }
  .s09k-body{ height:182px; }
  .s09k-whero{ height:78px; margin-bottom:7px; }
  .s09k-phone{ width:min(146px,23%); border-radius:21px; }
  .s09k-stamp{ top:69%; padding:11px 16px; }
  .s09k-stamp b{ font-size:21px; }
  .s09k-after{ bottom:-32px; }
}

/* ===== Preis-Sektion: Modus-Umschalter „Laufend / Einmalig" ===== */
.s09f-mode{ display:flex; justify-content:center; gap:0; width:max-content; margin:0 auto 30px; padding:4px; border-radius:99px; background:#efe6d8; }
.s09f-modeb{ font-family:var(--sans); font-size:13px; font-weight:600; color:#8a7f74; background:none; border:none; cursor:pointer;
  padding:10px 22px; border-radius:99px; transition:background .3s ease, color .3s ease; }
.s09f-modeb.is-on{ background:var(--maroon); color:var(--cream); }
.s09f-abo{ transition:opacity .4s ease, transform .4s ease; }
.s09f-abo.is-off{ display:none; }
.s09f-projekt{ display:flex; justify-content:center; animation:s09fIn .45s cubic-bezier(.3,1.2,.4,1); }
@keyframes s09fIn{ from{ opacity:0; transform:translateY(22px); } }
.s09f-pcard{ position:relative; width:min(620px,100%); background:#fff; border:1.5px solid rgba(181,30,75,.35); border-radius:22px;
  padding:34px 32px 30px; box-shadow:0 24px 54px rgba(20,6,10,.14); }
.s09f-pbadge{ position:absolute; top:-13px; left:30px; background:var(--crimson); color:#fff; font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; border-radius:99px; padding:6px 15px; }
.s09f-pnm{ font-family:var(--serif); font-weight:900; font-size:28px; color:var(--maroon); margin-bottom:4px; }
.s09f-pfor{ font-size:15px; line-height:1.5; color:#5b5158; margin:0 0 14px; }
.s09f-phero{ display:flex; align-items:baseline; gap:6px; margin-bottom:16px; }
.s09f-pnum{ font-family:var(--serif); font-weight:900; font-size:38px; color:var(--crimson); }
.s09f-pper{ font-size:15px; color:#8a7f74; }
.s09f-pfeats{ list-style:none; margin:0 0 20px; padding:0; }
.s09f-pfeats li{ display:flex; gap:10px; font-size:14.5px; line-height:1.5; color:#4a4139; padding:6px 0; }
.s09f-pfeats i{ font-style:normal; color:var(--crimson); font-weight:700; }
.s09f-pfoot{ margin:14px 0 0; font-size:12.5px; line-height:1.55; color:#8a7f74; }
@media (max-width:900px){
  .s09f-mode{ margin-bottom:22px; }
  .s09f-modeb{ font-size:12px; padding:9px 15px; }
  .s09f-pcard{ padding:28px 22px 24px; }
  .s09f-pnum{ font-size:31px; }
}


/* ===== Sektion 07c · SALOONEA Creator Circle (Line-up + Push) ===== */
.s07c{ padding:0; }
.cc-sec{ position:relative; overflow:hidden;
  background:radial-gradient(58% 52% at 84% -4%, rgba(181,30,75,.38), transparent 64%), #20090f;
  padding:96px 64px 92px; }
.cc-grid{ position:relative; z-index:1; display:grid; grid-template-columns:0.78fr 1fr; gap:56px; align-items:center; max-width:1240px; margin:0 auto; }

/* Spotlights: zwei schwenkende Lichtkegel über der rechten Hälfte */
.cc-spot{ position:absolute; top:-10%; height:130%; width:30%; z-index:0; pointer-events:none; transform-origin:50% 0; }
.cc-spot-g{ right:24%;
  background:linear-gradient(to bottom, rgba(232,192,140,.26), rgba(232,192,140,0) 82%);
  clip-path:polygon(44% 0, 56% 0, 96% 100%, 4% 100%);
  animation:ccSweepG 9s ease-in-out infinite alternate; }
.cc-spot-c{ right:2%;
  background:linear-gradient(to bottom, rgba(181,30,75,.28), rgba(181,30,75,0) 82%);
  clip-path:polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  animation:ccSweepC 11s ease-in-out infinite alternate; }
@keyframes ccSweepG{ from{ transform:rotate(-8deg); } to{ transform:rotate(7deg); } }
@keyframes ccSweepC{ from{ transform:rotate(6deg); } to{ transform:rotate(-9deg); } }

/* Linke Spalte */
.cc-kick{ font-family:var(--sans); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:#e8a4b8; font-weight:600; }
.cc-h{ font-size:clamp(30px,3.4vw,44px); line-height:1.06; color:var(--cream); margin:16px 0 0; letter-spacing:-.6px; }
.cc-h .thin{ font-weight:400; }
.cc-h b{ font-weight:900; }
.cc-sub{ font-family:var(--sans); font-size:14.5px; color:rgba(251,247,241,.85); max-width:46ch; margin:18px 0 0; line-height:1.65; }
.cc-sub b{ font-weight:700; color:var(--cream); }
.cc-foot{ font-family:var(--sans); font-size:10.5px; color:rgba(251,247,241,.5); line-height:1.7;
  margin:30px 0 0; padding-top:16px; border-top:1px solid rgba(255,255,255,.14); max-width:52ch; }

/* Rechte Spalte: Bühne */
.cc-stage{ position:relative; min-height:560px; display:flex; flex-direction:column; justify-content:center; }
.cc-corner{ position:absolute; top:0; right:0; z-index:6;
  padding:5px 10px; border-radius:20px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-family:var(--sans); font-size:8px; letter-spacing:.1em; color:rgba(251,247,241,.4); }

/* Line-up (Konzert-Billing) */
.cc-lineup{ display:flex; flex-direction:column; gap:18px; }
.cc-act{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.cc-act-name{ font-family:var(--serif); font-weight:900; font-size:clamp(26px,2.6vw,38px);
  letter-spacing:.04em; line-height:1.05; color:var(--cream);
  transition:color .5s ease, text-shadow .5s ease; }
.cc-act-meta{ font-family:var(--sans); font-size:10.5px; color:rgba(251,247,241,.6); letter-spacing:.02em; }
.cc-act-tag{ display:inline-flex; align-items:center; flex:none; padding:4px 9px; border-radius:14px;
  background:rgba(232,192,116,.14); border:1px solid rgba(232,192,116,.55);
  font-family:var(--sans); font-size:8.5px; font-weight:700; letter-spacing:.12em; color:#e8c074;
  opacity:0; transform:scale(.6);
  transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
.cc-act.confirmed .cc-act-name{ color:#e8c074; text-shadow:0 0 26px rgba(232,192,116,.35); }
.cc-act.confirmed .cc-act-tag{ opacity:1; transform:scale(1); }
.cc-lineup .cc-act:nth-child(1){ transition-delay:.05s; }
.cc-lineup .cc-act:nth-child(2){ transition-delay:.16s; }
.cc-lineup .cc-act:nth-child(3){ transition-delay:.27s; }
.cc-lineup .cc-act:nth-child(4){ transition-delay:.38s; }
.cc-lineup .cc-soon{ transition-delay:.52s; }
.cc-soon{ margin-top:10px; font-family:var(--sans); font-size:9px; font-weight:700; letter-spacing:.24em; color:#e8c074; }

/* Push-Karte (Glas) */
.cc-pushwrap{ position:absolute; top:26px; right:0; width:290px; max-width:100%; z-index:5; }
.cc-push{ position:relative; padding:14px 16px; border-radius:16px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 18px 44px rgba(12,3,7,.5), inset 0 1px 0 rgba(255,255,255,.14);
  opacity:0; transform:translateY(-14px); visibility:hidden; pointer-events:none;
  transition:opacity .45s ease, transform .45s ease, visibility 0s linear .45s; }
.cc-push.show{ opacity:1; transform:none; visibility:visible; pointer-events:auto;
  transition:opacity .45s ease, transform .45s ease; }
.cc-push-head{ display:flex; align-items:center; gap:8px; }
.cc-push-ava{ width:24px; height:24px; border-radius:7px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, #d43e6c, #b51e4b 55%, #7a1433);
  border:1px solid rgba(255,255,255,.25);
  font-family:var(--serif); font-weight:900; font-size:12px; color:#fff; }
.cc-push-app{ font-family:var(--sans); font-size:9.5px; color:rgba(251,247,241,.75); letter-spacing:.04em; }
.cc-push-app b{ font-weight:700; color:var(--cream); }
.cc-push-line{ margin:10px 0 0; font-family:var(--sans); font-size:11.5px; line-height:1.5; color:rgba(251,247,241,.85); }
.cc-push-line b{ font-weight:700; color:#e8c074; }
.cc-push-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.cc-push-yes{ appearance:none; border:0; cursor:pointer; padding:8px 16px; border-radius:20px;
  background:#e8c074; color:#20090f; font-family:var(--sans); font-size:11px; font-weight:700;
  box-shadow:0 8px 20px rgba(232,192,116,.3); transition:transform .18s ease, box-shadow .18s ease; }
.cc-push-yes:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(232,192,116,.4); }
.cc-push-yes.pulse{ animation:ccYesPulse .55s ease-in-out; }
@keyframes ccYesPulse{ 0%{ transform:scale(1); } 40%{ transform:scale(1.12); } 100%{ transform:scale(1); } }
.cc-push-no{ appearance:none; cursor:pointer; padding:8px 16px; border-radius:20px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  color:rgba(251,247,241,.6); font-family:var(--sans); font-size:11px; font-weight:500;
  transition:color .18s ease, border-color .18s ease; }
.cc-push-no:hover{ color:rgba(251,247,241,.9); border-color:rgba(255,255,255,.32); }
.cc-push-yes:focus-visible,.cc-push-no:focus-visible{ outline:2px solid #e8a4b8; outline-offset:2px; }

/* Kurz-Note nach „Nein" (liegt über dem Push-Platz) */
.cc-mininote{ position:absolute; inset:0; margin:0; padding:12px; border-radius:16px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  font-family:var(--sans); font-size:11px; color:rgba(251,247,241,.8);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s ease, visibility 0s linear .3s; }
.cc-mininote.show{ opacity:1; visibility:visible; transition:opacity .3s ease; }

/* Nur für Screenreader (aria-live-Status) */
.cc-vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* Responsive */
@media (max-width:1260px){
  .cc-sec{ padding:90px 44px 86px; }
  .cc-grid{ gap:40px; }
  .cc-stage{ min-height:520px; }
  .cc-pushwrap{ width:280px; }
}
@media (max-width:900px){
  .cc-sec{ padding:72px 24px 70px; }
  .cc-grid{ grid-template-columns:1fr; gap:44px; align-items:start; }
  .cc-stage{ min-height:0; justify-content:flex-start; gap:26px; }
  .cc-corner{ position:static; align-self:flex-end; }
  /* relative statt static: .cc-mininote (inset:0) muss sich an der Karte bemessen, nicht an der Bühne */
  .cc-pushwrap{ position:relative; top:auto; right:auto; width:100%; }
  .cc-push-yes,.cc-push-no{ padding:14px 22px; }
  .cc-lineup{ gap:16px; }
  .cc-act{ gap:10px; }
  .cc-act-name{ font-size:clamp(24px,7vw,28px); }
  .cc-act-meta{ flex-basis:100%; order:3; margin-top:2px; }
  .cc-spot{ width:44%; }
}
@media (max-width:520px){
  .cc-sec{ padding:60px 18px 60px; }
  .cc-h{ font-size:clamp(28px,8vw,34px); }
}
@media (prefers-reduced-motion:reduce){
  .cc-spot-g,.cc-spot-c{ animation:none; opacity:.5; }
  .cc-push{ transition:none; }
  .cc-push-yes.pulse{ animation:none; }
  .cc-push-yes:hover{ transform:none; }
  .cc-act-name{ transition:none; }
  .cc-act-tag{ transition:none; }
  .cc-mininote{ transition:none; }
}

/* ===== Sektion 08 · Register der 100 ===== */
.s08r{ padding:0; }
.s08r-sec{ position:relative; overflow:hidden; background:radial-gradient(120% 110% at 50% 20%,#4a1024,#2e0c16 55%,#160609); padding:96px 64px 92px; }
.s08r-grid-layout{ display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center; max-width:1240px; margin:0 auto; }

/* Linke Spalte */
.s08r-pill{ display:inline-flex; gap:9px; align-items:center; background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.32); border-radius:30px; padding:10px 20px; color:var(--cream); font-size:12.5px; letter-spacing:1.2px; }
.s08r-pill .d{ width:8px; height:8px; border-radius:50%; background:#5cb86a; box-shadow:0 0 0 0 rgba(92,184,106,.6); animation:s08rPulse 2.6s ease-out infinite; }
@keyframes s08rPulse{ 0%{ box-shadow:0 0 0 0 rgba(92,184,106,.55);} 70%{ box-shadow:0 0 0 7px rgba(92,184,106,0);} 100%{ box-shadow:0 0 0 0 rgba(92,184,106,0);} }
.s08r-h{ font-size:clamp(32px,6vw,54px); line-height:1.04; color:var(--cream); margin:22px 0 0; letter-spacing:-1px; }
.s08r-h .thin{ font-weight:300; }
.s08r-h b{ font-weight:900; color:#ef8aa6; }
.s08r-sub{ font-size:18px; color:#e0cdd4; max-width:540px; margin:20px 0 0; line-height:1.6; }
.s08r-why{ font-size:15px; color:#e0cdd4; margin:18px 0 0; line-height:1.55; }
.s08r-why b{ color:#e8c074; font-weight:700; }

/* Plakette */
.s08r-plate{ margin:28px 0 0; max-width:360px; padding:18px 22px; border-radius:16px;
  background:rgba(255,255,255,.10); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid rgba(239,138,166,.42); box-shadow:0 16px 40px rgba(122,20,48,.35), inset 0 1px 0 rgba(255,255,255,.28);
  opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease; pointer-events:none; }
.s08r-plate.show{ opacity:1; transform:none; }
.s08r-plate-top{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--greige); }
.s08r-plate-mid{ font-family:var(--serif); font-weight:900; font-size:26px; color:var(--cream); margin:6px 0 2px; }
.s08r-plate-mid span{ color:#ef8aa6; }
.s08r-plate-bot{ font-size:13px; color:#5cb86a; font-weight:600; letter-spacing:.4px; }
/* Preis-Lock-Zeile auf der Plakette (Launch-Definition 04.07.: Preis-Lock für die ersten 100) */
.s08r-plate-lock{ display:flex; gap:10px; align-items:flex-start; margin-top:12px; padding-top:12px;
  border-top:1px dashed rgba(255,255,255,.20); }
.s08r-lock{ flex:none; margin-top:1px; }
.s08r-lock-shackle{ transform-origin:15px 11px; transform:rotate(-38deg);
  transition:transform .45s cubic-bezier(.34,1.5,.64,1) .35s; }
.s08r-plate.show .s08r-lock-shackle{ transform:rotate(0deg); }
.s08r-plate-lock-t{ font-size:13px; font-weight:600; color:var(--cream); }
.s08r-plate-lock-s{ font-size:11px; color:#cbbfae; line-height:1.5; margin-top:2px; }

.s08r-cta{ margin-top:30px; }
.s08r-btn{ padding:17px 38px; border-radius:34px; font-size:16px; font-weight:500; text-decoration:none; display:inline-block; }
.s08r-btn-p{ background:var(--crimson); color:#fff; box-shadow:0 14px 34px rgba(181,30,75,.4); transition:transform .18s ease, box-shadow .18s ease; }
.s08r-btn-p:hover{ transform:translateY(-2px); box-shadow:0 18px 42px rgba(181,30,75,.5); }
.s08r-second{ display:inline-block; margin:16px 0 0; font-size:14px; color:#e0cdd4; text-decoration:underline; text-underline-offset:3px; }
.s08r-second:hover{ color:#fff; }

/* Rechte Spalte: Register */
.s08r-register-wrap{ display:flex; flex-direction:column; align-items:center; }
.s08r-register{ display:grid; grid-template-columns:repeat(10,1fr); gap:11px; width:100%; max-width:420px; }
.s08r-dot{ position:relative; aspect-ratio:1/1; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transform:scale(.4);
  transition:opacity .32s ease, transform .32s cubic-bezier(.34,1.56,.64,1), background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.s08r-dot.in{ opacity:1; transform:scale(1); }
.s08r-dot::after{ content:attr(data-n); position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; color:var(--cream); opacity:0; transition:opacity .2s ease; }
.s08r-dot:hover{ background:rgba(239,138,166,.30); border-color:rgba(239,138,166,.7); box-shadow:0 0 14px rgba(239,138,166,.55); }
.s08r-dot:hover::after{ opacity:.9; }
.s08r-dot.wave{ background:rgba(239,138,166,.55); border-color:rgba(239,138,166,.9); box-shadow:0 0 18px rgba(239,138,166,.8); }
/* Reserviert: gedaempft besetzt — klar anders als der leuchtende, gewaehlte Platz. */
.s08r-dot.claimed{ background:rgba(181,30,75,.34); border-color:rgba(239,138,166,.34); box-shadow:none; cursor:not-allowed; }
.s08r-dot.claimed::after{ opacity:.5; color:rgba(255,255,255,.65); }
.s08r-dot.claimed:hover{ background:rgba(181,30,75,.46); border-color:rgba(239,138,166,.5); box-shadow:none; }
.s08r-dot.claimed:hover::after{ opacity:.8; }
@keyframes s08rNudge{ 0%,100%{ transform:scale(1); } 35%{ transform:scale(.82); } 70%{ transform:scale(1.06); } }
.s08r-dot.nudge{ animation:s08rNudge .32s ease; }
.s08r-dot.picked{ background:var(--crimson); border-color:#fff; box-shadow:0 0 20px rgba(181,30,75,.9), 0 0 0 2px rgba(255,255,255,.5); transform:scale(1.12); }
.s08r-dot.picked::after{ opacity:1; color:#fff; }
.s08r-dot:focus-visible{ outline:2px solid #ef8aa6; outline-offset:2px; }
.s08r-stand{ margin-top:16px; font-size:13px; color:#cbbfae; letter-spacing:.3px; }
.s08r-stand b{ color:#f0b8c6; font-weight:700; }
.s08r-hint{ transition:color .3s ease; }
.s08r-hint.is-reserved{ color:#f0b8c6; font-weight:600; }
.s08r-hint{ margin-top:18px; font-size:12.5px; color:var(--greige); letter-spacing:.3px; }

.s08r-engrave{ max-width:1240px; margin:64px auto 0; padding-top:26px; border-top:1px solid rgba(255,255,255,.16);
  text-align:center; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--greige); }
.s08r-engrave b{ color:#e0cdd4; font-weight:700; }

@media (max-width:960px){
  .s08r-sec{ padding:76px 28px 76px; }
  .s08r-grid-layout{ grid-template-columns:1fr; gap:44px; }
  .s08r-register-wrap{ order:2; }
  .s08r-register{ max-width:360px; }
  .s08r-plate{ max-width:none; }
}
@media (max-width:520px){
  .s08r-sec{ padding:60px 18px 64px; }
  .s08r-sub{ font-size:16px; }
  .s08r-register{ gap:7px; max-width:100%; }
  .s08r-dot::after{ font-size:9px; }
  .s08r-btn{ display:block; width:100%; text-align:center; padding:16px 28px; }
  .s08r-engrave{ margin-top:44px; }
}
@media (prefers-reduced-motion:reduce){
  .s08r-dot{ opacity:1; transform:none; transition:background .2s ease, border-color .2s ease; }
  .s08r-dot.picked{ transform:none; }
  .s08r-pill .d{ animation:none; }
  .s08r-plate{ transition:none; }
  .s08r-lock-shackle{ transition:none; transform:rotate(0deg); }
}

/* ===== Sektion 09 · Paket-Finder ===== */
.s09f{ padding:90px 96px 96px; }
.s09f .s-wrap{ position:relative; z-index:2; }
.s09f-head{ text-align:center; max-width:760px; margin:0 auto 34px; }
.s09f-kick{ font-size:13px; letter-spacing:4px; text-transform:uppercase; color:var(--crimson); font-weight:600; }
.s09f-hl{ font-size:clamp(32px,7.5vw,54px); line-height:1.04; color:var(--maroon); margin:16px 0 0; letter-spacing:-.3px; }
.s09f-hl .thin{ font-weight:300; }
.s09f-hl .thick{ font-weight:900; color:var(--crimson); }

/* Finder */
.s09f-finder{ max-width:920px; margin:0 auto 22px; padding:26px 30px; display:flex; gap:38px; flex-wrap:wrap; justify-content:center; }
.s09f-q{ flex:1 1 340px; }
.s09f-qlabel{ font-size:14px; font-weight:600; color:var(--maroon); margin-bottom:12px; }
.s09f-chips{ display:flex; gap:9px; flex-wrap:wrap; }
.s09f-chip{ font-family:var(--sans); font-size:13.5px; font-weight:500; color:var(--maroon); cursor:pointer;
  background:rgba(255,255,255,.55); border:1px solid rgba(46,12,22,.16); border-radius:24px; padding:9px 16px;
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease; }
.s09f-chip:hover{ transform:translateY(-2px); border-color:rgba(181,30,75,.5); }
.s09f-chip.on{ background:var(--crimson); border-color:var(--crimson); color:#fff; box-shadow:0 8px 20px rgba(181,30,75,.32); }
.s09f-chip:focus-visible{ outline:2px solid var(--crimson); outline-offset:2px; }

/* Karten */
.s09f-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.s09f-card{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid #efe6dd; border-radius:20px; padding:32px 28px 30px;
  box-shadow:0 10px 30px rgba(46,12,22,.06); transition:transform .32s ease, box-shadow .32s ease, border-color .32s ease, opacity .32s ease; }
.s09f-card.reco{ border-color:var(--crimson); transform:translateY(-14px); box-shadow:0 30px 66px rgba(181,30,75,.26), 0 0 0 1px var(--crimson) inset; z-index:3; }
.s09f-card.reco::before{ content:""; position:absolute; inset:-2px; border-radius:22px; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 0%, rgba(181,30,75,.28), rgba(224,122,150,.14) 45%, transparent 70%); filter:blur(14px); }
.s09f-card.dim{ opacity:.62; }
.s09f-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-size:11px; letter-spacing:1px; text-transform:uppercase; font-weight:600; color:#fff; background:var(--crimson);
  padding:6px 14px; border-radius:20px; box-shadow:0 8px 20px rgba(181,30,75,.4); opacity:0; pointer-events:none; transition:opacity .3s ease; }
.s09f-card.reco .s09f-badge{ opacity:1; }
/* Wachstum: Badge "Unser Kernpaket" ist IMMER sichtbar (auch ohne reco) */
.s09f-card[data-pkg="wachstum"] .s09f-badge{ opacity:1; }
.s09f-nm{ font-weight:900; font-size:28px; color:var(--maroon); }
.s09f-for{ font-size:14px; color:#7a6f76; margin:6px 0 18px; min-height:38px; }
.s09f-ea{ display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--maroon); font-weight:500; line-height:1.35;
  background:rgba(255,255,255,.7); border:1px solid rgba(46,12,22,.12); border-radius:24px; padding:9px 14px; margin-bottom:auto; }
.s09f-ea .d{ width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:#5cb86a; }
.s09f-btn{ display:block; text-align:center; margin-top:22px; padding:14px; border-radius:28px; font-size:15px; font-weight:500; text-decoration:none;
  border:1px solid rgba(46,12,22,.28); color:var(--maroon); background:transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .25s ease, color .25s ease, border-color .25s ease; }
.s09f-btn:hover{ border-color:var(--crimson); color:var(--crimson); }
/* Empfohlene Karte: gefüllt crimson */
.s09f-card.reco .s09f-btn{ background:var(--crimson); border-color:var(--crimson); color:#fff; box-shadow:0 12px 28px rgba(181,30,75,.34); }
.s09f-card.reco .s09f-btn:hover{ transform:translateY(-2px); color:#fff; box-shadow:0 16px 34px rgba(181,30,75,.44); }

@media (max-width:960px){
  .s09f{ padding:72px 24px 80px; }
  .s09f-cards{ grid-template-columns:1fr; gap:26px; }
  .s09f-card,
  .s09f-card.reco{ transform:none; }
  .s09f-card.reco{ box-shadow:0 22px 50px rgba(181,30,75,.24), 0 0 0 1px var(--crimson) inset; }
  .s09f-card.dim{ opacity:1; }
  /* Wachstum zuerst auf Mobile */
  .s09f-card[data-pkg="wachstum"]{ order:-1; }
  .s09f-for{ min-height:0; }
}
@media (max-width:520px){
  .s09f{ padding:60px 18px 68px; }
  .s09f-finder{ padding:22px 20px; gap:24px; }
  .s09f-card{ padding:28px 22px 26px; }
}

/* ===== Sektion 09 · Preis-Umbau (pz-) ===== */
/* Gold-Pill (nur: "Bester Preis", "Du sparst 960 € im Jahr") */
.pz-gold-pill{ display:inline-block; white-space:nowrap; font-family:var(--sans);
  font-size:10.5px; letter-spacing:.8px; text-transform:uppercase; font-weight:700;
  background:#e8c074; color:#5a3d10; padding:5px 12px; border-radius:16px; box-shadow:0 6px 14px rgba(90,61,16,.22); }

/* Laufzeit-Wahl */
/* Übergangs-Headline vor den Paketen */
.pz-offer{ text-align:center; margin:58px auto 26px; max-width:820px; font-family:var(--serif); }
.pz-offer span{ display:inline; font-weight:900; font-size:clamp(26px,3vw,34px); line-height:1.1; }
.pz-offer .d{ color:var(--maroon); }
.pz-offer .c{ color:var(--crimson); }
.pz-terms{ max-width:470px; margin:0 auto 40px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.pz-term{ position:relative; font-family:var(--sans); cursor:pointer; text-align:center;
  background:#fff; border:1px solid #efe6dd; border-radius:16px; padding:15px 8px 13px;
  box-shadow:0 6px 18px rgba(46,12,22,.05);
  transition:border-color .2s ease, box-shadow .2s ease, transform .15s ease; }
.pz-term:hover{ transform:translateY(-2px); border-color:rgba(181,30,75,.45); }
.pz-term.on{ border-color:var(--crimson); box-shadow:0 10px 26px rgba(181,30,75,.16), 0 0 0 1px var(--crimson) inset; }
.pz-term:focus-visible{ outline:2px solid var(--crimson); outline-offset:3px; }
.pz-term-t{ display:block; font-family:var(--serif); font-weight:700; font-size:15.5px; color:var(--maroon); }
.pz-term-s{ display:block; font-size:11.5px; color:#7a6f76; margin-top:4px; }
.pz-term-circle{ display:block; font-size:9.5px; font-weight:700; letter-spacing:0; color:#8a6a2f; margin-top:3px; white-space:nowrap; }
.pz-term .pz-gold-pill{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); }

/* Karten-Innenleben */
.pz-worth{ font-size:12px; font-weight:700; color:#9c7c46; letter-spacing:.4px; margin-bottom:12px; }
/* Wert-Anker: goldene Linie zieht sich beim Einscrollen durch — der Betrag ist der
   Vergleichswert der Einzelleistungen, nicht der echte Setup-Preis (1.490 €). */
.pz-worth-x{ position:relative; display:inline-block; white-space:nowrap; }
.pz-worth-x::after{ content:''; position:absolute; left:-2px; right:-2px; top:54%; height:2.5px; border-radius:2px;
  background:linear-gradient(90deg,#b98a3e,#f3d9a4 45%,#e8c074); transform:scaleX(0); transform-origin:left;
  transition:transform .75s cubic-bezier(.5,0,.2,1); box-shadow:0 1px 4px rgba(184,138,62,.4); }
.pz-worth-x.drawn::after{ transform:scaleX(1); }
@media (prefers-reduced-motion:reduce){ .pz-worth-x::after{ transition:none; } }
.pz-strike{ min-height:24px; display:flex; align-items:baseline; gap:8px;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s; }
.pz-strike.show{ opacity:1; visibility:visible; }
.pz-strike s{ font-family:var(--serif); font-weight:700; font-size:17px; color:#9b8894;
  text-decoration:line-through; text-decoration-color:#b78a97; }
.pz-strike-note{ font-size:12px; color:#7a6570; }
.pz-hero{ display:flex; align-items:baseline; gap:3px; margin:2px 0 8px; min-height:48px; }
.pz-num{ font-weight:900; font-size:46px; color:var(--maroon); letter-spacing:-1px; line-height:1; }
.pz-per{ font-size:14px; color:#7a6f76; font-weight:500; }
.pz-onreq{ font-weight:900; font-size:32px; color:var(--maroon); letter-spacing:-.5px; line-height:1.15; }
.pz-setup{ min-height:22px; font-size:13.5px; color:#3a2f35; font-weight:500; }
.pz-setup s{ color:#9b8894; text-decoration-color:#b78a97; }
.pz-incl{ color:#9c7c46; font-weight:800; }
.pz-setup-sw [data-for]{ display:none; }
.s09f-cards[data-term="3"] .pz-setup-sw [data-for="3"],
.s09f-cards[data-term="6"] .pz-setup-sw [data-for="6"],
.s09f-cards[data-term="12"] .pz-setup-sw [data-for="12"]{ display:inline; }
.pz-save{ min-height:34px; display:flex; justify-content:flex-start; align-items:center; margin-top:6px; }
.pz-save .pz-gold-pill{ opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s; }
.pz-save.show .pz-gold-pill{ opacity:1; visibility:visible; }
/* Spar-Badge je Laufzeit: 6 Mon. = Setup-Ersparnis, 12 Mon. = Jahres-Ersparnis */
.pz-save [data-sv]{ display:none; }
.s09f-cards[data-term="6"] .pz-save [data-sv="6"],
.s09f-cards[data-term="12"] .pz-save [data-sv="12"]{ display:inline-block; }
.pz-feats{ list-style:none; margin:14px 0 18px; padding:0; display:flex; flex-direction:column; gap:9px; }
.pz-feats li{ display:flex; gap:9px; align-items:flex-start; font-size:14px; color:#3a2f35; font-weight:500; line-height:1.4; }
.pz-feats li i{ display:flex; align-items:center; justify-content:center; width:18px; height:18px; flex:0 0 auto; margin-top:1px;
  border-radius:50%; background:rgba(181,30,75,.12); color:var(--crimson); font-style:normal; font-weight:700; font-size:10px; }
/* ===== Start-Karte (Neupositionierung 09/2026) ===== */
/* Bedingungszeile direkt am Preis: Laufzeit + Setup (Pflichtangabe zum "ab 299 €") */
.pz-cond{ margin-top:6px; padding:8px 10px; border-radius:10px; font-size:13px; line-height:1.45; font-weight:500; color:#3a2f35;
  background:rgba(181,30,75,.06); border:1px solid rgba(181,30,75,.14); }
.pz-cond b{ color:var(--maroon); font-weight:700; }
/* Staffel-Leiter 399 · 349 · 299 — gekoppelt mit #pzTerms (gleiche data-term-Werte) */
.pz-ladder-cap{ margin:10px 0 6px; font-size:11.5px; color:#8a7d70; text-align:center; }
.pz-ladder{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:0 0 4px; }
.pz-lad{ font-family:var(--sans); cursor:pointer; background:#fff; border:1px solid #efe6dd; border-radius:11px; padding:8px 4px 7px; text-align:center;
  transition:border-color .2s, box-shadow .2s, background .2s, transform .15s; }
.pz-lad b{ display:block; font-family:var(--serif); font-weight:900; font-size:15px; color:var(--maroon); letter-spacing:-.2px; }
.pz-lad span{ display:block; font-size:10.5px; color:#7a6f76; margin-top:2px; }
@media (hover:hover) and (pointer:fine){ .pz-lad:hover{ border-color:rgba(181,30,75,.45); transform:translateY(-1px); } }
.pz-lad.on{ border-color:var(--crimson); background:rgba(181,30,75,.06); box-shadow:0 0 0 1px var(--crimson) inset; }
.pz-lad.on span{ color:var(--crimson); font-weight:600; }
.pz-lad:focus-visible{ outline:2px solid var(--crimson); outline-offset:2px; }
/* Hervorgehobene Leistungszeile (neu enthalten) + neutrale "optional zubuchbar"-Zeile */
.pz-feats li.pz-feat-new{ margin:2px 0; padding:8px 10px; border-radius:10px; background:rgba(181,30,75,.05); border:1px solid rgba(181,30,75,.16); }
.pz-feats li.pz-feat-new i{ background:var(--crimson); color:#fff; }
.pz-feats li.pz-feat-opt{ color:#6b5f66; }
.pz-feats li.pz-feat-opt i{ background:transparent; border:1px solid rgba(46,12,22,.28); color:var(--maroon); font-size:12px; }
/* Start-Badge dauerhaft sichtbar (Maroon); bei Finder-Empfehlung Crimson wie gewohnt */
.s09f-card[data-pkg="start"] .s09f-badge{ opacity:1; }
.s09f-card[data-pkg="start"]:not(.reco) .s09f-badge{ background:var(--maroon); box-shadow:0 8px 20px rgba(46,12,22,.28); }
/* Creator-Circle-Highlight-Zeile (zart goldener Verlauf + goldener Rand + Stern) */
.pz-feats li.pz-feat-circle{ align-items:center; margin-top:3px; padding:9px 12px; border-radius:12px;
  background:linear-gradient(180deg, rgba(232,192,116,.14), rgba(232,192,116,.05));
  border:1px solid rgba(156,124,70,.35); }
.pz-feats li.pz-feat-circle i{ background:transparent; color:#9c7c46; font-size:13px; margin-top:0; }
.pz-feats li.pz-feat-circle b{ color:#5a3d10; }
.pz-feats li.pz-feat-circle span{ color:#5b4c31; }
/* "Plus"-Header über der Feature-Liste (Crimson-Uppercase mit feiner Unterlinie) */
.pz-plus{ margin:16px 0 2px; padding-bottom:8px; border-bottom:1px solid rgba(181,30,75,.18);
  font-family:var(--sans); font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase;
  font-weight:700; color:var(--crimson); }
.pz-plus.pz-plus-dark{ color:var(--maroon); border-bottom-color:rgba(46,12,22,.22); }
/* Premium VIP-Signal — dezente Auszeichnung im Kopf (kollidiert NICHT mit reco-Glow) */
.s09f-vip{ display:inline-block; vertical-align:middle; margin-left:8px; transform:translateY(-3px);
  font-family:var(--sans); font-size:10px; letter-spacing:1.4px; text-transform:uppercase; font-weight:800;
  color:#5a3d10; background:linear-gradient(180deg,#f3d891,#e8c074); padding:3px 9px; border-radius:14px;
  box-shadow:0 4px 10px rgba(156,124,70,.28); }
.pz-note{ font-size:11.5px; color:#9a8f86; text-align:center; margin-top:10px; }

/* Richtwert-Zeile */
.pz-guide{ max-width:560px; margin:32px auto 0; text-align:center; font-size:13.5px; color:#5b5158; line-height:1.6; }

/* In jedem Paket enthalten — Bento-Grid */
.pz-basis{ max-width:920px; margin:0 auto 30px; background:rgba(255,255,255,.72);
  border:1px solid #efe4d8; border-radius:16px; padding:20px 22px;
  box-shadow:0 10px 30px rgba(46,12,22,.05); }
.pz-bento-kick{ font-family:var(--sans); font-size:10.5px; letter-spacing:2px; text-transform:uppercase;
  color:var(--crimson); font-weight:600; margin-bottom:4px; }
.pz-basis-t{ font-family:var(--serif); font-weight:900; font-size:15.5px; color:var(--maroon);
  letter-spacing:.2px; margin-bottom:13px; }
.pz-bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pz-bento-c{ position:relative; display:flex; flex-direction:column; min-width:0;
  background:#fff; border:1px solid #efe6dd; border-radius:16px; padding:12px 14px;
  box-shadow:0 4px 14px rgba(46,12,22,.04);
  opacity:0; transform:translateY(16px);
  transition:opacity .55s ease, transform .55s ease, box-shadow .3s ease, border-color .3s ease; }
.pz-bento.is-visible .pz-bento-c{ opacity:1; transform:none; }
.pz-bento.is-visible .pz-bento-c:nth-child(1){ transition-delay:0s; }
.pz-bento.is-visible .pz-bento-c:nth-child(2){ transition-delay:.07s; }
.pz-bento.is-visible .pz-bento-c:nth-child(3){ transition-delay:.14s; }
.pz-bento.is-visible .pz-bento-c:nth-child(4){ transition-delay:.21s; }
.pz-bento.is-visible .pz-bento-c:nth-child(5){ transition-delay:.28s; }
.pz-bento.is-visible .pz-bento-c:nth-child(6){ transition-delay:.35s; }
.pz-bento-c:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(46,12,22,.1); border-color:#e7dcd0; }
.pz-bento.is-visible .pz-bento-c:hover{ transform:translateY(-4px); }
/* Anker: gross, links, 2 Spalten x 2 Reihen */
.pz-bento-anchor{ grid-column:1 / 3; grid-row:1 / 3; padding:16px 18px; justify-content:center;
  background:linear-gradient(155deg, rgba(181,30,75,.07) 0%, rgba(232,192,116,.06) 100%);
  border-color:rgba(181,30,75,.14); }
/* Anker-Kopf: Gold-Pille zuerst, dann Chip -> kompakte Reihenfolge */
.pz-bento-anchor .pz-bento-tag{ order:1; }
.pz-bento-anchor .pz-bento-chip{ order:2; }
.pz-bento-anchor .pz-bento-h{ order:3; }
.pz-bento-anchor .pz-bento-tx{ order:4; }
.pz-bento-chip{ display:flex; align-items:center; justify-content:center; width:29px; height:29px; flex:0 0 auto;
  border-radius:9px; background:rgba(232,192,116,.22); color:var(--crimson); margin-bottom:8px; }
.pz-bento-chip svg{ width:17px; height:17px; display:block; }
.pz-bento-anchor .pz-bento-chip{ width:38px; height:38px; border-radius:12px; margin-bottom:10px; }
.pz-bento-anchor .pz-bento-chip svg{ width:22px; height:22px; }
.pz-bento-tag{ align-self:flex-start; font-family:var(--sans); font-size:9.5px; letter-spacing:1px; text-transform:uppercase;
  font-weight:700; color:#5c4212; background:linear-gradient(180deg,#f3d891,#e8c074);
  padding:4px 10px; border-radius:20px; box-shadow:0 4px 10px rgba(156,124,70,.25); }
.pz-bento-anchor .pz-bento-tag{ margin-bottom:11px; }
.pz-bento-h{ font-family:var(--serif); font-weight:900; font-size:14px; color:#3a2f35; line-height:1.22; }
.pz-bento-anchor .pz-bento-h{ font-size:18px; line-height:1.18; color:var(--maroon); }
.pz-bento-tx{ font-family:var(--sans); font-size:12px; color:#7a6f76; line-height:1.4; margin-top:4px; }
.pz-bento-anchor .pz-bento-tx{ font-size:12.5px; line-height:1.45; margin-top:7px; max-width:46ch; }
@media (prefers-reduced-motion:reduce){
  .pz-bento-c{ opacity:1; transform:none; transition:none; }
  .pz-bento-c:hover{ transform:none; }
}
/* Bento Mobile: 2 Spalten, Anker volle Breite oben */
@media (max-width:900px){
  .pz-bento{ grid-template-columns:1fr 1fr; }
  .pz-bento-anchor{ grid-column:1 / 3; grid-row:auto; justify-content:flex-start; }
  .pz-bento-anchor .pz-bento-h{ margin-top:2px; }
}
/* Bento sehr schmal: 1 Spalte, alles gestapelt */
@media (max-width:380px){
  .pz-bento{ grid-template-columns:1fr; }
  .pz-bento-anchor{ grid-column:1 / 2; }
}

/* Vergleich-Headline */
.pz-bridge{ text-align:center; margin:68px auto 36px; max-width:820px;
  font-size:clamp(26px,5vw,42px); line-height:1.1; letter-spacing:-.4px; }
.pz-bridge span{ display:block; font-weight:900; }
.pz-bridge .d{ color:var(--maroon); }
.pz-bridge .c{ color:var(--crimson); }
/* Einzeilige Variante: Spans inline, nur "woanders" crimson, darf umbrechen */
.pz-bridge-1l{ margin:0 auto 34px; }
.pz-bridge-1l span{ display:inline; }

/* Vergleichs-Kacheln */
.pz-compare{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:920px; margin:0 auto; }
.pz-cmp{ position:relative; background:#fff; border:1px solid #efe6dd; border-radius:16px; padding:32px 20px 22px; text-align:center;
  box-shadow:0 10px 30px rgba(46,12,22,.05); }
.pz-cmp-pill{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--sans); font-size:10.5px; letter-spacing:1px; text-transform:uppercase; font-weight:600; color:#fff;
  background:var(--crimson); padding:6px 14px; border-radius:20px; box-shadow:0 8px 20px rgba(181,30,75,.4); }
.pz-cmp-k{ font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:#9a8f86; font-weight:700; }
.pz-cmp-v{ font-weight:900; font-size:22px; color:var(--maroon); margin-top:8px; }
.pz-cmp-u{ font-size:12px; font-weight:700; color:var(--crimson); letter-spacing:.3px; margin-top:4px; }
.pz-cmp-s{ font-size:12.5px; color:#7a6f76; margin-top:6px; line-height:1.45; }

/* Rechnungs-Block */
.pz-invoice{ max-width:760px; margin:26px auto 0; background:#fff; border:1px solid #efe6dd; border-radius:20px;
  padding:24px 30px; box-shadow:0 10px 30px rgba(46,12,22,.06); }
.pz-inv-head{ display:flex; justify-content:space-between; align-items:center; gap:14px; }
.pz-inv-title{ font-weight:900; font-size:19px; color:var(--maroon); }
.pz-inv-toggle{ font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--crimson); cursor:pointer; white-space:nowrap;
  background:transparent; border:1px solid rgba(181,30,75,.3); border-radius:20px; padding:7px 14px;
  transition:background .2s ease, color .2s ease, border-color .2s ease; }
.pz-inv-toggle:hover{ border-color:var(--crimson); background:rgba(181,30,75,.06); }
.pz-inv-toggle:focus-visible{ outline:2px solid var(--crimson); outline-offset:2px; }
.pz-inv-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.pz-inv-wrap.open{ grid-template-rows:1fr; }
.pz-inv-inner{ overflow:hidden; min-height:0; }
.pz-inv-rows{ margin-top:16px; }
.pz-inv-row{ display:flex; justify-content:space-between; gap:18px; align-items:baseline; padding:11px 0; border-bottom:1px dashed #e7dcd2; }
.pz-inv-row .l{ font-size:13.5px; color:#3a2f35; }
.pz-inv-row .r{ font-size:13.5px; font-weight:700; color:#9c7c46; white-space:nowrap; }
.pz-inv-sum{ border-top:2px solid rgba(46,12,22,.7); border-bottom:1px dashed #e7dcd2; margin-top:4px; padding-top:13px; }
.pz-inv-sum .l{ font-family:var(--serif); font-weight:700; color:var(--maroon); }
.pz-inv-sum .r{ font-family:var(--serif); font-size:15px; }
.pz-inv-us{ border-bottom:none; }
.pz-inv-us .l{ font-weight:700; color:var(--crimson); }
.pz-inv-us .r{ color:var(--crimson); font-family:var(--serif); font-size:15px; }
.pz-inv-foot{ font-size:11.5px; color:#9a8f86; margin-top:12px; }

/* Claim + Fine-Print */
.pz-claim{ text-align:center; font-weight:700; font-size:19px; color:var(--maroon); margin:38px auto 0; max-width:640px; }
.pz-fine{ text-align:center; font-size:12px; color:#9a8f86; margin-top:14px; }

@media (max-width:960px){
  .pz-compare{ grid-template-columns:1fr; max-width:520px; gap:26px; }
  .pz-bridge{ margin:56px auto 30px; }
  .pz-bridge-1l{ margin:0 auto 30px; }
  /* Touch-Targets ≥44px (Abnahme-Minor M1) */
  .s09f-chip{ padding:13px 18px; }
  .pz-inv-toggle{ padding:13px 16px; }
}
@media (max-width:520px){
  .pz-terms{ gap:8px; }
  .pz-term{ padding:13px 4px 11px; }
  .pz-term-t{ font-size:14px; }
  .pz-term-s{ font-size:10.5px; }
  .pz-basis{ padding:20px 18px; }
  .pz-invoice{ padding:20px 18px; }
  .pz-inv-head{ flex-wrap:wrap; }
  .pz-inv-row{ gap:12px; }
}
@media (prefers-reduced-motion:reduce){
  .pz-term, .pz-lad, .pz-strike, .pz-save .pz-gold-pill, .pz-inv-wrap, .pz-inv-toggle{ transition:none; }
}

/* ===== Sektion 10 · Gründer-Brief (helle Aurora-Bühne) ===== */
.s10b{ padding:100px 96px 108px; }
.s10b-wrap{ max-width:1180px; margin:0 auto; position:relative; z-index:2; }
.s10b-head{ text-align:center; max-width:820px; margin:0 auto 56px; }
.s10b-kick{ font-size:13px; letter-spacing:4px; text-transform:uppercase; color:var(--crimson); font-weight:600; }
.s10b-hl{ font-size:clamp(30px,6vw,52px); line-height:1.06; margin:16px 0 0; letter-spacing:-.5px; color:var(--maroon); }
.s10b-hl .thin{ font-weight:400; } .s10b-hl .thick{ font-weight:900; color:var(--crimson); }

.s10b-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start; }

/* --- Der Brief --- */
.s10b-letter{ position:relative; }
.s10b-p{ font-size:15px; line-height:1.75; color:#3f353b; max-width:560px; margin:0 0 20px; }
.s10b-p strong{ font-weight:600; color:var(--maroon); }
.s10b-mark{ background:linear-gradient(180deg,transparent 8%,rgba(232,192,140,.55) 8% 92%,transparent 92%);
  color:inherit; padding:0 .1em; border-radius:2px; box-decoration-break:clone; -webkit-box-decoration-break:clone;
  white-space:nowrap; }
/* Handschrift-Marginalie */
.s10b-margin{ font-family:'Caveat',cursive; font-weight:600; font-size:23px; color:var(--crimson);
  transform:rotate(-3.5deg); transform-origin:left center; margin:-4px 0 22px 8px; line-height:1.2; }
.s10b-arrow{ font-family:var(--sans); font-weight:400; }

/* Signatur */
.s10b-sign{ margin-top:34px; }
.s10b-sig{ width:230px; height:auto; display:block; overflow:visible; }
.s10b-sig-path{ stroke-dasharray:var(--len,900); stroke-dashoffset:var(--len,900); }
.s10b-sig.drawn .s10b-sig-path{ transition:stroke-dashoffset 1.9s cubic-bezier(.6,.02,.25,1); stroke-dashoffset:0; }
.s10b-sig.drawn .s10b-sig-flourish{ transition-delay:1.5s; transition-duration:.7s; }
@media (prefers-reduced-motion:reduce){
  .s10b-sig .s10b-sig-path{ stroke-dashoffset:0!important; transition:none!important; }
}
.s10b-signline{ margin-top:8px; font-size:14px; font-weight:500; letter-spacing:.3px; color:#6a5a61; }

/* --- Rechte Spalte: Polaroid-Fächer + Fakten --- */
.s10b-side{ display:flex; flex-direction:column; gap:32px; align-items:flex-start; min-width:0; max-width:100%; }

/* Gefächerter 3er-Stapel: Basis-Position via left/top, Auffächern NUR über transform (kein Layout-Shift).
   Initial liegen alle drei mittig gestapelt; .fanned (IO, einmalig) fächert gestaffelt auf. */
.s10b-fanwrap{ width:100%; }
.s10b-fan{ position:relative; width:460px; max-width:100%; height:296px; margin:6px auto 0; }
.s10b-pol{ position:absolute; margin:0; width:172px; background:#fff; padding:10px 10px 0; border-radius:4px;
  box-shadow:0 22px 50px rgba(46,12,22,.16), 0 2px 6px rgba(46,12,22,.08);
  transition:transform .6s cubic-bezier(.22,.9,.3,1.12); will-change:transform; }
.s10b-pol1{ left:0; top:14px; z-index:1; transform:translate(144px,-10px) rotate(-1.5deg); }
.s10b-pol2{ left:144px; top:0; z-index:2; transform:rotate(.8deg); }
.s10b-pol3{ left:288px; top:20px; z-index:3; transform:translate(-144px,-16px) rotate(2deg); }
.s10b-fan.fanned .s10b-pol1{ transform:rotate(-7deg); transition-delay:0s; }
.s10b-fan.fanned .s10b-pol2{ transform:rotate(4deg); transition-delay:.12s; }
.s10b-fan.fanned .s10b-pol3{ transform:rotate(-2deg); transition-delay:.24s; }
/* Hover: leichtes Anheben (erst nach dem Auffächern) */
.s10b-fan.fanned .s10b-pol:hover{ transition-delay:0s; transition-duration:.3s; }
.s10b-fan.fanned .s10b-pol1:hover{ transform:translateY(-8px) rotate(-7deg); }
.s10b-fan.fanned .s10b-pol2:hover{ transform:translateY(-8px) rotate(4deg); }
.s10b-fan.fanned .s10b-pol3:hover{ transform:translateY(-8px) rotate(-2deg); }
@media (prefers-reduced-motion:reduce){
  .s10b-pol{ transition:none!important; }
}
.s10b-photo{ position:relative; aspect-ratio:4/5; border-radius:2px; overflow:hidden;
  background:radial-gradient(120% 120% at 30% 20%,#f7ddc9,#eab99f 55%,#d98f8f);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.s10b-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.s10b-photo-note{ font-family:'Caveat',cursive; font-weight:600; font-size:19px; color:#7a3a2e; text-align:center; padding:0 12px; }
/* Handschrift-Caption im Polaroid-Rand (gleiche Optik wie die Marginalie) */
.s10b-pol-cap{ font-family:'Caveat',cursive; font-weight:600; font-size:18px; color:#7a3a2e;
  text-align:center; padding:9px 6px 12px; line-height:1.15; }
/* Caption des linken Polaroids in den sichtbaren Bereich ruecken (rechter Rand liegt unter Polaroid 2) */
.s10b-pol1 .s10b-pol-cap{ padding-right:44px; padding-left:4px; }
.s10b-fan-line{ margin-top:18px; text-align:center; font-family:var(--sans); font-size:13px; color:#6a5a61; letter-spacing:.2px; }
/* Schmale Desktop-Spalte: Fächer skalieren, damit pol3 nicht über das Fakten-Panel hinausragt */
@media (min-width:521px) and (max-width:1300px){
  .s10b-fan{ transform:scale(.76); transform-origin:top center; height:232px; }
}

.s10b-facts{ background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(24px) saturate(1.25); backdrop-filter:blur(24px) saturate(1.25);
  border:1px solid rgba(255,255,255,.8); border-radius:18px; padding:26px 26px 24px; width:100%;
  box-shadow:0 18px 44px rgba(46,12,22,.10); }
.s10b-facts-h{ font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:var(--crimson); font-weight:600; margin-bottom:16px; }
.s10b-facts-list{ list-style:none; margin:0; padding:0; }
.s10b-facts-list li{ font-size:14.5px; line-height:1.5; color:#4a3f45; padding:11px 0; border-top:1px solid rgba(46,12,22,.08); }
.s10b-facts-list li:first-child{ border-top:none; padding-top:0; }
.s10b-facts-list b{ font-family:var(--serif); font-weight:900; color:var(--crimson); font-size:17px; margin-right:6px; }

@media (max-width:1000px){
  .s10b{ padding:80px 24px 88px; }
  .s10b-grid{ grid-template-columns:1fr; gap:44px; }
  .s10b-p{ max-width:none; }
  .s10b-side{ align-items:stretch; }
}
@media (max-width:520px){
  .s10b{ padding:64px 20px 72px; }
  .s10b-facts{ padding:22px 20px; }
  /* Fächer wird zur kompakten Reihe: statisches Flex-Layout (kein Overflow, kein CLS),
     Auffächern weiterhin rein über transform */
  .s10b-fan{ display:flex; justify-content:center; align-items:flex-start; gap:10px;
    width:auto; height:auto; margin:6px 0 0; }
  .s10b-pol{ position:static; flex:1 1 0; min-width:0; max-width:118px; padding:7px 7px 0; }
  .s10b-pol1{ top:auto; left:auto; transform:translate(112%,-4px) rotate(-1.5deg); }
  .s10b-pol2{ top:auto; left:auto; margin-top:10px; }
  .s10b-pol3{ top:auto; left:auto; transform:translate(-112%,-4px) rotate(2deg); }
  .s10b-fan.fanned .s10b-pol1{ transform:rotate(-4deg); }
  .s10b-fan.fanned .s10b-pol2{ transform:rotate(2.5deg); }
  .s10b-fan.fanned .s10b-pol3{ transform:rotate(-1.5deg); }
  .s10b-pol-cap{ font-size:13.5px; padding:6px 2px 9px; }
  .s10b-pol1 .s10b-pol-cap{ padding-right:2px; padding-left:2px; }
  .s10b-photo-note{ font-size:14px; padding:0 6px; }
  .s10b-fan-line{ margin-top:14px; }
}

/* ===== Sektion 11 · FAQ ===== */
.s11{ padding:92px 96px 100px; display:grid; grid-template-columns:0.8fr 1.2fr; gap:60px; align-items:start; }
.s11-kick{ font-size:13px; letter-spacing:4px; text-transform:uppercase; color:var(--crimson); font-weight:600; }
.s11-hl{ font-size:clamp(32px,7vw,50px); line-height:1.06; color:var(--maroon); margin:16px 0 22px; letter-spacing:-.5px; }
.s11-hl .thick{ color:var(--crimson); }
.s11-ask{ font-size:16px; color:#5b5158; line-height:1.6; max-width:300px; }
.s11-nope{ margin-top:22px; font-family:var(--serif); font-weight:700; font-size:16px; color:var(--maroon); }
.s11-btn{ display:inline-block; margin-top:12px; background:var(--crimson); color:#fff; padding:13px 26px; border-radius:28px; font-size:15px; font-weight:500; text-decoration:none; }
.s11 .item{ background:#fff; border:1px solid #efe6dd; border-radius:14px; margin-bottom:14px; box-shadow:0 6px 18px rgba(46,12,22,.04); transition:border-color .3s ease, box-shadow .3s ease; }
.s11 .item.open{ border-color:#e7b9c8; box-shadow:0 10px 26px rgba(181,30,75,.08); }
/* .q ist jetzt ein <button>: Reset + volle Breite */
.s11 .item .q{ display:flex; justify-content:space-between; align-items:center; gap:20px; width:100%;
  padding:22px 26px; border:none; background:none; text-align:left; cursor:pointer;
  font-family:var(--serif); font-weight:700; font-size:18px; color:var(--maroon); }
.s11 .item .q:focus-visible{ outline:2px solid var(--crimson); outline-offset:-3px; border-radius:14px; }
.s11 .item .q-txt{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:10px; }
.s11-badge{ display:inline-block; font-family:var(--sans); font-weight:600; font-size:10.5px; letter-spacing:1.2px;
  text-transform:uppercase; color:#fff; background:var(--crimson); padding:3px 9px; border-radius:20px;
  box-shadow:0 4px 10px rgba(181,30,75,.28); }
.s11 .item .q .pm{ position:relative; width:28px; height:28px; border-radius:50%; background:#f6e6ec; color:var(--crimson);
  flex:0 0 auto; transition:transform .3s ease, background .3s ease; }
.s11 .item .q .pm::before,
.s11 .item .q .pm::after{ content:""; position:absolute; top:50%; left:50%; width:12px; height:2px; border-radius:2px;
  background:var(--crimson); transform:translate(-50%,-50%); transition:transform .3s ease, opacity .3s ease; }
.s11 .item .q .pm::after{ transform:translate(-50%,-50%) rotate(90deg); }        /* + : vertikaler Strich */
.s11 .item.open .q .pm{ background:var(--crimson); }
.s11 .item.open .q .pm::before,
.s11 .item.open .q .pm::after{ background:#fff; }
.s11 .item.open .q .pm::after{ transform:translate(-50%,-50%) rotate(180deg); opacity:0; }  /* dreht weich zu − */
/* Weiche Höhen-Animation via grid-template-rows 0fr -> 1fr */
.s11 .item .a-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.s11 .item.open .a-wrap{ grid-template-rows:1fr; }
.s11 .item .a-wrap > .a{ overflow:hidden; min-height:0; font-size:15px; color:#5b5158; line-height:1.6;
  padding:0 26px; margin-top:0; }
.s11 .item.open .a{ padding-bottom:22px; }
@media (prefers-reduced-motion:reduce){
  .s11 .item .a-wrap{ transition:none; }
  .s11 .item .q .pm, .s11 .item .q .pm::before, .s11 .item .q .pm::after{ transition:none; }
}

@media (max-width:900px){
  .s11{ padding:72px 24px 80px; grid-template-columns:1fr; gap:36px; }
  .s11-ask{ max-width:none; }
}
@media (max-width:520px){
  .s11{ padding:64px 20px 68px; gap:28px; }
  .s11 .item{ padding:18px 20px; }
  .s11 .item .q{ font-size:16px; gap:14px; }
}

/* ===== Sektion 12 · Die Vereinbarung (Schluss-CTA + Formular + 19:04-Echo) ===== */
.s12v{ position:relative; overflow:hidden; padding:110px 24px 130px; color:var(--cream); }
.s12v-bg{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 90% at 62% 22%,#4a1024,#2e0c16 52%,#160609); }
.s12v-inner{ position:relative; z-index:2; max-width:1040px; margin:0 auto; }

.s12v-head{ text-align:center; max-width:720px; margin:0 auto 46px; }
.s12v-h{ font-family:var(--serif); font-size:clamp(34px,6.6vw,62px); line-height:1.04; letter-spacing:-1px; margin:0; }
.s12v-h .thin{ font-weight:300; color:rgba(251,247,241,.94); }
.s12v-h .thick{ font-weight:900; color:#ef8aa6; }
.s12v-sub{ font-size:clamp(16px,2.2vw,20px); color:rgba(251,247,241,.72); margin:20px auto 0; max-width:540px; line-height:1.55; }

/* Bühne: Doc-Karte zentriert, 19:04-Karte schwebt rechts oben versetzt (überlappt nur die Doc-Ecke) */
.s12v-stage{ position:relative; max-width:820px; margin:0 auto; padding-top:250px; }

/* --- 19:04-Karte (Echo der S02-Uhr) · schwebende Glas-Karte, überlappt die Doc-Ecke --- */
.s12v-clock{ position:absolute; z-index:12; top:0; right:-28px; width:270px; padding:20px 22px 21px; text-align:left;
  border-radius:20px; color:var(--ink); overflow:hidden;
  background:linear-gradient(180deg,#fffdfa,#f9f2ea);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 26px 60px rgba(10,3,6,.5), inset 0 1px 0 rgba(255,255,255,.9);
  animation:s12vFloat 6.5s ease-in-out infinite; }
.s12v-clock::before{ content:""; position:absolute; top:0; left:0; right:0; height:40%;
  background:linear-gradient(165deg,rgba(255,255,255,.55),transparent 70%); pointer-events:none; }
.s12v-clock > *{ position:relative; z-index:1; }
.s12v-clk-time{ font-family:var(--serif); font-weight:900; font-size:46px; line-height:1; letter-spacing:-1.5px; color:#2e0c16; }
.s12v-clk-label{ font-size:10.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:#a97f52; margin-top:7px; }
.s12v-clk-rows{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.s12v-clk-row{ font-size:13px; line-height:1.35; color:#4a3138; display:flex; gap:8px; align-items:flex-start;
  opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; }
.s12v-clk-row.in{ opacity:1; transform:none; }
.s12v-clk-ico{ flex:0 0 auto; }
.s12v-clk-gold{ margin-top:16px; padding-top:14px; border-top:1px solid rgba(46,12,22,.1);
  font-family:var(--serif); font-weight:700; font-size:14.5px; color:#b5832a; }
@keyframes s12vFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }

/* --- Die Vereinbarungs-Karte (helles Dokument) --- */
.s12v-doc{ position:relative; z-index:3; background:linear-gradient(180deg,#fffdfa,#fbf5ee); color:var(--ink);
  border-radius:26px; padding:40px; box-shadow:0 40px 90px rgba(10,3,6,.5), 0 2px 0 rgba(255,255,255,.7) inset;
  display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.s12v-doc-kick{ font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#b08a5f; margin-bottom:20px; }

/* Klauseln mit Du/Wir-Chips */
.s12v-agreement{ border-right:1px solid rgba(46,12,22,.09); padding-right:36px; }
.s12v-clauses{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.s12v-clause{ display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.5; color:#3a2a30; }
.s12v-clause-t b{ color:#26222a; font-weight:700; }
.s12v-chip{ flex:0 0 auto; font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; margin-top:1px; }
.s12v-chip-du{ background:rgba(181,30,75,.1); color:var(--crimson); }
.s12v-chip-wir{ background:rgba(46,12,22,.86); color:var(--cream); }

.s12v-sign{ margin-top:30px; padding-top:22px; border-top:1px dashed rgba(46,12,22,.16); }
.s12v-sign-label{ font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:#b08a5f; }
.s12v-sigrow{ display:flex; gap:38px; flex-wrap:wrap; align-items:flex-end; }
.s12v-sigcol{ flex:0 1 auto; }
.s12v-sig{ width:200px; height:auto; display:block; overflow:visible; margin:6px 0 2px; }
.s12v-sig2{ width:186px; }
.s12v-sig-path{ stroke-dasharray:var(--len,900); stroke-dashoffset:var(--len,900); }
.s12v-sig.drawn .s12v-sig-path{ transition:stroke-dashoffset 1.9s cubic-bezier(.6,.02,.25,1); stroke-dashoffset:0; }
.s12v-sig.drawn .s12v-sig-flourish{ transition-delay:1.5s; transition-duration:.7s; }
.s12v-sign-cav{ font-family:'Caveat',cursive; font-weight:600; font-size:22px; color:#7a3a2e; }

/* Dein nächster Schritt · CTA-Block zur Bewerbung (ersetzt das alte Formular) */
.s12v-side{ padding-left:0; }
.s12v-cta{ display:flex; flex-direction:column; gap:18px; justify-content:center; min-height:260px; height:calc(100% - 40px); }
.s12v-cta-h{ font-size:clamp(22px,2.8vw,30px); line-height:1.18; letter-spacing:-.4px; color:var(--maroon); margin:0; }
.s12v-cta-h .thin{ font-weight:300; }
.s12v-cta-h b{ font-weight:900; }

.s12v-seat{ color:var(--ink); font-size:13.5px; font-weight:600; padding:11px 14px; border-radius:12px; text-align:center;
  background:rgba(181,30,75,.07); border:1px solid rgba(181,30,75,.22); }
.s12v-seat b{ color:var(--crimson); }

.s12v-cta-btn{ display:block; text-align:center; text-decoration:none; background:var(--crimson); color:#fff;
  font-family:var(--sans); font-size:17px; font-weight:600; padding:16px 26px; border-radius:14px;
  box-shadow:0 14px 30px rgba(181,30,75,.24);
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease; }
.s12v-cta-btn:hover{ background:#c92457; box-shadow:0 16px 34px rgba(181,30,75,.34); transform:translateY(-1px); }
.s12v-cta-micro{ font-size:12px; color:#9a8590; text-align:center; margin-top:-6px; }

@media (max-width:900px){
  .s12v{ padding:72px 20px 90px; }
  .s12v-head{ margin-bottom:28px; }
  .s12v-stage{ padding-top:0; }
  /* Alles gestapelt: Headline -> 19:04-Karte -> Vereinbarung/Formular */
  .s12v-clock{ position:relative; top:auto; right:auto; width:100%; max-width:340px; margin:0 auto 26px;
    animation:none; }
  .s12v-doc{ grid-template-columns:1fr; gap:0; padding:28px 22px; }
  .s12v-agreement{ border-right:0; padding-right:0; border-bottom:1px solid rgba(46,12,22,.1); padding-bottom:28px; margin-bottom:28px; }
}
@media (max-width:520px){
  .s12v-doc{ padding:24px 18px; }
  .s12v-cta{ min-height:0; height:auto; }
}
@media (prefers-reduced-motion:reduce){
  .s12v-clock{ animation:none; }
  .s12v-clk-row{ opacity:1; transform:none; transition:none; }
  .s12v-sig .s12v-sig-path{ stroke-dashoffset:0!important; transition:none!important; }
}

/* ===== Sektion 13 · Premium-Footer mit Riesen-Wortmarke ===== */
.s13p{ position:relative; overflow:hidden; background:#160609; color:var(--cream); padding:74px 40px 0; }
.s13p-inner{ position:relative; z-index:2; max-width:1120px; margin:0 auto; }
.s13p-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px;
  padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.12); }
.s13p-col h4{ font-family:var(--serif); font-weight:700; font-size:12px; letter-spacing:1.4px; text-transform:uppercase; color:var(--greige); margin:0 0 16px; }
.s13p-col a{ display:block; font-size:15px; color:#e6d5db; margin-bottom:11px; text-decoration:none; transition:color .16s ease; }
.s13p-col a:hover{ color:#fff; }
.s13p-copy{ padding:22px 0 30px; font-size:13px; color:#a98fa0; }

/* Riesen-Wortmarke: unten angeschnitten, letzter Brand-Moment */
.s13p-wordmark{ position:relative; z-index:1; text-align:center; font-family:var(--serif); font-weight:900;
  font-size:clamp(72px,13vw,220px); line-height:.8; letter-spacing:.02em; color:rgba(251,247,241,.14);
  margin-bottom:-.18em; user-select:none; pointer-events:none; white-space:nowrap; }

@media (max-width:900px){
  .s13p{ padding:56px 24px 0; }
  .s13p-cols{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:520px){
  .s13p{ padding:48px 20px 0; }
  .s13p-cols{ grid-template-columns:1fr; gap:26px; }
}

/* ===== Premium-Optik-Sprache: Aurora + Liquid-Glass + Tilt ===== */
.aurora{position:absolute;inset:-25%;z-index:0;pointer-events:none;}
.aurora .ab{position:absolute;border-radius:50%;filter:blur(64px);}
.aurora .ab1{width:42vw;height:42vw;background:radial-gradient(circle,rgba(181,30,75,.42),transparent 62%);top:-12%;left:-6%;animation:salDriftA 17s ease-in-out infinite;}
.aurora .ab2{width:38vw;height:38vw;background:radial-gradient(circle,rgba(224,122,150,.40),transparent 62%);top:6%;right:-9%;animation:salDriftB 22s ease-in-out infinite;}
.aurora .ab3{width:34vw;height:34vw;background:radial-gradient(circle,rgba(232,192,140,.38),transparent 62%);bottom:-14%;left:34%;animation:salDriftC 19s ease-in-out infinite;}
.aurora .ab4{width:30vw;height:30vw;background:radial-gradient(circle,rgba(247,180,170,.36),transparent 62%);bottom:4%;left:2%;animation:salDriftB 25s ease-in-out infinite reverse;}
@keyframes salDriftA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,5vw) scale(1.25)}}
@keyframes salDriftB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,4vw) scale(1.2)}}
@keyframes salDriftC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(3vw,-6vw) scale(1.32)}}
.sec-light{position:relative;overflow:hidden;background:linear-gradient(160deg,#fdf6f0,#f7e9e4 55%,#f1dad6);}
.sec-light > *{position:relative;z-index:2;}
.glass{position:relative;overflow:hidden;border-radius:22px;
  background:rgba(255,255,255,.46);
  -webkit-backdrop-filter:blur(28px) saturate(125%);backdrop-filter:blur(28px) saturate(125%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 20px 50px rgba(46,12,22,.14), inset 0 1px 0 rgba(255,255,255,.9);}
.glass::before{content:"";position:absolute;top:0;left:0;right:45%;height:52%;background:linear-gradient(160deg,rgba(255,255,255,.55),transparent);pointer-events:none;}
.tilt{transform-style:preserve-3d;transition:transform .14s ease;will-change:transform;}
.tilt-scene{perspective:1300px;}
@media (prefers-reduced-motion:reduce){ .aurora .ab{animation:none!important} .tilt{transition:none!important} }

/* ===== Schloss-Sequenz: Übergang vor dem Öffnen der Bewerbung ===== */
/* ================= Schloss-Sequenz (Variante A · Übergang CTA → Bewerbung) ================= */
#bwLockSeq{ position:fixed; inset:0; z-index:240; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
background:radial-gradient(120% 100% at 50% 30%, #4a1024, #2e0c16 75%);
opacity:0; transition:opacity .35s ease; font-family:var(--sans); text-align:center; padding:24px; }
#bwLockSeq.on{ opacity:1; }
#bwLockSeq[hidden]{ display:none; }
.bwl-lock{ position:relative; width:92px; height:98px; }
.bwl-shackle{ position:absolute; left:50%; top:0; width:56px; height:52px; margin-left:-28px;
border:7px solid var(--gold); border-bottom:0; border-radius:28px 28px 0 0;
transform:translateY(-14px); transition:transform .28s cubic-bezier(.4,1.6,.5,1); }
#bwLockSeq.shut .bwl-shackle{ transform:translateY(0); }
.bwl-body{ position:absolute; left:0; right:0; bottom:0; height:58px; border-radius:12px;
background:linear-gradient(160deg,#f0cf8d,#d9a84e);
box-shadow:inset 0 2px 4px rgba(255,255,255,.5), inset 0 -3px 6px rgba(120,80,20,.35), 0 10px 26px rgba(0,0,0,.35); }
.bwl-hole{ position:absolute; left:50%; bottom:20px; width:11px; height:16px; margin-left:-5.5px; background:#5a3c14; border-radius:6px 6px 3px 3px; }
.bwl-ring{ position:absolute; left:50%; top:56%; width:130px; height:130px; border-radius:50%; margin:-65px 0 0 -65px;
border:2px solid rgba(232,192,116,0); transform:scale(.6); transition:transform .5s ease, border-color .3s; pointer-events:none; }
#bwLockSeq.done .bwl-ring{ transform:scale(1); border-color:rgba(232,192,116,.35); }
.bwl-t{ color:#fbf7f1; font-weight:800; font-size:16px; opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s; }
.bwl-s{ color:rgba(251,247,241,.75); font-size:12px; margin-top:-8px; opacity:0; transition:opacity .3s .05s; }
#bwLockSeq.done .bwl-t{ opacity:1; transform:none; }
#bwLockSeq.done .bwl-s{ opacity:1; }

/* ================= Bewerbung · Overlay (portiert) ================= */
#bewerbung{ position:fixed; inset:0; z-index:250; background:var(--cream); overflow:hidden;
font-family:var(--sans); color:var(--ink); }
#bewerbung [hidden]{ display:none!important; }
html.bw-open, html.bw-open body{ overflow:hidden; }

/* Aurora-Hintergrund (2 helle Blobs, Stil wie .s02f-glow) */
.bw-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bw-blob{ position:absolute; border-radius:50%; filter:blur(90px); }
.bw-blob1{ width:56vw; height:56vw; max-width:920px; max-height:920px;
background:radial-gradient(circle,rgba(181,30,75,.13),transparent 62%);
top:-18%; left:-12%; animation:salDriftA 21s ease-in-out infinite; }
.bw-blob2{ width:48vw; height:48vw; max-width:760px; max-height:760px;
background:radial-gradient(circle,rgba(232,192,140,.20),transparent 62%);
bottom:-16%; right:-10%; animation:salDriftB 26s ease-in-out infinite; }

.bw-shell{ position:relative; z-index:2; height:100%; max-width:1180px; margin:0 auto;
display:flex; flex-direction:column; padding:18px clamp(16px,4vw,40px) 0; }

/* Kopfzeile */
.bw-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex:0 0 auto; }
.bw-wm{ font-family:var(--serif); font-weight:900; font-size:15px; letter-spacing:.26em; color:var(--maroon); }
.bw-top-mid{ flex:1; text-align:center; font-size:10.5px; font-weight:600; letter-spacing:2px;
text-transform:uppercase; color:#8a7280; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bw-close{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; cursor:pointer;
display:flex; align-items:center; justify-content:center; font-size:15px; line-height:1; color:var(--maroon);
background:rgba(255,255,255,.6); -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
border:1px solid rgba(255,255,255,.8); box-shadow:0 8px 20px rgba(46,12,22,.08);
transition:background .18s ease, transform .18s ease; }
.bw-close:hover{ background:#fff; transform:scale(1.06); }

/* Fortschritts-Ring (zeigt Schritt 1–4 + Füllung) */
.bw-head-txt{ flex:1; min-width:0; }
.bw-ring{ position:relative; width:42px; height:42px; flex:0 0 auto; }
.bw-ring svg{ width:42px; height:42px; display:block; transform:rotate(-90deg); }
.bw-ring circle{ fill:none; stroke-width:3.4; }
.bw-ring-bg{ stroke:rgba(46,12,22,.1); }
.bw-ring-fg{ stroke:var(--crimson); stroke-linecap:round; stroke-dasharray:113.1; stroke-dashoffset:99.5; transition:stroke-dashoffset .5s cubic-bezier(.4,1,.4,1); }
.bw-ring-n{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:900; font-size:14px; color:var(--maroon); }

/* Fortschritt: Schritt-Label (linearer Balken deaktiviert — Ring übernimmt) */
.bw-prog{ flex:0 0 auto; margin-top:12px; }
.bw-prog-label{ font-size:11.5px; letter-spacing:.6px; color:#8a7280; margin-bottom:0; }
.bw-prog-track{ display:none; }
.bw-prog-fill{ height:100%; border-radius:2px; background:var(--crimson); width:12%; transition:width .4s ease; }

/* Mehrfachauswahl (F1): Häkchen-Badge auf gewählten Karten */
.bw-screen[data-screen="f1"] .bw-card{ padding-top:16px; }
.bw-screen[data-screen="f1"] .bw-card::after{ content:""; position:absolute; top:8px; right:9px; width:16px; height:16px; border-radius:50%;
border:1.5px solid rgba(46,12,22,.16); background:#fff; transition:background .18s ease, border-color .18s ease; }
.bw-screen[data-screen="f1"] .bw-card.sel::after{ content:"✓"; color:#fff; font-size:10px; font-weight:800; line-height:16px; text-align:center;
background:var(--crimson); border-color:var(--crimson); }
/* Mobil-Zusammenfassung (nur <900px sichtbar) */
.bw-mini{ display:none; }

/* Split-Layout */
.bw-main{ flex:1; min-height:0; display:grid; grid-template-columns:36% minmax(0,1fr);
gap:clamp(24px,4vw,56px); padding-top:24px; }

/* Die Mappe (weißes Dokument, Crimson-Rücken) */
.bw-mappe{ position:relative; align-self:stretch; overflow-y:auto; color:var(--ink);
background:linear-gradient(180deg,#fffdfa,#fbf5ee);
border-radius:4px 14px 14px 4px; border-left:3px solid var(--crimson);
box-shadow:0 24px 60px rgba(46,12,22,.13), inset 0 1px 0 rgba(255,255,255,.9);
padding:24px 24px 26px; margin-bottom:18px; }
.bw-mappe-kick{ font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--crimson); }
.bw-mappe-title{ font-family:var(--serif); font-weight:900; font-size:21px; letter-spacing:-.3px; color:var(--maroon); margin:8px 0 14px; }
.bw-mappe-title .bw-x{ font-weight:400; color:#b08a5f; }
.bw-mrow{ display:flex; justify-content:space-between; align-items:baseline; gap:12px;
padding:8px 0; border-bottom:1px dashed rgba(46,12,22,.14); font-size:13px;
opacity:0; transform:translateX(-14px); transition:opacity .35s ease, transform .35s ease; }
.bw-mrow.in{ opacity:1; transform:none; }
.bw-mrow .k{ flex:0 0 auto; color:#8a7280; }
.bw-mrow .v{ color:#7c1636; font-weight:600; text-align:right; }
.bw-mappe-hand{ font-family:'Caveat',cursive; font-weight:600; font-size:19px; color:#7a3a2e; margin-top:16px; }
.bw-stamp{ display:inline-block; margin-top:16px; padding:8px 14px; border:3px solid var(--crimson); border-radius:6px;
font-family:var(--serif); font-weight:900; font-size:14px; letter-spacing:2px; color:var(--crimson);
transform:rotate(-8deg); }
.bw-stamp.pop{ animation:bwStampPop .45s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes bwStampPop{ 0%{ transform:rotate(-8deg) scale(1.9); opacity:0 } 100%{ transform:rotate(-8deg) scale(1); opacity:1 } }

/* Frage-Screens (richtungslogischer Slide+Fade, nur transform/opacity) */
.bw-stage{ position:relative; min-height:0; }
.bw-screen{ position:absolute; inset:0; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch;
opacity:0; visibility:hidden; pointer-events:none; padding:6px 6px 46px 2px;
transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s; }
.bw-screen.on{ opacity:1; visibility:visible; pointer-events:auto; transform:none;
transition:opacity .3s ease, transform .3s ease; }
.bw-screen.off-l{ transform:translateX(-46px); }
.bw-screen.off-r{ transform:translateX(46px); }
.bw-screen-in{ max-width:660px; }
.bw-body{ min-height:0; }
.bw-qcount{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#a2968a; }

.bw-h{ font-family:var(--serif); font-weight:300; font-size:clamp(26px,3.2vw,38px); line-height:1.1;
letter-spacing:-.6px; color:var(--maroon); margin:0 0 14px; outline:none; }
.bw-h b{ font-weight:900; }
.bw-h .thin{ font-weight:300; }
.bw-h-note{ font-family:var(--sans); font-weight:400; font-size:.45em; letter-spacing:0; color:#8a7280; white-space:nowrap; }
.bw-sub{ font-size:15.5px; line-height:1.6; color:#5b5158; margin:0 0 6px; max-width:52ch; }
.bw-fine{ font-size:12px; color:#9a8590; margin-top:14px; }
.bw-hint{ font-size:12px; color:#9a8590; margin-top:12px; }
.bw-seatchip{ display:inline-flex; align-items:center; margin-top:16px; padding:9px 16px; border-radius:999px;
font-size:13px; font-weight:600; color:#7c1636;
background:rgba(181,30,75,.08); border:1px solid rgba(181,30,75,.25); }
.bw-seatchip b{ color:var(--crimson); }

/* Antwort-Karten (Liquid-Glass, Icon + Label) */
.bw-cards{ display:grid; gap:12px; margin:18px 0 2px; }
.bw-c4{ grid-template-columns:repeat(4,1fr); }
.bw-c3{ grid-template-columns:repeat(3,1fr); }
.bw-c2{ grid-template-columns:repeat(2,1fr); }
.bw-list{ grid-template-columns:1fr; max-width:480px; }
.bw-card{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
min-height:56px; padding:14px 10px; border-radius:16px; cursor:pointer;
background:rgba(255,255,255,.6); -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
border:2px solid rgba(255,255,255,.8); box-shadow:0 10px 26px rgba(46,12,22,.07);
font-family:var(--sans); font-size:14px; font-weight:500; color:var(--ink); text-align:center; line-height:1.3;
transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.bw-card .ico{ font-size:24px; line-height:1; }
.bw-card:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(46,12,22,.11); }
.bw-card.sel{ border-color:var(--crimson); background:rgba(181,30,75,.08); color:#8a1a3c;
font-weight:600; transform:scale(1.03); box-shadow:0 16px 34px rgba(181,30,75,.16); }
.bw-list .bw-card{ flex-direction:row; justify-content:flex-start; text-align:left; padding:13px 18px; }

/* Ziel-Chips (Multi-Select, max. 2) */
.bw-chips{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 10px; }
.bw-chip{ min-height:44px; padding:11px 18px; border-radius:999px; cursor:pointer;
background:rgba(255,255,255,.6); -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
border:2px solid rgba(255,255,255,.8); box-shadow:0 8px 20px rgba(46,12,22,.06);
font-family:var(--sans); font-size:14px; font-weight:500; color:var(--ink);
transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease; }
.bw-chip:hover{ transform:translateY(-1px); }
.bw-chip.sel{ border-color:var(--crimson); background:rgba(181,30,75,.08); color:#8a1a3c;
font-weight:600; transform:scale(1.03); box-shadow:0 12px 26px rgba(181,30,75,.14); }
.bw-chip[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }
.bw-counter{ font-size:12.5px; color:#8a7280; }

/* Felder */
.bw-field{ display:flex; flex-direction:column; gap:6px; margin-top:16px; max-width:440px; }
.bw-label{ font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:#8a7280; }
.bw-label .opt{ font-weight:400; letter-spacing:.4px; color:#a89aa2; text-transform:none; }
.bw-micro{ font-size:11.5px; color:#9a8590; margin-top:-2px; }
.bw-input{ width:100%; min-height:44px; font-family:var(--sans); font-size:15px; color:var(--ink);
background:#fff; border:1px solid rgba(46,12,22,.16); border-radius:12px; padding:11px 14px; }
textarea.bw-input{ resize:vertical; min-height:72px; }
.bw-input:focus{ outline:none; border-color:var(--crimson); box-shadow:0 0 0 3px rgba(181,30,75,.14); }
.bw-input.inv,.bw-input[aria-invalid="true"]{ border-color:var(--crimson); box-shadow:0 0 0 3px rgba(181,30,75,.16); }

/* Kontakt: eine gruppierte Glas-Karte */
.bw-kform{ margin-top:18px; max-width:560px; padding:20px 22px 22px; border-radius:20px;
background:rgba(255,255,255,.6); -webkit-backdrop-filter:blur(20px) saturate(1.2); backdrop-filter:blur(20px) saturate(1.2);
border:1px solid rgba(255,255,255,.8); box-shadow:0 18px 44px rgba(46,12,22,.1);
display:flex; flex-direction:column; }
.bw-kform .bw-field{ max-width:none; margin-top:0; }
.bw-kform .bw-field + .bw-field{ margin-top:14px; }
@media (min-width:481px){
.bw-kform .bw-fieldrow > .bw-field + .bw-field{ margin-top:0; }
}
.bw-check{ display:flex; gap:10px; align-items:flex-start; margin-top:18px;
font-size:12.5px; line-height:1.55; color:#6a5a61; cursor:pointer; }
.bw-check input{ flex:0 0 auto; width:18px; height:18px; margin-top:2px; accent-color:var(--crimson); }
.bw-check a{ color:var(--crimson); }
.bw-submit{ margin-top:18px; width:100%; }
.bw-submit-error{ margin-top:16px; }

/* Fehler + Notizen */
.bw-err,.bw-ferr{ margin:10px 0 0; font-size:12.5px; font-weight:600; color:var(--crimson); }
.bw-ferr{ margin-top:2px; }
.bw-note{ display:inline-block; margin:0 0 14px; padding:10px 14px; border-radius:12px; font-size:13px; line-height:1.5;
background:rgba(232,192,140,.18); border:1px solid rgba(232,192,140,.5); color:#8a5a12; }

/* Fußzeile der Screens: Zurück (dezent) + Weiter (Crimson-Pill / Ghost sekundär) */
.bw-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:22px; }
.bw-back{ background:none; border:0; cursor:pointer; min-height:44px; padding:10px 6px;
font-family:var(--sans); font-size:13.5px; color:#8a7280; transition:color .16s ease; }
.bw-back:hover{ color:var(--maroon); text-decoration:underline; }
.bw-next{ display:inline-block; min-height:48px; padding:13px 26px; border:0; border-radius:999px; cursor:pointer;
background:var(--crimson); color:#fff; font-family:var(--sans); font-size:15px; font-weight:600;
box-shadow:0 12px 26px rgba(181,30,75,.22);
transition:background .2s ease, transform .12s ease, box-shadow .2s ease; }
.bw-next:hover{ background:#c92457; transform:translateY(-1px); box-shadow:0 14px 30px rgba(181,30,75,.3); }
.bw-next[disabled]{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.bw-ghost{ background:rgba(255,255,255,.55); color:var(--maroon); border:1px solid rgba(46,12,22,.18); box-shadow:none; }
.bw-ghost:hover{ background:#fff; box-shadow:0 8px 20px rgba(46,12,22,.08); }

/* Calendly-Container: erst in Schritt 5 befüllt */
.bw-termin-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:22px; }
.bw-termin-actions .bw-next{ flex:1 1 230px; text-align:center; }
.bw-calendly{ min-height:720px; border-radius:16px; overflow:hidden; }

/* Exit-Sheet */
.bw-exit{ position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center;
padding:24px; background:rgba(46,12,22,.28);
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.bw-exit-card{ max-width:400px; width:100%; padding:26px 26px 24px; border-radius:20px;
background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(24px) saturate(1.2); backdrop-filter:blur(24px) saturate(1.2);
border:1px solid rgba(255,255,255,.9); box-shadow:0 30px 70px rgba(46,12,22,.3); }
.bw-exit-t{ margin:0 0 18px; font-size:15px; line-height:1.55; color:var(--ink); }
.bw-exit-t b{ font-family:var(--serif); font-weight:900; color:var(--maroon); }
.bw-exit-btns{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.bw-exit-leave{ background:none; border:0; cursor:pointer; min-height:44px; padding:10px 8px;
font-family:var(--sans); font-size:13.5px; color:#8a7280; }
.bw-exit-leave:hover{ color:var(--maroon); text-decoration:underline; }

/* Fokus-Sichtbarkeit (Tastatur) */
.bw-card:focus-visible,.bw-chip:focus-visible,.bw-next:focus-visible,.bw-back:focus-visible,
.bw-close:focus-visible,.bw-exit-leave:focus-visible{ outline:2px solid var(--crimson); outline-offset:2px; }

/* Mobil (<900px): Mappe -> kompakte Zeile unterm Balken, Fragen full-width */
@media (max-width:899px){
.bw-shell{ padding:14px 18px 0; }
.bw-mini:not([hidden]){ display:block; margin-top:8px; font-size:11px; color:#7c1636; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bw-mini .bw-mini-stamp{ color:var(--crimson); font-weight:800; letter-spacing:.5px; }
.bw-main{ grid-template-columns:minmax(0,1fr); padding-top:16px; }
.bw-mappe{ display:none!important; }
.bw-c4{ grid-template-columns:repeat(2,1fr); }
.bw-c3,.bw-c2{ grid-template-columns:1fr; }
.bw-h{ font-size:clamp(24px,6.6vw,30px); }
.bw-field{ max-width:none; }
.bw-input{ font-size:16px; } /* iOS: kein Auto-Zoom */
.bw-kform{ max-width:none; padding:18px 16px 20px; }
.bw-screen{ padding:4px 2px 40px; }
/* Full-width-Karten: Selected-Scale dezenter, damit nichts an der Kante clippt */
.bw-card.sel,.bw-chip.sel{ transform:scale(1.015); }
.bw-calendly{ min-height:74vh; }
}
@media (max-width:520px){
/* "Einer von 100 Plätzen" passt sonst nicht neben Wortmarke + Schließen (Ellipsis-Fund) */
.bw-top-mid{ letter-spacing:1px; font-size:9.5px; }
.bw-top-mid .bw-mid-pre{ display:none; }
}

/* Reduced Motion: nur Fade, keine Slides/Pops */
@media (prefers-reduced-motion:reduce){
.bw-blob{ animation:none!important; }
.bw-screen{ transform:none!important; transition:opacity .25s ease, visibility 0s linear .25s; }
.bw-screen.on{ transition:opacity .25s ease; }
.bw-card,.bw-chip{ transition:border-color .18s ease, box-shadow .18s ease, opacity .18s ease; }
.bw-card:hover,.bw-chip:hover{ transform:none; }
.bw-card.sel,.bw-chip.sel{ transform:none; }
.bw-mrow{ transform:none; transition:opacity .3s ease; }
.bw-stamp.pop{ animation:none; }
.bw-prog-fill{ transition:none; }
.bw-next:hover,.bw-close:hover{ transform:none; }
}

/* ===== Girls Support Girls · „Das Manifest" (zwischen Creator Circle und Early Access) ===== */
.s07g{ padding:0; }
.gsg-sec{ position:relative; max-width:1240px; margin:0 auto; padding:96px 64px 88px; text-align:center; }
.gsg-seal{ display:block; position:relative; width:64px; height:64px; margin:0 auto 18px; }
.gsg-seal svg{ width:100%; height:100%; display:block; }
.gsg-kick{ font:600 12px var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--crimson); margin:0; }
.gsg-h{ font-family:var(--serif); font-weight:900; font-size:clamp(30px,4.2vw,46px); line-height:1.18; color:var(--ink); max-width:21ch; margin:14px auto 20px; text-wrap:balance; }
.gsg-h .thin{ font-weight:400; }
.gsg-l{ display:block; overflow:hidden; padding-bottom:.10em; margin-bottom:-.10em; }
.gsg-li{ display:block; }
.gsg-tx{ font:400 17.5px/1.6 var(--sans); color:var(--ink); max-width:56ch; margin:0 auto; }
.gsg-tx b{ font-weight:600; color:var(--crimson); }
.gsg-row{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; max-width:940px; margin:30px auto 12px; }
.gsg-tile{ position:relative; margin:0; border-radius:14px; overflow:hidden; aspect-ratio:17/10; }
.gsg-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gsg-tile::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,6,8,0) 30%, rgba(18,6,8,.78) 100%); }
.gsg-tile figcaption{ position:absolute; left:12px; right:12px; bottom:9px; z-index:1; font:500 12.5px/1.3 var(--sans); color:var(--cream); text-align:left; }
.gsg-sym{ font:400 11.5px var(--sans); color:#8a7f74; margin:0; }

/* Choreografie — komplett über .s07g.in (scrollReveals vergibt .in) */
.s07g .gsg-seal{ opacity:0; transform:translateY(-110px) rotate(-18deg); }
.s07g.in .gsg-seal{ animation:gsgDrop .7s cubic-bezier(.3,1.4,.4,1) .15s both; }
.s07g .gsg-seal::after{ content:''; position:absolute; inset:-12px; border:1.5px solid rgba(181,30,75,.55); border-radius:50%; opacity:0; }
.s07g.in .gsg-seal::after{ animation:gsgRing 1s ease-out .78s both; }
.s07g .gsg-li{ transform:translateY(112%); transition:transform .8s cubic-bezier(.22,1,.36,1); }
.s07g.in .gsg-l:nth-child(1) .gsg-li{ transform:none; transition-delay:.25s; }
.s07g.in .gsg-l:nth-child(2) .gsg-li{ transform:none; transition-delay:.4s; }
.s07g .gsg-kick, .s07g .gsg-tx, .s07g .gsg-sym{ opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease; }
.s07g.in .gsg-kick{ opacity:1; transform:none; transition-delay:.15s; }
.s07g.in .gsg-tx{ opacity:1; transform:none; transition-delay:.55s; }
.s07g.in .gsg-sym{ opacity:1; transform:none; transition-delay:2s; }
.s07g .gsg-tile{ opacity:0; }
.s07g.in .gsg-tile{ animation:gsgDeal .75s cubic-bezier(.22,1,.36,1) both; }
.s07g.in .gsg-tile:nth-child(1){ animation-delay:1.05s; --gr:-7deg; --gx:150%; }
.s07g.in .gsg-tile:nth-child(2){ animation-delay:1.2s;  --gr:-2deg; --gx:50%; }
.s07g.in .gsg-tile:nth-child(3){ animation-delay:1.35s; --gr:3deg;  --gx:-50%; }
.s07g.in .gsg-tile:nth-child(4){ animation-delay:1.5s;  --gr:8deg;  --gx:-150%; }
@keyframes gsgDrop{ 0%{ opacity:0; transform:translateY(-110px) rotate(-18deg); } 70%{ opacity:1; transform:translateY(6px) rotate(2deg); } 100%{ opacity:1; transform:none; } }
@keyframes gsgRing{ 0%{ opacity:.9; transform:scale(.6); } 100%{ opacity:0; transform:scale(2.1); } }
@keyframes gsgDeal{ 0%{ opacity:0; transform:translateX(var(--gx)) translateY(-26px) rotate(var(--gr)) scale(.92); } 100%{ opacity:1; transform:none; } }
@keyframes gsgStamp{ 0%{ opacity:0; transform:scale(1.8); } 100%{ opacity:1; transform:scale(1); } }

@media (max-width:900px){
  .gsg-sec{ padding:72px 22px 64px; }
  .gsg-row{ grid-template-columns:1fr 1fr; max-width:520px; }
  .gsg-h{ font-size:clamp(24px,6.4vw,32px); }
}
@media (prefers-reduced-motion:reduce){
  .s07g .gsg-seal, .s07g .gsg-li, .s07g .gsg-kick, .s07g .gsg-tx, .s07g .gsg-sym, .s07g .gsg-tile, .s07g .gsg-hint{
    opacity:1 !important; transform:none !important; animation:none !important; transition:none !important; }
  .s07g.in .gsg-seal::after{ animation:none; content:none; }
  .gsg-flyer{ display:none; }
}

/* K3-Klick: Mini-Siegel stempelt den gewählten Schwerpunkt */
.gsg-tile{ cursor:pointer; }
.gsg-tile:focus-visible{ outline:2px solid var(--crimson); outline-offset:2px; }
.gsg-tile .gsg-stamp{ position:absolute; right:6px; top:6px; z-index:3; width:26px; height:26px; border-radius:50%;
  background:#fbf7f1; box-shadow:0 2px 8px rgba(18,6,8,.35); color:#b51e4b; padding:4px; opacity:0; }
.gsg-tile .gsg-stamp svg{ width:100%; height:100%; display:block; }
.gsg-tile.gsg-sel{ outline:2px solid #b51e4b; outline-offset:-2px; }
.gsg-tile.gsg-sel .gsg-stamp{ animation:gsgStamp .45s cubic-bezier(.3,1.5,.4,1) both; }
.gsg-flyer{ position:absolute; z-index:6; left:0; top:0; width:26px; height:26px; border-radius:50%;
  background:#fbf7f1; box-shadow:0 2px 8px rgba(18,6,8,.35); color:#b51e4b; padding:4px; opacity:0; pointer-events:none;
  transition:transform .55s cubic-bezier(.4,.8,.3,1), opacity .2s; }
.gsg-flyer svg{ width:100%; height:100%; display:block; }
.gsg-chip{ position:absolute; z-index:7; font:500 11px var(--sans); color:#fff; background:#b51e4b; border-radius:999px;
  padding:4px 10px; opacity:0; transform:translateY(4px); transition:opacity .3s ease, transform .3s ease; pointer-events:none; }
.gsg-chip.on{ opacity:1; transform:none; }
.gsg-hint{ font:400 11.5px var(--sans); color:#b51e4b; margin:0 0 6px; opacity:0; transform:translateY(8px); transition:opacity .6s ease 1.9s, transform .6s ease 1.9s; }
.s07g.in .gsg-hint{ opacity:1; transform:none; }

/* ===== Studio OS: dezente Automation-Zeile (Zusatzleistung, ohne Preise) ===== */
.s05-auto{ font:400 12.5px/1.5 var(--sans); color:rgba(251,247,241,.55); text-align:center; max-width:520px; margin:10px auto 0; }
.s05-auto b{ color:rgba(251,247,241,.85); font-weight:600; }
.s05 .s05-auto{ opacity:0; transform:translateY(6px); transition:opacity .5s ease .15s, transform .5s ease .15s; }
.s05.s05-live .s05-auto{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .s05 .s05-auto{ opacity:1; transform:none; transition:none; } }