/* ============================================================
   Notmodus - Oberflaeche
   ============================================================
   Schlicht mit Absicht: kein Framework, kein Bauschritt, eine Datei. Was hier
   laeuft, laeuft in dem Moment, in dem sonst nichts mehr laeuft.

   Das Mandanten-Branding kommt zur Laufzeit als CSS-Variable herein
   (--marke), deshalb steht hier nur ein neutraler Rueckfallwert. */

:root {
  --marke: #1f4ed8;
  --marke-kontrast: #ffffff;
  /* Zweit- und Akzentfarbe des Mandanten. Fallen sie aus, ist die Marke selbst der
     Rueckfall - die Seite sieht dann aus wie vor der Erweiterung, nie kaputt. */
  --marke-zweit: var(--marke);
  --marke-akzent: var(--marke-zweit);

  --grund: #f6f7f9;
  --flaeche: #ffffff;
  --flaeche-2: #f0f2f5;
  --rand: #d8dce3;
  /* Eigener, kraeftigerer Ton NUR fuer Eingabefelder. Der allgemeine Rand darf leise
     bleiben (er trennt Karten), aber ein Eingabefeld muss als solches erkennbar sein:
     gemessen lagen die Felder bei 1,38:1 gegen ihre Karte, das ist eine blasse Flaeche
     ohne Kante. 3:1 ist die Grenze fuer Bedienelemente. */
  --feldrand: #9aa3b0;
  --text: #14181f;
  --text-leise: #5b636f;

  --warnung-grund: #fff4e0;
  --warnung-rand: #e0a640;
  --warnung-text: #6b4a05;

  --fehler: #b32020;
  --fehler-grund: #fdeceb;
  --erfolg: #1c7a45;

  --radius: 10px;
  --spalte: 44rem;
}

/* Der Modus folgt dem GERAET -- ausser der Mandant erzwingt auf der Hauptplattform einen.
   Dann soll der Notmodus denselben zeigen: ein Mandant, der dort "hell" festlegt, sah hier
   auf einem dunkel eingestellten Geraet sonst ganz anders aus als seine Plattform.

   Die dunklen Werte stehen zweimal. Das ist ohne Praeprozessor der einzige Weg, dieselbe
   Wertegruppe an zwei Bedingungen zu haengen -- wer sie aendert, muss BEIDE Stellen
   anfassen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-modus='hell']) {
    --grund: #14171c;
    --flaeche: #1c2027;
    --flaeche-2: #232830;
    --rand: #333a45;
    --feldrand: #6b7480;
    --text: #eceef2;
    --text-leise: #9aa3b0;

    --warnung-grund: #362a12;
    --warnung-rand: #a87c23;
    --warnung-text: #f3d9a4;

    --fehler: #f07575;
    --fehler-grund: #3a1f1f;
    --erfolg: #5cc98d;
  }
}

/* Ohne `color-scheme` bleiben Rollbalken, Cursor, Zahlenfeld-Pfeile und die Autofill-Fuellung
   des Browsers HELL, sobald ein Mandant Dunkel auf einem hell eingestellten Geraet erzwingt.
   Solange der Modus nur aus `prefers-color-scheme` kam, zog die Oberflaeche von selbst mit. */
:root[data-modus='hell'] {
  color-scheme: light;
}

:root[data-modus='dunkel'] {
  color-scheme: dark;

  --grund: #14171c;
  --flaeche: #1c2027;
  --flaeche-2: #232830;
  --rand: #333a45;
  --feldrand: #6b7480;
  --text: #eceef2;
  --text-leise: #9aa3b0;

  --warnung-grund: #362a12;
  --warnung-rand: #a87c23;
  --warnung-text: #f3d9a4;

  --fehler: #f07575;
  --fehler-grund: #3a1f1f;
  --erfolg: #5cc98d;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Auf dem Handy wird hier im Zweifel unter Zeitdruck getippt - lieber eine
     Stufe groesser als die uebliche Voreinstellung. */
  font-size: 17px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* ---------- Warnband: muss auf JEDER Seite stehen (Paragraph 5) ---------- */

.notband {
  /* Klebt oben fest. Paragraph 5 verlangt den Hinweis "auf jeder Seite" - bei neun
     Spielen ist die Liste 2100 px hoch, und unten angekommen war das Band 1120 px
     ausserhalb des Bildes. Auf jeder ANSICHT zu stehen ist nicht dasselbe wie sichtbar
     zu sein, und dass hier etwas anderes laeuft als sonst, ist die wichtigste Aussage
     der ganzen Anwendung. */
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--warnung-grund);
  border-bottom: 2px solid var(--warnung-rand);
  color: var(--warnung-text);
  padding: 0.7rem 1rem;
  text-align: center;
  font-size: 0.95rem;
}

