/* ═══════════════════════════════════════════════════════════════════════
   ÖFFENTLICH · 02 — BAUKASTEN
   Die Teile, aus denen jede Seite besteht. Jedes einmal gebaut, überall
   benutzt (Kap. 10.2).

   Reihenfolge im Kopf: erst Rhythmus (Abschnitt, Behälter), dann Text,
   dann Knöpfe, dann Karten, dann Kleinteile.
   ═════════════════════════════════════════════════════════════════════ */

@layer oe-bausteine {

/* ── Rhythmus ────────────────────────────────────────────────────────
   Ein Abschnitt bringt seinen eigenen Abstand mit. Vorher stand an jeder
   Sektion ein eigener `padding`-Wert; dadurch war der Takt der Seite an
   dreissig Stellen verteilt und nirgends gleich. */
.oe-abschnitt { padding: var(--abschnitt) 0; }
.oe-abschnitt.eng { padding: var(--s-8) 0; }
/* Der Wechsel hell/dunkel gibt der Seite ihren Puls (Kap. 10.6.1). */
.oe-abschnitt.stumpf { background: var(--flaeche-2); }
.oe-abschnitt.dunkel { background: var(--dunkel); color: var(--text-invers); }
.oe-abschnitt.dunkel h1, .oe-abschnitt.dunkel h2, .oe-abschnitt.dunkel h3 { color: var(--n-00); }
.oe-abschnitt.dunkel p { color: var(--text-invers-leise); }
.oe-abschnitt.dunkel a { color: var(--n-00); }

.oe-breite { width: 100%; max-width: var(--seitenbreite); margin-inline: auto; padding-inline: var(--s-5); }
.oe-breite.eng { max-width: var(--seitenbreite-eng); }
.oe-lesebreite { max-width: var(--lesebreite); }

/* ── Abschnittskopf ──────────────────────────────────────────────────
   Kicker, Überschrift, ein Satz. Der Kicker ist die kleinste Schrift der
   Seite und trotzdem das Erste, was man liest — weil er farbig ist und
   allein steht. Genau dafür ist er da: Er ordnet ein, ohne zu erklären. */
.oe-kopf { display: grid; gap: var(--s-3); margin-bottom: var(--s-7); max-width: var(--lesebreite); }
.oe-kopf.mitte { margin-inline: auto; text-align: center; }
.oe-kicker {
  font-family: var(--font-mono); font-size: var(--t-mikro); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--marke-text);
}
.oe-abschnitt.dunkel .oe-kicker { color: var(--marke-hell); }
.oe-kopf p { color: var(--text-leise); }
/* Kopf und Handlung nebeneinander — für Listen mit „Alle ansehen". */
.oe-kopf-zeile {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  align-items: flex-end; justify-content: space-between; margin-bottom: var(--s-6);
}
.oe-kopf-zeile .oe-kopf { margin-bottom: 0; }

/* ── Knöpfe (Kap. 10.2.1: eine Regel, überall) ───────────────────────
   Drei Stufen, mehr nicht: gefüllt für die eine Hauptsache, Umriss für
   das Daneben, blank für das Beiläufige. Wo zwei gefüllte Knöpfe
   nebeneinander stehen, ist einer davon falsch. */
