/* elver.css - gemeinsames Seitengeruest (siehe ev_layout.php)
 *
 * Wird per ev_layout.php in jede angemeldete Seite eingesetzt. Alle Regeln
 * haengen an elv-*-Klassen, damit die (noch) seiteneigenen Styles der
 * Altseiten nicht beeinflusst werden - und umgekehrt die Altseiten mit
 * allgemeinen Regeln wie "a { ... }" oder "body { font-size }" das
 * Geruest nicht verbiegen.
 *
 * Breakpoint: bis 900px Breite (Smartphone, kleines Tablet) wird die
 * Navigation zum ausklappbaren Menue hinter dem Burger-Button.
 */

:root {
    --elv-dunkel: #1B2E3A;
    --elv-dunkel-2: #243B4A;
    --elv-hell: #ADADAD;        /* Seitenhintergrund - zentral fuer alle Seiten */
    --elv-akzent: #E5484D;
    --elv-text-hell: #FFFFFF;
    --elv-text-gedimmt: #A9BCC8;
    --elv-kopf-hoehe: 50px;
    --elv-navi-breite: 200px;
}

/* Die Altseiten setzen eigene body-Abstaende (frueher im Frame sinnvoll);
   im Geruest uebernimmt das der Inhaltsbereich. Der Hintergrund kommt
   zentral aus --elv-hell; !important, weil viele Altseiten ihn inline
   (<body style="background:...">) bzw. per bgcolor setzen. */
html body {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--elv-hell) !important;
}

/* Nur die Geruest-Bausteine - NICHT den Seiteninhalt: die Altseiten
   rechnen mit dem klassischen Boxmodell (content-box). */
.elv-kopf, .elv-kopf *,
.elv-navi, .elv-navi *,
.elv-main {
    box-sizing: border-box;
}

/* ---- Kopfzeile ---------------------------------------------------- */
.elv-kopf {
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--elv-kopf-hoehe);
    padding: 0 12px;
    background: var(--elv-dunkel);
    color: var(--elv-text-hell);
    font: 14px Arial, Helvetica, sans-serif;
}
.elv-logo {
    display: block;
    line-height: 0;
    flex-shrink: 0;
}
.elv-logo img {
    display: block;
    transition: opacity 0.15s;
}
.elv-logo:hover img {
    opacity: 0.85;
}
/* Nur Bildmarke "E", wenn der Schriftzug keinen Platz hat - .elv-kopf-eng
   setzt das Skript hinter der Kopfzeile (ev_layout.php) */
.elv-logo .elv-logo-e,
.elv-kopf-eng .elv-logo .elv-logo-voll {
    display: none;
}
.elv-kopf-eng .elv-logo .elv-logo-e {
    display: block;
}
.elv-system {
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--elv-akzent);
    color: #fff;
    font: bold 12px Arial, Helvetica, sans-serif;
    white-space: nowrap;
}
.elv-kopf-info {
    margin-left: auto;
    font-size: 11px;
    line-height: 1.4;
    text-align: right;
    color: var(--elv-text-hell);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Burger-Button nur auf kleinen Bildschirmen */
.elv-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: -8px;
    padding: 0 11px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}
.elv-burger span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: #fff;
}
.elv-burger:hover,
.elv-burger:focus-visible {
    background: var(--elv-dunkel-2);
}

/* ---- Navigation ---------------------------------------------------- */
.elv-navi {
    position: fixed;
    top: var(--elv-kopf-hoehe);
    bottom: 0;
    left: 0;
    z-index: 800;
    width: var(--elv-navi-breite);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 8px 10px 10px;
    background: var(--elv-dunkel);
    color: var(--elv-text-hell);
    font: 14px Arial, Helvetica, sans-serif;
    text-align: left;
}
/* Fusszeile unten in der Navigationsleiste (frueher eigener Frame) */
.elv-navi-fuss {
    margin-top: auto;
    padding-top: 14px;
    color: var(--elv-text-gedimmt);
    font-size: 11px;
    line-height: 1.5;
}
.elv-navi .elv-navi-fuss a {
    display: inline;
    padding: 0;
    color: var(--elv-text-gedimmt);
    text-decoration: underline;
}
.elv-navi .elv-navi-fuss a:hover {
    background: none;
    color: #fff;
}
.elv-navi-fuss .elv-platz { white-space: nowrap; }
.elv-navi-fuss .elv-platz-knapp { color: #FF8A80; font-weight: bold; }   /* weniger als 5 GB frei */
.elv-suche {
    display: flex;
    gap: 4px;
    margin: 0 0 8px;
}
.elv-suche input {
    flex: 1;
    min-width: 0;
    padding: 5px 6px;
    border: 1px solid #5A7384;
    border-radius: 4px;
    background: #fff;
    color: #000;
    font: 13px Arial, Helvetica, sans-serif;
}
.elv-suche button {
    padding: 5px 8px;
    border: 0;
    border-radius: 4px;
    background: var(--elv-akzent);
    color: #fff;
    font: bold 12px Arial, Helvetica, sans-serif;
    cursor: pointer;
}
/* Live-Treffer zur Fahrzeugsuche (assets/fzsuche.js) - fixed, damit die
   Navigation (overflow: auto) die Liste nicht abschneidet */
.elv-treffer {
    position: fixed;
    z-index: 1000;
    overflow: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #DCE3E8;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(27, 46, 58, 0.25);
    font: 13px Arial, Helvetica, sans-serif;
    text-align: left;
}
.elv-treffer li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
}
.elv-treffer li.aktiv,
.elv-treffer li[data-i]:hover {
    background: #EEF6F1;
}
.elv-treffer img,
.elv-t-ohne {
    flex: none;
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    background: #E9EEF2;
}
.elv-t-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.elv-t-text b {
    color: #1B2E3A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.elv-t-text small {
    color: #6B7B88;
    font-size: 11px;
}
.elv-t-preis {
    flex: none;
    color: #1B2E3A;
    font-weight: bold;
    text-align: right;
}
.elv-treffer .elv-t-leer {
    padding: 10px;
    color: #6B7B88;
    cursor: default;
}
.elv-gruppe {
    border-top: 1px solid #3C5566;
}
.elv-gruppe summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    list-style: none;
    color: var(--elv-text-gedimmt);
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
}
.elv-gruppe summary::-webkit-details-marker {
    display: none;
}
.elv-gruppe summary::after {
    content: '\25B8';
    margin-left: 6px;
    font-size: 16px;
    transition: transform 0.15s ease;
}
.elv-gruppe[open] summary::after {
    transform: rotate(90deg);
}
.elv-gruppe summary:hover {
    color: #fff;
}
.elv-gruppe-links {
    padding: 0 0 6px;
}
.elv-navi a {
    display: block;
    padding: 4px 8px;
    border-radius: 4px;
    color: var(--elv-text-hell);
    text-decoration: none;
}
.elv-navi a:hover {
    background: var(--elv-dunkel-2);
    color: #fff;
}
.elv-navi a.elv-aktiv {
    background: var(--elv-akzent);
    color: #fff;
}
.elv-navi a.elv-abmelden {
    margin-top: 8px;
    border-top: 1px solid #3C5566;
    border-radius: 0;
    padding-top: 10px;
}

.elv-backdrop {
    display: none;
}

/* ---- Inhaltsbereich rechts der Navigation ------------------------- */
/* <main> ist das letzte, offene Element des Geruests (kein Wrapper um
   Laufschrift/main, siehe ev_layout.php). Die Obergrenze von 1400px fuer
   breite Monitore entsteht darum ueber den seitlichen Innenabstand. */