.notband strong {
  display: block;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  text-transform: uppercase;
}

/* ---------- Grundgeruest ---------- */

.huelle {
  max-width: var(--spalte);
  margin: 0 auto;
  /* Unten Platz fuer die fixierte Fusszeile - sonst verdeckt sie den letzten Knopf. */
  padding: 1.25rem 1rem 5.5rem;
}

.kopf {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  /* Zweiter Trager der Marke neben dem Logo - wieder als Flaeche. Ohne ihn aendert ein
     Mandantenwechsel sichtbar nur das Bild, waehrend die Farbe fast nirgends vorkommt:
     sie stand bisher allein am Hauptknopf und an Fokusrahmen, und in der Spieleansicht
     gibt es keinen Hauptknopf. */
  padding-bottom: 0.6rem;
  /* Verlauf statt einfarbig: so ist auch die Zweitfarbe zu sehen. Hat der Mandant keine,
     faellt `--marke-zweit` auf die Marke zurueck und der Verlauf wird unsichtbar - eine
     Linie in einer Farbe, genau wie vorher. */
  /* Die einfarbige Linie ist die BASIS, der Verlauf legt sich darueber. Stand hier
     `transparent`, verschwand die Linie ganz, sobald `border-image` nicht griff -- etwa bei
     einer unbrauchbaren Zweitfarbe, im Druck ohne Hintergrundgrafiken oder unter
     forced-colors. Ein Rueckfall auf "gar nichts" ist schlechter als einer auf "einfarbig". */
  border-bottom: 2px solid var(--marke);
  border-image: linear-gradient(90deg, var(--marke), var(--marke-zweit)) 1;
}

.kopf img {
  height: 34px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}

.kopf h1 {
  font-size: 1.15rem;
  margin: 0;
  font-weight: 650;
}

.datenstand {
  color: var(--text-leise);
  font-size: 0.85rem;
  margin: 0 0 1.5rem;
}

.datenstand.alt {
  color: var(--warnung-text);
  background: var(--warnung-grund);
  border: 1px solid var(--warnung-rand);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
}

/* ---------- Einstieg: die Orientierung vor dem Anmeldeformular ----------
   Bewusst KEINE Karte: zwei Karten uebereinander lesen sich als zwei gleichrangige
   Formulare, und das Auge sucht dann, in welchem es tippen soll. Der Streifen links
   ordnet den Block dem Formular unter, statt neben ihn zu treten.

   Die Marke traegt hier eine FLAECHE (den Streifen), nie Text und nie einen Zustand -
   dieselbe Regel wie bei .kopf und bei .tipp. Ein Mandant mit blasser Farbe verliert damit
   hoechstens eine Zierlinie, nie eine Auskunft. */
