/* =========================================================================
   Familien der Götter · Gestaltung „Spielschachtel – Nachtausgabe“
   Eigene Ebene über allen anderen Götter-Stylesheets (lädt als letzte).
   Idee: Brettspiel bei Nacht – nachtblaues Spielbrett mit Punktraster,
   Karten aus dunklem Karton mit harter schwarzer Kante, helle Spielsteine
   zum Drücken. Anzeigeschrift Fredoka, Lesetext Atkinson Hyperlegible.
   Illustrationen, Figurenanimationen und Akzentfarben bleiben unverändert.
   Zurücknehmen: diese Datei (und goetter-schachtel.js) aus der Vorlage
   werkzeug/seiten/lab/goetter.html entfernen.
   ========================================================================= */

/* Lesetext: Atkinson Hyperlegible (OFL, Braille Institute) – sehr gut lesbar für Kinder */
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('../fonts/atkinson-hyperlegible-latin-400.woff2?v=f1f8a821') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('../fonts/atkinson-hyperlegible-latin-700.woff2?v=13a58e05') format('woff2'); font-weight: 600 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('../fonts/atkinson-hyperlegible-latin-ext-400.woff2?v=fe905e20') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('../fonts/atkinson-hyperlegible-latin-ext-700.woff2?v=764b69c9') format('woff2'); font-weight: 600 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- Farben und Bausteine ---------- */
:root{
  --tinte:#17143B; --tinte-2:#27225A; --tinte-3:#332D6B; --tinte-4:#463E88;
  --papier:#F6EEDC; --papier-2:#B9B1DC;
  --kante:#0A0820;            /* harte Kartonkante und Schlagschatten */
  --deckel:#0C0A26;           /* Schachteldeckel, Kopfleisten */
  --creme:#F6EEDC;            /* Spielsteine zum Drücken */
  --stein-text:#17143B;
  --punkte:radial-gradient(rgba(255,255,255,.055) 1.1px,transparent 1.6px) 0 0/14px 14px;
  --f-text:"Atkinson Hyperlegible","Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --drueck:transform .28s var(--feder),box-shadow .28s var(--feder),background-color .2s,color .2s,border-color .2s;
}
body{font-family:var(--f-text)}

/* ---------- Spielsteine: alle Pillen und runden Knöpfe ---------- */
.pille,.sage-weltknopf,.ansicht-knopf,.karte__zu,.sage-menue__zu,.sage-leiste__zu,.such-zu,.ansicht-zu,.stage__nochmal,.welt-karte__los,.sage-k,.fam-switch__pfeil,.u-knopf,.rechner__tausch{
  border:2.5px solid var(--kante)!important;background:var(--creme);color:var(--stein-text);
  box-shadow:0 4px 0 var(--kante);font-family:var(--f-display);font-weight:600;transition:var(--drueck)}
