/* ══════════════════════════════════════════════════════════════════════════
   Auvenda Händlerportal — gemeinsames Design-System
   Grundlage für beide Oberflächen: /haendler/ und /intern/.

   Abgenommen von der Live-Seite auvenda.de (docs/auvenda-live-referenz.html):
   dieselben Farbwerte, dieselben Schriften, dieselben Größenverhältnisse.
   Flächen sind flach — 1px Linie statt Schatten. Dunkler Grund, heller Text.

   Aufbau der Datei
     1. Schriften (lokal, kein Google)
     2. Variablen (Farben, Maße, Schriften)
     3. Grundlagen und Reset
     4. Typografie
     5. Seitengerüst
     6. Kopfleiste
     7. Navigation (Desktop seitlich/oben, Handy unten)
     8. Karten und Fahrzeugkarten
     9. Bildgalerie
    10. Knöpfe und Auswahl-Chips
    11. Formulare
    12. Tabellen (auf dem Handy als Karten)
    13. Nachrichtenverlauf
    14. Zustände: Laden, Leer, Meldung, Abzeichen
    15. Statusfarben
    16. Hilfsklassen

   Alles ist mobil-zuerst geschrieben: die Grundregeln gelten ab 360 px,
   die @media-Blöcke schalten erst nach oben hin um.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1. Schriften ───────────────────────────────────────────────────────────
   Die woff2-Dateien liegen neben dieser Datei in fonts/. Pfade sind relativ
   zur CSS-Datei — sie stimmen darum auch aus /haendler/ und /intern/ heraus. */