.einstieg {
  margin-bottom: 1.1rem;
  padding: 0.8rem 0.9rem;
  /* Die Flaeche traegt die Gruppierung, der Streifen ist Zier. Gemessen an echten
     Mandantenfarben: `--marke` reicht von 1,07:1 (weiss) bis 15,86:1 - allein auf den
     Streifen gestellt, zerfaellt der Block bei blassen Marken zu loser Schrift zwischen
     Datenstand und Karte. `--flaeche-2` ist fest und haelt die Klammer immer. */
  background: var(--flaeche-2);
  border-left: 3px solid var(--marke);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Kleiner als `.karte h2` waere falsch, groesser auch: das Beiwerk darf die Ueberschrift
   dessen, was man tun soll, nicht ueberragen. Gleiche Groesse, nur fetter. */
.einstieg h2 {
  font-size: 1rem;
  font-weight: 650;
  margin: 0 0 0.35rem;
}

.einstieg p {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
}

.einstieg .schritte {
  margin: 0 0 0.6rem;
  padding-left: 1.1rem;
  font-size: 0.95rem;
}

.einstieg .schritte li {
  margin-bottom: 0.2rem;
}

/* ⚠️ Die Spezifitaet ist hier Inhalt, nicht Geschmack: `.einstieg p` (0-1-1) schlaegt
   `.einstieg-sicher` (0-1-0), die `font-size`-Zeile war deshalb wirkungslos. Kein
   `!important` - der Selektor wird geschaerft. */
.einstieg p.einstieg-sicher {
  margin-bottom: 0;
  color: var(--text-leise);
  font-size: 0.88rem;
}

/* Der Teil, der erst NACH der Eingabe zaehlt. Gedaempft, damit er das Formular ueber ihm
   nicht noch einmal um Aufmerksamkeit bittet. */
.einstieg.nachtrag {
  margin: 1.1rem 0 0;
  color: var(--text-leise);
  font-size: 0.9rem;
}

.einstieg.nachtrag h2 {
  font-size: 0.92rem;
  color: var(--text);
}

.einstieg.nachtrag .schritte {
  margin-bottom: 0;
  font-size: inherit;
}

/* ---------- "Die Hauptplattform meldet sich wieder" ----------
   Dieselbe Aufmachung wie der Hinweis auf einen alten Datenstand: es ist dieselbe Art
   Auskunft -- etwas stimmt nicht mit der Lage, nicht mit einer Eingabe. Deshalb die
   Warnfarben und NICHT `--fehler` (nichts ist schiefgegangen) und nicht `--marke*` (eine
   Mandantenfarbe darf keinen Zustand tragen, siehe die Regel bei .tipp). */
.plattform-laeuft {
  color: var(--warnung-text);
  background: var(--warnung-grund);
  border: 1px solid var(--warnung-rand);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  margin: 0 0 1.5rem;
  overflow-wrap: anywhere;
}

/* ---------- Lagemeldung des Betreibers ---------- */

/* Zwei Stufen, vom Betreiber gesetzt, nicht von dieser Seite erraten. "info" bleibt in
   den ruhigen Flaechenfarben - eine Lagemeldung ist nicht automatisch ein Alarm.
   "warnung" nutzt dieselben Variablen wie das feste Notband oben und der Notmodus-Absatz
   im Rechtstext: beide Modi deckt der Dunkelmodus-Block oben in dieser Datei schon ab,
   hier braucht es keine eigene @media-Regel. */
.banner {
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
}

.banner-text {
  margin: 0 0 0.25rem;
  overflow-wrap: anywhere;
}

.banner-zeit {
  margin: 0;
  font-size: 0.8rem;
  opacity: 0.85;
}

.banner.info {
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  color: var(--text);
}

.banner.warnung {
  background: var(--warnung-grund);
  border: 1px solid var(--warnung-rand);
  color: var(--warnung-text);
}

/* ---------- Karten ---------- */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.1rem;
  margin-bottom: 0.75rem;
}

.karte h2 {
  font-size: 1rem;
  margin: 0 0 0.75rem;
}

/* ---------- Formular ---------- */

label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-leise);
  margin-bottom: 0.3rem;
}

input[type='email'],
input[type='password'],
input[type='text'] {
  width: 100%;
  padding: 0.7rem 0.8rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  background: var(--flaeche-2);
  border: 1px solid var(--feldrand);
  border-radius: var(--radius);
}

input:focus-visible,
button:focus-visible {
  outline: 2px solid var(--marke);
  outline-offset: 2px;
}

.feld {
  margin-bottom: 0.9rem;
}

button {
  font: inherit;
  font-weight: 600;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--marke);
  color: var(--marke-kontrast);
  cursor: pointer;
  /* Fingerkuppengroesse - im Notfall wird nicht gezielt geklickt. */
  min-height: 44px;
}

