/*
 * Copyright AYA e.V.
 * Licensed under the EUPL, Version 1.2 only.
 *
 * Oeffentliche QR-Seiten (Selbst-Check-in, Vor-Ort-Nachmeldung).
 *
 * Diese Seiten sind der Eingang: sie sind das Einzige, was ein Teilnehmer auf
 * dem EIGENEN Handy von Zettelwirt sieht - gescannt vom A4-Plakat, im Stehen
 * neben dem Auto. Sie hingen bisher an nacktem Bootstrap, mit blauem
 * Standard-Knopf in einer durchgehend orangen App.
 *
 * Bewusst eine eigene, kleine Datei statt zettelwirt.css: die Seiten laufen
 * ohne App-Shell (kein base.html.twig, anonyme Handys ohne Werkzeugrechte),
 * und 900 Zeilen Dashboard-Chrom haben hier nichts zu suchen. Die Farben und
 * Schriften kommen aus aya-tokens.css, damit es EIN Designsystem bleibt.
 */

body {
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, .zw-oe-titel {
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

/* Seitenrahmen der QR-Seiten (loest das bisherige .container py-4 ab, damit
   Kopf, Hero und Karten denselben Rhythmus haben). */
.zw-oe-seite {
  max-width: 480px;
  margin: 0 auto;
  padding: 1.25rem 1rem 2.5rem;
}
/* Formular und Ergebnisbogen brauchen mehr Breite als eine Entscheidungsseite. */
.zw-oe-seite-breit { max-width: 560px; }

/* ---- Kopfzeile: Logo links, Sprache rechts ----
   Das Logo ist hier kein Zierrat: nach dem Scan eines Plakats am Hallentor ist
   die erste stumme Frage "bin ich hier richtig?". */
.zw-oe-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.zw-oe-logo { height: 26px; width: auto; display: block; }

/* ---- Sprachwahl mit Flaggen ----
   Segmentierte Pille; die aktive Sprache liegt als weisse Karte oben auf. Die
   Flaggen bleiben in beiden Zustaenden voll gesaettigt - sie sind das Signal,
   nach dem ein englischsprachiger Gast sucht, und ein entsaettigtes Union Jack
   findet er nicht. */
.zw-oe-sprache {
  display: inline-flex;
  gap: 2px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 3px;
}
.zw-oe-flagge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.zw-oe-flagge svg {
  display: block;
  width: 20px;
  height: 13px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(36, 38, 43, .15);
}
.zw-oe-flagge.is-aktiv {
  background: var(--surface-card);
  color: var(--text-strong);
  box-shadow: var(--shadow-xs);
}
.zw-oe-flagge:focus-visible { outline: 3px solid var(--text-strong); outline-offset: 2px; }

/* ---- Hero ---- */
.zw-oe-hero { text-align: center; margin-bottom: 1.75rem; }
.zw-oe-h1 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin: .35rem 0 .6rem;
}
/* Absagen duerfen nicht schreien: der geschlossene Zustand traegt dieselbe
   Ueberschrift eine Stufe kleiner. */
.zw-oe-h1-klein { font-size: var(--text-2xl); }
.zw-oe-event {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--text-body);
  overflow-wrap: anywhere;
}
.zw-oe-ort {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: .15rem;
}
.zw-oe-frage {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  margin-bottom: .9rem;
}

/* Dritte Hero-Zeile (Teilnehmer/Klasse auf der Ergebnisseite). */
.zw-oe-sub {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  margin-top: .35rem;
}

.zw-oe-karte {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Karteninhalt. Ersetzt Bootstraps .card-body auf den oeffentlichen Seiten:
   dessen 1rem liess lange Saetze bis an die Kartenkante laufen. */
.zw-oe-koerper     { padding: 1.35rem 1.25rem; }
.zw-oe-koerper-eng { padding: .9rem 1.1rem; }

/* Zustandskarte: ein Symbol im getoenten Kreis, darunter ein Satz. Die Toenung
   traegt die Aussage - Rahmenfarben (border-warning & Co.) sind auf einer
   weissen Karte zu leise, um ueberhaupt aufzufallen. */
/* Kleingedrucktes innerhalb einer Karte (Hinweise unter Knoepfen). */
.zw-oe-klein {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  margin-bottom: 0;
}

.zw-oe-status      { padding: 1.75rem 1.25rem; text-align: center; }
.zw-oe-status p    { margin-bottom: 0; }
.zw-oe-status-titel {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--text-strong);
  margin: 0 0 .5rem;
}

