/* S.U. Payments – eigenes Design: kühl, rund, blau. Mobile-first für Fahrer.
 * Farben direkt aus dem Markenlogo abgeleitet: Navy #042E6F (Schriftzug "US"/"SOLUTION") und
 * der Verlauf Cyan #02D2FD → Blau #0654EA → Violett #2B06DB aus dem Emblem. */

:root {
  --go: #0654EA;
  --go-dark: #042E6F;
  --go-soft: #e7eefd;
  /* Ampel-/Statusfarben bewusst NICHT an die Markenfarbe gekoppelt: Grün heisst "in Ordnung",
   * Gelb "Achtung", Rot "kritisch" – das muss unabhängig davon gelten, welche Farbe die Marke
   * gerade hat. Beim Rebrand auf Blau wurden sonst aus den drei Ampelpunkten dreimal Blau. */
  --ok: #0f8a6d;
  --ok-dark: #0b6b54;
  --ok-soft: #e3f3ee;
  --sun: #f0b429;
  --sun-soft: #fdf3d7;
  --rose: #d64550;
  --rose-soft: #fbe9ea;
  --violet: #7c5cff;
  --bg: #f4f6fa;
  --card: #ffffff;
  --ink: #1b2536;
  --muted: #76829a;
  --line: #e3e7ef;
  --r: 18px;
  --shadow: 0 2px 10px rgba(4, 46, 111, .08);
  color-scheme: light; /* native Steuerelemente (z. B. Datumspicker-Kalendersymbol) hell rendern */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
}

.view { min-height: 100vh; display: flex; flex-direction: column; }
.hidden { display: none !important; }

/* ---------- Login ---------- */
/* Beide Anmeldeschirme zentrieren – #authView fehlte das bisher, dadurch klebte sein Logo
 * ohne jeden Abstand am oberen Fensterrand. */
#loginView, #authView, #loadErrorView { align-items: center; justify-content: center; padding: 24px; }
.login-box { width: min(440px, 100%); text-align: center; }
.icon { display: inline-block; vertical-align: middle; flex: none; }
/* Wortmarke auf den Anmeldeschirmen (früher ein rundes Badge mit Icon darin). Das Logo trägt
 * den Markennamen bereits, deshalb steht darunter keine eigene Überschrift mehr.
 *
 * LOGO-REGEL (aus dem Markenpaket): Auf hellem Grund die blaue Variante (supayments-logo.png,
 * supayments-icon-*.png), auf dunklem Grund die weisse (supayments-logo-weiss.png, supayments-icon-weiss-*.png).
 * Die App ist durchgehend hell, deshalb ist überall die blaue im Einsatz; die weisse liegt für
 * dunkle Flächen bereit. Niemals die weisse auf Weiss – sie verschwindet dann komplett. */
.logo-big { display: block; width: min(264px, 74%); height: auto; margin: 0 auto 10px; }
.login-sub { color: var(--muted); margin: 4px 0 26px; }
.driver-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.driver-tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 18px 12px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ink);
  transition: transform .08s ease;
}
.driver-tile:active { transform: scale(.97); }
.driver-tile.admin-tile { grid-column: 1 / -1; flex-direction: row; justify-content: center; padding: 14px; }
.howto {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  margin-bottom: 18px;
  text-align: left;
}
.howto-title { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 15px; margin-bottom: 8px; }
.howto-steps {
  padding-left: 20px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13.5px; line-height: 1.5;
}
.howto-note { margin-top: 10px; font-size: 12px; color: var(--muted); }
.pin-hint { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }

.avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 17px;
  background: var(--go);
  flex: none;
}
.avatar-admin { background: var(--ink); }
/* Kopfzeilen-Avatar mit dem Markenemblem statt eines Initials. Heller Grund ist Pflicht: das
 * Emblem ist der farbige Verlauf, auf dunklem Kreis würde es absaufen. */
.avatar-logo { background: #fff; border: 1px solid var(--line); padding: 6px; }
.avatar-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- App-Rahmen ---------- */
.app-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.head-user { display: flex; align-items: center; gap: 12px; }
.head-name { font-weight: 700; }
.head-sub { font-size: 12.5px; color: var(--muted); }
.head-right { display: flex; align-items: center; gap: 8px; }

/* ---------- Systemstatus (Verbindung, Offline-Belege, Kasse) ---------- */
.status-dots {
  display: flex; align-items: center; gap: 5px;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 10px; cursor: pointer;
}
.status-dots:hover { background: var(--bg); }
/* Grundform der Statuspunkte. Die Ampelfarben stehen bewusst DIREKT darunter und die Groessen-
   regeln darueber: .status-dot-lg stand frueher weiter unten in der Datei und hat mit seinem
   background: var(--line) die gleichrangigen Farbklassen ueberschrieben - die grossen Punkte im
   Systemstatus-Dialog waren dadurch in JEDEM Theme farblos. Wer hier etwas verschiebt, bringt den
   Fehler zurueck. */
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--line); }
.status-dot-lg { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--line); }
.dot-ok { background: var(--ok); }
.dot-warn { background: var(--sun); }
.dot-crit { background: var(--rose); }

.modal-status { text-align: left; }
.status-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.status-row:last-of-type { border-bottom: none; }
.status-row[data-notiftab] { cursor: pointer; }
.status-row[data-notiftab]:hover .status-row-main strong { text-decoration: underline; }

.notif-bell, .theme-toggle {
  position: relative;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  width: 36px; height: 36px; cursor: pointer; color: var(--ink);
}
.notif-bell:hover, .theme-toggle:hover { background: var(--bg); }
.notif-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--rose); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  min-width: 16px; height: 16px; border-radius: 999px;
  display: grid; place-items: center; padding: 0 3px;
}
.status-row-main strong { font-size: 14px; }
.status-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.status-note { font-size: 12px; color: var(--muted); margin-top: 12px; line-height: 1.55; }

.app-main {
  flex: 1;
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 18px 16px 96px;
  display: flex; flex-direction: column; gap: 16px;
}
.app-main.wide { width: min(1020px, 100%); padding-bottom: 40px; }

/* ---------- Bottom-Nav (Fahrer) ---------- */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--card);
  border-top: 1px solid var(--line);
  padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
}
.nav-btn {
  border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 0; border-radius: 12px;
}
.nav-btn span { display: flex; align-items: center; justify-content: center; }
.nav-btn.active { color: var(--go); background: var(--go-soft); }

/* ---------- Tabs (Admin) ---------- */
/* ---------- Admin-Sidebar ---------- */
.admin-shell { display: flex; align-items: flex-start; width: 100%; }
.admin-sidebar {
  width: 224px; flex: none;
  background: var(--card); border-right: 1px solid var(--line);
  padding: 16px 10px 30px;
  min-height: calc(100vh - 62px);
  position: sticky; top: 62px;
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto; overflow-x: hidden;
  white-space: nowrap;
}
.admin-sidebar.collapsed { display: none; }

.sidebar-toggle {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border: 1px solid var(--line); border-radius: 10px;
  background: none; color: var(--ink); cursor: pointer;
}
.sidebar-toggle:hover { background: var(--bg); }
.admin-shell .app-main.wide { margin: 0; width: auto; max-width: none; flex: 1; padding: 22px 26px 44px; }

