/* ═══════════════════════════════════════════════════════════════════════
   Ö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,
.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. */
.oe-theme {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--surface); color: var(--text-2);
  font: 600 var(--t-winzig)/1 var(--font-body);
  letter-spacing: var(--label-spur); text-transform: uppercase;
  cursor: pointer; flex: none;
}
.oe-theme:hover { color: var(--text); border-color: var(--line); }
.oe-theme .scheibe {
  width: 12px; height: 12px; border-radius: var(--r-full); flex: none;
  /* Halb hell, halb dunkel — dasselbe Zeichen in beiden Themes, nur
     gedreht. Ein Sonne/Mond-Paar bräuchte zwei Icons und sagt dasselbe. */
  background: linear-gradient(90deg, var(--text) 50%, transparent 50%);
  border: 1.5px solid var(--text); box-sizing: border-box;
}
.th-light .oe-theme .scheibe { transform: rotate(180deg); }

/* ═══════════════ 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 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. */
.oe-ende {
  position: absolute; right: clamp(12px, 3vw, 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; }

/* Die Kopfzeile braucht rechts so viel Platz, wie die Gruppe belegt —
   sonst schiebt sie sich auf die Menuepunkte. */
.oe-kopfzeile .innen { padding-right: clamp(150px, 34vw, 420px); }

/* ── Das Logo wechselt mit dem Theme ─────────────────────────────── */
.oe-logo { display: block; }
.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; }
.oe-kachel.rot .oe-label, .oe-kachel.rot small { color: var(--red-tint); }
.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 { 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; }
@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. */
.gemeinschaft .gem-karte.dunkel {
  display: grid; gap: var(--s-4); align-content: center;
  grid-template-columns: 1fr; padding: var(--s-5);
}
@media (min-width: 768px) {
  .gemeinschaft .gem-karte.dunkel {
    grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    grid-column: span 2;
  }
  .gemeinschaft .gem-karte.dunkel .oe-knopf,
  .gemeinschaft .gem-karte.dunkel .oe-weiter { justify-self: end; }
}

.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 .wer { font-weight: 600; color: var(--red-2); white-space: nowrap; }
.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);
}

/* ═══════════════ 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; }
  .oe-kopfzeile .innen { padding-right: clamp(120px, 42vw, 260px); }
  .oe-ende { gap: 6px; }
  /* Das Wort weg, die Scheibe bleibt: 44px Tippziel, kein Platzverbrauch. */
  .oe-theme { padding: 0; width: 44px; height: 44px; justify-content: center;
              border-color: transparent; background: transparent; }
  .oe-theme .wort { display: none; }
  .oe-zugang { padding: var(--s-2) var(--s-3); font-size: var(--t-mikro); }

  /* ⚠ 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); }
}

}