/* Modul Mannschaftsspielbetrieb.
 *
 * Bewusst wenig: Alles, was es schon gibt — Flächen, Reiter, Feldkacheln,
 * Marken —, wird aus app.css und turnierbetrieb.css übernommen. Hier steht
 * nur, was es dort nicht gibt: die Standtafel, die Liste der Einzelspiele und
 * die Aufstellung.
 *
 * Handy und Desktop sind gleichrangig (ARCHITEKTUR.md, Abschnitt 1): Das
 * Grundlayout ist einspaltig und für 360 px geschrieben; ab 900 px stehen
 * Kader nebeneinander und die Einzelspiele in echten Zeilen statt in Blöcken.
 */

/* --- Liste der Begegnungen ------------------------------------------- */

.ms-liste {
  display: grid;
  gap: var(--s3);
  grid-template-columns: 1fr;
}

.ms-karte {
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface);
  overflow: hidden;
}

.ms-karte.aktiv {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.ms-karte-flaeche {
  display: block;
  width: 100%;
  /* Große Trefferfläche: Diese Liste wird in der Halle im Stehen bedient. */
  min-height: 64px;
  padding: var(--s3) var(--s4);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ms-karte-flaeche:hover { background: var(--surface-2); }

.ms-karte-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.ms-karte-stand {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --- Standtafel ------------------------------------------------------- */

/* Schmal: eine Anzeigetafel — Mannschaften untereinander, Zahl rechts. */
.ms-standtafel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "heimname  heimpunkte"
    "gastname  gastpunkte"
    "meta      meta";
  align-items: center;
  column-gap: var(--s3);
  row-gap: var(--s2);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface);
}

.ms-mannschaft {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ms-mannschaft.heim { grid-area: heimname; }
.ms-mannschaft.gast { grid-area: gastname; }
.ms-punkte.heim { grid-area: heimpunkte; }
.ms-punkte.gast { grid-area: gastpunkte; }
.ms-standtafel-mitte { grid-area: meta; margin: 0; }

.ms-mannschaft.sieger { font-weight: 700; }

.ms-punkte {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  text-align: right;
}

/* --- Einzelspiele ----------------------------------------------------- */

.ms-spielliste,
.ms-besetzungsliste {
  display: grid;
  gap: var(--s3);
}

.ms-spiel,
.ms-besetzung {
  display: grid;
  gap: var(--s2);
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface);
}

.ms-spiel.laeuft { border-left: 4px solid var(--brand); }
.ms-spiel.beendet { opacity: 0.75; }

.ms-spiel-rolle {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.ms-spiel-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--surface-2);
  font-weight: 700;
}

.ms-spiel-parteien { display: grid; gap: 2px; align-content: start; }
.ms-spiel-parteien .sieger { font-weight: 700; }

.ms-spiel-stand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3); }
.ms-spiel-stand .zahl:first-child { font-size: 1.25rem; font-weight: 700; }

/* **Zustand links, Aktionen rechts, Zugaben in den Fuß.** Die Zeile hat acht
   Geschwister, und sie sollen alle gleich aussehen — auch die, bei denen
   gerade gezählt wird. Deshalb liegt im Raster oben nur, was es bei **jedem**
   Spiel gibt; alles, was kommt und geht (Zählerhinweis, Blatt), steht unten
   über die volle Breite und verschiebt keine Spalte (24.09.2026). */
.ms-spiel-zustand {
  display: grid;
  gap: var(--s2);
  align-content: start;
  justify-items: start;
}

/* Code, „Zählen“ und der QR-Knopf stehen zusammen: Es ist **eine** Sache —
   der Weg ans Gerät am Feld. Getrennt sucht man den Code in der einen und den
   Knopf in der anderen Ecke. */
.ms-spiel-zugang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}

.ms-spiel-marken {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}

.ms-spiel-tat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}

/* Die Feldauswahl nimmt sich, was sie braucht, und nicht die ganze Zeile:
   Ein Auswahlfeld ist in dieser Anwendung sonst so breit wie sein Formular —
   hier steht es zwischen Knöpfen. */
.ms-spiel-tat select {
  width: auto;
  min-width: 130px;
  max-width: 100%;
}

.ms-spiel-fuss {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s3);
  margin-top: var(--s1);
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
}

/* Der Spielcode steht hier unter Zustand und Feld und nicht auf einer Kachel:
   In dieser Zeile ist er eine Angabe unter mehreren, nicht die Hauptsache.
   In der Feldverwaltung bleibt er groß — dort wird er abgelesen und eingetippt. */
