/* Bulung Fahrzeugportal — folgt DESIGN.md (Bulung CI) und gleicht
   sich an order-portal an. Buttons und Inputs sind 1:1 identisch zum
   order-portal (.admin-btn-primary/.admin-btn-secondary und
   Login-/Panel-Input-Pattern).
*/

:root {
    /* Primaer (aus CI / DESIGN.md §2) */
    --navy: #040c2c;
    --navy-light: #0a1540;
    --green: #a2c629;
    --green-hover: #b8d940;
    --green-light: rgba(162,198,41,0.08);
    --green-medium: rgba(162,198,41,0.18);

    /* Neutrals */
    --bg: #f4f5f7;
    --white: #ffffff;
    --text: #040c2c;
    --text-secondary: #5a6578;
    --text-muted: #8f95a3;
    --border: #e4e7ec;
    --border-light: #f0f1f3;

    /* Schatten + Radien */
    --shadow-sm: 0 1px 3px rgba(4,12,44,0.05);
    --shadow-md: 0 4px 16px rgba(4,12,44,0.07);
    --radius: 12px;
    --radius-sm: 8px;

    /* Status */
    --warn: #ef4444;
    --warn-hover: #dc2626;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    font-feature-settings: "tnum" 1;
    -webkit-font-smoothing: antialiased;
}

/* DESIGN.md §6: 3px Gradient-Linie am oberen Rand */
body::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--green) 0%, var(--navy) 100%);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

button {
    font-family: inherit;
    cursor: pointer;
}

/* ============================================================
   Topnav  (1:1 wie order-portal: Navy 80px, sticky top:3px,
   weisses Logo, Separator, nav-link mit SVG, Meta rechts)
   ============================================================ */
.topnav {
    background: var(--navy);
    padding: 0 40px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 3px;
    z-index: 100;
}
.topnav-left {
    display: flex;
    align-items: center;
    gap: 20px;
}
.topnav-logo {
    height: 36px;
    width: auto;
}
.topnav-sep {
    width: 1px;
    height: 26px;
    background: rgba(255,255,255,0.15);
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 6px;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.nav-link.active {
    color: var(--green);
    background: rgba(162,198,41,0.12);
    cursor: default;
}
.nav-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.topnav-right {
    display: flex;
    align-items: center;
    gap: 24px;
}
.topnav-meta {
    text-align: right;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}
.topnav-kw-label {
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    font-weight: 500;
}
.topnav-kw {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--green);
    letter-spacing: 0.01em;
}

/* ============================================================
   Main
   ============================================================ */
.main {
    padding: 32px 32px 40px;
    max-width: 1600px;
    margin: 0 auto;
}

/* ============================================================
   Toolbar
   ============================================================ */
.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.toolbar-weeknav {
    display: flex;
    align-items: center;
    gap: 12px;
}
.toolbar-weekrange {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    min-width: 220px;
}
.range-dates {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -0.005em;
    font-variant-numeric: tabular-nums;
}
.range-kw {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 500;
}
.toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Step-Button (Wochennavigation) — order-portal-konform: weisser Hintergrund,
   navy Border auf Hover (analog .admin-btn-secondary, nur quadratisch). */
.btn-step {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--white);
    color: var(--navy);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.btn-step:hover {
    border-color: var(--green);
    background: var(--green-light);
}
.btn-step svg {
    width: 16px;
    height: 16px;
}
/* Drop-Ziel waehrend Karten-Drag: leichte Hinweis-Animation,
   beim Hover ueber den Button volle Drop-Markierung. */
body.vp-dragging .btn-step {
    border-color: var(--green);
    animation: vp-pulse 1.4s ease-in-out infinite;
}
.btn-step--drop,
body.vp-dragging .btn-step.btn-step--drop {
    background: var(--green-light);
    border-color: var(--green);
    outline: 2px dashed var(--green);
    outline-offset: 2px;
    animation: none;
}
@keyframes vp-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 128, 0, 0.15); }
    50%      { box-shadow: 0 0 0 4px rgba(0, 128, 0, 0); }
}

/* Toast-Stack — non-destruktive Fehler-/Status-Meldungen unten rechts. */
.vp-toast-host {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 5000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.vp-toast {
    pointer-events: auto;
    min-width: 240px;
    max-width: 420px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    background: var(--navy);
    color: var(--white);
    font-size: 0.88rem;
    line-height: 1.4;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}
.vp-toast--in { opacity: 1; transform: translateY(0); }
.vp-toast--error { background: var(--warn); }
.vp-toast--success { background: var(--green); color: var(--navy); }

/* View-Toggle — Woche / Monat, segmentierter Switch. */
.view-toggle {
    display: inline-flex;
    height: 36px;
    padding: 3px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    gap: 2px;
}
.view-toggle-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}
.view-toggle-opt:hover:not([aria-pressed="true"]) {
    background: var(--white);
    color: var(--text);
}
.view-toggle-opt[aria-pressed="true"] {
    background: var(--navy);
    color: var(--white);
    border-color: var(--navy);
    box-shadow: var(--shadow-sm);
}
.view-toggle-opt:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(162,198,41,0.18);
}

