/* =====================================================================
   umingo.de - Entwurf 1, Atlas auf Papier
   Palette: warmes Kartenpapier, Tinte statt Schwarz, ein Akzent in
   Kartografie-Blau, Ocker als zweite Stimme fuer Hinweise.
   Bewusst NICHT das Malachitgruen von min-web.de: gleiche Bauart,
   eigene Farbwelt.
   Fonts: Bricolage Grotesque (Display), Source Serif 4 (Fliesstext),
          IBM Plex Mono (Koordinaten und Kennzahlen), alle lokal.
   ===================================================================== */

@font-face {
  font-family: 'Bricolage';
  src: url('/assets/fonts/BricolageGrotesque-Latin.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage';
  src: url('/assets/fonts/BricolageGrotesque-LatinExt.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'SourceSerif';
  src: url('/assets/fonts/sourceserif4-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SourceSerif';
  src: url('/assets/fonts/sourceserif4-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SourceSerif';
  src: url('/assets/fonts/sourceserif4-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'PlexMono';
  src: url('/assets/fonts/IBMPlexMono-Latin.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
}

:root {
  --papier: #F7F4EE;
  --papier-soft: #EFEAE0;
  --weiss: #FFFFFF;
  --tinte: #1B2127;
  --tinte-soft: #39424B;
  --gedaempft: #5D6772;
  /* Blaufamilie. Das Signalblau #6FB9FC ist die Farbe der bestehenden Seite
     und bleibt die Hausfarbe, taugt aber mit 2,1:1 gegen Weiss nicht fuer
     Text. Deshalb vier Stufen: Signal fuer Flaechen, Karten und Zeichen,
     Mittel fuer Linien und Hover, Dunkel fuer Text und Links (6,97:1),
     Tief fuer Fadenkreuz und Betonung. */
  --akzent-signal: #6FB9FC;
  --akzent-mittel: #3C86C9;
  --akzent: #1F5C93;
  --akzent-dunkel: #123F62;
  --akzent-tint: #E8F3FE;
  --akzent-linie: #9CCBF6;
  /* Ocker traegt Text im Hinweiskasten, deshalb dunkel genug fuer 4,5:1
     gegen den hellen Kastengrund. Das fruehere #A8762A kam auf 3,62. */
  --ocker: #8A6014;
  --ocker-hell: #A8762A;   /* nur fuer Flaechen und Linien */
  --ocker-tint: #FAF4E7;
  --ocker-linie: #E2CFA6;
  --linie: #DFD8CB;
  --linie-kraeftig: #C8BEAD;

  /* Kategoriefarben. Funktionales Orientierungssystem: dieselbe Farbe steht
     auf jeder Seite fuer dieselbe Spielkategorie. Alle gegen --weiss auf
     mindestens 4.5:1 geprueft, Saettigung unter 65 Prozent. */
  --kat-land:   #1F5C93;
  --kat-stadt:  #9B4A32;
  --kat-fluss:  #2A6E86;
  --kat-beruf:  #665C4E;
  --kat-tier:   #4A7245;
  --kat-obst:   #8A6014;
  --kat-element:#6E6086;

  --maxw: 1180px;
  --maxw-text: 68ch;
  --radius: 3px;
}

body { --kat: var(--akzent); }
.k-land    { --kat: var(--kat-land); }
.k-stadt   { --kat: var(--kat-stadt); }
.k-fluss   { --kat: var(--kat-fluss); }
.k-beruf   { --kat: var(--kat-beruf); }
.k-tier    { --kat: var(--kat-tier); }
.k-obst    { --kat: var(--kat-obst); }
.k-element { --kat: var(--kat-element); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'SourceSerif', Georgia, serif;
  font-size: 18px;
  line-height: 1.68;
  color: var(--tinte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, .display {
  font-family: 'Bricolage', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--tinte);
  margin: 0;
}

a { color: var(--akzent); text-decoration: none; }

/* Fliesstext-Links bekommen ein zweites Merkmal neben der Farbe. Zwischen
   Akzent und Tinte liegen nur 2,4:1, WCAG verlangt 3:1, wenn Farbe allein
   unterscheidet. Die Linie liegt ruhig unter der Grundlinie und wird beim
   Ueberfahren kraeftig. Navigation und Kacheln bleiben aussen vor, dort
   erkennt man den Link an der Position. */
.prose a, .lead a, .steckbrief a, .antwort-tabelle a {
  text-decoration: underline;
  text-decoration-color: var(--akzent-linie);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.prose a:hover, .lead a:hover, .steckbrief a:hover, .antwort-tabelle a:hover {
  text-decoration-color: var(--akzent);
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ------------------------------------------------------------------ Kopf */

.kopf {
  border-bottom: 1px solid var(--linie);
  background: var(--papier);
}
.kopf-innen {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: baseline;
  gap: 28px;
  flex-wrap: wrap;
}
/* Flex-Kinder haben von Haus aus min-width:auto und schrumpfen nicht unter
   ihre Textbreite. Ein langer Zusatz im Kopf macht damit die ganze Seite
   breiter als den Viewport, und zwar erst auf schmalen Geraeten. */
.kopf-innen > * { min-width: 0; }
.marke {
  font-family: 'Bricolage', system-ui, sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.03em;
  color: var(--tinte);
}
.marke span { color: var(--akzent); }
.marke-zusatz {
  font-size: 14px;
  color: var(--gedaempft);
  font-family: 'Bricolage', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}
.hauptnav { margin-left: auto; display: flex; gap: 22px; flex-wrap: wrap; }
.hauptnav a {
  font-family: 'Bricolage', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--tinte-soft);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: border-color 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hauptnav a:hover, .hauptnav a[aria-current] {
  border-bottom-color: var(--kat, var(--akzent));
  color: var(--tinte);
}

/* --------------------------------------------------------------- Brotkrume */

.brotkrume {
  font-family: 'Bricolage', system-ui, sans-serif;
  font-size: 14px;
  color: var(--gedaempft);
  padding: 20px 0 0;
}
.brotkrume a { color: var(--gedaempft); }
.brotkrume a:hover { color: var(--akzent); }
.brotkrume span { padding: 0 6px; color: var(--linie-kraeftig); }

/* ------------------------------------------------------- Kopf der Antwortseite */

/* Der Buchstabe ist der visuelle Anker: gross, angeschnitten, in Papierton
   mit Kontur, wie ein Wasserzeichen auf einer Karte. Kein Hero-Bild, kein
   Overlay, keine Card. */
.antwort-kopf {
  position: relative;
  padding: 44px 0 36px;
  overflow: hidden;
}
.buchstabe {
  position: absolute;
  right: 0;
  top: 24px;
  font-family: 'Bricolage', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(150px, 21vw, 280px);
  line-height: 0.78;
  color: var(--papier-soft);
  -webkit-text-stroke: 1px var(--linie-kraeftig);
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  animation: buchstabe-ein 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms forwards;
}
@keyframes buchstabe-ein {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .buchstabe { animation: none; opacity: 1; transform: none; }
}

.kategorie-chip {
  display: inline-block;
  font-family: 'Bricolage', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kat);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 16px;
}

.antwort-kopf h1 {
  position: relative;
  font-size: clamp(38px, 6vw, 62px);
  max-width: 16ch;
}
.lead {
  position: relative;
  max-width: var(--maxw-text);
  margin: 20px 0 0;
  font-size: 20px;
  line-height: 1.6;
  color: var(--tinte-soft);
}

/* ------------------------------------------------------------ Antworttabelle */

.antwort-tabelle {
  margin: 36px 0 0;
  border-top: 2px solid var(--kat);
  border-bottom: 1px solid var(--linie);
  background: var(--weiss);
}
.antwort-tabelle table {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
}
.antwort-tabelle caption {
  text-align: left;
  font-family: 'Bricolage', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kat);
  padding: 14px 18px 10px;
}
.antwort-tabelle th {
  text-align: left;
  font-family: 'Bricolage', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gedaempft);
  padding: 10px 18px;
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}
.antwort-tabelle td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--papier-soft);
  vertical-align: top;
}
.antwort-tabelle tbody tr:last-child td { border-bottom: 0; }
.antwort-tabelle tbody tr { position: relative; }
/* Hover setzt einen Balken in der Kategoriefarbe statt den Grund zu wechseln.
   Kein Farbwechsel auf Text oder Hintergrund, damit Links lesbar bleiben. */
.antwort-tabelle tbody td:first-child {
  box-shadow: inset 0 0 0 0 var(--kat);
  transition: box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.antwort-tabelle tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 0 var(--kat);
}
.antwort-tabelle .name { font-weight: 700; }
.antwort-tabelle .zahl {
  font-family: 'PlexMono', ui-monospace, monospace;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tabelle-scroll { overflow-x: auto; }

/* ------------------------------------------------------------------- Prosa */

.prose { max-width: var(--maxw-text); }
.prose p { margin: 0 0 20px; }
.prose h2 {
  font-size: 27px;
  margin: 46px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--linie);
}
.prose h3 { font-size: 21px; margin: 30px 0 10px; }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 22px; }
.prose li { margin-bottom: 7px; }
.prose strong { font-weight: 700; }

/* Hinweisbox ohne Rahmen ringsum: nur eine Kante links, Ocker als zweite
   Stimme. Kein Kasten, kein Schatten, kein Icon. */
.hinweis {
  max-width: var(--maxw-text);
  border-left: 3px solid var(--ocker-linie);
  background: var(--ocker-tint);
  padding: 14px 18px;
  margin: 0 0 24px;
  font-size: 17px;
  color: var(--tinte-soft);
}
.hinweis b { color: var(--ocker); font-weight: 700; }

/* ------------------------------------------------------------------- Bild */

/* Bilder duerfen breiter sein als die Textspalte, aber nicht randlos. Die
   Bildunterschrift traegt den Pflichtnachweis und steht deshalb immer da,
   auch wenn sonst nichts zum Bild zu sagen ist. */
.bild {
  margin: 32px 0;
  max-width: 820px;
}
.bild img {
  width: 100%;
  border: 1px solid var(--linie);
  background: var(--papier-soft);
}
.bild figcaption {
  font-size: 15px;
  line-height: 1.5;
  color: var(--gedaempft);
  padding: 9px 2px 10px;
  border-bottom: 1px solid var(--linie);
}
/* Flaggen sind selbst gezeichnete SVG und kein Foto. Deshalb kein Kartenrahmen,
   nur eine duenne Kante, damit das viele Weiss der zyprischen Flagge nicht in
   den Seitengrund ausfranst. Schmaler als ein Bild, damit sie neben dem Text
   sitzen und nicht ueber ihm. */
.flagge {
  margin: 28px 0;
  max-width: 340px;
}
.flagge img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--linie);
}
.flagge figcaption {
  font-size: 15px;
  line-height: 1.5;
  color: var(--gedaempft);
  padding: 9px 2px 10px;
  border-bottom: 1px solid var(--linie);
}
@media (min-width: 861px) {
  .flagge { float: left; margin: 8px 30px 16px 0; }
  .flagge + p { overflow: hidden; }
}

.bild .nachweis { display: block; margin-top: 2px; font-size: 14px; }
.bild .nachweis a { color: var(--gedaempft); text-decoration: underline; text-underline-offset: 2px; }
.bild .nachweis a:hover { color: var(--akzent); }

/* Der Rahmen um das Bild ist der Hoverbereich. Beim Ueberfahren hebt sich das
   Bild leicht an und ein Lupenzeichen blendet unten rechts ein. Bewegt werden
   nur transform und opacity, beides laeuft auf der Grafikkarte. */
.bild-link {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--tinte);
}
.bild-link img {
  border: 0;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.bild-link:hover img, .bild-link:focus-visible img {
  transform: scale(1.028);
  opacity: 0.88;
}
.bild-link::after {
  content: "Vergrößern";
  position: absolute;
  right: 12px;
  bottom: 12px;
  font-family: 'Bricolage', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--weiss);
  background: rgba(27, 33, 39, 0.82);
  padding: 5px 11px;
  border-radius: 999px;
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.bild-link:hover::after, .bild-link:focus-visible::after {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.bild-link:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }

/* Lightbox ohne JavaScript ueber :target. Der Rahmen liegt unsichtbar im
   Dokument und wird sichtbar, sobald seine ID in der Adresse steht. Schliessen
   geht ueber die Flaeche, das Kreuz und die Zurueck-Taste des Browsers. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(16, 20, 24, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms cubic-bezier(0.16, 1, 0.3, 1), visibility 260ms;
}
.lightbox:target { opacity: 1; visibility: visible; }
.lightbox .schliessflaeche { position: absolute; inset: 0; }
.lightbox figure {
  position: relative;
  margin: 0;
  /* Breite folgt dem Bild, sonst haengt der Schliessen-Link in der Luft */
  width: fit-content;
  max-width: min(1200px, 100%);
  transform: scale(0.98);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lightbox:target figure { transform: scale(1); }
.lightbox img {
  max-width: 100%;
  max-height: 78dvh;
  width: auto;
  margin: 0 auto;
}
.lightbox figcaption {
  color: #D8D3C9;
  font-size: 15px;
  line-height: 1.5;
  padding-top: 12px;
  max-width: 70ch;
}
.lightbox figcaption a { color: #D8D3C9; text-decoration: underline; }
.lightbox .zu {
  position: absolute;
  top: -38px;
  right: 0;
  font-family: 'Bricolage', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--weiss);
  padding: 4px 10px;
}
.lightbox .zu:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .bild-link img, .bild-link::after, .lightbox, .lightbox figure { transition: none; }
  .bild-link:hover img { transform: none; }
}

