/* ============================================================================
   Fuhrparkflotten-Check – Design-System
   ----------------------------------------------------------------------------
   Ersetzt das mitgelieferte Geex-/Bootstrap-Theme vollständig. Diese Datei ist
   die EINZIGE Stilquelle der Anwendung; dadurch gibt es keine Kaskaden-Konflikte
   zwischen Theme-Resten und eigenen Regeln mehr.

   Zwei Nutzungsszenarien bestimmen jede Entscheidung:
   – Prüfer am Tablet, draußen am Fahrzeug: große Flächen, harte Kontraste.
   – Fuhrparkleitung am Desktop: dichte Tabellen, viele Filter.

   Barrierefreiheit: alle Textfarben ≥ 4,5:1 auf ihrem Untergrund,
   alle bedienbaren Elemente ≥ 44 px hoch.
   ========================================================================== */

/* ---------------------------------------------------------------- Tokens - */
:root {
    /* Neutrale Skala */
    --c-bg:            #f5f6f8;
    --c-surface:       #ffffff;
    --c-surface-sunk:  #fafbfc;
    --c-border:        #e3e6ea;
    --c-border-strong: #cdd3da;

    /* Text – geprüfte Kontrastwerte auf Weiß */
    --c-text:      #101828;   /* 16.1:1 */
    --c-text-soft: #475467;   /*  7.6:1 */
    --c-text-mute: #667085;   /*  5.3:1 */

    /* Marke */
    --c-brand:       #1f4e78;   /* 8.5:1 */
    --c-brand-dark:  #163a5a;
    --c-brand-tint:  #eef3f8;

    /* Signale */
    --c-ok:        #027a48;
    --c-ok-bg:     #ecfdf3;
    --c-ok-line:   #a9e6c3;
    --c-bad:       #b42318;
    --c-bad-bg:    #fef3f2;
    --c-bad-line:  #f5c6c1;
    --c-warn:      #b54708;
    --c-warn-bg:   #fffaeb;
    --c-warn-line: #f2ddab;

    /* Abstände – 4px-Raster */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

    /* Radien – bewusst abgestuft, nicht überall gleich */
    --r-chip: 6px;
    --r-ctrl: 8px;
    --r-card: 12px;

    /* Schatten – zurückhaltend, nur zur Ablösung von der Fläche */
    --sh-1: 0 1px 2px rgba(16, 24, 40, .05);
    --sh-2: 0 2px 8px rgba(16, 24, 40, .07);
    --sh-3: 0 12px 32px rgba(16, 24, 40, .12);

    /* Maße */
    --sidebar-w: 264px;
    --header-h: 64px;
    --tap: 44px;              /* Mindestgröße bedienbarer Elemente */
    --content-max: 1180px;
}

/* ------------------------------------------------------------------ Base - */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }

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

code {
    font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
    font-size: .88em;
    background: var(--c-surface-sunk);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--c-text-soft);
}

img { max-width: 100%; }

/* Sichtbarer Fokus – Tastaturbedienung darf nie unsichtbar sein. */
:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------ App-Gerüst - */
.geex-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-h);
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    z-index: 40;
}
.geex-header__wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: 0 var(--s-5);
}
.geex-header__logo { display: inline-flex; align-items: center; gap: var(--s-2); }
.geex-header__logo img { height: 26px; width: auto; }
.logo-lite { display: block; }
.logo-dark { display: none; }

.app-header__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text);
    letter-spacing: -.01em;
}
.app-header__spacer { flex: 1; }

.app-user {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: var(--tap);
    padding: 0 var(--s-3);
    border-radius: var(--r-ctrl);
    color: var(--c-text-soft);
    font-size: 14px;
    font-weight: 500;
}
.app-user:hover { background: var(--c-surface-sunk); text-decoration: none; color: var(--c-text); }
.app-user__avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--c-brand-tint);
    color: var(--c-brand);
    display: grid; place-items: center;
    font-size: 12px; font-weight: 600;
}

/* Seitennavigation */
.geex-sidebar {
    position: fixed;
    top: var(--header-h); bottom: 0; left: 0;
    width: var(--sidebar-w);
    background: var(--c-surface);
    border-right: 1px solid var(--c-border);
    overflow-y: auto;
    z-index: 30;
}
.geex-sidebar__inner { padding: var(--s-5) var(--s-3) var(--s-6); }
.geex-sidebar__logo,
.geex-sidebar__close { display: none; }

