@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/Fraunces.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url(/fonts/Fraunces-i.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/Outfit-300.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/Outfit-400.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/Outfit-500.woff2) format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/Caveat-500.woff2) format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/Caveat-600.woff2) format('woff2')}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/CourierPrime-400.woff2) format('woff2')}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/CourierPrime-700.woff2) format('woff2')}

:root{
  --nacht:#0C0B10;--nacht2:#16141C;--nacht3:#201D27;
  --papier:#F3ECDF;--papier2:#EAE1CF;--papier3:#E2D7C1;
  --tinte:#17151C;--grau:#6A6572;--linie:rgba(23,21,28,.14);--linie-h:rgba(243,236,223,.14);
  --gold:#C9A961;--goldh:#EBD28F;--goldd:#A5873F;
  --magenta:#E3188C;--magentad:#B5106D;
  --d:'Fraunces',Georgia,serif;--t:'Outfit',system-ui,sans-serif;--m:'Courier Prime',monospace;--h:'Caveat',cursive;
  --rand:clamp(20px,4vw,72px);--max:1480px;
  --sb:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:90px}
html{overflow-x:clip}
body{margin:0;background:var(--papier);color:var(--tinte);font:400 18px/1.65 var(--t);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1.1em}
h1,h2,h3,h4{font-family:var(--d);font-weight:800;line-height:.98;letter-spacing:-.022em;margin:0 0 .45em;font-variation-settings:"opsz" 144,"SOFT" 40,"WONK" 1}
h1{font-size:clamp(3.4rem,8.6vw,10.4rem);line-height:.92}
h2{font-size:clamp(2.5rem,5.2vw,5.4rem)}
h3{font-size:clamp(1.6rem,2.4vw,2.4rem);font-variation-settings:"opsz" 72,"SOFT" 30,"WONK" 0}
h1 em,h2 em,h3 em{font-style:italic;font-weight:600;color:var(--magenta)}
.dunkel h1 em,.dunkel h2 em,.dunkel h3 em{color:var(--goldh)}
.skip{position:absolute;left:-999px;top:0;background:var(--magenta);color:#fff;padding:10px 14px;z-index:999}.skip:focus{left:10px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--rand)}
.vorzeile{display:flex;align-items:center;gap:14px;font:700 13px/1.3 var(--m);letter-spacing:.2em;text-transform:uppercase;color:var(--magenta);margin:0 0 22px}
.vorzeile::before{content:"";width:34px;height:2px;background:currentColor;flex:0 0 auto}
.dunkel .vorzeile{color:var(--gold)}
.lead{font-size:clamp(1.15rem,1.5vw,1.45rem);line-height:1.55;font-weight:300;max-width:38em}
.dunkel{background:var(--nacht);color:var(--papier)}
.dunkel .lead,.dunkel p{color:rgba(243,236,223,.86)}
.hand{font:500 clamp(1.5rem,2.3vw,2.2rem)/1.15 var(--h);color:var(--magenta)}
.dunkel .hand{color:var(--goldh)}

/* Knöpfe: Karteikarte mit abgeschnittener Ecke */
.knoepfe{display:flex;flex-wrap:wrap;gap:16px 22px;align-items:center;margin-top:34px}
.knopf{--ecke:16px;position:relative;display:inline-flex;align-items:center;gap:12px;min-height:58px;padding:0 30px;background:var(--gold);color:var(--nacht);font:500 13.5px/1 var(--t);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;clip-path:polygon(0 0,calc(100% - var(--ecke)) 0,100% var(--ecke),100% 100%,var(--ecke) 100%,0 calc(100% - var(--ecke)));transition:background .25s,transform .25s}
.knopf::after{content:"";position:absolute;right:0;top:0;width:var(--ecke);height:var(--ecke);background:linear-gradient(225deg,var(--papier) 50%,rgba(0,0,0,.18) 50%)}
.dunkel .knopf::after,.held .knopf::after,.kopf .knopf::after{background:linear-gradient(225deg,var(--nacht) 50%,rgba(0,0,0,.25) 50%)}
.knopf:hover{background:var(--goldh);transform:translateY(-2px)}
.knopf.pink{background:var(--magenta);color:#fff}.knopf.pink:hover{background:#F23FA3}
.knopf.weiss{background:var(--papier);color:var(--nacht)}
.knopf svg{width:18px;height:18px;flex:0 0 auto}
.strich{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 2px;font:500 14px/1 var(--t);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:inherit}
.strich svg.unter{position:absolute;left:0;right:0;bottom:6px;width:100%;height:9px;overflow:visible}
.strich svg.unter path{fill:none;stroke:var(--magenta);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:300;stroke-dashoffset:0;transition:stroke-dashoffset .5s}
.dunkel .strich svg.unter path{stroke:var(--goldh)}
.strich:hover svg.unter path{stroke-dashoffset:300;animation:nachziehen .7s .05s forwards}
@keyframes nachziehen{to{stroke-dashoffset:0}}

/* Kopf */
.kopf{position:fixed;left:0;right:0;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px var(--rand);color:var(--papier);transition:background .35s,padding .35s,box-shadow .35s}
.kopf.gerollt{background:rgba(12,11,16,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:9px var(--rand);box-shadow:0 1px 0 rgba(201,169,97,.25)}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:46px}
.marke img{width:44px;height:46px}
.marke b{font:300 24px/1 var(--t);letter-spacing:.01em}.marke b strong{font-weight:500}
.marke small{display:block;font:700 13px/1 var(--m);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-top:5px}
.nav{display:none;gap:4px}
.nav a{position:relative;padding:12px 13px;font:500 13px/1 var(--t);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:rgba(243,236,223,.86)}
.nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:6px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav a[aria-current]{color:#fff}
.kopf-rechts{display:flex;align-items:center;gap:10px}
.kopf .knopf{min-height:46px;padding:0 20px;font-size:13px;--ecke:12px}
.waehl{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 6px 0 12px;background:none;border:0;color:var(--papier);cursor:pointer;font:500 13px/1 var(--t);letter-spacing:.16em;text-transform:uppercase}
.waehl svg{width:40px;height:40px}
.waehl:hover .ring{transform:rotate(40deg)}
.waehl .ring{transform-origin:50% 50%;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}

/* Wählscheibe (Menü) */
.scheibe{position:fixed;inset:0;z-index:80;background:var(--nacht);color:var(--papier);display:grid;grid-template-columns:1fr;align-items:center;justify-items:center;padding:80px var(--rand) calc(30px + var(--sb));overflow:auto;opacity:0;pointer-events:none;transition:opacity .35s}
.scheibe.offen{opacity:1;pointer-events:auto}
.scheibe-innen{display:grid;gap:24px 60px;grid-template-columns:minmax(0,1fr);align-items:center;max-width:1100px;width:100%}
.scheibe-zu{position:absolute;right:var(--rand);top:18px;background:none;border:0;color:var(--papier);font:500 13px/1 var(--t);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:46px}
.scheibe-zu i{width:34px;height:34px;border:1.5px solid var(--gold);border-radius:50%;position:relative}
.scheibe-zu i::before,.scheibe-zu i::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:1.5px;background:var(--gold);transform:rotate(45deg)}
.scheibe-zu i::after{transform:rotate(-45deg)}
.wahl{width:min(78vw,420px);aspect-ratio:1;margin:0 auto}
.wahl svg{width:100%;height:100%;overflow:visible}
.wahl .dreh{transform-origin:200px 200px;transition:transform .7s cubic-bezier(.25,.9,.3,1)}
.wahl .loch{cursor:pointer}
.wahl .loch circle{fill:var(--nacht2);stroke:var(--gold);stroke-width:1.5;transition:fill .25s}
.wahl .loch:hover circle,.wahl .loch:focus circle{fill:var(--magenta)}
.wahl .loch text{fill:var(--papier);font:700 22px var(--m);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.wahl .anschlag{fill:none}
.wahl .tick{stroke:rgba(201,169,97,.5);stroke-width:1.2}
.wahl .mitte{fill:var(--nacht);stroke:var(--gold);stroke-width:1.5}
.scheibe-liste{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.scheibe-liste a{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:14px;min-height:50px;padding:6px 10px;text-decoration:none;color:var(--papier);border-bottom:1px solid var(--linie-h);transition:background .25s}
.scheibe-liste a:hover{background:rgba(201,169,97,.12)}
.scheibe-liste b{font:700 15px var(--m);color:var(--gold);letter-spacing:.1em}
.scheibe-liste span{font:600 clamp(1.5rem,2.4vw,2rem)/1.1 var(--d);font-variation-settings:"opsz" 72,"SOFT" 30}
.scheibe-fuss{grid-column:1/-1;text-align:center;font:500 1.4rem var(--h);color:var(--gold)}
@media(min-width:900px){.scheibe-innen{grid-template-columns:420px 1fr}}

/* Held (Start) */
.held{position:relative;min-height:100svh;background:var(--nacht);color:var(--papier);display:grid;align-items:end;overflow:hidden;isolation:isolate}
.held-bild{position:absolute;inset:0;z-index:-2}
.held-bild img{width:100%;height:100%;object-fit:cover;object-position:68% 55%;transform:scale(1.06);animation:atmen 18s ease-in-out infinite alternate}
@keyframes atmen{to{transform:scale(1)}}
.held-schleier{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,11,16,.96) 0%,rgba(12,11,16,.9) 34%,rgba(12,11,16,.55) 62%,rgba(12,11,16,.25) 100%),linear-gradient(0deg,rgba(12,11,16,1) 0%,rgba(12,11,16,.3) 32%,rgba(12,11,16,0) 60%)}
.held-text{position:relative;padding:150px var(--rand) 140px;max-width:1120px}
.held .vorzeile{color:var(--gold)}
.held h1{margin-bottom:.1em}
.held h1 .zeile2{display:block;font-style:italic;font-weight:500;font-size:.44em;color:var(--goldh);letter-spacing:-.01em;margin-top:.22em;line-height:1.05}
.held .lead{margin-top:26px;color:rgba(243,236,223,.88)}
.held-werte{position:absolute;right:var(--rand);bottom:84px;display:none;gap:22px;font:700 13px var(--m);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.held-werte span::before{content:"✓ ";color:var(--goldh)}

/* Stempel */
.stempel{position:absolute;width:clamp(150px,18vw,280px);opacity:0;transform:scale(1.9) rotate(-22deg);filter:drop-shadow(0 10px 30px rgba(0,0,0,.4))}
.stempel.da{animation:stempeln .55s cubic-bezier(.2,1.2,.4,1) forwards}
@keyframes stempeln{0%{opacity:0;transform:scale(1.9) rotate(-22deg)}70%{opacity:1;transform:scale(.96) rotate(-10deg)}100%{opacity:1;transform:scale(1) rotate(-10deg)}}
.held .stempel{right:clamp(16px,7vw,150px);top:clamp(96px,16vh,190px)}

/* Protokollband */
.band{position:relative;background:var(--papier);color:var(--tinte);overflow:hidden;border-top:3px solid var(--gold);border-bottom:1px solid var(--linie)}
.band::before,.band::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.band::before{left:0;background:linear-gradient(90deg,var(--papier),transparent)}.band::after{right:0;background:linear-gradient(270deg,var(--papier),transparent)}
.band-lauf{display:flex;width:max-content;animation:laufen 70s linear infinite}
.band:hover .band-lauf{animation-play-state:paused}
.band-lauf span{display:flex;align-items:center;gap:14px;padding:16px 34px;font:700 13.5px/1 var(--m);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;border-right:1px solid var(--linie)}
.band-lauf span::before{content:"";width:22px;height:18px;background:url(/img/haken2.webp) center/contain no-repeat;flex:0 0 auto}
.band-lauf span b{color:var(--magenta);font-weight:700}
.band.dunkel{background:var(--nacht2);color:var(--papier);border-bottom-color:var(--linie-h)}
.band.dunkel::before{background:linear-gradient(90deg,var(--nacht2),transparent)}.band.dunkel::after{background:linear-gradient(270deg,var(--nacht2),transparent)}
.band.dunkel .band-lauf span{border-right-color:var(--linie-h)}
@keyframes laufen{to{transform:translateX(-50%)}}

/* Abschnitte */
.kapitel{padding:clamp(80px,9vw,150px) 0}
.kapitel.eng{padding:clamp(56px,6vw,96px) 0}
.kopfzeile{max-width:900px;margin-bottom:clamp(40px,5vw,72px)}
.kopfzeile p.lead{margin-top:18px}

/* Die Leitung: Telefonschnur, zeichnet sich */
.leitung{display:block;width:100%;height:120px;overflow:visible}
.leitung path{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:7000;stroke-dashoffset:7000;transition:stroke-dashoffset 2.4s cubic-bezier(.4,0,.2,1)}
.leitung.da path{stroke-dashoffset:0}
.leitung.pink path{stroke:var(--magenta)}

/* Wahrheit: zwei Spalten */
.wahrheit{display:grid;gap:0;grid-template-columns:1fr;border:1.5px solid var(--gold);overflow:hidden}
.w-spalte{padding:clamp(34px,4vw,60px)}
.w-laut{background:var(--nacht2);color:var(--papier)}
.w-wir{background:var(--papier);position:relative}
.w-wir::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 35px,rgba(201,169,97,.22) 35px 36px);pointer-events:none}
.w-spalte h3{margin-bottom:.8em}
.w-laut h3{color:rgba(243,236,223,.7);font-weight:500}
.w-liste{list-style:none;margin:0;padding:0;position:relative}
.w-liste li{position:relative;padding:11px 0 11px 46px;font-size:1.1rem;line-height:1.45;border-bottom:1px solid var(--linie-h)}
.w-wir .w-liste li{border-bottom-color:transparent;font-weight:400}
.w-laut .w-liste li{color:rgba(243,236,223,.62)}
.w-laut .w-liste li::before{content:"";position:absolute;left:0;top:19px;width:28px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12'%3E%3Cpath d='M2 10 26 2M2 2l24 8' fill='none' stroke='%23E3188C' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.w-laut .w-liste li i{font-style:normal;position:relative}
.w-laut .w-liste li i::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;background:var(--magenta);transform:scaleX(0);transform-origin:left;transition:transform .6s .2s}
.w-laut.da .w-liste li i::after{transform:scaleX(1)}
.w-wir .w-liste li::before{content:"";position:absolute;left:0;top:11px;width:32px;height:26px;background:url(/img/haken3.webp) center/contain no-repeat;opacity:0;transform:scale(.4);transition:opacity .4s,transform .4s}
.w-wir.da .w-liste li::before{opacity:1;transform:scale(1)}
.w-wir.da .w-liste li:nth-child(2)::before{transition-delay:.15s}.w-wir.da .w-liste li:nth-child(3)::before{transition-delay:.3s}.w-wir.da .w-liste li:nth-child(4)::before{transition-delay:.45s}.w-wir.da .w-liste li:nth-child(5)::before{transition-delay:.6s}.w-wir.da .w-liste li:nth-child(6)::before{transition-delay:.75s}.w-wir.da .w-liste li:nth-child(7)::before{transition-delay:.9s}
.w-fazit{grid-column:1/-1;background:var(--gold);color:var(--nacht);padding:22px clamp(24px,4vw,60px);font:600 clamp(1.5rem,2.4vw,2.2rem)/1.2 var(--d);font-style:italic;font-variation-settings:"opsz" 72,"SOFT" 40}
@media(min-width:860px){.wahrheit{grid-template-columns:1fr 1fr}}

/* Bereiche: Einträge */
.eintraege{border-top:1.5px solid var(--tinte)}
.eintrag{display:grid;grid-template-columns:1fr;gap:18px 40px;padding:34px 0;border-bottom:1.5px solid var(--tinte);text-decoration:none;color:inherit;position:relative;align-items:center;transition:background .3s}
.eintrag::after{content:"";position:absolute;left:-18px;right:-18px;top:0;bottom:0;background:var(--papier2);z-index:-1;opacity:0;transition:opacity .3s}
.eintrag:hover::after{opacity:1}
.e-nr{width:92px;height:92px;border-radius:50%;border:1.5px solid var(--gold);display:grid;place-items:center;font:700 1.9rem var(--m);color:var(--tinte);background:var(--papier);box-shadow:0 0 0 8px var(--papier),0 0 0 9.5px rgba(201,169,97,.45);transition:background .3s,color .3s,transform .5s cubic-bezier(.3,1.4,.5,1)}
.eintrag:hover .e-nr{background:var(--magenta);color:#fff;border-color:var(--magenta);transform:rotate(30deg)}
.eintrag:hover::after{opacity:1}
.e-nr span{display:block;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}.eintrag:hover .e-nr span{transform:rotate(-30deg)}
.e-text h3{margin-bottom:.25em}
.e-text .e-zusatz{font:700 13px var(--m);letter-spacing:.18em;text-transform:uppercase;color:var(--magenta);margin-bottom:10px;display:block}
.e-text p{margin:0;max-width:52ch;color:#3d3945}
.e-text .strich{margin-top:14px}
.e-bild{width:100%;aspect-ratio:16/10;overflow:hidden;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);box-shadow:8px 8px 0 var(--gold)}
.e-bild img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.eintrag:hover .e-bild img{transform:scale(1.05)}
@media(min-width:860px){.eintrag{grid-template-columns:140px 1fr 360px}.eintrag:nth-child(even){grid-template-columns:140px 360px 1fr}.eintrag:nth-child(even) .e-text{order:3}.eintrag:nth-child(even) .e-bild{order:2}}
.e-schluss{display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px;padding-top:40px}
.e-schluss .hand{margin:0}

/* Zahlen */
.zahlen{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 30px;margin-top:50px}
.zahl b{display:block;font:800 clamp(3.6rem,7vw,7.2rem)/1 var(--d);color:var(--goldh);font-variation-settings:"opsz" 144,"SOFT" 50;letter-spacing:-.03em}
.zahl b span{display:inline;font:inherit;color:inherit}
.zahl b small{font-size:.5em;color:var(--gold);vertical-align:top;margin-left:4px}
.zahl>span{display:block;font-size:1.05rem;color:rgba(243,236,223,.78);margin-top:8px;max-width:16em;line-height:1.4}
.zahl{position:relative;padding-top:18px;border-top:1px solid var(--linie-h)}
.zahl::before{content:"";position:absolute;left:0;top:-1px;width:48px;height:3px;background:var(--gold)}
@media(min-width:900px){.zahlen{grid-template-columns:repeat(4,1fr)}}
.buch{position:relative;margin-top:60px;background:var(--papier);color:var(--tinte);padding:34px clamp(22px,4vw,60px) 40px;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%);background-image:repeating-linear-gradient(0deg,transparent 0 43px,rgba(201,169,97,.35) 43px 44px);background-position:0 12px}
.buch::before{content:"";position:absolute;left:clamp(54px,5vw,84px);top:0;bottom:0;width:2px;background:rgba(227,24,140,.45)}
.buch-kopf{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;margin:0 0 14px;font:700 13px var(--m);letter-spacing:.2em;text-transform:uppercase;color:var(--magenta)}
.buch-kopf b{font:600 1.6rem/1 var(--h);color:var(--tinte);letter-spacing:0;text-transform:none}
.buch ol{list-style:none;margin:0;padding:0;columns:1;column-gap:50px}
.buch li{break-inside:avoid;position:relative;padding:0 0 0 46px;font:500 clamp(1.35rem,1.6vw,1.55rem)/44px var(--h);color:#2b2733}
.buch li::before{content:"";position:absolute;left:0;top:9px;width:34px;height:26px;background:url(/img/haken1.webp) center/contain no-repeat;opacity:0;transform:scale(.3) rotate(-20deg);transition:opacity .35s,transform .35s}
.buch.da li::before{opacity:1;transform:none}
.buch .stempel{right:clamp(10px,3vw,50px);bottom:-30px;top:auto;width:clamp(130px,13vw,190px)}
@media(min-width:760px){.buch ol{columns:2}}
@media(min-width:1500px){.buch ol{columns:3}}


/* Doppel: Bild und Text */
.doppel{display:grid;gap:40px;align-items:center;grid-template-columns:1fr}
.doppel .bild{position:relative}
.doppel .bild>img:first-child{width:100%;aspect-ratio:4/3;object-fit:cover;clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%)}
.doppel .bild .notiz{position:absolute;left:-6px;bottom:-26px;transform:rotate(-4deg);font:600 clamp(1.5rem,2.2vw,2.3rem)/1 var(--h);color:var(--magenta);background:var(--papier);padding:10px 16px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.dunkel .doppel .bild .notiz{background:var(--nacht2);color:var(--goldh)}
.doppel .text .zwei{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:30px}
.doppel .text .zwei b{display:block;font:600 1.35rem/1.15 var(--d);margin:6px 0 8px;font-variation-settings:"opsz" 48,"SOFT" 30}
.doppel .text .zwei span{font:700 13px var(--m);letter-spacing:.2em;text-transform:uppercase;color:var(--magenta)}
.dunkel .doppel .text .zwei span{color:var(--gold)}
.doppel .text .zwei p{font-size:1rem;color:#3d3945;margin:0}
.dunkel .doppel .text .zwei p{color:rgba(243,236,223,.78)}
@media(min-width:900px){.doppel{grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px)}.doppel.tausch .bild{order:2}}

/* Team */
.team-bild{position:relative;margin-top:50px}
.team-bild>img:first-child{width:100%;aspect-ratio:16/8;object-fit:cover;object-position:center 40%}
.team-bild .stempel{right:clamp(10px,4vw,60px);bottom:-40px;top:auto}
.laender{margin-top:30px;display:flex;flex-wrap:wrap;gap:6px 0;font:400 14.5px/1.5 var(--t);color:rgba(243,236,223,.7)}
.laender span::after{content:"·";color:var(--gold);margin:0 10px}
.laender span:last-child::after{content:""}

/* Haltung */
.haltung{display:grid;gap:30px;grid-template-columns:1fr}
.h-satz{position:relative;padding:34px 0 0 0;border-top:1.5px solid var(--tinte)}
.h-satz b{position:absolute;top:-30px;left:0;background:var(--papier);padding-right:14px;font:italic 500 2.2rem/1 var(--d);color:var(--magenta)}
.h-satz h3{margin-bottom:.4em}
.h-satz p{color:#3d3945;margin:0}
@media(min-width:860px){.haltung{grid-template-columns:1fr 1fr;gap:60px}}

/* Fragen */
.fragen{border-top:1.5px solid var(--tinte)}
.fragen details{border-bottom:1.5px solid var(--tinte)}
.fragen summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:64px 1fr 40px;align-items:center;gap:14px;padding:22px 0;font:600 clamp(1.2rem,1.7vw,1.6rem)/1.25 var(--d);font-variation-settings:"opsz" 48,"SOFT" 30}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary i{position:relative;font:700 13px var(--m);color:var(--magenta);letter-spacing:.1em;font-style:normal}
.fragen summary i::after{content:"";position:absolute;left:-4px;top:-10px;width:40px;height:32px;background:url(/img/haken4.webp) center/contain no-repeat;opacity:0;transform:scale(.3);transition:opacity .35s,transform .35s}
.fragen details[open] summary i::after{opacity:1;transform:none}
.fragen details[open] summary i{color:transparent}
.fragen summary em{justify-self:end;width:34px;height:34px;border:1.5px solid var(--gold);border-radius:50%;position:relative;transition:transform .35s,background .35s;font-style:normal}
.fragen summary em::before,.fragen summary em::after{content:"";position:absolute;left:9px;right:9px;top:50%;height:1.5px;background:var(--tinte);transition:transform .35s}
.fragen summary em::after{transform:rotate(90deg)}
.fragen details[open] summary em{transform:rotate(45deg);background:var(--gold)}
.fragen .antwort{padding:0 40px 26px 68px;color:#3d3945;max-width:62ch;font-size:1.05rem}
@media(max-width:600px){.fragen summary{grid-template-columns:1fr 34px}.fragen summary i{display:none}.fragen .antwort{padding-left:0}}

/* Geschenk */
.geschenk{position:relative;background:var(--magenta);color:#fff;overflow:hidden;text-align:center;padding:clamp(80px,10vw,150px) var(--rand)}
.geschenk::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 70% 30%,rgba(255,255,255,.16),transparent 70%)}
.geschenk .vorzeile{justify-content:center;color:#fff}.geschenk .vorzeile::before{background:#fff}
.geschenk h2{max-width:14em;margin:0 auto .3em}
.geschenk h2 em{color:#FFE57A}
.geschenk p{max-width:36em;margin:0 auto;color:rgba(255,255,255,.9)}
.geschenk .knoepfe{justify-content:center}
.geschenk .stempel{right:clamp(0px,8vw,140px);top:30px;width:clamp(120px,14vw,220px);opacity:.95;filter:drop-shadow(0 10px 30px rgba(0,0,0,.25)) brightness(0) invert(1)}
.geschenk .knopf::after{background:linear-gradient(225deg,var(--magenta) 50%,rgba(0,0,0,.2) 50%)}

/* Kontaktwege */
.wege{display:grid;gap:22px;grid-template-columns:1fr;margin-top:40px}
.weg{display:block;position:relative;padding:30px 28px 30px;border:1.5px solid var(--gold);text-decoration:none;color:inherit;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);transition:background .3s,transform .3s}
.weg:hover{background:var(--nacht2);transform:translateY(-4px)}
.weg i{font:700 13px var(--m);letter-spacing:.2em;color:var(--gold);text-transform:uppercase;font-style:normal}
.weg b{display:block;font:600 clamp(1.5rem,2.2vw,2rem)/1.1 var(--d);margin:12px 0 10px;font-variation-settings:"opsz" 48,"SOFT" 30}
.weg p{font-size:1rem;color:rgba(243,236,223,.75);margin:0 0 14px}
.weg span{font:600 1.15rem var(--t);color:var(--goldh);word-break:break-word}
@media(min-width:860px){.wege{grid-template-columns:repeat(3,1fr)}}

/* Film */
.film{max-width:1100px;margin:0 auto}
.filmrahmen{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%)}
.filmrahmen video{width:100%;height:100%;object-fit:cover}
.filmrahmen .start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:rgba(12,11,16,.35);border:0;cursor:pointer;color:var(--papier);transition:opacity .4s}
.filmrahmen .start .kreis{width:96px;height:96px;border-radius:50%;border:1.5px solid var(--gold);display:grid;place-items:center;position:relative;background:rgba(12,11,16,.4)}
.filmrahmen .start .kreis::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(201,169,97,.5);animation:puls 2.4s ease-out infinite}
@keyframes puls{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.35);opacity:0}}
.filmrahmen .start svg{width:30px;height:30px;fill:var(--goldh);margin-left:5px}
.filmrahmen .start span{font:700 13px var(--m);letter-spacing:.22em;text-transform:uppercase;color:var(--goldh)}
.filmrahmen.laeuft .start{opacity:0;pointer-events:none}
.filmrahmen .abspann{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;background:var(--nacht);padding:20px}
.filmrahmen.ende .abspann{display:flex}
.abspann .wm{font:300 clamp(2.4rem,6vw,5rem)/1 var(--t);color:var(--papier)}.abspann .wm strong{font-weight:500}
.abspann small{font:700 13px var(--m);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.abspann p{font:italic 500 clamp(1.1rem,2vw,1.6rem)/1.3 var(--d);color:var(--goldh);margin:10px 0 0;max-width:30em}
.abspann button{margin-top:18px;background:none;border:1px solid var(--gold);color:var(--papier);font:500 13px var(--t);letter-spacing:.18em;text-transform:uppercase;padding:14px 22px;cursor:pointer}

/* Unterseiten-Held */
.uheld{position:relative;background:var(--nacht);color:var(--papier);padding:150px 0 90px;overflow:hidden;isolation:isolate}
.uheld .wrap{display:grid;gap:40px;align-items:center;grid-template-columns:1fr}
.uheld h1{font-size:clamp(3rem,6.4vw,7.4rem)}
.uheld .lead{margin-top:20px}
.uheld .hand{margin-top:22px}
.u-bild{position:relative;transform:rotate(2deg)}
.u-bild>img:first-child{width:100%;aspect-ratio:4/3;object-fit:cover;clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%);box-shadow:14px 14px 0 var(--gold)}
.u-bild .stempel{left:-20px;bottom:-30px;top:auto;right:auto;width:clamp(130px,14vw,210px)}
.uheld::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--magenta))}
@media(min-width:900px){.uheld .wrap{grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,100px)}}