/* Primaeraktion in AYA-Orange. Gruen bleibt dem erreichten Zustand vorbehalten:
   orange = tu es, gruen = ist getan.
   text-decoration hier und nicht per .text-decoration-none am Aufrufer: als
   <a> gerendert stand der Knopf sonst unterstrichen da (auf iOS besonders
   deutlich) und sah aus wie ein Link, den jemand versehentlich orange
   angemalt hat. */
.zw-oe-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-align: center;
  text-decoration: none;
  width: 100%;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: .01em;
  min-height: 56px;
  padding: .75rem 1.25rem;
  cursor: pointer;
  transition: background var(--t-fast);
}
.zw-oe-btn:hover:not(:disabled)  { background: var(--brand-primary-hover); }
.zw-oe-btn:hover                 { color: var(--brand-on-primary); }
.zw-oe-btn:disabled              { opacity: .6; cursor: default; }
.zw-oe-btn:focus-visible         { outline: 3px solid var(--text-strong); outline-offset: 2px; }
.zw-oe-pfeil                     { font-size: 1.15em; line-height: 1; }

/* Zweite Wahl: gleicher Knopf, nur umrissen. Zwei identisch gefuellte
   Orange-Balken untereinander sind eine Wand, keine Entscheidung. */
.zw-oe-btn-sek {
  background: var(--surface-card);
  color: var(--brand-primary);
  box-shadow: inset 0 0 0 2px var(--brand-primary);
}
.zw-oe-btn-sek:hover:not(:disabled) { background: var(--brand-primary-soft); }
.zw-oe-btn-sek:hover                { color: var(--brand-primary); }

/* Dritte Stufe: Nebenwege, die niemanden anziehen sollen ("neu laden",
   "Status ansehen"). Grau umrissen, gleiche Groesse - am Daumen aendert sich
   nichts, nur an der Blickfuehrung. */
.zw-oe-btn-leise {
  background: var(--surface-card);
  color: var(--text-body);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  font-size: var(--text-base);
  min-height: 48px;
}
.zw-oe-btn-leise:hover:not(:disabled) { background: var(--surface-sunken); }
.zw-oe-btn-leise:hover                { color: var(--text-strong); }

/* Knoepfe stehen auf diesen Seiten fast immer untereinander. */
.zw-oe-btn + .zw-oe-btn { margin-top: .6rem; }

/* ---- Wahlkarten der Anmelde-Weiche ---- */
.zw-oe-wahl { padding: 1.15rem 1.15rem 1.25rem; }
.zw-oe-wahl + .zw-oe-wahl { margin-top: .9rem; }

.zw-oe-wahl-kopf { display: flex; align-items: center; gap: .8rem; }

.zw-oe-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  display: grid;
  place-items: center;
  font-size: 21px;
  line-height: 1;
  background: var(--brand-primary-soft);
}
.zw-oe-icon-zwei    { background: var(--brand-secondary-soft); }
.zw-oe-icon-neutral { background: var(--surface-sunken); }
.zw-oe-icon-ok      { background: var(--status-success-soft); color: var(--aya-green-600); }
.zw-oe-icon-warn    { background: var(--status-warning-soft); }
.zw-oe-icon-gross   { width: 56px; height: 56px; font-size: 27px; margin: 0 auto 1rem; }

.zw-oe-label {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-primary);
}
.zw-oe-label-zwei { color: var(--brand-secondary); }

.zw-oe-wahl-titel {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--text-strong);
  margin: .1rem 0 0;
}

.zw-oe-wahl-text {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  margin: .75rem 0 1rem;
}

/* ---- Formular (Spontan-Anmeldung) ----
   Bewusst als Ueberschreibung von Bootstrap innerhalb von .zw-oe-form statt als
   eigener Klassensatz: das Formular bleibt mit dem vertrauten Grid und den
   .form-control-Hooks von nachmeldung.js bedienbar, sieht aber nach derselben
   Seite aus wie die Karten darueber.

   font-size 16px ist Pflicht und keine Geschmacksfrage: bei allem darunter
   zoomt iOS Safari beim Antippen ins Feld hinein, und der Gast tippt seine
   Daten dann in einer verrutschten, seitlich scrollenden Seite ein. */
