/* ============================================================
   RAUM FÜR NEUES · Alexandra Haas · Life- & Beziehungscoaching
   Konzept, Design und Programmierung: Eric Egger · www.ericegger.de
   Von Hand geschrieben: reines CSS, kein Framework, kein Präprozessor, keine Vorlage.
   Gestaltung: Weniger ist mehr. Weiß. Luft. Pink und Orange
   als gezielte Akzente. Klar. Modern. Leicht. Mutig. Warm.
   Schriften: Outfit, Manrope, Caveat – lokal eingebunden (SIL OFL 1.1),
   keine Verbindung zu Google Fonts oder anderen fremden Servern.
   ============================================================ */

@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/outfit-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/manrope-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Caveat";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/caveat-latin-wght-normal.woff2") format("woff2")}

:root{
  --weiss:#ffffff;
  --tinte:#1c1920;
  --text:#3b3740;
  --grau:#767079;
  --hell:#a9a3ab;
  --linie:#ebe7ea;
  --nebel:#f7f5f6;
  --hauch-pink:#fff1f8;
  --hauch-orange:#fff5ec;
  --pink:#e819a0;
  --pink-text:#c20f83;
  --magenta:#d745af;
  --orange:#fd8224;
  --orange-text:#b4550a;
  --verlauf:linear-gradient(135deg,#e819a0 0%,#fd8224 100%);
  --verlauf-weich:linear-gradient(135deg,rgba(232,25,160,.08),rgba(253,130,36,.10));
  --display:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --lauf:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hand:"Caveat","Segoe Print","Bradley Hand",cursive;
  --breite:1240px;
  --rand:clamp(1.25rem,5vw,4rem);
  --nav-h:92px;
  /* Weiß bleibt Weiß: „only“ verbietet dem Browser, die Seite eigenmächtig zu verdunkeln (Chrome/Edge „automatisches dunkles Design“, Samsung „Dunkler Modus für Webseiten“). Die Zeile davor ist der Rückfall für Browser ohne „only“. */
  color-scheme:light;
  color-scheme:only light;
  --leicht:cubic-bezier(.2,.8,.2,1);
  --federnd:cubic-bezier(.33,1,.36,1);
  /* Die Luft zwischen zwei Themen: knapp ein Drittel Bildschirm, überall gleich (Alexandra: „ordentlich Luft dazwischen“) */
  --atem:clamp(12rem,30vh,18rem);
  --radius:22px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--weiss);color:var(--text);font-family:var(--lauf);font-size:1.0625rem;line-height:1.7;font-weight:450;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p a:not(.knopf):not(.pille):not(.linkpfeil),.lese li a:not(.knopf):not(.pille):not(.linkpfeil),.faq li a{color:var(--pink-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;transition:color .25s}
p a:not(.knopf):not(.pille):not(.linkpfeil):hover,.lese li a:not(.knopf):not(.pille):not(.linkpfeil):hover{color:var(--tinte)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
strong,b{font-weight:700;color:var(--tinte)}
::selection{background:#ffd2ec;color:var(--tinte)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--pink);outline-offset:4px;border-radius:4px}
.sprung{position:absolute;left:-9999px;top:1rem;background:var(--tinte);color:#fff;padding:.7rem 1rem;z-index:1000;border-radius:8px}
.sprung:focus{left:1rem}
.nurlesen{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{font-family:var(--display);color:var(--tinte);margin:0;line-height:1.08;letter-spacing:-.018em;font-weight:400}
/* Überschriften brechen ausgewogen um: kein einzelnes Wort allein in einer Zeile */
h2,h3,.auftakt h1,.band--gross h2{text-wrap:balance}
h1{font-size:clamp(2.4rem,5.4vw,4.6rem);font-weight:300}
h2{font-size:clamp(1.9rem,3.6vw,3.1rem);font-weight:300}
h3{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:500;letter-spacing:-.01em;line-height:1.2}
h4{font-size:1.1rem;font-weight:600;line-height:1.3}
.gross{font-size:clamp(3rem,8.6vw,7.4rem);line-height:.98;letter-spacing:-.03em;font-weight:300}
.pink{color:var(--pink)}
.pinktext{color:var(--pink-text)}
.orange{color:var(--orange)}
.mittel{font-weight:500}
.fett{font-weight:600}
em{font-style:normal;font-weight:600;color:var(--tinte)}
.hand{font-family:var(--hand);font-weight:500;letter-spacing:0;font-size:1.35em;line-height:1.1;color:var(--pink-text)}
.kicker{display:inline-flex;vertical-align:top;align-items:center;gap:.7rem;font-family:var(--display);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--grau);font-weight:500;margin:0 0 1.4rem}
.kicker::before{content:"";width:28px;height:2px;background:var(--verlauf);border-radius:2px}
.kicker--pink{color:var(--pink-text)}
.lede{font-size:clamp(1.2rem,1.7vw,1.45rem);line-height:1.55;color:var(--tinte);font-weight:400;max-width:34ch}
.lese{max-width:66ch}
.lese p,.lese ul,.lese ol{margin:0 0 1.2em}
.lese>:last-child{margin-bottom:0}
/* Jede Sektion beginnt und endet bündig mit ihrem Inhalt, damit die Luft dazwischen überall dieselbe ist (Atem-Maß) */
.innen>:first-child:not([class*="mt-"]),.zwei>div>:first-child:not([class*="mt-"]),.drittel>div>:first-child:not([class*="mt-"]){margin-top:0}
.innen>:last-child,.zwei>div>:last-child,.drittel>div>:last-child{margin-bottom:0}
.lese h2{margin:2.6em 0 .7em}
.lese .kicker+h2,.lese h2:first-child{margin-top:0}
.lese h3{margin:2em 0 .6em}
.lese ul{padding-left:1.2em}
.zitat{font-family:var(--display);font-weight:300;font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.22;letter-spacing:-.02em;color:var(--tinte);margin:0}
.zitat--pink{color:var(--pink)}
.klein{font-size:.92rem;color:var(--grau)}
.nummer{font-family:var(--display);font-weight:200;font-size:clamp(3rem,7vw,6rem);line-height:1;color:transparent;-webkit-text-stroke:1px #f0c4e2;letter-spacing:-.04em}
.punkt{display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--pink);vertical-align:middle;margin-left:.15em;transform:translateY(-.05em)}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:1rem 1.75rem;border-radius:999px;font-family:var(--display);font-weight:500;font-size:1rem;letter-spacing:.01em;line-height:1;border:1.5px solid var(--tinte);color:var(--tinte);background:transparent;transition:transform .45s var(--federnd),background .3s,color .3s,border-color .3s,box-shadow .3s;white-space:nowrap;position:relative;overflow:hidden;cursor:pointer}
.knopf:hover{transform:translateY(-2px);background:var(--tinte);color:#fff}
.knopf--voll{background:var(--tinte);color:#fff}
.knopf--voll:hover{background:var(--pink);border-color:var(--pink);box-shadow:0 14px 30px -12px rgba(232,25,160,.55)}
.knopf--pink{background:var(--pink);border-color:var(--pink);color:#fff}
.knopf--pink:hover{background:var(--tinte);border-color:var(--tinte)}
.knopf--rand{border-color:var(--linie)}
.knopf--klein{padding:.75rem 1.2rem;font-size:.9rem}
.knopf--gross{padding:1.2rem 2.2rem;font-size:1.08rem}
.knopf svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pille{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .95rem .55rem .8rem;border-radius:999px;background:var(--nebel);max-width:100%;white-space:nowrap;color:var(--tinte);font-size:.92rem;font-weight:600;transition:background .3s,color .3s,transform .4s var(--federnd)}
.pille:hover{background:var(--hauch-pink);color:var(--pink-text);transform:translateY(-1px)}
.pille svg{width:17px;height:17px;flex:none}
.insta,.knopf .insta,.pille .insta,.weg .zeichen .insta,.ig__story-fuss .insta,.menue__insta .insta{fill:currentColor;stroke:none;stroke-width:0}
.fuss__sozial{display:flex}
.fuss__sozial .pille{font-size:.86rem;padding:.5rem .85rem .5rem .7rem;gap:.38rem;flex:none;width:max-content;max-width:none}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.8rem 1rem;align-items:center}
.linkpfeil{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:500;color:var(--tinte);border-bottom:1.5px solid var(--pink);padding-bottom:.15rem;transition:gap .35s var(--federnd),color .3s}
.linkpfeil:hover{gap:.9rem;color:var(--pink-text)}
.linkpfeil svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

@supports (height:1svh){:root{--atem:clamp(12rem,30svh,18rem)}}

/* ---------- Raster ---------- */
.innen{width:min(100% - 2*var(--rand),var(--breite));margin-inline:auto}
.block{padding:calc(var(--atem)/2) 0}
.block--eng{padding:calc(var(--atem)/3) 0}
.block--oben-null{padding-top:0}
.block--unten-null{padding-bottom:0}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.zwei--mitte{align-items:center}
.drittel{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.klebt{position:sticky;top:calc(var(--nav-h) + 2rem)}
.haar{height:1px;background:var(--linie);border:0;margin:0}
.abstand{height:clamp(2rem,5vw,4rem)}
/* Kapitel-Pause: anderthalb Atemzüge Weiß, in der Mitte ihr Zeichen aus den Mails (●○●○●) in ihren Farben */
.pause{height:calc(var(--atem)/2);display:flex;align-items:center;justify-content:center;gap:11px}
.pause--band{height:var(--atem)}
.pause i{display:block;width:7px;height:7px;border-radius:50%;background:var(--pink);box-sizing:border-box}
.pause i:nth-child(even){background:transparent;border:1.5px solid var(--orange)}
@media (max-width:860px){.zwei,.drittel{grid-template-columns:1fr}.klebt{position:static}}

/* ---------- Kopf ---------- */
.kopf{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);background:rgba(255,255,255,0);transition:background .4s,box-shadow .4s,height .3s}
.kopf.fest{background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);box-shadow:0 1px 0 var(--linie)}
.kopf__innen{width:min(100% - 2*var(--rand),var(--breite));margin-inline:auto;height:100%;display:flex;align-items:center;gap:2rem}
.kopf__logo{display:block;height:calc(var(--nav-h) - 24px);flex:none;transition:height .3s}
.kopf__logo img{width:auto;height:100%}
.navi{margin-left:auto}
.navi__liste{list-style:none;margin:0;padding:0;display:flex;gap:clamp(1rem,2.4vw,2.2rem)}
.navi__liste a{font-family:var(--display);font-weight:500;font-size:.98rem;color:var(--tinte);position:relative;padding:.4rem 0}
.navi__liste a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--verlauf);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--federnd)}
.navi__liste a:hover::after,.navi__liste a[aria-current="page"]::after{transform:scaleX(1)}
.kopf__cta{flex:none}
.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:6px;margin-left:auto;border-radius:50%}
.burger span{display:block;width:24px;height:2px;background:var(--tinte);border-radius:2px;transition:transform .4s var(--federnd),opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.menue{position:fixed;inset:0;background:#fff;z-index:90;padding-top:var(--nav-h);overflow:hidden auto}
.menue[hidden]{display:none}
.menue__innen{width:min(100% - 2*var(--rand),var(--breite));margin-inline:auto;padding:2rem 0 0;position:relative;min-height:calc(100vh - var(--nav-h));display:flex;flex-direction:column}
.menue .marke-kreise{display:none}
.menue__liste{list-style:none;margin:0;padding:0}
.menue__liste li{opacity:0;transform:translateY(14px)}
.menue.offen .menue__liste li{animation:aufsteigen .6s var(--federnd) forwards}
.menue.offen .menue__liste li:nth-child(1){animation-delay:.05s}
.menue.offen .menue__liste li:nth-child(2){animation-delay:.1s}
.menue.offen .menue__liste li:nth-child(3){animation-delay:.15s}
.menue.offen .menue__liste li:nth-child(4){animation-delay:.2s}
.menue.offen .menue__liste li:nth-child(5){animation-delay:.25s}
.menue.offen .menue__liste li:nth-child(6){animation-delay:.3s}
.menue__liste a{display:block;font-family:var(--display);font-weight:300;font-size:clamp(2.2rem,9vw,4rem);line-height:1.15;color:var(--tinte);padding:.35rem 0;border-bottom:1px solid var(--linie);letter-spacing:-.02em}
.menue__liste a:hover{color:var(--pink)}
.menue__fuss{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center}
.menue__insta{font-weight:600;color:var(--pink-text);display:inline-flex;align-items:center;gap:.5rem}
.menue__insta .insta{width:1.15em;height:1.15em;flex:none}
@keyframes aufsteigen{to{opacity:1;transform:none}}
@media (max-width:980px){.navi,.kopf__cta{display:none}.burger{display:flex}}
body.menue-offen{overflow:hidden}

/* ---------- Einstieg (Startseite) ---------- */
.einstieg{min-height:100svh;display:grid;align-items:center;padding:calc(var(--nav-h) + 3rem) 0 calc(var(--atem)/2);position:relative}
.einstieg__innen{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.einstieg h1{font-size:clamp(2.6rem,6.2vw,5.6rem);font-weight:300;line-height:1.02;letter-spacing:-.03em;max-width:15ch}

.einstieg h1 .wort{display:inline-block;opacity:0;transform:translateY(.5em) rotate(1.5deg);animation:wort .9s var(--federnd) forwards}
.einstieg h1 .betont{font-weight:500;color:var(--pink)}
@keyframes wort{to{opacity:1;transform:none}}
.einstieg__drei{list-style:none;padding:0;margin:2.4rem 0 0;display:flex;flex-direction:column;gap:.55rem;font-family:var(--display);font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:400;color:var(--tinte)}
.einstieg__drei li{display:flex;align-items:center;gap:.9rem;opacity:0;transform:translateX(-10px);animation:seitlich .8s var(--federnd) forwards}
.einstieg__drei li:nth-child(1){animation-delay:1.1s}.einstieg__drei li:nth-child(2){animation-delay:1.25s}.einstieg__drei li:nth-child(3){animation-delay:1.4s}
.einstieg__drei li i{width:11px;height:11px;border-radius:50%;background:var(--orange);flex:none}
.einstieg__drei li:nth-child(2) i{background:var(--magenta)}.einstieg__drei li:nth-child(3) i{background:var(--pink)}
@keyframes seitlich{to{opacity:1;transform:none}}
.einstieg__knoepfe{margin-top:2.6rem;opacity:0;animation:wort .9s var(--federnd) 1.6s forwards}
/* Der Einstieg ist ein Bildschirm: Zwischenzeile, Frage, drei Zeilen und beide Buttons stehen über der Falz, der Scrollhinweis darunter,
   die nächste Sektion beginnt einen Atemzug tiefer. Die Frage wächst mit Breite UND Höhe: 5,84vw hält sie bei vier Zeilen
   (Spalte ≈ 8,1 Zeichenbreiten), 20,8svh − 102px ist die Höhe, die nach Kopfleiste, Zwischenzeile, drei Zeilen, Buttons
   und halbem Atemzug für vier Zeilen bleibt. Unter 737px Höhe greift die Untergrenze 3,2rem; dann steht der Inhalt oben statt mittig, damit die Buttons trotzdem über der Falz bleiben. */
@media (min-width:861px){
  .einstieg h1{font-size:clamp(2.6rem,min(5.84vw,max(3.2rem,20.8svh - 102px)),5.25rem)}
  .einstieg__drei{margin-top:clamp(1.4rem,2.8svh,2.4rem);gap:.45rem}
  .einstieg__knoepfe{margin-top:clamp(1.6rem,3.2svh,2.6rem)}
}
@media (min-width:861px) and (max-height:736px){.einstieg{align-items:start}}
.einstieg__seite{position:relative;display:flex;justify-content:center;align-items:center;min-height:min(60vw,520px)}
.atem{position:relative;width:min(78vw,460px);aspect-ratio:1;display:grid;place-items:center}
.atem svg{width:100%;height:100%;overflow:visible}
.atem .k1,.atem .k2,.atem .k3,.atem .k4{transform-box:fill-box;transform-origin:center}
.atem.lebt .k1{animation:atmen 9s ease-in-out infinite}
.atem.lebt .k2{animation:atmen 9s ease-in-out .35s infinite}
.atem.lebt .k3{animation:atmen 9s ease-in-out .7s infinite}
.atem.lebt .k4{animation:atmen 9s ease-in-out 1.05s infinite}
@keyframes atmen{0%,100%{transform:scale(1)}45%{transform:scale(1.045)}60%{transform:scale(1.045)}}
.atem__wort{position:absolute;bottom:-1.2rem;left:50%;transform:translateX(-50%);font-family:var(--display);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--hell);white-space:nowrap}
.einstieg__logo{position:absolute;left:0;bottom:0;width:clamp(150px,18vw,240px);opacity:0;animation:wort 1s var(--federnd) 1.9s forwards}
.scrollhinweis{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--hell);font-family:var(--display);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;opacity:0;animation:wort 1s var(--federnd) 2.4s forwards}
.scrollhinweis i{display:block;width:1px;height:44px;background:linear-gradient(var(--pink),transparent);animation:faden 2.4s ease-in-out infinite}
@keyframes faden{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:860px){.kopf.fest{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}.einstieg__innen{grid-template-columns:1fr}.einstieg__seite{min-height:0;justify-content:flex-start;margin-top:1rem}.atem{width:min(58vw,300px);margin:1.5rem auto 0}.einstieg__seite{justify-items:center}.scrollhinweis{display:none}.einstieg{min-height:0;padding-bottom:calc(var(--atem)/2)}}

/* Sanfter Auftritt beim Scrollen */
.js .auf{opacity:0;transform:translateY(22px);transition:opacity .9s var(--leicht),transform .9s var(--federnd)}
.js .auf.da{opacity:1;transform:none}
.auf--spaet{transition-delay:.15s}.auf--spaeter{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){.js .auf{opacity:1;transform:none;transition:none}.einstieg h1 .wort,.einstieg__drei li,.einstieg__knoepfe,.einstieg__logo,.scrollhinweis{animation:none;opacity:1;transform:none}.atem.lebt .k1,.atem.lebt .k2,.atem.lebt .k3,.atem.lebt .k4{animation:none}}

/* ---------- Fragen (Warum ...) ---------- */
.fragen{list-style:none;margin:0;padding:0;display:grid;gap:0}
.fragen li{border-top:1px solid var(--linie);padding:clamp(1.6rem,3vw,2.6rem) 0;display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,4vw,3rem);align-items:start}
.fragen li:last-child{border-bottom:1px solid var(--linie)}
.fragen .nummer{font-size:clamp(2rem,4vw,3.2rem);padding-top:.15em}
.fragen p{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(1.35rem,2.4vw,2.05rem);line-height:1.25;letter-spacing:-.015em;color:var(--tinte)}
.fragen p b{font-weight:500;color:var(--pink)}
.fragen .fazit{font-family:var(--lauf);font-size:1.1rem;font-weight:500;color:var(--text);line-height:1.6;letter-spacing:0}

/* ---------- Aussage (großer Satz) ---------- */
.aussage{text-align:left}
.aussage h2{font-size:clamp(2rem,5vw,4.4rem);font-weight:300;line-height:1.04;letter-spacing:-.03em;max-width:16ch}
.aussage h2 b{font-weight:500;background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
.aussage .lede{margin-top:2rem}
.satzfolge{font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.3;color:var(--tinte);letter-spacing:-.015em;margin:0}
.satzfolge span{display:block}
.satzfolge .hoch{font-weight:500;color:var(--pink)}
.rueckcover .satzfolge{max-width:22em}
.rueckcover .satzfolge span+span{margin-top:.35em}

/* ---------- Karten: Du bist bei mir richtig ---------- */
.richtig{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.2rem;margin-top:3rem}
.karte{position:relative;background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:2rem 1.8rem 2rem;transition:transform .5s var(--federnd),box-shadow .5s,border-color .4s;overflow:hidden}
.karte::before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:3px;background:var(--verlauf);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--federnd)}
.karte:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(28,25,32,.25);border-color:transparent}
.karte:hover::before{transform:scaleX(1)}
.karte h3{font-size:1.25rem;margin:0 0 .8rem;font-weight:500}
.karte h3 .punkte{color:var(--pink)}
.karte p{margin:0}
.karte .karte__nr{font-family:var(--display);font-weight:200;font-size:2.2rem;color:var(--pink);line-height:1;margin-bottom:1rem;opacity:.85}
.karte--voll{background:var(--tinte);color:#d9d4dc;border-color:var(--tinte)}
.karte--voll h3,.karte--voll strong{color:#fff}
.karte--voll:hover{box-shadow:0 30px 50px -28px rgba(232,25,160,.5)}
.karte--voll .linkpfeil{color:#fff}
/* vier Karten „Wie ich arbeite“ auf Orts- und Landkreisseiten: zwei mal zwei */
@media (min-width:760px){.richtig--vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
.karte--link{display:block;color:inherit;text-decoration:none}
.karte--link h3{color:var(--tinte)}
.karte--link:hover .linkpfeil{gap:.9rem}
/* Landkreisseiten: Tabelle aller Gemeinden (Fassung 8) */
.tabelle-huelle{overflow-x:auto;-webkit-overflow-scrolling:touch}
.orte-tabelle{width:100%;border-collapse:collapse;font-size:.95rem;min-width:560px}
.orte-tabelle th,.orte-tabelle td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--linie);vertical-align:top}
.orte-tabelle thead th{font-family:var(--display);font-weight:500;font-size:.85rem;letter-spacing:.03em;color:var(--grau);border-bottom:2px solid var(--linie)}
.orte-tabelle tbody th{font-weight:500}
.orte-tabelle tbody th a{color:var(--tinte);text-decoration:none;transition:color .25s}
.orte-tabelle tbody th a:hover{color:var(--pink-text)}
.orte-tabelle tbody th small{display:block;font-size:.75rem;color:var(--pink-text);font-weight:500;letter-spacing:.04em}
.orte-tabelle td{color:var(--text)}
.orte-tabelle tbody tr:hover td,.orte-tabelle tbody tr:hover th{background:#fdf6fb}
@media (max-width:640px){.orte-tabelle{min-width:0;width:100%;table-layout:fixed;font-size:.88rem}.orte-tabelle th:nth-child(4),.orte-tabelle td:nth-child(4){display:none}.orte-tabelle th,.orte-tabelle td{padding:.55rem .4rem;overflow-wrap:anywhere}.orte-tabelle thead th{overflow-wrap:normal;font-size:.72rem;letter-spacing:0}.orte-tabelle th:nth-child(1){width:31%}.orte-tabelle th:nth-child(2),.orte-tabelle th:nth-child(3){width:20%}}

/* ---------- Atemzug ---------- */
.atemzug{background:var(--hauch-pink);border-radius:calc(var(--radius) * 1.6);padding:clamp(2.5rem,6vw,5rem);display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:center;overflow:hidden;position:relative}
.atemzug::after{content:"";position:absolute;right:-12%;top:-30%;width:50%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(253,130,36,.16),transparent 65%);pointer-events:none}
.atemzug h2{font-size:clamp(1.8rem,3.2vw,2.7rem)}
.atemzug p{max-width:46ch}
.atemzug__spiel{position:relative;width:clamp(200px,24vw,280px);aspect-ratio:1;display:grid;place-items:center;z-index:1}
.atemzug__spiel svg{width:100%;height:100%;overflow:visible}
.atemzug__spiel .k1,.atemzug__spiel .k2,.atemzug__spiel .k3,.atemzug__spiel .k4{transform-box:fill-box;transform-origin:center;transition:transform 4s ease-in-out}
.atemzug__spiel.ein .k1{transform:scale(1.14)}.atemzug__spiel.ein .k2{transform:scale(1.1)}.atemzug__spiel.ein .k3{transform:scale(1.08)}.atemzug__spiel.ein .k4{transform:scale(1.06)}
.atemzug__spiel.halt .k1,.atemzug__spiel.halt .k2,.atemzug__spiel.halt .k3,.atemzug__spiel.halt .k4{transition-duration:.1s}
.atemzug__spiel.aus .k1,.atemzug__spiel.aus .k2,.atemzug__spiel.aus .k3,.atemzug__spiel.aus .k4{transform:scale(1);transition-duration:6s}
.atemzug__wort{position:absolute;inset:auto 0 -2.4rem;text-align:center;font-family:var(--display);font-size:.8rem;letter-spacing:.26em;text-transform:uppercase;color:var(--pink-text);min-height:1.2em}
.atemzug__start{margin-top:1.6rem}
.atemzug__zaehler{font-family:var(--display);font-weight:300;font-size:1.1rem;color:var(--grau);margin-left:1rem}
.atemzug__zaehler:empty{display:none}
@media (max-width:760px){.atemzug{grid-template-columns:1fr;text-align:left}.atemzug__spiel{margin:1rem auto 2.5rem}.atemzug__start-reihe{justify-content:center}}

/* ---------- Person ---------- */
.person__bild{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--nebel)}
.person__bild img{width:100%;height:auto;transition:transform 1.2s var(--leicht)}
.person__bild:hover img{transform:scale(1.03)}
.person__bild .marke-kreise{position:absolute;right:-14%;bottom:-10%;width:42%;filter:drop-shadow(0 20px 30px rgba(0,0,0,.12))}
.person__bild--schlicht .marke-kreise{display:none}
.unterschrift{margin:1.4rem 0 0;display:block}
.unterschrift img{width:clamp(190px,24vw,270px);height:auto;display:block}

/* ---------- Säulen (So arbeite ich) ---------- */
.saeulen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:2.4rem 2rem;margin-top:3rem}
.saeule{border-top:1px solid var(--linie);padding-top:1.6rem}
.saeule .zeichen{width:54px;height:54px;border-radius:18px;background:var(--hauch-orange);display:grid;place-items:center;margin-bottom:1.2rem;color:var(--orange-text)}
.saeule:nth-child(2) .zeichen{background:var(--hauch-pink);color:var(--pink-text)}
.saeule:nth-child(3) .zeichen{background:var(--nebel);color:var(--tinte)}
.saeule .zeichen svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.saeule h3{font-size:1.15rem;margin:0 0 .5rem}
.saeule p{margin:0;font-size:.98rem}