/* ----------------------------------------------------------- Streitfaelle */

/* Der Abschnitt, der den Klick verdient: was oft genannt wird und trotzdem
   nicht zaehlt. Bewusst als Liste mit Urteil, nicht als Karten. */
.streit { max-width: var(--maxw-text); margin: 0 0 24px; padding: 0; list-style: none; }
.streit li {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linie);
  align-items: baseline;
}
.streit li:first-child { border-top: 1px solid var(--linie); }
.streit .urteil {
  font-family: 'Bricolage', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.streit .zaehlt-nicht { color: var(--kat-stadt); }
.streit .zaehlt-halb { color: var(--ocker); }
.streit .zaehlt { color: var(--kat-tier); }
.streit .was { margin: 0; }
.streit .was b { font-weight: 700; }

/* --------------------------------------------------------- Steckbrief Stadt */

.stadt-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 40px;
  align-items: start;
  padding: 40px 0 0;
}
.steckbrief {
  border-top: 2px solid var(--kat);
  background: var(--weiss);
  padding: 4px 20px 16px;
  font-size: 16px;
}
.steckbrief h2 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--kat);
  margin: 16px 0 12px;
}
.steckbrief dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 0; }
.steckbrief dt {
  color: var(--gedaempft);
  padding: 8px 0;
  border-bottom: 1px solid var(--papier-soft);
  font-size: 15px;
}
.steckbrief dd {
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--papier-soft);
  text-align: right;
  font-family: 'PlexMono', ui-monospace, monospace;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.steckbrief dd.wort { font-family: 'SourceSerif', Georgia, serif; }