.oe-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-5); min-height: 44px;   /* Daumengrösse */
  border: 1px solid transparent; border-radius: var(--r-full);
  font-size: var(--t-klein); font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: background var(--dauer-schnell) var(--kurve),
              border-color var(--dauer-schnell) var(--kurve),
              transform var(--dauer-schnell) var(--kurve);
}
.oe-knopf.haupt { background: var(--marke); border-color: var(--marke); color: #fff; }
.oe-knopf.haupt:hover { background: var(--marke-dunkel); border-color: var(--marke-dunkel); color: #fff; }
.oe-knopf.rand { background: transparent; border-color: var(--linie-stark); color: var(--text); }
.oe-knopf.rand:hover { border-color: var(--marke); color: var(--marke-text); }
.oe-knopf.blank { padding-inline: var(--s-2); background: none; color: var(--marke-text); }
.oe-knopf.blank:hover { color: var(--marke-dunkel); text-decoration: underline; }
.oe-knopf:active { transform: translateY(1px); }
/* Über die ganze Breite — für Formulare, in denen der Absendeknopf die
   letzte Zeile ist und mittig zu klein wirkt. */
.oe-knopf.breit { width: 100%; justify-content: center; }
.oe-knopf .pn-ic { width: 1.15em; height: 1.15em; }
.oe-abschnitt.dunkel .oe-knopf.rand { border-color: var(--linie-licht); color: var(--n-00); }
.oe-abschnitt.dunkel .oe-knopf.rand:hover { border-color: var(--n-00); color: var(--n-00); }
.oe-knopfe { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.oe-knopfe.mitte { justify-content: center; }

/* Ein Weiterlese-Link mit Pfeil, der beim Überfahren mitgeht. Das ist die
   einzige Bewegung, die sich diese Seite überall erlaubt. */
.oe-weiter {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; font-size: var(--t-klein); text-decoration: none;
}
.oe-weiter::after {
  content: '→'; transition: transform var(--dauer-schnell) var(--kurve);
}
.oe-weiter:hover::after { transform: translateX(3px); }

/* ── Karte ───────────────────────────────────────────────────────────
   Die Karte selbst ist ruhig: weisse Fläche, feine Linie, kaum Schatten.
   Sie hebt sich beim Überfahren — das ist das Signal „hier geht es
   weiter", und es kostet nichts. */
.oe-karte {
  display: grid; gap: var(--s-3);
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-l); overflow: hidden;
  box-shadow: var(--heben-1);
}
.oe-karte.polster { padding: var(--s-5); }
a.oe-karte { color: inherit; text-decoration: none;
             transition: transform var(--dauer-normal) var(--kurve),
                         box-shadow var(--dauer-normal) var(--kurve),
                         border-color var(--dauer-normal) var(--kurve); }
a.oe-karte:hover { transform: translateY(-3px); box-shadow: var(--heben-2); border-color: var(--linie-stark); }
/* Bilder in Karten immer mit fester Seitenverhältnis-Box — sonst springt
   das Layout beim Laden (Kap. 10.6.1). */
.oe-karte .bild { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--flaeche-2); }
.oe-karte .inhalt { display: grid; gap: var(--s-2); padding: var(--s-5); }
.oe-karte .inhalt:not(:first-child) { padding-top: 0; }
.oe-karte h3 { font-size: var(--t-gross); }
.oe-karte p { color: var(--text-leise); font-size: var(--t-klein); line-height: var(--zeile-mit); }

.oe-raster { display: grid; gap: var(--s-5); }
.oe-raster.zwei  { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.oe-raster.drei  { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.oe-raster.vier  { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }

/* ── Chip ────────────────────────────────────────────────────────────
   Eine Beschriftung, die etwas einordnet: Kategorie, Division, Zustand.
   Immer klein, immer in Versalien, nie als Knopf missverständlich. */
.oe-chip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: var(--s-1) var(--s-3); border-radius: var(--r-full);
  background: var(--flaeche-3); color: var(--text-leise);
  font-family: var(--font-mono); font-size: var(--t-mikro); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.oe-chip.marke { background: var(--marke-weich); color: var(--marke-text); }
.oe-chip.ok    { background: var(--ok-bg);   color: var(--ok-500); }
.oe-chip.warn  { background: var(--warn-bg); color: var(--warn-500); }
.oe-chip.err   { background: var(--err-bg);  color: var(--err-500); }
/* Live ist der einzige Zustand, der blinken darf — und auch das nur als
   Punkt, nicht als Fläche. */
.oe-chip.live { background: var(--marke); color: #fff; }
.oe-chip.live::before {
  content: ''; width: 6px; height: 6px; border-radius: var(--r-full);
  background: #fff; animation: oe-puls 1.8s ease-in-out infinite;
}
@keyframes oe-puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ── Meldung ─────────────────────────────────────────────────────────── */
.oe-meldung {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4) var(--s-5); border-radius: var(--r-m);
  border-left: 4px solid var(--info-500); background: var(--info-bg);
  font-size: var(--t-klein); line-height: var(--zeile-mit);
}
.oe-meldung.ok  { border-left-color: var(--ok-500);   background: var(--ok-bg); }
.oe-meldung.warn{ border-left-color: var(--warn-500); background: var(--warn-bg); }
.oe-meldung.err { border-left-color: var(--err-500);  background: var(--err-bg); }
.oe-meldung .pn-ic { flex: none; width: 1.15em; height: 1.15em; margin-top: 2px; }

/* ── Leerer Zustand ──────────────────────────────────────────────────
   Kein Loch, sondern ein Satz und ein Weg. Wo nichts steht, muss stehen,
   warum nichts steht. */
.oe-leer {
  display: grid; gap: var(--s-3); justify-items: center; text-align: center;
  padding: var(--s-8) var(--s-5); color: var(--text-leise);
  border: 1px dashed var(--linie-stark); border-radius: var(--r-l);
}
.oe-leer h3 { color: var(--text); }

/* ── Datenliste ──────────────────────────────────────────────────────
   Beschriftung klein und leise, Wert normal — die Beschriftung stützt den
   Wert, sie konkurriert nicht mit ihm (Kap. 10.2). */
.oe-daten { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-5); margin: 0; }
.oe-daten dt {
  font-family: var(--font-mono); font-size: var(--t-mikro); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-still);
  padding-top: 2px;
}
.oe-daten dd { margin: 0; }
@media (max-width: 560px) {
  .oe-daten { grid-template-columns: 1fr; gap: var(--s-1); }
  .oe-daten dd { margin-bottom: var(--s-3); }
}

/* ── Rückweg ─────────────────────────────────────────────────────────
   ⚠ Hier stand die Brotkrumenleiste. Sie ist raus (07.09.2026): Auf einer
     Seite mit der Überschrift „Call of Duty" sagte die Zeile „Teams / Call
     of Duty" nichts Neues und kostete eine Zeile über jeder Überschrift.
     Was sie wirklich leistete, war der Weg zurück — und der steht besser
     als benannter Link da, der sagt, wohin er führt. Die Auszeichnung für
     Suchmaschinen ist geblieben, siehe `pn_brotkrumen()`. */
.oe-zurueck { margin: 0 0 var(--s-4); font-size: var(--t-klein); }
.oe-zurueck a {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 32px; color: var(--text-leise); text-decoration: none;
}
.oe-zurueck a::before { content: '\2190'; font-size: 1.1em; line-height: 1; }
.oe-zurueck a:hover { color: var(--marke-text); }

/* ── Formularteile ───────────────────────────────────────────────────── */
/* ⚠ `min-width: 0`. Ein `<select>` ist so breit wie seine längste Option:
   „Crossfire League Season 3" hat den Filter auf einem 390-px-Schirm auf
   900 px aufgeblasen und die ganze Seite seitlich verschiebbar gemacht.
   Ohne diese Zeile hilft auch `width: 100%` am Feld nichts — die
   Mindestgrösse des Inhalts gewinnt. */
.oe-feld { display: grid; gap: var(--s-2); min-width: 0; }
.oe-feld > span, .oe-feld > label {
  font-family: var(--font-mono); font-size: var(--t-mikro); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-still);
}
.oe-feld small { font-family: var(--font-body); text-transform: none; letter-spacing: 0;
                 color: var(--text-still); }