.pille:hover,.sage-weltknopf:hover,.ansicht-knopf:hover,.karte__zu:hover,.sage-menue__zu:hover,.sage-leiste__zu:hover,.such-zu:hover,.ansicht-zu:hover,.stage__nochmal:hover,.sage-k:hover:not(:disabled),.fam-switch__pfeil:hover,.u-knopf:hover,.rechner__tausch:hover{
  background:#fff;color:var(--stein-text);transform:translateY(-2px);box-shadow:0 6px 0 var(--kante)}
.pille:active,.sage-weltknopf:active,.ansicht-knopf:active,.karte__zu:active,.sage-menue__zu:active,.sage-leiste__zu:active,.such-zu:active,.ansicht-zu:active,.stage__nochmal:active,.sage-k:active:not(:disabled),.fam-switch__pfeil:active,.u-knopf:active,.rechner__tausch:active{
  transform:translateY(3px);box-shadow:0 1px 0 var(--kante);transition-duration:.08s}
.pille[aria-pressed="true"],.pille--akzent,.pille--akzent:hover,.such-knopf.ist-offen,.ansicht-offen .ansicht-knopf,.sage-k--weiter,.sage-k--weiter:hover:not(:disabled),.u-knopf--voll,.u-knopf--voll:hover{
  background:var(--akzent);color:var(--akzent-text);filter:none}
.pille[aria-pressed="true"],.such-knopf.ist-offen,.ansicht-offen .ansicht-knopf{transform:translateY(2px);box-shadow:0 2px 0 var(--kante)}
.pille{height:42px}
.pille--rund{width:44px;font-size:19px}
.pille__punkt{border-width:2.5px}
.sage-k:disabled{opacity:1;background:var(--tinte-3);color:var(--papier-2);box-shadow:0 1px 0 var(--kante);transform:translateY(2px)}
.karte__zu,.sage-menue__zu,.sage-leiste__zu,.such-zu,.ansicht-zu{display:grid;place-items:center;line-height:1;box-shadow:0 3px 0 var(--kante)}
.karte__zu{width:38px;height:38px}
.wb-leiste .sage-k--weiter,.wb-leiste .sage-ende__knoepfe .sage-k--weiter{border-color:var(--kante)!important}
.ansicht-knopf svg{color:var(--stein-text)}
.ansicht-knopf__punkte i{box-shadow:0 0 0 1.5px var(--kante)}
.such-knopf svg{color:currentColor}
.fam-filter #k-filter,.bez-schalter{box-shadow:0 3px 0 var(--kante)}

/* „Sagen & Welt“: der farbige Hauptstein */
.sage-pille{border:2.5px solid var(--kante);box-shadow:0 4px 0 var(--kante);transition:var(--drueck)}
.sage-pille:hover,.sage-anker.offen .sage-pille{transform:translateY(-2px);box-shadow:0 6px 0 var(--kante)}
.sage-pille:active{transform:translateY(3px);box-shadow:0 1px 0 var(--kante);transition-duration:.08s}
.sage-pille.laeuft{box-shadow:0 4px 0 var(--kante),0 0 0 4px color-mix(in srgb,var(--akzent) 45%,transparent)}
.sage-pille__ikon{background:rgba(10,8,32,.14)}

/* ---------- Kopfleiste ---------- */
.leiste{background:rgba(12,10,38,.96);border-bottom:3px solid var(--kante);box-shadow:0 1px 0 rgba(255,255,255,.05) inset}
.leiste__titel b{font-weight:600}
.fam-switch__knopf{border:2.5px solid var(--kante)!important;box-shadow:0 4px 0 var(--kante);transition:var(--drueck)}
.fam-switch__knopf:hover,.fam-switch.offen .fam-switch__knopf{transform:translateY(-2px);box-shadow:0 6px 0 var(--kante)}
.fam-switch__marke{box-shadow:0 0 0 2.5px var(--creme),0 0 0 4.5px var(--kante)}
.fam-switch__name{font-weight:600}
.fam-switch__pfeil{width:36px;height:36px;box-shadow:0 3px 0 var(--kante)}
.fam-switch__pfeil[data-dir="-1"]:hover{transform:translate(-2px,-2px)}
.fam-switch__pfeil[data-dir="1"]:hover{transform:translate(2px,-2px)}

/* ---------- Aufklapp-Felder: Menü, Suche, Ansicht, Mythologie-Wahl ---------- */
.sage-menue,.such-panel,.ansicht-panel,.fam-panel{
  background:var(--punkte),var(--tinte);border:3px solid var(--kante);border-radius:24px;
  box-shadow:0 10px 0 var(--kante),0 30px 60px rgba(0,0,0,.45)}
.sw-kopf,.such-feld,.ansicht-kopf{position:relative}
.sw-kopf{background:var(--deckel);border-bottom:3px solid var(--kante)}
.sw-kopf b,.fam-panel__kopf b,.ansicht-kopf b{font-weight:600;color:var(--papier)}
.sw-teil__kopf{font-family:var(--f-display);font-weight:600;font-size:19px;letter-spacing:0;text-transform:none;color:var(--papier)}
.sw-teil__kopf svg{width:20px;height:20px;color:var(--akzent)}
.sw-zwei .sw-teil+.sw-teil{border-left:2px solid rgba(10,8,32,.8)}
.sw-eintrag{transition:background-color .2s,box-shadow .2s,transform .28s var(--feder)}
.sw-eintrag:hover,.sw-eintrag:focus-visible{background:var(--tinte-2);box-shadow:inset 0 0 0 2.5px var(--akzent);transform:translateX(3px)}
.sw-eintrag__text b{font-weight:600;font-size:17px}
.sw-eintrag__bild{border:2.5px solid var(--kante);border-radius:12px;box-shadow:0 3px 0 var(--kante)}
.sw-eintrag__ikon{color:var(--akzent)}
.sw-eintrag.ist-jetzt{box-shadow:inset 0 0 0 2.5px var(--akzent)}
.sw-laeuft{border:2px solid var(--kante)}
.such-feld{background:var(--tinte-2);border:2.5px solid var(--kante);box-shadow:0 3px 0 var(--kante)}
.such-feld:focus-within{border-color:var(--kante);box-shadow:0 3px 0 var(--kante),0 0 0 3px var(--akzent)}
.such-treffer{transition:background-color .2s,box-shadow .2s,transform .28s var(--feder)}
.such-treffer.ist-aktiv,.such-treffer:hover{background:var(--tinte-2);box-shadow:inset 0 0 0 2.5px var(--akzent)}
.such-chip{border:2px solid var(--kante);box-shadow:0 3px 0 var(--kante);transition:var(--drueck)}
.such-chip:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--kante)}
.ansicht-zeile{transition:background-color .2s,transform .28s var(--feder)}
.ansicht-zeile:hover{transform:translateX(3px)}
.ansicht-schalter{box-shadow:inset 0 0 0 2px var(--kante)}
.fam-kachel{border:3px solid var(--kante);box-shadow:0 5px 0 var(--kante)}
.fam-kachel__bild{border-bottom:3px solid var(--kante)}
.fam-kachel:hover,.fam-kachel:focus-visible{transform:translateY(-4px);border-color:var(--kante);box-shadow:0 9px 0 var(--kante)}
.fam-kachel.aktiv{border-color:var(--akzent);box-shadow:0 5px 0 var(--kante)}