button:hover:not(:disabled) {
  filter: brightness(1.08);
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

button.leise {
  background: transparent;
  color: var(--text);
  border-color: var(--rand);
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Der Weg zurueck ueber dem Rechtstext - dicht am Titel, damit beides zusammen ins
   Bild passt und man nicht erst sucht. */
.zurueck-oben {
  margin-bottom: 0.9rem;
}

/* ---------- Mandantenwahl ---------- */

.mandantenliste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Ab fuenf Eintraegen untereinander: nebeneinander entsteht eine Treppe aus
   unterschiedlich breiten Knoepfen, und man sucht laenger als man liest. */
.mandantenliste.lang {
  flex-direction: column;
  flex-wrap: nowrap;
}

button.mandant {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
  justify-content: flex-start;
}

button.mandant img {
  /* BREIT, nicht quadratisch. Die meisten Mandantenlogos sind Wortmarken; auf ein
     Quadrat gerechnet schrumpfen sie auf Streichholzgroesse und sind unlesbar -
     dann kann man sie auch weglassen. Feste Breite, damit die Namen trotzdem
     alle an derselben Kante beginnen. */
  width: 64px;
  height: 26px;
  object-fit: contain;
  object-position: left center;
  flex: 0 0 auto;
}

/* ---------- Stoerung melden ---------- */

.karte.melden {
  margin-top: 1.5rem;
}

textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.45;
  color: var(--text);
  background: var(--flaeche-2);
  border: 1px solid var(--feldrand);
  border-radius: var(--radius);
  resize: vertical;
}

textarea:focus-visible {
  outline: 2px solid var(--marke);
  outline-offset: 2px;
}

.meldung-eintrag {
  border-top: 1px solid var(--rand);
  padding: 0.6rem 0 0.2rem;
  font-size: 0.9rem;
  /* Nutzertext kann alles enthalten - auch eine Zeile ohne Leerzeichen. */
  overflow-wrap: anywhere;
}

/* Turnstile: der Kasten haelt Platz frei, damit der Knopf beim Erscheinen des
   Widgets nicht nach unten springt. */
.turnstile {
  margin: 0 0 0.9rem;
  min-height: 65px;
}

/* ---------- Spieleliste ---------- */

/* Ueberschrift je Wettbewerb und Spieltag. Klebt unter dem Warnband, damit beim
   Scrollen immer sichtbar bleibt, zu welchem Spieltag die Karten darunter gehoeren. */
/* Die Marke des Mandanten als FLAECHE, nicht als Textfarbe.
   Eine Kundenfarbe, die als Flaeche traegt, ist als Text auf der Seitenflaeche oft
   unlesbar: gemessen lagen Kicker in Markenfarbe im Dunkelmodus bei 2,4-3,2:1. Ein Balken
   hat dieses Problem nicht - er muss nichts lesbar machen, er muss auffallen. */
.gruppe {
  position: sticky;
  /* 🔴 GEMESSEN, NICHT GESCHAETZT. Der feste Wert 3.9rem (62px) stammt aus einer Zeit, in der
     der Wettbewerbsname zusaetzlich in jeder Karte stand. Das Notband darueber bricht auf
     schmalen Schirmen um und reicht dort bis 112px -- die Ueberschrift klebte also unter ihm
     und war auf dem Handy VOLLSTAENDIG verdeckt. Seit der Name nur noch hier steht, waere das
     ein Informationsverlust: der Nutzer wuesste nicht mehr, fuer welchen Wettbewerb er tippt.
     `--kopfhoehe` misst app.js aus dem Band selbst, inklusive Umbruch. */
  top: var(--kopfhoehe, 3.9rem);
  z-index: 5;
  margin: 1.4rem 0 0.5rem;
  padding: 0.35rem 0 0.35rem 0.6rem;
  /* Der Balken ist das eine Element, an dem eine Kundenfarbe nichts anrichten kann: reine
     Zier, traegt keine Aussage, ueberdeckt keine Schrift. Deshalb steht der Akzent HIER --
     und nicht am Tipp-Rand, wo er ein Zustandssignal war. Fehlt er, faellt er auf die
     Zweitfarbe und weiter auf die Marke zurueck: dann ist der Verlauf unsichtbar und der
     Balken sieht aus wie vorher. */
  border-left: 3px solid var(--marke);
  border-image: linear-gradient(180deg, var(--marke), var(--marke-akzent)) 1;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-leise);
  background: var(--grund);
}