.koordinaten-gross {
  font-family: 'PlexMono', ui-monospace, monospace;
  font-size: clamp(20px, 3.4vw, 27px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--akzent);
  margin: 18px 0 0;
}

/* ------------------------------------------------------------- Kachelraster */

/* Feste Spaltenzahl per Grid statt Flex mit Scroll, sonst wird die letzte
   Kachel abgeschnitten. Unter 640px eine Spalte. */
.raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  margin: 8px 0 0;
}
.raster a {
  background: var(--weiss);
  padding: 16px 18px;
  display: block;
  transition: background-color 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.raster a:hover { background: var(--akzent-tint); }
.raster .titel {
  font-family: 'Bricolage', system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--tinte);
  display: block;
}
.raster .unter { font-size: 15px; color: var(--gedaempft); display: block; margin-top: 2px; }

/* Buchstabenleiste: A bis Z als eigene Navigation, mono gesetzt */
.abc {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  margin: 8px 0 0;
}
.abc a {
  background: var(--weiss);
  text-align: center;
  padding: 12px 0;
  font-family: 'Bricolage', system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--tinte-soft);
  transition: background-color 160ms cubic-bezier(0.16, 1, 0.3, 1), color 160ms;
}
.abc a:hover { background: var(--kat); color: var(--weiss); }
.abc a[aria-current] { background: var(--kat); color: var(--weiss); }

/* Einleitungszeile unter einer Abschnitts-Ueberschrift, ruhiger als der
   Lead im Seitenkopf */
.lead-klein {
  max-width: var(--maxw-text);
  margin: 14px 0 0;
  color: var(--tinte-soft);
}

.abschnitt { padding: 52px 0 0; }
.abschnitt > h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gedaempft);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linie-kraeftig);
}

/* -------------------------------------------------------------------- Fuss */

.fuss {
  margin-top: 72px;
  border-top: 1px solid var(--linie);
  background: var(--papier-soft);
  padding: 40px 0 48px;
  font-size: 16px;
  color: var(--tinte-soft);
}
.fuss-raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.fuss h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gedaempft);
  margin: 0 0 10px;
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 6px; }
.fuss a { color: var(--tinte-soft); }
/* Eigene Hover-Regel statt einer globalen a:hover-Farbe. Eine Pseudoklasse
   wiegt so viel wie eine Klasse, ein globales a:hover wuerde Kontextregeln
   schlagen und Links auf farbigem Grund unsichtbar machen. */
.fuss a:hover { color: var(--akzent-dunkel); text-decoration: underline; }
.fuss-zeile {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--linie);
  font-size: 15px;
  color: var(--gedaempft);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------- Responsive */

