/* Design der Besucherverwaltung, uebernommen vom WEPlus-Design-System (Tokens, Schrift Open Sans, Knoepfe, Karten,
   Tabellen, Meldungen, Hell/Dunkel). Eine Datei fuer Verwaltung, Anmeldeseite und Terminal.
   Kontraste und Fokus wie im Vorbild (WCAG 2.2 AA). Das Firmenlogo fehlt noch: bis dahin steht der Name als Text im Kopf. */

@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/design/fonts/open-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/design/fonts/open-sans-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/design/fonts/open-sans-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/design/fonts/open-sans-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/design/fonts/open-sans-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/design/fonts/open-sans-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/design/fonts/open-sans-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/design/fonts/open-sans-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/design/fonts/open-sans-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* ---- Tokens (Werte wie WEPlus tokens.css) ---- */
:root {
  color-scheme: light;
  --bg: #f5f7fa; --surface: #ffffff; --surface-2: #f4f5f7; --border: #c3c9d2; --rahmen-feld: #788598;
  --text: #1f2933; --text-dim: #5f6b7a;
  --primary: #00529b; --primary-d: #003e75; --primary-l: #e8f0f8;
  --accent: #b4272f;
  --btn: #00529b; --btn-hover: #003e75; --btn-text: #ffffff;
  --kopf-bg: #ffffff; --fuss-bg: #f4f5f7; --fuss-text: #5f6b7a;
  --ok: #16794d; --ok-bg: #e6f4ed; --warn: #975f00; --warn-bg: #fdf3e0; --bad: #b3261e; --bad-bg: #fdeceb;
  --info: #0b5cad; --info-bg: #e3effb; --neutral: #4b5563; --neutral-bg: #eceff3;
  --sb-bg: #00294f; --sb-text: rgba(255,255,255,.86); --sb-dim: rgba(255,255,255,.55);
  --sb-hover: rgba(255,255,255,.08); --sb-aktiv: rgba(255,255,255,.14); --sb-linie: rgba(255,255,255,.12);
  --sb-marke: #e8858b; --sb-text-stark: #ffffff;
  --schrift-familie: "Open Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --schrift-xs: 11.5px; --schrift-s: 12.5px; --schrift-m: 14px; --schrift-l: 16px; --schrift-xl: 20px; --schrift-xxl: 26px;
  --gewicht-normal: 400; --gewicht-halbfett: 600; --gewicht-fett: 700;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px;
  --space-0-5: 2px; --space-1-5: 6px; --space-2-5: 10px;
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 14px; --radius-xl: 16px; --radius-voll: 999px;
  --schatten-1: 0 1px 2px rgba(16,24,40,.08); --schatten-2: 0 8px 28px rgba(16,24,40,.16);
  --linie-1: 1px; --linie-2: 2px; --fokus-breite: 2px; --fokus-abstand: 2px; --fokus-abstand-feld: -1px; --fokus-farbe: var(--primary);
  --sb-breite: 248px; --kopf-hoehe: 60px; --seite-max: 1680px; --seite-rand-x: var(--space-6);
  --ziel-min: 24px; --knopf-hoehe: 38px; --knopf-hoehe-klein: 30px; --feld-hoehe: 38px; --feld-schrift: var(--schrift-m);
  --zeile-pad-y: var(--space-2); --zelle-pad-x: var(--space-3); --auswahl-groesse: 18px; --steuer-luecke: var(--space-2);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f141a; --surface: #161d26; --surface-2: #1d2631; --border: #2e3a48; --rahmen-feld: #647a94;
    --text: #e7ecf2; --text-dim: #9aa7b6;
    --primary: #5aa2e6; --primary-d: #8cc0f2; --primary-l: #16283b; --accent: #e0555d;
    --btn: #1f6cb8; --btn-hover: #2574c2; --kopf-bg: #141b24; --fuss-bg: #1d2631; --fuss-text: #b4bfcc;
    --ok: #4ac08a; --ok-bg: #15291f; --warn: #d99b3a; --warn-bg: #2a2214; --bad: #e8776e; --bad-bg: #2c1917;
    --info: #7db8f0; --info-bg: #162a40; --neutral: #b4bfcc; --neutral-bg: #232d3a;
    --sb-bg: #1a2431; --sb-linie: #34455a; --sb-marke: #e0555d;
    --schatten-1: 0 1px 2px rgba(0,0,0,.5); --schatten-2: 0 8px 28px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f141a; --surface: #161d26; --surface-2: #1d2631; --border: #2e3a48; --rahmen-feld: #647a94;
  --text: #e7ecf2; --text-dim: #9aa7b6;
  --primary: #5aa2e6; --primary-d: #8cc0f2; --primary-l: #16283b; --accent: #e0555d;
  --btn: #1f6cb8; --btn-hover: #2574c2; --kopf-bg: #141b24; --fuss-bg: #1d2631; --fuss-text: #b4bfcc;
  --ok: #4ac08a; --ok-bg: #15291f; --warn: #d99b3a; --warn-bg: #2a2214; --bad: #e8776e; --bad-bg: #2c1917;
  --info: #7db8f0; --info-bg: #162a40; --neutral: #b4bfcc; --neutral-bg: #232d3a;
  --sb-bg: #1a2431; --sb-linie: #34455a; --sb-marke: #e0555d;
  --schatten-1: 0 1px 2px rgba(0,0,0,.5); --schatten-2: 0 8px 28px rgba(0,0,0,.6);
}
/* Touch: Komfortdichte, alle Ziele 44 px. Gilt am Terminal (body.kiosk) und in schmalen Fenstern (Handy, Tablet hochkant),
   NICHT in der breiten Verwaltung am Desktop, auch wenn der Bildschirm ein Touch-Display ist (dort normale Knopfhoehe). */
