:root {
  --primary: #0f4c81;
  --accent: #e8a33d;
  --bg: #f4f6f9;
  --card-bg: #ffffff;
  --text: #1c2733;
  --muted: #6b7885;
  --border: #e1e6ec;
  --danger: #c0392b;
  --success: #1e8449;
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", "Segoe UI", Roboto, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 250px;
  background: var(--sidebar-bg, #ffffff);
  color: var(--sidebar-text, #4b5563);
  padding: 18px 0;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  transition: width .18s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sidebar.collapsed { width: 64px; }
.sidebar.collapsed .nav-label { display: none; }
.sidebar.collapsed nav a, .sidebar.collapsed .sidebar-nav-btn-link { justify-content: center; }
.sidebar.collapsed .brand { justify-content: center; }
.sidebar.collapsed .sidebar-caret { display: none; }
.sidebar-top { display: flex; align-items: center; gap: 10px; padding: 0 18px 18px; }
.sidebar-toggle {
  background: var(--bg); border: 1px solid var(--border); color: var(--text); width: 32px; height: 32px;
  border-radius: 8px; cursor: pointer; font-size: 1rem; flex-shrink: 0;
}
.sidebar-toggle:hover { background: var(--border); }
.brand { font-size: 1.15rem; font-weight: 700; letter-spacing: .3px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; color: var(--text); text-decoration:none; }
.brand-logo { max-height: 30px; max-width: 140px; }
.sidebar nav { flex: 1; padding: 0 10px; }
.sidebar nav a, .sidebar-nav-btn-link {
  display: flex; align-items: center; gap: 12px;
  color: var(--sidebar-text, #4b5563);
  padding: 9px 12px;
  margin-bottom: 2px;
  border-radius: 8px;
  border-left: 3px solid transparent;
  white-space: nowrap;
  font-size: .92rem;
}
.sidebar nav a svg, .sidebar-nav-btn-link svg { flex-shrink: 0; }
.sidebar nav a:hover, .sidebar nav a.active, .sidebar-nav-btn-link:hover, .sidebar-nav-btn-link.active {
  background: color-mix(in srgb, var(--primary) 10%, white);
  border-left-color: var(--primary);
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}
.sidebar-nav-pair { display: flex; align-items: center; gap: 2px; }
.sidebar-nav-pair .sidebar-nav-btn-link { flex: 1; }
.sidebar-caret {
  background: none; border: none; color: var(--sidebar-text, #9aa3af); cursor: pointer;
  padding: 6px 8px; font-size: .8rem; border-radius: 6px; flex-shrink: 0;
}
.sidebar-caret:hover { background: var(--bg); }
.sidebar-divider { border-top: 1px solid var(--border); margin: 10px 16px; }
.sidebar-section-label { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9aa3af; padding: 10px 22px 4px; }
.menu-section-row th { padding:12px 10px 7px; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); background:color-mix(in srgb,var(--card-bg) 88%,var(--primary) 12%); border-top:1px solid var(--border); text-align:left; }
.sidebar .user-box { padding: 16px 22px; font-size: .82rem; color: var(--sidebar-text, #6b7280); border-top: 1px solid var(--border); }
.sidebar .user-box a { color: var(--primary); }

.main { flex: 1; padding: 24px 32px; max-width: 1200px; }
.main h1 { margin-top: 0; }

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(16,24,40,.04), 0 1px 2px rgba(16,24,40,.03);
}

table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--border); font-size: .92rem; }
th { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; }
tr:hover td { background: #fafbfd; }

label { display: block; margin-bottom: 12px; font-size: .88rem; color: var(--muted); }
input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .95rem;
  margin-top: 4px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
}
textarea { min-height: 80px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

.btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: .95rem;
  cursor: pointer;
  transition: transform .05s ease, opacity .1s ease;
}
.btn:hover { opacity: .92; text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn.secondary { background: #fff; color: var(--primary); border: 1px solid var(--primary); }
.btn.danger { background: var(--danger); }
.btn.small { padding: 6px 12px; font-size: .82rem; }

.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 200px; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.badge.geplant { background: #fdf1d8; color: #9a6b0b; }
.badge.bestellt { background: #dbe9fb; color: var(--primary); }
.badge.archiviert { background: #e6e9ec; color: var(--muted); }
.badge.abgerechnet { background: #dcf1e2; color: var(--success); }

.hinweis { background: #fff8e6; border: 1px solid #f1d78c; padding: 10px 14px; border-radius: 8px; font-size: .88rem; margin-top: 8px; }
.error-box { background: #fdeceb; border: 1px solid #f2b8b2; color: var(--danger); padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.ok-box { background: #e9f7ee; border: 1px solid #a9dcbb; color: var(--success); padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }

.checklist { list-style: none; padding: 0; }
.checklist li.ok { color: var(--success); }
.checklist li.fail { color: var(--danger); }

.install-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--primary); }
.install-card { background: #fff; padding: 32px 40px; border-radius: var(--radius); width: 480px; max-width: 92vw; }

.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color:#0b3048; background-image:url('/assets/img/login-background.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat; }
.login-card { background: #fff; padding: 36px 40px; border-radius: var(--radius); width: 360px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.login-card h1 { text-align: center; margin-top: 0; font-size: 1.4rem; }

.tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tabs a { padding: 8px 14px; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs a.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

.locked-row td { opacity: .6; }
.tag-check { display: flex; align-items: center; gap: 6px; }
.tag-check input { width: auto; margin: 0; }

.muted, .muted-inline { color: var(--muted); font-size: .82rem; font-weight: normal; }
.muted-inline { margin-left: 4px; }

/* Platzhalter-Chips (Mailtext) */
.placeholder-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 14px; }
.chip {
  display: inline-block;
  background: #eef2f7;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: .76rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Icon-Toggle-Buttons (Dienststelle/Heimat) */
.icon-toggle-row { align-items: flex-start; }
.icon-toggle-input { display: none; }
.icon-toggle-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; margin: 4px 8px 0 0;
  border: 1px solid var(--border); border-radius: 20px;
  background: #fff; color: var(--muted); font-size: .85rem; cursor: pointer;
  width: auto;
}
.icon-toggle-input:checked + .icon-toggle-btn {
  border-color: var(--primary); background: #eaf1f8; color: var(--primary); font-weight: 600;
}

/* Von/Bis-Felder mit direkt zugeordneten Dienststelle/Heimat-Buttons */
.von-bis-feld { flex: 1 1 240px; min-width: 180px; }
.von-bis-feld label { margin-bottom: 4px; }
.inline-toggles { display: flex; gap: 6px; }
.inline-toggles .icon-toggle-btn { padding: 6px 10px; margin: 0; }

/* Startseiten-Widgets */
.widget-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.widget-wide { grid-column: 1 / -1; }
.widget h3 { margin-top: 0; }
.shortcut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; }
.shortcut-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 8px; color: var(--text); text-decoration: none; text-align: center; font-size: .82rem;
  transition: transform .1s ease, box-shadow .1s ease;
}
.shortcut-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); text-decoration: none; }
.shortcut-tile svg { color: var(--primary); }
.shortcut-tile.shortcut-highlight { background: #fdf0c8; border-color: #e0b23e; }
.shortcut-tile.shortcut-highlight svg { color: #8a6100; }
.shortcut-tile.shortcut-highlight-blau { background: #dce9fa; border-color: #7fa8dd; }
.shortcut-tile.shortcut-highlight-blau svg { color: #0b4a8a; }
.link-widget {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none; color: var(--text); min-height: 110px; text-align: center;
}
.link-widget svg { color: var(--accent); }
.link-widget:hover { text-decoration: none; box-shadow: 0 6px 16px rgba(0,0,0,.08); }

/* Tortendiagramm (reines CSS, ohne externe Bibliothek) */
.pie-chart { width: 200px; height: 200px; border-radius: 50%; margin: 0 auto 16px; }
.pie-legend { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; }
.pie-legend-item { display: flex; align-items: center; gap: 8px; }
.pie-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* Budget-Balken */
.budget-bar { background: var(--border); border-radius: 6px; height: 10px; overflow: hidden; margin-top: 4px; }
.budget-bar-fill { height: 100%; border-radius: 6px; }

/* Overlay ("Neue Bestellung" schwebend über der Liste) */
.overlay {
  display: none;
  position: fixed; inset: 0; background: rgba(15,23,33,.55);
  z-index: 100; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto;
}
.overlay.open { display: flex; }
.overlay-panel {
  background: var(--bg); border-radius: var(--radius); padding: 18px;
  width: 620px; max-width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.overlay-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }

/* E-Mail-Log Status */
.badge.versendet { background: #dcf1e2; color: var(--success); }
.badge.fehler { background: #fdeceb; color: var(--danger); }

/* Sidebar: Stammdaten-Untermenü */
.sidebar-nav-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: none; color: var(--sidebar-text, #4b5563); padding: 9px 12px;
  border-radius: 8px; border-left: 3px solid transparent; cursor: pointer; font-size: .92rem; white-space: nowrap;
}
.sidebar-nav-btn:hover, .sidebar-nav-btn.active { background: color-mix(in srgb, var(--primary) 10%, white); border-left-color: var(--primary); color: var(--primary); font-weight: 600; }
.sidebar-submenu { padding-left: 14px; }
.sidebar-submenu a { display: block; padding: 6px 12px; color: var(--sidebar-text, #6b7280); font-size: .85rem; border-radius: 6px; }
.sidebar-submenu a:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, white); text-decoration: none; }

/* Topbar-Layout (Alternative zur Seitenleiste) */
.topbar { background: var(--sidebar-bg, #ffffff); color: var(--sidebar-text, #4b5563); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 60; }
.topbar-inner { display: flex; align-items: center; gap: 18px; padding: 12px 28px; }
.topbar .brand { font-weight: 700; font-size: 1.15rem; flex-shrink: 0; color: var(--text); }
.topbar .brand-logo { max-height: 30px; }
.topbar-nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; align-items: center; }
.topbar-nav a, .topbar-nav-btn {
  display: flex; align-items: center; gap: 6px;
  color: var(--sidebar-text, #4b5563); padding: 8px 12px; border-radius: 8px;
  background: none; border: none; font-size: .85rem; cursor: pointer;
}
.topbar-nav a:hover, .topbar-nav a.active, .topbar-nav-btn:hover, .topbar-nav-btn.active {
  background: color-mix(in srgb, var(--primary) 10%, white); color: var(--primary); text-decoration: none; font-weight: 600;
}
.topbar-nav-pair { display: flex; align-items: center; border-radius: 8px; }
.topbar-nav-pair.active { background: color-mix(in srgb, var(--primary) 10%, white); }
.topbar-nav-pair .topbar-nav-btn { padding-right: 4px; }
.topbar-caret { padding: 8px 8px !important; font-size: .7rem !important; color: #9aa3af !important; }
.topbar-caret:hover { color: var(--primary) !important; }
.topbar-user { font-size: .82rem; color: var(--sidebar-text, #6b7280); white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.topbar-user a { color: var(--primary); text-decoration: underline; }
.topbar-submenu { display: flex; gap: 6px; flex-wrap: wrap; background: var(--bg); border-bottom: 1px solid var(--border); padding: 8px 28px; }
.topbar-submenu a { color: var(--sidebar-text, #4b5563); font-size: .85rem; padding: 5px 10px; border-radius: 6px; }
.topbar-submenu a:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, white); text-decoration: none; }
.main-topbar { max-width: 1200px; margin: 0 auto; padding: 24px 32px; }

/* Zweite Menüebene (Gruppen innerhalb Einstellungen) */
.topbar-group-btn {
  background: none; border: none; color: var(--sidebar-text, #6b7280); padding: 6px 10px;
  font-size: .82rem; cursor: pointer; border-radius: 6px;
}
.topbar-group-btn:hover, .topbar-group-btn.active { background: color-mix(in srgb, var(--primary) 8%, white); color: var(--primary); }
.topbar-subsubmenu { background: var(--card-bg); }
.sidebar-group-btn {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--sidebar-text, #9aa3af); padding: 6px 12px; cursor: pointer; font-size: .82rem; border-radius: 6px;
}
.sidebar-group-btn:hover, .sidebar-group-btn.active { color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, white); }
.sidebar-subsubmenu { padding-left: 10px; }
.sidebar-subsubmenu a { font-size: .8rem; }
.nav-highlight { color: #8a6100 !important; font-weight: 700; }
.nav-highlight-blau { color: #0b4a8a !important; font-weight: 700; }

/* Bestellformular: einspaltig vs. zweispaltig */
#bestellform.form-1col .row > * { flex-basis: 100%; }
#bestellform.form-2col .row > * { flex-basis: 45%; }

/* Bestellformular kompakter (ca. 80% der ursprünglichen Größe) */
#bestellform { padding: 16px; font-size: .88rem; }
#bestellform label { margin-bottom: 8px; font-size: .8rem; }
#bestellform input, #bestellform select, #bestellform textarea { padding: 7px 9px; font-size: .85rem; margin-top: 3px; }
#bestellform textarea { min-height: 56px; }
#bestellform .row { gap: 10px; }
#bestellform h3 { font-size: .95rem; margin: 10px 0 6px; }
#bestellform .icon-toggle-btn { padding: 5px 10px; font-size: .78rem; }
#bestellform .btn { padding: 8px 16px; font-size: .85rem; }

/* Rich-Text-Editor (Mailtext) */
.richtext-toolbar { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.richtext-toolbar button {
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 10px; cursor: pointer; font-size: .85rem;
}
.richtext-toolbar button:hover { background: #f2f5f8; }
.richtext-toolbar select { width: auto; margin: 0; padding: 5px 8px; }
.richtext-editor {
  border: 1px solid var(--border); border-radius: 8px; padding: 12px;
  min-height: 160px; background: #fff; margin-top: 6px; font-size: .95rem;
}
.richtext-editor:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

.pflicht-stern { color: var(--danger); font-weight: 700; }
.pflicht-stern-v { color: var(--primary); font-weight: 700; }

/* Sortierbare Spaltenüberschriften */
.sort-link { color: var(--muted); text-decoration: none; }
.sort-link:hover { color: var(--primary); text-decoration: none; }
th:has(.sort-link) { cursor: pointer; }

/* Kleiner Icon-Button (z.B. E-Mail erneut senden) */
.icon-btn {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 6px; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center;
}
.icon-btn:hover { color: var(--primary); border-color: var(--primary); }
.icon-btn.danger-icon { color: var(--danger); font-weight: 700; }
.icon-btn.danger-icon:hover { border-color: var(--danger); }
.icon-btn.send-icon { color: var(--primary); }
.icon-btn.send-icon:hover { background: var(--primary); color: #fff; }
.btn.abbestellen-btn { background: #fff; color: var(--muted); border: 1px solid var(--border); font-weight: 600; }
.btn.abbestellen-btn:hover { color: var(--danger); border-color: var(--danger); }
.btn.abbestellen-btn.dringend { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn.abbestellen-btn.dringend:hover { opacity: .88; }

/* ============================================================
   Responsive – Tablet und Smartphone
   ============================================================ */

/* Tabellen auf kleinen Bildschirmen horizontal scrollbar machen, damit sie
   das Layout nicht sprengen (Karten sind die Scroll-Container). */
@media (max-width: 900px) {
  .card { overflow-x: auto; }
  table { min-width: 560px; }
}

/* --- Tablet --- */
@media (max-width: 900px) {
  .main, .main-topbar { padding: 18px 16px; }

  /* Seitenleiste wird zur oberen Leiste, damit der Inhalt die volle Breite bekommt */
  .app-shell { flex-direction: column; }
  .sidebar {
    width: 100% !important;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 10px 0;
  }
  .sidebar.collapsed { width: 100% !important; }
  .sidebar.collapsed .nav-label { display: inline; }
  .sidebar nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px; }
  .sidebar nav a, .sidebar-nav-btn-link { border-left: none; border-radius: 8px; padding: 8px 10px; }
  .sidebar-nav-pair { flex: 0 0 auto; }
  .sidebar-submenu { padding-left: 8px; width: 100%; }
  .sidebar .user-box { padding: 12px 16px; }
  .sidebar-divider, .sidebar-section-label { display: none; }

  /* Topbar-Modus: Menüpunkte umbrechen lassen */
  .topbar-inner { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  .topbar-nav { gap: 2px; }
  .topbar-nav a, .topbar-nav-btn { padding: 7px 9px; font-size: .82rem; }
  .topbar-submenu { padding: 8px 16px; }
  .topbar-user { align-items: flex-start; }

  /* Formularzeilen brechen früher um */
  .row > * { min-width: 160px; }
  .widget-grid { grid-template-columns: 1fr; }
  .overlay { padding: 16px 10px; }
  .overlay-panel { width: 100%; padding: 16px; }
}

/* --- Smartphone --- */
@media (max-width: 600px) {
  body { font-size: .95rem; }
  h1 { font-size: 1.45rem; }
  h2 { font-size: 1.2rem; }
  .main, .main-topbar { padding: 14px 10px; }
  .card { padding: 14px; border-radius: 10px; }

  /* Alle Formularzeilen einspaltig */
  .row { gap: 10px; }
  .row > * { flex: 1 1 100%; min-width: 0; }
  #bestellform.form-2col .row > * { flex-basis: 100%; }

  /* Eingabefelder mit 16px Schriftgröße, damit iOS beim Fokus nicht heranzoomt */
  input, select, textarea { font-size: 16px; }

  /* Buttons: volle Breite und größere Tap-Fläche */
  .btn { padding: 11px 16px; }
  .btn.small { padding: 8px 12px; }
  form .btn, .card > .btn { width: auto; }

  /* Von/Bis: Eingabefeld und Arbeit/Haus-Buttons dürfen umbrechen */
  .von-bis-feld { min-width: 0; }
  .inline-toggles { flex-wrap: wrap; }

  /* Tabellen kompakter */
  th, td { padding: 7px 6px; font-size: .85rem; }
  table { min-width: 480px; }

  /* Startseiten-Kacheln zweispaltig statt gequetscht */
  .shortcut-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }

  /* Tabs (Stammdaten etc.) horizontal scrollbar statt umbrechend */
  .tabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .tabs a { display: inline-block; float: none; }

  /* Menü-Untermenüs auf voller Breite */
  .topbar-submenu { flex-direction: column; gap: 2px; }
  .topbar-submenu a { padding: 8px 10px; }

  .overlay { padding: 8px 6px; }
  .overlay-panel { padding: 12px; border-radius: 10px; }
  .overlay-head h2 { font-size: 1.1rem; }
}

/* Von/Bis-Zeile im Bestellformular: auf sehr schmalen Bildschirmen darf die
   Zeile umbrechen (Eingabefeld über den Arbeit/Haus-Buttons), sonst läuft
   das Formular seitlich aus dem Bildschirm. Die Inline-Styles im Formular
   erzwingen sonst "nowrap" auf jeder Breite. */
@media (max-width: 480px) {
  #bestellform div[style*="flex-wrap:nowrap"] { flex-wrap: wrap !important; }
  #bestellform .inline-toggles[style*="white-space:nowrap"] { white-space: normal !important; }
}


/* v30 – modernisierte Oberfläche */
.sidebar .user-box { padding: 14px 14px 16px; background: color-mix(in srgb, var(--sidebar-bg) 92%, var(--primary) 8%); }
.user-box-meta { display:flex; flex-direction:column; gap:2px; padding:0 4px 10px; color:var(--sidebar-text); line-height:1.35; }
.user-box-kicker { font-size:.72rem; opacity:.72; text-transform:uppercase; letter-spacing:.05em; }
.user-box-actions { display:grid; gap:7px; }
.sidebar .user-box .user-box-btn { display:flex; align-items:center; justify-content:center; min-height:36px; padding:8px 10px; border:1px solid color-mix(in srgb, var(--primary) 22%, #d7dde5); border-radius:9px; background:var(--card-bg,#fff); color:var(--primary) !important; text-decoration:none !important; font-weight:650; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.sidebar .user-box .user-box-btn:hover { background:color-mix(in srgb,var(--primary) 8%,#fff); transform:translateY(-1px); }
.sidebar .user-box .user-box-btn-danger { color:#a61b1b !important; border-color:#efcaca; background:#fff8f8; }

.settings-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:18px; }
.settings-head h1 { margin:0; }
.settings-breadcrumb { font-size:.9rem; color:var(--muted,#6b7280); margin-top:4px; }
.settings-section-title { display:flex; align-items:center; gap:10px; margin:4px 0 16px; }
.settings-section-title:after { content:""; height:1px; flex:1; background:var(--border); }
body .card { border:1px solid color-mix(in srgb,var(--border) 88%,transparent); box-shadow:0 6px 18px rgba(15,23,42,.045); border-radius:14px; }
body .card h3 { margin-top:0; letter-spacing:-.01em; }
body input, body select, body textarea { border-radius:9px; }
body input:focus, body select:focus, body textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 13%,transparent); }
.settings-grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.settings-grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.settings-card-intro { color:var(--muted,#64748b); margin-top:-4px; margin-bottom:16px; }
.hinweis { background:#f8fafc; border-color:#dbe3ec; color:#52606d; }
.richtext-toolbar { display:flex; flex-wrap:wrap; gap:6px; padding:8px; border:1px solid var(--border); border-bottom:0; border-radius:10px 10px 0 0; background:#f8fafc; }
.richtext-toolbar button, .richtext-toolbar select { width:auto; margin:0; min-height:34px; padding:6px 9px; }
.richtext-editor { min-height:180px; padding:14px; border:1px solid var(--border); border-radius:0 0 10px 10px; background:#fff; }
.richtext-editor:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent); }
.news-item { border:1px solid var(--border); border-radius:12px; padding:14px 16px; background:#fff; }
.news-item + .news-item { margin-top:10px; }
.news-meta { color:#64748b; font-size:.8rem; margin-bottom:5px; }
.news-title { font-weight:750; font-size:1rem; margin-bottom:5px; }
@media(max-width:900px){ .settings-grid-2,.settings-grid-3{grid-template-columns:1fr;} }


/* ============================================================
   DispoGrid v31 – ruhigeres Branding, feste Sidebar & Darkmode
   ============================================================ */
:root {
  --primary: #1469a8;
  --accent: #31a8a0;
  --bg: #f7f9fc;
  --card-bg: #ffffff;
  --text: #172235;
  --muted: #697789;
  --border: #e3e8ef;
  --sidebar-bg: #fbfcfe;
  --sidebar-text: #526173;
  --surface-soft: #f1f5f9;
  --shadow-soft: 0 8px 24px rgba(24,39,75,.055);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --primary: #65b7eb;
  --accent: #62c9c1;
  --bg: var(--bg);
  --card-bg: var(--card-bg);
  --text: #edf4fb;
  --muted: #9eb0c3;
  --border: var(--border-strong);
  --sidebar-bg: #111b27;
  --sidebar-text: #c4d0dc;
  --surface-soft: var(--surface-soft);
  --danger: #ff7d7d;
  --success: #69d391;
}

html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] body .card,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .overlay-panel { background: var(--card-bg); border-color: var(--border); box-shadow: none; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background: var(--field-bg); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .btn.secondary { background: var(--surface-soft); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .sidebar nav a:hover,
html[data-theme="dark"] .sidebar nav a.active,
html[data-theme="dark"] .sidebar-nav-btn-link:hover,
html[data-theme="dark"] .sidebar-nav-btn-link.active,
html[data-theme="dark"] .sidebar-nav-btn:hover,
html[data-theme="dark"] .sidebar-nav-btn.active,
html[data-theme="dark"] .sidebar-group-btn:hover,
html[data-theme="dark"] .sidebar-group-btn.active { background: color-mix(in srgb, var(--primary) 14%, var(--sidebar-bg)); color: var(--primary); }
html[data-theme="dark"] .sidebar .user-box { background: color-mix(in srgb, var(--sidebar-bg) 92%, var(--primary) 8%); }
html[data-theme="dark"] .sidebar .user-box .user-box-btn { background: var(--field-bg); color: var(--text) !important; border-color: var(--border); }
html[data-theme="dark"] .sidebar .user-box .user-box-btn:hover { background: var(--surface-hover); }
html[data-theme="dark"] .sidebar .user-box .user-box-btn-danger { color: #ff8c8c !important; background: #291d22; border-color: #60313b; }
html[data-theme="dark"] .shortcut-tile { background: var(--surface-soft); }
html[data-theme="dark"] .hinweis { background: #18293b; border-color: #294661; color: #c6d7e8; }

/* Desktop: die Navigation bleibt stehen, nur der Inhaltsbereich scrollt. */
@media (min-width: 901px) {
  body.layout-sidebar { overflow: hidden; }
  .layout-sidebar .app-shell { height: 100vh; min-height: 0; overflow: hidden; }
  .layout-sidebar .sidebar { height: 100vh; min-height: 0; position: sticky; top: 0; overflow: hidden; }
  .layout-sidebar .sidebar nav { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .layout-sidebar .sidebar .user-box { flex: 0 0 auto; }
  .layout-sidebar .main { height: 100vh; overflow-y: auto; overscroll-behavior: contain; max-width: none; width: 100%; }
}

.brand { gap: 8px; }
.brand-logo-full { width: 170px; max-width: 100%; max-height: 58px; object-fit: contain; object-position: left center; }
.brand-logo-icon { display: none; width: 34px; height: 34px; object-fit: contain; }
.sidebar.collapsed .brand-logo-full { display: none; }
.sidebar.collapsed .brand-logo-icon { display: block; }
.sidebar-top { min-height: 68px; }
.topbar .brand-logo-full { width: 155px; max-height: 48px; }
.brand-app-name { font-size: .82rem; color: var(--muted); font-weight: 650; }

.theme-toggle { cursor: pointer; font: inherit; }
.sidebar .user-box .theme-toggle { width: 100%; }
.theme-toggle-icon { margin-right: 7px; }
.theme-toggle-top { border: 1px solid var(--border); background: var(--surface-soft); color: var(--text); border-radius: 8px; padding: 5px 8px; }

/* Weniger bunte Flächen: Farbe dient überwiegend zur Orientierung, nicht als Dekoration. */
body .card { box-shadow: var(--shadow-soft); }
.settings-card, .setting-tile, .shortcut-tile { transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.setting-tile:hover, .shortcut-tile:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); box-shadow: 0 8px 22px rgba(24,39,75,.07); }

.design-brand-preview { display:flex; align-items:center; gap:18px; padding:16px 18px; background:var(--surface-soft); border:1px solid var(--border); border-radius:12px; margin-bottom:18px; }
.design-brand-preview img { width:180px; max-width:42%; height:auto; }
.design-brand-preview div { display:flex; flex-direction:column; gap:4px; }
.design-brand-preview strong { font-size:1.05rem; }
.design-brand-preview span { color:var(--muted); font-size:.88rem; }
.app-name-input { display:flex; align-items:stretch; max-width:420px; }
.app-name-input input { border-radius:9px 0 0 9px; margin:0; }
.app-name-input span { display:flex; align-items:center; padding:0 12px; border:1px solid var(--border); border-left:0; border-radius:0 9px 9px 0; background:var(--surface-soft); color:var(--text); font-weight:700; }
.login-brand { display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:18px; }
.login-brand img { width:220px; max-width:80%; height:auto; }
.login-brand strong { color:var(--text); font-size:1.15rem; }

@media (max-width: 900px) {
  body.layout-sidebar { overflow: auto; }
  .brand-logo-full { width: 150px; }
  .brand-logo-icon { display:none !important; }
}


/* ============================================================
   DispoGrid v32 – Einstellungsübersicht & Darkmode-Kontrast
   ============================================================ */

/* Die Einstellungsübersicht orientiert sich an der kompakten Schnellzugriff-Logik:
   klare Piktogramme, kurze Beschreibungen und große klickbare Flächen. */
.settings-title-wrap { display:flex; align-items:center; gap:14px; }
.settings-title-icon {
  width:54px; height:54px; display:grid; place-items:center; flex:0 0 54px;
  border-radius:14px; background:#e7f2ff; color:#126ec0;
}
.settings-current-path {
  display:inline-flex; align-items:center; gap:7px; margin:-7px 0 16px;
  padding:6px 10px; border:1px solid var(--border); border-radius:999px;
  background:var(--surface-soft); color:var(--muted); font-size:.8rem;
}
.settings-overview { display:grid; gap:16px; padding-bottom:24px; }
.settings-overview-section {
  background:var(--card-bg); border:1px solid var(--border); border-radius:15px;
  padding:18px 20px 20px; box-shadow:var(--shadow-soft);
}
.settings-overview-section-head { display:flex; align-items:center; gap:12px; margin-bottom:15px; }
.settings-overview-section-head h2 { margin:0 0 3px; font-size:1.08rem; letter-spacing:-.015em; }
.settings-overview-section-head p { margin:0; color:var(--muted); font-size:.86rem; }
.settings-section-picto { width:38px; height:38px; display:grid; place-items:center; flex:0 0 38px; color:var(--primary); }
.settings-tile-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.setting-tile {
  min-height:94px; display:grid; grid-template-columns:50px minmax(0,1fr) 20px;
  align-items:center; gap:12px; padding:13px 14px; border:1px solid var(--border);
  border-radius:12px; background:var(--card-bg); color:var(--text); text-decoration:none !important;
  box-shadow:0 1px 2px rgba(15,23,42,.025);
}
.setting-tile:hover {
  transform:translateY(-1px); border-color:color-mix(in srgb,var(--primary) 36%,var(--border));
  box-shadow:0 8px 20px rgba(15,23,42,.07); color:var(--text);
}
.setting-tile-icon {
  width:50px; height:50px; border-radius:12px; display:grid; place-items:center;
  background:var(--surface-soft); color:var(--primary);
}
.setting-tile-copy { min-width:0; display:flex; flex-direction:column; gap:4px; }
.setting-tile-copy strong { font-size:.9rem; line-height:1.2; color:var(--text); }
.setting-tile-copy small { color:var(--muted); font-size:.78rem; line-height:1.35; }
.setting-tile-arrow { color:#76879a; font-size:1.7rem; line-height:1; text-align:right; }
.tone-blue { background:#e5f1ff; color:#0f6fc5; }
.tone-purple { background:#f0eaff; color:#6840ce; }
.tone-green { background:#e1f7ef; color:#159466; }
.tone-orange { background:#fff0df; color:#cf6500; }
.tone-red { background:#ffe7e7; color:#d73535; }
.tone-cyan { background:#e3f7fb; color:#1686a4; }
.tone-slate { background:#e9eff6; color:#47627e; }

/* Dunkle Sidebar wie im gewünschten Entwurf; Inhalt bleibt im Hellmodus sehr hell. */
@media (min-width:901px) {
  .layout-sidebar .sidebar { box-shadow:8px 0 26px rgba(15,23,42,.06); }
}

/* Darkmode: Inhaltsfläche bewusst etwas heller als die feste, dunkle Sidebar. */
html[data-theme="dark"] {
  --bg:var(--bg);
  --card-bg:var(--card-bg);
  --text:#f2f6fb;
  --muted:#b5c2d0;
  --border:var(--border-strong);
  --sidebar-bg:#0d1824;
  --sidebar-text:#d5e0ea;
  --surface-soft:var(--surface-soft);
}
html[data-theme="dark"] .main { background:var(--bg); }
html[data-theme="dark"] .sidebar { background:#0d1824; border-right-color:var(--surface-soft); }
html[data-theme="dark"] .settings-overview-section,
html[data-theme="dark"] .setting-tile { background:var(--card-bg); }
html[data-theme="dark"] .setting-tile:hover { background:var(--surface-soft); border-color:var(--border-strong); box-shadow:none; }
html[data-theme="dark"] .settings-title-icon { background:#233b52; color:#70c2ff; }
html[data-theme="dark"] .setting-tile-arrow { color:#91a6b9; }
html[data-theme="dark"] .tone-blue { background:#233e58; color:#79c8ff; }
html[data-theme="dark"] .tone-purple { background:#382f55; color:#c5a8ff; }
html[data-theme="dark"] .tone-green { background:#203f39; color:#78ddb7; }
html[data-theme="dark"] .tone-orange { background:#483822; color:#ffd078; }
html[data-theme="dark"] .tone-red { background:#4a2b31; color:#ff919b; }
html[data-theme="dark"] .tone-cyan { background:#213e48; color:#79d7ea; }
html[data-theme="dark"] .tone-slate { background:#2b3949; color:#b9ccdf; }

/* Tabellen: niemals mehr weiße Hover-Zeilen im Darkmode. */
html[data-theme="dark"] tr:hover td { background:var(--surface-hover); color:var(--text); }
html[data-theme="dark"] tr:hover td a { color:#83cfff; }
html[data-theme="dark"] th { color:#c4d0dc; }
html[data-theme="dark"] td { border-bottom-color:var(--border-strong); }

/* Schnellzugriff: Taxi-Icon und Hervorhebung im Darkmode klar sichtbar. */
html[data-theme="dark"] .shortcut-tile svg { color:#72c9ff; }
html[data-theme="dark"] .shortcut-tile.shortcut-highlight {
  background:#3a3421; border-color:#9a7b25; color:#fff7d6;
}
html[data-theme="dark"] .shortcut-tile.shortcut-highlight svg { color:#ffd85b; }
html[data-theme="dark"] .shortcut-tile.shortcut-highlight-blau {
  background:#213a55; border-color:#3f6f9d; color:#e8f4ff;
}
html[data-theme="dark"] .shortcut-tile.shortcut-highlight-blau svg { color:#78c6ff; }

/* Weitere harte Weißwerte aus älteren Komponenten im Darkmode abfangen. */
html[data-theme="dark"] .richtext-toolbar { background:var(--surface-soft); border-color:var(--border); }
html[data-theme="dark"] .richtext-toolbar button,
html[data-theme="dark"] .richtext-editor,
html[data-theme="dark"] .news-item,
html[data-theme="dark"] .icon-toggle-btn { background:#1a2735; color:var(--text); border-color:var(--border); }
html[data-theme="dark"] .chip { background:#29394a; color:#c5d2df; border-color:var(--border); }
html[data-theme="dark"] .badge.archiviert { background:#344354; color:#d7e1eb; }

@media (max-width:1100px) { .settings-tile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) {
  .settings-tile-grid { grid-template-columns:1fr; }
  .settings-overview-section { padding:15px; }
  .setting-tile { min-height:84px; }
  .settings-title-icon { width:46px; height:46px; flex-basis:46px; }
}

/* ============================================================
   DispoGrid v33 – UI polish, editor, logs & darkmode
   ============================================================ */
.icon-action-btn {
  width:40px; height:40px; display:inline-grid; place-items:center; flex:0 0 40px;
  border:1px solid var(--border); border-radius:10px; background:var(--card-bg);
  color:var(--primary); text-decoration:none !important; vertical-align:middle;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.icon-action-btn:hover { background:var(--surface-soft); border-color:color-mix(in srgb,var(--primary) 40%,var(--border)); transform:translateY(-1px); }
.form-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:16px; }
.settings-section-title { justify-content:space-between; }
.settings-section-title > div > h3 { margin:0 0 3px; }
.settings-section-title > div > p { margin:0; color:var(--muted); font-size:.84rem; }
.settings-section-title:after { display:none; }
.editor-settings-card { overflow:visible; }
.editor-placeholders { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 12px; }
.editor-placeholders .chip { cursor:pointer; font:inherit; }
.rte-wrap { margin-top:8px; }
.richtext-toolbar { position:sticky; top:0; z-index:4; align-items:center; }
.richtext-toolbar button,.richtext-toolbar select { min-height:36px; border:1px solid var(--border); background:var(--card-bg); color:var(--text); border-radius:7px; }
.richtext-toolbar button:hover { border-color:var(--primary); background:var(--surface-soft); }
.rte-color { display:flex; align-items:center; gap:4px; width:auto; margin:0; padding:3px 7px; min-height:36px; border:1px solid var(--border); border-radius:7px; background:var(--card-bg); }
.rte-color input { width:28px; min-width:28px; height:25px; padding:0; border:0; box-shadow:none !important; }
.richtext-editor { line-height:1.55; overflow:auto; }
.richtext-editor h1,.richtext-editor h2,.richtext-editor h3 { margin:.65em 0 .35em; }
.rte-source { width:100%; min-height:240px; margin-top:6px; padding:14px; border:1px solid var(--border); border-radius:0 0 10px 10px; background:var(--card-bg); color:var(--text); font:13px/1.55 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; resize:vertical; tab-size:2; }
.rte-source:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent); }
.richtext-toolbar [data-rte-source-toggle][aria-pressed="true"] { background:var(--primary); border-color:var(--primary); color:#fff; }
.editor-paper {
  width:min(100%, 820px); min-height:760px; margin:0 auto; padding:54px 62px;
  background:#fff !important; color:#172235 !important; border:1px solid #d9e0e8 !important;
  box-shadow:0 12px 34px rgba(15,23,42,.12); border-radius:2px;
  font-family:Arial,Helvetica,sans-serif; line-height:1.45;
}
.editor-paper img { max-width:100%; height:auto; }
.compact-test-card { padding-top:15px; padding-bottom:15px; }
.budget-editor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.budget-item-card { border:1px solid var(--border); border-radius:12px; padding:14px; background:var(--surface-soft); }
.budget-item-card > strong { display:block; margin-bottom:10px; }
.budget-amounts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.audit-count,.log-category { display:inline-flex; align-items:center; min-height:26px; padding:4px 9px; border-radius:999px; background:var(--surface-soft); color:var(--muted); font-size:.76rem; font-weight:700; }
.log-filter-bar { display:grid; grid-template-columns:180px 220px minmax(230px,1fr) auto; gap:10px; align-items:end; margin-bottom:14px; }
.log-filter-actions { display:flex; gap:7px; align-items:center; }
.table-scroll { width:100%; overflow:auto; }
.audit-table { min-width:930px; }
.audit-table td { vertical-align:top; font-size:.82rem; }
.audit-table td:nth-child(1),.audit-table td:nth-child(2),.audit-table td:nth-child(3),.audit-table td:nth-child(6) { white-space:nowrap; }
.empty-state { color:var(--muted); text-align:center; padding:18px !important; }

/* Darkmode: Sidebar etwas heller als bisher, Inhaltsfläche noch einen Tick heller. */
html[data-theme="dark"] {
  --bg:var(--bg);
  --card-bg:var(--card-bg);
  --text:#f3f7fb;
  --muted:#bdcad7;
  --border:var(--border-strong);
  --sidebar-bg:#1a2a3b;
  --sidebar-text:#e0e8f0;
  --surface-soft:var(--surface-soft);
  --primary:#7dcbff;
  --accent:#72d9d0;
}
html[data-theme="dark"] .main { background:var(--bg); }
html[data-theme="dark"] .sidebar { background:#1a2a3b; border-right-color:var(--border-strong); }
html[data-theme="dark"] .settings-overview-section,
html[data-theme="dark"] .setting-tile,
html[data-theme="dark"] body .card { background:var(--card-bg); border-color:var(--border-strong); }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background:var(--field-bg); border-color:var(--border-strong); color:#f4f8fc; }
html[data-theme="dark"] tr:hover td { background:var(--surface-hover) !important; color:#fff !important; }
html[data-theme="dark"] tr:hover td a { color:#9dd8ff !important; }
html[data-theme="dark"] .btn:not(.secondary):not(.danger):not(.ghost):not(.abbestellen-btn) { background:#7dcbff; border-color:#7dcbff; color:#07131f !important; }
html[data-theme="dark"] .btn:not(.secondary):not(.danger):not(.ghost):not(.abbestellen-btn) svg { color:#07131f !important; }
html[data-theme="dark"] .btn:not(.secondary):not(.danger):not(.ghost):not(.abbestellen-btn):hover { background:#9edaff; border-color:#9edaff; }
html[data-theme="dark"] .btn.secondary { background:#d8e5ef; border-color:#d8e5ef; color:#102132 !important; }
html[data-theme="dark"] .btn.secondary svg { color:#102132 !important; }
html[data-theme="dark"] .btn.secondary:hover { background:#eef5fa; border-color:#eef5fa; }
html[data-theme="dark"] .icon-action-btn { background:#d8e5ef; border-color:#d8e5ef; color:#102132 !important; }
html[data-theme="dark"] .icon-action-btn svg { color:#102132 !important; }
html[data-theme="dark"] .icon-action-btn:hover { background:#f0f6fa; }
html[data-theme="dark"] .shortcut-tile svg { color:#a8ddff; }
html[data-theme="dark"] .shortcut-tile.shortcut-highlight svg { color:#ffe17a; filter:brightness(1.15); }
html[data-theme="dark"] .richtext-toolbar { background:var(--field-bg); border-color:var(--border-strong); }
html[data-theme="dark"] .richtext-toolbar button,
html[data-theme="dark"] .richtext-toolbar select,
html[data-theme="dark"] .rte-color { background:#dfeaf2; border-color:#dfeaf2; color:#102132; }
html[data-theme="dark"] .richtext-editor:not(.editor-paper) { background:var(--field-bg); color:#f4f8fc; border-color:var(--border-strong); }
html[data-theme="dark"] .budget-item-card { background:var(--surface-soft); }
html[data-theme="dark"] .log-category,html[data-theme="dark"] .audit-count { background:var(--surface-hover); color:#e8f1f8; }

@media(max-width:1000px){ .log-filter-bar{grid-template-columns:repeat(2,minmax(0,1fr));}.budget-editor-grid{grid-template-columns:1fr;} }
@media(max-width:700px){ .log-filter-bar,.budget-amounts{grid-template-columns:1fr;}.editor-paper{padding:28px 24px;min-height:600px;} }

/* Statistik v33 */
.statistik-page { padding-bottom:28px; }
.stats-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; }
.stats-head-title { display:flex; align-items:center; gap:14px; }
.stats-head h1 { margin:0 0 3px; }
.stats-head p { margin:0; color:var(--muted); font-size:.9rem; }
.stats-filter-card { padding:14px 16px; }
.stats-filter-grid { display:grid; grid-template-columns:220px 220px auto; gap:12px; align-items:end; }
.stats-kpi-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:14px 0; }
.stats-kpi { display:flex; align-items:center; gap:13px; margin:0; min-height:102px; }
.stats-kpi-icon { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--surface-soft); color:var(--primary); flex:0 0 46px; }
.stats-kpi div { display:flex; flex-direction:column; gap:5px; }
.stats-kpi small { color:var(--muted); font-weight:650; }
.stats-kpi strong { font-size:1.45rem; letter-spacing:-.025em; }
.statistik-page > .row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
.statistik-page > .row > .card { min-width:0; width:100%; }
.statistik-page .card h3 { display:flex; align-items:center; justify-content:space-between; }
.statistik-page table { font-size:.88rem; }
.statistik-page .budget-bar { height:9px; border-radius:99px; overflow:hidden; background:var(--surface-soft); }
.statistik-page .budget-bar-fill { height:100%; border-radius:99px; }
@media(max-width:850px){ .stats-kpi-grid{grid-template-columns:1fr}.stats-filter-grid{grid-template-columns:1fr}.statistik-page>.row{grid-template-columns:1fr}.stats-head{align-items:flex-start;flex-direction:column} }

/* ============================================================
   DispoGrid v34 – kompakte obere Navigation
   ============================================================ */
body.layout-topbar .topbar-inner {
  min-height: 36px;
  padding: 3px 14px;
  gap: 8px;
}
body.layout-topbar .topbar .brand { font-size:.92rem; }
body.layout-topbar .topbar .brand-logo-full { width:108px; max-height:24px; }
body.layout-topbar .topbar-nav { gap:2px; }
body.layout-topbar .topbar-nav a,
body.layout-topbar .topbar-nav-btn { min-height:26px; padding:3px 7px; font-size:.78rem; border-radius:7px; }
body.layout-topbar .topbar-user {
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:.76rem;
  white-space:nowrap;
}
body.layout-topbar .topbar-user-name {
  max-width:170px;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:700;
  color:var(--text);
  padding:4px 7px;
}
body.layout-topbar .topbar-user .topbar-user-action {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:24px;
  padding:3px 6px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--surface-soft);
  color:var(--text);
  text-decoration:none;
  line-height:1;
}
body.layout-topbar .topbar-user .topbar-user-action:hover { border-color:var(--primary); color:var(--primary); }
body.layout-topbar .topbar-user .topbar-user-logout { color:#a61b1b; background:#fff7f7; border-color:#efcaca; }
body.layout-topbar .topbar-user .theme-toggle-icon { margin-right:0; }
html[data-theme="dark"] body.layout-topbar .topbar-user .topbar-user-action { background:#dfeaf2; color:#102132; border-color:#dfeaf2; }
html[data-theme="dark"] body.layout-topbar .topbar-user .topbar-user-action:hover { background:#f2f7fa; color:#0b3555; }
html[data-theme="dark"] body.layout-topbar .topbar-user .topbar-user-logout { background:#f5dede; color:#7d1111; border-color:#f5dede; }
@media(max-width:1150px){
  body.layout-topbar .topbar-inner{flex-wrap:wrap}
  body.layout-topbar .topbar-user{margin-left:auto}
}
@media(max-width:760px){
  body.layout-topbar .topbar-user{width:100%;justify-content:flex-start;overflow-x:auto;padding-bottom:2px}
  body.layout-topbar .topbar-user-name{max-width:130px}
}


/* ============================================================
   DispoGrid v35 – Mobile-Navigation, Branding & Feinschliff
   ============================================================ */
.mobile-topbar { display:none; }
body.mobile-nav-open { overflow:hidden; }
.brand-inline, .brand-mobile, .brand-sidebar { gap:12px; }
.brand-sidebar { align-items:center; }
.brand-text { display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong { font-size:1rem; color:#fff; }
.brand-text span { font-size:.74rem; color:var(--sidebar-text); }
.brand-app-name { font-weight:700; color:var(--text); }
.login-brand { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.login-brand img { max-width:220px; max-height:68px; width:auto; height:auto; }
.login-brand strong { display:block; font-size:1.1rem; color:var(--text); }
.sidebar { background: linear-gradient(180deg, color-mix(in srgb, var(--sidebar-bg) 88%, white) 0%, var(--sidebar-bg) 100%); }
.main { background: color-mix(in srgb, var(--bg) 90%, white); }
.overlay-panel { background: var(--card-bg); }

@media (min-width: 901px) {
  .sidebar { position:sticky; top:0; height:100vh; overflow-y:auto; }
  .main { max-height:100vh; overflow-y:auto; }
}

@media (max-width: 900px) {
  .mobile-topbar {
    display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:90;
    min-height:56px; padding:10px 14px; background:var(--sidebar-bg); color:var(--sidebar-text); border-bottom:1px solid var(--border);
  }
  .mobile-menu-btn {
    width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#fff; font-size:1.25rem;
  }
  .mobile-topbar .brand-app-name { color:#fff; }
  .app-shell { flex-direction:row; }
  .sidebar {
    position:fixed; top:56px; left:0; bottom:0; width:280px !important; max-width:86vw; transform:translateX(-102%); transition:transform .2s ease;
    z-index:95; border-right:1px solid var(--border); border-bottom:none; padding:12px 0;
  }
  .sidebar.mobile-open { transform:translateX(0); }
  .sidebar.collapsed { width:280px !important; }
  .sidebar.collapsed .nav-label { display:inline; }
  .sidebar nav { display:block; padding:0 10px; }
  .sidebar nav a, .sidebar-nav-btn-link { border-left:3px solid transparent; }
  .sidebar-divider, .sidebar-section-label { display:block; }
  .sidebar .user-box { display:block; }
  .main { max-width:none; width:100%; min-height:calc(100vh - 56px); }
}

@media (max-width: 600px) {
  .login-card { width:min(92vw, 420px); padding:28px 22px; }
  .login-brand { flex-direction:column; align-items:flex-start; }
  .login-brand img { max-width:190px; }
}

html[data-theme="dark"] .mobile-topbar { background:#203246; }
html[data-theme="dark"] .sidebar { background:linear-gradient(180deg, #24384b 0%, #1d2f41 100%); }
html[data-theme="dark"] .main { background:#2b3f53; }
html[data-theme="dark"] .brand-text strong { color:#f7fbff; }
html[data-theme="dark"] .brand-app-name { color:#fff; }


/* Topbar im Mobile-Mode als Hamburgermenü */
.topbar-mobile-toggle { display:none; }
@media (max-width: 900px) {
  body.layout-topbar .topbar-inner {
    min-height:56px; padding:8px 14px; gap:10px; flex-wrap:nowrap;
  }
  body.layout-topbar .topbar .brand-logo-full { width:auto; max-height:26px; }
  body.layout-topbar .topbar-mobile-toggle {
    display:inline-flex; align-items:center; justify-content:center; margin-left:auto;
    width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#fff; font-size:1.2rem;
  }
  body.layout-topbar .topbar-nav,
  body.layout-topbar .topbar-user,
  body.layout-topbar .topbar-submenu,
  body.layout-topbar .topbar-subsubmenu { display:none !important; }
  body.layout-topbar .topbar.mobile-open .topbar-nav,
  body.layout-topbar .topbar.mobile-open .topbar-user { display:flex !important; }
  body.layout-topbar .topbar.mobile-open .topbar-nav {
    flex-direction:column; align-items:stretch; width:100%; padding:0 14px 12px; gap:4px;
  }
  body.layout-topbar .topbar.mobile-open .topbar-nav a,
  body.layout-topbar .topbar.mobile-open .topbar-nav .topbar-nav-btn,
  body.layout-topbar .topbar.mobile-open .topbar-nav-pair { width:100%; justify-content:flex-start; }
  body.layout-topbar .topbar.mobile-open .topbar-nav-pair { display:flex; }
  body.layout-topbar .topbar.mobile-open .topbar-user {
    width:100%; flex-direction:column; align-items:stretch; gap:6px; padding:0 14px 14px;
  }
  body.layout-topbar .topbar.mobile-open .topbar-user .topbar-user-name { max-width:none; padding:6px 4px; }
  body.layout-topbar .topbar.mobile-open .topbar-user .topbar-user-action { justify-content:flex-start; }
}


/* ============================================================
   DispoGrid v35.1 – Mobile-Feinschliff & Nutzerverwaltung
   ============================================================ */
.user-admin-table input,.user-admin-table select { margin:0; min-width:150px; }
.user-row-actions { text-align:right; white-space:nowrap; }
.inline-form { display:inline-block; margin:2px 0 2px 5px; }
.account-signature-card { max-width:900px; }
.account-signature-editor { min-height:130px; }

@media (max-width: 900px) {
  .mobile-topbar { box-shadow:0 6px 18px rgba(10,25,40,.14); }
  .mobile-menu-btn,.topbar-mobile-toggle { min-width:44px; min-height:44px; cursor:pointer; }
  .sidebar { padding-bottom:max(14px, env(safe-area-inset-bottom)); box-shadow:14px 0 32px rgba(8,20,32,.22); }
  .sidebar nav a,.sidebar-nav-btn-link,.sidebar-nav-btn { min-height:46px; padding:11px 13px; font-size:.95rem; }
  .sidebar .user-box { padding:14px; }
  .user-box-btn { min-height:44px; }
  .main,.main-topbar { padding:16px 12px 28px; }
  .card { margin-bottom:14px; }
  .overlay { align-items:flex-start; padding:10px 6px; }
  .overlay-panel { width:min(100%,720px); max-height:calc(100dvh - 20px); overflow-y:auto; border-radius:14px; }
  .overlay-head { position:sticky; top:-12px; z-index:5; background:var(--card-bg); padding:10px 0 8px; }
  .richtext-toolbar { top:56px; overflow-x:auto; flex-wrap:nowrap; padding-bottom:5px; }
  .richtext-toolbar button,.richtext-toolbar select { flex:0 0 auto; min-height:42px; }
}

@media (max-width: 680px) {
  .mobile-topbar .brand-logo-icon { max-height:32px; max-width:34px; }
  .mobile-topbar .brand-app-name { font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .main h1 { font-size:1.35rem; margin-bottom:14px; }
  .card { padding:14px 12px; }
  .btn,.btn.small,.icon-action-btn { min-height:42px; }
  .form-actions { align-items:stretch; }
  .form-actions .btn { flex:1 1 auto; }

  /* Nutzerübersicht auf Mobilgeräten als lesbare Karten statt gequetschter Tabelle */
  .user-table-card .table-scroll { overflow:visible; }
  .user-admin-table,.user-admin-table thead,.user-admin-table tbody,.user-admin-table tr,.user-admin-table td { display:block; width:100%; min-width:0; }
  .user-admin-table thead { display:none; }
  .user-admin-table tr { border:1px solid var(--border); border-radius:12px; padding:10px 12px; margin:0 0 12px; background:var(--surface-soft,var(--card-bg)); }
  .user-admin-table td { display:grid; grid-template-columns:110px minmax(0,1fr); gap:10px; align-items:center; border:0; padding:7px 0; }
  .user-admin-table td::before { content:attr(data-label); color:var(--muted); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
  .user-admin-table input,.user-admin-table select { min-width:0; width:100%; }
  .user-admin-table .user-row-actions { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:7px; padding-top:10px; border-top:1px solid var(--border); margin-top:4px; }
  .user-admin-table .user-row-actions::before { width:100%; }
  .user-admin-table .inline-form { display:block; margin:0; flex:1 1 130px; }
  .user-admin-table .inline-form .btn { width:100%; }
}

@media (max-width: 420px) {
  .main,.main-topbar { padding-left:8px; padding-right:8px; }
  .mobile-topbar { padding-left:10px; padding-right:10px; }
  .overlay-panel { padding:11px 10px; }
  #bestellform { padding:12px 10px; }
  #bestellform .btn { width:100%; margin-top:6px; }
  .user-admin-table td { grid-template-columns:1fr; gap:4px; }
}


/* ============================================================
   DispoGrid v35.2 – Topbar, mobile polish, logs, user actions
   ============================================================ */
body.layout-topbar .topbar .brand-inline .brand-app-name { display:none; }
body.layout-topbar .topbar .brand-inline { min-width:106px; max-width:122px; }
body.layout-topbar .topbar .brand-logo-full { width:112px; max-width:112px; height:auto; object-fit:contain; }
body.layout-topbar .topbar-inner { gap:6px; }
body.layout-topbar .topbar-nav { flex-wrap:nowrap; min-width:0; overflow:hidden; }
body.layout-topbar .topbar-nav a, body.layout-topbar .topbar-nav-btn { white-space:nowrap; padding-left:6px; padding-right:6px; }
body.layout-topbar .topbar-nav .nav-key-einstellungen { width:30px; min-width:30px; padding:4px 6px; justify-content:center; }
body.layout-topbar .topbar-nav .nav-key-einstellungen span { display:none; }
body.layout-topbar .topbar-user { margin-left:auto; flex:0 0 auto; }
body.layout-topbar .topbar-icon-action {
  width:30px; height:28px; padding:0 !important; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:7px; background:var(--surface-soft); color:var(--text); cursor:pointer; text-decoration:none;
}
body.layout-topbar .topbar-icon-action:hover { border-color:var(--primary); color:var(--primary); text-decoration:none; }
body.layout-topbar .topbar-icon-action svg { width:17px; height:17px; }
body.layout-topbar .topbar-user-logout { color:#b42318; background:#fff5f4; border-color:#f2c8c4; }
html[data-theme="dark"] body.layout-topbar .topbar-icon-action { background:#dfeaf2; color:#102132; border-color:#dfeaf2; }
html[data-theme="dark"] body.layout-topbar .topbar-user-logout { background:#f5dede; color:#7d1111; border-color:#f5dede; }
.audit-log-frame { border:1px solid var(--border); border-radius:12px; background:var(--surface-soft); overflow:hidden; }
.audit-log-frame .table-scroll { max-height:430px; overflow:auto; background:var(--card-bg); }
.audit-log-frame .audit-table { margin:0; }
.audit-log-frame .audit-table thead th { position:sticky; top:0; z-index:2; background:var(--card-bg); }
.account-settings-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }

@media (max-width: 1180px) and (min-width: 901px) {
  body.layout-topbar .topbar-inner { padding-left:10px; padding-right:10px; }
  body.layout-topbar .topbar .brand-inline { min-width:88px; max-width:98px; }
  body.layout-topbar .topbar .brand-logo-full { width:92px; max-width:92px; }
  body.layout-topbar .topbar-nav a, body.layout-topbar .topbar-nav-btn { font-size:.72rem; padding-left:5px; padding-right:5px; }
  body.layout-topbar .topbar-user-name { max-width:120px; }
}

@media (max-width: 900px) {
  .mobile-topbar { min-height:52px; padding:6px max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left)); }
  .mobile-menu-btn, .topbar-mobile-toggle { width:42px; height:42px; min-width:42px; min-height:42px; border-radius:11px; }
  .sidebar { top:52px; width:min(304px, 88vw) !important; max-width:88vw; padding:8px 0 max(10px, env(safe-area-inset-bottom)); }
  .sidebar.collapsed { width:min(304px, 88vw) !important; }
  .sidebar nav a, .sidebar-nav-btn-link { min-height:46px; padding:11px 13px; font-size:.96rem; }
  .sidebar .user-box { padding:12px 14px; }
  .user-box-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .user-box-btn { min-height:44px; justify-content:center; }
  .overlay { align-items:flex-end; padding:0; }
  .overlay-panel { width:100%; max-height:92dvh; overflow:auto; border-radius:18px 18px 0 0; padding:16px 14px max(16px, env(safe-area-inset-bottom)); }
  .overlay-head { position:sticky; top:-16px; z-index:5; background:var(--card-bg); padding:12px 0 10px; }
  .user-row-actions { gap:6px; }
  .user-row-actions .btn { min-height:40px; }
  .audit-log-frame .table-scroll { max-height:360px; }
  body.layout-topbar .topbar.mobile-open .topbar-user .topbar-icon-action { width:100%; min-height:44px; justify-content:flex-start; padding:0 12px !important; }
}

/* ============================================================
   DispoGrid v35.3 – Startseite, Datenframes und kompakte Links
   ============================================================ */
.data-frame {
  width:100%;
  max-height:430px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card-bg);
  -webkit-overflow-scrolling:touch;
}
.data-frame > table { margin:0; min-width:680px; }
.data-frame th { position:sticky; top:0; z-index:2; background:var(--card-bg); box-shadow:0 1px 0 var(--border); }
.data-frame tr:last-child td { border-bottom:0; }
html[data-theme="dark"] .data-frame { background:var(--card-bg); border-color:var(--border); }
html[data-theme="dark"] .data-frame th { background:var(--card-bg); }

/* Startseite als 12-Spalten-Raster: Links können gezielt kompakt angeordnet werden. */
.widget-grid { grid-template-columns:repeat(12,minmax(0,1fr)); align-items:start; }
.widget-grid > .widget { grid-column:span 6; min-width:0; }
.widget-grid > .widget-wide,
.widget-grid > .shortcut-widget { grid-column:1 / -1; }
.widget-grid > .link-widget-gross { grid-column:span 6; }
.widget-grid > .link-widget-mittel { grid-column:span 3; }
.widget-grid > .link-widget-klein { grid-column:span 2; }

/* Schnellzugriffe bewusst in einer waagerechten Reihe. */
.shortcut-grid-horizontal {
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  overflow-x:auto;
  padding-bottom:3px;
  scrollbar-width:thin;
}
.shortcut-grid-horizontal .shortcut-tile {
  flex:1 1 0;
  min-width:112px;
  min-height:86px;
  padding:12px 10px;
}

.link-widget { min-height:118px; padding:18px 12px; }
.link-widget-gross { min-height:150px; }
.link-widget-mittel { min-height:120px; }
.link-widget-klein { min-height:96px; padding:12px 8px; font-size:.8rem; }

.link-layout-choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.link-layout-choice { position:relative; display:block; min-width:0; margin:0; cursor:pointer; }
/* Das Radio bleibt innerhalb seiner eigenen Kachel. Dadurch springt der Browser beim
   Anklicken nicht mehr an die unsichtbare, absolut positionierte Eingabeposition. */
.link-layout-choice > input {
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; cursor:pointer; z-index:2;
}
.link-layout-choice > span {
  position:relative; z-index:1; pointer-events:none;
  display:flex; flex-direction:column; gap:5px; min-height:130px; padding:14px;
  border:1px solid var(--border); border-radius:12px; background:var(--surface-soft);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.link-layout-choice:hover > span { border-color:color-mix(in srgb,var(--primary) 55%,var(--border)); }
.link-layout-choice > input:checked + span { border-color:var(--primary); box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 18%,transparent); }
.link-layout-choice > input:focus-visible + span { outline:2px solid var(--primary); outline-offset:2px; }
.link-layout-choice strong { color:var(--text); }
.link-layout-choice small { color:var(--muted); }
.layout-preview { display:grid; gap:4px; margin-top:auto; width:100%; height:38px; }
.layout-preview b { display:block; border-radius:4px; background:color-mix(in srgb,var(--primary) 24%,var(--card-bg)); border:1px solid color-mix(in srgb,var(--primary) 30%,var(--border)); }
.layout-preview-2 { grid-template-columns:repeat(2,1fr); }
.layout-preview-4 { grid-template-columns:repeat(4,1fr); }
.layout-preview-6 { grid-template-columns:repeat(6,1fr); }

@media (max-width: 900px) {
  .widget-grid > .widget { grid-column:1 / -1; }
  .widget-grid > .link-widget-gross { grid-column:span 12; }
  .widget-grid > .link-widget-mittel { grid-column:span 6; }
  .widget-grid > .link-widget-klein { grid-column:span 4; }
  .link-layout-choice-grid { grid-template-columns:1fr; }
  .data-frame { max-height:390px; }
  .data-frame > table { min-width:620px; }
}
@media (max-width: 600px) {
  .widget-grid > .link-widget-mittel { grid-column:span 6; }
  .widget-grid > .link-widget-klein { grid-column:span 6; }
  .shortcut-grid-horizontal .shortcut-tile { min-width:104px; flex:0 0 104px; }
  .data-frame { border-radius:10px; max-height:360px; }
}


/* ============================================================
   DispoGrid v35.4 – neues Logo & Login-Branding
   ============================================================ */
.login-brand-text { display:flex; flex-direction:column; gap:2px; text-align:center; }
.login-brand-text strong { font-size:1.18rem; line-height:1.2; color:var(--text); }
.login-brand-prefix { display:block; color:var(--muted); font-size:.9rem; font-weight:700; letter-spacing:.035em; }
.login-brand img { width:min(280px, 86%); max-width:280px; max-height:none; height:auto; object-fit:contain; }
body.layout-topbar .topbar .brand-inline { min-width:88px; max-width:102px; }
body.layout-topbar .topbar .brand-logo-full { width:auto; max-width:96px; height:28px; max-height:28px; object-fit:contain; }
.sidebar .brand-logo-full { width:auto; height:30px; max-height:30px; max-width:110px; object-fit:contain; }
.design-brand-preview img { width:auto; max-width:260px; max-height:92px; object-fit:contain; }
@media (max-width:1180px) and (min-width:901px) {
  body.layout-topbar .topbar .brand-inline { min-width:76px; max-width:86px; }
  body.layout-topbar .topbar .brand-logo-full { max-width:82px; height:26px; max-height:26px; }
}
@media (max-width:600px) {
  .login-brand { align-items:center; }
  .login-brand img { width:min(250px, 92%); max-width:250px; }
}


/* v35.4.2 logo placement */
.startpage-brand-card { margin-bottom: 18px; overflow: hidden; }
.startpage-brand-wrap { display:flex; align-items:center; gap:24px; }
.startpage-brand-logo { display:block; max-width:min(100%, 760px); width:100%; height:auto; border-radius:12px; }
.startpage-brand-text { min-width:220px; }
.startpage-brand-text h1 { margin:0 0 8px; }
@media (max-width: 900px) { .startpage-brand-wrap { flex-direction:column; align-items:flex-start; } .startpage-brand-logo { max-width:100%; } }


/* Step-by-step Branding-Anpassungen */
.login-brand { justify-content:center; text-align:center; flex-direction:column; }
.login-brand img { width:min(100%, 520px); max-width:100%; max-height:150px; object-fit:contain; }
.login-brand-text strong { font-size:1.1rem; }
.sidebar .brand-logo-icon, .mobile-topbar .brand-logo-icon { object-fit:contain; }


/* ============================================================
   DispoGrid privacy anonymization UI
   ============================================================ */
.privacy-anon-card { overflow:visible; }
.privacy-anon-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:16px; }
.privacy-anon-head h3 { margin:0 0 4px; }
.privacy-anon-head p { margin:0; color:var(--muted); }
.privacy-mode-badge { display:inline-flex; align-items:center; min-height:30px; padding:5px 11px; border-radius:999px; font-size:.76rem; font-weight:750; white-space:nowrap; background:var(--surface-soft); color:var(--muted); border:1px solid var(--border); }
.privacy-mode-badge.global { background:#e6f5ef; border-color:#b9e2cf; color:#12633e; }
.privacy-mode-badge.reason { background:#eaf2fb; border-color:#c7dbf1; color:#245c8c; }
.privacy-rule-section { border:1px solid var(--border); border-radius:14px; padding:16px; background:var(--surface-soft); margin-top:14px; }
.privacy-global-rule.active { border-color:color-mix(in srgb,var(--primary) 55%,var(--border)); box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 9%,transparent); }
.privacy-rule-title { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:12px; align-items:center; }
.privacy-rule-title > div:nth-child(2) { display:flex; flex-direction:column; gap:3px; }
.privacy-rule-title > div:nth-child(2) span { color:var(--muted); font-size:.84rem; }
.privacy-rule-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:11px; background:var(--card-bg); color:var(--primary); border:1px solid var(--border); font-size:1.25rem; }
.privacy-global-body { display:grid; gap:16px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.privacy-days-field { display:flex; align-items:center; gap:10px; margin:0; font-weight:700; color:var(--text); }
.privacy-days-field > span { display:inline-flex; align-items:center; gap:8px; font-weight:500; color:var(--muted); }
.privacy-days-field input { width:92px; margin:0; }
.privacy-subtitle { display:block; color:var(--text); }
.privacy-field-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.privacy-field-option { margin:0; display:flex; align-items:flex-start; gap:9px; min-height:66px; padding:11px; border:1px solid var(--border); border-radius:11px; background:var(--card-bg); cursor:pointer; }
.privacy-field-option:hover { border-color:color-mix(in srgb,var(--primary) 45%,var(--border)); }
.privacy-field-option input { width:18px; height:18px; min-width:18px; margin:1px 0 0; padding:0; accent-color:var(--primary); }
.privacy-field-option span { display:flex; flex-direction:column; gap:3px; }
.privacy-field-option strong { font-size:.86rem; color:var(--text); }
.privacy-field-option small { color:var(--muted); line-height:1.3; }
.privacy-switch { position:relative; display:inline-flex; width:48px; height:28px; margin:0; flex:0 0 auto; }
.privacy-switch input { position:absolute; opacity:0; pointer-events:none; }
.privacy-switch > span { width:48px; height:28px; border-radius:999px; background:#b9c3cc; position:relative; transition:.18s ease; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.privacy-switch > span:after { content:""; position:absolute; top:4px; left:4px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.2); transition:.18s ease; }
.privacy-switch input:checked + span { background:var(--primary); }
.privacy-switch input:checked + span:after { transform:translateX(20px); }
.privacy-switch-small { width:42px; height:24px; }
.privacy-switch-small > span { width:42px; height:24px; }
.privacy-switch-small > span:after { width:18px; height:18px; top:3px; left:3px; }
.privacy-switch-small input:checked + span:after { transform:translateX(18px); }
.privacy-reason-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.privacy-reason-header p { margin:4px 0 0; }
.privacy-override-note { display:inline-flex; padding:5px 9px; border-radius:999px; background:#fff0d8; color:#7a4c00; border:1px solid #f0cf92; font-size:.75rem; font-weight:700; white-space:nowrap; }
.privacy-reason-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; transition:.15s ease; }
.privacy-reason-grid.is-overridden { opacity:.45; filter:saturate(.7); }
.privacy-reason-card { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:68px; padding:11px 12px; border:1px solid var(--border); border-radius:11px; background:var(--card-bg); transition:.15s ease; }
.privacy-reason-card.enabled { border-color:color-mix(in srgb,var(--primary) 48%,var(--border)); }
.privacy-reason-main { display:flex; align-items:center; gap:10px; min-width:0; }
.privacy-reason-main > div { display:flex; flex-direction:column; min-width:0; }
.privacy-reason-main strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.privacy-reason-main small { color:var(--muted); }
.privacy-reason-days { display:flex; align-items:center; gap:5px; margin:0; white-space:nowrap; color:var(--muted); }
.privacy-reason-days input { width:78px; margin:0; padding:7px 8px; }
.privacy-save-row { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px; }
.privacy-save-row .hinweis { flex:1; }
.privacy-empty { padding:15px; border:1px dashed var(--border); border-radius:10px; color:var(--muted); grid-column:1/-1; }
html[data-theme="dark"] .privacy-mode-badge.global { background:#173f32; border-color:#29614e; color:#9fe0bf; }
html[data-theme="dark"] .privacy-mode-badge.reason { background:#203a54; border-color:#365673; color:#abd4f6; }
html[data-theme="dark"] .privacy-override-note { background:#49391e; color:#ffd894; border-color:#705522; }

/* ============================================================
   Mobile Feinschliff: Sidebar/Hamburger und Formulare
   ============================================================ */
@media (max-width:900px) {
  body.layout-sidebar.mobile-nav-open::after {
    content:""; position:fixed; inset:52px 0 0; z-index:89; background:rgba(5,14,24,.44); backdrop-filter:blur(1px);
  }
  .layout-sidebar .sidebar {
    display:flex; flex-direction:column; top:52px; bottom:0; height:auto !important; max-height:calc(100dvh - 52px);
    overflow:hidden !important; transform:translateX(-105%); border-radius:0 14px 14px 0;
  }
  .layout-sidebar .sidebar.mobile-open { transform:translateX(0); }
  .layout-sidebar .sidebar .sidebar-top { flex:0 0 auto; min-height:54px; padding:7px 12px 9px; border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent); }
  .layout-sidebar .sidebar .sidebar-toggle { display:none; }
  .layout-sidebar .sidebar nav { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:7px 10px 12px; }
  .layout-sidebar .sidebar .user-box { flex:0 0 auto; width:100%; padding:10px 12px max(10px,env(safe-area-inset-bottom)); border-top:1px solid var(--border); }
  .layout-sidebar .user-box-meta { padding:0 2px 8px; }
  .layout-sidebar .user-box-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; width:100%; }
  .layout-sidebar .user-box-actions .user-box-btn { width:100%; min-width:0; min-height:42px; padding:7px 5px; gap:5px; font-size:.74rem; line-height:1.15; overflow:hidden; }
  .layout-sidebar .user-box-actions .user-box-btn svg { flex:0 0 auto; }
  .layout-sidebar .user-box-actions .user-box-btn span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .layout-sidebar .user-box-actions .theme-toggle { display:flex; }
  .layout-sidebar .mobile-topbar { position:sticky; top:0; z-index:100; }
  .privacy-field-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .privacy-reason-grid { grid-template-columns:1fr; }
  .privacy-save-row { align-items:stretch; flex-direction:column; }
  .privacy-save-row .btn { width:100%; }
}
@media (max-width:600px) {
  .main, .main-topbar { padding:12px 9px; }
  .card { padding:13px; margin-bottom:14px; }
  .privacy-anon-head, .privacy-reason-header { flex-direction:column; }
  .privacy-rule-section { padding:12px; }
  .privacy-rule-title { grid-template-columns:36px minmax(0,1fr) auto; gap:9px; }
  .privacy-rule-icon { width:36px; height:36px; }
  .privacy-days-field { align-items:flex-start; flex-direction:column; gap:6px; }
  .privacy-field-grid { grid-template-columns:1fr; }
  .privacy-reason-card { align-items:flex-start; flex-direction:column; }
  .privacy-reason-days { width:100%; justify-content:flex-end; }
  .overlay-panel input, .overlay-panel select, .overlay-panel textarea { max-width:100%; }
  .data-frame { width:100%; max-width:100%; }
}


/* Formular-Feinschliff: Aktionen kompakt nebeneinander */
.bestellform-actions {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  margin-top:16px;
}
.bestellform-actions .btn {
  width:100%;
  min-width:0;
  white-space:normal;
  line-height:1.2;
}

/* Ersatzverkehr: Basis-Stunden gehören zur jeweiligen Linie und können mehrfach vorkommen. */
.ev-line-head {
  display:grid;
  grid-template-columns:minmax(220px, 1.35fr) minmax(250px, 1fr) auto;
  gap:14px;
  align-items:end;
  margin-bottom:12px;
}
.ev-line-head label { margin:0; }
.ev-basisstunden-field { min-width:0; }
.ev-basisstunden-label { font-size:.82rem; color:var(--muted); margin-bottom:4px; }
.basisstunden-list { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.basisstunde-item {
  display:inline-flex;
  align-items:center;
  min-width:105px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--card-bg);
  overflow:hidden;
}
.basisstunde-item input {
  width:62px;
  margin:0;
  padding:7px 6px 7px 9px;
  border:0;
  border-radius:0;
  background:transparent;
  text-align:center;
}
.basisstunde-item input:focus { outline:none; box-shadow:none; }
.basisstunde-suffix { font-size:.75rem; color:var(--muted); padding-right:3px; }
.basisstunde-entfernen {
  width:27px;
  height:30px;
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:1.1rem;
}
.basisstunde-entfernen:hover { color:var(--danger); }
.ev-line-remove { align-self:end; }

@media (max-width: 760px) {
  .bestellform-actions { gap:5px; }
  .bestellform-actions .btn { padding:9px 6px !important; font-size:.73rem !important; }
  .ev-line-head { grid-template-columns:1fr; gap:10px; }
  .ev-line-remove .btn { width:100%; }
  .basisstunden-list { width:100%; }
}

/* ============================================================
   DispoGrid v35.6 – WebApp Betriebspersonal
   ============================================================ */
.webapp-body {
  min-height:100dvh; margin:0; background:#eef3f8; color:#122235;
  font-family:"Inter","Segoe UI",Roboto,-apple-system,sans-serif;
}
.webapp-shell { min-height:100dvh; max-width:720px; margin:0 auto; background:#f8fafc; box-shadow:0 0 44px rgba(18,34,53,.12); }
.webapp-header {
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:max(10px,env(safe-area-inset-top)) 16px 10px; background:linear-gradient(135deg,#0b2e51,#0d446f); color:#fff;
  box-shadow:0 4px 18px rgba(11,46,81,.2);
}
.webapp-header-brand { display:flex; align-items:center; gap:10px; min-width:0; }
.webapp-header-brand img { width:42px; height:42px; object-fit:contain; flex:0 0 42px; }
.webapp-header-brand div { display:flex; flex-direction:column; min-width:0; }
.webapp-header-brand strong { font-size:1.05rem; }
.webapp-header-brand span { font-size:.72rem; color:#c9d8e6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.webapp-header-actions { display:flex; align-items:center; gap:8px; }
.webapp-theme-toggle { width:40px; height:40px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:11px; color:#fff; font-size:1.1rem; background:rgba(255,255,255,.08); cursor:pointer; }
.webapp-logout { width:40px; height:40px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:11px; color:#fff; font-size:1.25rem; background:rgba(255,255,255,.08); text-decoration:none; }
.webapp-main { padding:18px 16px max(28px,env(safe-area-inset-bottom)); }
.webapp-welcome { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; }
.webapp-welcome h1 { margin:2px 0 0; font-size:1.45rem; }
.webapp-eyebrow { display:block; color:#64778a; text-transform:uppercase; letter-spacing:.065em; font-size:.67rem; font-weight:800; }
.webapp-person-badge { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:#e6f7ef; color:#16734a; font-size:.72rem; font-weight:750; white-space:nowrap; }
.webapp-alert { padding:12px 14px; border-radius:12px; margin:0 0 14px; border:1px solid; line-height:1.4; }
.webapp-alert.success { background:#e9f8ef; border-color:#bce4cb; color:#16663d; }
.webapp-alert.error { background:#fff0ef; border-color:#f0c1bb; color:#9c2e24; }
.webapp-alert.warning { background:#fff8e7; border-color:#ead69a; color:#6d5612; }
.webapp-section { margin-top:20px; }
.webapp-section-title { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom:10px; }
.webapp-section-title h2 { margin:2px 0 0; font-size:1.05rem; }
.webapp-count,.webapp-home-count { display:inline-grid; place-items:center; min-width:25px; height:25px; padding:0 7px; border-radius:999px; background:#e6f0fb; color:#1d65a0; font-size:.76rem; }
.webapp-trip-list,.webapp-request-list { display:grid; gap:10px; }
.webapp-trip-card,.webapp-request-card,.webapp-card {
  background:#fff; border:1px solid #dce4ec; border-radius:16px; box-shadow:0 5px 18px rgba(25,45,65,.055);
}
.webapp-trip-card { display:grid; grid-template-columns:74px minmax(0,1fr); gap:10px; padding:13px; align-items:center; }
.webapp-trip-time { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:9px 6px; border-radius:12px; background:#eef5fb; }
.webapp-trip-time strong { font-size:1.2rem; color:#0f4c81; }
.webapp-trip-time span { font-size:.68rem; color:#6b7d8e; }
.webapp-trip-route { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:7px; font-size:.83rem; }
.webapp-trip-route strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.webapp-trip-route span { color:#789; }
.webapp-trip-card .webapp-status,.webapp-trip-card .webapp-primary-small { grid-column:1/-1; }
.webapp-primary { display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; border:0; border-radius:12px; background:linear-gradient(135deg,#0f70b7,#159f7d); color:#fff; font-weight:800; font-size:.95rem; text-decoration:none; cursor:pointer; box-shadow:0 7px 18px rgba(15,112,183,.16); }
.webapp-primary-small { min-height:42px; font-size:.85rem; }
.webapp-status { display:inline-flex; width:max-content; padding:6px 9px; border-radius:999px; font-size:.72rem; font-weight:800; }
.webapp-status.status-neu { background:#fff2d8; color:#8b5b00; }
.webapp-status.status-in_bearbeitung { background:#e4f0fb; color:#1f5c8b; }
.webapp-status.status-genehmigt { background:#e6f7ef; color:#16734a; }
.webapp-status.status-abgelehnt { background:#feeceb; color:#9c2e24; }
.webapp-request-card { padding:13px; border-left:4px solid #d7e1ea; }
.webapp-request-card.status-genehmigt { border-left-color:#26a269; }
.webapp-request-card.status-abgelehnt { border-left-color:#d44a3a; }
.webapp-request-card.status-neu { border-left-color:#e4aa2f; }
.webapp-request-card.status-in_bearbeitung { border-left-color:#3b86bd; }
.webapp-request-head { display:flex; justify-content:space-between; gap:10px; }
.webapp-request-head span { color:#6c7c8b; font-size:.72rem; }
.webapp-request-route { margin-top:7px; color:#465b6e; font-size:.84rem; }
.webapp-success-note,.webapp-reject-note { margin:9px 0 0; padding:8px 10px; border-radius:9px; font-size:.8rem; }
.webapp-success-note { background:#edf9f2; color:#17663f; }
.webapp-reject-note { background:#fff1ef; color:#8c3028; }
.webapp-empty { padding:20px; text-align:center; border:1px dashed #cbd7e1; border-radius:14px; background:#fff; color:#607283; }
.webapp-empty strong { color:#26394b; }
.webapp-empty p { margin:5px 0 0; }
.webapp-order-card { padding:16px; }
.webapp-card-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.webapp-card-head h2 { margin:2px 0 0; font-size:1.22rem; }
.webapp-close { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:#f1f4f7; color:#425569; text-decoration:none; font-size:1.4rem; }
.webapp-trip-summary { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:14px 0; }
.webapp-trip-summary > div { display:flex; flex-direction:column; gap:3px; padding:10px; border-radius:10px; background:#f0f5fa; }
.webapp-trip-summary span { color:#738494; font-size:.72rem; }
.webapp-form { display:grid; gap:12px; }
.webapp-form label { margin:0; color:#415568; font-weight:650; font-size:.82rem; }
.webapp-form input,.webapp-form select,.webapp-form textarea { margin-top:5px; min-height:46px; border:1px solid #cbd7e2; border-radius:11px; background:#fff; color:#172b3d; font-size:16px; box-shadow:none; }
.webapp-form textarea { min-height:90px; resize:vertical; }
.webapp-form input:focus,.webapp-form select:focus,.webapp-form textarea:focus { outline:2px solid rgba(27,129,190,.2); border-color:#2f87bd; }
.webapp-form .req { color:#d43f35; }
.webapp-form-section { border-top:1px solid #e3e9ef; padding-top:12px; display:grid; gap:10px; }
.webapp-form-section h3 { margin:0; font-size:.9rem; }
.webapp-check { display:flex !important; align-items:center; gap:9px; padding:10px; border:1px solid #dbe3eb; border-radius:10px; background:#f8fafc; }
.webapp-check input { width:20px; height:20px; min-height:0; margin:0; }

/* WebApp Settings */
.webapp-settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.webapp-setting-panel { border:1px solid var(--border); border-radius:14px; padding:14px; background:var(--surface-soft); }
.webapp-setting-panel-wide { grid-column:1/-1; }
.webapp-setting-panel h4 { margin:0 0 10px; }
.setting-toggle-line { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; padding:10px 0; border-bottom:1px solid var(--border); }
.setting-toggle-line:last-child { border-bottom:0; }
.setting-toggle-line > span { display:flex; flex-direction:column; gap:3px; }
.setting-toggle-line small { color:var(--muted); line-height:1.3; }
.setting-toggle-line input { width:21px; height:21px; flex:0 0 21px; margin:0; }
.webapp-option-list,.webapp-option-grid { display:grid; gap:8px; }
.webapp-option-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.webapp-option-card { display:flex; align-items:flex-start; gap:9px; margin:0; padding:10px; border:1px solid var(--border); border-radius:11px; background:var(--card-bg); }
.webapp-option-card input { width:18px; height:18px; margin:1px 0 0; flex:0 0 18px; }
.webapp-option-card span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.webapp-option-card small { color:var(--muted); }

/* Disposition / Anfragen */
.webapp-dispatch-stats { display:flex; gap:8px; overflow-x:auto; margin:0 0 14px; padding-bottom:3px; }
.webapp-stat { min-width:115px; display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:var(--card-bg); color:var(--text); text-decoration:none; }
.webapp-stat strong { font-size:1.15rem; color:var(--primary); }
.webapp-stat span { color:var(--muted); font-size:.78rem; }
.webapp-stat.active { border-color:var(--primary); box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 12%,transparent); }
.webapp-dispatch-list { display:grid; gap:12px; }
.webapp-dispatch-card { border-left:4px solid var(--border); }
.webapp-dispatch-card.status-neu { border-left-color:#dfa72c; }
.webapp-dispatch-card.status-in_bearbeitung { border-left-color:#3282b8; }
.webapp-dispatch-card.status-genehmigt { border-left-color:#259d68; }
.webapp-dispatch-card.status-abgelehnt { border-left-color:#ca4b3e; }
.webapp-dispatch-card-head { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.webapp-dispatch-card-head h3 { margin:7px 0 2px; }
.webapp-dispatch-card-head p { margin:0; color:var(--muted); font-size:.78rem; }
.webapp-dispatch-time { display:flex; flex-direction:column; align-items:flex-end; }
.webapp-dispatch-time strong { font-size:1.25rem; }
.webapp-dispatch-time span { color:var(--muted); font-size:.75rem; }
.webapp-dispatch-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:13px; }
.webapp-dispatch-grid > div { display:flex; flex-direction:column; gap:4px; padding:11px; border:1px solid var(--border); border-radius:10px; background:var(--surface-soft); }
.webapp-dispatch-grid .label { color:var(--muted); font-size:.72rem; font-weight:750; text-transform:uppercase; letter-spacing:.04em; }
.webapp-dispatch-wide { grid-column:1/-1; }
.changed-badge { display:inline-flex; width:max-content; margin-top:4px; padding:3px 7px; border-radius:999px; background:#fff0d6; color:#865700; font-size:.68rem; font-weight:750; }
.webapp-dyn-values { display:flex; flex-wrap:wrap; gap:6px 14px; }
.webapp-dispatch-actions { display:flex; align-items:center; gap:8px; margin-top:12px; }
.webapp-reject-form { display:flex; gap:7px; flex:1; }
.webapp-reject-form input { margin:0; }

/* Startseite + Live-Popup */
.webapp-home-card { border-left:4px solid var(--primary); }
.webapp-home-head { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.webapp-home-head h3 { margin:2px 0 0; }
.webapp-home-actions { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.webapp-home-list { display:grid; gap:6px; margin-top:12px; }
.webapp-home-item { display:grid; grid-template-columns:auto minmax(120px,.7fr) minmax(180px,1.5fr) auto; gap:9px; align-items:center; padding:8px 10px; border:1px solid var(--border); border-radius:9px; color:var(--text); text-decoration:none; background:var(--surface-soft); }
.webapp-home-item small { color:var(--muted); }
.webapp-status-dot { width:9px; height:9px; border-radius:50%; background:#d1a231; }
.webapp-status-dot.in_bearbeitung { background:#3986b9; }
.webapp-live-toast { position:fixed; right:18px; bottom:18px; z-index:180; width:min(470px,calc(100vw - 28px)); display:grid; grid-template-columns:42px minmax(0,1fr) auto 28px; gap:10px; align-items:center; padding:12px; border-radius:14px; background:#10263a; color:#fff; box-shadow:0 18px 44px rgba(0,0,0,.28); }
.webapp-live-toast[hidden] { display:none !important; }
.webapp-live-toast-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:10px; background:#183d5d; font-size:1.25rem; }
.webapp-live-toast-copy { display:flex; flex-direction:column; gap:3px; min-width:0; }
.webapp-live-toast-copy span { color:#cbd9e5; font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.webapp-live-toast-close { border:0; background:transparent; color:#c8d3dc; font-size:1.35rem; cursor:pointer; }

@media(max-width:900px){
  .webapp-settings-grid { grid-template-columns:1fr; }
  .webapp-setting-panel-wide { grid-column:auto; }
  .webapp-option-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .webapp-dispatch-grid { grid-template-columns:1fr; }
  .webapp-dispatch-wide { grid-column:auto; }
  .webapp-home-item { grid-template-columns:auto 1fr auto; }
  .webapp-home-item > span:nth-of-type(2) { grid-column:2/-1; }
}
@media(max-width:600px){
  .webapp-main { padding:14px 11px max(24px,env(safe-area-inset-bottom)); }
  .webapp-welcome { align-items:flex-start; flex-direction:column; gap:7px; }
  .webapp-trip-card { grid-template-columns:66px minmax(0,1fr); padding:11px; }
  .webapp-trip-route { grid-template-columns:1fr; gap:2px; }
  .webapp-trip-route > span { display:none; }
  .webapp-option-grid { grid-template-columns:1fr; }
  .webapp-dispatch-card-head { flex-direction:column; }
  .webapp-dispatch-time { align-items:flex-start; }
  .webapp-dispatch-actions { flex-direction:column; align-items:stretch; }
  .webapp-reject-form { flex-direction:column; }
  .webapp-home-head { align-items:flex-start; flex-direction:column; }
  .webapp-home-actions { width:100%; justify-content:flex-start; }
  .webapp-home-actions .btn { flex:1; }
  .webapp-home-item { grid-template-columns:auto 1fr; }
  .webapp-home-item small { grid-column:2; }
  .webapp-live-toast { right:10px; bottom:10px; grid-template-columns:38px minmax(0,1fr) 26px; }
  .webapp-live-toast .btn { grid-column:2; width:max-content; }
  .webapp-live-toast-close { grid-column:3; grid-row:1; }
}

/* ============================================================
   v35.6.1 – Navigation: kompakte Markenanzeige + stabile Konto-Icons
   ============================================================ */
.app-brand-compact { min-width:0; overflow:visible; }
.brand-mark-box {
  flex:0 0 40px; width:40px; height:40px; display:grid; place-items:center;
  background:#fff; border:1px solid rgba(15,36,55,.12); border-radius:11px;
  box-shadow:0 1px 4px rgba(0,0,0,.12); overflow:hidden;
}
.brand-mark-image { display:block; width:34px; height:34px; object-fit:contain; }
.brand-name-stack { min-width:0; max-width:142px; display:flex; flex-direction:column; justify-content:center; line-height:1.02; color:#fff; white-space:normal; }
.brand-prefix-line {
  display:block; max-width:100%; font-size:clamp(.68rem, .8vw, .84rem); line-height:1.05;
  font-weight:800; overflow-wrap:anywhere; word-break:break-word; color:#fff;
}
.brand-product-line { display:block; font-size:.72rem; font-weight:750; line-height:1.05; color:var(--sidebar-text); }
.sidebar .user-box-actions { min-width:0; }
.sidebar .user-box .user-box-btn svg { width:18px; height:18px; max-width:18px; max-height:18px; }
.sidebar .user-box .theme-toggle-icon { width:18px; height:18px; display:grid; place-items:center; font-size:18px; line-height:1; flex:0 0 18px; }

/* Eingeklappte Desktop-Sidebar: Kontoaktionen bleiben als Icons sichtbar. */
@media (min-width:901px) {
  .sidebar.collapsed .sidebar-top { padding-left:10px; padding-right:10px; justify-content:center; }
  .sidebar.collapsed .brand-sidebar { display:none; }
  .sidebar.collapsed .user-box { padding:10px 8px 12px; }
  .sidebar.collapsed .user-box-meta { display:none; }
  .sidebar.collapsed .user-box-actions { display:grid; grid-template-columns:1fr; gap:7px; justify-items:center; }
  .sidebar.collapsed .user-box .user-box-btn {
    width:42px; min-width:42px; height:42px; min-height:42px; padding:0; margin:0;
    display:flex; align-items:center; justify-content:center; border-radius:10px;
  }
  .sidebar.collapsed .user-box .user-box-btn .nav-label { display:none !important; }
}

/* Mobil: Hamburgerleiste bleibt kompakt, das Menü selbst verschiebt sich nicht mehr durch Kontoaktionen. */
@media (max-width:900px) {
  .mobile-topbar { min-width:0; gap:9px; }
  .mobile-topbar .app-brand-compact { flex:1 1 auto; min-width:0; gap:8px; }
  .mobile-topbar .brand-mark-box { flex-basis:36px; width:36px; height:36px; border-radius:9px; }
  .mobile-topbar .brand-mark-image { width:30px; height:30px; }
  .mobile-topbar .brand-name-stack { max-width:min(52vw,180px); }
  .mobile-topbar .brand-prefix-line { font-size:clamp(.64rem,2.8vw,.79rem); }
  .mobile-topbar .brand-product-line { font-size:.68rem; }

  .layout-sidebar .sidebar .sidebar-top { min-width:0; }
  .layout-sidebar .sidebar .brand-sidebar { width:100%; min-width:0; gap:9px; }
  .layout-sidebar .sidebar .brand-name-stack { max-width:170px; }
  .layout-sidebar .sidebar .user-box-actions {
    display:grid; grid-template-columns:repeat(3,44px); justify-content:start; gap:8px; width:100%;
  }
  .layout-sidebar .sidebar .user-box-actions .user-box-btn {
    width:44px; min-width:44px; height:44px; min-height:44px; padding:0; margin:0;
    display:flex; align-items:center; justify-content:center; border-radius:11px; overflow:hidden;
  }
  .layout-sidebar .sidebar .user-box-actions .user-box-btn .nav-label { display:none !important; }
  .layout-sidebar .sidebar .user-box-actions .user-box-btn svg { width:18px; height:18px; }
  .layout-sidebar .sidebar .user-box-actions .theme-toggle-icon { font-size:17px; }
}

@media (max-width:390px) {
  .mobile-topbar .brand-name-stack { max-width:44vw; }
  .mobile-topbar .brand-prefix-line { font-size:.64rem; }
  .mobile-topbar .brand-product-line { font-size:.64rem; }
}
.brand-prefix-line { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; word-break:normal; overflow-wrap:normal; }
.brand-prefix-line.prefix-long { font-size:.68rem; letter-spacing:-.01em; }
.brand-prefix-line.prefix-xlong { font-size:.6rem; letter-spacing:-.025em; }
@media (max-width:900px) {
  .mobile-topbar .brand-prefix-line.prefix-long { font-size:.62rem; }
  .mobile-topbar .brand-prefix-line.prefix-xlong { font-size:.56rem; }
}

/* ============================================================
   DispoGrid v35.7 – Fahrtanfragen & Web-Push
   ============================================================ */
.nav-count-badge {
  display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; background:#e53935; color:#fff; font-size:.68rem; font-weight:800;
  line-height:1; margin-left:auto; box-shadow:0 0 0 2px color-mix(in srgb,var(--sidebar-bg) 70%,transparent);
}
.topbar-nav .nav-count-badge { margin-left:2px; box-shadow:none; }
.sidebar.collapsed .nav-count-badge { position:absolute; right:4px; top:3px; min-width:16px; height:16px; padding:0 4px; font-size:.58rem; }
.sidebar.collapsed nav > a { position:relative; }

.webapp-form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.webapp-new-trip-action { margin:2px 0 14px; }
.webapp-secondary-action {
  display:flex; align-items:center; justify-content:center; min-height:46px; width:100%;
  border:1px solid #bdd2e2; border-radius:12px; background:#fff; color:#145f93;
  font-weight:800; text-decoration:none; box-shadow:0 3px 12px rgba(25,45,65,.04);
}
.webapp-secondary-action:hover { background:#f2f8fc; text-decoration:none; }
.webapp-header-brand strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:54vw; }

@media (max-width:520px) {
  .webapp-form-row { grid-template-columns:1fr; }
}

/* ============================================================
   DispoGrid v35.7.1 – Datenschutz-Statistik & WebPush-Status
   ============================================================ */
.webapp-stat-history {
  display:flex; align-items:center; justify-content:center; min-height:58px;
}
.webapp-stat-history span { font-weight:800; }
.webapp-private-stats {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:12px;
}
.webapp-private-stats > div {
  border:1px solid var(--border); border-radius:12px; background:var(--surface-soft);
  padding:14px 16px; display:flex; flex-direction:column; gap:5px;
}
.webapp-private-stats span { color:var(--muted); font-size:.8rem; font-weight:700; }
.webapp-private-stats strong { font-size:1.45rem; }
.webpush-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.webpush-actions [data-webapp-notification-status] { flex:1 1 100%; min-height:18px; }
@media(max-width:700px) {
  .webapp-private-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .webpush-actions .btn { width:100%; }
}

/* ============================================================
   DispoGrid v35.7.3 – Browser-Push in „Mein Konto“
   ============================================================ */
.account-push-box {
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--border);
}
.account-push-box .settings-section-title { margin-bottom:12px; }
.account-push-status-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:10px 0 14px;
}
.account-push-status-grid > div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-soft, #f5f7fa);
}
.account-push-status-grid span { color:var(--muted); font-size:.8rem; }
.account-push-status-grid strong { font-size:.8rem; text-align:right; }
.account-push-status-grid .diag-ok { color:var(--success); }
.account-push-status-grid .diag-bad { color:var(--danger); }
.account-push-actions { margin-top:8px; }
.account-push-help { margin:10px 0 0; line-height:1.45; }
html[data-theme="dark"] .account-push-status-grid > div { background:var(--surface-soft); }
@media(max-width:600px) {
  .account-push-status-grid { grid-template-columns:1fr; }
  .account-push-actions .btn { width:100%; }
}


/* ============================================================
   DispoGrid v35.7.6 – weiße Navigationmarke & Server-Zeitzone
   ============================================================ */
.brand-mark-box.brand-mark-box-white {
  background:transparent;
  border:0;
  box-shadow:none;
  overflow:visible;
}
.brand-mark-image.brand-mark-image-white {
  width:36px;
  height:36px;
  object-fit:contain;
}
.brand-inline-white {
  min-width:38px;
  justify-content:center;
}
.brand-inline-white .brand-logo-white {
  width:34px;
  height:34px;
  max-width:34px;
  max-height:34px;
  object-fit:contain;
}
@media (max-width:900px) {
  .mobile-topbar .brand-mark-box.brand-mark-box-white {
    flex-basis:36px;
    width:36px;
    height:36px;
  }
  .mobile-topbar .brand-mark-image.brand-mark-image-white {
    width:34px;
    height:34px;
  }
}

/* v35.7.7 – Push-Diagnose */
.account-push-delivery { margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.account-push-delivery h4 { margin:0 0 9px; }
.account-push-delivery-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.account-push-delivery-grid .diag-ok { color:var(--success); }
.account-push-delivery-grid .diag-bad { color:var(--danger); }
.account-push-actions .push-soft-btn { border:none !important; box-shadow:none !important; background:var(--surface-soft); color:var(--text); }
.account-push-actions .push-soft-btn:hover { background:color-mix(in srgb,var(--surface-soft) 82%,var(--primary)); color:var(--text); }
html[data-theme="dark"] .account-push-actions .push-soft-btn { background:#40566c; color:#f4f8fc; }
@media(max-width:760px){ .account-push-delivery-grid{grid-template-columns:1fr;} }


/* DispoGrid v35.7.8 – Push-Diagnose & Mein Konto */
.account-signature-inline {
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid var(--border);
}
.account-signature-inline .settings-section-title { margin-bottom:10px; }
.account-signature-inline .richtext-toolbar { position:static; }
.account-signature-inline .account-signature-editor { min-height:150px; }
.account-left-card { overflow:visible; }
@media (max-width: 760px) {
  .account-signature-inline .richtext-toolbar { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .account-signature-inline .richtext-toolbar > * { flex:0 0 auto; }
}


/* DispoGrid v35.7.10 – vereinfachter Browser-Push */
.push-smart-status { display:flex; align-items:center; gap:12px; padding:12px 14px; margin:12px 0; border:1px solid var(--border); border-radius:12px; background:var(--surface-soft); }
.push-smart-status > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.push-smart-dot { width:11px; height:11px; border-radius:50%; background:#97a8b6; box-shadow:0 0 0 4px color-mix(in srgb, #97a8b6 18%, transparent); flex:0 0 auto; }
.push-smart-status.push-ok .push-smart-dot { background:#17a36b; box-shadow:0 0 0 4px color-mix(in srgb, #17a36b 18%, transparent); }
.push-smart-status.push-bad .push-smart-dot { background:#d94747; box-shadow:0 0 0 4px color-mix(in srgb, #d94747 18%, transparent); }
.push-smart-status.push-wait .push-smart-dot { background:#e6a52c; box-shadow:0 0 0 4px color-mix(in srgb, #e6a52c 18%, transparent); }


/* ============================================================
   DispoGrid v35.7.12 – Mobile-Menü, Badges und Formular-Feinschliff
   ============================================================ */
.nav-count-badge {
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

@media (max-width:900px) {
  /* Im mobilen Drawer das Branding nicht ein zweites Mal wiederholen. */
  .layout-sidebar .sidebar .sidebar-top { display:none !important; }
  .layout-sidebar .sidebar { padding-top:8px; }
  .layout-sidebar .sidebar nav { padding:6px 12px 12px !important; }
  .layout-sidebar .sidebar nav > a,
  .layout-sidebar .sidebar .sidebar-nav-pair,
  .layout-sidebar .sidebar .sidebar-nav-btn-link {
    width:100%;
  }
  .layout-sidebar .sidebar nav > a,
  .layout-sidebar .sidebar .sidebar-nav-btn-link {
    justify-content:flex-start !important;
    text-align:left !important;
    padding-left:18px !important;
    padding-right:14px !important;
    gap:12px !important;
  }
  .layout-sidebar .sidebar nav > a > svg,
  .layout-sidebar .sidebar .sidebar-nav-btn-link > svg {
    flex:0 0 22px;
    width:22px;
    height:22px;
  }
  .layout-sidebar .sidebar nav .nav-label {
    text-align:left !important;
  }
  .layout-sidebar .sidebar-section-label {
    text-align:left !important;
    padding-left:12px;
  }
  .layout-sidebar .sidebar .nav-count-badge {
    margin-left:auto !important;
    flex:0 0 auto;
  }
}

/* Ersatzverkehr: Linie und Basis-Stunden sauber auf einer Ebene, Entfernen innerhalb der Karte. */
.linie-block { position:relative; overflow:visible; }
.ev-line-head {
  grid-template-columns:minmax(220px,1fr) minmax(300px,1.35fr);
  align-items:end;
  gap:14px;
  padding-right:118px;
  min-height:74px;
}
.ev-line-select select { min-height:42px; }
.ev-basisstunden-field { display:grid; grid-template-rows:auto 42px; align-items:end; }
.ev-basisstunden-field > .basisstunde-hinzufuegen-btn { position:absolute; right:14px; top:48px; min-height:36px; }
.basisstunden-list { min-height:42px; align-items:center; margin-bottom:0; padding-right:0; }
.basisstunde-item { min-height:38px; }
.ev-line-remove { position:absolute; top:14px; right:14px; z-index:2; }
.ev-line-remove .btn { margin:0; }

@media (max-width:760px) {
  .ev-line-head { grid-template-columns:1fr; padding-right:0; padding-top:42px; min-height:0; }
  .ev-basisstunden-field { display:block; }
  .ev-basisstunden-field > .basisstunde-hinzufuegen-btn { position:static; margin-top:7px; }
  .ev-line-remove { top:10px; right:10px; }
  .ev-line-remove .btn { width:auto; }
}

/* Nutzeranlage: gleichmäßige Ausrichtung ohne Hilfetext unter dem Personenfeld. */
#benutzer-abschnitt form.row { align-items:end !important; }
#benutzer-abschnitt form.row > label,
#benutzer-abschnitt form.row > div { align-self:end; }

.webapp-cancel-request { margin-top:10px; }
.webapp-cancel-btn {
  width:100%; min-height:40px; border:1px solid #efc2bf; border-radius:10px;
  background:#fff7f6; color:#a83830; font-weight:750; cursor:pointer;
}
.webapp-cancel-btn:hover { background:#feeceb; }
html[data-theme="dark"] .webapp-cancel-btn { background:#312126; border-color:#704148; color:#ffaaaa; }

/* ============================================================
   DispoGrid v35.8.0 – kompakte Notebook-UI & vereinheitlichtes Design
   ============================================================ */

/* Produktbranding ohne Claim/Tagline. */
.brand-product-lockup {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  overflow:hidden;
}
.brand-product-lockup .brand-mark-box {
  flex:0 0 38px;
  width:38px;
  height:38px;
  border-radius:10px;
}
.brand-product-lockup .brand-mark-image {
  width:32px;
  height:32px;
}
.brand-wordmark-box {
  display:flex;
  align-items:center;
  min-width:0;
  height:34px;
  overflow:hidden;
}
.brand-wordmark-image {
  display:block;
  width:auto;
  height:28px;
  max-width:132px;
  object-fit:contain;
  object-position:left center;
}

/* Buttons: eine ruhige Formensprache, Hauptfarbe folgt der Seitenleiste. */
.btn {
  min-height:36px;
  padding:8px 14px;
  border-radius:9px;
  border:1px solid transparent;
  background:var(--sidebar-bg);
  color:#fff;
  font-size:.86rem;
  font-weight:700;
  line-height:1.15;
  box-shadow:0 1px 2px rgba(15,23,42,.10), 0 5px 12px rgba(15,23,42,.05);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease, background .12s ease;
}
.btn:hover {
  opacity:1;
  filter:brightness(1.08);
  box-shadow:0 3px 8px rgba(15,23,42,.12);
  transform:translateY(-1px);
}
.btn:active { transform:translateY(0); box-shadow:0 1px 2px rgba(15,23,42,.08); }
.btn.small {
  min-height:36px;
  padding:7px 12px;
  font-size:.82rem;
}
.btn.secondary {
  background:color-mix(in srgb,var(--sidebar-bg) 8%,var(--card-bg));
  color:var(--sidebar-bg);
  border-color:color-mix(in srgb,var(--sidebar-bg) 55%,var(--border));
  box-shadow:none;
}
.btn.secondary:hover {
  background:color-mix(in srgb,var(--sidebar-bg) 14%,var(--card-bg));
  color:var(--sidebar-bg);
  border-color:var(--sidebar-bg);
}
.btn.danger,
.btn.abbestellen-btn.dringend {
  background:var(--danger);
  border-color:var(--danger);
  color:#fff;
}
.btn.danger:hover,
.btn.abbestellen-btn.dringend:hover { filter:brightness(1.06); }
.btn:disabled { opacity:.45; transform:none; box-shadow:none; cursor:not-allowed; }
html[data-theme="dark"] .btn:not(.danger):not(.abbestellen-btn) {
  background:var(--sidebar-bg);
  border-color:color-mix(in srgb,var(--sidebar-bg) 80%,#fff);
  color:#fff !important;
}
html[data-theme="dark"] .btn.secondary:not(.danger) {
  background:color-mix(in srgb,var(--sidebar-bg) 45%,var(--card-bg));
  border-color:color-mix(in srgb,var(--sidebar-bg) 65%,#fff);
  color:#f4f8fc !important;
}

/* Notebook/Desktop: Sidebar bleibt vollständig sichtbar, ohne eigenen Scrollbalken. */
@media (min-width:901px) {
  body.layout-sidebar { overflow:hidden; }
  .layout-sidebar .app-shell { height:100dvh; min-height:0; overflow:hidden; }
  .layout-sidebar .sidebar {
    height:100dvh;
    min-height:0;
    padding:10px 0 0;
    overflow:hidden !important;
    border-right-color:color-mix(in srgb,var(--sidebar-bg) 72%,#fff);
  }
  .layout-sidebar .sidebar .sidebar-top {
    flex:0 0 50px;
    min-height:50px;
    padding:3px 12px 8px;
    gap:8px;
  }
  .layout-sidebar .sidebar .sidebar-toggle {
    width:36px;
    height:36px;
    min-width:36px;
    background:color-mix(in srgb,var(--sidebar-bg) 78%,#fff);
    border-color:color-mix(in srgb,var(--sidebar-bg) 62%,#fff);
    color:#fff;
  }
  .layout-sidebar .sidebar nav {
    flex:1 1 auto;
    min-height:0;
    overflow:hidden !important;
    overscroll-behavior:none;
    scrollbar-width:none;
    padding:3px 10px 2px;
  }
  .layout-sidebar .sidebar nav::-webkit-scrollbar { display:none; }
  .layout-sidebar .sidebar nav > a,
  .layout-sidebar .sidebar .sidebar-nav-btn-link {
    min-height:34px;
    margin:0 0 1px;
    padding:6px 10px;
    gap:10px;
    border-radius:9px;
    font-size:.84rem;
    line-height:1.05;
  }
  .layout-sidebar .sidebar nav > a > svg,
  .layout-sidebar .sidebar .sidebar-nav-btn-link > svg {
    width:17px;
    height:17px;
    flex:0 0 17px;
  }
  .layout-sidebar .sidebar-divider { margin:6px 12px 4px; }
  .layout-sidebar .sidebar-section-label {
    padding:4px 13px 3px;
    font-size:.62rem;
    line-height:1;
  }
  .layout-sidebar .sidebar .user-box {
    flex:0 0 auto;
    padding:7px 10px 9px;
  }
  .layout-sidebar .user-box-meta {
    padding:0 2px 5px;
    gap:0;
    font-size:.74rem;
    line-height:1.2;
  }
  .layout-sidebar .user-box-kicker { font-size:.61rem; }
  .layout-sidebar .sidebar .user-box-actions {
    display:grid;
    grid-template-columns:repeat(3,36px);
    justify-content:start;
    gap:6px;
  }
  .layout-sidebar .sidebar .user-box-actions .user-box-btn {
    width:36px;
    min-width:36px;
    height:36px;
    min-height:36px;
    padding:0;
    border-radius:9px;
  }
  .layout-sidebar .sidebar .user-box-actions .user-box-btn .nav-label { display:none !important; }
  .layout-sidebar .main { height:100dvh; overflow-y:auto; }
  .layout-sidebar .sidebar.collapsed .sidebar-top { justify-content:center; padding-left:8px; padding-right:8px; }
}

@media (min-width:901px) and (max-height:760px) {
  .layout-sidebar .sidebar nav > a,
  .layout-sidebar .sidebar .sidebar-nav-btn-link { min-height:31px; padding-top:4px; padding-bottom:4px; font-size:.80rem; }
  .layout-sidebar .sidebar .sidebar-top { flex-basis:45px; min-height:45px; }
  .layout-sidebar .sidebar-section-label { padding-top:2px; }
  .layout-sidebar .sidebar-divider { margin-top:3px; margin-bottom:3px; }
  .layout-sidebar .user-box-meta { display:none; }
  .layout-sidebar .sidebar .user-box { padding-top:6px; }
}

/* Kompakte Taxibestellung: weniger Höhe, klare Zweierspalten. */
#bestell-overlay .overlay-panel {
  width:min(860px,calc(100vw - 42px));
  max-height:calc(100dvh - 30px);
  padding:18px 20px;
}
#bestell-overlay .overlay-head { margin-bottom:10px; }
#bestell-overlay .overlay-head h2 { font-size:1.45rem; }
.bestellform-compact {
  padding:15px 16px;
  margin:0;
}
.bestellform-compact label { margin-bottom:8px; }
.bestellform-compact input,
.bestellform-compact select,
.bestellform-compact textarea { margin-top:3px; }
.bestellform-compact input,
.bestellform-compact select { min-height:40px; padding:8px 10px; }
.bestellform-compact textarea { min-height:62px; max-height:120px; padding:9px 10px; }
.bestell-grid { display:grid; gap:10px 14px; }
.bestell-grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.bestell-grid > label { margin:0; }
.bestell-address-field { margin-bottom:8px; }
.bestell-address-field > label { margin:0 0 3px; }
.bestell-address-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
}
.bestell-address-row > input { margin:0; min-width:0; }
.bestell-address-row .inline-toggles {
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  align-items:center;
}
.bestell-address-row .icon-toggle-btn {
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:0;
  padding:7px 11px;
  white-space:nowrap;
  border-radius:9px;
}
.bestellform-compact .bestellform-actions { margin-top:10px; gap:7px; }
.bestellform-compact .bestellform-actions .btn { min-height:38px; padding:7px 10px !important; font-size:.82rem !important; }
.bestellform-compact > .muted { margin:8px 0 0 !important; }

/* Ersatzverkehr: Toolbar über der Linie, Stunden rechts und immer innerhalb der Karte. */
.ev-overlay-panel,
#bestell-overlay .ev-overlay-panel,
#ev-overlay .overlay-panel { width:min(1060px,calc(100vw - 42px)); }
#evform { padding:16px; margin:0; }
#evform > .row { gap:12px; }
#evform > .row label { margin-bottom:8px; }
.linie-block {
  position:relative;
  overflow:hidden !important;
  padding:14px 15px 15px;
  margin-top:12px;
  background:color-mix(in srgb,var(--bg) 68%,var(--card-bg)) !important;
}
.ev-line-toolbar {
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 0 8px;
}
.ev-line-toolbar .btn { position:static !important; margin:0 !important; }
.ev-line-head {
  display:grid !important;
  grid-template-columns:minmax(230px,.85fr) minmax(0,1.6fr) !important;
  align-items:start !important;
  gap:14px !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 0 12px !important;
}
.ev-line-select,
.ev-line-select label { min-width:0; }
.ev-line-select select { min-height:40px; margin-top:4px; }
.ev-basisstunden-field {
  display:block !important;
  min-width:0;
  width:100%;
}
.ev-basisstunden-label { min-height:18px; margin:0 0 4px; }
.ev-basisstunden-field > .basisstunde-hinzufuegen-btn { position:static !important; inset:auto !important; }
.basisstunden-list {
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:7px !important;
  width:100%;
  min-width:0;
  min-height:40px !important;
  margin:0 !important;
  padding:0 !important;
  align-items:start !important;
}
.basisstunde-item {
  display:grid;
  grid-template-columns:minmax(45px,1fr) auto 28px;
  align-items:center;
  width:100%;
  min-width:0;
  min-height:40px !important;
  overflow:hidden;
}
.basisstunde-item input { width:100%; min-width:0; height:38px; }
.basisstunde-entfernen { width:28px; height:38px; }
.ev-line-remove { position:static !important; inset:auto !important; }
.halte-tabelle { table-layout:fixed; }
.halte-tabelle input { min-width:0; }
#evform textarea { min-height:70px; }

/* Menüeinstellungen: Sichtbarkeit als klare Icon-Aktion. */
.menu-visibility-btn { color:var(--sidebar-bg); border-color:color-mix(in srgb,var(--sidebar-bg) 40%,var(--border)); }
.menu-visibility-btn.is-hidden { opacity:.48; background:var(--surface-soft); }

/* Datenschutz: manuelle Aktion kompakt und verständlich. */
.privacy-manual-card { border-left:4px solid var(--sidebar-bg); }
.privacy-manual-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) 185px auto;
  gap:16px;
  align-items:end;
}
.privacy-manual-row h3 { margin:0 0 5px; }
.privacy-manual-row p { margin:0; max-width:820px; }
.privacy-manual-row label { margin:0; }
.privacy-manual-row label span { display:flex; align-items:center; gap:7px; margin-top:4px; }
.privacy-manual-row label input { width:88px; margin:0; }

/* Statistik: Module als klar getrennte Bereiche. */
.stats-module-section {
  margin:22px 0 30px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:16px;
  background:color-mix(in srgb,var(--card-bg) 92%,var(--bg));
}
.stats-module-head {
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
}
.stats-module-head h2 { margin:0 0 2px; }
.stats-module-head p { margin:0; color:var(--muted); font-size:.85rem; }
.stats-module-icon {
  width:46px; height:46px; display:grid; place-items:center; border-radius:12px;
  background:color-mix(in srgb,var(--sidebar-bg) 10%,var(--card-bg)); color:var(--sidebar-bg);
}
.stats-kpi-grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.stats-two-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:14px 0; }
.stats-table-card { margin:0; min-width:0; padding:16px; }
.stats-table-card h3 { margin:0 0 10px; }
.stats-budget-list { display:grid; gap:10px; }
.stats-budget-row { display:grid; grid-template-columns:minmax(220px,.55fr) 1fr; gap:14px; align-items:center; }
.stats-budget-row > div:first-child { display:flex; flex-direction:column; gap:3px; }
.stats-budget-row span { color:var(--muted); font-size:.82rem; }

/* Taxianfragen: kompakte Dispatch-Karten. */
.webapp-dispatch-page { max-width:1180px; }
.webapp-dispatch-head.compact { margin-bottom:10px; }
.webapp-dispatch-stats.compact-stats { gap:7px; margin-bottom:10px; }
.webapp-dispatch-stats.compact-stats .webapp-stat { min-width:112px; padding:8px 12px; border-radius:10px; }
.webapp-dispatch-stats.compact-stats .webapp-stat strong { font-size:1rem; }
.webapp-dispatch-list.compact-list { gap:8px; }
.webapp-dispatch-card-compact { padding:12px 14px; margin:0; border-left-width:3px; }
.webapp-compact-main {
  display:grid;
  grid-template-columns:minmax(160px,.75fr) minmax(280px,1.6fr) minmax(130px,.65fr);
  gap:12px;
  align-items:center;
}
.webapp-compact-person,
.webapp-compact-route,
.webapp-compact-reason { min-width:0; display:flex; flex-direction:column; gap:3px; }
.webapp-compact-main .label { color:var(--muted); font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.webapp-compact-person small,
.webapp-compact-route small { color:var(--muted); font-size:.73rem; }
.webapp-compact-route strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.webapp-dispatch-details { margin-top:8px; border-top:1px solid var(--border); padding-top:7px; }
.webapp-dispatch-details summary { cursor:pointer; color:var(--muted); font-size:.78rem; font-weight:700; }
.compact-details-grid { margin-top:8px; }
.compact-actions { margin-top:8px; padding-top:8px; border-top:1px solid var(--border); }
.compact-actions .btn { min-height:34px; }
.compact-actions .webapp-reject-form { display:grid; grid-template-columns:minmax(180px,1fr) auto; gap:7px; flex:1; }
.compact-actions .webapp-reject-form input { margin:0; min-height:34px; padding:6px 9px; }

/* Desktop-Dashboard: Listen in Frames bleiben übersichtlich. */
.widget .data-frame,
.card .data-frame { border-radius:10px; }

@media (max-width:900px) {
  .brand-wordmark-image { height:24px; max-width:112px; }
  .bestell-grid-2 { grid-template-columns:1fr; }
  .bestell-address-row { grid-template-columns:1fr; }
  .bestell-address-row .inline-toggles { justify-content:flex-start; }
  #bestell-overlay .overlay-panel,
  #ev-overlay .overlay-panel { width:100%; }
  .ev-line-head { grid-template-columns:1fr !important; }
  .basisstunden-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .privacy-manual-row { grid-template-columns:1fr; align-items:stretch; }
  .privacy-manual-row .btn { justify-self:start; }
  .stats-kpi-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats-two-grid { grid-template-columns:1fr; }
  .webapp-compact-main { grid-template-columns:1fr 1.35fr; }
  .webapp-compact-reason { grid-column:1/-1; }
}

@media (max-width:620px) {
  #bestell-overlay .overlay-panel,
  #ev-overlay .overlay-panel { padding:12px 10px; }
  .bestellform-compact,#evform { padding:12px 10px; }
  .bestell-address-row .inline-toggles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bestell-address-row .icon-toggle-btn { width:100%; }
  .bestellform-compact .bestellform-actions { grid-template-columns:1fr; }
  .basisstunden-list { grid-template-columns:1fr; }
  .ev-line-toolbar { align-items:stretch; }
  .ev-line-toolbar .btn { flex:1; }
  .halte-tabelle { display:block; overflow-x:auto; }
  .stats-kpi-grid-4,.stats-kpi-grid { grid-template-columns:1fr; }
  .stats-module-section { padding:12px; }
  .stats-module-head { grid-template-columns:40px 1fr; }
  .stats-module-head .badge { grid-column:2; justify-self:start; }
  .stats-budget-row { grid-template-columns:1fr; gap:7px; }
  .webapp-compact-main { grid-template-columns:1fr; }
  .webapp-compact-reason { grid-column:auto; }
  .compact-actions { flex-direction:column; align-items:stretch; }
  .compact-actions .webapp-reject-form { grid-template-columns:1fr; }
}
/* Farbige Wortmarke bleibt auf der dunklen Seitenleiste gut lesbar. */
.brand-product-lockup .brand-wordmark-box {
  background:#fff;
  border:1px solid rgba(15,36,55,.12);
  border-radius:9px;
  padding:4px 7px;
  box-shadow:0 1px 4px rgba(0,0,0,.10);
}

/* ============================================================
   DispoGrid v35.8.1 – Auftragsdetails, EV-Stundenpicker, Branding
   ============================================================ */

/* Hauptbuttons funktionieren auch auf Login-/2FA-Seiten, auf denen --sidebar-bg
   nicht serverseitig gesetzt wird. */
.btn { background:var(--sidebar-bg, #10202d); color:#fff; }
.btn.secondary {
  background:color-mix(in srgb,var(--sidebar-bg, #10202d) 8%,var(--card-bg,#fff));
  color:var(--sidebar-bg, #10202d);
  border-color:color-mix(in srgb,var(--sidebar-bg, #10202d) 55%,var(--border));
}
.btn.secondary:hover { color:var(--sidebar-bg, #10202d); border-color:var(--sidebar-bg, #10202d); }
.login-card .btn { background:#10202d; color:#fff; border-color:#10202d; opacity:1; }
.login-card .btn:hover { background:#173247; color:#fff; }
.login-card .btn:disabled { background:#aab5bf; color:#fff; }

/* Branding: links Icon + transparente Wortmarke, oben ausschließlich das Icon. */
.brand-product-lockup .brand-wordmark-box {
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  box-shadow:none !important;
}
.brand-product-lockup .brand-wordmark-image {
  max-width:118px;
  height:27px;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.16));
}
.brand-product-lockup .brand-mark-box { background:transparent !important; border:0 !important; box-shadow:none !important; }
.brand-topbar-mark-only { flex:0 0 auto; width:48px; justify-content:center; }
.brand-topbar-mark-only .brand-mark-box { width:42px; height:42px; flex-basis:42px; }
.brand-topbar-mark-only .brand-mark-image { width:40px; height:40px; }

/* Ersatzverkehr kompakter: 2x2-Kopffelder, fester 24-Stunden-Picker und schmalere Haltefelder. */
.ev-overlay-panel,
#bestell-overlay .ev-overlay-panel,
#ev-overlay .overlay-panel { width:min(960px,calc(100vw - 38px)); }
#evform { padding:14px 15px; }
.ev-form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 14px;
  margin-bottom:4px;
}
.ev-form-grid label { margin:0; }
.ev-form-grid input,
.ev-form-grid select { min-height:40px; }
.linie-block { padding:12px 14px 14px; overflow:hidden !important; }
.ev-line-toolbar { justify-content:space-between; margin-bottom:9px; }
.ev-line-toolbar-title { color:var(--muted); font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.ev-line-head {
  grid-template-columns:minmax(225px,.75fr) minmax(390px,1.25fr) !important;
  gap:14px !important;
  align-items:start !important;
  margin-bottom:12px !important;
}
.ev-line-select select { width:100%; min-width:0; }
.ev-basisstunden-field { min-width:0; }
.ev-basisstunden-label { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px; margin-bottom:5px; }
.basisstunden-picker {
  display:grid;
  grid-template-columns:repeat(8,42px);
  gap:5px;
  align-items:center;
  justify-content:start;
  min-height:42px;
}
.basisstunde-choice { margin:0; width:42px; height:34px; position:relative; }
.basisstunde-choice input {
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:1px;
  height:1px;
}
.basisstunde-choice span {
  display:grid;
  place-items:center;
  width:42px;
  height:34px;
  border:1px solid color-mix(in srgb,var(--sidebar-bg,#10202d) 25%,var(--border));
  border-radius:8px;
  background:var(--card-bg);
  color:var(--text);
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
  transition:background .12s ease,color .12s ease,border-color .12s ease,transform .12s ease;
}
.basisstunde-choice span:hover { border-color:var(--sidebar-bg,#10202d); transform:translateY(-1px); }
.basisstunde-choice input:checked + span {
  background:var(--sidebar-bg,#10202d);
  border-color:var(--sidebar-bg,#10202d);
  color:#fff;
  box-shadow:0 2px 7px rgba(15,32,45,.18);
}
.basisstunde-choice input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.halte-tabelle { width:100%; table-layout:fixed; }
.halte-tabelle .halt-col-name { width:55%; }
.halte-tabelle .halt-col-minute { width:16%; }
.halte-tabelle .halt-col-actions { width:150px; }
.halte-tabelle th,.halte-tabelle td { padding-left:8px; padding-right:8px; }
.halte-tabelle td input { width:100%; min-width:0; }
.halte-tabelle .halt-actions { white-space:nowrap; text-align:right; }
.halte-tabelle .halt-actions .icon-action-btn { width:34px; height:34px; padding:0; margin-left:3px; }

/* Auftragsnummern sind bewusst als Detail-Trigger erkennbar. */
.order-detail-link {
  color:var(--primary);
  font-weight:750;
  text-decoration:none;
  border-bottom:1px dashed color-mix(in srgb,var(--primary) 45%,transparent);
}
.order-detail-link:hover { text-decoration:none; border-bottom-style:solid; }
.auftrag-detail-panel { width:min(820px,calc(100vw - 36px)); max-height:calc(100dvh - 40px); overflow:auto; }
.auftrag-detail-panel .overlay-head { position:sticky; top:-1px; z-index:2; background:var(--card-bg); padding-bottom:10px; }
.auftrag-detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin:4px 0 16px; }
.auftrag-detail-head h2 { margin:2px 0 0; font-size:1.45rem; }
.auftrag-detail-kicker { color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-size:.69rem; font-weight:800; }
.auftrag-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.auftrag-detail-grid > div { border:1px solid var(--border); border-radius:10px; padding:9px 11px; background:color-mix(in srgb,var(--bg) 52%,var(--card-bg)); min-width:0; }
.auftrag-detail-grid .span-2 { grid-column:1/-1; }
.auftrag-detail-grid small,.auftrag-detail-comment small { display:block; color:var(--muted); font-size:.69rem; font-weight:800; text-transform:uppercase; letter-spacing:.035em; margin-bottom:3px; }
.auftrag-detail-grid strong { font-size:.9rem; overflow-wrap:anywhere; }
.auftrag-detail-comment { margin-top:10px; border:1px solid var(--border); border-radius:10px; padding:10px 12px; }
.auftrag-detail-comment p { margin:4px 0 0; }
.auftrag-detail-lines { display:grid; gap:9px; margin-top:11px; }
.auftrag-detail-line { border:1px solid var(--border); border-radius:11px; padding:10px 11px; }
.auftrag-detail-line-head { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:7px; }
.auftrag-detail-line-head span { color:var(--muted); font-size:.8rem; text-align:right; }
.auftrag-detail-actions { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
.auftrag-detail-actions form { margin:0; }
.pdf-delete-after-send { padding:10px 12px; margin:8px 0 14px; border:1px solid var(--border); border-radius:10px; background:color-mix(in srgb,var(--bg) 62%,var(--card-bg)); }
.pdf-delete-after-send label { margin:0; color:var(--text); }

/* Statistik optisch noch klarer trennen, ohne deaktivierte Module zu vermischen. */
.stats-module-taxi { border-top:4px solid var(--sidebar-bg,#10202d); }
.stats-module-ev { border-top:4px solid var(--accent); }
.stats-module-section > .stats-module-head { padding-bottom:10px; border-bottom:1px solid var(--border); }

@media (max-width:900px) {
  .ev-form-grid { grid-template-columns:1fr; }
  .ev-line-head { grid-template-columns:1fr !important; }
  .basisstunden-picker { grid-template-columns:repeat(6,42px); }
  .halte-tabelle .halt-col-name { width:52%; }
  .auftrag-detail-grid { grid-template-columns:1fr; }
  .auftrag-detail-grid .span-2 { grid-column:auto; }
}
@media (max-width:620px) {
  .basisstunden-picker { grid-template-columns:repeat(4,42px); }
  .halte-tabelle { display:table; overflow:visible; }
  .halte-tabelle .halt-col-name { width:auto; }
  .halte-tabelle .halt-col-minute { width:86px; }
  .halte-tabelle .halt-col-actions { width:118px; }
  .halte-tabelle .halt-actions .icon-action-btn { width:30px; height:32px; }
  .kosten-km-row { grid-template-columns:1fr; }
  .auftrag-detail-actions { flex-direction:column; }
  .auftrag-detail-actions .btn,.auftrag-detail-actions form { width:100%; }
  .auftrag-detail-actions form .btn { width:100%; }
}

/* v35.8.1: Aktionsbuttons greifen denselben dunklen Blauton wie die Sidebar auf,
   mit einer leichten Tiefe statt eines flachen Schwarz-Eindrucks. */
.btn:not(.secondary):not(.danger):not(.ghost):not(.abbestellen-btn) {
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--sidebar-bg,#10202d) 86%,#ffffff) 0%,
    var(--sidebar-bg,#10202d) 100%);
  border-color:color-mix(in srgb,var(--sidebar-bg,#10202d) 82%,#ffffff);
  color:#fff;
}
.btn:not(.secondary):not(.danger):not(.ghost):not(.abbestellen-btn):hover {
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--sidebar-bg,#10202d) 79%,#ffffff) 0%,
    color-mix(in srgb,var(--sidebar-bg,#10202d) 92%,#ffffff) 100%);
  color:#fff;
}
.login-card .btn:not(.secondary):not(.danger):not(.ghost):not(.abbestellen-btn) {
  background:linear-gradient(180deg,#29475d 0%,#10202d 100%);
  border-color:#29475d;
  color:#fff;
}
html[data-theme="dark"] .btn:not(.secondary):not(.danger):not(.ghost):not(.abbestellen-btn) {
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--sidebar-bg,#10202d) 78%,#ffffff) 0%,
    var(--sidebar-bg,#10202d) 100%);
  border-color:color-mix(in srgb,var(--sidebar-bg,#10202d) 68%,#ffffff);
  color:#fff !important;
}
html[data-theme="dark"] .btn:not(.secondary):not(.danger):not(.ghost):not(.abbestellen-btn) svg { color:#fff !important; }

/* ============================================================
   DispoGrid v35.8.2 – Statistik responsive + Abrechnung Labels
   ============================================================ */
/* Statistik-Tabellen haben nur wenige Spalten. Auf Notebookbreite sollen sie
   in den Karten mitwachsen statt durch die globale Mindestbreite seitlich zu
   scrollen. */
.statistik-page {
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
.statistik-page .stats-module-section,
.statistik-page .stats-two-grid,
.statistik-page .stats-table-card,
.statistik-page .data-frame {
  min-width:0;
  max-width:100%;
}
.statistik-page .data-frame {
  overflow-x:hidden;
  overflow-y:auto;
}
.statistik-page .data-frame > table {
  width:100%;
  min-width:0;
  table-layout:fixed;
}
.statistik-page .data-frame th,
.statistik-page .data-frame td {
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
}
.statistik-page .data-frame th:last-child,
.statistik-page .data-frame td:last-child {
  width:auto;
}

/* Bei schmaleren Notebooks werden die Statistik-Karten automatisch einspaltig,
   bevor Tabellen gequetscht oder horizontal scrollbar werden. */
@media (max-width:1180px) {
  .statistik-page .stats-two-grid { grid-template-columns:1fr; }
  .statistik-page .stats-kpi-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .statistik-page .stats-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .statistik-page .stats-filter-grid > div:last-child { grid-column:1/-1; }
}
@media (max-width:720px) {
  .statistik-page .stats-kpi-grid,
  .statistik-page .stats-kpi-grid-4,
  .statistik-page .stats-filter-grid { grid-template-columns:1fr; }
  .statistik-page .stats-filter-grid > div:last-child { grid-column:auto; }
  .statistik-page .stats-table-card { padding:12px; }
  .statistik-page .data-frame th,
  .statistik-page .data-frame td { padding-left:8px; padding-right:8px; font-size:.8rem; }
}


/* ============================================================
   DispoGrid v35.8.3 – 14"-Feinschliff, 2FA, EV-Formular
   ============================================================ */

/* Login/2FA: der primäre Submit darf nie durch Theme-/Browser-Kombinationen
   optisch verschwinden. */
.login-body .login-card form .btn[type="submit"] {
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:42px;
  visibility:visible !important;
  opacity:1 !important;
  background:linear-gradient(180deg,#29475d 0%,#10202d 100%) !important;
  border:1px solid #29475d !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff;
}
.login-body .login-card form .btn[type="submit"]:hover {
  background:linear-gradient(180deg,#355b75 0%,#173247 100%) !important;
  color:#fff !important;
}

/* Primäraktionen greifen sichtbar den konfigurierten Sidebar-Ton auf, wirken
   aber etwas hochwertiger/heller als ein flaches Schwarz. */
body:not(.login-body) .btn:not(.secondary):not(.danger):not(.ghost):not(.abbestellen-btn) {
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--sidebar-bg,#10202d) 82%,#ffffff) 0%,
    color-mix(in srgb,var(--sidebar-bg,#10202d) 94%,#ffffff) 100%) !important;
  border-color:color-mix(in srgb,var(--sidebar-bg,#10202d) 76%,#ffffff) !important;
  color:#fff !important;
}

/* Ersatzverkehr auf 14"-Notebooks: bewusst etwas schmalerer Dialog. */
#ev-overlay .overlay-panel,
.ev-overlay-panel {
  width:min(900px,calc(100vw - 34px)) !important;
  max-height:calc(100dvh - 28px);
}
#evform { padding:13px 14px; }
.ev-form-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 12px;
}
.ev-form-grid input,
.ev-form-grid select { min-height:38px; }

/* Linie links, Stunden rechts. Der Stundenbereich hat eine feste Desktopbreite,
   damit er weder wächst noch aus dem Kartenrahmen drückt. */
.ev-line-head {
  grid-template-columns:minmax(220px,1fr) 372px !important;
  gap:12px !important;
}
.ev-basisstunden-field {
  width:372px !important;
  max-width:100%;
}
.basisstunden-picker {
  grid-template-columns:repeat(8,42px) !important;
  grid-auto-rows:34px;
  width:371px;
  max-width:100%;
  gap:5px !important;
}
.basisstunde-choice,
.basisstunde-choice span {
  width:42px !important;
  height:34px !important;
  min-width:42px;
  max-width:42px;
}

/* Haltestellenbereich: Namensfeld deutlich kürzer; Minute und alle drei
   Aktionsbuttons bleiben sicher innerhalb des Frames. */
.halte-tabelle .halt-col-name { width:50% !important; }
.halte-tabelle .halt-col-minute { width:17% !important; }
.halte-tabelle .halt-col-actions { width:33% !important; }
.halte-tabelle .halt-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  white-space:nowrap;
}
.halte-tabelle .halt-actions .icon-action-btn {
  flex:0 0 34px;
  margin-left:0 !important;
}

/* Auftragsdetail-Links bleiben auch bei langen Nummern sauber im Layout. */
.order-detail-link { overflow-wrap:anywhere; }

@media (max-width:980px) {
  #ev-overlay .overlay-panel,
  .ev-overlay-panel { width:min(860px,calc(100vw - 24px)) !important; }
  .ev-line-head { grid-template-columns:minmax(200px,1fr) 330px !important; }
  .ev-basisstunden-field { width:330px !important; }
  .basisstunden-picker { grid-template-columns:repeat(6,42px) !important; width:277px; }
}
@media (max-width:760px) {
  .ev-form-grid { grid-template-columns:1fr; }
  .ev-line-head { grid-template-columns:1fr !important; }
  .ev-basisstunden-field { width:100% !important; }
  .basisstunden-picker { grid-template-columns:repeat(6,42px) !important; width:auto; }
  .halte-tabelle .halt-col-name { width:auto !important; }
  .halte-tabelle .halt-col-minute { width:86px !important; }
  .halte-tabelle .halt-col-actions { width:118px !important; }
  .halte-tabelle .halt-actions { gap:2px; }
  .halte-tabelle .halt-actions .icon-action-btn { flex-basis:30px; width:30px; }
}
@media (max-width:430px) {
  .basisstunden-picker { grid-template-columns:repeat(4,42px) !important; }
}

/* ============================================================
   DispoGrid v35.8.5 – Detailframes, Tabellen & Notebook-Layout
   ============================================================ */

/* Auftragsdetails: ruhiger lesen und niemals seitlich aus dem Frame laufen. */
.auftrag-detail-panel {
  width:min(820px, calc(100vw - 32px));
  max-width:calc(100vw - 32px);
  overflow-x:hidden;
  overflow-y:auto;
}
.auftrag-detail-head { min-width:0; }
.auftrag-detail-head > div { min-width:0; }
.auftrag-detail-head h2 {
  font-weight:500;
  overflow-wrap:anywhere;
}
.auftrag-detail-grid strong,
.auftrag-detail-comment p {
  font-weight:400;
}
.auftrag-detail-line {
  min-width:0;
  max-width:100%;
  overflow:hidden;
}
.auftrag-detail-line-head {
  min-width:0;
  flex-wrap:wrap;
  align-items:flex-start;
}
.auftrag-detail-line-head strong { font-weight:500; min-width:0; overflow-wrap:anywhere; }
.auftrag-detail-line-head span { max-width:100%; overflow-wrap:anywhere; }
.auftrag-detail-panel .data-frame {
  width:100%;
  max-width:100%;
  max-height:none;
  overflow:visible;
}
.auftrag-detail-panel .data-frame > table {
  width:100%;
  min-width:0 !important;
  table-layout:fixed;
}
.auftrag-detail-panel .data-frame th,
.auftrag-detail-panel .data-frame td {
  white-space:normal;
  overflow-wrap:anywhere;
}

/* Statistik: keine eigene Scrollfläche innerhalb der Karten. */
.statistik-page .stats-module-section,
.statistik-page .stats-table-card,
.statistik-page .data-frame {
  overflow:visible !important;
  max-height:none !important;
}
.statistik-page .data-frame > table {
  min-width:0 !important;
  width:100%;
  table-layout:fixed;
}
.statistik-page .stats-module-head { align-items:center; }

/* Nutzerverwaltung: auf Notebookbreite ohne horizontale/vertikale Innen-Scrollbars. */
.user-table-card .table-scroll,
.user-table-card .data-frame {
  width:100%;
  max-width:100%;
  max-height:none !important;
  overflow:visible !important;
}
.user-table-card .user-admin-table {
  width:100%;
  min-width:0 !important;
  table-layout:fixed;
}
.user-table-card .user-admin-table th,
.user-table-card .user-admin-table td {
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
  padding-left:9px;
  padding-right:9px;
}
.user-table-card .user-admin-table input,
.user-table-card .user-admin-table select {
  width:100%;
  min-width:0 !important;
  max-width:100%;
}
.user-table-card .user-row-actions {
  white-space:normal;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:5px;
}
.user-table-card .user-row-actions .inline-form { margin:0; }
.user-table-card .user-row-actions .btn { min-height:34px; padding:6px 8px; }

/* Menüreihenfolge und zentrale Listeneinstellungen brauchen ebenfalls keine
   künstliche Scrollfläche. */
.menu-order-frame,
.visible-columns-grid .data-frame {
  max-height:none !important;
  overflow:visible !important;
}
.menu-order-frame > table { min-width:0 !important; width:100%; }
.menu-order-actions { display:flex; justify-content:flex-end; align-items:center; gap:5px; flex-wrap:wrap; }
.menu-order-actions .inline-form { margin:0; }

/* View-Umschalter in der Abrechnung kompakt halten. */
.abrechnung-view-switch { gap:7px; }

@media (max-width:1180px) {
  .user-table-card .user-admin-table { font-size:.84rem; }
  .user-table-card .user-admin-table th,
  .user-table-card .user-admin-table td { padding-left:6px; padding-right:6px; }
  .user-table-card .user-row-actions .btn { font-size:.74rem; }
}

@media (max-width:960px) {
  .auftrag-detail-panel { width:min(760px, calc(100vw - 20px)); max-width:calc(100vw - 20px); }
  .auftrag-detail-line-head span { width:100%; text-align:left; }

  /* Ab dieser Breite ist eine Kartenansicht lesbarer als sieben enge Spalten. */
  .user-table-card .user-admin-table,
  .user-table-card .user-admin-table thead,
  .user-table-card .user-admin-table tbody,
  .user-table-card .user-admin-table tr,
  .user-table-card .user-admin-table td { display:block; width:100%; min-width:0; }
  .user-table-card .user-admin-table thead { display:none; }
  .user-table-card .user-admin-table tr { border:1px solid var(--border); border-radius:12px; padding:10px 12px; margin:0 0 12px; background:var(--surface-soft,var(--card-bg)); }
  .user-table-card .user-admin-table td { display:grid; grid-template-columns:145px minmax(0,1fr); gap:10px; align-items:center; border:0; padding:7px 0; }
  .user-table-card .user-admin-table td::before { content:attr(data-label); color:var(--muted); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
  .user-table-card .user-row-actions { display:flex; justify-content:flex-start; padding-top:10px; border-top:1px solid var(--border); margin-top:4px; }
  .user-table-card .user-row-actions::before { width:100%; }
}

@media (max-width:520px) {
  .auftrag-detail-panel { width:calc(100vw - 12px); max-width:calc(100vw - 12px); }
  .auftrag-detail-head { flex-direction:column; }
  .user-table-card .user-admin-table td { grid-template-columns:1fr; gap:4px; }
}

/* Auftragswerte bewusst normalgewichtig – Überschriften/Labels bleiben die visuelle Führung. */
.auftrag-detail-head h2,
.auftrag-detail-line-head strong { font-weight:400; }
.auftrag-detail-dialog-title { font-weight:400; }

/* ============================================================
   DispoGrid v35.8.6 – responsive Dialoge und kompakte Aktionen
   ============================================================ */

/* Bestätigungen aus den Auftragsdetails müssen immer vor dem Detaildialog liegen. */
#auftrag-detail-overlay { z-index:200; }
#confirm-modal { z-index:240; }

/* Der große Ersatzverkehrsrahmen folgt der verfügbaren Fensterbreite. */
#bestell-overlay .ev-overlay-panel,
#ev-overlay .overlay-panel,
.ev-overlay-panel {
  width:min(1180px,calc(100vw - 32px)) !important;
  max-width:calc(100vw - 32px) !important;
  max-height:calc(100dvh - 24px);
}
#evform,
#evform .linie-block,
#evform .halte-tabelle { width:100%; max-width:100%; }
#evform .ev-line-head {
  grid-template-columns:minmax(240px,.9fr) minmax(420px,1.1fr) !important;
}
#evform .ev-basisstunden-field,
#evform .basisstunden-picker { width:100% !important; max-width:none !important; }
#evform .basisstunden-picker { grid-template-columns:repeat(8,minmax(38px,1fr)) !important; }
#evform .basisstunde-choice,
#evform .basisstunde-choice span {
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
}

.dashboard-widget-heading {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:4px;
}
.dashboard-widget-heading svg { flex:0 0 auto; }
.dashboard-widget-note { margin:0 0 12px; color:var(--muted); font-size:.82rem; }

.bestellform-actions.two-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }

.abrechnung-filter-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin-top:2px;
}
.abrechnung-filter-actions .btn {
  flex:0 0 auto;
  width:auto;
  min-height:38px;
  padding:8px 14px !important;
}
.abrechnung-open-option {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  margin:0 4px 0 0;
  padding:7px 11px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--card-bg);
  color:var(--muted);
  cursor:pointer;
}
.abrechnung-open-option input { width:auto; min-height:0; margin:0; }

@media (max-width:900px) {
  #evform .ev-line-head { grid-template-columns:1fr !important; }
  #evform .basisstunden-picker { grid-template-columns:repeat(6,minmax(38px,1fr)) !important; }
}
@media (max-width:520px) {
  #bestell-overlay .ev-overlay-panel,
  #ev-overlay .overlay-panel,
  .ev-overlay-panel { width:calc(100vw - 12px) !important; max-width:calc(100vw - 12px) !important; }
  #evform .basisstunden-picker { grid-template-columns:repeat(4,minmax(38px,1fr)) !important; }
  .abrechnung-filter-actions .btn { flex:1 1 auto; }
}

/* ============================================================
   DispoGrid v35.8.9 – Auth-Hintergrund, Markenachse und Modultrennung
   ============================================================ */

/* Der Ersatzverkehr-Dialog bleibt auch mit mehreren Linien vollständig im
   sichtbaren Fenster; sein Inhalt scrollt innerhalb des größten Frames. */
#bestell-overlay {
  overflow:hidden;
  padding:12px 16px;
}
#bestell-overlay .ev-overlay-panel {
  height:auto;
  max-height:calc(100dvh - 24px) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
#bestell-overlay .ev-overlay-panel > .overlay-head {
  position:sticky;
  top:-18px;
  z-index:12;
  padding:18px 0 10px;
  background:var(--bg);
}

/* Eindeutige WebApp-Ortsauswahl: DS100 als Hauptzeile, Adresse klein darunter. */
.webapp-ort-autocomplete { position:relative; width:100%; }
.webapp-ort-autocomplete > input { width:100%; }
.webapp-ort-suggestions {
  display:none;
  position:absolute;
  z-index:80;
  top:calc(100% + 5px);
  left:0;
  right:0;
  max-height:min(330px,42dvh);
  overflow-y:auto;
  border:1px solid #cbd7e3;
  border-radius:14px;
  background:#fff;
  box-shadow:0 14px 34px rgba(10,30,48,.22);
}
.webapp-ort-suggestions.open { display:block; }
.webapp-ort-suggestion {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  width:100%;
  margin:0;
  padding:11px 14px;
  border:0;
  border-bottom:1px solid #e2e8ef;
  border-radius:0;
  background:#fff;
  color:#122235;
  text-align:left;
  cursor:pointer;
}
.webapp-ort-suggestion:last-child { border-bottom:0; }
.webapp-ort-suggestion:hover,
.webapp-ort-suggestion.active { background:#edf5fb; }
.webapp-ort-suggestion strong { font-size:1rem; line-height:1.2; }
.webapp-ort-suggestion small { color:#637487; font-size:.78rem; line-height:1.25; }

/* ============================================================
   DispoGrid v35.8.18 – klare Navigation, Rückwege und Darkmode
   ============================================================ */
.settings-head-actions { display:flex; align-items:center; gap:9px; }
.settings-back-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:40px; padding:8px 13px; border:1px solid var(--border);
  border-radius:11px; background:var(--card-bg); color:var(--text);
  font-size:.82rem; font-weight:750; text-decoration:none;
  box-shadow:0 4px 14px rgba(21,42,62,.055); transition:.16s ease;
}
.settings-back-btn:hover { border-color:color-mix(in srgb,var(--primary) 55%,var(--border)); color:var(--primary); transform:translateY(-1px); text-decoration:none; }
.settings-back-btn > span:first-child { font-size:1.1rem; line-height:1; }

.layout-sidebar .sidebar-divider { height:1px; margin:13px 16px 8px; background:color-mix(in srgb,var(--sidebar-text) 20%,transparent); }
.layout-sidebar .sidebar-section-label {
  display:flex; align-items:center; gap:8px; padding:3px 18px 6px;
  color:color-mix(in srgb,var(--sidebar-text) 70%,transparent);
  font-size:.64rem; font-weight:850; letter-spacing:.105em;
}
.layout-sidebar .sidebar-section-label::after { content:""; flex:1; height:1px; background:color-mix(in srgb,var(--sidebar-text) 15%,transparent); }
.layout-sidebar .sidebar.collapsed .sidebar-divider { margin:12px 9px 7px; }

html[data-theme="dark"] .login-card { background:var(--card-bg); color:#f4f8fc; border:1px solid var(--border-strong); }
html[data-theme="dark"] .login-card input { background:var(--field-bg); color:#f4f8fc; border-color:var(--border-strong); }
html[data-theme="dark"] .login-card a { color:#9dd8ff; }

html[data-theme="dark"] .webapp-body { background:var(--bg); color:#eff6fc; }
html[data-theme="dark"] .webapp-shell { background:var(--card-bg); box-shadow:0 0 44px rgba(0,0,0,.32); }
html[data-theme="dark"] .webapp-header { background:linear-gradient(135deg,#102a42,#163f5c); }
html[data-theme="dark"] .webapp-eyebrow,
html[data-theme="dark"] .webapp-request-head span,
html[data-theme="dark"] .webapp-trip-route span,
html[data-theme="dark"] .webapp-trip-summary span { color:#9eb1c3; }
html[data-theme="dark"] .webapp-trip-card,
html[data-theme="dark"] .webapp-request-card,
html[data-theme="dark"] .webapp-card { background:var(--card-bg); border-color:#3d566c; box-shadow:0 6px 20px rgba(0,0,0,.16); }
html[data-theme="dark"] .webapp-trip-time,
html[data-theme="dark"] .webapp-trip-summary > div { background:var(--field-bg); }
html[data-theme="dark"] .webapp-trip-time strong { color:#8ed4ff; }
html[data-theme="dark"] .webapp-trip-time span { color:#9eb1c3; }
html[data-theme="dark"] .webapp-request-route { color:#d4e1eb; }
html[data-theme="dark"] .webapp-empty { background:var(--card-bg); border-color:var(--border-strong); color:#b9cad8; }
html[data-theme="dark"] .webapp-empty strong { color:#f4f8fc; }
html[data-theme="dark"] .webapp-close { background:var(--surface-soft); color:#e9f2f8; }
html[data-theme="dark"] .webapp-form label { color:#cfdae4; }
html[data-theme="dark"] .webapp-form input,
html[data-theme="dark"] .webapp-form select,
html[data-theme="dark"] .webapp-form textarea { background:var(--field-bg); color:#f5f9fc; border-color:var(--border-strong); }
html[data-theme="dark"] .webapp-form-section { border-color:var(--border-strong); }
html[data-theme="dark"] .webapp-check { background:var(--surface-soft); border-color:var(--border-strong); }
html[data-theme="dark"] .webapp-secondary-action { background:var(--card-bg); border-color:var(--border-strong); color:#9bd7ff; }
html[data-theme="dark"] .webapp-secondary-action:hover { background:var(--surface-soft); }
html[data-theme="dark"] .webapp-person-badge { background:#183c32; color:#8fe0bd; }
html[data-theme="dark"] .webapp-count,
html[data-theme="dark"] .webapp-home-count { background:#203d58; color:#9bd7ff; }
html[data-theme="dark"] .webapp-alert.success { background:#19392f; border-color:#32634f; color:#9de1c0; }
html[data-theme="dark"] .webapp-alert.error { background:#41262a; border-color:#704148; color:#ffb2ad; }
html[data-theme="dark"] .webapp-alert.warning { background:#473a20; border-color:#705d2d; color:#f2d891; }
html[data-theme="dark"] .webapp-success-note { background:#19392f; color:#9de1c0; }
html[data-theme="dark"] .webapp-reject-note { background:#41262a; color:#ffb2ad; }
html[data-theme="dark"] .webapp-status.status-neu { background:#4a3b1e; color:#ffda8a; }
html[data-theme="dark"] .webapp-status.status-in_bearbeitung { background:#203b55; color:#aad9ff; }
html[data-theme="dark"] .webapp-status.status-genehmigt { background:#193c31; color:#97dfbd; }
html[data-theme="dark"] .webapp-status.status-abgelehnt { background:#48272c; color:#ffaaa5; }
html[data-theme="dark"] .webapp-ort-suggestions { background:var(--card-bg); border-color:var(--border-strong); box-shadow:0 14px 34px rgba(0,0,0,.4); }
html[data-theme="dark"] .webapp-ort-suggestion { background:var(--card-bg); color:#f2f7fb; border-color:var(--border-strong); }
html[data-theme="dark"] .webapp-ort-suggestion:hover,
html[data-theme="dark"] .webapp-ort-suggestion.active { background:var(--surface-soft); }
html[data-theme="dark"] .webapp-ort-suggestion small { color:#a9bac9; }

@media (max-width:680px) {
  .settings-head { align-items:flex-start; flex-direction:column; }
  .settings-back-btn { width:100%; }
}

@media (max-width:680px) {
  #bestell-overlay { padding:6px; }
  #bestell-overlay .ev-overlay-panel { max-height:calc(100dvh - 12px) !important; }
  #bestell-overlay .ev-overlay-panel > .overlay-head { top:-12px; padding-top:12px; }
  .webapp-ort-suggestions { max-height:min(290px,38dvh); }
}

/* Symbol und Wortmarke teilen sich eine identische vertikale Mittelachse. */
.sidebar-top { align-items:center !important; }
.brand-product-lockup { align-items:center !important; }
.brand-product-lockup .brand-mark-box,
.brand-product-lockup .brand-wordmark-box {
  height:40px;
  display:grid;
  place-items:center;
  line-height:0;
}
.brand-product-lockup .brand-mark-box {
  width:40px;
  flex:0 0 40px;
}
.brand-product-lockup .brand-mark-image {
  display:block;
  width:34px;
  height:34px;
  margin:0;
  object-fit:contain;
  object-position:center;
}
.brand-product-lockup .brand-wordmark-image {
  display:block;
  width:auto;
  height:26px;
  max-width:118px;
  margin:0;
  object-fit:contain;
  object-position:center;
}
.brand-sidebar { min-height:40px; }

@media (max-width:900px) {
  .brand-product-lockup .brand-mark-box,
  .brand-product-lockup .brand-wordmark-box { height:36px; }
  .brand-product-lockup .brand-mark-box { width:36px; flex-basis:36px; }
  .brand-product-lockup .brand-mark-image { width:31px; height:31px; }
  .brand-product-lockup .brand-wordmark-image { height:24px; max-width:112px; }
}


/* ============================================================
   DispoGrid v36 – Designsystem „Leitstand“
   ------------------------------------------------------------
   Letzte Ebene im Stylesheet: Sie definiert Farb-Tokens für Hell- und
   Dunkelmodus und vereinheitlicht Navigation, Buttons, Icons, Formulare,
   Tabellen, Status-Badges und Hinweise. Ältere Ebenen bleiben für Layout
   und Sonderfälle erhalten.

   Konfigurierbar (Einstellungen → Design):
   --brand  Markenfarbe (Buttons, aktive Navigation, Hervorhebungen)
   --bg     Seitenhintergrund im Hellmodus
   ============================================================ */
:root {
  --brand: #1d4a96;
  --bg: #f6f8fb;

  --primary: var(--brand);
  --on-primary: #ffffff;
  --primary-hover: color-mix(in srgb, var(--brand) 86%, #000);
  --accent: #2b8c9b;
  --card-bg: #ffffff;
  --surface-soft: #f1f4f8;
  --surface-hover: #f4f7fb;
  --text: #14223a;
  --muted: #5f6e84;
  --border: #e3e8ef;
  --border-strong: #cfd8e3;
  --field-bg: #ffffff;

  --side-bg: #ffffff;
  --side-text: #4a5970;
  --side-icon: #6b7a90;
  --side-hover: #f2f5f9;
  --side-active-bg: color-mix(in srgb, var(--brand) 9%, #ffffff);
  --side-active-fg: var(--brand);

  --tile-bg: #e8f3f4;
  --tile-fg: #21707c;
  --brand-tint: color-mix(in srgb, var(--brand) 8%, #ffffff);

  --danger: #c4362c;
  --danger-tint: #fdeeec;
  --danger-line: #f3c4be;
  --success: #17804a;
  --success-tint: #e7f6ed;
  --success-line: #b6e2c8;
  --warning: #8a5a00;
  --warning-tint: #fdf3dc;
  --warning-line: #efd59a;
  --info: var(--brand);
  --info-tint: color-mix(in srgb, var(--brand) 8%, #ffffff);
  --info-line: color-mix(in srgb, var(--brand) 22%, #ffffff);
  --neutral-tint: #edf0f4;

  --radius: 12px;
  --radius-control: 8px;
  --shadow-card: 0 1px 2px rgba(16, 30, 54, .04), 0 1px 1px rgba(16, 30, 54, .03);
  --shadow-pop: 0 12px 32px rgba(16, 30, 54, .14), 0 2px 6px rgba(16, 30, 54, .06);
  --shadow-soft: var(--shadow-card);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);

  /* Alte Variablen zeigen auf die neuen Tokens, damit ältere Regeln mitziehen. */
  --sidebar-bg: var(--primary);
  --sidebar-text: var(--side-text);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --primary: color-mix(in srgb, var(--brand) 45%, #8db4ff);
  --on-primary: #0b1220;
  --primary-hover: color-mix(in srgb, var(--primary) 84%, #ffffff);
  --accent: #3fb6c4;
  --bg: #0e1520;
  --card-bg: #151f2d;
  --surface-soft: #1a2636;
  --surface-hover: #1b2839;
  --text: #e6edf6;
  --muted: #93a3b9;
  --border: #223146;
  --border-strong: #2f4159;
  --field-bg: #0f1824;

  --side-bg: #0b121b;
  --side-text: #a8b7cb;
  --side-icon: #8394ab;
  --side-hover: #131d2a;
  --side-active-bg: color-mix(in srgb, var(--primary) 16%, #0b121b);
  --side-active-fg: color-mix(in srgb, var(--primary) 70%, #ffffff);

  --tile-bg: #16343b;
  --tile-fg: #6fd3de;
  --brand-tint: color-mix(in srgb, var(--primary) 13%, #151f2d);

  --danger: #ff8a80;
  --danger-tint: #3a1f22;
  --danger-line: #6a343a;
  --success: #6fd69a;
  --success-tint: #153325;
  --success-line: #285c43;
  --warning: #f3c56b;
  --warning-tint: #33290f;
  --warning-line: #5e4a1c;
  --info: color-mix(in srgb, var(--primary) 70%, #ffffff);
  --info-tint: color-mix(in srgb, var(--primary) 14%, #151f2d);
  --info-line: color-mix(in srgb, var(--primary) 32%, #151f2d);
  --neutral-tint: #212d3d;

  --shadow-card: none;
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, .45);
  --sidebar-bg: var(--primary);
}

/* ---------- Grundlagen ---------- */
html body { background: var(--bg); color: var(--text); font-feature-settings: "tnum" 1, "cv11" 1; }
html[data-theme="dark"] body,
html[data-theme="dark"] .main { background: var(--bg); color: var(--text); }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
.main h1, .main-topbar h1 { font-size: clamp(1.45rem, 1.1rem + 1vw, 1.75rem); font-weight: 700; letter-spacing: -.022em; line-height: 1.2; }
.main h2 { letter-spacing: -.015em; }
.main h3 { letter-spacing: -.01em; }
.muted { color: var(--muted); }

/* Icons: eine Strichstärke, saubere Ausrichtung im Text. */
svg.ico { flex-shrink: 0; vertical-align: -0.18em; }
.title-with-icon { display: flex; align-items: center; gap: 10px; }
.title-with-icon svg { color: var(--primary); }

/* Sichtbarer Tastaturfokus überall – ohne Fokusrahmen beim Klicken. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 6px;
}
:where(a, button):focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Karten & Flächen ---------- */
html body .card,
html body .settings-card,
html body .settings-overview-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
html body .overlay-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-pop);
}
html[data-theme="dark"] body .overlay-panel { background: var(--card-bg); border-color: var(--border-strong); }

/* ---------- Seitenleiste ---------- */
html body .sidebar,
html[data-theme="dark"] body .sidebar {
  background: var(--side-bg);
  color: var(--side-text);
  border-right: 1px solid var(--border);
  box-shadow: none;
}
@media (min-width:901px) {
  html body.layout-sidebar .sidebar { border-right-color: var(--border); box-shadow: none; }
}
html body .sidebar .sidebar-top { border-bottom-color: transparent; }

html body .sidebar .sidebar-toggle,
html body.layout-sidebar .sidebar .sidebar-toggle {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; min-width: 34px; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-control);
  color: var(--side-icon); box-shadow: none;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
html body .sidebar .sidebar-toggle:hover { background: var(--side-hover); color: var(--text); }

html body .sidebar nav a,
html body .sidebar .sidebar-nav-btn-link,
html body.layout-sidebar .sidebar nav > a,
html body.layout-sidebar .sidebar .sidebar-nav-btn-link {
  display: flex; align-items: center; gap: 10px;
  min-height: 36px; padding: 7px 10px; margin: 0 0 2px;
  border: 0; border-left: 0; border-radius: var(--radius-control);
  background: transparent;
  color: var(--side-text) !important;
  font-weight: 500; font-size: .875rem; line-height: 1.15;
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
html body .sidebar nav a svg,
html body .sidebar .sidebar-nav-btn-link svg { color: var(--side-icon); transition: color .12s ease; }
html body .sidebar nav a:hover,
html body .sidebar .sidebar-nav-btn-link:hover {
  background: var(--side-hover);
  color: var(--text) !important;
  font-weight: 500;
}
html body .sidebar nav a:hover svg,
html body .sidebar .sidebar-nav-btn-link:hover svg { color: var(--text); }
html body .sidebar nav a.active,
html body .sidebar .sidebar-nav-btn-link.active,
html[data-theme="dark"] body .sidebar nav a.active,
html[data-theme="dark"] body .sidebar .sidebar-nav-btn-link.active {
  background: var(--side-active-bg);
  color: var(--side-active-fg) !important;
  font-weight: 600;
}
html body .sidebar nav a.active svg,
html body .sidebar .sidebar-nav-btn-link.active svg { color: var(--side-active-fg); }
html[data-theme="dark"] body .sidebar nav a:hover,
html[data-theme="dark"] body .sidebar .sidebar-nav-btn-link:hover { background: var(--side-hover); }

html body .sidebar .sidebar-caret {
  display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0;
  color: var(--side-icon); border-radius: var(--radius-control); background: transparent;
}
html body .sidebar .sidebar-caret:hover { background: var(--side-hover); color: var(--text); }
html body .sidebar .sidebar-caret.active svg { transform: rotate(180deg); }
html body .sidebar .sidebar-caret svg { transition: transform .15s ease; }
html body .sidebar .sidebar-submenu a,
html body .sidebar .sidebar-group-btn {
  min-height: 32px; padding: 6px 10px 6px 38px; font-size: .84rem; font-weight: 500;
  color: var(--side-text) !important; background: transparent; border: 0; border-radius: var(--radius-control);
}
html body .sidebar .sidebar-group-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; }
html body .sidebar .sidebar-submenu a:hover,
html body .sidebar .sidebar-group-btn:hover,
html body .sidebar .sidebar-group-btn.active { background: var(--side-hover); color: var(--text) !important; }

/* Abschnittsüberschriften: ruhig, normale Schreibweise statt Versalien. */
html body .sidebar .sidebar-section-label,
html body.layout-sidebar .sidebar-section-label {
  padding: 12px 10px 5px;
  color: color-mix(in srgb, var(--side-text) 78%, transparent);
  font-size: .72rem; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.2;
}
html body.layout-sidebar .sidebar-section-label::after { display: none; }
html body .sidebar .sidebar-divider,
html body.layout-sidebar .sidebar-divider { height: 0; margin: 4px 10px; border: 0; background: none; }

html body .nav-count-badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: auto;
  border-radius: 999px; background: var(--danger); color: #fff;
  font-size: .7rem; font-weight: 700; box-shadow: none;
}
html[data-theme="dark"] body .nav-count-badge { background: #e5484d; color: #fff; }

/* Benutzerbereich unten in der Seitenleiste */
html body .sidebar .user-box,
html[data-theme="dark"] body .sidebar .user-box {
  background: transparent;
  border-top: 1px solid var(--border);
  color: var(--side-text);
}
html body .sidebar .user-box-meta strong { color: var(--text); }
html body .sidebar .user-box-kicker { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 500; }
html body .sidebar .user-box .user-box-btn,
html[data-theme="dark"] body .sidebar .user-box .user-box-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: var(--radius-control);
  color: var(--side-text) !important; box-shadow: none; text-decoration: none;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
html body .sidebar .user-box .user-box-btn:hover,
html[data-theme="dark"] body .sidebar .user-box .user-box-btn:hover { background: var(--side-hover); color: var(--text) !important; border-color: var(--border-strong); }
html body .sidebar .user-box .user-box-btn-danger,
html[data-theme="dark"] body .sidebar .user-box .user-box-btn-danger { color: var(--danger) !important; background: var(--card-bg); border-color: var(--border-strong); }
html body .sidebar .user-box .user-box-btn-danger:hover,
html[data-theme="dark"] body .sidebar .user-box .user-box-btn-danger:hover { background: var(--danger-tint); border-color: var(--danger-line); color: var(--danger) !important; }

/* Hell/Dunkel-Umschalter: Mond im Hellmodus, Sonne im Dunkelmodus. */
.theme-toggle-icon { display: inline-grid; place-items: center; margin: 0; line-height: 0; }
.theme-toggle-icon .theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle-icon .theme-icon-sun { display: inline; }
html[data-theme="dark"] .theme-toggle-icon .theme-icon-moon { display: none; }
.sidebar .user-box .theme-toggle .theme-toggle-icon { margin-right: 0; }

/* Logos bleiben unverändert. Im Dunkelmodus liegt die farbige Wortmarke
   auf einer hellen Plakette, damit Navy und Petrol lesbar bleiben. */
html[data-theme="dark"] body .brand-product-lockup .brand-wordmark-box {
  background: #eef2f7 !important;
  border-radius: 7px !important;
  padding: 0 7px !important;
  height: 32px;
}
html[data-theme="dark"] body .brand-product-lockup .brand-wordmark-image { height: 22px; filter: none; }
html body .brand-product-lockup .brand-wordmark-image { filter: none; }

/* Mobile Kopfleiste */
html body .mobile-topbar {
  background: color-mix(in srgb, var(--side-bg) 92%, transparent);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
}
html body .mobile-menu-btn,
html body .topbar-mobile-toggle {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
  background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-control);
  color: var(--text); box-shadow: none;
}
html body .mobile-menu-btn:hover,
html body .topbar-mobile-toggle:hover { background: var(--surface-hover); }
@media (max-width:900px) {
  html body.layout-sidebar .sidebar { background: var(--side-bg); box-shadow: var(--shadow-pop); }
  html body.layout-sidebar.mobile-nav-open::after { background: rgba(8, 15, 28, .38); }
  html body .sidebar nav a, html body .sidebar .sidebar-nav-btn-link { min-height: 42px; }
}

/* ---------- Obere Navigation (Layout „Topbar“) ---------- */
html body .topbar,
html body.layout-topbar .topbar {
  background: color-mix(in srgb, var(--side-bg) 94%, transparent);
  color: var(--side-text);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
}
html body .topbar-nav a,
html body .topbar-nav-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; border-radius: var(--radius-control);
  background: transparent; color: var(--side-text) !important;
  font-weight: 500; text-decoration: none;
}
html body .topbar-nav a svg, html body .topbar-nav-btn svg { color: var(--side-icon); }
html body .topbar-nav a:hover,
html body .topbar-nav-btn:hover { background: var(--side-hover); color: var(--text) !important; }
html body .topbar-nav a.active,
html body .topbar-nav-btn.active,
html body .topbar-nav-pair.active { background: var(--side-active-bg); color: var(--side-active-fg) !important; font-weight: 600; }
html body .topbar-nav a.active svg, html body .topbar-nav-btn.active svg { color: var(--side-active-fg); }
html body .topbar-submenu { background: var(--card-bg); border-color: var(--border); }
html body .topbar-submenu a, html body .topbar-group-btn { color: var(--side-text); border-radius: var(--radius-control); }
html body .topbar-submenu a:hover, html body .topbar-group-btn:hover, html body .topbar-group-btn.active { background: var(--side-hover); color: var(--text); }
html body.layout-topbar .topbar-icon-action,
html[data-theme="dark"] body.layout-topbar .topbar-icon-action {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
  background: var(--card-bg); color: var(--side-text); border: 1px solid var(--border-strong); border-radius: var(--radius-control);
}
html body.layout-topbar .topbar-icon-action:hover,
html[data-theme="dark"] body.layout-topbar .topbar-icon-action:hover { background: var(--side-hover); color: var(--text); border-color: var(--border-strong); }
html body.layout-topbar .topbar-user-logout,
html[data-theme="dark"] body.layout-topbar .topbar-user-logout { color: var(--danger); background: var(--card-bg); border-color: var(--border-strong); }
html body.layout-topbar .topbar-user-logout:hover,
html[data-theme="dark"] body.layout-topbar .topbar-user-logout:hover { background: var(--danger-tint); border-color: var(--danger-line); color: var(--danger); }

/* ---------- Buttons ----------
   Primär (Standard): Markenfarbe, eine pro Bereich
   .secondary:        ruhige Umrandung
   .ghost:            nur Text, für Nebenaktionen
   .danger:           endgültige Aktionen
   .small:            für Tabellen und Werkzeugleisten */
html body .btn,
html body a.btn,
html[data-theme="dark"] body .btn:not(.danger):not(.abbestellen-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 8px 15px;
  background: var(--primary);
  color: var(--on-primary) !important;
  border: 1px solid var(--primary);
  border-radius: var(--radius-control);
  font-family: inherit; font-size: .875rem; font-weight: 600; line-height: 1.15; letter-spacing: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 30, 54, .12);
  filter: none; opacity: 1; transform: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease, transform .06s ease;
}
html body .btn:hover,
html[data-theme="dark"] body .btn:not(.danger):not(.abbestellen-btn):hover {
  background: var(--primary-hover); border-color: var(--primary-hover);
  color: var(--on-primary) !important; text-decoration: none;
  filter: none; transform: none; box-shadow: 0 1px 2px rgba(16, 30, 54, .14);
}
html body .btn:active { transform: translateY(1px); box-shadow: none; }
html body .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
html body .btn svg { width: 16px; height: 16px; }
html body .btn.small svg { width: 15px; height: 15px; }
html body .btn.small { min-height: 32px; padding: 6px 11px; font-size: .8125rem; gap: 6px; }

html body .btn.secondary,
html body a.btn.secondary,
html[data-theme="dark"] body .btn.secondary:not(.danger) {
  background: var(--card-bg);
  color: var(--text) !important;
  border: 1px solid var(--border-strong);
  box-shadow: 0 1px 2px rgba(16, 30, 54, .05);
}
html body .btn.secondary svg { color: var(--muted); }
html body .btn.secondary:hover,
html[data-theme="dark"] body .btn.secondary:not(.danger):hover {
  background: var(--surface-hover);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border-strong));
  color: var(--text) !important;
}
html body .btn.secondary:hover svg { color: var(--primary); }

html body .btn.ghost {
  background: transparent; border-color: transparent; color: var(--primary) !important; box-shadow: none;
}
html body .btn.ghost:hover { background: var(--brand-tint); border-color: transparent; color: var(--primary) !important; }

html body .btn.danger,
html body .btn.abbestellen-btn.dringend,
html[data-theme="dark"] body .btn.danger {
  background: var(--danger); border-color: var(--danger); color: #fff !important;
}
html[data-theme="dark"] body .btn.danger,
html[data-theme="dark"] body .btn.abbestellen-btn.dringend { color: #2a0b0b !important; }
html body .btn.danger:hover,
html body .btn.abbestellen-btn.dringend:hover { background: color-mix(in srgb, var(--danger) 86%, #000); border-color: color-mix(in srgb, var(--danger) 86%, #000); }
html[data-theme="dark"] body .btn.danger:hover { background: color-mix(in srgb, var(--danger) 85%, #fff); border-color: color-mix(in srgb, var(--danger) 85%, #fff); }

html body .btn:disabled,
html body .btn[disabled],
html body .btn.disabled,
html[data-theme="dark"] body .btn:disabled {
  opacity: .5; cursor: not-allowed; box-shadow: none; transform: none;
}

/* Anmeldeseiten setzen keine Inline-Variablen – gleiche Optik erzwingen. */
html body .login-card .btn { background: var(--primary); border-color: var(--primary); color: var(--on-primary) !important; }
html body .login-card .btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

/* Icon-Buttons (Entfernen, Verschieben, Werkzeugleisten) */
html body .icon-btn,
html body .icon-action-btn,
html body .richtext-toolbar button {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; min-width: 32px; padding: 0; margin: 0;
  background: var(--card-bg); color: var(--muted);
  border: 1px solid var(--border-strong); border-radius: var(--radius-control);
  box-shadow: none; cursor: pointer; line-height: 0;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
html body .icon-btn:hover,
html body .icon-action-btn:hover,
html body .richtext-toolbar button:hover { background: var(--surface-hover); color: var(--text); border-color: color-mix(in srgb, var(--primary) 35%, var(--border-strong)); }
html body .icon-btn.danger-icon,
html body .icon-action-btn.danger-icon { color: var(--danger); }
html body .icon-btn.danger-icon:hover,
html body .icon-action-btn.danger-icon:hover { background: var(--danger-tint); border-color: var(--danger-line); color: var(--danger); }
html[data-theme="dark"] body .richtext-toolbar { background: var(--surface-soft); border-color: var(--border); }

html body .settings-back-btn {
  min-height: 38px; padding: 7px 13px; border-radius: var(--radius-control);
  border: 1px solid var(--border-strong); background: var(--card-bg); color: var(--text);
  font-weight: 600; box-shadow: none;
}
html body .settings-back-btn:hover { background: var(--surface-hover); color: var(--primary); transform: none; }

/* ---------- Formulare ---------- */
html body label { color: var(--muted); }
html body input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]),
html body select,
html body textarea,
html[data-theme="dark"] body input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]),
html[data-theme="dark"] body select,
html[data-theme="dark"] body textarea {
  background-color: var(--field-bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  min-height: 40px;
  outline: none;
  box-shadow: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
html body textarea { min-height: 84px; }
html body input::placeholder, html body textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
html body input:not([type="checkbox"]):not([type="radio"]):hover,
html body select:hover,
html body textarea:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--border-strong)); }
html body input:focus,
html body select:focus,
html body textarea:focus,
html[data-theme="dark"] body input:focus,
html[data-theme="dark"] body select:focus,
html[data-theme="dark"] body textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
html body input[type="checkbox"], html body input[type="radio"] { accent-color: var(--primary); }
html body input[type="color"] { border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--field-bg); }

/* ---------- Tabellen ---------- */
html body th,
html[data-theme="dark"] body th {
  color: var(--muted);
  font-size: .78rem; font-weight: 600;
  text-transform: none; letter-spacing: 0;
  background: transparent;
}
html body td, html[data-theme="dark"] body td { border-bottom-color: var(--border); }
html body th { border-bottom-color: var(--border-strong); }
html body tr:hover td,
html[data-theme="dark"] body tr:hover td { background: var(--surface-hover); color: inherit; }
html[data-theme="dark"] body tr:hover td a { color: var(--primary); }
html body .sort-link { display: inline-flex; align-items: center; gap: 4px; color: inherit; }
html body .sort-link:hover { color: var(--primary); text-decoration: none; }
html body .sort-link svg { color: var(--primary); }

/* ---------- Status-Badges ---------- */
html body .badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: .74rem; font-weight: 600; line-height: 1.3; white-space: nowrap;
  border: 1px solid transparent;
}
html body .badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85;
}
html body .badge.geplant,
html[data-theme="dark"] body .badge.geplant { background: var(--warning-tint); color: var(--warning); border-color: var(--warning-line); }
html body .badge.bestellt,
html[data-theme="dark"] body .badge.bestellt { background: var(--info-tint); color: var(--info); border-color: var(--info-line); }
html body .badge.abgerechnet,
html body .badge.versendet,
html[data-theme="dark"] body .badge.abgerechnet,
html[data-theme="dark"] body .badge.versendet { background: var(--success-tint); color: var(--success); border-color: var(--success-line); }
html body .badge.archiviert,
html[data-theme="dark"] body .badge.archiviert { background: var(--neutral-tint); color: var(--muted); border-color: var(--border); }
html body .badge.fehler,
html body .badge.storniert,
html[data-theme="dark"] body .badge.fehler,
html[data-theme="dark"] body .badge.storniert { background: var(--danger-tint); color: var(--danger); border-color: var(--danger-line); }

/* ---------- Hinweise & Meldungen ---------- */
html body .hinweis,
html[data-theme="dark"] body .hinweis {
  background: var(--warning-tint); border: 1px solid var(--warning-line); color: var(--text);
  border-radius: 10px; padding: 11px 14px;
}
html body .hinweis.hinweis-icon { display: flex; align-items: center; gap: 9px; }
html body .hinweis.hinweis-icon svg { color: var(--warning); }
html body .error-box,
html[data-theme="dark"] body .error-box { background: var(--danger-tint); border: 1px solid var(--danger-line); color: var(--danger); border-radius: 10px; }
html body .ok-box,
html[data-theme="dark"] body .ok-box { background: var(--success-tint); border: 1px solid var(--success-line); color: var(--success); border-radius: 10px; }

/* ---------- Schnellzugriff & Einstellungs-Kacheln ---------- */
html body .shortcut-tile,
html[data-theme="dark"] body .shortcut-tile {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  box-shadow: none;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
html body .shortcut-tile svg,
html[data-theme="dark"] body .shortcut-tile svg {
  box-sizing: content-box; padding: 9px;
  background: var(--tile-bg); color: var(--tile-fg);
  border-radius: 10px;
}
html body .shortcut-tile:hover,
html[data-theme="dark"] body .shortcut-tile:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background: var(--surface-hover);
  box-shadow: var(--shadow-card);
}
/* Hauptaktionen (Taxi bestellen, Ersatzverkehr) heben sich über die Markenfarbe ab. */
html body .shortcut-tile.shortcut-highlight,
html[data-theme="dark"] body .shortcut-tile.shortcut-highlight {
  background: var(--brand-tint); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); color: var(--text);
}
html body .shortcut-tile.shortcut-highlight svg,
html[data-theme="dark"] body .shortcut-tile.shortcut-highlight svg { background: var(--primary); color: var(--on-primary); }
html body .shortcut-tile.shortcut-highlight-blau,
html[data-theme="dark"] body .shortcut-tile.shortcut-highlight-blau {
  background: color-mix(in srgb, var(--tile-bg) 60%, var(--card-bg)); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); color: var(--text);
}
html body .shortcut-tile.shortcut-highlight-blau svg,
html[data-theme="dark"] body .shortcut-tile.shortcut-highlight-blau svg { background: var(--accent); color: #fff; }
html[data-theme="dark"] body .shortcut-tile.shortcut-highlight-blau svg { color: #08151a; }

html body .setting-tile,
html[data-theme="dark"] body .setting-tile {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: none;
}
html body .setting-tile:hover,
html[data-theme="dark"] body .setting-tile:hover {
  transform: none; background: var(--surface-hover);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); box-shadow: var(--shadow-card);
}
html body .setting-tile-icon { border-radius: 10px; }
html body .setting-tile-arrow { color: var(--muted); }
html body .settings-title-icon { border-radius: 12px; background: var(--brand-tint); color: var(--primary); }
html[data-theme="dark"] body .settings-title-icon { background: var(--brand-tint); color: var(--primary); }
html body .privacy-rule-icon { color: var(--primary); background: var(--brand-tint); border-color: transparent; }

/* Dashboard-Überschriften mit Icon */
html body .dashboard-widget-heading { display: flex; align-items: center; gap: 9px; }
html body .dashboard-widget-heading > svg { color: var(--primary); }

/* ---------- Anmeldung ---------- */
html body .login-card {
  border-radius: 16px; border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(4, 16, 32, .28);
}
html[data-theme="dark"] body .login-card { background: var(--card-bg); color: var(--text); border-color: var(--border-strong); }
html[data-theme="dark"] body .login-card input { background: var(--field-bg); color: var(--text); border-color: var(--border-strong); }
html[data-theme="dark"] body .login-card a { color: var(--primary); }

/* ---------- Toast & Overlays ---------- */
html body .webapp-live-toast-icon { display: grid; place-items: center; color: var(--primary); }
html body .overlay-head .btn svg { color: inherit; }

/* ---------- WebApp für Betriebspersonal: Umschalter-Icons ---------- */
html body .webapp-theme-toggle,
html body .webapp-logout { display: inline-grid; place-items: center; line-height: 0; }
html body .webapp-person-badge { display: inline-flex; align-items: center; gap: 5px; }

/* Ältere Ebenen setzten Verläufe und Farben mit !important – hier gezielt neutralisieren. */
html body .btn:not(.secondary):not(.danger):not(.ghost):not(.abbestellen-btn):not(.ghost),
html body:not(.login-body) .btn:not(.secondary):not(.danger):not(.ghost):not(.abbestellen-btn):not(.ghost),
html body.login-body .login-card form .btn[type="submit"],
html[data-theme="dark"] body .btn:not(.secondary):not(.danger):not(.ghost):not(.abbestellen-btn):not(.ghost) {
  background: var(--primary) !important;
  background-image: none !important;
  border-color: var(--primary) !important;
  color: var(--on-primary) !important;
}
html body .btn:not(.secondary):not(.danger):not(.ghost):not(.abbestellen-btn):not(.ghost):hover,
html body:not(.login-body) .btn:not(.secondary):not(.danger):not(.ghost):not(.abbestellen-btn):not(.ghost):hover,
html body.login-body .login-card form .btn[type="submit"]:hover,
html[data-theme="dark"] body .btn:not(.secondary):not(.danger):not(.ghost):not(.abbestellen-btn):not(.ghost):hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: var(--on-primary) !important;
}
html body .btn:not(.secondary):not(.danger):not(.ghost):not(.abbestellen-btn):not(.ghost) svg,
html[data-theme="dark"] body .btn:not(.secondary):not(.danger):not(.ghost):not(.abbestellen-btn):not(.ghost) svg { color: currentColor !important; }
html[data-theme="dark"] body .btn.secondary,
html[data-theme="dark"] body .btn.secondary:not(.danger) { background: var(--card-bg) !important; border-color: var(--border-strong) !important; color: var(--text) !important; }
html[data-theme="dark"] body .btn.secondary:hover { background: var(--surface-hover) !important; border-color: color-mix(in srgb, var(--primary) 40%, var(--border-strong)) !important; }
html[data-theme="dark"] body .btn.secondary svg { color: var(--muted) !important; }
html[data-theme="dark"] body .btn.secondary:hover svg { color: var(--primary) !important; }
html[data-theme="dark"] body .icon-action-btn { background: var(--card-bg); border-color: var(--border-strong); color: var(--muted) !important; }
html[data-theme="dark"] body .icon-action-btn svg { color: currentColor !important; }
html[data-theme="dark"] body .icon-action-btn.danger-icon { color: var(--danger) !important; }
html body .sidebar .user-box .user-box-btn { font-weight: 500; }

/* Dunkelmodus: ältere Regeln mit höherer Spezifität auf die neuen Tokens ziehen. */
html[data-theme="dark"] body .card,
html[data-theme="dark"] body .settings-card,
html[data-theme="dark"] body .settings-overview-section { background: var(--card-bg); border-color: var(--border); box-shadow: none; }
html[data-theme="dark"] body .main { background: var(--bg); }
html[data-theme="dark"] body tr:hover td { background: var(--surface-hover) !important; color: inherit !important; }
html[data-theme="dark"] body tr:hover td a:not(.btn) { color: var(--primary) !important; }
html[data-theme="dark"] body .richtext-toolbar button,
html[data-theme="dark"] body .richtext-toolbar select,
html[data-theme="dark"] body .rte-color { background: var(--card-bg); border-color: var(--border-strong); color: var(--text); }
html[data-theme="dark"] body .richtext-editor:not(.editor-paper) { background: var(--field-bg); color: var(--text); border-color: var(--border-strong); }
html[data-theme="dark"] body .shortcut-tile.shortcut-highlight svg { filter: none; }
html body .btn:disabled, html body .btn[disabled], html body .btn.disabled { opacity: .45 !important; pointer-events: none; }


/* ============================================================
   DispoGrid v36.1 – Suchlisten, Pflichtfelder, Hinweise,
   Anonymisierung je Grund, neue Ersatzverkehrsmaske
   ============================================================ */

/* ---------- Kopfzeile: Zurück immer oben rechts ---------- */
html body .settings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
html body .settings-back-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
html body .settings-current-path { display: inline-flex; margin: -6px 0 16px; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--card-bg); color: var(--muted); font-size: .8rem; }

/* ---------- Suchliste (Combobox) ---------- */
.dg-combobox { position: relative; width: 100%; min-width: 0; }
.dg-combobox > input { width: 100%; margin-top: 4px; }
.bestell-address-row .dg-combobox > input { margin-top: 0; }
.dg-combobox-list {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px);
  max-height: min(320px, 46vh); overflow-y: auto; overscroll-behavior: contain;
  background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: 10px;
  box-shadow: var(--shadow-pop); padding: 4px;
}
.dg-cb-option {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: 7px; cursor: pointer; color: var(--text);
}
.dg-cb-option + .dg-cb-option { margin-top: 1px; }
.dg-cb-option:hover { background: var(--surface-hover); }
.dg-cb-option.is-active { background: var(--brand-tint); }
.dg-cb-avatar {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-soft); color: var(--muted);
  font-size: .72rem; font-weight: 700;
}
.dg-cb-option.is-active .dg-cb-avatar { background: var(--primary); color: var(--on-primary); }
.dg-cb-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dg-cb-label { font-size: .9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-cb-meta { font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-cb-badge {
  flex: 0 0 auto; padding: 2px 7px; border-radius: 6px;
  background: var(--tile-bg); color: var(--tile-fg); font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}

/* ---------- Pflichtfelder ---------- */
html body .is-invalid,
html body input.is-invalid, html body select.is-invalid, html body textarea.is-invalid { border-color: var(--danger) !important; }
html body input.is-invalid:focus, html body select.is-invalid:focus, html body textarea.is-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent) !important; }
.field-error {
  display: flex; align-items: center; gap: 6px; margin-top: 5px;
  color: var(--danger); font-size: .8rem; font-weight: 500;
}
.field-error::before {
  content: ""; flex: 0 0 14px; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center/contain no-repeat;
}
.basisstunden-picker.is-invalid, .ev-stops.is-invalid { outline: 1px solid var(--danger); outline-offset: 4px; border-radius: 8px; }

/* ---------- Hinweise: dezent als Infozeile, gelb nur für Warnungen ---------- */
html body .hinweis,
html[data-theme="dark"] body .hinweis {
  position: relative;
  background: transparent; border: 0; border-radius: 0;
  padding: 2px 0 2px 24px; margin: 8px 0 12px;
  color: var(--muted); font-size: .84rem; line-height: 1.5; font-weight: 400;
}
html body .hinweis::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 16px; height: 16px; background: currentColor; opacity: .85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5.5M12 7.8v.01'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5.5M12 7.8v.01'/%3E%3C/svg%3E") center/contain no-repeat;
}
html body .hinweis a { font-weight: 500; }
html body .hinweis.warnung,
html[data-theme="dark"] body .hinweis.warnung {
  background: var(--warning-tint); border: 1px solid var(--warning-line); border-radius: 10px;
  padding: 10px 14px 10px 38px; color: var(--text);
}
html body .hinweis.warnung::before {
  left: 13px; top: 12px; color: var(--warning); opacity: 1;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.8 19.5h18.4Z'/%3E%3Cpath d='M12 10v4.5M12 17.2v.01'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.8 19.5h18.4Z'/%3E%3Cpath d='M12 10v4.5M12 17.2v.01'/%3E%3C/svg%3E") center/contain no-repeat;
}
html body .hinweis.hinweis-icon { padding-left: 14px; }
html body .hinweis.hinweis-icon::before { display: none; }
html body .muted-inline { color: var(--muted); font-size: .8rem; }

/* ---------- Anonymisierung je Grund ---------- */
.anon-card .anon-head h3 { margin: 0 0 4px; }
.anon-card .anon-head p { margin: 0 0 14px; max-width: 76ch; }
.anon-table { border: 1px solid var(--border); border-radius: 12px; overflow: visible; }
.anon-row {
  display: grid; grid-template-columns: 44px minmax(140px, 1fr) minmax(220px, 1.3fr) minmax(170px, 1.2fr);
  gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--border);
}
.anon-row:first-child { border-top: 0; }
.anon-row-head { padding-top: 9px; padding-bottom: 9px; color: var(--muted); font-size: .78rem; font-weight: 600; background: var(--surface-soft); border-radius: 12px 12px 0 0; }
.anon-row-standard { background: color-mix(in srgb, var(--brand-tint) 70%, var(--card-bg)); border-radius: 0 0 12px 12px; }
.anon-grund { display: flex; flex-direction: column; min-width: 0; }
.anon-grund strong { font-size: .9rem; color: var(--text); }
.anon-grund small { color: var(--muted); font-size: .76rem; }
.anon-row.is-off .anon-wann, .anon-row.is-off .anon-felder { opacity: .45; }
.anon-wann { display: flex; gap: 6px; }
.anon-wann select { flex: 1; min-width: 0; margin: 0; min-height: 36px; padding: 6px 9px; font-size: .84rem; }
.anon-wann input { width: 72px; flex: 0 0 72px; margin: 0; min-height: 36px; padding: 6px 8px; font-size: .84rem; text-align: right; }
.anon-wann input[hidden] { display: none; }
.anon-felder { position: relative; }
.anon-felder > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 5px 10px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--card-bg);
  font-size: .8rem; color: var(--text);
}
.anon-felder > summary::-webkit-details-marker { display: none; }
.anon-felder > summary svg { color: var(--muted); transition: transform .15s ease; }
.anon-felder[open] > summary svg { transform: rotate(180deg); }
.anon-felder-grid {
  position: absolute; z-index: 30; right: 0; top: calc(100% + 6px); width: min(460px, 80vw);
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 8px;
  background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-pop);
}
.anon-feld { display: flex !important; align-items: flex-start; gap: 8px; margin: 0 !important; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.anon-feld:hover { background: var(--surface-hover); }
.anon-feld input { width: 16px; height: 16px; min-width: 16px; margin: 2px 0 0; padding: 0; }
.anon-feld span { display: flex; flex-direction: column; }
.anon-feld strong { font-size: .82rem; color: var(--text); font-weight: 600; }
.anon-feld small { font-size: .74rem; color: var(--muted); line-height: 1.3; }
.anon-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.anon-extra-item { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; margin: 0 !important; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; }
.anon-extra-item > span:first-child { display: flex; flex-direction: column; gap: 3px; }
.anon-extra-item strong { color: var(--text); font-size: .88rem; }
.anon-extra-item small { color: var(--muted); font-size: .76rem; line-height: 1.35; }
.anon-inline { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--muted); }
.anon-inline input { width: 80px; margin: 0; text-align: right; }
.anon-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.anon-now-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.anon-now-head h3 { margin: 0 0 4px; }
.anon-now-head p { margin: 0; }
.anon-stats { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; color: var(--muted); font-size: .84rem; }
.anon-stats strong { color: var(--text); }
@media (max-width: 900px) {
  .anon-row { grid-template-columns: 44px 1fr; }
  .anon-row-head { display: none; }
  .anon-row .anon-wann, .anon-row .anon-felder { grid-column: 2; }
  .anon-felder-grid { left: 0; right: auto; grid-template-columns: 1fr; }
  .anon-extra { grid-template-columns: 1fr; }
  .anon-now-head { flex-direction: column; }
}

/* ---------- Ersatzverkehr-Bestellung ---------- */
#ev-overlay .ev-overlay-panel, .ev-overlay-panel { width: min(1080px, calc(100vw - 32px)); }
.ev-form { margin: 0; }
.ev-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.ev-main { min-width: 0; }
.ev-section { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.ev-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.ev-grid-2 > label { margin: 0; }
.ev-dyn { margin-top: 12px; }
.ev-choice-row { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-top: 12px; }
.ev-choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.ev-choice legend { padding: 0; margin-bottom: 5px; font-size: .88rem; color: var(--muted); }
.segmented { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 9px; padding: 3px; gap: 2px; background: var(--surface-soft); }
.segmented-wrap { flex-wrap: wrap; }
.segmented label { margin: 0 !important; position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.segmented span { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 12px; border-radius: 7px; font-size: .84rem; color: var(--muted); font-weight: 500; transition: background .12s ease, color .12s ease; }
.segmented label:hover span { color: var(--text); }
.segmented input:checked + span { background: var(--card-bg); color: var(--primary); font-weight: 600; box-shadow: 0 1px 2px rgba(16,30,54,.12), 0 0 0 1px var(--border); }
html[data-theme="dark"] .segmented input:checked + span { background: var(--brand-tint); box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent); }
.segmented input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 1px; }

.linie-block { position: relative; overflow: visible !important; background: var(--card-bg) !important; }
.ev-line-head { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; grid-template-columns: none !important; }
.ev-line-select { flex: 1; max-width: 420px; margin: 0 !important; }
.ev-line-select select { margin: 0; font-weight: 600; }
.ev-line-actions { display: flex; align-items: center; gap: 6px; }
.ev-block-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 6px; font-size: .84rem; color: var(--muted); }
.ev-block-label small { font-size: .78rem; }
.ev-presets { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; min-height: 26px; padding: 3px 10px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--card-bg);
  color: var(--muted); font: inherit; font-size: .76rem; cursor: pointer;
}
.chip:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--border-strong)); background: var(--brand-tint); }

html body #evform.ev-form .basisstunden-picker { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 4px; width: 100%; margin: 0 0 14px; }
html body #evform.ev-form .basisstunde-choice { width: auto; height: 32px; }
html body #evform.ev-form .basisstunde-choice span {
  display: grid; place-items: center; width: 100%; height: 100%;
  border: 1px solid var(--border-strong); border-radius: 7px; background: var(--card-bg);
  color: var(--text); font-size: .82rem; font-variant-numeric: tabular-nums; transform: none !important;
}
html body #evform.ev-form .basisstunde-choice span:hover { border-color: var(--primary); }
html body #evform.ev-form .basisstunde-choice input:checked + span { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--on-primary) !important; font-weight: 600; }

.ev-stops { list-style: none; margin: 0 0 6px; padding: 0; position: relative; }
.ev-stop { display: grid; grid-template-columns: 14px minmax(0, 1fr) 76px auto; gap: 10px; align-items: center; padding: 4px 0; position: relative; }
.ev-stop::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: color-mix(in srgb, var(--primary) 30%, transparent); }
.ev-stop:first-child::before { top: 50%; }
.ev-stop:last-child::before { bottom: 50%; }
.ev-stop:only-child::before { display: none; }
.ev-stop-dot { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--primary); background: var(--card-bg); }
.ev-stop:first-child .ev-stop-dot, .ev-stop:last-child .ev-stop-dot { background: var(--primary); }
.ev-stop input { margin: 0 !important; min-height: 36px; }
.ev-stop-minute { display: flex; align-items: center; gap: 3px; color: var(--muted); }
.ev-stop-minute input { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.ev-stop-actions { display: inline-flex; gap: 3px; }
.ev-stop-actions .icon-btn { width: 30px; height: 30px; min-width: 30px; }
.ev-stop:first-child .halt-hoch, .ev-stop:last-child .halt-runter { visibility: hidden; }
.ev-add-row { margin: -2px 0 12px; }
.ev-kommentar { display: block; margin: 0; }

.ev-preview {
  position: sticky; top: 8px;
  background: var(--surface-soft); border: 1px solid var(--border); border-radius: 12px; padding: 14px;
  font-size: .84rem;
}
.ev-preview-title { margin: 0 0 8px; font-weight: 700; color: var(--text); }
.ev-preview-line { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; font-weight: 600; color: var(--text); }
.ev-preview-line:first-child { margin-top: 0; }
.ev-line-badge { padding: 2px 7px; border-radius: 6px; background: var(--primary); color: var(--on-primary); font-size: .75rem; font-weight: 700; }
.ev-preview-sum, .ev-preview-empty { margin: 0 0 6px; font-size: .78rem; }
.ev-preview-table { width: 100%; font-size: .8rem; font-variant-numeric: tabular-nums; }
html body .ev-preview-table th, html body .ev-preview-table td { padding: 4px 0; font-size: .78rem; }
html body .ev-preview-table th:last-child, html body .ev-preview-table td:last-child { text-align: right; }
html body .ev-preview-table tr:hover td { background: transparent !important; }

.ev-footer {
  position: sticky; bottom: -18px; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 4px 0 0; padding: 12px 0 14px;
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ev-footer-note { font-size: .78rem; color: var(--muted); }
@media (max-width: 900px) {
  .ev-layout { grid-template-columns: 1fr; }
  .ev-preview { position: static; order: 2; }
  html body #evform.ev-form .basisstunden-picker { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  .ev-grid-2 { grid-template-columns: 1fr; }
  .ev-line-head { flex-wrap: wrap; }
  .ev-line-select { max-width: none; flex-basis: 100%; }
  html body #evform.ev-form .basisstunden-picker { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .ev-stop { grid-template-columns: 14px minmax(0, 1fr) 64px; }
  .ev-stop-actions { grid-column: 2 / -1; justify-content: flex-end; }
}

html body #evform.ev-form .basisstunden-picker { width: 100% !important; max-width: none !important; grid-auto-rows: 32px; }
html body #evform.ev-form .basisstunde-choice,
html body #evform.ev-form .basisstunde-choice span { width: 100% !important; min-width: 0 !important; height: 32px !important; }
html body #evform.ev-form .basisstunde-choice span { font-weight: 500; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Ghost-Buttons gegen ältere !important-Regeln absichern */
html body .btn.ghost,
html body:not(.login-body) .btn.ghost,
html[data-theme="dark"] body .btn.ghost {
  background: transparent !important; background-image: none !important;
  border-color: transparent !important; color: var(--primary) !important; box-shadow: none !important;
}
html body .btn.ghost:hover,
html body:not(.login-body) .btn.ghost:hover { background: var(--brand-tint) !important; color: var(--primary) !important; }
html body .btn.ghost svg { color: currentColor !important; }
.ev-add-row .btn.ghost, .linie-block > .btn.ghost { padding-left: 6px; }
.anon-card .anon-head p { max-width: 82ch; }
.anon-feld-gruppe { grid-column: 1 / -1; margin: 6px 8px 2px; font-size: .74rem; font-weight: 600; color: var(--muted); }
.anon-feld-gruppe:first-child { margin-top: 2px; }
.anon-felder-grid { max-height: min(460px, 60vh); overflow-y: auto; }

/* v36.2.1 – Minutenfeld als „xx:mm“ */
.ev-stop { grid-template-columns: 14px minmax(0, 1fr) 96px auto; }
html body .ev-stop-minute {
  display: flex; align-items: center; margin: 0 !important; min-height: 36px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--field-bg);
  transition: border-color .12s ease, box-shadow .12s ease; cursor: text;
}
html body .ev-stop-minute:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--border-strong)); }
html body .ev-stop-minute:focus-within { border-color: var(--primary); box-shadow: var(--focus-ring); }
.ev-min-prefix { padding-left: 10px; color: var(--muted); font-variant-numeric: tabular-nums; user-select: none; }
html body .ev-stop-minute input,
html body .ev-stop-minute input:focus,
html body .ev-stop-minute input:hover {
  border: 0 !important; box-shadow: none !important; background: transparent !important;
  min-height: 34px; width: 100%; padding: 4px 8px 4px 1px; text-align: left; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
html body .ev-stop-minute input::-webkit-outer-spin-button,
html body .ev-stop-minute input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 600px) { .ev-stop { grid-template-columns: 14px minmax(0, 1fr) 84px; } }
.ev-min-prefix { font-size: .95rem; }


/* ============================================================
   DispoGrid v36.3 – Listen-Detail-Aufbau (Stammdaten, Benutzer)
   ============================================================ */
.md-layout { display: grid; grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.25fr); gap: 16px; align-items: start; margin-bottom: 20px; }
.md-list {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; max-height: calc(100dvh - 210px); min-height: 260px; overflow: hidden;
}
.md-list-head { display: flex; gap: 8px; align-items: center; padding: 10px; border-bottom: 1px solid var(--border); }
.md-search { flex: 1; position: relative; margin: 0 !important; display: block; }
.md-search > svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
html body .md-search input { margin: 0; padding-left: 34px; min-height: 36px; }
.md-bulk { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--brand-tint); font-size: .8rem; color: var(--text); }
.md-rows { overflow-y: auto; overscroll-behavior: contain; padding: 4px; }
.md-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px;
  color: var(--text) !important; text-decoration: none !important; transition: background .12s ease;
}
.md-row + .md-row { margin-top: 1px; }
.md-row[hidden] { display: none; }
.md-row:hover { background: var(--surface-hover); }
.md-row.is-active { background: var(--side-active-bg); }
.md-row.is-active .md-row-title { color: var(--side-active-fg); }
.md-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.md-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.md-row-title { font-size: .9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-row-sub { font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-avatar {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-soft); color: var(--muted);
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}
.md-row.is-active .md-avatar { background: var(--primary); color: var(--on-primary); }
.md-avatar-icon { border-radius: 9px; background: var(--tile-bg); color: var(--tile-fg); }
.md-row.is-active .md-avatar-icon { background: var(--primary); color: var(--on-primary); }
.md-avatar-lg { flex-basis: 44px; width: 44px; height: 44px; font-size: .9rem; background: var(--brand-tint); color: var(--primary); }
.md-code { flex: 0 0 auto; min-width: 46px; text-align: center; padding: 3px 6px; border-radius: 6px; background: var(--tile-bg); color: var(--tile-fg); font-size: .74rem; font-weight: 700; letter-spacing: .02em; }
.md-row.is-active .md-code { background: var(--primary); color: var(--on-primary); }
.md-empty { padding: 22px 12px; text-align: center; color: var(--muted); font-size: .85rem; }
.md-pill {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
  font-size: .7rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent;
}
.md-pill + .md-pill { margin-left: 4px; }
.md-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.md-pill:has(svg)::before { display: none; }
.md-pill.ok { background: var(--success-tint); color: var(--success); border-color: var(--success-line); }
.md-pill.info { background: var(--info-tint); color: var(--info); border-color: var(--info-line); }
.md-pill.warn { background: var(--warning-tint); color: var(--warning); border-color: var(--warning-line); }
.md-pill.neutral { background: var(--neutral-tint); color: var(--muted); border-color: var(--border); }

html body .md-detail { position: sticky; top: 12px; margin: 0; padding: 18px 20px; scroll-margin-top: 70px; }
.md-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.md-detail-head form { margin: 0; }
.md-detail-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.md-detail-head h2 { margin: 0 0 2px; font-size: 1.2rem; letter-spacing: -.015em; overflow-wrap: anywhere; }
.md-detail-head p { margin: 0; font-size: .84rem; }
.md-form { display: grid; gap: 10px; }
.md-form > label { margin: 0; }
.md-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.md-grid-2 > label { margin: 0; }
html body .md-check { display: flex !important; align-items: center; gap: 9px; margin: 0 !important; color: var(--text) !important; cursor: pointer; }
.md-check input { width: 17px; height: 17px; margin: 0; }
.md-check span { display: flex; flex-direction: column; font-size: .88rem; }
.md-check small { font-size: .76rem; }
.md-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.md-access { margin-top: 18px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.md-access-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.md-access p { margin: 0 0 10px; font-size: .84rem; }
.md-access-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.md-access-actions form { margin: 0; }
html body .btn.ghost.md-danger { color: var(--danger) !important; }
html body .btn.ghost.md-danger:hover { background: var(--danger-tint) !important; }

.md-assist { border-color: color-mix(in srgb, var(--primary) 30%, var(--border)) !important; }
.md-assist-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.md-assist-head h3 { margin: 0 0 3px; }
.md-assist-head p { margin: 0; font-size: .85rem; }
.md-assist-list { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.md-assist-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto minmax(180px, 260px); gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--border); }
.md-assist-row:first-child { border-top: 0; }
.md-assist-row select { margin: 0; min-height: 36px; }

@media (max-width: 980px) {
  .md-layout { grid-template-columns: 1fr; }
  .md-list { max-height: 46dvh; }
  html body .md-detail { position: static; }
  .md-assist-row { grid-template-columns: 32px minmax(0, 1fr); }
  .md-assist-row .md-assist-state, .md-assist-row select { grid-column: 2; }
  .md-assist-head { flex-direction: column; }
}
@media (max-width: 600px) { .md-grid-2 { grid-template-columns: 1fr; } }

/* WebApp: Meine Daten */
a.webapp-my-data-link { text-decoration: none !important; gap: 6px; background: var(--brand-tint) !important; color: var(--primary) !important; border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); }
a.webapp-my-data-link:hover { background: color-mix(in srgb, var(--primary) 16%, var(--card-bg)) !important; }
.webapp-form label small { font-weight: 400; color: var(--muted); }
.webapp-readonly { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 2px; }
.webapp-readonly > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-soft); border: 1px solid var(--border); }
.webapp-readonly span { font-size: .74rem; color: var(--muted); }
.webapp-readonly strong { font-size: .88rem; color: var(--text); font-weight: 600; }
.md-assist-row-3 { grid-template-columns: 32px minmax(0, 1fr) auto; }
#benutzer-abschnitt + .card { margin-top: 0; }


/* ============================================================
   DispoGrid v36.4 – Sortierbare Listen, Import, Einstellungen aus einem Guss
   ============================================================ */

/* ---------- Sortierbare Listen ---------- */
.sort-list { margin: 0 0 14px; }
.sort-group-title { margin: 14px 2px 6px; font-size: .78rem; font-weight: 600; color: var(--muted); }
.sort-list:first-of-type .sort-group-title { margin-top: 4px; }
.sort-items { border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); overflow: hidden; }
.sort-item {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px 6px 4px;
  border-top: 1px solid var(--border); background: var(--card-bg);
  transition: background .15s ease, box-shadow .15s ease;
}
.sort-item:first-child { border-top: 0; }
.sort-item:hover { background: var(--surface-hover); }
.sort-item.is-muted .sort-title { color: var(--muted); }
.sort-item.is-moved { background: var(--brand-tint); }
.sort-item.is-dragging { position: relative; z-index: 2; background: var(--card-bg); box-shadow: var(--shadow-pop); border-radius: 10px; }
.sort-list.is-sorting { user-select: none; }
.sort-handle {
  flex: 0 0 30px; width: 30px; height: 34px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: grab; touch-action: none;
}
.sort-handle:hover { background: var(--surface-soft); color: var(--text); }
.sort-handle:active, .sort-item.is-dragging .sort-handle { cursor: grabbing; color: var(--primary); }
.sort-nr { flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-soft); color: var(--muted); font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sort-title { flex: 1; min-width: 0; font-size: .9rem; font-weight: 500; color: var(--text); display: flex; align-items: center; gap: 8px; }
.sort-meta { color: var(--muted); font-size: .84rem; font-variant-numeric: tabular-nums; }
.sort-actions { display: inline-flex; gap: 4px; }
.sort-actions .icon-btn { width: 32px; height: 32px; min-width: 32px; }
.sort-actions .icon-btn:disabled { opacity: .35; cursor: default; }
.sort-route .sort-item { position: relative; }
.sort-route .ev-stop-dot { flex: 0 0 12px; width: 12px; height: 12px; }
.sort-savebar {
  position: sticky; bottom: 10px; z-index: 5;
  display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 8px 8px 14px;
  background: var(--card-bg); border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); border-radius: 12px;
  box-shadow: var(--shadow-pop); font-size: .86rem; color: var(--text);
}
.sort-savebar > span { flex: 1; font-weight: 500; }
.sort-savebar[hidden] { display: none; }

/* ---------- Import ---------- */
.import-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.import-drop {
  position: relative; flex: 1 1 320px; display: flex !important; align-items: center; gap: 12px; margin: 0 !important;
  padding: 14px 16px; border: 1.5px dashed var(--border-strong); border-radius: 12px; background: var(--surface-soft);
  color: var(--muted); cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.import-drop:hover, .import-drop:focus-within { border-color: var(--primary); background: var(--brand-tint); }
.import-drop svg { flex: 0 0 auto; color: var(--primary); transform: rotate(180deg); }
.import-drop span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.import-drop strong { color: var(--text); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-drop small { font-size: .76rem; }
.import-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.import-form .md-check { flex-basis: 100%; }

/* ---------- Einstellungen: einheitliche Abschnitte, Tabellen und Formulare ---------- */
html body .settings-section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
html body .settings-section-title h3 { margin: 0 0 3px; font-size: 1.05rem; letter-spacing: -.01em; }
html body .settings-section-title p { margin: 0; color: var(--muted); font-size: .85rem; max-width: 80ch; }
html body .card > h3:first-child { margin: 0 0 12px; font-size: 1.05rem; letter-spacing: -.01em; }
html body .card h3 + .hinweis { margin-top: -4px; }

html body .data-frame { border: 1px solid var(--border); border-radius: 12px; overflow: auto; background: var(--card-bg); }
html body .data-frame table { margin: 0; }
html body .data-frame th { position: sticky; top: 0; z-index: 1; background: var(--surface-soft); padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
html body .data-frame td { padding: 10px 12px; vertical-align: middle; }
html body .data-frame tr:last-child td { border-bottom: 0; }
html body .data-frame td:last-child:has(.btn, form, .icon-btn) { text-align: right; white-space: nowrap; }
html body .data-frame td form { display: inline-flex; margin: 0; vertical-align: middle; }
html body .data-frame td .btn.small + form, html body .data-frame td form + form, html body .data-frame td .btn.small + .btn.small { margin-left: 4px; }
html body .menu-section-row th { background: var(--card-bg) !important; color: var(--muted); font-size: .76rem; font-weight: 600; letter-spacing: 0; text-transform: none; padding-top: 14px; }

html body .card form.row { gap: 12px; align-items: flex-end; }
html body .card form.row > label { margin-bottom: 0; }
html body .card form.row > div:last-child:has(> .btn) { display: flex; gap: 8px; }
html body .tag-check { display: inline-flex; align-items: center; gap: 8px; }
html body .tag-check input { width: 17px; height: 17px; margin: 0; accent-color: var(--primary); }
html body .tag-check label { color: var(--text); }
html body .table-filter { max-width: 360px; }

@media (max-width: 700px) {
  .sort-item { flex-wrap: wrap; }
  .sort-actions { margin-left: auto; }
  html body .settings-section-title { flex-direction: column; }
}

/* v36.4.1 – Auftragsnummer mit Augen-Button */
.order-ref { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.order-ref-nr { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
html body .icon-btn.order-eye { width: 30px; height: 30px; min-width: 30px; color: var(--primary); border-color: color-mix(in srgb, var(--primary) 25%, var(--border-strong)); }
html body .icon-btn.order-eye:hover { background: var(--brand-tint); border-color: var(--primary); color: var(--primary); }
html body td.row-actions { white-space: nowrap; text-align: right; }
html body td.row-actions > * { vertical-align: middle; }
html body td.row-actions form { display: inline-flex; margin: 0 0 0 4px; }


/* ============================================================
   DispoGrid v36.5 – Rollen, Listenkarten, Matrix, Schalter-Listen, Berichte
   ============================================================ */
.md-list-title { flex: 1; font-size: .92rem; color: var(--text); padding-left: 4px; }
.ui-switch { flex: 0 0 auto; margin: 0 !important; }
html body .privacy-switch > span { background: var(--border-strong); }
html body .privacy-switch input:checked + span { background: var(--primary); }
html body .privacy-switch input:disabled + span { opacity: .55; cursor: not-allowed; }
html body .privacy-switch input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Schalter in sortierbaren Listen */
.sort-item .ui-switch { margin-left: 4px !important; }
.sort-item.is-off .sort-title { color: var(--muted); }
.sort-item.is-off .sort-handle { opacity: .6; }
.column-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.column-lists h4 { margin: 0 0 8px; font-size: .84rem; color: var(--muted); font-weight: 600; }
.column-lists .sort-item { min-height: 44px; }
.column-lists .sort-actions .icon-btn { width: 28px; height: 28px; min-width: 28px; }

/* Rollen und Rechte */
.rights-group { border: 1px solid var(--border); border-radius: 12px; padding: 4px 14px 6px; margin: 4px 0 6px; }
.rights-group legend { display: flex; align-items: center; gap: 8px; padding: 0 6px; font-size: .84rem; font-weight: 600; color: var(--text); }
.rights-group legend .btn { min-height: 24px; padding: 2px 8px; font-size: .74rem; }
html body .rights-row { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; margin: 0 !important; padding: 9px 0; border-top: 1px solid var(--border); color: var(--text) !important; cursor: pointer; }
.rights-group legend + .rights-row { border-top: 0; }
.rights-row > span:first-child { display: flex; flex-direction: column; gap: 2px; font-size: .88rem; }
.rights-row small { font-size: .74rem; }

/* Listenkarten (Funktionen, Gründe) */
.list-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.list-card-grid > .card { margin: 0; }
.list-add { display: flex; gap: 8px; margin: 0 0 10px; }
html body .list-add input { margin: 0; flex: 1; }
.list-rows { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.list-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px 6px 10px; border-top: 1px solid var(--border); background: var(--card-bg); }
.list-row:first-child { border-top: 0; }
.list-row:hover { background: var(--surface-hover); }
.list-row form { margin: 0; }
.list-row-title { flex: 1; min-width: 0; font-size: .9rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .icon-btn { width: 32px; height: 32px; min-width: 32px; text-decoration: none; }
.list-row.is-editing { background: var(--brand-tint); }
html body .list-row.is-editing input { flex: 1; margin: 0; min-height: 34px; }

/* Matrix (Pflichtfelder, Sortierung) */
.matrix { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.matrix-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px 140px; gap: 12px; align-items: center; min-height: 48px; padding: 6px 14px; border-top: 1px solid var(--border); }
.matrix-row:first-child { border-top: 0; }
.matrix-row:not(.matrix-head):hover { background: var(--surface-hover); }
.matrix-row > span:not(:first-child) { display: flex; justify-content: center; }
.matrix-head { min-height: 38px; background: var(--surface-soft); color: var(--muted); font-size: .78rem; font-weight: 600; }
.matrix-row small { font-size: .74rem; margin-left: 6px; }
.matrix-1 .matrix-row { grid-template-columns: minmax(0, 1fr) 140px; }
.matrix-sort .matrix-row { grid-template-columns: minmax(140px, 1fr) minmax(160px, 1.1fr) auto; }
.matrix-sort .matrix-row > span:nth-child(2) { justify-content: stretch; }
html body .matrix-sort select { margin: 0; min-height: 36px; }
.matrix-sort .segmented span { gap: 5px; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

/* Chip-Auswahl (Berichtsspalten) */
.chip-group { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip-group legend { width: 100%; margin-bottom: 6px; font-size: .88rem; color: var(--muted); padding: 0; }
.chip-toggle { position: relative; margin: 0 !important; cursor: pointer; }
.chip-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-toggle span { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--card-bg); color: var(--text); font-size: .8rem; transition: background .12s ease, border-color .12s ease, color .12s ease; }
.chip-toggle:hover span { border-color: color-mix(in srgb, var(--primary) 40%, var(--border-strong)); }
.chip-toggle input:checked + span { background: var(--brand-tint); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.chip-toggle input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Berichte */
.report-row { cursor: default; }
.report-row form { margin: 0; display: inline-flex; }
.report-row.is-off .md-row-title { color: var(--muted); }

@media (max-width: 700px) {
  .matrix-row, .matrix-sort .matrix-row { grid-template-columns: 1fr auto auto; }
  .matrix-sort .matrix-row { grid-template-columns: 1fr; }
  .matrix-sort .matrix-row > span { justify-content: flex-start !important; }
  .matrix-row { grid-template-columns: minmax(0, 1fr) 80px 80px; }
  .matrix-1 .matrix-row { grid-template-columns: minmax(0, 1fr) 80px; }
}

/* v36.5.2 – Weitere Angaben als sortierbare Liste */
.md-list.sort-list { margin: 0; }
.md-list .sort-items-flat { border: 0; border-radius: 0; background: transparent; }
.md-list .sort-items-flat .sort-item { border-top: 0; border-radius: 9px; min-height: 52px; }
.md-list .sort-items-flat .sort-item + .sort-item { margin-top: 1px; }
.md-list .sort-items-flat .sort-item.is-active { background: var(--side-active-bg); }
.sort-title-link { text-decoration: none !important; color: inherit !important; }
.sort-title-link code { font-size: .74rem; background: transparent; padding: 0; color: var(--muted); }
.md-list .sort-savebar { position: static; margin: 0; border-radius: 0; border-width: 1px 0 0; box-shadow: none; }


/* ============================================================
   DispoGrid v36.6 – Systemweit einheitliche Seiten
   Seitenkopf, Werkzeugleiste (Suche, Filter, Aktionen), Tabellen
   ============================================================ */

/* Seitenkopf: Titel links, Hauptaktion rechts */
html body .page-title-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
html body .page-title-actions h1 { margin: 0; }
html body .main > h1:first-child { margin-bottom: 16px; }

/* Werkzeugleiste über Listen */
.list-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.list-search { flex: 1 1 320px; margin: 0; min-width: 0; }
.list-search .md-search { width: 100%; }
html body .list-search input[type="search"] { background: var(--card-bg); min-height: 40px; }
.list-toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html body .icon-btn.icon-btn-lg { width: 40px; height: 40px; min-width: 40px; text-decoration: none; }
html body .list-toolbar .chip-toggle span { min-height: 36px; padding: 6px 14px; }

/* Segment-Buttons (z. B. Taxi / Ersatzverkehr / Beide) */
html body .segmented-btns { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-soft); }
html body .segmented-btns .btn,
html body:not(.login-body) .segmented-btns .btn.secondary {
  min-height: 32px; padding: 5px 12px; border: 0 !important; border-radius: 7px; box-shadow: none !important;
  background: transparent !important; color: var(--muted) !important; font-weight: 500;
}
html body .segmented-btns .btn:not(.secondary),
html body:not(.login-body) .segmented-btns .btn:not(.secondary):not(.danger):not(.abbestellen-btn):not(.ghost) {
  background: var(--card-bg) !important; color: var(--primary) !important; font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 30, 54, .12), 0 0 0 1px var(--border) !important;
}
html[data-theme="dark"] body .segmented-btns .btn:not(.secondary) { background: var(--brand-tint) !important; }
html body .segmented-btns .btn:hover { color: var(--text) !important; }

/* Tabellen in Karten: gleiche Optik wie Datenrahmen */
html body .main .card > table,
html body .main .card > .table-scroll > table,
html body .main .card > .table-wrap > table { width: 100%; border-collapse: separate; border-spacing: 0; }
html body .main .card:has(> table),
html body .main .card:has(> .table-scroll > table) { padding: 0; overflow: hidden; }
html body .main .card:has(> table) > table,
html body .main .card > .table-scroll { margin: 0; }
html body .main .card > .table-scroll { overflow-x: auto; }
html body .main .card:has(> table) > :not(table):not(.table-scroll) { margin-left: 18px; margin-right: 18px; }
html body .main .card:has(> table) > h2:first-child,
html body .main .card:has(> table) > h3:first-child { margin-top: 16px; }
html body .main .card > table th,
html body .main .card > .table-scroll > table th {
  position: sticky; top: 0; z-index: 1; background: var(--surface-soft); padding: 10px 14px;
  border-bottom: 1px solid var(--border); white-space: nowrap; text-align: left;
}
html body .main .card > table td,
html body .main .card > .table-scroll > table td { padding: 11px 14px; vertical-align: middle; border-bottom: 1px solid var(--border); }
html body .main .card > table tbody tr:last-child td,
html body .main .card > .table-scroll > table tbody tr:last-child td { border-bottom: 0; }
html body .main .card td:last-child:has(> .btn, > form, > .icon-btn, > a.btn) { text-align: right; white-space: nowrap; }
html body .main .card td > form { display: inline-flex; margin: 0; vertical-align: middle; }
html body .main .card td > .btn + .btn,
html body .main .card td > .btn + form,
html body .main .card td > form + form,
html body .main .card td > form + .btn { margin-left: 4px; }
html body .main table tbody tr td[colspan] { color: var(--muted); text-align: center; padding: 26px 14px; }

/* Sortier-Links in Tabellenköpfen */
html body th a { color: inherit; text-decoration: none; }
html body th a:hover { color: var(--primary); }

/* Seitennavigation */
html body .pagination { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin: 14px 0; }
html body .pagination a, html body .pagination span {
  display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--card-bg);
  color: var(--text); text-decoration: none; font-size: .86rem; font-variant-numeric: tabular-nums;
}
html body .pagination a:hover { border-color: var(--primary); color: var(--primary); }
html body .pagination .active, html body .pagination span.current { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; }

/* Kennzahlen (Statistik, Dashboard) */
html body .stat-card, html body .stats-card, html body .kpi, html body .stat {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-card);
}

/* Karten-Überschriften systemweit */
html body .main .card > h2:first-child,
html body .main .card > h3:first-child { letter-spacing: -.01em; }

@media (max-width: 700px) {
  .list-toolbar { align-items: stretch; }
  .list-toolbar-actions { width: 100%; }
  .list-toolbar-actions > .btn.ghost { margin-left: auto; }
}


/* ============================================================
   DispoGrid v36.7 – Startseite, Statistik, Taxianfragen
   ============================================================ */
.dashboard-head p { margin: 4px 0 0; font-size: .92rem; }

/* Kachelkopf: Icon, Titel mit Anzahl, Untertitel, Link rechts */
html body .widget-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
html body .widget-head > div { flex: 1; min-width: 0; }
html body .widget-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; }
html body .widget-head p { margin: 2px 0 0; color: var(--muted); font-size: .8rem; }
.widget-icon { flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--tile-bg); color: var(--tile-fg); }
html body .widget.card:has(> table) > .widget-head { margin: 16px 18px 12px; }
html body .widget.card > table { border-top: 1px solid var(--border); }
html body .widget table th { background: transparent !important; position: static; }
.cell-time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cell-time strong { display: block; font-size: .92rem; }
.cell-time small { color: var(--muted); font-size: .74rem; }
html body .webapp-home-card { border-color: color-mix(in srgb, var(--primary) 25%, var(--border)) !important; }
html body .webapp-home-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: .74rem; font-weight: 700; }
html body .news-item { padding: 10px 0; border-top: 1px solid var(--border); }
html body .news-item:first-of-type { border-top: 0; }
html body .news-title { font-weight: 600; color: var(--text); }
html body .news-meta { color: var(--muted); font-size: .78rem; margin-top: 2px; }

/* Zeitraum-Leiste und Chips */
.stats-range { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.stats-range-dates { display: flex; align-items: flex-end; gap: 8px; flex: 1 1 auto; }
.stats-range-dates label { margin: 0 !important; display: flex !important; align-items: center; gap: 8px; color: var(--muted); font-size: .84rem; }
html body .stats-range-dates input { margin: 0; min-height: 36px; width: auto; }
.stats-range-dates > span { color: var(--muted); padding-bottom: 8px; }
a.chip { text-decoration: none; }
.chip.is-active { background: var(--brand-tint); border-color: var(--primary); color: var(--primary); font-weight: 600; }

/* Statistik-Abschnitte */
html body .stats-module-head { display: flex; align-items: center; gap: 12px; margin: 22px 0 12px; }
html body .stats-module-head h2 { margin: 0; font-size: 1.15rem; }
html body .stats-module-head p { margin: 2px 0 0; color: var(--muted); font-size: .84rem; }
html body .stats-module-icon { background: var(--tile-bg) !important; color: var(--tile-fg) !important; }
html body .stats-kpi { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
html body .stats-kpi small { display: block; color: var(--muted); font-size: .78rem; }
html body .stats-kpi strong { display: block; font-size: 1.5rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
html body .stats-kpi-icon { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--brand-tint); color: var(--primary); }
html body .stats-table-card h3 { margin: 0 0 12px; font-size: 1rem; }

/* Ranglisten mit Balken */
.bar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bar-list-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.bar-list-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; color: var(--text); }
.bar-list-value { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar-list-value strong { font-size: .9rem; color: var(--text); }
.bar-list-value small { color: var(--muted); font-size: .76rem; }
.bar-list-track { display: block; height: 8px; border-radius: 999px; background: var(--surface-soft); overflow: hidden; }
.bar-list-track > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.bar-list li:first-child .bar-list-track > span { background: var(--accent); }

/* Säulendiagramm Monatsverlauf */
.column-chart { display: flex; align-items: stretch; gap: 6px; height: 200px; padding-top: 6px; overflow-x: auto; }
.column-chart-col { flex: 1 0 34px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 34px; }
.column-chart-value { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.column-chart-bar { width: 100%; max-width: 42px; border-radius: 6px 6px 2px 2px; background: color-mix(in srgb, var(--primary) 75%, transparent); transition: background .12s ease; }
.column-chart-col:hover .column-chart-bar { background: var(--primary); }
.column-chart-label { display: flex; flex-direction: column; align-items: center; font-size: .72rem; color: var(--text); line-height: 1.2; }
.column-chart-label small { color: var(--muted); font-size: .66rem; }

/* Taxianfragen */
.status-tabs { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.status-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; font-weight: 500; white-space: nowrap; }
.status-tabs a:hover { color: var(--text); }
.status-tabs a.is-active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.status-tabs a span { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: .72rem; font-weight: 700; }
.status-tabs a.is-active span { background: var(--primary); color: var(--on-primary); }
html body .webapp-dispatch-card { border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow-card); }
html body .webapp-dispatch-card.status-neu { border-left: 3px solid var(--primary); }
html body .webapp-compact-person { display: grid; grid-template-columns: 32px auto; column-gap: 10px; align-items: center; }
html body .webapp-compact-person .md-avatar { grid-row: span 3; }
html body .webapp-dispatch-details summary { cursor: pointer; color: var(--primary); font-weight: 500; font-size: .86rem; }
html body .webapp-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 16px; text-align: center; }
html body .webapp-empty p { margin: 0; }
@media (max-width: 700px) {
  .stats-range-dates { flex-wrap: wrap; }
  .column-chart { height: 170px; }
}
.column-chart-track { flex: 1; width: 100%; max-width: 42px; display: flex; align-items: flex-end; min-height: 0; }
.column-chart-track .column-chart-bar { max-width: none; }


/* ============================================================
   DispoGrid v36.8 – Einstellungen & restliche Seiten aus einem Guss
   ============================================================ */

/* Einheitliche Schalter für alle Ja/Nein-Optionen */
html body .tag-check input[type="checkbox"],
html body .setting-toggle-line input[type="checkbox"],
html body .md-check input[type="checkbox"],
html body .card label > input[type="checkbox"].switch {
  -webkit-appearance: none; appearance: none;
  flex: 0 0 38px; width: 38px !important; height: 22px !important; min-width: 38px; margin: 0 !important; padding: 0;
  border: 0; border-radius: 999px; background: var(--border-strong); position: relative; cursor: pointer;
  transition: background .15s ease; vertical-align: middle;
}
html body .tag-check input[type="checkbox"]::before,
html body .setting-toggle-line input[type="checkbox"]::before,
html body .md-check input[type="checkbox"]::before,
html body .card label > input[type="checkbox"].switch::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s ease;
}
html body .tag-check input[type="checkbox"]:checked,
html body .setting-toggle-line input[type="checkbox"]:checked,
html body .md-check input[type="checkbox"]:checked,
html body .card label > input[type="checkbox"].switch:checked { background: var(--primary); }
html body .tag-check input[type="checkbox"]:checked::before,
html body .setting-toggle-line input[type="checkbox"]:checked::before,
html body .md-check input[type="checkbox"]:checked::before,
html body .card label > input[type="checkbox"].switch:checked::before { transform: translateX(16px); }
html body .tag-check input[type="checkbox"]:focus-visible,
html body .setting-toggle-line input[type="checkbox"]:focus-visible,
html body .md-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
html body .tag-check input[type="checkbox"]:disabled,
html body .md-check input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
html body .tag-check { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
html body .tag-check label { margin: 0 !important; color: var(--text); font-size: .9rem; cursor: pointer; }
html body .setting-toggle-line { display: flex !important; align-items: center; justify-content: space-between; gap: 14px; margin: 0 !important; padding: 12px 0; border-top: 1px solid var(--border); color: var(--text) !important; cursor: pointer; }
html body .setting-toggle-line:first-child { border-top: 0; }
html body .setting-toggle-line > span { display: flex; flex-direction: column; gap: 2px; }
html body .setting-toggle-line strong { font-size: .9rem; font-weight: 600; }
html body .setting-toggle-line small { color: var(--muted); font-size: .78rem; line-height: 1.4; }

/* Formulare in Karten: Raster statt loser Zeilen */
html body .main .card form.row,
html body .main form.card .row,
html body .main .card .row:has(> label) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 14px; align-items: end;
}
html body .main .card .row > label, html body .main form.card .row > label { margin: 0; }
html body .main .card .row > div:has(> .btn) { display: flex; gap: 8px; align-items: center; }
html body .settings-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-bottom: 10px; }
html body .settings-grid-2 > label { margin: 0; }
html body .main form.card > label, html body .main .card > form > label { display: block; margin: 0 0 10px; }
html body input[type="color"] { width: 52px; height: 38px; padding: 3px; cursor: pointer; vertical-align: middle; }
html body .placeholder-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
html body .placeholder-chips .chip { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .74rem; }
html body .form-actions { border-top: 1px solid var(--border); padding-top: 14px; }
html body .settings-section-title + .settings-section-title { margin-top: 18px; }
html body .card .settings-section-title:not(:first-child) { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
html body .card form > .settings-section-title:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

/* Mein Konto */
.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.account-grid > .card { margin: 0; }

/* Seiten mit Tabellen-Aktionen (Subunternehmen, Webmaster) */
html body .table-actions { white-space: nowrap; text-align: right; }
html body .table-actions .inline-form, html body .inline-form { display: inline-flex; margin: 0 0 0 4px; }

@media (max-width: 700px) {
  html body .settings-grid-2 { grid-template-columns: 1fr; }
  html body .main .card form.row, html body .main .card .row:has(> label) { grid-template-columns: 1fr; }
}

/* v36.9 – Auswahlfelder als Suchliste, Kürzel im Feld */
html body select.dg-select-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; overflow: hidden; clip: rect(0 0 0 0); }
.dg-combobox.dg-select > input {
  cursor: pointer; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366748a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 16px;
}
.dg-combobox.dg-select > input:focus { cursor: text; }
.dg-cb-inbadge {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none;
  padding: 2px 7px; border-radius: 6px; background: var(--tile-bg); color: var(--tile-fg);
  font-size: .74rem; font-weight: 700; letter-spacing: .02em; line-height: 1.4;
}
label > .dg-combobox .dg-cb-inbadge { top: calc(50% + 2px); }
.report-edit-link { text-decoration: none !important; color: inherit !important; }
.report-row.is-active { background: var(--side-active-bg); }
.report-row .icon-btn { width: 32px; height: 32px; min-width: 32px; text-decoration: none; }

/* v36.9.4 – „Abbestellen“: rote Umriss-Variante, in Hell und Dunkel lesbar */
html body .btn.abbestellen-btn:not(.dringend),
html[data-theme="dark"] body .btn.abbestellen-btn:not(.dringend) {
  background: var(--card-bg) !important; background-image: none !important;
  color: var(--danger) !important; border: 1px solid var(--danger-line) !important; box-shadow: none !important;
}
html body .btn.abbestellen-btn:not(.dringend):hover,
html[data-theme="dark"] body .btn.abbestellen-btn:not(.dringend):hover {
  background: var(--danger-tint) !important; border-color: var(--danger) !important; color: var(--danger) !important;
}
html body .btn.abbestellen-btn.dringend { background-image: none !important; color: #fff !important; }
html[data-theme="dark"] body .btn.abbestellen-btn.dringend { color: #2a0b0b !important; }

/* v37.0 – Budgets: Balken mit Füllung, Warn- und Überschreitungsfarbe */
html body .stats-budget-list { display: grid; gap: 16px; }
html body .stats-budget-row { display: block; }
html body .budget-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
html body .budget-head strong { font-size: .92rem; }
html body .budget-numbers { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; flex: 1; }
html body .budget-bar { height: 10px; border-radius: 999px; background: var(--surface-soft); overflow: hidden; margin: 0; width: 100%; }
html body .budget-bar-fill { height: 100%; border-radius: inherit; background: var(--primary); transition: width .4s ease; }
html body .budget-bar-fill.is-ok { background: var(--success); }
html body .budget-bar-fill.is-warn { background: #d99a1e; }
html body .budget-bar-fill.is-over { background: var(--danger); }
html body .md-pill.budget-over { background: var(--danger-tint); color: var(--danger); border-color: var(--danger-line); }
.md-rows { position: relative; }

/* v37.0 – Editor-Werkzeugleiste: Textknöpfe in voller Breite, kein Überlappen */
html body .richtext-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px; }
html body .richtext-toolbar button {
  width: auto !important; min-width: 32px; height: 32px; padding: 0 9px !important;
  font-size: .8rem; font-weight: 500; white-space: nowrap; line-height: 1; overflow: visible;
}
html body .richtext-toolbar select { width: auto; min-height: 32px; height: 32px; padding: 2px 28px 2px 8px; font-size: .82rem; margin: 0; }
html body .richtext-toolbar .rte-sep, html body .richtext-toolbar .toolbar-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }

/* v37.0 – Mobile: Bestell-Overlays springen nicht mehr */
body:has(.overlay.open) { overflow: hidden; }
@media (max-width: 900px) {
  html body .overlay.open { align-items: stretch; padding: 0; }
  html body .overlay .overlay-panel, html body .ev-overlay-panel, html body #ev-overlay .ev-overlay-panel {
    width: 100% !important; max-width: none !important; height: 100dvh; max-height: 100dvh; margin: 0;
    border-radius: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  html body .overlay-head { top: 0; }
  .ev-footer { bottom: 0; margin: 4px -2px 0; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .ev-preview { position: static !important; }
  /* iOS zoomt bei Schrift unter 16 px in Eingabefelder hinein – das ließ das Fenster springen. */
  html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  html body select, html body textarea { font-size: 16px !important; }
  html body #evform.ev-form .basisstunden-picker { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}

/* v36.11 – Statistik aus Bausteinen */
.stats-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.stats-block { margin: 0 !important; min-width: 0; }
.stats-block-voll { grid-column: 1 / -1; }
html body .stats-blocks .stats-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
html body .stats-blocks .stats-kpi { margin: 0; }
.stats-config-link { display: flex; justify-content: flex-end; margin: 14px 0 0; }
.route-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.route-list li { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 14px; align-items: center; }
.route-ends { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .86rem; }
.route-ends > span:not(.route-arrow) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.route-arrow { color: var(--muted); flex: 0 0 auto; display: inline-flex; }
.route-count { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.route-count strong { text-align: right; font-size: .88rem; }
@media (max-width: 800px) {
  .stats-blocks { grid-template-columns: 1fr; }
  .route-list li { grid-template-columns: 1fr; gap: 4px; }
}

/* v36.12 – Anschrift-Felder, PDF-Layout-Auswahl */
.md-fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 6px 14px 12px; margin: 2px 0 0; display: grid; gap: 10px; }
.md-fieldset legend { padding: 0 6px; font-size: .84rem; font-weight: 600; color: var(--text); }
.md-fieldset > label { margin: 0; }
.md-grid-plz { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px 12px; }
.md-grid-plz > label { margin: 0; }
.pdf-layout-choice { margin: 0 0 14px !important; }
.pdf-layout-choice .hinweis { margin: 8px 0 0; }