/* ===========================================================================
   Sportwart-Bereich — UEBERGABE.md, Abschnitt 30

   Der Bereich **erbt die Dichte des Turnierbetriebs**: Reiterleiste, Karten,
   Tabellen, Zeilenaktionen und der Umbau zu Karten auf schmalen Geräten
   stehen bereits in turnierbetrieb.css und werden hier nicht wiederholt. Was
   hier steht, sind die Ergänzungen — alle mit dem Vorsatz `.sw-`.

   Alle Farben kommen aus den Variablen in app.css; hier steht kein einziger
   Farbwert. Damit funktioniert der Bereich in hell und dunkel, ohne dass es
   zwei Fassungen gäbe (Abschnitt 30.13: „Kein eigener Look für diesen
   Bereich“).

   Zwei Dinge sind dem Bereich eigen und rechtfertigen eigenes CSS:

     **Der Zeitstrahl.** Er ist am Telefon eine Liste mit einer Trennmarke
     „Heute“ und wird erst ab 1000 Pixeln zweiseitig. Eine Auszeichnung, zwei
     Setzweisen — nicht zwei Fassungen, die auseinanderlaufen können.

     **Das Brett der Einteilung.** Staffeln nebeneinander, Mannschaften darin,
     und beides muss mit dem Finger genauso gehen wie mit der Maus.
   =========================================================================== */


/* --- Kopfzeile: die Saisonwahl --------------------------------------------
   Sie steht in **jedem** Reiter oben, weil sie der gemeinsame Bezug von
   Rating, Dummy-Liste und Ranglistenprüfung ist.
   -------------------------------------------------------------------------- */

.sw-saisonwahl {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.sw-saisonwahl select {
  min-height: var(--touch);
  padding: 0 var(--s3);
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  background: var(--surface);
  color: var(--ink);
  font-weight: 650;
}


/* --- Kennzahlen ------------------------------------------------------------
   Drei bis vier Zahlen, die den Überblick tragen. Auf 360 Pixeln stehen sie
   zu zweit nebeneinander statt zu viert — vier Zahlen in einer Reihe wären
   dort je 80 Pixel breit und unleserlich.
   -------------------------------------------------------------------------- */

.sw-kennzahlen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s5);
}

@media (min-width: 700px) {
  .sw-kennzahlen { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

.sw-kennzahl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface);
}

.sw-kennzahl.warnung {
  border-color: var(--warn);
  background: var(--warn-soft);
}

.sw-kennzahl.leer { opacity: 0.7; }

.sw-kennzahl-wert {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.sw-kennzahlen.klein .sw-kennzahl { padding: var(--s3); }
.sw-kennzahlen.klein .sw-kennzahl-wert { font-size: 1.2rem; }

.sw-kennzahl-text {
  color: var(--ink-3);
  font-size: 0.8rem;
  font-weight: 600;
}


/* --- Filterleisten und Formularreihen -------------------------------------- */

.sw-filter {
  display: flex;
  gap: var(--s3);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}

.sw-suchfeld { flex: 1 1 200px; }

.sw-formreihe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3);
  align-items: end;
}

