/* ═══════════════════════════════════════════════════════════════════════
   ÖFFENTLICH · 06 — MARKE
   Die Bausteine des Rebrandings, die es vorher nicht gab: Theme-Umschalter,
   Match-Widget in der Navigation, Claim-Laufband, Label, Chips, Segmented
   Control, Kennzahlen, Kachelraster, Tabellen.

   ⚠ Alles andere — Farben, Radien, Abstände, Schatten — steht NICHT hier,
     sondern in `oe-tokens.css`. Dort ziehen die Werte um, und die 4600
     Zeilen Bestand ziehen mit. Wer hier eine Farbe hart hinschreibt, nimmt
     genau diese Seite aus dem Rebranding heraus.

   ⚠ Mobil zuerst. Jede Regel hier gilt ab 360px; die `@media`-Blöcke am
     Ende bauen nach oben aus, nicht nach unten ab. Der Guide ist da
     deutlich: Mehr als die Hälfte der Besucher kommt aus einem
     In-App-Browser im Hochformat.
   ═════════════════════════════════════════════════════════════════════ */

@layer oe-seiten {

/* ═══════════════ GRUNDLAGE ══════════════════════════════════════════ */

/* Der Grund gehört dem Theme, nicht der Seite. Ohne diese Zeile steht
   unter langen Seiten ein weisser Streifen. */
html.oe { background: var(--bg); }
html.oe body { background: var(--bg); color: var(--text); }

/* ⚠ Zahlen immer mit `tabular-nums`. Ohne das stehen Scores, Uhrzeiten und
   Preise in Tabellen nicht untereinander — und genau dort schaut man hin. */
.oe body, .oe table, .oe .zahl, .oe time { font-variant-numeric: tabular-nums; }

/* Die Überschriften des Guides. `--zeile-knapp` ist .94 — der Wert steht
   dort ausdrücklich, weil Anton bei 136px sonst auseinanderfällt. */
.oe h1 { font-family: var(--font-display); line-height: var(--zeile-knapp); text-transform: uppercase; }
.oe h2, .oe h3 { font-family: var(--font-display); line-height: var(--zeile-eng); text-transform: uppercase; }

/* Das Label aus dem Guide: Poppins 600, 11px, .15em, Versalien. Es ist der
   einzige Platz für Kategorien, Meta-Zeilen und Tabellenköpfe. */
.oe-label {
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--t-winzig); letter-spacing: var(--label-spur);
  text-transform: uppercase; color: var(--text-3);
}

/* Der Inhaltsrahmen: 1340px, 32px Rand — auf dem Handy 16px, sonst steht
   der Text auf der Kante. */
.oe-breite { width: 100%; max-width: var(--seitenbreite); margin-inline: auto;
             padding-inline: clamp(16px, 4vw, var(--rand)); }

/* ═══════════════ FLÄCHEN, DIE IMMER DUNKEL SIND ═════════════════════
   Der Guide hält sie fest: „Dunkle Kacheln bleiben im Light Mode dunkel
   (Twitch, LAN). Sie tragen den Rhythmus." Dazu kommen Hero, Banner,
   Fussleiste und die dunklen Bänder — sie waren schon vorher dunkel.

   ⚠ Statt in jeder dieser Flächen einzeln die Textfarbe zu setzen (das
     wären über vierzig Regeln, und eine davon vergisst man), werden hier
     die TOKENS lokal umdefiniert. Jede Regel darunter — auch jede aus dem
     Bestand — liest damit von selbst die richtigen Werte. Genau dafür
     zeigen die alten Namen in `oe-tokens.css` auf die neuen: Wer `--text-2`
     hier umbiegt, biegt `--text-leise` mit um.

   ⚠ Und `--red-2` muss mit: Auf dunklem Grund ist #FF4D72 der lesbare
     Rotton (5,5:1), auf hellem #B30730. Im Light Mode trüge eine dunkle
     Fläche sonst das helle Rot — 2,8:1, unlesbar. */
.oe-fuss, .oe-claimband,
.oe-abschnitt.dunkel, .oe-band.dunkel, .oe-ansage.dunkel,
.oe-zahlstreifen.dunkel, .oe-zahlstreifen.marke,
.oe-hero, .oe-banner, .oe-banner.marke,
.section-dark, .oe-kachel.dunkel, .season-kopf,
/* ⚠ Die Kacheln der Kachelwand gehoeren hierher. Sie sind IMMER dunkel —
     der Altbestand setzt ihnen `color: #fff` fest —, standen aber nicht in
     dieser Liste. Im hellen Theme loeste `--red-2` darin deshalb das
     HELLE Rot auf (#B30730): der Preis auf der Shop-Kachel kam auf
     2,4:1 statt 5,5:1. */
.bento-raster .kachel,
.gemeinschaft .gem-karte.dunkel, .start-kopf, .flag-season {
  --text:   var(--auf-dunkel);
  --text-2: var(--auf-dunkel-leise);
  --text-3: rgba(230, 230, 230, .62);
  --text-4: rgba(230, 230, 230, .34);
  --line:   rgba(255, 255, 255, .17);
  --line-2: rgba(255, 255, 255, .10);
  --surface:   var(--fest-dunkel-2);
  --surface-2: var(--fest-dunkel-3);
  --surface-3: var(--fest-dunkel-3);
  --red-2:  #FF4D72;
  --bg:     var(--fest-dunkel);

  /* ⚠⚠ DIE ALTEN NAMEN MÜSSEN HIER NOCH EINMAL STEHEN. Das ist keine
     Dopplung, sondern eine Eigenheit von CSS-Variablen, und sie hat beim
     ersten Versuch genau so zugeschlagen:

     `--marke-hell: var(--red-2)` steht in `:root`. Dort wird es AUFGELÖST,
     und was vererbt wird, ist der fertige Wert — nicht die Rechnung. Wer
     weiter unten `--red-2` neu setzt, ändert `--marke-hell` deshalb NICHT
     mehr. Auf der dunklen Bühne stand der Kicker dadurch in #B30730 statt
     #FF4D72: 2,6:1 statt 5,5:1.

     Ein Alias folgt einer Überschreibung nur, wenn er in DERSELBEN Regel
     noch einmal steht. Also steht er hier. */
  --text-leise: var(--auf-dunkel-leise);
  --text-still: rgba(230, 230, 230, .62);
  --text-muted: var(--auf-dunkel-leise);
  --text-invers:       var(--auf-dunkel);
  --text-invers-leise: var(--auf-dunkel-leise);
  --text-inv:          var(--auf-dunkel);
  --text-inv-muted:    var(--auf-dunkel-leise);
  --marke-hell: #FF4D72;
  --marke-text: #FF4D72;
  --marke-weich: rgba(224, 9, 60, .18);
  --marke-linie: rgba(224, 9, 60, .40);
  --accent-soft: rgba(224, 9, 60, .18);
  --linie:       rgba(255, 255, 255, .10);
  --linie-stark: rgba(255, 255, 255, .17);
  --line-strong: rgba(255, 255, 255, .17);
  --grund:     var(--fest-dunkel);
  --flaeche:   var(--fest-dunkel-2);
  --flaeche-2: var(--fest-dunkel-3);
  --flaeche-3: var(--fest-dunkel-3);
  --bg-soft:   var(--fest-dunkel-3);
  --papier:    var(--fest-dunkel);
  --err-500:   #FF4D72;
  --err-bg:    rgba(224, 9, 60, .18);
  --n-00: var(--auf-dunkel);
  --n-05: var(--fest-dunkel);
  --n-10: var(--fest-dunkel-2);
  --n-15: var(--fest-dunkel-3);
  --n-20: rgba(255, 255, 255, .17);
  --n-30: rgba(230, 230, 230, .62);
  --n-40: rgba(230, 230, 230, .62);
  --n-50: rgba(230, 230, 230, .62);
  --n-60: var(--auf-dunkel-leise);
  --n-70: var(--auf-dunkel-leise);
  --n-80: var(--auf-dunkel);
  --n-90: var(--auf-dunkel);
  --n-99: var(--auf-dunkel);
}

/* ⚠ Auf der Markenflaeche gilt REINES Weiss, nicht `--text`. #E6E6E6 auf
   #E0093C sind 3,94:1 — unter der Grenze. Weiss schafft 4,56:1. Betrifft
   jede Stelle, an der Schrift auf Rot steht. */
