/* ===== Multi-Select Dropdown ===== */
.multi-select-dropdown {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 100;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  padding: 6px 0;
  max-height: 260px;
  overflow-y: auto;
}
.multi-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 13px;
}
.multi-select-option:hover {
  background: var(--primary-light);
}
.multi-select-option input[type="checkbox"] {
  width: auto;
  margin: 0;
  flex-shrink: 0;
}
.multi-select-option span {
  flex: 1;
}

/* ===== Login Screen ===== */
.login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #2a2e32 url('/hintergrund.png?v=2') center center / cover no-repeat;
}

.login-box {
  background: #fff;
  border-radius: 12px;
  padding: 40px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  text-align: center;
}

.login-logo {
  width: 317px;
  height: auto;
  object-fit: contain;
  margin-bottom: 16px;
  background: transparent;
  pointer-events: none;
}

.login-subtitle {
  color: #6b7280;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 28px;
}

.login-box .form-group {
  text-align: left;
  margin-bottom: 16px;
}

.login-box label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #374151;
}

.login-box select,
.login-box input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
}

/* ===== O365 / S3 Loading Animation ===== */
@keyframes o365loading {
  0% { width: 10%; margin-left: 0; }
  50% { width: 50%; margin-left: 25%; }
  100% { width: 10%; margin-left: 90%; }
}

/* ===== S3 Dropzone ===== */
.s3-dropzone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--card-bg);
  margin-bottom: 0;
}
.s3-dropzone:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}
.s3-dropzone-active {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.15);
}
.s3-dropzone-icon {
  font-size: 36px;
  margin-bottom: 8px;
  opacity: 0.6;
}
.s3-dropzone-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.s3-dropzone-sub {
  font-size: 13px;
  color: var(--text-muted);
}
.s3-dropzone-sub a {
  color: var(--primary);
  text-decoration: underline;
  font-weight: 500;
}

/* ===== S3 Context Menu ===== */
.s3-context-menu {
  position: absolute;
  z-index: 10000;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  min-width: 160px;
  padding: 4px 0;
  font-size: 13px;
}
.s3-ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  color: var(--text);
}
.s3-ctx-item:hover {
  background: var(--primary-light);
}
.s3-ctx-danger {
  color: var(--danger);
}
.s3-ctx-danger:hover {
  background: #fef2f2;
}
.s3-ctx-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ===== S3 File Browser ===== */
.s3-row {
  display: grid;
  grid-template-columns: 26px 1fr 90px 150px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  gap: 8px;
  user-select: none;
}
.s3-selected {
  background: #cce0ff !important;
  outline: 1px solid #99c2ff;
}
.s3-row:last-child { border-bottom: none; }
.s3-folder-row, .s3-file-row { cursor: pointer; }
.s3-folder-row:hover { background: var(--primary-light); }
.s3-file-row:hover { background: var(--primary-light); }
.s3-icon { font-size: 18px; text-align: center; }
.s3-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s3-size { color: var(--text-muted); text-align: right; font-size: 12px; }
.s3-date { color: var(--text-muted); font-size: 12px; }
.s3-actions { text-align: right; white-space: nowrap; }

@media (max-width: 768px) {
  .s3-row {
    grid-template-columns: 26px 1fr auto;
  }
  .s3-size, .s3-date { display: none; }
}

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

:root {
  /* Markenfarben Rheinland Legal (aus dem Logo): Bordeaux #800218, Anthrazit #303539 */
  --primary: #800218;
  --primary-hover: #64011a;
  --primary-light: #f6e7ea;
  --sidebar-bg: #303539;
  --sidebar-text: #dfe2e5;
  --sidebar-active: #43494e;
  --bg: #f3f4f6;
  --card-bg: #ffffff;
  --text: #111827;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --success: #059669;
  --warning: #d97706;
  --danger: #dc2626;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
}

html {
  /* Reserviert die Breite des vertikalen Seiten-Scrollbalkens permanent - sonst aendert sich
     die verfuegbare Breite zwischen "Seite noch kurz, kein Scrollbalken" (z.B. waehrend
     "Laden...") und "Seite lang genug fuer Scrollbalken" (nach dem Einfuegen einer vollen
     Tabelle). Betraf u.a. die Akten-Spaltenbreiten, die knapp VOR dem Erscheinen des
     Scrollbalkens berechnet wurden und dadurch beim ersten Rendern zu breit ausfielen. */
  scrollbar-gutter: stable;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  font-size: 14px;
}

/* ===== App Layout ===== */
.app {
  display: flex;
  min-height: 100vh;
}

/* ===== Sidebar ===== */
.sidebar {
  width: 240px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
}

.sidebar-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-logo {
  width: 130px;
  height: auto;
  object-fit: contain;
  opacity: 0.95;
}

.nav-list {
  list-style: none;
  padding: 12px 0;
  flex: 1;
  overflow-y: auto;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
  gap: 10px;
}

.nav-link:hover {
  background: var(--sidebar-active);
  color: #fff;
}

.nav-link.active {
  background: var(--primary);
  color: #fff;
}

.nav-icon {
  width: 20px;
  text-align: center;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-icon svg {
  vertical-align: middle;
}

/* ===== Nav Submenu ===== */
.nav-item-has-submenu {
  position: relative;
}
.nav-submenu-toggle::after {
  content: '\25B8';
  margin-left: auto;
  font-size: 11px;
  transition: transform 0.2s;
}
.nav-item-has-submenu.open .nav-submenu-toggle::after {
  transform: rotate(90deg);
}
.nav-submenu {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  background: rgba(255,255,255,0.04);
}
.nav-item-has-submenu.open .nav-submenu {
  max-height: 500px;
}
.nav-submenu .nav-link {
  padding: 8px 20px 8px 50px;
  font-size: 13px;
}

/* ===== Nav Badge (unread count) ===== */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  margin-left: 6px;
  line-height: 1;
}

.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  color: #6b7280;
  font-size: 12px;
}

/* ===== Main Content ===== */
.content {
  margin-left: 240px;
  flex: 1;
  min-width: 0;
  padding: 24px 32px 60px;
  min-height: 100vh;
}

/* ===== Page Header ===== */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}

/* ===== Cards ===== */
.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.card-header h3 {
  font-size: 16px;
  font-weight: 600;
}

/* ===== Stats Grid ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  text-align: center;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--primary);
}

.stat-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  text-decoration: none;
  line-height: 1.4;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-success {
  background: var(--success);
  color: #fff;
}

.btn-success:hover {
  background: #047857;
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}

.btn-danger:hover {
  background: #b91c1c;
}

/* "Benutzer"-Rolle darf nichts loeschen — alle btn-danger Buttons (= Loesch-/Entfernen-Aktionen) global ausblenden.
   Backend-Middleware blockt zusaetzlich jedes DELETE /api/* fuer diese Rolle. */
/* "Benutzer" sehen Lösch-Buttons nicht — AUSSER dem Bestätigen-Button im Confirm-Dialog
   (sonst fehlt beim erlaubten Löschen von S3-Dateien/Gutachten der OK-Button). */
body.role-benutzer .btn-danger:not(#app-confirm-yes) {
  display: none !important;
}

/* "Benutzer" sehen den Menueintrag "Rückvergütungen" gar nicht (zusaetzlich zum JS-Gate). */
body.role-benutzer #nav-rueckverguetungen {
  display: none !important;
}

/* "Benutzer" sehen das Feld "Farbe des Vermittlers" im Bearbeiten-Formular nicht
   (zusaetzlich zum bedingten Rendern). */
body.role-benutzer .verm-color-row {
  display: none !important;
}

/* Mehrfachauswahl in der Rückvergütungs-Tabelle (Explorer-Stil, Strg/Shift). */
#dash-rebate-table tr.rebate-row { user-select: none; }
#dash-rebate-table tr.rebate-row.row-selected > td { background: rgba(37, 99, 235, 0.14); }

.btn-secondary {
  background: #e5e7eb;
  color: var(--text);
}

.btn-secondary:hover {
  background: #d1d5db;
}

.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

.btn-icon {
  padding: 6px 10px;
}

/* ===== Tables ===== */
.table-wrapper {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

thead {
  background: #f9fafb;
}

th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border);
}

td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

tr:hover {
  background: #f9fafb;
}

tr.clickable {
  cursor: pointer;
}

tr.clickable:hover {
  background: var(--primary-light);
}

/* Zebra-Streifen fuer die Aktenliste (bessere Unterscheidung der Zeilen). Jede zweite Zeile
   leicht hinterlegt. Der Hover kommt DANACH (gleiche Spezifitaet) und ueberschreibt das Zebra. */
#akten-table-content tbody tr:nth-child(even) { background: var(--bg); }
#akten-table-content tbody tr:hover { background: var(--primary-light); }

/* Zebra-Streifen fuer die Telefonat-Liste (Post & Kommunikation) - gleiches Muster wie Post-Liste. */
#komm-list .s3-row:nth-child(odd) { background: var(--bg); }

/* Zebra-Streifen fuer die Post-Liste (Post & Kommunikation) - gleiches Muster wie Aktenliste.
   Jeder Eintrag ist Zeile + Anhangliste (.post-eintrag), der Streifen liegt auf der Zeile. */
#post-list .post-eintrag:nth-child(odd) > .s3-row { background: var(--bg); }

/* Anhaenge einer E-Mail, aufgeklappt unter ihrer Zeile (Vorgabe Ben 2026-10-26): Klick = Vorschau rechts. */
#post-list .post-anhaenge { border-bottom: 1px solid var(--border); background: #fffbeb; padding: 3px 0; }
#post-list .post-anhang {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 12px 4px 64px;
  font-size: 12px; color: #78350f; cursor: pointer; user-select: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#post-list .post-anhang:hover { background: #fef3c7; }
#post-list .post-anhang.gewaehlt { background: var(--primary-light); color: var(--text); }
#post-list .post-anhang-wartet { cursor: default; color: var(--text-muted); font-style: italic; }
#post-list .post-anhang-wartet:hover { background: transparent; }
#post-list .post-anhang-groesse { color: var(--text-muted); font-size: 11px; }

/* ===== Forms ===== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--text);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: #fff;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 60px;
}

/* Rich Text Editor */
.richtext-editor {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.richtext-editor:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.1);
}

.richtext-toolbar {
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-wrap: wrap;
}

.richtext-toolbar button {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
  min-width: 28px;
  text-align: center;
}

.richtext-toolbar button:hover {
  background: var(--border);
}

.richtext-toolbar button.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.richtext-toolbar .separator {
  width: 1px;
  background: var(--border);
  margin: 0 4px;
  align-self: stretch;
}

.rt-color-palette {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--card-bg);
  flex-wrap: wrap;
}

.rt-color-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.12s, transform 0.12s;
}

.rt-color-dot:hover {
  border-color: var(--text);
  transform: scale(1.15);
}

.richtext-content {
  padding: 8px 12px;
  min-height: 160px;
  max-height: 400px;
  overflow-y: auto;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.6;
  outline: none;
}

.richtext-content:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
}

.richtext-content ul,
.richtext-content ol {
  margin: 4px 0;
  padding-left: 24px;
}

.richtext-content p {
  margin: 4px 0;
}

/* Changelog description display */
.changelog-description ul,
.changelog-description ol {
  margin: 4px 0;
  padding-left: 24px;
}

.changelog-description p {
  margin: 4px 0;
}

.form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.form-row .form-group {
  flex: 1;
  min-width: 200px;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.form-check label {
  margin-bottom: 0;
  cursor: pointer;
}

.form-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ===== Search Bar ===== */
.search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.search-bar input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
}

.search-bar input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.1);
}

/* ===== Filter Bar ===== */
.filter-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: end;
}

.filter-bar .form-group {
  margin-bottom: 0;
  min-width: 160px;
}

.filter-row td input.filter-input,
.filter-row td select.filter-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  padding: 3px 6px;
}

/* ===== Badges ===== */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.badge-blue {
  background: #dbeafe;
  color: #1e40af;
}

