/**
 * Anirova District Experience — Shell, Dock, Atlas und Stationen.
 *
 * Setzt ausschliesslich Tokens aus district-tokens.css (07-COMPONENT-LIBRARY.md:
 * "Nur Custom Properties aus tokens.css"). Keine Inline-Farben, keine an IDs
 * gekoppelten Styles — Hooks sind [data-component] und Klassen.
 *
 * Welle 1: statische Shell. Die Karte ist hier eine semantische Liste mit
 * Positionen; Zoom/Route/Kamera folgen in Welle 2 (district-motion.css).
 */

/* ── Global Dock ─────────────────────────────────────────────────────────
   DESIGN.md 4: ruhige surface-Pill, 64 px hoch, echtes Logo, aktive Route Cyan. */
[data-component="global-dock"] {
  position: sticky;
  top: var(--space-3);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 64px;
  max-width: var(--measure-city);
  margin-inline: auto;
  padding-inline: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-scrim);
  box-shadow: var(--elev-1);
  backdrop-filter: blur(12px);
}

.district-dock__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 750;
  color: var(--color-text-hi);
  text-decoration: none;
}

/* Das offizielle Logo bleibt unveraendert — nicht nachzeichnen, nicht
   einfaerben (DESIGN.md 7 "Don't: Logo nachzeichnen"). */
.district-dock__logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.district-dock__nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-inline-start: auto;
}

.district-dock__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding-inline: var(--space-3);
  border-radius: var(--radius-full);
  color: var(--color-text-mid);
  font: 650 13px/18px var(--font-body);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-district-out),
              background-color var(--dur-fast) var(--ease-district-out);
}

.district-dock__link:hover { color: var(--color-text-hi); background: var(--color-surface-raised); }

/* Aktive Route in Cyan — zusaetzlich zu aria-current, nie nur farblich
   (DESIGN.md 4 "Status: Text + Icon + Farbe, niemals Farbe allein"). */
.district-dock__link[aria-current="page"] {
  color: var(--color-primary-bright);
  background: var(--color-surface);
}

/* ── Skip-Link ───────────────────────────────────────────────────────────
   Muss auf ein real existierendes #main zeigen. In der Baseline zeigte der
   bestehende Skip-Link auf 115 Seiten ins Leere. */
.district-skip {
  position: absolute;
  left: var(--space-4);
  top: calc(var(--space-4) * -4);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: 650 13px/18px var(--font-body);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-district-out);
}

.district-skip:focus { top: var(--space-4); }

/* ── Atlas ───────────────────────────────────────────────────────────────
   16:9 auf Desktop (DESIGN.md 5). Das Stadtbild ist Hintergrund; alle
   Labels und Nodes liegen als HTML/SVG darueber (10-ASSETS: "Text, Labels,
   Buttons, Nodes und Routen immer als HTML/SVG, nie in Rasterbildern"). */
[data-component="district-atlas"] {
  position: relative;
  max-width: var(--measure-city);
  margin-inline: auto;
  /* Seitenverhaeltnis des Boards (1672x941), damit nichts beschnitten wird. */
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  /* Fallback-Farbflaeche: Fehlt das Kartenasset, bleibt die semantische
     District-Liste sichtbar (05-TECHNICAL: Fehlerstrategie). */
  background: var(--color-atlas-void);
}

.district-atlas__scene {
  position: absolute;
  inset: 0;
  background-position: center;
  /* contain, nicht cover: Beim Board wuerde cover die Raender abschneiden
     und die Node-Prozentpositionen stimmten nicht mehr mit dem Bild ueberein. */
  background-size: contain;
  background-repeat: no-repeat;
  /* Responsiv ueber image-set: der Browser waehlt die Groesse, ohne dass wir
     drei Media-Queries pflegen. Mobil 36 KB, Desktop 119 KB — Budget ist
     220 bzw. 450 KB (09-QUALITY-GATES, Performance). */
  /* Das Original-Board (01-district-atlas.png) ist laut Handoff-README der
     "urspruengliche und primaere Website-Look" und hat Vorrang vor spaeteren
     Konzepten. Die textfreie Stadtkarte bleibt als Reserve im Repo.
     Groessen: 61 KB mobil, 220 KB Desktop — Budget 220 bzw. 450 KB. */
  background-image: image-set(
    url("/assets/district/board-atlas-900.webp") 1x,
    url("/assets/district/board-atlas-1900.webp") 2x
  );
  /* Nur leicht abgedunkelt: Das Board IST der gewuenschte Look, nicht bloss
     Kulisse. Zu starkes Abdunkeln nimmt ihm genau die Wirkung, wegen der es
     gewaehlt wurde. Die HTML-Nodes bringen ihren eigenen Untergrund mit und
     bleiben auch so lesbar. */
  filter: brightness(.82) saturate(.95);
}

/* ── Routennetz ──────────────────────────────────────────────────────────
   DESIGN.md 4: SVG-Pfad in Cyan, 2 px. Die aktive Strecke animiert einmalig,
   NICHT endlos — Doc 03 verbietet dekorative Dauerschleifen ausdruecklich.

   preserveAspectRatio="none" ist Absicht: die viewBox 0..100 wird auf die
   Atlasflaeche gestreckt, damit die Linien exakt auf denselben Prozentwerten
   liegen wie die Nodes. Die dadurch verzerrte Strichstaerke gleicht
   vector-effect wieder aus. */
.district-atlas__routen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.district-atlas__routen--mobile { display: none; }