.side-tab {
  display: block; width: 100%; text-align: left;
  border: none; background: none; color: var(--ink);
  font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 9px 12px; border-radius: 10px; cursor: pointer;
}
.side-tab:hover { background: var(--bg); }
.side-tab.active { background: var(--go-soft); color: var(--go-dark); }
.side-group-body .side-tab { padding-left: 22px; font-size: 13.5px; }
/* Eigenstaendiger Punkt ganz unten (Funk & Zentrale) - Abstand zur Gruppe darueber */
.side-tab-unten { margin-top: 12px; }

.side-group-head {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  border: none; background: none; color: var(--muted);
  font-family: inherit; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 14px 12px 6px; cursor: pointer;
}
.side-chevron { transition: transform .15s ease; font-size: 11px; flex: none; }
.side-group.open .side-chevron { transform: rotate(90deg); }
.side-group-body { display: none; flex-direction: column; gap: 1px; }
.side-group.open .side-group-body { display: flex; }

@media (max-width: 820px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar { width: 100%; position: static; min-height: auto; border-right: none; border-bottom: 1px solid var(--line); }
  .admin-sidebar.collapsed { display: none; }
}

.tab-bar {
  display: flex; gap: 8px; flex-wrap: wrap;
  width: min(1020px, 100%);
  margin: 0 auto;
  padding: 14px 16px 0;
}
.tab {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
}
.tab.active { background: var(--go); border-color: var(--go); color: #fff; }

/* ---------- Karten ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 18px;
}
.card-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.card.warn { background: var(--sun-soft); border-color: #f0d894; }
.card-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
fieldset.card { border: 1px solid var(--line); min-width: 0; }
fieldset.card:disabled { opacity: .45; }
fieldset.card:disabled .card-title small { font-weight: 400; font-size: 12px; color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: 14px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  padding: 12px 18px;
  cursor: pointer;
}
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-go { background: var(--go); color: #fff; }
/* Text-Knopf wie ein Link (Passwort vergessen, Zurueck zur Anmeldung) */
.btn-link { display: block; width: 100%; margin-top: 10px; padding: 6px; background: none; border: 0; color: var(--go); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.btn-link:hover { color: var(--go-dark); }
.btn-go:hover:not(:disabled) { background: var(--go-dark); }
.btn-plain { background: var(--bg); border: 1px solid var(--line); color: var(--ink); }
.btn-plain.active { border-color: var(--go); background: var(--go-soft); color: var(--go); }
.btn-danger { background: var(--rose); color: #fff; }
.btn-sun { background: var(--sun); color: var(--ink); }
.btn-big { width: 100%; padding: 16px; font-size: 16px; }
.btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 10px; }

/* ---------- Fahrt / Numpad ---------- */
.price-display {
  text-align: center;
  font-size: 44px; font-weight: 800; letter-spacing: -.02em;
  padding: 8px 0 2px;
}
.price-display small { font-size: 20px; color: var(--muted); font-weight: 600; }
.numpad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 12px 0;
}
.numpad button {
  font-family: inherit; font-size: 22px; font-weight: 700;
  padding: 14px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}
.numpad button:active { background: var(--go-soft); }
.numpad .np-alt { font-size: 16px; color: var(--muted); }

.seg-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.seg {
  border: 1.5px solid var(--line);
  background: var(--card);
  border-radius: 14px;
  padding: 12px 6px;
  font-family: inherit; font-size: 14px; font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.seg small { font-weight: 500; font-size: 10.5px; color: var(--muted); }
.seg-top { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 38px; }
.seg-logo { height: 10px; width: auto; max-width: 100%; display: block; margin: 0 auto; }
.seg.active { border-color: var(--go); background: var(--go-soft); }
.dt-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dt-row label { font-size: 13px; font-weight: 600; color: var(--muted); }
.dt-static {
  flex: 1;
  font-size: 14px; font-weight: 600;
  padding: 10px 2px;
  color: var(--ink);
}
.dt-row input {
  flex: 1;
  font-family: inherit; font-size: 14px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
}

/* ---------- Schicht ---------- */
.shift-clock { text-align: center; padding: 10px 0; }
.shift-elapsed { font-size: 42px; font-weight: 800; letter-spacing: -.02em; }
.shift-since { color: var(--muted); font-size: 13px; margin-top: 2px; }
.vehicle-picker { display: flex; flex-direction: column; gap: 8px; }
.veh-chip {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 14px; padding: 10px 12px;
  font-family: inherit; text-align: left; cursor: pointer;
}
.veh-chip.active { border-color: var(--go); background: var(--go-soft); }
.veh-chip span { display: flex; flex-direction: column; gap: 1px; }
.veh-chip strong { font-size: 14px; }
.veh-chip small { color: var(--muted); font-weight: 500; font-size: 11.5px; }
.pause-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--sun-soft); color: #6b4f04;
  border-radius: 12px; padding: 8px 14px; margin-top: 12px;
  font-size: 13px; font-weight: 700;
}
.shift-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat-row-3 { grid-template-columns: repeat(3, 1fr); }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 14px;
}
.stat .k { font-size: 12px; color: var(--muted); font-weight: 600; }
.stat .v { font-size: 22px; font-weight: 800; margin-top: 2px; }

/* ---------- Listen ---------- */
.list { display: flex; flex-direction: column; }
.list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line);
}
.list-row:last-child { border-bottom: none; }
.list-main { flex: 1; min-width: 0; }
.list-title { font-weight: 700; font-size: 14.5px; }
.list-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.list-amount { font-weight: 800; font-size: 15px; white-space: nowrap; }
.list-empty { color: var(--muted); text-align: center; padding: 22px 0; font-size: 14px; }
.list-scroll { max-height: 480px; overflow-y: auto; }

.chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  white-space: nowrap;
}
/* "aktiv", "signiert", "gekoppelt", "geprüft" … – positive Zustände, deshalb Ampelgrün statt
 * Markenfarbe (siehe --ok oben). */