.zw-oe-form .form-label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--text-body);
  margin-bottom: .3rem;
}
.zw-oe-form .form-control,
.zw-oe-form .form-select {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: .65rem .8rem;
  min-height: 48px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.zw-oe-form .form-control::placeholder { color: var(--text-faint); }
.zw-oe-form .form-control:focus,
.zw-oe-form .form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: var(--ring-brand);
  outline: none;
}
.zw-oe-form .form-text {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  margin-top: .3rem;
}

/* Hinweisboxen. Farbe traegt die Bedeutung, die linke Kante macht sie auch dann
   erkennbar, wenn der Farbton auf einem hellen Handy im Sonnenlicht untergeht. */
.zw-oe-notiz {
  border-radius: var(--radius-md);
  border-left: 3px solid var(--text-faint);
  background: var(--surface-sunken);
  padding: .7rem .9rem;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-body);
}
.zw-oe-notiz-ok {
  background: var(--status-success-soft);
  border-left-color: var(--status-success);
}
.zw-oe-notiz-fehler {
  background: var(--status-danger-soft);
  border-left-color: var(--status-danger);
  color: var(--aya-red-600);
}

/* Kleingedrucktes als eigener, ruhiger Block statt als grauer Absatz im Nichts:
   der Weg zum Check-in-Tisch ist die Auffanglinie fuer alle, die sich in keiner
   der beiden Karten wiederfinden. */
.zw-oe-fuss {
  margin: 1.25rem 0 0;
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  padding: .85rem 1rem;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  text-align: center;
}

/* ---- Ergebnisseite: ein Bereich pro Karte ---- */
.zw-oe-block + .zw-oe-block { margin-top: .5rem; }
.zw-oe-block-titel {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}
.zw-oe-block-wert {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-heavy);
  color: var(--text-strong);
}
/* Bootstraps Balken ist blau; hier ist Orange die Marke und Blau die
   Zweitfarbe. */
.zw-oe-balken { height: 5px; background: var(--surface-sunken); border-radius: var(--radius-pill); }
.zw-oe-balken .progress-bar { background: var(--brand-primary); }

/* ===================================================================
   Der Pass: Bildschirm-Gegenstueck zum Scheibenzettel
   ===================================================================
   Der Scheibenzettel (templates/pdf/scheibenzettel.html.twig) ist das
   Identitaetsobjekt des Teilnehmers am Event: A4 quer, Nick riesig, Klasse
   riesig, Komponenten klein darunter. Er liegt hinter der Windschutzscheibe,
   damit Jury und Besucher sehen, wer hier startet und in welcher Klasse.

   Diese Karte erbt genau diese Hierarchie. Der Teilnehmer sieht nach dem
   Check-in auf dem Handy schon das, was nachher am Auto liegt - und hat etwas
   zum Herzeigen. Die ganze Kuehnheit steckt im Groessensprung von Nick und
   Klasse, nicht in Farbe oder Zierrat. */
/* Genau EIN Akzent am Kopf: das gruene Statusband. Ein oranger Rahmen darueber
   hat mit ihm um die Aufmerksamkeit konkurriert, und Orange traegt in dieser
   Karte ohnehin schon den Klassennamen. */
.zw-pass {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.zw-pass-status {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: var(--status-success-soft);
  color: var(--aya-green-600);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: .5rem 1.25rem;
}

.zw-pass-koerper { padding: 1.5rem 1.25rem; }

.zw-pass-nick {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-heavy);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  overflow-wrap: anywhere;
}
.zw-pass-name {
  font-size: var(--text-md);
  color: var(--text-muted);
  margin-top: .15rem;
}

.zw-pass-klasse {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-top: 1rem;
  overflow-wrap: anywhere;
}

/* Trennlinie gestrichelt: die eine erlaubte Anspielung auf die Abrisskante
   eines Tickets - und gleichzeitig funktionaler Trenner zum Kleingedruckten. */
