/* ==========================================================================
   Turnier- und Livescoring-App — Oberfläche

   Grundsatz: mobil zuerst. Das Basislayout gilt für schmale Geräte ab 360 px,
   größere Bildschirme bekommen über min-width-Abfragen mehr Spalten.
   Siehe ARCHITEKTUR.md, Abschnitt 1.
   ========================================================================== */

/* --- 1  Gestaltungswerte -------------------------------------------------- */

:root {
  color-scheme: light;

  --page: #f4f6f4;
  --surface: #ffffff;
  --surface-2: #eceeeb;
  --surface-3: #e2e7e3;
  --line: #d9e0db;
  --line-2: #c2ccc6;

  --ink: #131917;
  --ink-2: #414d47;
  --ink-3: #5c6862;

  --brand: #0f6b50;
  --brand-hover: #0b5240;
  --brand-ink: #0a4636;
  --brand-soft: #dfeee7;
  --on-brand: #ffffff;

  /* --gold ist die Schmuckfarbe (Ränder, Akzente). Für *Schrift* ist sie zu
     hell: auf weißem Grund kommt sie nur auf 3.8:1 und verfehlt damit die
     4.5:1, die kleine Schrift braucht. Deshalb ein eigener Wert für Text.
     Nachgemessen, nicht geschätzt — siehe UEBERGABE.md, Abschnitt 5. */
  --gold: #a97b12;
  --gold-ink: #7a570c;
  --gold-bright: #e8b53f;

  --st-live: #9c4508;
  --st-live-soft: #fbeade;
  --st-ready: #245e9e;
  --st-ready-soft: #e4edf7;
  --st-done: #5c6862;
  --st-done-soft: #eaeeec;

  --danger: #a93732;
  --danger-soft: #f9e6e4;
  --on-danger: #ffffff;
  --warn: #92620d;
  --warn-soft: #fbf0d9;

  /* Violett heißt: **das kann nur der Betreiber** (UEBERGABE.md, Abschnitt
     105). Eine eigene Farbe und nicht `--danger`, weil es um etwas anderes
     geht: Rot warnt vor der Wirkung einer Handlung (Löschen), Violett sagt,
     wem sie offensteht. Beides im selben Rot hieße, dass ein Knopf gefährlich
     aussieht, nur weil er selten jemandem gehört.
     Gemessen auf weißem Grund: 7,4:1 — auch für kleine Schrift genug. */
  --super: #6b3fa0;
  --super-soft: #f1eafb;
  --on-super: #ffffff;

  --nav-bg: #0f1f1a;
  --nav-ink: #dbe6e0;
  --nav-ink-2: #93a89f;

  --s1: 4px;  --s2: 6px;  --s3: 8px;  --s4: 12px;
  --s5: 16px; --s6: 20px; --s7: 24px; --s8: 32px;

  --r1: 6px; --r2: 10px; --r3: 14px; --r-pill: 999px;

  /* Grund des Markenzeichens. Steht bewusst **außerhalb** der beiden
     Farbfassungen und wird nirgends überschrieben: Es ist derselbe Ton, auf
     dem der Federball auf dem Startbildschirm liegt (GRUND in
     tools/symbole_erzeugen.py). Ein Zeichen, das je nach Farbschema anders
     aussieht, ist kein Zeichen mehr. */
  --zeichen-grund: #0f1f1a;

  --sh1: 0 1px 2px rgba(14, 26, 20, 0.07);
  --sh2: 0 4px 14px rgba(14, 26, 20, 0.1);
  --sh3: 0 12px 32px rgba(14, 26, 20, 0.16);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, ui-sans-serif,
          system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Fingerfläche: Untergrenze für alles, was angetippt wird. */
  --touch: 44px;

  /* Randlose Displays (iPhone-Kerbe, Gestenleiste) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Höhe der unteren Navigationsleiste. Sie steht `fixed` und ist damit aus
     dem Fluss genommen — der Inhalt muss den Platz selbst freihalten, sonst
     liegt sein unteres Ende darunter. Der Wert entspricht der Leiste aus
     Symbol, Beschriftung und `--s2` Innenabstand; wer dort etwas ändert,
     ändert ihn hier mit. Ab 900 px wird die Leiste zur Seitenleiste und der
     Wert auf 0 gesetzt. */
  --navleiste: 68px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0d1110;
    --surface: #161b18;
    --surface-2: #1d2420;
    --surface-3: #242c27;
    --line: #2a332d;
    --line-2: #384239;
    --ink: #e8eeea;
    --ink-2: #c2ccc6;
    --ink-3: #94a09a;
    --brand: #3faa81;
    --brand-hover: #57bd95;
    --brand-ink: #8fd8b8;
    --brand-soft: #16352a;
    --on-brand: #04211a;
    --gold: #d9a83c;
    --gold-ink: #d9a83c;
    --st-live: #e8944c;
    --st-live-soft: #33220f;
    --st-ready: #77aade;
    --st-ready-soft: #16273a;
    --st-done: #97a29c;
    --st-done-soft: #1f2622;
    --danger: #e08b85;
    --danger-soft: #351a18;
    --on-danger: #2a0f0d;
    --warn: #ddb054;
    --warn-soft: #2f2611;
    --super: #c0a2ec;
    --super-soft: #241a36;
    --on-super: #150d22;
    --nav-bg: #101512;
    --sh1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sh2: 0 4px 14px rgba(0, 0, 0, 0.45);
    --sh3: 0 12px 32px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d1110;
  --surface: #161b18;
  --surface-2: #1d2420;
  --surface-3: #242c27;
  --line: #2a332d;
  --line-2: #384239;
  --ink: #e8eeea;
  --ink-2: #c2ccc6;
  --ink-3: #94a09a;
  --brand: #3faa81;
  --brand-hover: #57bd95;
  --brand-ink: #8fd8b8;
  --brand-soft: #16352a;
  --on-brand: #04211a;
  --gold: #d9a83c;
  --gold-ink: #d9a83c;
  --st-live: #e8944c;
  --st-live-soft: #33220f;
  --st-ready: #77aade;
  --st-ready-soft: #16273a;
  --st-done: #97a29c;
  --st-done-soft: #1f2622;
  --danger: #e08b85;
  --danger-soft: #351a18;
  --on-danger: #2a0f0d;
  --warn: #ddb054;
  --warn-soft: #2f2611;
  --super: #c0a2ec;
  --super-soft: #241a36;
  --on-super: #150d22;
  --nav-bg: #101512;
  --sh1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh2: 0 4px 14px rgba(0, 0, 0, 0.45);
  --sh3: 0 12px 32px rgba(0, 0, 0, 0.5);
}