@font-face{font-family:'Archivo';src:url('fonts/archivo.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('fonts/plexsans.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('fonts/plexsans-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('fonts/plexmono.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('fonts/plexmono-500.woff2') format('woff2');font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair';src:url('fonts/playfair-italic.woff2') format('woff2');font-weight:700 800;font-style:italic;font-display:swap}


/* ── 2. Variablen ───────────────────────────────────────────────────────── */

:root{
  /* Farben — wortgleich mit der Live-Seite */
  --ink:#0C2740;        /* Seitengrund, dunkelstes Blau */
  --navy:#113A5E;       /* Flächen: Karten, Kopfleiste, Felder */
  --navy-2:#17496F;     /* leicht hellere Fläche, z.B. Eingaben, Chips */
  --line:#1E5A87;       /* jede Trennlinie und jeder Rahmen */
  --orange:#F47B20;     /* Hauptaktion */
  --orange-hi:#FF9642;  /* Aufhellung, Fokusrahmen, Hover */
  --orange-dk:#B85408;  /* gedeckte Kante auf orangen Flächen */
  --sky:#6FB4E4;        /* Kicker, kleine Beschriftungen */
  --sky-2:#9ECDF0;      /* Nebentext */
  --paper:#CDE6F8;      /* Fließtext */
  --white:#F2F9FF;      /* Überschriften, Zahlen */

  /* Markenfarben aus dem Logoblatt vom 17.08.2026. Sie gelten NUR für das
     Zeichen — die Oberfläche bleibt bei Orange als Aktionsfarbe. */
  --lila:#7C3AED;       /* Zeichen auf hellem Grund */
  --lila-hell:#C4A5FF;  /* Zeichen auf dunklem Grund — hier der Regelfall */
  --tinte:#101720;      /* Wortmarke auf hellem Grund, App-Symbol-Kachel */

  /* Ergänzung fürs Portal: Rückmeldefarben, die die Landing-Seite nicht
     braucht (verkauft, abgelehnt, Warnung). Auf die Palette abgestimmt. */
  --gut:#3DBA83;        /* Erfolg, verkauft */
  --gut-bg:rgba(61,186,131,.18);
  --warn:#EDB744;       /* Warnung */
  --warn-bg:rgba(237,183,68,.18);
  --rot:#E26653;        /* Fehler, abgelehnt */
  --rot-bg:rgba(226,102,83,.18);
  --sky-bg:rgba(111,180,228,.18);
  --orange-bg:rgba(244,123,32,.14);

  /* Ueberlagerungen und Sonderfaelle. Stehen hier, damit der Hellmodus sie
     mit umschalten kann - fest eingebaut waeren sie dort dunkle Flecken. */
  --ueberlage-90:rgba(12,39,64,.90);   /* Kopfleiste */
  --ueberlage-94:rgba(12,39,64,.94);   /* untere Leiste am Handy */
  --ueberlage-80:rgba(12,39,64,.80);   /* Galerie-Pfeile */
  --auf-bild:rgba(5,21,38,.72);        /* Plaketten AUF einem Foto - bleiben dunkel */
  --platzhalter:#7FA9C9;               /* Text in leeren Eingabefeldern */
  --linie-hover:#2A6EA0;               /* Rahmen beim Ueberfahren */
  --rot-text:#F5B3A8;                  /* Schrift in Rot, nicht Flaeche */
  --rot-hi:#EB7563;                    /* Gefahrenknopf beim Ueberfahren */
  --schatten:none;                     /* im Dunkeln traegt die Linie, kein Schatten */
  --schleier:rgba(5,21,38,.74);        /* hinter einem Dialog */
  --kopf-intern:rgba(26,30,58,.93);    /* Kopfleiste im Team-Bereich */

  /* Schriften */
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;   /* Überschriften */
  --sans:'Plex Sans','Helvetica Neue',Arial,sans-serif;    /* Fließtext */
  --mono:'Plex Mono',ui-monospace,Menlo,monospace;         /* Zahlen, Kicker */
  --serif:'Playfair',Georgia,serif;                        /* seltener Akzent */

  /* Maße */
  --pad:clamp(16px,4vw,40px);   /* seitlicher Rand des Inhalts */
  --maxw:1180px;                /* Textbreite wie auf der Live-Seite */
  --r-klein:10px;               /* Knöpfe, Eingaben, Chips */
  --r:16px;                     /* Karten */
  --r-gross:24px;               /* große Flächen, Galerie */
  --r-rund:999px;               /* Pillen, Abzeichen */
  --tipp:44px;                  /* kleinstes Tippziel */
  --kopf-h:60px;                /* Höhe der Kopfleiste */
  --nav-h:64px;                 /* Höhe der unteren Leiste auf dem Handy */
  --nav-b:236px;                /* Breite der Seitennavigation am Desktop */
  --l1:8px; --l2:14px; --l3:22px; --l4:34px; --l5:52px;  /* Abstände */
}


/* ── 2b. Helle Fassung ──────────────────────────────────────────────────────
   Umgeschaltet ueber data-thema am <html>. Ohne Angabe entscheidet das
   Betriebssystem (prefers-color-scheme).

   ZUM LESEN: die Variablennamen benennen die ROLLE, nicht die Farbe.
   --ink  = Seitengrund (hier hell)
   --navy = Flaechen wie Karten (hier weiss)
   --white = staerkster Text (hier fast schwarz)
   Das wirkt beim Lesen verkehrt herum, haelt aber die 3000 Zeilen Markup
   unveraendert - jede Regel funktioniert in beiden Fassungen. */

:root[data-thema="hell"]{
  --ink:#EEF4FA;        /* Seitengrund */
  --navy:#FFFFFF;       /* Karten, Kopfleiste, Felder */
  --navy-2:#F2F7FC;     /* leicht abgesetzte Flaeche */
  --line:#CBDCEC;       /* Trennlinien und Rahmen */

  --orange:#B5530A;     /* Hauptaktion. Deutlich dunkler als im Dunkelmodus:
                           auf dem Knopf steht helle Schrift (.knopf.haupt),
                           und weiss auf hellem Orange ist nicht lesbar. */
  --orange-hi:#94430A;
  --orange-dk:#7A360A;

  --sky:#3A6C93;        /* Kicker, kleine Beschriftungen */
  --sky-2:#45749A;      /* Nebentext */
  --paper:#1E3A52;      /* Fliesstext */
  --white:#0A2036;      /* Ueberschriften, Zahlen */

  --lila:#7C3AED;
  --lila-hell:#6D28D9;  /* auf hellem Grund muss das Zeichen dunkler sein */

  --gut:#1B7A4B;
  --gut-bg:rgba(27,122,75,.12);
  --warn:#9A6B08;
  --warn-bg:rgba(154,107,8,.13);
  --rot:#B23B28;
  --rot-bg:rgba(178,59,40,.10);
  --sky-bg:rgba(58,108,147,.10);
  --orange-bg:rgba(181,83,10,.10);

  --ueberlage-90:rgba(255,255,255,.92);
  --ueberlage-94:rgba(255,255,255,.96);
  --ueberlage-80:rgba(255,255,255,.88);
  --auf-bild:rgba(10,32,54,.72);   /* bleibt dunkel: steht auf einem Foto */
  --platzhalter:#547189;
  --linie-hover:#8FB3D0;
  --rot-text:#9C3121;
  --rot-hi:#9C3121;

  /* Auf Weiss traegt eine 1px-Linie zu wenig - eine flache Kante hilft. */
  --schatten:0 1px 2px rgba(10,32,54,.06), 0 1px 8px rgba(10,32,54,.04);
  /* Auf hellem Grund reicht ein leichterer Schleier. */
  --schleier:rgba(10,32,54,.45);
  --kopf-intern:rgba(243,240,255,.95);
}

/* Ohne ausdrueckliche Wahl folgt die Seite dem Betriebssystem. */
@media (prefers-color-scheme: light){
  :root:not([data-thema="dunkel"]){
    --ink:#EEF4FA; --navy:#FFFFFF; --navy-2:#F2F7FC; --line:#CBDCEC;
    --orange:#B5530A; --orange-hi:#94430A; --orange-dk:#7A360A;
    --sky:#3A6C93; --sky-2:#45749A; --paper:#1E3A52; --white:#0A2036;
    --lila:#7C3AED; --lila-hell:#6D28D9;
    --gut:#1B7A4B; --gut-bg:rgba(27,122,75,.12);
    --warn:#9A6B08; --warn-bg:rgba(154,107,8,.13);
    --rot:#B23B28;  --rot-bg:rgba(178,59,40,.10);
    --sky-bg:rgba(58,108,147,.10); --orange-bg:rgba(181,83,10,.10);
    --ueberlage-90:rgba(255,255,255,.92);
    --ueberlage-94:rgba(255,255,255,.96);
    --ueberlage-80:rgba(255,255,255,.88);
    --auf-bild:rgba(10,32,54,.72);
    --platzhalter:#547189; --linie-hover:#8FB3D0;
    --rot-text:#9C3121; --rot-hi:#9C3121;
    --schatten:0 1px 2px rgba(10,32,54,.06), 0 1px 8px rgba(10,32,54,.04);
    --schleier:rgba(10,32,54,.45);
    --kopf-intern:rgba(243,240,255,.95);
  }
}

/* Beim Umschalten nicht hart umspringen. */
body, .karte, .kopf, .nav-seite, .nav-unten, .eingabe, .auswahl, .textfeld,
.knopf, .kennzahl, .fzg-karte{
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
/* Wer das nicht mag oder braucht, bekommt es nicht. */
@media (prefers-reduced-motion: reduce){
  body, .karte, .kopf, .nav-seite, .nav-unten, .eingabe, .auswahl, .textfeld,
  .knopf, .kennzahl, .fzg-karte{ transition:none }
}


/* ── 3. Grundlagen und Reset ────────────────────────────────────────────── */

*{margin:0;padding:0;box-sizing:border-box}

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

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* Sicherung gegen waagerechte Scrollbalken auf schmalen Geräten */
  overflow-x:hidden;
}

img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
hr{border:0;border-top:1px solid var(--line);margin:var(--l3) 0}

/* Fokus muss immer sichtbar sein — Pflicht aus der Spezifikation */
:focus-visible{outline:2px solid var(--orange-hi);outline-offset:3px;border-radius:2px}

/* Scrollleisten im dunklen Grund */
*{scrollbar-color:var(--line) transparent;scrollbar-width:thin}
*::-webkit-scrollbar{height:8px;width:8px}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-rund)}
*::-webkit-scrollbar-track{background:transparent}

/* Markierter Text */
::selection{background:var(--orange);color:var(--ink)}


/* ── 4. Typografie ──────────────────────────────────────────────────────── */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.025em;
  color:var(--white);
}
h1{font-size:clamp(28px,5.4vw,44px);font-weight:800}
h2{font-size:clamp(23px,3.6vw,32px)}
h3{font-size:19px;letter-spacing:-.01em;line-height:1.25}
h4{font-size:16px;letter-spacing:-.005em;line-height:1.3}

/* Kicker: kleine gesperrte Beschriftung über Überschriften und Feldern */
.kicker{
  display:block;
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sky);
  margin-bottom:var(--l2);
}

/* Einleitungstext */
.lede{font-size:clamp(16px,1.6vw,20px);max-width:62ch;color:var(--paper)}

