/* ===== 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: #0f1f3a url('/hintergrund.png') 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 {
  --primary: #1a56db;
  --primary-hover: #1648b8;
  --primary-light: #e8effc;
  --sidebar-bg: #111827;
  --sidebar-text: #d1d5db;
  --sidebar-active: #1f2937;
  --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);
}

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;
  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); }

/* ===== Vermittler (externe Benutzer): stark eingeschraenkte Akte-Ansicht =====
   Nur die Reiter "Allgemeine Daten" (darin nur Beteiligte + Fahrzeugdaten) und
   "Datenblatt". Alle uebrigen Reiter/Bereiche werden ausgeblendet. Der eigentliche
   Schutz liegt serverseitig (Allowlist + Feld-Filterung); dies ist nur die Optik. */
body.role-vermittler .akte-tab[data-tab="gutachten"],
body.role-vermittler .akte-tab[data-tab="post"],
body.role-vermittler .akte-tab[data-tab="tuev-rechnung"],
body.role-vermittler .akte-tab[data-tab="rechnungen"],
body.role-vermittler .akte-tab[data-tab="dateien"],
body.role-vermittler .akte-tab-panel[data-tab="gutachten"],
body.role-vermittler .akte-tab-panel[data-tab="post"],
body.role-vermittler .akte-tab-panel[data-tab="tuev-rechnung"],
body.role-vermittler .akte-tab-panel[data-tab="rechnungen"],
body.role-vermittler .akte-tab-panel[data-tab="dateien"],
body.role-vermittler .akte-row-2,
body.role-vermittler .akte-mtab2,
body.role-vermittler .akte-mtab[data-mtab="eintraege"] {
  display: none !important;
}
/* Mobile Reiter (Übersicht / Formulare) fuer den Vermittler als sauberes Segmented-Control.
   display steuert weiterhin die Mobile-Media-Query bzw. die globale Desktop-Regel — hier nur Optik. */
body.role-vermittler .akte-mtabs {
  gap: 0;
  margin: 0 0 14px;
  padding: 4px;
  background: var(--bg, #f1f5f9);
  border: 1px solid var(--border);
  border-radius: 12px;
}
body.role-vermittler .akte-mtab {
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  padding: 10px 8px;
  transition: background 0.15s, color 0.15s;
}
body.role-vermittler .akte-mtab.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
/* Status in der Akten-Kopfzeile fuer Vermittler nur lesbar, nicht aenderbar */
body.role-vermittler #inline-akte-status {
  pointer-events: none;
}
/* Beteiligte: Vermittler darf hinzufuegen und (nur innerhalb 1 Stunde nach Anlage) entfernen,
   aber NICHT bearbeiten. Das Loeschen-Kreuz (.bet-remove) wird in renderAkteDetail zeitabhaengig
   ein-/ausgeblendet; hier werden nur die Detail-/Bearbeiten-Buttons (.btn-bet-detail: Details
   anzeigen, Aktenzeichen, Versicherungs-/Schadennummer, Unfallgegner bearbeiten) ausgeblendet
   und der Werkstatt-Fremdrechnungs-Select gesperrt. */
body.role-vermittler .btn-bet-detail {
  display: none !important;
}
/* Akte aelter als 1 Stunde: fuer den Vermittler komplett schreibgeschuetzt. Das Datenblatt
   (Desktop-Reiter + mobile Inline-Ansicht) wird nicht mehr bedienbar; Lesen bleibt moeglich.
   Die Bearbeiten-Buttons sind bereits in renderAkteDetail ausgeblendet. */
