/* Stylesheet fuer allgemein-bildung.de.
 *
 * Diese Datei wird direkt bearbeitet und direkt ausgeliefert - es gibt
 * keinen Build dazwischen. Die Abschnitte darunter waren einmal eigene
 * Dateien; die Reihenfolge ist bedeutungstragend: Tokens zuerst,
 * Hilfsklassen zuletzt.
 */

/* ============================================================
   TOKENS
   ============================================================ */
/* Design-Tokens.
 *
 * Die Palette stammt aus dem Logo, nicht aus einem Framework: Pergament
 * (#ECE4D5), Pfirsich (#FFE2C7) und Eulenbraun (#996C38) sind die drei
 * Farben, aus denen die Eule besteht. Bootstrap hatte das schon halb
 * uebernommen - --bs-primary-rgb war auf 255,226,199 ueberschrieben - aber
 * eben nur diese eine Variable, waehrend der Rest Framework-Blau blieb.
 *
 * Aufbau: Die vollstaendige helle Palette steht auf blankem :root. Dunkel
 * definiert nur die Tokens neu, die sich aendern, und zwar zweimal - einmal
 * ueber prefers-color-scheme (Systemeinstellung) und einmal ueber
 * [data-theme="dark"] (Umschalter). Die Media-Query ist gegen
 * [data-theme="light"] abgesichert, damit der Umschalter in beide Richtungen
 * gewinnt.
 */

:root {
  color-scheme: light;

  /* --- Flaechen ------------------------------------------------------- */
  --bg: #fbf6ee;
  --surface: #ffffff;
  --surface-2: #f4ead9;
  --surface-3: #ece4d5;

  /* --- Text ----------------------------------------------------------- */
  --ink: #241c14;
  --ink-muted: #6b5b4a;
  --ink-faint: #7d6d58;

  /* --- Marke ---------------------------------------------------------- */
  --brand: #7a5228;
  --brand-strong: #5c3d1d;
  --brand-soft: #ffe2c7;
  --accent: #a05512;

  /* --- Linien --------------------------------------------------------- */
  --border: #e3d5c0;
  --border-strong: #9d8a6e;

  /* --- Zustaende ------------------------------------------------------ */
  --ok: #1a6f42;
  --ok-bg: #e4f2ea;
  --ok-border: #458f68;
  --no: #a52a1f;
  --no-bg: #fbe9e7;
  --no-border: #c95f52;

  /* Text, der direkt auf einer gesaettigten Zustandsflaeche steht - etwa der
     Prozentwert in der Kategorietafel. Er kann weder --ink noch ein festes
     Weiss sein: die Fuellfarben sind im Hellen dunkel und im Dunkeln
     pastellig, die Schriftfarbe darauf muss also mitkippen. */
  --auf-signal: #ffffff;

  /* --- Fokus ---------------------------------------------------------- */
  --focus: #1a5fb4;

  /* --- Typografie ----------------------------------------------------- */
  /* Durchgehend serifenlos und ohne Webfont: keine zusaetzliche Anfrage,
     kein Nachladeruckeln, kein stiller Fallback. Der Charakter kommt aus
     Gewichtskontrast, Laufweite und der warmen Palette - nicht aus einer
     Schriftlizenz. */
  --font-text: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui: var(--font-text);

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2: clamp(1.45rem, 1.3rem + 0.75vw, 1.95rem);
  --step-3: clamp(1.75rem, 1.5rem + 1.25vw, 2.6rem);
  --step-4: clamp(2.1rem, 1.7rem + 2vw, 3.4rem);

  /* --- Raster --------------------------------------------------------- */
  --wrap: 68rem;
  --wrap-text: 40rem;
  --gap: clamp(1rem, 0.8rem + 1vw, 1.75rem);

  --radius: 0.75rem;
  --radius-lg: 1.25rem;

  --shadow: 0 1px 2px rgb(36 28 20 / 0.06), 0 4px 12px rgb(36 28 20 / 0.06);
  --shadow-lg: 0 2px 4px rgb(36 28 20 / 0.08), 0 12px 32px rgb(36 28 20 / 0.1);

  /* --- Bewegung ------------------------------------------------------- */
  --dur: 160ms;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #14100c;
    --surface: #1d1813;
    --surface-2: #262019;
    --surface-3: #322921;

    --ink: #f3e9db;
    --ink-muted: #b8a894;
    --ink-faint: #8a7a66;

    --brand: #e0b483;
    --brand-strong: #f0cba4;
    --brand-soft: #3a2c1e;
    --accent: #e8a34a;

    --border: #382e24;
    --border-strong: #736250;

    --ok: #6ee7a0;
    --ok-bg: #10281c;
    --ok-border: #46996c;
    --no: #ff9c8f;
    --no-bg: #2e1310;
    --no-border: #b25f52;
    --auf-signal: #14100c;

    --focus: #7fb2ff;

    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.35);
    --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.45), 0 12px 32px rgb(0 0 0 / 0.45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #14100c;
  --surface: #1d1813;
  --surface-2: #262019;
  --surface-3: #322921;

  --ink: #f3e9db;
  --ink-muted: #b8a894;
  --ink-faint: #8a7a66;

  --brand: #e0b483;
  --brand-strong: #f0cba4;
  --brand-soft: #3a2c1e;
  --accent: #e8a34a;

  --border: #382e24;
  --border-strong: #736250;

  --ok: #6ee7a0;
  --ok-bg: #10281c;
  --ok-border: #46996c;
  --no: #ff9c8f;
  --no-bg: #2e1310;
  --no-border: #b25f52;
  --auf-signal: #14100c;

  --focus: #7fb2ff;

  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.45), 0 12px 32px rgb(0 0 0 / 0.45);
}