@media (max-width: 980px) {
  .stadt-kopf { grid-template-columns: 1fr; gap: 28px; }
  .raster { grid-template-columns: repeat(2, 1fr); }
  .fuss-raster { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  body { font-size: 17px; }
  .abc { grid-template-columns: repeat(7, 1fr); }
  .kopf-innen { gap: 14px; }
  .hauptnav { margin-left: 0; width: 100%; gap: 16px; }
  .buchstabe { font-size: 40vw; top: -0.12em; }
  .streit li { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 520px) {
  .raster { grid-template-columns: 1fr; }
  .fuss-raster { grid-template-columns: 1fr; }
  .wrap { padding: 0 18px; }
}

/* Unter 400px muss alles umbrechen duerfen. Die Koordinatenzeile und die
   Werte im Steckbrief sind die einzigen Stellen mit fester Zeichenfolge,
   beide bekommen hier ausdruecklich die Erlaubnis zum Umbruch. */
@media (max-width: 400px) {
  .koordinaten-gross { font-size: 19px; overflow-wrap: anywhere; }
  .steckbrief dl { grid-template-columns: 1fr; }
  .steckbrief dt { border-bottom: 0; padding-bottom: 0; }
  .steckbrief dd { text-align: left; padding-top: 2px; }
  .brotkrume { overflow-wrap: anywhere; }
  .marke-zusatz { font-size: 13px; }
  .kopf-innen { padding: 14px 18px; }
}

/* Nichts darf breiter sein als der Viewport, egal welcher Inhalt spaeter
   dazukommt. */
html, body { overflow-x: hidden; }
.prose, .lead, .steckbrief, .streit { overflow-wrap: break-word; }

/* Sprungleiste nach Buchstabenzahl: weniger Felder als das Alphabet, deshalb
   eigene Spaltenzahl statt der 13 aus .abc */
.abc-zahlen { grid-template-columns: repeat(8, 1fr); }
@media (max-width: 700px) { .abc-zahlen { grid-template-columns: repeat(4, 1fr); } }

/* Die hervorgehobene Raetselantwort. Steht direkt unter der Laenderueberschrift
   und nennt Buchstabenzahl und Loesungswort, das ist die Information, wegen der
   jemand die Seite aufruft. Kein Kasten, nur eine Kante in der Kategoriefarbe. */
.loesung {
  max-width: var(--maxw-text);
  border-left: 3px solid var(--kat);
  background: var(--weiss);
  padding: 12px 18px;
  margin: 0 0 20px;
  font-size: 17px;
}
.loesung strong {
  font-family: 'PlexMono', ui-monospace, monospace;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--kat);
}

/* Zweite Buchstabenzahl in der Tabelle, gedaempft */
.antwort-tabelle .alt { color: var(--gedaempft); }

/* =====================================================================
   Detailarbeit. Alles hier ist entweder aus dem Thema geholt (Karte,
   Raetsel) oder Handwerk, das man erst merkt, wenn es fehlt.
   ===================================================================== */

/* --- Gradnetz im Papier ---------------------------------------------------
   Ein sehr blasses Raster wie auf einem Kartenblatt. Zwei Verlaeufe, kein
   Bild, keine Anfrage. Bei 64 px ist es auf Textgroesse ruhig genug, um
   nicht zu stoeren, und sichtbar genug, dass die Flaeche nicht tot wirkt. */
body {
  background-image:
    linear-gradient(to right, rgba(27, 33, 39, 0.030) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27, 33, 39, 0.030) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
}
/* Alles, was auf Weiss liegt, deckt das Raster ab, sonst schimmert es durch
   und die Tabellen wirken schmutzig. */
.antwort-tabelle, .steckbrief, .raster a, .abc a, .loesung { background-color: var(--weiss); }

/* --- Kartenrand ----------------------------------------------------------
   Die Teilung am Rand eines Kartenblatts, einmal unter dem Kopf. Traegt das
   Thema, ohne Platz zu kosten. */
.kartenrand {
  height: 5px;
  background: repeating-linear-gradient(to right,
    var(--linie-kraeftig) 0 14px, transparent 14px 28px);
  border-bottom: 1px solid var(--linie);
}

/* --- Buchstabenzahl als Raetselkaestchen ---------------------------------
   In der Kreuzwortraetsel-Tabelle steht die Laenge in einem Kaestchen, wie
   ein Feld im Raetselgitter. Die Zahl ist der Grund, warum jemand die Seite
   aufruft, also darf sie aussehen wie das, wonach gesucht wird. */
.kaestchen {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 5px;
  border: 1px solid var(--linie-kraeftig);
  background: var(--papier);
  font-family: 'PlexMono', ui-monospace, monospace;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
  box-shadow: inset -1px -1px 0 rgba(27, 33, 39, 0.06);
}
.kaestchen .zweit {
  font-size: 12px;
  font-weight: 400;
  color: var(--gedaempft);
}

/* --- Ziffern -------------------------------------------------------------
   Im Fliesstext proportionale Ziffern: jede Ziffer bekommt ihre natuerliche
   Breite, die Eins bleibt schmal. Das liest sich in einer Serifenzeile
   ruhiger als die gleich breiten Tabellenziffern. In Tabellen und im
   Steckbrief genau umgekehrt, dort muessen die Spalten fluchten.
   Mediaevalziffern waeren im Fliesstext noch besser, der Subset von
   Source Serif 4 kennt aber kein onum, nur pnum und tnum. Geprueft mit
   fontTools, deshalb hier kein oldstyle-nums, das waere eine Regel ohne
   Wirkung. */
.prose, .lead, .lead-klein, .hinweis, .streit .was { font-variant-numeric: proportional-nums; }
.antwort-tabelle, .steckbrief, .koordinaten-gross, .kaestchen, .zahl {
  font-variant-numeric: tabular-nums;
}

/* --- Umbruch -------------------------------------------------------------
   Ueberschriften umbrechen ausgewogen statt mit einem einzelnen Wort in der
   letzten Zeile, Absaetze vermeiden Schusterjungen. */
h1, h2, h3, .lead, .kategorie-chip { text-wrap: balance; }
.prose p, .streit .was, .hinweis, .bild figcaption { text-wrap: pretty; }
/* Anfuehrungszeichen haengen in den Rand, die Textkante bleibt gerade. */
.prose, .streit { hanging-punctuation: first last; }

/* --- Sprungmarken --------------------------------------------------------
   Ohne Abstand klebt die angesprungene Tabellenzeile am oberen Rand. */
:target { scroll-margin-top: 24px; }

/* --- Fokus und Auswahl ---------------------------------------------------
   Ein einheitlicher Fokusring in der Kategoriefarbe, sichtbar nur bei
   Tastaturbedienung. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--kat, var(--akzent));
  outline-offset: 3px;
  border-radius: 2px;
}
::selection { background: var(--akzent-tint); color: var(--tinte); }

/* --- Druck ---------------------------------------------------------------
   Auf einer Raetselseite wird gedruckt. Navigation, Fusszeile und Lightbox
   fliegen raus, Links bekommen ihre Adresse als Fussnote, Tabellen brechen
   nicht mitten in einer Zeile um. */
@media print {
  body { background: #fff; font-size: 11pt; }
  .kopf, .fuss, .brotkrume, .abschnitt .raster, .abc, .lightbox, .bild-link::after { display: none; }
  .wrap { max-width: none; padding: 0; }
  .antwort-tabelle, .steckbrief, .bild, .streit li { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  .prose a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .prose a[href^="/"]::after { content: " (umingo.de" attr(href) ")"; }
}

/* =====================================================================
   Symbole, Rahmen, Karte, Fuss
   ===================================================================== */

/* --- Symbolvorrat --------------------------------------------------------
   Alle Zeichen liegen einmal als symbol im Dokument und werden per use
   geholt. Strichzeichnungen in currentColor, damit sie die Kategoriefarbe
   uebernehmen. Keine Icon-Schrift, keine fremde Datei. */
.symbolvorrat { display: none; }

.symbol {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.12em;
}

/* --- Marke am Kastenrand -------------------------------------------------
   Das Zeichen sitzt halb im Kasten und halb darueber und schneidet dabei die
   obere Kante. Der Kreis traegt die Papierfarbe, damit die Linie sauber
   unterbrochen wird. */
.mit-marke { position: relative; }
.kastenmarke {
  position: absolute;
  top: 0;
  left: 20px;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--papier);
  border: 1px solid var(--kat);
  border-radius: 50%;
  color: var(--kat);
}
.kastenmarke .symbol { width: 21px; height: 21px; stroke-width: 1.5; }
.mit-marke > h2:first-of-type { margin-top: 34px; }

/* --- Zeichen vor der Koordinatenzeile ------------------------------------ */
.koordinaten-gross { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.koordinaten-gross .symbol {
  width: 1.15em;
  height: 1.15em;
  color: var(--kat);
  stroke-width: 1.4;
  flex: none;
}

/* --- Bildrahmen wie am Kartenblatt ---------------------------------------
   Die Teilung laeuft auf allen vier Seiten um das Bild, aussen eine feine
   Linie. Vier Verlaeufe, kein Bild. */
.bild-rahmen {
  padding: 9px;
  border: 1px solid var(--linie-kraeftig);
  background-color: var(--papier);
  background-image:
    repeating-linear-gradient(to right, var(--tinte-soft) 0 11px, transparent 11px 22px),
    repeating-linear-gradient(to right, var(--tinte-soft) 0 11px, transparent 11px 22px),
    repeating-linear-gradient(to bottom, var(--tinte-soft) 0 11px, transparent 11px 22px),
    repeating-linear-gradient(to bottom, var(--tinte-soft) 0 11px, transparent 11px 22px);
  background-size: 100% 4px, 100% 4px, 4px 100%, 4px 100%;
  background-position: left top, left bottom, left top, right top;
  background-repeat: no-repeat;
}
.bild-rahmen .bild-link img { border: 0; }

/* --- Lagekarte ----------------------------------------------------------- */
.lagekarte {
  --karte-wasser: var(--akzent-tint);
  --karte-land: var(--akzent-signal);
  --karte-netz: #FFFFFF;
  --karte-marke: var(--kat);
  --karte-rahmen: var(--linie-kraeftig);
  max-width: 820px;
  margin: 0;
}
.lagekarte img { width: 100%; }
.lagekarte figcaption {
  font-size: 15px;
  color: var(--gedaempft);
  padding: 9px 2px 10px;
  border-bottom: 1px solid var(--linie);
}

/* --- Fuss auf eigenem Grund ----------------------------------------------
   Dunkler Grund, damit die Seite unten abschliesst. Links bekommen hier ihre
   eigene Farbe und einen eigenen Hover. Ein globales a:hover wuerde diese
   Regeln schlagen, weil eine Pseudoklasse so viel wiegt wie eine Klasse, und
   die Links im Hover unsichtbar machen. */
.fuss {
  margin-top: 80px;
  background: var(--tinte);
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.026) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
  background-size: 64px 64px;
  border-top: 0;
  color: #C7CDD3;
  padding: 44px 0 52px;
}
.fuss::before {
  content: "";
  display: block;
  height: 5px;
  margin: -44px 0 40px;
  background: repeating-linear-gradient(to right,
    rgba(255, 255, 255, 0.28) 0 14px, transparent 14px 28px);
}
.fuss h2 { color: #8D97A1; }
.fuss a { color: #D8DDE2; }
.fuss a:hover { color: #FFFFFF; text-decoration: underline; }
.fuss-zeile { border-top: 1px solid rgba(255, 255, 255, 0.14); color: #8D97A1; }


/* --- Landkarte in der Sidebar --------------------------------------------
   Der Umriss des Landes mit Fadenkreuz auf der Stadt. Sitzt oben im
   Steckbrief, weil die Frage "wo liegt das ueberhaupt" vor allen Zahlen kommt. */
.landkarte {
  --karte-wasser: var(--akzent-tint);
  --karte-land: var(--akzent-signal);
  --karte-nachbar: #DCE6EE;
  --karte-grenze: #FFFFFF;
  --karte-marke: var(--akzent-dunkel);
  --karte-rahmen: var(--linie-kraeftig);
  margin: 0 -20px 4px;
  border-bottom: 1px solid var(--linie);
}
.landkarte img { width: 100%; }
.landkarte figcaption {
  font-size: 14px;
  color: var(--gedaempft);
  padding: 8px 20px 12px;
}

/* Buchstaben ohne eigene Seite bleiben in der Leiste sichtbar, aber stumm.
   Sonst wirkt die Reihe lückenhaft und man sucht den fehlenden Buchstaben. */
.abc span {
  background: var(--papier-soft);
  text-align: center;
  padding: 12px 0;
  font-family: 'Bricolage', system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--linie-kraeftig);
}

/* Fliesstext bleibt auf Lesebreite, Tabellen und Bilder duerfen die volle
   Spalte nutzen. Vorher war der ganze .prose-Block auf 68ch begrenzt und
   Tabellen mussten in sich scrollen, obwohl daneben Platz war. */
.prose { max-width: none; }
.prose > p,
.prose > h2,
.prose > h3,
.prose > h4,
.prose > ul,
.prose > ol,
.prose > blockquote,
.prose > .loesung,
.prose > .hinweis {
  max-width: var(--maxw-text);
}
.prose > .antwort-tabelle,
.prose > figure { max-width: 100%; }
/* Flaggen bleiben schmal. Muss hinter der Regel darueber stehen, sonst gewinnt
   die dank `.prose > figure` mit der hoeheren Spezifitaet. */
.prose > figure.flagge { max-width: 340px; }

/* Gradleiste auf der Startseite: weniger Felder als das Alphabet, breitere
   Beschriftung, deshalb eigene Spaltenzahl. */
.abc-grad { grid-template-columns: repeat(10, 1fr); }
.abc-grad a { font-size: 15px; }
@media (max-width: 700px) { .abc-grad { grid-template-columns: repeat(5, 1fr); } }

/* --- Fadenkreuz über der Länderkarte -------------------------------------
   Die Karte gibt es einmal je Land, die Marke setzt das Template. Position
   in Prozent, gerechnet aus dem Kartenausschnitt. Das spart 16.094
   Einzelkarten. */
.karte-flaeche { position: relative; display: block; }
.karte-flaeche img { width: 100%; height: 100%; display: block; }
.fadenkreuz {
  position: absolute;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  pointer-events: none;
}
.fadenkreuz::before,
.fadenkreuz::after {
  content: "";
  position: absolute;
  background: var(--akzent-dunkel);
}
.fadenkreuz::before { left: 50%; top: 0; width: 1.8px; height: 100%; margin-left: -0.9px; }
.fadenkreuz::after { top: 50%; left: 0; height: 1.8px; width: 100%; margin-top: -0.9px; }
.fadenkreuz > i,
.fadenkreuz::marker { display: none; }
/* Ring in der Mitte, damit die Marke nicht nur ein Kreuz ist */
.karte-flaeche .fadenkreuz {
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0 5.2px,
      var(--akzent-dunkel) 5.2px 7px,
      transparent 7px);
}

/* Quellenhinweis unter dem Steckbrief */
.quelle {
  font-size: 13px;
  line-height: 1.45;
  color: var(--gedaempft);
  margin: 16px 0 4px;
}
/* Kachel ohne Ziel: sieht aus wie die anderen, reagiert aber nicht */
.raster a.stumm { cursor: default; }
.raster a.stumm:hover { background: var(--weiss); }

/* Satz zum geografischen Mittelpunkt, direkt unter dem Lead */
.mittelpunkt {
  max-width: var(--maxw-text);
  margin: 18px 0 0;
  padding: 12px 16px;
  background: var(--weiss);
  border-left: 3px solid var(--kat);
  font-size: 17px;
  line-height: 1.6;
  color: var(--tinte-soft);
}
.mittelpunkt .symbol { width: 1.05em; height: 1.05em; color: var(--kat); }
.mittelpunkt strong {
  font-family: 'PlexMono', ui-monospace, monospace;
  font-weight: 600;
  font-size: 15px;
  color: var(--tinte);
  white-space: nowrap;
}

/* Kleiner Punkt fuer die Hauptstadt neben dem Fadenkreuz */
.kartenpunkt {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--akzent-dunkel);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
  pointer-events: none;
}

/* Einschränkende Fußnote im Fließtext, ruhiger gesetzt als der Satz davor */
.fussnote {
  display: block;
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gedaempft);
}

/* --- Hero über dem Artikel ------------------------------------------------
   Volle Spaltenbreite, im Kartenrahmen wie alle Bilder, klickbar zur
   Lightbox. Steht unter dem Lead, damit der Zählpixel und die direkte
   Antwort zuerst kommen. */
.hero { margin: 8px 0 36px; max-width: 100%; }
.hero .bild-rahmen { padding: 10px; }
.hero img { width: 100%; height: auto; }
.hero figcaption {
  font-size: 15px;
  color: var(--gedaempft);
  padding: 10px 2px 11px;
  border-bottom: 1px solid var(--linie);
}

/* --- Galerie als Schiene --------------------------------------------------
   Waagerecht scrollbar mit Einrastpunkten, ohne JavaScript. Auf breiten
   Schirmen liegen drei Bilder nebeneinander, auf schmalen eins, und man
   wischt weiter. */
.galerie {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  margin-top: 8px;
  scrollbar-width: thin;
}
.galerie figure {
  margin: 0;
  scroll-snap-align: start;
  background: var(--weiss);
  border: 1px solid var(--linie);
}
.galerie img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.galerie figcaption {
  font-size: 14px;
  line-height: 1.45;
  color: var(--gedaempft);
  padding: 9px 12px 12px;
}
@media (min-width: 981px) {
  /* Feste Spaltenbreite, kein minmax mit Null als Untergrenze. Sonst
     schrumpfen bei fuenf Bildern alle Spalten, bis sie nebeneinander passen,
     und die Schiene scrollt nie. */
  .galerie { grid-auto-columns: calc((100% - 36px) / 3); }
}

/* Urhebernachweis unter der Galerie */
.bildnachweis {
  max-width: var(--maxw-text);
  margin: 26px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--linie);
  font-size: 14px;
  line-height: 1.55;
  color: var(--gedaempft);
}
.bildnachweis a { color: var(--gedaempft); text-decoration: underline; text-underline-offset: 2px; }
.bildnachweis a:hover { color: var(--akzent); }

/* Traegerzeile für den Zählpixel, wenn die Seite ohne Einleitungsabsatz beginnt */
.pixelzeile { margin: 0; height: 0; overflow: hidden; }

/* Hero auf ein ruhiges Format bringen. Ohne feste Höhe füllt ein hochkant
   aufgenommenes Bild den ganzen ersten Bildschirm. */
.hero img { aspect-ratio: 3/2; object-fit: cover; }
/* Die Spielgrafik der Buchstabenseiten ist fast quadratisch (1200x1006) und
   darf nicht auf 3:2 beschnitten werden, sonst fehlen die unteren Lösungen. */
.hero.spielgrafik img { aspect-ratio: 1200/1006; object-fit: contain; }

/* ===================================================================== A11y */
/* Sprunglink: liegt außerhalb des Bildes und kommt erst beim Tabben hervor.
   Nicht display:none, das nähme ihn auch der Tastatur weg. */
.sprunglink {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  padding: 10px 18px;
  background: var(--tinte);
  color: var(--papier);
  border-radius: 0 0 6px 6px;
  text-decoration: none;
  transition: top 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sprunglink:focus { top: 0; }
main:focus { outline: none; }

/* Sichtbarer Fokus überall dort, wo der Browser ihn sonst schluckt. Zwei
   Farben, damit der Ring auf hellem wie auf dunklem Grund steht. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ------------------------------------------- Inhaltsverzeichnis Lösungsseiten

   Die Lösungsübersichten führen 15 Kategorien untereinander. Ohne Verzeichnis
   scrollt man an allem vorbei, was man sucht. Bewusst NICHT sticky: ein
   mitlaufender Kasten frisst auf dem Notebook die halbe Höhe. */

.mit-toc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 48px;
  align-items: start;
}
.mit-toc .prose { grid-column: 1; grid-row: 1; }
.toc {
  grid-column: 2;
  grid-row: 1;
  border-top: 2px solid var(--kat);
  background: var(--weiss);
  padding: 2px 4px 10px;
  margin-top: 34px;
}
.toc h2 {
  font-family: 'Bricolage', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kat);
  margin: 14px 16px 8px;
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.toc li { margin: 0; }
.toc a {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  color: var(--tinte);
  text-decoration: none;
  border-bottom: 1px solid var(--papier-soft);
  font-size: 15px;
  transition: background-color 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
.toc li:last-child a { border-bottom: 0; }
.toc a .symbol { width: 18px; height: 18px; color: var(--kat); }
.toc a b {
  font-family: 'PlexMono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--gedaempft);
}
.toc a:hover, .toc a:focus-visible { background: var(--akzent-tint); }
.toc a:hover b, .toc a:focus-visible b { color: var(--tinte); }

/* Das Zeichen vor der Überschrift, an der Stelle der früheren Emojis */
.prose h2 .kat-zeichen {
  width: 0.86em;
  height: 0.86em;
  color: var(--kat);
  margin-right: 0.24em;
  vertical-align: -0.04em;
}

/* Sprungziele nicht unter den Rand des Fensters legen */
.prose h2[id] { scroll-margin-top: 20px; }

@media (max-width: 980px) {
  .mit-toc { grid-template-columns: 1fr; gap: 0; }
  .mit-toc .prose { grid-column: 1; grid-row: 2; }
  .toc { grid-column: 1; grid-row: 1; margin: 8px 0 32px; }
  /* Auf schmalen Schirmen zwei Spalten, sonst scrollt man am Verzeichnis
     genauso lange vorbei wie vorher am Inhalt. */
  .toc ol { display: grid; grid-template-columns: 1fr 1fr; }
  .toc li:nth-last-child(2) a { border-bottom: 0; }
}
@media (max-width: 560px) {
  .toc ol { grid-template-columns: 1fr; }
  .toc li:nth-last-child(2) a { border-bottom: 1px solid var(--papier-soft); }
}

/* ------------------------------------------------ Fehler melden

   Band über dem Fuß, auf jeder Seite, plus das Formular selbst.
   Kein JavaScript: Die Herkunfts-URL hängt am Link und landet drüben in
   einem versteckten Feld. */

.melden-band {
  border-top: 1px solid var(--linie);
  background: var(--weiss);
  padding: 26px 0;
}
.melden-band .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
}
.melden-band p { margin: 0; max-width: 62ch; color: var(--gedaempft); }
.melden-band b { color: var(--tinte); font-weight: 600; }

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--kat);
  color: var(--weiss);
  border: 0;
  font-family: 'Bricolage', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 22px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
