/* LZ8 App, Grundstil.
   Farben kommen ausschliesslich aus /theme.css als CSS-Variablen. In dieser
   Datei steht kein einziger Farbwert fest, sonst waere er im Admin-Bereich
   nicht mehr aenderbar.
   Regel: keine Inline-Styles, keine Inline-Handler. Sonst kippt die CSP. */

/* ---------- Schrift, lokal ausgeliefert ---------- */
/* Kein Google-Fonts-Aufruf: die CSP erlaubt kein fremdes Ziel, und der Aufruf
   waere zugleich eine Datenuebermittlung, die niemand braucht.
   font-display: swap zeigt sofort Text statt einer leeren Flaeche. */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/barlow-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/barlow-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/barlow-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/barlow-latin-700-normal.woff2') format('woff2');
}

/* ---------- Masse ---------- */
:root {
  --abstand-xs: 4px;
  --abstand-s: 8px;
  --abstand-m: 16px;
  --abstand-l: 24px;
  --abstand-xl: 32px;
  --radius: 12px;
  --radius-klein: 8px;
  /* 44 Punkt ist die kleinste zuverlaessig treffbare Flaeche. Die App wird im
     Stehen, in der Halle und teils mit klammen Fingern bedient. */
  --tippflaeche: 44px;
  --inhalt-breite: 720px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  /* 100dvh statt 100vh: auf dem Handy waechst und schrumpft die Adressleiste. */
  min-height: 100dvh;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  font-family: 'Barlow', system-ui, -apple-system, sans-serif;
  /* 16px Grundgroesse, damit iOS beim Antippen von Eingabefeldern nicht zoomt. */
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-strong);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Verweise tragen den Akzent, nicht das Browserblau. accent-strong statt
   accent, weil ein Verweis auch auf der hellen Akzentflaeche lesbar bleiben
   muss. */
a { color: var(--accent-strong); }

/* Symbole stehen meist in einem Flex-Kasten, wo display egal ist. Steht eines
   mitten im Text, wuerde display: block aus dem Reset eine eigene Zeile
   erzwingen. */
.symbol { display: inline-block; vertical-align: -0.15em; }

/* Ein hidden-Attribut muss auch dann gelten, wenn eine Klasse display setzt.
   Ohne diese Zeile bleibt ein <p class="band" hidden> sichtbar: die Klasse
   gewinnt gegen die Vorgabe des Browsers, und auf der Seite steht ein leerer
   Kasten. Das !important ist hier richtig, hidden ist eine Ansage. */
[hidden] { display: none !important; }

/* ---------- Sichtbarer Fokus ---------- */
/* Niemals entfernen. Ohne sichtbaren Fokus ist die App per Tastatur unbedienbar. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-klein);
}

/* ---------- Nur fuer Vorlesewerkzeuge ---------- */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprungmarke {
  position: absolute;
  left: var(--abstand-s);
  top: -100px;
  z-index: 100;
  padding: var(--abstand-s) var(--abstand-m);
  background: var(--card);
  color: var(--text-strong);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-klein);
  transition: top 120ms ease-out;
}
.sprungmarke:focus { top: var(--abstand-s); }

/* ---------- Kopfzeile ---------- */
/* Bleibt in beiden Modi dunkel, damit die Marke stabil bleibt. */
.kopfzeile {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  padding: var(--abstand-s) var(--abstand-m);
  /* Platz fuer die Statusleiste des iPhones im installierten Zustand. */
  padding-top: calc(var(--abstand-s) + env(safe-area-inset-top));
  background: var(--header);
  color: var(--header-text);
  /* Die Markenkante: das Rot des Logos, die einzige Stelle im ganzen
     Projekt, an der --brand vorkommt. Es traegt hier keinen Text, deshalb
     darf es die 4,5 zu 1 reissen. Rot als Bedienfarbe bleibt verboten. */
  border-bottom: 3px solid var(--brand);
}

.kopfzeile__titel {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kopfzeile__knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tippflaeche);
  height: var(--tippflaeche);
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--header-text);
  cursor: pointer;
  border-radius: var(--radius-klein);
}
.kopfzeile__knopf:hover { background: rgb(255 255 255 / 0.1); }
.kopfzeile__knopf:active { transform: scale(0.94); }
.kopfzeile__knopf:focus-visible { outline-color: var(--header-text); }

/* Haelt den Titel mittig, wenn auf einer Seite ohne Anmeldung kein Knopf
   danebensteht. */
.kopfzeile__platz {
  width: var(--tippflaeche);
  height: var(--tippflaeche);
  flex-shrink: 0;
}

