/* Schriften (23.09.2026): Nunito fuer Ueberschriften, Knoepfe und Navigation,
   Nunito Sans fuer den Text - auf Wunsch des Auftraggebers weich und
   einladend statt kantig. Die Dateien liegen im eigenen Ordner /schriften
   und kommen vom eigenen Server, nicht mehr von Google. Je Schrift zwei
   Teile (lateinisch und erweitert lateinisch, etwa fuer Š oder Ł); der
   Browser laedt den zweiten nur, wenn ein solches Zeichen auf der Seite
   steht. Lizenz: SIL Open Font License, siehe schriften/LIZENZ-*.txt. */
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/schriften/nunito-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/schriften/nunito-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/schriften/nunito-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/schriften/nunito-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Gestaltungsvorgaben an einer Stelle (Abschnitt 9).
   Die dunkle Fassung ist ein TAUSCH DIESER WERTE, kein zweites Gestaltungsbild:
   weiter unten werden nur die Variablen neu belegt, keine einzige Regel doppelt
   geschrieben. */
:root {
  --pinie: #1F4A3D;
  --pinie-dunkel: #17392F;
  --papier: #F2F1EC;
  --papier-hell: #FFFFFF;
  --papier-zart: #FAFAF7;
  --ton: #B4573C;
  --linie: #DFDDD5;
  --linie-fein: #EDEBE4;
  --rahmen-knopf: #C9C6BB;
  --text: #1B211F;
  --text-gedaempft: #3A4541;
  --text-leise: #56645E; /* vorher #62706B: auf den grünlichen Flächen nur 4,4:1 (Messung 21.09.2026) */
  --akzent-flaeche: #E6EDE9;
  --akzent-rahmen: #C6D5CD;
  --akzent-vorne: #1F4A3D;
  --knopf-flaeche: #1F4A3D;
  --knopf-schrift: #FBFCFB;
  --erfolg: #2E8B62;
  --warnung: #93412B;
  --bildgrund: #E5E3DA;
  --fokus: #1F4A3D;
}

/* Dunkler Modus. Greift bei ausdruecklicher Wahl - und bei "system" dann, wenn
   das Geraet dunkel eingestellt ist.
   color-scheme steuert auch Bildlaufleisten und native Bedienelemente: bei
   ausdruecklicher Wahl muss dort "dark" stehen, sonst bleiben sie hell, waehrend
   die Seite dunkel ist. */
:root[data-modus="system"] { color-scheme: light dark; }
:root[data-modus="dunkel"] { color-scheme: dark; }
:root[data-modus="hell"]   { color-scheme: light; }
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--papier); color: var(--text);
  font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.5;
}
h1, h2, h3 { font-family: Nunito, "Nunito Sans", system-ui, sans-serif; font-weight: 500; margin: 0 0 .5rem; }
a { color: var(--pinie); }
.huelle { max-width: 960px; margin: 0 auto; padding: 24px 16px 48px; }
.karte {
  background: var(--papier-hell); border: 1px solid var(--linie);
  padding: 20px 22px; margin-bottom: 20px;
}
.mitte { max-width: 420px; margin: 8vh auto; padding: 0 16px; }
label { display: block; font-size: 13px; font-weight: 700; color: var(--text-leise); margin-bottom: 4px; }
input[type=email], input[type=password], input[type=text] {
  width: 100%; height: 44px; padding: 0 12px; font: inherit;
  border: 1px solid #C3BFB2; background: var(--papier-hell); margin-bottom: 16px;
}
/* Der Fokusrahmen folgt einer eigenen Variable: Pinie auf Pinie-dunkel (Kopf,
   Fuß, Band) war 1,3:1 - wer mit der Tastatur bedient, sah nicht, wo er steht.
   Auf dunklen Flächen und im dunklen Modus wird sie unten neu belegt. */
input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--fokus); outline-offset: 2px;
}
button {
  height: 44px; padding: 0 20px; font: inherit; font-weight: 700; cursor: pointer;
  background: var(--pinie); color: #FBFCFB; border: 1px solid var(--pinie);
}
/* Zweitrangiger Knopf auf hellem Grund. Frueher stand hier dieselbe Klasse wie
   im Kopfband - fast weisse Schrift auf Weiss, also unlesbar. */
button.zweitknopf { background: transparent; color: var(--pinie); border-color: var(--rahmen-knopf);
  height: 34px; padding: 0 12px; font-weight: 600; }
