/* justanormalguy.de — MUSTER „hell" (2026-09-07)
   Gegenentwurf zur Kino-Fassung. Kein dunkler Schleier über bunten
   Kinderbildern, kein weißer Text auf Motiv. Stattdessen: ruhige
   Markenflächen, die Cover als Objekte darauf, viel Luft.
   Der Rhythmus entsteht aus Farbwechsel und wechselnder Seite. */

@font-face{font-family:"Quicksand";src:url(schrift/Quicksand-Light.woff) format("woff");font-weight:300;font-display:swap}
@font-face{font-family:"Quicksand";src:url(schrift/Quicksand-Regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Quicksand";src:url(schrift/Quicksand-SemiBold.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Quicksand";src:url(schrift/Quicksand-Bold.woff) format("woff");font-weight:700;font-display:swap}

:root{
  --creme:#FCE5C8; --creme-hell:#F4F1D9; --papier:#FFF8EE;
  --dunkel:#4a3f3b; --lila:#B33BF5; --lila-dunkel:#8E24C4; --himmel:#B8E1F0;
  --grau:#7a6f6a;
  /* Nachtpalette — JB-Entscheid 2026-10-15, vorerst NUR das Podcast-Feld (.dunkelfeld) */
  --nacht:#2a2a40; --pfirsich:#fad2a1; --nacht-lila:#7109ab;
  --schrift:"Quicksand","SF Pro Rounded","Arial Rounded MT Bold","Segoe UI",system-ui,sans-serif;
  --weich:cubic-bezier(.16,1,.3,1);
  --leiste:92px;
}
*{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(--papier);color:var(--dunkel);font-family:var(--schrift);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--lila-dunkel)}

/* ── Knöpfe ─────────────────────────────────────────────────────────── */
.knopf{display:inline-flex;align-items:center;gap:8px;background:var(--lila);color:#fff;text-decoration:none;
  border:0;border-radius:999px;padding:14px 28px;font:inherit;font-weight:700;cursor:pointer;
  transition:transform .3s var(--weich),background .2s,box-shadow .3s}
.knopf:hover{background:var(--lila-dunkel);transform:translateY(-2px);box-shadow:0 14px 34px -14px rgba(179,59,245,.75)}
.knopf.leise{background:transparent;color:var(--dunkel);border:2px solid rgba(74,63,59,.25)}
.knopf.leise:hover{background:rgba(74,63,59,.06);border-color:rgba(74,63,59,.4);box-shadow:none}
.dunkelfeld .knopf.leise{color:var(--creme);border-color:rgba(252,229,200,.4)}
.dunkelfeld .knopf.leise:hover{background:rgba(252,229,200,.1)}