/* ---------- Burger-Menue ---------- */
.menue-schleier {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(0 0 0 / 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out;
}
.menue-schleier[data-offen='ja'] { opacity: 1; pointer-events: auto; }

.menue {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 41;
  width: min(300px, 84vw);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
  transition: transform 200ms ease-out;
  overflow-y: auto;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.menue[data-offen='ja'] { transform: translateX(0); }

.menue__kopf {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  padding: var(--abstand-m);
  background: var(--header);
  color: var(--header-text);
}
.menue__kopf-titel { flex: 1; font-weight: 600; letter-spacing: 0.04em; }

.menue__gruppe {
  padding: var(--abstand-m) var(--abstand-m) var(--abstand-xs);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.menue__eintrag {
  display: flex;
  align-items: center;
  gap: var(--abstand-m);
  min-height: var(--tippflaeche);
  padding: var(--abstand-s) var(--abstand-m);
  color: var(--text-strong);
  text-decoration: none;
  border-left: 3px solid transparent;
}
/* Die Themenwahl sind Knoepfe, keine Verweise. Sie sollen aber genauso
   aussehen wie die uebrigen Eintraege. */
button.menue__eintrag {
  width: 100%;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  text-align: left;
  cursor: pointer;
}
.menue__eintrag:hover { background: var(--surface); }
.menue__eintrag[aria-pressed='true'] {
  border-left-color: var(--accent);
  color: var(--accent-strong);
  font-weight: 500;
  background: var(--accent-soft);
}
.menue__eintrag[aria-current='page'] {
  border-left-color: var(--accent);
  color: var(--accent-strong);
  font-weight: 500;
  background: var(--accent-soft);
}

/* ---------- Inhalt ---------- */
.inhalt {
  max-width: var(--inhalt-breite);
  margin: 0 auto;
  padding: var(--abstand-m);
  padding-bottom: calc(var(--abstand-xl) + env(safe-area-inset-bottom));
}

/* Anmeldung, Passwortwechsel und Bestaetigungsseiten: eine Spalte, in der das
   Auge nicht suchen muss. */
.inhalt--schmal { max-width: 440px; }

.seitentitel {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: var(--abstand-m);
}

/* Weg zurueck, immer an derselben Stelle ueber dem Seitentitel. */
.zurueck {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-xs);
  min-height: 32px;
  margin-bottom: var(--abstand-xs);
  font-size: 14px;
  text-decoration: none;
}
.zurueck:hover { text-decoration: underline; }

/* Titel links, Hauptaktion rechts. */
.seitenkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-m);
  margin-bottom: var(--abstand-m);
}
.seitenkopf .seitentitel { margin-bottom: 0; }

/* Kleine Zeile ueber einer Ueberschrift, etwa die Art eines Termins. Sie
   beantwortet "worum geht es", bevor der Titel sagt "was genau". */
.kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.seitentitel--nach-kicker { margin-top: 2px; }
/* Der Beschreibungstext direkt unter dem Seitentitel. Groesser als der
   Fliesstext einer Karte: er sagt, was an dem Abend gemacht wird. */
.seitenvorspann {
  margin-top: calc(-1 * var(--abstand-xs));
  margin-bottom: var(--abstand-m);
  color: var(--text-muted);
  line-height: 1.45;
}

.abschnitt { margin-bottom: var(--abstand-l); }
.abschnitt__titel {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--abstand-s);
}

/* ---------- Karte ---------- */
/* Rand statt Schatten, so steht es im Design. */
.karte {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--abstand-m);
}
.karte + .karte { margin-top: var(--abstand-s); }
.karte__hinweis { font-size: 13px; color: var(--text-muted); }
.karte__wert { font-size: 22px; font-weight: 600; line-height: 1.2; }
/* Zahlen in Spalten springen sonst bei jeder Aenderung. */
.zahl { font-variant-numeric: tabular-nums; }

