/* ============================================================
   Marke – verbindlich nach dem Elena-Stilblatt
   Farben und Schriften stammen 1:1 aus 02 Marke & Master.
   ============================================================ */
:root{
  /* Farbpalette laut Stilblatt */
  --tinte:#4A382A;      /* Text    */
  --violett:#633F69;    /* Titel   */
  --gold:#926F38;       /* Akzent  */
  --creme:#F6F0E0;      /* Papier  */
  --flieder:#C6B0D6;
  --rose:#E8C4BE;
  --gras:#96B078;
  --nacht:#304878;

  /* Abstufungen daraus */
  --tinte-weich:#6E5844;
  --violett-tief:#4A2E50;
  --gold-hell:#B8904C;
  --gold-schimmer:#E4C98A;
  --creme-tief:#EDE4CE;
  --nacht-tief:#22345A;
  --papier:rgba(246,240,224,.94);

  /* Schriften laut Stilblatt: Dancing Script für Titel, EB Garamond für alles andere */
  --schrift:'EB Garamond',Georgia,'Times New Roman',serif;
  --schrift-zier:'Dancing Script','Snell Roundhand',cursive;

  --ease:cubic-bezier(.33,1,.68,1);

  /* Altnamen zeigen auf die Kanonfarben, damit alles einheitlich bleibt */
  --cream:var(--creme); --parchment:var(--papier);
  --violet:var(--violett); --violet-deep:var(--violett-tief); --night:var(--nacht);
  --ink:var(--tinte); --ink-soft:var(--tinte-weich);
  --gold-bright:var(--gold-hell); --gold-glow:var(--gold-schimmer);
  --ring:#7A4F86;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--schrift);font-size:19px;line-height:1.72;
  color:var(--tinte);background:var(--creme);overflow-x:hidden;
  -webkit-font-smoothing:antialiased}
h1,h2{font-family:var(--schrift-zier);font-weight:700;color:var(--violett);
  line-height:1.16;letter-spacing:.005em}
h3{font-family:var(--schrift);font-weight:600;color:var(--violett);line-height:1.3}
h1{font-size:clamp(2.3rem,5.4vw,3.6rem)}
h2{font-size:clamp(1.9rem,3.9vw,2.8rem)}
h3{font-size:1.16rem}
/* Die Vorzeile über den Titeln: goldene Garamond-Kursive wie auf den Buchseiten */
.script{font-family:var(--schrift);font-style:italic;color:var(--gold);
  font-size:1.06rem;letter-spacing:.05em}
img{max-width:100%;height:auto;display:block}
a{color:var(--violett)}
:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:8px}
::selection{background:var(--flieder);color:var(--violett-tief)}

/* ---------- Schaltflächen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--schrift);font-weight:600;font-size:1.02rem;letter-spacing:.01em;
  padding:.72rem 1.5rem;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
  text-decoration:none;min-height:48px;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),
             background .22s var(--ease),border-color .22s var(--ease)}
.btn svg{width:20px;height:20px;flex:none}
.btn-primary{background:linear-gradient(140deg,#6E4576,#4A2E50);color:var(--creme);
  box-shadow:0 6px 18px rgba(74,46,80,.34)}
.btn-primary:hover{box-shadow:0 11px 26px rgba(74,46,80,.42)}
.btn-gold{background:linear-gradient(140deg,#C0973F,#926F38);color:#302109;
  box-shadow:0 6px 18px rgba(146,111,56,.34)}
.btn-gold:hover{box-shadow:0 11px 26px rgba(146,111,56,.42)}
.btn-ghost{background:rgba(246,240,224,.88);color:var(--violett);
  border-color:rgba(146,111,56,.42)}
.btn-ghost:hover{background:#fff;border-color:var(--gold)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}

/* ============================================================
   Kopfzeile
   ============================================================ */
