/* Werkstattlotse · Termin buchen – für das Handy zuerst gebaut */
.buchen{max-width:760px;margin:0 auto;padding-inline:16px;padding-block:18px 110px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}

/* Schrift auf Statusfarben: hell weiß, dunkel fast schwarz (die Statusfarben werden im Dunkelmodus hell – AA bleibt erfüllt) */
:root{--on-status:#FFFFFF;--stern-aus:#737E86;--titel:var(--accent-2)}
:root[data-theme="dark"]{--on-status:#0D1012;--stern-aus:#7A858D;--titel:var(--accent-2)}
/* Kontrastreich (Feedback 09.10.2026, A12; Vorgabe der Kunden-App, darstellung.js): dunkle Kästen, helle Schalter, grüne Überschriften.
   Baut auf den Dunkelwerten aus basis.css auf (Schrift, Statusfarben – dort auf AA geprüft); hier nur Flächen, Linien, Aktion und Titel.
   Kontraste: --ink auf --surface 13:1, --muted 4,8:1, --accent als Schrift auf --surface 8,6:1, --on-accent auf --accent 11:1, --titel auf --bg 8,2:1 */
:root[data-palette="kontrast"]{--bg:#0A2024;--surface:#113840;--surface-2:#174750;--line:#24555D;--line-strong:#3D7480;
  --accent:#9EE6C0;--accent-2:#C6F3DB;--accent-wash:#18463F;--on-accent:#06282C;--titel:#6BD79C;--schatten:0 1px 2px rgba(0,0,0,.45),0 18px 36px -24px rgba(0,0,0,.85)}
/* A13: Nichts schiebt die Seite seitlich – „clip“ statt „hidden“, damit keine Scrollfläche entsteht und „sticky“ weiter greift */
html,body{overflow-x:clip}
/* Überschriften in der Titelfarbe (A12); Knöpfe zum nächsten Schritt hell, Nebenwege mit hellem Rand (A11) */
:root[data-palette="kontrast"] main h1,:root[data-palette="kontrast"] main h2{color:var(--titel)}

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

/* ---------- Schritte: schmaler Fortschrittsbalken statt Chips in zwei Zeilen ---------- */
.fortschritt{display:grid;gap:6px}
.schritt-text{font-size:.85rem;color:var(--muted)}
.schritt-text b{color:var(--ink);font-weight:700}
.balken{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.balken span{display:block;height:100%;border-radius:3px;background:var(--accent);transition:width .3s ease}
.werkstattzeile{color:var(--ink-2);font-weight:600}
.werkstatt-name{font-size:.9rem;font-weight:650;color:var(--ink-2);margin-bottom:-8px}

/* ---------- Leistungen ---------- */
.leistung{width:100%;display:grid;gap:4px;text-align:left;padding:14px 16px;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;cursor:pointer;color:var(--ink);text-decoration:none}
.leistung:hover{border-color:var(--accent)}
.leistung[disabled]{cursor:not-allowed;opacity:.6}
/* Telefonisch buchbar: keine Schaltfläche, sondern eine Karte mit Erklärung und lesbarer Nummer (21.09.2026) */
.leistung.telefonisch{cursor:default}
.leistung.telefonisch:hover{border-color:var(--line)}
.l-warum{font-size:.92rem;color:var(--ink-2);line-height:1.45}
.anrufblock{display:grid;gap:8px;margin-top:6px;padding:12px;border-radius:10px;background:var(--surface-2)}
.anrufblock > b{font-size:1.15rem;letter-spacing:.02em;user-select:all}
.anrufblock .knoepfe{margin:0}
.l-titel{font-weight:700;font-size:1.05rem}
.l-info,.l-aus{font-size:.86rem;color:var(--muted)}
.nicht-dabei{margin:14px 0 0;font-size:.9rem;color:var(--muted)}
.l-anruf{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--accent)}
.l-anruf svg{width:18px;height:18px;flex:none}
/* K-08: Hinweis zum Antippen am Ende jeder buchbaren Leistungskarte */
.l-weiter{display:inline-flex;align-items:center;gap:4px;justify-self:end;font-weight:700;color:var(--accent)}
.l-weiter svg{width:18px;height:18px;flex:none}
/* Preis: Betrag groß in der Oberflächenschrift, darunter, was er bedeutet */
.l-preis{display:grid;gap:1px;justify-items:start}
.preis-gross{font-size:1.2rem;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.25}
.preis-erkl{font-size:.86rem;color:var(--muted)}

/* ---------- Preise getrennt (Abschnitt 3b): Handy als Liste, Bezeichnung links und Wert rechts; am Rechner als kleine Tabelle ---------- */
.preisliste{display:grid;gap:3px;width:100%;margin:2px 0}
/* Wird es zu eng (schmale Werkstattkarte), rutscht der Wert unter die Bezeichnung, statt sie zu überdecken */
.pz{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;min-width:0}
.pz-bez{flex:1 1 auto;min-width:0;font-size:.86rem;color:var(--muted)}
.pz-wert{flex:0 1 auto;text-align:right;font-weight:650;color:var(--ink);min-width:0}
/* Beträge nie mitten in der Zahl umbrechen – der Text darunter darf umbrechen */
.pz-satz,.pz-wert .preis-gross{font-variant-numeric:tabular-nums;white-space:nowrap}
.preis-art{display:block;font-size:.8rem;font-weight:500;color:var(--muted)}
.pz-klein{font-size:.8rem;font-weight:500;color:var(--muted)}
/* Aktion: alter Betrag bleibt sichtbar, der tatsächlich geltende Endpreis steht im Vordergrund. */
.aktionspreis{display:inline-flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:4px 7px;max-width:100%;vertical-align:middle;font-variant-numeric:tabular-nums}
.preis-alt{font-size:.88rem;font-weight:500;color:var(--muted);white-space:nowrap}
.preis-neu{display:inline-block;padding:3px 8px;border-radius:8px;background:var(--ok-wash);color:var(--ok);font-size:1.08rem;font-weight:800;line-height:1.3;white-space:nowrap}
.aktionsrabatt{color:var(--ok);font-size:.82rem;font-weight:750;white-space:nowrap}
/* S2 (28.09.2026): Der durchgestrichene Betrag heißt „Normalpreis“ – klein davor, damit er nicht als früherer Preis gelesen wird */
.preis-alt-bez{font-size:.72rem;font-weight:600;color:var(--muted);white-space:nowrap}
/* B16: Aktion in der Terminwahl – Hinweis unter dem Preis, Satz unter dem gewählten Tag */
.aktion-hinweis{margin:0;color:var(--ok);font-weight:650}
.aktion-tag{margin:0;padding:6px 10px;border-radius:8px;background:var(--ok-wash);color:var(--ok);font-size:.9rem;font-variant-numeric:tabular-nums}
/* Werkstattkarte: schmal, da stehen Bezeichnung und Wert meist untereinander – dann linksbündig */
.preisliste.kurz .preis-gross{font-size:1.05rem}
.preisliste.kurz .pz-wert{text-align:left}
.preisliste.kurz .aktionspreis{justify-content:flex-start}
/* Am Handy bleiben Bezeichnung und Wert in einer Zeile: sonst wird eine einzige Werkstattkarte so hoch,
   dass keine zweite mehr auf den Bildschirm passt – und Vergleichen wird zum Scrollen (Abnahme Mangel 14) */
@media (max-width:599px){
  .preisliste.kurz{gap:2px}
  .preisliste.kurz .pz{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);column-gap:10px;align-items:baseline}
  .preisliste.kurz .pz-wert{text-align:right}
  .preisliste.kurz .aktionspreis{justify-content:flex-end}
  .preisliste.kurz .preis-art{display:inline;margin-left:4px}
}
@media (min-width:600px){
  .preisliste{grid-template-columns:max-content minmax(0,1fr);column-gap:18px;row-gap:4px;align-items:baseline}
  .pz{display:contents}
  .pz-wert{text-align:left}
}
.leistung-kurz{display:grid;gap:4px}
/* „Wie setzt sich der Preis zusammen?“ hängt an der Karte statt lose darunter */
.mit-zusammensetzung .leistung{border-radius:12px 12px 0 0}
.mit-zusammensetzung .zusammensetzung{margin-top:-1.5px;padding:0 16px 6px;background:var(--surface);border:1.5px solid var(--line);border-top:1px dashed var(--line);border-radius:0 0 12px 12px}

/* ---------- Fahrzeug und Termin ---------- */
.wahl{border:1px solid var(--line);background:var(--surface);padding:12px 16px;margin:0;display:grid;gap:6px;min-width:0;border-radius:12px}
.wahl legend{font-size:.8rem;font-weight:700;color:var(--ink-2);padding:0 4px}
.wahlzeile{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.wahlzeile input{width:20px;height:20px;margin:0;accent-color:var(--accent);flex:none}
/* Antrieb als sichtbare Auswahl in einer Reihe */
.antriebe .chips{gap:6px}
.chip-wahl{position:relative}
.chip-wahl input{position:absolute;opacity:0;width:1px;height:1px}
.chip-wahl span{display:inline-flex;align-items:center;min-height:44px;padding:6px 14px;border:1.5px solid var(--accent);color:var(--accent);border-radius:22px;background:var(--surface);font-weight:650;cursor:pointer}
.chip-wahl input:checked + span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chip-wahl input:focus-visible + span{outline:2px solid var(--signal);outline-offset:2px}
/* Zeitraum: ‹ Datum › in einer Zeile */
.zeitraum{flex-wrap:nowrap;justify-content:space-between;gap:8px}
#zeitraum{flex:1;text-align:center;font-size:.9rem;font-weight:650;color:var(--ink-2)}
.knopf.pfeil{min-width:44px;padding:0 10px;font-size:1.5rem;line-height:1}
/* Tagesleiste: waagrecht wischen, darunter nur die Zeiten des gewählten Tages */
.tage{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:16px;margin:0 -16px;padding:2px 16px 8px;scrollbar-width:thin}
.tagchip{flex:none;scroll-snap-align:start;display:grid;justify-items:center;min-width:62px;min-height:64px;padding:6px 8px;border:1.5px solid var(--accent);border-radius:12px;background:var(--surface);color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums;line-height:1.25}
.tagchip b{font-size:.78rem;font-weight:700;color:var(--muted)}
.tagchip span{font-size:1rem;font-weight:750}
.tagchip small{font-size:.72rem;font-weight:650;color:var(--ok)}
.tagchip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.tagchip[aria-pressed="true"] b,.tagchip[aria-pressed="true"] small{color:var(--on-accent)}
.tagchip[disabled]{opacity:.45;cursor:not-allowed}
.tagchip[disabled] small{color:var(--muted)}
/* Aus der HU-Erinnerung heraus: Tage nach der Frist dezent kennzeichnen, aber nicht sperren */
.tagchip.spaet{border-style:dashed;border-color:var(--warn)}
.tagchip .spaet-marke{font-size:.66rem;font-weight:700;color:var(--warn)}
.tagchip[aria-pressed="true"] .spaet-marke{color:var(--on-accent)}
/* B16: Tage mit Aktionspreis tragen eine Marke „−10 %“ */
.tagchip.aktion{border-color:var(--ok)}
.tagchip .aktion-marke{font-size:.66rem;font-weight:750;color:var(--ok)}
.tagchip[aria-pressed="true"] .aktion-marke{color:var(--on-accent)}
.tag{display:grid;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
.tag h2{color:var(--ink)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.slot{display:grid;justify-items:center;align-content:center;min-width:0;min-height:48px;padding:6px 8px;border:1.5px solid var(--accent);border-radius:10px;background:var(--surface);color:var(--accent-2);cursor:pointer}
.slot .mono{font-family:var(--f-ui);font-variant-numeric:tabular-nums;font-size:1.1rem;font-weight:700}
.slot small{font-size:.72rem;color:var(--muted);text-align:center}
.slot small.warten{color:var(--ok);font-weight:650}
/* A3: Punkt für „Warten vor Ort möglich“ an einzelnen Zeiten, erklärt in der Zeile darüber */
.slot{position:relative}
.warten-punkt{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);vertical-align:middle}
.slot .warten-punkt{position:absolute;top:6px;right:6px}
.warten-zeile{margin:0 0 8px}
.dauer-zeile{display:flex;align-items:center;gap:6px;margin:4px 0 0;font-weight:700;color:var(--ink)}
.dauer-zeile svg{width:18px;height:18px;color:var(--accent);flex:none}
.slot:hover{background:var(--accent-wash)}
.slot[disabled]{cursor:progress;opacity:.55}
/* Sofortige Rückmeldung beim Tippen auf einen Termin */
.slot.waehlt{opacity:1;background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.slot.waehlt small{color:var(--on-accent)}
.countdown{padding:10px 14px;background:var(--accent-wash);border-left:4px solid var(--accent);border-radius:0 10px 10px 0;font-size:.92rem}
div.countdown{display:grid;gap:8px}
.countdown p{margin:0}
.countdown .mono{font-family:var(--f-ui);font-variant-numeric:tabular-nums}
.countdown.knapp{background:var(--signal-wash);border-left-color:var(--signal)}
#countdown-hinweis:not(:empty){display:block;font-weight:700;color:var(--signal-ink)}
.formgitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.fz-schluessel{display:grid;gap:10px}
.ohne-schein{font-weight:650}
.fz-anders{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:8px 0;border-top:1px dashed var(--line)}

/* ---------- Prüfen und Bestätigung ---------- */
dl{margin:0;display:grid;gap:8px}
dl > div{display:grid;grid-template-columns:minmax(8.5rem,34%) 1fr;gap:2px 12px}
@media (max-width:480px){dl > div{grid-template-columns:1fr}}
dt{font-size:.8rem;font-weight:700;color:var(--muted)}
dd{margin:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:6px 14px;border:1.5px solid var(--accent);border-radius:22px;background:var(--surface);color:var(--accent);font-family:var(--f-ui);font-variant-numeric:tabular-nums;font-weight:650;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.og-hinweis{padding:8px 12px;background:var(--warn-wash);border-left:3px solid var(--warn);font-size:.88rem}
/* Schema 078: Terminvorschlag der Werkstatt – Zusammenfassung direkt über „Zahlungspflichtig bestellen“ (§ 312j BGB) */
.vorschlag-karte{display:grid;gap:8px;padding:12px 14px;background:var(--accent-wash);border-left:4px solid var(--accent);border-radius:0 8px 8px 0}
.vorschlag-karte h3{margin:0;font-size:1rem}
.vorschlag-karte p{margin:0}
.vorschlag-fakten{display:grid;gap:4px;margin:0}
.vorschlag-fakten div{display:grid;grid-template-columns:minmax(88px,max-content) minmax(0,1fr);gap:8px}
.vorschlag-fakten dt{color:var(--muted,var(--ink));font-size:.88rem}
.vorschlag-fakten dd{margin:0;overflow-wrap:anywhere}
.vorschlag-karte .knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.scopes{display:grid}
.scope{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;padding:9px 0;border-bottom:1px solid var(--line);cursor:pointer}
.scope input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent)}
.scope b{display:block;font-weight:650}
.scope small{display:block;color:var(--muted);font-size:.82rem}
.empfohlen{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;background:var(--ok-wash);color:var(--ok);font-size:.72rem;font-weight:700;vertical-align:middle}
details.text summary,.bedingungen summary{cursor:pointer;font-weight:650;color:var(--accent)}
.bedingungen p{margin-top:4px}
.freigabetext{display:grid;gap:8px;padding-top:8px;font-size:.9rem;color:var(--ink-2)}
.freigabetext h3{font-size:1rem;color:var(--ink)}
.freigabetext blockquote{margin:0;padding:6px 10px;border-left:3px solid var(--warn);background:var(--warn-wash);font-size:.84rem}
.buchen-hinweis{text-align:center;margin-top:-6px}
.erfolg{border-top:5px solid var(--ok);border-radius:0 0 14px 14px}
.lange-nummer{font-family:var(--f-mono);font-size:.78rem;word-break:break-all;color:var(--muted)}

/* ---------- Termine ---------- */
.b-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;align-items:baseline}
.b-wann{margin:0}
.status{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 9px;border-radius:10px;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.s-BESTAETIGT{background:var(--ok-wash);color:var(--ok)}
.s-ANGEFRAGT{background:var(--warn-wash);color:var(--warn)}
.s-ABGELEHNT,.s-STORNIERT_WERKSTATT{background:var(--crit-wash);color:var(--crit)}
.s-ANGENOMMEN,.s-IN_ARBEIT,.s-WARTET_AUF_TEIL,.s-WARTET_AUF_FREIGABE{background:var(--accent-wash);color:var(--accent-2)}
.s-FERTIG{background:var(--ok-wash);color:var(--ok)}
.frage{padding:12px 14px;background:var(--crit-wash);border-left:4px solid var(--crit);display:grid;gap:8px}
.fahrzeugliste{margin:0;padding-left:18px;display:grid;gap:4px}
.freigabe{border-top:1px solid var(--line);padding-top:8px;display:grid;gap:6px}
.freigabe summary{cursor:pointer;font-weight:650;color:var(--accent)}
.zugriffe{margin:0;padding-left:18px;display:grid;gap:3px;font-size:.84rem;color:var(--ink-2)}
.kv{display:grid;gap:10px;padding:12px 14px;background:var(--warn-wash);border-left:4px solid var(--warn)}
.kv-position{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 12px;margin:0;display:grid;gap:4px}
.kv-position legend{font-weight:700;padding:0 4px}
/* K-13: Sicherheitsrelevante Positionen fallen auf – roter Rand, rote Marke, ein Satz zum Warum */
.kv-position.sicherheit{border-color:var(--crit);border-left:4px solid var(--crit)}
.kv-sicher{margin:0;font-size:.9rem;font-weight:600;color:var(--crit)}
.marke-sicher{display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 9px;margin-right:6px;border-radius:10px;background:var(--crit-wash);color:var(--crit)}
.freigabe-aendern{display:grid;gap:2px;border-top:1px dashed var(--line);padding-top:8px}
/* Kontakt zum Termin (25.09.2026): Nachrichten mit der Werkstatt – eigene rechts, die der Werkstatt links */
.na-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.92rem}
.na-liste li{max-width:88%;padding:8px 12px;border-radius:10px;background:var(--surface-2);overflow-wrap:anywhere}
.na-liste li.na-ich{justify-self:end;background:var(--accent-wash)}
.na-kopf{display:block;font-size:.78rem;color:var(--muted);margin-bottom:2px}
.na-neu{display:inline-block;font-size:.75rem;font-weight:800;padding:1px 8px;margin-left:6px;border-radius:10px;background:var(--signal-wash);color:var(--signal-ink)}
.nachricht-hinweis{padding:12px 14px;border-left:4px solid var(--signal);border-radius:var(--r-s);background:var(--signal-wash)}
button.nachricht-hinweis{display:block;width:100%;border-top:0;border-right:0;border-bottom:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
/* Nachrichten kenntlicher (Aufgabe des Gründers vom 02.10.2026): Die Unterhaltung steht offen als eigener Kasten in der Terminkarte */
.na-block{scroll-margin-top:84px;display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:var(--r-s);background:var(--surface)}
.na-block.na-hat-neu{border-left-color:var(--signal)}
.na-titel{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:1rem;font-weight:750}
.na-zahl{display:inline-block;min-width:1.5em;padding:0 7px;border-radius:10px;background:var(--surface-2);color:var(--ink-2);font-size:.78rem;font-weight:700;text-align:center}
.na-frueher{justify-self:start}
.na-liste li{border:1px solid var(--line)}
.na-liste li.na-werkstatt{border-left:4px solid var(--accent)}
.na-liste li.na-ich{border-right:4px solid var(--accent)}
.na-liste li.na-ungelesen{background:var(--signal-wash);border-left-color:var(--signal)}
.na-kopf b{color:var(--ink);font-weight:750}
.na-marke{display:inline-block;margin-left:6px;padding:0 7px;border-radius:10px;background:var(--signal-ink);color:var(--surface);font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.buchung.nachricht-neu{border-left:4px solid var(--accent)}
.na-form{display:grid;gap:4px}
.na-form textarea{width:100%;box-sizing:border-box}
.summe-zeile{padding:8px 12px;border-radius:10px;background:var(--accent-wash);color:var(--ink);font-weight:650;font-size:.92rem}
.stern{color:var(--warn);font-weight:700}
.zurueck{display:inline-block;margin:0 0 8px}
/* „← Zurück“ ist der wichtigste Rückweg: volle Tippfläche */
.link.zurueck{display:inline-flex;align-items:center;justify-self:start;min-height:44px;padding:0 10px;margin:0 0 -8px -10px;text-decoration:none}
.pruef-tage{margin:0;padding-left:18px;display:grid;gap:2px}

/* ---------- App-Aufbau wie im Prototyp: Leiste unten, Fahrzeugkarten ---------- */
.buchen{max-width:560px;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);max-width:560px;margin:0 auto;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabs a{display:grid;justify-items:center;gap:2px;min-height:58px;padding:8px 0 10px;font-size:.72rem;font-weight:650;color:var(--muted);text-decoration:none}
.tabs a svg{width:22px;height:22px}
.tabs a[aria-current="page"]{color:var(--accent)}
/* Kurzmeldung über der unteren Leiste, nicht auf den Reitern */
#meldung{bottom:calc(74px + env(safe-area-inset-bottom))}
.gruss{font-size:1.35rem}
.fz{display:grid;gap:12px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.fz-kopf{display:flex;justify-content:space-between;align-items:start;gap:10px}
.fz-name{font-weight:700;font-size:1.05rem;line-height:1.25}
.fz-meta{font-family:var(--f-mono);font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.kz{flex:none;font-family:var(--f-mono);font-size:.74rem;font-weight:600;border:1.5px solid var(--ink);border-radius:4px;padding:1px 6px;white-space:nowrap}
.faellig{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.faellig li{display:flex;align-items:baseline;gap:8px;font-size:.92rem}
.faellig li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--dot,var(--line-strong));transform:translateY(-1px)}
.faellig li.bald{--dot:var(--warn)} .faellig li.gut{--dot:var(--ok)}
.faellig li .link{display:inline;min-height:0}
.knopfreihe{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.knopfreihe .knopf{border-radius:12px;min-height:48px;white-space:nowrap;font-size:.92rem;padding-inline:8px}
.stamm{margin:0;font-size:.82rem;color:var(--muted)}
.knopf.leise{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;border-color:transparent;color:var(--accent);font-weight:700}
.knopf.leise svg{width:20px;height:20px}
.knopf.zurueck{background:transparent;color:var(--muted);border-color:var(--line-strong)}

/* ---------- Start ohne Anmeldung: gleich suchen, Petrol-Karte in beiden Farbmodi ---------- */
/* Durchsicht 06.10.2026 (Punkt 8): keine dunkle Petrolfläche mehr – helle Karte mit Petrol als Akzent, Schrift dunkel */
/* Feedback 09.10.2026 (A1): Frage als Überschrift, Suchfeld, sechs Kacheln – kein Fließtext. Alles Antippbare trägt die Aktionsfarbe (A11). */
.willkommen{display:grid;gap:14px}
.willkommen h1{font-size:clamp(1.7rem,7vw,2.1rem);line-height:1.1;color:var(--titel)}
.startsuchfeld{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;border:1.5px solid var(--line-strong);border-radius:14px;background:var(--surface);color:var(--muted)}
.startsuchfeld:focus-within{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:1px}
.startsuchfeld svg{width:20px;height:20px;flex:none}
.startsuchfeld input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:1rem;outline:none;min-height:48px;padding:0}
.startsuchfeld input::placeholder{color:var(--muted)}
.st-treffer:empty{display:none}
.st-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.st-zeile{width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;min-height:48px;padding:8px 12px;border:1.5px solid var(--accent);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;font-weight:650;text-align:left;cursor:pointer}
.st-zeile small{grid-column:1;font-weight:500;font-size:.8rem;color:var(--muted)}
.st-zeile svg{grid-column:2;grid-row:1/span 2;width:18px;height:18px;color:var(--accent)}
.kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
/* Ungerade Zahl an Kacheln (etwa fünf bei einer Werkstatt ohne HU): die letzte nimmt die ganze Reihe statt eine Lücke zu lassen */
.kachel:last-child:nth-child(odd){grid-column:1/-1}
.kachel{display:grid;gap:10px;align-content:start;justify-items:start;min-height:104px;padding:14px 12px;border:1.5px solid var(--accent);border-radius:16px;background:var(--surface);color:var(--ink);font:inherit;font-weight:700;font-size:.95rem;line-height:1.25;text-align:left;cursor:pointer;overflow-wrap:anywhere}
.kachel svg{width:28px;height:28px;color:var(--accent)}
.kachel:hover,.st-zeile:hover{background:var(--accent-wash)}
.kachel:active{background:var(--accent);color:var(--on-accent)}
.kachel:active svg{color:var(--on-accent)}
.alle-arbeiten > summary{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;border:1.5px solid var(--accent);border-radius:12px;color:var(--accent);font-weight:700;cursor:pointer;list-style:none}
.alle-arbeiten > summary::-webkit-details-marker{display:none}
.alle-arbeiten > summary::after{content:"›";font-size:1.2rem;transition:transform .15s}
.alle-arbeiten[open] > summary::after{transform:rotate(90deg)}
.alle-arbeiten .startsuche{margin-top:10px}
.startsuche{display:grid;gap:10px}
.startsuche .eingabe > span{color:var(--ink);font-size:.85rem}
.willkommen select{min-height:50px;font-size:1rem;font-weight:600}
.startsuche .knopf{width:100%;gap:8px;background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.startsuche .knopf:hover{background:var(--accent-2);border-color:var(--accent-2)}
.startsuche .knopf svg{width:20px;height:20px}
.start-zeile{text-align:center;font-size:.85rem;color:var(--muted);margin:0}
.konto-hinweis{text-align:center;font-size:.95rem}
.knoepfe.senkrecht{display:grid;gap:8px;justify-content:stretch}
.vorteile{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--ink-2)}

/* ---------- Werkstattsuche: kräftig lesbar, Karte je Werkstatt ---------- */
.werkstattkarte{display:flex;justify-content:space-between;padding:0;align-items:stretch;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;color:var(--ink);text-decoration:none}
.werkstattkarte svg{width:20px;height:20px;color:var(--accent);flex:none}
.werkstattkarte:hover{border-color:var(--accent)}
/* Schlanke Karte (18.10.2026, Vorschlag A): keine Kürzel-Kachel mehr, engere Abstände – auf 430×932 px stehen etwa vier Karten im Bild */
.wk-haupt{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 8px 10px 14px;color:var(--ink);text-decoration:none;min-width:0}
.wk-text{flex:1;display:grid;gap:2px;justify-items:stretch;min-width:0}
.wk-kopf{display:flex;align-items:baseline;gap:8px;min-width:0}
.wk-kopf b{flex:1 1 auto;min-width:0}
.wk-haupt b{font-size:1.02rem;line-height:1.3}
.werkstattkarte .abzeichen{margin-left:0}
.wk-adresse{color:var(--muted);font-size:.8rem;line-height:1.3}
.wk-km{flex:none;margin-left:auto;font-size:.82rem;font-weight:700;color:var(--accent-2);white-space:nowrap}
.wk-karte{flex:none;display:grid;place-items:center;width:48px;min-height:44px;border-left:1px solid var(--line);color:var(--accent);text-decoration:none}
.werkstattkarte .wk-karte svg{width:22px;height:22px}
.wk-satz{font-size:.84rem;font-weight:650;color:var(--ink-2)}
.suche{position:relative}
.suche > span{font-size:.95rem;color:var(--ink)}
/* über die id: die allgemeine Feldregel in basis.css hat sonst die höhere Spezifität und die Lupe liegt über dem Text */
.suche input#w-suche{min-height:54px;padding-left:46px;font-size:1.1rem;font-weight:600;border:2px solid var(--ink-2);border-radius:12px}
.suche input#w-suche:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-wash)}
.suche svg{position:absolute;left:14px;bottom:15px;width:24px;height:24px;color:var(--ink-2);pointer-events:none}
.suchhinweis{font-size:.92rem;font-weight:600;color:var(--ink-2)}
.suchhinweis:empty{display:none}

/* ---------- HSN/TSN-Hilfe, Sterne, Werkstattkopf, Mitteilungen ---------- */
.hilfe{border:1px solid var(--line);border-radius:12px;padding:0 14px;background:var(--bg)}
.hilfe[open]{padding-bottom:10px}
.hilfe summary{cursor:pointer;font-weight:700;color:var(--accent)}
.hilfe ul{margin:8px 0;padding-left:18px;display:grid;gap:4px}
.zb{display:block;width:100%;max-width:360px;margin:10px 0}
.zb-blatt{fill:var(--surface);stroke:var(--line-strong)}
.zb-strich{fill:var(--surface-2)}
.zb-feld{fill:var(--accent-wash);stroke:var(--accent);stroke-width:1.5}
.zb-titel{font:700 11px var(--f-ui);fill:var(--ink)}
.zb-nr{font:700 10px var(--f-mono);fill:var(--accent)}
.zb-wert{font:500 11px var(--f-mono);fill:var(--ink)}
.zb-fett{font-weight:700;fill:var(--accent)}
.zb-name{font:800 10px var(--f-ui);fill:var(--accent);letter-spacing:.06em}
.sterne,.sterne-kurz{color:var(--warn);letter-spacing:1px}
.sterne-kurz{font-weight:700;font-size:.85rem;margin-left:6px;white-space:nowrap}
.abzeichen{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--ok-wash, #E1F0E9);color:var(--ok, #1B7550);font-size:.74rem;font-weight:700;vertical-align:middle}
/* Besonderheiten (Oldtimer, Lkw, Ersatzwagen) stehen ruhiger da als „Meisterbetrieb“ – eine Angabe, kein Gütesiegel */
.abzeichen.zweit{background:var(--surface-2);color:var(--ink-2)}
/* Den Filter „Besonderes Fahrzeug?“ (details.filter) gibt es seit dem 24.09.2026 nicht mehr – die Fahrzeugwelten kommen aus „Ihr Fahrzeug“ */
.werkstattkopf{display:grid;gap:6px}
.werkstattkopf p{margin:0}
.bewertungen summary{cursor:pointer;font-weight:650;color:var(--accent)}
.bewertungsliste{list-style:none;margin:8px 0;padding:0;display:grid;gap:10px}
.bewertungsliste p{margin:4px 0 0}
.antwort{border-left:3px solid var(--accent);padding-left:8px}
.bewerten{display:grid;gap:8px;padding:12px;border-radius:12px;background:var(--accent-wash)}
.bewerten p{margin:0}
/* Sterne 1 bis 5 in sichtbarer Reihenfolge; gefärbt wird bis zur gewählten Zahl */
.sternwahl{display:inline-flex;flex-direction:row;justify-content:flex-start;gap:0}
.sternwahl input{position:absolute;opacity:0;width:1px;height:1px}
.sternwahl label{display:grid;place-items:center;min-width:44px;min-height:44px;font-size:2rem;line-height:1;color:var(--stern-aus);cursor:pointer}
.sternwahl:has(input[value="1"]:checked) label:nth-of-type(-n+1),.sternwahl:has(input[value="2"]:checked) label:nth-of-type(-n+2),
.sternwahl:has(input[value="3"]:checked) label:nth-of-type(-n+3),.sternwahl:has(input[value="4"]:checked) label:nth-of-type(-n+4),
.sternwahl:has(input[value="5"]:checked) label:nth-of-type(-n+5){color:var(--warn)}
.sternwahl:has(label:nth-of-type(1):hover) label:nth-of-type(-n+1),.sternwahl:has(label:nth-of-type(2):hover) label:nth-of-type(-n+2),
.sternwahl:has(label:nth-of-type(3):hover) label:nth-of-type(-n+3),.sternwahl:has(label:nth-of-type(4):hover) label:nth-of-type(-n+4),
.sternwahl:has(label:nth-of-type(5):hover) label:nth-of-type(-n+5){color:var(--warn)}
.sternwahl input:focus-visible + label{outline:2px solid var(--signal);border-radius:6px}
.mitteilungen{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.mitteilungen li{padding:8px 10px;border-radius:10px;background:var(--bg)}
.mitteilungen li.neu{background:var(--accent-wash)}
.tabs a{position:relative}
/* Zähler an den Reitern: kräftigere Signalfarbe, damit die Ziffer in beiden Farbmodi AA erreicht */
.tabs a[data-zahl]:not([data-zahl=""])::after{content:attr(data-zahl);position:absolute;top:5px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--signal-ink);color:var(--on-accent);font-size:.72rem;font-weight:800;line-height:18px;text-align:center}

/* ---------- Fahrzeug: Typ aus HSN/TSN, Bearbeiten und Entfernen ---------- */
.typ{display:grid;gap:3px;padding:10px 14px;border-left:4px solid var(--ok);background:var(--ok-wash);border-radius:8px}
.typ.unbekannt{border-color:var(--warn);background:var(--warn-wash)}
.typ .warnung{font-size:.88rem;font-weight:600;color:var(--warn)}
.typ .knopf{margin-top:4px}
.fz-fuss{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 14px}
.fz-verwalten,.fz-frage{margin:0;display:flex;gap:16px;align-items:center;font-size:.9rem}
.fz-frage{font-weight:600}
.fz-verwalten .link,.fz-frage .link{min-height:44px;min-width:44px;padding:0 6px}
.link.gefahr{color:var(--crit)}

/* ---------- Umkreis, Kartenansicht, Wege zur Werkstatt ---------- */
.knoepfe.links{justify-content:flex-start}
.knoepfe.links .knopf svg{width:20px;height:20px;margin-right:6px}
.wege .knopf{padding:8px 12px;font-size:.92rem}
.wege .knopf svg{width:18px;height:18px}
.karte-zustimmung{display:grid;gap:10px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface)}
.karte-zustimmung p{margin:0;font-size:.92rem}
.karte-box{width:100%;height:340px;border-radius:14px;border:1px solid var(--line);overflow:hidden;background:var(--surface-2)}
.karte-info{color:#14181B;font-size:.9rem;line-height:1.45}
.quelle{margin:0;font-size:.78rem;color:var(--muted)}
.chips[aria-label="Umkreis"]{flex-wrap:nowrap;gap:6px}.chips[aria-label="Umkreis"] .chip{padding-inline:10px;flex:1;white-space:nowrap}
#w-ergebnis{display:grid;gap:12px}

/* ---------- Auftragsstand: Statusleiste, große Hinweise, Freigabe ---------- */
.stand{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;counter-reset:stufe}
.stand li{counter-increment:stufe;display:grid;justify-items:center;gap:4px;text-align:center;font-size:.7rem;font-weight:650;color:var(--muted);position:relative}
.stand li::before{content:counter(stufe);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--line-strong);background:var(--surface);font-size:.75rem;font-weight:800;position:relative;z-index:1}
.stand li:not(:first-child)::after{content:"";position:absolute;top:12px;right:calc(50% + 13px);width:calc(100% - 22px);height:2px;background:var(--line-strong)}
.stand li.erledigt{color:var(--ok)}
.stand li.erledigt::before{content:"✓";background:var(--ok);border-color:var(--ok);color:var(--on-status)}
.stand li.erledigt::after,.stand li.jetzt::after{background:var(--ok)}
.stand li.jetzt{color:var(--ink);font-weight:800}
.stand li.jetzt::before{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 0 0 4px var(--accent-wash)}
.stand li.jetzt.achtung{color:var(--warn)}
.stand li.jetzt.achtung::before{content:"!";background:var(--warn);border-color:var(--warn);color:var(--on-status);box-shadow:0 0 0 4px var(--warn-wash)}
.hinweis-gross{display:grid;gap:4px;padding:14px 16px;border-radius:14px;text-decoration:none;color:var(--ink);border-left:6px solid}
.hinweis-gross b{font-size:1.08rem}
.hinweis-gross.achtung{background:var(--warn-wash);border-color:var(--warn)}
.hinweis-gross.gut{background:var(--ok-wash);border-color:var(--ok)}
.hinweis-gross .los{font-weight:800;color:var(--warn)}
.hinweis-gross.gut .los{color:var(--ok)}
.kv{border:2px solid var(--warn);border-left-width:6px;border-radius:12px}
.kv-titel{font-size:1.1rem;font-weight:800;color:var(--warn);margin:0}
.kv .mono,.kv-rechnung .mono{font-family:var(--f-ui);font-variant-numeric:tabular-nums}
.entscheid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.entscheid label{cursor:pointer}
.entscheid input{position:absolute;opacity:0;width:1px;height:1px}
.entscheid span{display:grid;place-items:center;min-height:46px;border:2px solid var(--line-strong);border-radius:10px;font-weight:800;background:var(--surface)}
.entscheid input:focus-visible + span{outline:2px solid var(--signal);outline-offset:2px}
.entscheid input:checked + .ja{background:var(--ok);border-color:var(--ok);color:var(--on-status)}
.entscheid input:checked + .nein{background:var(--crit);border-color:var(--crit);color:var(--on-status)}
.buchung.markiert{outline:3px solid var(--accent);outline-offset:2px}

/* ---------- Termine in Bereichen: Anstehend, Abgeschlossen, Storniert (Entscheidung 20.09.2026) ----------
   Ein Umschalter über der Liste, je Bereich die Anzahl groß darüber – auf dem Handy mit einem Blick zu erfassen. */
.bereiche{display:flex;gap:4px;margin:0 0 12px;padding:4px;background:var(--surface-2);border-radius:14px}
.bereich{flex:1 1 0;min-width:0;min-height:56px;display:grid;align-content:center;justify-items:center;gap:1px;padding:6px 2px;border:0;border-radius:11px;background:transparent;
  color:var(--ink-2);font-family:var(--f-ui);font-size:.82rem;font-weight:700;line-height:1.15;text-align:center;cursor:pointer}
.bereich .zahl{font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.bereich[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--schatten)}
.bereich[aria-pressed="true"] .zahl{color:var(--accent)}
.bereich:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.bereich-leer{padding:24px 18px;line-height:1.5;border:1.5px dashed var(--line-strong);border-radius:16px;background:var(--surface)}
/* Was heute ansteht, ist sofort zu sehen */
.buchung.heute{border-left:4px solid var(--accent)}
.heute-marke{display:inline-block;padding:1px 9px;border-radius:10px;background:var(--accent);color:var(--on-accent);font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;vertical-align:2px}
/* Die Rechnung gibt es in der Werkstatt – ein ruhiger Satz, kein Kasten */
.re-vor-ort{padding-top:8px;border-top:1px solid var(--line)}
.saetze summary{cursor:pointer;font-weight:650;color:var(--accent)}
.saetze dl{margin-top:6px}
.kv-rechnung{width:100%;border-collapse:collapse;font-size:.86rem}
.kv-rechnung td{padding:2px 0}
.kv-rechnung td.mono{text-align:right;white-space:nowrap}
.kv-rechnung tr.summe td{border-top:1px solid var(--line-strong);font-weight:800}

/* ---------- Auswahl am Anfang, Preiszusammensetzung ---------- */
.wahl-leistung > span{font-size:.95rem;color:var(--ink)}
.wahl-leistung select{min-height:52px;font-size:1.05rem;font-weight:650;border:2px solid var(--ink-2);border-radius:12px}
.wk-preis{font-weight:750;color:var(--ink);font-size:1.02rem;font-variant-numeric:tabular-nums}
.wk-termin{font-size:.84rem;font-weight:650;color:var(--ok)}
.zusammensetzung{padding:0 4px 6px}
.zusammensetzung summary{cursor:pointer;font-weight:650;color:var(--accent);font-size:.9rem}
.kv-rechnung tr.zwischen td{border-top:1px solid var(--line);font-weight:650}

/* Kostenvoranschlag: Rückruf anfordern (E4.3) */
.rueckruf{display:grid;gap:6px;justify-items:start;margin-top:4px;padding-top:12px;border-top:1px dashed var(--line-strong)}
.rueckruf p{margin:0}
.hinweis-box{margin:4px 0 0;padding:10px 12px;border-radius:10px;background:var(--ok-wash);border-left:4px solid var(--ok);font-weight:600}

/* Meine Daten: Konto löschen */
.knopf.warn{background:var(--crit);color:var(--on-status);border-color:var(--crit)}
.knopf.zweit.warn{background:transparent;color:var(--crit);border-color:var(--crit)}
.warnkarte{border-color:var(--crit);border-left:6px solid var(--crit)}
.warnkarte ul{margin:0;padding-left:1.2rem;display:grid;gap:4px}

/* ---------- Tippflächen: Aufklapper mindestens 44 px hoch (der Pfeil von summary bleibt) ---------- */
.buchen details > summary{min-height:44px;padding-block:10px;box-sizing:border-box}
.code-neu .link{min-height:44px}
.code-neu .link[disabled]{color:var(--muted);text-decoration:none;cursor:default}

/* ---------- Kundenkonto (Schema 065): Reiter Anmelden / Neu registrieren, Fehler am Feld, „Passwort anzeigen“ ---------- */
.reiter{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:4px 0 10px;border:1.5px solid var(--accent);border-radius:12px;overflow:hidden;background:var(--surface)}
.reiter-knopf{min-height:48px;padding:8px 12px;border:0;background:transparent;color:var(--accent);font:inherit;font-weight:700;cursor:pointer}
.reiter-knopf + .reiter-knopf{border-left:1.5px solid var(--accent)}
.reiter-knopf[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.reiter-knopf:focus-visible{outline:3px solid var(--accent-wash);outline-offset:-3px}
.feld-fehler{margin:-2px 0 4px;font-size:.88rem;font-weight:650;color:var(--crit)}
.pw-zeigen{margin:-4px 0 4px}
.pw-zeigen .link,.karte .link[data-act="anmeldeArt"]{min-height:44px}
.knoepfe.fremd{margin-bottom:4px}
.passwort-form{display:grid;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.passwort-form h3{margin:0;font-size:1rem}

/* ---------- Hauptknöpfe auf dem Handy in voller Breite, die Hauptaktion unten am Daumen ---------- */
@media (max-width:520px){
  .buchen .knoepfe.haupt{flex-direction:column;align-items:stretch}
  .buchen .knoepfe.haupt > *{width:100%}
}

/* ---------- Sichere Ränder (Notch, Home-Leiste, Querformat; Store-App und installierte Web-App) – im Browser meist 0 ---------- */
.leiste{padding-top:calc(10px + env(safe-area-inset-top));padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right))}
.buchen{padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right))}
.tabs{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}

/* ---------- Knöpfe mit Symbol ---------- */
.buchen .knopf > svg{width:20px;height:20px;margin-right:6px;flex:none}
.buchen .knopf.leise > svg,.buchen .startsuche .knopf > svg{margin-right:0}

/* ---------- „Wo?“ mit Ortsvorschlägen (Combobox) ---------- */
.ortfeld{position:relative;display:grid;min-width:0}
.ortliste{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;margin:0;padding:4px;list-style:none;background:var(--surface);color:var(--ink);border:1.5px solid var(--line-strong);border-radius:12px;box-shadow:var(--schatten);max-height:min(46vh,320px);overflow-y:auto}
.ortwahl{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border-radius:8px;cursor:pointer}
.ortwahl svg{width:18px;height:18px;flex:none;color:var(--muted)}
.ortwahl b.mono{font-family:var(--f-ui);font-weight:750}
.ortwahl:hover,.ortwahl[aria-selected="true"]{background:var(--accent-wash)}
.ortwahl[aria-selected="true"]{box-shadow:inset 0 0 0 2px var(--accent)}
.unterzeile{margin-top:-8px;color:var(--ink-2)}
.feldhinweis{font-size:.82rem;font-weight:500;color:var(--muted)}

/* ---------- Liste oder Karte ---------- */
/* Schlanke Karte (18.10.2026): zwei Symbolknöpfe je 44×44 px rechts in der Kopfzeile über der Liste */
.umschalter{flex:none;display:inline-grid;grid-template-columns:44px 44px;border:1.5px solid var(--accent);border-radius:12px;overflow:hidden;background:var(--surface)}
.umschalter button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;border:0;background:transparent;color:var(--accent);font-weight:700;cursor:pointer}
.umschalter button + button{border-left:1.5px solid var(--accent)}
.umschalter button svg{width:20px;height:20px;flex:none}
.umschalter button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.umschalter button:focus-visible{outline:3px solid var(--signal);outline-offset:-3px}

/* ---------- Deutschlandkarte: Punktkarte der Postleitzahlen, darüber Suchort, Umkreis und Werkstätten ---------- */
.dkarte{position:relative;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.dk-svg{display:block;width:100%;height:auto;touch-action:none}
/* Grundkarte dezent im Hintergrund – die Werkstätten sollen sich davon deutlich abheben (wie auf der Startseite) */
.dk-grund{color:var(--ink-2);opacity:.45;pointer-events:none}
/* Ersatz, solange oder falls die Grundkarte nicht geladen ist: Rahmen statt Punkte auf Weiß */
.dkarte.ohne-grund .dk-svg{background:var(--surface-2)}
.dk-ersatz{fill:none;stroke:var(--line-strong);stroke-width:2px;stroke-dasharray:8 6;vector-effect:non-scaling-stroke}
.dk-ersatz-text{fill:var(--muted);font-family:var(--f-ui);font-weight:650}
.dk-stadt{fill:var(--ink-2);font-family:var(--f-ui);font-weight:650;paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
.dk-stadt-punkt{fill:var(--ink-2);opacity:.75;pointer-events:none}
.dk-kreis{fill:var(--accent);fill-opacity:.07;stroke:var(--accent);stroke-width:1.5px;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}
.dk-ort{fill:var(--surface);stroke:var(--ink);stroke-width:3px;vector-effect:non-scaling-stroke}
.dk-ortname{fill:var(--ink);font-family:var(--f-ui);font-weight:750;paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dk-punkt{cursor:pointer;outline:none}
.dk-tipp{fill:transparent}
/* Werkstattmarke im Signalton wie auf der Startseite – nie in der Farbe der Grundkarte */
.dk-marke{fill:var(--signal-ink);stroke:var(--surface);stroke-width:2.5px;vector-effect:non-scaling-stroke}
.dk-punkt:hover .dk-marke{fill:var(--signal)}
.dk-punkt.aktiv .dk-marke{fill:var(--accent)}
.dk-punkt:focus-visible .dk-tipp{fill:none;stroke:var(--accent);stroke-width:3px;vector-effect:non-scaling-stroke}
.dk-zahl{fill:var(--on-status);font-family:var(--f-ui);font-weight:800;pointer-events:none}
.dk-punkt.aktiv .dk-zahl{fill:var(--on-accent)}
.dk-info:empty{display:none}
.dk-tipp-text{display:flex;align-items:center;gap:8px}
.dk-tipp-text svg{width:18px;height:18px;flex:none;color:var(--accent)}

/* ---------- Trefferliste: nie breiter als die Seite; Karte und Anrufen übereinander ---------- */
#w-ergebnis,.buchen .liste{grid-template-columns:minmax(0,1fr)}
/* Durchsicht 06.10.2026 (Punkt 4) legte Google Maps am Handy als eigene Zeile unter die Karte. Seit der schlanken Karte (18.10.2026) sind
   Google Maps und Anrufen Symbolknöpfe (je mind. 48×44 px) in einer schmalen Spalte rechts – die eigene Zeile kostete zu viel Höhe */
.wk-wege{flex:none;display:grid;grid-auto-rows:1fr;width:48px;border-left:1px solid var(--line)}
.wk-wege .wk-karte{width:auto;min-height:44px;border-left:0}
.wk-wege .wk-karte + .wk-karte{border-top:1px solid var(--line)}
.wk-karte:hover{background:var(--accent-wash)}
.wk-karte:focus-visible{outline:3px solid var(--signal);outline-offset:-3px}
/* Wunschtag als offener Kalender (06.10.2026, Punkt 2) */
.tagkalender{display:grid;gap:6px;padding:10px;border:1.5px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.kal-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kal-kopf .pfeil{min-height:36px;min-width:36px;padding:0}
.kal-monat{font-size:.95rem}
.kal-raster{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.kal-wt{text-align:center;font-size:.72rem;font-weight:700;color:var(--muted);padding-bottom:2px}
.kal-tag{display:grid;place-items:center;min-height:40px;border:1.5px solid transparent;border-radius:10px;background:var(--surface-2);color:var(--ink);font:inherit;font-weight:650;cursor:pointer;padding:0}
.kal-tag:hover{border-color:var(--accent)}
.kal-tag.heute{border-color:var(--line-strong)}
.kal-tag.spaet{border-style:dashed;border-color:var(--warn);color:var(--warn)}
.kal-tag[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.kal-tag.aus{background:transparent;color:var(--line-strong);cursor:default}
.kal-leer{min-height:40px}
.kalender-tag > span{font-size:.85rem;color:var(--muted)}
.wk-kopf b{overflow-wrap:anywhere}

/* ---------- Nichts im Umkreis: freundlich, mit nächstem Schritt ---------- */
.leer-box{display:grid;gap:10px;padding:16px;border:1.5px dashed var(--line-strong);border-radius:16px;background:var(--surface)}
.leer-box p{margin:0}

/* ---------- HU/AU ohne Online-Prüfdienst ---------- */
.l-anruf.aus{color:var(--muted);font-weight:650}

/* ---------- Rechnungen unter „Termine“ ---------- */
.rechnungen{display:grid;gap:8px;padding-top:10px;border-top:1px solid var(--line)}
.rechnungen h3{font-size:.95rem}
.re-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.re{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.re-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.re-name{display:grid;gap:1px;min-width:0}
.re-name .mono{font-family:var(--f-ui);font-variant-numeric:tabular-nums}
.re-stand{flex:none;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 9px;border-radius:10px;background:var(--surface-2);color:var(--ink-2)}
.re-OFFEN{background:var(--warn-wash);color:var(--warn)}
.re-BEZAHLT{background:var(--ok-wash);color:var(--ok)}
.re-STORNIERT,.re-STORNO{background:var(--crit-wash);color:var(--crit)}
.re-fuss{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.re-betrag{margin:0;display:grid}

/* ---------- Rechnungsanschrift, Konto ---------- */
.formgitter.plz-ort{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.kurzliste{margin:0}
/* Fehlende Pflichtangabe unter „Konto“ – gleiche Farbe wie der Stern am Formular */
.pflicht-fehlt{font-size:.9rem;font-weight:650;color:var(--warn)}

/* ---------- App aus dem Store ---------- */
.knopf.store{gap:2px;padding:6px 16px 6px 12px;text-align:left;line-height:1.15}
.knopf.store span{display:grid}
.knopf.store small{font-size:.7rem;font-weight:600;color:var(--muted)}
.app-zeile{display:grid;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.app-zeile p{margin:0;font-size:.92rem;color:var(--ink-2)}

/* Testversion: der Feedback-Knopf liegt über der unteren Leiste, nicht auf „Konto“ */
body .fb-knopf{bottom:calc(74px + env(safe-area-inset-bottom))}
body .fb-dialog{bottom:calc(130px + env(safe-area-inset-bottom))}

/* ---------- Erinnerungen an HU/AU und Service (E5) ---------- */
/* Vorschlag der Werkstatt: fällt auf der Fahrzeugkarte auf, ändert aber erst nach dem Tipp etwas */
.vorschlag{display:grid;gap:10px;padding:12px 14px;background:var(--accent-wash);border-left:4px solid var(--accent);border-radius:0 12px 12px 0}
.vorschlag p{margin:0;font-size:.92rem;color:var(--ink-2)}
.vorschlag b{color:var(--ink)}
/* Die freiwilligen Angaben stehen zusammengeklappt unter dem Fahrzeugformular */
.erinnern{margin-top:4px}
.erinnern[open]{padding-bottom:14px}
.erinnern > p,.erinnern fieldset p{margin:8px 0}
.erinnern .wahl{margin-top:10px;background:var(--bg)}
.erinnern .eingabe{min-width:0}
.erinnern .formgitter{grid-template-columns:repeat(auto-fit,minmax(122px,1fr))}
@media (max-width:600px){.erinnern .service-felder{grid-template-columns:minmax(0,1fr)}}
/* Kleine Bilder statt langer Erklärungen (21.09.2026): Plakette und Serviceintervall neben dem Text */
.erklaerbild{display:flex;align-items:flex-start;gap:12px;margin:8px 0}
.erklaerbild p{margin:0}
.plakette{width:62px;height:62px;flex:none;color:var(--ink-2)}
/* K-01: Die HU-Plakette größer – die Monatszahlen sollen auf dem Handy lesbar sein */
.plakette.hu{width:96px;height:96px}
/* Der Haken stand vorher direkt am Rahmen darüber und sah aus wie Teil des Feldes */
.erin-aus{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.erin-aus .wahlzeile{align-items:flex-start;min-height:0}
.erin-aus .wahlzeile input[type="checkbox"]{width:20px;min-width:20px;max-width:20px;flex:0 0 20px;margin-top:2px}
.erin-aus span{display:grid;gap:2px;min-width:0;overflow-wrap:anywhere}
.erin-aus small{color:var(--ink-2);font-size:.88rem;line-height:1.4}
.erinnern select,.erinnern input:not([type="checkbox"]):not([type="radio"]){min-width:0;max-width:100%;width:100%}

/* ---------- Fotos der Werkstatt (E4.4): „Zustand bei der Annahme“, nur zum Ansehen ---------- */
.fotos-karte{display:grid;gap:8px;margin-top:12px}
.fotos-karte h3{font-size:1rem;font-weight:720}
ul.fotos{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;margin:0;padding:0}
ul.fotos > li{display:grid;gap:2px;font-size:.84rem;line-height:1.35}
.foto-bild{display:block;width:100%;min-height:0;padding:0;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface-2);cursor:zoom-in;overflow:hidden}
.foto-bild img{display:block;width:100%;height:100px;object-fit:cover}
.foto-art{font-weight:700;color:var(--ink-2)}
ul.fotos .klein{overflow-wrap:anywhere}
/* Vollbild über der Seite: dunkler Grund, das Foto in ganzer Größe, ein Knopf zum Schließen */
.foto-voll{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;background:rgba(13,16,18,.85)}
.foto-voll-innen{display:grid;gap:10px;max-width:min(820px,100%);max-height:100%;padding:14px;border-radius:16px;background:var(--surface);overflow:auto}
.foto-voll-innen img{display:block;max-width:100%;max-height:68vh;margin:0 auto;border-radius:12px;object-fit:contain}
.foto-voll-text{display:grid;gap:2px;font-weight:650;color:var(--ink-2)}
.foto-voll-text .klein{font-weight:400}
@media (max-width:420px){
  ul.fotos{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .foto-bild img{height:84px}
}

/* Prüfbericht zur HU/AU (Schema 037): ein eigenes, ruhiges Feld in der Terminkarte */
.pruefbericht{display:grid;gap:8px;margin-top:8px;padding:12px 14px;border-radius:12px;background:var(--ok-wash);border-left:4px solid var(--ok)}
.pruefbericht .pb-titel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.pruefbericht .pb-titel svg{width:20px;height:20px;flex:none}
.pruefbericht .knoepfe{margin:0}

/* Telefonbestätigung (Schema 045): der Code groß zum Abtippen, „bestätigt“ als ruhiges Häkchen neben der Nummer */
.tel-code{display:grid;gap:2px;justify-items:start;margin:10px 0;padding:10px 14px;border-radius:12px;background:var(--surface-2)}
.tel-code b{font-family:var(--f-mono);font-size:1.9rem;font-weight:750;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.tel-ok{display:inline-flex;align-items:center;gap:4px;margin-left:6px;font-size:.9em;font-weight:650;color:var(--ok)}
.tel-ok svg{width:16px;height:16px;flex:none}

/* Feedback zu Werkstattlotse (Schema 051): fünf Stufen mit Worten, große Tippflächen, nichts vorausgewählt; am Handy untereinander */
.rm-karte h2{margin:0}
.rm-skala{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.rm-stufe{position:relative;display:grid;place-items:center;min-height:56px;padding:6px 4px;border:1.5px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink);text-align:center;font-size:.84rem;font-weight:650;line-height:1.2;cursor:pointer;hyphens:auto}
.rm-stufe input{position:absolute;opacity:0;width:1px;height:1px}
.rm-stufe:hover{border-color:var(--accent)}
.rm-stufe:has(input:checked){border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.rm-stufe:has(input:focus-visible){outline:2px solid var(--signal);outline-offset:2px}
@media (max-width:480px){.rm-skala{grid-template-columns:1fr}.rm-stufe{min-height:44px;place-items:center start;padding-inline:14px;text-align:left}}

/* Kundensperre (23.09.2026): Die Leistungen bleiben zum Ansehen da – Preise darf jeder vergleichen –,
   nur der Weg zur Terminwahl ist zu. Die Karte darüber erklärt, warum, und nennt den Weg per Telefon. */
.hinweis-karte{border-color:var(--signal)}
.hinweis-karte h2{margin-top:0}
.liste.nur-ansehen .leistung{cursor:default;opacity:.8}
.liste.nur-ansehen .leistung:hover{border-color:var(--line)}

/* ---------- Wunschtag (Auftrag des Gründers vom 24.09.2026): Was · Wo · Wann ----------
   Vierzehn Tage als Knöpfe in einer eigenen Reihe, die waagerecht wischt – die Seite selbst nie, auch nicht bei 390 px.
   Die Spalten stehen auf minmax(0,1fr): Sonst machte die lange Knopfreihe das Feld und die Startkarte so breit wie
   alle vierzehn Knöpfe zusammen. Eigene Klasse statt „tagchip“: Die Terminwahl zählt ihre Tage über diese Klasse. */
.wunschtag,.willkommen,.startsuche{grid-template-columns:minmax(0,1fr)}
.wunschtag{border:0;background:transparent;padding:0;border-radius:0;gap:8px}
.wunschtag legend{padding:0;margin-bottom:6px;font-size:.95rem;font-weight:700;color:var(--ink)}
.wunschchip{flex:none;scroll-snap-align:start;display:grid;justify-items:center;align-content:center;gap:1px;min-width:64px;min-height:58px;padding:6px 8px;border:1.5px solid var(--accent);border-radius:12px;background:var(--surface);color:var(--ink);cursor:pointer;font-family:var(--f-ui);font-variant-numeric:tabular-nums;line-height:1.25}
.wunschchip b{font-size:.78rem;font-weight:700;color:var(--ink-2)}
.wunschchip span{font-size:1rem;font-weight:750}
.wunschchip:hover{border-color:var(--accent)}
.wunschchip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.wunschchip[aria-pressed="true"] b{color:var(--on-accent)}
/* Aus der HU-Erinnerung heraus: Tage nach der Frist gestrichelt, wie in der Terminwahl – gekennzeichnet, nicht gesperrt */
.wunschchip.spaet{border-style:dashed;border-color:var(--warn)}
.wunschchip .spaet-marke{font-size:.66rem;font-weight:700;color:var(--warn)}
.wunschchip[aria-pressed="true"] .spaet-marke{color:var(--on-accent)}
.kalender-tag{max-width:22rem}
.kalender-tag input[type="date"]{width:100%;min-height:50px;font-size:1.05rem;font-variant-numeric:tabular-nums}
.wunsch-frist{margin:0}
/* Die Suche zeigt jeweils den nächsten nötigen Schritt. Erledigte Schritte bleiben über ihre Überschrift änderbar. */
.suchschritt{min-width:0;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);overflow:visible}
.suchschritt[hidden],#w-ergebnis[hidden],#w-hinweis[hidden]{display:none}
.suchschritt>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:54px;padding:12px 16px;cursor:pointer;font-weight:700}
.suchschritt>summary span{min-width:0}
.suchschritt-stand{font-size:.78rem;color:var(--ink-2);font-weight:600;text-align:right}
.suchschritt[data-fehlt="1"]>summary::before{content:"";display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:var(--crit)}
.pruef-pflicht[data-fehlt="1"]>h2::before,.verlangen[data-fehlt="1"] .wahlzeile span::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:50%;background:var(--crit);vertical-align:middle}
.suchschritt-inhalt{display:grid;gap:12px;padding:0 16px 16px}
.suchschritt-inhalt .wahl-leistung,.suchschritt-inhalt .ortfeld{margin:0}
.freiwillige-daten{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.freiwillige-daten>summary{min-height:44px;cursor:pointer;font-weight:700;color:var(--accent)}
.freiwillige-daten[open]{display:grid;gap:10px}
/* B9/B10 (28.09.2026): neue Fassung der Datenfreigabe – ein Satz, was sich geändert hat, über dem Text */
.hinweis-box.fassung-neu{background:var(--warn-wash);border-left-color:var(--warn);font-weight:500}
.fassung-neu:focus{outline:2px solid var(--signal);outline-offset:2px}
.freigabe-aendern .scope-info{color:var(--muted);font-size:.8rem}
.freigabe-aendern details.text{margin:6px 0}
/* 08.10.2026: Die Regeln für den früheren dunklen Petrol-Kasten (weiße Schrift für Wunschtag, Fahrzeug, Sternchen, Hinweis) sind entfernt –
   seit dem hellen Design (06.10.) waren Sternchen und Feldhinweis unsichtbar (Kontrast 1,0), und Wunschtag/Fahrzeug stehen seit 30.09. nicht mehr hier. */
/* Meldungen und Hinweise auf der Startkarte behalten ihre eigene, lesbare Schrift (der Kasten ist hell bzw. dunkel) */
.willkommen .meldungen,.willkommen .og-hinweis{color:var(--ink)}
/* Ohne Leistung oder Tag: ein Satz statt der Liste */
.such-aufforderung{display:flex;gap:12px;align-items:flex-start;margin:0;padding:14px 16px;border-radius:14px;background:var(--accent-wash);color:var(--ink);font-weight:600}
.such-aufforderung svg{width:24px;height:24px;flex:none;color:var(--accent-2)}
/* Trefferkarte am Wunschtag: bis zu drei Uhrzeiten unter „Am … frei ab …“ */
.wk-zeiten{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:.84rem}
.wk-zeit{padding:1px 8px;border:1px solid var(--ok);border-radius:999px;color:var(--ok);font-weight:700;font-variant-numeric:tabular-nums}
.wk-mehr{color:var(--muted);font-weight:600}
.pruef-grenze,.tel-hinweis{margin:0;color:var(--ink-2)}
.tag-laedt:focus{outline:none}

/* ---------- Ihr Fahrzeug in der Suche (Auftrag des Gründers vom 24.09.2026: „Löse die Problematik anhand der HSN/TSN direkt“) ----------
   Ersetzt die Antrieb-Knöpfe und den Filter „Besonderes Fahrzeug?“. Gestaltet wie das Feld „Wann?“ darüber: ohne eigenen Kasten, die
   Überschrift in derselben Größe. HSN und TSN nebeneinander, Knöpfe brechen um statt zu wischen – bei 390 px nie eine Scrollleiste. */
.suchfahrzeug{border:0;background:transparent;padding:0;border-radius:0;gap:8px;grid-template-columns:minmax(0,1fr)}
.suchfahrzeug > legend{padding:0;margin-bottom:6px;font-size:.95rem;font-weight:700;color:var(--ink)}
.fz-innen,.fz-schein,.fz-mehr{display:grid;gap:8px;min-width:0}
.fz-mehr:empty{display:none}
.suchfahrzeug .formgitter{grid-template-columns:repeat(2,minmax(0,1fr))}
.suchfahrzeug .chips{gap:6px}
.suchfahrzeug .chip-wahl span{padding-inline:12px}
.fz-ohne{justify-self:start;min-height:44px;text-align:left}
.gesucht-fuer{margin:0;font-size:.92rem;overflow-wrap:anywhere}
.gesucht-fuer:empty{display:none}
.fz-art,.fz-oldtimer{gap:8px}
.fz-alt{min-height:44px}
.fz-fest{margin:0;overflow-wrap:anywhere}
.fz-fest .link,.suchfahrzeug .link{min-height:44px}
/* F5: Hochvolt-Fahrzeug bei einem Betrieb ohne „Elektro & Hybrid“ – deutlich, aber kein Riegel */
.hv-hinweis{border-left-width:5px;font-size:.95rem}
.hv-satz{margin:0}
/* Hilfe zum Fahrzeugschein hat einen hellen Kasten – darin dunkle Schrift wie überall */
.willkommen .hilfe{color:var(--ink)}
.willkommen .hilfe p{color:var(--ink-2)}

/* ---------- Rechtsprüfung vom 24.09.2026 (umgesetzt am 25.09.2026) ---------- */
/* H6: fester Fuß außerhalb von #inhalt – Impressum, Datenschutz, Nutzungsbedingungen, Widerruf, Quellen und Lizenzen auf jeder Ansicht.
   Der Abstand für die untere Leiste wandert vom Inhalt in den Fuß, damit er über der Leiste steht und nicht dahinter. */
main.buchen{padding-bottom:12px}
.rechtsfuss{max-width:560px;margin:0 auto;padding:6px 16px calc(96px + env(safe-area-inset-bottom));font-size:.8rem;line-height:1.9;color:var(--muted);text-align:center}
.rechtsfuss a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.rechtsfuss a:hover,.rechtsfuss a:focus-visible{color:var(--accent)}
/* M4: die eine Zeile mit Werkstatt, Leistung, Termin, Preis, Kostenobergrenze und Absageregel unmittelbar über dem Knopf */
.kurzzeile{margin:0;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:.9rem;font-weight:600;color:var(--ink)}
/* M3 und H3: das eigene Häkchen zum sofortigen Beginn */
.verlangen{border-left:4px solid var(--accent)}
.verlangen .wahlzeile span,.kv-sofort span{font-size:.9rem;line-height:1.45}
.kv-sofort{margin-top:8px}
.kv-bestellung{margin:8px 0 0;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-weight:700}
/* H4: Pflichtangaben für den Auftrag – ohne Häkchen, sichtbar abgesetzt von der freiwilligen Freigabe */
.vertragsdaten{padding:10px 12px;border-radius:10px;background:var(--surface-2)}
.vertragsdaten p{margin:0}
.kontakt-zusatz{display:block;margin-top:2px;font-size:.8rem;color:var(--ink-2)}
/* M23: Hinweis zur Echtheit neben den Sternen */
.echt{font-size:.78rem;color:var(--muted)}
.echt-link{color:var(--muted)}
/* H1 und M14: Widerruf und Markierung am Termin */
.widerruf-eingang{margin:6px 0 0;font-weight:600}
.widerruf-knopf{margin-top:6px}
.nicht-erschienen .knoepfe{margin-top:8px}
.werkstatt-email{font-size:.86rem}
/* M18: „Profil melden“ am Werkstattkopf – zurückhaltend, aufklappbar */
.profil-melden{margin-top:8px}
.profil-melden summary{cursor:pointer;font-size:.86rem;color:var(--muted)}
.profil-melden .melde-form{display:grid;gap:10px;margin-top:8px}
.koeder{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;opacity:0}
/* Konto löschen: Wahl zu den Bewertungen (Rechtsprüfung N16, Zusammenführung 25.09.2026) */
.wahlgruppe{border:0;margin:12px 0 4px;padding:0}.wahlgruppe legend{padding:0;margin-bottom:2px}
/* Werbeplatz ist vom Suchergebnis getrennt; ohne freigegebene Anzeige bleibt er unsichtbar. */
.gutachter-werbung{margin:20px 0;padding:18px;border:1.5px solid var(--line-strong);border-radius:var(--r-m);background:var(--surface-2)}
.gutachter-werbung h2{margin:.35em 0}.werbung-label{display:inline-block;padding:3px 9px;border:1px solid currentColor;border-radius:999px;font-size:.78rem;font-weight:800}

/* ---------- Großer Bildschirm (Wunsch des Betreibers, 28.09.2026): nicht mehr nur eine Handyspalte in der Mitte ----------
   Ab 1100 px stehen die Reiter oben unter der Kopfleiste (die Reihenfolge ordnet der Flex-Aufbau des body, der HTML-Aufbau bleibt),
   die Ansichten nutzen bis 1180 px Breite, und Werkstätten stehen zu zweit nebeneinander. Handy und Tablet bleiben unverändert. */
@media (min-width:1100px){
  body{display:flex;flex-direction:column;min-height:100vh}
  body > .leiste{order:0}
  .tabs{order:1;position:sticky;top:0;bottom:auto;width:100%;max-width:none;margin:0;grid-template-columns:repeat(4,max-content);justify-content:center;gap:6px;padding:0 24px;border-top:0;border-bottom:1px solid var(--line)}
  .tabs a{grid-auto-flow:column;align-items:center;gap:8px;min-height:54px;padding:0 20px;font-size:.95rem;border-bottom:3px solid transparent}
  .tabs a[aria-current="page"]{border-bottom-color:var(--accent);background:var(--accent-wash)}
  #inhalt.buchen{order:2;width:100%;max-width:1180px;padding-inline:32px;padding-block:28px 48px}
  .rechtsfuss{order:3;width:100%;max-width:1180px;padding-bottom:28px}
  #meldung{bottom:24px}
  .liste:has(> li.werkstattkarte){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
}

/* ---------- Feedback des Betreibers vom 09.10.2026 ---------- */
/* A2: eigene Angaben als eine Zeile über der Liste, „Ändern“ öffnet die Schritte */
#such-schritte{display:grid;gap:10px}
#such-schritte[data-zu="1"]{display:none}
.such-uebersicht{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;margin-inline:-16px;padding:8px 16px;background:var(--bg);border-bottom:1px solid var(--line)}
.such-zusammen{flex:1;min-width:0;display:flex;gap:6px;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.such-zusammen::-webkit-scrollbar{display:none}
.such-zusammen li{flex:none;padding:4px 10px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--ink);font-size:.85rem;font-weight:650;white-space:nowrap}
.such-aendern{flex:none;gap:6px;min-height:40px;padding:6px 12px}
.such-aendern svg{width:18px;height:18px}
.such-fuss{display:grid;gap:8px}
.such-fuss-titel{margin:0;font-weight:700;color:var(--ink-2)}
.treffer-zahl{margin:0;color:var(--ink-2)}
@media (min-width:1100px){.such-uebersicht{top:54px}}
/* A5/A7: Prüfschritt – Widerrufsrecht als Zeile, eine Zusammenfassung über dem Knopf */
.widerruf-kurz{display:grid;gap:6px;padding:0 4px}
.widerruf-kurz p{margin:0}
.pruef-daten .vertragsdaten{display:grid;gap:4px}
.pruef-daten .vertragsdaten p{margin:0}
#zusammenfassung .vertragspartner dd{display:grid;gap:4px}
.zusatz-satz{margin:8px 0 0}
details.bedingungen > summary{color:var(--accent);font-weight:650;cursor:pointer}
/* A9: Kalender und Verschieben gleich groß, darunter genau ein Weg zum Absagen */
.termin-knoepfe{margin-top:4px}
.termin-knoepfe .knopf{gap:6px}
.termin-knoepfe .knopf svg{width:18px;height:18px;flex:none}
.absage-weg{display:grid;gap:4px;justify-items:stretch;margin-top:8px}
.absage-weg .knopf{width:100%}
.absage-weg p{margin:0;text-align:center}
/* „Konto“ (27.10.2026, Vorlage A: wie das Google-Konto) – Kopf mit Anfangsbuchstabe, Liste mit Symbolen in Gruppen, jede Zeile öffnet eine Unterseite */
.k-kopf{display:grid;justify-items:center;gap:4px;padding:20px 16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;text-align:center}
.k-kreis{width:64px;height:64px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:700}
.k-name{font-size:1.25rem}
.k-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px}
.k-chips .chip{display:inline-flex;align-items:center;text-decoration:none}
.k-gruppe{display:grid;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.k-zeile{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 16px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.k-gruppe>.k-zeile:first-child{border-top:0}
.k-zeile:hover,.k-zeile:focus-visible{background:var(--accent-wash)}
.k-symbol{flex:none;width:36px;height:36px;border-radius:50%;background:var(--accent-wash);color:var(--accent);display:flex;align-items:center;justify-content:center}
.k-symbol svg{width:18px;height:18px}
.k-text{flex:1 1 auto;min-width:0;display:grid;gap:2px}
.k-haupt{font-weight:650}
.k-neben{font-size:.85rem;color:var(--muted)}
.k-pfeil{flex:none;color:var(--muted);font-size:1.4rem;line-height:1}
.k-zahl{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:10px;background:var(--accent);color:var(--on-accent);font-size:.75rem;font-weight:700}
.k-zurueck{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font-weight:650;text-decoration:none}
.k-ab{justify-content:center;margin-top:8px}
.rechtliches .k-gruppe{margin-top:4px}
/* Der Fuß mit Impressum, Datenschutz … steht unter „Konto“ nicht ein zweites Mal (dort ist „Rechtliches“ eine Zeile) */
body[data-ansicht="ich"] #rechtsfuss{display:none}
.konto-gruppen-titel{margin:14px 0 -4px;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--titel)}
.frueh-link{margin:6px 0 0;text-align:center}
/* A4 (09.10.2026): Teile selbst mitbringen – Wahl mit beiden Preisen, Liste und Satz zur Gewähr */
.teile-wahl{display:grid;gap:8px}
.teile-wahl .wahlzeile small{display:block;color:var(--muted)}
.teile-liste{margin:4px 0 0}

/* „Prüfen“: Teile und Ersatzwagen – während die Reservierung neu angelegt wird, blass */
.pruef-wahl[aria-busy="true"]{opacity:.6}
.pruef-wahl .teile-wahl,.pruef-wahl .ersatzwagen{margin:0;border:0;padding:0}
.pruef-wahl .ersatzwagen{margin-top:14px}

/* Feedback des Betreibers vom 10.10.2026 abends: Die Terminseite in einer ruhigen Schriftgröße – „zu viele Unterschiede in der Schriftgröße,
   Unwichtiges ist markiert“. Werkstatt, Leistung, Dauer, Preis und Fahrzeug stehen in einem Kasten ohne Fettdruck; hervorgehoben sind nur
   die Aufgabe (Überschrift), der Tag und die Uhrzeiten. */
.termin-kurz{gap:2px;margin:0;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.termin-kurz p,.termin-kurz .werkstatt-name,.termin-kurz .werkstattzeile,.termin-kurz .fz-fest{margin:0;font-size:.95rem;font-weight:400;color:var(--muted);line-height:1.45}
.termin-kurz .werkstattzeile{color:var(--ink)}
.termin-kurz .l-preis{display:inline}
.termin-kurz .l-preis *,.termin-kurz .preis-gross{display:inline;font-size:inherit;font-weight:inherit;letter-spacing:0;line-height:inherit;color:inherit}
.termin-kurz .aktionsrabatt{margin-left:4px}
.termin-kurz .fz-fest .link{font-size:inherit}
.tag-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:4px 12px;flex-wrap:wrap}
.tag-kopf h2{margin:0}
.tag-kopf .link{font-size:.95rem}

/* Kartenansicht zoomen (Feedback des Betreibers vom 10.10.2026 spätabends): Die Karte zoomt selbst – die Seite bleibt ohne Zoom. Die Karte nimmt
   ihre Gesten selbst (touch-action:none); gescrollt wird die Seite daneben. Knöpfe unten rechts, je mindestens 44 × 44 px. */
.dk-zoom{position:absolute;right:10px;bottom:10px;display:flex;gap:6px;align-items:center}
.dk-zk{min-width:44px;min-height:44px;padding:0 12px;border:1.5px solid var(--accent);border-radius:12px;background:var(--surface);color:var(--accent-2);font:inherit;font-size:1.3rem;font-weight:700;line-height:1;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.dk-zk.dk-ganz{font-size:.85rem}
.dk-zk:hover{background:var(--accent-wash)}
.dk-zk:disabled{opacity:.45;cursor:default;background:var(--surface)}

/* 10.10.2026 spätabends: In der App ist ausgeblendet, was nur im Browser Sinn hat – auch der Fuß mit dem Rechtlichen (steht dort unter „Konto“) */
html.nativ .nur-web{display:none!important}
/* Karte nach einem Klick: das Mausrad zoomt sie – der Rahmen zeigt es */
.dkarte.aktiv{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
/* 10.10.2026 spätabends (Rückmeldung des Betreibers: „kann nicht mehr so weit runterscrollen, nicht abmelden – in jedem Tab“): Der Fuß trug den
   Abstand zur festen Reiterleiste unten. In der App ist er ausgeblendet – dann trägt der Inhalt selbst den Abstand, sonst lag das Seitenende
   (etwa „Abmelden“) unter den Reitern. Ab 1100 px stehen die Reiter oben, dort genügt der Abstand des Fußes im Browser. */
html.nativ main.buchen{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
@media (min-width:1100px){ html.nativ main.buchen{padding-bottom:28px} }
/* Werkstattart (16.10.2026): Infozeichen neben den Filtern – geöffnet stehen die Erklärungen in voller Breite unter den Chips */
.art-info summary{list-style:none;cursor:pointer;min-width:44px;justify-content:center}
.art-info summary::-webkit-details-marker{display:none}
.art-info[open]{flex-basis:100%}
.art-info dl{margin:8px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.art-info dt{margin-top:6px}.art-info dt:first-child{margin-top:0}
.art-info dd{margin:2px 0 0}
/* Hell/Dunkel-Schalter auf der Startseite (18.10.2026) */
.modus-schalter{display:flex;justify-content:flex-end;margin:0 0 4px}
.modus-schalter .chip{min-height:36px;font-size:.9rem}

/* ---------- Schlanke Karte (18.10.2026, Vorschlag A von Yuna, Entscheidung des Betreibers) ---------- */
/* Kopfzeile über der Liste: Trefferzahl links, Knopf „Filter“ und Liste/Karte als Symbole rechts; die Art-Filter im aufklappbaren Feld darunter */
.treffer-kopf{display:flex;align-items:center;gap:8px;min-width:0}
.treffer-kopf .treffer-zahl{order:-1;flex:1 1 auto;min-width:0;font-size:.9rem;line-height:1.3}
.art-knopf{flex:none;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 12px;border:1.5px solid var(--accent);border-radius:12px;background:var(--surface);color:var(--accent);font:inherit;font-weight:700;white-space:nowrap;cursor:pointer}
.art-knopf svg{width:18px;height:18px;flex:none}
.art-knopf[aria-expanded="true"]{background:var(--accent-wash)}
.art-knopf:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.art-feld{padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.art-feld[hidden]{display:none}
/* Werkstattkarte: Preis · Dauer in einer Zeile; die Bezeichnungen „Preis“/„Geschätzte Kosten“ und „Dauer“ nur für Bildschirmleser */
.werkstattkarte .preisliste.kurz{display:flex;flex-wrap:wrap;align-items:baseline;gap:0;margin:0;width:auto}
.werkstattkarte .preisliste.kurz .pz{display:inline-flex;flex-wrap:nowrap;align-items:baseline;justify-content:flex-start;gap:4px;min-width:0}
.werkstattkarte .preisliste.kurz .pz + .pz::before{content:"·";margin:0 6px;color:var(--muted)}
.werkstattkarte .pz-bez{flex:none;font-size:.8rem}
.werkstattkarte .pz-betrag .pz-bez,.werkstattkarte .pz-dauer .pz-bez{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.werkstattkarte .preisliste.kurz .pz-wert{text-align:left;font-weight:600}
.werkstattkarte .preisliste.kurz .preis-art{display:inline;margin-left:3px}
.werkstattkarte .wk-preis{font-size:1rem}
/* Höchstens zwei Abzeichen, der Rest als „+n“ */
.wk-abzeichen{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-width:0}
.wk-abzeichen .abzeichen{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:baseline}
.wk-mehr-abz{cursor:default}