a.karte, button.karte {
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Verweis innerhalb einer Karte, wenn darunter noch Knoepfe stehen. Die ganze
   Karte zum Verweis zu machen ginge nicht: ein Formular in einem Verweis ist
   kein gueltiges HTML. */
.karte__verweis { display: block; color: inherit; text-decoration: none; }
.karte__verweis:hover .karte__wert { color: var(--accent-strong); }
a.karte:hover, button.karte:hover { border-color: var(--border-control); }
a.karte:active, button.karte:active { transform: scale(0.995); }

/* ---------- Knopf ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-s);
  min-height: var(--tippflaeche);
  padding: 0 var(--abstand-l);
  border-radius: var(--radius-klein);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  background: var(--accent);
  color: var(--on-accent);
  transition: filter 140ms ease-out, transform 140ms ease-out;
}
.knopf:hover { filter: brightness(1.08); }
.knopf:active { transform: scale(0.97); }

.knopf--zweit {
  background: var(--card);
  color: var(--text-strong);
  border-color: var(--border-control);
}
.knopf--zweit:hover { background: var(--surface); filter: none; }

.knopf--still {
  background: none;
  color: var(--accent-strong);
  border-color: transparent;
}
.knopf--still:hover { background: var(--accent-soft); filter: none; }

/* Zerstoerende Aktionen: Rot ist hier zulaessig, weil es Fehler und Verlust
   bedeutet. Bewusst raeumlich getrennt von der Hauptaktion platzieren. */
.knopf--gefahr { background: var(--error); color: #ffffff; }

/* Griff an einer Listenzeile: Haken und Kreuz, mit denen die Fuehrung eine
   Person auf dabei oder nicht dabei setzt. Quadratisch statt breit, damit
   beide neben einem Namen noch auf 375 Punkte passen; die Tippflaeche bleibt
   die volle, sie haengt an Hoehe und Breite gleichermassen.

   Der gesetzte Zustand ist gefuellt. Die Farbe traegt ihn nicht allein: die
   beiden Symbole sind verschieden, und ueber der Liste steht in Worten, was
   sie enthaelt. */
.knopf--griff {
  padding: 0;
  width: var(--tippflaeche);
  background: none;
  border-color: transparent;
  color: var(--text-muted);
}
.knopf--griff:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
  filter: none;
}
/* Dieselben Paare wie .plakette--erfolg und --warnung: dort ist der Kontrast
   schon gerechnet. */
.knopf--griff[aria-pressed='true'] {
  background: var(--success-soft);
  color: var(--success);
}
.knopf--griff-nein[aria-pressed='true'] {
  background: var(--warning-soft);
  color: var(--warning);
}

.knopf[disabled], .knopf[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

.knopf--voll { width: 100%; }
.knopf-reihe { display: flex; gap: var(--abstand-s); flex-wrap: wrap; }

/* ---------- Plakette ---------- */
.plakette {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  background: var(--accent-soft);
  /* accent-strong statt accent: der regulaere Akzent kaeme auf dieser Flaeche
     nur auf 4,16 zu 1. */
  color: var(--accent-strong);
}
.plakette--erfolg  { background: var(--success-soft); color: var(--success); }
.plakette--warnung { background: var(--warning-soft); color: var(--warning); }
.plakette--fehler  { background: var(--error-soft);   color: var(--error); }
.plakette--still   { background: var(--surface);      color: var(--text-muted); }

/* Statusfarben nie als einziges Signal. Der Punkt traegt zusaetzlich eine Form,
   und daneben steht immer Text. */
.punkt {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}


/* ---------- Meldeband ---------- */
.band {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-s);
  padding: 12px var(--abstand-m);
  /* Keine runden Ecken bei einseitigem Rand, das sieht sonst abgeschnitten aus. */
  border-radius: 0;
  border-left: 3px solid;
  font-size: 14px;
}
.band__symbol { flex-shrink: 0; margin-top: 2px; }
.band--hinweis { background: var(--accent-soft);  border-color: var(--accent);  color: var(--accent-strong); }
.band--erfolg  { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.band--warnung { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.band--fehler  { background: var(--error-soft);   border-color: var(--error);   color: var(--error); }
.band + .band { margin-top: var(--abstand-xs); }

/* Meldungen einer Aktion. Sie stehen oben im Inhalt, dort gehoeren sie hin.
   Behaelt die Seite nach einer Aktion ihre Stelle, waeren sie ausserhalb des
   Bildes: dann haengt basis.js sie an den unteren Rand, damit eine Buchung
   nicht stillschweigend quittiert wird. Unter dem Menue (40) und ueber dem
   normalen Inhalt. */
.meldungen--schwebend {
  position: fixed;
  left: var(--abstand-m);
  right: var(--abstand-m);
  bottom: var(--abstand-m);
  z-index: 35;
  max-width: var(--inhalt-breite);
  margin-inline: auto;
}

/* ---------- Formular ---------- */
.feld { margin-bottom: var(--abstand-m); }

/* Sichtbare Beschriftung, kein Platzhalter als Ersatz. Ein Platzhalter
   verschwindet beim Tippen, und dann weiss niemand mehr, was gefragt war. */
.feld__beschriftung {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
}
.feld__pflicht { color: var(--error); margin-left: 2px; }

.feld__eingabe {
  display: block;
  width: 100%;
  min-height: var(--tippflaeche);
  padding: 10px 12px;
  background: var(--card);
  color: var(--text-strong);
  /* border-control statt border: WCAG verlangt fuer Bedienelemente 3 zu 1. */
  border: 1px solid var(--border-control);
  border-radius: var(--radius-klein);
}
.feld__eingabe::placeholder { color: var(--text-muted); }
.feld__eingabe:hover { border-color: var(--accent); }
textarea.feld__eingabe { min-height: 96px; resize: vertical; }

.feld__hilfe { margin-top: 6px; font-size: 13px; color: var(--text-muted); }
/* Fehler steht unter dem betroffenen Feld, nicht gesammelt oben. */
.feld__fehler {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--error);
}
.feld__eingabe[aria-invalid='true'] { border-color: var(--error); }

.feld__auswahlzeile {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  min-height: var(--tippflaeche);
  cursor: pointer;
}
.feld__auswahl { width: 20px; height: 20px; accent-color: var(--accent); flex-shrink: 0; }
/* Umbrechend, nicht abgeschnitten: an einem Kaestchen steht die Frage, die
   man beantwortet. */
.feld__auswahltitel { display: block; font-size: 15px; }
/* Mehrere Kaestchen untereinander brauchen eine Trennung, sonst verschwimmen
   Beschriftung und Unterzeile der naechsten Zeile ineinander. */
.feld__auswahlzeile + .feld__auswahlzeile { border-top: 1px solid var(--border); }

/* Eingabefeld mit einem Knopf daneben, etwa das Auge am Passwortfeld. */
.feld__gruppe { display: flex; gap: var(--abstand-s); align-items: stretch; }
.feld__gruppe .feld__eingabe { flex: 1; min-width: 0; }

.feld__knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tippflaeche);
  min-height: var(--tippflaeche);
  flex-shrink: 0;
  background: var(--card);
  color: var(--text-muted);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-klein);
  cursor: pointer;
}
.feld__knopf:hover { color: var(--text-strong); border-color: var(--accent); }
.feld__knopf[aria-pressed='true'] {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--accent);
}

/* Ein Formular je Aktion, damit jeder Knopf ein POST ausloest. Ohne diese
   Zeile stuenden die Formulare als Bloecke untereinander statt in einer Reihe. */
.aktionsform { display: inline-block; }

/* Aufzaehlung. Der Reset nimmt Listen ihre Einzuege, hier werden sie gebraucht. */
.aufzaehlung { padding-left: var(--abstand-l); }
.aufzaehlung li { margin-bottom: var(--abstand-xs); }

/* Technische Werte im Fliesstext, etwa ein Rechtename. */
code {
  font-family: ui-monospace, monospace;
  font-size: 0.9em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
}

