/* Fahrzeugordner – gemeinsames Stylesheet */

@font-face {
    font-family: "Geist";
    src: url("geist-variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

/* =====================================================================
 * FARBSCHEMA – alle Farben der App werden hier definiert.
 * Zum Testen eines neuen Schemas nur diese Werte ändern (Sicherungen:
 * FARBSCHEMA-BACKUP-*-V*.md, Doku: FARBSCHEMA-HANDOVER.md).
 * ===================================================================== */
:root {
    /* ---- Basis / Flächen ---- */
    --bg: #f4f1ea;
    --surface: #fffdf8;
    --surface-2: #f8f6f0;
    --surface-hover: #f0ece2;
    --inset: #f4f1ea;
    --input-bg: #fffdf8;

    /* ---- Linien ---- */
    --border: #d8d3c7;
    --border-dim: #e2ded5;
    --border-hi: #a3aaa5;
    --input-border: #c8c3b8;

    /* ---- Text ---- */
    --text: #17201c;
    --muted: #5f6863;
    --text-dim: #69726d;
    --text-faint: #747d78;
    --white: #fff;

    /* ---- Markenfarbe (Waldgrün) ---- */
    --forest: #173f35;
    --forest-light: #23594b;
    --on-forest: #fffdf8;
    --forest-muted: #d7e2de;

    /* ---- Akzent (Marketing-Amber) ---- */
    --accent: #f2a93b;
    --accent-hi: #ffc05c;
    --accent-rgb: 242, 169, 59;          /* Tints: rgba(var(--accent-rgb), a) */
    --accent-border: #b97814;
    --accent-ink: #6b460c;
    --on-accent: #17201c;                /* Text auf Akzentfläche */

    /* ---- Status: Gefahr / überfällig ---- */
    --danger: #b64252;
    --danger-rgb: 182, 66, 82;
    --danger-border: #a33746;
    --danger-ink: #842b38;
    --danger-surface: #f7e3e6;

    /* ---- Status: OK / erledigt ---- */
    --ok: #2f7d4f;
    --ok-rgb: 47, 125, 79;
    --ok-border: #2f7d4f;
    --ok-ink: #24563d;
    --ok-surface: #d9eadf;

    /* ---- Schatten ---- */
    --shadow-rgb: 0, 0, 0;

    --radius: 7px;
}

* { box-sizing: border-box; }
button::-moz-focus-inner { border: 0; padding: 0; }
[hidden] { display: none !important; }
html { margin: 0; padding: 0; scrollbar-gutter: stable; }
body { margin: 0; padding: 0; overflow-x: hidden; }

body {
    font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    min-height: 100vh;
    min-height: 100dvh;
}

@media (display-mode: standalone) {
    body {
        padding-top: calc(env(safe-area-inset-top) + 8px);
        padding-right: env(safe-area-inset-right);
        padding-bottom: calc(env(safe-area-inset-bottom) + 14px);
        padding-left: env(safe-area-inset-left);
    }
}

.wrap { max-width: 640px; margin: 0 auto; padding: 20px; }

@media (min-width: 900px) {
    .wrap { max-width: 880px; }
    .wrap.wrap-wide { max-width: 1120px; }
}

/* ---------- Kopf + Navigation ---------- */
header.app {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px;
    padding: 12px 0 16px;
}
header.app h1 { font-size: 1.25rem; margin: 0; letter-spacing: .5px; }
header.app h1 .app-home-link { color: inherit; text-decoration: none; }
header.app h1 .app-home-link:hover { color: var(--accent); }
header.app .sub { color: var(--muted); font-size: .8rem; }
.app-brand { min-width: 0; padding-top: 1px; display: flex; align-items: center; gap: 10px; }
.brand-logo-box {
    flex: 0 0 auto;
    width: 84px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.brand-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius); }
.brand-logo-empty { color: var(--text-dim); font-size: .62rem; text-align: center; padding: 0 4px; }
.login-wrap { width: min(716px, 100%); margin: 20px auto 10px; padding: 20px; }
.login-layout { display: grid; grid-template-columns: 300px 360px; gap: 16px; align-items: start; justify-content: center; }
.login-wrap .card { margin-bottom: 0; }
.login-sidebar { display: grid; gap: 16px; min-width: 0; }
.login-info-card { min-height: 260px; }
.login-info-card--empty { min-height: 0; }
.login-info-card .brand-logo-box { width: 240px; height: 120px; max-width: 100%; margin: 0 auto 24px; justify-content: center; }
.login-info-card--empty .brand-logo-box { margin-bottom: 0; }
.login-form-card { text-align: center; }
.login-form-card h1 { margin-top: 0; }
.login-managed-content p { margin: 0 0 12px; color: var(--muted); font-size: .86rem; }
.login-managed-content p:last-child { margin-bottom: 0; }
.login-info-sections { display: grid; gap: 14px; margin-top: 18px; }
.login-info-sections h3 { margin: 0 0 5px; font-size: .92rem; }
.login-contact-card h2 { margin-top: 0; font-size: 1rem; }
.login-contact-card p { margin: 0; color: var(--muted); }
.login-contact-card address { color: var(--muted); font-size: .86rem; font-style: normal; line-height: 1.65; }
.login-contact-card address strong { color: var(--text); }
.login-contact-card a { color: var(--forest); text-underline-offset: 2px; }
.login-wrap .app-footer { margin: 16px 0 0; }
@media (max-width: 760px) {
    .login-wrap { width: min(420px, 100%); margin-top: 10px; }
    .login-layout { grid-template-columns: 1fr; }
    .login-form-card { order: -1; }
    .login-info-card { min-height: 0; }
}
.admin-logo-preview { margin: 0 0 14px; }
.admin-logo-preview .brand-logo-box { width: 240px; height: 120px; max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius); }
.admin-logo-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.customer-logo-panel { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 18px; align-items: stretch; margin-bottom: 12px; }
.customer-logo-panel .admin-logo-preview { margin: 0; }
.customer-logo-panel .brand-logo-box { height: 100%; min-height: 120px; }
.customer-logo-upload { min-width: 0; }
.customer-logo-upload .uploader { display: flex; min-height: 120px; flex-direction: column; justify-content: center; }
.customer-logo-upload .upload-actions { align-items: center; }
.customer-logo-upload .upload-actions button.primary.slim { margin-top: 0; }
.customer-logo-upload .file-hint.has-selection { color: var(--text); font-weight: 600; }
.customer-logo-remove { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border-dim); }
@media (max-width: 560px) {
    .customer-logo-panel { grid-template-columns: 1fr; }
    .customer-logo-panel .brand-logo-box { height: 120px; }
    .customer-logo-upload .upload-actions > * { width: 100%; }
}
.legal-content-editor textarea { min-height: 360px; line-height: 1.55; }
.login-content-editor textarea { min-height: 220px; line-height: 1.55; }
.admin-content-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.app-content .admin-content-actions .primary.slim,
.app-content .admin-content-actions .ghost { margin: 0; }
.app-brand .sub { overflow: hidden; max-width: 260px; text-overflow: ellipsis; white-space: nowrap; }
.app-brand .plate {
    display: inline-block;
    background: var(--white);
    color: var(--on-accent);
    border-radius: 2px;
    padding: 0 4px;
    margin-right: 3px;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; min-width: 0; }
.vehicle-switcher { display: flex; justify-content: flex-end; width: 100%; margin: 0; }
.vehicle-picker { position: relative; max-width: 100%; }
.vehicle-picker-toggle {
    max-width: 100%; padding: 6px 10px; font-size: 13px;
    border: 1px solid var(--border); border-radius: 4px;
    background: none; color: var(--muted);
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.vehicle-picker-toggle:hover { border-color: var(--accent); color: var(--text); }
.vehicle-picker-toggle .vpt-arrow { font-size: 10px; opacity: .7; }
.vehicle-picker-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 100; width: min(340px, calc(100vw - 32px)); padding: 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.vehicle-picker-panel input { width: 100%; margin-bottom: 8px; }
.vehicle-picker-list { max-height: min(360px, 50vh); overflow-y: auto; }
.vehicle-picker-list button { display: block; width: 100%; padding: 9px 10px; border: 0; font-size: 15px; line-height: 1.4; text-align: left; background: transparent; color: var(--text); }
.vehicle-picker-list button:hover, .vehicle-picker-list button:focus-visible { background: var(--surface-hover); }
.vehicle-picker-list button[aria-current] { background: var(--accent); color: #171717; }
.vehicle-picker-panel p { margin: 8px 0; font-size: .82rem; }
.vehicle-manager-head .vehicle-search { width: 280px; max-width: 100%; }
.vehicle-switcher select {
    width: auto;
    max-width: 220px;
    padding: 5px 28px 5px 8px;
    border-radius: 4px;
    background-position: right 9px center;
    font-size: 13px;
    min-height: 0;
}
.text-action {
    appearance: none;
    border: 0;
    background: none;
    color: var(--accent);
    padding: 4px 2px;
    font: inherit;
    font-size: .78rem;
    font-weight: 650;
    cursor: pointer;
}
.text-action:hover { color: var(--text); }
.header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 7px; }
a.header-link {
    color: var(--muted); text-decoration: none; font-size: 13px;
    border: 1px solid var(--border); padding: 6px 10px; border-radius: 4px;
    white-space: nowrap;
}
a.header-link:hover { border-color: var(--accent); color: var(--text); }
a.header-link.active {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}
a.header-link.active:hover { border-color: var(--accent); color: var(--on-accent); }
@media (max-width: 430px) {
    header.app { gap: 8px; }
    .app-brand { flex: 1 1 105px; }
    .app-brand .sub { max-width: 135px; }
    .header-right { max-width: calc(100% - 110px); }
    .header-actions { gap: 5px; }
    a.header-link { padding: 6px 8px; font-size: .78rem; }
    .vehicle-switcher select { max-width: 100%; }
}

.next-service {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 9px 14px;
    margin-bottom: 10px;
    font-size: .85rem;
    color: var(--muted);
}
.next-service .ns-dot {
    flex: none;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ok);
}
.next-service .ns-name { color: var(--text); font-weight: 600; }
.next-service .ns-when { margin-left: auto; text-align: right; }
.next-service.is-overdue .ns-dot { background: var(--danger); }
.next-service.is-soon .ns-dot { background: var(--accent); }
.next-service:hover { border-color: var(--accent); }
@media (max-width: 480px) {
    .next-service { flex-wrap: wrap; }
    .next-service .ns-when { margin-left: 18px; width: 100%; text-align: left; }
}