.oe-feld input, .oe-feld select, .oe-feld textarea {
  width: 100%; padding: var(--s-3) var(--s-4);
  font-size: var(--t-body); background: var(--flaeche);
  border: 1px solid var(--linie-stark); border-radius: var(--r-m);
  transition: border-color var(--dauer-schnell) var(--kurve);
}
.oe-feld input:hover, .oe-feld select:hover, .oe-feld textarea:hover { border-color: var(--n-30); }
.oe-feld input:focus, .oe-feld select:focus, .oe-feld textarea:focus {
  border-color: var(--marke); outline-offset: 1px;
}
.oe-feld.falsch input, .oe-feld.falsch textarea { border-color: var(--err-500); }
.oe-feld em { font-style: normal; font-size: var(--t-klein); color: var(--err-500); }

/* ── Reveal beim Scrollen ────────────────────────────────────────────
   Ein einziger Effekt für die ganze Seite: leicht von unten, einmal, 320 ms.
   Ohne JavaScript und bei abgeschalteter Bewegung ist alles sofort da —
   deshalb ist der Sichtbar-Zustand die Vorgabe und nicht umgekehrt. */
.oe-auf { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .oe-auf { opacity: 0; transform: translateY(14px);
                transition: opacity .32s var(--kurve), transform .32s var(--kurve); }
  .js .oe-auf.da { opacity: 1; transform: none; }
}