.geex-sidebar__menu { list-style: none; margin: 0; padding: 0; }
.geex-sidebar__menu__item { margin-bottom: 2px; }

.geex-sidebar__menu__link {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: var(--tap);
    padding: 0 var(--s-3);
    border-radius: var(--r-ctrl);
    color: var(--c-text-soft);
    font-size: 14.5px;
    font-weight: 500;
    transition: background .12s ease, color .12s ease;
}
.geex-sidebar__menu__link:hover { background: var(--c-surface-sunk); color: var(--c-text); text-decoration: none; }
.geex-sidebar__menu__link.active {
    background: var(--c-brand-tint);
    color: var(--c-brand);
    font-weight: 600;
}
.geex-sidebar__menu__link i { font-size: 18px; flex: none; opacity: .85; }

/* Gruppentrenner: die Zugehörigkeit steckt im Abstand, nicht in einem Etikett. */
.nav-group { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--c-border); }
.nav-group__label {
    padding: 0 var(--s-3) var(--s-2);
    font-size: 12.5px;
    color: var(--c-text-mute);
}

/* Hauptbereich */
.geex-main-content { padding-top: var(--header-h); }
.geex-main-content--with-sidebar { padding-left: var(--sidebar-w); }

.geex-content { padding: var(--s-6) var(--s-5) var(--s-8); }
.geex-content__wrapper,
.geex-content__header { max-width: var(--content-max); margin-inline: auto; }

.geex-content__header { margin-bottom: var(--s-5); }
.geex-content__header__title { font-size: 25px; font-weight: 600; letter-spacing: -.02em; }
.geex-content__header__subtitle { margin: var(--s-1) 0 0; color: var(--c-text-mute); font-size: 14.5px; }

/* Mobiles Aufklappen der Navigation */
.geex-mobile-toggle {
    display: none;
    position: fixed;
    top: 12px; left: 12px;
    width: var(--tap); height: var(--tap);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-ctrl);
    z-index: 60;
    cursor: pointer;
    padding: 0;
}
.geex-mobile-toggle__bar {
    display: block;
    width: 18px; height: 2px;
    margin: 3px auto;
    background: var(--c-text);
    border-radius: 2px;
}
.geex-sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(16, 24, 40, .45);
    z-index: 25;
}

/* -------------------------------------------------------------- Buttons - */
.geex-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: var(--tap);
    padding: 0 var(--s-4);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-ctrl);
    background: var(--c-surface);
    color: var(--c-text);
    font: inherit;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s ease, border-color .12s ease;
}
.geex-btn:hover { background: var(--c-surface-sunk); border-color: var(--c-text-mute); text-decoration: none; color: var(--c-text); }
.geex-btn:active { background: #eef0f3; }

.geex-btn--primary {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: #fff;
    font-weight: 600;
}
.geex-btn--primary:hover { background: var(--c-brand-dark); border-color: var(--c-brand-dark); color: #fff; }

/* Kleiner nur in Schriftgrad und Polsterung – die Trefferfläche bleibt 44px. */
.geex-btn--sm { padding: 0 var(--s-3); font-size: 13.5px; }

.geex-btn--danger { color: var(--c-bad); border-color: var(--c-bad-line); }
.geex-btn--danger:hover { background: var(--c-bad-bg); border-color: var(--c-bad); color: var(--c-bad); }

/* --------------------------------------------------------------- Formen - */
.form-label {
    display: block;
    margin-bottom: var(--s-1);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--c-text-soft);
}

.form-control {
    display: block;
    width: 100%;
    min-height: var(--tap);
    padding: 10px var(--s-3);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-ctrl);
    background: var(--c-surface);
    color: var(--c-text);
    font: inherit;
    font-size: 15px;
}
.form-control::placeholder { color: var(--c-text-mute); }
.form-control:focus {
    outline: none;
    border-color: var(--c-brand);
    box-shadow: 0 0 0 3px rgba(31, 78, 120, .14);
}
.form-control:disabled { background: var(--c-surface-sunk); color: var(--c-text-mute); }
textarea.form-control { min-height: 76px; line-height: 1.5; resize: vertical; }
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23667085' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
input[type="file"].form-control { padding: 9px var(--s-3); }

input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--c-brand); margin: 0; }