/* --- 2  Grundlagen -------------------------------------------------------- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: 1.4rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

p { margin: 0; }

button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.5; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r1);
}

.tabellenziffern, .zahl { font-variant-numeric: tabular-nums; }

.ladeanzeige {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  color: var(--ink-3);
}

.nur-fuer-screenreader {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* --- 3  Bausteine --------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--touch);
  padding: 0 var(--s5);
  border: 1px solid transparent;
  border-radius: var(--r2);
  background: var(--brand);
  color: var(--on-brand);
  font-size: 0.95rem;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.knopf:hover:not(:disabled) { background: var(--brand-hover); }

.knopf.zweitrangig {
  background: var(--surface);
  border-color: var(--line-2);
  color: var(--ink-2);
}
.knopf.zweitrangig:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--ink);
}

.knopf.dezent {
  background: transparent;
  color: var(--ink-3);
}
.knopf.dezent:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }

.knopf.gefahr { background: var(--danger); color: var(--on-danger); }

/* --- Nur der Betreiber (UEBERGABE.md, Abschnitt 105) ----------------------

   **Violett heißt: das kann nur ein Superadministrator.** Die Farbe sagt es,
   bevor jemand Rechte vergleicht — und sie sagt nur das. Über die Wirkung der
   Handlung sagt sie nichts; ein violettes Löschen ist zusätzlich `gefahr`.

   Zwei Bausteine, und beide gehören zusammen: der Knopf trägt die Farbe, das
   Abzeichen den Satz. Wer nur die Farbe sieht, weiß noch nicht, was sie
   bedeutet; wer sie zum zweiten Mal sieht, liest das Abzeichen nicht mehr.

   Verwendung:
       <button class="knopf super">… <span class="nur-super">Betreiber</span></button>
       <span class="nur-super">Betreiber</span>   an Überschriften und Feldern

   Sichtbar sein soll so etwas **nur**, wenn es auch benutzbar ist: Die
   Oberfläche blendet es für alle anderen aus, statt es gesperrt zu zeigen.
   Der Schutz selbst sitzt trotzdem am Endpunkt — eine Farbe ist kein Recht.
   -------------------------------------------------------------------------- */

.knopf.super {
  background: var(--super);
  border-color: var(--super);
  color: var(--on-super);
}

.knopf.super:hover:not(:disabled) { filter: brightness(1.08); }

/* Betreiber **und** gefährlich: Die Warnung gewinnt den Knopf, das Abzeichen
   trägt die Zugehörigkeit. Andersherum verschwände die Gefahr hinter der
   Farbe für „wem gehört das“ — und genau das soll nicht passieren. Die Regel
   steht **nach** `.knopf.super`, weil sonst die Reihenfolge entschiede. */
.knopf.super.gefahr {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--on-danger);
}

.knopf.super.gefahr .nur-super {
  background: rgb(255 255 255 / 0.22);
  color: var(--on-danger);
}

.knopf.super.zweitrangig,
.knopf.super.dezent {
  background: var(--super-soft);
  border-color: var(--super);
  color: var(--super);
}

