@font-face{font-family:"Cinzel";src:url(fonts/cinzel-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Cinzel Decorative";src:url(fonts/cinzel-decorative-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}

:root{
  --nacht:#1c1b4a;
  --indigo:#2e2f74;
  --lavendel:#cfc8f0;
  --perle:#f6f1fb;
  --gold:#e8b44a;
  --gold-hell:#fbe6a6;
  --rose:#d9577f;
  --pergament:#f4ecdc;
  --tinte:#2a2440;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--nacht);color:var(--perle);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(18px,1.2vw + 12px,24px);line-height:1.45;overflow-x:hidden}

/* ---------- Bühne ---------- */
.hero{position:relative;height:100vh;height:100svh}
.stage{position:relative;width:100%;height:100vh;height:100svh;overflow:hidden;background:var(--nacht)}
.insel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  transform:scale(1.22);filter:saturate(.85) brightness(.55);will-change:transform,filter}
.insel-licht{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(60% 45% at 50% 42%,rgba(251,230,166,.35),transparent 70%)}
#nebel{position:absolute;inset:0;width:100%;height:100%;display:block}
.nebel-fallback{position:absolute;inset:-10%;transition:opacity .9s ease;
  background:
    radial-gradient(40% 35% at 30% 40%,rgba(246,241,251,.95),transparent 70%),
    radial-gradient(45% 40% at 70% 55%,rgba(230,214,245,.95),transparent 70%),
    radial-gradient(60% 50% at 50% 50%,rgba(250,225,235,.9),transparent 80%),
    linear-gradient(#e9e2f6,#f3e6ee)}
.no-webgl .nebel-fallback{display:block}
.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(20,18,55,.55) 100%)}
/* weicher Übergang vom Panorama ins erste Kapitel (statt harter Bildkante) */
.stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22vh;pointer-events:none;z-index:5;
  background:linear-gradient(to bottom,rgba(28,27,74,0),rgba(28,27,74,.55) 55%,var(--nacht) 100%)}

/* ---------- Titel ---------- */
.titel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 16px;pointer-events:none;will-change:transform,opacity}
.titel-ober,.titel-unter{font-style:italic;font-weight:500;color:#5a4f86;letter-spacing:.06em;
  font-size:clamp(17px,1vw + 12px,24px);text-shadow:0 0 18px rgba(255,255,255,.9)}
.titel-wort{font-family:"Cinzel",serif;font-weight:700;line-height:1;margin:.18em 0 .22em;
  font-size:clamp(30px,8.6vw,150px);letter-spacing:.01em;
  font-variant-ligatures:none;font-feature-settings:"liga" 0,"dlig" 0,"clig" 0;
  background:linear-gradient(100deg,#a8741e 0%,#e8b44a 22%,#fff3c4 38%,#e8b44a 52%,#b9801f 70%,#f6d27a 88%,#a8741e 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(110,70,10,.35)) drop-shadow(0 0 22px rgba(255,236,170,.75));
  animation:glanz 7s ease-in-out infinite}
@keyframes glanz{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---------- Erzähltexte ---------- */
.erzaehl-schleier{position:absolute;left:0;right:0;bottom:0;height:48vh;pointer-events:none;opacity:0;
  background:linear-gradient(to top,rgba(20,18,58,.88) 0%,rgba(20,18,58,.62) 45%,transparent 100%)}
.erzaehl{position:absolute;left:0;right:0;bottom:12vh;display:flex;justify-content:center;padding:0 16px;
  opacity:0;pointer-events:none}
.erzaehl p{max-width:30ch;text-align:center;font-style:italic;font-weight:500;
  font-size:clamp(24px,2.4vw + 10px,44px);line-height:1.25;color:var(--perle);
  text-shadow:0 2px 24px rgba(15,12,50,.9),0 0 2px rgba(15,12,50,.8)}

/* ---------- Scroll-Hinweis ---------- */
.hinweis{position:absolute;left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;color:#5a4f86;font-style:italic;
  font-size:clamp(15px,.6vw + 12px,19px);text-shadow:0 0 14px rgba(255,255,255,.9);white-space:nowrap}
.hinweis-feder{width:2px;height:44px;border-radius:2px;
  background:linear-gradient(transparent,#8a7bc4 40%,var(--gold));animation:feder 2.2s ease-in-out infinite}
@keyframes feder{0%{transform:scaleY(.3);transform-origin:top;opacity:0}40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1) translateY(16px);opacity:0}}

/* ---------- Helden im Vordergrund ---------- */
.held{position:absolute;bottom:-2vh;height:auto;pointer-events:none;opacity:0;will-change:transform,opacity;
  filter:drop-shadow(0 18px 30px rgba(10,8,40,.55))}
.held-milo{left:max(3vw,8px);width:auto;height:min(60vh,64vw)}
.held-solaryx{right:max(1vw,4px);width:auto;height:min(66vh,70vw)}

.kapitel-marke{font-family:"Cinzel",serif;font-weight:700;color:var(--gold);letter-spacing:.28em;font-size:.78em;text-transform:uppercase;margin-bottom:.7em}

/* ---------- Kapitel I: Bewohner ---------- */
.bewohner{position:relative;background:
  linear-gradient(var(--nacht),rgba(28,27,74,0) 16vh),
  radial-gradient(80% 50% at 50% 14vh,rgba(120,100,200,.3),transparent 70%),
  linear-gradient(var(--nacht),#272566 30%,#2d2a6b 70%,#241f55)}
.bewohner-kopf{max-width:760px;margin:0 auto;padding:18vh 16px 6vh;text-align:center}
.bewohner-kopf :is(h1,h2){font-family:"Cinzel",serif;font-weight:700;font-size:clamp(32px,4.4vw,68px);line-height:1.08;color:var(--gold-hell);
  text-shadow:0 0 30px rgba(232,180,74,.35)}
.bewohner-intro{margin-top:.8em;color:var(--lavendel);font-style:italic;font-size:1.1em}

.bahn{position:relative;overflow:hidden}
.bahn-spur{display:flex;width:max-content;will-change:transform}
.figur{position:relative;width:100vw;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(16px,4vw,72px);padding:6vh max(6vw,16px)}
.figur-bild{position:relative;display:flex;justify-content:center;align-items:center;height:78vh}
.figur-bild::before{content:"";position:absolute;inset:8% 6%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--aura) 55%,transparent),transparent 72%);filter:blur(18px);opacity:.8;
  animation:aura 6s ease-in-out infinite}
.figur-bild img{position:relative;max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 24px 40px rgba(8,6,35,.6));animation:schweben 7s ease-in-out infinite}
.figur-klein .figur-bild img{max-height:72%}
.figur-text{max-width:38ch;min-width:0}
.figur-rolle{font-style:italic;color:var(--aura);font-weight:500;letter-spacing:.04em;filter:brightness(1.25)}
.figur :is(h2,h3){font-family:"Cinzel",serif;font-weight:700;font-size:clamp(34px,min(4.2vw,9vh),80px);white-space:nowrap;line-height:1;margin:.12em 0 .35em;
  background:linear-gradient(100deg,#c08a2a,#fbe6a6 45%,#e8b44a 70%,#b9801f);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,230,160,.25))}
.figur-text p{color:#e9e4fb}
.figur blockquote{margin-top:1em;padding-left:.9em;border-left:2px solid var(--aura);font-style:italic;font-size:1.15em;color:var(--gold-hell)}
@keyframes schweben{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-14px) rotate(.4deg)}}
@keyframes aura{0%,100%{transform:scale(.96);opacity:.7}50%{transform:scale(1.04);opacity:.95}}

@media (max-width:820px){
  .bahn-spur{display:block;width:auto}
  .figur{width:auto;min-height:0;grid-template-columns:1fr;padding:6vh 16px 10vh;text-align:center}
  .figur-bild{height:52vh}
  .figur-text{margin:0 auto}
  .figur blockquote{border-left:0;padding-left:0}
}

/* ---------- Kapitel II: Bücher ---------- */
.buecher{position:relative;padding:16vh 16px 14vh;overflow:hidden;
  background:radial-gradient(70% 40% at 50% 0%,rgba(232,180,74,.14),transparent 70%),linear-gradient(#241f55,#1e1a4a 60%,#1c1b4a)}
.buecher-kopf{max-width:760px;margin:0 auto 8vh;text-align:center}
.buecher-kopf :is(h1,h2){font-family:"Cinzel",serif;font-weight:700;font-size:clamp(32px,4.4vw,68px);line-height:1.08;color:var(--gold-hell);
  text-shadow:0 0 30px rgba(232,180,74,.35)}
.buecher-intro{margin-top:.8em;color:var(--lavendel);font-style:italic;font-size:1.1em}

.pfad{list-style:none;max-width:1100px;margin:0 auto;position:relative}
.pfad::before{content:"";position:absolute;left:50%;top:4%;bottom:4%;width:2px;transform:translateX(-50%);
  background:repeating-linear-gradient(to bottom,rgba(232,180,74,.7) 0 8px,transparent 8px 18px);opacity:.55}
.band{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,6vw,96px);align-items:center;margin-bottom:14vh}
.band:nth-child(even) .band-buch{order:2}
.band-buch{display:flex;justify-content:center;perspective:1400px}
.buch3d{--b:min(300px,62vw);--h:calc(var(--b) * 1.49);position:relative;width:var(--b);height:var(--h);
  transform-style:preserve-3d;transform:rotateY(-36deg) rotateX(5deg);will-change:transform}
.band:nth-child(even) .buch3d{transform:rotateY(36deg) rotateX(5deg)}
.buch3d .seite{position:absolute;backface-visibility:hidden}
.buch3d .vorne{inset:0;transform:translateZ(calc(var(--dicke) / 2));border-radius:2px 5px 5px 2px;overflow:hidden;
  box-shadow:0 0 70px color-mix(in srgb,var(--glut) 40%,transparent)}
.buch3d .vorne img{display:block;width:100%;height:100%;object-fit:cover}
.buch3d .vorne::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.35) 0,rgba(255,255,255,.18) 1.2%,rgba(0,0,0,.12) 2.6%,transparent 5%),
             linear-gradient(100deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 64%)}
.buch3d .hinten{inset:0;transform:rotateY(180deg) translateZ(calc(var(--dicke) / 2));background:var(--ruecken);border-radius:5px 2px 2px 5px}
/* Buchrücken links */
.buch3d .ruecken{top:0;height:100%;width:var(--dicke);left:calc((var(--b) - var(--dicke)) / 2);
  transform:rotateY(-90deg) translateZ(calc(var(--b) / 2));
  background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,255,255,.12) 45%,rgba(0,0,0,.35)),var(--ruecken);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:10px 0;overflow:hidden}
.buch3d .ruecken span,.buch3d .ruecken em{writing-mode:vertical-rl;font-family:"Cinzel",serif;font-weight:700;color:#f3d48a;
  font-size:clamp(7px,calc(var(--dicke) * .42),12px);letter-spacing:.08em;white-space:nowrap;font-style:normal;text-transform:uppercase}