/* ============================================================
   BASE
   ============================================================ */
/* Grundlagen: Reset, Typografie, Fokus, Bewegung. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  /* Explizit gesetzt, nicht transparent: sonst scheint bei eingebetteter
     Darstellung der Untergrund des Wirts durch. */
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.65;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* --- Ueberschriften ---------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-text);
  line-height: 1.15;
  text-wrap: balance;
  font-weight: 700;
}

h1 {
  font-size: var(--step-4);
  letter-spacing: -0.015em;
}
h2 {
  font-size: var(--step-3);
  letter-spacing: -0.01em;
}
h3 {
  font-size: var(--step-2);
}
h4 {
  font-size: var(--step-1);
}

p {
  text-wrap: pretty;
}

/* --- Links -------------------------------------------------------------- */

a {
  color: var(--brand);
  text-decoration-color: color-mix(in oklab, var(--brand) 40%, transparent);
  text-underline-offset: 0.15em;
  text-decoration-thickness: from-font;
}

a:hover {
  color: var(--brand-strong);
  text-decoration-color: currentColor;
}

/* --- Fokus -------------------------------------------------------------- */
/* Immer sichtbar und immer aussen liegend, damit der Ring nicht von einem
   ueberlappenden Element verdeckt wird. */

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* --- Medien ------------------------------------------------------------- */

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

/* --- Formularelemente --------------------------------------------------- */

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* --- Auswahl ------------------------------------------------------------ */

::selection {
  background: var(--brand-soft);
  color: var(--ink);
}

/* --- Bewegung ----------------------------------------------------------- */
/* Farbe und Symbol bleiben immer erhalten - reduziert wird nur Bewegung,
   nicht die Information. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================
   LAYOUT
   ============================================================ */
/* Raster, Kopf- und Fusszeile. */

.wrap {
  width: min(100% - 2 * var(--gap), var(--wrap));
  margin-inline: auto;
}

.wrap--text {
  width: min(100% - 2 * var(--gap), var(--wrap-text));
  margin-inline: auto;
}

main {
  flex: 1;
  padding-block: clamp(1.5rem, 1rem + 2vw, 3.5rem);
}

.stack > * + * {
  margin-block-start: var(--fluss, 1.25rem);
}

/* --- Sprungmarke -------------------------------------------------------- */

.skip-link {
  position: absolute;
  inset-inline-start: 0.5rem;
  inset-block-start: -100%;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--brand);
  border-radius: var(--radius);
  text-decoration: none;
}

.skip-link:focus {
  inset-block-start: 0.5rem;
}

/* --- Kopfzeile ---------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--border);
}

.kopf__inner {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: 3.75rem;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
}

.marke img {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-inline-start: auto;
  font-family: var(--font-ui);
  font-size: var(--step--1);
}

.nav a {
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius);
  color: var(--ink-muted);
  text-decoration: none;
  white-space: nowrap;
}

.nav a:hover {
  background: var(--surface-2);
  color: var(--ink);
}

/* aria-current traegt die Information, nicht nur die Farbe. */
.nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--brand-soft);
  font-weight: 600;
}

/* --- Kopfzeile, kompakt -------------------------------------------------- */

/* Erste Breiten-Media-Query des Projekts. 40rem, weil unterhalb davon Logo,
   Schriftzug, drei Navlinks und der Themenumschalter nicht mehr in eine Zeile
   passen - bei 375px lief die Zeile ueber. Der Wert ist derselbe wie
   --wrap-text; als Token laesst er sich hier nicht schreiben, Custom
   Properties sind in @media-Bedingungen nicht auswertbar.

   Aufteilung nach data-js: was die Navigation ausblendet, haengt daran. Ohne
   JavaScript bleibt die Kopfzeile eine umbrechende Zeile mit allen Links -
   nur eben zweizeilig. */
