/* =========================================================================
   KICHERHAUSEN — Designsystem
   Eine bunte, lachende Dorfwelt für Kinder (4–11). Mobile-first.
   Eine Quelle für alle Farben, Abstände, Schriften.
   ========================================================================= */

/* ---- Schrift: Plus Jakarta Sans (Text) wie playlist.djseip.com + Baloo 2 (Titel) ---- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Baloo+2:wght@600;700;800&display=swap');

:root{
  /* Farbwelt – Benjis Welt, hell & bunt (nicht dunkel) */
  --senf:#f5b53d;          /* Benjis Fell, Hauptfarbe */
  --senf-tief:#e09a1f;
  --pflaume:#5b3a82;       /* Abendhimmel, Geheimnis */
  --pflaume-hell:#8b6db5;
  --salbei:#5fc98a;        /* Wiese (etwas satter) */
  --salbei-tief:#34a567;
  --pink:#ff5d9e;          /* Kicher-Akzent, Spaß */
  --pink-tief:#e0407e;
  --himmel:#7cc7ff;        /* Wolkenhimmel */
  --himmel-tief:#4aa8f0;
  --creme:#fff8ee;         /* warmer Hintergrund */
  --creme-2:#fff0db;
  --nacht:#2e2348;         /* Text dunkel (leicht wärmer) */

  --weiss:#ffffff;
  --karte:#ffffff;
  --rand:#f3e9d8;          /* nur noch Haarlinie, kein dicker Rahmen */
  --linie:rgba(91,58,130,.08);
  --muted:#8d83a6;
  --muted-2:#b3abc4;

  /* Abstände */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px;

  /* Radien – rund und freundlich */
  --r-s:16px; --r:22px; --r-l:28px; --r-xl:36px; --r-pill:999px; --r-btn:14px;

  /* Schatten – weich & geschichtet (Premium statt aufgeklebt) */
  --schatten-xs:0 2px 8px rgba(91,58,130,.06);
  --schatten:0 8px 26px rgba(91,58,130,.10);
  --schatten-l:0 20px 50px rgba(91,58,130,.18);
  --schatten-knopf:0 6px 0;       /* dicker Spielzeug-Knopf */

  /* Glow-Ringe pro Farbe (Haarlinie + farbiger Schein, kein Rahmen) */
  --glow-senf:0 0 0 1px rgba(245,181,61,.30), 0 12px 34px rgba(224,154,31,.18);
  --glow-salbei:0 0 0 1px rgba(95,201,138,.30), 0 12px 34px rgba(52,165,103,.16);
  --glow-pink:0 0 0 1px rgba(255,93,158,.30), 0 12px 34px rgba(224,64,126,.16);
  --glow-himmel:0 0 0 1px rgba(124,199,255,.32), 0 12px 34px rgba(74,168,240,.16);

  /* Tap-Flächen für kleine Finger */
  --tap:72px;
  --tap-gross:96px;

  --font-titel:'Baloo 2', system-ui, sans-serif;
  --font-text:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; height:100%}