@media (min-width: 700px) {
  .sw-formreihe { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

.sw-zahlfeld {
  width: 100%;
  min-width: 6ch;
  font-variant-numeric: tabular-nums;
  text-align: right;
}


/* --- Marken ---------------------------------------------------------------
   Kleine Schilder für einen Zustand. Bewusst nicht als Farbe allein: Wer
   Farben schlecht unterscheidet, liest den Text.
   -------------------------------------------------------------------------- */

.sw-marke {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s2);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 650;
  white-space: nowrap;
}

.sw-marke.aktiv     { background: var(--brand-soft); color: var(--brand-ink); }
.sw-marke.gleich    { background: var(--st-done-soft); color: var(--st-done); }
.sw-marke.attest    { background: var(--st-ready-soft); color: var(--st-ready); }
.sw-marke.wechsel   { background: var(--warn-soft); color: var(--warn); }
.sw-marke.vorlaeufig{ background: var(--warn-soft); color: var(--warn); }
.sw-marke.fehlt     { background: var(--surface-3); color: var(--ink-3); }
.sw-marke.zuhoch    { background: var(--danger-soft); color: var(--danger); }
.sw-marke.zutief    { background: var(--st-ready-soft); color: var(--st-ready); }
.sw-marke.laeuft    { background: var(--st-live-soft); color: var(--st-live); }


/* ===========================================================================
   Der Zeitstrahl (Abschnitt 30.4)

   **Eine Auszeichnung, zwei Setzweisen.** Schmal ist es eine Liste mit einer
   Trennmarke; ab 1000 Pixeln liegen Vergangenheit und Zukunft links und
   rechts einer Mittellinie. Zwei Spalten auf 375 Pixeln sind keine gute Idee
   — dort bleibt es die Liste.
   =========================================================================== */

.sw-strahl {
  position: relative;
  margin-bottom: var(--s6);
}

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

.sw-heute {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s5) 0;
  color: var(--brand-ink);
  font-weight: 700;
  font-size: 0.85rem;
}

.sw-heute::before,
.sw-heute::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
}

.sw-punkt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  border-radius: var(--r2);
  background: var(--surface);
}

.sw-punkt.vergangen { opacity: 0.82; }
.sw-punkt.frist { border-left-color: var(--gold); }
.sw-punkt.ueberfaellig {
  border-left-color: var(--danger);
  background: var(--danger-soft);
}
.sw-punkt.erledigt { opacity: 0.6; }
.sw-punkt.erledigt .sw-punkt-kopf strong { text-decoration: line-through; }

/* Je näher an heute, desto größer der Punkt — vier Stufen, keine stufenlose
   Rechnung: Zwei Pixel Unterschied sieht niemand. */
.sw-punkt-marke {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 0.7rem;
  line-height: 1;
}

.sw-punkt.naehe-nah    .sw-punkt-marke { width: 34px; height: 34px; font-size: 1rem;
                                         background: var(--brand); color: var(--on-brand); }
.sw-punkt.naehe-mittel .sw-punkt-marke { width: 28px; height: 28px; font-size: 0.85rem;
                                         background: var(--brand-soft); color: var(--brand-ink); }
.sw-punkt.naehe-fern   .sw-punkt-marke { width: 24px; height: 24px; }
.sw-punkt.ueberfaellig .sw-punkt-marke { background: var(--danger); color: var(--on-danger); }

.sw-punkt-inhalt { min-width: 0; }

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

.sw-fristmarke {
  padding: 1px var(--s2);
  border-radius: var(--r-pill);
  background: var(--gold-bright);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
}

.sw-notiz {
  margin: var(--s2) 0 0;
  color: var(--ink-2);
  font-size: 0.9rem;
}

.sw-punkt-aktionen {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

.sw-erledigte {
  margin-top: var(--s5);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface-2);
}

.sw-erledigte summary { font-weight: 650; cursor: pointer; }
.sw-erledigte .sw-punkte { margin-top: var(--s4); }

.sw-fuss { margin-top: var(--s5); }

.sw-terminform { margin-bottom: var(--s5); }

/* Ab hier hat der Zeitstrahl Platz für zwei Seiten. Die Auszeichnung bleibt
   dieselbe Liste — es verschiebt sich nur, wo die Karten liegen. */
@media (min-width: 1000px) {
  .sw-strahl::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: var(--line-2);
    border-radius: 2px;
  }

  .sw-punkte { position: relative; }
  .sw-punkte.vergangenheit .sw-punkt { margin-right: calc(50% + var(--s5)); }
  .sw-punkte.zukunft .sw-punkt { margin-left: calc(50% + var(--s5)); }

  .sw-heute { position: relative; z-index: 1; }
  .sw-heute span {
    padding: var(--s2) var(--s4);
    border-radius: var(--r-pill);
    background: var(--brand);
    color: var(--on-brand);
  }

  /* In der aufgeklappten Liste der erledigten Punkte gibt es keine
     Mittellinie — dort bleibt es bei der Liste. */
  .sw-erledigte .sw-punkt { margin: 0; }
}