/* Nebentext, kleiner und ruhiger */
.klein{font-size:14.5px;line-height:1.55;color:var(--sky-2)}
.gedaempft{color:var(--sky-2)}
.leise{color:var(--sky)}

/* Zahlen immer in der Mono-Schrift, damit Spalten untereinander stehen */
.zahl{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;color:var(--white)}
.zahl-gross{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.2vw,34px);line-height:1;letter-spacing:-.02em;color:var(--white)}

/* Seltener Akzent, genau wie im Hero der Live-Seite */
.akzent{font-family:var(--serif);font-style:italic;font-weight:700;color:var(--orange-hi);letter-spacing:-.01em}

/* Fließtext-Verknüpfungen */
.link{color:var(--orange-hi);border-bottom:1px solid rgba(255,150,66,.35)}
.link:hover{border-bottom-color:var(--orange-hi)}

/* Beschriftungspaare (Fahrzeugdaten, Stammdaten) */
.daten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--l2) var(--l3)}
.daten-paar{min-width:0}
.daten dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sky);line-height:1.4}
.daten dd{margin-top:3px;font-size:15.5px;color:var(--white);line-height:1.35;overflow-wrap:anywhere}
.daten.eng{grid-template-columns:1fr}
@media(min-width:720px){
  .daten.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
  .daten.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
}


/* ── 5. Seitengerüst ────────────────────────────────────────────────────── */

/* .rahmen umschließt Kopfleiste, Navigation und Inhalt. */
.rahmen{min-height:100dvh;display:flex;flex-direction:column}

/* Innenbreite — überall dieselbe Kante wie auf der Live-Seite */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* Der eigentliche Inhaltsbereich.
   Unten bleibt auf dem Handy Platz für die untere Navigationsleiste. */
.inhalt{
  flex:1 1 auto;
  min-width:0;
  padding-top:var(--l4);
  padding-bottom:calc(var(--nav-h) + var(--l5) + env(safe-area-inset-bottom,0px));
}

/* Abschnitt mit Kicker, Überschrift und Aktionen rechts */
.abschnitt{margin-bottom:var(--l5)}
.abschnitt-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--l2) var(--l3);margin-bottom:var(--l3)}
.abschnitt-kopf .kicker{margin-bottom:6px}
.abschnitt-kopf > div:first-child{min-width:0;flex:1 1 260px}
.abschnitt-kopf .abschnitt-aktionen{display:flex;flex-wrap:wrap;gap:var(--l1)}

/* Trennlinie zwischen zwei Abschnitten */
.abschnitt.mit-linie{border-top:1px solid var(--line);padding-top:var(--l4)}