/* "Heute"-Button — sekundär, neben den Wochenpfeilen. */
.btn-today {
    height: 36px;
    padding: 0 14px;
    background: var(--white);
    color: var(--navy);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.btn-today:hover:not(:disabled) {
    border-color: var(--green);
    background: var(--green-light);
}
.btn-today:disabled,
.btn-today.is-current {
    color: var(--text-muted);
    background: var(--bg);
    cursor: default;
}

/* ============================================================
   Buttons  (1:1 wie order-portal:
   .admin-btn-primary -> Navy/Weiss
   .admin-btn-secondary -> Bg/Navy mit Border)
   ============================================================ */
.admin-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--navy);
    color: #fff;
    border: 1px solid var(--navy);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.admin-btn-primary:hover:not(:disabled) {
    background: var(--navy-light);
    border-color: var(--navy-light);
}
.admin-btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.admin-btn-primary svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.admin-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.admin-btn-secondary:hover:not(:disabled) {
    background: var(--border-light);
    border-color: var(--border);
}
.admin-btn-secondary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Danger-Variante fuer Loeschen */
.admin-btn-primary--danger {
    background: var(--warn);
    border-color: var(--warn);
}
.admin-btn-primary--danger:hover:not(:disabled) {
    background: var(--warn-hover);
    border-color: var(--warn-hover);
}

/* Modal-Aliase: gleiche Optik wie .admin-btn-primary/.admin-btn-secondary */
.vp-btn-primary { /* delegiert an admin-btn-primary */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--navy);
    color: #fff;
    border: 1px solid var(--navy);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.vp-btn-primary:hover:not(:disabled) {
    background: var(--navy-light);
    border-color: var(--navy-light);
}
.vp-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.vp-btn-primary--danger {
    background: var(--warn);
    border-color: var(--warn);
}
.vp-btn-primary--danger:hover:not(:disabled) {
    background: var(--warn-hover);
    border-color: var(--warn-hover);
}
.vp-btn-secondary {
    padding: 10px 18px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.vp-btn-secondary:hover {
    background: var(--border-light);
}

/* ============================================================
   Filter — Toolbar-Trigger + Popover
   ============================================================ */
.filter-host {
    position: relative;
    display: inline-flex;
}

.filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--white);
    color: var(--navy);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
    white-space: nowrap;
}
.filter-trigger:hover {
    border-color: var(--navy);
    background: var(--bg);
}
.filter-trigger:focus-visible {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(162,198,41,0.18);
}
.filter-trigger[aria-expanded="true"] {
    border-color: var(--navy);
    background: var(--bg);
}
.filter-trigger-icon { width: 16px; height: 16px; flex-shrink: 0; }
.filter-trigger-caret {
    width: 12px; height: 12px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}
.filter-trigger[aria-expanded="true"] .filter-trigger-caret { transform: rotate(180deg); }

.filter-trigger-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--green);
    color: var(--navy);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: 0;
}
.filter-trigger-count[hidden] { display: none; }

/* Popover unterhalb des Triggers, rechtsbündig anchorend. */
.filter-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1500;
    min-width: 360px;
    max-width: 92vw;
    padding: 18px 18px 14px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 36px rgba(4, 12, 44, 0.12), 0 2px 8px rgba(4, 12, 44, 0.06);
    transform-origin: top right;
    animation: filterPopIn 0.16s ease-out;
}
.filter-popover[hidden] { display: none; }
@keyframes filterPopIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.filter-section + .filter-section { margin-top: 14px; }
.filter-section-label {
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 8px;
}
.filter-section-body {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.filter-popover-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}
.filter-clear {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s;
}
.filter-clear:hover:not(:disabled) { color: var(--navy); }
.filter-clear:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
    text-decoration: none;
    opacity: 0.7;
}
.filter-close {
    background: var(--navy);
    color: var(--white);
    border: 1px solid var(--navy);
    border-radius: var(--radius-sm);
    padding: 7px 14px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.filter-close:hover { background: var(--navy-light); border-color: var(--navy-light); }

@media (max-width: 640px) {
    .filter-popover { right: auto; left: 0; min-width: 280px; }
}

/* ============================================================
   Filter-Pill (1:1 wie order-portal Aktivitaeten-Filter)
   ============================================================ */
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 15px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--white);
    font-family: 'Jost', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.filter-pill:hover:not(:disabled):not(.active):not([aria-pressed="true"]) {
    border-color: var(--green);
    color: var(--text);
}
.filter-pill.active,
.filter-pill[aria-pressed="true"] {
    background: var(--navy);
    color: var(--white);
    border-color: var(--navy);
}
.filter-pill.active:hover:not(:disabled),
.filter-pill[aria-pressed="true"]:hover:not(:disabled) {
    background: var(--navy-light);
    color: var(--white);
    border-color: var(--navy-light);
}
.filter-pill:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.filter-pill svg {
    width: 14px;
    height: 14px;
}