/* ── Seitenkopf mit Bild ─────────────────────────────────────────────
   Stand zuerst nur bei der Liga (`.liga-hero`). Sobald die zweite Seite
   denselben Kopf brauchte, gehörte er hierher — sonst steht derselbe
   Verlauf zweimal da und wird einmal gepflegt.

   ⚠ Der Verlauf ist nicht Deko, er ist die Lesbarkeit: Welches Bild
     später dort liegt, entscheidet jemand anders als der, der den Text
     schreibt. Ohne ihn hängt der Kontrast an einem Foto. */
.oe-hero {
  position: relative; display: grid; align-items: end;
  min-height: 44vh; padding: var(--s-9) 0 var(--s-8);
  overflow: hidden; background: var(--dunkel);
}
.oe-hero .grund { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.oe-hero .verlauf {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,12,17,.55) 0%, rgba(13,12,17,.78) 55%, rgba(13,12,17,.95) 100%);
}
.oe-hero .inhalt { position: relative; color: var(--text-invers); display: grid; gap: var(--s-4);
                   justify-items: start; }
.oe-hero .inhalt .oe-kicker { color: var(--marke-hell); }
.oe-hero h1 { color: var(--n-00); font-size: var(--t-display); }
.oe-hero p { max-width: 52ch; color: var(--text-invers-leise); }
.oe-hero .oe-knopf.rand { border-color: var(--linie-licht); color: var(--n-00); }
.oe-hero .oe-knopf.rand:hover { border-color: var(--n-00); }

/* Die Zahlenreihe im Bildkopf — Mono für das Etikett, Anton für die Zahl. */
.oe-hero .zahlen { display: flex; flex-wrap: wrap; gap: var(--s-7); margin: var(--s-2) 0 0; }
.oe-hero .zahlen dt { font-family: var(--font-mono); font-size: var(--t-mikro); font-weight: 600;
                      letter-spacing: .12em; text-transform: uppercase; color: var(--n-40); }
.oe-hero .zahlen dd { margin: var(--s-1) 0 0; font-family: var(--font-display);
                      font-size: var(--t-h2); color: var(--n-00); line-height: 1; }

/* ── Zahlenband ──────────────────────────────────────────────────────
   Dieselbe Aufteilung auf hellem Grund, quer über die Breite. Stand
   zuerst nur auf `/verein`; sobald `/teams` dasselbe zeigen wollte,
   gehörte es hierher. Zwei Zahlenreihen unterschiedlich zu setzen macht
   aus einer Information zwei. */
.oe-zahlenband {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--s-5); margin: 0; padding: var(--s-6) 0;
  border-block: 1px solid var(--linie);
}
.oe-zahlenband div { display: grid; gap: var(--s-1); text-align: center; }
.oe-zahlenband dt { font-family: var(--font-mono); font-size: var(--t-mikro); font-weight: 600;
                    letter-spacing: .12em; text-transform: uppercase; color: var(--text-still); }
.oe-zahlenband dd { margin: 0; font-family: var(--font-display); font-size: var(--t-h1);
                    line-height: 1; color: var(--text); }

@media (max-width: 720px) {
  .oe-hero { min-height: 0; padding: var(--s-8) 0 var(--s-7); }
}

/* ═══════════════════════════════════════════════════════════════════════
   KOMPOSITION  (07.09.2026)

   Bis hierher bestand die Seite aus einer Reihe zentrierter Abschnitte,
   jeder mit einem Kopf in der Mitte und Karten darunter. Das ist sauber
   und beliebig: Man kann daran nicht ablesen, WO man ist, weil jeder
   Abschnitt gleich anfängt.

   Die drei Bausteine hier ändern das:

     ① **Das Band** legt eine schmale Randspalte an. Dort steht ein
        Etikett in Mono-Grossbuchstaben — dieselbe Kante auf jeder Seite.
        Der Inhalt beginnt rechts davon, immer an derselben Stelle. Wer
        scrollt, liest an der linken Kante mit, worin er gerade ist.

     ② **Die Zahlenwand** setzt gezählte Zahlen in Anzeigengrösse. Sie ist
        die einzige Stelle, an der Schrift wie ein Bild wirkt — und sie
        trägt ausschliesslich Zahlen aus der Datenbank.

     ③ **Die Linienliste** ersetzt Karten dort, wo eine Karte nichts
        hinzufügt. Eine Liste aus zehn Kästchen mit Rahmen, Radius und
        Schatten ist zehnmal Rahmen, Radius und Schatten. Eine Haarlinie
        reicht, um zu trennen.
   ═════════════════════════════════════════════════════════════════════ */