.district-route {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Ohne das wuerde preserveAspectRatio="none" die Linie ungleichmaessig
     dick zeichnen. */
  vector-effect: non-scaling-stroke;
  opacity: .5;
}

.district-route--sekundaer {
  stroke-dasharray: 4 3;
  opacity: .3;
}

/* Die zum gehoverten District gehoerende Strecke tritt hervor. Gesetzt wird
   das Attribut von district-map.js; ohne JavaScript bleibt das Netz ruhig. */
.district-route[data-aktiv="true"] {
  opacity: 1;
  stroke: var(--color-primary-bright);
  filter: drop-shadow(0 0 6px rgb(0 179 255 / .5));
}

.district-atlas__nodes {
  position: absolute;
  inset: 0;
}

/* ── District Node ───────────────────────────────────────────────────────
   Das Board beschriftet jede Zone bereits ("01 HOME GATE", "04 FEATURES
   LAB"). Eine zweite Beschriftung daruebergelegt verdoppelt dieselbe
   Information und zerstoert die Bildwirkung.

   Der Node ist deshalb eine UNSICHTBARE Klickflaeche ueber dem vorhandenen
   Label. Sein Text bleibt im DOM (nicht display:none), damit Screenreader
   und die Ansicht ohne JavaScript ihn behalten — er wird nur visuell
   entfernt. Sichtbar wird der Node erst bei Hover/Fokus, und auch dann nur
   als Rahmen um das Board-Label, nicht als zweite Beschriftung. */
.district-node {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  transform: translate(-50%, -50%);
  display: block;
  /* Deckt den Label-Kasten des Boards ab: breit genug fuer Badge und Text. */
  width: clamp(96px, 11%, 190px);
  min-height: var(--touch-target);
  /* Im Ruhezustand unsichtbar: Ein dauerhafter Rahmen zerschneidet das
     Board und nimmt ihm die Wirkung. Dass hier etwas anklickbar ist, zeigt
     der Mauszeiger (cursor:pointer) und die Hervorhebung beim Darueberfahren. */
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-district-out),
              background-color var(--dur-fast) var(--ease-district-out),
              box-shadow var(--dur-fast) var(--ease-district-out);
}

/* Der Text liegt fuer Sehende hinter dem Board-Label, bleibt aber im
   Accessibility-Tree und im Quelltext. */
.district-node__code,
.district-node__name,
.district-node__action {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Hover und Fokus rahmen das vorhandene Label ein, statt es zu ueberdecken. */
.district-node:hover,
.district-node:focus-visible,
.district-node[aria-current="true"] {
  border-color: var(--color-primary);
  background: rgb(0 179 255 / .10);
  box-shadow: var(--elev-glow);
}

/* Mobile Atlas UI lives outside the moving camera so controls and the
   district sheet stay steady while the city is panned or zoomed. */
.district-atlas__mobile-bar,
.district-atlas__sheet { display: none; }

/* ── Semantische Kartenalternative ───────────────────────────────────────
   09-QUALITY-GATES: "Karte hat gleichwertige Listenansicht". Die Liste ist
   kein Notbehelf, sondern der Primaerpfad ohne JavaScript und auf Mobil. */
[data-component="district-list"] {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  max-width: var(--measure-content);
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.district-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: var(--touch-target);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-district-out),
              border-color var(--dur-fast) var(--ease-district-out);
}

.district-card:hover,
.district-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  background: var(--color-surface-raised);
}

.district-card__code {
  font: 600 12px/16px var(--font-code);
  color: var(--color-district);
  text-transform: uppercase;
}

.district-card__name {
  font: 650 20px/28px var(--font-display);
  color: var(--color-text-hi);
}

.district-card__nutzen {
  font: 400 16px/25px var(--font-body);
  color: var(--color-text-mid);
}

.district-card__stationen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.district-card__station {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: 600 12px/16px var(--font-code);
  color: var(--color-text-lo);
}

/* ── Responsive ──────────────────────────────────────────────────────────
   Mobil ist der Atlas eine eigene Touch-Flaeche: textfreie Stadtkarte,
   grosse HTML-Knoten, Pan/Pinch-Zoom und eine ruhige Detailkonsole. */