/* ---------- Verlaufsband ---------- */
.band{background:var(--verlauf);color:#fff;overflow:hidden}
.band--gross{padding:clamp(4rem,9vw,8rem) 0}
.band--gross h2{color:#fff;font-size:clamp(2.2rem,5.5vw,5rem);font-weight:300;letter-spacing:-.03em;max-width:14ch}
.band--gross h2.lang{font-size:clamp(1.7rem,3.4vw,3rem);max-width:22ch;line-height:1.12}
.band--gross p{color:rgba(255,255,255,.88);font-size:1.15rem;max-width:50ch}
.band .knopf{border-color:#fff;color:#fff}
.band .knopf:hover{background:#fff;color:var(--pink-text)}
.band .knopf--voll{background:#fff;color:var(--pink-text)}
.band .knopf--voll:hover{background:var(--tinte);color:#fff;border-color:var(--tinte)}
.band--sein{background:var(--tinte);color:#fff;padding:1.2rem 0;font-family:var(--display);font-weight:300;font-size:clamp(1.4rem,3vw,2.4rem);letter-spacing:-.01em;white-space:nowrap}
.band__lauf{display:flex;gap:4rem;width:max-content;animation:lauf 28s linear infinite}
.band__lauf span{padding-right:4rem;position:relative}
.band__lauf span::after{content:"";position:absolute;right:1.6rem;top:50%;width:.45em;height:.45em;border-radius:50%;background:var(--verlauf);transform:translateY(-50%)}
@keyframes lauf{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.band__lauf{animation:none}}

/* ---------- Buch (Teaser + Blätterbuch) ---------- */
.buch-teaser{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem);align-items:center}
/* Das Buch als Körper: Vorderseite, echter Rücken, Rückseite, Seitenschnitt oben und rechts.
   --w Breite des Buches, --d Dicke (283 Seiten ≈ 9,5 % der Breite, aus dem Rückenbild gemessen). */
.buch3d{--w:clamp(190px,24vw,330px);--d:calc(var(--w) * .095);perspective:1900px;display:grid;place-items:center;padding:.75rem 0 1rem;position:relative}
.buch3d::after{content:"";position:absolute;left:50%;bottom:1.2rem;width:calc(var(--w) * 1.05);height:calc(var(--w) * .14);transform:translateX(-54%);background:radial-gradient(ellipse at center,rgba(28,25,32,.32),rgba(28,25,32,.12) 45%,transparent 72%);filter:blur(6px);z-index:0;transition:transform 1.2s var(--federnd),opacity 1.2s}
.buch3d__koerper{position:relative;z-index:1;width:var(--w);aspect-ratio:1200/1578;transform-style:preserve-3d;transform:rotateY(30deg) rotateX(-5deg);transition:transform 1.2s var(--federnd)}
.buch3d:hover .buch3d__koerper{transform:rotateY(16deg) rotateX(-3deg)}
.buch3d:hover::after{transform:translateX(-52%) scaleX(.94)}
.buch3d__koerper>*{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.buch3d__vorn{inset:0;width:100%;height:100%;object-fit:cover;border-radius:2px 5px 5px 2px;transform:translateZ(calc(var(--d) / 2));box-shadow:0 0 0 .5px rgba(0,0,0,.12)}
.buch3d__hinten{inset:0;width:100%;height:100%;object-fit:cover;border-radius:5px 2px 2px 5px;transform:rotateY(180deg) translateZ(calc(var(--d) / 2))}
.buch3d__ruecken{top:0;height:100%;left:calc(var(--d) / -2);width:var(--d);object-fit:cover;transform:rotateY(-90deg);filter:brightness(.88)}
.buch3d__seiten{top:1.2%;bottom:1.2%;right:calc(var(--d) / -2 + 1%);width:var(--d);transform:rotateY(90deg);background:repeating-linear-gradient(90deg,#f7f4ef 0 1px,#dcd7cf 1px 2px);filter:brightness(.96)}
.buch3d__oben{left:1%;right:1%;top:calc(var(--d) / -2 + 1.2%);height:var(--d);transform:rotateX(90deg);background:repeating-linear-gradient(0deg,#f9f7f2 0 1px,#e2ddd5 1px 2px)}
.buch3d__vorn::after{display:none}
@media (max-width:860px){.buch-teaser{grid-template-columns:1fr}.buch3d{--w:min(58vw,280px)}}
@media (prefers-reduced-motion:reduce){.buch3d__koerper,.buch3d::after{transition:none}}
.buch-teaser .datum{font-family:var(--display);font-weight:500;color:var(--orange-text);letter-spacing:.14em;text-transform:uppercase;font-size:.8rem}

/* Das Blätterbuch */
/* ---- Das Blätterbuch ------------------------------------------------------
   Jedes Blatt ist ein 3D-Körper mit Vorder- und Rückseite, Drehachse am Buchrücken.
   Die Perspektive sitzt im Blatt selbst (perspective() im transform) – so gibt es keine
   3D-Überschneidungen zwischen den Blättern, die Reihenfolge regelt allein der z-index.
   Dauer und Kurve stehen in --blatt-dauer/--blatt-ease und werden vom Skript mitgelesen. */
@property --zug{syntax:"<number>";inherits:true;initial-value:0}
.leseprobe{--blatt-dauer:.95s;--blatt-ease:cubic-bezier(.42,.02,.28,1);--persp:2600px;background:#fff;border:1px solid var(--linie);border-radius:calc(var(--radius) * 1.6);padding:clamp(1.5rem,4vw,3.5rem) clamp(1rem,3vw,3rem) clamp(1.5rem,3vw,2.5rem);overflow:hidden;position:relative}
.leseprobe.voll{position:fixed;inset:0;z-index:200;border-radius:0;padding:2rem;display:grid;grid-template-rows:auto 1fr auto;background:#fff}
.leseprobe__kopf{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.leseprobe__kopf h3{margin:0}
.leseprobe__werkzeug{display:flex;gap:.5rem;align-items:center}
.leseprobe__werkzeug button{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--linie);display:grid;place-items:center;transition:background .3s,transform .4s var(--federnd),border-color .3s}
.leseprobe__werkzeug button:hover{background:var(--tinte);color:#fff;border-color:var(--tinte);transform:translateY(-2px)}
.leseprobe__werkzeug button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.leseprobe__werkzeug button:disabled{opacity:.35;transform:none;background:#fff;color:inherit;border-color:var(--linie);cursor:default}
.leseprobe__zaehler{font-family:var(--display);font-size:.9rem;color:var(--grau);min-width:9ch;text-align:center}
.leseprobe:focus{outline:0}
.leseprobe:focus-visible{outline:2px solid var(--pink);outline-offset:6px}
/* Bühne, Fenster, Buch */
.buehne{position:relative;padding:2vh 0;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.buehne__fenster{position:relative;width:min(100%,900px);margin:0 auto}
.buch{position:relative;width:100%;aspect-ratio:1870/1210;transition:transform var(--rutsch,var(--blatt-dauer)) var(--blatt-ease),--zug 0s;cursor:grab}
.buch.laesst{transition:transform var(--rutsch,var(--blatt-dauer)) var(--blatt-ease),--zug var(--dauer,.5s) ease-out}
.buch.greift{cursor:grabbing}
.buch.zu{transform:translateX(-25%)}
.buch.ende{transform:translateX(25%)}
.leseprobe.voll .buehne{display:grid;place-items:center;min-height:0}
.leseprobe.voll .buehne__fenster{width:min(100%,calc(70vh * 1870 / 1210))}
/* Blätter */
.blatt{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transform:perspective(var(--persp)) rotateY(0deg);transition:transform var(--blatt-dauer) var(--blatt-ease);will-change:transform}
.blatt.um{transform:perspective(var(--persp)) rotateY(-180deg)}
.blatt.zieht{transition:none}
@media (hover:hover){.leseprobe:not(.einzeln) .blatt.oben-rechts,.leseprobe:not(.einzeln) .blatt.oben-links{transition-duration:.55s}.leseprobe:not(.einzeln) .buch:not(.greift) .blatt.oben-rechts:not(.dreht):not(.landet):not(.zieht):hover{transform:perspective(var(--persp)) rotateY(-6deg)}.leseprobe:not(.einzeln) .buch:not(.greift) .blatt.oben-links:not(.dreht):not(.landet):not(.zieht):hover{transform:perspective(var(--persp)) rotateY(-174deg)}}
.blatt.landet{transition-duration:.5s;transition-timing-function:cubic-bezier(.22,.61,.25,1)}
.blatt.dreht,.blatt.landet{z-index:60!important}
.blatt.zieht{z-index:61!important}
.buch>.blatt:nth-of-type(1){z-index:39}.buch>.blatt:nth-of-type(2){z-index:38}.buch>.blatt:nth-of-type(3){z-index:37}.buch>.blatt:nth-of-type(4){z-index:36}.buch>.blatt:nth-of-type(5){z-index:35}.buch>.blatt:nth-of-type(6){z-index:34}.buch>.blatt:nth-of-type(7){z-index:33}.buch>.blatt:nth-of-type(8){z-index:32}.buch>.blatt:nth-of-type(9){z-index:31}.buch>.blatt:nth-of-type(10){z-index:30}.buch>.blatt:nth-of-type(11){z-index:29}.buch>.blatt:nth-of-type(12){z-index:28}.buch>.blatt:nth-of-type(13){z-index:27}.buch>.blatt:nth-of-type(14){z-index:26}.buch>.blatt:nth-of-type(15){z-index:25}.buch>.blatt:nth-of-type(16){z-index:24}
.blatt__seite{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.blatt__seite img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.blatt__vorn{border-radius:0 5px 5px 0}
.blatt__hinten{transform:rotateY(180deg);border-radius:5px 0 0 5px}
/* Falz: leichte Schattierung am Rücken, immer da */
.blatt__vorn::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.13),rgba(0,0,0,.03) 10%,transparent 26%);pointer-events:none}
.blatt__hinten::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(0,0,0,.15),rgba(0,0,0,.03) 10%,transparent 26%);pointer-events:none}
.blatt--deckel .blatt__seite{box-shadow:0 0 0 1px rgba(0,0,0,.08),0 18px 40px -18px rgba(0,0,0,.35)}
.blatt--deckel .blatt__vorn::after{background:linear-gradient(90deg,rgba(0,0,0,.26),rgba(0,0,0,.06) 6%,transparent 22%)}
/* Licht auf dem drehenden Blatt: dunkelt in der Mitte der Drehung ab (Papier steht im Raum) */
.blatt__seite::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;z-index:1}
.blatt__vorn::before{background:linear-gradient(90deg,rgba(0,0,0,.02),rgba(0,0,0,.22) 55%,rgba(0,0,0,.34))}
.blatt__hinten::before{background:linear-gradient(270deg,rgba(0,0,0,.02),rgba(0,0,0,.22) 55%,rgba(0,0,0,.34))}
.blatt.dreht .blatt__seite::before{animation:blattlicht var(--dauer,var(--blatt-dauer)) var(--blatt-ease) forwards}
.blatt.zieht .blatt__seite::before,.blatt.landet .blatt__seite::before{opacity:calc(var(--zug,0) * (1 - var(--zug,0)) * 4 * .34)}
@keyframes blattlicht{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes blattlicht-aus{to{opacity:0}}
/* Schlagschatten des drehenden Blatts auf der Seite, auf die es fällt */
.buch::before,.buch::after{content:"";position:absolute;top:0;bottom:0;width:50%;pointer-events:none;opacity:0;z-index:55}
.buch::before{left:0;background:linear-gradient(270deg,rgba(0,0,0,.28),rgba(0,0,0,.08) 28%,transparent 52%)}
.buch::after{right:0;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,.08) 28%,transparent 52%)}
.buch.wirft-vor::before,.buch.wirft-zurueck::after{animation:wurf var(--dauer,var(--blatt-dauer)) var(--blatt-ease) forwards}
.buch.greift-vor::before,.buch.greift-zurueck::after{opacity:calc(var(--zug,0) * .7)}
@keyframes wurf{0%{opacity:0}55%{opacity:.85}100%{opacity:0}}
/* Rücken und Bodenschatten */
.buch__schatten{position:absolute;inset:auto 4% -6% 4%;height:12%;background:radial-gradient(ellipse at center,rgba(0,0,0,.26),transparent 70%);filter:blur(10px);z-index:0;transition:left var(--rutsch,var(--blatt-dauer)) var(--blatt-ease),right var(--rutsch,var(--blatt-dauer)) var(--blatt-ease)}
.buch.zu .buch__schatten{left:52%}.buch.ende .buch__schatten{right:52%}
.buch__ruecken{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-1px);background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.05));z-index:1;pointer-events:none;opacity:0;transition:opacity .6s}
.buch.offen .buch__ruecken{opacity:1}
/* Große Pfeile neben dem Buch */
.buehne__pfeil{position:absolute;top:50%;z-index:70;width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid var(--linie);color:var(--tinte);display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 30px -14px rgba(28,25,32,.4);transition:background .3s,color .3s,transform .4s var(--federnd),opacity .4s}
.buehne__pfeil--links{left:0;transform:translate(-30%,-50%)}
.buehne__pfeil--rechts{right:0;transform:translate(30%,-50%)}
.buehne__pfeil svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.buehne__pfeil:hover{background:var(--tinte);color:#fff;border-color:var(--tinte)}
.buehne__pfeil--links:hover{transform:translate(-30%,-50%) scale(1.06)}.buehne__pfeil--rechts:hover{transform:translate(30%,-50%) scale(1.06)}
.buehne__pfeil:disabled{opacity:0;pointer-events:none}
.leseprobe.voll .buehne__pfeil--links{transform:translate(0,-50%)}.leseprobe.voll .buehne__pfeil--rechts{transform:translate(0,-50%)}
/* Einzelseiten-Modus (schmale Bildschirme): das Fenster zeigt eine Seite, das Buch ist doppelt so breit und schiebt sich darunter */
@media (max-width:1100px){.leseprobe:not(.voll):not(.einzeln) .buehne{padding:2vh 0 64px}.leseprobe:not(.voll):not(.einzeln) .buehne__pfeil{top:auto;bottom:0;width:48px;height:48px;transform:none}.leseprobe:not(.voll):not(.einzeln) .buehne__pfeil--links{left:calc(50% - 64px)}.leseprobe:not(.voll):not(.einzeln) .buehne__pfeil--rechts{right:calc(50% - 64px)}.leseprobe:not(.voll):not(.einzeln) .buehne__pfeil--links:hover,.leseprobe:not(.voll):not(.einzeln) .buehne__pfeil--rechts:hover{transform:none}}
.leseprobe.einzeln .buehne{padding:0 0 64px}
.leseprobe.einzeln .buehne__fenster{width:min(100%,460px);aspect-ratio:935/1210;overflow:hidden;border-radius:5px}
.leseprobe.einzeln .buch{position:absolute;top:0;left:0;height:100%;width:200%;aspect-ratio:auto}
.leseprobe.einzeln .buch.zu,.leseprobe.einzeln .buch.ende,.leseprobe.einzeln .buch.links{transform:none}
.leseprobe.einzeln .buch.rechts{transform:translateX(-50%)}
.leseprobe.einzeln .buch__schatten{display:none}
.leseprobe.einzeln .buehne__pfeil{top:auto;bottom:4px;width:48px;height:48px;transform:none}
.leseprobe.einzeln .buehne__pfeil--links{left:calc(50% - 64px)}.leseprobe.einzeln .buehne__pfeil--rechts{right:calc(50% - 64px)}
.leseprobe.einzeln .buehne__pfeil--links:hover,.leseprobe.einzeln .buehne__pfeil--rechts:hover{transform:none}
.leseprobe.voll.einzeln{padding:1rem}
.leseprobe.voll.einzeln .buehne__fenster{width:min(100%,calc(68vh * 935 / 1210))}
@media (max-height:520px){.leseprobe.voll{padding:.75rem 1rem}.leseprobe.voll .leseprobe__kopf{margin-bottom:.5rem}.leseprobe.voll .leseprobe__kopf>div:first-child,.leseprobe.voll .leseprobe__hinweis{display:none}.leseprobe.voll .buehne{padding:0}}
.leseprobe.voll [data-voll] svg{display:none}
.leseprobe.voll [data-voll]::before{content:"\00d7";font-size:1.6rem;line-height:1;font-family:var(--display)}
/* Der leise Hinweis: erscheint einmal kurz über der Seite, blättert aber nichts */
.tipp{position:absolute;left:50%;top:64%;z-index:90;transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 1rem);display:inline-flex;align-items:center;gap:.7rem;padding:.75rem 1.2rem .75rem 1rem;border-radius:999px;background:#fff;border:1px solid var(--linie);box-shadow:0 18px 40px -16px rgba(28,25,32,.35);font-family:var(--display);font-weight:500;font-size:clamp(.9rem,1.3vw,1.05rem);color:var(--tinte);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .7s ease}
.tipp.tipp--da{opacity:1}
.tipp:not(.tipp--einzeln){left:75%}
.buch.zu~.tipp:not(.tipp--einzeln){left:50%}
.tipp svg{width:26px;height:26px;fill:none;stroke:var(--tinte);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tipp.tipp--da svg{animation:tippwink 1.9s ease-in-out 2}
@keyframes tippwink{0%,100%{transform:translateX(0)}50%{transform:translateX(-9px)}}
.tipp__mobil{display:none}
@media (max-width:640px){.tipp__mobil{display:inline}.tipp__desktop{display:none}}
.leseprobe__hinweis{margin:1.2rem 0 0;text-align:center;font-size:.9rem;color:var(--grau);overflow-wrap:anywhere}
.leseprobe__hinweis kbd{font-family:var(--display);border:1px solid var(--linie);border-radius:6px;padding:.05em .45em;background:#fff;font-size:.85em}
@media (max-width:640px){.leseprobe__hinweis .nurdesktop{display:none}}
@media (prefers-reduced-motion:reduce){.blatt,.buch,.buch__schatten{transition-duration:.01s}.blatt .blatt__seite::before,.buch::before,.buch::after,.tipp svg{animation:none}}
.nurmobil{display:none}
@media (max-width:640px){.nurmobil{display:inline}}

/* ---------- Inhalt (Kapitelliste) ---------- */
.kapitel{list-style:none;margin:0;padding:0;columns:2;column-gap:3rem}
.kapitel li{break-inside:avoid;display:grid;grid-template-columns:2.6rem 1fr;gap:.6rem;padding:.75rem 0;border-bottom:1px solid var(--linie);align-items:baseline}
.kapitel li span{font-family:var(--display);font-weight:300;color:var(--pink);font-size:1.3rem}
.kapitel li b{font-weight:600;color:var(--tinte);display:block}
.kapitel li small{color:var(--grau);font-size:.9rem;display:block;line-height:1.5}
.kapitel .teil{column-span:all;padding:1.8rem 0 .6rem;border:0;display:block;font-family:var(--display);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--grau)}
@media (max-width:760px){.kapitel{columns:1}}

/* ---------- Instagram (Impulse) ---------- */
.impulse__innen{display:grid;grid-template-columns:minmax(0,1.1fr) auto;gap:clamp(2rem,6vw,6rem);align-items:center}
.impulse__text p{max-width:54ch}
.impulse__stat{display:flex;gap:2.4rem;margin:2rem 0}
.impulse__stat b{display:block;font-family:var(--display);font-weight:300;font-size:2.2rem;color:var(--tinte);line-height:1}
.impulse__stat span{font-size:.85rem;color:var(--grau);letter-spacing:.08em;text-transform:uppercase}
@media (max-width:900px){.impulse__innen{grid-template-columns:1fr}.impulse__geraet{order:2}}

.geraet-wrap{display:flex;justify-content:center;align-items:center}
/* Stand unter dem Gerät: Tag der letzten Übernahme aus ihrem Profil (INSTA_STAND in grundlage.py) */
.geraet__stand{margin:2.4rem 0 0;text-align:center;font-family:var(--display);font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--grau)}
/* Breite so, dass Gerät und Stand-Zeile (2,4rem + 1,25rem) mit je 2rem Luft in die Höhe unter der Kopfleiste passen: Höhe × 405/864 */
.geraet{--pw:clamp(15rem,min(72vw,(100svh - var(--nav-h) - 4rem - 3.65rem) * 0.46875),21.5rem);--p:calc(var(--pw) / 405);position:relative;width:var(--pw);aspect-ratio:405/864;isolation:isolate;transform-style:preserve-3d;transition:transform .6s var(--leicht);filter:drop-shadow(0 40px 60px rgba(28,25,32,.28))}
.geraet__rahmen{position:absolute;inset:0;border-radius:calc(var(--p) * 58);background:#111114;box-shadow:inset 0 0 0 calc(var(--p) * 2) #3b3b41,0 0 0 calc(var(--p) * 1) #08080a;z-index:2;pointer-events:none}
.geraet__schirm{position:absolute;inset:calc(var(--p) * 8);border-radius:calc(var(--p) * 50);overflow:hidden;background:#fff;color:#000;z-index:3;display:flex;flex-direction:column;font-family:-apple-system,"SF Pro Text","Helvetica Neue",var(--lauf);font-size:calc(var(--p) * 14);line-height:1.3;-webkit-font-smoothing:antialiased}
.geraet__insel{position:absolute;top:calc(var(--p) * 12);left:50%;width:calc(var(--p) * 120);height:calc(var(--p) * 35);margin-left:calc(var(--p) * -60);background:#000;border-radius:999px;z-index:5}
.geraet__taste{position:absolute;left:calc(var(--p) * -2.5);width:calc(var(--p) * 3);background:#26272c;border-radius:calc(var(--p) * 2) 0 0 calc(var(--p) * 2);z-index:1}
.geraet__taste--stumm{top:calc(var(--p) * 126);height:calc(var(--p) * 30)}
.geraet__taste--auf{top:calc(var(--p) * 178);height:calc(var(--p) * 62)}
.geraet__taste--ab{top:calc(var(--p) * 252);height:calc(var(--p) * 62)}
.geraet__taste--an{left:auto;right:calc(var(--p) * -2.5);top:calc(var(--p) * 212);height:calc(var(--p) * 100);border-radius:0 calc(var(--p) * 2) calc(var(--p) * 2) 0}
.ig{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;color:#000;--ig-linie:#efefef;--ig-grau:#737373}
.ig__status{flex:none;display:flex;align-items:center;justify-content:space-between;height:calc(var(--p) * 54);padding:calc(var(--p) * 16) calc(var(--p) * 28) 0;font-size:calc(var(--p) * 15);font-weight:600}
.ig__status-r{display:flex;align-items:center;gap:calc(var(--p) * 5)}
.ig__status-r svg{height:calc(var(--p) * 11);width:auto;fill:currentColor}
.ig__navi{flex:none;display:flex;align-items:center;gap:calc(var(--p) * 12);height:calc(var(--p) * 44);padding:0 calc(var(--p) * 16);font-size:calc(var(--p) * 17);font-weight:700}
.ig__navi svg{height:calc(var(--p) * 20);width:auto;fill:none;stroke:currentColor;stroke-width:2;flex:none}
.ig__navi .mitte{flex:1}
.ig__scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;scroll-behavior:smooth}
.ig__scroll::-webkit-scrollbar{display:none}
.ig__kopf{display:flex;align-items:center;gap:calc(var(--p) * 22);padding:calc(var(--p) * 8) calc(var(--p) * 16) 0}
.ig__avatar{flex:none;width:calc(var(--p) * 86);height:calc(var(--p) * 86);border-radius:50%;padding:calc(var(--p) * 3);background:var(--verlauf);position:relative}
.ig__avatar::before{content:"";position:absolute;inset:calc(var(--p) * 2.5);border-radius:50%;background:#fff}
.ig__avatar img{position:relative;width:100%;height:100%;border-radius:50%;object-fit:cover;z-index:1}
.ig__stats{flex:1;display:flex;justify-content:space-around;text-align:center}
.ig__stats b{display:block;font-size:calc(var(--p) * 17);font-weight:700}
.ig__stats span span{display:block;font-size:calc(var(--p) * 13)}
.ig__text{padding:calc(var(--p) * 12) calc(var(--p) * 16) 0;font-size:calc(var(--p) * 14)}
.ig__text p{margin:0;line-height:1.35}
.ig__name{font-weight:600}
.ig__bio{white-space:pre-line}
.ig__knoepfe{display:flex;gap:calc(var(--p) * 6);padding:calc(var(--p) * 14) calc(var(--p) * 16) 0}
.ig__knopf{flex:1;height:calc(var(--p) * 32);display:flex;align-items:center;justify-content:center;border-radius:calc(var(--p) * 8);font-size:calc(var(--p) * 14);font-weight:600;background:#efefef;color:#000;text-decoration:none}
.ig__knopf--folgen{background:#4150f7;color:#fff;position:relative;overflow:hidden}
.ig__knopf--folgen::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);transform:translateX(-120%)}
.ig.lebt .ig__knopf--folgen::after{animation:glanz 1.4s .6s var(--leicht) 2}
@keyframes glanz{to{transform:translateX(120%)}}
.ig__hls{display:flex;gap:calc(var(--p) * 14);padding:calc(var(--p) * 16) calc(var(--p) * 16) calc(var(--p) * 10)}
.ig__hl{flex:none;width:calc(var(--p) * 66);text-align:center;background:none;border:0;padding:0;cursor:pointer;color:#000}
.ig__hl i{display:block;width:calc(var(--p) * 62);height:calc(var(--p) * 62);margin:0 auto calc(var(--p) * 5);padding:calc(var(--p) * 2);border-radius:50%;border:1px solid #dbdbdb;background:#fff}
.ig__hl i img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.ig__hl b{display:block;font-size:calc(var(--p) * 12);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig__tabs{display:flex;border-top:1px solid var(--ig-linie);margin-top:calc(var(--p) * 4)}
.ig__tabs button{flex:1;display:grid;place-items:center;height:calc(var(--p) * 44);border-bottom:1.5px solid transparent;color:var(--ig-grau);background:none;border-top:0;border-left:0;border-right:0}
.ig__tabs button[aria-selected="true"]{border-bottom-color:#000;color:#000}
.ig__tabs svg{height:calc(var(--p) * 22);width:auto;fill:none;stroke:currentColor;stroke-width:1.6}
.ig__raster{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--p) * 1.5);padding-bottom:calc(var(--p) * 20)}
.ig__zelle{position:relative;display:block;aspect-ratio:3/4;background:#f3f3f3;overflow:hidden;border:0;padding:0;cursor:pointer}
.ig__zelle img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--leicht)}
.ig__zelle:hover img{transform:scale(1.05)}
.ig__zelle[hidden]{display:none}
.ig__tabbar{flex:none;display:flex;align-items:center;justify-content:space-around;height:calc(var(--p) * 50);border-top:1px solid var(--ig-linie);padding-bottom:calc(var(--p) * 6)}
.ig__tabbar svg{height:calc(var(--p) * 24);width:auto;fill:none;stroke:#000;stroke-width:1.9}
.ig__tabbar .mini{width:calc(var(--p) * 24);height:calc(var(--p) * 24);border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px #000}
.ig__home{flex:none;width:calc(var(--p) * 134);height:calc(var(--p) * 5);margin:0 auto calc(var(--p) * 8);border-radius:999px;background:#000}
/* Beitragsansicht im Gerät */
.ig__post{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .45s var(--federnd);z-index:4}
.ig__post.offen{transform:none}
.ig__post-kopf{flex:none;display:flex;align-items:center;gap:calc(var(--p) * 10);padding:0 calc(var(--p) * 14);height:calc(var(--p) * 44);margin-top:calc(var(--p) * 54);font-weight:600;font-size:calc(var(--p) * 15)}
.ig__post-kopf button{display:grid;place-items:center;width:calc(var(--p) * 30);height:calc(var(--p) * 30)}
.ig__post-kopf svg{height:calc(var(--p) * 22);fill:none;stroke:currentColor;stroke-width:2}
.ig__post-scroll{flex:1;overflow-y:auto;scrollbar-width:none}
.ig__post-scroll::-webkit-scrollbar{display:none}
.ig__post-autor{display:flex;align-items:center;gap:calc(var(--p) * 8);padding:calc(var(--p) * 6) calc(var(--p) * 12);font-size:calc(var(--p) * 13);font-weight:600}
.ig__post-autor img{width:calc(var(--p) * 30);height:calc(var(--p) * 30);border-radius:50%}
.ig__post-bild{width:100%;aspect-ratio:3/4;object-fit:cover;background:#f3f3f3}
.ig__post-aktion{display:flex;gap:calc(var(--p) * 14);padding:calc(var(--p) * 10) calc(var(--p) * 12) 0}
.ig__post-aktion svg{height:calc(var(--p) * 24);width:auto;fill:none;stroke:#000;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ig__post-aktion .rechts{margin-left:auto}
.ig__post-text{padding:calc(var(--p) * 8) calc(var(--p) * 12) calc(var(--p) * 10);font-size:calc(var(--p) * 13.5);line-height:1.4;white-space:pre-line}
.ig__post-text b{font-weight:600}
.ig__post-datum{padding:0 calc(var(--p) * 12) calc(var(--p) * 12);font-size:calc(var(--p) * 11);color:var(--ig-grau);text-transform:uppercase;letter-spacing:.04em}
.ig__post-oeffnen{margin:0 calc(var(--p) * 12) calc(var(--p) * 18);display:flex;align-items:center;justify-content:center;gap:calc(var(--p) * 8);height:calc(var(--p) * 40);border-radius:calc(var(--p) * 10);background:var(--verlauf);color:#fff;font-weight:600;font-size:calc(var(--p) * 14);text-decoration:none}
.ig__post-oeffnen svg{height:calc(var(--p) * 16);fill:currentColor}
.ig__marker{position:absolute;top:calc(var(--p) * 6);right:calc(var(--p) * 6);width:calc(var(--p) * 14);height:calc(var(--p) * 14);color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
/* Story-Ansicht */
.ig__story{position:absolute;inset:0;background:#000;color:#fff;z-index:6;display:none;flex-direction:column}
.ig__story.offen{display:flex}
.ig__story-balken{display:flex;gap:calc(var(--p) * 4);padding:calc(var(--p) * 58) calc(var(--p) * 10) 0}
.ig__story-balken i{flex:1;height:calc(var(--p) * 2.5);background:rgba(255,255,255,.35);border-radius:2px;overflow:hidden}
.ig__story-balken i::after{content:"";display:block;height:100%;width:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.ig__story-balken i.lauf::after{animation:storylauf 5s linear forwards}
.ig__story-balken i.voll::after{transform:scaleX(1)}
@keyframes storylauf{to{transform:scaleX(1)}}
.ig__story-kopf{display:flex;align-items:center;gap:calc(var(--p) * 8);padding:calc(var(--p) * 10) calc(var(--p) * 12);font-size:calc(var(--p) * 13);font-weight:600}
.ig__story-kopf img{width:calc(var(--p) * 32);height:calc(var(--p) * 32);border-radius:50%}
.ig__story-kopf button{margin-left:auto;color:#fff;font-size:calc(var(--p) * 22);line-height:1;padding:0 calc(var(--p) * 4)}
.ig__story-bild{flex:1;display:grid;place-items:center;padding:calc(var(--p) * 20)}
.ig__story-bild div{width:100%;aspect-ratio:9/14;border-radius:calc(var(--p) * 16);display:grid;place-items:center;text-align:center;padding:calc(var(--p) * 24);font-family:var(--display);font-weight:300;font-size:calc(var(--p) * 22);line-height:1.2;background:var(--verlauf)}
.ig__story-bild img{width:calc(var(--p) * 120);height:calc(var(--p) * 120);border-radius:50%;object-fit:cover;margin-bottom:calc(var(--p) * 16);box-shadow:0 0 0 calc(var(--p) * 3) rgba(255,255,255,.5)}
.ig__story-fuss{padding:0 calc(var(--p) * 16) calc(var(--p) * 30);text-align:center}
.ig__story-fuss a{display:inline-flex;align-items:center;gap:calc(var(--p) * 6);color:#fff;font-size:calc(var(--p) * 13);font-weight:600;border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:calc(var(--p) * 8) calc(var(--p) * 16);text-decoration:none}
@media (prefers-color-scheme:dark){
  .geraet__schirm,.ig,.ig__post,.ig__story{background:#000;color:#fff}
  .ig b,.ig strong,.ig__hl,.ig__post b{color:#fff}
  .ig{--ig-linie:#262626;--ig-grau:#a8a8a8}
  .ig__knopf:not(.ig__knopf--folgen){background:#363636;color:#fff}
  .ig__post-bild{background:#111}
  .ig__post-kopf,.ig__post-oeffnen{color:#fff}
  .ig__avatar::before{background:#000}
  .ig__tabs button[aria-selected="true"]{border-bottom-color:#fff;color:#fff}
  .ig__tabbar svg,.ig__post-aktion svg{stroke:#fff}
  .ig__tabbar .mini{box-shadow:0 0 0 1.5px #fff}
  .ig__home{background:#fff}
  .ig__hl i{background:#000;border-color:#3a3a3a}
}

/* ---------- Kontakt ---------- */
.kontakt__innen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem);align-items:start}
@media (max-width:900px){.kontakt__innen{grid-template-columns:1fr}}
.formular{background:#fff;border:1px solid var(--linie);border-radius:calc(var(--radius) * 1.4);padding:clamp(1.5rem,4vw,3rem);position:relative}
.formular__schritte{display:flex;gap:.5rem;margin-bottom:2rem;align-items:center}
.formular__schritte i{flex:1;height:3px;border-radius:3px;background:var(--linie);position:relative;overflow:hidden}
.formular__schritte i::after{content:"";position:absolute;inset:0;background:var(--verlauf);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--federnd)}
.formular__schritte i.voll::after{transform:scaleX(1)}
.formular__schritte span{font-family:var(--display);font-size:.8rem;color:var(--grau);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
fieldset.schritt{border:0;padding:0;margin:0;min-width:0}
/* Ohne JavaScript: alle Schritte untereinander, nur der Sende-Knopf */
html:not(.js) .schritt{display:block}
html:not(.js) [data-weiter],html:not(.js) [data-zurueck],html:not(.js) .zusammenfassung,html:not(.js) .formular__schritte{display:none!important}
html:not(.js) [data-senden][hidden]{display:inline-flex!important}
.schritt{display:none}
.schritt.aktiv{display:block;animation:wort .7s var(--federnd)}
.schritt h3{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:400;margin:0 0 .6rem;letter-spacing:-.02em}
.schritt > p{margin:0 0 1.6rem;color:var(--grau)}
.wahl{display:grid;gap:.75rem}
.wahl label{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;padding:1.1rem 1.2rem;border:1.5px solid var(--linie);border-radius:18px;cursor:pointer;transition:border-color .3s,background .3s,transform .4s var(--federnd)}
.wahl label:hover{border-color:var(--hell);transform:translateY(-1px)}
.wahl label:has(input:checked){border-color:var(--pink);background:var(--hauch-pink)}
.wahl input{appearance:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--hell);margin-top:.2rem;position:relative;flex:none;transition:border-color .3s}
.wahl input:checked{border-color:var(--pink);border-width:7px}
.wahl input[type="checkbox"]{border-radius:7px}
.wahl input[type="checkbox"]:checked{border-width:1.5px;background:var(--pink);border-color:var(--pink)}
.wahl input[type="checkbox"]:checked::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.wahl b{display:block;font-weight:600;color:var(--tinte)}
.wahl small{color:var(--grau);font-size:.92rem;line-height:1.5}
.feld{display:grid;gap:.4rem;margin-bottom:1.2rem}
.feld>label,.feld>div>label{font-family:var(--display);font-weight:500;color:var(--tinte);font-size:.98rem}
.feld>label small,.feld>div>label small{font-weight:400;color:var(--grau);margin-left:.4rem}
.feld input:not([type="radio"]):not([type="checkbox"]),.feld textarea,.feld select{width:100%;font:inherit;color:var(--tinte);background:#fff;border:1.5px solid var(--linie);border-radius:14px;padding:.95rem 1.1rem;transition:border-color .3s,background .3s,box-shadow .3s}
.feld input:not([type="radio"]):not([type="checkbox"]):focus,.feld textarea:focus,.feld select:focus{outline:0;background:#fff;border-color:var(--pink);box-shadow:0 0 0 4px rgba(232,25,160,.12)}
.feld textarea{line-height:1.6;resize:none;min-height:11.4rem;max-height:21rem;overflow-y:auto;overflow-x:hidden;white-space:pre-wrap;overflow-wrap:break-word;field-sizing:content;scrollbar-width:thin;scrollbar-color:rgba(28,25,32,.22) transparent}
/* Das Nachrichtenfeld (Fassung 9.4): kein Anfasser zum Aufziehen, die Zeilen brechen am Rand um,
   das Feld wächst mit dem Text von sieben auf höchstens dreizehn Zeilen und rollt danach innen.
   Die Rolle ist schmal und ruhig: kein Rahmen, keine Pfeile, Griff in Tinte, beim Anfassen Pink. */
.feld textarea::-webkit-scrollbar{width:10px}
.feld textarea::-webkit-scrollbar-track{background:transparent;margin:12px 0}
.feld textarea::-webkit-scrollbar-thumb{background:rgba(28,25,32,.22);border-radius:10px;border:3px solid #fff;background-clip:padding-box}
.feld textarea::-webkit-scrollbar-thumb:hover,.feld textarea::-webkit-scrollbar-thumb:active{background:var(--pink);border-color:#fff;background-clip:padding-box}
.feld textarea:hover{scrollbar-color:rgba(28,25,32,.34) transparent}
.feld textarea:focus{scrollbar-color:rgba(232,25,160,.55) transparent}
/* Die Hülle des Nachrichtenfelds: Wenn innen gerollt wird, löst sich der Text oben und unten weich in Weiß auf,
   statt hart an der Linie abzureißen (Klassen rollt-oben / rollt-unten setzt formular.js). */
.rolle{position:relative;display:grid}
.rolle::before,.rolle::after{content:"";position:absolute;left:2px;right:14px;height:26px;pointer-events:none;opacity:0;transition:opacity .25s;z-index:1}
.rolle::before{top:2px;border-radius:12px 12px 0 0;background:linear-gradient(#fff 15%,rgba(255,255,255,0))}
.rolle::after{bottom:2px;border-radius:0 0 12px 12px;background:linear-gradient(rgba(255,255,255,0),#fff 85%)}
.rolle.rollt-oben::before,.rolle.rollt-unten::after{opacity:1}
.feld .hilfe{font-size:.88rem;color:var(--grau)}
.feld.feld--fehler>input:not([type="radio"]):not([type="checkbox"]),.feld.feld--fehler textarea{border-color:#d0343f;background:#fff}
.feld .fehlertext{display:none;color:#b3262f;font-size:.88rem}
.feld--fehler .fehlertext{display:block}
.doppelt{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media (max-width:600px){.doppelt{grid-template-columns:1fr}}
.feld--doppelt > div{display:grid;gap:.4rem}
.formular__navi{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:2rem;flex-wrap:wrap}
.impulswoerter{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0 0}
.impulswoerter button{border:1px solid var(--linie);border-radius:999px;padding:.4rem .85rem;font-size:.88rem;color:var(--text);transition:background .3s,border-color .3s,color .3s}
.impulswoerter button:hover{background:var(--hauch-orange);border-color:transparent;color:var(--orange-text)}
.zusammenfassung{background:#fff;border:1px solid var(--linie);border-radius:18px;padding:1.4rem 1.5rem;margin-bottom:1.5rem;display:grid;gap:.5rem;font-size:.98rem}
.zusammenfassung div{display:grid;grid-template-columns:9rem 1fr;gap:1rem}
.zusammenfassung dt{color:var(--grau);font-weight:500}
.zusammenfassung dd{margin:0;color:var(--tinte);white-space:pre-line}
.einwilligung{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;font-size:.95rem;color:var(--text);margin:1rem 0 0}
.einwilligung input{appearance:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--hell);margin-top:.15rem;position:relative;flex:none}
.einwilligung input:checked{background:var(--pink);border-color:var(--pink)}
.einwilligung input:checked::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.koeder{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.kontakt__seite h1{max-width:12ch}
.kontakt__wege{display:grid;gap:1rem;margin-top:2.4rem}
.weg{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;padding:1.2rem 0;border-top:1px solid var(--linie)}
.weg .zeichen{width:46px;height:46px;border-radius:14px;background:var(--hauch-pink);display:grid;place-items:center;color:var(--pink-text)}
.weg .zeichen svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.weg b{display:block;color:var(--tinte);font-family:var(--display);font-weight:500;font-size:1.05rem}
.weg p{margin:.2rem 0 0;font-size:.95rem}
.visitenkarte{margin-top:2rem;border:1px solid var(--linie);border-radius:20px;padding:1.4rem;display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:center}
.visitenkarte>img{width:108px;height:108px;border-radius:10px}
.visitenkarte b{display:block;font-family:var(--display);font-weight:500;color:var(--tinte)}
.visitenkarte p{margin:.2rem 0 .8rem;font-size:.9rem;color:var(--grau)}
@media (max-width:980px){.visitenkarte{display:none}}
.formular__erfolg,.formular__fehler{border-radius:16px;padding:1.2rem 1.4rem;margin:1rem 0}
.formular__erfolg{background:var(--hauch-pink);color:var(--tinte)}
.formular__fehler{background:#fdeeef;color:#8a1f26}

/* ---------- Rechtsseiten mit mitlaufender Navigation ---------- */
.recht{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.ltoc{position:sticky;top:calc(var(--nav-h) + 2rem);padding:.4rem 0 .4rem 1.6rem;max-height:calc(100vh - var(--nav-h) - 4rem);overflow:auto;scrollbar-width:none}
.ltoc::-webkit-scrollbar{display:none}
.ltoc b{display:block;font-family:var(--display);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--grau);font-weight:500;margin-bottom:1.2rem}
.ltoc a{display:block;position:relative;font-size:.95rem;line-height:1.45;color:var(--grau);padding:.5rem 0;transition:color .35s,transform .45s var(--federnd)}
.ltoc a:hover{color:var(--tinte)}
.ltoc a.cur{color:var(--pink-text);transform:translateX(7px)}
.ltoc .ltoc-rail{position:absolute;left:0;top:.4rem;bottom:.4rem;width:1px;background:linear-gradient(180deg,transparent,var(--linie) 10%,var(--linie) 90%,transparent)}
.ltoc .ltoc-marker{position:absolute;left:-1px;top:0;width:3px;height:24px;border-radius:3px;background:var(--verlauf);box-shadow:0 0 14px rgba(232,25,160,.35);transition:transform .5s var(--federnd),height .5s var(--federnd);will-change:transform}
.nw{white-space:nowrap}
.recht .lese h2{scroll-margin-top:calc(var(--nav-h) + 1.5rem);font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:400}
.recht .lese h2:first-of-type{margin-top:0}
.recht .lese{max-width:72ch}
.hinweisbox{border-left:3px solid var(--orange);background:var(--hauch-orange);padding:1rem 1.2rem;border-radius:0 14px 14px 0;margin:0 0 2rem;font-size:.95rem}
.hinweisbox b{color:var(--orange-text)}
@media (max-width:860px){.recht{grid-template-columns:1fr}.ltoc{display:none}}
@media (prefers-reduced-motion:reduce){.ltoc a,.ltoc .ltoc-marker{transition:none}}

/* ---------- Region ---------- */
.karte-region{position:relative;background:#fff;border:1px solid var(--linie);border-radius:calc(var(--radius) * 1.6);overflow:hidden;aspect-ratio:1/1;max-height:720px;margin-inline:auto;width:100%}
.karte-region svg{width:100%;height:100%;display:block}
.karte-region .ring{fill:none;stroke:#e6dfe3;stroke-width:1;stroke-dasharray:3 4}
.karte-region .ringtext{font-family:var(--display);font-size:11px;fill:var(--hell);letter-spacing:.1em}
.karte-region .ort{fill:var(--pink);opacity:.55;transition:opacity .3s,r .3s;cursor:pointer}
.karte-region .ort:hover,.karte-region .ort.aktiv{opacity:1}
.karte-region .ort--stadt{fill:var(--orange);opacity:.9}
.karte-region .mitte{fill:none}
.karte-region .name{font-family:var(--display);font-size:11px;fill:var(--tinte);pointer-events:none;font-weight:500}
.karte-region__tip{position:absolute;pointer-events:none;background:var(--tinte);color:#fff;font-size:.85rem;padding:.4rem .7rem;border-radius:8px;transform:translate(-50%,-140%);opacity:0;transition:opacity .2s;white-space:nowrap}
.karte-region__tip.da{opacity:1}
.suche{display:flex;gap:.6rem;align-items:center;background:#fff;border:1px solid var(--linie);border-radius:999px;padding:.4rem .5rem .4rem 1.2rem;max-width:520px;margin:2rem 0}
.suche svg{width:20px;height:20px;fill:none;stroke:var(--grau);stroke-width:1.8;flex:none}
.suche input{flex:1;border:0;background:none;font:inherit;padding:.6rem 0;color:var(--tinte)}
.suche input:focus{outline:0}
.ortsgruppen{columns:3;column-gap:2.5rem}
.ortsgruppe{break-inside:avoid;margin-bottom:2rem}
.ortsgruppe h3{font-size:1rem;font-weight:600;letter-spacing:.02em;margin:0 0 .6rem;color:var(--tinte);display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.ortsgruppe h3 small{font-weight:500;color:var(--hell);font-size:.8rem}
.ortsgruppe ul{list-style:none;margin:0;padding:0}
.ortsgruppe li a{display:flex;justify-content:space-between;gap:.6rem;padding:.3rem 0;border-bottom:1px solid var(--linie);color:var(--text);text-decoration:none;font-size:.95rem;transition:color .25s,padding-left .35s var(--federnd)}
.ortsgruppe li a:hover{color:var(--pink-text);padding-left:.3rem}
.ortsgruppe li a span{color:var(--hell);font-size:.85rem;flex:none}
.ortsgruppe li[hidden]{display:none}
@media (max-width:1000px){.ortsgruppen{columns:2}}
@media (max-width:640px){.ortsgruppen{columns:1}}
.nahe{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin:2rem 0}
.fakt{background:#fff;border:1px solid var(--linie);border-radius:18px;padding:1.1rem 1.2rem}
.fakt b{display:block;font-family:var(--display);font-weight:300;font-size:1.9rem;color:var(--tinte);line-height:1.1;letter-spacing:-.02em;overflow-wrap:anywhere;min-width:0}
/* Kacheln mit einem Wort als Wert (Richtung, Bundesland): kleiner und umbrechend, damit nichts über den Rand ragt (Erics Handy-Befund 15.09.) */
.fakt--wort b{font-size:clamp(1.2rem,5.4vw,1.75rem);line-height:1.15;hyphens:manual;-webkit-hyphens:manual}
.fakt{min-width:0;overflow:hidden}
/* Im Auftakt der Orts-, Landkreis- und Regionsseite: zwei mal zwei Kacheln statt drei plus eine */
@media (min-width:861px){.auftakt--zwei .fakten{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fakt span{font-size:.82rem;color:var(--grau);letter-spacing:.06em;text-transform:uppercase}
.ort__pfad{font-size:.88rem;color:var(--grau);margin:0 0 1.2rem;display:flex;flex-wrap:wrap;gap:.4rem}
.ort__pfad a{color:var(--grau)}
.faq{margin:0;padding:0;list-style:none}
.faq li{border-top:1px solid var(--linie)}
.faq li:last-child{border-bottom:1px solid var(--linie)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.2rem 0;font-family:var(--display);font-weight:500;font-size:1.1rem;color:var(--tinte)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:300;font-size:1.6rem;color:var(--pink);transition:transform .4s var(--federnd);flex:none;width:1.2em;text-align:center}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .antwort{padding:0 0 1.4rem;max-width:66ch}
.faq .antwort p{margin:0 0 .8em}
.quelle{font-size:.85rem;color:var(--grau);border-top:1px solid var(--linie);padding-top:1rem;margin-top:3rem}

/* ---------- Innenreise ---------- */
.spieler{background:var(--tinte);color:#fff;border-radius:calc(var(--radius) * 1.4);padding:clamp(1.6rem,4vw,3rem);display:grid;gap:1.5rem;position:relative;overflow:hidden}
.spieler::before{content:"";position:absolute;right:-20%;top:-40%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(232,25,160,.35),transparent 65%);pointer-events:none}
.spieler h2{color:#fff;font-size:clamp(1.6rem,3vw,2.4rem)}
.spieler p{color:rgba(255,255,255,.78);margin:0}
.spieler__zeile{display:flex;align-items:center;gap:1.2rem;position:relative}
.spieler__play{width:68px;height:68px;border-radius:50%;background:var(--verlauf);display:grid;place-items:center;flex:none;transition:transform .4s var(--federnd),box-shadow .4s}
.spieler__play:hover{transform:scale(1.06);box-shadow:0 12px 30px -10px rgba(232,25,160,.7)}
.spieler__play svg{width:26px;height:26px;fill:#fff}
.spieler__play .pause{display:none}
.spieler.laeuft .spieler__play .play{display:none}
.spieler.laeuft .spieler__play .pause{display:block}
.spieler__leiste{flex:1;height:6px;border-radius:6px;background:rgba(255,255,255,.18);position:relative;cursor:pointer}
.spieler__leiste i{position:absolute;inset:0 auto 0 0;width:0;background:var(--verlauf);border-radius:6px}
.spieler__zeit{font-family:var(--display);font-variant-numeric:tabular-nums;font-size:.9rem;color:rgba(255,255,255,.7);min-width:9ch;text-align:right}
.spieler__welle{display:flex;align-items:center;gap:3px;height:40px}
.spieler__welle i{width:3px;background:rgba(255,255,255,.35);border-radius:3px;height:20%}
.spieler.laeuft .spieler__welle i{animation:welle 1.3s ease-in-out infinite}
@keyframes welle{0%,100%{height:20%}50%{height:100%}}
.spieler__fehlt{font-size:.9rem;color:#ffd2ec;border-top:1px solid rgba(255,255,255,.14);padding-top:1rem}
.spieler__fehlt[hidden]{display:none}
.spieler__laden{font-size:.9rem;margin:0}
.spieler__laden a{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.spieler__laden a:hover{color:#ffd2ec}

/* ---------- Sonstiges ---------- */
.nachoben{position:fixed;right:1.2rem;bottom:calc(1.2rem + var(--schwebt-hoch,0px));width:54px;height:54px;border-radius:50%;background:#fff;box-shadow:0 10px 30px -10px rgba(28,25,32,.35);display:grid;place-items:center;opacity:0;transform:translateY(16px);transition:opacity .4s,transform .5s var(--federnd);z-index:80;pointer-events:none}
.nachoben.da{opacity:1;transform:none;pointer-events:auto}
.nachoben svg{width:24px;height:24px;fill:none;stroke:var(--tinte);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nachoben:hover{transform:translateY(-3px)}
.marke-kreise{display:block}
.stoerer{display:inline-flex;align-items:center;gap:.5rem;background:var(--hauch-orange);color:var(--orange-text);font-family:var(--display);font-weight:500;font-size:.85rem;letter-spacing:.06em;padding:.5rem .9rem;border-radius:999px}
.stoerer i{width:8px;height:8px;border-radius:50%;background:var(--orange);animation:puls 2s ease-in-out infinite}
@keyframes puls{50%{transform:scale(1.5);opacity:.6}}
.fuss{margin-top:clamp(4rem,10vw,8rem)}
.fuss__innen{width:min(100% - 2*var(--rand),var(--breite));margin-inline:auto;display:grid;grid-template-columns:minmax(236px,1.6fr) 1fr 1.3fr 1.2fr 1fr 1.1fr;gap:2.5rem 2rem;padding:clamp(3rem,6vw,5rem) 0}
.fuss__marke img{width:min(100%,220px)}
.fuss__claim{font-family:var(--display);font-weight:500;color:var(--tinte);margin:1.4rem 0 .6rem;font-size:1.05rem;line-height:1.35}
.fuss__text{font-size:.92rem;color:var(--grau);margin:0 0 1.2rem;max-width:34ch}
.fuss__spalte h2{font-family:var(--display);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--grau);font-weight:500;margin:0 0 1rem}
.fuss__spalte ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.fuss__spalte a:not(.knopf){color:var(--text);font-size:.95rem;text-decoration:none;transition:color .25s}
.fuss__spalte a:not(.knopf):hover{color:var(--pink-text)}
.fuss__spalte p{margin:0 0 1rem;font-size:.95rem}
.fuss__mehr{font-weight:600;color:var(--tinte)}
.fuss__kontakt .knopf{margin-top:.4rem}
.fuss__unten{border-top:1px solid var(--linie)}
.fuss__unten-innen{width:min(100% - 2*var(--rand),var(--breite));margin-inline:auto;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;padding:1.4rem 0;font-size:.88rem;color:var(--grau)}
.fuss__unten p{margin:0}
.fuss__recht{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem}
.fuss__recht a{color:var(--grau)}
.fuss__recht a:hover{color:var(--pink-text)}
.fuss__credit a{color:var(--tinte);font-weight:600}
@media (max-width:1100px){.fuss__innen{grid-template-columns:1fr 1fr 1fr}.fuss__marke{grid-column:1/-1}}
@media (max-width:640px){.fuss__innen{grid-template-columns:1fr 1fr;padding-bottom:7.5rem}}
@media (max-width:420px){.fuss__innen{grid-template-columns:1fr}}

/* Seiteneinstieg (Unterseiten) */
.auftakt{padding:calc(var(--nav-h) + clamp(3rem,8vw,7rem)) 0 calc(var(--atem)/2)}
.auftakt h1{max-width:14ch;hyphens:manual;-webkit-hyphens:manual}
@media (max-width:420px){.auftakt h1{font-size:clamp(2rem,10vw,2.6rem)}}
.auftakt .lede{margin-top:1.6rem}
.auftakt--zwei{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,5rem);align-items:end}
@media (max-width:860px){.auftakt--zwei{grid-template-columns:1fr}.auftakt__kreise{display:none}}
.auftakt__kreise{width:min(40vw,260px);margin-left:auto}
.auftakt--knapp{padding-top:calc(var(--nav-h) + clamp(1.6rem,4vw,3.5rem));padding-bottom:clamp(1.4rem,3vw,2.2rem)}
.auftakt--knapp .lede{margin-top:1rem;max-width:52ch}
#hoeren{scroll-margin-top:calc(var(--nav-h) + .75rem)}
@media (max-width:640px){.auftakt--knapp h1{font-size:clamp(2rem,9vw,2.6rem)}.auftakt--knapp .lede{font-size:1rem}}
.kette{display:grid;gap:0}
.kette__glied{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;padding:1.8rem 0;border-top:1px solid var(--linie)}
.kette__glied:last-child{border-bottom:1px solid var(--linie)}
.kette__nr{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--pink);color:var(--pink-text);display:grid;place-items:center;font-family:var(--display);font-weight:500}
.kette__glied h3{margin:0 0 .4rem;font-size:1.2rem}
.kette__glied p{margin:0;max-width:60ch}
.muster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
@media (max-width:960px){.muster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.muster{grid-template-columns:1fr}}
.muster article{border:1px solid var(--linie);border-radius:20px;padding:1.6rem;transition:transform .5s var(--federnd),box-shadow .5s}
.muster article:hover{transform:translateY(-4px);box-shadow:0 26px 40px -30px rgba(28,25,32,.3)}
.muster h3{font-size:1.1rem;margin:0 0 .3rem}
.muster .leise{font-family:var(--hand);color:var(--pink-text);font-size:1.35rem;margin:0 0 .6rem;font-weight:500}
.muster p{margin:0;font-size:.95rem}
.einfluss{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1.5rem}
.einfluss div{border-top:1px solid var(--linie);padding-top:1rem}
.einfluss h3{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grau);font-weight:500;margin:0 0 .6rem;font-family:var(--display)}
.einfluss p{margin:0;font-size:.95rem;color:var(--tinte)}
.werte{display:flex;flex-wrap:wrap;gap:.6rem}
.werte span{padding:.55rem 1rem;border-radius:999px;border:1px solid var(--linie);font-family:var(--display);font-weight:500;font-size:.95rem;color:var(--tinte)}
.werte span.hoch{background:var(--tinte);color:#fff;border-color:var(--tinte)}
.lese .werte+p{margin-top:1rem}
.qrbox{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center;border:1px solid var(--linie);border-radius:20px;padding:1.4rem}
.qrbox>img,.qrbox>svg{width:120px;height:120px}
@media (max-width:520px){.qrbox{grid-template-columns:1fr}}
.notiz{font-size:.9rem;color:var(--grau)}
.lese p.notiz{margin-top:1.6rem}
.fehler404{padding:calc(var(--nav-h) + 6rem) 0 4rem;text-align:left}
.fehler404 .gross{font-size:clamp(5rem,20vw,14rem);line-height:1;background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
.tabelle{width:100%;border-collapse:collapse;font-size:.95rem}
.tabelle th,.tabelle td{text-align:left;padding:.7rem .6rem;border-bottom:1px solid var(--linie);vertical-align:top}
.tabelle th{font-family:var(--display);font-weight:500;color:var(--tinte)}
@media print{.kopf,.fuss,.nachoben,.scrollhinweis,.consent,.consent__schalter{display:none}body{color:#000}.auftakt{padding-top:1rem}}

/* ---- Die Kreise: eine Geschichte beim Scrollen (Startseite) ----
   Ohne Skript und bei reduzierter Bewegung: fertiges Bild, vier Sätze untereinander.
   Mit Skript (.lebt): die Bühne bleibt eine Bildschirmhöhe stehen, das Scrollen erzählt. */
.kb{position:relative}
.kb__klebt{padding:clamp(2rem,5vw,4rem) 0}
.kb__innen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.kb__saetze{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:.9rem;position:relative}
.kb__saetze li{font-family:var(--display);font-weight:300;font-size:clamp(1.3rem,2.1vw,1.85rem);line-height:1.3;letter-spacing:-.01em;color:var(--tinte);max-width:24ch}
.kb__figur{width:100%;max-width:760px;margin-inline:auto}
.kb__figur svg{display:block;width:100%;height:auto;overflow:visible}
.js .kb.lebt{height:calc(100vh + 160vh)}
.js .kb.lebt .kb__klebt{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));height:calc(100svh - var(--nav-h));display:grid;align-items:center;padding:0}
.js .kb.lebt .kb__saetze{display:block;min-height:7.2em}
.js .kb.lebt .kb__saetze li{position:absolute;left:0;top:0;opacity:0;transform:translateY(-8px);transition:opacity .28s,transform .28s}
.js .kb.lebt .kb__saetze li.da{opacity:1;transform:none;transition:opacity .55s .22s,transform .7s .22s var(--federnd)}
.kb__nachwort{margin-top:clamp(2.5rem,6vw,5rem)}
.kb__farbe{display:flex;align-items:baseline;gap:.7rem}
.kb__tupfer{flex:none;width:.8em;height:.8em;border-radius:50%;transform:translateY(.08em)}
.kb__tupfer--orange{background:#FD8224}.kb__tupfer--pink{background:#D745AF}

/* ---------- Der Raum: eine Geschichte beim Scrollen (Coaching-Seite, Fassung 9) ----------
   Ohne Skript: fertiger Zustand (Raum offen, Zeichen, Satz, „antwortest“, Schluss).
   Mit Skript (.js) beginnt alles geschlossen; raum.js öffnet es mit dem Scrollen. */
.rb{position:relative}
.rb__klebt{padding:clamp(2rem,5vw,4rem) 0}
.rb__innen{position:relative}
.rb__zeile{font-family:var(--display);font-weight:300;font-size:clamp(2.3rem,7vw,5rem);line-height:1.04;letter-spacing:-.028em;color:var(--tinte);margin:0}
.rb__unten{position:relative}
.rb__unten span{display:block}
.rb__reagierst{position:absolute;left:0;top:0;opacity:0}
.rb__raum{position:relative;height:clamp(6rem,22svh,14rem);width:100%}
.rb__punkte{position:absolute;left:11px;top:50%;width:0;height:0}
.rb__punkte i{position:absolute;left:-4.5px;top:0;width:9px;height:9px;border-radius:50%;background:var(--pink);box-sizing:border-box;transform:translate(0,-50%)}
.rb__punkte i:nth-child(even){background:transparent;border:1.5px solid var(--orange)}
.rb__punkte i:first-child{left:-11px;width:22px;height:22px;transform:translate(0,-50%) scale(.409)}
.rb__punkte i:nth-child(2){transform:translate(18px,-50%)}.rb__punkte i:nth-child(3){transform:translate(36px,-50%)}.rb__punkte i:nth-child(4){transform:translate(54px,-50%)}.rb__punkte i:nth-child(5){transform:translate(72px,-50%)}
.rb__satz{font-size:clamp(1.35rem,2.2vw,1.9rem);font-weight:300;line-height:1.3;letter-spacing:-.01em;max-width:26ch;margin:clamp(1.6rem,4vh,2.6rem) 0 0}
.rb__schluss{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,2.5vw,2.2rem);line-height:1.3;color:var(--pink-text);margin:clamp(.9rem,2vh,1.4rem) 0 0}
/* Anfangszustand, sobald Skript läuft (Klasse .js kommt ganz oben im Body) – bis raum.js übernimmt */
.js .rb:not(.rb--fertig) .rb__raum{height:0}
.js .rb:not(.rb--fertig) .rb__punkte i{opacity:0;transform:translate(0,-50%) scale(0)}
.js .rb:not(.rb--fertig) .rb__satz,.js .rb:not(.rb--fertig) .rb__schluss,.js .rb:not(.rb--fertig) .rb__antwortest{opacity:0}
.js .rb:not(.rb--fertig) .rb__reagierst{opacity:1}
.js .rb.lebt{height:calc(100vh + 170vh);height:calc(100svh + 170svh)}
.js .rb.lebt .rb__klebt{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));height:calc(100svh - var(--nav-h));display:grid;align-items:center;padding:0}
.rb__satz,.rb__schluss,.rb__reagierst,.rb__antwortest,.rb__punkte i{will-change:opacity,transform}
@media (max-width:640px){.rb__zeile{font-size:clamp(2.1rem,9.4vw,3rem)}.rb__punkte{left:8px}.rb__punkte i:first-child{left:-8px;width:16px;height:16px;transform:translate(0,-50%) scale(.5625)}.rb__satz{max-width:none}}
@media (max-width:860px){.kb__innen{grid-template-columns:1fr;gap:1.4rem}.kb__figur{order:-1;max-width:460px}.js .kb.lebt{height:calc(100vh + 140vh);height:calc(100svh + 140svh)}.js .kb.lebt .kb__saetze{min-height:6.4em}}

/* Hilfsklassen (ersetzen Inline-Stile, die die CSP verbietet) */
.mt-0{margin-top:0}.mt-1{margin-top:1rem}.mt-12{margin-top:1.2rem}.mt-14{margin-top:1.4rem}.mt-16{margin-top:1.6rem}.mt-2{margin-top:2rem}.mt-24{margin-top:2.4rem}.mt-3{margin-top:3rem}
.mb-04{margin-bottom:.4rem}.mb-2{margin-bottom:2rem}.mb-25{margin-bottom:2.5rem}.m-0{margin:0}.my-22{margin:2.2rem 0}.pb-0{padding-bottom:0}
.breit{max-width:none}.max-52{max-width:52ch}.nebel{background:#fff}.weiss{background:#fff}.unten{align-items:end}.pt-gross{padding-top:clamp(3rem,7vw,6rem)}
.leise-zahl{color:var(--hell);font-weight:500}.weiss-leise{color:rgba(255,255,255,.6)}.fuell{fill:currentColor;stroke:none}
.zwischenkicker{margin-top:2rem;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grau);font-weight:500}
.folgt{background:var(--hauch-orange);color:var(--orange-text);padding:.05em .4em;border-radius:6px;font-weight:600}
.feld__titel{font-family:var(--display);font-weight:500;color:var(--tinte)}.wahl--2{grid-template-columns:1fr 1fr}.wahl--3{grid-template-columns:1fr 1fr 1fr}
@media (max-width:480px){.wahl--3{grid-template-columns:1fr 1fr}}
.hinweis-rot{color:#b3262f;margin-top:.8rem}.qrbox__text{margin:.3rem 0 .8rem}.zitat-rechts{max-width:420px;margin-left:auto}
.mittelpunkt{margin-top:clamp(3rem,6vw,5rem);display:grid;gap:1.4rem;justify-items:start}
.karte--einladung{display:grid;align-content:center;gap:1rem;background:var(--hauch-orange);border-color:transparent}.karte__satz{font-size:clamp(1.4rem,2.2vw,1.8rem)}
.band__satz{font-family:var(--display);font-size:1.6rem;color:#fff;margin:0 0 1.6rem}.band__satz--klein{font-size:1.3rem;margin:1.4rem 0 1.8rem}
.einstieg__kicker{animation:wort .8s var(--federnd) .05s forwards;opacity:0}
@media (prefers-reduced-motion:reduce){.einstieg__kicker{animation:none;opacity:1}}
.spieler__welle i:nth-child(1){animation-delay:0.00s}
.spieler__welle i:nth-child(2){animation-delay:0.07s}
.spieler__welle i:nth-child(3){animation-delay:0.14s}
.spieler__welle i:nth-child(4){animation-delay:0.21s}
.spieler__welle i:nth-child(5){animation-delay:0.28s}
.spieler__welle i:nth-child(6){animation-delay:0.35s}
.spieler__welle i:nth-child(7){animation-delay:0.42s}
.spieler__welle i:nth-child(8){animation-delay:0.49s}
.spieler__welle i:nth-child(9){animation-delay:0.56s}
.spieler__welle i:nth-child(10){animation-delay:0.63s}
.spieler__welle i:nth-child(11){animation-delay:0.70s}
.spieler__welle i:nth-child(12){animation-delay:0.77s}
.spieler__welle i:nth-child(13){animation-delay:0.84s}
.spieler__welle i:nth-child(14){animation-delay:0.91s}
.spieler__welle i:nth-child(15){animation-delay:0.98s}
.spieler__welle i:nth-child(16){animation-delay:1.05s}
.spieler__welle i:nth-child(17){animation-delay:1.12s}
.spieler__welle i:nth-child(18){animation-delay:1.19s}
.spieler__welle i:nth-child(19){animation-delay:1.26s}
.spieler__welle i:nth-child(20){animation-delay:1.33s}
.spieler__welle i:nth-child(21){animation-delay:1.40s}
.spieler__welle i:nth-child(22){animation-delay:1.47s}
.spieler__welle i:nth-child(23){animation-delay:1.54s}
.spieler__welle i:nth-child(24){animation-delay:1.61s}
.spieler__welle i:nth-child(25){animation-delay:1.68s}
.spieler__welle i:nth-child(26){animation-delay:1.75s}
.spieler__welle i:nth-child(27){animation-delay:1.82s}
.spieler__welle i:nth-child(28){animation-delay:1.89s}

/* ---- Einwilligung („Cookie-Einstellungen“): Karte unten links, Schalter unten links ---- */
.consent{position:fixed;left:1.2rem;bottom:1.2rem;z-index:150;width:min(490px,calc(100vw - 2.4rem));max-height:calc(100vh - 2.4rem);max-height:calc(100dvh - 2.4rem);display:flex;align-items:flex-end;opacity:0;transform:translateY(22px);transition:opacity .45s,transform .6s var(--federnd);pointer-events:none}
.consent--da{opacity:1;transform:none;pointer-events:auto}
.consent__karte{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);box-shadow:0 30px 70px -30px rgba(28,25,32,.45),0 6px 20px -10px rgba(28,25,32,.18);padding:1.5rem 1.6rem 1.25rem;max-height:calc(100vh - 2.4rem);max-height:calc(100dvh - 2.4rem);overflow:auto;width:100%;outline:none}
.consent__kopf{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem}
.consent__kopf .marke-kreise{width:36px;height:36px;flex:none}
.consent__kopf h2{font-size:1.28rem;letter-spacing:-.01em}
.consent__karte p{font-size:.92rem;line-height:1.55;color:var(--text);margin:0 0 1.1rem}
.consent__karte p a{color:var(--pink-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.consent__knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .7rem}
.consent .knopf{padding:.8rem 1.15rem;font-size:.92rem}
.consent__text{background:none;border:0;padding:.5rem .2rem;font-family:var(--display);font-weight:500;font-size:.92rem;color:var(--grau);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;cursor:pointer;transition:color .3s}
.consent__text:hover{color:var(--pink-text)}
.consent__gruppen{border-top:1px solid var(--linie);margin:.2rem 0 1rem}
.consent__gruppe{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;padding:.85rem 0;border-bottom:1px solid var(--linie);cursor:pointer}
.consent__gruppe input{margin:.2rem 0 0;width:19px;height:19px;accent-color:var(--pink);flex:none;cursor:pointer}
.consent__gruppe input[disabled]{cursor:default;opacity:.7}
.consent__gruppe b{display:block;font-family:var(--display);font-weight:500;color:var(--tinte);font-size:.98rem;margin-bottom:.2rem}
.consent__gruppe small{display:block;font-size:.82rem;line-height:1.5;color:var(--grau)}
.consent__karte p.consent__klein{font-size:.82rem;color:var(--grau)}
.consent__karte p.consent__links{font-size:.8rem;color:var(--grau);margin:1rem 0 0}
.consent .consent__karte p.consent__links a{color:var(--grau);text-decoration:none}
.consent .consent__karte p.consent__links a:hover{color:var(--pink-text)}
.consent__schalter{position:fixed;left:1.2rem;bottom:calc(1.2rem + var(--schwebt-hoch,0px));z-index:85;height:54px;min-width:54px;padding:0 .95rem 0 .9rem;border-radius:999px;border:1px solid var(--linie);background:#fff;color:var(--tinte);box-shadow:0 10px 30px -10px rgba(28,25,32,.35);display:inline-flex;align-items:center;gap:0;cursor:pointer;font-family:var(--display);font-weight:500;font-size:.9rem;transition:transform .45s var(--federnd),box-shadow .3s,gap .3s}
.consent__schalter svg{width:26px;height:26px;flex:none;fill:var(--orange)}
.consent__schalter svg circle{fill:var(--tinte)}
.consent__schalter span{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .45s var(--federnd),opacity .3s}
.consent__schalter:hover,.consent__schalter:focus-visible{transform:translateY(-3px);gap:.55rem;box-shadow:0 16px 34px -12px rgba(28,25,32,.4)}
.consent__schalter:hover span,.consent__schalter:focus-visible span{max-width:200px;opacity:1}
body.consent-offen .consent__schalter{opacity:0;pointer-events:none}
@media (max-width:640px){.consent{left:.75rem;right:.75rem;bottom:.75rem;width:auto;max-height:calc(100vh - 1.5rem);max-height:calc(100dvh - 1.5rem)}.consent__karte{padding:1.3rem 1.2rem 1.1rem;border-radius:18px}.consent__knoepfe .knopf{flex:1 1 auto}.consent__schalter{left:.9rem;bottom:calc(.9rem + var(--schwebt-hoch,0px));height:48px;min-width:48px;padding:0 .75rem}.consent__schalter svg{width:24px;height:24px}}
/* Am Handy erscheint der runde Schalter erst, wenn gescrollt wurde (consent.js setzt .da ab 120 px), damit er im Einstieg nicht auf „Bin ich hier richtig?“ liegt; am Rechner wie gehabt */
@media (max-width:860px){.consent__schalter{opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .4s,transform .5s var(--federnd),visibility 0s .4s}.consent__schalter.da{opacity:1;visibility:visible;transform:none;transition:opacity .4s,transform .5s var(--federnd),visibility 0s}body.consent-offen .consent__schalter{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.consent,.consent__schalter,.consent__schalter span{transition:none}.consent{transform:none}}