/* Kompakte Variante fuer die Filter-Leiste: schmaleres Padding, kleinere
   Schrift, im Ruhezustand zurueckhaltender (helleres Border). */
.filter-pill--sm {
    padding: 3px 11px;
    font-size: 0.76rem;
    border-color: var(--border-light);
    color: var(--text-muted);
}
.filter-pill--sm:hover:not(:disabled):not(.active):not([aria-pressed="true"]) {
    border-color: var(--green);
    color: var(--text);
}

/* ============================================================
   Legende
   ============================================================ */
.legend {
    display: flex;
    gap: 18px;
    padding: 10px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--white);
    align-items: center;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
    flex-wrap: wrap;
    box-shadow: var(--shadow-sm);
}
.legend-swatch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.legend-swatch::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 4px;
    border-radius: 2px;
}
.legend-swatch--fix::before { background: var(--green); }
.legend-swatch--markt::before { background: var(--border); border: 1px solid #d4d8e0; }
.legend-swatch--gebucht::before { background: var(--text-muted); }

/* ============================================================
   Wochenraster (Mehrwochen-Stack)
   ============================================================ */
.weekgrid {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.weekrow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

/* Trenner zwischen Wochenzeilen — schmaler Strich, kein Text. */
.weekrow-divider {
    height: 1px;
    background: var(--border);
    margin: -4px 0;
    animation: fadeUp 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* KW-Chip sitzt vollstaendig ueber der Wochenzeile auf Hoehe der
   Divider-Linie — kein Ueberlapp mit dem Tages-Header (z.B. "MO"). */
.weekrow-kw {
    position: absolute;
    top: -24px;
    left: 14px;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 10px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    font-variant-numeric: tabular-nums;
    user-select: none;
    pointer-events: none;
    line-height: 1.4;
}
.weekrow-kw-prefix {
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
}
.weekrow-kw-num {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: 0;
}

/* Kompakte Folgewochen: schmalere Headers, geringere Mindesthoehe,
   leicht kleinere Karten. Funktional identisch — Drag&Drop unveraendert. */
.weekrow--compact .daycol {
    min-height: 180px;
}
.weekrow--compact .daycol-head {
    padding: 10px 12px 8px;
}
.weekrow--compact .daycol-day {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
}
.weekrow--compact .daycol-date {
    margin-top: 2px;
}
.weekrow--compact .daycol-date-num {
    font-size: 1.25rem;
}
.weekrow--compact .daycol-date-month {
    font-size: 0.72rem;
}
.weekrow--compact .daycol-list {
    padding: 8px;
    gap: 6px;
}
.weekrow--compact .vcard {
    padding: 9px 11px 9px 15px;
    gap: 4px;
}
.weekrow--compact .vcard::before {
    width: 3px;
}
.weekrow--compact .vcard-fraechter {
    font-size: 0.88rem;
    font-weight: 600;
}
.weekrow--compact .vcard-standort {
    font-size: 0.76rem;
}
.weekrow--compact .vcard-meta {
    gap: 4px;
}
.weekrow--compact .pill {
    font-size: 0.66rem;
    padding: 2px 7px;
}
.weekrow--compact .badge {
    font-size: 0.58rem;
    padding: 1px 7px;
    letter-spacing: 0.12em;
}
.weekrow--compact .daycol-add {
    padding: 7px 10px;
    font-size: 0.76rem;
}
.weekrow--compact .daycol-add--empty {
    padding: 16px 10px;
    font-size: 0.78rem;
}
.weekrow--compact .daycol-divider {
    font-size: 0.56rem;
    letter-spacing: 0.14em;
}

.daycol {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 340px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s;
}
.daycol:hover { box-shadow: var(--shadow-md); }

.daycol-head {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border-light);
    background: var(--white);
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.daycol-head-left {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.daycol-day {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.daycol-date {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
    line-height: 1;
}
.daycol-date-num {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.daycol-date-month {
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.daycol--today .daycol-head::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: -1px;
    height: 2px;
    background: var(--green);
}
.daycol--today .daycol-date-num { color: var(--navy); }
.daycol-list {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.daycol-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-style: italic;
    text-align: center;
    padding: 24px 12px;
}

/* "+ Eintrag anlegen" — Klick-Ziel pro Tag.
   Vollvariante fuellt leere Spalte; Slim-Variante haengt unter letzter Karte. */
.daycol-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: auto;
    padding: 10px 12px;
    border: 1px dashed transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.daycol-add:hover,
.daycol-add:focus-visible {
    background: var(--green-light);
    border-color: var(--green);
    color: var(--navy);
    outline: none;
}
.daycol-add--empty {
    flex: 1;
    border-color: var(--border);
    font-size: 0.85rem;
    padding: 28px 12px;
}
/* Drag-Pulse-Animation soll die Schaltflaeche nicht stoeren — und sie soll
   waehrend eines Drag&Drop nicht als Klickziel triggern. */
body.vp-dragging .daycol-add { pointer-events: none; opacity: 0.4; }
.daycol-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 2px 2px;
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    pointer-events: none;
}
.daycol-divider::before,
.daycol-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-light);
}
.daycol-divider-label {
    flex-shrink: 0;
}

/* ============================================================
   Vehicle-Card — ruhiger Look:
   - Linker Stripe ist der einzige farbige Akzent
     (grau = Markt, gruen = Fix, ohne Stripe = Gebucht/entsaettigt).
   - Keine gefuellten Farb-Pills mehr, keine Gradient-Hintergruende.
   - Hover hebt nur leicht hervor; kein Y-Shift damit das Auge ruhig bleibt.
   ============================================================ */
.vcard {
    --stripe: var(--border);
    position: relative;
    padding: 12px 14px 12px 18px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    gap: 6px;
    line-height: 1.4;
    min-width: 0;
}
.vcard::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--stripe);
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.vcard:hover {
    border-color: var(--navy);
    box-shadow: var(--shadow-sm);
}
.vcard--fix {
    --stripe: var(--green);
}
.vcard--fix:hover {
    border-color: var(--green);
}
.vcard--gebucht {
    --stripe: transparent;
    background: var(--bg);
    border-color: var(--border-light);
}
.vcard--gebucht::before { display: none; }
.vcard--gebucht .vcard-fraechter {
    color: var(--text-secondary);
    text-decoration: line-through;
    text-decoration-color: var(--text-muted);
    text-decoration-thickness: 1px;
}
.vcard--gebucht .vcard-standort,
.vcard--gebucht .pill {
    color: var(--text-muted);
}
.vcard-row-top {
    display: block;
    min-width: 0;
}
.vcard-fraechter {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.25;
    overflow-wrap: break-word;
    hyphens: auto;
    padding-right: 22px;
}
.vcard-standort {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.3;
    overflow-wrap: break-word;
    hyphens: auto;
}
.vcard-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* Pill (Aufliegertyp) outlined, kein gefuellter Block — reduziert Farbrauschen. */
.pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    font-size: 0.72rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    line-height: 1.6;
    letter-spacing: 0.01em;
}
.badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    line-height: 1.7;
}
.badge--reifen {
    background: var(--navy);
    color: #fff;
}