.pn-skip, .oe-kachel.rot, .oe-chip.rot, .oe-match .wann,
.oe-segment > [aria-current="page"], .oe-segment > .aktiv { color: #fff; }

/* ═══════════════ THEME-UMSCHALTER ═══════════════════════════════════
   Ein echter Knopf mit Kontrast-Icon und Wort (Guide). Das Wort nennt das
   ZIEL — `marke.js` setzt es, weil erst der Browser weiss, wo er steht. */
/* ⚠ Kein Rahmen, keine Flaeche, kein Wort — nur das Zeichen. Das
     Tippziel bleibt trotzdem 40×40: Ein rahmenloser Knopf sieht kleiner
     aus, darf aber nicht kleiner SEIN (44px auf dem Handy, siehe unten).
     Die Beschriftung steht im `aria-label` und im unsichtbaren `.wort`. */
/* ⚠ Das Theme-Zeichen steht seit dem 02.11.2026 in `css/pn-ui.css`.
   Grund: Der HUB laedt `oe-marke.css` nicht. Hier war `.scheibe`
   gestaltet, dort nicht — der Hub zeigte deshalb einen leeren Kasten mit
   dem Wort „Dunkel" (das `.sr` fehlte dort ebenfalls), die oeffentliche
   Seite das Kontrastzeichen. Derselbe Button, zwei Erscheinungen.
   `pn-ui.css` ist die einzige Stildatei, die beide Shells laden. */

/* ── Der Zugang als Symbol ───────────────────────────────────────────
   ⚠ Rund und rahmenlos wie das Theme-Zeichen, damit die beiden rechts
     eine Gruppe bilden statt zwei verschiedener Dinge. Angemeldet wird
     er rot gefuellt — das ist der einzige Zustand, der sich unterscheiden
     MUSS, weil das Ziel ein anderes ist (Hub statt Login).
   ⚠ `aria-label`, `title` und ein unsichtbares Wort nennen das Ziel. Ein
     Symbol ohne Beschriftung zwingt zum Raten. */
.oe-zugang.nur-symbol {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-full);
  color: var(--text-2); background: transparent;
}
.oe-zugang.nur-symbol .pn-ic { width: 19px; height: 19px; }
.oe-zugang.nur-symbol:hover { color: var(--text); border-color: var(--text-4); background: var(--surface-2); }
.oe-zugang.nur-symbol:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.oe-zugang.nur-symbol.angemeldet {
  background: var(--red); border-color: var(--red); color: #fff;
}
.oe-zugang.nur-symbol.angemeldet:hover { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }

/* ═══════════════ MATCH-WIDGET ═══════════════════════════════════════ */
.oe-match {
  display: flex; align-items: stretch; gap: 0; flex: none;
  border-radius: var(--r-s); overflow: hidden; text-decoration: none;
  border: 1px solid var(--line); background: var(--surface);
  max-width: 100%;
}
.oe-match .wann {
  background: var(--red); color: #fff; flex: none;
  padding: 5px var(--s-2); display: grid; align-content: center;
  font: 600 var(--t-winzig)/1.25 var(--font-body);
  letter-spacing: .04em; text-transform: uppercase; text-align: center;
}
.oe-match .wer {
  padding: 5px var(--s-3); display: grid; align-content: center; min-width: 0;
  font: 600 var(--t-winzig)/1.3 var(--font-body);
  letter-spacing: .04em; text-transform: uppercase; color: var(--text);
}
.oe-match .wer small { font-weight: 400; letter-spacing: .02em;
                       text-transform: none; color: var(--text-3); }
.oe-match .wer, .oe-match .wer small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════
   DIE NAVIGATION
   Das Logo steht in der MITTE, die Menuepunkte links und rechts davon,
   ganz aussen Match-Widget, Theme-Zeichen und Zugang.

   ⚠ Die Mitte macht das Raster in `oe-geruest.css` (`1fr auto 1fr`) — hier
     steht nur, was davon abweicht. Ein zwischenzeitlicher Versuch hatte
     die Leiste auf Flex mit `order` umgestellt, um das Logo nach links zu
     holen; das ist wieder raus, samt dem roten Quadrat davor. Die
     Wortmarke traegt das Zeichen bereits in sich — ein zweites daneben war
     eine Dopplung.

   ⚠ Das Markup bleibt unangetastet (Menue, Logo, flache Punkte,
     Endgruppe). Es ist die Tastaturreihenfolge, und die Schublade auf dem
     Handy haengt daran.
   ═════════════════════════════════════════════════════════════════════ */
.oe-kopfzeile .oe-nav { gap: var(--s-4); }
.oe-logo img { height: 26px; width: auto; flex: none; display: block; }

/* ═══════════════ DIE RECHTE GRUPPE DER NAVIGATION ═══════════════════
   Match-Widget, Theme-Umschalter und Zugang stehen zusammen am Rand. Die
   Gruppe ist absolut gesetzt — als Rasterkind haette sie das Logo aus der
   Mitte geschoben. */
/* ⚠ Absolut am rechten Rand, nicht als Rasterkind: Als dritte Spalte
     haette die Gruppe das Logo aus der Mitte geschoben — genau das, was
     die mittige Leiste nicht will. */
.oe-ende {
  position: absolute; right: var(--s-5); top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: var(--s-2);
  max-width: min(52vw, 620px);
}
/* ⚠ `.oe-zugang` war selbst absolut gesetzt. In der Gruppe muss das weg,
   sonst liegt er auf dem Theme-Knopf. */
.oe-ende .oe-zugang { position: static; transform: none; right: auto; top: auto; flex: none; }


/* ── Das Logo wechselt mit dem Theme ─────────────────────────────── */
.oe-logo { display: inline-flex; align-items: center; }
.oe-logo img.dunkel { display: none; }
.th-light .oe-logo img.hell   { display: none; }
.th-light .oe-logo img.dunkel { display: block; }

/* ═══════════════ CLAIM-LAUFBAND ═════════════════════════════════════ */
.oe-claimband {
  background: var(--fest-dunkel); border-block: 1px solid var(--fest-dunkel-3);
  padding-block: var(--s-4);
}
.oe-claimband .stueck {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(28px, 5vw, 56px); line-height: 1; white-space: nowrap;
  color: var(--red);
}
/* Jedes zweite Stück zurückgenommen — sonst ist das Band eine rote Wand. */
.oe-claimband .stueck.leer { color: var(--fest-gedaempft); }

/* ═══════════════ CHIPS, BADGES, SEGMENTED CONTROL ═══════════════════
   Radien laut Guide: 3px Chip, 4px Badge, Pill NUR hier. */