nav.main {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 24px;
    border: 1px solid var(--forest);
    background: var(--forest);
    border-radius: 6px;
    padding: 6px;
}
nav.main a {
    flex: 1 1 auto;
    text-align: center;
    text-decoration: none;
    color: var(--forest-muted);
    font-size: .86rem;
    font-weight: 600;
    padding: 9px 12px;
    border-radius: 5px;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
nav.main a:hover { color: var(--on-forest); background: var(--forest-light); }
nav.main a.active { color: var(--on-accent); background: var(--accent); }

/* ---------- Karten & Typo ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 24px;
}
h2 { font-size: 1rem; margin: 0 0 20px; }
h2 .count { color: var(--muted); font-weight: 400; }
p.lead { color: var(--muted); font-size: .9rem; margin: 0 0 20px; }

/* ---------- Formular ---------- */
.field { min-width: 0; margin-bottom: 18px; }

.form-section { margin: 0; padding: 0; border: 0; }
.form-section + .form-section {
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}
.section-heading {
    margin: 0 0 16px;
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 700;
}
summary.section-heading {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}
summary.section-heading::-webkit-details-marker { display: none; }
summary.section-heading::before {
    content: '';
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-dim);
    border-bottom: 2px solid var(--text-dim);
    transform: translateY(-2px) rotate(45deg);
    transition: transform .15s ease;
}
details.form-section[open] > summary.section-heading::before { transform: translateY(2px) rotate(225deg); }
details.form-section:not([open]) { padding-bottom: 2px; }
.form-section-intro { margin: -7px 0 16px; }
.field-hint { color: var(--text-dim); font-size: .78rem; margin: 7px 0 0; }
.vehicle-info-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; align-items: start; }
.vehicle-info-column h3 { margin: 0 0 10px; color: var(--border-hi); font-size: .92rem; }
@media (max-width: 640px) {
    .vehicle-info-columns { grid-template-columns: 1fr; gap: 20px; }
}
.vehicle-info-notes { margin-top: 22px; }
.vehicle-info-notes h3 { margin: 0 0 8px; color: var(--border-hi); font-size: .92rem; }
.vehicle-info-notes h4 { margin: 14px 0 4px; color: var(--text); font-size: .88rem; }
.vehicle-info-notes h4:first-child { margin-top: 0; }
.vehicle-info-notes p { margin: 0 0 10px; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.vehicle-info-notes p:last-child { margin-bottom: 0; }
.vehicle-contact-view-list { margin: 0; padding: 0; list-style: none; }
.vehicle-contact-view-item { padding: 14px 0; }
.vehicle-contact-view-item:first-child { padding-top: 0; }
.vehicle-contact-view-item:last-child { padding-bottom: 0; }
.vehicle-contact-view-item strong { display: block; color: var(--text); font-size: .96rem; }
.vehicle-contact-view-item .vehicle-contact-view-noname { color: var(--muted); font-weight: 500; font-style: italic; }
.vehicle-contact-view-item p { margin: 4px 0 0; color: var(--muted); font-size: .86rem; }
.vehicle-contact-view-item a { color: var(--forest); text-underline-offset: 2px; }
.vehicle-contact-view-item a:hover { color: var(--accent); }
.vehicle-contact-list { display: grid; gap: 12px; margin-top: 16px; }
.vehicle-contact-item {
    display: grid;
    grid-template-columns: 32px repeat(3, minmax(0, 1fr)) auto;
    align-items: center;
    column-gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface-2);
}
.vehicle-contact-item.is-dragging { opacity: .4; }
.vehicle-contact-drag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 38px;
    border-radius: 4px;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: grab;
    user-select: none;
    touch-action: none;
}
.vehicle-contact-drag:hover { color: var(--text); background: var(--surface-hover); }
.vehicle-contact-input { height: 38px; padding: 0 12px; font-size: 13px; }
.vehicle-contact-remove { height: 38px; padding: 0 12px; font-size: 13px; }
.vehicle-contact-add-row { display: flex; justify-content: flex-end; margin-top: 14px; }
@media (max-width: 640px) {
    .vehicle-contact-item { grid-template-columns: 32px repeat(2, minmax(0, 1fr)); row-gap: 8px; }
    .vehicle-contact-input:nth-of-type(3) { grid-column: 2 / span 2; }
    .vehicle-contact-remove { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .vehicle-contact-item { grid-template-columns: 32px 1fr; }
    .vehicle-contact-input:nth-of-type(2),
    .vehicle-contact-input:nth-of-type(3) { grid-column: 2; }
    .vehicle-contact-remove { width: 100%; }
}
.vehicle-document-scope {
    margin-top: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.vehicle-document-upload { display: inline-block; margin-top: 14px; }
.vehicle-document-selection { margin-top: 9px !important; }
.vehicle-document-selection.has-selection { color: var(--text); font-weight: 650; }
.photo-remove,
.attachment-remove {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    margin: 0;
    line-height: 1.2;
    color: var(--muted);
    font-size: .72rem;
}
.vehicle-document-scope p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.vehicle-document-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 11px; }
.vehicle-document-columns strong { display: block; font-size: .78rem; }
.vehicle-document-columns ul { margin: 5px 0 0; padding-left: 17px; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.vehicle-document-columns li + li { margin-top: 3px; }
.vehicle-document-scope .field-hint { margin-top: 10px; }

.vehicle-photo-editor {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 22px;
    min-width: 0;
}
.vehicle-photo-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.vehicle-photo-frame img {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vehicle-photo-frame > span { color: var(--text-dim); font-size: .8rem; text-align: center; padding: 16px; }
.vehicle-photo-controls {
    display: flex;
    flex: none;
    min-width: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px 16px;
}
.vehicle-photo-controls .btn-file {
    margin: 0;
    padding: 7px 12px;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.photo-remove {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--muted);
    cursor: pointer;
}
.photo-remove input:checked,
.attachment-remove input:checked { border-color: var(--danger); background: var(--danger); }
.photo-remove input:focus-visible,
.attachment-remove input:focus-visible { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(var(--danger-rgb), .2); }
@media (max-width: 520px) {
    .vehicle-photo-frame { max-height: 230px; }
    .vehicle-photo-controls { flex-wrap: wrap; }
}

label { display: block; font-size: .8rem; color: var(--muted); margin: 0 0 8px; letter-spacing: .2px; }
input, select, textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 5px;
    padding: 13px 14px;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input:not([type="checkbox"]), select { min-height: 52px; }
input[type="date"] {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    -webkit-appearance: none;
    appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
textarea { min-height: 96px; resize: vertical; }

select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235f6863' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}
select option { background: var(--surface-2); color: var(--text); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}

/* Einheitliche Checkboxen */
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    display: inline-grid;
    place-content: center;
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    min-width: 19px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--input-border);
    border-radius: 3px;
    background: var(--input-bg);
    box-shadow: inset 0 1px 2px rgba(var(--shadow-rgb), .3);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
input[type="checkbox"]::before {
    content: "";
    width: 9px;
    height: 5px;
    border-left: 2px solid var(--on-accent);
    border-bottom: 2px solid var(--on-accent);
    transform: translateY(-1px) rotate(-45deg) scale(0);
    transform-origin: center;
    transition: transform .12s ease;
}
input[type="checkbox"]:hover { border-color: var(--border-hi); }
input[type="checkbox"]:checked {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .12);
}
input[type="checkbox"]:checked::before {
    transform: translateY(-1px) rotate(-45deg) scale(1);
}
input[type="checkbox"]:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .25);
}

/* Kategorie-Mehrfachauswahl */
.checkgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 8px;
}
.check {
    display: flex; align-items: center; gap: 10px;
    margin: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 5px;
    min-height: 46px;
    padding: 11px 13px;
    font-size: .9rem;
    white-space: nowrap;
    color: var(--text);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.feature-checklist { display: flex; flex-direction: column; gap: 8px; }
.upload-compress-toggle { margin-top: 14px; min-height: 0; height: auto; white-space: normal; }
.upload-note-label { margin-top: 14px; }
.check:hover { border-color: var(--border-hi); background: var(--surface-hover); }
.check:has(input:checked) {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), .10);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .08);
}
.check:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }

.row { display: flex; gap: 16px; }
.row > .field { flex: 1 1 0; min-width: 0; }
@media (max-width: 480px) {
    .row { flex-direction: column; gap: 16px; }
}
@media (max-width: 600px) {
    .field input[type="date"] { inline-size: 100%; }
}

/* ---------- Datei-Upload ---------- */
.uploader {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 14px;
}
.upload-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-file {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface);
    color: var(--text);
    font-weight: 500;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.btn-file:hover { border-color: var(--accent); background: var(--surface-hover); }
.btn-file:active { transform: translateY(1px); }
.btn-file.cam { border-color: var(--accent); color: var(--accent); }
a.btn-file,
a.btn-file:hover { text-decoration: none; }

.file-hint { color: var(--text-faint); font-size: .85rem; margin: 12px 0 0; }
.native-file { display: block; margin-top: 4px; }

.file-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.file-list li {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 8px 10px;
    font-size: .88rem;
}
.file-list .fi-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list .fi-size { flex: none; color: var(--muted); font-size: .78rem; }
.file-list .fi-del {
    flex: none;
    border: none; background: transparent; color: var(--muted);
    font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.2; cursor: pointer; padding: 4px 6px;
    border-radius: 4px;
}
.file-list .fi-del:hover { color: var(--danger); background: rgba(var(--danger-rgb), .12); }

/* Anhänge/Dokumente mit Beschreibung: Name oben, Beschreibung volle Breite darunter, Entfernen rechts über beide Zeilen. */
.attachment-edit-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.attachment-edit-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 3px;
    column-gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--border-dim);
    border-radius: 5px;
    background: var(--surface);
    font-size: .88rem;
}
.fi-name-row { display: flex; align-items: center; gap: 10px; min-width: 0; grid-column: 1; grid-row: 1; padding-left: 6px; }
.fi-name-row a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: .95rem; font-weight: 600; text-decoration: none; }
.fi-name-row a:hover { text-decoration: underline; }
.attachment-edit-list .fi-note-edit { grid-column: 1; grid-row: 2; }
.attachment-edit-list .attachment-remove { grid-column: 2; grid-row: 1 / span 2; }
.fi-note-edit {
    display: block;
    width: 100%;
    margin: 0;
    padding: 1px 0 1px 6px;
    font-family: inherit;
    font-size: .82rem;
    line-height: 1.3;
    border: none;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--text);
}
.fi-note-edit::placeholder { color: var(--muted); }
.fi-note-edit:hover { border-bottom-color: var(--border-dim); }
.fi-note-edit:focus { outline: none; border-bottom-color: var(--accent); }
.attachment-remove {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--muted);
    font-size: .8rem;
    cursor: pointer;
}
.attachment-remove:has(input:checked) { color: var(--danger-ink); }

/* ---------- Buttons ---------- */
button.primary {
    width: 100%;
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .3px;
    border: none;
    border-radius: 6px;
    padding: 15px 18px;
    cursor: pointer;
    transition: transform .12s ease, filter .15s ease;
}
button.primary:hover { filter: brightness(1.05); }
button.primary:active { transform: translateY(1px); }
button.primary:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 2px; }
button.primary.slim { margin-top: 20px; font-size: 13px; padding: 12px 16px; }
.form-actions-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.app-content .form-actions-row :is(button, a.ghost) { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: auto; height: 40px; min-height: 40px; margin-top: 0; padding-top: 0; padding-bottom: 0; }
.form-actions-group { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-left: auto; }
a.primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .3px;
    border-radius: 6px;
    padding: 15px 18px;
    text-decoration: none;
    transition: transform .12s ease, filter .15s ease;
}
a.primary:hover { filter: brightness(1.05); }
a.primary:active { transform: translateY(1px); }
a.primary:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 2px; }
a.primary.slim { padding: 12px 16px; }

/* ---------- Speichern-Spinner ---------- */
@keyframes btn-spin { to { transform: rotate(360deg); } }
button.is-saving {
    position: relative;
    pointer-events: none;
    color: transparent !important;
    text-shadow: none;
}
button.is-saving::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.15em;
    height: 1.15em;
    margin: -0.575em 0 0 -0.575em;
    border: 2px solid var(--on-accent);
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin .6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    button.is-saving::after { animation-duration: 1.4s; }
}

