/* ============================================================
   Philipp Layer v5 · „Der rote Faden" — Liqium-Revision
   Basis: warmes Papier/Sand + tiefes Weinrot (Nichtfarbe)
   EIN Akzent: tiefes Himbeer-Wein #8E1043 (CTA)
   Rosa/Magenta gesperrt in kleine Flächen (Faden, Striche, Wäschen)
   Typo: Vollkorn + Hanken Grotesk (lokal) · Motion: GSAP, nativ
   ============================================================ */

/* ---------- Fonts (lokal, DSGVO) ---------- */
@font-face{font-family:'Vollkorn';src:url('../assets/fonts/vollkorn-v30-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Vollkorn';src:url('../assets/fonts/vollkorn-v30-latin-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Vollkorn';src:url('../assets/fonts/vollkorn-v30-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Vollkorn';src:url('../assets/fonts/vollkorn-v30-latin-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Vollkorn';src:url('../assets/fonts/vollkorn-v30-latin-600italic.woff2') format('woff2');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'Vollkorn';src:url('../assets/fonts/vollkorn-v30-latin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('../assets/fonts/hanken-grotesk-v12-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('../assets/fonts/hanken-grotesk-v12-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('../assets/fonts/hanken-grotesk-v12-latin-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('../assets/fonts/hanken-grotesk-v12-latin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* ruhige Basis (Liqium-Formel) */
  --papier:#FFFDFB;                       /* fast Weiss, warm — Tag */
  --sand:#FBEFF5;                         /* zartes Rosé — zweite helle Fläche */
  --wein:#8E1043;                         /* Himbeer-Nacht (Marke, kein Braun) */
  --wein-tief:#5C0B2C;                    /* tiefe Himbeer-Nacht — Türen/Fuss */
  --tinte:#33101F; --tinte2:#6E4658;      /* Text auf hell */
  --bandwarm:#FDEBF3;                     /* Text auf Nacht (rosig) */
  --bandwarm2:#EFC3D6;                    /* Sekundärtext auf Nacht */
  --linie:#F2DEE9;                        /* zarte Rosé-Haarlinie */
  --linie-dunkel:rgba(253,235,243,.2);
  /* EIN Akzent */
  --akzent:#8E1043;                       /* CTA-Fläche, Linksfarbe */
  --akzent-tief:#6E0C33;                  /* Hover */
  /* gesperrtes Rosa/Magenta (nur kleine Flächen) + Marken-Nebenfarben */
  --rose:#FBE3EE; --himbeer:#B8156A; --himbeer-tief:#8E1043; --ruf:#9C1052;
  --gold:#F39202; --gold-tief:#C97800;
  --mblau:#1A76C6; --mgruen:#178A46; --mhimbeer:#D62D67; --mrot:#E05038;
  --stern-blau:#9AD2FF; --stern-rosa:#FFA6C8; --stern-gold:#FFD08A;
  --gold-text:#8F5604; --gruen-text:#106B36; --blau-text:#145E9E;
  --schatten:rgba(38,12,21,.16);
  --schatten-weich:rgba(38,12,21,.07);
  /* Schrift */
  --serif:'Vollkorn',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  /* Mass & Motion */
  --bahn:1200px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-inout:cubic-bezier(.77,0,.175,1);
  --head-h:5.4rem;
  --tor-h:clamp(60px,7.5vw,104px);
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--serif);font-size:19px;line-height:1.7;
  background:var(--papier);color:var(--tinte);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--akzent)}
ul,ol{list-style:none;padding:0}
::selection{background:var(--akzent);color:#fff}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,
input:focus-visible,textarea:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.sichtbar-nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Papierkorn */
body::after{
  content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05;
}

.bahn{max-width:var(--bahn);margin-inline:auto;padding-inline:clamp(20px,4vw,56px);width:100%}
section{position:relative}
.kapitel{min-height:100svh;display:grid;align-content:center;position:relative;overflow:clip}

/* Editorial-Bausteine */
.editorial-spalte{max-width:60ch}
.mittig-schmal{max-width:52ch}
.links{margin-inline:0}

/* ---------- Tore: getropfte Kapitelfarbe (dezent) ---------- */
.tor{
  height:var(--tor-h);margin-bottom:calc(-1 * var(--tor-h));
  position:relative;z-index:6;pointer-events:none;
}
.tor svg{width:100%;height:100%;display:block;overflow:visible}
.tor .tk{fill:var(--tor-fuellung,#fff)}
.tor .tk-hauch{opacity:.35;transform:translateY(7px)}
.tor-papier{--tor-fuellung:var(--papier)}
.tor-sand{--tor-fuellung:var(--sand)}
.tor-weintief{--tor-fuellung:var(--wein-tief)}

/* ---------- Typo-Rollen ---------- */
.zwischenruf{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(20px,2.2vw,24px);color:var(--ruf);margin-bottom:clamp(14px,2vh,22px);
  display:inline-flex;align-items:center;gap:16px;
}
.zwischenruf::before,.zwischenruf::after{
  content:"";width:34px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--himbeer));
}
.zwischenruf::after{background:linear-gradient(90deg,var(--himbeer),transparent)}
.ruf-links::after{display:none}
.ruf-links::before{background:linear-gradient(90deg,var(--himbeer),var(--himbeer))}
.hell-ruf{color:var(--stern-rosa)}
.hell-ruf::before{background:linear-gradient(90deg,var(--stern-rosa),var(--stern-rosa))}
.sh{
  font-family:var(--serif);font-weight:600;letter-spacing:-.018em;
  font-size:clamp(34px,4.6vw,62px);line-height:1.06;color:var(--tinte);
  text-wrap:balance;margin-bottom:.45em;
}
.sh-links{text-align:left;max-width:18ch}
.grosszeile{
  font-family:var(--serif);font-weight:500;letter-spacing:-.01em;
  font-size:clamp(23px,2.8vw,33px);line-height:1.4;color:var(--tinte);
  max-width:30ch;text-wrap:pretty;margin-bottom:.5em;
}
.lauftext{color:var(--tinte2);max-width:58ch;font-size:clamp(19px,1.9vw,21px);margin-top:.8em}
.lauftext strong{color:var(--tinte);font-weight:600}
.lauftext.hell{color:var(--bandwarm2)}
.lauftext.betont{color:var(--tinte)}
.betont strong{font-weight:700}

/* ---------- Buttons: EIN Akzent, diszipliniert ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 38px;background:var(--akzent);
  color:#fff;border:none;border-radius:999px;
  font-family:var(--sans);font-size:16.5px;font-weight:700;letter-spacing:.01em;
  cursor:pointer;text-decoration:none;position:relative;
  box-shadow:0 12px 30px rgba(142,16,67,.24),0 2px 6px rgba(38,12,21,.1);
  transition:background .3s var(--ease-out),box-shadow .35s var(--ease-out),transform .16s var(--ease-out);
}
.btn:hover{background:var(--akzent-tief);box-shadow:0 16px 40px rgba(142,16,67,.32),0 3px 8px rgba(38,12,21,.12)}
.btn:active{transform:scale(.97)}
.btn{overflow:hidden}
.btn .ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(255,255,255,.35);transform:scale(0);
  animation:ripple .6s var(--ease-out) forwards;
}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}
.btn-gross{padding:19px 46px;font-size:17.5px}
.btn-klein{padding:11px 24px;font-size:14.5px;border-radius:999px;box-shadow:0 6px 18px rgba(142,16,67,.2)}
.btn-geist{
  background:transparent;color:var(--bandwarm);
  border:1.5px solid rgba(247,236,230,.5);box-shadow:none;
}
.btn-geist:hover{background:rgba(247,236,230,.08);border-color:var(--bandwarm);color:#fff;box-shadow:none}
.cta-reihe{margin-top:clamp(22px,3.4vh,34px)}
.cta-notiz{font-family:var(--sans);font-size:15.5px;line-height:1.6;color:var(--tinte2);margin-top:12px;max-width:46ch}

/* ---------- Punkte, Knoten ---------- */
.punkt{display:inline-block;width:6px;height:6px;border-radius:50%;vertical-align:middle}
.p-gold{background:var(--gold)}
.p-blau{background:var(--mblau)}
.p-gruen{background:var(--mgruen)}
.p-rosa,.p-himbeer{background:var(--mhimbeer)}
.knoten{
  position:relative;
  display:inline-flex;width:32px;height:32px;border-radius:50%;flex:0 0 auto;position:relative;
  border:2px solid currentColor;background:var(--papier);
}
.knoten::before{content:"";position:absolute;inset:7px;border-radius:50%;background:currentColor}
.k-gold{color:var(--gold-tief)}
.k-blau{color:var(--mblau)}
.k-gruen{color:var(--mgruen)}
.k-himbeer{color:var(--mhimbeer)}
.funke{fill:var(--gold)}
.funke-gold{filter:drop-shadow(0 0 6px rgba(243,146,2,.7))}
.flugbahn{stroke:var(--himbeer);stroke-width:1.4;stroke-dasharray:1 7;stroke-linecap:round;opacity:.55}

/* ---------- Kopf: schwebende Kapsel ---------- */
.kopf{
  position:fixed;top:0;left:0;right:0;z-index:120;
  padding:14px clamp(10px,2vw,24px) 0;pointer-events:none;
  transition:transform .45s var(--ease-out);
}
.kopf.versteckt{transform:translateY(-130%)}
.kopf-schale{max-width:1140px;margin-inline:auto;pointer-events:auto;position:relative}
.kopf-in{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:rgba(255,253,251,.84);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid rgba(242,222,233,.9);border-radius:999px;
  padding:9px 12px 9px 22px;position:relative;overflow:hidden;
  box-shadow:0 10px 34px rgba(38,12,21,.08),0 2px 8px rgba(38,12,21,.04);
  transition:box-shadow .4s,background .4s;
}
.kopf.gescrollt .kopf-in{
  background:rgba(255,253,251,.96);
  box-shadow:0 16px 44px rgba(38,12,21,.12),0 2px 8px rgba(38,12,21,.06);
}
.marke{display:flex;align-items:center}
.marke img{width:auto;height:46px;transform-origin:left center;transition:transform .35s var(--ease-out)}
.kopf.gescrollt .marke img{transform:scale(.9)}
.hauptnav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.hauptnav a:not(.btn){
  font-family:var(--sans);font-size:15px;font-weight:600;color:var(--tinte);
  text-decoration:none;position:relative;padding-block:6px;
}
.hauptnav a:not(.btn)::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;border-radius:2px;
  background:var(--akzent);transition:right .35s var(--ease-out);
}
.hauptnav a:not(.btn):hover::after{right:0}
.scroll-fortschritt{position:absolute;bottom:0;left:44px;right:44px;height:2px;pointer-events:none;z-index:3;border-radius:2px;overflow:hidden}
.scroll-fortschritt i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--mblau) 33%,var(--mgruen) 66%,var(--mhimbeer));transform:scaleX(0);transform-origin:left}
.burger{
  display:none;background:none;border:none;cursor:pointer;width:46px;height:46px;
  position:relative;z-index:220;flex:0 0 auto;
}
.burger span{
  position:absolute;left:10px;right:10px;height:2.5px;border-radius:2px;background:var(--tinte);
  transition:transform .4s var(--ease-out),top .4s var(--ease-out);
}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:27px}
.menu-offen .burger span:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-offen .burger span:nth-child(2){top:22px;transform:rotate(-45deg)}

/* ---------- Menü-Overlay ---------- */
.menue{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  background:
    radial-gradient(120% 90% at 85% 8%,rgba(243,146,2,.1),transparent 55%),
    radial-gradient(120% 100% at 10% 100%,rgba(184,21,106,.1),transparent 60%),
    var(--papier);
  opacity:0;pointer-events:none;transition:opacity .45s var(--ease-out);
}
.menue.offen{opacity:1;pointer-events:auto}
.menue nav{display:flex;flex-direction:column;gap:4px;padding:0 clamp(28px,8vw,90px);width:100%;align-items:center;text-align:center}
.menue a{
  font-family:var(--serif);font-weight:600;font-size:clamp(30px,7vw,44px);line-height:1.35;
  color:var(--tinte);text-decoration:none;
  opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
.menue a:hover{color:var(--akzent)}
.menue.offen a{opacity:1;transform:none}
.menue.offen a:nth-child(1){transition-delay:.06s}
.menue.offen a:nth-child(2){transition-delay:.11s}
.menue.offen a:nth-child(3){transition-delay:.16s}
.menue.offen a:nth-child(4){transition-delay:.21s}
.menue.offen a:nth-child(5){transition-delay:.26s}
.menue.offen a:nth-child(6){transition-delay:.33s}
.menue .menue-cta{
  margin-top:22px;font-family:var(--sans);font-size:17px;font-weight:700;
  color:#fff;background:var(--akzent);
  border-radius:999px;padding:16px 30px;
  box-shadow:0 10px 28px rgba(142,16,67,.3);
}
.menue .menue-cta:hover{color:#fff;background:var(--akzent-tief)}

/* ---------- KAPITEL 1 · Hero (asymmetrisch, Tag) ---------- */
.held{background:var(--papier);padding-top:calc(var(--head-h) + 10px);padding-bottom:34px}
.wasserflecken{position:absolute;inset:0;pointer-events:none}
.aurora{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.held .bahn{position:relative;z-index:3}

/* ---------- Intro-Vorhang (Rezept 31, markig statt Zähler) ---------- */
.vorhang{
  position:fixed;inset:0;z-index:500;background:var(--papier);
  display:grid;place-content:center;justify-items:center;gap:18px;
}
.vorhang img{width:min(200px,44vw);height:auto}
.vorhang svg{width:min(260px,56vw);height:auto;overflow:visible}
.vorhang .v-strich{stroke:var(--himbeer);stroke-width:2.6;stroke-linecap:round;fill:none}
.vorhang .v-funke{fill:var(--gold)}
.fleck{position:absolute;border-radius:50%;background:radial-gradient(closest-side,var(--fleck-farbe,var(--rose)),transparent 72%)}
.held .fleck-rose{width:52vw;height:44vw;max-width:760px;max-height:640px;right:-14vw;top:-12vh;--fleck-farbe:var(--rose);opacity:.8}
.held .fleck-gold{width:30vw;height:26vw;max-width:420px;left:-11vw;bottom:0;--fleck-farbe:rgba(243,146,2,.5);opacity:.22}
.held-in{
  display:grid;grid-template-columns:1.04fr .8fr;column-gap:clamp(36px,5vw,90px);
  align-items:center;position:relative;z-index:3;
}
.held-text{text-align:left}
.held-h1{
  font-family:var(--serif);font-weight:600;letter-spacing:-.024em;
  font-size:clamp(52px,7.2vw,112px);line-height:.99;color:var(--tinte);
  margin-bottom:clamp(18px,2.6vh,28px);
}
.held-h1 em{font-style:italic;color:var(--akzent)}
.zeile{display:block;overflow:hidden;padding-block:.045em}
.zl{display:inline-block;will-change:transform;white-space:nowrap}
.held-lead{max-width:52ch;font-size:clamp(19px,1.95vw,21px);line-height:1.58}
.claim{
  margin-top:clamp(18px,2.6vh,26px);font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:clamp(19px,2.1vw,24px);color:var(--akzent);
}
.weiche{font-family:var(--sans);font-size:15.5px;color:var(--tinte2);margin-top:10px;max-width:74ch}
.weiche a{color:var(--akzent);font-weight:600;text-decoration:none;border-bottom:1px solid var(--linie);transition:border-color .3s,color .3s}
.weiche a:hover{color:var(--akzent-tief);border-color:var(--akzent)}

/* Ubbelohde-Badge */
.badge{
  display:flex;align-items:center;gap:16px;margin-top:clamp(20px,3vh,30px);
  padding:14px 20px;border:1px solid var(--linie);border-radius:999px;
  background:rgba(255,255,255,.55);max-width:520px;
}
.badge .siegel{width:56px;height:56px;flex:0 0 auto}
.badge p{font-family:var(--sans);font-size:14px;line-height:1.45;color:var(--tinte2)}
.badge strong{display:block;font-family:var(--serif);font-size:16.5px;color:var(--tinte);font-weight:700}
.badge span{display:block;margin-top:2px}
.vertrauen{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;
  margin-top:18px;
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinte2);
}
.vertrauen span{display:inline-flex;align-items:center}
.vertrauen span + span::before{
  content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--linie);margin-right:16px;
}
.vertrauen .punkt{display:none}

/* Hero-Bild */
.held-bild{position:relative;margin:0;justify-self:end;width:100%;max-width:440px}
.bild-rahmen{
  display:block;position:relative;padding:0;background:none;
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 28px 64px var(--schatten),0 6px 14px var(--schatten-weich);
}
.bild-rahmen picture{display:block;width:100%;height:100%;border-radius:inherit;overflow:hidden}
.bild-rahmen img{border-radius:inherit;width:100%;height:100%;object-fit:cover;background:transparent}
.held-bild .bild-rahmen{aspect-ratio:533/720}
.held-bild::after{
  content:"";position:absolute;inset:-14px;pointer-events:none;
  border:1px solid var(--gold-tief);opacity:.35;
  border-radius:34px;
}
.falter{position:absolute;overflow:visible}
.falter-hero{top:-58px;right:-20px;width:150px;z-index:3}
.falter-korpus{transform-box:fill-box;transform-origin:center;animation:flattern 5.5s ease-in-out infinite}
@keyframes flattern{
  0%,100%{transform:translateY(0) rotate(0deg) scale(1)}
  50%{transform:translateY(-4px) rotate(-5deg) scale(1.04)}
}

/* ---------- KAPITEL 2 · Mitternacht (Sand, editorial links) ---------- */
.mitternacht .bahn{position:relative;z-index:1}
.mitternacht{background:var(--sand);padding:calc(var(--tor-h) + clamp(40px,7vh,80px)) 0 clamp(80px,11vh,130px)}
.mond{position:absolute;top:clamp(90px,16vh,180px);right:clamp(40px,10vw,180px);width:64px;height:64px}
.mond path{fill:var(--himbeer);opacity:.28}
.fleck-mitternacht{
  position:absolute;right:6vw;bottom:8%;width:clamp(240px,30vw,460px);height:clamp(220px,26vw,400px);
  background:radial-gradient(closest-side,var(--rose),transparent 72%);opacity:.8;
  border-radius:50%;
}
.grosszeile + .lauftext{margin-top:1.1em}

/* ---------- KAPITEL 3 · Vier Dinge (Papier, editorial 2×2) ---------- */
.wissen{background:var(--papier);padding:calc(var(--tor-h) + clamp(40px,7vh,80px)) 0 clamp(80px,11vh,130px)}
.wissen-liste{
  margin-top:clamp(30px,5vh,50px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px) clamp(36px,5vw,80px);
  max-width:1040px;
}
.wissen-liste li{display:flex;gap:18px;align-items:flex-start;text-align:left}
.wissen-liste .knoten{margin-top:4px}
.wissen-liste p{
  font-family:var(--serif);font-weight:500;font-size:clamp(19px,2vw,22px);
  line-height:1.5;color:var(--tinte);max-width:44ch;
}


/* ---------- KAPITEL 4 · Reframe (Wein-Nacht, zentriertes Statement) ---------- */
.buehne{
  background:
    radial-gradient(110% 90% at 82% 0%,rgba(225,29,110,.2),transparent 50%),
    linear-gradient(178deg,#A31356 0%,var(--wein) 40%,#6E0C33 100%);
  color:var(--bandwarm);
  padding-top:calc(var(--tor-h) * .8 + clamp(20px,3vh,44px));
  padding-bottom:calc(clamp(90px,12vw,160px) + 40px);
  text-align:center;justify-items:center;
}
.buehne .sterne,.tueren .sterne,.versprechen .sterne{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.st{opacity:.3}
.sc-blau{fill:var(--stern-blau)}
.sc-rosa{fill:var(--stern-rosa)}
.sc-gold{fill:var(--stern-gold)}
/* Baukasten-Regel: die Sterne rotieren durch die Märchenfarben */
.sterne .st:nth-child(3n+1){fill:var(--stern-gold)}
.sterne .st:nth-child(3n+2){fill:var(--stern-blau)}
.sterne .st:nth-child(3n){fill:var(--stern-rosa)}
@keyframes funkeln{0%,100%{opacity:.2}50%{opacity:.95}}
.s1{animation:funkeln 4.2s ease-in-out infinite}
.s2{animation:funkeln 5.6s ease-in-out infinite 1.2s}
.s3{animation:funkeln 6.4s ease-in-out infinite 2.1s}
.sternbild{position:absolute;pointer-events:none;opacity:.7;width:clamp(200px,20vw,330px)}
.sternbild-rechts{right:clamp(10px,5vw,90px);top:50%;translate:0 -50%}
.sternbild-linie{stroke:var(--stern-rosa);stroke-width:1;stroke-dasharray:2 6;stroke-linecap:round;opacity:.5}
.sternbild .st{opacity:.65}
.buehne-mitte{position:relative;z-index:3}
.buehne-leise{
  font-family:var(--serif);font-weight:500;font-size:clamp(24px,3.4vw,42px);
  line-height:1.2;color:var(--bandwarm);opacity:.55;letter-spacing:-.01em;
}
.buehne-laut{
  font-family:var(--serif);font-weight:700;font-size:clamp(26px,4.8vw,62px);
  line-height:1.16;color:#fff;letter-spacing:-.015em;margin-top:6px;text-wrap:balance;
  max-width:22ch;margin-inline:auto;
}
.buehne-laut .w{opacity:1;transition:opacity .25s linear}
html.js .buehne-laut.zerlegt .w{opacity:.18}
html.js .buehne-laut.zerlegt .w.an{opacity:1}
.buehne .lauftext{margin-top:26px;margin-inline:auto}
.buehne .lauftext.hell{color:var(--bandwarm2)}
.idee{
  margin-top:30px;font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:clamp(23px,3.1vw,34px);color:var(--gold);
}
.huegel{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(90px,12vw,160px);z-index:1}
@keyframes glimmen{0%,100%{opacity:.7}50%{opacity:1}}
.gl{animation:glimmen 4.5s ease-in-out infinite}

/* ---------- KAPITEL 5 · Wer ich bin (Papier, Sticky-Split) ---------- */
.erzaehler{background:var(--papier);padding:calc(var(--tor-h) + clamp(30px,5vh,60px)) 0 clamp(70px,10vh,120px)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,90px);align-items:start}
.split-medien{position:sticky;top:0;height:100svh;display:grid;align-content:center;gap:16px}
.bild-stapel{position:relative;width:min(100%,520px);aspect-ratio:4/4.4}
.stapel-bild{
  position:absolute;inset:0;z-index:1;
  /* round: sonst hebt clip-path die border-radius-Rundung auf */
  clip-path:inset(0 0 0 100% round 26px);
  transition:clip-path .8s var(--ease-inout);
}
.stapel-bild.an{clip-path:inset(0 0 0 0 round 26px);z-index:2}
.stapel-zeile{font-family:var(--sans);font-size:14.5px;letter-spacing:.05em;color:var(--tinte2);max-width:520px}
.split-text{padding-top:clamp(20px,6vh,70px)}
.split-kapitel{min-height:72svh;display:grid;align-content:center;text-align:left}
.split-kapitel .grosszeile,.split-kapitel .lauftext{margin-inline:0}
.weg-titel{
  display:flex;align-items:center;gap:16px;
  font-family:var(--serif);font-style:italic;font-weight:600;font-size:22px;
  color:var(--ruf);margin-bottom:16px;
}
.weg-strich{width:44px;height:2px;border-radius:2px;background:var(--himbeer)}
.weg-text p{color:var(--tinte2);font-size:19px;max-width:56ch}
.weg-text p+p{margin-top:.8em}
.weg-text p:first-child::first-letter{
  font-size:2.9em;font-weight:600;color:var(--akzent);
  float:left;line-height:1.16;padding-right:12px;
}

/* ---------- KAPITEL 6 · Drei Arten (Sand) ---------- */
.drei-arten{background:var(--sand);padding:calc(var(--tor-h) + clamp(36px,6vh,70px)) 0 clamp(50px,7vh,80px)}
.flecht-buehne{position:relative;margin-top:10px}
.flechte{width:100%;height:auto;display:block;margin-bottom:2px}
.strang{stroke-width:2.6;stroke-linecap:round;fill:none}
.strang-blau{stroke:var(--mblau)}
.strang-gruen{stroke:var(--mgruen)}
.strang-himbeer{stroke:var(--mhimbeer)}
.arten{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);
  margin-top:clamp(10px,1.8vw,26px);
}
.art{position:relative;padding:6px 4px;text-align:left}
.art-zahl{
  font-family:var(--serif);font-weight:700;font-size:15px;
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;color:#fff;margin-bottom:14px;
  box-shadow:0 6px 16px var(--schatten-weich);
}
.az-blau{background:var(--mblau)}
.az-gruen{background:var(--mgruen)}
.az-himbeer{background:var(--mhimbeer)}
.art h3{font-family:var(--serif);font-weight:600;font-size:clamp(20px,2.1vw,24px);line-height:1.28;color:var(--tinte)}
.art p{color:var(--tinte2);font-size:18.5px;margin-top:8px;max-width:32ch}
.art-3 h3{color:var(--tinte)}
.stillezeile{
  margin-top:28px;font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(20px,2.2vw,24px);color:var(--ruf);
}

/* ---------- Laufband (Wein) ---------- */
.lauf{
  background:var(--wein);border-top:1px solid var(--linie-dunkel);
  border-bottom:1px solid var(--linie-dunkel);overflow:hidden;position:relative;z-index:7;
}
.lauf-in{display:flex;width:max-content;animation:lauf 52s linear infinite}
.lauf-satz{
  font-family:var(--serif);font-weight:500;font-size:clamp(17px,2vw,22px);
  color:var(--bandwarm);padding:16px 0;white-space:nowrap;
}
.lauf-satz span{margin:0 26px}
.ls{font-style:normal;vertical-align:2px;font-size:.8em}
.ls-gold{color:var(--stern-gold)}
.ls-blau{color:var(--stern-blau)}
.ls-rosa{color:var(--stern-rosa)}
@keyframes lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- KAPITEL 7 · Fünf Stufen (Papier, Zickzack) ---------- */
.fuenf-stufen{background:var(--papier);padding:clamp(70px,10vh,120px) 0 clamp(60px,9vh,100px)}
.stufen-kopf{text-align:left;max-width:52ch}
.stufen-in{position:relative;max-width:760px;margin-top:clamp(30px,5vh,54px)}
.stufen-liste{position:relative;display:grid;gap:clamp(26px,4vh,44px)}
.stufe{display:block;position:relative;padding-left:58px;text-align:left}
.stufe .knoten{position:absolute;left:0;top:2px}

.stufe > div{max-width:52ch}
.stufe h3{
  font-family:var(--serif);font-weight:600;font-size:clamp(20px,2.2vw,24px);color:var(--tinte);
  display:inline;
}
.stufe p{color:var(--tinte2);font-size:18.5px;margin-top:6px}
.foto{position:relative;margin:0}
.foto figcaption{
  font-family:var(--sans);font-size:14.5px;letter-spacing:.05em;color:var(--tinte2);
  padding:12px 4px 0;text-align:center;
}

.foto-stufen,.foto-stufen2{display:none}
@media (min-width:1400px){
  .foto-stufen{
    display:block;position:absolute;right:-240px;top:14%;width:215px;z-index:2;
  }
  /* linkes Randbild entfällt — die Riesenziffer trägt die linke Spalte */
  .foto-stufen2{display:none}
  .foto-stufen .bild-rahmen{aspect-ratio:3/3.8}
}
.leichtzeile{
  margin-top:clamp(30px,5vh,52px);font-family:var(--serif);font-weight:600;
  font-size:clamp(21px,2.6vw,28px);color:var(--tinte);max-width:34ch;margin-inline:auto;
}

.spur{
  position:absolute;left:15px;top:18px;bottom:18px;width:2px;border-radius:2px;
  background:var(--linie);pointer-events:none;z-index:0;
}
/* die Stufen-Spur liegt hinter der Knotenachse (Sektion hat links Platz für die Ziffer) */
.stufen-in .spur{left:calc(clamp(0px,10vw,170px) + 15px)}
.spur i{
  display:block;width:100%;height:100%;border-radius:2px;
  background:linear-gradient(180deg,
    var(--gold), var(--mblau) 33%, var(--mgruen) 66%, var(--mhimbeer));
  clip-path:inset(0 0 calc((1 - var(--p,0)) * 100%) 0);
}
html:not(.js) .spur i{--p:1}
.stufen-liste,.schritte{position:relative;z-index:1}
html.js .stufen-liste.spielt .stufe .knoten{color:var(--linie);transition:color .45s ease}
html.js .stufen-liste.spielt .stufe.erreicht .knoten{color:var(--knotenfarbe)}
html.js .schritte.spielt .schritt::before{color:var(--linie);transition:color .45s ease}
html.js .schritte.spielt .schritt.erreicht::before{color:var(--knotenfarbe)}
.stufe .k-gold{--knotenfarbe:var(--gold-tief)}
.stufe .k-blau{--knotenfarbe:var(--mblau)}
.stufe .k-gruen{--knotenfarbe:var(--mgruen)}
.stufe .k-himbeer{--knotenfarbe:var(--mhimbeer)}
.schritt:nth-child(1){--knotenfarbe:var(--gold-tief)}
.schritt:nth-child(2){--knotenfarbe:var(--mblau)}
.schritt:nth-child(3){--knotenfarbe:var(--mgruen)}

/* ---------- KAPITEL 8 · Zusammen (Sand, asymmetrisch) ---------- */
.zusammen{background:var(--sand);padding:calc(var(--tor-h) + clamp(36px,6vh,70px)) 0 clamp(80px,11vh,130px)}
.zusammen-grid{
  position:relative;
  display:grid;grid-template-columns:1fr minmax(360px,460px);
  gap:clamp(36px,5vw,90px);margin-top:clamp(26px,4vh,44px);align-items:start;
}
.schritte{display:grid;gap:clamp(28px,4.5vh,48px);position:relative;text-align:left;max-width:52ch}

.schritt{position:relative;padding-left:52px}
.schritt::before{
  content:"";position:absolute;left:0;top:2px;width:32px;height:32px;border-radius:50%;
  border:2px solid currentColor;
  background:radial-gradient(circle,currentColor 0 6px,var(--sand) 7px);
  box-shadow:0 0 0 6px var(--sand);
}
.schritt:nth-child(1){color:var(--gold-tief)}
.schritt:nth-child(2){color:var(--mblau)}
.schritt:nth-child(3){color:var(--mgruen)}
.schritt-l{
  display:block;font-family:var(--sans);font-size:13.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px;
}
.sl-gold{color:var(--gold-text)}
.sl-blau{color:var(--blau-text)}
.sl-gruen{color:var(--gruen-text)}
.schritt h3{font-family:var(--serif);font-weight:600;font-size:clamp(20px,2.2vw,24px);line-height:1.28;color:var(--tinte)}
.schritt p{color:var(--tinte2);font-size:18px;margin-top:8px}
.versprechen{
  position:sticky;top:clamp(90px,12vh,130px);
  position:relative;overflow:hidden;
  background:
    radial-gradient(110% 120% at 88% -10%,rgba(225,29,110,.24),transparent 55%),
    linear-gradient(150deg,#A31356,var(--wein) 85%);
  color:var(--bandwarm);border-radius:28px;
  padding:clamp(30px,4.2vw,52px) clamp(26px,3.6vw,52px);
  box-shadow:0 28px 66px rgba(38,12,21,.28),0 6px 16px rgba(38,12,21,.16);
  text-align:left;
}
.versprechen{position:sticky}
.versprechen::before{
  content:"";position:absolute;inset:12px;pointer-events:none;z-index:1;
  border:1px solid rgba(253,235,243,.25);
  border-radius:20px;
}
.versprechen-titel{
  font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(21px,2.4vw,26px);
  color:#fff;margin-bottom:14px;
}
.versprechen p{position:relative;max-width:58ch;font-size:clamp(17px,1.8vw,19px);color:var(--bandwarm)}
.versprechen p+p{margin-top:12px}
.tilted{will-change:transform}
.versprechen strong{color:#fff}
.versprechen-notiz{font-style:italic;opacity:.92;font-size:16px !important;margin-top:18px !important}

/* ---------- KAPITEL 9 · Stimmen (Papier) ---------- */
.stimmen{background:var(--papier);padding:calc(var(--tor-h) + clamp(40px,7vh,80px)) 0 clamp(80px,11vh,130px)}
.brief-kontext{
  font-family:var(--sans);font-size:14.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinte2);margin-top:8px;
}
.brief{
  position:relative;max-width:900px;margin-top:18px;
  background:linear-gradient(180deg,#fff,var(--papier) 60%);
  border:none;border-radius:28px;
  padding:clamp(34px,5vw,64px) clamp(28px,5vw,68px) clamp(28px,4vw,48px);
  box-shadow:0 34px 80px var(--schatten),0 6px 16px var(--schatten-weich);
  text-align:left;
}
.brief::before{
  content:"";position:absolute;inset:14px;pointer-events:none;
  border:1px solid var(--linie);
  border-radius:20px;
}
.brief-zier{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin-bottom:clamp(18px,3vw,30px);
}
.brief-zier i{
  height:1px;width:clamp(60px,10vw,120px);
  background:linear-gradient(90deg,transparent,var(--gold-tief));
}
.brief-zier i:last-child{background:linear-gradient(90deg,var(--gold-tief),transparent)}
.brief-zier span{
  width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 3px #fff,0 0 0 4px var(--gold-tief),0 0 10px 2px rgba(243,146,2,.35);
}
.brief blockquote p{
  font-family:var(--serif);font-size:clamp(18.5px,2vw,20.5px);line-height:1.76;color:var(--tinte);
}
.brief blockquote p+p{margin-top:.9em}
.brief blockquote p:first-child::first-letter{
  font-size:3.1em;font-weight:600;color:var(--akzent);
  float:left;line-height:1.15;padding-right:14px;
}
@media (min-width:1200px){ .brief{max-width:840px} }
.brief figcaption{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--linie);
  font-family:var(--serif);font-style:italic;font-size:18px;color:var(--akzent);
}
.wer-ist{font-family:var(--sans);font-style:normal;font-size:15px;color:var(--tinte2)}
.stimmen-reihe{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,64px);
  margin-top:clamp(40px,6vh,70px);max-width:1080px;
}
.stimme{position:relative;padding-top:18px;margin:0;text-align:left}
.stimme::before{
  content:"";position:absolute;top:0;left:0;width:56px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--himbeer),transparent);opacity:.65;
}
.stimme blockquote p{
  font-family:var(--serif);font-size:clamp(18px,1.9vw,20px);line-height:1.72;color:var(--tinte);
}
.stimme figcaption{
  margin-top:14px;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--akzent);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.stimme:nth-child(even){translate:0 clamp(0px,2vw,28px)}