/* ADR-Flamme (rechts unten) */
.vcard-adr {
    position: absolute;
    right: 7px;
    bottom: 6px;
    width: 18px;
    height: 18px;
    background-color: #a07266;
    -webkit-mask: url('/assets/icons/flame.svg') center / contain no-repeat;
            mask: url('/assets/icons/flame.svg') center / contain no-repeat;
    opacity: 0.7;
    pointer-events: none;
}
.vcard--gebucht .vcard-adr {
    background-color: var(--text-muted);
    opacity: 0.45;
}
.vcard--adr .vcard-meta {
    padding-right: 24px;
}

/* Hover-Aktionen — absolut positioniert, damit sie keinen Layout-Platz
   reservieren. Sonst werden Karten-Namen bei schmalen Spalten zeichenweise
   umgebrochen, weil 4 Buttons (~108px) den Text auf wenige Pixel quetschen. */
.vcard-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 1;
    background: var(--white);
    border-radius: var(--radius-sm);
    padding: 2px;
}
.vcard--gebucht .vcard-actions { background: var(--bg); }
.vcard:hover .vcard-actions,
.vcard:focus-within .vcard-actions {
    opacity: 1;
}
/* Notiz-Button bleibt sichtbar, wenn Notiz existiert — dann auch ohne Hover
   den Action-Container teilweise zeigen. */
.vcard:not(:hover):not(:focus-within) .vcard-actions:has(.vcard-action--note.has-note) {
    opacity: 1;
}
.vcard:not(:hover):not(:focus-within) .vcard-actions:has(.vcard-action--note.has-note) .vcard-action:not(.vcard-action--note) {
    display: none;
}
.vcard-action {
    width: 24px;
    height: 24px;
    padding: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.vcard-action:hover {
    background: var(--green-light);
    border-color: var(--green);
    color: var(--navy);
}
.vcard-action--danger:hover {
    background: var(--warn);
    border-color: var(--warn);
    color: #fff;
}

/* Notiz-Aktion: existiert eine Notiz, ist der Button dauerhaft sichtbar
   (DESIGN.md §4: 2-farbig, Green-Akzent). Ohne Notiz bleibt er an die
   Hover-Sichtbarkeit der vcard-actions gekoppelt. */
.vcard-action--note {
    color: var(--text-secondary);
}
.vcard-action--note svg {
    display: block;
}
.vcard-action--note.has-note {
    opacity: 1;
    color: var(--navy);
    border-color: var(--green);
    background: var(--green-light);
}
.vcard-action--note.has-note::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 1.5px var(--white);
}
.vcard-action--note {
    position: relative;
}
.vcard-action--note:hover {
    color: var(--navy);
    background: var(--green-light);
    border-color: var(--green);
}
.vcard--gebucht .vcard-action--note.has-note {
    color: var(--text-secondary);
    background: var(--white);
    border-color: var(--border);
}
.vcard--gebucht .vcard-action--note.has-note::after {
    background: var(--text-muted);
}