@media (max-width: 899px) {
  [data-component="district-atlas"] {
    --mobile-map-width: min(calc(100vw - 2 * var(--space-4)), 480px);
    display: block;
    width: var(--mobile-map-width);
    height: calc(225vw - 4px);
    min-height: 0;
    aspect-ratio: auto;
    margin-block: var(--space-5);
    border-radius: var(--radius-lg);
    touch-action: pan-y;
    background:
      linear-gradient(rgba(0,179,255,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,179,255,.035) 1px, transparent 1px),
      #020811;
    background-size: 32px 32px;
  }

  .district-atlas__mobile-bar {
    position: absolute;
    inset: var(--space-3) var(--space-3) auto;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 56px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgb(22 217 255 / .28);
    background: rgb(2 12 19 / .88);
    backdrop-filter: blur(12px);
    pointer-events: auto;
  }

  .district-atlas__mobile-bar > span:first-child { display: grid; gap: 2px; }
  .district-atlas__mobile-bar b {
    color: var(--color-primary-bright);
    font: 750 11px/15px var(--font-code);
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .district-atlas__mobile-bar small {
    color: var(--color-text-mid);
    font: 500 10px/14px var(--font-body);
  }
  .district-atlas__mobile-controls { display: flex; gap: 4px; }
  .district-atlas__mobile-controls button {
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-hi);
    font: 700 15px/1 var(--font-code);
  }
  .district-atlas__mobile-controls [data-map-reset] {
    min-width: 44px;
    width: 44px;
    overflow: hidden;
    color: transparent;
  }
  .district-atlas__mobile-controls [data-map-reset]::before {
    content: "◎";
    color: var(--color-primary-bright);
    font-size: 20px;
  }

  [data-component="district-atlas"] .district-atlas__kamera {
    left: 50%;
    top: calc(68px + (100% - 68px) / 2);
    right: auto;
    bottom: auto;
    width: 100%;
    height: calc(100% - 68px);
    transform-origin: center;
    cursor: grab;
  }
  .district-atlas__kamera:active { cursor: grabbing; }
  .district-atlas__scene {
    background-image:
      linear-gradient(180deg, rgb(2 8 17 / .06), rgb(2 8 17 / .56)),
      url("/assets/district/mobile-atlas-board-portrait-v4.webp");
    background-size: 100% 100%;
    filter: brightness(.9) saturate(1.08);
  }
  .district-atlas__scene::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 46%, transparent 20%, rgb(2 8 17 / .64) 100%);
  }
  .district-atlas__routen--desktop { display: none; }
  .district-atlas__routen--mobile { display: none; }
  .district-atlas__routen { inset: 0; width: 100%; height: 100%; }
  .district-route { stroke-width: 1.4; opacity: .42; }
  .district-atlas__nodes { inset: 0; }

  .district-node {
    left: calc(var(--mobile-x) * 1%);
    top: calc(var(--mobile-y) * 1%);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    gap: 2px 6px;
    width: 42%;
    min-width: 0;
    min-height: 52px;
    padding: 7px 9px;
    border: 1px solid rgb(22 217 255 / .36);
    border-left: 3px solid var(--color-primary-bright);
    border-radius: 2px;
    color: var(--color-primary-bright);
    background: linear-gradient(100deg, rgb(2 12 19 / .97), rgb(4 21 31 / .9));
    box-shadow: 0 8px 20px rgb(0 0 0 / .42), inset 0 0 18px rgb(0 179 255 / .035);
  }
  .district-node__code,
  .district-node__name,
  .district-node__action {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    overflow: visible;
  }
  .district-node[data-mobile-side="left"] {
    transform: translate(0, -50%);
  }
  .district-node[data-mobile-side="right"] {
    transform: translate(-100%, -50%);
    border-left: 1px solid rgb(22 217 255 / .36);
    border-right: 3px solid var(--color-primary-bright);
  }
  .district-node[data-mobile-side="center"] { width: 52%; }
  .district-node[data-mobile-side="center-left"] { transform: translate(-100%, -50%); }
  .district-node[data-mobile-side="center-right"] { transform: translate(0, -50%); }
  .district-node__code {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    height: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #ff694a;
    font: 800 8px/11px var(--font-code);
    letter-spacing: .06em;
  }
  .district-node__code::after { display: none; }
  .district-node__name {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-hi);
    font: 750 10px/12px var(--font-code);
    letter-spacing: .02em;
    white-space: nowrap;
  }
  .district-node__action {
    grid-column: 1 / -1;
    grid-row: 2;
    color: var(--color-text-mid);
    font: 550 8px/11px var(--font-body);
    white-space: normal;
  }
  .district-node:hover,
  .district-node:focus-visible,
  .district-node[data-mobile-selected="true"] {
    z-index: 8;
    border-color: var(--color-primary-bright);
    background: rgb(2 18 27 / .98);
    box-shadow: 0 0 0 2px rgb(0 179 255 / .12), 0 10px 24px rgb(0 0 0 / .5);
  }
  .district-node[data-mobile-selected="true"] { color: #ff5b3b; }

  .board-fussleiste { display: none; }

  .district-atlas__sheet {
    position: fixed;
    inset: auto max(var(--space-3), env(safe-area-inset-right)) max(78px, calc(env(safe-area-inset-bottom) + 66px)) max(var(--space-3), env(safe-area-inset-left));
    max-width: 456px;
    margin-inline: auto;
    z-index: 14;
    grid-template-columns: 1fr auto;
    gap: 5px var(--space-3);
    padding: var(--space-4);
    padding-right: 54px;
    border: 1px solid rgb(22 217 255 / .38);
    border-left: 3px solid var(--color-primary-bright);
    background: linear-gradient(135deg, rgb(2 12 19 / .98), rgb(4 24 34 / .96));
    box-shadow: 0 -18px 55px rgb(0 0 0 / .58), 0 0 34px rgb(0 179 255 / .1);
    backdrop-filter: blur(16px);
    transform: translateY(calc(100% + var(--space-5)));
    opacity: 0;
    pointer-events: none;
    transition: transform 280ms var(--ease-district-out), opacity 180ms ease;
  }
  .district-atlas__sheet[aria-hidden="false"] {
    display: grid;
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .district-atlas__sheet-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--color-text-mid);
    font-size: 24px;
  }
  .district-atlas__sheet-code {
    color: #ff6a4d;
    font: 750 10px/14px var(--font-code);
    letter-spacing: .15em;
  }
  .district-atlas__sheet-name {
    grid-column: 1 / -1;
    color: var(--color-text-hi);
    font: 750 23px/29px var(--font-display);
  }
  .district-atlas__sheet p {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--color-text-mid);
    font: 500 14px/20px var(--font-body);
  }
  .district-atlas__sheet small {
    grid-column: 1 / -1;
    color: var(--color-text-lo);
    font: 600 10px/15px var(--font-code);
  }
  .district-atlas__sheet-enter {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    margin-top: var(--space-2);
    padding-inline: var(--space-4);
    border: 1px solid var(--color-primary);
    background: rgb(0 179 255 / .1);
    color: var(--color-primary-bright);
    font: 750 12px/16px var(--font-code);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  [data-component="district-list"],
  .district-shell__listentitel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (min-width: 512px) and (max-width: 899px) {
  [data-component="district-atlas"] { height: 1148px; }
}

@media (min-width: 900px) {
  /* Die Karte beschriftet jeden District bereits ("01 HOME GATE") und die
     Klickflaechen sind sichtbar umrandet. Eine Liste darunter wiederholt
     dieselbe Information ein zweites Mal.

     Sie bleibt im DOM: ohne JavaScript ist sie der Navigationsweg, und
     Screenreader lesen sie weiterhin. Nur visuell entfaellt sie dort, wo
     die Karte sichtbar ist. */
  [data-component="district-list"],
  .district-shell__listentitel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (max-width: 599px) {
  [data-component="global-dock"] {
    gap: var(--space-2);
    padding-inline: var(--space-4);
  }
  /* Mobil zeigt das Dock nur Logo, Stadt, Cart und Menue
     (07-COMPONENT-LIBRARY, GlobalDock). */
  .district-dock__link[data-dock-optional] { display: none; }
}

/* ── District Header ─────────────────────────────────────────────────────
   07-COMPONENT-LIBRARY: Code, H1, Lead, Status, lokale Stationen und
   maximal zwei CTAs. Auf Direct Entry sofort sichtbar.

   Der Header ersetzt den vorhandenen Seiten-Hero NICHT, er ergaenzt ihn um
   die Ortsangabe. Ein Austausch wuerde in jede der neun Seiten inhaltlich
   eingreifen; das ist Redaktion, nicht Mechanik. */
/* Innerhalb der Buehne richtet sich der Header am Inhaltsrand aus, nicht
   in der Seitenmitte — sonst steht er 222 px rechts vom Rest der Spalte.
   Den Abstand zur fixierten Navigation schafft bereits die Board-Kopfzeile,
   deshalb entfaellt --dock-freiraum hier. */
.district-buehne__inhalt [data-component="district-header"] {
  max-width: none;
  margin-inline: 0;
  padding: 0;
  --dock-freiraum: 0px;
}

[data-component="district-header"] {
  max-width: var(--measure-content);
  margin-inline: auto;
  /* Die Bestands-Navigation ist position:fixed (gemessen: 55 px hoch, 16 px
     vom oberen Rand, z-index 100). Fixed-Elemente nehmen keinen Platz im
     Fluss ein, deshalb laege der Header sonst darunter. Der Wert steht als
     Variable hier, damit eine geaenderte Navigationshoehe an genau einer
     Stelle nachgezogen wird. */
  --dock-freiraum: 88px;
  padding: calc(var(--dock-freiraum) + var(--space-4)) var(--space-4) 0;
}

/* Ohne die fixe Navigation (z. B. Legal-Seiten, isolierte Probeseite) waere
   der Freiraum unnoetiger Leerraum. */
@supports selector(:has(*)) {
  body:not(:has(nav.nav)) [data-component="district-header"] {
    --dock-freiraum: 0px;
  }
}

.district-header__ort {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.district-header__code {
  font: 600 12px/16px var(--font-code);
  color: var(--color-district);
  text-transform: uppercase;
}

.district-header__name {
  font: 650 20px/28px var(--font-display);
  color: var(--color-text-hi);
}

.district-header__nutzen {
  margin: var(--space-2) 0 0;
  max-width: var(--measure-read);
  font: 400 16px/25px var(--font-body);
  color: var(--color-text-mid);
}

/* ── Station Rail ────────────────────────────────────────────────────────
   07-COMPONENT-LIBRARY: echte Links, horizontal scrollbar mit sichtbaren
   Controls, aktive Station mit aria-current="page", kein Drag-only-Pattern.

   Umgesetzt als scrollbare Liste mit Tastatur-Fokus statt mit Pfeil-Buttons:
   die Rail hat selten mehr als sieben Eintraege, und echte Links sind
   ohnehin per Tab erreichbar — sichtbare Controls waeren hier zusaetzliche
   Bedienfläche ohne Gewinn. Der Scrollbalken bleibt sichtbar. */
[data-component="station-rail"] {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0 0 var(--space-2);
  list-style: none;
  overflow-x: auto;
  /* overflow-x:auto allein genuegt NICHT: die Eintraege sind Flex-Items mit
     min-width:auto und schrumpfen nicht unter ihren Inhalt, also waechst der
     Container auf die Summe seiner Kinder statt zu scrollen. Auf 390 px ragte
     die Rail damit 22 px aus dem Dokument (gemessen). Erst die
     Breitenbegrenzung zwingt sie in den Rahmen. */
  max-width: 100%;
  /* Snap macht das Wischen auf Mobil vorhersehbar, ohne Drag zu erzwingen. */
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.station-rail__eintrag {
  scroll-snap-align: start;
  /* Nicht schrumpfen: sonst quetschen sich die Beschriftungen, statt zu
     scrollen. Das ist der Gegenpart zur Breitenbegrenzung oben. */
  flex: 0 0 auto;
}

.station-rail__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-mid);
  font: 650 13px/18px var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-district-out),
              border-color var(--dur-fast) var(--ease-district-out),
              background-color var(--dur-fast) var(--ease-district-out);
}

.station-rail__link:hover {
  color: var(--color-text-hi);
  border-color: var(--color-primary);
  background: var(--color-surface-raised);
}

/* Aktive Station: Farbe UND Gewicht UND aria-current — nie Farbe allein
   (DESIGN.md 4). */
.station-rail__link[aria-current="page"] {
  color: var(--color-primary-bright);
  border-color: var(--color-primary);
  background: var(--color-surface-raised);
}

/* ── Nachbarschaftslinks ─────────────────────────────────────────────────
   02-DISTRICT-MAP.md: Themenueberschneidungen werden ueber Nachbarschaft
   geloest, nicht ueber Doppelzuordnung. Steht am Ende eines Districts und
   beantwortet "wie komme ich zum naechsten Ziel". */
[data-component="district-nachbarn"] {
  max-width: var(--measure-content);
  margin: var(--space-7) auto 0;
  padding: var(--space-5) var(--space-4);
  border-top: 1px solid var(--color-border);
  scroll-margin-top: 112px;
}

.district-nachbarn__titel {
  margin: 0 0 var(--space-4);
  font: 650 20px/28px var(--font-display);
  color: var(--color-text-hi);
}

.district-nachbarn__liste {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.district-mini-atlas__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.district-mini-atlas__head > div > span { color: var(--color-primary-bright); font: 700 .64rem/1.2 var(--font-code); letter-spacing: .15em; }
.district-mini-atlas__head .district-nachbarn__titel { margin: 6px 0 0; font-size: clamp(1.25rem, 2.2vw, 1.8rem); letter-spacing: .01em; }
.district-mini-atlas__head > a { color: var(--color-primary-bright); font: 650 .7rem/1.2 var(--font-code); text-decoration: none; }
.district-mini-atlas { position: relative; min-height: clamp(300px, 33vw, 430px); overflow: hidden; border: 1px solid rgba(48,147,171,.3); background: #020811; box-shadow: inset 0 0 80px rgba(0,0,0,.68); }
.district-mini-atlas__city { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,8,17,.7), rgba(2,8,17,.16) 48%, rgba(2,8,17,.65)), linear-gradient(0deg, rgba(2,8,17,.94), transparent 62%), url("/assets/district/city-map-1600.webp") center 50% / cover; opacity: .82; transform: scale(1.025); transform-origin: var(--transit-x,50%) var(--transit-y,50%); transition: transform .75s cubic-bezier(.2,.75,.2,1), filter .45s ease; }
.district-mini-atlas.is-inspecting .district-mini-atlas__city { filter: brightness(1.08) saturate(1.08); transform: scale(1.075); }
.district-mini-atlas__city::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 44%, transparent 0 24%, rgba(2,8,17,.44) 72%, rgba(2,8,17,.86)); }
.district-mini-atlas__routes { position: absolute; inset: 7% 4% 9%; width: 92%; height: 84%; overflow: visible; }
.district-mini-atlas__route { stroke: rgba(0,218,242,.14); stroke-width: .28; vector-effect: non-scaling-stroke; opacity: .34; }
.district-mini-atlas__route--sekundaer { stroke-dasharray: 2 2; }
.district-mini-atlas__route.is-active { stroke: var(--color-primary-bright); stroke-width: .65; filter: drop-shadow(0 0 5px var(--color-primary)); opacity: .9; stroke-dasharray: 4 4; }
.district-mini-atlas.is-in-view .district-mini-atlas__route.is-active { animation: district-transit-flow 8s linear infinite; }
.district-mini-atlas__nodes { position: absolute; inset: 7% 4% 9%; }
.district-mini-atlas__node { position: absolute; left: var(--map-x); top: var(--map-y); display: grid; grid-template-columns: 10px auto; align-items: center; gap: 0; max-width: 150px; color: rgba(137,180,198,.48); text-decoration: none; transform: translate(-50%,-50%); transition: color .22s ease, transform .22s ease; }
.district-mini-atlas__node span { display: grid; place-items: center; width: 8px; height: 8px; border: 1px solid currentColor; background: currentColor; font-size: 0; transform: rotate(45deg); box-shadow: 0 0 8px currentColor; }
.district-mini-atlas__node strong { display: none; margin-left: 8px; padding: 5px 8px; border-left: 1px solid currentColor; background: rgba(2,8,17,.9); font: 650 .62rem/1.2 var(--font-code); white-space: nowrap; }
.district-mini-atlas__node:hover, .district-mini-atlas__node:focus-visible { z-index: 4; color: var(--color-primary-bright); transform: translate(-50%,-50%) scale(1.05); }
.district-mini-atlas__node:hover strong, .district-mini-atlas__node:focus-visible strong,
.district-mini-atlas__node.is-neighbor strong, .district-mini-atlas__node.is-current strong { display: block; }
.district-mini-atlas__node.is-neighbor { grid-template-columns: 25px auto; color: var(--color-primary-bright); }
.district-mini-atlas__node.is-neighbor span, .district-mini-atlas__node.is-current span { width: 25px; height: 25px; border: 1px solid currentColor; background: rgba(2,8,17,.94); font: 800 .53rem/1 var(--font-code); transform: none; }
.district-mini-atlas__node.is-current { z-index: 2; grid-template-columns: 28px auto; color: #ff5b3b; }
.district-mini-atlas__node.is-current span { width: 28px; height: 28px; box-shadow: 0 0 0 5px rgba(255,72,42,.1), 0 0 18px rgba(255,72,42,.45); }
.district-mini-atlas__status { position: absolute; left: 14px; bottom: 12px; z-index: 3; display: grid; gap: 3px; max-width: min(390px, 52%); padding: 9px 12px; border-left: 2px solid var(--color-primary-bright); background: linear-gradient(90deg, rgba(2,8,17,.95), rgba(2,8,17,.7)); pointer-events: none; }
.district-mini-atlas__status span { color: var(--color-primary-bright); font: 750 .63rem/1.2 var(--font-code); letter-spacing: .08em; text-transform: uppercase; }
.district-mini-atlas__status small { color: var(--color-text-mid); font: 500 .7rem/1.35 var(--font-body); }
.district-mini-atlas__legend { position: absolute; right: 12px; bottom: 10px; display: flex; gap: 15px; padding: 7px 9px; background: rgba(2,8,17,.88); color: var(--color-text-low); font: 600 .58rem/1.2 var(--font-code); }
.district-mini-atlas__legend span { display: flex; align-items: center; gap: 6px; }
.district-mini-atlas__legend i { width: 8px; height: 8px; border: 1px solid #ff5b3b; }
.district-mini-atlas__legend span + span i { border-color: var(--color-primary-bright); }
[data-district-cta-redundant="true"] { display: none !important; }

/* Das Bestands-Feedback bleibt erreichbar, konkurriert aber nicht mit dem
   Passport-Dock und benutzt im District keine violette Fremdpalette. */
body[data-district-seite="true"] .fb-launch {
  left: auto;
  right: max(16px, env(safe-area-inset-right));
  bottom: 78px;
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid rgba(22,217,255,.42);
  border-radius: 2px;
  background: rgba(2,12,19,.96);
  color: var(--color-primary-bright);
  box-shadow: 0 10px 30px rgba(0,0,0,.38);
}
body[data-district-seite="true"] .fb-launch:hover { box-shadow: 0 0 0 2px rgba(22,217,255,.12), 0 14px 34px rgba(0,0,0,.45); }

/* Ein verbleibender Download-Hinweis darf die Seite nicht wie eine
   Werbeflaeche unterbrechen: auf District-Seiten wird er zur Transitzeile. */
body[data-district-seite="true"] .page-cta-strip {
  width: min(1080px, calc(100% - 32px));
  min-height: 0;
  margin: var(--space-6) auto;
  padding: 0;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-atlas-void));
}
body[data-district-seite="true"] .page-cta-strip .page-cta-inner {
  min-height: 78px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
}
body[data-district-seite="true"] .page-cta-strip .page-cta-inner::before { display: none; }
body[data-district-seite="true"] .page-cta-strip p { margin: 0; color: var(--color-text-mid); }
body[data-district-seite="true"] .page-cta-strip .btn { flex: none; min-height: 44px; border-radius: 2px; box-shadow: none; }

