/* Stadt-Land-Fluss.info — schlank, ohne Framework. */
:root{
  --marke:#1f6f4a; --marke-hell:#eaf3ee; --text:#1c1e1c; --grau:#5c615d;
  --linie:#e2e6e3; --warn:#b4321e; --gut:#0f7a52; --papier:#fbfbf9;
}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--text);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--marke)}
main{max-width:56rem;margin:0 auto;padding:1.5rem 1.1rem 3rem}
.schmal{max-width:42rem}
h1{font-size:1.9rem;line-height:1.2;margin:.2rem 0 .8rem}
h2{font-size:1.2rem;margin:2rem 0 .5rem}
.kopf{border-bottom:1px solid var(--linie);background:#fff;
  display:flex;align-items:center;gap:.6rem 1.4rem;flex-wrap:wrap}
.hauptmenue{display:flex;gap:.2rem .3rem;flex-wrap:wrap;margin-left:auto}
.hauptmenue a{padding:.35rem .6rem;border-radius:.4rem;text-decoration:none;
  color:var(--text);font-size:.94rem;font-weight:500}
.hauptmenue a:hover{background:var(--marke-hell);color:var(--marke)}
.hauptmenue a[aria-current=page]{background:var(--marke-hell);color:var(--marke);
  font-weight:600}
@media(max-width:34rem){
  .hauptmenue{margin-left:0;width:100%;border-top:1px solid var(--linie);
    padding-top:.4rem}
  .hauptmenue a{font-size:.88rem;padding:.3rem .5rem}
}
.marke{display:inline-block;padding:1rem 1.1rem;font-weight:700;font-size:1.15rem;
  text-decoration:none;color:var(--marke);letter-spacing:-.02em}
.marke span{color:var(--grau);font-weight:400}
.marke .endung{font-size:.8em}
.fuss{border-top:1px solid var(--linie);background:#fff;color:var(--grau);
  font-size:.88rem;padding:1.2rem 1.1rem}
.fuss p{max-width:56rem;margin:.3rem auto}
.direkt{border-left:4px solid var(--marke);background:var(--marke-hell);
  padding:.9rem 1rem;border-radius:0 .5rem .5rem 0;margin:1rem 0 1.4rem}