header{position:sticky;top:0;z-index:60;background:var(--papier);
  box-shadow:0 1px 0 rgba(146,111,56,.2),0 6px 22px rgba(74,56,42,.09);
  transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.nav{max-width:1240px;margin:0 auto;padding:.5rem 1.25rem;
  display:flex;align-items:center;gap:1rem}

/* Wortmarke aus dem Original-Logo */
.marke{display:flex;align-items:center;gap:.72rem;text-decoration:none;flex:none;
  padding:.2rem;border-radius:14px}
.marke-bild{height:clamp(40px,4.4vw,54px);width:auto;display:block;
  transition:height .4s var(--ease)}
.marke-hell{display:none}
header.dark .marke-dunkel{display:none}
header.dark .marke-hell{display:block}
.marke-zusatz{font-family:var(--schrift);font-style:italic;font-size:1rem;
  color:var(--gold);white-space:nowrap;letter-spacing:.03em;transition:color .4s}
header.dark .marke-zusatz{color:var(--gold-schimmer)}
@media (max-width:560px){.marke-zusatz{display:none}}

/* Bereiche */
nav.links{display:flex;align-items:center;gap:.2rem;margin-left:auto}
nav.links>a:not(.btn){position:relative;display:inline-flex;align-items:center;
  font-family:var(--schrift);font-weight:600;font-size:1.04rem;text-decoration:none;
  color:var(--tinte);padding:.55rem .82rem;border-radius:999px;min-height:44px;
  transition:background .22s var(--ease),color .22s var(--ease)}
nav.links>a:not(.btn):hover{background:rgba(146,111,56,.13);color:var(--violett)}
nav.links>a:not(.btn)[aria-current="page"]{color:var(--violett)}
nav.links>a:not(.btn)[aria-current="page"]::after{
  content:"";position:absolute;left:50%;bottom:.3rem;width:5px;height:5px;margin-left:-2.5px;
  border-radius:50%;background:var(--gold-hell)}
header.dark nav.links>a:not(.btn){color:var(--creme)}
header.dark nav.links>a:not(.btn):hover{background:rgba(246,240,224,.16)}
header.dark nav.links>a:not(.btn)[aria-current="page"]{color:#fff}

/* Der Bücher-Knopf ist der einzige Hervorgehobene im Menü */
.nav-tat{margin-left:.45rem;padding:.55rem 1.2rem;min-height:44px;font-size:1rem}
nav.links>a.btn-primary{color:var(--creme)}
nav.links>a.btn-primary:hover{background:linear-gradient(140deg,#7A4E82,#553459)}

/* Schaltfläche für schmale Geräte */
.burger{display:none;margin-left:auto;background:none;cursor:pointer;
  border:1.5px solid rgba(146,111,56,.42);border-radius:999px;
  width:48px;height:48px;place-items:center;color:var(--tinte)}
.burger i{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;
  position:relative;transition:transform .3s var(--ease)}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:20px;height:2px;
  background:currentColor;border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger i::before{top:-6px}
.burger i::after{top:6px}
header.dark .burger{color:var(--creme);border-color:rgba(246,240,224,.4)}
header.menu-auf .burger i{transform:rotate(45deg)}
header.menu-auf .burger i::before{top:0;transform:rotate(-90deg)}
header.menu-auf .burger i::after{opacity:0}

.menu-schirm{position:fixed;inset:0;z-index:55;background:rgba(46,33,26,.42);
  opacity:0;visibility:hidden;transition:opacity .32s var(--ease),visibility .32s}
body.menu-offen .menu-schirm{opacity:1;visibility:visible}

@media (max-width:900px){
  .burger{display:grid}
  nav.links{position:fixed;top:0;right:0;bottom:0;z-index:60;
    width:min(340px,86vw);margin:0;
    flex-direction:column;align-items:stretch;gap:.14rem;
    background:var(--creme);padding:5.6rem 1.1rem 2.2rem;
    box-shadow:-18px 0 52px rgba(74,56,42,.3);
    transform:translateX(103%);transition:transform .34s var(--ease);
    overflow-y:auto;overscroll-behavior:contain}
  header.menu-auf nav.links{transform:translateX(0)}
  nav.links>a:not(.btn){border-radius:14px;padding:.8rem 1rem;font-size:1.14rem;
    color:var(--tinte)}
  header.dark nav.links>a:not(.btn){color:var(--tinte)}
  .nav-tat{margin:.6rem 0 0;width:100%;justify-content:center;font-size:1.1rem;
    padding:.85rem 1.2rem;min-height:52px}
  .nav-tat,header.dark .nav-tat{color:var(--creme)}
  nav.links>a:not(.btn)[aria-current="page"]::after{
    left:auto;right:1rem;bottom:auto;top:50%;margin:-2.5px 0 0}
  /* Der Schließen-Knopf muss über dem Schubfach liegen */
  header.menu-auf .burger{position:relative;z-index:61}
  /* Die Stationspunkte der Flugseite treten zurück */
  body.menu-offen #rail{opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
}

/* Auf der Flugseite schwebt die Kopfzeile über der Karte */
header.schwebend{position:fixed;top:0;left:0;right:0;background:transparent;box-shadow:none}
header.schwebend.solid{background:var(--papier);
  box-shadow:0 1px 0 rgba(146,111,56,.2),0 6px 22px rgba(74,56,42,.09)}
header.schwebend.solid.dark{background:rgba(34,52,90,.86);
  box-shadow:0 1px 0 rgba(228,201,138,.18),0 6px 22px rgba(0,0,0,.3)}

/* ============================================================
   Fußzeile
   ============================================================ */
footer{background:var(--nacht);color:#CBD6EC;
  padding:clamp(2.6rem,6vw,4rem) 1.25rem 1.8rem;margin-top:auto}
.fuss{max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.5fr);
  gap:clamp(1.8rem,5vw,4rem);align-items:start}
.fuss-marke{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.fuss-logo{width:clamp(150px,19vw,212px);height:auto;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.28))}
.fuss-marke p{font-size:1rem;line-height:1.62;color:#BFCCE6}
.fuss-spalten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.6rem 1.2rem}
.fuss-titel{font-family:var(--schrift);font-weight:600;font-size:.82rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gold-schimmer);
  margin-bottom:.7rem;line-height:1.3}
.fuss-spalten ul{list-style:none;display:flex;flex-direction:column;gap:.1rem}
.fuss-spalten a{display:inline-block;color:#CBD6EC;text-decoration:none;
  font-size:1rem;padding:.36rem 0;transition:color .2s var(--ease)}
.fuss-spalten a:hover{color:var(--gold-schimmer)}
.fuss-unten{max-width:1180px;margin:clamp(2rem,5vw,3rem) auto 0;padding-top:1.2rem;
  border-top:1px solid rgba(203,214,236,.2);
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:.8rem;font-size:.92rem;color:#A8B7D6}
.fuss-unten .spruch{font-family:var(--schrift-zier);font-weight:600;font-size:1.32rem;
  color:var(--gold-schimmer)}
@media (max-width:820px){
  .fuss{grid-template-columns:1fr;gap:2.2rem}
  .fuss-marke{align-items:center;text-align:center}
  .fuss-spalten{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important}}

/* ============================================================
   Seitenbausteine
   ============================================================ */
.kopfbereich{background:
   radial-gradient(1200px 500px at 80% -20%,rgba(201,179,228,.35),transparent 60%),
   radial-gradient(900px 460px at 0% 10%,rgba(246,220,233,.45),transparent 60%),
   linear-gradient(180deg,#F6F0E0,#F0E9F2)}
.kopf-innen{max-width:1180px;margin:0 auto;padding:3rem 1.25rem 3.4rem;
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.buchbild{position:relative;perspective:1400px}
.buch3d{position:relative;transform:rotateY(-19deg) rotateX(2deg);transform-style:preserve-3d;
  transition:transform .5s var(--ease);filter:drop-shadow(0 26px 24px rgba(60,40,80,.4))}
.buchbild:hover .buch3d{transform:rotateY(-8deg) translateY(-6px)}
.buch3d img{width:100%;border-radius:3px 10px 10px 3px}
.buch3d::before{content:"";position:absolute;top:1.5%;bottom:1.5%;right:-15px;width:16px;
  transform:rotateY(64deg);transform-origin:left center;
  background:repeating-linear-gradient(180deg,#fff 0 2px,#EDE4CE 2px 4px);border-radius:0 3px 3px 0}
.buch3d::after{content:"";position:absolute;inset:0 auto 0 0;width:13%;
  background:linear-gradient(90deg,rgba(60,35,80,.3),transparent);border-radius:3px 0 0 3px}
.kopf-text .band{display:inline-block;font-family:var(--schrift-zier);font-weight:700;
  font-size:1.5rem;color:var(--gold)}
.kopf-text h1{font-size:clamp(1.9rem,4vw,2.9rem);margin:.1rem 0 .4rem}
/* Der Autor steht unter dem Titel – leise, aber da. */
.kopf-text .autor{display:block;font-family:var(--schrift);
  font-style:italic;color:var(--ink-soft);font-size:1.05rem;margin:0 0 .9rem}
.kopf-text p{color:var(--ink-soft);max-width:38rem;margin-bottom:1.4rem}
.kopf-knoepfe{display:flex;flex-wrap:wrap;gap:.8rem}
.fakten{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:1.4rem;font-size:.92rem;font-weight:700;color:var(--ink-soft)}
.fakten span{display:inline-flex;align-items:center;gap:.45rem}
.fakten svg{width:17px;height:17px;color:var(--gold-bright)}
@media (max-width:820px){.kopf-innen{grid-template-columns:1fr;text-align:center}
  .buchbild{max-width:220px;margin:0 auto} .kopf-text p{margin-inline:auto}
  .kopf-knoepfe,.fakten{justify-content:center}}

section.liste{max-width:1180px;margin:0 auto;padding:3.2rem 1.25rem 4rem}
.listen-kopf{text-align:center;max-width:40rem;margin:0 auto 2.4rem}
.listen-kopf .script{font-size:1.5rem;color:var(--gold);display:block}
.listen-kopf h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.4rem}
.karte{background:#fff;border:1px solid rgba(201,162,75,.35);border-radius:20px;overflow:hidden;
  box-shadow:0 8px 26px rgba(71,43,92,.12);display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),
             border-color .25s var(--ease)}
.karte:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(71,43,92,.2);
  border-color:var(--gold)}
.karte .bild{position:relative;aspect-ratio:4/3;overflow:hidden;background:#F1EADA;
  display:block;width:100%}
.karte .bild img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.karte:hover .bild img{transform:scale(1.05)}
.karte .nr{position:absolute;left:.7rem;top:.7rem;background:var(--parchment);
  border:1px solid rgba(201,162,75,.5);border-radius:999px;padding:.15rem .7rem;
  font-family:var(--schrift);font-size:.85rem;color:var(--violet)}
.karte .txt{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.75rem;flex:1}
.karte .titel{font-family:var(--schrift);font-weight:600;font-size:1.06rem;line-height:1.35;
  color:var(--violett)}
/* Statt Knöpfen: woran man sieht, in welcher Form es die Geschichte schon gibt */
.karte .marken{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto}
.karte .marke{display:inline-flex;align-items:center;gap:.34rem;
  background:rgba(198,176,214,.26);border:1px solid rgba(146,111,56,.24);
  border-radius:999px;padding:.24rem .66rem;
  font-size:.85rem;font-weight:600;color:var(--tinte);white-space:nowrap}
.karte .marke svg{width:14px;height:14px;flex:none;color:var(--gold)}

.leser{position:fixed;inset:0;z-index:200;display:none;background:rgba(28,19,42,.96);flex-direction:column}
.leser.offen{display:flex}
body.liest{overflow:hidden}
.leser-kopf{display:flex;align-items:center;gap:.8rem;padding:.6rem max(.8rem,env(safe-area-inset-left));
  color:#EFE8F3;flex:none}
.leser-kopf .wo{font-family:var(--schrift);font-size:.95rem;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leser-kopf .rechts{margin-left:auto;display:flex;gap:.5rem;align-items:center}
/* „hidden" muss stärker sein als die Anzeigeart – sonst stünde der
   PDF-Knopf auch bei den Bänden da, die es nicht zum Laden gibt. */
.leser-knopf[hidden]{display:none}
.leser-knopf{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.12);
  color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  padding:.45rem .9rem;font-family:var(--schrift);font-weight:800;font-size:.88rem;
  cursor:pointer;min-height:44px;text-decoration:none}
.leser-knopf:hover{background:rgba(255,255,255,.22)}
.leser-knopf svg{width:17px;height:17px}
.leser-buehne{flex:1;position:relative;display:grid;place-items:stretch;
  padding:.3rem .6rem;min-height:0;overflow:hidden}
/* Die Buehne gibt die Groesse vor – die Doppelseite passt dadurch immer ganz hinein */
.seite{position:relative;width:100%;height:100%;display:flex;align-items:center;
  justify-content:center;overflow:hidden}
.seite img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;border-radius:4px;background:#FDFAF0;
  box-shadow:0 26px 70px rgba(0,0,0,.6);transition:opacity .35s var(--ease)}
.seite img.wechselt{opacity:0}
.blaettern{position:absolute;top:0;bottom:0;width:24%;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;color:#fff;opacity:0;transition:opacity .25s}
.blaettern:hover,.blaettern:focus-visible{opacity:1}
.blaettern.vor{right:0} .blaettern.zurueck{left:0}
.blaettern span{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;
  background:rgba(28,19,42,.7);border:1px solid rgba(255,255,255,.3)}
.blaettern svg{width:22px;height:22px}
.leser-fuss{flex:none;display:flex;align-items:center;justify-content:center;gap:.8rem;
  padding:.5rem .8rem max(.7rem,env(safe-area-inset-bottom));color:#D5C4E2;font-size:.9rem;font-weight:700}
.leser-fuss .zaehler{min-width:12rem;text-align:center}
.leser-fuss button{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28);
  border-radius:999px;width:44px;height:44px;cursor:pointer;display:grid;place-items:center}
.leser-fuss button:disabled{opacity:.35;cursor:default}
.leser-fuss svg{width:18px;height:18px}
/* Schmale Geraete: eine Buchhaelfte fuellt den Schirm, die andere liegt daneben */
.seite.halb img{max-width:none;max-height:100%;width:auto;height:100%;
  transform:translateX(var(--haelfte,25%));
  transition:transform .4s var(--ease),opacity .35s var(--ease)}
.springen{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:.4rem .8rem;font-family:var(--schrift);font-weight:700;font-size:.85rem;
  max-width:min(46vw,16rem)}
.springen option{color:var(--ink)}


/* ---------- Werke (Buch + Malbuch) auf der Bandseite ---------- */
.werke{max-width:1180px;margin:0 auto;padding:2.6rem 1.25rem 1rem;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(440px,1fr));gap:1.6rem}
.werk{background:#fff;border:1px solid rgba(201,162,75,.35);border-radius:22px;
  padding:1.5rem;display:flex;gap:1.3rem;align-items:flex-start;
  box-shadow:0 8px 26px rgba(71,43,92,.12)}
.werk .deckel{width:clamp(96px,15vw,128px);flex:none;perspective:900px}
.werk .deckel .buch3d{transform:rotateY(-17deg)}
.werk h3{font-size:1.1rem;margin-bottom:.3rem}
.werk p{color:var(--ink-soft);font-size:.94rem;margin-bottom:.9rem}
.werk .reihe{display:flex;flex-wrap:wrap;gap:.6rem}
.werk .btn{padding:.55rem 1.05rem;font-size:.88rem;min-height:44px}
.werk.bald{border-style:dashed;background:linear-gradient(160deg,#F3EDF4,#F3EAD8)}
.werk.bald h3{color:var(--gold)}

/* ---------- Platzhalterseite ---------- */
.leer{max-width:44rem;margin:0 auto;padding:4rem 1.25rem 5rem;text-align:center}
.leer .script{font-size:1.6rem;color:var(--gold);display:block}
.leer h1{font-size:clamp(1.8rem,3.6vw,2.6rem);margin:.2rem 0 1rem}
.leer p{color:var(--ink-soft);margin-bottom:1.6rem}

/* ---------- Digitalbereich ---------- */
.digital-bereich{max-width:1180px;margin:0 auto;padding:3rem 1.25rem 4rem;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.4rem,4vw,3rem);align-items:center}
@media (max-width:880px){.digital-bereich{grid-template-columns:1fr}}
.tablet{position:relative;display:block;width:100%;text-decoration:none;
  background:linear-gradient(160deg,#4A2E50,#2E1F33);border:1px solid rgba(255,255,255,.22);
  border-radius:22px;padding:12px 12px 26px;box-shadow:0 22px 50px rgba(0,0,0,.4);
  transition:transform .25s var(--ease)}
.tablet:hover{transform:translateY(-4px)}
.tablet::after{content:"";position:absolute;left:50%;bottom:9px;transform:translateX(-50%);
  width:52px;height:4px;border-radius:999px;background:rgba(255,255,255,.28)}
.tablet .schirm{position:relative;display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#F3ECDA}
.tablet .schirm img{width:100%;height:100%;object-fit:cover}
.tablet .aufruf{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:1.1rem;background:linear-gradient(180deg,rgba(46,33,64,0) 45%,rgba(46,33,64,.5) 100%)}
.tablet .aufruf span{display:inline-flex;align-items:center;gap:.5rem;
  background:linear-gradient(135deg,#C0973F,#926F38);color:#302109;font-weight:800;font-size:.95rem;
  padding:.6rem 1.2rem;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.zugang{background:var(--night);color:#EFE8F3;border-radius:22px;padding:clamp(1.4rem,3vw,2rem)}
.zugang h2{color:#fff;font-size:1.4rem;margin-bottom:.4rem}
.zugang .kicker{font-family:var(--schrift-zier);font-weight:700;font-size:1.4rem;color:var(--gold-glow)}
.zugang ul{list-style:none;display:flex;flex-direction:column;gap:.7rem;margin:.9rem 0 1.2rem}
.zugang li{display:flex;gap:.7rem;align-items:flex-start;color:#D5C4E2;font-size:.95rem}
.zugang li svg{width:20px;height:20px;color:var(--gold-glow);flex:none;margin-top:.15rem}
.zugang strong{color:#fff;font-family:var(--schrift);font-weight:500}
.zugang label{display:block;font-weight:800;font-size:.88rem;margin-bottom:.3rem}
.zugang input{width:100%;padding:.8rem 1rem;border-radius:14px;border:1.5px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.94);font-family:var(--schrift);font-size:1rem;color:var(--ink);margin-bottom:.9rem}
.zugang .btn{width:100%;justify-content:center}
.zugang .alt{margin-top:.9rem;font-size:.88rem;text-align:center;color:#D5C4E2}
.zugang .alt a{color:var(--gold-glow);font-weight:800}

/* ---------- Anmeldung ----------
   Ein Kasten für zwei Orte: auf dunklem Grund in „Digital erleben",
   auf hellem in der App. Alles Farbige kommt darum aus Variablen, die
   der dunkle Kasten überschreibt. */
.anmeldung{--an-schrift:var(--tinte);--an-leise:var(--ink-soft);
  --an-rand:rgba(146,111,56,.34);--an-feld:#fff;--an-hell:var(--violett);
  color:var(--an-schrift)}
.zugang .anmeldung{--an-schrift:#EFE8F3;--an-leise:#D5C4E2;
  --an-rand:rgba(255,255,255,.35);--an-feld:rgba(255,255,255,.94);
  --an-hell:var(--gold-glow)}
.anmeldung label{display:block;font-family:var(--schrift);font-weight:600;
  font-size:.88rem;margin-bottom:.3rem;color:var(--an-schrift)}
.anmeldung input{width:100%;padding:.8rem 1rem;border-radius:14px;
  border:1.5px solid var(--an-rand);background:var(--an-feld);
  font-family:var(--schrift);font-size:1rem;color:var(--tinte);margin-bottom:.9rem}
.anmeldung input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.anmeldung [data-an=ziffern]{font-family:var(--schrift);font-size:1.5rem;
  letter-spacing:.3em;text-align:center;padding-left:.3em}
.anmeldung .btn{width:100%;justify-content:center}
.an-hinweis{margin-top:.8rem;font-size:.88rem;line-height:1.55;
  text-align:center;color:var(--an-leise)}
.an-gesendet{margin-bottom:1rem;font-size:.95rem;color:var(--an-leise)}
.anmeldung textarea{width:100%;padding:.8rem 1rem;border-radius:14px;
  border:1.5px solid var(--an-rand);background:var(--an-feld);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;
  line-height:1.5;color:var(--tinte);margin-bottom:.9rem;resize:vertical;
  word-break:break-all}
.anmeldung textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.an-links{margin:0 0 .7rem;text-align:left}
.an-gesendet strong{color:var(--an-schrift);font-weight:600}
.an-textknopf{background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--schrift);font-weight:600;font-size:inherit;
  color:var(--an-hell);text-decoration:underline;text-underline-offset:3px}
.an-fehler{margin-top:.9rem;padding:.7rem 1rem;border-radius:14px;
  background:rgba(190,70,60,.13);border:1px solid rgba(190,70,60,.42);
  color:var(--an-schrift);font-size:.94rem;line-height:1.5}
.an-fertig .an-wer{font-size:.95rem;color:var(--an-leise)}
.an-fertig .an-wer strong{color:var(--an-schrift);font-weight:600}
.an-stufe{margin-top:.35rem;font-family:var(--schrift-zier);font-weight:700;
  font-size:1.5rem;line-height:1.25;color:var(--an-hell)}
.an-buchcode{margin:1.3rem 0 1rem;padding-top:1.1rem;
  border-top:1px solid var(--an-rand)}
.an-zeile{display:flex;gap:.6rem;align-items:flex-start}
.an-zeile input{flex:1;margin-bottom:0}
.an-zeile .btn{width:auto;flex:none;white-space:nowrap}
.an-sagt{margin-top:.7rem;font-size:.92rem;color:var(--an-leise)}
.konto-hinweis{display:flex;gap:.55rem;align-items:flex-start;
  margin-top:1.4rem;font-size:.94rem;color:var(--ink-soft);line-height:1.6}
.konto-hinweis svg{width:17px;height:17px;color:var(--gold);flex:none;margin-top:.3rem}
@media (max-width:460px){.an-zeile{flex-direction:column}
  .an-zeile .btn{width:100%}}

/* Der Kontoknopf in der Kopfleiste der App */
.konto-knopf{margin-left:auto;display:inline-grid;place-items:center;
  width:44px;height:44px;border-radius:999px;cursor:pointer;
  background:rgba(246,240,224,.9);border:1.5px solid rgba(146,111,56,.4);
  color:var(--violett);transition:background .2s var(--ease),border-color .2s var(--ease)}
.konto-knopf svg{width:21px;height:21px}
.konto-knopf:hover{background:#fff}
/* Angemeldet: ein goldener Punkt oben rechts, sonst nichts. */
.konto-knopf.an{position:relative;border-color:var(--gold)}
.konto-knopf.an::after{content:"";position:absolute;top:5px;right:5px;
  width:9px;height:9px;border-radius:50%;background:var(--gold);
  border:2px solid var(--creme)}

/* ---------- Hardcover-Buch (mit gemini-3-pro-image gerendert) ---------- */
.hardcover{width:100%;display:block;line-height:0;position:relative;
  filter:drop-shadow(0 22px 20px rgba(60,40,80,.34));
  transition:transform .45s var(--ease),filter .45s var(--ease)}
.hardcover img{width:100%;height:auto;display:block;
  border-radius:3px 9px 9px 3px}
/* Der Buchrücken: eine schmale Kante links, damit das flache Cover
   nicht wie ein Poster wirkt. */
.hardcover::before{content:"";position:absolute;inset:0 auto 0 0;width:2.6%;
  border-radius:3px 0 0 3px;
  background:linear-gradient(90deg,rgba(74,56,42,.42),rgba(74,56,42,.13) 55%,rgba(255,255,255,.22))}
.hardcover:hover{transform:translateY(-6px) rotate(-1deg);
  filter:drop-shadow(0 30px 26px rgba(60,40,80,.4))}
@media (prefers-reduced-motion:reduce){.hardcover img{transition:none}}

/* ---------- Elenas Welt: Webfassung und App ---------- */
.app-teil{background:linear-gradient(180deg,rgba(198,176,214,.16),rgba(246,240,224,0));
  padding:3.4rem 1.25rem 3.8rem}
.app-innen{max-width:1180px;margin:0 auto;display:grid;gap:2.6rem;
  grid-template-columns:1fr minmax(280px,44%);align-items:center}
.app-text .band{font-family:var(--schrift-zier);font-weight:700;font-size:1.5rem;color:var(--gold)}
.app-text h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin:.15rem 0 .8rem}
.app-text p{color:var(--ink-soft);max-width:36rem}
.app-knoepfe{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}
.app-hinweis{font-size:.92rem;margin-top:1rem;max-width:34rem}

/* Die zwei Store-Knöpfe. Sie tragen absichtlich keine Herstellerplakette:
   die gibt es erst zum Start, samt der amtlichen Grafik von Apple und Google. */
.laden-reihe{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1rem}
.laden-knopf{display:inline-flex;align-items:center;gap:.7rem;
  padding:.62rem 1.1rem;border-radius:14px;text-decoration:none;
  border:1.5px solid var(--violett);background:var(--violett);color:var(--creme);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.laden-knopf:hover{box-shadow:0 11px 24px rgba(74,46,80,.34);transform:translateY(-2px)}
.laden-knopf svg{width:26px;height:26px;flex:none}
.laden-knopf span{display:flex;flex-direction:column;line-height:1.15;font-weight:700;font-size:1.05rem}
.laden-knopf small{font-weight:400;font-size:.72rem;opacity:.82;letter-spacing:.04em;
  text-transform:uppercase}
.laden-knopf.wartet{background:transparent;color:var(--ink-soft);
  border-style:dashed;border-color:var(--linie-stark,#D9C9A6);cursor:default}
.laden-knopf.wartet:hover{box-shadow:none;transform:none}
.app-bild{display:block;line-height:0;border-radius:20px;overflow:hidden;
  box-shadow:0 22px 44px rgba(60,40,80,.26);transition:transform .45s var(--ease)}
.app-bild img{width:100%;height:auto;display:block}
.app-bild:hover{transform:translateY(-5px)}
.fuss-bald{color:inherit;opacity:.72}
.fuss-bald small{font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;opacity:.8}
@media (max-width:820px){.app-innen{grid-template-columns:1fr}
  .app-bild{order:-1}}

/* ---------- Digital: Vorab-Landingpage ---------- */
.dig-kopf{background:
   radial-gradient(1100px 520px at 78% -18%,rgba(201,179,228,.42),transparent 62%),
   radial-gradient(900px 460px at 0% 8%,rgba(246,220,233,.42),transparent 60%),
   linear-gradient(180deg,#F6F0E0,#F1EAF3)}
.dig-kopf .innen{max-width:1180px;margin:0 auto;padding:3.4rem 1.25rem 3rem;text-align:center}
.dig-kopf .band{font-family:var(--schrift-zier);font-weight:700;font-size:1.6rem;color:var(--gold)}
.dig-kopf h1{font-size:clamp(2rem,4.4vw,3.1rem);margin:.2rem auto .8rem;max-width:22ch}
.dig-kopf p.gross{color:var(--ink-soft);font-size:1.12rem;max-width:44rem;margin:0 auto 1.6rem}
.dig-kopf .kopf-knoepfe{justify-content:center}
.bald-schild{display:inline-flex;align-items:center;gap:.5rem;background:var(--parchment);
  border:1px solid rgba(201,162,75,.5);border-radius:999px;padding:.35rem 1rem;
  font-weight:800;font-size:.86rem;color:var(--gold);margin-bottom:1rem}
.bald-schild svg{width:16px;height:16px}

.mehr{max-width:1180px;margin:0 auto;padding:3.4rem 1.25rem 1rem}
.mehr .listen-kopf{margin-bottom:2rem}
.mehr-gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.3rem}
.mehr-karte{background:#fff;border:1px solid rgba(201,162,75,.35);border-radius:20px;
  padding:1.5rem 1.4rem;box-shadow:0 8px 26px rgba(71,43,92,.12);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.mehr-karte:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(71,43,92,.18)}
.mehr-karte .zeichen{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:.9rem}
.mehr-karte .zeichen svg{width:26px;height:26px}
.z-rosa{background:#F7E4DF;color:#B3607A}
.z-gold{background:#F2E4C4;color:#926F38}
.z-gruen{background:#E6EFDB;color:#5A7B44}
.z-blau{background:#E1E8F3;color:#3F5C8A}
.z-lila{background:#EBE2F0;color:#633F69}
.mehr-karte h3{font-size:1.12rem;margin-bottom:.4rem}
.mehr-karte p{color:var(--ink-soft);font-size:.95rem;margin-bottom:.7rem}
.mehr-karte ul{list-style:none;display:flex;flex-direction:column;gap:.35rem}
.mehr-karte li{display:flex;gap:.5rem;align-items:flex-start;font-size:.92rem;color:var(--ink-soft)}
.mehr-karte li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold-bright);
  flex:none;margin-top:.5rem}

.regal{max-width:1180px;margin:0 auto;padding:3rem 1.25rem 1rem}
/* Fünf Bände sollen auf breiten Schirmen in eine Reihe passen; die Karten
   stehen oben bündig, damit eine längere Unterzeile die Reihe nicht verschiebt. */
/* Die Reihe soll als Reihe lesbar bleiben: so viele Bände nebeneinander,
   wie hineinpassen, oben bündig, damit eine längere Unterzeile nicht schiebt. */
.regal-reihe{display:grid;justify-content:center;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(132px,180px));
  gap:1.4rem clamp(1rem,2.4vw,2rem);margin-top:2rem}
.regal-platz{width:100%;display:flex;flex-direction:column;align-items:center;gap:.9rem}
.regal-platz .name{font-family:var(--schrift);color:var(--violet);font-size:.98rem;text-align:center;line-height:1.35}
.regal-platz .btn{padding:.5rem 1rem;font-size:.86rem;min-height:44px}

/* ---------- Bibliothek im Digitalbereich ---------- */
.bibliothek{max-width:1180px;margin:0 auto;padding:3rem 1.25rem 1rem}
.bibliothek[hidden]{display:none}
.bib-gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;margin-top:2rem}
.bib-karte{background:#fff;border:1px solid rgba(201,162,75,.35);border-radius:20px;padding:1.5rem;
  display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;
  box-shadow:0 8px 26px rgba(71,43,92,.12)}
.bib-karte .deckel{width:clamp(110px,16vw,150px)}
.bib-karte h3{font-size:1.05rem;line-height:1.35}
.bib-karte .reihe{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:auto}
.bib-karte .btn{padding:.55rem 1.05rem;font-size:.88rem;min-height:44px}
.angemeldet{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:16px;
  padding:.9rem 1.1rem;color:#EFE8F3;font-weight:700;font-size:.95rem}
.angemeldet button{background:none;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:999px;
  padding:.4rem .9rem;font-family:var(--schrift);font-weight:800;font-size:.85rem;cursor:pointer;min-height:44px}
.zugang [hidden]{display:none}

/* ---------- Hörbuch auf der Bandseite ---------- */
/* Das Hörbuch-Titelbild ist quadratisch wie eine Hülle; das Kopfhörer-
   Zeichen sitzt als kleine Marke in der Ecke darüber. */
.werk .hoer-deckel{position:relative;width:clamp(96px,14vw,128px);flex:none;
  aspect-ratio:1;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,#6E4576,#4A2E50);
  box-shadow:0 16px 30px rgba(60,40,80,.35);color:var(--gold-glow)}
.werk .hoer-deckel img{width:100%;height:100%;object-fit:cover;display:block}
.werk .hoer-deckel svg{position:absolute;right:.5rem;bottom:.5rem;width:26px;height:26px;
  padding:5px;border-radius:50%;background:rgba(48,40,60,.72);color:#F6EFDA;
  backdrop-filter:none}
.karte .hoer{display:flex;align-items:center;gap:.5rem;margin-top:auto}
.karte .hoer .btn{flex:none}
.karte .hoer .dauer{font-size:.82rem;font-weight:700;color:var(--ink-soft)}
.karte .hoer .fehlt{font-size:.82rem;font-weight:700;color:var(--gold)}
.hoer-leiste{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:120;
  display:none;align-items:center;gap:.8rem;max-width:min(94vw,44rem);width:max-content;
  background:rgba(38,26,58,.96);color:#EFE8F3;border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:.55rem .7rem .55rem 1.1rem;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.hoer-leiste.an{display:flex}
.hoer-leiste .wo{font-family:var(--schrift);font-size:.9rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:min(46vw,20rem)}
.hoer-leiste .zeit{font-size:.82rem;font-weight:700;color:#C6B0D6;font-variant-numeric:tabular-nums}
.hoer-leiste button{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  color:#fff;border-radius:999px;width:44px;height:44px;cursor:pointer;display:grid;place-items:center}
.hoer-leiste button svg{width:18px;height:18px}
.hoer-leiste .balken{flex:1;min-width:6rem;height:5px;border-radius:999px;background:rgba(255,255,255,.2);
  overflow:hidden;cursor:pointer}
.hoer-leiste .balken i{display:block;height:100%;width:0;background:linear-gradient(90deg,#C0973F,#E4C98A)}

/* ---------- Videobereich ---------- */
.werk .video-deckel{width:clamp(96px,15vw,128px);flex:none;display:grid;place-items:center;
  aspect-ratio:1;border-radius:20px;overflow:hidden;position:relative;
  background:linear-gradient(160deg,#4A2E50,#6E4576);box-shadow:0 16px 30px rgba(60,40,80,.4)}
.werk .video-deckel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.werk .video-deckel svg{position:relative;width:40%;height:40%;color:#fff;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.filmbereich{max-width:1180px;margin:0 auto;padding:3rem 1.25rem 1rem}
.filmrahmen{position:relative;border-radius:24px;overflow:hidden;background:#22345A;
  box-shadow:0 22px 60px rgba(71,43,92,.3);border:1px solid rgba(201,162,75,.35)}
.filmrahmen video{display:block;width:100%;height:auto;background:#22345A}
.film-hinweis{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;
  margin-top:1rem;font-size:.92rem;color:var(--ink-soft);font-weight:700}
.film-hinweis svg{width:17px;height:17px;color:var(--gold-bright);flex:none}

/* ---------- Film je Geschichte ---------- */
.karte .medien{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:auto}
.karte .medien .btn{padding:.5rem .95rem;font-size:.85rem;min-height:44px}

/* ---------- Die drei Zugänge ---------- */
.tarife{max-width:1180px;margin:0 auto;padding:clamp(2.6rem,6vw,4.4rem) 1.25rem 1rem}
.tarif-gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr));
  gap:1.4rem;margin-top:2.4rem;align-items:start}
.tarif{position:relative;display:flex;flex-direction:column;gap:.7rem;height:100%;
  background:#fff;border:1px solid rgba(146,111,56,.34);border-radius:22px;
  padding:1.9rem 1.5rem 1.6rem;box-shadow:0 8px 26px rgba(74,56,42,.1)}
.tarif.hervor{border-color:var(--gold);border-width:2px;
  background:linear-gradient(170deg,#FFFDF6,#F6F0E0);
  box-shadow:0 16px 40px rgba(146,111,56,.22)}
.tarif-schild{position:absolute;top:-.85rem;left:50%;transform:translateX(-50%);
  background:linear-gradient(140deg,#C0973F,#926F38);color:#302109;
  font-weight:600;font-size:.86rem;letter-spacing:.03em;white-space:nowrap;
  padding:.28rem 1rem;border-radius:999px;box-shadow:0 4px 12px rgba(146,111,56,.35)}
.tarif h3{font-family:var(--schrift-zier);font-weight:700;font-size:1.9rem;
  color:var(--violett);line-height:1.15}
.tarif-satz{color:var(--tinte);font-size:1.02rem;margin-bottom:.2rem}
.tarif-preis{display:flex;flex-direction:column;gap:.15rem;
  padding:.7rem 0 .3rem;border-top:1px solid rgba(146,111,56,.22);
  border-bottom:1px solid rgba(146,111,56,.22);margin:.2rem 0 .5rem}
.tarif-preis strong{font-family:var(--schrift-zier);font-weight:700;font-size:2.5rem;
  color:var(--gold);line-height:1.05}
.tarif-preis span{font-size:.9rem;font-style:italic;color:var(--ink-soft)}

/* Der Zugang, der gerade läuft: nicht lauter, nur eindeutig. */
.tarif.laeuft{border-color:var(--gras);border-width:2px;
  box-shadow:0 12px 32px rgba(150,176,120,.28)}
.tarif-laeuft{position:absolute;top:-.85rem;left:50%;transform:translateX(-50%);
  background:var(--gras);color:#20300F;font-weight:600;font-size:.86rem;
  letter-spacing:.03em;white-space:nowrap;padding:.28rem 1rem;border-radius:999px;
  box-shadow:0 4px 12px rgba(150,176,120,.4)}
/* Läuft der Zugang, tritt das Schild „Am beliebtesten" zurück – zwei Schilder
   an derselben Stelle wären ein Durcheinander. */
.tarif.laeuft .tarif-schild{display:none}
.kasse-sagt{margin-top:.7rem;font-size:.92rem;line-height:1.5;color:var(--ink-soft)}

/* Aufgebrauchte Kostprobe: ein kleines Schloss, sonst bleibt alles wie es war.
   Nicht ausgrauen – ein Kind soll sehen, dass es das Spiel gibt. */
.spiel-kachel.zu{position:relative}
.spiel-kachel.zu::after{content:"";position:absolute;top:.7rem;right:.7rem;
  width:22px;height:22px;border-radius:50%;background:var(--gold);
  -webkit-mask:var(--schloss) center/13px no-repeat;
  mask:var(--schloss) center/13px no-repeat;
  background-color:var(--gold);opacity:.85}
:root{--schloss:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9h-2zm-8-2a3 3 0 0 1 6 0v2H9V7z'/%3E%3C/svg%3E")}

/* Was ohne Konto geht */
.kostprobe{max-width:44rem;margin:2.6rem auto 0;text-align:center;
  background:rgba(198,176,214,.18);border:1px solid rgba(146,111,56,.28);
  border-radius:22px;padding:clamp(1.3rem,3vw,2rem)}
.kostprobe h3{display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--schrift-zier);font-weight:700;font-size:1.6rem;
  color:var(--violett);margin-bottom:.6rem}
.kostprobe h3 svg{width:20px;height:20px;color:var(--gold)}
.kostprobe p{color:var(--ink-soft);line-height:1.7;margin-bottom:1.2rem}

.an-verwalten{width:100%;justify-content:center;margin-bottom:1rem}

/* ---------- Kontobereich ----------
   Außen die Wege hinein, innen das Konto. Farben kommen aus denselben
   Variablen wie der Anmeldekasten, damit das Ganze auf dunklem Grund
   (Webseite) und hellem (App) funktioniert. */
.k-wege{display:flex;gap:.4rem;margin-bottom:1.3rem;padding:.28rem;
  border-radius:999px;background:var(--an-rand)}
.k-wege button{flex:1;cursor:pointer;border:0;border-radius:999px;
  padding:.55rem .8rem;min-height:40px;background:transparent;
  font-family:var(--schrift);font-weight:600;font-size:.96rem;
  color:var(--an-schrift);opacity:.72;transition:background .2s var(--ease)}
.k-wege button.jetzt{background:var(--an-feld);color:var(--tinte);opacity:1;
  box-shadow:0 2px 6px rgba(74,56,42,.16)}

.k-kopf{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;
  padding-bottom:1.1rem;border-bottom:1px solid var(--an-rand)}
.k-kicker{display:block;font-size:.84rem;letter-spacing:.06em;
  text-transform:uppercase;font-family:var(--schrift);color:var(--an-leise)}
.k-kopf strong{display:block;font-weight:600;color:var(--an-schrift);
  font-size:1.06rem;line-height:1.35;word-break:break-word}
.k-seit{display:block;font-size:.88rem;font-style:italic;color:var(--an-leise)}

.k-teil{padding-top:1.4rem;margin-top:1.4rem;border-top:1px solid var(--an-rand)}
.k-teil:first-of-type{border-top:0;margin-top:1.2rem;padding-top:0}
.k-teil-titel{font-family:var(--schrift);font-weight:600;font-size:.86rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--an-hell);
  margin-bottom:.9rem}

/* Die Lage in einem Satz – das Erste, was man liest. */
.k-lage{padding:.85rem 1.05rem;border-radius:16px;line-height:1.6;
  font-size:.98rem;color:var(--an-schrift);border:1px solid var(--an-rand)}
.k-lage b{font-weight:600}
.k-lage.gut{background:rgba(150,176,120,.2);border-color:rgba(150,176,120,.5)}
.k-lage.warn{background:rgba(190,140,50,.18);border-color:rgba(190,140,50,.5)}
.k-lage.keins{background:rgba(198,176,214,.2)}
.k-klein{margin-top:.7rem;font-size:.9rem;line-height:1.55;color:var(--an-leise)}

.k-tarife{display:grid;gap:.6rem;margin-top:1rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.k-tarif{position:relative;display:flex;flex-direction:column;gap:.35rem;
  padding:.9rem 1rem;border-radius:16px;background:var(--an-feld);
  border:1px solid var(--an-rand)}
.k-tarif strong{font-weight:600;color:var(--violett);font-size:1rem;line-height:1.3}
.k-preis{font-family:var(--schrift-zier);font-weight:700;font-size:1.5rem;
  color:var(--gold);line-height:1.1}
.k-preis em{font-family:var(--schrift);font-style:normal;font-weight:400;
  font-size:.82rem;color:var(--ink-soft)}
.k-tarif .btn{margin-top:.4rem;width:100%;justify-content:center;min-height:40px}
.k-tarif.laeuft{border-color:var(--gras);border-width:2px}
.k-marke{margin-top:.4rem;align-self:flex-start;background:var(--gras);
  color:#20300F;font-family:var(--schrift);font-weight:600;font-size:.84rem;
  padding:.25rem .8rem;border-radius:999px}
.k-knopfreihe{margin-top:1.1rem}
.k-knopfreihe .btn{width:100%;justify-content:center}
.k-innen .an-zeile input{margin-bottom:0}
.tarif-liste{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin:.2rem 0 .4rem}
.tarif-liste li{display:flex;align-items:flex-start;gap:.6rem;font-size:.98rem;line-height:1.5}
.tarif-liste svg{width:18px;height:18px;flex:none;margin-top:.28rem}
.tarif-liste .ja svg{color:var(--gras)}
.tarif-liste .nein{color:var(--ink-soft)}
/* Ein Punkt, der noch wächst: nicht durchgestrichen, nur ehrlich beziffert. */
.tarif-liste .waechst em{display:flex;align-items:center;gap:.35rem;margin-top:.15rem;
  font-size:.84rem;font-style:italic;color:var(--gold)}
.tarif-liste .waechst em svg{width:13px;height:13px;margin:0;flex:none}
.tarif-liste .nein svg{color:rgba(110,88,68,.5)}
.tarif-fuer{margin-top:auto;padding-top:.5rem;font-style:italic;font-size:.94rem;
  color:var(--ink-soft)}
.tarif .btn{width:100%;justify-content:center;margin-top:.7rem}
.tarif-fuss{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;
  margin-top:2rem;font-size:.96rem;color:var(--ink-soft);text-align:center}
.tarif-fuss svg{width:17px;height:17px;color:var(--gold-bright);flex:none}

/* ---------- Elena im Hintergrund der Seitenköpfe ---------- */
.mit-elena{position:relative;isolation:isolate;overflow:hidden}
.mit-elena::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:url(../img/hintergrund-elena.webp);
  background-size:cover;background-position:26% 42%;
  opacity:.92}
/* Der Schleier: dicht, wo Text steht, offen dort, wo Elena steht */
.mit-elena::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(246,240,224,.42) 0%,rgba(246,240,224,.12) 38%,
                    rgba(246,240,224,.8) 86%,var(--creme) 100%),
    radial-gradient(105% 92% at 58% 50%,rgba(253,250,243,.95) 0%,
                    rgba(253,250,243,.78) 40%,rgba(253,250,243,.05) 82%)}
@media (max-width:760px){
  .mit-elena::before{background-position:22% 40%}
  .mit-elena::after{background:
    linear-gradient(180deg,rgba(246,240,224,.6) 0%,rgba(253,250,243,.86) 34%,
                    rgba(253,250,243,.94) 78%,var(--creme) 100%)}
}

/* ---------- Die Landkarte: ruhig, nur Karte und kleine Punkte ---------- */
.karten-kopf{max-width:46rem;margin:0 auto;padding:clamp(2rem,5vw,3.4rem) 1.25rem 1.4rem;
  text-align:center}
.karten-kopf h1{margin:.2rem 0 .8rem}
.karten-kopf p{color:var(--ink-soft)}
.karten-legende{display:flex;justify-content:center;gap:1.4rem;margin-top:1.2rem;
  font-size:.96rem;color:var(--ink-soft)}
.karten-legende span{display:inline-flex;align-items:center;gap:.45rem}
.karten-legende i{width:11px;height:11px;border-radius:50%;border:1.5px solid #fff;
  box-shadow:0 1px 4px rgba(74,56,42,.45)}
.karten-legende i.b1{background:var(--gold)}
.karten-legende i.b2{background:var(--violett)}

.karten-rahmen{max-width:1420px;margin:0 auto;padding:0 1.25rem}
.karten-flaeche{position:relative;border-radius:22px;overflow:hidden;
  box-shadow:0 16px 46px rgba(74,56,42,.2);border:1px solid rgba(146,111,56,.35)}
.karten-flaeche>img{width:100%;height:auto;display:block}

/* Die Punkte bleiben klein – sie sollen die Karte nicht zudecken.
   Auf .karten-flaeche eingegrenzt, damit „ort" anderswo frei bleibt. */
.karten-flaeche .ort{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;
  display:grid;place-items:center;border-radius:50%;
  text-decoration:none;-webkit-tap-highlight-color:transparent}
.karten-flaeche .ort i{width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(255,255,255,.95);
  box-shadow:0 1px 5px rgba(74,56,42,.5);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.karten-flaeche .ort.b1 i{background:var(--gold)}
.karten-flaeche .ort.b2 i{background:var(--violett)}
.karten-flaeche .ort:hover i,.karten-flaeche .ort:focus-visible i{transform:scale(1.9);
  box-shadow:0 2px 10px rgba(74,56,42,.6),0 0 0 4px rgba(253,250,243,.6)}
.karten-flaeche .ort:focus-visible{outline:none}

.ort-fahne{position:absolute;z-index:4;transform:translate(-50%,calc(-100% - 16px));
  min-width:12rem;max-width:min(20rem,72vw);
  background:var(--creme);border:1px solid rgba(146,111,56,.45);border-radius:14px;
  padding:.6rem .85rem;box-shadow:0 12px 30px rgba(74,56,42,.28);
  display:flex;flex-direction:column;gap:.12rem;pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity .16s var(--ease),visibility .16s}
.ort-fahne.da{opacity:1;visibility:visible}
.ort-fahne.unten{transform:translate(-50%,16px)}
.ort-fahne .kopf{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold);font-weight:600}
.ort-fahne strong{font-family:var(--schrift);font-weight:600;font-size:1.04rem;
  color:var(--violett);line-height:1.25}
.ort-fahne .wo{font-style:italic;font-size:.92rem;color:var(--ink-soft)}
.ort-fahne .wesen{margin-top:.25rem;padding-top:.3rem;font-size:.9rem;color:var(--tinte);
  border-top:1px solid rgba(146,111,56,.25)}

.karten-fuss{display:flex;align-items:center;justify-content:center;gap:.55rem;flex-wrap:wrap;
  max-width:46rem;margin:1.6rem auto 0;padding:0 1.25rem clamp(2.4rem,6vw,4rem);
  font-size:.98rem;color:var(--ink-soft);text-align:center}
.karten-fuss svg{width:18px;height:18px;color:var(--gold-bright);flex:none}
@media (max-width:700px){
  .karten-flaeche .ort{width:32px;height:32px;margin:-16px 0 0 -16px}
  .karten-flaeche .ort i{width:9px;height:9px}
}

/* ============================================================
   Die Elena-Welt – der Digitalbereich als kleine Spielwelt
   ============================================================ */
.welt{min-height:calc(100svh - 76px);display:flex;flex-direction:column}
.welt-band{display:flex;align-items:center;gap:1rem;max-width:1240px;width:100%;
  margin:0 auto;padding:.9rem 1.25rem .2rem}
.welt-zurueck{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  background:rgba(246,240,224,.9);border:1.5px solid rgba(146,111,56,.4);border-radius:999px;
  padding:.5rem 1.05rem;min-height:44px;font-family:var(--schrift);font-weight:600;
  font-size:1rem;color:var(--violett);transition:background .2s var(--ease)}
.welt-zurueck:hover{background:#fff}
.welt-zurueck svg{width:17px;height:17px}
.welt-wo{font-family:var(--schrift);font-style:italic;color:var(--gold);font-size:1.02rem}
.schirm{flex:1;display:flex;flex-direction:column}
.schirm[hidden]{display:none}
.schirm-innen{max-width:1240px;width:100%;margin:0 auto;
  padding:clamp(1rem,3vw,2rem) 1.25rem clamp(2.4rem,6vw,4rem)}
.schirm-innen.schmal{max-width:56rem;text-align:center}
.schirm-innen h2{margin-bottom:.8rem}
.fuehrt{color:var(--ink-soft);max-width:44rem;margin:0 auto 1.6rem}

/* ---------- Das Schloss: das Hauptmenü ---------- */
.schloss-buehne{position:relative;isolation:isolate;flex:1;display:flex;align-items:center}
.schloss-bild{position:absolute;inset:0;z-index:-2;
  background:url(../../karte/bilder/karte.webp) center 42%/cover no-repeat}
.schloss-buehne::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(80% 70% at 50% 46%,rgba(253,250,243,.5) 0%,
             rgba(253,250,243,.86) 46%,var(--creme) 82%)}
.schloss-buehne .schirm-innen{text-align:center}
.tore{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));
  gap:1.1rem;margin-top:2rem}
.tor{display:flex;align-items:center;gap:1rem;text-align:left;cursor:pointer;
  background:rgba(253,250,243,.94);border:1.5px solid rgba(146,111,56,.4);
  border-radius:22px;padding:1.1rem 1.2rem;min-height:96px;
  box-shadow:0 8px 26px rgba(74,56,42,.14);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),
             border-color .28s var(--ease)}
.tor:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(74,56,42,.2);
  border-color:var(--gold)}
.tor-zeichen{width:60px;height:60px;flex:none;display:grid;place-items:center;
  border-radius:18px;color:#fff}
.tor-zeichen svg{width:30px;height:30px}
.tor-violett .tor-zeichen{background:linear-gradient(150deg,#7A4E82,#4A2E50)}
.tor-gold .tor-zeichen{background:linear-gradient(150deg,#C0973F,#926F38)}
.tor-rose .tor-zeichen{background:linear-gradient(150deg,#D3A0A8,#B3607A)}
.tor-gruen .tor-zeichen{background:linear-gradient(150deg,#A9C089,#5A7B44)}
.tor-nacht .tor-zeichen{background:linear-gradient(150deg,#5D7AAF,#304878)}
.tor-text{display:flex;flex-direction:column;gap:.2rem}
.tor-text strong{font-family:var(--schrift-zier);font-weight:700;font-size:1.5rem;
  color:var(--violett);line-height:1.15}
.tor-text small{font-size:.96rem;color:var(--ink-soft);line-height:1.45}

/* ---------- Zwei Wege zu den Geschichten ---------- */
.wege{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:1.4rem;margin:2rem 0 2.4rem}
.weg{position:relative;isolation:isolate;overflow:hidden;cursor:pointer;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  background:#fff;border:1.5px solid rgba(146,111,56,.4);border-radius:24px;
  padding:2.4rem 1.4rem 1.8rem;box-shadow:0 8px 26px rgba(74,56,42,.14);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.weg:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(74,56,42,.22)}
.weg-bild{position:absolute;inset:0;z-index:-2;opacity:.5;
  background-size:cover;background-position:center}
.weg::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(253,250,243,.5) 0%,rgba(253,250,243,.9) 58%,
              rgba(253,250,243,.98) 100%)}
.figuren-bild{background-image:url(../../karte/bilder/fig-elena.webp);
  background-size:auto 88%;background-repeat:no-repeat;background-position:82% 108%}
.karten-bild{background-image:url(../../karte/bilder/karte.webp);
  background-position:center 38%}
.weg-zeichen{width:64px;height:64px;display:grid;place-items:center;border-radius:20px;
  background:linear-gradient(150deg,#7A4E82,#4A2E50);color:#fff}
.weg-zeichen svg{width:32px;height:32px}
.weg strong{font-family:var(--schrift-zier);font-weight:700;font-size:1.6rem;
  color:var(--violett)}
.weg small{font-size:.98rem;color:var(--ink-soft);line-height:1.5;max-width:22rem}

/* ---------- Die Figuren ---------- */
.figuren-titel{font-family:var(--schrift);font-weight:600;font-size:.86rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gold);
  margin:2rem 0 .9rem;padding-bottom:.4rem;border-bottom:1px solid rgba(146,111,56,.28)}
.figuren-reihe{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));
  gap:1rem;align-items:stretch}
.figur{display:flex;flex-direction:column;align-items:center;gap:.28rem;cursor:pointer;
  background:#fff;border:1.5px solid rgba(146,111,56,.3);border-radius:20px;
  padding:1rem .7rem .9rem;text-align:center;
  box-shadow:0 5px 16px rgba(74,56,42,.1);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),
             border-color .26s var(--ease)}
.figur:hover{transform:translateY(-4px);border-color:var(--gold);
  box-shadow:0 14px 30px rgba(74,56,42,.18)}
.figur-bild{width:100%;height:clamp(104px,11vw,136px);display:block;
  margin-bottom:.5rem;overflow:hidden}
/* Feste Höhe plus object-fit – so bleibt jedes Porträt im Rahmen,
   egal ob es hoch (Feen) oder breit (Frösche) ist. */
.figur-bild img{width:100%;height:100%;object-fit:contain;object-position:bottom center;
  filter:drop-shadow(0 4px 8px rgba(74,56,42,.2))}
.figur strong{font-family:var(--schrift);font-weight:600;font-size:1.04rem;
  color:var(--violett);line-height:1.2}
.figur small{font-size:.86rem;font-style:italic;color:var(--ink-soft);line-height:1.3}
.figur-zahl{margin-top:auto;padding-top:.45rem;font-size:.82rem;font-weight:600;
  color:var(--gold)}
.figur-zahl.leer{color:var(--ink-soft);font-weight:400;font-style:italic}

/* ---------- Ein Blatt über allem ---------- */
.welt-blatt{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:clamp(.8rem,4vw,2rem);background:rgba(46,33,26,.46);
  opacity:0;visibility:hidden;transition:opacity .26s var(--ease),visibility .26s}
.welt-blatt.da{opacity:1;visibility:visible}
body.blatt-offen{overflow:hidden}
.blatt-innen{position:relative;background:var(--creme);border-radius:26px;
  border:1px solid rgba(146,111,56,.4);box-shadow:0 26px 64px rgba(0,0,0,.36);
  max-width:44rem;width:100%;max-height:88svh;overflow-y:auto;
  padding:clamp(1.4rem,4vw,2.2rem)}
.blatt-zu{position:absolute;top:.9rem;right:.9rem;width:42px;height:42px;cursor:pointer;
  border-radius:50%;border:1px solid rgba(146,111,56,.4);background:#fff;
  color:var(--violett);font-size:1.1rem;line-height:1}
.figur-blatt{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:1.4rem;align-items:start}
.figur-gross{width:100%;height:auto;filter:drop-shadow(0 8px 16px rgba(74,56,42,.24))}
.figur-blatt h2{font-size:clamp(1.7rem,3.4vw,2.3rem);margin:.1rem 0 .6rem}
.figur-blatt p{color:var(--ink-soft)}
.blatt-titel{font-family:var(--schrift);font-weight:600;font-size:.86rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin:1.4rem 0 .7rem}
.mini-liste{display:flex;flex-direction:column;gap:.5rem}
.mini-geschichte{display:flex;align-items:center;gap:.85rem;cursor:pointer;text-align:left;
  background:#fff;border:1px solid rgba(146,111,56,.3);border-radius:14px;padding:.5rem;
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.mini-geschichte:hover{background:#FDFAF0;border-color:var(--gold)}
.mini-geschichte img{width:76px;height:57px;object-fit:cover;border-radius:9px;flex:none}
.mini-geschichte span{display:flex;flex-direction:column;font-size:1rem;color:var(--violett);
  font-weight:600;line-height:1.3}
.mini-geschichte em{font-style:italic;font-weight:400;font-size:.86rem;color:var(--gold)}
@media (max-width:560px){.figur-blatt{grid-template-columns:1fr;text-align:center}
  .figur-gross{max-width:180px;margin:0 auto}}

/* ---------- Die Landkarte in der Welt ---------- */
.welt-karte{position:relative;max-width:1400px;width:100%;margin:0 auto;
  padding:0 1.25rem clamp(2rem,5vw,3rem)}
.welt-karte>img{width:100%;height:auto;display:block;border-radius:22px;
  box-shadow:0 16px 46px rgba(74,56,42,.2);border:1px solid rgba(146,111,56,.35)}
.welt-ort{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;cursor:pointer;
  display:grid;place-items:center;background:none;border:0;padding:0}
.welt-ort i{width:17px;height:17px;border-radius:50%;border:2.5px solid #fff;
  box-shadow:0 2px 8px rgba(74,56,42,.5);
  transition:transform .24s var(--ease)}
.welt-ort.b1 i{background:var(--gold)}
.welt-ort.b2 i{background:var(--violett)}
.welt-ort:hover i,.welt-ort:focus-visible i{transform:scale(1.45)}
.welt-schild{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  white-space:nowrap;background:var(--creme);border:1px solid rgba(146,111,56,.45);
  border-radius:11px;padding:.32rem .7rem;font-size:.92rem;font-weight:600;
  color:var(--violett);box-shadow:0 6px 18px rgba(74,56,42,.24);pointer-events:none;
  opacity:0;transition:opacity .18s var(--ease)}
.welt-ort:hover .welt-schild,.welt-ort:focus-visible .welt-schild{opacity:1}

/* ---------- Eine Geschichte ---------- */
.geschichte-blatt{max-width:1080px;width:100%;margin:0 auto;
  padding:clamp(1rem,3vw,2rem) 1.25rem clamp(2.4rem,6vw,4rem);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  gap:clamp(1.4rem,4vw,2.6rem);align-items:center}
.g-bild img{width:100%;height:auto;border-radius:20px;
  box-shadow:0 14px 38px rgba(74,56,42,.22);border:1px solid rgba(146,111,56,.3)}
.g-text h2{font-size:clamp(1.9rem,4vw,2.8rem);margin:.15rem 0 .6rem}
.g-wesen{color:var(--ink-soft);font-style:italic;margin-bottom:1.2rem}
.g-knoepfe{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.2rem}
.btn.gross{font-size:1.1rem;padding:.9rem 1.7rem;min-height:56px}
.g-fehlt{display:inline-flex;align-items:center;gap:.5rem;font-style:italic;
  font-size:.98rem;color:var(--ink-soft);padding:.9rem 0}
.g-fehlt svg{width:20px;height:20px;color:var(--gold-bright)}
.g-hinweis{font-size:.98rem;color:var(--ink-soft)}

/* ---------- Bereichsseiten ---------- */
.bereich-liste{list-style:none;display:flex;flex-direction:column;gap:.7rem;
  max-width:32rem;margin:0 auto 2rem;text-align:left}
.bereich-liste li{display:flex;align-items:flex-start;gap:.7rem;font-size:1.04rem}
.bereich-liste svg{width:19px;height:19px;color:var(--gold-bright);flex:none;margin-top:.3rem}
.bald{display:inline-flex;align-items:center;gap:.5rem;font-style:italic;color:var(--gold);
  margin-bottom:1.6rem}
.bald svg{width:18px;height:18px;flex:none}

/* ---------- Filmfenster in der Welt ---------- */
.film-welt{position:fixed;inset:0;z-index:200;display:none;background:rgba(28,19,42,.96);
  align-items:center;justify-content:center;padding:clamp(.6rem,3vw,2rem);
  flex-direction:column;gap:.9rem}
.film-welt.offen{display:flex}
.film-welt .kopf{display:flex;align-items:center;gap:.9rem;width:min(1100px,100%);color:#EFE7F8}
.film-welt .kopf .wo{font-family:var(--schrift);font-style:italic;font-size:1rem;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.film-welt .kopf button{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  color:#fff;border-radius:999px;padding:.5rem 1rem;font-family:var(--schrift);font-weight:600;
  font-size:.94rem;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:.45rem}
.film-welt .kopf svg{width:17px;height:17px}
.film-welt video{width:min(1100px,100%);max-height:78svh;border-radius:18px;background:#000;
  box-shadow:0 26px 70px rgba(0,0,0,.6)}

/* ---------- Leser: Zoom ---------- */
.leser-kopf .lupen{display:inline-flex;gap:.35rem}
.leser-knopf.rund{width:44px;height:44px;padding:0;justify-content:center}
.leser-knopf:disabled{opacity:.35;cursor:default}
.seite img{transform-origin:center center;
  transition:transform .28s var(--ease),opacity .35s var(--ease)}
/* Beim Ziehen und Zwicken darf nichts nachlaufen */
.seite img.fasst{transition:none}
.seite.gezoomt{cursor:grab;touch-action:none}
.seite.gezoomt:active{cursor:grabbing}
.seite.gezoomt img{box-shadow:0 26px 70px rgba(0,0,0,.75)}
/* Bei vergrößerter Seite stören die Blätterflächen */
.seite.gezoomt~.blaettern{opacity:0;pointer-events:none}
.seite.halb img{max-width:none;max-height:100%;width:auto;height:100%}
.g-knoepfe.zweite{margin-top:-.4rem}
.g-knoepfe.zweite .btn{font-size:.98rem;padding:.68rem 1.3rem;min-height:48px}

/* ---------- Tore, die noch gebaut werden ---------- */
.tor.bald{cursor:default;opacity:.55;filter:grayscale(.85);
  background:rgba(246,240,224,.7);border-style:dashed;box-shadow:none;
  position:relative}
.tor.bald:hover{transform:none;box-shadow:none;border-color:rgba(146,111,56,.4)}
.tor.bald .tor-text strong{color:var(--tinte-weich)}
.tor-schild{position:absolute;top:.7rem;right:.9rem;font-style:italic;font-size:.84rem;
  color:var(--gold);letter-spacing:.02em}

/* ---------- Die Bücher am Stück ---------- */
.buch-blatt{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.2rem);align-items:start;
  background:#fff;border:1px solid rgba(146,111,56,.34);border-radius:24px;
  padding:clamp(1.3rem,3vw,2rem);margin-top:1.6rem;
  box-shadow:0 8px 26px rgba(74,56,42,.12)}
.buch-deckel{width:100%}
.buch-text h3{font-family:var(--schrift-zier);font-weight:700;
  font-size:clamp(1.6rem,3vw,2.2rem);color:var(--violett);margin:.1rem 0 .5rem}
.buch-text p{color:var(--ink-soft);margin-bottom:1.1rem}
.buch-knoepfe{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1rem}
.buch-stand{display:flex;align-items:center;gap:.5rem;font-size:.95rem;
  color:var(--ink-soft);font-style:italic}
.buch-stand svg{width:16px;height:16px;color:var(--gold-bright);flex:none}
.buch-filme{grid-column:1/-1;padding-top:1.2rem;margin-top:.4rem;
  border-top:1px solid rgba(146,111,56,.24)}
.buch-filme h4{font-family:var(--schrift);font-weight:600;font-size:.86rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.film-reihe{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.9rem}
.film-kachel{display:flex;flex-direction:column;gap:.45rem;cursor:pointer;text-align:left;
  background:none;border:0;padding:0}
.film-kachel img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;
  border:1px solid rgba(146,111,56,.3);transition:transform .25s var(--ease)}
.film-kachel:hover img{transform:translateY(-3px)}
.film-kachel span{font-size:.94rem;font-weight:600;color:var(--violett);line-height:1.3}
@media (max-width:640px){.buch-blatt{grid-template-columns:1fr}
  .buch-deckel{max-width:180px;margin:0 auto}}

/* ---------- Für Eltern ---------- */
.eltern-kopf{max-width:46rem;margin:0 auto 2.4rem;text-align:center}
.eltern-kopf h2{margin:.2rem 0 .9rem}
.eltern-kopf p{color:var(--ink-soft)}
.eltern-tipp{display:inline-flex;align-items:flex-start;gap:.55rem;margin-top:1.2rem;
  background:rgba(198,176,214,.24);border:1px solid rgba(146,111,56,.24);
  border-radius:16px;padding:.75rem 1.1rem;text-align:left;font-size:1rem;color:var(--tinte)}
.eltern-tipp svg{width:17px;height:17px;color:var(--gold);flex:none;margin-top:.25rem}

/* Der Zauberspruch – die Regel hinter der ganzen Reihe */
.zauber-teil{margin:3rem 0 3.4rem;padding:clamp(1.4rem,4vw,2.6rem);
  background:linear-gradient(165deg,rgba(198,176,214,.2),rgba(246,240,224,.75));
  border:1px solid rgba(146,111,56,.3);border-radius:26px}
.zauber-vor{max-width:44rem;margin:1.2rem auto 0;text-align:center;color:var(--ink-soft)}
.zauber-vor p+p{margin-top:.7rem}
.blueten{list-style:none;display:grid;gap:1rem;margin-top:2rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.blueten li{background:#fff;border:1px solid rgba(146,111,56,.26);border-radius:20px;
  padding:1.2rem 1.3rem}
.bl-schritt{font-family:var(--schrift);font-weight:600;font-size:.78rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold)}
.blueten strong{display:block;font-family:var(--schrift-zier);font-weight:700;
  font-size:1.55rem;color:var(--violett);line-height:1.2;margin:.1rem 0 .5rem}
.blueten p{font-size:.98rem;color:var(--ink-soft);line-height:1.6}
.zauber-formel{margin-top:1.8rem;background:rgba(253,250,243,.92);
  border:1px solid rgba(146,111,56,.26);border-radius:22px;padding:clamp(1.2rem,3vw,1.8rem)}
.zauber-formel>h3{font-size:1.1rem;margin-bottom:1.1rem}
.spruch-teile{list-style:none;display:flex;flex-direction:column;gap:1.1rem}
.spruch-teile li{display:flex;gap:.9rem;align-items:flex-start}
.teil-nr{flex:none;width:1.9rem;height:1.9rem;border-radius:50%;
  display:grid;place-items:center;background:var(--flieder);color:var(--violett);
  font-family:var(--schrift);font-weight:600;font-size:.95rem;margin-top:.15rem}
.spruch-teile strong{font-weight:600;color:var(--violett)}
.spruch-teile p{font-size:.98rem;color:var(--ink-soft);line-height:1.6}
.spruch{margin-top:.5rem;padding:.6rem .9rem;border-left:3px solid rgba(146,111,56,.4);
  font-style:italic;color:var(--tinte);line-height:1.75}
.spruch.gold{border-left-color:var(--gold);color:var(--gold);
  font-family:var(--schrift-zier);font-style:normal;font-weight:700;font-size:1.35rem;
  line-height:1.5}
.zauber-quelle{margin-top:1.1rem;font-size:.9rem;font-style:italic;color:var(--ink-soft)}
.zauber-paar{display:grid;gap:1rem;margin-top:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.zauber-karte{background:rgba(48,72,120,.07);border:1px solid rgba(48,72,120,.24);
  border-radius:20px;padding:1.2rem 1.3rem}
.zauber-karte.hell{background:rgba(232,196,190,.24);border-color:rgba(146,111,56,.3)}
.zauber-karte h3{display:flex;align-items:center;gap:.5rem;font-size:1.05rem;
  margin-bottom:.5rem}
.zauber-karte svg{width:18px;height:18px;flex:none;color:var(--gold)}
.zauber-karte p{font-size:.98rem;color:var(--ink-soft);line-height:1.6}
.zauber-tipps{margin-top:1.4rem}
.zauber-tipps h3{font-size:1rem;margin-bottom:.6rem}
.zauber-tipps ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.zauber-tipps li{position:relative;padding-left:1.4rem;font-size:.98rem;
  color:var(--ink-soft);line-height:1.6}
.zauber-tipps li::before{content:"";position:absolute;left:.25rem;top:.72em;
  width:.42rem;height:.42rem;border-radius:50%;background:var(--gold)}

/* Material zum Herunterladen */
.extras-teil{margin:0 0 3rem;padding:clamp(1.4rem,4vw,2.4rem);
  background:linear-gradient(165deg,rgba(232,196,190,.22),rgba(246,240,224,.7));
  border:1px solid rgba(146,111,56,.3);border-radius:26px}
.extras-teil .listen-kopf p{color:var(--ink-soft);margin-top:.7rem;
  max-width:40rem;margin-left:auto;margin-right:auto}
.extras-gruppe{font-family:var(--schrift);font-weight:600;font-size:.86rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
  margin:1.8rem 0 .8rem}
.extras-gitter{display:grid;gap:.8rem;
  grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
.extra{display:flex;gap:.9rem;align-items:flex-start;text-align:left;
  cursor:pointer;background:#fff;border:1px solid rgba(146,111,56,.28);
  border-radius:18px;padding:1rem 1.1rem;font-family:var(--schrift);
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.extra:hover{border-color:var(--gold);transform:translateY(-2px)}
.extra-zeichen{flex:none;display:grid;place-items:center;width:34px;height:34px;
  border-radius:10px;background:rgba(198,176,214,.3);color:var(--violett)}
.extra-zeichen svg{width:18px;height:18px}
.extra-text strong{display:block;font-weight:600;color:var(--violett);
  font-size:1.02rem;line-height:1.3}
.extra-text small{display:block;margin-top:.2rem;font-size:.9rem;
  color:var(--ink-soft);line-height:1.5}
.extra.laedt{opacity:.55;pointer-events:none}
.extras-fuss{display:flex;gap:.5rem;align-items:flex-start;margin-top:1.6rem;
  font-size:.94rem;color:var(--ink-soft);line-height:1.6}
.extras-fuss svg{width:16px;height:16px;color:var(--gold);flex:none;margin-top:.3rem}

/* Die Werte, Band für Band */
.werte-kopf{margin-top:3rem}
.werte-kopf p{color:var(--ink-soft);margin-top:.7rem;max-width:42rem;
  margin-left:auto;margin-right:auto}
.eltern-band{margin-top:1.2rem;background:rgba(253,250,243,.85);
  border:1px solid rgba(146,111,56,.28);border-left:5px solid var(--gold);
  border-radius:20px;padding:0 clamp(1rem,3vw,1.6rem)}
.eltern-band.b2{border-left-color:var(--violett)}
.eltern-band.b3{border-left-color:var(--gras)}
.eltern-band.b4{border-left-color:var(--nacht)}
.eltern-band.b5{border-left-color:var(--rose)}
.eltern-band>summary{list-style:none;cursor:pointer;padding:1.25rem 0;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .8rem}
.eltern-band>summary::-webkit-details-marker{display:none}
.eltern-band>summary::after{content:"";margin-left:auto;width:.6rem;height:.6rem;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg);transition:transform .25s ease;align-self:center}
.eltern-band[open]>summary::after{transform:rotate(-135deg)}
.eltern-band>summary .script{font-size:1.15rem}
.eltern-band>summary strong{font-family:var(--schrift-zier);font-weight:700;
  font-size:1.6rem;color:var(--violett);line-height:1.2}
.eb-zahl{width:100%;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;
  font-family:var(--schrift);color:var(--gold)}
.eltern-einleitung{color:var(--ink-soft);max-width:44rem;margin-bottom:.4rem}
.eltern-band .wert:last-child{margin-bottom:1.5rem}
.wert-uebt{font-size:.98rem;color:var(--ink-soft);line-height:1.6;margin-bottom:1.1rem;
  padding-left:.9rem;border-left:2px solid rgba(146,111,56,.3)}
.wert{background:#fff;border:1px solid rgba(146,111,56,.3);border-radius:22px;
  padding:clamp(1.2rem,3vw,1.8rem);margin-top:1.3rem;
  box-shadow:0 6px 20px rgba(74,56,42,.1)}
.wert-nr{font-family:var(--schrift);font-weight:600;font-size:.8rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold)}
.wert h3{font-family:var(--schrift-zier);font-weight:700;font-size:1.7rem;
  color:var(--violett);margin:.15rem 0 .2rem}
.wert-satz{font-style:italic;color:var(--ink-soft);margin-bottom:.7rem}
.wert-tafel{overflow-x:auto;-webkit-overflow-scrolling:touch}
.wert-tafel table{width:100%;border-collapse:collapse;min-width:38rem;font-size:.98rem}
.wert-tafel th{text-align:left;font-family:var(--schrift);font-weight:600;font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
  padding:.4rem .7rem;border-bottom:1px solid rgba(146,111,56,.3);white-space:nowrap}
.wert-tafel td{padding:.7rem;border-bottom:1px solid rgba(146,111,56,.16);
  vertical-align:top;line-height:1.5}
.wert-tafel tr:last-child td{border-bottom:0}
.wert-tafel .nr{font-family:var(--schrift-zier);font-weight:700;font-size:1.35rem;
  color:var(--gold);width:2.8rem;text-align:center;line-height:1.3;
  padding-left:.2rem;padding-right:.2rem}
.wert-tafel .was{width:30%;min-width:13rem}
.wert-tafel .was strong{display:block;color:var(--violett);font-weight:600;line-height:1.35}
.wert-tafel .was .ort{display:block;margin-top:.15rem;
  font-size:.86rem;font-style:italic;color:var(--ink-soft);line-height:1.35}
.wert-tafel .echt{color:var(--tinte);font-weight:600}
.eltern-kanon{margin-top:3rem;padding-top:2.4rem;border-top:1px solid rgba(146,111,56,.28)}
.ebenen{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:1.2rem;margin-top:1.8rem}
.ebene{background:rgba(253,250,243,.9);border:1px solid rgba(146,111,56,.28);
  border-radius:20px;padding:1.3rem 1.4rem}
.ebene h3{font-family:var(--schrift);font-weight:600;font-size:1rem;color:var(--violett);
  margin-bottom:.8rem;padding-bottom:.5rem;border-bottom:1px solid rgba(146,111,56,.24)}
.ebene ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.ebene li{display:flex;flex-direction:column}
.ebene strong{font-weight:600;color:var(--tinte);font-size:.98rem}
.ebene span{font-style:italic;color:var(--ink-soft);font-size:.94rem}

/* ---------- Elena und Freunde ---------- */
.freunde-kopf{position:relative;isolation:isolate;overflow:hidden;text-align:center;
  padding:clamp(2.6rem,6vw,4.4rem) 1.25rem clamp(2rem,5vw,3rem)}
.freunde-kopf .innen{max-width:44rem;margin:0 auto}
.freunde-kopf h1{margin:.2rem 0 .9rem}
.freunde-kopf p{color:var(--ink-soft)}

.haupt-zwei{max-width:1180px;margin:0 auto;padding:0 1.25rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(21rem,1fr));gap:1.6rem}
.haupt-figur{display:grid;grid-template-columns:minmax(0,132px) minmax(0,1fr);
  gap:1.3rem;align-items:center;
  background:#fff;border:1px solid rgba(146,111,56,.34);border-radius:24px;
  padding:clamp(1.2rem,3vw,1.8rem);box-shadow:0 8px 26px rgba(74,56,42,.13)}
.haupt-bild img{width:100%;height:auto;filter:drop-shadow(0 6px 14px rgba(74,56,42,.24))}
.haupt-figur h2{font-size:clamp(1.7rem,3.2vw,2.3rem);margin:.1rem 0 .5rem}
.haupt-figur p{color:var(--ink-soft);font-size:1rem;line-height:1.6}

.freunde-gruppe{max-width:1180px;margin:0 auto;padding:clamp(2.4rem,6vw,4rem) 1.25rem 0}
.freunde-gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:1.2rem;margin-top:2rem}
.freund{display:flex;flex-direction:column;gap:.3rem;
  background:#fff;border:1px solid rgba(146,111,56,.3);border-radius:20px;
  padding:1.2rem 1.2rem 1.3rem;box-shadow:0 6px 20px rgba(74,56,42,.1);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),
             border-color .26s var(--ease)}
.freund:hover{transform:translateY(-4px);border-color:var(--gold);
  box-shadow:0 14px 32px rgba(74,56,42,.17)}
.freund-bild{width:100%;height:clamp(120px,14vw,158px);margin-bottom:.6rem}
.freund-bild img{width:100%;height:100%;object-fit:contain;object-position:bottom center;
  filter:drop-shadow(0 5px 10px rgba(74,56,42,.2))}
.freund h3{font-family:var(--schrift);font-weight:600;font-size:1.12rem;
  color:var(--violett);line-height:1.25}
.freund-art{font-style:italic;font-size:.92rem;color:var(--gold);margin-bottom:.3rem}
.freund-text{font-size:.96rem;line-height:1.55;color:var(--ink-soft)}
.freund-zahl{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;
  padding-top:.7rem;font-size:.86rem;font-weight:600;color:var(--gold)}
.freund-zahl svg{width:14px;height:14px;flex:none}
.freunde-schluss{max-width:1180px;margin:0 auto;
  padding:clamp(2.6rem,6vw,4rem) 1.25rem clamp(2.6rem,6vw,4rem)}
@media (max-width:560px){
  .haupt-figur{grid-template-columns:1fr;text-align:center}
  .haupt-bild{max-width:140px;margin:0 auto}
}

/* ============================================================
   Startseite – fester Grund, Inhalt zieht darüber
   ============================================================ */
/* Der Hintergrund liegt fest im Fenster. Kein background-attachment:fixed,
   weil das auf iOS nicht verlässlich ist – eine eigene feste Ebene ist es. */
.grund{position:fixed;inset:0;z-index:-2;
  background:#2E1F33 url(img/intro-schluss.webp) center 44%/cover no-repeat}
.grund-schleier{position:fixed;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(46,31,51,.28) 0%,rgba(46,31,51,.16) 22%,
             rgba(46,31,51,.5) 62%,rgba(46,31,51,.72) 100%)}
/* Wo der Browser es kann, fährt der Grund beim Scrollen sanft mit und der
   Schleier zieht zu – scroll-gebunden, also außerhalb des Hauptstrangs. */
@supports (animation-timeline: scroll()){
  .grund{animation:grund-fahrt linear both;animation-timeline:scroll(root block)}
  .grund-schleier{animation:grund-schleier linear both;animation-timeline:scroll(root block)}
  @keyframes grund-fahrt{
    from{transform:scale(1.04) translate3d(0,0,0)}
    to{transform:scale(1.14) translate3d(0,-3.5%,0)}}
  @keyframes grund-schleier{from{opacity:.5}to{opacity:1}}
}
@media (prefers-reduced-motion:reduce){
  .grund{animation:none;transform:none}
  .grund-schleier{animation:none;opacity:1}
}
body:has(.grund){background:#2E1F33}

/* ---------- Die Titelfläche ---------- */
.heim-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.2rem;text-align:center;
  padding:6rem 1.25rem 5rem}
.heim-hero .hero-logo{width:min(clamp(260px,40vw,430px),84vw);margin:0 auto .4rem;
  line-height:0}
.heim-hero .hero-logo img{width:100%;height:auto;
  filter:drop-shadow(0 4px 26px rgba(46,31,51,.55))}
.hero-claim{max-width:34rem;font-size:clamp(1.05rem,2.1vw,1.24rem);line-height:1.6;
  color:var(--creme);text-shadow:0 2px 14px rgba(46,31,51,.75);margin-bottom:1.5rem}
.heim-weiter{position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);
  width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  color:var(--creme);background:rgba(46,31,51,.4);
  border:1px solid rgba(246,240,224,.35);text-decoration:none;
  animation:heim-winkt 3.4s ease-in-out infinite}
.heim-weiter svg{width:18px;height:18px}
@keyframes heim-winkt{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
@media (prefers-reduced-motion:reduce){.heim-weiter{animation:none}}

/* ---------- Die Abschnitte ziehen über den Grund ---------- */
.heim{min-height:88svh;display:flex;align-items:center;justify-content:center;
  padding:clamp(3rem,9vw,7rem) 1.25rem}
.heim .blatt{max-width:40rem;width:100%;
  background:rgba(253,250,243,.93);border:1px solid rgba(146,111,56,.4);
  border-radius:26px;padding:clamp(1.6rem,4vw,2.6rem);
  box-shadow:0 22px 60px rgba(20,12,26,.4);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;transform:translateY(18px);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
.heim .blatt.breit{max-width:62rem}
.heim.da .blatt{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .heim .blatt{opacity:1;transform:none;transition:none}}
.heim h2{margin:.15rem 0 .8rem}
.heim p{color:var(--ink-soft)}
.heim .blatt>p+p{margin-top:.9rem}
.heim-knoepfe{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.heim-knoepfe.mitte{justify-content:center;margin-top:.4rem}
.heim-marken{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.heim-marken span{background:rgba(198,176,214,.3);border:1px solid rgba(146,111,56,.26);
  border-radius:999px;padding:.3rem .85rem;font-size:.94rem;font-weight:600;
  color:var(--violett)}

/* ---------- Der Zauberspruch ---------- */
.spruch-blatt{text-align:center}
.spruch-zeilen{font-family:var(--schrift-zier);font-weight:700;
  font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1.35;color:var(--violett);
  margin:.6rem 0 1.2rem}

/* ---------- Bücherregal auf der Startseite ---------- */
.heim-regal{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:1.4rem;margin-top:1.8rem;align-items:end}
.heim-regal .regal-platz{display:flex;flex-direction:column;align-items:center;gap:.7rem;
  text-decoration:none;transition:transform .3s var(--ease)}
.heim-regal .regal-platz:hover{transform:translateY(-6px)}
.heim-regal .name{font-family:var(--schrift);font-weight:600;font-size:1rem;
  color:var(--violett);text-align:center}

/* ---------- Freunde auf der Startseite ---------- */
.heim-freunde{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));
  gap:1rem;margin-top:1.6rem}
.freund-kachel{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.freund-kachel img{width:100%;height:clamp(78px,9vw,104px);object-fit:contain;
  object-position:bottom center;filter:drop-shadow(0 4px 9px rgba(74,56,42,.22))}
.freund-kachel em{font-style:normal;font-size:.9rem;font-weight:600;color:var(--violett);
  text-align:center;line-height:1.25}

/* ---------- Die Liste im Digitalabschnitt ---------- */
.heim-liste{list-style:none;display:flex;flex-direction:column;gap:.7rem;margin-top:1.3rem}
.heim-liste li{display:flex;align-items:flex-start;gap:.7rem;font-size:1rem;
  color:var(--ink-soft);line-height:1.55}
.heim-liste strong{color:var(--tinte);font-weight:600}
.heim-liste svg{width:19px;height:19px;color:var(--gold);flex:none;margin-top:.25rem}

/* ---------- Punkteleiste rechts ---------- */
.heim-leiste{position:fixed;right:.9rem;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:.62rem}
.heim-leiste button{width:26px;height:26px;display:grid;place-items:center;
  background:none;border:0;cursor:pointer;padding:0}
.heim-leiste span{width:9px;height:9px;border-radius:50%;
  background:rgba(246,240,224,.5);border:1px solid rgba(46,31,51,.35);
  transition:background .3s var(--ease),transform .3s var(--ease)}
.heim-leiste button:hover span{transform:scale(1.3)}
.heim-leiste .hier span{background:var(--gold-schimmer);transform:scale(1.45)}
@media (max-width:760px){.heim-leiste{display:none}}

/* ---------- Eröffnungsfilm ---------- */
.auftakt{position:fixed;inset:0;z-index:80;background:#2E1F33;
  transition:opacity 1.1s var(--ease)}
.auftakt-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block}
/* Startet der Film nicht von selbst, gibt die Fläche den Blick auf den
   Grund frei – man sieht das Standbild und kann den Film dazuholen. */
.auftakt.wartet{background:transparent;pointer-events:none}
.auftakt.wartet .auftakt-film{opacity:0}
.auftakt.wartet .auftakt-knoepfe{pointer-events:auto}
.auftakt.weg{opacity:0;pointer-events:none}
body.auftakt-laeuft{overflow:hidden}
.auftakt-knoepfe{position:absolute;right:1.1rem;bottom:1.1rem;display:flex;gap:.5rem}
.auftakt-knoepfe button{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  background:rgba(46,31,51,.55);color:var(--creme);
  border:1px solid rgba(246,240,224,.42);border-radius:999px;
  padding:.5rem 1.05rem;min-height:44px;
  font-family:var(--schrift);font-weight:600;font-size:.96rem;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .22s var(--ease)}
.auftakt-knoepfe button:hover{background:rgba(46,31,51,.8)}
.auftakt-knoepfe svg{width:17px;height:17px;flex:none}
@media (max-width:640px){
  .auftakt-knoepfe{right:.7rem;bottom:.7rem;gap:.4rem}
  .auftakt-knoepfe button{font-size:.88rem;padding:.45rem .8rem}
}

/* Auf der Startseite steht die Fußzeile über dem Grund */
body:has(.grund) footer{position:relative;z-index:1}

/* Alle fünf Bände sind erschienen – jeder Band hat seine eigene Farbe */
.karten-legende i.b3,.karten-flaeche .ort.b3 i,.welt-ort.b3 i{background:var(--gras)}
.karten-legende i.b4,.karten-flaeche .ort.b4 i,.welt-ort.b4 i{background:var(--nacht)}
.karten-legende i.b5,.karten-flaeche .ort.b5 i,.welt-ort.b5 i{background:var(--rose)}

/* ---------- Geschichte ohne Doppelseite: nur Titel und Ort ---------- */
.karte-text{padding:1.2rem 1.2rem 1.3rem;gap:.5rem;
  background:linear-gradient(165deg,#FFFDF6,#F3ECDA)}
.karte-text .txt{padding:0;gap:.5rem}
.karte-text .nr-klein{font-family:var(--schrift-zier);font-weight:700;font-size:1.5rem;
  color:var(--gold);line-height:1}
.karte-text .wo-klein{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  margin-top:auto;padding-top:.6rem;font-size:.94rem;color:var(--tinte)}
.karte-text .wo-klein svg{width:16px;height:16px;flex:none;color:var(--gold)}
.karte-text .wo-klein em{font-style:italic;color:var(--ink-soft)}

/* ---------- Band 4: die Wesen der Nacht ---------- */
.kopfbereich.nacht{background:
   radial-gradient(900px 420px at 78% -10%,rgba(93,122,175,.34),transparent 62%),
   radial-gradient(760px 400px at 8% 20%,rgba(198,176,214,.36),transparent 62%),
   linear-gradient(180deg,#EDE9F2,#F6F0E0)}
.kopf-innen.einspaltig{grid-template-columns:1fr;max-width:48rem;text-align:center}
.kopf-innen.einspaltig .kopf-knoepfe,.kopf-innen.einspaltig .fakten{justify-content:center}
.liste.schmal{max-width:52rem}

.wesen-gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));
  gap:1.3rem}
.wesen{display:flex;flex-direction:column;gap:.3rem;
  background:#fff;border:1px solid rgba(146,111,56,.3);border-radius:20px;
  padding:1.2rem 1.3rem 1.4rem;box-shadow:0 6px 20px rgba(74,56,42,.1);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),
             border-color .26s var(--ease)}
.wesen:hover{transform:translateY(-4px);border-color:var(--gold);
  box-shadow:0 14px 32px rgba(74,56,42,.17)}
.wesen-bild{display:block;width:100%;height:clamp(140px,17vw,190px);margin-bottom:.7rem}
.wesen-bild img{width:100%;height:100%;object-fit:contain;object-position:bottom center;
  filter:drop-shadow(0 5px 12px rgba(74,56,42,.22))}
.wesen-nr{font-family:var(--schrift);font-weight:600;font-size:.8rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gold)}
.wesen h3{font-family:var(--schrift-zier);font-weight:700;font-size:1.5rem;
  color:var(--violett);line-height:1.2;margin:.1rem 0 .3rem}
.wesen-ort{display:inline-flex;align-items:center;gap:.4rem;font-style:italic;
  font-size:.92rem;color:var(--ink-soft);margin-bottom:.5rem}
.wesen-ort svg{width:15px;height:15px;flex:none;color:var(--gold)}
.wesen p{font-size:.96rem;line-height:1.55;color:var(--ink-soft)}

.tier-liste,.zurueck-liste{list-style:none;display:flex;flex-direction:column;gap:.6rem;
  margin-top:1.6rem}
.tier-liste li,.zurueck-liste li{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  background:rgba(253,250,243,.9);border:1px solid rgba(146,111,56,.26);
  border-radius:14px;padding:.7rem .95rem}
.tier-liste strong,.zurueck-liste strong{color:var(--violett);font-weight:600;font-size:1.04rem}
.tier-liste .nr,.zurueck-liste .nr{font-family:var(--schrift-zier);font-weight:700;
  color:var(--gold);font-size:1.1rem}
.zurueck-liste .nr{min-width:2rem}
.zurueck-liste em{font-style:italic;font-size:.88rem;color:var(--gold)}
.tier-liste .was,.zurueck-liste .was{flex:1 1 16rem;font-size:.96rem;color:var(--ink-soft)}

.ort-schilder{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem;justify-content:center}
.ort-schild{display:inline-flex;flex-direction:column;align-items:center;
  background:rgba(198,176,214,.3);border:1px solid rgba(146,111,56,.28);
  border-radius:14px;padding:.5rem 1rem;font-weight:600;color:var(--violett)}
.ort-schild em{font-style:italic;font-weight:400;font-size:.86rem;color:var(--ink-soft)}

/* ---------- Figuren: wo kommen sie vor? ---------- */
.freund-baender{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.freund-band{display:inline-flex;align-items:center;gap:.4rem;
  padding:.22rem .6rem .26rem;border-radius:999px;font-size:.78rem;
  font-weight:600;letter-spacing:.01em;text-decoration:none;
  background:var(--creme);color:var(--tinte);border:1px solid rgba(74,56,42,.16);
  transition:border-color .18s ease,background .18s ease}
.freund-band:hover,.freund-band:focus-visible{background:#fff;border-color:var(--gold)}
.freund-band em{font-style:normal;font-size:.72rem;opacity:.62}
.freund-band::before{content:"";width:8px;height:8px;border-radius:50%;
  border:1px solid rgba(255,255,255,.85)}
.freund-band.b1::before{background:var(--gold)}
.freund-band.b2::before{background:var(--violett)}
.freund-band.b3::before{background:var(--gras)}
.freund-band.b4::before{background:var(--nacht)}
.freund-band.b5::before{background:var(--rose)}
.freund-wo{display:flex;flex-direction:column;gap:.18rem;margin-top:.55rem;
  font-size:.82rem;line-height:1.35}
.freund-wo a{color:var(--violett);text-decoration:none;
  text-decoration:underline;text-decoration-color:rgba(99,63,105,.28);
  text-underline-offset:.18em}
.freund-wo a:hover,.freund-wo a:focus-visible{text-decoration-color:var(--gold)}
.haupt-figur .freund-baender{margin-top:.9rem}

/* ---------- Besetzung einer Geschichte: anklickbar ---------- */
.g-wesen .g-wer{background:none;border:0;padding:0;font:inherit;cursor:pointer;
  color:var(--violett);text-decoration:underline;
  text-decoration-color:rgba(99,63,105,.3);text-underline-offset:.16em}
.g-wesen .g-wer:hover,.g-wesen .g-wer:focus-visible{text-decoration-color:var(--gold)}

/* ---------- Hörbuch-Hüllen auf der Bücherseite ---------- */
/* Gleiche Rasterbreite wie das Bücherregal – die eigene Polsterung entfällt,
   sonst passt eine Hülle weniger in die Reihe als ein Buch. */
.huellen-reihe{display:grid;justify-content:center;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(132px,180px));
  gap:1.4rem clamp(1rem,2.4vw,2rem);margin-top:2rem}
.huelle{display:flex;flex-direction:column;align-items:center;gap:.7rem;text-align:center}
.huelle img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;
  box-shadow:0 14px 28px rgba(74,56,42,.2);background:var(--creme)}
.huelle .name{font-weight:800;color:var(--tinte);line-height:1.35}
.huelle .name small{display:block;font-weight:600;font-size:.82rem;color:var(--gold);
  margin-top:.15rem}

/* ---------- Ausmalbuch und Hörbuch neben dem Band (Elena-Welt) ---------- */
.buch-neben{display:flex;align-items:center;gap:.8rem;margin-top:1rem;
  padding-top:.9rem;border-top:1px solid rgba(74,56,42,.12)}
.buch-neben img{flex:none;border-radius:8px;box-shadow:0 6px 14px rgba(74,56,42,.22)}
.buch-neben .neben-mal{width:44px;padding:0;border:0;background:none;cursor:pointer;
  border-radius:8px;box-shadow:0 6px 14px rgba(74,56,42,.22);flex:none;
  transition:transform .18s ease}
.buch-neben .neben-mal img{width:100%;aspect-ratio:.706;object-fit:cover;
  border-radius:8px;display:block;box-shadow:none}
.buch-neben .neben-mal:hover,.buch-neben .neben-mal:focus-visible{transform:translateY(-2px)}
.buch-neben .neben-hoer{width:52px;aspect-ratio:1;object-fit:cover;border-radius:10px}
.buch-neben span{font-size:.84rem;line-height:1.4;color:var(--ink-soft)}

/* ---------- Fünf Hörbuch-Titelbilder als Streifen ---------- */
.huellen-streifen{display:flex;gap:.5rem;margin-top:1rem;padding-top:.9rem;
  border-top:1px solid rgba(74,56,42,.12)}
.huellen-streifen img{width:100%;max-width:64px;aspect-ratio:1;object-fit:cover;
  border-radius:9px;box-shadow:0 5px 12px rgba(74,56,42,.2)}

/* ---------- Buchseiten sind nicht zum Mitnehmen ----------
   Die Bände werden verkauft. Ihre Doppelseiten lassen sich darum nicht
   markieren, nicht ziehen und nicht über das Kontextmenü sichern. Die
   Ausmalbücher sind ausgenommen – die gibt es als Download.
   Auch beim Drucken bleibt der Leser leer. */
.leser.geschuetzt #leser-bild,
.leser.geschuetzt #leser-seite{
  -webkit-user-select:none;user-select:none;
  -webkit-user-drag:none;-webkit-touch-callout:none}
@media print{
  .leser,.leser-buehne,.hoer-leiste{display:none !important}
  body.liest > *:not(.leser){visibility:visible}
}

/* ---------- Die Schranke im Leser ---------- */
.leser-schranke{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.9rem;text-align:center;
  padding:2rem 1.6rem;background:rgba(38,30,48,.92);color:#F6EFDA;border-radius:14px}
.leser-schranke[hidden]{display:none}
.leser-schranke .zeichen{display:grid;place-items:center;width:56px;height:56px;
  border-radius:50%;background:rgba(201,162,75,.18);color:var(--gold-glow)}
.leser-schranke .zeichen svg{width:26px;height:26px}
.leser-schranke h3{font-family:var(--schrift-titel);font-size:1.5rem;margin:0;color:#fff}
.leser-schranke p{max-width:30rem;margin:0;line-height:1.55;color:#E4DAEA}
.seite.gesperrt img{opacity:0}

/* ---------- Kurzer Hinweis in der Elena-Welt ---------- */
.welt-hinweis{position:fixed;left:50%;bottom:1.2rem;transform:translate(-50%,140%);
  z-index:130;display:flex;align-items:center;gap:.7rem;
  padding:.75rem 1.1rem;border-radius:999px;background:rgba(38,30,48,.95);
  color:#F6EFDA;font-weight:600;font-size:.92rem;max-width:min(92vw,34rem);
  box-shadow:0 14px 34px rgba(30,20,40,.4);opacity:0;pointer-events:none;
  transition:transform .5s ease,opacity .5s ease}
.welt-hinweis.an{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.welt-hinweis svg{width:19px;height:19px;flex:none;color:var(--gold-glow)}
.welt-hinweis a{color:var(--gold-glow);white-space:nowrap}

/* Der gedruckte Titel unter dem Kurztitel – klein, damit Eltern ihn wiederfinden */
.g-buchtitel{margin:-.3rem 0 .7rem;font-family:var(--schrift);font-size:.86rem;
  color:var(--ink-soft);font-style:italic}

/* ============================================================
   Die App-Schicht der Elena-Welt
   Farben und Schriften bleiben die des Stilblatts – nur die
   Bedienung wird die einer App: feste Leiste unten, große
   Ziele, sichere Ränder auf dem Telefon.
   ============================================================ */
.app-leiste{position:fixed;left:0;right:0;bottom:0;z-index:120;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--papier);backdrop-filter:saturate(1.2) blur(10px);
  border-top:1px solid rgba(146,111,56,.22);
  padding:.5rem .4rem calc(.5rem + env(safe-area-inset-bottom));
  box-shadow:0 -8px 26px rgba(74,56,42,.1)}
.app-leiste button{display:flex;flex-direction:column;align-items:center;gap:.22rem;
  background:none;border:0;padding:.42rem .2rem .3rem;border-radius:14px;cursor:pointer;
  color:var(--tinte-weich);font-family:var(--schrift);font-size:.78rem;font-weight:600;
  min-height:52px;transition:color .18s ease,background .18s ease}
.app-leiste button svg{width:23px;height:23px}
.app-leiste button:hover{color:var(--violett)}
.app-leiste button.jetzt{color:var(--violett);background:rgba(198,176,214,.26)}
/* Der Inhalt darf nicht unter der Leiste verschwinden */
body:has(.app-leiste) main.welt{padding-bottom:5.6rem}
@supports not (selector(:has(*))){main.welt{padding-bottom:5.6rem}}

/* ---------- Meine Blütengeschichten und die Fläschchen-Regale ---------- */
.mein-bereich{margin:0 0 1.5rem}
.mein-kopf{display:flex;align-items:center;gap:.55rem;margin-bottom:.7rem;
  font-family:var(--schrift);color:var(--violett)}
.mein-kopf svg{width:20px;height:20px;flex:none}
.mein-kopf b{font-size:1.06rem;font-weight:700}
.regal-plus{margin-left:auto;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(160deg,var(--gold-hell),var(--gold));color:#fff;
  font-size:1.25rem;line-height:1;display:grid;place-items:center;
  box-shadow:0 3px 10px rgba(146,111,56,.34)}
.regal-plus:hover{filter:brightness(1.07)}

.bluetenreihe{display:flex;gap:.7rem;overflow-x:auto;padding:.15rem .15rem .6rem;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.bluete{flex:0 0 10.5rem;scroll-snap-align:start;text-align:left;cursor:pointer;
  border:1px solid rgba(146,111,56,.2);border-radius:16px;padding:.75rem .8rem .85rem;
  background:var(--creme);font-family:var(--schrift);color:var(--tinte);
  transition:border-color .18s ease,transform .18s var(--ease)}
.bluete:hover{border-color:var(--gold);transform:translateY(-2px)}
.bluete img{width:44px;height:44px;border-radius:50%;object-fit:cover;
  border:2px solid var(--gold-schimmer);background:#fff;margin-bottom:.45rem;display:block}
.bluete .wo{display:block;font-size:.74rem;color:var(--tinte-weich);letter-spacing:.02em}
.bluete .t{display:block;font-weight:700;line-height:1.25;margin:.15rem 0 .3rem}
.bluete .dauer{display:block;font-size:.76rem;color:var(--tinte-weich)}
.leer-hinweis{padding:.85rem 1rem;border-radius:14px;font-size:.9rem;line-height:1.5;
  background:rgba(198,176,214,.16);color:var(--tinte-weich);font-family:var(--schrift)}

.regal-eintrag{display:flex;align-items:center;gap:.85rem;width:100%;cursor:pointer;
  padding:.7rem .9rem;border-radius:16px;border:1px solid rgba(146,111,56,.2);
  background:var(--creme);font-family:var(--schrift);color:var(--tinte);text-align:left;
  margin-bottom:.55rem;transition:border-color .18s ease}
.regal-eintrag:hover{border-color:var(--gold)}
.regal-eintrag .zeichen{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-size:1.15rem;background:#fff;border:1px solid rgba(146,111,56,.18);flex:none}
.regal-eintrag b{display:block;font-size:1rem}
.regal-eintrag small{color:var(--tinte-weich);font-size:.83rem}
.regal-eintrag .pfeil{margin-left:auto;color:var(--gold);font-size:1.2rem}

/* Die Rose an der Geschichte – merken und wieder vergessen */
.bluete-knopf{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  background:none;border:1px solid rgba(146,111,56,.28);border-radius:999px;
  padding:.4rem .85rem;font-family:var(--schrift);font-size:.9rem;font-weight:600;
  color:var(--tinte-weich);transition:all .18s ease}
.bluete-knopf svg{width:17px;height:17px}
.bluete-knopf:hover{border-color:var(--gold);color:var(--violett)}
.bluete-knopf.an{background:rgba(232,196,190,.4);border-color:var(--rose);color:var(--violett-tief)}

/* ---------- Ein Fläschchen-Regal anlegen ---------- */
.regal-dialog{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:1.2rem;background:rgba(38,30,48,.5);backdrop-filter:blur(3px)}
.regal-dialog[hidden]{display:none}
.regal-blatt{width:min(26rem,100%);background:var(--creme);border-radius:20px;
  padding:1.5rem 1.4rem 1.3rem;box-shadow:0 24px 60px rgba(30,20,40,.4);
  font-family:var(--schrift);color:var(--tinte)}
.regal-blatt h3{font-family:var(--schrift-zier);font-size:1.6rem;color:var(--violett);
  margin:0 0 .4rem}
.regal-satz{font-size:.92rem;line-height:1.5;color:var(--tinte-weich);margin:0 0 1rem}
.regal-feld{display:block;margin-bottom:.9rem}
.regal-feld span{display:block;font-size:.85rem;font-weight:600;
  color:var(--tinte-weich);margin-bottom:.3rem}
.regal-feld input{width:100%;padding:.65rem .8rem;border-radius:12px;
  border:1px solid rgba(146,111,56,.3);background:#fff;
  font-family:var(--schrift);font-size:1rem;color:var(--tinte)}
.regal-feld input:focus{outline:2px solid var(--gold);outline-offset:1px}
.regal-zeichen{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.1rem}
.regal-zeichen button{width:42px;height:42px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(146,111,56,.24);background:#fff;font-size:1.2rem;
  display:grid;place-items:center;transition:all .16s ease}
.regal-zeichen button[aria-checked="true"]{border-color:var(--gold);
  background:rgba(228,201,138,.32);transform:scale(1.08)}
.regal-knoepfe{display:flex;gap:.6rem;justify-content:flex-end}

/* ============================================================
   Malen mit Elena
   Die Strichzeichnung liegt oben und wird multipliziert – so
   bleiben die Linien scharf, egal wie kräftig gemalt wird.
   ============================================================ */
.mal-buecher{display:flex;flex-wrap:wrap;gap:.5rem;margin:.2rem 0 1rem}
.mal-buch{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  padding:.45rem .95rem;border-radius:999px;border:1px solid rgba(146,111,56,.24);
  background:var(--creme);font-family:var(--schrift);font-weight:600;color:var(--tinte)}
.mal-buch em{font-style:normal;font-size:.78rem;opacity:.6}
.mal-buch.jetzt{background:rgba(198,176,214,.34);border-color:var(--violett);color:var(--violett-tief)}

.mal-seiten{display:grid;gap:.5rem;margin-bottom:1.3rem;
  grid-template-columns:repeat(auto-fill,minmax(58px,1fr))}
.mal-seite{aspect-ratio:1/1.41;border-radius:10px;cursor:pointer;
  border:1px solid rgba(146,111,56,.24);background:#fff;position:relative;
  display:grid;place-items:center;transition:border-color .16s ease,transform .16s var(--ease)}
.mal-seite:hover{border-color:var(--gold);transform:translateY(-2px)}
.mal-seite span{font-family:var(--schrift);font-size:.9rem;color:var(--tinte-weich)}

.malkasten{display:grid;gap:1rem}
.malkasten[hidden]{display:none}
@media (min-width:900px){.malkasten{grid-template-columns:minmax(0,1fr) 20rem;align-items:start}}
.mal-buehne{position:relative;background:#fff;border-radius:14px;overflow:hidden;
  border:1px solid rgba(146,111,56,.24);box-shadow:0 8px 26px rgba(74,56,42,.13)}
.mal-buehne canvas,.mal-buehne img{display:block;width:100%;height:auto}
.mal-buehne img{position:absolute;inset:0;mix-blend-mode:multiply;pointer-events:none;
  -webkit-user-drag:none;user-select:none}

.mal-geraet{display:grid;gap:.75rem}
.mal-reihe{display:flex;flex-wrap:wrap;gap:.4rem}
.mal-reihe button{cursor:pointer;padding:.5rem .85rem;border-radius:12px;
  border:1px solid rgba(146,111,56,.24);background:var(--creme);
  font-family:var(--schrift);font-weight:600;font-size:.9rem;color:var(--tinte);
  display:inline-flex;align-items:center;gap:.4rem;min-height:44px}
.mal-reihe button[aria-checked="true"],.mal-reihe button.jetzt{
  background:rgba(198,176,214,.34);border-color:var(--violett);color:var(--violett-tief)}
.mal-reihe button i{display:block;border-radius:50%;background:currentColor}
.ms-fein i{width:5px;height:5px}
.ms-mittel i{width:9px;height:9px}
.ms-dick i{width:15px;height:15px}

.mal-faecher-kopf{font-family:var(--schrift);font-size:.82rem;font-weight:700;
  color:var(--tinte-weich);margin:.5rem 0 .3rem;letter-spacing:.02em}
.mal-farben{display:flex;flex-wrap:wrap;gap:.4rem}
.mal-farben button{width:36px;height:36px;border-radius:50%;cursor:pointer;
  border:2px solid rgba(74,56,42,.18);transition:transform .14s ease,box-shadow .14s ease}
.mal-farben button:hover{transform:scale(1.09)}
.mal-farben button[aria-checked="true"],.mal-farben button.jetzt{
  border-color:var(--gold);transform:scale(1.14);
  box-shadow:0 0 0 3px rgba(228,201,138,.5)}
.mal-schluss{margin-top:.4rem}

/* ---------- Gezeichnete Werkzeuge ----------
   Was Farbe trägt – Mine, Borsten, Eimerinhalt – nimmt die gewählte Farbe an.
   Das aktive Werkzeug neigt sich leicht, als läge es bereit. */
#s-malen{--malfarbe:#633F69}
.mal-werkzeug{flex-direction:column;gap:.2rem;padding:.5rem .55rem .4rem;min-width:66px}
.mal-werkzeug svg{width:38px;height:38px;display:block}
.mal-werkzeug small{font-size:.7rem;font-weight:600;letter-spacing:.01em;
  color:var(--tinte-weich);line-height:1.1}
.mal-werkzeug[aria-checked="true"] small{color:var(--violett-tief)}
.mal-werkzeug .ton{fill:var(--malfarbe)}
.mal-werkzeug .holz{fill:#D8B98A}
.mal-werkzeug .glanz{fill:#fff;opacity:.42}
.mal-werkzeug .zwinge{fill:#C9BFAE}
.mal-werkzeug .banderole{fill:#F6F0E0;stroke:rgba(74,56,42,.35);stroke-width:1.4}
.mal-werkzeug .gummi{fill:#E8C4BE;stroke:rgba(74,56,42,.3);stroke-width:1.4}
.mal-werkzeug .buegel{fill:none;stroke:#9A8E7C;stroke-width:2.4;stroke-linecap:round}
.mal-werkzeug .krumen{fill:none;stroke:rgba(74,56,42,.4);stroke-width:2;stroke-linecap:round}
.mal-werkzeug .tropfen{opacity:0;transform-origin:center;transition:opacity .2s ease}
.mal-werkzeug .dreht,.mal-werkzeug .kippt{transform-origin:50% 60%;
  transition:transform .3s var(--ease)}
.mal-werkzeug[aria-checked="true"] .dreht{transform:rotate(-10deg) translateY(-2px)}
.mal-werkzeug[aria-checked="true"] .kippt{transform:rotate(-16deg)}
.mal-werkzeug[aria-checked="true"] .tropfen{opacity:1;animation:tropft 2.4s ease-in-out infinite}
@keyframes tropft{0%,72%{transform:translateY(0);opacity:1}
  88%{transform:translateY(5px);opacity:.35}100%{transform:translateY(0);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .mal-werkzeug .dreht,.mal-werkzeug .kippt{transition:none}
  .mal-werkzeug[aria-checked="true"] .tropfen{animation:none}}

/* ---------- Nicht über die Linie ---------- */
.mal-hilfe{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  padding:.6rem 1rem;border-radius:999px;min-height:44px;
  border:1px solid rgba(146,111,56,.24);background:var(--creme);
  font-family:var(--schrift);font-weight:600;font-size:.92rem;color:var(--tinte-weich)}
.mal-hilfe svg{width:19px;height:19px}
.mal-hilfe.an{background:rgba(150,176,120,.26);border-color:var(--gras);color:var(--tinte)}

/* ---------- Muster ---------- */
.mal-muster button{padding:.34rem;min-height:44px}
.mal-muster i{display:block;width:32px;height:32px;border-radius:8px;
  border:1px solid rgba(74,56,42,.16);background:#fff;--malfarbe:#633F69}
.mu-voll{background:var(--malfarbe) !important}
.mu-punkte{background-image:radial-gradient(circle 2.6px at 6px 6px,var(--malfarbe) 98%,transparent),
  radial-gradient(circle 2.6px at 17px 17px,var(--malfarbe) 98%,transparent);
  background-size:22px 22px}
.mu-streifen{background-image:repeating-linear-gradient(180deg,var(--malfarbe) 0 5px,transparent 5px 11px)}
.mu-schraeg{background-image:repeating-linear-gradient(45deg,var(--malfarbe) 0 4px,transparent 4px 10px)}
.mu-karo{background-image:repeating-linear-gradient(0deg,var(--malfarbe) 0 3px,transparent 3px 12px),
  repeating-linear-gradient(90deg,var(--malfarbe) 0 3px,transparent 3px 12px)}
.mu-sterne,.mu-herzen,.mu-wellen{position:relative;color:var(--malfarbe);
  display:grid;place-items:center;font-size:15px;line-height:1}
.mu-sterne::after{content:"✦✦";letter-spacing:1px}
.mu-herzen::after{content:"♥♥";letter-spacing:1px}
.mu-wellen::after{content:"≈≈";letter-spacing:0}

/* ---------- Ausmalseiten mit Vorschau ---------- */
.mal-seite{overflow:hidden;padding:0}
.mal-seite img{width:100%;height:100%;object-fit:cover;display:block;
  border-radius:9px;background:#fff}
.mal-seite span{position:absolute;right:4px;bottom:3px;
  font-size:.68rem;font-weight:700;color:var(--tinte-weich);
  background:rgba(246,240,224,.9);border-radius:6px;padding:0 .28rem;line-height:1.35}
.mal-seite.fertig::before{content:"";position:absolute;left:5px;top:5px;
  width:11px;height:11px;border-radius:50%;background:var(--gras);
  border:2px solid #fff;box-shadow:0 1px 3px rgba(74,56,42,.4);z-index:1}
.mal-reihe button:disabled{opacity:.4;cursor:default}

/* ============================================================
   Puzzle – eine Doppelseite wieder zusammensetzen
   ============================================================ */
.pz-wahl{display:grid;gap:.6rem;margin:.2rem 0 1rem}
#pz-stufen button{flex-direction:column;gap:.05rem;padding:.45rem .9rem}
#pz-stufen b{font-size:.94rem}
#pz-stufen small{font-size:.74rem;color:var(--tinte-weich)}
.pz-baender button{padding:.45rem .9rem}
.pz-band.jetzt{background:rgba(198,176,214,.34);border-color:var(--violett);
  color:var(--violett-tief)}

.pz-motive{display:grid;gap:.6rem;margin-bottom:1.4rem;
  grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.pz-motiv{display:block;cursor:pointer;padding:0;overflow:hidden;text-align:left;
  border:1px solid rgba(146,111,56,.22);border-radius:14px;background:var(--creme);
  transition:border-color .16s ease,transform .16s var(--ease)}
.pz-motiv:hover{border-color:var(--gold);transform:translateY(-2px)}
.pz-motiv img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.pz-motiv span{display:block;padding:.42rem .6rem .55rem;font-family:var(--schrift);
  font-size:.84rem;font-weight:600;line-height:1.25;color:var(--tinte)}

.pz-tisch{display:grid;gap:.9rem}
.pz-tisch[hidden]{display:none}
.pz-stand{font-family:var(--schrift);font-weight:600;color:var(--tinte-weich);
  text-align:center}
.pz-stand.geschafft{color:var(--gras);font-size:1.1rem}

.pz-brett{display:grid;grid-template-columns:repeat(var(--sp),1fr);
  grid-template-rows:repeat(var(--ze),1fr);gap:0;width:100%;
  background:rgba(146,111,56,.18);border-radius:12px;padding:2px;
  border:1px solid rgba(146,111,56,.24)}
.pz-feld{background:var(--creme-tief);border-radius:6px;position:relative;
  display:grid;place-items:stretch;min-height:34px}
.pz-feld:empty::after{content:"";position:absolute;inset:22%;border-radius:5px;
  border:2px dashed rgba(146,111,56,.3)}

.pz-vorrat{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;
  min-height:60px;padding:.55rem;border-radius:12px;
  background:rgba(198,176,214,.14);border:1px dashed rgba(146,111,56,.28)}
.pz-vorrat:empty::after{content:"Alle Teile liegen auf dem Brett";
  font-family:var(--schrift);font-size:.86rem;color:var(--tinte-weich);
  align-self:center;margin:0 auto}

/* Ein Teil ist ein Bild mit Nasen und Buchten. Der Rand („--rand") ist der
   Anteil, den die Nasen über den eigentlichen Teilkern hinausragen – im
   Feld wird das Teil darum größer gezeichnet und passend versetzt. */
.pz-teil{cursor:pointer;padding:0;border:0;background:none;line-height:0;
  transition:transform .14s var(--ease),filter .14s ease;
  filter:drop-shadow(0 2px 4px rgba(74,56,42,.34))}
.pz-teil img{display:block;width:100%;height:auto;pointer-events:none}
.pz-vorrat .pz-teil{width:96px;max-width:28vw}
.pz-vorrat .pz-teil:hover{transform:translateY(-3px) scale(1.05)}
.pz-teil.gewaehlt{transform:scale(1.09);
  filter:drop-shadow(0 0 3px var(--gold)) drop-shadow(0 6px 12px rgba(146,111,56,.5))}
.pz-feld{position:relative}
.pz-feld .pz-teil{position:absolute;
  left:calc(-1 * var(--randx));top:calc(-1 * var(--randy));
  width:calc(100% + 2 * var(--randx));max-width:none;z-index:1}
.pz-feld .pz-teil.sitzt{z-index:0}
.pz-teil.sitzt{cursor:default;filter:none;animation:rastet .34s var(--ease)}
@keyframes rastet{0%{transform:scale(1.09)}60%{transform:scale(.985)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .pz-teil{transition:none}.pz-teil.sitzt{animation:none}}

/* ============================================================
   Spielen · Rätseln · Lernen
   ============================================================ */
.spiel-wahl{display:grid;gap:.7rem;margin:.4rem 0 1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.spiel-kachel{display:block;text-align:left;cursor:pointer;padding:1rem 1.1rem;
  border-radius:16px;border:1px solid rgba(146,111,56,.22);background:var(--creme);
  font-family:var(--schrift);color:var(--tinte);min-height:44px;
  transition:border-color .18s ease,transform .18s var(--ease)}
.spiel-kachel:hover{border-color:var(--gold);transform:translateY(-2px)}
.spiel-kachel strong{display:block;font-family:var(--schrift-zier);
  font-size:1.4rem;color:var(--violett);line-height:1.15}
.spiel-kachel small{display:block;margin-top:.2rem;font-size:.9rem;
  color:var(--tinte-weich);line-height:1.4}

.spiel-tisch[hidden]{display:none}
.spiel-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  margin-bottom:1rem}
.spiel-stand{flex:1;min-width:10rem;text-align:center;font-family:var(--schrift);
  font-weight:600;color:var(--tinte-weich)}
.spiel-stand.gut{color:var(--gras)}
.spiel-stand.fast{color:var(--gold-hell)}
.spiel-feld{min-height:6rem}

/* ---------- Paare finden ---------- */
.pa-feld{display:grid;grid-template-columns:repeat(var(--sp),1fr);gap:.5rem}
.pa-karte{position:relative;aspect-ratio:1/1;cursor:pointer;padding:0;border:0;
  background:none;border-radius:14px;perspective:700px}
.pa-rueck,.pa-vorn{position:absolute;inset:0;border-radius:14px;
  backface-visibility:hidden;transition:transform .38s var(--ease);
  display:grid;place-items:center;overflow:hidden}
.pa-rueck{background:linear-gradient(150deg,var(--violett),var(--violett-tief));
  border:1px solid rgba(146,111,56,.3)}
.pa-rueck::after{content:"";width:46%;height:46%;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,var(--gold-schimmer),transparent 62%)}
.pa-vorn{background:#fff;border:1px solid rgba(146,111,56,.28);
  transform:rotateY(180deg);padding:.3rem}
.pa-vorn img{width:100%;height:100%;object-fit:contain}
.pa-vorn small{position:absolute;left:0;right:0;bottom:0;padding:.1rem .2rem;
  font-size:.62rem;font-weight:700;text-align:center;color:var(--tinte);
  background:rgba(246,240,224,.92);line-height:1.25}
.pa-karte.auf .pa-rueck{transform:rotateY(180deg)}
.pa-karte.auf .pa-vorn{transform:rotateY(360deg)}
.pa-karte.weg{opacity:.45;cursor:default}
@media (prefers-reduced-motion:reduce){.pa-rueck,.pa-vorn{transition:none}}

/* ---------- Blütenzauber ---------- */
.bz-krone{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin:.5rem 0 1.2rem}
.bz-bluete{cursor:pointer;border:0;background:none;padding:.4rem;
  display:grid;justify-items:center;gap:.3rem;font-family:var(--schrift);
  font-weight:600;color:var(--tinte-weich);min-height:44px}
.bz-bluete i{display:block;width:74px;height:74px;border-radius:50%;
  border:3px solid rgba(255,255,255,.9);box-shadow:0 3px 12px rgba(74,56,42,.24);
  transition:transform .2s var(--ease),box-shadow .2s ease,filter .2s ease}
.bz-rose i{background:var(--rose)}
.bz-veilchen i{background:var(--flieder)}
.bz-krokus i{background:var(--gold-schimmer)}
.bz-bluete.leuchtet i{transform:scale(1.16);filter:brightness(1.22);
  box-shadow:0 0 0 8px rgba(228,201,138,.45),0 6px 18px rgba(146,111,56,.4)}
.bz-spruch{text-align:center;font-family:var(--schrift-zier);font-size:1.25rem;
  color:var(--violett);line-height:1.45}
@media (prefers-reduced-motion:reduce){.bz-bluete i{transition:none}}

/* ---------- Fragerunden ---------- */
.fr-frage{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem;
  font-family:var(--schrift);font-size:1.06rem;line-height:1.5;color:var(--tinte)}
.fr-bild{width:84px;height:84px;flex:none;border-radius:50%;object-fit:cover;
  border:2px solid var(--gold-schimmer);background:#fff}
.fr-zaehlen{display:block;font-size:2rem;line-height:1.5;letter-spacing:.18em;
  word-break:break-word}
.fr-antworten{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.fr-antwort{cursor:pointer;padding:.75rem 1rem;border-radius:14px;min-height:48px;
  border:1px solid rgba(146,111,56,.26);background:var(--creme);
  font-family:var(--schrift);font-size:1rem;font-weight:600;color:var(--tinte);
  transition:border-color .16s ease,background .16s ease}
.fr-antwort:hover:not(:disabled){border-color:var(--gold);background:#fff}
.fr-antwort:disabled{cursor:default}
.fr-antwort.richtig{background:rgba(150,176,120,.3);border-color:var(--gras)}
.fr-antwort.daneben{background:rgba(232,196,190,.4);border-color:var(--rose)}
.fr-wort{min-height:1.6rem;margin-top:.8rem;text-align:center;
  font-family:var(--schrift-zier);font-size:1.3rem}
.fr-wort.gut{color:var(--gras)}
.fr-wort.fast{color:var(--gold-hell)}
.fr-leer{color:var(--tinte-weich);font-style:italic}

/* Für Vorleseprogramme da, für das Auge nicht – etwa die Überschrift der
   App, die auf dem Schirm die Bildmarke wäre. */
.nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.pz-motivname{width:100%;text-align:center;font-family:var(--schrift-zier);
  font-size:1.35rem;color:var(--violett)}
.pz-feld:empty::after{content:"";position:absolute;inset:14%;border-radius:8px;
  border:2px dashed rgba(146,111,56,.26)}

/* ---------- Rechtstexte ----------
   Lange Fließtexte für Erwachsene: eine schmale Spalte, ruhige Abstände,
   nichts Verspieltes. Wer hier liest, sucht eine Auskunft. */
.rechts-seite{max-width:48rem;margin:0 auto;
  padding:clamp(1.5rem,4vw,3rem) clamp(1.1rem,4vw,2rem) 4rem}
.rechts-kopf{text-align:center;margin-bottom:2.6rem;
  padding-bottom:1.8rem;border-bottom:1px solid rgba(146,111,56,.3)}
.rechts-kopf h1{margin:.2rem 0 .8rem}
.rechts-kopf p{color:var(--ink-soft)}
.rechts-stand{margin-top:1rem;font-size:.88rem;letter-spacing:.06em;
  text-transform:uppercase;font-family:var(--schrift);color:var(--gold)}
.rechts-teil{margin-top:2.4rem}
.rechts-teil h2{font-family:var(--schrift-zier);font-weight:700;
  font-size:1.75rem;color:var(--violett);margin-bottom:.9rem;line-height:1.25}
.rechts-teil p{margin-bottom:.85rem;line-height:1.75}
.rechts-teil a{color:var(--gold);font-weight:600;text-underline-offset:3px}
.rechts-punkte{list-style:none;display:flex;flex-direction:column;gap:.7rem;
  margin:.4rem 0 1rem}
.rechts-punkte li{position:relative;padding-left:1.5rem;line-height:1.7}
.rechts-punkte li::before{content:"";position:absolute;left:.3rem;top:.78em;
  width:.42rem;height:.42rem;border-radius:50%;background:var(--gold)}
.anschrift{padding:1rem 1.2rem;border-left:3px solid var(--gold);
  background:rgba(246,240,224,.7);border-radius:0 14px 14px 0;line-height:1.7}
.rechts-liste{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.4rem;
  margin:1.2rem 0;align-items:baseline}
.rechts-liste dt{font-family:var(--schrift);font-weight:600;font-size:.92rem;
  color:var(--gold);white-space:nowrap}
.rechts-liste dd{line-height:1.6}
.rechts-tafel{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.2rem 0}
.rechts-tafel table{width:100%;border-collapse:collapse;min-width:34rem;font-size:.94rem}
.rechts-tafel th{text-align:left;font-family:var(--schrift);font-weight:600;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
  padding:.5rem .7rem;border-bottom:1px solid rgba(146,111,56,.3)}
.rechts-tafel td{padding:.7rem;border-bottom:1px solid rgba(146,111,56,.16);
  vertical-align:top;line-height:1.55}
.rechts-tafel td span{display:block;font-size:.85rem;font-style:italic;color:var(--ink-soft)}
.rechts-wichtig{padding:.85rem 1.1rem;border-radius:16px;
  background:rgba(232,196,190,.34);border:1px solid rgba(146,111,56,.34);
  font-weight:600;color:var(--tinte)}
.rechts-muster{margin:1rem 0;padding:1.2rem 1.4rem;border-radius:18px;
  background:rgba(253,250,243,.9);border:1px dashed rgba(146,111,56,.5);
  font-size:.95rem;line-height:1.8}
.rechts-muster p+p{margin-top:.8rem}
.rechts-zurueck{margin-top:3rem;text-align:center}
/* Eine Lücke, die man nicht übersehen kann: Was hier steht, fehlt noch. */
.luecke{background:rgba(190,70,60,.16);color:#8A2B22;border-radius:6px;
  padding:.1em .4em;font-family:var(--schrift);font-weight:600;font-size:.94em}

/* ---------- Code einlösen (Ziel des QR-Codes) ----------
   Kurz und ruhig: Wer hier landet, hat das Buch schon gekauft. */
.el-seite{max-width:40rem;margin:0 auto;
  padding:clamp(2rem,6vw,4rem) clamp(1.1rem,4vw,2rem) 4rem}
.el-kopf{text-align:center;margin-bottom:2rem}
.el-kopf h1{margin:.2rem 0 .8rem}
.el-kopf code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.94rem;background:rgba(198,176,214,.28);border-radius:8px;
  padding:.16em .5em;color:var(--violett)}
.el-kasten{background:#fff;border:1px solid rgba(146,111,56,.3);
  border-radius:24px;padding:clamp(1.4rem,4vw,2.2rem);
  box-shadow:0 8px 26px rgba(74,56,42,.1)}
.el-kasten.gut{border-color:var(--gras);border-width:2px;
  background:linear-gradient(165deg,rgba(150,176,120,.14),#fff)}
.el-kasten.warn{border-color:rgba(190,140,50,.6)}
.el-kasten h2{font-family:var(--schrift-zier);font-weight:700;font-size:1.9rem;
  color:var(--violett);margin-bottom:.6rem;line-height:1.2}
.el-kasten p{color:var(--ink-soft);line-height:1.7}
.el-kasten .zugang{margin-top:1.4rem}
.el-lauft{display:flex;align-items:center;gap:.6rem;justify-content:center;
  font-style:italic;color:var(--gold)}
.el-lauft svg{width:18px;height:18px}
.el-kasten label{display:block;font-family:var(--schrift);font-weight:600;
  font-size:.88rem;margin:1.2rem 0 .3rem;color:var(--tinte)}
.el-kasten input{width:100%;padding:.85rem 1rem;border-radius:14px;
  border:1.5px solid rgba(146,111,56,.4);background:#fff;
  font-family:var(--schrift);font-size:1.05rem;color:var(--tinte);
  margin-bottom:1rem;letter-spacing:.04em}
.el-kasten input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.el-kasten .btn{width:100%;justify-content:center}
.el-knoepfe{display:flex;flex-direction:column;gap:.6rem;margin-top:1.4rem}
.el-fuss{display:flex;gap:.55rem;align-items:flex-start;margin-top:2rem;
  font-size:.94rem;color:var(--ink-soft);line-height:1.65}
.el-fuss svg{width:16px;height:16px;color:var(--gold);flex:none;margin-top:.3rem}
.el-fuss a{color:var(--gold);font-weight:600}
@media (min-width:520px){.el-knoepfe{flex-direction:row}
  .el-knoepfe .btn{flex:1}}
.k-baender{margin-top:1.1rem;padding:.85rem 1.05rem;border-radius:16px;
  background:var(--an-feld);border:1px solid var(--an-rand)}
.k-baender b{display:block;font-family:var(--schrift);font-weight:600;
  font-size:.84rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.6rem}
.k-band{display:inline-flex;flex-direction:column;margin:0 .8rem .4rem 0;
  font-family:var(--schrift);font-weight:600;color:var(--violett);font-size:1rem}
.k-band em{font-weight:400;font-style:italic;font-size:.86rem;color:var(--ink-soft)}


/* ---------------------------------------------------------------------------
   Das Schaufenster auf der Digital-Seite.

   Nur Bilder, je zwei, drei Woerter dazu. Gewischt wird mit dem Finger,
   gerastert mit scroll-snap – dieselbe Technik wie bei der Bluetenreihe,
   damit es sich anfuehlt wie der Rest der Seite. Kein Skript noetig: Der
   Browser kann das von sich aus, und was er von sich aus kann, geht auch
   dann noch, wenn einmal etwas anderes klemmt.
--------------------------------------------------------------------------- */
.schau{padding:1.5rem 0 3.5rem}
.schau-reihe{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding:.3rem 1.3rem 1.2rem;scroll-padding-inline:1.3rem;
  scrollbar-width:thin;scrollbar-color:rgba(146,111,56,.35) transparent}
.schau-reihe::-webkit-scrollbar{height:7px}
.schau-reihe::-webkit-scrollbar-track{background:transparent}
.schau-reihe::-webkit-scrollbar-thumb{background:rgba(146,111,56,.35);border-radius:4px}
.schau-bild{flex:0 0 min(80vw,29rem);scroll-snap-align:center;margin:0}
.schau-bild img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:22px;border:1px solid var(--linie);background:var(--creme);
  box-shadow:0 10px 26px rgba(74,56,42,.10)}
.schau-bild figcaption{font-family:var(--schreib);font-size:1.45rem;color:var(--violett);
  text-align:center;margin-top:.7rem;line-height:1.2}

/* Auf grossen Schirmen passen alle nebeneinander – dann ist Wischen
   unnoetig und die Reihe wird zum ruhigen Gitter. */
@media (min-width:1100px){
  .schau-reihe{display:grid;grid-template-columns:repeat(4,1fr);overflow:visible;
    max-width:1180px;margin:0 auto;padding-inline:1.3rem}
  .schau-bild{flex:none}
  .schau-bild figcaption{font-size:1.2rem}
}

/* Die Gratis-Vorschau: als Probe kenntlich, nicht als halbes Produkt. */
.probe{padding:0 1.3rem 3.5rem}
.probe-innen{max-width:56rem;margin:0 auto;background:var(--hell);border-radius:24px;
  border:1px solid var(--linie);padding:2rem 1.6rem 2.2rem;text-align:center}
.probe-schild{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;
  font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);
  background:var(--parchment);border:1px solid rgba(201,162,75,.5);border-radius:999px;
  padding:.35rem 1rem;margin-bottom:.9rem}
/* Ohne feste Groesse wuerde das Sinnbild die ganze Breite einnehmen –
   dieselbe Falle wie beim Bald-Schild. */
.probe-schild svg{width:16px;height:16px;flex:none}
.probe h2{margin:0 0 .5rem}
.probe p{color:var(--tinte-weich);margin:0 auto 1.4rem;max-width:34rem}
.probe-reihe{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}


/* Das Häkchen für die Werbepost. Nicht vorangekreuzt und neben dem Knopf,
   nicht davor: Der Zugang haengt nicht daran (DSGVO Art. 7 Abs. 4). Die
   Schrift bleibt lesbar gross – wer zustimmt, soll wissen, wozu. */
.an-haken{display:flex;align-items:flex-start;gap:.6rem;margin:.2rem 0 1rem;
  font-size:.92rem;line-height:1.45;color:var(--tinte-weich);cursor:pointer}
.an-haken input{flex:none;width:19px;height:19px;margin-top:.15rem;accent-color:var(--gold);cursor:pointer}
.an-haken span{flex:1}


/* Die Verwaltung. Nüchtern gehalten – hier wird gearbeitet, nicht
   geträumt. Trotzdem dieselben Farben, damit es zum Haus gehört. */
.vw-suchzeile{display:block;max-width:26rem;margin:0 auto 1.6rem}
.vw-suchzeile input{width:100%;margin-top:.3rem;padding:.7rem .9rem;border-radius:12px;
  border:1px solid var(--linie);background:var(--hell);font-family:var(--schrift);font-size:1rem}
.vw-zeile{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  background:var(--hell);border:1px solid var(--linie);border-radius:16px;
  padding:1rem 1.1rem;margin-bottom:.7rem}
.vw-wer{display:flex;flex-direction:column;gap:.15rem;min-width:15rem;flex:1}
.vw-stand{margin-top:.25rem}
.vw-stufe{font-family:var(--fett);color:var(--violett)}
.vw-tun{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.vw-knopf{padding:.4rem .8rem;font-size:.88rem}
.vw-knopf.ist{background:var(--gold);color:var(--weiss);border-color:var(--gold)}
.vw-weg{padding:.4rem .8rem;font-size:.88rem;color:#9a3a3a;border-color:rgba(154,58,58,.35)}
.vw-tun button[disabled]{opacity:.4;cursor:not-allowed}