/* Geo-Spiel – Gestaltung.
   Dunkles Thema ist Standard; hell per Einstellung (data-thema) oder Systemvorgabe.
   Akzentfarbe per data-farbe (bernstein = Standard, gruen, blau, rosa) – siehe „Farbmodi".
   Hochformat: Karte oben, Bedienfeld unten scrollbar. Ab 900 px Breite: Karte links,
   Bedienfeld rechts 420 px. */

/* ---------------------------------------------------------------- Farben */
:root {
  --meer: #0b1a2e;
  --hintergrund-land: #26303c;      /* nicht spielbare Flächen (Antarktis, Grönland …) */
  --land: #cfd5dc;                  /* aktives Land */
  --land-inaktiv: #4a5563;          /* gedämpft (Kontinentfilter) */
  --grenze: #0b1a2e;
  --auswahl: #f5b73a;               /* bernstein */
  --richtig: #3ccf6e;
  --falsch: #e5484d;
  --ziel: #3ccf6e;
  --kontur: #ffffff;                /* Umriss hervorgehobener Länder */

  --flaeche: #121c2b;               /* Bedienfeld */
  --flaeche-2: #1a2637;             /* Kacheln */
  --flaeche-3: #223247;             /* Knöpfe */
  --rand: #34496a;
  --text: #e9eef4;
  --text-2: #9aa8b8;
  --akzent: #f5b73a;                /* Hauptknöpfe, aktive Chips, Hauptstadtpunkt */
  --akzent-text: #1b1405;           /* Schrift darauf */
  --akzent-2: #7fb2ff;              /* dezente Zweitfarbe: Fokusrahmen, Nachbar-Chips */
  --richtig-flaeche: rgba(60, 207, 110, 0.16);
  --falsch-flaeche: rgba(229, 72, 77, 0.16);
  --fokus: var(--akzent-2);
  --radius: 12px;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-thema="dunkel"]) {
    --meer: #d9e8f5;
    --hintergrund-land: #e9e4da;
    --land: #8e9aa8;
    --land-inaktiv: #c3cad2;
    --grenze: #ffffff;
    --kontur: #1b2430;
    --flaeche: #f3f5f8;
    --flaeche-2: #ffffff;
    --flaeche-3: #ffffff;
    --rand: #c9d1dc;
    --text: #1b2430;
    --text-2: #5b6878;
    --richtig: #1f9d4f;
    --falsch: #d1343a;
    --ziel: #1f9d4f;
    --richtig-flaeche: rgba(31, 157, 79, 0.14);
    --falsch-flaeche: rgba(209, 52, 58, 0.12);
    --akzent-2: #2b6fd6;
    color-scheme: light;
  }
}
:root[data-thema="hell"] {
  --meer: #d9e8f5;
  --hintergrund-land: #e9e4da;
  --land: #8e9aa8;
  --land-inaktiv: #c3cad2;
  --grenze: #ffffff;
  --kontur: #1b2430;
  --flaeche: #f3f5f8;
  --flaeche-2: #ffffff;
  --flaeche-3: #ffffff;
  --rand: #c9d1dc;
  --text: #1b2430;
  --text-2: #5b6878;
  --richtig: #1f9d4f;
  --falsch: #d1343a;
  --ziel: #1f9d4f;
  --richtig-flaeche: rgba(31, 157, 79, 0.14);
  --falsch-flaeche: rgba(209, 52, 58, 0.12);
  --akzent-2: #2b6fd6;
  color-scheme: light;
}

/* ---------------------------------------------------------------- Farbmodi
   Werte wie im Dart-Projekt (dort --prim/--auf-prim/--akzent). Stehen bewusst NACH den
   Themenblöcken: gleiche Spezifität, die spätere Regel gewinnt. Überschrieben wird nur der
   Akzent; Hintergründe, Schrift und die Kartenfarben (auswahl/richtig/falsch/ziel) bleiben.
   Das helle Thema gilt über data-thema="hell" ODER über die Systemvorgabe ohne
   data-thema="dunkel" – darum je Farbe beide Selektoren. */