.gruppe:first-child {
  margin-top: 0;
}

.spiel {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-bottom: 0.6rem;
}

.spiel .anstoss {
  font-size: 0.8rem;
  color: var(--text-leise);
  margin-bottom: 0.5rem;
}

/* Die beiden Wege aus der Ansicht. Oben statt unten, und leise: sie sollen auffindbar
   sein, aber nicht mit dem Tippen um Aufmerksamkeit streiten. */
.knopfreihe.aktionen {
  justify-content: flex-end;
  margin-bottom: 0.9rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rand);
}

.paarung {
  display: grid;
  /* Heim | Tipp | : | Tipp | Gast -- die Mannschaftsnamen duerfen umbrechen,
     die Tippfelder nie schrumpfen. */
  grid-template-columns: 1fr auto auto auto 1fr;
  align-items: center;
  gap: 0.5rem;
}

.mannschaft {
  font-weight: 600;
  /* anywhere statt break-word: lange Vereinsnamen brechen sonst aus der
     Zelle heraus, statt in ihr umzubrechen. */
  overflow-wrap: anywhere;
}

.mannschaft.gast {
  text-align: right;
}

.tipp {
  width: 3.2rem;
  padding: 0.55rem 0.2rem;
  font-size: 1.15rem;
  font-weight: 650;
  text-align: center;
  font-family: inherit;
  color: var(--text);
  background: var(--flaeche-2);
  border: 2px solid var(--feldrand);
  border-radius: var(--radius);
  /* Pfeilchen weg: sie stehlen die halbe Feldbreite und niemand benutzt sie. */
  -moz-appearance: textfield;
}

.tipp::-webkit-outer-spin-button,
.tipp::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.tipp:focus {
  border-color: var(--marke);
}

/* 🔴 EINE ZUSTANDSFARBE DARF KEINE KUNDENFARBE SEIN. Hier stand `--marke`, kurzzeitig
   `--marke-akzent` -- beides falsch, und das zweite schlimmer als das erste.

   Dieser Rand bildet ein PAAR mit `.tipp.fehlgeschlagen` (`--fehler`, fest). Ist die eine
   Haelfte des Paars fest und die andere die Farbe des Mandanten, entscheidet der Mandant
   ueber die Unterscheidbarkeit: wer einen roten Akzent fuehrt, bei dem sehen "gespeichert"
   und "NICHT gespeichert" gleich aus. Genau davor warnt der Kommentar an `.fehlgeschlagen`
   -- es ist der einzige Fehler dieser Oberflaeche, bei dem jemand mit einem Tipp weggeht,
   den er nie abgegeben hat.

   Dazu gemessen, an den Farben, die am 31.08.2026 wirklich ankamen: der Akzent von
   `fs-group` (#FFD631) liegt auf der weissen Kartenflaeche bei 1,41:1 -- BLASSER als der
   neutrale Feldrand (#9aa3b0, 2,55:1). Das Signal kehrt sich um: ein gespeichertes Feld
   saehe unauffaelliger aus als ein unberuehrtes.

   `--erfolg` ist fest, gegen beide Untergruende geprueft (5,36:1 hell, 7,93:1 dunkel) und
   ist ohnehin, was der Code die ganze Zeit meinte -- app.js nennt ihn "der gruene Rand". */
.tipp.geaendert {
  border-color: var(--erfolg);
}

/* Gescheitertes Speichern MUSS anders aussehen als gelungenes. Der gruene Rand kam
   frueher beim Tippen und blieb stehen, auch wenn das Speichern fehlschlug - gruen
   umrandetes Feld, daneben klein und rot der Fehlertext. Man liest den Rahmen. */
.tipp.fehlgeschlagen {
  border-color: var(--fehler);
  background: var(--fehler-grund);
}

