/**
 * Anirova District — Legal-Seiten.
 *
 * 06-IMPLEMENTATION-PLAN.md Welle 7 verlangt fuer Werte, Sicherheit, FAQ und
 * Legal eine "besonders ruhige Layoutvariante", 03-DESIGN-SYSTEM.md Abschnitt 7
 * verbietet ausdruecklich, "Legal-Seiten in ein verspieltes Layout zu zwingen".
 *
 * Diese Seiten sind bereits ruhig: kein Hero, keine Navigations-Pille, kein
 * dekorativer Hintergrund, nur Inhaltsverzeichnis und Text. Hier wird deshalb
 * NICHTS umgestaltet. Zwei Dinge kommen dazu:
 *
 *   1. Ihre eigenen Farbvariablen haengen an den District-Tokens, statt die
 *      Werte zu duplizieren. --bg und --accent waren bereits identisch,
 *      --fg und --fg-muted wichen minimal ab. Sichtbar aendert sich damit
 *      fast nichts — aber kuenftige Token-Aenderungen greifen automatisch.
 *   2. Eine dezente Ortsangabe (LEGAL-14), damit die Seite erkennbar zur
 *      Stadt gehoert, ohne dass ein Board-Rahmen den Lesefluss stoert.
 *
 * Der volle Board-Aufbau mit Kopfzeile und Icon-Rail bleibt hier bewusst weg.
 */

/* Die lokalen Variablen der Legal-Seiten an die Tokens binden. Der zweite
   Wert ist der bisherige Stand — faellt district-tokens.css aus, sieht die
   Seite exakt aus wie vorher. */
[data-district-legal] {
  --bg: var(--color-bg-base, #050D1F);
  --bg-soft: var(--color-surface, #0A1830);
  --fg: var(--color-text-hi, #E8F0FF);
  --fg-muted: var(--color-text-mid, #8FA3C0);
  --accent: var(--color-primary, #00B3FF);
  --border: var(--color-border, rgba(143, 163, 192, .15));
}

/* ── Ortsangabe ──────────────────────────────────────────────────────────
   Ein District-Code ueber der Ueberschrift, mehr nicht. Er sagt, wo man
   ist, und nimmt dem Rest der Seite nichts weg. */
.legal-ort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-3, 12px);
  padding: var(--space-1, 4px) var(--space-3, 12px);
  border: 1px solid var(--color-border, #24445e);
  border-radius: var(--radius-full, 999px);
  font: 600 11px/16px var(--font-code, ui-monospace, monospace);
  letter-spacing: .08em;
  text-decoration: none;
}

.legal-ort__code { color: var(--color-district, #ff4d3f); }
.legal-ort__name { color: var(--color-text-mid, #9bb4cc); }

.legal-ort:hover,
.legal-ort:focus-visible {
  border-color: var(--color-primary, #00b3ff);
}

/* ── Schwesterseiten ─────────────────────────────────────────────────────
   Die Legal-Seiten verlinkten einander nur teilweise: von /datenschutz und
   /impressum gab es keinen Weg zu /agb. Eine vollstaendige Leiste am Ende
   schliesst die Luecke, ohne den Lesefluss zu stoeren. */
.legal-geschwister {
  margin-top: var(--space-7, 48px);
  padding-top: var(--space-5, 24px);
  border-top: 1px solid var(--border);
}

.legal-geschwister__titel {
  margin: 0 0 var(--space-3, 12px);
  font: 600 12px/16px var(--font-code, ui-monospace, monospace);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.legal-geschwister__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-geschwister__link {
  display: inline-flex;
  align-items: center;
  /* 48-px-Touchziel auch hier — die Leiste ist echte Navigation. */
  min-height: var(--touch-target, 48px);
  padding: var(--space-2, 8px) var(--space-4, 16px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  color: var(--fg-muted);
  font-size: 14px;
  text-decoration: none;
}

.legal-geschwister__link:hover,
.legal-geschwister__link:focus-visible {
  border-color: var(--accent);
  color: var(--fg);
}

/* Die aktuelle Seite wird benannt, nicht nur farblich markiert. */
.legal-geschwister__link[aria-current="page"] {
  border-color: var(--accent);
  color: var(--fg);
}