:root[data-farbe="gruen"] { --akzent: #46c06a; --akzent-text: #06240f; --akzent-2: #5aa9f7; }
@media (prefers-color-scheme: light) {
  :root[data-farbe="gruen"]:not([data-thema="dunkel"]) { --akzent: #1d8a42; --akzent-text: #ffffff; --akzent-2: #1b6fc4; }
}
:root[data-farbe="gruen"][data-thema="hell"] { --akzent: #1d8a42; --akzent-text: #ffffff; --akzent-2: #1b6fc4; }

:root[data-farbe="blau"] { --akzent: #4da3ff; --akzent-text: #04203f; --akzent-2: #8fc4ff; }
@media (prefers-color-scheme: light) {
  :root[data-farbe="blau"]:not([data-thema="dunkel"]) { --akzent: #1b6fc4; --akzent-text: #ffffff; --akzent-2: #1b6fc4; }
}
:root[data-farbe="blau"][data-thema="hell"] { --akzent: #1b6fc4; --akzent-text: #ffffff; --akzent-2: #1b6fc4; }

:root[data-farbe="rosa"] { --akzent: #ff6fb5; --akzent-text: #3d0420; --akzent-2: #ffa8d4; }
@media (prefers-color-scheme: light) {
  :root[data-farbe="rosa"]:not([data-thema="dunkel"]) { --akzent: #c2185b; --akzent-text: #ffffff; --akzent-2: #c2185b; }
}
:root[data-farbe="rosa"][data-thema="hell"] { --akzent: #c2185b; --akzent-text: #ffffff; --akzent-2: #c2185b; }

/* ---------------------------------------------------------------- Grundgerüst */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  height: 100dvh;
  overflow: hidden;
  background: var(--flaeche);
  color: var(--text);
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding-top: env(safe-area-inset-top);
  background: var(--meer);
}

.kartenbereich {
  position: relative;
  flex: 0 0 48dvh;
  min-height: 0;
  background: var(--meer);
}
/* Auf Start und Ergebnis ist die Karte nur Kulisse – weniger Platz dafür. */
.app[data-ansicht="start"] .kartenbereich,
.app[data-ansicht="ergebnis"] .kartenbereich { flex-basis: 30dvh; }

#karte {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--meer);
  touch-action: none;
}
/* Equal Earth: die Erdscheibe (path.umriss) ist das Meer, außerhalb davon Seitenfarbe */
#karte.mit-umriss { background: var(--flaeche); }
.app:has(#karte.mit-umriss), .app:has(#karte.mit-umriss) .kartenbereich { background: var(--flaeche); }

.karten-knopf {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-height: 36px;
  padding: 0 12px;
  font-size: 14px;
  opacity: 0.85;
  z-index: 3;
}
.karten-knopf.oben { top: 10px; bottom: auto; }
/* Vollbild gibt es nur auf Start und Atlas (im Spiel würde die Karte sonst das Bedienfeld verdecken) */
.app:not([data-ansicht="start"]):not([data-ansicht="atlas"]) #vollbild,
.app:not([data-ansicht="start"]):not([data-ansicht="atlas"]) #flaggen-knopf { display: none; }
.karten-knopf.links { right: auto; left: 10px; }
.karten-knopf.an { background: var(--akzent); color: var(--akzent-text); border-color: transparent; opacity: 1; }

.bedienfeld {
  position: relative;               /* Bezug für die Deko-Ebene (#deko) */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--flaeche);
  padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
  padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right));
}

@media (min-width: 900px) {
  .app { flex-direction: row; padding-top: 0; }
  .kartenbereich,
  .app[data-ansicht="start"] .kartenbereich,
  .app[data-ansicht="ergebnis"] .kartenbereich {
    flex: 1 1 auto;
    height: 100%;
    padding-left: env(safe-area-inset-left);
  }
  .bedienfeld {
    flex: 0 0 420px;
    width: 420px;
    height: 100%;
    border-left: 1px solid var(--rand);
    padding-top: calc(16px + env(safe-area-inset-top));
  }
  .karten-knopf.oben { top: calc(10px + env(safe-area-inset-top)); }
  .karten-knopf.links { left: calc(10px + env(safe-area-inset-left)); }
}

/* ---------------------------------------------------------------- Vollbild (Start und Atlas)
   Die Karte füllt den ganzen Bildschirm, das Bedienfeld ist weg; ein gewähltes Land zeigt
   sein Blatt als Overlay unten (Hochformat) bzw. rechts (Querformat) über der Karte. */
.app[data-vollbild="1"] .kartenbereich,
.app[data-vollbild="1"][data-ansicht="start"] .kartenbereich {
  flex: 1 1 auto;
  height: 100dvh;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.app[data-vollbild="1"] .bedienfeld { display: none; }

#vollbild-blatt {
  position: absolute;
  left: calc(10px + env(safe-area-inset-left));
  right: calc(10px + env(safe-area-inset-right));
  bottom: calc(10px + env(safe-area-inset-bottom));
  max-height: 40%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--flaeche-2) 84%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
@media (orientation: landscape) {
  #vollbild-blatt {
    left: auto;
    top: calc(56px + env(safe-area-inset-top));
    bottom: auto;
    width: min(380px, 45vw);
  }
}

/* ---------------------------------------------------------------- Deko (nur Rosa)
   Schwebende Schleifen und Herzen hinter dem Inhalt des Bedienfelds. Die Ebene liegt im
   Bedienfeld selbst (Karte und Bedienfeld decken den Bildschirm), reicht über die ganze
   Scrollhöhe (Höhe setzt app.js), nimmt keine Tipps an und ist für Vorlesewerkzeuge unsichtbar. */
.bedienfeld > section { position: relative; z-index: 1; }
#deko {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  min-height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  display: none;
}
:root[data-farbe="rosa"] #deko { display: block; }
#deko span {
  position: absolute;
  line-height: 1;
  animation: schweben var(--dauer, 9s) ease-in-out infinite;
  animation-delay: var(--verzug, 0s);
}
@keyframes schweben {
  0%, 100% { transform: translateY(0) rotate(var(--dreh, 0deg)); }
  50%      { transform: translateY(-14px) rotate(var(--dreh, 0deg)); }
}
@media (prefers-reduced-motion: reduce) {
  #deko span { animation: none; }
}

/* ---------------------------------------------------------------- Karte (Klassen aus karte.js) */
.umriss { fill: var(--meer); stroke: none; pointer-events: none; }
.hintergrund { fill: var(--hintergrund-land); stroke: none; pointer-events: none; }
.land {
  fill: var(--land);
  stroke: var(--grenze);
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  transition: fill 120ms ease;
}
.land.inaktiv { fill: var(--land-inaktiv); }
.land.ausgewaehlt { fill: var(--auswahl); stroke: var(--kontur); stroke-width: 2; }
.land.richtig { fill: var(--richtig); }
.land.falsch { fill: var(--falsch); }
.land.ziel {
  fill: var(--ziel);
  stroke: var(--kontur);
  stroke-width: 2.5;
  animation: puls 900ms ease-in-out infinite alternate;
}

.marker .treffer { fill: transparent; stroke: none; }
.marker .punkt {
  fill: var(--land);
  stroke: var(--grenze);
  stroke-width: 1;
  opacity: 0.85;
  vector-effect: non-scaling-stroke;
  transition: fill 120ms ease;
}
.marker.inaktiv .punkt { fill: var(--land-inaktiv); }
.marker.ausgewaehlt .punkt { fill: var(--auswahl); stroke: var(--kontur); stroke-width: 2; opacity: 1; }
.marker.richtig .punkt { fill: var(--richtig); opacity: 1; }
.marker.falsch .punkt { fill: var(--falsch); opacity: 1; }
.marker.ziel .punkt {
  fill: var(--ziel);
  stroke: var(--kontur);
  stroke-width: 2.5;
  animation: puls 900ms ease-in-out infinite alternate;
}

@keyframes puls { from { opacity: 1; } to { opacity: 0.55; } }

/* Flaggen als Füllung (Start/Atlas, karte.flaggenZeigen): --flagge setzt karte.js je Pfad bzw.
   Marker auf url(#flagge-XX). Hervorhebungen und der Kontinentfilter gewinnen weiterhin. */
svg.mit-flaggen .land:not(.ausgewaehlt):not(.richtig):not(.falsch):not(.ziel):not(.inaktiv) {
  fill: var(--flagge, var(--land));
}
svg.mit-flaggen .marker:not(.ausgewaehlt):not(.richtig):not(.falsch):not(.ziel):not(.inaktiv) .punkt {
  fill: var(--flagge, var(--land));
  opacity: 1;
}

/* Hauptstadt (Start/Atlas): Punkt mit Ring und Namenslabel, Bildschirmgröße konstant (karte.js) */
.hauptstadt-ebene, .hauptstadt { pointer-events: none; }
.hauptstadt .punkt {
  fill: var(--akzent);
  stroke: var(--kontur);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.hauptstadt .ring {
  fill: none;
  stroke: var(--akzent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  animation: hauptstadt-puls 1600ms ease-out infinite;
}
.hauptstadt .label {
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  fill: #1b2430;
  stroke: #ffffff;
  stroke-width: 3px;
  stroke-linejoin: round;
  paint-order: stroke fill;
  vector-effect: non-scaling-stroke;
}
@keyframes hauptstadt-puls {
  0%   { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .land.ziel, .marker.ziel .punkt { animation: none; }
  .hauptstadt .ring { animation: none; opacity: 0.7; }
}

/* ---------------------------------------------------------------- Text */
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 26px; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); margin-bottom: 8px; }
h3 { font-size: 18px; }
p { margin: 0; }
.unter { color: var(--text-2); font-size: 15px; }
.hinweis { color: var(--text-2); font-size: 13px; margin-top: 6px; }
.titel { margin-bottom: 18px; }
.titel .unter { margin-top: 4px; }
.titelzeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gruppe { margin-bottom: 18px; }
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.meldung {
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--falsch-flaeche);
  color: var(--falsch);
  margin-bottom: 12px;
}

/* ---------------------------------------------------------------- Knöpfe und Felder */
button {
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: var(--flaeche-3);
  border: 1px solid var(--rand);
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
button:active { filter: brightness(1.2); }
button:disabled { opacity: 0.45; cursor: default; filter: none; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }

button.primaer { background: var(--akzent); color: var(--akzent-text); border-color: transparent; }
button.gross { min-height: 52px; font-size: 17px; flex: 1 1 auto; }
button.leise { background: transparent; border-color: transparent; color: var(--text-2); font-weight: 500; }
button.klein { min-height: 36px; padding: 0 10px; font-size: 14px; }
/* Symbolknopf (Thema rechts oben): quadratisch, 44 px */
button.symbol {
  flex: 0 0 auto;
  width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  border-radius: 50%;
}

.aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.aktionen > button { flex: 1 1 auto; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips > button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
}
/* Farbprobe-Punkt im Farb-Chip */
.farbprobe {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--probe, currentColor);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  flex: 0 0 auto;
}
.chips > button[aria-pressed="true"] {
  background: var(--akzent);
  color: var(--akzent-text);
  border-color: transparent;
  font-weight: 600;
}

/* Schalter mit nativem Checkbox-Switch (Safari/iOS kennt role=switch) */
.schalter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 14px;
  margin-bottom: 18px;
  border-radius: var(--radius);
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
}
.schalter small { display: block; color: var(--text-2); font-size: 13px; }
.schalter input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 50px;
  height: 30px;
  border-radius: 999px;
  background: var(--rand);
  position: relative;
  margin: 0;
  cursor: pointer;
  transition: background 150ms ease;
}
.schalter input::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  transition: transform 150ms ease;
}
.schalter input:checked { background: var(--richtig); }
.schalter input:checked::after { transform: translateX(20px); }