/* Zeile aus Feldern, die zusammen ein kleines Formular ergeben, etwa je ein
   Dienstgrad. Bricht auf schmalen Fenstern von selbst um. */
.zeilenform {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-s);
}
.zeilenform__breit { flex: 1 1 180px; min-width: 0; }
.zeilenform__schmal { flex: 0 0 96px; }
/* In einer Zeilenform stehen die Kaestchen nebeneinander. Die Trennlinie aus
   der gestapelten Liste liegt dort quer ueber dem Kaestchen und sieht nach
   einem Fehler aus. */
.zeilenform .feld__auswahlzeile + .feld__auswahlzeile { border-top: none; }

/* Farbzeile im Erscheinungsbild: Waehler, Erklaerung, Hexwert. */
.farbzeile {
  display: flex;
  align-items: center;
  gap: var(--abstand-m);
  padding: var(--abstand-s) 0;
}
.farbzeile + .farbzeile { border-top: 1px solid var(--border); }
.farbzeile__text { flex: 1; min-width: 0; }
.farbzeile__text .feld__beschriftung { margin-bottom: 0; font-family: monospace; }
.farbzeile__wahl {
  width: var(--tippflaeche);
  height: var(--tippflaeche);
  flex-shrink: 0;
  padding: 2px;
  background: var(--card);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-klein);
  cursor: pointer;
}
.farbzeile__wert {
  flex: 0 0 108px;
  font-family: monospace;
  text-transform: lowercase;
}

/* ---------- Mengenwaehler ----------
 * Minus, Zahl, Plus. Auf dem Deckel wird fast immer eine Einheit gebucht, und
 * wer doch drei will, soll dafuer nicht die Tastatur des Handys aufziehen
 * muessen.
 *
 * In der Mitte steht ein gewoehnliches Zahlenfeld. Ohne Skript tun die beiden
 * Knoepfe nichts, das Feld bleibt aber bedienbar: eine Menge, die sich ohne
 * JavaScript gar nicht eingeben liesse, waere ein Rueckschritt. */
/* Nicht breiter als noetig: eine dreistellige Menge gibt es nicht, und ueber
   die ganze Breite gezogen sieht der Waehler nach einem Textfeld aus. */
.menge { display: flex; align-items: stretch; max-width: 168px; }
.menge__knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--tippflaeche);
  min-height: var(--tippflaeche);
  color: var(--text-strong);
  background: var(--card);
  border: 1px solid var(--border-control);
  cursor: pointer;
}
.menge__knopf:first-child { border-radius: var(--radius-klein) 0 0 var(--radius-klein); }
.menge__knopf:last-child { border-radius: 0 var(--radius-klein) var(--radius-klein) 0; }
.menge__knopf:hover { border-color: var(--accent); color: var(--accent-strong); }
.menge__knopf:disabled { color: var(--text-muted); cursor: default; }
.menge__knopf:disabled:hover { border-color: var(--border-control); color: var(--text-muted); }
/* Steht nach .feld__eingabe, damit diese Regeln gewinnen. */
.menge__wert {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  border-radius: 0;
  border-left: none;
  border-right: none;
}
/* Die Pfeilchen des Browsers stuenden neben den eigenen Knoepfen doppelt. */
.menge__wert::-webkit-outer-spin-button,
.menge__wert::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.menge__wert { -moz-appearance: textfield; appearance: textfield; }

/* ---------- Liste ---------- */
/* Bordierte Zeilen statt einzelner Karten: bei dichten Listen ist das ruhiger. */
.liste {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.liste__zeile {
  display: flex;
  align-items: center;
  gap: var(--abstand-m);
  min-height: 56px;
  padding: 10px var(--abstand-m);
  text-decoration: none;
  color: inherit;
}
.liste__zeile + .liste__zeile { border-top: 1px solid var(--border); }
a.liste__zeile:hover, button.liste__zeile:hover { background: var(--surface); }
/* Eine Zeile darf auch ein Knopf sein, etwa ein Produkt auf dem Deckel: ein
   Verweis waere dort falsch, weil er nichts abschickt. Der Knopf bringt eigene
   Voreinstellungen mit, die ihn sonst aus der Zeile fallen lassen. */
button.liste__zeile {
  width: 100%;
  font: inherit;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}
/* Als span ausgezeichnet, damit sie auch in einem Verweis stehen duerfen.
   Ohne display: block stuenden Titel und Unterzeile nebeneinander. */
.liste__haupt { display: block; flex: 1; min-width: 0; }
.liste__titel {
  display: block;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.liste__unter {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Ganze Saetze statt Stichwort: die Begruendung einer Auslosung ist ein Satz
   und wird abgeschnitten unbrauchbar. Deshalb ein eigener Zusatz statt einer
   Aenderung an .liste__unter, sonst verlieren alle Listen ihre feste
   Zeilenhoehe. */
.liste__unter--lang { white-space: normal; overflow: visible; }

/* Ueber dem Titel, nicht darunter: die Art eines Termins entscheidet, ob man
   die Zeile ueberhaupt weiterliest. Klein und in Grossbuchstaben, damit sie
   den Titel nicht ueberstimmt. */
.liste__kicker {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Angesprungen aus dem Monatsraster. Ohne diese Hervorhebung klickt man auf
   einen Tag, die Seite springt, und man sucht die gemeinte Zeile selbst. */
.liste__zeile:target { background: var(--accent-soft); }

/* "Weitere Termine" als letzte Zeile derselben Liste: gleicher Rahmen, gleiche
   Breite, nur flacher und mittig. Ein eigener Knopf darunter sah aus, als
   gehoerte er nicht mehr dazu. */
.liste__mehr {
  justify-content: center;
  gap: var(--abstand-s);
  min-height: 40px;
  padding-top: var(--abstand-s);
  padding-bottom: var(--abstand-s);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-strong);
}

.liste__rand { flex-shrink: 0; color: var(--text-muted); }


/* ---------- Monatsraster ---------- */
/* Sieben Spalten, Montag zuerst. Geblaettert wird ueber Verweise, deshalb
   braucht das Raster kein einziges Skript. */
.monat__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-s);
  margin-bottom: var(--abstand-s);
}
.monat__titel { font-size: 17px; font-weight: 600; }
/* Auch der leere Platzhalter an der Blaettergrenze haelt die Breite, sonst
   rutscht der Monatsname aus der Mitte. */
.monat__pfeil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tippflaeche);
  min-height: var(--tippflaeche);
  padding: 0;
}

