/**
 * Anirova District — Board-Komponenten.
 *
 * Nachgebaut aus den Original-Boards 02-04, Element fuer Element gemessen:
 * Nummer-Badge im Sechseck, grosser Seitentitel, Status-Banner mit
 * Kreis-Icon, Panels mit Trennlinien zwischen den Zeilen, Vorfallsliste
 * mit Datum und Dauer, voller CTA-Button.
 *
 * Ersetzt die frueheren Panels, die nur Rahmen um Textzeilen waren.
 */

/* ── Seitenkopf ──────────────────────────────────────────────────────────
   Board: rotes Sechseck mit Nummer, daneben grosser Titel in Versalien
   und ein Untertitel in gesperrter Kleinschrift. */
.bk {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.bk__nummer {
  display: grid;
  place-items: center;
  width: 54px;
  height: 60px;
  /* Sechseck wie im Board, nicht als Kreis oder Rechteck. */
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  border: 0;
  /* Flaechenfarbe, nicht die aufgehellte Textfarbe. */
  background: var(--color-district-flaeche, var(--color-district));
  /* Weiss auf dem Board-Rot: 6.73:1. Der dunkle Ton kam nur auf 2.76:1 und
     war auf dem Sechseck schlecht lesbar. Im Board steht die Zahl hell. */
  color: #fff;
  font: 800 22px/1 var(--font-code);
  letter-spacing: .02em;
}

/* Der Rahmen des Sechsecks entsteht durch eine zweite Ebene darunter. */
.bk__nummer-huelle {
  display: grid;
  place-items: center;
  width: 62px;
  height: 68px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: color-mix(in srgb, var(--color-district) 32%, transparent);
}

.bk__titel {
  margin: 0;
  font: 800 clamp(30px, 4.4vw, 52px)/1.02 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--color-text-hi);
}

.bk__unter {
  margin: var(--space-2) 0 0;
  font: 650 13px/18px var(--font-code);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-text-lo);
}

/* ── Status-Banner ───────────────────────────────────────────────────────
   Board: gruener Rahmen, gruenes Glimmen, Kreis mit Haekchen links. */
.bs {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  padding: var(--space-5) var(--space-6);
  border: 1px solid color-mix(in srgb, var(--color-success) 55%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-success) 6%, transparent);
  box-shadow: 0 0 28px color-mix(in srgb, var(--color-success) 10%, transparent) inset;
}

.bs--warnung {
  border-color: color-mix(in srgb, var(--color-warning) 55%, transparent);
  background: color-mix(in srgb, var(--color-warning) 6%, transparent);
  box-shadow: 0 0 28px color-mix(in srgb, var(--color-warning) 10%, transparent) inset;
}

.bs__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 2px solid var(--color-success);
  border-radius: 50%;
  color: var(--color-success);
}

.bs--warnung .bs__icon {
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.bs__icon svg { width: 26px; height: 26px; }

.bs__titel {
  margin: 0;
  font: 800 clamp(19px, 2.2vw, 26px)/1.2 var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-success);
}

.bs--warnung .bs__titel { color: var(--color-warning); }

.bs__text {
  margin: var(--space-1) 0 0;
  font: 400 15px/22px var(--font-body);
  color: var(--color-text-mid);
}

/* ── Panel ───────────────────────────────────────────────────────────────
   Board: duenner Rahmen, Titel in Cyan-Versalien, Zeilen durch
   Trennlinien geteilt. */
.bp {
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}

.bp__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.bp__titel {
  margin: 0;
  font: 700 13px/18px var(--font-code);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.bp__marke {
  font: 600 11px/16px var(--font-code);
  letter-spacing: .1em;
  color: var(--color-text-lo);
}

/* ── Zeilen mit Trennlinie ───────────────────────────────────────────────
   Board: Bezeichnung links, Wert rechts, feine Linie dazwischen. */
.bz {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 62%, transparent);
}

.bz:last-child { border-bottom: 0; }

.bz__name {
  font: 400 15px/22px var(--font-body);
  color: var(--color-text-mid);
}

.bz__wert {
  font: 600 14px/20px var(--font-body);
  color: var(--color-success);
  white-space: nowrap;
}

.bz__wert--warnung { color: var(--color-warning); }
.bz__wert--neutral { color: var(--color-text-hi); }

/* ── Vorfallszeile ───────────────────────────────────────────────────────
   Board: "Resolved — Titel" links, "Datum · Dauer" rechts. */
.bv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 62%, transparent);
}