.fleet-check {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: var(--tap);
    font-size: 14.5px;
    color: var(--c-text-soft);
    cursor: pointer;
}

.fleet-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--s-4);
    align-items: end;
    margin-top: var(--s-4);
}
.fleet-form-grid__actions { display: flex; gap: var(--s-2); align-items: end; }
.fleet-inline-form { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: flex-end; }

.fleet-hint {
    flex: 1 1 100%;
    margin: var(--s-2) 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--c-text-mute);
    max-width: 70ch;
}

/* -------------------------------------------------------------- Hinweise - */
.alert {
    padding: var(--s-3) var(--s-4);
    border: 1px solid;
    border-left-width: 3px;
    border-radius: var(--r-ctrl);
    margin-bottom: var(--s-5);
    font-size: 14.5px;
}
.alert-success { background: var(--c-ok-bg);   border-color: var(--c-ok-line);   color: #05603a; }
.alert-danger  { background: var(--c-bad-bg);  border-color: var(--c-bad-line);  color: #912018; }
.alert-warning { background: var(--c-warn-bg); border-color: var(--c-warn-line); color: #93370d; }

/* --------------------------------------------------------------- Flächen - */
.fleet-panel {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    box-shadow: var(--sh-1);
    padding: var(--s-4) var(--s-5);
    margin-bottom: var(--s-5);
}
.fleet-panel > summary {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-height: var(--tap);
    margin: calc(var(--s-4) * -1) calc(var(--s-5) * -1);
    padding: 0 var(--s-5);
    font-size: 15px;
    font-weight: 600;
    color: var(--c-brand);
    cursor: pointer;
    list-style: none;
}
.fleet-panel > summary::-webkit-details-marker { display: none; }
.fleet-panel > summary::before {
    content: "+";
    font-size: 18px;
    line-height: 1;
    color: var(--c-brand);
}
.fleet-panel[open] > summary { margin-bottom: 0; border-bottom: 1px solid var(--c-border); }
.fleet-panel[open] > summary::before { content: "–"; }
.fleet-panel--static { padding-bottom: var(--s-4); }
.fleet-panel--inner { margin: var(--s-4) 0 0; box-shadow: none; background: var(--c-surface-sunk); }

.fleet-cat-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    box-shadow: var(--sh-1);
    padding: var(--s-5);
    margin-bottom: var(--s-4);
    overflow: visible;
}
.fleet-cat-card__header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: var(--s-4); flex-wrap: wrap;
    margin-bottom: var(--s-3);
}
.fleet-cat-card__title { font-size: 17px; font-weight: 600; }
.fleet-cat-card__meta { margin-top: 2px; font-size: 13px; color: var(--c-text-mute); }

/* ------------------------------------------------------------- Tabellen - */
.fleet-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    background: var(--c-surface);
    box-shadow: var(--sh-1);
}
/* min-width ist entscheidend: mit reinem width:100% wird die Tabelle nie breiter
   als ihr Container, dann gibt es nichts zu scrollen und die Spalten quetschen. */
.fleet-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 14.5px; }
.fleet-table--items { min-width: 760px; }

.fleet-table th {
    position: sticky; top: 0;
    background: var(--c-surface-sunk);
    text-align: left;
    padding: var(--s-3) var(--s-4);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-soft);
    border-bottom: 1px solid var(--c-border);
    white-space: nowrap;
}
.fleet-table td {
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--c-border);
    vertical-align: top;
}
.fleet-table tbody tr:last-child td { border-bottom: 0; }
.fleet-table tbody tr:hover { background: var(--c-surface-sunk); }
.fleet-table .text-end { text-align: right; }
.fleet-table__edit td { background: var(--c-brand-tint); }
.fleet-table__edit tr:hover { background: var(--c-brand-tint); }
.fleet-row--inactive { opacity: .55; }
.fleet-row-actions { display: inline-flex; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; }

.fleet-cat-card .fleet-table-wrap { border: 0; border-radius: 0; box-shadow: none; }

/* ------------------------------------------- Kennzeichen und Kennzeichen - */
/* Das Nummernschild ist das Artefakt, das der Prüfer am Fahrzeug abgleicht.
   Deshalb bekommt es die Form, die er kennt – das macht Listen ohne Lesen
   scanbar und ist hier Information, nicht Dekor. */