.monat__gitter {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.monat__gitter + .monat__gitter { margin-top: 2px; }
.monat__gitter--kopf { margin-bottom: var(--abstand-xs); }
.monat__wochentag {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.monat__tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 48px;
  padding: 6px 2px;
  border: 1px solid transparent;
  border-radius: var(--radius-klein);
  color: inherit;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
/* Nur Tage mit Terminen sind anklickbar und heben sich deshalb ab. */
a.monat__tag { background: var(--surface); border-color: var(--border); }
a.monat__tag:hover { border-color: var(--border-control); }
.monat__tag--fremd { color: var(--text-muted); }
.monat__tag--heute { border-color: var(--accent); }
.monat__tag--heute .monat__zahl { font-weight: 700; color: var(--accent-strong); }
.monat__zahl { font-size: 14px; line-height: 1; }

/* Der Punkt sagt "hier ist etwas", nicht "hier ist was Bestimmtes". Was genau,
   steht als Text in der Liste unter dem Raster. Farbe allein traegt hier also
   keine Aussage. */
.monat__punkte { display: flex; gap: 3px; min-height: 6px; }
.monat__punkt {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.monat__punkt--abgesagt {
  background: none;
  border: 1px solid var(--text-muted);
}

/* ---------- Tabelle ---------- */
.tabelle-rahmen {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th, .tabelle td {
  padding: 10px var(--abstand-m);
  text-align: left;
  white-space: nowrap;
}
.tabelle th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.tabelle tbody tr + tr td { border-top: 1px solid var(--border); }
.tabelle td.zahl { text-align: right; font-variant-numeric: tabular-nums; }
/* Freitext darf umbrechen. Ohne diese Ausnahme zieht eine lange Beschreibung
   die Tabelle in die Breite, und alles Uebrige rutscht aus dem Blick. */
.tabelle td.tabelle__lang { white-space: normal; min-width: 220px; }

/* Breite Tabellen auf einem Handy: die Namensspalte bleibt stehen, die Zahlen
   wandern seitwaerts. Bei fuenfzehn Spalten sucht man sonst auf einem iPhone,
   zu wem eine Zahl gehoert.
   Ausdruecklich als Zusatz und nicht an .tabelle: eine Tabelle mit drei
   Spalten braucht das nicht, und eine haftende Spalte, die nie haftet, ist
   nur eine Stelle mehr, an der etwas schiefgehen kann. */
.tabelle--namen {
  /* collapse und sticky vertragen sich nicht: der Rahmen einer haftenden
     Zelle wandert mit dem Inhalt davon. Deshalb separate, die Linien haengen
     dann an den Zellen selbst. */
  border-collapse: separate;
  border-spacing: 0;
}
.tabelle--namen th:first-child,
.tabelle--namen td:first-child {
  position: sticky;
  left: 0;
  /* Ohne eigene Flaeche scheinen die Zahlen beim Wischen durch den Namen. */
  background: var(--card);
  border-right: 1px solid var(--border);
}

/* ---------- Balken ---------- */
.balken {
  height: 8px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.balken__wert { height: 100%; background: var(--accent); }
.balken__wert--warnung { background: var(--warning); }
.balken__wert--still   { background: var(--text-muted); }

/* ---------- Fotoleiste ---------- */
/* Fuer Anhaenge an einer Meldung. Die Bilder kommen aus einer Route mit
   Rechtepruefung, nicht aus static/. Feste Hoehe und object-fit, damit ein
   Hochkantfoto die Zeile nicht auseinanderzieht; das ganze Bild gibt es beim
   Antippen. */
.fotos {
  display: flex;
  gap: var(--abstand-s);
  flex-wrap: wrap;
}
.fotos__verweis {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-klein);
  overflow: hidden;
  line-height: 0;
}
.fotos__verweis:hover { border-color: var(--accent); }
.fotos__bild {
  width: 104px;
  height: 104px;
  object-fit: cover;
  display: block;
}

/* ---------- Leerer Zustand ---------- */
/* Eine Einladung, keine Entschuldigung. Kein "Nichts vorhanden". */
.leer {
  text-align: center;
  padding: var(--abstand-xl) var(--abstand-m);
  border: 1px dashed var(--border-control);
  border-radius: var(--radius);
}
.leer__titel { font-size: 17px; font-weight: 500; margin-bottom: var(--abstand-xs); }
.leer__text { font-size: 14px; color: var(--text-muted); margin-bottom: var(--abstand-m); }

/* ---------- Ladezustand ---------- */
/* Platzhalter statt Kreisel: die Seite behaelt ihre Hoehe und springt nicht. */
.laden {
  background: var(--border);
  border-radius: var(--radius-klein);
  animation: pulsieren 1.4s ease-in-out infinite;
}
.laden--zeile { height: 14px; }
.laden--titel { height: 22px; width: 60%; }
@keyframes pulsieren { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ---------- Fehlerseite ---------- */
.fehlerseite {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70dvh;
  text-align: center;
  gap: var(--abstand-s);
}
.fehlerseite__code { font-size: 56px; font-weight: 700; color: var(--text-muted); line-height: 1; }
.fehlerseite__titel { font-size: 20px; font-weight: 600; }
.fehlerseite__text { color: var(--text-muted); max-width: 34ch; }

/* ---------- Rechtstext ----------
   Impressum und Datenschutzerklaerung. Laengerer Fliesstext, wie ihn sonst
   keine Seite dieser App hat: hier wird gelesen und nicht bedient. Deshalb
   etwas mehr Zeilenhoehe und echte Ueberschriften statt der Kickerzeile, die
   ueber den Karten steht. */
.rechtstext { line-height: 1.6; }
.rechtstext p { margin-bottom: var(--abstand-m); }
.rechtstext p:last-child { margin-bottom: 0; }
.rechtstext__titel {
  font-size: 17px;
  font-weight: 600;
  margin-top: var(--abstand-l);
  margin-bottom: var(--abstand-s);
}
.rechtstext__abschnitt:first-of-type .rechtstext__titel { margin-top: 0; }
.rechtstext .aufzaehlung { margin-bottom: var(--abstand-m); }
.rechtstext dt { font-weight: 600; margin-top: var(--abstand-s); }
.rechtstext dd { color: var(--text-muted); }

/* Eine Angabe aus den Einstellungen. Mehrzeiliges wie die Anschrift behaelt
   seine Umbrueche: wer sie im Admin-Bereich eingibt, meint sie auch. */
.angabe--mehrzeilig { display: block; white-space: pre-line; }

.rechtstext__stand {
  margin-top: var(--abstand-l);
  padding-top: var(--abstand-m);
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}

/* ---------- Fusszeile ----------
   Steht unter jeder Seite, auch vor der Anmeldung und am geteilten Geraet.
   Impressum und Datenschutzerklaerung muessen von ueberall aus mit einem Griff
   erreichbar sein, sonst sind sie es im Zweifel gar nicht. Ruhig gehalten: sie
   ist eine Pflichtangabe, keine Bedienung. */
.fusszeile {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: var(--abstand-m);
  padding-bottom: calc(var(--abstand-m) + env(safe-area-inset-bottom));
  font-size: 13px;
  color: var(--text-muted);
}
.fusszeile__inhalt {
  max-width: var(--inhalt-breite);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-xs) var(--abstand-m);
}
.fusszeile__name { flex: 1; min-width: 0; }
.fusszeile a {
  color: var(--text-muted);
  text-decoration: underline;
  /* Ein Verweis in der Fusszeile ist klein. Die Tippflaeche darf es nicht
     sein: 44 Punkt sind die Untergrenze, auch hier unten. */
  display: inline-flex;
  align-items: center;
  min-height: var(--tippflaeche);
}
.fusszeile a:hover { color: var(--accent-strong); }

/* ---------- Hilfsklassen ----------
   Ersetzen die style-Attribute, die eine strenge CSP verbietet. Bewusst wenige
   und benannte, kein vollstaendiges Klassensystem. */
.mt-xs { margin-top: var(--abstand-xs); }
.mt-s  { margin-top: var(--abstand-s); }
.mt-m  { margin-top: var(--abstand-m); }
.mt-l  { margin-top: var(--abstand-l); }
.mb-s  { margin-bottom: var(--abstand-s); }
.mb-m  { margin-bottom: var(--abstand-m); }

.reihe-verteilt {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--abstand-s);
  font-size: 13px;
  /* Umbruch statt Ueberlauf: auf einem Handy stehen hier zwei Plaketten
     nebeneinander, und "WT-TM · TLF 3000" passt nicht immer daneben. */
  flex-wrap: wrap;
}

/* Balkenbreite in Fuenferschritten.
   Die Breite kommt aus Daten und muesste eigentlich ins style-Attribut, was die
   CSP verbietet. attr() fuer Laengen unterstuetzen die Browser noch nicht
   verlaesslich, deshalb diese Stufen. Fuer einen Fairness-Balken ist die
   Genauigkeit von fuenf Prozent mehr als ausreichend, und der genaue Wert steht
   ohnehin als Zahl daneben. */
.b-0   { width: 0; }
.b-5   { width: 5%; }
.b-10  { width: 10%; }
.b-15  { width: 15%; }
.b-20  { width: 20%; }
.b-25  { width: 25%; }
.b-30  { width: 30%; }
.b-35  { width: 35%; }
.b-40  { width: 40%; }
.b-45  { width: 45%; }
.b-50  { width: 50%; }
.b-55  { width: 55%; }
.b-60  { width: 60%; }
.b-65  { width: 65%; }
.b-70  { width: 70%; }
.b-75  { width: 75%; }
.b-80  { width: 80%; }
.b-85  { width: 85%; }
.b-90  { width: 90%; }
.b-95  { width: 95%; }
.b-100 { width: 100%; }

/* ---------- Rueckfrage ----------
 * Der Dialog des Browsers sieht auf jedem Geraet anders aus, laesst sich nicht
 * beschriften und traegt den Namen des Servers in der Ueberschrift. Deshalb ein
 * eigener, im Farbschema der App.
 *
 * Das native dialog-Element traegt es: es bringt Fokusfalle, Escape und die
 * oberste Ebene selbst mit, ohne z-index-Wettruesten mit dem Menue. Der Rahmen
 * ist eine Karte wie ueberall, Schatten gibt es hier bewusst doch, weil die
 * Flaeche ueber allem liegt und sich absetzen muss. */

.dialog {
  border: none;
  background: none;
  padding: var(--abstand-m);
  max-width: min(420px, 100%);
  /* Der Browser zentriert einen modalen Dialog ueber margin:auto. Der Reset
     ganz oben setzt margin:0 auf alles, damit klebte er in der Ecke.
     Aufgefallen beim Ansehen im Browser, nicht in den Tests. */
  margin: auto;
  max-height: 100%;
  overflow-y: auto;
  color: var(--text-strong);
}
.dialog::backdrop {
  /* Dunkler Schleier in beiden Modi. Auf ::backdrop wirken die Variablen der
     Seite nicht, deshalb hier ein fester Wert. */
  background: rgba(0, 0, 0, 0.55);
}
.dialog__karte {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--abstand-l);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}
.dialog__titel {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--abstand-s);
}
.dialog__text {
  font-size: 14px;
  color: var(--text-muted);
}
/* Die Erlaeuterung ist freiwillig. Ohne sie bleibt kein leerer Absatz stehen,
   der Abstand zu den Knoepfen haengt deshalb an der Knopfreihe. */
.dialog__text:empty { display: none; }
.dialog__knoepfe {
  display: flex;
  gap: var(--abstand-s);
  flex-wrap: wrap;
  margin-top: var(--abstand-l);
}
.dialog__knoepfe .knopf { flex: 1 1 auto; }

/* ---------- Bewegung zurueckhaltend ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Breitere Fenster ---------- */
@media (min-width: 768px) {
  .inhalt { padding: var(--abstand-l); }
  .seitentitel { font-size: 26px; }
}

/* ---------- Das geteilte Gerät im Gerätehaus ---------- */
/* Alles hängt an .kiosk und lässt die Handyansichten damit unberührt. Der
   Rest der App ist auf 720 Punkte gedeckelt und auf Daumen ausgelegt; hier
   steht ein 24-Zoll-Bildschirm, bedient mit der Maus, aus zwei Metern
   Entfernung lesbar. Deshalb größere Schrift, breitere Fläche und Kacheln
   statt Zeilen. */
.kiosk {
  font-size: 20px;
  background: var(--surface);
}

.kiosk__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-m);
  padding: var(--abstand-m) var(--abstand-l);
  background: var(--header);
  color: var(--header-text);
  /* Dieselbe Markenkante wie in der App, am Geraet einen Punkt kraeftiger:
     der Bildschirm im Geraetehaus steht weiter weg als ein Handy. */
  border-bottom: 4px solid var(--brand);
}
.kiosk__marke {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-s);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: inherit;
  text-decoration: none;
  /* Schiebt den Ort an den rechten Rand, seit der Burger links davor steht. */
  margin-right: auto;
}
/* Wie .kopfzeile__knopf, nur groesser: an einem Bildschirm, der zwei Meter weg
   steht, wird mit der Maus getroffen und nicht mit dem Daumen. */