/* ⚠️ Der farbige Streifen bleibt eckig — abgerundet sieht er nach Fehler aus. */
.stufen{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:1rem 0}
.stufen-titel{color:var(--grau);font-size:.9rem;margin-right:.2rem}
.knopf-wahl{display:inline-flex;cursor:pointer;padding:.35rem .8rem;border:1px solid var(--linie);
  border-radius:.5rem;background:#fff;font-size:.9rem}
.knopf-wahl input{position:absolute;opacity:0;width:0;height:0}
.knopf-wahl:hover{border-color:var(--marke)}
.knopf-wahl:has(input:checked){border-color:var(--marke);background:var(--marke-hell);font-weight:600}
.knopf-wahl:has(input:focus-visible){outline:2px solid var(--marke);outline-offset:1px}

/* ⚠️ VIERZEHN KATEGORIEN SIND EINE ZEILE ZU VIEL FÜR DIE STUFENREIHE. Sie
   stehen als eigener Block darunter, damit die Vorlagen oben eine Reihe
   bleiben und nicht zwischen den Häkchen verschwinden. */
.kategorien{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;
  margin:.6rem 0 1rem}
.kat-wahl{padding:.3rem .6rem;font-size:.85rem}
.kat-wahl span{display:inline-flex;align-items:center;gap:.3rem}
/* ⚠️ DAS ZEICHEN DARF NICHT MITWACHSEN. In den Feldern steht es auf 1.1rem;
   hier, neben einer kleineren Schrift, wäre das zu gross und die Knöpfe
   würden unterschiedlich hoch. */
.kat-wahl .ikon{width:.95rem;height:.95rem;opacity:.75}
.kategorien .stufen-hinweis{flex-basis:100%;margin-top:.15rem}
/* ⚠️ AUF DEM TELEFON BRAUCHEN VIERZEHN KNÖPFE FÜNF ZEILEN — und schieben den
   Buchstaben, um den es geht, unter den Bildschirmrand. Ohne die Zeichen und
   mit engerem Rand sind es drei. Die Zeichen sind Schmuck; der Name steht
   daneben und sagt dasselbe. */
@media (max-width:34rem){
  .kat-wahl{padding:.25rem .5rem;font-size:.8rem}
  .kat-wahl .ikon{display:none}
  .kategorien{gap:.25rem}
}

/* Buchstabe links, Stand und Knopf in der Mitte, Uhr rechts — in dieser
   Reihenfolge liest man die Runde ab. */
.runde{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
  background:#fff;border:1px solid var(--linie);border-radius:.9rem;
  padding:1.2rem 1.4rem;margin:1.2rem 0;
  box-shadow:0 1px 2px rgba(28,30,28,.04)}
.buchstabe{font-size:3.6rem;font-weight:700;line-height:1;color:var(--marke);
  min-width:4.6rem;height:4.6rem;display:grid;place-items:center;
  background:var(--marke-hell);border:2px solid var(--marke);border-radius:.8rem;
  text-align:center;font-variant-numeric:tabular-nums}
/* Vor der ersten Runde: dasselbe Feld, nur zurückgenommen. */
.buchstabe.leer{color:#7d9488;background:#f4f7f5;border-color:var(--linie);
  border-style:dashed;font-size:2.6rem}
.runde-rechts{flex:1 1 12rem;display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.runde .uhr{margin-left:auto;order:3}
.pruefer-hinweis{margin:0 0 0 auto;order:3;text-align:right;font-size:.85rem;
  color:var(--grau);line-height:1.35}
.pruefer-hinweis strong{display:block;font-size:1.3rem;color:var(--marke);
  font-variant-numeric:tabular-nums}
.pruefer-hinweis span{display:block;font-size:.78rem;opacity:.8}
.pruefer-hinweis[hidden]{display:none}
@media(max-width:34rem){.pruefer-hinweis{margin:0;text-align:left;order:4}}
.stand{display:flex;gap:.9rem;flex-wrap:wrap}
.stand-teil{background:var(--marke-hell);border-radius:.4rem;padding:.2rem .6rem;
  font-size:.9rem;color:var(--grau)}
.stand{margin:0 0 .4rem;color:var(--grau);font-size:.92rem}
.stand strong{color:var(--marke);font-size:1.15rem}
/* ══ Die Uhr als Ring ══════════════════════════════════════════════════════
   ⚠️ EINE ZAHL, DIE KLEINER WIRD, SIEHT MAN NICHT ABLAUFEN. Vorher stand
   hier „45 s", und man musste lesen, um zu wissen, wie es steht. Der Ring
   zeigt den Rest als Fläche: ein Blick genügt. Die Zahl bleibt in der Mitte,
   für alle, die es genau wissen wollen. */
.uhr{position:relative;width:4.5rem;height:4.5rem;margin:0;
  display:grid;place-items:center}
/* ⚠️ `display:grid` SCHLÄGT DAS hidden-ATTRIBUT. Die Uhr stand mit einer
   grossen Null im Ring auf der Seite, bevor überhaupt eine Runde lief —
   der Browser blendet [hidden] über `display:none` aus, und jede spätere
   display-Regel hebt das auf. */
.uhr[hidden]{display:none}
.uhr svg{width:100%;height:100%;transform:rotate(-90deg)}
.uhr circle{fill:none;stroke-width:6}
.uhr-bahn{stroke:var(--linie)}
.uhr-rest{stroke:var(--marke);stroke-linecap:round;
  transition:stroke-dashoffset .1s linear,stroke .4s ease}
.uhr-zahl{position:absolute;font-size:1.35rem;font-weight:700;color:var(--marke);
  font-variant-numeric:tabular-nums;transition:color .4s ease}
.uhr.knapp .uhr-rest,.uhr.knapp .uhr-zahl{stroke:#c8781c;color:#c8781c}
.uhr.sehr-knapp .uhr-rest,.uhr.sehr-knapp .uhr-zahl{stroke:var(--warn);color:var(--warn)}
/* Die letzten fünf Sekunden schlagen im Sekundentakt — deutlich genug, um
   aufzuschrecken, ruhig genug, um niemanden zu hetzen. */
.uhr.sehr-knapp{animation:puls 1s ease-in-out infinite}
@keyframes puls{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* Der Buchstabe ist das Ereignis der Runde — er darf einen Moment lang
   auffallen, wenn er wechselt. */
.buchstabe.gezogen{animation:einschlag .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes einschlag{
  0%{transform:scale(.4) rotate(-8deg);opacity:0}
  60%{transform:scale(1.12) rotate(2deg);opacity:1}
  100%{transform:scale(1) rotate(0)}
}
.stand strong.waechst{animation:tick .25s ease}
@keyframes tick{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}}
.stand strong{display:inline-block}

/* ⚠️ WER BEWEGUNG ABGESTELLT HAT, BEKOMMT KEINE. Die Einstellung gibt es in
   jedem Betriebssystem, und sie ist keine Geschmacksfrage: Bewegte Flächen
   lösen bei manchen Menschen Übelkeit oder Migräne aus. */
@media (prefers-reduced-motion:reduce){
  .buchstabe.gezogen,.uhr.sehr-knapp,.stand strong.waechst{animation:none}
  .uhr-rest{transition:none}
}

.stufen-hinweis{color:var(--grau);font-size:.85rem;flex-basis:100%}
.knopf{display:inline-flex;align-items:center;gap:.45rem}
/* ⚠️ ZUM DRITTEN MAL: `display` SCHLÄGT DAS hidden-ATTRIBUT. Erst die Uhr,
   dann die Spaltenfelder, jetzt der Startknopf — er blieb grau im Spielfeld
   stehen, während schon gespielt wurde. Wer eine display-Regel schreibt,
   muss [hidden] mitschreiben. */
.knopf[hidden]{display:none}
.knopf{display:inline-block;padding:.55rem 1.1rem;border:0;border-radius:.5rem;
  background:var(--marke);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.knopf:disabled{background:#c3cbc6;cursor:not-allowed}
.knopf:not(:disabled):hover{background:#17573a}

.felder{display:grid;gap:.9rem;margin:1.2rem 0}
.feld{display:grid;gap:.25rem}
/* ⚠️ ZUM ZWEITEN MAL: `display` SCHLÄGT DAS hidden-ATTRIBUT. Auf der schweren
   Stufe stand das Feld „Name" grau, aber sichtbar in der Maske — es gehört
   dort nicht hin. Dieselbe Falle wie bei der Uhr. */
.feld[hidden]{display:none}
.feld-titel{font-size:.85rem;color:var(--text);font-weight:600;
  display:flex;align-items:center;letter-spacing:.01em}
.feld input{width:100%;padding:.7rem .8rem;border:1px solid #d3dad6;border-radius:.5rem;
  font:inherit;background:#fff;transition:border-color .15s ease,box-shadow .15s ease}
.feld input:not(:disabled):hover{border-color:#a9b8b0}
.feld input:disabled{background:#f4f6f5;color:var(--grau);border-style:dashed}
/* Ein gefülltes Feld soll man von einem leeren unterscheiden können, ohne
   hinzusehen — sonst weiss man beim Prüfen nicht, was man ausgelassen hat. */
.feld input:not(:placeholder-shown){border-color:var(--marke);background:#fbfdfc}
.feld input:focus-visible{outline:2px solid var(--marke);outline-offset:1px;border-color:var(--marke)}
.echo{min-height:1.2rem;font-size:.85rem;color:var(--grau);display:flex;
  align-items:center;gap:.3rem}
.echo.richtig{color:var(--gut)}
.echo.falsch{color:var(--warn)}
.echo.richtig,.echo.falsch{animation:aufblenden .3s ease}
@keyframes aufblenden{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.echo.richtig,.echo.falsch{animation:none}}
.knopf-haupt{justify-self:start;padding:.7rem 1.5rem;font-size:1.02rem}
.stufen-titel{font-weight:600;color:var(--text)}
.block{border-top:1px solid var(--linie);margin-top:2rem;padding-top:1rem}
/* Die aufklappbaren Spalten sitzen im selben Raster wie die Standardrunde
   und übernehmen deren Spaltenzahl, damit die Maske nicht springt. */
.weitere-spalten{border:1px solid var(--linie);border-radius:.5rem;padding:.6rem .8rem}
.weitere-spalten summary{cursor:pointer;font-weight:600;font-size:.95rem}
.weitere-spalten[open] summary{margin-bottom:.8rem}
.felder-weitere{display:grid;gap:.9rem}
@media(min-width:40rem){.felder{grid-template-columns:1fr 1fr}.knopf-haupt{grid-column:1/-1}
  .weitere-spalten{grid-column:1/-1}.felder-weitere{grid-template-columns:1fr 1fr}}

.rang{color:var(--grau);font-weight:400}

/* ── Lösungsseiten ──────────────────────────────────────────────────────── */
.loesung{max-width:52rem}
.eyebrow{display:inline-block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grau);margin-bottom:.3rem}
.eyebrow a{color:inherit;text-decoration:none}
.tabelle-rahmen{overflow-x:auto}
.liste-tabelle{width:100%;border-collapse:collapse;font-size:.94rem}
.liste-tabelle th,.liste-tabelle td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid var(--linie)}
.liste-tabelle th{font-size:.82rem;color:var(--grau);font-weight:600}
.liste-tabelle .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.chips{list-style:none;padding:0;margin:.6rem 0;display:flex;flex-wrap:wrap;gap:.4rem}
.chips li{background:#fff;border:1px solid var(--linie);border-radius:.45rem;padding:.3rem .6rem;font-size:.92rem}
.chip-zahl{color:var(--grau);font-size:.82rem;font-variant-numeric:tabular-nums}
.buchstaben{list-style:none;padding:0;margin:.6rem 0;display:flex;flex-wrap:wrap;gap:.3rem}
.buchstaben a{display:inline-block;min-width:2rem;text-align:center;padding:.35rem .1rem;
  border:1px solid var(--linie);border-radius:.4rem;background:#fff;text-decoration:none;font-weight:600}
.buchstaben a:hover{border-color:var(--marke);background:var(--marke-hell)}
.buchstaben a.hier{background:var(--marke);color:#fff;border-color:var(--marke)}
/* ⚠️ Leere Buchstaben blass, aber verlinkt: „Land mit Q" ist eine gesuchte
   Frage, die Seite muss erreichbar sein. */
.buchstaben a.leer{color:var(--grau);opacity:.55}
.cta{background:var(--marke-hell);border:0;border-radius:.6rem;padding:1rem 1.1rem;margin-top:2rem}
.cta h2{margin-top:0}
.cta .knopf{margin-left:.4rem}

/* ── Blöcke, Karte, lange Listen ─────────────────────────────────────────── */
.block h2 .anzahl{display:inline-block;margin-left:.4rem;padding:.05rem .45rem;
  background:var(--marke-hell);color:var(--marke);border-radius:.8rem;
  font-size:.72rem;font-weight:600;vertical-align:.15em;font-variant-numeric:tabular-nums}
.weltkarte{margin:1.2rem 0}
.weltkarte svg{display:block;width:100%;height:auto;background:#eaf0f3;
  border:1px solid var(--linie);border-radius:.5rem}
.wk-land{fill:#dfe3df;stroke:#c8cec9;stroke-width:.4}
.wk-an{fill:var(--marke);stroke:#12563a;stroke-width:.5}
.weltkarte figcaption{margin-top:.35rem}
.chips-gross li{font-size:1rem;padding:.4rem .75rem;border-color:#cfd6d1}
.chips-gross a{font-weight:600}
/* ⚠️ <details> statt JavaScript: Die Liste muss auch ohne Skript aufgehen,
   und Suchmaschinen lesen den Inhalt trotzdem. */
.mehr{margin:.6rem 0}
.mehr summary{cursor:pointer;color:var(--marke);font-size:.9rem;font-weight:600;
  padding:.35rem 0;user-select:none}
.mehr summary:hover{text-decoration:underline}
.mehr[open] summary{margin-bottom:.3rem}
.liste-tabelle .leise{color:var(--grau);font-size:.86rem}
.meta{color:var(--grau);font-size:.86rem}

/* Punktwert — die drei Stufen des Spiels, farblich unterschieden. */
.pkt{display:inline-block;min-width:1.8rem;text-align:center;border-radius:.35rem;
  padding:.05rem .35rem;font-weight:700;font-size:.82rem;font-variant-numeric:tabular-nums}
.pkt-5{background:#eef1ef;color:#5c615d}
.pkt-10{background:#e7f0e9;color:var(--marke)}
.pkt-20{background:#f7ead9;color:#94500f}
/* ⚠️ Die Karte trägt nur, wenn sie groß genug ist. In der schmalen Spalte
   waren die Punkte nicht auseinanderzuhalten. */
.zwei{display:grid;gap:1.2rem}
@media(min-width:52rem){.zwei{grid-template-columns:1fr 20rem;align-items:start}}
.dkarte{margin:0}
.dkarte svg{width:100%;height:auto;background:#f7f9f7;border:1px solid var(--linie);border-radius:.5rem}
.dk-land{fill:#e6ebe7;stroke:#fff;stroke-width:1}
.dk-punkt{fill:var(--marke);stroke:#fff;stroke-width:1.2}
.dk-punkt.selten{fill:#c8721e}

/* ── Lernkarte: Nummern verbinden Fläche und Name ────────────────────────── */
.wk-marke circle{fill:#12563a;stroke:#fff;stroke-width:1.2}
/* ⚠️ SCHRIFTGRÖSSE GEHÖRT HIERHER, NICHT IN EIN style-ATTRIBUT. Die eigene
   Inhaltsrichtlinie erlaubt nur `style-src 'self'`; ein `style="font-size:…"`
   im SVG wird vom Browser blockiert — wortlos, die Zahl bleibt dann einfach
   auf der Vorgabegröße stehen. Genau daran lagen die zu grossen Nummern im
   Europaausschnitt. */
.wk-marke text{fill:#fff;font:700 8px system-ui,sans-serif;text-anchor:middle;
  pointer-events:none}
.karte-eu .wk-marke text{font-size:3.4px}
.liste-tabelle th.nr,.liste-tabelle td.nr{width:2.6rem;padding-right:0}
.marke-nr{display:inline-block;min-width:1.5rem;height:1.5rem;line-height:1.5rem;
  text-align:center;border-radius:50%;background:#12563a;color:#fff;
  font-size:.76rem;font-weight:700}
/* Zeile und Land zusammen hervorheben — ohne JavaScript über :hover, mit
   JavaScript auch andersherum. */
.liste-tabelle tr[data-kz]:hover{background:var(--marke-hell)}
.wk-an.leuchtet{fill:#c8721e}
.wk-marke.leuchtet circle{fill:#c8721e}
.liste-tabelle tr.leuchtet{background:#f7ead9}
.wk-marke line{stroke:#12563a;stroke-width:1.2;stroke-dasharray:2 2}
/* Im engen Ausschnitt duenner zeichnen — sonst wirkt jede Grenze wie ein Strich. */
.karte-eu .wk-land{stroke-width:.25}
.karte-eu .wk-marke line{stroke-width:.7;stroke-dasharray:1.4 1.4}
.karte-eu .wk-marke circle{stroke-width:.7}
/* ⚠️ Der Europa-Ausschnitt ist fast quadratisch. Auf voller Seitenbreite
   wuerde die Karte neunhundert Bildpunkte hoch — mehr als ein Bildschirm.
   Die Hoehe begrenzen und den Rest zentrieren. */
.weltkarte svg.karte-eu,.weltkarte svg[viewBox^="3"]{max-height:26rem;margin:0 auto}
/* Der Ankerpunkt bleibt am Ort, die Marke steht daneben. */
.wk-anker{fill:#12563a;stroke:none}
.karte-eu .wk-anker{stroke:none}

/* ── Sachseiten ────────────────────────────────────────────────────────────
   Die Zahlenliste ist eine Definitionsliste, weil sie eine ist: Begriff und
   Wert. Ohne Regel stellt der Browser dd eingerückt unter dt — auf der
   Chile-Seite standen so vierundzwanzig Zeilen untereinander, wo zwölf
   Paare hingehören. */
.daten{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:.1rem 1.5rem;margin:0}
.daten>div{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;padding:.55rem .2rem;border-bottom:1px solid var(--linie,#e5e7eb)}
.daten dt{color:#6b7280;font-size:.88rem;margin:0}
.daten dd{margin:0;font-weight:600;text-align:right}
/* Lange Werte wie „Deutsch, Französisch, Italienisch" brauchen die Zeile
   für sich, sonst quetscht sich der Begriff auf zwei Zeichen zusammen. */
.daten dd{min-width:0;overflow-wrap:anywhere}
.sachseite .direkt{margin-bottom:1.4rem}
.sachseite .eyebrow a{color:inherit}

/* ── Flussverlauf ──────────────────────────────────────────────────────────
   ⚠️ `vector-effect: non-scaling-stroke` steht im Markup, nicht hier — es ist
   ein SVG-Attribut, keine Stileigenschaft. Es hält die Linie in
   Bildschirmpunkten gleich dick, egal wie nah der Ausschnitt heranzoomt: Der
   Nil spannt über 40 Längengrade, die Themse über einen halben. */
.fk-lauf{fill:none;stroke:#1d6fa5;stroke-width:2.4px;stroke-linecap:round;
  stroke-linejoin:round}
.flusskarte svg{max-height:26rem;margin:0 auto;display:block}

/* Die Einordnung steht zwischen Überschrift und Antwortsatz — grau, kleiner,
   ohne Rahmen: Sie ordnet ein, sie behauptet nichts. */
.einordnung{color:#6b7280;font-size:1.02rem;margin:-.4rem 0 1rem}

/* ── Lage-Kacheln ──────────────────────────────────────────────────────────
   Vier Zahlen, die zusammen ein Gefühl für die Lage geben: Abstand zum
   Äquator, zu beiden Polen und zum Nullmeridian. Als Fliesstext wären es
   vier Nebensätze, als Kacheln vier Blicke. */
.lagekacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
  gap:.7rem;list-style:none;padding:0;margin:1.2rem 0}
.lagekacheln li{background:var(--marke-hell,#eef5f1);border-radius:.6rem;
  padding:.9rem .8rem;text-align:center}
.lk-wert{display:block;font-size:1.5rem;font-weight:700;color:#12563a;
  line-height:1.15;font-variant-numeric:tabular-nums}
.lk-was{display:block;font-size:.8rem;color:#5b6b62;margin-top:.15rem}
/* Die Zwischenüberschriften im Lage-Block tragen weniger Gewicht als ein h2 —
   sie gliedern innerhalb eines Gedankens, sie eröffnen keinen neuen. */
.sachseite h3{font-size:1.06rem;margin:1.6rem 0 .3rem}

/* ── Flaggen ───────────────────────────────────────────────────────────────
   Der dünne Rahmen ist nötig, nicht Zierde: Ohne ihn verschwindet die weisse
   Fläche der japanischen Flagge im weissen Hintergrund, und Polen sieht aus
   wie ein halbes Rechteck. */
.land-kopf{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.land-kopf h1{margin:0}
.flagge{width:5rem;height:auto;border:1px solid #d6dbd8;border-radius:.2rem;
  box-shadow:0 1px 3px rgba(0,0,0,.08)}
.chips-flaggen a{display:inline-flex;align-items:center;gap:.45rem}
.chips-flaggen img{width:1.35rem;height:auto;border:1px solid #d6dbd8;border-radius:.1rem}

/* Das Zählpixel — sichtbar wäre es ein Punkt, unsichtbar ist es nichts. */
.zaehler{position:absolute;left:-9999px;width:1px;height:1px}

/* ── Balkendiagramm der Auswertung ─────────────────────────────────────────
   ⚠️ ZWANZIG HÖHENSTUFEN STATT EINES style-ATTRIBUTS. Die eigene
   Inhaltsrichtlinie erlaubt nur `style-src 'self'`; eine inline gesetzte
   Höhe würde wortlos verworfen und alle Balken wären gleich hoch. Fünf
   Prozent Schrittweite sind für zwanzig Balken feiner, als das Auge
   unterscheidet. */
.balken{display:flex;align-items:flex-end;gap:.25rem;height:9rem;margin:1rem 0}
.balken-tag{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;height:100%}
.balken-saeule{width:100%;background:#12563a;border-radius:.15rem .15rem 0 0;
  min-height:2px}
.balken-datum{font-size:.68rem;color:#6b7280;margin-top:.2rem}
.balken-saeule.s1{height:5%}
.balken-saeule.s2{height:10%}
.balken-saeule.s3{height:15%}
.balken-saeule.s4{height:20%}
.balken-saeule.s5{height:25%}
.balken-saeule.s6{height:30%}
.balken-saeule.s7{height:35%}
.balken-saeule.s8{height:40%}
.balken-saeule.s9{height:45%}
.balken-saeule.s10{height:50%}
.balken-saeule.s11{height:55%}
.balken-saeule.s12{height:60%}
.balken-saeule.s13{height:65%}
.balken-saeule.s14{height:70%}
.balken-saeule.s15{height:75%}
.balken-saeule.s16{height:80%}
.balken-saeule.s17{height:85%}
.balken-saeule.s18{height:90%}
.balken-saeule.s19{height:95%}
.balken-saeule.s20{height:100%}
.stat-spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:0 2rem}
.stat-spalten .block{border:0;padding-top:0}
/* Ein einzelner Tag soll nicht die ganze Breite füllen. */
.balken-tag{max-width:3rem}

/* ── Häufige Fragen ────────────────────────────────────────────────────────
   Frage fett über der Antwort, nicht daneben: Eine Frage ist eine
   Überschrift, keine Tabellenspalte. */
.fragen{margin:0}
.fragen>div{padding:.9rem 0;border-bottom:1px solid var(--linie,#e5e7eb)}
.fragen>div:last-child{border-bottom:0}
.fragen dt{font-weight:600;margin:0 0 .3rem}
.fragen dd{margin:0;color:#374151}
/* Der Ortspunkt einer einzelnen Stadt: weiss umrandet, damit er sich auch
   auf der eingefärbten Landesfläche abhebt. */
.wk-ortspunkt{fill:#0f3d2a;stroke:#fff;stroke-width:1.1}

/* ── Wappen ────────────────────────────────────────────────────────────────
   Anders als eine Flagge braucht ein Wappen keinen Rahmen: Es hat eine
   eigene Kontur und einen durchsichtigen Hintergrund. Die feste Höhe hält
   die Überschrift ruhig, egal ob das Wappen hoch oder breit ist. */
.wappen{height:4.2rem;width:auto;max-width:4.6rem;object-fit:contain}

/* ── Einstieg auf der Startseite ───────────────────────────────────────────
   Sieben Spalten mit je fünfundzwanzig Buchstaben wären untereinander eine
   Wand. Nebeneinander sind sie ein Register: Man sieht auf einen Blick,
   dass es zu jeder Spalte jeden Buchstaben gibt. */
.einstieg{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:1.2rem 1.6rem;margin:1.2rem 0}
.einstieg-spalte h3{font-size:.94rem;margin:0 0 .4rem;color:#12563a}
.buchstaben-klein{gap:.22rem}
.buchstaben-klein a{min-width:1.55rem;height:1.55rem;line-height:1.55rem;
  font-size:.8rem;padding:0}

/* ── Übersicht über eine Art: /land/, /stadt/, /fluss/ ────────────────────
   Kacheln statt Aufzählung: Bei 236 Ländern zählt, wie schnell das Auge
   einen Namen findet, nicht wie ordentlich die Zeilen stehen. */
.kachelliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:.35rem .8rem;list-style:none;padding:0;margin:.8rem 0}
.kachelliste li{display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;padding:.3rem .1rem;border-bottom:1px solid #eef1ef;min-width:0}
.kachelliste a{display:flex;align-items:center;gap:.45rem;min-width:0;
  text-decoration:none;color:#12563a}
.kachelliste a:hover .kachel-name{text-decoration:underline}
.kachel-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kachel-flagge{flex:none;width:1.4rem;height:auto;border:1px solid #e2e6e3;
  border-radius:2px}
.kachel-zahl{flex:none;font-size:.8rem;color:#6b7772;font-variant-numeric:tabular-nums}

/* ── Reiter Deutschland · Europa · weltweit ───────────────────────────────
   Ohne JavaScript: drei Radioknöpfe stehen vor den Abschnitten, ihre
   Beschriftungen sind die Reiter, der Rest ist Geschwisterauswahl. Der
   Inhalt bleibt vollständig im Dokument.

   ⚠️ DIE KNÖPFE NICHT MIT display:none VERSTECKEN. Dann sind sie für die
   Tastatur nicht mehr erreichbar und der Reiter lässt sich nur noch mit der
   Maus umschalten. Aus dem Bild geschoben bleiben sie bedienbar. */
.reiter-knopf{position:absolute;opacity:0;width:1px;height:1px;
  clip-path:inset(50%);pointer-events:none}
.reiter-leiste{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.4rem 0 .2rem;
  border-bottom:2px solid #e6ebe8;padding-bottom:0}
.reiter-schild{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  padding:.5rem .9rem;border:1px solid #e2e6e3;border-bottom:none;
  border-radius:6px 6px 0 0;background:#f6f8f7;color:#3d4d47;font-size:.92rem;
  position:relative;top:2px}
.reiter-schild:hover{background:#eef3f0;color:#12563a}
.reiter-schild .anzahl{font-size:.8rem;color:#6b7772;font-variant-numeric:tabular-nums}
.reiter-blatt{display:none}
#reiter-de:checked ~ .reiter-leiste [for="reiter-de"],
#reiter-eu:checked ~ .reiter-leiste [for="reiter-eu"],
#reiter-welt:checked ~ .reiter-leiste [for="reiter-welt"]{
  background:#fff;border-color:#12563a;border-bottom:2px solid #fff;
  color:#12563a;font-weight:600}
#reiter-de:checked ~ .reiter-blatt-de,
#reiter-eu:checked ~ .reiter-blatt-eu,
#reiter-welt:checked ~ .reiter-blatt-welt{display:block}
/* Tastaturbedienung sichtbar machen — sonst weiss niemand, wo er steht. */
.reiter-knopf:focus-visible ~ .reiter-leiste .reiter-schild{outline:2px solid #12563a;
  outline-offset:2px}

/* ── Sachseite mit Steckbrief ─────────────────────────────────────────────
   Text links, Kasten rechts. Der Kasten bleibt beim Scrollen stehen, solange
   Platz ist; darunter rutscht er unter den Aufmacher.

   ⚠️ DIE BREITE VON `main` REICHT DAFÜR NICHT. 56rem sind für eine Spalte
   Fliesstext gedacht; mit Kasten daneben blieben für den Text 34rem. Diese
   Seiten dürfen breiter werden — aber nur diese. */
.mit-steckbrief{display:grid;gap:1.6rem 2.2rem;align-items:start}
@media (min-width:62rem){
  main:has(.mit-steckbrief){max-width:72rem}
  .mit-steckbrief{grid-template-columns:minmax(0,1fr) 20rem}
  .steckbrief{position:sticky;top:1rem}
}
.mit-steckbrief .haupt{min-width:0}
.steckbrief{border:1px solid #dfe5e1;border-radius:10px;overflow:hidden;
  background:#fff}
.steckbrief-kopf{background:#12563a;color:#fff;padding:.7rem .9rem}
.steckbrief-kopf strong{display:block;font-size:1.02rem}
.steckbrief-kopf span{display:block;font-size:.8rem;opacity:.85;margin-top:.1rem}
.steckbrief-karte{padding:.6rem .6rem 0}
.steckbrief-karte figure{margin:0}
.steckbrief-karte svg{width:100%;height:auto;display:block}
.steckbrief-karte figcaption{font-size:.74rem;color:#6b7772;padding:.3rem 0 .1rem}
.steckbrief-daten{width:100%;border-collapse:collapse;font-size:.86rem}
.steckbrief-daten th{text-align:left;font-weight:500;color:#5b6862;
  padding:.42rem .9rem;vertical-align:top;width:45%}
.steckbrief-daten td{padding:.42rem .9rem;vertical-align:top;
  font-variant-numeric:tabular-nums}
.steckbrief-daten tr+tr th,.steckbrief-daten tr+tr td{border-top:1px solid #eef1ef}

/* ── Kennzahlen: die zwei bis vier Zahlen, die den Gegenstand ausmachen ─── */
.kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));
  gap:0;list-style:none;padding:0;margin:1.2rem 0 1.6rem;
  border:1px solid #e2e6e3;border-radius:8px;overflow:hidden;background:#fbfcfb}
.kennzahlen li{padding:.7rem .9rem;border-right:1px solid #e2e6e3}
.kennzahlen li:last-child{border-right:none}
.kz-label{display:block;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.04em;color:#6b7772}
.kz-wert{display:block;font-size:1.32rem;font-weight:600;color:#12563a;
  margin-top:.15rem;font-variant-numeric:tabular-nums}
.kz-einheit{font-size:.86rem;font-weight:400;color:#5b6862;margin-left:.15rem}
@media (max-width:40rem){
  .kennzahlen li{border-right:none;border-bottom:1px solid #e2e6e3}
  .kennzahlen li:last-child{border-bottom:none}
}
.quellen{border-top:1px solid #eef1ef}


/* Die Einordnungszeile unter jeder Erdteil-Überschrift. */
.erdteil-zeile{font-size:.88rem;color:#5b6862;margin:.2rem 0 .6rem}

/* ── Die richtige Karte, auf Wunsch ───────────────────────────────────────
   Zugeklappt kostet sie nichts: Der Rahmen lädt erst, wenn er sichtbar wird,
   und sichtbar wird er erst beim Aufklappen. */
.karte-erkunden{margin:.8rem 0 0;border:1px solid #dfe5e1;border-radius:8px;
  background:#fbfcfb}
.karte-erkunden>summary{cursor:pointer;padding:.6rem .9rem;font-size:.9rem;
  color:#12563a;list-style:none;display:flex;align-items:center;gap:.5rem}
.karte-erkunden>summary::-webkit-details-marker{display:none}
.karte-erkunden>summary::before{content:"⊕";font-size:1.1rem;line-height:1}
.karte-erkunden[open]>summary::before{content:"⊖"}
.karte-erkunden>summary:hover{background:#f2f6f4}
.karte-rahmen{position:relative;padding-top:66%;margin:0 .6rem}
.karte-rahmen iframe{position:absolute;inset:0;width:100%;height:100%;
  border:0;border-radius:6px}
.karte-erkunden .meta{padding:.5rem .9rem .7rem;margin:0;font-size:.74rem}

/* Nachbarorte auf der Karte — sichtbar, aber hinter dem Hauptpunkt. */
.wk-umfeld circle{fill:#8ca39a;opacity:.85}
.wk-umfeld text{fill:#5b6862;font-family:inherit;paint-order:stroke;
  stroke:#eaf0f3;stroke-width:.5;stroke-linejoin:round}

/* Nachbarländer: erkennbar, aber deutlich hinter dem Land selbst. */
.wk-nachbar{fill:#c3d3ca;stroke:#fff;stroke-width:.4;stroke-linejoin:round}

/* ══ Wissen sichtbar machen ═══════════════════════════════════════════════
   Die Seiten waren Tabellen mit Text drumherum. Was hängenbleibt, ist der
   Vergleich: ein Podest, ein Balken, ein Satz zum Weitererzählen. */

/* ── Podest: Gold in die Mitte ──────────────────────────────────────────── */
.podest{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;
  align-items:end;list-style:none;padding:0;margin:1.4rem 0 1.8rem}
.podest li{display:flex;flex-direction:column;align-items:center;gap:.15rem;
  padding:.7rem .5rem;border-radius:8px 8px 0 0;text-align:center;
  background:#eef3f0;border:1px solid #dfe5e1;border-bottom:3px solid #c3d3ca}
/* ⚠️ `li.podest-1` UND NICHT `.podest-1`. Die Grundregel oben lautet
   `.podest li` — eine Klasse plus ein Element und damit spezifischer als
   eine Klasse allein. Das Gold-Podest bekam deshalb den grauen Hintergrund
   der Grundregel und weissen Text darauf: unlesbar. */
li.podest-1{background:#12563a;border-color:#12563a;border-bottom-color:#0d4530;
  padding-top:1.5rem}
li.podest-1 .podest-name{color:#fff}
li.podest-1 .podest-wert,li.podest-1 .podest-zusatz{color:#c9e3d6}
li.podest-1 .podest-rang{background:#f5c542;color:#3d2f00}
li.podest-2{padding-top:1.1rem}
li.podest-2 .podest-rang{background:#cfd8d3;color:#3d4d47}
li.podest-3 .podest-rang{background:#d8bfa3;color:#4a3520}
.podest-rang{display:inline-flex;align-items:center;justify-content:center;
  width:1.5rem;height:1.5rem;border-radius:50%;font-size:.8rem;font-weight:600}
.podest-name{font-weight:600;font-size:.98rem;color:#12563a;
  text-decoration:none;line-height:1.25}
.podest-name:hover{text-decoration:underline}
.podest-wert{font-size:.86rem;color:#5b6862;font-variant-numeric:tabular-nums}
.podest-zusatz{font-size:.74rem;color:#6b7772}
@media (max-width:32rem){
  li.podest-1{padding-top:1rem}li.podest-2{padding-top:.8rem}
  .podest-name{font-size:.86rem}
}

/* ── Vergleichsbalken ──────────────────────────────────────────────────────
   ⚠️ DIE BREITE KOMMT ÜBER `data-w`, NICHT ÜBER `style`. Die
   Inhaltsrichtlinie erlaubt kein inline-style; hundert Regeln für hundert
   Prozentwerte sind der Preis dafür und kosten komprimiert fast nichts. */
.vergleich{list-style:none;padding:0;margin:1.1rem 0}
.vergleich li{display:grid;grid-template-columns:minmax(6rem,10rem) 1fr auto;
  gap:.6rem;align-items:center;padding:.25rem 0}
.vgl-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.9rem}
.vgl-name a{color:#12563a}
.vgl-balken{background:#eef1ef;border-radius:3px;height:.85rem;overflow:hidden}
.vgl-fuellung{display:block;height:100%;background:#8ca39a;border-radius:3px}
.vgl-hervor .vgl-fuellung{background:#12563a}
.vgl-hervor .vgl-name{font-weight:600}
.vgl-wert{font-size:.84rem;color:#5b6862;font-variant-numeric:tabular-nums;
  white-space:nowrap}
@media (max-width:34rem){
  .vergleich li{grid-template-columns:1fr auto;grid-template-areas:
    "name wert" "balken balken";gap:.15rem .5rem}
  .vgl-name{grid-area:name}.vgl-wert{grid-area:wert}
  .vgl-balken{grid-area:balken;height:.6rem;margin-bottom:.35rem}
}

/* ── „Zum Merken" ─────────────────────────────────────────────────────────
   ⚠️ SEITENKANTE NICHT ABRUNDEN. Ein farbiger Streifen an der Seite bleibt
   eckig — abgerundet sieht er aus wie ein Fehler im Rahmen. */
.wusstest{background:#fdfaf2;border:1px solid #efe4cb;border-left:4px solid #d9a441;
  border-radius:0 8px 8px 0;padding:.8rem 1rem;margin:1.4rem 0}
.wusstest-kopf{margin:0 0 .35rem;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.05em;color:#8a6a1f;font-weight:600}
.wusstest ul{margin:0;padding-left:1.1rem}
.wusstest li{margin:.3rem 0;font-size:.94rem;line-height:1.45}
.wusstest li::marker{color:#d9a441}

/* Balkenbreiten 1–100 %, siehe oben. */
.vgl-fuellung[data-w="1"]{width:1%}.vgl-fuellung[data-w="2"]{width:2%}.vgl-fuellung[data-w="3"]{width:3%}.vgl-fuellung[data-w="4"]{width:4%}.vgl-fuellung[data-w="5"]{width:5%}.vgl-fuellung[data-w="6"]{width:6%}.vgl-fuellung[data-w="7"]{width:7%}.vgl-fuellung[data-w="8"]{width:8%}.vgl-fuellung[data-w="9"]{width:9%}.vgl-fuellung[data-w="10"]{width:10%}.vgl-fuellung[data-w="11"]{width:11%}.vgl-fuellung[data-w="12"]{width:12%}.vgl-fuellung[data-w="13"]{width:13%}.vgl-fuellung[data-w="14"]{width:14%}.vgl-fuellung[data-w="15"]{width:15%}.vgl-fuellung[data-w="16"]{width:16%}.vgl-fuellung[data-w="17"]{width:17%}.vgl-fuellung[data-w="18"]{width:18%}.vgl-fuellung[data-w="19"]{width:19%}.vgl-fuellung[data-w="20"]{width:20%}.vgl-fuellung[data-w="21"]{width:21%}.vgl-fuellung[data-w="22"]{width:22%}.vgl-fuellung[data-w="23"]{width:23%}.vgl-fuellung[data-w="24"]{width:24%}.vgl-fuellung[data-w="25"]{width:25%}.vgl-fuellung[data-w="26"]{width:26%}.vgl-fuellung[data-w="27"]{width:27%}.vgl-fuellung[data-w="28"]{width:28%}.vgl-fuellung[data-w="29"]{width:29%}.vgl-fuellung[data-w="30"]{width:30%}.vgl-fuellung[data-w="31"]{width:31%}.vgl-fuellung[data-w="32"]{width:32%}.vgl-fuellung[data-w="33"]{width:33%}.vgl-fuellung[data-w="34"]{width:34%}.vgl-fuellung[data-w="35"]{width:35%}.vgl-fuellung[data-w="36"]{width:36%}.vgl-fuellung[data-w="37"]{width:37%}.vgl-fuellung[data-w="38"]{width:38%}.vgl-fuellung[data-w="39"]{width:39%}.vgl-fuellung[data-w="40"]{width:40%}.vgl-fuellung[data-w="41"]{width:41%}.vgl-fuellung[data-w="42"]{width:42%}.vgl-fuellung[data-w="43"]{width:43%}.vgl-fuellung[data-w="44"]{width:44%}.vgl-fuellung[data-w="45"]{width:45%}.vgl-fuellung[data-w="46"]{width:46%}.vgl-fuellung[data-w="47"]{width:47%}.vgl-fuellung[data-w="48"]{width:48%}.vgl-fuellung[data-w="49"]{width:49%}.vgl-fuellung[data-w="50"]{width:50%}.vgl-fuellung[data-w="51"]{width:51%}.vgl-fuellung[data-w="52"]{width:52%}.vgl-fuellung[data-w="53"]{width:53%}.vgl-fuellung[data-w="54"]{width:54%}.vgl-fuellung[data-w="55"]{width:55%}.vgl-fuellung[data-w="56"]{width:56%}.vgl-fuellung[data-w="57"]{width:57%}.vgl-fuellung[data-w="58"]{width:58%}.vgl-fuellung[data-w="59"]{width:59%}.vgl-fuellung[data-w="60"]{width:60%}.vgl-fuellung[data-w="61"]{width:61%}.vgl-fuellung[data-w="62"]{width:62%}.vgl-fuellung[data-w="63"]{width:63%}.vgl-fuellung[data-w="64"]{width:64%}.vgl-fuellung[data-w="65"]{width:65%}.vgl-fuellung[data-w="66"]{width:66%}.vgl-fuellung[data-w="67"]{width:67%}.vgl-fuellung[data-w="68"]{width:68%}.vgl-fuellung[data-w="69"]{width:69%}.vgl-fuellung[data-w="70"]{width:70%}.vgl-fuellung[data-w="71"]{width:71%}.vgl-fuellung[data-w="72"]{width:72%}.vgl-fuellung[data-w="73"]{width:73%}.vgl-fuellung[data-w="74"]{width:74%}.vgl-fuellung[data-w="75"]{width:75%}.vgl-fuellung[data-w="76"]{width:76%}.vgl-fuellung[data-w="77"]{width:77%}.vgl-fuellung[data-w="78"]{width:78%}.vgl-fuellung[data-w="79"]{width:79%}.vgl-fuellung[data-w="80"]{width:80%}.vgl-fuellung[data-w="81"]{width:81%}.vgl-fuellung[data-w="82"]{width:82%}.vgl-fuellung[data-w="83"]{width:83%}.vgl-fuellung[data-w="84"]{width:84%}.vgl-fuellung[data-w="85"]{width:85%}.vgl-fuellung[data-w="86"]{width:86%}.vgl-fuellung[data-w="87"]{width:87%}.vgl-fuellung[data-w="88"]{width:88%}.vgl-fuellung[data-w="89"]{width:89%}.vgl-fuellung[data-w="90"]{width:90%}.vgl-fuellung[data-w="91"]{width:91%}.vgl-fuellung[data-w="92"]{width:92%}.vgl-fuellung[data-w="93"]{width:93%}.vgl-fuellung[data-w="94"]{width:94%}.vgl-fuellung[data-w="95"]{width:95%}.vgl-fuellung[data-w="96"]{width:96%}.vgl-fuellung[data-w="97"]{width:97%}.vgl-fuellung[data-w="98"]{width:98%}.vgl-fuellung[data-w="99"]{width:99%}.vgl-fuellung[data-w="100"]{width:100%}

/* Kategorienlisten: Name fett, Erklärung dahinter. */
.kat-liste{list-style:none;padding:0;margin:.9rem 0}
.kat-liste li{padding:.45rem 0;border-bottom:1px solid #eef1ef;
  display:flex;flex-wrap:wrap;gap:.15rem .6rem;align-items:baseline}
.kat-liste li:last-child{border-bottom:none}
.kat-liste strong{color:#12563a;min-width:11rem}
.kat-liste span{color:#4a5651;font-size:.92rem;flex:1}
.kat-regeln{padding-left:1.2rem}
.kat-regeln li{margin:.6rem 0;line-height:1.55}

/* ── Spielvorlage ─────────────────────────────────────────────────────────
   Am Bildschirm eine Seite mit Erklärung, auf Papier ein leeres Blatt. */
.vorlage-tabelle{width:100%;border-collapse:collapse;table-layout:fixed}
.vorlage-tabelle th,.vorlage-tabelle td{border:1px solid #b9c4be;padding:.5rem .4rem;
  text-align:left;font-size:.9rem}
.vorlage-tabelle th{background:#eef3f0;font-weight:600;color:#12563a;
  font-size:.82rem}
.vorlage-tabelle tbody td{height:2.1rem}
.vorlage-buchstabe{width:5.5rem;background:#f6f8f7}
.vorlage-punkte{width:4.5rem;background:#f6f8f7}
.vorlage-knopf{margin:1rem 0}

/* ⚠️ AUF PAPIER GEHÖRT NUR DAS BLATT. Wer druckt, will ein Spielformular —
   keine Kopfzeile, keine Navigation, keinen Erklärtext und keine Farben, die
   eine Patrone leeren. */
@media print{
  /* ⚠️ DIE SILHOUETTE STEHT AUSSERHALB DES FOOTERS und wurde deshalb
     mitgedruckt — ein leeres Spielblatt mit einer Stadtansicht auf der
     unteren Blatthälfte. Sie gehört in dieselbe Aufzählung wie alles andere,
     was am Bildschirm schmückt und auf Papier stört. */
  header,footer,nav,.silhouette,.keindruck,.wusstest,.block,.eyebrow,
  .direct-answer{display:none !important}
  main{max-width:none;padding:0}
  h1{font-size:16pt;margin:0 0 .6rem}
  .vorlage-blatt{border:none;overflow:visible}
  .vorlage-tabelle th{background:none;border-color:#000;color:#000}
  .vorlage-tabelle td{border-color:#000}
  .vorlage-buchstabe,.vorlage-punkte{background:none}
  .vorlage-tabelle tbody td{height:2.4rem}
  a{text-decoration:none;color:#000}
}

/* Wegweiser auf der Startseite: Ziel fett, ein Satz dazu. */
.wegweiser{list-style:none;padding:0;margin:1rem 0}
.wegweiser li{padding:.6rem 0;border-bottom:1px solid #eef1ef}
.wegweiser li:last-child{border-bottom:none}
.wegweiser a{font-weight:600;font-size:1.02rem}
.wegweiser span{display:block;color:#4a5651;font-size:.92rem;margin-top:.15rem;
  line-height:1.5}

/* Namen der Nachbarländer auf der Karte — mit hellem Rand, damit sie über
   jeder Fläche lesbar bleiben. */
.wk-nname{fill:#3d4d47;text-anchor:middle;font-family:inherit;
  paint-order:stroke;stroke:#eaf0f3;stroke-width:.6;stroke-linejoin:round;
  pointer-events:none}

/* Der Landesname auf der Einzelkarte — heller, weil er auf der dunklen
   Fläche des hervorgehobenen Landes steht. */
.wk-lname{fill:#fff;stroke:#12563a;stroke-width:.5;font-weight:600}

/* ── Aufgeklappte Karte: aus dem Steckbrief heraus ────────────────────────
   ⚠️ IM STECKBRIEF IST DIE KARTE ZWANZIG ZEICHEN BREIT. Aufgeklappt zeigte
   sie einen Ausschnitt von Shanghai, in dem gerade drei Straßen Platz hatten
   — für „erkunden" ist das zu wenig. Beim Öffnen wächst sie deshalb über die
   Spalte hinaus und legt sich über die Seite.

   ⚠️ OHNE JAVASCRIPT. `<details open>` ist ein Zustand, den CSS sieht; mehr
   braucht es nicht. Schließen geht über dieselbe Zeile, mit der man geöffnet
   hat, und über die Rücktaste des Browsers ohnehin nicht — es ist kein
   eigener Verlaufsschritt. */
@media (min-width:62rem){
  .steckbrief .karte-erkunden[open]{
    position:fixed;
    inset:3.5rem 3vw 3.5rem 3vw;
    z-index:40;
    background:#fff;
    box-shadow:0 1.2rem 3rem rgba(0,0,0,.28);
    border-radius:12px;
    display:flex;
    flex-direction:column;
    overflow:auto;
  }
  .steckbrief .karte-erkunden[open]>summary{
    position:sticky;top:0;background:#12563a;color:#fff;z-index:1;
    padding:.75rem 1.1rem;font-size:1rem;border-radius:12px 12px 0 0}
  .steckbrief .karte-erkunden[open]>summary:hover{background:#0d4530}
  .steckbrief .karte-erkunden[open]>summary::before{content:"✕";font-size:.95rem}
  /* ⚠️ `flex:1` REICHT HIER NICHT. Die Höhe des Rahmens entsteht sonst über
     `padding-top:66%`, und das iframe darin liegt absolut. Nimmt man das
     Polster weg und setzt stattdessen `flex`, bleibt die Höhe null — die
     Karte war aufgeklappt und leer. Eine gerechnete Höhe ist hier ehrlicher:
     der Bildschirm minus Kopf- und Fußzeile des Kastens. */
  .steckbrief .karte-erkunden[open] .karte-rahmen{
    padding-top:0;margin:.7rem 1.1rem 0;
    height:calc(100vh - 13rem)}
}
.karte-erkunden .ke-auf{display:none}
.karte-erkunden[open] .ke-zu{display:none}
.karte-erkunden[open] .ke-auf{display:inline}

/* ══ Zeichensatz ═══════════════════════════════════════════════════════════
   Die Zeichen liegen als <symbol> in der Seite (siehe layout.php); hier steht
   nur, wie gross und in welcher Farbe sie erscheinen. `currentColor` heisst:
   Sie nehmen die Schriftfarbe ihrer Umgebung an — dasselbe Zeichen ist im
   Formular grün und in der Fusszeile grau, ohne zweimal zu existieren. */
.ikonen-vorrat{position:absolute;width:0;height:0;overflow:hidden}
.ikon{width:1.25em;height:1.25em;vertical-align:-.25em;flex:none}
.feld-titel .ikon{color:var(--marke);margin-right:.4rem}

/* ══ Mehrspieler ═══════════════════════════════════════════════════════════
   Die Lobby und der Spieltisch teilen sich das Aussehen mit dem
   Einzelspieler — dieselbe Runde-Box, dieselben Felder, dieselbe Uhr. Neu
   ist nur, was es allein nicht gibt: der Einladungslink, die Mitspieler und
   die Auswertung mehrerer Zettel nebeneinander. */
.partie-schritt[hidden]{display:none}
.partie-felder{display:grid;gap:.9rem;margin:1rem 0}
@media(min-width:40rem){.partie-felder{grid-template-columns:1fr 1fr}}
.partie-knoepfe{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin:1rem 0}
.partie-trenner{border:0;border-top:1px solid var(--linie);margin:1.6rem 0}
.partie-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;background:var(--marke-hell);border-radius:.4rem;
  padding:.1rem .5rem}
.partie-link{display:flex;gap:.5rem;flex-wrap:wrap}
.partie-link input{flex:1 1 18rem;padding:.6rem .7rem;border:1px solid var(--linie);
  border-radius:.5rem;font:inherit;background:#fff;color:var(--grau)}
#a-tabelle h3{margin:1.4rem 0 .4rem;font-size:1rem}
#a-tabelle .liste-tabelle td{padding:.4rem .6rem}
.kein-treffer{color:var(--grau)}

/* ══ Die Silhouette über der Fusszeile ═════════════════════════════════════
   ⚠️ FREUNDLICHER, ABER NICHT LAUTER. Die Seite lebt davon, dass man sofort
   spielt oder sofort nachschlägt; alles, was den Blick vom Inhalt zieht,
   schadet ihr. Die Silhouette steht deshalb ganz unten, hinter dem letzten
   Absatz, in gedämpftem Grün — sie ist das Letzte, was man sieht, und nie
   das Erste. */
.silhouette{margin:3rem 0 -2px;line-height:0;color:var(--marke);pointer-events:none}
/* ⚠️ FESTE HÖHE SCHNEIDET OBEN AB. Bei 1265 Pixeln Breite und 128 Höhe
   steht das Bild im Verhältnis 9,9:1, die Zeichnung aber in 7,5:1 — der
   Browser beschnitt den Überstand, und mit ihm Kirchturmspitze und
   Berggipfel. Mit `height:auto` behält die Zeichnung ihr Verhältnis und
   wird nie beschnitten.

   Nur auf schmalen Bildschirmen ist das falsch: 380 Pixel Breite ergäben
   51 Pixel Höhe, in denen nichts mehr zu erkennen wäre. Dort steht eine
   feste Höhe, und `slice` zeigt den linken Ausschnitt in voller Grösse —
   die Stadt und den Fluss. */
.silhouette svg{display:block;width:100%;height:auto}
@media(max-width:44rem){.silhouette svg{height:86px}}
.silhouette path{fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:.42}
/* Flächen tragen die Tiefe, Linien die Form. */
.silhouette .sil-flaeche{fill:currentColor;stroke:none;opacity:.09}
.silhouette .sil-wasser{fill:currentColor;stroke:none;opacity:.13}
.silhouette .sil-fein{opacity:.26;stroke-width:1.8}
.silhouette .sil-fluss path{opacity:.34}

/* Die Fusszeile schliesst an, ohne Kante dazwischen. */
.fuss{background:linear-gradient(to bottom,var(--marke-hell),var(--papier))}

/* ══ Ratespiele ════════════════════════════════════════════════════════════
   Übernommen von stadtplan.info — dieselben Spiele, andere Daten. Die
   Farben stammen aus den hiesigen Variablen, damit Flaggenquiz und
   Lösungsseiten nicht wie zwei Websites aussehen.

   ⚠️ DIE FARBNAMEN WAREN ANDERE. Dort heissen sie --akzent, --fg, --hell,
   --line, --muted; hier --marke, --text, --marke-hell, --linie, --grau.
   Unübersetzt übernommen wären die Regeln nicht falsch, sondern wirkungslos
   gewesen — unsichtbare Rahmen, schwarze Schrift auf schwarzem Grund. */
.spiel-frage { margin: 0; flex: 1 1 18rem; font-size: 1.05rem; }
/* ── Ratespiele (Wappen, Umriss, Duell, Reihenfolge, Entfernung) ────────── */
.quiz-bereich { margin: 0 0 1rem; text-align: center; }
.quiz-wappen { max-height: 12rem; width: auto; margin: 0 auto 1rem; display: block; }
.quiz-umriss { width: 100%; max-width: 14rem; height: auto; margin: 0 auto 1rem; display: block; }
.quiz-umriss path { fill: var(--marke); }
.quiz-antworten { display: grid; grid-template-columns: 1fr; gap: .5rem; max-width: 30rem; margin: 0 auto; }
/* ⚠️ DIESE ZEILE SCHLIESST DEN @media-BLOCK. Sechsmal fehlte hier die
   Klammer — beim Übernehmen der Ratespiel-Stile von stadtplan.info ist sie
   verloren gegangen. Ein offener @media-Block endet erst am Dateiende:
   Alles, was danach steht, galt nur noch unter seiner Bedingung. Deshalb
   lag die Klickebene des Kartenspiels neben der Karte statt darauf —
   `position:absolute` steckte in einem Block für Leute, die Bewegung
   abbestellt haben. CSS meldet so etwas nicht; es wirkt einfach nicht. */
@media (min-width: 34rem) { .quiz-antworten { grid-template-columns: 1fr 1fr; } }
.quiz-antwort { padding: .6rem 1rem; font-size: 1rem; font-family: inherit; cursor: pointer;
  background: #fff; border: 1px solid var(--linie); border-radius: .5rem; text-align: left; }
.quiz-antwort:hover { border-color: var(--marke); background: var(--marke-hell); }
.quiz-duell, .quiz-reihe { display: flex; flex-wrap: wrap; justify-content: center;
  align-items: stretch; gap: .6rem; }
.quiz-stadt { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 10rem; max-width: 16rem;
  padding: .9rem 1rem; font-family: inherit; cursor: pointer; text-align: center;
  background: #fff; border: 1px solid var(--linie); border-radius: .6rem; }
.quiz-stadt.statisch { cursor: default; }
.quiz-stadt:not(.statisch):not(:disabled):hover { border-color: var(--marke); background: var(--marke-hell); }
.quiz-stadt-name { font-weight: 700; font-size: 1.05rem; color: var(--marke); }
.quiz-stadt-land { font-size: .8rem; color: var(--grau); }
.quiz-stadt-zahl { font-size: .9rem; font-variant-numeric: tabular-nums; margin-top: .2rem; }
.quiz-rang { font-size: .8rem; color: var(--grau); min-height: 1rem; }
.quiz-pfeil { align-self: center; font-size: 1.6rem; color: var(--grau); }
.quiz-schaetzung { max-width: 24rem; margin: 1rem auto 0; }
.quiz-rueckmeldung { min-height: 1.6rem; text-align: center; font-size: .95rem; margin: 0 0 1rem; }
.quiz-rueckmeldung.richtig { color: #0f8a6a; }
.quiz-rueckmeldung.falsch { color: #c1121c; }
/* Punktestand als Anzeigetafel statt als Randnotiz. */
.spiel-tafel {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.6rem;
  margin: 1rem 0 0; padding: .7rem 1rem;
  background: rgba(255,255,255,.72); border-radius: .6rem;
}
.spiel-tafel-wert { display: flex; align-items: baseline; gap: .4rem; }
.spiel-tafel-wert b {
  font-size: 1.9rem; line-height: 1; color: var(--marke); font-variant-numeric: tabular-nums;
}
.spiel-tafel-wert span { font-size: .82rem; color: var(--grau); }
/* Punktezuwachs: die Zahl wächst kurz an. */
.spiel-tafel-wert b.zaehlt { animation: zaehler .45s ease-out; }
/* Rundenfortschritt als Punktreihe — auf einen Blick ablesbar. */
.spiel-punkte-reihe { display: flex; gap: .3rem; margin-left: auto; }
.spiel-punkte-reihe i {
  width: .62rem; height: .62rem; border-radius: 50%;
  background: rgba(0,77,73,.18); transition: background .25s, transform .25s;
}
.spiel-punkte-reihe i.getroffen { background: #4a7c20; transform: scale(1.25); }
.spiel-punkte-reihe i.daneben   { background: #c9553c; }
.spiel-punkte-reihe i.jetzt     { background: var(--marke); transform: scale(1.4); }
/* Der Startknopf ist die Hauptsache, solange nichts läuft. */
/* ⚠️ DIE SCHRIFTFARBE WAR VON STADTPLAN.INFO ÜBERNOMMEN UND PASSTE NICHT.
   Dort ist die Akzentfarbe ein helles Grün, auf dem dunkle Schrift (#16340f)
   richtig ist. Hier ist --marke ein dunkles Grün: Kontrast 2,24:1, also
   unlesbar — man sah den Knopf, aber nicht, was darauf steht. Mit Weiss sind
   es 6,12:1. Genau die Falle, vor der der Kommentar am Anfang des
   Ratespiel-Abschnitts warnt: Die Farbnamen wurden übersetzt, die dazu
   passenden festen Farbwerte nicht.
   Auch der Schatten war olivgrün (#8b9c24) — die Farbe eines anderen
   Projekts. */
.spiel-start-gross {
  display: block; margin: 1.2rem auto .4rem; padding: .95rem 2.4rem;
  font-size: 1.15rem; font-weight: 700;
  background: var(--marke); color: #fff;
  border: 0; border-radius: .6rem; cursor: pointer;
  box-shadow: 0 .25rem 0 #14472f;
  transition: transform .12s, box-shadow .12s, background .2s;
}
.spiel-start-gross:hover { background: #17573a; }
.spiel-start-gross:active { transform: translateY(.2rem); box-shadow: 0 .05rem 0 #14472f; }
des Browsers. */
.spiel-start-gross[hidden] { display: none; }
/* Antwortkarten. Sie fliegen nacheinander ein — die Verzögerung setzt das
   JS über --n, damit die Reihenfolge sichtbar wird. */
.quiz-antworten { display: grid; gap: .6rem; }
@media (min-width: 34rem) { .quiz-antworten { grid-template-columns: 1fr 1fr; } }
.quiz-antworten button {
  width: 100%; padding: .85rem 1rem; text-align: left;
  background: #fff; border: 2px solid #e2e7dc; border-radius: .6rem;
  font: inherit; font-weight: 600; color: var(--text); cursor: pointer;
  animation: karte-ein .32s cubic-bezier(.2,.9,.3,1.2) backwards;
  animation-delay: calc(var(--n, 0) * .07s);
  transition: border-color .18s, transform .12s, background .18s;
}
.quiz-antworten button:hover:not(:disabled) {
  border-color: var(--marke); transform: translateY(-2px); background: #fbfdf5;
}
.quiz-antworten button:disabled { cursor: default; }
/* Rückmeldung: richtig blitzt auf, falsch wackelt. */
.quiz-antworten button.ist-richtig {
  border-color: #4a7c20; background: #eef7e2; color: #2f5714;
  animation: treffer .5s ease-out;
}
.quiz-antworten button.ist-falsch {
  border-color: #c9553c; background: #fbeeea; color: #8d3722;
  animation: daneben .4s ease-out;
}
/* Abschluss mit Bewertung. */
.spiel-ende {
  text-align: center; padding: 1.6rem 1rem;
  background: linear-gradient(160deg, #f3f7e9, #e6f0ea);
  border-radius: .9rem; animation: karte-ein .4s ease-out;
}
.spiel-ende .note { font-size: 3rem; line-height: 1; color: var(--marke); font-weight: 700; }
.spiel-ende .note small { font-size: 1.1rem; color: var(--grau); font-weight: 400; }
.spiel-ende p { margin: .6rem 0 1rem; }
/* Wer Bewegung abbestellt hat, bekommt keine. Das ist keine Geschmacksfrage:
   Für manche Menschen lösen bewegte Flächen Übelkeit oder Anfälle aus. */
@media (prefers-reduced-motion: reduce) {
  .quiz-antworten button, .spiel-ende, .spiel-tafel-wert b.zaehlt,
  .quiz-antworten button.ist-richtig, .quiz-antworten button.ist-falsch {
    animation: none !important;
  }
  .spiel-punkte-reihe i { transition: none; }
}
/* Die zwei Karten im Duell dürfen Gewicht haben — sie sind das Spiel. */
.quiz-duell { display: grid; gap: .8rem; margin: .4rem 0 1rem; }
@media (min-width: 34rem) { .quiz-duell { grid-template-columns: 1fr 1fr; } }
.quiz-stadt {
  display: flex; flex-direction: column; gap: .25rem; align-items: center;
  padding: 1.5rem 1rem; background: #fff;
  border: 2px solid #e2e7dc; border-radius: .7rem;
  font: inherit; cursor: pointer;
  animation: karte-ein .34s cubic-bezier(.2,.9,.3,1.2) backwards;
  transition: border-color .18s, transform .12s, box-shadow .18s;
}
.quiz-stadt:nth-child(2) { animation-delay: .09s; }
.quiz-stadt:hover:not(:disabled) {
  border-color: var(--marke); transform: translateY(-3px);
  box-shadow: 0 .5rem 1.1rem rgba(0,77,73,.1);
}
.quiz-stadt-name { font-size: 1.35rem; font-weight: 700; color: var(--marke); }
.quiz-stadt-land { font-size: .85rem; color: var(--grau); }
.quiz-stadt-zahl { font-size: 1.05rem; font-weight: 700; min-height: 1.5em; }
.quiz-stadt.ist-richtig { border-color: #4a7c20; background: #eef7e2; animation: treffer .5s ease-out; }
.quiz-stadt.ist-falsch  { border-color: #c9553c; background: #fbeeea; animation: daneben .4s ease-out; }
@media (prefers-reduced-motion: reduce) { .quiz-stadt { animation: none !important; } }
/* Kacheln mit Zeichen — für Spiele und Werkzeuge gleichermaßen.
   Das Zeichen macht die Kachel auf einen Blick unterscheidbar, der Verlauf
   hebt den Block vom Rest der Seite ab. Die beiden Bereiche unterscheiden
   sich nur in der Verlaufsfarbe: Spiele limette, Werkzeuge petrol. */
.spiel-kachel, .wz-kachel {
  position: relative; overflow: hidden;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.spiel-kachel { background: linear-gradient(150deg, #f6f9ee 0%, #fff 62%); }
.spiel-kachel:hover, .wz-kachel:hover {
  transform: translateY(-3px); border-color: var(--marke);
  box-shadow: 0 .6rem 1.3rem rgba(0,77,73,.11);
}
/* ⚠️ DIE GRÖSSE KOMMT WEITER ÜBER `font-size`, obwohl hier seit dem 16.08.2026
   ein SVG steht und kein Emoji mehr: `.icon` misst in `em`, und `em` bezieht
   sich auf die Schriftgröße des Elements selbst. 2.6rem Schrift ergeben also
   2,6rem Kantenlänge — die Regel trägt unverändert weiter.

   ⚠️ DIE DECKKRAFT MUSSTE HOCH. Ein Emoji ist eine gefüllte Fläche, ein
   Strich-Icon sind ein paar Linien; bei denselben 22 % war davon fast nichts
   mehr zu sehen. */
.spiel-kachel-zeichen, .wz-kachel-zeichen {
  position: absolute; right: .7rem; top: .45rem;
  font-size: 2.6rem; line-height: 1; opacity: .3;
  transition: transform .25s, opacity .25s;
}
.spiel-kachel:hover .spiel-kachel-zeichen,
.wz-kachel:hover .wz-kachel-zeichen { transform: scale(1.12) rotate(-6deg); opacity: .48; }
.spiel-kachel .wz-titel, .wz-kachel .wz-titel { position: relative; padding-right: 2.4rem; }
@media (prefers-reduced-motion: reduce) {
  .spiel-kachel, .spiel-kachel-zeichen, .wz-kachel, .wz-kachel-zeichen { transition: none; }
.spiel-kachel:hover, .wz-kachel:hover { transform: none; }
.spiel-kachel:hover .spiel-kachel-zeichen,
  .wz-kachel:hover .wz-kachel-zeichen { transform: none; }
}

/* Beim Hauptstadt-Quiz steht der Ländername, wo sonst die Flagge hängt. */
.quiz-land{font-size:2rem;font-weight:700;color:var(--marke);margin:.6rem 0 1.2rem;
  line-height:1.15}
.quiz-land span{display:block;font-size:.9rem;font-weight:400;color:var(--grau)}

/* ══ „Wo liegt das?" ═══════════════════════════════════════════════════════
   Karte als Bild, Marken als Ebene darüber — beide mit demselben Ausschnitt,
   sonst liegt jeder Klick systematisch daneben. */
/* ⚠️ DIE BÜHNE GIBT DIE GRÖSSE VOR, NICHT DAS BILD. Die Klickebene liegt mit
   `inset:0` darauf; wäre die Bühne breiter als die Karte, läge sie versetzt
   und jeder Klick daneben.

   ⚠️ `width:fit-content` WAR HIER DER FALSCHE WEG, UND ZWAR AUF EINE ART, DIE
   MAN NICHT SIEHT: Die Bühne wollte sich nach dem Bild richten, das Bild mit
   `max-width:100%` nach der Bühne — eine SVG-Datei ohne feste Grösse bringt
   nichts mit, was den Kreis auflöst. Ergebnis war eine Karte von null mal
   null Pixeln. Jetzt entscheidet die Bühne aus dem Seitenverhältnis, das
   Skript setzt --seiten beim Kartenwechsel (Deutschland 0.75 hochkant, Welt
   2.32 quer). Die Höhenschranke von 68vh verhindert, dass die hochkante
   Deutschlandkarte über den Bildschirm hinauswächst. */
/* ⚠️ DER STARTWERT IST DEUTSCHLAND, WEIL DEUTSCHLAND VORGEWÄHLT IST — und
   er steht hier und nicht als style-Attribut im HTML: Die CSP der Seite
   erlaubt keine Inline-Stile. Über das CSSOM darf das Skript ihn ändern. */
.karte-buehne{position:relative;width:min(100%, calc(68vh * var(--seiten, .746)));
  aspect-ratio:var(--seiten, .746);
  margin:1rem auto;border:1px solid var(--linie);
  border-radius:.7rem;overflow:hidden;background:#dceaf2}
/* Das Bild füllt die Bühne aus; die Grösse steht schon oben.
   Kein Filter nötig: die -spiel.svg-Fassungen bringen den Kontrast mit. */
.karte-grund{display:block;width:100%;height:100%}
.karte-ebene{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;
  --mgroesse:5}
/* ⚠️ ALLE MASSE IN KARTENEINHEITEN, ALSO MITWACHSEND. `stroke-width:2` ist auf
   der Weltkarte (978 Einheiten breit) ein Haar und auf dem Europa-Ausschnitt
   (112 Einheiten) ein Balken quer über Polen. Das Skript setzt --mgroesse
   passend zum Ausschnitt; alles andere rechnet sich daraus.
   ⚠️ NICHT `--marke` NENNEN — so heisst bereits die Markenfarbe der Seite. */
.karte-marke circle{fill:var(--marke);stroke:#fff;
  stroke-width:calc(var(--mgroesse) * 0.32)}
.karte-marke.geklickt circle{fill:var(--warn)}
/* ⚠️ DIE EINHEIT MUSS DRAN, SONST IST DIE SCHRIFT RIESIG. `calc(1.2 * 2.2)`
   ohne Einheit ist für font-size ungültig; die Regel fällt weg, und der
   Browser nimmt seine 16 Pixel — im SVG sind das 16 Karteneinheiten. Auf dem
   Europa-Ausschnitt (112 Einheiten breit) füllte „Sarajevo" damit die halbe
   Karte. Bei stroke-width fiel es nicht auf, weil dort eine blosse Zahl
   erlaubt ist. `1px` heisst im SVG eine Karteneinheit, nicht ein
   Bildschirmpixel — genau das ist hier gemeint. */
.karte-marke text{font-size:calc(var(--mgroesse) * 2.2px);font-weight:600;
  fill:var(--text);text-anchor:middle;paint-order:stroke;stroke:#fff;
  stroke-width:calc(var(--mgroesse) * 0.55)}
.karte-linie{stroke:var(--grau);stroke-dasharray:calc(var(--mgroesse) * 0.8) calc(var(--mgroesse) * 0.6);
  stroke-width:calc(var(--mgroesse) * 0.26)}
.karte-rueck{min-height:1.6rem;display:flex;gap:.8rem;align-items:center;
  flex-wrap:wrap;font-weight:600}
.karte-rueck.gut{color:var(--gut)}
.karte-rueck.mittel{color:#c8781c}
.karte-rueck.daneben{color:var(--warn)}
.karte-rueck.ergebnis{font-size:1.15rem;color:var(--marke)}
.karte-rueck a{font-weight:400;font-size:.9rem}

/* ── Kategorienseite: spielbare Ideen ───────────────────────────────────────
   ⚠️ DIE MARKE MUSS LEISE SEIN. „geprüft" steht an 44 von 133 Ideen; in
   Signalfarbe wäre die Liste ein Flickenteppich. Sie sagt nur, dass hinter
   dieser Idee ein Verzeichnis steht — der Name daneben ist die Hauptsache. */
/* ⚠️ `.kat-liste span{flex:1}` GILT AUCH FÜR DIESE MARKE. Ohne die
   spezifischere Regel zog sie sich über die halbe Zeile, und der Erklärsatz
   rutschte in eine dritte Spalte — aus einer Liste wurde eine Tabelle mit
   einer riesigen leeren Fläche in der Mitte. */
.kat-liste .kat-geprueft{flex:0 0 auto;display:inline-block;
  margin-left:-.35rem;padding:.05rem .35rem;
  border-radius:.3rem;background:var(--marke-hell);color:var(--marke);
  font-size:.7rem;font-weight:600;vertical-align:.08em}
/* Der Name behält seine feste Breite; die Marke hängt sich rechts an ihn. */
.kat-liste li:has(.kat-geprueft) strong{min-width:auto}
.kat-liste li:has(.kat-geprueft) span:not(.kat-geprueft){margin-left:.4rem}
.kat-los{margin:.7rem 0 0}
/* „5 Spalten" gehört zusammen — umgebrochen liest es sich wie zwei Angaben. */
.liste-tabelle .meta{white-space:nowrap}
.knopf-klein{padding:.4rem .9rem;font-size:.88rem}

/* ── Leinwand-Effekte und Größenvergleich ──────────────────────────────────
   ⚠️ DIE WALZE LIEGT ÜBER DEM BUCHSTABEN, NICHT AN SEINER STELLE. Das
   Element darunter behält seinen Text — sonst wäre der gezogene Buchstabe
   für einen Screenreader verschwunden, sobald die Leinwand darüberliegt. */
/* ⚠️ DER ANKER IST DAS ELTERNELEMENT, NICHT DER BUCHSTABE SELBST. Im
   Buchstaben-Element hängend wurde die Leinwand vom nächsten
   `textContent = "S"` mitgelöscht — textContent ersetzt alle Kindknoten. */
.hat-walze{position:relative}
.walze{position:absolute;opacity:0;transition:opacity .18s;
  pointer-events:none;border-radius:.8rem}
/* Solange sie dreht, tritt der Buchstabe darunter zurück. */
.buchstabe.dreht{color:transparent}

/* ⚠️ `pointer-events:none` IST HIER KEIN DETAIL. Ohne die Zeile klebt nach
   jeder perfekten Runde anderthalb Sekunden lang eine unsichtbare Fläche
   über dem Spielfeld, und der Klick auf „Buchstabe ziehen" geht ins Leere —
   ein Fehler, den niemand mit dem Konfetti in Verbindung bringt. */
.hat-konfetti{position:relative}
.konfetti{position:absolute;left:0;top:0;pointer-events:none;z-index:5}

/* ── Größenvergleich (SVG, kein Canvas — er trägt Information) ─────────── */
.groessenvergleich{margin:1.4rem 0;padding:0}
.groessenvergleich figcaption{font-weight:600;margin:0 0 .5rem;font-size:.95rem}
.gv-bild{width:100%;height:auto;display:block;overflow:visible}
.gv-form{fill:var(--marke);opacity:.82}
/* Der heimische Eintrag hebt sich ab — sonst sucht man ihn in der Reihe. */
.gv-form.gv-heim{fill:#c8781c;opacity:1}
.gv-schnee{fill:#fff;opacity:.9}
/* Die Schneegrenze bei 2.500 m — ein Strich sagt mehr als eine Beschriftung. */
.gv-schneegrenze{stroke:#fff;stroke-width:1.2;stroke-dasharray:4 3;opacity:.85}
/* ⚠️ EIN HÖHENPROFIL BRAUCHT EINE KANTE. Als reine Fläche verschwimmen die
   Grate ineinander — beim Watzmann sah man die drei Spitzen erst, als die
   Silhouette eine Linie bekam. */
/* ⚠️ `:not(.gv-flusslinie)` IST NICHT KOSMETIK. Diese Regel hat eine höhere
   Spezifität als ein Präsentationsattribut am Element — sie überschrieb die
   Strichstärke der Flusslinien mit 0,6 und machte sie unsichtbar. Die Kontur
   ist für die Bergprofile gedacht, nicht für Linien. */
.gv-bild .gv-form:not(.gv-flusslinie){stroke:#0f4a30;stroke-width:.6;
  stroke-linejoin:round}
/* ⚠️ DIESE KLASSE FEHLTE, UND MAN SAH ES SOFORT: Die Flüsse standen im
   Template als `.gv-linie`, im Stylesheet gab es sie nicht — also erbten sie
   `fill: var(--marke)` von `.gv-form` und wurden als Fläche ausgemalt. Statt
   Flussläufen zeigte die Grafik zerfetzte Kleckse. Eine Linie braucht
   `fill: none`, sonst ist sie keine. */
.gv-flusslinie{fill:none;stroke:var(--marke);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
/* ⚠️ `fill:none` MUSS HIER STEHEN, NICHT NUR IN `.gv-flusslinie`. Die Regel
   `.gv-form.gv-heim` hat zwei Klassen und damit die höhere Spezifität — sie
   malte Rhein, Elbe, Weser und Main weiter aus, während die grünen Flüsse
   daneben schon als Linie liefen. Ein Fehler, der aussah wie ein Zufall. */
.gv-flusslinie.gv-heim{fill:none;stroke:#c8781c}
.flussvergleich .fv-name{font-size:11.5px;fill:var(--text);text-anchor:end;font-weight:600}
.flussvergleich .fv-wert{font-size:11px;fill:var(--grau);font-variant-numeric:tabular-nums}
.flussvergleich .fv-hinweis{font-size:8.5px;fill:#b0847a}
.gv-bild .gv-heim{stroke:#8a4d0c}
.gv-grund{stroke:var(--linie);stroke-width:1}
.gv-name{font-size:11px;fill:var(--text);text-anchor:middle;font-weight:600}
.gv-wert{font-size:10.5px;fill:var(--grau);text-anchor:middle;
  font-variant-numeric:tabular-nums}
@media (max-width:34rem){
  .gv-name{font-size:9.5px}
  .gv-wert{font-size:9px}
}


/* ── Vorlagen-Generator ────────────────────────────────────────────────────
   Das Formular steht über dem Blatt und verschwindet beim Drucken
   (`keindruck`). */
.vorlage-form{margin:1.2rem 0 1.6rem;padding:1rem 1.1rem;
  border:1px solid var(--linie);border-radius:.7rem;background:#fbfdfc}
.vorlage-form fieldset{border:0;padding:0;margin:0 0 .9rem}
.vorlage-form legend{padding:0;font-weight:600;font-size:.95rem;
  margin-bottom:.5rem}
.vorlage-form .kategorien{margin:0 0 .7rem}
.vorlage-zeile{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.7rem}
.vorlage-feld{display:block;margin:0 0 .2rem}
.vorlage-feld>span{display:block;font-size:.85rem;color:var(--grau);
  margin-bottom:.2rem}
.vorlage-feld input,.vorlage-feld select{width:100%;padding:.45rem .6rem;
  border:1px solid var(--linie);border-radius:.5rem;font:inherit;
  font-size:.92rem;background:#fff}
.vorlage-feld.schmal{width:auto}
.vorlage-feld.schmal input{width:9rem}
.vorlage-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
  margin:.4rem 0 0}
/* Druckknopf und PDF nebeneinander, der Hinweis darunter. */
.vorlage-knopf{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
  margin:1rem 0 .8rem}
.vorlage-knopf .meta{margin:0}
/* ⚠️ AB ACHT SPALTEN WIRD ES ENG. Die Schrift muss kleiner werden, sonst
   bricht jede Überschrift um und das Blatt wird höher als eine Seite. */
.vorlage-eng .vorlage-tabelle th,.vorlage-eng .vorlage-tabelle td{
  font-size:.78rem;padding:.35rem .25rem}

@media (max-width:34rem){
  .vorlage-form{padding:.8rem .7rem}
  .vorlage-feld.schmal input{width:7rem}
}