/* ---------- Anleitung ---------- */
dialog[data-modal]:not([open]) { display: none !important; }
.entry-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.entry-title-row h2 { margin-bottom: 20px; }
.help-button,
.modal-close {
    border: 1px solid var(--border);
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.help-button { flex: none; padding: 7px 11px; border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.help-button:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 2px; }
.help-button:hover, .modal-close:hover { border-color: var(--accent); color: var(--text); }
.help-button:hover { color: var(--on-accent); filter: brightness(1.05); }
.help-modal {
    width: min(720px, calc(100% - 24px));
    height: fit-content;
    min-height: 0;
    max-height: 78dvh;
    position: fixed;
    top: calc(50% + 10px);
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 18px 50px rgba(var(--shadow-rgb), .5);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
@media (display-mode: standalone) {
    .help-modal {
        top: 50%;
        bottom: auto;
        height: fit-content;
        min-height: 0;
        max-height: 78dvh;
        margin-block: auto;
        transform: translate(-50%, -50%);
    }
}
.help-modal::backdrop { background: rgba(var(--shadow-rgb), .68); }
.help-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.help-modal h2 { margin: 0; }
.modal-close { min-height: 32px; padding: 6px 9px; font-size: .76rem; line-height: 1.2; }
.help-intro { margin: 6px 0 20px; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.help-list { display: grid; gap: 0; }
.help-list section { padding: 0 0 18px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
.help-list section + section { padding-top: 22px; }
.help-list section:last-child { padding-bottom: 0; border-bottom: 0; }
.help-list h3 { margin: 0 0 9px; font-size: 1.02rem; }
.help-list p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.65; }
.help-list ol { margin: 11px 0 0; padding-left: 22px; color: var(--muted); font-size: .92rem; line-height: 1.65; }
.help-list ul { margin: 11px 0 0; padding-left: 22px; color: var(--muted); font-size: .92rem; line-height: 1.65; }
.help-list li + li { margin-top: 6px; }
.help-modal .help-list a {
    color: var(--text);
    font-weight: 650;
    text-decoration: none;
    border-bottom: 1px solid var(--border);
}
.help-modal .help-list a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.guide-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 20px; }
.guide-index a { padding: 9px 10px; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); font-size: .78rem; font-weight: 650; text-decoration: none; text-align: center; }
.guide-index a:hover { border-color: var(--accent); color: var(--text); }
.guide-sections { display: grid; gap: 12px; margin-top: 20px; }
.guide-sections section { scroll-margin-top: 16px; padding: 14px 15px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-2); }
.guide-sections h3 { margin: 0 0 6px; font-size: .92rem; }
.guide-sections p, .guide-sections li { color: var(--muted); font-size: .8rem; line-height: 1.5; }
.guide-sections p { margin: 0 0 8px; }
.guide-sections p:last-child { margin-bottom: 0; }
.guide-sections ul, .guide-sections ol { margin: 7px 0 8px; padding-left: 20px; }
@media (max-width: 600px) { .guide-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guide-standalone { min-height: 100vh; }
.guide-shell { width: min(1060px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 60px; }
.guide-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.guide-header h1 { margin: 6px 0 0; font-size: 1.65rem; }
.guide-close { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); font-size: 13px; font-weight: 500; text-decoration: none; }
.guide-close:hover { border-color: var(--accent); color: var(--text); }
.guide-modal { width: min(680px, calc(100% - 24px)); max-height: min(760px, calc(100dvh - 24px)); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); box-shadow: 0 18px 50px rgba(var(--shadow-rgb), .55); }
.guide-modal::backdrop { background: rgba(var(--shadow-rgb), .78); }
.guide-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.guide-modal-head h2 { margin: 0; font-size: 1rem; }
.guide-modal-body { max-height: calc(100dvh - 100px); overflow-y: auto; padding: 16px; }
@media (display-mode: standalone) { .guide-modal { max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px); } .guide-modal-body { max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 90px); } }
@media (max-width: 600px) { .guide-modal { width: calc(100% - 12px); max-height: calc(100dvh - 16px); } .guide-modal-body { padding: 12px; max-height: calc(100dvh - 76px); } }
.guide-hero { padding: 24px 0 12px; }
.guide-hero h2 { margin: 7px 0 8px; font-size: 1.45rem; }
.guide-hero p { max-width: 700px; margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.guide-content { display: grid; gap: 12px; margin-top: 20px; }
.guide-feature, .guide-section { scroll-margin-top: 70px; padding: 17px 18px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.guide-feature { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 16px; background: var(--surface-2); }
.guide-feature h2, .guide-section h3 { margin: 0 0 8px; font-size: 1rem; }
.guide-number { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--accent-border); border-radius: 5px; color: var(--accent-ink); font-size: .75rem; font-weight: 750; }
.guide-feature p, .guide-section p, .guide-feature li { color: var(--muted); font-size: .82rem; line-height: 1.55; }
.guide-feature ol { margin: 10px 0 0; padding-left: 20px; }
.guide-callout { display: grid; gap: 4px; margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--accent); background: rgba(var(--accent-rgb), .08); }
.guide-callout strong { color: var(--accent-ink); font-size: .78rem; }
.guide-callout span { color: var(--muted); font-size: .8rem; line-height: 1.45; }
.guide-permissions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.guide-permissions div { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 5px; background: var(--inset); }
.guide-permissions strong { font-size: .78rem; }
.guide-permissions span { color: var(--muted); font-size: .76rem; line-height: 1.4; }
.guide-modal { width: min(760px, calc(100% - 20px)); height: fit-content; min-height: 0; max-height: 78dvh; margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); box-shadow: 0 18px 50px rgba(var(--shadow-rgb), .55); }
.guide-modal::backdrop { background: rgba(var(--shadow-rgb), .78); }
.guide-modal-head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.guide-modal-head h2 { margin: 0; font-size: .95rem; }
.guide-modal-body { max-height: calc(78dvh - 54px); min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px; }
.guide-modal-body .help-list { display: grid; gap: 9px; }
.guide-modal-body .help-list section { padding: 0 0 18px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
.guide-modal-body .help-list section + section { padding-top: 18px; }
.guide-modal-body .help-list section:last-child { padding-bottom: 0; border-bottom: 0; }
@media (max-width: 600px) { .guide-shell { width: calc(100% - 20px); padding-top: 16px; } .guide-header { align-items: flex-start; flex-direction: column; gap: 12px; } .guide-feature { grid-template-columns: 1fr; gap: 10px; } .guide-permissions { grid-template-columns: 1fr; } }

/* Eigenständige Dokumentationsseite: Navigation links, Lesespalte rechts. */
.guide-shell { width: min(1180px, calc(100% - 64px)); padding: 42px 0 80px; }
.guide-header { padding-bottom: 28px; }
.guide-header h1 { font-size: 2rem; letter-spacing: 0; }
.guide-hero { padding: 34px 0 28px; }
.guide-hero h2 { margin: 8px 0 10px; font-size: 1.7rem; }
.guide-hero p { max-width: 760px; font-size: 1rem; }
.guide-layout { display: grid; grid-template-columns: 230px minmax(0, 760px); align-items: start; gap: 34px; }
.guide-index { position: static; display: flex; flex-wrap: wrap; align-items: center; column-gap: 0; row-gap: 8px; margin: 0 0 24px; padding: 0 0 14px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
.guide-index::before { content: none; }
.legal-page .guide-index a { display: inline; padding: 3px 8px; margin: -3px -8px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: .86rem; font-weight: 400; line-height: 1.45; text-align: left; text-decoration: none; white-space: nowrap; }
.guide-index span { display: inline; margin: 0 10px; color: var(--border); font-weight: 400; }
.guide-index a:hover { color: var(--accent); }
.guide-index a.active { background: var(--bg); color: var(--text); font-weight: 400; }
.guide-close-row { display: flex; justify-content: flex-end; gap: 12px; margin: 0 0 0 auto; }
.guide-close { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); font-size: 13px; line-height: 1.2; text-align: center; text-decoration: none; }
.guide-close:hover { border-color: var(--accent); color: var(--accent); }
.guide-content { display: grid; gap: 16px; margin: 0; }
.guide-feature, .guide-section { padding: 22px 24px; border-radius: 7px; }
.guide-feature h2, .guide-section h3 { margin-bottom: 12px; font-size: 1.12rem; }
.guide-feature p, .guide-section p, .guide-feature li { font-size: .9rem; line-height: 1.65; }
.guide-section p { margin-bottom: 12px; }
.guide-callout { margin-top: 16px; padding: 13px 15px; }
.guide-permissions { gap: 12px; margin: 18px 0; }
.guide-permissions div { padding: 13px 15px; }
.guide-permissions span { font-size: .82rem; line-height: 1.5; }
@media (max-width: 800px) {
    .guide-shell { width: calc(100% - 28px); padding-top: 24px; }
    .guide-layout { grid-template-columns: 1fr; gap: 18px; }
    .guide-index { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .guide-index::before { grid-column: 1 / -1; }
}

/* Einheitlicher Modalaufbau: fester Kopf, scrollbarer Inhalt, 30px Abschlussabstand. */
.help-modal { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.help-modal-head { position: sticky; top: 0; z-index: 1; flex: none; padding: 12px 30px; background: var(--surface); border-bottom: 1px solid var(--border); }
.help-modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 20px 30px 30px; }
.guide-modal { display: flex; flex-direction: column; }
.guide-modal-head { position: sticky; top: 0; z-index: 1; }
.guide-modal-body { padding: 20px 30px 30px; }
@media (max-width: 600px) {
    .help-modal-head { padding-inline: 20px; }
    .help-modal-body, .guide-modal-body { padding: 18px 20px 30px; }
}

/* ---------- Seitenfooter ---------- */
.app-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: -12px 0 20px;
    padding: 16px 5px 0;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: .72rem;
}
.app-footer a { color: var(--muted); text-decoration: none; }
.app-footer a:hover { color: var(--accent); }
.app-footer-main.active { color: var(--accent); font-weight: 700; }
.app-footer-meta a.active { color: var(--accent); font-weight: 700; }
.app-footer-main { flex: none; }
.app-footer-meta { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-left: auto; }
.app-footer-version { color: var(--text-faint); white-space: nowrap; }
.legal-page a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.legal-page a:hover { color: var(--accent); }
@media (max-width: 430px) {
    .app-footer { gap: 7px 10px; margin-top: -4px; font-size: .70rem; }
    .app-footer-meta { gap: 8px; }
    .guide-index { row-gap: 7px; }
    .guide-index span { margin: 0 7px; }
    .guide-index a { font-size: .8rem; }
    .guide-close { padding: 5px 7px; font-size: .72rem; }
}

/* ---------- Wartungseintrag-Wizard ---------- */
.entry-wizard { min-width: 0; }
.wizard-progress {
    margin: -4px 0 22px;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 650;
}
.wizard-step[hidden] { display: none; }
.fahrtenbuch-klassifizierung { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.fahrtenbuch-klassifizierung .check { min-height: 42px; padding: 9px 11px; white-space: normal; }
.fahrtenbuch-klassifizierung input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 18px;
    width: 18px;
    min-width: 18px;
    min-height: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--input-border);
    border-radius: 50%;
    background: var(--input-bg);
    box-shadow: inset 0 1px 2px rgba(var(--shadow-rgb), .2);
    cursor: pointer;
}
.fahrtenbuch-klassifizierung input[type="radio"]:checked {
    border: 5px solid var(--accent);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .12);
}
.fahrtenbuch-klassifizierung input[type="radio"]:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .25);
}
details.addbox.fahrtenbuch-zwischenziele { display: block; }
details.addbox.fahrtenbuch-zwischenziele > summary { display: flex; gap: 8px; width: fit-content; margin-left: auto; }
.fahrtenbuch-zwischenziele > summary::after {
    content: '';
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-dim);
    border-bottom: 2px solid var(--text-dim);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s ease;
}
.fahrtenbuch-zwischenziele[open] { padding: 14px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-2); }
.fahrtenbuch-zwischenziele[open] > summary { margin-bottom: 12px; }
.fahrtenbuch-zwischenziele[open] > summary::after { transform: rotate(225deg) translateY(2px); }
.zwischenziele-list { display: grid; gap: 12px; width: 100%; }
.zwischenziele-list .field { margin: 0; }
@media (max-width: 700px) { .zwischenziele-list .row { flex-direction: column; gap: 0; } }
.wizard-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
}
.wizard-actions .primary { flex: 0 0 auto; }
.wizard-actions .ghost { flex: 0 0 auto; }
.wizard-actions .primary.slim { width: auto; margin-top: 0; }
.wizard-back { padding: 11px 16px; }
.admin-user-list { display: grid; gap: 8px; }
.admin-user-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface-2);
}
.admin-user-row > div:first-child { min-width: 0; }
.admin-user-note {
    flex-basis: 100%;
    margin-top: 4px;
    padding-top: 10px;
    padding-left: 4px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: .85rem;
}
.admin-user-note p { margin: 0 0 6px; }
.admin-user-note p:last-child { margin-bottom: 0; }
.admin-user-actions { display: flex; align-items: center; gap: 18px; flex: none; }
.admin-user-actions-row {
    flex-basis: 100%;
    flex: 0 0 100%;
    justify-content: flex-end;
    margin-top: 0;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.admin-user-actions form { margin: 0; }
.admin-user-plan-col { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.admin-user-plan-badge { font-size: 1.02rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.admin-user-plan-badge .admin-user-plan-price { font-weight: 500; color: var(--muted); }
.admin-user-contract { color: var(--muted); font-size: .76rem; white-space: nowrap; }
.admin-user-plan-col .admin-user-actions { gap: 10px; }
.admin-user-row strong,
.admin-user-row small { display: block; }
.admin-user-row small { margin-top: 3px; color: var(--muted); font-size: .76rem; }
.admin-user-row .admin-user-stats { font-weight: 650; }
.app-content > .card.admin-stat-user,
.app-content > .card.admin-stat-user + .card.admin-stat-user {
    margin: 0 0 18px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .08);
}
.admin-stat-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.admin-stat-user-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.admin-stat-user-head h2 { margin-bottom: 3px; }
.admin-stat-user-head p { margin: 0; color: var(--muted); font-size: .8rem; }
.admin-stat-details { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr); gap: 20px; margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--border); }
.admin-stat-details h3 { margin: 0 0 7px; font-size: .82rem; }
.admin-stat-details p { margin: 0; color: var(--muted); font-size: .8rem; }
.admin-stat-categories { display: flex; flex-wrap: wrap; gap: 7px; }
.admin-stat-categories span { padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); color: var(--muted); font-size: .75rem; }
.admin-stat-categories strong { color: var(--text); }
.user-delete { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.user-delete:hover { color: var(--danger); }
.user-admin-label { color: var(--muted); font-size: .76rem; }
.user-backup { color: var(--muted); font-size: .76rem; text-decoration: none; }
.user-backup:hover { color: var(--accent); }
.user-action-button { display: inline-block; padding: 6px 9px; border: 1px solid var(--border); border-radius: 4px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 500; text-decoration: none; }
.user-action-button:hover { border-color: var(--accent); color: var(--text); }
@media (max-width: 520px) {
    .admin-user-row { align-items: flex-start; }
    .admin-user-actions { flex-direction: column; align-items: flex-end; gap: 7px; }
    .app-content > .card.admin-stat-user,
    .app-content > .card.admin-stat-user + .card.admin-stat-user { padding: 16px; }
    .admin-stat-summary { grid-template-columns: 1fr 1fr; }
    .admin-stat-summary > div:last-child { grid-column: span 2; }
    .admin-stat-details { grid-template-columns: 1fr; }
    .admin-stat-user-head { flex-direction: column; }
}
.demo-note {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: .8rem;
    text-align: center;
}
.admin-area {
    margin-top: 26px;
    margin-bottom: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}
.admin-area > h2 { margin-bottom: 18px; }
.admin-area > .card { margin-bottom: 18px; }
.admin-area > .card:last-child { margin-bottom: 0; }
.admin-area .primary-link { display: inline-block; padding: 10px 14px; border-radius: 4px; background: var(--accent); color: var(--on-accent); font-weight: 500; font-size: 13px; text-decoration: none; }
.admin-backup-actions .primary-link { display: inline-block; padding: 10px 14px; border: 1px solid var(--accent); border-radius: 4px; background: var(--accent); color: var(--on-accent); font-weight: 500; font-size: 13px; text-decoration: none; }
.admin-backup-actions .primary-link:hover { filter: brightness(1.05); }
.admin-backup-actions .primary-link,
.admin-backup-actions a.ghost {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}
.admin-dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.admin-dashboard-link { display: flex; min-height: 125px; flex-direction: column; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-2); color: var(--text); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.admin-dashboard-link:hover,
.admin-dashboard-link:focus-visible {
    border-color: var(--accent);
    background: var(--surface-2);
    box-shadow: 0 6px 16px rgba(var(--shadow-rgb), .12);
    transform: translateY(-1px);
}
.admin-dashboard-link strong { font-size: .9rem; }
.admin-dashboard-link span { color: var(--muted); font-size: .76rem; line-height: 1.45; }
.admin-cron-help { margin-top: 18px; }
.admin-cron-help h3 { margin: 18px 0 7px; font-size: .86rem; }
.admin-cron-help pre { margin: 0; overflow-x: auto; padding: 10px 12px; border: 1px solid var(--border-dim); border-radius: 4px; background: var(--inset); color: var(--text); font-size: .72rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-cron-help code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
@media (max-width: 600px) { .admin-dashboard-grid { grid-template-columns: 1fr; } .admin-dashboard-link { min-height: 0; } }
.hosting-check-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hosting-check-list li { padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); font-size: .8rem; line-height: 1.5; }
.hosting-check-list code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.hosting-check-fail { border-color: var(--danger-border); background: var(--danger-surface); color: var(--danger-ink); }
.hosting-check-unknown { color: var(--muted); }
.admin-system-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-system-actions form { margin: 0; }
.app-content .admin-system-actions button.primary.slim,
.app-content .admin-system-actions button.ghost.slim { width: auto; margin: 0; }
.admin-smtp-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; align-items: end; }
.admin-smtp-form .field { margin-bottom: 0; }
.admin-smtp-form button { grid-column: 1 / -1; justify-self: start; }
.admin-smtp-test { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-dim); }
.admin-smtp-test .field { flex: 1 1 220px; }
.app-content .admin-smtp-test .field { margin-bottom: 0; }
.admin-smtp-test button.ghost { min-height: 40px; }
@media (max-width: 520px) { .admin-smtp-form { grid-template-columns: 1fr; } }
.admin-webcron h3 { margin: 18px 0 7px; font-size: .86rem; }
.admin-webcron .field-hint { max-width: 78ch; line-height: 1.5; }
.webcron-url { margin: 0; padding: 10px 12px; border: 1px solid var(--border-dim); border-radius: 4px; background: var(--inset); color: var(--text); font-size: .72rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.webcron-url code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.admin-cli-card details { margin: 0; }
.admin-cli-card summary { color: var(--text); font-size: 1rem; font-weight: 700; cursor: pointer; }
.admin-cli-card h3 { margin: 18px 0 7px; font-size: .86rem; }
.admin-cli-card pre { margin: 0; overflow-x: auto; padding: 10px 12px; border: 1px solid var(--border-dim); border-radius: 4px; background: var(--inset); color: var(--text); font-size: .72rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 520px) { .admin-system-actions form { flex: 1 1 100%; } .admin-system-actions button { width: 100%; } }
.reinstall-form { display: grid; gap: 18px; }
.reinstall-choice { display: grid; gap: 9px; margin: 0; padding: 0; border: 0; }
.reinstall-choice legend { margin-bottom: 10px; color: var(--muted); font-size: .82rem; font-weight: 650; }
.notify-email-choice { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; display: grid; gap: 8px; }
.notify-email-choice legend { margin-bottom: 8px; color: var(--muted); font-size: .82rem; font-weight: 650; }
.notify-email-choice > label { min-width: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-2); font-size: .86rem; cursor: pointer; }
.notify-email-choice > label:hover { border-color: var(--border-hi); background: var(--surface-hover); }
.notify-email-choice > label:has(input[type="radio"]:checked) { border-color: var(--accent); background: rgba(var(--accent-rgb), .08); }
.notify-email-choice input[type="radio"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.notify-email-choice input[type="email"] { min-width: 0; max-width: 100%; box-sizing: border-box; min-height: 34px; padding: 6px 8px; flex: 1 1 220px; width: auto; }
.reinstall-option { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-2); cursor: pointer; }
.reinstall-option:hover { border-color: var(--border-hi); background: var(--surface-hover); }
.reinstall-option:has(input:checked) { border-color: var(--accent); background: rgba(var(--accent-rgb), .08); }
.reinstall-option input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.reinstall-option span { display: grid; gap: 3px; }
.reinstall-option strong { font-size: .9rem; }
.reinstall-option small { color: var(--muted); font-size: .78rem; line-height: 1.4; }
.reinstall-option.is-danger:has(input:checked) { border-color: var(--danger); background: rgba(var(--danger-rgb), .1); }
.reinstall-delete-fields { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--danger-border); border-radius: 5px; background: rgba(var(--danger-rgb), .08); }
.reinstall-delete-fields .field { margin: 0; }
.reinstall-warning { margin: 0; color: var(--danger-ink); font-size: .84rem; }
.reinstall-archive { display: flex; align-items: center; gap: 9px; color: var(--text); font-size: .83rem; cursor: pointer; }
.reinstall-form .primary.slim { width: auto; min-width: 220px; margin: 0; }
@media (max-width: 520px) { .reinstall-form .primary.slim { width: 100%; } }
.backup-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.backup-note { margin-top: 16px; }
.backup-settings-note { margin-bottom: 18px; }