/* Punkte (Was Sie bekommen) */
.punkte{display:grid;gap:0;grid-template-columns:1fr;border-top:1.5px solid var(--tinte)}
.punkt{display:grid;grid-template-columns:70px 1fr;gap:18px;padding:30px 0;border-bottom:1.5px solid var(--tinte)}
.punkt b{font:italic 600 2.4rem/1 var(--d);color:var(--magenta)}
.punkt h3{font-size:clamp(1.35rem,1.9vw,1.8rem);margin-bottom:.35em}
.punkt p{margin:0;color:#3d3945;max-width:56ch}
.dunkel .punkt{border-bottom-color:var(--linie-h)}.dunkel .punkte{border-top-color:var(--linie-h)}.dunkel .punkt p{color:rgba(243,236,223,.8)}.dunkel .punkt b{color:var(--goldh)}
@media(min-width:900px){.punkte.zweier{grid-template-columns:1fr 1fr;column-gap:60px}.punkte.zweier .punkt:nth-child(-n+2){border-top:0}}

/* Schritte: drei Stationen an der Leitung */
.kette{position:relative;display:grid;gap:34px;grid-template-columns:1fr;padding-top:10px}
.kette>svg{position:absolute;z-index:0;pointer-events:none;overflow:visible}
.kette>svg path{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:7000;stroke-dashoffset:7000;transition:stroke-dashoffset 2.6s cubic-bezier(.4,0,.2,1)}
.kette.da>svg path{stroke-dashoffset:0}
.station{position:relative;z-index:1;display:grid;grid-template-columns:84px 1fr;gap:20px;align-items:start}
.station .loch{width:84px;height:84px;border-radius:50%;border:1.5px solid var(--gold);background:var(--nacht2);display:grid;place-items:center;font:700 1.7rem var(--m);color:var(--goldh);box-shadow:0 0 0 10px var(--nacht),0 0 0 11.5px rgba(201,169,97,.35);transition:background .3s,color .3s}
.kapitel:not(.dunkel) .station .loch{background:var(--papier);box-shadow:0 0 0 10px var(--papier),0 0 0 11.5px rgba(201,169,97,.5);color:var(--magenta)}
.station:hover .loch{background:var(--magenta);color:#fff}
.station h3{font-size:1.7rem;margin:10px 0 .3em}
.station p{margin:0;max-width:34ch}
.dunkel .station p{color:rgba(243,236,223,.82)}
.kapitel:not(.dunkel) .station p{color:#3d3945}
.station i{display:block;font:700 13px var(--m);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-style:normal;margin-top:8px}
.kapitel:not(.dunkel) .station i{color:var(--magenta)}
@media(max-width:859px){.kette>svg{display:none}.kette::before{content:"";position:absolute;left:41px;top:40px;bottom:40px;width:2px;background:repeating-linear-gradient(180deg,var(--gold) 0 10px,transparent 10px 18px);opacity:.6}}
@media(min-width:860px){.kette{grid-template-columns:repeat(3,1fr);gap:40px}.station{grid-template-columns:1fr;justify-items:start}.station:nth-child(3){padding-top:40px}.station:nth-child(4){padding-top:80px}}

/* Zitat */
.zitat{text-align:center;padding:clamp(70px,8vw,120px) var(--rand)}
.zitat blockquote{margin:0 auto;max-width:22em;font:italic 500 clamp(1.9rem,3.6vw,3.6rem)/1.2 var(--d);font-variation-settings:"opsz" 144,"SOFT" 60}
.zitat blockquote::before{content:"„"}.zitat blockquote::after{content:"“"}
.zitat cite{display:block;margin-top:22px;font:700 13px var(--m);letter-spacing:.22em;text-transform:uppercase;color:var(--magenta);font-style:normal}
.dunkel .zitat cite{color:var(--gold)}
.zitat img.unterschrift{width:220px;margin:18px auto 0}

/* Kurz (Abschluss-CTA) */
.kurz{padding:clamp(70px,8vw,120px) 0}
.kurz .wrap{display:grid;gap:30px;grid-template-columns:1fr;align-items:center}
.kurz h2{margin:0}
.kurz p{margin:0;max-width:34em}
.kurz .knoepfe{margin-top:16px}
@media(min-width:900px){.kurz .wrap{grid-template-columns:1.2fr .8fr}}

/* Gedanken (Einblicke) */
.gedanken{display:grid;gap:34px 30px;grid-template-columns:1fr}
.gedanke{position:relative;padding:34px 30px 30px;background:#FBF6EC;color:var(--tinte);clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%);box-shadow:0 18px 50px rgba(23,21,28,.14);background-image:repeating-linear-gradient(0deg,transparent 0 31px,rgba(201,169,97,.22) 31px 32px);background-position:0 6px}
.gedanke::before{content:"";position:absolute;left:32%;right:32%;top:-9px;height:20px;background:rgba(201,169,97,.38);transform:rotate(-1.5deg)}
.gedanke:nth-child(odd){transform:rotate(-1.2deg)}.gedanke:nth-child(even){transform:rotate(1deg)}
.gedanke i{font:600 1.35rem/1 var(--h);color:var(--magenta);font-style:normal}
.gedanke h3{font-size:clamp(1.35rem,2vw,1.8rem);margin:10px 0 12px}
.gedanke p{margin:0;color:#3d3945;font-size:1.02rem;line-height:32px}
@media(min-width:900px){.gedanken{grid-template-columns:1fr 1fr;gap:50px 44px}.gedanke:nth-child(2),.gedanke:nth-child(4){margin-top:40px}}
.personen{display:grid;gap:24px;grid-template-columns:1fr;margin-top:40px}
.person{padding:28px 0;border-top:1.5px solid var(--tinte)}
.person b{display:block;font:600 2rem/1 var(--d);margin-bottom:10px}
.person p{margin:0;color:#3d3945}
@media(min-width:860px){.personen{grid-template-columns:1fr 1fr;gap:60px}}

/* Recht */
.recht-nav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px}
.recht-nav a{padding:12px 18px;border:1.5px solid var(--gold);text-decoration:none;font:500 13px var(--t);letter-spacing:.16em;text-transform:uppercase;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.recht-nav a:hover{background:var(--gold);color:var(--nacht)}
.recht{max-width:820px}
.recht h2{font-size:clamp(2rem,3.4vw,3rem);margin-top:1.6em;padding-top:.6em;border-top:1.5px solid var(--tinte)}
.recht h3{font-size:1.25rem;margin-top:1.6em}
.recht p{color:#3d3945;font-size:1.02rem}
.recht .k{font:700 13px var(--m);letter-spacing:.18em;text-transform:uppercase;color:var(--magenta)}

/* Fuss */
.fuss{background:var(--nacht);color:var(--papier);padding:70px 0 40px;border-top:3px solid var(--gold)}
.fuss-g{display:grid;gap:36px;grid-template-columns:1fr}
.fuss h4{font:700 13px var(--m);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.fuss a{text-decoration:none;color:rgba(243,236,223,.85);display:block;min-height:44px;line-height:44px}
.fuss a:hover{color:var(--goldh)}
.fuss p{color:rgba(243,236,223,.7);font-size:1rem}
.fuss .marke{margin-bottom:14px}
.fuss-u{margin-top:50px;padding-top:22px;border-top:1px solid var(--linie-h);display:flex;flex-wrap:wrap;gap:8px 26px;font:400 13.5px/1.6 var(--t);color:rgba(243,236,223,.55)}
.fuss-u a{display:inline-block;min-height:0;line-height:1.4;padding:10px 0}
@media(min-width:860px){.fuss-g{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.vermerk{background:#0b0b0c;padding:16px 20px calc(16px + var(--sb))}
.vermerk a{display:flex;align-items:center;justify-content:center;gap:16px;text-decoration:none}
.vermerk .seele b{font:400 15.5px var(--h);color:#fff}
.vermerk .wortmarke{width:180px;height:auto}

/* Handy-Leiste */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr 1fr;background:rgba(12,11,16,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:2px solid var(--gold);padding-bottom:var(--sb)}
.leiste a,.leiste button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:58px;background:none;border:0;color:var(--papier);text-decoration:none;font:500 13px/1 var(--t);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.leiste svg{width:22px;height:22px}
.leiste .l-wa{color:#7FE3A2}.leiste .l-ruf{color:var(--goldh)}
body{padding-bottom:calc(60px + var(--sb))}

/* Erscheinen */
.zeig{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s ease}
.zeig.da{opacity:1;transform:none}

@media(min-width:1100px){
  .nav{display:flex}
  .leiste{display:none}
  body{padding-bottom:0}
  .held-werte{display:flex}
}
@media(max-width:1099px){.kopf .knopf{display:none}}
@media(max-width:600px){
  body{font-size:17.5px}
  .held-text{padding:215px var(--rand) 100px}
  .marke small{display:none}
  .held .vorzeile .lang{display:none}
  .held h1{font-size:clamp(3.4rem,17vw,5.2rem)}
  .held .stempel{top:86px;bottom:auto;width:135px;right:14px}
  .held-schleier{background:linear-gradient(0deg,rgba(12,11,16,1) 0%,rgba(12,11,16,.92) 45%,rgba(12,11,16,.45) 75%,rgba(12,11,16,.2) 100%)}
  .held-bild img{object-position:62% 20%}
  .knoepfe{gap:14px}
  .knopf{width:100%;justify-content:center;min-height:60px}
  .strich{min-height:48px}
  .doppel .text .zwei{grid-template-columns:1fr}
  .e-bild{box-shadow:6px 6px 0 var(--gold)}
  .zahl b{font-size:3.2rem}
  .buch li{font-size:1.3rem}
  .buch{padding-bottom:110px}
  .w-liste li{font-size:1.02rem;padding-left:40px}
  .scheibe{padding-top:70px}
  .scheibe-liste span{font-size:1.35rem}
  .scheibe-liste a{min-height:46px}
  .team-bild img{aspect-ratio:4/3}
  .doppel .bild .notiz{left:0;bottom:-20px;font-size:1.45rem}
  .u-bild{transform:none;margin-top:10px}
  .u-bild .stempel{left:auto;right:-6px;bottom:-24px}
  .vermerk .seele b{font-size:17px}.vermerk .wortmarke{width:150px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.zeig{opacity:1;transform:none}.stempel{opacity:1;transform:rotate(-10deg)}.leitung path{stroke-dashoffset:0}}

/* Drei Wege, drei Gewichte */
.weg:nth-child(1){background:var(--gold);color:var(--nacht);border-color:var(--gold)}
.weg:nth-child(1) i,.weg:nth-child(1) span{color:var(--nacht)}
.weg:nth-child(1) p{color:rgba(12,11,16,.75)}
.weg:nth-child(1):hover{background:var(--goldh)}
.weg:nth-child(3){background:var(--papier);color:var(--tinte);border-color:var(--papier)}
.weg:nth-child(3) i{color:var(--magenta)}.weg:nth-child(3) p{color:#3d3945}.weg:nth-child(3) span{color:var(--magentad)}
.weg:nth-child(3):hover{background:#fff}
/* Schritte an der Leitung */
.schritte{position:relative}
.schritte::before{content:"";position:absolute;left:4%;right:4%;top:50%;height:2px;background:repeating-linear-gradient(90deg,var(--gold) 0 8px,transparent 8px 16px);opacity:.5;z-index:0}
.schritt{z-index:1}
.schritt:nth-child(3){transform:translateY(-10px)}
@media(max-width:859px){.schritte::before{left:50%;right:auto;top:4%;bottom:4%;height:auto;width:2px;background:repeating-linear-gradient(180deg,var(--gold) 0 8px,transparent 8px 16px)}.schritt:nth-child(3),.schritt:nth-child(2){transform:none}}
.kapitel:not(.dunkel) .schritt{background:#FBF6EC;box-shadow:0 14px 40px rgba(23,21,28,.08),inset 0 0 0 1.5px var(--gold)}
.s-warum .doppel .bild>img:first-child{max-width:440px;margin:0 auto}