html{ -webkit-text-size-adjust:100% }
body{
  font-family:var(--font-text);
  color:var(--nacht);
  background:
    radial-gradient(120% 80% at 50% 0%, #aee0ff 0%, var(--himmel) 34%, transparent 72%) no-repeat top center / 100% 620px,
    linear-gradient(180deg, var(--creme) 0%, var(--creme-2) 100%);
  min-height:100dvh;
  overflow-x:hidden;
  line-height:1.55;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.num,.tabular{ font-variant-numeric:tabular-nums }

/* sanfte Hügel-Silhouette unten, Dorf-Gefühl */
body::after{
  content:""; position:fixed; left:0; right:0; bottom:0; height:120px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(80% 120px at 20% 100%, var(--salbei) 0 60%, transparent 61%),
    radial-gradient(90% 130px at 70% 100%, var(--salbei-tief) 0 60%, transparent 61%),
    radial-gradient(70% 100px at 95% 100%, var(--salbei) 0 60%, transparent 61%);
  opacity:.45;
}

.huelle{position:relative; z-index:1; max-width:760px; margin:0 auto;
  padding:max(var(--s4),env(safe-area-inset-top)) var(--s4) calc(var(--s12) + env(safe-area-inset-bottom))}
/* Tablet: mehr Luft, breiterer Container */
@media(min-width:768px){
  .huelle{ max-width:920px; padding-left:var(--s6); padding-right:var(--s6) }
}
/* Desktop: volle moderne Breite, Inhalt nutzt die Fläche */
@media(min-width:1100px){
  .huelle{ max-width:1140px; padding-left:var(--s8); padding-right:var(--s8) }
}

/* =========================================================================
   KOPF — Logo + Benji
   ========================================================================= */
.kopf{display:flex; align-items:center; gap:var(--s3); padding:var(--s3) 0 var(--s5); position:relative}
.kopf-marke{ display:flex; align-items:center; gap:var(--s3); text-decoration:none; min-width:0 }
.kopf .benji-logo{width:64px; height:64px; flex:0 0 auto; display:flex; align-items:center; justify-content:center}
.kopf .benji-logo .logo-img{ width:100%; height:100%; object-fit:contain; background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; filter:drop-shadow(0 6px 10px rgba(224,154,31,.4)) }
.kopf .kopf-h1{
  margin:0; font-family:var(--font-titel); font-weight:800; line-height:.95; display:block;
  font-size:clamp(24px,6vw,38px); color:var(--nacht);
}
.kopf .kopf-h1 .ort{ color:var(--muted); display:block; font-size:.72em }
.kopf .kopf-h1 .ort .ort-name{
  background:linear-gradient(110deg, var(--senf-tief) 0%, var(--pink) 55%, var(--pflaume) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ---- Hamburger-Menü (alle Geräte) ---- */
.menu-knopf{
  margin-left:auto; flex:0 0 auto; width:52px; height:52px; border-radius:var(--r-btn);
  background:var(--weiss); box-shadow:var(--schatten); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition:transform .14s ease; -webkit-tap-highlight-color:transparent; z-index:60;
}
.menu-knopf:active{ transform:scale(.93) }
.menu-balken{ width:24px; height:3px; border-radius:2px; background:var(--pflaume); transition:transform .25s ease, opacity .2s ease }
.menu-schalter:checked ~ .menu-knopf .menu-balken:nth-child(1){ transform:translateY(8px) rotate(45deg) }
.menu-schalter:checked ~ .menu-knopf .menu-balken:nth-child(2){ opacity:0 }
.menu-schalter:checked ~ .menu-knopf .menu-balken:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }

.haupt-menu{
  position:fixed; top:0; right:0; height:100%; width:min(82vw,320px); z-index:55;
  background:var(--weiss); box-shadow:-12px 0 40px rgba(46,35,72,.18);
  display:flex; flex-direction:column; gap:4px; padding:88px var(--s5) var(--s6);
  transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.menu-schalter:checked ~ .haupt-menu{ transform:translateX(0) }
.menu-overlay{
  position:fixed; inset:0; z-index:50; background:rgba(46,35,72,.42);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; cursor:pointer;
}
.menu-schalter:checked ~ .menu-overlay{ opacity:1; visibility:visible }
.menu-link{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-family:var(--font-titel); font-weight:800; font-size:19px; color:var(--nacht);
  text-decoration:none; padding:14px 16px; border-radius:var(--r-btn); transition:background .15s ease, color .15s ease;
}
.menu-link:hover{ background:var(--creme-2) }
.menu-link.aktiv{ color:var(--pink-tief); background:rgba(255,93,158,.10) }
.menu-bald{ color:var(--muted-2); cursor:default }
.menu-bald:hover{ background:none }
.menu-badge{
  font-family:var(--font-text); font-weight:800; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--senf-tief); background:var(--creme-2); border:1px solid var(--rand);
  padding:3px 9px; border-radius:var(--r-pill);
}

/* =========================================================================
   STARTSEITE — drei große Tore
   ========================================================================= */
/* =========================================================================
   HERO — großer linksbündiger Einstieg (PlaylistDock-Stil, hell & bunt)
   ========================================================================= */
.hero{
  display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s4);
  align-items:center; margin:var(--s4) 0 var(--s8);
}
@media(min-width:680px){
  .hero{ grid-template-columns:1.15fr .85fr; gap:var(--s8); margin:var(--s4) 0 var(--s10) }
}
@media(min-width:1100px){
  .hero{ grid-template-columns:1.1fr .9fr; gap:var(--s12); margin:var(--s8) 0 var(--s16); align-items:center }
}
.hero-titel{
  margin:0 0 var(--s4); font-family:var(--font-titel); font-weight:800;
  font-size:clamp(22px,5.6vw,64px); line-height:1.04; letter-spacing:-.02em; color:var(--nacht);
  text-wrap:balance;
}
.hero-titel .akzent{
  background:linear-gradient(110deg, var(--senf-tief) 0%, var(--pink) 55%, var(--pflaume) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-lead{
  margin:0 0 var(--s5); color:var(--muted); font-weight:600;
  font-size:clamp(13px,3vw,19px); line-height:1.45; max-width:46ch;
}
.hero-aktion{ display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; margin-bottom:0 }
.hero-aktion .knopf-gross{ white-space:nowrap }
.knopf-text{ font-family:var(--font-titel); font-weight:700; font-size:clamp(13px,2.6vw,16px); color:var(--pflaume); text-decoration:none; white-space:nowrap }
.knopf-text:hover{ color:var(--pflaume-hell) }
.hero-figur{ justify-self:center; width:100%; min-width:0 }
.hero-figur .benji-buehne{ width:100%; max-width:340px; margin:0 auto; display:block }
.hero-figur .benji-img{ width:100%; height:auto }
.hero-figur svg{ filter:drop-shadow(0 16px 30px rgba(224,154,31,.25)) }
@media(min-width:1100px){
  .hero-figur .benji-buehne{ max-width:420px }
}
/* Mobile: kompakter Button, damit in der schmalen Spalte nichts überläuft */
@media(max-width:520px){
  .hero{ gap:var(--s3) }
  .hero-aktion{ flex-direction:column; align-items:flex-start; gap:10px }
  .knopf-gross{ font-size:16px; padding:0 var(--s5); min-height:48px }
  .hero-figur .benji-buehne{ max-width:100% }
  .hero-buehne-funke{ display:none }
}
/* Sehr schmale Geräte (≤360px): Hero einspaltig stapeln, damit Benji nicht
   zur Briefmarke schrumpft. Benji zuerst, dann Text – freundlicher Einstieg. */
@media(max-width:360px){
  .hero{ grid-template-columns:1fr; gap:var(--s4); text-align:center; margin-bottom:var(--s6) }
  .hero-figur{ order:-1 }
  .hero-figur .benji-buehne{ max-width:200px }
  .hero-text{ display:flex; flex-direction:column; align-items:center }
  .hero-lead{ margin-left:auto; margin-right:auto }
  .hero-aktion{ align-items:center }
  .hero-sprechblase{ left:50%; right:auto; transform-origin:bottom center }
  .hero-sprechblase::after{ left:50%; right:auto; margin-left:-8px }
}

/* =========================================================================
   STORY-Abschnitt (aktuelle Folge) + KOMMENDE Folgen
   ========================================================================= */
.story, .kommend{ margin:0 0 var(--s10) }
.story-head{ margin-bottom:var(--s4) }
.abschnitt-label{
  display:inline-block; font-family:var(--font-text); font-weight:800; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--pflaume);
  margin-bottom:var(--s2);
}
.abschnitt-titel{
  margin:0; font-family:var(--font-titel); font-weight:800; font-size:clamp(22px,5.5vw,32px);
  letter-spacing:-.02em; color:var(--nacht); line-height:1.1;
}

/* Story-Karte: aktuelle Folge groß, randlos und clean */
.story-karte{
  display:grid; grid-template-columns:1fr; gap:var(--s5);
  background:var(--karte); border-radius:var(--r-l); padding:var(--s6);
  box-shadow:var(--schatten); border:none; position:relative; overflow:hidden;
}
@media(min-width:560px){ .story-karte{ grid-template-columns:auto 1fr; align-items:center } }
.story-cover{
  position:relative; width:96px; height:96px; flex:0 0 auto; border-radius:var(--r);
  display:flex; align-items:center; justify-content:center; justify-self:start;
  background:var(--ep-farbe,var(--senf));
  background-image:linear-gradient(150deg, rgba(255,255,255,.25), rgba(91,58,130,.18));
  box-shadow:var(--schatten-xs);
}
@media(min-width:768px){
  .story-cover{ width:130px; height:130px }
  .story-cover svg{ width:84px; height:84px }
  .story-karte{ padding:var(--s8); gap:var(--s8) }
}
.story-cover svg{ width:64px; height:64px }
.story-inhalt{ position:relative }
.story-dauer{ display:inline-block; font-weight:700; font-size:13px; color:var(--muted); margin-bottom:var(--s2) }
.story-text{ margin:0 0 var(--s5); color:var(--nacht); font-weight:500; font-size:clamp(14px,3.4vw,16px); line-height:1.55 }
.story-aktion{ display:flex; flex-wrap:wrap; gap:var(--s3) }
.story-aktion .btn-play{ flex:0 0 auto }

/* Kommende Folgen: saubere Tour-Liste (Songkick/Spotify-Stil) */
.folgen-liste{ list-style:none; margin:0; padding:0; border-radius:var(--r-l); overflow:hidden;
  background:var(--karte); box-shadow:var(--schatten) }
.folge-zeile{ position:relative; border-top:1px solid var(--linie) }
.folge-zeile:first-child{ border-top:none }
.folge-details{ width:100% }
.folge-haupt{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:var(--s4);
  padding:var(--s4) var(--s5); cursor:pointer; list-style:none; user-select:none;
  transition:background .15s ease;
}
.folge-haupt-static{ cursor:default }
.folge-haupt::-webkit-details-marker{ display:none }
.folge-details:hover .folge-haupt{ background:rgba(91,58,130,.035) }
.folge-num{
  display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex:0 0 auto;
  border-radius:12px; font-family:var(--font-titel); font-weight:800; font-size:18px; color:#fff;
  background:var(--ep-farbe,var(--pflaume-hell));
  background-image:linear-gradient(150deg, rgba(255,255,255,.25), rgba(0,0,0,.12));
}
.folge-info{ min-width:0; display:flex; flex-direction:column; gap:2px }
.folge-titel{ font-family:var(--font-titel); font-weight:800; font-size:clamp(15px,3.6vw,18px); letter-spacing:-.01em; color:var(--nacht); line-height:1.2 }
.folge-teaser{ color:var(--muted); font-weight:500; font-size:13px; line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical }
.folge-status{
  flex:0 0 auto; font-family:var(--font-titel); font-weight:800; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ep-farbe,var(--pflaume)); white-space:nowrap;
}
.folge-pfeil{ flex:0 0 auto; color:var(--muted-2); display:flex; transition:transform .25s ease }
.folge-details[open] .folge-pfeil{ transform:rotate(180deg) }
.folge-vorschau{ padding:0 var(--s5) var(--s5) calc(40px + var(--s5) + var(--s4)); animation:spoiler-auf .3s ease }
@media(max-width:520px){ .folge-vorschau{ padding-left:var(--s5) } .folge-teaser{ -webkit-line-clamp:2 } }

/* Spoiler-Inhalt (in der Tour-Liste) */
@keyframes spoiler-auf{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:translateY(0) } }
.spoiler-text{
  margin:0 0 var(--s3); color:var(--nacht); font-weight:500; font-size:14px; line-height:1.55;
  background:var(--creme); border-radius:var(--r-s); padding:12px 14px;
}
.spoiler-audio{ display:flex; flex-direction:column; gap:6px }
.spoiler-audio-label{ font-weight:700; font-size:13px; color:var(--muted) }
.spoiler-audio audio{ width:100%; height:38px; max-width:360px }

/* Nächste-Folge-Teaser am Spielende */
.naechste-folge{
  background:var(--creme); border:1px solid var(--rand); border-radius:var(--r);
  padding:var(--s4) var(--s5); margin:0 0 var(--s5); max-width:34ch; text-align:center; flex:0 0 auto;
}
.nf-label{ display:block; font-family:var(--font-titel); font-weight:800; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--senf-tief); margin-bottom:4px }
.nf-titel{ display:block; font-family:var(--font-titel); font-weight:800; font-size:18px; color:var(--nacht); margin-bottom:6px }
.nf-text{ margin:0; color:var(--muted); font-weight:500; font-size:14px; line-height:1.5 }
@media(max-width:560px){
  .naechste-folge{ padding:var(--s3) var(--s4); margin-bottom:var(--s4) }
  .nf-titel{ font-size:16px }
  .nf-text{ font-size:13px }
  .overlay .knopf-gross{ flex:0 0 auto; min-height:48px; font-size:16px }
}