.kfz {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 2px var(--s-2) 2px 20px;
    position: relative;
    background: #fff;
    border: 1.5px solid #1a1a1a;
    border-radius: 4px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .055em;
    color: #101828;
    white-space: nowrap;
}
.kfz::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 13px;
    background: #12369e;
    border-radius: 2px 0 0 2px;
}
.kfz--lg { min-height: 38px; font-size: 19px; padding-left: 24px; }
.kfz--lg::before { width: 16px; }

/* ---------------------------------------------------------------- Chips - */
.fleet-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--r-chip);
    border: 1px solid transparent;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
}
.fleet-badge--ok       { background: var(--c-ok-bg);   color: var(--c-ok);   border-color: var(--c-ok-line); }
.fleet-badge--due,
.fleet-badge--partial  { background: var(--c-warn-bg); color: var(--c-warn); border-color: var(--c-warn-line); }
.fleet-badge--overdue  { background: var(--c-bad-bg);  color: var(--c-bad);  border-color: var(--c-bad-line); }
.fleet-badge--muted    { background: #f2f4f7; color: var(--c-text-soft); border-color: var(--c-border); }
.fleet-table td .fleet-badge { white-space: nowrap; }

/* ----------------------------------------------------------------- KPIs - */
.fleet-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--s-4);
    margin-bottom: var(--s-5);
}
.fleet-kpi {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    box-shadow: var(--sh-1);
    padding: var(--s-4) var(--s-5);
}
.fleet-kpi__value { font-size: 31px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fleet-kpi__label { margin-top: var(--s-1); font-size: 13.5px; color: var(--c-text-mute); }
.fleet-kpi--due .fleet-kpi__value { color: var(--c-warn); }

/* ------------------------------------------------ Werkzeugleiste, Filter - */
.fleet-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    align-items: center;
    margin-bottom: var(--s-4);
}
.fleet-toolbar .fleet-search { flex: 1 1 240px; min-width: 200px; }

.fleet-filter {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: #eceef1;
    border-radius: var(--r-ctrl);
}
.fleet-filter a {
    display: inline-flex; align-items: center;
    min-height: 38px;
    padding: 0 var(--s-4);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--c-text-soft);
}
.fleet-filter a:hover { color: var(--c-text); text-decoration: none; }
.fleet-filter a.active { background: var(--c-surface); color: var(--c-text); box-shadow: var(--sh-1); font-weight: 600; }

.fleet-tabs {
    display: flex;
    gap: var(--s-5);
    margin-bottom: var(--s-5);
    border-bottom: 1px solid var(--c-border);
}
.fleet-tabs a {
    display: inline-flex; align-items: center;
    min-height: var(--tap);
    padding: 0 2px var(--s-2);
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--c-text-mute);
    font-size: 14.5px;
    font-weight: 500;
}
.fleet-tabs a:hover { color: var(--c-text); text-decoration: none; }
.fleet-tabs a.active { border-bottom-color: var(--c-brand); color: var(--c-brand); font-weight: 600; }

/* ------------------------------------------------------- Fahrzeugliste - */
.fleet-vehicle-list { display: flex; flex-direction: column; gap: var(--s-2); }

.fleet-vehicle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    min-height: 76px;
    padding: var(--s-3) var(--s-4) var(--s-3) var(--s-5);
    position: relative;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    box-shadow: var(--sh-1);
    color: inherit;
    transition: box-shadow .12s ease, border-color .12s ease;
}
.fleet-vehicle:hover { text-decoration: none; box-shadow: var(--sh-2); border-color: var(--c-border-strong); }
/* Farbige Kante statt Kachelrahmen – die Anmutung der Prüfplakette. */
.fleet-vehicle::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 5px;
    border-radius: var(--r-card) 0 0 var(--r-card);
}
.fleet-vehicle--ok::before      { background: var(--c-ok); }
.fleet-vehicle--due::before     { background: var(--c-warn); }
.fleet-vehicle--overdue::before { background: var(--c-bad); }