/* ── ① Band ──────────────────────────────────────────────────────────
   ⚠ Die Randspalte fällt unter 1000 px weg, sie klappt nicht um: Ein
     10-rem-Etikett neben 22 rem Inhalt drückt den Text auf Handybreite in
     eine Spalte aus fünf Zeichen. Das Etikett steht dann darüber. */
.oe-band { padding: var(--abschnitt) 0; }
.oe-band > .innen {
  display: grid; grid-template-columns: var(--schiene) minmax(0, 1fr);
  gap: var(--s-7);
  width: 100%; max-width: var(--seitenbreite); margin-inline: auto;
  padding-inline: var(--s-5);
}
.oe-band.weit > .innen { max-width: var(--seitenbreite-weit); }
.oe-band > .innen > .schiene { position: relative; }
/* Das Etikett klebt mit, solange sein Abschnitt läuft — es ist die
   Standortangabe, und die nützt nur, wenn sie sichtbar bleibt. */
.oe-band > .innen > .schiene > .marke {
  position: sticky; top: calc(var(--nav-h) + var(--s-5));
  display: grid; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--t-mikro); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-still);
}
.oe-band > .innen > .schiene > .marke::before {
  content: ''; width: var(--s-6); height: 2px; background: var(--marke);
}
/* ⚠ `grid-template-columns: minmax(0, 1fr)`. Ein Raster ohne diese
   Angabe legt eine Spalte in `auto` an, und `auto` heisst
   `max-content`: Der Filter der Teamübersicht war damit 900 px breit
   in einer 342-px-Spalte, und die Seite liess sich seitlich schieben.
   `min-width: 0` am Kasten allein reicht nicht — es begrenzt den
   Kasten, nicht seine Spur. */
.oe-band > .innen > .feld { min-width: 0; display: grid;
                            grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.oe-band.papier { background: var(--papier); }
.oe-band.dunkel { background: var(--dunkel); color: var(--text-invers); }
.oe-band.dunkel h1, .oe-band.dunkel h2, .oe-band.dunkel h3 { color: var(--n-00); }
.oe-band.dunkel p { color: var(--text-invers-leise); }
.oe-band.dunkel > .innen > .schiene > .marke { color: var(--n-40); }

/* Der Kopf eines Bandes: gross, links, ohne Kicker — den trägt die
   Randspalte. Zwei Etiketten für dieselbe Sache wären eins zu viel. */
/* ⚠ Zwei Breiten, nicht eine: Die Überschrift darf über zwanzig Zeichen
   je Zeile laufen — in Anzeigengrösse sind das schon 600 px —, der Satz
   darunter über fünfundvierzig. Beide auf dieselbe Breite zu setzen hiess
   beim ersten Versuch: „EIN VEREIN, / KEINE / ORGANISATION" auf drei
   Zeilen mit einem einzelnen Wort in der Mitte. */
/* ⚠ `min(…, 100%)` bei beiden. 20ch klingt harmlos, aber in Anton auf
   Anzeigengrösse sind das über 400 px — auf einem 390-px-Schirm lief die
   Überschrift aus dem Bild und die ganze Seite liess sich seitlich
   schieben. Eine Zeichenbreite ist keine Pixelbreite. */
.oe-bandkopf { display: grid; grid-template-columns: minmax(0, 1fr);
               gap: var(--s-3); max-width: min(46ch, 100%); }
/* ⚠ `h1, h2` — nicht nur `h2`. Die Rechtstexte tragen ein `h1` im
   Bandkopf, und „Nutzungsbedingungen" ist in Anton auf Anzeigengrösse
   400 px breit: ein einzelnes Wort, das die Seite auf einem 390-px-Schirm
   seitlich verschiebbar machte. Ein Wort kann keine Zeile umbrechen, wenn
   man es ihm nicht erlaubt. */
.oe-bandkopf h1, .oe-bandkopf h2 { max-width: min(20ch, 100%); font-size: var(--t-display);
                  line-height: var(--zeile-eng); overflow-wrap: break-word; hyphens: auto; }
.oe-bandkopf p { color: var(--text-leise);
                 font-size: var(--t-gross); line-height: var(--zeile-mit); }
.oe-band.dunkel .oe-bandkopf p { color: var(--text-invers-leise); }
/* Kopf links, ein Weiterlink rechts auf derselben Grundlinie. */
.oe-bandzeile { display: flex; flex-wrap: wrap; gap: var(--s-5);
                align-items: end; justify-content: space-between; }

@media (max-width: 1000px) {
  .oe-band > .innen { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .oe-band > .innen > .schiene > .marke { position: static; }
  .oe-band > .innen > .schiene > .marke::before { width: var(--s-5); }
}

/* ── ② Zahlenwand ────────────────────────────────────────────────────
   Anton in Anzeigengrösse, das Etikett klein und leise darunter. Die Zahl
   trägt, das Etikett stützt (Kap. 10.2) — umgekehrt liest man erst das
   Wort und muss dann die Zahl suchen. */
.oe-zahlenwand {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--s-6) var(--s-5); margin: 0;
}
.oe-zahlenwand > div { display: grid; gap: var(--s-1); }
.oe-zahlenwand dd {
  margin: 0; font-family: var(--font-display); font-size: var(--t-display);
  line-height: .9; letter-spacing: -.01em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.oe-zahlenwand dt {
  font-family: var(--font-mono); font-size: var(--t-mikro); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-still);
}
.oe-zahlenwand small { display: block; color: var(--text-leise); font-size: var(--t-klein); }
.oe-band.dunkel .oe-zahlenwand dd { color: var(--n-00); }
.oe-band.dunkel .oe-zahlenwand dt { color: var(--n-40); }

/* ── ③ Linienliste ───────────────────────────────────────────────────
   Trennt mit einer Haarlinie statt mit zehn Kästchen. Der Hover färbt die
   Zeile, nicht ihren Rand — ein Rahmen, der beim Zeigen erscheint, lässt
   die Liste springen. */
.oe-linien { list-style: none; margin: 0; padding: 0; display: grid; }
.oe-linien > li, .oe-linien > a { border-top: 1px solid var(--linie); }
.oe-linien > li:last-child, .oe-linien > a:last-child { border-bottom: 1px solid var(--linie); }
.oe-linien > a {
  display: grid; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-2); color: inherit; text-decoration: none;
  transition: background var(--dauer-schnell) var(--kurve);
}
.oe-linien > a:hover { background: var(--papier); }
.oe-band.dunkel .oe-linien > li, .oe-band.dunkel .oe-linien > a { border-color: var(--linie-licht); }
.oe-band.dunkel .oe-linien > a:hover { background: rgba(255, 255, 255, .05); }