.ms-spiel-zustand .grosser-code {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

/* Der QR-Code klappt **unter** der Zeile auf und über ihre ganze Breite.
   Als weitere Spalte im Raster würde er die Zeile auseinanderziehen; die
   Spalten sind aber für alle acht Einzelspiele gleich, und sieben davon
   hätten dann eine leere Lücke. */
.ms-spiel-qr {
  grid-column: 1 / -1;
  margin-top: var(--s2);
}

/* --- Unterschriften der Mannschaftsführer ------------------------------
 * Zwei Felder nebeneinander, auf dem Telefon untereinander. Das Feld ist
 * bewusst hoch: Wer mit dem Finger unterschreibt, braucht mehr Platz als mit
 * dem Stift auf Papier. */

.ms-unterschriften {
  display: grid;
  gap: var(--s4);
}

.ms-unterschrift {
  display: grid;
  gap: var(--s2);
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface);
}

.ms-unterschrift-feld {
  width: 100%;
  /* Flach und breit — so, wie man unterschreibt, und so, wie das Feld auf dem
     Blatt aussieht. Ein hohes Quadrat verleitet zu einer Kritzelei, die auf
     dem Bericht dann winzig steht. */
  height: clamp(90px, 20vw, 120px);
  border: 1px dashed var(--line-2);
  border-radius: var(--r1);
  background: var(--surface-2);
  color: var(--ink);
  /* Ohne das schiebt der Finger beim Unterschreiben die Seite weg statt zu
     zeichnen — auf einem Telefon ist die Fläche sonst unbenutzbar. */
  touch-action: none;
  cursor: crosshair;
}

@media (min-width: 700px) {
  .ms-unterschriften { grid-template-columns: 1fr 1fr; }
}

/* --- Aufstellung ------------------------------------------------------ */

.ms-aufstellung {
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
  /* Beide Kader beginnen **oben**, und jeder ist nur so hoch, wie er sein
     muss. Ohne diese Zeile zieht das Raster die kürzere Spalte auf die Höhe
     der längeren, und ihr Inhalt landet in der Mitte — bei 71 gegen 36
     Spielern ein halber Bildschirm Leere über der zweiten Mannschaft. Dass
     eine Spalte früher endet als die andere, ist richtig so und trägt sich
     auf schmalen Geräten von selbst. */
  align-items: start;
}

.ms-kader {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.ms-kader li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 44px;
  padding: 0 var(--s2);
  border-bottom: 1px solid var(--line);
}

.ms-besetzung-seite { display: grid; gap: var(--s2); }
.ms-besetzung-seite select { width: 100%; }
.ms-gegen { text-align: center; }

/* --- Reihenfolge ------------------------------------------------------ */

.ms-folge {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  counter-reset: folge;
}

.ms-folge li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  padding: 0 var(--s2);
  border-bottom: 1px solid var(--line);
}

.ms-folge-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: var(--ink-3);
}

/* Was der Verband vorgibt — abgesetzt, weil es eine fremde Entscheidung ist
 * und nicht die eigene. Der Streifen an der Seite sagt das ohne Worte. */
.ms-verbandsvorgabe {
  gap: var(--s2);
  padding: var(--s3);
  border-left: 3px solid var(--brand);
  background: var(--brand-soft);
  border-radius: var(--r1);
}

.ms-verbandsvorgabe .reihe { align-items: center; flex-wrap: wrap; }

/* --- Desktop ----------------------------------------------------------
 * Ab hier wird die Breite genutzt: Die Turnierleitung will viele Spiele
 * gleichzeitig sehen, nicht eines nach dem anderen (ARCHITEKTUR.md,
 * Abschnitt 1). */