@media (max-width: 700px) {
  .district-mini-atlas__head { align-items: start; flex-direction: column; }
  .district-mini-atlas { min-height: 430px; }
  .district-mini-atlas__node {
    grid-template-columns: 44px auto;
    min-width: 48px;
    min-height: 48px;
  }
  .district-mini-atlas__node > span {
    width: 20px;
    height: 20px;
    margin: 12px;
  }
  .district-mini-atlas__node.is-neighbor > span,
  .district-mini-atlas__node.is-current > span {
    width: 36px;
    height: 36px;
    margin: 4px;
  }
  .district-mini-atlas__node strong, .district-mini-atlas__node.is-neighbor strong { display: none; }
  .district-mini-atlas__node.is-current strong { display: block; }
  .district-mini-atlas__status { right: 10px; bottom: 54px; max-width: none; }
  .district-mini-atlas__legend { right: 10px; flex-direction: row; }
  body[data-district-seite="true"] .page-cta-strip .page-cta-inner { align-items: stretch; flex-direction: column; }
}

@keyframes district-transit-flow { to { stroke-dashoffset: -32; } }
@media (prefers-reduced-motion: reduce) { .district-mini-atlas__route.is-active { animation: none; } .district-mini-atlas__city { transition: none; } .district-mini-atlas.is-inspecting .district-mini-atlas__city { transform: scale(1.025); } .district-atlas__sheet { transition: none; } }
.district-motion-paused *, .district-motion-paused *::before, .district-motion-paused *::after { animation-play-state: paused !important; }