body.vermittler-readonly #datenblatt-root,
body.vermittler-readonly .datenblatt-mobile-wrap {
  pointer-events: none;
  opacity: 0.75;
}
.akte-lock-banner {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
}
/* Gut sichtbarer Live-Countdown des Bearbeitungsfensters (Vermittler, frische Akte) */
.akte-countdown-banner {
  background: #dbeafe;
  color: #1e3a8a;
  border: 1px solid #93c5fd;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  line-height: 1.45;
}
.akte-countdown-banner strong {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
/* Bild-Upload-Karte fuer Vermittler auf ALLEN Bildschirmgroessen sichtbar (sonst nur mobil).
   Bilder hochladen ist fuer den Vermittler immer moeglich, auch bei gesperrter Akte. */
body.role-vermittler .akte-tab-panel[data-tab="allgemein"]:not(.mtab-formulare):not(.mtab-eintraege) .mobile-fotos-card {
  display: block !important;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-top: 12px;
}
body.role-vermittler .mobile-fotos-head { font-weight: 700; font-size: 15px; margin-bottom: 10px; }
body.role-vermittler .mobile-foto-btn { width: 100%; margin-bottom: 6px; }
body.role-vermittler .mfoto-status { margin: 0 0 10px; }
body.role-vermittler .mfoto-status:empty { margin: 0; }
body.role-vermittler .mfoto-status-text { font-size: 12px; color: var(--text-muted); margin-bottom: 3px; }
body.role-vermittler .mfoto-bar { height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; }
body.role-vermittler .mfoto-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width 0.3s ease; }
body.role-vermittler .mfoto-bar-fill.done { background: #16a34a; }
body.role-vermittler .beteiligte-body select {
  pointer-events: none;
  opacity: 0.6;
}

.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. */
#post-list .s3-row:nth-child(odd) { background: var(--bg); }

/* ===== 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);
}
.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;
}
.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.04);
}
.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);
}
.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;
}

@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. Unfallgegner (oft mehrere Namen) - schrumpft zuerst und am staerksten
   2. Versicherung
   3. Vermittler / Werkstatt / Anwalt / Sonstige - gleichwertig
   4. Halter - bleibt so lang wie moeglich vollstaendig sichtbar */
.beteiligte-tab.bet-type-kunde,
.beteiligte-tab.bet-type-auftraggeber {
  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, #1e3a5f 0%, #1a56db 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 */
  .nav-list li a[data-page="calendar"],
  .nav-list li a[data-page="time-tracking"],
  .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;
  }

  /* 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"/"Formulare" aktiv: Übersichts-Blöcke aus, jeweiliger Tab-Inhalt an */
  .akte-tab-panel[data-tab="allgemein"].mtab-eintraege .akte-row-1,
  .akte-tab-panel[data-tab="allgemein"].mtab-eintraege .mobile-fotos-card,
  .akte-tab-panel[data-tab="allgemein"].mtab-eintraege .datenblatt-mobile-wrap,
  .akte-tab-panel[data-tab="allgemein"].mtab-formulare .akte-row-1,
  .akte-tab-panel[data-tab="allgemein"].mtab-formulare .mobile-fotos-card,
  .akte-tab-panel[data-tab="allgemein"].mtab-formulare .datenblatt-mobile-wrap { display: none !important; }
  .akte-tab-panel[data-tab="allgemein"].mtab-eintraege .akte-mtab2 { display: block; }
  .akte-tab-panel[data-tab="allgemein"].mtab-formulare .akte-mtab-formulare { 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.
     Darunter folgt das komplette mobile Datenblatt (#datenblatt-mobile-wrap). */
  .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; }

  /* ===== Mobile Datenblatt (vollständig, vertikal, gut tippbar) ===== */
  /* Höhere Spezifität als die globale display:none-Regel (sonst gewinnt die spätere Regel). */
  .akte-tab-panel[data-tab="allgemein"] .datenblatt-mobile-wrap { display: block; margin-top: 14px; }
  /* Foto-Karte (Außendienst) — höhere Spezifität als die globale display:none-Regel */
  .akte-tab-panel[data-tab="allgemein"] .mobile-fotos-card {
    display: block;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin-top: 12px;
  }
  .mobile-fotos-head { font-weight: 700; font-size: 15px; margin-bottom: 10px; }
  .mobile-fotos-hint { font-size: 12px; color: var(--text-muted); margin-top: 8px; text-align: center; }
  .mobile-foto-btn { width: 100%; margin-bottom: 4px; }
  .mfoto-status { margin: 0 0 10px; }
  .mfoto-status:empty { margin: 0; }
  .mfoto-status-text { font-size: 12px; color: var(--text-muted); margin-bottom: 3px; }
  .mfoto-bar { height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; }
  .mfoto-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width 0.3s ease; }
  .mfoto-bar-fill.done { background: #16a34a; }
  /* 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); }
  .dbm-section { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
  .dbm-h { background: var(--bg); padding: 12px 14px; font-weight: 700; font-size: 15px; border-bottom: 1px solid var(--border); }
  .dbm-bdy { padding: 14px; }
  .dbm-field { margin-bottom: 12px; }
  /* Zwei Felder nebeneinander (kompakte Schadenaufnahme) */
  .dbm-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; align-items: start; }
  .dbm-pair .dbm-field { min-width: 0; }
  .dbm-triple { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 8px; align-items: start; }
  .dbm-triple .dbm-field { min-width: 0; }
  .datenblatt-mobile-wrap .db-multi { width: 100%; box-sizing: border-box; }
  /* Sichtbarkeit der Erfassung: leeres Feld rot, ausgefülltes Feld grün getönt. */
  .datenblatt-mobile-wrap .db-input.dbm-empty { background: #fde8e8; border-color: #f0b4b4; }
  .datenblatt-mobile-wrap .db-input.dbm-filled { background: #e4f6e4; border-color: #a3d9a3; }
  .datenblatt-mobile-wrap .db-multi.dbm-empty .db-multi-summary { background: #fde8e8; border-color: #f0b4b4; }
  .datenblatt-mobile-wrap .db-multi.dbm-filled .db-multi-summary { background: #e4f6e4; border-color: #a3d9a3; }
  .dbm-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; }
  .dbm-sub { font-weight: 700; font-size: 14px; margin: 8px 0 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
  /* Eingabefelder volle Breite, 16px gegen iOS-Auto-Zoom beim Fokus */
  .datenblatt-mobile-wrap input.db-input,
  .datenblatt-mobile-wrap select.db-input,
  .datenblatt-mobile-wrap textarea.db-input,
  .datenblatt-mobile-wrap .dbm-textarea { width: 100%; box-sizing: border-box; font-size: 16px; }
  /* "Schadenaufnahme" nutzt die Desktop-.db-row → mobil Label über Feld stapeln */
  .datenblatt-mobile-wrap .db-row { grid-template-columns: 1fr !important; gap: 5px !important; padding: 6px 0 !important; }
  .datenblatt-mobile-wrap .db-row:hover { background: transparent; }
  .datenblatt-mobile-wrap .db-cell { width: 100%; min-width: 0; }
  .datenblatt-mobile-wrap .db-section { padding: 0; }
  /* Bauteil-Liste (Altschäden/Lackdicke) */
  .dbm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
  .dbm-partlist { display: flex; flex-direction: column; gap: 8px; }
  .dbm-part-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
  .dbm-part-label { font-size: 14px; }
  /* Kompakte Bauteil-Zelle (Altschäden 3-er-Gruppen): Label oben, Button darunter */
  .dbm-part-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
  .dbm-part-clabel { font-size: 12px; text-align: center; line-height: 1.25; }
  .dbm-pbtn { flex: 0 0 auto; min-width: 56px; height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); font-size: 15px; font-weight: 700; cursor: pointer; color: var(--text); }
  .dbm-pbtn.has { background: var(--primary); border-color: var(--primary); color: #fff; }
  .dbm-pbtn.lack-green { background: #16a34a; border-color: #16a34a; color: #fff; }
  .dbm-pbtn.lack-red { background: #dc2626; border-color: #dc2626; color: #fff; }
  .dbm-actions { display: flex; gap: 8px; margin-top: 10px; }
  .dbm-actions .btn { flex: 1; }
  .dbm-textarea { min-height: 70px; resize: vertical; }
  .dbm-textarea.db-lack-edit { min-height: 90px; }

  /* 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, #0f172a 0%, #1e3a5f 50%, #1a56db 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, #0f172a 0%, #1e3a5f 50%, #1a56db 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;
}

/* 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- & Halter-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;
}

/* ===== Datenblatt (Schadenaufnahme) ===== */
.db-section {
  padding: 16px 18px 14px;
  background: #ffffff;
  border: 1px solid #dde4f0;
  border-top: 3px solid var(--primary);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.05), 0 10px 22px -14px rgba(16,24,40,0.25);
}
.db-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 6px 8px;
  align-items: center;
  padding: 5px 8px;
  border-radius: 6px;
  transition: background 0.12s ease;
}
.db-row:hover {
  background: #eef3fb;
}
.db-label {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.db-cell {
  font-size: 13px;
}
.db-input {
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid #d3dbe7;
  border-radius: 6px;
  background: #eef2f8;
  color: var(--text);
  font-family: inherit;
  box-sizing: border-box;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.db-input:hover {
  border-color: #aab8cc;
}
.db-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.15);
}
select.db-input {
  cursor: pointer;
}
textarea.db-input {
  resize: vertical;
  min-height: 60px;
  width: 100%;
}
input.db-input,
select.db-input {
  width: 100%;
}
.db-divider {
  height: 1px;
  background: linear-gradient(90deg, #c3cfe2 0%, rgba(195,207,226,0) 92%);
  margin: 14px 0 12px;
}
.db-inner-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid #dde4f0;
  margin-top: 16px;
}
.db-tab {
  padding: 9px 16px;
  background: transparent;
  border: none;
  border-radius: 7px 7px 0 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: #64748b;
  font-family: inherit;
  position: relative;
  transition: color 0.12s ease, background 0.12s ease;
}
.db-tab:hover {
  color: var(--primary);
  background: #eef3fb;
}
.db-tab.active {
  background: #f3f7fd;
  color: var(--primary);
  box-shadow: inset 0 3px 0 var(--primary);
}
.db-inner-panel {
  padding: 16px;
  border: 1px solid #dde4f0;
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: #f8fafd;
  min-height: 220px;
}
.db-altsch-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 6px 10px;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.12s ease;
}
.db-altsch-row:hover {
  background: #eef3fb;
}
.db-status {
  font-size: 12px;
  font-weight: 600;
  min-height: 16px;
  transition: color 0.2s;
}
/* Mehrfachauswahl-Dropdown im Datenblatt */
.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; }

/* Altschäden — 4 Ansichten (Front / Heck / Seite links / Seite rechts) */
.db-altsch { display: flex; flex-direction: column; gap: 16px; }
.db-altsch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
/* Hauptbereich: Skizze links, Schadenbeschreibung + Generieren rechts */
.db-altsch-main { display: flex; gap: 18px; align-items: stretch; flex-wrap: wrap; }
.db-altsch-skizze { flex: 1 1 56%; min-width: 320px; }
.db-altsch-side { flex: 1 1 34%; min-width: 240px; display: flex; flex-direction: column; }
.db-altsch-side .db-label { margin-bottom: 6px; }
.db-altsch-textarea { flex: 1 1 auto; min-height: 240px; resize: vertical; line-height: 1.55; }
.db-altsch-gen { align-self: flex-end; margin-top: 10px; }
.db-altsch-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
/* Schadenbeschreibung + sonstige Altschäden teilen sich die rechte Spalte je zur Hälfte */
.db-altsch-half { flex: 1 1 0; min-height: 90px; resize: vertical; line-height: 1.5; }
/* Kopf-Zeile über den Textfeldern: Label links, Kopier-Button rechts */
.db-text-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.db-text-head .db-label { margin-bottom: 0; }
.db-copy-btn { font-size: 12px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text); cursor: pointer; white-space: nowrap; line-height: 1.4; }
.db-copy-btn:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
/* Lackdicke-Buttons: grün (normal) / rot (auffällig) */
.db-skizze-btn.lack-green { background: #16a34a; border-color: #16a34a; color: #fff; }
.db-skizze-btn.lack-red { background: #dc2626; border-color: #dc2626; color: #fff; }
/* Lackdicke-Text: auffällige Werte rot */
.db-lack-redval { color: #dc2626; font-weight: 600; }
/* Contenteditable-Lackdicke-Textfeld + Platzhalter */
.db-lack-edit { overflow: auto; white-space: pre-wrap; }
.db-lack-edit:empty:before { content: attr(data-ph); color: var(--text-muted); }
.db-skizze-card { background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%); border: 1px solid #e3e9f4; border-radius: 14px; padding: 14px 16px 16px; box-shadow: 0 2px 10px rgba(16, 24, 40, 0.05); }
.db-skizze-wide { grid-column: 1 / -1; }
.db-skizze-title { font-size: 12px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
.db-skizze { position: relative; width: 100%; }
.db-skizze-card:not(.db-skizze-wide) .db-skizze { max-width: 178px; margin: 0 auto; }
.db-skizze-wide .db-skizze { max-width: 520px; }
.db-skizze-combo .db-skizze { max-width: 100%; margin: 0 auto; }
.db-car-img { width: 100%; height: auto; display: block; border-radius: 8px; }
.db-altsch-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.db-altsch-legend b { color: var(--primary); margin-right: 2px; }
.db-skizze-btn {
  position: absolute; transform: translate(-50%, -50%);
  min-width: 24px; height: 22px; padding: 0 5px;
  border-radius: 11px; border: 1.5px solid var(--primary);
  background: #fff; color: var(--primary);
  font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.25); white-space: nowrap;
  transition: background 0.1s ease, transform 0.1s ease;
}
.db-skizze-btn:hover { background: var(--primary-light); transform: translate(-50%, -50%) scale(1.12); z-index: 5; }
.db-skizze-btn.has { background: #dc2626; border-color: #dc2626; color: #fff; }
.db-skizze-btn.felge {
  width: 24px; min-width: 24px; height: 24px; border-radius: 50%;
  border-style: dashed; border-color: #475569; color: #475569; background: #f1f5f9;
}
.db-skizze-btn.felge.has { background: #dc2626; border-color: #dc2626; border-style: solid; color: #fff; }

/* Schaden-Popup (K/D/F/R) */
.altsch-popup {
  position: absolute; z-index: 1000; background: #fff;
  border: 1px solid #cbd5e1; border-radius: 10px;
  box-shadow: 0 14px 34px -10px rgba(16, 24, 40, 0.4);
  padding: 8px; min-width: 180px;
}
.altsch-popup-title {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.4px; margin: 2px 6px 8px;
}
.altsch-popup-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px; font-size: 13px; cursor: pointer;
}
.altsch-popup-opt:hover { background: #eef3fb; }
.altsch-popup-opt input { width: auto; margin: 0; accent-color: var(--primary); }
.altsch-popup-opt b { display: inline-block; width: 14px; color: var(--primary); text-align: center; }

/* Mobiles Datenblatt: auf dem Desktop grundsätzlich ausgeblendet (nur im Mobile-Media-Query an). */
.datenblatt-mobile-wrap { display: none; }
.mobile-fotos-card { display: none; }
/* Mobile Akten-Reiter + Tab-Inhalte: nur im Mobile-Media-Query sichtbar. */
.akte-mtabs { display: none; }
.akte-mtab2 { display: none; }
.akte-mtab-formulare { 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;   }
}