/* ---------- KAPITEL 10 · Momente (Sand, Full-Bleed-Rail, farbig) ---------- */
.momente{
  background:var(--sand);
  padding-top:calc(var(--tor-h) + clamp(28px,4vh,52px));
  padding-bottom:clamp(70px,10vh,110px);
  position:relative;overflow:clip;
}
.momente-schiene{
  display:flex;gap:clamp(20px,2.8vw,36px);align-items:flex-start;
  margin-top:44px;overflow-x:auto;overscroll-behavior-x:contain;
  padding:24px clamp(20px,calc((100vw - var(--bahn))/2 + 56px),50vw) 40px;
  scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--akzent) var(--linie);
}
.momente.gepinnt .momente-schiene{
  overflow:visible;width:max-content;scroll-snap-type:none;scrollbar-width:auto;
}
.momente.gepinnt::after{ /* Rail-Fortschritt */
  content:"";position:absolute;left:50%;bottom:clamp(26px,4vh,44px);translate:-50% 0;
  width:min(260px,30vw);height:2px;border-radius:2px;background:var(--linie);
}
.momente.gepinnt::before{
  content:"";position:absolute;left:calc(50% - min(130px,15vw));bottom:clamp(26px,4vh,44px);
  width:min(260px,30vw);height:2px;border-radius:2px;z-index:1;
  background:linear-gradient(90deg,var(--gold),var(--mblau) 33%,var(--mgruen) 66%,var(--mhimbeer));
  transform:scaleX(var(--rail-p,0));transform-origin:left;
}
.moment{
  flex:0 0 auto;width:clamp(250px,33vw,440px);scroll-snap-align:center;cursor:zoom-in;
  position:relative;transition:transform .45s var(--ease-out);
}
.moment picture{display:block;border-radius:22px;overflow:hidden;background:transparent}
.moment img{
  aspect-ratio:4/3.4;object-fit:cover;width:100%;display:block;
  border-radius:22px;
  box-shadow:0 22px 50px var(--schatten-weich),0 4px 10px var(--schatten-weich);
  transition:box-shadow .45s var(--ease-out),transform .45s var(--ease-out);
}
.moment:nth-child(even){translate:0 18px}
@media (hover:hover) and (pointer:fine){
  .moment:hover{transform:translateY(-6px)}
  .moment:hover img{box-shadow:0 30px 64px var(--schatten)}
}
.moment figcaption{font-family:var(--sans);font-size:14.5px;letter-spacing:.04em;color:var(--tinte2);padding:12px 4px 2px;text-align:center}