/* ===========================================================================
   Rating und lange Tabellen (Abschnitt 30.5, 30.13)

   Diese Tabellen werden **überschlagen, nicht gelesen**: Wer auf Platz 3
   steht und wie weit er vom Zweiten entfernt ist. Deshalb rollen sie am
   Telefon waagerecht in ihrem eigenen Kasten, statt zu Karten zu zerfallen —
   in Karten zerfällt genau dieser Vergleich. Die Seite selbst rollt nie
   waagerecht (ARCHITEKTUR.md, Abschnitt 1).
   =========================================================================== */

@media (max-width: 767px) {
  /* Die Umbauregeln aus turnierbetrieb.css hier gezielt zurücknehmen. */
  .sw-rolltabelle .tb-tabelle,
  .sw-rolltabelle .tb-tabelle tbody,
  .sw-rolltabelle .tb-tabelle tr,
  .sw-rolltabelle .tb-tabelle td { display: revert; width: auto; }

  .sw-rolltabelle .tb-tabelle { display: table; width: 100%; min-width: 640px; }
  .sw-rolltabelle .tb-tabelle thead { display: table-header-group; }
  .sw-rolltabelle .tb-tabelle tr { display: table-row; margin: 0; padding: 0;
                                   border: 0; border-radius: 0; background: none; }
  .sw-rolltabelle .tb-tabelle td {
    display: table-cell;
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--line);
  }
  .sw-rolltabelle .tb-tabelle td::before { content: none; }
  .sw-rolltabelle { -webkit-overflow-scrolling: touch; }
}

.sw-ratingtabelle .zellinhalt { display: block; }

/* --- Ansichtswahl innerhalb eines Reiters ---------------------------------
   Eine Leiste aus Knöpfen und keine zweite Reiterleiste: Die des Sportwarts
   steht schon darüber, und zwei gleich aussehende Leisten übereinander sind
   eine Zumutung. Auf schmalen Geräten rollt sie waagerecht — die Seite selbst
   tut das nie (ARCHITEKTUR.md, Abschnitt 1).
   -------------------------------------------------------------------------- */

.sw-ansichten {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}

@media (max-width: 560px) {
  .sw-ansichten {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* Damit der letzte Knopf nicht am Rand klebt und aussieht, als wäre die
       Liste zu Ende. */
    padding-right: var(--s4);
  }
  .sw-ansichten::-webkit-scrollbar { display: none; }
  .sw-ansichten .knopf { flex: none; }
}


/* --- Der aufgeklappte Verlauf --------------------------------------------
   Er steht **in** der Tabelle, unmittelbar unter der Zeile des Spielers. Wer
   bei Zeile 137 auf „Verlauf“ drückt, findet ihn sonst erst nach fünfhundert
   Zeilen wieder — und weiß dann nicht mehr sicher, zu wem er gehört.
   -------------------------------------------------------------------------- */

/* Die Zeile, aus der er stammt, bleibt sichtbar hervorgehoben: Beim Rollen
   durch einen langen Verlauf ist sonst nicht mehr zu sehen, wessen er ist. */
.sw-ratingtabelle tr.sw-offen > td {
  background: var(--brand-soft);
  border-bottom: 0;
}

.sw-verlaufzeile > td {
  padding: 0 0 var(--s4);
  background: var(--brand-soft);
}

.sw-verlaufzeile .sw-verlauf {
  margin: 0 var(--s3);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface);
}

/* Die innere Tabelle erbt sonst die Zellenabstände der äußeren und wirkt
   dadurch luftiger als die Zeilen darüber. */
.sw-verlaufzeile .tb-tabelle { font-size: 0.85rem; }

@media (max-width: 767px) {
  /* In der rollenden Tabelle ist eine Zelle über die volle Breite nötig,
     sonst läuft der Verlauf in der ersten Spalte zusammen. */
  .sw-rolltabelle .sw-verlaufzeile > td { display: table-cell; }
  .sw-verlaufzeile .sw-verlauf { margin: 0; }
}