/* Einfache Raster für Kacheln und Karten */
.gitter{display:grid;gap:var(--l3);grid-template-columns:1fr}
@media(min-width:640px){ .gitter.zwei{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:900px){
  .gitter.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gitter.zwei-drittel{grid-template-columns:2fr 1fr}
}

/* Kennzahlen-Band wie die "facts" auf der Live-Seite:
   1px Fugen, dahinter die Linienfarbe — dadurch wirkt es wie ein Gitter. */
/* Feste Spaltenzahl statt auto-fit: auto-fit richtet sich nach der Breite, nicht
   nach der Anzahl der Kacheln — bei 8 Kacheln in 6 Spalten blieben vier leere
   Zellen, und weil der Container den Linienhintergrund traegt, standen die als
   grosser blauer Block da. Mit 2/3/4 Spalten gehen die vorkommenden Anzahlen
   (2, 3, 4, 8) glatt auf. */
.kennzahlen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media(min-width:560px){ .kennzahlen{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(min-width:900px){ .kennzahlen{grid-template-columns:repeat(4,minmax(0,1fr))} }
/* Anzahlen, die auf 4 Spalten ein Loch liessen, bekommen ihre eigene Aufteilung. */
@media(min-width:560px){
  .kennzahlen:has(.kennzahl:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  .kennzahlen:has(.kennzahl:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .kennzahlen:has(.kennzahl:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .kennzahlen:has(.kennzahl:nth-child(9):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Netz fuer alles Uebrige (5, 7, 10 ...): die letzte Kachel zieht sich bis zum
   Rand. Ist die Reihe ohnehin voll, aendert die Regel nichts. */
.kennzahl:last-child{grid-column-end:-1}
.kennzahl{background:var(--navy);padding:20px 18px}
.kennzahl b{display:block;font-family:var(--display);font-size:clamp(24px,3.2vw,34px);font-weight:700;color:var(--white);letter-spacing:-.02em;line-height:1}
.kennzahl span{display:block;margin-top:8px;font-size:13.5px;color:var(--sky-2);line-height:1.4}


/* ── 6. Kopfleiste ──────────────────────────────────────────────────────── */

.kopf{
  position:sticky;top:0;z-index:50;
  background:var(--ueberlage-90);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.kopf-bar{display:flex;align-items:center;gap:var(--l2);min-height:var(--kopf-h)}

/* Marke links */
.marke{display:flex;align-items:center;gap:10px;min-width:0}
/* Zeichen auf dunklem Grund in Lila hell — Logoblatt vom 17.08.2026. */
.marke-zeichen{width:22px;height:22px;flex:none;color:var(--lila-hell)}
.marke-text{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.15em;color:var(--white);white-space:nowrap}
/* Zusatz hinter der Marke, z.B. "Intern" */
.marke-zusatz{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);border:1px solid var(--line);border-radius:var(--r-rund);padding:2px 8px;white-space:nowrap}

/* Nutzer und Abmelden rechts */
.kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:var(--l2);min-width:0}
.nutzer{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;min-width:0}
.nutzer-name{font-size:14.5px;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw}
.nutzer-rolle{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}
.nutzer-kreis{width:34px;height:34px;flex:none;border-radius:var(--r-rund);border:1px solid var(--line);background:var(--navy-2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--sky-2)}
.abmelden{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:38px;padding:0 14px;
  border:1px solid var(--line);border-radius:var(--r-klein);
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sky-2);background:transparent;
  transition:border-color .18s,color .18s,background .18s;
}
.abmelden:hover{border-color:var(--orange);color:var(--orange-hi);background:var(--orange-bg)}

/* Auf dem Handy klappt die Kopfleiste zusammen:
   Name und Rolle verschwinden, es bleiben Marke, Kreis und Abmelden. */
@media(max-width:599px){
  .kopf-bar{gap:10px}
  .nutzer{display:none}
  .marke-zusatz{display:none}
  /* min-width auf Tippziel-Maß: die Handy-Regel weiter unten hebt nur die
     Höhe an, 38 px Breite blieben sonst unter den geforderten 44 px. */
  .abmelden{min-width:var(--tipp);padding:0 10px}
  .abmelden .abmelden-text{display:none}
}
@media(min-width:600px){
  .nutzer-kreis{order:2}
  .nutzer{order:1}
}
/* Unter 400 px reichte die Kopfleiste exakt bis an den Rand — null Puffer.
   Engere Abstände schaffen rund 14 px Reserve; zusätzlich darf die Zeile
   im Notfall umbrechen, statt seitlich überzustehen. */
@media(max-width:399px){
  .kopf-bar{gap:8px;flex-wrap:wrap;row-gap:0}
  .kopf-rechts{gap:8px}
}


/* ── 7. Navigation ──────────────────────────────────────────────────────── */

/* 7a. Seitliche Navigation (nur Desktop).
       Markup: <aside class="nav-seite"> … <a class="nav-link"> … </aside>
       Sie steht neben .inhalt in einem .mit-nav-Gerüst. */
.nav-seite{display:none}

/* Gerüst mit Seitennavigation. Auf dem Handy ist es einfach eine Spalte mit
   Seitenrand — die Leiste erscheint erst ab 1024 px daneben.
   Hinweis: .inhalt hat selbst keinen seitlichen Rand. Entweder steht es in
   .mit-nav, oder man legt innen ein .wrap hinein. */
.mit-nav{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

@media(min-width:1024px){
  .mit-nav{display:grid;grid-template-columns:var(--nav-b) minmax(0,1fr);gap:var(--l4)}
  .mit-nav > .wrap{max-width:none;margin:0;padding-left:0;padding-right:0}
  .nav-seite{
    display:block;position:sticky;top:calc(var(--kopf-h) + var(--l3));
    align-self:start;padding-top:var(--l4);
  }
  .nav-seite .nav-gruppe{margin-bottom:var(--l3)}
  .nav-seite .nav-gruppe-titel{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);padding:0 12px;margin-bottom:8px;display:block}
  .nav-seite .nav-link{
    display:flex;align-items:center;gap:12px;
    min-height:var(--tipp);padding:0 12px;
    border:1px solid transparent;border-radius:var(--r-klein);
    color:var(--sky-2);font-size:15.5px;
    transition:background .18s,color .18s,border-color .18s;
  }
  .nav-seite .nav-link:hover{background:var(--navy);color:var(--white)}
  .nav-seite .nav-link.ist-aktiv{background:var(--navy);border-color:var(--line);color:var(--white)}
  .nav-seite .nav-link.ist-aktiv .nav-icon{color:var(--orange-hi)}
  .nav-seite .nav-icon{width:20px;height:20px;flex:none;color:var(--sky)}
  .nav-seite .abzeichen{margin-left:auto}
}

/* 7b. Waagerechte Navigation oben (Alternative, z.B. für den internen
       Bereich mit wenigen Reitern). Auf dem Handy waagerecht scrollbar. */
.nav-oben{
  display:flex;gap:4px;overflow-x:auto;
  border-bottom:1px solid var(--line);
  margin-bottom:var(--l4);
  scrollbar-width:none;
}
.nav-oben::-webkit-scrollbar{display:none}
.nav-oben .nav-link{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  min-height:var(--tipp);padding:0 16px;
  border-bottom:2px solid transparent;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sky-2);
  transition:color .18s,border-color .18s;
}
.nav-oben .nav-link:hover{color:var(--white)}
.nav-oben .nav-link.ist-aktiv{color:var(--orange-hi);border-bottom-color:var(--orange)}

/* 7c. Untere Leiste (nur Handy und Tablet).
       Große Tippziele, mindestens 44 px hoch, mit Sicherheitsabstand
       unten für Geräte mit Gestenbalken. */
.nav-unten{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;
  background:var(--ueberlage-94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.nav-unten .nav-link{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:var(--nav-h);padding:8px 4px 6px;
  position:relative;
  color:var(--sky-2);
  transition:color .18s;
}
.nav-unten .nav-icon{width:22px;height:22px;flex:none;color:currentColor}
.nav-unten .nav-text{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.nav-unten .nav-link.ist-aktiv{color:var(--orange-hi)}
/* Aktive Seite bekommt zusätzlich einen Strich oben — nicht nur Farbe */
.nav-unten .nav-link.ist-aktiv::before{content:"";position:absolute;top:0;left:22%;right:22%;height:2px;background:var(--orange)}
/* Zähler am Symbol, z.B. ungelesene Nachrichten */
.nav-unten .abzeichen{position:absolute;top:6px;left:calc(50% + 6px)}

@media(min-width:1024px){
  .nav-unten{display:none}
  .inhalt{padding-bottom:var(--l5)}
}


/* ── 8. Karten ──────────────────────────────────────────────────────────── */

/* Grundkarte: flache Fläche mit Haarlinie, kein Schatten */
.karte{
  background:var(--navy);
  border:1px solid var(--line);
  box-shadow:var(--schatten);
  border-radius:var(--r);
  padding:var(--l3);
  min-width:0;
}
.karte.flach{padding:0;overflow:hidden}
.karte-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:var(--l1) var(--l2);padding-bottom:var(--l2);margin-bottom:var(--l2);border-bottom:1px solid var(--line)}
.karte-kopf h3,.karte-kopf h4{min-width:0;flex:1 1 auto}
.karte-koerper{min-width:0}
.karte-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:var(--l1) var(--l2);padding-top:var(--l2);margin-top:var(--l3);border-top:1px solid var(--line)}
/* Hervorgehobene Karte, z.B. ein Hinweis mit Handlungsbedarf */
.karte.betont{border-color:var(--orange-dk);background:var(--orange-bg)}

/* Fahrzeugkarte -------------------------------------------------------- */
.fzg-gitter{display:grid;gap:var(--l3);grid-template-columns:1fr}
@media(min-width:640px){ .fzg-gitter{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:1180px){ .fzg-gitter.drei{grid-template-columns:repeat(3,minmax(0,1fr))} }

.fzg-karte{
  display:flex;flex-direction:column;min-width:0;
  background:var(--navy);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  transition:border-color .18s;
}
.fzg-karte:hover{border-color:var(--sky)}

/* Bildfläche mit festem Verhältnis, damit die Karten gleich hoch starten */
.fzg-bild{position:relative;aspect-ratio:4/3;background:var(--navy-2);border-bottom:1px solid var(--line);overflow:hidden}
.fzg-bild img{width:100%;height:100%;object-fit:cover}
/* Statusfahne oben links im Bild */
.fzg-fahne{position:absolute;top:10px;left:10px;z-index:2}
/* Bildzähler unten rechts, z.B. "8 Fotos" */
.fzg-bildzahl{position:absolute;bottom:10px;right:10px;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--white);background:var(--auf-bild);border:1px solid var(--line);border-radius:var(--r-rund);padding:3px 9px}

.fzg-koerper{padding:var(--l3);display:flex;flex-direction:column;gap:var(--l2);flex:1 1 auto;min-width:0}
.fzg-titel{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.2;letter-spacing:-.015em;color:var(--white);overflow-wrap:anywhere}
.fzg-unterzeile{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sky);margin-top:-6px}
.fzg-text{font-size:15px;line-height:1.5;color:var(--sky-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Preisblock — hebt sich als eigene Fläche ab */
.fzg-preis{display:flex;align-items:baseline;justify-content:space-between;gap:var(--l2);padding:var(--l2) 14px;background:var(--navy-2);border:1px solid var(--line);border-radius:var(--r-klein)}
.fzg-preis-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}
.fzg-preis-wert{font-family:var(--display);font-weight:700;font-size:25px;letter-spacing:-.02em;line-height:1;color:var(--white);white-space:nowrap}
/* Interner Einkaufspreis — nur im internen Bereich sichtbar */
.fzg-preis.intern{border-color:var(--orange-dk);background:var(--orange-bg)}
.fzg-preis.intern .fzg-preis-wert{color:var(--orange-hi)}

/* Knopfleiste am Fuß der Karte */
.fzg-knoepfe{display:flex;flex-wrap:wrap;gap:var(--l1);margin-top:auto;padding-top:var(--l1)}
.fzg-knoepfe > *{flex:1 1 auto}

/* Waagerechte Variante für Listen (ab Tablet Bild links, Text rechts) */
@media(min-width:720px){
  .fzg-karte.quer{flex-direction:row}
  .fzg-karte.quer .fzg-bild{width:36%;flex:none;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line)}
  .fzg-karte.quer .fzg-koerper{flex:1 1 auto}
}


/* ── 9. Bildgalerie ─────────────────────────────────────────────────────── */

/* Bühne: waagerechter Streifen mit Einrastpunkten. Auf dem Handy wischt
   man einfach durch, am Desktop führen die Pfeile oder die Vorschau. */
.galerie{min-width:0}
.galerie-buehne{
  position:relative;
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  border:1px solid var(--line);
  border-radius:var(--r-gross);
  background:var(--navy-2);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.galerie-buehne::-webkit-scrollbar{display:none}
.galerie-bild{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:4/3;min-width:0}
.galerie-bild img{width:100%;height:100%;object-fit:cover}

/* Pfeile — auf dem Handy ausgeblendet, dort wird gewischt */
.galerie-pfeil{
  display:none;
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  background:var(--ueberlage-80);
  border:1px solid var(--line);
  border-radius:var(--r-rund);
  color:var(--white);
  transition:border-color .18s,background .18s;
}
.galerie-pfeil:hover{border-color:var(--orange);background:var(--ueberlage-94);color:var(--orange-hi)}
.galerie-pfeil.links{left:12px}
.galerie-pfeil.rechts{right:12px}
.galerie-huelle{position:relative;min-width:0}
@media(min-width:720px){ .galerie-pfeil{display:flex} }

/* Zähler "3 / 8" über dem Bild */
.galerie-zaehler{position:absolute;right:12px;bottom:12px;z-index:3;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--white);background:var(--auf-bild);border:1px solid var(--line);border-radius:var(--r-rund);padding:4px 10px}

/* Vorschaustreifen darunter, ebenfalls wischbar */
.galerie-streifen{display:flex;gap:8px;overflow-x:auto;padding:var(--l2) 0 4px;scrollbar-width:none}
.galerie-streifen::-webkit-scrollbar{display:none}
.galerie-vorschau{
  flex:0 0 auto;width:84px;aspect-ratio:4/3;
  border:1px solid var(--line);border-radius:var(--r-klein);
  overflow:hidden;background:var(--navy-2);
  opacity:.62;transition:opacity .18s,border-color .18s;
}
.galerie-vorschau img{width:100%;height:100%;object-fit:cover}
.galerie-vorschau:hover{opacity:1}
.galerie-vorschau.ist-aktiv{opacity:1;border-color:var(--orange)}
@media(min-width:720px){ .galerie-vorschau{width:104px} }


/* ── 10. Knöpfe und Chips ───────────────────────────────────────────────── */

.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--tipp);padding:0 22px;
  border:1px solid var(--orange);border-radius:var(--r-klein);
  font-family:var(--mono);font-size:13px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  text-align:center;white-space:nowrap;
  transition:background .18s,color .18s,border-color .18s;
}
.knopf svg{width:18px;height:18px;flex:none}

/* Hauptaktion: gefüllt orange */
.knopf.haupt{background:var(--orange);border-color:var(--orange);color:var(--ink);font-weight:600}
.knopf.haupt:hover{background:var(--orange-hi);border-color:var(--orange-hi)}

/* Zweitaktion: durchsichtig mit Linie */
.knopf.zweit{background:transparent;border-color:var(--line);color:var(--orange-hi)}
.knopf.zweit:hover{border-color:var(--orange);background:var(--orange-bg)}

/* Ruhige Zweitaktion ohne Orangeton — für Nebensächliches */
.knopf.still{background:transparent;border-color:var(--line);color:var(--sky-2)}
.knopf.still:hover{border-color:var(--sky);color:var(--white)}

/* Gefahr: löschen, ablehnen, zurückziehen */
.knopf.gefahr{background:transparent;border-color:var(--rot);color:var(--rot-text)}
.knopf.gefahr:hover{background:var(--rot-bg);color:#FFC4B9}
.knopf.gefahr.voll-gefuellt{background:var(--rot);border-color:var(--rot);color:#FFF1EE}
.knopf.gefahr.voll-gefuellt:hover{background:var(--rot-hi)}

/* Größen und Breiten */
.knopf.klein{min-height:38px;padding:0 14px;font-size:11.5px}
.knopf.gross{min-height:52px;padding:0 30px;font-size:14px}
.knopf.voll{width:100%}
.knopf.nur-symbol{padding:0;width:var(--tipp);min-width:var(--tipp)}

/* Gesperrt */
.knopf[disabled],.knopf.ist-gesperrt{opacity:.42;pointer-events:none}

/* Knopfleiste — bricht auf dem Handy sauber um */
.knopfleiste{display:flex;flex-wrap:wrap;gap:var(--l1)}
@media(max-width:479px){
  .knopfleiste.gestapelt{flex-direction:column}
  .knopfleiste.gestapelt .knopf{width:100%}
}

/* Auswahl-Chips: kaufen · reservieren · merken · ablehnen -------------- */
.chip-reihe{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tipp);padding:0 16px;
  background:var(--navy-2);
  border:1px solid var(--line);border-radius:var(--r-rund);
  font-family:var(--mono);font-size:12.5px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--sky-2);white-space:nowrap;
  transition:border-color .18s,background .18s,color .18s;
}
.chip:hover{border-color:var(--sky);color:var(--white)}
.chip svg{width:17px;height:17px;flex:none}
/* Der aktive Zustand bekommt zusätzlich einen Haken — Farbe allein reicht
   nicht, das muss auch ohne Farbwahrnehmung erkennbar sein. */
.chip.ist-aktiv::before{content:"✓";font-size:14px;line-height:1;font-weight:600}
.chip.ist-aktiv{font-weight:600}

.chip-kaufen.ist-aktiv{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.chip-reservieren.ist-aktiv{background:var(--orange-bg);border-color:var(--orange);color:var(--orange-hi)}
.chip-merken.ist-aktiv{background:var(--sky-bg);border-color:var(--sky);color:var(--white)}
.chip-ablehnen.ist-aktiv{background:var(--rot-bg);border-color:var(--rot);color:var(--rot-text)}

/* Filter-Chips (kleiner, ohne Haken) für Listenfilter */
.chip.filter{min-height:36px;padding:0 13px;font-size:11.5px}
.chip.filter.ist-aktiv{background:var(--navy);border-color:var(--sky);color:var(--white)}
.chip.filter.ist-aktiv::before{content:none}
.chip .chip-zahl{font-variant-numeric:tabular-nums;opacity:.75}


/* ── 11. Formulare ──────────────────────────────────────────────────────── */

.formular{display:grid;gap:var(--l3);grid-template-columns:1fr}
@media(min-width:720px){
  .formular.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feld.voll{grid-column:1/-1}
}

.feld{display:flex;flex-direction:column;gap:7px;min-width:0}
.feld-label{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}
.feld-label .pflicht{color:var(--orange-hi);margin-left:4px}
.feld-hinweis{font-size:13.5px;line-height:1.45;color:var(--sky-2)}

.eingabe,.auswahl,.textfeld{
  width:100%;min-height:var(--tipp);
  padding:11px 14px;
  background:var(--navy-2);
  border:1px solid var(--line);border-radius:var(--r-klein);
  color:var(--white);font-size:16px;line-height:1.4;
  transition:border-color .18s,background .18s;
}
.eingabe::placeholder,.textfeld::placeholder{color:var(--platzhalter)}
.eingabe:hover,.auswahl:hover,.textfeld:hover{border-color:var(--linie-hover)}
.eingabe:focus,.auswahl:focus,.textfeld:focus{border-color:var(--orange);background:var(--navy);outline:none}
.eingabe:focus-visible,.auswahl:focus-visible,.textfeld:focus-visible{outline:2px solid var(--orange-hi);outline-offset:2px}
.eingabe[disabled],.auswahl[disabled],.textfeld[disabled]{opacity:.5;cursor:not-allowed}
.textfeld{min-height:120px;resize:vertical;font-family:var(--sans)}
/* Zahleneingaben in Mono, damit Beträge lesbar bleiben */
.eingabe.zahl-feld{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Auswahlliste: eigener Pfeil, damit sie im dunklen Grund nicht hell aufblitzt */
.auswahl{
  appearance:none;-webkit-appearance:none;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%234B9BD4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px 8px;
}
.auswahl option{background:var(--navy);color:var(--white)}
/* Mehrzeilige Auswahl (size="8" o.ä.) ist ein Listenkasten, kein Klappmenü —
   der eigene Pfeil läge sonst mitten über den Einträgen. */
.auswahl[size]:not([size="1"]){background-image:none;padding-right:14px}

/* Eingabe mit Einheit dahinter, z.B. "€" oder "km" */
.eingabe-gruppe{display:flex;align-items:stretch;min-width:0}
.eingabe-gruppe .eingabe{border-top-right-radius:0;border-bottom-right-radius:0}
.eingabe-einheit{display:flex;align-items:center;padding:0 14px;background:var(--navy);border:1px solid var(--line);border-left:0;border-radius:0 var(--r-klein) var(--r-klein) 0;font-family:var(--mono);font-size:13px;color:var(--sky)}

/* Kästchen und Schalter */
.schalter{display:flex;align-items:flex-start;gap:12px;min-height:var(--tipp);padding:8px 0;cursor:pointer}
.schalter input[type=checkbox],.schalter input[type=radio]{
  appearance:none;-webkit-appearance:none;
  width:22px;height:22px;flex:none;margin-top:2px;
  background:var(--navy-2);border:1px solid var(--line);border-radius:6px;
  transition:background .15s,border-color .15s;
}
.schalter input[type=radio]{border-radius:var(--r-rund)}
.schalter input:checked{background:var(--orange);border-color:var(--orange)}
.schalter input[type=checkbox]:checked{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5 5.8 10.5 11.5 3.8' fill='none' stroke='%23051526' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:14px;
}
.schalter input[type=radio]:checked{box-shadow:inset 0 0 0 4px var(--navy-2)}
.schalter-text{font-size:15.5px;line-height:1.4;color:var(--paper)}
.schalter-text small{display:block;font-size:13.5px;color:var(--sky-2)}

/* Dateiauswahl: Fläche zum Antippen, auf dem Desktop auch zum Fallenlassen */
.datei{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:112px;padding:var(--l3);text-align:center;
  background:var(--navy-2);
  border:1px dashed var(--line);border-radius:var(--r);
  color:var(--sky-2);cursor:pointer;
  transition:border-color .18s,background .18s,color .18s;
}
.datei:hover,.datei.ist-ueber{border-color:var(--orange);background:var(--orange-bg);color:var(--white)}
.datei svg{width:26px;height:26px;color:var(--sky)}
.datei b{font-family:var(--display);font-weight:700;font-size:16px;color:var(--white)}
.datei small{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sky)}
.datei input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* Liste der gewählten Dateien */
.datei-liste{display:flex;flex-direction:column;gap:6px;margin-top:var(--l2)}
.datei-zeile{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--navy);border:1px solid var(--line);border-radius:var(--r-klein);font-size:14.5px;min-width:0}
.datei-zeile .name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--white)}
.datei-zeile .groesse{font-family:var(--mono);font-size:12px;color:var(--sky)}
.datei-zeile .weg{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-klein);color:var(--sky-2)}
.datei-zeile .weg:hover{background:var(--rot-bg);color:var(--rot-text)}