.knopf:hover, .knopf:focus-visible {
  background: var(--akzent-dunkel);
  color: var(--weiss);
  transform: translateY(-1px);
  text-decoration: none;
}
.knopf .symbol { width: 17px; height: 17px; }
.knopf-still {
  background: transparent;
  color: var(--kat);
  box-shadow: inset 0 0 0 1.5px var(--kat);
  margin-left: 10px;
}
.knopf-still:hover, .knopf-still:focus-visible {
  background: var(--kat);
  color: var(--weiss);
}

/* --- Das Formular -------------------------------------------------------- */

.melden { margin: 8px 0 0; }
.melden .feld { margin: 0 0 24px; }
.melden label {
  display: block;
  font-family: 'Bricolage', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 7px;
}
.melden .wahlfrei {
  font-weight: 400;
  font-size: 13px;
  color: var(--gedaempft);
  margin-left: 5px;
}
.melden input[type="text"],
.melden input[type="email"],
.melden textarea {
  width: 100%;
  font-family: 'SourceSerif', Georgia, serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--tinte);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-bottom-width: 2px;
  padding: 11px 13px;
  transition: border-color 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
.melden textarea { resize: vertical; min-height: 150px; }
.melden input:focus, .melden textarea:focus {
  outline: none;
  border-color: var(--kat);
}
.melden .hilfe {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--gedaempft);
}
.melden .daneben input,
.melden .daneben textarea,
.melden fieldset.daneben { border-color: var(--kat-stadt); }