.zw-pass-fuss {
  border-top: 1px dashed var(--border-strong);
  padding: .85rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.zw-pass-fuss strong { color: var(--text-body); font-weight: var(--weight-medium); }

/* Laengenabhaengige Stufen (Klasse kommt aus dem Template). Bewusst statt einer
   Breiten-Query: ein langer Gastname sprengt die Karte auf JEDEM Geraet. */
.zw-pass-nick-m { font-size: var(--text-3xl); }
.zw-pass-nick-s { font-size: var(--text-2xl); letter-spacing: 0; }

@media (max-width: 380px) {
  .zw-pass-klasse { font-size: var(--text-lg); }
}

/* ---- Oeffentliche Saisontabelle (/saisontabelle) ----
   Breiter als jede andere Seite der oeffentlichen Strecke: je Klasse steht eine
   Matrix aus Fahrzeugen und Wettbewerben, und die soll auf einem Laptop ohne
   Schieben lesbar sein. Auf dem Telefon schiebt sich nur die Matrix, nicht die
   Seite - die Namensspalte klebt links. */
.zw-oe-seite-tabelle { max-width: 1000px; }

/* Saisonwahl: dieselbe Pillenreihe wie der Sprachumschalter, damit der Kopf
   nicht zwei verschiedene Formsprachen traegt. */
.zw-oe-jahre {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.zw-oe-jahr {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  color: var(--text-muted);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  padding: .25rem .8rem;
}
.zw-oe-jahr:hover { color: var(--text-strong); }
.zw-oe-jahr.is-aktiv {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-on-primary);
}

/* Regelkasten ueber den Klassen: erklaert die Zahlen, die darunter stehen. */
.zw-oe-regel {
  background: var(--brand-primary-soft);
  border-radius: var(--radius-md);
  padding: .9rem 1.1rem;
  margin-bottom: 1.25rem;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-body);
}
.zw-oe-regel-titel {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  margin-bottom: .3rem;
}
.zw-oe-regel p { margin-bottom: .4rem; }
.zw-oe-regel p:last-child { margin-bottom: 0; }

/* ---- Klassenblock ---- */
.zw-oe-klasse { margin-bottom: 1.1rem; }
.zw-oe-klasse-kopf {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35rem .7rem;
  padding: .75rem 1rem;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-default);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.zw-oe-klasse-name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  color: var(--text-strong);
}
.zw-oe-klasse-zahlen {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-left: auto;
  text-align: right;
}

/* ---- Ergebnis-Matrix je Klasse ----
   Aufbau wie die Jurorenplanung in aya-events: klebende Namensspalte, hochkant
   stehende Eventkoepfe, Fuellspalte fuer die Restbreite. Der Grund fuer das
   Hochkant ist Platz - acht Wettbewerbe mit lesbaren Namen passen quer auf kein
   Telefon, hochkant kostet jede Spalte gut zwei Zeichen Breite.

   Der Einladungsstand sitzt IN der Namensspalte und nicht als eigene Spalte am
   Ende: er ist die Auskunft, wegen der die Seite aufgerufen wird, und darf beim
   seitlichen Schieben nicht wegwandern. */
.zw-oe-matrix-wrap {
  overflow-x: auto;
  /* Schiebbare Flaechen brauchen auf iOS eine eigene Kette, sonst uebernimmt
     die Seite die Bewegung. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.zw-oe-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
}
/* Bewusst KEINE Fuellspalte wie in der Jurorenplanung: dort gibt es zehn und
   mehr Wettbewerbe, hier oft nur drei oder vier, und die Restbreite stand dann
   als leere Flaeche in der Karte. Die verteilt jetzt der Browser auf die
   Spalten selbst - die Namensspalte bekommt den groessten Teil, was langen
   Namen und Fahrzeugtexten ohnehin gut tut. */
.zw-oe-matrix thead th {
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-default);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  text-align: left;
  vertical-align: bottom;
  padding: .5rem .6rem;
}
.zw-oe-matrix tbody td {
  border-bottom: 1px solid var(--border-subtle);
  padding: .45rem .6rem;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.zw-oe-matrix tbody tr:last-child td { border-bottom: 0; }

/* Klebende Namensspalte. Die Datenzellen brauchen eine eigene Deckfarbe, sonst
   scheinen die darunter wegscrollenden Spalten durch. */
.zw-oe-matrix .zw-oe-m-name {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface-card);
  min-width: 11.5rem;
  display: table-cell;
}
.zw-oe-matrix thead .zw-oe-m-name { z-index: 3; background: var(--surface-sunken); }
.zw-oe-matrix .zw-oe-m-name::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background: var(--border-default);
}
/* Platznummer und Name IMMER auf einer Linie. Vorher waren beide inline-Boxen,
   und sobald das Mitgliedskennzeichen dazukam, rutschte der Name je Zeile eine
   Etage tiefer - die Spalte sah aus, als haette sie zwei verschiedene Layouts. */