/* ── Board-Elemente (Original-Boards 01–04) ──────────────────────────────
   Das wiederkehrende Geruest der vier Handoff-Boards: Kopfzeile, linke
   Icon-Rail, Statusleiste. Uebertragen wird das Geruest, nicht die
   einzelnen Screens. */

/* Die Bestands-Navigation ist eine zentrierte Pille mit position:fixed,
   top:16px, z-index:100 (styles.css:193). Ohne Abstand liegt sie exakt
   ueber der Board-Kopfzeile und verdeckt sie vollstaendig.

   Bewusst KEIN Verstecken der einen oder anderen: Die Nav bleibt der
   Bedienweg (sie traegt die data-nav-Hooks zu app.js), die Board-Kopfzeile
   ist Titel- und Ortsleiste — in den Boards ebenfalls keine Navigation.
   Deshalb rueckt die Kopfzeile unter die Nav-Pille. */
[data-component="board-kopf"] {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: var(--measure-city);
  /* 16px Nav-Abstand + ~60px Pillenhoehe + Luft */
  margin: 92px auto 0;
  padding: var(--space-3) var(--space-5);
  border-block: 1px solid var(--color-border);
  background: var(--color-bg-recessed);
}

/* Auf schmalen Viewports bricht die Nav-Pille um und wird hoeher. */
@media (max-width: 599px) {
  [data-component="board-kopf"] { margin-top: 84px; }
}