@media (min-width: 900px) {
  .ms-liste { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .ms-aufstellung { grid-template-columns: 1fr 1fr; }

  /* Breit: der Spielbericht — beide Mannschaften einander gegenüber. */
  .ms-standtafel {
    grid-template-columns: minmax(0, 1fr) auto minmax(160px, auto) auto minmax(0, 1fr);
    grid-template-areas: "heimname heimpunkte meta gastpunkte gastname";
  }

  .ms-mannschaft.gast { text-align: right; }
  .ms-punkte.gast { text-align: left; }
  .ms-standtafel-mitte { text-align: center; }

  .ms-besetzung {
    grid-template-columns: minmax(160px, 1fr) 1fr auto 1fr auto;
    align-items: center;
  }

  .ms-besetzung-seite { grid-auto-flow: column; }

  .ms-punkte { font-size: 3rem; }
}

/* --- Die Einzelspielzeile in drei Breiten ------------------------------
 *
 * **Jede Zeile ist ein eigenes Raster** — acht Artikel untereinander und keine
 * Tabelle. Damit sie trotzdem in einer Flucht stehen, darf keine Spalte an
 * ihrem Inhalt hängen: Was `auto` breit ist, ist bei jedem Spiel anders breit.
 * Genau dadurch sah die Liste gewürfelt aus, sobald das erste Spiel lief
 * (Auftraggeber, 24.09.2026) — dazu kam der Zählerhinweis, der die Knöpfe in
 * die nächste Rasterzeile schob. Feste Maße und Bruchteile ergeben bei
 * gleicher Kartenbreite überall dasselbe Bild.
 *
 * `minmax(0, …)` für Rolle, Parteien und Knöpfe: Ohne die Null als Untergrenze
 * weitet ein langer Name die Spalte auf und schiebt die folgenden aus der
 * Flucht.
 *
 *   Telefon       alles untereinander, in der Reihenfolge des Blicks.
 *   Tablet        oben Rolle · Stand · Zustand, darunter Parteien und Knöpfe.
 *   Rechner       eine Zeile, fünf Spalten.
 * -------------------------------------------------------------------------- */

@media (min-width: 700px) and (max-width: 1099px) {
  /* Auf dem Tablet reicht die Breite für drei Spalten, aber nicht für die
     Knöpfe daneben: Sie stünden untereinander und zögen die Zeile in die
     Länge. Also stehen oben die Angaben und darunter die Knöpfe quer. */
  .ms-spiel {
    grid-template-columns: minmax(0, 1fr) 92px 172px;
    grid-template-areas:
      "rolle    stand zustand"
      "parteien stand zustand"
      "tat      tat   tat";
    align-items: start;
    column-gap: var(--s3);
  }

  .ms-spiel-rolle { grid-area: rolle; }
  .ms-spiel-parteien { grid-area: parteien; }
  .ms-spiel-stand { grid-area: stand; align-self: center; }
  .ms-spiel-zustand { grid-area: zustand; }
  .ms-spiel-tat { grid-area: tat; margin-top: var(--s1); }
}

@media (min-width: 1100px) {
  .ms-spiel {
    grid-template-columns:
      minmax(0, 1.2fr) minmax(0, 2fr) 92px 152px minmax(0, 1.5fr);
    grid-template-areas: "rolle parteien stand zustand tat";
    align-items: start;
    column-gap: var(--s3);
  }

  .ms-spiel-rolle { grid-area: rolle; align-self: center; }
  .ms-spiel-parteien { grid-area: parteien; align-self: center; }
  .ms-spiel-stand { grid-area: stand; align-self: center; }
  .ms-spiel-zustand { grid-area: zustand; }
  .ms-spiel-tat { grid-area: tat; }
}

/* --- Spielplan von turnier.de ---------------------------------------- */

.ms-katalog { display: grid; gap: var(--s2); }

.ms-katalogzeile {
  display: grid;
  gap: var(--s2);
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface);
}

.ms-katalogzeile.erledigt { opacity: 0.7; }