.melden fieldset {
  border: 0;
  border-top: 2px solid var(--kat);
  background: var(--weiss);
  padding: 4px 18px 14px;
  margin: 0 0 26px;
}
.melden legend {
  font-family: 'Bricolage', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kat);
  padding: 0 8px 0 0;
}
.melden .wahl {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 400;
  font-family: 'SourceSerif', Georgia, serif;
  font-size: 17px;
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--papier-soft);
  cursor: pointer;
}
.melden .wahl:last-child { border-bottom: 0; }
.melden .wahl input { accent-color: var(--kat); width: 18px; height: 18px; }

.melden .feld-paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 26px;
}

/* Herkunftszeile: welche Seite gemeldet wird */
.melden .herkunft {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--akzent-tint);
  border-left: 3px solid var(--kat);
  padding: 11px 15px;
  margin: 0 0 26px;
  font-size: 16px;
}
.melden .herkunft .symbol { width: 18px; height: 18px; color: var(--kat); flex: none; }

.melden .kleingedruckt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gedaempft);
  max-width: 68ch;
  margin: 22px 0 0;
}

/* Honigtopf. Nicht display:none, das erkennen die besseren Skripte. */
.melden .koeder {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.toc-fuss {
  margin: 14px 16px 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gedaempft);
}