/* Fehlerzustand eines Feldes */
.feld.hat-fehler .eingabe,
.feld.hat-fehler .auswahl,
.feld.hat-fehler .textfeld{border-color:var(--rot);background:var(--rot-bg)}
.feld-fehler{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--rot-text)}
.feld-fehler::before{content:"!";flex:none;width:16px;height:16px;border-radius:var(--r-rund);background:var(--rot);color:#FFF1EE;font-family:var(--mono);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1}

/* Suchfeld mit Lupe */
.suche{position:relative;min-width:0}
.suche .eingabe{padding-left:42px}
.suche::before{
  content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='6' fill='none' stroke='%234B9BD4' stroke-width='2'/%3E%3Cpath d='M13 13 18 18' stroke='%234B9BD4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
}


/* ── 12. Tabellen ───────────────────────────────────────────────────────── */

/* Hülle sorgt dafür, dass eine breite Tabelle in sich scrollt und nicht
   die ganze Seite verschiebt. */
.tabelle-huelle{width:100%;min-width:0;overflow-x:auto;border-radius:var(--r)}
.tabelle{width:100%;border-collapse:collapse;font-size:15px}
.tabelle th{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sky);
  text-align:left;padding:10px 14px;white-space:nowrap;
  border-bottom:1px solid var(--line);
}
.tabelle td{padding:13px 14px;border-bottom:1px solid var(--line);color:var(--paper);vertical-align:middle}
.tabelle tbody tr:last-child td{border-bottom:0}
.tabelle tbody tr:hover td{background:var(--navy)}
.tabelle .zahl{text-align:right;white-space:nowrap}
.tabelle th.zahl{text-align:right}