/* Eine Zeile mit Zeitspalte, Hauptfeld und Nachsatz — das Muster für
   Matches, Termine und Ergebnisse. */
.oe-linien .wann {
  font-family: var(--font-mono); font-size: var(--t-mikro); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-still);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.oe-linien .haupt { min-width: 0; font-weight: 600; }
.oe-linien .haupt small { display: block; font-weight: 400; color: var(--text-leise);
                          font-size: var(--t-klein); }
.oe-linien .nach { color: var(--text-still); font-size: var(--t-klein); white-space: nowrap; }
.oe-band.dunkel .oe-linien .haupt small { color: var(--text-invers-leise); }
.oe-band.dunkel .oe-linien .nach { color: var(--n-40); }

/* ═══════════════════════════════════════════════════════════════════════
   DIE ABSCHNITTE  (21.09.2026)

   Jeder Block der öffentlichen Seiten ist seit dem Umbau ein Abschnitt aus
   `core.page_sections`. Was er kann, steht in `app/abschnitte.php`; wie er
   aussieht, hier.
   ═════════════════════════════════════════════════════════════════════ */

/* ── Farbstimmungen der Bänder ───────────────────────────────────────
   `papier` und `dunkel` gibt es schon; `marke` kommt dazu. Rot als
   Bandfläche ist die lauteste Stimmung, die es gibt — sie gehört auf
   höchstens einen Abschnitt je Seite. */