/* Gemeinsame vertikale Zentrierung für alle sichtbaren Aktionsbuttons. */
button.primary,
a.primary,
button.ghost,
a.ghost,
a.header-link,
.btn-file,
.primary-link,
.user-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}
.offline-entry-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 20px;
    padding: 10px 12px;
    border: 1px solid var(--accent-border);
    border-radius: 5px;
    background: rgba(var(--accent-rgb), .08);
    color: var(--accent-ink);
    font-size: .8rem;
}
.offline-entry-status .text-action { flex: none; padding: 0; }

button.ghost {
    appearance: none; -webkit-appearance: none;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 5px;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
button.ghost:hover { border-color: var(--accent); color: var(--text); }
button.ghost.danger-action:hover,
button.ghost.danger-action:focus-visible { border-color: var(--danger); color: var(--danger); }
.cost-year-filter button.ghost:hover { border-color: var(--accent); color: var(--text); }
.cost-year-filter button.ghost { border-color: var(--border); background: transparent; color: var(--muted); }
.cost-year-filter button.ghost:hover { border-color: var(--accent); background: transparent; color: var(--text); }
.cost-year-filter .filter-multiselect-toggle { min-height: 38px; padding: 8px 12px; }

/* ---------- Meldungen ---------- */
.flash {
    background: var(--ok-surface); border: 1px solid var(--ok-border); color: var(--ok-ink);
    padding: 10px 12px; border-radius: 5px; margin-bottom: 20px; font-size: .9rem;
}
.error {
    background: var(--danger-surface); border: 1px solid var(--danger-border); color: var(--danger-ink);
    padding: 10px 12px; border-radius: 5px; margin-bottom: 20px; font-size: .9rem;
}

/* ---------- Suche & Filter ---------- */
.filters {
    margin-bottom: 18px;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(190px, 1.35fr) minmax(390px, 2fr) auto;
    gap: 10px;
    align-items: stretch;
}
.filters input[type="search"] { background: var(--surface); }
.filters input[type="search"]::-webkit-search-cancel-button {
    cursor: pointer;
    filter: none;
    opacity: .65;
}
.filters-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.filters > input[type="search"],
.filters .filter-multiselect-toggle { height: 44px; min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
.filter-multiselect { position: relative; min-width: 0; }
.filter-multiselect-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
.filter-multiselect-toggle:hover { border-color: var(--border-hi); }
.filter-multiselect-toggle:focus-visible,
.filter-multiselect-toggle[aria-expanded="true"] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}
.filter-multiselect-toggle > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-multiselect-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 5px);
    left: 0;
    width: max(100%, 210px);
    padding: 8px;
    border: 1px solid var(--border-hi);
    border-radius: 6px;
    background: var(--inset);
    box-shadow: 0 12px 28px rgba(var(--shadow-rgb), .38);
}
.filter-multiselect-options { display: grid; gap: 2px; max-height: 240px; overflow-y: auto; }
.filter-multiselect-option {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    padding: 7px 8px;
    border-radius: 4px;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
}
.filter-multiselect-option:hover { background: var(--surface-hover); }
.filter-multiselect-clear {
    width: 100%;
    margin-top: 7px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.filter-multiselect-clear:hover { border-color: var(--accent); color: var(--text); }
.filter-multiselect-panel small { display: block; margin-top: 6px; color: var(--text-faint); font-size: .68rem; text-align: center; }
@media (max-width: 480px) {
    .filters-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filter-multiselect:first-child { grid-column: 1 / -1; }
    .filter-multiselect-panel { width: max(100%, 190px); }
}
.filters-actions { display: flex; gap: 10px; align-items: stretch; }
.app-content .filters-actions .primary.slim,
.app-content .filters-actions .ghost { height: 44px; min-height: 44px; margin-top: 0; flex: 0 0 auto; width: auto; padding: 10px 20px; }
@media (max-width: 899px) {
    .filters { grid-template-columns: 1fr; }
    .filters-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .filters-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filters-actions { justify-content: flex-start; }
}

/* ---------- Historie ---------- */
.history-page { margin-bottom: 24px; }
.history-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.history-card-head h2 { display: flex; min-width: 0; align-items: baseline; gap: 12px; margin: 0; font-size: 1.25rem; }
.history-card-head h2 .count { color: var(--muted); font-size: .8rem; font-weight: 500; white-space: nowrap; }
.history-card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.history-summary { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; padding: 14px 16px 0; }
.history-summary small { color: var(--text-dim); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.history-summary strong { color: var(--text); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.history-export-form { display: grid; gap: 14px; }
.history-export-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.history-export-form legend { margin-bottom: 7px; color: var(--text); font-size: .8rem; font-weight: 700; }
.history-export-form .export-choice-grid,
.history-export-form .format-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.history-export-attachments { align-items: flex-start; white-space: normal; }
.history-export-attachments span { min-width: 0; }
.history-export-attachments strong,
.history-export-attachments small { display: block; }
.history-export-attachments strong { color: var(--text); font-weight: 550; }
.history-export-attachments small { margin-top: 2px; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.history-export-hint { margin: -5px 0 0; color: var(--muted); font-size: .72rem; }
    .history-export-form > .primary { justify-self: start; margin-top: 0; }
@media (max-width: 480px) {
    .history-export-form .export-choice-grid,
    .history-export-form .format-grid { grid-template-columns: 1fr; }
}
.badge {
    display: inline-block; font-size: .72rem; background: var(--surface-2);
    border: 1px solid var(--border); color: var(--muted);
    padding: 2px 9px; border-radius: 3px;
}
.empty { color: var(--muted); font-size: .9rem; }

.history-columns,
.history-row {
    display: grid;
    grid-template-columns: 20px 82px minmax(0, 1fr) 100px 120px;
    column-gap: 16px;
    align-items: baseline;
}
.history-columns {
    margin-top: 22px;
    padding: 0 16px 8px;
    border-bottom: 1px solid var(--border);
    color: var(--text-dim);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.history-columns span:nth-child(4),
.history-columns span:nth-child(5) { text-align: right; }
.hist { overflow: hidden; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 8px 8px; background: var(--surface); }
.history-month-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}
.history-month-group + .history-month-group .history-month-head { border-top: 1px solid var(--border); }
.history-month-head strong { letter-spacing: .04em; text-transform: uppercase; }
.hist-item { border: 0; border-bottom: 1px solid var(--border-dim); background: var(--surface); }
.hist-item:last-child { border-bottom: 0; }
.history-row {
    position: relative;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    transition: background .15s ease;
}
.history-row::-webkit-details-marker { display: none; }
.history-row:hover,
.history-row:focus-visible,
.hist-item[open] > .history-row { background: var(--surface-hover); }
.history-row:focus-visible { outline: 2px solid var(--forest); outline-offset: -2px; }
.history-col-date,
.history-col-km { color: var(--text-dim); font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.history-col-km,
.history-col-money { text-align: right; }
.history-col-money { font-size: .94rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.history-col-main { display: block; min-width: 0; }
.history-row-title { display: flex; min-width: 0; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.history-row-title strong { font-size: .94rem; font-weight: 650; line-height: 1.4; }
.history-row-title small { padding: 1px 6px; border: 1px solid var(--border); border-radius: 4px; color: var(--text-dim); font-size: .65rem; white-space: nowrap; }
.history-row-subline { display: flex; min-width: 0; align-items: baseline; gap: 8px; margin-top: 2px; color: var(--text-dim); font-size: .75rem; }
.history-row-subline span:first-child { flex: none; color: var(--accent-ink); }
.history-row-subline span + span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-row-chevron {
    justify-self: start;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-dim);
    border-bottom: 2px solid var(--text-dim);
    transform: translateY(-2px) rotate(45deg);
    transition: transform .15s ease;
}
.hist-item[open] .history-row-chevron { transform: translateY(2px) rotate(225deg); }
.history-details { padding: 18px 16px 20px 134px; border-top: 1px solid var(--border-dim); background: var(--surface-2); }
.history-detail-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; }
.history-detail-facts div { min-width: 0; padding: 9px 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); }
.history-detail-facts dt { color: var(--text-dim); font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; }
.history-detail-facts dd { margin: 3px 0 0; color: var(--text); font-size: .82rem; font-weight: 650; overflow-wrap: anywhere; }
.history-detail-block { margin-top: 16px; }
.history-detail-block > strong { display: block; margin-bottom: 5px; color: var(--text); font-size: .76rem; }
.history-detail-block p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.change-log { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.change-log-entry { padding: 10px 12px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); }
.change-log-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 4px; color: var(--text-dim); font-size: .72rem; }
.change-log-body { color: var(--text); font-size: .84rem; line-height: 1.5; }
.change-log-reason { margin-top: 3px; color: var(--muted); font-size: .8rem; font-style: italic; }
.fahrt-technical-details { margin: 16px 0 0; color: var(--text-faint); font-size: .74rem; text-align: right; }
.action-form .field-submit { flex: 0 0 auto; display: flex; align-self: flex-end; }
.fahrt-storno-link { margin-top: 16px; }
.hi-attachments { margin-top: 16px; }
.history-attachments-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.history-attachments-head > strong { color: var(--text); font-size: .76rem; }
.history-attachments-head form { margin: 0; }
.history-download-all {
    white-space: nowrap;
}
.thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.hi-attachments .thumbs { margin-top: 0; }
.thumbs .history-attachment {
    display: grid; grid-template-rows: 72px auto; width: 138px; min-width: 0;
    border: 1px solid var(--border); border-radius: 5px;
    overflow: hidden; background: var(--surface); text-decoration: none;
    transition: border-color .15s ease;
}
.thumbs .history-attachment:hover { border-color: var(--accent); }
.history-attachment-preview { display: grid; place-items: center; min-width: 0; background: var(--surface-2); }
.thumbs img { width: 100%; height: 72px; object-fit: cover; display: block; }
.thumbs .file-type {
    display: grid; place-items: center; min-width: 48px; height: 34px; padding: 0 9px;
    border: 1px solid var(--border); border-radius: 4px; background: var(--surface);
    font-size: .65rem; font-weight: 800; color: var(--muted); letter-spacing: .05em;
}
.history-attachment-name {
    min-width: 0; padding: 7px 8px 8px; color: var(--muted); font-size: .7rem;
    line-height: 1.3; overflow-wrap: anywhere;
}
.history-attachment-name:has(+ .history-attachment-note) { padding-bottom: 0; }
.history-attachment-note {
    min-width: 0; padding: 2px 8px 8px; color: var(--text); font-size: .7rem;
    font-weight: 600; line-height: 1.3; overflow-wrap: anywhere;
}
.thumbs .history-attachment[data-type="image"] { cursor: zoom-in; }

/* ---------- Lightbox ---------- */
body.lb-lock { overflow: hidden; }
.lb {
    position: fixed; inset: 0; z-index: 1000;
    display: none; align-items: center; justify-content: center;
    background: rgba(var(--shadow-rgb), .82); padding: 24px 12px;
}
@media (display-mode: standalone) {
    .lb {
        padding-top: calc(env(safe-area-inset-top) + 20px);
        padding-right: calc(env(safe-area-inset-right) + 12px);
        padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
        padding-left: calc(env(safe-area-inset-left) + 12px);
    }
}
.lb.is-open { display: flex; }
.lb-stage {
    margin: 0; width: 100%; max-width: 96vw; max-height: 100%;
    display: flex; flex-direction: column; gap: 10px; align-items: center;
}
/* PDF-Bühne darf die volle Breite nutzen, Bild bleibt zentriert kompakt. */
.lb-stage:has(.lb-img:not([hidden])) { max-width: min(1100px, 96vw); }
.lb-img {
    max-width: min(100%, 1100px); max-height: calc(100vh - 120px);
    object-fit: contain; border-radius: 5px; background: var(--bg);
    cursor: zoom-in; transition: transform .18s ease;
}
.lb-img.is-zoomed { transform: scale(1.9); cursor: zoom-out; }
.lb-pdf {
    width: min(900px, 90vw); max-width: 100%; height: calc(100vh - 120px);
    border: 1px solid var(--border); border-radius: 5px; background: var(--white);
}
.lb-pdf[hidden], .lb-img[hidden] { display: none; }
.lb-bar {
    display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
    justify-content: center; padding: 8px 10px; border: 1px solid var(--border);
    border-radius: 6px; background: var(--surface); box-shadow: 0 8px 28px rgba(var(--shadow-rgb), .22);
    color: var(--text); font-size: .82rem;
}
.lb-caption { color: var(--muted); }
.lb-counter { color: var(--muted); font-variant-numeric: tabular-nums; }
.lb-download, .lb-tab {
    display: inline-flex; align-items: center; justify-content: center; min-height: 34px;
    padding: 7px 11px; border: 1px solid var(--accent-border); border-radius: 5px;
    background: var(--accent); color: var(--on-accent); font-weight: 750; text-decoration: none;
}
.lb-download:hover, .lb-tab:hover { border-color: var(--forest); background: var(--forest); color: var(--on-forest); }
.lb-tab[hidden] { display: none; }
.lb-close, .lb-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    min-width: 72px; min-height: 40px; padding: 8px 11px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--forest); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(var(--shadow-rgb), .28);
}
.lb-close { top: 20px; right: 20px; transform: none; }
@media (display-mode: standalone) {
    .lb-close { top: calc(env(safe-area-inset-top) + 12px); right: calc(env(safe-area-inset-right) + 12px); }
    .lb-prev { left: calc(env(safe-area-inset-left) + 12px); }
    .lb-next { right: calc(env(safe-area-inset-right) + 12px); }
}
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-close:hover, .lb-nav:hover { border-color: var(--accent-border); background: var(--accent); color: var(--on-accent); }
.lb-nav[hidden] { display: none; }
@media (max-width: 560px) {
    .lb { padding: 12px; }
    .lb.is-pdf { align-items: stretch; padding: 54px 8px 10px; }
    .lb.is-pdf .lb-stage { min-width: 0; max-width: 100%; max-height: 100%; gap: 6px; }
    .lb-pdf {
        display: block;
        width: 100%;
        max-width: 100%;
        height: calc(100vh - 128px);
        height: calc(100dvh - 128px);
    }
    .lb.is-pdf .lb-bar { gap: 8px 12px; font-size: .76rem; }
    .lb-img.is-zoomed { transform: scale(1.5); }
    .lb-prev { left: 6px; }
    .lb-next { right: 6px; }
}

.history-detail-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.history-detail-actions form { margin: 0; }
.history-detail-actions a,
.history-detail-actions button,
.history-download-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .78rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}
.history-detail-actions .history-action-edit:hover,
.history-download-all:hover { border-color: var(--accent); color: var(--text); }
.history-detail-actions .history-action-delete:hover { border-color: var(--danger); color: var(--danger); }
@media (max-width: 720px) {
    .history-columns { display: none; }
    .hist { border-top: 1px solid var(--border); border-radius: 8px; }
    .history-row {
        grid-template-columns: 18px minmax(0, 1fr) auto;
        grid-template-areas:
            "chevron date km"
            ". main main"
            ". money money";
        gap: 4px 10px;
        padding: 13px 14px;
    }
    .history-col-date { grid-area: date; }
    .history-col-main { grid-area: main; margin-top: 3px; }
    .history-col-km { grid-area: km; }
    .history-col-money { grid-area: money; margin-top: 3px; text-align: left; }
    .history-row-chevron { grid-area: chevron; align-self: center; }
    .history-details { padding: 15px 14px 17px; }
    .history-detail-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
    .history-card-head h2 { gap: 8px; }
    .history-detail-facts { grid-template-columns: 1fr; }
    .history-attachments-head { align-items: stretch; flex-direction: column; }
    .history-download-all { width: 100%; }
}
a.ghost {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 5px;
    line-height: 1.2;
    transition: border-color .15s ease, color .15s ease;
}
a.ghost:hover { border-color: var(--accent); color: var(--text); }