/* ---------- KAPITEL 11 · FAQ (Papier, editorial) ---------- */
.fragen{background:var(--papier);padding:calc(var(--tor-h) + clamp(40px,7vh,80px)) 0 clamp(80px,11vh,130px)}
.fragen-grid{display:grid;grid-template-columns:minmax(220px,.7fr) 1.3fr;gap:clamp(30px,5vw,90px);align-items:start}
.fragen-grid .sh-links{position:sticky;top:calc(var(--head-h) + 30px)}
.faq{text-align:left}
.frage{border-top:1px solid var(--linie)}
.frage:last-child{border-bottom:1px solid var(--linie)}
.frage summary{
  list-style:none;cursor:pointer;position:relative;
  font-family:var(--serif);font-weight:600;font-size:clamp(18px,2vw,21.5px);
  color:var(--tinte);padding:21px 48px 21px 0;line-height:1.42;
  transition:color .3s;
}
.frage summary:hover{color:var(--akzent)}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{
  content:"";position:absolute;right:10px;top:50%;width:14px;height:14px;translate:0 -50%;
  background:
    linear-gradient(var(--gold-tief),var(--gold-tief)) center/14px 2px no-repeat,
    linear-gradient(var(--gold-tief),var(--gold-tief)) center/2px 14px no-repeat;
  transition:transform .4s var(--ease-out);
}
.frage[open] summary::after{transform:rotate(45deg)}
.antwort{padding:0 0 22px;color:var(--tinte2);font-size:19px;max-width:62ch}

/* ---------- KAPITEL 12 · Zwei Türen (tiefe Nacht, getrennt) ---------- */
.tueren{
  background:linear-gradient(180deg,var(--wein) 0%,var(--wein-tief) 55%);color:var(--bandwarm);
  padding:calc(var(--tor-h) + clamp(50px,8vh,90px)) 0 clamp(90px,12vh,140px);
  overflow:hidden;
}
.tueren-grid{
  display:grid;grid-template-columns:1fr 1px 1fr;gap:clamp(30px,4.5vw,80px);
  position:relative;z-index:2;align-items:start;
}
.tueren-trenner{width:1px;align-self:stretch;background:linear-gradient(180deg,transparent,var(--linie-dunkel) 20%,var(--linie-dunkel) 80%,transparent)}
.tuer{text-align:left}
.tuer-titel{
  font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.4vw,42px);
  color:#fff;letter-spacing:-.012em;margin-bottom:8px;
}
.tuer .lauftext{max-width:46ch}
.tuer .btn-geist{margin-top:26px}

/* ---------- KAPITEL 13 · Finale + Formular (Papier, asymmetrisch) ---------- */
.finale{background:var(--papier);padding-top:calc(var(--tor-h) + clamp(30px,5vh,60px));padding-bottom:clamp(70px,10vh,110px)}
.finale .fleck-rose{width:54vw;height:42vw;max-width:780px;left:-16vw;top:6%;--fleck-farbe:var(--rose);opacity:.75}
.finale .fleck-gold{width:28vw;height:24vw;max-width:400px;right:2vw;bottom:0;--fleck-farbe:rgba(243,146,2,.5);opacity:.2}
.falter-finale{top:clamp(70px,12vh,130px);right:clamp(16px,7vw,140px);width:150px}
.finale-grid{
  display:grid;grid-template-columns:1fr minmax(400px,520px);
  gap:clamp(40px,6vw,110px);align-items:center;position:relative;z-index:3;
}
.finale-links{text-align:left}
.finale-titel{
  font-family:var(--serif);font-weight:600;letter-spacing:-.018em;
  font-size:clamp(38px,4.8vw,66px);line-height:1.05;color:var(--tinte);text-wrap:balance;
}
.knapp{
  font-family:var(--serif);font-weight:600;font-size:clamp(17.5px,1.9vw,20px);
  color:var(--tinte);margin-top:20px;max-width:44ch;
}
.direkt{font-family:var(--sans);font-size:17px;color:var(--tinte2);margin-top:26px}
.direkt a{color:var(--akzent);font-weight:600;text-decoration:none;border-bottom:1px solid var(--linie)}
.direkt a:hover{color:var(--akzent-tief);border-color:var(--akzent)}