.bv:last-child { border-bottom: 0; }

.bv__zustand {
  font: 600 14px/20px var(--font-body);
  color: var(--color-success);
}

.bv__titel {
  font: 400 15px/22px var(--font-body);
  color: var(--color-text-hi);
}

.bv__meta {
  font: 400 13px/20px var(--font-code);
  color: var(--color-text-lo);
  white-space: nowrap;
}

/* ── Kennzahl ────────────────────────────────────────────────────────────
   Grosse Zahl, kleines Label darunter — nicht als Tabellenzeile. */
.bkz-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--color-border);
}

.bkz {
  padding: var(--space-5);
  background: var(--color-surface);
  text-align: center;
}

.bkz__zahl {
  display: block;
  font: 800 clamp(26px, 3.4vw, 38px)/1.1 var(--font-display);
  color: var(--color-text-hi);
}

.bkz__label {
  display: block;
  margin-top: var(--space-1);
  font: 600 11px/16px var(--font-code);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-lo);
}

/* ── CTA ─────────────────────────────────────────────────────────────────
   Board: voller Button mit Cyan-Rahmen, Text in Versalien. */
.bcta {
  display: block;
  width: 100%;
  min-height: var(--touch-target);
  padding: var(--space-4);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-primary-bright);
  font: 700 14px/20px var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-district-out);
}

.bcta:hover,
.bcta:focus-visible { background: color-mix(in srgb, var(--color-primary) 18%, transparent); }

/* ── Raster ──────────────────────────────────────────────────────────────
   Panels in gleicher Hoehe nebeneinander — im Board sind die Spalten
   buendig, nicht unterschiedlich hoch. */
.br {
  display: grid;
  gap: var(--space-4);
  align-items: stretch;
}

.br > * { margin-bottom: 0; }