input[type="text"], input[type="search"] {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  font: inherit;
  font-size: 18px;
  color: var(--text);
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  -webkit-appearance: none;
  appearance: none;
}
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
/* Zahlenfeld für die eigene Rundenzahl */
input.zahl { max-width: 120px; margin-top: 8px; font-variant-numeric: tabular-nums; }
input.zahl[hidden] { display: none; }

/* ---------------------------------------------------------------- Verlauf */
.verlauf { list-style: none; margin: 0; padding: 0; }
.verlauf li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rand);
  font-size: 15px;
}
.verlauf li:last-child { border-bottom: none; }
.verlauf .leer { color: var(--text-2); border: none; }
.verlauf .wann { color: var(--text-2); }
.verlauf .wert { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------------------------------------------------------------- Spiel */
.spielkopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.spielkopf .runde { color: var(--text-2); }
.spielkopf .punkte { font-weight: 700; flex: 1 1 auto; }

.vorgabe {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  margin-bottom: 14px;
  min-height: 72px;
}
.vorgabe .etikett {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  margin-bottom: 2px;
}
.vorgabe .wert { font-size: 24px; font-weight: 700; line-height: 1.2; }
.vorgabe .wert.fakt { font-size: 17px; font-weight: 500; }
.vorgabe .flagge.gross {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 6px;
  background: var(--flaeche-3);
}

.frage { font-size: 17px; font-weight: 600; margin-bottom: 12px; }

.aufgabe form { display: flex; flex-direction: column; gap: 10px; }
.aufgabe .zeile-knoepfe { display: flex; gap: 10px; }
.aufgabe .zeile-knoepfe > button { flex: 1 1 auto; }
.aufgabe .hinweis-text { color: var(--text-2); font-size: 15px; }

.optionen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.optionen > button { min-height: 56px; padding: 8px 10px; white-space: normal; line-height: 1.25; }
@media (max-width: 380px) { .optionen { grid-template-columns: 1fr; } }

.flaggenraster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.flaggenraster > button {
  padding: 6px;
  min-height: 0;
  background: var(--flaeche-2);
}
.flaggenraster img, .optionen img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 4px;
  pointer-events: none;
}