/* Formular (Rezept 56, angepasst) */
.anfrage{
  position:relative;background:#fff;border:1px solid var(--linie);
  border-radius:24px;padding:clamp(28px,3.6vw,44px);
  box-shadow:0 30px 70px var(--schatten),0 6px 16px var(--schatten-weich);
  text-align:left;
}
.anfrage-titel{
  font-family:var(--serif);font-weight:600;font-size:clamp(23px,2.4vw,28px);
  color:var(--tinte);letter-spacing:-.01em;
}
.feld{position:relative;margin-top:1.9rem}
.feld input,.feld textarea{
  width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--linie);
  color:var(--tinte);font:500 18px/1.5 var(--sans);
  padding:.7rem 0 .5rem;outline:none;resize:none;border-radius:0;
}
.feld label{
  position:absolute;left:0;top:.68rem;color:var(--tinte2);pointer-events:none;
  font:500 17px var(--sans);
  transition:transform .3s var(--ease-out),color .3s;transform-origin:left;
}
.feld.gefuellt label,.feld :focus + label{transform:translateY(-1.45rem) scale(.78);color:var(--akzent)}
.feld .balken{position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--akzent);transition:width .35s var(--ease-out)}
.feld :focus ~ .balken{width:100%}
.feld.fehlt input,.feld.fehlt textarea{border-bottom-color:var(--mrot)}
.feld.fehlt label{color:var(--mrot)}
.feld .fehler-text{
  position:absolute;right:0;bottom:-1.25rem;font:500 13px var(--sans);color:var(--mrot);
  opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s;
}
.feld.fehlt .fehler-text{opacity:1;transform:none}
.wackeln{animation:wackeln .4s cubic-bezier(.36,.07,.19,.97)}
@keyframes wackeln{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
.anfrage-senden{width:100%;margin-top:2.2rem}
.anfrage-senden[disabled]{opacity:.7;cursor:progress}
.anfrage .cta-notiz{max-width:none;text-align:center;font-size:14px}
.anfrage-danke{
  position:absolute;inset:0;border-radius:24px;background:#fff;
  display:grid;place-content:center;justify-items:center;text-align:center;gap:10px;
  padding:30px;opacity:0;transition:opacity .5s ease;
}
/* hidden-Attribut gewinnt gegen display:grid — sonst schluckt das unsichtbare
   Overlay jeden Klick auf das Formular */
.anfrage-danke[hidden]{display:none}
.anfrage-danke.an{opacity:1}
.anfrage-danke .siegel{width:74px;height:74px}
.anfrage-danke h3{font-family:var(--serif);font-weight:600;font-size:clamp(23px,2.4vw,28px);color:var(--tinte)}
.anfrage-danke p{font-family:var(--sans);font-size:16.5px;color:var(--tinte2);max-width:34ch}
.anfrage-panne{
  margin-top:14px;font:500 15px/1.55 var(--sans);color:var(--tinte);
  background:var(--rose);border-radius:10px;padding:12px 14px;
}
.anfrage-panne a{color:var(--akzent);font-weight:600}

#konfetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:400}

/* ---------- Fuss (tiefe Nacht) ---------- */
.fuss{background:var(--wein-tief);color:var(--bandwarm);padding:calc(var(--tor-h) * .75 + 34px) 0 120px;position:relative}
.fuss-in{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.fuss-logo{width:110px;height:auto;margin-bottom:14px;filter:drop-shadow(0 2px 10px rgba(0,0,0,.3))}
.fuss-zeile{display:flex;align-items:center;gap:16px;font-family:var(--sans);font-size:15px;flex-wrap:wrap;justify-content:center}
.fuss-strich{flex:1;min-width:40px;height:1px;background:currentColor;opacity:.4;transform:scaleX(0);transform-origin:center;transition:transform 1.4s var(--ease-out)}
.fuss-in.in .fuss-strich{transform:scaleX(1)}
.fuss-kontakt{font-family:var(--sans);font-size:15px}
.fuss-kontakt a{color:var(--bandwarm);text-decoration:none;border-bottom:1px solid rgba(247,236,230,.35)}
.fuss-kontakt a:hover{color:#fff;border-color:var(--gold)}
.fuss-recht{font-family:var(--sans);font-size:14px;opacity:.75}
.credit{margin-top:16px;font-family:var(--sans);font-size:14px}
.credit a{
  color:#D21F58;text-decoration:none;font-weight:700;
  background:#fff;border-radius:20px;padding:4px 12px;margin-left:2px;
}
.credit a:hover{text-decoration:underline}

/* ---------- Mobile Sticky-CTA ---------- */
.mobil-cta{display:none}
@media (max-width:920px){
  .mobil-cta{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:90;
    padding:.65rem .9rem calc(.65rem + env(safe-area-inset-bottom));
    background:rgba(255,253,251,.93);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
    border-top:1px solid var(--linie);
    transform:translateY(110%);transition:transform .5s var(--ease-out);
  }
  .mobil-cta.an{transform:none}
  .mobil-cta .btn{width:100%;padding-block:.95rem}
  .menu-offen .mobil-cta{transform:translateY(110%)}
}

/* ---------- Lichtbox ---------- */
.lichtbox{
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:rgba(38,12,21,.96);
}
.lichtbox[hidden]{display:none}
.lb-buehne{max-width:min(90vw,1100px);max-height:86vh;display:flex;flex-direction:column;gap:12px}
.lb-buehne img{max-height:76vh;width:auto;max-width:100%;margin-inline:auto;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb-buehne figcaption{font-family:var(--sans);font-size:14.5px;color:var(--bandwarm);text-align:center}
.lb-zu{
  position:absolute;top:18px;right:22px;background:none;border:none;color:var(--bandwarm);
  font-size:38px;line-height:1;cursor:pointer;padding:8px;
}
.lb-pfeil{
  position:absolute;top:50%;translate:0 -50%;background:rgba(247,236,230,.1);border:1px solid rgba(247,236,230,.35);
  color:var(--bandwarm);font-size:30px;line-height:1;width:54px;height:54px;border-radius:50%;cursor:pointer;
  transition:background .3s,border-color .3s;
}
.lb-pfeil:hover{background:rgba(243,146,2,.25);border-color:var(--gold)}
.lb-zurueck{left:clamp(8px,3vw,36px)}
.lb-vor{right:clamp(8px,3vw,36px)}
.lb-zaehler{position:absolute;bottom:20px;left:50%;translate:-50% 0;font-family:var(--sans);font-size:14px;color:var(--bandwarm);letter-spacing:.12em}

/* ---------- Reveals ---------- */
html.js [data-rv]{opacity:0;transform:translateY(26px)}
html.js [data-rv].rv-in{opacity:1;transform:none;transition:opacity .8s ease,transform .8s var(--ease-out)}
html.js .held-bild,html.js .strang{visibility:visible}
html.js .held-bild{opacity:0}
html.js .strang{visibility:hidden}
html.js .strang.bereit{visibility:visible}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1180px){
  .held-bild{max-width:380px}
  .falter-hero{right:-10px;width:130px}
}
@media (max-width:1020px){
  .hauptnav{display:none}
  .burger{display:block}
  .kopf-in{padding:7px 8px 7px 16px}
  .marke img{height:40px}
  .held-in{grid-template-columns:1fr;text-align:center}
  .held-text{display:flex;flex-direction:column;align-items:center;text-align:center;order:1}
  .held-h1{font-size:clamp(46px,11vw,72px)}
  .held-bild{order:2;justify-self:center;margin-top:52px;max-width:min(340px,76vw)}
  .ruf-links::after{display:inline-block}
  .sh-links{text-align:center;max-width:none;margin-inline:auto}
  .editorial-spalte,.mittig-schmal{margin-inline:auto;text-align:center}
  .lauftext,.grosszeile{margin-inline:auto}
  .lauftext.links{margin-inline:auto;text-align:center}
  .badge{margin-inline:auto;text-align:left}
  .vertrauen{justify-content:center}
  .wissen-liste{grid-template-columns:1fr;max-width:640px;margin-inline:auto}
  .wissen-liste li{flex-direction:column;align-items:center;text-align:center;gap:12px}
  .wissen-liste li:nth-child(even){translate:0 0}
  .split{grid-template-columns:1fr}
  .split-medien{position:static;height:auto;justify-items:center;order:2;margin-top:30px}
  .split-text{order:1;padding-top:0}
  .split-kapitel{min-height:0;padding-block:26px;justify-items:center;text-align:center}
  .split-kapitel .grosszeile,.split-kapitel .lauftext{margin-inline:auto}
  .weg-titel{justify-content:center}
  .weg-text{text-align:left}
  .stapel-bild{position:static;clip-path:none;transition:none;display:none}
  .stapel-bild.an{display:block}
  .bild-stapel{aspect-ratio:auto;width:min(400px,86vw)}
  .stapel-bild .bild-rahmen,.bild-stapel .bild-rahmen{aspect-ratio:3/2.4}
  .arten{grid-template-columns:1fr;gap:30px;justify-items:center}
  .art{text-align:center}
  .art p{margin-inline:auto}
  .flechte{max-width:560px;margin-inline:auto}
  .stufen-kopf{text-align:center;margin-inline:auto}
  .stufen-in{margin-inline:auto}
  .stufe{padding-left:0;text-align:center}
  .stufe .knoten{position:relative;left:auto;top:auto;margin:0 auto 12px;background:var(--papier)}
  .spur{left:50%;translate:-50% 0}
  .stufe > div{margin-inline:auto}
  .zusammen-grid{grid-template-columns:1fr;gap:40px}
  .schritte{margin-inline:auto;max-width:480px}
  .schritt{padding-left:0;text-align:center;display:grid;justify-items:center}
  .schritt::before{position:relative;left:auto;top:auto;margin:0 auto 14px;background:radial-gradient(circle,currentColor 0 6px,var(--sand) 7px)}
  .schritt p{margin-inline:auto}
  .spur-schritte{left:50%;translate:-50% 0}
  .versprechen{position:relative;top:0;max-width:640px;margin-inline:auto;text-align:center}
  .versprechen p{margin-inline:auto}
  .stimmen-reihe{grid-template-columns:1fr;max-width:600px;margin-inline:auto}
  .stimme{text-align:center;padding-top:18px}
  .stimme::before{left:50%;translate:-50%}
  .stimme:nth-child(even){translate:0 0}
  .stimme figcaption{justify-content:center}
  .brief{margin-inline:auto}
  .brief-kontext{display:block;text-align:center}
  .fragen-grid{grid-template-columns:1fr;gap:20px}
  .fragen-grid .sh-links{position:static}
  .tueren-grid{grid-template-columns:1fr;gap:48px}
  .tueren-trenner{width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--linie-dunkel) 20%,var(--linie-dunkel) 80%,transparent)}
  .tuer{text-align:center;display:flex;flex-direction:column;align-items:center}
  .tuer .lauftext{margin-inline:auto;text-align:center}
  .finale-grid{grid-template-columns:1fr;gap:44px}
  .finale-links{text-align:center;display:flex;flex-direction:column;align-items:center}
  .knapp{margin-inline:auto}
  .falter-finale{right:4vw;width:110px;top:clamp(60px,10vh,110px)}
  .falter-hero{display:none}
  .stimmen .bahn,.momente-kopf,.wissen .bahn,.mitternacht .bahn,.drei-arten .bahn{text-align:center}
  .mond{top:clamp(70px,10vh,120px)}
  .fuss{padding-bottom:140px}
}
@media (max-width:640px){
  .btn{width:100%;max-width:420px}
  .btn-klein{width:auto}
  .cta-reihe{display:flex;flex-direction:column;align-items:center;width:100%}
  .held-h1{font-size:clamp(42px,12.5vw,56px)}
  .zwischenruf::before,.zwischenruf::after{width:20px}
  .moment{width:min(78vw,340px)}
  .lb-pfeil{width:44px;height:44px;font-size:24px}
  .brief blockquote p:first-child::first-letter,
  .weg-text p:first-child::first-letter{float:none;font-size:inherit;color:inherit;padding:0;font-weight:inherit;line-height:inherit}
  .weg-text{text-align:left}
  .anfrage{padding:24px 20px}
  .buehne-laut .zl{white-space:normal}
  .badge{flex-direction:column;text-align:center;gap:10px}
}

/* ============================================================
   Reduced Motion — alle Endzustände erzwingen
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html.js [data-rv]{opacity:1;transform:none;transition:none}
  html.js .held-bild{opacity:1}
  html.js .strang{visibility:visible;stroke-dasharray:none !important;stroke-dashoffset:0 !important}
  .zl{transform:none !important}
  .zeile{overflow:visible}
  .lauf-in{animation:none}
  .s1,.s2,.s3,.gl{animation:none;opacity:.5}
  .falter-korpus{animation:none}
  .fuss-strich{transform:scaleX(1);transition:none}
  .menue,.menue a,.moment,.btn,.kopf-in,.marke img,.stapel-bild{transition:none}
  .stapel-bild{clip-path:none}
  .stapel-bild:not(.an){display:none}
  .moment img{filter:none}
  *{scroll-behavior:auto !important}
}

/* ---------- Stimmprobe (erscheint nur mit vorhandener Audiodatei) ---------- */
.stimmprobe{margin-top:clamp(40px,6vh,64px);max-width:640px}
.stimmprobe[hidden]{display:none}
.probe{
  display:flex;align-items:center;gap:clamp(16px,2.4vw,26px);margin-top:18px;
  background:#fff;border:1px solid var(--linie);border-radius:24px;
  padding:clamp(16px,2.2vw,22px) clamp(18px,2.6vw,26px);
  box-shadow:0 18px 44px var(--schatten-weich);
}
.probe-knopf{
  flex:0 0 auto;width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;
  background:var(--akzent);color:#fff;display:grid;place-content:center;position:relative;
  box-shadow:0 10px 24px rgba(142,16,67,.26);
  transition:background .3s var(--ease-out),transform .16s var(--ease-out);
}
.probe-knopf:hover{background:var(--akzent-tief)}
.probe-knopf:active{transform:scale(.95)}
.probe-knopf svg{width:26px;height:26px;fill:currentColor}
.probe-knopf .ikon-pause{display:none}
.probe-knopf.laeuft .ikon-play{display:none}
.probe-knopf.laeuft .ikon-pause{display:block}
.probe-mitte{flex:1;min-width:0}
.probe-titel{
  font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinte2);
}
.probe-welle{display:block;width:100%;height:46px;margin-top:8px}
.probe-zeit{
  display:flex;justify-content:space-between;
  font-family:var(--sans);font-size:13.5px;color:var(--tinte2);
  font-variant-numeric:tabular-nums;margin-top:4px;
}

/* ---------- Anlass-Chips im Hero (Conversion) ---------- */
.anlaesse{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(18px,2.6vh,26px);
}
.anlass-chip{
  font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--tinte);
  background:rgba(255,255,255,.7);border:1px solid var(--linie);border-radius:999px;
  padding:9px 18px;cursor:pointer;text-decoration:none;
  transition:background .3s var(--ease-out),border-color .3s var(--ease-out),color .3s var(--ease-out);
}
.anlass-chip:hover{background:var(--akzent);border-color:var(--akzent);color:#fff}
.anlass-titel{
  font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinte2);margin-top:clamp(20px,3vh,30px);
}

/* ---------- FAQ-Mikro-CTA ---------- */
.faq-mikro{
  margin-top:26px;font-family:var(--sans);font-size:16px;color:var(--tinte2);
}
.faq-mikro a{color:var(--akzent);font-weight:600;text-decoration:none;border-bottom:1px solid var(--linie)}
.faq-mikro a:hover{border-color:var(--akzent)}

@media (max-width:1020px){
  .anlaesse{justify-content:center}
  .stimmprobe{margin-inline:auto;text-align:center}
  .probe{text-align:left}
}
@media (max-width:640px){
  .probe{flex-direction:column;align-items:stretch;text-align:center}
  .probe-knopf{margin:0 auto}
}

/* ============================================================
   Element-Ausbau v7 — Sektionen aufgewertet
   ============================================================ */

/* 1) Mitternacht: Uhrzeit als hauchzarte Typo, Gedanken gestaffelt */
.uhrzeit{
  position:absolute;right:clamp(16px,4vw,80px);top:48%;translate:0 -50%;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(72px,10.5vw,168px);line-height:1;letter-spacing:-.04em;
  color:var(--himbeer);opacity:.085;pointer-events:none;z-index:0;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;
}
.uhrzeit i{font-style:normal;opacity:.5;margin:0 .04em}
html.js .gedanke{transition-delay:var(--gd,0s)}
.gedanke:nth-of-type(2){--gd:.12s}
.gedanke:nth-of-type(3){--gd:.24s}
.gedanke:nth-of-type(4){--gd:.36s}

/* 2) Vier Dinge: Faden unterstreicht das Schlüsselwort */
.unterstrich{position:relative;white-space:nowrap}
.unterstrich::after{
  content:"";position:absolute;left:-2px;right:-2px;bottom:-2px;height:8px;
  background:no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 40 2, 70 9, 108 5 S 170 2, 198 6' fill='none' stroke='%23B8156A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease-out) .15s;
}
.rv-in .unterstrich::after,[data-rv].rv-in .unterstrich::after{transform:scaleX(1)}

/* 3) Fünf Stufen: mitwandernde Riesenziffer, aktive Stufe scharf */
.stufen-in{padding-left:clamp(0px,10vw,170px)}
.stufen-zaehler{
  position:absolute;left:0;top:0;width:clamp(90px,11vw,150px);height:100%;
  pointer-events:none;display:none;
}
.stufen-zaehler span{
  position:sticky;top:44vh;display:block;
  font-family:var(--serif);font-weight:600;
  font-size:clamp(64px,8vw,124px);line-height:1;letter-spacing:-.04em;
  color:var(--akzent);opacity:.16;font-variant-numeric:tabular-nums;
  transition:opacity .4s ease;
}
@media (min-width:1021px){ .stufen-zaehler{display:block} }
.stufe{transition:opacity .5s ease}
html.js .stufen-liste.spielt .stufe{opacity:.42}
html.js .stufen-liste.spielt .stufe.aktiv{opacity:1}

/* 4) FAQ als Dialog: Frage = Stimme der Gastgeberin, Antwort = Philipp */
.frage summary{font-style:italic}
.frage summary::before{content:"„";color:var(--himbeer);opacity:.55;margin-right:2px}
.frage summary.hat-quote::before{content:none}
.frage summary::first-line{font-style:italic}
.antwort p{position:relative;padding-left:44px;font-style:normal}
.antwort .wer{
  position:absolute;left:0;top:2px;
  width:30px;height:30px;border-radius:50%;
  display:grid;place-content:center;
  font-family:var(--serif);font-weight:700;font-size:15px;
  color:#fff;background:var(--akzent);
}

/* 6) Stimmen: grosses Anführungszeichen als Hauchform */
.stimmen-reihe{position:relative}
.grosszitat{
  position:absolute;left:50%;top:-56px;translate:-50% 0;
  font-family:var(--serif);font-weight:700;font-size:clamp(140px,18vw,260px);
  line-height:1;color:var(--himbeer);opacity:.07;pointer-events:none;
}

/* 7) Türen: warmer Lichtschein beim Überfahren */
.tuer{position:relative;border-radius:28px;padding:clamp(22px,3vw,34px);transition:background .5s ease}
.tuer::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(80% 60% at 50% 0%,rgba(243,146,2,.16),transparent 70%);
  opacity:0;transition:opacity .6s ease;
}
@media (hover:hover) and (pointer:fine){
  .tuer:hover::before{opacity:1}
  .tuer:hover{background:rgba(253,235,243,.05)}
}