@media (max-width: 40rem) {
  .kopf__inner {
    flex-wrap: wrap;
  }

  /* Nicht display:none. Das Logo traegt alt="" aria-hidden="true", der
     Schriftzug ist damit der einzige zugaengliche Name des Links auf die
     Startseite. Ausblenden wie .visually-hidden in 50-utilities.css: optisch
     weg, fuer Screenreader da. */
  .marke__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* .nav traegt sonst das margin-inline-start:auto, das alles rechts an den
     Rand schiebt. Im Panel-Modus faellt es weg, also uebernimmt der erste
     Knopf die Aufgabe. */
  :root[data-js] .theme-toggle {
    margin-inline-start: auto;
  }

  :root[data-js] .nav-schalter {
    display: inline-grid;
  }

  /* Panel unter der Kopfzeile. .kopf ist sticky und bildet damit selbst den
     Bezugsrahmen fuer die absolute Positionierung. */
  :root[data-js] .nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    margin-inline-start: 0;
    padding: 0.5rem var(--gap) 0.75rem;
    background: var(--bg);
    border-block-end: 1px solid var(--border);
  }

  :root[data-js] .kopf[data-nav-offen] .nav {
    display: flex;
  }

  :root[data-js] .nav a {
    padding: 0.7rem;
  }
}

/* --- Fusszeile ---------------------------------------------------------- */

.fuss {
  margin-block-start: auto;
  border-block-start: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.fuss__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem var(--gap);
  align-items: center;
  justify-content: space-between;
  padding-block: 1.5rem;
}

.fuss nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.fuss a {
  color: var(--ink-muted);
}

.fuss a:hover {
  color: var(--ink);
}

/* --- Raster ------------------------------------------------------------- */

.raster {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}


/* ============================================================
   COMPONENTS
   ============================================================ */
/* Wiederkehrende Bausteine. */

/* --- Schaltflaechen ----------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: var(--font-ui);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primaer {
  background: var(--brand);
  color: var(--surface);
  border-color: var(--brand);
}

/* Im Dunkelmodus ist --brand hell, also braucht der Text dort dunklen Grund. */
:root[data-theme="dark"] .btn--primaer,
:root:not([data-theme="light"]) .btn--primaer {
  color: var(--bg);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .btn--primaer {
    color: var(--surface);
  }
}

.btn--primaer:hover {
  background: var(--brand-strong);
  border-color: var(--brand-strong);
  color: var(--surface);
}

:root[data-theme="dark"] .btn--primaer:hover {
  color: var(--bg);
}

.btn--sekundaer {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border-strong);
}

.btn--sekundaer:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.btn--schlicht {
  background: none;
  color: var(--ink-muted);
  padding-inline: 0.6rem;
}

.btn--schlicht:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --- Themenumschalter --------------------------------------------------- */

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-muted);
  flex: none;
}

.theme-toggle:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.theme-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* Nur je ein Symbol zeigen - welches, haengt am Theme. */
.theme-toggle .ikon-mond {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .ikon-sonne {
  display: none;
}
:root[data-theme="dark"] .theme-toggle .ikon-mond {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .ikon-sonne {
    display: none;
  }
  :root:not([data-theme="light"]) .theme-toggle .ikon-mond {
    display: block;
  }
}

/* --- Navigationsumschalter ---------------------------------------------- */

/* Optik bewusst identisch zum Themenumschalter darueber - beide sitzen
   nebeneinander in der Kopfzeile. Ob er ueberhaupt erscheint, entscheidet
   allein die Kompakt-Media-Query in 20-layout.css. */
.nav-schalter {
  display: none;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-muted);
  flex: none;
}

.nav-schalter:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.nav-schalter svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Nur je ein Symbol zeigen - welches, haengt am Zustand des Panels. */
.nav-schalter .ikon-kreuz {
  display: none;
}

.kopf[data-nav-offen] .nav-schalter .ikon-burger {
  display: none;
}

.kopf[data-nav-offen] .nav-schalter .ikon-kreuz {
  display: block;
}

/* --- Karten ------------------------------------------------------------- */

.karte {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.15rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

a.karte,
.karte a {
  text-decoration: none;
}

a.karte:hover,
.karte:has(a:hover) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}

.karte__titel {
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}