.oe-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px var(--s-2); border-radius: var(--r-chip);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2);
  font: 600 var(--t-winzig)/1 var(--font-body);
  letter-spacing: var(--label-spur); text-transform: uppercase; text-decoration: none;
}
.oe-chip.rot { background: var(--red); border-color: var(--red); color: #fff; }
.oe-chip.still { background: transparent; }
a.oe-chip:hover { border-color: var(--red-line); color: var(--text); }

/* ⚠ Sieg und Niederlage nie über Farbe allein (Guide). Der BUCHSTABE
   trägt die Information, die Farbe verstärkt sie nur — und es ist Rot
   gegen Grau, nie Rot gegen Grün. */
.oe-sn {
  display: inline-grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: var(--r-s);
  font: 700 var(--t-winzig)/1 var(--font-body);
  background: var(--surface-3); color: var(--text-3);
}
.oe-sn.sieg { background: var(--red); color: #fff; }

.oe-segment {
  display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid var(--line); border-radius: var(--r-full); background: var(--surface);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.oe-segment::-webkit-scrollbar { display: none; }
.oe-segment > * {
  padding: 6px var(--s-4); border-radius: var(--r-full); white-space: nowrap;
  font: 600 var(--t-winzig)/1 var(--font-body);
  letter-spacing: var(--label-spur); text-transform: uppercase;
  color: var(--text-3); text-decoration: none; border: 0; background: none; cursor: pointer;
}
.oe-segment > [aria-current="page"], .oe-segment > .aktiv { background: var(--red); color: #fff; }

/* ═══════════════ KENNZAHLEN ═════════════════════════════════════════ */
.oe-kennzahlen { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, 1fr); }
.oe-kennzahlen > div { display: grid; gap: 2px; }
.oe-kennzahlen strong {
  font-family: var(--font-display); font-size: clamp(30px, 7vw, 46px);
  line-height: 1; font-weight: 400; color: var(--text);
}
.oe-kennzahlen span {
  font: 600 var(--t-winzig)/1 var(--font-body);
  letter-spacing: var(--label-spur); text-transform: uppercase; color: var(--text-3);
}

/* ═══════════════ KACHELRASTER ═══════════════════════════════════════
   Mobil eine Spalte (Guide: „Alles einspaltig"), ab 768px zwei, ab 1280px
   vier. Eine 2er-Kachel bleibt auch dort eine 2er. */
.oe-kacheln { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
.oe-kachel {
  min-height: var(--kachel-h); display: flex; flex-direction: column;
  justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--surface); color: inherit; text-decoration: none;
}
/* ⚠ Pro Bildschirmhöhe genau EINE gesättigte Fläche (Guide). Deshalb
   trägt die rote Kachel eine eigene Klasse und nicht ein Zufallsmuster. */
.oe-kachel.rot { background: var(--red); border-color: var(--red); color: #fff; }
/* ⚠ `--red-tint` ist laut Guide „die einzige Ton-in-Ton-Auszeichnung auf
   roter Fläche (3,3:1, NUR Display-Größen)". Kleine Beschriftungen fallen
   damit unter die Grenze — sie laufen über Weiss (4,56:1). */
.oe-kachel.rot .oe-label, .oe-kachel.rot small { color: #fff; opacity: .9; }
.oe-kachel.dunkel { background: var(--fest-dunkel); border-color: var(--fest-dunkel-3); color: var(--auf-dunkel); }
.oe-kachel.dunkel .oe-label { color: var(--auf-dunkel-leise); }
.oe-kachel .titel {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: var(--t-h3); line-height: var(--zeile-eng);
}

/* ═══════════════ TABELLEN ═══════════════════════════════════════════
   ⚠ Auf dem Handy wird quer gescrollt, NICHT umgebrochen und NICHT
     gekürzt (Guide, ausdrücklich). Eine Tabelle, die Spalten versteckt,
     verschweigt genau die Zahl, derentwegen jemand hergekommen ist. */
.oe-tabellenrahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.oe-tabelle { width: 100%; border-collapse: collapse; min-width: 520px; }
.oe-tabelle th {
  text-align: left; padding: var(--s-2) var(--s-3); white-space: nowrap;
  font: 600 var(--t-winzig)/1 var(--font-body);
  letter-spacing: var(--label-spur); text-transform: uppercase; color: var(--red);
  border-bottom: 1px solid var(--line);
}
.oe-tabelle td { padding: 0 var(--s-3); height: 44px; border-bottom: 1px solid var(--line-2);
                 font-size: var(--t-klein); }
/* Die eigene Zeile rot hinterlegt — damit man sie beim Scrollen findet. */
.oe-tabelle tr.wir td { background: var(--red-soft); }
.oe-tabelle tr.wir td:first-child { box-shadow: inset 3px 0 0 var(--red); }

/* ═══════════════ LEERZUSTÄNDE ═══════════════════════════════════════
   ⚠ Ein Satz, nie eine leere Fläche (Guide, an fünf Stellen wiederholt). */
.oe-nichts { padding: var(--s-6) 0; color: var(--text-3); font-size: var(--t-klein); }

/* ═══════════════════════════════════════════════════════════════════════
   SCHRITT 2 — DIE STARTSEITE
   Der Guide: „Startseite, weil sie fast jede Komponente und jede Bewegung
   enthält." Alles hier arbeitet auf dem Markup, das die Abschnitte aus dem
   CRM schon erzeugen — kein Baustein wird durch einen neuen ersetzt, sie
   bekommen die Gestalt des Rebrandings.
   ═════════════════════════════════════════════════════════════════════ */

/* ── HERO ────────────────────────────────────────────────────────────
   „Vollbild-Medium zwischen zwei roten Randsäulen (je 6% Breite), Verlauf
   nach unten, Headline und zwei Buttons links, Produkt-Teaser rechts."

   ⚠ Die Randsäulen sind `::before`/`::after` am Abschnitt, kein Markup.
     Sie tragen keine Information — ein `<span>` dafür stünde im Vorlesegerät
     und im Quelltext, ohne je etwas zu sagen. */
.start-kopf { position: relative; isolation: isolate; }
.start-kopf::before, .start-kopf::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 6%;
  background: var(--red); z-index: 1; pointer-events: none;
}
.start-kopf::before { left: 0; }
.start-kopf::after  { right: 0; }
/* ⚠ Der Inhalt muss AN DEN SÄULEN VORBEI. Ohne diesen Innenabstand
   beginnt die Headline auf der roten Fläche — im Entwurf steht sie
   daneben, und genau das ist der Effekt: zwei Kanten, die den Hero
   einfassen, statt eines Balkens, der im Text liegt. */
.start-kopf > .innen {
  position: relative; z-index: 2;
  padding-inline: calc(6% + clamp(16px, 3vw, var(--rand)));
}
/* Der Verlauf nach unten — der Hero endet nicht mit einer Kante, er geht
   in die Seite über. */
.start-kopf .verlauf {
  background: linear-gradient(180deg, rgba(17,15,23,.30) 0%, rgba(17,15,23,.62) 46%, var(--bg) 100%);
}
/* Die Headline im Mass des Guides: clamp(54px, 9.5vw, 136px), Zeile .94. */
.start-kopf h1 { font-size: var(--t-riesig); line-height: var(--zeile-knapp); }
.start-kopf .oe-kicker {
  font-family: var(--font-body); font-weight: 600; font-size: var(--t-winzig);
  letter-spacing: var(--label-spur); text-transform: uppercase;
}

/* ── SPONSORENBAND ───────────────────────────────────────────────────
   „Direkt unter dem Hero, laufend, Name plus Kategorie." */
.oe-sponsorenband {
  background: var(--bg-2); border-block: 1px solid var(--line-2);
  padding-block: var(--s-4);
}
.oe-sponsorenband .sponsor {
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  text-decoration: none; white-space: nowrap; color: inherit;
}
.oe-sponsorenband .name {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(17px, 2.4vw, 26px); line-height: 1; color: var(--text-2);
}
.oe-sponsorenband .was {
  font: 600 var(--t-winzig)/1 var(--font-body);
  letter-spacing: var(--label-spur); text-transform: uppercase; color: var(--text-4);
}
.oe-sponsorenband .sponsor:hover .name { color: var(--text); }

/* ── DIE ROTE BÜHNE ──────────────────────────────────────────────────
   „Pro Bildschirmhöhe genau eine gesättigte Fläche." Welcher Abschnitt
   sie bekommt, entscheidet das CRM (Farbstimmung „marke") — nicht diese
   Datei. Im Entwurf ist es „Unsere Squads". */
.oe-band.marke {
  background: var(--red);
  --text:   #fff;
  --text-2: var(--red-tint);
  --text-3: var(--red-tint);
  --text-leise: var(--red-tint);
  --text-still: var(--red-tint);
  --text-muted: var(--red-tint);
  --line:   rgba(255, 255, 255, .28);
  --line-2: rgba(255, 255, 255, .18);
  --linie:  rgba(255, 255, 255, .18);
  --linie-stark: rgba(255, 255, 255, .28);
  --surface:   var(--red-deep);
  --surface-2: var(--red-deep);
  --flaeche:   var(--red-deep);
  --flaeche-2: var(--red-deep);
  --marke-text: #fff;
  --n-00: #fff;
  --n-30: var(--red-tint);
  --n-40: var(--red-tint);
}
.oe-band.marke h1, .oe-band.marke h2, .oe-band.marke h3 { color: #fff; }

/* ── SQUAD-KACHELN ───────────────────────────────────────────────────
   „Farbfläche mit Kürzel, darunter Name und laufende Competitions —
   keine Spielernamen." */
.squad-card { position: relative; display: grid; gap: var(--s-3);
              text-decoration: none; color: inherit; }
.squad-card .flaeche {
  display: grid; place-items: center; aspect-ratio: 1 / 1;
  background: var(--fest-dunkel-2); border: 1px solid var(--line);
  border-radius: var(--r-m); overflow: hidden;
}
.oe-band.marke .squad-card .flaeche { background: var(--red-deep); border-color: rgba(255,255,255,.22); }
.squad-card .kuerzel {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(38px, 9vw, 72px); line-height: 1; color: #fff;
}
.squad-card .flaeche img { width: 100%; height: 100%; object-fit: cover; }
.squad-label { font-family: var(--font-display); text-transform: uppercase;
               font-size: var(--t-gross); line-height: 1; }
/* `.squad-zahlen` gibt es im Markup nicht mehr — die Regel bleibt nur fuer
   andere Seiten stehen, die den Baustein noch benutzen. */
.squad-zahlen { font: 600 var(--t-winzig)/1.4 var(--font-body);
                letter-spacing: var(--label-spur); text-transform: uppercase;
                color: var(--text-3); display: flex; gap: var(--s-3); flex-wrap: wrap; }
/* ⚠ Das Kuerzel steht IMMER — es ist der Kern der Kachel im Guide
   („Farbfläche mit Kürzel"). Das gepflegte Bild verschwindet deshalb nicht,
   es geht dahinter: abgedunkelt und entsaettigt, als Textur statt als
   Motiv. Beim ersten Versuch versteckte das Bild das Kuerzel — dann war es
   wieder die alte Kachel mit neuem Namen. */
.squad-card .flaeche { position: relative; }
.squad-card .flaeche img {
  position: absolute; inset: 0; z-index: 0;
  filter: grayscale(1) brightness(.55); opacity: .5;
  transition: opacity var(--dauer-hover) var(--kurve-hover),
              filter var(--dauer-hover) var(--kurve-hover);
}
.squad-card:hover .flaeche img { opacity: .72; filter: grayscale(.2) brightness(.7); }
.squad-card .kuerzel { position: relative; z-index: 1; }
/* Das Wettbewerbs-Laufband unter dem Namen. */
.squad-card .wettbewerbe { display: block; }
.squad-card .wettbewerbe .w {
  font: 600 var(--t-winzig)/1 var(--font-body);
  letter-spacing: var(--label-spur); text-transform: uppercase;
  color: var(--text-3); white-space: nowrap;
}
/* Mobil eine Spalte, ab 640px zwei, ab 1024px vier — wie das Kachelraster. */
.squad-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 640px)  { .squad-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .squad-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── LATEST & NEXT ───────────────────────────────────────────────────
   „Zwei Spalten Next up (1.25fr) und Latest results (1fr)." Mobil
   untereinander, Datum und Zeit oben, Begegnung darunter. */
.termine-zwei { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) {
  .termine-zwei { grid-template-columns: 1.25fr 1fr; gap: var(--s-7); }
}

/* ── DISCORD-LEISTE ──────────────────────────────────────────────────
   „Kompakt, maximal ein Drittel Sektionshöhe: links Pitch, Zahlen und
   Button, rechts Chat-Ausschnitt."

   ⚠ Die Karte ist kompakt und waagerecht — nicht mehr eine Kachel unter
     drei gleichen. Der Chat-Ausschnitt FEHLT absichtlich: Es gibt keine
     Chatdaten, und der Guide sagt selbst „Bewegung ohne Inhalt: ein
     Laufband ohne echte Daten ist Flimmern". Erfundene Nachrichten unter
     dem Namen echter Mitglieder waeren schlimmer als eine leere Flaeche.
     Das Markup dafuer steht bereit (`.oe-chat` unten, Animation in
     `oe-bewegung.css`) — es braucht nur eine Quelle. */
/* ⚠ Vorher lagen Ueberschrift, Text und Knopf als drei Rasterkinder in
     zwei Spalten — sobald der Chat-Ausschnitt dazukam, verteilten sie sich
     auf beide Spalten und die Karte war zerschossen. Jetzt stehen sie in
     EINEM Kasten (`.gem-text`), und die Karte hat genau zwei Kinder:
     Text links, Chat rechts. */
.gemeinschaft .gem-karte.dunkel {
  display: grid; gap: var(--s-5); align-content: center;
  grid-template-columns: 1fr; padding: var(--s-5);
}
.gemeinschaft .gem-karte.dunkel .gem-text {
  display: grid; gap: var(--s-3); align-content: center; justify-items: start;
}
.gemeinschaft .gem-karte.dunkel h3 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: var(--t-h3); line-height: 1; margin: 0;
}
.gemeinschaft .gem-karte.dunkel p { margin: 0; max-width: 42ch; }
@media (min-width: 768px) {
  .gemeinschaft .gem-karte.dunkel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch;
    grid-column: span 2;
  }
  /* Ohne Chat bleibt die Karte einspaltig — sonst klafft rechts ein Loch. */
  .gemeinschaft .gem-karte.dunkel:not(:has(.oe-chat)) {
    grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  }
  .gemeinschaft .gem-karte.dunkel:not(:has(.oe-chat)) .gem-text { justify-items: start; }
}

.oe-chat {
  display: grid; gap: var(--s-2); padding: var(--s-4);
  background: var(--fest-dunkel); border: 1px solid var(--fest-dunkel-3);
  border-radius: var(--r-m); min-height: 7.5rem; align-content: start;
}
.oe-chat > .zeile {
  display: flex; gap: var(--s-2); align-items: flex-start;
  font-size: var(--t-klein); color: var(--auf-dunkel);
}
.oe-chat .kanal {
  font: 600 var(--t-winzig)/1 var(--font-body);
  letter-spacing: var(--label-spur); text-transform: uppercase;
  color: var(--fest-gedaempft); margin-bottom: var(--s-1);
}
.oe-chat .wer { font-weight: 600; color: var(--red-2); white-space: nowrap; }
.oe-chat .was { color: var(--auf-dunkel-leise); }
/* ⚠ Die beiden Zeilen liegen UEBEREINANDER, nicht untereinander: Sie
     blenden abwechselnd ein, und als Fluss haette die Karte bei jedem
     Wechsel ihre Hoehe geaendert und den Rest der Seite mitgeschoben.
   ⚠ Sie teilen sich dafuer eine GITTERZELLE, statt absolut zu liegen. Beim
     ersten Versuch standen sie absolut — dann zaehlten sie nicht mehr zur
     Hoehe, der Kasten fiel in sich zusammen und Zeilen, Kanalname und
     Eingabezeile lagen uebereinander. In derselben Zelle halten sie die
     Hoehe der laengsten Zeile frei. */
.oe-chat { grid-template-rows: auto 1fr auto; min-height: 9.5rem; align-content: stretch; }
.oe-chat > .kanal  { grid-row: 1; }
.oe-chat > .zeile  { grid-row: 2; grid-column: 1; align-self: start; }
.oe-chat > .eingabe { grid-row: 3; }
.oe-chat .eingabe {
  display: flex; align-items: center; gap: var(--s-2); margin-top: auto;
  padding-top: var(--s-3); border-top: 1px solid var(--fest-dunkel-3);
  font-size: var(--t-klein); color: rgba(230,230,230,.62);
}

/* ═══════════════════════════════════════════════════════════════════════
   SCHRITT 3 — DIE DETAILVORLAGE
   240 der 288 Seiten laufen darauf: 185 Spielerseiten der Liga, 40
   Teamseiten, 15 Vereinsspieler. Deshalb steht sie einmal.
   ═════════════════════════════════════════════════════════════════════ */

/* ── DER KOPF ────────────────────────────────────────────────────────
   „Farbfläche über volle Breite in der Teamfarbe, darauf das Kürzel in
   Anton. Foto ersetzt die Fläche, wenn vorhanden; es ist nie Pflicht."

   ⚠ Mobil steht die Fläche ÜBER dem Namen, ab 640px daneben. Eine
     quadratische Fläche neben einem Namen ist auf 360px zwei Drittel der
     Zeile — dann bleibt für den Namen nichts. */
.pn-detailkopf {
  display: grid; gap: var(--s-4); align-items: center;
  padding-bottom: var(--s-6); margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) {
  .pn-detailkopf { grid-template-columns: 128px minmax(0, 1fr); gap: var(--s-5); }
}
.pn-detailkopf .flaeche {
  position: relative; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 1 / 1; max-width: 128px;
  background: var(--fest-dunkel-2); border: 1px solid var(--line);
  border-radius: var(--r-m);
}
/* Rot ist dem eigenen Verein vorbehalten — eine gesättigte Fläche je
   Bildschirmhöhe (Guide). */
.pn-detailkopf.rot .flaeche { background: var(--red); border-color: var(--red); }
.pn-detailkopf .kuerzel {
  position: relative; z-index: 1;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 58px; line-height: 1; color: #fff;
}
/* ⚠ Das Foto ERSETZT die Fläche, es legt sich nicht darüber: Auf der
   Spielerseite ist es ein Porträt und soll erkennbar sein — anders als die
   Squad-Kachel, wo das Kürzel der Inhalt ist. */
.pn-detailkopf .flaeche img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.pn-detailkopf .wer { display: grid; gap: var(--s-2); min-width: 0; }
.pn-detailkopf h1 { font-size: var(--t-h1); }
.pn-detailkopf .unter { color: var(--text-2); font-size: var(--t-klein); }
.pn-detailkopf .chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ── MATCHLISTE ──────────────────────────────────────────────────────
   „Zeilen wie Latest results, S/N-Chip plus Rot gegen Grau, Score rechts."
   ⚠ Der Buchstabe traegt die Information, die Farbe verstaerkt sie. */
.sp-matchliste .ergebnis { display: inline-flex; align-items: center; gap: var(--s-2); }

/* ── SOCIAL ALS LABEL-CHIPS ──────────────────────────────────────────
   „kein Icon-Teppich" (Guide). Ein Name sagt, wohin es geht; ein Icon
   lässt raten, und auf dem Handy trifft man es schlechter. */
.pn-sozial { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }

/* ── SPIELERRASTER (Teamseite) ───────────────────────────────────────
   „Roster als Raster aus Spielerkacheln, jede verlinkt auf ihre
   Spielerseite." */
.pn-spielerraster { display: grid; gap: var(--s-3);
                    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.pn-spielerraster a {
  display: grid; gap: var(--s-2); justify-items: center; text-align: center;
  padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--surface); color: inherit; text-decoration: none;
}
.pn-spielerraster .flaeche {
  display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden;
  border-radius: var(--r-m); background: var(--fest-dunkel-2); position: relative;
}
.pn-spielerraster .kuerzel { font-family: var(--font-display); font-size: 20px; color: #fff; }
.pn-spielerraster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pn-spielerraster .name { font-weight: 600; font-size: var(--t-klein); overflow-wrap: anywhere; }
.pn-spielerraster .rolle { font: 600 var(--t-winzig)/1 var(--font-body);
                           letter-spacing: var(--label-spur); text-transform: uppercase;
                           color: var(--text-3); }

/* ── DIE ROTE LIGA-KACHEL (Teamseite) ────────────────────────────────
   „Rote Kachel mit Punktestand, Platzierung und wachsendem
   Fortschrittsbalken — identisch zur Liga-Kachel der Startseite." */
.pn-ligakachel {
  display: grid; gap: var(--s-4); padding: var(--s-5);
  background: var(--red); border-radius: var(--r-m); color: #fff;
  /* ⚠ Nicht `--red-tint` für die Textstufen: Das sind 3,24:1, und hier
     steht 11px-Schrift. Der Ton bleibt der Display-Größe vorbehalten. */
  --text: #fff; --text-2: rgba(255,255,255,.9); --text-3: rgba(255,255,255,.9);
}
.pn-ligakachel .zahl { font-family: var(--font-display); font-size: clamp(40px, 9vw, 64px); line-height: 1; }
.pn-ligakachel .was { font: 600 var(--t-winzig)/1 var(--font-body);
                      letter-spacing: var(--label-spur); text-transform: uppercase;
                      color: #fff; opacity: .9; }
/* Der Balken waechst beim Scrollen — dieselbe `.rule`-Mechanik wie die
   Trennlinien und der Fortschritt im Formular. */
.pn-ligakachel .balken { height: 4px; background: rgba(255, 255, 255, .28); border-radius: 2px; overflow: hidden; }
.pn-ligakachel .balken > span { display: block; height: 100%; background: #fff; }

/* ═══════════════════════════════════════════════════════════════════════
   DIE STARTSEITE NACH DEM ENTWURF
   Jede Regel hier hat ihr Vorbild im Artboard „10 · Startseite". Die
   Bausteine bleiben, die der CRM-Abschnitt erzeugt — hier aendert sich nur,
   wie sie aussehen.
   ═════════════════════════════════════════════════════════════════════ */

/* ── HERO: Produkt-Teaser unten rechts ───────────────────────────────── */
/* ⚠ `margin-block: … var(--s-6)`: `.innen` fuellt den Hero bis zur Unter-
     kante, und `align-self: end` setzt den Teaser damit buendig auf die
     Kante — der Knopf klebte am Rand. Der Abstand gehoert an den Teaser,
     nicht an `.innen`: Dort wuerde er die mittig gesetzte linke Spalte
     mit verschieben. */
.start-kopf .teaser {
  grid-column: 2; align-self: end; justify-self: end; text-align: right;
  display: grid; gap: var(--s-2); justify-items: end;
  margin-block: var(--s-5) var(--s-6);
}
/* Auf schmalen Geraeten faellt der Hero auf eine Spalte zurueck — dann
   steht der Teaser unter der Tafel und linksbuendig wie alles andere. */
@media (max-width: 860px) {
  .start-kopf .teaser { grid-column: 1; justify-self: start; justify-items: start;
                        text-align: left; margin-block: var(--s-4) 0; }
}
.start-kopf .teaser .titel {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: var(--t-h3); line-height: 1; color: #fff;
}
.oe-knopf.hell { background: #fff; border-color: #fff; color: var(--fest-dunkel); }
.oe-knopf.hell:hover { background: var(--fest-hell); border-color: var(--fest-hell); }

/* ── FEATURED NEWS ───────────────────────────────────────────────────
   „Rot-nach-Dunkel-Verlauf, Kategorie-Badge, Datum, schwebende
   Mittel-Headline." Links der Aufmacher, rechts vier Karten im Viereck. */
.news-raster { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .news-raster { grid-template-columns: 1.6fr 1fr 1fr; grid-auto-rows: 1fr; }
  .news-raster > .beitrag.gross { grid-row: span 2; }
}
.news-raster .beitrag { border-radius: var(--r-m); overflow: hidden; }
.news-raster .beitrag > a { display: grid; height: 100%; color: inherit; text-decoration: none; }

/* ⚠ Der Verlauf gehoert an den INNEREN `<a>`, nicht an den `<article>`.
     Der Altbestand gibt dem Link eine eigene Flaeche (`--flaeche`) und
     einen Rahmen; beides liegt ueber allem, was der Artikel darunter
     malt — der Verlauf war gesetzt und trotzdem unsichtbar. */
.news-raster .beitrag.gross > a {
  background: linear-gradient(150deg, var(--red) 0%, #9e0b32 52%, var(--fest-dunkel) 100%);
  border-color: transparent;
  /* ⚠ 200px, nicht 320: Mit nur einem Beitrag zieht sich der Aufmacher
       ueber die ganze Breite, und bei 320px Hoehe war er eine Plakatwand
       mit vier Zeilen Text darin. */
  grid-template-rows: 1fr; min-height: 200px; padding: 0; gap: 0;
  --text: #fff; --text-2: rgba(255,255,255,.86); --text-3: rgba(255,255,255,.78);
}
.news-raster .beitrag.gross > a:hover { border-color: rgba(255,255,255,.4); }
.news-raster .beitrag.gross img { grid-area: 1 / 1 / -1 / -1; width: 100%; height: 100%;
                                  object-fit: cover; aspect-ratio: auto; opacity: .34; }
/* Chip oben, Titel unten, Datum oben rechts — wie im Entwurf. */
.news-raster .beitrag.gross .text { grid-area: 1 / 1 / -1 / -1; display: grid;
                                    grid-template-rows: auto 1fr auto; gap: var(--s-2);
                                    align-content: stretch; position: relative;
                                    padding: var(--s-5); }
/* ⚠ Der Entwurf zeigt hier einen WEISSEN Chip mit roter Schrift. Die Farbe
     bleibt trotzdem die aus dem CRM (`--chip` je Kategorie) — im Entwurf
     ist einfach die Kategorie „Crossfire" abgebildet. Eine fest weisse
     Kachel haette die Kategoriefarben abgeschafft, die der Verein pflegt.
     Angepasst wird nur die Form: eckiger Chip statt Pille, Label-Schrift. */
.news-raster .beitrag.gross .kat {
  justify-self: start; align-self: start; border-radius: var(--r-chip);
  padding: 4px var(--s-2);
  font: 600 var(--t-winzig)/1 var(--font-body);
  letter-spacing: var(--label-spur); text-transform: uppercase;
}
.news-raster .beitrag.gross .titel {
  align-self: end; font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(22px, 2.6vw, 34px); line-height: 1.04; color: #fff;
}
.news-raster .beitrag.gross .anriss { color: rgba(255,255,255,.86); font-size: var(--t-klein); }
.news-raster .beitrag.gross time {
  position: absolute; top: 0; right: 0;
  font: 600 var(--t-winzig)/1 var(--font-body);
  letter-spacing: var(--label-spur); color: rgba(255,255,255,.8);
}

/* Die vier kleinen Karten: Bildfeld oben, darunter Kategorie, Titel, Datum. */
.news-raster .beitrag:not(.gross) > a { grid-template-rows: 96px auto; gap: 0; padding: 0; }
.news-raster .beitrag:not(.gross) img { width: 100%; height: 96px; object-fit: cover; }
.news-raster .beitrag:not(.gross) .text { display: grid; gap: 4px; padding: var(--s-3); align-content: start; }
.news-raster .beitrag:not(.gross) .kat {
  font: 600 var(--t-winzig)/1 var(--font-body);
  letter-spacing: var(--label-spur); text-transform: uppercase; color: var(--red-2);
}
.news-raster .beitrag:not(.gross) .titel {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: var(--t-klein); line-height: 1.15;
}
.news-raster .beitrag:not(.gross) time { font: 600 var(--t-winzig)/1 var(--font-body);
                                         letter-spacing: var(--label-spur); color: var(--text-3); }

/* Ist er der einzige Beitrag, bleibt er quer ueber die volle Breite — aber
   als derselbe Aufmacher, nicht als andere Karte. */
.news-raster .beitrag.gross:only-child > a { grid-template-columns: 1fr; align-items: stretch; }
.news-raster .beitrag.gross:only-child .text { grid-area: 1 / 1 / -1 / -1; padding: var(--s-5); }
.news-raster .beitrag.gross:only-child .titel { font-size: clamp(20px, 2.2vw, 28px); }
.news-raster .beitrag.gross:only-child img { grid-area: 1 / 1 / -1 / -1; }

/* ── SQUAD-KACHEL ────────────────────────────────────────────────────
   Flaeche mit Kuerzel, darunter der Name, ganz unten das Laufband der
   Wettbewerbe. Mehr nicht.

   ⚠ Die Zahlen-Stempel („1 Squad · 4 Spieler") sind raus. Sie standen auf
     der Flaeche und waren das Erste, was man las — dabei sagt die Zahl
     nichts ueber die Disziplin. Unten laeuft stattdessen durch, wo wir
     antreten. */
/* ⚠ Drei Dinge aus `style.css` muessen ausdruecklich zurueckgenommen
     werden, sonst sieht man das Ergebnis des alten Entwurfs:
       `aspect-ratio: 3/4`  presste Flaeche, Name und Laufband in eine
                            Hochkant-Kachel — der Inhalt lief heraus;
       `.squad-label` absolut am Boden mit Verlauf legte den Namen UEBER
                            das Laufband statt darueber;
       `display: block`     machte das Raster wirkungslos.
     Eine Regel, die nur Abstaende setzt, reicht dafuer nicht — der
     Altbestand muss Eigenschaft fuer Eigenschaft gelöst werden. */
/* ⚠ `1fr` fuer den Namen: Nur die COD-Kachel hat ein Laufband, und eine
     Kachel mit zweizeiligem Namen ist hoeher als eine mit einzeiligem.
     Ohne die dehnbare Zeile standen vier verschieden hohe Kacheln
     nebeneinander. So richtet sich der Fuss aller vier aus. */
.squad-card {
  display: grid; grid-template-rows: auto 1fr auto;
  aspect-ratio: auto; height: 100%;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-m); overflow: hidden; gap: 0;
  text-decoration: none; color: inherit;
}
.squad-card .squad-label {
  position: static; background: none; color: inherit;
  display: block; letter-spacing: 0;
}
.oe-band.marke .squad-card { background: var(--fest-dunkel-2); border-color: rgba(255,255,255,.14); }
.squad-card .flaeche { border: 0; border-radius: 0; aspect-ratio: 16 / 10; }
.squad-card .squad-label {
  padding: var(--s-4) var(--s-4) var(--s-3);
  font-size: var(--t-h3);
}
/* Das Laufband sitzt am Fuss, abgesetzt durch eine feine Linie — es ist
   eine Fusszeile der Kachel, kein weiterer Inhalt. */
.squad-card .wettbewerbe {
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line-2);
  --tempo: var(--band-competitions);
}
.squad-card .wettbewerbe > .spur { gap: var(--s-4); }
.squad-card .wettbewerbe .w {
  display: inline-block; white-space: nowrap;
  font: 600 var(--t-winzig)/1 var(--font-body);
  letter-spacing: var(--label-spur); text-transform: uppercase;
  color: var(--text-3);
}
/* Ohne Wettbewerbe bleibt die Kachel ruhig — kein leerer Streifen. */
.squad-card:not(:has(.wettbewerbe)) .squad-label { padding-bottom: var(--s-4); }

/* ── GERADE WICHTIG · Kachelwand ─────────────────────────────────────
   Die Kachelwand bleibt, wie das CRM sie legt — nur die Schriftgroesse
   richtet sich jetzt nach der Flaeche. Vorher trug jede Kachel denselben
   grossen Titel; in einer einfachen (150 px hohen) Kachel lief er mitsamt
   Unterzeile und Knopf aus der Kachel heraus und wurde oben abgeschnitten.

   ⚠ `grid-auto-rows` ist deshalb eine MINDEST-Hoehe, keine feste: Wer im
     CRM einen langen Titel eintraegt, bekommt eine hoehere Kachel statt
     eines abgeschnittenen Titels. */
.bento-raster { grid-auto-rows: minmax(150px, auto); }
/* ⚠ Der Schleier ist absolut gesetzt und liegt damit ueber allem, was
     danach kommt und NICHT positioniert ist. Die Sonderinhalte (Tabelle,
     Equalizer, Laufband, Roller) waren genau das — das Twitch-Zeichen lag
     unter dem Schleier und war praktisch unsichtbar. `.text` hatte diesen
     Schutz schon (`position: relative`), die anderen nicht. */
.k-tabelle, .k-live, .k-erfolge, .k-lan { position: relative; z-index: 1; }
.bento-raster .kachel .titel { font-size: var(--t-gross); line-height: 1.04; }
.bento-raster .flaeche-2-1 .titel { font-size: var(--t-h3); }
.bento-raster .flaeche-1-2 .titel,
.bento-raster .flaeche-2-2 .titel { font-size: clamp(26px, 3vw, 42px); }
.bento-raster .kachel .text { gap: var(--s-2); max-width: 36ch; }
.bento-raster .kachel .sub {
  font: 600 var(--t-winzig)/1.45 var(--font-body);
  letter-spacing: var(--label-spur); text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.bento-raster .kachel { box-shadow: none; }

/* ── DIE VIER AUTOMATISCHEN KACHELN ──────────────────────────────────
   Entwurf, Abschnitt „Gerade wichtig". Jede hat ihren eigenen Aufbau:
   Bei ihnen gehoert die Flaeche dem Inhalt, und die Ueberschrift sitzt
   oben als Leiste — nicht unten als Bildunterschrift. */
.kachel.art-auto-tabelle,
.kachel.art-auto-live,
.kachel.art-auto-erfolge,
.kachel.art-auto-lan {
  display: grid; grid-template-rows: auto 1fr; align-items: stretch;
  padding: 0; gap: 0;
}
/* ⚠ Nur drei der vier haben die Beschriftung OBEN. Bei der Live-Kachel
     steht sie unten (Kanal und Zuschauerzahl unter dem Equalizer) — genau
     so zeigt es der Entwurf. Ein gemeinsames `order: -1` haette sie dort
     nach oben gezogen und den Equalizer ans Ende gestellt. */
.kachel.art-auto-tabelle .text,
.kachel.art-auto-erfolge .text,
.kachel.art-auto-lan .text {
  order: -1; align-self: start; max-width: none;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4);
  padding: var(--s-3) var(--s-4);
}
.kachel.art-auto-live { grid-template-rows: 1fr auto; }
.kachel.art-auto-live .text { align-self: end; padding: var(--s-4); max-width: none; }

/* Die Kopfleiste ist eine LEISTE, kein Titelblock: Beschriftung links,
   Weiterweg rechts, beides in Label-Groesse. Der Entwurf gibt der roten
   Liga-Kachel gar keine Ueberschrift — die Zahl ist die Aussage. */
.kachel.art-auto-tabelle .titel,
.kachel.art-auto-erfolge .titel,
.kachel.art-auto-lan .titel {
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--t-winzig); letter-spacing: var(--label-spur);
  text-transform: uppercase; line-height: 1;
}
.kachel.art-auto-erfolge .text,
.kachel.art-auto-lan .text { background: var(--red); }
.kachel.art-auto-lan .text { background: var(--red-deep); }
.kachel.art-auto-tabelle .text { background: transparent; }
.kachel.art-auto-tabelle .sub,
.kachel.art-auto-erfolge .sub, .kachel.art-auto-lan .sub { display: none; }
/* Der Weiterweg als stiller Textlink in der Leiste, nicht als Knopf. */
.kachel.art-auto-tabelle .oe-knopf,
.kachel.art-auto-erfolge .oe-knopf,
.kachel.art-auto-lan .oe-knopf {
  margin: 0 0 0 auto; padding: 0; background: none; border: 0;
  font: 600 var(--t-winzig)/1 var(--font-body);
  letter-spacing: var(--label-spur); text-transform: uppercase;
  color: #fff; text-decoration: underline; text-underline-offset: 3px;
}

/* Liga-Stand: links Punkte und Platz, rechts die Spitze der Tabelle. */
.kachel.art-auto-tabelle { background: var(--red); }
.kachel.art-auto-tabelle .schleier { display: none; }
/* ⚠ `align-self: center`, nicht nur `align-content`: Der Inhalt steht in
     einer Gitterzeile, die so hoch ist wie die Kachel. `align-content`
     ordnet die SPUREN darin — die eine Spur fuellt sie bereits, also
     verschiebt es nichts. Das Element selbst muss sich mittig setzen. */
.k-tabelle {
  display: grid; gap: var(--s-5); align-items: center; align-self: center;
  grid-template-columns: 1fr; padding: var(--s-4);
}
@media (min-width: 720px) { .k-tabelle { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); } }
.k-tabelle .stand { display: grid; gap: 2px; }
.k-tabelle .stand strong {
  font-family: var(--font-display); font-size: clamp(38px, 5vw, 62px);
  line-height: .9; color: #fff;
}
/* ⚠ Auf dem Markenrot (#E0093C) ist selbst reines Weiss nur 4,6:1 — jede
     Deckkraft darunter faellt durch. Die Abstufung macht hier deshalb die
     SCHRIFTSTAERKE, nicht die Transparenz. Gemessen hatte die Kachel sonst
     13 Verstoesse (Label 3,6:1, Platzziffern 2,9:1). */
.k-tabelle .oe-label { color: #fff; }
/* Der Balken waechst beim Scrollen — der Wert selbst steht als Zahl da. */
.k-tabelle .balken { display: block; height: 3px; background: rgba(255,255,255,.38); margin-top: var(--s-2); }
/* ⚠ Keine Breite mehr hier: Die kommt aus `--anteil` ueber `.oe-fuellt`
   (`oe-bewegung.css`), damit der Balken beim eigenen Wert endet und
   nicht bei 100%. */
.k-tabelle .balken > i { display: block; height: 100%; background: #fff; }
.k-tabelle .liste { display: grid; gap: 1px; }
.k-tabelle .zeile {
  display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) 2.2rem;
  gap: var(--s-2); align-items: center;
  padding: 5px 0; border-top: 1px solid rgba(255,255,255,.35);
  font-size: var(--t-klein); color: #fff; font-weight: 400;
}
.k-tabelle .zeile.eigen { font-weight: 700; }
.k-tabelle .pl { color: #fff; font-variant-numeric: tabular-nums; }
.k-tabelle .tm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.k-tabelle .pk { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }

/* Stream: Equalizer. Er RUHT, solange niemand sendet — siehe Kommentar in
   `pn_kachel_sonderinhalt()`. */
.k-live { display: grid; align-content: end; gap: var(--s-3); padding: var(--s-4) var(--s-4) 0; }
.k-live-kopf { display: flex; align-items: center; gap: var(--s-2); }
.k-live-kopf .zeichen { display: inline-flex; color: #9146FF; }
.k-live-kopf .zeichen .pn-ic { width: 20px; height: 20px; }
/* Im hellen Theme steht die Kachel immer noch auf Dunkel — das Twitch-Lila
   bleibt darauf lesbar (4,6:1 auf #15131C). */
.th-light .k-live-kopf .zeichen { color: #A970FF; }
.k-live .oe-label.jetzt { color: var(--red-2); display: flex; align-items: center; gap: var(--s-2); }
.k-live .oe-label.jetzt .oe-puls { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.oe-eq.ruht > i { animation: none; height: 28%; opacity: .55; }

/* Erfolge: ein Laufband von Karten. */
.k-erfolge { display: grid; align-content: center; min-width: 0; }
.k-erfolge .spur { gap: var(--s-3); padding: 0 var(--s-4); }
.k-erfolge .kopie { display: contents; }
.k-erfolge .erfolg {
  display: grid; gap: 3px; align-content: center; min-width: 11rem;
  padding: var(--s-3) var(--s-4); background: var(--fest-dunkel-2);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-s);
}
.k-erfolge .erfolg strong {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: var(--t-gross); line-height: 1; color: var(--red-2);
}
.k-erfolge .oe-label { color: var(--auf-dunkel-leise); white-space: nowrap; }
.k-erfolge .oe-label.leise { color: var(--fest-gedaempft); }

/* LAN-Stationen: ein Roller. Eine Station steht, dann kommt die naechste. */
.kachel.art-auto-lan { background: var(--red-deep); }
.kachel.art-auto-lan .schleier { display: none; }
.k-lan { display: grid; align-content: center; padding: var(--s-4) var(--s-5); }
.k-lan .oe-roller { --roller-h: 5.4rem; }
.k-lan .station { display: grid; gap: 2px; align-content: center; height: 5.4rem; }
.k-lan .station strong {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(20px, 2.4vw, 32px); line-height: 1; color: #fff;
}
.k-lan .oe-label { color: rgba(255,255,255,.72); }
.k-lan .wo { font-size: var(--t-klein); color: rgba(255,255,255,.8); }

/* Shop-Kachel: Titel, Preis und Knopf stehen unten beieinander, und die
   Kachel ist so hoch, dass alle drei hineinpassen. */
.kachel .text:has(.preis) { gap: var(--s-2); }
.kachel:has(.preis) { min-height: 15rem; }
.kachel .preis {
  font-family: var(--font-display); font-style: italic;
  font-size: var(--t-gross); line-height: 1; color: var(--red-2);
}

/* ═══════════════ LATEST & NEXT ══════════════════════════════════════
   „Zwei Spalten: links Next up, rechts Latest results." Der Umschalter
   gilt nur dort, wo beide nicht nebeneinander passen. */
.latest-next { display: grid; gap: var(--s-5); }
.ln-wahl { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ln-segment { justify-self: end; }
.ln-segment > label { cursor: pointer; }
.ln-spalten { display: grid; gap: var(--s-6); }
.ln-sp { min-width: 0; }
.ln-kopf {
  margin: 0 0 var(--s-2); padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
  font: 600 var(--t-winzig)/1 var(--font-body);
  letter-spacing: var(--label-spur); text-transform: uppercase; color: var(--text-3);
}
/* ⚠ Der Umschalter waehlt nur auf schmalen Geraeten aus. Ab 1024px stehen
     beide Spalten nebeneinander — dann waere ein Umschalter sinnlos, und
     er verschwindet. Das `:has()` liest den Zustand des Radios; faellt es
     aus (aeltere Browser), stehen BEIDE Spalten da, nicht keine. */
@media (max-width: 1023px) {
  .latest-next.zwei:has(.ln-wahl.a:checked) .ln-sp.b,
  .latest-next.zwei:has(.ln-wahl.b:checked) .ln-sp.a { display: none; }
  .latest-next.zwei:has(.ln-wahl.a:checked) .ln-segment > label:first-child,
  .latest-next.zwei:has(.ln-wahl.b:checked) .ln-segment > label:last-child {
    background: var(--red); color: #fff;
  }
  .ln-wahl:focus-visible + .ln-wahl + .ln-segment,
  .ln-wahl:focus-visible ~ .ln-segment { outline: 2px solid var(--red); outline-offset: 3px; }
}
/* ⚠ Ab 1024px stehen beide Spalten nebeneinander — dort WEGZUBLENDEN waere
     einfacher gewesen, aber der Entwurf zeigt den Umschalter auch am
     Schreibtisch. Also tut er dort etwas Sichtbares: Er entscheidet,
     welche Spalte die breite ist. Ein Knopf, der nichts bewirkt, ist
     schlimmer als keiner. */
@media (min-width: 1024px) {
  .latest-next.zwei .ln-spalten { grid-template-columns: 1.25fr 1fr; gap: var(--s-7); }
  .latest-next.zwei:has(.ln-wahl.b:checked) .ln-spalten { grid-template-columns: 1fr 1.25fr; }
  .latest-next.zwei:has(.ln-wahl.a:checked) .ln-segment > label:first-child,
  .latest-next.zwei:has(.ln-wahl.b:checked) .ln-segment > label:last-child {
    background: var(--red); color: #fff;
  }
}

/* Die Ergebniszeile: Buchstabe, Begegnung, Ergebnis. */
.start-ergebnisse > a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line-2); text-decoration: none; color: inherit;
}
.start-ergebnisse > a:hover { background: var(--surface-2); }
.start-ergebnisse .sn {
  display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: var(--r-chip); font: 700 11px/1 var(--font-body); color: #fff;
}
.start-ergebnisse .sn.sieg   { background: var(--red); }
.start-ergebnisse .sn.nieder { background: var(--text-4); }
.start-ergebnisse .haupt { font-size: var(--t-klein); line-height: var(--zeile-mit); }
.start-ergebnisse .haupt small {
  display: block; font: 600 var(--t-winzig)/1 var(--font-body);
  letter-spacing: var(--label-spur); text-transform: uppercase;
  color: var(--text-3); margin-top: 3px;
}
/* Das Ergebnis traegt die Aussage mit: rot bei Sieg, still bei
   Niederlage — wie im Entwurf. Allein traegt die Farbe sie nicht, der
   Buchstabe daneben sagt dasselbe. */
.start-ergebnisse .erg {
  font-weight: 700; font-variant-numeric: tabular-nums; color: var(--red-2);
}
.start-ergebnisse > a:has(.sn.nieder) .erg { color: var(--text-3); }
/* Ein Chip mit Stream ist rot, einer ohne bleibt still. */
.start-termine .nach.stream { background: var(--red); color: #fff; }

/* ── LATEST & NEXT · die Zeilen ──────────────────────────────────────
   Linke Spalte „Next up", rechte „Latest results" — beide als Liste mit
   Datumsblock links und Zustand rechts. */
.start-termine > a, .oe-linien.start-termine > a {
  display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto;
  gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line-2); text-decoration: none; color: inherit;
}
.start-termine > a:hover { background: var(--surface-2); }
.start-termine .wann {
  font: 600 var(--t-winzig)/1.3 var(--font-body);
  letter-spacing: var(--label-spur); text-transform: uppercase; color: var(--text);
}
.start-termine .haupt { font-family: var(--font-display); text-transform: uppercase;
                        font-size: var(--t-klein); line-height: 1.1; }
.start-termine .haupt small {
  display: block; font-family: var(--font-body); font-weight: 600;
  font-size: var(--t-winzig); letter-spacing: var(--label-spur);
  text-transform: uppercase; color: var(--text-3); margin-top: 3px;
}
/* Der Zustand rechts als Chip — rot, wenn es einen Stream gibt. */
.start-termine .nach {
  padding: 4px var(--s-2); border-radius: var(--r-chip);
  background: var(--surface-2); color: var(--text-3);
  font: 600 var(--t-winzig)/1 var(--font-body);
  letter-spacing: var(--label-spur); text-transform: uppercase;
}

/* ── STRONGER TOGETHER ───────────────────────────────────────────────
   „Karte mit zwei gegenläufigen Laufbändern der Partnernamen." */
.partner-leiste {
  display: grid; gap: var(--s-3); padding: var(--s-5) 0;
  border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden;
}
.partner-leiste .name {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(20px, 3vw, 34px); line-height: 1; white-space: nowrap;
}
.partner-leiste .oe-laufband > .spur { gap: var(--s-6); }
.partner-leiste .name { text-decoration: none; }
/* ⚠ Die zweite Spur steht leiser, aber nicht unter der Grenze: `--text-4`
     ist die Farbe fuer RAHMEN und Trennlinien, nicht fuer Schrift — im
     hellen Theme kam ein Partnername damit auf 2,73:1, verlangt sind 3:1
     fuer grosse Schrift. `--text-3` ist die leiseste zulaessige Textfarbe. */
.partner-leiste .spur-1 .name { color: var(--text-2); }
.partner-leiste .spur-2 .name { color: var(--text-3); }
.partner-leiste .name:hover { color: var(--red-2); }
.oe-laufband.partner > .spur { --tempo: var(--band-sponsoren-2); }

/* ── FUSSLEISTE NACH DEM ENTWURF ─────────────────────────────────────
   Spaltenueberschriften in Rot, darunter eine feine Linie. */
.oe-fuss h2 {
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--t-winzig); letter-spacing: var(--label-spur);
  text-transform: uppercase; color: var(--red-2);
  padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); margin-bottom: var(--s-3);
}
.oe-fuss .marke .hashtag {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: var(--t-h3); color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════
   DER DURCHZUG AUF DIE ANDEREN SEITEN
   Jede Uebersichtsseite (News, Kalender, Partner, Teams, Free Agents,
   Mitglieder, die Bewerbungsformulare) oeffnet mit demselben Baustein:
   `<header class="kopf">` mit H1 und einer Unterzeile. Deshalb genuegt
   EINE Regel, damit der Entwurf ueberall ankommt — kein Markup muss
   angefasst werden, und keine Seite kann vergessen werden.

   Der Entwurf gibt jedem Abschnitt eine kurze rote Linie und darueber ein
   gesperrtes Label. Auf einer Seitenueberschrift uebernimmt die Linie
   diese Rolle; das Label ist der Menuepunkt, ueber den man gekommen ist,
   und steht schon in der Navigation.
   ═════════════════════════════════════════════════════════════════════ */
main > .kopf,
main > .innen > .kopf,
main .pn-kopfband .kopf {
  position: relative;
  padding-top: var(--s-5);
  margin-bottom: var(--s-7);
}
main > .kopf::before,
main > .innen > .kopf::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 44px; height: 3px; background: var(--red);
}
main > .kopf h1,
main > .innen > .kopf h1 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(32px, 6vw, 58px); line-height: var(--zeile-knapp);
  letter-spacing: 0; margin: 0 0 var(--s-3);
}
main > .kopf > p,
main > .innen > .kopf > p {
  margin: 0; max-width: var(--lesebreite);
  color: var(--text-2); font-size: var(--t-klein); line-height: var(--zeile-mit);
}

/* ⚠ Der Beitragskopf und der Partnerkopf haben eigene Rastern (Bild neben
     Text). Die Linie passt, die Schriftgroesse nicht — ein Beitragstitel
     ist ein Satz, keine Rubrik. */
.pn-beitrag > .kopf h1 { font-size: clamp(26px, 4vw, 42px); }
.pn-partner > .kopf::before { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   EVENTS — wo der Verein unterwegs ist
   Die Seite hinter der LAN-Kachel. Pro Station eine Karte: Ort als Label,
   Veranstaltung gross, darunter Platzierung, Monat und Team.
   ═════════════════════════════════════════════════════════════════════ */
.pn-events { width: 100%; max-width: var(--seitenbreite); margin-inline: auto;
             padding: var(--s-8) clamp(16px, 4vw, var(--rand)) var(--s-9); }
.ev-block { margin-top: var(--s-8); }
.ev-kopf {
  margin: 0 0 var(--s-4); padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
  font: 600 var(--t-winzig)/1 var(--font-body);
  letter-spacing: var(--label-spur); text-transform: uppercase; color: var(--text-3);
}
.ev-liste > a {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s-4);
  align-items: center; padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line-2); text-decoration: none; color: inherit;
}
.ev-liste > a:hover { background: var(--surface-2); }
.ev-liste .wann {
  font: 600 var(--t-winzig)/1.3 var(--font-body);
  letter-spacing: var(--label-spur); text-transform: uppercase;
}
.ev-liste .haupt { font-family: var(--font-display); text-transform: uppercase;
                   font-size: var(--t-klein); line-height: 1.1; }
.ev-liste .haupt small {
  display: block; margin-top: 3px; font-family: var(--font-body); font-weight: 600;
  font-size: var(--t-winzig); letter-spacing: var(--label-spur);
  text-transform: uppercase; color: var(--text-3);
}

.ev-raster { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 620px)  { .ev-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ev-raster { grid-template-columns: repeat(3, 1fr); } }
.ev-karte {
  display: grid; gap: var(--s-2); align-content: start; height: 100%;
  padding: var(--s-5); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-m);
  color: inherit; text-decoration: none;
}
a.ev-karte:hover { border-color: var(--red); }
.ev-karte .ort { color: var(--red-2); }
.ev-karte .titel {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: var(--t-h3); line-height: 1.04;
}
.ev-karte .wo { font-size: var(--t-klein); color: var(--text-2); }
/* Der Fuss sammelt, was klein ist: Platzierung, Monat, Team. */
.ev-karte .fuss {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center;
  margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line-2);
}
.ev-karte .platz {
  padding: 3px var(--s-2); border-radius: var(--r-chip);
  background: var(--red); color: #fff;
  font: 700 var(--t-winzig)/1 var(--font-body); letter-spacing: var(--label-spur);
  text-transform: uppercase;
}
.ev-karte .fuss .oe-label { color: var(--text-3); }
.ev-karte .fuss .team { margin-left: auto; }

/* ── Aufruf unter der Casterliste ────────────────────────────────────
   Dieselbe Form wie die Discord-Karte: ruhige Flaeche, Label, eine Zeile
   Begruendung, ein Knopf. */
.caster-aufruf {
  display: grid; gap: var(--s-2); justify-items: start;
  margin-top: var(--s-7); padding: var(--s-5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-m);
}
.caster-aufruf h3 {
  margin: 0; font-family: var(--font-display); text-transform: uppercase;
  font-size: var(--t-h3); line-height: 1;
}
.caster-aufruf p { margin: 0; max-width: var(--lesebreite); color: var(--text-2); }
.caster-aufruf .oe-knopf { margin-top: var(--s-3); }

/* Die Haken-Gruppe im Bewerbungsformular (Disziplinen). */
.formular .haken-gruppe { border: 0; padding: 0; margin: 0; }
.formular .haken-gruppe > legend { padding: 0; margin-bottom: var(--s-2); font: inherit; }
.formular .haken-eins {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin: 0 var(--s-4) var(--s-2) 0; cursor: pointer;
}
.formular .haken-eins input { width: auto; margin: 0; }

/* ═══════════════ BREITEN ════════════════════════════════════════════
   Der Guide nennt vier Stufen. Sie stehen hier in dieser Reihenfolge,
   weil mobil der Ausgangspunkt ist und jede Stufe nur ergänzt. */
/* ── Unter 900px: die Navigation wird Burger ─────────────────────────
   Der Guide ist hier genau: „Logo, Theme-Umschalter und Mitglied-Button
   bleiben in der Leiste sichtbar; der Rest klappt auf." Und: „Das
   Match-Widget rutscht als eigene volle Zeile unter die Navigation — es
   ist auf dem Handy wichtiger als am Desktop, nicht unwichtiger." */
@media (max-width: 900px) {
  /* „Hero-Randsäulen schrumpfen von 6% auf 3%, die Headline auf
     clamp-Minimum 54px." (Guide) — auf 360px wären 6% zweimal 22 Pixel,
     die dem Text fehlen. */
  .start-kopf::before, .start-kopf::after { width: 3%; }
  .start-kopf > .innen { padding-inline: calc(3% + clamp(16px, 3vw, var(--rand))); }

  .oe-kopfzeile { position: sticky; }
  /* Der Burger steht links, das Logo daneben, die Endgruppe rechts. */
  /* ⚠ Auf dem Handy steht links der Burger (44px) und rechts die zwei
     Zeichen (zusammen ~90px) — mit Innenabstaenden allein bekaeme das Logo
     nie die echte Mitte, es saesse immer ein paar Pixel daneben. Deshalb
     liegt es hier absolut auf 50% und ist damit wirklich mittig.
     Es ist schmal genug (unter 60px), dass es bei 320px Breite weder den
     Burger noch die Zeichen beruehrt. */
  .oe-kopfzeile .innen { padding-left: 56px; }
  .oe-kopfzeile .oe-logo {
    position: absolute; left: 50%; transform: translateX(-50%);
  }
  .oe-kopfzeile .oe-ende { margin-left: auto; }
  .oe-ende { gap: 2px; }
  /* 44px Tippziel auf dem Handy — die Mindestgroesse, unter der man
     danebentippt. Am Schreibtisch reichen 40px (Maus trifft genauer). */
  .oe-zugang.nur-symbol { width: 44px; height: 44px; }   /* `.oe-theme`: siehe pn-ui.css */

  /* ⚠ Das Match-Widget verlaesst die Leiste und wird eine eigene Zeile
     darunter — ueber die volle Breite, damit Gegner und Division lesbar
     bleiben statt in drei Pixel Ellipse zu enden. */
  .oe-ende .oe-match {
    position: absolute; top: 100%; left: 0; right: 0; transform: none;
    width: 100vw; margin-left: calc(50% - 50vw);
    border-radius: 0; border-inline: 0; border-top: 0;
  }
  .oe-ende .oe-match .wer { white-space: normal; }
  /* Die Leiste braucht die Zeile als Platz, sonst liegt sie auf dem Inhalt. */
  .oe-kopfzeile:has(.oe-match) { margin-bottom: 42px; }
}

@media (min-width: 768px) {
  .oe-kacheln { grid-template-columns: repeat(2, 1fr); }
  .oe-kachel.breit { grid-column: span 2; }
  .oe-kennzahlen { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1280px) {
  .oe-kacheln { grid-template-columns: repeat(4, 1fr); }
}

}