.sw-verlauf {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

.sw-zuhoch td { background: var(--danger-soft); }

/* Der Zugewinn eines Spiels und sein Gegenteil. Das Vorzeichen steht davor,
   die Farbe kommt dazu — nicht statt seiner: Wer Farben schlecht
   unterscheidet, liest das Plus. */
.sw-plus  { color: var(--brand-ink); font-weight: 650; }
.sw-minus { color: var(--danger); font-weight: 650; }

/* Die fertige Rechnung aus dem Kern — leiser als die Zahlen daneben und in
   einer Schrift mit gleich breiten Zeichen, damit die Faktoren untereinander
   stehen. */
.sw-rechnung {
  color: var(--ink-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  white-space: nowrap;
}


/* --- Datenpflege -----------------------------------------------------------
   Selten gebraucht, deshalb eingeklappt (Abschnitt 30.5). Wer sie sucht,
   sucht sie gezielt; wer sie nicht sucht, stolpert nicht darüber.
   -------------------------------------------------------------------------- */

.sw-datenpflege summary {
  cursor: pointer;
  padding: var(--s2) 0;
}

.sw-pflegeraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s3);
}

.sw-pflegekarte {
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface-2);
}

.sw-pflegekarte h4 { margin: 0 0 var(--s3); font-size: 0.9rem; }

/* Ein Dateifeld ist auf jedem Betriebssystem anders breit. Es bekommt hier
   die volle Breite, damit die Karte nicht je nach Gerät anders aussieht. */
.sw-datei { width: 100%; font-size: 0.85rem; }

.sw-datei-knopf { position: relative; display: inline-block; }
.sw-datei-knopf .sw-datei {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}


/* ===========================================================================
   Dummy-Spieler und Atteste (Abschnitt 30.6)
   =========================================================================== */

/* Die Kulanzregel steht **wörtlich** so auf dem PDF. Sie ist mit dem
   Sportwart abgestimmt und wird nicht umformuliert — hier bekommt sie den
   Platz, der ihr zusteht: unter der Liste, lesbar, nicht kleingedruckt. */
.sw-kulanz {
  margin-top: var(--s5);
  padding: var(--s4);
  border-left: 3px solid var(--gold);
  border-radius: var(--r1);
  background: var(--surface-2);
  font-size: 0.9rem;
}

.sw-kulanz p { margin: var(--s2) 0 0; color: var(--ink-2); }

/* Elf Spalten sind viel. Damit die Tabelle auf einem 1280er Bildschirm
   **ganz** hineinpasst und nicht schon dort rollen muss, dürfen ihre
   Überschriften umbrechen — anders als sonst, wo sie einzeilig bleiben. Die
   Alternative wären Abkürzungen wie „Begegn.“, und die liest niemand gern.
   Rollen kann sie trotzdem, wenn der Platz doch nicht reicht. */
.sw-dummytabelle th {
  white-space: normal;
  line-height: 1.25;
}

/* Die beiden Zeilenknöpfe untereinander statt nebeneinander: Nebeneinander
   fordern sie zweihundert Pixel für eine Spalte, die am rechten Rand liegt
   und deshalb als Erstes aus dem Bild rutscht. */
.sw-dummytabelle .tb-zeilenaktionen { flex-direction: column; align-items: stretch; }

/* Der Schrägstrich zwischen zwei Zahlen einer Spalte — leiser als die Zahlen
   selbst, damit das Paar als Paar gelesen wird und nicht als drei Zeichen. */
.sw-trenner { color: var(--ink-3); padding: 0 2px; }

@media (max-width: 767px) {
  .sw-dummytabelle .tb-zeilenaktionen { flex-direction: row; }

  /* In der Karte tragen die beiden Zahlenspalten die längsten
     Beschriftungen. Ihnen etwas mehr Platz zu geben ist billiger, als die
     Beschriftung abzukürzen, bis sie nichts mehr sagt. */
  .sw-dummytabelle td[data-spalte] { grid-template-columns: 46% minmax(0, 1fr); }
}