.nur-super {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 1px var(--s2);
  border-radius: var(--r-pill);
  background: var(--super-soft);
  color: var(--super);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Nur auf dem **gefüllten** Knopf steht das Abzeichen andersherum. Auf der
   ruhigen Fassung (`zweitrangig`, `dezent`) wäre Weiß auf hellem Violett
   nicht zu lesen — genau so ist es beim ersten Blick in den Browser
   aufgefallen. */
.knopf.super:not(.zweitrangig):not(.dezent) .nur-super {
  background: rgb(255 255 255 / 0.22);
  color: var(--on-super);
}

/* Und auf der ruhigen Fassung genügt ein kräftigerer Grund, damit sich das
   Abzeichen vom Knopf absetzt. */
.knopf.super.zweitrangig .nur-super,
.knopf.super.dezent .nur-super {
  background: var(--super);
  color: var(--super-soft);
}

.knopf.voll { width: 100%; }

.knopf.klein {
  min-height: 36px;
  padding: 0 var(--s4);
  font-size: 0.85rem;
}

.flaeche {
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--surface);
  box-shadow: var(--sh1);
}

.stapel { display: grid; gap: var(--s4); }
.stapel-eng { display: grid; gap: var(--s2); }

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

.zusatztext {
  color: var(--ink-3);
  font-size: 0.85rem;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 2px var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.marke.laeuft  { background: var(--st-live-soft);  color: var(--st-live);  border-color: transparent; }
.marke.bereit  { background: var(--st-ready-soft); color: var(--st-ready); border-color: transparent; }
.marke.fertig  { background: var(--st-done-soft);  color: var(--st-done);  border-color: transparent; }
.marke.hinweis { background: var(--warn-soft);     color: var(--warn);     border-color: transparent; }
/* Betreiber — dieselbe Signalfarbe wie `.nur-super` (Abschnitt 105). An einer
   **Person** sagt sie „das ist ein Superadministrator“, an einer Funktion
   „das kann nur er“. Beides ist dieselbe Auskunft aus zwei Richtungen und
   darf deshalb nicht zwei Farben haben. */
.marke.super   { background: var(--super-soft);    color: var(--super);    border-color: transparent; }

/* Formulare: auf schmalen Geräten grundsätzlich einspaltig. */
.feld { display: grid; gap: var(--s2); }

.feld > label {
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--ink-2);
}

/* Alle Eingabearten, die im Projekt vorkommen. Eine fehlende Art fällt sonst
   aus der Gestaltung heraus und bleibt auf der Standardhöhe des Browsers —
   bei datetime-local waren das 28 px statt der geforderten 44. */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"],
input[type="datetime-local"], input[type="month"], input[type="week"],
input[type="tel"], input[type="url"], input[type="search"],
select, textarea {
  width: 100%;
  min-height: var(--touch);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem; /* verhindert das Hineinzoomen auf iPhones */
}

textarea { min-height: 96px; resize: vertical; }

input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.fehlermeldung {
  padding: var(--s3) var(--s4);
  border: 1px solid var(--danger);
  border-radius: var(--r2);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.9rem;
}

.hinweisfeld {
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--gold);
  border-radius: var(--r1);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 0.85rem;
}


/* --- 4  Anmeldeseite ------------------------------------------------------ */

.anmeldeseite {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: var(--s5);
  padding-top: calc(var(--s5) + var(--safe-top));
  padding-bottom: calc(var(--s5) + var(--safe-bottom));
  background: var(--nav-bg);
}

.anmeldekarte {
  width: min(400px, 100%);
  padding: var(--s6);
  border-radius: var(--r3);
  background: var(--surface);
  box-shadow: var(--sh3);
}

.anmeldekopf {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-bottom: var(--s6);
}

/* Das Markenzeichen: derselbe Federball wie auf dem Startbildschirm, gesetzt
   in `web/js/symbole.js` (`appzeichen`). Die Fläche kommt von hier, das Motiv
   von dort — deshalb hat das SVG keinen eigenen Grund und keine Ecken.
   `overflow: hidden` rundet das Zeichen an derselben Kante wie die Fläche. */
.zeichen {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px; height: 42px;
  border-radius: var(--r2);
  background: var(--zeichen-grund);
  overflow: hidden;
}

.zeichen svg { display: block; width: 100%; height: 100%; }

/* Dieselbe Karte, nur breiter: das Meldeformular (onlinemeldungen.css) und
   die Mitzählen-App unter `/z/<code>/` (mannschaft.css).
   **Warum hier und nicht dort:** Sie stand in `onlinemeldungen.css`, und das
   lädt `ticker.html` nicht — unter dem Kurzlink fehlten deshalb Grund, Karte
   und Mittigkeit, und die Seite klebte am linken Rand (berichtigt am
   24.09.2026). Eine geteilte Grundform gehört in das Blatt, das jede Seite
   lädt; was ein Modul darüber hinaus braucht, steht weiter bei ihm. */
.meldeseite {
  display: grid;
  place-items: start center;
  min-height: 100dvh;
  padding: var(--s5);
  padding-top: calc(var(--s5) + var(--safe-top));
  padding-bottom: calc(var(--s6) + var(--safe-bottom));
  background: var(--nav-bg);
}