.karte__meta {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

/* --- Chips (Kategorien) -------------------------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  text-decoration: none;
  white-space: nowrap;
}

.chip:hover {
  background: var(--brand-soft);
  color: var(--ink);
}

.chip[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--surface);
  font-weight: 600;
}

:root[data-theme="dark"] .chip[aria-pressed="true"] {
  color: var(--bg);
}

.chip__zahl {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.chip[aria-pressed="true"] .chip__zahl {
  color: inherit;
  opacity: 0.8;
}

/* --- Brotkrumen ---------------------------------------------------------- */

.krumen {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.krumen ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
}

.krumen li + li::before {
  content: "›";
  margin-inline-end: 0.4rem;
  color: var(--ink-faint);
}

/* --- Dialog -------------------------------------------------------------- */
/* Nativ statt nachgebaut: Fokusfalle, Esc und die Hintergrundsperre bringt
   das Element selbst mit - kein Framework-JS noetig. */

dialog {
  /* margin:auto ist es, was einen modalen Dialog mittig stellt - das
     Browser-Stylesheet setzt es selbst. Der Reset in 10-base.css setzt aber
     margin:0 auf jedes Element und nahm es damit wieder weg; der Dialog
     klebte in der linken oberen Ecke. Hier steht es deshalb wieder. */
  margin: auto;

  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  /* --bg statt --surface: --surface ist im Hellen reines Weiss und wirkte
     wie ein Fremdkoerper vor den warmen Flaechen der Seite. */
  background: var(--bg);
  color: var(--ink);
  padding: 0;
  max-width: min(100% - 2rem, 34rem);
  box-shadow: var(--shadow-lg);
}

dialog::backdrop {
  background: rgb(20 16 12 / 0.55);
  backdrop-filter: blur(2px);
}

.dialog__kopf {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.35rem 0.5rem;
}

.dialog__titel {
  font-size: var(--step-1);
  font-weight: 700;
}

.dialog__koerper {
  padding: 0.5rem 1.35rem 1rem;
  max-height: min(60dvh, 32rem);
  overflow-y: auto;
}

.dialog__fuss {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.9rem 1.35rem 1.25rem;
  /* Haarlinie statt Farbflaeche: trennt den Knopf vom Fliesstext, ohne dem
     Dialog einen zweiten Farbton zu geben. */
  border-block-start: 1px solid var(--border);
}

/* --- Hub-Seiten ---------------------------------------------------------- */
/* Seiten, die gleichzeitig ein Werkzeug und ein Text sind: oben das Quiz in
   voller Breite, darunter Fliesstext in Lesebreite. Die beiden Bereiche
   brauchen unterschiedliche Masse - deshalb setzt der Textteil die Breite
   selbst, statt sie vom umgebenden .wrap zu erben. */

.hub__kopf {
  width: min(100%, var(--wrap-text));
  margin-inline: auto;
  margin-block-end: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  text-align: center;
}

.hub__kopf h1 {
  font-size: var(--step-3, clamp(1.9rem, 1.5rem + 1.6vw, 2.7rem));
  text-wrap: balance;
}

.hub__vorspann {
  margin-block-start: 0.9rem;
  color: var(--ink-muted);
  font-size: var(--step-1);
  line-height: 1.5;
  text-wrap: pretty;
}

.hub__text {
  margin-block-start: clamp(2.5rem, 2rem + 3vw, 5rem);
  padding-block-start: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-block-start: 1px solid var(--border);
}

.hub__text > * + * {
  margin-block-start: 1.1rem;
}

.hub__text h2 {
  font-size: var(--step-2);
  margin-block-start: 2.75rem;
  text-wrap: balance;
}

.hub__text h3 {
  font-size: var(--step-0);
  margin-block-start: 1.9rem;
}

/* --- Gebietstabelle ------------------------------------------------------- */

.gebiete {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.gebiete th,
.gebiete td {
  padding: 0.5rem 0.7rem;
  text-align: start;
  border-block-end: 1px solid var(--border);
}

.gebiete th {
  color: var(--ink-faint);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Zahlenspalten rechtsbuendig und auf gleicher Ziffernbreite - sonst
   springen die Werte von Zeile zu Zeile. */
.gebiete td.zahlen,
.gebiete th:not(:first-child) {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.gebiete tbody tr:hover {
  background: var(--surface-2);
}

/* --- Rechtstexte --------------------------------------------------------- */
/* Impressum und Datenschutz sind das Einzige auf der Seite, was am Stueck
   gelesen wird: langer Fliesstext, keine Karten, keine Bilder. Sie brauchen
   deshalb einen eigenen Leserhythmus - die Utility-Klasse .bloecke setzt
   Abstaende nur zwischen direkten Kindern von main, der Text liegt aber eine
   Ebene tiefer und stuende sonst ohne jeden Zwischenraum. */

.rechtstext > * + * {
  margin-block-start: 1.1rem;
}

.rechtstext h1 {
  margin-block-end: 1.75rem;
}

/* Die Haarlinie ersetzt die Nummerierung als Gliederungssignal: bei zwoelf
   Abschnitten sieht man so auf einen Blick, wo einer endet. */
.rechtstext h2 {
  font-size: var(--step-2);
  margin-block-start: 2.75rem;
  padding-block-start: 1.4rem;
  border-block-start: 1px solid var(--border);
}

.rechtstext h3 {
  font-size: var(--step-0);
  margin-block-start: 1.9rem;
}

.rechtstext ul,
.rechtstext ol {
  padding-inline-start: 1.4rem;
}

.rechtstext li + li {
  margin-block-start: 0.5rem;
}

/* Anschrift und Kontakt heben sich ab, ohne eine eigene Flaeche zu
   brauchen - es sind die Angaben, wegen derer die Seite aufgerufen wird. */
.rechtstext .anschrift,
.rechtstext .kontakt {
  padding-inline-start: 0.9rem;
  border-inline-start: 3px solid var(--brand-soft);
  line-height: 1.6;
}

.rechtstext code {
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--surface-2);
}

.inhaltsverzeichnis {
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: var(--step--1);
}

.inhaltsverzeichnis ol {
  padding-inline-start: 1.3rem;
}

.inhaltsverzeichnis li + li {
  margin-block-start: 0.3rem;
}

/* --- Hinweisleiste ------------------------------------------------------- */

.hinweis {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-ui);
  font-size: var(--step--1);
}

/* --- Artikel (Fragenseite) ----------------------------------------------- */

.frage__loesung {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin-block: 1.25rem;
  padding: 1rem 1.25rem;
  border-inline-start: 4px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--brand-soft);
  font-size: var(--step-1);
  font-weight: 700;
}

.frage__label {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.frage__bench {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.frage__text > * + * {
  margin-block-start: 1.15rem;
}

/* --- Verwandte Fragen ----------------------------------------------------- */

.verwandt h2 {
  font-size: var(--step-2);
  margin-block-end: 1rem;
}

/* --- Ruecksprung ins Quiz -------------------------------------------------- */

.quiz-teaser {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem var(--gap);
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.6rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.quiz-teaser__text {
  font-size: var(--step-1);
  margin: 0;
}

/* --- Startseite ------------------------------------------------------------ */

.held {
  padding-block: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  text-align: center;
}

.held p {
  max-width: 34rem;
  margin-inline: auto;
  margin-block-start: 1rem;
  font-size: var(--step-1);
  color: var(--ink-muted);
}

.held__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-block-start: 1.75rem;
}

.kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: center;
  margin-block-start: 2rem;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.kennzahl b {
  display: block;
  font-family: var(--font-text);
  font-size: var(--step-2);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Kopf des eingebetteten Tagesquiz auf der Startseite - dieselbe Anordnung
   wie .hub__kopf (zentriert, Lesebreite, gedaempfter Vorspann), aber als
   eigene Klasse: .hub__kopf ist an ein <h1> auf der Quiz-Hub-Seite gebunden,
   hier steht ein <h2> innerhalb von .held. */
.tagesquiz__kopf {
  width: min(100%, var(--wrap-text));
  margin-inline: auto;
  margin-block-end: clamp(1.25rem, 1rem + 1vw, 2rem);
  text-align: center;
}

/* Sprungziel des "Tagesquiz"-Knopfs im Held: .kopf ist sticky mit
   min-height 3.75rem, ohne Aussparung landet die Ueberschrift genau
   dahinter. scroll-margin-top gehoert auf das Sprungziel selbst
   (#tagesquiz), nicht auf .tagesquiz__kopf - Anker springen zum Element
   mit der ID, nicht zu dessen Kindern. */
#tagesquiz {
  scroll-margin-top: 5.5rem;
}

.tagesquiz__kopf h2 {
  font-size: var(--step-2);
  text-wrap: balance;
}

.tagesquiz__kopf p {
  margin-block-start: 0.5rem;
  color: var(--ink-muted);
  font-size: var(--step-0);
  text-wrap: pretty;
}

/* --- Fragenverzeichnis ------------------------------------------------------ */

.verzeichnis {
  display: grid;
  gap: 0.15rem;
  list-style: none;
  padding: 0;
}

.verzeichnis a {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}

.verzeichnis a:hover {
  background: var(--surface-2);
  color: var(--brand-strong);
}


/* ============================================================
   QUIZ
   ============================================================ */
/* Das Quiz.
 *
 * Zwei Regeln ziehen sich durch: Zustand wird nie allein ueber Farbe
 * vermittelt (immer zusaetzlich Symbol und Text), und jede Bewegung ist
 * abschaltbar.
 *
 * Der Fortschrittsbalken laeuft gegen die persoenliche Bestmarke, nicht
 * gegen ein Rundenende - das Spiel hat keins, und ein Balken darauf wuerde
 * eines versprechen. Fuellt er sich, naehert man sich der eigenen Bestmarke;
 * ist er voll, ist sie geknackt.
 */

.quiz {
  --quiz-max: 42rem;
  width: min(100%, var(--quiz-max));
  margin-inline: auto;
}

/* --- Filter -------------------------------------------------------------- */
/* Drei Auswahlfelder statt Chips: sie zeigen den gewaehlten Wert dauerhaft
   an, und genau das fehlte vorher - ?kategorie=geschichte filterte still.
   Native <select> bringen Tastatur, Screenreader und die Bedienung auf dem
   Telefon von sich aus mit. */

.quiz__filter {
  margin-block-end: 1.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

/* Ist gefiltert, faerbt sich der Rahmen. Der Kasten sieht sonst gleich aus,
   ob eingeschraenkt oder nicht - und darum ging es hier gerade. */
.quiz__filter[data-aktiv="1"] {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.filter__zeile {
  display: grid;
  gap: 0.6rem 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.filter__feld {
  display: grid;
  gap: 0.25rem;
}

.filter__marke {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.filter__wahl {
  width: 100%;
  min-height: 2.6rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step--1);
}

.filter__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-block-start: 0.7rem;
}

.filter__stand {
  font-size: var(--step--1);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.quiz__filter[data-aktiv="1"] .filter__stand {
  color: var(--ink);
  font-weight: 600;
}

.filter__weg {
  padding-block: 0.35rem;
}

/* Leere Auswahl: eigener Zustand statt stillem Rueckfall auf alle Fragen. */
.quiz__leer {
  padding: 2rem 1.25rem;
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}

.quiz__leer h2 {
  font-size: var(--step-1);
  margin-block-end: 0.5rem;
}

.quiz__leer p {
  color: var(--ink-muted);
  margin-block-end: 1.25rem;
}

/* --- Statusleiste -------------------------------------------------------- */

.quiz__leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem var(--gap);
  align-items: flex-end;
  margin-block-end: 1.5rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--border);
}

/* Der Lauf laeuft gegen die persoenliche Bestmarke. Ein Balken gegen ein
   Rundenende waere hier falsch - es gibt keins. */
.lauf {
  flex: 1 1 16rem;
  min-width: 12rem;
}

.lauf__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-end: 0.4rem;
}

.lauf__wert {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  color: var(--ink-muted);
  font-size: var(--step--1);
}

.lauf__wert b {
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.lauf__flamme {
  font-size: 1.1rem;
  line-height: 1;
  /* Als Flex-Kind von .lauf__wert waere die Zeile ohnehin blockiert und damit
     transformierbar. Sie steht trotzdem hier: ruecke die Flamme jemals aus
     dem Flex-Container heraus, liefe die Animation auf einem Inline-Element
     sonst wirkungslos ins Leere. */
  display: inline-block;
  transform-origin: 50% 85%;
  /* Laeuft, solange die Flamme steht - also solange die Serie haelt. Die
     Phase setzt 20-ui.js ueber einen negativen animation-delay fort, sonst
     zuckte sie bei jedem Neuaufbau der Leiste in den Ruhezustand zurueck.

     Bewegung reduziert der globale prefers-reduced-motion-Block in
     10-base.css mit; Symbol und Zahl bleiben davon unberuehrt. */
  animation: flackern 1.6s ease-in-out infinite;
}

/* Bewusst asymmetrisch: gleichmaessiges Pulsieren sieht nach Ladeanzeige aus,
   eine Flamme zuckt unregelmaessig. Die Ausschlaege bleiben klein, das Ding
   steht neben dem Text der naechsten Frage. */
@keyframes flackern {
  0%, 100% { transform: scale(1) rotate(0deg); }
  20% { transform: scale(1.13) rotate(-5deg); }
  42% { transform: scale(1.03) rotate(3deg); }
  68% { transform: scale(1.16) rotate(-2deg); }
  85% { transform: scale(1.06) rotate(4deg); }
}

.lauf__ziel {
  font-size: var(--step--1);
  color: var(--ink-faint);
  white-space: nowrap;
}

.lauf__schiene {
  height: 0.55rem;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.lauf__schiene > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--brand);
  transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}

.lauf__schiene > i[data-rekord] {
  background: var(--accent);
}

/* Zehn Markierungen statt Streak-Balken: das Tagesquiz hat eine feste,
   fuer alle gleiche Fragenfolge, da zeigt eine Markierung je Frage den
   Fortschritt genauer als ein Balken gegen eine persoenliche Bestmarke. */
.tagraster-block {
  flex: 1 1 100%;
}

/* Zentriert, weil die Reihe die volle Breite von .quiz__leiste belegt (der
   Block steht auf flex-basis 100%), die zehn Rechtecke aber nur einen
   Bruchteil davon fuellen. Linksbuendig hingen sie am Rand, waehrend der
   Tagesquiz-Kopf darueber zentriert steht. Beim Umbruch auf schmalen
   Geraeten zentriert das ausserdem die letzte, unvollstaendige Zeile. */
.tagraster {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-block-start: 0.5rem;
}

/* Zustand wird sonst nie ueber Farbe allein vermittelt (siehe Dateikopf),
   hier bewusst als Ausnahme: zehn Rechtecke in einer Reihe mit zusaetzlich
   Haken/Kreuz wirkten unruhig, und die Zahl daneben (X von 10 beantwortet,
   Y richtig) traegt die Information in Text bereits mit. Screenreader
   bekommen den Zustand trotzdem, ueber aria-label je Markierung. */
.tagraster__punkt {
  width: 1.9rem;
  height: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  background: var(--surface-2);
}

.tagraster__punkt[data-zustand="richtig"] {
  background: var(--ok);
  border-color: var(--ok);
}

.tagraster__punkt[data-zustand="falsch"] {
  background: var(--no);
  border-color: var(--no);
}

.tagraster__punkt[data-zustand="aktuell"] {
  border-color: var(--brand);
}

.leiste__werte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
}

.kennzahl-klein {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.kennzahl-klein b {
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* --- Frage --------------------------------------------------------------- */

.quiz__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  margin-block-end: 0.75rem;
}

.quiz__kategorie {
  font-size: var(--step--1);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}

/* Schwierigkeit aus der Trefferquote aller bisherigen Antworten. Die Stufe
   steht als Text da - die Farbe verstaerkt nur. */
.schwere {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.schwere[data-stufe="leicht"] { color: var(--ok); }
.schwere[data-stufe="mittel"] { color: var(--ink-muted); }
.schwere[data-stufe="schwer"] { color: var(--accent); }
.schwere[data-stufe="sehr-schwer"] { color: var(--no); }

.quiz__frage {
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin-block-end: 1.25rem;
}

/* --- Antworten ----------------------------------------------------------- */

.antworten {
  display: grid;
  gap: 0.65rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.antwort {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  /* Grosszuegige Trefferflaeche - hier wird auf dem Handy gespielt. */
  min-height: 3.5rem;
  padding: 0.85rem 1.1rem;
  text-align: start;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--step-0);
  line-height: 1.35;
  color: var(--ink);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.antwort:hover:not([aria-disabled="true"]) {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

/* Tastenkuerzel nur zeigen, wo es eine Tastatur gibt. */
.antwort__taste {
  display: none;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  place-items: center;
  border-radius: 0.4rem;
  background: var(--surface-3);
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (pointer: fine) {
  .antwort__taste { display: grid; }
}

.antwort__text { flex: 1; }

/* Symbol traegt den Zustand mit - nicht die Farbe allein. */
.antwort__zeichen {
  flex: none;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0;
}

.antwort[data-zustand] { cursor: default; }

.antwort[data-zustand="richtig"] {
  background: var(--ok-bg);
  border-color: var(--ok-border);
  color: var(--ok);
  font-weight: 600;
  animation: puls 220ms var(--ease);
}

.antwort[data-zustand="falsch"] {
  background: var(--no-bg);
  border-color: var(--no-border);
  color: var(--no);
}

.antwort[data-zustand="richtig"] .antwort__zeichen,
.antwort[data-zustand="falsch"] .antwort__zeichen {
  opacity: 1;
}

.antwort[data-zustand="richtig"] .antwort__taste,
.antwort[data-zustand="falsch"] .antwort__taste {
  opacity: 0.5;
}

@keyframes puls {
  50% { transform: scale(1.02); }
}

/* --- Aufloesung ---------------------------------------------------------- */

.aufloesung {
  margin-block-start: 1.25rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.aufloesung__bench {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-block-end: 0.5rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 600;
}

.aufloesung__teaser { color: var(--ink-muted); }

.aufloesung__mehr {
  display: inline-block;
  margin-block-start: 0.6rem;
  font-size: var(--step--1);
  font-weight: 600;
}

/* --- Steuerung ----------------------------------------------------------- */

.quiz__steuerung {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-block-start: 1.25rem;
}

.quiz__steuerung .btn--primaer { margin-inline-start: auto; }

/* --- Kategorie-Tafel ------------------------------------------------------ */

.tafel {
  width: min(100%, 46rem);
  margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) auto 0;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--border);
}

.tafel__titel {
  font-size: var(--step-1);
  margin-block-end: 0.9rem;
}

.tafel__leer {
  color: var(--ink-muted);
  font-size: var(--step--1);
}

.tafel__liste {
  display: grid;
  gap: 0.15rem;
}

.tafel__zeile {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) 1fr 4rem;
  gap: 0.75rem;
  align-items: center;
  padding: 0.4rem 0.55rem;
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--step--1);
}

.tafel__zeile--kopf {
  color: var(--ink-faint);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 700;
  padding-block-end: 0.2rem;
}

a.tafel__zeile:hover { background: var(--surface-2); }

/* Das gerade gespielte Gebiet hervorheben - so ist die Tafel waehrend des
   Spiels lesbar, ohne dass man suchen muss. */
.tafel__zeile[data-aktuell] {
  background: var(--brand-soft);
  font-weight: 600;
}

.tafel__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Kein overflow:hidden mehr: der Prozentwert darf bei kurzem Balken nach
   rechts heraustreten, und die Durchschnittsmarke soll oben und unten
   ueberstehen. Die Rundung uebernimmt stattdessen die Fuellung selbst. */
.tafel__balken {
  position: relative;
  display: block;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--surface-3);
}

.tafel__balken > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width var(--dur) var(--ease);
}

.tafel__balken > i[data-stufe="gut"] { background: var(--ok); }
.tafel__balken > i[data-stufe="mittel"] { background: var(--accent); }
.tafel__balken > i[data-stufe="schwach"] { background: var(--no); }

/* Prozentwert im Balken statt daneben - so bleibt rechts Platz fuer die
   Fragenzahl, und der Wert steht dort, wo er hingehoert.
 *
 * Zuvor stand die Zahl mittig ueber dem Balken und wurde von einem doppelten
 * text-shadow lesbar gehalten, weil der Untergrund je nach Quote seine Farbe
 * wechselt. Ein weicher Schatten unter kleiner, fetter Schrift laesst die
 * Ziffern aber ausgefranst wirken. Die Zahl haengt sich deshalb an das Ende
 * der Fuellung: innen auf farbigem Grund in Weiss, und wenn die Fuellung zu
 * kurz dafuer ist, aussen daneben in Textfarbe. Beides ohne Schatten und
 * damit gestochen scharf.
 *
 * Alle drei Fuellfarben tragen Weiss mit mindestens 5,4:1 - geprueft in
 * test_design_tokens.py, damit die Umstellung nicht am Kontrast scheitert.
 */
.tafel__prozent {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tafel__prozent[data-innen="1"] {
  inset-inline-start: 0;
  width: var(--fuell);
  justify-content: flex-end;
  padding-inline-end: 0.5rem;
  color: var(--auf-signal);
}

.tafel__prozent[data-innen="0"] {
  inset-inline-start: var(--fuell);
  padding-inline-start: 0.45rem;
  color: var(--ink-muted);
}

/* Durchschnitt aller Spielenden. Ohne den sagt die eigene Quote wenig -
   55 % koennen stark oder schwach sein, je nach Gebiet. */
.tafel__schnitt {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--ink);
  opacity: 0.55;
  transform: translateX(-1px);
}

.tafel__zahl {
  color: var(--ink-muted);
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.tafel__legende {
  margin-block-start: 0.75rem;
  font-size: 0.75rem;
  color: var(--ink-faint);
}

/* --- Bilanz --------------------------------------------------------------- */

.ergebnis { text-align: center; }

.ergebnis__ring {
  --wert: 0;
  position: relative;
  display: grid;
  place-items: center;
  width: 9rem;
  height: 9rem;
  margin-inline: auto;
  border-radius: 50%;
  background: conic-gradient(var(--brand) calc(var(--wert) * 1%), var(--surface-3) 0);
}

.ergebnis__ring::before {
  content: "";
  position: absolute;
  width: 7.2rem;
  height: 7.2rem;
  border-radius: 50%;
  background: var(--bg);
}

.ergebnis__zahl {
  position: relative;
  font-size: var(--step-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ergebnis__raster {
  display: inline-flex;
  gap: 0.2rem;
  margin-block: 1rem;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
}

.ergebnis > p { margin-block-start: 0.75rem; color: var(--ink-muted); }

.ergebnis > p.ergebnis__vergleich {
  color: var(--ink);
  font-weight: 600;
}

/* --- Laden und Fehler ------------------------------------------------------ */

.quiz__laden,
.quiz__fehler {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--ink-muted);
}


/* ============================================================
   UTILITIES
   ============================================================ */
/* Hilfsklassen. Bewusst wenige - was mehrfach vorkommt, wird ein Baustein. */

.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hidden {
  display: none !important;
}

.text-muted {
  color: var(--ink-muted);
}

.text-zentriert {
  text-align: center;
}

.zahlen {
  font-variant-numeric: tabular-nums;
}

/* Eine Reihe oder ein Absatz, der sich vom Fliesstext darueber und darunter
   absetzt - Chip-Leisten und der Spielen-Knopf auf den Kategorieseiten.

   Ersetzt vier style=""-Attribute aus dem Generator. Die CSP verbietet
   Inline-Styles (style-src 'self', kein 'unsafe-inline'), der Browser hat sie
   also verworfen und die Abstaende fielen live einfach weg. Dass dort drei
   verschiedene Werte standen - 1rem, 1.25rem, 1.5rem fuer denselben Zweck -
   war ohnehin gewachsen und nicht entschieden. */
.abgesetzt {
  margin-block: 1.25rem;
}

/* Breite Inhalte duerfen scrollen - aber in sich, nie die Seite. */
.scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.bloecke > * + * {
  margin-block-start: clamp(2rem, 1.5rem + 2vw, 4rem);
}