.doppelpunkt {
  color: var(--text-leise);
  font-weight: 600;
}

.spiel .fuss {
  margin-top: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  min-height: 1.4rem;
}

.merkmal {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--rand);
  color: var(--text-leise);
}

.merkmal.notfall {
  border-color: var(--warnung-rand);
  background: var(--warnung-grund);
  color: var(--warnung-text);
}

.merkmal.plattform {
  /* Nur der Rand, nicht die Schrift: eine Kundenfarbe als 12-px-Text auf der Kartenflaeche
     waere je nach Mandant unlesbar. */
  border-color: var(--marke-zweit);
}

.zustand {
  font-size: 0.82rem;
}

.zustand.gespeichert {
  color: var(--erfolg);
}

.zustand.fehlgeschlagen {
  color: var(--fehler);
}

/* Kein  mehr: 0.62 drueckte den ohnehin grauen Kleintext auf 2,72:1 (hell)
   bzw. 3,29:1 (dunkel) - unter der Lesbarkeitsgrenze von 4,5:1. Ein gesperrtes Spiel
   soll zurueckhaltender wirken, nicht schlechter lesbar sein. Die Zuruecknahme macht
   deshalb der Untergrund, nicht die Deckkraft. */
.spiel.gesperrt {
  background: var(--flaeche-2);
  border-style: dashed;
}

.hinweis {
  color: var(--text-leise);
  font-size: 0.85rem;
}

/* ---------- Fusszeile: auf jeder Ansicht ---------- */

/* KLEBT UNTEN, auf jeder Ansicht.

   Vorher stand sie am Seitenende - bei 15 Spielkarten und dem Meldeformular darueber
   also rund 2000 px weit unten. Wer sein Impressum sucht, scrollt da nicht hin, und
   Paragraph 5 DDG verlangt "unmittelbar erreichbar", nicht "nach fuenfzehn Karten".

   Zwei schmale Zeilen kostet das: Warnband oben, Fusszeile unten. Beides gehoert zu den
   Aussagen, die diese Seite immer machen muss - dass hier etwas anderes laeuft als sonst,
   und wo die Rechtstexte stehen. */
.fusszeile {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  background: var(--flaeche);
  border-top: 1px solid var(--rand);
  color: var(--text-leise);
  font-size: 0.85rem;
}

/* Ein Knopf, kein Link: die beiden Texte oeffnen eine ANSICHT dieser Seite, sie fuehren
   nirgendwohin. Ein <a href> waere ein Versprechen auf eine Adresse, die es nicht gibt.
   Aussehen soll er trotzdem wie ein Verweis - sonst sucht man ihn zwischen den Knoepfen. */
.fusslink {
  background: none;
  border: none;
  padding: 0;
  min-height: 0;
  font: inherit;
  color: var(--text-leise);
  text-decoration: underline;
  cursor: pointer;
}

.fusslink:hover {
  color: var(--text);
  filter: none;
}

/* ---------- Rechtstext ---------- */

/* Der feste Absatz der Notseite ueber der Datenschutzerklaerung. Abgesetzt, damit man sieht:
   das hier sagt die Seite ueber sich selbst, darunter steht das Rechtsdokument. */
.notmodus-absatz {
  background: var(--warnung-grund);
  border: 1px solid var(--warnung-rand);
  border-radius: var(--radius);
  color: var(--warnung-text);
  padding: 0.75rem 0.9rem;
  margin-bottom: 1.1rem;
  font-size: 0.9rem;
}

.notmodus-absatz p {
  margin: 0 0 0.5rem;
}

.notmodus-absatz p:last-child {
  margin-bottom: 0;
}

/* Fliesstext eines Rechtsdokuments - laenger als alles andere in dieser Oberflaeche.
   Deshalb etwas mehr Zeilenhoehe und klare Abstaende zwischen den Abschnitten. */
.rechtstext {
  font-size: 0.95rem;
  line-height: 1.6;
  /* Adressen, Registernummern und E-Mail-Adressen brechen sonst aus der Karte heraus, statt
     in ihr umzubrechen - dasselbe wie bei den Mannschaftsnamen. */
  overflow-wrap: anywhere;
}