/* ---------- Wartungsintervalle ---------- */
.iv {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: var(--surface-2);
}
.iv .iv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.iv .iv-name { font-weight: 600; }
.iv .iv-rule { color: var(--muted); font-size: .82rem; margin-top: 2px; }
.iv .iv-status { margin-top: 8px; font-size: .88rem; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.iv .pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 4px;
    border: 1px solid var(--border); color: var(--muted);
    font-size: .78rem;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}
.iv.is-overdue { border: 2px solid var(--danger-border); background: var(--danger-surface); box-shadow: inset 3px 0 0 var(--danger); }
.iv.is-overdue .pill.state { background: var(--danger-surface); border-color: var(--danger); color: var(--danger-ink); }
.iv.is-overdue .iv-status { color: var(--danger-ink); }
.iv.is-soon { border-color: var(--accent-border); }
.iv.is-soon .pill.state { background: rgba(var(--accent-rgb), .12); border-color: var(--accent-border); color: var(--accent-ink); }
.iv.is-ok .pill.state { background: rgba(var(--ok-rgb), .14); border-color: var(--ok-border); color: var(--ok-ink); }

/* ---------- Fahrzeugverwaltung ---------- */
.vehicle-manager-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.vehicle-manager-head h2 { margin-bottom: 4px; }
.vehicle-manager-head p { margin: 0; color: var(--muted); font-size: .82rem; }
.vehicle-manager-actions { display: flex; align-items: center; gap: 8px; }
.vehicle-statistics {
    margin: 0 0 16px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface-2);
}
.vehicle-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.vehicle-stat { min-width: 0; }
.vehicle-stat strong,
.vehicle-stat span { display: block; }
.vehicle-stat strong { color: var(--text); font-size: .95rem; }
.vehicle-stat span { margin-top: 2px; color: var(--muted); font-size: .68rem; }
.vehicle-stat-details { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: .72rem; }
.vehicle-stat-details tbody { display: grid; gap: 5px; }
.vehicle-stat-details tbody::before { content: ""; display: block; height: 1px; margin: 0 0 16px; background: var(--border); }
.vehicle-stat-details tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: baseline; gap: 9px; }
.vehicle-stat-details th,
.vehicle-stat-details td { padding: 0; text-align: right; white-space: nowrap; }
.vehicle-stat-details tbody th { min-width: 0; overflow: hidden; color: var(--text); font-weight: 650; text-align: left; text-overflow: ellipsis; }
.vehicle-stat-details tbody td { color: var(--muted); }
.cost-analysis-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cost-analysis-head h2 { margin-bottom: 4px; }
.cost-analysis-head .lead { margin: 0; }
.cost-analysis-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cost-year-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 14px; margin: 0 0 20px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: .78rem; }
.cost-year-filter .filter-multiselect { margin-left: 0; }
.cost-year-filter .cost-year-select { margin-left: auto; }
.cost-year-filter .cost-category-select { margin-left: 0; }
.cost-year-filter > button[type="submit"] { margin-left: 0; }
.cost-year-filter > strong { color: var(--text); }
.cost-year-options { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.cost-year-filter .check { margin: 0; }
.cost-analysis-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 8px; }
.cost-analysis-summary > div { padding: 11px 12px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-2); }
.cost-analysis-summary span, .cost-analysis-summary strong { display: block; }
.cost-analysis-summary span { color: var(--muted); font-size: .74rem; }
.cost-analysis-summary strong { margin-top: 3px; font-size: 1rem; }
.cost-analysis-summary .is-up strong { color: var(--danger-ink); }
.cost-analysis-summary .is-down strong { color: var(--ok-ink); }
.cost-analysis-note { margin: 0 0 18px; color: var(--muted); font-size: .74rem; }
.cost-chart { margin-top: 20px; padding: 18px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); }
.cost-chart h3 { margin: 0 0 14px; font-size: .92rem; }
.cost-month-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; min-height: 160px; }
.cost-month-bar { display: flex; min-width: 0; height: 160px; flex-direction: column; align-items: center; justify-content: end; gap: 4px; }
.cost-bar-track { display: flex; width: 100%; height: 112px; align-items: end; justify-content: center; }
.cost-bar-track span { display: block; width: min(22px, 70%); min-height: 4px; border-radius: 3px 3px 0 0; background: var(--accent); }
.cost-month-bar strong { font-size: .68rem; white-space: nowrap; }
.cost-month-bar small { color: var(--muted); font-size: .68rem; }
.cost-category-bars { display: grid; gap: 10px; }
.cost-category-row > div:first-child { display: flex; justify-content: space-between; gap: 12px; font-size: .78rem; }
.cost-category-row > div:first-child span { color: var(--muted); white-space: nowrap; }
.cost-category-track { height: 8px; margin-top: 4px; overflow: hidden; border-radius: 4px; background: var(--surface); }
.cost-category-track span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.cost-line-wrap { overflow-x: auto; margin: 0 -4px; }
.cost-line-svg { display: block; width: 100%; min-width: 620px; height: auto; overflow: visible; }
.cost-line-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.cost-line-label { fill: var(--muted); font-size: 11px; }
.cost-line-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; color: var(--muted); font-size: .74rem; }
.cost-line-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cost-line-legend i { width: 10px; height: 10px; border-radius: 50%; }
.vehicle-list {
    list-style: none !important;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 9px;
}
.vehicle-selection .vehicle-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vehicle-selection .vehicle-card {
    align-content: start;
}
.vehicle-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.vehicle-detail-head h2 {
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 1.4rem;
}
.vehicle-detail-head h2 .plate {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 8px;
}
.vehicle-detail-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 8px;
    margin-left: 10px;
}
.vehicle-detail-nav-bottom { margin-bottom: 24px; }
.vehicle-detail-nav-secondary {
    width: fit-content;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.vehicle-detail-nav a {
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.45;
    text-decoration: none;
    white-space: nowrap;
    padding: 3px 8px;
    margin: -3px -8px;
    border-radius: 4px;
}
.vehicle-detail-nav a:hover { color: var(--accent); }
.vehicle-detail-nav a.active {
    background: #fffdf8;
    color: var(--text);
}
.vehicle-detail-nav span {
    margin: 0 10px;
    color: var(--border);
}
.vehicle-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    margin: 0;
    padding: 12px 13px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.vehicle-card::marker { content: ""; }
.vehicle-card:hover,
.vehicle-card:focus-within {
    border-color: var(--accent);
    background: var(--surface-hover);
    box-shadow: 0 6px 16px rgba(var(--shadow-rgb), .12);
    transform: translateY(-1px);
}
.vehicle-card[data-vehicle-switch-card] { cursor: pointer; }
.vehicle-card[data-vehicle-switch-card]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.vehicle-card.is-active {
    border-color: var(--forest);
}
.vehicle-card.is-archived {
    border-style: dashed;
    background: var(--surface-2);
}
.vehicle-manager-footer-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    margin-top: 14px;
}
.vehicle-manager-footer-actions > div { min-height: 38px; }
.vehicle-manager-footer-actions > div:first-child { display: flex; align-items: flex-start; justify-content: flex-start; }
.vehicle-manager-footer-actions > div:last-child { display: flex; align-items: flex-start; justify-content: flex-end; }
.vehicle-manager-footer-actions details.addbox { margin: 0 !important; }
.vehicle-manager-footer-actions > div > .ghost,
.vehicle-manager-footer-actions details.addbox > summary { min-height: 38px; }
.vehicle-manager-footer-actions .field-hint { margin: 8px 0 0; text-align: right; }
.archived-vehicles { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.archived-vehicles h3 { margin: 0 0 12px; }
.archived-vehicles > .vehicle-list { margin-top: 14px; }
.admin-plan-edit {
    border: 1px solid var(--border-dim);
    border-radius: 6px;
    padding: 12px 14px;
    margin-top: 10px;
}
.admin-plan-edit > summary { cursor: pointer; font-weight: 600; }
.admin-plan-edit > summary small { margin-left: 8px; color: var(--muted); font-weight: 400; }
.admin-plan-edit form { margin-top: 14px; }

.admin-vehicle-delete { position: relative; }
.admin-vehicle-delete > summary { list-style: none; white-space: nowrap; }
.admin-vehicle-delete > summary::-webkit-details-marker { display: none; }
.admin-vehicle-delete form {
    position: absolute;
    z-index: 5;
    right: 0;
    width: min(360px, 85vw);
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--danger-border);
    border-radius: 6px;
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(var(--shadow-rgb), .18);
}
.admin-vehicle-delete label { display: block; margin-bottom: 7px; color: var(--muted); font-size: .76rem; }
.admin-vehicle-delete input { width: 100%; margin-bottom: 9px; }
.admin-vehicle-delete button { width: 100%; }
@media (max-width: 1000px) {
    .vehicle-selection .vehicle-list { grid-template-columns: 1fr; }
}
.vehicle-card-main {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 11px;
}
.vehicle-card-thumb {
    flex: 0 0 88px;
    width: 88px;
    height: 66px;
    object-fit: cover;
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    background: var(--surface-2);
}
.vehicle-card-copy { min-width: 0; }
.vehicle-card.has-maintenance-overdue { box-shadow: inset 3px 0 0 var(--danger); }
.vehicle-card.has-maintenance-soon { box-shadow: inset 3px 0 0 var(--accent); }
.vehicle-card-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-self: start;
    gap: 6px;
}
.vehicle-maintenance-label {
    flex: none;
    border-radius: 3px;
    padding: 4px 8px;
    font-size: .7rem;
    font-weight: 650;
    white-space: nowrap;
}
.vehicle-maintenance-label.is-overdue {
    color: var(--on-danger, #fff);
    background: var(--danger);
}
.vehicle-maintenance-label.is-soon {
    color: var(--accent-ink);
    border: 1px solid var(--accent-border);
    background: rgba(var(--accent-rgb), .14);
}
.vehicle-card-copy strong {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-size: .94rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vehicle-card-copy > span {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    color: var(--muted);
    font-size: .74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vehicle-card-copy .vehicle-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 7px;
    overflow: visible;
    color: var(--muted);
    font-size: .72rem;
    white-space: normal;
}
.vehicle-card-stats span + span::before {
    content: '|';
    margin-right: 12px;
    color: var(--border-hi);
}
.vehicle-card-stats span { display: inline; }
.vehicle-card-copy b {
    display: inline-block;
    margin-left: 7px;
    padding-left: 8px;
    border-left: 1px solid var(--border-dim);
    color: var(--muted);
    font-weight: 600;
}
.hi-actions.vehicle-card-actions {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid var(--border-dim);
}
.vehicle-card-actions form { margin: 0; line-height: 1; }
.app-content .vehicle-card-actions .vehicle-edit { font-weight: 400; }
.vehicle-delete-placeholder {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 600;
    cursor: not-allowed;
    opacity: .55;
}
@media (max-width: 480px) {
    .vehicle-card { grid-template-columns: minmax(0, 1fr); }
    .vehicle-card-badges { grid-column: 1; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-self: start; }
}

details.addbox { display: flex; flex-direction: column; align-items: flex-end; margin-top: 14px; }
details.addbox > form { width: 100%; }
details.addbox > summary {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 38px;
    cursor: pointer;
    color: var(--text);
    font-weight: 500;
    font-size: 13px;
    list-style: none;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface);
    transition: border-color .15s ease, background .15s ease;
}
details.addbox > summary::-webkit-details-marker { display: none; }
details.addbox > summary:hover { border-color: var(--accent); background: var(--surface-hover); }
details.addbox[open] > summary { margin-bottom: 14px; }
details.addbox > form { padding-top: 0; }

/* Das aufklappbare Intervallformular nutzt dieselbe vollbreite Arbeitsfläche
   wie die übrigen Formulare im konsistenten Arbeitslayout. */
.app-content details.interval-add {
    display: block;
    width: 100%;
}
.app-content details.interval-add > summary {
    display: flex;
    width: max-content;
    margin-left: auto;
}
.app-content details.interval-add > form {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

/* ---------- Export ---------- */
.export-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.export-form + .app-footer { margin-top: 8px; }
.export-form > .card { margin: 0; }
.export-intro,
.export-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}
.export-intro h2 { margin: 3px 0 5px; font-size: 1.25rem; }
.export-intro p,
.export-card-head p { margin: 0; color: var(--muted); font-size: .82rem; }
.eyebrow {
    color: var(--accent);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.export-choice-grid,
.format-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}
.export-choice,
.format-choice,
.export-entry {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface-2);
    cursor: pointer;
}
.export-choice { padding: 14px; }
.export-choice:has(input:checked),
.format-choice:has(input:checked) {
    border-color: var(--accent-border);
    background: rgba(var(--accent-rgb), .07);
}
.export-choice input,
.format-choice input,
.export-entry input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--accent);
}
.export-choice span,
.format-choice span,
.export-entry-copy { min-width: 0; }
.export-entry-copy { display: block; color: var(--text); font-size: .87rem; font-weight: 500; }
.export-choice strong,
.format-choice strong { display: block; color: var(--text); font-size: .9rem; font-weight: 550; }
.export-choice small,
.format-choice small,
.export-entry-copy small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.4;
}
.sale-fields {
    margin-top: 16px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.sale-fields > .section-heading { margin-top: 26px; }
.sale-fields > .section-heading:first-of-type { margin-top: 0; }
.sale-fields > .contact-heading { margin-top: 34px; }
.sale-fields[hidden] { display: none; }
.export-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}
@media (max-width: 420px) {
    .export-sections { grid-template-columns: 1fr; }
}
.export-section { min-height: 50px; margin: 0; }
.sale-selection[hidden] { display: none; }
.sale-option { align-items: flex-start; min-height: 66px; }
.sale-option strong,
.sale-option small { display: block; }
.sale-option strong { color: var(--text); font-size: .86rem; font-weight: 550; }
.sale-option small { margin-top: 2px; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.sale-photo-status {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 11px 12px;
    border: 1px solid var(--accent-border);
    border-radius: 5px;
    background: rgba(var(--accent-rgb), .07);
}
.sale-photo-status img { width: 72px; height: 48px; border-radius: 4px; object-fit: cover; }
.sale-photo-status span { min-width: 0; flex: 1; }
.sale-photo-status strong,
.sale-photo-status small { display: block; }
.sale-photo-status strong { font-size: .84rem; font-weight: 550; }
.sale-photo-status small { margin-top: 2px; color: var(--muted); font-size: .72rem; }
.sale-photo-status.is-missing { border-color: var(--danger); background: rgba(var(--danger-rgb), .06); }
.privacy-note { margin: 10px 0 0; color: var(--muted); font-size: .73rem; }
.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    background: var(--inset);
}
.editor-toolbar span { flex: 1; }
.editor-toolbar button {
    min-width: 32px;
    min-height: 30px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
}
.editor-toolbar button:hover,
.editor-toolbar button:focus-visible { border-color: var(--border); color: var(--text); }
.rich-editor {
    min-height: 150px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 0 0 5px 5px;
    background: var(--surface-2);
    color: var(--text);
    outline: none;
}
.rich-editor:focus { border-color: var(--accent-border); }
.rich-editor:empty::before { content: attr(data-placeholder); color: var(--text-dim); pointer-events: none; }
.rich-editor p { margin: 0 0 9px; }
.rich-editor ul { margin: 6px 0; padding-left: 22px; }
.disclaimer-check { margin: 2px 0 20px; min-height: 52px; }
.export-card-head { margin-bottom: 14px; }
.export-card-head h2 { margin-bottom: 4px; }
.text-action {
    flex: none;
    padding: 3px 0;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}
