/* ============================================================
   Kundenapp – Gestaltung (mobil zuerst, groß und gut lesbar)
   ============================================================ */

/* ---------------------------------------------------------------------
   FARBEN
   ---------------------------------------------------------------------
   Alle Flächen, Linien und Meldungsfarben stehen hier unter einem
   Namen. Vorher standen sie überall einzeln im Text – eine Umstellung
   hätte hundert Stellen bedeutet, und man hätte welche übersehen.

   Beide Apps laufen dunkel. Der Werkstattbereich setzt in admin.css
   nur noch um, was dort wirklich anders ist: dichtere Abstände und
   eine eigene Kopf- und Navigationsleiste.
   ------------------------------------------------------------------ */
:root {
    /* Blau als FLÄCHE (Knöpfe) muss dunkel genug für weiße Schrift
       sein, Blau als TEXT (Verweise) hell genug, um sich vom
       Hintergrund abzuheben. Deshalb zwei Namen. */
    --blau:        #2f6fe0;
    --blau-d:      #2559b8;
    --blau-text:   #7cb2ff;
    --blau-bg:     #13233a;
    --orange:      #f29f05;
    --rot:         #d64550;
    --gruen:       #3fae70;
    --radius:      12px;

    --grau:        #0b0e13;   /* Seitenfläche                        */
    --kopf-bg:     #11161d;   /* Kopfleiste                          */
    --nav-bg:      #151a22;   /* Navigationsleiste darunter          */
    --karte:       #151a22;   /* Karten, eine Spur heller            */
    --karte-rand:  #242b36;   /* Kante statt Schatten                */
    --linie:       #242b36;   /* Trennlinien                         */
    --linie-hell:  #1b212a;   /* sehr leise Flächen                  */
    --feld:        #0f141b;   /* Eingabefelder                       */
    --feld-rand:   #333c49;
    --text:        #e4e9f0;
    --text-leise:  #95a0ae;   /* Nebentext                           */
    --grau-knopf:  #333c49;

    /* Schatten wirken auf Dunklem wie Schmutz. Der Name bleibt, damit
       die Regeln weiter unten unverändert stehen bleiben können. */
    --schatten:    none;

    --ok-bg:       #10261b;  --ok-rand:     #1f5137;  --ok-text:     #55d18c;
    --warn-bg:     #2a2210;  --warn-rand:   #4d3f16;  --warn-text:   #e8b44a;
    --fehler-bg:   #2b1418;  --fehler-rand: #5a2329;  --fehler-text: #ff8a8a;

    /* Damit auch Auswahllisten, Bildlaufleisten und die Rechtschreib-
       hilfe des Browsers dunkel erscheinen. */
    color-scheme: dark;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--grau);
    color: var(--text);
    font-size: 16px;
    line-height: 1.5;
    min-height: 100vh;
}

/* ---------- Kopfzeile ---------- */
/* Die Kopfleiste war ein kräftig blauer Balken. Auf fast schwarzem
   Grund ist das der lauteste Fleck auf dem Bildschirm – jetzt eine
   ruhige dunkle Leiste mit einer Kante darunter. */
.kopf {
    background: var(--kopf-bg);
    color: var(--text);
    border-bottom: 1px solid var(--karte-rand);
    padding-top: env(safe-area-inset-top);
}
.kopf-innen {
    max-width: 60rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 1rem;
}
.logo { font-size: 1.15rem; }
.app-name { font-weight: 600; flex: 1; font-size: .95rem; }

/* ---------------------------------------------------------------------
   NAVIGATIONSLEISTE
   ---------------------------------------------------------------------
   Beide Apps benutzen dieselbe: eine dünne Leiste unter der Kopfzeile,
   Symbol über dem Wort. Die Kunden-App hatte stattdessen sechs große
   Kacheln – die füllten den halben Bildschirm, waren aber nur ein
   Menü. Als Leiste kostet dasselbe Menü eine Zeile, und man kommt aus
   jeder Ansicht überallhin, statt erst zurück zur Übersicht zu müssen.
   ------------------------------------------------------------------ */