@media (min-width: 1200px) {
  .br--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .br--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .br--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Board 05 zeigt vier Wert-Panels nebeneinander. Ab 1200 px vier
     Spalten, darunter zwei — vier Spalten auf 900 px waeren zu schmal. */
  .br--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Zeitachse ───────────────────────────────────────────────────────────
   Board 09 und 15: senkrechte Linie mit Phasenkoepfen und Meilensteinen.
   Drei Zustaende mit eigener Farbe: erledigt (cyan), aktiv (orange),
   geplant (grau). */
.bt { padding: var(--space-5); }

.bt__phase {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.bt__phase-punkt {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid currentColor;
  border-radius: 50%;
  flex: none;
}

.bt__phase-punkt::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}

.bt__phase-titel {
  font: 700 15px/20px var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.bt__phase-unter {
  font: 600 11px/16px var(--font-code);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .75;
}

/* Zustandsfarben. */
.bt__gruppe--erledigt { color: var(--color-primary); }
.bt__gruppe--aktiv    { color: var(--color-warning); }
.bt__gruppe--geplant  { color: var(--color-text-lo); }

/* Die Meilensteine haengen an einer senkrechten Linie. */
.bt__liste {
  margin: 0 0 var(--space-5);
  padding: 0 0 0 var(--space-6);
  list-style: none;
  border-left: 1px solid currentColor;
  margin-left: 14px;
}

.bt__gruppe:last-child .bt__liste { margin-bottom: 0; }

.bt__punkt {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}

/* Ring auf der Linie, wie im Board. */
.bt__punkt::before {
  content: "";
  position: absolute;
  left: calc(var(--space-6) * -1 - 5px);
  top: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: var(--color-surface);
  transform: translateY(-50%);
}

.bt__name {
  font: 400 15px/22px var(--font-body);
  color: var(--color-text-hi);
}

.bt__zeit {
  font: 400 13px/20px var(--font-code);
  color: var(--color-text-lo);
  white-space: nowrap;
}

/* ── Status-Badge ────────────────────────────────────────────────────────
   Board 04: farbige Pille am Feature-Namen (Live / Beta / In Development). */
.bb {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border: 1px solid currentColor;
  border-radius: var(--radius-full);
  font: 700 10px/14px var(--font-code);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bb--live   { color: var(--color-success); }
.bb--beta   { color: var(--color-warning); }
.bb--plan   { color: var(--color-text-lo); }

/* Ein Punkt vor dem Text — im Board markiert er den Zustand zusaetzlich
   zur Farbe (DESIGN.md 4: niemals Farbe allein). */
.bb::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ── Reiter ──────────────────────────────────────────────────────────────
   Board 04: LIVE (12) · BETA (5) · IN DEVELOPMENT (7) ueber dem Raster. */
.bre {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.bre__eintrag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font: 700 12px/16px var(--font-code);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-mid);
}

.bre__zahl {
  font-size: 13px;
  color: var(--color-text-hi);
}

/* ── Portrait-Panel ──────────────────────────────────────────────────────
   Board 08: Bild links, daneben Name, Rolle, Zitat und Signatur. */
.bpo {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
}

@media (min-width: 700px) {
  .bpo { grid-template-columns: auto 1fr; align-items: start; }
}

.bpo__bild {
  width: 116px;
  height: 116px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.bpo__name {
  margin: 0;
  font: 800 22px/28px var(--font-display);
  color: var(--color-text-hi);
}

.bpo__rolle {
  margin: var(--space-1) 0 var(--space-4);
  font: 600 11px/16px var(--font-code);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-text-lo);
}

.bpo__zitat {
  margin: 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-primary);
  font: 400 16px/26px var(--font-body);
  color: var(--color-text-mid);
}


/* ── Skyline hinter dem Board-Kopf ────────────────────────────────
   Das Board zeigt rechts neben dem Titel eine Neon-Skyline. Statt
   eines Bildes (haben wir nicht) entsteht sie aus Verlaeufen in den
   Board-Farben: ein warmer Horizont unten, darueber Lichtpunkte.
   Rein dekorativ — daher aria-hidden am Element und pointer-events:none. */
.bk { position: relative; }
/* Titel und Nummer liegen ueber der Skyline. */
.bk > *:not(.bk__skyline) { position: relative; z-index: 1; }
.bk__skyline {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  /* Erst rechts vom laengsten Titel beginnen. Frueher startete sie bei
     x=441 und lief durch "FEATURES LAB" (Titelende x=636). */
  width: min(34%, 340px);
  max-width: calc(100% - 40rem);
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  /* Haeuserkanten: harte Farbstopps ergeben Silhouetten statt Verlauf. */
  background:
    linear-gradient(to top,
      color-mix(in srgb, var(--color-district-flaeche) 55%, transparent) 0 14%,
      transparent 14%),
    repeating-linear-gradient(90deg,
      transparent 0 18px,
      color-mix(in srgb, var(--color-primary) 22%, transparent) 18px 21px,
      transparent 21px 46px),
    repeating-linear-gradient(90deg,
      transparent 0 33px,
      color-mix(in srgb, var(--color-district) 16%, transparent) 33px 35px,
      transparent 35px 78px);
  /* Maskenfarbe ist reine Deckkraft, keine Themenfarbe — daher literal. */
  -webkit-mask-image: linear-gradient(to left, black 35%, transparent 100%);
          mask-image: linear-gradient(to left, black 35%, transparent 100%);
}
@media (max-width: 720px) { .bk__skyline { display: none; } }
@media (prefers-reduced-motion: reduce) { .bk__skyline { opacity: 0.35; } }


/* ── Gemischte Raster: Bild- und Text-Karten ──────────────────────
   Grid-Zeilen richten sich am hoechsten Element aus — eine Bild-Karte
   zwang ihren Text-Nachbarn 392 px auf, die zu 6 % gefuellt waren.
   align-items:start laesst jede Karte ihre eigene Hoehe behalten. */

/* ── Rangliste (brl) ──────────────────────────────────────────────
   Dichte Liste nach Board-Vorbild: Nummer, Name, Wert in einer Zeile,
   nur durch eine feine Linie getrennt. Kein Rahmen je Eintrag — genau
   das macht die Board-Listen kompakt. */
.brl {
  list-style: none;
  margin: 0;
  padding: 0;
}
.brl__zeile {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
}
.brl__zeile:last-child { border-bottom: 0; }
.brl__nr {
  font-family: var(--mono, monospace);
  font-size: 0.82rem;
  color: var(--color-district);
  letter-spacing: 0.05em;
}
.brl__name {
  color: var(--color-text-hi);
  font-size: 0.95rem;
  min-width: 0;
}
.brl__wert {
  font-family: var(--mono, monospace);
  font-size: 0.85rem;
  color: var(--color-text-mid);
  white-space: nowrap;
}

/* ── Hero-Flaeche (bhe) ───────────────────────────────────────────
   Platz fuer das Ortsbild des Districts. Das Seitenverhaeltnis steht
   fest, damit ein spaeter ergaenztes Bild das Layout nicht verschiebt.
   Ohne Bild traegt die Flaeche eine Neon-Andeutung aus Board-Farben. */
.bhe {
  position: relative;
  /* Ohne width:100% schrumpft das Flex-Element auf Inhaltsbreite
     (gemessen: 228 px statt 1243 px). */
  width: 100%;
  /* Flaches Band statt grosser Flaeche: ohne Bild wirkte 21/8 (473 px)
     wie ein Loch. Als Band traegt es den Ortsnamen und bleibt Blickfang,
     ohne Leere zu betonen. Kommt spaeter ein Bild, greift die Regel
     unter [data-ohne-bild="false"] mit dem grossen Verhaeltnis. */
  aspect-ratio: auto;
  min-height: clamp(210px, 27vw, 390px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-primary) 24%, transparent);
  background-color: var(--color-atlas-void);
  background-image:
    linear-gradient(90deg, rgb(2 8 17 / .96) 0%, rgb(2 8 17 / .52) 43%, rgb(2 8 17 / .2) 100%),
    linear-gradient(0deg, rgb(2 8 17 / .93) 0%, transparent 62%),
    image-set(
      url("/assets/district/city-map-800.webp") 1x,
      url("/assets/district/city-map-1600.webp") 2x
    );
  background-size: cover, cover, 118%;
  background-position: center, center, var(--district-hero-position, 50% 45%);
  display: flex;
  align-items: flex-end;
}
.bhe__bild { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Andeutung eines Tors/Bauwerks: konzentrische Boegen plus Horizont. */
/* Neon-Gitter mit Horizontlinie — liest sich als Stadtansicht im Band. */
.bhe__marke {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      color-mix(in srgb, var(--color-district-flaeche) 42%, transparent) 0 3px,
      transparent 3px),
    repeating-linear-gradient(90deg,
      transparent 0 22px,
      color-mix(in srgb, var(--color-primary) 14%, transparent) 22px 23px,
      transparent 23px 58px),
    linear-gradient(90deg,
      color-mix(in srgb, var(--color-primary) 10%, transparent) 0%,
      transparent 55%);
  transform: translate3d(var(--hero-x, 0), var(--hero-y, 0), 0) scale(1.035);
  transition: transform 500ms var(--ease-district-out);
}
.bhe__text {
  position: relative;
  padding: clamp(20px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bhe__ort {
  font-family: var(--mono, monospace);
  font-size: clamp(.78rem, 1.1vw, .96rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary-bright);
}
.bhe__zeile { font-size: 0.9rem; color: var(--color-text-mid); }
/* Mit Bild darf die Flaeche gross werden. */
.bhe:not([data-ohne-bild]) { aspect-ratio: 21 / 8; min-height: 0; }

/* Ein Stadtbild, vierzehn lesbar unterschiedliche Ortsausschnitte. Die
   Quelle ist die textfreie District-Stadt aus dem freigegebenen Handoff. */
main[data-district="home"]      { --district-hero-position: 50% 19%; }
main[data-district="matching"]  { --district-hero-position: 24% 31%; }
main[data-district="community"] { --district-hero-position: 15% 49%; }
main[data-district="features"]  { --district-hero-position: 31% 65%; }
main[data-district="merch"]     { --district-hero-position: 48% 68%; }
main[data-district="values"]    { --district-hero-position: 69% 28%; }
main[data-district="archetype"] { --district-hero-position: 84% 42%; }
main[data-district="founder"]   { --district-hero-position: 69% 52%; }
main[data-district="roadmap"]   { --district-hero-position: 82% 69%; }
main[data-district="faq"]       { --district-hero-position: 18% 86%; }
main[data-district="contact"]   { --district-hero-position: 35% 86%; }
main[data-district="download"]  { --district-hero-position: 50% 86%; }
main[data-district="press"]     { --district-hero-position: 66% 86%; }

/* Eigene Ortsbilder fuer die zentralen Produkt-Districts. Die Bildassets
   enthalten bewusst weder Schrift noch Markenlogos; UI bleibt echtes HTML. */
main[data-district="community"] .bhe {
  background-image:
    linear-gradient(90deg, rgb(2 8 17 / .96), rgb(2 8 17 / .38) 56%, rgb(2 8 17 / .12)),
    linear-gradient(0deg, rgb(2 8 17 / .94), transparent 70%),
    url("/assets/district-heroes/community-tower-v1.webp");
  background-size: cover; background-position: center, center, center 48%;
}
main[data-district="features"] .bhe {
  background-image:
    linear-gradient(90deg, rgb(2 8 17 / .96), rgb(2 8 17 / .36) 58%, rgb(2 8 17 / .1)),
    linear-gradient(0deg, rgb(2 8 17 / .94), transparent 70%),
    url("/assets/district-heroes/features-lab-v1.webp");
  background-size: cover; background-position: center, center, center 46%;
}
main[data-district="community"] .bhe::after,
main[data-district="features"] .bhe::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 20%, rgba(0, 226, 255, .16) 48%, transparent 64%);
  transform: translateX(-115%); animation: district-light-pass 11s ease-in-out infinite;
}
main[data-district="community"] .bhe__marke {
  background: repeating-linear-gradient(90deg, transparent 0 70px, rgba(0, 226, 255, .13) 71px 72px, transparent 73px 150px);
}
main[data-district="features"] .bhe__marke {
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(0, 226, 255, .12) 12.2% 12.5%, transparent 12.7% 100%),
    repeating-linear-gradient(0deg, transparent 0 44px, rgba(225, 56, 33, .1) 45px 46px, transparent 47px 92px);
}
@keyframes district-light-pass { 0%, 63% { transform: translateX(-115%); } 83%, 100% { transform: translateX(115%); } }
@media (prefers-reduced-motion: reduce) {
  main[data-district] .bhe::after { animation: none; display: none; }
}