button.richtig { background: var(--richtig-flaeche); border-color: var(--richtig); color: var(--richtig); }
button.falsch { background: var(--falsch-flaeche); border-color: var(--falsch); color: var(--falsch); }
button:disabled.richtig, button:disabled.falsch { opacity: 1; }

.feedback:empty { display: none; }
.feedback {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
}
.feedback.richtig { background: var(--richtig-flaeche); border-color: var(--richtig); }
.feedback.falsch { background: var(--falsch-flaeche); border-color: var(--falsch); }
.feedback .titelzeile { font-weight: 700; font-size: 17px; }
.feedback.richtig .titelzeile { color: var(--richtig); }
.feedback.falsch .titelzeile { color: var(--falsch); }
.feedback .punkte-zeile { color: var(--text-2); font-size: 14px; margin-top: 4px; font-variant-numeric: tabular-nums; }

.rundenende .fakt {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
}
.rundenende .fakt .etikett { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); }
.rundenende .rundenpunkte { font-size: 20px; font-weight: 700; }

/* ---------------------------------------------------------------- Ergebnis */
.ergebnis-kopf { margin-bottom: 16px; }
.grosszahl { font-size: 40px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ergebnis-liste { list-style: none; margin: 0; padding: 0; }
.ergebnis-liste li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--rand);
}
.ergebnis-liste .flagge { width: 44px; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 3px; grid-row: span 2; }
.ergebnis-liste .name { font-weight: 600; }
.ergebnis-liste .haken { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 14px; color: var(--text-2); }
.ergebnis-liste .haken .ok { color: var(--richtig); }
.ergebnis-liste .haken .nein { color: var(--falsch); }