@media (pointer: coarse) {
  body.kiosk {
    --ziel-min: 44px; --knopf-hoehe: 44px; --knopf-hoehe-klein: 44px; --feld-hoehe: 44px; --feld-schrift: var(--schrift-l);
    --zeile-pad-y: var(--space-3); --auswahl-groesse: 24px; --steuer-luecke: var(--space-3);
  }
}
@media (pointer: coarse) and (max-width: 900px) {
  :root {
    --ziel-min: 44px; --knopf-hoehe: 44px; --knopf-hoehe-klein: 44px; --feld-hoehe: 44px; --feld-schrift: var(--schrift-l);
    --zeile-pad-y: var(--space-3); --auswahl-groesse: 24px; --steuer-luecke: var(--space-3);
  }
}
@media (max-width: 900px) { :root { --seite-rand-x: var(--space-4); } }

/* ---- Basis ---- */
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); font: var(--schrift-m)/1.5 var(--schrift-familie);
  overflow-wrap: break-word; -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); }
h1, h2, h3 { margin: 0; font-weight: var(--gewicht-fett); letter-spacing: -.01em; }
h1 { font-size: var(--schrift-xxl); font-weight: var(--gewicht-normal); color: var(--primary); letter-spacing: 0; margin-bottom: var(--space-4); }
h2, h3 { font-size: var(--schrift-xl); font-weight: var(--gewicht-normal); color: var(--primary); margin-bottom: var(--space-3); }
code { font-family: var(--mono); font-size: var(--schrift-s); }
:focus-visible { outline: var(--fokus-breite) solid var(--fokus-farbe); outline-offset: var(--fokus-abstand); }
.leise { color: var(--text-dim); font-size: var(--schrift-s); }
.name { overflow-wrap: anywhere; }
.einladungsnummer { font-family: var(--mono); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- Formulare ---- */
label { display: block; font-size: var(--schrift-s); font-weight: var(--gewicht-halbfett); margin: var(--space-3) 0 var(--space-1); }
input, select, textarea {
  width: 100%; max-width: 40rem; min-height: var(--feld-hoehe); padding: var(--space-1-5) var(--space-3); font: inherit; font-size: var(--feld-schrift);
  color: var(--text); background: var(--surface); border: var(--linie-1) solid var(--rahmen-feld); border-radius: var(--radius-xs);
}
input:focus, select:focus, textarea:focus { outline: var(--fokus-breite) solid var(--fokus-farbe); outline-offset: var(--fokus-abstand-feld); border-color: var(--fokus-farbe); }
input[type=checkbox], input[type=radio] { width: var(--auswahl-groesse); height: var(--auswahl-groesse); min-height: 0; padding: 0; margin: 0 var(--space-2) 0 0; accent-color: var(--primary); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--text-dim); cursor: not-allowed; }
label.bestaetigung { display: flex; align-items: flex-start; gap: var(--space-2); font-weight: var(--gewicht-normal); font-size: var(--schrift-m); }