.sw-anhaenge {
  margin: var(--s2) 0 0;
  padding-left: var(--s5);
  font-size: 0.9rem;
}

.sw-anhaenge li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}


/* ===========================================================================
   Mannschaftseinteilung (Abschnitt 30.7)

   Das Brett. Staffeln nebeneinander, sobald Platz ist; darunter untereinander.
   =========================================================================== */

.sw-stufe { margin-bottom: var(--s6); }

.sw-stufe-titel {
  margin: 0 0 var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
}

.sw-staffelraster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
}

@media (min-width: 700px) {
  /* `auto-fill` und **nicht** `auto-fit`: Eine Stufe mit einer einzigen
     Staffel — die Rheinland-Pfalz-Liga etwa — bekäme mit `auto-fit` die
     ganze Breite und sähe damit wichtiger aus als die Bezirksliga mit ihren
     drei Staffeln daneben. `auto-fill` legt die leeren Spuren an und lässt
     den einen Kasten in seiner Spalte stehen. */
  .sw-staffelraster { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

.sw-staffel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface-2);
}

.sw-offen {
  margin-bottom: var(--s6);
  border-color: var(--warn);
  background: var(--warn-soft);
}

.sw-staffel-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
}

.sw-staffel-kopf h4 { margin: 0; font-size: 0.95rem; }

.sw-anzahl {
  padding: 1px var(--s2);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sw-staffelliste {
  display: grid;
  gap: var(--s2);
  margin: 0;
  padding: var(--s3);
  list-style: none;
  /* Damit ein leerer Kasten ein sichtbares Ziel bleibt: Ohne Mindesthöhe
     wäre er beim Ziehen ein Strich. */
  min-height: 64px;
}

.sw-staffelliste.ziel-aktiv {
  outline: 2px dashed var(--brand);
  outline-offset: -4px;
  border-radius: var(--r1);
}

.sw-leerfach {
  display: grid;
  place-items: center;
  padding: var(--s4);
  border: 1px dashed var(--line-2);
  border-radius: var(--r1);
}

.sw-mannschaft {
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  background: var(--surface);
}

.sw-mannschaft.zieht { opacity: 0.5; }
.sw-mannschaft.abweichend { border-left: 3px solid var(--warn); }

.sw-mannschaft-kopf {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  flex-wrap: wrap;
}

.sw-wunsch {
  margin: var(--s1) 0 0;
  color: var(--ink-3);
  font-size: 0.8rem;
}

.sw-wunsch.abweichend { color: var(--warn); font-weight: 600; }

/* **Der Weg ohne Ziehen** (Abschnitt 30.7). Ein echtes `<select>`: Auf dem
   Telefon öffnet das Betriebssystem seine eigene Auswahl — mit
   Fingerflächen, die immer stimmen, und einer Suche in langen Listen. Nichts
   Selbstgebautes kommt dagegen an. */
.sw-verschieben { display: block; margin-top: var(--s2); }

.sw-verschieben select {
  width: 100%;
  min-height: var(--touch);
  padding: 0 var(--s3);
  border: 1px solid var(--line-2);
  border-radius: var(--r1);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 0.85rem;
}


/* ===========================================================================
   Zugang und Abgleich (Abschnitt 30.9)
   =========================================================================== */

.sw-zugangsstand {
  padding: var(--s3) var(--s4);
  border-radius: var(--r2);
  font-size: 0.9rem;
  font-weight: 600;
}

.sw-zugangsstand.gut { background: var(--brand-soft); color: var(--brand-ink); }
.sw-zugangsstand.fehlt { background: var(--warn-soft); color: var(--warn); }

.sw-stellschrauben summary { cursor: pointer; font-weight: 600; }

.sw-abgleichstand {
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface-2);
}

.sw-abgleichstand.laeuft { border-color: var(--st-live); background: var(--st-live-soft); }
.sw-abgleichstand.fehler { border-color: var(--danger); background: var(--danger-soft); }

.sw-abgleich-kopf {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s2);
}

/* Ein Lebenszeichen, kein Fortschritt. Der Punkt schlägt, solange gearbeitet
   wird — er sagt nicht, wie weit es ist, und will das auch nicht. */