.badge-green {
  background: #d1fae5;
  color: #065f46;
}

.badge-yellow {
  background: #facc15;
  color: #1a1a1a;
}

.badge-red {
  background: #dc2626;
  color: #ffffff;
}

.badge-gray {
  background: #f3f4f6;
  color: #374151;
}
.badge-purple {
  background: #ede9fe;
  color: #6d28d9;
}
.badge-orange {
  background: #fff7ed;
  color: #c2410c;
}
.badge-mahnstufe1 {
  background: #ffedd5;
  color: #9a3412;
}
.badge-teal {
  background: #ccfbf1;
  color: #0f766e;
}
.badge-indigo {
  background: #e0e7ff;
  color: #4338ca;
}
.badge-pink {
  background: #fce7f3;
  color: #be185d;
}
.badge-lime {
  background: #ecfccb;
  color: #4d7c0f;
}
.badge-mahnstufe2 {
  background: #fee2e2;
  color: #991b1b;
  font-weight: 700;
}

/* ===== Modal ===== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow-y: auto;
}

.modal-overlay.active {
  display: flex;
}

.modal {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  width: 90%;
  max-width: 750px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal.modal-preview {
  max-width: 900px;
}

.modal.modal-wide {
  max-width: 950px;
}

.modal.modal-form-wide {
  max-width: 900px;
}

.modal.modal-email-composer {
  max-width: 980px;
  width: 96%;
}
.modal.modal-email-composer .modal-body { padding: 0; }
.modal.modal-email-composer .modal-header { background:#f3f2f1; }

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-header h2 {
  font-size: 18px;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 4px;
}

.modal-close:hover {
  color: var(--text);
}

.modal-body {
  padding: 20px;
}

.modal-body:has(.scan-grid) {
  padding: 14px 18px;
}

/* Customer form compact two-column layout */
.customer-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
.customer-form-grid .form-group {
  margin-bottom: 0;
}
.customer-form-grid .form-group label {
  font-size: 12px;
  margin-bottom: 2px;
}
.customer-form-grid .form-group input,
.customer-form-grid .form-group select,
.customer-form-grid .form-group textarea {
  padding: 6px 8px;
  font-size: 13px;
}
.customer-form-grid .full-width {
  grid-column: 1 / -1;
}

/* Credits table */
.credits-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.credits-table th,
.credits-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.credits-table th {
  background: var(--bg-dark);
  font-weight: 600;
  font-size: 12px;
}
.credits-table td input {
  width: 100%;
  padding: 4px 6px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.credits-table td input[type="number"] {
  width: 90px;
}

/* ===== Calendar ===== */
.cal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.cal-mobile-only {
  display: none;
}
.cal-header h2 {
  margin: 0;
  min-width: 220px;
}
.cal-nav-btn {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 16px;
  color: var(--text);
  transition: background 0.15s;
}
.cal-nav-btn:hover {
  background: var(--bg-dark);
}
.cal-grid {
  display: grid;
  grid-template-columns: 60px repeat(5, 1fr); /* overridden by inline style */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card-bg);
}
.cal-station-header {
  padding: 10px 8px;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  background: var(--bg-dark);
  border-bottom: 2px solid var(--border);
  border-left: 1px solid var(--border);
}
/* Google-Verbindung: Symbol im Kopf, Sanduhr an unbestaetigten Terminen,
   gesperrte Spalten (keine bestaetigte Verbindung) + Warnbanner */
.cal-g-icon {
  vertical-align: -1px;
}
.cal-sync-pending {
  font-size: 10px;
}
.cal-col-blocked .cal-hour-row {
  cursor: not-allowed;
  background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(0,0,0,0.025) 6px, rgba(0,0,0,0.025) 12px);
}
.cal-sync-banner {
  background: #fef2f2;
  border: 1px solid #dc2626;
  color: #991b1b;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.6;
}
/* Spalten per Drag & Drop im Kopf umsortieren (persoenliche Ansicht je Benutzer) */
.cal-station-header[draggable="true"] {
  cursor: grab;
  user-select: none;
}
.cal-station-header.cal-col-dragging {
  opacity: 0.45;
}
.cal-station-header.cal-col-drop-left {
  box-shadow: inset 4px 0 0 var(--primary, #2563eb);
}
.cal-station-header.cal-col-drop-right {
  box-shadow: inset -4px 0 0 var(--primary, #2563eb);
}
.cal-time-col {
  background: var(--bg-dark);
  border-right: 1px solid var(--border);
}
.cal-time-label {
  height: 15px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 1px 6px 0 0;
  font-size: 11px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.cal-time-label.cal-half-hour {
  border-bottom-style: dashed;
}
.cal-time-label.cal-quarter-label {
  border-bottom-style: dotted;
  border-bottom-color: var(--border);
}
.cal-station-col {
  position: relative;
  border-left: 1px solid var(--border);
}
.cal-hour-row {
  height: 15px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  position: relative;
}
.cal-hour-row.cal-half-hour {
  border-bottom-style: dashed;
}
.cal-hour-row.cal-quarter {
  border-bottom-style: dotted;
}
.cal-hour-row:hover {
  background: rgba(59,130,246,0.08);
}
/* Mouseover-Zeitanzeige auf FREIEN Slots: Terminkarten (.cal-appointment) liegen
   ueber den Zeilen und fangen den Hover ab - ueber Terminen erscheint also nichts. */
.cal-hour-row:hover::after {
  content: attr(data-slot);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--primary, #2563eb);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 10px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 40;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.cal-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #ef4444;
  z-index: 50;
  pointer-events: none;
  margin-top: 40px;
}
.cal-now-line::before {
  content: '';
  position: absolute;
  left: 52px;
  top: -4px;
  width: 10px;
  height: 10px;
  background: #ef4444;
  border-radius: 50%;
}
.cal-now-label {
  position: absolute;
  left: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #ef4444;
  z-index: 51;
  pointer-events: none;
  margin-top: 40px;
}
.cal-appointment {
  position: absolute;
  left: 2px;
  right: 2px;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11px;
  line-height: 1.3;
  overflow: hidden;
  cursor: pointer;
  color: #fff;
  z-index: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: opacity 0.15s;
}
.cal-appointment:hover {
  opacity: 0.85;
}
.cal-search-item:hover {
  background: var(--bg-dark);
}
.cal-search-item:last-child {
  border-bottom: none;
}
.cal-appointment.overlap-2.pos-0 { left: 2px; right: calc(50% + 1px); }
.cal-appointment.overlap-2.pos-1 { left: calc(50% + 1px); right: 2px; }
.cal-appointment.overlap-3.pos-0 { left: 2px; right: calc(66.66% + 1px); }
.cal-appointment.overlap-3.pos-1 { left: calc(33.33% + 1px); right: calc(33.33% + 1px); }
.cal-appointment.overlap-3.pos-2 { left: calc(66.66% + 1px); right: 2px; }
.cal-appointment.overlap-4.pos-0 { left: 2px; right: calc(75% + 1px); }
.cal-appointment.overlap-4.pos-1 { left: calc(25% + 1px); right: calc(50% + 1px); }
.cal-appointment.overlap-4.pos-2 { left: calc(50% + 1px); right: calc(25% + 1px); }
.cal-appointment.overlap-4.pos-3 { left: calc(75% + 1px); right: 2px; }
.cal-booking-online { background: #7c3aed; }
.cal-booking-telefonisch { background: #2563eb; }
.cal-booking-mail { background: #d97706; }
.cal-booking-vorort { background: #059669; }
.cal-booking-blocker { background: #1a1a1a; }
.cal-vacation-banner {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.cal-vac-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
/* Geburtstags-Tag im Kalender-Banner: kraeftiger Farbverlauf (Pink/Orange/Gelb), der
   langsam wandert, pulsierendes Leuchten, dazu Ballons, die in Dauerschleife hinter
   dem Text aufsteigen. Hebt sich bewusst von den Abwesenheits-Farben (Rot/Grau/Lila) ab. */
.cal-birthday-tag {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #ff2e97, #ff7a18, #ffd60a, #ff2e97);
  background-size: 300% 300%;
  border: 1px solid rgba(255,255,255,0.6);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  background-position: 0% 50%;
}
/* Intro (Klasse setzt app.js nur in den ersten 10 s nach dem Oeffnen der Terminseite):
   Farbverlauf wandert einmal 10 s, Leuchten pulsiert 4x, dann bleibt der Tag ruhig stehen.
   --bday-offset (negativ) = bereits verstrichene Zeit, damit Re-Renders nicht neu starten. */
.cal-birthday-tag.cal-birthday-intro {
  animation: calBdayGradient 10s ease-in-out 1 both, calBdayGlow 2.5s ease-in-out 4 both;
  animation-delay: var(--bday-offset, 0ms);
}
.cal-birthday-tag .cal-bday-text {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cal-bday-icon {
  display: inline-block;
  transform-origin: 50% 90%;
}
.cal-birthday-intro .cal-bday-icon {
  animation: calBdayWiggle 2s ease-in-out 5 both;
  animation-delay: var(--bday-offset, 0ms);
}
.cal-bday-balloons {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cal-bday-balloons i {
  position: absolute;
  bottom: -18px;
  width: 9px;
  height: 12px;
  border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%;
  background: #fff;
  opacity: 0;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,0.12);
  animation: calBdayRise 3.6s linear infinite;
}
.cal-bday-balloons i::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 7px;
  background: rgba(255,255,255,0.85);
}
.cal-bday-balloons i:nth-child(1) { left: 5%;  background: #ffffff; animation-delay: 0s;    animation-duration: 3.4s; }
.cal-bday-balloons i:nth-child(2) { left: 21%; background: #7cf5ff; animation-delay: 0.9s;  animation-duration: 4.1s; }
.cal-bday-balloons i:nth-child(3) { left: 39%; background: #b9ff6a; animation-delay: 1.7s;  animation-duration: 3.7s; }
.cal-bday-balloons i:nth-child(4) { left: 57%; background: #fff27a; animation-delay: 0.4s;  animation-duration: 4.4s; }
.cal-bday-balloons i:nth-child(5) { left: 75%; background: #ffb3ea; animation-delay: 2.3s;  animation-duration: 3.9s; }
.cal-bday-balloons i:nth-child(6) { left: 90%; background: #c4b5ff; animation-delay: 1.2s;  animation-duration: 3.5s; }
@keyframes calBdayRise {
  0%   { transform: translate(0, 0) rotate(-4deg); opacity: 0; }
  12%  { opacity: 0.95; }
  50%  { transform: translate(3px, -28px) rotate(4deg); }
  88%  { opacity: 0.9; }
  100% { transform: translate(-2px, -58px) rotate(-3deg); opacity: 0; }
}
@keyframes calBdayGradient {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 100% 50%; }
  50%  { background-position: 0% 50%; }
  75%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes calBdayGlow {
  0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,0.2), 0 0 0 0 rgba(255,46,151,0.6); }
  50%      { box-shadow: 0 2px 10px rgba(0,0,0,0.25), 0 0 0 7px rgba(255,46,151,0); }
}
@keyframes calBdayWiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-10deg); }
  75%      { transform: rotate(10deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cal-birthday-tag.cal-birthday-intro, .cal-birthday-intro .cal-bday-icon { animation: none; }
  .cal-bday-balloons { display: none; }
}
.cal-legend {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
}
.cal-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cal-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

/* ===== Toast Notifications ===== */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  padding: 12px 20px;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  box-shadow: var(--shadow-md);
  animation: slideIn 0.3s ease;
  max-width: 400px;
}

.toast-success {
  background: var(--success);
}

.toast-error {
  background: var(--danger);
}

.toast-info {
  background: var(--primary);
}

.toast-warning {
  background: var(--warning);
  color: #fff;
}

/* Bleibender Hinweis bei aufgebrauchtem KI-Limit (kiLimitHinweis in app.js, 2026-09-28):
   bleibt stehen, bis er weggeklickt wird. */
.ki-limit-hinweis {
  position: relative;
  padding-right: 38px;
  line-height: 1.45;
}
.ki-limit-hinweis strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
}
.ki-limit-hinweis-zu {
  position: absolute;
  top: 6px;
  right: 8px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.ki-limit-hinweis-zu:hover { opacity: 0.8; }

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ===== Empty State ===== */
.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
}

.empty-state p {
  font-size: 16px;
  margin-bottom: 16px;
}

/* ===== Customer Detail ===== */
.customer-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.info-item {
  margin-bottom: 8px;
}

.info-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-value {
  font-size: 14px;
  font-weight: 500;
}

/* ===== Back Link ===== */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary);
  text-decoration: none;
  font-size: 13px;
  margin-bottom: 16px;
  cursor: pointer;
}

.back-link:hover {
  text-decoration: underline;
}

/* ===== Split Resize Handle ===== */
#s3-split-handle:hover {
  background: var(--primary) !important;
}

/* ===== Akte Detail ===== */
.akte-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0;
  padding-bottom: 20px;
}

.akte-header-fields {
  display: flex;
  gap: 32px;
}

.akte-header-field-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.akte-header-field-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.akte-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}

.akte-tab {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.akte-tab:hover {
  color: var(--text);
}

.akte-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.akte-section {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.akte-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

/* --- Akte Grid Layout --- */
.akte-grid-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  grid-auto-rows: auto;
}

.akte-grid-row.akte-row-1 {
  height: 260px;
}

.akte-grid-row.akte-row-1-auto {
  min-height: 260px;
  height: auto;
  grid-template-columns: 1fr 1fr;
}

.akte-grid-row.akte-row-2 {
  height: 380px;
}

.akte-grid-left {
  min-width: 0;
}

.akte-card-right {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.akte-card-right-header {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text);
  padding: 0 16px;
  height: 48px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: #e5eaf0;
  flex-shrink: 0;
}

.akte-card-right-body {
  padding: 14px 16px;
  overflow: hidden;
  flex: 1;
}

/* --- Beteiligte Card --- */
.beteiligte-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.beteiligte-card .beteiligte-body {
  flex: 1;
  overflow: hidden;
}

.beteiligte-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  min-height: 44px;
  border-bottom: 1px solid var(--border);
  background: #e5eaf0;
  flex-shrink: 0;
}

.beteiligte-header-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text);
}

.beteiligte-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--border);
  background: var(--card-bg);
  /* Faellt die Summe der Mindestbreiten aller Tabs groesser aus als der verfuegbare Platz
     (z.B. sehr viele Beteiligte gleichzeitig), soll horizontal gescrollt werden koennen,
     statt dass Tabs unsichtbar aus der Box herausgeschoben werden. */
  overflow-x: auto;
  overflow-y: hidden;
}

.beteiligte-tab {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 10px 6px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
  text-align: left;
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
}

.beteiligte-tab .bet-tab-name {
  display: block;
  font-weight: 400;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Der X-Button (Entfernen) sitzt oben rechts, nur ueber der Label-Zeile - nur die braucht
   zusaetzlichen Rechts-Abstand. Ein negatives Margin auf .bet-tab-name (frueherer Versuch)
   verkleinert nebenbei auch die eigene Breitenberechnung des Tabs (negative Margins zaehlen bei
   der Shrink-to-fit-Ermittlung des Elternelements mit) und schnitt dadurch auch kurze Namen zu
   frueh ab - deshalb bekommt stattdessen NUR das Label direkt sein eigenes Rechts-Padding. */
.beteiligte-tab strong {
  display: block;
  padding-right: 16px;
  box-sizing: border-box;
  max-width: 100%;
}

/* Priorisierte Schrumpf-Reihenfolge, wenn nicht alle Beteiligten-Tabs nebeneinander passen:
   Flexbox schrumpft ein Element erst bis zu seiner min-width, bevor der Rest des zu
   schrumpfenden Platzes auf die verbleibenden (noch nicht am Minimum angekommenen) Elemente
   verteilt wird - ueber deutlich unterschiedliche flex-shrink-Faktoren lassen sich so klare
   Prioritaets-Stufen abbilden, ohne dass kuerzere Eintraege unnoetig mitgekuerzt werden:
   1. Gegner (oft mehrere Namen) - schrumpft zuerst und am staerksten
   2. Versicherung
   3. Vermittler / Werkstatt / Anwalt / Sonstige - gleichwertig
   4. Mandant - bleibt so lang wie moeglich vollstaendig sichtbar */
.beteiligte-tab.bet-type-kunde {
  flex-shrink: 1;
  min-width: 200px;
}
.beteiligte-tab.bet-type-vermittler,
.beteiligte-tab.bet-type-werkstatt,
.beteiligte-tab.bet-type-anwalt,
.beteiligte-tab.bet-type-sonstige {
  flex-shrink: 20;
  min-width: 200px;
}
.beteiligte-tab.bet-type-versicherung {
  flex-shrink: 60;
  min-width: 200px;
}
.beteiligte-tab.bet-type-unfallgegner {
  flex-shrink: 200;
  min-width: 200px;
}

.beteiligte-tab:hover {
  background: var(--bg);
}

.beteiligte-tab.active {
  background: var(--primary-light);
  border-bottom-color: var(--primary);
  color: var(--primary);
}

.beteiligte-tab.active .bet-tab-name {
  color: var(--primary);
}

.beteiligte-tab[draggable="true"] {
  cursor: grab;
}

.beteiligte-tab.bet-dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.beteiligte-tab.bet-dragover {
  border-bottom-color: var(--primary);
  background: var(--primary-light);
}

.beteiligte-tab .bet-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.beteiligte-tab:hover .bet-remove {
  opacity: 1;
}

.beteiligte-tab .bet-remove:hover {
  background: var(--danger);
  color: #fff;
}

.beteiligte-body {
  padding: 16px 20px;
  min-height: 90px;
}

.beteiligte-body .bet-contact-grid {
  display: grid;
  /* Spalte 1 (Name/E-Mail) bekommt 100px mehr Platz, Spalte 2 (Ansprechpartner/Straße) und
     Spalte 3 (Telefon/PLZ-Ort) je 50px weniger - Gesamtbreite bleibt unveraendert, Name/
     lange Firmennamen bekommen dafuer spuerbar mehr Raum.
     Wichtig: "fr" darf laut Spec NICHT in calc() verwendet werden (macht den gesamten Wert
     ungueltig -> Grid faellt komplett auf "none" zurueck) - deshalb hier mit % gerechnet,
     das mit px in calc() problemlos kombinierbar ist. */
  grid-template-columns: calc(33.333% + 100px) calc(33.333% - 50px) calc(33.333% - 50px);
  gap: 6px 18px;
}

.beteiligte-body .bet-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  color: var(--text-muted);
  font-size: 13px;
}

.btn-bet-detail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn-bet-detail:hover {
  background: #d4e2f7;
  border-color: var(--primary);
}

.btn-add-beteiligter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn-add-beteiligter:hover {
  background: #d4e2f7;
  border-color: var(--primary);
}

/* --- Add Participant Popover --- */
.bet-popover-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 1100;
  justify-content: center;
  align-items: center;
}