.text-action:hover { color: var(--text); }
.export-category-list { display: grid; gap: 8px; }
.export-category {
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface-2);
    overflow: hidden;
}
.export-category summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.export-category summary::-webkit-details-marker { display: none; }
.export-category summary::after {
    content: '';
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 2px solid var(--text-dim);
    border-bottom: 2px solid var(--text-dim);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s ease;
}
.export-category[open] summary::after { transform: rotate(225deg) translateY(2px); }
.export-category summary input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent);
}
.export-category summary span { color: var(--text); font-size: .88rem; font-weight: 650; }
.export-category summary small { color: var(--muted); font-size: .76rem; }
.export-entry-list {
    display: grid;
    gap: 6px;
    padding: 10px 10px 10px;
    border-top: 1px solid var(--border);
}
.export-entry { align-items: center; padding: 10px 11px; background: var(--surface); }
.format-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.format-choice {
    position: relative;
    min-height: 88px;
    padding: 13px;
}
.format-choice em {
    position: absolute;
    top: 9px;
    right: 9px;
    color: var(--accent-ink);
    font-size: .64rem;
    font-style: normal;
    font-weight: 700;
}
.format-choice.is-disabled {
    cursor: not-allowed;
    opacity: .5;
}
.export-privacy {
    margin: 14px 0;
    color: var(--muted);
    font-size: .76rem;
}
.export-step-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}
.export-step-head > span {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--accent-border);
    border-radius: 50%;
    background: rgba(var(--accent-rgb), .12);
    color: var(--accent-ink);
    font-size: .82rem;
    font-weight: 700;
}
.export-step-head h2 { margin: 2px 0 3px; }
.export-step-head p { margin: 0; color: var(--muted); font-size: .82rem; }
.export-disclosure {
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface-2);
    margin-bottom: 10px;
    overflow: hidden;
}
.export-disclosure:last-child { margin-bottom: 0; }
.export-disclosure summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.export-disclosure summary::-webkit-details-marker { display: none; }
.export-disclosure summary::before {
    content: '';
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-dim);
    border-bottom: 2px solid var(--text-dim);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s ease;
}
.export-disclosure[open] summary::before { transform: rotate(225deg) translateY(2px); }
.export-disclosure summary span { color: var(--text); font-size: .88rem; font-weight: 650; }
.export-disclosure summary small { color: var(--muted); font-size: .76rem; }
.export-disclosure-body {
    padding: 6px 14px 16px;
    border-top: 1px solid var(--border);
}
.export-disclosure-body .row:first-child,
.export-disclosure-body > .field:first-child { margin-top: 12px; }
.export-submit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.export-submit-bar .export-privacy { margin: 0; max-width: 46ch; }
@media (max-width: 480px) {
    .export-submit-bar { flex-direction: column; align-items: stretch; }
    .export-submit-bar .primary { width: 100%; }
}
@media (max-width: 600px) {
    .export-intro { align-items: stretch; flex-direction: column; }
    .export-intro .ghost { align-self: flex-start; }
}
@media (max-width: 420px) {
    .vehicle-manager-head { align-items: stretch; flex-direction: column; }
    .vehicle-manager-head .ghost { align-self: flex-start; }
    .export-card-head { align-items: stretch; flex-direction: column; gap: 8px; }
    .text-action { align-self: flex-start; }
}

