:root{
    --bone:#f4f1ea;
    --deep:#0c0f0d;
    --jungle:#1a2e22;
    --ink:#151515;
    --gold:#b59c7e;
    --gold-deep:#7a6644;
    --bone-66:rgba(244,241,234,.66);
    --bone-62:rgba(244,241,234,.62);
    --hair:rgba(244,241,234,.14);
    --ink-hair:rgba(21,21,21,.16);
    --ink-66:rgba(21,21,21,.7);
    --gold-hair:rgba(181,156,126,.28);
    --ez:cubic-bezier(.22,1,.36,1);
    --pad:clamp(20px,5vw,72px);
    --disp:'Anton',Impact,sans-serif;
    --body:'Manrope',system-ui,sans-serif;
    --serif:'Cinzel',Georgia,serif;
    --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:96px;color-scheme:dark}
  html.lenis,html.lenis body{scroll-behavior:auto}
  body{
    background:var(--deep);
    color:var(--bone);
    font:400 16px/1.65 var(--body);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{background:var(--gold);color:var(--deep)}
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

  /* ---------- Filmkorn (statisch, sitewide) ---------- */
  .grain{
    position:fixed;inset:-2%;z-index:70;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
    background-size:240px 240px;
  }

  /* ---------- Reveals (nur unter html.js versteckt) ---------- */
  .rv{transition:opacity .8s var(--ez),transform .8s var(--ez);transition-delay:var(--d,0s)}
  html.js .rv{opacity:0;transform:translateY(26px)}
  html.js .rv.in{opacity:1;transform:none}
  .line{display:block;overflow:hidden}
  .line>span{display:block;transition:transform .9s var(--ez);transition-delay:var(--d,0s)}
  html.js .title .line>span{transform:translateY(112%)}
  html.js .title.in .line>span{transform:none}
  @media (prefers-reduced-motion:reduce){
    html.js .rv,html.js .title .line>span{opacity:1;transform:none;transition:none}
  }

  /* ---------- Header ---------- */
  .site-head{
    position:absolute;inset:0 0 auto 0;z-index:10;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    padding:22px var(--pad);
  }
  .brand{display:flex;align-items:center;gap:10px}
  .brand b{font:400 21px/1 var(--disp);letter-spacing:.04em}
  .brand span{font:700 9px/1 var(--body);letter-spacing:.42em;color:var(--gold);transform:translateY(-1px)}
  .brand-logo{display:block;height:clamp(34px,5.6vw,46px);width:auto}
  .nav-toggle{display:none;background:none;border:0;cursor:pointer;width:34px;height:34px;
    flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;padding:0}
  .nav-toggle span{display:block;width:26px;height:1.5px;background:var(--bone);transition:transform .3s var(--ez),opacity .3s}
  .site-head.nav-open .nav-toggle span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
  .site-head.nav-open .nav-toggle span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}
  .site-nav{display:flex;align-items:center;gap:clamp(16px,3vw,44px)}
  .site-nav a,.site-nav-btn{font:600 12px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--bone-66);transition:color .3s}
  .site-nav a:hover{color:var(--bone)}
  .head-cta{font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--bone);
    border-bottom:1px solid var(--gold-hair);padding-bottom:5px;transition:border-color .3s}
  .head-cta:hover{border-color:var(--gold)}

  /* ---------- Progressive Nav (oryzo): Kapitel-Punkte oben rechts ---------- */
  .onav{
    position:fixed;top:20px;right:var(--pad);z-index:45;display:flex;gap:clamp(12px,2vw,22px);
    opacity:0;transform:translateY(-10px);pointer-events:none;
    transition:opacity .55s var(--ez),transform .55s var(--ez);
  }
  .onav.is-on{opacity:1;transform:none;pointer-events:auto}
  .onav a{
    position:relative;padding-bottom:6px;
    font:700 9.5px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--bone-62);
    opacity:0;transform:translateY(-7px);
    transition:opacity .5s var(--ez),transform .5s var(--ez),color .35s;
  }
  .onav a.is-shown{opacity:1;transform:none}
  .onav a::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
    transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ez);
  }
  .onav a.is-active{color:var(--bone)}
  .onav a.is-active::after{transform:scaleX(1)}
  .onav.nav-dark a{color:rgba(21,21,21,.58)}
  .onav.nav-dark a.is-active{color:var(--ink)}
  .onav.nav-dark a::after{background:var(--gold-deep)}
  @media (max-width:640px){.onav{right:16px;top:16px;gap:11px}.onav a{font-size:8.5px;letter-spacing:.18em}}

  /* ---------- Check-in-Nav-Button (aus dem Hero ins Menü verschoben) ---------- */
  .site-nav-btn{
    font:600 12px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--bone-66);
    transition:color .3s;padding:0;
  }
  .site-nav-btn:hover{color:var(--bone)}

  /* ---------- Hero / Filmplakat (radikal vereinfacht: eine Botschaft, eine Aktion) ---------- */
  /* Durchgehender Jungle-BG (fixed) hinter allem — die transparente firstVisit-Journey zeigt
     ihn (Figur läuft auf dem Hintergrundbild); Hero/Footer haben eigenen BG und decken ab. */
  /* EINE durchgehende Jungle-Ebene für die GANZE Seite; driftet langsam (Parallax, JS) statt
     statisch zu sein — moderate Überhöhe (inset -12%) gibt den Drift-Raum, OHNE das
     (hochformatige 1080×1920) Bild stark zu zoomen. Muss zum JS-Drift-Cap (vh*0.08) passen:
     Überhöhe > max. Drift, sonst läuft die Bildkante ins Viewport. Hero/Footer legen nur
     Overlays darüber (kein eigenes BG mehr) → kein „Neustart" pro Szene (Owner). */
  .cine-bg-fixed{
    position:fixed;inset:-12% 0;z-index:-1;pointer-events:none;will-change:transform;
    /* Owner-Hintergrund = dunkler Dschungel mit Lichtstrahl (newbackground.png → hero-jungle.webp).
       DAS ist das Hintergrundbild — kein anderes. EINE Ebene für die ganze Seite; leichtes Overlay. */
    background:
      linear-gradient(rgba(7,9,8,.24),rgba(7,9,8,.40)),
      url('/img/parallax/hero-jungle.webp?v=dark2') center/cover no-repeat,
      var(--deep);
  }
  /* Desktop: das Jungle-Bild ist hochformatig (1080×1920) → auf breiten Screens unter
     `cover` stark gezoomt/beschnitten. Ab 993px auf den Landscape-Crop (bg-wide.webp,
     1080×675) umschalten — deutlich weniger Zoom auf Querformat-Screens. */
  @media (min-width:993px){
    .cine-bg-fixed{
      background:
        linear-gradient(rgba(7,9,8,.24),rgba(7,9,8,.40)),
        url('/img/parallax/bg-wide.webp?v=1') center/cover no-repeat,
        var(--deep);
    }
  }
  /* Body transparent, damit die fixe Jungle-Ebene (z-1) durchscheint; --deep bleibt als
     unterster Fallback in .cine-bg-fixed. Hero/Footer haben eigenen opaken BG. */
  body#body_cinematic{background:transparent}
  /* Kein horizontaler Overflow: die firstVisit-Figur-SVG (Bodenlinie x -116..476,
     .fj-scene overflow:visible) ragt seitlich raus → ~57px Seiten-Overflow. Auf
     schmalen Handys verschiebt das die position:fixed „Neu hier?"-Bühne nach RECHTS
     (mobile Safari legt fixed auf das breitere Layout-Viewport). clip (nicht hidden,
     damit Lenis/vertikales Scrollen unberührt bleibt) killt den Overflow. */
  html:has(body#body_cinematic),
  body#body_cinematic{overflow-x:clip}
  .hero{position:relative}
  /* .hero-pin trägt Layout + Hintergrund. Im Scene-Modus (JS, gepinnt) bleibt sie
     viewporthoch stehen, während .hero (per JS, parse-time) eine hohe Pin-Strecke
     bekommt. Ohne JS / reduced-motion = ganz normaler 100svh-Hero (Fallback). */
  .hero-pin{
    /* overflow:visible (statt hidden), damit die Dampf-Ebene (#hero-fog) nach oben über die
       Header-Zone hinausragen darf (Owner: „wenn Dampf, dann kommt der Dampf auch an den Header").
       Logo/Burger (z1100) bleiben über dem Dampf (z7) sichtbar. Figur/Inhalt sind bottom-verankert
       und bleiben in den Grenzen → kein Bottom-Überlauf. */
    position:relative;height:100svh;min-height:600px;display:flex;flex-direction:column;overflow:visible;
    /* KEIN eigenes Overlay mehr (Owner: „Header andere Farbe mit Hard-Cut"): das frühere hero-pin-
       Overlay begann erst unter dem Header (y89) → Ton-Kante. Jetzt zeigt der ganze Hero denselben
       durchgehenden .cine-bg-fixed-Jungle (Header-Zone inklusive) → kein Farb-/Hard-Cut. Text-
       Lesbarkeit trägt das cine-bg-Overlay + der .hero-foot-Verlauf am CTA. */
    background:none;
    padding-top:58px;
  }
  .hero-pin.hero-fixed{position:fixed;top:0;left:0;right:0;z-index:1}   /* nur ?heroScrub-Testmodus */
  /* Hero-Text mittig ÜBER der Frau (Owner/Canva): zentriert statt oben */
  .stage{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
  /* weiches Studio-Licht HINTER der Frau (kein Kreis!) — hebt sie vom dunklen Jungle ab (Owner:
     „Frau nicht zu sehen"). z0: über dem BG, unter der Figur (z5). */
  .stage::before{
    content:"";position:absolute;left:50%;bottom:4%;transform:translateX(-50%);z-index:0;pointer-events:none;
    width:min(128vw,760px);height:min(82vh,660px);
    background:radial-gradient(closest-side,rgba(255,242,220,.16),rgba(255,232,198,.06) 46%,transparent 72%);
    filter:blur(6px);
  }

  /* Hero-Parallax (JS): sobald der Nutzer scrollt, treibt der Scroll die Transforms —
     die .8s-.rv-Transition muss dann AUS, sonst gummibandelt der Text am Scroll.
     Der Entrance (bei y≈0) bleibt unberührt, weil .is-parallax erst beim Scrollen greift. */
  .hero.is-parallax .hero-top,
  .hero.is-parallax .figure{transition:none;will-change:transform}
  /* In-Hero-Dampf: sobald der Scrub läuft, treibt GSAP Text-opacity/transform direkt —
     die .rv-/.8s-Transition muss dann AUS, sonst gummibandelt der Text am Scroll. */
  .hero.hero-scrubbing .hero-top,
  .hero.hero-scrubbing .hero-foot{transition:none;will-change:transform,opacity}

  /* obere Zone: Eyebrow + Headline + Subline stehen FREI über dem Gesicht (Cutout ist tiefer) */
  .hero-top{
    position:relative;z-index:6;text-align:center;   /* VOR der Figur (z5) → Titel bleibt lesbar (Owner) */
    padding:0 clamp(12px,3.5vw,48px);
    top:calc(clamp(6px,2vh,34px) - 20px);   /* höher gezogen — weniger Dead-Space oben (Owner) */
  }
  .hero-eyebrow{
    font:700 clamp(11px,3vw,13px)/1 var(--body);letter-spacing:.28em;text-transform:uppercase;color:#fff;   /* WEISS (Owner) */
    margin-bottom:clamp(10px,2vh,18px);
  }
  /* Sub-Hero: identisch zur Main-Seite (#hero_descr) — Josefin Sans, gold, 17px/1.65 · zentriert */
  .hero-sub{
    max-width:52ch;margin:clamp(10px,1.8vh,16px) auto 0;text-align:center;
    font:400 17px/1.65 'Josefin Sans',var(--body);color:var(--gold);
  }
  .hero-sub a{color:var(--gold);text-decoration:underline;
    text-underline-offset:3px;transition:opacity .3s}
  .hero-sub a:hover{opacity:.78}
  @media (max-width:760px){ .hero-sub{font-size:16px} }

  /* [cleanup] toter Ring-Carrier (.halo/.ringline/.jn-ringfx) entfernt — Markup war längst raus. */
  /* Hero-Titel: Cinzel, gold — KLEINER + vor der Figur, damit lesbar (Owner).
     Kräftiger Schatten hebt die Gold-Zeilen von der Frau dahinter ab. */
  .title{
    font:500 clamp(52px,8vw,108px)/1.0 var(--serif);
    letter-spacing:.01em;color:var(--gold);text-transform:uppercase;
    text-shadow:0 3px 26px rgba(12,15,13,.9),0 1px 5px rgba(12,15,13,.85);
  }
  .title em{font-style:normal;color:var(--gold)}
  @media (max-width:760px){
    .title{font-size:clamp(44px,11vw,72px);line-height:1.02}
  }
  .vertical-tag{
    position:absolute;right:var(--pad);bottom:clamp(20px,4vh,48px);z-index:3;
    writing-mode:vertical-rl;font:600 10px/1 var(--body);letter-spacing:.32em;color:var(--bone-62);
  }
  .figure{
    /* z-index 5 (über der hero-foot z4): so ragen NUR die Fingerspitzen vor den CTA;
       pointer-events:none -> Button bleibt klickbar. Angehoben (bottom>0), damit die
       Hand oberhalb der Button-Oberkante bleibt und nur die Fingerkuppen aufliegen. */
    position:absolute;left:0;right:3%;margin:0 auto;bottom:clamp(24px,4.5vh,52px);z-index:5;
    /* höher + größer, damit oben weniger Dead-Space bleibt (Owner „packs höher") */
    height:min(64vh,585px);width:auto;pointer-events:none;
    filter:drop-shadow(0 36px 54px rgba(0,0,0,.55)) drop-shadow(0 8px 18px rgba(0,0,0,.4));
  }
  .hero-foot{
    position:relative;z-index:4; /* über dem Ring-Carrier (z2) + Cutout (z3) — CTA bleibt vorn */
    display:flex;flex-direction:column;align-items:center;gap:14px;flex:none;
    /* hochgezogen: die Fingerspitzen der Frau überlappen knapp die Button-Oberkante */
    margin-top:clamp(-76px,-7.5vh,-40px);
    padding:0 var(--pad) clamp(20px,3.5vh,34px);
    background:linear-gradient(to top,var(--deep) 30%,rgba(12,15,13,.5) 62%,transparent);
  }
  /* Goldrahmen (Owner/Canva): DIREKT am weissen CTA-Button (schmaler Ring), rechts als
     Erweiterung um „Kurse" herum. → 4px rund um den weissen Button, rechts mehr Platz. */
  .actions{
    display:inline-flex;align-items:center;justify-content:center;gap:clamp(10px,1.8vw,22px);flex-wrap:nowrap;
    max-width:100%;
    border:1.5px solid var(--gold);border-radius:999px;
    padding:4px 20px 4px 4px;background:rgba(12,15,13,.28);
  }
  .hero-offer{
    font:600 12.5px/1.5 var(--body);letter-spacing:.02em;color:var(--bone-66);text-align:center;
  }
  .hero-offer .of-r,.hero-offer .of-s{display:inline}
  .hero-offer s{opacity:.55;margin-right:5px}
  .jbtn{
    display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
    background:var(--bone);color:var(--deep);border-radius:999px;
    padding:16px 28px;font:700 15px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;
    transition:background .3s,transform .35s var(--ez);
  }
  .jbtn:hover{background:var(--gold);transform:translateY(-2px)}
  .jbtn .ar{font-family:var(--body);font-weight:700}
  .ghost-link{
    font:700 13px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
    padding:6px 8px;transition:color .3s;white-space:nowrap;   /* im Goldrahmen → kein eigener Unterstrich */
  }
  .ghost-link:hover{color:var(--bone)}

  /* ---------- Desktop-Anordnung (≥900px): zweispaltig wie die Main-Live-Seite —
     Bild LINKS (etwas kleiner), Eyebrow/Headline/Subtext RECHTS gestapelt, größerer CTA.
     Mobile/Tablet (<900) bleibt die zentrierte Komposition (Owner: „mobil so lassen").
     NUR Anordnung, keine Inhalte geändert. DOM unangetastet, damit Pin/Dampf/Scrub weiter
     laufen: .stage → display:contents (hebt hero-top + Figur ins Grid); .hero-foot bleibt
     EIN Block (der Scrub fadet ihn als Ganzes), Subtext per order:-1 über den CTA. ---------- */
  @media (min-width:900px){
    body#body_cinematic .hero-pin{
      display:grid;
      grid-template-columns:minmax(0,0.84fr) minmax(0,1.16fr);
      grid-template-rows:auto auto;
      align-content:center;align-items:center;
      column-gap:clamp(32px,4.5vw,80px);
      max-width:1340px;margin-inline:auto;
      padding:0 clamp(40px,6vw,96px);
    }
    body#body_cinematic .stage{display:contents}
    body#body_cinematic .stage::before{display:none}
    body#body_cinematic .figure{
      position:static;grid-column:1;grid-row:1 / 3;
      height:min(60vh,560px);width:auto;max-width:100%;
      margin:0;inset:auto;justify-self:center;align-self:center;
    }
    body#body_cinematic .hero-top{
      grid-column:2;grid-row:1;align-self:end;
      position:static;top:auto;padding:0;text-align:center;   /* Owner: Texte zentriert, nicht linksbündig */
    }
    body#body_cinematic .title{font-size:clamp(56px,5.4vw,96px)}
    body#body_cinematic .hero-foot{
      grid-column:2;grid-row:2;align-self:start;
      margin:22px 0 0;padding:0;background:none;
      align-items:center;text-align:center;
    }
    body#body_cinematic .hero-sub{order:-1;text-align:center;max-width:46ch;margin:0 auto 22px}
    body#body_cinematic .actions{justify-content:center;padding:5px 24px 5px 5px}
    body#body_cinematic .jbtn{padding:20px 40px;font-size:17px}   /* größerer CTA (Owner) */
    body#body_cinematic .hero-offer{text-align:center}
    body#body_cinematic .vertical-tag{display:none}
  }

  /* Survey-CTA über den Raumbildern (Owner) — dezenter Ghost-Button, zentriert */
  .cine-survey{text-align:center;padding:clamp(30px,7vh,72px) var(--pad) 0}
  .jbtn-survey{background:transparent;color:var(--gold);border:1.5px solid var(--gold-hair);
    text-transform:none;letter-spacing:.02em;font-size:14.5px;padding:14px 28px}
  .jbtn-survey:hover{background:var(--gold);color:var(--deep);border-color:var(--gold)}
  .jbtn-survey .ar{color:inherit}

  /* Schwebender WhatsApp-Button — IDENTISCH zur Haupt-Seite (.whatsAppBtn aus app.css:
     50×50, grüner FontAwesome-Icon, fixed unten-rechts, margin 15px). NUR der z-index
     ist auf Cinematic niedrig (z6 < Hero-Pin z8), damit das Dampf-Canvas (.hero-fog z7)
     ihn im Hero verdeckt (Owner). Header z1100 bleibt drüber, nach dem Hero sichtbar.
     Live verifiziert (elementFromPoint: mit hero-pin z8 liegt das Fog-Canvas oben). */
  .hero-pin{z-index:8}
  body#body_cinematic .whatsAppBtn{
    position:fixed;bottom:0;right:0;margin:15px;width:50px;height:50px;
    color:#65cf72;z-index:6;
  }
  body#body_cinematic .whatsAppBtn:hover{color:#65cf72}

  /* Check-in-Chip im Header (neben dem Burger; von cinematic-v2.js dorthin geschoben).
     Text ausgeschrieben (Owner). pointer-events:auto ist PFLICHT — Header/.top-bar-wrapper
     haben pointer-events:none, sonst gehen Klicks durch den Chip in den Hero (kein Klick). */
  .cine-checkin{
    display:inline-flex;align-items:center;white-space:nowrap;
    background:rgba(12,15,13,.4);border:1px solid var(--gold-hair);border-radius:999px;
    color:var(--gold);font:700 10.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;
    padding:9px 15px;margin-left:auto;margin-right:12px;cursor:pointer;pointer-events:auto;
    transition:background .3s,color .3s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  }
  .cine-checkin:hover{background:var(--gold);color:var(--deep)}
  @media (max-width:380px){ .cine-checkin{padding:9px 12px;letter-spacing:.1em} }

  /* ---------- IN-HERO-DAMPF (Owner-Redesign): vollflächige Kondens-/Wisch-Ebene VOR der
     Frau (z7 > .figure z5). Gleiche WarungDrops-Engine wie #kondens, hier SCROLLGETRIEBEN
     (Level 0→1). Die Canvas-Deckung fährt der Treiber über die Element-opacity — bei
     Level 0 unsichtbar (oben ist der Hero klar). Wischen ist erst freigeschaltet
     (pointer-events:auto via .hf-armed), sobald Dampf da ist — sonst blieben CTA/„Kurse"
     blockiert. Heat-UI (Thermometer/kcal/Temp/Caption) reused die .jn-*-Styles (eigene IDs).
     Brechungsquelle der Tropfen = .hf-src (unsichtbares BG-Bild). ---------- */
  /* Dampf-Ebene reicht bis über den Header (top negativ ≥ Hero-Padding) → der Dampf zieht beim
     Scrollen auch über die Header-Zone; bei Level 0 (oben) ist die Canvas unsichtbar (opacity 0). */
  .hero-fog{position:absolute;left:0;right:0;bottom:0;top:calc(-1 * clamp(96px,13vh,140px));z-index:7;pointer-events:none;overflow:visible}
  .hero-fog .hf-src{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
  .hero-fog .hf-warm,.hero-fog .hf-amber{z-index:1}          /* Hitze-Tönung HINTER dem Frost */
  .hero-fog > canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;opacity:0}
  .hero-fog.hf-armed{pointer-events:auto;cursor:crosshair;touch-action:pan-y}
  /* Heat-UI im Hero platzieren (überschreibt die journey-eigenen .jn-*-Positionen inkl.
     deren Mobile-Overrides — Spezifität .hero-fog .hf-* = 0,2,0 > .jn-* = 0,1,0). */
  /* Dampf-TEXTE liegen ÜBER Thermometer/kcal (Owner: „lieber im layer darüber, statt drunter").
     .jn-thermo/.jn-kcal sind z11 → Texte auf z13. */
  .hero-fog .hf-cap{top:clamp(78px,11svh,132px);left:0;right:0;text-align:center;max-width:none;padding:0 clamp(20px,6vw,72px);z-index:13}
  /* 5 Vorteil-Beats: mittig, nacheinander (Timeline). Kicker trägt den Vergleichs-Rahmen. */
  .hero-fog .hf-b{top:38%;left:0;right:0;text-align:center;max-width:none;padding:0 clamp(20px,7vw,80px);z-index:13}
  .hero-fog .hf-b .k{color:var(--gold)}
  .hero-fog .hf-b p{max-width:26ch}
  .hero-fog .hf-temp{top:31%}
  .hero-fog .hf-thermo{left:clamp(10px,2.6vw,36px);top:50%}
  .hero-fog .hf-kcal{top:auto;bottom:clamp(88px,20vh,180px)}
  /* Wisch-Hinweis: erscheint mit dem Dampf, unten mittig, dezent (Owner-Ton: nüchtern) */
  .hero-fog .hf-wipehint{
    position:absolute;left:0;right:0;bottom:clamp(26px,7vh,64px);z-index:9;opacity:0;pointer-events:none;
    text-align:center;font:700 11px/1 var(--body);letter-spacing:.26em;text-transform:uppercase;
    color:var(--gold);text-shadow:0 1px 14px rgba(0,0,0,.7);
  }
  .hero-fog .hf-wipehint i{display:block;margin-top:8px;font-style:normal;font-size:15px;animation:hfHint 2.4s ease-in-out infinite}
  @keyframes hfHint{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(5px);opacity:1}}
  @media (prefers-reduced-motion:reduce){.hero-fog .hf-wipehint i{animation:none}}

  /* ---------- Check-in-Sheet (Bottom-Sheet) ---------- */
  .sheet-back{
    position:fixed;inset:0;z-index:60;background:rgba(6,10,8,.66);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;pointer-events:none;transition:opacity .35s ease;
  }
  .sheet{
    position:fixed;left:0;right:0;bottom:0;z-index:61;margin:0 auto;
    width:min(480px,100%);background:#101512;border-radius:22px 22px 0 0;
    border:1px solid var(--hair);border-bottom:0;
    padding:18px 24px calc(26px + env(safe-area-inset-bottom,0px));
    transform:translateY(104%);transition:transform .45s var(--ez);
  }
  .sheet-open .sheet-back{opacity:1;pointer-events:auto}
  .sheet-open .sheet{transform:none}
  .sheet-grip{width:40px;height:4px;border-radius:99px;background:rgba(244,241,234,.22);margin:0 auto 20px}
  .sheet h2{font:400 21px/1.2 var(--disp);letter-spacing:.03em;text-transform:uppercase;margin-bottom:4px}
  .sheet .sub{font:600 10px/1 var(--body);letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
  .qr{
    width:min(200px,52vw);margin:0 auto 18px;padding:14px;background:var(--bone);border-radius:14px;
    box-shadow:0 18px 44px rgba(0,0,0,.45);
  }
  .qr svg{display:block;width:100%;height:auto}
  .sheet p{font-size:13.5px;line-height:1.6;color:var(--bone-66);text-align:center;max-width:34ch;margin:0 auto}
  .sheet-close{
    position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:50%;
    border:1px solid var(--hair);color:var(--bone-66);font-size:15px;line-height:1;
    display:flex;align-items:center;justify-content:center;transition:color .3s,border-color .3s;
  }
  .sheet-close:hover{color:var(--bone);border-color:var(--gold-hair)}

  /* ============================================================
     Übrig aus der ENTFERNTEN #journey-Szene: der IN-HERO-DAMPF (#hero-fog)
     re-used diese .jn-*-Klassen fürs Heat-UI (Hitze-Tönung, Thermometer,
     kcal, Vergleichs-Caption, Temp-Zahl) — das Markup trägt beide Klassen
     (z. B. class="jn-thermo hf-thermo"), die .hero-fog .hf-*-Regeln (oben)
     überschreiben nur Position/z-index. NICHT löschen. Der restliche
     tote #journey-Apparat ist raus (Cleanup Stufe 1c). ============= */
  .jn-twarm{
    position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;
    background:radial-gradient(92% 74% at 50% 62%,rgba(255,158,80,.3),rgba(122,80,32,.14) 66%,transparent 88%);
  }
  .jn-amber{
    position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;mix-blend-mode:screen;
    background:
      radial-gradient(120% 92% at 50% 72%,rgba(255,122,42,.36),rgba(150,66,16,.16) 56%,transparent 84%),
      linear-gradient(180deg,rgba(255,140,50,.06),rgba(130,54,12,.12));
  }
  .jn-thermo{
    position:absolute;left:clamp(10px,2.6vw,36px);top:50%;transform:translateY(-50%);
    z-index:11;opacity:0;pointer-events:none;height:min(44svh,320px);width:96px;
  }
  .jn-thermo .th-cap{position:absolute;top:-20px;font:600 8.5px/1 var(--mono);letter-spacing:.08em;color:rgba(181,156,126,.85)}
  .jn-thermo .th-cap.c1{left:22px}
  .jn-thermo .th-cap.c2{left:42px}
  .jn-thermo .th-rail{position:absolute;top:0;bottom:0;width:4px;border-radius:99px;
    background:rgba(244,241,234,.12);overflow:hidden}
  .jn-thermo .th-rail.rt{left:26px}
  .jn-thermo .th-rail.rh{left:44px}
  .jn-thermo .th-fill{position:absolute;inset:0;border-radius:99px;transform:scaleY(0);transform-origin:50% 100%;
    background:linear-gradient(180deg,#ff9e50,#ffb066 34%,#b59c7e 68%,#54725f);
    box-shadow:0 0 16px rgba(255,158,80,.7)}
  .jn-thermo .th-fill.hum{
    background:linear-gradient(180deg,#bfe3d2,#9fd6c4 30%,#b59c7e 72%,#54725f);
    box-shadow:0 0 12px rgba(159,214,196,.5)}
  .jn-thermo .th-m{position:absolute;transform:translateY(50%);
    font:600 8.5px/1 var(--mono);letter-spacing:.06em;color:rgba(244,241,234,.62);white-space:nowrap}
  .jn-thermo .th-m.tm{left:0;width:20px;text-align:right}
  .jn-thermo .th-m.hm{left:54px}
  .jn-thermo .th-m i{display:inline-block;width:5px;height:1px;background:rgba(244,241,234,.42);
    vertical-align:2px;font-style:normal}
  .jn-thermo .th-m.tm i{margin-left:4px}
  .jn-thermo .th-m.hm i{margin-right:4px}
  .jn-thermo .th-m.hot{color:#ffb066}
  .jn-thermo .th-m.hot i{background:rgba(255,176,102,.7)}
  .jn-thermo .th-m.wet{color:#9fd6c4}
  .jn-thermo .th-m.wet i{background:rgba(159,214,196,.7)}
  /* dezenter Kalorien-Ticker (P10): mono, oben mittig — endet bei ~500 kcal */
  .jn-kcal{
    position:absolute;left:0;right:0;top:clamp(30px,6.5svh,58px);z-index:11;opacity:0;pointer-events:none;
    text-align:center;font:600 10px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;
    color:rgba(181,156,126,.85);text-shadow:0 1px 12px rgba(0,0,0,.6);
  }
  .jn-kcal b{font-weight:600;color:#ffb066}
  .jn-cap{
    position:absolute;left:0;right:0;top:clamp(80px,13svh,150px);z-index:9;opacity:0;pointer-events:none;
    text-align:center;padding:0 clamp(20px,6vw,72px);
  }
  .jn-cap .k{display:block;font:700 10px/1 var(--body);letter-spacing:.3em;text-transform:uppercase;
    color:var(--gold);margin-bottom:12px;text-shadow:0 1px 14px rgba(0,0,0,.75)}
  .jn-cap h3{font:400 clamp(1.9rem,8.4vw,3.9rem)/1 var(--disp);letter-spacing:.015em;
    text-transform:uppercase;color:var(--bone);margin-bottom:12px;
    text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.5)}
  .jn-cap p{font:600 clamp(14px,3.9vw,16.5px)/1.6 var(--body);color:rgba(244,241,234,.88);
    max-width:34ch;margin:0 auto;text-shadow:0 2px 18px rgba(0,0,0,.6)}
  /* SplitText-Wörter: maskiert, kein FOUC */
  .jn-cap h3 div{display:inline-block}
  /* Temperatur-Zähler (N4 HITZE) — über der Heldin, unter dem Mega-Anker */
  .jn-temp{
    position:absolute;left:0;right:0;top:30%;z-index:9;opacity:0;pointer-events:none;
    text-align:center;
  }
  .jn-temp b{display:block;font:400 clamp(4.2rem,22vw,7.5rem)/1 var(--disp);color:var(--gold);
    letter-spacing:.01em;text-shadow:0 4px 44px rgba(0,0,0,.5)}
  .jn-temp span{display:block;margin-top:8px;font:700 10px/1 var(--body);letter-spacing:.34em;
    text-transform:uppercase;color:var(--bone-62)}
  /* ---------- CTA-Modi: <body data-offer="regular|sale|dynamic"> schaltet ALLE Preis-Nennungen.
     3 Zustände wie die Haupt-Index-Seite: regular / sale / dynamic (72h-Deal, $saleDynamic). ---------- */
  .of-r,.of-s,.of-d{display:none !important}
  body[data-offer="regular"] .of-r{display:inline !important}
  body[data-offer="sale"]    .of-s{display:inline !important}
  body[data-offer="dynamic"] .of-d{display:inline !important}
  .sale-tag{
    display:inline-block;margin-left:10px;vertical-align:middle;
    font:700 10px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  }
  .sale-tag s{opacity:.6;margin-right:6px}

  /* .sec-head = geteilte Label-Leiste (Kicker · Linie · Notiz). LIVE via
     Kursplan-Overlay-Header (blade class="sec-head rv"). Der Rest der alten
     v1-„programme"-/Empfang-/Biohacking-/Kondens-Footer-Sektionen ist als
     totes CSS entfernt (Cleanup Stufe 1d). */
  .sec-head{
    display:flex;align-items:center;gap:clamp(14px,2vw,24px);
    font:700 10px/1 var(--body);letter-spacing:.3em;text-transform:uppercase;
    margin-bottom:clamp(36px,6vh,64px);
  }
  .sec-head .lbl{color:var(--gold);white-space:nowrap}
  .sec-head .rule{flex:1;height:1px;background:var(--hair)}
  .sec-head .note{color:var(--bone-62);white-space:nowrap}
  /* ≤480px: „MESSWERTE STATT MARKETING“ darf umbrechen (Tracking runter) — die
     nowrap-Note lief sonst hart aus dem var(--pad)-Raster bis an die Viewport-Kante */
  @media (max-width:480px){
    .sec-head .note{white-space:normal;letter-spacing:.16em;text-align:right;max-width:14ch;line-height:1.5}
  }

  /* ============ KURSE (eigene Sektion — ersetzt die entfernten #journey-Kursnamen) ============ */
  .kurse{position:relative;background:var(--deep);padding:clamp(72px,12vh,148px) 0;border-top:1px solid var(--hair)}
  .kurse-inner{max-width:1120px;margin:0 auto;padding:0 var(--pad)}
  .kurse-head{text-align:center;margin-bottom:clamp(34px,6vh,58px)}
  .kurse-head .k{display:block;font:700 10px/1 var(--body);letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
  .kurse-head h2{font:400 clamp(2.1rem,8vw,4rem)/1 var(--disp);letter-spacing:.01em;text-transform:uppercase;color:var(--bone)}
  .kurse-head h2 em{font-style:normal;color:var(--gold)}
  .kurse-head p{max-width:52ch;margin:16px auto 0;font:400 clamp(15px,2.4vw,17px)/1.65 'Josefin Sans',var(--body);color:var(--gold)}
  /* Räumlichkeiten-Band */
  .kurse-rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,18px);margin-bottom:clamp(40px,7vh,72px)}
  .kurse-rooms figure{position:relative;margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--hair)}
  .kurse-rooms img{display:block;width:100%;height:clamp(180px,26vw,300px);object-fit:cover;filter:brightness(.82) saturate(1.05);transition:transform .8s var(--ez),filter .5s}
  .kurse-rooms figure:hover img{transform:scale(1.05);filter:brightness(.95) saturate(1.1)}
  .kurse-rooms figcaption{position:absolute;left:14px;bottom:12px;z-index:2;
    font:700 10px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--bone);text-shadow:0 1px 12px rgba(0,0,0,.8)}
  .kurse-rooms figure::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,9,8,.7),transparent 52%);pointer-events:none}
  /* Kursarten-Grid */
  .kurse-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
  .kurse-card{position:relative;padding:clamp(20px,2.6vw,30px);border:1px solid var(--hair);border-radius:14px;
    background:linear-gradient(180deg,rgba(244,241,234,.035),rgba(244,241,234,.01));transition:border-color .4s,transform .4s var(--ez)}
  .kurse-card:hover{border-color:rgba(181,156,126,.5);transform:translateY(-3px)}
  .kurse-card .lvl{display:inline-block;font:700 9px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
    padding:5px 9px;border:1px solid rgba(181,156,126,.35);border-radius:999px;margin-bottom:14px}
  .kurse-card h3{font:500 clamp(1.3rem,3.4vw,1.7rem)/1.1 var(--serif);letter-spacing:.01em;color:var(--bone);margin:0}
  .kurse-cta{text-align:center;margin-top:clamp(34px,6vh,56px)}
  @media (max-width:860px){
    .kurse-rooms{grid-template-columns:1fr 1fr}
    .kurse-grid{grid-template-columns:1fr 1fr}
  }
  @media (max-width:560px){
    .kurse-rooms{grid-template-columns:1fr}
    .kurse-grid{grid-template-columns:1fr}
  }

  /* ============ DIE RÄUME — Editorial-Bento (ultra-modern), transparente Sektion → Jungle scheint durch ============ */
  .rooms{position:relative;padding:clamp(80px,14vh,175px) 0;border-top:1px solid var(--hair)}
  .rooms-inner{max-width:1220px;margin:0 auto;padding:0 var(--pad)}
  .rooms-head{text-align:center;margin-bottom:clamp(40px,7vh,72px)}
  .rooms-head .k{display:block;font:700 10px/1 var(--body);letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
  .rooms-head h2{font:400 clamp(2.2rem,8.5vw,4.4rem)/1 var(--disp);letter-spacing:.01em;text-transform:uppercase;color:var(--bone)}
  .rooms-head h2 em{font-style:normal;color:var(--gold)}
  .rooms-head p{max-width:56ch;margin:16px auto 0;font:400 clamp(15px,2.4vw,17px)/1.65 'Josefin Sans',var(--body);color:var(--gold)}
  .rooms-bento{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(9px,1.3vw,16px);grid-auto-rows:clamp(128px,17vw,220px)}
  .rb{position:relative;margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--hair);background:var(--deep)}
  .rb img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;filter:brightness(.82) saturate(1.06);transition:filter .6s;will-change:transform}
  .rb::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(6,9,7,.74),transparent 52%)}
  .rb::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(181,156,126,0);transition:box-shadow .5s}
  .rb:hover img{filter:brightness(1) saturate(1.16)}
  .rb:hover::before{box-shadow:inset 0 0 0 1px rgba(181,156,126,.5)}
  .rb figcaption{position:absolute;left:16px;bottom:14px;z-index:3;pointer-events:none;
    font:700 10px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--bone);text-shadow:0 1px 12px rgba(0,0,0,.85)}
  .rb-a{grid-column:span 7} .rb-b{grid-column:span 5}
  .rb-c,.rb-d,.rb-e{grid-column:span 4}
  .rb-f{grid-column:span 8} .rb-g{grid-column:span 4}
  /* Mobil/Tablet (Owner: „modern, kein Foto-Grid" → Wahl B): SCROLL-STACK.
     Jede Karte klebt (position:sticky — funktioniert hier, kein sticky-brechendes
     #wrapper wie bei firstVisit, verifiziert), die nächste schiebt sich beim
     Scrollen darüber; die Oberkanten fächern leicht (Deck-of-cards-Look).
     Live real-scroll verifiziert: rb-a..d klebten bei top 76/82/88/94. */
  @media (max-width:820px){
    .rooms-bento{display:block}
    .rb{position:sticky;width:100%;height:74vh;max-height:600px;
      margin:0 0 clamp(18px,3.2vh,30px);box-shadow:0 22px 50px -18px rgba(0,0,0,.7)}
    .rb-a,.rb-b,.rb-c,.rb-d,.rb-e,.rb-f,.rb-g{grid-column:auto;grid-row:auto}
    .rb-a{top:76px} .rb-b{top:82px} .rb-c{top:88px} .rb-d{top:94px}
    .rb-e{top:100px} .rb-f{top:106px} .rb-g{top:112px}
    .rb:last-child{margin-bottom:0}
    .rb figcaption{left:18px;bottom:16px;font-size:12px}
  }

  /* ============ Footer ============ */
  /* Footer-Hintergrund = Main-Live-Dschungel, ~10 Exposure dunkler (Owner) */
  /* Footer: kein eigenes BG-Bild — nur dunkles Overlay, der durchgehende .cine-bg-fixed-Jungle
     scheint durch (Owner: EIN durchgehender Hintergrund). */
  .site-foot{border-top:1px solid var(--hair);overflow:hidden;
    background:linear-gradient(rgba(7,9,8,.66),rgba(7,9,8,.8));
  }
  .cta-block{text-align:center;padding:clamp(90px,14vh,150px) var(--pad) clamp(60px,9vh,100px)}
  .cta-block .lbl{font:700 10px/1 var(--body);letter-spacing:.34em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:18px}
  .cta-block h2{
    font:400 clamp(2.5rem,6vw,5.6rem)/1 var(--disp);letter-spacing:.01em;text-transform:uppercase;
    color:var(--bone);margin-bottom:clamp(28px,5vh,40px);
  }
  .cta-block h2 em{font-style:normal;color:var(--gold)}
  .foot-grid{
    max-width:1320px;margin:0 auto;padding:0 var(--pad) clamp(56px,9vh,90px);
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);
  }
  .foot-col h3{font:700 10px/1 var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
  .foot-col a{display:block;font:600 15px/2.2 var(--body);color:var(--bone-66);transition:color .3s}
  .foot-col a:hover{color:var(--bone)}
  .foot-col p{font:600 15px/1.8 var(--body);color:var(--bone-66)}
  .wordmark{
    text-align:center;user-select:none;pointer-events:none;
    font:400 clamp(4.6rem,24vw,23rem)/.9 var(--disp);letter-spacing:.015em;
    color:var(--bone);white-space:nowrap;padding-bottom:.05em;
  }
  .wordmark span{color:transparent;-webkit-text-stroke:2px rgba(244,241,234,.85)}
  @supports not (-webkit-text-stroke:1px black){.wordmark span{color:var(--bone-62)}}
  .legal{
    display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
    border-top:1px solid var(--hair);
    padding:22px var(--pad);
    font:600 11px/1.6 var(--body);letter-spacing:.08em;color:var(--bone-62);
  }
  .legal nav{display:flex;gap:24px}
  .legal a:hover{color:var(--bone)}

  /* ---------- Desktop-Adaption (Mobil ist die Komposition) ---------- */
  @media (min-width:761px){
    .jn-cap{left:var(--pad);right:auto;top:24svh;max-width:520px;text-align:left;padding:0}
    .jn-cap p{margin:0}
  }
  @media (max-width:900px){
    /* mobil: Logo links, Hamburger rechts, Nav als Dropdown-Panel */
    .site-head{padding-top:16px;padding-bottom:16px}
    .nav-toggle{display:flex}
    .site-nav{
      position:absolute;top:calc(100% - 4px);right:var(--pad);min-width:200px;
      flex-direction:column;align-items:stretch;gap:0;
      background:rgba(12,15,13,.97);border:1px solid var(--hair);border-radius:12px;
      padding:6px;opacity:0;transform:translateY(-8px) scale(.98);transform-origin:100% 0;
      pointer-events:none;transition:opacity .28s var(--ez),transform .28s var(--ez);
    }
    .site-head.nav-open .site-nav{opacity:1;transform:none;pointer-events:auto}
    .site-nav a,.site-nav-btn{font-size:13px;letter-spacing:.12em;padding:13px 16px;
      width:100%;text-align:left;border-radius:8px}
    .site-nav a:hover,.site-nav-btn:hover{background:rgba(244,241,234,.06)}
    .vertical-tag{display:none}
    .meta-note{display:none}
    .foot-grid{grid-template-columns:1fr 1fr}
    .foot-col.addr{grid-column:1 / -1}
  }
  @media (max-width:640px){
    /* --fig-lift = wo die Frau (und damit ihre Fingerspitzen) sitzt. Frau UND CTA werden aus DERSELBEN
       Variable positioniert → der -var(--fig-lift)-Term kürzt sich raus, die CTA-Fingerspitzen-Überlappung
       ist FIX (≈16px) auf ALLEN Handy-Höhen (Owner: „auf allen mobilen screen sizes gleich"), statt mit
       fixen px zu driften. Alles vh-basiert → skaliert mit dem Viewport. */
    body#body_cinematic{--fig-lift:calc(clamp(96px,13vh,140px) + 17px)}
    .figure{height:min(50.4vh,456px);right:0;bottom:var(--fig-lift)}   /* Owner: Frau 5% kleiner (53vh/480→50.4vh/456) */
    .title{font-size:clamp(33px,9.3vw,48px)}
    /* CTA an die Figur gekoppelt: top = konstante 36px MINUS fig-lift → Button-Oberkante liegt fix
       ~16px unter den Fingerspitzen, größenunabhängig. background:none = Fade hinter dem Sub-Text raus. */
    .hero-foot{top:calc(36px - var(--fig-lift));background:none}
    /* Headline vh-basiert (skaliert mit der Screenhöhe wie die Frau). */
    .hero-top{top:calc(clamp(6px,2vh,34px) - 11.4vh)}
    /* Angebot („Starter…") bleibt dicht am CTA; beschreibender Sub-Text („Das bestbewertetste…") höher. */
    .hero-offer{position:relative;top:-12px}
    .hero-sub{position:relative;top:-34px}
  }

/* ============================================================
   LARAVEL-PORT-ERGÄNZUNGEN (cinematic-landing.blade.php)
   ============================================================ */

/* ---- Check-in-Sheet: echter QR (api.qrserver) + Profil-Link ---- */
.qr img{display:block;width:100%;height:auto;border-radius:6px}
.sheet .sheet-profile{
  display:block;width:max-content;margin:16px auto 0;
  font:600 13px/1 var(--body);letter-spacing:.06em;color:var(--gold);
  border-bottom:1px solid var(--gold-hair);padding-bottom:5px;transition:color .3s,border-color .3s;
}
.sheet .sheet-profile:hover{color:var(--bone);border-color:var(--gold)}

/* ---- Survey-Sektion (öffnet das bestehende #surveyModal) ---- */
.svy{
  position:relative;padding:clamp(72px,11vh,130px) var(--pad);
  background:var(--bone);color:var(--ink);text-align:center;
  border-top:1px solid var(--ink-hair);
}
.svy .lbl{display:block;font:700 10px/1 var(--body);letter-spacing:.34em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:16px}
.svy h2{font:400 clamp(1.9rem,5.4vw,3.4rem)/1 var(--disp);letter-spacing:.01em;text-transform:uppercase;margin-bottom:22px}
.svy .jbtn{background:var(--ink);color:var(--bone)}
.svy .jbtn:hover{background:var(--jungle)}

/* ---- Kursplan: KEIN cinematic-Overlay mehr. Der #courseplan (courseplan-v2) läuft jetzt
        1:1 wie die Main-Live-Seite — Styling komplett aus index-courseplan.css, Öffnen über
        body.planActive (Klick #button-courseplan) / Schließen #tab_close, getrieben von
        index-page.js. Alle früheren body#body_cinematic-Overlay-Overrides (.cine-plan-Backdrop,
        Slide-up-Panel, close-btn-Restyle, Eyebrow-hide, transparent header, statische Liste)
        wurden entfernt, damit der Kursplan eigenständig ohne index.blade.php weiterläuft. ---- */

/* EINZIGE cine-Umgebungs-Anpassung (unsichtbar, kein Look-Change): das Panel bei planActive
   über den fixen Cine-Header (z1100) + Burger (z1120) heben. Die Main-Seite setzt hier z-index:9
   — das reicht dort, weil der Main-Header niedrig liegt; auf Cine würde der Header sonst über dem
   offenen Kursplan liegen. Buchungs-/USC-Modals bleiben via index-courseplan.css (z13040+) darüber. */
body#body_cinematic.planActive #courseplan.courseplan-v2 { z-index: 1200; }

/* Bootstrap-Koexistenz: der Mockup-Reset darf die globalen Modals nicht kippen */
body#body_cinematic .modal{color:var(--ink)}
/* Login-Modal MUSS VOR dem Burger-Nav-Overlay (z1090) liegen (Owner: öffnete dahinter) */
body#body_cinematic #loginModal{z-index:1300 !important}

/* ============================================================
   HEADER 1:1 wie Main-Live (Owner) — News-Ticker + Burger + Nav-Overlay
   (includes.mobile-header). Die Original-Styles sind ≤992px gegatet; hier
   für ALLE Breiten nachgebildet (scoped auf #body_cinematic), sticky, in
   #b59c7e. JS (Burger-Toggle, .mobile-menu-open) kommt aus main-layout.js.
   ============================================================ */
  body#body_cinematic .mobile-header-shell{display:block}
  /* Sticky-Ticker + Kopfzeile, schwebt über dem Hero (Gradient blendet aus) */
  body#body_cinematic .mobile-header-shell .top-bar-wrapper{
    position:fixed;top:0;left:0;width:100%;z-index:1100;pointer-events:none;
    /* KEIN Header-Hintergrund — der Header sitzt direkt auf dem Jungle (kein Farbunterschied
       hinter dem Header, Owner). Lesbarkeit oben trägt der dunkle Jungle; beim Scrollen zieht
       zusätzlich der Dampf (#hero-fog) mit über die Header-Zone. */
    background:none;
  }
  /* News-Ticker wieder drin (Owner), OHNE eigenen Hintergrund — sitzt transparent auf dem Jungle. */
  body#body_cinematic .mobile-header-shell .news-ticker{
    color:var(--gold);font:600 11px/1 var(--body);letter-spacing:.12em;
    padding:9px 0 5px;width:100%;overflow:hidden;white-space:nowrap;pointer-events:auto;background:none;
  }
  body#body_cinematic .mobile-header-shell .ticker-text{
    display:inline-block;padding-left:100%;animation:ticker-scroll 22s linear infinite;
  }
  body#body_cinematic .mobile-header-shell .mobile-header{
    display:flex;justify-content:space-between;align-items:center;
    padding:10px clamp(20px,5vw,72px) 34px;max-width:1280px;margin:0 auto;
  }
  body#body_cinematic .mobile-header-shell .logo,
  body#body_cinematic .mobile-header-shell .menu-toggle-btn{pointer-events:auto}
  body#body_cinematic .mobile-header-shell .logo{display:inline-flex;align-items:center;text-decoration:none}
  /* Logo (weißes SVG) → #b59c7e getönt */
  body#body_cinematic .mobile-header-shell .mobile-logo-svg{
    display:block;height:clamp(37px,5.65vw,50px);width:auto;   /* +12% dann +10% (Owner) */
    filter:brightness(0) saturate(100%) invert(72%) sepia(14%) saturate(720%) hue-rotate(350deg) brightness(92%) contrast(86%);
  }
  body#body_cinematic .mobile-header-shell .menu-toggle-btn{
    background:none;border:none;color:var(--gold);cursor:pointer;position:relative;
    width:36px;height:36px;display:flex;justify-content:center;align-items:center;z-index:1120;
  }
  body#body_cinematic .mobile-header-shell .menu-toggle-btn svg{
    position:absolute;width:30px;height:30px;transition:opacity .3s,transform .3s;pointer-events:none;
  }
  body#body_cinematic .mobile-header-shell .icon-close{opacity:0;transform:scale(.5) rotate(-90deg)}
  body#body_cinematic .mobile-header-shell .icon-burger{opacity:1;transform:scale(1) rotate(0)}
  body#body_cinematic.mobile-menu-open .mobile-header-shell .icon-burger{opacity:0;transform:scale(.5) rotate(90deg)}
  body#body_cinematic.mobile-menu-open .mobile-header-shell .icon-close{opacity:1;transform:scale(1) rotate(0)}
  body#body_cinematic.mobile-menu-open{overflow:hidden}
  /* Nav-Overlay (Vollbild, Cinematic-Look) */
  body#body_cinematic .mobile-header-shell .nav-overlay{
    position:fixed;inset:0;height:100vh;background:rgba(8,10,9,.9);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:1090;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    opacity:0;pointer-events:none;visibility:hidden;transition:opacity .4s,visibility .4s;
  }
  body#body_cinematic.mobile-menu-open .mobile-header-shell .nav-overlay{opacity:1;pointer-events:auto;visibility:visible}
  body#body_cinematic .mobile-header-shell .nav-content{display:flex;flex-direction:column;align-items:center;width:100%;padding:0 40px}
  body#body_cinematic .mobile-header-shell .nav-links{list-style:none;text-align:center;margin:0 0 24px;padding:0}
  body#body_cinematic .mobile-header-shell .nav-links li{margin-bottom:20px}
  body#body_cinematic .mobile-header-shell .nav-links a{
    text-decoration:none;color:var(--gold);font:500 clamp(20px,3.2vw,30px)/1 var(--serif);
    letter-spacing:.02em;text-transform:uppercase;transition:opacity .2s;
  }
  body#body_cinematic .mobile-header-shell .nav-links a:hover{opacity:.68}
  /* Prominenter Kursplan-Eintrag: goldener Pill (Rahmen), füllt sich beim Hover. Öffnet das
     Kursplan-Modul (data-kursplan-open) und schließt dabei das Burger-Menü (cinematic-v2.js). */
  body#body_cinematic .mobile-header-shell .nav-links li.nav-kursplan a{
    display:inline-block;border:1.6px solid var(--gold);border-radius:999px;
    padding:.32em 1.05em;transition:background .2s,color .2s,opacity .2s;
  }
  body#body_cinematic .mobile-header-shell .nav-links li.nav-kursplan a:hover{
    background:var(--gold);color:var(--deep);opacity:1;
  }
  body#body_cinematic .mobile-header-shell .nav-user-section{display:flex;flex-direction:column;align-items:center;width:100%;max-width:300px}
  body#body_cinematic .mobile-header-shell .user-points{color:var(--bone);font:600 14px/1 var(--body);letter-spacing:.06em;margin-bottom:18px}
  body#body_cinematic .mobile-header-shell .btn-profile{
    width:100%;background:var(--bone);border:none;border-radius:50px;padding:14px 24px;
    display:flex;justify-content:center;align-items:center;gap:10px;color:var(--deep);
    text-decoration:none;font:700 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  }
  /* Das Profil-/Login-Icon (SVG) hatte auf Desktop keine Größe (die Original-Sizing-Regel in
     main-layout.css ist ≤992px-gegatet) → das ungebremste SVG blähte den Button zur riesigen
     Karte auf. Hier fest dimensionieren, damit der Login/Profil-Button ein kompakter Pill bleibt. */
  body#body_cinematic .mobile-header-shell .profile-icon{width:22px;height:22px;flex:0 0 auto}
  body#body_cinematic .mobile-header-shell .nav-bottom-home{
    position:absolute;bottom:38px;left:50%;transform:translateX(-50%);
    background:none;border:none;color:var(--gold);cursor:pointer;width:40px;height:40px;opacity:.8;
  }
  /* Hero rückt unter den schwebenden Ticker. KEIN eigenes Header-Band/Vignette — der Header
     sitzt direkt auf dem durchgehenden Jungle (Owner: „BG-Farbe hinter Header muss = Rest sein"),
     und der Dampf zieht beim Scrollen mit über die Header-Zone (#hero-fog reicht bis y0). */
  body#body_cinematic .hero{padding-top:clamp(78px,11vh,98px)}