.chip.go { background: var(--ok-soft); color: var(--ok-dark); }
.chip.sun { background: var(--sun-soft); color: #8a6414; }
.chip.rose { background: var(--rose-soft); color: var(--rose); }
.chip.warn { background: var(--sun-soft); color: #8a6414; } /* PIN fehlt / gesperrt (Fahrer-Tabelle) */

/* Hinweisleiste oben: Datenbestand nahe an der Servergrenze (warn) oder Speichern abgelehnt (err) */
/* Nicht klebend: eine klebende Leiste lag beim Scrollen ueber der ebenfalls klebenden Kopfzeile und verdeckte Menue und Abmelden */
.speicher-hinweis { position: relative; padding: 10px 16px; font-size: 14px; font-weight: 600; text-align: center; }
.speicher-hinweis.warn { background: var(--sun-soft); color: #8a6414; }
.speicher-hinweis.err { background: var(--rose-soft); color: var(--rose); }
.chip.plain { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }

/* ---------- Formulare ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.form-grid-3 { grid-template-columns: 1fr 1fr 0.7fr; }

.ride-details {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 14px 2px;
  margin-bottom: 14px;
}
.ride-details .form-grid { margin-bottom: 12px; }
.dt-row label.ride-details-title { font-weight: 700; color: var(--ink); white-space: nowrap; }
.ride-details-title span { font-weight: 400; color: var(--muted); }
.form-grid label { font-size: 12.5px; font-weight: 600; color: var(--muted); display: block; margin-bottom: 4px; }
.form-grid input, .form-grid select, .form-grid textarea {
  width: 100%;
  font-family: inherit; font-size: 14px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
}
.form-grid textarea { resize: vertical; }
.form-grid input:read-only { background: var(--bg); color: var(--muted); cursor: not-allowed; }
/* Datumsfelder ausserhalb von .form-grid (z. B. Belegjournal-Filter) - gleiches Erscheinungsbild
 * wie andere Formularfelder statt des unstyled Browser-Standardkastens. */
input[type="date"], input[type="time"], input[type="week"], input[type="month"] {
  font-family: inherit; font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
}
.form-note { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.form-note.err { color: var(--rose); font-weight: 600; margin-top: 8px; }
.auth-card { text-align: left; margin-top: 18px; }

.info-note {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--go-soft); color: var(--go-dark);
  border-radius: 12px; padding: 12px 14px;
  font-size: 13px; font-weight: 600; line-height: 1.5;
  margin: 4px 0 12px;
}
.info-note svg { flex-shrink: 0; margin-top: 1px; }

.kassenstatus-list { display: flex; flex-direction: column; gap: 8px; }
.kassenstatus-row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px;
}
.kassenstatus-row[data-show] { cursor: pointer; }
.kassenstatus-row[data-show]:active { background: var(--bg); }
.kassenstatus-main { flex: 1; min-width: 0; }
.kassenstatus-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.kassenstatus-chevron { color: var(--muted); font-size: 18px; font-weight: 700; }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--muted); flex: none; }
.kv .v { font-family: ui-monospace, "SF Mono", Consolas, monospace; text-align: right; }
.code-block {
  margin-top: 12px; padding: 12px; background: #1c1c1c; color: #d8f5e0; border-radius: 8px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 11.5px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow-y: auto;
}
.code-block.err { color: #ffd0d0; }
.search-input {
  display: block; width: 100%;
  font-family: inherit; font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
}
.ums-entity-list {
  display: flex; flex-direction: column;
  margin: 8px 0 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
  max-height: 190px; overflow-y: auto; overscroll-behavior: contain;
}
.ums-entity-item { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.ums-entity-item:last-child { border-bottom: none; }
.ums-entity-item:active { background: var(--go-soft); }
.ums-entity-item input { flex: none; width: 18px; height: 18px; accent-color: var(--go); }
.ums-entity-all { font-weight: 700; background: var(--card); }
.logo-row { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.logo-preview { width: 96px; height: 96px; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 6px; }
.logo-preview.logo-empty { display: flex; align-items: center; justify-content: center; font-size: 11.5px; color: var(--muted); text-align: center; background: var(--card); }
.doc-thumb { width: 36px; height: 36px; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; display: block; }

/* ---------- Tabellen (Admin) ---------- */
.table-wrap { overflow-x: auto; }
.table-scroll { max-height: 480px; overflow-y: auto; }
.table-scroll thead th { position: sticky; top: 0; background: var(--card); z-index: 1; }
/* Greift ab mehr als 5 Zeilen (siehe admKassen()): Liste wächst dann nicht mehr unbegrenzt in
 * die Länge, sondern wird ab ca. 5 sichtbaren Zeilen scrollbar. */
.table-scroll-cap { max-height: 300px; overflow-y: auto; }
.table-scroll-cap thead th { position: sticky; top: 0; background: var(--card); z-index: 1; }
.collapse-arrow { display: inline-block; width: 1em; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th {
  text-align: left; padding: 10px 12px;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted);
  border-bottom: 1.5px solid var(--line);
  white-space: nowrap;
}
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--line); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl td.num, .tbl th.num { text-align: right; white-space: nowrap; }
.tbl-sub { font-size: 11px; color: var(--muted); }
.tbl .row-off td { opacity: .55; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }

/* ---------- PIN ---------- */
.modal-pin { width: min(320px, 92vw); text-align: center; }
.pin-who { font-weight: 700; margin-bottom: 10px; }
.pin-dots { display: flex; justify-content: center; gap: 12px; margin-bottom: 16px; }
.pin-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--line); }
.pin-dot.on { background: var(--go); }
.modal-pin .numpad { margin-bottom: 10px; }
.pin-shake { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ---------- Modals ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(34, 48, 43, .45);
  display: grid; place-items: center;
  padding: 16px;
}
.modal {
  background: var(--card);
  border-radius: 20px;
  padding: 20px;
  width: min(420px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,.18);
}
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---------- Willkommens-Video ---------- */
/* Echtes Vollbild statt Karte im abgedunkelten Hintergrund: soll als Erstes erscheinen, bevor der
   Fahrer die Schicht-Bereiche überhaupt sieht (route() wird erst aufgerufen, nachdem das Video zu
   Ende ist, siehe showLoginVideo() in app.js) - kein data-close/Abbrechen, läuft immer komplett durch. */