/* Interaktive Abschnittsroute: echte Sprungziele aus den H2 der Seite. */
.district-sections {
  position: sticky;
  top: 84px;
  z-index: 45;
  display: flex;
  gap: var(--space-2);
  width: 100%;
  overflow-x: auto;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-atlas-void) 90%, transparent);
  backdrop-filter: blur(12px);
  scrollbar-width: thin;
}

.district-sections a {
  flex: 0 0 auto;
  min-height: var(--touch-target);
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-4);
  border: 1px solid transparent;
  color: var(--color-text-mid);
  font: 650 .78rem/1.2 var(--font-code);
  letter-spacing: .06em;
  text-decoration: none;
  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);
}

.district-sections a:hover,
.district-sections a:focus-visible,
.district-sections a[aria-current="location"] {
  color: var(--color-primary-bright);
  border-color: color-mix(in srgb, var(--color-primary) 52%, transparent);
  background: color-mix(in srgb, var(--color-primary) 9%, transparent);
}

/* Pointer-Licht folgt nur der Interaktion und liegt unter dem Inhalt. */
.bp, .bs, .dp, .district-card { position: relative; isolation: isolate; }
.bp::after, .bs::after, .dp::after, .district-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(280px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    color-mix(in srgb, var(--color-primary) 13%, transparent), transparent 72%);
  transition: opacity var(--dur-fast) var(--ease-district-out);
}
.bp:hover::after, .bs:hover::after, .dp:hover::after, .district-card:hover::after { opacity: 1; }