.oe-band.marke { background: var(--marke); color: #fff; }
.oe-band.marke h1, .oe-band.marke h2, .oe-band.marke h3 { color: #fff; }
.oe-band.marke p { color: rgba(255, 255, 255, .88); }
.oe-band.marke > .innen > .schiene > .marke { color: rgba(255, 255, 255, .72); }
.oe-band.marke > .innen > .schiene > .marke::before { background: #fff; }
.oe-band.marke .oe-knopf.haupt { background: #fff; border-color: #fff; color: var(--marke-dunkel); }
.oe-band.marke .oe-knopf.rand  { border-color: rgba(255, 255, 255, .5); color: #fff; }
.oe-band.marke .oe-weiter { color: #fff; }

/* ⚠ Ein Abschnitt, der auf dem Handy nicht getragen hat, wird dort
   ausgeblendet — nicht gequetscht. Die Karte Europas ist das Beispiel:
   sechs Punkte auf 390 px sind sechs Punkte, die niemand trifft. */
@media (max-width: 720px) { .ohne-handy { display: none !important; } }

/* ── Ankündigungsleiste ──────────────────────────────────────────────
   Über der Navigation, nicht im Inhalt. Eine Zeile, ein Link, fertig —
   wird sie zweizeilig, ist es keine Ansage mehr, sondern ein Abschnitt. */
.oe-ansage { background: var(--marke); color: #fff; }
.oe-ansage.papier { background: var(--flaeche-2); color: var(--text); }
.oe-ansage.dunkel { background: var(--dunkel); color: var(--text-invers); }
.oe-ansage.weiss  { background: var(--flaeche); color: var(--text);
                    border-bottom: 1px solid var(--linie); }
.oe-ansage .innen {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-3); padding-block: var(--s-3);
  font-size: var(--t-klein); font-weight: 500; text-align: center;
}
.oe-ansage .etikett {
  font-family: var(--font-mono); font-size: var(--t-mikro); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 2px var(--s-2); border-radius: var(--r-full);
  border: 1px solid currentColor; opacity: .85;
}
.oe-ansage a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ── Zahlenstreifen ──────────────────────────────────────────────────
   Die Bruchkante unter dem Kopf. Anton trägt die Zahl, Mono das Etikett —
   die Zahl ist die Aussage, das Etikett stützt sie (Kap. 10.2). */
.oe-zahlstreifen { background: var(--flaeche); border-block: 1px solid var(--linie); }
.oe-zahlstreifen.papier { background: var(--papier); }
.oe-zahlstreifen.dunkel { background: var(--dunkel-2); border-color: transparent; }
.oe-zahlstreifen.marke  { background: var(--marke); border-color: transparent; }
.oe-zahlstreifen dl {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(50%, 9rem), 1fr));
  gap: var(--s-6) var(--s-5); margin: 0; padding-block: var(--s-7);
}
.oe-zahlstreifen div { display: grid; gap: var(--s-1); }
.oe-zahlstreifen dd {
  margin: 0; font-family: var(--font-display); font-size: var(--t-h1);
  line-height: .9; color: var(--text); font-variant-numeric: tabular-nums;
}
.oe-zahlstreifen dt {
  font-family: var(--font-mono); font-size: var(--t-mikro); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-still);
}
.oe-zahlstreifen.dunkel dd, .oe-zahlstreifen.marke dd { color: var(--n-00); }
.oe-zahlstreifen.dunkel dt { color: var(--n-40); }
.oe-zahlstreifen.marke  dt { color: rgba(255, 255, 255, .7); }

/* ── Freier Banner ───────────────────────────────────────────────────
   Wort links, Tat rechts. Der Verlauf sichert den Kontrast unabhängig
   davon, welches Bild jemand später einsetzt — sonst hängt die
   Lesbarkeit an einer Datei, die ein anderer austauscht. */
.oe-banner {
  position: relative; overflow: hidden; border-radius: var(--r-l);
  padding: var(--s-7) var(--s-7);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-7);
  align-items: center;
  background: var(--dunkel); color: var(--text-invers);
}
.oe-banner.marke  { background: linear-gradient(110deg, var(--dunkel) 0%, #2a0a16 55%, #5c0a22 100%); }
.oe-banner.papier { background: var(--papier); color: var(--text); }
.oe-banner.weiss  { background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); }
.oe-banner .grund { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.oe-banner .verlauf {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13,12,17,.92) 0%, rgba(13,12,17,.7) 55%, rgba(13,12,17,.4) 100%);
}
.oe-banner .wort { position: relative; display: grid; gap: var(--s-3); }
.oe-banner h2 { font-size: var(--t-h1); line-height: var(--zeile-eng); color: var(--n-00); }
.oe-banner p  { max-width: 62ch; color: var(--text-invers-leise); line-height: var(--zeile-mit); }
.oe-banner .oe-kicker { color: var(--marke-hell); }
.oe-banner.papier h2, .oe-banner.weiss h2 { color: var(--text); }
.oe-banner.papier p,  .oe-banner.weiss p  { color: var(--text-leise); }
.oe-banner.papier .oe-kicker, .oe-banner.weiss .oe-kicker { color: var(--marke-text); }
.oe-banner .tat { position: relative; display: grid; gap: var(--s-3); justify-items: stretch; }
.oe-banner .oe-knopfe { justify-content: center; }
.oe-banner .oe-knopf.rand { border-color: var(--linie-licht); color: var(--n-00); }
.oe-banner.papier .oe-knopf.rand, .oe-banner.weiss .oe-knopf.rand {
  border-color: var(--linie-stark); color: var(--text); }

@media (max-width: 860px) {
  .oe-banner { grid-template-columns: minmax(0, 1fr); padding: var(--s-6) var(--s-5); }
}

/* ── Countdown ───────────────────────────────────────────────────────
   Mono und `tabular-nums`: Mit proportionaler Schrift springt die Zahl
   bei jeder Minute, und der ganze Kasten wackelt mit. */
.oe-countdown { display: flex; gap: var(--s-2); justify-content: center; }
.oe-countdown span {
  display: grid; justify-items: center; gap: 2px; min-width: 62px;
  padding: var(--s-3) var(--s-2); border-radius: var(--r-m);
  background: rgba(255, 255, 255, .1);
}
.oe-countdown b {
  font-family: var(--font-mono); font-size: var(--t-h3); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--n-00); line-height: 1;
}
.oe-countdown small {
  font-family: var(--font-mono); font-size: var(--t-mikro); letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .6);
}
.oe-banner.papier .oe-countdown span, .oe-banner.weiss .oe-countdown span {
  background: var(--flaeche-2); }