.meldung {
  background: #F7EAE5; border: 1px solid #E3C6BC; color: var(--warnung);
  padding: 12px 14px; margin-bottom: 16px; font-size: 14px;
}
.rollen span {
  display: inline-block; background: #E4EFE9; color: #1F5A45;
  padding: 3px 9px; font-size: 13px; font-weight: 600; margin-right: 6px;
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
td { padding: 9px 0; border-bottom: 1px solid #F0EDE5; vertical-align: top; }
td.zeit { color: var(--text-leise); width: 150px; font-variant-numeric: tabular-nums; }
.leise { color: var(--text-leise); font-size: 14px; }

/* ===== Etappe 2 ===================================================== */

.huelle.breit { max-width: 1180px; }
.kopfzeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.kopfzeile h1 { margin: 0; }
.zurueck { font-size: 14px; }
.klein { font-size: 13px; }
.nurfuervorleser { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* Tabellenzellen halten ihren unsichtbaren Text bei sich: sonst sitzt er in
   einer breiten, seitlich rollbaren Tabelle rechts ausserhalb und macht die
   ganze Seite auf dem Handy breiter (23.09.2026 bei 360 px gesehen). */
th, td, .zaehlpunkt { position: relative; }
.karte.kein-rand { padding: 0; overflow-x: auto; }
.karte.leer { text-align: center; padding: 40px 22px; }
.knopf { display: inline-flex; align-items: center; height: 44px; padding: 0 20px;
  background: var(--pinie); color: #FBFCFB; font-weight: 700; }
.knopf:hover { color: #FBFCFB; background: #2A5749; }
button.voll, .voll { width: 100%; justify-content: center; }
button.gefaehrlich { background: var(--warnung); border-color: var(--warnung); }
.num { font-variant-numeric: tabular-nums; }

/* Zahlenband */
.zahlenband { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.zahl { flex: 1 1 120px; background: var(--papier-hell); border: 1px solid var(--linie);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; color: var(--text); }
.zahl.gewaehlt { border-color: var(--pinie); border-left-width: 3px; background: #F0F3F1; }
.zahl .wert { font-family: Nunito, "Nunito Sans", system-ui, sans-serif; font-size: 26px; font-variant-numeric: tabular-nums; }
.zahl .text { font-size: 13px; color: var(--text-leise); }

.filterzeile { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.filterzeile input[type=search] { flex: 1 1 240px; height: 44px; padding: 0 12px; margin: 0;
  border: 1px solid #C3BFB2; background: var(--papier-hell); font: inherit; }
.filterzeile select { height: 44px; padding: 0 10px; font: inherit; border: 1px solid #C3BFB2; background: var(--papier-hell); }

/* Fahrzeugliste */
.fahrzeugliste { width: 100%; border-collapse: collapse; font-size: 14px; }
.fahrzeugliste th { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--linie);
  font-size: 12.5px; color: var(--text-leise); text-transform: uppercase; letter-spacing: .04em; }
.fahrzeugliste td { padding: 12px 14px; border-bottom: 1px solid #F0EDE5; vertical-align: top; }
.fahrzeugliste tr.hervorgehoben { background: #FAF7EC; }
.fahrzeugliste tr.hervorgehoben td:first-child { box-shadow: inset 3px 0 0 var(--ton); }
.bildspalte { width: 76px; }
.bildspalte img { width: 64px; height: 48px; object-fit: cover; display: block; background: #E5E3DA; }
.kein-bild { display: block; width: 64px; height: 48px; background: #E5E3DA; }
.fahrzeugname { font-weight: 700; }
.hinweisspalte { max-width: 320px; }
.fehlt { color: var(--warnung); font-weight: 700; }

.status { display: inline-block; padding: 3px 9px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.status-entwurf { background: #EEECE4; color: var(--text-leise); }
.status-zur_pruefung { background: #FAF2DC; color: #7F6410; }
.status-verfuegbar { background: #E4EFE9; color: #1F5A45; }
.status-reserviert { background: #F7EFE5; color: #8A5A20; }
.status-verkauft { background: #EDE7E5; color: #7A5C55; }
.status-archiviert { background: #EEECE4; color: #5F5B50; } /* vorher #8A8577: 3,1:1 */

.sprachstand span { display: inline-block; padding: 2px 6px; font-size: 11.5px; font-weight: 700; }
.marke-de { background: #E4EFE9; color: #1F5A45; }
.marke-freigegeben { background: #E4EFE9; color: #1F5A45; }
.marke-veraltet, .marke-fehlt { background: #F7EAE5; color: var(--warnung); }
.marke-entwurf, .marke-zu_pruefen { background: #FAF2DC; color: #7F6410; }

.hinweis { padding: 7px 10px; font-size: 13px; line-height: 1.4; border-left: 3px solid; margin-bottom: 5px; }
.hinweis-hoch { background: #F7EAE5; border-color: var(--warnung); color: #6E2F1E; }
.hinweis-mittel { background: #FAF7EC; border-color: #C8A93C; color: #6B551A; }
.hinweis-niedrig { background: #F1F0EA; border-color: #BDB9AC; color: var(--text-leise); }

/* Inseratsformular */
.formularspalten { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 20px; align-items: start; }
.formularhaupt { min-width: 0; }
.formularspalte { position: sticky; top: 16px; }
.karte h2 { font-size: 20px; display: flex; align-items: center; gap: 10px; }
.karte h3 { font-size: 17px; margin-top: 0; }
.nummer { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  background: var(--pinie); color: #FBFCFB; font-family: Nunito, system-ui, sans-serif; font-size: 14px; font-weight: 700; }
.felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.felder.eng { grid-template-columns: 1fr; }
.feld { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.feld > span { font-size: 13px; font-weight: 700; color: var(--text-leise); }
.feld input, .feld select, .feld textarea { width: 100%; font: inherit; padding: 10px 12px; margin: 0;
  border: 1px solid #C3BFB2; background: var(--papier-hell); }
.feld small { font-size: 12px; color: var(--text-leise); }
.feld.fehlt > span { color: var(--warnung); }
.feld.fehlt input, .feld.fehlt select { border-color: #D9A897; }
.feld.gerechnet input { background: #F1F0EA; color: var(--text-leise); }
.feld.breit2 { grid-column: 1 / -1; }
.feld.haekchen { flex-direction: row; align-items: center; gap: 8px; }
.feld.haekchen input { width: auto; }
.sternchenhinweis { font-size: 13.5px; color: var(--text-leise); background: #F1F0EA; padding: 12px 14px; }
.warnung { background: #FAF7EC; border: 1px solid #E4DBBF; padding: 12px 14px; font-size: 13.5px; margin-bottom: 12px; }
.warnung ul { margin: 6px 0 6px 18px; padding: 0; }
.gut { color: #1F5A45; font-size: 14px; }
.meldung-erfolg { background: #E4EFE9; border-color: #BBD6C8; color: #1F5A45; }
.meldung-fehler { background: #F7EAE5; border-color: #E3C6BC; color: var(--warnung); }
.zustandsform { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.zustandsform input { font: inherit; padding: 8px 10px; border: 1px solid #C3BFB2; }
.gefahrzone summary { cursor: pointer; color: var(--warnung); font-weight: 700; }

/* Bilder im Formular */
.bildgitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
.bildgitter figure { margin: 0; position: relative; border: 1px solid var(--linie); background: var(--papier-hell); }
.bildgitter figure.titelbild { border-color: var(--pinie); border-width: 2px; }
.bildgitter img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.bildgitter figcaption { padding: 5px; }
.bildgitter figcaption form { display: flex; gap: 3px; }
.bildgitter button { height: 28px; padding: 0 7px; font-size: 12px; background: transparent;
  color: var(--text); border: 1px solid var(--linie); font-weight: 400; }
.bildgitter button:disabled { opacity: .35; cursor: default; }
.titelmarke { position: absolute; top: 6px; right: 6px; background: var(--pinie); color: #fff;
  font-size: 11px; font-weight: 700; padding: 2px 6px; }

/* ===== Öffentliche Seiten ========================================== */
body.oeffentlich, body.mitarbeiter { background: var(--papier); }
.kopf { background: var(--pinie-dunkel); color: #DCE6E1; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; }
.kopf a { color: #DCE6E1; }
.kopf .marke { font-family: Nunito, "Nunito Sans", system-ui, sans-serif; font-size: 19px; font-weight: 600; }
.fuss { background: var(--pinie-dunkel); color: #9DB8AC; padding: 24px; margin-top: 40px; font-size: 14px; }
.fuss p { margin: 4px 0; }

.kachelraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.fahrzeugkachel { background: var(--papier-hell); border: 1px solid var(--linie); display: block; color: var(--text); }
.fahrzeugkachel:hover { border-color: var(--pinie); color: var(--text); }
.kachelbild { position: relative; background: #E5E3DA; aspect-ratio: 4/3; }
.kachelbild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kachelbild .kein-bild { width: 100%; height: 100%; }
.statuspunkt { position: absolute; top: 8px; left: 8px; }
.kachelinhalt { padding: 12px 14px; }
.kachelinhalt h3 { font-size: 18px; margin: 0 0 4px; }
.kacheldaten { font-size: 13.5px; color: var(--text-leise); margin: 0 0 6px; line-height: 1.45; }
.kachelverbrauch { font-size: 12.5px; color: var(--text-leise); margin: 0 0 8px; }
.kachelpreis { font-family: Nunito, "Nunito Sans", system-ui, sans-serif; font-size: 22px; margin: 0; }

.fahrzeugseite .galerie { background: #1B211F; }
.grossbild { width: 100%; max-height: 62vh; object-fit: contain; display: block; }
.vorschaustreifen { display: flex; gap: 6px; padding: 8px; overflow-x: auto; align-items: center; }
.vorschaustreifen img { width: 96px; height: 72px; object-fit: cover; flex-shrink: 0; }
.zaehler { color: var(--text-leise); font-size: 13px; flex-shrink: 0; padding-right: 6px; } /* vorher die Fußfarbe #DCE6E1 - auf Weiß unsichtbar (1,3:1) */
.untertitel { color: var(--text-leise); margin-top: -6px; }
.preisblock { display: flex; align-items: baseline; gap: 12px; margin: 12px 0 20px; }
.preis { font-family: Nunito, "Nunito Sans", system-ui, sans-serif; font-size: 34px; }
.preisart { color: var(--text-leise); font-size: 14px; }
.zustandsband { padding: 12px 14px; font-size: 14px; margin-bottom: 16px; }
.zustandsband.reserviert { background: #F7EFE5; color: #8A5A20; }
.zustandsband.verkauft { background: #EDE7E5; color: #7A5C55; }
.gespraech { background: #F0F3F1; }
.fertigefragen { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.fertigefragen span { border: 1px solid var(--pinie); color: var(--pinie); padding: 8px 12px; font-size: 14px; }
.fliesstext { line-height: 1.7; max-width: 62ch; }
.datentabelle { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 0; margin: 0; font-size: 14.5px; }
.datentabelle dt { padding: 9px 0; color: var(--text-leise); border-bottom: 1px solid #F0EDE5; }
.datentabelle dd { padding: 9px 0; margin: 0; border-bottom: 1px solid #F0EDE5; }
.gruppentitel { font-size: 15px; margin: 16px 0 6px; }

@media (max-width: 900px) {
  .formularspalten { grid-template-columns: 1fr; }
  .formularspalte { position: static; }
  .fahrzeugliste { font-size: 13px; }
  .hinweisspalte { max-width: none; }
}

/* ===== Etappe 3 · Einstellungen ====================================== */
.einstellungsraster { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 24px; align-items: start; }
.bereichsnav { background: var(--papier-hell); border: 1px solid var(--linie); position: sticky; top: 16px; }
.bereichsnav a { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 18px; border-top: 1px solid #EAE7DE; color: var(--text-leise); font-size: 14.5px; }
.bereichsnav a:first-child { border-top: 0; }
.bereichsnav a.gewaehlt { background: #F0F3F1; border-left: 3px solid var(--pinie); color: var(--text); font-weight: 700; }
.musterzahl { background: #F0EDE3; color: #7A6520; font-size: 12px; font-weight: 700; padding: 2px 7px; }
.einstellung.ist-muster { border-left: 3px solid #C8A93C; }
.einstellungskopf { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.einstellungskopf h3 { margin: 0; }
.mustermarke { background: #F0EDE3; color: #7A6520; font-size: 12px; font-weight: 700; padding: 2px 8px; }
.einstellung.ist-muster textarea:not(.eigen), .einstellung.ist-muster input:not(.eigen) { color: #7A756A; font-style: italic; }
.einstellung .uebernehmen { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 6px; font-size: 14.5px; cursor: pointer; }
.einstellung .uebernehmen input { width: 20px; height: 20px; margin: 0; font-style: normal; }
.speicherleiste { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.lieferpreistabelle { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 14px; }
.lieferpreistabelle th { text-align: left; padding: 8px 10px 8px 0; font-size: 12.5px; color: var(--text-leise); }
.lieferpreistabelle td { padding: 6px 10px 6px 0; border-top: 1px solid #F0EDE5; }
.lieferpreistabelle input[type=text], .lieferpreistabelle input:not([type]) { width: 110px; padding: 8px 10px; border: 1px solid #C3BFB2; font: inherit; }
.entfernenzeile, .hinzufuegen { border-top: 1px solid #F0EDE5; padding-top: 14px; margin-top: 14px; }
.entfernenzeile { display: flex; gap: 10px; align-items: flex-end; }


/* ===== Dunkler Modus ================================================ */
/* Genau ein Block mit getauschten Werten. Wer eine Farbe aendert, aendert sie
   hier und im hellen Modus - nirgends sonst. */

@media (prefers-color-scheme: dark) {
  :root[data-modus="system"] {
    --papier: #141917;
    --papier-hell: #1C221F;
    --papier-zart: #232A26;
    --linie: #2C3531;
    --linie-fein: #262E2A;
    --rahmen-knopf: #3A453F;
    --text: #ECF0EE;
    --text-gedaempft: #C3CEC9;
    --text-leise: #93A29B;
    --akzent-flaeche: #1B2A24;
    --akzent-rahmen: #2E4A3F;
    --akzent-vorne: #7FC0A5;
    --knopf-flaeche: #7FC0A5;
    --knopf-schrift: #0F1613;
    --erfolg: #5FCB98;
    --bildgrund: #262E2A;
    --fokus: #7FC0A5;
    /* Das gruene Band der Kopfzeile bleibt dunkel - es wird NICHT hell.
       Sonst kippt die ganze Seite. */
  }
}

:root[data-modus="dunkel"] {
  --papier: #141917;
  --papier-hell: #1C221F;
  --papier-zart: #232A26;
  --linie: #2C3531;
  --linie-fein: #262E2A;
  --rahmen-knopf: #3A453F;
  --text: #ECF0EE;
  --text-gedaempft: #C3CEC9;
  --text-leise: #93A29B;
  --akzent-flaeche: #1B2A24;
  --akzent-rahmen: #2E4A3F;
  --akzent-vorne: #7FC0A5;
  --knopf-flaeche: #7FC0A5;
  --knopf-schrift: #0F1613;
  --erfolg: #5FCB98;
  --bildgrund: #262E2A;
  --fokus: #7FC0A5;
}

/* Die oeffentlichen Seiten folgen den Variablen. Der Mitarbeiterbereich hat
   laut Auftrag eine eigene, feste Farbgebung und bleibt hell. */
body.oeffentlich, body.mitarbeiter { background: var(--papier); color: var(--text); }
body.oeffentlich a, body.mitarbeiter a { color: var(--akzent-vorne); }
body.oeffentlich .karte, body.mitarbeiter .karte { background: var(--papier-hell); border-color: var(--linie); }
body.oeffentlich .knopf, body.mitarbeiter .knopf { background: var(--knopf-flaeche); color: var(--knopf-schrift); }
body.oeffentlich .knopf:hover, body.mitarbeiter .knopf:hover { background: var(--knopf-flaeche); color: var(--knopf-schrift); filter: brightness(1.08); }
body.oeffentlich .fahrzeugkachel, body.mitarbeiter .fahrzeugkachel { background: var(--papier-hell); border-color: var(--linie); color: var(--text); }
body.oeffentlich .fahrzeugkachel:hover, body.mitarbeiter .fahrzeugkachel:hover { border-color: var(--akzent-vorne); }
body.oeffentlich .datentabelle dt, body.mitarbeiter .datentabelle dt, body.oeffentlich .datentabelle dd, body.mitarbeiter .datentabelle dd { border-color: var(--linie-fein); }
body.oeffentlich .gespraech, body.mitarbeiter .gespraech { background: var(--akzent-flaeche); }
body.oeffentlich .fertigefragen span, body.mitarbeiter .fertigefragen span { border-color: var(--akzent-rahmen); color: var(--akzent-vorne); }
body.oeffentlich input, body.mitarbeiter input, body.oeffentlich select, body.mitarbeiter select, body.oeffentlich textarea, body.mitarbeiter textarea {
  background: var(--papier-hell); color: var(--text); border-color: var(--rahmen-knopf); }

/* WICHTIG: Auf Fahrzeugbildern liegt in KEINEM Modus ein Filter, keine
   Abdunklung und kein Farbstich. Ein Bild muss im dunklen Modus genauso
   aussehen wie im hellen - sonst zeigt die Seite ein anderes Auto als das,
   das im Hof steht. Nur die Platzhalterflaeche wechselt mit. */
.kachelbild, .kein-bild, .bildspalte img { background: var(--bildgrund); }
.grossbild, .kachelbild img, .vorschaustreifen img { filter: none; opacity: 1; }

/* ===== Etappe 3 · Startseite und Inhaltsseiten ====================== */
.zumInhalt { position: absolute; left: -9999px; top: 0; background: var(--pinie-dunkel);
  color: #fff; padding: 12px 18px; z-index: 10; }
.zumInhalt:focus { left: 0; color: #fff; }
.kopf nav { display: flex; gap: 18px; flex-wrap: wrap; }
.modusform button { height: 36px; padding: 0 12px; background: transparent; color: #DCE6E1;
  border: 1px solid #3B6355; font-weight: 400; font-size: 13.5px; }

.aufmacher { position: relative; }
/* width: 100% ist Pflicht: Ohne feste Breite rechnete der Browser bei min-height
   die BREITE aus dem Seitenverhaeltnis (220 px hoch -> 503 px breit) - auf dem
   Handy schob die Startseite seitlich (Kriterium 1; Bildschirmfoto 21.09.2026). */
.knopf.gross { height: 52px; padding: 0 26px; margin-top: 12px; }
.abschnittstitel { margin-top: 36px; }

.ablauf { list-style: none; padding: 0; margin: 16px 0 40px; display: grid; gap: 16px; }
.ablauf li { display: flex; gap: 16px; align-items: flex-start; }
.ablaufnummer { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center;
  justify-content: center; background: var(--akzent-flaeche); color: var(--akzent-vorne);
  font-family: Nunito, "Nunito Sans", system-ui, sans-serif; font-size: 20px; }
.ablauf h3 { font-size: 18px; margin: 0 0 4px; }
.ablauf p { margin: 0; color: var(--text-leise); }

.fussraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px; max-width: 1180px; margin: 0 auto 20px; }
.fussmarke { font-family: Nunito, "Nunito Sans", system-ui, sans-serif; font-size: 18px; color: #DCE6E1; }
.fusstitel { font-weight: 700; color: #DCE6E1; margin-bottom: 6px; }
.fuss a { color: #BFD3CA; }
/* body.oeffentlich a (weiter unten, dunkler Modus) ist genauer als .fuss a und
   faerbte die Fusslinks im HELLEN Modus dunkelgruen auf dunkelgruen - Impressum,
   Datenschutz, Telefon, E-Mail waren dort kaum lesbar (Bildschirmfoto vom
   21.09.2026). Deshalb hier noch einmal mit derselben Genauigkeit. */
body.oeffentlich .fuss a, body.mitarbeiter .fuss a { color: #BFD3CA; }
.fuss .leise { max-width: 1180px; margin: 0 auto; }

/* Kontakt und Anfragen */
.bezugsfahrzeug { background: var(--akzent-flaeche); padding: 10px 12px; font-size: 14.5px; margin-bottom: 14px; }
.anfrage.erledigt { opacity: .6; }
.anfragekopf { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.anfragetext { white-space: pre-wrap; margin: 10px 0; }

/* Textstände im Inseratsformular */
.textstand { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 6px; margin-left: 6px; }
.textstand-freigegeben { background: #E4EFE9; color: #1F5A45; }
.textstand-veraltet, .textstand-fehlt { background: #F7EAE5; color: #93412B; }
.textstand-entwurf, .textstand-zu_pruefen { background: #F0EDE3; color: #7A6520; }
.textstand.vonhand { background: #E9E6DC; color: #5B5445; }


/* ===== Nachtrag: Lesbarkeit und dunkler Modus ======================== */

/* Fußzeile: --text-leise ist für helle Flächen gedacht. Auf dem dunkelgrünen
   Grund der Fußzeile ergab das ein Kontrastverhältnis von etwa 2,4:1 - zu
   wenig. Hier gilt deshalb ein eigener, heller Ton. */
.fuss .fusszeile { color: #A8BDB3; font-size: 13px; }
.fuss .fusszeile a { color: #CFE0D8; }

/* Farbige Kästen folgen jetzt ebenfalls den Variablen, statt im dunklen Modus
   als helle Inseln stehen zu bleiben. Der Grundsatz aus Abschnitt 9 lautet
   "derselbe Entwurf mit getauschten Werten" - das gilt auch hier. */
:root {
  --meldung-fehler-flaeche: #F3E5E0;
  --meldung-fehler-text: #93412B;
  --meldung-erfolg-flaeche: #E6EDE9;
  --meldung-erfolg-text: #1F5A45;
  --band-reserviert-flaeche: #F7EFE5;
  --band-reserviert-text: #8A5A20;
  --band-verkauft-flaeche: #EDE7E5;
  --band-verkauft-text: #7A5C55;
}
@media (prefers-color-scheme: dark) {
  :root[data-modus="system"] {
    --meldung-fehler-flaeche: #3A211B;
    --meldung-fehler-text: #F0B4A0;
    --meldung-erfolg-flaeche: #1B2A24;
    --meldung-erfolg-text: #7FC0A5;
    --band-reserviert-flaeche: #332619;
    --band-reserviert-text: #E0BC88;
    --band-verkauft-flaeche: #2A2523;
    --band-verkauft-text: #C7B4AD;
  }
}
:root[data-modus="dunkel"] {
  --meldung-fehler-flaeche: #3A211B;
  --meldung-fehler-text: #F0B4A0;
  --meldung-erfolg-flaeche: #1B2A24;
  --meldung-erfolg-text: #7FC0A5;
  --band-reserviert-flaeche: #332619;
  --band-reserviert-text: #E0BC88;
  --band-verkauft-flaeche: #2A2523;
  --band-verkauft-text: #C7B4AD;
}

body.oeffentlich .meldung, body.mitarbeiter .meldung,
body.oeffentlich .meldung-fehler, body.mitarbeiter .meldung-fehler {
  background: var(--meldung-fehler-flaeche);
  border-color: var(--akzent-rahmen);
  color: var(--meldung-fehler-text);
}
body.oeffentlich .meldung-erfolg, body.mitarbeiter .meldung-erfolg {
  background: var(--meldung-erfolg-flaeche);
  border-color: var(--akzent-rahmen);
  color: var(--meldung-erfolg-text);
}
body.oeffentlich .zustandsband.reserviert, body.mitarbeiter .zustandsband.reserviert {
  background: var(--band-reserviert-flaeche); color: var(--band-reserviert-text);
}
body.oeffentlich .zustandsband.verkauft, body.mitarbeiter .zustandsband.verkauft {
  background: var(--band-verkauft-flaeche); color: var(--band-verkauft-text);
}
body.oeffentlich .statuspunkt.status-reserviert, body.mitarbeiter .statuspunkt.status-reserviert {
  background: var(--band-reserviert-flaeche); color: var(--band-reserviert-text);
}
body.oeffentlich .statuspunkt.status-verkauft, body.mitarbeiter .statuspunkt.status-verkauft {
  background: var(--band-verkauft-flaeche); color: var(--band-verkauft-text);
}
/* Ein Absendeknopf auf öffentlichen Seiten sieht aus wie der Hauptknopf -
   sonst stehen auf der Kontaktseite zwei verschieden gestaltete Hauptknöpfe. */
body.oeffentlich button[type="submit"], body.mitarbeiter button[type="submit"] {
  background: var(--knopf-flaeche); color: var(--knopf-schrift); border-color: var(--knopf-flaeche);
}

/* Bedienelemente mindestens 44 Pixel hoch (Abschnitt 9). */
body.oeffentlich button, body.mitarbeiter button, body.oeffentlich .knopf, body.mitarbeiter .knopf, body.oeffentlich input, body.mitarbeiter input,
body.oeffentlich select, body.mitarbeiter select { min-height: 44px; }
body.oeffentlich input[type="checkbox"], body.mitarbeiter input[type="checkbox"], body.oeffentlich input[type="radio"], body.mitarbeiter input[type="radio"] { min-height: 0; }

/* ===== Etappe 4 · Fachglossar und Sprachwahl ========================= */
.glossartabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.glossartabelle th { text-align: left; padding: 8px 10px 8px 0; font-size: 12.5px;
  color: var(--text-leise); text-transform: uppercase; letter-spacing: .04em; }
.glossartabelle td { padding: 6px 10px 6px 0; border-top: 1px solid #F0EDE5; vertical-align: middle; }
.glossartabelle input { width: 100%; padding: 8px 10px; border: 1px solid #C3BFB2; font: inherit; }
.glossartabelle .begriff { font-weight: 600; white-space: nowrap; }
.glossartabelle .num { text-align: right; color: var(--text-leise); width: 70px; }
.ohne-uebersetzung { background: #FAF7EC; }
.ohne-uebersetzung .begriff { color: #7A6520; }
.offenmarke { background: #F0EDE3; color: #7A6520; font-weight: 700; padding: 6px 12px; font-size: 13.5px; }
.hinweiskarte p { margin: 0 0 8px; }

/* Sprachwahl - ausgeschriebene Namen, keine Flaggen: Flaggen bezeichnen
   Länder, nicht Sprachen. */
.sprachwahl { display: flex; gap: 6px; align-items: center; }
.sprachwahl button { height: 36px; padding: 0 10px; background: transparent; color: #9DB8AC;
  border: 1px solid transparent; font-weight: 400; font-size: 13.5px; }
.sprachwahl button[aria-current="true"] { color: #DCE6E1; font-weight: 700; border-color: #3B6355; }
.kopfrechts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nicht-uebersetzt { font-size: 11px; font-weight: 700; padding: 1px 5px; margin-left: 6px;
  background: var(--papier-zart); color: var(--text-leise); border: 1px solid var(--linie); }

/* ===== Etappe 5 · Livechat ============================================ */

/* Wie überall hier: nur Variablen, kein zweites Gestaltungsbild für den
   dunklen Modus. Die einzige Ausnahme ist die interne Notiz - die muss GELB
   bleiben, weil ihre Farbe eine Bedeutung trägt und keine Gestaltung ist. */

.huelle.schmal { max-width: 680px; }
.dringend { color: var(--warnung); font-weight: 700; }
.meldung-hinweis { background: #FAF7EC; border-color: #E4DBBF; color: #7A6112; }
.abstand { margin-top: 14px; }

/* Kleine Zahl neben "Chat" im Band - wie viele warten. */
.zaehlpunkt {
  display: inline-block; min-width: 19px; padding: 1px 6px; margin-left: 5px;
  background: var(--ton); color: #FFF; font-size: 12px; font-weight: 700;
  border-radius: 10px; text-align: center; line-height: 1.5;
}

/* --- Der Verlauf ---------------------------------------------------- */

.verlauf {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 55vh; overflow-y: auto; padding: 4px 2px; margin-bottom: 16px;
}
.nachricht { max-width: 82%; padding: 9px 13px; border: 1px solid var(--linie); }
.nachricht .absender {
  margin: 0 0 3px; font-size: 12px; font-weight: 700; color: var(--text-leise);
}
.nachricht .text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.nachricht.von-mir   { align-self: flex-end; background: var(--akzent-flaeche);
                       border-color: var(--akzent-rahmen); }
.nachricht.von-team,
.nachricht.von-kunde { align-self: flex-start; background: var(--papier-hell); }
.chatarbeitsplatz .nachricht.von-team { align-self: flex-end;
                       background: var(--akzent-flaeche); border-color: var(--akzent-rahmen); }

/* INTERNE NOTIZ. Gelb hinterlegt und ausdrücklich beschriftet (Abschnitt 11).
   Diese Farbe wird im dunklen Modus NICHT getauscht: Sie sagt "der Kunde sieht
   das nicht", und diese Aussage darf nicht davon abhängen, wie jemand seinen
   Bildschirm eingestellt hat. */
.nachricht.notiz {
  align-self: stretch; max-width: 100%;
  background: #FBF6DF; border-color: #E0D3A0; color: #4A3D08;
}
.nachricht.notiz .absender { color: #7A6112; }
.notizmarke {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  background: #E8DCA8; color: #4A3D08; font-size: 11px; font-weight: 700;
}
.dateimarke {
  display: inline-block; padding: 1px 7px; margin-right: 6px;
  background: var(--akzent-flaeche); color: var(--akzent-vorne);
  font-size: 11px; font-weight: 700;
}

/* --- Eingabe --------------------------------------------------------- */

.chateingabe { display: flex; gap: 10px; align-items: flex-end; }
.chateingabe .feld { flex: 1; }
.chateingabe textarea { resize: vertical; }
.notizeingabe, .dateieingabe {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linie-fein);
}
.notizeingabe .feld > span { color: #7A6112; }
.notizeingabe textarea { background: #FDFBF1; border-color: #E0D3A0; color: #1B211F; }

/* --- Warteschlange und Bänder ---------------------------------------- */

.warteband { border-left: 3px solid var(--ton); }
.uebernahmeband { border-left: 3px solid var(--erfolg); }
.dienstband { border-left: 3px solid var(--erfolg); }
.dienstband.ausserhalb { border-left-color: var(--text-leise); }
.dienstband p { margin: 0; }
.livemeldung { min-height: 1.2em; }
.wiederab { font-weight: 700; }

.zeitfenster { border: 1px solid var(--linie); padding: 12px 14px; margin: 0 0 14px; }
.zeitfenster legend { font-size: 13px; font-weight: 700; color: var(--text-leise); padding: 0 6px; }
.haken { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; font-weight: 400; }
.haken input { width: auto; }

/* --- Mitarbeiterseite ------------------------------------------------ */

.chatspalten { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.kontextspalte .karte { margin-bottom: 16px; }
.kontextspalte h2 { font-size: 16px; }
.gespraechsliste, .meldungsliste, .bausteinliste { list-style: none; margin: 0; padding: 0; }
.gespraechsliste li { padding: 8px 0; border-bottom: 1px solid var(--linie-fein);
  display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.gespraechsliste.fremd li { color: var(--text-leise); }
.meldungsliste li { padding: 12px 0; border-bottom: 1px solid var(--linie-fein); }
.notiztext { margin: 6px 0; white-space: pre-wrap; }
.bausteinliste li { margin-bottom: 6px; }
.liste th { text-align: left; font-size: 13px; color: var(--text-leise); padding: 6px 0;
  border-bottom: 1px solid var(--linie); }
.liste tr.erster td { background: var(--akzent-flaeche); }
.knopf.klein, button.klein { height: 34px; padding: 0 12px; font-size: 14px; }
.knopf.gefahr, button.gefahr { background: var(--warnung); border-color: var(--warnung); color: #FFF; }
.karte.gefahr { border-color: #E3C6BC; }

.marke-chat-wartet      { background: #FAF2DC; color: #7F6410; }
.marke-chat-laeuft      { background: #E4EFE9; color: #1F5A45; }
.marke-chat-beendet     { background: var(--linie-fein); color: var(--text-leise); }
.marke-chat-verfuegbar  { background: #E4EFE9; color: #1F5A45; }
.marke-chat-reserviert  { background: #FAF2DC; color: #8A6D14; }
.marke-chat-verkauft    { background: #F7EAE5; color: var(--warnung); }
.marke-reservierung     { background: #FAF2DC; color: #7F6410; }
.marke-preisfrage       { background: #E6EDE9; color: #1F4A3D; }
.marke-rueckruf         { background: #E6EDE9; color: #1F4A3D; }

/* Eine Zeile vom System ("wir konnten nicht übernehmen"): sichtbar anders als
   das Team, aber ohne Alarmfarbe - es ist eine Auskunft, kein Fehler. */
.nachricht.von-system { align-self: stretch; max-width: 100%; text-align: center;
  background: transparent; border-style: dashed; color: var(--text-leise); font-size: 14px; }
.nachricht.von-system .absender { display: none; }

/* Der Kunde beendet sein Gespräch: klein, unter dem Eingabefeld, kein Hauptknopf. */
.chatbeenden { display: flex; gap: 10px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--linie-fein); }

/* Textbausteine: aufklappbar, damit der Text ohne JavaScript lesbar bleibt. */
.bausteineintrag summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.bausteintext { margin: 4px 0 8px; white-space: pre-wrap; color: var(--text-leise); }

/* Ein Knopf neben Text in einer Listenzeile. */
form.inline { display: inline; margin: 0; }

@media (max-width: 900px) {
  .chatspalten { grid-template-columns: 1fr; }
  .nachricht { max-width: 92%; }
}

/* ===== Etappe 6: Kaufanfrage und WhatsApp-Vorlagen ==================== */

/* Das Kaufanfrage-Formular: sechs Abschnitte, ein normaler Absendeknopf. */
.kaufanfrage fieldset { border: 0; padding: 0; margin: 0 0 26px; min-width: 0; }
.kaufanfrage legend { font-family: Nunito, "Nunito Sans", system-ui, sans-serif; font-size: 21px; margin-bottom: 12px;
  padding: 0; display: flex; align-items: center; gap: 10px; }
.kaufanfrage textarea { resize: vertical; }
.kaufanfrage input[type=file] { padding: 8px; font-size: 13.5px; }
.wahlen { display: flex; flex-direction: column; gap: 8px; }
.wahl { display: flex; align-items: center; gap: 10px; font-weight: 400; font-size: 15px; color: var(--text);
  border: 1px solid var(--linie); padding: 10px 12px; cursor: pointer; }
.wahl input { width: auto; margin: 0; }
.absendezeile { border-top: 1px solid var(--linie-fein); padding-top: 16px; }
.absendezeile p { margin: 0 0 8px; }
.fehltzeile { color: var(--text-leise); }
.fehltzeile.dringend { color: var(--warnung); font-weight: 700; }
.fehltliste { padding-left: 20px; }
.fehltliste li { margin-bottom: 4px; }

/* Die Verwaltung der Kaufanfragen. */
.reiter { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 1px solid var(--linie); }
.reiter a { padding: 8px 14px; font-weight: 600; color: var(--text-leise); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.reiter a[aria-current=page] { color: var(--pinie); border-bottom-color: var(--pinie); }
.kaufanfragenliste td { vertical-align: top; padding: 10px 8px; border-top: 1px solid var(--linie-fein); font-size: 14px; }
.kaufanfragenliste th { padding: 8px; }
.kaufanfragenliste tr.alt td:first-child { box-shadow: inset 3px 0 0 var(--warnung); }
.kaufanfragenliste tr.alt td { background: #FBF3F0; }
/* Kein allgemeines .marke: Die Klasse traegt auch der Firmenname im Seitenkopf (.kopf .marke). */
.kaufanfragenliste .marke-de, .kaufanfragenliste .marke-veraltet, .kopfzeile .marke-de, .kopfzeile .marke-veraltet,
.marke-status-offen, .marke-status-abgeschlossen, .marke-status-abgesagt {
  display: inline-block; padding: 2px 7px; font-size: 11.5px; font-weight: 700; vertical-align: middle; }
.marke-status-offen         { background: #FAF2DC; color: #7F6410; }
.marke-status-abgeschlossen { background: #E4EFE9; color: #1F5A45; }
.marke-status-abgesagt      { background: var(--linie-fein); color: var(--text-leise); }
.telefonat { border-left: 4px solid var(--pinie); }
.telefonatliste { margin: 0; padding-left: 22px; }
.telefonatliste li { margin-bottom: 8px; line-height: 1.4; }
.statusknoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.unterlagenkacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.unterlagenkachel { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px;
  border: 1px solid var(--linie); background: var(--papier-hell); color: var(--text); }
.unterlagenkachel:hover { border-color: var(--pinie); }
.kachelart { font-weight: 700; color: var(--pinie); }
.kachelname { font-size: 14px; word-break: break-all; }
.kachelvermerk { color: var(--text-leise); margin-top: 4px; }
.fahrzeugbild { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; margin-bottom: 10px; }
.knopf.zweit { background: transparent; color: var(--pinie); border: 1px solid var(--pinie); }
.knopf.zweit:hover { background: var(--akzent-flaeche, #F0F3F1); color: var(--pinie); }
.knopf[disabled], .knopf[aria-disabled=true] { background: #D9D6CC; border-color: #D9D6CC; color: #7A756A; cursor: not-allowed; }
.reservieren summary { list-style: none; display: inline-flex; cursor: pointer; }
.reservieren summary::-webkit-details-marker { display: none; }

/* „Per WhatsApp": Knopf, Auswahlliste, Vorschau - alles ohne JavaScript. */
.whatsappblock { border-left: 4px solid #1F8A5A; }
.whatsappauswahl > summary { list-style: none; cursor: pointer; background: #1B7A50; border-color: #1B7A50; } /* vorher #1F8A5A: 4,2:1 mit weißer Schrift */
.whatsappauswahl > summary::-webkit-details-marker { display: none; }
.whatsappauswahl > summary:hover { background: #177249; }
.vorlagenauswahl { list-style: none; margin: 8px 0 0; padding: 0; }
.vorlagenauswahl li { border-top: 1px solid var(--linie-fein); padding: 6px 0; }
.vorlagenauswahl li.ohnetext { padding-top: 10px; font-size: 14px; }
.vorlagenwahl summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.vorschau { white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 14px; line-height: 1.5;
  background: #F1F0EA; padding: 10px 12px; margin: 6px 0 10px; border-left: 3px solid #1F8A5A; }
.vorlagenwahl .knopf { margin-bottom: 8px; }

/* Die Vorlagenverwaltung. */
.platzhalterliste code { display: inline-block; background: #F1F0EA; padding: 2px 7px; margin: 2px 4px 2px 0; font-size: 13px; }
.vorlagenform .einstellungskopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.vorlagenform h2 { flex-wrap: wrap; }
.reihenfolgeknoepfe { display: flex; gap: 6px; }
.reihenfolgeknoepfe button { min-width: 40px; }
.reihenfolgeknoepfe button[disabled] { opacity: .35; cursor: default; }
.zaehler { font-weight: 400; margin-left: 8px; }
.zaehler.dringend { color: var(--warnung); font-weight: 700; }
.vorschau-details { margin: 6px 0 12px; }
.vorschau-details summary { cursor: pointer; color: var(--text-leise); }
.vorlagenform .speicherleiste { margin-bottom: 0; }
.vorlagenform.neu { border-style: dashed; }

/* ---------- Etappe 7: Konten und Rollen ---------- */
.kontenliste td { vertical-align: top; }
.kontenliste tr.gesperrt td { color: var(--text-leise); }
.kontenliste tr.hervorgehoben td { background: var(--meldung-erfolg-flaeche); }
.rollenform { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.haekchen { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.kontenaktionen { white-space: nowrap; }
.kontenaktionen .inline { display: inline-block; margin-right: 6px; }
.passwortsetzen { margin-top: 8px; }
.passwortsetzen summary { cursor: pointer; color: var(--text-leise); }
.passwortsetzen .zustandsform { margin-top: 8px; white-space: normal; max-width: 320px; }
.kontoform { max-width: 520px; }
.kontoform fieldset { border: 1px solid var(--linie); border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; }
.kontoform fieldset .haekchen { display: flex; margin: 6px 0; }

/* ===== Partner und Plattformen (21.09.2026) ============================= */

/* Das Band auf der Startseite: weiße Kacheln in einheitlicher Höhe, die
   Logos darin mittig und mit Luft - jedes Logo bleibt in seinen eigenen
   Farben, deshalb bleibt die Kachel auch im dunklen Modus weiß. Kein Link,
   kein Rahmen um das Logo selbst: ruhig, nicht werblich. */
.partnerband { margin: 40px 0 8px; }
.partnerkacheln {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
}
.partnerkachel {
  background: #FFFFFF; border: 1px solid var(--linie);
  height: 92px; display: flex; align-items: center; justify-content: center; padding: 14px 18px;
}
.partnerkachel img { display: block; max-width: 100%; max-height: 52px; width: auto; height: auto; }
@media (max-width: 480px) {
  .partnerkacheln { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .partnerkachel { height: 76px; padding: 10px 12px; }
  .partnerkachel img { max-height: 40px; }
}

/* Im Fuß noch einmal klein: dieselben weißen Kacheln, ein Drittel so hoch,
   in einer Reihe, die auf dem Handy umbricht. Der Titel wie die anderen
   Fußtitel. */
.fusspartner { max-width: 1180px; margin: 4px auto 18px; }
.fusspartnerreihe { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fusspartnerreihe li {
  background: #FFFFFF; height: 40px; padding: 6px 12px;
  display: flex; align-items: center; justify-content: center;
}
.fusspartnerreihe img { display: block; max-height: 24px; max-width: 110px; width: auto; height: auto; }

/* Zwischentitel in Inhaltsseiten (Impressum, AGB ...): eine Zeile in
   Großbuchstaben wird zur Überschrift - nicht größer als der Fließtext, nur
   abgesetzt; die Großschreibung bleibt so, wie der Text sie liefert. */
.fliesstext .zwischentitel {
  font-family: Nunito, system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  color: var(--text-leise); margin: 28px 0 6px;
}

/* ===== Schmale Bildschirme (Kriterium 1, Breitenprüfung 21.09.2026) ======== */

/* Der Kopf der öffentlichen Seiten umbricht, statt nach rechts hinauszulaufen:
   mit „Musterfahrzeuge GmbH" als Namen war er auf 360 px 408 px breit, und die
   ganze Seite ließ sich seitlich schieben. Die Sprach- und Moduswahl rückt
   dann in eine zweite Zeile nach rechts. */
.kopf { flex-wrap: wrap; row-gap: 6px; column-gap: 16px; }
@media (max-width: 700px) {
  .kopf { padding: 12px 16px; }
  .kopfrechts { margin-left: auto; } /* in der zweiten Zeile nach rechts; auf breiten Bildschirmen bleibt die Aufteilung wie bisher */
}

/* Tabellen im Mitarbeiterbereich sind breiter als ein Handy. Statt die ganze
   Seite zu verschieben, rollt nur die Tabelle in ihrem Kasten seitlich:
   Karten mit einer Tabelle direkt darin (:has, in allen aktuellen Browsern;
   ältere zeigen es wie bisher) und die Rolle um Tabellen ohne Karte. */
.karte:has(> table), .karte:has(> form > table) { overflow-x: auto; }
.tabellenrolle { overflow-x: auto; }
/* Die Einstellungsseite: Gruppenleiste über den Feldern statt daneben. (Steht
   hier unten, weil die Grundregel weiter oben sonst gewinnt.) */
@media (max-width: 900px) { .einstellungsraster { grid-template-columns: minmax(0, 1fr); } }

/* Links im dunkelgrünen Kopf: Die allgemeine Linkfarbe (Pinie) stand dort auf
   Pinie-dunkel - 1,27:1, unlesbar. Im öffentlichen Kopf greift zusätzlich
   body.oeffentlich a, deshalb dort mit derselben Genauigkeit. (Kontrastmessung
   in Chromium, 21.09.2026 - bis dahin hatte niemand die Seiten im Browser gesehen.) */
body.oeffentlich .kopf a, body.mitarbeiter .kopf a { color: #DCE6E1; }
body.oeffentlich .kopf a:hover, body.mitarbeiter .kopf a:hover { color: #FFFFFF; }

/* Weitere Befunde der Kontrastmessung vom 21.09.2026 */
/* „Sperren" in der Kontenliste: zweitknopf setzt Pinie als Schrift, gefaehrlich
   Warnrot als Fläche - Pinie auf Rot war 1,4:1. Der gefährliche Zweitknopf ist
   deshalb hell mit roter Schrift und rotem Rand. */
button.zweitknopf.gefaehrlich { background: transparent; color: var(--warnung); border-color: var(--warnung); }
/* Der Hinweis „Diese Dateien konnten wir nicht übernehmen" auf der Bestätigung
   der Kaufanfrage behielt im dunklen Modus seine helle Fläche, bekam aber die
   helle Schrift - 1,1:1. Text darin bleibt dunkel. */
body.oeffentlich .warnung, body.mitarbeiter .warnung { color: #1B211F; }

/* Der Bildzähler im dunklen Galerieband der Fahrzeugseite bleibt hell (die
   Regel .zaehler weiter oben gilt jetzt für den hellen Grund). */
.vorschaustreifen .zaehler { color: #DCE6E1; }
/* Fokusrahmen auf den dunkelgrünen Flächen: hell, sonst unsichtbar. */
.kopf :focus-visible, .fuss :focus-visible { outline-color: #DCE6E1; }
/* „Mitarbeiterzugang" in der Fußzeile behält seinen etwas helleren Ton. */
body.oeffentlich .fuss .fusszeile a, body.mitarbeiter .fuss .fusszeile a { color: #CFE0D8; }

/* ===== Gestaltung 2 (21.09.2026): klassisches Autohaus ================== */
/* Entscheidung des Auftraggebers nach dem ersten Blick auf die laufende
   Testumgebung: Die oeffentlichen Seiten sollen aussehen wie eine klassische
   Autohaus-Website - grosses Foto oben mit Suche, Fahrzeugkacheln, eine
   Navigation aus Knoepfen, ruhige Karten ohne unterstrichene Links, sachliche
   Texte (04-ENTSCHEIDUNGEN.md, "Gestaltung, zweite Fassung").
   Umsetzung: Die Variablen werden fuer die oeffentlichen Seiten UND - seit
   dem 22.09.2026 ("Übrigens soll der Mitarbeiterbereich auch im Design des
   normalen Bereichs sein") - fuer den Mitarbeiterbereich neu belegt; deshalb
   steht hier jede Regel zweimal: fuer body.oeffentlich und body.mitarbeiter
   (bewusst nicht als :is(...) zusammengefasst - aeltere Browser wie Safari
   bis iOS 13 verwerfen eine Regel mit :is() ganz, und die oeffentlichen
   Seiten stuenden dort ohne Gestaltung da). Hell und
   dunkel bleiben ein Variablentausch (der Mitarbeiterbereich bleibt immer
   hell - er traegt kein data-modus). Alles ohne JavaScript. Dieser Block steht bewusst am
   Ende der Datei und ueberschreibt die aelteren Regeln fuer dieselben
   Klassen - die aelteren bleiben stehen, weil der Mitarbeiterbereich
   einige davon (.knopf, .karte, .kachelraster) weiter benutzt. */
body.oeffentlich, body.mitarbeiter {
  --pinie: #0F4C81;
  --pinie-dunkel: #0B2A4A;
  --papier: #F4F6F9;
  --papier-hell: #FFFFFF;
  --papier-zart: #F9FAFC;
  --ton: #B4573C;
  --linie: #DFE5EC;
  --linie-fein: #EBEFF4;
  --rahmen-knopf: #C4CEDA;
  --text: #0F172A;
  --text-gedaempft: #334155;
  --text-leise: #566579; /* auf Weiss 6,1:1, auf --papier 5,6:1 */
  --akzent-flaeche: #E8F0FA;
  --akzent-rahmen: #BDD2EA;
  --akzent-vorne: #0F4C81;
  --knopf-flaeche: #0F4C81;
  --knopf-schrift: #FFFFFF;
  --erfolg: #1E7F4F;
  --warnung: #A8321F;
  --bildgrund: #E4E9F0;
  --fokus: #0F4C81;
  --kopf-hintergrund: #FFFFFF;
  --fuss-hintergrund: #0F172A;
  --fuss-text: #C7D0DC;
  --fuss-hell: #FFFFFF;
  --fuss-link: #DCE5F0;
  --schatten: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
  --schatten-stark: 0 2px 6px rgba(15, 23, 42, .08), 0 14px 36px rgba(15, 23, 42, .12);
  --radius: 12px;
  --radius-klein: 8px;
  font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--papier); color: var(--text);
}
@media (prefers-color-scheme: dark) {
  :root[data-modus="system"] body.oeffentlich, :root[data-modus="system"] body.mitarbeiter {
    --pinie: #7DB4F0; --pinie-dunkel: #060B14;
    --papier: #0B1220; --papier-hell: #111A2B; --papier-zart: #16213A;
    --linie: #243149; --linie-fein: #1C2740; --rahmen-knopf: #3B4A66;
    --text: #E6EDF7; --text-gedaempft: #B8C4D6; --text-leise: #94A3B8;
    --akzent-flaeche: #16243B; --akzent-rahmen: #2C4468; --akzent-vorne: #7DB4F0;
    --knopf-flaeche: #7DB4F0; --knopf-schrift: #06101F;
    --erfolg: #5FCB98; --warnung: #F08A7A; --bildgrund: #1C2740; --fokus: #7DB4F0;
    --kopf-hintergrund: #111A2B; --fuss-hintergrund: #060B14;
    --fuss-text: #B8C4D6; --fuss-hell: #FFFFFF; --fuss-link: #DCE5F0;
    --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --schatten-stark: 0 2px 6px rgba(0, 0, 0, .5), 0 14px 36px rgba(0, 0, 0, .5);
  }
}
:root[data-modus="dunkel"] body.oeffentlich, :root[data-modus="dunkel"] body.mitarbeiter {
  --pinie: #7DB4F0; --pinie-dunkel: #060B14;
  --papier: #0B1220; --papier-hell: #111A2B; --papier-zart: #16213A;
  --linie: #243149; --linie-fein: #1C2740; --rahmen-knopf: #3B4A66;
  --text: #E6EDF7; --text-gedaempft: #B8C4D6; --text-leise: #94A3B8;
  --akzent-flaeche: #16243B; --akzent-rahmen: #2C4468; --akzent-vorne: #7DB4F0;
  --knopf-flaeche: #7DB4F0; --knopf-schrift: #06101F;
  --erfolg: #5FCB98; --warnung: #F08A7A; --bildgrund: #1C2740; --fokus: #7DB4F0;
  --kopf-hintergrund: #111A2B; --fuss-hintergrund: #060B14;
  --fuss-text: #B8C4D6; --fuss-hell: #FFFFFF; --fuss-link: #DCE5F0;
  --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --schatten-stark: 0 2px 6px rgba(0, 0, 0, .5), 0 14px 36px rgba(0, 0, 0, .5);
}

/* --- Schrift und Grundelemente ------------------------------------------ */
body.oeffentlich h1, body.mitarbeiter h1, body.oeffentlich h2, body.mitarbeiter h2, body.oeffentlich h3, body.mitarbeiter h3,
body.oeffentlich .kaufanfrage legend, body.mitarbeiter .kaufanfrage legend, body.oeffentlich .kachelpreis, body.mitarbeiter .kachelpreis,
body.oeffentlich .preis, body.mitarbeiter .preis, body.oeffentlich .zahl .wert, body.mitarbeiter .zahl .wert, body.oeffentlich .fussmarke,
body.mitarbeiter .fussmarke, body.oeffentlich .kopf .marke, body.mitarbeiter .kopf .marke {
  font-family: Nunito, "Nunito Sans", system-ui, sans-serif; font-weight: 700; letter-spacing: -.01em;
}
body.oeffentlich .preis, body.mitarbeiter .preis { font-size: clamp(26px, 3vw, 32px); }
body.oeffentlich h1, body.mitarbeiter h1 { font-size: clamp(26px, 3.2vw, 34px); line-height: 1.2; margin: 0 0 14px; }
body.oeffentlich h2, body.mitarbeiter h2 { font-size: clamp(20px, 2.2vw, 24px); line-height: 1.25; }
body.oeffentlich h3, body.mitarbeiter h3 { font-size: 17px; line-height: 1.3; }
body.oeffentlich p, body.mitarbeiter p { line-height: 1.6; }
body.oeffentlich a, body.mitarbeiter a { color: var(--akzent-vorne); text-decoration-thickness: 1px; text-underline-offset: 2px; }
body.oeffentlich .karte, body.mitarbeiter .karte { border-radius: var(--radius); box-shadow: var(--schatten); border-color: var(--linie); }
body.oeffentlich .huelle, body.mitarbeiter .huelle { padding-top: 32px; }
body.oeffentlich .abschnittstitel, body.mitarbeiter .abschnittstitel { margin-top: 44px; margin-bottom: 16px; }
body.oeffentlich input, body.mitarbeiter input, body.oeffentlich select, body.mitarbeiter select, body.oeffentlich textarea, body.mitarbeiter textarea {
  border: 1px solid var(--rahmen-knopf); border-radius: var(--radius-klein); background: var(--papier-hell); color: var(--text);
}
body.oeffentlich input:focus-visible, body.mitarbeiter input:focus-visible, body.oeffentlich select:focus-visible, body.mitarbeiter select:focus-visible, body.oeffentlich textarea:focus-visible, body.mitarbeiter textarea:focus-visible {
  outline: 3px solid var(--fokus); outline-offset: 1px; border-color: var(--akzent-vorne);
}

/* --- Knoepfe: gefuellt (Haupt), umrandet (zweit), hell (Navigation) ----- */
body.oeffentlich .knopf, body.mitarbeiter .knopf, body.oeffentlich button[type="submit"], body.mitarbeiter button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: auto; min-height: 44px; padding: 0 20px; border-radius: var(--radius-klein);
  background: var(--knopf-flaeche); color: var(--knopf-schrift); border: 1px solid var(--knopf-flaeche);
  font: inherit; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer;
  transition: background-color .15s, box-shadow .15s, transform .05s;
}
body.oeffentlich .knopf:hover, body.mitarbeiter .knopf:hover, body.oeffentlich button[type="submit"]:hover,
body.mitarbeiter button[type="submit"]:hover {
  filter: none; box-shadow: var(--schatten); background: var(--knopf-flaeche); color: var(--knopf-schrift);
}
body.oeffentlich .knopf:active, body.mitarbeiter .knopf:active, body.oeffentlich button[type="submit"]:active, body.mitarbeiter button[type="submit"]:active { transform: translateY(1px); }
body.oeffentlich .knopf.gross, body.mitarbeiter .knopf.gross { height: auto; min-height: 52px; padding: 0 28px; font-size: 16px; }
body.oeffentlich .knopf.zweit, body.mitarbeiter .knopf.zweit, body.oeffentlich button.zweitknopf, body.mitarbeiter button.zweitknopf {
  background: var(--papier-hell); color: var(--akzent-vorne); border: 1px solid var(--akzent-rahmen);
}
body.oeffentlich .knopf.zweit:hover, body.mitarbeiter .knopf.zweit:hover, body.oeffentlich button.zweitknopf:hover,
body.mitarbeiter button.zweitknopf:hover {
  background: var(--akzent-flaeche); color: var(--akzent-vorne); box-shadow: none;
}
body.oeffentlich .fertigefragen a, body.mitarbeiter .fertigefragen a, body.oeffentlich .fertigefragen span, body.mitarbeiter .fertigefragen span {
  display: inline-flex; align-items: center; min-height: 44px; border-radius: 999px; background: var(--papier-hell);
  border: 1px solid var(--akzent-rahmen); padding: 6px 14px; font-size: 14.5px; font-weight: 600; text-decoration: none;
}
body.oeffentlich .fertigefragen a:hover, body.mitarbeiter .fertigefragen a:hover { background: var(--akzent-flaeche); }
body.oeffentlich .fertigefragen, body.mitarbeiter .fertigefragen { gap: 8px; }

/* --- Kopf: seit Gestaltung 3 (23.09.2026) weiter unten, im Block „Kopf: aufgeraeumt". */
body.oeffentlich .zumInhalt, body.mitarbeiter .zumInhalt { background: var(--knopf-flaeche); color: var(--knopf-schrift); }

/* --- Aufmacher: Suche darauf ------------------------------------------- */
body.oeffentlich .aufmacher, body.mitarbeiter .aufmacher { position: relative; margin: 0; }
body.oeffentlich .aufmacherinhalt, body.mitarbeiter .aufmacherinhalt {
  position: relative; max-width: 1180px; margin: 0 auto; padding: 56px 16px 40px; color: #FFFFFF;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 32px; align-items: center;
}
body.oeffentlich .suchkarte, body.mitarbeiter .suchkarte {
  background: var(--papier-hell); color: var(--text); border-radius: var(--radius); padding: 22px 22px 20px;
  box-shadow: var(--schatten-stark);
}
body.oeffentlich .suchkarte h2, body.mitarbeiter .suchkarte h2 { font-size: 18px; margin: 0 0 14px; }
body.oeffentlich .suchraster, body.mitarbeiter .suchraster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.oeffentlich .suchraster label, body.mitarbeiter .suchraster label { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--text-leise); text-transform: none; }
body.oeffentlich .suchraster select, body.mitarbeiter .suchraster select, body.oeffentlich .suchraster input, body.mitarbeiter .suchraster input { width: 100%; height: 44px; margin: 4px 0 0; padding: 0 10px; font: inherit; font-size: 15px; }
body.oeffentlich .suchkarte button[type="submit"], body.mitarbeiter .suchkarte button[type="submit"] { width: 100%; margin-top: 14px; }
@media (max-width: 860px) {
  body.oeffentlich .aufmacherinhalt, body.mitarbeiter .aufmacherinhalt { grid-template-columns: 1fr; padding: 36px 16px 28px; }
}
@media (max-width: 480px) {
  body.oeffentlich .suchraster, body.mitarbeiter .suchraster { grid-template-columns: 1fr; }
}

/* --- Vorteile: Karten mit Haekchen ------------------------------------ */
body.oeffentlich .vorteile, body.mitarbeiter .vorteile { list-style: none; margin: 16px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
body.oeffentlich .vorteile li, body.mitarbeiter .vorteile li { background: var(--papier-hell); border: 1px solid var(--linie); border-radius: var(--radius); padding: 20px; box-shadow: var(--schatten); }
body.oeffentlich .vorteile h3, body.mitarbeiter .vorteile h3 { margin: 0 0 6px; font-size: 16px; }
body.oeffentlich .vorteile p, body.mitarbeiter .vorteile p { margin: 0; color: var(--text-leise); font-size: 14.5px; }
body.oeffentlich .vorteile li::before, body.mitarbeiter .vorteile li::before {
  content: "\2713"; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 10px;
  border-radius: 50%; background: var(--akzent-flaeche); color: var(--akzent-vorne); font-weight: 700;
}

/* --- Fahrzeugkacheln ---------------------------------------------------- */
body.oeffentlich .kachelraster, body.mitarbeiter .kachelraster { gap: 18px; }
body.oeffentlich .fahrzeugkachel, body.mitarbeiter .fahrzeugkachel {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); text-decoration: none;
  transition: box-shadow .15s, transform .15s;
}
body.oeffentlich .fahrzeugkachel:hover, body.mitarbeiter .fahrzeugkachel:hover { box-shadow: var(--schatten-stark); transform: translateY(-2px); }
body.oeffentlich .kachelinhalt, body.mitarbeiter .kachelinhalt { padding: 14px 16px 16px; }
body.oeffentlich .kachelinhalt h3, body.mitarbeiter .kachelinhalt h3 { font-size: 17px; margin: 0 0 4px; text-decoration: none; color: var(--text); }
body.oeffentlich .kacheldaten, body.mitarbeiter .kacheldaten, body.oeffentlich .kachelverbrauch, body.mitarbeiter .kachelverbrauch { text-decoration: none; }
body.oeffentlich .kachelpreis, body.mitarbeiter .kachelpreis { font-size: 20px; color: var(--text); }
body.oeffentlich .statuspunkt, body.mitarbeiter .statuspunkt { border-radius: 999px; font-weight: 600; top: 10px; left: 10px; padding: 4px 11px; font-size: 12.5px; box-shadow: var(--schatten); }
body.oeffentlich .statuspunkt.status-reserviert, body.mitarbeiter .statuspunkt.status-reserviert { background: #FFF4D6; color: #6B4300; }
body.oeffentlich .statuspunkt.status-verkauft, body.mitarbeiter .statuspunkt.status-verkauft { background: #E2E8F0; color: #334155; }
/* Auf der Startseite drei Kacheln je Reihe (sechs = zwei Reihen); die
   Fahrzeugliste behaelt ihr dichteres Raster. */
body.oeffentlich .startkacheln, body.mitarbeiter .startkacheln { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
body.oeffentlich .zeile-mehr, body.mitarbeiter .zeile-mehr { display: flex; justify-content: center; margin: 22px 0 0; }
body.oeffentlich .abschnittskopf, body.mitarbeiter .abschnittskopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
body.oeffentlich .abschnittskopf .abschnittstitel, body.mitarbeiter .abschnittskopf .abschnittstitel { margin-bottom: 16px; }
body.oeffentlich .abschnittskopf .leise, body.mitarbeiter .abschnittskopf .leise { font-size: 14.5px; }

/* --- Kontaktblock am Ende der Startseite -------------------------------- */
body.oeffentlich .kontaktblock, body.mitarbeiter .kontaktblock {
  margin: 44px 0 0; padding: 26px 28px; border-radius: var(--radius);
  background: var(--akzent-flaeche); border: 1px solid var(--akzent-rahmen);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
body.oeffentlich .kontaktblock h2, body.mitarbeiter .kontaktblock h2 { margin: 0 0 4px; font-size: 20px; }
body.oeffentlich .kontaktblock p, body.mitarbeiter .kontaktblock p { margin: 0; color: var(--text-gedaempft); }
body.oeffentlich .kontaktknoepfe, body.mitarbeiter .kontaktknoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 480px) {
  body.oeffentlich .kontaktblock, body.mitarbeiter .kontaktblock { padding: 20px; }
  body.oeffentlich .kontaktknoepfe, body.mitarbeiter .kontaktknoepfe { width: 100%; }
  body.oeffentlich .kontaktknoepfe .knopf, body.mitarbeiter .kontaktknoepfe .knopf { flex: 1 1 auto; }
}

/* --- Ablauf: nummerierte Karten ----------------------------------------- */
body.oeffentlich .ablauf, body.mitarbeiter .ablauf { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 16px 0 8px; }
body.oeffentlich .ablauf li, body.mitarbeiter .ablauf li {
  flex-direction: column; gap: 12px; background: var(--papier-hell); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--schatten);
}
body.oeffentlich .ablaufnummer, body.mitarbeiter .ablaufnummer {
  width: 36px; height: 36px; border-radius: 50%; background: var(--knopf-flaeche); color: var(--knopf-schrift);
  font-family: Nunito, system-ui, sans-serif; font-weight: 700; font-size: 16px;
}
body.oeffentlich .ablauf h3, body.mitarbeiter .ablauf h3 { font-size: 17px; }
/* Schrittnummern der Kaufanfrage: im dunklen Modus ist die Knopffarbe hell,
   dann muss die Ziffer dunkel sein - dieselben Variablen wie die Knoepfe. */
body.oeffentlich .nummer, body.mitarbeiter .nummer { background: var(--knopf-flaeche); color: var(--knopf-schrift); font-family: Nunito, "Nunito Sans", system-ui, sans-serif; }

/* --- Partner: helle Kacheln mit Rand ------------------------------------ */
body.oeffentlich .partnerband, body.mitarbeiter .partnerband { margin: 44px 0 0; }
body.oeffentlich .partnerkachel, body.mitarbeiter .partnerkachel { background: #FFFFFF; border: 1px solid var(--linie); border-radius: var(--radius-klein); box-shadow: var(--schatten); }

/* --- Fuss: dunkler Schiefer, klare Spalten ------------------------------ */
body.oeffentlich .fuss, body.mitarbeiter .fuss { background: var(--fuss-hintergrund); color: var(--fuss-text); padding: 40px 24px 20px; margin-top: 56px; }
body.oeffentlich .fussmarke, body.mitarbeiter .fussmarke { color: var(--fuss-hell); font-size: 19px; margin-bottom: 8px; }
body.oeffentlich .fusstitel, body.mitarbeiter .fusstitel { color: var(--fuss-hell); font-weight: 700; margin-bottom: 8px; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; }
body.oeffentlich .fuss a, body.mitarbeiter .fuss a { color: var(--fuss-link); text-decoration: none; }
/* Bedienelemente mindestens 44 px hoch (Umsetzungsauftrag, Abschnitt 9) - auch
   die Links im Fuss. Jeder steht auf eigener Zeile (<br>), das bleibt so. */
body.oeffentlich .fuss nav a, body.mitarbeiter .fuss nav a, body.oeffentlich .fuss p a, body.mitarbeiter .fuss p a { display: inline-flex; align-items: center; min-height: 44px; }
body.oeffentlich .fuss p, body.mitarbeiter .fuss p { margin: 2px 0; }
body.oeffentlich .fuss a:hover, body.mitarbeiter .fuss a:hover { text-decoration: underline; }
body.oeffentlich .fuss .fusszeile, body.mitarbeiter .fuss .fusszeile { color: var(--fuss-text); border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 16px; margin-top: 24px; max-width: 1180px; margin-left: auto; margin-right: auto; }
body.oeffentlich .fuss .fusszeile a, body.mitarbeiter .fuss .fusszeile a { color: var(--fuss-link); text-decoration: underline; }
body.oeffentlich .fusspartnerreihe li, body.mitarbeiter .fusspartnerreihe li { background: #FFFFFF; border-radius: 6px; }
body.oeffentlich .fuss :focus-visible, body.mitarbeiter .fuss :focus-visible { outline-color: #FFFFFF; }

/* --- Fahrzeugliste, Fahrzeugseite, Formulare ---------------------------- */
body.oeffentlich .fahrzeugseite .galerie, body.mitarbeiter .fahrzeugseite .galerie { border-radius: var(--radius); overflow: hidden; }
body.oeffentlich .zustandsband, body.mitarbeiter .zustandsband { border-radius: var(--radius-klein); }
body.oeffentlich .datentabelle dt, body.mitarbeiter .datentabelle dt { font-weight: 500; }
body.oeffentlich .datentabelle, body.mitarbeiter .datentabelle { grid-template-columns: minmax(150px, max-content) minmax(0, 1fr); column-gap: 18px; }
body.oeffentlich .datentabelle dd, body.mitarbeiter .datentabelle dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  body.oeffentlich .datentabelle, body.mitarbeiter .datentabelle { grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); column-gap: 12px; }
}
body.oeffentlich .meldung, body.mitarbeiter .meldung, body.oeffentlich .meldung-fehler, body.mitarbeiter .meldung-fehler, body.oeffentlich .meldung-erfolg, body.mitarbeiter .meldung-erfolg { border-radius: var(--radius-klein); }
body.oeffentlich .fliesstext, body.mitarbeiter .fliesstext { max-width: 68ch; font-size: 16.5px; }
/* Zwischentitel der Rechtstexte sind Grossbuchstabenzeilen (VERBRAUCHERSTREITBEILEGUNG):
   auf dem Handy duerfen sie umbrechen, sonst schiebt die Seite seitlich. */
body.oeffentlich .fliesstext .zwischentitel, body.mitarbeiter .fliesstext .zwischentitel {
  font-family: Nunito, "Nunito Sans", system-ui, sans-serif; font-size: 18px; letter-spacing: 0; margin-top: 28px;
  overflow-wrap: break-word; hyphens: auto;
}
body.oeffentlich .fliesstext p, body.mitarbeiter .fliesstext p { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 480px) { body.oeffentlich .fliesstext .zwischentitel, body.mitarbeiter .fliesstext .zwischentitel { font-size: 16px; } }

/* ===== Einheitliche Kacheln, Datenzeile, Galerie, Seiten (22.09.2026) ======= */
/* Jede Kachel und jede Fahrzeugseite hat denselben Aufbau: Titel "Marke Typ",
   darunter die Ausstattungslinie, dann die feste Datenzeile (Jahr · km ·
   Leistung / Kraftstoff · Getriebe · Allrad) - so sieht man dem Bestand an,
   dass System dahintersteckt. */
body.oeffentlich .kachellinie { margin: -2px 0 6px; font-size: 14px; font-weight: 600; color: var(--text-gedaempft); }
body.oeffentlich .kachelinhalt .kacheldaten { margin: 0 0 2px; }
body.oeffentlich .kachelpreis.anfrage { font-size: 16px; color: var(--text-gedaempft); }
body.oeffentlich .datenzeile { display: flex; flex-direction: column; gap: 2px; margin: -6px 0 16px; font-size: 15.5px; color: var(--text-gedaempft); }
body.oeffentlich .preis.anfrage { font-size: clamp(20px, 2.4vw, 24px); }

/* Galerie: grosses Foto mit Weiter/Zurueck, darunter die Vorschaubilder als
   Links (?bild=N). Ohne JavaScript laedt ein Klick die Seite mit diesem Foto;
   mit JavaScript (galerie.js) wird nur das Bild getauscht. */
body.oeffentlich .galerie .buehne { position: relative; }
body.oeffentlich .galeriepfeil {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .94); color: #0F172A; font-size: 32px; line-height: 1; text-decoration: none;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .25);
}
body.oeffentlich .galeriepfeil:hover { background: #FFFFFF; color: #0F4C81; }
body.oeffentlich .galeriepfeil:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; box-shadow: 0 0 0 6px #0F4C81; }
body.oeffentlich .galeriepfeil.zurueck { left: 12px; }
body.oeffentlich .galeriepfeil.weiter { right: 12px; }
body.oeffentlich .galeriepfeil span { margin-top: -4px; }
body.oeffentlich .galeriestand {
  position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px;
  background: rgba(6, 10, 20, .78); color: #FFFFFF; font-size: 13px; font-weight: 600;
}
body.oeffentlich .vorschaustreifen a {
  flex-shrink: 0; display: block; border: 2px solid transparent; border-radius: 6px; opacity: .72;
  transition: opacity .15s, border-color .15s;
}
body.oeffentlich .vorschaustreifen a:hover { opacity: 1; }
body.oeffentlich .vorschaustreifen a[aria-current="true"] { opacity: 1; border-color: #FFFFFF; }
body.oeffentlich .vorschaustreifen a:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 1px; opacity: 1; }
body.oeffentlich .vorschaustreifen img { display: block; border-radius: 4px; }
@media (max-width: 600px) {
  body.oeffentlich .galeriepfeil { width: 44px; height: 44px; font-size: 28px; }
  body.oeffentlich .galeriepfeil.zurueck { left: 8px; }
  body.oeffentlich .galeriepfeil.weiter { right: 8px; }
}

/* Seiten der Fahrzeugliste (24 Fahrzeuge je Seite) */
body.oeffentlich .seitenwahl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin: 28px 0 8px; }
body.oeffentlich .seitenstand { flex-basis: 100%; text-align: center; color: var(--text-leise); font-size: 14px; }
body.oeffentlich .seitenzahl {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--papier-hell);
  color: var(--text); font-weight: 600; text-decoration: none;
}
body.oeffentlich .seitenzahl:hover { border-color: var(--akzent-rahmen); background: var(--akzent-flaeche); }
body.oeffentlich .seitenzahl[aria-current="page"] { background: var(--knopf-flaeche); border-color: var(--knopf-flaeche); color: var(--knopf-schrift); }

/* ===== Mitarbeiterbereich in der Gestaltung der Website (22.09.2026) ====== */
/* Anweisung des Auftraggebers: "Übrigens soll der Mitarbeiterbereich auch im
   Design des normalen Bereichs sein." Farben, Schrift, Knoepfe, Karten und der
   Kopf kommen aus dem Block "Gestaltung 2" oben (dort gilt jede Regel fuer
   beide Bereiche); hier stehen nur die Teile, die es nur im Mitarbeiterbereich
   gibt. Der Kopf hat hier zwei Zeilen: Marke und Konto oben, die Bereiche
   als Knoepfe darunter - neun Bereiche passen nicht in eine Zeile. */
body.mitarbeiter { font-size: 15.5px; }
body.mitarbeiter .kopf .kontoknopf {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--linie);
  border-radius: var(--radius-klein); background: var(--papier-zart); color: var(--text-gedaempft);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
body.mitarbeiter .kontoknopf:hover { background: var(--akzent-flaeche); color: var(--akzent-vorne); }
body.mitarbeiter .abmelden { margin: 0; }
body.mitarbeiter .zaehlpunkt {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  margin-left: 6px; border-radius: 999px; background: #B4411F; color: #FFFFFF; font-size: 12px; font-weight: 700;
}
body.mitarbeiter .huelle { padding-top: 28px; }
body.mitarbeiter h1 { font-size: clamp(24px, 2.6vw, 30px); }
body.mitarbeiter .kopfzeile { align-items: center; }
body.mitarbeiter .zurueck { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; font-weight: 600; }
body.mitarbeiter .karte { padding: 20px 22px; }
body.mitarbeiter .karte h2 { font-size: 19px; }
body.mitarbeiter button { border-radius: var(--radius-klein); }
body.mitarbeiter .mitte .karte { box-shadow: var(--schatten-stark); }

/* Zahlen ueber der Fahrzeugliste */
body.mitarbeiter .zahl { border-radius: var(--radius); box-shadow: var(--schatten); text-decoration: none; }
body.mitarbeiter .zahl:hover { border-color: var(--akzent-rahmen); }
body.mitarbeiter .zahl.gewaehlt { border-color: var(--akzent-vorne); border-left-width: 1px; background: var(--akzent-flaeche); box-shadow: inset 0 0 0 1px var(--akzent-vorne); }
body.mitarbeiter .zahl .wert { font-size: 26px; color: var(--text); }
body.mitarbeiter .filterzeile input[type=search], body.mitarbeiter .filterzeile select { border-radius: var(--radius-klein); border-color: var(--rahmen-knopf); }

/* Tabellen */
body.mitarbeiter .karte.kein-rand { border-radius: var(--radius); }
body.mitarbeiter td { border-bottom-color: var(--linie-fein); }
body.mitarbeiter .fahrzeugliste th { background: var(--papier-zart); color: var(--text-leise); }
body.mitarbeiter .fahrzeugliste td { border-bottom-color: var(--linie-fein); }
body.mitarbeiter .fahrzeugliste tbody tr:hover td { background: var(--papier-zart); }
body.mitarbeiter .fahrzeugliste tr.hervorgehoben td { background: #FFF8E6; }
body.mitarbeiter .bildspalte img, body.mitarbeiter .kein-bild { border-radius: 6px; background: var(--bildgrund); }
body.mitarbeiter .fahrzeugname { color: var(--text); text-decoration: none; }
body.mitarbeiter .fahrzeugname:hover { color: var(--akzent-vorne); text-decoration: underline; }
body.mitarbeiter .fin { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: .02em; }

/* Kennzeichen fuer Zustand, Sprache und Hinweise: dieselben ruhigen Flaechen */
body.mitarbeiter .status { border-radius: 999px; padding: 3px 10px; }
body.mitarbeiter .status-entwurf, body.mitarbeiter .status-archiviert { background: #EEF1F5; color: #3F4B5C; }
body.mitarbeiter .status-zur_pruefung { background: #FFF4D6; color: #6E5200; }
body.mitarbeiter .status-verfuegbar { background: #E3F4EA; color: #14532D; }
body.mitarbeiter .status-reserviert { background: #FDEBD8; color: #7C3F0A; }
body.mitarbeiter .status-verkauft { background: #ECE8F6; color: #4B3D7A; }
body.mitarbeiter .sprachstand span { border-radius: 4px; }
body.mitarbeiter .marke-de, body.mitarbeiter .marke-freigegeben { background: #E3F4EA; color: #14532D; }
body.mitarbeiter .marke-veraltet, body.mitarbeiter .marke-fehlt { background: #FDE8E4; color: #8F2A19; }
body.mitarbeiter .marke-entwurf, body.mitarbeiter .marke-zu_pruefen { background: #FFF4D6; color: #6E5200; }
body.mitarbeiter .hinweis { border-radius: var(--radius-klein); border-left-width: 4px; }
body.mitarbeiter .hinweis-hoch { background: #FDECE8; border-color: #B4411F; color: #6F2213; }
body.mitarbeiter .hinweis-mittel { background: #FFF6E0; border-color: #C99400; color: #5E4500; }
body.mitarbeiter .hinweis-niedrig { background: var(--papier-zart); border-color: var(--rahmen-knopf); color: var(--text-gedaempft); }
body.mitarbeiter .rollen span { border-radius: 999px; background: var(--akzent-flaeche); color: var(--akzent-vorne); }

/* Inseratsformular */
body.mitarbeiter .nummer {
  width: 30px; height: 30px; border-radius: 50%; background: var(--akzent-flaeche); color: var(--akzent-vorne);
  font-family: Nunito, "Nunito Sans", system-ui, sans-serif; font-size: 14px;
}
body.mitarbeiter .feld > span { color: var(--text-gedaempft); font-weight: 600; }
body.mitarbeiter .feld input, body.mitarbeiter .feld select, body.mitarbeiter .feld textarea { min-height: 44px; border-color: var(--rahmen-knopf); }
body.mitarbeiter .feld textarea { min-height: 96px; }
body.mitarbeiter .feld.fehlt > span { color: #9A2F1A; }
body.mitarbeiter .feld.fehlt input, body.mitarbeiter .feld.fehlt select { border-color: #E3A091; background: #FFFBFA; }
body.mitarbeiter .feld small.warnhinweis { color: #9A2F1A; font-weight: 600; }
body.mitarbeiter .feld.haekchen { min-height: 44px; }
body.mitarbeiter .feld.haekchen input[type=checkbox] { width: 20px; height: 20px; min-height: 0; accent-color: var(--akzent-vorne); }
body.mitarbeiter .feld.gerechnet input { background: var(--papier-zart); }
body.mitarbeiter .sternchenhinweis { border-radius: var(--radius-klein); background: var(--papier-zart); }
body.mitarbeiter .warnung { border-radius: var(--radius-klein); background: #FFF8E6; border-color: #F0DEAA; color: var(--text); }
body.mitarbeiter .gut { color: var(--erfolg); }
body.mitarbeiter .formularspalte .karte { box-shadow: var(--schatten); }
body.mitarbeiter .gefahrzone { border-color: #F0C9C0; }
body.mitarbeiter .gefahrzone summary { min-height: 44px; display: flex; align-items: center; }
body.mitarbeiter .hinweiskarte { border-style: dashed; box-shadow: none; }

/* Ausstattung zum Anhaken: je Gruppe ein Kasten, die Merkmale darin */
body.mitarbeiter .ausstattungsgruppe { margin: 0; border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--papier-zart); }
body.mitarbeiter .haken { display: flex; align-items: center; gap: 10px; min-height: 36px; margin: 0; font-size: 14px; font-weight: 400; color: var(--text); cursor: pointer; }
body.mitarbeiter .haken input { width: 18px; height: 18px; min-height: 0; margin: 0; flex-shrink: 0; accent-color: var(--akzent-vorne); }

/* Bilder im Formular */
body.mitarbeiter .bildgitter figure { border-radius: var(--radius-klein); overflow: hidden; box-shadow: var(--schatten); }
body.mitarbeiter .bildgitter figure.titelbild { border-color: var(--akzent-vorne); box-shadow: 0 0 0 2px var(--akzent-vorne); }
body.mitarbeiter .bildgitter button { height: 32px; min-height: 32px; padding: 0 9px; border-radius: 6px; background: var(--papier-hell); color: var(--text); border: 1px solid var(--linie); }
body.mitarbeiter .bildgitter button:hover:not(:disabled) { background: var(--akzent-flaeche); }
body.mitarbeiter .bildgitter button.gefaehrlich { color: #9A2F1A; border-color: #F0C9C0; }
body.mitarbeiter .titelmarke { border-radius: 999px; padding: 2px 8px; background: var(--akzent-vorne); }

/* Seiten mit eigener Huelle (Chat) und die Seitennavigation der Einstellungen */
body.mitarbeiter main.inhalt { max-width: 1180px; margin: 0 auto; padding: 28px 16px 48px; }
body.mitarbeiter .bereichsnav { border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; }
body.mitarbeiter .bereichsnav a { min-height: 44px; color: var(--text-gedaempft); font-weight: 600; text-decoration: none; }
body.mitarbeiter .bereichsnav a:hover { background: var(--akzent-flaeche); color: var(--akzent-vorne); }
body.mitarbeiter .bereichsnav a.gewaehlt { background: var(--akzent-flaeche); border-left: 3px solid var(--akzent-vorne); color: var(--akzent-vorne); }
/* Haekchen und Auswahlknoepfe: nie die Kastenform der Textfelder */
body.mitarbeiter input[type="checkbox"], body.mitarbeiter input[type="radio"] {
  width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; flex-shrink: 0; accent-color: var(--akzent-vorne);
}
body.mitarbeiter label.haekchen { min-height: 44px; gap: 10px; color: var(--text); font-size: 15px; }

/* ===== Gestaltung 3 (23.09.2026): ruhig, rund, einladend ================== */
/* Auftrag, woertlich: „Außerdem möchte ich, dass die Seite etwas
   abgerundeter aussieht. Das ist mir alles zu kantig und aggressiv. Es soll
   smooth, beruhigend und einladend wirken." Dazu: kleinere Schriften, Knoepfe
   und Reiter; Links mit mindestens einem duennen Rahmen; Knoepfe, die sich
   beim Drueberfahren und Klicken wie echte Knoepfe anfuehlen, „fein und
   elegant"; die Schrift Nunito (04-ENTSCHEIDUNGEN.md, „Ruhiger, runder,
   lebendiger"). Wie „Gestaltung 2" gilt jede Regel fuer die oeffentlichen
   Seiten UND den Mitarbeiterbereich, ohne :is(). Dieser Block steht am Ende
   und gewinnt deshalb gegen die aelteren Regeln fuer dieselben Klassen. */
body.oeffentlich, body.mitarbeiter {
  --pinie: #1F5F99;
  --pinie-dunkel: #123B61;
  --papier: #F5F7FA;
  --papier-hell: #FFFFFF;
  --papier-zart: #F8FAFC;
  --linie: #E3E8EF;
  --linie-fein: #EDF1F6;
  --rahmen-knopf: #BAC7D6;   /* der duenne Rahmen um Links und Knoepfe */
  --rahmen-feld: #C3CEDC;
  --text: #1E293B;
  --text-gedaempft: #3B4A5E;
  --text-leise: #56657A;     /* auf --papier 5,5:1 */
  --akzent-flaeche: #EAF2FB;
  --akzent-rahmen: #C5D8EE;
  --akzent-vorne: #1F5F99;   /* Weiss darauf 6,7:1 */
  --knopf-flaeche: #1F5F99;
  --knopf-flaeche-hover: #2A6AA5;
  --knopf-schrift: #FFFFFF;
  --fokus: #1F5F99;
  --fokus-ring: rgba(31, 95, 153, .35);
  --bildgrund: #E6EBF1;
  --kopf-hintergrund: rgba(255, 255, 255, .92);
  --fuss-hintergrund: #16263A;
  --schatten: 0 1px 2px rgba(20, 30, 50, .04), 0 6px 20px rgba(20, 30, 50, .06);
  --schatten-stark: 0 2px 6px rgba(20, 30, 50, .06), 0 14px 34px rgba(20, 30, 50, .10);
  --schatten-knopf: 0 1px 2px rgba(20, 30, 50, .10), inset 0 1px 0 rgba(255, 255, 255, .14);
  --schatten-knopf-hoch: 0 6px 16px rgba(31, 95, 153, .22), 0 1px 3px rgba(20, 30, 50, .10), inset 0 1px 0 rgba(255, 255, 255, .16);
  --schatten-zweit-hoch: 0 5px 14px rgba(20, 30, 50, .09), 0 1px 2px rgba(20, 30, 50, .06);
  --schatten-gedrueckt: inset 0 2px 5px rgba(0, 0, 0, .16);
  --radius: 18px;
  --radius-klein: 12px;
  --radius-rund: 999px;
  --hoehe-bedien: 44px;      /* Finger: 44 px (Abschnitt 9); Maus: 40 px, unten */
  --weich: cubic-bezier(.2, .8, .2, 1);
  font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (hover: hover) and (pointer: fine) {
  body.oeffentlich, body.mitarbeiter { --hoehe-bedien: 40px; }
}
@media (prefers-color-scheme: dark) {
  :root[data-modus="system"] body.oeffentlich {
    --pinie: #8BBEF0; --pinie-dunkel: #0A1220;
    --papier: #0E1624; --papier-hell: #152033; --papier-zart: #1A273D;
    --linie: #26344A; --linie-fein: #1E2B40; --rahmen-knopf: #3A4B66; --rahmen-feld: #3A4B66;
    --text: #E5ECF5; --text-gedaempft: #B9C5D5; --text-leise: #9AAABD;
    --akzent-flaeche: #172A45; --akzent-rahmen: #2F4A6E; --akzent-vorne: #8BBEF0;
    --knopf-flaeche: #8BBEF0; --knopf-flaeche-hover: #A0CAF3; --knopf-schrift: #0B1524;
    --fokus: #8BBEF0; --fokus-ring: rgba(139, 190, 240, .40);
    --bildgrund: #1C2A40; --kopf-hintergrund: rgba(21, 32, 51, .92); --fuss-hintergrund: #0A1220;
    --schatten: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .30);
    --schatten-stark: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 34px rgba(0, 0, 0, .45);
    --schatten-knopf: 0 1px 2px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
    --schatten-knopf-hoch: 0 6px 16px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
    --schatten-zweit-hoch: 0 5px 14px rgba(0, 0, 0, .40), 0 1px 2px rgba(0, 0, 0, .30);
  }
}
:root[data-modus="dunkel"] body.oeffentlich {
  --pinie: #8BBEF0; --pinie-dunkel: #0A1220;
  --papier: #0E1624; --papier-hell: #152033; --papier-zart: #1A273D;
  --linie: #26344A; --linie-fein: #1E2B40; --rahmen-knopf: #3A4B66; --rahmen-feld: #3A4B66;
  --text: #E5ECF5; --text-gedaempft: #B9C5D5; --text-leise: #9AAABD;
  --akzent-flaeche: #172A45; --akzent-rahmen: #2F4A6E; --akzent-vorne: #8BBEF0;
  --knopf-flaeche: #8BBEF0; --knopf-flaeche-hover: #A0CAF3; --knopf-schrift: #0B1524;
  --fokus: #8BBEF0; --fokus-ring: rgba(139, 190, 240, .40);
  --bildgrund: #1C2A40; --kopf-hintergrund: rgba(21, 32, 51, .92); --fuss-hintergrund: #0A1220;
  --schatten: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .30);
  --schatten-stark: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 34px rgba(0, 0, 0, .45);
  --schatten-knopf: 0 1px 2px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
  --schatten-knopf-hoch: 0 6px 16px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
  --schatten-zweit-hoch: 0 5px 14px rgba(0, 0, 0, .40), 0 1px 2px rgba(0, 0, 0, .30);
}

/* --- Schrift: Nunito fuer alles, was man anschaut oder anfasst ----------- */
body.oeffentlich h1, body.mitarbeiter h1, body.oeffentlich h2, body.mitarbeiter h2, body.oeffentlich h3, body.mitarbeiter h3,
body.oeffentlich .kaufanfrage legend, body.mitarbeiter .kaufanfrage legend, body.oeffentlich .kachelpreis, body.mitarbeiter .kachelpreis,
body.oeffentlich .preis, body.mitarbeiter .preis, body.oeffentlich .zahl .wert, body.mitarbeiter .zahl .wert,
body.oeffentlich .fussmarke, body.mitarbeiter .fussmarke, body.oeffentlich .kopf .marke, body.mitarbeiter .kopf .marke,
body.oeffentlich .fusstitel, body.mitarbeiter .fusstitel, body.oeffentlich .abschnittstitel, body.mitarbeiter .abschnittstitel {
  font-family: Nunito, "Nunito Sans", system-ui, sans-serif; letter-spacing: 0;
}
body.oeffentlich h1, body.mitarbeiter h1, body.oeffentlich h2, body.mitarbeiter h2, body.oeffentlich h3, body.mitarbeiter h3 { color: var(--text); }
/* Im dunklen Fuss bleiben Marke und Titel hell */
body.oeffentlich .fuss .fussmarke, body.mitarbeiter .fuss .fussmarke, body.oeffentlich .fuss .fusstitel, body.mitarbeiter .fuss .fusstitel { color: var(--fuss-hell); }
body.oeffentlich h1, body.mitarbeiter h1 { font-size: clamp(22px, 1.1vw + 17px, 28px); font-weight: 750; line-height: 1.25; margin: 0 0 12px; }
body.oeffentlich h2, body.mitarbeiter h2 { font-size: clamp(18px, .6vw + 15px, 21px); font-weight: 750; line-height: 1.3; }
body.oeffentlich h3, body.mitarbeiter h3 { font-size: 16px; font-weight: 750; line-height: 1.35; }
body.oeffentlich p, body.mitarbeiter p { line-height: 1.65; }
body.oeffentlich .leise, body.mitarbeiter .leise { font-size: 14px; }
body.oeffentlich .klein, body.mitarbeiter .klein { font-size: 13px; }
body.oeffentlich .preis, body.mitarbeiter .preis { font-size: clamp(22px, 1vw + 17px, 26px); font-weight: 800; }
body.oeffentlich .abschnittstitel, body.mitarbeiter .abschnittstitel { margin-top: 40px; margin-bottom: 14px; }

/* --- Links im Text: ruhig unterstrichen, beim Drueberfahren deutlicher --- */
body.oeffentlich a, body.mitarbeiter a {
  color: var(--akzent-vorne); text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: rgba(31, 95, 153, .35); transition: color .18s, text-decoration-color .18s;
}
body.oeffentlich a:hover, body.mitarbeiter a:hover { text-decoration-color: currentColor; }

/* --- Fokus: ein weicher Ring statt eines harten Rahmens ------------------ */
body.oeffentlich :focus-visible, body.mitarbeiter :focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }

/* --- Karten: runder, leiser Schatten ------------------------------------- */
body.oeffentlich .karte, body.mitarbeiter .karte {
  border-radius: var(--radius); border: 1px solid var(--linie); box-shadow: var(--schatten); padding: 20px 22px;
}
@media (max-width: 600px) { body.oeffentlich .karte, body.mitarbeiter .karte { padding: 16px; border-radius: 16px; } }

/* --- Eingabefelder: rund, ruhig, 16 px (sonst vergroessert das iPhone) ----- */
body.oeffentlich input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
body.mitarbeiter input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
body.oeffentlich select, body.mitarbeiter select, body.oeffentlich textarea, body.mitarbeiter textarea {
  border: 1px solid var(--rahmen-feld); border-radius: var(--radius-klein); background: var(--papier-hell); color: var(--text);
  font-family: "Nunito Sans", system-ui, sans-serif; font-size: 16px; font-weight: 400; min-height: var(--hoehe-bedien);
  transition: border-color .18s, box-shadow .18s;
}
body.oeffentlich input:hover, body.mitarbeiter input:hover, body.oeffentlich select:hover, body.mitarbeiter select:hover,
body.oeffentlich textarea:hover, body.mitarbeiter textarea:hover { border-color: var(--rahmen-knopf); }
body.oeffentlich input:focus-visible, body.mitarbeiter input:focus-visible, body.oeffentlich select:focus-visible, body.mitarbeiter select:focus-visible,
body.oeffentlich textarea:focus-visible, body.mitarbeiter textarea:focus-visible {
  outline: none; border-color: var(--akzent-vorne); box-shadow: 0 0 0 4px var(--fokus-ring);
}
body.oeffentlich input[type="checkbox"], body.mitarbeiter input[type="checkbox"],
body.oeffentlich input[type="radio"], body.mitarbeiter input[type="radio"] { accent-color: var(--akzent-vorne); }

/* --- Knoepfe: rund, und sie fuehlen sich an wie echte Knoepfe -------------
   Ruhe: leicht erhaben (feiner Schatten, ein Hauch Licht oben).
   Drueberfahren: hebt sich um einen Pixel, der Schatten wird weicher und
   weiter. Klicken: sinkt ein, der Schatten liegt innen. Alles in 0,18 s,
   ohne Bewegung bei „weniger Bewegung" (ganz unten). */
body.oeffentlich .knopf, body.mitarbeiter .knopf, body.oeffentlich button, body.mitarbeiter button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: auto; min-height: var(--hoehe-bedien); padding: 0 18px; border-radius: var(--radius-rund);
  font-family: Nunito, "Nunito Sans", system-ui, sans-serif; font-size: 14.5px; font-weight: 700; line-height: 1.2;
  letter-spacing: .005em; text-decoration: none; cursor: pointer; white-space: normal; text-align: center;
  transition: transform .18s var(--weich), box-shadow .18s var(--weich), background-color .18s, border-color .18s, color .18s;
  -webkit-tap-highlight-color: transparent;
}
/* Hauptknopf: gefuellt */
body.oeffentlich .knopf, body.mitarbeiter .knopf, body.oeffentlich button[type="submit"], body.mitarbeiter button[type="submit"] {
  background: var(--knopf-flaeche); color: var(--knopf-schrift); border: 1px solid transparent; box-shadow: var(--schatten-knopf);
  border-radius: var(--radius-rund); padding: 0 18px; font-family: Nunito, "Nunito Sans", system-ui, sans-serif; font-size: 14.5px; font-weight: 700;
}
/* Zweitrangig: hell mit duennem Rahmen */
body.oeffentlich .knopf.zweit, body.mitarbeiter .knopf.zweit, body.oeffentlich button.zweitknopf, body.mitarbeiter button.zweitknopf,
body.oeffentlich button.zweit, body.mitarbeiter button.zweit {
  background: var(--papier-hell); color: var(--akzent-vorne); border: 1px solid var(--akzent-rahmen); box-shadow: 0 1px 2px rgba(20, 30, 50, .05);
}
@media (hover: hover) {
  body.oeffentlich .knopf:hover, body.mitarbeiter .knopf:hover, body.oeffentlich button[type="submit"]:hover,
  body.mitarbeiter button[type="submit"]:hover {
    background: var(--knopf-flaeche-hover); color: var(--knopf-schrift); transform: translateY(-1px); box-shadow: var(--schatten-knopf-hoch); filter: none;
  }
  body.oeffentlich .knopf.zweit:hover, body.mitarbeiter .knopf.zweit:hover, body.oeffentlich button.zweitknopf:hover,
  body.mitarbeiter button.zweitknopf:hover, body.oeffentlich button.zweit:hover, body.mitarbeiter button.zweit:hover {
    background: var(--akzent-flaeche); color: var(--akzent-vorne); border-color: var(--akzent-rahmen); transform: translateY(-1px); box-shadow: var(--schatten-zweit-hoch);
  }
}
body.oeffentlich .knopf:active, body.mitarbeiter .knopf:active, body.oeffentlich button:active, body.mitarbeiter button:active {
  transform: translateY(0) scale(.985); box-shadow: var(--schatten-gedrueckt); transition-duration: .06s;
}
body.oeffentlich .knopf:focus-visible, body.mitarbeiter .knopf:focus-visible, body.oeffentlich button:focus-visible, body.mitarbeiter button:focus-visible {
  outline: none; box-shadow: 0 0 0 4px var(--fokus-ring), var(--schatten-knopf);
}
body.oeffentlich .knopf.gross, body.mitarbeiter .knopf.gross { min-height: 48px; padding: 0 24px; font-size: 15px; }
body.oeffentlich .knopf.klein, body.mitarbeiter .knopf.klein, body.oeffentlich button.klein, body.mitarbeiter button.klein { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
body.oeffentlich .knopf.gefahr, body.mitarbeiter .knopf.gefahr, body.oeffentlich button.gefahr, body.mitarbeiter button.gefahr,
body.oeffentlich button.gefaehrlich, body.mitarbeiter button.gefaehrlich { background: #B4411F; border-color: #B4411F; color: #FFFFFF; }
body.oeffentlich button.zweitknopf.gefaehrlich, body.mitarbeiter button.zweitknopf.gefaehrlich { background: var(--papier-hell); color: #9A2F1A; border-color: #F0C9C0; }
body.oeffentlich .knopf[disabled], body.mitarbeiter .knopf[disabled], body.oeffentlich button[disabled], body.mitarbeiter button[disabled] {
  transform: none; box-shadow: none; cursor: not-allowed; opacity: .55;
}

/* Kleine Pillen: Filter-Chips, fertige Fragen, Seitenzahlen */
body.oeffentlich .fertigefragen a, body.mitarbeiter .fertigefragen a {
  min-height: var(--hoehe-bedien); padding: 6px 14px; border-radius: var(--radius-rund); border: 1px solid var(--rahmen-knopf);
  background: var(--papier-hell); color: var(--akzent-vorne); font-family: Nunito, system-ui, sans-serif; font-size: 14px; font-weight: 700;
  transition: transform .18s var(--weich), box-shadow .18s var(--weich), background-color .18s;
}
@media (hover: hover) {
  body.oeffentlich .fertigefragen a:hover, body.mitarbeiter .fertigefragen a:hover { background: var(--akzent-flaeche); transform: translateY(-1px); box-shadow: var(--schatten-zweit-hoch); }
}
body.oeffentlich .seitenzahl { border-radius: var(--radius-rund); border-color: var(--rahmen-knopf); min-height: var(--hoehe-bedien); min-width: var(--hoehe-bedien); font-family: Nunito, system-ui, sans-serif; font-weight: 700; }

/* --- Kopf: aufgeraeumt, die Bereiche als runde Knoepfe mit duennem Rahmen - */
body.oeffentlich .kopf, body.mitarbeiter .kopf {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px 16px; flex-wrap: nowrap;
  padding: 10px max(16px, calc((100vw - 1180px) / 2)); min-height: 64px;
  background: var(--kopf-hintergrund); border-bottom: 1px solid var(--linie);
  box-shadow: 0 1px 0 rgba(20, 30, 50, .02), 0 6px 18px rgba(20, 30, 50, .04);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
body.oeffentlich .kopf .marke, body.mitarbeiter .kopf .marke {
  font-size: 18px; font-weight: 800; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--hoehe-bedien); margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw;
}
body.oeffentlich .kopf .marke::before, body.mitarbeiter .kopf .marke::before {
  content: ""; flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%;
  background: var(--akzent-vorne); box-shadow: 0 0 0 4px var(--akzent-flaeche);
}
body.oeffentlich .kopf .marke:hover, body.mitarbeiter .kopf .marke:hover { color: var(--akzent-vorne); }
body.oeffentlich .kopf .kopfnav, body.mitarbeiter .kopf .kopfnav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
body.oeffentlich .kopf .navknopf, body.mitarbeiter .kopf .navknopf, body.mitarbeiter .kopf nav a {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--hoehe-bedien); padding: 0 15px; border-radius: var(--radius-rund);
  border: 1px solid var(--rahmen-knopf); background: var(--papier-hell); color: var(--text-gedaempft);
  font-family: Nunito, "Nunito Sans", system-ui, sans-serif; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(20, 30, 50, .04);
  transition: transform .18s var(--weich), box-shadow .18s var(--weich), background-color .18s, border-color .18s, color .18s;
}
@media (hover: hover) {
  body.oeffentlich .kopf .navknopf:hover, body.mitarbeiter .kopf .navknopf:hover, body.mitarbeiter .kopf nav a:hover {
    background: var(--akzent-flaeche); border-color: var(--akzent-rahmen); color: var(--akzent-vorne);
    transform: translateY(-1px); box-shadow: var(--schatten-zweit-hoch);
  }
}
body.oeffentlich .kopf .navknopf:active, body.mitarbeiter .kopf .navknopf:active, body.mitarbeiter .kopf nav a:active { transform: scale(.985); box-shadow: var(--schatten-gedrueckt); }
body.oeffentlich .kopf .navknopf[aria-current], body.mitarbeiter .kopf .navknopf[aria-current], body.mitarbeiter .kopf nav a[aria-current] {
  background: var(--akzent-flaeche); border-color: var(--akzent-rahmen); color: var(--akzent-vorne); box-shadow: none;
}
body.oeffentlich .kopf .navknopf[aria-current="page"], body.mitarbeiter .kopf nav a[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--akzent-vorne); border-color: var(--akzent-vorne); }
body.oeffentlich .kopfrechts, body.mitarbeiter .kopfrechts { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin: 0; }

/* Sprache und Hell/Dunkel: kleine runde Schalter */
body.oeffentlich .sprachwahl, body.mitarbeiter .sprachwahl {
  display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--rahmen-knopf); border-radius: var(--radius-rund); background: var(--papier-zart);
}
body.oeffentlich .sprachwahl button, body.mitarbeiter .sprachwahl button {
  min-height: calc(var(--hoehe-bedien) - 8px); height: auto; padding: 0 12px; border: 0; border-radius: var(--radius-rund);
  background: transparent; color: var(--text-leise); font-size: 13.5px; font-weight: 700; box-shadow: none;
}
body.oeffentlich .sprachwahl button[aria-current="true"], body.mitarbeiter .sprachwahl button[aria-current="true"] {
  background: var(--papier-hell); color: var(--text); box-shadow: 0 1px 3px rgba(20, 30, 50, .12);
}
@media (hover: hover) {
  body.oeffentlich .sprachwahl button:hover, body.mitarbeiter .sprachwahl button:hover { background: var(--akzent-flaeche); color: var(--akzent-vorne); transform: none; box-shadow: none; }
  body.oeffentlich .sprachwahl button[aria-current="true"]:hover, body.mitarbeiter .sprachwahl button[aria-current="true"]:hover { background: var(--papier-hell); color: var(--text); }
}
body.oeffentlich .modusform button, body.mitarbeiter .modusform button {
  min-height: var(--hoehe-bedien); height: auto; padding: 0 14px; border: 1px solid var(--rahmen-knopf); border-radius: var(--radius-rund);
  background: var(--papier-hell); color: var(--text-gedaempft); font-size: 13.5px; font-weight: 700; box-shadow: 0 1px 2px rgba(20, 30, 50, .04);
}
@media (hover: hover) {
  body.oeffentlich .modusform button:hover, body.mitarbeiter .modusform button:hover { background: var(--akzent-flaeche); color: var(--akzent-vorne); transform: translateY(-1px); box-shadow: var(--schatten-zweit-hoch); }
}

/* Das Menue fuer Handy und Tablet: ein <details>, also ohne JavaScript */
body.oeffentlich .menue, body.mitarbeiter .menue { display: none; }
body.oeffentlich .menueknopf, body.mitarbeiter .menueknopf {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 9px;
  min-height: var(--hoehe-bedien); padding: 0 16px 0 14px; border-radius: var(--radius-rund);
  border: 1px solid var(--rahmen-knopf); background: var(--papier-hell); color: var(--text);
  font-family: Nunito, "Nunito Sans", system-ui, sans-serif; font-size: 14.5px; font-weight: 700;
  box-shadow: 0 1px 2px rgba(20, 30, 50, .05); -webkit-tap-highlight-color: transparent; user-select: none;
  transition: background-color .18s, box-shadow .18s, border-color .18s;
}
body.oeffentlich .menueknopf::-webkit-details-marker, body.mitarbeiter .menueknopf::-webkit-details-marker { display: none; }
body.oeffentlich .menue[open] .menueknopf, body.mitarbeiter .menue[open] .menueknopf { background: var(--akzent-flaeche); border-color: var(--akzent-rahmen); color: var(--akzent-vorne); }
/* Drei Striche, die beim Oeffnen zu einem Kreuz werden */
body.oeffentlich .menuesymbol, body.mitarbeiter .menuesymbol { position: relative; width: 16px; height: 12px; display: inline-block; }
body.oeffentlich .menuesymbol::before, body.mitarbeiter .menuesymbol::before, body.oeffentlich .menuesymbol::after, body.mitarbeiter .menuesymbol::after,
body.oeffentlich .menuesymbol span, body.mitarbeiter .menuesymbol span {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .22s var(--weich), opacity .18s, top .22s var(--weich);
}
body.oeffentlich .menuesymbol::before, body.mitarbeiter .menuesymbol::before { top: 0; }
body.oeffentlich .menuesymbol span, body.mitarbeiter .menuesymbol span { top: 5px; }
body.oeffentlich .menuesymbol::after, body.mitarbeiter .menuesymbol::after { top: 10px; }
body.oeffentlich .menue[open] .menuesymbol::before, body.mitarbeiter .menue[open] .menuesymbol::before { top: 5px; transform: rotate(45deg); }
body.oeffentlich .menue[open] .menuesymbol span, body.mitarbeiter .menue[open] .menuesymbol span { opacity: 0; }
body.oeffentlich .menue[open] .menuesymbol::after, body.mitarbeiter .menue[open] .menuesymbol::after { top: 5px; transform: rotate(-45deg); }
body.oeffentlich .menueinhalt, body.mitarbeiter .menueinhalt {
  position: absolute; left: 12px; right: 12px; top: calc(100% + 8px);
  background: var(--papier-hell); border: 1px solid var(--linie); border-radius: 20px; box-shadow: var(--schatten-stark);
  padding: 14px; animation: menueAuf .22s var(--weich);
}
body.oeffentlich .menueinhalt nav, body.mitarbeiter .menueinhalt nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.oeffentlich .menueinhalt .navknopf, body.mitarbeiter .menueinhalt nav a { justify-content: center; min-height: 46px; font-size: 14.5px; }
body.oeffentlich .menuewahl, body.mitarbeiter .menuewahl {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linie-fein);
}
@keyframes menueAuf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 1023px) {
  body.oeffentlich .kopf .kopfnav, body.oeffentlich .kopf .kopfrechts { display: none; }
  body.oeffentlich .menue { display: block; }
  body.oeffentlich .kopf { padding-top: 8px; padding-bottom: 8px; min-height: 60px; }
}
@media (max-width: 420px) {
  body.oeffentlich .menueinhalt nav, body.mitarbeiter .menueinhalt nav { grid-template-columns: 1fr 1fr; }
  body.oeffentlich .kopf .marke { font-size: 17px; max-width: 58vw; }
}
@media (min-width: 1024px) {
  body.oeffentlich .kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  body.oeffentlich .kopfrechts { justify-self: end; }
  body.oeffentlich .kopf .marke { max-width: 100%; }
}

/* --- Das Chat-Symbol unten rechts ----------------------------------------
   Rund, ruhig, immer an derselben Stelle. Beim ersten Seitenaufruf einer
   Sitzung (seite.js) kommt es einmal sanft herein, nickt einmal und zeigt fuer
   ein paar Sekunden seinen Satz; danach steht es still. Kein Blinken, keine
   Wiederholung. Der Punkt: gruen, wenn jemand im Chat ist, sonst grau. */
body.oeffentlich .chatstart {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--knopf-flaeche); color: var(--knopf-schrift); text-decoration: none;
  box-shadow: 0 8px 24px rgba(31, 95, 153, .30), 0 2px 6px rgba(20, 30, 50, .14), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .2s var(--weich), box-shadow .2s var(--weich), background-color .2s;
  -webkit-tap-highlight-color: transparent;
}
body.oeffentlich .chatstart .chatpunkte { fill: var(--knopf-flaeche); }
@media (hover: hover) {
  body.oeffentlich .chatstart:hover { transform: translateY(-2px) scale(1.03); background: var(--knopf-flaeche-hover); box-shadow: 0 12px 30px rgba(31, 95, 153, .34), 0 3px 8px rgba(20, 30, 50, .16); }
  body.oeffentlich .chatstart:hover .chatpunkte { fill: var(--knopf-flaeche-hover); }
}
body.oeffentlich .chatstart:active { transform: scale(.96); }
body.oeffentlich .chatstart:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
body.oeffentlich .chatstart-punkt {
  position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: #94A3B8; border: 2.5px solid var(--papier-hell);
}
body.oeffentlich .chatstart.da .chatstart-punkt { background: #22A06B; }
/* Der Satz neben dem Symbol: fuer Vorleseprogramme immer da, sichtbar nur
   beim Begruessen, beim Drueberfahren und mit der Tastatur. */
body.oeffentlich .chatstart-text {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(8px, -50%);
  white-space: nowrap; padding: 9px 14px; border-radius: 16px 16px 4px 16px;
  background: var(--papier-hell); color: var(--text); border: 1px solid var(--linie); box-shadow: var(--schatten-stark);
  font-family: Nunito, system-ui, sans-serif; font-size: 14px; font-weight: 700;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .3s var(--weich);
}
@media (hover: hover) {
  body.oeffentlich .chatstart:hover .chatstart-text { opacity: 1; transform: translate(0, -50%); }
}
body.oeffentlich .chatstart:focus-visible .chatstart-text, body.oeffentlich .chatstart.gruesst .chatstart-text { opacity: 1; transform: translate(0, -50%); }
body.oeffentlich .chatstart.kommt { animation: chatKommt .55s var(--weich) both; }
body.oeffentlich .chatstart.nickt .chatsymbol { animation: chatNickt 1.1s ease-in-out 1; transform-origin: 50% 80%; }
@keyframes chatKommt { from { opacity: 0; transform: translateY(18px) scale(.7); } 70% { opacity: 1; transform: translateY(-3px) scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes chatNickt { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(9deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(2deg); } }
/* Neue Nachricht, waehrend das Fenster zu ist: ein kleiner Zaehler */
body.oeffentlich .chatstart .chatstart-neu {
  position: absolute; top: -4px; left: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: #D1432B; color: #FFFFFF; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--papier-hell);
}
/* Unten rechts nichts verdecken: Seiten bekommen unten Platz fuer das Symbol */
body.oeffentlich:not(.eingebettet) { padding-bottom: 0; }
body.oeffentlich .fuss { padding-bottom: 96px; }
/* Steht die Vergleichsleiste über dem Chat-Symbol (bis 860 px), braucht der
   Fuß mehr Platz; sonst lag sie über dem letzten Link (Gegenlesen Lauf 13,
   zweite Runde). */
@media (max-width: 860px) {
  body.oeffentlich:has(.vergleichsleiste:not([hidden])) .fuss { padding-bottom: 176px; }
}

/* --- Das Chatfenster (seite.js) -------------------------------------------
   Auf dem grossen Bildschirm ein Fenster ueber dem Symbol, auf dem Handy der
   ganze Bildschirm. Darin die Chatseite selbst (iframe, /chat im Fenster-
   Modus): derselbe Chat, dieselben Regeln, nichts doppelt gebaut. */
body.oeffentlich .chatfenster {
  position: fixed; z-index: 45; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 70px);
  width: min(400px, calc(100vw - 32px)); height: min(640px, calc(100vh - 120px)); height: min(640px, calc(100dvh - 120px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--papier-hell); border: 1px solid var(--linie); border-radius: 22px; box-shadow: 0 24px 60px rgba(20, 30, 50, .22), 0 4px 14px rgba(20, 30, 50, .10);
  transform-origin: 100% 100%; animation: fensterAuf .26s var(--weich);
}
body.oeffentlich .chatfenster[hidden] { display: none; }
@keyframes fensterAuf { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
body.oeffentlich .chatfensterkopf {
  display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 18px;
  background: var(--knopf-flaeche); color: var(--knopf-schrift);
}
body.oeffentlich .chatfensterkopf strong { font-family: Nunito, system-ui, sans-serif; font-size: 16px; font-weight: 800; margin-right: auto; }
body.oeffentlich .chatfensterkopf .zustand { font-size: 12.5px; opacity: .92; display: inline-flex; align-items: center; gap: 6px; }
body.oeffentlich .chatfensterkopf .zustand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #94A3B8; }
body.oeffentlich .chatfensterkopf .zustand.da::before { background: #4ADE80; }
body.oeffentlich .chatfensterkopf a, body.oeffentlich .chatfensterkopf button {
  min-height: 36px; min-width: 36px; padding: 0; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16); color: inherit;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: none; text-decoration: none; font-size: 20px; line-height: 1;
}
@media (hover: hover) {
  body.oeffentlich .chatfensterkopf a:hover, body.oeffentlich .chatfensterkopf button:hover { background: rgba(255, 255, 255, .28); transform: none; box-shadow: none; }
}
body.oeffentlich .chatfensterkopf :focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
body.oeffentlich .chatfenster iframe { flex: 1; width: 100%; border: 0; background: var(--papier); }
@media (max-width: 600px) {
  body.oeffentlich .chatfenster { inset: 0; width: auto; height: auto; border-radius: 0; border: 0; bottom: 0; right: 0; }
  body.oeffentlich .chatfensterkopf { padding-top: max(12px, env(safe-area-inset-top)); }
  body.oeffentlich.chat-offen .chatstart { display: none; }
  body.oeffentlich.chat-offen { overflow: hidden; }
}

/* --- Die Chatseite im Fenster: nur der Chat, eng und ruhig ---------------- */
body.oeffentlich.eingebettet { background: var(--papier); }
body.oeffentlich.eingebettet main .huelle { padding: 14px 14px 18px; max-width: none; }
body.oeffentlich.eingebettet .chatkopf h1, body.oeffentlich.eingebettet .anmeldungskopf h1 { font-size: 18px; margin-bottom: 4px; }
body.oeffentlich.eingebettet .karte { box-shadow: none; }
body.oeffentlich.eingebettet .verlauf { max-height: none; }
body.oeffentlich.eingebettet .chatbeenden { margin-top: 12px; }

/* Die automatische Nachricht ausserhalb der Servicezeiten */
body.oeffentlich .verlauf.automatisch { max-height: none; margin: 14px 0 18px; overflow: visible; }
body.oeffentlich .automatikmarke {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; vertical-align: 1px;
  background: var(--akzent-flaeche); color: var(--akzent-vorne); font-size: 11px; font-weight: 700;
}
/* Nachrichten im Chat: weiche Sprechblasen */
body.oeffentlich .nachricht { border-radius: 18px; padding: 10px 14px; box-shadow: 0 1px 2px rgba(20, 30, 50, .05); }
body.oeffentlich .nachricht.von-mir { border-bottom-right-radius: 6px; }
body.oeffentlich .nachricht.von-team { border-bottom-left-radius: 6px; background: var(--papier-hell); border-color: var(--linie); }
body.oeffentlich .nachricht.von-system { border-radius: 12px; box-shadow: none; }
/* Im Fenster traegt der Fensterkopf schon „Chat" */
body.oeffentlich.eingebettet .chatkopf h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body.oeffentlich.eingebettet .anmeldungskopf h1 { font-size: 17px; }
body.oeffentlich.eingebettet .wiederab { margin: 0; font-size: 14px; }

/* --- Startseite: Foto mit Suche, darunter Suchknoepfe, dann die Fahrzeuge -- */
body.oeffentlich .aufmacher { position: relative; margin: 0; min-height: 400px; display: flex; overflow: hidden; }
body.oeffentlich .aufmacherinhalt {
  position: relative; width: 100%; max-width: 1180px; margin: 0 auto; padding: 40px 16px 32px; color: var(--text);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 24px; align-items: end;
}
body.oeffentlich .suchkarte {
  grid-column: 2; align-self: center; background: var(--papier-hell); border-radius: 22px; padding: 20px 20px 18px;
  box-shadow: 0 18px 44px rgba(10, 22, 40, .22), 0 2px 8px rgba(10, 22, 40, .10); border: 1px solid rgba(255, 255, 255, .6);
}
body.oeffentlich .suchkarte h2 { font-size: 17px; margin: 0 0 12px; }
body.oeffentlich .suchraster { gap: 10px; }
body.oeffentlich .suchraster label { font-size: 12.5px; font-weight: 700; color: var(--text-leise); }
body.oeffentlich .suchraster select, body.oeffentlich .suchraster input { height: auto; margin-top: 4px; padding: 0 12px; }
body.oeffentlich .suchkarte button[type="submit"] { width: 100%; margin-top: 14px; }
/* Die Zahl der Fahrzeuge als ruhige Pille auf dem Foto */
body.oeffentlich .bestandspille {
  grid-column: 1; grid-row: 1; justify-self: start; align-self: end;
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: var(--radius-rund);
  background: rgba(255, 255, 255, .94); color: var(--text); text-decoration: none; font-weight: 700; font-size: 14.5px;
  box-shadow: 0 8px 24px rgba(10, 22, 40, .20); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .18s var(--weich), box-shadow .18s var(--weich);
}
body.oeffentlich .bestandszahl {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: var(--radius-rund);
  background: var(--knopf-flaeche); color: var(--knopf-schrift); font-family: Nunito, system-ui, sans-serif; font-size: 16px; font-weight: 800;
}
body.oeffentlich .bestandspille .pfeil { font-size: 20px; line-height: 1; color: var(--akzent-vorne); margin-left: 2px; }
@media (hover: hover) { body.oeffentlich .bestandspille:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(10, 22, 40, .26); color: var(--text); } }
:root[data-modus="dunkel"] body.oeffentlich .bestandspille { background: rgba(21, 32, 51, .92); color: var(--text); }
@media (prefers-color-scheme: dark) { :root[data-modus="system"] body.oeffentlich .bestandspille { background: rgba(21, 32, 51, .92); color: var(--text); } }
@media (max-width: 860px) {
  body.oeffentlich .aufmacher { min-height: 168px; }
  body.oeffentlich .aufmacherinhalt { grid-template-columns: minmax(0, 1fr); padding: 20px 16px 16px; align-items: end; }
  body.oeffentlich .suchkarte { display: none; }
}

/* Suchknoepfe zum Antippen: eine ruhige Reihe; auf dem Handy seitlich wischen */
body.oeffentlich .schnellwahl { max-width: 1180px; margin: 0 auto; padding: 16px 16px 0; }
body.oeffentlich .schnellwahlreihe { display: flex; flex-wrap: wrap; gap: 8px; }
body.oeffentlich .chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--hoehe-bedien); padding: 0 8px 0 15px; border-radius: var(--radius-rund);
  border: 1px solid var(--rahmen-knopf); background: var(--papier-hell); color: var(--text-gedaempft); text-decoration: none; white-space: nowrap;
  font-family: Nunito, system-ui, sans-serif; font-size: 14px; font-weight: 700; box-shadow: 0 1px 2px rgba(20, 30, 50, .04);
  transition: transform .18s var(--weich), box-shadow .18s var(--weich), background-color .18s, border-color .18s, color .18s;
}
body.oeffentlich .chipzahl {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: var(--radius-rund);
  background: var(--akzent-flaeche); color: var(--akzent-vorne); font-size: 12.5px; font-weight: 800;
}
@media (hover: hover) {
  body.oeffentlich .chip:hover { background: var(--akzent-flaeche); border-color: var(--akzent-rahmen); color: var(--akzent-vorne); transform: translateY(-1px); box-shadow: var(--schatten-zweit-hoch); }
  body.oeffentlich .chip:hover .chipzahl { background: var(--papier-hell); }
}
body.oeffentlich .chip:active { transform: scale(.98); box-shadow: var(--schatten-gedrueckt); }
@media (max-width: 860px) {
  body.oeffentlich .schnellwahl { padding: 12px 0 0; }
  body.oeffentlich .schnellwahlreihe { flex-wrap: nowrap; overflow-x: auto; padding: 2px 16px 8px; scroll-padding: 0 16px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  body.oeffentlich .schnellwahlreihe::-webkit-scrollbar { display: none; }
  body.oeffentlich .chip { scroll-snap-align: start; }
}
body.oeffentlich .startinhalt { padding-top: 8px; }
body.oeffentlich .startinhalt > .abschnittskopf:first-child .abschnittstitel { margin-top: 18px; }
body.oeffentlich .abschnittskopf { align-items: center; }
body.oeffentlich .abschnittslink {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--radius-rund);
  border: 1px solid var(--rahmen-knopf); background: var(--papier-hell); font-family: Nunito, system-ui, sans-serif; font-size: 13.5px; font-weight: 700;
  text-decoration: none; color: var(--akzent-vorne); transition: background-color .18s, transform .18s var(--weich);
}
@media (hover: hover) { body.oeffentlich .abschnittslink:hover { background: var(--akzent-flaeche); transform: translateY(-1px); } }

/* --- Fahrzeugkacheln: rund, ruhig, heben sich beim Drueberfahren leicht --- */
body.oeffentlich .kachelraster, body.mitarbeiter .kachelraster { gap: 16px; }
body.oeffentlich .fahrzeugkachel, body.mitarbeiter .fahrzeugkachel {
  border-radius: var(--radius); border: 1px solid var(--linie); background: var(--papier-hell); box-shadow: var(--schatten); overflow: hidden;
  transition: transform .22s var(--weich), box-shadow .22s var(--weich), border-color .22s;
}
@media (hover: hover) {
  body.oeffentlich .fahrzeugkachel:hover, body.mitarbeiter .fahrzeugkachel:hover { transform: translateY(-3px); box-shadow: var(--schatten-stark); border-color: var(--akzent-rahmen); }
}
body.oeffentlich .fahrzeugkachel:active { transform: translateY(-1px) scale(.995); }
body.oeffentlich .kachelbild img { transition: transform .5s var(--weich); }
@media (hover: hover) { body.oeffentlich .fahrzeugkachel:hover .kachelbild img { transform: scale(1.03); } }
body.oeffentlich .kachelbild { overflow: hidden; }
body.oeffentlich .kachelinhalt { padding: 13px 16px 15px; }
body.oeffentlich .kachelinhalt h3 { font-size: 16px; font-weight: 800; margin: 0 0 2px; }
body.oeffentlich .kachellinie { font-size: 13.5px; font-weight: 600; color: var(--text-gedaempft); margin: 0 0 6px; }
body.oeffentlich .kacheldaten { font-size: 13px; color: var(--text-leise); line-height: 1.5; }
body.oeffentlich .kachelpreis { font-size: 18px; font-weight: 800; margin-top: 6px; }
body.oeffentlich .kachelpreis.anfrage { font-size: 14.5px; font-weight: 700; color: var(--text-gedaempft); }
body.oeffentlich .statuspunkt { border-radius: var(--radius-rund); font-size: 12px; font-weight: 700; padding: 4px 11px; }

/* --- Vorteile, Ablauf, Kontaktblock: weiche Karten ------------------------- */
body.oeffentlich .vorteile li, body.oeffentlich .ablauf li { border-radius: var(--radius); padding: 20px; }
body.oeffentlich .vorteile li::before { width: 34px; height: 34px; }
body.oeffentlich .vorteile h3, body.oeffentlich .ablauf h3 { font-size: 16px; }
body.oeffentlich .vorteile p, body.oeffentlich .ablauf p { font-size: 14.5px; }
body.oeffentlich .kontaktblock { border-radius: 22px; padding: 24px 26px; }
body.oeffentlich .kontaktblock h2 { font-size: 19px; }
body.oeffentlich .partnerkachel { border-radius: 16px; }

/* --- Auswahllisten: rund, mit ruhigem Pfeil statt des Systempfeils ------- */
body.oeffentlich select, body.mitarbeiter select {
  -webkit-appearance: none; appearance: none; padding-right: 38px !important; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%2356657A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px 18px;
}
:root[data-modus="dunkel"] body.oeffentlich select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%239AAABD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root[data-modus="system"] body.oeffentlich select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%239AAABD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
body.oeffentlich select[multiple], body.mitarbeiter select[multiple] { background-image: none; padding-right: 12px !important; }

/* --- Fahrzeugseite: die Wege unter dem Preis ------------------------------ */
body.oeffentlich .fahrzeugaktionen { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 22px; }
@media (max-width: 600px) {
  body.oeffentlich .fahrzeugaktionen { display: grid; grid-template-columns: 1fr 1fr; }
  body.oeffentlich .fahrzeugaktionen .knopf:first-child, body.oeffentlich .fahrzeugaktionen .knopf:nth-child(2) { grid-column: 1 / -1; }
}
body.oeffentlich .preisblock { margin: 10px 0 18px; }
body.oeffentlich .datenzeile { font-size: 14.5px; }
body.oeffentlich .fahrzeugseite .galerie { border-radius: 0 0 var(--radius) var(--radius); }
@media (min-width: 900px) { body.oeffentlich .fahrzeugseite .galerie { max-width: 1180px; margin: 16px auto 0; border-radius: var(--radius); } }

/* --- Anfrageformular (Kauf und Finanzierung) --------------------------------- */
body.oeffentlich .kaufanfrage { padding: 24px; }
body.oeffentlich .kaufanfrage fieldset { margin-bottom: 28px; }
body.oeffentlich .kaufanfrage legend { font-size: 18px; font-weight: 800; margin-bottom: 14px; }
body.oeffentlich .nummer { width: 30px; height: 30px; border-radius: 50%; font-size: 14px; font-weight: 800; }
body.oeffentlich .feld > span { font-size: 13px; font-weight: 700; color: var(--text-gedaempft); }
body.oeffentlich .feld input, body.oeffentlich .feld select, body.oeffentlich .feld textarea { padding: 10px 14px; }
/* Die feste Höhe aus der Grundregel (44 Pixel für E-Mail, Text, Passwort)
   machte das E-Mail-Feld niedriger als die Nummernfelder daneben; seit dem
   26.09.2026 steht es zwischen WhatsApp und Telefon, dort fiel es auf. */
body.oeffentlich .feld input[type=email], body.oeffentlich .feld input[type=text], body.oeffentlich .feld input[type=password] { height: auto; }
body.oeffentlich .wahl { border-radius: 14px; border-color: var(--linie); padding: 12px 14px; transition: border-color .18s, background-color .18s; }
body.oeffentlich .wahl:has(input:checked) { border-color: var(--akzent-vorne); background: var(--akzent-flaeche); }
body.oeffentlich .absendezeile { border-top-color: var(--linie-fein); }
@media (max-width: 600px) { body.oeffentlich .kaufanfrage { padding: 16px; } }

/* Fahrzeugwahl: zuletzt angesehen als kleine Karten, das gewaehlte gross */
body.oeffentlich .zuletztblock { margin-bottom: 14px; }
body.oeffentlich .zuletzttitel { margin: 0 0 8px; font-weight: 700; }
body.oeffentlich .zuletztliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
body.oeffentlich .zuletztkarte {
  display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; min-height: 0; height: auto;
  border-radius: 14px; border: 1px solid var(--linie); background: var(--papier-hell); color: var(--text); text-align: left;
  overflow: hidden; box-shadow: 0 1px 2px rgba(20, 30, 50, .05); font-family: "Nunito Sans", system-ui, sans-serif; font-weight: 400;
}
body.oeffentlich .zuletztkarte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--bildgrund); }
body.oeffentlich .zuletztkarte .zuletzttitel { padding: 8px 10px 0; font-family: Nunito, system-ui, sans-serif; font-size: 13.5px; font-weight: 800; line-height: 1.3; }
body.oeffentlich .zuletztpreis { padding: 2px 10px 10px; font-size: 12.5px; color: var(--text-leise); }
@media (hover: hover) {
  body.oeffentlich .zuletztkarte:hover { background: var(--papier-hell); color: var(--text); border-color: var(--akzent-rahmen); transform: translateY(-2px); box-shadow: var(--schatten-zweit-hoch); }
}
body.oeffentlich .zuletztkarte[aria-pressed="true"] { border-color: var(--akzent-vorne); box-shadow: 0 0 0 2px var(--akzent-vorne); }
body.oeffentlich .gewaehltkarte {
  display: flex; gap: 14px; align-items: center; margin-top: 12px; padding: 10px; border-radius: 16px;
  background: var(--akzent-flaeche); border: 1px solid var(--akzent-rahmen);
}
body.oeffentlich .gewaehltkarte[hidden] { display: none; }
body.oeffentlich .gewaehltkarte img { width: 120px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; flex-shrink: 0; background: var(--bildgrund); }
body.oeffentlich .gewaehltkarte p { margin: 0; line-height: 1.45; }
body.oeffentlich .gewaehlttitel { font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 15.5px; }
body.oeffentlich .gewaehltpreis { font-family: Nunito, system-ui, sans-serif; font-weight: 800; margin-top: 4px !important; }
body.oeffentlich .auftauchen { animation: auftauchen .35s var(--weich); }
@keyframes auftauchen { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) { body.oeffentlich .gewaehltkarte img { width: 92px; } }

/* Restbetrag und Ratenrechner */
body.oeffentlich .restzeile { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--papier-zart); border: 1px dashed var(--rahmen-knopf); font-size: 14.5px; }
body.oeffentlich .restzeile strong { font-family: Nunito, system-ui, sans-serif; font-weight: 800; }
body.oeffentlich .ratenrechner {
  margin-top: 16px; padding: 18px; border-radius: 20px;
  background: linear-gradient(180deg, var(--akzent-flaeche), var(--papier-hell)); border: 1px solid var(--akzent-rahmen);
}
body.oeffentlich .ratenrechner[hidden] { display: none; }
body.oeffentlich .rechnerkopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
body.oeffentlich .rechnertitel { margin: 0; font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 16px; }
body.oeffentlich .rechnerkopf .leise { margin: 0; }
body.oeffentlich .schieber { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; margin: 10px 0 14px; font-size: 13.5px; font-weight: 700; color: var(--text-gedaempft); }
body.oeffentlich .schieber output { font-family: Nunito, system-ui, sans-serif; font-size: 15px; font-weight: 800; color: var(--text); }
body.oeffentlich .schieber input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--akzent-vorne); height: 28px; cursor: pointer; }
body.oeffentlich .laufzeitwahl { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
body.oeffentlich .laufzeitknopf {
  min-height: 38px; padding: 0 14px; border-radius: var(--radius-rund); border: 1px solid var(--rahmen-knopf);
  background: var(--papier-hell); color: var(--text-gedaempft); font-size: 13.5px; font-weight: 700; box-shadow: none;
}
body.oeffentlich .laufzeitknopf[aria-pressed="true"] { background: var(--knopf-flaeche); border-color: var(--knopf-flaeche); color: var(--knopf-schrift); box-shadow: var(--schatten-knopf); }
@media (hover: hover) { body.oeffentlich .laufzeitknopf[aria-pressed="true"]:hover { background: var(--knopf-flaeche-hover); color: var(--knopf-schrift); } }
body.oeffentlich .rateanzeige { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
body.oeffentlich .rateetikett { font-size: 14px; font-weight: 700; color: var(--text-gedaempft); }
body.oeffentlich .ratebetrag { font-family: Nunito, system-ui, sans-serif; font-size: 30px; font-weight: 800; color: var(--akzent-vorne); line-height: 1.1; }
@keyframes frisch { from { opacity: .35; transform: translateY(3px); } to { opacity: 1; transform: none; } }
body.oeffentlich .rechnerhinweis { margin: 0 0 10px; }
body.oeffentlich input.uebernommen { animation: uebernommen 1.2s ease-out; }
@keyframes uebernommen { 0% { box-shadow: 0 0 0 4px var(--fokus-ring); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* --- Lieferseite ------------------------------------------------------------- */
body.oeffentlich .lieferplaner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px 28px; align-items: center; padding: 26px; }
body.oeffentlich .lieferplaner h2 { margin: 0 0 14px; }
body.oeffentlich .laenderwahl { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
body.oeffentlich .landchip { padding: 0 16px; }
body.oeffentlich .landchip[aria-current="true"] { background: var(--knopf-flaeche); border-color: var(--knopf-flaeche); color: var(--knopf-schrift); box-shadow: var(--schatten-knopf); }
@media (hover: hover) { body.oeffentlich .landchip[aria-current="true"]:hover { background: var(--knopf-flaeche-hover); color: var(--knopf-schrift); border-color: var(--knopf-flaeche-hover); } }
body.oeffentlich .zieldaten { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0 0 16px; }
body.oeffentlich .zieldaten[hidden] { display: none; }
body.oeffentlich .zieldaten > div { padding: 12px 14px; border-radius: 14px; background: var(--papier-zart); border: 1px solid var(--linie); }
body.oeffentlich .zieldaten > div[hidden] { display: none; }
body.oeffentlich .zieldaten dt { font-size: 12.5px; font-weight: 700; color: var(--text-leise); }
body.oeffentlich .zieldaten dd { margin: 2px 0 0; font-family: Nunito, system-ui, sans-serif; font-size: 17px; font-weight: 800; }
body.oeffentlich .zielpreis { color: var(--akzent-vorne); }
body.oeffentlich .planerknoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 860px) {
  body.oeffentlich .lieferplaner { grid-template-columns: 1fr; padding: 18px; }
}

/* --- Ueber uns ------------------------------------------------------------------ */
body.oeffentlich .ueberkopf { display: grid; gap: 24px; align-items: center; }
body.oeffentlich .ueberkopf.mit-bild { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.oeffentlich .ueberbild { margin: 0; border-radius: 22px; overflow: hidden; box-shadow: var(--schatten-stark); }
body.oeffentlich .ueberbild img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
body.oeffentlich .uebertext .fliesstext { font-size: 15.5px; }
@media (max-width: 860px) { body.oeffentlich .ueberkopf.mit-bild { grid-template-columns: 1fr; } }
body.oeffentlich .kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 30px 0 0; }
@media (max-width: 600px) {
  body.oeffentlich .kennzahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  body.oeffentlich .kennzahl { padding: 14px 12px; }
  body.oeffentlich .kennwert { font-size: 26px; }
  body.oeffentlich .kenntext { font-size: 12.5px; line-height: 1.35; }
  body.oeffentlich .kennpfeil { display: none; }
}
body.oeffentlich .kennzahl {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; border-radius: var(--radius);
  background: var(--papier-hell); border: 1px solid var(--linie); box-shadow: var(--schatten); color: var(--text); text-decoration: none;
  transition: transform .2s var(--weich), box-shadow .2s var(--weich), border-color .2s;
}
@media (hover: hover) { body.oeffentlich .kennzahl:hover { transform: translateY(-2px); box-shadow: var(--schatten-stark); border-color: var(--akzent-rahmen); color: var(--text); } }
body.oeffentlich .kennzahl:active { transform: scale(.99); }
body.oeffentlich .kennwert { font-family: Nunito, system-ui, sans-serif; font-size: 34px; font-weight: 800; color: var(--akzent-vorne); line-height: 1.1; font-variant-numeric: tabular-nums; }
body.oeffentlich .kenntext { font-size: 14px; font-weight: 700; color: var(--text-gedaempft); }
body.oeffentlich .kennpfeil { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--akzent-vorne); opacity: .6; }
body.oeffentlich .schnellwahlreihe.umbrechen { flex-wrap: wrap; overflow: visible; padding: 0; }
body.oeffentlich .wegepunkt { width: 10px; height: 10px; border-radius: 50%; background: #94A3B8; box-shadow: 0 0 0 4px rgba(148, 163, 184, .2); }
body.oeffentlich .wegepunkt.da { background: #22A06B; box-shadow: 0 0 0 4px rgba(34, 160, 107, .18); }

/* --- Weniger Bewegung --------------------------------------------------------
   Wer am Geraet „Bewegung reduzieren" eingestellt hat, bekommt dieselbe Seite
   ohne Anheben, Nicken und Fahren: alles steht gleich am Ziel. */
@media (prefers-reduced-motion: reduce) {
  body.oeffentlich *, body.mitarbeiter *, body.oeffentlich *::before, body.mitarbeiter *::before, body.oeffentlich *::after, body.mitarbeiter *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  body.oeffentlich .knopf:hover, body.mitarbeiter .knopf:hover, body.oeffentlich button:hover, body.mitarbeiter button:hover,
  body.oeffentlich .fahrzeugkachel:hover, body.mitarbeiter .fahrzeugkachel:hover, body.oeffentlich .chip:hover, body.oeffentlich .kennzahl:hover,
  body.oeffentlich .chatstart:hover, body.oeffentlich .kopf .navknopf:hover, body.mitarbeiter .kopf nav a:hover { transform: none !important; }
  body.oeffentlich .fahrzeugkachel:hover .kachelbild img { transform: none !important; }
}

/* Dateifelder: der Knopf darin rund und ruhig wie alle anderen */
body.oeffentlich input[type="file"], body.mitarbeiter input[type="file"] {
  width: 100%; padding: 6px; border: 1px dashed var(--rahmen-knopf); border-radius: var(--radius-klein);
  background: var(--papier-zart); color: var(--text-leise); font-size: 13.5px; min-height: 0;
}
body.oeffentlich input[type="file"]::file-selector-button, body.mitarbeiter input[type="file"]::file-selector-button {
  margin-right: 10px; min-height: 34px; padding: 0 14px; border-radius: var(--radius-rund); border: 1px solid var(--akzent-rahmen);
  background: var(--papier-hell); color: var(--akzent-vorne); font-family: Nunito, system-ui, sans-serif; font-weight: 700; font-size: 13.5px; cursor: pointer;
  transition: background-color .18s;
}
body.oeffentlich input[type="file"]::file-selector-button:hover, body.mitarbeiter input[type="file"]::file-selector-button:hover { background: var(--akzent-flaeche); }

/* --- Kopf des Mitarbeiterbereichs: oben Marke und Konto, darunter die
   Bereiche; auf Handy und Tablet nur Marke und Menue ------------------------ */
body.mitarbeiter .kopf { flex-wrap: wrap; align-items: center; row-gap: 10px; }
body.mitarbeiter .kopf .kopfnav { order: 3; width: 100%; justify-content: flex-start; gap: 6px; }
body.mitarbeiter .kopfrechts { margin-left: auto; }
body.mitarbeiter .kontoknopf {
  display: inline-flex; align-items: center; min-height: var(--hoehe-bedien); padding: 0 14px; border-radius: var(--radius-rund);
  border: 1px solid var(--rahmen-knopf); background: var(--papier-hell); color: var(--text-gedaempft);
  font-family: Nunito, system-ui, sans-serif; font-size: 13.5px; font-weight: 700; text-decoration: none;
}
@media (hover: hover) { body.mitarbeiter .kopf .kontoknopf:hover { background: var(--akzent-flaeche); color: var(--akzent-vorne); } }
body.mitarbeiter .abmelden { margin: 0; }
body.mitarbeiter .kopf button.zweitknopf { min-height: var(--hoehe-bedien); font-size: 13.5px; }
body.mitarbeiter .kopf .navknopf .zaehlpunkt { margin-left: 2px; }
@media (max-width: 899px) {
  body.mitarbeiter .kopf .kopfnav, body.mitarbeiter .kopf > .kopfrechts { display: none; }
  body.mitarbeiter .menue { display: block; margin-left: auto; }
  body.mitarbeiter .kopf { flex-wrap: nowrap; }
}
body.mitarbeiter .menueinhalt nav a { justify-content: center; }
body.mitarbeiter .menuewahl .kontoknopf { flex: 1 1 auto; justify-content: center; }

/* Kleinigkeiten im Mitarbeiterbereich: runde Zaehler, Luft ueber Knoepfen */
body.mitarbeiter .musterzahl, body.mitarbeiter .mustermarke { border-radius: var(--radius-rund); padding: 2px 9px; }
body.mitarbeiter .hinzufuegen button, body.mitarbeiter .entfernenzeile button { margin-top: 12px; }
body.mitarbeiter .entfernenzeile { align-items: flex-end; }
body.mitarbeiter .lieferpreistabelle td.tagefelder { white-space: nowrap; }
body.mitarbeiter .lieferpreistabelle td.tagefelder input { width: 64px; min-width: 0; padding: 8px 10px; }
body.mitarbeiter .lieferpreistabelle td.tagefelder span { margin: 0 6px; }
body.mitarbeiter .bereichsnav { border-radius: var(--radius); }

/* ===== Nach dem Gegenlesen (23.09.2026) =================================== */

/* Der klebende Kopf verdeckt nichts mehr: Sprungziele (#lieferziel, #marken,
   #galerie, #bilder) und fokussierte Felder halten Abstand zu ihm, und die
   mitlaufenden Spalten beginnen unter ihm. Die Hoehe steht hier fest, je
   Bereich und Breite so, wie sie im Browser gemessen wurde. */
html[data-bereich="oeffentlich"] { --kopf-hoehe: 64px; }
html[data-bereich="mitarbeiter"] { --kopf-hoehe: 115px; }
@media (max-width: 1023px) {
  html[data-bereich="oeffentlich"] { --kopf-hoehe: 60px; }
}
/* Im Mitarbeiterbereich brechen die Bereichsknoepfe je nach Rechten und
   Zaehlern frueher oder spaeter in eine zweite Reihe um: bis 1099 px lieber
   die hoehere Angabe (etwas mehr Abstand schadet nicht, zu wenig verdeckt). */
@media (max-width: 1099px) {
  html[data-bereich="mitarbeiter"] { --kopf-hoehe: 161px; }
}
@media (max-width: 899px) {
  html[data-bereich="mitarbeiter"] { --kopf-hoehe: 64px; }
}
html[data-bereich] { scroll-padding-top: calc(var(--kopf-hoehe) + 12px); }
body.oeffentlich .formularspalte, body.mitarbeiter .formularspalte, body.oeffentlich .bereichsnav, body.mitarbeiter .bereichsnav { top: calc(var(--kopf-hoehe, 0px) + 16px); }
/* Nur wo die Spalten kleben (ab 901 px): Passt eine nicht unter den Kopf,
   rollt sie in sich, statt unten aus dem Bild zu laufen. Das Rollen der
   Seite geht dabei weiter (dritte Runde Gegenlesen). */
@media (min-width: 901px) {
  body.oeffentlich .formularspalte, body.mitarbeiter .formularspalte, body.oeffentlich .bereichsnav, body.mitarbeiter .bereichsnav {
    max-height: calc(100vh - var(--kopf-hoehe, 0px) - 32px); overflow-y: auto;
  }
}
/* Auf Handy und Tablet steht die Gruppenleiste der Einstellungen ueber den
   Feldern und klebt nicht mit (sie verdeckte sonst den halben Bildschirm). */
@media (max-width: 900px) {
  body.oeffentlich .bereichsnav, body.mitarbeiter .bereichsnav { position: static; }
}

/* „Zum Inhalt springen" liegt beim Fokus ueber dem klebenden Kopf. */
body.oeffentlich .zumInhalt:focus, body.mitarbeiter .zumInhalt:focus { z-index: 60; }

/* Tastaturfokus: ueberall ein deutlicher Rahmen in der Akzentfarbe, auch bei
   Sprache und Hell/Dunkel (dort hatte der schlichte Stil den Ring entfernt). */
body.oeffentlich .knopf:focus-visible, body.mitarbeiter .knopf:focus-visible,
body.oeffentlich button:focus-visible, body.mitarbeiter button:focus-visible,
body.oeffentlich .sprachwahl button:focus-visible, body.mitarbeiter .sprachwahl button:focus-visible,
body.oeffentlich .modusform button:focus-visible, body.mitarbeiter .modusform button:focus-visible {
  outline: 2px solid var(--fokus); outline-offset: 2px;
}

/* Links als Links erkennbar, auch im Fuss und im Dunkelmodus: eine ruhige,
   aber sichtbare Unterstreichung. */
body.oeffentlich, body.mitarbeiter { --link-linie: rgba(31, 95, 153, .45); }
@media (prefers-color-scheme: dark) {
  :root[data-modus="system"] body.oeffentlich { --link-linie: rgba(139, 190, 240, .55); }
}
:root[data-modus="dunkel"] body.oeffentlich { --link-linie: rgba(139, 190, 240, .55); }
body.oeffentlich a, body.mitarbeiter a { text-decoration-color: var(--link-linie); }
body.oeffentlich a:hover, body.mitarbeiter a:hover { text-decoration-color: currentColor; }
body.oeffentlich .fuss a, body.mitarbeiter .fuss a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, .42);
}
body.oeffentlich .fuss a:hover, body.mitarbeiter .fuss a:hover { text-decoration-color: currentColor; }
body.oeffentlich .fusspartnerreihe a, body.mitarbeiter .fusspartnerreihe a { text-decoration: none; }

/* Das Chatfenster laesst den Kopf frei (Sprache, Hell/Dunkel bleiben bedienbar). */
body.oeffentlich .chatfenster {
  height: min(640px, calc(100vh - var(--kopf-hoehe, 64px) - 118px));
  height: min(640px, calc(100dvh - var(--kopf-hoehe, 64px) - 118px));
}
@media (max-width: 600px) {
  body.oeffentlich .chatfenster { height: auto; }
}
/* Quer gehaltenes Handy: wenig Hoehe, also auch dort den ganzen Bildschirm. */
@media (max-height: 500px) {
  body.oeffentlich .chatfenster { inset: 0; width: auto; height: auto; border-radius: 0; border: 0; bottom: 0; right: 0; }
  body.oeffentlich .chatfensterkopf { padding-top: max(12px, env(safe-area-inset-top)); }
  body.oeffentlich.chat-offen .chatstart { display: none; }
  body.oeffentlich.chat-offen { overflow: hidden; }
}
/* Fokus im Kopf des Chatfensters: in der Schriftfarbe des Kopfes, also auch
   im Dunkelmodus (dort ist der Kopf hellblau) gut zu sehen. */
body.oeffentlich .chatfensterkopf :focus-visible { outline-color: var(--knopf-schrift); }
/* Kaestchen und Auswahlpunkte: derselbe deutliche Fokusrahmen wie ueberall. */
body.oeffentlich input[type="checkbox"]:focus-visible, body.mitarbeiter input[type="checkbox"]:focus-visible,
body.oeffentlich input[type="radio"]:focus-visible, body.mitarbeiter input[type="radio"]:focus-visible {
  outline: 2px solid var(--fokus); outline-offset: 2px; box-shadow: none;
}

/* Der Name im Kopf wird bei Platzmangel mit „…" gekuerzt, nicht mitten im
   Buchstaben abgeschnitten, und nutzt den Platz, der da ist. */
body.oeffentlich .kopf .marke, body.mitarbeiter .kopf .marke { min-width: 0; }
/* Auf dem Handy den freien Platz nutzen; auf grossen Bildschirmen bleibt die
   Grenze, sonst liefe ein langer Name unter die Bereichsknoepfe. */
@media (max-width: 1023px) { body.oeffentlich .kopf .marke { max-width: none; } }
@media (max-width: 899px) { body.mitarbeiter .kopf .marke { max-width: none; } }
body.oeffentlich .kopf .markenname, body.mitarbeiter .kopf .markenname {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Auf Geraeten mit Fingerbedienung mindestens 16 px in Auswahlfeldern und
   Eingaben: Sonst vergroessert das iPhone beim Antippen die ganze Seite. */
@media (pointer: coarse) {
  body.oeffentlich select, body.mitarbeiter select, body.oeffentlich .suchraster select, body.oeffentlich .suchraster input { font-size: 16px; }
}

/* Ratenrechner: Zeilen, die das Skript ausblendet, bleiben auch ausgeblendet
   (die eigene display-Regel schlaegt sonst das hidden-Attribut). */
body.oeffentlich .rateanzeige[hidden], body.oeffentlich .ratenrechner .knopf[hidden] { display: none; }
body.oeffentlich .rateanzeige [data-rate-bei]:empty { display: none; }

/* --- Dateiwahl (23.09.2026): Titel und Kaesten buendig, eigener Knopf -------
   Kaufanfrage und Finanzierung (Unterlagen) und die Dateifelder im
   Mitarbeiterbereich. Ohne JavaScript steht im Kasten das
   Feld des Browsers; mit dateiwahl.js ein eigener Knopf und die Liste der
   gewaehlten Dateien. Zwei Spalten ab 700 px, sonst eine. Titel in einer
   Reihe enden auf gleicher Hoehe, die Kaesten beginnen auf gleicher Hoehe,
   auch wenn ein Titel zweizeilig ist. */
.dateiwahlen { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 18px; row-gap: 16px; margin-bottom: 12px; }
@media (min-width: 700px) { .dateiwahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dateiwahl { display: grid; grid-template-rows: auto 1fr; row-gap: 6px; min-width: 0; }
@supports (grid-template-rows: subgrid) {
  .dateiwahlen .dateiwahl { grid-row: span 2; grid-template-rows: subgrid; row-gap: 6px; }
}
.dateiwahl-titel { align-self: end; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--text-gedaempft); }
.dateiwahl-titel small { font-size: 12px; font-weight: 600; color: var(--text-leise); }
body.mitarbeiter .dateiwahl-titel { font-weight: 600; }
.dateiwahl-kasten {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0;
  padding: 12px; border: 1px dashed var(--rahmen-knopf); border-radius: var(--radius-klein); background: var(--papier-zart);
  transition: border-color .18s, background-color .18s, box-shadow .18s;
}
.dateiwahl-kasten.ziel { border-style: solid; border-color: var(--akzent-vorne); background: var(--akzent-flaeche); box-shadow: 0 0 0 3px var(--fokus-ring); }
/* Ohne JavaScript: das Feld des Browsers, ohne eigenen Rahmen im Kasten */
body.oeffentlich .dateiwahl-kasten input[type="file"], body.mitarbeiter .dateiwahl-kasten input[type="file"] {
  width: 100%; max-width: 100%; margin: 0; padding: 0; border: 0; background: transparent; min-height: 0;
}
/* Mit JavaScript: das Feld bleibt im Formular, aber unsichtbar */
body.oeffentlich .dateiwahl-kasten.bereit input[type="file"], body.mitarbeiter .dateiwahl-kasten.bereit input[type="file"] {
  position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.dateiwahl-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.dateiwahl-ziehen { font-size: 13px; color: var(--text-leise); }
@media (hover: none), (pointer: coarse) { .dateiwahl-ziehen { display: none; } }
.dateiwahl-stand { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-leise); overflow-wrap: anywhere; }
.dateiwahl-stand.warnt { color: var(--warnung); font-weight: 600; }
.dateiwahl-hilfe { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-leise); }
.dateiwahl-liste { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; }
.dateiwahl-liste[hidden] { display: none; }
.dateiwahl-liste li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 8px; row-gap: 0;
  min-width: 0; padding: 2px 2px 2px 12px;
  border: 1px solid var(--linie-fein); border-radius: var(--radius-klein); background: var(--papier-hell); font-size: 14px;
}
.dateiwahl-name { grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.dateiwahl-groesse { grid-column: 2; font-size: 12.5px; color: var(--text-leise); white-space: nowrap; }
.dateiwahl-warnung { grid-column: 1 / 3; grid-row: 2; font-size: 12.5px; font-weight: 700; color: var(--warnung); }
.dateiwahl-liste li.zu-gross { border-color: var(--warnung); padding-top: 6px; padding-bottom: 6px; }
.dateiwahl-liste li.zu-gross .dateiwahl-groesse { color: var(--warnung); font-weight: 700; }
body.oeffentlich .dateiwahl-liste li.zu-gross button.dateiwahl-weg, body.mitarbeiter .dateiwahl-liste li.zu-gross button.dateiwahl-weg { grid-row: 1 / span 2; }
body.oeffentlich button.dateiwahl-weg, body.mitarbeiter button.dateiwahl-weg {
  grid-column: 3; grid-row: 1; width: var(--hoehe-bedien); height: var(--hoehe-bedien); min-height: 0; padding: 0; border-radius: 50%;
  border: 1px solid transparent; background: transparent; color: var(--text-leise); box-shadow: none;
  font-family: system-ui, sans-serif; font-size: 18px; font-weight: 400; line-height: 1;
}
@media (hover: hover) {
  body.oeffentlich button.dateiwahl-weg:hover, body.mitarbeiter button.dateiwahl-weg:hover {
    background: var(--akzent-flaeche); border-color: var(--akzent-rahmen); color: var(--akzent-vorne); transform: none; box-shadow: none;
  }
}
/* Viele Bilder auf einmal (Mitarbeiterbereich): die Liste bleibt kurz */
.dateiwahl.gross .dateiwahl-liste { max-height: 16rem; overflow-y: auto; }
.dateiwahl.gross .dateiwahl-kasten { padding: 18px; border-width: 2px; border-color: var(--akzent-rahmen); background: var(--akzent-flaeche); border-radius: var(--radius); }
.dateiwahl.gross .dateiwahl-kasten.ziel { border-color: var(--akzent-vorne); }
.dateieingabe .dateiwahl, .bilderhochladen .dateiwahl { margin-bottom: 12px; }

/* ===== Mitarbeiterbereich aufgeraeumt (Lauf 10, 23.09.2026) ================
   Auf seine Wahl „Alle vier Pakete", Paket 1: alles in eine Reihe. Dieselben
   Regeln wie auf der Website (ruhig, rund, als anklickbar erkennbar), jetzt
   auch fuer die Teile, die es nur hier gibt. */

/* Kleine Kennzeichen (Status, „Aus dem Chat", „Muster" …): EINE Form, eine
   runde Pille. Vorher standen einige nur als farbig hinterlegter Text da,
   wie markiert, andere eckig. Die Farben kommen weiter aus ihren Klassen. */
body.mitarbeiter .pille, body.mitarbeiter .status, body.mitarbeiter .mustermarke, body.mitarbeiter .musterzahl {
  display: inline-flex; align-items: center; min-height: 22px; padding: 2px 10px; margin: 0;
  border-radius: var(--radius-rund); font-size: 12px; font-weight: 700; line-height: 1.3;
  white-space: nowrap; vertical-align: middle;
}
body.mitarbeiter .pille.textstand { margin-left: 6px; }
body.mitarbeiter .marke-aktiv { background: #E3F4EA; color: #14532D; }
body.mitarbeiter .marke-status-offen { background: #FFF4D6; color: #6E5200; }
body.mitarbeiter .marke-status-abgeschlossen { background: #E3F4EA; color: #14532D; }
body.mitarbeiter .marke-status-abgesagt { background: #EEF1F5; color: #3F4B5C; }
body.mitarbeiter .marke-rueckruf, body.mitarbeiter .marke-preisfrage { background: var(--akzent-flaeche); color: var(--akzent-vorne); }
body.mitarbeiter .marke-reservierung { background: #FFF4D6; color: #6E5200; }
body.mitarbeiter .marke-chat-wartet { background: #FFF4D6; color: #6E5200; }
body.mitarbeiter .marke-chat-laeuft, body.mitarbeiter .marke-chat-verfuegbar { background: #E3F4EA; color: #14532D; }
body.mitarbeiter .marke-chat-beendet { background: #EEF1F5; color: #3F4B5C; }
body.mitarbeiter .marke-chat-reserviert { background: #FDEBD8; color: #7C3F0A; }
body.mitarbeiter .marke-chat-verkauft { background: #ECE8F6; color: #4B3D7A; }

/* Reiter (Kaufanfragen, Anfragen): runde Knoepfe wie die Bereiche im Kopf,
   statt unterstrichener Links. */
body.mitarbeiter .reiter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; border-bottom: 0; }
body.mitarbeiter .reiter a {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--hoehe-bedien); padding: 0 16px; margin: 0;
  border: 1px solid var(--rahmen-knopf); border-radius: var(--radius-rund); background: var(--papier-hell);
  color: var(--text-gedaempft); font-family: Nunito, "Nunito Sans", system-ui, sans-serif; font-size: 14px; font-weight: 700;
  text-decoration: none; box-shadow: 0 1px 2px rgba(20, 30, 50, .04);
}
@media (hover: hover) {
  body.mitarbeiter .reiter a:hover { background: var(--akzent-flaeche); border-color: var(--akzent-rahmen); color: var(--akzent-vorne); }
}
body.mitarbeiter .reiter a[aria-current="page"] {
  background: var(--akzent-flaeche); border-color: var(--akzent-vorne); color: var(--akzent-vorne); box-shadow: inset 0 0 0 1px var(--akzent-vorne);
}
body.mitarbeiter .reiter a .num { color: inherit; font-weight: 600; }

/* Fahrzeugliste: der wichtigste Hinweis als Satz mit farbigem Punkt statt
   eines roten Kastens bei jedem Fahrzeug. */
body.mitarbeiter .hinweiszeile { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text); }
body.mitarbeiter .hinweispunkt { flex: 0 0 9px; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--rahmen-knopf); }
/* Die Dringlichkeit traegt der Punkt; der Satz bleibt in Schriftfarbe. */
body.mitarbeiter .fahrzeugliste td.num { white-space: nowrap; }
body.mitarbeiter .hinweiszeile-hoch .hinweispunkt { background: #C2412A; box-shadow: 0 0 0 3px #FBE3DD; }
body.mitarbeiter .hinweiszeile-mittel .hinweispunkt { background: #D19A00; box-shadow: 0 0 0 3px #FFF1CC; }
body.mitarbeiter .hinweiszeile-niedrig { color: var(--text-gedaempft); }
body.mitarbeiter .hinweisrest { margin: 4px 0 0 17px; }
body.mitarbeiter .aktionsspalte { text-align: right; white-space: nowrap; }
body.mitarbeiter .knopf.klein { height: auto; min-height: 36px; padding: 0 14px; font-size: 13.5px; }
body.mitarbeiter .marke-veraltet, body.mitarbeiter .marke-fehlt { background: #FDE8E4; color: #8F2A19; }

/* Bilder im Inserat: die Knoepfe unter jedem Bild teilen sich die Breite.
   Vorher ragte der letzte ueber den Rand der Kachel. Entfernen ist ein
   ruhiger Knopf mit rotem Kreuz, kein rotes Quadrat mehr. */
body.mitarbeiter .bildgitter figcaption { padding: 6px; }
body.mitarbeiter .bildgitter figcaption form { display: flex; gap: 4px; margin: 0; }
body.mitarbeiter .bildgitter figcaption button {
  flex: 1 1 0; min-width: 0; height: 34px; min-height: 34px; padding: 0; margin: 0;
  border-radius: 8px; font-size: 15px; line-height: 1; box-shadow: none;
}
body.mitarbeiter .bildgitter figcaption button.gefaehrlich { background: var(--papier-hell); color: #A8321F; border: 1px solid #F0C9C0; }
@media (hover: hover) {
  body.mitarbeiter .bildgitter figcaption button.gefaehrlich:hover:not(:disabled) { background: #FDECE8; border-color: #E3A091; }
}
@media (pointer: coarse) {
  body.mitarbeiter .bildgitter { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
  body.mitarbeiter .bildgitter figcaption button { height: 44px; min-height: 44px; }
}

/* Anmelden: eine Karte mit dem Punkt der Marke, wie der Kopf der Seiten. */
body.mitarbeiter .anmeldung { max-width: 440px; }
body.mitarbeiter .anmeldung .karte { padding: 28px 26px; }
body.mitarbeiter .anmeldung h1 { margin: 4px 0 6px; }
body.mitarbeiter .anmeldemarke {
  display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--text-gedaempft);
  font-family: Nunito, "Nunito Sans", system-ui, sans-serif; font-size: 14px; font-weight: 800;
}
body.mitarbeiter .anmeldemarke::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--akzent-vorne); box-shadow: 0 0 0 4px var(--akzent-flaeche);
}
body.mitarbeiter .anmeldung form { display: flex; flex-direction: column; gap: 6px; }
body.mitarbeiter .anmeldung form button { margin-top: 10px; align-self: flex-start; }
body.mitarbeiter .anmeldehilfe { margin: 16px 6px 0; }

/* Handy: Die Zahlen ueber der Fahrzeugliste zu dritt je Reihe, kleiner. */
@media (max-width: 700px) {
  body.mitarbeiter .zahlenband { gap: 8px; }
  body.mitarbeiter .zahl { flex: 1 1 calc(33.333% - 8px); min-width: 0; padding: 10px 12px; }
  body.mitarbeiter .zahl .wert { font-size: 21px; }
  body.mitarbeiter .zahl .text { font-size: 12.5px; }
}

/* Handy: Tabellen werden Karten. Vorher musste man die Fahrzeugliste
   seitlich schieben, um „Bearbeiten" zu sehen. Die Spaltennamen bleiben
   fuer Vorleseprogramme; sichtbar steht der Name vor jedem Wert. */
@media (max-width: 700px) {
  body.mitarbeiter .fahrzeugliste, body.mitarbeiter .fahrzeugliste tbody,
  body.mitarbeiter table.liste, body.mitarbeiter table.liste tbody,
  body.mitarbeiter table.glossartabelle, body.mitarbeiter table.glossartabelle tbody { display: block; width: 100%; }
  body.mitarbeiter .fahrzeugliste thead, body.mitarbeiter table.liste thead, body.mitarbeiter table.glossartabelle thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  /* Fahrzeuge: Bild und Name oben, darunter Preis, Status und Sprache, dann
     der Hinweis und der Knopf. */
  body.mitarbeiter .fahrzeugliste tr {
    display: grid; grid-template-columns: 64px auto auto minmax(0, 1fr); column-gap: 10px; row-gap: 8px;
    align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--linie-fein);
  }
  body.mitarbeiter .fahrzeugliste td { display: block; padding: 0; border: 0; max-width: none; }
  body.mitarbeiter .fahrzeugliste tbody tr:hover td { background: transparent; }
  body.mitarbeiter .fahrzeugliste td.bildspalte { grid-column: 1; grid-row: 1 / span 2; align-self: start; width: auto; }
  body.mitarbeiter .fahrzeugliste td:nth-child(2) { grid-column: 2 / -1; grid-row: 1; }
  body.mitarbeiter .fahrzeugliste td:nth-child(3) { grid-column: 2; grid-row: 2; }
  body.mitarbeiter .fahrzeugliste td:nth-child(4) { grid-column: 3; grid-row: 2; }
  body.mitarbeiter .fahrzeugliste td:nth-child(5) { grid-column: 4; grid-row: 2; }
  body.mitarbeiter .fahrzeugliste td.hinweisspalte { grid-column: 1 / -1; grid-row: 3; }
  body.mitarbeiter .fahrzeugliste td.aktionsspalte { grid-column: 1 / -1; grid-row: 4; text-align: left; }
  body.mitarbeiter .fahrzeugliste td.aktionsspalte .knopf { width: 100%; justify-content: center; }
  body.mitarbeiter .fahrzeugliste tr.hervorgehoben { background: #FFF8E6; }
  /* Die anderen Listen: je Zeile eine Karte, der Spaltenname links. */
  body.mitarbeiter table.liste tr, body.mitarbeiter table.glossartabelle tr {
    display: block; padding: 12px 16px; border-bottom: 1px solid var(--linie-fein);
  }
  body.mitarbeiter table.liste td, body.mitarbeiter table.glossartabelle td {
    display: block; padding: 4px 0; border: 0; min-height: 0; background: transparent;
  }
  body.mitarbeiter table.liste td[data-feld], body.mitarbeiter table.glossartabelle td[data-feld] { padding-left: 38%; }
  body.mitarbeiter table.liste td[data-feld]::before, body.mitarbeiter table.glossartabelle td[data-feld]::before {
    content: attr(data-feld); position: absolute; left: 0; top: 4px; width: 35%;
    font-size: 12.5px; font-weight: 700; color: var(--text-leise);
  }
  body.mitarbeiter table.liste td:not([data-feld]) { padding-top: 8px; }
  body.mitarbeiter table.glossartabelle input { width: 100%; }
  body.mitarbeiter .kaufanfragenliste tr.alt { box-shadow: inset 4px 0 0 var(--warnung); background: #FBF3F0; }
  body.mitarbeiter .kaufanfragenliste tr.alt td:first-child { box-shadow: none; }
  body.mitarbeiter .kaufanfragenliste tr.alt td { background: transparent; }
}

/* --- Die Übersicht (Lauf 10, Paket 2): was heute zu tun ist ---------------- */
body.mitarbeiter .uebersichtgruss { margin: 6px 0 0; }
body.mitarbeiter .uebersichtseite .abschnittstitel { margin: 0 0 12px; font-size: 17px; }
body.mitarbeiter .aufgabenkacheln {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-bottom: 22px;
}
body.mitarbeiter .aufgabe {
  display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; min-height: 112px;
  border: 1px solid var(--linie); border-radius: var(--radius); background: var(--papier-hell);
  box-shadow: var(--schatten); color: var(--text); text-decoration: none;
  transition: transform .18s var(--weich), box-shadow .18s var(--weich), border-color .18s;
}
@media (hover: hover) {
  body.mitarbeiter .aufgabe:hover { transform: translateY(-2px); box-shadow: var(--schatten-stark); border-color: var(--akzent-rahmen); }
}
body.mitarbeiter .aufgabezahl { font-family: Nunito, "Nunito Sans", system-ui, sans-serif; font-size: 30px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
body.mitarbeiter .aufgabetext { font-weight: 700; color: var(--text); }
body.mitarbeiter .aufgabezusatz { margin-top: auto; padding-top: 6px; font-size: 13px; color: var(--text-leise); }
/* Etwas zu tun: die Zahl in der Akzentfarbe, links eine ruhige Linie.
   Nichts zu tun: ein kleiner Haken statt der Farbe. */
body.mitarbeiter .aufgabe.zu-tun { border-left: 4px solid var(--akzent-vorne); }
body.mitarbeiter .aufgabe.zu-tun .aufgabezahl { color: var(--akzent-vorne); }
body.mitarbeiter .aufgabe.erledigt .aufgabezahl { color: var(--text-leise); }
body.mitarbeiter .aufgabe.erledigt .aufgabezahl::after { content: " ✓"; font-size: 20px; color: var(--erfolg); }
@media (prefers-reduced-motion: reduce) { body.mitarbeiter .aufgabe { transition: none; } body.mitarbeiter .aufgabe:hover { transform: none; } }

body.mitarbeiter .kartenkopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
body.mitarbeiter .kartenkopf h2 { margin: 0; }
body.mitarbeiter .bestandszeile { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
body.mitarbeiter .bestandszeile a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--linie); border-radius: var(--radius-rund); background: var(--papier-zart);
  color: var(--text-gedaempft); font-size: 14px; text-decoration: none;
}
@media (hover: hover) { body.mitarbeiter .bestandszeile a:hover { border-color: var(--akzent-rahmen); background: var(--akzent-flaeche); color: var(--akzent-vorne); } }
body.mitarbeiter .hinweisliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
body.mitarbeiter .hinweisliste a, body.mitarbeiter .hinweisliste .hinweiseintrag {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--papier-hell);
  color: var(--text); text-decoration: none;
}
body.mitarbeiter .hinweisliste .hinweispunkt { margin-top: 0; background: #D19A00; box-shadow: 0 0 0 3px #FFF1CC; }
body.mitarbeiter .hinweisliste.ruhig .hinweispunkt { background: var(--akzent-vorne); box-shadow: 0 0 0 3px var(--akzent-flaeche); }
/* Lauf 14: „So ist es gerade eingestellt" (Einrichtung, Übersicht): nur zur
   Info, deshalb ein grauer Punkt statt des farbigen, und Abstand zur Liste
   der Aufgaben darüber */
body.mitarbeiter .hinweisliste.info .hinweispunkt { background: var(--text-leise); box-shadow: 0 0 0 3px var(--linie-fein); }
body.mitarbeiter .hinweisliste + p.leise { margin-top: 16px; }
body.mitarbeiter .hinweisliste .pfeil { margin-left: auto; font-size: 20px; color: var(--text-leise); }
@media (hover: hover) { body.mitarbeiter .hinweisliste a:hover { border-color: var(--akzent-rahmen); background: var(--akzent-flaeche); } }
body.mitarbeiter .ereignisliste { list-style: none; margin: 0; padding: 0; }
body.mitarbeiter .ereignisliste li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linie-fein); font-size: 14px; }
body.mitarbeiter .ereignisliste li:last-child { border-bottom: 0; }
body.mitarbeiter .ereigniszeit { color: var(--text-leise); white-space: nowrap; }
@media (max-width: 700px) {
  body.mitarbeiter .ereignisliste li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  body.mitarbeiter .aufgabenkacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.mitarbeiter .aufgabe { min-height: 0; padding: 12px 14px; }
  body.mitarbeiter .aufgabezahl { font-size: 24px; }
}

/* Fahrzeugliste mit Filter aus der Übersicht */
body.mitarbeiter .filteranzeige {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius-klein);
  background: var(--akzent-flaeche); border: 1px solid var(--akzent-rahmen); color: var(--text);
}

/* Änderungsprotokoll: blättern */
body.mitarbeiter .blaettern { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 0; }
body.mitarbeiter .protokolliste td.num { white-space: nowrap; color: var(--text-leise); }

/* Ein Hinweis ist kein Fehler: „.meldung" allein faerbte bisher jede Meldung
   rot, auch „Nur ein Admin-Konto" oder „2 offene Kaufanfragen zu diesem
   Fahrzeug". Im Mitarbeiterbereich jetzt ruhig gelb. */
body.mitarbeiter .meldung-hinweis { background: #FFF8E6; border-color: #F0DEAA; color: #5E4500; }

/* Handy-Karten: ein leeres Feld (etwa ein Gespraech ohne Fahrzeug) faellt
   weg, statt dass sein Name unter dem naechsten liegt; jedes Feld ist
   mindestens eine Zeile hoch. */
@media (max-width: 700px) {
  body.mitarbeiter table.liste td[data-feld]:empty { display: none; }
  body.mitarbeiter table.liste td[data-feld], body.mitarbeiter table.glossartabelle td[data-feld] { min-height: calc(1.45em + 8px); }
  body.mitarbeiter .fahrzeugliste .sprachstand { white-space: nowrap; }
}
/* Loeschen in Listen: ein ruhiger Knopf mit roter Schrift statt einer
   roten Flaeche in jeder Zeile. */
body.mitarbeiter .knopf.gefahr { background: var(--papier-hell); color: #A8321F; border: 1px solid #F0C9C0; box-shadow: none; }
@media (hover: hover) { body.mitarbeiter .knopf.gefahr:hover { background: #FDECE8; color: #8F2A19; border-color: #E3A091; } }

/* --- Nach dem Gegenlesen (Lauf 10) ---------------------------------------- */
/* Das Muster-Kennzeichen nennt manchmal einen ganzen Platzhalter
   („Platzhalter im Englischen noch drin: …"): Es darf umbrechen, und der
   Kopf der Einstellung auch. Vorher war die Seite auf dem Handy 703 px breit. */
body.mitarbeiter .mustermarke { white-space: normal; max-width: 100%; }
body.mitarbeiter .einstellungskopf { flex-wrap: wrap; row-gap: 6px; }

/* Die kleinen Kennzeichen, die es nur hier gibt (DE/EN, Notiz, Datei):
   rund wie alle anderen. */
body.mitarbeiter .sprachstand > span, body.mitarbeiter .notizmarke, body.mitarbeiter .dateimarke {
  border-radius: var(--radius-rund); padding: 2px 8px;
}

/* Finger: kleine Knoepfe und die Zahlen der Inserate mindestens 44 px hoch
   (Abschnitt 9). Mit der Maus bleiben sie klein. */
@media (pointer: coarse) {
  body.mitarbeiter .knopf.klein, body.mitarbeiter button.klein, body.mitarbeiter .bestandszeile a { min-height: var(--hoehe-bedien); }
}

/* Handy-Karten: Die hervorgehobene Zeile (der Chat, der am laengsten
   wartet; das gerade geaenderte Konto) behaelt ihre Farbe. Die Karten
   machten die Zellen durchsichtig und nahmen sie damit weg. */
@media (max-width: 700px) {
  body.mitarbeiter table.liste tr.erster { background: var(--akzent-flaeche); }
  body.mitarbeiter table.liste.kontenliste tr.hervorgehoben { background: var(--meldung-erfolg-flaeche); }
}

/* Handy: In der Fahrzeugliste passten Preis, Status und Sprache nebeneinander
   nicht in die Karte (sie rollte seitlich, EN war abgeschnitten). Jetzt steht
   die Sprache in einer eigenen Zeile. Die Lieferpreise werden wie die anderen
   Tabellen Karten, jede Angabe mit ihrem Namen darüber. */
@media (max-width: 700px) {
  body.mitarbeiter .fahrzeugliste td.bildspalte { grid-row: 1 / span 3; }
  body.mitarbeiter .fahrzeugliste td:nth-child(5) { grid-column: 2 / -1; grid-row: 3; }
  body.mitarbeiter .fahrzeugliste td.hinweisspalte { grid-row: 4; }
  body.mitarbeiter .fahrzeugliste td.aktionsspalte { grid-row: 5; }

  body.mitarbeiter .lieferpreistabelle, body.mitarbeiter .lieferpreistabelle tbody { display: block; width: 100%; }
  body.mitarbeiter .lieferpreistabelle thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  body.mitarbeiter .lieferpreistabelle tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 14px; padding: 12px 0; border-top: 1px solid var(--linie-fein);
  }
  body.mitarbeiter .lieferpreistabelle td { display: block; padding: 0; border: 0; }
  body.mitarbeiter .lieferpreistabelle td[data-feld]::before {
    content: attr(data-feld); display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 700; color: var(--text-leise);
  }
  body.mitarbeiter .lieferpreistabelle td.tagefelder { grid-column: 1 / -1; }
  body.mitarbeiter .lieferpreistabelle input:not([type]) { width: 100%; max-width: 160px; }
  body.mitarbeiter .lieferpreistabelle td.tagefelder input { width: 72px; }
}

/* --- Nettopreis (24.09.2026) ------------------------------------------------
   Sein Wunsch: den Bruttopreis groß, den Nettopreis „kleiner und schwächer,
   weil das nur für Händler interessant ist". Eine eigene Zeile unter dem
   Preis, damit niemand die beiden Beträge verwechselt. */
body.oeffentlich .preisblock { flex-wrap: wrap; row-gap: 2px; }
body.oeffentlich .preisnetto { flex-basis: 100%; font-size: 13.5px; font-weight: 400; color: var(--text-leise); }
body.oeffentlich .kachelnetto { margin: 0; font-size: 12.5px; font-weight: 400; color: var(--text-leise); }
body.mitarbeiter .preisnetto, body.mitarbeiter .nettozeile { font-size: 12.5px; font-weight: 400; color: var(--text-leise); }
body.mitarbeiter .nettozeile { display: block; white-space: nowrap; }

/* --- Inserat schneller anlegen (24.09.2026) -----------------------------------
   Sprungleiste über dem Formular, die Ausstattung in aufklappbaren Gruppen
   mit Zähler, die Liste „was fehlt" mit Sprung zum Feld, und der gesperrte
   Rahmen für Konten, die nur ansehen dürfen. */
body.mitarbeiter .sprungleiste { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
body.mitarbeiter .sprungleiste a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--rahmen-knopf); border-radius: 999px; background: var(--papier-hell);
  color: var(--text); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
body.mitarbeiter .sprungleiste a:hover { background: var(--akzent-flaeche); color: var(--akzent-vorne); }
body.mitarbeiter fieldset.formularfelder { border: 0; padding: 0; margin: 0; min-width: 0; }
body.mitarbeiter .ausstattungsgruppen { display: grid; gap: 10px; margin: 6px 0 16px; }
body.mitarbeiter .ausstattungsgruppe > summary {
  display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px;
  list-style: none; cursor: pointer; border-radius: var(--radius-klein);
  font-family: Nunito, "Nunito Sans", system-ui, sans-serif; font-size: 14px; font-weight: 700; color: var(--text);
}
body.mitarbeiter .ausstattungsgruppe > summary::-webkit-details-marker { display: none; }
body.mitarbeiter .ausstattungsgruppe > summary::after {
  content: ""; flex-shrink: 0; width: 7px; height: 7px; margin: 0 2px 3px 0;
  border-right: 2px solid var(--text-leise); border-bottom: 2px solid var(--text-leise);
  transform: rotate(45deg);
}
body.mitarbeiter .ausstattungsgruppe[open] > summary::after { margin: 3px 2px 0 0; transform: rotate(225deg); }
body.mitarbeiter .ausstattungsgruppe > summary:hover { background: var(--akzent-flaeche); }
body.mitarbeiter .gruppenname { flex: 1; min-width: 0; }
body.mitarbeiter .gruppenzahl {
  flex-shrink: 0; padding: 2px 10px; border: 1px solid var(--linie); border-radius: 999px;
  background: var(--papier-hell); color: var(--text-leise); font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
body.mitarbeiter .gruppenzahl.gewaehlt { border-color: transparent; background: var(--akzent-flaeche); color: var(--akzent-vorne); }
body.mitarbeiter .haekchenliste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 18px;
  padding: 6px 14px 10px; border-top: 1px solid var(--linie);
}
/* Die Liste „was fehlt" als kleine Kärtchen im Fluss statt einer langen
   Spalte: So bleibt der Preis darunter auch bei 20 fehlenden Angaben in
   Reichweite. */
body.mitarbeiter [data-fehlt-liste] .warnung ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; padding: 0; list-style: none; }
body.mitarbeiter [data-fehlt-liste] .warnung li {
  margin: 0; padding: 1px 9px; border: 1px solid #F0DEAA; border-radius: 999px;
  background: #FFFFFF; color: #1B211F; font-size: 12.5px; line-height: 1.6;
}
body.mitarbeiter [data-fehlt-liste] .warnung li a { color: inherit; text-decoration: none; }
body.mitarbeiter [data-fehlt-liste] .warnung li a:hover { text-decoration: underline; text-underline-offset: 2px; }
body.mitarbeiter .formularfelder:disabled .feld input, body.mitarbeiter .formularfelder:disabled .feld select,
body.mitarbeiter .formularfelder:disabled .feld textarea { background: var(--papier-zart); color: var(--text); opacity: 1; }
@media (max-width: 600px) {
  body.mitarbeiter .sprungleiste { gap: 6px; }
  body.mitarbeiter .sprungleiste a { min-height: 34px; padding: 0 11px; font-size: 13px; }
}

/* --- Anfragen ordnen und beantworten, Excel-Tabellen (24.09.2026) -------------
   Reiter „Offen" und „Erledigt" (die Reiter selbst wie bei den
   Kaufanfragen), je Anfrage die Wege zum Antworten in einer Zeile, darunter
   was schon per E-Mail beantwortet wurde. Erledigte stehen im eigenen Reiter
   und brauchen deshalb nicht mehr blass zu sein. */
body.mitarbeiter .anfrage.erledigt { opacity: 1; }
body.mitarbeiter .erledigtform, body.mitarbeiter .exportform { margin: 0; }
body.mitarbeiter .kopfaktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
body.mitarbeiter .anfrageaktionen {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linie);
}
body.mitarbeiter .anfrageaktionen > * { min-width: 0; }
/* Die WhatsApp-Auswahl ohne eigene Karte: ihre Teile stehen direkt in der Zeile. */
body.mitarbeiter .whatsappkompakt { display: contents; }
body.mitarbeiter .anfrageaktionen > details[open] { flex-basis: 100%; }
body.mitarbeiter .antwortform > summary { list-style: none; cursor: pointer; }
body.mitarbeiter .antwortform > summary::-webkit-details-marker { display: none; }
body.mitarbeiter .antwortfelder { display: grid; gap: 10px; max-width: 760px; margin-top: 12px; }
body.mitarbeiter .antwortfelder .meldung { margin: 0; }
body.mitarbeiter .antwortfelder button[type=submit] { justify-self: start; }
body.mitarbeiter .bisherigeantworten { display: grid; gap: 6px; margin: 10px 0 0; }
body.mitarbeiter .bisherigeantworten summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--erfolg); }
body.mitarbeiter .bisherigeantworten .vorschau { margin: 6px 0 4px; }

/* Beim neuen Inserat steht der Speichern-Knopf der Seitenspalte nur auf
   breiten Bildschirmen; auf dem Handy wird unten gespeichert, nach den
   Bildern (Gegenlesen Lauf 11). */
body.mitarbeiter .nurschmal { display: none; }
@media (max-width: 900px) {
  /* Genauer als body.mitarbeiter button[type="submit"], das sonst gewönne. */
  body.mitarbeiter .karte button.nurbreit, body.mitarbeiter .nurbreit { display: none; }
  body.mitarbeiter .nurschmal { display: block; }
}

/* Nur zum Ansehen (Support): Die Seitenspalten kleben nicht und rollen nicht
   in sich, denn darin ist nichts, was die Tastatur erreichen könnte
   (Gegenlesen Lauf 11). */
body.mitarbeiter .formularspalte.nurlesen { position: static; max-height: none; overflow: visible; }
body.mitarbeiter .bisherigeantworten summary.wirdgesendet { color: #7A5A00; }

/* Sehr schmale Handys (320 px): Die Nettozeile darf unter dem Preis
   umbrechen, sonst schob sie die Karte der Fahrzeugliste seitlich hinaus
   (Lauf 11, seit es die Zeile gibt). */
@media (max-width: 360px) {
  body.mitarbeiter .fahrzeugliste .nettozeile { white-space: normal; }
}

/* --- Lauf 12 (24.09.2026): Preis unten in der Kachel, drei Knöpfe, Chat ------ */
/* Der Preis steht unten in der Kachel: In einer Reihe stehen alle Preise auf
   gleicher Höhe, darüber ein Strich, der den Rand nicht berührt (sein
   Wunsch; auf seine Rückmeldungen 2 px, zwischen den Farben von Linie und
   Knopfrahmen: „etwas dicker", dann „etwas heller"). Nur wenn Kacheln nebeneinander stehen; auf dem Handy
   bleibt alles, wie es war. */
body.oeffentlich .kachelabstand { display: none; }
@media (min-width: 560px) {
  body.oeffentlich .fahrzeugkachel { display: flex; flex-direction: column; }
  body.oeffentlich .kachelinhalt { flex: 1 1 auto; display: flex; flex-direction: column; }
  body.oeffentlich .kachelabstand { display: block; flex: 1 0 12px; }
  body.oeffentlich .kachelpreisblock { border-top: 2px solid var(--linie); border-top-color: color-mix(in srgb, var(--rahmen-knopf) 50%, var(--linie)); padding-top: 10px; }
}

/* Fahrzeugseite: „Live-Chat starten" blau, Kaufanfrage und Finanzierung weiß.
   Auf dem Handy untereinander, jeder Knopf über die ganze Breite. */
@media (max-width: 600px) {
  body.oeffentlich .fahrzeugaktionen { grid-template-columns: 1fr; }
  body.oeffentlich .fahrzeugaktionen .knopf:nth-child(2) { grid-column: auto; }
}

/* Datentabelle: Die Bezeichnungen dürfen umbrechen. Vorher war die linke
   Spalte so breit wie die längste Bezeichnung, im Englischen fast die ganze
   Breite (Gegenprobe des Auftraggebers, 24.09.2026). Gilt auch für den
   Mitarbeiterbereich. */
body.oeffentlich .datentabelle dt, body.mitarbeiter .datentabelle dt { max-width: 15em; overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 600px) {
  body.oeffentlich .datentabelle dt, body.mitarbeiter .datentabelle dt { max-width: 42vw; }
}

/* Chat im Mitarbeiterbereich: das Fahrzeug mit Foto, die Liste „Angesehen". */
body.mitarbeiter .chatfahrzeugkopf { display: flex; gap: 12px; align-items: center; margin: 0 0 10px; text-decoration: none; color: var(--text); }
body.mitarbeiter .chatfahrzeugkopf img { width: 96px; height: 64px; object-fit: cover; border-radius: 10px; flex: none; }
/* Name in Linkfarbe und unterstrichen: die Karte führt zum Fahrzeug (Gegenlesen Lauf 12) */
body.mitarbeiter .chatfahrzeugkopf b { display: block; color: var(--akzent-vorne); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.mitarbeiter .chatfahrzeugkopf:hover b { text-decoration-thickness: 2px; }
body.mitarbeiter .chatfahrzeugkopf .klein { display: block; }
body.mitarbeiter .angesehenliste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
body.mitarbeiter .angesehenliste a { display: flex; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--linie); border-radius: 12px; text-decoration: none; color: var(--text); }
body.mitarbeiter .angesehenliste a b { color: var(--akzent-vorne); }
body.mitarbeiter .angesehenliste a:hover { border-color: var(--akzent-vorne); }
body.mitarbeiter .angesehenliste img, body.mitarbeiter .angesehenliste .ohnebild { width: 72px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; background: var(--linie-fein); }
body.mitarbeiter .angesehentext { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
body.mitarbeiter .angesehentext b { font-size: 14px; }
body.mitarbeiter .pille.gerade { background: #E3F4EA; color: #14532D; }

/* Die kleinen Tabellen am Rand der Chatseite (Kunde, Fahrzeug): Die linke
   Spalte so schmal wie ihre Bezeichnungen, damit Nummer und FIN nicht umbrechen. */
body.mitarbeiter .datentabelle.klein { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); column-gap: 14px; }

/* --- Lauf 12 (24.09.2026): Daten, Ausstattung, So läuft der Kauf ----------
   Sein Auftrag: „Es sollte aber mehr nach Website oder Anwendung aussehen.
   modern und mit guter Aufteilung und auch wie bei dem Rest der Website in
   einem smoothen, abgerundeten, angenehmen und einladenden Design". Die drei
   sehen bewusst verschieden aus: Daten als helle Kacheln mit Symbol, die
   Ausstattung in Gruppenkarten mit Haken, der Kauf als Punkte mit großem
   rundem Symbol. Nichts davon ist anklickbar, deshalb kein Rahmen wie bei
   Links und Knöpfen und kein Schwebeeffekt. color-mix mit Rückfall davor. */
body.oeffentlich .datenraster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 6px 0 0;
}
body.oeffentlich .datum {
  position: relative; display: flex; flex-direction: column; justify-content: flex-start; min-width: 0;
  padding: 14px 14px 14px 66px; border-radius: 14px;
  background: var(--papier-zart);
  background: color-mix(in srgb, var(--akzent-flaeche) 60%, var(--papier-hell));
}
body.oeffentlich .datum dt {
  margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--text-leise);
  overflow-wrap: break-word; hyphens: auto;
}
body.oeffentlich .datum dd {
  margin: 3px 0 0; font-family: Nunito, "Nunito Sans", system-ui, sans-serif; font-size: 15.5px; font-weight: 700;
  line-height: 1.35; color: var(--text); overflow-wrap: anywhere;
}
body.oeffentlich .datum dd .leise, body.oeffentlich .datum dd .nicht-uebersetzt { font-family: "Nunito Sans", system-ui, sans-serif; font-weight: 600; }
body.oeffentlich .datensymbol {
  position: absolute; left: 14px; top: 14px;
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  background: var(--papier-hell); color: var(--akzent-vorne);
  box-shadow: 0 1px 2px rgba(20, 30, 50, .06), 0 3px 10px rgba(31, 95, 153, .08);
}
body.oeffentlich .datensymbol svg { width: 20px; height: 20px; display: block; }
body.oeffentlich .datenraster.schlicht .datum { padding-left: 16px; }
/* Überschriften und Werte stehen je Reihe auf gleicher Höhe, auch wenn ein
   Wert oder eine Überschrift zwei Zeilen braucht (sein Hinweis vom
   24.09.2026: „dass die Überschriften nicht auf der gleichen höhe sind").
   Jede Kachel belegt zwei Zeilen des Rasters und teilt sie mit ihren
   Nachbarn (subgrid). Ältere Browser: alles oben bündig, wie vorher auf dem
   Handy. */
@supports (grid-template-rows: subgrid) {
  body.oeffentlich .datum { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 3px; align-content: start; }
  body.oeffentlich .datum dd { margin-top: 0; }
}
body.oeffentlich .datum .lieferdauer {
  display: block; margin-top: 2px; font-family: "Nunito Sans", system-ui, sans-serif; font-size: 13px; font-weight: 600; color: var(--text-leise);
}

body.oeffentlich .ausstattungsraster { columns: 3 280px; column-gap: 14px; margin-top: 6px; }
body.oeffentlich .ausstattungsgruppe {
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  margin: 0 0 14px; padding: 14px 16px 10px; border-radius: 16px;
  background: var(--papier-zart); border: 1px solid var(--linie-fein);
}
body.oeffentlich .gruppenkopf { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 15.5px; line-height: 1.3; }
body.oeffentlich .gruppensymbol {
  flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: var(--knopf-flaeche); color: var(--knopf-schrift); box-shadow: 0 2px 6px rgba(31, 95, 153, .22);
}
body.oeffentlich .gruppensymbol svg { width: 19px; height: 19px; display: block; }
body.oeffentlich .gruppenname { flex: 1 1 auto; min-width: 0; }
body.oeffentlich .gruppenzahl {
  flex: 0 0 auto; min-width: 28px; padding: 1px 9px; border-radius: 999px; text-align: center;
  background: var(--akzent-flaeche); color: var(--akzent-vorne); font-size: 12.5px; font-weight: 800;
}
body.oeffentlich .merkmalliste { list-style: none; margin: 0; padding: 0; }
body.oeffentlich .merkmalliste li { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; font-size: 14.5px; line-height: 1.45; }
/* Nur der runde Haken vor jedem Ausstattungsmerkmal (Fahrzeugseite). Ohne
   .merkmalliste traf die Regel auch die Ankreuzfelder im Chat-Formular
   (label.haken, „Wann erreichen wir Sie am besten?") und machte sie zu
   grünen 20-Pixel-Kreisen (gesehen am 25.09.2026). */
body.oeffentlich .merkmalliste .haken {
  flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  background: var(--akzent-flaeche);
  background: color-mix(in srgb, var(--erfolg) 15%, transparent);
  color: var(--erfolg);
}
body.oeffentlich .merkmalliste .haken svg { width: 13px; height: 13px; display: block; stroke-width: 2.8; }

body.oeffentlich .kaufkarte {
  background: var(--papier-hell);
  background: linear-gradient(160deg, var(--akzent-flaeche) 0%, var(--papier-hell) 62%);
}
body.oeffentlich .kaufpunkte {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 28px;
}
body.oeffentlich .kaufpunkt { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
/* Eckig gerundet wie die Symbole bei den Daten, ohne Ring: Ein runder Kreis
   mit Rahmen sah aus wie die Blätterknöpfe der Galerie (Gegenlesen Lauf 12). */
body.oeffentlich .kaufsymbol {
  flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  background: var(--papier-hell); color: var(--akzent-vorne);
  box-shadow: 0 1px 2px rgba(20, 30, 50, .06), 0 3px 10px rgba(31, 95, 153, .08);
}
body.oeffentlich .kaufsymbol svg { width: 24px; height: 24px; display: block; }
body.oeffentlich .kauftext { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 3px; }
body.oeffentlich .kauftext b { font-family: Nunito, "Nunito Sans", system-ui, sans-serif; font-size: 16px; font-weight: 750; line-height: 1.35; color: var(--text); }
body.oeffentlich .kauftext span { font-size: 14.5px; line-height: 1.6; color: var(--text-gedaempft); overflow-wrap: break-word; }

@media (max-width: 600px) {
  body.oeffentlich .datenraster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.oeffentlich .datum { justify-content: flex-start; min-height: 0; padding: 11px 12px 12px; }
  body.oeffentlich .datensymbol { position: static; transform: none; width: 30px; height: 30px; border-radius: 10px; margin: 0 0 7px; }
  body.oeffentlich .datensymbol svg { width: 17px; height: 17px; }
  body.oeffentlich .datenraster.schlicht .datum { padding-left: 12px; }
  body.oeffentlich .datum dd { font-size: 15px; }
  body.oeffentlich .ausstattungsgruppe { padding: 12px 14px 8px; }
  body.oeffentlich .kaufsymbol { width: 44px; height: 44px; }
  body.oeffentlich .kaufsymbol svg { width: 22px; height: 22px; }
}

/* --- Lauf 12: Drucken der Fahrzeugseite (Gegenlesen) -----------------------
   Ohne Hintergrundgrafiken (so drucken die meisten Browser) verschwände das
   weiße Symbol auf der blauen Fläche; die Knöpfe und das Chat-Symbol
   gehören nicht aufs Papier. */
@media print {
  body.oeffentlich .gruppensymbol { background: none; color: var(--akzent-vorne); box-shadow: none; border: 1px solid var(--linie); }
  body.oeffentlich .datensymbol, body.oeffentlich .kaufsymbol { box-shadow: none; border: 1px solid var(--linie); }
  body.oeffentlich .fahrzeugaktionen, body.oeffentlich .chatecke { display: none; }
  body.oeffentlich .ausstattungsgruppe, body.oeffentlich .datum, body.oeffentlich .kaufpunkt { break-inside: avoid; }
}

/* ===== Lauf 13 · Bausteine (25.09.2026) ===================================
   Seine Wahl: Fotos auf dem Handy wischen, einheitliche Symbole (Lucide,
   „Lieber Lucide"), weiche Seitenwechsel und Einblenden „dezent", Filter
   ohne Neuladen. Alles ist Zugabe: Ohne JavaScript und in Browsern ohne diese
   Techniken sieht und funktioniert die Seite wie vorher. */

/* --- Fotoband zum Wischen ---------------------------------------------------
   „man soll auf dem Handy wischen können. Alles Andere kann so bleiben."
   Alle Fotos stehen nebeneinander in einem Band, das auf jedem Foto einrastet
   (geht auch ohne JavaScript). Die Bühne hat ein festes Seitenverhältnis
   (3:2, höchstens 62 % der Fensterhöhe), damit die Seite beim Blättern nicht
   springt, wenn ein Foto 4:3 ist; der Rest bleibt dunkel wie bisher. */
.fotoband {
  display: flex; width: 100%; aspect-ratio: 3 / 2; max-height: 62vh;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.fotoband::-webkit-scrollbar { display: none; }
.foto { flex: 0 0 100%; width: 100%; height: 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.foto .grossbild { width: 100%; height: 100%; max-height: none; object-fit: contain; }
body.oeffentlich .fotoband:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -4px; }
body.oeffentlich .galeriepfeil span { margin-top: 0; display: grid; place-items: center; }
body.oeffentlich .galeriepfeil svg { width: 24px; height: 24px; display: block; }

/* --- Symbole an neuen Stellen ----------------------------------------------- */
/* Vorteile auf der Startseite: das passende Symbol statt dreimal desselben
   Hakens (nach dem Titel, symbole.js). */
body.oeffentlich .vorteile li::before { content: none; display: none; }
body.oeffentlich .vorteilsymbol {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 12px; border-radius: 13px;
  background: var(--akzent-flaeche); color: var(--akzent-vorne);
}
body.oeffentlich .vorteilsymbol svg { width: 24px; height: 24px; display: block; }
/* Mitarbeiterbereich: Symbole in der Navigation und auf „Heute zu tun". */
body.mitarbeiter .navsymbol { display: grid; place-items: center; }
body.mitarbeiter .navsymbol svg { width: 16px; height: 16px; display: block; }
body.mitarbeiter .aufgabe { position: relative; }
body.mitarbeiter .aufgabesymbol {
  position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
  background: var(--akzent-flaeche); color: var(--akzent-vorne);
}
body.mitarbeiter .aufgabe.erledigt .aufgabesymbol { background: var(--papier-zart, #F4F6F9); color: var(--text-leise); }
body.mitarbeiter .aufgabesymbol svg { width: 19px; height: 19px; display: block; }
body.mitarbeiter .aufgabezahl { padding-right: 44px; }
@media (max-width: 600px) {
  body.mitarbeiter .aufgabesymbol { top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 10px; }
  body.mitarbeiter .aufgabesymbol svg { width: 16px; height: 16px; }
  body.mitarbeiter .aufgabezahl { padding-right: 36px; }
}

/* --- Weiche Seitenwechsel (View Transitions) ---------------------------------
   Die Seiten gleiten ineinander, statt hart zu wechseln, und das Foto aus der
   Liste wächst in die Galerie der Fahrzeugseite (Name foto-N je Fahrzeug in
   kachel.ejs und fahrzeug.ejs, galerie.js hält ihn am Foto, das gerade
   steht). Kopf und Chat-Symbol bleiben
   dabei stehen. Chrome, Edge und Safari ab 18.2 können das; Firefox noch
   nicht, dort wechseln die Seiten wie bisher. Wer am Gerät weniger Bewegung
   eingestellt hat, bekommt keinen Übergang. Die Übergänge hängen am
   Wurzelelement; die Farben und Kurven von body gelten dort nicht, deshalb
   stehen sie hier ausgeschrieben. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root) { animation: .18s ease-out both seiteGeht; }
::view-transition-new(root) { animation: .34s cubic-bezier(.2, .8, .2, 1) both seiteKommt; }
@keyframes seiteGeht { to { opacity: 0; } }
@keyframes seiteKommt { from { opacity: 0; translate: 0 8px; } }
body.oeffentlich .kopf, body.mitarbeiter .kopf { view-transition-name: kopf; }
body.oeffentlich .chatecke { view-transition-name: chatecke; }
.kachelbild img, .foto .grossbild { view-transition-class: fahrzeugfoto; }
::view-transition-group(*.fahrzeugfoto) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(*.fahrzeugfoto), ::view-transition-new(*.fahrzeugfoto) { height: 100%; object-fit: contain; }
/* Filter ohne Neuladen (liste.js): nur eine leise Überblendung, kein Heben. */
/* Beim Filtern fliegen die Kachelfotos nicht einzeln herum: Sie blenden mit
   der Seite über (der Name foto-N gilt nur beim Seitenwechsel). */
html.filter-wechsel .kachelbild img { view-transition-name: none !important; }
html.filter-wechsel::view-transition-old(root) { animation: .15s ease-out both seiteGeht; }
html.filter-wechsel::view-transition-new(root) { animation: .22s ease-out both seiteBlende; }
@keyframes seiteBlende { from { opacity: 0; } }

/* --- Einblenden beim Scrollen ------------------------------------------------
   Karten und Abschnitte der Website gleiten beim Scrollen sanft herein,
   gesteuert vom Scrollen selbst (kein JavaScript). Fahrzeugkacheln nur mit
   Bewegung, ohne Durchsichtigkeit: Ein Fahrzeugbild wird nie abgedunkelt
   (oben, „WICHTIG"). Browser ohne diese Technik (Firefox) bekommen dasselbe
   über seite.js (html.einblenden-ersatz); dieselbe Liste steht dort. */
@keyframes einblenden { from { opacity: 0; translate: 0 18px; } }
@keyframes einblendenBewegung { from { translate: 0 24px; } }
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    body.oeffentlich main .vorteile li, body.oeffentlich main .ablauf li, body.oeffentlich main .kontaktblock, body.oeffentlich main .partnerkachel,
    body.oeffentlich main .kennzahl, body.oeffentlich main .fahrzeugseite .karte {
      animation: einblenden linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 150px;
    }
    body.oeffentlich main .fahrzeugkachel {
      animation: einblendenBewegung linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 150px;
    }
  }
}
html.einblenden-ersatz body.oeffentlich main .vorteile li, html.einblenden-ersatz body.oeffentlich main .ablauf li,
html.einblenden-ersatz body.oeffentlich main .kontaktblock, html.einblenden-ersatz body.oeffentlich main .partnerkachel,
html.einblenden-ersatz body.oeffentlich main .kennzahl, html.einblenden-ersatz body.oeffentlich main .fahrzeugseite .karte,
html.einblenden-ersatz body.oeffentlich main .fahrzeugkachel {
  transition: opacity .5s cubic-bezier(.2, .8, .2, 1), translate .55s cubic-bezier(.2, .8, .2, 1);
}
html.einblenden-ersatz body.oeffentlich main .vorteile li:not(.eingeblendet),
html.einblenden-ersatz body.oeffentlich main .ablauf li:not(.eingeblendet),
html.einblenden-ersatz body.oeffentlich main .kontaktblock:not(.eingeblendet),
html.einblenden-ersatz body.oeffentlich main .partnerkachel:not(.eingeblendet),
html.einblenden-ersatz body.oeffentlich main .kennzahl:not(.eingeblendet),
html.einblenden-ersatz body.oeffentlich main .fahrzeugseite .karte:not(.eingeblendet) {
  opacity: 0; translate: 0 18px;
}
html.einblenden-ersatz body.oeffentlich main .fahrzeugkachel:not(.eingeblendet) { translate: 0 24px; }
/* Auf Papier steht alles fertig da. */
@media print {
  body.oeffentlich main .vorteile li, body.oeffentlich main .ablauf li, body.oeffentlich main .kontaktblock, body.oeffentlich main .partnerkachel,
  body.oeffentlich main .kennzahl, body.oeffentlich main .fahrzeugseite .karte, body.oeffentlich main .fahrzeugkachel { animation: none !important; opacity: 1 !important; translate: none !important; }
}

/* --- Filter ohne Neuladen ------------------------------------------------------
   Mit JavaScript wirkt jede Auswahl sofort (liste.js); die Knöpfe „Anwenden"
   und „Anzeigen" braucht es dann nicht. Ohne JavaScript bleiben sie. */
html.sofort-filter [data-sofort-knopf] { display: none !important; }
[data-sofort-bereich="ergebnis"][aria-busy="true"] { cursor: progress; }

/* ===== Lauf 13 · Zeichnungen (25.09.2026) ==================================
   Sein Wunsch: weniger reiner Text, mehr „wie eine App", gezeichnete,
   interaktive Grafiken statt Fotos. Alle Zeichnungen sind SVG in der Seite
   (ansichten/oeffentlich/zeichnungen/); jede Fläche trägt eine Rolle (f-…),
   die Farben stehen hier als Variablen, hell und dunkel (nachts mit Mond und
   Sternen). Seine Wahl A3 „plastisch": über den weichen Farbflächen des
   Grundstils Verläufe und Schatten (verlaeufe.ejs), eingeschaltet über
   html[data-zeichenstil="plastisch"] (rahmen.ejs). Der Vorschlag „linien"
   ist beim Abschließen entfallen. */
body.oeffentlich {
  --z-himmel-a: #D7E8F8; --z-himmel-b: #F1F7FD;
  --z-sonne: #FFC978; --z-sonne-licht: #FFE3AE; --z-sonnenschein: rgba(255, 201, 120, .28);
  --z-wolke: #FFFFFF; --z-stern: transparent;
  --z-berg: #C4D7EA; --z-berg-licht: #DCE8F4;
  --z-huegel-1: #B9DCC6; --z-huegel-1-licht: #D2EBDB;
  --z-huegel-2: #98CBAE; --z-huegel-2-licht: #B7DDC7;
  --z-huegel-3: #7FBD99; --z-huegel-3-licht: #A2D2B5;
  --z-baum: #4E9A73; --z-baum-licht: #7CC29C; --z-stamm: #9B7B63;
  --z-strasse: #5E6E83; --z-rand: #EEF2F7; --z-mitte: #FFFFFF;
  --z-haus: #FFFFFF; --z-haus-schatten: #E4EBF3; --z-dach: #E98E6E; --z-fenster: #CFE5F8; --z-tuer: #7C8FA6;
  --z-auto: #1F5F99; --z-auto-licht: #4F8BC6; --z-auto-2: #174C7C; --z-scheibe: #D6EAFB;
  --z-rad: #1E293B; --z-felge: #CBD5E1; --z-licht: #FFE08A;
  --z-akzent: #1F5F99; --z-akzent-licht: #5C95CF; --z-akzent-hell: #EAF2FB;
  --z-warm: #F2A65A; --z-warm-licht: #F8C98F;
  --z-flaeche: #FFFFFF; --z-flaeche-schatten: #E6EDF5; --z-flaeche-2: #F2F6FB;
  --z-detail: #94A3B8; --z-muenze: #F4C25B; --z-muenze-rand: #D9A43A;
  --z-schatten: rgba(20, 30, 50, .10); --z-gruen: #2E9E6B;
  --z-text: #1E293B; --z-text-leise: #56657A;
}
@media (prefers-color-scheme: dark) {
  :root[data-modus="system"] body.oeffentlich {
    --z-himmel-a: #0E1B30; --z-himmel-b: #1A2C47;
    --z-sonne: #E8EEF7; --z-sonne-licht: #FFFFFF; --z-sonnenschein: rgba(232, 238, 247, .10);
    --z-wolke: #22354F; --z-stern: #DCE6F3;
    --z-berg: #1D3148; --z-berg-licht: #26405C;
    --z-huegel-1: #1C3A3A; --z-huegel-1-licht: #24504C;
    --z-huegel-2: #1F4541; --z-huegel-2-licht: #2A5A53;
    --z-huegel-3: #245048; --z-huegel-3-licht: #2F665A;
    --z-baum: #2F6B55; --z-baum-licht: #3F8A6C; --z-stamm: #6B5646;
    --z-strasse: #3A4C66; --z-rand: #25354C; --z-mitte: #C9D6E6;
    --z-haus: #22324A; --z-haus-schatten: #1A283D; --z-dach: #B8694F; --z-fenster: #F6D98B; --z-tuer: #3A4E6B;
    --z-auto: #8BBEF0; --z-auto-licht: #B4D6F6; --z-auto-2: #6FA6DD; --z-scheibe: #1D2E47;
    --z-rad: #0B1524; --z-felge: #7D8FA8; --z-licht: #FFE08A;
    --z-akzent: #8BBEF0; --z-akzent-licht: #B4D6F6; --z-akzent-hell: #172A45;
    --z-warm: #E7A15C; --z-warm-licht: #F2C08A;
    --z-flaeche: #1B2A40; --z-flaeche-schatten: #152033; --z-flaeche-2: #22334D;
    --z-detail: #5D7190; --z-muenze: #E3B550; --z-muenze-rand: #B78A2E;
    --z-schatten: rgba(0, 0, 0, .30); --z-gruen: #5CC495;
    --z-text: #E5ECF5; --z-text-leise: #9AAABD;
  }
}
:root[data-modus="dunkel"] body.oeffentlich {
  --z-himmel-a: #0E1B30; --z-himmel-b: #1A2C47;
  --z-sonne: #E8EEF7; --z-sonne-licht: #FFFFFF; --z-sonnenschein: rgba(232, 238, 247, .10);
  --z-wolke: #22354F; --z-stern: #DCE6F3;
  --z-berg: #1D3148; --z-berg-licht: #26405C;
  --z-huegel-1: #1C3A3A; --z-huegel-1-licht: #24504C;
  --z-huegel-2: #1F4541; --z-huegel-2-licht: #2A5A53;
  --z-huegel-3: #245048; --z-huegel-3-licht: #2F665A;
  --z-baum: #2F6B55; --z-baum-licht: #3F8A6C; --z-stamm: #6B5646;
  --z-strasse: #3A4C66; --z-rand: #25354C; --z-mitte: #C9D6E6;
  --z-haus: #22324A; --z-haus-schatten: #1A283D; --z-dach: #B8694F; --z-fenster: #F6D98B; --z-tuer: #3A4E6B;
  --z-auto: #8BBEF0; --z-auto-licht: #B4D6F6; --z-auto-2: #6FA6DD; --z-scheibe: #1D2E47;
  --z-rad: #0B1524; --z-felge: #7D8FA8; --z-licht: #FFE08A;
  --z-akzent: #8BBEF0; --z-akzent-licht: #B4D6F6; --z-akzent-hell: #172A45;
  --z-warm: #E7A15C; --z-warm-licht: #F2C08A;
  --z-flaeche: #1B2A40; --z-flaeche-schatten: #152033; --z-flaeche-2: #22334D;
  --z-detail: #5D7190; --z-muenze: #E3B550; --z-muenze-rand: #B78A2E;
  --z-schatten: rgba(0, 0, 0, .30); --z-gruen: #5CC495;
  --z-text: #E5ECF5; --z-text-leise: #9AAABD;
}
.zeichenverlaeufe { position: absolute; width: 0; height: 0; overflow: hidden; }
.zeichnung { display: block; width: 100%; height: auto; overflow: visible; }
.zeichnung text { font-family: Nunito, "Nunito Sans", system-ui, sans-serif; font-weight: 800; fill: var(--z-text); }
/* Grundstil: jede Rolle eine Farbe */
.zeichnung .f-himmel { fill: var(--z-himmel-a); }
.zeichnung .f-sonne { fill: var(--z-sonne); }
.zeichnung .f-sonnenschein { fill: var(--z-sonnenschein); }
.zeichnung .f-wolke { fill: var(--z-wolke); }
.zeichnung .f-stern { fill: var(--z-stern); }
.zeichnung .f-berg { fill: var(--z-berg); }
.zeichnung .f-huegel-1 { fill: var(--z-huegel-1); }
.zeichnung .f-huegel-3 { fill: var(--z-huegel-3); }
.zeichnung .f-baum { fill: var(--z-baum); }
.zeichnung .f-baum-licht { fill: var(--z-baum-licht); }
.zeichnung .f-stamm { fill: var(--z-stamm); }
.zeichnung .f-strasse { fill: none; stroke: var(--z-strasse); stroke-linecap: round; stroke-linejoin: round; }
.zeichnung .f-rand { fill: none; stroke: var(--z-rand); stroke-linecap: round; stroke-linejoin: round; }
.zeichnung .f-mitte { fill: none; stroke: var(--z-mitte); stroke-linecap: round; }
.zeichnung .f-haus { fill: var(--z-haus); }
.zeichnung .f-dach { fill: var(--z-dach); }
.zeichnung .f-fenster { fill: var(--z-fenster); }
.zeichnung .f-tuer { fill: var(--z-tuer); }
.zeichnung .f-auto { fill: var(--z-auto); }
.zeichnung .f-auto-2 { fill: var(--z-auto-2); }
.zeichnung .f-scheibe { fill: var(--z-scheibe); }
.zeichnung .f-rad { fill: var(--z-rad); }
.zeichnung .f-felge { fill: var(--z-felge); }
.zeichnung .f-licht { fill: var(--z-licht); }
.zeichnung .f-akzent { fill: var(--z-akzent); }
.zeichnung .f-akzent-hell { fill: var(--z-akzent-hell); }
.zeichnung .f-warm { fill: var(--z-warm); }
.zeichnung .f-flaeche { fill: var(--z-flaeche); }
.zeichnung .f-flaeche-2 { fill: var(--z-flaeche-2); }
.zeichnung .f-detail { fill: none; stroke: var(--z-detail); stroke-linecap: round; stroke-linejoin: round; }
.zeichnung .f-muenze { fill: var(--z-muenze); }
.zeichnung .f-muenze-rand { fill: var(--z-muenze-rand); }
.zeichnung .f-schatten { fill: var(--z-schatten); }
.zeichnung .f-gruen { fill: var(--z-gruen); }
/* Plastisch: dieselben Flächen mit Licht von oben und weichen Schatten */
html[data-zeichenstil="plastisch"] .zeichnung .f-himmel { fill: url(#zv-himmel); }
html[data-zeichenstil="plastisch"] .zeichnung .f-sonne { fill: url(#zv-sonne); }
html[data-zeichenstil="plastisch"] .zeichnung .f-berg { fill: url(#zv-berg); }
html[data-zeichenstil="plastisch"] .zeichnung .f-huegel-1 { fill: url(#zv-huegel-1); }
html[data-zeichenstil="plastisch"] .zeichnung .f-huegel-3 { fill: url(#zv-huegel-3); }
html[data-zeichenstil="plastisch"] .zeichnung .f-baum { fill: url(#zv-baum); }
html[data-zeichenstil="plastisch"] .zeichnung .f-auto { fill: url(#zv-auto); }
html[data-zeichenstil="plastisch"] .zeichnung .f-haus { fill: url(#zv-haus); }
html[data-zeichenstil="plastisch"] .zeichnung .f-flaeche { fill: url(#zv-flaeche); }
html[data-zeichenstil="plastisch"] .zeichnung .f-akzent { fill: url(#zv-akzent); }
html[data-zeichenstil="plastisch"] .zeichnung .f-warm { fill: url(#zv-warm); }
html[data-zeichenstil="plastisch"] .zeichnung .z-objekt { filter: drop-shadow(0 5px 6px rgba(20, 30, 50, .22)); }
html[data-zeichenstil="plastisch"] .zeichnung .f-wolke { filter: drop-shadow(0 3px 4px rgba(20, 30, 50, .10)); }
/* Licht von oben: die Hügel mit hellem Rand, Straßen mit weichem Schatten */
html[data-zeichenstil="plastisch"] .zeichnung .f-huegel-1 { stroke: var(--z-huegel-1-licht); stroke-width: 3px; }
html[data-zeichenstil="plastisch"] .zeichnung .f-huegel-3 { stroke: var(--z-huegel-3-licht); stroke-width: 3px; }
html[data-zeichenstil="plastisch"] .zeichnung .f-rand { filter: drop-shadow(0 4px 3px rgba(20, 30, 50, .18)); }
html[data-zeichenstil="plastisch"] .zeichnung .f-baum { filter: drop-shadow(0 3px 2px rgba(20, 30, 50, .18)); }
html[data-zeichenstil="plastisch"] .zeichnung .f-akzent-hell { filter: drop-shadow(0 6px 10px rgba(20, 30, 50, .10)); }
html[data-zeichenstil="plastisch"] .schaukarte, html[data-zeichenstil="plastisch"] .wegekachel, html[data-zeichenstil="plastisch"] .schrittkarten li,
html[data-zeichenstil="plastisch"] .karosseriekachel { background-image: linear-gradient(180deg, var(--z-glanz), transparent 60%); }

/* --- Zeichnungen: Straße, Bewegung -------------------------------------------
   Straßen tragen ihre Breite als --sw (Einheiten der Zeichnung). */
.zeichnung .f-strasse { stroke-width: calc(var(--sw, 20) * 1px); }
.zeichnung .f-rand { stroke-width: calc(var(--sw, 20) * 1px + 8px); }
.zeichnung .f-mitte { stroke-width: calc(var(--sw, 2) * 1px); }

/* Bewegungen, die mehrere Zeichnungen nutzen (Räder, Nadel, Funken, Wolken,
   Fahne). */
@keyframes zradDreht { from { rotate: 0deg; } to { rotate: 1260deg; } }
@keyframes znadelHuepft { 0% { translate: 0 0; scale: 1 1; } 30% { translate: 0 -16px; scale: .95 1.05; } 55% { translate: 0 0; scale: 1.08 .92; } 75% { translate: 0 -5px; scale: 1 1; } 100% { translate: 0 0; } }
@keyframes zfunken { 0% { opacity: 0; scale: .3; } 25% { opacity: 1; scale: 1.1; } 100% { opacity: 0; scale: 1.4; } }
@keyframes zwolkeZieht { from { translate: -30px 0; } to { translate: 30px 0; } }
@keyframes zfahneWeht { from { scale: 1 1; } to { scale: .82 1.08; } }

/* Striche in Zeichnungen (Haken, Zeichen auf Münzen) */
.zeichnung .f-strich-hell { fill: none; stroke: var(--z-flaeche); stroke-linecap: round; stroke-linejoin: round; }
.zeichnung .f-strich-muenze { fill: none; stroke: var(--z-muenze-rand); stroke-linecap: round; stroke-linejoin: round; }
.zeichnung [hidden] { display: none; }

/* --- Lieferseite, Lauf 13 ------------------------------------------------------
   Der Planer: links die Länder, rechts die Europakarte (seine Wahl C2).
   Darunter die Schritte als Karten mit Symbol. */
body.oeffentlich .lieferseite .lieferplaner { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; padding: 22px; gap: 20px 26px; }
body.oeffentlich .lieferseite .lieferschritte { margin-top: 34px; }
@media (max-width: 860px) {
  body.oeffentlich .lieferseite .lieferplaner { grid-template-columns: 1fr; padding: 16px; }
  body.oeffentlich .kartenbild { order: -1; }
}
body.oeffentlich .chippunkt { width: 8px; height: 8px; border-radius: 50%; background: var(--z-akzent-licht, #5C95CF); margin-right: 7px; flex-shrink: 0; }
body.oeffentlich .landchip[aria-current="true"] .chippunkt { background: currentColor; }

/* Die Schritte als Karten mit Symbol; jede Karte leuchtet, wenn das Auto auf
   der Karte an ihrer Etappe vorbeifährt (--bei, wie die Etappe). */
body.oeffentlich .schrittkarten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
body.oeffentlich .schrittkarten li {
  position: relative; padding: 18px; border-radius: var(--radius); background: var(--papier-hell);
  border: 1px solid var(--linie); box-shadow: var(--schatten);
}
body.oeffentlich .schrittkopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
body.oeffentlich .schrittsymbol { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--akzent-flaeche); color: var(--akzent-vorne); }
body.oeffentlich .schrittsymbol svg { width: 24px; height: 24px; display: block; }
body.oeffentlich .schrittzahl {
  min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center;
  border: 1px solid var(--linie); background: var(--papier-zart); color: var(--text-leise);
  font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 13.5px;
}
body.oeffentlich .schrittkarten h3 { margin: 0 0 4px; font-size: 16px; }
body.oeffentlich .schrittkarten p { margin: 0; font-size: 14.5px; color: var(--text-gedaempft); }
@keyframes karteLeuchtet {
  0% { border-color: var(--linie); box-shadow: var(--schatten); }
  30% { border-color: var(--akzent-vorne); box-shadow: 0 0 0 3px var(--akzent-rahmen), var(--schatten-stark); }
  100% { border-color: var(--linie); box-shadow: var(--schatten); }
}
@keyframes zahlAn { from { background: var(--papier-zart); color: var(--text-leise); border-color: var(--linie); } to { background: var(--akzent-vorne); color: var(--knopf-schrift, #FFFFFF); border-color: var(--akzent-vorne); } }
body.oeffentlich .liefer-karte .schrittkarten li[style] .schrittzahl { background: var(--akzent-vorne); color: var(--knopf-schrift, #FFFFFF); border-color: var(--akzent-vorne); }
@media (prefers-reduced-motion: no-preference) {
  body.oeffentlich .faehrt .schrittkarten li[style] { animation: karteLeuchtet 1.3s ease-out both; animation-delay: calc(var(--bei) * var(--dauer, 3.4s) + .25s); }
  body.oeffentlich .faehrt .schrittkarten li[style] .schrittzahl { animation: zahlAn .4s ease-out both; animation-delay: calc(var(--bei) * var(--dauer, 3.4s) + .25s); }
}

/* Die Nummer über einem Schritt der Bildergeschichte (Über uns). */
body.oeffentlich .zeitnummer { margin: 0 0 2px; font-size: 12.5px; font-weight: 800; color: var(--akzent-vorne); letter-spacing: .03em; }

/* Die Europakarte */
body.oeffentlich {
  --z-meer: #DCEBF8; --z-land: #FFFFFF; --z-grenze: #C5D3E2; --z-liefer: #BCD6F0; --z-liefer-hover: #9EC4EA; --z-umland: #E9EFF5;
  --z-glanz: rgba(255, 255, 255, .55);
}
:root[data-modus="dunkel"] body.oeffentlich { --z-meer: #122036; --z-land: #22334D; --z-grenze: #34496A; --z-liefer: #2D5C8C; --z-liefer-hover: #3A70A8; --z-umland: #192A40; --z-glanz: rgba(255, 255, 255, .04); }
@media (prefers-color-scheme: dark) {
  :root[data-modus="system"] body.oeffentlich { --z-meer: #122036; --z-land: #22334D; --z-grenze: #34496A; --z-liefer: #2D5C8C; --z-liefer-hover: #3A70A8; --z-umland: #192A40; --z-glanz: rgba(255, 255, 255, .04); }
}
body.oeffentlich .kartenbild { position: relative; border-radius: 20px; overflow: hidden; background: var(--z-meer); box-shadow: inset 0 0 0 1px var(--linie); }
.europakarte .f-meer { fill: var(--z-meer); }
.europakarte .f-umland { fill: var(--z-umland); }
.europakarte .land path, .europakarte .land circle { fill: var(--z-land); stroke: var(--z-grenze); stroke-width: .9px; stroke-linejoin: round; transition: fill .25s ease; }
.europakarte .land.liefer path, .europakarte .land.liefer circle { fill: var(--z-liefer); }
.europakarte a.land { cursor: pointer; }
@media (hover: hover) { .europakarte a.land:hover path, .europakarte a.land:hover circle { fill: var(--z-liefer-hover); } }
.europakarte .land.gewaehlt path, .europakarte .land.gewaehlt circle { fill: var(--z-akzent); }
.europakarte .kartenweg { fill: none; stroke: var(--z-warm); stroke-width: 3.5px; stroke-dasharray: 1 10; stroke-linecap: round; }
.europakarte .heimatring { fill: var(--z-akzent); opacity: .22; transform-box: fill-box; transform-origin: center; }
.europakarte .heimatpunkt { fill: var(--z-akzent); stroke: var(--z-flaeche); stroke-width: 3px; }
.europakarte .nadelform { stroke: var(--z-flaeche); stroke-width: 2px; }
.europakarte .kartennadel .nadel { transform-box: fill-box; transform-origin: 50% 100%; }
.europakarte .kartenauto { offset-rotate: 0deg; offset-distance: 100%; opacity: 0; }
.europakarte .kartenautogrund { fill: var(--z-flaeche); stroke: var(--z-akzent); stroke-width: 2.5px; filter: drop-shadow(0 2px 3px rgba(20, 30, 50, .25)); }
.europakarte .kartenspur { fill: none; stroke: var(--z-warm); stroke-width: 4px; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.europakarte .etappenpunkt .punktring { fill: var(--z-akzent); stroke: var(--z-flaeche); stroke-width: 2.5px; }
.europakarte .etappenpunkt .punktzahl { font-size: 12px; fill: var(--z-flaeche); }
.europakarte .punktring { transform-box: fill-box; transform-origin: center; }
/* Auf dem Handy: die Karte höher (Ränder abgeschnitten), die Markierungen größer. */
@media (max-width: 600px) {
  .europakarte { aspect-ratio: 1.12; }
  .europakarte .marke { scale: 1.4; }
}
.europakarte .funken { opacity: 0; transform-box: fill-box; transform-origin: center; }
.europakarte .ankunftsring { fill: none; stroke: var(--z-warm); stroke-width: 3px; opacity: 0; transform-box: fill-box; transform-origin: center; }
/* Das Land des Lagers: leicht warm getönt (ein Lieferland bleibt blau). */
.europakarte .land.heimat:not(.liefer) path { fill: color-mix(in srgb, var(--z-warm) 16%, var(--z-land)); }
html[data-zeichenstil="plastisch"] .europakarte .land { filter: drop-shadow(0 1.5px 1.5px rgba(20, 30, 50, .18)); }
body.oeffentlich .kartenlegende {
  position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
  background: var(--papier-hell); box-shadow: 0 4px 12px rgba(20, 30, 50, .12); font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 12.5px; color: var(--text-gedaempft);
}
body.oeffentlich .legendepunkt { width: 10px; height: 10px; border-radius: 50%; background: var(--z-akzent); box-shadow: 0 0 0 3px var(--akzent-flaeche); }
@keyframes wegErscheint { from { opacity: 0; } }
/* Dieselben Stützstellen wie zeichnungen.js, KARTENFAHRT */
@keyframes kartenautoFaehrt {
  0% { offset-distance: 0%; opacity: 1; animation-timing-function: cubic-bezier(.45, 0, 1, 1); }
  12% { offset-distance: 5%; animation-timing-function: linear; }
  85% { offset-distance: 87%; opacity: 1; animation-timing-function: cubic-bezier(0, 0, .35, 1); }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes kartenspurWaechst {
  0% { stroke-dashoffset: 1; animation-timing-function: cubic-bezier(.45, 0, 1, 1); }
  12% { stroke-dashoffset: .95; animation-timing-function: linear; }
  85% { stroke-dashoffset: .13; animation-timing-function: cubic-bezier(0, 0, .35, 1); }
  100% { stroke-dashoffset: 0; }
}
@keyframes kartenetappeAn {
  0% { fill: var(--z-flaeche); stroke: var(--z-detail); scale: 1; }
  40% { fill: var(--z-akzent); stroke: var(--z-flaeche); scale: 1.4; }
  100% { fill: var(--z-akzent); stroke: var(--z-flaeche); scale: 1; }
}
@keyframes kartenetappeZahl { 0%, 30% { fill: var(--z-text-leise); } 40%, 100% { fill: var(--z-flaeche); } }
@keyframes ankunftWelle { 0% { opacity: 0; scale: .3; } 3% { opacity: .95; scale: .38; } 100% { opacity: 0; scale: 2.8; } }
@keyframes heimatPuls { 0%, 100% { scale: 1; opacity: .28; } 50% { scale: 1.35; opacity: .12; } }
@media (prefers-reduced-motion: no-preference) {
  .faehrt .europakarte .kartenweg { animation: wegErscheint .6s ease-out both; }
  .faehrt .europakarte .kartenauto { animation: kartenautoFaehrt var(--dauer, 3.4s) .25s both; }
  .faehrt .europakarte .kartenspur { animation: kartenspurWaechst var(--dauer, 3.4s) .25s both; }
  .faehrt .europakarte .etappenpunkt .punktring { animation: kartenetappeAn .6s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--bei) * var(--dauer, 3.4s) + .25s); }
  .faehrt .europakarte .etappenpunkt .punktzahl { animation: kartenetappeZahl .6s linear both; animation-delay: calc(var(--bei) * var(--dauer, 3.4s) + .25s); }
  .faehrt .europakarte .kartennadel .nadel { animation: znadelHuepft .8s cubic-bezier(.3, .7, .4, 1) calc(var(--dauer, 3.4s) + .2s) both; }
  html[data-spiel="deutlich"] .faehrt .europakarte .funken { animation: zfunken 1.2s ease-out calc(var(--dauer, 3.4s) + .3s) both; }
  html[data-spiel="deutlich"] .faehrt .europakarte .ankunftsring { animation: ankunftWelle 1.1s ease-out calc(var(--dauer, 3.4s) + .15s) both; }
  .europakarte .heimatring { animation: heimatPuls 2.8s ease-in-out infinite; }
}

/* --- Über uns, Lauf 13 ------------------------------------------------------------
   Kopfgrafik (Autohaus), Bestand als Schaubild, Uhr der Erreichbarkeit,
   Wege als Kacheln, der Kauf als Bildergeschichte. Farben der Reihen im
   Schaubild: sechs ruhige, gut unterscheidbare Töne, hell und dunkel. */
body.oeffentlich {
  --z-hof: #E4EBF2;
  --reihe-1: #1F5F99; --reihe-2: #F2A65A; --reihe-3: #2E9E6B; --reihe-4: #7C6BD6; --reihe-5: #2A9DB5; --reihe-6: #94A3B8;
}
:root[data-modus="dunkel"] body.oeffentlich { --z-hof: #2A3A52; --reihe-1: #8BBEF0; --reihe-2: #F2B574; --reihe-3: #5CC495; --reihe-4: #A99CF0; --reihe-5: #5CC3D8; --reihe-6: #7D8FA8; }
@media (prefers-color-scheme: dark) {
  :root[data-modus="system"] body.oeffentlich { --z-hof: #2A3A52; --reihe-1: #8BBEF0; --reihe-2: #F2B574; --reihe-3: #5CC495; --reihe-4: #A99CF0; --reihe-5: #5CC3D8; --reihe-6: #7D8FA8; }
}
.zeichnung .f-hof { fill: var(--z-hof); }
body.oeffentlich .ueberbild.gezeichnet { aspect-ratio: 5 / 3; background: var(--z-himmel-a); box-shadow: var(--schatten); }
body.oeffentlich .ueberbild.gezeichnet .autohaus { width: 100%; height: 100%; }
.autohaus .parkplatz3 .einparken, .autohaus .fahne { transform-box: fill-box; }
.autohaus .fahne { transform-origin: 0 50%; }
@keyframes einparken { 0% { translate: -330px 0; } 78% { translate: 6px 0; } 100% { translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  .autohaus .einparken { animation: einparken 2.4s cubic-bezier(.25, .75, .3, 1) .5s both; }
  .autohaus .einparken .zrad { animation: zradDreht 2.4s cubic-bezier(.25, .75, .3, 1) .5s both; }
  .autohaus .fahne { animation: zfahneWeht 1.8s ease-in-out infinite alternate; }
  .autohaus .wk1 { animation: zwolkeZieht 40s ease-in-out infinite alternate; }
  .autohaus .wk2 { animation: zwolkeZieht 55s ease-in-out -20s infinite alternate-reverse; }
}

/* Schaubild */
body.oeffentlich .schaubild { margin-top: 34px; }
body.oeffentlich .schaubildraster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; }
@media (max-width: 860px) { body.oeffentlich .schaubildraster { grid-template-columns: 1fr; } }
body.oeffentlich .schaukarte { padding: 20px; border-radius: var(--radius); background: var(--papier-hell); border: 1px solid var(--linie); box-shadow: var(--schatten); }
body.oeffentlich .schaukarte h3 { margin: 0 0 14px; font-size: 16px; }
body.oeffentlich .ringreihe { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
body.oeffentlich .ringbild { position: relative; width: 190px; flex-shrink: 0; margin: 0 auto; }
body.oeffentlich .ringbild .ring { width: 100%; height: auto; rotate: -90deg; }
.ring .ringspur { fill: none; stroke: var(--linie); stroke-width: 15px; }
.ring .ringstueck { fill: none; stroke-width: 15px; stroke-dasharray: var(--laenge) 100; stroke-dashoffset: var(--versatz); }
.ring .reihe-1, .schaupunkt.reihe-1 { stroke: var(--reihe-1); background: var(--reihe-1); }
.ring .reihe-2, .schaupunkt.reihe-2 { stroke: var(--reihe-2); background: var(--reihe-2); }
.ring .reihe-3, .schaupunkt.reihe-3 { stroke: var(--reihe-3); background: var(--reihe-3); }
.ring .reihe-4, .schaupunkt.reihe-4 { stroke: var(--reihe-4); background: var(--reihe-4); }
.ring .reihe-5, .schaupunkt.reihe-5 { stroke: var(--reihe-5); background: var(--reihe-5); }
.ring .reihe-6, .schaupunkt.reihe-6 { stroke: var(--reihe-6); background: var(--reihe-6); }
body.oeffentlich .ringmitte { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
body.oeffentlich .ringmitte strong { font-family: Nunito, system-ui, sans-serif; font-size: 34px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
body.oeffentlich .ringmitte span { font-size: 13px; font-weight: 700; color: var(--text-leise); }
/* Zahl und Wort in der Mitte stehen auf der Kartenfarbe, sichtbar wie vorher.
   Ohne sie nimmt axe die Farbe des Rings als Hintergrund, weil der Kreis als
   Ganzes unter der Mitte liegt, obwohl nur sein Rand gemalt ist (Messung beim
   Abschließen von Lauf 13). */
body.oeffentlich .ringmitte strong, body.oeffentlich .ringmitte span { background: var(--papier-hell); border-radius: 6px; }
body.oeffentlich .schauliste { list-style: none; margin: 0; padding: 0; flex: 1 1 200px; display: grid; gap: 4px; }
body.oeffentlich .schauliste a, body.oeffentlich .balkenliste a {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border-radius: 12px; color: var(--text); text-decoration: none;
  transition: background-color .18s, transform .18s var(--weich);
}
@media (hover: hover) { body.oeffentlich .schauliste a:hover, body.oeffentlich .balkenliste a:hover { background: var(--akzent-flaeche); color: var(--text); transform: translateX(3px); } }
body.oeffentlich .schaupunkt { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
body.oeffentlich .schautext { flex: 1; font-weight: 700; font-size: 14.5px; }
body.oeffentlich .schauzahl { font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 15px; color: var(--akzent-vorne); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
body.oeffentlich .balkenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
body.oeffentlich .balkenliste a { display: grid; grid-template-columns: 64px minmax(0, 11em) minmax(0, 1fr) auto; gap: 12px; }
body.oeffentlich .balkenform .karosserieform { width: 64px; height: auto; display: block; }
body.oeffentlich .balkentext { font-weight: 700; font-size: 14px; line-height: 1.3; }
body.oeffentlich .balkenspur { height: 12px; border-radius: 999px; background: var(--papier-zart); overflow: hidden; }
body.oeffentlich .balken { display: block; height: 100%; width: calc(var(--relativ) * 100%); border-radius: 999px; background: linear-gradient(90deg, var(--akzent-vorne), var(--z-akzent-licht, #5C95CF)); transform-origin: 0 50%; }
@media (max-width: 600px) {
  body.oeffentlich .balkenliste a { grid-template-columns: 52px minmax(0, 1fr) auto; row-gap: 4px; }
  body.oeffentlich .balkenform .karosserieform { width: 52px; }
  body.oeffentlich .balkenspur { grid-column: 2 / 4; grid-row: 2; }
}
body.oeffentlich .kleintitel { margin: 22px 0 10px; font-size: 15px; color: var(--text-gedaempft); }
/* Wachsen beim Hinsehen (bausteine.js, nur mit html.zeigen-bereit) */
html.zeigen-bereit .ringkarte:not(.gezeigt) .ringstueck { stroke-dasharray: 0 100; }
html.zeigen-bereit .ringkarte .ringstueck { transition: stroke-dasharray .75s cubic-bezier(.3, .7, .3, 1) var(--verz, 0s); }
html.zeigen-bereit .balkenkarte:not(.gezeigt) .balken { scale: 0 1; }
html.zeigen-bereit .balkenkarte .balken { transition: scale .9s cubic-bezier(.25, .8, .25, 1); transition-delay: calc(var(--i, 0) * 90ms + .1s); }
html.zeigen-bereit .balkenkarte:not(.gezeigt) .karosserieform .formkoerper, html.zeigen-bereit .balkenkarte:not(.gezeigt) .karosserieform .zrad { translate: -18px 0; opacity: 0; }
html.zeigen-bereit .balkenkarte .karosserieform .formkoerper, html.zeigen-bereit .balkenkarte .karosserieform .zrad { transition: translate .7s cubic-bezier(.25, .8, .25, 1), opacity .4s; transition-delay: calc(var(--i, 0) * 90ms); }
.karosserieform .zrad { transform-box: fill-box; transform-origin: center; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.oeffentlich .balkenliste a:hover .karosserieform .zrad { rotate: 180deg; transition: rotate .5s; }
  body.oeffentlich .balkenliste a:hover .karosserieform .formkoerper { translate: 3px 0; transition: translate .5s; }
}

/* Erreichen: die Uhr und die Wege als Kacheln */
body.oeffentlich .erreichenraster { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(250px, 1fr); gap: 14px; }
body.oeffentlich .erreichenraster .wegekacheln { grid-column: 1 / -1; }
@media (max-width: 860px) { body.oeffentlich .erreichenraster { grid-template-columns: 1fr; } }
body.oeffentlich .erreichbarkeitsuhr { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 22px; align-items: center; }
@media (max-width: 600px) { body.oeffentlich .erreichbarkeitsuhr { grid-template-columns: 1fr; justify-items: center; } body.oeffentlich .uhrtext { width: 100%; } }
body.oeffentlich .uhrbild { position: relative; width: 210px; }
body.oeffentlich .uhrblatt { width: 100%; height: auto; }
.uhrblatt .uhrflaeche { fill: var(--papier-zart); }
.uhrblatt .uhrspur { fill: none; stroke: var(--linie); stroke-width: 13px; }
.uhrblatt .uhrbogen { fill: none; stroke: var(--akzent-vorne); stroke-width: 13px; stroke-linecap: round; }
.uhr-da .uhrblatt .uhrbogen { stroke: var(--z-gruen); }
.uhrblatt .uhrstrich { stroke: var(--text-leise); stroke-width: 1.2px; stroke-linecap: round; opacity: .55; }
.uhrblatt .uhrstrich.gross { stroke-width: 2.2px; opacity: .9; }
.uhrblatt .uhrzahl { font-size: 12px; font-weight: 800; fill: var(--text-leise); }
.uhrblatt .uhrzahl.klein { font-size: 9.5px; }
.uhrblatt .uhrmond { fill: var(--text-leise); opacity: .7; }
.uhrblatt .uhrzeiger { transform-box: view-box; transform-origin: 100px 100px; transition: rotate 1s cubic-bezier(.3, .7, .3, 1); }
.uhrblatt .zeigerlinie { stroke: var(--text); stroke-width: 2.5px; stroke-linecap: round; opacity: .75; }
.uhrblatt .zeigerpunkt { fill: var(--papier-hell); stroke: var(--z-warm); stroke-width: 4px; }
.uhr-da .uhrblatt .zeigerpunkt { stroke: var(--z-gruen); }
.uhrblatt .uhrnabe { fill: var(--text); }
body.oeffentlich .uhrmitte { position: absolute; left: 50%; top: 50%; translate: -50% 10px; display: grid; justify-items: center; line-height: 1.1; pointer-events: none; }
body.oeffentlich .uhrjetzt { font-family: Nunito, system-ui, sans-serif; font-size: 22px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; background: var(--papier-zart); padding: 2px 6px; border-radius: 8px; }
body.oeffentlich .uhrort { font-size: 11.5px; font-weight: 700; color: var(--text-leise); }
body.oeffentlich .uhrstatus { display: flex; align-items: center; gap: 9px; margin: 0; font-family: Nunito, system-ui, sans-serif; font-size: 17px; font-weight: 800; }
body.oeffentlich .uhrwieder { margin: 4px 0 0 19px; font-size: 14.5px; color: var(--text-gedaempft); }
/* Die Spalte der Zeiten ist so breit wie die längste Angabe, in allen
   Zeilen gleich (subgrid). Vorher war sie fest 7,2em breit, und zwei
   Zeitfenster an einem Tag („9 bis 13, 14 bis 18", englisch „midnight to
   6 am, midday to 2 pm") liefen über den Rand. Jedes Fenster steht in einer
   eigenen Zeile. */
body.oeffentlich .wochenleiste { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px 10px; grid-template-columns: 2.4em minmax(0, 1fr) auto; }
body.oeffentlich .wochenleiste li {
  display: grid; grid-column: 1 / -1; grid-template-columns: 2.4em minmax(0, 1fr) 7.2em; grid-template-columns: subgrid;
  align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-gedaempft);
}
body.oeffentlich .wochenleiste li.heute { color: var(--text); font-weight: 800; }
body.oeffentlich .wochentag { font-weight: 800; }
body.oeffentlich .tagbalken { position: relative; height: 10px; border-radius: 999px; background: var(--papier-zart); box-shadow: inset 0 0 0 1px var(--linie); }
body.oeffentlich .tagfenster { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--akzent-rahmen); }
body.oeffentlich .heute .tagfenster { background: var(--akzent-vorne); }
.uhr-da .heute .tagfenster { background: var(--z-gruen); }
body.oeffentlich .tagjetzt { position: absolute; top: -4px; bottom: -4px; width: 4px; margin-left: -2px; border-radius: 4px; background: var(--z-warm); box-shadow: 0 0 0 2px var(--papier-hell); }
body.oeffentlich .tagzeiten { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.oeffentlich .tagfensterzeit { display: block; }
body.oeffentlich .frei .tagzeiten { color: var(--text-leise); font-weight: 400; }
html.zeigen-bereit .uhrkarte:not(.gezeigt) .uhrbogen { stroke-dasharray: 0 100; }
html.zeigen-bereit .uhrkarte .uhrbogen { transition: stroke-dasharray 1s cubic-bezier(.3, .7, .3, 1) .2s; stroke-dasharray: 100 0; }

body.oeffentlich .wegekacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
body.oeffentlich .uhrkarte .erreichbarkeitsuhr { max-width: 780px; }
body.oeffentlich .wegekachel {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; border-radius: var(--radius);
  background: var(--papier-hell); border: 1px solid var(--linie); box-shadow: var(--schatten); color: var(--text); text-decoration: none;
  transition: transform .2s var(--weich), box-shadow .2s var(--weich), border-color .2s;
}
@media (hover: hover) { body.oeffentlich a.wegekachel:hover { transform: translateY(-3px); box-shadow: var(--schatten-stark); border-color: var(--akzent-rahmen); color: var(--text); } }
body.oeffentlich a.wegekachel:active { transform: scale(.98); }
body.oeffentlich .wegesymbol { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--akzent-flaeche); color: var(--akzent-vorne); margin-bottom: 6px; }
body.oeffentlich .wegesymbol svg { width: 23px; height: 23px; display: block; }
body.oeffentlich .wegekopf { display: flex; align-items: center; gap: 8px; font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 16px; }
body.oeffentlich .wegeunter { font-size: 14px; color: var(--text-gedaempft); }
body.oeffentlich .wegeunter.umbruch { overflow-wrap: anywhere; }
body.oeffentlich .wegeklein { font-size: 12.5px; color: var(--text-leise); margin-top: 4px; }

/* Die Bildergeschichte */
body.oeffentlich .geschichte { margin-top: 34px; }
body.oeffentlich .geschichtsband { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: geschichte; }
body.oeffentlich .geschichtsband:focus-visible { outline: 3px solid var(--fokus); outline-offset: 4px; border-radius: 18px; }
body.oeffentlich .geschichtskarte { position: relative; padding: 16px 18px 20px; border-radius: var(--radius); background: var(--papier-hell); border: 1px solid var(--linie); box-shadow: var(--schatten); }
body.oeffentlich .geschichtsbild { border-radius: 16px; overflow: hidden; margin-bottom: 12px; background: var(--papier-zart); }
body.oeffentlich .geschichtsbild .szene { width: 100%; height: auto; display: block; }
body.oeffentlich .geschichtskarte h3 { margin: 0 0 4px; font-size: 16.5px; }
body.oeffentlich .geschichtskarte p { margin: 0; font-size: 14.5px; color: var(--text-gedaempft); }
body.oeffentlich .geschichtskarte .zeitnummer { margin-bottom: 2px; color: var(--akzent-vorne); }
@media (max-width: 760px) {
  body.oeffentlich .geschichtsband {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 4px; scrollbar-width: none;
    margin: 0 -16px; padding-left: 16px; padding-right: 16px; scroll-padding: 0 16px;
  }
  body.oeffentlich .geschichtsband::-webkit-scrollbar { display: none; }
  body.oeffentlich .geschichtskarte { flex: 0 0 84%; scroll-snap-align: start; }
}
body.oeffentlich .geschichtspunkte { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
body.oeffentlich .geschichtspunkte[hidden] { display: none; }
body.oeffentlich .geschichtspunkt { width: 10px; height: 10px; min-height: 0; padding: 0; border-radius: 999px; border: 0; background: var(--rahmen-knopf); box-shadow: none; transition: width .25s var(--weich), background-color .25s; }
body.oeffentlich .geschichtspunkt[aria-current="true"] { width: 26px; background: var(--akzent-vorne); }

/* Szenen: kleine Bewegung, wenn sie ins Bild kommen (data-zeigen) */
.szene .szenekoerper, .szene .szenemarke, .szene .muenze, .szene .szenefahrzeug, .szene .tippen circle, .szene .szenefunken > * { transform-box: fill-box; transform-origin: center; }
.szene .szenefunken { opacity: 0; }
html.zeigen-bereit [data-zeigen]:not(.gezeigt) .szene .szenekoerper { opacity: 0; translate: 0 10px; }
html.zeigen-bereit [data-zeigen]:not(.gezeigt) .szene .szenemarke { opacity: 0; scale: .3; }
html.zeigen-bereit [data-zeigen]:not(.gezeigt) .szene .muenze { opacity: 0; translate: 0 -40px; }
html.zeigen-bereit [data-zeigen]:not(.gezeigt) .szene .szenefahrzeug { translate: -120% 0; }
html.zeigen-bereit [data-zeigen] .szene .szenekoerper { transition: opacity .5s ease-out, translate .6s cubic-bezier(.25, .8, .25, 1); }
html.zeigen-bereit [data-zeigen] .szene .szenemarke { transition: opacity .3s ease-out .45s, scale .55s cubic-bezier(.3, 1.6, .5, 1) .45s; }
html.zeigen-bereit [data-zeigen] .szene .muenze { transition: opacity .2s, translate .5s cubic-bezier(.3, 1.4, .5, 1); transition-delay: calc(var(--i, 0) * 120ms + .3s); }
html.zeigen-bereit [data-zeigen] .szene .szenefahrzeug { transition: translate 1.4s cubic-bezier(.25, .8, .3, 1) .2s; }
html.zeigen-bereit [data-zeigen].gezeigt .szene-fahrt .zrad { transform-box: fill-box; transform-origin: center; animation: zradDreht 1.4s cubic-bezier(.25, .8, .3, 1) .2s both; }
@keyframes tippenPunkt { 0%, 60%, 100% { translate: 0 0; opacity: .6; } 30% { translate: 0 -4px; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .szene .tippen circle { animation: tippenPunkt 1.3s ease-in-out infinite; }
  .szene .tippen circle:nth-child(2) { animation-delay: .15s; }
  .szene .tippen circle:nth-child(3) { animation-delay: .3s; }
  html[data-spiel="deutlich"] [data-zeigen].gezeigt .szene .szenefunken { animation: zfunken 1.2s ease-out .9s both; }
}

/* Funken (Spielfaktor „Deutlich", bausteine.js) */
.funke { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 2px; background: var(--farbe); pointer-events: none; rotate: 45deg; animation: funkeFliegt .9s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes funkeFliegt { 0% { opacity: 0; translate: 0 0; scale: .4; } 15% { opacity: 1; } 100% { opacity: 0; translate: var(--dx) var(--dy); scale: 1; } }

/* --- Kontakt, Lauf 13 ------------------------------------------------------------
   Oben die Wege als Kacheln, darunter das Formular (aufklappbar, mit Haken;
   seine Wahl F1); daneben die Uhr der Erreichbarkeit. */
body.oeffentlich .kontaktoben { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 18px 22px; align-items: start; }
@media (max-width: 920px) { body.oeffentlich .kontaktoben { grid-template-columns: 1fr; } }
body.oeffentlich .kontaktlinks h1 { margin-bottom: 6px; }
body.oeffentlich .kontaktrechts { padding-top: 8px; }
body.oeffentlich .wegewahl .abschnittstitel { margin-top: 18px; }
body.oeffentlich .wegekacheln.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) {
  body.oeffentlich .wegekacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.oeffentlich .wegekachel { padding: 12px; }
  body.oeffentlich .wegesymbol { width: 38px; height: 38px; border-radius: 12px; margin-bottom: 2px; }
  body.oeffentlich .wegekopf { font-size: 15px; }
  body.oeffentlich .wegeunter { font-size: 13px; }
}
body.oeffentlich .formularkachel { border-style: dashed; border-color: var(--akzent-rahmen); }
body.oeffentlich .kontaktformularzeile { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 22px; }
@media (max-width: 920px) { body.oeffentlich .kontaktformularzeile { grid-template-columns: 1fr; } }
body.oeffentlich .uhr-schmal .erreichbarkeitsuhr { grid-template-columns: 1fr; justify-items: center; }
body.oeffentlich .uhr-schmal .uhrtext { width: 100%; }

/* Das aufklappbare Formular */
body.oeffentlich .formularklappe { border-radius: var(--radius); background: var(--papier-hell); border: 1px solid var(--linie); box-shadow: var(--schatten); overflow: hidden; }
body.oeffentlich .klappenkopf {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none;
  font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 17px; color: var(--text);
}
body.oeffentlich .klappenkopf::-webkit-details-marker { display: none; }
body.oeffentlich .klappenkopf .wegesymbol { margin: 0; }
body.oeffentlich .klappenpfeil { margin-left: auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rahmen-knopf); color: var(--akzent-vorne); transition: rotate .3s var(--weich); }
body.oeffentlich .klappenpfeil svg { width: 18px; height: 18px; }
body.oeffentlich .formularklappe[open] .klappenpfeil { rotate: 90deg; }
@media (hover: hover) { body.oeffentlich .klappenkopf:hover { background: var(--akzent-flaeche); } }
body.oeffentlich .formularklappe .hakenformular { padding: 4px 22px 22px; }
@supports (interpolate-size: allow-keywords) {
  body.oeffentlich .formularklappe { interpolate-size: allow-keywords; }
  body.oeffentlich .formularklappe::details-content { block-size: 0; overflow: hidden; transition: block-size .45s cubic-bezier(.3, .7, .3, 1), content-visibility .45s allow-discrete; }
  body.oeffentlich .formularklappe[open]::details-content { block-size: auto; }
}
body.oeffentlich .knopfsymbol { display: inline-grid; place-items: center; margin-left: 6px; }
body.oeffentlich .knopfsymbol svg { width: 17px; height: 17px; }

/* Haken an ausgefüllten Feldern (kontakt.js setzt .gefuellt) */
body.oeffentlich .feldhaken {
  display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 8px; border-radius: 50%;
  background: var(--z-gruen); color: #FFFFFF; vertical-align: -4px; scale: 0; transition: scale .3s cubic-bezier(.3, 1.6, .5, 1);
}
body.oeffentlich .feldhaken svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .35s ease-out .12s; }
body.oeffentlich .gefuellt .feldhaken { scale: 1; }
body.oeffentlich .gefuellt .feldhaken svg { stroke-dashoffset: 0; }
body.oeffentlich .gefuellt > input, body.oeffentlich .gefuellt > textarea { border-color: color-mix(in srgb, var(--z-gruen) 55%, var(--rahmen-knopf)); }
body.oeffentlich .rueckweghinweis { display: flex; align-items: center; gap: 8px; transition: color .3s; }
body.oeffentlich .rueckwegpunkt { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--rahmen-knopf); transition: background-color .3s, box-shadow .3s; }
body.oeffentlich .rueckweghinweis.erfuellt { color: var(--z-gruen); }
body.oeffentlich .rueckweghinweis.erfuellt .rueckwegpunkt { background: var(--z-gruen); box-shadow: 0 0 0 4px rgba(46, 158, 107, .16); }

/* Danke-Seiten: der Haken mit Funken */
body.oeffentlich .dankekarte { text-align: center; max-width: 660px; margin: 24px auto; padding: 28px; }
body.oeffentlich .dankebild { position: relative; width: 220px; margin: 0 auto 6px; }
body.oeffentlich .dankebild .szene { width: 100%; height: auto; display: block; }
/* In der mittigen Karte standen die Listenpunkte ganz links, der Text in der
   Mitte (Kaufanfrage mit fehlenden Angaben, Galerie „Kontaktwege" vom
   26.09.2026). Jetzt mittig ohne Punkte, wie der Rest der Karte. */
body.oeffentlich .dankekarte ul { list-style: none; padding: 0; margin: 8px 0 16px; }
body.oeffentlich .dankekarte ul li { margin-bottom: 4px; }
body.oeffentlich .dankekarte .warnung ul { margin: 6px 0 0; }

/* Seit dem 26.09.2026 steht die E-Mail-Adresse nach Live-Chat und Nachricht
   (WhatsApp) als ruhige Zeile unter den Kacheln, nicht als eigene Kachel. */
body.oeffentlich .emailzeile { margin: 12px 2px 0; font-size: 15px; color: var(--text-gedaempft); }
body.oeffentlich .emailzeile a { font-weight: 600; }
body.oeffentlich .erreichenraster .emailzeile { grid-column: 1 / -1; margin-top: 0; }

/* --- Finanzierung und Kaufanfrage, Lauf 13 ------------------------------------------
   Kopfgrafik, Ratenrechner mit Anteil und Säulen, Schritt für Schritt (seine
   Wahl E1, anfrage-schritte.js). */
body.oeffentlich .finanzkopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); gap: 10px 24px; align-items: center; margin-bottom: 14px; }
body.oeffentlich .finanzbildbox .finanzbild { width: 100%; height: auto; display: block; }
/* Lauf 14: der Satz unter einem Betragsfeld, das keinen Betrag enthält */
/* Die Farbe steht hier ausdruecklich: „.feld small" (leiser Text) ist
   spezifischer als „.dringend", der Satz war grau (Gegenlesen Lauf 14). Die
   Meldungsfarbe, weil sie im dunklen Modus hell genug ist. */
body.oeffentlich .feld .betragwarnung { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--meldung-fehler-text); }
body.oeffentlich .feld .betragwarnung[hidden] { display: none; }
body.oeffentlich .zusammenfassungskarte dd .unlesbar { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--meldung-fehler-text); }
@media (max-width: 760px) { body.oeffentlich .finanzkopf { grid-template-columns: 1fr; } body.oeffentlich .finanzbildbox { order: -1; max-width: 420px; } }
.finanzbild .muenze, .finanzbild .szenemarke, .finanzbild .finanzauto { transform-box: fill-box; transform-origin: center; }
@keyframes muenzeFaellt { 0% { opacity: 0; translate: 0 -90px; } 60% { opacity: 1; } 80% { translate: 0 3px; } 100% { opacity: 1; translate: 0 0; } }
@keyframes markePoppt { 0% { opacity: 0; scale: .3; } 70% { scale: 1.12; } 100% { opacity: 1; scale: 1; } }
@keyframes autoRolltEin { from { translate: 60px 0; opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .finanzbild .muenze { animation: muenzeFaellt .55s cubic-bezier(.3, .7, .4, 1) both; animation-delay: calc(var(--i, 0) * 90ms + .2s); }
  .finanzbild .szenemarke { animation: markePoppt .55s cubic-bezier(.3, 1.4, .5, 1) 1.3s both; }
  .finanzbild .finanzauto { animation: autoRolltEin .9s cubic-bezier(.25, .8, .3, 1) .1s both; }
  html[data-spiel="deutlich"] .finanzbild .szenefunken { animation: zfunken 1.2s ease-out 1.6s both; }
}

/* Ratenrechner: Anteil und Säulen */
body.oeffentlich .anteilbild { margin: 2px 0 14px; }
body.oeffentlich .anteilbalken { height: 14px; border-radius: 999px; background: var(--z-akzent-licht, #5C95CF); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(20, 30, 50, .06); }
body.oeffentlich .anteilanzahlung { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--z-warm); transition: width .35s cubic-bezier(.3, .7, .3, 1); }
body.oeffentlich .anteillegende { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 13px; color: var(--text-gedaempft); }
body.oeffentlich .anteillegende b { color: var(--text); font-family: Nunito, system-ui, sans-serif; }
body.oeffentlich .anteilpunkt { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
body.oeffentlich .anteilpunkt.a { background: var(--z-warm); }
body.oeffentlich .anteilpunkt.r { background: var(--z-akzent-licht, #5C95CF); }
body.oeffentlich .saeulentitel { margin: 0 0 6px; }
body.oeffentlich .laufzeitwahl.saeulen { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; align-items: end; }
body.oeffentlich .laufzeitwahl.saeulen .laufzeitknopf {
  display: grid; grid-template-rows: auto 96px auto; gap: 5px; justify-items: center; align-items: end; min-height: 0; height: auto; padding: 8px 4px;
  border-radius: 14px; border: 1px solid var(--linie); background: var(--papier-hell); color: var(--text-gedaempft); box-shadow: none;
}
body.oeffentlich .laufzeitrate { font-family: Nunito, system-ui, sans-serif; font-size: 12.5px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; min-height: 1.2em; }
body.oeffentlich .laufzeitsaeule { display: flex; align-items: flex-end; width: 26px; height: 96px; border-radius: 8px; background: var(--papier-zart); overflow: hidden; }
body.oeffentlich .saeulenfuellung { display: block; width: 100%; height: calc(var(--hoehe, .1) * 100%); border-radius: 8px; background: var(--akzent-rahmen); transition: height .45s cubic-bezier(.3, .7, .3, 1), background-color .25s; }
body.oeffentlich .laufzeitname { font-size: 12px; font-weight: 700; }
body.oeffentlich .laufzeitknopf.vorschlag { border-style: dashed; border-color: var(--akzent-rahmen); }
body.oeffentlich .laufzeitwahl.saeulen .laufzeitknopf[aria-pressed="true"] { background: var(--akzent-flaeche); border-color: var(--akzent-vorne); box-shadow: 0 0 0 2px var(--akzent-vorne); color: var(--akzent-vorne); }
body.oeffentlich .laufzeitknopf[aria-pressed="true"] .saeulenfuellung, body.oeffentlich .laufzeitknopf.vorschlag .saeulenfuellung { background: var(--akzent-vorne); }
@media (hover: hover) { body.oeffentlich .laufzeitwahl.saeulen .laufzeitknopf:hover { background: var(--akzent-flaeche); color: var(--akzent-vorne); transform: translateY(-2px); } body.oeffentlich .laufzeitwahl.saeulen .laufzeitknopf[aria-pressed="true"]:hover { color: var(--akzent-vorne); } }
body.oeffentlich .ratebetrag { font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  /* Die Säulen in einer Reihe: umgebrochen standen die Raten auf zwei
     Grundlinien (Gegenlesen Lauf 13). Bei vielen Laufzeiten zum Wischen. */
  body.oeffentlich .laufzeitwahl.saeulen {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(44px, 1fr); gap: 4px;
    overflow-x: auto; padding: 3px; margin: -3px -3px 11px; scrollbar-width: none;
  }
  body.oeffentlich .laufzeitwahl.saeulen::-webkit-scrollbar { display: none; }
  body.oeffentlich .laufzeitwahl.saeulen .laufzeitknopf { padding: 8px 1px; }
  body.oeffentlich .laufzeitrate { font-size: 10.5px; line-height: 1.15; text-align: center; }
  body.oeffentlich .laufzeitname { font-size: 10.5px; line-height: 1.2; text-align: center; }
}

/* Schritt für Schritt */
body.oeffentlich .schrittfortschritt { margin: -4px 0 18px; }
body.oeffentlich .schrittfortschritt[hidden], body.oeffentlich .schrittnav[hidden], body.oeffentlich .zusammenfassung[hidden] { display: none; }
body.oeffentlich .schrittkopfzeile { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 8px; }
body.oeffentlich .schrittzaehler { font-size: 13px; font-weight: 800; color: var(--akzent-vorne); letter-spacing: .02em; }
body.oeffentlich .schrittname { font-family: Nunito, system-ui, sans-serif; font-size: 14.5px; font-weight: 800; color: var(--text-gedaempft); text-align: right; }
body.oeffentlich .schrittbalken { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 10px; border: 0; border-radius: 999px; background: var(--papier-zart); overflow: hidden; }
body.oeffentlich .schrittbalken::-webkit-progress-bar { background: var(--papier-zart); border-radius: 999px; }
body.oeffentlich .schrittbalken::-webkit-progress-value { background: linear-gradient(90deg, var(--akzent-vorne), var(--z-akzent-licht, #5C95CF)); border-radius: 999px; transition: width .45s cubic-bezier(.3, .7, .3, 1); }
body.oeffentlich .schrittbalken::-moz-progress-bar { background: var(--akzent-vorne); border-radius: 999px; }
body.oeffentlich .kaufanfrage.schrittweise > fieldset:not(.aktiv), body.oeffentlich .kaufanfrage.schrittweise > .zusammenfassung:not(.aktiv) { display: none; }
body.oeffentlich .kaufanfrage.schrittweise:not(.am-ende) .absendezeile { display: none; }
@keyframes schrittKommt { from { opacity: 0; translate: 16px 0; } }
@media (prefers-reduced-motion: no-preference) {
  body.oeffentlich .kaufanfrage.schrittweise > .aktiv { animation: schrittKommt .35s cubic-bezier(.25, .8, .25, 1); }
}
body.oeffentlich .schrittnav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linie); }
body.oeffentlich .schrittnav [data-schritt-weiter] { margin-left: auto; }
@media (max-width: 520px) {
  /* Schmal: Zurück und Weiter in einer Reihe, „Zur Übersicht" darunter (im
     Quelltext steht es hinter „Weiter", so stimmt auch die Tab-Reihenfolge) */
  body.oeffentlich .schrittnav [data-schritt-uebersicht] { flex: 1 0 100%; justify-content: center; }
}
/* Der Grund, warum „Absenden" zu einem Feld zurückführt, steht bei diesem Feld */
body.oeffentlich .felder > .schritthinweis { grid-column: 1 / -1; margin: 0; }
body.oeffentlich .schritthinweis[hidden] { display: none; }
body.oeffentlich .schrittnav [hidden] { display: none; }
body.oeffentlich .zusammenfassung h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin: 0 0 4px; }
body.oeffentlich .zusammenfassungsliste { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
body.oeffentlich .zusammenfassungskarte { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--linie); background: var(--papier-zart); }
body.oeffentlich .zusammenfassungskarte.fertig { border-color: color-mix(in srgb, var(--z-gruen) 45%, var(--linie)); }
body.oeffentlich .zusammenfassungskopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
body.oeffentlich .zusammenfassungskopf h3 { margin: 0; font-size: 15px; }
body.oeffentlich .zusammenfassungskopf .chip { min-height: 32px; padding: 0 12px; font-size: 13px; }
body.oeffentlich .zusammenfassungskarte dl { margin: 0; display: grid; gap: 4px; }
body.oeffentlich .zusammenfassungskarte dl div { display: grid; gap: 0; }
body.oeffentlich .zusammenfassungskarte dt { font-size: 12px; font-weight: 700; color: var(--text-leise); }
body.oeffentlich .zusammenfassungskarte dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }


/* --- Startseite, Lauf 13: statt des großen Fotos --------------------------------
   Karosserie-Kacheln (seine Wahl G1); die Suche steht rechts daneben wie
   früher auf dem Foto. */
body.oeffentlich .aufmacher-karosserie {
  background: linear-gradient(180deg, var(--z-himmel-a), var(--z-himmel-b)); min-height: 0;
}
body.oeffentlich .aufmacher-karosserie .aufmacherinhalt { align-items: center; padding: 34px 16px 30px; }
body.oeffentlich .aufmacher-karosserie .bestandspille { grid-row: 2; }
body.oeffentlich .aufmacher-karosserie .suchkarte { grid-row: 1 / span 2; }
body.oeffentlich .aufmachertitel { margin: 0 0 12px; font-size: 18px; color: var(--text); }
body.oeffentlich .karosseriekacheln ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; }
body.oeffentlich .karosseriekachel {
  display: grid; justify-items: center; gap: 6px; padding: 14px 10px 12px; border-radius: 20px; background: var(--papier-hell);
  border: 1px solid var(--linie); box-shadow: var(--schatten); color: var(--text); text-decoration: none; text-align: center;
  transition: transform .2s var(--weich), box-shadow .2s var(--weich), border-color .2s;
}
body.oeffentlich .karosseriebild { display: block; width: 100%; max-width: 130px; }
body.oeffentlich .karosseriebild .karosserieform { width: 100%; height: auto; display: block; overflow: visible; }
body.oeffentlich .karosseriename { font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 15px; }
@media (hover: hover) {
  body.oeffentlich .karosseriekachel:hover { transform: translateY(-3px); box-shadow: var(--schatten-stark); border-color: var(--akzent-rahmen); color: var(--akzent-vorne); }
}
body.oeffentlich .karosseriekachel:active { transform: scale(.98); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.oeffentlich .karosseriekachel .formkoerper, body.oeffentlich .karosseriekachel .zrad { transition: translate .6s cubic-bezier(.25, .8, .3, 1), rotate .6s cubic-bezier(.25, .8, .3, 1); }
  body.oeffentlich .karosseriekachel:hover .formkoerper { translate: 6px 0; }
  body.oeffentlich .karosseriekachel:hover .zrad { translate: 6px 0; rotate: 160deg; }
}
@keyframes kachelKommt { from { opacity: 0; translate: 0 12px; } }
@media (prefers-reduced-motion: no-preference) {
  body.oeffentlich .karosseriekacheln li { animation: kachelKommt .5s cubic-bezier(.25, .8, .25, 1) both; animation-delay: calc(var(--i, 0) * 70ms + .1s); }
}
/* Auf dem Handy: die Kacheln als Reihe zum Wischen (seine Wahl G1). Die
   Spalte darf nicht mit der Reihe wachsen (minmax(0, 1fr), min-width: 0),
   sonst schneidet der Aufmacher sie ab, statt sie wischen zu lassen. */
body.oeffentlich .wischleiste { display: none; }
@keyframes wischStupser { 0%, 100% { transform: none; } 40% { transform: translateX(-38px); } 72% { transform: translateX(5px); } }
@media (max-width: 860px) {
  body.oeffentlich .aufmacher-karosserie .aufmacherinhalt { padding: 18px 16px 16px; grid-template-columns: minmax(0, 1fr); }
  body.oeffentlich .karosseriekacheln { min-width: 0; }
  body.oeffentlich .karosseriekacheln ul {
    display: flex; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 16px; overscroll-behavior-x: contain;
    margin: 0 -16px; padding: 2px 16px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  body.oeffentlich .karosseriekacheln ul::-webkit-scrollbar { display: none; }
  body.oeffentlich .karosseriekacheln li { flex: 0 0 132px; scroll-snap-align: start; }
  body.oeffentlich .aufmacher-karosserie .bestandspille { grid-row: auto; }
  body.oeffentlich .wischleiste:not([hidden]) {
    display: block; position: relative; width: 56px; height: 5px; margin: 4px auto 0; border-radius: 999px; overflow: hidden;
    background: color-mix(in srgb, var(--akzent-vorne) 18%, transparent);
  }
  body.oeffentlich .wischdaumen {
    position: absolute; top: 0; bottom: 0; width: calc(var(--anteil, .5) * 100%); left: calc(var(--stand, 0) * (100% - var(--anteil, .5) * 100%));
    border-radius: inherit; background: var(--akzent-vorne);
  }
}
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  body.oeffentlich .karosseriekacheln .wischbar li {
    animation: kachelKommt .5s cubic-bezier(.25, .8, .25, 1) both, wischStupser 1.1s cubic-bezier(.45, 0, .3, 1) both;
    animation-delay: calc(var(--i, 0) * 70ms + .1s), 1.3s;
  }
}

/* Über uns, „Erreichen": ohne Anschrift steht die Uhr über die ganze Breite. */
body.oeffentlich .erreichenraster:not(:has(.anschriftkachel)) .uhrkarte { grid-column: 1 / -1; }
body.oeffentlich .anschriftkachel { justify-content: flex-start; }

/* --- Fahrzeugliste, Lauf 13 ---------------------------------------------------------
   Seine Wahl H1 (liste/seite.ejs): Karosserien und Filterleiste oben, dazu
   Merkliste (H4) und Vergleich (H5). Fahrzeugfotos werden nie
   abgedunkelt: Alles, was auf einem Foto liegt, ist hell und klein, und die
   Kacheln bewegen sich nur, ohne durchsichtig zu werden. */
body.oeffentlich .listenseite { padding-bottom: 36px; }
body.oeffentlich .listenkopf { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin: 0 0 16px; }
body.oeffentlich .listenkopf h1 { margin: 0; }
body.oeffentlich .listenzahl { margin: 0; display: inline-flex; align-items: baseline; gap: 6px; font-family: Nunito, system-ui, sans-serif; font-weight: 700; font-size: 15px; color: var(--text-gedaempft); }
body.oeffentlich .rollzahl { font-size: 26px; font-weight: 800; color: var(--akzent-vorne); font-variant-numeric: tabular-nums; }
body.oeffentlich .listenzahlvon { color: var(--text-leise); font-weight: 600; }

/* Die Karosserien zum Antippen: eine Reihe, auf dem Handy zum Wischen */
body.oeffentlich .karowahl { border: 0; margin: 0; padding: 0; min-width: 0; }
body.oeffentlich .karolauf { display: flex; gap: 10px; }
body.oeffentlich .karokachel { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; min-width: 0; flex: 1 1 0; max-width: 190px; }
body.oeffentlich .karokachel input, body.oeffentlich .wahlchip input, body.oeffentlich .wahlzeile input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
body.oeffentlich .karoinnen {
  position: relative; box-sizing: border-box; height: 100%; display: grid; justify-items: center; align-content: start; gap: 3px;
  padding: 10px 8px 10px; border-radius: 18px; background: var(--papier-hell); border: 1px solid var(--linie); box-shadow: var(--schatten);
  text-align: center; transition: translate .2s var(--weich), box-shadow .2s var(--weich), border-color .2s, background-color .2s;
}
body.oeffentlich .karobild { display: grid; place-items: center; width: 100%; max-width: 96px; height: 46px; }
body.oeffentlich .karobild .karosserieform { width: 100%; height: auto; display: block; overflow: visible; }
body.oeffentlich .karoalle .karobild svg { width: 30px; height: 30px; color: var(--akzent-vorne); }
body.oeffentlich .karoname { font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 13.5px; color: var(--text); line-height: 1.25; }
body.oeffentlich .karozahl {
  min-width: 24px; height: 20px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center;
  background: var(--papier-zart); color: var(--text-leise); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
body.oeffentlich .karohaken {
  position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--akzent-vorne); color: var(--knopf-schrift, #FFFFFF); scale: 0; transition: scale .28s cubic-bezier(.3, 1.6, .5, 1);
}
body.oeffentlich .karohaken svg { width: 13px; height: 13px; stroke-width: 3; }
body.oeffentlich .karokachel input:checked + .karoinnen { border-color: var(--akzent-vorne); background: var(--akzent-flaeche); box-shadow: 0 0 0 1px var(--akzent-vorne), var(--schatten); }
body.oeffentlich .karokachel input:checked + .karoinnen .karozahl { background: var(--papier-hell); color: var(--akzent-vorne); }
body.oeffentlich .karokachel input:checked + .karoinnen .karohaken { scale: 1; }
body.oeffentlich .karokachel input:focus-visible + .karoinnen, body.oeffentlich .wahlchip input:focus-visible + .wahlinnen,
body.oeffentlich .wahlzeile input:focus-visible + .wahlinnen { outline: 2px solid var(--fokus); outline-offset: 2px; }
@media (hover: hover) {
  body.oeffentlich .karokachel:hover .karoinnen { translate: 0 -2px; box-shadow: var(--schatten-stark); border-color: var(--akzent-rahmen); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.oeffentlich .karokachel .formkoerper, body.oeffentlich .karokachel .zrad { transition: translate .6s cubic-bezier(.25, .8, .3, 1), rotate .6s cubic-bezier(.25, .8, .3, 1); }
  body.oeffentlich .karokachel:hover .formkoerper { translate: 5px 0; }
  body.oeffentlich .karokachel:hover .zrad { translate: 5px 0; rotate: 150deg; }
}
@media (prefers-reduced-motion: no-preference) {
  body.oeffentlich .karowahl-reihe .karokachel { animation: kachelKommt .45s cubic-bezier(.25, .8, .25, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
  /* Nach dem Filtern (liste.js tauscht das Formular aus) nicht noch einmal. */
  body.oeffentlich .nachgeladen .karokachel { animation: none; }
}
/* Auf dem Handy: eine Reihe zum Wischen wie auf der Startseite (G1). */
@media (max-width: 860px) {
  body.oeffentlich .karowahl-reihe .karolauf {
    display: flex; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 16px; overscroll-behavior-x: contain;
    margin: 0 -16px; padding: 2px 16px 10px; scrollbar-width: none;
  }
  body.oeffentlich .karowahl-reihe .karolauf::-webkit-scrollbar { display: none; }
  body.oeffentlich .karowahl-reihe .karokachel { flex: 0 0 104px; scroll-snap-align: start; }
  body.oeffentlich .karowahl-reihe .karobild { height: 40px; }
}

/* Die Filterleiste mit ihren runden Knöpfen */
/* Das Formular erzeugt keinen eigenen Kasten (display: contents): So bleibt
   die Filterleiste beim Scrollen über der ganzen Liste stehen, nicht nur
   über dem Formular. */
body.oeffentlich .listenfilter { display: contents; }
body.oeffentlich .listenfilter > * + * { margin-top: 12px; }
body.oeffentlich .listenfilter > :last-child { margin-bottom: 20px; }
body.oeffentlich .filterpillen { min-width: 0; }
body.oeffentlich .pillenlauf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
body.oeffentlich .sortpille { margin-left: auto; }
body.oeffentlich .filterpille { position: relative; }
body.oeffentlich .filterpille > summary, body.oeffentlich a.filterpille {
  list-style: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px 0 16px; box-sizing: border-box;
  border-radius: 999px; border: 1px solid var(--rahmen-knopf); background: var(--papier-hell); color: var(--text);
  font-family: Nunito, system-ui, sans-serif; font-weight: 700; font-size: 14px; white-space: nowrap; cursor: pointer; user-select: none;
  text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color .18s, border-color .18s, color .18s;
}
body.oeffentlich a.filterpille { padding-right: 8px; }
body.oeffentlich a.filterpille[hidden] { display: none; }
body.oeffentlich .filterpille > summary::-webkit-details-marker { display: none; }
body.oeffentlich .filterpille > summary svg, body.oeffentlich a.filterpille svg { width: 17px; height: 17px; flex: none; }
body.oeffentlich .filterpille > summary > svg:last-child { color: var(--text-leise); transition: rotate .22s var(--weich); }
body.oeffentlich .filterpille[open] > summary > svg:last-child { rotate: 180deg; }
body.oeffentlich .filterpille[open] > summary { border-color: var(--akzent-vorne); }
body.oeffentlich .filterpille.aktiv > summary, body.oeffentlich a.filterpille.aktiv { background: var(--akzent-vorne); border-color: var(--akzent-vorne); color: var(--knopf-schrift, #FFFFFF); }
body.oeffentlich .filterpille.aktiv > summary > svg:last-child { color: inherit; }
@media (hover: hover) {
  body.oeffentlich .filterpille:not(.aktiv) > summary:hover, body.oeffentlich a.filterpille:not(.aktiv):hover { background: var(--akzent-flaeche); border-color: var(--akzent-rahmen); }
}
body.oeffentlich .filterpille > summary:focus-visible, body.oeffentlich a.filterpille:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
body.oeffentlich .merkpille svg { color: #E0475B; fill: #E0475B; }
body.oeffentlich .merkpille.aktiv svg { color: var(--knopf-schrift, #FFFFFF); fill: currentColor; }
body.oeffentlich .merkpille .chipzahl { margin-left: 2px; }
/* Das Feld eines Knopfes */
body.oeffentlich .pillenfeld {
  box-sizing: border-box; display: grid; gap: 12px; padding: 16px; border-radius: 20px; background: var(--papier-hell); color: var(--text);
  border: 1px solid var(--linie); box-shadow: 0 18px 44px rgba(10, 22, 40, .18), 0 2px 8px rgba(10, 22, 40, .08); white-space: normal;
}
body.oeffentlich .pillentitel { margin: 0; font-family: Nunito, system-ui, sans-serif; font-size: 12.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--text-leise); }
body.oeffentlich .pillenfuss { display: flex; justify-content: flex-end; }
body.oeffentlich .pillenfuss .knopf { min-height: 42px; }
html.sofort-filter body.oeffentlich .pillenfuss [data-pille-zu] { display: inline-flex; }
/* Ohne JavaScript tut der Knopf nichts; „.knopf" hob sein hidden auf, und in
   jedem Filterfeld stand ein toter zweiter Knopf (Gegenlesen Lauf 13). */
html:not(.sofort-filter) body.oeffentlich .pillenfuss [data-pille-zu] { display: none; }
/* Ohne JavaScript: „Auswahl anwenden" unter der Karosserie-Reihe */
body.oeffentlich .karowahl .karoanwenden { margin-top: 12px; min-height: 42px; }
@keyframes feldAuf { from { opacity: 0; translate: 0 -6px; } }
@keyframes blattHoch { from { translate: 0 100%; } }
/* Nach einer Wahl ohne Neuladen bleibt das Feld offen stehen (liste.js) */
body.oeffentlich .filterpille.bleibt-offen[open] > .pillenfeld { animation: none; }
@media (min-width: 861px) {
  /* Die Leiste bleibt beim Scrollen oben stehen. Kein Weichzeichner: der
     machte die Leiste zum Rahmen für das Feld darin. */
  body.oeffentlich .filterpillen {
    position: sticky; top: calc(var(--kopf-hoehe, 64px) + 10px); z-index: 25; padding: 8px; border-radius: 999px;
    background: var(--papier-hell); border: 1px solid var(--linie); box-shadow: var(--schatten);
  }
  body.oeffentlich .filterpille > .pillenfeld { position: absolute; top: calc(100% + 12px); left: 0; z-index: 2; width: max-content; min-width: 280px; max-width: 460px; }
  body.oeffentlich .filterpille > .pillenfeld.rechts { left: auto; right: 0; }
  body.oeffentlich .filterpille > .reglerfeld { width: 360px; }
  body.oeffentlich .filterpille[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 1; cursor: default; }
  @media (prefers-reduced-motion: no-preference) { body.oeffentlich .filterpille[open] > .pillenfeld { animation: feldAuf .2s var(--weich); } }
}
@media (max-width: 860px) {
  body.oeffentlich .pillenlauf { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; overscroll-behavior-x: contain; }
  body.oeffentlich .pillenlauf::-webkit-scrollbar { display: none; }
  body.oeffentlich .filterpille, body.oeffentlich a.filterpille { flex: none; }
  /* Auf dem Handy kommt das Feld als Blatt von unten. Dahinter eine
     unsichtbare Fläche: ein Tipp daneben schließt es (sie gehört zum Knopf
     selbst). Kein dunkler Schleier: Die Fahrzeugfotos bleiben, wie sie sind. */
  body.oeffentlich .filterpille > .pillenfeld {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; max-height: 82vh; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 24px 24px 0 0; border-bottom: 0; padding: 22px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 40px rgba(10, 22, 40, .22), 0 -1px 0 var(--linie);
  }
  body.oeffentlich .filterpille > .pillenfeld::before { content: ""; justify-self: center; width: 42px; height: 5px; border-radius: 999px; background: var(--linie); margin: -10px 0 2px; }
  body.oeffentlich .filterpille[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 50; background: transparent; cursor: default; }
  body.oeffentlich .pillenfuss .knopf { flex: 1; justify-content: center; }
  @media (prefers-reduced-motion: no-preference) {
    body.oeffentlich .filterpille[open] > .pillenfeld { animation: blattHoch .3s cubic-bezier(.2, .8, .2, 1); }
  }
}
/* Die Auswahl im Feld: runde Knöpfe mit Zahl, Zeilen mit Haken (Sortierung) */
body.oeffentlich .wahlgitter { display: flex; flex-wrap: wrap; gap: 8px; }
body.oeffentlich .wahlchip, body.oeffentlich .wahlzeile { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body.oeffentlich .wahlinnen {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; box-sizing: border-box; border-radius: 999px;
  border: 1px solid var(--rahmen-knopf); background: var(--papier-hell); color: var(--text);
  font-family: Nunito, system-ui, sans-serif; font-weight: 700; font-size: 14px; transition: background-color .15s, border-color .15s, color .15s;
}
body.oeffentlich .wahlinnen svg { width: 16px; height: 16px; flex: none; color: var(--akzent-vorne); }
body.oeffentlich .wahlzahl {
  min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; box-sizing: border-box;
  background: var(--papier-zart); color: var(--text-leise); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
@media (hover: hover) { body.oeffentlich .wahlchip:hover .wahlinnen, body.oeffentlich .wahlzeile:hover .wahlinnen { background: var(--akzent-flaeche); } }
body.oeffentlich .wahlchip input:checked + .wahlinnen { background: var(--akzent-vorne); border-color: var(--akzent-vorne); color: var(--knopf-schrift, #FFFFFF); }
body.oeffentlich .wahlchip input:checked + .wahlinnen svg { color: inherit; }
body.oeffentlich .wahlchip input:checked + .wahlinnen .wahlzahl { background: rgba(255, 255, 255, .12); color: inherit; }
body.oeffentlich .wahlliste { display: grid; gap: 2px; min-width: 240px; }
body.oeffentlich .wahlzeile .wahlinnen { display: flex; justify-content: space-between; width: 100%; border: 0; border-radius: 12px; min-height: 42px; padding: 0 12px; }
body.oeffentlich .wahlzeile .wahlinnen svg { opacity: 0; transition: opacity .15s; }
body.oeffentlich .wahlzeile input:checked + .wahlinnen { background: var(--akzent-flaeche); color: var(--akzent-vorne); }
body.oeffentlich .wahlzeile input:checked + .wahlinnen svg { opacity: 1; }

/* Die Regler: Höchstpreis mit Balkenbild, Kilometer */
body.oeffentlich .reglerkopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; }
body.oeffentlich .reglerwert { font-family: Nunito, system-ui, sans-serif; font-size: 16px; font-weight: 800; color: var(--akzent-vorne); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.oeffentlich .reglerbalken { display: flex; align-items: flex-end; gap: 3px; height: 64px; padding: 0 10px; }
body.oeffentlich .reglerbalken span { flex: 1; height: calc(6% + var(--h, 0) * 94%); border-radius: 4px 4px 1px 1px; background: var(--linie); transition: background-color .2s ease; }
body.oeffentlich .reglerbalken span.drin { background: color-mix(in srgb, var(--akzent-vorne) 62%, var(--papier-hell)); }
body.oeffentlich input.regler, body.oeffentlich input.regler:hover, body.oeffentlich input.regler:focus-visible {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 30px; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 0; box-shadow: none; background: transparent; cursor: pointer;
}
body.oeffentlich input.regler::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--akzent-vorne) calc(var(--anteil, 1) * 100%), var(--linie) 0); }
body.oeffentlich input.regler::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; box-sizing: border-box;
  background: var(--papier-hell); border: 3px solid var(--akzent-vorne); box-shadow: 0 2px 8px rgba(10, 22, 40, .22); transition: scale .15s ease;
}
body.oeffentlich input.regler:active::-webkit-slider-thumb { scale: 1.15; }
body.oeffentlich input.regler::-moz-range-track { height: 6px; border-radius: 999px; background: var(--linie); }
body.oeffentlich input.regler::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--akzent-vorne); }
body.oeffentlich input.regler::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--papier-hell); border: 3px solid var(--akzent-vorne); box-shadow: 0 2px 8px rgba(10, 22, 40, .22); }
body.oeffentlich input.regler:focus-visible { outline: none; }
body.oeffentlich input.regler:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--fokus); outline-offset: 2px; }
body.oeffentlich input.regler:focus-visible::-moz-range-thumb { outline: 2px solid var(--fokus); outline-offset: 2px; }
body.oeffentlich .reglerenden { display: flex; justify-content: space-between; margin-top: -2px; font-size: 12px; font-weight: 700; color: var(--text-leise); font-variant-numeric: tabular-nums; }

/* Gewählte Filter als Knöpfe mit Kreuz */
body.oeffentlich .aktivleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.oeffentlich .aktivchip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 5px 0 12px; box-sizing: border-box; border-radius: 999px;
  background: var(--akzent-flaeche); border: 1px solid var(--akzent-rahmen); color: var(--akzent-vorne);
  font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 13.5px; text-decoration: none; transition: background-color .15s;
}
body.oeffentlich .aktivchip > svg { width: 15px; height: 15px; }
body.oeffentlich .aktivkreuz { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--akzent-vorne) 12%, transparent); }
body.oeffentlich .aktivkreuz svg { width: 14px; height: 14px; stroke-width: 2.4; }
@media (hover: hover) { body.oeffentlich .aktivchip:hover { background: color-mix(in srgb, var(--akzent-vorne) 16%, var(--papier-hell)); color: var(--akzent-vorne); } }
body.oeffentlich .aktivweg { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 6px; font-size: 13.5px; font-weight: 700; color: var(--text-gedaempft); }
body.oeffentlich .aktivweg svg { width: 15px; height: 15px; }

/* Die neue Kachel: Fotos zum Wischen, Angaben mit Symbol */
body.oeffentlich .kachelraster2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
body.oeffentlich .kachel2 { position: relative; display: flex; flex-direction: column; }
body.oeffentlich .kachelbahn { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
body.oeffentlich .fotobahn { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
body.oeffentlich .fotobahn::-webkit-scrollbar { display: none; }
/* Mit Maus und JavaScript wechselt das Foto beim Darüberfahren
   (fahrzeugliste.js, dieselbe Abfrage); die Bahn lässt sich dann nicht selbst
   rollen. Sonst wäre sie ein rollbarer Bereich, den die Tastatur nicht
   erreicht (axe, „scrollable-region-focusable"). Die Fotos stehen alle auf
   der Fahrzeugseite; auf dem Handy wischt man wie bisher. */
@media (hover: hover) and (pointer: fine) { html.js body.oeffentlich .fotobahn { overflow-x: hidden; } }
body.oeffentlich .fotoglied { flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: block; }
body.oeffentlich .fotoglied img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
body.oeffentlich .fahrzeugkachel.kachel2:hover .kachelbild img { transform: none; }
body.oeffentlich .fotopunkte {
  position: absolute; left: 50%; bottom: 10px; translate: -50% 0; display: flex; align-items: center; gap: 5px; padding: 5px 8px;
  border-radius: 999px; background: rgba(255, 255, 255, .9); box-shadow: 0 2px 8px rgba(10, 22, 40, .12); pointer-events: none;
}
body.oeffentlich .fotopunkte i { width: 6px; height: 6px; border-radius: 999px; background: #B7C3D2; transition: width .25s var(--weich), background-color .25s; }
body.oeffentlich .fotopunkte i.an { width: 16px; background: #0F4C81; }
body.oeffentlich .fotozahl {
  position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px;
  border-radius: 999px; background: rgba(255, 255, 255, .92); color: #1E293B; font-size: 12px; font-weight: 800; pointer-events: none;
}
body.oeffentlich .fotozahl svg { width: 14px; height: 14px; }
body.oeffentlich .kachel2 .statuspunkt { position: absolute; top: 10px; left: 10px; }
body.oeffentlich .herzknopf {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: rgba(255, 255, 255, .94); color: #334155; box-shadow: 0 4px 12px rgba(10, 22, 40, .16);
  -webkit-tap-highlight-color: transparent; transition: scale .15s;
}
body.oeffentlich .herzknopf[hidden] { display: none; }
body.oeffentlich .herzknopf svg { width: 21px; height: 21px; transition: fill .2s, color .2s; }
body.oeffentlich .herzknopf[aria-pressed="true"] { color: #E0475B; }
body.oeffentlich .herzknopf[aria-pressed="true"] svg { fill: currentColor; }
body.oeffentlich .herzknopf:active { scale: .92; }
body.oeffentlich .herzknopf:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
@keyframes herzPocht { 0% { scale: 1; } 30% { scale: .78; } 62% { scale: 1.28; } 100% { scale: 1; } }
@keyframes herzRing { from { opacity: .9; scale: .6; } to { opacity: 0; scale: 1.6; } }
@media (prefers-reduced-motion: no-preference) {
  body.oeffentlich .herzknopf.pocht svg { animation: herzPocht .5s cubic-bezier(.3, 1.4, .5, 1); }
  html[data-spiel="deutlich"] body.oeffentlich .herzknopf.pocht::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #E0475B; animation: herzRing .55s ease-out forwards; pointer-events: none; }
}
body.oeffentlich .kachelinhalt2 { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; padding: 14px 16px 14px; }
body.oeffentlich .kachelkopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
body.oeffentlich .kachelkopf h3 { margin: 0 0 2px; }
body.oeffentlich .kachellink { color: inherit; text-decoration: none; }
body.oeffentlich .kachellink::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 0 0 var(--radius) var(--radius); }
body.oeffentlich .kachellink:focus-visible { outline: none; }
body.oeffentlich .kachellink:focus-visible::after { outline: 2px solid var(--fokus); outline-offset: -3px; }
body.oeffentlich .kachelfakten { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
body.oeffentlich .kachelfakten li { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; color: var(--text-gedaempft); }
body.oeffentlich .kachelfakten svg { width: 16px; height: 16px; flex: none; color: var(--akzent-vorne); }
body.oeffentlich .kachelfakten span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.oeffentlich .kachel2 .kachelverbrauch { margin: 8px 0 0; font-size: 12px; color: var(--text-leise); }
body.oeffentlich .kachel2 .kachelabstand { display: block; flex: 1 0 12px; }
body.oeffentlich .kachelfuss {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 10px;
  border-top: 2px solid color-mix(in srgb, var(--rahmen-knopf) 50%, var(--linie));
}
body.oeffentlich .kachel2 .kachelpreisblock { border-top: 0; padding-top: 0; }
body.oeffentlich .kachel2 .kachelpreis { margin: 0; }
body.oeffentlich .vergleichknopf {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; flex: none;
  border-radius: 999px; border: 1px solid var(--rahmen-knopf); background: var(--papier-hell); color: var(--text-gedaempft); cursor: pointer;
  font-family: Nunito, system-ui, sans-serif; font-size: 13px; font-weight: 800; transition: background-color .15s, color .15s, border-color .15s;
}
body.oeffentlich .vergleichknopf[hidden] { display: none; }
body.oeffentlich .vergleichknopf svg { width: 15px; height: 15px; }
body.oeffentlich .vergleichknopf[aria-pressed="true"] { background: var(--akzent-vorne); border-color: var(--akzent-vorne); color: var(--knopf-schrift, #FFFFFF); }
@media (hover: hover) { body.oeffentlich .vergleichknopf:not([aria-pressed="true"]):hover { background: var(--akzent-flaeche); color: var(--akzent-vorne); } }
@media (max-width: 559px) {
  body.oeffentlich .kachelraster2 { grid-template-columns: minmax(0, 1fr); }
}

/* Auf der Merkliste herausgenommen: sofort blass und nicht mehr anklickbar,
   bis die neue Liste da ist (fahrzeugliste.js) */
body.oeffentlich .kachel2.geht { opacity: .35; pointer-events: none; transition: opacity .2s; }

/* Die Merkliste */
body.oeffentlich .merkkopf {
  display: grid; gap: 4px; margin: 0 0 16px; padding: 14px 16px; border-radius: 18px;
  background: color-mix(in srgb, #E0475B 7%, var(--papier-hell)); border: 1px solid color-mix(in srgb, #E0475B 24%, var(--linie));
}
body.oeffentlich .merkkopf h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; }
body.oeffentlich .merkkopf h2 svg { width: 20px; height: 20px; color: #E0475B; fill: #E0475B; }
body.oeffentlich .merkkopf p { margin: 0; font-size: 13.5px; color: var(--text-gedaempft); }

/* Die Vergleichsleiste unten */
@keyframes leisteHoch { from { translate: -50% 120%; } }
@keyframes leisteWackelt { 0%, 100% { rotate: 0deg; } 25% { rotate: -2deg; } 75% { rotate: 2deg; } }
body.oeffentlich .vergleichsleiste {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); translate: -50% 0; z-index: 42;
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-radius: 999px; box-sizing: border-box; max-width: calc(100vw - 32px);
  background: var(--papier-hell); border: 1px solid var(--linie); box-shadow: 0 18px 44px rgba(10, 22, 40, .24), 0 2px 8px rgba(10, 22, 40, .08);
}
body.oeffentlich .vergleichsleiste[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  body.oeffentlich .vergleichsleiste.kommt { animation: leisteHoch .4s cubic-bezier(.2, .8, .2, 1); }
  body.oeffentlich .vergleichsleiste.wackelt { animation: leisteWackelt .35s ease-in-out 2; }
}
body.oeffentlich .vergleichsbilder { display: flex; padding-left: 8px; }
body.oeffentlich .vergleichsbilder img, body.oeffentlich .vergleichsbilder .leerbild {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; margin-left: -10px; border: 2px solid var(--papier-hell); background: var(--bildgrund); box-sizing: border-box;
}
body.oeffentlich .vergleichsbilder .leerbild { border-style: dashed; border-color: var(--rahmen-knopf); background: var(--papier-zart); }
body.oeffentlich .vergleichstext { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--text-gedaempft); white-space: nowrap; }
body.oeffentlich .vergleichslos { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; }
body.oeffentlich .vergleichslos svg { width: 17px; height: 17px; }
body.oeffentlich .vergleichslos[aria-disabled="true"] { opacity: .45; pointer-events: none; }
body.oeffentlich .vergleichsweg { width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--rahmen-knopf); background: var(--papier-hell); color: var(--text-gedaempft); display: grid; place-items: center; cursor: pointer; flex: none; }
body.oeffentlich .vergleichsweg svg { width: 18px; height: 18px; }
@media (max-width: 860px) {
  /* Über dem Chat-Knopf und über die ganze Breite. Daneben war zu wenig
     Platz: Mit drei Fotos ragten „Vergleichen" und „Leeren" über den
     Chat-Knopf, ein Tipp auf den Chat leerte den Vergleich (Gegenlesen
     Lauf 13). Der Satz „Höchstens drei" steht kurz statt der Fotos da. */
  body.oeffentlich .vergleichsleiste {
    left: 12px; right: 12px; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 68px); translate: none; max-width: none; justify-content: space-between;
  }
  body.oeffentlich .vergleichstext { display: none; }
  body.oeffentlich .vergleichsleiste.leiste-voll .vergleichsbilder { display: none; }
  body.oeffentlich .vergleichsleiste.leiste-voll .vergleichstext { display: block; min-width: 0; white-space: normal; }
  @media (prefers-reduced-motion: no-preference) { body.oeffentlich .vergleichsleiste.kommt { animation-name: leisteHochHandy; } }
}
@media (max-width: 380px) {
  body.oeffentlich .vergleichsbilder img, body.oeffentlich .vergleichsbilder .leerbild { width: 38px; height: 38px; }
}
@keyframes leisteHochHandy { from { translate: 0 120%; } }

/* Der Vergleich (Zugabe): Fotos oben, Zeile für Zeile, Bestwerte grün markiert */
body.oeffentlich .vergleichseite h1 { margin: 10px 0 18px; }
body.oeffentlich .zurueckpille {
  display: inline-flex; align-items: center; gap: 4px; min-height: 38px; padding: 0 14px 0 8px; border-radius: 999px;
  border: 1px solid var(--rahmen-knopf); background: var(--papier-hell); color: var(--text); text-decoration: none;
  font-family: Nunito, system-ui, sans-serif; font-weight: 700; font-size: 14px;
}
body.oeffentlich .zurueckpille svg { width: 18px; height: 18px; }
body.oeffentlich .vergleichsrahmen { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--linie); background: var(--papier-hell); box-shadow: var(--schatten); }
body.oeffentlich .vergleichstabelle { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: calc(170px + var(--spalten, 2) * 230px); }
body.oeffentlich .vergleichstabelle th, body.oeffentlich .vergleichstabelle td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); font-size: 14px; }
body.oeffentlich .vergleichstabelle tbody tr:last-child th, body.oeffentlich .vergleichstabelle tbody tr:last-child td { border-bottom: 0; }
body.oeffentlich .vergleichstabelle thead th:first-child, body.oeffentlich .vergleichstabelle tbody th { width: 170px; }
body.oeffentlich .vergleichstabelle tbody th {
  position: sticky; left: 0; z-index: 1; background: var(--papier-zart); color: var(--text-gedaempft); font-weight: 700; font-size: 13.5px;
}
body.oeffentlich .vergleichstabelle tbody th > * { vertical-align: middle; }
body.oeffentlich .vergleichstabelle tbody th svg { width: 16px; height: 16px; margin-right: 7px; color: var(--akzent-vorne); vertical-align: -3px; }
body.oeffentlich .vergleichstabelle thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--papier-zart); }
body.oeffentlich .vergleichskopf { display: table-cell; }
body.oeffentlich .vergleichskopf > * { display: block; }
body.oeffentlich .vergleichsbild { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--bildgrund); margin-bottom: 10px; }
body.oeffentlich .vergleichsbild img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.oeffentlich .vergleichsname { font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 16px; color: var(--text); text-decoration: none; line-height: 1.3; }
body.oeffentlich .vergleichslinie { font-size: 13px; color: var(--text-gedaempft); font-weight: 600; margin-top: 2px; }
body.oeffentlich .vergleichspreis { font-family: Nunito, system-ui, sans-serif; font-size: 19px; font-weight: 800; color: var(--text); margin-top: 8px; }
body.oeffentlich .vergleichskopf .kachelnetto { font-weight: 400; }
body.oeffentlich .vergleichskopf .vergleichsstatus { position: static; display: block; width: fit-content; margin-top: 8px; box-shadow: none; }
body.oeffentlich .vergleichweg { display: inline-flex !important; align-items: center; gap: 5px; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--text-leise); }
body.oeffentlich .vergleichweg svg { width: 15px; height: 15px; }
body.oeffentlich .vergleichstabelle td.bestwert, body.oeffentlich .vergleichspreis.bestwert { color: #166534; }
body.oeffentlich .vergleichstabelle td.bestwert { background: color-mix(in srgb, #16A34A 7%, var(--papier-hell)); font-weight: 700; }
body.oeffentlich .bestmarke {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 1px 8px 1px 5px; border-radius: 999px; vertical-align: 2px;
  background: #DCFCE7; color: #166534; font-family: Nunito, system-ui, sans-serif; font-size: 11.5px; font-weight: 800; white-space: nowrap;
}
body.oeffentlich .bestmarke svg { width: 12px; height: 12px; stroke-width: 3; }
:root[data-modus="dunkel"] body.oeffentlich .vergleichstabelle td.bestwert, :root[data-modus="dunkel"] body.oeffentlich .vergleichspreis.bestwert { color: #86EFAC; }
:root[data-modus="dunkel"] body.oeffentlich .bestmarke { background: rgba(34, 197, 94, .16); color: #86EFAC; }
@media (prefers-color-scheme: dark) {
  :root[data-modus="system"] body.oeffentlich .vergleichstabelle td.bestwert, :root[data-modus="system"] body.oeffentlich .vergleichspreis.bestwert { color: #86EFAC; }
  :root[data-modus="system"] body.oeffentlich .bestmarke { background: rgba(34, 197, 94, .16); color: #86EFAC; }
}
body.oeffentlich .vergleichsfuss td { padding-top: 14px; padding-bottom: 16px; }
body.oeffentlich .vergleichsfuss .knopf { width: 100%; justify-content: center; }
@media (max-width: 700px) {
  body.oeffentlich .vergleichstabelle { min-width: calc(118px + var(--spalten, 2) * 190px); }
  body.oeffentlich .vergleichstabelle thead th:first-child, body.oeffentlich .vergleichstabelle tbody th { width: 118px; }
  body.oeffentlich .vergleichstabelle th, body.oeffentlich .vergleichstabelle td { padding: 10px; font-size: 13.5px; }
  body.oeffentlich .vergleichstabelle tbody th svg { display: none; }
}