.kiosk__knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--header-text);
  cursor: pointer;
  border-radius: var(--radius-klein);
}
.kiosk__knopf:hover { background: rgb(255 255 255 / 0.1); }
.kiosk__knopf:focus-visible { outline-color: var(--header-text); }
.kiosk__ort {
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

.kiosk__inhalt {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--abstand-l);
}
/* Die Auslosung ist die eine Seite, die niemand bedient: sie wird angesehen,
   aus der Entfernung, und darf deshalb den ganzen Schirm haben. Bei den
   Bedienseiten bleibt die Begrenzung, dort wandert die Maus sonst quer ueber
   einen Meter Glas. */
.kiosk__inhalt--weit { max-width: none; }

.kiosk__titelzeile { margin-bottom: var(--abstand-l); }
.kiosk__titel {
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kiosk__unter {
  font-size: 20px;
  color: var(--text-muted);
  margin-top: var(--abstand-xs);
}

/* auto-fit statt auto-fill: bei zwei Kacheln bleiben keine Geisterspalten
   stehen, die Kacheln nehmen die Breite gleichmäßig ein. */
.kiosk__kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--abstand-m);
}
.kiosk__kachel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abstand-s);
  min-height: 200px;
  padding: var(--abstand-l);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
}
.kiosk__kachel:hover { border-color: var(--accent); background: var(--accent-soft); }
.kiosk__kachel:active { transform: scale(0.995); }
.kiosk__kachel-titel { font-size: 26px; font-weight: 600; margin-top: auto; }
.kiosk__kachel-unter { font-size: 17px; color: var(--text-muted); }