.bet-popover-overlay.active {
  display: flex;
}

.bet-popover {
  background: var(--card-bg);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  width: 520px;
  max-width: 92vw;
  overflow: visible;
  animation: betPopIn 0.15s ease-out;
}

@keyframes betPopIn {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.bet-popover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.bet-popover-header h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.bet-popover-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0;
  line-height: 1;
}

.bet-popover-close:hover {
  color: var(--text);
}

.bet-popover-body {
  padding: 18px;
}

.bet-popover-body .form-group {
  margin-bottom: 14px;
}

.bet-popover-body .form-group:last-child {
  margin-bottom: 0;
}

.bet-popover-body label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.bet-popover-body select,
.bet-popover-body input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  background: var(--card-bg);
  color: var(--text);
  transition: border-color 0.15s;
}

.bet-popover-body select:focus,
.bet-popover-body input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.1);
}

.bet-popover-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.bet-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  max-height: 320px;
  overflow-y: auto;
  z-index: 10;
}

.bet-search-results:empty {
  display: none;
}

.bet-search-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.bet-search-item:last-child {
  border-bottom: none;
}

.bet-search-item:hover {
  background: var(--primary-light);
}

.bet-search-item-selected,
.bet-search-item-selected:hover {
  background: var(--primary);
  color: #fff;
}

.bet-search-item-selected span {
  color: #fff !important;
}

.miet-pick-table tbody tr:hover {
  background: var(--primary-light);
}
.miet-pick-table tbody tr:active {
  background: var(--primary);
  color: #fff;
}

.bet-selected-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-top: 4px;
}

/* --- Akteneinträge Card --- */
.eintraege-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.eintraege-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  min-height: 44px;
  border-bottom: 1px solid var(--border);
  background: #e5eaf0;
  flex-shrink: 0;
}

.eintraege-header-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text);
}

.eintraege-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  min-height: 0;
}

.eintraege-list {
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.eintraege-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: var(--text-muted);
  font-size: 13px;
}

.eintraege-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}

.eintraege-item:last-child {
  border-bottom: none;
}

.eintraege-item:hover {
  background: var(--bg);
}

.eintraege-item.active {
  background: var(--primary-light);
  border-left: 3px solid var(--primary);
  padding-left: 9px;
}

.eintraege-item-date {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.eintraege-item-preview {
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.eintraege-item-author {
  font-size: 12px;
  color: var(--primary);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.eintraege-detail {
  padding: 0;
  overflow-y: auto;
}

.eintraege-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 200px;
  color: var(--text-muted);
  font-size: 13px;
}

.eintraege-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.eintraege-detail-date {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.eintraege-detail-author {
  font-size: 12px;
  color: var(--primary);
  font-weight: 600;
}

.eintraege-detail-text {
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  word-break: break-word;
  font-family: inherit;
}

.eintraege-detail-text ul,
.eintraege-detail-text ol {
  margin: 4px 0;
  padding-left: 24px;
}

.eintraege-detail-text p {
  margin: 4px 0;
}

.eintraege-form-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 1100;
  justify-content: center;
  align-items: center;
}

.eintraege-form-overlay.active {
  display: flex;
}

/* ===== Reminder Card Styling ===== */
.reminder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 8px;
  background: #fff;
}

.reminder-info {
  flex: 1;
}

.reminder-customer {
  font-weight: 600;
  font-size: 14px;
}

.reminder-vehicle {
  color: var(--text-muted);
  font-size: 13px;
}

.reminder-contact {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--text);
  margin-top: 4px;
}

.reminder-date {
  font-weight: 600;
  color: var(--warning);
  white-space: nowrap;
}

/* ===== Reminder Tabs ===== */
.reminder-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border);
}