@media (max-width: 700px) {
  .bhe { min-height: 230px; background-size: cover, cover, auto 120%; }
  .district-sections { top: 72px; margin-inline: calc(var(--space-2) * -1); width: calc(100% + var(--space-4)); }
}

/* Community Tower: ein kompaktes, echtes Funktionscockpit statt Fake-Feed. */
.community-console {
  width: 100%;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
}
.community-console__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.community-console__head h2,
.community-console__head p { margin: 0; }
.community-console__head h2 { color: var(--color-text-hi); font-size: clamp(1.35rem, 2.5vw, 2rem); }
.community-console__head p { margin-top: var(--space-2); color: var(--color-text-mid); }
.community-console__tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
}
.community-console__tabs button {
  min-height: var(--touch-target);
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-right: 1px solid var(--color-border);
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-text-mid);
  font: 650 .82rem/1.2 var(--font-code);
  cursor: pointer;
}
.community-console__tabs button:hover,
.community-console__tabs button:focus-visible,
.community-console__tabs button[aria-selected="true"] {
  color: var(--color-primary-bright);
  border-bottom-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 7%, transparent);
}
.community-console__panels article { min-height: 260px; padding: clamp(24px, 4vw, 52px); }
.community-console__panels article[hidden] { display: none; }
.community-console__panels h3 { margin: var(--space-2) 0 var(--space-3); color: var(--color-text-hi); font-size: clamp(1.5rem, 3vw, 2.4rem); }
.community-console__panels p { max-width: 68ch; color: var(--color-text-mid); }
.community-console__panels ul { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.community-console__panels li { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); color: var(--color-text-hi); }
.community-console__code { color: var(--color-primary-bright); font: 650 .75rem/1.2 var(--font-code); letter-spacing: .12em; }

