/* ═══════════════════════════════════════════════════════════════════════════
   Vehicle Control – Neues Design, Paket 1 (03.10.2026, Baris/Ali-Vorschau)
   Gilt NUR, wenn <html data-design="neu"> gesetzt ist (Schalter „Neues Design“, design-neu.js).
   Ohne Schalter bleibt alles exakt wie bisher. Paket 1 = Rahmen: Farben, Schrift, Logo,
   Hell/Dunkel für Kopfzeile + Seitenleiste. Die Inhalte (viele feste Inline-Farben) bleiben
   im dunklen Schema vorerst helle Karten – spätere Pakete stellen sie Bereich für Bereich um.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-design="neu"] {
  --n-bg:#F1F5F9; --n-card:#FFFFFF; --n-card-2:#F8FAFC; --n-line:#CBD5E1; --n-line-soft:#E2E8F0;
  --n-ink:#0F172A; --n-ink-2:#475569; --n-ink-3:#64748B;
  --n-acc:#84CC16; --n-acc-hi:#A3E635; --n-acc-text:#3F6212; --n-on-acc:#0F172A; --n-acc-soft:rgba(132,204,22,.16);
  --n-shadow:0 1px 2px rgba(15,23,42,.06),0 4px 16px -8px rgba(15,23,42,.12);
  --n-f-head:'Outfit',system-ui,sans-serif; --n-f-text:'Inter',system-ui,sans-serif;

  /* bestehende Variablen des Dashboards auf die neuen Werte legen (hell) */
  --bg-base: var(--n-bg);
  --bg-surface: var(--n-card);
  --bg-card: var(--n-card);
  --bg-card-hover: var(--n-card-2);
  --border: var(--n-line-soft);
  --border-hover: var(--n-line);
  --text-primary: var(--n-ink);
  --text-secondary: #1E293B;
  --text-muted: var(--n-ink-2);
}
html[data-design="neu"][data-vc-theme="dark"] {
  --n-bg:#020617; --n-card:#0F172A; --n-card-2:#1E293B; --n-line:#334155; --n-line-soft:rgba(148,163,184,.16);
  --n-ink:#F8FAFC; --n-ink-2:#94A3B8; --n-ink-3:#64748B;
  --n-acc-text:#A3E635; --n-acc-soft:rgba(132,204,22,.14);
  --n-shadow:none;
}

/* ── Grundlage ── */
html[data-design="neu"] body {
  font-family: var(--n-f-text);
  background: var(--n-bg);
  color: var(--n-ink);
  font-variant-numeric: tabular-nums;
}
html[data-design="neu"] h1, html[data-design="neu"] h2, html[data-design="neu"] h3 { font-family: var(--n-f-head); }
html[data-design="neu"] :focus-visible { outline: 2px solid var(--n-acc); outline-offset: 2px; }

/* ── Kopfzeile ── */
html[data-design="neu"] #app-header {
  background: var(--n-card);
  border-bottom: 1px solid var(--n-line-soft);
  color: var(--n-ink);
}
html[data-design="neu"] #app-header .logo img { height: 40px !important; }
html[data-design="neu"] #vehicle-selector {
  background: var(--n-card-2); color: var(--n-ink); border: 1px solid var(--n-line);
  border-radius: 12px; min-height: 40px;
}

/* ── Seitenleiste ── */
html[data-design="neu"] .tab-navigation {
  background: var(--n-card);
  border-right: 1px solid var(--n-line-soft);
}
html[data-design="neu"] .nav-group-title {
  color: var(--n-ink-3);
  text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600;
}
html[data-design="neu"] .tab-btn {
  color: var(--n-ink);
  font-weight: 500; font-size: 14.5px;
  min-height: 44px; border-radius: 12px; border-left: 3px solid transparent;
}
html[data-design="neu"] .tab-btn:hover { background: var(--n-card-2); color: var(--n-ink); }
html[data-design="neu"] .tab-btn.active {
  background: var(--n-acc-soft);
  color: var(--n-acc-text);
  border-left-color: var(--n-acc);
  font-weight: 600;
}

/* ── Hauptbereich ── */
html[data-design="neu"] #dashboard { background: var(--n-bg); }

/* Knöpfe: Hauptaktion in Limette mit dunkler Schrift (Kontrast) */
html[data-design="neu"] .btn-primary {
  background: var(--n-acc); color: var(--n-on-acc);
  box-shadow: none; border-radius: 12px; font-weight: 600;
}
html[data-design="neu"] .btn-primary:hover { background: var(--n-acc-hi); color: var(--n-on-acc); }

/* Karten ruhiger */
html[data-design="neu"] .card {
  border: 1px solid var(--n-line-soft);
  border-radius: 16px;
  box-shadow: var(--n-shadow);
}

/* ── Dunkel: Inhalte bleiben vorerst helle Karten (feste Inline-Farben) ── */
html[data-design="neu"][data-vc-theme="dark"] .tab-pane:not(.hidden) {
  color-scheme: light;
  background: #F8FAFC;
  color: #0F172A;
  border-radius: 16px;
  padding: 12px;
  /* innerhalb der Inhalte die alten Variablen wieder hell */
  --bg-base:#F8FAFC; --bg-surface:#FFFFFF; --bg-card:#FFFFFF; --bg-card-hover:#F1F5F9;
  --border:#E2E8F0; --border-hover:#CBD5E1;
  --text-primary:#0F172A; --text-secondary:#1E293B; --text-muted:#475569;
}
html[data-design="neu"][data-vc-theme="dark"] .modal,
html[data-design="neu"][data-vc-theme="dark"] .modal-content,
html[data-design="neu"][data-vc-theme="dark"] [id^="modal-"] {
  color-scheme: light;
  --bg-base:#F8FAFC; --bg-surface:#FFFFFF; --bg-card:#FFFFFF; --bg-card-hover:#F1F5F9;
  --border:#E2E8F0; --border-hover:#CBD5E1;
  --text-primary:#0F172A; --text-secondary:#1E293B; --text-muted:#475569;
}