.fleet-vehicle__main { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.fleet-vehicle__meta { font-size: 13.5px; color: var(--c-text-mute); }
.fleet-vehicle__group { font-weight: 600; color: var(--c-text-soft); }

/* ------------------------------------------------------------ Prüfmaske - */
.fleet-cat { margin-bottom: var(--s-5); }
.fleet-cat__title {
    padding-bottom: var(--s-2);
    margin-bottom: var(--s-2);
    border-bottom: 1px solid var(--c-border);
    font-size: 16px;
    font-weight: 600;
    color: var(--c-brand);
}

.fleet-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--c-border);
}
.fleet-item:last-child { border-bottom: 0; }
.fleet-item__name { flex: 1 1 240px; font-size: 15.5px; }
.fleet-item__note { flex: 1 1 100%; margin-top: var(--s-2); }

/* Diese drei Schalter bedient jemand mit Handschuhen im Freien. */
.fleet-status { display: inline-flex; gap: var(--s-2); flex: none; }
.fleet-status__btn {
    min-width: 84px;
    min-height: 52px;
    padding: 0 var(--s-4);
    border: 1.5px solid var(--c-border-strong);
    border-radius: var(--r-ctrl);
    background: var(--c-surface);
    color: var(--c-text-soft);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .1s ease, border-color .1s ease, color .1s ease;
}
.fleet-status__btn:hover { border-color: var(--c-text-mute); }
.fleet-status__btn.is-ok.selected     { background: var(--c-ok);  border-color: var(--c-ok);  color: #fff; }
.fleet-status__btn.is-mangel.selected { background: var(--c-bad); border-color: var(--c-bad); color: #fff; }
.fleet-status__btn.is-na.selected     { background: #667085;      border-color: #667085;      color: #fff; }

.fleet-actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    gap: var(--s-3);
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: var(--s-5);
    padding: var(--s-4) var(--s-5);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    box-shadow: var(--sh-3);
}
.fleet-progress { margin-right: auto; font-size: 14px; color: var(--c-text-soft); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------- Typeinschränkungen - */
.fleet-typeblock { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--c-border); }
.fleet-radios { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-3); }
.fleet-radio {
    display: inline-flex; align-items: center; gap: var(--s-2);
    min-height: var(--tap);
    font-size: 14.5px; cursor: pointer;
}

.fleet-slugpicker {
    padding: var(--s-4);
    background: var(--c-surface-sunk);
    border: 1px solid var(--c-border);
    border-radius: var(--r-ctrl);
}
.fleet-slugpicker__tools { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.fleet-slugpicker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: var(--s-2); }
.fleet-slugpicker__item {
    display: inline-flex; align-items: center; gap: var(--s-2);
    min-height: var(--tap);
    padding: 0 var(--s-3);
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-ctrl);
    font-size: 14px;
    cursor: pointer;
}
.fleet-slugpicker__item:has(input:checked) {
    border-color: var(--c-brand);
    background: var(--c-brand-tint);
    color: var(--c-brand);
    font-weight: 600;
}

/* ---------------------------------------------------------------- Fotos - */
.fleet-photos { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.fleet-photo { position: relative; }
.fleet-photo img {
    display: block;
    width: 92px; height: 92px;
    object-fit: cover;
    border-radius: var(--r-ctrl);
    border: 1px solid var(--c-border);
}
.fleet-photo__del {
    position: absolute; top: -8px; right: -8px;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border: 2px solid var(--c-surface);
    border-radius: 50%;
    background: var(--c-bad);
    color: #fff;
    font-size: 15px; line-height: 1;
    cursor: pointer;
}
.fleet-photo-upload { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); flex-wrap: wrap; }
.fleet-photo-upload input[type="file"] { max-width: 210px; font-size: 13px; }
.fleet-photo-status { font-size: 13px; color: var(--c-text-mute); }

/* --------------------------------------------------------- Logo-Vorschau - */
.fleet-logo-preview {
    display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
    padding: var(--s-4);
    margin-bottom: var(--s-4);
    background: var(--c-surface-sunk);
    border: 1px solid var(--c-border);
    border-radius: var(--r-ctrl);
}
.fleet-logo-preview img { max-height: 64px; max-width: 240px; }

/* ------------------------------------------------------ Berichtsvorschau - */
.fleet-report {
    max-width: 880px;
    padding: var(--s-7);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    box-shadow: var(--sh-2);
}
.fleet-report__head {
    display: flex; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap;
    padding-bottom: var(--s-3);
    border-bottom: 2px solid var(--c-brand);
}
.fleet-report__company { font-size: 19px; font-weight: 600; }
.fleet-report__standort { font-size: 13.5px; color: var(--c-text-mute); }
.fleet-report__titles { text-align: right; }
.fleet-report__title { font-size: 21px; font-weight: 600; color: var(--c-brand); letter-spacing: -.01em; }
.fleet-report__subtitle { font-size: 13.5px; color: var(--c-text-mute); }