/* 8) Formular: der Falter fliegt beim Absenden davon */
.abflug{
  position:absolute;right:6%;top:8%;width:min(200px,42%);
  pointer-events:none;opacity:0;overflow:visible;
}
.abflug-bahn{stroke:var(--himbeer);stroke-width:1.4;stroke-dasharray:1 7;stroke-linecap:round;opacity:.5}
.abflug-falter{transform-box:fill-box;transform-origin:center}

@media (max-width:1020px){
  .uhrzeit{font-size:clamp(70px,22vw,140px);opacity:.07;top:auto;bottom:6%;right:4vw;translate:0 0}
  .stufen-in{padding-left:0}
  .grosszitat{top:-40px}
}
@media (prefers-reduced-motion:reduce){
  .unterstrich::after{transform:scaleX(1);transition:none}
  html.js .stufen-liste.spielt .stufe{opacity:1}
  .abflug{display:none}
}

/* ============================================================
   Lichtflächen — die hellen Kapitel bekommen Tiefe, Bewegung, Leben
   ============================================================ */
.lichtflaeche{position:relative;isolation:isolate}
.lichtflaeche > .bahn{position:relative;z-index:2}

/* 1) Sonnen-Halo: eine Lichtquelle gibt der Fläche Tiefe */
.halo{
  position:absolute;pointer-events:none;z-index:0;
  width:min(120vw,1500px);aspect-ratio:1.35;
  border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(255,248,238,.95) 0%, rgba(253,238,232,.6) 38%, rgba(251,239,245,0) 72%);
}
.lichtflaeche[data-licht="warm"] .halo{right:-18vw;top:-30vh}
.lichtflaeche[data-licht="kuehl"] .halo{left:-22vw;bottom:-34vh;
  background:radial-gradient(closest-side,
    rgba(255,252,246,.9) 0%, rgba(251,227,238,.55) 40%, rgba(251,239,245,0) 74%);}

/* 2) Tagschimmer: dieselbe Shader-Technik wie im Hero, nur blasser und langsamer */
.tagschimmer{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:.85;
}

/* 3) Lichtpartikel: das Tag-Gegenstück zum Sternenfeld */
.staub{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.staub i{
  position:absolute;bottom:-8%;width:4px;height:4px;border-radius:50%;
  background:radial-gradient(circle,rgba(243,146,2,.55),rgba(243,146,2,0) 70%);
  animation:schweben var(--dauer,26s) linear var(--verzug,0s) infinite;
  opacity:0;
}
@keyframes schweben{
  0%{transform:translate3d(0,0,0) scale(.7);opacity:0}
  12%{opacity:var(--staerke,.7)}
  80%{opacity:var(--staerke,.7)}
  100%{transform:translate3d(var(--drift,14px),calc(-1 * var(--weg,110vh)),0) scale(1.15);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .staub{display:none}
}

/* ============================================================
   Die Laterne — ein warmer Schein folgt dem Lesen
   ============================================================ */
.laterne-schein{
  position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;
  pointer-events:none;z-index:3;opacity:0;
  /* nur ein Hauch — sichtbar ausschliesslich über den hellen Rosé-Flächen */
  background:radial-gradient(closest-side,
    rgba(243,146,2,.055) 0%, rgba(243,146,2,.022) 45%, rgba(243,146,2,0) 74%);
  transition:opacity .7s ease;
  will-change:transform;
}
.laterne-schein.an{opacity:1}

/* ============================================================
   Kapitelmarken am Rand — die Seite liest sich wie ein Buch
   ============================================================ */
.kapitelmarke{
  position:fixed;left:clamp(10px,2vw,26px);top:50%;translate:0 -50%;
  z-index:60;pointer-events:none;
  display:flex;align-items:center;gap:12px;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--sans);font-size:12.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--tinte2);
  opacity:0;transition:opacity .5s ease;
}
.kapitelmarke.an{opacity:.62}
.kapitelmarke .ziffer{
  font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:15px;letter-spacing:.06em;text-transform:none;color:var(--akzent);
}
.kapitelmarke .strich{width:1px;height:34px;background:var(--linie)}
/* auf dunklen Kapiteln hell schreiben */
.kapitelmarke.dunkel{color:var(--bandwarm2)}
.kapitelmarke.dunkel .ziffer{color:var(--stern-gold)}
.kapitelmarke.dunkel .strich{background:rgba(253,235,243,.35)}
@media (max-width:1180px){ .kapitelmarke{display:none} }

/* ================================================================
   §25 · Vier Aufwertungen (31.08.)
   ================================================================ */

/* ---------- 1) Kopf lernt die Sektion ----------
   Steht die Kapsel über einem dunklen Kapitel (Bühne, Türen, Fuß),
   dreht sie ins Tiefe: Ground, Schrift, Logo, Button, Burger.        */
.kopf-in{transition:box-shadow .45s var(--ease-out),background .45s var(--ease-out),border-color .45s var(--ease-out)}
.kopf.auf-dunkel .kopf-in{
  background:rgba(52,8,26,.62);
  border-color:rgba(253,235,243,.16);
  box-shadow:0 14px 40px rgba(20,4,11,.34),0 2px 8px rgba(20,4,11,.2);
}
.kopf.auf-dunkel.gescrollt .kopf-in{
  background:rgba(52,8,26,.78);
  box-shadow:0 18px 50px rgba(20,4,11,.42),0 2px 8px rgba(20,4,11,.24);
}
/* Logo als Creme-Ausbruch — die dunkle „Erzählkünstler“-Zeile bliebe sonst weg */
.marke img{transition:transform .35s var(--ease-out),filter .45s var(--ease-out)}
.kopf.auf-dunkel .marke img{filter:brightness(0) invert(1) opacity(.95)}
.kopf.auf-dunkel .hauptnav a:not(.btn){color:var(--bandwarm)}
.kopf.auf-dunkel .hauptnav a:not(.btn)::after{background:var(--gold)}
.kopf.auf-dunkel .burger span{background:var(--bandwarm)}
/* Kapsel-Button kehrt sich um: Creme auf Wein */
.kopf.auf-dunkel .btn-klein{
  background:var(--bandwarm);color:var(--wein-tief);
  box-shadow:0 8px 22px rgba(20,4,11,.34);
}
.kopf.auf-dunkel .btn-klein:hover{background:#fff;color:var(--wein-tief)}
.kopf.auf-dunkel .btn-klein .ripple{background:rgba(92,11,44,.28)}
/* Fortschrittslinie braucht auf Dunkel eine Spur mehr Licht */
.kopf.auf-dunkel .scroll-fortschritt i{filter:saturate(1.15) brightness(1.18)}

/* ---------- 2) Vollbild-Band ----------
   RÜCKGÄNGIG: im <body> die Klasse „mit-vollbild“ entfernen.
   Das Band verschwindet dann restlos, sonst ändert sich nichts.     */
body:not(.mit-vollbild) .vollbild-band{display:none}
.vollbild-band{
  position:relative;width:100%;overflow:hidden;isolation:isolate;
  height:clamp(300px,44vh,470px);background:var(--sand);
}
.vollbild-band img{
  position:absolute;inset:0;width:100%;height:140%;top:-20%;
  object-fit:cover;object-position:50% 42%;
  display:block;
}
/* obere und untere Kante lösen sich in die Sandfläche auf */
.vollbild-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    linear-gradient(180deg,var(--sand) 0%,rgba(251,239,245,0) 16%),
    linear-gradient(0deg,var(--sand) 0%,rgba(251,239,245,0) 16%),
    radial-gradient(130% 90% at 50% 45%,rgba(92,11,44,0) 52%,rgba(92,11,44,.16) 100%);
}

/* ---------- 3) Körnung + Hauch Vignette ----------
   RÜCKGÄNGIG: im <body> die Klasse „mit-papier“ entfernen.          */