/* Ab 720 px normale Tabelle in einer Fläche */
@media(min-width:720px){
  .tabelle{background:var(--navy);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
}

/* Unter 720 px bricht jede Zeile zu einer eigenen kleinen Karte um.
   Jedes <td> braucht dafür data-spalte="Überschrift". */
@media(max-width:719px){
  .tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tabelle,.tabelle tbody,.tabelle tr,.tabelle td{display:block;width:100%}
  .tabelle tr{
    background:var(--navy);border:1px solid var(--line);border-radius:var(--r);
    padding:6px 14px;margin-bottom:var(--l2);
  }
  .tabelle td{
    display:grid;grid-template-columns:minmax(88px,40%) minmax(0,1fr);
    gap:12px;align-items:baseline;justify-items:start;
    padding:9px 0;border-bottom:1px solid var(--line);
  }
  .tabelle tr td:last-child{border-bottom:0}
  .tabelle td::before{
    content:attr(data-spalte);
    font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--sky);
  }
  .tabelle td:empty{display:none}
  .tabelle .zahl{text-align:left}
  .tabelle tbody tr:hover td{background:transparent}
}


/* ── 13. Nachrichtenverlauf ─────────────────────────────────────────────── */

.verlauf{display:flex;flex-direction:column;gap:var(--l2);min-width:0}
/* Scrollender Verlauf mit fester Höhe, z.B. in einer Karte */
.verlauf.rollend{max-height:min(56vh,520px);overflow-y:auto;padding-right:4px}