/* ---------- Startseite: Schachteldeckel ---------- */
.auswahl{background:
  radial-gradient(60vw 50vh at 12% 20%,rgba(61,116,184,.14),transparent 70%),
  radial-gradient(60vw 60vh at 95% 30%,rgba(139,227,180,.08),transparent 70%),
  var(--punkte),var(--tinte)}
.auswahl__kopf{position:relative;background:var(--deckel);border:3px solid var(--kante);border-radius:28px;padding:clamp(22px,3.2vw,44px) clamp(22px,3.4vw,48px);
  box-shadow:0 10px 0 #000,inset 0 0 0 2px rgba(255,255,255,.05);overflow:hidden}
.auswahl__kopf::before{content:"";position:absolute;inset:0;background:var(--punkte);opacity:.7;pointer-events:none}
.auswahl__kopf>*{position:relative}
.auswahl__titel{font-weight:600;color:var(--creme);text-shadow:0 6px 0 #F5C04A;letter-spacing:-.005em}
.auswahl__titel em{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--creme);text-shadow:0 6px 0 #4FD1C5}
.auswahl__text{color:#DCD5F2}
.schachtel-marken{grid-column:2;display:flex;flex-wrap:wrap;gap:10px;margin-top:-6px}
.schachtel-marke{display:inline-flex;align-items:baseline;gap:7px;padding:7px 13px 8px;border-radius:13px;background:var(--creme);color:var(--stein-text);border:2.5px solid var(--kante);box-shadow:0 4px 0 #000;font-weight:700;font-size:14px;line-height:1;
  animation:schachtel-plopp .6s var(--feder) both;animation-delay:calc(.25s + var(--i,0) * .09s)}
.schachtel-marke b{font-family:var(--f-display);font-weight:600;font-size:21px;font-variant-numeric:tabular-nums}
@keyframes schachtel-plopp{from{opacity:0;transform:translateY(10px) scale(.7) rotate(-4deg)}to{opacity:1;transform:none}}

/* ---------- Startseite: Spielpläne (Hover-Animationen der Bilder bleiben) ---------- */
.welt-karte{border:3px solid var(--kante);border-radius:26px;box-shadow:0 8px 0 var(--kante)}
.welt-karte:hover,.welt-karte:focus-visible{transform:translateY(-8px);box-shadow:0 16px 0 var(--kante),0 34px 50px -20px rgba(0,0,0,.6)}
.welt-karte__bild{border-bottom:3px solid var(--kante)}
.welt-karte__eyebrow{font-weight:700;letter-spacing:.14em;opacity:.8}
.welt-karte__titel{font-weight:600}
.welt-karte__los{height:42px;margin-top:12px}
.welt-karte:hover .welt-karte__los{transform:translateY(-2px);box-shadow:0 6px 0 var(--kante)}
.schachtel-zahl{position:absolute;top:14px;right:14px;z-index:2;display:inline-flex;align-items:center;gap:3px;padding:4px 10px 4px 7px;border-radius:12px;background:var(--z-akzent,var(--akzent));color:var(--kante);border:2.5px solid var(--kante);box-shadow:0 4px 0 var(--kante);
  font-family:var(--f-display);font-weight:600;font-size:18px;line-height:1.1;font-variant-numeric:tabular-nums;pointer-events:none;transition:transform .5s var(--feder)}
.schachtel-zahl svg{width:17px;height:17px}
.welt-karte:hover .schachtel-zahl{transform:translateY(-3px) rotate(-5deg) scale(1.06)}

/* ---------- Steckbrief (Seitenleiste) ---------- */
.karte{background:var(--punkte),var(--tinte);border-left:3px solid var(--kante)}
.reiter{background:var(--deckel);border-bottom:3px solid var(--kante)}
.reiter__k{height:38px;border:2.5px solid transparent;font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--papier-2);transition:var(--drueck)}
.reiter__k:hover{color:var(--papier);transform:translateY(-1px)}
.reiter__k[aria-selected="true"]{background:var(--creme);color:var(--stein-text);border-color:var(--kante);box-shadow:0 3px 0 var(--kante)}
.karte__innen{gap:20px}
/* Die Figurenanimation bleibt groß im Mittelpunkt – nur mit Kartonkante */
.stage{border:3px solid var(--kante);border-radius:22px;box-shadow:0 7px 0 var(--kante)}
.stage__name{background:var(--deckel);color:var(--creme);border:2px solid var(--kante);font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.02em;text-transform:none;padding:6px 12px}
.stage__nochmal{height:34px;padding:0 13px;font-size:14px;box-shadow:0 3px 0 var(--kante)}
#t-gott>div:has(>.karte__name){display:flex;flex-direction:column}
.karte__name{order:1;font-weight:600;font-size:52px;margin:0 0 4px}
.karte__eyebrow{order:2;font-family:var(--f-display);font-weight:600;font-size:19px;letter-spacing:0;text-transform:none;color:var(--papier)}
.karte__namen{order:3;margin-top:6px}
.steck{grid-template-columns:auto 1fr;gap:6px 0;font-size:14.5px}
.steck dt,.steck dd{background:var(--tinte-3);padding:9px 12px}
.steck dt{border-radius:12px 0 0 12px;color:var(--papier-2);font-size:13px;display:flex;align-items:center}
.steck dd{border-radius:0 12px 12px 0;font-weight:700;padding-left:4px}
.karte__text{font-size:16px;line-height:1.6}
.wissen{position:relative;background:var(--akzent);color:var(--kante);border:3px solid var(--kante);border-radius:18px;box-shadow:0 5px 0 var(--kante);padding:14px 16px 15px 54px;font-size:15px;line-height:1.5}
.wissen::before{content:"";position:absolute;left:15px;top:14px;width:26px;height:26px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.3 17.5h5.4M10.3 20.5h3.4M12 3.5C8.5 3.5 6 6 6 9.3c0 2.3 1.3 3.7 2.6 5 .4.5.6 1 .6 1.7h5.6c0-.7.2-1.2.6-1.7 1.3-1.3 2.6-2.7 2.6-5 0-3.3-2.5-5.8-6-5.8z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.3 17.5h5.4M10.3 20.5h3.4M12 3.5C8.5 3.5 6 6 6 9.3c0 2.3 1.3 3.7 2.6 5 .4.5.6 1 .6 1.7h5.6c0-.7.2-1.2.6-1.7 1.3-1.3 2.6-2.7 2.6-5 0-3.3-2.5-5.8-6-5.8z'/%3E%3C/svg%3E") center/contain no-repeat}
.wissen b{font-family:var(--f-display);font-weight:600;font-size:18px;letter-spacing:0;text-transform:none;color:var(--kante);margin-bottom:3px}
.wissen:empty{display:none}
.familie h3{font-weight:600;font-size:21px}
.familie__gruppe{grid-template-columns:96px 1fr}
.chip{height:38px;padding:0 13px 0 4px;background:var(--tinte-2);border:2.5px solid var(--kante);box-shadow:0 3px 0 var(--kante);font-family:var(--f-display);font-weight:600;font-size:14.5px;color:var(--papier);transition:var(--drueck)}
.chip:hover{background:var(--tinte-3);transform:translateY(-2px);box-shadow:0 5px 0 var(--kante)}
.chip:active{transform:translateY(2px);box-shadow:0 1px 0 var(--kante);transition-duration:.08s}
.chip--text{padding:0 13px}
.chip svg{width:28px;height:28px;box-shadow:0 0 0 2px var(--creme)}
/* Rechner „Wie verwandt?“ */
.paar{border:3px solid var(--kante);box-shadow:0 6px 0 var(--kante)}
.paar__figur{font-weight:600}
.paar__figur svg{box-shadow:0 0 0 4px var(--creme),0 0 0 7px var(--kante)}
.rechner__satz{font-weight:600}
.rechner select{border:2.5px solid var(--kante);box-shadow:0 3px 0 var(--kante);font-family:var(--f-display);font-weight:600;font-size:15px}
.rechner__tausch{width:40px;height:40px;display:grid;place-items:center}
.rechner__label{font-family:var(--f-display);font-weight:600;font-size:16px;letter-spacing:0;text-transform:none;color:var(--papier)}

/* Beziehungen im Steckbrief: Karten mit Kante, Farbe nur im Etikett */
.bez-zeile{border:2.5px solid var(--kante);border-radius:16px;background:var(--tinte-2);box-shadow:0 4px 0 var(--kante);padding:12px 14px}
.bez-zeile.blinkt{box-shadow:0 4px 0 var(--kante),0 0 0 3px var(--bez)}
.bez-zeile__art{font-family:var(--f-display);font-weight:600;font-size:14px;letter-spacing:0;text-transform:none}
.bez-zeile p{font-size:15px}
.bez-karte h3{font-weight:600;font-size:21px}
.bez-karte__an{border:2.5px solid var(--kante);background:var(--creme);color:var(--stein-text);box-shadow:0 3px 0 var(--kante);font-family:var(--f-display);font-weight:600;transition:var(--drueck)}
.bez-karte__an:hover{background:#fff;transform:translateY(-2px);box-shadow:0 5px 0 var(--kante)}

/* ---------- Baum ---------- */
.hinweis{background:var(--deckel);border:2.5px solid var(--kante);box-shadow:0 3px 0 var(--kante);color:var(--papier);font-weight:700}

/* ---------- Erzählleiste (Sagen und „Die Welt entdecken“) ---------- */
.sage-leiste{background:var(--punkte),rgba(23,20,59,.98);border:3px solid var(--kante);box-shadow:0 10px 0 var(--kante),0 24px 60px rgba(0,0,0,.5)}
.sage-leiste__eyebrow{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0 .35em;align-self:flex-start;max-width:100%;padding:7px 12px;border-radius:11px;background:var(--deckel);border:2.5px solid var(--kante);
  font-family:var(--f-display);font-weight:600;font-size:14px;letter-spacing:.01em;text-transform:none;color:var(--papier)}
.sage-leiste__eyebrow::before{content:"";margin-right:.3em;width:12px;height:12px;border-radius:4px;flex:none;background:var(--akzent-wb,var(--akzent));box-shadow:0 0 0 2px var(--kante)}
.sage-leiste__titel{font-weight:600}
.sage-leiste__absatz h3{font-weight:600;font-size:clamp(24px,2.2vw,30px);line-height:1.12;margin:10px 0 8px;color:var(--papier)}
.sage-leiste__absatz p{color:var(--papier)}
.sage-leiste__lauf span{background:var(--akzent-wb,var(--akzent))}
/* Bildfelder statt Punkte: ein Feld je Bild wie auf dem Spielbrett */
.sage-punkte{counter-reset:feld;gap:6px}
.sage-punkte button{counter-increment:feld;width:32px;height:28px;border-radius:8px;border:2.5px solid var(--kante);background:var(--tinte-3);color:var(--papier);box-shadow:0 2px 0 var(--kante);
  display:grid;place-items:center;font:600 13px/1 var(--f-display);transition:transform .32s var(--feder),background-color .2s,color .2s,box-shadow .32s var(--feder)}
.sage-punkte button::before{content:counter(feld)}
.sage-punkte button:last-child{width:auto;padding:0 8px;background:transparent;box-shadow:0 2px 0 var(--kante);border-style:dashed}
.sage-punkte button:last-child::before{content:"Ende"}
.sage-punkte button:hover{transform:translateY(-2px);background:var(--tinte-4)}
.sage-punkte button.ist-aktiv{width:32px;background:var(--akzent-wb,var(--akzent));color:var(--kante);border-style:solid;transform:translateY(-3px);box-shadow:0 4px 0 var(--kante)}
.sage-punkte button:last-child.ist-aktiv{width:auto}
.sage-k{height:42px}
@media (min-width:861px){
  .sage-leiste{border-width:0 0 0 3px;border-radius:0;box-shadow:-14px 0 40px rgba(0,0,0,.45)}
  .sage-leiste__nav{border-top:2px solid rgba(10,8,32,.9)}
}

/* ---------- Kleine Bildschirme ---------- */
@media (max-width:860px){
  .karte{border-left:0;border-top:3px solid var(--kante);border-radius:24px 24px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.45)}
  .pille{height:40px}
  .auswahl__kopf{border-radius:22px}
  .schachtel-marken{grid-column:1;margin-top:0}
  .karte__name{font-size:44px}
  .sage-leiste__nav{flex-wrap:wrap;row-gap:10px}
  .sage-leiste__nav .sage-punkte{order:-1;flex:1 0 100%;justify-content:flex-start}
  .sage-punkte button{width:30px;height:26px}
  .sage-punkte button.ist-aktiv{width:30px}
}
@media (max-width:1000px){ .schachtel-marken{grid-column:1/-1} }
@media (max-width:620px){
  .schachtel-marke{font-size:13px;padding:6px 10px 7px}
  .schachtel-marke b{font-size:18px}
  .welt-karte{border-radius:22px}
}
@media (prefers-reduced-motion:reduce){
  .schachtel-marke{animation:none}
  .pille,.sage-pille,.sage-weltknopf,.ansicht-knopf,.chip,.sage-k,.stage__nochmal,.welt-karte__los,.reiter__k,.sw-eintrag,.such-treffer,.schachtel-zahl,.sage-punkte button,.fam-switch__knopf,.fam-kachel{transition:none!important}
  .pille:hover,.chip:hover,.sage-k:hover,.sage-pille:hover,.welt-karte:hover .schachtel-zahl,.sw-eintrag:hover{transform:none!important}
}

/* Mythologie-Wahl übernimmt das Kartenbild samt Spielmarke – dort kleiner */
.fam-kachel .schachtel-zahl{top:6px;right:6px;padding:2px 7px 2px 5px;border-width:2px;border-radius:9px;font-size:13px;box-shadow:0 2px 0 var(--kante)}
.fam-kachel .schachtel-zahl svg{width:12px;height:12px}
@media (max-width:620px){ .fam-kachel .schachtel-zahl{display:none} }

/* ---------- Seitenleiste ohne Reiter (18.10. c): „Wie verwandt?“ nur über den Knopf oben rechts ---------- */
.karte__kopf{position:sticky;top:0;z-index:6;height:0;display:flex;justify-content:flex-end;pointer-events:none}
.karte__kopf .karte__zu{pointer-events:auto;flex:none;margin:28px 30px 0 0}
.rechner__titel{margin:0;padding:9px 56px 0 0;min-height:44px;display:flex;align-items:center;font:600 26px/1.1 var(--f-display);color:var(--creme,#F6EEDC)}
@media (max-width:860px){ .karte__kopf .karte__zu{margin:22px 26px 0 0} .rechner__titel{font-size:23px} }