/* ── Kopfleiste ─────────────────────────────────────────────────────── */
.kopf{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;gap:12px;color:var(--dunkel);transition:background .4s,box-shadow .4s}
.kopf.ist-unterwegs{background:rgba(255,248,238,.86);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(74,63,59,.08)}
/* Über einem dunklen Feld dreht sich die Kopfleiste um — sonst verschwindet sie darin */
.kopf.auf-dunkel{color:var(--creme)}
.kopf.auf-dunkel .marke img{filter:brightness(0) invert(1) opacity(.92)}
.kopf.auf-dunkel .ton{border-color:rgba(252,229,200,.4);color:var(--creme)}
.kopf.auf-dunkel .ton:hover{background:rgba(252,229,200,.1);border-color:rgba(252,229,200,.7)}
.kopf.auf-dunkel.ist-unterwegs{background:rgba(42,42,64,.92);box-shadow:0 1px 0 rgba(252,229,200,.1)}
.kopf.auf-dunkel.ist-unterwegs .ton.spielt{border-color:var(--lila);color:#e9b6ff}
.marke{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit;
  font-weight:700;letter-spacing:.14em;font-size:12px;text-transform:lowercase}
.marke img{width:42px;height:42px}
.kopf-nav{display:none;gap:26px}
.kopf-nav a{color:inherit;text-decoration:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;opacity:.7;transition:opacity .2s}
.kopf-nav a:hover{opacity:1}
@media (min-width:900px){.kopf{padding:18px 32px}.kopf-nav{display:flex}}

.ton{display:inline-flex;align-items:center;gap:10px;border:1.5px solid rgba(74,63,59,.3);background:transparent;
  color:var(--dunkel);border-radius:999px;padding:8px 14px 8px 10px;font:inherit;font-size:12px;font-weight:700;
  cursor:pointer;max-width:56vw;transition:background .2s,border-color .2s}
.ton:hover{background:rgba(74,63,59,.05);border-color:rgba(74,63,59,.5)}
.ton .balken{display:inline-flex;align-items:flex-end;gap:2px;width:16px;height:14px}
.ton .balken i{display:block;width:3px;background:currentColor;border-radius:2px;height:30%;transition:height .3s}
.ton.spielt{border-color:var(--lila);color:var(--lila-dunkel)}
.ton.spielt .balken i{animation:tanz .9s ease-in-out infinite}
.ton.spielt .balken i:nth-child(2){animation-delay:-.3s}
.ton.spielt .balken i:nth-child(3){animation-delay:-.6s}
.ton.spielt .balken i:nth-child(4){animation-delay:-.15s}
@keyframes tanz{0%,100%{height:30%}50%{height:100%}}
.ton .titel-lauf{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ton .weiter{opacity:.6}
.ton .weiter:hover{opacity:1}

/* ── Felder: jede Szene ist eine ruhige Fläche ──────────────────────── */
/* Mobil KEIN Vollbild-Zwang: Text plus Bild passen auf 812 px nicht ohne Gedränge,
   und das Bild verschwände hinter der Leiste. Am Desktop bleibt die ganze Fläche. */
.feld{position:relative;display:flex;align-items:center;
  padding:104px 0 calc(var(--leiste) + 34px);overflow:hidden}
@media (min-width:900px){.feld{min-height:100svh;padding:96px 0 calc(var(--leiste) + 20px)}}
.feld-innen{width:100%;max-width:1180px;margin:0 auto;padding:0 26px;display:grid;gap:26px;align-items:center}
@media (min-width:900px){
  .feld-innen{grid-template-columns:1fr 1fr;gap:64px;padding:0 44px}
  .feld.bild-links .text{order:2}
  .feld.bild-links .buehne{order:1}
}
/* Flächenfarben — der Rhythmus der Seite */
.creme      {background:var(--creme)}
.cremehell  {background:var(--creme-hell)}
.papier     {background:var(--papier)}
.dunkelfeld {background:var(--nacht);color:var(--pfirsich)}
.dunkelfeld .ueber{color:var(--pfirsich)}
.dunkelfeld .satz{color:rgba(250,210,161,.85)}
.dunkelfeld .knopf{background:var(--nacht-lila);color:#F4F1D9}
.dunkelfeld .knopf:hover{background:var(--lila-dunkel)}

/* ── Typografie ─────────────────────────────────────────────────────── */
/* Mobil steht alles mittig — linksbuendige Knoepfe unter mittigem Motiv
   wirken zufaellig. Ab 900 px kippt die Seite zurueck auf linksbuendig. */
.ueber{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;margin:0 0 18px;
  color:var(--grau);display:flex;align-items:center;justify-content:center;gap:9px}
.ueber::before{content:"";width:26px;height:2px;background:var(--lila);border-radius:2px;flex:none}
h1,h2{margin:0 0 20px;font-weight:300;line-height:1.03;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:clamp(42px,7.4vw,80px)}
h2{font-size:clamp(34px,5.4vw,58px)}
h1 b,h2 b{font-weight:700}
.satz{margin:0 0 18px;font-size:clamp(16px,1.7vw,19px);line-height:1.55;max-width:30em;color:#5c514c}
.satz+.satz{margin-bottom:26px}
/* Der zweite Absatz erzaehlt weiter, tritt aber optisch zurueck */
.klein-satz{font-size:clamp(15px,1.5vw,16.5px);opacity:.9}
.dunkelfeld .klein-satz{color:rgba(250,210,161,.72)}
.reihe{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center}
.text{text-align:center}
.satz,.hoerliste,.stufen{margin-left:auto;margin-right:auto}
.hoer,.stufe{text-align:left}
@media (min-width:900px){
  .text{text-align:left}
  .ueber{justify-content:flex-start}
  .reihe{justify-content:flex-start}
  .satz,.hoerliste,.stufen{margin-left:0;margin-right:0}
}
.klein{font-size:14px;color:var(--grau)}

/* ── Die Bühne rechts: Cover als Objekte ───────────────────────────── */
/* Mobil steht das Bild oben: Wer ins Feld scrollt, sieht zuerst das Motiv,
   dann den Text. Sonst haengt es allein unter dem letzten Knopf. */
.buehne{display:flex;justify-content:center;align-items:center;position:relative;order:-1}
@media (min-width:900px){.buehne{order:0}}
.cover{width:min(68vw,290px);aspect-ratio:1;border-radius:26px;object-fit:cover;
  box-shadow:0 30px 60px -26px rgba(74,63,59,.55),0 0 0 1px rgba(74,63,59,.06)}
@media (min-width:900px){.cover{width:min(38vw,380px)}}

/* Stapel: drei Cover, leicht gefächert */
/* ── Cover-Ring in 3D ────────────────────────────────────────────
   Nach JBs Vorbild (Pokémon-Pocket): Die Karten stehen auf einem
   gedachten Zylinder, die mittlere frontal, die Nachbarn weggedreht
   und weiter hinten. Darunter spiegelt sich alles auf dem Boden. */
.karussell{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;
  width:min(90vw,380px)}
@media (min-width:900px){.karussell{width:min(48vw,480px)}}

.buehne3d{position:relative;width:100%;aspect-ratio:.9;perspective:1100px;
  perspective-origin:50% 42%}
.ring{position:absolute;inset:0;transform-style:preserve-3d}

.karte3d{position:absolute;left:21%;top:0;width:58%;border:0;padding:0;background:transparent;
  cursor:pointer;transform-style:preserve-3d;
  transition:transform .62s var(--weich),opacity .5s ease}
.karte3d .blatt{position:relative;display:block;border-radius:20px;overflow:hidden;
  box-shadow:0 24px 48px -18px rgba(74,63,59,.6),0 0 0 1px rgba(74,63,59,.08)}
.karte3d img{width:100%;aspect-ratio:1;object-fit:cover;display:block}

/* Der Glanzstreifen wandert nur über die mittlere Karte */
.karte3d .glanz{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.55) 46%,
             rgba(255,255,255,.15) 54%,transparent 66%);
  background-size:250% 100%;background-position:120% 0}
.karte3d.ist-mitte .blatt{box-shadow:0 34px 64px -18px rgba(74,63,59,.7),0 0 0 1px rgba(74,63,59,.1)}
@media (prefers-reduced-motion:no-preference){
  .karte3d.ist-mitte .glanz{opacity:1;animation:schimmer 4.6s ease-in-out infinite}
}
@keyframes schimmer{0%{background-position:120% 0}45%{background-position:-40% 0}100%{background-position:-40% 0}}

/* Die Spiegelung auf dem Boden */
.karte3d .spiegel{display:block;margin-top:1px;transform:scaleY(-1);opacity:.2;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 28%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 28%);
  border-radius:20px;overflow:hidden;pointer-events:none;filter:blur(1.2px)}
.dunkelfeld .karte3d .spiegel{opacity:.18}

.karte3d:focus-visible{outline:none}
.karte3d:focus-visible .blatt{outline:3px solid var(--lila);outline-offset:5px}

/* Die Pfeile — lila, zurückhaltend, erst beim Zeigen kräftig */
.pfeil{position:absolute;top:34%;z-index:30;width:42px;height:42px;border-radius:50%;
  border:0;cursor:pointer;display:grid;place-items:center;color:#fff;
  background:rgba(179,59,245,.34);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .25s,transform .3s var(--weich),box-shadow .3s}
.pfeil svg{width:22px;height:22px}
.pfeil.links {left:6px}
.pfeil.rechts{right:6px}
.pfeil:hover{background:rgba(179,59,245,.88);transform:scale(1.08);
  box-shadow:0 10px 26px -10px rgba(179,59,245,.8)}
.pfeil:focus-visible{outline:3px solid var(--lila);outline-offset:3px}
.dunkelfeld .pfeil{background:rgba(179,59,245,.45)}
@media (min-width:900px){.pfeil{width:52px;height:52px}.pfeil.links{left:-16px}.pfeil.rechts{right:-16px}}

.karussell-name{margin:0;text-align:center;font-size:14px;color:var(--grau);line-height:1.35}
.karussell-name b{display:block;font-size:17px;color:var(--dunkel);font-weight:700}
.dunkelfeld .karussell-name b{color:var(--creme)}

/* ── Die Frage vor dem Sprung zu YouTube ─────────────────────────── */
.frage{border:0;padding:0;max-width:min(92vw,380px);border-radius:26px;background:var(--papier);
  color:var(--dunkel);box-shadow:0 40px 90px -30px rgba(74,63,59,.7);overflow:hidden;text-align:center}
.frage::backdrop{background:rgba(74,63,59,.55);backdrop-filter:blur(4px)}
.frage img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.frage .ueber{margin:22px 0 8px;justify-content:center}
.frage h3{margin:0 26px 6px;font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-.015em}
.frage .klein{margin:0 26px 20px}
.frage .reihe{padding:0 22px 24px;justify-content:center}
@media (prefers-reduced-motion:no-preference){
  .frage[open]{animation:auftauchen .32s var(--weich)}
}
@keyframes auftauchen{from{opacity:0;transform:translateY(14px) scale(.97)} to{opacity:1;transform:none}}

/* Das Strichlogo als Bühne */
.zeichen{width:min(88vw,380px)}
/* In der Startszene mobil kleiner: sonst wird das Feld hoeher als der
   Bildschirm und die Knoepfe verschwinden hinter der Leiste. Gemessen. */
#start .zeichen{width:min(42vw,158px)}
@media (min-width:900px){.zeichen{width:min(44vw,500px)}#start .zeichen{width:min(44vw,500px)}}

/* Hörliste — auf heller Fläche */
.hoer-titel{margin:0 0 10px;font-size:13.5px;font-weight:700;color:var(--grau);letter-spacing:.01em}
.hoerliste{display:grid;gap:8px;margin:0 0 24px;max-width:30em}
.hoer{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.72);
  border:1px solid rgba(74,63,59,.1);border-radius:16px;padding:9px 14px 9px 9px;
  cursor:pointer;transition:background .2s,transform .3s var(--weich);text-align:left;
  color:inherit;font:inherit;width:100%}
.hoer:hover{background:#fff;transform:translateX(3px)}
.hoer .knopf-rund{flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:var(--lila);color:#fff;
  display:grid;place-items:center;font-size:13px}
.hoer.spielt{background:#fff;box-shadow:0 0 0 2px var(--lila)}
.hoer b{display:block;font-size:15px}
.hoer span span{font-size:12.5px;color:var(--grau)}

/* Preisstufen */
.stufen{display:grid;gap:8px;margin:0 0 24px;max-width:30em}
.stufe{display:flex;align-items:baseline;gap:14px;background:rgba(255,255,255,.7);
  border:1px solid rgba(74,63,59,.1);border-radius:14px;padding:10px 16px}
.stufe b{font-size:19px;font-weight:700;flex:0 0 2.8em;color:var(--lila-dunkel)}
.stufe span{font-size:13.5px;color:#5c514c;line-height:1.35}

/* ── Lese-Abschnitte ────────────────────────────────────────────────── */
.lesen{padding:96px 0 calc(var(--leiste) + 40px)}
@media (min-width:900px){.lesen{padding:120px 0 calc(var(--leiste) + 60px)}}
.rahmen{max-width:1080px;margin:0 auto;padding:0 26px}
.rahmen.schmal{max-width:640px}
.lesen h2{margin-bottom:22px}
.lesen .rahmen{text-align:center}
.lesen p:not(.gross):not(.klein),.zitat{text-align:left}
@media (min-width:900px){.lesen .rahmen{text-align:left}}
.gross{font-size:clamp(21px,3vw,29px);line-height:1.35;font-weight:300;margin:0 0 22px}
.zitat{font-size:clamp(19px,2.6vw,24px);line-height:1.45;color:var(--lila-dunkel);
  border-left:3px solid var(--lila);padding-left:20px;margin:30px 0 0;font-weight:600}
.herz-gross{width:min(100%,400px);margin:0 0 26px}

/* Erscheinen */
.zeig>*{opacity:0;transform:translateY(20px);transition:opacity .8s var(--weich),transform .8s var(--weich)}
.zeig.ist-da>*{opacity:1;transform:none}
.zeig.ist-da>*:nth-child(2){transition-delay:.09s}
.zeig.ist-da>*:nth-child(3){transition-delay:.18s}
.zeig.ist-da>*:nth-child(4){transition-delay:.27s}
.zeig.ist-da>*:nth-child(5){transition-delay:.36s}
@media (prefers-reduced-motion:reduce){.zeig>*{opacity:1;transform:none;transition:none}}

/* ── Leiste unten ───────────────────────────────────────────────────── */
/* Ohne Pille: die Kacheln stehen frei auf der Flaeche. Damit die Beschriftung
   auf jedem Feld lesbar bleibt, faerbt JS sie ueber .auf-dunkel um. */
.leiste{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;
  display:flex;gap:6px;padding:0;max-width:calc(100vw - 16px)}
.tuer{border:0;background:transparent;padding:4px 8px 2px;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:5px;font:inherit;color:var(--dunkel);font-size:10.5px;font-weight:700;
  border-radius:999px;text-decoration:none;min-width:62px;transition:color .3s}
.leiste.auf-dunkel .tuer{color:rgba(252,229,200,.85)}
.leiste.auf-dunkel .tuer.ist-aktiv{color:var(--creme)}
.leiste.auf-dunkel .tuer:not(.ist-herz) img{box-shadow:0 0 0 2px rgba(252,229,200,.5)}
.leiste.auf-dunkel .tuer.ist-aktiv:not(.ist-herz) img{box-shadow:0 0 0 2px var(--nacht),0 0 0 4.5px var(--lila)}

/* Der Podcast traegt kein rundes Bild, sondern das Herz selbst als Form. */
.tuer.ist-herz .herzbild{display:block;width:56px;height:56px;margin:-5px 0;position:relative;
  filter:drop-shadow(0 6px 14px rgba(74,63,59,.4));transition:transform .35s var(--weich)}
.tuer.ist-herz img{width:100%;height:100%;border-radius:0;box-shadow:none;object-fit:contain}
.tuer.ist-herz .fuer-dunkel{display:none}
.leiste.auf-dunkel .tuer.ist-herz .fuer-hell{display:none}
.leiste.auf-dunkel .tuer.ist-herz .fuer-dunkel{display:block}
.tuer.ist-herz:hover .herzbild{transform:translateY(-3px) scale(1.06)}
.tuer.ist-herz.ist-aktiv .herzbild{filter:drop-shadow(0 0 6px rgba(179,59,245,.85)) drop-shadow(0 6px 14px rgba(74,63,59,.4))}
@media (min-width:600px){.tuer.ist-herz .herzbild{width:66px;height:66px;margin:-6px 0}}
.tuer span{white-space:nowrap}
.tuer:not(.ist-herz) img{width:46px;height:46px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 2px #fff,0 8px 20px -8px rgba(74,63,59,.55);
  transition:transform .35s var(--weich),box-shadow .3s}
.tuer:not(.ist-herz):hover img{transform:translateY(-3px) scale(1.04)}
.tuer.ist-aktiv{color:var(--dunkel)}
.tuer.ist-aktiv:not(.ist-herz) img{box-shadow:0 0 0 2px #fff,0 0 0 4.5px var(--lila)}
@media (min-width:600px){
  .leiste{gap:14px}
  .tuer{padding:6px 12px 4px;font-size:12px;min-width:80px}
  .tuer:not(.ist-herz) img{width:54px;height:54px}
}

footer{background:var(--creme);padding:44px 0 calc(var(--leiste) + 30px);text-align:center;font-size:15px}
.fuss-logo{width:min(70vw,240px);margin:0 auto 18px}
footer nav a{margin:0 11px;white-space:nowrap}
.hinweis{color:var(--grau);font-size:14px;margin:16px 0 0}

/* ── Der Ausmal-Schieber (Bücher) ─────────────────────────────────────
   Zwei Ebenen aus demselben Bildausschnitt. Der Regler liegt unsichtbar
   über der ganzen Fläche — so bedient er sich mit Maus, Finger UND
   Tastatur, ohne dass ich Zeigerereignisse selbst nachbauen muss. */
.malen{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(96vw,340px)}
@media (min-width:900px){.malen{width:min(44vw,420px)}}
.malen-rahmen{position:relative;width:100%;aspect-ratio:1;border-radius:26px;overflow:hidden;
  background:#fff;box-shadow:0 30px 60px -24px rgba(74,63,59,.55),0 0 0 1px rgba(74,63,59,.08)}
.malen-rahmen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.malen-linien{background:#fff}

/* Die Kante zwischen beiden Welten */
.malen-kante{position:absolute;top:0;bottom:0;width:2px;background:rgba(179,59,245,.9);
  transform:translateX(-1px);pointer-events:none;transition:opacity .25s;
  box-shadow:0 0 12px rgba(179,59,245,.5)}
.malen-kante i{position:absolute;top:50%;left:50%;width:38px;height:38px;margin:-19px 0 0 -19px;
  border-radius:50%;background:var(--lila);box-shadow:0 6px 18px -4px rgba(179,59,245,.8);
  display:grid;place-items:center}
.malen-kante i::before{content:"‹ ›";color:#fff;font-size:15px;font-weight:700;letter-spacing:-1px}

/* Der eigentliche Regler: volle Fläche, unsichtbar, aber bedienbar */
#malen-regler{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;
  appearance:none;-webkit-appearance:none;background:transparent}
#malen-regler::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%;cursor:ew-resize}
#malen-regler::-moz-range-thumb{width:44px;height:100%;border:0;background:transparent;cursor:ew-resize}
#malen-regler:focus-visible{opacity:1;outline:3px solid var(--lila);outline-offset:4px}

.malen-name{margin:0;text-align:center;font-size:13.5px;color:var(--grau);line-height:1.35}
.malen-name b{display:block;font-size:17px;color:var(--dunkel);font-weight:700}
.malen-punkte{display:flex;gap:9px}
.malen-punkte button{width:10px;height:10px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(74,63,59,.22);transition:background .25s,transform .25s var(--weich)}
.malen-punkte button:hover{background:rgba(74,63,59,.4);transform:scale(1.2)}
.malen-punkte button.ist-aktiv{background:var(--lila);transform:scale(1.25)}
.malen-punkte button:focus-visible{outline:2px solid var(--lila);outline-offset:3px}

/* ── Leben in den Flächen ──────────────────────────────────────────────
   JB wollte Bewegung. Ein Hintergrundvideo schied aus: 3–6 MB Ladelast bei
   44 % Handy-Anteil, und Vollbild-Bewegtbild hinter Text ist genau die
   Kino-Optik, die wir verworfen haben. Das hier kostet 0 KB, läuft überall
   und kommt aus der eigenen Bildwelt: schwebende Punkte, die aussehen wie
   die Sterne auf den Schlummer-Covern.

   Alles über ::before/::after am Feld — kein zusätzliches Markup, und der
   Inhalt liegt selbstverständlich darüber (z-index 1 auf .feld-innen). */
.feld{isolation:isolate}
.feld-innen{position:relative;z-index:1}
.feld::before,.feld::after{content:"";position:absolute;inset:-10% -5%;z-index:0;pointer-events:none;
  background-repeat:repeat;opacity:0}

/* Zwei Ebenen mit verschiedener Größe und Geschwindigkeit — dadurch wirkt es
   räumlich statt wie eine wandernde Tapete. */
.feld.lebt::before{
  background-image:radial-gradient(circle, rgba(179,59,245,.5) 1.4px, transparent 1.6px);
  background-size:120px 120px;opacity:.5}
.feld.lebt::after{
  background-image:radial-gradient(circle, rgba(74,63,59,.34) 1px, transparent 1.2px);
  background-size:73px 91px;opacity:.42}
.feld.dunkelfeld.lebt::before{
  background-image:radial-gradient(circle, rgba(252,229,200,.75) 1.5px, transparent 1.7px);opacity:.55}
.feld.dunkelfeld.lebt::after{
  background-image:radial-gradient(circle, rgba(179,59,245,.7) 1.2px, transparent 1.4px);opacity:.5}

@media (prefers-reduced-motion:no-preference){
  .feld.lebt::before{animation:treiben-a 62s linear infinite, glimmen 7s ease-in-out infinite}
  .feld.lebt::after {animation:treiben-b 88s linear infinite, glimmen 9s ease-in-out infinite -3s}
}
@keyframes treiben-a{from{transform:translate3d(0,0,0)}      to{transform:translate3d(-120px,-60px,0)}}
@keyframes treiben-b{from{transform:translate3d(0,0,0)}      to{transform:translate3d(73px,-91px,0)}}
@keyframes glimmen{0%,100%{opacity:.22}50%{opacity:.58}}

/* Das Zeichen in der Startszene atmet mit */
@media (prefers-reduced-motion:no-preference){
  #start .zeichen{animation:schweben 9s ease-in-out infinite}
}
@keyframes schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

/* ── Nr. 6 · Sprungmarke: erst sichtbar, wenn sie den Fokus bekommt ──── */
.sprung{position:absolute;left:-9999px;top:0;z-index:100;background:var(--lila);color:#fff;
  padding:12px 20px;border-radius:0 0 14px 0;font-weight:700;text-decoration:none}
.sprung:focus{left:0}

/* ── Nr. 4 · Ein Hauptweg, ein leiser Nebenweg ───────────────────────── */
.knopf.gross{padding:16px 34px;font-size:17px}
.textlink{color:var(--grau);font-size:15px;text-decoration:none;border-bottom:1px solid rgba(122,111,106,.35);
  padding-bottom:1px;transition:color .2s,border-color .2s}
.textlink:hover{color:var(--dunkel);border-color:var(--dunkel)}

/* ── Nr. 2 · Die Beweise ─────────────────────────────────────────────── */
/* Eine Zeile, nicht mehr: Mit drei Blöcken untereinander wuchs die
   Startszene von 800 auf 882 px und passte nicht mehr auf einen Bildschirm. */
.beweise{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0 0;padding:0;justify-content:center}
.beweise div{margin:0;white-space:nowrap}
.beweise dt{font-size:17px;font-weight:700;line-height:1.15;color:var(--lila-dunkel);
  letter-spacing:-.02em}
.beweise dd{margin:0;font-size:11px;color:var(--grau);line-height:1.25}
/* Mobil muss die Zeile in 323 px passen, sonst wächst die Startszene über den
   Bildschirm und die Beweise verschwinden hinter der Leiste. Gemessen: 931 px
   bei 812 px Bildschirm, als sie zweizeilig umbrachen. */
@media (min-width:900px){.beweise dt{font-size:25px}.beweise dd{font-size:12.5px}}
@media (min-width:900px){.beweise{justify-content:flex-start;gap:8px 34px;margin-top:22px}}

/* ── Nr. 1 · Die Anmeldung ───────────────────────────────────────────── */
.anmeldung{margin:4px 0 0;max-width:30em;margin-left:auto;margin-right:auto;text-align:left}
.anmeldung label{display:block;font-size:13px;font-weight:700;letter-spacing:.04em;
  margin:0 0 8px;color:rgba(252,229,200,.9)}
.anmeldung-reihe{display:flex;gap:8px;flex-wrap:wrap}
.anmeldung input{flex:1 1 190px;min-width:0;font:inherit;font-size:16px;
  padding:13px 16px;border-radius:999px;border:1.5px solid rgba(252,229,200,.35);
  background:rgba(252,229,200,.08);color:var(--creme);transition:border-color .2s,background .2s}
.anmeldung input::placeholder{color:rgba(252,229,200,.45)}
.anmeldung input:focus{outline:none;border-color:var(--lila);background:rgba(252,229,200,.14)}
.anmeldung input:invalid:not(:placeholder-shown){border-color:#e08b8b}
.anmeldung-hinweis{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:rgba(252,229,200,.6)}
.anmeldung-danke{margin:12px 0 0;font-size:14.5px;font-weight:700;color:var(--creme);
  background:rgba(179,59,245,.22);border:1px solid rgba(179,59,245,.5);
  border-radius:14px;padding:11px 15px}
@media (min-width:900px){.anmeldung{margin-left:0;margin-right:0}}

/* Auf hellen Flächen — falls das Formular später dorthin wandert */
.creme .anmeldung label,.papier .anmeldung label,.cremehell .anmeldung label{color:var(--dunkel)}
.creme .anmeldung input,.papier .anmeldung input,.cremehell .anmeldung input{
  border-color:rgba(74,63,59,.25);background:rgba(255,255,255,.7);color:var(--dunkel)}
.creme .anmeldung-hinweis,.papier .anmeldung-hinweis,.cremehell .anmeldung-hinweis{color:var(--grau)}

/* ── Nr. 6 · Fokus überall sichtbar, nicht nur bei Knöpfen ───────────── */
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--lila);outline-offset:3px;border-radius:6px}

/* ── „So klingt das" — die vier Auftragslieder ────────────────────────── */
.beispiele-feld[hidden]{display:none}
.proben{display:grid;gap:16px;margin:32px 0 0;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.probe{margin:0;background:#fff;border:1px solid rgba(74,63,59,.09);border-radius:22px;overflow:hidden;
  box-shadow:0 18px 40px -24px rgba(74,63,59,.45);transition:transform .35s var(--weich),box-shadow .35s}
.probe:hover{transform:translateY(-4px);box-shadow:0 26px 52px -24px rgba(74,63,59,.55)}
.probe img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--creme-hell)}
.probe-leer{width:100%;aspect-ratio:1;flex:none;background:var(--creme-hell)}  /* solange das Motiv fehlt: Fläche statt Fehler-Symbol */
.probe-text{padding:16px 18px 18px}
.probe h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-.01em}
.probe .klein{margin:2px 0 12px}
.probe .hoer{background:var(--creme-hell);border-color:rgba(74,63,59,.12)}
.probe .hoer:hover{background:var(--creme)}

/* ── Stimmen — nur mit echten Zitaten einschalten (siehe HTML-Kommentar) ── */
.stimmen[hidden]{display:none}
.stimmen{display:grid;gap:16px;margin:34px 0 0;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.stimme{margin:0;background:var(--creme-hell);border-radius:20px;padding:20px 22px}
.sterne{margin:0 0 8px;font-size:17px;letter-spacing:3px;color:var(--lila)}
.stimme blockquote{margin:0 0 12px;font-size:16.5px;line-height:1.5;font-weight:600;color:var(--dunkel)}
.stimme blockquote::before{content:"„"}
.stimme blockquote::after{content:"“"}
.stimme figcaption{font-size:13px;color:var(--grau)}
.stimme .belegt{opacity:.75}

/* ── Probier es aus ───────────────────────────────────────────────────── */
.feld-innen.einspaltig{max-width:820px}
@media (min-width:900px){.feld-innen.einspaltig{grid-template-columns:1fr}}
.probier{display:grid;gap:14px;margin:8px 0 22px;max-width:30em;
  margin-left:auto;margin-right:auto}
@media (min-width:560px){.probier{grid-template-columns:1fr 1fr;gap:16px}}
@media (min-width:900px){.probier{margin-left:0;margin-right:0}}
.probier-feld label{display:block;font-size:13px;font-weight:700;letter-spacing:.03em;
  margin:0 0 7px;color:var(--grau);text-align:left}
.probier-feld input{width:100%;font:inherit;font-size:16px;padding:13px 16px;
  border-radius:16px;border:1.5px solid rgba(74,63,59,.2);background:rgba(255,255,255,.75);
  color:var(--dunkel);transition:border-color .2s,background .2s}
.probier-feld input:focus{outline:none;border-color:var(--lila);background:#fff}
.probier-feld input::placeholder{color:rgba(122,111,106,.55)}

/* Die Liedzeile — das Herzstück: hier landet der eingetippte Name */
.zeile-probe{margin:0 0 18px;max-width:30em;margin-left:auto;margin-right:auto;
  background:rgba(255,255,255,.7);border-left:3px solid var(--lila);
  border-radius:0 18px 18px 0;padding:20px 24px;text-align:left;
  font-size:clamp(18px,2.4vw,22px);line-height:1.5;font-weight:600;color:var(--dunkel);
  position:relative}
.zeile-probe b{color:var(--lila-dunkel);transition:color .2s}
.zeile-marke{position:absolute;top:-11px;left:18px;width:24px;height:24px;border-radius:50%;
  background:var(--lila);color:#fff;display:grid;place-items:center;font-size:13px}
@media (min-width:900px){.zeile-probe{margin-left:0;margin-right:0}}

.termin-antwort{margin:0 0 20px;max-width:30em;margin-left:auto;margin-right:auto;
  font-size:15px;line-height:1.5;color:var(--dunkel);
  background:rgba(179,59,245,.09);border-radius:16px;padding:13px 18px;text-align:left}
.termin-antwort[hidden]{display:none}
@media (min-width:900px){.termin-antwort{margin-left:0;margin-right:0}}

/* ── Idee 4 · Gutschein-Hinweis ───────────────────────────────────────── */
.gutschein{margin:0 0 22px;max-width:30em;margin-left:auto;margin-right:auto;
  font-size:14.5px;line-height:1.5;color:#5c514c;text-align:left;
  background:rgba(255,255,255,.6);border:1px dashed rgba(179,59,245,.45);
  border-radius:16px;padding:14px 18px}
.gutschein b{display:block;color:var(--dunkel);margin-bottom:3px}
.gutschein a{color:var(--lila-dunkel);font-weight:600;text-decoration:underline;text-underline-offset:2px}
@media (min-width:900px){.gutschein{margin-left:0;margin-right:0}}

/* ── Idee 3 · Die Werkstatt ───────────────────────────────────────────── */
.schritte{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:10px;text-align:left}
.schritte>li{margin:0}
.schritte details{background:var(--creme-hell);border-radius:18px;overflow:hidden;
  transition:background .25s}
.schritte details[open]{background:#fff;box-shadow:0 16px 36px -22px rgba(74,63,59,.4)}
.schritte summary{list-style:none;cursor:pointer;padding:16px 20px;display:flex;
  align-items:center;gap:14px;font-size:17px;font-weight:700;color:var(--dunkel)}
.schritte summary::-webkit-details-marker{display:none}
.schritte summary::after{content:"+";margin-left:auto;font-size:22px;font-weight:400;
  color:var(--lila-dunkel);transition:transform .3s var(--weich);line-height:1}
.schritte details[open] summary::after{transform:rotate(45deg)}
.schritte summary:hover{color:var(--lila-dunkel)}
.schritte summary:focus-visible{outline:3px solid var(--lila);outline-offset:-3px}
.schritte .nr{flex:none;width:28px;height:28px;border-radius:50%;background:var(--lila);
  color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700}
.schritt-inhalt{padding:0 20px 20px 62px;font-size:15.5px;line-height:1.6;color:#5c514c}
.schritt-inhalt p{margin:0 0 12px}
.schritt-inhalt p:last-child{margin-bottom:0}
.fragen{margin:0 0 12px;padding:0 0 0 20px}
.fragen li{margin:0 0 6px}
.werkstatt-text{margin:0 0 12px;background:var(--creme-hell);border-radius:14px;
  padding:16px 18px;font-family:inherit;font-size:14.5px;line-height:1.65;
  white-space:pre-wrap;color:var(--dunkel);overflow-x:auto}
.werkstatt-text b{color:var(--lila-dunkel);font-weight:700}
.werkstatt-text i{color:var(--grau);font-style:italic;font-size:13.5px}
@media (max-width:560px){.schritt-inhalt{padding-left:20px}}

/* ── Bücher-Feld: Teich-Titelbild (v38) — gleicher Rahmen wie der geparkte Ausmal-Schieber ── */
.teichbild{width:min(96vw,340px);aspect-ratio:1;object-fit:cover;border-radius:26px;display:block;
  box-shadow:0 30px 60px -24px rgba(74,63,59,.55),0 0 0 1px rgba(74,63,59,.08)}
@media (min-width:900px){.teichbild{width:min(44vw,420px)}}

/* ── Bücher-Feld v3: zwei Hälften, ein Vormerken (JB 2026-09-21) ── */
.buecher-zwei{display:grid;gap:34px;justify-items:center;margin:6px 0 10px}
@media (min-width:900px){.buecher-zwei{grid-template-columns:1fr 1fr;gap:40px;align-items:start}}
.buch-karte{text-align:center;max-width:420px;width:100%}
.buch-karte .malen,.buch-karte .teichbild{width:min(100%,380px);margin:0 auto}
.buch-karte h3{margin:0 0 14px;font-size:22px;font-weight:700;letter-spacing:-.015em}
.buch-karte .satz{margin-top:14px}
.buch-karte .satz.klein-satz{margin-left:auto;margin-right:auto}

/* ── Teichgeschichten-Vorschau (2026-09-23): blättern durch sechs Abende, Reinlesen ── */
.teich{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(100%,380px);margin:0 auto}
.teich-rahmen{position:relative;width:100%;aspect-ratio:1;border-radius:26px;overflow:hidden;
  box-shadow:0 30px 60px -24px rgba(74,63,59,.55),0 0 0 1px rgba(74,63,59,.08);background:var(--creme-hell)}
.teich-rahmen img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .35s ease}
.teich-rahmen img.wechselt{opacity:0}
.teich-pfeil{position:absolute;top:50%;width:40px;height:40px;margin-top:-20px;border:0;border-radius:50%;
  background:rgba(255,248,238,.88);color:var(--dunkel);font:700 22px/1 var(--schrift);cursor:pointer;
  box-shadow:0 6px 16px -8px rgba(74,63,59,.6);display:flex;align-items:center;justify-content:center;padding:0 0 3px}
.teich-pfeil.links{left:10px}.teich-pfeil.rechts{right:10px}
.teich-pfeil:hover{background:#fff}
.teich-pfeil:focus-visible{outline:3px solid var(--lila);outline-offset:2px}
.teich-titel{margin:18px 0 2px;font-size:19px;font-weight:700;letter-spacing:-.01em}
.teich-eck{margin:0;font-size:13px;color:var(--lila-dunkel);letter-spacing:.06em}
.reinlesen{margin:18px auto 0;max-width:380px;text-align:left}
.reinlesen summary{cursor:pointer;list-style:none;text-align:center;font-weight:700;font-size:15px;
  color:var(--lila-dunkel);padding:10px 16px;border:1.5px solid rgba(179,59,245,.35);border-radius:999px}
.reinlesen summary::-webkit-details-marker{display:none}
.reinlesen summary::after{content:" ↓";font-weight:600}
.reinlesen[open] summary::after{content:" ↑"}
.reinlesen summary:focus-visible{outline:3px solid var(--lila);outline-offset:3px}
.lese-seite{margin-top:14px;background:#fff;border-radius:18px;padding:22px 22px 18px;
  box-shadow:0 18px 40px -26px rgba(74,63,59,.55),0 0 0 1px rgba(74,63,59,.06);font-size:16px;line-height:1.6}
.lese-seite p{margin:0 0 11px}
.lese-kopf{font-weight:700;color:var(--lila-dunkel);font-size:14px;letter-spacing:.02em}
.lese-spot{display:block;width:120px;height:auto;margin:4px auto 12px}
.lese-weiter{text-align:center;color:var(--grau)}
.lese-ritual{margin-top:14px!important;padding-top:12px;border-top:1px dashed rgba(74,63,59,.2);text-align:center;color:var(--grau);font-size:15px}
.lese-ritual i{color:var(--dunkel)}
.teich-ki{margin:14px auto 0;max-width:380px}

/* ── KI-Kennzeichnung am Player (2026-09-24, Rechtsprüfung Nr. 8, Art. 50 KI-VO) ── */
.ki-zeile{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--grau);
  border:1px solid rgba(74,63,59,.18);border-radius:999px;padding:2px 9px;margin-left:6px;vertical-align:middle}
p.ki-zeile.mitte{display:table;margin:10px auto 0}