@media (max-width: 700px) {
  .melden .feld-paar { grid-template-columns: 1fr; }
  .melden-band .wrap { flex-direction: column; align-items: flex-start; }
}

@media print {
  .melden-band { display: none; }
}

/* -------------------------------------------- Spielzettel-Generator

   Das Kategorienraster im Formular. Mehrspaltig, damit 21 Kästchen nicht
   als endlose Liste untereinander stehen. */

.zettel .kat-wahl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 22px;
}
.zettel .kat-wahl .wahl { padding: 7px 0; }
.zettel fieldset .hilfe { margin: 10px 0 2px; }
.zettel input[type="number"] { max-width: 120px; }
.zettel .knopf { font-size: 17px; padding: 15px 26px; }

@media (max-width: 860px) {
  .zettel .kat-wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .zettel .kat-wahl { grid-template-columns: 1fr; }
}

/* Vorschaubilder auf der Spielzettel-Seite: Papier auf Papier, deshalb ein
   feiner Rahmen statt der Kartenteilung der Artikelbilder. */
.zettelbild { margin: 26px 0 30px; }
.zettelbild .bild-rahmen { background: var(--weiss); padding: 0; }
.zettelbild img { display: block; width: 100%; height: auto; }

/* Mittelpunkt außerhalb des Staatsgebiets: gestrichelt statt durchgezogen.
   Bei 20 Ländern fällt der Flächenschwerpunkt aus dem Land, bei Kroatien
   liegt er in Bosnien. Ein durchgezogenes Fadenkreuz mitten im Nichts sieht
   dort aus wie ein Fehler, deshalb wird der Unterschied sichtbar gemacht. */