/* ---- Knoepfe: Standard = Primaerknopf (Formular-Absenden), .leise / .knopf.leise = Sekundaerknopf ---- */
button, .knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5); min-height: var(--knopf-hoehe);
  padding: var(--space-1) var(--space-4); margin-top: var(--space-3); font: inherit; font-size: var(--schrift-m); font-weight: var(--gewicht-halbfett);
  cursor: pointer; background: var(--btn); color: var(--btn-text); border: var(--linie-1) solid var(--btn); border-radius: var(--radius-voll);
  text-decoration: none; white-space: nowrap;
}
button:hover, .knopf:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
button.leise, .knopf.leise { background: var(--surface); color: var(--text); border-color: var(--border); font-size: var(--schrift-m); }
button.leise:hover, .knopf.leise:hover { background: var(--surface-2); }
button.sekundaer, .knopf.sekundaer { background: var(--surface); color: var(--primary); border-color: var(--primary); }
button.sekundaer:hover, .knopf.sekundaer:hover { background: var(--primary-l); border-color: var(--primary); }
button.gefahr, .knopf.gefahr { background: var(--surface); color: var(--bad); border-color: var(--bad); }
button.gefahr:hover, .knopf.gefahr:hover { background: var(--bad-bg); border-color: var(--bad); }
button:disabled { cursor: not-allowed; background: var(--surface-2); color: var(--text-dim); border-color: var(--surface-2); }
.inline { display: inline; margin: 0; }
.inline button { margin: 0; min-height: var(--knopf-hoehe-klein); padding: var(--space-1) var(--space-3); font-size: var(--schrift-s); }
.inline input { width: auto; min-width: 10rem; min-height: var(--knopf-hoehe-klein); font-size: var(--schrift-s); }
.klein { min-height: var(--knopf-hoehe-klein); font-size: var(--schrift-s); }

/* ---- Meldungen (Ton + Rahmen, wie .alert) ---- */
.fehler, .ok { padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-md); border: var(--linie-1) solid; margin: 0 0 var(--space-4); font-size: var(--schrift-m); }
.fehler { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); }
.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }

/* ---- Karten und Badges ---- */
.karte { background: var(--surface); border: var(--linie-1) solid var(--border); border-radius: var(--radius-md); box-shadow: var(--schatten-1); padding: var(--space-5); margin-bottom: var(--space-4); }
.kacheln { margin-bottom: var(--space-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
@media (max-width: 520px) { .kacheln { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); } .kacheln .karte { padding: var(--space-3); } }
.kachel { display: flex; flex-direction: column; gap: var(--space-1); color: var(--text); text-decoration: none; margin-bottom: 0; overflow-wrap: anywhere; }
a.kachel:hover { background: var(--surface-2); }
.kachel-zahl { font-size: var(--schrift-xxl); color: var(--primary); }
.kachel-titel { font-size: var(--schrift-m); color: var(--text-dim); }
.kachel-titel .badge { align-self: flex-start; }
.kachel-zeitraum { display: block; margin-top: var(--space-1); font-size: var(--schrift-xs); }
.status-kacheln { background: none; border: 0; border-radius: 0; padding: 0; overflow: visible; margin-bottom: 0; }
.status-kacheln h2 { margin-bottom: var(--space-3); }
.kachel-fehler { background: var(--bad-bg); border-color: var(--bad); }
.kachel-fehler .kachel-zahl, .kachel-fehler .kachel-titel { color: var(--bad); }
.dash-liste { margin: 0; padding-left: var(--space-5); overflow-wrap: anywhere; }
.badge { display: inline-block; max-width: 100%; padding: var(--space-0-5) var(--space-2-5); border-radius: var(--radius-voll); font-size: var(--schrift-xs); font-weight: var(--gewicht-halbfett); line-height: 1.5; overflow-wrap: anywhere; vertical-align: middle; background: var(--neutral-bg); color: var(--neutral); }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-neutral { background: var(--neutral-bg); color: var(--neutral); }
.badge-bad { background: var(--bad-bg); color: var(--bad); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }

/* ---- Karten und Tabellen ---- */
section {
  background: var(--surface); border: var(--linie-1) solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; font-size: var(--schrift-m); }
th, td { padding: var(--zeile-pad-y) var(--zelle-pad-x); text-align: left; border-bottom: var(--linie-1) solid var(--border); vertical-align: top; }
th { background: var(--surface-2); font-size: var(--schrift-xs); font-weight: var(--gewicht-fett); text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td, table tr:last-child td { border-bottom: none; }
details.unterschrift img { display: block; background: #fff; border: var(--linie-1) solid var(--border); border-radius: var(--radius-xs); margin: var(--space-2) 0; max-width: 100%; height: auto; }
canvas.signierfeld, canvas[data-canvas] { width: 100%; max-width: 40rem; aspect-ratio: 5 / 2; background: #fff; border: var(--linie-2) dashed var(--rahmen-feld); border-radius: var(--radius-sm); touch-action: none; display: block; margin-top: var(--space-2); }
.abmeldenummer, .nummer { font-weight: var(--gewicht-fett); letter-spacing: .15em; font-variant-numeric: tabular-nums; color: var(--primary); }
.abmeldenummer { font-size: 2.5rem; }
.kaestchen { display: inline-block; width: 1rem; height: 1rem; border: 2px solid var(--text); border-radius: 2px; }

/* ---- Karten: lange Namen umbrechen, Formular-Gruppen, Chips ---- */
section.karte { overflow-x: auto; overflow-wrap: anywhere; }
th, td { overflow-wrap: break-word; }
th + td, td .name { overflow-wrap: anywhere; }
fieldset { border: 0; margin: var(--space-3) 0 0; padding: 0; min-width: 0; }
legend { padding: 0; font-size: var(--schrift-s); font-weight: var(--gewicht-halbfett); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; }
label.chip {
  display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; margin: 0; padding: var(--space-1) var(--space-3);
  min-height: var(--ziel-min); font-size: var(--schrift-m); font-weight: var(--gewicht-normal); cursor: pointer;
  background: var(--surface); color: var(--text); border: var(--linie-1) solid var(--rahmen-feld); border-radius: var(--radius-voll);
}
label.chip input[type=checkbox], label.chip input[type=radio] { margin: 0; flex: none; }
label.chip:hover { background: var(--surface-2); }
label.chip:has(input:checked) { background: var(--primary-l); border-color: var(--primary); border-width: var(--linie-2); padding: calc(var(--space-1) - 1px) calc(var(--space-3) - 1px); }
label.chip:has(input:checked) span { font-weight: var(--gewicht-fett); }
label.chip:focus-within { outline: var(--fokus-breite) solid var(--fokus-farbe); outline-offset: var(--fokus-abstand); }
label.chip input:focus-visible { outline: none; }

/* Desktop: Status-Badges in Listentabellen einzeilig (Handy-Stapelansicht darf umbrechen) */
@media (min-width: 701px) { table.tabelle-karten .badge { white-space: nowrap; } }

/* ---- Handy: Tabellenzeilen als gestapelte Karten (td::before zeigt die Spaltenbeschriftung aus data-label) ---- */
@media (max-width: 700px) {
  section.karte { padding: var(--space-4); }
  section.karte:has(> table.tabelle-karten) { padding: 0; background: transparent; border: 0; box-shadow: none; }
  table.tabelle-karten, table.tabelle-karten tbody, table.tabelle-karten tr, table.tabelle-karten td { display: block; }
  table.tabelle-karten thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.tabelle-karten tr { margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--surface); border: var(--linie-1) solid var(--border); border-radius: var(--radius-md); }
  table.tabelle-karten tr:last-child { margin-bottom: 0; }
  table.tabelle-karten td, table.tabelle-karten tr:last-child td { display: grid; grid-template-columns: minmax(6rem, 35%) minmax(0, 1fr); gap: var(--space-2); padding: var(--space-1-5) 0; border-bottom: var(--linie-1) solid var(--border); }
  table.tabelle-karten td:last-child, table.tabelle-karten tr:last-child td:last-child { border-bottom: 0; }
  table.tabelle-karten td::before { content: attr(data-label); font-size: var(--schrift-xs); font-weight: var(--gewicht-fett); text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
  .inline input { min-width: 0; width: 100%; }
  /* Aktionszelle (leere Spaltenbeschriftung): volle Kartenbreite, Knoepfe und Links touch-gross */
  table.tabelle-karten tbody tr td[data-label=""], table.tabelle-karten tbody tr td:has(> .zelle > form.inline) { grid-template-columns: minmax(0, 1fr); }
  table.tabelle-karten td[data-label=""]::before { display: none; }
  table.tabelle-karten td[data-label=""] .zelle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  table.tabelle-karten td .inline button { min-height: max(var(--knopf-hoehe), 44px); }
  /* Formulare in Zellen: Feld und Knopf untereinander, Knoepfe in voller Breite; in der Aktionszelle teilen sich die Formulare die Zeile */
  table.tabelle-karten td .zelle > form.inline { display: flex; flex-direction: column; gap: var(--space-2); }
  table.tabelle-karten td .zelle > form.inline button { width: 100%; }
  table.tabelle-karten td[data-label=""] .zelle > form.inline { flex: 1 1 9rem; }
  table.tabelle-karten td[data-label=""] a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Detailtabellen (th/td-Paare): Beschriftung ueber dem Wert */
  table.tabelle-detail, table.tabelle-detail tbody, table.tabelle-detail tr { display: block; }
  table.tabelle-detail tr { padding: var(--space-2) 0; border-bottom: var(--linie-1) solid var(--border); }
  table.tabelle-detail tr:last-child { border-bottom: 0; }
  table.tabelle-detail th { display: block; padding: 0 0 var(--space-0-5); border: 0; background: transparent; text-align: left; font-size: var(--schrift-xs); font-weight: var(--gewicht-fett); text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
  table.tabelle-detail td { display: block; padding: 0; border: 0; overflow-wrap: anywhere; }
}

/* ---- Verwaltung: Kopf, Seitenleiste, Fuss ---- */
.kopf {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--space-4); min-height: var(--kopf-hoehe);
  padding: 0 var(--seite-rand-x); background: var(--kopf-bg); border-bottom: var(--linie-1) solid var(--border);
}
.kopf-titel { font-size: var(--schrift-xl); font-weight: var(--gewicht-fett); color: var(--primary); text-decoration: none; letter-spacing: -.01em; }
.kopf-titel::before { content: ""; display: inline-block; width: 6px; height: 1.1em; margin-right: var(--space-2); vertical-align: -.15em; background: var(--accent); border-radius: 2px; }
.kopf .spacer { flex: 1; }
.angemeldet { font-size: var(--schrift-s); color: var(--text-dim); }
.angemeldet b { color: var(--primary); font-weight: var(--gewicht-halbfett); }
.kopf form { margin: 0; }
.kopf button { margin: 0; min-height: var(--knopf-hoehe-klein); }
@media (max-width: 520px) { .kopf { flex-wrap: wrap; padding-block: var(--space-2); } .kopf button { white-space: normal; max-width: 100%; } }
@media (max-width: 420px) { .kopf { gap: var(--space-2); } .kopf-titel { font-size: var(--schrift-l); } .kopf button { padding: var(--space-1) var(--space-3); } }
.shell { display: flex; align-items: flex-start; min-height: calc(100vh - var(--kopf-hoehe) - 46px); }
.sb {
  flex: none; width: var(--sb-breite); align-self: stretch; padding: var(--space-3) var(--space-2); background: var(--sb-bg);
  display: flex; flex-direction: column; gap: 2px; border-right: var(--linie-1) solid var(--sb-linie);
}
.nav-schalter, .nav-knopf { display: none; }
.sb a { display: block; padding: var(--space-2) var(--space-3); color: var(--sb-text); text-decoration: none; border-radius: var(--radius-sm); font-size: var(--schrift-m); border-left: 3px solid transparent; }
.sb a { display: flex; align-items: center; gap: var(--space-2); }
.sb a .ico { flex: none; opacity: .85; }
.sb a[aria-current="page"] .ico { opacity: 1; }
.sb a:hover { background: var(--sb-hover); color: var(--sb-text-stark); }
.sb a[aria-current="page"] { background: var(--sb-aktiv); color: var(--sb-text-stark); font-weight: var(--gewicht-halbfett); border-left-color: var(--sb-marke); }
.sb .gruppe { margin: var(--space-3) var(--space-3) var(--space-1); font-size: var(--schrift-xs); font-weight: var(--gewicht-fett); letter-spacing: .06em; text-transform: uppercase; color: var(--sb-dim); }
.sb a:focus-visible { outline-color: var(--sb-text-stark); outline-offset: -2px; }
.app main { flex: 1; min-width: 0; max-width: var(--seite-max); padding: var(--space-5) var(--seite-rand-x); }
.fuss { padding: var(--space-3) var(--seite-rand-x); border-top: var(--linie-1) solid var(--border); background: var(--fuss-bg); color: var(--fuss-text); font-size: var(--schrift-s); }
@media (max-width: 900px) {
  .shell { flex-direction: column; align-items: stretch; }
  /* Aufgeklappt: senkrechte Liste, ein Eintrag pro Zeile (Icon, mind. 48 px hoch, Trennlinie), aktueller Punkt mit Markierung links. */
  .sb { width: 100%; flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 0; align-self: auto; border-right: 0; border-top: var(--linie-1) solid var(--sb-linie); }
  /* Eingeklappt ist nur der Knopf sichtbar; die Checkbox bleibt fuer die Tastatur fokussierbar (unsichtbar, nicht display:none). */
  .nav-schalter { display: block; position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
  .nav-knopf { display: flex; margin: 0; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--seite-rand-x); background: var(--sb-bg); color: var(--sb-text-stark); font-size: var(--schrift-m); font-weight: var(--gewicht-halbfett); cursor: pointer; user-select: none; }
  .nav-schalter:focus-visible + .nav-knopf { outline: var(--fokus-breite) solid var(--sb-text-stark); outline-offset: -4px; }
  /* Pfeil zeigt den Zustand: nach unten = eingeklappt, nach oben = geoeffnet */
  .nav-knopf::after { content: ""; margin: 0 var(--space-1) 4px auto; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .nav-schalter:checked + .nav-knopf::after { margin-bottom: -4px; transform: rotate(-135deg); }
  .nav-schalter:not(:checked) ~ .sb { display: none; }
  .sb a { min-height: 48px; padding: var(--space-2) var(--seite-rand-x); border-radius: 0; border-bottom: var(--linie-1) solid var(--sb-linie); }
  .sb a:last-child { border-bottom: 0; }
  .sb a[aria-current="page"] { border-left-color: var(--sb-marke); }
  .sb .gruppe { display: block; margin: 0; padding: var(--space-2) var(--seite-rand-x); border-bottom: var(--linie-1) solid var(--sb-linie); }
  .angemeldet { display: none; }
}
div.aktionen { margin: 1em 0; }
.aktionen a, .aktionen > button { margin-right: var(--space-4); }
/* Knoepfe in der Aktionsleiste (auch das Formular "Wieder oeffnen") so gross wie die Link-Knoepfe daneben */
.aktionen .inline button { margin-top: var(--space-3); min-height: var(--knopf-hoehe); padding: var(--space-1) var(--space-4); font-size: var(--schrift-m); }

/* ---- Anmeldeseite ---- */
body.login { display: grid; min-height: 100vh; place-items: center; padding: var(--space-5) var(--space-4); background: var(--bg); }
body.login main { width: 100%; max-width: 420px; background: var(--surface); border: var(--linie-1) solid var(--border); border-radius: var(--radius-xl); padding: var(--space-6); }
body.login h1 { margin-bottom: var(--space-1); }
body.login .untertitel { margin: 0 0 var(--space-4); color: var(--text-dim); font-size: var(--schrift-s); }
body.login button { width: 100%; margin-top: var(--space-5); }
body.login input { max-width: none; }
a.keycloak { display: flex; align-items: center; justify-content: center; min-height: var(--knopf-hoehe); margin-top: var(--space-3); border: var(--linie-1) solid var(--border); border-radius: var(--radius-voll); text-decoration: none; color: var(--text); font-weight: var(--gewicht-halbfett); }
a.keycloak:hover { background: var(--surface-2); }

/* ---- Terminal (Kiosk): grosse Schrift, grosse Ziele, weniger Dekoration ---- */
body.kiosk { font-size: 1.25rem; }
/* Terminal-Hintergrund: Daemmerungshimmel (Bild nur am Terminal, die Verwaltung bleibt unberuehrt). Die Fallback-Farbe greift, falls das Bild fehlt. */
body.kiosk { background: var(--bg) url(/design/kiosk-hintergrund.jpg) center bottom / cover no-repeat fixed; }
body.kiosk main { max-width: 64rem; margin: var(--space-5) auto; padding: var(--space-6); background: var(--surface); border: var(--linie-1) solid var(--border); border-radius: var(--radius-xl); box-shadow: 0 10px 40px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .2); }
@media (max-width: 700px) { body.kiosk main { margin: 0; padding: var(--space-4); border-radius: 0; border-width: 0; box-shadow: none; } }
body.kiosk h1 { font-size: 2rem; margin: var(--space-2) 0 var(--space-4); }
body.kiosk label { font-size: 1.1rem; }
body.kiosk input[type=text], body.kiosk input[type=password], body.kiosk input[type=number], body.kiosk input:not([type]) { font-size: 1.5rem; padding: .7rem; max-width: none; min-height: 72px; }
body.kiosk button, body.kiosk .knopf { font-size: 1.4rem; padding: .8rem 1.8rem; margin: var(--space-4) var(--space-2) 0 0; min-height: 72px; }
body.kiosk button.klein, body.kiosk .knopf.klein { font-size: 1rem; min-height: 72px; padding: .5rem 1rem; }
body.kiosk .fehler { font-weight: var(--gewicht-halbfett); font-size: 1.2rem; }
body.kiosk .nummer { font-size: 9rem; line-height: 1.1; margin: var(--space-3) 0; }
body.kiosk .nummer-karte { text-align: center; background: var(--surface-2); border: var(--linie-2) solid var(--primary); border-radius: var(--radius-xl); padding: var(--space-5); margin: var(--space-4) 0; }
@media (max-width: 700px) { body.kiosk .nummer { font-size: 8rem; } }
body.kiosk canvas[data-canvas] { width: 100%; max-width: none; height: auto; aspect-ratio: 5 / 2; border: var(--linie-2) dashed var(--rahmen-feld); touch-action: none; background: linear-gradient(var(--rahmen-feld), var(--rahmen-feld)) no-repeat 5% 75% / 90% 2px #fff; }
body.kiosk .name { font-weight: var(--gewicht-halbfett); }
.sprachen { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.sprachen a { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 8rem; min-height: 72px; font-size: 1.3rem; text-align: center; padding: var(--space-2) var(--space-4); border: var(--linie-2) solid var(--sb-bg); border-radius: var(--radius-voll); text-decoration: none; color: var(--text); background: var(--surface); font-weight: var(--gewicht-halbfett); }
.sprachen a[aria-current="true"] { background: var(--sb-bg); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sprachen a { border-color: var(--border); } :root:not([data-theme="light"]) .sprachen a[aria-current="true"] { background: var(--btn); border-color: var(--btn); } }
/* Querformat-Kiosk (z. B. 1280x800): Rand und Abstaende straffen, damit die Startseite ohne Scrollen passt. */
@media (min-width: 701px) and (max-height: 900px) {
  body.kiosk main { margin: var(--space-3) auto 0; padding: var(--space-4) var(--space-6); }
  body.kiosk h1 { margin: var(--space-1) 0 var(--space-3); }
  body.kiosk button, body.kiosk .knopf { margin-top: var(--space-3); }
  .sprachen { margin-bottom: var(--space-3); }
  /* Unterschriftsfeld begrenzen (Seitenverhaeltnis 5:2 bleibt, die Breite folgt der Hoehe), damit "Bestaetigen" ohne Scrollen sichtbar bleibt. */
  body.kiosk canvas[data-canvas] { width: auto; max-width: 100%; height: min(240px, 30vh); margin-inline: auto; margin-top: var(--space-1); }
  body.kiosk h2 { font-size: 1.15rem; margin: var(--space-2) 0 var(--space-1); }
  body.kiosk main p { margin-block: var(--space-2); }
  body.kiosk main ul { margin: 0; }
  body.kiosk .bestaetigung { margin-top: var(--space-2); }
  body.kiosk label.block, body.kiosk main label { margin-top: var(--space-2); }
}
/* Terminal-Startseite: zwei gleich grosse Karten (Anmelden | Abmelden), im Hochformat untereinander; Notfall-Link leise darunter. */
.karten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: stretch; }
.karten > .karte { display: flex; flex-direction: column; min-width: 0; padding: var(--space-4) var(--space-5); margin-bottom: 0; background: var(--surface-2); border: var(--linie-2) solid var(--border); border-radius: var(--radius-xl); box-shadow: none; }
.karten > .karte.anmelden { border-color: var(--btn); }
body.kiosk .karten > .karte h2 { font-size: 1.5rem; margin: 0 0 var(--space-2); }
.karten > .karte form { display: flex; flex-direction: column; flex: 1; }
body.kiosk .karten > .karte button, body.kiosk .karten > .karte .knopf { margin: auto 0 0; width: 100%; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
body.kiosk .karten > .karte.abmelden .knopf { margin-top: auto; }
body.kiosk .karten > .karte.anmelden input[type=text] { margin-bottom: var(--space-3); }
body.kiosk .karten > .karte label { margin-top: 0; }
.notfall-zeile { text-align: center; margin: var(--space-3) 0 0; }
body.kiosk a.notfall-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-4); font-size: 1rem; color: var(--text-dim); text-decoration: underline; }
@media (max-width: 700px), (orientation: portrait) { .karten { grid-template-columns: 1fr; } }
table.notfall { font-size: 1.5rem; }
table.notfall th, table.notfall td { border-bottom: 2px solid var(--rahmen-feld); overflow-wrap: anywhere; }
/* Kopf und letzte Spalte (Ansprechpartner) nicht mitten im Wort umbrechen; Name und Firma duerfen es bei sehr langen Woertern. */
table.notfall th, table.notfall td:last-child { overflow-wrap: normal; }
@media (max-width: 700px) { table.notfall { font-size: 1.25rem; } table.notfall td, table.notfall tr:last-child td { display: block; overflow-wrap: anywhere; border-bottom: var(--linie-1) solid var(--border); } table.notfall td:last-child, table.notfall tr:last-child td:last-child { border-bottom: 0; } table.notfall td::before { display: block; } }
.bestaetigung { display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-4); font-weight: var(--gewicht-normal); }
/* Fortschrittsanzeige (rein dekorativ, nicht fokussierbar) */
.schritte { display: flex; gap: var(--space-3); list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.schritte li { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-voll); border: var(--linie-2) solid var(--border); background: var(--surface-2); color: var(--text-dim); font-weight: var(--gewicht-fett); }
.schritte li.erledigt { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.schritte li.aktiv { border-color: var(--btn); background: var(--btn); color: var(--btn-text); }
body.kiosk .bestaetigung input { width: 2.75rem; height: 2.75rem; flex: none; margin-top: 0; }