.fleet-report__meta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--s-3); margin: var(--s-5) 0;
}
.fleet-report__meta > div { padding: var(--s-3); background: var(--c-surface-sunk); border-radius: var(--r-ctrl); }
.fleet-report__meta span { display: block; font-size: 12.5px; color: var(--c-text-mute); margin-bottom: 2px; }
.fleet-report__meta strong { font-size: 15px; font-weight: 600; }

.fleet-report__badge {
    display: inline-block;
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-ctrl);
    font-weight: 600;
    margin-bottom: var(--s-5);
}
.fleet-report__badge.is-clean  { background: var(--c-ok-bg);  color: var(--c-ok); }
.fleet-report__badge.is-defect { background: var(--c-bad-bg); color: var(--c-bad); }

.fleet-report__cat { margin-bottom: var(--s-5); }
.fleet-report__cat-title {
    padding-bottom: var(--s-1); margin-bottom: var(--s-2);
    border-bottom: 1px solid var(--c-border);
    font-size: 15px; font-weight: 600; color: var(--c-brand);
}
.fleet-report__line {
    display: flex; justify-content: space-between; gap: var(--s-4);
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--c-border);
    font-size: 14.5px;
}
.fleet-report__note { margin-top: 2px; font-size: 13px; color: var(--c-text-soft); }
.fleet-res--ok     { color: var(--c-ok);   font-weight: 600; white-space: nowrap; }
.fleet-res--mangel { color: var(--c-bad);  font-weight: 600; white-space: nowrap; }
.fleet-res--na     { color: var(--c-text-mute); font-weight: 600; white-space: nowrap; }

.fleet-report__summary {
    margin-top: var(--s-4); padding-top: var(--s-3);
    border-top: 1px solid var(--c-border);
    font-size: 14px; color: var(--c-text-soft);
}
.fleet-report__signatures { display: flex; gap: var(--s-7); margin-top: var(--s-8); }
.fleet-report__signatures > div { flex: 1; padding-top: var(--s-1); border-top: 1px solid var(--c-text-soft); }
.fleet-report__signatures span { font-size: 12.5px; color: var(--c-text-mute); }

/* ------------------------------------------------------------- Anmeldung - */
.auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--s-5);
    background: var(--c-bg);
}
.auth__card {
    width: 100%;
    max-width: 420px;
    padding: var(--s-6);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    box-shadow: var(--sh-2);
}
.auth__logo { height: 30px; margin-bottom: var(--s-5); }
.auth__title { font-size: 21px; font-weight: 600; margin-bottom: var(--s-1); }
.auth__lead { color: var(--c-text-mute); font-size: 14.5px; margin-bottom: var(--s-5); }
.auth__field { margin-bottom: var(--s-4); }
.auth__demo {
    margin-top: var(--s-5); padding-top: var(--s-4);
    border-top: 1px solid var(--c-border);
    font-size: 13px; color: var(--c-text-mute);
}
.auth__demo code { font-size: 12.5px; }

/* ------------------------------------------------------------ Utilities - */
.text-muted { color: var(--c-text-mute); }
.text-end { text-align: right; }
.w-100 { width: 100%; }
.mt-4 { margin-top: var(--s-4); }

/* ----------------------------------------------------------- Responsive - */
@media (max-width: 1199px) {
    .geex-mobile-toggle { display: block; }
    .geex-header__wrapper { padding-left: 68px; }

    .geex-sidebar {
        top: 0; bottom: 0;
        width: 288px;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--sh-3);
    }
    .geex-sidebar__inner { padding-top: var(--s-6); }
    .geex-sidebar__close {
        display: grid; place-items: center;
        position: absolute; top: var(--s-3); right: var(--s-3);
        width: var(--tap); height: var(--tap);
        border-radius: var(--r-ctrl);
        color: var(--c-text-soft);
        font-size: 20px;
    }
    .geex-sidebar-open .geex-sidebar { transform: translateX(0); }
    .geex-sidebar-open .geex-sidebar-backdrop { display: block; }

    .geex-main-content--with-sidebar { padding-left: 0; }
}