.fadenkreuz-aus::before,
.fadenkreuz-aus::after { background: none; }
.fadenkreuz-aus::before {
  border-left: 1.8px dashed var(--gedaempft);
  width: 0;
}
.fadenkreuz-aus::after {
  border-top: 1.8px dashed var(--gedaempft);
  height: 0;
}
.karte-flaeche .fadenkreuz-aus {
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0 5.2px,
      var(--gedaempft) 5.2px 6.4px,
      transparent 6.4px);
}

/* Bilder auf der Länderseite. Nebeneinander, wenn Platz ist. */
.galerie-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
  margin: 34px 0 8px;
}
.galerie-block .bild { margin: 0; }

/* Anmerkung und Quelle zum Mittelpunkt */
.mittelpunkt-anmerkung {
  font-size: 15px;
  line-height: 1.6;
  color: var(--tinte-soft);
  border-left: 2px solid var(--linie);
  padding-left: 14px;
  margin: 10px 0 0;
  max-width: 62ch;
}
.mittelpunkt-quelle {
  font-size: 13px;
  color: var(--gedaempft);
  margin: 8px 0 0;
}

/* --- Anzeigen ------------------------------------------------------------
   Werbung sitzt zwischen den Inhaltsbloecken, nie in ihnen. Sie bekommt
   deshalb denselben Abstand wie ein Abschnitt und eine feine Trennlinie
   oben und unten: Der Leser soll auf einen Blick sehen, wo der eigene Text
   aufhoert.

   `min-height` ist keine Gestaltung, sondern gegen das Springen. Die
   endgueltige Hoehe bestimmt Google und laesst sich nicht vorgeben; ohne
   reservierten Platz rutscht der Text beim Nachladen nach unten. Der Wert
   ist bewusst niedrig gehalten: Zu viel reservierter Platz hinterlaesst ein
   Loch, wenn ein Werbefilter den Block leer laesst. */
.anzeige {
  display: block;
  margin: clamp(28px, 4vw, 44px) 0;
  padding: 6px 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  min-height: 116px;
  overflow: hidden;
}

.anzeige-marke {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gedaempft);
}

.anzeige ins { display: block; }

/* Der Multiplex am Seitenende ist eine Kachelflaeche und braucht mehr Raum,
   sonst schneidet `overflow: hidden` die zweite Reihe ab. */
.anzeige-ende { min-height: 260px; }

/* Beim Drucken hat Werbung nichts verloren. Auf einer Raetselseite wird
   gedruckt, siehe den uebrigen Druckstil weiter oben. */
@media print {
  .anzeige { display: none; }
}