.oe-banner.papier .oe-countdown b, .oe-banner.weiss .oe-countdown b { color: var(--text); }
.oe-banner.papier .oe-countdown small, .oe-banner.weiss .oe-countdown small { color: var(--text-still); }

/* ── Wege zum Mitmachen ──────────────────────────────────────────────── */
.oe-wege { display: grid; gap: var(--s-4);
           grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.oe-wege > a {
  display: grid; align-content: start; gap: var(--s-3); padding: var(--s-6);
  border: 1px solid var(--linie); border-radius: var(--r-l);
  color: inherit; text-decoration: none;
  transition: border-color var(--dauer-normal) var(--kurve), transform var(--dauer-normal) var(--kurve);
}
.oe-wege > a:hover { border-color: var(--marke-linie); transform: translateY(-2px); }
.oe-wege > a.haupt { background: var(--marke); border-color: var(--marke); color: #fff; }
.oe-wege > a.haupt:hover { background: var(--marke-dunkel); border-color: var(--marke-dunkel); }
.oe-wege strong { font-family: var(--font-display); font-size: var(--t-h3);
                  font-weight: 400; text-transform: uppercase; line-height: var(--zeile-eng); }
.oe-wege span { color: var(--text-leise); font-size: var(--t-klein); line-height: var(--zeile-mit); }
.oe-wege .oe-weiter { margin-top: auto; color: var(--marke-text); }
/* ⚠ Volles Weiss, nicht 90 %. Auf der Markenflaeche sind 90 % Weiss
   4,14:1 — knapp unter der Grenze, und „knapp darunter" ist darunter.
   Der Unterschied ist mit blossem Auge nicht zu sehen; der im Messgeraet
   schon. */
.oe-wege > a.haupt span, .oe-wege > a.haupt .oe-weiter { color: #fff; }
.oe-band.dunkel .oe-wege > a { border-color: var(--linie-licht); }
.oe-band.dunkel .oe-wege span { color: var(--text-invers-leise); }
.oe-band.dunkel .oe-wege .oe-weiter { color: var(--n-00); }

/* ── Freier Text, Video, Werbefläche ─────────────────────────────────── */
.oe-fliess { max-width: var(--lesebreite); color: var(--text-leise);
             font-size: var(--t-gross); line-height: var(--zeile-weit); }
.oe-band.dunkel .oe-fliess { color: var(--text-invers-leise); }
.oe-video video { width: 100%; max-width: 60rem; border-radius: var(--r-m); display: block; }
.oe-werbeflaeche { padding-block: var(--s-7); }
.oe-werbeflaeche img { margin-inline: auto; }

}