/* Namensraster: viele kurze Namen, mit der Maus aus einem Meter Entfernung zu
   treffen. Kein Suchfeld daneben, an diesem Gerät tippt niemand gern. */
.kiosk__titel--klein { font-size: 40px; }

.kiosk__namen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--abstand-s);
}
.kiosk__name {
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: var(--abstand-m);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 20px;
  color: inherit;
  text-decoration: none;
}
.kiosk__name:hover { border-color: var(--accent); background: var(--accent-soft); }

/* Die Menge gilt fuer das naechste Antippen und steht deshalb ueber der Karte
   und nicht in jeder Zeile. */
.kiosk__menge {
  display: flex;
  align-items: center;
  gap: var(--abstand-m);
  flex-wrap: wrap;
  padding: var(--abstand-m);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--abstand-l);
}
.kiosk__menge-text { font-size: 20px; font-weight: 600; }
.kiosk__menge-hilfe { font-size: 16px; color: var(--text-muted); }

.kiosk__kategorie {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--abstand-l) 0 var(--abstand-s);
}
.kiosk__produkte {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--abstand-s);
}
.kiosk__produkt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abstand-xs);
  min-height: 96px;
  padding: var(--abstand-m);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.kiosk__produkt:hover { border-color: var(--accent); background: var(--accent-soft); }