/* Datumstrenner */
.verlauf-tag{display:flex;align-items:center;gap:12px;margin:var(--l2) 0}
.verlauf-tag::before,.verlauf-tag::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
.verlauf-tag span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);white-space:nowrap}

.blase{
  max-width:min(88%,560px);min-width:0;
  padding:12px 16px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--navy);
  font-size:15.5px;line-height:1.55;
  overflow-wrap:anywhere;
}
/* Fremd = Gegenseite, steht links */
.blase.fremd{align-self:flex-start;border-bottom-left-radius:4px}
/* Eigen = selbst geschrieben, steht rechts */
.blase.eigen{align-self:flex-end;background:var(--orange-bg);border-color:var(--orange-dk);border-bottom-right-radius:4px}
.blase-kopf{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.blase-wer{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--sky)}
.blase.eigen .blase-wer{color:var(--orange-hi)}
.blase-zeit{font-family:var(--mono);font-size:11px;color:#3F76A6;margin-left:auto;white-space:nowrap}
.blase-text{color:var(--paper)}
.blase-text a{color:var(--orange-hi);border-bottom:1px solid rgba(255,150,66,.35)}
/* Anhang in einer Blase */
.blase-anhang{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:7px 12px;background:var(--navy-2);border:1px solid var(--line);border-radius:var(--r-klein);font-family:var(--mono);font-size:12px;color:var(--sky-2)}
/* Bezug auf ein Fahrzeug über der Blase */
.blase-bezug{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sky);margin-bottom:6px}

/* Eingabezeile unter dem Verlauf */
.verlauf-form{display:flex;align-items:flex-end;gap:var(--l1);margin-top:var(--l3);padding-top:var(--l3);border-top:1px solid var(--line)}
.verlauf-form .textfeld{min-height:var(--tipp);max-height:150px}
.verlauf-form .knopf{flex:none}
@media(max-width:479px){
  .verlauf-form .knopf{padding:0;width:var(--tipp);min-width:var(--tipp)}
  .verlauf-form .knopf .knopf-text{display:none}
}


/* ── 14. Zustände ───────────────────────────────────────────────────────── */

/* Ladeanzeige */
.laden{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--l2);padding:var(--l5) var(--l3);text-align:center}
.spinner{
  width:30px;height:30px;flex:none;
  border:2px solid var(--line);border-top-color:var(--orange);
  border-radius:var(--r-rund);
  animation:dreh .8s linear infinite;
}
.spinner.klein{width:18px;height:18px}
@keyframes dreh{to{transform:rotate(360deg)}}
.laden-text{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}

/* Platzhalterflächen, solange Daten unterwegs sind */
.skelett{background:linear-gradient(90deg,var(--navy) 0%,var(--navy-2) 50%,var(--navy) 100%);background-size:220% 100%;border-radius:var(--r-klein);animation:wandern 1.4s ease-in-out infinite}
.skelett.zeile{height:14px;margin-bottom:9px}
.skelett.zeile.kurz{width:52%}
.skelett.bild{aspect-ratio:4/3;border-radius:var(--r)}
@keyframes wandern{0%{background-position:120% 0}100%{background-position:-20% 0}}