.reminder-tab {
  padding: 10px 24px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.reminder-tab:hover {
  color: var(--primary);
}

.reminder-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.badge-blue {
  background: var(--primary);
  color: #fff;
}

.plan-status-select {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}

.plan-note-input {
  border: 1px solid var(--border);
  border-radius: 4px;
}

.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

/* ===== Vacation Calendar ===== */
/* ===== Vacation Calendar – Refined Precision ===== */
.vac-calendar {
  border-collapse: separate;
  border-spacing: 2px;
  width: auto;
  font-size: 12px;
  background: var(--card-bg);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
}
.vac-calendar th,
.vac-calendar td {
  border: none;
  text-align: center;
  padding: 0;
}
.vac-calendar th {
  background: transparent;
  color: var(--text-muted);
  font-weight: 700;
  padding: 4px 2px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.vac-calendar tr {
  transition: background 0.15s;
}
.vac-calendar tr:hover .vac-day-cell:not(.vac-empty) {
  filter: brightness(0.96);
}
.vac-month-col {
  width: auto;
  white-space: nowrap;
}
.vac-day-col {
  width: 27px;
  min-width: 27px;
}
.vac-month-cell {
  font-weight: 700;
  text-align: left !important;
  padding: 5px 10px 5px 8px !important;
  background: linear-gradient(135deg, #303539 0%, #800218 100%);
  color: #fff !important;
  white-space: nowrap;
  border-radius: 6px;
  font-size: 11px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  position: relative;
  width: 120px;
  min-width: 120px;
  max-width: 120px;
}
.vac-day-cell {
  width: 27px;
  min-width: 27px;
  max-width: 27px;
  height: 27px;
  cursor: default;
  font-size: 11px;
  font-weight: 500;
  transition: all 0.15s ease;
  border-radius: 5px;
  background: #f8f9fb;
  color: var(--text);
  position: relative;
}
.vac-day-cell:hover:not(.vac-empty) {
  transform: scale(1.12);
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.vac-day-cell.vac-weekend {
  background: #f0ebe4;
  color: #9c8b7a;
  font-weight: 600;
}
.vac-day-cell.vac-holiday {
  background: linear-gradient(145deg, #fef3c7, #fde68a);
  color: #854d0e;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(217, 168, 22, 0.25);
}
.vac-day-cell.vac-empty {
  background: transparent;
  pointer-events: none;
}
.vac-day-cell.vac-selecting {
  background: rgba(37, 99, 235, 0.25) !important;
  box-shadow: inset 0 0 0 2px #2563eb !important;
  outline: none;
}

/* ===== Rental Calendar (Vermietung) ===== */
.rental-calendar {
  border-collapse: separate;
  border-spacing: 2px;
  width: auto;
  font-size: 12px;
  background: var(--card-bg);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
}
.rental-calendar th,
.rental-calendar td {
  border: none;
  text-align: center;
  padding: 0;
}
.rental-calendar th {
  background: transparent;
  color: var(--text-muted);
  font-weight: 700;
  padding: 4px 2px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rental-calendar tr {
  transition: background 0.15s;
}
.rental-calendar tr:hover .vac-day-cell:not(.vac-empty) {
  filter: brightness(0.96);
}
.vac-day-cell.rental-selecting {
  background: rgba(5, 150, 105, 0.25) !important;
  box-shadow: inset 0 0 0 2px #059669 !important;
  outline: none;
}

.rental-calendar .vac-month-cell {
  width: auto;
  min-width: auto;
  max-width: none;
}

/* ===== Rental Overview (Alle Fahrzeuge) ===== */
.rental-overview {
  border-collapse: collapse;
  font-size: 13px;
}
.rental-overview td {
  border: 1px solid #e2e8f0;
  text-align: center;
  padding: 0;
  height: 28px;
  min-width: 28px;
}
.rental-ov-vehicle {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--card-bg);
  padding: 4px 10px !important;
  text-align: left !important;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  min-width: 160px;
  border-right: 2px solid var(--border) !important;
}
.rental-ov-vehicle:hover {
  background: var(--primary-light);
  color: var(--primary);
}

/* ===== Customer Search Dropdown ===== */
.search-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  max-height: 220px;
  overflow-y: auto;
  z-index: 100;
}

.search-dropdown-item {
  padding: 10px 12px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 1px solid var(--bg-dark);
}

.search-dropdown-item:hover {
  background: var(--bg-dark);
}

.search-dropdown-item:last-child {
  border-bottom: none;
}

.search-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ===== OCR Scan ===== */
.scan-upload-area {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  margin-bottom: 16px;
}

.scan-upload-area:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.scan-upload-area input[type="file"] {
  display: none;
}

.scan-upload-area p {
  color: var(--text-muted);
  margin-top: 8px;
  font-size: 13px;
}

.scan-upload-area .scan-icon {
  font-size: 40px;
  color: var(--primary);
}

.scan-progress {
  margin: 20px 0;
}

.scan-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.scan-progress-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
  transition: width 0.3s;
  width: 0%;
}

.scan-progress-text {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
  text-align: center;
}

.scan-preview {
  max-width: 100%;
  max-height: 200px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  border: 1px solid var(--border);
}

/* Scan form grid system */
.scan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px 10px;
}

.scan-grid .span-1 { grid-column: span 1; }
.scan-grid .span-2 { grid-column: span 2; }
.scan-grid .span-3 { grid-column: span 3; }

.scan-result-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.scan-result-field label {
  font-size: 9.5px;
  font-weight: 600;
  color: #8896a7;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  line-height: 1;
  padding-left: 1px;
}

.scan-result-field input,
.scan-result-field select {
  width: 100%;
  padding: 6px 9px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  line-height: 1.4;
}

.scan-result-field input:hover,
.scan-result-field select:hover {
  border-color: #cbd5e1;
}

.scan-result-field input:focus,
.scan-result-field select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(26, 86, 219, 0.08);
}

.scan-result-field input::placeholder {
  color: #c0c8d4;
  font-size: 12px;
}

.scan-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
  margin-bottom: 2px;
  border-bottom: 1px solid #f0f2f5;
}

.scan-section-label span.scan-sec-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 10px;
}

.scan-section-label span.scan-sec-text {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #64748b;
}

.scan-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid #f0f2f5;
}

.scan-alt-box {
  padding: 8px 12px;
  border: 1px solid #e8ecf1;
  border-radius: 8px;
  background: #f8fafc;
  margin-bottom: 10px;
}

.scan-alt-box label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
  font-size: 12px;
  color: #475569;
}

.scan-alt-box input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
}

.scan-badge-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.scan-badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 0 5px;
}

.scan-badge-text {
  font-size: 12px;
  color: #94a3b8;
}

/* ===== Invoice Items Table ===== */
.invoice-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.invoice-items-table th,
.invoice-items-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.invoice-items-table th {
  background: #f9fafb;
  font-weight: 600;
  font-size: 12px;
}
.invoice-items-table td input {
  width: 100%;
  padding: 4px 6px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.invoice-items-table td input[type="number"] {
  width: 90px;
}
.invoice-summary {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.invoice-summary table {
  width: auto;
  min-width: 280px;
}
.invoice-summary td {
  padding: 4px 12px;
  border: none;
}
.invoice-summary .total-row td {
  font-weight: 700;
  font-size: 15px;
  border-top: 2px solid var(--text);
  padding-top: 8px;
}

/* ===== Loading ===== */
.loading {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
}

/* ===== Mobile Top Bar ===== */
.mobile-topbar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: var(--sidebar-bg);
  color: #fff;
  align-items: center;
  padding: 0 16px;
  z-index: 200;
  gap: 14px;
}
.mobile-topbar-title {
  font-size: 16px;
  font-weight: 700;
}
.hamburger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  width: 36px;
  height: 36px;
}
.hamburger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.2s;
}
.hamburger-btn.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger-btn.open span:nth-child(2) {
  opacity: 0;
}
.hamburger-btn.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.mobile-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.45);
  z-index: 149;
}
.mobile-overlay.active {
  display: block;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .mobile-topbar {
    display: flex;
  }

  .sidebar {
    width: 270px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 150;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
  }

  .content {
    margin-left: 0;
    padding: 16px;
    padding-top: 72px;
  }

  /* Hide non-mobile pages in nav (Kalender bleibt mobil sichtbar) */
  .nav-list li a[data-page="time-tracking"],
  .nav-list li a[data-page="bewertungen"],
  .nav-list li a[data-page="customers"],
  .nav-list li a[data-page="new-inspection"],
  .nav-list li a[data-page="inspections"],
  .nav-list li a[data-page="reminders"],
  .nav-list li a[data-page="devices"],
  .nav-list li a[data-page="free-inspections"],
  .nav-list li a[data-page="vacation"],
  .nav-list li a[data-page="fuhrpark"],
  .nav-list li a[data-page="invoices"],
  .nav-list li a[data-page="gutschriften"],
  .nav-list li a[data-page="staff"],
  .nav-list li a[data-page="settings"],
  .nav-list li a[data-page="stations"],
  .nav-list li a[data-page="changelog"],
  .nav-list li a[data-page="tickets"],
  .nav-list li a[data-page="suggestions"] {
    display: none;
  }
  /* Hide submenu parents that only have hidden children */
  #nav-buchhaltung,
  #nav-staff,
  #nav-settings,
  .nav-item-has-submenu.mobile-hidden {
    display: none !important;
  }
  /* Vision (KI-Assistent): auf dem Telefon nicht (wie in der Lackdoktor-Vorlage) */
  #nav-vision {
    display: none !important;
  }

  /* Electron-Download-Button auf dem Handy ausblenden */
  #dash-electron-btn {
    display: none;
  }

  /* ===================================================================
     MOBILE — Akten-Liste als gestapelte Karten (kein Querscrollen)
     Greift nur in der mobilen Ansicht; Desktop-Tabelle bleibt unberührt.
     =================================================================== */
  #akten-table-content .table-wrapper { overflow-x: hidden; }
  #akten-table-content table,
  #akten-table-content tbody,
  #akten-table-content tr,
  #akten-table-content td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  #akten-table-content thead { display: none; }
  #akten-table-content tr {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card-bg);
    margin-bottom: 10px;
    padding: 12px 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  /* Zebra nicht auf die Mobil-Karten anwenden - sie sind ohnehin einzeln getrennt. */
  #akten-table-content tbody tr:nth-child(even) { background: var(--card-bg); }
  #akten-table-content td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: none !important;
    padding: 4px 0;
    font-size: 14px;
    text-align: right;
  }
  #akten-table-content td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    text-align: left;
  }
  /* Leere Felder ausblenden, damit die Karte kompakt bleibt */
  #akten-table-content td:empty { display: none; }
  /* Aktennummer als Karten-Titel hervorheben */
  #akten-table-content td[data-label="Aktennr."] {
    border-bottom: 1px solid var(--border) !important;
    padding-bottom: 8px;
    margin-bottom: 4px;
  }
  #akten-table-content td[data-label="Aktennr."] strong { font-size: 16px; }

  /* ===================================================================
     MOBILE — Akte-Detail minimalistisch: keine Reiter, nur Beteiligte
     =================================================================== */
  /* Reiter-Navigation komplett ausblenden */
  .akte-tabs { display: none !important; }

  /* Mobile Reiter: Übersicht / Akteneinträge.
     !important, weil die globale Regel ".akte-mtabs{display:none}" später im File steht (gleiche Spezifität). */
  .akte-mtabs { display: flex !important; gap: 8px; margin: 12px 0; }
  .akte-mtab { flex: 1; padding: 10px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); color: var(--text); font-weight: 600; font-size: 14px; cursor: pointer; }
  .akte-mtab.active { background: var(--primary); color: #fff; border-color: var(--primary); }

  /* Reiter "Akteneinträge" aktiv: Übersichts-Blöcke aus, Tab-Inhalt an */
  .akte-tab-panel[data-tab="allgemein"].mtab-eintraege .akte-row-1 { display: none !important; }
  .akte-tab-panel[data-tab="allgemein"].mtab-eintraege .akte-mtab2 { display: block; }

  /* Akteneinträge-Karten + Fehlende Dokumente mobil */
  .mein-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 12px; }
  .mein-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 15px; margin-bottom: 10px; }
  .mein-list { display: flex; flex-direction: column; gap: 8px; }
  .mein-empty { padding: 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
  .mein-item { border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: rgba(127,127,127,0.06); }
  .mein-item-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
  .mein-item-text { font-size: 14px; line-height: 1.4; word-break: break-word; }
  .mein-item-text ul { margin: 4px 0 0 0; padding-left: 20px; }
  .mein-fehlende label { font-size: 14px !important; padding: 6px 0 !important; }
  /* Nur das Panel "Allgemeine Daten" behalten, alle anderen weg */
  .akte-tab-panel:not([data-tab="allgemein"]) { display: none !important; }
  /* In "Allgemein": Beteiligte + Fahrzeugdaten (gestapelt) zeigen, Reihe 2 ausblenden. */
  .akte-tab-panel[data-tab="allgemein"] .akte-row-1 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: auto;
  }
  /* Fahrzeugdaten-Karte jetzt AUF Mobile sichtbar (unter Beteiligte) */
  .akte-tab-panel[data-tab="allgemein"] .akte-row-1 .akte-card-right { display: block; }
  .akte-tab-panel[data-tab="allgemein"] .akte-row-2 { display: none; }
  /* Fahrzeugdaten-Inhalt mobil 2-spaltig (gruppiert wie die Bearbeiten-Ansicht) */
  #akte-vehicle-body > div[style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; }

  /* Beteiligten-Karte über volle Breite, frei in der Höhe wachsend */
  .beteiligte-card { height: auto; }
  .beteiligte-card .beteiligte-body { overflow: visible; }

  /* Beteiligte-Reiter als umbrechende Chips statt einer abgeschnittenen Zeile */
  .beteiligte-tabs {
    flex-wrap: wrap;
    overflow: visible;
    gap: 8px;
    padding: 12px;
  }
  .beteiligte-tab {
    flex: 0 0 auto;
    max-width: 100%;
    margin-bottom: 0;
    padding: 8px 30px 8px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
  }
  .beteiligte-tab.active {
    background: var(--primary-light);
    border-color: var(--primary);
  }
  .beteiligte-tab .bet-tab-name { max-width: 220px; }
  /* Entfernen-× auf Touch dauerhaft sichtbar (kein Hover vorhanden) */
  .beteiligte-tab .bet-remove { opacity: 1; }

  /* Kontaktdaten einspaltig stapeln — auch das Werkstatt-Sonderlayout */
  .beteiligte-body { padding: 14px 16px; }
  .beteiligte-body .bet-contact-grid { grid-template-columns: 1fr; gap: 12px; }
  .beteiligte-panel > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Aktions-Buttons gut tappbar */
  .btn-bet-detail { padding: 8px 14px; }

  /* Inline-Fahrzeugschein-Einlesen in der Beteiligte-Karte (mobil, nicht-modal) */
  .mscan-panel { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--primary); border-radius: 8px; background: var(--primary-light, #eef3fb); }
  .mscan-title { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
  .mscan-bar { height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
  .mscan-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width 0.3s ease; }
  .mscan-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); }

  /* Akte-Kopf kompakt und umbruchfähig */
  .akte-header { flex-wrap: wrap; gap: 12px; }
  .akte-header-fields { flex-wrap: wrap; gap: 16px; }

  .form-grid {
    grid-template-columns: 1fr;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Page header mobile */
  .page-header {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  .page-header h2 {
    font-size: 20px;
  }

  /* Cards mobile */
  .card {
    border-radius: 8px;
  }

  /* Table mobile */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Modal mobile */
  .modal {
    width: 95vw;
    max-width: 95vw;
    max-height: 90vh;
    margin: 5vh auto;
  }

  /* Form rows stack on mobile */
  .form-row {
    flex-direction: column;
  }

  /* Dashboard: hide "Letzte Prüfungen" section */
  .dash-last-inspections {
    display: none;
  }

  /* Time tracking mobile */
  .time-week-table th,
  .time-week-table td {
    padding: 8px 6px;
    font-size: 13px;
  }

  /* Calendar: hide desktop-only, show mobile-only elements */
  .cal-desktop-only {
    display: none !important;
  }
  .cal-mobile-only {
    display: block !important;
  }

  /* Calendar header mobile */
  .cal-header {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
  }
  .cal-header h2 {
    min-width: auto;
    font-size: 17px;
    width: 100%;
    order: -1;
    margin: 0;
  }
  .cal-nav-btn {
    padding: 8px 14px;
    font-size: 15px;
  }
  .cal-header input[type="date"] {
    flex: 1;
    min-width: 0;
  }

  /* Mobile calendar list view */
  .cal-mobile-group {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    overflow: hidden;
  }
  .cal-mobile-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-dark);
    font-weight: 700;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
  }
  .cal-mobile-count {
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
  }
  .cal-mobile-card {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
  }
  .cal-mobile-card:active {
    background: var(--bg-dark);
  }
  .cal-mobile-time {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 2px;
  }
  .cal-mobile-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
  }
  .cal-mobile-detail {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
  }
  .cal-mobile-add {
    padding: 10px 14px;
    text-align: center;
    color: var(--primary);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
  }
  .cal-mobile-add:active {
    background: var(--bg-dark);
  }

  /* Stamp buttons mobile */
  .stamp-btn {
    padding: 10px 20px;
    font-size: 15px;
  }

  /* ===== Time Tracking Mobile ===== */
  .tt-mobile-week-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }
  .tt-mobile-week-label {
    flex: 1;
    text-align: center;
    line-height: 1.3;
  }
  .tt-mobile-week-label strong {
    display: block;
    font-size: 15px;
  }
  .tt-mobile-week-label span {
    font-size: 12px;
    color: var(--text-muted);
  }

  .tt-mobile-day {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 6px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s;
  }
  .tt-mobile-day:active {
    background: var(--bg-dark);
  }
  .tt-mobile-today {
    border-color: var(--primary);
    border-width: 2px;
    box-shadow: 0 0 0 1px rgba(26,86,219,0.15);
  }
  .tt-mobile-off {
    opacity: 0.5;
  }
  .tt-mobile-day-header {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .tt-mobile-day-name {
    font-weight: 700;
    font-size: 15px;
    min-width: 28px;
  }
  .tt-mobile-day-date {
    font-size: 14px;
    color: var(--text-muted);
  }
  .tt-mobile-day-abs {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-dark);
    padding: 1px 6px;
    border-radius: 4px;
  }
  .tt-mobile-day-diff {
    margin-left: auto;
    font-weight: 700;
    font-size: 14px;
  }
  .tt-mobile-day-details {
    display: flex;
    gap: 14px;
    margin-top: 4px;
    font-size: 13px;
    color: var(--text);
  }

  .tt-mobile-summary {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-top: 10px;
    overflow: hidden;
  }
  .tt-mobile-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 14px;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
  }
  .tt-mobile-summary-row:last-child {
    border-bottom: none;
  }
  .tt-mobile-summary-diff {
    font-weight: 700;
    font-size: 15px;
    background: var(--bg-dark);
  }
}