.elv-main {
    display: block;
    margin-left: var(--elv-navi-breite);
    min-height: calc(100vh - var(--elv-kopf-hoehe));
    padding: 10px max(10px, calc((100vw - var(--elv-navi-breite) - 1400px) / 2));
    /* Seiten mit festen Pixelbreiten scrollen hier seitlich, statt die
       ganze Seite (inkl. Kopf und Navigation) zu verbreitern. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    text-align: left;
}

/* ---- Hinweise im Kopf (ersetzen die Laufschrift) --------------------
   Wort + rote Anzahl: unbeantwortete Kundenanfragen, Forumsbeitraege und
   Informationen der letzten 2 Tage. Links vom Nutzernamen. */
.elv-hinweise {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.elv-hinweise + .elv-kopf-info { margin-left: 0; }
.elv-hinweis {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border-radius: 15px;
    background: var(--elv-dunkel-2);
    color: #fff;
    font: bold 12px Arial, Helvetica, sans-serif;
    text-decoration: none;
    white-space: nowrap;
}
.elv-hinweis:hover,
.elv-hinweis:focus-visible { background: #2E4A5C; color: #fff; }
.elv-hinweis-kurz { display: none; }   /* Kurzform A/F/I nur auf dem Smartphone */
.elv-zahl {
    min-width: 18px;
    padding: 1px 5px;
    border-radius: 9px;
    background: var(--elv-akzent);
    color: #fff;
    font-size: 11px;
    text-align: center;
}

/* ---- Smartphone / Tablet: Hamburger-Menue -------------------------- */
/* Greift bei schmalem Fenster ODER bei Touch-Geraeten (pointer: coarse)
   bis 1100px - so bekommen auch Smartphones im Querformat und kleine
   Tablets das Menue statt der festen Seitenleiste. Das JS in
   ev_layout.php nutzt dieselbe Bedingung (ELV_MOBIL_MQ). */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1100px) {
    .elv-burger {
        display: flex;
    }
    /* Burger wird beim Oeffnen zum X */
    .elv-burger span {
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    html.elv-navi-offen .elv-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    html.elv-navi-offen .elv-burger span:nth-child(2) { opacity: 0; }
    html.elv-navi-offen .elv-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    /* Seite dahinter scrollt nicht mit, solange das Menue offen ist */
    html.elv-navi-offen,
    html.elv-navi-offen body {
        overflow: hidden;
    }
    .elv-kopf {
        gap: 8px;
    }
    .elv-navi {
        width: min(320px, 86vw);
        transform: translateX(-100%);
        visibility: hidden;          /* geschlossen: nicht per Tab erreichbar */
        transition: transform 0.22s ease, visibility 0s linear 0.22s;
        z-index: 950;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.35);
        font-size: 16px;
        overscroll-behavior: contain;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
    html.elv-navi-offen .elv-navi {
        visibility: visible;
        transition: transform 0.22s ease;
    }
    .elv-navi a {
        padding: 11px 10px;      /* Tippflaechen >= 44px */
    }
    .elv-navi .elv-navi-fuss a {
        padding: 0;
    }
    .elv-gruppe summary {
        padding: 14px 0;
        font-size: 13px;
    }
    .elv-suche input {
        font-size: 16px;        /* verhindert Auto-Zoom auf iOS */
    }
    html.elv-navi-offen .elv-navi {
        transform: none;
    }
    html.elv-navi-offen .elv-backdrop {
        display: block;
        position: fixed;
        inset: var(--elv-kopf-hoehe) 0 0 0;
        z-index: 940;
        background: rgba(0, 0, 0, 0.4);
    }
    .elv-main {
        margin-left: 0;
    }
    .elv-main {
        padding: 8px;
    }
}
@media (max-width: 520px) {
    .elv-kopf-info {
        display: none;
    }
    .elv-hinweise { gap: 4px; }
    .elv-hinweis { height: 26px; padding: 0 6px; gap: 4px; font-size: 11px; }
    .elv-hinweis-text { display: none; }
    .elv-hinweis-kurz { display: inline; }
    .elv-system {
        margin-left: auto;
    }
}

/* =====================================================================
 * Modern-Skin fuer die Altseiten (Tabellenlayouts der 2000er)
 *
 * Die ~75 Altseiten bauen ihr Layout aus Tabellen mit HTML-Attributen
 * (bgcolor, bordercolor, cellpadding, <font size>). Statt jede Seite
 * umzuschreiben, uebersetzt dieser Block genau diese Altmuster in das
 * neue Design (Karten mit runden Ecken, ruhige Zeilen, lesbare Schrift):
 *
 *  - Alles steht in :where(...) und hat damit Spezifitaet 0: jede
 *    seiteneigene Regel (Dashboard, Liste, Startseite, Editor ...) gewinnt
 *    automatisch. Ueberschrieben werden nur HTML-Attribute (die zaehlen
 *    in CSS noch weniger) - und inline border-collapse per !important.
 *  - Karten: nur Tabellen der obersten Ebene ohne class-Attribut.
 *    Verschachtelte (Layout-)Tabellen bleiben flach.
 *  - Farben: die alten Grautoene werden auf die neue Palette gemappt,
 *    fachliche Farben (gelb/gruen/rot als Status) bleiben erhalten.
 *
 * Zuruecknehmen: diesen Block entfernen.
 * ===================================================================== */

/* Grundschrift im Inhaltsbereich; in Quirks-Mode erben Tabellen die
   Schriftgroesse sonst nicht (UA-Regel table { font-size: medium }). */
:where(.elv-main) {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #1B1F23;
}
:where(.elv-main table) {
    font-size: inherit;
}

/* <font size="..."> - die alten Groessen 1/2 (10/13px) sind auf heutigen
   Bildschirmen zu klein, 3 wird fuer Seitentitel genutzt. */
:where(.elv-main font[size="1"]) { font-size: 12px; }
:where(.elv-main font[size="2"]) { font-size: 13px; }
:where(.elv-main font[size="3"]) { font-size: 17px; }
:where(.elv-main font[size="4"]) { font-size: 20px; }
:where(.elv-main font[size="3"], .elv-main font[size="4"]) { color: var(--elv-dunkel); }

/* ---- Karten: oberste Tabellenebene ------------------------------------ */
:where(.elv-main table[border]:not([class]):not(table table)) {
    margin: 0 auto 14px;
    border: 0;
    border-collapse: separate !important;   /* sonst keine runden Ecken */
    border-spacing: 0;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(27, 46, 58, 0.10), 0 1px 2px rgba(27, 46, 58, 0.06);
}
/* Ecken der Randzellen mitrunden, damit Zeilenfarben nicht herausragen */
:where(.elv-main table[border]:not([class]):not(table table) > :first-child > tr:first-child > :first-child) { border-top-left-radius: 10px; }
:where(.elv-main table[border]:not([class]):not(table table) > :first-child > tr:first-child > :last-child) { border-top-right-radius: 10px; }
:where(.elv-main table[border]:not([class]):not(table table) > :last-child > tr:last-child > :first-child) { border-bottom-left-radius: 10px; }
:where(.elv-main table[border]:not([class]):not(table table) > :last-child > tr:last-child > :last-child) { border-bottom-right-radius: 10px; }

/* Karten-Innenabstand, wo die Altseite keinen hatte (cellpadding="0") */
:where(.elv-main table[border]:not([class]):not(table table):not([bordercolor]) > tbody > tr > td) {
    padding: 8px 12px;
}

/* Tabellen, die in der Altseite per collapse ihre Zellabstaende
   (cellspacing) abgeschaltet hatten, auch als Karte ohne Abstaende. */
:where(.elv-main table[style*="collapse"]) {
    border-spacing: 0;
}

/* ---- Datenlisten (border="1" bordercolor="#FFFFFF") ------------------- */
:where(.elv-main table[bordercolor]) {
    border: 0;
    border-collapse: separate !important;
    border-spacing: 0;
}
:where(.elv-main table[bordercolor] > tbody > tr > td, .elv-main table[bordercolor] > tbody > tr > th) {
    padding: 5px 8px;
    border: 0;
    border-bottom: 1px solid #E6EAED;
    vertical-align: middle;
}
:where(.elv-main table[bordercolor] > tbody > tr:last-child > td) {
    border-bottom: 0;
}
:where(.elv-main table[bordercolor] > tbody > tr:not([bgcolor="#E4E4E4" i]):hover > td) {
    background-color: #EAF2F7;
}

/* ---- Alte Grautoene -> neue Palette ------------------------------------ */
/* Kopfzeilen der Listen */
:where(.elv-main [bgcolor="#E4E4E4" i]) {
    background-color: #E9EEF2;
}
:where(.elv-main tr[bgcolor="#E4E4E4" i] > td, .elv-main tr[bgcolor="#E4E4E4" i] > th) {
    font-weight: bold;
    color: #33434F;
}
:where(.elv-main tr[bgcolor="#E4E4E4" i] font) {
    color: #33434F;
}
/* Zebra-Zeilen und graue Abschnitte */
:where(.elv-main [bgcolor="#D7D7D7" i]) { background-color: #F4F6F8; }
:where(.elv-main [bgcolor="#EFEFEF" i]) { background-color: #FFFFFF; }
:where(.elv-main tr[bgcolor="#D7D7D7" i]) { background-color: #F7F9FA; }
:where(.elv-main [bgcolor="#C0C0C0" i], .elv-main [bgcolor="silver" i]) { background-color: #E9EEF2; }

/* ---- Formularelemente ohne eigene Klasse ------------------------------- */
:where(.elv-main :is(input[type=text], input[type=password], input[type=number], input[type=date],
                      input[type=email], input[type=tel], input[type=search], input:not([type]),
                      select, textarea):not([class])) {
    padding: 2px 4px;          /* knapp: viele Altfelder sind per size= schmal */
    border: 1px solid #C5CED5;
    border-radius: 5px;
    background-color: #fff;
    color: #000;
}
:where(.elv-main :is(input, select, textarea):not([class]):focus) {
    outline: 2px solid var(--elv-dunkel);
    outline-offset: 0;
    border-color: transparent;
}
:where(.elv-main :is(input[type=submit], input[type=button], input[type=reset], button):not([class])) {
    margin: 2px;               /* ohne alten Rahmen kleben Buttons sonst aneinander */
    padding: 4px 12px;
    border: 0;
    border-radius: 5px;
    background-color: var(--elv-dunkel);
    color: #fff;
    cursor: pointer;
}
:where(.elv-main :is(input[type=submit], input[type=button], input[type=reset], button):not([class]):hover) {
    background-color: var(--elv-akzent);
}
:where(.elv-main :is(input[type=submit], input[type=button], input[type=reset], button):not([class]):disabled) {
    opacity: 0.55;
    cursor: default;
}

/* Smartphone: breite Karten scrollen einzeln seitlich (statt dass der
   ganze Inhaltsbereich mitscrollt und Karten abgeschnitten wirken).
   display:block macht aus der Tabelle einen Scroll-Container, die Zeilen
   bleiben darin als Tabelle angeordnet. */
@media (max-width: 900px) {
    :where(.elv-main table[border]:not([class]):not(table table)) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Listenzeilen nicht umbrechen - die Karte scrollt ja seitlich */
    :where(.elv-main table[bordercolor] > tbody > tr > td) {
        white-space: nowrap;
    }
}

/* Trennlinien */
:where(.elv-main hr) {
    border: 0;
    border-top: 1px solid #E1E6EA;
}

/* ---- Detailseite (ev_detail.php) ---------------------------------------
 * Die Detailansicht besteht aus Kacheln (<section class="dt-kachel ...">)
 * in einem CSS-Grid. Breit: 3 Spalten, Status rechts ueber 3 Zeilen;
 * Tablet: 2 Spalten; Smartphone: alles untereinander.
 * Boersen + Memos haengen an EINEM Formular ("Speichern") - das Formular
 * ist per display:contents fuer das Grid unsichtbar.
 * --------------------------------------------------------------------- */
.dt-seite {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
        "kopf     kopf      kopf"
        "bilder   bilder    status"
        "technik  sonstiges status"
        "preis    aktionen  status"
        "ausst    ausst     ausst"
        "boersen  boersen   boersen"
        "memos    memos     memos";
    gap: 14px;
    text-align: left;
    font: 13px/1.5 Arial, Helvetica, sans-serif;
    color: #1B1F23;
}
.dt-form { display: contents; }

.dt-kopf       { grid-area: kopf; }
.dt-bilder     { grid-area: bilder; }
.dt-status     { grid-area: status; }
.dt-aktionen   { grid-area: aktionen; }
.dt-technik    { grid-area: technik; }
.dt-sonstiges  { grid-area: sonstiges; }
.dt-preis      { grid-area: preis; }
.dt-ausstattung{ grid-area: ausst; }
.dt-boersen    { grid-area: boersen; }
.dt-memos      { grid-area: memos; }

.dt-kachel {
    min-width: 0;
    padding: 14px 16px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(27, 46, 58, 0.10), 0 1px 2px rgba(27, 46, 58, 0.06);
}
/* Tabellen innerhalb der Kacheln sind keine eigenen Karten (Modern-Skin) */
.dt-seite table {
    box-shadow: none;
    margin: 0;
}
.dt-h {
    margin: 0 0 8px;
    font: bold 11px Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5A6B78;
}
/* Unterueberschriften im Text (<u>Energieverbrauch ...</u>, Spalten) */
.dt-seite u {
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5A6B78;
}
.dt-text { line-height: 1.6; }
.dt-links {
    margin: 10px 0 0;
    font-size: 12px;
}
.dt-links a, .dt-links a font { color: #1B5E8C; }

/* ---- Kopf: Modell + Nummer ---- */
.dt-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
}
.dt-titel {
    margin: 0;
    font-size: 22px;
    color: var(--elv-dunkel);
}
.dt-nummer {
    font-size: 20px;
    font-weight: bold;
    color: #5A6B78;
    letter-spacing: 0.02em;
}

/* ---- Bilder ---- */
.dt-bilder {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
}
.dt-hauptbild {
    flex: 1 1 320px;
    max-width: 520px;
}
.dt-hauptbild img {
    display: block;
    width: 100%;
    height: auto;              /* showImage() setzt height=240 - CSS gewinnt */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(27, 46, 58, 0.18);
}
.dt-thumbs {
    flex: 1 1 300px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 12px 10px;
    align-content: start;
}
.dt-thumb { min-width: 0; }
.dt-thumb a { text-decoration: none; }
.dt-thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 90 / 64;
    object-fit: cover;
    border-radius: 6px;
    outline: 1px solid #D5DCE1;
    transition: outline-color 0.12s, transform 0.12s;
}
.dt-thumb a:hover img {
    outline: 2px solid var(--elv-akzent);
    transform: scale(1.04);
}
/* "Bild X loeschen" als kleines X in der Bildecke (Text bleibt fuer
   Screenreader/title erhalten, nur optisch ausgeblendet). Die
   Sicherheitsabfrage "Bild X wirklich loeschen?" (ask()) bleibt. */
.dt-thumb { position: relative; }
.dt-thumb a[href^="javascript:ask("] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(27, 46, 58, 0.55);
    overflow: hidden;
    opacity: 0.75;
    transition: opacity 0.12s, background-color 0.12s;
}
.dt-thumb a[href^="javascript:ask("] font {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.dt-thumb a[href^="javascript:ask("]::after {
    content: '\2715';
    position: absolute;
    inset: 0;
    color: #fff;
    font: bold 11px/20px Arial, Helvetica, sans-serif;
    text-align: center;
}
.dt-thumb:hover a[href^="javascript:ask("] { opacity: 1; }
.dt-thumb a[href^="javascript:ask("]:hover { background: var(--elv-akzent); }

/* ---- Status (gruen/gelb/rot bleibt, Kachel ohne Innenabstand) ---- */
.dt-status {
    padding: 0;
    overflow: hidden;
}
.dt-status > table {
    display: table;            /* nicht die Handy-Scrollregel der Modern-Skin */
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0;
    border-radius: 10px;
    background-color: transparent;
}
/* Fachliche Farbe der Statuskachel (vorher bgcolor der Tabelle):
   gruen = verfuegbar, gelb = reserviert/geparkt, rot = verkauft/bestellt.
   Die ganze Kachel wird eingefaerbt, auch wenn sie hoeher als ihr Inhalt ist. */
.dt-status:has(> table[bgcolor="#CCFFCC" i]) { background-color: #CCFFCC; }
.dt-status:has(> table[bgcolor="#FFFFCC" i]) { background-color: #FFFFCC; }
.dt-status:has(> table[bgcolor="#FFCCCC" i]) { background-color: #FFCCCC; }
.dt-status a font { text-decoration: underline; }
.dt-status > table > tbody > tr > td {
    padding: 10px 14px;
}
.dt-status table table td {
    padding: 2px 10px 2px 0;
    vertical-align: top;
}
.dt-status select { max-width: 100%; }

/* ---- Aktionen: Suche/Standort + Buttons ---- */
/* Suche und Standort genau so breit wie die Knopfreihe darunter: die Kachel
   hat eine Spalte in Breite der Knopfreihe (hoechstens Kachelbreite); Suche
   links buendig mit dem ersten, Standort rechts buendig mit dem letzten Knopf.
   Feld und Knopf je nebeneinander, das Feld nimmt den Platz. */
.dt-aktionen {
    display: grid;
    grid-template-columns: fit-content(100%);
    align-content: start;
}
.dt-suchform {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    margin: 0 0 12px;
}
.dt-feld {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 6px;
    min-width: 0;
}
.dt-feld label {
    grid-column: 1 / -1;
    font-size: 12px;
    color: #5A6B78;
}
.dt-feld input[type=text], .dt-feld select { width: 100%; min-width: 0; box-sizing: border-box; }
.dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dt-buttons .ibtn {
    margin: 0;
    min-width: 42px;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    border-radius: 5px;
    font-size: 11px;
}

/* ---- Merkmale (Boersen) + Infos (Memos): je eine Zeile, drei Spalten ----
   Texte | Texte | Haken; alle Spalten beginnen mit derselben Kopfzeile
   (Beschriftung klein und grau wie .dt-werte). Codes und der Hinweis zum
   Rotstiftpreis sind Aufklapper (.dt-pop) und kosten keine Hoehe. */
.dt-boersen, .dt-memos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(310px, 1fr);
    align-items: start;
    gap: 10px 24px;
}
.dt-textfeld, .dt-hakenfeld { min-width: 0; }
.dt-feldkopf {
    display: flex;
    align-items: center;
    gap: 6px 10px;
    min-height: 20px;
    margin-bottom: 3px;
}
.dt-feldkopf label, .dt-kopf-titel {
    font: bold 10px/1.4 Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #8A96A0;
}
.dt-zaehler, .dt-kopfwert { margin-left: auto; font-size: 11px; color: #8A96A0; white-space: nowrap; }
.dt-zaehler.dt-voll { color: #C62828; font-weight: bold; }
.dt-recht { font: normal 10px Arial, Helvetica, sans-serif; text-transform: none; letter-spacing: 0; }
.dt-seite textarea,
.dt-seite input[name=pusher] {
    width: 100% !important;
    box-sizing: border-box;
    padding: 5px 8px;
    border: 1px solid #C5CED5;
    border-radius: 6px;
    background: #fff;
    font: 13px/1.4 Arial, Helvetica, sans-serif;
    color: #1B1F23;
}
.dt-seite textarea { height: 96px; resize: vertical; }
/* Aufklapper: Knopf in der Zeile, Inhalt schwebt darunter */
.dt-pop { position: relative; }
.dt-pop > summary {
    display: inline-block;
    padding: 0 7px;
    border: 1px solid color-mix(in srgb, var(--gr-farbe, #5A6B78) 35%, #fff);
    border-radius: 9px;
    background: #fff;
    font: bold 10px/16px Arial, Helvetica, sans-serif;
    color: var(--gr-farbe, #5A6B78);
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.dt-pop > summary::-webkit-details-marker { display: none; }
.dt-pop[open] > summary { background: var(--gr-farbe, #5A6B78); color: #fff; }
.dt-pop > div {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    width: max-content;
    max-width: 300px;
    padding: 8px 10px;
    border: 1px solid #C5CED5;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(27, 46, 58, 0.18);
    font: 12px/1.6 Arial, Helvetica, sans-serif;
    color: #1B1F23;
    text-transform: none;
    letter-spacing: 0;
}
.dt-pop code {
    padding: 1px 6px;
    border: 1px solid #DDE3E8;
    border-radius: 10px;
    font: 11px Arial, Helvetica, sans-serif;
    white-space: nowrap;
}
.dt-pop-info > summary { padding: 0; width: 16px; text-align: center; font-style: italic; font-family: Georgia, serif; }
.dt-pop-info.dt-ok > summary { border-color: #2E7D32; color: #2E7D32; }
.dt-pop-info.dt-ok[open] > summary { background: #2E7D32; color: #fff; }
.dt-hakenfeld .dt-pop > div { left: auto; right: 0; }
/* Haken (ev_memo.moXX) zweispaltig, gesperrte grau */
.dt-haken-liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 12px;
}
.dt-haken-zeile { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dt-haken { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; line-height: 1.35; cursor: pointer; }
.dt-haken input { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; }
.dt-haken.dt-aus { color: #8A96A0; cursor: default; }
.dt-speichern { display: flex; justify-content: flex-end; align-items: end; }
.dt-speichern .vw-knopf { padding: 7px 22px; }
@media (max-width: 1250px) {
    .dt-boersen, .dt-memos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dt-hakenfeld { grid-column: 1 / -1; }
    .dt-haken-liste { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
@media (max-width: 700px) {
    .dt-boersen, .dt-memos { grid-template-columns: minmax(0, 1fr); }
    .dt-haken-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dt-speichern { grid-column: 1 / -1; margin-top: 6px; }
    .dt-speichern .vw-knopf { flex: 1 1 100%; }
}

/* ---- Volle Inhaltsbreite (1400px, ab ~1620px Fenster): 4 Spalten ----
   Status und Aktionen+Hauspreis stehen als zwei schmale Spalten neben
   den Bildern und sind so etwa gleich hoch wie diese; Technik bekommt
   zwei Spalten fuer ihre langen Zeilen. */
@media (min-width: 1620px) {
    .dt-seite {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-areas:
            "kopf     kopf     kopf       kopf"
            "bilder   bilder   status     aktionen"
            "bilder   bilder   status     preis"
            "technik  technik  sonstiges  sonstiges"
            "ausst    ausst    ausst      ausst"
            "boersen  boersen  boersen    boersen"
            "memos    memos    memos      memos";
    }
    /* Hauptbild und Vorschau (3 Spalten) teilen sich die Kachel etwa
       haelftig und sind so ungefaehr gleich hoch */
    .dt-bilder { flex-wrap: nowrap; }
    .dt-hauptbild {
        flex: 1 1 52%;
        max-width: none;
    }
    .dt-thumbs {
        flex: 1 1 48%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
}

/* ---- Tablet: 2 Spalten ---- */
@media (max-width: 1200px) {
    .dt-seite {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "kopf      kopf"
            "bilder    bilder"
            "status    aktionen"
            "status    preis"
            "technik   sonstiges"
            "ausst     ausst"
            "boersen   boersen"
            "memos     memos";
    }
}
/* ---- Smartphone: untereinander ---- */
@media (max-width: 700px) {
    .dt-seite {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "kopf" "bilder" "status" "aktionen" "technik"
            "sonstiges" "preis" "ausst" "boersen" "memos";
        gap: 10px;
    }
    .dt-kachel { padding: 12px; }
    .dt-status { padding: 0; }
    .dt-titel { font-size: 18px; }
    .dt-nummer { font-size: 16px; }
    .dt-hauptbild { max-width: none; }
}

/* ---- Startseite (ev_start.php) ----------------------------------------
 * Kennzahlen, Marken-Karten (Logo + NW/GW + Portale), Angebote, Weitere
 * Links und Forum als Kacheln; alles umbrechend, ohne feste Breiten.
 * --------------------------------------------------------------------- */
.st-seite {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font: 13px/1.5 Arial, Helvetica, sans-serif;
    color: #1B1F23;
    text-align: left;
}
.st-kachel {
    padding: 14px 16px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(27, 46, 58, 0.10), 0 1px 2px rgba(27, 46, 58, 0.06);
}
.st-h {
    margin: 0 0 10px;
    font: bold 11px Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5A6B78;
}
.st-seite a { color: #1B5E8C; text-decoration: none; }
.st-seite a:hover { text-decoration: underline; }

/* Kennzahlen */
.st-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.st-kpi {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 14px 18px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(27, 46, 58, 0.10), 0 1px 2px rgba(27, 46, 58, 0.06);
}
.st-seite a.st-kpi { color: inherit; }
.st-seite a.st-kpi:hover {
    text-decoration: none;
    outline: 2px solid var(--elv-akzent);
}
.st-kpi-wert {
    font-size: 26px;
    font-weight: bold;
    line-height: 1.2;
    color: var(--elv-dunkel);
}
.st-kpi-wert.st-klein { font-size: 16px; }
.st-kpi-label { font-size: 12px; color: #5A6B78; }
.st-kpi.st-warn { outline: 2px solid var(--elv-akzent); }
.st-kpi.st-warn .st-kpi-wert { color: var(--elv-akzent); }

/* Marken */
.st-marken {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}
.st-marke {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid #E6EAED;
    border-radius: 10px;
    text-align: center;
}
.st-marke img {
    display: block;
    width: 100%;
    height: 80px;
    object-fit: contain;   /* feste Logo-Hoehe: Logos mittig, graue Balken liegen auf einer Linie */
    margin: 0 auto;
}
.st-marke img[src*="jac"] { box-sizing: content-box; width: auto; height: 28px; padding: 26px 0; }   /* flaches, breites Logo: optisch so gross wie die uebrigen Marken, Feldhoehe bleibt 80px */
.st-zahlen {
    padding: 6px 8px;
    border-radius: 8px;
    background: #F4F6F8;
    line-height: 1.9;
}
.st-seite .st-zahlen a {
    color: var(--elv-dunkel);
    font-weight: bold;
}
.st-links {
    font-size: 12px;
    line-height: 1.9;
}

/* Angebote / Weitere Links */
/* Aktuelle Listen | Weitere Links nebeneinander, Breite nach Anzahl der
   Karten (5 : 3), damit die Karten links und rechts gleich breit sind.
   Unter 900px Fensterbreite untereinander; unter Stufe 3 gibt es nur
   "Weitere Links" (volle Breite). Aendert sich die Zahl der Karten, das
   Verhaeltnis hier anpassen. */
.st-paar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gr-abstand, 14px) 14px;
    align-items: stretch;
}
@media (min-width: 900px) {
    .st-paar:has(> .st-kachel + .st-kachel) { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); }
}
.st-paar > .st-kachel { min-width: 0; }
.st-karten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.st-karte {
    min-width: 0;
    overflow-wrap: anywhere;      /* "Kommunikationsverzeichnis" */
    padding: 10px;
    border: 1px solid #E6EAED;
    border-radius: 10px;
    text-align: center;
    line-height: 1.7;
}
.st-paar .st-karte { display: flex; flex-direction: column; justify-content: center; }
.st-karte-inhalt { width: 100%; }
.st-karte img {
    max-width: 100%;
    height: 50px;
    width: auto;
    object-fit: contain;
    border-radius: 6px;
}
.st-karte svg { display: inline-block; }

/* Forum */
.st-forum-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
}
.st-forum-kopf .st-h { margin: 0 0 10px; }
.st-forum-kopf a { font-size: 12px; font-weight: bold; }
.st-beitrag {
    padding: 8px 12px;
    border-left: 3px solid #D5DCE1;
    border-radius: 4px;
    background: #F7F9FA;
}
.st-beitrag + .st-beitrag { margin-top: 8px; }
.st-beitrag-meta { font-size: 11px; color: #5A6B78; }
.st-beitrag-text { margin-top: 2px; overflow-wrap: anywhere; }
/* Beitraege der letzten 24h (vorher rote Schrift) */
.st-beitrag.st-neu { border-left-color: var(--elv-akzent); }
.st-beitrag.st-neu .st-beitrag-meta,
.st-beitrag.st-neu .st-beitrag-text { color: #C62828; }
.st-forum-fuss { margin-top: 8px; text-align: right; font-size: 12px; font-weight: bold; }
.st-fuss { margin-top: 12px; text-align: center; font-size: 11px; color: #3C4A55; }   /* unter dem Rahmen */

/* Smartphone: kompakter, Marken und Karten zweispaltig */
@media (max-width: 700px) {
    .st-seite { gap: 10px; }
    .st-kachel { padding: 12px; }
    .st-kpis { gap: 10px; }
    .st-kpi { padding: 10px 14px; }
    .st-kpi-wert { font-size: 22px; }
    .st-marken, .st-karten { gap: 8px; }
    .st-marke { padding: 10px 8px; gap: 8px; }
    .st-marke img { height: 40px; }
    .st-marke img[src*="jac"] { height: 14px; padding: 13px 0; }
    .st-links, .st-karte { font-size: 12px; }
}

/* ---- Fahrzeugsuche (ev_suche.php) --------------------------------------
 * Formular in Gruppen-Kacheln (fieldset), die je nach Breite neben- oder
 * untereinander stehen; Aktionsleiste auf dem Handy unten angeheftet.
 * --------------------------------------------------------------------- */
.su-seite {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    font: 13px/1.4 Arial, Helvetica, sans-serif;
    color: #1B1F23;
    text-align: left;
}
.su-kachel {
    min-width: 0;
    margin: 0;
    padding: 14px 16px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(27, 46, 58, 0.10), 0 1px 2px rgba(27, 46, 58, 0.06);
}
.su-h {
    float: left;               /* legend in die Kachel holen */
    width: 100%;
    margin: 0 0 10px;
    padding: 0;
    font: bold 11px Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5A6B78;
}
.su-h + * { clear: both; }

/* Kopf mit Bestand/Archiv-Umschalter */
.su-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
}
.su-titel { margin: 0; font-size: 22px; color: var(--elv-dunkel); }
.su-umschalter {
    display: inline-flex;
    padding: 3px;
    border-radius: 8px;
    background: #E9EEF2;
}
.su-umschalter label { cursor: pointer; }
.su-umschalter input { position: absolute; opacity: 0; pointer-events: none; }
.su-umschalter span {
    display: block;
    padding: 7px 18px;
    border-radius: 6px;
    font-weight: bold;
    color: #5A6B78;
}
.su-umschalter input:checked + span {
    background: var(--elv-dunkel);
    color: #fff;
}
.su-umschalter input:focus-visible + span { outline: 2px solid var(--elv-akzent); }

/* Gruppen */
.su-gruppen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
    align-items: stretch;      /* Kacheln einer Reihe gleich hoch */
}
.su-feld {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
    min-width: 0;
}
.su-feld:last-child { margin-bottom: 0; }
.su-feld > label, .su-feldname { font-size: 12px; font-weight: bold; color: #33434F; }
/* Mehrfachauswahl als Schildchen (ev_suche.php: NGDVT) */
.su-schalter { display: flex; flex-wrap: wrap; gap: 6px; }
.su-schalter label { flex: 1 1 0; cursor: pointer; }
.su-schalter input { position: absolute; opacity: 0; pointer-events: none; }
.su-schalter span {
    display: block;
    padding: 6px 4px;
    border: 1px solid #C5CED5;
    border-radius: 6px;
    background: #fff;
    color: #33434F;
    font-weight: bold;
    text-align: center;
}
.su-schalter label:hover span { border-color: var(--elv-dunkel); }
.su-schalter input:checked + span { border-color: var(--elv-dunkel); background: var(--elv-dunkel); color: #fff; }
.su-schalter input:focus-visible + span { outline: 2px solid var(--elv-akzent); outline-offset: 1px; }
.su-inaktiv { opacity: 0.45; }
.su-inaktiv label { cursor: not-allowed; }
.su-hinweis { font-weight: normal; color: #8A96A0; }
.su-zweier {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
.su-zweier .su-feld { margin-bottom: 0; }
.su-reihe { display: flex; gap: 6px; }
.su-reihe > input { flex: 1 1 0; min-width: 0; }
.su-codefelder > input { max-width: 70px; }

.su-seite input[type=text],
.su-seite input[type=number],
.su-seite select {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid #C5CED5;
    border-radius: 6px;
    background: #fff;
    color: #000;
    font: 14px Arial, Helvetica, sans-serif;
}
.su-seite select[multiple] { padding: 4px; }
.su-seite input:focus, .su-seite select:focus {
    outline: 2px solid var(--elv-dunkel);
    outline-offset: 0;
    border-color: transparent;
}
.su-seite input.su-hervor { background: #F4F6F8; }

/* Ausstattung */
.su-haken {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 4px 12px;
    margin-bottom: 12px;
}
.su-haken label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    cursor: pointer;
}
.su-haken input { width: 17px; height: 17px; margin: 0; }
.su-codes { margin-top: 12px; }
.su-codes summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    color: #1B5E8C;
}
.su-codeliste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px 12px;
    max-height: 320px;
    overflow-y: auto;
    margin-top: 8px;
    padding: 8px;
    border-radius: 8px;
    background: #F7F9FA;
    font-size: 12px;
}
.su-code span { color: #8A96A0; }
/* Alle Ausstattungsmerkmale nach Kategorien (ev_suche.php) */
.su-ausstattung { min-width: 0; }
/* Kopfzeile: Ueberschrift links, Merkmalsuche rechts daneben */
.su-ausstattung > .su-h { width: auto; margin-right: 16px; line-height: 32px; margin-bottom: 8px; }
.su-ausstattung > .su-merkmal-leiste { clear: none; float: right; width: min(460px, 100%); margin-bottom: 8px; }
.su-ausstattung > .su-merkmal-leiste input[type=search] { flex: 1 1 auto; }
.su-schnell { clear: both; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; }
.su-schnell > .su-schalter { flex: 1 1 0; min-width: 0; gap: 5px; }   /* neben der Ueberschrift umbrechen */
.su-schalter.su-schalter-frei label { flex: 0 0 auto; }
.su-schalter.su-schalter-frei span { padding: 4px 8px; font-size: 12px; font-weight: normal; }
.su-schalter span small { margin-left: 2px; color: #8A96A0; font-size: 11px; }
.su-schalter input:checked + span small { color: #C9D3DA; }
.su-merkmal-leiste { display: flex; gap: 8px; align-items: center; }
.su-merkmal-leiste input[type=search] {
    flex: 0 1 340px;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid #C5CED5;
    border-radius: 6px;
    font: 14px Arial, Helvetica, sans-serif;
}
.su-merkmal-leiste .su-btn { padding: 7px 14px; font-size: 13px; }
.su-gewaehlt { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.su-gewaehlt:empty { display: none; }
.su-schild {
    padding: 4px 10px;
    border: 0;
    border-radius: 12px;
    background: var(--elv-dunkel);
    color: #fff;
    font: 12px Arial, Helvetica, sans-serif;
    cursor: pointer;
}
.su-schild:hover { background: var(--elv-akzent); }
.su-kategorien {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 6px 8px;
    align-items: start;
}
.su-kategorie { border: 1px solid #E1E6EA; border-radius: 8px; background: #F7F9FA; }
.su-kategorie[open] { background: #fff; }
.su-kategorie summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: bold;
    color: #33434F;
    cursor: pointer;
}
.su-kat-zahl { font-weight: normal; color: #8A96A0; }
.su-kat-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.su-kat-gewaehlt { margin-left: auto; flex: none; min-width: 8px; text-align: center; padding: 1px 6px; border-radius: 10px; background: var(--elv-akzent); color: #fff; font-size: 11px; }
.su-kat-gewaehlt:empty { display: none; }
.su-merkmale { display: flex; flex-direction: column; padding: 0 10px 8px; }
.su-merkmale label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 13px;
    cursor: pointer;
}
.su-merkmale label[hidden] { display: none; }
.su-merkmale input { width: 16px; height: 16px; margin: 0; flex: none; }
.su-merkmale small { margin-left: auto; color: #8A96A0; }
.su-merkmale label.su-leer span { color: #8A96A0; }

/* Aktionsleiste */
.su-aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 20px;
}
.su-sort { margin: 0; min-width: 200px; }
.su-knoepfe { display: flex; gap: 8px; margin-left: auto; }
.su-btn {
    padding: 10px 26px;
    border: 0;
    border-radius: 6px;
    background: var(--elv-akzent);
    color: #fff;
    font: bold 14px Arial, Helvetica, sans-serif;
    cursor: pointer;
}
.su-btn:hover { background: #C9363B; }
.su-btn.su-btn-2 { background: #E9EEF2; color: #33434F; }
.su-btn.su-btn-2:hover { background: #D5DCE1; }
.su-fuss { margin-top: 10px; text-align: center; font-size: 11px; }

/* Smartphone: Felder gross (kein iOS-Zoom), Suchen-Leiste unten fest */
@media (max-width: 700px) {
    .su-seite { gap: 10px; }
    .su-kachel { padding: 12px; }
    .su-gruppen { gap: 10px; }
    .su-titel { font-size: 19px; }
    .su-seite input[type=text],
    .su-seite input[type=number],
    .su-seite select { font-size: 16px; padding: 8px 10px; }
    .su-aktionen {
        position: sticky;
        bottom: 0;
        z-index: 5;
        box-shadow: 0 -2px 10px rgba(27, 46, 58, 0.18);
    }
    .su-haken { grid-template-columns: 1fr 1fr; }
    .su-kategorien { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
    .su-kategorie[open] { grid-column: 1 / -1; }             /* offene Kategorie volle Breite */
    .su-schnell > .su-schalter { flex-basis: 100%; }
    .su-kategorie summary { gap: 4px; padding: 8px; }
    .su-merkmal-leiste input[type=search] { flex: 1 1 auto; font-size: 16px; padding: 8px 10px; }
    .su-merkmale label { padding: 6px 0; font-size: 14px; }
    .su-sort { flex: 1 1 100%; }
    .su-knoepfe { width: 100%; }
    .su-btn { flex: 1; }
}

/* Haekchen im Seitenkopf (ev_expsu.php: Fahrzeugarten) */
.su-hinweis-kopf { font-weight: bold; color: var(--elv-akzent); }
.su-haken.su-haken-kopf { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
/* Listeninhalt (ev_ansu.php): volle Breite, Haekchen mit Eingabefeldern */
.su-listeninhalt { margin: 0 0 14px; }
.su-haken.su-haken-text { margin-top: 10px; }
.su-haken.su-haken-text label { flex-wrap: wrap; }
.su-haken input[type=text] { width: 56px; padding: 3px 6px; border: 1px solid #C5CED5; border-radius: 6px; font: 13px Arial, Helvetica, sans-serif; }

/* ---- Trefferliste (ev_liste.php) ----------------------------------------
 * Desktop: Tabelle in einer Karte. Smartphone (<= 700px): jede Zeile
 * wird eine Fahrzeugkarte (Bild | Modell, Nummer, Preis, Status; darunter
 * die Eckdaten mit Beschriftung aus data-label). Blaettern-Leiste der
 * Bibliothek (lib/blaettern) hier im neuen Stil ueberschrieben.
 * --------------------------------------------------------------------- */
.li-seite {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font: 13px/1.45 Arial, Helvetica, sans-serif;
    color: #1B1F23;
    text-align: left;
}
.li-kachel {
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(27, 46, 58, 0.10), 0 1px 2px rgba(27, 46, 58, 0.06);
}

/* Kopfleiste: Anzahl, pro Seite, Export, Blaettern */
.li-leiste { padding: 10px 14px; }
.li-leiste-oben {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
}
.li-anzahl { font-size: 14px; }
.li-anzahl b { font-size: 18px; color: var(--elv-dunkel); }
/* "Suchergebnis - n Fahrzeuge gefunden" im Rahmen, gleich hoch wie "pro Seite" */
.li-ergebnis {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    height: 33px;
    padding: 0 14px;
    border: 1px solid #A9B8C2;
    border-radius: 8px;
    background: #fff;
}
.li-ergebnis .gr-titel { margin: 0; }
.li-epp {
    box-sizing: border-box;
    height: 33px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 8px;
    background: #E9EEF2;
}
.li-epp-label { padding: 0 6px; font-size: 11px; color: #5A6B78; }
.li-epp a {
    min-width: 36px;
    padding: 4px 8px;
    border-radius: 6px;
    color: #33434F;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}
.li-epp a:hover { background: #D5DCE1; }
.li-epp a.aktiv { background: var(--elv-dunkel); color: #fff; }
.li-export {
    margin-left: auto;
    padding: 6px 14px;
    border-radius: 6px;
    background: #1D6F42;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}
.li-export:hover { background: #16582f; }

:is(.li-seite, .vw-seite) div.blaettern {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 8px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 12px;
}
.li-leiste-unten div.blaettern { margin: 0; }
:is(.li-seite, .vw-seite) div.blaettern span.info { margin-right: 10px; color: #5A6B78; }
:is(.li-seite, .vw-seite) div.blaettern a,
:is(.li-seite, .vw-seite) div.blaettern span.aktiv {
    min-width: 32px;
    margin: 0;
    padding: 5px 10px;
    border: 0;
    border-radius: 6px;
    text-align: center;
}
:is(.li-seite, .vw-seite) div.blaettern a { background: #E9EEF2; color: #33434F; }
:is(.li-seite, .vw-seite) div.blaettern a:hover { background: #D5DCE1; }
:is(.li-seite, .vw-seite) div.blaettern span.aktiv { background: var(--elv-dunkel); color: #fff; }

/* Tabelle (Desktop) */
.li-tabellenkarte { overflow: hidden; }
.li-seite .li-tabelle {
    width: 100%;
    border-collapse: collapse;
    background: none;
    font-size: 13px;
}
.li-seite .li-tabelle th {
    padding: 8px 8px;
    border-bottom: 1px solid #DDE3E8;
    background: #F4F6F8;
    color: #5A6B78;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
    white-space: nowrap;
    height: auto;
}
.li-seite .li-tabelle td {
    padding: 7px 8px;
    border-bottom: 1px solid #EEF1F4;
    vertical-align: middle;
}
.li-seite .li-tabelle tr.zeile0,
.li-seite .li-tabelle tr.zeile1 { background: #fff; }
.li-seite .li-tabelle tr.zeile1 { background: #FAFBFC; }
.li-seite .li-tabelle tbody tr:hover { background: #EAF2F7; }
.li-seite .li-tabelle a { color: #1B1F23; text-decoration: none; }
.li-seite .li-tabelle a:hover { color: var(--elv-akzent); text-decoration: underline; }
.li-seite .li-tabelle .num,
.li-seite .li-tabelle th.num { text-align: right; white-space: nowrap; }
.li-seite .li-tabelle .spalte-bild { width: 76px; padding: 5px 8px; }
.li-seite .li-tabelle .spalte-bild img {
    display: block;
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    background: #E9EEF2;
}
.li-seite .li-nummer { font-weight: bold; }
.li-seite .li-preis { font-weight: bold; color: var(--elv-dunkel); }
.li-seite .li-status { font-size: 12px; white-space: nowrap; }   /* Punkt und Status in einer Zeile */
.li-seite .status-frei   { color: #1E8E3E; font-weight: bold; }
.li-seite .status-belegt { color: #C62828; font-weight: bold; }
.li-seite .status-export { color: #1B5E8C; font-weight: bold; }
.li-seite .punkt         { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; vertical-align: middle; cursor: help; }
.li-seite .punkt-ok      { background: #1E8E3E; }
.li-seite .punkt-nein    { background: #C62828; }
.li-seite .wert-hinweis  { color: #C62828; }

/* Keine Treffer: "Suche speichern" */
.li-seite .leer { padding: 18px; text-align: center; }
.li-seite .leer p { margin: 0 0 16px; line-height: 1.6; }
.li-seite .suche-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    max-width: 420px;
    margin: 0 auto;
    text-align: left;
}
.li-seite .suche-grid .voll { grid-column: span 2; }
.li-seite .suche-grid label { display: block; margin-bottom: 3px; font-size: 12px; font-weight: bold; color: #33434F; }
.li-seite .suche-grid input[type=text],
.li-seite .suche-grid input[type=number],
.li-seite .suche-grid select {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid #C5CED5;
    border-radius: 6px;
    font: 14px Arial, Helvetica, sans-serif;
}
.li-seite .suche-grid .paar { display: flex; gap: 6px; }
.li-seite .suche-aktionen { grid-column: span 2; display: flex; gap: 8px; margin-top: 4px; }
.li-seite .suche-aktionen input {
    flex: 1;
    margin: 0;
    padding: 9px 12px;
    border: 0;
    border-radius: 6px;
    background: #E9EEF2;
    color: #33434F;
    font: bold 14px Arial, Helvetica, sans-serif;
    cursor: pointer;
}
.li-seite .suche-aktionen input[type=submit] { background: var(--elv-akzent); color: #fff; }
.li-fuss { text-align: center; font-size: 11px; }

/* Smartphone: Zeilen als Fahrzeugkarten */
@media (max-width: 700px) {
    .li-seite { gap: 10px; }
    .li-export { margin-left: 0; }
    :is(.li-seite, .vw-seite) div.blaettern span.info { flex-basis: 100%; margin: 0 0 2px; }
    :is(.li-seite, .vw-seite) div.blaettern a,
    :is(.li-seite, .vw-seite) div.blaettern span.aktiv { min-width: 40px; padding: 9px 8px; }    /* Tippflaechen */

    .li-tabellenkarte { overflow: visible; background: none; box-shadow: none; }
    .li-seite .li-tabelle,
    .li-seite .li-tabelle tbody { display: block; }
    .li-seite .li-tabelle thead { display: none; }
    .li-seite .li-tabelle tbody tr {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr) minmax(0, 1fr);
        gap: 4px 10px;
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(27, 46, 58, 0.10), 0 1px 2px rgba(27, 46, 58, 0.06);
    }
    .li-seite .li-tabelle td {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
        text-align: left;
        overflow-wrap: anywhere;
    }
    .li-seite .li-tabelle td:empty { display: none; }
    /* feste Plaetze: Bild links ueber 3 Zeilen, rechts Modell / Nummer + Preis / Status */
    .li-seite .li-tabelle .spalte-bild { grid-column: 1; grid-row: 1 / span 3; width: auto; padding: 0; }
    .li-seite .li-tabelle .spalte-bild img { width: 104px; height: 78px; }
    .li-seite .li-modell { grid-column: 2 / 4; grid-row: 1; font-size: 14px; font-weight: bold; line-height: 1.3; }
    .li-seite .li-nummer { grid-column: 2; grid-row: 2; }
    .li-seite .li-preis  { grid-column: 3; grid-row: 2; text-align: right; font-size: 15px; }
    .li-seite .li-status { grid-column: 2 / 4; grid-row: 3; }
    /* Eckdaten: 3 pro Zeile, mit Beschriftung */
    .li-seite .li-tabelle td[data-label] {
        font-size: 12px;
        padding-top: 6px;
        border-top: 1px solid #EEF1F4;
    }
    .li-seite .li-tabelle td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #8A96A0;
    }
    .li-seite .li-tabelle td.num[data-label] { text-align: left; }
    .li-seite .leer p br { display: none; }             /* Fliesstext statt fester Umbrueche */
    .li-seite .suche-grid { grid-template-columns: 1fr; }
    .li-seite .suche-grid .voll,
    .li-seite .suche-aktionen { grid-column: span 1; }
    .li-seite .suche-grid input[type=text],
    .li-seite .suche-grid input[type=number],
    .li-seite .suche-grid select { font-size: 16px; }
}

/* ---- Verkaufsliste (ev_vkwas.php), Auslieferliste (ev_vkausl.php),
 *      Einkaufsstatistik (ev_ekstat.php), Bestandsstatistik (ev_bestat.php) --
 * Vier Listen als Karten: Verkaeufe (mit Filter und Tag-Navigation),
 * Widerrufe (rot), Parkliste (gelb), Neuzugaenge (gruen) - die fachlichen
 * Farben der Altseite bleiben als Kennfarbe am linken Kartenrand.
 * Desktop: Tabelle, bei schmalem Fenster seitlich scrollbar.
 * Smartphone (<= 700px): jede Zeile eine Karte - Fahrzeug / Nummer +
 * Status, darunter die Eckdaten mit Beschriftung aus data-label.
 * --------------------------------------------------------------------- */
.vw-seite {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font: 13px/1.45 Arial, Helvetica, sans-serif;
    color: #1B1F23;
    text-align: left;
}
.vw-kachel {
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(27, 46, 58, 0.10), 0 1px 2px rgba(27, 46, 58, 0.06);
}
.vw-liste { overflow: hidden; border-left: 4px solid var(--elv-dunkel); }
.vw-widerruf  { border-left-color: #E5484D; }
.vw-park      { border-left-color: #E2B93B; }
.vw-neuzugang { border-left-color: #2E9E4F; }

/* Kopf: Titel, Tag-Navigation, Zusammenfassung */
.vw-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    padding: 12px 16px;
}
.vw-kopf h2 { margin: 0; font-size: 17px; color: var(--elv-dunkel); }
.vw-widerruf  .vw-kopf { background: #FDECEC; }
.vw-park      .vw-kopf { background: #FFF8DC; }
.vw-neuzugang .vw-kopf { background: #E8F6EC; }
.vw-summe { margin-left: auto; font-size: 12px; text-align: right; color: #33434F; }
.vw-summe b { color: var(--elv-dunkel); }
.vw-tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 8px;
    background: #E9EEF2;
}
.vw-tag a {
    padding: 4px 10px;
    border-radius: 6px;
    color: #33434F;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}
.vw-tag a:hover { background: #D5DCE1; }
.vw-tag-datum { padding: 4px 10px; border-radius: 6px; background: #fff; font-weight: bold; color: var(--elv-dunkel); }

/* Filter (frueher Eingabezeile unter den Spaltenkoepfen) */
.vw-filter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px 10px;
    align-items: end;
    margin: 0;
    padding: 10px 16px 14px;
    border-top: 1px solid #EEF1F4;
}
.vw-filter label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #8A96A0;
}
.vw-filter .vw-breit { grid-column: span 2; }
/* .vw-filter-zeile: alle Felder samt Knopf in einer Zeile (z. B.
   Auslieferungsliste); Felder teilen sich die Breite, .vw-breit bekommt das
   Doppelte, .vw-schmal gut die Haelfte. Schmaler: normales Raster. */
@media (min-width: 1100px) {
    .vw-filter.vw-filter-zeile { display: flex; flex-wrap: nowrap; }
    .vw-filter-zeile label { flex: 1 1 0; min-width: 0; }
    .vw-filter-zeile label.vw-breit { flex-grow: 2; }
    .vw-filter-zeile label.vw-schmal { flex-grow: 0.6; }
    .vw-filter-zeile button,
    .vw-filter-zeile input[type=submit] { flex: none; }
}
.vw-filter input {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 7px;
    border: 1px solid #C5CED5;
    border-radius: 6px;
    font: 13px Arial, Helvetica, sans-serif;
    color: #1B1F23;
    text-transform: none;
    letter-spacing: normal;
}
.vw-filter button {
    padding: 7px 14px;
    border: 0;
    border-radius: 6px;
    background: var(--elv-akzent);
    color: #fff;
    font: bold 13px Arial, Helvetica, sans-serif;
    cursor: pointer;
}

/* Tabelle (Desktop) */
.vw-scroll { overflow-x: auto; }
.vw-seite .vw-tabelle {
    width: 100%;
    border-collapse: collapse;
    background: none;
    font-size: 13px;
}
.vw-seite .vw-tabelle th {
    padding: 8px 6px;
    border-top: 1px solid #DDE3E8;
    border-bottom: 1px solid #DDE3E8;
    background: #F4F6F8;
    color: #5A6B78;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
    white-space: nowrap;
}
.vw-seite .vw-tabelle td {
    padding: 7px 6px;
    border-bottom: 1px solid #EEF1F4;
    vertical-align: middle;
}
.vw-seite .vw-tabelle tbody tr:last-child td { border-bottom: 0; }
.vw-seite .vw-tabelle tr.row-a { background: #fff; }
.vw-seite .vw-tabelle tr.row-b { background: #FAFBFC; }
.vw-seite .vw-tabelle tbody tr:hover { background: #EAF2F7; }
.vw-seite .vw-tabelle a { color: #1B1F23; text-decoration: none; }
.vw-seite .vw-tabelle a:hover { color: var(--elv-akzent); text-decoration: underline; }
.vw-seite .vw-tabelle .num { text-align: right; white-space: nowrap; }
.vw-seite .vw-datum { white-space: nowrap; }
.vw-seite .vw-zeit-mobil,
.vw-seite .vw-nur-mobil { display: none; }
.vw-seite .vw-nr { font-weight: bold; white-space: nowrap; }
.vw-seite .vw-fzg { min-width: 140px; }
.vw-seite .vw-ertrag { font-weight: bold; color: var(--elv-dunkel); }
.vw-seite .vw-status { font-weight: bold; white-space: nowrap; }
.vw-seite .vw-status form { display: flex; align-items: center; gap: 8px; margin: 0; }
.vw-seite .vw-verk {
    padding: 3px 10px;
    border: 0;
    border-radius: 6px;
    background: var(--elv-dunkel);
    color: #fff;
    font: bold 12px Arial, Helvetica, sans-serif;
    cursor: pointer;
}
.vw-seite .vw-verk:hover { background: var(--elv-dunkel-2); }
.vw-leer { margin: 0; padding: 14px 16px; color: #8A96A0; }
.vw-hinweis { font-size: 12px; font-weight: bold; color: #C62828; }

/* Statistik-Filter: Datum | gelber Block "geringwertige Autos" | Button */
.vw-filter.vw-filter-stat { grid-template-columns: 160px minmax(0, 1fr) auto; }
/* Knopf nicht ueber die freie Spalte ziehen (ev_wbstat.php hat nur Datum + Knopf) */
@media (min-width: 701px) {
    .vw-filter.vw-filter-stat input[type=submit] { justify-self: start; width: auto; }
}
.vw-filter-gelb {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 6px 14px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #FFF8DC;
}
.vw-filter-gelb p { flex: 1 1 260px; margin: 0; font-size: 12px; color: #33434F; }
.vw-filter-gelb label { flex: 0 1 160px; }
.vw-filter input[type=submit] {
    padding: 7px 14px;
    border: 0;
    border-radius: 6px;
    background: var(--elv-akzent);
    color: #fff;
    font: bold 13px Arial, Helvetica, sans-serif;
    cursor: pointer;
}
.vw-filter input[type=submit]:hover,
.vw-filter button:hover { filter: brightness(0.92); }

/* Summenzeile (frueher rosa hinterlegt) */
.vw-seite .vw-tabelle tr.vw-summenzeile,
.vw-seite .vw-tabelle tbody tr.vw-summenzeile:hover { background: #FDECEC; }
.vw-seite .vw-tabelle tr.vw-summenzeile td { font-weight: bold; border-top: 2px solid #F3C4C6; }
.vw-fuss { text-align: center; font-size: 11px; }

/* Statusfarben wie bisher */
.vw-seite .status-frei       { color: #1E8E3E; }
.vw-seite .status-bestellt   { color: #1D4ED8; }
.vw-seite .status-reserviert { color: #0F7B7B; }
.vw-seite .status-verkauft   { color: #C62828; }
.vw-seite .status-neutral    { color: #33434F; }
.vw-seite .hinweis-nachtragen,
.vw-seite .vw-tabelle a.hinweis-nachtragen { color: #C62828; font-weight: bold; }
/* Neuzugang zu teuer eingekauft: ganze Zeile rot (Tooltip je Zelle) */
.vw-seite .vw-tabelle tr.row-warnung,
.vw-seite .vw-tabelle tr.row-warnung td,
.vw-seite .vw-tabelle tr.row-warnung a { color: #C62828; }
.vw-seite .vw-tabelle tr.row-warnung { background: #FDECEC; }

/* Matrix (ev_bestat.php): Firmen x Fahrzeugarten in EINER Tabelle, je
   Fahrzeugart eine Spaltengruppe mit Trennlinie. Bleibt auch auf dem Handy
   eine Tabelle (seitlich scrollbar, Spalte "Firma" bleibt stehen). */
.vw-seite .vw-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.vw-seite .vw-matrix th,
.vw-seite .vw-matrix td {
    padding: 7px 6px;
    border-bottom: 1px solid #EEF1F4;
    text-align: right;
    white-space: nowrap;
}
.vw-seite .vw-matrix th {
    background: #F4F6F8;
    color: #5A6B78;
    font-size: 11px;
    font-weight: bold;
}
.vw-seite .vw-matrix thead tr + tr th { white-space: normal; vertical-align: bottom; }
.vw-seite .vw-matrix thead tr:first-child th { border-top: 1px solid #DDE3E8; }
.vw-seite .vw-matrix th.vw-gruppe {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 12px;
    color: var(--elv-dunkel);
    background: #E9EEF2;
}
.vw-seite .vw-matrix .vw-gruppe,
.vw-seite .vw-matrix .vw-start { border-left: 2px solid #DDE3E8; }
.vw-seite .vw-matrix .vw-firma {
    position: sticky;
    left: 0;
    z-index: 1;
    text-align: left;
    font-weight: bold;
    background: inherit;
}
.vw-seite .vw-matrix th.vw-firma { background: #F4F6F8; vertical-align: bottom; }
.vw-seite .vw-matrix tr.row-a { background: #fff; }
.vw-seite .vw-matrix tr.row-b { background: #FAFBFC; }
.vw-seite .vw-matrix tbody tr:hover { background: #EAF2F7; }
.vw-seite .vw-matrix tr.vw-summenzeile { background: #FDECEC; }
.vw-seite .vw-matrix tr.vw-summenzeile td { font-weight: bold; border-top: 2px solid #F3C4C6; border-bottom: 0; }
.vw-seite .vw-anteil { color: #8A96A0; font-size: 11px; }
.vw-seite .vw-matrix .vw-text { text-align: left; white-space: normal; width: 100%; }
/* Statistik-Tabellen (ev_vkstat.php): Namensspalten links, Ampelfarben wie bisher */
.vw-seite .vw-statmatrix .vw-text { width: auto; }
.vw-seite .vw-statmatrix tbody td:is(.st-name, .st-ort) { text-align: left; }   /* vorher 2./3. Spalte - traf in "Nach Standorten" auch "Am Lager" */
.vw-seite .vw-farbe-red   { color: #C62828; font-weight: bold; }
.vw-seite .vw-farbe-green { color: #1E8E3E; font-weight: bold; }
.vw-filter.vw-filter-vkstat .vw-filter-gelb .vw-haken-einzeln { flex: 0 0 auto; }
.vw-filter-stat .vw-filter-gelb label:not(.vw-haken-einzeln) { flex-basis: 230px; }

/* Eingabemasken: Beschriftung links, Feld rechts; auf dem Handy untereinander.
   Aufbau: <div class="vw-formular"><label for=..>Text</label><div>Feld</div>...</div> */
.vw-inhalt { padding: 14px 16px; }
.vw-formular {
    display: grid;
    grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
    gap: 10px 16px;
    align-items: center;
    max-width: 760px;
}
.vw-formular > label { font-weight: bold; font-size: 12px; color: #33434F; }
.vw-formular input[type=text], .vw-formular input[type=password], .vw-formular input:not([type]),
.vw-formular input[type=number], .vw-formular input[type=email], .vw-formular select, .vw-formular textarea {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid #C5CED5;
    border-radius: 6px;
    font: 14px Arial, Helvetica, sans-serif;
}
.vw-formular textarea { max-width: none; }
.vw-formular .vw-voll { grid-column: 1 / -1; }
.vw-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vw-aktionen input[type=submit], .vw-aktionen input[type=button], .vw-aktionen input[type=reset],
.vw-aktionen button, .vw-knopf {
    padding: 8px 16px;
    border: 0;
    border-radius: 6px;
    background: #E9EEF2;
    color: #33434F;
    font: bold 13px Arial, Helvetica, sans-serif;
    text-decoration: none;
    cursor: pointer;
}
.vw-aktionen input[type=submit], .vw-knopf.vw-primaer { background: var(--elv-akzent); color: #fff; }
.vw-aktionen :is(input, button):hover, .vw-knopf:hover { filter: brightness(0.93); }

/* Verkaeuferfoto-Upload (ev_verkberedit.php) */
.vw-foto { display: flex; gap: 18px; align-items: flex-start; grid-column: 3 / span 3; align-self: stretch; padding: 16px; border: 1px solid #DDE3E8; border-radius: 10px; background: #F5F7F9; }
.vw-foto-bild { flex: none; display: grid; place-items: center; min-width: 90px; min-height: 116px; border-radius: 8px; background: #E9EEF2; overflow: hidden; color: #7A8A96; font: 12px Arial, Helvetica, sans-serif; }
.vw-foto-bild img { display: block; height: 116px; width: auto; max-width: 160px; }
.vw-foto-rechts { flex: 1; min-width: 0; font: 13px Arial, Helvetica, sans-serif; color: #33434F; }
.vw-foto-rechts h3 { margin: 0 0 4px; font-size: 15px; color: var(--elv-dunkel); }
.vw-foto-rechts p { margin: 0 0 12px; color: #6B7B87; }
.vw-foto-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vw-foto-aktionen input[type=file] { flex: 0 1 300px; min-width: 0; padding: 6px; border: 1px dashed #AEB9C1; border-radius: 6px; background: #fff; font: 13px Arial, Helvetica, sans-serif; }
.vw-foto-aktionen input[type=submit] { padding: 8px 16px; border: 0; border-radius: 6px; background: var(--elv-akzent); color: #fff; font: bold 13px Arial, Helvetica, sans-serif; cursor: pointer; }
.vw-foto-aktionen input.vw-foto-weg { background: #fff; color: var(--elv-akzent); box-shadow: inset 0 0 0 1px #F0B4B7; }
.vw-foto-aktionen input[type=submit]:hover { filter: brightness(0.93); }
.vw-foto-meldung { margin-top: 10px; font-weight: bold; }
/* Raster hat unter ca. 1400 px (Navi 200 px + 5 Spalten) weniger als 5 Spalten: Legende und Karte dann je ueber die ganze Zeile */
/* Legende links daneben (Spalte 1-2) in gleicher Hoehe wie die Fotokarte */
.vw-raster.vw-editor .vw-hilfe:has(+ .vw-foto) { grid-column: 1 / span 2; align-self: stretch; padding: 16px; line-height: 1.5; }
@media (max-width: 1420px) { .vw-foto, .vw-raster.vw-editor .vw-hilfe:has(+ .vw-foto) { grid-column: 1 / -1; } }
@media (max-width: 600px) { .vw-foto { flex-direction: column; } }

/* Auswahlfelder in Listen; Beschriftung nur auf dem Handy sichtbar */
.vw-wahl { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.vw-wahl input { width: 18px; height: 18px; margin: 0; }
.vw-wahl { font-size: 0; }
/* Absendeleiste unter mehreren Karten */
.vw-aktionsleiste { margin: 0; padding: 12px 16px; border-radius: 10px; background: #fff;
    box-shadow: 0 1px 3px rgba(27, 46, 58, 0.10), 0 1px 2px rgba(27, 46, 58, 0.06); }
/* Statuslinks in der Farbe des Status */
.vw-seite .vw-tabelle .vw-status a { color: inherit; }

/* Haekchen-Gruppen (ev_ilform.php) */
.vw-haken {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 6px 14px;
    margin-bottom: 16px;
}
.vw-haken-breit { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.vw-haken label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.vw-haken input[type=checkbox] { width: 16px; height: 16px; margin: 0; }
.vw-haken input[type=text] { width: 60px; padding: 3px 6px; border: 1px solid #C5CED5; border-radius: 6px; font: 13px Arial, Helvetica, sans-serif; }
.vw-inhalt .vw-raster { margin-top: 4px; }

/* Aktionen am Zeilenende (Formular mit Knoepfen/Auswahl) */
.vw-seite .vw-zeilenaktion form { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; margin: 0; }
.vw-seite .vw-zeilenaktion select { max-width: 190px; padding: 3px 6px; border: 1px solid #C5CED5; border-radius: 6px; font: 12px Arial, Helvetica, sans-serif; }
.vw-seite input.vw-klein.vw-primaer { background: var(--elv-dunkel); color: #fff; }
.vw-seite input.vw-klein.vw-primaer:hover { background: var(--elv-dunkel-2); color: #fff; }
/* Einzelnes Haekchen im Filter */
.vw-filter .vw-haken-einzeln { flex-direction: row; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 12px; color: #33434F; }
.vw-filter .vw-haken-einzeln input { width: 16px; height: 16px; }
.vw-filter select { width: 100%; box-sizing: border-box; padding: 5px 7px; border: 1px solid #C5CED5; border-radius: 6px; font: 13px Arial, Helvetica, sans-serif; text-transform: none; letter-spacing: 0; }
/* Ampel (ev_vkstatus.php): 1 rot, 2 gelb, 3 gruen wie bisher */
.vw-ampel { display: inline-block; min-width: 22px; padding: 2px 8px; border-radius: 10px; text-align: center; font-weight: bold; color: #1B1F23; }
.vw-ampel-1 { background: #FF6B6B; }
.vw-ampel-2 { background: #FFE14D; }
.vw-ampel-3 { background: #3DD66A; }

/* Standzeitenliste (ev_fustandzeit.php) */
.vw-seite .vw-modell { font-weight: normal; font-size: 12px; color: #5A6B78; }
.vw-seite .vw-ort { font-weight: bold; color: #C62828; }
.vw-seite .vw-tage { font-weight: bold; color: #1B1F23; }
.vw-seite .vw-ortdatum { font-size: 12px; color: #5A6B78; }
.vw-seite .vw-standzeit td { white-space: nowrap; }
.vw-seite .vw-standzeit td.vw-nr { white-space: normal; min-width: 150px; max-width: 220px; }
.vw-seite .vw-standzeit th, .vw-seite .vw-standzeit td { padding-left: 5px; padding-right: 5px; }

/* Meine Aufgaben (ev_aufgaben.php): Zeilenfarbe = Werkstattstatus wie bisher */
.vw-aufgabenfilter { margin: 0; }
.vw-filter.vw-filter-auf { grid-template-columns: auto repeat(4, minmax(110px, 170px)) auto; justify-content: start; }
.vw-legende { padding: 0 16px 14px; font-size: 12px; line-height: 1.8; color: #33434F; }
.vw-leg { display: inline-block; margin: 0 4px; padding: 0 8px; border-radius: 10px; font-size: 11px; line-height: 18px; }
.vw-leg-grau { background: #E9EEF2; }
.vw-leg-gelb { background: #FFF3A6; }
.vw-leg-rot { background: #FF6B6B; color: #fff; }
.vw-tagefeld { width: 44px; padding: 2px 5px; border: 1px solid #C5CED5; border-radius: 6px; font: 12px Arial, Helvetica, sans-serif; }
.vw-seite .vw-aufgabenliste td { vertical-align: top; }
.vw-seite .vw-aufgabenliste tr.vw-auf-gelb { background: #FFF8C4; }
.vw-seite .vw-aufgabenliste tr.vw-auf-rot { background: #FDDCDC; box-shadow: inset 4px 0 0 #E5484D; }
.vw-seite .vw-aufgabenliste .vw-aufgaben { min-width: 260px; font-size: 12px; line-height: 1.5; }
.vw-seite .vw-aufgabenliste .vw-aufgaben hr { margin: 4px 0; border: 0; border-top: 1px solid #DDE3E8; }
.vw-seite .vw-aufgabenliste .vw-fzgdaten { font-weight: normal; font-size: 12px; color: #5A6B78; }
.vw-seite .vw-aufgabenliste .vw-aufaktion { font-size: 12px; min-width: 200px; }
.vw-seite .vw-aufgabenliste .vw-aufaktion select { max-width: 100%; padding: 2px 4px; border: 1px solid #C5CED5; border-radius: 6px; font: 12px Arial, Helvetica, sans-serif; }
.vw-seite .vw-minibild { display: block; margin-top: 6px; border-radius: 4px; }
.vw-seite .vw-lfd { color: #8A96A0; }
.vw-preisform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; margin: 6px 0 0; }
.vw-preisform label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #5A6B78; }
.vw-preisform input[type=text] { width: 70px; padding: 3px 6px; border: 1px solid #C5CED5; border-radius: 6px; font: 13px Arial, Helvetica, sans-serif; }

/* Klickbare Zeilen + Detail-Popup (ev_verbbest_viewer.php) */
.vw-seite .vw-klickliste tbody tr { cursor: pointer; }
.vw-modal-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(27, 46, 58, 0.55); }
.vw-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1001;
    width: 800px;
    max-width: calc(100% - 32px);
    max-height: 85vh;
    overflow-y: auto;
    transform: translate(-50%, -50%);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(27, 46, 58, 0.35);
    font: 13px Arial, Helvetica, sans-serif;
}
.vw-modal #modal-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--elv-dunkel);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}
.vw-modal #modal-close { border: 0; background: none; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.vw-modal #modal-close:hover { color: var(--elv-akzent); }
.vw-modal #modal-body { padding: 8px 16px 16px; }
.vw-modal table.detail { width: 100%; border-collapse: collapse; }
.vw-modal table.detail td { padding: 5px 8px; border-bottom: 1px solid #EEF1F4; vertical-align: top; }
.vw-modal table.detail td.label { width: 34%; font-weight: bold; color: #5A6B78; white-space: nowrap; }
.vw-modal table.detail td.leer { color: #B5BEC5; }
.vw-modal table.detail td { overflow-wrap: anywhere; }

/* Detailansicht: Beschriftung | Wert (ev_inde.php u.a.) */
.vw-details { width: 100%; border-collapse: collapse; font-size: 13px; }
.vw-details th, .vw-details td { padding: 8px 16px; border-top: 1px solid #EEF1F4; text-align: left; vertical-align: top; }
.vw-details th { width: 180px; font-size: 12px; font-weight: bold; color: #5A6B78; white-space: nowrap; }
.vw-details .vw-langtext { line-height: 1.6; }
/* Rueckmeldung nach einer Aktion */
.vw-meldung { padding: 10px 16px; border-radius: 10px; background: #E8F6EC; border-left: 4px solid #2E9E4F; color: #1B1F23; }

/* Fotoansicht (ev_detailfoto.php) */
.vw-galerie { padding: 12px 16px 16px; text-align: center; }
.vw-galerie-leiste { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 12px; }
.vw-daumen { display: inline-block; line-height: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; }
.vw-daumen img { width: 64px; height: 48px; object-fit: cover; }
.vw-daumen.vw-aktiv { border-color: var(--elv-akzent); }
.vw-hauptbild { display: block; width: 100%; max-width: 960px; height: auto; margin: 0 auto; border-radius: 8px; background: #E9EEF2; }
.vw-galerie .vw-aktionen { justify-content: center; }

/* Datensatz-Editoren (ev_farbedit.php, ev_verkberedit.php u.a.) */
.vw-raster.vw-editor { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.vw-raster.vw-editor input[type=password], .vw-raster.vw-editor input[type=date] { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #C5CED5; border-radius: 6px; font: 14px Arial, Helvetica, sans-serif; }
.vw-raster.vw-editor textarea { width: 100%; box-sizing: border-box; min-height: 160px; padding: 8px 10px; border: 1px solid #C5CED5; border-radius: 6px; font: 14px/1.4 Arial, Helvetica, sans-serif; }
.vw-raster .vw-breit2 { grid-column: span 2; }
.vw-editor-leiste { align-items: center; padding-top: 14px; border-top: 1px solid #EEF1F4; }
/* Blaettern/Neu neutral, Uebernehmen als Hauptaktion, Loeschen als Warnung */
.vw-editor-leiste input[type=submit] { background: #E9EEF2; color: #33434F; }
.vw-editor-leiste input[type=submit][value*="bernehmen"] { background: var(--elv-akzent); color: #fff; }
.vw-editor-leiste input[type=submit][value$="schen"] { background: #fff; color: #C62828; box-shadow: inset 0 0 0 1px #F3C4C6; }
.vw-editor-leiste input[type=text] { width: 64px; padding: 7px 8px; border: 1px solid #C5CED5; border-radius: 6px; text-align: center; font: bold 13px Arial, Helvetica, sans-serif; }
/* Suche in den Admin-Editoren (ev_editor_suche.php) */
.vw-filter.vw-editor-suche { grid-template-columns: minmax(160px, 320px) auto minmax(0, 1fr); align-items: end; }
.vw-editor-suche-info { align-self: center; font-size: 12px; color: #33434F; }

/* Ergebnisseiten nach dem Speichern (ev_fusave.php u.a.) */
.vw-ergebnis { font-size: 15px; line-height: 1.6; }
.vw-fehler { padding: 12px 16px; border-radius: 8px; background: #FDECEC; border-left: 4px solid #E5484D; }
.vw-hinweistext { margin: 0 0 14px; line-height: 1.6; color: #33434F; }
.vw-kontakt { font-size: 12px; line-height: 1.6; color: #5A6B78; }

/* Fahrzeugauswahl mit Haekchen (ev_ange.php, ev_flyau.php, ev_expaw.php) */
.vw-seite .vw-auswahl td, .vw-seite .vw-auswahl th { text-align: left; }
.vw-seite .vw-auswahl td:last-child, .vw-seite .vw-auswahl th:last-child { text-align: right; }
.vw-seite .vw-auswahl input[type=checkbox] { width: 18px; height: 18px; margin: 0; }
.vw-seite .vw-auswahl img { display: block; width: 56px; height: 42px; object-fit: cover; border-radius: 4px; }
.vw-seite .vw-auswahl a { color: #1B1F23; text-decoration: none; }
.vw-seite .vw-auswahl a:hover { color: var(--elv-akzent); text-decoration: underline; }
.vw-auswahlleiste { margin: 0; border-radius: 0; box-shadow: 0 -1px 0 #EEF1F4; }
.vw-zaehler { padding: 10px 16px 14px; font-size: 13px; }
.vw-zaehler form { margin: 0; }
.vw-zaehler input[type=text] { width: 48px; padding: 4px 6px; border: 1px solid #C5CED5; border-radius: 6px; text-align: center; font: bold 13px Arial, Helvetica, sans-serif; }

/* Foto-Upload (ev_picupload2.php) */
.vw-upload { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; }
.vw-upload-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #EEF1F4; }
.vw-upload-zeile img { width: 45px; height: 32px; object-fit: cover; border-radius: 4px; }
.vw-upload-nr { min-width: 56px; font-size: 12px; font-weight: bold; color: #5A6B78; }
.vw-upload-zeile input[type=file] { flex: 1 1 200px; font-size: 13px; }
.vw-zaehlfeld { width: 40px; padding: 3px 6px; border: 1px solid #C5CED5; border-radius: 6px; text-align: center; font-weight: bold; }
.vw-leitfaden { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; align-content: start; }
.vw-leitfaden .vw-feldtitel { grid-column: 1 / -1; color: #C62828; }
.vw-leitfaden img { width: 100%; height: auto; border-radius: 4px; }

/* Kundenangebot (ev_kuanform.php) */
.vw-abschnitt { margin-top: 18px; }
.vw-paar { display: flex; gap: 6px; }
.vw-paar input:first-child { flex: 0 0 56px; }
.vw-editor input.aus, .vw-editor input[readonly].aus { background: #F4F6F8; font-weight: bold; }
.vw-kalkulation { padding-top: 14px; border-top: 1px solid #EEF1F4; }

/* Verbindliche Bestellung (ev_verbform.php) */
.vw-feld-radios { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.vw-feld-radios .vw-feldname { font-size: 12px; font-weight: bold; color: #33434F; }
.vw-feld-radios > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.vw-feld-radios input[type=radio] { width: 16px; height: 16px; margin: 0 2px 0 0; }
.vw-feld-radios input[type=text] { width: 110px; padding: 5px 7px; border: 1px solid #C5CED5; border-radius: 6px; font: 13px Arial, Helvetica, sans-serif; }
.vw-trenner { height: 0; border-top: 1px solid #EEF1F4; }
.vw-bestellung textarea { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #C5CED5; border-radius: 6px; font: 13px/1.4 Arial, Helvetica, sans-serif; }

/* ---- Datenqualitaet (ev_qualitaet.php, ev_index.php) ----------------------
 * Kennzahlen, Kategorie-Filter, Befunde als farbige Marken (rot = Fehler,
 * gelb = Warnung). Regeln: ev_qualitaet_regeln.php.
 * --------------------------------------------------------------------- */
.qu-kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 16px 12px; }
.qu-zahl { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; background: #F4F6F8; color: #33434F; text-decoration: none; }
.qu-zahl b { font-size: 26px; line-height: 1.1; color: var(--elv-dunkel); }
.qu-zahl span { font-size: 12px; }
.qu-zahl.qu-fehler { background: #FDECEC; }
.qu-zahl.qu-fehler b { color: #C62828; }
.qu-zahl.qu-warnung { background: #FFF6D6; }
.qu-zahl.qu-warnung b { color: #9A6B00; }
.qu-zahl:hover, .qu-zahl.qu-aktiv { box-shadow: inset 0 0 0 2px var(--elv-dunkel); }
.qu-kategorien { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.qu-kat { padding: 5px 10px; border-radius: 16px; background: #E9EEF2; color: #33434F; font-size: 12px; text-decoration: none; }
.qu-kat b { margin-left: 4px; color: var(--elv-dunkel); }
.qu-kat:hover { background: #D5DCE1; }
.qu-kat.qu-aktiv { background: var(--elv-dunkel); color: #fff; }
.qu-kat.qu-aktiv b { color: #fff; }
.qu-filter { border-top: 1px solid #EEF1F4; }
.vw-seite .qu-tabelle .qu-maengel { white-space: normal; }
.qu-befund { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px; border-radius: 10px; font-size: 12px; line-height: 1.5; }
.qu-befund.qu-fehler { background: #FDECEC; color: #B71C1C; }
.qu-befund.qu-warnung { background: #FFF6D6; color: #7A5500; }
.qu-verkauft { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 8px; font-size: 11px; font-weight: 600; background: #E3ECF7; color: #1F4E79; }
.qu-filter .vw-haken-einzeln { white-space: nowrap; }
/* Kurzuebersicht nach dem Login */
.qu-login { max-width: none; }
.qu-login .vw-inhalt { padding-top: 0; }
.qu-login-fuss { justify-content: flex-end; margin: 0; }
.qu-login p { margin: 0 0 12px; line-height: 1.6; }

/* Textausgabe von Aktionsseiten (ev_sqloptimize.php u.a.) */
.vw-ausgabe { line-height: 1.6; overflow-wrap: anywhere; }

/* Link-Kacheln (ev_admin.php) */
.vw-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    padding: 14px 16px 16px;
}
.vw-links a {
    padding: 11px 14px;
    border-radius: 8px;
    background: #F4F6F8;
    color: #1B1F23;
    font-weight: bold;
    text-decoration: none;
}
.vw-links a:hover { background: #E4EBF0; color: var(--elv-akzent); }

/* Blaettern in vw-Listen */
.vw-blaettern { padding: 0 16px 10px; }
.vw-blaettern div.blaettern { margin: 0 !important; }

/* Allgemeine Formularteile */
.vw-feldtitel { display: block; margin: 0 0 6px; font-size: 12px; font-weight: bold; color: #33434F; }
.vw-textfeld {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 90px;
    padding: 8px 10px;
    border: 1px solid #C5CED5;
    border-radius: 6px;
    font: 14px/1.4 Arial, Helvetica, sans-serif;
}
.vw-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px 14px;
}
.vw-raster > label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: bold; color: #33434F; }
.vw-raster > label.vw-voll, .vw-raster > .vw-voll { grid-column: 1 / -1; }
.vw-raster input[type=text], .vw-raster input:not([type]), .vw-raster select {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid #C5CED5;
    border-radius: 6px;
    font: 14px Arial, Helvetica, sans-serif;
}
.vw-hilfe { align-self: end; padding: 6px 10px; border-radius: 6px; background: #F4F6F8; font-size: 12px; color: #5A6B78; }
.vw-aktionen input[type=file] { flex: 1 1 200px; font-size: 13px; }
.vw-seite input.vw-klein {
    padding: 3px 10px;
    border: 0;
    border-radius: 6px;
    background: #E9EEF2;
    color: #33434F;
    font: bold 12px Arial, Helvetica, sans-serif;
    cursor: pointer;
}
.vw-seite input.vw-klein:hover { background: #FDECEC; color: #C62828; }

/* Grafik-Uploads (ev_flyer.php) */
.vw-grafiken { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.vw-grafiken img { display: block; width: 100%; max-width: 420px; height: auto; margin-bottom: 8px; border: 1px solid #DDE3E8; border-radius: 6px; }

/* Forum (ev_forum.php) */
.vw-beitrag { padding: 12px 16px; border-top: 1px solid #EEF1F4; }
.vw-beitrag-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 4px; font-size: 12px; color: #5A6B78; }
.vw-beitrag-kopf form { margin: 0; }
.vw-beitrag-kopf b { color: var(--elv-dunkel); }
.vw-beitrag-text { line-height: 1.5; overflow-wrap: anywhere; }
.vw-beitrag-neu { border-left: 3px solid #C62828; }
.vw-beitrag-neu, .vw-beitrag-neu .vw-beitrag-kopf, .vw-beitrag-neu .vw-beitrag-kopf b { color: #C62828; }

/* Videos (ev_anleitung.php) */
.vw-videos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    padding: 14px 16px 16px;
}
.vw-video h3 { margin: 0 0 8px; font-size: 14px; color: var(--elv-dunkel); }
.vw-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 8px; background: #000; }

/* Handbuecher (ev_anleitung.php) */
.vw-handbuecher { list-style: none; margin: 0; padding: 14px 16px 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.vw-handbuecher a { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 12px 52px; border: 1px solid #DCE3E8; border-radius: 8px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='28' viewBox='0 0 24 28'%3E%3Cpath d='M2 1h13l7 7v19H2z' fill='%23fff' stroke='%23C62828' stroke-width='2'/%3E%3Cpath d='M15 1v7h7' fill='none' stroke='%23C62828' stroke-width='2'/%3E%3Ctext x='12' y='22' font-family='Arial' font-size='7' font-weight='bold' text-anchor='middle' fill='%23C62828'%3EPDF%3C/text%3E%3C/svg%3E") no-repeat 14px center; color: var(--elv-dunkel); text-decoration: none; }
.vw-handbuecher a:hover, .vw-handbuecher a:focus-visible { border-color: var(--elv-akzent); box-shadow: 0 2px 8px rgba(27, 46, 58, .12); }
.vw-handbuecher b { font-size: 14px; }
.vw-handbuecher small { font-size: 12px; color: #5C6B77; }

/* Smartphone: Zeilen als Karten */
@media (max-width: 700px) {
    .vw-seite { gap: 12px; }
    .vw-formular { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .vw-formular > label:not(:first-child) { margin-top: 8px; }
    .vw-formular :is(input, select, textarea) { max-width: none; font-size: 16px; }
    .vw-aktionen :is(input, button), .vw-knopf { flex: 1 1 auto; padding: 11px 14px; font-size: 15px; text-align: center; }
    .vw-videos { grid-template-columns: minmax(0, 1fr); padding: 12px; }
    .vw-links { grid-template-columns: minmax(0, 1fr); padding: 12px; }
    .qu-kennzahlen { padding: 0 12px 10px; gap: 6px; }
    .qu-zahl { padding: 10px; }
    .qu-zahl b { font-size: 20px; }
    .qu-kategorien { padding: 0 12px 10px; }
    .vw-seite .qu-tabelle td.qu-maengel { grid-column: 1 / -1; }
    .vw-upload { grid-template-columns: minmax(0, 1fr); }
    .vw-leitfaden { grid-template-columns: repeat(4, 1fr); }
    .vw-raster.vw-editor { grid-template-columns: minmax(0, 1fr); }
    .vw-raster .vw-breit2 { grid-column: auto; }
    .vw-editor-leiste :is(input[type=submit], input[type=reset]) { flex: 1 1 60px; padding: 11px 8px; }
    .vw-editor-leiste input[type=text] { flex: 0 0 64px; font-size: 16px; }
    .vw-filter.vw-editor-suche { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 12px 12px; }
    .vw-filter.vw-editor-suche input[type=search] { font-size: 16px; }
    .vw-editor-suche-info { grid-column: 1 / -1; }
    .vw-details th, .vw-details td { display: block; width: auto; padding: 2px 12px; border: 0; }
    .vw-details th { padding-top: 10px; border-top: 1px solid #EEF1F4; }
    .vw-details tr:first-child th { border-top: 0; }
    .vw-seite .vw-klickliste td.vw-vorname { display: none; }
    .vw-modal { top: 0; left: 0; width: 100%; max-width: none; height: 100%; max-height: none; transform: none; border-radius: 0; }
    .vw-modal table.detail td.label { white-space: normal; }
    .vw-filter.vw-filter-auf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vw-filter.vw-filter-auf .vw-haken-einzeln { grid-column: 1 / -1; }
    .vw-legende { padding: 10px 12px; margin-top: 8px; border-radius: 10px; background: #fff; }
    .vw-seite .vw-aufgabenliste tbody tr.vw-auf-gelb { background: #FFF8C4; }
    .vw-seite .vw-aufgabenliste tbody tr.vw-auf-rot { background: #FDDCDC; box-shadow: inset 4px 0 0 #E5484D, 0 1px 3px rgba(27,46,58,.1); }
    .vw-seite .vw-aufgabenliste .vw-lfd { display: none; }
    .vw-seite .vw-aufgabenliste :is(.vw-aufgaben, .vw-aufaktion) { grid-column: 1 / -1; min-width: 0; }
    .vw-preisform input[type=text] { font-size: 16px; width: 90px; }
    .vw-seite .vw-standzeit td { white-space: normal; }
    .vw-seite .vw-standzeit .vw-nr { grid-column: 1 / -1; }
    .vw-seite .vw-tabelle td.vw-zeilenaktion { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid #EEF1F4; text-align: left; }
    .vw-seite .vw-zeilenaktion form { display: flex; justify-content: flex-start; }
    .vw-seite .vw-zeilenaktion select { flex: 1 1 auto; max-width: none; font-size: 16px; padding: 7px 8px; }
    .vw-seite .vw-zeilenaktion input.vw-klein { padding: 8px 16px; font-size: 14px; }
    .vw-haken, .vw-haken-breit { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .vw-haken input[type=checkbox] { width: 20px; height: 20px; }
    .vw-haken input[type=text] { font-size: 16px; }
    .vw-wahl { font-size: 12px; font-weight: bold; }
    .vw-aktionsleiste { position: sticky; bottom: 0; z-index: 2; }
    .vw-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vw-raster :is(input, select, textarea), .vw-textfeld { font-size: 16px; }
    .vw-beitrag { padding: 12px; }
    .vw-blaettern { padding: 0 12px 10px; }
    /* Formular-/Inhaltskarten bleiben auf dem Handy eine Karte */
    .vw-liste.vw-formkarte {
        overflow: hidden;
        border-left: 4px solid var(--elv-dunkel);
        background: #fff;
        box-shadow: 0 1px 3px rgba(27, 46, 58, 0.10), 0 1px 2px rgba(27, 46, 58, 0.06);
    }
    .vw-formkarte .vw-kopf { border-left: 0; border-radius: 0; background: none; box-shadow: none; }
    .vw-inhalt { padding: 12px; }
    .vw-liste { overflow: visible; border-left: 0; background: none; box-shadow: none; }
    .vw-kopf {
        border-radius: 10px;
        border-left: 4px solid var(--elv-dunkel);
        background: #fff;
        box-shadow: 0 1px 3px rgba(27, 46, 58, 0.10), 0 1px 2px rgba(27, 46, 58, 0.06);
    }
    .vw-widerruf  .vw-kopf { border-left-color: #E5484D; }
    .vw-park      .vw-kopf { border-left-color: #E2B93B; }
    .vw-neuzugang .vw-kopf { border-left-color: #2E9E4F; }
    .vw-summe { margin-left: 0; text-align: left; flex-basis: 100%; }
    .vw-tag { flex-basis: 100%; justify-content: space-between; }
    .vw-tag a { padding: 8px 10px; }                          /* Tippflaechen */

    .vw-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row dense;                            /* keine Luecke vor "Fahrzeug" */
        margin-top: 8px;
        padding: 12px;
        border: 0;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(27, 46, 58, 0.10), 0 1px 2px rgba(27, 46, 58, 0.06);
    }
    .vw-filter input { font-size: 16px; }                    /* kein iOS-Zoom */
    .vw-filter button,
    .vw-filter input[type=submit] { grid-column: 1 / -1; padding: 10px; font-size: 15px; }
    .vw-filter.vw-filter-stat { grid-template-columns: minmax(0, 1fr); }
    .vw-seite .vw-tabelle tbody tr.vw-summenzeile { background: #FDECEC; }
    .vw-seite .vw-tabelle tr.vw-summenzeile td { border-top: 0; }

    .vw-scroll { overflow: visible; margin-top: 10px; }
    /* Matrix bleibt Tabelle: in einer Karte seitlich scrollen */
    .vw-scroll:has(.vw-matrix) {
        overflow-x: auto;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(27, 46, 58, 0.10), 0 1px 2px rgba(27, 46, 58, 0.06);
    }
    .vw-seite .vw-tabelle,
    .vw-seite .vw-tabelle tbody { display: block; }
    .vw-seite .vw-tabelle thead { display: none; }
    .vw-seite .vw-tabelle tbody tr,
    .vw-seite .vw-tabelle tbody tr.row-b {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px 10px;
        margin-bottom: 10px;
        padding: 10px 12px;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(27, 46, 58, 0.10), 0 1px 2px rgba(27, 46, 58, 0.06);
    }
    .vw-seite .vw-tabelle tbody tr.row-warnung { background: #FDECEC; }
    .vw-seite .vw-tabelle td {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
        text-align: left;
        overflow-wrap: anywhere;
    }
    .vw-seite .vw-tabelle td:empty,
    .vw-seite .vw-tabelle td.vw-zeit { display: none; }
    .vw-seite .vw-zeit-mobil { display: inline; color: #5A6B78; }
    .vw-seite .vw-tabelle .vw-datum { white-space: normal; }
    .vw-seite .vw-nur-mobil { display: inline; }
    /* feste Plaetze: Fahrzeug oben, darunter Nummer | Status */
    .vw-seite .vw-fzg    { grid-column: 1 / -1; grid-row: 1; min-width: 0; font-size: 14px; font-weight: bold; line-height: 1.3; }
    .vw-seite .vw-nr     { grid-column: 1; grid-row: 2; }
    .vw-seite .vw-status { grid-column: 2 / -1; grid-row: 2; justify-self: end; white-space: normal; text-align: right; }
    .vw-seite .vw-status form { justify-content: flex-end; flex-wrap: wrap; }
    /* Zeile ohne Fahrzeug-Spalte: Nummer und Status in die erste Zeile */
    .vw-seite .vw-tabelle tr:not(:has(.vw-fzg)) :is(.vw-nr, .vw-status) { grid-row: 1; }
    .vw-seite .vw-verk { padding: 7px 14px; font-size: 13px; }
    /* Eckdaten: 3 pro Zeile, mit Beschriftung */
    .vw-seite .vw-tabelle td[data-label] {
        font-size: 12px;
        padding-top: 6px;
        border-top: 1px solid #EEF1F4;
    }
    .vw-seite .vw-tabelle td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #8A96A0;
    }
    .vw-seite .vw-tabelle td.num[data-label],
    .vw-seite .vw-tabelle td.num.vw-nr { text-align: left; }
}

/* ---- Verkauf melden (ev_vkman.php, ev_vkne.php) -------------------------
 * Beide Seiten gleich aufgebaut: [Fahrzeug & Kaeufer] | Kalkulation
 * (Netto gelb / Brutto gruen) | Kunde & Auslieferung, darunter in derselben
 * Spalte die Absende-Kachel. WICHTIG: Reihenfolge der Formularfelder nicht
 * aendern - berechne()/berpra()/berek() wandeln Kommas in
 * form.elements[8..52] per POSITION um (keine fieldsets o.ae. einfuegen).
 * --------------------------------------------------------------------- */
.vk-seite,
.vkne-rahmen {
    font: 13px/1.45 Arial, Helvetica, sans-serif;
    color: #1B1F23;
    text-align: left;
}
.vk-titel {
    margin: 0 0 14px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(27, 46, 58, 0.10), 0 1px 2px rgba(27, 46, 58, 0.06);
    font-size: 19px;
    color: var(--elv-dunkel);
}
.vk-kachel,
.vkne-rahmen > tbody > tr > td:first-child,
.vkne-karte {
    min-width: 0;
    padding: 14px 16px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(27, 46, 58, 0.10), 0 1px 2px rgba(27, 46, 58, 0.06);
}
.vk-h,
.vkne-rahmen > tbody > tr > td:nth-child(2) > table > tbody > tr:first-child::before {
    display: block;
    margin: 0 0 10px;
    font: bold 11px Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5A6B78;
}
.vk-seite font[size="1"],
.vkne-rahmen font[size="1"] { font-size: 12px; }
.vk-seite p,
.vkne-rahmen p { margin: 0 0 10px; }
.vkne-rahmen b { color: var(--elv-dunkel); }

/* Eingabefelder (die Pop-ups haben unten eigene Regeln) */
.vk-seite input[type=text], .vk-seite input:not([type]), .vk-seite select, .vk-seite textarea,
.vkne-rahmen input[type=text], .vkne-rahmen input:not([type]), .vkne-rahmen select, .vkne-rahmen textarea {
    max-width: 100%;
    box-sizing: border-box;
    padding: 5px 7px;
    border: 1px solid #C5CED5;
    border-radius: 6px;
    background: #fff;
    font: 14px Arial, Helvetica, sans-serif;
}

/* ---- ev_vkman.php: Raster ---- */
.vk-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-areas: "stamm kalk rechts";
    gap: 14px;
    align-items: start;
    margin: 0;
}
.vk-stamm  { grid-area: stamm; }
.vk-kalk   { grid-area: kalk; }
.vk-rechts { grid-area: rechts; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.vk-feld { margin-bottom: 10px; line-height: 1.6; }
.vk-feld:last-child { margin-bottom: 0; }
.vk-stamm input[name=f2num],
.vk-stamm select,
.vk-kunde select,
.vk-kunde input[type=text],
.vk-seite textarea { width: 100% !important; }       /* inline width:130px/135 ueberschreiben */
.vk-stamm input[name^=f2fzg] { width: 22%; }
.vk-stamm input[name=f2fzg2] { width: 34%; }
.vk-stamm input[name=f2vob] { width: calc(100% - 110px) !important; }
.vk-kunde input[type=radio] { margin: 3px 6px 3px 0; vertical-align: middle; }

/* ---- ev_vkne.php: Rahmentabelle -> Kacheln ----
   So baut der Browser das Altmarkup: Zelle 1 = Formular + Kalkulation,
   Zelle 2 = Tabelle mit den Kundenzeilen (zuletzt Berechnen/Netto-Ertrag
   und Absenden), Zelle 3 leer. */
.vkne-aussen { width: 100%; }
.vkne-rahmen {
    width: calc(100% + 28px);
    margin: -14px;
    border-collapse: separate !important;
    border-spacing: 14px;
    background: none !important;
}
.vkne-rahmen > tbody > tr > td { vertical-align: top; text-align: left; }
.vkne-rahmen > tbody > tr > td:first-child { width: 62%; }
.vkne-rahmen > tbody > tr > td:nth-child(2) { width: 38%; min-width: 280px; padding: 0; }
.vkne-rahmen > tbody > tr > td[width="300"] { display: none; }
.vkne-rahmen > tbody > tr > td:nth-child(2) > table { display: block; width: 100%; }
.vkne-rahmen > tbody > tr > td:nth-child(2) > table > tbody { display: flex; flex-direction: column; }
.vkne-rahmen > tbody > tr > td:nth-child(2) > table > tbody > tr {
    display: block;
    padding: 6px 16px;
    background: #fff;
}
.vkne-rahmen > tbody > tr > td:nth-child(2) > table > tbody > tr > td { display: block; padding: 0; }
/* Kachel "Kunde & Auslieferung" (erste Zeile bis vor Berechnen) */
.vkne-rahmen > tbody > tr > td:nth-child(2) > table > tbody > tr:first-child {
    padding-top: 14px;
    border-radius: 10px 10px 0 0;
}
.vkne-rahmen > tbody > tr > td:nth-child(2) > table > tbody > tr:first-child::before { content: 'Kunde & Auslieferung'; }
.vkne-rahmen > tbody > tr > td:nth-child(2) > table > tbody > tr:has(+ tr input[name=f2ert]) {
    padding-bottom: 14px;
    border-radius: 0 0 10px 10px;
}
/* Absende-Kachel (Berechnen, Netto-Ertrag, Verkauf melden) direkt darunter */
.vkne-rahmen > tbody > tr > td:nth-child(2) > table > tbody > tr:has(input[name=f2ert]) {
    margin-top: 14px;
    padding-top: 14px;
    border-radius: 10px 10px 0 0;
}
.vkne-rahmen > tbody > tr > td:nth-child(2) > table > tbody > tr:last-child {
    padding-bottom: 14px;
    border-radius: 0 0 10px 10px;
}
.vkne-rahmen > tbody > tr > td:nth-child(2) input[type=text],
.vkne-rahmen > tbody > tr > td:nth-child(2) select,
.vkne-rahmen textarea { width: 100% !important; }

/* ---- Kalkulation (beide Seiten) ---- */
.vk-tabelle,
.vkne-rahmen table:has(> tbody > tr > td[bgcolor="#FFFFCC" i]) {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 6px 4px;
    margin: 0 -6px;
    box-shadow: none !important;
}
.vk-tabelle td,
.vkne-rahmen td[bgcolor="#FFFFCC" i],
.vkne-rahmen td[bgcolor="#CCFFCC" i] {
    width: 50% !important;
    padding: 4px 8px 8px !important;
    border-radius: 6px;
    vertical-align: top;
}
.vk-tabelle td[bgcolor="#FFFFCC" i], .vkne-rahmen td[bgcolor="#FFFFCC" i] { background: #FFF8DC; }
.vk-tabelle td[bgcolor="#CCFFCC" i], .vkne-rahmen td[bgcolor="#CCFFCC" i] { background: #E6F6EA; }
.vk-tabelle tr:first-child td,
.vkne-rahmen table:has(> tbody > tr > td[bgcolor="#FFFFCC" i]) tr:first-child td { font-weight: bold; font-size: 15px; }
/* Beschriftungen beginnen im Altmarkup mit einer Leerzeile (<br>) */
.vk-tabelle td > font:first-child > br:first-child,
.vkne-rahmen td[bgcolor] > font:first-child > br:first-child { display: none; }
/* nur die DIREKTEN Felder der Zelle - nicht die der Pop-ups darin */
.vk-tabelle td > input[type=text],
.vk-tabelle td > select,
.vkne-rahmen td[bgcolor] > input[type=text],
.vkne-rahmen td[bgcolor] > select { width: calc(100% - 16px) !important; }   /* EUR dahinter */
.vk-tabelle td > input[name=f2pra],
.vkne-rahmen td[bgcolor] > input[name=f2pra],
.vkne-rahmen td[bgcolor] > input[name=f2ekpn] { width: calc(100% - 86px) !important; }

/* ---- Pop-ups (FD-Praemien, Praemien im Detail, EK-VFW) ----
   Anordnung der Felder wie bisher (Groesse aus size=, %-/EUR-Felder
   nebeneinander, Farben wie bisher); nur zentriert statt fester
   Pixelposition, damit sie auch auf dem Handy im Bild sind. */
#div_provpraem,
#div_praemien,
#div_ekvfw {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    z-index: 1000 !important;
    width: auto;
    max-width: 92vw;
    max-height: 90vh;
    overflow-y: auto;
    padding: 4px;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
    line-height: 1.25;
}
#div_provpraem input[type=text], #div_provpraem input:not([type]),
#div_praemien input[type=text],  #div_praemien input:not([type]),
#div_ekvfw input[type=text],     #div_ekvfw input:not([type]) {
    width: auto !important;
    max-width: none;
    margin: 1px 0;
    padding: 2px 4px;
    border: 1px solid #8C8C8C;
    border-radius: 3px;
    font: 15px Arial, Helvetica, sans-serif;
}
#div_provpraem input[type=button],
#div_praemien input[type=button],
#div_ekvfw input[type=button] { margin-top: 6px; padding: 3px 12px; border-radius: 4px; }

/* ---- Absende-Kachel ---- */
.vk-aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
}
.vk-aktionen .vk-feld { margin: 0; }
.vk-aktionen input[name=f2ert],
.vkne-rahmen input[name=f2ert] {
    font-weight: bold;
    font-size: 16px;
    background: #F4F6F8;
}
.vk-aktionen input[name=f2ert] { width: 150px; }
.vk-aktionen input[type=submit],
.vkne-rahmen input[type=submit] {
    padding: 10px 26px;
    border-radius: 6px;
    background: var(--elv-akzent);
    font: bold 14px Arial, Helvetica, sans-serif;
}
.vk-aktionen input[name=berechnen],
.vkne-rahmen input[name=berechnen] { padding: 8px 18px; border-radius: 6px; }

@media (max-width: 1200px) {
    .vk-form {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        grid-template-areas:
            "stamm stamm"
            "kalk  rechts";
    }
}
@media (max-width: 700px) {
    .vk-form {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "stamm" "kalk" "rechts";
        gap: 10px;
    }
    .vk-rechts { gap: 10px; }
    .vk-titel { font-size: 16px; padding: 12px; }
    .vk-kachel { padding: 12px; }
    .vk-seite input, .vk-seite select, .vk-seite textarea,
    .vkne-rahmen input, .vkne-rahmen select, .vkne-rahmen textarea { font-size: 16px; }   /* kein iOS-Zoom */
    .vk-tabelle, .vkne-rahmen table:has(> tbody > tr > td[bgcolor="#FFFFCC" i]) { border-spacing: 4px; margin: 0 -4px; }
    .vk-aktionen {
        position: sticky;
        bottom: 0;
        z-index: 5;
    }
    .vkne-rahmen,
    .vkne-rahmen > tbody,
    .vkne-rahmen > tbody > tr,
    .vkne-rahmen > tbody > tr > td { display: block; width: auto !important; min-width: 0 !important; margin: 0; }
    .vkne-rahmen > tbody > tr > td:first-child { padding: 12px; margin-bottom: 10px; }
    .vkne-rahmen > tbody > tr > td:nth-child(2) > table > tbody > tr:has(input[name=f2ert]) { margin-top: 10px; }
}

/* ---- Login-Seite (ev_mafo.php) ------------------------------------- */
.elv-login-seite {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    color: #1B1F23;
}
.elv-login,
.elv-login * {
    box-sizing: border-box;
}
.elv-login {
    width: calc(100% - 32px);
    max-width: 380px;
    margin: 16px;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 24px rgba(27, 46, 58, 0.18);
}
.elv-login-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    background: var(--elv-dunkel);
}
.elv-login-kopf img {
    display: block;
}
.elv-login-form {
    display: flex;
    flex-direction: column;
    padding: 22px;
}
.elv-login-form h1 {
    margin: 0 0 16px;
    font-size: 20px;
    color: var(--elv-dunkel);
}
.elv-login-form label {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: bold;
    color: #444;
}
.elv-login-form input[type=text],
.elv-login-form input[type=password] {
    width: 100%;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid #C5CED5;
    border-radius: 6px;
    background: #fff;
    color: #000;
    font: 16px Arial, Helvetica, sans-serif;  /* 16px: kein Auto-Zoom auf iOS */
}
.elv-login-form input:focus {
    outline: 2px solid var(--elv-dunkel);
    outline-offset: 0;
    border-color: transparent;
}
.elv-login-form button {
    margin-top: 4px;
    padding: 11px;
    border: 0;
    border-radius: 6px;
    background: var(--elv-akzent);
    color: #fff;
    font: bold 15px Arial, Helvetica, sans-serif;
    cursor: pointer;
}
.elv-login-form button:hover,
.elv-login-form button:focus-visible {
    background: #C9363B;
}
.elv-login-hilfe {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #E3E7EA;
    font-size: 12px;
    color: #666;
}
.elv-login-hilfe a {
    color: var(--elv-dunkel);
    font-weight: bold;
    font-size: 13px;
}
.elv-login-hilfe p {
    margin: 6px 0 0;
    line-height: 1.45;
}
.elv-login-text {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.55;
    color: #444;
}
.elv-login-warnung {
    margin: 0 0 14px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #FDECEC;
    color: #A3262B;
    font-size: 13px;
}
.elv-login-version {
    margin: 0 0 16px;
    font-size: 11px;
    color: #3C4A55;            /* lesbar auf dem grauen Seitenhintergrund */
}

/* ---- Druck: nur der Seiteninhalt ----------------------------------- */
@media print {
    .elv-kopf,
    .elv-navi,
    .elv-backdrop {
        display: none !important;
    }
    .elv-main {
        margin-left: 0;
        min-height: 0;
        padding: 0;
        overflow: visible;
    }
}

/* =====================================================================
 * Einheitliche Ueberschriften und Rahmen (alle Seiten)
 * Vorbild: Kartenkopf der Listen/Formulare (.vw-kopf h2) - 17px fett,
 * dunkel, keine Grossbuchstaben; Karten mit dunklem Balken links wie
 * .vw-liste. Steht am Dateiende, damit es die aelteren Einzelregeln
 * (dt-/st-/su-/vk-/li-, Altseiten-Tabellen) ueberschreibt.
 * Ausgenommen: Fachwerkzeuge mit eigenem Layout (MagiCam, PDF-Editor,
 * Laufschrift/Show), Beschriftungen von Feldern, Tabellenkoepfen, KPIs.
 * --------------------------------------------------------------------- */
:root { --elv-h-schrift: bold 17px/1.3 Arial, Helvetica, sans-serif; }

.vw-kopf h2,
.su-titel, .dt-titel, .vk-titel,
.su-h, .dt-h, .st-h, .vk-h,
.vkne-rahmen > tbody > tr > td:nth-child(2) > table > tbody > tr:first-child::before,
.ps-titel,
.dt-status u,
.elv-login-form h1 {
    font: var(--elv-h-schrift);
    text-transform: none;
    letter-spacing: normal;
    color: var(--elv-dunkel);
}
.dt-nummer { font-size: 17px; line-height: 1.3; }
.su-h, .dt-h, .st-h, .vk-h { margin-bottom: 10px; }

/* Rahmen: jede Inhaltskarte mit dunklem Balken links */
.dt-kachel, .st-kachel, .su-kachel, .li-kachel,
.vk-kachel, .vk-titel, .vkne-karte,
.vkne-rahmen > tbody > tr > td:first-child,
.elv-login,
:where(.elv-main table[border]:not([class]):not(table table):not(:is(.dt-kachel, .st-kachel, .su-kachel, .li-kachel, .vk-kachel, .vw-kachel) table)) {
    border-left: 4px solid var(--elv-dunkel);
}
.dt-status u { text-decoration: none; }

/* =====================================================================
 * Provision (ev_provision.php): Uebersicht, Archiv, Provisionsberechnung
 * Baut auf vw- auf (Kachel, Kopf, Filter, Tabelle/Karten, Raster, Aktionen).
 * --------------------------------------------------------------------- */
/* Uebersicht: Summen im Kopf */
.pv-seite .vw-kopf { align-items: flex-start; }
.pv-summen { display: grid; grid-template-columns: repeat(4, auto); gap: 4px 20px; margin: 0 0 0 auto; }
.pv-summen div { display: flex; flex-direction: column; align-items: flex-end; }
.pv-summen dt { font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; color: #8A96A0; }
.pv-summen dd { margin: 0; font-size: 15px; font-weight: bold; color: var(--elv-dunkel); white-space: nowrap; }
.pv-filter select {
    width: 100%; box-sizing: border-box; padding: 5px 7px; border: 1px solid #C5CED5; border-radius: 6px;
    font: 13px Arial, Helvetica, sans-serif; color: #1B1F23; text-transform: none; letter-spacing: normal; background: #fff;
}
/* Filterfelder mit festen, zum Inhalt passenden Breiten statt gleich breiter
   Rasterspalten (Zeit braucht keine 200px, Fahrzeug/Status mehr als 110px);
   bricht bei wenig Platz einfach in die naechste Zeile um */
@media (min-width: 701px) {
    .vw-filter.pv-filter { display: flex; flex-wrap: wrap; }
    .pv-filter label { flex: 0 1 130px; min-width: 0; }
    .pv-filter .pv-f-datum { flex-basis: 140px; }
    .pv-filter .pv-f-zeit { flex-basis: 80px; }
    .pv-filter .pv-f-vk { flex-basis: 190px; }
    .pv-filter .pv-f-nr { flex-basis: 110px; }
    .pv-filter .pv-f-fzg { flex: 1 1 200px; max-width: 280px; }
    .pv-filter .pv-f-vor { flex-basis: 150px; }
    .pv-filter .pv-f-status { flex-basis: 190px; }
    .pv-filter input[type=submit] { flex: none; align-self: flex-end; }
}
/* Vollbild (ab 1600px Fensterbreite, ca. 1340px Platz): alle Felder samt
   Filter-Knopf in einer Zeile; etwas schmaler, Fahrzeug nimmt den Rest */
@media (min-width: 1600px) {
    .vw-filter.pv-filter { flex-wrap: nowrap; }
    .pv-filter label { flex: 0 1 110px; }
    .pv-filter .pv-f-datum { flex-basis: 130px; flex-shrink: 0; }
    .pv-filter .pv-f-zeit { flex-basis: 70px; }
    .pv-filter .pv-f-vk { flex-basis: 170px; }
    .pv-filter .pv-f-nr { flex-basis: 100px; }
    .pv-filter .pv-f-fzg { flex: 1 1 160px; max-width: 280px; }
    .pv-filter .pv-f-vor { flex-basis: 130px; }
    .pv-filter .pv-f-status { flex-basis: 180px; }
}
.pv-aktionen { justify-content: flex-end; margin: 0; padding: 0 16px 12px; }
.pv-aktionen input[type=submit] { background: #E9EEF2; color: #33434F; }
.pv-aktionen input.pv-monat:not(:disabled) { background: var(--elv-akzent); color: #fff; }
.pv-aktionen input:disabled, .pv-knoepfe input:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
/* Legende steht in .pv-aktionen links vor den Knoepfen (margin-right: auto schiebt die Knoepfe nach rechts) */
.pv-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-right: auto; font-size: 11px; color: #33434F; }
.pv-leg { padding: 2px 9px; border-radius: 10px; }
/* Status der Provision (ProvID) als Zeilenfarbe - wie bisher gelb / gruen / tuerkis, heller */
.pv-leg.pv-status-0 { background: #EEF1F4; }
.pv-status-1, .vw-seite .pv-tabelle tbody tr.pv-status-1, .vw-seite .pv-tabelle tbody tr.row-b.pv-status-1 { background: #FFF6C2; }
.pv-status-2, .vw-seite .pv-tabelle tbody tr.pv-status-2, .vw-seite .pv-tabelle tbody tr.row-b.pv-status-2 { background: #DDF5DA; }
.pv-status-3, .vw-seite .pv-tabelle tbody tr.pv-status-3, .vw-seite .pv-tabelle tbody tr.row-b.pv-status-3 { background: #D5F2F1; }
.vw-seite .pv-tabelle tbody tr:hover { background: #EAF2F7; }
.pv-tabelle small { color: #5A6B78; }
.vw-seite .pv-tabelle th, .vw-seite .pv-tabelle td { padding-left: 5px; padding-right: 5px; font-size: 12px; }
.pv-tabelle .pv-provision { font-weight: bold; }
/* Kacheln liegen in einem gemeinsamen Formular: Abstand wie .vw-seite */
.pv-seite > form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.pv-seite > form > .vw-meldung { margin: 0; }

/* Archiv */
.pv-archiv { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 16px; }
.pv-datei { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; color: #1B1F23; text-decoration: none; font-size: 13px; }
.pv-datei:hover { background: #EAF2F7; }
.pv-datei span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pv-datei small { color: #5A6B78; white-space: nowrap; }

/* Provisionsberechnung */
.pv-bilder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px 16px 0; }
.pv-bilder a { display: block; }
.pv-bilder img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: #EEF1F4; }
.pv-maske { padding-top: 4px; }
.pv-gruppe { margin: 18px 0 8px; font: bold 13px Arial, Helvetica, sans-serif; color: var(--elv-dunkel); }
.pv-gruppe small, .pv-maske label small, .pv-zeile label small { font-weight: normal; color: #5A6B78; }
.pv-gruppe small { margin-left: 6px; font-size: 11px; }
.pv-maske .vw-raster > label > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.pv-maske textarea { width: 100%; box-sizing: border-box; min-height: 70px; padding: 6px 8px; border: 1px solid #C5CED5; border-radius: 6px; font: 14px Arial, Helvetica, sans-serif; }
.pv-maske input.pv-fest { background: #F1F3F5; color: #33434F; }
.pv-maske input.pv-eingabe { background: #FFFBE0; }
.pv-maske input.pv-pflicht { background: #FBE6DE; }
.pv-maske input.pv-korrektur { background: #FFE8CC; }
.pv-op { display: inline-block; min-width: 12px; font-style: normal; font-weight: bold; color: var(--elv-akzent); }
.pv-mitknopf { display: flex; align-items: center; gap: 6px; }
.pv-mitknopf input[type=text] { flex: 1; min-width: 0; }
.pv-mitknopf .vw-knopf { padding: 6px 10px; }
.pv-ergebnis input { font-weight: bold; }
.pv-guenstiger { display: flex; flex-direction: column; gap: 8px; }
.pv-zeile {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 0.8fr) auto minmax(0, 0.8fr) auto minmax(0, 1.3fr);
    gap: 6px;
    align-items: end;
}
.pv-zeile label, .pv-dialog label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: bold; color: #33434F; }
.pv-zeile input, .pv-dialog input[type=text] {
    width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #C5CED5; border-radius: 6px; font: 14px Arial, Helvetica, sans-serif;
}
.pv-zeile .pv-op { padding-bottom: 8px; text-align: center; }
.pv-zeile .pv-wert input { background: #E4F6DF; font-weight: bold; }
.pv-endwert input { background: #C9F0BE; font-size: 16px; }
.pv-hinweis { margin: 12px 0; font-size: 13px; }
.pv-knoepfe { align-items: center; }
.pv-knoepfe input[type=submit] { background: #E9EEF2; color: #33434F; }
.pv-knoepfe input.pv-primaer { background: var(--elv-akzent); color: #fff; }
.pv-knoepfe input.pv-gefahr { background: #fff; color: #C62828; box-shadow: inset 0 0 0 1px #F3C4C6; }
.pv-abstand { flex: 1; }
/* Standardknopf fuer Enter: nur optisch versteckt (display:none waere kein Standardknopf mehr) */
.pv-standard { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Praemien im Detail: Dialog ueber der Seite (vorher feste Position top 214px / left 680px) */
.pv-dialog { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.35); }
.pv-dialog-inhalt {
    max-width: 540px; max-height: 84vh; overflow: auto; margin: 8vh auto; padding: 16px;
    border-left: 4px solid var(--elv-dunkel); border-radius: 10px; background: #fff;
    box-shadow: 0 4px 24px rgba(27, 46, 58, 0.25);
}
.pv-dialog h3 { margin: 0 0 12px; font: bold 17px/1.3 Arial, Helvetica, sans-serif; color: var(--elv-dunkel); }
.pv-praemien { display: grid; grid-template-columns: auto 60px 90px minmax(0, 1fr); gap: 6px 8px; align-items: center; margin-top: 12px; font-size: 12px; font-weight: bold; color: #33434F; }
.pv-praemien small { font-weight: normal; color: #8A96A0; }
.pv-praemien input { width: 100%; box-sizing: border-box; padding: 5px 7px; border: 1px solid #C5CED5; border-radius: 6px; font: 13px Arial, Helvetica, sans-serif; }
@media (max-width: 700px) {
    .pv-summen { grid-template-columns: repeat(2, auto); margin-left: 0; flex-basis: 100%; }
    .pv-summen div { align-items: flex-start; }
    .pv-aktionen { padding: 0 12px 12px; }
    .pv-filter .pv-f-vk, .pv-filter .pv-f-fzg, .pv-filter .pv-f-status { grid-column: span 2; }
    .pv-legende { flex-basis: 100%; }
    .pv-bilder { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 12px 0; }
    .pv-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 8px 0; border-top: 1px solid #EEF1F4; }
    .pv-zeile .pv-op { display: none; }
    .pv-zeile .pv-wert { grid-column: 1 / -1; }
    .pv-abstand { display: none; }
    .pv-zeile input, .pv-praemien input, .pv-dialog input[type=text], .pv-filter select, .pv-maske textarea { font-size: 16px; }
    .pv-dialog-inhalt { margin: 4vh 10px; }
    .pv-maske .vw-raster > .vw-breit2 { grid-column: 1 / -1; }
    .pv-praemien { grid-template-columns: auto 50px 70px minmax(0, 1fr); }
}

/* =====================================================================
 * Rote Hauptknoepfe rechtsbuendig (alle Seiten, soweit das Layout es zulaesst)
 * --------------------------------------------------------------------- */
.vw-aktionen { justify-content: flex-end; }
/* Editor: Blaetternavigation bleibt links, Neu/Uebernehmen/Loeschen/Reset rechts */
.vw-aktionen.vw-editor-leiste { justify-content: flex-start; }
.vw-editor-leiste input[value="Neu"] { margin-left: auto; }
.li-seite .suche-aktionen { justify-content: flex-end; }
.vk-aktionen { justify-content: flex-end; }
@media (min-width: 701px) {
    /* Filterleisten: Absendeknopf in die letzte Spalte, rechts */
    .vw-filter > input[type=submit], .vw-filter > button { grid-column: -2 / -1; justify-self: end; width: auto; }
    .vw-filter.vw-filter-auf { grid-template-columns: auto repeat(4, minmax(110px, 170px)) minmax(max-content, 1fr); }
    /* Verkaufsliste: Knopf "Filtern" direkt hinter den Feldern statt eigene Zeile */
    .vw-filter.vw-filter-vkwas { display: flex; flex-wrap: wrap; align-items: flex-end; }
    .vw-filter.vw-filter-vkwas > label { flex: 1 1 70px; max-width: 170px; }
    .vw-filter.vw-filter-vkwas > label.vw-breit { flex-grow: 2; flex-basis: 140px; max-width: 340px; }
    .vw-filter.vw-filter-vkwas > button { flex: 0 0 auto; }
}

/* ---- Provisionsberechnung, uebersichtliche Fassung (pv-) ---- */
.pv-kopfinfo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 20px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #EEF1F4;
}
.pv-bildleiste { display: flex; gap: 6px; grid-row: span 2; }
.pv-bildleiste img { display: block; width: 84px; height: 63px; object-fit: cover; border-radius: 6px; background: #EEF1F4; }
.pv-bildleiste a img { outline: 2px solid transparent; }
.pv-bildleiste a:hover img { outline-color: var(--elv-akzent); }
.pv-fahrzeug b { display: block; font-size: 16px; color: var(--elv-dunkel); }
.pv-fahrzeug span { font-size: 12px; color: #5A6B78; }
.pv-eckdaten { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0; }
.pv-eckdaten dt, .pv-ergebnisbox dt { font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; color: #8A96A0; }
.pv-eckdaten dd { margin: 0; font-weight: bold; color: #1B1F23; }
.pv-eckdaten small { font-weight: normal; color: #5A6B78; }

.pv-maske { padding: 0 16px 16px; }
.pv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; align-items: start; }
.pv-haupt > .pv-gruppe:first-child { margin-top: 14px; }

/* Kalkulation als Rechnung: Vorzeichen | Bezeichnung | Betrag | Hinweis */
.pv-rechnung { display: flex; flex-direction: column; max-width: 720px; border: 1px solid #EEF1F4; border-radius: 8px; overflow: hidden; }
.pv-zeile2, .pv-zwischen {
    display: grid;
    grid-template-columns: 22px minmax(150px, 1fr) 140px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 5px 10px;
    border-top: 1px solid #EEF1F4;
    font-size: 13px;
    color: #1B1F23;
}
.pv-rechnung > :first-child { border-top: 0; }
.pv-zeile2 .pv-op { text-align: center; font-size: 15px; }
.pv-zeile2 input[type=text], .pv-zeile2 output {
    width: 100%; box-sizing: border-box; padding: 5px 8px; border: 1px solid #C5CED5; border-radius: 6px;
    font: 14px Arial, Helvetica, sans-serif; text-align: right;
}
.pv-zeile2 output { display: block; border-color: transparent; font-weight: bold; }
.pv-zeile2 small, .pv-zwischen small { font-size: 11px; color: #5A6B78; }
.pv-zwischen { grid-template-columns: 22px minmax(150px, 1fr) 140px minmax(0, 1fr); background: #F7F9FA; color: #33434F; }
.pv-zwischen > span { grid-column: 2; }
.pv-zwischen > b { text-align: right; padding-right: 9px; }
.pv-summe { background: #F4F6F8; font-weight: bold; }
.pv-summe input { font-weight: bold; }
.pv-endsumme { background: #E4F6DF; }
.pv-endsumme output { font-size: 15px; }
.pv-klein { padding: 3px 10px !important; font-size: 12px !important; }

/* Guenstigerpruefung als Tabelle, hoechster Wert markiert */
.pv-guenstig { width: 100%; max-width: 720px; border-collapse: collapse; font-size: 13px; }
.pv-guenstig th, .pv-guenstig td { padding: 6px 8px; border-bottom: 1px solid #EEF1F4; text-align: left; white-space: nowrap; }
.pv-guenstig thead th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; color: #8A96A0; background: #F4F6F8; }
.pv-guenstig tbody th { font-weight: bold; color: #33434F; }
.pv-guenstig input { width: 90px; box-sizing: border-box; padding: 4px 6px; border: 1px solid #C5CED5; border-radius: 6px; font: 13px Arial, Helvetica, sans-serif; text-align: right; }
.pv-guenstig input.pv-kurz { width: 60px; }
.pv-guenstig input.pv-fest { background: #F1F3F5; color: #33434F; }
.pv-guenstig small { color: #5A6B78; }
.pv-guenstig .pv-wert { text-align: right; font-weight: bold; }
.pv-guenstig tr.pv-sieger { background: #E4F6DF; }
.pv-guenstig tr.pv-sieger th::after { content: " \2713 h\00F6 chster Wert"; margin-left: 6px; font-size: 11px; color: #1E8E3E; }
.pv-info { display: inline-block; width: 15px; height: 15px; border-radius: 50%; background: #DDE3E8; color: #33434F; font-size: 10px; line-height: 15px; text-align: center; text-decoration: none; cursor: help; }
.pv-notizen { width: 100%; max-width: 720px; box-sizing: border-box; min-height: 64px; padding: 6px 8px; border: 1px solid #C5CED5; border-radius: 6px; font: 14px Arial, Helvetica, sans-serif; }

/* Ergebnis rechts */
.pv-ergebnisbox {
    position: sticky; top: calc(var(--elv-kopf-hoehe) + 12px);
    margin-top: 14px; padding: 14px 16px;
    border-radius: 10px; border-left: 4px solid #2E9E4F; background: #F3FBF1;
}
.pv-ergebnisbox h3 { margin: 0 0 6px; font: bold 13px Arial, Helvetica, sans-serif; color: var(--elv-dunkel); }
.pv-ergebnisbox .pv-gross {
    width: 100%; box-sizing: border-box; padding: 4px 0; border: 0; background: transparent;
    font: bold 28px Arial, Helvetica, sans-serif; color: #1E6B35;
}
.pv-ergebnisbox dl { margin: 8px 0 12px; display: grid; gap: 6px; }
.pv-ergebnisbox dd { margin: 0; font-weight: bold; color: #1B1F23; }
.pv-korrekturfeld { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; font-size: 12px; font-weight: bold; color: #33434F; }
.pv-korrekturfeld input { padding: 6px 8px; border: 1px solid #C5CED5; border-radius: 6px; font: 14px Arial, Helvetica, sans-serif; background: #FFE8CC; }
.pv-knoepfe2 { display: flex; flex-direction: column; gap: 8px; }
.pv-knoepfe2 input[type=submit] { padding: 9px 14px; border: 0; border-radius: 6px; background: #E9EEF2; color: #33434F; font: bold 13px Arial, Helvetica, sans-serif; cursor: pointer; }
.pv-knoepfe2 input.pv-primaer { background: var(--elv-akzent); color: #fff; font-size: 14px; }
.pv-knoepfe2 input:disabled { opacity: 0.45; cursor: not-allowed; }
.pv-knoepfe2 input:hover:not(:disabled) { filter: brightness(0.93); }
.pv-nebenknoepfe { display: flex; gap: 6px; }
.pv-nebenknoepfe input { flex: 1; padding: 7px 6px !important; font-size: 12px !important; }
.pv-nebenknoepfe input.pv-gefahr { background: #fff; color: #C62828; box-shadow: inset 0 0 0 1px #F3C4C6; }

@media (max-width: 900px) {
    .pv-layout { grid-template-columns: minmax(0, 1fr); }
    .pv-ergebnisbox { position: static; }
}
@media (max-width: 700px) {
    .pv-kopfinfo { grid-template-columns: minmax(0, 1fr); padding: 12px; }
    .pv-bildleiste { grid-row: auto; }
    .pv-bildleiste img { width: calc((100vw - 70px) / 4); height: auto; aspect-ratio: 4 / 3; }
    .pv-maske { padding: 0 12px 12px; }
    .pv-zeile2 { grid-template-columns: 18px minmax(0, 1fr) 120px; }
    .pv-zeile2 > small { grid-column: 2 / -1; }
    .pv-zeile2 > small:empty { display: none; }
    .pv-zwischen { grid-template-columns: 18px minmax(0, 1fr) 120px; }
    .pv-zeile2 input[type=text], .pv-guenstig input, .pv-notizen, .pv-korrekturfeld input { font-size: 16px; }
}
@media (max-width: 700px) {
    /* Guenstigerpruefung: je Variante eine Karte */
    .pv-guenstig thead { display: none; }
    .pv-guenstig, .pv-guenstig tbody { display: block; }
    .pv-guenstig tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; padding: 10px; border-bottom: 1px solid #EEF1F4; }
    .pv-guenstig tbody th { grid-column: 1 / -1; padding: 0; border: 0; white-space: normal; }
    .pv-guenstig td { display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; white-space: normal; }
    .pv-guenstig td::before { content: attr(data-label); font-size: 10px; font-weight: bold; text-transform: uppercase; color: #8A96A0; }
    .pv-guenstig .pv-wert { text-align: left; font-size: 15px; }
    .pv-guenstig input, .pv-guenstig input.pv-kurz { width: 100%; }
}

/* ---- Provisionsberechnung in vier Kacheln ---- */
.pv-seite > form.pv-maske { padding: 0; }
.pv-haupt { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pv-kachel-inhalt { padding: 4px 16px 16px; }
.pv-kachel .pv-kopfinfo { border-bottom: 1px solid #EEF1F4; }
.pv-kachel .pv-gruppe:first-child { margin-top: 12px; }
.pv-kachel .vw-kopf .vw-summe { font-size: 11px; color: #5A6B78; }
.pv-kachel-inhalt > .pv-rechnung, .pv-kachel-inhalt > .vw-scroll { margin-top: 12px; }
/* Kachel 4 (Provision): gruen, rechts mitlaufend */
.pv-ergebnisbox.vw-kachel { margin-top: 0; border-left: 4px solid #2E9E4F; background: #F3FBF1; }
.pv-ergebnisbox h2 { margin: 0 0 6px; font: bold 17px/1.3 Arial, Helvetica, sans-serif; color: #1E6B35; }
@media (max-width: 700px) {
    .pv-kachel-inhalt { padding: 4px 12px 12px; }
}
.pv-kachel .pv-rechnung, .pv-kachel .pv-guenstig, .pv-kachel .pv-notizen { max-width: none; }

/* ---- Provisionsberechnung 2 x 2: Provisionsberechnung | Kalkulation,
        Guenstigerpruefung | Provision (Vorschlag Nutzer, platzsparend) ---- */
.pv-seite .pv-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.pv-seite .pv-haupt { display: contents; }          /* Kacheln 1-3 werden selbst Rasterzellen */
.pv-seite .pv-ergebnisbox { position: static; }
.pv-kachel .pv-bildleiste img { width: 64px; height: 48px; }
.pv-kachel .pv-kopfinfo { gap: 8px 14px; }
@media (max-width: 1250px) {
    .pv-seite .pv-layout { grid-template-columns: minmax(0, 1fr); }
}
/* Guenstigerpruefung kompakt fuer die halbe Breite */
.pv-seite .pv-guenstig th, .pv-seite .pv-guenstig td { padding: 6px 5px; }
.pv-seite .pv-guenstig input { width: 66px; }
.pv-seite .pv-guenstig input.pv-kurz { width: 46px; }
.pv-seite .pv-guenstig td small { display: none; }
.pv-seite .pv-guenstig tr.pv-sieger th::after { display: block; margin-left: 0; font-weight: normal; }
/* Provision: Kennzahlen zweispaltig, Hauptknoepfe nebeneinander */
.pv-seite .pv-ergebnisbox dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.pv-seite .pv-knoepfe2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv-seite .pv-knoepfe2 .pv-primaer { order: 2; }
.pv-seite .pv-nebenknoepfe { grid-column: 1 / -1; order: 3; }
@media (max-width: 700px) {
    .pv-seite .pv-guenstig input, .pv-seite .pv-guenstig input.pv-kurz { width: 100%; }
    .pv-seite .pv-guenstig td small { display: inline; }
}
/* Fahrzeugbilder groesser: 2 x 2 neben den Fahrzeugdaten */
.pv-kachel .pv-bildleiste { display: grid; grid-template-columns: repeat(2, 104px); gap: 6px; }
.pv-kachel .pv-bildleiste img { width: 104px; height: 78px; }
@media (max-width: 700px) {
    .pv-kachel .pv-bildleiste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pv-kachel .pv-bildleiste img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
}
/* Provisionsberechnung: kompakter in der Hoehe */
.pv-seite .pv-kachel .vw-kopf { padding: 9px 16px; }
.pv-seite .pv-kopfinfo { padding: 8px 16px; }
.pv-seite .pv-kachel-inhalt { padding: 2px 16px 12px; }
.pv-seite .pv-kachel .pv-gruppe:first-child { margin-top: 8px; }
.pv-seite .pv-gruppe { margin: 10px 0 6px; }
.pv-seite .pv-kachel .vw-raster { gap: 6px 12px; }
.pv-seite .pv-kachel .vw-raster > label { gap: 2px; }
.pv-seite .pv-kachel .vw-raster input[type=text], .pv-seite .pv-kachel .vw-raster select { padding: 4px 8px; }
.pv-seite .pv-kachel-inhalt > .pv-rechnung, .pv-seite .pv-kachel-inhalt > .vw-scroll { margin-top: 6px; }
.pv-seite .pv-zeile2, .pv-seite .pv-zwischen { padding: 2px 10px; }
.pv-seite .pv-zeile2 input[type=text], .pv-seite .pv-zeile2 output { padding: 3px 8px; }
.pv-seite .pv-guenstig th, .pv-seite .pv-guenstig td { padding: 4px 5px; }
.pv-seite .pv-guenstig input { padding: 3px 6px; }
.pv-seite .pv-notizen { min-height: 48px; }
.pv-seite .pv-ergebnisbox { padding: 10px 16px; }
.pv-seite .pv-ergebnisbox dl { margin: 6px 0 10px; }
.pv-seite .pv-korrekturfeld { margin-bottom: 10px; }
.pv-seite .pv-korrekturfeld input { padding: 4px 8px; }
.pv-seite .pv-knoepfe2 input[type=submit] { padding: 7px 12px; }
/* Provision (gruene Kachel): Angaben links, alle Knoepfe rechts untereinander */
.pv-seite .pv-ergebnisbox { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 190px); column-gap: 18px; align-content: start; }
.pv-seite .pv-ergebnisbox > * { grid-column: 1; }
.pv-seite .pv-ergebnisbox > .pv-knoepfe2 { grid-column: 2; grid-row: 1 / span 20; align-self: start; display: flex; flex-direction: column; gap: 8px; }
.pv-seite .pv-knoepfe2 .pv-primaer { order: -1; }
.pv-seite .pv-nebenknoepfe { flex-direction: column; gap: 8px; }
.pv-seite .pv-nebenknoepfe input { flex: none; padding: 7px 12px !important; font-size: 13px !important; }
.pv-seite .pv-korrekturfeld { margin-bottom: 0; }
/* Korrekturfeld so schmal wie die Betragsfelder der Kalkulation (Pauschalaufwand) */
.pv-korrekturfeld { align-items: flex-start; }
.pv-korrekturfeld input { width: 140px; box-sizing: border-box; text-align: right; }
@media (max-width: 700px) {
    .pv-seite .pv-ergebnisbox { grid-template-columns: minmax(0, 1fr) 128px; column-gap: 12px; }
    .pv-korrekturfeld input { width: 120px; }
    .pv-seite .pv-ergebnisbox dl { grid-template-columns: minmax(0, 1fr); }
    .pv-seite .pv-ergebnisbox .pv-gross { font-size: 24px; }
}
/* Zwei unabhaengige Spalten: links Provisionsberechnung + Guenstigerpruefung,
   rechts Kalkulation + Provision. Die Kalkulation nimmt den Platz, den die
   (flachere) Provisions-Kachel frei laesst, und verteilt ihn auf ihre Zeilen. */
.pv-seite .pv-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.pv-seite .pv-spalte { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pv-seite .pv-links > .pv-k3 { flex: 1; }
.pv-seite .pv-rechts > .pv-k2 { flex: 1; display: flex; flex-direction: column; }
.pv-seite .pv-k2 > .pv-kachel-inhalt { flex: 1; display: flex; flex-direction: column; }
.pv-seite .pv-k2 .pv-rechnung { flex: 1; }
.pv-seite .pv-k2 .pv-rechnung > * { flex: 1; }
.pv-seite .pv-ergebnisbox .pv-gross { padding: 2px 0 4px; }
@media (max-width: 1250px) {
    .pv-seite .pv-layout { grid-template-columns: minmax(0, 1fr); }
    .pv-seite .pv-spalte { display: contents; }
    .pv-seite .pv-k1 { order: 1; } .pv-seite .pv-k2 { order: 2; } .pv-seite .pv-k3 { order: 3; } .pv-seite .pv-k4 { order: 4; }
}

/* Verbindliche Bestellung: gespeicherte Bestellungen laden (ev_verbform.php) */
.vb-gespeichert details > summary { padding: 12px 16px; font-weight: bold; color: #33434F; cursor: pointer; }
.vb-hinweis { font-weight: normal; font-size: 12px; color: #8A96A0; }
.vb-form { padding: 0 16px 14px; }
.vb-suche { display: flex; gap: 8px; margin-bottom: 10px; }
.vb-suche input { flex: 0 1 320px; min-width: 0; padding: 6px 8px; border: 1px solid #C5CED5; border-radius: 6px; font: 14px Arial, Helvetica, sans-serif; }
.vb-knopf { padding: 6px 12px; border: 0; border-radius: 6px; background: var(--elv-dunkel); color: #fff; font: bold 12px Arial, Helvetica, sans-serif; cursor: pointer; white-space: nowrap; }
.vb-knopf:hover { filter: brightness(1.2); }
.vb-knopf.vb-knopf-2 { background: #E9EEF2; color: #33434F; }
.vb-tabelle small { color: #8A96A0; }
.vb-aktion { text-align: right; white-space: nowrap; }
.vb-aktion .vb-knopf + .vb-knopf { margin-left: 4px; }
.vb-leer { margin: 4px 0; color: #5A6B78; }
/* Bestellformular in Abschnitten */
.vb-bestellung { display: flex; flex-direction: column; gap: 14px; }
.vb-abschnitt { min-width: 0; margin: 0; padding: 12px 14px 14px; border: 1px solid #E1E6EA; border-radius: 10px; }
.vb-abschnitt > legend { padding: 0 6px; font: bold 11px Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 0.04em; color: #5A6B78; }
.vb-bisher { font-size: 11px; font-weight: normal; color: #8A96A0; }
.vw-raster.vw-editor.vb-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; }
.vb-raster .vb-breit2 { grid-column: span 2; }
.vb-bestellung textarea, .vw-raster.vw-editor.vb-raster textarea { min-height: 0; }
.vb-bestellung .vw-voll textarea { min-height: 150px; }
.vb-fragen { display: flex; flex-direction: column; }
.vb-frage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr); gap: 6px 14px; align-items: center; padding: 7px 0; border-bottom: 1px solid #EEF1F4; }
.vb-frage:last-child { border-bottom: 0; }
.vb-frage-text { font-size: 13px; color: #1B1F23; }
.vb-frage-detail { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #8A96A0; }
.vb-frage-detail textarea { width: 100%; box-sizing: border-box; padding: 5px 8px; border: 1px solid #C5CED5; border-radius: 6px; font: 13px Arial, Helvetica, sans-serif; resize: vertical; }
.vb-fragen > .vb-frage-voll { display: flex; flex-direction: column; gap: 3px; padding: 7px 0; border-bottom: 1px solid #EEF1F4; font-size: 13px; color: #1B1F23; }
.vb-fragen > .vb-frage-voll textarea { width: 100%; box-sizing: border-box; padding: 5px 8px; border: 1px solid #C5CED5; border-radius: 6px; font: 13px Arial, Helvetica, sans-serif; resize: vertical; }
.vb-janein { flex-wrap: nowrap; }
.vb-janein label { flex: 0 0 auto; }
.vb-janein span { min-width: 44px; padding: 5px 10px; font-weight: normal; }
.vb-raster .vb-frage { grid-column: span 2; grid-template-columns: minmax(0, 1fr) auto; border: 0; padding: 0; align-self: end; }
.vb-safety { display: flex; gap: 8px; align-items: center; }
.vb-safety input[type=text] { width: 120px; }
@media (max-width: 1100px) {
    .vw-raster.vw-editor.vb-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .vw-raster.vw-editor.vb-raster { grid-template-columns: minmax(0, 1fr); }
    .vb-raster .vb-breit2, .vb-raster .vb-frage { grid-column: auto; }
    .vb-frage { grid-template-columns: minmax(0, 1fr) auto; }
    .vb-frage-detail { grid-column: 1 / -1; }
    .vb-raster .vb-frage { grid-template-columns: minmax(0, 1fr); }
    .vb-safety { flex-wrap: wrap; }
}
@media (max-width: 700px) {
    .vb-suche input { flex: 1 1 auto; font-size: 16px; }
    .vb-aktion { white-space: normal; }
}


/* =====================================================================
 * Farbige Gruppen im gemeinsamen Rahmen (Vorbild: ev_verbform.php)
 *
 * Aufbau einer Seite:
 *   .gr-rahmen   grosse weisse Kachel, die alles umschliesst
 *     .gr-kopf   Titelzeile im Rahmen (flach, ohne eigene Kachel);
 *                .gr-titel = Seitentitel, .gr-titelzeile = Titel + Knoepfe
 *     .gr-*      Gruppen: duenner Rand, farbiger Balken links, leicht
 *                getoenter Hintergrund, Ueberschrift als Etikett halb auf
 *                dem oberen Rand (fieldset/legend oder h2/..-h absolut)
 *     .gr-fuss   Knopfzeile im Rahmen (flach)
 *   .gr-stapel   Rahmen ohne eigenes Layout: Gruppen untereinander
 *
 * Farbe nach Thema, seitenuebergreifend gleich:
 *   gr-blau     Kunde, Kaeufer, Verkauf, Einstellungen der Ausgabe
 *   gr-gruen    Fahrzeug, Technik, Marken, Neuzugang
 *   gr-orange   Preis, Kalkulation, Angebote, Parken
 *   gr-violett  Ausstattung, Zustand, Pruefungen
 *   gr-tuerkis  Nummer, Standort, Boersen, Sonstiges, Links
 *   gr-rot      Widerruf
 *   gr-grau     Gruppe ohne eigenes Thema (Bilder, Memos, Werkzeuge)
 *   gr-weiss    weisser Hintergrund, dunkelgraues Etikett (z.B. Logos)
 * Steht am Dateiende, damit es die Kachelregeln oben ueberschreibt.
 * --------------------------------------------------------------------- */
:root {
    --gr-blau: #2F6FAB;    --gr-blau-grund: #F2F7FC;
    --gr-gruen: #2E8B57;   --gr-gruen-grund: #F1F9F4;
    --gr-orange: #C07A12;  --gr-orange-grund: #FDF7EE;
    --gr-violett: #8E4DA8; --gr-violett-grund: #F8F3FB;
    --gr-tuerkis: #13818A; --gr-tuerkis-grund: #EFF8F8;
    --gr-rot: #C8373D;     --gr-rot-grund: #FDF1F1;
    --gr-grau: #6B7B88;    --gr-grau-grund: #F7F9FA;
    --gr-weiss: #4A5763;   --gr-weiss-grund: #FFFFFF;
    --gr-rand: #E1E6EA;
    --gr-abstand: 22px;    /* zwischen Gruppen - Platz fuer das Etikett */
}
.gr-blau    { --gr-farbe: var(--gr-blau);    --gr-grund: var(--gr-blau-grund); }
.gr-gruen   { --gr-farbe: var(--gr-gruen);   --gr-grund: var(--gr-gruen-grund); }
.gr-orange  { --gr-farbe: var(--gr-orange);  --gr-grund: var(--gr-orange-grund); }
.gr-violett { --gr-farbe: var(--gr-violett); --gr-grund: var(--gr-violett-grund); }
.gr-tuerkis { --gr-farbe: var(--gr-tuerkis); --gr-grund: var(--gr-tuerkis-grund); }
.gr-rot     { --gr-farbe: var(--gr-rot);     --gr-grund: var(--gr-rot-grund); }
.gr-grau    { --gr-farbe: var(--gr-grau);    --gr-grund: var(--gr-grau-grund); }
.gr-weiss   { --gr-farbe: var(--gr-weiss);   --gr-grund: var(--gr-weiss-grund); }

/* Rahmen */
.gr-rahmen {
    box-sizing: border-box;
    padding: 24px 16px 16px;         /* oben Platz fuer das erste Etikett */
    border-left: 4px solid var(--elv-dunkel);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(27, 46, 58, 0.10), 0 1px 2px rgba(27, 46, 58, 0.06);
    row-gap: var(--gr-abstand);
}
.gr-rahmen :is(.su-gruppen, .vk-form, .pv-maske) { row-gap: var(--gr-abstand); }
.gr-stapel { display: flex; flex-direction: column; gap: var(--gr-abstand); }
/* Flex-/Grid-Kinder nicht breiter als der Rahmen: breite Tabellen scrollen
   in ihrer .vw-scroll, statt die Gruppe ueber den Rahmen hinaus zu dehnen */
.gr-rahmen > * { min-width: 0; }
.gr-rahmen > .gr-fuss.vw-aktionen { margin-top: 0; }   /* Abstand kommt vom Rahmen */
.gr-rahmen .gr-kopf,
.gr-rahmen .gr-fuss {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
/* Seitentitel im Rahmen (schwarz auf weiss), optional mit Knoepfen rechts */
.gr-titel {
    margin: 0;
    font: var(--elv-h-schrift);
    color: #1B1F23;
}
.gr-titelzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}
/* Gruppe ohne eigene Kachelklasse (fieldset oder div): Innenabstand */
.gr-gruppe { min-width: 0; margin: 0; padding: 12px 14px 14px; }
.gr-gruppe > .vw-raster, .gr-gruppe > .vw-haken { margin: 0; }

/* Gleichartige Gruppen nebeneinander (z.B. je Standort in ev_wbstat.php) */
.gr-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--gr-abstand) 14px;
    align-items: start;
}

/* uebrige Kacheln im Rahmen: flach mit duennem Rand statt Schatten */
.gr-rahmen :is(.su-kachel, .dt-kachel, .st-kachel, .vk-kachel, .vw-kachel, .st-kpi):not(.gr-kopf, .gr-fuss, .gr-blau, .gr-gruen, .gr-orange, .gr-violett, .gr-tuerkis, .gr-rot, .gr-grau, .gr-weiss) {
    border: 1px solid var(--gr-rand);
    box-shadow: none;
}

/* Gruppe */
:is(.gr-blau, .gr-gruen, .gr-orange, .gr-violett, .gr-tuerkis, .gr-rot, .gr-grau, .gr-weiss) {
    position: relative;
    border: 1px solid var(--gr-rand);
    border-left: 4px solid var(--gr-farbe);
    border-radius: 10px;
    background: var(--gr-grund);
    box-shadow: none;
    overflow: visible;
}
:is(.gr-blau, .gr-gruen, .gr-orange, .gr-violett, .gr-tuerkis, .gr-rot, .gr-grau, .gr-weiss):not(fieldset, .vw-kachel) { padding-top: 20px; }
/* Handy: .vw-liste.vw-formkarte bekommt dort overflow:hidden, dunklen Balken
   und weissen Grund - in Gruppen wuerde das Etikett abgeschnitten */
.vw-liste.vw-formkarte:is(.gr-blau, .gr-gruen, .gr-orange, .gr-violett, .gr-tuerkis, .gr-rot, .gr-grau, .gr-weiss) {
    overflow: visible;
    border-left: 4px solid var(--gr-farbe);
    background: var(--gr-grund);
    box-shadow: none;
}
:is(.gr-blau, .gr-gruen, .gr-orange, .gr-violett, .gr-tuerkis, .gr-rot, .gr-grau, .gr-weiss) > .vw-kopf { padding-top: 18px; border-left: 0; border-radius: 0; background: transparent; box-shadow: none; }   /* Handy: keine eigene Kopf-Kachel */
:is(.gr-blau, .gr-gruen, .gr-orange, .gr-violett, .gr-tuerkis, .gr-rot, .gr-grau, .gr-weiss) > .vw-kopf:has(> h2:only-child) { padding: 18px 0 0; }   /* nur Etikett: Platz bis zum Inhalt */
:is(.gr-blau, .gr-gruen, .gr-orange, .gr-violett, .gr-tuerkis, .gr-rot, .gr-grau, .gr-weiss) .st-forum-kopf { justify-content: flex-end; }

/* Etikett */
:is(.gr-blau, .gr-gruen, .gr-orange, .gr-violett, .gr-tuerkis, .gr-rot, .gr-grau, .gr-weiss) > legend,
:is(.gr-blau, .gr-gruen, .gr-orange, .gr-violett, .gr-tuerkis, .gr-rot, .gr-grau, .gr-weiss) > h2,
:is(.gr-blau, .gr-gruen, .gr-orange, .gr-violett, .gr-tuerkis, .gr-rot, .gr-grau, .gr-weiss) > .vw-kopf > h2,
:is(.gr-blau, .gr-gruen, .gr-orange, .gr-violett, .gr-tuerkis, .gr-rot, .gr-grau, .gr-weiss) :is(.dt-h, .st-h, .vk-h) {
    width: auto;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--gr-farbe);
    font: bold 11px/1.5 Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
}
:is(.gr-blau, .gr-gruen, .gr-orange, .gr-violett, .gr-tuerkis, .gr-rot, .gr-grau, .gr-weiss) > legend { float: none; margin: 0; }
:is(.gr-blau, .gr-gruen, .gr-orange, .gr-violett, .gr-tuerkis, .gr-rot, .gr-grau, .gr-weiss) > h2,
:is(.gr-blau, .gr-gruen, .gr-orange, .gr-violett, .gr-tuerkis, .gr-rot, .gr-grau, .gr-weiss) > .vw-kopf > h2,
:is(.gr-blau, .gr-gruen, .gr-orange, .gr-violett, .gr-tuerkis, .gr-rot, .gr-grau, .gr-weiss) :is(.dt-h, .st-h, .vk-h) {
    position: absolute;
    top: 0;
    left: 12px;
    transform: translateY(-50%);
    margin: 0;
    white-space: nowrap;
}
:is(.gr-blau, .gr-gruen, .gr-orange, .gr-violett, .gr-tuerkis, .gr-rot, .gr-grau, .gr-weiss) > .vw-kopf > h2 * { color: #fff; }

/* Seitenbezogene Anpassungen */
/* Hinweis-/Filterflaeche (Ein- und Verkaufsstatistik) in der Gruppenfarbe statt gelb */
:is(.gr-blau, .gr-gruen, .gr-orange, .gr-violett, .gr-tuerkis, .gr-rot, .gr-grau, .gr-weiss) .vw-filter-gelb {
    border: 1px solid color-mix(in srgb, var(--gr-farbe) 30%, #fff);
    background: color-mix(in srgb, var(--gr-farbe) 10%, #fff);
}
/* Summenzeile in der Farbe der Gruppe statt rosa */
.vw-seite :is(.gr-blau, .gr-gruen, .gr-orange, .gr-violett, .gr-tuerkis, .gr-rot, .gr-grau, .gr-weiss) tr.vw-summenzeile,
.vw-seite :is(.gr-blau, .gr-gruen, .gr-orange, .gr-violett, .gr-tuerkis, .gr-rot, .gr-grau, .gr-weiss) tbody tr.vw-summenzeile:hover { background: color-mix(in srgb, var(--gr-farbe) 14%, #fff); }
.vw-seite :is(.gr-blau, .gr-gruen, .gr-orange, .gr-violett, .gr-tuerkis, .gr-rot, .gr-grau, .gr-weiss) tr.vw-summenzeile td { border-top-color: color-mix(in srgb, var(--gr-farbe) 45%, #fff); }
/* Listen in Gruppen: etwas engere Zellen - der Rahmen kostet ~40px Breite */
:is(.gr-blau, .gr-gruen, .gr-orange, .gr-violett, .gr-tuerkis, .gr-rot, .gr-grau, .gr-weiss) .vw-tabelle :is(th, td) { padding-left: 4px; padding-right: 4px; }
:is(.gr-blau, .gr-gruen, .gr-orange, .gr-violett, .gr-tuerkis, .gr-rot, .gr-grau, .gr-weiss).su-ausstattung > .su-h { margin: 0; line-height: 1.5; }
:is(.gr-blau, .gr-gruen, .gr-orange, .gr-violett, .gr-tuerkis, .gr-rot, .gr-grau, .gr-weiss).su-ausstattung > .su-merkmal-leiste { float: none; margin: 0 0 10px auto; }
.gr-rahmen :is(.dt-boersen, .dt-memos) { column-gap: 24px; }
.pv-seite .pv-ergebnisbox.gr-gruen { position: relative; top: auto; }   /* Etikett: sonst position:static */
.pv-seite > form.gr-rahmen { padding: 24px 16px 16px; gap: var(--gr-abstand); }   /* sonst padding:0 / gap:14px aus .pv-seite > form */
.pv-seite .gr-rahmen .pv-spalte { gap: var(--gr-abstand); }                  /* Platz fuer die Etiketten */
.pv-seite .pv-ergebnisbox.gr-gruen > h2 { grid-column: auto; grid-row: auto; } /* Etikett am Kachelrand, nicht an der Grid-Spalte */
.gr-rahmen .pv-kachel .pv-rechnung { border: 0; border-radius: 0; }
.gr-rahmen .vw-seite .pv-tabelle th, .vw-seite .gr-rahmen .pv-tabelle th { font-size: 11px; }   /* wie die anderen Listen; der Rahmen kostet ~40px */          /* keine Kachel in der Kachel */   /* sonst padding:0 aus .pv-seite > form.pv-maske */
.vk-seite.gr-rahmen .vw-upload { gap: var(--gr-abstand) 16px; align-items: start; }   /* ev_picupload2: Bilder | Leitfaden */
.gr-rahmen:not(.gr-stapel) > h1.gr-kopf { margin: 0 0 var(--gr-abstand); }   /* nur Rahmen ohne Flex (vk-seite); in .gr-stapel kommt der Abstand vom gap */

@media (max-width: 700px) {
    .gr-rahmen, .pv-seite > form.gr-rahmen { padding: 20px 10px 12px; }
}

/* Eingabefelder bleiben weiss - schwach gewichtet, damit farbige Felder
   (z.B. .pv-korrektur, .su-hervor) ihre Farbe behalten */
:where(.gr-blau, .gr-gruen, .gr-orange, .gr-violett, .gr-tuerkis, .gr-rot, .gr-grau, .gr-weiss) :is(input[type=text], input[type=date], input[type=number], input[type=search], input[type=email], input[type=tel], input:not([type]), select, textarea) {
    background-color: #fff;
}

/* =====================================================================
 * Detailseite (ev_detail.php): klarere Darstellung in den Kacheln
 * --------------------------------------------------------------------- */
/* Wertepaare: Bezeichnung klein und grau, Wert darunter */
.dt-werte {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px 16px;
    margin: 0;
}
.dt-werte > div { min-width: 0; }
.dt-werte .dt-breit { grid-column: 1 / -1; }
.dt-werte dt {
    font: bold 10px/1.4 Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #8A96A0;
}
.dt-werte dd { margin: 0; font-size: 13px; line-height: 1.4; color: #1B1F23; overflow-wrap: anywhere; }
.dt-werte dd small { color: #5A6B78; }
.dt-werte dd select { max-width: 100%; padding: 3px 6px; border: 1px solid #C5CED5; border-radius: 6px; font-size: 12px; }
.dt-unter {
    margin: 14px 0 8px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--gr-farbe, #5A6B78) 20%, #fff);
    font: bold 11px Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gr-farbe, #5A6B78);
}
/* Hauspreis gross */
.dt-preisgross { margin: 2px 0 12px; font: bold 26px/1.2 Arial, Helvetica, sans-serif; color: #1B1F23; }
/* kleine Knoepfe (Fehler melden, Details) */
.dt-links { margin: 12px 0 0; }
.vw-knopf.dt-klein { display: inline-block; padding: 5px 10px; font-size: 12px; }
/* Ausstattung als Merkmale */
.dt-merkmale { display: flex; flex-wrap: wrap; gap: 5px 6px; }
.dt-merkmale span {
    padding: 3px 9px;
    border: 1px solid color-mix(in srgb, var(--gr-farbe, #5A6B78) 25%, #fff);
    border-radius: 12px;
    background: #fff;
    font-size: 12px;
    line-height: 1.4;
    color: #1B1F23;
}
/* Verkaufsmeldung: Verfuegbarkeit, Hinweis Memos */
.dt-verfuegbar { margin: 6px 0 8px; font-size: 13px; }
.dt-verfuegbar font { font-size: 13px; }
.dt-hinweis {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 6px;
    background: #FDECEC;
    color: #B71C1C;
    font: bold 13px Arial, Helvetica, sans-serif;
}
/* Werkstattstatus als farbiger Knopf (vorher farbige Tabellenzeile) */
.dt-statusknopf {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font: bold 13px/1.3 Arial, Helvetica, sans-serif;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(27, 46, 58, 0.25);
}
a.dt-statusknopf:hover { filter: brightness(1.08); text-decoration: none; }
.dt-statusknopf.dt-st-1 { background: #E5484D; color: #fff; }
.dt-statusknopf.dt-st-2 { background: #F5C518; color: #1B1F23; }
.dt-statusknopf.dt-st-3 { background: #2E9E4F; color: #fff; }
.dt-statusknopf.dt-st-0 { background: #E9EEF2; color: #5A6B78; box-shadow: none; }
/* Fotos: alle vorhandenen; bei mehr als 12 kleinere Vorschau in mehr Spalten */
.dt-thumbs.dt-thumbs-viele { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.dt-thumbs.dt-thumbs-viele .dt-thumb a[href^="javascript:ask("] { top: 2px; right: 2px; width: 16px; height: 16px; }
.dt-thumbs.dt-thumbs-viele .dt-thumb a[href^="javascript:ask("]::after { font-size: 9px; line-height: 16px; }
.dt-bilder { position: relative; }
/* Volle Breite: viele Fotos in 5 Spalten, dann etwa so hoch wie das Hauptbild */
@media (min-width: 1620px) {
    .dt-thumbs.dt-thumbs-viele { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
}
/* Verkaeuferliste in der Verkaufsmeldung: ca. 8 Zeilen sichtbar, Rest scrollt
   (sonst bestimmt sie die Hoehe der ganzen oberen Reihe) */
.dt-status select[size] { max-height: 150px; }
.dt-thumbs .vw-leer { grid-column: 1 / -1; margin: 0; }   /* "Noch keine Fotos" ueber die volle Breite */

/* =====================================================================
 * Verkauf melden / Parken / Zuordnen (ev_vkne.php) im Gruppen-Rahmen.
 * Nur CSS auf der Alttabelle - keine Formularelemente einfuegen, die
 * Rechenfunktionen greifen per Position auf form.elements[8..52] zu.
 * Zelle 1 = Hauptgruppe (Farbe/Etikett je Fall), Zelle 2 (nur Verkaufen)
 * = "Kunde & Auslieferung" + Knopfzeile.
 * --------------------------------------------------------------------- */
.vkne-seite .gr-titel .vkne-nr { margin-left: 6px; color: #5A6B78; }
.vkne-seite .vkne-aussen,
.vkne-seite .vkne-rahmen { background: none !important; box-shadow: none !important; border: 0 !important; }
.vkne-fall-verkaufen { --vk-farbe: var(--gr-orange); --vk-grund: var(--gr-orange-grund); --vk-etikett: 'Kalkulation'; }
.vkne-fall-parken    { --vk-farbe: var(--gr-orange); --vk-grund: var(--gr-orange-grund); --vk-etikett: 'Parken'; }
.vkne-fall-zuordnen  { --vk-farbe: var(--gr-blau);   --vk-grund: var(--gr-blau-grund);   --vk-etikett: 'Bestellungen'; }
.vkne-fall-ergebnis  { --vk-farbe: var(--gr-grau);   --vk-grund: var(--gr-grau-grund);   --vk-etikett: 'Ergebnis'; }
/* Etikett wie .gr-* (halb auf dem oberen Rand) */
.vkne-seite .vkne-rahmen > tbody > tr > td:first-child::before,
.vkne-seite .vkne-rahmen > tbody > tr > td:nth-child(2) > table > tbody > tr:first-child::before {
    position: absolute;
    top: 0;
    left: 12px;
    transform: translateY(-50%);
    margin: 0;
    padding: 2px 8px;
    border-radius: 4px;
    font: bold 11px/1.5 Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    white-space: nowrap;
}
/* Zelle 1: Hauptgruppe */
.vkne-seite .vkne-rahmen > tbody > tr > td:first-child {
    position: relative;
    padding-top: 22px;
    border: 1px solid var(--gr-rand);
    border-left: 4px solid var(--vk-farbe);
    background: var(--vk-grund);
    box-shadow: none;
}
.vkne-seite .vkne-rahmen > tbody > tr > td:first-child::before { content: var(--vk-etikett); background: var(--vk-farbe); }
/* Zelle 2: Kunde & Auslieferung (blau) */
.vkne-seite .vkne-rahmen > tbody > tr > td:nth-child(2) > table > tbody > tr {
    border-left: 4px solid var(--gr-blau);
    border-right: 1px solid var(--gr-rand);
    background: var(--gr-blau-grund);
}
.vkne-seite .vkne-rahmen > tbody > tr > td:nth-child(2) > table > tbody > tr:first-child {
    position: relative;
    padding-top: 22px;
    border-top: 1px solid var(--gr-rand);
}
.vkne-seite .vkne-rahmen > tbody > tr > td:nth-child(2) > table > tbody > tr:first-child::before { background: var(--gr-blau); }
.vkne-seite .vkne-rahmen > tbody > tr > td:nth-child(2) > table > tbody > tr:has(+ tr input[name=f2ert]) { border-bottom: 1px solid var(--gr-rand); }
/* Knopfzeile (Berechnen, Netto-Ertrag, Verkauf melden): flach im Rahmen */
.vkne-seite .vkne-rahmen > tbody > tr > td:nth-child(2) > table > tbody > tr:has(input[name=f2ert]),
.vkne-seite .vkne-rahmen > tbody > tr > td:nth-child(2) > table > tbody > tr:has(input[name=f2ert]) ~ tr {
    border: 0;
    background: none;
    padding-left: 0;
    padding-right: 0;
}
/* Eingabefelder bleiben weiss */
.vkne-seite .vkne-rahmen :is(input[type=text], input:not([type]), select, textarea) { background-color: #fff; }
/* ev_detailfoto: grosses Bild in 1280x960 - so breit wie moeglich, aber ganz im Fenster */
.vw-galerie .vw-hauptbild { width: auto; max-width: min(100%, 1280px); max-height: calc(100vh - 300px); min-height: 240px; }
/* ev_detail: Hauptbild ist ein Link auf die Fotoseite */
.dt-hauptbild a { display: block; cursor: zoom-in; }
.dt-werte[hidden] { display: none; }   /* Details (ev_detail) per Knopf ausgeblendet */
.pv-tabelle .pv-zurueck { margin-top: 4px; padding: 3px 8px; font-size: 11px; white-space: nowrap; }   /* ProvID 3 -> 2 (ev_provision, P2) */
.dt-nummer.dt-fehlt { font-size: 13px; font-weight: normal; }
.dt-seite:has(.dt-fehlt) { display: block; }   /* nur Hinweis "nicht vorhanden": kein leeres Kachelraster */
/* Provisionsarchiv nach Verkaeufern (ev_provision.php, auswahl=Archiv) */
.pv-archivgruppen { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px 14px; align-items: start; }
.pv-vk { border: 1px solid #E1E6EA; border-radius: 8px; background: #fff; }
.pv-vk > summary { display: flex; align-items: baseline; gap: 8px; padding: 9px 12px; cursor: pointer; list-style: none; }
.pv-vk > summary::-webkit-details-marker { display: none; }
.pv-vk > summary::before { content: '\25B8'; color: #8A96A0; }
.pv-vk[open] > summary::before { content: '\25BE'; }
.pv-vk-name { flex: 1; font-weight: bold; color: #1B1F23; }
.pv-vk > summary small { color: #8A96A0; white-space: nowrap; }
.pv-vk[open] { grid-column: 1 / -1; }
.pv-vk .pv-archiv { padding: 4px 10px 10px; border-top: 1px solid #EEF1F4; }

/* =====================================================================
 * Detailseite kompakt (01.10.2026): die Seite soll auf grossen
 * Bildschirmen moeglichst ohne Scrollen auskommen.
 * - Wertepaare (Technik, Sonstiges, Hauspreis): Bezeichnung und Wert in
 *   einer Zeile statt untereinander; breite Werte ueber zwei Spalten.
 * - Ausstattung: Kategorien als farbige Kennung im Textfluss, Merkmale
 *   mit Trennpunkt statt einzelner Chips in Spalten.
 * --------------------------------------------------------------------- */
.dt-seite .dt-werte {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 3px 16px;
}
/* passt der Wert nicht neben die Bezeichnung, rutscht er darunter
   (statt zeichenweise umzubrechen) */
.dt-seite .dt-werte > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.dt-seite .dt-werte dt { flex: 0 0 auto; white-space: nowrap; }
.dt-seite .dt-werte dd { min-width: 0; overflow-wrap: break-word; }
/* Verbrauchswerte (kurz): enger nebeneinander */
.dt-seite .dt-unter + .dt-werte { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.dt-seite .dt-werte dd small { font-size: 11px; color: #5A6B78; }
.dt-seite .dt-werte .dt-breit { grid-column: span 2; }
.dt-seite .dt-unter { margin: 8px 0 4px; padding-top: 6px; }

/* Ausstattung: je Kategorie eine Karte (Kopf mit Anzahl, Merkmale als
   dezente Schildchen). Die Karten fliessen in Spalten (column-width), damit
   kurze und lange Kategorien ohne Luecken untereinander stehen. */
.dt-ausst-gruppen { column-width: 220px; column-gap: 8px; }
.dt-ausst-gruppe {
    display: block;
    break-inside: avoid;
    margin: 0 0 8px;
    border: 1px solid color-mix(in srgb, var(--gr-farbe, #8E4DA8) 22%, #fff);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
.dt-ausst-gruppe h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 2px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--gr-farbe, #8E4DA8) 15%, #fff);
    background: color-mix(in srgb, var(--gr-farbe, #8E4DA8) 9%, #fff);
    font: bold 10.5px/1.5 Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gr-farbe, #8E4DA8);
    white-space: nowrap;
}
.dt-ausst-gruppe h3 small {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 8px;
    background: var(--gr-farbe, #8E4DA8);
    font: bold 10px/16px Arial, Helvetica, sans-serif;
    color: #fff;
    text-align: center;
}
.dt-ausst-gruppe .dt-merkmale { display: block; padding: 5px 9px 6px; font-size: 12px; line-height: 1.65; }
.dt-ausst-gruppe .dt-merkmale span {
    display: inline-block;        /* Umbruch zwischen, nie innerhalb der Merkmale */
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 12px;
    color: #1B1F23;
}
.dt-ausst-gruppe .dt-merkmale span:not(:last-child)::after {
    content: "\00B7";
    margin: 0 5px;
    font-weight: bold;
    color: color-mix(in srgb, var(--gr-farbe, #8E4DA8) 55%, #fff);
}
/* Viele Fotos (> 12): kleinere Vorschau, damit die Kachel nicht hoeher
   als noetig wird (bei 1366 px vorher 6 Reihen) */
.dt-thumbs.dt-thumbs-viele { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 5px; }

/* Provisionsberechnung: Safety Car und FD-Praemien nachtraeglich aendern */
.pv-nachtrag { margin-top: 12px; }
.pv-hinweis-klein { margin: 4px 0 0; font-size: 11px; color: #5A6B78; }
/* FD-Praemien wie in ev_vkne.php: gruener Kasten, einspaltig */
.pv-dialog .pv-fd-kasten {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: max-content;
    max-width: calc(100vw - 20px);
    margin: 12vh auto 0;
    padding: 10px 12px 12px;
    border-radius: 10px;
    background: #17D358;
    font: 13px Arial, Helvetica, sans-serif;
    color: #000;
    box-shadow: 0 6px 24px rgba(27, 46, 58, 0.25);
}
.pv-fd-kasten > b { margin-bottom: 4px; font-size: 14px; }
.pv-dialog .pv-fd-kasten label { flex-direction: row; align-items: center; gap: 6px; text-align: left; font-size: 13px; font-weight: normal; color: #1B1F23; cursor: pointer; }   /* statt .pv-dialog label (Spalte) */
.pv-fd-kasten label input { width: 15px; height: 15px; margin: 0; }
.pv-fd-kasten .pv-fd-feld { margin-top: 10px; font-size: 12px; color: #1B1F23; }
.pv-dialog .pv-fd-kasten input[type=text] { box-sizing: border-box; width: 100%; padding: 4px 6px; border: 1px solid #A9BCC8; border-radius: 4px; background: #fff; font: 12px Arial, Helvetica, sans-serif; }
.pv-fd-kasten .pv-fd-summe { display: flex; gap: 6px; align-items: center; }
.pv-dialog .pv-fd-kasten .pv-fd-summe input[type=text] { width: 64px; }
.pv-fd-kasten input[type=button] { padding: 4px 12px; border: 0; border-radius: 4px; background: #1B2E3A; color: #fff; font: bold 12px Arial, Helvetica, sans-serif; cursor: pointer; }

/* Status in Listen als kleiner farbiger Knopf (elv_status_knopf() in ev_layout.php):
   verfuegbar, 24h geparkt, verkauft, bestellt - ev_vkwas, ev_liste, ev_ange, ev_flyau, ev_expaw */
.st-knopf {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 10px;
    font: bold 11px/1.5 Arial, Helvetica, sans-serif;
    color: #fff;
    white-space: nowrap;
    vertical-align: middle;
}
.st-frei     { background: #2E8B57; }
.st-geparkt  { background: #D07A00; }
.st-verkauft { background: #C8373D; }
.st-bestellt { background: #2F6FAB; }
.st-ausgeliefert { background: #6B7C89; }
/* Kundengruppe hinter dem Status (Tooltip) */
.st-gruppe { cursor: help; }
/* Vorlaeufiger Ertrag (Parkliste, Neuwagen/Vorfuehrwagen) mit Erklaerung als Tooltip */
.vw-seite .vorlaeufig { cursor: help; }

/* Trefferliste: sortierbare Spaltenkoepfe (Leistung, Km, GP, NP, Hauspreis) */
.li-seite .li-tabelle th a.li-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.li-seite .li-tabelle th a.li-sort:hover { color: var(--elv-dunkel); text-decoration: underline; }
.li-seite .li-tabelle th a.li-sort.aktiv { color: var(--elv-dunkel); }
.li-seite .li-pfeil { margin-left: 3px; font-size: 9px; opacity: .35; }
.li-seite .li-sort.aktiv .li-pfeil { opacity: 1; }

/* ---- Statistik als Kacheln auf dem Smartphone (ev_vkstat.php, ev_bestat.php) ----
 * Matrix-Tabellen mit .st-kacheln bleiben am Desktop Tabellen; bis 700px wird
 * jede Zeile eine Karte wie in ev_ekstat.php (Kartenansicht von .vw-tabelle):
 *   .st-name   Name/Firma oben ueber die ganze Breite
 *   .st-platz  Platz links ("1."), .st-ort Standort rechts
 *   [data-label]  Kennzahlen mit kleiner Beschriftung, 3 je Zeile
 * Bestandsstatistik (.st-bestand): je Fahrzeugart eine Zwischenzeile
 * (.st-gruppe, am Desktop ausgeblendet) und 4 Werte nebeneinander. */
.vw-seite .st-bestand td.st-gruppe { display: none; }
@media (max-width: 700px) {
    .vw-scroll:has(.st-kacheln) { overflow: visible; border-radius: 0; background: none; box-shadow: none; }
    .vw-seite .st-kacheln,
    .vw-seite .st-kacheln tbody { display: block; width: auto; }
    .vw-seite .st-kacheln thead { display: none; }
    .vw-seite .st-kacheln tbody tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px 10px;
        margin-bottom: 10px;
        padding: 10px 12px;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(27, 46, 58, 0.10), 0 1px 2px rgba(27, 46, 58, 0.06);
    }
    .vw-seite .st-kacheln tbody tr:hover { background: #fff; }
    .vw-seite .st-kacheln tbody tr.vw-summenzeile { background: #FDECEC; }
    .vw-seite .st-kacheln td,
    .vw-seite .st-kacheln tr.vw-summenzeile td {
        display: block;
        position: static;
        min-width: 0;
        padding: 0;
        border: 0;
        background: none;
        text-align: left;
        white-space: normal;
        font-size: 13px;
        overflow-wrap: break-word;
    }
    .vw-seite .st-kacheln td:empty { display: none; }
    .vw-seite .st-kacheln td.vw-start { border-left: 0; }
    /* Tabelle ohne Standortspalte (Nach Standorten): Platz vor dem Namen */
    .vw-seite .st-kacheln tr:not(:has(td.st-ort)) td.st-platz { grid-row: 1; grid-column: 1; font-size: 14px; }
    .vw-seite .st-kacheln tr:not(:has(td.st-ort)) td.st-platz:not(:empty) + td.st-name { padding-left: 2.2em; }
    .vw-seite .st-kacheln td.st-name  { grid-column: 1 / -1; grid-row: 1; font-size: 14px; font-weight: bold; line-height: 1.3; }
    .vw-seite .st-kacheln td.st-platz { grid-column: 1; grid-row: 2; font-weight: bold; }
    .vw-seite .st-kacheln td.st-platz::after { content: "."; }
    .vw-seite .st-kacheln td.st-ort   { grid-column: 2 / -1; grid-row: 2; justify-self: end; text-align: right; font-weight: bold; }
    .vw-seite .st-kacheln td[data-label] {
        padding-top: 6px;
        border-top: 1px solid #EEF1F4;
        font-size: 12px;
    }
    .vw-seite .st-kacheln td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #8A96A0;
    }
    .vw-seite .st-kacheln tr.vw-summenzeile td[data-label] { border-top-color: #F3C4C6; font-weight: bold; }
    /* Bestandsstatistik: Fahrzeugart als Zwischenzeile, darunter 4 Werte */
    .vw-seite .st-bestand tbody tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .vw-seite .st-bestand td.st-gruppe {
        display: block;
        grid-column: 1 / -1;
        margin-top: 8px;
        padding: 3px 8px;
        border-radius: 4px;
        background: #E9EEF2;
        font-size: 11px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--elv-dunkel);
    }
    .vw-seite .st-bestand tr.vw-summenzeile td.st-gruppe { background: #F8D7D8; }
    .vw-seite .st-bestand td[data-label] { border-top: 0; padding-top: 2px; }
    .vw-seite .st-bestand .vw-anteil { display: block; }
}

/* Startseite (ev_start.php): Kachel "Marken" hellgrau (wie die Zahlen-Streifen),
   die Karten darin weiss. Auch die Karten in "Aktuelle Listen", "Weitere
   Links" und "Verkaeuferforum" weiss - deren Kachel behaelt ihre Gruppenfarbe.
   Steht am Dateiende, damit es die Gruppenfarbe (gr-weiss) ueberschreibt. */
.st-seite .st-kachel:has(> .st-marken) { background: #F4F6F8; }
.st-seite :is(.st-marke, .st-karte, .st-beitrag) { background: #fff; }   /* auch die Beitraege im Verkaeuferforum */

/* =====================================================================
 * Fahrzeug-Detailseite (ev_detail.php): gedeckte Farben fuer Verkaufsmeldung
 * und Fahrzeugsuche/Standortaenderung; verkaufte Fahrzeuge kompakt
 * ===================================================================== */
/* Verkaufsmeldung: Flaeche gedaempft (verfuegbar gruen, reserviert/geparkt sand, verkauft/bestellt rosa) */
.dt-status:has(> table[bgcolor="#CCFFCC" i]) { background-color: #E7F1EA; }
.dt-status:has(> table[bgcolor="#FFFFCC" i]) { background-color: #F5F0DD; }
.dt-status:has(> table[bgcolor="#FFCCCC" i]) { background-color: #F4E6E6; }
.dt-statusknopf.dt-st-1 { background: #C4585C; color: #fff; }
.dt-statusknopf.dt-st-2 { background: #E2C45F; color: #3A3320; }
.dt-statusknopf.dt-st-3 { background: #5A9A72; color: #fff; }
.dt-statusknopf { box-shadow: none; }

/* Knopfreihe der Kachel Fahrzeugsuche/Standortaenderung: gedeckte Toene */
.dt-buttons .ibtn-pa   { background: #8A939C; }
.dt-buttons .ibtn-fu   { background: #BF6A64; }
.dt-buttons .ibtn-doc  { background: #5E6A75; }
.dt-buttons .ibtn-doc2 { background: #C48B4C; }
.dt-buttons .ibtn-an   { background: #A39B5A; }
.dt-buttons .ibtn-dm   { background: #4A8E96; }
.dt-buttons .ibtn-vb   { background: #5A81B8; }
.dt-buttons .ibtn-pic  { background: #5E9F6E; }
.dt-buttons .ibtn-lnk  { background: #6FB5A8; }

/* Verkauft/bestellt: Kernzeilen sichtbar, Preise und Ertrag zugeklappt - die Kachel bleibt so hoch wie bei "verfuegbar" */
.dt-status .dt-vkdetails { margin: 6px 0 0; }
.dt-status .dt-vkdetails > summary { cursor: pointer; font: bold 12px Arial, Helvetica, sans-serif; color: #5A6B78; }
.dt-status .dt-vkdetails[open] { max-height: 240px; overflow: auto; }
.dt-status .dt-widerruf { margin-top: 8px; }

/* Fahrzeugliste: ganze Zeile klickbar (ev_liste.php) */
.li-seite .li-tabelle tbody tr[data-href] { cursor: pointer; }
.li-seite .li-tabelle tbody tr[data-href]:focus-visible { outline: 2px solid #2F6FAB; outline-offset: -2px; }
/* Klickbare Tabellenzeilen (assets/zeilenlink.js): Zeiger und Tastaturfokus */
tr[data-href] { cursor: pointer; }
tr[data-href]:focus-visible { outline: 2px solid #2F6FAB; outline-offset: -2px; }

/* ev_detail.php: Technische Daten, Sonstiges und Hauspreis - Bezeichnung und Wert nebeneinander (Paar), so viele Paare pro Zeile
   wie in die Kachel passen (Paar mindestens 300 px; schmale Kacheln wie Hauspreis: ein Paar, breite: zwei oder mehr).
   Alle Listen einer Kachel haben gleich breite Spalten und dieselbe Bezeichnungsbreite (--dt-bez), damit auch die
   getrennten Listen (Verbrauch NEFZ/WLTP, Elektrisch, Detailwerte) bündig unter den Technischen Daten fluchten. */
.dt-seite :is(.dt-technik, .dt-sonstiges, .dt-preis) .dt-werte {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 4px 20px;
}
.dt-seite :is(.dt-technik, .dt-sonstiges, .dt-preis) .dt-werte > div {
    display: grid;
    grid-template-columns: var(--dt-bez, 128px) minmax(0, 1fr);
    column-gap: 10px;
    align-items: baseline;
}
.dt-seite :is(.dt-technik, .dt-sonstiges, .dt-preis) .dt-werte dt { flex: none; white-space: normal; overflow-wrap: break-word; }
.dt-seite :is(.dt-technik, .dt-sonstiges, .dt-preis) .dt-werte dd { min-width: 0; overflow-wrap: break-word; }
/* breite Werte (z. B. Farbe, Preisverlauf): ganze Zeile */
.dt-seite :is(.dt-technik, .dt-sonstiges, .dt-preis) .dt-werte .dt-breit { grid-column: 1 / -1; }
/* Preisverlauf (Auswahlliste) braucht die volle Kachelbreite: Bezeichnung darueber, Liste darunter in ganzer Breite */
.dt-seite :is(.dt-technik, .dt-sonstiges, .dt-preis) .dt-werte .dt-breit { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
.dt-seite :is(.dt-technik, .dt-sonstiges, .dt-preis) .dt-werte dd select { width: 100%; box-sizing: border-box; font-size: 12px !important; }

/* Sitzungs-Countdown in der Kopfzeile */
.elv-sitzung {
    margin-left: auto;
    margin-right: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    font: 12px/1.4 Arial, Helvetica, sans-serif;
    font-variant-numeric: tabular-nums;
    color: var(--elv-text-hell);
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid currentColor;
    opacity: .85;
}
.elv-sitzung::before { content: "Sitzung\00a0"; }
.elv-hinweise + .elv-sitzung { margin-left: 0; }
.elv-sitzung + .elv-kopf-info { margin-left: 0; }
.elv-sitzung-knapp { color: #b3261e; font-weight: bold; opacity: 1; }
.elv-sitzung-aus { color: #fff; background: #b3261e; border-color: #b3261e; opacity: 1; }
@media (max-width: 520px) { .elv-sitzung::before { content: ""; } .elv-sitzung { margin-right: 4px; } }

/* Rechte Kopfzeilen-Gruppe: Hinweise, Sitzungs-Countdown, Benutzer */
.elv-kopf-rechts {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.elv-kopf-rechts > * { margin-left: 0; margin-right: 0; }

/* Imitation (ev_imitieren.php): Banner im Seitenkopf */
.elv-imit { display: flex; align-items: center; gap: 8px; background: #B3261E; color: #fff; padding: 4px 10px; border-radius: 4px; font-size: 13px; font-weight: 600; }
.elv-imit button { background: #fff; color: #B3261E; border: 0; border-radius: 3px; padding: 3px 8px; font-weight: 600; cursor: pointer; }

/* ev_admin.php: Aktionsknoepfe der Dump-Liste umbrechen in der Kartenansicht (Smartphone); vorher liefen sie aus der Karte */
@media (max-width: 700px) {
    .vw-seite .vw-tabelle td.vw-dump-aktionen { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
    .vw-dump-aktionen form { margin: 0; }
}

/* ev_vkwas.php: Schnellwahl "Aktueller Tag / Monat / Jahr" als einzelne, abgesetzte Knoepfe neben Vortag/Folgetag */
.vw-tag a.vw-tag-schnell { background: #fff; border: 1px solid #C5CED5; box-shadow: 0 1px 1px rgba(27, 46, 58, 0.08); font-size: 13px; }
.vw-tag a.vw-tag-schnell:hover { background: #D5DCE1; border-color: #9FB0BC; text-decoration: none; }
.vw-tag a.vw-tag-schnell { margin-left: 4px; }
@media (max-width: 700px) { .vw-tag { flex-wrap: wrap; gap: 6px; } .vw-tag a.vw-tag-schnell { margin-left: 0; } }