/* Notiz-Popover -- anker-positioniert an einer Card */
.vp-note-popover {
    position: absolute;
    z-index: 1800;
    width: min(320px, calc(100vw - 24px));
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 36px rgba(4, 12, 44, 0.16),
                0 2px 8px rgba(4, 12, 44, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: top left;
    animation: vp-note-pop-in 0.14s cubic-bezier(0.4, 0, 0.2, 1);
}
.vp-note-popover[data-placement="above"] {
    transform-origin: bottom left;
}
@keyframes vp-note-pop-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.vp-note-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
    background: var(--white);
}
.vp-note-popover-title {
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
}
.vp-note-popover-close {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 20px;
    line-height: 1;
    padding: 0;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.vp-note-popover-close:hover {
    background: var(--bg);
    color: var(--navy);
}
.vp-note-popover-body {
    padding: 12px 14px;
}
.vp-note-popover-text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 240px;
    overflow-y: auto;
}
.vp-note-popover-text.is-empty {
    color: var(--text-muted);
    font-style: italic;
}
.vp-note-popover-textarea {
    width: 100%;
    min-height: 96px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text);
    background: var(--white);
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.vp-note-popover-textarea:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(162,198,41,0.15);
}
.vp-note-popover-error {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 0.8rem;
    line-height: 1.4;
}
.vp-note-popover-foot {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 10px 14px;
    border-top: 1px solid var(--border-light);
    background: var(--white);
}

/* Kompakte Button-Varianten fuer den Popover-Fuss */
.vp-btn-primary--sm,
.vp-btn-secondary--sm {
    padding: 6px 12px;
    font-size: 0.82rem;
}

/* Textarea im Anlegen-/Edit-Modal (Notiz-Feld) */
.vp-field--notiz textarea {
    width: 100%;
    min-height: 76px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--white);
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.vp-field--notiz textarea:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(162,198,41,0.15);
}
.vp-field-optional {
    font-size: 0.7rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 4px;
}

/* Drag & Drop */
.vcard[draggable="true"] { cursor: grab; }
.vcard--dragging {
    opacity: 0.45;
    transform: rotate(-1deg);
    cursor: grabbing;
}
.daycol-list--drop {
    background: var(--green-light);
    outline: 2px dashed var(--green);
    outline-offset: -4px;
    border-radius: var(--radius-sm);
}
.daycol-list--drop .daycol-empty {
    color: var(--navy);
    font-style: normal;
}

/* Vergangenheit: keine Drop-Ziele und visuell gedaempft. */
.daycol--past .daycol-head {
    opacity: 0.7;
}
body.vp-dragging .daycol-list--past {
    cursor: not-allowed;
    opacity: 0.55;
}
.daycol-list--drop-blocked {
    outline: 2px dashed #c0392b;
    outline-offset: -4px;
    border-radius: var(--radius-sm);
    background: rgba(192, 57, 43, 0.08);
    cursor: not-allowed;
}
.btn-step--drop-blocked,
body.vp-dragging .btn-step.btn-step--drop-blocked {
    background: rgba(192, 57, 43, 0.08);
    border-color: #c0392b;
    outline: 2px dashed #c0392b;
    outline-offset: 2px;
    animation: none;
    cursor: not-allowed;
}

/* ============================================================
   Status-Boxen (Loading / Error)
   ============================================================ */