/* ===== Time Tracking ===== */
.stamp-active-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #27ae60;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.time-week-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.time-today-row {
  background: rgba(26, 86, 219, 0.06) !important;
}

.time-today-row:hover {
  background: rgba(26, 86, 219, 0.1) !important;
}

.time-weekend-row {
  background: #f9fafb;
  color: var(--text-muted);
}

.stamp-btn {
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 50px;
  border: none;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.stamp-btn:active {
  transform: scale(0.95);
}

.stamp-btn-in {
  background: var(--success);
}

.stamp-btn-in:hover {
  background: #047857;
}

.stamp-btn-pause {
  background: var(--warning);
}

.stamp-btn-pause:hover {
  background: #b45309;
}

.stamp-btn-out {
  background: var(--danger);
}

.stamp-btn-out:hover {
  background: #b91c1c;
}

.price-toggle-btn {
  min-width: 52px;
  padding: 2px 6px;
  font-size: 11px;
  border: 1px solid var(--border-color, #dee2e6);
  background: var(--bg-secondary, #f8f9fa);
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
}
.price-toggle-btn:hover {
  background: var(--primary-color, #2563eb);
  color: #fff;
  border-color: var(--primary-color, #2563eb);
}
.price-toggle-btn.price-toggle-brutto {
  background: var(--primary-color, #2563eb);
  color: #fff;
  border-color: var(--primary-color, #2563eb);
}

.form-control-static {
  padding: 8px 12px;
  background: var(--bg-secondary, #f8f9fa);
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 4px;
  font-size: 14px;
  color: var(--text-primary);
  min-height: 38px;
  display: flex;
  align-items: center;
}

/* ===== Futuristic Dashboard ===== */
.dash {
  padding: 0;
}

.dash-hero {
  background: linear-gradient(135deg, #1f2226 0%, #303539 50%, #800218 100%);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  color: #fff;
}

.dash-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.dash-hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(6,182,212,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.dash-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 1;
  margin-bottom: 8px;
}

.dash-greeting {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.dash-greeting span {
  background: linear-gradient(90deg, #fff 0%, #93c5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dash-date {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
  font-weight: 400;
}

.dash-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.3px;
}

.dash-pw-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(8px);
}

.dash-pw-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.dash-time-strip {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  position: relative;
  z-index: 1;
}

.dash-time-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s;
  border: 1px solid rgba(255,255,255,0.08);
  flex: 1;
  max-width: 280px;
}

.dash-time-card:hover {
  transform: translateY(-1px);
}

.dash-time-card.active {
  background: rgba(5,150,105,0.15);
  border-color: rgba(5,150,105,0.4);
}

.dash-time-card.paused {
  background: rgba(217,119,6,0.15);
  border-color: rgba(217,119,6,0.4);
}

.dash-time-card.idle {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

.dash-time-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.dash-time-card.active .dash-time-icon {
  background: rgba(5,150,105,0.2);
}

.dash-time-card.paused .dash-time-icon {
  background: rgba(217,119,6,0.2);
}

.dash-time-card.idle .dash-time-icon {
  background: rgba(255,255,255,0.06);
}

.dash-time-label {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.dash-time-value {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin-top: 1px;
}

/* Dashboard info cards */
.dash-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(30, 58, 95, 0.15);
  background: var(--card-bg);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.dash-card-header {
  background: linear-gradient(135deg, #1f2226 0%, #303539 50%, #800218 100%);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

.dash-card-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.dash-card-header .badge {
  font-size: 12px;
  font-weight: 700;
}

/* Dashboard-Karte "Vision" (1:1 aus der KI-Karte der Lackdoktor-Vorlage, nur Admins, nur Desktop) */
.dash-card-body { padding: 12px 16px 14px; }
.dash-vision { display: flex; gap: 18px; align-items: center; }
.dash-vision-kern {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0 12%, #22d3ee 38%, #3b82f6 68%, #8b5cf6 100%);
  box-shadow: 0 0 22px rgba(34, 211, 238, .45);
}
.dash-vision-zahl { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--text); }
.dash-vision-text { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* Station cards */
.dash-stations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.dash-station {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.dash-station:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
}

.dash-station-header {
  padding: 16px 20px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dash-station-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.2px;
}

.dash-station-count {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
}

.dash-station-bar {
  height: 3px;
  margin: 0 20px;
  border-radius: 3px;
  background: var(--bg);
  overflow: hidden;
}

.dash-station-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.dash-station-types {
  padding: 10px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-station-type {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
}

.dash-station-type strong {
  color: var(--text);
  font-weight: 600;
}

.dash-station-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 0 20px 16px;
  font-style: italic;
}

/* Section header */
.dash-section {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.dash-section-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.dash-section h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.2px;
}

.dash-section-sub {
  font-size: 12px;
  color: var(--text-muted);
}

/* Recent table */
.dash-table-card {
  background: var(--card-bg);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03);
  overflow: hidden;
}

.dash-table-card table {
  width: 100%;
  border-collapse: collapse;
}

.dash-table-card thead th {
  background: var(--bg);
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  text-align: left;
  border: none;
}

.dash-table-card tbody td {
  padding: 12px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

.dash-table-card tbody tr:last-child td {
  border-bottom: none;
}

.dash-table-card tbody tr:hover {
  background: rgba(26,86,219,0.02);
}

.dash-table-station {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.dash-table-station-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Pulse dot for active time */
.dash-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  animation: dashPulse 2s ease-in-out infinite;
}

.dash-pulse.green { background: #059669; }
.dash-pulse.orange { background: #d97706; }

@keyframes dashPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
  50% { opacity: 0.7; box-shadow: 0 0 0 6px transparent; }
}

/* Color accents for stations */
.dash-accent-blue { color: #3b82f6; }
.dash-accent-green { color: #059669; }
.dash-accent-yellow { color: #ca8a04; }
.dash-accent-purple { color: #7c3aed; }
.dash-accent-gray { color: #6b7280; }
.dash-accent-orange { color: #ea580c; }

.dash-bg-blue { background: #3b82f6; }
.dash-bg-green { background: #059669; }
.dash-bg-yellow { background: #ca8a04; }
.dash-bg-purple { background: #7c3aed; }
.dash-bg-gray { background: #9ca3af; }
.dash-bg-orange { background: #ea580c; }

.dash-icon-blue { background: rgba(59,130,246,0.1); color: #3b82f6; }
.dash-icon-green { background: rgba(5,150,105,0.1); color: #059669; }

@media (max-width: 768px) {
  .dash-hero { padding: 16px; border-radius: 10px; }
  .dash-greeting { font-size: 18px; }
  .dash-time-strip { flex-direction: column; }
  .dash-time-card { max-width: 100%; }
  .dash-stations { grid-template-columns: 1fr; }
  .dash-hero-top { flex-direction: column; gap: 10px; }
  .dash-section { margin-top: 16px; }
  .dash-section h3 { font-size: 16px; }
  /* Mobile: Fahrzeugdaten- & Mandanten-Bearbeitung - volle Breite, keine abgeschnittenen Felder, kein iOS-Zoom */
  .akte-veh-form-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  /* Einheitliche Feldhöhe/-schrift in mobilen Modal-Formularen. Höhere Spezifität als
     ".form-section-body select/input[type=...]", damit ALLE Typen (auch month/date/select)
     gleich gerendert werden. */
  .modal .form-group input:not([type="checkbox"]):not([type="radio"]),
  .modal .form-group select,
  .modal .form-group textarea,
  .modal .form-section-body input:not([type="checkbox"]):not([type="radio"]),
  .modal .form-section-body select,
  .modal .form-section-body textarea {
    font-size: 16px;
    font-family: inherit;
    line-height: 1.2;
    width: 100%;
    box-sizing: border-box;
    padding: 7px 12px;
  }
  /* Einzeilige Felder (Input + Select) auf exakt gleiche Höhe — Select sonst minimal abweichend. Textarea ausgenommen. */
  .modal .form-group input:not([type="checkbox"]):not([type="radio"]),
  .modal .form-group select,
  .modal .form-section-body input:not([type="checkbox"]):not([type="radio"]),
  .modal .form-section-body select {
    height: 38px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .modal .form-group label { font-size: 14px; }
}

/* ===== E-Mail Composer (Outlook-Style) ===== */
.email-composer { background:#fff; color:#000; }
.email-composer-toolbar {
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; background:#f3f2f1; border-bottom:1px solid #e1dfdd;
}
.email-composer-toolbar .ec-send {
  background:#0078d4; color:#fff; border:0; padding:7px 18px; border-radius:2px;
  font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.email-composer-toolbar .ec-send:hover { background:#106ebe; }
.email-composer-toolbar .ec-send:disabled { background:#a0a0a0; cursor:wait; }
.email-composer-toolbar .ec-cancel {
  background:transparent; color:#323130; border:1px solid #8a8886; padding:6px 14px; border-radius:2px;
  font-size:13px; cursor:pointer;
}
.email-composer-toolbar .ec-cancel:hover { background:#edebe9; }
.email-composer-toolbar .ec-attach {
  background:transparent; color:#323130; border:0; padding:6px 10px; border-radius:2px;
  font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:4px;
}
.email-composer-toolbar .ec-attach:hover { background:#edebe9; }

.email-composer-fields { padding:0; border-bottom:1px solid #e1dfdd; }
.email-composer-row {
  display:flex; align-items:center; border-bottom:1px solid #f3f2f1;
  padding:6px 14px; gap:8px;
}
.email-composer-row:last-child { border-bottom:0; }
.email-composer-row label {
  width:64px; flex-shrink:0; font-size:13px; color:#605e5c; font-weight:600;
}
.email-composer-row input,
.email-composer-row select {
  flex:1; border:0; outline:none; background:transparent;
  font-size:13.5px; color:#201f1e; padding:4px 0; font-family:inherit;
}
.email-composer-row select { cursor:pointer; }
.email-composer-row .ec-cc-toggle {
  background:transparent; border:0; color:#0078d4; font-size:12px; cursor:pointer; padding:2px 6px;
}
.email-composer-row .ec-cc-toggle:hover { text-decoration:underline; }

.email-composer-formatbar {
  display:flex; align-items:center; gap:2px; padding:6px 12px;
  background:#faf9f8; border-bottom:1px solid #e1dfdd; flex-wrap:wrap;
}
.email-composer-formatbar button {
  background:transparent; border:0; padding:5px 9px; cursor:pointer;
  font-size:13px; color:#323130; border-radius:2px; min-width:28px;
}
.email-composer-formatbar button:hover { background:#edebe9; }
.email-composer-formatbar button.active { background:#c7e0f4; }
.email-composer-formatbar .ec-divider { width:1px; height:18px; background:#e1dfdd; margin:0 4px; }
.email-composer-formatbar select {
  border:1px solid #d2d0ce; background:#fff; padding:3px 4px; font-size:12px; border-radius:2px;
}

.email-composer-editor {
  min-height:280px; max-height:50vh; overflow-y:auto; outline:none;
  padding:14px 18px; font-family:Calibri, Arial, sans-serif; font-size:11pt;
  color:#000; background:#fff; line-height:1.4;
}
.email-composer-editor:empty::before { content: attr(data-placeholder); color:#a19f9d; }
/* Aufzählungen klar eingerückt darstellen — execCommand erzeugt nackte ul/ol ohne Inline-Style */
.email-composer-editor ul,
.email-composer-editor ol {
  margin: 6px 0;
  padding-left: 36px;
}
.email-composer-editor li { margin: 2px 0; }
.email-composer-editor ul ul,
.email-composer-editor ol ol,
.email-composer-editor ul ol,
.email-composer-editor ol ul { margin: 2px 0; }

.email-composer-attachments {
  padding:6px 14px; border-top:1px solid #e1dfdd; display:flex; flex-wrap:wrap; gap:6px; background:#faf9f8;
}
.email-composer-attachments:empty { display:none; }
.ec-att-chip {
  display:inline-flex; align-items:center; gap:6px; padding:4px 8px;
  background:#fff; border:1px solid #d2d0ce; border-radius:14px; font-size:12px; color:#323130;
}
.ec-att-chip .ec-att-remove {
  background:transparent; border:0; cursor:pointer; color:#605e5c; font-size:14px; padding:0 2px; line-height:1;
}
.ec-att-chip .ec-att-remove:hover { color:#a4262c; }

/* Anhang-Auswahl-Popover */
.ec-attach-menu {
  position:absolute; z-index:1200; background:#fff; border:1px solid #d2d0ce;
  box-shadow:0 4px 14px rgba(0,0,0,0.15); border-radius:2px; min-width:240px; padding:4px 0;
}
.ec-attach-menu button {
  width:100%; text-align:left; background:transparent; border:0; padding:9px 14px;
  font-size:13px; color:#201f1e; cursor:pointer; display:flex; align-items:center; gap:10px;
}
.ec-attach-menu button:hover { background:#f3f2f1; }
.ec-attach-menu button .ec-menu-ico { font-size:16px; width:18px; text-align:center; }

/* S3-Anhang-Sub-Modal */
.s3-attach-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:1100;
  display:flex; justify-content:center; align-items:center; padding:20px;
}
.s3-attach-modal {
  background:#fff; border-radius:6px; box-shadow:var(--shadow-md);
  width:96%; max-width:820px; max-height:88vh; display:flex; flex-direction:column;
}
.s3-attach-modal .s3a-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px; background:#f3f2f1; border-bottom:1px solid #e1dfdd; border-radius:6px 6px 0 0;
}
.s3-attach-modal .s3a-header h3 { margin:0; font-size:16px; font-weight:600; color:#201f1e; }
.s3-attach-modal .s3a-header .s3a-x {
  background:none; border:0; font-size:22px; cursor:pointer; color:#605e5c; padding:0 4px;
}
.s3-attach-modal .s3a-header .s3a-x:hover { color:#201f1e; }
.s3-attach-modal .s3a-breadcrumb {
  padding:8px 16px; border-bottom:1px solid #f0f0f0; background:#faf9f8; font-size:13px;
}
.s3-attach-modal .s3a-list {
  flex:1; overflow-y:auto; min-height:280px; max-height:50vh;
}
.s3-attach-modal .s3a-row {
  display:flex; align-items:center; gap:10px; padding:7px 16px; border-bottom:1px solid #f3f2f1;
  cursor:pointer; user-select:none;
}
.s3-attach-modal .s3a-row:hover { background:#f3f2f1; }
.s3-attach-modal .s3a-row.s3a-folder .s3a-name { font-weight:600; }
.s3-attach-modal .s3a-row input[type=checkbox] { margin:0; }
.s3-attach-modal .s3a-row .s3a-ico { width:22px; text-align:center; }
.s3-attach-modal .s3a-row .s3a-name { flex:1; font-size:13.5px; color:#201f1e; }
.s3-attach-modal .s3a-row .s3a-size { width:80px; font-size:12px; color:#605e5c; text-align:right; }
.s3-attach-modal .s3a-row .s3a-date { width:140px; font-size:12px; color:#605e5c; text-align:right; }
.s3-attach-modal .s3a-empty { padding:30px; text-align:center; color:#605e5c; font-size:13px; }
.s3-attach-modal .s3a-footer {
  display:flex; align-items:center; gap:8px; padding:12px 16px; border-top:1px solid #e1dfdd; background:#faf9f8; border-radius:0 0 6px 6px;
}
.s3-attach-modal .s3a-footer .s3a-count { flex:1; font-size:13px; color:#605e5c; }
.s3-attach-modal .s3a-footer .s3a-add {
  background:#0078d4; color:#fff; border:0; padding:7px 18px; border-radius:2px; font-size:13px; font-weight:600; cursor:pointer;
}
.s3-attach-modal .s3a-footer .s3a-add:hover { background:#106ebe; }
.s3-attach-modal .s3a-footer .s3a-add:disabled { background:#a0a0a0; cursor:not-allowed; }
.s3-attach-modal .s3a-footer .s3a-cancel {
  background:transparent; color:#323130; border:1px solid #8a8886; padding:6px 14px; border-radius:2px; font-size:13px; cursor:pointer;
}
.s3-attach-modal .s3a-footer .s3a-cancel:hover { background:#edebe9; }

/* =====================================================================
   FORM SECTIONS — strukturierte Form-Karten mit Icon, Titel und farbig
   akzentuiertem Body. Wird via formSection(icon, title, body) Helper
   erzeugt. Farben passend zur B&P-Palette (Weiß/Hellgrau/Blau).
   ===================================================================== */
.form-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-section:hover {
  box-shadow: var(--shadow-md);
}
.form-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--primary-light);
  border-bottom: 1px solid var(--border);
}
.form-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  flex-shrink: 0;
  color: var(--primary);
}
.form-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text);
  margin: 0;
  border-bottom: none;
  padding-bottom: 0;
}
.form-section-hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.form-section-body {
  padding: 14px 16px 4px;
  background: var(--card-bg);
}
.form-section-body .form-row { margin-bottom: 10px; }
.form-section-body .form-row:last-child { margin-bottom: 4px; }
.form-section-body .form-group { margin-bottom: 0; }
.form-section-body .form-group label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
  display: block;
}
.form-section-body input[type="text"],
.form-section-body input[type="number"],
.form-section-body input[type="date"],
.form-section-body input[type="email"],
.form-section-body input[type="tel"],
.form-section-body input[type="password"],
.form-section-body select,
.form-section-body textarea {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
  color: var(--text);
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-section-body input:focus,
.form-section-body select:focus,
.form-section-body textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26,86,219,0.15);
}
.form-section-body input:disabled,
.form-section-body select:disabled,
.form-section-body textarea:disabled {
  background: var(--bg);
  color: var(--text-muted);
}
.form-section-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 4px 0;
}
.form-section-checks label {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px 5px 10px;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  transition: border-color 0.15s, background 0.15s;
}
.form-section-checks label:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}
.form-section-checks input[type="checkbox"] {
  width: auto !important;
  margin: 0 !important;
  accent-color: var(--primary);
}
.form-section-checks label:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary) !important;
}
/* "Im An-/Abwesenheitsplaner ausblenden" soll wie die übrigen Optionen blau hinterlegt sein,
   auch im nicht-angehakten Zustand — inkl. blauer Schrift */
.form-section-checks label:has(#staff-hidden-in-planning) {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary) !important;
}
.modal-form-wide .form-actions {
  position: sticky;
  bottom: -1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), var(--card-bg) 50%);
  padding: 14px 0 4px;
  margin-top: 8px;
}

/* ===== Mehrfachauswahl-Dropdown (Art-/Status-/Sachbearbeiter-Filter im Akten-Kopf) ===== */
.db-multi {
  position: relative;
  min-width: 0;
  max-width: 100%;
}
.db-multi-summary {
  list-style: none;
  cursor: pointer;
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  padding: 6px 26px 6px 10px;
  font-size: 13px;
  border: 1px solid #d3dbe7;
  border-radius: 6px;
  background: #eef2f8;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.db-multi-summary::-webkit-details-marker { display: none; }
.db-multi-summary::after {
  content: '▾';
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 11px;
  pointer-events: none;
}
.db-multi-summary:hover { border-color: #aab8cc; }
.db-multi[open] .db-multi-summary {
  background: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.15);
}
.db-multi-placeholder { color: #94a3b8; }
.db-multi-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  background: #fff;
  border: 1px solid #d3dbe7;
  border-radius: 8px;
  box-shadow: 0 12px 26px -10px rgba(16, 24, 40, 0.3);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.db-multi-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.db-multi-opt:hover { background: #eef3fb; }
.db-multi-opt input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--primary);
}

/* Feinschliff Art- + Status-Filter (Akten-Kopf): Checkbox vertikal zum Text ausrichten
   und etwas mehr Abstand zwischen Checkbox und Beschriftung. */
.akten-art-filter .db-multi-opt,
.akten-status-filter .db-multi-opt,
.akten-sachbearbeiter-filter .db-multi-opt { gap: 0; }
.akten-art-filter .db-multi-opt span,
.akten-status-filter .db-multi-opt span,
.akten-sachbearbeiter-filter .db-multi-opt span { margin-left: 8px; }
.akten-art-filter .db-multi-opt input[type="checkbox"],
.akten-status-filter .db-multi-opt input[type="checkbox"],
.akten-sachbearbeiter-filter .db-multi-opt input[type="checkbox"] {
  position: relative;
  top: 2px;
}
/* Panel breiter als das (schmale) Filterfeld selbst -> lange Eintraege wie
   "Minderwertgutachten" bzw. "warte auf Versicherung" brechen nicht mehr in der Checkbox-Zeile um. */
.akten-art-filter .db-multi-panel,
.akten-status-filter .db-multi-panel,
.akten-sachbearbeiter-filter .db-multi-panel {
  left: 0;
  right: auto;
  width: max-content;
  min-width: 100%;
}
.akten-art-filter .db-multi-opt span,
.akten-status-filter .db-multi-opt span,
.akten-sachbearbeiter-filter .db-multi-opt span { white-space: nowrap; }

/* Mobile Akten-Reiter + Tab-Inhalte: nur im Mobile-Media-Query sichtbar. */
.akte-mtabs { display: none; }
.akte-mtab2 { display: none; }

/* Fahrzeugschein-Scan: lustiger Spruch statt Bild, Wort für Wort eingeblendet. */
.scan-spruch {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--text);
  padding: 14px 16px 18px;
}
/* Langsamer, gleichmäßiger Wisch von links nach rechts (weiche Kante deckt den Satz auf). */
.scan-spruch-reveal {
  -webkit-mask-image: linear-gradient(to right, #000 55%, rgba(0,0,0,0) 80%);
  mask-image: linear-gradient(to right, #000 55%, rgba(0,0,0,0) 80%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 280% 100%;
  mask-size: 280% 100%;
  animation: scanSpruchWipe 6.5s ease-out forwards;
}
@keyframes scanSpruchWipe {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0;   }
}

/* ===== Bewertungsportal (Menue "Bewertungen") ===== */
tr.bew-gesperrt > td { background: #f3f4f6; color: var(--text-muted); }
.bew-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-weight: 400; }
.bew-check { color: #16a34a; font-weight: 700; font-size: 15px; }
.bew-sperr-banner {
  background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; border-radius: var(--radius);
  padding: 10px 14px; font-size: 13px; font-weight: 600; margin-bottom: 12px;
}
.bew-cb { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; cursor: pointer; }
.bew-cb input[type="checkbox"] { width: auto; margin: 0; }

/* ===== Fristenkalender (Block 3, .planning/FRISTENKALENDER-SPEZIFIKATION.md Abschnitt 8) =====
   Vier Stufen der Hervorhebung [E14]: Notfrist (deutlich rot, fett, Kennzeichen NOTFRIST weiss auf rot), rot
   (unverlaengerbar bzw. Begruendungsfrist), normal (eigene Fristfarbe violett) und gelb (materielle
   Kontrollfrist). Fristzeilen haben links einen Farbbalken und das Kuerzel "Frist" - so heben sie sich deutlich
   von Wiedervorlagen ab (deren Darstellung bleibt). Akzente im Markenschema: Bordeaux #800218, Anthrazit #303539. */
:root {
  --frist-normal: #6d28d9;
  --frist-normal-hell: #f3effe;
  --frist-rot: #b91c1c;
  --frist-rot-hell: #fdecec;
  --frist-notfrist: #e0001b;
  --frist-notfrist-hell: #ffe4e8;
  --frist-gelb: #ca8a04;
  --frist-gelb-hell: #fef9c3;
  --frist-warnung: #b45309;
  --frist-warnung-hell: #fffbeb;
  --frist-unkontrolliert: #c2410c;
  --frist-ok: #047857;
  --frist-marke: #800218;
  --frist-anthrazit: #303539;
}
.frist-seite-kopf { flex-wrap: wrap; gap: 10px; }
.frist-kopf-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.frist-filter { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; }
.frist-filter-feld { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-muted); min-width: 160px; }
.frist-filter-feld select, .frist-filter-feld input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit; background: #fff; color: var(--text); }
.frist-filter-suche { flex: 1 1 220px; }
.frist-filter-haken { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding-bottom: 6px; cursor: pointer; }
.frist-filter-haken input { width: auto; margin: 0; }
.frist-verjaehrung-saison { box-shadow: 0 0 0 2px var(--frist-gelb); }
.frist-filter-mobil { margin-bottom: 12px; }
.frist-filter-mobil > summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.frist-freigabe-banner { background: var(--frist-warnung-hell); border: 1px solid #fcd34d; border-left: 5px solid var(--frist-warnung); color: #78350f; border-radius: var(--radius); padding: 10px 14px; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.frist-stand { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.frist-leiste { border-radius: var(--radius); padding: 9px 14px; font-size: 13px; margin-bottom: 10px; border: 1px solid var(--border); background: var(--card-bg); }
.frist-leiste-vorfrist { background: var(--frist-normal-hell); border-color: #ddd6fe; }
.frist-leiste-verschoben { background: #eef2ff; border-color: #c7d2fe; }
.frist-leiste-hinweis { background: var(--frist-warnung-hell); border-color: #fde68a; }
.frist-gruppe { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
.frist-gruppe-kopf { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-weight: 700; font-size: 14px; background: #f8f8f9; border-bottom: 1px solid var(--border); cursor: pointer; list-style: none; }
.frist-gruppe-kopf::-webkit-details-marker { display: none; }
details.frist-gruppe > summary.frist-gruppe-kopf::before { content: '\25B8'; color: var(--text-muted); transition: transform .15s; }
details.frist-gruppe[open] > summary.frist-gruppe-kopf::before { transform: rotate(90deg); }
details.frist-gruppe:not([open]) > summary.frist-gruppe-kopf { border-bottom: none; }
section.frist-gruppe > .frist-gruppe-kopf { cursor: default; }
.frist-gruppe-ueberfaellig { border-color: var(--frist-notfrist); }
.frist-gruppe-ueberfaellig > .frist-gruppe-kopf { background: var(--frist-notfrist-hell); color: var(--frist-notfrist); }
.frist-gruppe-heute > .frist-gruppe-kopf { background: #fdf2f4; color: var(--frist-marke); }
.frist-leer { padding: 12px 14px; color: var(--text-muted); font-size: 13px; }
.frist-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.frist-tabelle th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.frist-tabelle td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.frist-tabelle tr:last-child td { border-bottom: none; }
.frist-zeile > td:first-child { border-left: 6px solid var(--frist-normal); }
.frist-zeile.frist-hv-rot > td:first-child { border-left-color: var(--frist-rot); }
.frist-zeile.frist-hv-notfrist > td:first-child { border-left-color: var(--frist-notfrist); background: var(--frist-notfrist-hell); }
.frist-zeile.frist-hv-gelb > td:first-child { border-left-color: var(--frist-gelb); background: var(--frist-gelb-hell); }
.frist-nicht-offen { opacity: .72; }
.frist-ende { font-weight: 700; white-space: nowrap; }
.frist-hv-notfrist .frist-ende, .frist-hv-notfrist .frist-ende-gross { color: var(--frist-notfrist); font-weight: 800; }
.frist-hv-rot .frist-ende { color: var(--frist-rot); }
.frist-ende-gross { font-size: 24px; font-weight: 800; line-height: 1.15; }
.frist-bez { font-weight: 600; overflow-wrap: anywhere; }
/* Spalte "Frist" in den Tabellen (Akte, Fristenseite): bei 1024 px brach "anywhere" den Namen Silbe fuer Silbe um
   ("Einspr uch gegen Bussge ldbesc heid"), weil es die Mindestbreite der Spalte auf einen Buchstaben senkt.
   In Tabellen Umbruch nur zwischen Woertern, keine Silbentrennung, Mindestbreite; die Tabelle scrollt dann
   waagrecht (.table-wrapper). Die Karten (mobil) behalten "anywhere". */
.frist-tabelle .frist-spalte-frist { min-width: 220px; }
.frist-tabelle .frist-bez { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
.frist-klein { font-size: 12px; color: var(--text-muted); }
.frist-grau { font-size: 12px; color: var(--text-muted); }
.frist-kontrolltag { color: var(--frist-warnung); font-weight: 600; }
.frist-heute-hinweis { color: var(--frist-marke); font-weight: 600; }
.frist-rot-text { color: var(--frist-notfrist); font-weight: 700; }
.frist-abstand-oben { margin-top: 10px; }
.frist-kennzeichen { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.frist-kuerzel { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #fff; background: var(--frist-normal); }
.frist-kuerzel-rot { background: var(--frist-rot); }
.frist-kuerzel-notfrist { background: var(--frist-notfrist); }
.frist-kuerzel-gelb { background: var(--frist-gelb); }
.frist-badge { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 1.5; }
.frist-badge-notfrist { background: var(--frist-notfrist); color: #fff; letter-spacing: .6px; }
.frist-badge-pruefung { background: #ede9fe; color: #5b21b6; }
.frist-badge-ki { background: #e0f2fe; color: #075985; }
.frist-badge-vorlaeufig { background: #f3f4f6; color: #374151; border: 1px dashed #9ca3af; }
.frist-warnung { color: var(--frist-gelb); font-weight: 700; cursor: help; font-size: 14px; }
.frist-unkontrolliert { color: var(--frist-unkontrolliert); font-weight: 700; }
.frist-kontrolliert { color: var(--frist-ok); font-weight: 600; }
.frist-knoepfe { text-align: right; }
.frist-knoepfe .btn, .frist-karte-knoepfe .btn, .frist-dialog-knoepfe .btn { margin: 2px 0; }
.frist-knopf-aus { opacity: .45; cursor: not-allowed; }
.frist-btn-warn { background: #fff; color: var(--frist-rot); border: 1px solid var(--frist-rot); }
.frist-btn-warn:hover { background: var(--frist-rot-hell); }
.frist-akte-link { color: var(--frist-marke); font-weight: 600; text-decoration: none; }
.frist-akte-link:hover { text-decoration: underline; }
.frist-karten { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
.frist-karte { background: var(--card-bg); border: 1px solid var(--border); border-left: 7px solid var(--frist-normal); border-radius: 10px; padding: 12px; overflow-wrap: anywhere; }
.frist-karte.frist-hv-rot { border-left-color: var(--frist-rot); }
.frist-karte.frist-hv-notfrist { border-left-color: var(--frist-notfrist); background: #fffafa; }
.frist-karte.frist-hv-gelb { border-left-color: var(--frist-gelb); }
.frist-karte-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.frist-karte-kopf .frist-ende { font-size: 20px; }
.frist-karte-akte { margin: 4px 0; }
.frist-karte-knoepfe { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.frist-karte-knoepfe .btn { width: 100%; padding: 8px 10px; font-size: 14px; }
.frist-akte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.frist-reiter-badge { margin-left: 6px; background: var(--frist-normal); color: #fff; }
.frist-reiter-badge:empty { display: none; }
.frist-reiter-badge.frist-badge-rot { background: var(--frist-notfrist); }
.frist-reiter-badge.frist-badge-orange { background: var(--frist-unkontrolliert); }
/* Dialoge */
.frist-formular .frist-suche { margin-bottom: 6px; }
.frist-block { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 14px; background: #fafafa; }
.frist-feld-label { font-size: 12px; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
.frist-haken { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; margin: 4px 0; cursor: pointer; }
.frist-haken input[type="checkbox"], .frist-haken input[type="radio"] { width: auto; margin: 3px 0 0; flex: 0 0 auto; }
.frist-dauer-eingabe { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.frist-dauer-eingabe input { width: auto; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; }
.frist-dauer-eingabe input[type="number"] { width: 90px; }
.frist-dauer-eingabe select { width: auto; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; }
.frist-folge-zusatz { margin: 2px 0 8px 26px; font-size: 13px; }
.frist-folge-zusatz input { padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; }
.frist-folge-zusatz input[type="number"] { width: 70px; }
.frist-voll { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; margin-top: 6px; }
.frist-abstand { margin: -8px 0 14px; }
.frist-katinfo { margin-top: 6px; font-size: 13px; }
.frist-katinfo > summary { cursor: pointer; color: var(--text-muted); }
.frist-katinfo p { margin: 6px 0 0; line-height: 1.45; }
.frist-pflicht { color: var(--frist-notfrist); }
.frist-dialog-knoepfe { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 14px; }
.frist-dialog-knoepfe.frist-links { justify-content: flex-start; }
.frist-vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 12px; }
.frist-vorschau-box { margin-top: 10px; }
.frist-vorschau { border: 1px solid var(--border); border-left: 7px solid var(--frist-normal); border-radius: var(--radius); padding: 12px 14px; background: #fff; }
.frist-vorschau.frist-hv-rot { border-left-color: var(--frist-rot); }
.frist-vorschau.frist-hv-notfrist { border-left-color: var(--frist-notfrist); }
.frist-vorschau.frist-hv-gelb { border-left-color: var(--frist-gelb); }
.frist-vorschau-kopf, .frist-detail-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.frist-detail-kopf { border-left: 7px solid var(--frist-normal); padding: 6px 0 6px 12px; }
.frist-detail-kopf.frist-hv-rot { border-left-color: var(--frist-rot); }
.frist-detail-kopf.frist-hv-notfrist { border-left-color: var(--frist-notfrist); }
.frist-detail-kopf.frist-hv-gelb { border-left-color: var(--frist-gelb); }
.frist-felder, .frist-werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 16px; margin-bottom: 10px; }
.frist-feld-wert { font-size: 13px; overflow-wrap: anywhere; white-space: pre-wrap; }
.frist-abschnitt-titel { font-weight: 700; font-size: 13px; margin: 14px 0 6px; color: var(--frist-anthrazit); }
.frist-schritte { margin: 0 0 8px 18px; font-size: 13px; line-height: 1.5; }
.frist-schritt-datum { display: inline-block; min-width: 96px; font-weight: 600; color: var(--frist-anthrazit); }
.frist-rechenweg-text { font-size: 13px; }
.frist-warnbox { background: var(--frist-gelb-hell); border: 1px solid #fde047; border-left: 5px solid var(--frist-gelb); border-radius: var(--radius); padding: 8px 12px; font-size: 13px; margin: 8px 0; color: #713f12; }
.frist-warnbox ul, .frist-hinweisbox ul, .frist-fehlerbox ul { margin: 4px 0 0 18px; }
.frist-hinweisbox { background: #f3f4f6; border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; font-size: 12px; margin: 8px 0; color: #4b5563; }
.frist-fehlerbox { background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius); padding: 8px 12px; font-size: 13px; color: #991b1b; }
.frist-veraltet { background: var(--frist-warnung-hell); color: #78350f; font-weight: 600; font-size: 13px; padding: 6px 10px; border-radius: 6px; margin-bottom: 8px; }
.frist-hinweis { font-size: 13px; margin: 10px 0; color: var(--text); }
.frist-frage { margin: 12px 0 8px; font-size: 14px; }
.frist-quelle { font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.frist-folge-liste, .frist-ak-liste { margin: 4px 0 8px 18px; font-size: 13px; }
.frist-ak-liste li { margin: 3px 0; }
.frist-vergleich { border-collapse: collapse; font-size: 13px; margin-bottom: 10px; }
.frist-vergleich th, .frist-vergleich td { padding: 4px 12px 4px 0; text-align: left; }
.frist-vergleich tr.frist-geaendert td { font-weight: 700; color: var(--frist-marke); }
.frist-protokoll { width: 100%; border-collapse: collapse; font-size: 12px; }
.frist-protokoll th, .frist-protokoll td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.frist-stammdaten { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.frist-stammdaten > summary { cursor: pointer; font-weight: 600; font-size: 13px; margin-bottom: 8px; }
/* Dashboard-Kachel "Fristen" (8.5) */
.frist-dash-karte { grid-column: 1 / -1; }
.frist-dash-karte .dash-card-header { cursor: pointer; }
.frist-dash-alarm { border-color: var(--frist-notfrist); }
.frist-dash-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.frist-dash-zahl { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; cursor: pointer; font-family: inherit; text-align: left; color: var(--text); }
.frist-dash-zahl:hover { border-color: var(--frist-marke); }
.frist-dash-wert { font-size: 30px; font-weight: 800; line-height: 1; color: var(--frist-ok); }
.frist-dash-label { font-size: 12px; color: var(--text-muted); }
.frist-dash-rot { border-color: var(--frist-notfrist); background: var(--frist-notfrist-hell); }
.frist-dash-rot .frist-dash-wert { color: var(--frist-notfrist); }
.frist-dash-hinweis .frist-dash-wert { color: var(--frist-normal); }
.frist-dash-blinken { animation: frist-blinken 1.2s ease-in-out infinite; }
@keyframes frist-blinken { 0%, 100% { background: var(--frist-notfrist-hell); } 50% { background: #ffb3bf; border-color: var(--frist-notfrist); } }
@media (prefers-reduced-motion: reduce) { .frist-dash-blinken { animation: none; } }
.frist-dash-zeile { margin: 10px 0 6px; font-size: 13px; }
.frist-dash-liste { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.frist-dash-eintrag { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--border); border-left: 5px solid var(--frist-normal); border-radius: 8px; padding: 6px 10px; font-size: 13px; }
.frist-dash-eintrag.frist-hv-rot { border-left-color: var(--frist-rot); }
.frist-dash-eintrag.frist-hv-notfrist { border-left-color: var(--frist-notfrist); }
.frist-dash-eintrag.frist-hv-gelb { border-left-color: var(--frist-gelb); }
.frist-dash-eintrag-text { min-width: 0; overflow-wrap: anywhere; }
.frist-dash-leer { margin: 6px 0 10px; }
.frist-dash-ak { border-top: 1px solid var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; font-size: 13px; }
.frist-ak-ok { color: var(--frist-ok); font-weight: 600; }
.frist-ak-offen { color: var(--frist-unkontrolliert); font-weight: 600; }
.frist-ak-fehler { color: var(--danger); font-weight: 600; }
.frist-ak-warn { color: var(--frist-warnung); }
/* Einstellungen: Schliesstage und Katalog-Freigabe */
.frist-einst-abschnitt { margin-bottom: 18px; }
.frist-einst-abschnitt h4 { font-size: 14px; margin-bottom: 6px; }
.frist-schliesstage { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.frist-schliesstag { display: inline-flex; align-items: center; gap: 4px; background: var(--frist-normal-hell); color: #4c1d95; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.frist-schliesstag-weg { border: none; background: none; cursor: pointer; color: #4c1d95; font-size: 15px; line-height: 1; padding: 0 2px; }
.frist-schliesstag-neu { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.frist-schliesstag-neu input[type="date"] { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; }
/* Druckansichten (Liste der naechsten 14 Tage, Kontrollbeleg): per @media print, der Rest der Seite bleibt aus. */
#frist-druck { display: none; }
@media print {
  body.frist-druck-aktiv > *:not(#frist-druck) { display: none !important; }
  body.frist-druck-aktiv { background: #fff; }
  body.frist-druck-aktiv #frist-druck { display: block !important; color: #000; font-size: 10pt; }
  #frist-druck h1 { font-size: 15pt; margin: 0 0 4px; }
  #frist-druck h2 { font-size: 12pt; margin: 12px 0 4px; }
  #frist-druck .frist-druck-sub { font-size: 9pt; margin-bottom: 8px; }
  #frist-druck table { width: 100%; border-collapse: collapse; }
  #frist-druck th, #frist-druck td { border: 1px solid #888; padding: 3px 5px; text-align: left; vertical-align: top; }
  #frist-druck tr { page-break-inside: avoid; break-inside: avoid; }
  #frist-druck .frist-druck-notfrist td { font-weight: 700; }
  #frist-druck .frist-druck-haken { width: 16mm; }
  #frist-druck .frist-schritte { margin-left: 16px; }
  #frist-druck .frist-druck-unterschrift { margin-top: 18mm; }
  #frist-druck .frist-druck-linien { display: flex; gap: 10mm; margin-top: 14mm; }
  #frist-druck .frist-druck-linien div { flex: 1; border-top: 1px solid #000; padding-top: 2px; font-size: 9pt; }
  #frist-druck .frist-warnbox, #frist-druck .frist-hinweisbox { border: 1px solid #888; background: none; color: #000; }
}
/* Mobil: Kartenliste, Filter einklappbar, ohne horizontales Scrollen. Reiter "Fristen" der Akte als dritter
   mobiler Reiter (die Mobil-Regel weiter oben blendet sonst alle Panels ausser "Allgemein" aus). */
@media (max-width: 768px) {
  .frist-filter { flex-direction: column; align-items: stretch; }
  .frist-filter-feld { min-width: 0; }
  /* Spalte statt Zeile: die Grundbreite 220px der Suche wirkte sonst als Hoehe (grosse Leerflaeche vor "nur unkontrollierte") */
  .frist-filter-suche { flex: 0 0 auto; }
  .frist-dash-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frist-dash-eintrag { flex-direction: column; align-items: stretch; }
  .frist-dash-eintrag .btn { width: 100%; }
  .frist-felder, .frist-werte { grid-template-columns: 1fr 1fr; }
  .frist-dialog-knoepfe .btn { flex: 1 1 auto; padding: 8px 10px; font-size: 14px; }
  .frist-kopf-knoepfe .btn { flex: 1 1 auto; }
  .frist-seite .table-wrapper { overflow-x: hidden; }
  .akte-tab-panel[data-tab="fristen"].frist-mobil-aktiv { display: block !important; }
  .akte-tab-panel[data-tab="allgemein"].frist-mobil-aus { display: none !important; }
}