/* Seitenstile holunderbande.de */

/* ---------- Kleinteile ---------- */
.zentriert{justify-content:center}
.gross{font-size:1.6rem}
.hand.gross{font-size:2rem}
.platzhalter{background:#ffe9a8;color:#5a3d00;padding:0 .3em;border-radius:4px;font-weight:700}
.link-knopf{background:none;border:0;padding:0;font:inherit;color:var(--holunder);text-decoration:underline;cursor:pointer}
.aufklapp{margin:.6rem 0;padding:.4rem .8rem;border:2px dashed var(--tinte2);border-radius:10px}
.aufklapp summary{cursor:pointer;font-weight:700}
.datei-knopf{cursor:pointer}
.orden-toast{position:fixed;left:50%;top:5rem;z-index:80;display:flex;gap:.8rem;align-items:center;padding:.8rem 1.2rem .8rem .8rem;background:#fffaf0 url(../../img/papier.webp);color:#2b2118;border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.28);transform:translate(-50%,-30px) rotate(-2deg);opacity:0;transition:transform .45s cubic-bezier(.2,1.4,.4,1),opacity .3s}
.orden-toast.zeigen{opacity:1;transform:translate(-50%,0) rotate(-1deg)}
.orden-toast svg{width:64px;height:76px}
.orden-svg{width:100%;height:auto;display:block}
.lesetext{max-width:780px}
.lesetext h2{margin-top:1.8rem}
.lesetext li{margin:.35rem 0}
.einleitung{font-size:1.25rem}

/* ---------- Intro ---------- */
.intro{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:1rem;background:#f6eedd url(../../img/papier.webp);overflow:hidden}
body.intro-laeuft{overflow:hidden}
.intro-tusche{position:absolute;inset:0;width:100%;height:100%}
.intro .fleck{opacity:0;transform-origin:center;transform-box:fill-box}
.intro .f1{fill:#b7cf8e}.intro .f2{fill:#c9b3e0}.intro .f3{fill:#f0d78c}
html[data-zeit="nacht"] .intro .f1{fill:#4a5f95}html[data-zeit="nacht"] .intro .f2{fill:#2f3d6e}
html[data-zeit="herbst"] .intro .f1{fill:#e2a65f}html[data-zeit="herbst"] .intro .f2{fill:#c97a3c}
html[data-zeit="winter"] .intro .f1{fill:#bcd3e8}html[data-zeit="winter"] .intro .f2{fill:#dfe9f2}
.intro-logo{position:relative;width:min(640px,86vw);height:auto;opacity:0;filter:drop-shadow(0 6px 10px rgba(60,30,10,.25))}
.intro-unter{position:relative;opacity:0;font-size:1.7rem;text-align:center;color:#2b2118}
.intro-weiter{opacity:0}
.intro-skip{position:absolute;right:1rem;top:1rem;background:rgba(255,250,235,.8);border:2px solid #5a4a3a;border-radius:999px;padding:.4rem 1rem;font:700 1rem var(--titel);color:#2b2118;cursor:pointer}
.intro.statisch .intro-logo,.intro.statisch .intro-unter,.intro.statisch .intro-weiter,.intro.statisch .fleck{opacity:1}

/* ---------- Start ---------- */
.start{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2.4rem;align-items:center;padding-top:2.4rem}
.start-bild .szene img{width:100%;border-radius:46% 54% 44% 56%/52% 44% 56% 48%;box-shadow:0 18px 40px var(--schatten);transform:rotate(-1.5deg)}
.start-text .stempel{margin-bottom:.4rem}
@media (max-width:800px){.start{grid-template-columns:1fr;gap:1rem}.start-bild{max-width:420px;margin:0 auto}}
.tueren .tuer{display:block;text-decoration:none;color:#2b2118}
.tuer-bild{display:block;width:120px;height:120px;margin:0 auto .4rem}
.tuer-bild img{width:100%;height:100%;object-fit:contain}
.tuer h3{text-align:center}
.holunder-mini{background:radial-gradient(circle at 50% 40%,#9cb873 0 18px,transparent 19px),linear-gradient(#6b4a2b,#6b4a2b) 50% 70%/6px 50px no-repeat}
.regal-mini{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:flex-end;padding:1rem 1rem 0;border-bottom:16px solid #8a5a30;border-image:url(../../img/holz.webp) 30 stretch;margin-bottom:1rem}
.buch-mini img{width:clamp(110px,18vw,170px);height:auto;border-radius:3px 8px 8px 3px;box-shadow:-4px 0 0 rgba(0,0,0,.15) inset,0 10px 18px var(--schatten);transition:transform .25s}
.buch-mini:hover img{transform:translateY(-10px) rotate(-2deg)}

/* ---------- Karte ---------- */
.karte-kopf{padding-top:1.4rem}
.karte-buehne{position:relative;width:min(100%,1500px);margin:1rem auto;aspect-ratio:16/10;overflow:hidden;border-radius:26px;box-shadow:0 20px 50px var(--schatten);touch-action:pan-x pan-y;isolation:isolate}
.ebene{position:absolute;inset:-3%;will-change:transform}
.ebene.himmel{background:radial-gradient(ellipse at 50% 20%,#fff8e4,#e9dcc0)}
html[data-zeit="nacht"] .ebene.himmel{background:radial-gradient(ellipse at 50% 10%,#33467a,#141c38)}
html[data-zeit="herbst"] .ebene.himmel{background:radial-gradient(ellipse at 50% 20%,#f7e3c6,#d8b98e)}
html[data-zeit="winter"] .ebene.himmel{background:radial-gradient(ellipse at 50% 20%,#f4f7fb,#c9d6e4)}
.ebene.land svg{width:100%;height:100%;display:block}
.ebene.orte{inset:0}
.ebene.rahmen{inset:-2%;width:104%;height:104%;pointer-events:none}
.ebene.teilchen{inset:0;width:100%;height:100%;pointer-events:none}
.farbwechsel{position:absolute;inset:-20%;opacity:0;pointer-events:none;z-index:5;filter:url(#aquarell)}

/* Karte: Farben je Jahreszeit */
.karte-buehne{--land:#efe2c4;--wiese:#c9d79a;--wiese2:#d9e2a8;--wald1:#6f8f4a;--wald2:#4e6b38;--wasser:#7fb0cf;--dach:#b5573a;--dach2:#8e4a35;--dach3:#5f6e46;--wand:#f2e6cf;--weg:#a98a5c;--stein:#c47a5a;--licht:0;--schnee:0;--nebel:.15;--bluete:1}
html[data-zeit="nacht"] .karte-buehne{--land:#3a4a72;--wiese:#3b5a5e;--wiese2:#3f5f66;--wald1:#22364a;--wald2:#1a2a3c;--wasser:#4f79a8;--dach:#5d3d52;--dach2:#4f3448;--dach3:#33424a;--wand:#8c94b3;--weg:#7d7aa0;--stein:#7a5a6a;--licht:1;--nebel:.1;--bluete:.7}
html[data-zeit="herbst"] .karte-buehne{--land:#ead2ab;--wiese:#d7b46d;--wiese2:#caa25e;--wald1:#c46a2a;--wald2:#8e4a22;--wasser:#8aa9b8;--dach:#9e4a30;--dach2:#7d3c2a;--dach3:#6b5a3a;--wand:#efdcc0;--weg:#9a7448;--stein:#b06848;--licht:.5;--nebel:.85;--bluete:0}
html[data-zeit="winter"] .karte-buehne{--land:#eef3f8;--wiese:#f7f9fc;--wiese2:#e8eef5;--wald1:#5f7a7a;--wald2:#3e5656;--wasser:#a9c6dd;--dach:#f7f9fc;--dach2:#eef3f8;--dach3:#f2f6fa;--wand:#e6dccb;--weg:#b9b0a4;--stein:#a07a6a;--licht:1;--schnee:1;--nebel:.25;--bluete:0}
.karte-buehne .land rect.land,.karte-buehne svg .land{fill:var(--land)}
.karte-buehne .wiese{fill:var(--wiese)}.karte-buehne .wiese2{fill:var(--wiese2)}
.karte-buehne .laub circle{fill:var(--wald1);stroke:#2b2118;stroke-width:1.6;stroke-opacity:.55}
.karte-buehne .laub circle:nth-child(2n){fill:var(--wald2)}
.karte-buehne .eiche circle{fill:var(--wald2);stroke:#2b2118;stroke-width:2;stroke-opacity:.6}
.karte-buehne .tanne path:first-child{fill:var(--wald2);stroke:#2b2118;stroke-width:1.4;stroke-opacity:.6}
html[data-zeit="herbst"] .karte-buehne .tanne path:first-child{fill:#3f5a3a}
html[data-zeit="winter"] .karte-buehne .laub circle{fill:#dbe4ea}
.karte-buehne .stamm{stroke:#5a3a1c;stroke-width:3}
.karte-buehne .bach{fill:none;stroke:var(--wasser);stroke-width:16;stroke-linecap:round}
.karte-buehne .bach-licht{fill:none;stroke:#fff;stroke-opacity:.5;stroke-width:3;stroke-dasharray:6 18}
.karte-buehne .weg path{fill:none;stroke:var(--weg);stroke-width:5;stroke-dasharray:2 12;stroke-linecap:round}
.karte-buehne .bahn path{fill:none;stroke:#5a4a3a;stroke-width:3}
.karte-buehne .bahn .schwellen{stroke-width:12;stroke-dasharray:2 10}
.karte-buehne .bahn .bruecke{stroke:#2b2118;stroke-width:4}
.karte-buehne .wand{fill:var(--wand);stroke:#2b2118;stroke-width:1.6}
.karte-buehne .dach{fill:var(--dach);stroke:#2b2118;stroke-width:1.6}
.karte-buehne .dach2{fill:var(--dach2);stroke:#2b2118;stroke-width:1.6}
.karte-buehne .dach3{fill:var(--dach3);stroke:#2b2118;stroke-width:1.6}
.karte-buehne .fenster{fill:#2b2118;opacity:.7}
html[data-zeit="nacht"] .karte-buehne .fenster,html[data-zeit="winter"] .karte-buehne .fenster{fill:#ffd36b;opacity:1}
.karte-buehne .markise{fill:#a3322a;stroke:#2b2118;stroke-width:1}
.karte-buehne .uhr{fill:#fffaf0;stroke:#2b2118}
.karte-buehne .friedhof path{stroke:#5a4a3a;stroke-width:2;fill:none}
.karte-buehne .brunnen{fill:var(--stein);stroke:#2b2118;stroke-width:2}.karte-buehne .brunnen-w{fill:var(--wasser)}
.karte-buehne .holunderbusch circle{fill:#7c9a52;stroke:#2b2118;stroke-width:2;stroke-opacity:.6}
html[data-zeit="herbst"] .karte-buehne .holunderbusch circle{fill:#8c6a3a}
html[data-zeit="winter"] .karte-buehne .holunderbusch circle{fill:#cfd8de}
.karte-buehne .bluete circle{fill:#fffdf2;opacity:var(--bluete)}
.karte-buehne .steckling{stroke:#55743a;stroke-width:3;fill:none;stroke-linecap:round}
.karte-buehne .stein{fill:var(--stein);stroke:#2b2118;stroke-width:1.6}
.karte-buehne .rad{fill:none;stroke:#5a3a1c;stroke-width:4}.karte-buehne .speiche{stroke:#5a3a1c;stroke-width:2}
.karte-buehne .huegel{fill:var(--wiese2);stroke:#2b2118;stroke-opacity:.4}
.karte-buehne .steinbruch{fill:#b8644a;opacity:.8}
.karte-buehne .steg{stroke:#5a3a1c;stroke-width:3}
.karte-buehne .nebel-wehr ellipse{fill:#f6f3ee;opacity:.85}
.karte-buehne .nebelband ellipse{fill:#f4f1ec;opacity:var(--nebel)}
.karte-buehne .kuh ellipse,.karte-buehne .kuh circle{fill:#fffaf0;stroke:#2b2118;stroke-width:1.4}
.karte-buehne .rose path{fill:#7c9a52;stroke:#2b2118;stroke-width:1.5}.karte-buehne .rose circle{fill:#2b2118}.karte-buehne .rose .nord{fill:#a3322a}
.karte-buehne .lichter{opacity:var(--licht)}
.karte-buehne .schneedecke path{fill:none;stroke:#fff;stroke-width:6;opacity:var(--schnee)}
@media (prefers-reduced-motion:no-preference){html:not(.ruhig) .karte-buehne .rad{transform-box:fill-box;transform-origin:center;animation:dreh 12s linear infinite}}
@keyframes dreh{to{transform:rotate(360deg)}}

/* Orte als Medaillons */
.ort{position:absolute;width:clamp(76px,10.5%,150px);transform:translate(-50%,-50%);text-decoration:none;color:#2b2118;display:flex;flex-direction:column;align-items:center;z-index:2}
.ort-bild{display:block;width:100%;aspect-ratio:1;border-radius:50%;filter:drop-shadow(0 6px 8px rgba(30,20,10,.35));transition:transform .25s}
.ort-bild img{width:100%;height:100%;object-fit:cover}
.ort-schild{margin-top:-.6rem;padding:.15rem .6rem;font:700 clamp(.66rem,1.15vw,1rem)/1.1 var(--titel);color:#fff6e4;text-align:center;white-space:nowrap;background:url(../../img/holz.webp) center/300px;border-radius:6px 9px 6px 9px;box-shadow:0 3px 0 rgba(60,35,15,.45);text-shadow:0 1px 0 rgba(0,0,0,.6)}
.ort-tipp{position:absolute;top:100%;margin-top:.3rem;width:12rem;padding:.4rem .6rem;font:400 1.1rem/1.15 var(--hand);background:#fffaf0;border-radius:10px;box-shadow:0 6px 14px var(--schatten);opacity:0;pointer-events:none;transition:opacity .2s;text-align:center}
.ort:hover .ort-bild,.ort:focus-visible .ort-bild{transform:scale(1.1) rotate(-3deg)}
.ort:hover .ort-tipp,.ort:focus-visible .ort-tipp{opacity:1}
.nebelort .ort-bild{filter:blur(2px) grayscale(.4) drop-shadow(0 6px 8px rgba(30,20,10,.25));opacity:.8}
.zweig .zw{fill:none;stroke:#4a3420;stroke-width:9;stroke-linecap:round}
.zweig .lb{fill:#6f8f4a;stroke:#2b2118;stroke-width:2}
.zweig .dolde circle{fill:#fffdf2;stroke:#c9c0a8;stroke-width:2;stroke-dasharray:3 3}
.zweig .schnee{fill:#fff;opacity:0}
html[data-zeit="nacht"] .zweig .lb{fill:#2b3f4e}html[data-zeit="nacht"] .zweig .dolde circle{fill:#cfd6e8;opacity:.6}
html[data-zeit="herbst"] .zweig .lb{fill:#c46a2a}html[data-zeit="herbst"] .zweig .lb:nth-of-type(2n){fill:#d9a03a}html[data-zeit="herbst"] .zweig .dolde circle{fill:#3b2a5a;stroke:#2b2118;stroke-dasharray:none}
html[data-zeit="winter"] .zweig .lb{fill:#40584f}html[data-zeit="winter"] .zweig .dolde{display:none}html[data-zeit="winter"] .zweig .schnee{opacity:1}
/* ---------- Karte: gemalte Ebenen (gpt-image-2, Buchstil) ---------- */
.karte-buehne.gemalt{background:#e9dcc0;--ring:clamp(34px,4.2vw,62px)}
html[data-zeit="nacht"] .karte-buehne.gemalt{background:#1c2744}
.gemalt .ebene.land,.gemalt .ebene.orte{inset:-3%}
.gemalt .ebene.orte{z-index:3}.gemalt .ebene.rahmen{z-index:2}.gemalt .ebene.teilchen{z-index:4}
.gemalt .ebene.land picture,.gemalt .ebene.rahmen picture{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.gemalt .ebene.land picture.da,.gemalt .ebene.rahmen picture.da{opacity:1}
.gemalt .ebene.land img,.gemalt .ebene.rahmen img{width:100%;height:100%;display:block;object-fit:fill;user-select:none;-webkit-user-drag:none}
.gemalt .ebene.rahmen{inset:-11% -9%;width:auto;height:auto}
.gemalt .ebene.rahmen img{filter:drop-shadow(0 10px 14px rgba(30,20,10,.35))}
.gemalt .ebene.nebel{inset:-6%;pointer-events:none;opacity:0;transition:opacity .8s;background:
  radial-gradient(ellipse 30% 9% at 78% 26%,rgba(248,244,236,.9),transparent 70%),radial-gradient(ellipse 26% 7% at 30% 86%,rgba(248,244,236,.85),transparent 70%),
  radial-gradient(ellipse 40% 8% at 55% 60%,rgba(248,244,236,.55),transparent 70%)}
html[data-zeit="herbst"] .gemalt .ebene.nebel{opacity:.75}
.gemalt .ort{width:auto;transform:translate(-50%,calc(var(--ring) / -2));gap:.35rem}
.gemalt .ort::before{content:"";display:block;width:var(--ring);height:var(--ring);border-radius:50%;border:3px solid rgba(255,248,228,.95);
  box-shadow:0 0 0 2px rgba(43,33,24,.6),0 0 22px 4px rgba(255,232,160,.55),inset 0 0 16px rgba(255,236,170,.35);transition:transform .25s}
@media (prefers-reduced-motion:no-preference){html:not(.ruhig) .gemalt .ort::before{animation:ortpuls 2.8s ease-in-out infinite}}
@keyframes ortpuls{50%{box-shadow:0 0 0 2px rgba(43,33,24,.6),0 0 30px 9px rgba(255,232,160,.75),inset 0 0 16px rgba(255,236,170,.45)}}
.gemalt .ort:nth-child(2n)::before{animation-delay:-1.4s}
.gemalt .ort-bild{position:absolute;bottom:calc(100% - var(--ring) + 8px);width:clamp(96px,9vw,150px);opacity:0;transform:translateY(10px) scale(.7);transition:opacity .25s,transform .25s;pointer-events:none}
.gemalt .ort:hover .ort-bild,.gemalt .ort:focus-visible .ort-bild{opacity:1;transform:translateY(0) scale(1) rotate(-3deg)}
.gemalt .ort:hover::before,.gemalt .ort:focus-visible::before{transform:scale(1.12)}
.gemalt .ort-schild{margin-top:0;padding:.45rem 1.25rem .5rem;border-radius:0;background:url(../../img/holzschild-480.webp) center/100% 100% no-repeat;box-shadow:none;
  filter:drop-shadow(0 4px 3px rgba(40,22,8,.45));text-shadow:0 1px 0 rgba(0,0,0,.7),0 0 8px rgba(40,20,5,.6)}
.gemalt .ort-tipp{top:calc(100% + .1rem);z-index:3}
.gemalt .nebelort::before{border-style:dashed;border-color:rgba(240,240,240,.85);box-shadow:0 0 0 2px rgba(80,80,90,.35),0 0 26px 10px rgba(245,245,245,.6)}
.gemalt .nebelort .ort-schild{filter:grayscale(.5) drop-shadow(0 4px 3px rgba(40,22,8,.35));opacity:.85}
.gemalt .ort:focus-visible{outline:none}.gemalt .ort:focus-visible .ort-schild{outline:3px solid #fff6e4;outline-offset:3px}
@media (max-width:760px){.karte-buehne.gemalt{--ring:38px}.gemalt .ebene.rahmen{inset:-14% -12%}.gemalt .ort-schild{padding:.35rem .9rem .4rem}}
.ortsliste{columns:2 280px;padding-left:1.2rem}
.karte-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:760px){.karte-buehne{width:820px;max-width:none;border-radius:16px}.ort-schild{font-size:.8rem}}

/* ---------- Steckbriefe ---------- */
.regler{max-width:560px;margin-top:1rem}
.regler input[type=range]{width:100%;accent-color:var(--holunder);height:2rem}
.regler-skala{display:flex;justify-content:space-between;font:400 1.05rem var(--hand)}
.steckbriefe{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.steckbrief{position:relative;background:#fffaf0 url(../../img/papier.webp);color:#2b2118;padding:1.2rem 1.2rem 1rem;border-radius:4px;box-shadow:0 12px 26px var(--schatten);transform:rotate(-.7deg)}
.steckbrief:nth-child(2n){transform:rotate(.8deg)}
.steckbrief::before{content:"";position:absolute;top:-10px;left:50%;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e86a5c,#a3322a 60%,#5d1913);box-shadow:0 3px 3px rgba(0,0,0,.3)}
.sb-bild{width:150px;margin:.2rem auto .3rem}
.sb-rolle{margin:-.2rem 0 .4rem;color:var(--holunder);font-size:1.4rem}
.steckbrief h3{margin-bottom:0;text-align:center}.steckbrief .sb-rolle{text-align:center}
.steckbrief dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem .6rem;font-size:1rem}
.steckbrief dt{font-weight:700}.steckbrief dd{margin:0}
.steckbrief blockquote{margin:.6rem 0;padding-left:.8rem;border-left:4px solid var(--akzent);font-size:1.4rem}
.sb-extra{list-style:none;padding:0;font-size:1rem}
.sb-extra li{margin:.4rem 0}
.klein-stempel{font-size:.72rem;padding:.05rem .4rem;border-width:2px;transform:rotate(-3deg);margin-right:.3rem}
.im-nebel{filter:blur(.3px)}
.steckbrief.im-nebel{background:linear-gradient(rgba(240,238,234,.9),rgba(225,223,220,.95)),url(../../img/papier.webp);color:#6b6560;text-align:center}
.nebel-bild{width:120px;height:120px;margin:.4rem auto;border-radius:50%;background:radial-gradient(circle,#d9d6d0,#b9b4ac);filter:blur(6px)}

/* ---------- Bücherregal ---------- */
.regal{display:flex;flex-direction:column;gap:3rem}
.buch{display:grid;grid-template-columns:minmax(180px,300px) 1fr;gap:2rem;align-items:center;padding:1.6rem;border-radius:18px;background:rgba(255,250,235,.55)}
.buch:nth-child(2n){grid-template-columns:1fr minmax(180px,300px)}.buch:nth-child(2n) .buch-cover{order:2}
.buch[data-zeit="nacht"]{background:linear-gradient(135deg,rgba(38,54,94,.18),rgba(255,250,235,.5))}
.buch[data-zeit="herbst"]{background:linear-gradient(135deg,rgba(200,116,58,.18),rgba(255,250,235,.5))}
.buch[data-zeit="winter"]{background:linear-gradient(135deg,rgba(190,214,236,.4),rgba(255,250,235,.5))}
.buch-cover{perspective:1200px}
.buch-cover img{width:100%;border-radius:3px 10px 10px 3px;box-shadow:inset 6px 0 0 rgba(0,0,0,.2),0 18px 30px rgba(30,20,10,.35);transform:rotateY(-14deg);transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.buch.zu .buch-cover img{transform:rotateY(-40deg) scale(.92)}
.buch.offen .buch-cover img{transform:rotateY(-10deg)}
.buch-cover:hover img{transform:rotateY(0) scale(1.02)}
.buch-mehr{font-size:1rem}
.nebel-cover{aspect-ratio:600/934;border-radius:3px 10px 10px 3px;background:radial-gradient(ellipse at 50% 60%,#e9ecef,#b7c0c8);display:grid;place-items:center;font-size:2.6rem;color:#5a6670;filter:blur(.4px);box-shadow:0 18px 30px rgba(30,20,10,.25)}
.buch.im-nebel{opacity:.9}
@media (max-width:700px){.buch,.buch:nth-child(2n){grid-template-columns:1fr}.buch:nth-child(2n) .buch-cover{order:0}.buch-cover{max-width:260px;margin:0 auto}}

/* ---------- Geheimfach ---------- */
.scheiben-platz{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2rem;align-items:center}
@media (max-width:820px){.scheiben-platz{grid-template-columns:1fr}}
.scheibe-rahmen{text-align:center}
.scheibe{width:min(100%,460px);height:auto;filter:drop-shadow(0 16px 20px rgba(40,20,5,.35));touch-action:none;user-select:none}
.ring-innen{cursor:grab;transform-origin:0 0}
.ring-innen:active{cursor:grabbing}
.ring-innen:focus-visible{outline:none}
.ring-innen:focus-visible circle:first-child{stroke:#5c346e;stroke-width:6}
.bu-aussen{font:700 26px var(--titel);fill:#2b2118}
.bu-innen{font:700 22px var(--titel);fill:#5c346e}
.bu-trenn{stroke:#5a3a1c;stroke-width:1;opacity:.5}
.scheibe-stand{font-size:1.6rem;min-height:2.2em}
.eingabe-fach{max-width:640px;margin:0 auto}
.eingabe-fach input{font-size:1.4rem;text-transform:uppercase;letter-spacing:.06em}
.fach{margin:2.4rem 0;padding:1.4rem;border-radius:20px;background:url(../../img/holz.webp) center/600px;box-shadow:inset 0 0 0 10px rgba(60,30,10,.35),0 20px 40px var(--schatten)}
.fach-tuer h2{color:#fff6e4;text-shadow:0 2px 2px rgba(0,0,0,.5);margin:.2rem .4rem 1rem}
.fach-inhalt{display:grid;gap:1.6rem}
.fach-element{display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:1.2rem;align-items:start}
.fach-element:not(:has(.fach-bild)){grid-template-columns:1fr}
.fach-bild img{width:100%;border-radius:12px;box-shadow:0 8px 18px rgba(0,0,0,.35);transform:rotate(-1.5deg)}
@media (max-width:720px){.fach-element{grid-template-columns:1fr}}
.fach .blatt{color:#2b2118}
.blatt.brief{font-family:var(--hand);font-size:1.4rem}
.fach .stempel{font-size:.85rem}
.ausblick{margin-top:1rem;display:grid;gap:.4rem;max-width:420px;font-family:var(--text);font-size:1.1rem;line-height:1.5}
.siegel-umschlag{text-align:center;background:#f3e6c9 url(../../img/papier.webp)}
.siegel-umschlag .siegel{width:6rem;height:6rem;margin:0 auto .6rem;font-size:.8rem;line-height:1.05}
.siegel-form{max-width:420px;margin:0 auto;text-align:left}
.stufe2 .blatt{box-shadow:0 0 0 4px #c99a3b,0 14px 30px var(--schatten)}
.druck-scheibe{display:none}
@media print{
  body:has(.druck-scheibe.aktiv) main>*:not(.druck-scheibe){display:none!important}
  .druck-scheibe.aktiv{display:block!important}
  .druck-scheibe svg{display:block;margin:6mm auto;page-break-inside:avoid}
  .dr-gross{font:700 8px sans-serif}.dr-klein{font:700 7px sans-serif}
}

/* ---------- Quiz ---------- */
.band-wahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}
.band-knopf{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.6rem;border:3px solid transparent;border-radius:14px;background:rgba(255,250,235,.6);font:700 1rem/1.2 var(--titel);color:#2b2118;cursor:pointer}
.band-knopf img{width:110px;border-radius:3px 8px 8px 3px;box-shadow:0 6px 12px var(--schatten)}
.band-knopf[aria-checked="true"]{border-color:var(--holunder);background:#fffaf0}
.stufen-wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.4rem;margin-top:1rem}
.stufe-knopf{display:flex;flex-direction:column;gap:.5rem;align-items:center;border:0;font:1rem var(--text);color:#2b2118;cursor:pointer;text-align:center}
.stufe-knopf.geschafft::after{content:"✓ geschafft";font:700 1.2rem var(--hand);color:var(--gruen)}
.quiz-blatt{max-width:760px;margin:0 auto}
.quiz-optionen{display:grid;gap:.7rem;margin:1rem 0 1.4rem}
.quiz-option{display:flex;gap:.7rem;align-items:center;padding:.7rem 1rem;border:2px dashed var(--tinte2);border-radius:12px;font-weight:400;cursor:pointer;background:rgba(255,252,244,.8);color:#2b2118}
.quiz-option:has(input:checked){border-style:solid;border-color:var(--holunder);background:color-mix(in srgb,var(--holunder) 12%,#fffaf0)}
.quiz-option input{width:1.3rem;height:1.3rem;accent-color:var(--holunder)}
.quiz-ergebnis{max-width:820px;margin:0 auto;text-align:center;color:#2b2118}
.quiz-ergebnis .auswertung{text-align:left;font-size:1rem}
.auswertung li{margin:.6rem 0}.auswertung .ok{color:#2f5a1f}.auswertung .nein{color:#7a2a20}

/* ---------- Urkunde ---------- */
.urkunde{display:flex;justify-content:center;padding:1rem}
.urkunde-papier{position:relative;width:min(100%,780px);aspect-ratio:1/1.414;padding:6% 8%;text-align:center;color:#2b2118;background:#fffaf0 url(../../img/papier.webp);border:14px double #c99a3b;box-shadow:0 20px 40px var(--schatten)}
.urkunde-logo{width:58%;height:auto}
.urkunde-titel{font:700 3.2rem var(--titel);margin:.2rem 0;color:#5c346e;letter-spacing:.08em}
.urkunde-name{font-size:3.2rem;margin:.4rem 0;border-bottom:2px solid #2b2118;display:inline-block;min-width:60%}
.urkunde-stufe{font:700 1.8rem var(--titel);color:#a3322a;margin:.2rem}
.urkunde-unterschriften{display:flex;justify-content:space-around;align-items:center;margin-top:2rem;font-size:1.8rem}
.urkunde-stempel{position:absolute;right:8%;bottom:8%}
@media print{@page{size:A4;margin:0}.urkunde{padding:0}.urkunde-papier{width:210mm;height:297mm;box-shadow:none;border-width:10px}}

/* ---------- Quartier, Orden ---------- */
.quartier-kopf{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:2rem;align-items:center;padding-top:2rem}
.quartier-bild img{width:100%;border-radius:40% 60% 50% 50%/50% 45% 55% 50%;box-shadow:0 14px 30px var(--schatten)}
@media (max-width:700px){.quartier-kopf{grid-template-columns:1fr}.quartier-bild{max-width:300px}}
.orden-wand{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:1.2rem;padding:1.2rem;border-radius:16px;background:linear-gradient(rgba(70,40,20,.15),rgba(70,40,20,.25)),url(../../img/holz.webp) center/500px}
.orden-wand.klein{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
.orden-wand .leise{grid-column:1/-1;color:#fff6e4;margin:0}
.orden{margin:0;text-align:center;color:#fff6e4;font-size:.9rem;line-height:1.2;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.orden svg{width:76px;height:auto;margin:0 auto;filter:drop-shadow(0 4px 4px rgba(0,0,0,.35))}
.orden .leise{color:#f0e2c4}
.pass summary{cursor:pointer}

/* ---------- Notizbuch ---------- */
.notizbuch{display:grid;grid-template-columns:240px 1fr;gap:1.6rem;align-items:start}
@media (max-width:820px){.notizbuch{grid-template-columns:1fr}}
.nb-seiten ol{padding-left:0;list-style:none;margin:.4rem 0 1rem}
.nb-seitenknopf{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px dashed var(--tinte2);padding:.4rem .2rem;font:400 1.25rem var(--hand);color:#2b2118;cursor:pointer}
.nb-seitenknopf[aria-current="page"]{background:color-mix(in srgb,var(--akzent) 18%,transparent)}
.nb-blatt{color:#2b2118}
.nb-titel{font:700 1.9rem var(--hand);border:0;border-bottom:2px solid var(--tinte2);border-radius:0;background:transparent;padding:.2rem 0}
.nb-text{font:400 1.45rem/34px var(--hand);border:0;background:transparent;resize:vertical;padding:0;min-height:12rem}
.nb-werkzeug{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.4rem 0;font-family:var(--text);font-size:1rem}
.farbe{width:34px;height:34px;border-radius:50%;border:3px solid #fffaf0;box-shadow:0 0 0 2px #5a4a3a;cursor:pointer}
.farbe[aria-pressed="true"]{box-shadow:0 0 0 4px var(--holunder)}
.sticker{width:42px;height:50px;padding:0;border:0;background:none;cursor:pointer}
.sticker[aria-pressed="true"]{outline:3px dashed var(--holunder)}
.nb-leinwand{width:100%;height:auto;background:rgba(255,255,255,.35);border:2px dashed var(--tinte2);border-radius:10px;touch-action:none;cursor:crosshair}
.nb-verdacht{list-style:none;padding:0;font:400 1.4rem/1.3 var(--hand)}
.nb-verdacht li{display:flex;gap:.6rem;align-items:center;margin:.3rem 0}
.nb-verdacht li.raus label{text-decoration:line-through;opacity:.6}
.nb-verdacht label{font-weight:400;margin:0}
.nb-verdacht-neu{display:grid;grid-template-columns:1fr 2fr auto;gap:.5rem;font-family:var(--text);font-size:1rem;line-height:1.4}
@media (max-width:600px){.nb-verdacht-neu{grid-template-columns:1fr}}

/* ---------- Ausweis ---------- */
.ausweis-platz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:start}
@media (max-width:820px){.ausweis-platz{grid-template-columns:1fr}}
.ausweis{position:relative;width:min(100%,520px);aspect-ratio:85.6/54;padding:4% 5%;color:#2b2118;background:#f7ecd2 url(../../img/papier.webp);border-radius:18px;border:3px solid #5a3a1c;box-shadow:0 18px 36px var(--schatten);display:flex;flex-direction:column;transform:rotate(-1.5deg)}
.ausweis-kopf{display:flex;align-items:center;justify-content:space-between;border-bottom:2px dashed #5a3a1c;padding-bottom:.3rem}
.ausweis-kopf img{height:46px;width:auto}
.ausweis-kopf span{font:700 1.4rem var(--titel);color:#5c346e}
.ausweis-koerper{display:grid;grid-template-columns:34% 1fr;gap:4%;flex:1;align-items:center}
.wappen{width:100%;height:auto;background:rgba(255,255,255,.45);border-radius:8px;touch-action:none;cursor:crosshair}
.ausweis dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.1rem .5rem;font-size:.85rem}
.ausweis dt{font-weight:700}.ausweis dd{margin:0;font-size:1.3rem;line-height:1.1}
.ausweis-fuss{margin:.2rem 0 0;font-size:.75rem;text-align:center}
.ausweis-stempel{position:absolute;right:3%;bottom:3%;width:3.6rem;height:3.6rem;font-size:.55rem;opacity:.75}
@media print{.ausweis-platz{display:block}.ausweis{width:85.6mm;height:54mm;transform:none;box-shadow:none;margin:10mm;font-size:8pt}.ausweis-kopf img{height:9mm}.ausweis dd{font-size:11pt}.ausweis-stempel{width:14mm;height:14mm;font-size:5pt}.ausweis-kopf span{font-size:12pt}}

/* ---------- Holunder ---------- */
.holunder-buehne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:1.6rem;align-items:center}
@media (max-width:820px){.holunder-buehne{grid-template-columns:1fr}}
.holunder-svg{width:100%;max-width:560px;height:auto}
.h-boden{fill:#9cb873}.h-schnee{fill:#fff;opacity:0}
html.holunder-schlaeft .h-boden{fill:#eef3f8}html.holunder-schlaeft .h-schnee{opacity:1}
.h-bank rect{fill:#8a5a30;stroke:#2b2118;stroke-width:2}
.h-stamm{fill:none;stroke:#6b4a2b;stroke-width:12;stroke-linecap:round}
.h-ast{fill:none;stroke:#6b4a2b;stroke-width:7;stroke-linecap:round}
.h-blatt{fill:#7c9a52;stroke:#2b2118;stroke-width:1.5}
html[data-zeit="herbst"] .h-blatt{fill:#c46a2a}
html.holunder-schlaeft .h-blatt{fill:#e7eef3;stroke:#9aa6ae}
.h-wort{font:700 26px var(--hand);fill:#2b2118}
html[data-zeit="nacht"] .h-wort{fill:#f2ead8}
.h-knospe{cursor:pointer}
.h-knospe .knospe{fill:#9cc46b;stroke:#2b2118;stroke-width:2}
.h-knospe .glimmen{fill:#fff3a8;opacity:.6}
@media (prefers-reduced-motion:no-preference){html:not(.ruhig) .h-knospe .glimmen{animation:glimm 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}}
@keyframes glimm{50%{opacity:.15;transform:scale(1.5)}}
.h-knospe:focus-visible{outline:none}.h-knospe:focus-visible .glimmen{fill:#5c346e;opacity:.5}
.knospe-dialog{color:#2b2118}
.tipp-zweig{display:flex;gap:.6rem;margin-top:1rem}
.tipp-blatt{width:84px;height:44px;border:2px solid #2b2118;border-radius:0 80% 0 80%;background:#8fb36a;font:700 .9rem var(--titel);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.6);cursor:pointer}
.tipp-text{font-size:1.4rem;min-height:2em}
.werkzeuge{display:grid;gap:1.4rem}
.zaun-tafel{display:grid;grid-template-columns:repeat(9,1fr);gap:.4rem;margin-top:.8rem}
.zaun-feld{display:flex;flex-direction:column;align-items:center;font-size:1.3rem}
.zaun-feld svg{width:34px;height:34px}
.morse-tafel{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.3rem;font:1.1rem var(--text)}
.spurenbrett table{border-collapse:collapse;font:700 1.25rem var(--titel);margin:0 auto}
.spurenbrett th,.spurenbrett td{width:2.2rem;height:2.2rem;text-align:center;border:1px solid #c9b48e}
.spurenbrett th{color:var(--tinte2);font-size:.9rem;border:0}
.spurenbrett td.haus{background:#8a5a30;color:#fff}

/* ---------- Club ---------- */
.club{max-width:820px}
.club-schritt{margin:1.6rem 0;color:#2b2118}
.club-schritt fieldset{border:0;padding:0;margin:1rem 0}
.club-schritt legend{font-weight:700;margin-bottom:.5rem}
.wahl.gross label{font-size:1.25rem;padding:.7rem 1.2rem}
.club-gruss{font:700 clamp(1.8rem,4.5vw,2.8rem)/1.15 var(--hand);color:var(--holunder)}
.club-band-gruss{margin-top:1.6rem}
.uebergabe{margin-top:1.6rem;--dreh:.6deg}
.kind-wahl{display:flex;gap:.6rem;flex-wrap:wrap}
.profil-kopf{text-align:center}
.einstellungen h3{margin-top:1.4rem}
.einwilligung span{font-weight:400}

/* ---------- Fehlerseiten ---------- */
.fehlerseite{text-align:center;padding-top:3rem}
.fehler-ylvi img{width:min(280px,70vw)}
/* Hauptquartier auf der Karte hervorheben */
.ort-wichtig .ort-schild{font-size:1.12em;box-shadow:0 0 0 3px rgba(255,236,170,.85),0 4px 10px rgba(0,0,0,.35)}