.kiosk__produkt:active { transform: scale(0.98); }
.kiosk__produkt-name { font-size: 20px; font-weight: 600; }
.kiosk__produkt-preis { font-size: 18px; color: var(--text-muted); margin-top: auto; }

/* Die Quittung. Gross genug, dass der Nachbar mitliest und einen falschen
   Namen sofort sieht: das ist die einzige Kontrolle, die es hier gibt. */
.kiosk__quittung {
  text-align: center;
  padding: var(--abstand-xl) var(--abstand-m);
}
.kiosk__haken { display: block; color: var(--success); margin-bottom: var(--abstand-m); }
.kiosk__quittung-wert { font-size: 36px; font-weight: 700; }
.kiosk__quittung-name { font-size: 24px; color: var(--text-muted); margin-top: var(--abstand-xs); }
.kiosk__quittung-betrag { font-size: 28px; margin-top: var(--abstand-s); }
.kiosk__quittung-knoepfe { justify-content: center; }
.kiosk__quittung-knoepfe .knopf { min-height: 64px; font-size: 18px; }
.kiosk__hinweis {
  margin-top: var(--abstand-m);
  text-align: center;
  font-size: 16px;
  color: var(--text-muted);
}

/* ---------- Der Verlauf auf der Getraenkekarte ---------- */
/* Steht unter den Produkten und zeigt nur, was sich auch zuruecknehmen laesst.
   Deshalb keine Statusspalte: jede Zeile hier ist stornierbar. */

.kiosk__verlauf { padding: 0; }
.kiosk__verlauf-zeile {
  display: flex;
  align-items: center;
  gap: var(--abstand-m);
  padding: var(--abstand-s) var(--abstand-m);
}
.kiosk__verlauf-zeile + .kiosk__verlauf-zeile {
  border-top: 1px solid var(--border);
}
.kiosk__verlauf-zeit {
  font-size: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.kiosk__verlauf-was {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 600;
}
.kiosk__verlauf-betrag { font-size: 18px; flex-shrink: 0; }
/* Schmaler als ein Kioskknopf, aber weiterhin ueber der Tippflaeche von 44:
   das hier ist eine Korrektur und keine Hauptaktion. */
.kiosk__storno {
  min-height: var(--tippflaeche);
  padding: 0 var(--abstand-m);
  font-size: 16px;
  flex-shrink: 0;
}

/* ---------- Die Auslosung am Geraet ---------- */
/* Gelesen wird das aus zwei Metern, im Stehen, waehrend nebenan die Fahrzeuge
   stehen. Deshalb wenig Zeilen und grosse Schrift: Position und Name, sonst
   nichts. Begruendung, Herkunft und PA-Plakette bleiben am Handy. */

.kiosk__besatzungen {
  display: grid;
  /* Eine Spalte je Fahrzeug, solange sie breit genug bleibt. Bei drei
     Fahrzeugen und einem 16:9-Schirm stehen sie nebeneinander, am Handy
     untereinander. */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--abstand-m);
}
.kiosk__besatzung {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  padding: var(--abstand-m) var(--abstand-l) var(--abstand-l);
}
.kiosk__besatzung-titel {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding-bottom: var(--abstand-s);
  border-bottom: 2px solid var(--accent);
}
.kiosk__platz {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-m);
  padding: var(--abstand-s) 0;
}
.kiosk__platz + .kiosk__platz { border-top: 1px solid var(--border); }
.kiosk__platz-position {
  font-size: 18px;
  color: var(--text-muted);
}
/* Der Name bricht nicht um, die Position schon. Wer vor diesem Bildschirm
   steht, sucht seinen Namen: "Angriffstrupp Truppfuehrer" darf zweizeilig
   werden, "Hoffmann, Peter" nicht. */
.kiosk__platz-name {
  font-size: 24px;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

/* Ab hier ist es kein Handy mehr, sondern der Schirm an der Wand. Gelesen wird
   im Stehen aus zwei Metern, und dafuer ist alles oben zu klein. */
@media (min-width: 1200px) {
  .kiosk__besatzung-titel { font-size: 32px; }
  .kiosk__platz-position { font-size: 21px; }
  .kiosk__platz-name { font-size: 30px; }
}
/* Ein freier Platz ist Dienstag und kein Fehler, also auch keine Warnfarbe.
   Er tritt zurueck, statt sich zu melden. */
.kiosk__platz-leer {
  font-weight: 400;
  color: var(--text-muted);
}

.kiosk__wartet {
  text-align: center;
  padding: var(--abstand-xl) var(--abstand-m);
  color: var(--text-muted);
}
.kiosk__wartet-titel {
  font-size: 32px;
  font-weight: 600;
  color: var(--text-strong);
  margin-top: var(--abstand-m);
}
.kiosk__wartet-text {
  font-size: 20px;
  margin-top: var(--abstand-s);
}