.zw-oe-m-namezeile { display: flex; align-items: flex-start; gap: .35rem; }
.zw-oe-m-platz {
  flex: none;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  min-width: 1.6rem;
  text-align: right;
  color: var(--text-muted);
  line-height: 1.45;
}
.zw-oe-m-wer {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}
.zw-oe-m-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
.zw-oe-m-nom {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  color: var(--text-strong);
  overflow-wrap: anywhere;
}
.zw-oe-m-auto {
  font-size: var(--text-xs);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
/* Farbe steht hinter dem Auto in derselben Zeile, das Team eine Etage tiefer -
   es gehoert zur Person, nicht zum Fahrzeug. Beides tritt zurueck: gesucht
   werden Name und Punkte. */
.zw-oe-m-farbe { color: var(--text-faint); }
.zw-oe-m-team {
  font-size: var(--text-2xs);
  color: var(--text-faint);
  overflow-wrap: anywhere;
}
.zw-oe-m-lage { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; margin-top: .15rem; }
/* Mitgliedskennzeichen: nur fuer bekannte Mitglieder gesetzt (das Template
   prueft `is same as(true)`), ein fehlendes Kennzeichen ist also kein "kein
   Mitglied", sondern auch "nicht bekannt". */
.zw-oe-m-mitglied {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  border: 1px solid var(--aya-green-500);
  background: var(--status-success-soft);
  color: var(--aya-green-600);
  border-radius: 999px;
  padding: .05rem .4rem;
}

/* Summenspalte gleich neben dem Namen: die beiden wichtigsten Zahlen stehen
   zusammen und bleiben ohne Schieben sichtbar. Die kraeftige Zahlenschrift
   gilt nur im Tabellenkoerper - im Kopf sah "Punkte" damit aus wie ein Wert. */
.zw-oe-matrix .zw-oe-m-sum {
  text-align: right;
  min-width: 3rem;
  white-space: nowrap;
}
.zw-oe-matrix tbody .zw-oe-m-sum {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  color: var(--text-strong);
}

/* Eventkopf: umgebrochen statt hochkant.
   Die Jurorenplanung in aya-events dreht ihre Koepfe um 90 Grad, weil dort
   zwanzig Termine nebeneinander stehen. Hier sind es drei bis acht, und der
   Preis der Drehung waere hoch: eine 11rem hohe, fast leere Kopfzeile und
   abgeschnittene Namen ("Sommerfest Lüb..."), deren Rest nur ein
   title-Tooltip hergibt - auf dem Telefon also gar nicht. Umgebrochen steht
   jeder Name vollstaendig da, der Kopf ist drei Zeilen hoch, und die Spalten
   bleiben schmal genug fuer acht Wettbewerbe ohne Schieben. */
.zw-oe-matrix th.zw-oe-m-event {
  width: 5rem;
  text-align: center;
  vertical-align: bottom;
  white-space: normal;
  line-height: 1.15;
}
.zw-oe-m-rot { display: block; }
.zw-oe-m-rot-name {
  display: block;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--text-body);
  /* Nur an Wortgrenzen umbrechen - `anywhere` zerlegte "ToN Hauptstadt" zu
     "Hauptsta / dt". Ein Wort, das breiter ist als die Spalte, darf dann
     ueberstehen; das faellt weniger auf als ein zerhacktes Wort. */
  overflow-wrap: normal;
  hyphens: none;
}
.zw-oe-m-rot-datum {
  display: block;
  margin-top: .15rem;
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  color: var(--text-faint);
  white-space: nowrap;
}

/* Ergebniszellen */
.zw-oe-matrix .zw-oe-m-zelle {
  text-align: center;
  padding-left: .2rem;
  padding-right: .2rem;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  color: var(--text-body);
  white-space: nowrap;
}
.zw-oe-matrix .zw-oe-m-leer { color: var(--text-faint); font-weight: var(--weight-medium); }
/* Kennzeichen in der Zelle ("*" verschoben, "✎" von Hand). Klein und in der
   Markenfarbe: sie sollen auffallen, ohne die Zahl zu ueberdecken. */
.zw-oe-m-merk {
  color: var(--brand-primary);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xs);
}