.sw-puls {
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--st-live);
  animation: sw-pulsschlag 1.4s ease-in-out infinite;
}

@keyframes sw-pulsschlag {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

/* Wer Bewegung auf dem Bildschirm nicht verträgt, bekommt einen ruhigen
   Punkt. Die Aussage bleibt dieselbe. */
@media (prefers-reduced-motion: reduce) {
  .sw-puls { animation: none; opacity: 1; }
}

.sw-abbruchhinweis {
  margin: var(--s3) 0 0;
  color: var(--warn);
  font-size: 0.85rem;
  font-weight: 600;
}

.sw-abgleichmeldung,
.sw-laufmeldung {
  display: block;
  color: var(--ink-2);
  font-size: 0.82rem;
  /* Die Meldung eines Laufs ist eine lange Kette aus Zählungen. Sie darf
     umbrechen; abgeschnitten wäre sie wertlos. */
  overflow-wrap: anywhere;
}


/* ===========================================================================
   Testbereich (Abschnitt 30.10)

   Bewusst schmucklos: Wer hier arbeitet, will Pfade und rohe Antworten sehen.
   =========================================================================== */

.sw-pfadliste {
  max-height: 360px;
  overflow-y: auto;
  margin: var(--s3) 0 0;
  padding-left: var(--s5);
  font-size: 0.85rem;
}

/* Pfad und Erklärung untereinander, nicht nebeneinander: Die Pfade sind
   lang, und nebeneinander bräche jede zweite Zeile an einer anderen Stelle. */
.sw-pfadliste li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--s3);
}

.sw-pfadknopf {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.sw-rohantwort {
  max-height: 60vh;
  overflow: auto;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface-2);
  color: var(--ink-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
}


/* ===========================================================================
   Verbandshierarchie und geliehene Zugänge — UEBERGABE.md, Abschnitt 31
   =========================================================================== */

/* Die eigene Kennung. Sie steht groß da, weil an ihr hängt, welche
   personenbezogenen Daten eine Organisation zu sehen bekommt — ein
   Zahlendreher gäbe einem Verein die Dummy-Liste eines anderen. */
.sw-kennungsstand {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  border-radius: var(--r2);
  background: var(--surface-2);
}

.sw-kennungsstand strong {
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}

.sw-kennungsstand.bestaetigt { border-left-color: var(--brand); }
.sw-kennungsstand.beantragt  { border-left-color: var(--warn); }
.sw-kennungsstand.abgelehnt  { border-left-color: var(--danger); }

/* Das Kreuz an einer erteilten Freigabe. Es sitzt **in** der Marke, weil es
   zu ihr gehört — und nicht daneben, wo es wie ein eigener Knopf aussähe. */
.sw-marke-weg {
  margin-left: 4px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.sw-marke-weg:hover { opacity: 1; }

.sw-zusatzfreigabe {
  min-height: var(--touch);
  max-width: 100%;
  padding: 0 var(--s2);
  border: 1px solid var(--line-2);
  border-radius: var(--r1);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.85rem;
}

/* Eine feste Abfrage in der Vereinsansicht. Sie ist eine Karte und keine
   Tabellenzeile: Es sind wenige, und jede trägt ihr eigenes Ergebnis unter
   sich. */
.sw-abfrage { gap: var(--s3); }

/* „Landesverband: Badmintonverband Rheinhessen-Pfalz e.V.“ ist lang, und auf
   360 Pixeln lief es aus der Karte heraus. Marken sind sonst einzeilig — hier
   darf die eine umbrechen: Von wem eine Auswertung geliehen ist, gehört zu
   den Dingen, die man lesen können muss. */
.sw-abfrage .tb-karte-kopf .sw-marke {
  white-space: normal;
  max-width: 100%;
  text-align: left;
}

.sw-abfrage .sw-filter { margin-bottom: 0; }

.sw-abfrage .tabellenkasten {
  width: 100%;
  margin-top: var(--s3);
  border-top: 1px solid var(--line);
  padding-top: var(--s3);
}