.loading,
.errorbox {
    grid-column: 1 / -1;
    padding: 32px;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.95rem;
    background: var(--white);
}
.errorbox {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

/* ============================================================
   Animationen (DESIGN.md §8)
   ============================================================ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.daycol { animation: fadeUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) both; }
.daycol:nth-child(1) { animation-delay: 0ms; }
.daycol:nth-child(2) { animation-delay: 50ms; }
.daycol:nth-child(3) { animation-delay: 100ms; }
.daycol:nth-child(4) { animation-delay: 150ms; }
.daycol:nth-child(5) { animation-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
    .daycol { animation: none; }
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
    padding: 20px 32px;
    text-align: center;
    font-size: 0.76rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    background: var(--white);
    margin-top: auto;
}
body { display: flex; flex-direction: column; }
.main { flex: 1; width: 100%; }

/* App-Version im Footer: dezent, leer (kein JS / Fehler) faellt unsichtbar weg. */
.footer-version {
    color: var(--text-muted);
    opacity: 0.7;
    letter-spacing: 0.04em;
}
.footer-version:not(:empty)::before { content: "\00b7\00a0"; }

/* ============================================================
   Responsive (DESIGN.md §7: 768 / 480)
   ============================================================ */
@media (max-width: 1000px) {
    .weekgrid { gap: 18px; }
    .weekrow { gap: 10px; }
    .daycol-head { padding: 12px 12px 10px; gap: 6px; }
    .daycol-list { padding: 10px; gap: 8px; }
    .daycol-date-num { font-size: 1.5rem; }
    .daycol-divider { font-size: 0.58rem; letter-spacing: 0.14em; }
    .vcard { padding: 11px 11px 11px 15px; gap: 7px; }
    .vcard-fraechter { font-size: 0.88rem; }
    .vcard-standort { font-size: 0.78rem; }
    .pill { font-size: 0.68rem; padding: 2px 6px; }
    .badge { font-size: 0.58rem; padding: 1px 6px; letter-spacing: 0.1em; }
}
@media (max-width: 768px) {
    .topnav { padding: 0 16px; height: 66px; }
    .topnav-logo { height: 28px; }
    .topnav-sep { display: none; }
    .nav-link { font-size: 0.75rem; padding: 5px 10px; }
    .nav-link span { display: none; }
    .topnav-meta { line-height: 1.2; }
    .topnav-kw-label { font-size: 0.58rem; }
    .topnav-kw { font-size: 0.95rem; }
    .main { padding: 20px 12px 32px; }
    .toolbar-weekrange { min-width: 160px; }
    .toolbar-actions { width: 100%; justify-content: space-between; }
    .weekgrid { gap: 14px; }
    .weekrow { gap: 8px; }
    .daycol { min-height: 240px; }
    .daycol-head { padding: 10px 10px 8px; }
    .daycol-day { font-size: 0.6rem; letter-spacing: 0.15em; }
    .daycol-date-num { font-size: 1.25rem; }
    .daycol-date-month { font-size: 0.72rem; }
    .daycol-list { padding: 8px; gap: 6px; }
    .vcard { padding: 9px 9px 9px 13px; gap: 5px; }
    .vcard::before { width: 3px; }
    .vcard-fraechter { font-size: 0.82rem; }
    .vcard-standort { font-size: 0.72rem; }
    .vcard-meta { gap: 3px; }
    .pill { font-size: 0.62rem; padding: 1px 5px; }
    .badge { font-size: 0.54rem; padding: 1px 5px; letter-spacing: 0.08em; }
    .vcard-action { width: 20px; height: 20px; font-size: 0.7rem; }
}
/* Mittlere Bildschirme: 5 Spalten waeren zu schmal -> 2 Reihen
   (Mo-Di-Mi oben, Do-Fr unten). Behalt das Wochenraster als visuelle Metapher,
   gibt Karten aber wieder genug Platz fuer lesbare Namen. */
@media (max-width: 900px) and (min-width: 641px) {
    .weekrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .daycol { min-height: 220px; }
}

@media (max-width: 640px) {
    .weekrow { grid-template-columns: 1fr; }
    .daycol { min-height: 0; }
    .weekrow--compact .daycol { min-height: 0; }
    .toolbar { gap: 12px; }
    .toolbar-weekrange { min-width: 0; flex: 1; }
}

/* ============================================================
   Modal  (Inputs/Buttons exakt wie order-portal-Login/Panel:
   Padding 10px 12px, Radius var(--radius-sm), Focus = Green
   Border + 3px Green Box-Shadow)
   ============================================================ */
.vp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4,12,44,0.4);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 16px 16px;
    z-index: 2000;
    backdrop-filter: blur(2px);
    animation: vp-fade 0.15s ease-out;
}
@keyframes vp-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.vp-modal {
    background: var(--white);
    border-radius: var(--radius);
    width: min(520px, 100%);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    overflow: hidden;
    animation: vp-rise 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.vp-modal--confirm {
    width: min(420px, 100%);
}
@keyframes vp-rise {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}
.vp-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
}
.vp-modal-head h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--navy);
}
.vp-modal-close {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 24px;
    line-height: 1;
    padding: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    transition: background 0.12s, color 0.12s;
}
.vp-modal-close:hover {
    background: var(--bg);
    color: var(--navy);
}
.vp-modal-body { padding: 24px; }
.vp-modal-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.vp-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vp-field label {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
}
.vp-req {
    color: var(--warn);
    letter-spacing: 0;
    margin-left: 2px;
}

/* Inputs/Selects — 1:1 wie .admin-login-box input bzw. .admin-panel-controls */
.vp-field input[type="text"],
.vp-field input[type="date"],
.vp-field input[type="password"],
.vp-field input[type="email"],
.vp-field select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    background: var(--white);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.vp-field input:focus,
.vp-field select:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(162,198,41,0.15);
}
.vp-field input::placeholder {
    color: var(--text-muted);
}

/* Autocomplete (Standort) — Dropdown unterhalb des Inputs */
.vp-field--autocomplete {
    position: relative;
}
.vp-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 4px 0 0 0;
    padding: 4px;
    list-style: none;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    max-height: 240px;
    overflow-y: auto;
    z-index: 20;
}
.vp-autocomplete[hidden] { display: none; }
.vp-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    line-height: 1.2;
}
.vp-autocomplete-item.is-active,
.vp-autocomplete-item:hover {
    background: rgba(162,198,41,0.12);
}
.vp-autocomplete-item--db { font-weight: 500; }
.vp-autocomplete-icon {
    flex: 0 0 18px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}