@media (min-width: 900px) {
  .ms-katalogzeile {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

/* Der Hinweis auf eine Disqualifikation im Kader (UEBERGABE.md, 24.7).
   Er steht dort, wo die Aufstellung gesetzt wird — und sperrt nichts: Über den
   Einsatz entscheidet der Schiedsrichter, nicht die Anwendung. */
.ms-warnung {
  margin: 0;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--warn);
  border-radius: var(--r2);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Die DSQ-Marke am Namen. Dieselbe Gestalt wie im Turnierbaum; das Blatt der
   Anzeigen wird hier nicht mitgeladen. */
.dsq-marke {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0 0.35em;
  border-radius: var(--r1);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.03em;
  vertical-align: 0.08em;
}

/* Der nuLiga-Reiter (UEBERGABE.md, Abschnitt 13.15).
   ------------------------------------------------------------------------
   Eine fremde Begegnung steht **mit** im Spielplan — er ist bei nuLiga
   öffentlich, und einer, aus dem die Hälfte fehlt, ist keiner. Sie tritt nur
   zurück, damit die eigenen ins Auge fallen. Bewusst über die Deckkraft und
   nicht über eine blassere Farbe: Wer die Zeile liest, soll sie ganz lesen
   können. */
.nl-fremd {
    opacity: 0.55;
}

.nl-fremd:hover {
    opacity: 1;
}

/* Die Meldeliste einer Mannschaft (UEBERGABE.md, Abschnitt 13.15).
   ------------------------------------------------------------------------
   Vier schmale Spalten links, der Name rechts daneben. Die Zahlen stehen
   rechtsbündig und in gleicher Breite, damit der Blick eine Spalte
   hinunterlaufen kann — bei siebzig Zeilen ist das der ganze Zweck.

   Der Rahmen scrollt für sich: Auf einem Telefon ist die Tabelle breiter als
   das Gerät, und die Seite selbst darf deswegen nicht wandern. */
.ms-meldeliste-rahmen {
    overflow-x: auto;
}

.ms-meldeliste {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.ms-meldeliste th {
    padding: var(--s2);
    border-bottom: 1px solid var(--line);
    color: var(--ink-3);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.ms-meldeliste th:first-child,
.ms-meldeliste th:nth-child(2) {
    text-align: right;
}

.ms-meldeliste td {
    padding: var(--s2);
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.ms-meldeliste tbody tr:last-child td {
    border-bottom: 0;
}

.ms-meldeliste .zahl {
    width: 1%;
    text-align: right;
    white-space: nowrap;
    /* Ziffern gleicher Breite: Sonst tanzt „10“ neben „9“. */
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
}

.ms-meldeliste .eigenname {
    width: 100%;
}

/* Wo ein Spieler gemeldet ist — „2 · Herren“, „- · Damen“.
   ------------------------------------------------------------------------
   Der Kader aus nuLiga ist die ganze Mannschaftsmeldung des Vereins und kann
   fünfundsechzig Namen lang sein (UEBERGABE.md, Abschnitt 13.15). Erst diese
   Angabe macht die Liste brauchbar. Sie tritt zurück: Der Name wird gesucht,
   die Herkunft nur mitgelesen. */
.ms-herkunft {
    margin-left: var(--s2);
    font-size: 0.78em;
    color: var(--ink-3);
    white-space: nowrap;
}

/* Der Löschknopf in der Ecke einer Begegnungskarte.
   ------------------------------------------------------------------------
   Er liegt **über** der Auswahlfläche, die die ganze Karte einnimmt. Deshalb
   `position: absolute` und ein eigener Stapelplatz; ohne beides läge er
   darunter und wäre nicht zu treffen.

   Rot wird er erst beim Darüberfahren. Eine Liste von Begegnungen mit lauter
   roten Kreuzen sähe aus, als sei etwas nicht in Ordnung — und das Löschen
   ist der seltene Fall, nicht der gewöhnliche. */
.ms-karte {
    position: relative;
}

/* Die Statusmarke steht in derselben Ecke. Sie rückt nach links, sobald ein
   Löschknopf da ist — sonst liegen „ENTWURF“ und das Kreuz übereinander, und
   beides ist unleserlich. Nur dann: Wer nicht löschen darf, sieht keinen
   Knopf und braucht auch keinen Platz dafür. */
.ms-karte:has(.ms-karte-weg) .ms-karte-kopf {
    padding-right: 2rem;
}

/* **Rot** (Auftraggeber, 25.09.2026): Das Kreuz löscht, und Löschen ist in
   dieser Anwendung rot. Zurückgenommen im Ton, damit es die Karte nicht
   beherrscht — beim Überfahren wird es deutlich. */
.ms-karte-weg {
    position: absolute;
    top: var(--s2);
    right: var(--s2);
    z-index: 1;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.ms-karte-weg:hover,
.ms-karte-weg:focus-visible {
    background: var(--danger);
    color: #fff;
}

/* Die Zwischenüberschrift in der Meldeliste — „Herren“, „Damen“.
   ------------------------------------------------------------------------
   Sie trennt, ohne sich vorzudrängen: kein Rahmen, keine Fläche über die
   ganze Breite, nur ein Abstand darüber und etwas mehr Gewicht. Gesucht wird
   ein Name, nicht die Überschrift. */
.ms-meldeliste-gruppe th {
    padding-top: var(--s4);
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
    font-size: 0.82rem;
    text-transform: none;
}

.ms-meldeliste tbody:first-of-type .ms-meldeliste-gruppe th {
    padding-top: var(--s2);
}

/* Der Schiedsrichter eines Einzelspiels (UEBERGABE.md, Abschnitt 13.16).
   ------------------------------------------------------------------------
   Der Knopf trägt seinen Zustand: Wer die Liste überfliegt, sieht ohne
   Aufklappen, an welchen Feldern ein Schiedsrichter steht. Deshalb eine
   Farbe und nicht bloß ein Haken im Text — acht Zeilen liest man nicht,
   man überfliegt sie. */
.knopf.ms-schiri-an {
    background: var(--brand-soft);
    border-color: var(--brand-soft);
    color: var(--brand-ink);
}

.knopf.ms-schiri-an:hover:not(:disabled) {
    background: var(--brand-soft);
    color: var(--brand-ink);
}

/* Der aufgeklappte Kasten hängt sich unter die Zeile, über die volle Breite —
   wie der QR-Code. Aufgeklappt mitten hinein würde er die Feldauswahl und die
   Knöpfe daneben verschieben. */
.ms-schiri {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--s3);
    margin-top: var(--s3);
    padding-top: var(--s3);
    border-top: 1px solid var(--line);
}

/* --- Ligen und ihre Verbände (UEBERGABE.md, Abschnitt 61) ----------------- */

.ms-ligen {
  display: grid;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-liga {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  min-height: var(--touch);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface-2);
}

/* Der Ligname nimmt den Platz, der übrig ist — die Marke daneben ist kurz und
   soll nicht umbrechen, solange es nicht sein muss. */
.ms-liga-name {
  flex: 1 1 12rem;
  font-weight: 650;
}

.ms-liga .knopf { margin-left: auto; }

.ms-ligafelder {
  display: grid;
  gap: var(--s4);
}

@media (min-width: 620px) {
  /* Der Ligname ist lang, die Kürzel sind kurz — deshalb zwei Drittel zu
     einem Drittel und nicht zwei gleiche Spalten. */
  .ms-ligafelder { grid-template-columns: 2fr 1fr; }
}

/* --- Aufstellungsplanung (UEBERGABE.md, Abschnitt 62) --------------------- */

/* Der Bogen ist eine breite Tabelle: Name, je Disziplin eine Spalte, rechts
   vier schmale. Auf dem Telefon passt das nicht nebeneinander — deshalb
   scrollt er in sich selbst und nicht die ganze Seite. */
.ms-bogen-rahmen {
    overflow-x: auto;
}

.ms-bogen {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.ms-bogen th {
    padding: var(--s2);
    border-bottom: 1px solid var(--line);
    color: var(--ink-3);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.ms-bogen td {
    padding: var(--s2);
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.ms-bogen tbody tr:last-child td {
    border-bottom: 0;
}

.ms-bogen .zahl {
    width: 1%;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
}

/* Die Kästchenspalten sind so schmal wie ihr Inhalt und mittig — sonst
   stünden die Kreuze einer Disziplin nicht untereinander, und genau das
   liest man auf einem Aufstellungsbogen ab. */
.ms-bogen .ms-bogen-fach,
.ms-bogen .ms-bogen-haken {
    width: 1%;
    text-align: center;
    white-space: nowrap;
}

/* Die vier Angaben zum Spieler sind etwas anderes als die Disziplinen. Auf
   dem Papier trennt sie ein eigener Kasten; hier tut es eine Linie. */
.ms-bogen th.ms-bogen-haken:first-of-type,
.ms-bogen td.ms-bogen-haken:first-of-type {
    border-left: 2px solid var(--line);
}

.ms-bogen input[type="checkbox"] {
    /* Größer als die Vorgabe des Browsers: In der Halle wird mit dem Finger
       auf ein Tablet getippt, nicht mit der Maus gezielt. */
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
}

.ms-bogenblock + .ms-bogenblock {
    margin-top: var(--s4);
}

.ms-bogenblock h4 {
    margin: 0 0 var(--s2);
    font-size: 0.95rem;
}

.ms-gastzugang {
    display: grid;
    gap: var(--s3);
}

.ms-gast-qr {
    /* Der QR-Code steht für sich und wird nicht mitgedehnt: Ein verzerrter
       QR-Code wird nicht gelesen. */
    max-width: 200px;
}

.ms-gast-link {
    display: block;
    overflow-wrap: anywhere;
    font-size: 0.82rem;
    color: var(--ink-3);
}

/* Wer nicht Stammspieler dieser Mannschaft ist, trägt seine Herkunft neben
   dem Namen — „II · Herren“. Das ist die Frage, an der eine Aufstellung
   scheitern kann, und sie gehört an den Namen und nicht in eine Fußnote. */
.ms-hochgezogen {
    margin-left: var(--s2);
    padding: 1px var(--s2);
    border-radius: var(--r1);
    background: var(--surface-3, var(--surface-2));
    color: var(--ink-3);
    font-size: 0.72rem;
    white-space: nowrap;
}

.ms-dazuholen {
    display: grid;
    gap: var(--s2);
    margin-top: var(--s3);
    padding-top: var(--s3);
    border-top: 1px solid var(--line);
}

/* Die Auswahl nimmt den Platz, der übrig ist: In ihr stehen Namen samt
   Herkunft, im Textfeld daneben nur ein Name. */
.ms-dazuholen select { flex: 1 1 14rem; }
.ms-dazuholen input[type="text"] { flex: 1 1 10rem; }

/* ==========================================================================
   Die Tickerseite einer Begegnung (UEBERGABE.md, Abschnitt 13.17)
   --------------------------------------------------------------------------
   Für das Telefon in der Halle gebaut: eine Spalte, große Flächen zum
   Antippen, und **die Farbe sagt den Zustand**. Wer den QR-Code gerade
   gescannt hat, soll ohne Erklärung sehen, welche Spiele laufen, welche er
   starten kann und welche vorbei sind.
   ========================================================================== */

.tk-seite .meldekarte {
    width: min(560px, 100%);
}

/* Oben der Stand der Begegnung — groß, weil man ihn beim Hinsehen sucht. */
.tk-begegnung {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--s3);
    margin: var(--s2) 0 var(--s4);
    padding: var(--s4);
    border-radius: var(--r3);
    background: var(--brand);
    color: var(--on-brand);
}

.tk-team {
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.tk-team:last-child {
    text-align: right;
}

.tk-gesamt {
    display: flex;
    align-items: baseline;
    gap: var(--s1);
    font-size: 2.2rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.tk-gesamt span {
    opacity: 0.7;
}

.tk-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s3);
}

/* Eine Karte je Einzelspiel. Der linke Rand trägt die Zustandsfarbe — so ist
   die Liste auch im Vorbeigehen lesbar. */
.tk-spiel {
    display: grid;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    border: 1px solid var(--line);
    border-left: 5px solid var(--line);
    border-radius: var(--r2);
    background: var(--surface);
}

.tk-spiel.laeuft { border-left-color: var(--brand); }
.tk-spiel.bereit { border-left-color: var(--warn); }
.tk-spiel.fertig { opacity: 0.72; }

.tk-kopf {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
}

.tk-nr {
    display: inline-grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tk-marke {
    margin-left: auto;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.tk-marke.laeuft { background: var(--brand-soft); color: var(--brand-ink); }
.tk-marke.bereit { background: var(--warn-soft); color: var(--warn); }

.tk-mitte {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
}

.tk-parteien {
    display: grid;
    gap: 2px;
    min-width: 0;
    font-size: 0.95rem;
}

.tk-parteien > div {
    overflow-wrap: anywhere;
}

.tk-parteien .sieger {
    font-weight: 700;
}

.tk-leer {
    color: var(--ink-3);
}

.tk-stand {
    display: grid;
    justify-items: end;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tk-stand b {
    font-size: 1.6rem;
    line-height: 1;
}

.tk-stand small {
    color: var(--ink-3);
    font-size: 0.78rem;
}

/* Die Knöpfe sind so breit wie die Karte: Ein Daumen trifft sie auch im
   Stehen, mit dem Schläger unter dem Arm. */
.tk-knopf {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    text-decoration: none;
}

.tk-feldwahl {
    display: grid;
    gap: var(--s2);
}

.tk-feldwahl p {
    margin: 0;
    font-weight: 600;
}

.tk-felder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: var(--s2);
}

.tk-feld {
    min-height: 52px;
    justify-content: center;
    font-size: 1.05rem;
}

.tk-fuss {
    margin-top: var(--s4);
}

/* Die Verwaltung des Links im Reiter „Spiele“ — dieselbe Form wie beim
   Gastbogen, nur mit „Teilen“: Am Telefon geht der Link so in die
   Vereinsgruppe, ohne Umweg über die Zwischenablage. */
.ms-tickerzugang {
    display: grid;
    gap: var(--s3);
}

.ms-tickerzugang .grosser-code {
    font-size: clamp(1.1rem, 3.2vw, 1.9rem);
    overflow-wrap: anywhere;
}

.ms-ticker-qr svg {
    width: min(240px, 70vw);
    height: auto;
}

/* ==========================================================================
   Eigene Mannschaften (UEBERGABE.md, Abschnitt 13.18)
   ========================================================================== */

.mm-angaben {
    display: grid;
    gap: var(--s3) var(--s4);
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* Die Spielertabelle scrollt in sich: Am Telefon ist sie breiter als das
   Gerät, und die Seite selbst soll deswegen nicht wandern. */
.mm-tabellenrahmen {
    overflow-x: auto;
}

.mm-spieler {
    width: 100%;
    /* Lieber seitlich scrollen als die Namen zusammendrücken: Unter dieser
       Breite schneidet die Tabelle „Neureuther“ nach sechs Buchstaben ab. */
    min-width: 720px;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.mm-spieler th {
    padding: var(--s2);
    border-bottom: 1px solid var(--line);
    color: var(--ink-3);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.mm-spieler td {
    padding: 3px var(--s1);
}

.mm-spieler input,
.mm-spieler select {
    width: 100%;
    min-width: 0;
}

/* Die Ranglistenfelder sind schmal — drei Ziffern reichen. Die Namen
   bekommen, was übrig bleibt. */
.mm-spieler td:nth-child(4),
.mm-spieler td:nth-child(5) {
    width: 4.5rem;
}

.mm-spieler td:nth-child(3) {
    width: 6.5rem;
}

.mm-spieler td:nth-child(6) {
    width: 8rem;
}

.mm-spieler td:last-child {
    width: 2.5rem;
}

.mm-einfuegen {
    display: grid;
    gap: var(--s2);
}

.mm-einfuegen[open] textarea {
    width: 100%;
    margin: var(--s2) 0;
}

/* Unter einem Namensfeld im Anlegeformular: die Auswahl aus den eigenen
   Mannschaften, klein und zurückhaltend — sie ist eine Abkürzung. */
[data-tat='eigene-mannschaft'] {
    margin-top: var(--s2);
    font-size: 0.9rem;
}

.ms-aus-mannschaft {
    margin-top: var(--s2);
}

/* Legende der Kurzzeichen E, A, D, B-Deu unter dem Aufstellungsbogen. */
.ms-legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-3);
}
.ms-legende > div { display: flex; gap: 0.35em; }
.ms-legende dt { font-weight: 600; color: var(--ink-2); }
.ms-legende dd { margin: 0; }

/* Die Hallen des Vereins im Mannschaftseditor (Abschnitt 13.20). */
.mm-hallenliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s2);
}
.mm-hallenliste input { flex: 1; min-width: 0; }
.mm-hallenliste .reihe { flex-wrap: nowrap; }
/* Die Hallenwahl steht über dem Textfeld für „Anderer Spielort …“. */
[data-hallenwahl]:not([hidden]) + input:not([hidden]) { margin-top: var(--s2); }

/* Tickerseite: ein Spiel, das schon ein anderes Gerät zählt (13.21). */
.tk-belegt {
  margin: 0;
  padding: var(--s2) var(--s3);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-2);
  text-align: center;
  font-weight: 600;
}
/* Reiter „Spiele“: wer gerade zählt, und der Notausgang. */
.ms-zaehler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  font-size: 0.9rem;
  color: var(--ink-2);
}

/* Begegnungen: der Fuß einer beendeten Karte und das Archiv (13.23). */
.ms-karte-fuss {
  display: flex;
  justify-content: flex-end;
  padding: 0 var(--s3) var(--s2);
}
.ms-archiv > summary {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  cursor: pointer;
  list-style: revert;
}
.ms-archiv[open] > summary { margin-bottom: var(--s4); }
.ms-archivfilter {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.ms-archivliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s2);
}
.ms-archivzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s3);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r2);
}
.ms-archiv-oeffnen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--s3);
  flex: 1 1 260px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ms-archiv-oeffnen small { grid-column: 1 / -1; }
.ms-archiv-loeschen:hover,
.ms-archiv-loeschen:focus-visible { background: var(--danger-soft); color: var(--danger); }

/* Ein Spieler von Hand: Nachname, Vorname, Herr/Dame (13.25). Nebeneinander,
   wo Platz ist, am Telefon untereinander. */
.ms-namensformular {
  display: grid;
  gap: var(--s2);
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.9fr) auto;
  align-items: center;
}
@media (max-width: 640px) {
  .ms-namensformular { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ms-namensformular button { grid-column: 1 / -1; }
}
/* Die Ranglistenspalte „5/3“ statt der laufenden Nummer. */
.ms-rangspalte { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Tickerseite: Feld und Schiedsrichter je Spiel (13.27). */
.tk-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}
.tk-feldmarke {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-weight: 700;
}
.tk-feldmarke.leer { background: var(--surface-2); color: var(--ink-3); font-weight: 600; }
.tk-feldwahl-klein select { min-height: 40px; font-weight: 600; }
.tk-schiriknopf {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.tk-schiriknopf.an { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.tk-schiri {
  display: grid;
  gap: var(--s3);
  padding: var(--s3);
  border-radius: 10px;
  background: var(--surface-2);
}
.tk-schalter { display: flex; gap: var(--s3); align-items: flex-start; cursor: pointer; }
.tk-schalter input { width: 24px; height: 24px; margin-top: 2px; flex: none; }
.tk-schalter small { display: block; color: var(--ink-3); }
.tk-schiri-neu { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }

/* Reiter „Spiele“: die Schiedsrichter der Begegnung (13.27). */
.ms-schiriliste {
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r2);
}
.ms-schiriliste > summary { cursor: pointer; font-weight: 600; }
.ms-schiriliste > summary .zusatztext { font-weight: 400; margin-left: var(--s2); }
.ms-schiriliste[open] > summary { margin-bottom: var(--s3); }
.ms-schiri-chips { list-style: none; margin: 0 0 var(--s3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.ms-schiri-chips li {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px 2px 12px; border-radius: 999px; background: var(--surface-2);
}
.ms-schiri-chips .ms-karte-weg { position: static; }
.ms-schiri-neu { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }

/* Die Vereinsrangliste einer Seite (13.35). Dieselbe Form wie die
   Schiedsrichterliste: ein eingeklappter Kasten, der nur aufgeht, wenn jemand
   wirklich etwas wissen will — der Abruf geht nach draußen. */
.ms-ranglistenwahl {
  margin-bottom: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r2);
}
.ms-ranglistenwahl > summary { cursor: pointer; font-weight: 600; }
.ms-ranglistenwahl[open] > summary { margin-bottom: var(--s3); }
.ms-ranglisten { margin: 0 0 var(--s3); padding-left: var(--s4); }

/* Mitzählen-App: der Hinweis, wie man sie auf den Startbildschirm legt (13.28). */
.tk-install {
  display: grid;
  gap: var(--s2);
  margin-bottom: var(--s4);
  padding: var(--s3);
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand-ink);
}
.tickerapp { min-height: 100dvh; }

/* Spielordnung wechseln (13.29). */
.ms-spielordnung { align-items: center; justify-content: space-between; }
.ms-sammel > summary { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: baseline; cursor: pointer; }
.ms-sammel[open] > summary { margin-bottom: var(--s4); }

/* Der Termin auf der Begegnungskarte (UEBERGABE.md, Abschnitt 108). Kräftiger
   als die Zeile mit Liga und Spielordnung darunter: In der Liste sucht man
   zuerst den Tag, dann alles andere. */
.ms-karte-termin {
  margin: var(--s1) 0 0;
  color: var(--ink-2);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Ohne Termin: dieselbe Zeile, nur zurückgenommen — es fehlt etwas, aber es
   ist kein Fehler. */
.ms-karte-termin.offen { color: var(--ink-3); font-weight: 500; font-style: italic; }

/* Fremde Begegnungen, Helferzugang, Hauptsteuerung (13.32). */
.ms-fremde > summary,
.ms-sammel > summary { cursor: pointer; }
.ms-fremde > summary { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: baseline; }
.ms-fremde[open] > summary { margin-bottom: var(--s4); }
.ms-helfer,
.ms-hauptsteuerung {
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r2);
}
.ms-hauptsteuerung { border-color: var(--super); }
.ms-helfer h4,
.ms-hauptsteuerung h4 { margin: 0; }

/* Begegnungen anderer Vereine in derselben Liste (13.32): ausgegraut,
   solange nur zugesehen werden darf — mit bewilligtem Helferzugang sehen sie
   aus wie die eigenen, denn dann darf man auch etwas tun. */
.ms-karte.fremd {
  border-style: dashed;
  background: var(--surface-2);
}
.ms-karte.fremd .ms-karte-flaeche { opacity: 0.68; }
.ms-karte.fremd .ms-karte-flaeche:hover { opacity: 0.85; }
.ms-karte.fremd.helfer { border-style: solid; background: var(--surface); }
.ms-karte.fremd.helfer .ms-karte-flaeche { opacity: 1; }

/* Eine offene Helferanfrage an einer eigenen Begegnung (13.32): Schlüssel und
   ein anderer Rahmen — damit man sie sieht, ohne die Karte zu öffnen. */
.ms-karte.anfrage {
  border-color: var(--warn);
  box-shadow: inset 0 0 0 1px var(--warn);
}
.ms-anfragezeichen { font-size: 1.05em; }