.meldekarte {
  width: min(720px, 100%);
  padding: var(--s5);
  border-radius: var(--r3);
  background: var(--surface);
  box-shadow: var(--sh3);
}

.meldekopf {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-bottom: var(--s5);
}

.meldekopf h1 { font-size: 1.25rem; line-height: 1.25; }
.meldekopf .zusatztext { margin-top: 2px; }


/* --- 5  Rahmen der angemeldeten Ansicht -----------------------------------

   Ein Aufbau, zwei Erscheinungsformen — gesteuert allein über die
   Rasterbereiche:

     Handy    Kopfzeile oben, Inhalt, Navigation als Leiste unten
     Desktop  Navigation als Seitenleiste links über die volle Höhe,
              rechts daneben Kopfzeile und Inhalt
   -------------------------------------------------------------------------- */

.rahmen {
  display: grid;
  grid-template-areas:
    "kopf"
    "inhalt"
    "nav";
  /* minmax(0, 1fr) statt einfach 1fr: Eine Rasterspalte ist von Haus aus
     mindestens so breit wie der breiteste Inhalt darin ("auto" als
     Mindestbreite). Ein Kasten, der eigentlich in sich scrollen soll — eine
     breite Tabelle, ein Turnierbaum, die Reiterleiste —, würde die Spalte
     dann aufblähen und die ganze Seite waagerecht scrollen lassen. Genau das
     verbietet ARCHITEKTUR.md, Abschnitt 1 für schmale Geräte.
     Die 0 als Mindestbreite erlaubt der Spalte zu schrumpfen; das Scrollen
     bleibt dort, wo es hingehört: im Kasten. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
}

.kopfleiste {
  grid-area: kopf;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  padding-top: calc(var(--s3) + var(--safe-top));
  background: var(--nav-bg);
  color: var(--nav-ink);
}

.kopfleiste h1 {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kopf-rolle {
  color: var(--nav-ink-2);
  font-size: 0.82rem;
  white-space: nowrap;
}

/* Das Benutzermenü der Startseite.

   Der Name stand als graue Zeile in der Kopfleiste — dieselbe Lage wie beim
   Turniernamen vor Abschnitt 26q, und dieselbe Lösung: Der Name **ist** der
   Knopf. Dahinter steht, was zur angemeldeten Person gehört, und der Weg
   hinaus.

   Die Tafel schwebt (`position: absolute`) und schiebt die Kopfleiste nicht
   auseinander. Ihr Bezugspunkt ist die Hülle daneben; ohne `position:
   relative` dort hinge sie am Seitenrand statt unter ihrem Knopf. */
.benutzermenu { position: relative; }

.kopf-rolle-knopf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: var(--r1);
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--nav-ink-2);
  font-size: 0.82rem;
}

.kopf-rolle-knopf:hover,
.kopf-rolle-knopf[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.benutzermenu-tafel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: grid;
  gap: 4px;
  /* Breit genug für eine Mailadresse, schmal genug, um am Handy nicht über
     den Rand zu stehen. */
  min-width: 220px;
  max-width: min(320px, calc(100vw - var(--s6)));
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(14, 26, 20, 0.18);
  text-align: left;
}

.benutzermenu-name {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.benutzermenu-tafel .zusatztext { margin: 0; overflow-wrap: anywhere; }
.benutzermenu-tafel .knopf { margin-top: var(--s2); }

/* Der Turnierwechsler in der Kopfleiste — UEBERGABE.md, Abschnitt 26q.

   Der Turniername stand vorher als graue Zeile daneben und war zu übersehen.
   Wer in der Abrechnung des falschen Turniers sitzt, merkt das sonst erst an
   den Zahlen. Jetzt ist er ein Knopf: sichtbar, und zugleich der Ort, an dem
   man handelt. */
.kopf-turnier {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  max-width: 40vw;
  padding: 4px var(--s3);
  border: 1px solid var(--nav-linie, rgba(255, 255, 255, 0.25));
  border-radius: var(--r-pill);
  background: none;
  color: var(--nav-ink, inherit);
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}

.kopf-turnier:hover,
.kopf-turnier:focus-visible { background: rgba(255, 255, 255, 0.12); }

.kopf-turnier-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kopf-knopf {
  display: grid;
  place-items: center;
  flex: none;
  min-width: var(--touch);
  height: var(--touch);
  padding: 0 var(--s3);
  border-radius: var(--r2);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 650;
}

.kopf-knopf:hover { background: rgba(255, 255, 255, 0.18); }

.inhalt {
  grid-area: inhalt;
  width: 100%;
  /* Aus demselben Grund wie oben: Ohne min-width nimmt der Rasterbereich die
     Maximalbreite seines Inhalts als Untergrenze. */
  min-width: 0;
  padding: var(--s5) var(--s4);
  /* `--navleiste` hält die feste Leiste am unteren Rand frei. Ohne sie liegt
     das untere Ende jeder Seite darunter — ein Knopf am Seitenende ist dann
     nicht erreichbar. */
  padding-bottom: calc(var(--s8) + var(--navleiste) + var(--safe-bottom));
}


/* --- 6  Startseite: Modulauswahl ------------------------------------------ */

.begruessung { margin-bottom: var(--s5); }
.begruessung h2 { margin-bottom: var(--s1); }

.modulraster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
}