#loginVideoModal { padding: 0; background: #000; }
.modal-video { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; padding: 0; overflow: hidden; background: #000; display: grid; place-items: center; box-shadow: none; }
.modal-video video { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---------- Beleg ---------- */
.modal-receipt { width: min(380px, 100%); }

/* ---------- Rechnung ---------- */
.modal-invoice { width: min(640px, 100%); }
.modal-report { width: min(720px, 100%); }
.modal-report.landscape-report { width: min(1000px, 100%); }
@media print {
  @page { size: A4; margin: 15mm; }
  @page landscapeReport { size: A4 landscape; margin: 12mm; }
  .landscape-report .invoice { page: landscapeReport; }
}
.invoice { background: #fff; color: #1c1c1c; border: 1px solid var(--line); border-radius: 8px; padding: 24px 28px; font-size: 12.5px; line-height: 1.4; }
.invoice h3 { font-size: 15px; font-weight: 700; margin: 32px 0 8px; }
.inv-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; gap: 20px; }
.inv-logo-row { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.inv-logo { display: block; max-width: 140px; max-height: 56px; object-fit: contain; }
.inv-sender { font-weight: 800; font-size: 13px; }
.inv-sub { font-size: 10px; color: #666; }
.inv-meta { text-align: right; font-size: 10px; margin-top: 10px; }
.inv-meta div { display: flex; justify-content: space-between; gap: 14px; }
.inv-meta span { color: #666; }
.inv-return { font-size: 8px; color: #999; margin-bottom: 8px; padding-bottom: 2px; border-bottom: 1px solid #ddd; }
.inv-recipient { margin-bottom: 8px; }
.inv-table { width: 100%; border-collapse: collapse; margin: 6px 0; }
.inv-table thead tr { background: #f4f4f2; }
.inv-table tfoot td { background: #f4f4f2; border-top: 1.5px solid var(--line); border-bottom: none; }
.inv-table th { text-align: left; font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: #666; border-bottom: 1.5px solid var(--line); padding: 5px 6px; }
.inv-table td { padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.inv-table td.num, .inv-table th.num { text-align: right; white-space: nowrap; }
.inv-sum { width: 100%; margin-top: 6px; background: #f4f4f2; border-radius: 6px; }
.inv-sum td { padding: 4px 12px; }
.inv-sum td.num { text-align: right; }
.inv-sum .inv-total td { font-weight: 800; border-top: 1px solid #d8d8d3; padding-top: 6px; }
.inv-terms { font-size: 10px; color: #444; margin-top: 8px; }
.inv-preview-banner {
  background: var(--sun-soft); color: #8a6414; border: 1px solid #f0d99a;
  border-radius: 8px; padding: 8px 12px; font-size: 11px; font-weight: 700;
  text-align: center; margin-bottom: 14px;
}
.inv-signoff { font-size: 11px; margin-top: 14px; line-height: 1.5; }
.inv-qr { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 6px 10px; background: #f4f4f2; border-radius: 6px; }
/* 64px ≈ 17mm im Druck - knapp unter der offiziellen GiroCode-Empfehlung von 2 cm Kantenlänge,
   mit modernen Handykameras aber noch zuverlässig scannbar. Kleiner nicht empfehlenswert. */
.inv-qr canvas { display: block; width: 64px; height: 64px; flex: none; }
.inv-qr-caption { text-align: center; font-size: 8px; color: #888; letter-spacing: .04em; margin-top: 3px; }
.inv-qr-text { font-size: 10px; color: #444; line-height: 1.35; }
.inv-qr-text strong { color: #1c1c1c; }
/* Trennlinie sitzt jetzt direkt an der Fußzeile (border-top) statt als eigenes <hr>-Element davor -
   dadurch sind Linie und Fußzeile ein gemeinsamer Block, der beim Seitenumbruch nicht mehr
   auseinandergerissen werden kann (vorher konnte die Rechnung auf Seite 1 enden und die Fußzeile
   für sich allein auf Seite 2 beginnen). */
.inv-foot { font-size: 8.5px; color: #666; line-height: 1.3; margin-top: 24px; padding-top: 8px; border-top: 1px solid var(--line); }
/* Nur noch für die Bildschirm-Vorschau relevant: die eigentliche Rechnungs-PDF wird nicht mehr aus
   diesem HTML gedruckt, sondern direkt mit pdf-lib gezeichnet (siehe invoice-pdf.js) - dort ist die
   Fußzeile ein festes 4-Spalten-Tabellenlayout, unabhängig von dieser Flexbox-Regel hier. */
.inv-foot-cols { display: flex; flex-wrap: wrap; gap: 3px 16px; }
.inv-foot-cols > div { flex: 1 1 150px; min-width: 150px; overflow-wrap: anywhere; }

/* ---------- Rechnungs-Baukasten ---------- */
.rb-pos-head { display: none; }
.rb-pos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px; align-items: center;
}
.rb-pos { margin-bottom: 8px; }
.rb-pos input, .rb-pos select {
  font-family: inherit; font-size: 13.5px; padding: 8px;
  border: 1px solid var(--line); border-radius: 8px; width: 100%;
  background: #fff; color: inherit;
}
.rb-amt { font-weight: 700; text-align: right; white-space: nowrap; }
.rb-pos .btn-icon { color: var(--rose); }
.rb-discount-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; }
.rb-discount-row label { font-weight: 600; color: var(--muted); flex: none; }
.rb-discount-row input { width: 80px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font-family: inherit; font-size: 13.5px; }
.rb-discount-row select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font-family: inherit; font-size: 13.5px; }
.rb-discount-row .num { margin-left: auto; font-weight: 700; color: var(--rose); }
.rb-summary { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13.5px; }
.rb-summary div { display: flex; justify-content: space-between; padding: 3px 0; }
.rb-summary .rb-total { font-weight: 800; font-size: 15px; border-top: 1.5px solid var(--ink); margin-top: 6px; padding-top: 8px; }
.receipt {
  font-family: "Consolas", "Courier New", monospace;
  font-size: 12.5px;
  background: #fffef8;
  color: #1c1c1c;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 14px;
  white-space: pre-wrap;
}
.receipt .r-center { text-align: center; }
.receipt .r-title { font-size: 15px; font-weight: 700; }
.receipt .r-big { font-size: 22px; font-weight: 800; }
.receipt hr { border: none; border-top: 1px dashed #bbb; margin: 8px 0; }
.receipt table { width: 100%; border-collapse: collapse; }
.receipt td { padding: 1.5px 0; vertical-align: top; }
.receipt td.num { text-align: right; white-space: nowrap; }
.receipt .r-small { font-size: 11px; color: #555; }
.receipt .r-qr { display: grid; place-items: center; margin-top: 8px; }
.receipt .r-storno { color: var(--rose); font-weight: 700; }
.receipt .r-belegart { text-align: center; font-weight: 800; letter-spacing: .1em; margin: 4px 0; }
/* Nur für Belege MIT digitalem QR-Panel (signierte Bar-/Karten-/CALEMO-Belege, siehe
   eligibleForDigitalReceipt() in app.js) weicht der Papierbeleg auf dem Bildschirm dem QR-Panel -
   showReceipt() setzt diese Klasse gezielt. Rechnungen, Start-/Jahresbeleg und Belege mit
   fehlgeschlagener Signatur haben kein Panel und zeigen weiterhin ganz normal den Papierbeleg auf
   dem Bildschirm (sonst stünde dort nichts). @media print hebt das für den Druck ohnehin auf. */
#receiptPaper.dr-screen-hidden { display: none; }

/* ---------- Digitale Belegausgabe: QR-Panel im Beleg-Modal ---------- */
.digital-receipt { text-align: center; }
.digital-receipt:empty { display: none; }
.dr-amount { font-size: 28px; font-weight: 800; }
.dr-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 2px 0 12px; }
.dr-qr { display: grid; place-items: center; background: #fff; border-radius: 10px; padding: 12px; }
.dr-qr canvas { display: block; }
.dr-hint { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.dr-hint-sub { margin-top: 2px; }
.dr-unavailable { font-size: 13px; color: var(--rose); line-height: 1.4; }

/* ---------- Icon-Buttons (Zeilen-Aktionen, z. B. schnell drucken) ---------- */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle;
  width: 32px; height: 32px; flex: none;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  font-size: 15px; color: var(--ink); cursor: pointer;
}
.btn-icon:hover { background: var(--go-soft); }

/* ---------- Diagramm: tägliche Auswertung ---------- */
.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chart-col-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12.5px; color: var(--muted); font-weight: 600; margin-bottom: 4px;
}
.chart-col-head strong { font-size: 17px; color: var(--ink); font-weight: 800; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-baseline { stroke: var(--line); stroke-width: 1px; }
.chart-bar-fill { transition: filter .1s ease; }
.chart-hit { fill: transparent; cursor: pointer; }
.chart-band:hover .chart-bar-fill,
.chart-band:focus .chart-bar-fill { filter: brightness(1.12); }
.chart-band:focus { outline: none; }
.chart-band:focus-visible .chart-hit { stroke: var(--go); stroke-width: 2px; fill: none; }
.chart-axis-label { font-size: 9.5px; fill: var(--muted); font-family: inherit; }
.chart-value-label { font-size: 10.5px; font-weight: 800; fill: var(--ink); font-family: inherit; }

.chart-tooltip {
  position: fixed;
  transform: translate(-50%, calc(-100% - 10px));
  background: var(--ink); color: #fff;
  padding: 6px 11px; border-radius: 9px;
  font-size: 12px; white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  pointer-events: none; z-index: 60;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.chart-tooltip.hidden { display: none; }
.ctt-value { font-weight: 800; font-size: 13px; }
.ctt-label { color: rgba(255,255,255,.75); font-size: 11px; }

@media (max-width: 640px) {
  .chart-row { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .stat-row-3 { grid-template-columns: 1fr 1fr; }
  .stat-row-3 .stat:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .tab-bar { padding-top: 10px; }
  .tab { font-size: 13px; padding: 8px 14px; }
}

@media print {
  /* body selbst wird nie versteckt (nur seine Kind-Elemente über die Regel unten) - sein eigenes
     globales min-height:100vh + background (siehe :root/body oben) blieb deshalb im Druck aktiv
     und erzeugte eine eingefärbte Fläche in Fensterhöhe UNTER dem eigentlichen Rechnungsinhalt.
     Das war die Ursache der Leerseite/2. Seite: die Druck-Engine musste diese überschüssige Höhe
     mitdrucken, auch wenn der tatsächliche Inhalt (die Rechnung) längst zu Ende war. */
  body { min-height: 0; background: #fff; }
  body > *:not(#receiptModal):not(#shiftReportModal):not(#reportModal):not(#invoiceModal) { display: none !important; }
  .modal-backdrop { position: static; background: none; display: block; padding: 0; }
  /* max-height+overflow-y:auto lässt Druck-Engines (v. a. Safari/iPadOS) den Inhalt wie eine
     abgeschnittene Scrollbox behandeln statt normal über mehrere Seiten zu fließen – deshalb
     hier für den Druck komplett aufgehoben. */
  .modal { width: auto; max-height: none; overflow: visible; box-shadow: none; padding: 0; border-radius: 0; }
  .modal-actions { display: none; }
  .receipt { border: none; }
  /* Umgekehrt zur Bildschirm-Ansicht: gedruckt wird immer der klassische Papierbeleg, das QR-Panel
     ist rein für den Bildschirm gedacht (siehe #receiptPaper/.digital-receipt oben). */
  #receiptPaper.dr-screen-hidden { display: block; }
  .digital-receipt { display: none; }
  .invoice { border: none; border-radius: 0; padding: 0; }
  /* Nur die äußersten Blöcke markieren – NICHT zusätzlich ihre Kind-Elemente (z. B. .inv-recipient/
     .inv-meta sind schon Teil von .inv-head). Gilt für Beleg-/Tagesabschluss-/Berichtsdruck
     (weiterhin echter Browser-Druck) - die Rechnung selbst wird nicht mehr über window.print()
     ausgegeben, sondern als eigene A4-PDF gezeichnet (siehe invoice-pdf.js, generateInvoicePdf()). */
  .inv-logo-row, .inv-return, .inv-head, .inv-signoff, .inv-qr, .inv-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ---------- Ausgaben & Belege ---------- */
.modal-ex { width: min(760px, 100%); text-align: left; }
.modal-ex h3 { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.modal-ex label { font-size: 12.5px; font-weight: 600; color: var(--muted); display: block; margin-bottom: 4px; }
.ex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.ex-grid .ex-wide { grid-column: 1 / -1; }
.ex-grid input, .ex-grid select, .ex-taxrow input, .ex-taxrow select, .ex-filters input, .ex-filters select {
  width: 100%; font-family: inherit; font-size: 14px; padding: 10px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink);
}
.ex-grid input:disabled, .ex-grid select:disabled, .ex-taxrow input:disabled, .ex-taxrow select:disabled { background: var(--bg); color: var(--muted); }
.ex-photo { background: var(--bg); border: 1px dashed var(--line); border-radius: 14px; min-height: 120px; display: grid; place-items: center; margin-bottom: 12px; overflow: hidden; }
.ex-photo img { display: block; max-width: 100%; max-height: 340px; object-fit: contain; }
.ex-photo-empty { color: var(--muted); font-size: 13.5px; padding: 28px 12px; }
.ex-photo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-bottom: 14px; cursor: pointer; font-size: 15px !important; color: #fff !important; padding: 14px 16px; border-radius: 12px; }
.ex-taxrow { display: flex; gap: 8px; margin-bottom: 6px; align-items: center; }
.ex-taxrow .ex-gross { flex: 1.3; }
.ex-taxrow .ex-rate { flex: 1; }
.ex-sum { margin: 10px 0 2px; font-size: 13.5px; color: var(--muted); }
.ex-sum strong { color: var(--ink); }
.ex-ok { color: var(--ok-dark); }
.ex-err { color: var(--rose); font-weight: 600; }
.ex-check { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; margin: 0; }
.ex-check input { width: auto; }
.ex-vers { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.ex-vers .ex-grid { margin: 8px 0 0; }
.ex-events { margin-top: 12px; font-size: 13px; color: var(--muted); }
.ex-event { padding: 4px 0; border-bottom: 1px solid var(--line); }
.ex-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; }
.ex-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.ex-item-side { display: flex; flex-direction: column; gap: 4px; flex: none; }
.ex-item-side { align-items: flex-end; }
.ex-filters { grid-template-columns: repeat(4, 1fr); }
.ex-filters label { font-size: 12px; }
@media (max-width: 640px) { .ex-grid, .ex-filters { grid-template-columns: 1fr; } }
.modal-ex .modal-actions { flex-wrap: wrap; justify-content: stretch; }
.modal-ex .modal-actions .btn { flex: 1 1 140px; }
.ex-help { margin: 8px 0 14px; padding: 10px 14px; border: 1px solid var(--line, #e3e8f0); border-radius: 12px; background: var(--card-soft, rgba(127,127,127,.06)); font-size: 14px; line-height: 1.5; }
.ex-help summary { cursor: pointer; font-weight: 700; }
.ex-help p, .ex-help ul { margin: 8px 0 0; }
.ex-help ul { padding-left: 20px; }
.es-pay + .form-note, #esRates + .form-note { display: block; margin-top: 4px; font-size: 12.5px; }
/* flex-Kind darf unter die Breite seiner breitesten Tabelle schrumpfen (sonst scrollt die ganze Seite seitwaerts) */
.admin-shell .app-main.wide { min-width: 0; }
@media (max-width: 820px) { .admin-shell { align-items: stretch; } .admin-shell .app-main.wide { flex: none; width: 100%; padding: 16px 14px 36px; } }
/* Eingabefelder in Tabellen (Ausgaben-Kategorien) im gleichen Stil wie die uebrigen Formularfelder */
.tbl input[type="text"], .tbl select {
  width: 100%; min-width: 120px;
  font-family: inherit; font-size: 14px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
}
.tbl select { min-width: 90px; }
.tbl input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ink); }
.tbl input[type="text"]:focus, .tbl select:focus { outline: 2px solid var(--ink); outline-offset: 1px; }

/* Fristen je Fahrzeug (fristen.js): Aktionsknoepfe nebeneinander, bei wenig Platz umbrechen */
.fr-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

/* Belegarten je Fahrzeug (belegarten.js) */
.ba-group { grid-column: 1 / -1; display: grid; gap: 8px; }
.ba-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.ba-opt { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 600; margin: 0; }
.ba-opt input { width: auto; margin: 0; }
.ba-opt small { font-weight: 400; color: var(--muted); }
.ba-del { border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.ba-del:hover, .ba-del:focus-visible { color: var(--rose); }
.ba-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Eigene-Belegart-Zeile steht auch ausserhalb von .form-grid/.tbl - gleiches Erscheinungsbild wie dort */
.ba-add input, .ba-add select { font-family: inherit; font-size: 14px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); }
.ba-add input { flex: 1 1 220px; min-width: 0; }
.ba-add select { flex: 0 0 auto; width: auto; min-width: 0; }
.ba-add input:focus, .ba-add select:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.ba-opt input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ink); }
.ba-edit-row td { background: var(--bg-soft, transparent); }
.ba-fahrt-label { font-size: 13px; font-weight: 600; color: var(--muted); margin: 12px 0 6px; }
.ba-fahrt-row { margin-bottom: 14px; }

/* GPS-Ortung am Terminal (gps.js) */
.gps-hinweis { margin: 8px auto 0; font-size: 13px; color: var(--muted); }
.gps-hinweis.gps-aus { color: var(--rose); font-weight: 600; }
.gps-fahrt-start { width: 100%; margin-bottom: 12px; }
.gps-fahrt-start small { font-weight: 400; color: var(--muted); }
.gps-fahrt-laeuft { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; margin-bottom: 12px; border-radius: 12px; background: var(--ok-soft); color: var(--ok-dark); font-weight: 700; }

/* GPS-Ortung Admin (gps-admin.js): PC/Tablet breit, Handy schmal */
.gps-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; background: var(--line); }
.gps-dot.gruen { background: #1fa971; }
.gps-dot.orange { background: #f08c1a; }
.gps-dot.rot { background: #d64550; }
.gps-dot.grau { background: #9aa3b2; }
.gps-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 10px; font-size: 13px; }
.gps-legende .gps-stand { margin-left: auto; color: var(--muted); }
.gps-ort { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.gps-einst { display: grid; gap: 10px; margin: 10px 0 14px; }
.gps-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; margin: 0; }
.gps-check input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--ink); }
.gps-einst select { width: auto; font-family: inherit; font-size: 14px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); }
.gps-zeile { align-items: center; gap: 12px; }
.gps-dot-gross { width: 16px; height: 16px; flex: 0 0 auto; }
.gps-status { font-weight: 400; color: var(--muted); margin-left: 6px; }
@media (max-width: 640px) { .gps-zeile .gps-ort { display: none; } .gps-legende .gps-stand { margin-left: 0; width: 100%; } }

/* Kopfzeile am Handy: passt in die Bildschirmbreite (vorher seitlicher Bildlauf, "Abmelden" abgeschnitten) */
@media (max-width: 560px) {
  .app-head { padding: 10px 12px; gap: 8px; }
  .app-head .avatar-logo { display: none; }
  .head-user { gap: 8px; min-width: 0; }
  .head-user > div { min-width: 0; }
  .head-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
  .head-right { gap: 6px; flex-shrink: 0; }
  .head-right .btn { padding: 8px 10px; font-size: 13px; }
}

.gps-loeschen { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }

/* GPS-Karte (gps-admin.js): breit Karte + Liste nebeneinander, Tablet hochkant untereinander, Handy Umschalter */
.gps-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.gps-kopf .card-title { margin: 0; }
.gps-umschalter { display: none; gap: 6px; }
.gps-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.gps-grid.ohne-karte { grid-template-columns: minmax(0, 1fr); }
.gps-karte { height: 560px; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; background: var(--bg); position: relative; z-index: 0; isolation: isolate; } /* Kartenebenen bleiben unter Kopfzeile und Dialogen */
.gps-karte-hinweis { padding: 24px 16px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; }
.gps-liste-wrap { max-height: 560px; overflow: auto; }
.gps-zeile[data-gps-fahrzeug] { cursor: pointer; }
.gps-zeile[data-gps-fahrzeug]:hover { background: var(--bg); }
.gps-tooltip { font-weight: 700; font-size: 12px; padding: 2px 6px; }
.leaflet-container { font-family: inherit; }
@media (max-width: 1100px) {
  .gps-grid { grid-template-columns: minmax(0, 1fr); }
  .gps-karte { height: 460px; }
  .gps-liste-wrap { max-height: none; }
}
@media (max-width: 640px) {
  .gps-umschalter { display: flex; }
  .gps-grid.ansicht-karte:not(.ohne-karte) .gps-liste-wrap { display: none; } /* ohne Karte immer die Liste */
  .gps-grid.ansicht-liste .gps-karte-wrap { display: none; }
  .gps-karte { height: 62vh; min-height: 320px; }
}

/* GPS Strecken (gps-admin.js) */
.gps-str-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.gps-str-filter label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.gps-str-filter input, .gps-str-filter select { font-family: inherit; font-size: 14px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); }
.gps-zeile.gps-aktiv { background: var(--bg); box-shadow: inset 3px 0 0 #1fa971; }
.gps-str-detail { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.gps-str-kopf { margin-bottom: 10px; }
.gps-linie { display: inline-block; width: 22px; height: 0; border-top: 4px solid #5b7bd5; vertical-align: middle; border-radius: 2px; }
.gps-linie.gast { border-top: 6px solid #1fa971; }
.gps-str-detail .gps-grid { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
@media (max-width: 1100px) { .gps-str-detail .gps-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .gps-str-detail .gps-grid .gps-liste-wrap { display: block; } .gps-str-detail .gps-karte { height: 52vh; } }

/* Arbeitszeit-Korrektur (arbeitszeit.js) */
.az-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 12px 0; }
.az-filter label, .az-felder label, .az-pause label, .az-grund { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.az-filter input, .az-filter select, .az-editor input, .az-editor select { font-family: inherit; font-size: 14px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); }
.az-editor { display: grid; gap: 12px; padding: 12px; margin: 8px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.az-felder { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.az-kopf { font-size: 15px; }
.tbl tr.az-aktiv td { background: var(--bg); }
.az-pausen { display: grid; gap: 8px; }
.az-pause { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.az-grund input { width: 100%; }
.az-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.az-aktionen { white-space: nowrap; }
.az-prot td { font-size: 13px; }
/* Protokoll am Handy: jede Eintragung als Block mit beschrifteten Feldern statt breiter Tabelle */
@media (max-width: 640px) {
  .az-prot thead { display: none; }
  .az-prot, .az-prot tbody, .az-prot tr, .az-prot td { display: block; }
  .az-prot tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .az-prot td { border: 0; padding: 2px 0; }
  .az-prot td::before { content: attr(data-l) ": "; color: var(--muted); }
}

/* GPS-Einstellungen: zuklappbar, gespeicherter Stand mit "Ändern" (gps-admin.js) */
.gps-einst-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.gps-einst-kopf .card-title { margin: 0; }
.gps-einst-kurz { flex: 1; font-size: 14px; color: var(--muted); }
.gps-einst-pfeil { font-size: 16px; color: var(--muted); }
.gps-einst-kopf:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
#gpsEinstInhalt { margin-top: 12px; }
.gps-einst-ansicht { margin-bottom: 12px; }
.gps-einst-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.gps-einst-ansicht .v { font-family: inherit; font-weight: 600; }
.gps-einst-ansicht .kv { font-size: 14px; padding: 8px 0; }

/* Buchhaltung (buchhaltung.js) */
.bh-kopf { display: grid; gap: 10px; }
.bh-monatwahl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 17px; }
.bh-reiter { display: flex; gap: 6px; flex-wrap: wrap; }
.bh-pruef { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.bh-pruef li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
/* Steuerprofil (steuerprofil.js) */
.sp-overlay { position: fixed; inset: 0; z-index: 900; background: var(--bg, #0b1220); overflow-y: auto; padding: 24px 16px; }
.sp-box { max-width: 560px; margin: 24px auto; background: var(--card, #111a2e); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.sp-box h2 { margin: 0 0 8px; font-size: 20px; }
.sp-schritt { font-size: 13px; color: var(--muted); margin: 6px 0 12px; }
.sp-feld { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 10px 0; min-width: 0; }
.sp-feld legend { padding: 0 4px; font-weight: 600; }
.sp-option { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-weight: 400; cursor: pointer; }
.sp-option input { width: auto; margin: 0; }
.sp-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sp-fehler { color: var(--danger, #c0392b); }
.sp-liste { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 6px 0; }
.sp-liste dt { color: var(--muted); }
.sp-liste dd { margin: 0; font-weight: 600; }
.sp-profil { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 10px 0; }
.sp-aendern { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.sp-warn { border: 1px solid var(--rose, #e0607e); border-radius: 10px; padding: 8px 12px; margin: 10px 0; }
.sp-verlauf { margin-top: 10px; }
/* Steuerberater-Export (stb-export.js) */
.stb-formate { border: 1px solid var(--line); border-radius: 10px; margin: 12px 0 0; padding: 8px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.stb-formate legend { padding: 0 4px; font-size: 13px; color: var(--muted); }
.stb-format { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin-right: 12px; }
.stb-formate label { margin: 0; display: inline; }
.stb-formate input[type=checkbox] { width: auto; margin: 0; }
.bh-pruef li.bh-warn { border-color: var(--rose); }
.bh-summe td { font-weight: 600; border-top: 1px solid var(--line); }
.bh-form { display: grid; gap: 10px; padding: 12px; margin: 8px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.bh-felder { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.bh-felder label, .bh-form > label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.bh-form input, .bh-form select { font-family: inherit; font-size: 14px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); }
.bh-check { display: flex !important; align-items: center; gap: 8px; }
.bh-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.bh-plattformen { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.bh-abw { color: var(--rose); font-weight: 600; }
/* Kontoauszug: Ampel je Bankzeile */
.bk-ampel { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }
.bk-gruen { background: var(--ok, #2e9e6b); }
.bk-gelb { background: var(--sun, #e2a72e); }
.bk-grau { background: var(--muted, #8a8f98); }
@media (max-width: 640px) {
  .bh-journal thead, .bh-salden thead, .bh-konten thead, .bh-abr thead, .bh-lohn thead, .bh-vertraege thead, .bk-zeilen thead { display: none; }
  .bh-journal, .bh-journal tbody, .bh-journal tr, .bh-journal td,
  .bh-salden, .bh-salden tbody, .bh-salden tr, .bh-salden td,
  .bh-konten, .bh-konten tbody, .bh-konten tr, .bh-konten td,
  .bh-abr, .bh-abr tbody, .bh-abr tr, .bh-abr td,
  .bh-lohn, .bh-lohn tbody, .bh-lohn tr, .bh-lohn td,
  .bk-zeilen, .bk-zeilen tbody, .bk-zeilen tr, .bk-zeilen td,
  .bh-vertraege, .bh-vertraege tbody, .bh-vertraege tr, .bh-vertraege td { display: block; }
  .bh-journal tr, .bh-salden tr, .bh-konten tr, .bh-abr tr, .bh-lohn tr, .bh-vertraege tr, .bk-zeilen tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .bh-journal td, .bh-salden td, .bh-konten td, .bh-abr td, .bh-lohn td, .bh-vertraege td, .bk-zeilen td { border: 0; padding: 2px 0; text-align: left; }
  .bh-journal td.num, .bh-salden td.num, .bh-konten td.num, .bh-abr td.num, .bh-lohn td.num, .bh-vertraege td.num, .bk-zeilen td.num { text-align: left; }
  .bh-journal td[data-l]::before, .bh-salden td[data-l]::before, .bh-konten td[data-l]::before, .bh-abr td[data-l]::before, .bh-lohn td[data-l]::before, .bh-vertraege td[data-l]::before, .bk-zeilen td[data-l]::before { content: attr(data-l) ": "; color: var(--muted); }
}

/* ---------- Internetfunk (funk.js / funk-admin.js, Paket Business) ---------- */
.funk-bar {
  position: fixed; left: 0; right: 0; z-index: 19;
  bottom: calc(66px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 1.3fr); gap: 10px; align-items: stretch;
  padding: 8px 10px; background: var(--card); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 14px rgba(20, 30, 50, .06);
}
body.funk-an #driverView .app-main { padding-bottom: 180px; }
.funk-talk {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: none; border-radius: 16px; padding: 12px 14px; min-height: 64px;
  background: var(--go); color: #fff; font-family: inherit; cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.funk-talk:disabled { background: var(--line); color: var(--muted); cursor: default; }
.funk-talk.rec { background: var(--rose); animation: funk-puls 1s ease-in-out infinite; }
@keyframes funk-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(214, 69, 80, .45); } 50% { box-shadow: 0 0 0 10px rgba(214, 69, 80, 0); } }
.funk-talk-icon { display: flex; }
.funk-talk-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.funk-talk-text strong { font-size: 16px; }
.funk-talk-text small { font-size: 11.5px; opacity: .85; font-weight: 500; }
.funk-talk-adm { width: 100%; min-height: 84px; margin-top: 10px; }
.funk-talk-adm .funk-talk-text strong { font-size: 18px; }
.funk-side { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-width: 0; }
.funk-status { font-size: 12.5px; color: var(--muted); line-height: 1.3; overflow: hidden; }
.funk-status.rec { color: var(--rose); font-weight: 700; }
.funk-status.play { color: var(--go); font-weight: 700; }
.funk-status.warn { color: #b8690a; font-weight: 600; }
.funk-status.ok { color: #1fa971; font-weight: 600; }
.funk-status.aus { color: var(--muted); }
.funk-status[data-funk-freischalten], .funk-status[data-funk-adm-freischalten] { cursor: pointer; text-decoration: underline; }
.funk-status.neu { color: var(--rose); font-weight: 700; }
.funk-status[data-funk-nachhoeren], .funk-status[data-funk-adm-nachhoeren], .funk-status[data-dispo-nachhoeren] { cursor: pointer; text-decoration: underline; }
#funkAdmStatus { margin-top: 10px; font-size: 13.5px; min-height: 18px; }
/* Textnachrichten der Zentrale: Eingabezeile (Dashboard + Admin-Reiter), Kennzeichen "Text" und Textkoerper im Verlauf */
.dispo-textzeile, .funk-adm-textzeile { display: flex; gap: 8px; margin-top: 10px; }
.dispo-textzeile input, .funk-adm-textzeile input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 14px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink);
}
.dispo-textzeile input:focus, .funk-adm-textzeile input:focus { outline: 2px solid var(--go); outline-offset: 1px; }
.dispo-textzeile input:disabled, .funk-adm-textzeile input:disabled { background: var(--bg); color: var(--muted); }
.funk-tag {
  display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 6px;
  background: var(--go-soft); color: var(--go-dark); margin-left: 6px; vertical-align: middle;
}
.funk-textkoerper { white-space: normal; overflow-wrap: anywhere; margin: 2px 0; }
/* Zuteilung bei Rundrufen (Dashboard + Admin-Reiter): Kennzeichen der Folgenachrichten, Knoepfe, Ergebniszeile */
.funk-tag-zusage { background: var(--go-soft); color: var(--go-dark); }
.funk-tag-absage { background: var(--line, #2a3550); color: var(--muted); }
.funk-zuteilen-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.funk-zuteilung { margin-top: 4px; font-weight: 600; color: var(--go); font-size: 13px; overflow-wrap: anywhere; }
/* Terminal: Karte mit Textnachricht der Zentrale - erstes Kind der festen Sprechleiste (#funkBar), ueber der Sprechtaste */
.funk-textkarte {
  grid-column: 1 / -1; margin: 0 0 2px; padding: 12px 14px; border-radius: 14px;
  background: var(--card); color: var(--ink); border: 2px solid var(--go);
}
.funk-textkarte-kopf { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.funk-textkarte-rechts { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; color: var(--muted); }
.funk-textkarte-text { font-size: 17px; line-height: 1.4; margin: 8px 0 12px; overflow-wrap: anywhere; max-height: 40vh; overflow-y: auto; }
.funk-textkarte-knoepfe { display: flex; gap: 8px; }
.funk-textkarte-knoepfe .btn { flex: 1; padding: 12px 8px; font-weight: 700; }
.funk-textkarte-knoepfe .btn-plain { flex: 0 0 auto; }
/* Folgenachricht einer Zuteilung: "Fahrt bestaetigt" (gruen) / "Fahrt vergeben" (grau), ein breiter OK-Knopf */
.funk-textkarte-zusage { border-color: var(--ok, #0f8a6d); }
.funk-textkarte-absage { border-color: var(--muted); opacity: .92; }
.funk-textkarte-knoepfe [data-funk-text-ok] { flex: 1; }
body.funk-an.funk-text-an #driverView .app-main { padding-bottom: calc(190px + var(--funk-karte-h, 240px)); }
.funk-knoepfe { display: flex; gap: 6px; }
.funk-klein {
  flex: 1; border: 1px solid var(--line); background: var(--bg); color: var(--muted);
  border-radius: 10px; padding: 7px 6px; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.funk-klein.active { background: var(--go-soft); color: var(--go); border-color: transparent; }
.funk-klein.neu { background: var(--rose); color: #fff; border-color: transparent; }
.modal-funk { width: min(520px, 100%); }
.modal-funk .list { max-height: 60vh; overflow-y: auto; }
.funk-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }

/* ---------- Zentrale (funk-admin.js Reiter "Funk & Zentrale", zentrale-logic.js) ---------- */
.zentrale-flotte { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; }
.zentrale-fahrzeug {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; text-align: left;
  padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: inherit;
  font-family: inherit; font-size: 13px; cursor: pointer;
}
.zentrale-fahrzeug:hover { border-color: var(--go-soft); }
.zentrale-fahrzeug:focus-visible { outline: 2px solid var(--go); outline-offset: 2px; }
.zentrale-fahrzeug.gewaehlt { border-color: var(--go); background: var(--go-soft); }
.zentrale-fahrzeug.ohne-funk { opacity: .65; }
.zentrale-fahrzeug.ohne-funk .zentrale-fz-kopf strong { color: var(--muted); }
.zentrale-fz-kopf { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.zentrale-fz-kopf strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zentrale-fz-sub { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.3; max-width: 100%; overflow-wrap: anywhere; }
.zentrale-ohne-funk { color: var(--rose); font-weight: 600; }
.zentrale-flotte-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.zentrale-zaehler { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.zentrale-zaehler > span { display: inline-flex; align-items: center; gap: 6px; }
.zentrale-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 700;
}
.zentrale-chip.gezielt { background: var(--go-soft); border-color: var(--go); color: var(--go); }
.zentrale-chip-x { border: none; background: none; color: inherit; font: inherit; font-size: 16px; line-height: 1; padding: 0 2px; cursor: pointer; }
.zentrale-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.zentrale-zeile input { flex: 1 1 180px; min-width: 0; }
.zentrale-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.zentrale-pw { margin: 10px 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.zentrale-code {
  display: inline-block; margin: 8px 0 2px; padding: 8px 14px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: 22px; font-weight: 700;
  letter-spacing: .08em; user-select: all; overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  .zentrale-flotte { grid-template-columns: 1fr; }
  .zentrale-code { font-size: 18px; }
}
/* Reiter "Funk & Zentrale": Felder, Assistent "Funk einrichten", Statuszeile, Karte "Funk-Einstellungen" */
.zentrale-zeile input, .funk-assist-feld input {
  font-family: inherit; font-size: 14px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink);
}
.zentrale-zeile input:focus, .funk-assist-feld input:focus { outline: 2px solid var(--go); outline-offset: 1px; }
.zentrale-code-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.funk-assist-feld { border: 0; padding: 0; margin: 0; min-width: 0; }
.funk-assist-feld legend { padding: 0; margin-bottom: 10px; font-weight: 700; font-size: 16px; }
.funk-assist-feld label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 10px 0 4px; }
.funk-assist-feld input { width: 100%; max-width: 420px; display: block; }
.funk-assist-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.funk-wahl-liste { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) { .funk-wahl-liste { grid-template-columns: 1fr 1fr; } }
.funk-wahl {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 120px; width: 100%;
  padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.funk-wahl strong { font-size: 17px; }
.funk-wahl span { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.funk-wahl:hover { border-color: var(--go); background: var(--go-soft); }
.funk-wahl:focus-visible { outline: 2px solid var(--go); outline-offset: 2px; }
.funk-statuszeile { flex: 1 1 260px; min-width: 0; font-size: 14.5px; overflow-wrap: anywhere; }
.funk-statuszeile .funk-an { font-weight: 700; }
.funk-statuszeile .funk-aus { font-weight: 700; color: var(--rose); }
.funk-einst-abschnitt { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.funk-einst-titel { font-size: 13.5px; margin-bottom: 8px; }

/* ---------- Dispo-Dashboard (zentrale.html, zentrale.js) - PC zuerst: zwei Spalten ab 900 px ---------- */
.dispo-mitte { align-items: center; justify-content: center; padding: 24px; }
.dispo-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.dispo-kopf { flex-wrap: wrap; gap: 8px 16px; }
.dispo-kopf-links { min-width: 0; }
.dispo-kopf-links .head-name { font-size: 17px; overflow-wrap: anywhere; }
.dispo-status { flex: 1 1 260px; min-width: 0; min-height: 18px; text-align: center; font-size: 14px; }
.funk-status[data-dispo-freischalten] { cursor: pointer; text-decoration: underline; }
.dispo-main {
  flex: 1; width: 100%; max-width: 1560px; margin: 0 auto; padding: 18px 20px 24px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start;
}
.dispo-flotte, .dispo-funk, .dispo-karte { min-width: 0; }
.dispo-flotte-info { font-weight: 500; color: var(--muted); font-size: 13px; }
.dispo-talk { min-height: 116px; margin-top: 14px; }
.dispo-talk .funk-talk-text strong { font-size: 20px; }
#dispoFunkHinweis { margin-top: 8px; }
.dispo-verlauf { max-height: 46vh; overflow-y: auto; }
.dispo-karte-platz {
  min-height: 110px; display: grid; place-items: center; padding: 16px; text-align: center;
  color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; background: var(--bg);
}
.dispo-zaehler {
  position: sticky; bottom: 0; z-index: 15;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 24px;
  padding: 10px 16px; background: var(--card); border-top: 1px solid var(--line); font-size: 14px; color: var(--muted);
}
.dispo-zaehler > span { display: inline-flex; align-items: center; gap: 6px; }
.dispo-zaehler strong { color: var(--ink); font-size: 16px; }
@media (min-width: 900px) {
  .dispo-main { grid-template-columns: minmax(0, 1.6fr) minmax(340px, 1fr); }
  .dispo-funk { position: sticky; top: 84px; } /* Sprechtaste bleibt bei langer Flotte sichtbar (unter der Kopfzeile) */
  .dispo-karte { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .dispo-main { padding: 12px 12px 20px; }
  .dispo-status { order: 3; flex-basis: 100%; text-align: left; }
}