.district-faq-search { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.district-faq-search label { color: var(--color-text-hi); font: 650 .82rem/1.2 var(--font-code); letter-spacing: .06em; }
.district-faq-search > div { display: flex; align-items: center; gap: var(--space-3); }
.district-faq-search input {
  flex: 1;
  min-width: 0;
  min-height: var(--touch-target);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-atlas-void);
  color: var(--color-text-hi);
  font: inherit;
}
.district-faq-search input:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.district-faq-search span { color: var(--color-primary-bright); white-space: nowrap; font: 650 .75rem/1.2 var(--font-code); }

.district-timeline-filter {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.district-timeline-filter button {
  min-height: var(--touch-target);
  padding-inline: var(--space-4);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-mid);
  font: 650 .78rem/1.2 var(--font-code);
  cursor: pointer;
}
.district-timeline-filter button:hover,
.district-timeline-filter button:focus-visible,
.district-timeline-filter button[aria-pressed="true"] {
  border-color: var(--color-primary);
  color: var(--color-primary-bright);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

@media (max-width: 620px) {
  .community-console__head { align-items: start; flex-direction: column; }
  .community-console__tabs button { padding-inline: var(--space-4); }
  .community-console__panels article { min-height: 300px; }
  .district-faq-search > div { align-items: stretch; flex-direction: column; }
}

/* Community · full-content district treatment */
.district-block-head {
  display: flex; align-items: end; justify-content: space-between; gap: 28px;
  padding: 22px 24px; border-bottom: 1px solid var(--color-border);
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 7%, transparent), transparent 62%);
}
.district-block-head h2 { margin: 4px 0 7px; color: var(--color-text-hi); font-size: clamp(1.55rem, 3vw, 2.65rem); line-height: 1.02; }
.district-block-head p { max-width: 70ch; margin: 0; color: var(--color-text-mid); }
.district-kicker, .district-data-badge { color: var(--color-primary-bright); font: 700 .7rem/1.2 var(--font-code); letter-spacing: .13em; }
.district-data-badge { flex: none; padding: 8px 10px; border: 1px solid var(--color-primary); }
.district-data-badge--live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; background: #52d78c; box-shadow: 0 0 10px #52d78c; }
.community-profile-system, .community-submit-station, .section-showcase {
  width: 100%; margin: clamp(34px, 6vw, 76px) 0 0; padding: 0 !important;
  border: 1px solid var(--color-border); background: var(--color-surface); overflow: hidden;
}
.profile-system__body { display: grid; grid-template-columns: minmax(220px, .72fr) minmax(0, 2fr); min-height: 440px; }
.profile-system__tabs { display: grid; align-content: start; border-right: 1px solid var(--color-border); background: var(--color-atlas-void); }
.profile-system__tabs button {
  display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; min-height: 76px; padding: 13px 16px;
  border: 0; border-bottom: 1px solid var(--color-border); background: transparent; color: var(--color-text-mid); text-align: left; cursor: pointer;
}
.profile-system__tabs button b { color: var(--color-accent); font: 700 .78rem/1 var(--font-code); }
.profile-system__tabs button span { display: grid; gap: 4px; color: inherit; font: 700 .85rem/1.15 var(--font-code); }
.profile-system__tabs button small { color: var(--color-text-low); font: 500 .67rem/1.2 var(--font-code); }
.profile-system__tabs button:hover, .profile-system__tabs button:focus-visible, .profile-system__tabs button[aria-selected="true"] {
  color: var(--color-primary-bright); background: color-mix(in srgb, var(--color-primary) 8%, transparent); box-shadow: inset 3px 0 var(--color-primary);
}
.profile-system__panels { position: relative; min-width: 0; background: radial-gradient(circle at 85% 20%, rgba(0, 210, 240, .09), transparent 34%), var(--color-surface); }
.profile-system__panels article { min-height: 440px; padding: clamp(32px, 5vw, 66px); }
.profile-system__panels article[hidden] { display: none; }
.profile-system__code { color: var(--color-primary-bright); font: 700 .72rem/1.2 var(--font-code); letter-spacing: .14em; }
.profile-system__panels h3 { max-width: 760px; margin: 12px 0 16px; color: var(--color-text-hi); font-size: clamp(1.7rem, 3.5vw, 3rem); line-height: 1.05; }
.profile-system__panels > article > p { max-width: 68ch; color: var(--color-text-mid); font-size: 1rem; line-height: 1.7; }
.profile-system__panels dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 42px 0 0; border: 1px solid var(--color-border); }
.profile-system__panels dl div { min-width: 0; padding: 18px; border-right: 1px solid var(--color-border); }
.profile-system__panels dl div:last-child { border-right: 0; }
.profile-system__panels dt { color: var(--color-primary-bright); font: 700 .68rem/1.2 var(--font-code); letter-spacing: .12em; text-transform: uppercase; }
.profile-system__panels dd { margin: 8px 0 0; color: var(--color-text-hi); line-height: 1.45; }
.section-showcase .showcase-grid { margin: 0; padding: 22px; }
.section-showcase .cl-empty { margin: 0; padding: 42px 24px; border: 1px dashed var(--color-border); color: var(--color-text-mid); text-align: center; }
.community-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 0; margin: 0; max-width: none; }
.community-form-wrap, .review-pipeline { padding: clamp(24px, 4vw, 44px); }
.community-form-wrap { border-right: 1px solid var(--color-border); background: var(--color-atlas-void); }
.form-station-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); color: var(--color-primary-bright); font: 650 .7rem/1.2 var(--font-code); letter-spacing: .08em; }
.form-station-head strong { color: #6ee7a4; }
.community-submit-station .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.community-submit-station .cf-label { display: grid; gap: 8px; margin-bottom: 18px; }
.community-submit-station .cf-label > span { color: var(--color-text-mid); font: 700 .7rem/1.2 var(--font-code); letter-spacing: .09em; text-transform: uppercase; }
.community-submit-station :is(input, textarea, select) {
  box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 0;
  background: color-mix(in srgb, var(--color-surface) 72%, black); color: var(--color-text-hi); font: 500 .94rem/1.5 var(--font-body); color-scheme: dark;
}
.community-submit-station textarea { min-height: 150px; resize: vertical; }
.community-submit-station :is(input, textarea, select):focus { outline: 2px solid var(--color-primary); outline-offset: 2px; border-color: var(--color-primary-bright); }
.community-submit-station .cf-actions { margin-top: 8px; }
.community-submit-station #cf-submit { min-height: 50px; border-radius: 0; }
.community-submit-station .cf-foot { max-width: 72ch; margin: 18px 0 0; color: var(--color-text-low); font-size: .76rem; line-height: 1.6; }
.community-submit-station .cf-result { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 0; }
.review-pipeline h3 { margin: 9px 0 24px; color: var(--color-text-hi); font-size: 1.45rem; }
.review-pipeline ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.review-pipeline li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--color-border); }
.review-pipeline li b { color: var(--color-accent); font: 700 .77rem/1.3 var(--font-code); }
.review-pipeline li strong { color: var(--color-text-hi); }
.review-pipeline li p, .review-rules p { margin: 5px 0 0; color: var(--color-text-mid); line-height: 1.55; }
.review-rules { margin-top: 20px; padding: 16px; border-left: 2px solid var(--color-accent); background: rgba(232, 63, 35, .06); }
.review-rules strong { color: var(--color-accent); }