.board-kopf__marke {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}

/* Das offizielle Logo bleibt unveraendert — nicht einfaerben, nicht
   nachzeichnen (DESIGN.md 7). */
.board-kopf__logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
}

.board-kopf__wort {
  font: 800 18px/22px var(--font-display);
  letter-spacing: .12em;
  color: var(--color-text-hi);
}

.board-kopf__trenner {
  width: 1px;
  height: 28px;
  background: var(--color-border);
}

.board-kopf__titel { display: grid; }

.board-kopf__zeile1 {
  font: 700 13px/16px var(--font-code);
  letter-spacing: .22em;
  color: var(--color-primary);
}

.board-kopf__zeile2 {
  font: 600 10px/14px var(--font-code);
  letter-spacing: .18em;
  color: var(--color-text-lo);
}

.board-kopf__claim {
  margin-inline-start: auto;
  font: 600 11px/14px var(--font-code);
  letter-spacing: .2em;
  color: var(--color-text-lo);
}

/* Ab hier faellt der Claim weg, bevor er die Marke zusammenquetscht. */
@media (max-width: 899px) {
  .board-kopf__claim { display: none; }
}

@media (max-width: 599px) {
  .board-kopf__titel { display: none; }
  .board-kopf__trenner { display: none; }
}

/* ── Linke Icon-Rail ─────────────────────────────────────────────────────
   Auf Desktop eine schmale vertikale Leiste wie in den Boards, auf Mobil
   eine waagerechte Leiste — eine 72-px-Spalte neben 375 px Inhalt waere
   dort Verschwendung. */