.vp-autocomplete-item--db .vp-autocomplete-icon { color: var(--green); }
.vp-autocomplete-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vp-autocomplete-count {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(0,0,0,0.04);
    padding: 1px 6px;
    border-radius: 10px;
}

.vp-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Eigenschaften-Fieldset */
.vp-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin: 0;
}
.vp-flags legend {
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 0 6px;
    font-weight: 600;
}
.vp-flag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}
.vp-flag input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--border);
    border-radius: 3px;
    margin: 0;
    position: relative;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    cursor: pointer;
    background: var(--white);
}
.vp-flag input[type="checkbox"]:hover {
    border-color: var(--green);
}
.vp-flag input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(162,198,41,0.15);
}
.vp-flag input[type="checkbox"]:checked {
    background: var(--green);
    border-color: var(--green);
}
.vp-flag input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid var(--navy);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Segmented Control (Aufliegertyp) */
.vp-segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.vp-segmented-option {
    flex: 1 1 auto;
    min-width: 64px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    text-align: center;
    white-space: nowrap;
}
.vp-segmented-option:hover {
    background: var(--white);
    color: var(--text);
}
.vp-segmented-option:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(162,198,41,0.15);
    border-color: var(--green);
}
.vp-segmented-option--active,
.vp-segmented-option--active:hover {
    background: var(--navy);
    color: var(--white);
    border-color: var(--navy);
    box-shadow: var(--shadow-sm);
}

/* Akzent-Variante: aktive Fix-Buchung-Option grün (Bulung-Akzent). */
.vp-segmented--accent .vp-segmented-option[data-value="fix"].vp-segmented-option--active,
.vp-segmented--accent .vp-segmented-option[data-value="fix"].vp-segmented-option--active:hover {
    background: var(--green);
    color: var(--navy);
    border-color: var(--green);
}

/* Inline-Validation: roter Rand + Hinweis unter Label fuer leere Pflichtfelder. */
.vp-field-hint {
    display: none;
    font-size: 0.78rem;
    color: var(--warn);
    margin-top: 4px;
}
.vp-field--invalid .vp-field-hint { display: block; }
.vp-field--invalid input[type="text"],
.vp-field--invalid input[type="date"] {
    border-color: var(--warn);
}
.vp-field--invalid input:focus {
    border-color: var(--warn);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* Soft-Disabled Submit: visuell unscharf, aber klickbar fuer Fokus-auf-erstes-leeres-Feld. */
.vp-btn-primary.is-disabled-soft,
.vp-btn-primary.is-disabled-soft:hover {
    background: var(--text-muted);
    border-color: var(--text-muted);
    color: var(--white);
    box-shadow: none;
}

/* Modal-Fehler */
.vp-modal-error {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 0.85rem;
    line-height: 1.4;
}

.vp-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.vp-confirm-msg {
    margin: 0 0 18px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text);
}

@media (max-width: 480px) {
    .vp-row-2 { grid-template-columns: 1fr; }
    .vp-modal-overlay { padding-top: 16px; }
}

/* ============================================================
   Login  (portiert aus bulung-hub/static/styles.css;
   CSS-Variablen an fahrzeug-portal-Tokens angepasst)
   ============================================================ */

/* Generic submit/action button — green accent, block variant */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1;
    padding: 11px 20px;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--green);
    color: var(--navy);
    transition: background 0.2s cubic-bezier(0.4,0,0.2,1),
                transform 0.1s cubic-bezier(0.4,0,0.2,1),
                box-shadow 0.2s cubic-bezier(0.4,0,0.2,1);
}
.btn:hover {
    background: var(--green-hover);
    box-shadow: var(--shadow-sm);
}
.btn:active { transform: translateY(1px); }
.btn--block { width: 100%; }
/* Extra top-margin for the login submit button (replaces hub's inline style) */
.btn--login { margin-top: 22px; }

/* Form inputs on the login page */
.login-stage input[type="text"],
.login-stage input[type="password"] {
    width: 100%;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.login-stage input[type="text"]:focus,
.login-stage input[type="password"]:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px var(--green-light);
}

/* Labels on the login form */
.login-stage label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
    margin-top: 16px;
    margin-bottom: 6px;
}

/* Inline error message */
.field-error {
    display: none;
    background: #fee2e2;
    color: #991b1b;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    margin: 12px 0 0;
}
.field-error[data-visible="1"] { display: block; }

/* Full-page centering wrapper */
.login-stage {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: var(--bg);
}

/* Card */
.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 36px 32px 28px;
    animation: fadeUp 0.4s cubic-bezier(0.4,0,0.2,1) both;
}