@media (max-width: 820px) {
  .district-block-head { align-items: start; flex-direction: column; }
  .profile-system__body, .community-grid { grid-template-columns: 1fr; }
  .profile-system__tabs { grid-template-columns: repeat(5, minmax(120px, 1fr)); overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--color-border); }
  .profile-system__tabs button { grid-template-columns: 28px 1fr; }
  .profile-system__panels article { min-height: 380px; }
  .community-form-wrap { border-right: 0; border-bottom: 1px solid var(--color-border); }
}
@media (max-width: 560px) {
  .profile-system__panels dl, .community-submit-station .cf-row { grid-template-columns: 1fr; }
  .profile-system__panels dl div { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .profile-system__panels dl div:last-child { border-bottom: 0; }
}

/* Matching Arena · eigene Ortsbuehne und nachvollziehbare Simulation */
main[data-district="features"] .section-ai-demo {
  position: relative; width: 100%; margin: clamp(44px, 7vw, 92px) 0 0; padding: 0;
  border: 1px solid var(--color-border); background: var(--color-atlas-void); overflow: hidden;
}
main[data-district="features"] .section-ai-demo::before {
  content: ""; display: block; min-height: clamp(210px, 28vw, 390px);
  background:
    linear-gradient(90deg, rgba(2,8,17,.94), rgba(2,8,17,.23) 55%, rgba(2,8,17,.1)),
    linear-gradient(0deg, rgba(2,8,17,.97), transparent 70%),
    url("/assets/district-heroes/matching-arena-v1.webp") center 47% / cover;
}
main[data-district="features"] .section-ai-demo > .district-block-head { margin-top: -1px; }
.section-ai-demo .ai-demo { margin: 0; padding: clamp(22px, 4vw, 44px); border: 0; border-radius: 0; background: transparent; }
.arena-step-head, .ai-result-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--color-border); }
.arena-step-head { margin-bottom: 28px; color: var(--color-primary-bright); font: 700 .7rem/1.2 var(--font-code); letter-spacing: .1em; }
.arena-step-head strong { color: var(--color-text-hi); }
.section-ai-demo .ai-demo-h { margin: 18px 0 8px; color: var(--color-text-hi); font-size: clamp(1.4rem, 3vw, 2.35rem); }
.section-ai-demo .ai-demo-hint { color: var(--color-text-mid); }
.section-ai-demo .ai-anime-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 28px; background: var(--color-border); border: 1px solid var(--color-border); }
.section-ai-demo .ai-anime-card {
  position: relative; display: grid; grid-template-rows: 52px auto auto; align-content: start; gap: 7px; min-height: 150px; padding: 18px;
  border: 0; border-radius: 0; background: var(--color-surface); color: var(--color-text-hi); text-align: left; cursor: pointer;
}
.section-ai-demo .ai-anime-card:hover, .section-ai-demo .ai-anime-card:focus-visible { z-index: 1; outline: 1px solid var(--color-primary); background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface)); transform: none; }
.section-ai-demo .ai-anime-card.is-selected { z-index: 1; outline: 2px solid var(--color-primary-bright); background: color-mix(in srgb, var(--color-primary) 11%, var(--color-surface)); }
.section-ai-demo .ai-anime-emoji { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--color-border-hi); color: var(--color-primary-bright); font: 800 .78rem/1 var(--font-code); filter: none; }
.section-ai-demo .ai-anime-title { text-align: left; font-size: .9rem; }
.section-ai-demo .ai-anime-year { color: var(--color-text-low); }
.section-ai-demo .ai-anime-check { position: absolute; inset: 12px 12px auto auto; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--color-primary-bright); border-radius: 0; background: var(--color-primary); color: #001018; }
.section-ai-demo .ai-demo-nav { display: flex; justify-content: flex-end; margin-top: 24px; }
.section-ai-demo .ai-btn { min-height: 48px; border-radius: 0; font-family: var(--font-code); }
.section-ai-demo .ai-vector-viz { height: 185px; margin: 30px 0; padding: 18px 18px 32px; border: 1px solid var(--color-border); background: linear-gradient(180deg, rgba(0,226,255,.06), transparent); }
.section-ai-demo .ai-matches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); }
.section-ai-demo .ai-match { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; min-height: 190px; padding: 22px; border: 0; border-radius: 0; background: var(--color-surface); }
.section-ai-demo .ai-match:hover { transform: none; background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); }
.section-ai-demo .ai-match-rank { min-width: 42px; color: var(--color-accent) !important; font: 800 .76rem/1.3 var(--font-code); }
.section-ai-demo .ai-match-info { gap: 8px; }
.section-ai-demo .ai-match-info strong { color: var(--color-text-hi); font-size: 1rem; }
.section-ai-demo .ai-match-info span { color: var(--color-text-mid); line-height: 1.5; }
.section-ai-demo .ai-match-info small { color: var(--color-primary-bright); font: 650 .68rem/1.4 var(--font-code); }
.section-ai-demo .ai-match-score { grid-column: 1 / -1; width: 100%; padding-top: 16px; border-top: 1px solid var(--color-border); }
.section-ai-demo .ai-match-score-ring { width: auto; height: auto; aspect-ratio: auto; display: block; background: none; }
.section-ai-demo .ai-match-score-ring::after { content: none; }
.section-ai-demo .ai-match-score-ring span { position: static; display: block; color: var(--color-primary-bright); font: 800 1.45rem/1 var(--font-code); text-align: right; }
.section-ai-demo .ai-demo-foot { margin-top: 24px; padding: 16px; border-left: 2px solid var(--color-primary); color: var(--color-text-mid); }

@media (max-width: 900px) {
  .section-ai-demo .ai-anime-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .section-ai-demo .ai-matches { grid-template-columns: 1fr; }
  .section-ai-demo .ai-match { min-height: 0; }
}
@media (max-width: 560px) {
  .section-ai-demo .ai-anime-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-ai-demo .ai-anime-card { min-height: 138px; padding: 14px; }
}