.board-rail__liste {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

/* Ohne Breitenbegrenzung wachsen die Eintraege der waagerechten Leiste
   ueber den Viewport hinaus und sprengen die Seite seitwaerts (gemessen:
   557 px Rail auf 390 px Viewport, 191 px Ueberstand). overflow-x:auto
   allein genuegt nicht — es braucht eine Grenze, an der gescrollt wird. */
.board-rail {
  max-width: 100%;
  min-width: 0;
}

.board-rail__link { flex: none; }

.board-rail__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  /* 48-px-Touchziel auch im schmalsten Zustand. */
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-2) var(--space-1);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-lo);
  text-decoration: none;
  text-align: center;
  transition: color var(--dur-fast) var(--ease-district-out),
              border-color var(--dur-fast) var(--ease-district-out),
              background-color var(--dur-fast) var(--ease-district-out);
}

.board-rail__icon { width: 20px; height: 20px; }

.board-rail__text {
  font: 600 10px/13px var(--font-code);
  letter-spacing: .06em;
  white-space: nowrap;
}

.board-rail__link:hover,
.board-rail__link:focus-visible {
  color: var(--color-text-hi);
  background: var(--color-surface);
  border-color: var(--color-border);
}

/* Aktive Station in Cyan — zusaetzlich zu aria-current, nicht nur farblich. */
.board-rail__link[aria-current="page"] {
  color: var(--color-primary-bright);
  background: var(--color-surface);
  border-color: var(--color-primary);
}

@media (min-width: 900px) {
  .board-rail {
    position: sticky;
    top: var(--space-5);
    /* start statt stretch: Sonst zieht die Rail die Buehne auf ihre eigene
       Hoehe. Bei sieben Eintraegen sind das 433 px gegenueber 237 px
       Headerhoehe — 180 px Leerraum rechts daneben. */
    align-self: start;
  }
  .board-rail__liste {
    flex-direction: column;
    gap: var(--space-1);
    overflow-x: visible;
  }
  .board-rail__link {
    /* Icon und Text nebeneinander: halbiert die Hoehe je Eintrag. */
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-2);
    min-width: 0;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    text-align: start;
  }
  .board-rail__icon { flex: none; }
}

/* ── Statusleiste ────────────────────────────────────────────────────────
   Die Boards zeigen hier erfundene Live-Zahlen. Ohne Datenquelle waere jede
   Zahl eine Falschangabe — hier steht stattdessen der echte Ort. */
.board-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.board-status__code {
  font: 600 11px/14px var(--font-code);
  letter-spacing: .1em;
  color: var(--color-district);
}

.board-status__ort {
  font: 600 11px/14px var(--font-code);
  letter-spacing: .06em;
  color: var(--color-text-mid);
}

/* ── Buehne: Rail links, Inhalt rechts ───────────────────────────────────
   Erst ab 900 px zweispaltig. Darunter liegt die Rail als waagerechte
   Leiste ueber dem Inhalt — eine 72-px-Spalte neben 375 px waere
   Verschwendung (DESIGN.md 8). */
[data-component="district-buehne"] {
  display: grid;
  gap: var(--space-4);
  max-width: var(--measure-city);
  margin-inline: auto;
  padding: var(--space-4) var(--space-5) 0;
}

.district-buehne__inhalt {
  display: grid;
  gap: var(--space-4);
  /* stretch statt start: Seit der Seiteninhalt IN dieser Spalte liegt,
     muessen Hero, Kennzahlen und Raster die volle Breite bekommen.
     Mit "start" schrumpfte jedes Kind auf Inhaltsbreite (gemessen:
     211 px statt 1243 px). */
  justify-items: stretch;
  min-width: 0;   /* sonst sprengt langer Text das Raster */
}