/* Brand row: logo only */
.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 18px;
}
.login-brand img { height: 36px; width: auto; }
.login-brand-text {
    line-height: 1.1;
    margin-bottom: 28px;
    text-align: center;
}
.login-brand-text strong {
    display: block;
    color: var(--navy);
    font-size: 1.1rem;
    font-weight: 700;
}
.login-brand-text small {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* Tagline below the form */
.login-claim {
    margin-top: 18px;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-align: center;
    letter-spacing: 0.04em;
}

@media (max-width: 480px) {
    .login-card { padding: 28px 20px 22px; }
}

/* ============================================================
   Topnav User-Menu (Header: Display-Name, Admin-Link, Logout)
   ============================================================ */
.topnav-user {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 12px;
    margin-left: 4px;
    border-left: 1px solid rgba(255,255,255,0.12);
}
.topnav-user[hidden] { display: none; }

/* Trigger: Avatar + Name + Chevron */
.user-trigger {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: inherit;
    padding: 5px 9px 5px 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.user-trigger:hover { background: rgba(255,255,255,0.06); }
.user-trigger[aria-expanded="true"] {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.14);
}

.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--navy);
    background: linear-gradient(135deg, var(--green) 0%, var(--green-hover) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}

.topnav-username {
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255,255,255,0.82);
    white-space: nowrap;
}

.user-chevron {
    width: 14px;
    height: 14px;
    color: rgba(255,255,255,0.45);
    transition: transform 0.18s ease;
}
.user-trigger[aria-expanded="true"] .user-chevron { transform: rotate(180deg); }

/* Dropdown-Panel */
.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    padding: 6px;
    background: var(--navy-light);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0,0,0,0.4);
    z-index: 120;
    transform-origin: top right;
    animation: userMenuIn 0.14s ease;
}
.user-dropdown[hidden] { display: none; }

@keyframes userMenuIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 11px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    color: rgba(255,255,255,0.82);
    background: transparent;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.13s, color 0.13s;
}
.user-dropdown-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.65;
}
.user-dropdown-item:hover {
    background: rgba(255,255,255,0.07);
    color: #fff;
}
.user-dropdown-item:hover svg { opacity: 1; }
.user-dropdown-item[hidden] { display: none; }

.user-dropdown-item--danger { color: #f2a8a8; }
.user-dropdown-item--danger:hover {
    background: rgba(239,68,68,0.16);
    color: #ff9a9a;
}

/* ============================================================
   Admin-Seite Layout + Komponenten
   ============================================================ */
.admin-main {
    max-width: 1100px;
}

.admin-section {
    margin-bottom: 40px;
}

.admin-section-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
}

.admin-section-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 16px;
}
.admin-section-head .admin-section-title {
    margin-bottom: 0;
}

.admin-user-count {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.admin-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

/* Anlegen-Formular: 2-spaltig in breiter Ansicht */
.admin-create-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 640px) {
    .admin-form-row { grid-template-columns: 1fr; }
}

.admin-form-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.admin-form-error {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 0.85rem;
    line-height: 1.4;
}
.admin-form-error[hidden] { display: none; }

/* Status-Banner (oben, farbig) */
.admin-status {
    margin-bottom: 20px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.4;
}
.admin-status--info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}
.admin-status--success {
    background: rgba(162,198,41,0.10);
    border: 1px solid rgba(162,198,41,0.35);
    color: #3a5401;
}
.admin-status--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}
.admin-status[hidden] { display: none; }

/* Tabelle */
.admin-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    background: var(--white);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.admin-table thead th {
    padding: 10px 14px;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.admin-table tbody tr {
    border-bottom: 1px solid var(--border-light);
    transition: background 0.1s;
}
.admin-table tbody tr:last-child { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--bg); }
.admin-table tbody td {
    padding: 10px 14px;
    vertical-align: middle;
}

.admin-table-loading {
    padding: 32px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

/* Gedämpfte Reihe für inaktive User */
.admin-row-inactive td:not(.admin-cell-actions) {
    opacity: 0.6;
}

/* Eigene Reihe leicht hervorgehoben */
.admin-row-self td:first-child::after {
    content: " (ich)";
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 400;
}

/* Badges */
.admin-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.admin-badge--yes {
    background: rgba(162,198,41,0.12);
    color: #3a5401;
    border-color: rgba(162,198,41,0.4);
}
.admin-badge--active {
    background: rgba(162,198,41,0.10);
    color: #3a5401;
    border-color: rgba(162,198,41,0.35);
}
.admin-badge--inactive {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

/* Username als Inline-Code */
.admin-username {
    font-family: 'JetBrains Mono', 'Fira Mono', 'Consolas', monospace;
    font-size: 0.82rem;
    background: var(--bg);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--border-light);
    color: var(--navy);
}

/* Aktions-Zelle */
.admin-cell-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 14px;
}

.admin-cell-muted {
    color: var(--text-muted);
    font-size: 0.82rem;
}

/* Kleine Button-Variante fuer die Aktions-Zellen */
.admin-btn-sm {
    padding: 5px 10px;
    font-size: 0.76rem;
}

.admin-btn-danger {
    color: var(--warn);
    border-color: #fecaca;
}
.admin-btn-danger:hover:not(:disabled) {
    background: #fef2f2;
    border-color: var(--warn);
    color: var(--warn-hover);
}