/* Leerzustand */
.leer{
  display:flex;flex-direction:column;align-items:center;gap:var(--l2);
  padding:var(--l5) var(--l3);text-align:center;
  border:1px dashed var(--line);border-radius:var(--r);background:var(--navy);
}
.leer-zeichen{width:42px;height:42px;color:var(--sky);opacity:.55}
.leer-titel{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.015em;color:var(--white)}
.leer-text{font-size:15.5px;color:var(--sky-2);max-width:46ch}

/* Meldungen */
.meldung{
  display:flex;align-items:flex-start;gap:12px;
  padding:13px 16px;
  border:1px solid var(--line);border-radius:var(--r-klein);
  background:var(--navy);
  font-size:15.5px;line-height:1.5;
  min-width:0;
}
.meldung + .meldung{margin-top:var(--l1)}
.meldung-zeichen{flex:none;width:20px;height:20px;margin-top:2px}
.meldung-text{min-width:0;overflow-wrap:anywhere}
.meldung-text b{display:block;font-family:var(--display);font-weight:700;font-size:15.5px;color:var(--white);margin-bottom:2px}
.meldung .zu{margin-left:auto;flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-klein);color:var(--sky)}
.meldung .zu:hover{background:var(--navy-2);color:var(--white)}
.meldung.erfolg{border-color:var(--gut);background:var(--gut-bg);color:#B9EBD3}
.meldung.erfolg .meldung-zeichen{color:var(--gut)}
.meldung.fehler{border-color:var(--rot);background:var(--rot-bg);color:#F3BCB1}
.meldung.fehler .meldung-zeichen{color:var(--rot)}
.meldung.warnung{border-color:var(--warn);background:var(--warn-bg);color:#F4DDA8}
.meldung.warnung .meldung-zeichen{color:var(--warn)}
.meldung.info{border-color:var(--line);background:var(--sky-bg);color:var(--paper)}
.meldung.info .meldung-zeichen{color:var(--sky)}

/* Zähler-Abzeichen, z.B. ungelesene Nachrichten */
.abzeichen{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;
  background:var(--orange);color:var(--ink);
  border-radius:var(--r-rund);
  font-family:var(--mono);font-size:11px;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;
}
.abzeichen.ruhig{background:var(--navy-2);color:var(--sky-2);border:1px solid var(--line)}
.abzeichen.punkt{min-width:9px;width:9px;height:9px;padding:0}


/* ── 15. Statusfarben ───────────────────────────────────────────────────── */

/* Eine Pille mit Punkt davor. Der Text nennt den Zustand immer im Klartext,
   die Farbe ist nur Zugabe. */
.status{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 11px;
  border:1px solid var(--line);border-radius:var(--r-rund);
  background:var(--navy);
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;line-height:1.6;
}
.status::before{content:"";flex:none;width:7px;height:7px;border-radius:var(--r-rund);background:currentColor}

.status-freigegeben{color:var(--sky-2);border-color:#1D6398;background:var(--sky-bg)}
.status-reserviert{color:var(--orange-hi);border-color:var(--orange-dk);background:var(--orange-bg)}
.status-verkauft{color:#7FDCB2;border-color:var(--gut);background:var(--gut-bg)}
.status-abgelehnt{color:var(--rot-text);border-color:var(--rot);background:var(--rot-bg)}
.status-gemerkt{color:var(--paper);border-color:var(--line);background:var(--navy-2)}
.status-neu{color:var(--ink);border-color:var(--orange);background:var(--orange);font-weight:600}
.status-offen{color:var(--sky);border-color:var(--line);background:var(--navy-2)}

/* Farbige Kante links an einer Karte, passend zum Status */
.kante-freigegeben{border-left:3px solid var(--sky)}
.kante-reserviert{border-left:3px solid var(--orange)}
.kante-verkauft{border-left:3px solid var(--gut)}
.kante-abgelehnt{border-left:3px solid var(--rot)}


/* ── 16. Hilfsklassen ───────────────────────────────────────────────────── */

.reihe{display:flex;flex-wrap:wrap;align-items:center;gap:var(--l2);min-width:0}
.reihe-eng{display:flex;flex-wrap:wrap;align-items:center;gap:var(--l1);min-width:0}
.spalte{display:flex;flex-direction:column;gap:var(--l2);min-width:0}
.schieber{margin-left:auto}
.mitte{text-align:center}
.rechts{text-align:right}
.voll-breit{width:100%}
.kein-umbruch{white-space:nowrap}
.abstand-oben{margin-top:var(--l3)}
.abstand-unten{margin-bottom:var(--l3)}
.abstand-oben-gross{margin-top:var(--l5)}

/* Nur für Vorlesegeräte sichtbar */
.nur-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Sichtbarkeit nach Bildschirmbreite */
/* revert statt initial: initial bedeutet display:inline und macht aus
   <th>/<td>/<div> ein Inline-Element. revert stellt den Vorgabewert des
   Browsers für das jeweilige Element wieder her. */
.nur-handy{display:revert}
.nur-desktop{display:none}
@media(min-width:1024px){
  .nur-handy{display:none}
  .nur-desktop{display:revert}
}
/* In der Karten-Darstellung der Tabelle ist .tabelle td{display:grid}
   stärker als .nur-desktop{display:none} — hier nachschärfen. */
@media(max-width:719px){
  .tabelle td.nur-desktop,
  .tabelle th.nur-desktop{display:none}
}

/* Tippziele auf schmalen Bildschirmen.
   Die kleinen Varianten sind für dichte Desktop-Ansichten gedacht — auf dem
   Handy wachsen sie auf die geforderten 44 px. */
@media(max-width:719px){
  .knopf.klein{min-height:var(--tipp);padding:0 16px}
  .chip.filter{min-height:var(--tipp)}
  .abmelden{min-height:var(--tipp)}
  /* Volles Tippziel: 40px war 4px zu knapp, und der Knopf sitzt bei
     Dokumenten direkt neben dem Dateinamen — Fehlgriffe loeschen sonst. */
  .datei-zeile .weg{width:var(--tipp);height:var(--tipp)}
  .meldung .zu{width:var(--tipp);height:var(--tipp)}
}

/* Weniger Bewegung, wenn das Gerät es so verlangt */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  html{scroll-behavior:auto}
}