/* =========================================================================
   Familien der Götter · Quer durch die Mythologien (zu goetter-quer.js)
   Spielschachtel-Look: Karten aus dunklem Karton mit harter Kante,
   Mythologie-Schilder in der Akzentfarbe der jeweiligen Mythologie.
   ========================================================================= */

/* ---------- Knopf in der Kopfleiste ---------- */
/* Bewusst nicht in der Mythologie-Farbe: der Knopf gehört zu allen zwölf */
.quer-knopf{display:inline-flex;align-items:center;gap:8px;flex:none;padding-left:8px!important}
.quer-knopf__ring{width:26px;height:26px;flex:none;color:var(--stein-text,#17143B);transition:transform .6s var(--feder)}
.quer-knopf:hover .quer-knopf__ring{transform:rotate(30deg)}
.quer-knopf__zwei{display:grid;gap:2px;text-align:left}
.quer-knopf__zwei b{font:600 14px/1 var(--f-display)}
.quer-knopf__zwei small{font:600 11.5px/1 var(--f-display);opacity:.68}
.quer-knopf.ist-offen{background:#fff!important;transform:translateY(2px);box-shadow:0 2px 0 var(--kante,#0A0820),inset 0 0 0 2px var(--kante,#0A0820)}
.quer-knopf.ist-offen .quer-knopf__ring{transform:rotate(30deg)}
.quer-trenner{flex:none;align-self:center;width:2px;height:26px;margin:0 4px;border-radius:2px;background:var(--tinte-4,#463E88)}
@media (max-width:1359px){ .quer-knopf__zwei small{font-size:0} .quer-knopf__zwei small::after{content:"alle 12";font-size:11.5px} }
@media (max-width:560px){ .quer-trenner{display:none} }
/* Telefon: Kopfleiste passt mit allen Werkzeugen und langen Namen („Mesopotamisch“) bis 360 px */
@media (max-width:480px){
  #werkzeuge{gap:5px}
  #werkzeuge .sage-pille,#werkzeuge>.pille--rund,#werkzeuge>.pille.quer-knopf,#k-suche,#k-rechner{width:34px!important;height:34px!important;min-width:0}
  .fam-switch__marke{display:none}
}
@media (max-width:380px){ .fam-switch__name{font-size:14.5px!important;letter-spacing:-.01em} .fam-switch__knopf{gap:5px!important} #werkzeuge{gap:4px} #zur-auswahl{width:34px!important;height:34px!important;padding:0!important;justify-content:center} }
@media (max-width:1300px){ .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:860px){ .quer-knopf{width:38px} .quer-trenner{margin:0 1px;height:22px} }
@media (prefers-reduced-motion:reduce){ .quer-knopf__ring{transition:none} }

/* ---------- Mythologie-Schild und Art ---------- */
.quer-schild{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px 0 6px;border-radius:99px;font:600 11.5px/1 var(--f-display);letter-spacing:.02em;
  color:var(--papier,#F6EEDC);background:color-mix(in srgb,var(--m) 22%,transparent);border:1.5px solid color-mix(in srgb,var(--m) 70%,transparent);white-space:nowrap}
.quer-schild::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--m)}
.quer-art{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:6px;font:600 11px/1 var(--f-display);letter-spacing:.03em;text-transform:uppercase;
  color:var(--papier-2,#B9B1DC);border:1.5px dashed var(--tinte-4,#463E88);white-space:nowrap}
.quer-art--gleich{color:#FFE29A;border-style:solid;border-color:#8A6A2A}
.quer-art--verwandt{color:#9FE8C4;border-style:solid;border-color:#2E6A52}
.quer-art--uebernommen{color:#AFC8FF;border-style:solid;border-color:#3A4E8A}

/* ---------- 1) Abschnitt im Steckbrief ---------- */
.quer{display:grid;gap:12px;margin-top:4px}
.quer[hidden]{display:none}
.quer__titel{display:flex;align-items:center;gap:9px;margin:0;font:600 18px/1.2 var(--f-display);color:var(--papier,#F6EEDC)}
.quer__titel svg{width:26px;height:26px;padding:4px;border-radius:8px;background:var(--deckel,#0C0A26);color:var(--akzent);border:2px solid var(--kante,#0A0820);flex:none}
.quer__liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.quer-link{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;width:100%;padding:10px 12px;text-align:left;cursor:pointer;font:inherit;color:var(--papier,#F6EEDC);
  background:var(--tinte-2,#27225A);border:2px solid var(--kante,#0A0820);border-radius:14px;box-shadow:0 3px 0 var(--kante,#0A0820);
  transition:transform .28s var(--feder),box-shadow .28s var(--feder),background-color .2s}
.quer-link:hover{background:var(--tinte-3,#332D6B);transform:translateY(-2px);box-shadow:0 5px 0 var(--kante,#0A0820)}
.quer-link:active{transform:translateY(2px);box-shadow:0 1px 0 var(--kante,#0A0820);transition-duration:.08s}
.quer-link:focus-visible,.quer-chip:focus-visible,.quer-tab:focus-visible,.quer-karte:focus-visible,.quer-im-baum:focus-visible,.quer-zu:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}
.quer-link__bild svg{display:block;width:44px;height:44px;border-radius:50%;box-shadow:0 0 0 2px var(--kante,#0A0820)}
.quer-link__text{display:grid;gap:4px;min-width:0}
.quer-link__kopf{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.quer-link__kopf b{font:600 16px/1.2 var(--f-display);margin-right:2px}
.quer-link__satz{font-size:13.5px;line-height:1.5;color:var(--papier-2,#B9B1DC);text-wrap:pretty}
.quer-link__pfeil{width:18px;height:18px;color:var(--papier-2,#B9B1DC);transition:transform .3s var(--feder),color .2s}
.quer-link:hover .quer-link__pfeil{transform:translateX(3px);color:var(--akzent)}
.quer__themen{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.quer__klein{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--papier-2,#B9B1DC);margin-right:2px}
.quer-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 9px;border-radius:99px;cursor:pointer;font:600 13.5px/1 var(--f-display);
  color:var(--stein-text,#17143B);background:var(--creme,#F6EEDC);border:2px solid var(--kante,#0A0820);box-shadow:0 3px 0 var(--kante,#0A0820);
  transition:transform .28s var(--feder),box-shadow .28s var(--feder),background-color .2s}
.quer-chip svg{width:17px;height:17px}
.quer-chip:hover{background:#fff;transform:translateY(-2px);box-shadow:0 5px 0 var(--kante,#0A0820)}
.quer-chip:active{transform:translateY(2px);box-shadow:0 1px 0 var(--kante,#0A0820);transition-duration:.08s}

/* ---------- 2) Themenbühne ---------- */
.quer-buehne{position:fixed;left:0;right:0;bottom:0;top:var(--leiste,64px);z-index:38;display:flex;padding:18px;
  background:rgba(8,6,26,.55);opacity:0;transition:opacity .26s var(--ease)}
.quer-buehne.ist-offen{opacity:1}
.quer-buehne[hidden]{display:none}
.quer-buehne__innen{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:280px minmax(0,1fr);overflow:hidden;
  background:var(--tinte,#17143B);background-image:var(--punkte);border:3px solid var(--kante,#0A0820);border-radius:26px;box-shadow:0 10px 0 var(--kante,#0A0820),0 30px 80px rgba(0,0,0,.45);
  transform:translateY(18px) scale(.985);transition:transform .45s var(--feder)}
.quer-buehne.ist-offen .quer-buehne__innen{transform:none}
.quer-zu{position:absolute;top:14px;right:14px;z-index:2;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:var(--creme,#F6EEDC);color:var(--stein-text,#17143B);border:2.5px solid var(--kante,#0A0820);box-shadow:0 4px 0 var(--kante,#0A0820);transition:transform .28s var(--feder),box-shadow .28s var(--feder)}
.quer-zu svg{width:18px;height:18px}
.quer-zu:hover{transform:translateY(-2px) rotate(90deg);box-shadow:0 6px 0 var(--kante,#0A0820)}

/* Themenleiste: ruhige Liste, nur das gewählte Thema steht hoch */
.quer-themen{display:flex;flex-direction:column;min-height:0;min-width:0;border-right:3px solid var(--kante,#0A0820);background:var(--deckel,#0C0A26)}
.quer-themen__kopf{display:grid;gap:4px;margin:0;padding:24px 22px 14px;font:600 21px/1.1 var(--f-display);color:var(--creme,#F6EEDC)}
.quer-themen__kopf small{font:500 13px/1.3 var(--f-text);color:var(--papier-2,#B9B1DC)}
.quer-themen__liste{display:grid;align-content:start;gap:2px;padding:4px 12px 18px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--tinte-4,#463E88) transparent}
.quer-tab{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:11px;width:100%;padding:7px 10px 7px 8px;text-align:left;cursor:pointer;border-radius:13px;
  font:600 15px/1.2 var(--f-display);color:var(--papier,#F6EEDC);background:transparent;border:2px solid transparent;transition:background-color .2s,border-color .2s,transform .28s var(--feder)}
.quer-tab svg{width:30px;height:30px;padding:6px;border-radius:9px;background:var(--tinte-2,#27225A);color:var(--akzent);transition:transform .35s var(--feder)}
.quer-tab small{font:600 12px/1 var(--f-display);color:var(--papier-2,#B9B1DC);opacity:.7;font-variant-numeric:tabular-nums}
.quer-tab:hover{background:var(--tinte-2,#27225A)}
.quer-tab:hover svg{transform:rotate(-8deg) scale(1.08)}
.quer-tab.ist-aktiv{background:var(--creme,#F6EEDC);color:var(--stein-text,#17143B);border-color:var(--kante,#0A0820);box-shadow:0 3px 0 var(--kante,#0A0820)}
.quer-tab.ist-aktiv svg{background:var(--akzent);color:var(--akzent-text,#121028)}
.quer-tab.ist-aktiv small{color:var(--stein-text,#17143B);opacity:.6}

/* Inhalt: Kopf → Figuren → Hintergrund und Karte. Was man drücken kann, steht hoch; was man liest, liegt flach. */
.quer-inhalt{position:relative;isolation:isolate;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:30px clamp(20px,3vw,48px) 56px;container:quer / inline-size;scrollbar-width:thin;scrollbar-color:var(--tinte-4,#463E88) transparent}
.quer-inhalt>*{max-width:1400px}
.quer-inhalt__kopf{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding-right:56px;margin-bottom:44px;min-height:clamp(220px,24vw,340px)}
.quer-inhalt__text,.quer-figuren,.quer-hinter{position:relative;z-index:1}
.quer-inhalt__text{display:grid;gap:14px;align-content:start;max-width:64ch}
.quer-inhalt__titel{display:flex;align-items:center;gap:14px;margin:0;font:600 clamp(30px,4vw,46px)/1.05 var(--f-display);color:var(--creme,#F6EEDC);text-shadow:0 4px 0 var(--kante,#0A0820);text-wrap:balance}
.quer-inhalt__ikon{width:52px;height:52px;padding:10px;flex:none;border-radius:16px;background:var(--tinte-2,#27225A);color:var(--akzent);border:2.5px solid var(--kante,#0A0820);box-shadow:0 4px 0 var(--kante,#0A0820)}
.quer-inhalt__intro{margin:0;font-size:17px;line-height:1.6;color:var(--papier,#F6EEDC);text-wrap:pretty}
.quer-inhalt__tun{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:8px;min-width:0}
.quer-inhalt__aktionen:empty{display:none}
.quer-im-baum{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border-radius:16px;cursor:pointer;text-align:left;
  font:600 15px/1.15 var(--f-display);color:var(--akzent-text,#121028);background:var(--akzent);border:2.5px solid var(--kante,#0A0820);box-shadow:0 4px 0 var(--kante,#0A0820);
  transition:transform .28s var(--feder),box-shadow .28s var(--feder)}
.quer-im-baum svg{width:26px;height:26px}
.quer-im-baum small{display:block;font:500 12.5px/1.2 var(--f-text);opacity:.8}
.quer-im-baum:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--kante,#0A0820)}
.quer-im-baum:active{transform:translateY(2px);box-shadow:0 1px 0 var(--kante,#0A0820);transition-duration:.08s}
/* Animation je Thema: groß und dezent als Stimmung hinter dem Kopf, oben rechts, weich ausgeblendet */
.quer-anim{position:absolute;z-index:0;top:0;right:0;width:min(66%,1040px);aspect-ratio:36/23;pointer-events:none;opacity:.85;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 42%),radial-gradient(ellipse 78% 82% at 66% 36%,#000 46%,rgba(0,0,0,.5) 70%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0%,#000 42%),radial-gradient(ellipse 78% 82% at 66% 36%,#000 46%,rgba(0,0,0,.5) 70%,transparent 100%);mask-composite:intersect}
.quer-anim[hidden]{display:none}
@container quer (max-width:1099px){
  .quer-anim{width:62%;-webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 12%,#000 58%),radial-gradient(ellipse 78% 82% at 70% 34%,#000 46%,rgba(0,0,0,.5) 70%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0%,transparent 12%,#000 58%),radial-gradient(ellipse 78% 82% at 70% 34%,#000 46%,rgba(0,0,0,.5) 70%,transparent 100%)}
}
.quer-inhalt__intro{text-shadow:0 0 14px var(--tinte,#17143B),0 0 4px var(--tinte,#17143B)}
.quer-anim canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Abschnittsköpfe */
.quer-abschnitt{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 0 16px;font:600 22px/1.2 var(--f-display);color:var(--creme,#F6EEDC)}
.quer-abschnitt svg{align-self:center;width:30px;height:30px;padding:5px;border-radius:9px;background:var(--tinte-2,#27225A);color:var(--akzent)}
.quer-abschnitt small{font:500 14px/1.3 var(--f-text);color:var(--papier-2,#B9B1DC)}

/* Figuren: der Kern des Themas */
.quer-figuren{margin-bottom:52px}
.quer-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.quer-karte{display:grid;grid-template-columns:56px 1fr;align-items:start;gap:12px;padding:12px 14px 13px 12px;text-align:left;cursor:pointer;font:inherit;color:var(--papier,#F6EEDC);
  background:var(--tinte-2,#27225A);border:2.5px solid var(--kante,#0A0820);border-radius:16px;box-shadow:0 3px 0 var(--kante,#0A0820);
  transition:transform .3s var(--feder),box-shadow .3s var(--feder),background-color .2s}
.quer-karte:hover{background:var(--tinte-3,#332D6B);transform:translateY(-3px);box-shadow:0 6px 0 var(--kante,#0A0820)}
.quer-karte:active{transform:translateY(2px);box-shadow:0 1px 0 var(--kante,#0A0820);transition-duration:.08s}
.quer-karte.ist-hier{box-shadow:0 3px 0 var(--kante,#0A0820),inset 0 0 0 2px var(--akzent)}
.quer-karte__bild svg{display:block;width:56px;height:56px;border-radius:50%;box-shadow:0 0 0 2.5px var(--kante,#0A0820),0 0 0 5px color-mix(in srgb,var(--m) 55%,transparent);transition:transform .45s var(--feder)}
.quer-karte:hover .quer-karte__bild svg{transform:scale(1.07) rotate(-4deg)}
.quer-karte__text{display:grid;gap:4px;min-width:0}
.quer-karte__kopf{display:flex;flex-wrap:wrap;gap:6px}
.quer-karte b{font:600 18px/1.15 var(--f-display);color:var(--creme,#F6EEDC)}
.quer-karte__satz{font-size:14px;line-height:1.5;color:var(--papier-2,#B9B1DC);text-wrap:pretty}
.quer-hier{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:99px;font:600 11px/1 var(--f-display);color:var(--akzent-text,#121028);background:var(--akzent)}
.quer-karten.rein .quer-karte{animation:querRein .5s var(--feder) both;animation-delay:calc(var(--i) * 35ms)}
@keyframes querRein{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

/* Hintergrund (Lesetext, flach) und Weltkarte – nebeneinander, wenn Platz ist */
.quer-hinter{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:start}
@container quer (min-width:1080px){ .quer-hinter{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px} }
.quer-wissen-teil[hidden]{display:none}
.quer-wissen{display:grid;gap:22px}
@container quer (min-width:700px) and (max-width:1079px){ .quer-wissen{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px} }
.quer-wissen__teil{display:grid;align-content:start;gap:8px}
.quer-wissen__teil h4{display:flex;align-items:center;gap:9px;margin:0;font:600 17px/1.2 var(--f-display);color:var(--creme,#F6EEDC)}
.quer-wissen__teil h4 svg{width:26px;height:26px;padding:4px;flex:none;border-radius:8px;background:var(--tinte-2,#27225A);color:var(--akzent)}
.quer-wissen__teil p{margin:0;font-size:15.5px;line-height:1.65;color:var(--papier,#F6EEDC);max-width:62ch;text-wrap:pretty}
.quer-wissen__teil--wusst{padding:16px 18px 18px;border-radius:16px;background:var(--creme,#F6EEDC);border:2.5px solid var(--kante,#0A0820)}
.quer-wissen__teil--wusst h4,.quer-wissen__teil--wusst p{color:var(--stein-text,#17143B)}
.quer-wissen__teil--wusst h4 svg{background:var(--akzent);color:var(--akzent-text,#121028)}
.quer-wissen.rein .quer-wissen__teil{animation:querRein .5s var(--feder) both;animation-delay:calc(.08s + var(--i) * 60ms)}

/* ---------- Band unten nach „Im Baum zeigen“ ---------- */
.quer-band{position:fixed;left:50%;bottom:22px;z-index:36;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);padding:10px 10px 10px 12px;
  background:var(--deckel,#0C0A26);color:var(--papier,#F6EEDC);border:2.5px solid var(--kante,#0A0820);border-radius:18px;box-shadow:0 5px 0 var(--kante,#0A0820),0 16px 40px rgba(0,0,0,.4);
  transform:translate(-50%,24px);opacity:0;transition:transform .4s var(--feder),opacity .22s}
.quer-band.ist-da{transform:translate(-50%,0);opacity:1}
.quer-band[hidden]{display:none}
.quer-band__ikon svg{width:34px;height:34px;padding:7px;border-radius:10px;background:var(--akzent);color:var(--akzent-text,#121028);border:2px solid var(--kante,#0A0820);display:block}
.quer-band__text{display:grid;gap:2px;min-width:0}
.quer-band__text b{font:600 15.5px/1.15 var(--f-display)}
.quer-band__text small{font-size:12.5px;color:var(--papier-2,#B9B1DC)}
.quer-band__alle{height:34px;padding:0 12px;border-radius:99px;cursor:pointer;font:600 13.5px/1 var(--f-display);color:var(--stein-text,#17143B);background:var(--creme,#F6EEDC);border:2px solid var(--kante,#0A0820);box-shadow:0 3px 0 var(--kante,#0A0820);white-space:nowrap}
.quer-band__zu{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;cursor:pointer;color:var(--papier,#F6EEDC);background:transparent;border:2px solid var(--tinte-4,#463E88)}
.quer-band__zu svg{width:16px;height:16px}
body.karte-offen .quer-band{bottom:22px}

/* ---------- Telefon ---------- */
@media (max-width:860px){
  .quer-buehne{padding:0}
  .quer-buehne__innen{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);border-radius:0;border-width:3px 0 0;box-shadow:none}
  .quer-themen{border-right:0;border-bottom:3px solid var(--kante,#0A0820)}
  .quer-themen__kopf{display:none}
  .quer-themen__liste{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:12px 64px 12px 12px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 78px),transparent calc(100% - 52px));mask-image:linear-gradient(to right,#000 calc(100% - 78px),transparent calc(100% - 52px))}
  .quer-themen__liste::-webkit-scrollbar{display:none}
  .quer-tab{flex:none;width:auto;grid-template-columns:28px auto;padding:6px 12px 6px 6px;font-size:14px;background:var(--tinte-2,#27225A);border-color:var(--kante,#0A0820)}
  .quer-tab svg{width:28px;height:28px;padding:5px}
  .quer-tab small{display:none}
  .quer-zu{top:9px;right:10px;width:38px;height:38px}
  .quer-inhalt{padding:20px 16px 110px}
  .quer-inhalt__kopf{padding-right:0;margin-bottom:32px;gap:20px}
  .quer-inhalt__ikon{width:42px;height:42px;padding:8px;border-radius:13px}
  .quer-inhalt__intro{font-size:15.5px}
  .quer-karten{grid-template-columns:1fr;gap:10px}
  .quer-figuren{margin-bottom:40px}
  .quer-hinter{gap:36px}
  .quer-anim{width:100%;opacity:.6;-webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 92%);mask-image:linear-gradient(to bottom,#000 30%,transparent 92%)}
  .quer-inhalt__kopf{min-height:0}
  .quer-inhalt__tun{align-self:stretch}
  .quer-abschnitt{font-size:20px}
  .quer-band{bottom:76px;gap:8px;padding:8px}
  .quer-band__text small{display:none}
}
@media (prefers-reduced-motion:reduce){
  .quer-wissen.rein .quer-wissen__teil{animation:none}
  .quer-buehne,.quer-buehne__innen,.quer-band,.quer-link,.quer-chip,.quer-karte,.quer-karte__bild svg,.quer-tab svg,.quer-zu{transition:none!important}
  .quer-karten.rein .quer-karte{animation:none}
}

/* ---------- Als Sage erleben ---------- */
.quer-sagen{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.quer-sagen[hidden]{display:none}
.quer-sagen__kopf{margin-right:2px;font:600 14px/1 var(--f-display);color:var(--papier-2,#B9B1DC)}
.quer-sage[hidden]{display:none}
.quer-sagen__mehr{height:40px;padding:0 14px;border-radius:99px;cursor:pointer;font:600 13.5px/1 var(--f-display);color:var(--papier,#F6EEDC);background:transparent;border:2px dashed var(--tinte-4,#463E88);transition:border-color .2s,color .2s}
.quer-sagen__mehr:hover{border-color:var(--akzent);color:var(--creme,#F6EEDC)}
.quer-sagen__mehr:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}
@media (max-width:860px){ .quer-sagen__mehr{flex:none} }
.quer-sage{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:99px;cursor:pointer;text-align:left;font:inherit;color:var(--papier,#F6EEDC);
  background:var(--tinte-2,#27225A);border:2px solid var(--kante,#0A0820);box-shadow:0 3px 0 var(--kante,#0A0820);transition:transform .28s var(--feder),box-shadow .28s var(--feder),background-color .2s}
.quer-sage:hover{background:var(--tinte-3,#332D6B);transform:translateY(-2px);box-shadow:0 5px 0 var(--kante,#0A0820)}
.quer-sage:active{transform:translateY(2px);box-shadow:0 1px 0 var(--kante,#0A0820);transition-duration:.08s}
.quer-sage:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}
.quer-sage__play{width:28px;height:28px;display:grid;place-items:center;flex:none;border-radius:50%;background:var(--m);color:#121028;border:2px solid var(--kante,#0A0820);transition:transform .35s var(--feder)}
.quer-sage__play svg{width:14px;height:14px;margin-left:2px}
.quer-sage:hover .quer-sage__play{transform:scale(1.12) rotate(-8deg)}
.quer-sage__text{display:grid;gap:1px}
.quer-sage__text b{font:600 13.5px/1.15 var(--f-display)}
.quer-sage__text small{font-size:11.5px;color:var(--papier-2,#B9B1DC)}

/* ---------- Weltkarte ---------- */
.quer-welt-teil{position:relative;margin:0;min-width:0}
.quer-welt-teil[hidden]{display:none}
.quer-welt{position:relative;width:100%;aspect-ratio:1000/440;border-radius:20px;overflow:hidden;background:#1B2A5A;border:3px solid var(--kante,#0A0820);box-shadow:0 5px 0 var(--kante,#0A0820)}
.quer-welt__karte,.quer-welt__linien{position:absolute;inset:0;width:100%;height:100%;display:block}
.quer-welt__linien{pointer-events:none}
.quer-welt__land{fill:#3E4A86;stroke:#5A66A8;stroke-width:1.2;stroke-linejoin:round}
.quer-welt__puls{transform-box:fill-box;transform-origin:center;animation:querPuls 2.4s ease-out infinite}
@keyframes querPuls{from{transform:scale(1);opacity:.9}to{transform:scale(3.2);opacity:0}}
.quer-welt__marken{position:absolute;inset:0}
.quer-marke{position:absolute;left:0;top:0;display:flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;border-radius:99px;cursor:pointer;text-align:left;font:inherit;white-space:nowrap;
  color:var(--stein-text,#17143B);background:var(--creme,#F6EEDC);border:2px solid var(--kante,#0A0820);box-shadow:0 3px 0 var(--kante,#0A0820),inset 0 0 0 2px var(--m);
  transition:box-shadow .2s,background-color .2s;will-change:transform}
.quer-marke:hover,.quer-marke.ist-offen{background:#fff;box-shadow:0 5px 0 var(--kante,#0A0820),inset 0 0 0 3px var(--m);z-index:2}
.quer-marke:focus-visible{outline:3px solid var(--akzent);outline-offset:2px;z-index:3}
.quer-marke.ist-hier{background:var(--akzent);}
.quer-marke__bilder{display:flex}
.quer-marke__bilder span{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 2px var(--kante,#0A0820);overflow:hidden;flex:none}
.quer-marke__bilder span+span{margin-left:-10px}
.quer-marke__bilder svg{display:block;width:30px;height:30px}
.quer-marke__text{display:grid;gap:1px}
.quer-marke__text b{font:600 13px/1.1 var(--f-display)}
.quer-marke__text small{font:500 11px/1.1 var(--f-text);opacity:.75}
.quer-welt.ist-eng .quer-marke{padding:3px;gap:0}
.quer-welt.ist-eng .quer-marke__text{display:none}
.quer-welt.ist-eng .quer-marke__bilder span{width:24px;height:24px}
.quer-welt.ist-eng .quer-marke__bilder svg{width:24px;height:24px}
.quer-welt.ist-eng .quer-marke__bilder span:nth-child(n+2){display:none}
.quer-welt__pop{position:absolute;z-index:5;display:grid;gap:6px;max-height:calc(100% - 16px);overflow:auto;padding:10px;border-radius:16px;
  background:var(--deckel,#0C0A26);border:2.5px solid var(--kante,#0A0820);box-shadow:0 6px 0 var(--kante,#0A0820),0 18px 40px rgba(0,0,0,.45);animation:querRein .35s var(--feder) both}
.quer-welt__pop[hidden]{display:none}
.quer-pop__kopf{margin:0 4px 2px;font:600 12px/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--akzent)}
.quer-pop__figur{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;padding:6px 8px 6px 6px;border-radius:12px;cursor:pointer;text-align:left;font:inherit;color:var(--papier,#F6EEDC);background:var(--tinte-2,#27225A);border:2px solid transparent}
.quer-pop__figur:hover,.quer-pop__figur:focus-visible{border-color:var(--akzent);outline:none}
.quer-pop__bild svg{display:block;width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 2px var(--kante,#0A0820)}
.quer-pop__text{display:grid;gap:2px;min-width:0}
.quer-pop__text b{font:600 14.5px/1.15 var(--f-display)}
.quer-pop__text small{font-size:12.5px;line-height:1.4;color:var(--papier-2,#B9B1DC);text-wrap:pretty}
.quer-pop__pfeil{width:16px;height:16px;color:var(--papier-2,#B9B1DC)}
@media (max-width:860px){
  .quer-welt{border-radius:16px}
  .quer-sage__text b{font-size:13px}
  .quer-sagen{flex-wrap:nowrap;overflow-x:auto;margin-right:-16px;padding:2px 16px 6px 0;scrollbar-width:none}
  .quer-sagen::-webkit-scrollbar{display:none}
  .quer-sage,.quer-sagen__kopf{flex:none}
  .quer-welt__pop{position:static;width:auto!important;margin-top:12px;max-height:none}
}
@media (prefers-reduced-motion:reduce){ .quer-welt__puls{animation:none;opacity:0} .quer-welt__pop{animation:none} }

/* ---------- Themenbühne: Figuren nach Mythologien gruppiert (18.10.) ---------- */
.quer-karten{display:block;columns:2 360px;column-gap:16px}
.quer-ueber{column-span:all;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.quer-ueber__m{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px 0 10px;border-radius:99px;font:600 13px/1 var(--f-display);color:var(--creme,#F6EEDC);
  background:var(--tinte-2,#27225A);border:2px solid var(--kante,#0A0820);box-shadow:0 2px 0 var(--kante,#0A0820);cursor:pointer;transition:transform .2s var(--feder),background-color .2s}
.quer-ueber__m:hover{background:var(--tinte-3,#332D6B);transform:translateY(-2px)}
.quer-ueber__m:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}
.quer-ueber__m small{font:600 11px/1 var(--f-display);min-width:18px;height:18px;padding:0 5px;border-radius:99px;display:grid;place-items:center;background:var(--m);color:#121028}
.quer-ueber__m.ist-hier{box-shadow:0 2px 0 var(--kante,#0A0820),inset 0 0 0 2px var(--akzent)}
.quer-ueber__m.ist-leer{background:transparent;border-color:transparent;box-shadow:none;color:var(--papier-2,#B9B1DC);opacity:.42;cursor:default;font-weight:500}
.quer-ueber__punkt{width:9px;height:9px;border-radius:50%;background:var(--m);box-shadow:0 0 0 2px var(--kante,#0A0820)}
.quer-ueber__m.ist-leer .quer-ueber__punkt{background:transparent;box-shadow:inset 0 0 0 1.5px var(--m)}
.quer-gruppe{break-inside:avoid;display:grid;gap:10px;margin:0 0 16px;padding:14px 14px 10px;border-radius:18px;background:var(--tinte-2,#27225A);border:2px solid var(--kante,#0A0820);
  box-shadow:0 3px 0 var(--kante,#0A0820),inset 4px 0 0 var(--m);scroll-margin-top:12px}
.quer-gruppe.ist-hier{box-shadow:0 3px 0 var(--kante,#0A0820),inset 4px 0 0 var(--m),inset 0 0 0 2px var(--akzent)}
.quer-gruppe.blink{animation:querBlink 1.1s var(--ease)}
@keyframes querBlink{0%,60%{background:color-mix(in srgb,var(--m) 22%,var(--tinte-2,#27225A))}100%{background:var(--tinte-2,#27225A)}}
.quer-gruppe__kopf{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;padding-left:6px}
.quer-gruppe__kopf h4{margin:0;font:600 19px/1.15 var(--f-display);color:var(--creme,#F6EEDC)}
.quer-gruppe__kopf small{font:500 13px/1.2 var(--f-text);color:var(--papier-2,#B9B1DC)}
.quer-gruppe__kopf .quer-hier{margin-left:auto}
.quer-gruppe__punkt{width:12px;height:12px;border-radius:50%;background:var(--m);box-shadow:0 0 0 2.5px var(--kante,#0A0820)}
.quer-gruppe__text{margin:0;padding-left:6px;font-size:15px;line-height:1.55;color:var(--papier,#F6EEDC);text-wrap:pretty}
.quer-gruppe__figuren{display:grid;gap:2px;margin:0 -6px}
.quer-karte.quer-karte--klein{grid-template-columns:44px 1fr;align-items:center;gap:12px;padding:8px 10px;background:transparent;border:0;box-shadow:none;border-radius:12px}
.quer-karte.quer-karte--klein:hover{background:var(--tinte-3,#332D6B);transform:none;box-shadow:none}
.quer-karte.quer-karte--klein:active{transform:scale(.99)}
.quer-karte--klein .quer-karte__bild svg{width:44px;height:44px;box-shadow:0 0 0 2px var(--kante,#0A0820),0 0 0 4px color-mix(in srgb,var(--m) 55%,transparent)}
.quer-karte--klein .quer-karte__text{gap:2px}
.quer-karte--klein b{font-size:16px}
.quer-karte--klein .quer-karte__satz{font-size:13.5px;line-height:1.45}
.quer-gruppe .quer-karte--klein{--m:inherit}
.quer-karten.rein .quer-gruppe{animation:querRein .5s var(--feder) both;animation-delay:calc(var(--i) * 40ms)}
.quer-karten.rein .quer-karte--klein{animation:none}
@container quer (max-width:560px){ .quer-karten{columns:1} .quer-gruppe__text{font-size:14.5px} .quer-ueber{gap:5px} .quer-ueber__m{height:30px;font-size:12.5px;padding:0 10px 0 8px} }
@media (prefers-reduced-motion:reduce){ .quer-karten.rein .quer-gruppe,.quer-gruppe.blink{animation:none} .quer-ueber__m{transition:none} }

/* ---------- Themenbühne kompakter (18.10. b): Hintergrund oben, Mythologien als Klappleisten ---------- */
.quer-inhalt__kopf{margin-bottom:28px;min-height:clamp(150px,14vw,220px)}
.quer-wissen-teil--oben .quer-wissen__teil:not(.quer-wissen__teil--wusst)>*{text-shadow:0 0 14px var(--tinte,#17143B),0 0 4px var(--tinte,#17143B)}
.quer-wissen-teil--oben{position:relative;z-index:1;margin:0 0 44px}
@container quer (min-width:700px){ .quer-wissen-teil--oben .quer-wissen{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px} }
@container quer (min-width:1080px){ .quer-hinter{grid-template-columns:minmax(0,1fr)} }
.quer-karten{columns:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.quer-gruppe{display:block;margin:0;padding:0;break-inside:auto;overflow:hidden}
.quer-gruppe__h{margin:0;font:inherit}
.quer-gruppe__kopf{width:100%;display:flex;flex-wrap:nowrap;align-items:center;gap:12px;min-height:58px;padding:9px 12px 9px 20px;border:0;border-radius:16px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background-color .2s}
.quer-gruppe__kopf:hover{background:var(--tinte-3,#332D6B)}
.quer-gruppe__kopf:focus-visible{outline:3px solid var(--akzent);outline-offset:-4px}
.quer-gruppe.ist-offen .quer-gruppe__kopf{border-radius:16px 16px 0 0}
.quer-gruppe__punkt{flex:none}
.quer-gruppe__name{flex:1 1 auto;min-width:0;display:grid;gap:3px}
.quer-gruppe__zeile{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
.quer-gruppe__zeile .quer-hier{margin-left:0}
.quer-gruppe__zeile b{font:600 18px/1.15 var(--f-display);color:var(--creme,#F6EEDC)}
.quer-gruppe__name small{font:500 13px/1.3 var(--f-text);color:var(--papier-2,#B9B1DC)}
.quer-gruppe__titel::after{content:" · "}
.quer-gruppe__bilder{flex:none;display:flex}
.quer-gruppe__bilder>span{width:30px;height:30px;flex:none;overflow:hidden;border-radius:50%;background:var(--tinte-3,#332D6B);box-shadow:0 0 0 2px var(--kante,#0A0820)}
.quer-gruppe__bilder>span+span{margin-left:-8px}
.quer-gruppe__bilder svg{display:block;width:30px;height:30px}
.quer-gruppe__plus{display:grid;place-items:center;font:600 11px/1 var(--f-display);color:var(--creme,#F6EEDC)}
.quer-gruppe__pfeil{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--tinte-3,#332D6B);color:var(--creme,#F6EEDC);transition:transform .32s var(--feder),background-color .2s}
.quer-gruppe__pfeil svg{width:16px;height:16px}
.quer-gruppe__kopf:hover .quer-gruppe__pfeil{background:var(--tinte-4,#463E88)}
.quer-gruppe.ist-offen .quer-gruppe__pfeil{transform:rotate(180deg)}
.quer-gruppe__huelle{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease)}
.quer-gruppe.ist-offen .quer-gruppe__huelle{grid-template-rows:1fr}
.quer-gruppe__innen{min-height:0;overflow:hidden}
.quer-gruppe__inhalt{display:grid;gap:10px;padding:2px 16px 14px 20px}
.quer-gruppe__text{padding-left:0;max-width:78ch}
.quer-gruppe__figuren{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 8px;margin:0 -10px}
.quer-karte.quer-karte--klein{grid-template-columns:40px 1fr;padding:7px 10px}
.quer-karte--klein .quer-karte__bild svg{width:40px;height:40px}
.quer-karte--klein b{font-size:15.5px}
.quer-karte--klein .quer-karte__satz{font-size:13px;line-height:1.4}
.quer-gruppe__tun{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:12px;border-top:1.5px solid color-mix(in srgb,var(--papier-2,#B9B1DC) 16%,transparent)}
.quer-gruppe__sagen{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.quer-gruppe__sagen[hidden]{display:none}
.quer-sage--klein{padding:4px 12px 4px 4px;box-shadow:0 2px 0 var(--kante,#0A0820)}
.quer-sage--klein .quer-sage__play{width:26px;height:26px}
.quer-gruppe__baum{margin-left:auto;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 10px;border-radius:99px;cursor:pointer;
  font:600 13.5px/1 var(--f-display);color:var(--akzent-text,#121028);background:var(--akzent);border:2px solid var(--kante,#0A0820);box-shadow:0 3px 0 var(--kante,#0A0820);
  transition:transform .28s var(--feder),box-shadow .28s var(--feder)}
.quer-gruppe__baum svg{width:20px;height:20px}
.quer-gruppe__baum:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--kante,#0A0820)}
.quer-gruppe__baum:active{transform:translateY(2px);box-shadow:0 1px 0 var(--kante,#0A0820);transition-duration:.08s}
.quer-gruppe__baum:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}
@container quer (max-width:560px){
  .quer-gruppe__kopf{gap:10px;min-height:54px;padding:8px 10px 8px 16px}
  .quer-gruppe__titel{display:none}
  .quer-gruppe__zeile b{font-size:17px}
  .quer-gruppe__bilder>span:nth-child(n+4){display:none}
  .quer-gruppe__inhalt{padding:2px 12px 12px 16px}
  .quer-gruppe__figuren{grid-template-columns:minmax(0,1fr)}
  .quer-gruppe__baum{margin-left:0}
}
@media (max-width:860px){ .quer-gruppe__sagen{flex-wrap:wrap;overflow:visible} }
@media (prefers-reduced-motion:reduce){ .quer-gruppe__huelle,.quer-gruppe__pfeil{transition:none} }