/* ── Schalter in der Kopfzeile ── */
.vc-design-btn, .vc-theme-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid #CBD5E1; background: transparent; color: inherit;
  font: 600 12.5px/1 'Inter', system-ui, sans-serif; cursor: pointer; white-space: nowrap;
}
.vc-design-btn .p { width: 8px; height: 8px; border-radius: 50%; background: #94A3B8; }
html[data-design="neu"] .vc-design-btn .p { background: #84CC16; }
html[data-design="neu"] .vc-design-btn, html[data-design="neu"] .vc-theme-btn { border-color: var(--n-line); color: var(--n-ink); }
.vc-theme-btn { display: none; padding: 0 10px; font-size: 16px; }
html[data-design="neu"] .vc-theme-btn { display: inline-flex; }
@media (max-width: 768px) {
  .vc-design-btn .t { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-design="neu"] .tab-pane { animation: none; }
}

/* Versionsstempel unten links: eigener Grund + Platz in der Seitenleiste, damit er nichts überdeckt */
html[data-design="neu"] .tab-navigation .tabs-container { padding-bottom: 26px; }
html[data-design="neu"] #app-version-badge { background: var(--n-card); color: var(--n-ink-3) !important; padding: 2px 6px; border-radius: 6px; }

/* ═══ Paket 2: Abholungen-Tafel + Meldungsliste (vc-neu.js) ═══ */
html:not([data-design="neu"]) .vc-nur-neu { display: none !important; }
html[data-design="neu"] {
  --h-rot:#DC2626; --h-rot-bg:rgba(220,38,38,.08); --h-rot-rand:rgba(220,38,38,.28);
  --h-gelb:#B45309; --h-gelb-bg:rgba(217,119,6,.08); --h-gelb-rand:rgba(217,119,6,.28);
  --h-gruen:#15803D; --h-gruen-bg:rgba(22,163,74,.12);
}
html[data-design="neu"][data-vc-theme="dark"] {
  --h-rot:#F87171; --h-rot-bg:rgba(248,113,113,.10); --h-rot-rand:rgba(248,113,113,.32);
  --h-gelb:#FBBF24; --h-gelb-bg:rgba(251,191,36,.08); --h-gelb-rand:rgba(251,191,36,.26);
  --h-gruen:#4ADE80; --h-gruen-bg:rgba(74,222,128,.12);
}
html[data-design="neu"] .vc-nur-alt { display: none !important; }
/* Meldungen: die neue Liste ersetzt im neuen Design das alte Banner (es läuft unsichtbar weiter für den Zähler) */
html[data-design="neu"] #overdue-alert, html[data-design="neu"] #meldungen-leer { display: none !important; }
/* Dunkel: Reiter-Inhalte bleiben helle Karten – die neuen Bausteine darin ebenfalls hell halten */
html[data-design="neu"][data-vc-theme="dark"] .tab-pane:not(.hidden),
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details {
  --n-card:#FFFFFF; --n-card-2:#F8FAFC; --n-line:#CBD5E1; --n-line-soft:#E2E8F0; --n-ink:#0F172A; --n-ink-2:#475569; --n-ink-3:#64748B;
  --n-acc-text:#3F6212; --n-acc-soft:rgba(132,204,22,.16); --n-shadow:none;
  --h-rot:#DC2626; --h-rot-bg:rgba(220,38,38,.08); --h-rot-rand:rgba(220,38,38,.28);
  --h-gelb:#B45309; --h-gelb-bg:rgba(217,119,6,.08); --h-gelb-rand:rgba(217,119,6,.28);
  --h-gruen:#15803D; --h-gruen-bg:rgba(22,163,74,.12);
}
.vc-h { font-family: var(--n-f-text); color: var(--n-ink); width: 100%; box-sizing: border-box; margin-bottom: 16px; }
.vc-h.h-karte { background: var(--n-card); border: 1px solid var(--n-line-soft); border-radius: 16px; box-shadow: var(--n-shadow); padding: 16px 18px; min-width: 0; }
.vc-h .h-kt { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.vc-h h3 { margin: 0; font: 600 17px/1.3 var(--n-f-head); color: var(--n-ink); display: flex; align-items: center; gap: 8px; }
.vc-h h4 { margin: 0 0 8px; font: 600 13px/1.3 var(--n-f-text); color: var(--n-ink-2); letter-spacing: .02em; text-transform: uppercase; }
.vc-h .h-n { color: var(--n-ink-3); font-weight: 500; }
.vc-h .h-hint { color: var(--n-ink-3); font-size: 12.5px; }
.vc-h .h-badge:empty { display: none; }
.vc-h .h-badge { background: var(--h-rot); color: #fff; border-radius: 999px; font: 700 12px/1 var(--n-f-text); padding: 4px 8px; }
.vc-h .h-leer { color: var(--n-ink-2); font-size: 14px; padding: 8px 2px; }

/* Dringend */
.vc-h .h-meldungen { display: flex; flex-direction: column; gap: 6px; }
.vc-h .h-meld { display: flex; align-items: stretch; gap: 6px; }
.vc-h .h-meld-k { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; text-align: left;
  background: var(--h-gelb-bg); border: 1px solid var(--h-gelb-rand); border-radius: 12px; padding: 9px 12px; color: var(--n-ink); font: 400 14px/1.4 var(--n-f-text); cursor: pointer; min-height: 44px; }
.vc-h .h-meld.rot .h-meld-k { background: var(--h-rot-bg); border-color: var(--h-rot-rand); }
.vc-h .h-meld-k:disabled { cursor: default; opacity: 1; }
.vc-h .h-meld-t { min-width: 0; overflow-wrap: anywhere; }
.vc-h .h-meld-z { color: var(--n-ink-2); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vc-h .h-meld-z em { font-style: normal; font-weight: 700; color: var(--h-rot); margin-left: 4px; }
.vc-h .h-chip { display: inline-flex; align-items: center; gap: 5px; font: 700 11.5px/1 var(--n-f-text); padding: 5px 8px; border-radius: 999px; white-space: nowrap; color: var(--h-gelb); background: var(--h-gelb-bg); border: 1px solid var(--h-gelb-rand); justify-self: start; }
.vc-h .h-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.vc-h .h-chip.grau { color: var(--n-ink-2); background: var(--n-card-2); border-color: var(--n-line); }
.vc-h .h-chip.gruen { color: var(--h-gruen); background: var(--h-gruen-bg); border-color: var(--h-gruen); }
.vc-h .h-meld.grau .h-meld-k { background: var(--n-card-2); border-color: var(--n-line-soft); }
.vc-h .h-meld.gruen .h-meld-k { background: var(--h-gruen-bg); border-color: rgba(22,163,74,.3); }
.vc-h .h-chip.rot { color: var(--h-rot); background: var(--h-rot-bg); border-color: var(--h-rot-rand); }
.vc-h .h-x, .vc-h .h-mini { border: 1px solid var(--n-line); background: var(--n-card-2); color: var(--n-ink-2); border-radius: 10px; cursor: pointer; font: 600 12px/1 var(--n-f-text); }
.vc-h .h-x { width: 40px; flex: none; font-size: 14px; }
.vc-h .h-mini { padding: 0 10px; white-space: nowrap; }
.vc-h .h-mini-ok { color: var(--n-acc-text); border-color: var(--n-acc-soft); }
.vc-h .h-link { align-self: flex-start; border: none; background: none; color: var(--n-acc-text); font: 600 13.5px/1 var(--n-f-text); padding: 8px 2px; cursor: pointer; }
.vc-h .h-tuer { margin-top: 10px; color: var(--n-ink-3); font-size: 12.5px; }

/* Abholen / Zurück */
.vc-h .h-tagwahl { display: inline-flex; border: 1px solid var(--n-line); border-radius: 999px; overflow: hidden; }
.vc-h .h-tagwahl button { border: none; background: transparent; color: var(--n-ink); font: 600 13.5px/1 var(--n-f-text); min-height: 36px; padding: 0 12px; cursor: pointer; }
.vc-h .h-tagwahl button + button { border-left: 1px solid var(--n-line); }
.vc-h .h-tagwahl button:hover { background: var(--n-card-2); }
.vc-h .h-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vc-h .h-liste { display: flex; flex-direction: column; gap: 6px; }
.vc-h .h-zeile { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px; text-align: left; width: 100%;
  background: var(--n-card-2); border: 1px solid var(--n-line-soft); border-radius: 12px; padding: 9px 12px; color: var(--n-ink); font: 400 14px/1.35 var(--n-f-text); cursor: pointer; min-height: 48px; }
.vc-h .h-zeile:hover { border-color: var(--n-line); }
.vc-h .h-zeile.fertig { opacity: .62; }
.vc-h .h-zeile.ueber { background: var(--h-rot-bg); border-color: var(--h-rot-rand); }
.vc-h .h-uhr { font: 700 15px/1 var(--n-f-head); font-variant-numeric: tabular-nums; }
.vc-h .h-zeile.ueber .h-uhr { color: var(--h-rot); }
.vc-h .h-wer { min-width: 0; display: flex; flex-wrap: wrap; column-gap: 6px; align-items: baseline; }
.vc-h .h-mod { color: var(--n-ink-2); font-size: 13px; }
.vc-h .h-name { flex-basis: 100%; color: var(--n-ink-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-h .h-fehlt { flex-basis: 100%; color: var(--h-gelb); font-size: 12.5px; font-weight: 600; }
.vc-h .h-fehlt.rot { color: var(--h-rot); }
.vc-h .h-fehlt.ok { color: var(--h-gruen); }
.vc-h .h-jetzt { display: flex; align-items: center; gap: 8px; color: var(--n-acc-text); font: 700 11.5px/1 var(--n-f-text); margin: 2px 0; }
.vc-h .h-jetzt::before, .vc-h .h-jetzt::after { content: ""; height: 2px; background: var(--n-acc); flex: 1; border-radius: 2px; }
.vc-h .h-jetzt::before { flex: 0 0 10px; }
.vc-h .h-amp { display: inline-flex; gap: 3px; vertical-align: middle; }
.vc-h .h-amp i { font: 700 11px/1 var(--n-f-text); font-style: normal; width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.vc-h .h-amp i.ok { background: var(--h-gruen-bg); color: var(--h-gruen); border: 1.5px solid var(--h-gruen); }
.vc-h .h-amp i.offen, .vc-h .h-amp i.teil { background: transparent; color: var(--h-gelb); border: 1.5px dashed var(--h-gelb); }
.vc-h .h-amp i.fehler { background: var(--h-rot); color: #fff; border: 1.5px solid var(--h-rot); }
.vc-h .h-amp i.na { background: transparent; color: var(--n-ink-3); border: 1.5px solid var(--n-line-soft); opacity: .7; }
.vc-h .h-legende { margin-top: 12px; color: var(--n-ink-3); font-size: 12.5px; line-height: 1.8; }
.vc-h .h-legende .h-amp i { width: 17px; height: 17px; font-size: 10px; }


@media (max-width: 860px) {
  .vc-h .h-zwei { grid-template-columns: 1fr; }
  .vc-h.h-karte { padding: 14px; }
  .vc-h .h-meld-k { grid-template-columns: 1fr; gap: 6px; }
  .vc-h .h-meld-z { white-space: normal; }
}

/* ═══ Paket 4: Kopf der Buchungs-Details (vc-neu.js) ═══ */
html[data-design="neu"] #btn-delete-booking-top { display: none !important; }   /* liegt jetzt im Menü „Weitere“ */
html:not([data-design="neu"]) #vc-geld { display: none !important; }
#modal-booking-details .vc-geld { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0; padding: 10px 24px;
  background: var(--n-card-2); border-bottom: 1px solid var(--n-line-soft); font-size: 13.5px; }
.vc-geld .g-feld { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vc-geld .g-feld .l { color: var(--n-ink-2); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.vc-geld .g-feld b { font: 700 16px/1.2 var(--n-f-head); font-variant-numeric: tabular-nums; color: var(--n-ink); }
.vc-geld .g-feld b.rot { color: var(--h-rot); }
.vc-geld .g-feld b.ok { color: var(--h-gruen); }
.vc-geld .g-menue { position: relative; }
.vc-geld .g-menue.rechts { margin-left: auto; }
.vc-geld .g-btn { min-height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--n-line); background: var(--n-card); color: var(--n-ink); font: 600 13px/1 var(--n-f-text); cursor: pointer; }
.vc-geld .g-btn.haupt { background: var(--n-acc); border-color: var(--n-acc); color: var(--n-on-acc); }
.vc-geld .g-btn:disabled { opacity: .45; cursor: default; }
.vc-geld .g-liste { position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; min-width: 250px; background: #fff; color: #0F172A; border: 1px solid #CBD5E1; border-radius: 12px; box-shadow: 0 12px 32px -8px rgba(15,23,42,.25); padding: 6px; display: flex; flex-direction: column; }
.vc-geld .g-menue.rechts .g-liste { left: auto; right: 0; }
.vc-geld .g-liste[hidden] { display: none; }
.vc-geld .g-liste button { text-align: left; border: none; background: none; color: inherit; font: 500 13.5px/1.3 var(--n-f-text); padding: 10px 12px; border-radius: 8px; cursor: pointer; min-height: 40px; }
.vc-geld .g-liste button:hover { background: #F1F5F9; }
.vc-geld .g-liste button[hidden] { display: none; }
.vc-geld .g-liste button.rot { color: #B91C1C; }
.vc-geld .g-liste button small { display: block; color: #64748B; font-size: 11.5px; font-weight: 400; margin-top: 2px; }
.vc-geld .g-hinweis { flex-basis: 100%; color: var(--n-ink-3); font-size: 12px; }
.vc-geld .g-hinweis:empty { display: none; }
html[data-design="neu"] #modal-booking-details .modal-header { background: var(--n-card) !important; border-bottom: 1px solid var(--n-line-soft) !important; }
html[data-design="neu"] #modal-booking-details .modal-header h3 { color: var(--n-ink) !important; }
.vc-geld .g-feld b { overflow-wrap: anywhere; }
@media (max-width: 860px) { #modal-booking-details .vc-geld { padding: 10px 14px; gap: 8px 14px; } .vc-geld .g-feld { flex: 1 1 40%; } .vc-geld .g-menue.rechts { margin-left: 0; } .vc-geld .g-menue.rechts .g-liste { left: 0; right: auto; } }

/* ═══ Paket 5: Navigation (vc-neu.js) ═══ */
html:not([data-design="neu"]) #vc-unten, html:not([data-design="neu"]) #vc-blatt { display: none !important; }
html[data-design="neu"] .vc-nav-titel { margin-top: 14px; padding: 0 12px 4px; }
html[data-design="neu"] .tabs-container > .vc-nav-titel:first-child { margin-top: 0; }
html[data-design="neu"] a.tab-btn { text-decoration: none; font-weight: 500; }
html[data-design="neu"] a.tab-btn.active { font-weight: 600; }
html[data-design="neu"] .tab-btn.vc-link .vc-extern { margin-left: auto; color: var(--n-ink-3); font-size: 12px; }
html[data-design="neu"] .vc-einst { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; border-top: 1px solid var(--n-line-soft); padding-top: 6px; }
html[data-design="neu"] .vc-einst > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; border-radius: 10px; min-height: 36px; }
html[data-design="neu"] .vc-einst > summary::-webkit-details-marker { display: none; }
html[data-design="neu"] .vc-einst > summary::after { content: "▸"; font-size: 12px; color: var(--n-ink-3); transition: transform .15s; }
html[data-design="neu"] .vc-einst[open] > summary::after { transform: rotate(90deg); }
html[data-design="neu"] .vc-einst > summary:hover { background: var(--n-card-2); }
html[data-design="neu"] .vc-einst > summary:focus-visible { outline: 2px solid var(--n-acc); outline-offset: 2px; }

/* Handy: untere Leiste statt der waagrechten Reiterleiste oben */
.vc-unten { display: none; }
@media (max-width: 900px) {
  html[data-design="neu"] .tab-navigation { display: none !important; }
  html[data-design="neu"] body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  html[data-design="neu"] .vc-unten { display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000;
    background: var(--n-card); border-top: 1px solid var(--n-line-soft); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px -12px rgba(15,23,42,.25); }
  html[data-design="neu"] .vc-unten button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; border: none; background: none; color: var(--n-ink-2);
    font: 600 11px/1.1 var(--n-f-text); min-height: 52px; padding: 4px 2px; border-radius: 12px; cursor: pointer; }
  html[data-design="neu"] .vc-unten button.aktiv { color: var(--n-acc-text); background: var(--n-acc-soft); }
  html[data-design="neu"] .vc-unten .vc-plus { justify-self: center; width: 54px; height: 54px; min-height: 54px; border-radius: 50%; background: var(--n-acc); color: var(--n-on-acc);
    font: 400 32px/1 var(--n-f-text); margin-bottom: 6px; box-shadow: 0 6px 16px -6px rgba(101,163,13,.7);
    justify-content: center; padding: 0; gap: 0; }   /* Plus genau in der Kreismitte (05.10.2026) */
  html[data-design="neu"] .vc-unten .vc-zahl { position: absolute; top: 2px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--h-rot, #DC2626); color: #fff; font: 700 11px/18px var(--n-f-text); }
  html[data-design="neu"] .vc-unten .vc-zahl[hidden] { display: none; }
  html[data-design="neu"] #btn-new-booking-fab { bottom: calc(84px + env(safe-area-inset-bottom)) !important; display: none !important; }
  html[data-design="neu"] #app-version-badge { bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
}
.vc-blatt { position: fixed; inset: 0; z-index: 2300; background: rgba(15,23,42,.5); display: flex; align-items: flex-end; }
.vc-blatt[hidden] { display: none; }
.vc-blatt-k { width: 100%; max-height: 82vh; overflow-y: auto; background: var(--n-card); color: var(--n-ink); border-radius: 20px 20px 0 0; padding: 8px 14px calc(18px + env(safe-area-inset-bottom)); font-family: var(--n-f-text); }
.vc-blatt-kopf { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--n-card); padding: 8px 2px; }
.vc-blatt-kopf b { font: 700 17px/1.2 var(--n-f-head); }
.vc-blatt-zu { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--n-line); background: var(--n-card-2); color: var(--n-ink); cursor: pointer; }
.vc-blatt-titel { color: var(--n-ink-3); font-size: 12.5px; font-weight: 600; margin: 12px 4px 4px; }
.vc-blatt-e { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 10px; border: none; background: none; color: var(--n-ink); font: 500 15px/1.2 var(--n-f-text); text-align: left; text-decoration: none; border-radius: 10px; cursor: pointer; }
.vc-blatt-e:hover, .vc-blatt-e.aktiv { background: var(--n-acc-soft); }
.vc-blatt-e svg { flex: none; color: var(--n-ink-2); }

/* ═══ Paket 6: Buchungsliste (vc-neu.js) ═══ */
html:not([data-design="neu"]) #vc-status-chips, html:not([data-design="neu"]) .vc-zell-amp { display: none !important; }
.vc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
@media (min-width: 861px) { #bookings-table-view .vc-chips { padding: 0 16px; } }
.vc-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--n-line); background: var(--n-card); color: var(--n-ink); font: 600 13px/1 var(--n-f-text); cursor: pointer; }
.vc-chip b { font-weight: 700; color: var(--n-ink-2); font-variant-numeric: tabular-nums; }
.vc-chip:hover { border-color: var(--n-ink-3); }
.vc-chip.aktiv { background: var(--n-acc-soft); border-color: var(--n-acc); color: var(--n-acc-text); }
.vc-chip .punkt { width: 8px; height: 8px; border-radius: 50%; background: #94A3B8; }
.vc-chip .st-upcoming { background: #3B82F6; } .vc-chip .st-confirmed { background: #22C55E; } .vc-chip .st-active { background: #F59E0B; }
.vc-chip .st-completed { background: #15803D; } .vc-chip .st-canceled { background: #EF4444; } .vc-chip .st-alle { background: var(--n-ink-3); }
.vc-zell-amp { margin-top: 5px; }
.vc-zell-amp .h-amp i { width: 18px; height: 18px; font-size: 10px; }
@media (max-width: 860px) {
  html[data-design="neu"] #bk-main-table, html[data-design="neu"] #bk-main-table tbody { display: block; width: 100%; }
  html[data-design="neu"] #bk-main-table thead { display: none; }
  html[data-design="neu"] #bk-main-table tr[data-id] { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--n-line-soft); border-radius: 14px; background: var(--n-card); }
  html[data-design="neu"] #bk-main-table tr[data-id] td { display: block; padding: 0 !important; border: none !important; width: auto !important; max-width: none !important; white-space: normal; }
  html[data-design="neu"] #bk-main-table tr[data-id] td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; color: var(--n-ink-3); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 2px; }
  html[data-design="neu"] #bk-main-table tr[data-id] td[data-label="Typ"], html[data-design="neu"] #bk-main-table tr[data-id] td[data-label="Erstellt am"], html[data-design="neu"] #bk-main-table tr[data-id] td[data-label="Bereich"] { display: none; }
  html[data-design="neu"] #bk-main-table tr[data-id] td[data-label="Aktionen"] { grid-column: 1 / -1; }
  html[data-design="neu"] #bk-main-table tr[data-id] td[data-label="Aktionen"]::before { display: none; }
  html[data-design="neu"] .bk-table-wrapper { overflow: visible; }
}

/* ═══ Paket 7: Buchungs-Details als Seitenfenster von rechts (PC) – Chef 03.10.2026 ═══ */
@media (min-width: 901px) {
  html[data-design="neu"] #modal-booking-details {
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; transform: none !important;
    width: min(940px, 94vw) !important; max-width: none !important; height: 100vh !important; max-height: 100vh !important;
    border-radius: 18px 0 0 18px !important; border-right: none !important; box-shadow: -18px 0 48px -12px rgba(15,23,42,.35) !important;
    animation: vc-seite-rein .22s ease-out;
  }
  /* Liste dahinter bleibt erkennbar: Abdunklung nur leicht */
  html[data-design="neu"] body:has(#modal-booking-details:not(.hidden)) #modal-overlay { background: rgba(15,23,42,.22) !important; backdrop-filter: none !important; }
  /* Chef 06.10.2026: andere Buchung direkt anklicken – Abdunklung lässt Klicks durch (vc-neu.js seitenfensterKlick
     öffnet die angeklickte Buchung bzw. schließt das Fenster). Nicht, solange ein weiteres Fenster obendrauf offen ist. */
  html[data-design="neu"] body:has(#modal-booking-details:not(.hidden)):not(:has(.modal:not(.hidden):not(#modal-booking-details))) #modal-overlay { pointer-events: none; }
}
@keyframes vc-seite-rein { from { translate: 48px 0; opacity: .5; } to { translate: 0 0; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html[data-design="neu"] #modal-booking-details { animation: none; } }

/* Herkunft (Liste + Geldleiste) */
html:not([data-design="neu"]) .vc-herkunft { display: none !important; }
.vc-herkunft { margin-top: 4px; font-size: 11.5px; color: var(--n-ink-3, #64748B); white-space: nowrap; }
.vc-geld .g-feld b.klein { font: 600 13px/1.3 var(--n-f-text); }

/* ═══ Paket 7a: Fahrzeuge live (fahrzeuge-live.js) ═══ */
html[data-design="neu"][data-vc-theme="dark"] #tab-fahrzeuge .leaflet-container { background: #e5e7eb; }
.fl .fl-suche { width: 100%; box-sizing: border-box; min-height: 42px; padding: 0 14px; border: 1px solid var(--n-line); border-radius: 12px; background: var(--n-card); color: var(--n-ink); font: 400 14px/1 var(--n-f-text); margin-bottom: 4px; }
.fl .vc-chips { align-items: center; }
.fl .vc-chip.klein { min-height: 32px; padding: 0 11px; font-size: 12.5px; }
.fl .fl-trenner { width: 1px; height: 24px; background: var(--n-line); margin: 0 4px; }
.fl-liste { display: flex; flex-direction: column; gap: 6px; }
.fl-liste[hidden], #fl-karte-box[hidden] { display: none !important; }
.fl-ansicht button.aktiv { background: var(--n-acc-soft); color: var(--n-acc-text); }
.fl-kopf, .fl-zeile { display: grid; grid-template-columns: minmax(170px, 1.3fr) minmax(200px, 1.6fr) 150px 120px 120px minmax(130px, 1fr) 84px; gap: 12px; align-items: center; }
.fl-kopf { padding: 0 14px 4px; color: var(--n-ink-3); font: 600 11.5px/1.2 var(--n-f-text); text-transform: uppercase; letter-spacing: .03em; }
.fl-zeile { padding: 10px 14px; border: 1px solid var(--n-line-soft); border-radius: 12px; background: var(--n-card-2); font-size: 13.5px; }
.fl-zeile.z-ueber { border-color: var(--h-rot-rand); background: var(--h-rot-bg); }
.fl-fz { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fl-fz b { font: 700 15px/1.2 var(--n-f-head); }
.fl-fz span { color: var(--n-ink-2); font-size: 12.5px; }
.fl-fz .fl-quelle { color: var(--n-ink-3); font-size: 11.5px; }
.fl-zu { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.fl-zz { color: var(--n-ink-2); font-size: 12.5px; }
.fl-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font: 700 12px/1.3 var(--n-f-text); }
.fl-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.p-frei { color: var(--h-gruen); background: var(--h-gruen-bg); }
.p-vermietet { color: #1D4ED8; background: rgba(59,130,246,.12); }
.p-ueber { color: var(--h-rot); background: var(--h-rot-bg); }
.p-block { color: var(--h-gelb); background: var(--h-gelb-bg); }
.fl-link { border: none; background: none; padding: 0; color: var(--n-acc-text); font: 600 12px/1.3 var(--n-f-text); cursor: pointer; text-decoration: underline; }
.fl-tuer { display: flex; flex-wrap: wrap; gap: 4px; }
.fl-sym { font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: var(--n-card); border: 1px solid var(--n-line-soft); white-space: nowrap; }
.fl-sym.ok { color: var(--h-gruen); } .fl-sym.warn { color: var(--h-rot); border-color: var(--h-rot-rand); } .fl-sym.grau { color: var(--n-ink-3); }
.fl-tank, .fl-batt { display: flex; align-items: center; gap: 6px; }
.fl-balken { flex: 1; max-width: 60px; height: 6px; border-radius: 3px; background: var(--n-line-soft); overflow: hidden; }
.fl-balken i { display: block; height: 100%; background: var(--n-acc); }
.fl-balken.warn i { background: var(--h-rot); }
.fl-wert { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--n-ink-2); white-space: nowrap; }
.fl-wert.warn { color: var(--h-rot); font-weight: 700; }
.fl-leer { color: var(--n-ink-3); }
.fl-mob { display: none; }
.fl-meld { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--n-ink-2); font-size: 12.5px; }
.fl-dot { width: 8px; height: 8px; border-radius: 50%; background: #94A3B8; }
.fl-dot.an { background: #22C55E; } .fl-dot.aus { background: var(--h-rot); }
.fl-warn { flex-basis: 100%; color: var(--h-gelb); font-weight: 600; font-size: 12px; }
.fl-oeffnen { min-height: 34px; border-radius: 10px; border: 1px solid var(--n-line); background: var(--n-card); color: var(--n-ink); font: 600 12.5px/1 var(--n-f-text); cursor: pointer; }
.fl-oeffnen:hover { border-color: var(--n-ink-3); }
.fl-karte { height: 520px; border-radius: 14px; border: 1px solid var(--n-line-soft); overflow: hidden; }
.fl-verdeckt, .fl-fuss { margin: 8px 2px 0; }
.fl-mk { background: none; border: none; }
.fl-mk-i { display: inline-block; transform: translate(-50%, -50%); padding: 3px 8px; border-radius: 999px; font: 700 11.5px/1.2 Inter, system-ui, sans-serif; white-space: nowrap; background: #fff; border: 2px solid #15803D; color: #0F172A; box-shadow: 0 2px 6px rgba(15,23,42,.25); }
.fl-mk-i.p-block { border-color: #B45309; } .fl-mk-i.p-ueber, .fl-mk-i.frei-gegeben { border-color: #DC2626; }
.fl-dlg { position: fixed; inset: 0; z-index: 10050; background: rgba(15,23,42,.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.fl-dlg-k { background: var(--n-card, #fff); color: var(--n-ink, #0F172A); border-radius: 16px; padding: 18px 20px; width: min(460px, 100%); box-shadow: 0 20px 60px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 10px; }
.fl-dlg-k h3 { margin: 0; }
.fl-dlg-k label { display: flex; flex-direction: column; gap: 4px; font: 600 12.5px/1.2 var(--n-f-text); color: var(--n-ink-2); }
.fl-dlg-k select, .fl-dlg-k input { min-height: 40px; padding: 0 10px; border: 1px solid var(--n-line); border-radius: 10px; background: var(--n-card); color: var(--n-ink); font: 400 14px/1 var(--n-f-text); }
.fl-dlg-f { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.fl-dlg-k .g-btn { min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--n-line); background: var(--n-card); color: var(--n-ink); font: 600 13.5px/1 var(--n-f-text); cursor: pointer; }
.fl-dlg-k .g-btn.haupt { background: var(--n-acc); border-color: var(--n-acc); color: var(--n-on-acc); }
@media (max-width: 1100px) {
  .fl-kopf { display: none; }
  .fl-zeile { grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 12px 14px; }
  .fl-mob { display: inline; color: var(--n-ink-3); font-size: 11.5px; font-weight: 600; min-width: 52px; }
  .fl-oeffnen { grid-column: 1 / -1; }
  .fl-karte { height: 60vh; }
}

/* ═══ Paket 7b: Fahrzeugseite ═══ */
#fl-detail[hidden], .fl-ansicht[hidden], #fl-suche[hidden], #fl-chips[hidden] { display: none !important; }
.fl-zeile { cursor: pointer; }
.fd-zurueck { font-size: 14px; margin-bottom: 8px; text-decoration: none; }
.fd-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.fd-kopf h2 { margin: 0; font: 700 28px/1.1 var(--n-f-head); color: var(--n-ink); }
.fd-kopf span { color: var(--n-ink-2); font-size: 13.5px; }
.fd-miete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px 14px; border-radius: 12px; background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.25); margin-bottom: 14px; font-size: 13.5px; }
.fd-miete.ueber { background: var(--h-rot-bg); border-color: var(--h-rot-rand); }
.fd-miete.frei { background: var(--h-gruen-bg); border-color: rgba(22,163,74,.3); }
.fd-miete.block { background: var(--h-gelb-bg); border-color: var(--h-gelb-rand); }
.fd-miete .g-btn, .fd .g-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--n-line); background: var(--n-card); color: var(--n-ink); font: 600 13px/1 var(--n-f-text); text-decoration: none; cursor: pointer; }
.fd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fd-k { background: var(--n-card-2); border: 1px solid var(--n-line-soft); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.fd-k h4 { margin: 0 0 8px; font: 600 13px/1.3 var(--n-f-text); color: var(--n-ink-2); text-transform: uppercase; letter-spacing: .02em; }
.fd-breit { grid-column: 1 / -1; }
.fd-zustand { display: flex; gap: 12px; align-items: flex-start; }
.fd-gr-box { flex: 0 0 96px; }
.fd-gr { width: 96px; height: auto; }
.fd-zustand dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 13px; }
.fd-zustand dt { color: var(--n-ink-3); }
.fd-zustand dd { margin: 0; color: var(--n-ink); }
.fd-rot { color: var(--h-rot); font-weight: 600; } .fd-gelb { color: var(--h-gelb); font-weight: 600; } .fd-grau { color: var(--n-ink-3); }
.fd-karte { height: 220px; border-radius: 10px; overflow: hidden; border: 1px solid var(--n-line-soft); }
.fd-kurve { width: 100%; max-width: 760px; height: auto; display: block; }
.fd-ev { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow-y: auto; }
.fd-ev li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: 13px; padding: 5px 8px; border-radius: 8px; }
.fd-ev li.anlass { background: var(--h-gelb-bg); }
.fd-ez { color: var(--n-ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .fd-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .fd-grid { grid-template-columns: 1fr; } .fd-ev li { grid-template-columns: 1fr; gap: 0; } .fd-gr-box { flex-basis: 64px; } .fd-gr { width: 64px; } .fd-gr-box .h-hint { display: none; } .fd-zustand dl { grid-template-columns: auto 1fr; font-size: 12.5px; } }

/* ═══ Paket 7c: Steuerung auf der Fahrzeugseite ═══ */
.fd-cmds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.fd-cmd { min-height: 44px; border-radius: 12px; border: 1px solid var(--n-line); background: var(--n-card); color: var(--n-ink); font: 600 13.5px/1.1 var(--n-f-text); cursor: pointer; padding: 0 10px; }
.fd-cmd:hover:not(:disabled) { border-color: var(--n-ink-3); }
.fd-cmd.rot { color: var(--h-rot); border-color: var(--h-rot-rand); }
.fd-cmd:disabled { opacity: .5; cursor: not-allowed; border-style: dashed; }
.fd-warum { grid-column: 1 / -1; font-size: 12px; color: var(--n-ink-3); margin-top: -4px; }
.fl-dlg-k .g-btn.rot { background: #DC2626; border-color: #DC2626; color: #fff; }
.fl-dlg-k p { margin: 0; font-size: 14px; line-height: 1.5; }

/* Handy: Geldleiste flach + Menüs als Blatt von unten + Kopf scrollt mit (Chef 04.10.2026) */
@media (max-width: 860px) {
  html[data-design="neu"] #modal-booking-details .bk-sticky-head { position: static !important; }
  #modal-booking-details .vc-geld { display: grid !important; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 8px 14px !important; align-items: center; }
  .vc-geld .g-feld { flex: none !important; }
  .vc-geld .g-feld .l { font-size: 10.5px; }
  .vc-geld .g-feld b { font-size: 14.5px; }
  .vc-geld .g-feld b.klein, #vc-geld-kaution { font: 600 12.5px/1.3 var(--n-f-text) !important; }
  .vc-geld .g-menue { justify-self: end; }
  .vc-geld .g-btn { min-height: 34px; padding: 0 12px; font-size: 12.5px; }
  .vc-geld .g-hinweis { grid-column: 1 / -1; font-size: 11.5px; }
  .vc-geld .g-liste { position: fixed !important; left: 12px !important; right: 12px !important; top: auto !important; bottom: calc(16px + env(safe-area-inset-bottom)) !important; min-width: 0; z-index: 10060; box-shadow: 0 -10px 40px rgba(15,23,42,.35); }
  .vc-geld .g-liste button { min-height: 48px; font-size: 15px; }
}

/* Mietleiste in den Buchungs-Details (ersetzt die Geldleiste, Chef 04.10.2026) */
#modal-booking-details .vc-miete { display: flex !important; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: nowrap; padding: 10px 24px !important;
  background: rgba(59,130,246,.07); border-bottom: 1px solid rgba(59,130,246,.22); font-size: 14px; }
#modal-booking-details .vc-miete[data-art="rot"] { background: var(--h-rot-bg); border-bottom-color: var(--h-rot-rand); }
#modal-booking-details .vc-miete[data-art="rot"] #vm-z2 b { color: var(--h-rot); }
#modal-booking-details .vc-miete[data-art="grau"] { background: var(--n-card-2); border-bottom-color: var(--n-line-soft); }
.vc-miete .vm-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; color: var(--n-ink); line-height: 1.35; }
.vc-miete #vm-z2 { color: var(--n-ink-2); font-size: 13.5px; }
.vc-miete #vm-z2 b { color: var(--n-ink); }
.vc-miete .vm-knoepfe { display: flex; align-items: center; gap: 8px; flex: none; }
.vc-miete .g-btn { text-decoration: none; display: inline-flex; align-items: center; }
.vc-miete .vm-mehr { min-width: 40px; justify-content: center; font-size: 18px; padding: 0 8px; }
.vc-miete a.g-btn[hidden] { display: none !important; }
@media (max-width: 860px) {
  #modal-booking-details .vc-miete { padding: 8px 14px !important; font-size: 13.5px; }
  .vc-miete #vm-z2 { font-size: 12.5px; }
}

/* ═══ Paket 7d: Eigen-Cockpit (Live) ═══ */
#fl-live-box[hidden], #fl-live-knopf[hidden] { display: none !important; }
.fl-live-hinweis { display: flex; align-items: center; gap: 8px; margin: 4px 2px 10px; padding: 8px 12px; border-radius: 10px; background: var(--h-gruen-bg); color: var(--h-gruen); font-size: 13px; font-weight: 600; }
.fl-puls { width: 10px; height: 10px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: fl-puls 1.6s infinite; }
@keyframes fl-puls { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
@media (prefers-reduced-motion: reduce) { .fl-puls { animation: none; } }
.fl-live-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.fl-live-z { display: grid; grid-template-columns: 14px 110px 1fr 1fr 1fr; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--n-line-soft); background: var(--n-card-2); color: var(--n-ink); font: 400 13.5px/1.3 var(--n-f-text); cursor: pointer; }
.fl-live-z b { font: 700 14.5px/1.2 var(--n-f-head); }
.fl-live-z span { color: var(--n-ink-2); }
.fl-mk-i.live { box-shadow: 0 0 0 3px rgba(34,197,94,.35), 0 2px 6px rgba(15,23,42,.25); }
.fl-mk-i.p-vermietet { border-color: #2563EB; }
@media (max-width: 860px) { .fl-live-z { grid-template-columns: 14px 1fr; } .fl-live-z span:nth-of-type(n+2) { grid-column: 2; } }

.fl-live-z.folgt { border-color: var(--n-acc); background: var(--n-acc-soft); }
.fl-folgt { color: var(--n-acc-text); }

html[data-design="neu"] .vc-versteckt { display: none !important; }

/* ═══ Buchungs-Details Paket A (04.10.2026): Mietleiste = ganzer Kopf, Reiter einzeilig mit Punkten ═══ */
html[data-design="neu"] #modal-booking-details .modal-header,
html[data-design="neu"] #modal-booking-details .modal-footer { display: none !important; }
#modal-booking-details .vc-miete.vm-kopf { display: block !important; padding: 12px 20px 0 !important; background: var(--n-card) !important; border-bottom: 1px solid var(--n-line-soft) !important; }
.vm-z1 { display: flex; align-items: center; gap: 10px; }
.vm-wer { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.vm-wer b { font: 700 18px/1.2 var(--n-f-head); color: var(--n-ink); }
.vm-kopf .kz { display: inline-flex; align-items: center; padding: 2px 8px; border: 1.5px solid #0F172A; border-radius: 6px; background: #fff; color: #0F172A; font: 700 13px/1.25 Inter, system-ui, sans-serif; letter-spacing: .04em; white-space: nowrap; }
.vm-kopf .kz:empty { display: none; }
.vm-mod { color: var(--n-ink-2); font-size: 13px; }
.vm-knoepfe { display: flex; align-items: center; gap: 8px; flex: none; }
.vm-kopf .g-btn { min-height: 36px; }
.vm-kopf .vm-ende { color: var(--h-rot); border-color: var(--h-rot-rand); }
.vm-zu { border: none; background: none; color: var(--n-ink); font-size: 26px; line-height: 1; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; }
.vm-zu:hover { background: var(--n-card-2); }
.vm-zurueck { display: none; }
.vm-anruf .vm-i { display: none; }
.vm-z2 { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 8px; font-size: 13.5px; color: var(--n-ink-2); }
.vm-z2 b { color: var(--n-ink); }
.vm-kopf[data-art="rot"] .vm-z2 b { color: var(--h-rot); }
.vm-status { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--n-line); background: var(--n-card-2); color: var(--n-ink); font: 600 13px/1 var(--n-f-text); cursor: pointer; white-space: nowrap; }
.vm-status[data-st="active"] { color: #1D4ED8; background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.35); }
.vm-status[data-st="completed"] { color: var(--h-gruen); background: var(--h-gruen-bg); border-color: rgba(22,163,74,.35); }
.vm-status[data-st="upcoming"], .vm-status[data-st="confirmed"] { color: var(--n-acc-text); background: var(--n-acc-soft); border-color: var(--n-acc); }
.vm-status[data-st="canceled"] { color: var(--n-ink-3); }
.vm-kopf[data-art="rot"] .vm-status { color: var(--h-rot); background: var(--h-rot-bg); border-color: var(--h-rot-rand); }
.vm-nr { margin-left: auto; color: var(--n-ink-3); font: 500 12px/1 ui-monospace, Menlo, monospace; }
.vm-spur { height: 3px; background: var(--n-line-soft); margin: 10px -20px 0; }
.vm-spur i { display: block; height: 100%; width: 0; background: var(--n-acc); transition: width .3s; }
.vm-kopf[data-art="rot"] .vm-spur i { background: var(--h-rot); }
.vm-kopf[data-art="grau"] .vm-spur i { background: var(--n-ink-3); }
.vm-liste { min-width: 270px; }
.vm-liste .vm-info { padding: 8px 12px 10px; font-size: 12px; line-height: 1.5; color: #64748B; border-bottom: 1px solid #E2E8F0; margin-bottom: 4px; }
.vm-liste button.aktiv { font-weight: 700; color: #3F6212; }
.vm-liste .nur-handy { display: none; }
/* Reiter: eine Zeile, ohne Symbole, Punkte für offen */
html[data-design="neu"] #booking-tabs-nav { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding: 0 12px !important; background: var(--n-card) !important; border-bottom: 1px solid var(--n-line-soft) !important;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
html[data-design="neu"] #booking-tabs-nav::-webkit-scrollbar { display: none; }
html[data-design="neu"] #booking-tabs-nav .bktab { flex: none; white-space: nowrap; height: 44px; padding: 0 12px; font: 600 13.5px/1 var(--n-f-text); color: var(--n-ink-2); border-bottom-width: 2px; }
html[data-design="neu"] #booking-tabs-nav .bktab.active { color: var(--n-ink); border-bottom-color: var(--n-acc); }
html[data-design="neu"] #booking-tabs-nav .bktab i { display: none; }
html[data-design="neu"] #booking-tabs-nav .bktab.vm-punkt::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 6px; background: var(--h-rot); vertical-align: middle; }
html[data-design="neu"] #booking-tabs-nav .bktab.vm-punkt[data-punkt="gelb"]::after { background: #F59E0B; }
/* Grüne Trennstriche zwischen den Reitern (Chef 06.10.2026) – als Hintergrundbild, weil ::before/::after schon belegt sind */
html[data-design="neu"] #booking-tabs-nav .bktab ~ .bktab { background-image: linear-gradient(var(--n-acc), var(--n-acc)); background-repeat: no-repeat; background-size: 2px 18px; background-position: left center; }
@media (max-width: 860px) {
  #modal-booking-details .vc-miete.vm-kopf { padding: 8px 12px 0 !important; }
  .vm-zurueck { display: inline-flex; align-items: center; justify-content: center; margin-left: -6px; }
  .vm-x { display: none; }
  .vm-wer b { font-size: 16px; }
  .vm-mod { display: none; }
  .vm-kopf .vm-start, .vm-kopf .vm-ende { display: none !important; }
  .vm-liste .nur-handy { display: block; }
  .vm-anruf { width: 40px; padding: 0 !important; justify-content: center; }
  .vm-anruf .vm-t { display: none; }
  .vm-anruf .vm-i { display: inline; font-size: 18px; }
  .vm-seit, .vm-nr { display: none; }
  .vm-z2 { margin-top: 6px; font-size: 12.5px; flex-wrap: nowrap; }
  .vm-zeit { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vm-spur { margin: 8px -12px 0; }
  html[data-design="neu"] #booking-tabs-nav .bktab[data-kurz] { font-size: 0; }
  html[data-design="neu"] #booking-tabs-nav .bktab[data-kurz]::before { content: attr(data-kurz); font-size: 13.5px; }
}

.vm-kopf [hidden] { display: none !important; }
.vm-kopf .vm-anruf .vm-i { font-size: 18px; color: var(--n-ink); }

/* ═══ Buchungs-Details Paket C (04.10.2026): Reiter „Zahlungen“ – Offen, Kaution | Karte, Verlauf, Stripe-ID unten ═══ */
#modal-booking-details .vz-k1 > h4 { display: none !important; }
#modal-booking-details .vz-k1, #modal-booking-details .vz-k2 { background: var(--n-card) !important; border: none !important; box-shadow: none !important; padding: 4px 4px 8px !important; }
#modal-booking-details .vz-k1 .billing-list { border: none; background: transparent; overflow: visible; gap: 16px; display: flex !important; flex-direction: column; column-count: auto !important; }
#modal-booking-details .vz-k1 .vz-ab .billing-row { margin: 0 !important; background: transparent !important; border-radius: 0 !important; break-inside: auto; }
#modal-booking-details .vz-k1 .billing-row:hover, #modal-booking-details .vz-k2 .billing-row:hover { background: transparent; padding-left: 12px; }
#modal-booking-details .vz-k1 [hidden], #modal-booking-details .vz-k2 [hidden] { display: none !important; }
/* Knöpfe: drei Arten – Haupt (grün), normal (Rand), ruhig (leise) */
#modal-booking-details .vz-k { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 14px !important; border-radius: 10px !important;
  border: 1px solid var(--n-line) !important; background: var(--n-card) !important; color: var(--n-ink) !important; font: 600 13.5px/1.1 var(--n-f-text) !important;
  text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; transform: none !important; cursor: pointer; text-decoration: none; white-space: nowrap; }
#modal-booking-details .vz-k:hover { background: var(--n-card-2) !important; }
#modal-booking-details .vz-k.haupt { background: var(--n-acc) !important; border-color: var(--n-acc) !important; color: var(--n-on-acc) !important; }
#modal-booking-details .vz-k.haupt:hover { filter: brightness(.96); }
#modal-booking-details .vz-k.ruhig { border-color: transparent !important; background: var(--n-card-2) !important; color: var(--n-ink-2) !important; min-height: 32px; padding: 0 11px !important; font-size: 12.5px !important; }
#modal-booking-details .vz-k.ruhig.rot { color: var(--h-rot) !important; }
#modal-booking-details .vz-k:disabled { opacity: .45 !important; cursor: default; }
#modal-booking-details .vz-k:focus-visible { outline: 2px solid var(--n-acc); outline-offset: 2px; }
.vz-reihe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vz-satz { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--n-ink-2); }
/* Feld „Offen“ / „Guthaben“ */
.vz-offen { border-radius: 14px; padding: 14px 16px; border: 1px solid var(--h-rot-rand); background: var(--h-rot-bg); }
.vz-offen[data-art="gruen"] { border-color: rgba(22,163,74,.35); background: var(--h-gruen-bg); }
.vz-offen-kopf { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.vz-offen .vz-t { font: 600 13px/1 var(--n-f-text); color: var(--h-rot); }
.vz-offen[data-art="gruen"] .vz-t { color: var(--h-gruen); }
.vz-gross { font: 700 26px/1.1 var(--n-f-head); color: var(--n-ink); font-variant-numeric: tabular-nums; }
.vz-link { margin-left: auto; border: none; background: none; padding: 0; color: var(--n-ink-2); font: 500 12.5px/1.3 var(--n-f-text); text-decoration: underline; cursor: pointer; }
/* Kaution | Hinterlegte Karte nebeneinander */
.vz-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.vz-ab { min-width: 0; border: 1px solid var(--n-line-soft); border-radius: 14px; padding: 14px 16px; background: var(--n-card); }
.vz-ab-kopf { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-bottom: 10px; }
.vz-ab-kopf h5 { margin: 0; font: 700 15px/1.2 var(--n-f-head); color: var(--n-ink); text-transform: none; letter-spacing: 0; }
.vz-meta { color: var(--n-ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
#modal-booking-details .vz-ab-kopf .vz-k { margin-left: auto; }
#modal-booking-details #vz-kaution .billing-row, #modal-booking-details #vz-karte .billing-row { padding: 0 !important; border: none !important; display: block; }
#modal-booking-details #vz-kaution .billing-row-left, #modal-booking-details #vz-karte .billing-row > .billing-row-left { display: none !important; }
#modal-booking-details #vz-kaution .billing-row-right { display: block; text-align: left; }
.vz-feld { border-radius: 12px; padding: 12px 14px; border: 1px solid var(--h-gelb-rand); background: var(--h-gelb-bg); }
.vz-feld[data-z="info"] { border-color: rgba(37,99,235,.28); background: rgba(37,99,235,.06); }
.vz-feld[data-z="ok"] { border-color: rgba(22,163,74,.3); background: var(--h-gruen-bg); }
.vz-feld[data-z="rot"] { border-color: var(--h-rot-rand); background: var(--h-rot-bg); }
.vz-feld[data-z="lila"] { border-color: rgba(124,58,237,.28); background: rgba(124,58,237,.06); }
#modal-booking-details #det-deposit-status { display: block; background: none !important; border: none !important; padding: 0 !important; font: 700 15px/1.35 var(--n-f-text) !important; color: var(--n-ink) !important; overflow-wrap: anywhere; }
#modal-booking-details .vz-feld[data-z="info"] #det-deposit-status { color: #1D4ED8 !important; }
#modal-booking-details .vz-feld[data-z="rot"] #det-deposit-status { color: var(--h-rot) !important; }
#modal-booking-details .vz-feld .billing-item-actions { display: flex !important; flex-wrap: wrap; gap: 8px !important; justify-content: flex-start !important; margin-top: 12px; }
#modal-booking-details #vz-kaution #det-deposit-auto-row { background: transparent !important; border: none !important; padding: 10px 0 0 !important; font-size: 13px !important; color: var(--n-ink); }
#modal-booking-details #vz-kaution #det-deposit-amount-edit { background: var(--n-card-2) !important; border: none !important; border-radius: 10px; margin-top: 10px; padding: 10px 12px !important; flex-wrap: wrap; }
#modal-booking-details #vz-karte #det-cards-list > div { border-color: var(--n-line-soft) !important; border-radius: 10px !important; }
#modal-booking-details .vz-zeile:last-child { border-bottom: none !important; }
#modal-booking-details #vz-karte #det-cards-list span[style*="padding:1px 7px"] { white-space: nowrap; display: inline-block; }
#modal-booking-details #vz-kaution #det-deposit-auto-row label { display: block !important; line-height: 1.45; }
#modal-booking-details #vz-kaution #det-deposit-auto-row label input { vertical-align: -3px; margin-right: 6px !important; }
#modal-booking-details #vz-kaution #det-deposit-auto-row label span { display: block; padding-left: 22px; font-size: 12px; color: var(--n-ink-3) !important; }
#modal-booking-details #vz-karte .billing-row > div:last-child { color: var(--n-ink-3) !important; font-size: 12.5px !important; }
/* Zahlungsverlauf */
#modal-booking-details .vz-k2 > h4 { text-transform: none; letter-spacing: 0; font: 700 15px/1.2 var(--n-f-head); color: var(--n-ink); margin: 6px 0 8px; }
#modal-booking-details .vz-k2 > h4 i { display: none; }
#modal-booking-details .vz-k2 #det-payment-log { border: 1px solid var(--n-line-soft); border-radius: 14px; background: var(--n-card); }
#modal-booking-details .vz-zeile { border: none !important; border-bottom: 1px solid var(--n-line-soft) !important; border-radius: 0 !important; margin: 0 !important; background: transparent !important; display: grid !important; grid-template-columns: minmax(0,1fr) auto auto auto; align-items: center; gap: 6px 14px !important; padding: 12px 14px !important; }
.vz-zeile .vz-l b { font: 600 14px/1.3 var(--n-f-text); color: var(--n-ink); }
.vz-sub { font-size: 12.5px; color: var(--n-ink-3); margin-top: 2px; }
.vz-rot { color: var(--h-rot); }
.vz-mark { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font: 600 12px/1 var(--n-f-text); background: var(--n-card-2); color: var(--n-ink-2); white-space: nowrap; }
.vz-mark.ok { background: var(--h-gruen-bg); color: var(--h-gruen); }
.vz-mark.gelb { background: var(--h-gelb-bg); color: var(--h-gelb); }
.vz-mark.rot { background: var(--h-rot-bg); color: var(--h-rot); }
.vz-b { font: 700 14px/1 var(--n-f-text); font-variant-numeric: tabular-nums; text-align: right; min-width: 84px; color: var(--n-ink); }
.vz-a { display: flex; gap: 6px; justify-content: flex-end; min-width: 0; }
/* Stripe-ID klein unten */
#modal-booking-details .vz-stripe { display: flex !important; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 12px 2px 0 !important; border: none !important; font-size: 12.5px; color: var(--n-ink-3); }
#modal-booking-details .vz-stripe .billing-row-left i { display: none; }
#modal-booking-details .vz-stripe .billing-row-label { font: 500 12.5px/1.3 var(--n-f-text) !important; color: var(--n-ink-3) !important; }
#modal-booking-details .vz-stripe #det-payment { font: 500 12.5px/1.3 ui-monospace, Menlo, monospace !important; color: var(--n-ink-2) !important; }
#modal-booking-details .vz-stripe .billing-row-right { justify-content: flex-start; flex: 1; text-align: left; }
#modal-booking-details #link-go-to-stripe.vz-k { color: var(--n-ink-2) !important; line-height: 32px !important; vertical-align: middle; }
@media (max-width: 860px) {
  .vz-spalten { grid-template-columns: 1fr; gap: 12px; }
  .vz-offen, .vz-ab { padding: 12px; }
  .vz-gross { font-size: 22px; }
  .vz-link { margin-left: 0; flex-basis: 100%; text-align: left; }
  #modal-booking-details .vz-reihe .vz-k, #modal-booking-details .vz-feld .billing-item-actions .vz-k { flex: 1 1 calc(50% - 4px); white-space: normal; text-align: center; }
  #modal-booking-details .vz-zeile { grid-template-columns: minmax(0,1fr) auto; padding: 12px !important; }
  .vz-zeile .vz-mark { grid-column: 1; grid-row: 2; justify-self: start; }
  .vz-zeile .vz-b { grid-column: 2; grid-row: 1; }
  .vz-zeile .vz-a { grid-column: 2; grid-row: 2; }
}

/* ═══ Buchungs-Details Paket B (04.10.2026): Reiter „Preis“ als Liste, Null-Posten gesammelt, „Zu bezahlen“ als Feld ═══ */
#modal-booking-details .vp-preis { background: var(--n-card) !important; border: none !important; box-shadow: none !important; padding: 4px 4px 8px !important; }
#modal-booking-details .vp-preis h4 { margin: 0 !important; padding: 0 !important; border: none !important; text-transform: none; letter-spacing: 0; }
#modal-booking-details .vp-liste .rh-field > .rh-note, #modal-booking-details .vp-liste .rh-field > .rh-credit-note { order: 4; }
#modal-booking-details .vp-liste .rh-field > .vp-knoepfe { order: 5; }
#modal-booking-details .vp-preis .vp-meta { font: 500 13.5px/1.3 var(--n-f-text); color: var(--n-ink-2); }
#modal-booking-details .vp-liste { display: flex !important; flex-direction: column; gap: 0 !important; margin-top: 12px !important; border: 1px solid var(--n-line-soft); border-radius: 14px; background: var(--n-card); overflow: hidden; }
#modal-booking-details .vp-liste [hidden], #modal-booking-details .vp-liste > .vp-null, #modal-booking-details .vp-liste > .vp-dauer { display: none !important; }
#modal-booking-details .vp-liste > .rh-field, #modal-booking-details .vp-liste > .vp-manpos { flex-direction: row !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px !important; padding: 11px 16px; border-bottom: 1px solid var(--n-line-soft); min-height: 46px; box-sizing: border-box; }
#modal-booking-details .vp-liste > .rh-field label { font: 500 14px/1.3 var(--n-f-text) !important; color: var(--n-ink) !important; margin: 0; letter-spacing: 0; }
#modal-booking-details .vp-liste .rh-euro { border: none !important; background: transparent !important; min-height: 0 !important; flex-direction: row-reverse; justify-content: flex-start; gap: 4px; overflow: visible; }
#modal-booking-details .vp-liste .rh-euro > span { padding: 0 !important; color: var(--n-ink-2) !important; font: 600 14px/1 var(--n-f-text) !important; }
#modal-booking-details .vp-liste .rh-euro .rh-input { width: 7.5em !important; padding: 0 !important; text-align: right; font: 600 14px/1.3 var(--n-f-text) !important; color: var(--n-ink) !important; -webkit-text-fill-color: var(--n-ink) !important; font-variant-numeric: tabular-nums; }
#modal-booking-details .vp-liste .rh-euro .rh-ro-val { padding: 0 !important; font: 600 14px/1.3 var(--n-f-text) !important; color: var(--n-ink) !important; font-variant-numeric: tabular-nums; }
/* grau = kommt aus einem anderen Reiter (Extras, Rückgabe, Vertragsstrafen, Zahlungsverlauf) */
#modal-booking-details .vp-liste .rh-euro-ro .rh-ro-val, #modal-booking-details .vp-liste .rh-euro-ro > span { color: var(--n-ink-2) !important; }
#modal-booking-details .vp-liste #td-aufschlaege, #modal-booking-details .vp-liste #td-penalties-note, #modal-booking-details .vp-liste .rh-note,
#modal-booking-details .vp-liste .rh-credit-note, #modal-booking-details .vp-liste #det-rh-settled { flex-basis: 100%; margin: 0 !important; font-size: 12.5px !important; color: var(--n-ink-3) !important; }
#modal-booking-details .vp-liste .rh-credit-note { color: var(--h-gelb) !important; }
/* Bearbeiten: Eingabefelder sichtbar umrandet */
#modal-booking-details .vp-liste.rh-editing .rh-euro:not(.rh-euro-ro):not(.rh-euro-due) { border: 1px solid var(--n-acc) !important; background: #fff !important; border-radius: 8px; padding: 6px 10px; }
/* Sammelzeile für Posten mit 0 */
#modal-booking-details .vp-liste > .vp-nullzeile { color: var(--n-ink-2); font-size: 13px; }
.vp-nullzeile .vp-n { flex: 1; min-width: 0; }
.vp-nullzeile .vp-b { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Weitere Positionen */
#modal-booking-details .vp-liste > .vp-manpos { display: block; }
#modal-booking-details .vp-manpos > div:first-child label { font: 500 12.5px/1.3 var(--n-f-text) !important; color: var(--n-ink-3) !important; text-transform: none !important; letter-spacing: 0 !important; }
#modal-booking-details .vp-manpos #td-manpos-list > div > div:first-child { font-size: 14px !important; color: var(--n-ink) !important; }
#modal-booking-details .vp-manpos #td-manpos-list > div > div:last-child { font-size: 14px !important; color: var(--n-ink) !important; }
/* Bereits bezahlt etwas abgesetzt */
#modal-booking-details .vp-liste > .rh-field[style*="order: 11"] { background: var(--n-card-2); }
/* „Zu bezahlen“ */
#modal-booking-details .vp-liste > .vp-offen { padding: 14px 16px; background: var(--h-gruen-bg); border-bottom: 1px solid var(--n-line-soft); }
#modal-booking-details .vp-liste > .vp-offen[data-art="rot"] { background: var(--h-rot-bg); }
#modal-booking-details .vp-liste > .vp-offen label { font-weight: 700 !important; }
#modal-booking-details .vp-liste > .vp-offen[data-art="rot"] label { color: var(--h-rot) !important; }
#modal-booking-details .vp-liste > .vp-offen .rh-ro-val, #modal-booking-details .vp-liste > .vp-offen .rh-euro > span { font: 700 22px/1.1 var(--n-f-head) !important; color: var(--n-ink) !important; }
#modal-booking-details .vp-ok { margin-left: 8px; font: 600 13px/1 var(--n-f-text); color: var(--h-gruen); }
#modal-booking-details .vp-knoepfe { display: flex !important; flex-wrap: wrap; gap: 8px !important; flex-basis: 100%; margin: 4px 0 0 !important; }
#modal-booking-details .vp-knoepfe .vz-k[style*="display: none"] { display: none !important; }
@media (max-width: 860px) {
  #modal-booking-details .vp-liste > .rh-field, #modal-booking-details .vp-liste > .vp-manpos { padding: 10px 12px; }
  #modal-booking-details .vp-offen .vp-knoepfe .vz-k { flex: 1 1 calc(50% - 4px); white-space: normal; text-align: center; }
}
/* Bewertung erfragen (wandert mit Paket D nach „Dokumente“) */
#modal-booking-details .vp-review { margin-top: 14px !important; background: var(--n-card-2) !important; border: none !important; border-radius: 12px !important; }

/* ═══ Buchungs-Details Paket D (04.10.2026): Reiter „Dokumente & Schlüssel“ – Schlüssel / Unterlagen / Nach der Miete ═══ */
#modal-booking-details .vd-karte { background: var(--n-card) !important; border: none !important; box-shadow: none !important; padding: 4px 4px 8px !important; }
#modal-booking-details .vd-karte > h4 { display: none !important; }
#modal-booking-details .vd-karte .billing-list { display: flex !important; flex-direction: column; gap: 18px; column-count: auto !important; border: none; background: transparent; overflow: visible; }
#modal-booking-details .vd-karte [hidden], #modal-booking-details .vd-karte #btn-complete-pdf, #modal-booking-details .vd-leer { display: none !important; }
#modal-booking-details .vd-ab h5 { margin: 0 0 8px; font: 700 15px/1.2 var(--n-f-head); color: var(--n-ink); text-transform: none; letter-spacing: 0; }
#modal-booking-details .vd-liste { border: 1px solid var(--n-line-soft); border-radius: 14px; background: var(--n-card); overflow: hidden; }
#modal-booking-details .vd-zeile { display: grid !important; grid-template-columns: minmax(260px, 1fr) auto; align-items: center; gap: 8px 16px !important; padding: 13px 16px !important; margin: 0 !important;
  border: none !important; border-bottom: 1px solid var(--n-line-soft) !important; border-radius: 0 !important; background: transparent !important; }
#modal-booking-details .vd-zeile:last-child { border-bottom: none !important; }
#modal-booking-details .vd-liste > .vd-zeile[style*="display: none"], #modal-booking-details .vd-liste > .vd-zeile[style*="display:none"] { display: none !important; }
#modal-booking-details .vd-zeile:hover { padding-left: 16px !important; background: transparent !important; }
#modal-booking-details .vd-zeile .billing-row-left { display: block; min-width: 0; }
#modal-booking-details .vd-zeile .billing-row-left > i { display: none; }
#modal-booking-details .vd-zeile .billing-row-label { display: block; font: 600 14.5px/1.3 var(--n-f-text) !important; color: var(--n-ink) !important; }
#modal-booking-details .vd-zeile .vd-status { display: block !important; width: auto !important; max-width: none !important; border: none !important; background: none !important; padding: 0 !important; box-shadow: none !important; border-radius: 0 !important; margin-top: 3px; font: 500 13px/1.45 var(--n-f-text) !important; color: var(--n-ink-2); overflow-wrap: anywhere; text-align: left; }
#modal-booking-details .vd-zeile .billing-row-left > div { margin-top: 6px !important; padding-top: 0 !important; border-top: none !important; font-size: 12.5px !important; }
#modal-booking-details .vd-zeile .billing-row-right { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px !important; min-width: 0; }
#modal-booking-details .vd-zeile .billing-item-actions { display: flex !important; flex-wrap: wrap; justify-content: flex-end !important; gap: 8px !important; }
#modal-booking-details .vd-zeile .vz-k i { display: none; }
#modal-booking-details .vd-zeile .vz-k { min-height: 36px; }
#modal-booking-details .vd-zeile #review-mode { min-height: 36px; padding: 0 10px; border: 1px solid var(--n-line) !important; border-radius: 10px !important; background: var(--n-card) !important; color: var(--n-ink); font: 500 13.5px var(--n-f-text) !important; }
/* Belege-Zeile: Liste über die ganze Breite */
#modal-booking-details #det-invoice-history-row.vd-zeile { grid-template-columns: 1fr; }
#modal-booking-details #det-invoice-history-row .billing-row-right { justify-content: flex-start; }
@media (max-width: 860px) {
  #modal-booking-details .vd-zeile { grid-template-columns: 1fr; padding: 12px !important; }
  #modal-booking-details .vd-zeile .billing-row-right, #modal-booking-details .vd-zeile .billing-item-actions { justify-content: flex-start !important; }
  #modal-booking-details .vd-zeile .vz-k { white-space: normal; }
}

/* ═══ Dokumente & Schlüssel, Variante B (Baris 08.10.2026, Chef „B, senden“) ═══
   Jeder Abschnitt eine eigene Karte mit Kopfleiste und Zähler („1 offen · 1 wartet“), Zeilen durch Linien getrennt,
   Standzeichen vorne (erledigt / wartet / offen / ohne Stand), je Zeile ein Hauptknopf (Limette nur bei offenem Stand),
   Seltenes im Menü „Mehr“ (vc-neu.js dokMehrBauen/dokAktualisieren). Statusfarben aus app.js lesbar gemacht. */
#modal-booking-details { --vd-grund: #F1F5F9; --vd-karte: #FFFFFF; --vd-kopf: #F8FAFC; --vd-rand: #D5DCE5; --vd-linie: #E2E8F0;
  --vd-ok: #15803D; --vd-ok-ink: #FFFFFF; --vd-warten: #B45309; --vd-info: #0369A1; --vd-grau: #64748B; --vd-knopf-rand: #94A3B8; --vd-fokus: #4D7C0F;
  --vd-menue: #FFFFFF; --vd-menue-rand: #CBD5E1; --vd-menue-hover: #F1F5F9; --vd-menue-klein: #64748B; --vd-menue-rot: #B91C1C; --vd-schatten: 0 12px 32px -8px rgba(15,23,42,.28); }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details { --vd-grund: transparent; --vd-karte: #2A303B; --vd-kopf: #262C36; --vd-rand: #444C59; --vd-linie: #3B4250;
  --vd-ok: #4ADE80; --vd-ok-ink: #0F172A; --vd-warten: #FBBF24; --vd-info: #7DD3FC; --vd-grau: #A3AEBE; --vd-knopf-rand: #5B6474; --vd-fokus: #A3E635;
  --vd-menue: #323946; --vd-menue-rand: #4B5462; --vd-menue-hover: rgba(255,255,255,.07); --vd-menue-klein: #A3AEBE; --vd-menue-rot: #FCA5A5; --vd-schatten: 0 14px 34px -8px rgba(0,0,0,.65); }
#modal-booking-details .vd-karte { background: var(--vd-grund) !important; border-radius: 16px !important; padding: 12px !important; }
#modal-booking-details .vd-karte .billing-list { gap: 14px; }
/* Abschnitt = Karte mit Kopfleiste */
#modal-booking-details .vd-ab { background: var(--vd-karte); border: 1px solid var(--vd-rand); border-radius: 14px; min-width: 0; }
#modal-booking-details .vd-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 11px 16px; background: var(--vd-kopf); border-radius: 13px 13px 0 0; }
#modal-booking-details .vd-ab h5 { margin: 0; padding: 0; border: none; background: none; font: 700 15px/1.2 var(--n-f-head); color: var(--n-ink); }
#modal-booking-details .vd-zahl { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 4px 10px; font: 600 12.5px/1.2 var(--n-f-text); color: var(--vd-grau); }
#modal-booking-details .vd-zahl:empty { display: none; }
#modal-booking-details .vd-zahl .vd-z-warten { color: var(--vd-warten); }
#modal-booking-details .vd-zahl .vd-z-ok { color: var(--vd-ok); }
/* Zeilen: durchgehende Linie statt Kachel */
#modal-booking-details .vd-liste { display: block; border: none; border-radius: 0; background: transparent; overflow: visible; }
#modal-booking-details .vd-liste > .vd-zeile, #modal-booking-details .vd-liste > .vd-zeile:last-child, #modal-booking-details .vd-liste > .vd-zeile:hover {
  background: transparent !important; border: none !important; border-top: 1px solid var(--vd-linie) !important; border-radius: 0 !important; padding: 14px 16px !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vd-liste > .vd-zeile.billing-row { border-top-color: var(--vd-linie) !important; }
/* Standzeichen vorne (Zeichen + versteckter Text, nicht nur Farbe) */
#modal-booking-details .vd-zeile .billing-row-left { position: relative; padding-left: 30px; }
#modal-booking-details .vd-mk { position: absolute; left: 0; top: 0; width: 20px; height: 20px; color: var(--n-ink-3); }
#modal-booking-details .vd-mk svg { display: block; width: 20px; height: 20px; }
#modal-booking-details .vd-zeile[data-stand="ok"] .vd-mk { color: var(--vd-ok); }
#modal-booking-details .vd-zeile[data-stand="warten"] .vd-mk { color: var(--vd-warten); }
#modal-booking-details .vd-zeile[data-stand="offen"] .vd-mk { color: var(--vd-grau); }
#modal-booking-details #det-invoice-history-row .billing-row-right { padding-left: 30px; }
#modal-booking-details .vd-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Knöpfe: Limette (.haupt, nur offene Zeile) / Rand (Grund + kräftiger Rand wie Chef 07.10., Regel am Dateiende) / nur Text.
   Die Selektoren hier sind bewusst spezifischer als die 07.10.-Regel „.vz-k:not(.haupt):not(.vc-rot-rand)“ (steht weiter unten). */
html[data-design="neu"] #modal-booking-details .vd-ab .vd-liste .vd-zeile .billing-item-actions > .vz-k.ruhig,
html[data-design="neu"] #modal-booking-details .vd-ab .vd-liste .vd-zeile .billing-item-actions > #btn-contract-vehicledata {
  background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: var(--n-ink-2) !important; font-weight: 500 !important;
  padding: 0 8px !important; text-decoration: underline; text-decoration-color: var(--vd-knopf-rand); text-underline-offset: 3px; }
html[data-design="neu"] #modal-booking-details .vd-ab .vd-liste .vd-zeile .billing-item-actions > .vz-k.ruhig.rot { color: var(--h-rot) !important; text-decoration-color: currentColor; }
#modal-booking-details .vd-zeile #det-invoice-container .btn { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--n-ink-2) !important; text-decoration: underline; text-underline-offset: 3px; }
#modal-booking-details .vd-zeile #review-mode { background: #F8FAFC !important; border: 1.5px solid #94A3B8 !important; }
/* Dunkel: Knopfgrund eine Stufe HELLER als die Karte #2A303B (sonst wirken die Knöpfe wie Löcher), Rand ≥ 3:1 zur Karte */
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vd-ab .vd-liste .vd-zeile .vz-k:not(.haupt):not(.vc-rot-rand):not(.vd-m):not(.ruhig),
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vd-zeile #review-mode { background: #353C49 !important; border-color: #7A8597 !important; color: #F8FAFC !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vd-ab .vd-liste .vd-zeile .vz-k:not(.haupt):not(.vc-rot-rand):not(.vd-m):not(.ruhig):hover { background: #424A59 !important; border-color: #94A3B8 !important; }
#modal-booking-details .vd-zeile .vz-k:focus-visible, #modal-booking-details .vd-zeile #det-invoice-container .btn:focus-visible { outline: 2px solid var(--vd-fokus); outline-offset: 2px; }
/* Menü „Mehr“ (Muster wie #vc-weitere: .g-menue/.g-liste) */
#modal-booking-details .vd-mehr { position: relative; }
#modal-booking-details .vd-mehr[hidden] { display: none !important; }
#modal-booking-details .vd-mehr-k svg { width: 12px; height: 12px; flex: none; transition: transform .15s cubic-bezier(0.23, 1, 0.32, 1); }
html[data-design="neu"] #modal-booking-details .vd-ab .vd-liste .vd-zeile .vz-k.vd-mehr-k[aria-expanded="true"] { background: #E2E8F0 !important; border-color: #64748B !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vd-ab .vd-liste .vd-zeile .vz-k.vd-mehr-k[aria-expanded="true"]:not(.haupt):not(.vc-rot-rand):not(.vd-m) { background: #424A59 !important; border-color: #94A3B8 !important; }
#modal-booking-details .vd-mehr-k[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { #modal-booking-details .vd-mehr-k svg { transition: none; } }
#modal-booking-details .vd-mehr-liste { position: absolute; z-index: 60; top: calc(100% + 6px); right: 0; width: max-content; min-width: 250px; max-width: min(340px, calc(100vw - 32px));
  display: flex; flex-direction: column; padding: 6px; text-align: left; background: var(--vd-menue); border: 1px solid var(--vd-menue-rand); border-radius: 12px; box-shadow: var(--vd-schatten); }
#modal-booking-details .vd-mehr-liste[hidden] { display: none !important; }
#modal-booking-details .vd-mehr-liste.vd-rechts-auf { left: 0; right: auto; }
html[data-design="neu"] #modal-booking-details .vd-ab .vd-liste .vd-zeile .vd-mehr-liste > .vz-k.vd-m { display: block; width: 100%; height: auto; min-height: 40px; padding: 9px 12px !important;
  border: none !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; color: var(--n-ink) !important;
  font: 500 13.5px/1.3 var(--n-f-text) !important; text-align: left; text-decoration: none !important; white-space: normal; filter: none; }
html[data-design="neu"] #modal-booking-details .vd-ab .vd-liste .vd-zeile .vd-mehr-liste > .vz-k.vd-m:hover { background: var(--vd-menue-hover) !important; }
html[data-design="neu"] #modal-booking-details .vd-ab .vd-liste .vd-zeile .vd-mehr-liste > .vz-k.vd-m.rot { color: var(--vd-menue-rot) !important; }
#modal-booking-details .vd-mehr-liste > .vz-k small { display: block; margin-top: 2px; font: 400 12px/1.35 var(--n-f-text); color: var(--vd-menue-klein); }
#modal-booking-details .vd-mehr-gruppe { padding: 8px 12px 4px; font: 600 12px/1.2 var(--n-f-text); color: var(--vd-menue-klein); }
#modal-booking-details .vd-mehr-liste hr { border: none; border-top: 1px solid var(--vd-menue-rand); margin: 6px 4px; }
#modal-booking-details .vd-mehr-titel { display: none; }
/* Statusfarben: app.js setzt Inline-Farben (teils < 3:1). Per JS gesetzte Farben stehen im style-Attribut als rgb(), per HTML-Text als #hex.
   Dunkel greifen für #hex zusätzlich die Paket-G-Regeln weiter unten (gleiche Zielwerte, alle ≥ 4,5:1 auf #2A303B). */
#modal-booking-details .vd-zeile [style*="color:#16a34a" i], #modal-booking-details .vd-zeile [style*="color: rgb(22, 163, 74)"],
#modal-booking-details .vd-zeile [style*="color: rgb(16, 185, 129)"] { color: var(--vd-ok) !important; }
#modal-booking-details .vd-zeile [style*="color:#b45309" i], #modal-booking-details .vd-zeile [style*="color: rgb(180, 83, 9)"],
#modal-booking-details .vd-zeile [style*="color: rgb(245, 158, 11)"] { color: var(--vd-warten) !important; }
#modal-booking-details .vd-zeile [style*="color: rgb(3, 105, 161)"], #modal-booking-details .vd-zeile [style*="color: rgb(0, 242, 254)"] { color: var(--vd-info) !important; }
#modal-booking-details .vd-zeile [style*="color:#94a3b8" i], #modal-booking-details .vd-zeile [style*="color: rgb(148, 163, 184)"],
#modal-booking-details .vd-zeile [style*="color:#64748b" i], #modal-booking-details .vd-zeile [style*="color: rgb(100, 116, 139)"] { color: var(--vd-grau) !important; }
#modal-booking-details .vd-zeile [style*="color:#dc2626" i], #modal-booking-details .vd-zeile [style*="color: rgb(220, 38, 38)"] { color: var(--h-rot) !important; }
#modal-booking-details .vd-zeile [style*="color:#2563eb" i] { color: var(--vd-info) !important; }
#modal-booking-details .vd-zeile [style*="font-size:0.72rem"] { font-size: 12.5px !important; }
@media (max-width: 860px) {
  #modal-booking-details .vd-karte { padding: 8px !important; }
  #modal-booking-details .vd-kopf { padding: 10px 12px; }
  #modal-booking-details .vd-liste > .vd-zeile, #modal-booking-details .vd-liste > .vd-zeile:last-child, #modal-booking-details .vd-liste > .vd-zeile:hover { padding: 12px !important; }
  #modal-booking-details .vd-zeile .billing-row-right { padding-left: 30px; }
  #modal-booking-details .vd-zeile .vz-k, #modal-booking-details .vd-zeile #review-mode, #modal-booking-details .vd-zeile #det-invoice-container .btn { min-height: 44px; }
  #modal-booking-details .vd-zeile #det-invoice-container .btn { padding: 0 8px !important; }
  #modal-booking-details .vd-mehr-liste { left: 0; right: auto; }
  #modal-booking-details .vd-zeile .vd-mehr-liste > .vz-k { min-height: 44px; }
}
/* Handy (Fenster ist hier Vollbild ohne transform): Menü als Blatt von unten wie bei „⋯“ in der Mietleiste */
@media (max-width: 768px) {
  #modal-booking-details .vd-mehr { position: static; }
  #modal-booking-details .vd-mehr-liste { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); width: auto; min-width: 0; max-width: none;
    max-height: calc(100dvh - 32px); overflow-y: auto; z-index: 10060; box-shadow: 0 -10px 40px rgba(15,23,42,.35); }
  #modal-booking-details .vd-mehr-titel { display: block; padding: 8px 12px 6px; font: 700 15px/1.2 var(--n-f-head); color: var(--n-ink); }
  #modal-booking-details .vd-zeile .vd-mehr-liste > .vz-k { min-height: 48px; font-size: 15px !important; }
}

/* ═══ Buchungs-Details Paket E (04.10.2026): Kunde (Text statt Kästen), Fahrer, Check-in ═══ */
/* Kunde */
#modal-booking-details .vk-karte, #modal-booking-details .vk-docs, #modal-booking-details .kunde-card ~ .details-section-card { background: var(--n-card) !important; border: 1px solid var(--n-line-soft) !important; border-radius: 14px !important; box-shadow: none !important; }
#modal-booking-details .vk-karte h4, #modal-booking-details .vk-docs h4 { text-transform: none !important; letter-spacing: 0 !important; font: 700 15px/1.2 var(--n-f-head) !important; color: var(--n-ink) !important; }
#modal-booking-details .vk-karte h4 i, #modal-booking-details .vk-docs h4 > i { display: none; }
#modal-booking-details .kunde-grid { gap: 14px 20px !important; }
#modal-booking-details .kunde-field label { font: 500 12px/1.3 var(--n-f-text) !important; color: var(--n-ink-3) !important; text-transform: none !important; letter-spacing: 0 !important; margin-bottom: 3px; }
#modal-booking-details .kunde-grid:not(.vk-bearbeiten) .kunde-val { border: none !important; background: none !important; padding: 0 !important; min-height: 0 !important; font: 500 14.5px/1.4 var(--n-f-text) !important; color: var(--n-ink) !important; }
#modal-booking-details .kunde-grid:not(.vk-bearbeiten) .vk-adressteil, #modal-booking-details .kunde-grid:not(.vk-bearbeiten) .vk-leer { display: none !important; }
#modal-booking-details .kunde-grid.vk-bearbeiten .vk-adresse { display: none !important; }
#modal-booking-details .vk-docs h4 { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
#modal-booking-details .vk-docs h4 > span { flex-basis: 100%; order: 3; }
#modal-booking-details .vk-docs h4 .vz-k { float: none !important; margin: 0 !important; white-space: normal; }
#modal-booking-details .vk-docs .doc-card-title .vz-k { float: right; min-height: 28px; padding: 0 9px !important; font-size: 12px !important; margin-left: 4px; }
#modal-booking-details .vk-docs .doc-card-title > i { display: none; }
/* Fahrer */
#modal-booking-details .vf-karte { background: var(--n-card) !important; border: 1px solid var(--n-line-soft) !important; border-radius: 14px !important; box-shadow: none !important; }
#modal-booking-details .vf-karte h4 { text-transform: none !important; letter-spacing: 0 !important; font: 700 15px/1.2 var(--n-f-head) !important; color: var(--n-ink) !important; }
#modal-booking-details .vf-karte h4 i, #modal-booking-details .vf-karte .customer-info-row > i { display: none; }
#modal-booking-details .vf-karte .customer-info-row { font-size: 14px; color: var(--n-ink); }
#modal-booking-details .vf-karte .customer-info-row strong { font-weight: 500; color: var(--n-ink-3); min-width: 70px; display: inline-block; }
/* Check-in */
#modal-booking-details .vc-ci { background: var(--n-card) !important; border: none !important; box-shadow: none !important; padding: 4px 4px 8px !important; }
#modal-booking-details .vc-ci > h4 { text-transform: none !important; letter-spacing: 0 !important; font: 700 15px/1.2 var(--n-f-head) !important; color: var(--n-ink) !important; margin: 0 0 8px !important; }
#modal-booking-details .vc-ci > h4 i, #modal-booking-details .vc-ci .billing-row-left > i { display: none; }
#modal-booking-details .vc-ci .billing-list { border: 1px solid var(--n-line-soft) !important; border-radius: 14px !important; background: var(--n-card) !important; overflow: hidden; }
#modal-booking-details .vc-ci .billing-row { padding: 12px 16px !important; gap: 8px 14px; }
#modal-booking-details .vc-ci .billing-row-label { font: 600 14px/1.3 var(--n-f-text) !important; color: var(--n-ink) !important; }
#modal-booking-details .vc-ci .billing-row-right { gap: 8px !important; }
#modal-booking-details .vc-ci select, #modal-booking-details .vc-ci input[type="datetime-local"] { min-height: 38px; padding: 0 10px !important; border: 1px solid var(--n-line) !important; border-radius: 10px !important; font: 500 13.5px var(--n-f-text) !important; color: var(--n-ink) !important; background: var(--n-card) !important; max-width: 100%; }
#modal-booking-details .vc-ci #det-identity-failed-section { margin: 0 0 16px !important; border-radius: 14px !important; padding: 14px 16px !important; }
#modal-booking-details .vc-ci #det-identity-failed-section .vz-k { min-height: 38px; }
#modal-booking-details .vc-ci-hand { margin-top: 18px; }
#modal-booking-details .vc-ci-hand[hidden] { display: none !important; }
#modal-booking-details .vc-ci-hand h5 { margin: 0 0 8px; font: 700 15px/1.2 var(--n-f-head); color: var(--n-ink); }
#modal-booking-details .vc-ci-hand > div { margin: 0 0 12px !important; }
#modal-booking-details .vz-k.vc-rot-rand { border-color: var(--h-rot-rand) !important; color: var(--h-rot) !important; }
#modal-booking-details .vc-ci #det-checkin-sent-info, #modal-booking-details .vc-ci #det-checkin-deadline-info { font-size: 12.5px !important; color: var(--n-ink-3) !important; padding-top: 0 !important; }
@media (max-width: 860px) {
  #modal-booking-details .vc-ci .billing-row { flex-direction: column; align-items: stretch !important; }
  #modal-booking-details .vc-ci .billing-row-right { justify-content: flex-start !important; text-align: left !important; }
  #modal-booking-details .vc-ci .vz-k { white-space: normal; }
  #modal-booking-details .vk-docs .doc-grid { grid-template-columns: 1fr !important; }
}
/* Paket E: Leerraum über Check-in (freie Höhe wurde auf leere Spalten verteilt) + Überbreite am Handy (Spalte wuchs mit dem Inhalt) */
html[data-design="neu"] #modal-booking-details .booking-details-grid { align-content: start !important; grid-template-columns: minmax(0, 1fr) !important; }
html[data-design="neu"] #modal-booking-details .booking-details-grid > * { min-width: 0; }
#modal-booking-details .vk-karte h4, #modal-booking-details .vk-docs h4, #modal-booking-details .vf-karte h4, #modal-booking-details .vc-ci > h4 { border: none !important; padding-bottom: 0 !important; }
#modal-booking-details .vk-docs .doc-card-title, #modal-booking-details .vk-docs .doc-upload-label { text-transform: none !important; letter-spacing: 0 !important; font-family: var(--n-f-text) !important; }
#modal-booking-details .vk-docs .doc-card-title { font-weight: 600 !important; font-size: 13.5px !important; color: var(--n-ink) !important; }
#modal-booking-details .vk-docs .doc-upload-label { font-weight: 600 !important; font-size: 13px !important; color: var(--n-ink-2) !important; }
#modal-booking-details .vk-docs .doc-card-title { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; }
#modal-booking-details .vk-docs .doc-card-title .vz-k { float: none !important; margin: 0 !important; }
#modal-booking-details .vk-docs .doc-card-title .vz-k:first-of-type { margin-left: auto !important; }

/* ═══ Buchungs-Details Paket F (04.10.2026): Miete, Extras, Fotos, Chat + Kontakt der Buchung im Reiter Kunde ═══ */
#modal-booking-details .vm-karte { background: var(--n-card) !important; border: 1px solid var(--n-line-soft) !important; border-radius: 14px !important; box-shadow: none !important; }
#modal-booking-details .vm-karte h4 { text-transform: none !important; letter-spacing: 0 !important; font: 700 15px/1.2 var(--n-f-head) !important; color: var(--n-ink) !important; border: none !important; padding-bottom: 0 !important; }
#modal-booking-details .vm-karte h4 i, #modal-booking-details .vm-karte .customer-info-row > i, #modal-booking-details .vm-karte .billing-row-left > i { display: none; }
#modal-booking-details .vm-karte .customer-info-row { font-size: 14px; color: var(--n-ink); gap: 6px 10px; flex-wrap: wrap; }
#modal-booking-details .vm-karte .customer-info-row strong { font-weight: 500; color: var(--n-ink-3); text-transform: none; letter-spacing: 0; min-width: 96px; }
#modal-booking-details .vm-karte .billing-list { border-color: var(--n-line-soft) !important; border-radius: 12px !important; }
#modal-booking-details .vm-karte .billing-row-label { text-transform: none !important; letter-spacing: 0 !important; font: 500 13.5px/1.3 var(--n-f-text) !important; color: var(--n-ink-2) !important; }
#modal-booking-details .vm-karte .vz-k, #modal-booking-details .vm-kontakt .vz-k { min-height: 32px; }
#modal-booking-details .vm-karte .vz-k i, #modal-booking-details .vm-kontakt .vz-k i { display: none; }
/* Kontakt nur in dieser Buchung (Reiter Kunde, eingeklappt) */
#modal-booking-details .vm-kontakt { background: var(--n-card) !important; border: 1px solid var(--n-line-soft) !important; border-radius: 14px !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 12px; }
#modal-booking-details .vm-kontakt summary { cursor: pointer; padding: 13px 16px; font: 600 14px/1.3 var(--n-f-text); color: var(--n-ink); list-style-position: inside; }
#modal-booking-details .vm-kontakt summary small { display: block; margin-top: 2px; font-weight: 400; font-size: 12.5px; color: var(--n-ink-3); }
#modal-booking-details .vm-kontakt[open] summary { border-bottom: 1px solid var(--n-line-soft); }
#modal-booking-details .vm-kontakt-zeilen { padding: 10px 16px 0; display: flex; flex-direction: column; gap: 8px; }
#modal-booking-details .vm-kontakt .customer-info-row { font-size: 14px; color: var(--n-ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#modal-booking-details .vm-kontakt .customer-info-row > i { display: none; }
#modal-booking-details .vm-kontakt .customer-info-row strong { font-weight: 500; color: var(--n-ink-3); min-width: 70px; }
#modal-booking-details .vm-kontakt-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 16px 14px; }
/* Fotos und Chat */
#modal-booking-details .vm-hülle { padding-left: 4px !important; padding-right: 4px !important; }
#modal-booking-details .vm-hülle > div:first-child { background: var(--n-card) !important; border-color: var(--n-line-soft) !important; border-radius: 14px !important; }
#modal-booking-details .vm-hülle .btn i { display: none; }
#modal-booking-details .vm-fotos { margin-top: 12px !important; border-top: none !important; padding-top: 0 !important; }
#modal-booking-details .vm-fotos-titel { font: 700 15px/1.2 var(--n-f-head) !important; color: var(--n-ink) !important; }
#modal-booking-details .vm-fotos-label { font: 600 13px/1.2 var(--n-f-text) !important; color: var(--n-ink-2) !important; letter-spacing: 0 !important; }
#modal-booking-details .vm-foto img { height: auto !important; aspect-ratio: 4 / 3; border-color: var(--n-line-soft) !important; }
#modal-booking-details .vm-foto div { font-size: 12px !important; color: var(--n-ink-2) !important; }
#modal-booking-details .vm-fotos-leer { margin-top: 12px; padding: 18px 16px; border: 1px dashed var(--n-line); border-radius: 14px; color: var(--n-ink-2); font-size: 13.5px; text-align: center; }
#modal-booking-details .vm-chat-eingabe { position: sticky; bottom: 0; background: var(--n-card); padding: 8px 0 4px; z-index: 2; }
@media (max-width: 860px) {
  #modal-booking-details .vm-fotos-raster { grid-template-columns: repeat(2, 1fr) !important; }
  #modal-booking-details .vm-hülle { padding-left: 0 !important; padding-right: 0 !important; }
}
#modal-booking-details .vm-karte [style*="uppercase"], #modal-booking-details .vm-kontakt strong { text-transform: none !important; letter-spacing: 0 !important; }
#modal-booking-details .vm-karte #det-vehicle { flex: 1 1 160px; min-width: 140px; }
html[data-design="neu"] #modal-booking-details[data-reiter="chat"] .booking-details-grid, html[data-design="neu"] #modal-booking-details[data-reiter="fotos"] .booking-details-grid { display: none !important; }

/* ═══ Buchungs-Details Paket G (04.10.2026): Dunkel auch im Fensterinhalt ═══
   Die helle Insel für #modal-booking-details (siehe oben „Dunkel: Reiter-Inhalte bleiben helle Karten“) wird hier
   wieder dunkel gesetzt; alte Klassen und die häufigsten festen Inline-Farben werden auf die Tokens umgelegt.
   Übrige Dialoge (Erstatten, Zahlart-Menü, Fehlalarm …) bleiben bewusst helle Karten. */
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details {
  color-scheme: dark;
  --n-card:#0F172A; --n-card-2:#1E293B; --n-line:#334155; --n-line-soft:rgba(148,163,184,.18); --n-ink:#F8FAFC; --n-ink-2:#CBD5E1; --n-ink-3:#94A3B8;
  --n-acc-text:#A3E635; --n-acc-soft:rgba(132,204,22,.14); --n-shadow:none;
  --h-rot:#F87171; --h-rot-bg:rgba(248,113,113,.12); --h-rot-rand:rgba(248,113,113,.34);
  --h-gelb:#FBBF24; --h-gelb-bg:rgba(251,191,36,.10); --h-gelb-rand:rgba(251,191,36,.30);
  --h-gruen:#4ADE80; --h-gruen-bg:rgba(74,222,128,.12);
  --bg-base:#020617; --bg-surface:#0F172A; --bg-card:#0F172A; --bg-card-hover:#1E293B;
  --border:rgba(148,163,184,.18); --border-hover:#334155;
  --text-primary:#F8FAFC; --text-secondary:#E2E8F0; --text-muted:#CBD5E1;
}
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .modal-content,
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .modal-body { background: var(--n-card) !important; color: var(--n-ink); }
/* alte Klassen */
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .details-section-card { background: var(--n-card) !important; border-color: var(--n-line-soft) !important; color: var(--n-ink); }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .details-section-card h4,
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .billing-row-label,
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .customer-info-row,
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .doc-card-title { color: var(--n-ink) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .billing-list,
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .doc-card,
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .doc-preview-box { background: var(--n-card) !important; border-color: var(--n-line-soft) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .billing-row { border-color: var(--n-line-soft) !important; background: transparent !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .billing-row .billing-status-value:not(#det-checkin-status) { background: transparent !important; border-color: var(--n-line-soft) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .doc-placeholder { background: var(--n-card-2) !important; color: var(--n-ink-3) !important; }
/* Eingabefelder */
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details input:not([type="checkbox"]):not([type="radio"]),
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details select,
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details textarea,
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .form-control,
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .kunde-input { background: var(--n-card-2) !important; color: var(--n-ink) !important; -webkit-text-fill-color: var(--n-ink); border-color: var(--n-line) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vp-liste:not(.rh-editing) .rh-input { background: transparent !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vp-liste.rh-editing .rh-euro:not(.rh-euro-ro):not(.rh-euro-due) { background: var(--n-card-2) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [contenteditable="true"] { background: var(--n-card-2) !important; color: var(--n-ink) !important; }
/* feste Inline-Farben (auch in nachgeladenem Inhalt) */
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background:#fff;" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background:#fff\"" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background: #fff;" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background:#ffffff" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background: #ffffff" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background:white" i] { background: var(--n-card) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background:#f8fafc" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background: #f8fafc" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background:#f1f5f9" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background: #f1f5f9" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background:#eef2f5" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background:#eef2f7" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background:#fafcff" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background:#f9fafb" i] { background: var(--n-card-2) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background:#fff7ed" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background:#fef3c7" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background:#fffbeb" i],
/* Kästen, die per JS ein-/ausgeblendet werden: der Browser schreibt ihr style-Attribut dann als rgb(…) neu (Alters-Hinweis 05.11.2026) */
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background: rgb(255, 247, 237)" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background: rgb(254, 243, 199)" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background: rgb(255, 251, 235)" i] { background: var(--h-gelb-bg) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background:#ecfdf5" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background:#dcfce7" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background:#f0fdf4" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background: rgb(236, 253, 245)" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background: rgb(220, 252, 231)" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background: rgb(240, 253, 244)" i] { background: var(--h-gruen-bg) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background:#fef2f2" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background:#fee2e2" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background: rgb(254, 242, 242)" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background: rgb(254, 226, 226)" i] { background: var(--h-rot-bg) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background:#dbeafe" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="background:#eff6ff" i] { background: rgba(96,165,250,.14) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color:#0f172a" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color: #0f172a" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color:#1a202c" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color:#1e293b" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color:#000" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color:#111827" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color:#374151" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color:#334155" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color: #334155" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color:#4a5568" i] { color: var(--n-ink) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color:#475569" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color:#64748b" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color: #64748b" i] { color: var(--n-ink-2) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color:#94a3b8" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color: #94a3b8" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color:#8892b0" i] { color: var(--n-ink-3) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color:#1d4ed8" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color:#2563eb" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color: var(--accent-blue)" i] { color: #60A5FA !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color:#16a34a" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color:#15803d" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color:#065f46" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color:#10b981" i] { color: var(--h-gruen) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color:#b45309" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color:#92400e" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color:#d97706" i] { color: var(--h-gelb) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color:#dc2626" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color:#7f1d1d" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="color:#ef4444" i] { color: var(--h-rot) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="solid #e2e8f0" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="solid #cbd5e1" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="solid #eef2f6" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details [style*="dashed #e2e8f0" i] { border-color: var(--n-line-soft) !important; }
/* eigene Bausteine mit festen Farben */
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vz-feld[data-z="info"] #det-deposit-status { color: #93C5FD !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vz-feld[data-z="info"] { background: rgba(96,165,250,.10); border-color: rgba(96,165,250,.32); }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vz-k.haupt { color: #0F172A !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vm-status[data-st="active"] { color: #93C5FD; background: rgba(96,165,250,.14); border-color: rgba(96,165,250,.38); }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .btn-secondary { background: var(--n-card-2) !important; color: var(--n-ink) !important; border-color: var(--n-line) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .btn-edit-icon { color: var(--n-ink-2); }
/* Paket G: Wertkästen in Miete/Fahrer und Nutzerkreis-Namen */
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .customer-info-row > span:not([id$="-edit"]):not(#det-groups-summary):not(#det-moved-info) { background: var(--n-card-2) !important; border-color: var(--n-line) !important; color: var(--n-ink) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .customer-info-row strong { color: var(--n-ink-3) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details #det-groups-checklist label,
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details #det-groups-checklist label > span,
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details #det-groups-summary { color: var(--n-ink) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .bk-tl-card { background: var(--n-card-2) !important; border-color: var(--n-line) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .bk-tl-main { color: var(--n-ink) !important; }

/* ═══ Buchungs-Übersicht + Upselling (04.10.2026): kompakte Leiste, Kacheln, hell/dunkel, PC/Handy ═══ */
html[data-design="neu"] #tab-bookings .card-header h3, html[data-design="neu"] #tab-upselling .card-header h3 { text-transform: none !important; letter-spacing: 0 !important; font: 700 20px/1.2 var(--n-f-head) !important; color: var(--n-ink) !important; }
html[data-design="neu"] #tab-bookings .card, html[data-design="neu"] #tab-upselling .card { background: var(--n-card) !important; border: 1px solid var(--n-line-soft) !important; border-radius: 16px !important; box-shadow: var(--n-shadow) !important; }
/* Umschalter Zeitleiste | Liste */
html[data-design="neu"] .vl-karte .view-toggle { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--n-card-2); border: 1px solid var(--n-line-soft); }
html[data-design="neu"] .vl-karte .vl-seg { min-height: 34px; padding: 0 14px !important; border-radius: 9px !important; background: transparent !important; color: var(--n-ink-2) !important; font: 600 13.5px/1 var(--n-f-text) !important; box-shadow: none !important; }
html[data-design="neu"] .vl-karte .vl-seg.active { background: var(--n-card) !important; color: var(--n-ink) !important; box-shadow: 0 1px 3px rgba(15,23,42,.14) !important; }
/* Leiste */
html[data-design="neu"] .vl-weg { display: none !important; }
.vl-leiste { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.vl-l1, .vl-l2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vl-zeitraum { flex: 1; min-width: 0; text-align: center; font: 700 16px/1.2 var(--n-f-head) !important; color: var(--n-ink) !important; }
html[data-design="neu"] .vl-nav { background: var(--n-card-2) !important; border: 1px solid var(--n-line-soft) !important; border-radius: 12px !important; padding: 3px !important; }
html[data-design="neu"] .vl-nav .btn { background: transparent !important; color: var(--n-ink) !important; border-radius: 9px !important; min-height: 34px; font: 600 13.5px/1 var(--n-f-text) !important; }
html[data-design="neu"] .vl-nav .btn:hover { background: var(--n-card) !important; }
html[data-design="neu"] .vl-leiste .tl-viewmode-toggle { background: var(--n-card-2) !important; border: 1px solid var(--n-line-soft) !important; border-radius: 12px !important; padding: 3px !important; }
html[data-design="neu"] .vl-leiste .tl-viewmode-btn { min-height: 34px; border-radius: 9px !important; color: var(--n-ink-2) !important; background: transparent !important; font: 600 13.5px/1 var(--n-f-text) !important; }
html[data-design="neu"] .vl-leiste .tl-viewmode-btn.active { background: var(--n-card) !important; color: var(--n-ink) !important; box-shadow: 0 1px 3px rgba(15,23,42,.14) !important; }
.vl-ansicht-knopf { display: none; min-height: 38px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--n-line); background: var(--n-card); color: var(--n-ink); font: 600 13.5px/1 var(--n-f-text); cursor: pointer; }
.vl-ansicht-knopf::after { content: " ▾"; color: var(--n-ink-3); }
.vl-leiste.vl-offen .vl-ansicht-knopf::after { content: " ▴"; }
.vl-l2 { padding-top: 10px; border-top: 1px solid var(--n-line-soft); }
.vl-gruppe span { color: var(--n-ink-2) !important; font: 500 13px var(--n-f-text) !important; }
html[data-design="neu"] .vl-l2 select, html[data-design="neu"] .vl-l2 .timeline-date-picker-group, html[data-design="neu"] .vl-l2 #btn-timeline-clear { min-height: 38px; background: var(--n-card) !important; border: 1px solid var(--n-line) !important; border-radius: 10px !important; color: var(--n-ink) !important; }
html[data-design="neu"] .vl-l2 .timeline-date-picker-input { background: transparent !important; color: var(--n-ink) !important; border: none !important; }
html[data-design="neu"] .vl-l2 .timeline-date-picker-icon { background: transparent !important; color: var(--n-ink-2) !important; border: none !important; }
.vl-breite { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; min-width: 200px; }
.vl-breite span:first-child { color: var(--n-ink-2) !important; font: 500 13px var(--n-f-text) !important; white-space: nowrap; }
html[data-design="neu"] .vl-legende { position: static !important; margin-left: auto; background: transparent !important; box-shadow: none !important; padding: 0 !important; border: none !important; flex-wrap: wrap; gap: 6px 12px !important; }
html[data-design="neu"] .vl-legende .tl-legend-item { color: var(--n-ink-2) !important; font: 500 12.5px var(--n-f-text) !important; }
html[data-design="neu"] #tab-bookings .timeline-container { border-color: var(--n-line-soft) !important; border-radius: 14px !important; }
@media (max-width: 860px) {
  .vl-ansicht-knopf { display: inline-flex; align-items: center; }
  .vl-leiste:not(.vl-offen) .vl-l2 { display: none; }
  .vl-l1 { gap: 8px; }
  .vl-zeitraum { order: -1; flex-basis: 100%; text-align: left; font-size: 15px !important; }
  .vl-l1 .vl-nav { flex: 1; justify-content: space-between; }
  html[data-design="neu"] .vl-legende { margin-left: 0; }
  html[data-design="neu"] #tab-bookings .card-header { flex-wrap: wrap; gap: 10px; }
}
/* Upselling */
html[data-design="neu"] #tab-upselling .card-body > p { color: var(--n-ink-2) !important; font-size: 13.5px !important; max-width: 70ch; }
html[data-design="neu"] #tab-upselling .form-group label { color: var(--n-ink) !important; }
html[data-design="neu"] #tab-upselling .form-group p { color: var(--n-ink-3) !important; }
html[data-design="neu"] #upsell-stats { background: transparent !important; padding: 0 !important; }
.vu-kopf { font: 700 15px/1.2 var(--n-f-head); color: var(--n-ink); margin-bottom: 10px; }
.vu-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vu-k { background: var(--n-card-2); border: 1px solid var(--n-line-soft); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vu-k .vu-t { font: 600 12.5px/1.3 var(--n-f-text); color: var(--n-ink-2); }
.vu-k b { font: 700 22px/1.15 var(--n-f-head); color: var(--n-ink); font-variant-numeric: tabular-nums; }
.vu-k small { font-size: 12px; color: var(--n-ink-3); }
.vu-liste { border: 1px solid var(--n-line-soft); border-radius: 14px; overflow: hidden; }
.vu-z { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: 6px 14px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--n-line-soft); }
.vu-z:last-child { border-bottom: none; }
.vu-wer b { display: block; font: 600 14px/1.3 var(--n-f-text); color: var(--n-ink); }
.vu-wer a { font-size: 12.5px; color: #2563EB; text-decoration: none; }
.vu-was { font-size: 13.5px; color: var(--n-ink); }
.vu-was small { display: block; font-size: 12px; color: var(--n-ink-3); margin-top: 2px; }
.vu-b { font: 700 14px var(--n-f-text); color: var(--n-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-design="neu"] #tab-upselling .form-control { background: var(--n-card) !important; border: 1px solid var(--n-line) !important; border-radius: 10px !important; color: var(--n-ink) !important; }
@media (max-width: 860px) {
  .vu-kacheln { grid-template-columns: 1fr 1fr; }
  .vu-kacheln .vu-k:last-child { grid-column: 1 / -1; }
  .vu-z { grid-template-columns: minmax(0, 1fr) auto; }
  .vu-z .vu-was { grid-column: 1 / -1; grid-row: 2; }
  html[data-design="neu"] #tab-upselling .card-header { flex-wrap: wrap; gap: 10px; }
}
/* Dunkel: beide Reiter nicht mehr als helle Insel */
html[data-design="neu"][data-vc-theme="dark"] #tab-bookings:not(.hidden), html[data-design="neu"][data-vc-theme="dark"] #tab-upselling:not(.hidden) {
  color-scheme: dark; background: transparent !important; padding: 0 !important; color: var(--n-ink);
  --n-card:#0F172A; --n-card-2:#1E293B; --n-line:#334155; --n-line-soft:rgba(148,163,184,.18); --n-ink:#F8FAFC; --n-ink-2:#CBD5E1; --n-ink-3:#94A3B8;
  --n-acc-text:#A3E635; --n-acc-soft:rgba(132,204,22,.14); --n-shadow:none;
  --h-rot:#F87171; --h-rot-bg:rgba(248,113,113,.12); --h-rot-rand:rgba(248,113,113,.34); --h-gelb:#FBBF24; --h-gelb-bg:rgba(251,191,36,.10); --h-gelb-rand:rgba(251,191,36,.30); --h-gruen:#4ADE80; --h-gruen-bg:rgba(74,222,128,.12);
  --bg-base:#020617; --bg-surface:#0F172A; --bg-card:#0F172A; --bg-card-hover:#1E293B; --border:rgba(148,163,184,.18); --border-hover:#334155;
  --text-primary:#F8FAFC; --text-secondary:#CBD5E1; --text-muted:#94A3B8;
}
html[data-design="neu"][data-vc-theme="dark"] #tab-bookings .vu-wer a, html[data-design="neu"][data-vc-theme="dark"] #tab-upselling .vu-wer a { color: #60A5FA; }
html[data-design="neu"][data-vc-theme="dark"] #tab-bookings [style*="background:#fff" i], html[data-design="neu"][data-vc-theme="dark"] #tab-upselling [style*="background:#fff" i], html[data-design="neu"][data-vc-theme="dark"] #tab-bookings [style*="background: #fff" i], html[data-design="neu"][data-vc-theme="dark"] #tab-upselling [style*="background: #fff" i], html[data-design="neu"][data-vc-theme="dark"] #tab-bookings [style*="background:white" i], html[data-design="neu"][data-vc-theme="dark"] #tab-upselling [style*="background:white" i] { background: var(--n-card) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-bookings [style*="background:#f8fafc" i], html[data-design="neu"][data-vc-theme="dark"] #tab-upselling [style*="background:#f8fafc" i], html[data-design="neu"][data-vc-theme="dark"] #tab-bookings [style*="background:#f1f5f9" i], html[data-design="neu"][data-vc-theme="dark"] #tab-upselling [style*="background:#f1f5f9" i], html[data-design="neu"][data-vc-theme="dark"] #tab-bookings [style*="background: #f1f5f9" i], html[data-design="neu"][data-vc-theme="dark"] #tab-upselling [style*="background: #f1f5f9" i], html[data-design="neu"][data-vc-theme="dark"] #tab-bookings [style*="background:#eef2f7" i], html[data-design="neu"][data-vc-theme="dark"] #tab-upselling [style*="background:#eef2f7" i] { background: var(--n-card-2) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-bookings [style*="color:#0f172a" i], html[data-design="neu"][data-vc-theme="dark"] #tab-upselling [style*="color:#0f172a" i], html[data-design="neu"][data-vc-theme="dark"] #tab-bookings [style*="color:#334155" i], html[data-design="neu"][data-vc-theme="dark"] #tab-upselling [style*="color:#334155" i], html[data-design="neu"][data-vc-theme="dark"] #tab-bookings [style*="color:#1e293b" i], html[data-design="neu"][data-vc-theme="dark"] #tab-upselling [style*="color:#1e293b" i], html[data-design="neu"][data-vc-theme="dark"] #tab-bookings [style*="color:#374151" i], html[data-design="neu"][data-vc-theme="dark"] #tab-upselling [style*="color:#374151" i] { color: var(--n-ink) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-bookings [style*="color:#64748b" i], html[data-design="neu"][data-vc-theme="dark"] #tab-upselling [style*="color:#64748b" i], html[data-design="neu"][data-vc-theme="dark"] #tab-bookings [style*="color:#475569" i], html[data-design="neu"][data-vc-theme="dark"] #tab-upselling [style*="color:#475569" i] { color: var(--n-ink-2) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-bookings [style*="solid #e2e8f0" i], html[data-design="neu"][data-vc-theme="dark"] #tab-upselling [style*="solid #e2e8f0" i], html[data-design="neu"][data-vc-theme="dark"] #tab-bookings [style*="solid #cbd5e1" i], html[data-design="neu"][data-vc-theme="dark"] #tab-upselling [style*="solid #cbd5e1" i] { border-color: var(--n-line-soft) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-bookings input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[data-design="neu"][data-vc-theme="dark"] #tab-upselling input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[data-design="neu"][data-vc-theme="dark"] #tab-bookings select, html[data-design="neu"][data-vc-theme="dark"] #tab-upselling select, html[data-design="neu"][data-vc-theme="dark"] #tab-bookings textarea, html[data-design="neu"][data-vc-theme="dark"] #tab-upselling textarea { background: var(--n-card-2) !important; color: var(--n-ink) !important; border-color: var(--n-line) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-bookings .bk-table th, html[data-design="neu"][data-vc-theme="dark"] #tab-bookings .bk-th { background: var(--n-card-2) !important; color: var(--n-ink-2) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-bookings .bk-table td { border-color: var(--n-line-soft) !important; color: var(--n-ink); }
/* Zeitleiste dunkel (eigene --tl-Farben) + Pfeile am Handy nicht umbrechen */
html[data-design="neu"][data-vc-theme="dark"] #bookings-timeline-view { --tl-surface:#0F172A; --tl-alt:#16233A; --tl-border:#334155; --tl-grid:rgba(148,163,184,.16); --tl-text:#E2E8F0; --tl-muted:#94A3B8; --tl-plate:#60A5FA; }
html[data-design="neu"][data-vc-theme="dark"] #bookings-timeline-view .timeline-group-header { background: #1E293B !important; color: #E2E8F0 !important; border-color: #334155 !important; }
html[data-design="neu"][data-vc-theme="dark"] #bookings-timeline-view .timeline-day-header-cell.today { background: rgba(96,165,250,.16) !important; }
html[data-design="neu"][data-vc-theme="dark"] #bookings-timeline-view .timeline-months-row, html[data-design="neu"][data-vc-theme="dark"] #bookings-timeline-view #timeline-months-spacer { background: var(--tl-surface) !important; }
html[data-design="neu"][data-vc-theme="dark"] #bookings-timeline-view .timeline-action-btn:hover { background: rgba(96,165,250,.14) !important; }
html[data-design="neu"] .vl-nav .btn { white-space: nowrap; display: inline-flex !important; align-items: center; gap: 5px; }
@media (max-width: 860px) { html[data-design="neu"] .vl-nav .btn { padding: 0 10px !important; } }
html[data-design="neu"][data-vc-theme="dark"] #bookings-timeline-view [style*="background: rgb(255, 255, 255)"] { background: var(--tl-surface) !important; }
html[data-design="neu"][data-vc-theme="dark"] #bookings-timeline-view [style*="background: rgb(246, 249, 252)"] { background: var(--tl-alt) !important; }
html[data-design="neu"][data-vc-theme="dark"] #bookings-timeline-view [style*="background: rgb(230, 237, 246)"] { background: rgba(148,163,184,.12) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-bookings [style*="background: rgb(255, 255, 255)"], html[data-design="neu"][data-vc-theme="dark"] #tab-upselling [style*="background: rgb(255, 255, 255)"] { background: var(--n-card) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-bookings [style*="background: rgb(248, 250, 252)"], html[data-design="neu"][data-vc-theme="dark"] #tab-bookings [style*="background: rgb(241, 245, 249)"], html[data-design="neu"][data-vc-theme="dark"] #tab-upselling [style*="background: rgb(241, 245, 249)"] { background: var(--n-card-2) !important; }
html[data-design="neu"][data-vc-theme="dark"] #bookings-timeline-view .timeline-grid-row > div { border-color: rgba(148,163,184,.14) !important; }
/* Status-Schilder in der Liste: normal geschrieben, passen in Spalte und Karte */
html[data-design="neu"] #tab-bookings .bk-badge { text-transform: none !important; letter-spacing: 0 !important; font: 600 12.5px/1.2 var(--n-f-text) !important; padding: 4px 10px !important; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-design="neu"] #tab-bookings td { min-width: 0; }
html[data-design="neu"][data-vc-theme="dark"] #tab-bookings .tl-legend-fixed { background: rgba(15,23,42,.94) !important; border-color: #334155 !important; color: #CBD5E1 !important; } html[data-design="neu"][data-vc-theme="dark"] #tab-bookings .tl-legend-item { color: #CBD5E1 !important; }

/* Dunkel: „Abholen und zurück“ (Reiter Abholungen) nicht mehr als helle Insel – wie Buchungen/Upselling (05.10.2026);
   Reiter „Meldungen“ ebenso (23.10.2026, Chef: war noch hell) */
html[data-design="neu"][data-vc-theme="dark"] #tab-pickups:not(.hidden),
html[data-design="neu"][data-vc-theme="dark"] #tab-meldungen:not(.hidden),
html[data-design="neu"][data-vc-theme="dark"] #tab-push:not(.hidden),
html[data-design="neu"][data-vc-theme="dark"] #tab-pricing:not(.hidden) {
  color-scheme: dark; background: transparent !important; padding: 0 !important; color: var(--n-ink);
  --n-card:#0F172A; --n-card-2:#1E293B; --n-line:#334155; --n-line-soft:rgba(148,163,184,.18); --n-ink:#F8FAFC; --n-ink-2:#CBD5E1; --n-ink-3:#94A3B8;
  --n-acc-text:#A3E635; --n-acc-soft:rgba(132,204,22,.14); --n-shadow:none;
  --h-rot:#F87171; --h-rot-bg:rgba(248,113,113,.12); --h-rot-rand:rgba(248,113,113,.34); --h-gelb:#FBBF24; --h-gelb-bg:rgba(251,191,36,.10); --h-gelb-rand:rgba(251,191,36,.30); --h-gruen:#4ADE80; --h-gruen-bg:rgba(74,222,128,.12);
  --bg-base:#020617; --bg-surface:#0F172A; --bg-card:#0F172A; --bg-card-hover:#1E293B; --border:rgba(148,163,184,.18); --border-hover:#334155;
  --text-primary:#F8FAFC; --text-secondary:#CBD5E1; --text-muted:#94A3B8;
}
/* Meldungen: Karte „Meldungen & offene Beträge“ im neuen Design wie die Meldungsliste (index.css setzt .card fest weiß) */
html[data-design="neu"] #tab-meldungen .card, html[data-design="neu"] #tab-meldungen .card:hover,
html[data-design="neu"] #tab-push .card, html[data-design="neu"] #tab-push .card:hover {
  background: var(--n-card) !important; border: 1px solid var(--n-line-soft) !important; border-radius: 16px !important;
  box-shadow: var(--n-shadow) !important; padding: 16px 18px; color: var(--n-ink); transform: none; }
html[data-design="neu"] #tab-meldungen .card-header { margin-bottom: 12px; }
html[data-design="neu"] #tab-meldungen .card-header h3, html[data-design="neu"] #tab-push .card-header h3 { font: 600 17px/1.3 var(--n-f-head); text-transform: none; letter-spacing: 0; color: var(--n-ink); }
html[data-design="neu"] #tab-meldungen #open-amounts-tile { border-radius: 12px !important; }
html[data-design="neu"] #tab-meldungen #open-amounts-list > div { color: var(--n-ink); min-height: 36px; align-items: center; border-radius: 0 !important; }
/* Trennlinien zwischen den Buchungen (Chef 23.10.2026) */
html[data-design="neu"] #tab-meldungen #open-amounts-list > div + div { border-top: 1px solid var(--h-gelb-rand); }
/* Meldungen dunkel: Kachel „Offene Beträge“ hat feste Inline-Farben aus app.js (Bernstein/Grün für hellen Grund) */
html[data-design="neu"][data-vc-theme="dark"] #tab-meldungen #open-amounts-tile { background: var(--h-gelb-bg) !important; border-color: var(--h-gelb-rand) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-meldungen [style*="color:#b45309" i] { color: #FBBF24 !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-meldungen [style*="color:#92400e" i] { color: #FCD34D !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-meldungen [style*="color:#16a34a" i] { color: #4ADE80 !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-meldungen #open-amounts-list > div { color: var(--n-ink); }
html[data-design="neu"][data-vc-theme="dark"] #tab-meldungen #open-amounts-list > div:hover { background: rgba(148,163,184,.12) !important; }

/* ═══ Reiter „Tarife“ im neuen Design (06.11.2026, Chef: „noch das alte Design, soll neu und dunkel sein“) ═══
   Gleiche Tokens wie Meldungen/Push. index.css setzt .card und .form-control fest hell – hier überschrieben. */
html[data-design="neu"][data-vc-theme="dark"] #tab-pricing:not(.hidden) { --border-color: #334155; --bg-surface: #0F172A; }
html[data-design="neu"] #tab-pricing .card, html[data-design="neu"] #tab-pricing .card:hover {
  background: var(--n-card) !important; border: 1px solid var(--n-line-soft) !important; border-radius: 16px !important;
  box-shadow: var(--n-shadow) !important; color: var(--n-ink); transform: none; }
html[data-design="neu"] #tab-pricing .card-header { border-color: var(--n-line-soft) !important; background: transparent !important; }
html[data-design="neu"] #tab-pricing .card-header h3, html[data-design="neu"] #tab-pricing .card h3 {
  font: 600 17px/1.3 var(--n-f-head) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--n-ink) !important; }
html[data-design="neu"] #tab-pricing .card h4 { color: var(--n-ink) !important; font-family: var(--n-f-head); }
html[data-design="neu"] #tab-pricing .form-group label, html[data-design="neu"] #tab-pricing .card label { color: var(--n-ink) !important; }
html[data-design="neu"] #tab-pricing .form-control { border-radius: 10px !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-pricing input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-design="neu"][data-vc-theme="dark"] #tab-pricing select,
html[data-design="neu"][data-vc-theme="dark"] #tab-pricing textarea,
html[data-design="neu"][data-vc-theme="dark"] #tab-pricing .form-control {
  background: var(--n-card-2) !important; color: var(--n-ink) !important; border-color: var(--n-line) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-pricing input[type="checkbox"], html[data-design="neu"][data-vc-theme="dark"] #tab-pricing input[type="radio"] { accent-color: #84CC16; }
html[data-design="neu"][data-vc-theme="dark"] #tab-pricing table th { background: var(--n-card-2) !important; color: var(--n-ink-2) !important; border-color: var(--n-line-soft) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-pricing table td { border-color: var(--n-line-soft) !important; color: var(--n-ink); background: transparent; }
html[data-design="neu"][data-vc-theme="dark"] #tab-pricing [style*="background:#fff" i], html[data-design="neu"][data-vc-theme="dark"] #tab-pricing [style*="background: #fff" i],
html[data-design="neu"][data-vc-theme="dark"] #tab-pricing [style*="background:white" i], html[data-design="neu"][data-vc-theme="dark"] #tab-pricing [style*="background: rgb(255, 255, 255)"] { background: var(--n-card) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-pricing [style*="background:#f8fafc" i], html[data-design="neu"][data-vc-theme="dark"] #tab-pricing [style*="background:#f1f5f9" i],
html[data-design="neu"][data-vc-theme="dark"] #tab-pricing [style*="background: rgb(248, 250, 252)"], html[data-design="neu"][data-vc-theme="dark"] #tab-pricing [style*="background: rgb(241, 245, 249)"] { background: var(--n-card-2) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-pricing [style*="color:#0f172a" i], html[data-design="neu"][data-vc-theme="dark"] #tab-pricing [style*="color:#1e293b" i],
html[data-design="neu"][data-vc-theme="dark"] #tab-pricing [style*="color:#334155" i], html[data-design="neu"][data-vc-theme="dark"] #tab-pricing [style*="color:#333" i],
html[data-design="neu"][data-vc-theme="dark"] #tab-pricing [style*="color: rgb(15, 23, 42)"] { color: var(--n-ink) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-pricing [style*="color:#64748b" i], html[data-design="neu"][data-vc-theme="dark"] #tab-pricing [style*="color:#475569" i],
html[data-design="neu"][data-vc-theme="dark"] #tab-pricing [style*="color:#666" i], html[data-design="neu"][data-vc-theme="dark"] #tab-pricing [style*="color:#555" i],
html[data-design="neu"][data-vc-theme="dark"] #tab-pricing [style*="color:#777" i] { color: var(--n-ink-2) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-pricing [style*="solid #e2e8f0" i], html[data-design="neu"][data-vc-theme="dark"] #tab-pricing [style*="solid #cbd5e1" i] { border-color: var(--n-line-soft) !important; }

/* ═══ Paket 8: Reiter anpassen (public/reiter-anpassen.js, Vorlage Baris 05.10.2026) ═══ */
/* ═══ Reiter anpassen (Vorschau Baris, 05.10.2026) – nur im neuen Design, nur PC-Seitenleiste ═══
   Baut auf den Tokens aus design-neu.css auf (--n-*, --h-*). Keine neuen Farben. */

/* Normalzustand: Knopf am Ende der Seitenleiste (nur Inhaber/Admin sehen ihn) */
html[data-design="neu"] .vr-anpassen {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 40px; margin-top: 10px; padding: 0 13px;
  border: none; border-top: 1px solid var(--n-line-soft); border-radius: 0;
  background: none; color: var(--n-ink-2);
  font: 500 13.5px/1 var(--n-f-text); cursor: pointer; text-align: left;
}
html[data-design="neu"] .vr-anpassen:hover { color: var(--n-ink); background: var(--n-card-2); border-radius: 10px; }
html[data-design="neu"] .vr-anpassen svg { flex: none; }
/* „Ausgeblendet (n)“ unten: wie „Einstellungen“ zum Aufklappen, Einträge etwas leiser */
html[data-design="neu"] .vr-aus .tab-btn:not(.active) { color: var(--n-ink-2); }

/* ── Bearbeitungsmodus: Seitenleiste wird zum breiten Bearbeitungsfeld über dem Inhalt ── */
html.vr-edit[data-design="neu"] .tab-navigation {
  position: fixed; top: 64px; left: 0; bottom: 0; width: 392px; z-index: 2100;
  padding: 0; overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 1px 0 0 var(--n-line-soft), 24px 0 48px -24px rgba(15, 23, 42, .45);
}
html.vr-edit[data-design="neu"] .tab-navigation .tabs-container { padding: 0; gap: 0; display: block; }
.vr-scrim { position: fixed; inset: 64px 0 0 0; background: rgba(15, 23, 42, .42); z-index: 2050; }

.vr-panel { font-family: var(--n-f-text); color: var(--n-ink); padding: 0 14px 0; }
.vr-kopf {
  position: sticky; top: 0; z-index: 3; background: var(--n-card);
  margin: 0 -14px; padding: 16px 14px 12px; border-bottom: 1px solid var(--n-line-soft);
}
.vr-kopf-zeile { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vr-kopf h2 { font: 700 18px/1.2 var(--n-f-head); margin: 0; color: var(--n-ink); }
.vr-kopf p { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--n-ink-2); }
.vr-aktionen { display: flex; gap: 8px; flex: none; }
.vr-btn-1, .vr-btn-2 {
  min-height: 40px; padding: 0 16px; border-radius: 12px; cursor: pointer;
  font: 600 14px/1 var(--n-f-text); white-space: nowrap;
}
.vr-btn-1 { background: var(--n-acc); color: var(--n-on-acc); border: 1px solid var(--n-acc); }
.vr-btn-1:hover { background: var(--n-acc-hi); border-color: var(--n-acc-hi); }
.vr-btn-2 { background: var(--n-card); color: var(--n-ink); border: 1px solid var(--n-line); }
.vr-btn-2:hover { background: var(--n-card-2); }

.vr-hilfe { margin: 12px 2px 4px; font-size: 12.5px; line-height: 1.55; color: var(--n-ink-2); }
.vr-hilfe kbd {
  display: inline-block; min-width: 20px; padding: 1px 5px; margin: 0 1px;
  border: 1px solid var(--n-line); border-bottom-width: 2px; border-radius: 5px;
  background: var(--n-card-2); color: var(--n-ink); font: 600 11px/1.4 var(--n-f-text); text-align: center;
}

/* Gruppenköpfe */
.vr-block { margin-top: 14px; }
.vr-gkopf {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 32px; padding: 0 2px 0 10px; margin-bottom: 2px;
  font: 600 12.5px/1 var(--n-f-text); color: var(--n-ink-2);
}
.vr-gkopf .vr-gname { display: inline-flex; align-items: center; gap: 6px; }
.vr-gkopf .vr-n { font-weight: 500; color: var(--n-ink-2); font-variant-numeric: tabular-nums; }
.vr-gkopf .vr-gk { display: flex; gap: 2px; }
.vr-fav-kopf .vr-gname { color: var(--n-ink); }
.vr-fav-kopf .vr-gname svg { color: var(--h-gelb); }

/* Listen und Zeilen */
.vr-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.vr-zeile {
  display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 2px 0 0;
  border: 1.5px solid transparent; border-radius: 12px; background: var(--n-card);
}
.vr-zeile:hover, .vr-zeile.vr-aktiv { background: var(--n-card-2); }
.vr-zeile.vr-auf, .vr-zeile.vr-zieht {
  border-style: dashed; border-color: var(--n-acc); background: var(--n-acc-soft);
  box-shadow: 0 10px 24px -14px rgba(15, 23, 42, .55);
}
.vr-zeile.vr-zieht { cursor: grabbing; }
.vr-griff {
  flex: none; width: 30px; height: 40px; display: grid; place-items: center;
  border: none; background: none; color: var(--n-ink-3); border-radius: 9px;
  cursor: grab; touch-action: none;
}
.vr-griff:hover { color: var(--n-ink); }
.vr-zeile.vr-auf .vr-griff { color: var(--n-acc-text); }
.vr-ic { flex: none; display: grid; place-items: center; color: var(--n-ink-2); width: 22px; }
.vr-ic svg { width: 18px; height: 18px; }
.vr-name {
  flex: 1 1 auto; min-width: 0; margin-left: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 14.5px/1.2 var(--n-f-text); color: var(--n-ink);
}
.vr-name .vr-ext { color: var(--n-ink-3); font-size: 12px; margin-left: 4px; }
.vr-k {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  border: none; border-radius: 8px; background: none; color: var(--n-ink-2); cursor: pointer;
}
.vr-k:hover { background: var(--n-line-soft); color: var(--n-ink); }
.vr-k:disabled, .vr-k[aria-disabled="true"] { opacity: .35; cursor: default; }
.vr-k:disabled:hover, .vr-k[aria-disabled="true"]:hover { background: none; }
.vr-stern[aria-pressed="true"] { color: var(--h-gelb); }
.vr-stern[aria-pressed="true"] svg { fill: currentColor; }
.vr-ein {
  display: none; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px;
  border: 1px solid var(--n-line); border-radius: 9px; background: var(--n-card); color: var(--n-ink);
  font: 600 12.5px/1 var(--n-f-text); cursor: pointer; white-space: nowrap;
}
.vr-ein:hover { background: var(--n-card-2); }
.vr-liste[data-liste="ausgeblendet"] .vr-k { display: none; }
.vr-liste[data-liste="ausgeblendet"] .vr-ein { display: inline-flex; }
.vr-liste[data-liste="ausgeblendet"] .vr-name { color: var(--n-ink-2); }
.vr-liste[data-liste="favoriten"] .vr-stern { display: grid; }

.vr-leer {
  display: flex; align-items: center; min-height: 44px; padding: 8px 14px;
  border: 1.5px dashed var(--n-line); border-radius: 12px;
  font-size: 13px; line-height: 1.4; color: var(--n-ink-2);
}
.vr-leer[hidden] { display: none; }

.vr-fuss { margin: 18px 0 0; padding: 12px 0 14px; border-top: 1px solid var(--n-line-soft); }
.vr-reset {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; margin-left: -10px;
  border: none; border-radius: 10px; background: none; color: var(--n-ink-2);
  font: 500 13.5px/1 var(--n-f-text); cursor: pointer;
}
.vr-reset:hover { background: var(--n-card-2); color: var(--n-ink); }
.vr-status {
  position: sticky; bottom: 0; z-index: 3; margin: 0 -14px; padding: 10px 14px;
  background: var(--n-card); border-top: 1px solid var(--n-line-soft);
  font-size: 13px; line-height: 1.4; color: var(--n-ink); min-height: 40px; box-sizing: border-box;
}
.vr-status:empty { display: none; }

/* Fokus: gut sichtbarer Ring in Markenfarbe + dunkler Innenrand (3:1 auf hell und dunkel) */
.vr-panel :focus-visible, .vr-anpassen:focus-visible, .vr-dlg :focus-visible {
  outline: 2px solid var(--n-acc-text); outline-offset: 2px; box-shadow: 0 0 0 4px var(--n-acc-soft);
}

/* Ja/Nein-Abfrage */
.vr-dlg-hg { position: fixed; inset: 0; z-index: 2400; background: rgba(15, 23, 42, .5); display: grid; place-items: center; padding: 16px; }
.vr-dlg {
  width: min(440px, 100%); background: var(--n-card); color: var(--n-ink); border-radius: 16px;
  border: 1px solid var(--n-line-soft); padding: 22px 22px 18px; font-family: var(--n-f-text);
  box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .55);
}
.vr-dlg h3 { font: 700 18px/1.25 var(--n-f-head); margin: 0 0 8px; }
.vr-dlg p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--n-ink-2); }
.vr-dlg-k { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* Handy „Mehr“-Blatt: Favoriten oben, ausgeblendete Bereiche unten zum Aufklappen */
.vr-blatt-aus { margin-top: 8px; border-top: 1px solid var(--n-line-soft); padding-top: 4px; }
.vr-blatt-aus > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 4px; color: var(--n-ink-2); font-size: 12.5px; font-weight: 600; }
.vr-blatt-aus > summary::-webkit-details-marker { display: none; }
.vr-blatt-aus > summary::after { content: "▸"; font-size: 12px; }
.vr-blatt-aus[open] > summary::after { transform: rotate(90deg); }

@media (prefers-reduced-motion: no-preference) {
  .vr-zeile { transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
}

/* Kontrast dunkle Gruppentitel (3,75:1 → 6,96:1, WCAG AA) */
html[data-design="neu"][data-vc-theme="dark"] .nav-group-title { color: var(--n-ink-2); }
html.vr-edit #app-version-badge { display: none !important; }   /* deckte im Bearbeitungsmodus die Statuszeile ab */

/* Zeitleiste: „Jetzt“-Linie im dunklen Modus weiß statt schwarz (Chef 06.10.2026) – Inline-Stil aus app.js renderCurrentTimeLine */
html[data-design="neu"][data-vc-theme="dark"] #timeline-current-time-marker { background: #F8FAFC !important; box-shadow: 0 0 6px rgba(248,250,252,.35) !important; }
html[data-design="neu"][data-vc-theme="dark"] #timeline-current-time-marker > div { background: #F8FAFC !important; color: #0F172A !important; }

/* Fenster (Rechnungs-Editor u. a.) im dunklen Modus: Inhalt bleibt hell, also auch dunkle Schrift – vorher erbten
   Überschrift und Hinweise die weiße Schrift und waren unsichtbar (Chef 06.10.2026). Buchungsfenster ist eigens dunkel. */
html[data-design="neu"][data-vc-theme="dark"] [id^="modal-"]:not(#modal-booking-details) { color: #0F172A; }
html[data-design="neu"][data-vc-theme="dark"] [id^="modal-"]:not(#modal-booking-details) .modal-header h3 { color: #0F172A; }
/* „Abbrechen“ trägt zusätzlich btn-close-modal (fürs Schließen) – nicht dessen 1,5rem und fehlenden Hintergrund übernehmen */
.btn.btn-secondary.btn-close-modal { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); font-size: 14px; padding: 10px 20px; border-radius: var(--radius-sm); }

/* ── Knöpfe im Buchungsfenster besser erkennbar (Chef 07.10.2026): eigener Grund + kräftiger Rand ── */
#modal-booking-details .vz-k:not(.haupt):not(.vc-rot-rand) { border: 1.5px solid #94A3B8 !important; background: #F8FAFC !important; box-shadow: 0 1px 2px rgba(15,23,42,.10) !important; }
#modal-booking-details .vz-k:not(.haupt):not(.vc-rot-rand):hover { background: #E2E8F0 !important; border-color: #64748B !important; }
#modal-booking-details .vz-k.ruhig:not(.rot) { color: var(--n-ink) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vz-k:not(.haupt):not(.vc-rot-rand) { background: #1E293B !important; border-color: #64748B !important; color: #F8FAFC !important; box-shadow: none !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vz-k:not(.haupt):not(.vc-rot-rand):hover { background: #334155 !important; border-color: #94A3B8 !important; }

/* ═══ Buchungs-Details einheitlich wie „Dokumente“ Variante B – Paket 1: Check-in + Miete (Baris 08.10.2026) ═══
   Nur neues Design. Bausteine .vb-* (vc-neu.js vbMieteBauen/vbCheckinBauen), Farben aus den --vd-*-Tokens von Variante B.
   Karte je Abschnitt mit Kopfleiste, Zeilen mit Linie, Knöpfe: Limette (Hauptknopf) / Rand / nur Text. Alle Texte ≥ 4,5:1. */
html[data-design="neu"] #modal-booking-details { --vb-feld: #FFFFFF; --vb-feld-rand: #7C8799; --vb-name: #64748B; --vb-lila: #4F46E5;
  --vb-ok-bg: #F0FDF4; --vb-ok-rand: #86EFAC; --vb-warten-bg: #FFFBEB; --vb-warten-rand: #FCD34D;
  --vb-alarm-kopf: #FEF2F2; --vb-alarm-rand: #FCA5A5; --vb-alarm-ink: #B91C1C; --vb-warn-kopf: #FFFBEB; --vb-warn-rand: #FCD34D; --vb-warn-ink: #92400E; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details { --vb-feld: #1E2430; --vb-feld-rand: #7A8597; --vb-name: #A3AEBE; --vb-lila: #A5B4FC;
  --vb-ok-bg: rgba(74,222,128,.12); --vb-ok-rand: rgba(74,222,128,.40); --vb-warten-bg: rgba(251,191,36,.12); --vb-warten-rand: rgba(251,191,36,.40);
  --vb-alarm-kopf: rgba(248,113,113,.14); --vb-alarm-rand: rgba(248,113,113,.45); --vb-alarm-ink: #FCA5A5; --vb-warn-kopf: rgba(251,191,36,.12); --vb-warn-rand: rgba(251,191,36,.42); --vb-warn-ink: #FCD34D; }
/* Grund wie in „Dokumente“: hell eine graue Fläche, darauf weiße Karten; dunkel Karten #2A303B auf #0F172A */
html[data-design="neu"] #modal-booking-details[data-reiter="details"] .booking-details-grid,
html[data-design="neu"] #modal-booking-details[data-reiter="checkin"] .booking-details-grid { background: var(--vd-grund); border-radius: 16px; padding: 12px !important; }
/* Karte + Kopfleiste */
html[data-design="neu"] #modal-booking-details .vb-karte, html[data-design="neu"] #modal-booking-details .details-section-card.vb-karte,
html[data-design="neu"] #modal-booking-details .details-section-card.vb-karte:hover { background: var(--vd-karte) !important; border: 1px solid var(--vd-rand) !important; border-radius: 14px !important;
  padding: 0 !important; box-shadow: none !important; color: var(--n-ink); min-width: 0; transform: none; }
html[data-design="neu"] #modal-booking-details .vb-kopf { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 !important; padding: 11px 16px !important;
  background: var(--vd-kopf) !important; border: none !important; border-radius: 13px 13px 0 0; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-titel { margin: 0 !important; padding: 0 !important; border: none !important; display: block;
  font: 700 15px/1.2 var(--n-f-head) !important; color: var(--n-ink) !important; text-transform: none !important; letter-spacing: 0 !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-titel i { display: none; }
html[data-design="neu"] #modal-booking-details .vb-kopf > .vz-k { margin-left: auto; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-liste { display: block !important; gap: 0; border: none !important; border-radius: 0 !important; background: transparent !important; overflow: visible; column-count: auto !important; }
/* Zeilen */
html[data-design="neu"] #modal-booking-details .vb-karte .vb-zeile { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px !important;
  padding: 13px 16px !important; margin: 0 !important; border: none !important; border-top: 1px solid var(--vd-linie) !important; border-radius: 0 !important; background: transparent !important;
  font-size: 14px; color: var(--n-ink) !important; flex-direction: row !important; break-inside: avoid; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-zeile:hover { background: transparent !important; padding-left: 16px !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-zeile[style*="display: none"], html[data-design="neu"] #modal-booking-details .vb-karte .vb-zeile[style*="display:none"],
html[data-design="neu"] #modal-booking-details .vb-karte .vb-zeile.hidden { display: none !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-zeile.vb-einspaltig { grid-template-columns: minmax(0, 1fr); }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-voll { grid-column: 1 / -1; min-width: 0; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-links { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-links-reihe { flex-direction: column !important; gap: 2px !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-name { display: block; min-width: 0 !important; font: 500 12.5px/1.3 var(--n-f-text) !important; color: var(--vb-name) !important;
  text-transform: none !important; letter-spacing: 0 !important; padding: 0 !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-name-fett, html[data-design="neu"] #modal-booking-details .vb-karte .vb-reihe .billing-row-label {
  display: block; font: 600 14.5px/1.3 var(--n-f-text) !important; color: var(--n-ink) !important; text-transform: none !important; letter-spacing: 0 !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-wert { display: block !important; flex: none !important; min-height: 0 !important; padding: 0 !important; border: none !important;
  background: none !important; font: 600 14.5px/1.4 var(--n-f-text) !important; color: var(--n-ink) !important; overflow-wrap: anywhere; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-wert i { display: none; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-zeile span:not([style*="color"]):not(.vb-name):not(.vb-zusatz):not(.vd-sr) { color: inherit; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-zusatz, html[data-design="neu"] #modal-booking-details .vb-karte .vb-zusatz-zeile,
html[data-design="neu"] #modal-booking-details .vb-karte .vb-gesendet { margin: 0 !important; padding: 0 !important; border: none !important; background: none !important;
  font: 500 13px/1.45 var(--n-f-text) !important; color: var(--vd-grau) !important; text-align: left !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-zusatz[hidden] { display: none !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-zusatz-zeile:not([style*="none"]) { display: block !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-zusatz-zeile[style*="none"] { display: none !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-zusatz-zeile > .billing-row-left { display: none !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-zusatz-zeile > .billing-row-right { display: block !important; padding: 0 !important; text-align: left !important; }
html[data-design="neu"] #modal-booking-details .vb-karte #det-checkin-sent-info-text { display: none !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-knoepfe { display: flex !important; flex-wrap: wrap; justify-content: flex-end !important; align-items: center; gap: 8px !important; min-width: 0; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-knoepfe:empty { display: none !important; }
/* Knöpfe: Rand (Standard) */
html[data-design="neu"] #modal-booking-details .vb-karte .vz-k:not(.haupt):not(.vc-rot-rand):not(.vb-text):not(.vd-m):not(.ruhig) { min-height: 36px; padding: 0 14px !important; border-radius: 10px !important;
  background: #F8FAFC !important; border: 1.5px solid #94A3B8 !important; color: #0F172A !important; font: 600 13.5px/1.1 var(--n-f-text) !important; box-shadow: none !important; text-decoration: none; }
html[data-design="neu"] #modal-booking-details .vb-karte .vz-k:not(.haupt):not(.vc-rot-rand):not(.vb-text):not(.vd-m):not(.ruhig):hover { background: #E2E8F0 !important; border-color: #64748B !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-karte .vz-k:not(.haupt):not(.vc-rot-rand):not(.vb-text):not(.vd-m):not(.ruhig) { background: #353C49 !important; border-color: #7A8597 !important; color: #F8FAFC !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-karte .vz-k:not(.haupt):not(.vc-rot-rand):not(.vb-text):not(.vd-m):not(.ruhig):hover,
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-karte .vz-k.vd-mehr-k[aria-expanded="true"]:not(.haupt) { background: #424A59 !important; border-color: #94A3B8 !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vz-k.vd-mehr-k[aria-expanded="true"]:not(.haupt) { background: #E2E8F0 !important; border-color: #64748B !important; }
/* Hauptknopf Limette – auch dort, wo .btn-secondary (dunkel) den Grund überschrieb: das war der „unlesbare“ Knopf „Von Hand bestätigen“ */
html[data-design="neu"] #modal-booking-details .vz-k.haupt.haupt { background: var(--n-acc) !important; border: 1.5px solid var(--n-acc) !important; color: #0F172A !important; }
/* Symbol-Knöpfe neben „Zeitraum ändern“ (Abholung verschieben, Verlängerung senden) */
html[data-design="neu"] #modal-booking-details .vb-karte .vz-k.vb-sym:not(.haupt):not(.vc-rot-rand):not(.vb-text):not(.vd-m):not(.ruhig) { width: 36px; min-width: 36px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; }
html[data-design="neu"] #modal-booking-details .vb-karte .vz-k.vb-sym i { display: inline-block !important; font-size: 15px; margin: 0 !important; color: inherit; }   /* .vd-zeile/.vm-karte .vz-k i blenden Symbole sonst aus */
@media (max-width: 860px) { html[data-design="neu"] #modal-booking-details .vb-karte .vz-k.vb-sym:not(.haupt):not(.vc-rot-rand):not(.vb-text):not(.vd-m):not(.ruhig) { width: 44px; min-width: 44px; } }
html[data-design="neu"] #modal-booking-details .vb-karte .vz-k.haupt { min-height: 36px; padding: 0 14px !important; border-radius: 10px !important; font: 700 13.5px/1.1 var(--n-f-text) !important; }
/* nur Text */
html[data-design="neu"] #modal-booking-details .vb-karte .vz-k.vb-text.vb-text, html[data-design="neu"] #modal-booking-details .vb-karte a.vz-k.vb-text,
html[data-design="neu"] #modal-booking-details .vb-karte .vz-k.ruhig.ruhig:not(.vd-m) { min-height: 36px; padding: 0 8px !important;
  background: transparent !important; border: 1.5px solid transparent !important; box-shadow: none !important; color: var(--n-ink-2) !important; font: 500 13.5px/1.1 var(--n-f-text) !important;
  text-decoration: underline; text-decoration-color: var(--vd-knopf-rand); text-underline-offset: 3px; }
html[data-design="neu"] #modal-booking-details .vb-karte .vz-k.vb-text.vb-text:hover, html[data-design="neu"] #modal-booking-details .vb-karte .vz-k.ruhig.ruhig:not(.vd-m):hover { color: var(--n-ink) !important; text-decoration-color: currentColor; }
html[data-design="neu"] #modal-booking-details .vb-karte .vz-k.vb-text.rot.rot, html[data-design="neu"] #modal-booking-details .vb-karte .vz-k.ruhig.ruhig.rot:not(.vd-m) { color: var(--h-rot) !important; text-decoration-color: currentColor; }
html[data-design="neu"] #modal-booking-details .vb-karte .vz-k.vc-rot-rand { min-height: 36px; padding: 0 14px !important; background: transparent !important; border: 1.5px solid var(--h-rot) !important; color: var(--h-rot) !important; font: 600 13.5px/1.1 var(--n-f-text) !important; }
/* gesperrt: lesbar als Hinweis, nicht als „Loch“ */
html[data-design="neu"] #modal-booking-details .vb-karte .vz-k:disabled { opacity: 1 !important; background: transparent !important; border: 1.5px dashed var(--vd-knopf-rand) !important; color: var(--vd-grau) !important; cursor: not-allowed; }
html[data-design="neu"] #modal-booking-details .vb-karte .vz-k:focus-visible { outline: 2px solid var(--vd-fokus) !important; outline-offset: 2px; }
html[data-design="neu"] #modal-booking-details .vb-karte .vz-k i { display: none; }
/* Menü „Mehr“ in .vb-Karten (Aussehen wie in „Dokumente“) */
html[data-design="neu"] #modal-booking-details .vb-karte .vd-mehr-liste > .vz-k.vd-m.vd-m { display: block; width: 100%; height: auto; min-height: 40px; padding: 9px 12px !important; border: none !important;
  border-radius: 8px !important; background: transparent !important; box-shadow: none !important; color: var(--n-ink) !important; font: 500 13.5px/1.3 var(--n-f-text) !important;
  text-align: left; text-decoration: none !important; white-space: normal; }
html[data-design="neu"] #modal-booking-details .vb-karte .vd-mehr-liste > .vz-k.vd-m.vd-m:hover { background: var(--vd-menue-hover) !important; }
/* Eingabefelder: hell weiß mit Rand ≥ 3:1, dunkel eigene Fläche statt hellem Kasten */
html[data-design="neu"] #modal-booking-details .vb-karte.vb-karte select, html[data-design="neu"] #modal-booking-details .vb-karte.vb-karte input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.rh-input),
html[data-design="neu"] #modal-booking-details .vb-karte.vb-karte textarea {
  min-height: 38px; padding: 0 10px !important; border: 1px solid var(--vb-feld-rand) !important; border-radius: 10px !important; background: var(--vb-feld) !important;
  color: var(--n-ink) !important; -webkit-text-fill-color: var(--n-ink); font: 500 13.5px var(--n-f-text) !important; max-width: 100%; box-sizing: border-box; }
html[data-design="neu"] #modal-booking-details .vb-karte input[type="checkbox"] { width: 18px !important; height: 18px !important; accent-color: #65A30D; flex: none; }
/* Lesbare Farben für feste Inline-Farben aus app.js (hell und dunkel) */
html[data-design="neu"] #modal-booking-details .vb-karte [style*="color:#10b981" i], html[data-design="neu"] #modal-booking-details .vb-karte [style*="color: #10b981" i],
html[data-design="neu"] #modal-booking-details .vb-karte [style*="color:#16a34a" i], html[data-design="neu"] #modal-booking-details .vb-karte [style*="color:#15803d" i],
html[data-design="neu"] #modal-booking-details .vb-karte [style*="color: rgb(16, 185, 129)"] { color: var(--vd-ok) !important; }
html[data-design="neu"] #modal-booking-details .vb-karte [style*="color:#f59e0b" i], html[data-design="neu"] #modal-booking-details .vb-karte [style*="color: #f59e0b" i],
html[data-design="neu"] #modal-booking-details .vb-karte [style*="color:#b45309" i], html[data-design="neu"] #modal-booking-details .vb-karte [style*="color:#d97706" i],
html[data-design="neu"] #modal-booking-details .vb-karte [style*="color:#92400e" i], html[data-design="neu"] #modal-booking-details .vb-karte [style*="color: rgb(245, 158, 11)"] { color: var(--vd-warten) !important; }
html[data-design="neu"] #modal-booking-details .vb-karte [style*="color:#ff4757" i], html[data-design="neu"] #modal-booking-details .vb-karte [style*="color:#ef4444" i],
html[data-design="neu"] #modal-booking-details .vb-karte [style*="color:#dc2626" i] { color: var(--h-rot) !important; }
html[data-design="neu"] #modal-booking-details .vb-karte [style*="color:#2563eb" i], html[data-design="neu"] #modal-booking-details .vb-karte [style*="color: var(--accent-blue)" i] { color: var(--vd-info) !important; }
html[data-design="neu"] #modal-booking-details .vb-karte [style*="color:#6366f1" i] { color: var(--vb-lila) !important; }
html[data-design="neu"] #modal-booking-details .vb-karte [style*="color:#64748b" i], html[data-design="neu"] #modal-booking-details .vb-karte [style*="color:#94a3b8" i],
html[data-design="neu"] #modal-booking-details .vb-karte [style*="color:#777" i] { color: var(--vd-grau) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-karte [style*="color:#1e3a8a" i], html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-karte [style*="color:#1e40af" i] { color: #BFDBFE !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-karte [style*="color:#14532d" i] { color: #BBF7D0 !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-karte [style*="color:#7c2d12" i] { color: #FED7AA !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-karte [style*="color:#3730a3" i] { color: #C7D2FE !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-karte [style*="color:#475569" i], html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-karte [style*="color:#334155" i] { color: var(--n-ink-2) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-karte [style*="background:#eef2ff" i] { background: rgba(129,140,248,.12) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-karte [style*="background:#e2e8f0" i] { background: #353C49 !important; color: #F8FAFC !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-karte [style*="solid #c7d2fe" i], html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-karte [style*="solid #bfdbfe" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-karte [style*="solid #bbf7d0" i], html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-karte [style*="solid #fde68a" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-karte [style*="solid #fdba74" i],
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-karte [style*="dashed #fdba74" i] { border-color: var(--vd-rand) !important; }
/* Alters-Hinweis: Rahmen wie die übrigen gelben Hinweise */
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details #det-age-warn { border-color: var(--h-gelb-rand) !important; }
/* dunkel: Zeilen-Hover war hell (#f1f5f9 aus index.css) – das war der „weißliche Fremdkörper“ bei „Fahrzeug“ */
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .customer-info-row:hover { background: transparent !important; }

/* Miete: Fahrzeug und Zeitraum */
html[data-design="neu"] #modal-booking-details .vb-karte .vb-auswahl-fz:not([style*="none"]) { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px !important; padding: 4px 0 0 !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-auswahl-fz select { flex: 1 1 220px; max-width: 360px !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-haken { flex-direction: row !important; flex-wrap: wrap; gap: 4px 20px !important; padding: 4px 0 0 !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-haken label { min-height: 32px; font: 500 14px/1.3 var(--n-f-text) !important; color: var(--n-ink) !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-haken label > span { color: var(--n-ink) !important; background: none !important; border: none !important; padding: 0 !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-zeitraum-wert { display: block; padding: 0 !important; margin: 0 !important; background: none !important; border: none !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-zeitraum-wert[style*="none"] { display: none !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-zeitraum-wert > i { display: none; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-zeitraum-wert .bk-tl-main, html[data-design="neu"] #modal-booking-details .vb-karte .vb-zeitraum-wert .bk-tl-sub {
  display: block; font: 600 14.5px/1.45 var(--n-f-text) !important; color: var(--n-ink) !important; margin: 0; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-dauer { display: block !important; padding: 0 !important; margin: 2px 0 0 !important; border: none !important; background: none !important;
  font: 500 13px/1.45 var(--n-f-text) !important; color: var(--vd-grau) !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-dauer strong { display: inline !important; min-width: 0 !important; font: inherit !important; color: inherit !important; text-transform: none !important; letter-spacing: 0 !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-dauer > span { display: inline !important; min-height: 0 !important; padding: 0 !important; border: none !important; background: none !important; color: var(--n-ink-2) !important; font-weight: 600 !important; }
html[data-design="neu"] #modal-booking-details .vb-karte #det-booking-option > div, html[data-design="neu"] #modal-booking-details .vb-karte #extension-status-box > div { border-radius: 10px !important; }
html[data-design="neu"] #modal-booking-details .vb-karte #extension-offer-form:not([style*="none"]), html[data-design="neu"] #modal-booking-details .vb-karte #rental-dates-edit:not([style*="none"]) {
  margin-top: 4px !important; padding: 12px !important; border: 1px solid var(--vd-linie) !important; border-radius: 10px !important; background: var(--vd-kopf) !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-verl .bk-tl-label { font: 500 12.5px/1.3 var(--n-f-text) !important; color: var(--vb-name) !important; text-transform: none !important; letter-spacing: 0 !important; padding: 0 !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-verl .bk-tl-card { background: transparent !important; border: 1px solid var(--vd-linie) !important; border-radius: 10px !important; padding: 9px 12px !important; margin-top: 6px; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-verl .bk-tl-card > i { display: none; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-verl .bk-tl-main { font: 600 14px/1.4 var(--n-f-text) !important; color: var(--n-ink) !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-verl .bk-tl-sub { font: 500 12.5px/1.4 var(--n-f-text) !important; color: var(--vd-grau) !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-hinweis:not([style*="none"]) { margin: 0 16px 12px !important; border-radius: 10px !important; }
html[data-design="neu"] #modal-booking-details .vb-karte #det-included-km-edit:not([style*="none"]) { display: inline-flex !important; flex-wrap: wrap; align-items: center; gap: 8px !important; margin: 0 !important; }
html[data-design="neu"] #modal-booking-details .vb-karte #det-included-km-edit input { width: 100px !important; }
html[data-design="neu"] #modal-booking-details .vb-karte #det-included-km-edit > span { color: var(--vd-grau) !important; }
/* Miete: Fahrzeugzustand (Bezeichnung links, Wert rechts) */
html[data-design="neu"] #modal-booking-details .vb-karte .vb-werte > .billing-row:not(.vb-zeile) { display: flex !important; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px !important; margin: 0 !important; border: none !important; border-top: 1px solid var(--vd-linie) !important; border-radius: 0 !important; background: transparent !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-werte > .billing-row[style*="none"] { display: none !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-werte .billing-row-left > i { display: none; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-werte .billing-row-label { font: 500 14px/1.35 var(--n-f-text) !important; color: var(--n-ink-2) !important; text-transform: none !important; letter-spacing: 0 !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-werte .billing-row-right { font: 600 14.5px/1.3 var(--n-f-text); color: var(--n-ink); text-align: right; white-space: nowrap; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-werte .billing-row-right > span:not([id]) { color: var(--n-ink-2) !important; font-weight: 500; margin-left: 4px !important; font-size: 13px !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-bearbeiten:not([style*="none"]) { margin: 0 !important; padding: 14px 16px !important; border: none !important; border-top: 1px solid var(--vd-linie) !important;
  border-radius: 0 0 13px 13px !important; background: var(--vd-kopf) !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-bearbeiten label { color: var(--n-ink-2) !important; font: 500 13.5px/1.3 var(--n-f-text) !important; }

/* Check-in */
html[data-design="neu"] #modal-booking-details .details-section-card.vc-ci.vb-huelle { background: transparent !important; border: none !important; padding: 0 !important; display: flex; flex-direction: column; gap: 14px; }
html[data-design="neu"] #modal-booking-details .vc-ci.vb-huelle > .vb-karte, html[data-design="neu"] #modal-booking-details .vc-ci.vb-huelle > #det-identity-failed-section { margin: 0 !important; }
html[data-design="neu"] #modal-booking-details .vc-ci.vb-huelle > .vb-karte[hidden] { display: none !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-reihe > .billing-row-left { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-name-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
html[data-design="neu"] #modal-booking-details .vb-karte #det-checkin-status { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px !important; border-radius: 999px !important;
  font: 600 12.5px/1 var(--n-f-text) !important; border: 1px solid var(--vd-rand) !important; background: transparent !important; color: var(--n-ink) !important; }
html[data-design="neu"] #modal-booking-details .vb-karte #det-checkin-status[style*="rgb(16, 185, 129)"] { color: var(--vd-ok) !important; background: var(--vb-ok-bg) !important; border-color: var(--vb-ok-rand) !important; }
html[data-design="neu"] #modal-booking-details .vb-karte #det-checkin-status[style*="rgb(245, 158, 11)"] { color: var(--vd-warten) !important; background: var(--vb-warten-bg) !important; border-color: var(--vb-warten-rand) !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-verlauf:not(.hidden) { display: block !important; margin: 0 !important; padding: 12px 16px !important; border: none !important;
  border-top: 1px solid var(--vd-linie) !important; background: var(--vd-kopf) !important; color: var(--n-ink-2) !important; font: 500 13px/1.7 var(--n-f-text) !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-verlauf.hidden { display: none !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-reihe select { min-width: 260px; }
/* Führerschein-Prüfung: rote (bzw. bei „wartet“ gelbe) Kopfleiste, Inhalt auf normaler Karte */
html[data-design="neu"] #modal-booking-details #det-identity-failed-section.vb-karte { border: 1px solid var(--vb-alarm-rand) !important; padding: 0 !important; }
html[data-design="neu"] #modal-booking-details #det-identity-failed-section .vb-kopf { background: var(--vb-alarm-kopf) !important; color: var(--vb-alarm-ink) !important; font: 700 15px/1.3 var(--n-f-head) !important; }
html[data-design="neu"] #modal-booking-details #det-identity-failed-section[data-art="warten"] { border-color: var(--vb-warn-rand) !important; }
html[data-design="neu"] #modal-booking-details #det-identity-failed-section[data-art="warten"] .vb-kopf { background: var(--vb-warn-kopf) !important; color: var(--vb-warn-ink) !important; }
html[data-design="neu"] #modal-booking-details #det-identity-failed-section .vb-kopf i { color: inherit !important; }
html[data-design="neu"] #modal-booking-details #det-identity-failed-section .vb-rumpf { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 14px; border-top: 1px solid var(--vd-linie); }
html[data-design="neu"] #modal-booking-details #det-identity-failed-reason { margin: 0 !important; font: 500 14px/1.5 var(--n-f-text) !important; color: var(--n-ink) !important; }
html[data-design="neu"] #modal-booking-details #det-identity-photos { margin: 0 !important; font: 500 13.5px/1.4 var(--n-f-text) !important; color: var(--n-ink-2) !important; }
html[data-design="neu"] #modal-booking-details #det-identity-photos a { color: var(--vd-info) !important; text-decoration: underline; text-underline-offset: 2px; }
html[data-design="neu"] #modal-booking-details #det-identity-failed-section .vb-knoepfe-links { justify-content: flex-start !important; }
/* Von Hand */
html[data-design="neu"] #modal-booking-details .vc-ci-hand.vb-karte { margin-top: 0 !important; }
html[data-design="neu"] #modal-booking-details .vc-ci-hand.vb-karte > .vb-kopf h5 { margin: 0 !important; }
html[data-design="neu"] #modal-booking-details .vc-ci-hand .vb-zeile:not([style*="none"]) { display: grid !important; }
html[data-design="neu"] #modal-booking-details .vc-ci-hand .vb-zeile .vb-links { gap: 4px; }

@media (max-width: 860px) {
  html[data-design="neu"] #modal-booking-details[data-reiter="details"] .booking-details-grid,
  html[data-design="neu"] #modal-booking-details[data-reiter="checkin"] .booking-details-grid { padding: 8px !important; }
  html[data-design="neu"] #modal-booking-details .vb-karte .vb-zeile { grid-template-columns: minmax(0, 1fr); padding: 12px !important; }
  html[data-design="neu"] #modal-booking-details .vb-karte .vb-zeile:hover { padding-left: 12px !important; }
  html[data-design="neu"] #modal-booking-details .vb-karte .vb-knoepfe { justify-content: flex-start !important; }
  html[data-design="neu"] #modal-booking-details .vb-kopf { padding: 10px 12px !important; }
  html[data-design="neu"] #modal-booking-details .vb-karte .vb-werte > .billing-row:not(.vb-zeile) { padding: 11px 12px !important; }
  html[data-design="neu"] #modal-booking-details .vb-karte .vz-k, html[data-design="neu"] #modal-booking-details .vb-karte a.vz-k { min-height: 44px !important; white-space: normal; }
  html[data-design="neu"] #modal-booking-details .vb-karte.vb-karte select, html[data-design="neu"] #modal-booking-details .vb-karte.vb-karte input:not([type="checkbox"]):not([type="radio"]) { min-height: 44px; }
  html[data-design="neu"] #modal-booking-details .vb-karte .vb-reihe select, html[data-design="neu"] #modal-booking-details .vb-karte .vb-reihe input[type="datetime-local"] { width: 100% !important; min-width: 0; }
  html[data-design="neu"] #modal-booking-details .vb-karte .vb-reihe .billing-row-right { width: 100%; }
  html[data-design="neu"] #modal-booking-details .vb-karte .vb-haken label { min-height: 44px; }
  html[data-design="neu"] #modal-booking-details .vb-karte .vd-mehr-liste > .vz-k.vd-m.vd-m { min-height: 48px; font-size: 15px !important; }
  html[data-design="neu"] #modal-booking-details #det-identity-failed-section .vb-rumpf { padding: 12px; }
  html[data-design="neu"] #modal-booking-details .vb-karte .vb-hinweis:not([style*="none"]) { margin: 0 12px 12px !important; }
}
/* Paket 1, Feinschliff */
html[data-design="neu"] #modal-booking-details .vb-karte .vb-links-reihe { align-items: flex-start !important; }
html[data-design="neu"] #modal-booking-details .vb-karte.vb-miete .vb-zeitraum > .vb-knoepfe { justify-content: flex-start !important; padding-top: 4px; }
html[data-design="neu"] #modal-booking-details .vb-karte a.vz-k.vb-link-unter { min-height: 28px; padding: 0 !important; margin-top: 2px; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-name-zeile > .vz-k.vb-text { min-height: 28px; }
/* G-Regel „Wertkästen“ (3 IDs, !important) färbte die Mietdauer im Zusatz dunkel ein – hier mit gleich vielen IDs aufheben */
html[data-design="neu"] #modal-booking-details .vb-dauer > span#det-rental-duration:not(#vb-a):not(#vb-b) { display: inline !important; min-height: 0 !important; padding: 0 !important;
  border: none !important; background: none !important; color: var(--n-ink-2) !important; font-weight: 600 !important; }
/* „Angebot zurückziehen“ (app.js baut ihn mit festen Farben): Rand-Knopf */
html[data-design="neu"] #modal-booking-details .vb-karte #btn-extension-withdraw { min-height: 34px; padding: 0 12px !important; border-radius: 10px !important; background: var(--vd-karte) !important;
  border: 1.5px solid #94A3B8 !important; color: var(--n-ink) !important; font: 600 13px/1.1 var(--n-f-text) !important; box-shadow: none !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-karte #btn-extension-withdraw { background: #353C49 !important; border-color: #7A8597 !important; color: #F8FAFC !important; }
html[data-design="neu"] #modal-booking-details .vb-karte #btn-extension-withdraw i { display: none; }
@media (max-width: 860px) {
  html[data-design="neu"] #modal-booking-details .vb-karte a.vz-k.vb-link-unter, html[data-design="neu"] #modal-booking-details .vb-karte .vb-name-zeile > .vz-k.vb-text { min-height: 44px !important; }
  html[data-design="neu"] #modal-booking-details .vb-karte #btn-extension-withdraw { min-height: 44px; }
}
html[data-design="neu"] #modal-booking-details .vb-karte a.vz-k.vb-link-unter { margin-left: 0 !important; }
html[data-design="neu"] #modal-booking-details .vb-karte #det-booking-option, html[data-design="neu"] #modal-booking-details .vb-karte #extension-status-box { font-size: 16px; line-height: 1.45; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-knoepfe > .vz-k, html[data-design="neu"] #modal-booking-details .vb-karte .vb-knoepfe > a { margin: 0 !important; }
html[data-design="neu"] #modal-booking-details .vb-karte a.vz-k.vb-text.vb-link-unter.vb-link-unter { padding: 0 !important; margin: 2px 0 0 !important; }
@media (max-width: 860px) {
  html[data-design="neu"] #modal-booking-details .vb-karte .vb-knoepfe > .vz-k.vb-text:first-child { margin-left: -8px !important; }
}
html[data-design="neu"]:not([data-vc-theme="dark"]) #modal-booking-details .vb-karte #det-booking-option [style*="color:#64748b" i],
html[data-design="neu"]:not([data-vc-theme="dark"]) #modal-booking-details .vb-karte #extension-status-box [style*="color:#64748b" i] { color: #475569 !important; }
/* gesperrte Knöpfe in .vb-Karten: gestrichelter Rand, lesbare graue Schrift und das Wort „gesperrt“ (nicht nur blasser) */
html[data-design="neu"] #modal-booking-details .vb-karte .vz-k.vz-k.vz-k:disabled { opacity: 1 !important; filter: none !important; background: transparent !important;
  border: 1.5px dashed var(--vd-knopf-rand) !important; color: var(--vd-grau) !important; cursor: not-allowed; }
html[data-design="neu"] #modal-booking-details .vb-karte .vz-k:disabled::after { content: " – gesperrt"; font-weight: 500; }

/* ═══ Buchungs-Details einheitlich – Paket 2: Preis, Extras, Kunde, Fahrer, Zahlungen, Fotos, Chat + graue Fläche für alle Reiter (Baris 08.10.2026) ═══
   Nur Darstellung. Preis/Zahlungen: keine Beträge, keine Rechenlogik, keine Knopf-Funktion geändert – nur Karten, Kopfleisten, Linien, Knopfstufen. */
html[data-design="neu"] #modal-booking-details { --vb-grund: #F1F5F9; --vb-chat-grund: #F1F5F9; --vb-klein: #475569; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details { --vb-grund: #0F172A; --vb-chat-grund: #1F2530; --vb-klein: #A3AEBE; }
/* Grund: ganzes Fenster unter Kopf und Reitern grau (hell), Karten weiß; dunkel #0F172A, Karten #2A303B */
html[data-design="neu"] #modal-booking-details.vb-fenster { background: var(--vb-grund) !important; }
html[data-design="neu"] #modal-booking-details.vb-fenster .booking-details-grid { background: transparent !important; border-radius: 0 !important; padding: 14px 16px 18px !important; }
html[data-design="neu"] #modal-booking-details.vb-fenster .vd-karte { background: transparent !important; padding: 0 !important; border-radius: 0 !important; }
html[data-design="neu"] #modal-booking-details.vb-fenster .vz-k1 { background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; }
html[data-design="neu"] #modal-booking-details.vb-fenster .vz-k1 .billing-list { gap: 14px; }
html[data-design="neu"] #modal-booking-details.vb-fenster .vb-aussen { padding: 14px 16px 0 !important; }
html[data-design="neu"] #modal-booking-details.vb-fenster #det-rental-photos.vb-aussen { padding: 0 16px 18px !important; }
html[data-design="neu"] #modal-booking-details.vb-fenster > [data-bktab="chat"].vb-aussen { padding-bottom: 18px !important; }
html[data-design="neu"] #modal-booking-details.vb-fenster .modal-footer { background: transparent; }
/* Zeilen wie in „Dokumente“ */
html[data-design="neu"] #modal-booking-details .vb-karte .vb-zeile { padding-top: 14px !important; padding-bottom: 14px !important; }
/* Rumpf-Bereiche innerhalb einer Karte */
html[data-design="neu"] #modal-booking-details .vb-karte > .vb-rumpf { margin: 0 !important; padding: 14px 16px !important; }
/* Eingabefelder: Textfeld mit Zeilenabstand */
html[data-design="neu"] #modal-booking-details .vb-karte.vb-karte textarea { padding: 10px 12px !important; min-height: 64px; line-height: 1.45; }

/* Preis */
html[data-design="neu"] #modal-booking-details .vp-preis > .vb-kopf h4 { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
html[data-design="neu"] #modal-booking-details .vp-preis .vb-titel-text { font: 700 15px/1.2 var(--n-f-head); color: var(--n-ink); }
html[data-design="neu"] #modal-booking-details .vp-preis .vp-meta { font: 500 13px/1.2 var(--n-f-text) !important; color: var(--vb-name) !important; }
html[data-design="neu"] #modal-booking-details .vp-preis .vp-meta:empty { display: none; }
html[data-design="neu"] #modal-booking-details .vp-preis > .vb-kopf > div { gap: 8px !important; margin-left: auto; }
html[data-design="neu"] #modal-booking-details .vp-preis .vp-liste { margin: 0 !important; border: none !important; border-radius: 0 0 13px 13px !important; background: transparent !important; }
html[data-design="neu"] #modal-booking-details .vp-preis .vp-liste > .rh-field, html[data-design="neu"] #modal-booking-details .vp-preis .vp-liste > .vp-manpos {
  border-bottom: none !important; border-top: 1px solid var(--vd-linie) !important; padding: 12px 16px !important; }
html[data-design="neu"] #modal-booking-details .vp-preis .vp-liste > .rh-field[style*="order: 11"] { background: var(--vd-kopf) !important; }
html[data-design="neu"] #modal-booking-details .vp-preis .vp-liste > .rh-field:last-child { border-radius: 0 0 13px 13px; }
html[data-design="neu"] #modal-booking-details .vp-preis .vp-liste > .vp-offen { padding: 14px 16px !important; }
html[data-design="neu"] #modal-booking-details .vp-preis .vp-knoepfe { margin-top: 8px !important; }
html[data-design="neu"] #modal-booking-details .vp-preis .vp-liste > .rh-field label { font: 500 14px/1.3 var(--n-f-text) !important; color: var(--n-ink) !important; }
html[data-design="neu"] #modal-booking-details .vp-preis .vp-liste > .vp-offen[data-art="rot"] label { color: var(--h-rot) !important; font-weight: 700 !important; }

/* Extras */
html[data-design="neu"] #modal-booking-details .vb-karte .vb-extras { margin: 0 !important; gap: 0 !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-extras > div { padding: 12px 16px !important; gap: 12px; border-top: 1px solid var(--vd-linie); border-radius: 0 !important; background: transparent !important;
  font: 500 14px/1.4 var(--n-f-text) !important; color: var(--n-ink) !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-extras > div > span:last-child { color: var(--n-ink-2) !important; font: 600 14px/1.3 var(--n-f-text) !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-extras > span { display: block; padding: 12px 16px; border-top: 1px solid var(--vd-linie); color: var(--vd-grau) !important; font: 500 14px/1.4 var(--n-f-text) !important; font-style: normal !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-kmpaket { margin: 0 !important; padding: 12px 16px !important; border: none !important; border-top: 1px solid var(--vd-linie) !important; border-radius: 0 0 13px 13px !important;
  background: transparent !important; color: var(--n-ink) !important; font: 600 14px/1.3 var(--n-f-text) !important; box-sizing: border-box; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-kmpaket i { display: none; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-kmpaket #det-km-package-value { color: var(--n-ink) !important; }

/* Kunde */
html[data-design="neu"] #modal-booking-details .vb-aufklapp > summary { padding: 13px 16px !important; background: var(--vd-kopf); border-radius: 13px; border: none !important; }
html[data-design="neu"] #modal-booking-details .vb-aufklapp[open] > summary { border-radius: 13px 13px 0 0; }
html[data-design="neu"] #modal-booking-details .vb-aufklapp summary small { color: var(--vb-name) !important; }
html[data-design="neu"] #modal-booking-details .vb-aufklapp .vm-kontakt-zeilen { padding: 12px 16px 0 !important; border-top: 1px solid var(--vd-linie); }
html[data-design="neu"] #modal-booking-details .vb-aufklapp .customer-info-row > span { background: none !important; border: none !important; padding: 0 !important; min-height: 0 !important; color: var(--n-ink) !important; }
html[data-design="neu"] #modal-booking-details .vb-aufklapp .vm-kontakt-knoepfe { padding: 10px 16px 14px !important; }
html[data-design="neu"] #modal-booking-details .kunde-card.vb-karte { margin-bottom: 14px !important; }
html[data-design="neu"] #modal-booking-details .kunde-card.vb-karte > .vb-rumpf-knoepfe { margin: 0 !important; padding: 0 16px 14px !important; }
html[data-design="neu"] #modal-booking-details .kunde-card.vb-karte > .vb-rumpf-karten { margin: 0 !important; padding: 12px 16px 16px !important; border-top: 1px solid var(--vd-linie) !important; }
html[data-design="neu"] #modal-booking-details .vb-rumpf-karten > label { font: 600 14px/1.3 var(--n-f-text) !important; color: var(--n-ink) !important; }
html[data-design="neu"] #modal-booking-details .vb-rumpf-karten > label i { display: none; }
html[data-design="neu"] #modal-booking-details .vb-karte #kunde-cards-list > div, html[data-design="neu"] #modal-booking-details .vb-karte #det-cards-list > div {
  background: transparent !important; border: 1px solid var(--vd-linie) !important; border-radius: 10px !important; padding: 10px 12px !important; }
html[data-design="neu"] #modal-booking-details .vb-karte #kunde-cards-list > div button, html[data-design="neu"] #modal-booking-details .vb-karte #det-cards-list > div button {
  min-height: 32px; background: transparent !important; border: 1.5px solid var(--h-rot) !important; color: var(--h-rot) !important; border-radius: 8px !important; }
html[data-design="neu"] #modal-booking-details .vb-karte [style*="background:#16a34a" i] { background: #15803D !important; color: #FFFFFF !important; }
html[data-design="neu"] #modal-booking-details .vb-karte #kunde-cards-list > span, html[data-design="neu"] #modal-booking-details .vb-karte #det-cards-list > span { font-size: 13px !important; color: var(--vd-grau) !important; }
html[data-design="neu"] #modal-booking-details .kunde-docs > h4.vb-kopf { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 8px !important; font: 700 15px/1.2 var(--n-f-head) !important;
  color: var(--n-ink) !important; text-transform: none !important; letter-spacing: 0 !important; }
html[data-design="neu"] #modal-booking-details .kunde-docs > h4.vb-kopf > span { color: var(--vb-name) !important; font: 500 12.5px/1.3 var(--n-f-text) !important; }
html[data-design="neu"] #modal-booking-details .kunde-docs > h4.vb-kopf > .vz-k:first-of-type { margin-left: auto !important; }
html[data-design="neu"] #modal-booking-details .kunde-docs .vb-rumpf.doc-grid { padding: 14px 16px 16px !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .doc-card { background: transparent !important; border: 1px solid var(--vd-linie) !important; border-radius: 12px !important; box-shadow: none !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .doc-card-title .vz-k.vb-text { min-height: 30px; padding: 0 6px !important; font-size: 12.5px !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .doc-upload-label { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 12px !important;
  background: #F8FAFC !important; border: 1.5px solid #94A3B8 !important; border-radius: 10px !important; color: #0F172A !important; font: 600 13px/1.1 var(--n-f-text) !important; cursor: pointer; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-karte .doc-upload-label { background: #353C49 !important; border-color: #7A8597 !important; color: #F8FAFC !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .doc-upload-label i { display: none; }
html[data-design="neu"] #modal-booking-details .vb-karte .doc-placeholder { background: transparent !important; color: var(--vd-grau) !important; }

/* Fahrer */
html[data-design="neu"] #modal-booking-details .vb-karte .vb-fahrerliste { gap: 0 !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-fahrerliste > div { padding: 12px 16px !important; border-top: 1px solid var(--vd-linie); border-radius: 0 !important; background: transparent !important;
  font-size: 14px !important; color: var(--n-ink) !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-fahrerliste [style*="color:#cbd5e1" i] { color: var(--n-ink-2) !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-fahrerliste .btn-edit-icon { width: 36px; height: 36px; justify-content: center; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-karte .vb-fahrerliste .btn-edit-icon { background: #353C49 !important; border-color: #7A8597 !important; color: #F8FAFC !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-karte .vb-fahrerliste .btn-edit-icon[style*="color:#dc2626"] { color: #FCA5A5 !important; }

/* Zahlungen */
html[data-design="neu"] #modal-booking-details #vz-kaution.vb-karte > :not(.vz-ab-kopf) { margin-left: 16px !important; margin-right: 16px !important; }
html[data-design="neu"] #modal-booking-details #vz-kaution.vb-karte > .vz-feld { margin-top: 14px !important; }
html[data-design="neu"] #modal-booking-details #vz-kaution.vb-karte > :last-child { margin-bottom: 14px !important; }
html[data-design="neu"] #modal-booking-details #vz-kaution .vz-ab-kopf.vb-kopf .vz-meta { font: 600 13.5px/1.2 var(--n-f-text); color: var(--n-ink-2); }
html[data-design="neu"] #modal-booking-details #vz-karte.vb-karte > .billing-row { padding: 14px 16px 16px !important; margin: 0 !important; }
html[data-design="neu"] #modal-booking-details .vz-ab.vb-karte .vb-kopf h5 { font: 700 15px/1.2 var(--n-f-head) !important; color: var(--n-ink) !important; }
html[data-design="neu"] #modal-booking-details .vz-k2.vb-karte { margin-top: 14px !important; }
html[data-design="neu"] #modal-booking-details .vz-k2.vb-karte > h4.vb-kopf { justify-content: space-between; font: 700 15px/1.2 var(--n-f-head) !important; color: var(--n-ink) !important; text-transform: none !important; letter-spacing: 0 !important; }
html[data-design="neu"] #modal-booking-details .vz-k2.vb-karte > h4.vb-kopf i { display: none; }
html[data-design="neu"] #modal-booking-details .vz-k2.vb-karte #det-payment-log { border: none !important; border-radius: 0 !important; background: transparent !important; }
html[data-design="neu"] #modal-booking-details .vz-k2.vb-karte #det-payment-log > .billing-row { border: none !important; border-top: 1px solid var(--vd-linie) !important; border-radius: 0 !important; padding: 12px 16px !important; margin: 0 !important; background: transparent !important; }
html[data-design="neu"] #modal-booking-details .vz-k2.vb-karte #det-payment-log > .billing-row > span:only-child { font-size: 13.5px !important; color: var(--vd-grau) !important; }
html[data-design="neu"] #modal-booking-details .vz-k2.vb-karte .vz-stripe { padding: 12px 16px 14px !important; border-top: 1px solid var(--vd-linie) !important; margin: 0 !important; }
html[data-design="neu"] #modal-booking-details .vz-k2.vb-karte .vz-stripe .billing-row-label, html[data-design="neu"] #modal-booking-details .vz-k2.vb-karte .vz-stripe #det-payment { color: var(--vb-klein) !important; }
html[data-design="neu"] #modal-booking-details .vz-k2.vb-karte .vz-mark.gelb { color: var(--vd-warten); }
html[data-design="neu"] #modal-booking-details .vz-k2.vb-karte .vz-mark.ok { color: var(--vd-ok); }
html[data-design="neu"] #modal-booking-details .vz-k2.vb-karte .vz-sub { color: var(--vd-grau); }

/* Fotos */
html[data-design="neu"] #modal-booking-details .vb-karte > .vb-kopf:not(h4):not(.vz-ab-kopf) { font: 700 15px/1.2 var(--n-f-head) !important; color: var(--n-ink) !important; }
html[data-design="neu"] #modal-booking-details .vb-karte > .vb-kopf > i, html[data-design="neu"] #modal-booking-details .vb-karte > .vb-kopf > div > i { display: none; }
html[data-design="neu"] #modal-booking-details .vb-karte > .vb-rumpf.vb-zusatz { padding: 12px 16px 0 !important; font: 500 13.5px/1.45 var(--n-f-text) !important; color: var(--n-ink-2) !important; }
html[data-design="neu"] #modal-booking-details .vb-karte > .vb-rumpf.vb-knoepfe { padding: 12px 16px 16px !important; }
html[data-design="neu"] #modal-booking-details .vb-fotos .vm-fotos { margin: 14px 0 0 !important; padding: 0 0 2px !important; border: 1px solid var(--vd-rand) !important; border-radius: 14px !important; background: var(--vd-karte) !important; }
html[data-design="neu"] #modal-booking-details .vb-fotos .vm-fotos-titel { margin: 0 0 12px !important; padding: 11px 16px !important; background: var(--vd-kopf); border-radius: 13px 13px 0 0; font: 700 15px/1.2 var(--n-f-head) !important; color: var(--n-ink) !important; }
html[data-design="neu"] #modal-booking-details .vb-fotos .vm-fotos > div:not(.vm-fotos-titel) { margin: 0 16px 14px !important; }
html[data-design="neu"] #modal-booking-details .vb-fotos .vm-fotos-label { color: var(--n-ink-2) !important; font: 600 13px/1.2 var(--n-f-text) !important; letter-spacing: 0 !important; }
html[data-design="neu"] #modal-booking-details .vb-fotos .vm-foto div { color: var(--n-ink-2) !important; font-size: 12px !important; }
html[data-design="neu"] #modal-booking-details .vb-fotos .vm-foto img { border-color: var(--vd-linie) !important; }
html[data-design="neu"] #modal-booking-details .vb-fotos .vm-fotos-leer { margin-top: 14px; background: var(--vd-karte); border-color: var(--vd-rand) !important; color: var(--n-ink-2) !important; }

/* Chat */
html[data-design="neu"] #modal-booking-details .vb-chat > .vb-kopf { display: flex !important; justify-content: space-between; }
html[data-design="neu"] #modal-booking-details .vb-chat > .vb-kopf > div { font: 700 15px/1.2 var(--n-f-head) !important; color: var(--n-ink) !important; }
html[data-design="neu"] #modal-booking-details .vb-chat #bk-chat-status { color: var(--vb-name) !important; font: 500 13px var(--n-f-text) !important; }
html[data-design="neu"] #modal-booking-details .vb-karte.vb-chat > .vb-rumpf { margin: 12px 16px 0 !important; padding: 0 !important; }
html[data-design="neu"] #modal-booking-details .vb-karte.vb-chat > .vb-rumpf:last-child { margin-bottom: 14px !important; }
html[data-design="neu"] #modal-booking-details .vb-chat .vm-chat-eingabe { background: var(--vd-karte) !important; }
html[data-design="neu"] #modal-booking-details .vb-chat #bk-chat-verlauf { background: var(--vb-chat-grund) !important; border-color: var(--vd-linie) !important; border-radius: 12px !important; padding: 12px !important; }
html[data-design="neu"] #modal-booking-details .vb-chat #bk-chat-verlauf > div { color: var(--n-ink) !important; }
html[data-design="neu"] #modal-booking-details .vb-chat #bk-chat-verlauf [style*="font-size:0.72rem"], html[data-design="neu"] #modal-booking-details .vb-chat #bk-chat-verlauf [style*="font-size:0.7rem"],
html[data-design="neu"] #modal-booking-details .vb-chat #bk-chat-verlauf [style*="font-size:0.78rem"] { font-size: 12px !important; }
html[data-design="neu"] #modal-booking-details .vb-chat #bk-chat-verlauf [style*="color:#64748b" i], html[data-design="neu"] #modal-booking-details .vb-chat #bk-chat-verlauf [style*="color:#94a3b8" i] { color: var(--vb-klein) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-chat #bk-chat-verlauf [style*="background:#dcf8c6" i] { background: rgba(74,222,128,.16) !important; border-color: rgba(74,222,128,.32) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-chat #bk-chat-verlauf [style*="background:#fff;" i] { background: #353C49 !important; border-color: #4B5462 !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-chat #bk-chat-verlauf [style*="background:#dbeafe" i] { background: rgba(96,165,250,.20) !important; border-color: rgba(96,165,250,.38) !important; }
html[data-design="neu"] #modal-booking-details .vb-chat label { color: var(--n-ink-2) !important; font: 500 13.5px/1.4 var(--n-f-text) !important; }
html[data-design="neu"] #modal-booking-details .vb-chat > p.vb-rumpf { color: var(--vd-grau) !important; font: 500 12.5px/1.45 var(--n-f-text) !important; }

@media (max-width: 860px) {
  html[data-design="neu"] #modal-booking-details.vb-fenster .booking-details-grid { padding: 10px 10px 14px !important; }
  html[data-design="neu"] #modal-booking-details.vb-fenster .vb-aussen { padding: 10px 10px 0 !important; }
  html[data-design="neu"] #modal-booking-details.vb-fenster #det-rental-photos.vb-aussen { padding: 0 10px 14px !important; }
  html[data-design="neu"] #modal-booking-details .vb-karte > .vb-rumpf, html[data-design="neu"] #modal-booking-details .kunde-docs .vb-rumpf.doc-grid { padding: 12px !important; }
  html[data-design="neu"] #modal-booking-details .vb-karte .vb-extras > div, html[data-design="neu"] #modal-booking-details .vb-karte .vb-fahrerliste > div,
  html[data-design="neu"] #modal-booking-details .vp-preis .vp-liste > .rh-field, html[data-design="neu"] #modal-booking-details .vz-k2.vb-karte #det-payment-log > .billing-row { padding: 12px !important; }
  html[data-design="neu"] #modal-booking-details #vz-kaution.vb-karte > :not(.vz-ab-kopf) { margin-left: 12px !important; margin-right: 12px !important; }
  html[data-design="neu"] #modal-booking-details .vb-karte.vb-chat > .vb-rumpf { margin: 12px 12px 0 !important; }
  html[data-design="neu"] #modal-booking-details .vb-karte .doc-upload-label, html[data-design="neu"] #modal-booking-details .vb-karte .doc-card-title .vz-k.vb-text { min-height: 44px; }
  html[data-design="neu"] #modal-booking-details .vb-karte.vb-karte input.rh-input { min-height: 0 !important; }
}
/* Paket 2, Feinschliff: Karten mit fester Inline-Farbe (Fotos, Chat) – die Paket-G-Umfärbung #f8fafc → #1E293B darf die Karte nicht überdecken */
html[data-design="neu"] #modal-booking-details .vb-karte.vb-karte[style] { background: var(--vd-karte) !important; border-color: var(--vd-rand) !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .vb-knoepfe-links { justify-content: flex-start !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .doc-preview-box { background: var(--vd-kopf) !important; border: 1px dashed var(--vd-rand) !important; border-radius: 10px !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .doc-placeholder { color: var(--vb-klein) !important; }
html[data-design="neu"] #modal-booking-details .vb-karte .doc-placeholder i { opacity: .6; }
html[data-design="neu"] #modal-booking-details .vp-preis .vp-knoepfe > .vz-k.vb-text:first-child, html[data-design="neu"] #modal-booking-details .vp-preis .vp-knoepfe > .vz-k.ruhig:first-child { margin-left: -8px !important; }
html[data-design="neu"] #modal-booking-details .vb-karte #kunde-cards-list span[style*="padding:1px 7px"] { white-space: nowrap; display: inline-block; }
/* Paket 2, Kontrast- und Größenprüfung (alle Reiter): kleine Inline-Schriften aus app.js auf ≥ 12 px, rote/grüne Beschriftung auf getöntem Grund dunkler */
html[data-design="neu"] #modal-booking-details .vb-karte [style*="font-size:0.68rem" i], html[data-design="neu"] #modal-booking-details .vb-karte [style*="font-size:0.7rem" i],
html[data-design="neu"] #modal-booking-details .vb-karte [style*="font-size:0.72rem" i], html[data-design="neu"] #modal-booking-details .vb-karte [style*="font-size: 0.7rem" i],
html[data-design="neu"] #modal-booking-details .vb-karte [style*="font-size:0.75em" i], html[data-design="neu"] #modal-booking-details .vb-karte [style*="font-size:0.72em" i],
html[data-design="neu"] #modal-booking-details .vb-karte [style*="font-size:11px" i], html[data-design="neu"] #modal-booking-details .vb-karte [style*="font-size:10px" i],
html[data-design="neu"] #modal-booking-details .vb-karte .rh-note { font-size: 12px !important; }
html[data-design="neu"] #modal-booking-details .vb-aufklapp .customer-info-row strong { font-size: 13px !important; text-transform: none !important; letter-spacing: 0 !important; }
html[data-design="neu"] #modal-booking-details .vp-preis .vp-liste > .vp-offen[data-art="rot"] label, html[data-design="neu"] #modal-booking-details .vz-offen[data-art="rot"] .vz-t,
html[data-design="neu"] #modal-booking-details .vz-offen:not([data-art]) .vz-t { color: var(--vb-alarm-ink) !important; }
html[data-design="neu"] #modal-booking-details .vp-ok, html[data-design="neu"] #modal-booking-details .vz-offen[data-art="gruen"] .vz-t { color: var(--vb-ok-ink, #166534) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vp-ok, html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vz-offen[data-art="gruen"] .vz-t { color: #86EFAC !important; }
html[data-design="neu"] #modal-booking-details .vp-preis .vp-liste #det-rh-settled, html[data-design="neu"] #modal-booking-details .vp-preis .vp-liste .rh-note { color: var(--vb-klein) !important; }
html[data-design="neu"][data-vc-theme="dark"] #modal-booking-details .vb-karte [style*="color:#1d4ed8" i] { color: #93C5FD !important; }
html[data-design="neu"] #modal-booking-details .vz-k2.vb-karte #det-payment-log > .billing-row > span:only-child { color: var(--vd-grau) !important; }
html[data-design="neu"] #modal-booking-details .vz-k2.vb-karte #det-payment-log > .billing-row > .vz-mark { font-size: 12px !important; }
html[data-design="neu"] #modal-booking-details .vz-k2.vb-karte #det-payment-log > .billing-row > .vz-mark:not(.ok):not(.gelb):not(.rot) { color: var(--vb-klein) !important; }
html[data-design="neu"] #modal-booking-details .vz-link { display: inline-flex; align-items: center; min-height: 32px; padding: 0 4px; }
html[data-design="neu"] #modal-booking-details .vd-zeile #det-contract-container a { color: var(--vd-info) !important; }
html[data-design="neu"] #modal-booking-details .vd-zeile #det-invoice-container .btn { min-height: 28px; }
html[data-design="neu"]:not([data-vc-theme="dark"]) #modal-booking-details .vz-k2.vb-karte .vz-mark.ok { color: #166534 !important; }
html[data-design="neu"]:not([data-vc-theme="dark"]) #modal-booking-details .vz-k2.vb-karte .vz-mark.gelb { color: #92400E !important; }
html[data-design="neu"] #modal-booking-details .vz-k2.vb-karte { margin-top: 0 !important; }
@media (max-width: 860px) {
  html[data-design="neu"] #modal-booking-details .vz-k2.vb-karte .vz-stripe .billing-row-left { flex-basis: 100%; }
  html[data-design="neu"] #modal-booking-details .vz-k2.vb-karte .vz-stripe .billing-row-right { flex-wrap: wrap; justify-content: flex-start !important; gap: 4px 10px !important; }
}

/* Handy-Benachrichtigungen (25.10.2026): wie Meldungen – dunkle Karte, Text in Theme-Farben, Häkchen in Limette */
html[data-design="neu"] #tab-push .card-header { margin-bottom: 8px; background: transparent !important; border: 0 !important; }
html[data-design="neu"] #tab-push .card-body { background: transparent !important; color: var(--n-ink); padding: 0 !important; }
html[data-design="neu"] #tab-push .card-body > p:first-child { color: var(--n-ink-2) !important; }
html[data-design="neu"] #tab-push #push-box label span, html[data-design="neu"] #tab-push #push-box p { color: var(--n-ink); }
html[data-design="neu"] #tab-push input[type="checkbox"] { accent-color: #84CC16; }


/* ═══ Schadensvorgänge dunkel (30.10.2026, Chef) ═══
   .vc-dunkel = allgemeine Klasse: legt feste Inline-Farben aus app.js im dunklen Schema auf die Tokens um
   (gleiche Liste wie bei #modal-booking-details). Genutzt vom Reiter #tab-damages und vom Schadensfenster. */
html[data-design="neu"][data-vc-theme="dark"] #tab-damages:not(.hidden),
html[data-design="neu"][data-vc-theme="dark"] #tab-penalties:not(.hidden) {
  color-scheme: dark; background: transparent !important; padding: 0 !important; color: var(--n-ink);
  --n-card:#0F172A; --n-card-2:#1E293B; --n-line:#334155; --n-line-soft:rgba(148,163,184,.18); --n-ink:#F8FAFC; --n-ink-2:#CBD5E1; --n-ink-3:#94A3B8;
  --n-acc-text:#A3E635; --n-acc-soft:rgba(132,204,22,.14); --n-shadow:none;
  /* 06.11.2026: Warnfarben dunkel – sonst gewinnt „.tab-pane:not(.hidden)“ oben (helle Töne, dunkles Grün auf dunklem Grund) */
  --h-rot:#F87171; --h-rot-bg:rgba(248,113,113,.12); --h-rot-rand:rgba(248,113,113,.34); --h-gelb:#FBBF24; --h-gelb-bg:rgba(251,191,36,.10); --h-gelb-rand:rgba(251,191,36,.30); --h-gruen:#4ADE80; --h-gruen-bg:rgba(74,222,128,.12);
  --bg-base:#020617; --bg-surface:#0F172A; --bg-card:#0F172A; --bg-card-hover:#1E293B; --border:rgba(148,163,184,.18); --border-hover:#334155;
  --text-primary:#F8FAFC; --text-secondary:#CBD5E1; --text-muted:#94A3B8;
}
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel {
  color-scheme: dark;
  --n-ink-2:#CBD5E1; --n-ink-3:#94A3B8;
  --h-rot:#F87171; --h-rot-bg:rgba(248,113,113,.12); --h-rot-rand:rgba(248,113,113,.34);
  --h-gelb:#FBBF24; --h-gelb-bg:rgba(251,191,36,.10); --h-gelb-rand:rgba(251,191,36,.30);
  --h-gruen:#4ADE80; --h-gruen-bg:rgba(74,222,128,.12);
}
html[data-design="neu"] #tab-damages .card, html[data-design="neu"] #tab-damages .card:hover {
  background: var(--n-card) !important; border: 1px solid var(--n-line-soft) !important; border-radius: 16px !important;
  box-shadow: var(--n-shadow) !important; color: var(--n-ink); transform: none; }
html[data-design="neu"] #tab-damages .card-header { flex-wrap: wrap; gap: 10px; }
html[data-design="neu"] #tab-damages .card-header > div { flex-wrap: wrap; }
html[data-design="neu"] #tab-damages .card-header h3 { font: 600 17px/1.3 var(--n-f-head); text-transform: none; letter-spacing: 0; color: var(--n-ink); }
html[data-design="neu"] #tab-damages .form-control { background: var(--n-card-2) !important; color: var(--n-ink) !important; border: 1px solid var(--n-line) !important; border-radius: 10px !important; min-height: 36px; }
html[data-design="neu"] #tab-damages .damages-table th { background: transparent !important; color: var(--n-ink-3) !important; border-color: var(--n-line-soft) !important; font: 600 12px/1.3 var(--n-f-text) !important; text-transform: none !important; letter-spacing: 0 !important; }
html[data-design="neu"] #tab-damages .damages-table td { background: transparent !important; color: var(--n-ink) !important; border-color: var(--n-line-soft) !important; font-size: 14px; }
html[data-design="neu"] #tab-damages .damages-table tbody tr:hover td { background: var(--n-card-2) !important; }
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel .btn-secondary { background: var(--n-card-2) !important; color: var(--n-ink) !important; border-color: var(--n-line) !important; }
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel select,
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel textarea { background: var(--n-card-2) !important; color: var(--n-ink) !important; -webkit-text-fill-color: var(--n-ink); border-color: var(--n-line) !important; }
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel input[type="file"] { color: var(--n-ink-2) !important; }
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color-scheme:light" i] { color-scheme: dark !important; }
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background:#fff;" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background: #fff;" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background:#ffffff" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background: #ffffff" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background:white" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background: rgb(255, 255, 255)" i] { background: var(--n-card) !important; }
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background:#f8fafc" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background: #f8fafc" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background:#f1f5f9" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background: #f1f5f9" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background:#f9fafb" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background: rgb(248, 250, 252)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background: rgb(241, 245, 249)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background: rgb(249, 250, 251)" i] { background: var(--n-card-2) !important; }
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background:#e2e8f0" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background: rgb(226, 232, 240)" i] { background: rgba(148,163,184,.18) !important; }
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background:#fff7ed" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background:#fef3c7" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background:#fffbeb" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background: rgb(255, 247, 237)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background: rgb(254, 243, 199)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background: rgb(255, 251, 235)" i] { background: var(--h-gelb-bg) !important; }
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background:#ecfdf5" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background:#dcfce7" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background:#f0fdf4" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background: rgb(236, 253, 245)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background: rgb(220, 252, 231)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background: rgb(240, 253, 244)" i] { background: var(--h-gruen-bg) !important; }
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background:#fef2f2" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background:#fee2e2" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background: rgb(254, 242, 242)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background: rgb(254, 226, 226)" i] { background: var(--h-rot-bg) !important; }
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background:#dbeafe" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background:#eff6ff" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background: rgb(219, 234, 254)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="background: rgb(239, 246, 255)" i] { background: rgba(96,165,250,.14) !important; }
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color:#0f172a" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: #0f172a" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color:#1e293b" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color:#111827" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color:#374151" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color:#334155" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: #334155" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: rgb(15, 23, 42)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: rgb(30, 41, 59)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: rgb(17, 24, 39)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: rgb(55, 65, 81)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: rgb(51, 65, 85)" i] { color: var(--n-ink) !important; }
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color:#475569" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color:#64748b" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: #64748b" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: rgb(71, 85, 105)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: rgb(100, 116, 139)" i] { color: var(--n-ink-2) !important; }
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color:#94a3b8" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: #94a3b8" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: rgb(148, 163, 184)" i] { color: var(--n-ink-3) !important; }
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color:#1d4ed8" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color:#2563eb" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: rgb(29, 78, 216)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: rgb(37, 99, 235)" i] { color: #60A5FA !important; }
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color:#16a34a" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color:#15803d" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color:#166534" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color:#065f46" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color:#10b981" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: rgb(22, 163, 74)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: rgb(21, 128, 61)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: rgb(22, 101, 52)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: rgb(6, 95, 70)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: rgb(16, 185, 129)" i] { color: var(--h-gruen) !important; }
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color:#b45309" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color:#92400e" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color:#d97706" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: rgb(180, 83, 9)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: rgb(146, 64, 14)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: rgb(217, 119, 6)" i] { color: var(--h-gelb) !important; }
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color:#dc2626" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color:#b91c1c" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color:#991b1b" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color:#7f1d1d" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color:#ef4444" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: rgb(220, 38, 38)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: rgb(185, 28, 28)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: rgb(153, 27, 27)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: rgb(127, 29, 29)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="color: rgb(239, 68, 68)" i] { color: var(--h-rot) !important; }
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="solid #e2e8f0" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="solid #cbd5e1" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="dashed #e2e8f0" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="dashed #cbd5e1" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="solid rgb(226, 232, 240)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="solid rgb(203, 213, 225)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="dashed rgb(226, 232, 240)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="dashed rgb(203, 213, 225)" i] { border-color: var(--n-line-soft) !important; }
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="solid #fde68a" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="solid #fcd34d" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="solid rgb(253, 230, 138)" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="solid rgb(252, 211, 77)" i] { border-color: var(--h-gelb-rand) !important; }
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="solid #fecaca" i],
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="solid rgb(254, 202, 202)" i] { border-color: var(--h-rot-rand) !important; }
html[data-design="neu"][data-vc-theme="dark"] .vc-dunkel [style*="border:2px solid #fff" i] { border-color: var(--n-card) !important; }

/* ═══ Reiter „Vertragsstrafen“ im neuen Design (06.11.2026, Chef: „das ist auch das alte Design“) ═══
   Wie Schadensvorgänge: Tokens im #tab-damages-Block oben, .vc-dunkel am Reiter legt die Inline-Farben aus app.js um.
   Fenster „Bearbeiten“ (#pen-edit-overlay) und „Lenkerauskunft“ (#pen-auth-overlay) tragen ebenfalls .vc-dunkel. */
html[data-design="neu"][data-vc-theme="dark"] #tab-penalties:not(.hidden) { --border-color: #334155; --h-orange-rand: rgba(251,146,60,.38); }
html[data-design="neu"] #tab-penalties .card, html[data-design="neu"] #tab-penalties .card:hover {
  background: var(--n-card) !important; border: 1px solid var(--n-line-soft) !important; border-radius: 16px !important;
  box-shadow: var(--n-shadow) !important; color: var(--n-ink); transform: none; }
html[data-design="neu"] #tab-penalties .card-header { background: transparent !important; border-color: var(--n-line-soft) !important; }
html[data-design="neu"] #tab-penalties .card-header h3 {
  font: 600 17px/1.3 var(--n-f-head) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--n-ink) !important; }
html[data-design="neu"] #tab-penalties .card-body { background: transparent !important; color: var(--n-ink); }
html[data-design="neu"] #tab-penalties .form-group label { color: var(--n-ink) !important; }
html[data-design="neu"] #tab-penalties .form-control { border-radius: 10px !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-penalties input[type="checkbox"],
html[data-design="neu"][data-vc-theme="dark"] #tab-penalties input[type="radio"] { accent-color: #84CC16; }
/* Art-Kacheln „Behördliche Strafe“ / „Auslandsfahrt“: gewählt = Limette statt Blau */
html[data-design="neu"] #tab-penalties .pen-type-opt { border-radius: 12px !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-penalties .pen-type-opt { background: var(--n-card-2) !important; border-color: var(--n-line) !important; color: var(--n-ink); }
html[data-design="neu"][data-vc-theme="dark"] #tab-penalties .pen-type-opt:has(input:checked) { background: var(--n-acc-soft) !important; border-color: #84CC16 !important; }
/* Unterkategorien Alle / Behördliche Strafen / Ausland */
html[data-design="neu"][data-vc-theme="dark"] #tab-penalties .pen-subtab { background: var(--n-card-2); color: var(--n-ink-2); border-color: var(--n-line); }
html[data-design="neu"][data-vc-theme="dark"] #tab-penalties .pen-subtab:not(.active):hover { background: #334155; color: var(--n-ink); }
html[data-design="neu"][data-vc-theme="dark"] #tab-penalties .pen-subtab .pen-count { background: rgba(148,163,184,.18); }
html[data-design="neu"] #tab-penalties .pen-subtab.active { background: #84CC16; color: #0F172A; border-color: #84CC16; }
html[data-design="neu"] #tab-penalties .pen-subtab.active .pen-count { background: rgba(15,23,42,.16); }
/* Auslandsfahrt: oranger Rand (Kasten + Schild AUSLANDSFAHRT), graue Statusfarbe #6b7280 */
html[data-design="neu"][data-vc-theme="dark"] #tab-penalties [style*="solid #fdba74" i] { border-color: var(--h-orange-rand) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-penalties [style*="color:#6b7280" i] { color: var(--n-ink-3) !important; }
/* Fall-Karten in der Liste */
html[data-design="neu"][data-vc-theme="dark"] #penalties-list > div[style*="border-radius:12px"] { background: var(--n-card-2); border-color: var(--n-line) !important; }
/* Fenster „Bearbeiten“ und „Lenkerauskunft“: Eingabefelder und Beschriftungen dunkel */
html[data-design="neu"][data-vc-theme="dark"] #pen-edit-overlay > div, html[data-design="neu"][data-vc-theme="dark"] #pen-auth-overlay > div { border: 1px solid var(--n-line); }
html[data-design="neu"][data-vc-theme="dark"] #pen-edit-overlay label, html[data-design="neu"][data-vc-theme="dark"] #pen-auth-overlay label { color: var(--n-ink) !important; }

/* Kaution abbuchen / Manuell verifizieren / Erneute Prüfung (31.10.2026, Chef: „ich kann es nicht lesen“):
   --text-secondary bleibt im dunklen Schema dunkel (#1E293B) → Beschriftungen unlesbar. In diesen Fenstern hell setzen. */
html[data-design="neu"][data-vc-theme="dark"] .modal-box.vc-dunkel { color: var(--n-ink); --text-primary:#F8FAFC; --text-secondary:#CBD5E1; --text-muted:#94A3B8; }
html[data-design="neu"][data-vc-theme="dark"] .modal-box.vc-dunkel label, html[data-design="neu"][data-vc-theme="dark"] .modal-box.vc-dunkel h4 { color: var(--n-ink) !important; }
html[data-design="neu"][data-vc-theme="dark"] .modal-box.vc-dunkel input[type="radio"] { accent-color: #84CC16; }
html[data-design="neu"][data-vc-theme="dark"] .modal-box.vc-dunkel .btn-close-modal { color: var(--n-ink) !important; }

/* ═══ Kundenkartei im neuen Design (01.11.2026, Chef: „auch alte Design und hell“) ═══
   Liste wie Buchungen/Schadensvorgänge: Karte in Theme-Farben, dunkel keine helle Insel mehr (.vc-dunkel am Reiter
   legt die festen Inline-Farben aus app.js um). Am Handy wird jede Zeile eine Karte (Name, Kontakt, Stand-Schilder).
   Kunden-Fenster rechts ebenfalls in Theme-Farben. Nur CSS – IDs, Spaltenreihenfolge und Handler bleiben. */
html[data-design="neu"][data-vc-theme="dark"] #tab-customers:not(.hidden) {
  color-scheme: dark; background: transparent !important; padding: 0 !important; color: var(--n-ink);
  --n-card:#0F172A; --n-card-2:#1E293B; --n-line:#334155; --n-line-soft:rgba(148,163,184,.18); --n-ink:#F8FAFC; --n-ink-2:#CBD5E1; --n-ink-3:#94A3B8;
  --n-acc-text:#A3E635; --n-acc-soft:rgba(132,204,22,.14); --n-shadow:none;
  --bg-base:#020617; --bg-surface:#0F172A; --bg-card:#0F172A; --bg-card-hover:#1E293B; --border:rgba(148,163,184,.18); --border-hover:#334155;
  --text-primary:#F8FAFC; --text-secondary:#CBD5E1; --text-muted:#94A3B8;
}
html[data-design="neu"] #tab-customers > .card, html[data-design="neu"] #tab-customers > .card:hover {
  background: var(--n-card) !important; border: 1px solid var(--n-line-soft) !important; border-radius: 16px !important;
  box-shadow: var(--n-shadow) !important; color: var(--n-ink); transform: none; }
html[data-design="neu"] #tab-customers > .card > .card-header h3 { font: 700 20px/1.2 var(--n-f-head) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--n-ink) !important; }
html[data-design="neu"] #cust-count { font: 500 14px/1 var(--n-f-text) !important; color: var(--n-ink-3) !important; margin-left: 4px; }
html[data-design="neu"] #tab-customers > .card > .card-header input,
html[data-design="neu"] #tab-customers > .card > .card-header select { min-height: 40px; background: var(--n-card) !important; color: var(--n-ink) !important; border: 1px solid var(--n-line) !important; border-radius: 10px !important; font-family: var(--n-f-text) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-customers > .card > .card-header input,
html[data-design="neu"][data-vc-theme="dark"] #tab-customers > .card > .card-header select { background: var(--n-card-2) !important; }
html[data-design="neu"] #tab-customers > .card > .card-header input::placeholder { color: var(--n-ink-3); }
html[data-design="neu"] #tab-customers > .card > .card-header .btn { min-height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
html[data-design="neu"] #tab-customers .btn-secondary { background: var(--n-card) !important; color: var(--n-ink) !important; border: 1px solid var(--n-line) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-customers .btn-secondary { background: var(--n-card-2) !important; }
html[data-design="neu"] #tab-customers .btn-secondary:hover { border-color: var(--n-ink-3) !important; }
/* Tabelle (PC) */
html[data-design="neu"] #customers-table { margin-top: 0; }
html[data-design="neu"] #customers-table th { background: transparent !important; color: var(--n-ink-3) !important; border-bottom: 1px solid var(--n-line-soft) !important; font: 600 12px/1.3 var(--n-f-text) !important; text-transform: none !important; letter-spacing: 0 !important; padding: 10px 14px !important; }
html[data-design="neu"] #customers-table td { background: transparent !important; color: var(--n-ink) !important; border-bottom: 1px solid var(--n-line-soft) !important; font-size: 14px !important; padding: 11px 14px !important; }
html[data-design="neu"] #customers-table tbody tr:hover td { background: var(--n-card-2) !important; }
html[data-design="neu"] #customers-table td > div { color: var(--n-ink) !important; }
html[data-design="neu"] #customers-table td .btn-sm { min-height: 34px; min-width: 36px; padding: 0 10px !important; border-radius: 10px !important; }
html[data-design="neu"] #customers-table td .btn-danger { background: transparent !important; color: #DC2626 !important; border: 1px solid rgba(220,38,38,.38) !important; box-shadow: none !important; }
html[data-design="neu"][data-vc-theme="dark"] #customers-table td .btn-danger { color: #F87171 !important; border-color: rgba(248,113,113,.4) !important; }
/* Stand-Schilder (Führerschein, Zahlung) dunkel: getönter Grund statt heller Pille */
html[data-design="neu"][data-vc-theme="dark"] #tab-customers .cust-chip.ok   { background: rgba(74,222,128,.14); color: #86EFAC; }
html[data-design="neu"][data-vc-theme="dark"] #tab-customers .cust-chip.wait { background: rgba(251,191,36,.14); color: #FCD34D; }
html[data-design="neu"][data-vc-theme="dark"] #tab-customers .cust-chip.warn { background: rgba(251,146,60,.16); color: #FDBA74; }
html[data-design="neu"][data-vc-theme="dark"] #tab-customers .cust-chip.none { background: rgba(148,163,184,.14); color: #CBD5E1; }
html[data-design="neu"][data-vc-theme="dark"] #tab-customers .cust-verified { color: #4ADE80; }
/* Handy: Bedienleiste geordnet, jede Zeile als Karte (Spalten: 1 Kunde, 2 E-Mail, 3 Telefon, 4 FS-Nr, 5 Führerschein, 6 Zahlung, 7 Registriert, 8 Aktionen) */
@media (max-width: 860px) {
  html[data-design="neu"] #tab-customers > .card { padding: 16px 14px !important; }
  html[data-design="neu"] #tab-customers > .card > .card-header { flex-direction: column; align-items: stretch !important; gap: 12px !important; padding: 0 !important; }
  html[data-design="neu"] #tab-customers > .card > .card-body { padding: 0 !important; }
  html[data-design="neu"] #tab-customers > .card > .card-header > div { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px !important; width: 100%; }
  html[data-design="neu"] #cust-search, html[data-design="neu"] #cust-filter-license, html[data-design="neu"] #cust-filter-payment { grid-column: 1 / -1; min-width: 0 !important; width: 100%; }
  html[data-design="neu"] #tab-customers > .card > .card-header select,
  html[data-design="neu"] #tab-customers > .card > .card-header .btn { width: 100%; min-width: 0; padding-left: 10px !important; padding-right: 10px !important; }
  html[data-design="neu"] #tab-customers .table-responsive { overflow: visible !important; padding: 0 !important; }
  html[data-design="neu"] #customers-table, html[data-design="neu"] #customers-table tbody { display: block !important; width: 100%; overflow: visible !important; white-space: normal !important; }
  html[data-design="neu"] #customers-table thead { display: none; }
  html[data-design="neu"] #customers-table tr[data-email] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--n-line-soft); border-radius: 14px; background: var(--n-card); }
  html[data-design="neu"][data-vc-theme="dark"] #customers-table tr[data-email] { background: var(--n-card-2); border-color: var(--n-line); }
  html[data-design="neu"] #customers-table tr[data-email]:active { border-color: var(--n-acc); }
  html[data-design="neu"] #customers-table tr[data-email] td { display: block; padding: 0 !important; border: none !important; background: transparent !important; white-space: normal !important; min-width: 0; }
  html[data-design="neu"] #customers-table tr[data-email] td:nth-child(1) { order: 1; flex: 1 1 0; }
  html[data-design="neu"] #customers-table tr[data-email] td:nth-child(1) > div { font: 600 16px/1.3 var(--n-f-head) !important; overflow-wrap: anywhere; }
  html[data-design="neu"] #customers-table tr[data-email] td:nth-child(8) { order: 2; flex: 0 0 auto; white-space: nowrap !important; }
  html[data-design="neu"] #customers-table tr[data-email] td:nth-child(8) .btn-sm { min-height: 40px; margin: 0 0 0 4px !important; }
  html[data-design="neu"] #customers-table tbody tr[data-email]:hover td { background: transparent !important; }
  html[data-design="neu"] #customers-table tr[data-email] td:nth-child(2),
  html[data-design="neu"] #customers-table tr[data-email] td:nth-child(3) { flex: 1 1 100%; font-size: 13.5px !important; color: var(--n-ink-2) !important; overflow-wrap: anywhere; }
  html[data-design="neu"] #customers-table tr[data-email] td:nth-child(2) { order: 3; }
  html[data-design="neu"] #customers-table tr[data-email] td:nth-child(3) { order: 4; }
  html[data-design="neu"] #customers-table tr[data-email] td:nth-child(3):has(> span) { display: none; }
  html[data-design="neu"] #customers-table tr[data-email] td:nth-child(4) { display: none; }
  html[data-design="neu"] #customers-table tr[data-email] td:nth-child(5) { order: 5; margin-top: 4px; }
  html[data-design="neu"] #customers-table tr[data-email] td:nth-child(6) { order: 6; margin-top: 4px; }
  html[data-design="neu"] #customers-table tr[data-email] td:nth-child(7) { order: 7; margin: 4px 0 0 auto; font-size: 12.5px !important; color: var(--n-ink-3) !important; }
  html[data-design="neu"] #customers-table tr[data-email] td:nth-child(7)::before { content: "seit "; }
  html[data-design="neu"] #customers-table tr:not([data-email]) { display: block; }
  html[data-design="neu"] #customers-table tr:not([data-email]) td { display: block; border: none !important; color: var(--n-ink-3) !important; }
}
/* Kunden-Fenster (rechts): Theme-Farben statt fester Weißtöne */
html[data-design="neu"] #customer-panel { background: var(--n-card) !important; color: var(--n-ink); border-left: 1px solid var(--n-line-soft); }
html[data-design="neu"] #customer-panel > div:nth-child(1) { border-bottom-color: var(--n-line-soft) !important; }
html[data-design="neu"] #cp-name { font: 700 19px/1.25 var(--n-f-head) !important; color: var(--n-ink) !important; }
html[data-design="neu"] #cp-email { color: var(--n-ink-3) !important; }
html[data-design="neu"] #cp-close { color: var(--n-ink-2) !important; min-width: 40px; min-height: 40px; border-radius: 10px; }
html[data-design="neu"] #cp-close:hover { background: var(--n-card-2) !important; }
html[data-design="neu"] #customer-panel > div:nth-child(2) { background: var(--n-card) !important; border-bottom: 1px solid var(--n-line-soft) !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
html[data-design="neu"] #customer-panel > div:nth-child(2)::-webkit-scrollbar { display: none; }
html[data-design="neu"] #customer-panel .cptab { color: var(--n-ink-2); font-family: var(--n-f-text); white-space: nowrap; min-height: 44px; flex: 0 0 auto; }
html[data-design="neu"] #customer-panel .cptab:hover { color: var(--n-ink); }
html[data-design="neu"] #customer-panel .cptab.active { color: var(--n-acc-text); border-bottom-color: var(--n-acc); }
html[data-design="neu"] #customer-panel > div:nth-child(3) { background: var(--n-bg) !important; }
html[data-design="neu"] #customer-panel .cp-card { background: var(--n-card); border-color: var(--n-line-soft); border-radius: 14px; color: var(--n-ink); }
html[data-design="neu"] #customer-panel .cp-card h5 { color: var(--n-ink-2); }
html[data-design="neu"] #customer-panel .cp-field label { color: var(--n-ink-3); }
html[data-design="neu"] #customer-panel .cp-field .cp-val { background: var(--n-card); border-color: var(--n-line); color: var(--n-ink); }
html[data-design="neu"][data-vc-theme="dark"] #customer-panel .cp-field .cp-val { background: rgba(148,163,184,.06); }
html[data-design="neu"][data-vc-theme="dark"] #customer-panel .cp-field .cp-val[style*="248, 251, 255"] { background: var(--n-card-2) !important; border-color: #60A5FA !important; }
html[data-design="neu"][data-vc-theme="dark"] #customer-panel .cp-field .cp-val input { background: transparent !important; }
html[data-design="neu"] #customer-panel .cp-tl::before { background: var(--n-line); }
html[data-design="neu"] #customer-panel .cp-tl-item::before { border-color: var(--n-bg); box-shadow: 0 0 0 2px var(--n-line); }
html[data-design="neu"] #customer-panel .cp-tl-title { color: var(--n-ink); }
html[data-design="neu"] #customer-panel .cp-tl-detail { color: var(--n-ink-2); }
html[data-design="neu"] #customer-panel .cp-tl-time, html[data-design="neu"] #customer-panel .cp-tl-actor { color: var(--n-ink-3); }
html[data-design="neu"][data-vc-theme="dark"] #customer-panel a { color: #60A5FA; }
html[data-design="neu"][data-vc-theme="dark"] #customer-panel .btn-danger { background: transparent !important; color: #F87171 !important; border: 1px solid rgba(248,113,113,.4) !important; }
@media (max-width: 480px) {
  html[data-design="neu"] #customer-panel .cptab { padding: 11px 9px; font-size: 13.5px; }
  html[data-design="neu"] #customer-panel .cptab i { display: none; }
}

/* ═══ Reiter „Telematik-Geräte“ im neuen Design (09.11.2026, Chef: „das auch in neue Design und dunkel“) ═══
   Muster wie Tarife/Kunden. Nur CSS – IDs, Knöpfe und Abläufe bleiben. Feste Inline-Farben aus index.html und
   teltonika.js werden im Dunkeln umgefärbt. #tk-detail, #tk-air, #tk-source-row und #tk-source-label bekommen ihr
   style-Attribut per JS neu (dann als rgb(…)) – deshalb dort direkt über die ID bzw. die rgb-Schreibweise. */
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika:not(.hidden) {
  color-scheme: dark; background: transparent !important; padding: 0 !important; color: var(--n-ink);
  --n-card:#0F172A; --n-card-2:#1E293B; --n-line:#334155; --n-line-soft:rgba(148,163,184,.18); --n-ink:#F8FAFC; --n-ink-2:#CBD5E1; --n-ink-3:#94A3B8;
  --n-acc-text:#A3E635; --n-acc-soft:rgba(132,204,22,.14); --n-shadow:none;
  --bg-base:#020617; --bg-surface:#0F172A; --bg-card:#0F172A; --bg-card-hover:#1E293B; --border:rgba(148,163,184,.18); --border-hover:#334155;
  --text-primary:#F8FAFC; --text-secondary:#CBD5E1; --text-muted:#94A3B8; --border-color:#334155;
}
/* Karte + Kopf */
html[data-design="neu"] #tab-teltonika > .card, html[data-design="neu"] #tab-teltonika > .card:hover {
  background: var(--n-card) !important; border: 1px solid var(--n-line-soft) !important; border-radius: 16px !important;
  box-shadow: var(--n-shadow) !important; color: var(--n-ink); transform: none; }
html[data-design="neu"] #tab-teltonika > .card > .card-header { border-color: var(--n-line-soft) !important; background: transparent !important; }
html[data-design="neu"] #tab-teltonika > .card > .card-header h3 { font: 700 20px/1.2 var(--n-f-head) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--n-ink) !important; }
html[data-design="neu"] #tk-port-info { color: var(--n-ink-3) !important; font: 500 13px/1 var(--n-f-text) !important; }
/* Eingabefelder + Knöpfe */
html[data-design="neu"] #tab-teltonika .form-control { border-radius: 10px !important; font-family: var(--n-f-text) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika select,
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika .form-control {
  background: var(--n-card-2) !important; color: var(--n-ink) !important; border-color: var(--n-line) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika input::placeholder { color: var(--n-ink-3); }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika input[type="checkbox"] { accent-color: #84CC16; }
html[data-design="neu"] #tab-teltonika .btn-secondary { background: var(--n-card) !important; color: var(--n-ink) !important; border: 1px solid var(--n-line) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika .btn-secondary { background: var(--n-card-2) !important; }
html[data-design="neu"] #tab-teltonika .btn-secondary:hover { border-color: var(--n-ink-3) !important; }
/* Geräteliste */
html[data-design="neu"] #tk-devices-table th { background: transparent !important; color: var(--n-ink-3) !important; border-bottom: 1px solid var(--n-line-soft) !important; font: 600 12px/1.3 var(--n-f-text) !important; text-transform: none !important; letter-spacing: 0 !important; padding: 10px 14px !important; }
html[data-design="neu"] #tk-devices-table th::first-letter { text-transform: uppercase; }
html[data-design="neu"] #tk-devices-table td { background: transparent !important; color: var(--n-ink) !important; border-bottom: 1px solid var(--n-line-soft) !important; padding: 10px 14px !important; vertical-align: middle; }
html[data-design="neu"] #tk-devices-table td:nth-child(2) { font: 500 13px/1.3 ui-monospace, Menlo, Consolas, monospace !important; color: var(--n-ink-2) !important; }
html[data-design="neu"] #tk-devices-table td:nth-child(3) { font-weight: 500; }
html[data-design="neu"] #tk-devices-table tbody tr:hover td { background: var(--n-card-2) !important; }
html[data-design="neu"] #tk-devices-table td .btn-sm { min-height: 34px; min-width: 36px; padding: 0 10px !important; border-radius: 10px !important; }
html[data-design="neu"] #tk-devices-table td .btn-danger { background: transparent !important; color: #DC2626 !important; border: 1px solid rgba(220,38,38,.38) !important; box-shadow: none !important; }
html[data-design="neu"][data-vc-theme="dark"] #tk-devices-table td .btn-danger { color: #F87171 !important; border-color: rgba(248,113,113,.4) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika .cust-chip.ok   { background: rgba(74,222,128,.14); color: #86EFAC; }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika .cust-chip.none { background: rgba(148,163,184,.14); color: #CBD5E1; }
/* Detail (Werte, Befehle, Terminal) */
html[data-design="neu"] #tk-detail { border-color: var(--n-line-soft) !important; border-radius: 14px !important; background: var(--n-card); }
html[data-design="neu"] #tk-det-name { font: 600 17px/1.3 var(--n-f-head); color: var(--n-ink) !important; }
html[data-design="neu"] #tk-det-imei { color: var(--n-ink-3) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika .tk-detail-grid > div { border-color: var(--n-line-soft) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tk-source-row { background: var(--n-card) !important; color: var(--n-ink-2) !important; border-color: rgba(74,222,128,.4) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tk-source-label[style*="rgb(21, 128, 61)"] { color: #4ADE80 !important; }
html[data-design="neu"][data-vc-theme="dark"] #tk-source-label[style*="rgb(51, 65, 85)"] { color: var(--n-ink) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tk-air { background: var(--n-card) !important; border-color: var(--n-line-soft) !important; color: var(--n-ink-2) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tk-terminal { border: 1px solid var(--n-line-soft); }
/* feste Inline-Farben im Dunkeln */
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika [style*="background:#fff" i] { background: var(--n-card) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika [style*="background:#f1f5f9" i] { background: var(--n-card-2) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika [style*="background:#f8fafc" i] { background: rgba(148,163,184,.06) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika [style*="background:#f0fdf4" i] { background: rgba(74,222,128,.06) !important; border-color: rgba(74,222,128,.28) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika [style*="solid #e2e8f0" i] { border-color: var(--n-line-soft) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika [style*="dashed #fca5a5" i] { border-color: rgba(248,113,113,.4) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika [style*="color:#0f172a" i],
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika [style*="color:#334155" i] { color: var(--n-ink) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika [style*="color:#475569" i] { color: var(--n-ink-2) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika [style*="color:#64748b" i],
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika [style*="color:#94a3b8" i] { color: var(--n-ink-3) !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika [style*="color:#166534" i] { color: #86EFAC !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika [style*="color:#15803d" i] { color: #4ADE80 !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika [style*="color:#b45309" i] { color: #FBBF24 !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika [style*="color:#dc2626" i] { color: #F87171 !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika [style*="color:#2563eb" i] { color: #60A5FA !important; }
/* Rauchsensor-Kacheln + Kurve (Stil aus teltonika.js, .tka-*) */
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika .tka-kopf b { color: var(--n-ink); }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika .tka-kopf span,
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika .tka-legende,
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika .tka-y,
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika .tka-x { color: var(--n-ink-3); }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika .tka-z { background: var(--n-card-2); border-color: var(--n-line-soft); }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika .tka-z span,
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika .tka-z small { color: var(--n-ink-3); }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika .tka-z b { color: var(--n-ink); }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika .tka-z-rot { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.34); }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika .tka-z-rot b { color: #FCA5A5; }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika .tka-plot { background: var(--n-card-2); border-color: var(--n-line-soft); }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika .tka-plot line[stroke="#e2e8f0"] { stroke: rgba(148,163,184,.2); }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika .tka-plot path[stroke="#0f766e"] { stroke: #2DD4BF; }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika .tka-legende i[style*="#0f766e"] { border-top-color: #2DD4BF !important; }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika .tka-schwelle { background: rgba(30,41,59,.9); color: #F87171; }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika .tka-alarm { border-color: var(--n-card-2); }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika .tka-linie { background: #CBD5E1; }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika .tka-punkt { background: #2DD4BF; border-color: var(--n-card-2); box-shadow: 0 0 0 1px #2DD4BF; }
html[data-design="neu"][data-vc-theme="dark"] #tab-teltonika .tka-tip { background: #020617; border: 1px solid var(--n-line); }