/* ---- Erklaerung einer gekennzeichneten Zelle ----
   Der Hinweis haengt an der ganzen Zelle: das 8px breite Sternchen mit der Maus
   zu treffen war Millimeterarbeit. Die zarte Toenung macht die Zelle ueberhaupt
   erst als Ziel erkennbar - vorher musste man wissen, dass da etwas zu holen
   ist. Bewusst eigenes Tooltip statt title: das native erscheint erst nach
   ungefaehr einer Sekunde, und genau das Zoegern liess den Hinweis unauffindbar
   wirken. */
.zw-oe-m-erklaert {
  position: relative;
  cursor: help;
  background: var(--brand-primary-soft);
}
.zw-oe-m-erklaert::after {
  content: attr(data-hinweis);
  position: absolute;
  /* Nach OBEN und nach LINKS aufgehen, beides zur Tabellenmitte hin: die
     Sprechblase bleibt damit immer INNERHALB des schiebbaren Bereichs. Nach
     unten oder rechts waere sie beim letzten Wettbewerb und in der letzten
     Zeile abgeschnitten - `overflow-x: auto` des Rahmens macht aus der anderen
     Achse automatisch ebenfalls einen Scrollbereich, "einfach ueberstehen"
     gibt es hier also nicht. Ueber der ersten Datenzeile liegt die Kopfzeile,
     also ist auch dort Platz. */
  right: .2rem;
  bottom: calc(100% - .4rem);
  z-index: 5;
  width: -moz-max-content;
  width: max-content;
  max-width: 20rem;
  padding: .4rem .6rem;
  border-radius: var(--radius-md);
  background: var(--text-strong);
  color: var(--surface-card);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
  pointer-events: none;
}
/* :focus deckt Tastatur UND Tippen ab - die Zelle traegt dafuer tabindex. */
.zw-oe-m-erklaert:hover::after,
.zw-oe-m-erklaert:focus::after {
  opacity: 1;
  visibility: visible;
}
.zw-oe-m-erklaert:focus { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
/* Nicht qualifizierte Zeilen bleiben lesbar, treten aber zurueck. */
.zw-oe-m-blass .zw-oe-m-nom,
.zw-oe-m-blass .zw-oe-m-sum,
.zw-oe-m-blass .zw-oe-m-zelle { color: var(--text-muted); }

/* ---- Einladungsstand als Kennzeichen ---- */
.zw-oe-stand {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: .02em;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  padding: .1rem .5rem;
  white-space: nowrap;
  color: var(--text-muted);
  background: var(--surface-card);
}
.zw-oe-stand-ok {
  background: var(--status-success-soft);
  border-color: var(--aya-green-500);
  color: var(--aya-green-600);
}
.zw-oe-stand-offen {
  background: var(--status-info-soft);
  border-color: var(--aya-blue-500);
  color: var(--aya-blue-600);
}
.zw-oe-stand-warte {
  background: var(--status-warning-soft);
  border-color: var(--aya-amber-500);
  color: var(--aya-amber-600);
}
.zw-oe-stand-weg {
  background: var(--surface-sunken);
  color: var(--text-faint);
}
/* Die Antwort auf "wann bin ich dran": bewusst kraeftiger als ein Kennzeichen. */
.zw-oe-distanz {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--brand-primary);
  white-space: nowrap;
}

/* Sehr schmale Geraete (iPhone SE der ersten Generation): Logo und
   Sprachpille duerfen sich nicht in die zweite Zeile schieben. */
@media (max-width: 359px) {
  .zw-oe-seite   { padding-left: .75rem; padding-right: .75rem; }
  .zw-oe-logo    { height: 22px; }
  .zw-oe-flagge  { padding: .35rem .5rem; font-size: var(--text-2xs); gap: .3rem; }
  .zw-oe-h1      { font-size: var(--text-2xl); }
}

@media (max-width: 420px) {
  /* Auf dem Telefon wird die klebende Spalte schmaler - sonst bleibt fuer die
     Ergebnisse kein sichtbarer Rest. Der Einladungsstand steht darin weiter
     ganz oben, er ist der Grund fuer den Seitenaufruf. */
  .zw-oe-matrix .zw-oe-m-name { min-width: 9.5rem; max-width: 10.5rem; }
  .zw-oe-matrix .zw-oe-m-sum  { min-width: 2.4rem; }
  .zw-oe-matrix thead th,
  .zw-oe-matrix tbody td { padding-left: .4rem; padding-right: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .zw-oe-btn, .zw-oe-flagge, .zw-oe-m-erklaert::after { transition: none; }
}