/* ---------------------------------------------------------------- Atlas */
.suche { margin: 12px 0; }
.laenderliste { list-style: none; margin: 0; padding: 0; }
.laenderliste button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 6px 10px;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rand);
  border-radius: 0;
  font-weight: 500;
}
.laenderliste .flagge { width: 40px; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 3px; flex: 0 0 auto; }
.laenderliste .hauptstadt { color: var(--text-2); font-size: 14px; margin-left: auto; text-align: right; }
.laenderliste .leer { color: var(--text-2); padding: 10px; }

.blatt {
  padding: 14px;
  border-radius: var(--radius);
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  margin-bottom: 14px;
}
.blatt .kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.blatt .flagge { width: 72px; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 4px; flex: 0 0 auto; }
.blatt h3 { font-size: 22px; }
.blatt .kopf .leise { margin-left: auto; }
.blatt dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.blatt dt { color: var(--text-2); font-size: 14px; }
.blatt dd { margin: 0; }
.blatt .nachbarn { display: flex; flex-wrap: wrap; gap: 6px; }
.blatt .nachbarn button { min-height: 32px; padding: 0 10px; font-size: 14px; border-radius: 999px; font-weight: 500; border-color: var(--akzent-2); }
.blatt .fakt { margin-top: 12px; font-size: 15px; }

/* ---------------------------------------------------------------- Laden */
.laden {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: var(--flaeche);
  color: var(--text);
  z-index: 10;
}
.laden[hidden] { display: none; }
.laden .fehler { color: var(--falsch); }