.rechtstext h2,
.rechtstext h3,
.rechtstext h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 1.4rem 0 0.4rem;
}

.rechtstext > :first-child {
  margin-top: 0;
}

.rechtstext p {
  margin: 0 0 0.7rem;
}

.rechtstext ul,
.rechtstext ol {
  margin: 0 0 0.7rem;
  /* Innerhalb der Karte einruecken, nicht am Rand kleben - der Vorgabewert des Browsers
     schiebt die Aufzaehlungszeichen auf schmalen Schirmen aus der Karte heraus. */
  padding-left: 1.3rem;
}

.rechtstext li {
  margin-bottom: 0.25rem;
}

/* BEWUSST NICHT in der Mandantenfarbe. Welche Farbe ein Kunde waehlt, entscheidet nicht diese
   Anwendung - und ein gelbes oder hellblaues --marke ist auf hellem Grund als Fliesstext
   unlesbar (gemessen 1,47:1 beim Hauptknopf, deshalb rechnet app.js dort eine Kontrastfarbe
   aus). Im Rechtstext gibt es dafuer keinen Untergrund, den man mitfaerben koennte: der Verweis
   erbt die Textfarbe und wird durch die Unterstreichung erkennbar. */
.rechtstext a {
  color: inherit;
  text-decoration: underline;
}

.fehler {
  color: var(--fehler);
  font-size: 0.9rem;
  margin: 0.5rem 0 0;
}

.versteckt {
  display: none !important;
}

/* Wer Bewegung reduziert haben moechte, meint auch die dezenten Uebergaenge. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 30rem) {
  .paarung {
    /* Auf schmalen Geraeten untereinander: Heim mit Feld, Gast mit Feld.
       Nebeneinander bliebe fuer die Namen zu wenig Platz. */
    grid-template-columns: 1fr auto;
    row-gap: 0.45rem;
  }

  /* Ohne diese Reihenfolge fiele die Aufstellung aus der Dokumentfolge in
     "Heim | Feld" / "Feld | Gast" - das Gastfeld staende links, die Heimzahl rechts,
     und die beiden Zeilen laesen sich gegenlaeufig. Im Klicktest sah das aus wie ein
     Fehler, obwohl die Zuordnung stimmte. Beide Zeilen gleich: Name links, Feld rechts. */
  .paarung > *:nth-child(1) {
    order: 1;
  }
  .paarung > *:nth-child(2) {
    order: 2;
  }
  .paarung > *:nth-child(5) {
    order: 3;
  }
  .paarung > *:nth-child(4) {
    order: 4;
  }

  .doppelpunkt {
    display: none;
  }

  .mannschaft.gast {
    text-align: left;
  }
}

/* ── Der Joker ("Double or Nothing") ─────────────────────────────────────────────────────
   🔴 KEINE KUNDENFARBE AN EINEM ZUSTAND. "gesetzt" und "nicht gespeichert" bilden ein Paar;
   waere eine Haelfte fest und die andere die Mandantenfarbe, entschiede der Mandant ueber die
   Unterscheidbarkeit - bei rotem Akzent saehen beide gleich aus. Deshalb `--erfolg`/`--fehler`,
   dieselbe Wahl wie bei `.zustand` daneben. (Gemessen am 31.08.2026 an genau diesem Fehler.) */
.jokerzeile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  font-size: 0.85rem;
}

.jokerzeile input[type='checkbox'] {
  /* Fingerkuppengross, nicht mausgross: die Notseite wird im Ausfall ueberwiegend am Handy
     bedient, und ein zu kleines Kaestchen neben einem Eingabefeld ist dort ein Fehlgriff. */
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}

.jokerzeile label {
  cursor: pointer;
}

.jokerzeile input[disabled] + label {
  opacity: 0.55;
  cursor: default;
}

.jokerhinweis {
  color: var(--text-leise);
  overflow-wrap: anywhere;
}

.jokerhinweis.gespeichert {
  color: var(--erfolg);
}

.jokerhinweis.fehlgeschlagen {
  color: var(--fehler);
}