@media (max-width: 767px) {
    .geex-content { padding: var(--s-5) var(--s-4) var(--s-7); }
    .geex-content__header__title { font-size: 21px; }

    .fleet-vehicle { flex-wrap: wrap; align-items: flex-start; }
    .fleet-item { align-items: flex-start; }
    .fleet-status { width: 100%; }
    .fleet-status__btn { flex: 1; min-width: 0; }

    .fleet-actions { padding: var(--s-3) var(--s-4); }
    .fleet-actions .geex-btn { flex: 1 1 auto; }
    .fleet-progress { flex: 1 1 100%; margin-bottom: var(--s-2); }

    .fleet-report { padding: var(--s-5); }
    .fleet-report__titles { text-align: left; }
}

/* --------------------------------------------------- Fortschrittsbalken - */
.fleet-meter {
    height: 8px;
    background: #eceef1;
    border-radius: 999px;
    overflow: hidden;
}
.fleet-meter__fill {
    height: 100%;
    background: var(--c-brand);
    border-radius: 999px;
    transition: width .3s ease;
}
.fleet-meter__fill.is-done { background: var(--c-ok); }
.fleet-meter__label {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--c-text-mute);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- Fahrzeugakte - */
.fleet-akte-head { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.fleet-akte-head__state { flex: 1; }

/* Zeitstrahl: die Farbe der Markierung trägt die Aussage (sauber / Mängel /
   unvollständig), damit sich der Verlauf überfliegen lässt. */
.fleet-timeline { list-style: none; margin: 0; padding: 0 0 0 var(--s-5); position: relative; }
.fleet-timeline::before {
    content: "";
    position: absolute; left: 5px; top: 6px; bottom: 6px;
    width: 2px; background: var(--c-border);
}
.fleet-timeline__item {
    position: relative;
    margin-bottom: var(--s-3);
    padding: var(--s-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    box-shadow: var(--sh-1);
}
.fleet-timeline__item::before {
    content: "";
    position: absolute;
    left: calc(var(--s-5) * -1 + 1px);
    top: 22px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--c-border-strong);
    box-shadow: 0 0 0 3px var(--c-bg);
}
.fleet-timeline__item.is-clean::before   { background: var(--c-ok); }
.fleet-timeline__item.has-defects::before { background: var(--c-bad); }
.fleet-timeline__item.is-partial::before  { background: var(--c-warn); }

.fleet-timeline__head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: var(--s-3); flex-wrap: wrap;
}
.fleet-timeline__counts { margin-top: var(--s-1); font-size: 13.5px; color: var(--c-text-mute); }
.fleet-timeline__defects {
    margin: var(--s-3) 0 0;
    padding: var(--s-3) 0 0 var(--s-4);
    border-top: 1px solid var(--c-border);
    font-size: 14px;
}
.fleet-timeline__defects li { margin-bottom: var(--s-1); }

/* --------------------------------------------------- Bewertungsskala 1–5 - */
/* Farbverlauf grün → rot, damit die Bedeutung ohne Lesen erkennbar ist.
   Die Zahl bleibt trotzdem sichtbar – Farbe allein trägt keine Information. */
.fleet-scale { display: inline-flex; gap: var(--s-1); flex: none; }
.fleet-scale__btn {
    min-width: 56px;
    min-height: 52px;
    border: 1.5px solid var(--c-border-strong);
    border-radius: var(--r-ctrl);
    background: var(--c-surface);
    color: var(--c-text-soft);
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: background .1s ease, border-color .1s ease, color .1s ease;
}
.fleet-scale__btn:hover { border-color: var(--c-text-mute); }
.fleet-scale__btn.s1.selected { background: #b42318; border-color: #b42318; color: #fff; }
.fleet-scale__btn.s2.selected { background: #d1493b; border-color: #d1493b; color: #fff; }
.fleet-scale__btn.s3.selected { background: #b54708; border-color: #b54708; color: #fff; }
.fleet-scale__btn.s4.selected { background: #3f8f4f; border-color: #3f8f4f; color: #fff; }
.fleet-scale__btn.s5.selected { background: #027a48; border-color: #027a48; color: #fff; }

.fleet-item__hint { display: block; font-size: 12.5px; color: var(--c-text-mute); margin-top: 2px; }

@media (max-width: 767px) {
    .fleet-scale { width: 100%; }
    .fleet-scale__btn { flex: 1; min-width: 0; }
}