/* Sektions-Überschrift über den drei Toren */
.sektion-titel{
  font-family:var(--font-titel); font-weight:800; font-size:clamp(20px,5vw,28px);
  letter-spacing:-.02em; color:var(--nacht); margin:0 0 var(--s4);
}

.tore{display:grid; gap:var(--s4); grid-template-columns:1fr}
@media(min-width:560px){ .tore{grid-template-columns:1fr 1fr} .tor.gross{grid-column:1 / -1} }
@media(min-width:900px){ .tore{grid-template-columns:repeat(3,1fr)} .tor.gross{grid-column:auto} .tor{flex-direction:column; align-items:flex-start; text-align:left; min-height:0; gap:var(--s4)} .tor .tor-text{flex:0 0 auto} .tor .tor-pfeil{margin-left:0; margin-top:var(--s2)} }

.tor{
  position:relative; display:flex; align-items:center; gap:var(--s5);
  text-decoration:none; color:var(--nacht);
  background:var(--karte);
  border-radius:var(--r-l); padding:var(--s6);
  box-shadow:var(--schatten-xs), 0 0 0 1px var(--linie);
  min-height:var(--tap-gross); overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.8,.3,1.2), box-shadow .22s ease;
}
/* farbiger Tint-Schleier oben-links, sanft auslaufend (kein color-mix nötig) */
.tor::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 140% at 0% 0%, var(--tor-farbe,var(--senf)) 0%, transparent 55%);
  opacity:.14;
}
.tor:hover,.tor:focus-visible{
  transform:translateY(-5px);
  box-shadow:var(--tor-glow,var(--glow-senf)), 0 22px 48px rgba(91,58,130,.16);
  outline:none;
}
.tor:hover::before{ opacity:.20 }
.tor .tor-icon{ position:relative; width:80px; height:80px; flex:0 0 auto;
  filter:drop-shadow(0 6px 14px color-mix(in srgb, var(--tor-farbe,var(--senf)) 40%, transparent)); }
.tor .tor-icon-benji{ display:flex; align-items:center; justify-content:center }
.tor .tor-benji-img{ width:100%; height:100%; object-fit:contain; background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important }
.tor .tor-text{ position:relative; flex:1 1 auto; min-width:0 }
.tor .tor-text h3{ margin:0; font-family:var(--font-titel); font-weight:800; font-size:clamp(22px,5.5vw,29px); letter-spacing:-.02em }
.tor .tor-text p{ margin:5px 0 0; color:var(--muted); font-weight:600; font-size:clamp(13px,3.2vw,15px); letter-spacing:-.01em }
.tor .tor-pfeil{ position:relative; margin-left:auto; color:var(--tor-farbe,var(--senf)); flex:0 0 auto; transition:transform .22s ease }
.tor:hover .tor-pfeil{ transform:translateX(4px) }