body.mit-papier::after{
  content:"";position:fixed;inset:0;z-index:115;pointer-events:none;
  opacity:.03;
  background-image:
    radial-gradient(125% 105% at 50% 50%,rgba(92,11,44,0) 58%,rgba(92,11,44,.5) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:100% 100%,180px 180px;
}

/* ---------- 4) Kapitelziffer als Wasserzeichen ---------- */
.kap-kopf{position:relative;z-index:0}
.kap-wz{
  position:absolute;z-index:-1;pointer-events:none;user-select:none;
  left:clamp(20px,4vw,56px);top:-.30em;
  translate:-6px 0;
  font-family:var(--serif);font-weight:600;font-style:normal;
  font-size:clamp(78px,11vw,168px);line-height:1;letter-spacing:-.015em;
  color:var(--himbeer);opacity:.075;
}
.kap-wz-mitte{left:50%;translate:-50% 0}
.kap-wz-hell{color:var(--gold);opacity:.11}
/* ab hier stehen die Überschriften mittig — die Ziffer wandert mit */
@media (max-width:1020px){ .kap-wz{left:50%;translate:-50% 0} }
@media (max-width:640px){ .kap-wz{font-size:clamp(62px,17vw,96px);top:-.24em} }

/* ================================================================
   §26 · Drei Arten als Schichtung (Variante C)
   Die Flechte lag als freischwebendes Liniendiagramm im Raum. Statt
   Linien greifen jetzt die drei Karten selbst ineinander.
   RÜCKGÄNGIG: im <body> die Klasse „arten-schichtung“ entfernen —
   dann kehrt die alte Flechte unverändert zurück.
   ================================================================ */
body.arten-schichtung .flechte{display:none}
body.arten-schichtung .flecht-buehne{margin-top:clamp(14px,2.6vh,30px)}

body.arten-schichtung .arten{
  grid-template-columns:repeat(3,1fr);
  gap:0;align-items:start;
  margin-top:clamp(22px,3vw,40px);
  padding-bottom:clamp(26px,3.4vw,48px);
}
body.arten-schichtung .art{
  position:relative;padding:clamp(28px,2.4vw,38px) clamp(24px,2.2vw,34px) clamp(26px,2.2vw,34px);
  text-align:left;border-radius:24px;
  background:var(--papier);
  border:1px solid var(--linie);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
/* Treppe zum Herzstück: jede Karte liegt höher, weiter vorn — und wirft
   ihren Schatten nach links auf die darunterliegende. Erst das macht die
   Überlappung sichtbar, sonst berühren sich nur zwei weisse Flächen. */
body.arten-schichtung .art-1{
  margin-top:clamp(34px,5vw,70px);z-index:1;
  box-shadow:0 8px 24px rgba(38,12,21,.05);
}
body.arten-schichtung .art-2{
  margin-top:clamp(17px,2.5vw,35px);margin-left:clamp(-52px,-3.2vw,-28px);z-index:2;
  box-shadow:-16px 16px 38px rgba(38,12,21,.09),0 2px 6px rgba(38,12,21,.04);
}
body.arten-schichtung .art-3{
  margin-top:0;margin-left:clamp(-52px,-3.2vw,-28px);z-index:3;
  box-shadow:-22px 22px 54px rgba(38,12,21,.13),0 3px 10px rgba(38,12,21,.05);
}
/* Die Ziffer sitzt auf der Kante — sie hält die Schichten zusammen */
body.arten-schichtung .art-zahl{
  position:absolute;top:calc(clamp(28px,2.4vw,38px) * -.5);
  left:clamp(24px,2.2vw,34px);margin-bottom:0;
  width:40px;height:40px;font-size:16px;
  box-shadow:0 8px 20px rgba(38,12,21,.16);
  border:3px solid var(--papier);
}
/* Karte 1 und 2 liegen ein Stück unter der nächsten — dort darf kein Text stehen */
body.arten-schichtung .art-1,
body.arten-schichtung .art-2{
  padding-right:calc(clamp(24px,2.2vw,34px) + clamp(28px,3.2vw,52px));
}
body.arten-schichtung .art h3{margin-top:6px}
body.arten-schichtung .art p{max-width:none}
@media (hover:hover) and (pointer:fine){
  body.arten-schichtung .art:hover{transform:translateY(-5px)}
  body.arten-schichtung .art-3:hover{box-shadow:-26px 28px 66px rgba(38,12,21,.16),0 3px 10px rgba(38,12,21,.06)}
}
/* gestapelt statt geschichtet, sobald die Spalten umbrechen */
@media (max-width:1020px){
  body.arten-schichtung .arten{grid-template-columns:1fr;gap:26px;justify-items:stretch;max-width:560px;margin-inline:auto}
  body.arten-schichtung .art{text-align:left;margin:0 !important;padding-right:clamp(24px,2.2vw,34px)}
  body.arten-schichtung .art p{margin-inline:0}
  body.arten-schichtung .art-1,body.arten-schichtung .art-2,body.arten-schichtung .art-3{margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  body.arten-schichtung .art{transition:none}
}

/* ================================================================
   §27 · Schrift auf Dunkel ist wirklich weiss (31.08.)
   Vorher lief Fliesstext auf Nacht in --bandwarm2 (#EFC3D6, deutlich
   rosé) und Überschriften in --bandwarm (#FDEBF3, leicht rosé). Der
   Token bleibt, wo er Fläche ist (Creme-Button, Ränder) — als Schrift
   ist er überall durch reines Weiss ersetzt.
   ================================================================ */
.buehne,
.tueren,
.fuss,
.versprechen{color:#fff}
.lauftext.hell,
.buehne .lauftext.hell,
.tueren .lauftext.hell,
.versprechen p{color:#fff}
.buehne-leise{color:#fff;opacity:.72}
.lauf-satz{color:#fff}
.fuss-kontakt a{color:#fff;border-bottom-color:rgba(255,255,255,.42)}
.fuss-recht{opacity:.8}
.btn-geist{color:#fff;border-color:rgba(255,255,255,.55)}
.btn-geist:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.lb-buehne figcaption,.lb-zu,.lb-pfeil,.lb-zaehler{color:#fff}
.kapitelmarke.dunkel{color:#fff}
.kopf.auf-dunkel .hauptnav a:not(.btn){color:#fff}

/* ================================================================
   §28 · Rosé-Flächen bekommen einen gemalten Grund (31.08.)
   Der Halo lag mit 95 % Deckkraft über dem Schimmer und hat jede
   Farbigkeit im Zentrum wieder plattgebügelt. Jetzt lässt er den
   Grund durch und setzt nur noch die Lichtquelle.
   ================================================================ */
.halo{
  background:radial-gradient(closest-side,
    rgba(255,248,238,.62) 0%, rgba(253,238,232,.34) 40%, rgba(251,239,245,0) 74%);
}
.lichtflaeche[data-licht="kuehl"] .halo{
  background:radial-gradient(closest-side,
    rgba(255,252,246,.58) 0%, rgba(251,227,238,.30) 42%, rgba(251,239,245,0) 76%);
}
.tagschimmer{opacity:1}
/* Momente war die vierte Rosé-Fläche, aber keine Lichtfläche — sie lag als
   einzige noch flach. Die Bildschiene muss dafür über den Grund gehoben werden. */
.momente > .momente-schiene,
.momente > .bahn{position:relative;z-index:2}

/* Die beiden Türen haben unterschiedlich lange Texte — die zwei Anfragen
   standen deshalb auf verschiedener Höhe. Jetzt füllen beide Spalten die
   gleiche Höhe und der Knopf sitzt in beiden unten. */
@media (min-width:921px){
  .tueren-grid{align-items:stretch}
  .tuer{display:flex;flex-direction:column;align-items:flex-start}
  .tuer .lauftext{margin-bottom:26px}
  .tuer .btn-geist{margin-top:auto}
}

/* ================================================================
   §30 · Bildstapel „Wer ich bin“ bleibt länger stehen (31.08.)
   Die Medienspalte war 100svh hoch und klebte an top:0. Sie löste
   sich deshalb, sobald ihre Unterkante die Unterkante der Spalte
   erreichte — rund 750 px vor dem Ende des Kapitels. Danach schob
   sich das Bild oben angeschnitten aus dem Bild, während rechts noch
   drei Absätze standen, und darunter blieb eine leere Hälfte.
   Jetzt ist die Spalte nur so hoch wie ihr Inhalt und klebt mittig:
   Sie hält deutlich länger und verlässt das Bild als kleiner Block,
   nicht als angeschnittene Riesenfläche.
   ================================================================ */
@media (min-width:1021px){
  .split-medien{
    height:auto;
    top:clamp(96px, calc(50svh - 310px), 200px);
    align-content:start;
  }
}

/* Die dritte Art trägt Gold. Weiss auf Gold käme nur auf 2,2:1 — die
   Ziffer steht deshalb in Tinte, das ergibt 7,2:1 und ist der klarste
   der vier Kreise. */
.az-gold{background:var(--gold);color:var(--tinte)}

/* ================================================================
   §33 · Marginalien (31.08.)
   Die Rosé-Flächen wirkten prinzessinnenhaft, weil sie reiner
   Hintergrund waren. Jetzt steht in jedem eine Federzeichnung aus
   Grimms Dingwelt am Rand — keine Krone, kein Schloss, sondern
   Spindel, Dornzweig, Schlüssel und Laterne. Vom Rand angeschnitten
   wie ein Holzschnitt in der Marginalspalte.
   ================================================================ */
.marginalie{
  position:absolute;z-index:1;pointer-events:none;
  width:clamp(150px,20vw,320px);height:auto;overflow:visible;
  fill:none;stroke:var(--wein-tief);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.11;
}
.mrg-rechts{right:clamp(-30px,-1vw,0px)}
.mrg-links{left:clamp(-30px,-1vw,0px)}
.mrg-hoch{top:clamp(70px,11vh,130px)}
.mrg-tief{bottom:clamp(30px,6vh,80px)}
/* auf der kühlen Fläche eine Spur kühler, damit sie nicht rostig wirkt */
.lichtflaeche[data-licht="kuehl"] .marginalie{stroke:#5A2340;opacity:.10}
html.js .marginalie{opacity:0}
html.js .marginalie.gezeichnet{opacity:.11;transition:opacity 1.2s ease}
html.js .lichtflaeche[data-licht="kuehl"] .marginalie.gezeichnet{opacity:.10}
@media (max-width:1020px){ .marginalie{width:clamp(120px,34vw,200px);opacity:.08} }
@media (prefers-reduced-motion:reduce){
  html.js .marginalie{opacity:.11}
  .marginalie use{stroke-dasharray:none !important;stroke-dashoffset:0 !important}
}
/* Die Spindel lief in die Uhrzeit — kleiner und tiefer gesetzt. */
.mitternacht .marginalie{width:clamp(110px,12.5vw,180px);bottom:clamp(18px,3.5vh,44px)}
html.js .marginalie.gezeichnet{opacity:.13}
html.js .lichtflaeche[data-licht="kuehl"] .marginalie.gezeichnet{opacity:.12}


/* ================================================================
   §34 · Kleckskreise (02.09.)
   Vorher standen fünf Bilder in derselben Schablone: 440 × 413 px,
   gleiches Format, gleiche Grundlinie — ein Kontaktbogen, keine
   Komposition. Jetzt sind es ungleichmässig runde Formen, jede
   anders geschnitten, wie ausgegossene Farbe. Das ist dieselbe
   Sprache wie die Klecks-Übergänge zwischen den Kapiteln.
   ================================================================ */
.momente-schiene{align-items:flex-end;position:relative}

.moment{
  --k-w:300px; --k-h:300px; --versatz:0px;
  width:var(--k-w);flex:0 0 auto;
  transform:translateY(var(--versatz));
}
/* Fünf Grössen, fünf Schnitte, versetzte Grundlinien */
.moment:nth-child(2){--k-w:clamp(230px,23vw,320px);--k-h:clamp(230px,23vw,320px);--versatz:0px}
.moment:nth-child(3){--k-w:clamp(190px,19vw,262px);--k-h:clamp(205px,20.5vw,284px);--versatz:-46px}
.moment:nth-child(4){--k-w:clamp(258px,26vw,360px);--k-h:clamp(248px,25vw,346px);--versatz:16px}
.moment:nth-child(5){--k-w:clamp(178px,18vw,246px);--k-h:clamp(196px,19.6vw,270px);--versatz:-24px}
.moment:nth-child(6){--k-w:clamp(222px,22vw,306px);--k-h:clamp(232px,23vw,320px);--versatz:8px}

.bogen{
  display:block;position:relative;
  width:100%;height:var(--k-h);
  padding:8px;
  background:linear-gradient(180deg,rgba(255,253,251,.97),rgba(255,253,251,.8));
  box-shadow:0 20px 44px rgba(38,12,21,.12),0 3px 9px rgba(38,12,21,.05);
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out);
}
/* Jeder Klecks ist anders geschnitten — nie ein sauberer Kreis */
.moment:nth-child(2) .bogen{border-radius:58% 42% 47% 53% / 55% 50% 50% 45%}
.moment:nth-child(3) .bogen{border-radius:44% 56% 62% 38% / 48% 58% 42% 52%}
.moment:nth-child(4) .bogen{border-radius:52% 48% 38% 62% / 60% 43% 57% 40%}
.moment:nth-child(5) .bogen{border-radius:63% 37% 54% 46% / 42% 57% 43% 58%}
.moment:nth-child(6) .bogen{border-radius:47% 53% 43% 57% / 53% 46% 54% 47%}
.moment picture,.moment img{border-radius:inherit}

.bogen::after{                       /* die Goldkante folgt dem Klecks */
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid rgba(201,120,0,.5);
  border-radius:inherit;
}
.bogen::before{                      /* ein Funke, wie an den Tropfnasen */
  content:"";position:absolute;width:7px;height:7px;border-radius:50%;
  background:var(--gold);opacity:.85;pointer-events:none;
  box-shadow:0 0 0 4px rgba(243,146,2,.16);
}
.moment:nth-child(2) .bogen::before{right:6%;top:8%}
.moment:nth-child(3) .bogen::before{left:2%;bottom:20%}
.moment:nth-child(4) .bogen::before{right:2%;bottom:16%;background:var(--mhimbeer);box-shadow:0 0 0 4px rgba(214,45,103,.16)}
.moment:nth-child(5) .bogen::before{left:8%;top:6%;background:var(--mblau);box-shadow:0 0 0 4px rgba(26,118,198,.16)}
.moment:nth-child(6) .bogen::before{right:8%;top:10%;background:var(--mgruen);box-shadow:0 0 0 4px rgba(23,138,70,.16)}

.moment picture{display:block;width:100%;height:100%;overflow:hidden;background:transparent}
.moment img{width:100%;height:100%;object-fit:cover;display:block}
.moment figcaption{
  font-family:var(--sans);font-size:14.5px;letter-spacing:.04em;color:var(--tinte2);
  padding:16px 2px 0;text-align:left;max-width:24ch;
}
@media (hover:hover) and (pointer:fine){
  .moment:hover .bogen{transform:translateY(-8px) rotate(-1.2deg);
    box-shadow:0 30px 60px rgba(38,12,21,.17),0 4px 12px rgba(38,12,21,.06)}
}

/* Der Falter zieht seine Bahn über die Kleckse */
.falter-momente{
  position:absolute;left:clamp(300px,32vw,460px);top:-8px;
  width:clamp(420px,46vw,660px);height:auto;z-index:3;
  pointer-events:none;overflow:visible;
}
.falter-momente .flugbahn{
  stroke-dasharray:900;
  stroke-dashoffset:calc(900px * (1 - var(--rail-p, 0)));
}
.falter-momente .falter-korpus{
  opacity:calc((var(--rail-p, 0) - .70) * 4);
  transform:scale(1.5);transform-origin:588px 34px;   /* sonst zu klein */
}

@media (max-width:1020px){
  .momente-schiene{align-items:flex-start}
  .moment{--k-w:min(72vw,340px) !important;--k-h:min(72vw,340px) !important;--versatz:0px !important}
  .moment figcaption{text-align:center;max-width:none;margin-inline:auto}
  .falter-momente{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bogen{transition:none}
  .falter-momente .flugbahn{stroke-dashoffset:0}
  .falter-momente .falter-korpus{opacity:1}
}

/* ================================================================
   §35 · Webseitentexte v0.8 eingebaut + Layout-Harmonisierung (08.09.)
   Checkpoint: _checkpoints/v18_vor-texte-v0.8/
   - Texte 1:1 aus 260817_Webseitentexte_Philipp-Layer_v0.8.md
   - „Vier Dinge" zurückgehalten (nicht in v0.8), Kapitel neu gezählt
   - neu: Hero-Weiche mit drei Wegen, Button „Mehr über meinen Weg",
     Preisblock, Kostproben-Reihe, dritte Tür „Auf der Bühne"
   - Headlines auf Desktop: max. zwei Zeilen, bis zu 3/4 der Bahn
   - Sektionsabstände auf ein gemeinsames Mass gebracht
   ================================================================ */

/* ---------- Kein seitliches Ausbrechen auf Mobil ----------
   Der Sonnen-Halo (right:-18vw) und die Kopf-Kapsel liefen 70 px über den
   390-px-Viewport hinaus. body{overflow-x:clip} hält Chrome-Desktop ruhig,
   aber iOS Safari und die Mobil-Emulation weiten das Layout-Viewport
   trotzdem — der Clip muss deshalb auch auf html liegen.                */
/* html{overflow-x:clip} — §38: zurückgenommen (einzige globale Scroll-Änderung, Verdacht bei Momente-Pin); die Rosé-Flächen clippen jetzt selbst */

/* ---------- Gemeinsames Mass für Sektionsränder ---------- */
:root{
  --sek-oben:calc(var(--tor-h) + clamp(44px,6.5vh,80px));   /* Kapitel hinter einem Tor */
  --sek-unten:clamp(76px,10vh,124px);
  --sek-ohne-tor:clamp(72px,9.5vh,116px);                   /* Kapitel ohne Tor davor */
  --block-abstand:clamp(30px,4.5vh,52px);                   /* Kopf → Inhalt */
}
.mitternacht,.erzaehler,.zusammen,.stimmen,.fragen{
  padding-top:var(--sek-oben);padding-bottom:var(--sek-unten);
}
.drei-arten{padding-top:var(--sek-oben);padding-bottom:clamp(56px,7.5vh,92px)}
.fuenf-stufen{padding-top:var(--sek-ohne-tor);padding-bottom:var(--sek-unten)}
.momente{padding-top:calc(var(--tor-h) + clamp(32px,4.5vh,56px));padding-bottom:clamp(64px,9vh,104px)}
.tueren{padding-top:calc(var(--tor-h) + clamp(48px,7vh,88px));padding-bottom:clamp(84px,11vh,132px)}
.finale{padding-top:calc(var(--tor-h) + clamp(36px,5.5vh,68px));padding-bottom:clamp(72px,10vh,116px)}
.buehne{padding-top:calc(var(--tor-h) * .8 + clamp(28px,4vh,52px))}

/* ---------- Headlines: eine Zeile, höchstens zwei; bis zu 3/4 der Bahn ---------- */
.sh{font-size:clamp(32px,4.2vw,56px);line-height:1.08}
.buehne-laut{font-size:clamp(26px,4.2vw,54px);max-width:min(100%,30ch);line-height:1.14}
.finale-titel{font-size:clamp(34px,3.9vw,52px)}
.grosszeile{max-width:34ch}
.editorial-spalte{max-width:62ch}
@media (min-width:1021px){
  .sh-links{max-width:min(75%,30ch)}
  .finale-grid{grid-template-columns:1.1fr minmax(380px,480px);gap:clamp(40px,5vw,96px)}
  /* Hero-Zwischenruf bleibt einzeilig neben dem Porträt */
  .held .zwischenruf{font-size:clamp(17px,1.45vw,20px);gap:12px}
  /* Stufen-Kopf: die Headline darf breiter laufen als die 52ch-Spalte (max. 2 Zeilen) */
  .stufen-kopf{max-width:52ch;overflow:visible}
  .stufen-kopf .sh{max-width:none;width:max-content;max-width:min(60vw,820px)}
}

/* ---------- Hero-Weiche: drei Wege, jeder auf eigener Zeile ---------- */
.weiche{margin-top:clamp(18px,2.6vh,26px);max-width:74ch}
.weiche p{font-family:var(--sans);font-size:15.5px;color:var(--tinte2);line-height:1.55}
.weiche-frage{font-weight:600;color:var(--tinte)}
.weiche-wege{margin-top:6px;display:flex;flex-direction:column;gap:4px}
.weiche-wege span{display:block}
@media (min-width:1021px){
  .weiche-wege{flex-direction:row;flex-wrap:wrap;gap:4px 18px}
}

/* ---------- Zweitknopf: Umriss in Akzent (Kostproben, „Mehr über meinen Weg") ---------- */
.btn-zweit{
  background:rgba(255,255,255,.55);color:var(--akzent);
  border:1.5px solid var(--akzent);box-shadow:none;
  padding:13px 26px;font-size:15px;
}
.btn-zweit:hover{background:var(--akzent);color:#fff;box-shadow:0 10px 26px rgba(142,16,67,.22)}
.btn-zweit .ikon{width:18px;height:18px;fill:currentColor;flex:0 0 auto;margin-left:-4px}
.btn-zweit .ripple{background:rgba(142,16,67,.18)}
.cta-leise{margin-top:clamp(18px,2.6vh,26px)}

/* ---------- Schritte: Preiszeile + Notiz ---------- */
.schritt-preis{
  margin-top:10px;font-family:var(--sans);font-size:15px;font-weight:700;
  letter-spacing:.02em;color:var(--tinte);
}
.schritt-preis::before{
  content:"";display:inline-block;width:18px;height:2px;border-radius:2px;
  background:currentColor;opacity:.35;vertical-align:middle;margin-right:10px;
}
.schritte-notiz{
  grid-column:1;margin-top:0;padding-left:52px;
  font-family:var(--serif);font-size:17.5px;color:var(--tinte2);max-width:52ch;
}
/* die Spur sitzt jetzt in der Liste selbst — sie endet mit dem letzten Schritt */
.schritte .spur{top:18px;bottom:18px}
@media (max-width:1020px){
  .schritte-notiz{grid-column:auto;margin-inline:auto;text-align:center;padding-left:0}
  /* im Einspalter liefe die Spur mitten durch den zentrierten Text — die
     Knoten tragen den Fortschritt dort allein */
  .stufen-in .spur,.spur-schritte{display:none}
}

/* ---------- Preisblock (v0.8, Abschnitt 8): helle Karte auf Sand ---------- */
.preis-bahn{position:relative;z-index:2;margin-top:var(--block-abstand)}
.preis{
  position:relative;max-width:820px;margin-inline:auto;
  background:linear-gradient(180deg,#fff,var(--papier) 70%);
  border-radius:28px;text-align:center;
  padding:clamp(34px,4.6vw,60px) clamp(24px,4.6vw,64px) clamp(30px,4vw,52px);
  box-shadow:0 30px 70px var(--schatten),0 6px 16px var(--schatten-weich);
}
.preis::before{
  content:"";position:absolute;inset:12px;pointer-events:none;
  border:1px solid var(--linie);border-radius:20px;
}
.preis > *{position:relative}
.preis-titel{margin-bottom:.35em;max-width:none;margin-inline:auto}
.preis-gross{
  font-family:var(--serif);color:var(--tinte);line-height:1.1;
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:6px 14px;
}
.preis-gross strong{font-weight:700;font-size:clamp(46px,6vw,76px);letter-spacing:-.03em;color:var(--akzent)}
.preis-gross span{font-family:var(--sans);font-size:clamp(15px,1.5vw,17px);font-weight:600;color:var(--tinte2)}
.preis-lead{
  margin-top:clamp(22px,3vh,30px);font-family:var(--sans);font-size:14px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tinte2);
}
.bekommst{
  display:grid;gap:14px;margin:18px auto 0;max-width:600px;text-align:left;
}
.bekommst li{display:flex;gap:16px;align-items:flex-start}
.bekommst .knoten{margin-top:1px;width:28px;height:28px}
.bekommst .knoten::before{inset:6px}
.bekommst span{font-family:var(--serif);font-size:clamp(17.5px,1.8vw,19.5px);line-height:1.55;color:var(--tinte)}

/* ---------- Kostproben (v0.8, Abschnitt 9) ---------- */
.kostproben{margin-top:clamp(44px,6.5vh,72px);max-width:1080px}
.kostproben-titel{font-family:var(--serif);font-size:clamp(18px,1.9vw,20.5px);color:var(--tinte)}
.kostproben-reihe{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:18px}
.stimmprobe{margin-top:clamp(22px,3.5vh,34px)}
@media (max-width:1020px){
  .kostproben{margin-inline:auto;text-align:center}
  .kostproben-reihe{justify-content:center}
}
@media (max-width:640px){
  .kostproben-reihe{flex-direction:column;align-items:stretch}
  .kostproben-reihe .btn{max-width:none}
}

/* ---------- Drei Türen ---------- */
.tueren-drei{grid-template-columns:1fr 1px 1fr 1px 1fr;gap:clamp(22px,3vw,48px)}
.tueren-drei .tuer{padding:clamp(14px,1.6vw,22px)}
.tueren-drei .tuer-titel{font-size:clamp(22px,2.1vw,29px);line-height:1.18;margin-bottom:10px}
.tueren-drei .tuer .lauftext{font-size:clamp(16.5px,1.5vw,18px);max-width:none}
.tueren-drei .tuer .lauftext a{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45)}
.tueren-drei .tuer .lauftext a:hover{border-color:var(--gold)}
.tueren-drei .btn-geist{padding:15px 28px;font-size:15.5px;text-align:center}
@media (min-width:921px) and (max-width:1180px){
  .tueren-drei{gap:clamp(18px,2.6vw,36px)}
  .tueren-drei .tuer{padding:clamp(16px,2vw,24px)}
}
@media (max-width:1020px){
  .tueren-drei{grid-template-columns:1fr;gap:44px}
  .tueren-drei .tuer .lauftext{margin-bottom:0}
}

/* ---------- Mobil: Feinschliff für die neuen Bausteine ---------- */
@media (max-width:640px){
  .weiche{text-align:center}
  .btn-zweit{width:100%;max-width:420px}
  .preis{padding:28px 18px 26px;border-radius:22px}
  .preis::before{inset:9px;border-radius:15px}
  .bekommst li{gap:12px}
  .schritt-preis::before{display:none}
}

/* ================================================================
   §36 · Runde 2 mit Marian (08.09.): Hero als Full-Bleed-Foto mit
   Schleier + Gradient-Mesh (Effekt 16) + Falter aus „Version Alt“,
   Vertrauensband, Kostproben-Sektion, Stufen-Spalte, Türen-Farben,
   Kleingedrucktes +2 px. Checkpoint: _checkpoints/v19_vor-runde2/
   ================================================================ */

/* ---------- Kleingedrucktes durchgehend zwei Punkte grösser ---------- */
.cta-notiz{font-size:17.5px;max-width:48ch}
.hauptnav a:not(.btn){font-size:17px}
.btn{font-size:17.5px}
.btn-gross{font-size:18.5px}
.btn-klein{font-size:16.5px;padding:12px 26px}
.btn-zweit{font-size:17px}
.stapel-zeile{font-size:16.5px;text-align:center;width:min(100%,520px)}
.foto figcaption,.moment figcaption{font-size:16.5px}
.wer-ist{font-size:17px}
.schritt-l{font-size:15.5px}
.schritt-preis{font-size:17px}
.preis-gross span{font-size:clamp(17px,1.5vw,19px)}
.direkt{font-size:19px}
.anfrage .cta-notiz{font-size:16px}
.anfrage-danke p{font-size:18.5px}
.feld .fehler-text{font:500 15px var(--sans)}
.feld label{font:500 18px var(--sans)}
.fuss-zeile,.fuss-kontakt{font-size:17px}
.fuss-recht,.credit{font-size:16px}
.kapitelmarke{font-size:14.5px}
.kapitelmarke .ziffer{font-size:17px}
.brief figcaption{font-size:19px}
.stimme figcaption{font-size:18px}
.held-lead{font-size:clamp(21px,2.05vw,23px);line-height:1.55}

/* ---------- Hero: Full-Bleed-Foto, Schleier, Mesh ---------- */
.held{
  background:var(--wein-tief);color:#fff;
  min-height:100svh;overflow:clip;
  padding-top:calc(var(--head-h) + clamp(28px,5vh,60px));padding-bottom:0;
  display:grid;grid-template-rows:1fr auto;align-content:stretch;
}
.held-bg{position:absolute;inset:0;z-index:0;will-change:transform}
html.js .held-bg{opacity:0}
.held-bg picture,.held-foto{display:block;width:100%;height:100%}
.held-foto{object-fit:cover;object-position:50% 42%;transform:scale(1.06);animation:held-kb 26s ease-in-out infinite alternate}
@keyframes held-kb{to{transform:scale(1.16) translateY(-2.5%)}}
.held-schleier{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(51,16,31,.90) 0%,rgba(51,16,31,.66) 46%,rgba(51,16,31,.30) 100%),
    linear-gradient(0deg,rgba(51,16,31,.94) 0%,rgba(51,16,31,.40) 34%,rgba(51,16,31,.12) 68%);
}
.held-mesh{
  position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;
  filter:blur(48px) saturate(1.15);opacity:.62;mix-blend-mode:screen;will-change:transform;
}
.held .bahn{position:relative;z-index:4}
.held-in{grid-template-columns:1fr;column-gap:0;align-content:center}
.held-text{max-width:780px}
.held .zwischenruf{color:var(--stern-gold)}
.held .zwischenruf::before,.held .zwischenruf::after{background:var(--stern-gold)}
.held-h1{font-size:clamp(46px,6.4vw,98px);color:#fff;text-shadow:0 2px 24px rgba(20,4,11,.35)}
.held-h1 em{color:var(--stern-gold)}
.held-lead{color:rgba(255,255,255,.88);max-width:58ch}
.held .cta-reihe{display:flex;align-items:center;flex-wrap:wrap;gap:16px clamp(18px,2.4vw,30px);margin-top:clamp(26px,3.8vh,38px)}
.held .cta-notiz{color:rgba(255,255,255,.8);margin-top:0;max-width:36ch}
.held .btn-gross{box-shadow:0 16px 40px rgba(20,4,11,.42),0 0 0 1px rgba(255,255,255,.08)}
.held .btn-gross:hover{box-shadow:0 20px 48px rgba(20,4,11,.5),0 0 0 1px rgba(255,255,255,.12)}
/* Die Weiche: eine Zeile über die ganze Breite, Absatzgrösse */
.held-weiche{
  margin-top:clamp(40px,7vh,84px);padding:clamp(18px,2.6vh,26px) 0 clamp(22px,3vh,30px);
  border-top:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;
}
.held-weiche p{margin:0;font-family:var(--serif);font-size:clamp(18px,1.6vw,20px);line-height:1.5}
.held-weiche .weiche-frage{color:#fff;font-weight:600}
.held-weiche .weiche-wege{display:flex;flex-wrap:wrap;gap:8px clamp(18px,2.6vw,36px);color:rgba(255,255,255,.78)}
.held-weiche a{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);transition:color .3s,border-color .3s}
.held-weiche a:hover{color:var(--stern-gold);border-color:var(--stern-gold)}

/* Falter aus „Version Alt“: schlägt mit den Flügeln (scaleX) und zieht quer durch den Hero */
.falter-flug{
  position:absolute;z-index:3;top:clamp(90px,16vh,180px);left:0;
  width:clamp(58px,6.4vw,104px);pointer-events:none;will-change:transform;
  animation:falter-reise 24s ease-in-out infinite;
}
.falter-neu{
  display:block;width:100%;height:auto;transform-origin:50% 50%;
  filter:drop-shadow(0 10px 20px rgba(20,4,11,.4));will-change:transform;
  animation:falter-schlag .62s ease-in-out infinite;
}
@keyframes falter-schlag{0%,100%{transform:scaleX(1) rotate(0deg)}50%{transform:scaleX(.46) rotate(-3deg)}}
@keyframes falter-reise{
  0%{transform:translate(58vw,6vh) rotate(-5deg)}
  18%{transform:translate(72vw,-1vh) rotate(4deg)}
  36%{transform:translate(86vw,8vh) rotate(-3deg)}
  54%{transform:translate(76vw,22vh) rotate(6deg)}
  72%{transform:translate(62vw,14vh) rotate(-4deg)}
  86%{transform:translate(50vw,3vh) rotate(3deg)}
  100%{transform:translate(58vw,6vh) rotate(-5deg)}
}

/* ---------- Vertrauensband unter dem Hero ---------- */
.vertrauen-band{background:var(--papier);position:relative;z-index:5;padding:clamp(20px,3vh,32px) 0;border-bottom:1px solid var(--linie)}
.vertrauen-in{display:flex;align-items:center;justify-content:center;gap:clamp(22px,3.6vw,60px);flex-wrap:wrap}
.vb-item{display:flex;align-items:center;gap:14px;color:var(--tinte2)}
.vb-preis .siegel{width:56px;height:56px;flex:0 0 auto}
.vb-preis p{font-family:var(--sans);font-size:16px;line-height:1.4;max-width:34ch}
.vb-preis strong{display:block;font-family:var(--serif);font-size:18.5px;color:var(--tinte);font-weight:700}
.vb-trenner{width:1px;height:40px;background:var(--linie);flex:0 0 auto}
.vb-wort{font-family:var(--sans);font-weight:700;font-size:21px;letter-spacing:.01em;color:var(--tinte)}
.vb-documenta{font-size:27px;font-weight:600;letter-spacing:-.03em;line-height:1}
.vb-sub{font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tinte2);margin-left:10px;translate:0 2px}
.vb-burg svg{width:42px;height:42px;flex:0 0 auto;fill:none;stroke:var(--tinte);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Wer ich bin: Bildzeile mittig, „Mein Weg“ rückt näher ---------- */
.split-kapitel:first-child{min-height:0;align-content:start}
.split-kapitel.weg{min-height:0;padding-top:clamp(32px,5vh,56px)}
.split-medien{justify-items:center}

/* ---------- Fünf Stufen: Kopf, Liste und Schlusszeile in EINER Spalte ---------- */
@media (min-width:1021px){
  .fuenf-stufen .stufen-kopf,.fuenf-stufen .stufen-in,.fuenf-stufen .stufen-schluss{
    max-width:920px;margin-inline:auto;
    padding-left:clamp(0px,10vw,170px);padding-right:clamp(20px,4vw,56px);
    text-align:left;
  }
  .stufen-kopf .sh{width:auto;max-width:none}
  .stufen-lead{max-width:none}
  .stufe > div{max-width:none}
  .stufen-schluss .leichtzeile{max-width:none;margin-inline:0}
  .stufen-in{margin-top:clamp(26px,4vh,44px)}
}
.stufen-zaehler span{opacity:.24;transition:opacity .4s ease,color .5s ease}

/* ---------- Preisblock: Lead als Satz, Notiz im Kasten ---------- */
.preis-lead{
  margin:clamp(24px,3.4vh,34px) auto 0;max-width:600px;text-align:left;
  font-family:var(--serif);font-size:clamp(19px,1.9vw,21px);font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--tinte);
}
.bekommst{margin-top:12px}
.preis-notiz{margin:clamp(20px,3vh,28px) auto 0;max-width:600px;text-align:left;font-family:var(--serif);font-size:17.5px;color:var(--tinte2);padding-top:16px;border-top:1px solid var(--linie)}

/* ---------- Stimmen: Titel, Brief und Reihe auf einer Achse (mittig) ---------- */
.stimmen-titel{text-align:center;max-width:none;margin-inline:auto}
.brief{margin-inline:auto}
.stimmen-reihe{margin-inline:auto}

/* ---------- Kostproben (tiefe Nacht) ---------- */
.kostproben{
  background:linear-gradient(180deg,var(--wein) 0%,var(--wein-tief) 60%);color:#fff;
  padding:calc(var(--tor-h) + clamp(48px,7vh,88px)) 0 clamp(84px,11vh,132px);
  position:relative;overflow:clip;isolation:isolate;
}
.kostproben .sterne{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.kostproben .bahn{position:relative;z-index:1}
.ruf-gold{color:var(--stern-gold)}
.ruf-gold::before,.ruf-gold::after{background:var(--stern-gold)}
.ruf-kapital{font-family:var(--sans);font-style:normal;font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase}
.kostproben .sh{color:#fff;max-width:min(100%,34ch);font-size:clamp(30px,3.6vw,50px)}
.proben{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(30px,5vh,52px);align-items:stretch}
.probe{margin:0;display:flex;flex-direction:column}
.probe figcaption{margin-top:14px;font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.6vw,20px);color:#fff}
.probe-medium{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.probe-medium img{width:100%;height:100%;object-fit:cover;display:block}
.probe-play{
  cursor:pointer;border:0;display:grid;place-items:center;
  width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);
  box-shadow:0 12px 30px rgba(0,0,0,.35);transition:scale .3s var(--ease-out),background .3s;
}
.probe-medium .probe-play{position:absolute;top:50%;left:50%;translate:-50% -50%}
.probe-play:hover{background:#fff;scale:1.08}
.probe-play span{width:0;height:0;border-left:17px solid var(--wein);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.probe-play.spielt span{width:16px;height:18px;border:0;margin:0;background:linear-gradient(90deg,var(--wein) 0 36%,transparent 36% 64%,var(--wein) 64%)}
.audio-player{
  position:relative;flex:1;display:flex;align-items:center;gap:clamp(18px,2vw,26px);
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid rgba(255,208,138,.22);border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 30px rgba(0,0,0,.22);
  padding:clamp(22px,2.4vw,34px);aspect-ratio:16/10;overflow:hidden;
}
.audio-player .probe-play{flex:0 0 auto;width:56px;height:56px}
.welle{flex:1 1 0;min-width:0;height:72px;display:block;align-self:center}
.probe-notiz{margin-top:clamp(20px,3vh,28px);font-family:var(--sans);font-size:16px;color:rgba(255,255,255,.62)}
.probe-platz{
  position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;
  background:linear-gradient(160deg,rgba(51,16,31,.9),rgba(92,11,44,.92));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.probe-platz span{font-family:var(--serif);font-style:italic;color:var(--stern-gold);font-size:clamp(15px,1.4vw,18px);line-height:1.5;max-width:26ch}

/* ---------- Fragen: Titel in zwei Zeilen, linke Spalte etwas breiter ---------- */
@media (min-width:1021px){
  .fragen-grid{grid-template-columns:minmax(240px,.85fr) 1.15fr}
  .fragen-grid .sh-links{font-size:clamp(30px,3.2vw,44px);max-width:none}
}

/* ---------- Die weiteren Türen: jede Tür in ihrer Märchenfarbe ---------- */
:root{--stern-gruen:#A9E8BE}
.tuer-abschied{--tuer:var(--stern-blau)}
.tuer-firma{--tuer:var(--stern-gruen)}
.tuer-buehne{--tuer:var(--stern-gold)}
.tuer .zwischenruf{color:var(--tuer)}
.tuer .zwischenruf::before,.tuer .zwischenruf::after{background:var(--tuer)}
.tuer::after{content:"";position:absolute;left:clamp(14px,1.6vw,22px);top:0;width:56px;height:3px;border-radius:2px;background:var(--tuer);opacity:.9}
.tuer::before{background:radial-gradient(80% 60% at 50% 0%,color-mix(in srgb,var(--tuer) 22%,transparent),transparent 70%)}
.tuer .btn-geist{border-color:color-mix(in srgb,var(--tuer) 75%,transparent)}
.tuer .btn-geist:hover{background:var(--tuer);border-color:var(--tuer);color:var(--wein-tief)}
.tuer .btn-geist .ripple{background:rgba(92,11,44,.22)}
@media (max-width:1020px){ .tuer::after{left:50%;translate:-50% 0} }

/* ---------- Mobil ---------- */
@media (max-width:1020px){
  .held{padding-top:calc(var(--head-h) + clamp(24px,5vh,48px))}
  .held-text{max-width:none}
  .held .cta-reihe{justify-content:center}
  .held .cta-notiz{text-align:center}
  .held-weiche{flex-direction:column;align-items:center;text-align:center;gap:10px}
  .held-weiche .weiche-wege{justify-content:center;flex-direction:column;gap:6px}
  .held-schleier{background:linear-gradient(0deg,rgba(51,16,31,.94) 0%,rgba(51,16,31,.72) 45%,rgba(51,16,31,.40) 100%)}
  .vertrauen-in{gap:18px 28px}
  .vb-trenner{display:none}
  .vb-preis{width:100%;justify-content:center;text-align:left}
  .proben{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .kostproben .sh{margin-inline:auto;text-align:center;max-width:none}
  .kostproben .bahn{text-align:center}
  .probe figcaption{text-align:center}
  .preis-lead,.preis-notiz{text-align:center}
}
@media (max-width:760px){ .falter-flug{display:none} }
@media (max-width:640px){
  .held-h1{font-size:clamp(40px,11.5vw,54px)}
  .vb-preis{flex-direction:row;text-align:left}
  .audio-player{aspect-ratio:auto;min-height:150px}
}
@media (prefers-reduced-motion:reduce){
  .held-foto,.falter-flug,.falter-neu{animation:none}
  .falter-flug{transform:translate(70vw,8vh)}
  html.js .held-bg{opacity:1}
  .held-mesh{opacity:.5}
  .probe-play{transition:none}
}

/* §36-Nachtrag: Altlasten aus §35 (Inline-Kostproben) und dem früheren
   Stimmprobe-Player neutralisieren — sonst wird die Sektion 1080 px schmal
   und jede Probe eine weisse Karte. */
section.kostproben{max-width:none;margin-top:0}
.proben{grid-template-columns:repeat(3,minmax(0,1fr))}
.proben .probe{background:none;border:0;padding:0;box-shadow:none;margin-top:0;border-radius:0;min-width:0;align-items:stretch;gap:0}
.audio-player{min-width:0}
.welle{width:100%}
@media (max-width:1020px){ .proben{grid-template-columns:minmax(0,1fr)} }
/* Hero-Weiche: Frage in der ersten Zeile, die drei Wege darunter über die volle Breite */
.held-weiche{flex-direction:column;align-items:flex-start;gap:10px}
.held-weiche .weiche-wege{width:100%;justify-content:space-between}
@media (max-width:1020px){ .held-weiche{align-items:center} .held-weiche .weiche-wege{justify-content:center} }
/* Weiche als drei gleich breite Spalten: Bezeichnung oben, Weg darunter */
@media (min-width:1021px){
  .held-weiche .weiche-wege{display:grid;grid-template-columns:repeat(3,1fr);gap:16px clamp(20px,3vw,48px)}
  .held-weiche .weiche-wege span{display:grid;gap:2px;justify-items:start}
  .held-weiche .weiche-wege a{font-size:clamp(19px,1.7vw,21px)}
  .held-text{max-width:900px}
  .held .cta-notiz{flex:1 1 320px;max-width:36ch}
}
/* Audio-Panels halten das 16:10 des Videos — sonst streckt das Grid das erste Panel */
.audio-player{flex:0 0 auto}
.proben{align-items:start}

/* ================================================================
   §37 · Runde 3 mit Marian (08.09.): heller Hero, Trust-Leiste ohne
   Linie, Sand-Ausklang vor den Toren, Türen satt in Farbe, Formular
   auf eigener Kontaktseite, Kapsel immer hell.
   Checkpoint: _checkpoints/v20_vor-runde3/
   ================================================================ */

/* ---------- Hero: hellweisser Schleier, Mesh in Himbeer/Grün/Blau, dunkle Schrift ---------- */
.held{background:var(--papier);color:var(--tinte)}
.held-schleier{
  background:
    linear-gradient(90deg,rgba(255,253,251,.94) 0%,rgba(255,253,251,.84) 46%,rgba(255,253,251,.62) 100%),
    linear-gradient(0deg,rgba(255,253,251,.96) 0%,rgba(255,253,251,.55) 34%,rgba(255,253,251,.15) 70%);
}
.held-mesh{mix-blend-mode:multiply;opacity:.75;filter:blur(52px) saturate(1.05)}
.held .zwischenruf{color:var(--ruf)}
.held .zwischenruf::before,.held .zwischenruf::after{background:var(--himbeer)}
.held-h1{color:var(--tinte);text-shadow:none;font-size:clamp(40px,5.1vw,74px)}
.held-h1 em{color:var(--akzent)}
.held-lead{color:var(--tinte2)}
.held .cta-reihe{flex-direction:column;align-items:flex-start;gap:14px;margin-top:clamp(22px,3.2vh,32px)}
.held .cta-notiz{color:var(--tinte2);max-width:48ch;flex:none}
.held .btn-gross{box-shadow:0 12px 30px rgba(142,16,67,.24),0 2px 6px rgba(38,12,21,.1)}
.held .btn-gross:hover{box-shadow:0 16px 40px rgba(142,16,67,.32),0 3px 8px rgba(38,12,21,.12)}
.held-text{max-width:960px}
.held-weiche{border-top-color:var(--linie);margin-top:clamp(28px,5vh,56px);padding-bottom:clamp(20px,3vh,32px)}
.held-weiche .weiche-wege{color:var(--tinte2)}
/* die drei Wege tragen die Farben ihrer Türen (tiefe Varianten auf hellem Grund) */
.weg-abschied{--weg:var(--mblau)}
.weg-firma{--weg:var(--mgruen)}
.weg-buehne{--weg:var(--gold-tief)}
.held-weiche .weiche-wege a{color:var(--weg);border-bottom-color:color-mix(in srgb,var(--weg) 45%,transparent)}
.held-weiche .weiche-wege a:hover{color:var(--weg);border-color:var(--weg)}
.falter-neu{filter:drop-shadow(0 10px 20px rgba(142,16,67,.28))}
@media (max-width:1020px){
  .held-schleier{background:linear-gradient(0deg,rgba(255,253,251,.96) 0%,rgba(255,253,251,.86) 45%,rgba(255,253,251,.62) 100%)}
  .held .cta-reihe{align-items:center}
  .held-h1 .zl{white-space:normal}
}

/* ---------- Kapsel bleibt hell (auf-dunkel wird nicht mehr gesetzt) ---------- */
.kopf.auf-dunkel .kopf-in{background:rgba(255,253,251,.9);border-color:rgba(242,222,233,.9)}

/* ---------- Trust-Leiste ohne Linie: Weiss läuft in Weiss ---------- */
.vertrauen-band{border-bottom:0;padding-top:clamp(8px,1.6vh,18px)}

/* ---------- Sand-Ausklang: der gemalte Grund läuft flach in die Tor-Farbe aus ----------
   Die Tore füllen mit flachem Sand; darüber lag der bewegte Schimmer, der dunkler ist —
   ein heller Streifen entstand. Jetzt blendet die Fläche unten in dasselbe Sand aus. */
.sand-ausklang{
  position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;
  height:calc(var(--tor-h) + 90px);
  background:linear-gradient(180deg,rgba(251,239,245,0) 0%,var(--sand) 78%);
}

/* ---------- Abstand Versprechen → Preis ---------- */
.preis-bahn{margin-top:calc(var(--block-abstand) + 20px)}

/* ---------- Türen: Knöpfe voll gefüllt, Unternehmen als farbiger Kasten ---------- */
.tuer .btn-geist{background:var(--tuer);border-color:var(--tuer);color:var(--wein-tief);box-shadow:0 10px 26px rgba(20,4,11,.28)}
.tuer .btn-geist:hover{background:#fff;border-color:#fff;color:var(--wein-tief)}
.tuer-buehne{--tuer:#F6B24A}          /* sattes Orange-Gold, damit der Knopf trägt */
.tuer-buehne .zwischenruf{color:var(--stern-gold)}
.tueren .tuer-firma,.tueren .tuer-firma:hover{
  background:color-mix(in srgb,var(--stern-gruen) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--stern-gruen) 42%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 50px rgba(20,4,11,.22);
}
.tueren .tuer-firma::before{opacity:1;background:radial-gradient(80% 60% at 50% 0%,color-mix(in srgb,var(--stern-gruen) 26%,transparent),transparent 70%)}

/* ---------- Finale ohne Formular: mittig ---------- */
.finale-mitte .finale-in{position:relative;z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center;max-width:820px}
.finale-mitte .finale-titel{max-width:18ch}
.finale-mitte .lauftext{margin-inline:auto;text-align:center;max-width:60ch}
.finale-mitte .knapp{margin-inline:auto;text-align:center;max-width:52ch}
.finale-mitte .cta-reihe{margin-top:clamp(22px,3.4vh,32px)}
.finale-mitte .direkt{margin-top:22px}

/* ---------- Fuss: Seitenlinks ---------- */
.fuss-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin-top:6px;font-family:var(--sans);font-size:16px}
.fuss-nav a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);transition:border-color .3s}
.fuss-nav a:hover{border-color:var(--gold)}

/* ---------- Kontaktseite ---------- */
.kontakt-seite{padding-top:calc(var(--head-h) + clamp(40px,7vh,80px))}
.kontakt-seite .finale-titel{font-size:clamp(34px,3.9vw,52px)}
.kontakt-adresse{margin-top:10px}
/* Mesh eine Spur präsenter, damit Himbeer/Grün/Blau auf dem Weiss lesbar bleiben */
.held-mesh{opacity:.85}

/* ================================================================
   §38 · Runde 4 mit Marian (08.09.): Trust-Leiste dunkel und breit,
   Kapsel milchig/schmal/breit und immer sichtbar, Mitternacht-Text,
   Preis-Abstand, keine Schlusspunkte in Bildzeilen.
   Checkpoint: _checkpoints/v21_vor-runde4/
   ================================================================ */

/* Seitliches Ausbrechen: die Rosé-Flächen clippen selbst (Halo, Marginalien) */
.lichtflaeche{overflow:clip}

/* ---------- Trust-Leiste: tiefes Wein, weisse Marken, über die Breite verteilt ---------- */
.vertrauen-band{
  background:var(--wein-tief);color:#fff;
  padding:clamp(22px,3.4vh,36px) 0;
  --gold-tief:var(--stern-gold);           /* Siegel-Linien und -Ziffern hell auf Dunkel */
}
.vertrauen-in{justify-content:space-between;gap:clamp(18px,3vw,48px)}
.vb-item{color:rgba(255,255,255,.78)}
.vb-preis strong,.vb-wort{color:#fff}
.vb-sub{color:rgba(255,255,255,.72)}
.vb-trenner{background:rgba(255,255,255,.22)}
.vb-burg svg{stroke:#fff}
@media (max-width:1020px){ .vertrauen-in{justify-content:center} }

/* ---------- Kapsel: milchig, schmaler, breiter, bleibt stehen ---------- */
.kopf{padding-top:10px}
.kopf.versteckt{transform:none}
.kopf-schale{max-width:1320px}
.kopf-in{
  background:rgba(255,253,251,.58);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  padding:5px 8px 5px 20px;
}
.kopf.gescrollt .kopf-in{background:rgba(255,253,251,.7)}
.marke img{height:38px}
.kopf.gescrollt .marke img{transform:scale(.94)}
.btn-klein{padding:10px 22px}
@media (max-width:1020px){ .kopf-in{padding:4px 6px 4px 14px} .marke img{height:34px} }

/* ---------- Zusammen: nochmals 20 px mehr Luft vor dem Preis-Kasten ---------- */
.preis-bahn{margin-top:calc(var(--block-abstand) + 40px)}

/* ================================================================
   §39 · Runde 5 mit Marian (08.09.): Leiste oben verschmolzen und
   mittig, breiter gestreut; Türen ohne Farbstrich, Knöpfe gleich hoch;
   Logo wieder lesbar. Checkpoint: _checkpoints/v22_vor-runde5/
   ================================================================ */

/* Trust-Leiste: Tor darüber (Papier tropft ins Wein) — Inhalt sitzt mittig im
   sichtbaren Dunkel (oberes Tor deckt ~⅓ der Tor-Höhe hell ab, das untere Tor
   verlängert das Dunkel um ~⅓ nach unten). */
.vertrauen-band{
  padding-top:calc(var(--tor-h) + clamp(22px,3.4vh,36px));
  padding-bottom:calc(clamp(22px,3.4vh,36px) + var(--tor-h) * .33);
}
.vertrauen-in{max-width:1320px}
.vb-item{align-items:center}

/* Türen: der Farbstrich oben entfällt, Knöpfe gleich hoch */
.tuer::after{display:none}
.tueren-drei .btn-geist{min-height:78px}

/* Logo in der schmalen Kapsel wieder lesbar */
.marke img{height:48px}
.kopf.gescrollt .marke img{transform:scale(.96)}
.kopf-in{padding-top:4px;padding-bottom:4px}
@media (max-width:1020px){ .marke img{height:40px} }