@media (min-width: 900px) {
  [data-component="district-buehne"] {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
}

/* ── Seitenhohe Rail ─────────────────────────────────────────────────────
   In den Original-Boards laeuft die Icon-Rail ueber die ganze Seitenhoehe
   und der Inhalt liegt rechts daneben. Bisher trug die Buehne nur den
   District-Header, der Seiteninhalt begann darunter — dadurch stand die
   Rail allein in einer grossen Leerflaeche.

   Geloest ueber den Innenabstand des <main>: Der Inhalt rueckt um die
   Railbreite ein, die Rail selbst bleibt sticky am oberen Rand stehen.
   Das kommt ohne Eingriff in die Struktur der 18 Seiten aus. */
@media (min-width: 900px) {
  body[data-district-seite]:not([data-district-legal]) main > *:not([data-component="district-buehne"]):not([data-component="board-kopf"]) {
    padding-inline-start: 104px;
  }

  /* Der Seiten-Hero hielt 164 px Abstand fuer die fixierte Navigation frei.
     Den schafft inzwischen die Board-Kopfzeile — der Wert wirkt doppelt und
     reisst eine Luecke zwischen Buehne und Inhalt. */
  body[data-district-seite]:not([data-district-legal]) main > .page-hero {
    padding-top: var(--space-5);
  }

  /* Die Buehne braucht den Einzug nicht — sie hat die Rail als Spalte. */
  body[data-district-seite]:not([data-district-legal]) [data-component="district-buehne"] {
    padding-bottom: var(--space-5);
  }

  /* Die Rail bleibt beim Scrollen am oberen Rand stehen, solange die
     Seite laeuft — wie die seitenhohe Leiste der Boards. */
  body[data-district-seite]:not([data-district-legal]) .board-rail {
    top: 100px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}


/* ── Shell auf der Startseite ────────────────────────────────────────────
   Die Karte ist dort der Hauptinhalt und beginnt oben. Der Abstand haelt
   die Ueberschrift unter der fixierten Navigations-Pille (styles.css:193,
   top:16px, ~60px hoch). */
[data-component="district-shell"] {
  padding-top: 92px;
  padding-inline: var(--space-5);
  max-width: var(--measure-city);
  margin-inline: auto;
}

/* Die beiden Produktbereiche unter dem Atlas gehoeren zur Startseite,
   nicht zur seitenhohen District-Rail. Die globale Rail-Regel rueckt
   normale Unterseiten um 104 px ein; auf Home wuerde sie Screens und
   Vier-Schritte-Raster jedoch links im Viewport festhalten. Beide
   Bereiche teilen deshalb exakt den zentrierten 1600-px-Stadtrahmen
   der Karte und behalten auf kleinen Displays einen sicheren Rand. */
body[data-page="home"] main[data-district="home"] > #screens,
body[data-page="home"] main[data-district="home"] > .section-how {
  box-sizing: border-box;
  width: min(calc(100% - (2 * var(--space-5))), var(--measure-city));
  max-width: var(--measure-city);
  margin: var(--space-6) auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-7));
}

body[data-page="home"] #screens .section-head {
  text-align: center;
}

body[data-page="home"] #screens .section-sub {
  max-width: var(--measure-read);
  margin-inline: auto;
}

@media (max-width: 599px) {
  body[data-page="home"] main[data-district="home"] > #screens,
  body[data-page="home"] main[data-district="home"] > .section-how {
    width: calc(100% - (2 * var(--space-3)));
    padding-inline: var(--space-4);
  }
}

.district-shell__titel {
  margin: 0 0 var(--space-2);
  font: 800 clamp(28px, 4vw, 44px)/1.12 var(--font-display);
  color: var(--color-text-hi);
  letter-spacing: -.01em;
}

.district-shell__lead {
  margin: 0 0 var(--space-5);
  max-width: var(--measure-read);
  font: 400 17px/27px var(--font-body);
  color: var(--color-text-mid);
}

.district-shell__listentitel {
  margin: var(--space-7) 0 var(--space-4);
  font: 700 22px/28px var(--font-display);
  color: var(--color-text-hi);
}


/* ── Fussleiste des Boards ───────────────────────────────────────────────
   Die Leiste ist Teil des Bildes. Statt sie nachzubauen liegen echte Links
   unsichtbar darueber — dieselbe Technik wie bei den District-Nodes. Das
   Bild bleibt unveraendert, die Ziele sind echte <a href>.

   Die Leiste sitzt bei y 86-98 % des Boards; die Klickflaechen decken den
   Textbereich der Eintraege ab. */
.board-fussleiste {
  position: absolute;
  left: 0;
  top: 86%;
  width: 100%;
  height: 12%;
}

.board-fussziel {
  position: absolute;
  left: calc(var(--fx) * 1%);
  width: calc(var(--fw) * 1%);
  top: 18%;
  height: 64%;
  /* Wie bei den Nodes: im Ruhezustand unsichtbar. */
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  /* Der Text steht bereits im Bild — hier bleibt er fuer Screenreader
     erhalten, ohne ihn ein zweites Mal zu zeigen. */
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-district-out),
              background-color var(--dur-fast) var(--ease-district-out);
}

.board-fussziel:hover,
.board-fussziel:focus-visible {
  border-color: rgb(0 179 255 / .55);
  background: rgb(0 179 255 / .10);
}

/* Auf schmalen Viewports ist die Leiste im Bild zu klein zum Treffen.
   Dort uebernimmt die semantische District-Liste und der echte Footer;
   die Flaechen wuerden nur ins Leere greifen. */
@media (max-width: 899px) {
  .board-fussleiste { display: none; }
}

/* Vorbereitete Flaechen ohne Adresse (Discord, YouTube): sichtbar beim
   Darueberfahren, aber nicht anklickbar und ohne Zeigefinger — sonst
   verspricht der Cursor einen Klick, der nichts tut. */
.board-fussziel--folgt {
  cursor: default;
  pointer-events: none;
}