.buch3d .ruecken em{font-size:clamp(6px,calc(var(--dicke) * .32),9px);opacity:.85}
/* Seitenschnitt rechts und oben */
.buch3d .blatt{top:3px;height:calc(100% - 6px);width:var(--dicke);left:calc((var(--b) - var(--dicke)) / 2);
  transform:rotateY(90deg) translateZ(calc(var(--b) / 2 - 3px));
  background:repeating-linear-gradient(90deg,#f6efdd 0 1px,#e2d6bb 1px 2px),#efe6cf;box-shadow:inset 0 0 8px rgba(120,90,40,.35)}
.buch3d .oben{left:2px;width:calc(100% - 5px);height:var(--dicke);top:calc((var(--h) - var(--dicke)) / 2);
  transform:rotateX(90deg) translateZ(calc(var(--h) / 2 - 3px));
  background:repeating-linear-gradient(0deg,#f6efdd 0 1px,#e2d6bb 1px 2px),#efe6cf}
.band-buch{filter:drop-shadow(0 30px 40px rgba(5,4,25,.55))}

/* Band 4: Geheimnis im Nebel */
.nebelbuch .vorne img{filter:blur(16px) saturate(.5) brightness(1.15);transform:scale(1.15)}
.nebelbuch .milch{position:absolute;inset:0;background:
  radial-gradient(60% 45% at 50% 45%,rgba(255,255,255,.75),rgba(235,228,250,.55) 60%,rgba(200,190,235,.35)),
  linear-gradient(rgba(246,241,251,.25),rgba(246,241,251,.5));animation:milch 8s ease-in-out infinite alternate}
.nebelbuch .frage{position:absolute;inset:0;display:grid;place-items:center;font-family:"Cinzel",serif;font-weight:700;
  font-size:calc(var(--b) * .45);color:#e8b44a;text-shadow:0 0 24px rgba(255,236,170,.9),0 0 60px rgba(232,180,74,.6);
  animation:frage 4s ease-in-out infinite}
.siegel.siegel-leise{background:radial-gradient(circle at 35% 30%,#8e86c8,#4a4386 70%)}
@keyframes milch{from{opacity:.85}to{opacity:1;filter:hue-rotate(20deg)}}
@keyframes frage{0%,100%{opacity:.75;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}

.band-nr{font-family:"Cinzel",serif;font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.78em;color:var(--gold);display:flex;align-items:center;gap:.8em}
.siegel{display:inline-grid;place-items:center;width:3.6em;height:3.6em;border-radius:50%;letter-spacing:0;font-size:.95em;
  color:#fff7df;background:radial-gradient(circle at 35% 30%,#d1485f,#8e1f33 70%);box-shadow:inset 0 0 0 3px rgba(255,255,255,.12),0 4px 10px rgba(0,0,0,.35);transform:rotate(-8deg)}
.band :is(h2,h3){font-family:"Cinzel",serif;font-weight:700;font-size:clamp(28px,3vw,46px);line-height:1.1;margin:.3em 0 .15em;color:var(--gold-hell)}
.band-unter{font-style:italic;color:var(--lavendel);margin-bottom:.6em}
.band-text>p:not(.band-nr):not(.band-unter):not(.band-format){color:#e9e4fb;margin-top:.5em}
.band-format{margin-top:.9em;color:var(--lavendel);font-size:.9em;letter-spacing:.02em}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.2em}
.knopf{display:inline-flex;align-items:center;gap:.5em;padding:.7em 1.3em;border-radius:999px;text-decoration:none;font-weight:500;font-size:.95em;transition:transform .2s,box-shadow .2s}
.knopf-gold{color:#2a1d05;background:linear-gradient(100deg,#d99a2b,#fbe6a6 50%,#e8b44a);box-shadow:0 6px 20px rgba(232,180,74,.35)}
.knopf-gold:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(232,180,74,.5)}
.knopf-gold:focus-visible{outline:3px solid var(--perle);outline-offset:3px}
.knopf-leise{color:var(--lavendel);border:1px solid rgba(207,200,240,.35);cursor:default}
.knopf-leise small{font-size:.75em;padding:.15em .55em;border-radius:999px;background:rgba(207,200,240,.15)}

.extras{max-width:1100px;margin:4vh auto 0;text-align:center}
.extras-titel{font-family:"Cinzel",serif;font-weight:700;font-size:clamp(22px,2.2vw,32px);color:var(--gold-hell);margin-bottom:1.4em}
.extras-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,40px)}
.extra{display:flex;flex-direction:column;gap:.35em;text-decoration:none;color:#e9e4fb;padding:18px;border-radius:18px;
  background:rgba(255,255,255,.04);border:1px solid rgba(207,200,240,.12);transition:transform .3s,background .3s}
a.extra:hover{transform:translateY(-6px);background:rgba(255,255,255,.07)}
/* alle Cover gleich hoch und unten auf einer Linie, damit Titel und Texte darunter auf gleicher Höhe beginnen */
.extra img{width:100%;height:clamp(220px,22vw,300px);object-fit:contain;object-position:50% 100%;margin-bottom:.6em;filter:drop-shadow(0 14px 24px rgba(0,0,0,.45))}
.extra-art{font-size:.8em;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.extra strong{font-family:"Cinzel",serif;color:var(--gold-hell);font-size:1.05em}
.extra span:last-child{font-size:.92em;color:var(--lavendel)}

@media (max-width:820px){
  .pfad::before{left:16px}
  .band{grid-template-columns:1fr;text-align:center;margin-bottom:10vh}
  .band:nth-child(even) .band-buch{order:0}
  .band-nr,.knoepfe{justify-content:center}
  .extras-reihe{grid-template-columns:1fr;max-width:380px;margin:0 auto}
}

/* ---------- Kapitel III: Spiele ---------- */
.spiele{position:relative;padding:16vh 16px 14vh;background:
  radial-gradient(60% 40% at 50% 30%,rgba(217,87,127,.16),transparent 70%),linear-gradient(#1c1b4a,#22205a 50%,#241f55)}
.spiele-kopf{max-width:760px;margin:0 auto 6vh;text-align:center}
.spiele-kopf :is(h1,h2){font-family:"Cinzel",serif;font-weight:700;font-size:clamp(32px,4.4vw,68px);line-height:1.08;color:var(--gold-hell);text-shadow:0 0 30px rgba(232,180,74,.35)}
.spiele-intro{margin-top:.8em;color:var(--lavendel);font-style:italic;font-size:1.1em}
.spiel{position:relative;max-width:960px;margin:0 auto;aspect-ratio:4/3;border-radius:28px;overflow:hidden;
  background:radial-gradient(70% 60% at 50% 45%,#3d2f7a,#1d1a4c 75%);
  box-shadow:0 0 0 1px rgba(232,180,74,.35),0 0 0 8px rgba(255,255,255,.03),0 30px 80px rgba(5,4,25,.6)}
.spiel canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:none}
.spiel-zaehler{position:absolute;left:18px;top:14px;font-size:.9em;color:var(--lavendel);
  background:rgba(20,18,58,.55);padding:.35em .9em;border-radius:999px;backdrop-filter:blur(4px)}
.spiel-zaehler b{color:var(--gold-hell)}
.spiel-hinweis{position:absolute;left:50%;bottom:16px;transform:translate(-50%,10px);max-width:calc(100% - 32px);text-align:center;
  font-style:italic;color:var(--perle);background:rgba(20,18,58,.7);padding:.5em 1.1em;border-radius:14px;opacity:0;transition:opacity .4s,transform .4s;pointer-events:none}
.spiel-hinweis.sichtbar{opacity:1;transform:translate(-50%,0)}
.spiel-tafel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6em;padding:24px;text-align:center;
  background:radial-gradient(circle at 50% 40%,rgba(36,31,85,.82),rgba(20,18,58,.94));backdrop-filter:blur(3px)}
.spiel-tafel[hidden]{display:none}
.spiel-tafel :is(h2,h3){font-family:"Cinzel",serif;font-weight:700;font-size:clamp(26px,3.2vw,44px);color:var(--gold-hell)}
.spiel-tafel p{max-width:46ch;color:#e9e4fb}
.spiel-tafel .knopf{margin-top:.6em;border:0;font:inherit;cursor:pointer}
.spiel-marke{font-family:"Cinzel",serif;font-weight:700;letter-spacing:.25em;text-transform:uppercase;font-size:.75em;color:var(--gold)}
.spiel-ende img{width:min(150px,30%);height:auto;filter:drop-shadow(0 10px 20px rgba(0,0,0,.4));animation:schweben 5s ease-in-out infinite}
@media (max-width:820px){ .spiel{aspect-ratio:3/4;max-height:78svh;border-radius:20px} .spiel-tafel p{font-size:.95em} }

/* ---------- Kapitel IV: Inselkarte ---------- */
.karte{position:relative;padding:16vh 16px 14vh;background:linear-gradient(#241f55,#2a2563 50%,#241f55)}
.karte-kopf{max-width:760px;margin:0 auto 6vh;text-align:center}
.karte-kopf :is(h1,h2){font-family:"Cinzel",serif;font-weight:700;font-size:clamp(32px,4.4vw,68px);line-height:1.08;color:var(--gold-hell);text-shadow:0 0 30px rgba(232,180,74,.35)}
.karte-intro{margin-top:.8em;color:var(--lavendel);font-style:italic;font-size:1.1em}
.karte-buehne{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,760px) minmax(260px,1fr);gap:clamp(20px,3vw,48px);align-items:center}
.karte-blatt{position:relative;margin:0;border-radius:24px;overflow:hidden;aspect-ratio:1;
  box-shadow:0 0 0 1px rgba(232,180,74,.35),0 30px 80px rgba(5,4,25,.6);transform-style:preserve-3d}
.karte-blatt img{display:block;width:100%;height:100%;object-fit:cover}
.ort{position:absolute;left:var(--x);top:var(--y);width:44px;height:44px;margin:-22px 0 0 -22px;border:0;border-radius:50%;
  background:transparent;cursor:pointer;display:grid;place-items:center}
.ort i{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,#fff6d8 0 30%,#e8b44a 60%,rgba(232,180,74,0) 72%);
  box-shadow:0 0 14px 4px rgba(255,214,120,.75);animation:puls 2.4s ease-in-out infinite}
.ort::after{content:"";position:absolute;inset:6px;border-radius:50%;border:2px solid rgba(255,230,160,.7);animation:ring 2.4s ease-out infinite}
.ort.entdeckt i{background:radial-gradient(circle,#ffffff 0 30%,#9be7c4 60%,rgba(155,231,196,0) 72%);box-shadow:0 0 12px 3px rgba(155,231,196,.6)}
.ort.entdeckt::after{border-color:rgba(155,231,196,.5)}
.ort.aktiv i{transform:scale(1.4)}
.ort:focus-visible{outline:3px solid var(--perle);outline-offset:2px}
@keyframes puls{0%,100%{transform:scale(.9)}50%{transform:scale(1.15)}}
@keyframes ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.karte-tafel{position:relative;padding:28px 26px;border-radius:22px;min-height:260px;
  background:linear-gradient(160deg,#f6ecd6,#ead9b6);color:var(--tinte);box-shadow:0 20px 50px rgba(5,4,25,.45)}
.karte-tafel::before{content:"";position:absolute;inset:8px;border-radius:16px;border:1px solid rgba(140,100,40,.35);pointer-events:none}
.karte-zaehler{font-size:.85em;color:#7a5a24;margin-bottom:.8em}
.karte-zaehler b{color:#a5681a}
.karte-band{font-family:"Cinzel",serif;font-weight:700;font-size:.75em;letter-spacing:.2em;text-transform:uppercase;color:#a5681a}
.karte-tafel h3{font-family:"Cinzel",serif;font-weight:700;font-size:clamp(24px,2.2vw,32px);line-height:1.15;margin:.3em 0 .5em;color:#3d2a5c}
.karte-inhalt{transition:opacity .25s,transform .25s}
.karte-inhalt.wechsel{opacity:0;transform:translateY(8px)}
@media (max-width:820px){
  .karte-buehne{grid-template-columns:1fr}
  .karte-blatt{border-radius:18px}
  .ort{width:40px;height:40px;margin:-20px 0 0 -20px}
  .karte-tafel{min-height:0}
}
@media (prefers-reduced-motion:reduce){ .ort i,.ort::after{animation:none} }

/* ---------- Kapitel V: Lexikon ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lexikon{position:relative;padding:16vh 16px 14vh;background:linear-gradient(#241f55,#1f1b4d 60%,#241f55)}
.lexikon-kopf{max-width:760px;margin:0 auto 4vh;text-align:center}
.lexikon-kopf :is(h1,h2){font-family:"Cinzel",serif;font-weight:700;font-size:clamp(32px,4.4vw,68px);line-height:1.08;color:var(--gold-hell);text-shadow:0 0 30px rgba(232,180,74,.35)}
.lexikon-intro{margin-top:.8em;color:var(--lavendel);font-style:italic;font-size:1.1em}
/* Leiste mit dem geheimen Wort */
.lex-leiste{position:sticky;top:10px;z-index:5;max-width:860px;margin:0 auto 3vh;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 4px;
  padding:10px 14px;border-radius:999px;background:rgba(20,18,58,.72);backdrop-filter:blur(8px);box-shadow:0 0 0 1px rgba(232,180,74,.25)}
.lex-leiste b{font-family:"Cinzel",serif;font-weight:700;font-size:clamp(15px,2.2vw,24px);width:1.05em;text-align:center;color:transparent;transition:color .5s,text-shadow .5s,transform .5s;
  background:radial-gradient(circle,rgba(232,180,74,.55) 0 2.5px,transparent 3.5px) center/100% 100% no-repeat}
.lex-leiste b.an{background:none;color:var(--gold-hell);text-shadow:0 0 14px rgba(255,214,120,.8);transform:translateY(-2px)}
.lex-leiste .lex-luecke{width:.9em}
.lex-steuerung{max-width:860px;margin:0 auto 4vh;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
.lex-chips{display:flex;flex-wrap:wrap;gap:8px}
.lex-chip{font:inherit;font-size:.9em;padding:.45em 1em;border-radius:999px;cursor:pointer;color:var(--lavendel);
  background:rgba(255,255,255,.05);border:1px solid rgba(207,200,240,.3);transition:background .2s,color .2s}
.lex-chip[aria-pressed="true"]{color:#2a1d05;background:linear-gradient(100deg,#d99a2b,#fbe6a6 50%,#e8b44a);border-color:transparent}
.lex-chip:focus-visible,.lex-suche input:focus-visible{outline:3px solid var(--perle);outline-offset:2px}
.lex-suche input{font:inherit;font-size:.95em;width:min(300px,100%);padding:.5em 1em;border-radius:999px;color:var(--perle);
  background:rgba(255,255,255,.06);border:1px solid rgba(207,200,240,.3)}
.lex-suche input::placeholder{color:rgba(207,200,240,.6)}
/* Einträge wie Buchseiten mit Schmuckinitiale */
.lex-liste{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(16px,2.4vw,26px)}
.lex-eintrag{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2.4vw,28px);align-items:start;
  padding:clamp(20px,3vw,32px);border-radius:18px;color:var(--tinte);background:linear-gradient(160deg,#f6ecd6,#ead9b6);box-shadow:0 14px 34px rgba(5,4,25,.4)}
.lex-eintrag::before{content:"";position:absolute;inset:7px;border-radius:13px;border:1px solid rgba(140,100,40,.3);pointer-events:none}
.lex-eintrag[hidden],.lex-wortende[hidden]{display:none}
.lex-initiale{display:grid;place-items:center;width:clamp(64px,9vw,96px);aspect-ratio:1;border-radius:14px;font-family:"Cinzel",serif;font-weight:700;
  font-size:clamp(40px,6vw,64px);line-height:1;color:#fbe6a6;background:radial-gradient(circle at 35% 30%,#5b4aa8,#2e2465 75%);
  box-shadow:inset 0 0 0 3px #d9a440,inset 0 0 0 6px rgba(46,36,101,1),inset 0 0 0 7px rgba(217,164,64,.6),0 6px 14px rgba(40,25,80,.35);
  text-shadow:0 2px 0 rgba(90,50,10,.6),0 0 16px rgba(255,214,120,.6)}
.lex-kat{font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:#a5681a}
.lex-eintrag :is(h2,h3){font-family:"Cinzel",serif;font-weight:700;font-size:clamp(1.25em,2vw,1.6em);line-height:1.15;color:#3d2a5c;margin:.15em 0 .5em}
.lex-text{font-size:1.02em;line-height:1.55}
.lex-buzz{margin-top:1em;padding:.6em .9em;border-radius:10px;background:rgba(246,201,69,.24);font-style:italic;font-size:.95em;color:#5a3d10;transform:rotate(-.5deg)}
.lex-buzz span{font-style:normal;font-weight:500;color:#8a5a14}
.lex-wortende{display:flex;justify-content:center;padding:4px 0}
.lex-wortende span{width:120px;height:14px;background:radial-gradient(circle,#e8b44a 0 3px,transparent 4px) center/18px 14px repeat-x;opacity:.7}
.lex-leer{text-align:center;color:var(--lavendel);font-style:italic;margin-top:2em}
.lex-finale{max-width:760px;margin:10vh auto 0;text-align:center}
.lex-finale-ober{font-style:italic;color:var(--lavendel)}
.lex-finale-wort{font-family:"Cinzel",serif;font-weight:700;font-size:clamp(30px,5vw,64px);line-height:1.1;margin:.2em 0 .4em;
  background:linear-gradient(100deg,#a8741e,#e8b44a 22%,#fff3c4 40%,#e8b44a 55%,#b9801f 75%,#f6d27a);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 20px rgba(255,236,170,.5));animation:glanz 7s ease-in-out infinite}
.lex-finale-text{color:#e9e4fb;font-size:1.1em}
@media (max-width:820px){ .lex-steuerung{justify-content:center} .lex-suche,.lex-suche input{width:100%} .lex-eintrag{grid-template-columns:1fr} .lex-initiale{width:64px} .lex-leiste{border-radius:18px} }
@media (prefers-reduced-motion:reduce){ .lex-finale-wort{animation:none} }

/* ---------- Buzz als 3D-Begleiter ---------- */
.buzz-buehne{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}
.buzz-treffer{position:fixed;left:0;top:0;width:80px;height:80px;border:0;border-radius:50%;background:transparent;cursor:pointer;z-index:61;padding:0}
.buzz-treffer:focus-visible{outline:3px solid var(--gold-hell)}
.buzz-blase{position:fixed;left:0;top:0;z-index:62;max-width:min(260px,62vw);padding:.6em .9em;border-radius:16px 16px 16px 4px;
  font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;font-size:clamp(15px,1vw + 10px,18px);line-height:1.3;color:#3a2608;
  background:linear-gradient(160deg,#fff6d6,#f6dc8e);box-shadow:0 8px 24px rgba(10,8,40,.45),0 0 0 2px rgba(232,180,74,.7);
  opacity:0;pointer-events:none;transition:opacity .25s}
.buzz-blase.links{border-radius:16px 16px 4px 16px}
.buzz-blase.sichtbar{opacity:1}
.buzz-schmiere{position:fixed;left:0;top:0;width:220px;height:260px;margin:-130px 0 0 -110px;z-index:59;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 45% 30% at 50% 30%,rgba(255,240,190,.35),transparent 70%),
             linear-gradient(to bottom,rgba(255,236,170,.0),rgba(255,236,170,.22) 30%,rgba(255,236,170,.0));
  border-radius:40%;filter:blur(2px)}
.buzz-schmiere.an{animation:schmiere 4.5s ease-out forwards}
@keyframes schmiere{0%{opacity:0;transform:scaleY(.4)}10%{opacity:1;transform:scaleY(.6)}60%{opacity:.8;transform:scaleY(1.4) translateY(30px)}100%{opacity:0;transform:scaleY(1.6) translateY(50px)}}

.buzz-riss{position:fixed;left:0;top:0;width:600px;height:600px;margin:-300px 0 0 -300px;z-index:58;pointer-events:none;opacity:0}
.buzz-riss svg{width:100%;height:100%;overflow:visible}
.buzz-riss polyline{fill:none;stroke-linejoin:round;stroke-linecap:round}
.buzz-riss .schatten polyline{stroke:rgba(10,8,40,.45);stroke-width:3.2;transform:translate(1px,1.5px)}
.buzz-riss .licht polyline{stroke:rgba(255,255,255,.92);stroke-width:1.4}
.buzz-riss .ring{stroke-dasharray:22 9}
.buzz-riss .kern{fill:rgba(255,255,255,.35);stroke:rgba(255,255,255,.9);stroke-width:1.5}
.buzz-riss.an{animation:riss 5.5s ease-out forwards}
@keyframes riss{0%{opacity:0;transform:scale(.6)}3%{opacity:1;transform:scale(1.04)}6%{transform:scale(1)}35%{opacity:1}100%{opacity:0}}
.buzz-buehne.wackeln{animation:wackeln .35s linear}
@keyframes wackeln{0%,100%{transform:none}20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-3px,2px)}80%{transform:translate(2px,-1px)}}

/* ---------- Fußzeile ---------- */
.fuss{padding:10vh 16px 8vh;text-align:center;background:linear-gradient(#241f55,#16143a)}
.fuss-wort{font-family:"Cinzel",serif;font-weight:700;font-size:clamp(26px,3vw,40px);color:var(--gold-hell)}
.fuss-unter{margin-top:.4em;color:var(--lavendel);font-style:italic;font-size:.95em}
.fuss-links{margin-top:1.4em;display:flex;justify-content:center;gap:24px}
.fuss-links a,.recht a{color:var(--gold-hell);text-underline-offset:3px}

/* ---------- Rechtsseiten ---------- */
.recht-seite{background:#1c1b4a}
.recht{max-width:760px;margin:0 auto;padding:8vh 20px 12vh;color:#e9e4fb;line-height:1.6}
.recht h1{font-family:"Cinzel",serif;font-weight:700;font-size:clamp(30px,4vw,48px);color:var(--gold-hell);margin:.4em 0 .6em}
.recht h2{font-family:"Cinzel",serif;font-weight:700;font-size:1.05em;color:var(--gold);margin:1.8em 0 .4em;letter-spacing:.03em}
.recht p{margin-bottom:.8em}
.recht-zurueck{font-style:italic}
.recht-kurz{padding:1em 1.2em;border-radius:14px;background:rgba(232,180,74,.12);border:1px solid rgba(232,180,74,.35)}
.recht-stand{margin-top:2.5em;color:var(--lavendel);font-style:italic}

@media (prefers-reduced-motion:reduce){
  .titel-wort,.hinweis-feder,.figur-bild img,.figur-bild::before{animation:none}
  .buch3d{transition:none}
  .nebelbuch .milch,.nebelbuch .frage{animation:none}
}

/* ---------- Milos Boot gleitet zum Strand ---------- */
.boot{position:absolute;left:0;top:0;width:200px;opacity:0;pointer-events:none;transform-origin:50% 85%;will-change:transform,opacity}
.boot img{display:block;width:100%;height:auto;position:relative;
  /* der Rumpf taucht ins Wasser ein */
  -webkit-mask-image:linear-gradient(to bottom,#000 74%,rgba(0,0,0,.35) 88%,transparent 98%);
          mask-image:linear-gradient(to bottom,#000 74%,rgba(0,0,0,.35) 88%,transparent 98%);
  filter:saturate(.9) brightness(.92) drop-shadow(0 6px 10px rgba(10,8,40,.35));
  animation:boot-schaukeln 3.2s ease-in-out infinite}
@keyframes boot-schaukeln{0%,100%{transform:rotate(-1.6deg) translateY(0)}50%{transform:rotate(1.4deg) translateY(2.5%)}}
.boot-licht{position:absolute;left:86%;top:13%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  mix-blend-mode:screen;background:radial-gradient(circle,rgba(255,214,120,.85),rgba(255,180,70,.35) 30%,transparent 65%);
  animation:boot-flackern 2.4s ease-in-out infinite}
@keyframes boot-flackern{0%,100%{opacity:.85}35%{opacity:1}55%{opacity:.7}75%{opacity:.95}}
.boot-kiel{position:absolute;left:24%;top:78%;width:70%;aspect-ratio:2.6}
.boot-kiel i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(235,240,255,.55);
  box-shadow:0 0 6px rgba(255,255,255,.25);opacity:0;animation:boot-welle 3.6s ease-out infinite}
.boot-kiel i:nth-child(2){animation-delay:.9s}.boot-kiel i:nth-child(3){animation-delay:1.8s}.boot-kiel i:nth-child(4){animation-delay:2.7s}
@keyframes boot-welle{0%{transform:translate(10%,-6%) scale(.35);opacity:.8}100%{transform:translate(-35%,30%) scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.boot img,.boot-licht,.boot-kiel i{animation:none}}

/* ---------- Lesungen & Termine (eigene Seite + Hinweis auf der Startseite) ---------- */
.termine-seite{background:radial-gradient(120% 70% at 50% 0%,#3a3388,#1c1b4a 60%)}
.termine-kopf{max-width:900px;margin:0 auto;padding:7vh 16px 3vh;text-align:center}
.termine-kopf .recht-zurueck{text-align:left;margin-bottom:4vh}
.termine-kopf .recht-zurueck a{color:var(--gold-hell)}
.termine-kopf h1{font-family:"Cinzel Decorative","Cinzel",serif;font-weight:700;font-size:clamp(34px,6vw,68px);color:var(--gold-hell);line-height:1.1}
.termine-intro{max-width:640px;margin:1em auto 0;color:var(--lavendel);font-style:italic}
.termine{max-width:900px;margin:0 auto;padding:2vh 16px 10vh}
.termine-ueber{font-family:"Cinzel",serif;font-weight:700;color:var(--gold);font-size:clamp(20px,2.2vw,28px);margin:6vh 0 2vh;letter-spacing:.04em}
.termine-liste{display:grid;gap:22px}
.termin{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,3vw,30px);background:var(--pergament);color:var(--tinte);
  border-radius:18px;padding:clamp(18px,3vw,30px);box-shadow:0 18px 40px rgba(8,6,30,.45),inset 0 0 0 1px rgba(160,120,60,.25)}
.termin-datum{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:104px;padding:12px 10px;
  border-radius:14px;background:linear-gradient(160deg,var(--indigo),var(--nacht));color:var(--gold-hell);text-align:center;line-height:1.1}
.termin-datum b{font-family:"Cinzel",serif;font-size:clamp(40px,6vw,56px)}
.termin-datum span{font-size:.85em}
.termin-wtag{text-transform:capitalize;color:var(--lavendel)}
.termin-art{font-family:"Cinzel",serif;font-weight:700;font-size:.72em;letter-spacing:.18em;text-transform:uppercase;color:#a8325a}
.termin h3{font-family:"Cinzel",serif;font-weight:700;font-size:clamp(20px,2.4vw,28px);line-height:1.2;margin:.3em 0 .5em}
.termin-fakten{list-style:none;display:grid;gap:4px}
.termin-fakten span{display:inline-block;width:1.5em}
.termin-text{margin-top:.7em;font-style:italic}
.termin-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:1em}
.termine-knopf{display:inline-block;padding:.55em 1.2em;border-radius:99px;background:linear-gradient(135deg,var(--gold-hell),var(--gold));
  color:var(--tinte);font-family:"Cinzel",serif;font-weight:700;font-size:.78em;letter-spacing:.06em;text-decoration:none;
  box-shadow:0 6px 16px rgba(232,180,74,.35);transition:transform .2s}
.termine-knopf:hover{transform:translateY(-2px)}
.termine-knopf-leise{background:transparent;color:var(--indigo);box-shadow:inset 0 0 0 2px var(--indigo)}
.termine-leer{color:var(--lavendel);font-style:italic}
.termine-anfrage{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:clamp(16px,3vw,36px);align-items:center;margin-top:8vh;
  padding:clamp(20px,3vw,34px);border-radius:22px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(232,180,74,.35)}
.termine-anfrage h2{font-family:"Cinzel",serif;font-weight:700;color:var(--gold-hell);font-size:clamp(20px,2.4vw,28px);line-height:1.2;margin-bottom:.5em}
.termine-anfrage p{margin-bottom:.7em}
.termine-buzz{width:100%;height:auto;filter:drop-shadow(0 10px 20px rgba(0,0,0,.4))}
.termine-buzz-spruch{font-style:italic;color:var(--lavendel);font-size:.9em}
.termine-archiv{list-style:none;display:grid;gap:6px;color:var(--lavendel)}
.termine-archiv b{color:var(--gold-hell);font-weight:500}
@media (max-width:620px){
  .termin{grid-template-columns:1fr}
  .termin-datum{flex-direction:row;gap:.4em;justify-content:flex-start;min-width:0}
  .termin-datum b{font-size:34px}
  .termine-anfrage{grid-template-columns:1fr;text-align:center}
  .termine-buzz{max-width:160px;margin:0 auto}
}
/* Hinweis auf der Startseite */
.lesung-hinweis{padding:12vh 16px;text-align:center;background:linear-gradient(#1c1b4a,#241f55)}
.lesung-hinweis h2{font-family:"Cinzel Decorative","Cinzel",serif;font-weight:700;font-size:clamp(30px,5vw,56px);color:var(--gold-hell);line-height:1.1}
.lesung-hinweis .termine-intro{margin-bottom:5vh}
.lesung-hinweis .termin{max-width:760px;margin:0 auto 4vh;text-align:left}
.erzaehl,.hinweis{z-index:6}

/* ---------- Nahtlose Übergänge: alle Kapitel teilen einen Grundton ----------
   Jedes Kapitel behält seinen Lichtschimmer, der aber oben und unten in --grund
   ausläuft. So stoßen überall zwei gleiche Farben aneinander und es gibt keine Kante. */
:root{--grund:#221e55}
.bewohner,.buecher,.spiele,.karte,.lexikon,.lesung-hinweis{
  background:
    linear-gradient(var(--grund),rgba(34,30,85,0) 18vh,rgba(34,30,85,0) calc(100% - 18vh),var(--grund)),
    var(--schimmer,none),
    var(--grund)}
.bewohner{--schimmer:radial-gradient(80% 45% at 50% 30vh,rgba(120,100,200,.28),transparent 70%)}
.buecher{--schimmer:radial-gradient(70% 35% at 50% 26vh,rgba(232,180,74,.12),transparent 70%)}
.spiele{--schimmer:radial-gradient(60% 40% at 50% 40%,rgba(217,87,127,.15),transparent 70%)}
.karte{--schimmer:radial-gradient(70% 45% at 50% 50%,rgba(120,100,200,.16),transparent 70%)}
.lexikon{--schimmer:radial-gradient(70% 40% at 50% 35%,rgba(232,180,74,.07),transparent 70%)}
.lesung-hinweis{--schimmer:radial-gradient(60% 50% at 50% 50%,rgba(232,180,74,.08),transparent 70%)}
.fuss{background:linear-gradient(var(--grund),#16143a)}
.stage::after{background:linear-gradient(to bottom,rgba(34,30,85,0),rgba(34,30,85,.6) 55%,var(--grund) 100%)}
html{background:var(--grund)}

/* ---------- Zwischenspiel: Flug mit Lyrian ---------- */
.flug{position:relative;background:var(--grund)}
.flug-buehne{position:relative;height:100vh;height:100svh;overflow:hidden;background:#cfe3ef}
.flug-welt{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.flug-welt img{display:block;width:100%;height:100%;filter:saturate(1.08)}
/* weicher Rand oben und unten, damit der Abschnitt in die Seite übergeht */
.flug-buehne::before,.flug-buehne::after{content:"";position:absolute;left:0;right:0;height:16vh;z-index:4;pointer-events:none}
.flug-buehne::before{top:0;background:linear-gradient(var(--grund),rgba(34,30,85,0))}
.flug-buehne::after{bottom:0;background:linear-gradient(rgba(34,30,85,0),var(--grund))}
.flug-wolken{position:absolute;inset:0;z-index:2;pointer-events:none}
.flug-wolken i{position:absolute;width:60vmax;height:30vmax;border-radius:50%;opacity:.0;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(246,241,251,.6) 55%,rgba(255,255,255,0));filter:blur(6px)}
.flug-reiter{position:absolute;left:50%;top:44%;width:min(50vw,600px);z-index:3;transform:translate(-50%,-50%);pointer-events:none}
.flug-reiter img{display:block;width:100%;height:auto;transform-origin:50% 40%;
  filter:drop-shadow(0 40px 30px rgba(20,30,60,.35));animation:flug-schweben 2.6s ease-in-out infinite}
@keyframes flug-schweben{0%,100%{transform:translateY(0) scaleY(1)}45%{transform:translateY(-2.2%) scaleY(.965)}}
.flug-kopf{position:absolute;left:0;right:0;top:9vh;z-index:5;text-align:center;padding:0 16px}
.flug-kopf :is(h1,h2){font-family:"Cinzel",serif;font-weight:700;font-size:clamp(32px,4.4vw,64px);color:#fff;text-shadow:0 2px 18px rgba(20,18,60,.7)}
.flug-kopf .kapitel-marke{text-shadow:0 1px 8px rgba(20,18,60,.8)}
.flug-hinweis{color:#fff;font-style:italic;text-shadow:0 1px 10px rgba(20,18,60,.8)}
.flug-text{position:absolute;left:50%;bottom:13vh;z-index:5;width:min(92vw,620px);transform:translateX(-50%);opacity:0;
  text-align:center;font-style:italic;font-weight:500;font-size:clamp(20px,2vw,28px);line-height:1.35;color:#fff;
  padding:.6em 1em;border-radius:16px;background:rgba(28,27,74,.55);backdrop-filter:blur(4px)}
@media (max-width:760px){.flug-reiter{width:92vw;top:46%}}
.funken{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:70}

/* ---------- Milos Lieder: Hörproben ---------- */
.lieder{position:relative;padding:14vh 16px}
.lieder{background:linear-gradient(var(--grund),rgba(34,30,85,0) 18vh,rgba(34,30,85,0) calc(100% - 18vh),var(--grund)),
  radial-gradient(60% 50% at 30% 50%,rgba(232,180,74,.12),transparent 70%),var(--grund)}
.lieder-innen{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.lieder-cover img{width:100%;height:auto;border-radius:14px;box-shadow:0 30px 60px rgba(5,4,25,.55),0 0 0 1px rgba(232,180,74,.3)}
.lieder-cover{position:relative}
.lieder-cover.spielt img{animation:lieder-puls 1.6s ease-in-out infinite}
@keyframes lieder-puls{0%,100%{box-shadow:0 30px 60px rgba(5,4,25,.55),0 0 0 1px rgba(232,180,74,.3)}50%{box-shadow:0 30px 60px rgba(5,4,25,.55),0 0 40px 6px rgba(232,180,74,.45)}}
.lieder-bald{margin-top:1em;text-align:center;font-family:"Cinzel",serif;font-weight:700;font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.lieder :is(h1,h2){font-family:"Cinzel",serif;font-weight:700;font-size:clamp(28px,3.6vw,52px);line-height:1.1;color:var(--gold-hell);text-shadow:0 0 30px rgba(232,180,74,.3)}
.lieder-intro{margin:.6em 0 1.4em;color:var(--lavendel);font-style:italic}
.lieder-liste{list-style:none;display:grid;gap:6px}
.lied{display:grid;grid-template-columns:auto 1.6em 1fr auto;align-items:center;gap:14px;padding:8px 14px 8px 8px;border-radius:14px;
  transition:background .25s}
.lied:hover,.lied.aktiv{background:rgba(255,255,255,.07)}
.lied-knopf{position:relative;width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;
  background:linear-gradient(135deg,var(--gold-hell),var(--gold));box-shadow:0 6px 16px rgba(232,180,74,.3)}
.lied-knopf svg{position:absolute;inset:-4px;width:56px;height:56px;transform:rotate(-90deg)}
.lied-ring-grund{fill:none;stroke:rgba(255,255,255,.12);stroke-width:2.5}
.lied-ring{fill:none;stroke:var(--gold-hell);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:100.5;stroke-dashoffset:100.5}
.lied-symbol{position:absolute;left:50%;top:50%;width:0;height:0;transform:translate(-35%,-50%);
  border-left:14px solid var(--tinte);border-top:9px solid transparent;border-bottom:9px solid transparent}
.lied.aktiv .lied-symbol{width:14px;height:16px;border:0;transform:translate(-50%,-50%);
  background:linear-gradient(90deg,var(--tinte) 0 36%,transparent 36% 64%,var(--tinte) 64%)}
.lied-nr{font-family:"Cinzel",serif;color:var(--gold);text-align:center}
.lied-text{display:flex;flex-direction:column;line-height:1.25}
.lied-text strong{font-family:"Cinzel",serif;font-weight:700;color:var(--gold-hell);font-size:.95em}
.lied-text span{font-size:.85em;color:var(--lavendel);font-style:italic}
.lied-welle{display:flex;gap:3px;align-items:flex-end;height:22px;opacity:0;transition:opacity .3s}
.lied-welle i{width:3px;height:30%;border-radius:2px;background:var(--gold-hell)}
.lied.aktiv .lied-welle{opacity:1}
.lied.aktiv .lied-welle i{animation:lied-balken .9s ease-in-out infinite}
.lied.aktiv .lied-welle i:nth-child(2){animation-delay:.2s}.lied.aktiv .lied-welle i:nth-child(3){animation-delay:.45s}.lied.aktiv .lied-welle i:nth-child(4){animation-delay:.1s}
@keyframes lied-balken{0%,100%{height:25%}50%{height:100%}}
@media (max-width:820px){.lieder-innen{grid-template-columns:1fr}.lieder-cover{max-width:300px;margin:0 auto}}
@media (prefers-reduced-motion:reduce){.lied.aktiv .lied-welle i,.lieder-cover.spielt img{animation:none}}

/* der echte Nebel läuft: CSS-Nebel ausblenden */
.nebel-an .nebel-fallback{opacity:0!important}

/* ---------- Kopfleiste und Menü (alle Seiten) ---------- */
.sprung{position:fixed;left:12px;top:-60px;z-index:200;padding:.5em 1em;border-radius:10px;background:var(--gold-hell);color:var(--tinte);font-weight:500}
.sprung:focus{top:12px}
.kopfleiste{position:fixed;left:0;right:0;top:0;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(16px,3vw,40px);transition:transform .45s ease,background .4s ease,box-shadow .4s ease;
  background:linear-gradient(rgba(20,18,55,.55),rgba(20,18,55,0))}
.kopfleiste.fest{background:rgba(28,27,74,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(251,230,166,.12)}
.kopfleiste.weg{transform:translateY(-110%)}
.menue-offen .kopfleiste{transform:none}
.kopf-marke{font-family:"Cinzel",serif;letter-spacing:.05em;font-weight:700;font-size:clamp(17px,1.2vw + 10px,22px);color:var(--gold-hell);
  text-decoration:none;letter-spacing:.04em;text-shadow:0 0 14px rgba(232,180,74,.45);position:relative;z-index:2}
.kopf-nav ul{list-style:none;display:flex;gap:clamp(10px,1.6vw,28px)}
.kopf-nav a{font-family:"Cinzel",serif;font-weight:700;font-size:15px;letter-spacing:.06em;color:var(--perle);text-decoration:none;
  padding:.35em .1em;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.kopf-nav a:hover,.kopf-nav a:focus-visible{color:var(--gold-hell);border-color:rgba(251,230,166,.5)}
.kopf-nav a[aria-current="page"]{color:var(--gold-hell);border-color:var(--gold)}
.kopf-menue{display:none;position:relative;z-index:2;align-items:center;gap:.5em;padding:.45em .9em;border-radius:999px;cursor:pointer;
  border:1px solid rgba(251,230,166,.45);background:rgba(28,27,74,.55);color:var(--gold-hell);font:700 14px "Cinzel",serif;letter-spacing:.06em}
.kopf-menue-zeichen{display:grid;gap:4px;width:18px}
.kopf-menue-zeichen i{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .3s,opacity .3s}
.menue-offen .kopf-menue-zeichen i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menue-offen .kopf-menue-zeichen i:nth-child(2){opacity:0}
.menue-offen .kopf-menue-zeichen i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:900px){
  .kopf-menue{display:inline-flex}
  .kopf-nav{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s;
    background:radial-gradient(120% 80% at 50% 30%,rgba(58,51,136,.97),rgba(22,20,58,.98))}
  .kopf-nav ul{flex-direction:column;align-items:center;gap:2.4vh}
  .kopf-nav a{font-size:clamp(24px,7vw,34px)}
  .menue-offen .kopf-nav{opacity:1;visibility:visible;transition:opacity .4s}
  .menue-offen .kopf-nav li{animation:menue-rein .5s both}
  .menue-offen .kopf-nav li:nth-child(2){animation-delay:.04s}.menue-offen .kopf-nav li:nth-child(3){animation-delay:.08s}
  .menue-offen .kopf-nav li:nth-child(4){animation-delay:.12s}.menue-offen .kopf-nav li:nth-child(5){animation-delay:.16s}
  .menue-offen .kopf-nav li:nth-child(6){animation-delay:.2s}
  .menue-offen,.menue-offen body{overflow:hidden}
}
@keyframes menue-rein{from{opacity:0;transform:translateY(14px);filter:blur(6px)}}

/* ---------- Seitenwechsel: kurz durch den Nebel ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:nebel-weg .4s ease-in both}
::view-transition-new(root){animation:nebel-her .6s ease-out both}
@keyframes nebel-weg{to{opacity:0;filter:blur(16px) brightness(1.5) saturate(.6)}}
@keyframes nebel-her{from{opacity:0;filter:blur(16px) brightness(1.5) saturate(.6)}}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .kopfleiste,.kopf-nav,.menue-offen .kopf-nav li{transition:none;animation:none}
}

/* Unterseiten: Platz für die Kopfleiste */
.recht{padding-top:calc(8vh + 56px)}
.termine-kopf{padding-top:calc(7vh + 56px)}

/* ---------- Für Eltern ---------- */
.eltern-seite{background:radial-gradient(120% 70% at 50% 0%,#3a3388,#1c1b4a 60%)}
.eltern{max-width:980px;margin:0 auto;padding:calc(7vh + 56px) 16px 10vh;color:#e9e4fb;line-height:1.6}
.eltern-kopf{text-align:center;max-width:760px;margin:0 auto 6vh}
.eltern-kopf h1{font-family:"Cinzel Decorative","Cinzel",serif;font-weight:700;font-size:clamp(32px,5.5vw,60px);color:var(--gold-hell);line-height:1.1;margin:.2em 0 .4em}
.eltern h2{font-family:"Cinzel",serif;font-weight:700;font-size:clamp(22px,2.4vw,30px);color:var(--gold-hell);margin:0 0 .5em}
.eltern-block{margin:0 0 7vh}
.eltern-block > p{max-width:760px}
.eltern-buecher{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:22px;margin-top:1.4em}
.eltern-buecher li{display:flex;flex-direction:column;gap:.5em;padding:14px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(251,230,166,.16)}
.eltern-buecher img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:6px;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.eltern-buecher .quadrat img{aspect-ratio:1}
.eltern-buecher b{font-family:"Cinzel",serif;font-size:15px;line-height:1.3;color:var(--perle)}
.eltern-buecher span{font-size:.85em;color:var(--lavendel);font-style:italic}
.eltern-buecher a{margin-top:auto;font-size:.85em;color:var(--gold-hell);text-underline-offset:3px}
.eltern-punkte{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:1.2em}
.eltern-punkte li{padding:16px 18px;border-radius:16px;background:rgba(232,180,74,.08);border:1px solid rgba(232,180,74,.25)}
.eltern-punkte strong{display:block;font-family:"Cinzel",serif;font-size:15px;color:var(--gold-hell);margin-bottom:.25em}
.eltern a{color:var(--gold-hell);text-underline-offset:3px}
.eltern-vergessen{margin-top:1.2em;padding:.55em 1.1em;border-radius:999px;border:1px solid rgba(251,230,166,.45);background:transparent;
  color:var(--gold-hell);font:italic 500 .9em "Cormorant Garamond",serif;cursor:pointer}
.eltern-vergessen:hover{background:rgba(251,230,166,.1)}

/* ---------- Fehlerseite ---------- */
.fehler-seite{background:radial-gradient(100% 80% at 50% 40%,#3a3388,#1c1b4a 70%)}
.fehler{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:calc(8vh + 56px) 16px 10vh;color:#e9e4fb}
.fehler-zahl{font-family:"Cinzel Decorative","Cinzel",serif;font-weight:700;font-size:clamp(70px,16vw,180px);line-height:1;color:transparent;
  background:linear-gradient(#fbe6a6,#e8b44a);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 30px rgba(232,180,74,.35))}
.fehler h1{font-family:"Cinzel",serif;font-weight:700;font-size:clamp(26px,4vw,44px);color:var(--gold-hell);margin:.3em 0 .4em}
.fehler p{max-width:560px}
.fehler-knoepfe{margin-top:1.6em;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.fehler .termine-knopf-leise,.eltern .termine-knopf-leise{color:var(--gold-hell);box-shadow:inset 0 0 0 2px rgba(251,230,166,.6)}

/* ---------- Unterseiten (Phase 1) ---------- */
body.unterseite{background:var(--grund)}
.unterseite main > section:first-child{padding-top:calc(16vh + 40px)}
.unterseite main > .bewohner:first-child{padding-top:0}
.unterseite main > .bewohner:first-child .bewohner-kopf{padding-top:calc(12vh + 56px)}
a.figur-bild{display:block;color:inherit}
.figur-mehr{color:var(--gold-hell);font-style:italic;text-underline-offset:3px}

/* Startseite: Tore in die Bereiche */
.tore{position:relative;padding:12vh 16px 10vh;background:var(--grund)}
.tore-kopf{max-width:760px;margin:0 auto 6vh;text-align:center}
.tore-kopf h2{font-family:"Cinzel Decorative","Cinzel",serif;font-weight:700;font-size:clamp(30px,4.6vw,56px);color:var(--gold-hell);line-height:1.1}
.tore-raster{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.tor{position:relative;display:block;min-height:260px;border-radius:22px;overflow:hidden;text-decoration:none;color:var(--perle);
  isolation:isolate;box-shadow:0 18px 40px rgba(8,6,30,.45),inset 0 0 0 1px rgba(251,230,166,.16);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.tor img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.04);transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .6s;filter:saturate(.9) brightness(.8)}
.tor::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(28,27,74,0) 30%,rgba(22,20,58,.92) 100%)}
.tor-text{position:absolute;left:0;right:0;bottom:0;padding:22px 22px 20px;display:flex;flex-direction:column;gap:.15em}
.tor-marke{font-family:"Cinzel",serif;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.tor strong{font-family:"Cinzel",serif;font-weight:700;font-size:clamp(20px,1.6vw + 8px,28px);color:var(--gold-hell);line-height:1.15}
.tor-text > span:last-child{font-style:italic;color:var(--lavendel);font-size:.9em;line-height:1.35}
.tor:hover,.tor:focus-visible{transform:translateY(-6px);box-shadow:0 26px 60px rgba(8,6,30,.55),0 0 0 2px rgba(251,230,166,.5),0 0 40px rgba(232,180,74,.25)}
.tor:hover img,.tor:focus-visible img{transform:scale(1.1);filter:saturate(1.05) brightness(.95)}
.tor-gross{grid-column:span 2;grid-row:span 2;min-height:540px}
.tor-gross img{object-position:50% 30%}
@media (max-width:900px){.tore-raster{grid-template-columns:1fr 1fr}.tor-gross{grid-column:span 2;grid-row:auto;min-height:420px}}
@media (max-width:560px){.tore-raster{grid-template-columns:1fr}.tor-gross{grid-column:auto}.tor{min-height:220px}}

/* „Weiter“-Kachel am Ende von Milos Welt */
.tor-weiter{padding:4vh 16px 14vh;background:var(--grund);text-align:center}
.tor-weiter-link{display:inline-flex;flex-direction:column;gap:.2em;max-width:620px;padding:28px 34px;border-radius:22px;text-decoration:none;color:var(--perle);
  background:radial-gradient(120% 100% at 50% 0%,rgba(232,180,74,.16),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(251,230,166,.3);transition:transform .4s}
.tor-weiter-link:hover{transform:translateY(-4px)}
.tor-weiter-link strong{font-family:"Cinzel",serif;font-size:clamp(22px,2.4vw,30px);color:var(--gold-hell)}
.tor-weiter-link span:last-child{font-style:italic;color:var(--lavendel)}

/* Einzelseiten: Figur und Band */
.einzel{min-height:100vh;padding:calc(10vh + 56px) 16px 10vh;
  background:radial-gradient(70% 50% at 30% 30%,color-mix(in srgb,var(--aura,var(--glut,#e8b44a)) 22%,transparent),transparent 70%),var(--grund)}
#einzel{max-width:1100px;margin:0 auto}
.brotkrumen{font-style:italic;color:var(--lavendel);margin-bottom:4vh}
.brotkrumen a{color:var(--gold-hell);text-underline-offset:3px}
.einzel-buehne{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,72px);align-items:center}
.steckbrief-bild img{width:100%;height:auto;max-height:72vh;object-fit:contain;filter:drop-shadow(0 0 50px color-mix(in srgb,var(--aura) 55%,transparent));animation:schweben 6s ease-in-out infinite}
@keyframes schweben{50%{transform:translateY(-12px)}}
.einzel-text h1{font-family:"Cinzel Decorative","Cinzel",serif;font-weight:700;font-size:clamp(38px,6vw,76px);color:var(--gold-hell);line-height:1.05;margin:.1em 0 .3em}
.einzel-text > p{margin-bottom:.8em;color:#e9e4fb}
.einzel-text blockquote{margin:1em 0;padding-left:1em;border-left:3px solid var(--gold);font-style:italic;font-size:1.15em;color:var(--gold-hell)}
.steckbrief-band a,.einzel-hinweis a{color:var(--gold-hell);text-underline-offset:3px}
.einzel-hinweis{font-style:italic;color:var(--lavendel);font-size:.9em;margin-top:1em}
.einzel-hoerprobe{width:100%;margin-top:1em}
.einzel-buch{perspective:1600px;display:flex;justify-content:center}
.buch3d-gross{transform:rotateY(-26deg) rotateX(4deg);width:min(78%,380px)}
.einzel-weiter{margin-top:10vh;text-align:center}
.einzel-weiter ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:2vh}
.einzel-weiter a{display:flex;flex-direction:column;align-items:center;gap:.3em;width:120px;padding:12px;border-radius:18px;text-decoration:none;color:var(--perle);
  background:radial-gradient(80% 70% at 50% 35%,color-mix(in srgb,var(--aura) 30%,transparent),rgba(255,255,255,.03));transition:transform .3s}
.einzel-weiter a:hover{transform:translateY(-4px)}
.einzel-weiter img{width:90px;height:90px;object-fit:contain}
.einzel-weiter span{font-family:"Cinzel",serif;font-size:14px}
.einzel-blaettern{display:flex;justify-content:space-between;margin-top:8vh;font-family:"Cinzel",serif}
.einzel-blaettern a{color:var(--gold-hell);text-decoration:none}
@media (max-width:820px){.einzel-buehne{grid-template-columns:1fr}.steckbrief-bild img{max-height:46vh}.buch3d-gross{width:min(62%,300px)}}
@media (prefers-reduced-motion:reduce){.steckbrief-bild img{animation:none}}

/* Buch-Code */
.code-kasten{max-width:720px;margin:10vh auto 0;padding:clamp(22px,4vw,40px);border-radius:24px;text-align:center;
  background:radial-gradient(120% 100% at 50% 0%,rgba(232,180,74,.14),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(251,230,166,.3)}
.code-kasten h2{font-family:"Cinzel",serif;font-weight:700;font-size:clamp(24px,3vw,34px);color:var(--gold-hell);margin:.2em 0 .5em}
.code-form{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:1.2em}
.code-form input{font:500 1.1em "Cormorant Garamond",serif;padding:.5em 1em;border-radius:999px;border:1px solid rgba(251,230,166,.5);background:rgba(20,18,55,.6);color:var(--perle);min-width:min(260px,70vw);text-align:center}
.code-form input:focus{outline:2px solid var(--gold);outline-offset:2px}
.code-antwort{margin-top:1em;font-style:italic;color:var(--gold-hell);min-height:1.4em}
.code-kapitel{margin-top:1.4em;text-align:left;padding:1.4em 1.6em;border-radius:16px;background:var(--pergament);color:var(--tinte);line-height:1.65;animation:aufrollen .9s ease-out}
.code-kapitel p+p{margin-top:.8em}
@keyframes aufrollen{from{clip-path:inset(0 0 100% 0);opacity:.3}}
.code-form[hidden]{display:none}

/* ---------- Spielen und Mitmachen (Phase 2) ---------- */
a.knopf-leise,button.knopf-leise{cursor:pointer;background:transparent;font:inherit;font-size:.95em}
a.knopf-leise:hover,button.knopf-leise:hover{color:var(--gold-hell);border-color:rgba(251,230,166,.6)}
button.knopf{border:0;font:inherit;cursor:pointer}
button.knopf-leise{border:1px solid rgba(207,200,240,.35)}
.mitmachen{padding:12vh 16px;background:var(--grund);color:#e9e4fb}
.mitmachen-kopf{max-width:760px;margin:0 auto 5vh;text-align:center}
.mitmachen-kopf :is(h1,h2){font-family:"Cinzel Decorative","Cinzel",serif;font-weight:700;font-size:clamp(30px,4.6vw,54px);color:var(--gold-hell);line-height:1.1;margin-bottom:.4em}
.mitmachen-kopf p:not(.kapitel-marke){font-style:italic;color:var(--lavendel)}

/* Quiz */
.quiz-feld{max-width:820px;margin:0 auto;padding:clamp(22px,4vw,44px);border-radius:26px;text-align:center;
  background:radial-gradient(120% 100% at 50% 0%,rgba(120,100,200,.25),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(207,200,240,.2)}
.quiz-feld > p{margin-bottom:1.2em}
.quiz-nr{font-family:"Cinzel",serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.quiz-feld h3{font-family:"Cinzel",serif;font-size:clamp(22px,2.6vw,32px);color:var(--gold-hell);margin:.3em 0 1em}
.quiz-antworten{list-style:none;display:grid;gap:10px;text-align:left}
.quiz-antworten button{width:100%;padding:.8em 1.1em;border-radius:16px;border:1px solid rgba(251,230,166,.25);background:rgba(20,18,55,.5);color:var(--perle);
  font:500 1em "Cormorant Garamond",serif;text-align:left;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.quiz-antworten button:hover,.quiz-antworten button:focus-visible{background:rgba(232,180,74,.16);border-color:var(--gold);transform:translateX(4px)}
.quiz-ergebnis{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:28px;align-items:center;text-align:left;animation:aufrollen .8s ease-out}
.quiz-ergebnis img{width:100%;max-height:380px;object-fit:contain;filter:drop-shadow(0 0 40px color-mix(in srgb,var(--aura) 60%,transparent))}
.quiz-ergebnis h3{margin:.1em 0 .2em}
.quiz-ergebnis p{margin-bottom:.6em}
.quiz-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:1em}
@media (max-width:700px){.quiz-ergebnis{grid-template-columns:1fr;text-align:center}.quiz-ergebnis img{max-height:240px}.quiz-knoepfe{justify-content:center}}

/* Entdecker-Pass */
.pass-kopf{max-width:760px;margin:0 auto 4vh;text-align:center}
.pass-kopf h2{font-family:"Cinzel Decorative","Cinzel",serif;font-weight:700;font-size:clamp(30px,4.6vw,54px);color:var(--gold-hell);line-height:1.1;margin-bottom:.4em}
.pass-kopf p:not(.kapitel-marke){font-style:italic;color:var(--lavendel)}
.pass-start{max-width:720px;margin:0 auto 4vh;padding:20px 24px;border-radius:20px;background:rgba(232,180,74,.1);border:1px solid rgba(232,180,74,.35);text-align:center}
.pass-start p{margin-bottom:1em}
.pass-stand{max-width:820px;margin:0 auto;padding:clamp(20px,4vw,36px);border-radius:26px;background:linear-gradient(160deg,#f4ecdc,#ead9b8);color:var(--tinte);
  box-shadow:0 20px 50px rgba(8,6,30,.45)}
.pass-vorschau{opacity:.55;filter:saturate(.6)}
.pass-zahl{font-family:"Cinzel",serif;font-size:1.1em;text-align:center}
.pass-zahl b{font-size:1.6em;color:#a8701a}
.pass-balken{height:14px;border-radius:99px;background:rgba(42,36,64,.12);margin:.6em 0 1.4em;overflow:hidden}
.pass-balken i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#d99a2b,#fbe6a6);transition:width .8s ease}
.pass-arten{list-style:none;display:grid;gap:10px}
.pass-arten li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:12px;align-items:center;font-size:.95em}
.pass-arten b{font-family:"Cinzel",serif;font-size:.85em}
.pass-tropfen{display:flex;flex-wrap:wrap;gap:3px}
.pass-tropfen i{width:12px;height:15px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:rgba(42,36,64,.13)}
.pass-tropfen i.voll{background:radial-gradient(circle at 35% 30%,#fff3c4,#e8b44a 55%,#b9781a);box-shadow:0 0 6px rgba(232,180,74,.6)}
.pass-urkunde{margin-top:1.4em}
@media (max-width:600px){.pass-arten li{grid-template-columns:1fr auto}.pass-tropfen{grid-column:1/-1}}

/* Ausmalbilder */
.ausmal-filter{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:4vh}
.ausmal-liste{list-style:none;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.ausmal a{display:flex;flex-direction:column;gap:.3em;height:100%;padding:12px;border-radius:18px;text-decoration:none;color:var(--perle);
  background:rgba(255,255,255,.05);border:1px solid rgba(251,230,166,.16);transition:transform .3s,border-color .3s}
.ausmal a:hover{transform:translateY(-4px);border-color:rgba(251,230,166,.5)}
.ausmal img,.ausmal-ohne{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;background:#fff}
.ausmal-ohne{display:grid;place-items:center;font-size:48px;color:#a8701a}
.ausmal-art{font-size:.8em;font-style:italic;color:var(--lavendel)}
.ausmal strong{font-family:"Cinzel",serif;font-size:15px;color:var(--gold-hell)}
.ausmal-los{margin-top:auto;font-size:.85em;color:var(--gold)}

/* Geburtstag */
.geburtstag{max-width:900px;margin:0 auto;padding:calc(12vh + 56px) 16px 10vh;color:#e9e4fb}
.geb-block{margin-bottom:7vh}
.geb-block h2{font-family:"Cinzel",serif;font-weight:700;font-size:clamp(22px,2.6vw,30px);color:var(--gold-hell);margin-bottom:.5em}
.geb-block > p{margin-bottom:.8em}
.geb-spiele{list-style:none;display:grid;gap:14px}
.geb-spiele li{padding:16px 20px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(251,230,166,.16)}
.geb-spiele strong{display:block;font-family:"Cinzel",serif;color:var(--gold-hell);margin-bottom:.2em}
.geb-eigenes h2,.geb-eigenes h3{font-family:"Cinzel",serif;color:var(--gold-hell);margin:.6em 0 .4em}
.geb-eigenes p,.geb-eigenes li{margin-bottom:.6em}

/* ---------- Druckbögen (Urkunde, Ausweis, Einladung) ---------- */
.druckbogen{display:none}
@media print{
  html.druckt body > *:not(.druckbogen){display:none!important}
  html.druckt,html.druckt body{background:#fff!important;color:#2a2440}
  html.druckt .druckbogen{display:block}
  @page{margin:12mm}
}
.druckbogen{font-family:"Cormorant Garamond",Georgia,serif;color:#2a2440}
.druckbogen h1{font-family:"Cinzel Decorative","Cinzel",serif;font-weight:700;color:#8a5a12;line-height:1.1}
.druck-linie,.urkunde-linie,.ausweis-linie{border-bottom:1.5px solid #8a5a12;height:1.6em;margin:.2em 0 .6em}
.urkunde{min-height:250mm;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6mm;padding:14mm;
  border:3mm double #c9952e;border-radius:6mm;font-size:16pt}
.urkunde-ober{font-family:"Cinzel",serif;letter-spacing:.3em;text-transform:uppercase;color:#c9952e}
.urkunde h1{font-size:30pt}
.urkunde-linie{width:70%}
.urkunde img{width:42mm}
.urkunde-unterschrift{font-family:"Cinzel",serif;font-size:14pt}
.urkunde-datum{font-style:italic;font-size:12pt}
.ausweis{width:120mm;padding:8mm;border:1.2mm solid var(--aura,#c9952e);border-radius:5mm;font-size:12pt}
.ausweis-ober{font-family:"Cinzel",serif;font-size:8pt;letter-spacing:.2em;text-transform:uppercase;color:#8a5a12}
.ausweis h1{font-size:20pt;margin:1mm 0 3mm}
.ausweis-innen{display:grid;grid-template-columns:38mm 1fr;gap:5mm;align-items:center}
.ausweis-innen img{width:38mm;height:44mm;object-fit:contain;background:#f4ecdc;border-radius:3mm}
.ausweis-nr{font-family:"Cinzel",serif;font-size:9pt;margin-top:2mm}
.ausweis-fuss{margin-top:3mm;font-size:9pt;font-style:italic}
.einladung{height:128mm;padding:8mm 10mm;border:1.5mm solid #c9952e;border-radius:5mm;margin-bottom:6mm;position:relative;font-size:13pt;break-inside:avoid}
.einladung img{position:absolute;right:8mm;top:6mm;width:28mm}
.einladung-ober{font-family:"Cinzel",serif;font-size:9pt;letter-spacing:.15em;text-transform:uppercase;color:#8a5a12}
.einladung h1{font-size:20pt;margin:1mm 0 3mm;max-width:75%}
.einladung p{margin:0}
.einladung .druck-linie{height:1.1em;margin:0 0 1.5mm}
.einladung-fuss{position:absolute;left:10mm;bottom:5mm;font-style:italic;font-size:10pt}

/* ---------- Fans, Eltern und Autor (Phase 3) ---------- */
.abstimmung-danke{margin-bottom:1em}
.abstimmung-stand{list-style:none;display:grid;gap:10px;text-align:left}
.abstimmung-stand li{position:relative;display:flex;justify-content:space-between;gap:12px;padding:.7em 1em;border-radius:14px;overflow:hidden;
  background:rgba(20,18,55,.5);border:1px solid rgba(251,230,166,.2);isolation:isolate}
.abstimmung-stand i{position:absolute;left:0;top:0;bottom:0;z-index:-1;background:rgba(232,180,74,.28);transition:width 1s ease}
.abstimmung-stand li.deins{border-color:var(--gold)}
.galerie,.ueber{max-width:1100px;margin:0 auto;padding:calc(12vh + 56px) 16px 10vh;color:#e9e4fb}
.galerie-liste{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;margin-bottom:6vh}
.galerie-bild{display:flex;flex-direction:column;gap:.4em;width:100%;padding:12px 12px 16px;border:0;border-radius:6px;cursor:zoom-in;text-align:left;
  background:#fbf7ee;color:var(--tinte);font:inherit;box-shadow:0 14px 34px rgba(8,6,30,.45);transform:rotate(var(--kipp,-1.2deg));transition:transform .35s}
.galerie-liste li:nth-child(even) .galerie-bild{--kipp:1.4deg}
.galerie-bild:hover,.galerie-bild:focus-visible{transform:rotate(0) scale(1.03)}
.galerie-bild img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.galerie-bild em{display:block;font-size:.85em;color:#6b5f80}
.galerie-leer{text-align:center;font-style:italic;color:var(--lavendel);margin-bottom:6vh}
.galerie-post,.ueber-block{max-width:760px;margin:0 auto 7vh;padding:clamp(20px,4vw,36px);border-radius:24px;background:rgba(255,255,255,.04);border:1px solid rgba(251,230,166,.18)}
.galerie-post h2,.ueber-block h2{font-family:"Cinzel",serif;font-weight:700;font-size:clamp(22px,2.6vw,30px);color:var(--gold-hell);margin-bottom:.6em}
.galerie-post ol{margin:0 0 1.2em 1.2em;display:grid;gap:.5em}
.galerie-hinweis{margin-top:1.2em;font-size:.85em;color:var(--lavendel)}
.galerie-hinweis a,.ueber a:not(.knopf){color:var(--gold-hell)}
.galerie-fenster{max-width:min(92vw,900px);padding:16px;border:0;border-radius:12px;background:#fbf7ee;color:var(--tinte);text-align:center}
.galerie-fenster::backdrop{background:rgba(10,8,35,.8)}
.galerie-fenster img{max-width:100%;max-height:72vh}
.galerie-fenster p{margin:.6em 0}
.ueber details{border-top:1px solid rgba(251,230,166,.18);padding:.8em 0}
.ueber summary{cursor:pointer;font-family:"Cinzel",serif;color:var(--perle)}
.ueber details p{margin-top:.5em;color:#e9e4fb}
.ueber-eigen{max-width:760px;margin:0 auto 7vh}
.ueber-eigen p{margin-bottom:.8em}
.ueber-eigen img{max-width:100%;height:auto;border-radius:12px}
.ueber-frag p{margin-bottom:1em}

/* ---------- Lebende Insel (Phase 4) ---------- */
.insel-zeit{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:0;transition:opacity 2s}
.zeit-morgen .insel-zeit{opacity:.55;background:linear-gradient(180deg,rgba(255,190,200,.8),rgba(255,230,180,.4) 60%,transparent)}
.zeit-abend .insel-zeit{opacity:.6;background:linear-gradient(180deg,rgba(255,140,90,.7),rgba(200,90,140,.5) 55%,rgba(60,40,120,.4))}
.zeit-nacht .insel-zeit{opacity:.75;mix-blend-mode:multiply;background:linear-gradient(180deg,rgba(40,50,140,.85),rgba(30,30,90,.7))}
.jahreszeit{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}

/* Memo */
.memo-feld{max-width:640px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.6vw,14px);perspective:900px}
.memo-karte{position:relative;aspect-ratio:3/4;border:0;padding:0;background:none;cursor:pointer;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.memo-karte.auf{transform:rotateY(180deg)}
.memo-rueck,.memo-vorn{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.memo-rueck{background:radial-gradient(circle at 50% 40%,rgba(251,230,166,.35),transparent 60%),
  repeating-conic-gradient(from 30deg,#e8b44a 0 60deg,#d99a2b 0 120deg);background-size:100%,28px 28px;box-shadow:inset 0 0 0 3px rgba(42,29,5,.35),0 8px 20px rgba(8,6,30,.4)}
.memo-vorn{transform:rotateY(180deg);background:radial-gradient(circle,#fbf3df,#ead9b8);display:grid;place-items:center;box-shadow:0 8px 20px rgba(8,6,30,.4)}
.memo-vorn img{width:86%;height:86%;object-fit:contain}
.memo-karte.paar .memo-vorn{box-shadow:0 0 0 3px var(--gold),0 0 24px rgba(232,180,74,.6)}
.memo-karte:focus-visible{outline:3px solid var(--gold-hell);outline-offset:3px;border-radius:14px}
.memo-stand{text-align:center;margin-top:1.2em;font-style:italic;color:var(--gold-hell);min-height:1.5em}
.memo-unten{text-align:center;margin-top:.6em}
.karte-schatz{margin-top:1em}
@media (prefers-reduced-motion:reduce){.memo-karte{transition:none}}
.bienenjahr > p{margin-bottom:.8em;color:var(--lavendel);font-style:italic}
.bienenjahr summary span{display:inline-block;min-width:6.5em;color:var(--gold)}
.bienenjahr summary em{margin-left:.4em;padding:.05em .55em;border-radius:99px;background:var(--gold);color:var(--tinte);font-size:.7em;font-style:normal;vertical-align:middle}
.bienenjahr details.jetzt{background:rgba(232,180,74,.08);border-radius:12px;padding-left:.6em;padding-right:.6em}

/* Ton-Knopf, Vorlesen, Goldregen */
.kopf-ton{position:relative;z-index:2;display:grid;place-items:center;width:38px;height:38px;margin-left:auto;margin-right:10px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(251,230,166,.35);background:rgba(28,27,74,.55);color:var(--gold-hell)}
.kopf-ton svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kopf-ton path:first-child{fill:currentColor}
.kopf-ton[aria-pressed="false"] .welle{opacity:.25}
.kopf-ton[aria-pressed="true"]{background:rgba(232,180,74,.2);border-color:var(--gold)}
@media (min-width:901px){.kopf-ton{order:3;margin:0 0 0 14px}.kopf-nav{margin-left:auto}}
.vorlesen{display:inline-flex;align-items:center;gap:.35em;float:right;margin:0 0 .4em .8em;padding:.3em .8em;border-radius:99px;cursor:pointer;
  border:1px solid rgba(251,230,166,.4);background:rgba(28,27,74,.4);color:var(--gold-hell);font:italic 500 .8em "Cormorant Garamond",serif}
.vorlesen.spricht{background:var(--gold);color:var(--tinte)}
.lex-inhalt .vorlesen{background:rgba(255,255,255,.5);color:#6b4a12;border-color:rgba(107,74,18,.3)}
.goldregen body{animation:goldregen 4s ease-out}
.goldregen body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;animation:goldstaub 4s ease-out forwards;
  background:radial-gradient(2px 2px at 10% 20%,#ffd27a,transparent),radial-gradient(3px 3px at 30% 60%,#fff3c4,transparent),radial-gradient(2px 2px at 50% 30%,#ffd27a,transparent),
  radial-gradient(3px 3px at 70% 70%,#fff3c4,transparent),radial-gradient(2px 2px at 90% 40%,#ffd27a,transparent),radial-gradient(3px 3px at 20% 85%,#ffd27a,transparent),
  radial-gradient(2px 2px at 60% 90%,#fff3c4,transparent),radial-gradient(3px 3px at 80% 15%,#ffd27a,transparent);background-size:240px 240px}
@keyframes goldstaub{from{transform:translateY(-30vh);opacity:1}to{transform:translateY(40vh);opacity:0}}
@keyframes goldregen{20%{filter:brightness(1.15) saturate(1.2)}}
@media (prefers-reduced-motion:reduce){.goldregen body::after{animation:none;opacity:0}}
.eltern-kasten{margin-top:1.4em;padding:.8em 1em;border-radius:14px;font-size:.88em;color:var(--lavendel);background:rgba(255,255,255,.04);border:1px dashed rgba(207,200,240,.35)}
.eltern-kasten span{font-family:"Cinzel",serif;font-size:.85em;letter-spacing:.06em;color:var(--perle);margin-right:.3em}
.eltern-kasten a{color:var(--gold-hell);text-underline-offset:3px}
.fuss-links{flex-wrap:wrap;gap:10px 24px;padding:0 8px}

/* ---------- Prüfrunde 1: Buzz zurückhaltender ---------- */
.buzz-blase.eng{opacity:0!important}
.buzz-schlaeft .buzz-buehne,.buzz-schlaeft .buzz-blase,.buzz-schlaeft .buzz-treffer,.buzz-schlaeft .buzz-riss,.buzz-schlaeft .buzz-schmiere{display:none!important}
.kopf-buzz{position:relative;z-index:2;display:grid;place-items:center;width:38px;height:38px;margin-right:8px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(251,230,166,.35);background:rgba(28,27,74,.55);color:var(--gold-hell);font-size:18px;line-height:1}
.kopf-buzz[aria-pressed="true"]{opacity:.55}
@media (min-width:901px){.kopf-buzz{order:3;margin:0 0 0 14px}}
@media (max-width:760px){.buzz-blase{max-width:min(210px,56vw);font-size:.82em}}
.kopf-buzz[hidden]{display:none}
.eltern .termine-knopf,.fehler .termine-knopf{color:var(--tinte)}
.eltern .termine-knopf-leise,.fehler .termine-knopf-leise{color:var(--gold-hell)}
.karte-schatz{color:var(--tinte)!important;border:2px solid #8a5a12!important;background:rgba(255,255,255,.55)!important;font-weight:700}
.erzaehl p{background:radial-gradient(closest-side,rgba(15,12,50,.55),rgba(15,12,50,0));padding:.6em 1em;border-radius:40px}
.hinweis{color:#3d3470;font-size:clamp(17px,.6vw + 14px,21px);font-weight:500}
.ueberspringen{position:absolute;right:clamp(16px,3vw,40px);bottom:max(26px,env(safe-area-inset-bottom));z-index:7;padding:.5em 1em;border-radius:999px;
  background:rgba(28,27,74,.72);color:var(--gold-hell);font-family:"Cinzel",serif;font-weight:700;font-size:14px;text-decoration:none;border:1px solid rgba(251,230,166,.45)}
.ueberspringen:hover,.ueberspringen:focus-visible{background:rgba(28,27,74,.92)}
.termin-eltern{margin-top:.6em;font-size:.82em;color:#6b5f80}
.pass-vorschau{opacity:1;filter:none;position:relative}
.pass-vorschau::before{content:"Vorschau – noch nichts gespeichert";position:absolute;top:-14px;left:50%;transform:translateX(-50%);padding:.2em .9em;border-radius:99px;
  background:var(--tinte);color:var(--gold-hell);font-size:.75em;white-space:nowrap}

/* Menü mit Unterpunkten */
.kopf-nav a{font-size:16px}
.nav-symbol{margin-right:.35em;font-size:.95em}
.kopf-nav li{position:relative}
.kopf-nav .unter{display:none}
@media (min-width:901px){
  .nav-symbol{display:none}
  .kopf-nav .unter{position:absolute;left:50%;top:100%;transform:translateX(-50%);min-width:200px;padding:10px;margin-top:6px;border-radius:14px;
    display:flex;flex-direction:column;gap:2px;background:rgba(28,27,74,.97);box-shadow:0 14px 34px rgba(8,6,30,.5),inset 0 0 0 1px rgba(251,230,166,.2);
    opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
  .kopf-nav .unter::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
  .kopf-nav .mit-unter:hover .unter,.kopf-nav .mit-unter:focus-within .unter{opacity:1;visibility:visible;transition:opacity .2s}
  .kopf-nav .unter a{display:block;padding:.45em .7em;border:0;border-radius:8px;font-size:14px;white-space:nowrap}
  .kopf-nav .unter a:hover,.kopf-nav .unter a:focus-visible{background:rgba(251,230,166,.12)}
}
@media (max-width:900px){
  .kopf-nav{overflow-y:auto;align-items:flex-start;padding:84px 0 40px}
  .kopf-nav > ul{gap:1.6vh}
  .kopf-nav .unter{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin-top:4px}
  .kopf-nav .unter a{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:17px;color:var(--lavendel);border:0;letter-spacing:0}
  .kopf-nav > ul > li > a{font-size:clamp(22px,6.4vw,30px)}
}
@media (max-width:900px){.kopf-nav .unter{flex-direction:row}}
.ausgang{max-width:min(92vw,440px);padding:24px;border:0;border-radius:20px;background:var(--pergament);color:var(--tinte);text-align:center}
.ausgang::backdrop{background:rgba(10,8,35,.7)}
.ausgang-titel{font-family:"Cinzel",serif;font-weight:700;font-size:1.2em;margin-bottom:.4em}
.ausgang-knoepfe{display:flex;justify-content:center;gap:10px;margin-top:1em}
.ausgang .knopf-leise{color:var(--tinte);border-color:rgba(42,36,64,.35)}
.spiel-vorschau{width:min(42%,240px);height:auto;filter:drop-shadow(0 0 30px rgba(255,120,170,.45));animation:schweben 5s ease-in-out infinite}
@media (max-width:820px){.spiel-vorschau{width:min(46%,180px)}}
.memo-stufen{justify-content:center;margin:0 auto 18px}
.memo-feld[data-stufe="mittel"]{grid-template-columns:repeat(6,1fr);max-width:820px}
.memo-feld[data-stufe="profi"]{grid-template-columns:repeat(6,1fr);max-width:880px}
@media (max-width:620px){.memo-feld[data-stufe="mittel"],.memo-feld[data-stufe="profi"]{grid-template-columns:repeat(4,1fr)}}
.quiz-bild{display:inline-block;width:1.6em;margin-right:.4em;font-size:1.25em;text-align:center;vertical-align:-.1em}
.quiz-antworten button.richtig{background:rgba(80,180,110,.35);border-color:#5fc27e}
.quiz-antworten button.falsch{background:rgba(217,87,127,.3);border-color:var(--rose)}
.quiz-antworten button:disabled{cursor:default;transform:none}
.lex-leiste{position:static}
.lex-hinweis{max-width:640px;margin:0 auto 1.4em;text-align:center;color:var(--lavendel)}
.lex-gesammelt{display:block;margin-top:.3em;font-family:"Cinzel",serif;font-size:.8em;color:var(--gold-hell)}
button.lex-initiale{border:0;cursor:pointer;transition:transform .2s,box-shadow .3s}
button.lex-initiale:hover{transform:scale(1.06)}
button.lex-initiale.gesammelt{box-shadow:0 0 0 3px var(--gold),0 0 24px rgba(232,180,74,.6)}
.lex-raten{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:1em 0}
.lex-raten input{font:inherit;padding:.5em 1em;border-radius:999px;border:1px solid rgba(251,230,166,.5);background:rgba(20,18,55,.6);color:var(--perle);min-width:min(300px,80vw);text-align:center}
.lex-raten-antwort{font-style:italic;color:var(--gold-hell);min-height:1.4em}
.lex-loesung{display:none}
.lex-finale.geloest .lex-loesung{display:block;animation:aufrollen .9s ease-out}
.lex-finale.geloest .lex-raten,.lex-finale.geloest .lex-raten-antwort{display:none}
.lex-suche{flex:1 1 260px}.lex-suche input{width:100%}
.galerie-leer{max-width:900px;margin:0 auto 6vh;text-align:center;color:var(--lavendel)}.galerie-leer p{margin-bottom:1.2em}

/* Lesbarkeit: Fließtext in klarer, gerader Schrift; die Märchenschrift bleibt für Zitate und kleine Zierzeilen */
body{font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;font-size:clamp(17px,.45vw + 14.5px,20px);line-height:1.6}
.titel-ober,.titel-unter,.erzaehl p,blockquote,.figur-rolle,.lex-buzz,.lex-finale-ober,.lex-finale-text,.hinweis,.band-unter,.termine-buzz-spruch,.urkunde,.ausweis,.einladung{font-family:"Cormorant Garamond",Georgia,serif}
[class$="-intro"],.lex-text,.band-text p,.figur-text p,.einzel-text>p,.tor-text>span:last-child,.extra span,.mitmachen-kopf p,.pass-kopf p,.ausmal-art,.galerie-hinweis,.brotkrumen,.eltern-kasten,.einzel-hinweis,.code-antwort,.memo-stand,.quiz-feld p{font-style:normal}
.quiz-antworten button,.code-form input,.lex-raten input,.lex-suche input,.eltern-vergessen,.vorlesen,.kopf-nav .unter a{font-family:inherit}
.lex-text{color:#2a2440}
.leseprobe{max-width:760px;margin:0 auto;padding:calc(10vh + 56px) 16px 10vh;color:#e9e4fb}
.leseprobe-text{padding:clamp(22px,4vw,44px);border-radius:20px;background:var(--pergament);color:var(--tinte);font-size:1.08em;line-height:1.75;box-shadow:0 18px 40px rgba(8,6,30,.45)}
.leseprobe-text p+p{margin-top:.9em}
.leseprobe-ende{font-style:italic;color:#6b5f80}
.leseprobe-weiter{text-align:center;margin-top:6vh}
.leseprobe .vorlesen{background:rgba(42,36,64,.08);color:#6b4a12;border-color:rgba(107,74,18,.3)}
.presse{max-width:960px;margin:0 auto;padding:calc(10vh + 56px) 16px 10vh;color:#e9e4fb}
.presse-block{margin:0 auto 6vh;padding:clamp(20px,4vw,36px);border-radius:24px;background:rgba(255,255,255,.04);border:1px solid rgba(251,230,166,.18)}
.presse-block h2,.veranstalter h2{font-family:"Cinzel",serif;font-weight:700;font-size:clamp(22px,2.6vw,30px);color:var(--gold-hell);margin-bottom:.6em}
.presse-gesicht,.ueber-gesicht{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:24px;align-items:center}
.presse-gesicht img,.ueber-gesicht img{width:100%;height:auto;filter:drop-shadow(0 0 30px rgba(232,180,74,.35))}
.ueber-gesicht{max-width:760px;margin:0 auto 7vh}
.presse-fakten,.veranstalter-eckdaten{list-style:none;display:grid;gap:.5em}
.presse a,.veranstalter a{color:var(--gold-hell);text-underline-offset:3px}
.presse-bilder-liste{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;margin-top:1em}
.presse-bilder-liste a{display:flex;flex-direction:column;gap:.3em;text-decoration:none;color:var(--perle);font-size:.85em}
.presse-bilder-liste img{width:100%;aspect-ratio:3/4;object-fit:contain;background:rgba(255,255,255,.05);border-radius:10px}
.veranstalter{margin:6vh 0;padding:clamp(20px,4vw,36px);border-radius:24px;background:rgba(255,255,255,.06);border:1px solid rgba(251,230,166,.2);color:#e9e4fb}
.veranstalter-formate{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:1em 0 1.4em}
.veranstalter-formate li{padding:16px;border-radius:16px;background:rgba(232,180,74,.08);border:1px solid rgba(232,180,74,.25)}
.veranstalter-formate strong{display:block;font-family:"Cinzel",serif;color:var(--gold-hell)}
.veranstalter-formate span{display:block;font-size:.85em;color:var(--lavendel);margin-bottom:.4em}
@media (max-width:620px){.presse-gesicht,.ueber-gesicht{grid-template-columns:1fr;text-align:center}.presse-gesicht img,.ueber-gesicht img{max-width:180px;margin:0 auto}}

/* Nektarions Honigkammer: drehbare 3D-Gläser */
.honigkammer{max-width:1100px;margin:0 auto;padding:clamp(96px,12vw,140px) 16px 80px}
.glaeser{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(24px,4vw,48px);margin-top:2.4em}
.glas-karte{text-align:center}
.glas-karte h2{font-family:"Cinzel",serif;font-weight:700;font-size:clamp(24px,2.6vw,36px);color:var(--gold-hell);margin:.6em 0 .1em}
.glas-art{color:var(--gold);font-size:.9em;letter-spacing:.06em;margin-bottom:.7em}
.glas-karte > p:not(.glas-art){max-width:34em;margin:0 auto 1em}
.glas-buehne{position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 40%,rgba(232,180,74,.22),transparent 65%),radial-gradient(ellipse at 50% 100%,rgba(140,110,220,.35),transparent 60%)}
.glas-buehne canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:pan-y;opacity:0;transition:opacity .6s}
.glas-buehne.bereit canvas{opacity:1}
.glas-buehne canvas:active{cursor:grabbing}
.glas-buehne canvas:focus-visible{outline:3px solid var(--gold);outline-offset:-3px;border-radius:24px}
.glas-ersatz{display:none}
.glas-buehne.ohne-3d .glas-ersatz{display:block;position:absolute;inset:auto 0 30%;width:100%}
.bald{position:absolute;top:14px;left:14px;padding:.35em .8em;border-radius:99px;background:var(--gold);color:var(--tinte);
  font-family:"Cinzel",serif;font-weight:700;font-size:.8em;letter-spacing:.08em;transform:rotate(-4deg);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.glas-lupe{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:.45em;align-items:center;
  padding:.55em 1.1em;white-space:nowrap;border-radius:99px;border:1px solid rgba(251,230,166,.5);background:rgba(28,27,74,.75);color:var(--gold-hell);font:inherit;font-size:.92em;cursor:pointer;backdrop-filter:blur(6px)}
.glas-lupe:hover,.glas-lupe[aria-pressed="true"]{background:rgba(232,180,74,.25)}
.glas-buehne::after{content:"↔ Zieh mich";position:absolute;top:16px;right:16px;font-size:.82em;color:var(--gold-hell);opacity:.85;transition:opacity .4s;pointer-events:none}
.glas-buehne.angefasst::after,.glas-buehne.ohne-3d::after{opacity:0}
.glas-flach{margin-top:.2em;border:1px solid rgba(251,230,166,.55);background:transparent;color:var(--gold-hell);font:inherit;cursor:pointer}
.honig-eltern{max-width:40em;margin:3em auto 0;padding:1em 1.3em;border-radius:16px;background:rgba(255,255,255,.06);text-align:center}
.etikett-dialog{max-width:min(96vw,1100px);padding:0;border:0;border-radius:12px;background:transparent;overflow:visible}
.etikett-dialog::backdrop{background:rgba(10,8,30,.85)}
.etikett-dialog img{display:block;width:100%;height:auto;border-radius:12px}
.etikett-zu{position:absolute;top:-44px;right:0;width:38px;height:38px;border-radius:50%;border:0;background:var(--gold);color:var(--tinte);font-size:18px;cursor:pointer}
@media (max-width:600px){.etikett-dialog{max-width:none;width:96vw}.etikett-dialog img{width:100%}}

/* Autor: kleines rundes Foto statt Milo-Figur */
.presse-gesicht img.autor-foto,.ueber-gesicht img.autor-foto{width:180px;height:180px;max-width:none;object-fit:cover;border-radius:50%;border:3px solid var(--gold);filter:none;box-shadow:0 0 0 6px rgba(232,180,74,.18),0 12px 30px rgba(0,0,0,.35);justify-self:center}
.autor-name{font-family:"Cinzel",serif;font-weight:700;font-size:1.4em;color:var(--gold-hell);margin-bottom:.1em}
.autor-name span{display:block;font-size:.62em;color:var(--gold);letter-spacing:.06em}
.autor-ort{color:var(--gold);font-size:.92em;margin-bottom:.8em}
.ueber-gesicht.autor{max-width:820px}
@media (max-width:620px){.presse-gesicht img.autor-foto,.ueber-gesicht img.autor-foto{width:150px;height:150px}}

/* Kaufkasten für Eltern: Ausgaben mit Preis, zwei klare Knöpfe */
.kauf-kasten{display:block;padding:1.1em 1.3em;border-radius:16px;border:1px solid rgba(232,180,74,.45);background:rgba(255,255,255,.06);margin-top:1.4em;text-align:left}
.kauf-titel{font-weight:600;color:var(--gold-hell);margin-bottom:.6em}
.kauf-ausgaben{list-style:none;padding:0;margin:0 0 .9em;display:grid;gap:.25em;max-width:24em}
.kauf-ausgaben li{display:flex;justify-content:space-between;gap:1em;border-bottom:1px dotted rgba(251,230,166,.3);padding:.2em 0}
.kauf-ausgaben strong{color:var(--gold-hell);font-size:1.1em}
.kauf-knoepfe{display:flex;flex-wrap:wrap;gap:.6em;margin-bottom:.7em}
.kauf-knoepfe .knopf::after,.eltern-kasten a[target="_blank"]:not(.knopf)::after{content:" ↗";font-size:.85em}
.kauf-klein{font-size:.85em;opacity:.85}
.kauf-knoepfe .knopf-leise{cursor:pointer;color:var(--gold-hell);border-color:rgba(251,230,166,.5)}
.ausgang-rechnen{display:block;margin:.8em 0 .2em;font-weight:600}.ausgang-rechnen input{width:4.5em;margin-left:.4em;padding:.35em .5em;border-radius:8px;border:1px solid #b9a978;font:inherit;text-align:center}

/* Material für Lehrkräfte */
.lehrer-material{list-style:none;padding:0;margin:1.2em 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.lehrer-material a{display:flex;flex-direction:column;gap:.3em;text-decoration:none;color:inherit;padding:10px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(251,230,166,.2)}
.lehrer-material a:hover{border-color:var(--gold)}
.lehrer-material img{width:100%;height:auto;border-radius:8px;background:#fff;aspect-ratio:210/297;object-fit:cover}
.lehrer-material span{font-size:.85em;color:var(--gold)}
.ueber-gesicht.autor p + p,.eltern-block p + p{margin-top:.7em}
.kauf-knoepfe .knopf-gold{color:#2a1d05;text-decoration:none}.kauf-knoepfe .knopf{text-decoration:none}
.ausgang,.etikett-dialog{margin:auto}
.ausgang-haken{display:flex;gap:.5em;align-items:center;justify-content:center;margin:.9em 0 .2em;font-weight:600;cursor:pointer}.ausgang-haken input{width:1.3em;height:1.3em;accent-color:#c8962e}.ausgang .knopf[disabled]{opacity:.45;cursor:not-allowed}
.leseprobe-stern{text-align:center;color:var(--gold);letter-spacing:.6em;margin:1.4em 0}
.glas-buehne.ohne-3d .glas-ersatz{inset:auto;left:4%;top:50%;width:92%;transform:translateY(-50%);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.glas-buehne.ohne-3d canvas,.glas-buehne.ohne-3d .glas-lupe{display:none}