/**
 * Anirova District — Panel-Raster fuer die Unterseiten.
 *
 * Die Original-Boards (02-04) zeigen dichte Raster aus umrandeten Panels:
 * jede Karte hat Flaeche, Rahmen und Titel. Die Bestandsseiten haben
 * denselben INHALT bereits (8-15 Karten je Seite) — er wird nur nicht als
 * Raster dargestellt: transparenter Hintergrund, kaum sichtbarer Rahmen.
 *
 * Hier wird deshalb NICHTS umgeschrieben, nur die vorhandenen Karten auf
 * Board-Niveau gehoben. Kein neuer Inhalt, keine erfundenen Daten.
 *
 * Gilt nur auf District-Seiten (data-district-seite) und bewusst NICHT auf
 * den Legal-Seiten — die haben ihre eigene ruhige Variante (Welle 7).
 */

/* ── Karten auf Board-Niveau ─────────────────────────────────────────────
   Alle Karten-Klassen des Bestands, gesammelt aus den District-Seiten.
   Sie bekommen Flaeche und sichtbaren Rahmen wie die District-Cards. */
[data-district-seite]:not([data-district-legal]) :is(
  .value-card, .match-card, .how-card, .screens-item, .arx-item,
  .vote-item, .press-card, .press-card-wide,
  .status-card, .status-card-major, .status-card-wide,
  .tech-card, .tech-card-wide, .fazit-card
) {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: border-color var(--dur-fast) var(--ease-district-out),
              background-color var(--dur-fast) var(--ease-district-out);
}

/* Karten mit eigenem Innenabstand bekommen keinen zweiten. Nur die, die
   vorher randlos waren, brauchen ihn jetzt. */
[data-district-seite]:not([data-district-legal]) :is(
  .value-card, .arx-item, .vote-item, .screens-item
) {
  padding: var(--space-4);
}

/* Anfassbare Karten heben sich beim Zeigen leicht — maximal 2 px
   (DESIGN.md 4). Nicht-interaktive Panels bleiben ruhig. */
[data-district-seite]:not([data-district-legal]) :is(
  a, button
):is(
  .value-card, .match-card, .press-card, .status-card, .tech-card, .vote-item
):hover {
  border-color: var(--color-primary);
  background: var(--color-surface-raised);
}

/* ── Raster ──────────────────────────────────────────────────────────────
   Die Boards nutzen durchgaengig gleich hohe Spalten. Bestehende Grids
   bleiben unangetastet — hier wird nur der Abstand vereinheitlicht, damit
   die Panels als eine Flaeche gelesen werden. */
[data-district-seite]:not([data-district-legal]) :is(
  .value-grid, .press-grid, .status-grid, .tech-grid, .how-grid
) {
  gap: var(--space-4);
}

/* ── Sektionstitel ───────────────────────────────────────────────────────
   Auf den Boards traegt jeder Panel-Block eine kleine Grossbuchstaben-
   Beschriftung. Der Bestand hat sie teils als Eyebrow — die wird hier
   auf denselben Stil gebracht. */
[data-district-seite]:not([data-district-legal]) :is(
  .sec-eyebrow, .ph-eyebrow, .section-eyebrow
) {
  font: 600 11px/16px var(--font-code);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-text-lo);
}

/* ── Board-Panel ─────────────────────────────────────────────────────────
   Die Anatomie aus den Original-Boards: Titelzeile in Versalien, Rahmen,
   Inhalt, optional eine Aktionszeile unten. Einmal als Baustein, damit
   jede Seite Zusammensetzen statt Neuerfinden ist. */
.dp {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}

.dp__kopf {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-recessed);
}

.dp__titel {
  margin: 0;
  font: 700 12px/16px var(--font-code);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-text-hi);
}

/* Kennzahl neben dem Titel, wie in den Boards ("LIVE 12", "BETA 5"). */
.dp__marke {
  margin-inline-start: auto;
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: 600 11px/16px var(--font-code);
  color: var(--color-text-lo);
}

.dp__inhalt {
  flex: 1;
  padding: var(--space-4);
  font: 400 14px/22px var(--font-body);
  color: var(--color-text-mid);
}

.dp__fuss {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* ── Zeilenliste ─────────────────────────────────────────────────────────
   Das wiederkehrende Muster der Boards: Bezeichnung links, Wert rechts. */
.dp-zeilen { margin: 0; padding: 0; list-style: none; }

.dp-zeile {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgb(36 68 94 / .4);
}

.dp-zeile:last-child { border-bottom: 0; }

.dp-zeile__name { color: var(--color-text-mid); }

.dp-zeile__wert {
  margin-inline-start: auto;
  font: 600 13px/20px var(--font-code);
  color: var(--color-text-hi);
  text-align: end;
}

/* Status immer mit Text, nie nur Farbe (DESIGN.md 4). */
.dp-status { color: var(--color-success); }
.dp-status--warnung { color: var(--color-warning); }
.dp-status--offen { color: var(--color-text-lo); }

/* ── Fehlende Daten ──────────────────────────────────────────────────────
   Sichtbar gekennzeichnet statt erfunden: Ein leerer Bereich, der ehrlich
   sagt, dass die Quelle fehlt, ist besser als eine Platzhalterzahl, die
   wie eine Messung aussieht. */
.dp--folgt .dp__inhalt {
  display: grid;
  place-items: center;
  min-height: 96px;
  color: var(--color-text-lo);
  font: 600 12px/18px var(--font-code);
  letter-spacing: .08em;
  text-align: center;
}

.dp--folgt .dp__kopf { opacity: .7; }

/* ── Raster ──────────────────────────────────────────────────────────────
   Die Boards legen Panels in gleich hohen Spalten nebeneinander. */
.dp-raster {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: stretch;
}

.dp-raster--zwei { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.dp-raster--breit { grid-template-columns: 1fr; }

@media (max-width: 599px) {
  .dp-raster,
  .dp-raster--zwei { grid-template-columns: 1fr; }
}

/* Ersetzt ein Panel den Seiten-Hero, traegt es die H1 der Seite. Sie soll
   dort nicht groesser wirken als der Panel-Titel — die Hierarchie liegt in
   der Struktur, nicht in der Schriftgroesse. */
.dp__h1 {
  margin: 0 0 var(--space-1);
  font: 800 clamp(22px, 2.6vw, 30px)/1.2 var(--font-display);
  color: var(--color-text-hi);
}