/* =========================================================================
   Familien der Götter · Einstellungen (Zahnrad oben rechts)
   Knopf wie die übrigen runden Spielsteine der Kopfleiste, Feld wie Suche
   und „Sagen & Welt“: Karton mit harter Kante, darin zwei Spielstein-Leisten.
   ========================================================================= */
.einst-knopf{width:40px;padding:0;justify-content:center;flex:none;margin-left:auto}
.leiste__rechts:not([hidden]) ~ .einst-knopf{margin-left:0}
.einst-knopf svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;transition:transform .5s var(--feder)}
.einst-knopf:hover svg,.einst-knopf.ist-offen svg{transform:rotate(60deg)}
.einst-knopf.ist-offen{transform:translateY(2px);box-shadow:0 2px 0 var(--kante,#0A0820)}

.einst-panel{position:fixed;right:16px;top:calc(var(--leiste) + 10px);z-index:60;width:min(340px,calc(100vw - 32px));
  display:grid;gap:18px;padding:0 0 20px;color:var(--papier);
  background:var(--punkte),var(--tinte);border:3px solid var(--kante,#0A0820);border-radius:24px;
  box-shadow:0 10px 0 var(--kante,#0A0820),0 30px 60px rgba(0,0,0,.45);animation:einstRein .3s var(--feder) both;transform-origin:top right}
.einst-panel[hidden]{display:none}
@keyframes einstRein{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.einst-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 14px 20px;
  background:var(--deckel);border-bottom:3px solid var(--kante,#0A0820);border-radius:21px 21px 0 0}
.einst-kopf b{font:600 19px/1.1 var(--f-display);color:var(--papier)}
.einst-zu{width:34px;height:34px;display:grid;place-items:center;flex:none;border-radius:50%;cursor:pointer;font:600 20px/1 var(--f-display);
  color:var(--stein-text);background:var(--creme);border:2.5px solid var(--kante,#0A0820);box-shadow:0 3px 0 var(--kante,#0A0820);transition:var(--drueck)}
.einst-zu:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--kante,#0A0820)}
.einst-zu:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}
.einst-gruppe{display:grid;gap:10px;padding:0 20px}
.einst-titel{display:flex;align-items:center;gap:8px;font:600 15px/1.2 var(--f-display);color:var(--papier-2)}
.einst-titel svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.einst-wahl{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:999px;background:var(--tinte-2);border:2.5px solid var(--kante,#0A0820)}
.einst-k{display:flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 12px;border:0;border-radius:999px;cursor:pointer;
  font:600 15px/1 var(--f-display);color:var(--papier);background:transparent;transition:background-color .2s,color .2s,box-shadow .2s}
.einst-k svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.einst-k:hover{background:var(--tinte-3)}
.einst-k[aria-checked="true"]{background:var(--akzent);color:var(--akzent-text,#121028);box-shadow:inset 0 0 0 2px var(--kante,#0A0820);cursor:default}
.einst-k:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}
@media (max-width:860px){
  .einst-knopf{width:38px;height:38px}
  .einst-panel{right:12px;top:calc(var(--leiste) + 8px)}
}
@media (prefers-reduced-motion:reduce){ .einst-panel{animation:none} .einst-knopf svg,.einst-k,.einst-zu{transition:none} }

/* Platz für das Zahnrad: die Kopfleiste wird früher kompakt (ohne die Dateien von Navi/Sagen zu ändern) */
@media (max-width:1439px){ .quer-knopf .lang{display:none} .quer-knopf{width:40px;padding:0!important;justify-content:center} .quer-knopf__ring{width:28px;height:28px} }
@media (max-width:1100px){
  .sage-pille{width:40px;padding:0;justify-content:center}
  .sage-pille__text,.sage-pille__pfeil{display:none!important}
  .sage-pille__ikon{background:none}
  .sage-pille__ikon svg{width:20px;height:20px}
}
@media (max-width:860px){ .sage-pille{width:38px} }
@media (max-width:400px){ .leiste{gap:6px;padding-left:10px;padding-right:10px} .leiste__rechts{gap:6px} }
@media (max-width:380px){ .leiste{gap:4px;padding-left:8px;padding-right:8px} .leiste__rechts{gap:4px} .fam-switch__knopf{padding-right:8px!important} }
@media (max-width:340px){ .leiste .pille--ikon,.leiste .sage-pille,.leiste .quer-knopf,.einst-knopf,#k-rechner.pille--ikon,#zur-auswahl{width:34px!important;height:34px!important;min-width:0} .fam-switch__auf{display:none} .fam-switch__name{font-size:14px!important} }
@media (max-width:340px){ .leiste{gap:3px;padding-left:6px;padding-right:6px} .leiste__rechts{gap:3px} }
@media (max-width:340px){ .fam-switch__knopf{padding:0 8px 0 3px!important;gap:5px!important} .fam-switch__marke{width:26px!important;height:26px!important} }

/* ---------- Erweiterte Einstellungen (19.10.): Schriftgröße, Bewegung, Tempo, Darstellung „System“ ---------- */
.einst-panel{width:min(360px,calc(100vw - 32px));max-height:calc(100dvh - var(--leiste) - 24px);grid-template-rows:auto minmax(0,1fr);gap:0;padding:0}
.einst-inhalt{display:grid;gap:16px;padding:16px 0 18px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.einst-wahl--3{grid-template-columns:repeat(3,1fr)}
.einst-wahl--3 .einst-k{padding:0 6px;gap:5px;font-size:14px}
.einst-k--a1 span{font-size:13px}.einst-k--a2 span{font-size:15.5px}.einst-k--a3 span{font-size:18px}
.einst-hinweis{margin:-6px 20px 0;font-size:12.5px;line-height:1.4;color:var(--papier-2)}
@media (max-width:380px){ .einst-wahl--3 .einst-k svg{display:none} }

/* Schriftgröße: Lesetexte vergrößern (Steckbrief, „Wie verwandt?“, Erzählleiste, Themen, Suche) */
html[data-schrift="gross"]{--sf:1.15} html[data-schrift="sehr"]{--sf:1.32}
html[data-schrift] :is(#t-gott>:not(.stage),#t-weg>:not(.paar),.sage-leiste__titel,.sage-leiste__absatz,.quer-inhalt__text,.quer-wissen-teil,.quer-figuren,.such-treffer){zoom:var(--sf)}