/* ---------- Kompaktere mobile Darstellung ---------- */
@media (max-width: 600px) {
    .wrap { padding: 8px; }
    header.app { padding: 5px 0 7px; gap: 6px; }
    header.app h1 { font-size: 1.05rem; }
    nav.main { gap: 2px; margin-bottom: 9px; padding: 3px; border-radius: 5px; }
    nav.main a { padding: 6px 4px; font-size: .76rem; border-radius: 3px; }
    .next-service { margin-bottom: 6px; padding: 6px 8px; font-size: .76rem; }
    .card { padding: 12px; margin-bottom: 9px; border-radius: 5px; }
    h2 { margin-bottom: 10px; }
    .field { margin-bottom: 8px; }
    .section-heading { margin-bottom: 9px; }
    .form-section + .form-section { margin-top: 13px; padding-top: 12px; }
    .vehicle-photo-editor { gap: 8px; margin-bottom: 11px; }
    .row { gap: 16px; }
    button.primary { margin-top: 20px; padding: 10px 13px; border-radius: 5px; }
    button.primary.slim { padding: 8px 12px; }
    .wizard-progress { margin-bottom: 11px; }
    .wizard-actions { gap: 6px; margin-top: 20px; }
    .export-form { gap: 9px; }
    .sale-fields { margin-top: 9px; padding-top: 11px; }
    .sale-fields > .section-heading { margin-top: 13px; }
    .sale-fields > .section-heading:first-of-type { margin-top: 0; }
    .sale-fields > .contact-heading { margin-top: 16px; }
    .admin-area { margin-top: 13px; margin-bottom: 16px; padding-top: 12px; }
    .admin-area > h2 { margin-bottom: 10px; }
    .admin-area > .card { margin-bottom: 8px; }
    .vehicle-manager-head { margin-bottom: 9px; }
    .vehicle-statistics { margin-bottom: 10px; padding: 9px; }
    .vehicle-stat-grid { gap: 5px; }
    .vehicle-stat strong { font-size: .82rem; }
    .vehicle-stat span { font-size: .68rem; }
    .vehicle-stat-details { margin-top: 7px; font-size: .70rem; }
    .vehicle-stat-details tbody::before { margin-bottom: 12px; }
    .vehicle-stat-details tbody { gap: 4px; }
    .vehicle-stat-details tbody tr { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 5px; }
    .vehicle-list { gap: 5px; }
    .vehicle-selection .vehicle-list { grid-template-columns: 1fr; }
    .vehicle-manager-footer-actions { grid-template-columns: 1fr; }
    .vehicle-manager-footer-actions > div:last-child { justify-content: flex-start; }
    .vehicle-manager-footer-actions .field-hint { text-align: left; }
    .vehicle-card { gap: 7px; padding: 8px; min-height: 58px; }
    .vehicle-card-main { gap: 8px; }
    .vehicle-card-thumb { flex-basis: 72px; width: 72px; height: 54px; }
    .vehicle-detail-head { align-items: stretch; flex-direction: column; gap: 10px; margin-bottom: 14px; }
    .vehicle-detail-nav { row-gap: 7px; }
    .vehicle-detail-nav-bottom { margin-bottom: 18px; }
    .vehicle-detail-nav a { font-size: .8rem; }
    .vehicle-detail-nav span { margin: 0 7px; }
    .iv { margin-bottom: 6px; padding: 8px 10px; }
    .hist { gap: 5px; }
    .entry-title-row { gap: 8px; }
    .vehicle-document-columns { grid-template-columns: 1fr; gap: 9px; }
    .vehicle-manager-actions { flex-wrap: wrap; justify-content: flex-end; }
    .cost-analysis-head { align-items: stretch; flex-direction: column; gap: 10px; }
    .cost-analysis-head .ghost { align-self: flex-start; }
    .cost-analysis-actions { justify-content: flex-start; }
    .cost-year-filter { align-items: flex-start; flex-direction: column; }
    .cost-year-options { width: 100%; }
    .cost-analysis-summary { grid-template-columns: 1fr 1fr; }
    .cost-analysis-summary > div:nth-child(3),
    .cost-analysis-summary > div:last-child { grid-column: span 2; }
    .cost-month-bars { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .entry-title-row h2 { margin-bottom: 10px; }
    .help-button { padding: 6px 8px; font-size: .7rem; }
    .help-modal { padding: 14px; border-radius: 5px; }
    .help-list { gap: 0; }
    .help-list section { padding: 0 0 16px; }
    .help-list section + section { padding-top: 16px; }
}

/* =====================================================================
 * KONSISTENTES ARBEITSLAYOUT
 * Die Historie ist die visuelle Referenz für alle geschützten Seiten.
 * ===================================================================== */
@media (min-width: 900px) {
    .app-page .wrap { max-width: 1120px; }
}

.app-content { min-width: 0; }
.app-content > .card,
.export-form .card {
    margin: 0 0 30px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.app-content > .card + .card,
.export-form .card + .card {
    padding-top: 26px;
    border-top: 1px solid var(--border);
}
.app-content > .card.legal-page,
.app-content > .card.vehicle-contacts-card {
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.app-content > .card > h1:first-child,
.app-content > .card > h2:first-child,
.app-content > .card > .entry-title-row:first-child h2,
.app-content > .card .vehicle-manager-head h2,
.app-content > .card .cost-analysis-head h2,
.app-content > .export-form > .card > h2:first-child,
.app-content > .export-form > .card .export-card-head h2,
.app-content > .export-form > .export-intro h2 {
    margin: 0 0 6px;
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}
.app-content > .card h2 .count {
    margin-left: 8px;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 500;
    white-space: nowrap;
}
.app-content > .export-form { gap: 0; }
.app-content > .export-form h2 .count {
    margin-left: 8px;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 500;
    white-space: nowrap;
}
.app-content > .card > .lead,
.app-content > .card > .entry-title-row + .lead {
    max-width: 78ch;
    margin: 0 0 18px !important;
}

/* Formulare bilden wie die Filterleiste eine klar begrenzte Arbeitsfläche. */
.app-content > .card > form:not(.admin-smtp-test):not(.customer-logo-remove),
.app-content > .card > .entry-title-row + form {
    margin: 16px 0 0;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.app-content > .card > form + form { margin-top: 12px; }
.app-content .customer-logo-panel {
    margin-top: 16px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.app-content .field { margin-bottom: 16px; }
.app-content label,
.app-content legend {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 600;
}
.app-content input:not([type="checkbox"]):not([type="radio"]),
.app-content select {
    min-height: 40px;
    padding: 10px 12px;
    background-color: var(--surface-2);
    font-size: .92rem;
}
.app-content textarea { padding: 11px 12px; background: var(--surface-2); font-size: .92rem; }
.app-content .uploader {
    padding: 16px;
    border-style: dashed;
    background: var(--surface-2);
}

/* Primär- und Sekundäraktionen folgen derselben kompakten Hierarchie. */
.app-content button.primary {
    width: auto;
    min-height: 40px;
    margin-top: 14px;
    padding: 10px 16px;
    border: 1px solid var(--accent);
    border-radius: 5px;
    font-size: 13px;
}
.app-content button.primary.slim { margin-top: 14px; height: 40px; min-height: 40px; padding: 9px 12px; font-size: 13px; }
.app-content .wizard-actions .primary.slim,
.app-content .history-export-form > .primary { margin-top: 0; }
.app-content .wizard-step > .wizard-next {
    display: flex;
    margin-left: auto;
}
.app-content form > button.primary:last-child,
.app-content .export-form > button.primary:last-child {
    display: flex;
    margin-left: auto;
    justify-self: end;
}
.app-content .button-row,
.app-content .admin-content-actions { display: flex; justify-content: flex-end; }
.app-content .admin-content-actions .primary { order: 2; }
.app-content .admin-smtp-form > button { justify-self: end; }
.app-content a.primary,
.app-content a.ghost,
.app-content button.ghost,
.app-content .btn-file,
.app-content .user-action-button,
.app-content .primary-link {
    height: 40px;
    padding: 0 12px;
    border-radius: 5px;
    font-size: 13px;
}

/* Historienfilter: alle Bedienelemente stehen bündig in einer 40-px-Zeile. */
.app-content .filters { align-items: start; }
.app-content .filters > input[type="search"],
.app-content .filters .filter-multiselect-toggle {
    box-sizing: border-box;
    height: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0 12px;
    line-height: 1.2;
}
.app-content .filters .filter-multiselect-toggle { font-weight: 400; }
.app-content .filters-actions { height: 40px; align-items: center; }
.app-content .filters-actions > .primary.slim,
.app-content .filters-actions > .ghost {
    box-sizing: border-box;
    height: 38px;
    min-height: 38px;
    margin: 0;
    padding: 0 12px;
    line-height: 1.2;
}

/* Wiederkehrende Listenflächen entsprechen den Zeilen der Historie. */
.app-content .iv,
.app-content .vehicle-card:not(.is-active),
.app-content .admin-user-row,
.app-content .admin-dashboard-link,
.app-content .cost-analysis-summary > div,
.app-content .hosting-check-list li,
.app-content .notify-email-choice > label,
.app-content .reinstall-option {
    border-color: var(--border);
    background: var(--surface);
}
.app-content .admin-dashboard-grid { gap: 12px; margin-top: 18px; }
.app-content .admin-dashboard-link { min-height: 116px; padding: 16px; }
.app-content .admin-dashboard-link:hover,
.app-content .admin-dashboard-link:focus-visible { border-color: var(--accent); background: var(--surface); box-shadow: 0 6px 16px rgba(var(--shadow-rgb), .12); transform: translateY(-1px); }
.app-content .admin-dashboard-link strong { font-size: .94rem; }
.app-content .admin-dashboard-link span { font-size: .8rem; }

/* Aktionen in Intervall- und Fahrzeugzeilen wie im Historien-Accordion. */
.app-content .iv > .hi-actions,
.app-content .vehicle-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-dim);
}
.app-content .iv > .hi-actions form:first-child,
.app-content .vehicle-card-actions form:first-child,
.app-content .vehicle-card-actions .vehicle-delete-placeholder:first-child { margin-right: auto; }
.app-content .iv > .hi-actions form { margin-top: 0; margin-bottom: 0; }
.app-content .iv > .hi-actions a,
.app-content .iv > .hi-actions button,
.app-content .vehicle-card-actions a,
.app-content .vehicle-card-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}
.app-content .iv > .hi-actions a:hover,
.app-content .iv > .hi-actions button:hover,
.app-content .vehicle-card-actions a:hover,
.app-content .vehicle-card-actions button:hover { border-color: var(--accent); color: var(--text); }
.app-content .iv > .hi-actions form:first-child button:hover { border-color: var(--danger); color: var(--danger); }

.app-content .legal-page .help-list,
.app-content .guide-page .help-list { margin-top: 20px; }

/* Aktionsbeschriftungen bleiben bewusst normalgewichtig. */
body :is(
    button,
    .btn-file,
    .text-action,
    a.primary,
    a.ghost,
    a.header-link,
    .primary-link,
    .user-action-button,
    .guide-close,
    .guide-index a,
    .lb-download,
    .lb-tab,
    .history-download-all,
    .history-detail-actions a,
    details.addbox > summary
) { font-weight: 400 !important; }

/* Einheitlicher, gut sichtbarer Tastaturzustand für alle Bedienelemente. */
:is(a, button, summary, [role="button"]):focus-visible {
    outline: 2px solid var(--accent-border);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .app-content > .card,
    .app-content > .export-form > .card { margin-bottom: 22px; }
    .app-content > .card + .card,
    .app-content > .export-form > .card + .card { padding-top: 20px; }
    .app-content > .card > form:not(.admin-smtp-test):not(.customer-logo-remove),
    .app-content > .card > .entry-title-row + form { margin-top: 12px; padding: 14px; }
    .app-content details.interval-add > form { padding: 14px; }
    .app-content > .card > h1:first-child,
    .app-content > .card > h2:first-child,
    .app-content > .card > .entry-title-row:first-child h2,
    .app-content > .card .vehicle-manager-head h2,
    .app-content > .card .cost-analysis-head h2,
    .app-content > .export-form > .card > h2:first-child,
    .app-content > .export-form > .card .export-card-head h2,
    .app-content > .export-form > .export-intro h2 { font-size: 1.1rem; }
    .app-content button.primary { width: auto; }
    .app-content .wizard-actions button.primary { width: auto; }
    .app-content .admin-dashboard-grid { gap: 8px; }
    .app-content .admin-dashboard-link { min-height: 0; padding: 13px; }
    .app-content .iv > .hi-actions,
    .app-content .vehicle-card-actions { flex-wrap: wrap; }
}
@media (max-width: 330px) {
    .app-content .checkgrid { grid-template-columns: minmax(185px, 1fr); }
}

/* Einheitliche neue Anhänge mit einer Beschreibung pro Datei. */
.upload-file-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 12px; align-items: center; }
.upload-file-list .upload-file-description { grid-column: 1 / -1; display: grid; gap: 6px; margin: 0; }
.upload-file-description span { font-size: .8rem; color: var(--muted); }
.upload-file-description input { width: 100%; margin: 0; }
@media (max-width: 520px) {
    .upload-file-list li { grid-template-columns: minmax(0, 1fr) auto; }
    .upload-file-list .fi-size { grid-column: 1; grid-row: 2; }
    .upload-file-list .fi-del { grid-column: 2; grid-row: 1 / 3; }
}

/* Benutzerverwaltung: Listenaktion und responsive E-Mail-Auswahl. */
.admin-users-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.admin-users-heading h2 { margin: 0; }
@media (min-width: 1000px) {
    .notify-email-choice { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.notify-email-choice > label { display: flex; flex-wrap: nowrap; align-items: center; min-height: 48px; box-sizing: border-box; font-weight: 400; }
.notify-email-choice > label span { min-width: 0; }
.notify-email-custom { grid-column: 1 / -1; margin-top: 4px; }
.notify-email-custom label { display: block; margin-bottom: 6px; font-size: .82rem; }
.notify-email-custom input[type="email"] { width: 100%; max-width: 480px; margin: 0; }
.notify-email-choice:has(input[type="radio"]:checked):not(:has(input[value="custom"]:checked)) .notify-email-custom { display: none; }