/* =========================================================================
   ZURÜCK-LEISTE (Unterseiten)
   ========================================================================= */
.zurueck-leiste{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s5)}
.btn-zurueck{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:var(--font-titel); font-weight:700; font-size:18px; color:var(--nacht);
  background:var(--weiss); border:1px solid var(--rand); border-radius:var(--r-pill); box-shadow:var(--schatten-xs);
  padding:10px 20px 10px 14px; min-height:56px; box-shadow:var(--schatten); transition:transform .14s;
}
.btn-zurueck:active{transform:scale(.95)}
.seiten-titel{font-family:var(--font-titel); font-weight:800; font-size:clamp(22px,6vw,32px); margin:0}

/* =========================================================================
   FALLAKTEN / EPISODEN
   ========================================================================= */
.akten{display:grid; gap:var(--s4); grid-template-columns:1fr}
@media(min-width:768px){ .akten{grid-template-columns:1fr 1fr} }
.akte{
  position:relative; background:var(--karte); border-radius:var(--r-l);
  border:1px solid var(--rand); box-shadow:var(--schatten); overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.8,.3,1.2), box-shadow .22s ease;
}
.akte:hover{ transform:translateY(-4px); box-shadow:var(--schatten-l) }
.akte .akte-kopf{
  display:flex; align-items:center; gap:var(--s4); padding:var(--s5);
  background:var(--ep-farbe,var(--senf));
  background-image:linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(91,58,130,.28) 100%);
}
.akte .ep-cover{
  width:84px; height:84px; flex:0 0 auto; border-radius:var(--r); background:rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px);
}
.akte .ep-cover svg{width:64px; height:64px}
.akte .ep-titelblock{flex:1 1 auto; min-width:0; color:#fff}
.akte .ep-nummer{font-weight:800; font-size:13px; letter-spacing:1px; text-transform:uppercase; opacity:.9}
.akte .ep-titelblock h3{margin:2px 0 0; font-family:var(--font-titel); font-weight:800; font-size:clamp(20px,5vw,26px); text-shadow:0 2px 8px rgba(0,0,0,.18); overflow-wrap:anywhere; word-break:break-word; hyphens:auto}
.akte .ep-dauer{display:inline-flex; align-items:center; gap:5px; margin-top:4px; font-weight:700; font-size:13px; color:#fff; opacity:.95}

.akte .akte-koerper{padding:var(--s5)}
.akte .ep-text{margin:0 0 var(--s4); color:var(--nacht); font-weight:600; font-size:15px}

.akte-knoepfe{display:flex; flex-wrap:wrap; gap:var(--s3)}
.btn-play{
  flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  font-family:var(--font-titel); font-weight:800; font-size:18px; color:#fff; border:none; text-decoration:none;
  background:linear-gradient(180deg, #1ed760 0%, #1db954 100%);
  border-radius:var(--r-btn); padding:0 var(--s6); min-height:var(--tap);
  box-shadow:var(--schatten-knopf) #169c46, 0 14px 30px rgba(29,185,84,.32); transition:transform .12s, box-shadow .12s;
}
.btn-play:hover{ box-shadow:var(--schatten-knopf) #169c46, 0 18px 38px rgba(29,185,84,.42) }
.btn-play:active{transform:translateY(4px); box-shadow:0 2px 0 #169c46, 0 8px 18px rgba(29,185,84,.3)}
.btn-stream{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:var(--font-titel); font-weight:700; font-size:16px; color:var(--nacht);
  background:var(--weiss); border:1px solid var(--rand); border-radius:var(--r-btn); box-shadow:var(--schatten-xs);
  padding:0 var(--s5); min-height:var(--tap);
}

/* „Bald"-Akte: verschlossen */
.akte.bald{opacity:.96}
.akte.bald .akte-kopf{filter:grayscale(.35)}
.schloss{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-titel); font-weight:700;
  font-size:16px; color:var(--muted); background:var(--creme-2); border-radius:var(--r-pill);
  padding:0 var(--s5); min-height:var(--tap); width:100%; justify-content:center;
}


/* =========================================================================
   SPIEL — Wimmel-Suche
   ========================================================================= */
.spiel-buehne{position:relative; background:var(--weiss); border-radius:var(--r-l); border:1px solid var(--rand);
  box-shadow:var(--schatten-l); overflow:visible; padding:var(--s5); max-width:720px; margin:0 auto}
/* Benji sitzt in der Szene (unten links) mit Sprechblase darüber */
.szene-wrap{ position:relative; margin-bottom:var(--s4) }
.spiel-benji{
  position:absolute; left:0; bottom:0; z-index:5; width:34%; max-width:160px; min-width:104px;
  pointer-events:none; display:flex; flex-direction:column; align-items:center;
}
.spiel-benji .benji-img{
  width:78%; height:auto; margin-left:-4%;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.22));
  animation:benji-wippen 3.2s ease-in-out infinite;
}
.sprechblase{
  position:relative; align-self:stretch; margin-bottom:-6px;
  background:#fff; border-radius:16px; box-shadow:0 6px 18px rgba(91,58,130,.18);
  padding:9px 13px; display:flex; flex-direction:column; gap:3px;
}
.sprechblase::after{
  content:""; position:absolute; left:34%; bottom:-9px; width:18px; height:18px;
  background:#fff; transform:rotate(45deg); border-radius:0 0 5px 0;
  box-shadow:4px 4px 8px rgba(91,58,130,.10);
}
.sprechblase .sprech{
  font-family:var(--font-titel); font-weight:800; font-size:clamp(12px,3vw,15px);
  color:var(--nacht); line-height:1.2;
}
.sprechblase .such-zaehler{
  font-family:var(--font-titel); font-weight:800; font-size:clamp(13px,3.2vw,16px); color:var(--pink-tief);
}
@media(max-width:420px){
  .spiel-benji{ width:30%; min-width:90px }
  .sprechblase{ padding:7px 10px }
}

.szene{position:relative; width:100%; border-radius:var(--r); overflow:hidden; background:linear-gradient(180deg,#bfe8ff,#dff5e3 70%,#cdeccf); aspect-ratio:4/3; touch-action:manipulation}
.szene svg{position:absolute; inset:0; width:100%; height:100%}
.fund{position:absolute; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  -webkit-user-select:none; user-select:none; z-index:3; animation:fundSchweben 2.8s ease-in-out infinite}
/* unsichtbares größeres Tippfeld um jedes Item (leichteres Treffen für Kinderfinger) */
.fund::after{ content:""; position:absolute; inset:-10px }
.fund svg{ pointer-events:none; width:100%; height:100%; display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)) }
@keyframes fundSchweben{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%    {transform:translateY(-5px) rotate(2deg)}
}
.fund.gefunden{animation:fundPop .52s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes fundPop{
  0%  {transform:scale(1) rotate(0)}
  18% {transform:scale(.82) rotate(-4deg)}          /* Anticipation: kurz zusammenducken */
  46% {transform:scale(1.45) rotate(5deg)}          /* Stretch: überschießen */
  68% {transform:scale(1.2) rotate(-2deg)}
  100%{transform:scale(0) rotate(0);opacity:0}      /* einsammeln */
}
.ring{position:absolute; border:4px solid var(--pink); border-radius:50%; pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.4)}
.ring.an{animation:ringPop .6s ease-out}
@keyframes ringPop{0%{opacity:1;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}

.spiel-fortschritt{display:flex; gap:var(--s4); align-items:center; justify-content:center; margin-top:var(--s5); flex-wrap:wrap}
.stationen{display:flex; gap:8px}
.stationen i{width:16px;height:16px;border-radius:50%;background:var(--rand);transition:all .3s}
.stationen i.an{background:var(--senf); transform:scale(1.2)}
.stationen i.fertig{background:var(--salbei-tief)}

/* Abzeichen-Sammlung */
.abzeichen-reihe{display:flex; gap:var(--s3); flex-wrap:wrap; justify-content:center; margin-top:var(--s4)}
.abzeichen{width:64px; height:64px; opacity:.25; filter:grayscale(1); transition:all .4s}
.abzeichen.hat{opacity:1; filter:none; animation:abzeichenRein .6s cubic-bezier(.2,.9,.3,1.5)}
@keyframes abzeichenRein{
  0%  {transform:scale(0) rotate(-30deg)}
  60% {transform:scale(1.25) rotate(8deg)}
  100%{transform:scale(1) rotate(0)}
}

/* Overlays (Start, Geschafft) */
.overlay{position:absolute; top:0; left:0; right:0; min-height:100%; height:auto; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:var(--s6) var(--s5); background:var(--weiss); border-radius:var(--r-l)}
/* Karte wächst mit dem Ende-Overlay (statt es abzuschneiden) */
.spiel-buehne.zeigt-ende{ min-height:0 }
.spiel-buehne.zeigt-ende .szene-wrap,
.spiel-buehne.zeigt-ende .spiel-fortschritt,
.spiel-buehne.zeigt-ende .abzeichen-reihe{ display:none }
.spiel-buehne.zeigt-ende #spielEnde{ position:relative; min-height:auto }
.overlay .benji-gross{width:120px; height:120px; margin-bottom:var(--s3); flex:0 0 auto}
.overlay h3{font-family:var(--font-titel); font-weight:800; font-size:clamp(24px,6vw,34px); margin:0 0 var(--s2); letter-spacing:-.02em}
.overlay p{color:var(--muted); font-weight:600; font-size:16px; margin:0 0 var(--s5); max-width:34ch; line-height:1.5}
/* Auf kleinen Schirmen kompakter, damit Benji oben und Knopf unten sichtbar bleiben */
@media(max-width:560px){
  .overlay{ justify-content:flex-start; padding:var(--s4) var(--s4) var(--s5) }
  .overlay .benji-gross{ width:78px; height:78px; margin-bottom:var(--s2) }
  .overlay h3{ font-size:clamp(20px,6vw,26px) }
  .overlay p{ font-size:14px; margin-bottom:var(--s3) }
}

/* =========================================================================
   GROSSER SPIELZEUG-KNOPF (Start, Weiter, …)
   ========================================================================= */
.knopf-gross{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; border:none;
  font-family:var(--font-titel); font-weight:800; font-size:20px; color:#fff; letter-spacing:-.01em; white-space:nowrap;
  background:linear-gradient(180deg,var(--pink) 0%,#e0407e 100%);
  border-radius:var(--r-btn); padding:0 var(--s10); min-height:var(--tap);
  box-shadow:var(--schatten-knopf) #c02e68, 0 14px 30px rgba(224,64,126,.32); transition:transform .12s, box-shadow .12s; text-decoration:none;
}
.knopf-gross:hover{ box-shadow:var(--schatten-knopf) #c02e68, 0 18px 38px rgba(224,64,126,.42) }
.knopf-gross:active{transform:translateY(4px); box-shadow:0 2px 0 #c02e68, 0 8px 18px rgba(224,64,126,.3)}
.knopf-gross.senf{background:linear-gradient(180deg,var(--senf),var(--senf-tief)); box-shadow:var(--schatten-knopf) var(--senf-tief), 0 14px 30px rgba(224,154,31,.32)}
.knopf-gross.senf:hover{ box-shadow:var(--schatten-knopf) var(--senf-tief), 0 18px 38px rgba(224,154,31,.42) }
.knopf-gross.senf:active{box-shadow:0 2px 0 var(--senf-tief), 0 8px 18px rgba(224,154,31,.3)}

/* =========================================================================
   BENJI-SEITE
   ========================================================================= */
.benji-held{text-align:center; background:var(--karte); border-radius:var(--r-l); border:1px solid var(--rand);
  box-shadow:var(--schatten); padding:var(--s8) var(--s5); margin-bottom:var(--s5)}
.benji-held .figur{width:200px; max-width:60%; margin:0 auto var(--s3)}
.benji-held .figur .benji-buehne{ width:100%; display:block }
.benji-held .figur .benji-img{ width:100%; height:auto }
.benji-held h2{font-family:var(--font-titel); font-weight:800; font-size:clamp(26px,6vw,36px); margin:0 0 4px}
.benji-held .rolle{color:var(--senf-tief); font-weight:800; font-family:var(--font-titel); font-size:18px}

.steckbrief{display:grid; gap:var(--s3); grid-template-columns:1fr; margin-top:var(--s5)}
@media(min-width:520px){ .steckbrief{grid-template-columns:1fr 1fr} }
.brief-zeile{display:flex; align-items:center; gap:var(--s3); background:var(--karte); border:1px solid var(--rand);
  border-radius:var(--r); padding:var(--s4); box-shadow:var(--schatten)}
.brief-zeile .bz-icon{width:48px;height:48px;flex:0 0 auto}
.brief-zeile b{display:block; font-family:var(--font-titel); font-size:16px}
.brief-zeile span{color:var(--muted); font-weight:700; font-size:14px}

/* Pups-o-Meter Gag */
.pupsmeter{text-align:center; margin-top:var(--s6); background:var(--karte); border:1px solid var(--rand);
  border-radius:var(--r-l); box-shadow:var(--schatten); padding:var(--s6)}
.pupsmeter h3{font-family:var(--font-titel); font-size:22px; margin:0 0 var(--s4)}
.freunde{display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); margin-top:var(--s5)}
.freund{background:var(--karte); border:1px solid var(--rand); border-radius:var(--r); padding:var(--s4); text-align:center; box-shadow:var(--schatten)}
.freund svg{width:72px;height:72px}
.freund b{display:block; font-family:var(--font-titel); margin-top:6px}

/* ---- Erzählerin (Mandy) auf der Benji-Seite ---- */
.erzaehlerin{ margin-top:var(--s10) }
.erz-karte{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s4);
  background:var(--karte); border-radius:var(--r-l); box-shadow:var(--schatten); padding:var(--s8) var(--s6);
}
@media(min-width:600px){
  .erz-karte{ flex-direction:row; text-align:left; align-items:center; gap:var(--s8); padding:var(--s8) }
}
.erz-bild{
  flex:0 0 auto; width:140px; height:140px; border-radius:50%; overflow:hidden;
  box-shadow:0 10px 26px rgba(91,58,130,.22); background:var(--creme-2);
  display:flex; align-items:center; justify-content:center;
  border:4px solid #fff;
}
.erz-bild img{ width:100%; height:100%; object-fit:cover; display:block }
.erz-platzhalter{
  font-family:var(--font-titel); font-weight:800; font-size:54px;
  background:linear-gradient(150deg, var(--senf-tief), var(--pink) 60%, var(--pflaume));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.erz-inhalt{ min-width:0 }
.erz-rolle{
  display:inline-block; font-family:var(--font-text); font-weight:800; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--pflaume); margin-bottom:6px;
}
.erz-name{ margin:0 0 var(--s3); font-family:var(--font-titel); font-weight:800; font-size:clamp(22px,5vw,28px); color:var(--nacht) }
.erz-text{ margin:0; color:var(--nacht); font-weight:500; font-size:clamp(14px,3.4vw,16px); line-height:1.6 }

/* =========================================================================
   ADMIN
   ========================================================================= */
.admin-box{background:var(--karte); border:1px solid var(--rand); border-radius:var(--r-l); box-shadow:var(--schatten); padding:var(--s6); margin-bottom:var(--s5)}
.admin-box h2{font-family:var(--font-titel); margin:0 0 var(--s4)}
.feld{margin-bottom:var(--s4)}
.feld label{display:block; font-weight:800; font-family:var(--font-titel); margin-bottom:6px; font-size:15px}
.feld input, .feld textarea, .feld select{
  width:100%; font-family:var(--font-text); font-size:16px; font-weight:600;
  border:2px solid var(--rand); border-radius:var(--r-s); padding:14px 16px; background:var(--creme);
}
.feld input:focus, .feld textarea:focus, .feld select:focus{outline:none; border-color:var(--senf)}
.feld textarea{min-height:90px; resize:vertical}
.feld-reihe{display:grid; gap:var(--s4); grid-template-columns:1fr 1fr}
.admin-liste{display:grid; gap:var(--s3)}
.admin-zeile{display:flex; align-items:center; gap:var(--s3); background:var(--karte); border:1px solid var(--rand); border-radius:var(--r); padding:var(--s4); box-shadow:var(--schatten)}
.admin-zeile .az-farbe{width:36px;height:36px;border-radius:10px;flex:0 0 auto}
.admin-zeile .az-info{flex:1 1 auto; min-width:0}
.admin-zeile .az-info b{font-family:var(--font-titel)}
.admin-zeile .az-info span{display:block; color:var(--muted); font-size:13px; font-weight:700}
.tag{display:inline-block; font-size:12px; font-weight:800; padding:3px 10px; border-radius:var(--r-pill)}
.tag.verfuegbar{background:#e3f7ea; color:var(--salbei-tief)}
.tag.bald{background:#f1eafa; color:var(--pflaume)}
.btn-klein{border:none; cursor:pointer; font-family:var(--font-titel); font-weight:700; font-size:14px; border-radius:var(--r-pill); padding:10px 16px; min-height:48px}
.btn-klein.bearb{background:var(--creme-2); color:var(--nacht)}
.btn-klein.loesch{background:#ffe0ea; color:#c02e68}
.hinweis{background:#e3f7ea; border:3px solid var(--salbei); border-radius:var(--r); padding:var(--s4); font-weight:700; margin-bottom:var(--s5)}
.hinweis.fehler{background:#ffe0ea; border-color:var(--pink)}

/* Statistik-Karten */
.stat-karten{display:grid; gap:var(--s3); grid-template-columns:repeat(2,1fr); margin-bottom:var(--s5)}
@media(min-width:560px){ .stat-karten{grid-template-columns:repeat(4,1fr)} }
.stat-karte{background:var(--creme); border:1px solid var(--rand); border-radius:var(--r); padding:var(--s4); text-align:center; border-bottom:6px solid var(--sk,var(--senf))}
.stat-zahl{font-family:var(--font-titel); font-weight:800; font-size:clamp(28px,7vw,38px); color:var(--nacht); line-height:1}
.stat-label{font-weight:700; font-size:13px; color:var(--muted); margin-top:4px}
.stat-zeile{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:12px 0; border-top:2px solid var(--rand); font-weight:700}
.stat-zeile strong{font-family:var(--font-titel); color:var(--pflaume)}

/* Verlaufsdiagramm */
.verlauf{display:flex; align-items:flex-end; gap:6px; height:120px; padding:8px 0}
.v-tag{flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%}
.v-saeulen{flex:1 1 auto; display:flex; align-items:flex-end; gap:3px; width:100%; justify-content:center}
.v-saeule{width:40%; max-width:14px; border-radius:6px 6px 0 0; min-height:2px}
.v-saeule.besucher{background:var(--senf)}
.v-saeule.spiele{background:var(--pink)}
.v-label{font-size:10px; font-weight:700; color:var(--muted); white-space:nowrap; transform:rotate(-45deg); transform-origin:center}
.v-legende{display:flex; gap:18px; justify-content:center; margin-top:18px; font-weight:700; font-size:13px; color:var(--muted)}
.v-legende i{display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:5px; vertical-align:middle}

/* =========================================================================
   ALLGEMEIN
   ========================================================================= */
.zentriert{text-align:center}
.abstand-oben{margin-top:var(--s6)}
.konfetti{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:30}
.konfetti i{position:absolute; top:-16px; width:12px; height:16px; border-radius:2px; opacity:0; animation:konfettiFall linear forwards}
@keyframes konfettiFall{0%{opacity:1;top:-16px}100%{opacity:.9;top:110%}}

@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }

/* =========================================================================
   BENJI als Bild (PNG, transparent) – als Ganzes animiert
   ========================================================================= */
.benji-img{
  display:block; width:100%; height:auto; max-width:100%;
  background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
  filter:drop-shadow(0 16px 26px rgba(224,154,31,.30));
  will-change:transform;
}
/* Held: sanftes Atmen + Schweben + leichtes Wiegen */
.benji-held-img{ animation:benji-atmen 4s ease-in-out infinite }
@keyframes benji-atmen{
  0%,100%{ transform:translateY(0) rotate(0deg) scale(1) }
  50%    { transform:translateY(-10px) rotate(-1.2deg) scale(1.015) }
}
/* Mini (Spiel-Seite, Sprechblase): dezenter */
.benji-mini-img{ animation:benji-wippen 3.2s ease-in-out infinite }
@keyframes benji-wippen{
  0%,100%{ transform:translateY(0) rotate(0deg) }
  50%    { transform:translateY(-5px) rotate(1.5deg) }
}
/* Jubel: kurzer Freudensprung (z.B. Spielende) */
.benji-jubel-img{ animation:benji-jubel 1s ease-in-out infinite }
@keyframes benji-jubel{
  0%,100%{ transform:translateY(0) rotate(0) }
  25%    { transform:translateY(-16px) rotate(-4deg) }
  50%    { transform:translateY(0) rotate(0) }
  60%    { transform:translateY(-8px) rotate(3deg) }
  75%    { transform:translateY(0) rotate(0) }
}
/* magischer Schein hinter Benji (Wrapper .benji-buehne) */
.benji-buehne{ position:relative; display:inline-block; background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important }
.benji-buehne::before{
  content:""; position:absolute; left:50%; top:52%; width:78%; height:78%;
  transform:translate(-50%,-50%); z-index:0; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(255,214,118,.45) 0%, rgba(255,214,118,.18) 38%, transparent 66%);
  animation:benji-schein 4s ease-in-out infinite;
}
.benji-buehne .benji-img{ position:relative; z-index:1 }
@keyframes benji-schein{
  0%,100%{ opacity:.55; transform:translate(-50%,-50%) scale(.94) }
  50%    { opacity:.9;  transform:translate(-50%,-50%) scale(1.06) }
}
/* Funken um Benji */
.benji-buehne .funke{ position:absolute; z-index:2; color:#ffd24a; pointer-events:none; animation:funke-blink 2.6s ease-in-out infinite }
.benji-buehne .funke.f1{ top:8%; left:2%; animation-delay:0s }
.benji-buehne .funke.f2{ top:18%; right:4%; animation-delay:.8s }
.benji-buehne .funke.f3{ bottom:22%; right:0%; animation-delay:1.6s }
@keyframes funke-blink{
  0%,100%{ opacity:.3; transform:scale(.8) rotate(0) }
  50%    { opacity:1; transform:scale(1.1) rotate(20deg) }
}

/* ---- Hero-Sprechblase „Spielen wir?" ---- */
.hero-benji{ overflow:visible }
.hero-sprechblase{
  position:absolute; top:-2%; left:50%; z-index:4; pointer-events:none;
  transform-origin:bottom left;
  background:#fff; color:var(--nacht);
  font-family:var(--font-titel); font-weight:800; font-size:clamp(13px,2.6vw,17px); white-space:nowrap;
  padding:9px 16px; border-radius:16px; box-shadow:0 8px 22px rgba(91,58,130,.20);
  opacity:0; /* startet unsichtbar, Animation blendet ein */
  animation:hero-blase 9s ease-in-out 1.2s infinite;
}
.hero-sprechblase::after{
  content:""; position:absolute; left:26px; bottom:-8px; width:16px; height:16px;
  background:#fff; transform:rotate(45deg); border-radius:0 0 4px 0;
  box-shadow:4px 4px 8px rgba(91,58,130,.08);
}
/* rein-sliden (von oben + skaliert), leichtes Wackeln, halten, ausblenden, pausieren */
@keyframes hero-blase{
  0%   { opacity:0; transform:translateY(-10px) scale(.7) rotate(-3deg) }
  6%   { opacity:1; transform:translateY(0) scale(1.05) rotate(2deg) }
  10%  { transform:translateY(0) scale(1) rotate(-2deg) }
  14%  { transform:translateY(0) scale(1) rotate(1.5deg) }
  18%  { transform:translateY(0) scale(1) rotate(0deg) }
  40%  { opacity:1; transform:translateY(0) scale(1) rotate(0deg) }
  47%  { opacity:0; transform:translateY(-8px) scale(.8) rotate(2deg) }
  100% { opacity:0; transform:translateY(-10px) scale(.7) rotate(-3deg) }
}
/* Benji reagiert sanft, wenn die Blase erscheint – am Container, damit das Atmen des Bildes erhalten bleibt */
.hero-benji{ animation:benji-reaktion 9s ease-in-out 1.2s infinite }
@keyframes benji-reaktion{
  0%,4%   { transform:rotate(0) }
  7%      { transform:rotate(-1.8deg) translateY(-2px) }
  11%     { transform:rotate(1.3deg) }
  16%     { transform:rotate(-.8deg) }
  20%,100%{ transform:rotate(0) }
}
@media(max-width:520px){
  .hero-sprechblase{ font-size:11px; padding:6px 10px; top:-6%; left:auto; right:0; transform-origin:bottom right }
  .hero-sprechblase::after{ left:auto; right:22px }
}

/* =========================================================================
   FOOTER mit Admin-Zugang
   ========================================================================= */
.seiten-footer{
  display:flex; align-items:center; justify-content:center; gap:var(--s4); flex-wrap:wrap;
  margin-top:var(--s12); padding-top:var(--s6); border-top:1px solid var(--linie);
  color:var(--muted); font-weight:600; font-size:13px; text-align:center;
}
.seiten-footer p{ margin:0 }
.footer-admin{
  color:var(--muted-2); text-decoration:none; font-weight:600; font-size:13px;
  padding:5px 14px; border-radius:var(--r-pill); border:1px solid var(--linie);
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.footer-admin:hover{ color:var(--pflaume); border-color:var(--pflaume-hell); background:rgba(91,58,130,.05) }

/* =========================================================================
   BENJI – Charakter-Leben (Animationsprinzipien: ease in/out, secondary
   action, squash). Sanft, nie nervös. Bei reduzierter Bewegung aus (s. oben).
   ========================================================================= */
.benji{ transform-origin:50% 92%; animation:b-atmen 3.4s ease-in-out infinite; will-change:transform }
@keyframes b-atmen{
  0%,100%{ transform:translateY(0) scaleY(1) scaleX(1) }
  50%    { transform:translateY(-2.5px) scaleY(1.018) scaleX(.992) }
}
/* Ohren wackeln leicht versetzt (secondary action – sie folgen dem Körper) */
.b-ohr{ transform-box:fill-box; animation:b-ohr-schwung 3.4s ease-in-out infinite }
.b-ohr-l{ transform-origin:90% 14%; animation-delay:.1s }
.b-ohr-r{ transform-origin:10% 14%; animation-delay:.15s }
@keyframes b-ohr-schwung{
  0%,100%{ transform:rotate(0deg) }
  50%    { transform:rotate(2.2deg) }
}
.b-ohr-r{ animation-name:b-ohr-schwung-r }
@keyframes b-ohr-schwung-r{
  0%,100%{ transform:rotate(0deg) }
  50%    { transform:rotate(-2.2deg) }
}
/* Blinzeln: lange offen, kurzer Lidschlag (squash auf der Augen-Gruppe) */
.b-blinzeln{ transform-box:fill-box; transform-origin:50% 45%; animation:b-blink 5.5s ease-in-out infinite }
@keyframes b-blink{
  0%,92%,100%{ transform:scaleY(1) }
  95%        { transform:scaleY(.12) }
}
/* magische Funken funkeln sanft */
.b-funkeln{ transform-box:fill-box; transform-origin:center; animation:b-funkeln 3.2s ease-in-out infinite }
@keyframes b-funkeln{
  0%,100%{ opacity:.5 }
  50%    { opacity:1 }
}
/* Benji auf der Held-Sektion wippt sanft */
.benji-held .figur .benji{ animation:b-atmen 3.4s ease-in-out infinite, b-wippen 4.2s ease-in-out infinite }
@keyframes b-wippen{
  0%,100%{ transform:translateY(0) rotate(0deg) }
  50%    { transform:translateY(-6px) rotate(-1.2deg) }
}

/* =========================================================================
   BENJIS TAGESABENTEUER — täglicher Wiederkomm-Anreiz (Streak-Karte)
   Markenkonform: Senf/Pink-Glow, Baloo-Titel, weiche Schatten.
   ========================================================================= */
.tages-karte{
  display:flex; align-items:center; gap:var(--s4);
  text-decoration:none; color:var(--nacht);
  background:linear-gradient(135deg, #fff 0%, var(--creme-2) 100%);
  border-radius:var(--r-l); padding:var(--s5) var(--s6);
  box-shadow:var(--schatten-xs), 0 0 0 1px var(--linie);
  margin:0 0 var(--s8); position:relative; overflow:hidden;
  transition:transform .2s cubic-bezier(.2,.8,.3,1.2), box-shadow .2s ease;
}
.tages-karte::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 140% at 0% 0%, var(--senf) 0%, transparent 55%);
  opacity:.12;
}
.tages-karte:hover,.tages-karte:focus-visible{
  transform:translateY(-4px);
  box-shadow:var(--glow-senf), 0 18px 40px rgba(91,58,130,.14); outline:none;
}
.tages-flamme{
  flex:0 0 auto; font-size:40px; line-height:1; position:relative;
  filter:grayscale(.4) opacity(.7);
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
.tages-flamme.warm{ filter:none; }
.tages-flamme.aktiv{ filter:none; animation:tages-puls 1.8s ease-in-out infinite; }
@keyframes tages-puls{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
.tages-inhalt{ flex:1 1 auto; min-width:0; position:relative; display:flex; flex-direction:column; gap:2px }
.tages-label{
  font-family:var(--font-text); font-weight:800; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--pflaume);
}
.tages-titel{
  font-family:var(--font-titel); font-weight:800; font-size:clamp(17px,4.4vw,21px);
  color:var(--nacht); line-height:1.15; letter-spacing:-.01em;
}
.tages-streak{ font-weight:700; font-size:14px; color:var(--senf-tief); }
.tages-pfeil{ flex:0 0 auto; color:var(--senf); position:relative; transition:transform .2s ease }
.tages-karte:hover .tages-pfeil{ transform:translateX(4px) }
@media(max-width:420px){
  .tages-karte{ padding:var(--s4) var(--s5); gap:var(--s3) }
  .tages-flamme{ font-size:34px }
}

/* =========================================================================
   FOLGEN-SKRIPT — Lesefassung auf der Hören-Seite (aufklappbar) +
   Admin-Toggle. Markenkonform: weiche Karten, Pflaume/Senf, Baloo-Titel.
   ========================================================================= */
.skript-leser{
  margin-top:var(--s4);
  border-top:1px solid var(--linie);
  padding-top:var(--s3);
}
.skript-summary{
  display:flex; align-items:center; gap:8px;
  cursor:pointer; list-style:none;
  font-family:var(--font-titel); font-weight:800; font-size:15px;
  color:var(--pflaume);
  padding:8px 4px; border-radius:12px;
  -webkit-tap-highlight-color:transparent;
}
.skript-summary::-webkit-details-marker{ display:none; }
.skript-summary:hover{ background:var(--creme-2); }
.skript-summary .skript-pfeil{ margin-left:auto; transition:transform .2s ease; }
.skript-leser[open] .skript-summary .skript-pfeil{ transform:rotate(180deg); }
.skript-text{
  margin-top:10px;
  padding:var(--s4) var(--s5);
  background:var(--creme-2);
  border-radius:var(--r-m);
  font-family:var(--font-text);
  font-size:15px; line-height:1.7; color:var(--nacht);
  max-height:420px; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* Admin-Toggle (Schalter-Optik) */
.feld-toggle{ margin-top:4px; }
.toggle-zeile{
  display:flex; align-items:center; gap:10px;
  cursor:pointer; font-weight:700; color:var(--nacht);
}
.toggle-zeile input[type=checkbox]{
  appearance:none; -webkit-appearance:none;
  width:46px; height:26px; border-radius:999px;
  background:#cdc6bd; position:relative; cursor:pointer;
  transition:background .2s ease; flex:0 0 auto;
}
.toggle-zeile input[type=checkbox]::after{
  content:""; position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .2s ease;
}
.toggle-zeile input[type=checkbox]:checked{ background:var(--salbei-tief, #6bbf8a); }
.toggle-zeile input[type=checkbox]:checked::after{ transform:translateX(20px); }
.toggle-text{ font-family:var(--font-text); font-size:15px; }