.modulkachel {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--s4);
  row-gap: var(--s1);
  min-height: 76px;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--surface);
  box-shadow: var(--sh1);
  color: var(--ink);
  text-align: left;
  transition: border-color 0.14s ease, transform 0.14s ease;
}

.modulkachel:hover { border-color: var(--brand); transform: translateY(-1px); }
.modulkachel:active { transform: translateY(0); }

.modulsymbol {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r2);
  background: var(--brand-soft);
  font-size: 1.4rem;
  line-height: 1;
}

.modulkachel strong { font-size: 1rem; }

.modulkachel small {
  color: var(--ink-3);
  font-size: 0.82rem;
  line-height: 1.35;
}

.leerhinweis {
  padding: var(--s7) var(--s5);
  border: 1px dashed var(--line-2);
  border-radius: var(--r3);
  color: var(--ink-3);
  text-align: center;
}

/* Zwei Spalten nebeneinander, sobald Platz da ist. */
.zweispalter {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
  margin-top: var(--s5);
}


/* --- 7  Navigation --------------------------------------------------------

   Am Handy eine Leiste am unteren Rand, waagerecht scrollbar, damit auch
   viele Module hineinpassen. Auf dem Desktop eine Seitenleiste links.
   -------------------------------------------------------------------------- */

.navleiste {
  grid-area: nav;
  position: fixed;
  right: 0; bottom: 0; left: 0;
  z-index: 30;
  display: flex;
  gap: var(--s1);
  padding: var(--s2);
  padding-bottom: calc(var(--s2) + var(--safe-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 -2px 12px rgba(14, 26, 20, 0.08);
  overflow-x: auto;
  scrollbar-width: none;
}

.navleiste::-webkit-scrollbar { display: none; }

/* Marke und Fußbereich gehören zur Seitenleiste und stören am Handy nur. */
.navmarke,
.navfuss { display: none; }

/* Der Umschalter der Sportart (UEBERGABE.md, Abschnitt 33.7) bleibt am Handy
   sichtbar — im Unterschied zu Marke und Fußbereich. Er ist kein Beiwerk:
   Von ihm hängt ab, welche Knöpfe rechts daneben überhaupt stehen. Er fährt
   in **derselben** Leiste mit und bekommt keine zweite; sie scrollt
   waagerecht, er sitzt an ihrem Anfang. */
.navsport {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding-right: var(--s2);
  margin-right: var(--s1);
  border-right: 1px solid var(--line);
}

.navsport select {
  min-height: var(--touch);
  max-width: 9rem;
  padding: 0 var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
}

.navliste {
  display: flex;
  gap: var(--s1);
  width: 100%;
}

.navknopf {
  display: grid;
  place-items: center;
  gap: 2px;
  flex: 1 0 auto;
  min-width: 68px;
  min-height: 52px;
  padding: var(--s1) var(--s2);
  border-radius: var(--r2);
  color: var(--ink-3);
  font-size: 0.68rem;
  font-weight: 650;
}

/* Der Verweis auf das Handbuch ist ein `<a>` und sieht trotzdem aus wie die
   Knöpfe daneben — sonst stünde in der Leiste ein unterstrichenes Wort. */
a.navknopf { text-decoration: none; }

.navknopf .symbol { font-size: 1.2rem; line-height: 1; }

.navknopf .navtext {
  max-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navknopf.aktiv { background: var(--brand-soft); color: var(--brand-ink); }
.navknopf:hover { background: var(--surface-2); color: var(--ink); }
.navknopf.aktiv:hover { background: var(--brand-soft); color: var(--brand-ink); }

/* --- 8  Netzhinweis für den Hallenbetrieb --------------------------------- */

.netzhinweis {
  display: grid;
  gap: var(--s2);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--surface-2);
  font-size: 0.85rem;
}

.netzhinweis code {
  font-family: var(--font-num);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.verbindungsanzeige {
  position: fixed;
  top: calc(var(--safe-top) + 4px);
  left: 50%;
  z-index: 60;
  padding: var(--s2) var(--s4);
  border-radius: var(--r-pill);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 0.8rem;
  font-weight: 700;
  transform: translateX(-50%);
  box-shadow: var(--sh2);
}

.verbindungsanzeige[hidden] { display: none; }


/* --- 8b  Das Band des Support-Zugriffs -------------------------------------

   UEBERGABE.md, Abschnitt 42.4. Es liegt **oben** und über allem: Wer bei
   einem Kunden ist, soll es nicht suchen müssen, sondern es zuerst sehen.

   Zwei Fassungen mit deutlich verschiedener Farbe, und das ist Absicht. Bei
   zwei Sichten (42.3) genügt es nicht, die Organisation zu nennen — die Sicht
   selbst ist das Nächste, was man verwechselt. Die Kundensicht sieht deshalb
   anders aus als die Betreibersicht, nicht nur anders beschriftet.
   -------------------------------------------------------------------------- */

.supportband {
  /* `sticky` und **im Fluss** statt `fixed`: Ein festes Band liegt über der
     Seite und verdeckt ihre erste Zeile — bei einem Zugriff auf eine fremde
     Organisation ausgerechnet die Begrüßung mit dem Namen. Im Fluss schiebt
     es den Inhalt nach unten, gleich wie hoch es umbricht, und bleibt beim
     Blättern trotzdem stehen. Es wird deshalb **vor** die Anwendung gehängt
     (web/js/supportband.js). */
  position: sticky;
  top: 0;
  z-index: 70;
  padding-top: var(--safe-top);
  box-shadow: var(--sh2);
}

.supportband[hidden] { display: none; }

.supportband-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s4);
  font-size: 0.82rem;
}

/* Betreibersicht: volle Rechte beim Kunden — die ernstere der beiden. */
.supportband-zeile.ist-betreibersicht {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Kundensicht: sieht nur zu. Ruhigere Farbe, weil hier nichts passieren kann. */
.supportband-zeile.ist-kundensicht {
  background: var(--st-ready-soft);
  color: var(--st-ready);
}

/* Beim Kunden selbst: ein Hinweis, keine Warnung. */
.supportband-zeile.ist-besuch {
  background: var(--warn-soft);
  color: var(--warn);
}

.supportband-marke {
  flex: none;
  padding: 2px var(--s3);
  border-radius: var(--r-pill);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Grund und Schrift werden **beide** genannt. Hier stand einmal
   `background: currentColor` mit einer eigenen Schriftfarbe je Fassung — und
   `currentColor` ist eben diese Schriftfarbe: Die Marke war unsichtbar. */
.ist-betreibersicht .supportband-marke {
  background: var(--danger);
  color: var(--danger-soft);
}
.ist-kundensicht .supportband-marke {
  background: var(--st-ready);
  color: var(--st-ready-soft);
}
.ist-besuch .supportband-marke {
  background: var(--warn);
  color: var(--warn-soft);
}

.supportband-text { flex: 1 1 200px; min-width: 0; }

.supportband-wahl { flex: 0 1 auto; min-width: 0; }

.supportband-wahl select {
  max-width: 100%;
  width: 220px;
  padding: 2px var(--s2);
  border: 1px solid currentColor;
  border-radius: var(--r1);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.8rem;
}

.supportband-knopf {
  /* Schrumpfen erlaubt: Der Name einer Organisation kann lang sein, und der
     Knopf soll dann kürzen statt die Seite waagerecht zu schieben. */
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  min-height: 28px;
  padding: 2px var(--s4);
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  background: transparent;
  color: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.supportband-knopf:hover { background: var(--surface); }


/* --- 9  Größere Bildschirme -----------------------------------------------

   Desktop ist gleichrangig, nicht die breitere Handyansicht.
   Siehe ARCHITEKTUR.md, Abschnitt 1.
   -------------------------------------------------------------------------- */

@media (min-width: 600px) {
  .modulraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Der untere Abstand wird eigens wiederholt. Hier stand einmal nur die
     Kurzschreibweise `padding` — und die hat den unteren Abstand aus der
     Grundregel `.inhalt` wieder eingesammelt, der die feste Navigationsleiste
     freihält. Zwischen 600 und 899 px (erst dort wird sie zur Seitenleiste)
     lag dadurch das untere Ende **jeder** Seite unter der Leiste; ein Knopf
     am Seitenende war nicht erreichbar. Aufgefallen bei 768 px — einer der
     vier Prüfbreiten aus ARCHITEKTUR.md, Abschnitt 1. */
  .inhalt {
    padding: var(--s6) var(--s5);
    padding-bottom: calc(var(--s8) + var(--navleiste) + var(--safe-bottom));
  }
}

/* Ab hier: Navigation wandert nach links in eine Seitenleiste. */
@media (min-width: 900px) {
  body { font-size: 14.5px; }

  /* Die Leiste steht jetzt links und im Fluss — unten ist nichts mehr
     freizuhalten. */
  :root { --navleiste: 0px; }

  .rahmen {
    grid-template-areas:
      "nav kopf"
      "nav inhalt";
    grid-template-columns: 248px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .navleiste {
    position: sticky;
    top: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--s5);
    height: 100dvh;
    padding: var(--s5) var(--s4);
    border-top: 0;
    border-right: 1px solid var(--line);
    background: var(--nav-bg);
    box-shadow: none;
    overflow-x: visible;
    overflow-y: auto;
  }

  .navmarke {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: 0 var(--s2);
  }

  /* Auf der Navigationsleiste steht der Federball **frei**, ohne Fläche
     darunter. Nicht aus Zufall: `--nav-bg` und `--zeichen-grund` sind heute
     derselbe Ton, und ein Kasten, der sich zufällig deckt, wird beim nächsten
     Farbwechsel zum fast passenden Fleck. Hier ist es eine Festlegung. */
  .navmarke .zeichen {
    width: 34px; height: 34px;
    background: none;
    border-radius: 0;
  }


  .navmarke-text { min-width: 0; }

  .navmarke-text strong {
    display: block;
    color: #fff;
    font-size: 0.86rem;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .navmarke-text small {
    display: block;
    color: var(--nav-ink-2);
    font-size: 0.74rem;
  }

  /* Auf dem Desktop steht der Umschalter über der Modulliste und trägt
     deren Breite — dort ist er sichtbar der Rahmen, in dem die Liste
     darunter gilt. Die dunkle Leiste verlangt eigene Farben. */
  .navsport {
    display: block;
    padding: 0 var(--s2);
    margin: 0;
    border-right: 0;
  }

  .navsport select {
    width: 100%;
    max-width: none;
    min-height: 38px;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }

  .navsport select:hover { background: rgba(255, 255, 255, 0.14); }

  /* Die Auswahlliste selbst zeichnet das Betriebssystem: Ohne eigene
     Textfarbe stünden ihre Einträge weiß auf weiß. */
  .navsport option { color: var(--ink); background: var(--surface); }

  .navliste {
    flex-direction: column;
    gap: 2px;
    width: auto;
  }

  /* Der Fußbereich sitzt unten in der Seitenleiste. */
  .navfuss {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
    padding-top: var(--s4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .navknopf {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--s4);
    flex: 0 0 auto;
    min-width: 0;
    min-height: 40px;
    padding: 0 var(--s3);
    color: var(--nav-ink);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: left;
  }

  .navknopf .symbol { font-size: 1.05rem; width: 22px; text-align: center; }

  .navknopf .navtext {
    max-width: none;
    flex: 1;
    min-width: 0;
  }

  .navknopf:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
  }

  .navknopf.aktiv,
  .navknopf.aktiv:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    box-shadow: inset 2px 0 0 var(--gold-bright);
  }

  /* Die Kopfzeile trägt nur noch den Seitentitel — die Organisation
     steht jetzt in der Seitenleiste. */
  .kopfleiste {
    padding: var(--s4) var(--s6);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
  }

  .kopfleiste h1 { color: var(--ink); font-size: 1.15rem; }
  .kopf-rolle { color: var(--ink-3); }

  /* Ab hier ist die Kopfzeile **hell**. Der Turnierknopf war zuerst für die
     dunkle Leiste des Telefons entworfen; auf Weiß ergab das einen Kontrast
     von 1,28 — er stand da und war nicht zu lesen. Gemessen und nachgezogen. */
  .kopf-turnier {
    border-color: var(--line);
    color: var(--ink-2);
    background: var(--surface-2);
  }

  .kopf-turnier:hover,
  .kopf-turnier:focus-visible { background: var(--surface-3); color: var(--ink); }

  /* Die Kopfzeile ist hier hell — weiße Schrift auf hellem Grund wäre
     unlesbar, deshalb auf die normalen Textfarben umstellen. */
  .kopf-knopf {
    background: var(--surface-2);
    color: var(--ink-2);
  }

  .kopf-knopf:hover {
    background: var(--surface-3);
    color: var(--ink);
  }

  /* Auf dem Handy führt ein Pfeil zurück; auf dem Desktop übernimmt
     das die Seitenleiste. */
  .nur-schmal { display: none; }

  .inhalt {
    padding: var(--s7) var(--s6) var(--s8);
    padding-bottom: var(--s8);
  }

  .modulraster { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

  /* Liste und Detail nebeneinander, sobald Platz da ist. */
  .zweispalter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1400px) {
  .rahmen { grid-template-columns: 272px minmax(0, 1fr); }
  .inhalt { padding: var(--s8) var(--s8); }
}

/* Geräte, die mit dem Finger bedient werden, bekommen überall volle
   Trefferflächen — auch wenn sie breit genug für die Seitenleiste sind
   (Tablet im Querformat). Die Breite allein sagt nichts über die
   Eingabeart aus. */
@media (pointer: coarse) {
  .navknopf { min-height: var(--touch); }
  /* Auch der kleine Knopf bekommt die volle Fingerfläche. 40 px sahen
     gefälliger aus, unterschreiten aber die Untergrenze aus ARCHITEKTUR.md,
     Abschnitt 1 — und „ein bisschen zu klein“ heißt am Turniertag: daneben
     getippt. */
  .knopf.klein { min-height: var(--touch); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* --- 10  Modulseite ------------------------------------------------------- */

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

.rechteliste li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r2);
  background: var(--surface-2);
  font-size: 0.9rem;
}

.rechteliste .haken {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: 0.75rem;
  font-weight: 800;
}

.kopfleiste #zurueck {
  padding: 0 var(--s4);
}


/* --- 11  Erklärungssymbol -------------------------------------------------
   Ein kleines „i“ neben einer Beschriftung. Der Text erscheint bei
   Mauszeiger darüber und bei Tastatur- oder Fingerbedienung, sobald das
   Symbol den Fokus hat. Bewusst ohne JavaScript: ein Knopf bekommt beim
   Antippen den Fokus, damit funktioniert es auf dem Handy genauso.
   -------------------------------------------------------------------------- */

.info-anker {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.info-i {
  position: relative;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: var(--s2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 0.7rem;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  cursor: help;
}

/* Das Symbol bleibt klein, die Trefferfläche wird unsichtbar größer.
   Ein 18px-Knopf ist mit dem Finger kaum zu treffen; ihn sichtbar auf 44px
   aufzublasen würde die Beschriftung sprengen. Deshalb ein unsichtbares
   Feld darüber, das die Fingerregel erfüllt. */
.info-i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.info-i:hover,
.info-i:focus-visible {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-ink);
}

.info-text {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 70;
  width: max-content;
  max-width: min(280px, 70vw);
  padding: var(--s4);
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  box-shadow: var(--sh3);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  visibility: hidden;
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.18s;
}

.info-i:hover + .info-text,
.info-i:focus + .info-text {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
  transition-delay: 0s;
}

/* Auf schmalen Geräten hängt das Feld NICHT mehr am Symbol.
   Begründung: Das Symbol kann irgendwo stehen — mal links, mal rechts in
   einem Feldpaar. Jede Ausrichtung am Symbol ragt dann auf einer Seite über
   den Bildschirmrand. Deshalb wird das Feld hier am Fenster ausgerichtet und
   sitzt über der Navigationsleiste. Es passt dadurch immer, unabhängig
   davon, wo das Symbol steht. */
@media (max-width: 640px) {
  .info-text {
    position: fixed;
    top: auto;
    right: var(--s4);
    bottom: calc(76px + var(--safe-bottom));
    left: var(--s4);
    width: auto;
    max-width: none;
    transform: translateY(6px);
  }

  .info-i:hover + .info-text,
  .info-i:focus + .info-text {
    transform: translateY(0);
  }
}

/* Frischeleiste über den selbst aktualisierenden Reitern.
   Sie beantwortet die Frage, die man sich sonst stillschweigend stellt:
   „Sehe ich gerade den aktuellen Stand?“ (UEBERGABE.md, Abschnitt 15.2 c) */
.frischeleiste {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}

.frischeleiste .zusatztext { margin: 0; }

/* Der Hinweis erscheint nur, wenn wegen einer offenen Eingabe pausiert wurde
   und sich in der Zwischenzeit etwas geändert hat. */
.frische-neu {
  padding: 2px var(--s2);
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 13px;
  font-weight: 600;
}

.frischeleiste .knopf.dezent.klein { margin-left: auto; }

/* Die Liste darunter. Sie steht **im Fluss** und nicht als schwebendes Menü:
   Ein Überlagerungsmenü müsste sich um Bildschirmränder, Rollposition und das
   Schließen bei einem Klick daneben kümmern — für eine Liste, die einmal am
   Tag benutzt wird, ist das viel Maschinerie für wenig Gewinn. */
.wechsler {
  display: grid;
  gap: var(--s3);
  margin-bottom: var(--s4);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface-2);
}

/* Die kleinen Überschriften, die Turniere von Begegnungen absetzen. Sie
   stehen nur da, wenn es beides gibt — sonst ordneten sie nichts. */
.wechsler-gruppe {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Zwischen zwei Gruppen etwas mehr Luft als zwischen zwei Einträgen: Das
   Absetzen soll man sehen, ohne die Überschrift zu lesen. */
.wechsler-gruppe + .wechslerliste { margin-bottom: var(--s2); }

.wechslerliste {
  display: grid;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 40vh;
  overflow-y: auto;
}

.wechslerliste button {
  display: grid;
  gap: 1px;
  width: 100%;
  min-height: var(--touch);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Die Sprünge am Fuß. Nebeneinander, wenn Platz ist, sonst untereinander —
   bei 360 px stünden „Turniere verwalten →“ und „Begegnungen verwalten →“
   sonst gequetscht in einer Zeile. */
.wechsler-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  justify-content: center;
}

.wechslerliste button:hover { border-color: var(--brand); }
.wechslerliste button.gewaehlt { border-color: var(--brand); background: var(--brand-soft); }
.wechslerliste small { color: var(--ink-3); font-size: 0.78rem; }

/* Eine Frage mit mehreren Antworten (UEBERGABE.md, 13.32): Am Telefon
   untereinander, damit keiner davon zur Schaltfläche für den Daumen wird. */
.dialogknoepfe-viele { flex-wrap: wrap; }
@media (max-width: 520px) {
  .dialogknoepfe-viele { flex-direction: column-reverse; align-items: stretch; }
}