.app-nav {
    background: var(--nav-bg);
    overflow-x: auto;
    white-space: nowrap;
    /* Die Leiste lässt sich wischen – der Balken dazu stört nur. */
    scrollbar-width: none;
}
.app-nav::-webkit-scrollbar { display: none; }
.app-nav a {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .5rem .7rem;
    color: var(--text-leise);
    text-decoration: none;
    font-size: .72rem;
    font-weight: 500;
}
.app-nav svg {
    width: 1.25rem; height: 1.25rem;
    stroke: currentColor; stroke-width: 1.7;
    fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.app-nav a.aktiv { color: #fff; box-shadow: inset 0 -2px 0 var(--orange); }

/* Kleine Zahl am Menüpunkt, sobald dort etwas offen ist */
.zaehler {
    display: inline-block;
    min-width: 1.25rem;
    padding: 0 .35rem;
    border-radius: 99px;
    background: var(--orange);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
}
/* In der Leiste sitzt der Zähler oben rechts am Symbol, nicht daneben –
   sonst würde er die Spalte auseinanderziehen. */
.app-nav .zaehler {
    position: absolute;
    top: .2rem; right: .15rem;
    min-width: 1.05rem; line-height: 1.05rem; font-size: .66rem;
}
.app-nav .zaehler.warn { background: var(--rot); }

/* ---------- Karten & Layout ---------- */
main { max-width: 60rem; margin: 0 auto; padding: .7rem; }

.karte {
    background: var(--karte);
    border: 1px solid var(--karte-rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 1rem;
    margin: .7rem auto;
}
.schmal { max-width: 26rem; }
.mitte  { text-align: center; }
.versteckt { display: none !important; }

h1 { font-size: 1.15rem; margin: 0 0 .7rem; }
h2 { font-size: 1.02rem; }

/* ---------- Formulare ---------- */
label { display: block; margin-bottom: .7rem; font-weight: 500; }
input {
    display: block;
    width: 100%;
    margin-top: .35rem;
    padding: .6rem .7rem;
    font-size: 1rem;
    border: 1px solid var(--feld-rand);
    border-radius: 10px;
    background: var(--feld);
}
input:focus { outline: 2px solid var(--blau-text); border-color: var(--blau-text); }

/* Wichtig: Die Regel oben würde sonst auch versteckte Felder sichtbar
   machen (z. B. die Datei-Auswahl hinter den Upload-Knöpfen). */
[hidden] { display: none !important; }

.code-feld { text-align: center; letter-spacing: .5rem; font-size: 1.6rem; }

/* ---------- Knöpfe ---------- */
.knopf {
    display: inline-block;
    background: var(--blau);
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: .6rem 1.1rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.knopf:active { background: var(--blau-d); }
.knopf.breit { width: 100%; }
.knopf.klein { padding: .35rem .7rem; font-size: .85rem; }

/* ---------- Meldungen ---------- */
.meldung-fehler {
    background: var(--fehler-bg);
    color: var(--fehler-text);
    border: 1px solid var(--fehler-rand);
    border-radius: 10px;
    padding: .7rem .9rem;
}
.gross-symbol {
    font-size: 2.6rem;
    width: 4.5rem; height: 4.5rem; line-height: 4.5rem;
    border-radius: 50%;
    margin: 0 auto 1rem;
}
.gross-symbol.ok     { background: var(--ok-bg); color: var(--ok-text); }
.gross-symbol.fehler { background: var(--fehler-bg); color: var(--fehler-text); }
.gross-symbol.warn   { background: var(--warn-bg); color: var(--warn-text); }

.verweise { margin-top: 1.2rem; text-align: center; }
.verweise a { color: var(--blau-text); }

.meldung-ok {
    background: var(--ok-bg);
    color: var(--ok-text);
    border: 1px solid var(--ok-rand);
    border-radius: 10px;
    padding: .7rem .9rem;
}

.klein-text { font-size: .9rem; color: var(--text-leise); font-weight: 400; }

/* Zwei Felder nebeneinander (PLZ + Ort) */
.zeile-zwei { display: grid; grid-template-columns: 8rem 1fr; gap: .8rem; }
@media (max-width: 22rem) { .zeile-zwei { grid-template-columns: 1fr; } }

/* Kontrollkästchen "Angemeldet bleiben" */
.haken {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 500;
    margin-bottom: 1rem;
}
.haken input { width: 1.3rem; height: 1.3rem; margin: 0; }

/* Honigtopf: für Menschen unsichtbar, Bots tappen hinein.
   Bewusst NICHT display:none – das durchschauen einfache Bots. */
.honigtopf {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Datenlisten (Beschriftung + Wert) ---------- */
dl.daten { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.2rem; margin: 0 0 1.2rem; }
dl.daten dt { color: var(--text-leise); font-weight: 500; }
dl.daten dd { margin: 0; }
@media (max-width: 30rem) {
    dl.daten { grid-template-columns: 1fr; gap: 0; }
    dl.daten dt { font-size: .85rem; }
    dl.daten dd { margin-bottom: .7rem; }
}

.aktionsleiste { display: flex; flex-wrap: wrap; gap: .6rem; }
.aktionsleiste form { margin: 0; }
.knopf.rot { background: var(--rot); }

/* Auswahllisten und mehrzeilige Felder wie Eingabefelder gestalten */
select, textarea {
    display: block;
    width: 100%;
    margin-top: .35rem;
    padding: .6rem .7rem;
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid var(--feld-rand);
    border-radius: 10px;
    background: var(--feld);
}
select:focus, textarea:focus { outline: 2px solid var(--blau-text); border-color: var(--blau-text); }
textarea { resize: vertical; }

/* Statusmarken (auch in der Kunden-App) */
.marke { display: inline-block; padding: .15rem .6rem; border-radius: 99px; font-size: .8rem; font-weight: 600; }
.marke.gruen { background: var(--ok-bg); color: var(--ok-text); }
.marke.gelb  { background: var(--warn-bg); color: var(--warn-text); }
.marke.rot   { background: var(--fehler-bg); color: var(--fehler-text); }
.marke.blau  { background: var(--blau-bg); color: var(--blau-text); }
.marke.grau  { background: var(--linie-hell); color: var(--text-leise); }

.termin-karte .fz-kopf { justify-content: space-between; margin-bottom: .8rem; }

/* ---------- Fahrzeuge ---------- */

.seiten-kopf { display: flex; align-items: center; gap: .8rem; margin: 1rem .2rem; flex-wrap: wrap; }
.seiten-kopf h1 { margin: 0; font-size: 1.3rem; }
.zurueck {
    background: none; border: 0; color: var(--blau-text);
    font-size: 1rem; cursor: pointer; padding: .3rem 0; font-weight: 500;
}

.fahrzeug-karte {
    display: block; width: 100%; text-align: left;
    border: 0; cursor: pointer; font: inherit; color: inherit;
}
.fahrzeug-karte:active { transform: scale(.99); }
.fz-kopf { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .3rem; }
.fz-kopf strong { font-size: 1.1rem; }
.kennzeichen {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    background: var(--linie-hell); border: 1px solid var(--feld-rand); border-radius: 6px;
    padding: .1rem .5rem; font-size: .95rem; letter-spacing: .5px;
}

/* ---------- Fahrzeuge aus der Fakturierung ----------
   Der Vermerk erklärt, warum sich manche Felder nicht ändern lassen.
   Ohne ihn hielte der Kunde die App für kaputt. */
.abzeichen-werkstatt {
    display: inline-block; margin-top: .5rem;
    background: var(--blau-bg); color: var(--blau-text);
    border-radius: 99px; padding: .15rem .6rem;
    font-size: .78rem; font-weight: 600;
}
.hinweis-werkstatt {
    background: var(--blau-bg); color: var(--blau-text);
    border-radius: var(--radius); padding: .7rem .9rem;
    font-size: .9rem; margin-bottom: 1rem;
}
/* Gesperrte Felder sehen aus wie Text, nicht wie eine kaputte Eingabe.
   Wichtig ist der Mauszeiger: Er sagt schon vor dem Antippen, dass es
   hier nichts zu tippen gibt. */
.fz-felder input.fest, .fz-felder select.fest {
    background: var(--linie-hell); color: var(--text-leise);
    cursor: default;
}
.fz-felder input.fest:focus { outline-color: var(--feld-rand); }

/* Bilder */
.bild-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: .8rem;
    margin: 1rem 0;
}
.bild-kachel { margin: 0; position: relative; }
.bild-kachel img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: 10px; background: var(--linie-hell); cursor: zoom-in; display: block;
}
.bild-kachel figcaption { font-size: .8rem; color: var(--text-leise); margin-top: .3rem; text-align: center; }
.bild-weg {
    position: absolute; top: .3rem; right: .3rem;
    width: 1.9rem; height: 1.9rem; border-radius: 50%;
    border: 0; background: rgba(0,0,0,.6); color: #fff;
    font-size: .9rem; cursor: pointer; line-height: 1;
}

.upload-bereich { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }
.datei-knopf { cursor: pointer; }

/* Bild in voller Größe */
.bild-gross {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(0,0,0,.92);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.bild-gross img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bild-zu {
    position: absolute; top: 1rem; right: 1rem;
    width: 2.8rem; height: 2.8rem; border-radius: 50%;
    border: 0; background: rgba(255,255,255,.9); font-size: 1.2rem; cursor: pointer;
}

/* Tabellen im Werkstatt-Bereich */
.tabelle-scroll { overflow-x: auto; }
table.liste { border-collapse: collapse; width: 100%; font-size: .95rem; }
table.liste th, table.liste td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--linie); white-space: nowrap; }
table.liste th { color: var(--text-leise); font-weight: 600; }
.aktionen { display: flex; gap: .4rem; }
.knopf.grau { background: var(--grau-knopf); }

/* ---------- Übersicht ---------- */
.gruss { font-size: 1.1rem; margin: .2rem .2rem .6rem; }

/* Kacheln gibt es nur noch im Werkstattbereich (siehe admin.css).
   In der Kunden-App ist das Menü die Leiste oben. */
.kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .7rem;
}
.kachel {
    background: var(--karte);
    border: 1px solid var(--karte-rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 1.1rem .8rem;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-height: 6rem;
    justify-content: center;
}
.kachel:active { transform: scale(.98); }


/* ============================================================
   CHAT
   ============================================================ */
.chat-seite { display: flex; flex-direction: column; min-height: 60vh; }

.chat-verlauf {
    flex: 1;
    overflow-y: auto;
    max-height: 60vh;
    padding: .3rem .1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.chat-tag {
    align-self: center;
    font-size: .78rem;
    color: var(--text-leise);
    background: var(--linie-hell);
    border-radius: 99px;
    padding: .15rem .8rem;
    margin: .5rem 0 .2rem;
}

.blase {
    max-width: 82%;
    padding: .55rem .8rem;
    border-radius: 1.1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    word-break: break-word;
}
.blase p { margin: 0; white-space: pre-wrap; }
.blase img {
    display: block;
    max-width: 100%;
    border-radius: .7rem;
    margin-bottom: .35rem;
    cursor: zoom-in;
}
.blase.eigen { align-self: flex-end; background: var(--blau); color: #fff; border-bottom-right-radius: .3rem; }
.blase.fremd { align-self: flex-start; background: var(--karte); border-bottom-left-radius: .3rem; }

.blase-fuss {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .25rem;
    font-size: .72rem;
    opacity: .75;
}
.blase.eigen .blase-fuss { justify-content: flex-end; }
.blase-weg {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.blase-weg[disabled] { opacity: .5; cursor: default; }

/* Nachträglich geändert. Bewusst leise: Es soll auffindbar sein, aber
   nicht lauter wirken als die Nachricht selbst. */
.blase-bearbeitet { font-style: italic; opacity: .8; }

/* Die Blase im Schreibmodus. Das Feld füllt sie ganz aus, damit man
   sieht, wie der Text an seinem Platz aussieht. */
.blase-aendern textarea {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 .35rem;
    padding: .4rem .5rem;
    border: 1px solid var(--feld-rand);
    border-radius: .4rem;
    background: var(--feld);
    color: var(--text);
    font: inherit;
    resize: vertical;
}
.blase-aendern .blase-fuss { opacity: 1; }
.blase-speichern { font-weight: 600; }

.chat-eingabe {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    background: var(--karte);
    border-radius: var(--radius);
    padding: .5rem;
    box-shadow: var(--schatten);
    margin: 0;
}
.chat-eingabe textarea {
    flex: 1;
    margin: 0;
    resize: none;
    border-radius: 1.2rem;
    padding: .6rem .9rem;
    min-width: 0;
    max-height: none;
}
.foto-knopf {
    font-size: 1.4rem;
    cursor: pointer;
    padding: .4rem;
    margin: 0;
    line-height: 1;
    user-select: none;
}
.knopf.senden {
    width: 2.9rem;
    height: 2.9rem;
    padding: 0;
    border-radius: 50%;
    font-size: 1.1rem;
    flex: 0 0 auto;
}

/* ============================================================
   NEUIGKEITEN
   ============================================================ */
/* Das Bild geht bewusst bis an den Rand der Karte – deshalb oben
   keine Innenabstand und der Ausgleich über negative Ränder. */
.news-karte { padding-top: 0; overflow: hidden; }
.news-karte img {
    display: block;
    width: calc(100% + 3rem);
    margin: 0 -1.5rem .9rem;
    max-height: 15rem;
    object-fit: cover;
    cursor: zoom-in;
}
.news-karte h2 { margin: .2rem 0 .15rem; font-size: 1.15rem; }
.news-text { white-space: pre-wrap; margin: .5rem 0 0; }

/* Adressen im Fließtext. Es gibt bewusst keine allgemeine Regel für
   „a" in dieser Datei, jeder Bereich färbt seine Verweise selbst –
   ohne diese Zeilen bekämen sie die Voreinstellung des Browsers
   (violett nach dem ersten Klick), und das passt zu nichts.

   Lange Adressen dürfen umbrechen, sonst schieben sie die Karte auf
   dem Handy in die Breite. */
.news-text a, .blase a {
    color: var(--blau-text);
    text-decoration: underline;
    overflow-wrap: anywhere;
}
/* In der eigenen (blauen) Sprechblase wäre Hellblau auf Blau kaum zu
   lesen – dort weiß. */
.blase.eigen a { color: #fff; }

/* ============================================================
   RECHTSTEXTE (Datenschutz, Impressum)
   ============================================================ */
.recht-nav {
    background: var(--linie-hell);
    padding: .1rem .6rem;
    overflow-x: auto;
    white-space: nowrap;
}
.recht-nav a {
    display: inline-block;
    padding: .7rem .9rem;
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
}
.recht-nav a.aktiv { color: var(--blau-text); box-shadow: inset 0 -3px 0 var(--blau-text); }

.rechtstext { max-width: 46rem; line-height: 1.65; }
.rechtstext h1 { margin-top: 0; }
.rechtstext h2 { margin: 2rem 0 .6rem; font-size: 1.2rem; }
.rechtstext h3 { margin: 1.3rem 0 .4rem; font-size: 1.02rem; }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li { margin-bottom: .35rem; }
.rechtstext p.anschrift { background: var(--feld); border-radius: 8px; padding: .8rem 1rem; }

/* Tabellen müssen auf dem Handy scrollen dürfen, nicht die Seite */
.rechtstext table.rechts-tabelle {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    margin: .6rem 0 1rem;
}
.rechts-tabelle th, .rechts-tabelle td {
    border: 1px solid var(--linie);
    padding: .55rem .7rem;
    text-align: left;
    vertical-align: top;
    font-size: .93rem;
    min-width: 11rem;
}
.rechts-tabelle th { background: var(--feld); font-weight: 600; }

/* Pflicht-Häkchen bei der Registrierung */
label.pflicht-haken {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 1rem 0;
    font-size: .93rem;
    font-weight: 400;
    line-height: 1.45;
}
label.pflicht-haken input { width: auto; margin: .15rem 0 0; flex: 0 0 auto; }
label.pflicht-haken a { color: var(--blau-text); }

.app-fuss {
    text-align: center;
    padding: 2rem 1rem 1.5rem;
    font-size: .85rem;
    color: var(--text-leise);
}
.app-fuss a { color: var(--text-leise); }

/* Auskunft „Meine Daten" */
#ansicht-meine-daten h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
#ansicht-meine-daten h3 { font-size: 1rem; margin: 1.4rem 0 .5rem; color: var(--blau-text); }
#ansicht-meine-daten h4 { font-size: .9rem; margin: .8rem 0 .3rem; color: var(--text-leise); font-weight: 600; }
.daten-block {
    border-left: 3px solid var(--linie-hell);
    padding-left: .9rem;
    margin-bottom: 1rem;
}
#md-uebersicht dl.daten dd { word-break: break-word; }
.knopf.grau { background: var(--text-leise); }

/* Lesestatus: nicht nur am Wort, auch am Gewicht erkennbar.
   Bewusst ohne Farbe – die Blasen sind mal weiß, mal blau. */
.status-gelesen { font-weight: 600; opacity: 1; }
.status-offen   { font-weight: 400; opacity: .75; }

/* ---------------------------------------------------------------------
   ÜBERSICHT: „Was gibt's Neues?"
   Drei Zeilen, jede nur da, wenn sie etwas zu sagen hat. Die Zahl in
   der Menüleiste sagt DASS etwas ist, diese Zeile sagt WAS.
   ------------------------------------------------------------------ */
ul.neuliste { list-style: none; padding: 0; margin: 0; }
ul.neuliste li { border-bottom: 1px solid var(--linie); }
ul.neuliste li:last-child { border-bottom: 0; }
ul.neuliste a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .1rem;
    color: var(--text);
    text-decoration: none;
}
.neu-zahl {
    flex: 0 0 auto;
    min-width: 1.7rem;
    padding: .1rem .4rem;
    border-radius: 99px;
    background: var(--orange);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    text-align: center;
}

/* ---------------------------------------------------------------------
   Datumsfeld: tippen ODER Kalender
   Das Textfeld ist das eigentliche Feld; der kleine Kalender daneben
   schreibt nur hinein. Am Handy zwingt ein reines Kalenderfeld sonst
   zum Blättern – für einen Termin in acht Monaten achtmal.
   ------------------------------------------------------------------ */
.datum-zeile { display: flex; gap: .4rem; align-items: stretch; }
.datum-zeile input[type="text"] { flex: 1; }
input.datum-waehler {
    width: 2.9rem;
    flex: 0 0 auto;
    margin-top: .35rem;
    padding: 0;
    /* Nur das Kalendersymbol zeigen, nicht das ganze Datumsfeld. */
    color: transparent;
    background: var(--feld);
}
input.datum-waehler::-webkit-datetime-edit,
input.datum-waehler::-webkit-inner-spin-field,
input.datum-waehler::-webkit-clear-button { display: none; }
input.datum-waehler::-webkit-calendar-picker-indicator {
    opacity: 1; cursor: pointer; width: 100%; padding: 0;
    filter: invert(70%);
}

/* Ein Termin, den der Kunde aus seiner Liste genommen hat – sichtbar
   nur, solange er „Ausgeblendete anzeigen" gewählt hat. */
.karte.ausgeblendet { opacity: .6; }

/* Die Felder des Fahrzeugformulars. Beide Apps bauen es aus derselben
   Liste (kundenapp-app/core/fahrzeugfelder.php) – deshalb sieht es
   auch in beiden gleich aus.

   Absichtlich KEINE eigene Regel für "label" hier: label ist oben schon
   ein Block, und eine zweite Regel würde .haken schlagen – dann stünde
   das Kästchen über seiner Beschriftung statt daneben. */
.fz-felder .zeile-zwei > label { margin-top: 0; }

/* Zahl und Einheit nebeneinander: „[4] [Monate vorher]". Ein Zahlenfeld
   allein sagt nicht, worum es geht. */
.vorlauf-zeile { display: flex; align-items: center; gap: .6rem; margin-top: .35rem; }
.vorlauf-zeile input { width: 5rem; }
.vorlauf-zeile select { width: auto; }
/* Ein Auswahlfeld ist von Haus aus ein paar Pixel höher als ein
   Eingabefeld. Nebeneinander fällt das sofort auf. */
.vorlauf-zeile input, .vorlauf-zeile select { height: 2.75rem; margin: 0; }
.vorlauf-zeile span { font-weight: 400; font-size: .9rem; color: var(--text-leise); }

/* ---------- Bild anhängen: Vorschau, Ziehen, Einfügen ----------
   Wird von BEIDEN Apps benutzt (Kundenapp und Werkstattbereich),
   deshalb steht es hier in der gemeinsamen Datei. */
.bild-vorschau {
    display: flex; align-items: center; gap: .7rem;
    background: var(--linie-hell); border: 1px solid var(--karte-rand);
    border-radius: var(--radius); padding: .5rem .7rem; margin-top: .5rem;
}
.bild-vorschau img {
    width: 56px; height: 56px; object-fit: cover;
    border-radius: 8px; flex: 0 0 auto;
}
.bild-vorschau .be-name {
    flex: 1 1 auto; font-size: .85rem; color: var(--text-leise);
    overflow-wrap: anywhere;
}
.bild-vorschau .be-weg {
    flex: 0 0 auto; background: none; border: 0; cursor: pointer;
    color: var(--text-leise); font-size: 1.4rem; line-height: 1;
    padding: 0 .3rem;
}
.bild-vorschau .be-weg:hover { color: var(--rot); }

/* Während eine Datei über dem Feld schwebt. Der gestrichelte Rahmen
   sagt "hier kannst du loslassen" - ohne ihn rät man. */
.be-bereit {
    outline: 2px dashed var(--blau-text);
    outline-offset: 3px; border-radius: var(--radius);
}
.be-meldung { color: var(--warn-text); margin: .4rem 0 0; }

/* Update 51: lange Nachrichten umbrechen; Texteingabe bleibt mobil bedienbar. */
.blase p { overflow-wrap: anywhere; }
.chat-eingabe textarea, .blase-aendern textarea { box-sizing: border-box; overflow-y: auto; }
.chat-eingabe-hilfe { display: block; font-size: .8rem; opacity: .8; margin: .25rem 0; }

/* Update 52: Orientierung im Verlauf und ein erneuter Versuch bei Bildfehlern. */
.chat-neue { align-self: center; margin: .5rem auto; }
.chat-ungelesen { align-self: stretch; text-align: center; font-size: .85rem; font-weight: 600; padding: .4rem; border-top: 1px solid currentColor; color: var(--text); }
.blase img.chat-bild-fehlt { display: none; }
.chat-bild-erneut { white-space: normal; max-width: 100%; }