/* WECKTECH „Mein Fahrzeug“ in der Karte „Passt für dein Fahrzeug“ (js/mein-fahrzeug.js, 2026-10-10) – Schublade, Boxen,
   Kiste, Gitter, Tisch. Kopfzeile „Dein Fahrzeug: … · Ändern · Vergessen“, Reiter „Aus der Liste“ / „Eigenes Fahrzeug“,
   Formular, Hinweise; dazu die Fahrzeug-Auswahl der Boxen (wie Kiste/Gitter/Tisch). Farben aus css/werkstatt-stil.css
   (wird danach als letztes Stylesheet geladen). */

.mf-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 4px 0 12px; padding: 9px 12px;
  border-radius: 12px; background: var(--petrol-l, #e3efee); color: var(--ink, #26221d); font-size: 13.5px; line-height: 1.45; }
.mf-kopf[hidden] { display: none; }
.mf-kopf b { font-weight: 700; }
.mf-kopf .mf-ort { color: var(--ink-2, #4a433a); }
.mf-aktionen { margin-left: auto; white-space: nowrap; color: var(--muted, #6f665a); }
.mf-link { border: 0; background: none; padding: 2px 0; margin: 0; font: 600 13px/1.35 var(--font-body, inherit); color: var(--petrol-d, #00616c);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.mf-link:hover { color: var(--petrol, #007a87); }

.mf-reiter { display: flex; gap: 3px; width: fit-content; max-width: 100%; margin: 0 0 12px; padding: 3px; border: 1px solid var(--line-2, #d4c6b2);
  border-radius: 999px; background: var(--bg-3, #efe7dc); }
.mf-reiter button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 600 13px/1.1 var(--font-display, inherit); color: var(--ink-2, #4a433a); white-space: nowrap; }
.mf-reiter button[aria-selected="true"] { background: var(--papier, #fff); color: var(--petrol-d, #00616c); box-shadow: 0 1px 3px rgba(60, 40, 15, .16); }
.mf-reiter button:focus-visible { outline: 2px solid var(--petrol, #007a87); outline-offset: 1px; }
.mf-panel[hidden] { display: none; }

.mf-nutzen { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-2, #4a433a); }
.mf-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.mf-feld { display: grid; gap: 4px; min-width: 0; margin: 0; font: 600 13px/1.3 var(--font-body, inherit); color: var(--ink-2, #4a433a); }
.mf-feld[hidden] { display: none; }
.mf-ganz { grid-column: 1 / -1; }
/* nur die Hintergrundfarbe: der Schubladeneinsatz (css/app.css) zeichnet den Pfeil der Auswahl als Hintergrundbild */
.mf-feld input, .mf-feld select { width: 100%; min-width: 0; height: 42px; margin: 0; padding: 0 10px; border: 1px solid var(--line-2, #d4c6b2);
  border-radius: 10px; background-color: var(--papier, #fff); color: var(--ink, #26221d); font: 400 16px/1.2 var(--font-body, inherit); box-sizing: border-box; }
.mf-feld select { padding-right: 30px; }
.mf-feld input:focus-visible, .mf-feld select:focus-visible { outline: 2px solid var(--petrol, #007a87); outline-offset: -1px; }
@media (max-width: 420px) { .mf-felder { grid-template-columns: 1fr; } }
.mf-fein { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted, #6f665a); }
.mf-hinweis { margin: 10px 0 0; padding: 8px 11px; border-radius: 10px; background: var(--bg-2, #f6f1ea); border: 1px solid var(--line, #e2d8c9);
  font-size: 13px; line-height: 1.45; color: var(--ink-2, #4a433a); }
.mf-hinweis[hidden] { display: none; }

/* ---------- Boxen: Karte „Passt für dein Fahrzeug“ (boxen/js/boxen-fahrzeug.js), Auswahl wie Kiste/Gitter/Tisch ---------- */
#fahrzeugKarte .mf-sub { margin: -4px 0 10px; font-size: 13px; color: var(--muted, #6f665a); }
#fahrzeugKarte .vorlage-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#fahrzeugKarte .vorlage-wahl select { width: 100%; min-width: 0; height: 40px; padding: 0 8px; border: 1px solid var(--line-2, #d4c6b2); border-radius: 10px;
  background-color: var(--papier, #fff); color: var(--ink, #26221d); font: 400 15px/1.2 var(--font-body, inherit); }
@media (max-width: 380px) { #fahrzeugKarte .vorlage-wahl { grid-template-columns: 1fr; } }
#fahrzeugKarte .vorlagen { display: grid; gap: 8px; margin-top: 10px; }
#fahrzeugKarte .vorlagen-frage { margin: 0; font-size: 12px; color: var(--muted, #6f665a); }
#fahrzeugKarte .vorlage { display: grid; gap: 2px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--line-2, #d4c6b2); border-radius: 12px;
  background: var(--papier, #fff); color: var(--ink, #26221d); cursor: pointer; font: inherit; }
#fahrzeugKarte .vorlage:hover { border-color: var(--petrol, #007a87); }
#fahrzeugKarte .vorlage[aria-pressed="true"] { border-color: var(--petrol, #007a87); background: var(--petrol-l, #e3efee); box-shadow: inset 0 0 0 1px var(--petrol, #007a87); }
#fahrzeugKarte .vorlage b { font: 700 14px/1.3 var(--font-display, inherit); }
#fahrzeugKarte .vorlage small { font-size: 12px; color: var(--muted, #6f665a); }
#fahrzeugKarte .vorlage.mit-bild { grid-template-columns: 64px minmax(0, 1fr); column-gap: 10px; align-items: center; }
#fahrzeugKarte .vorlage.mit-bild img { grid-row: 1 / span 3; width: 64px; height: 48px; object-fit: cover; border-radius: 8px; background: var(--bg-3, #efe7dc); }
#fahrzeugKarte .marke { justify-self: start; margin-top: 3px; padding: 1px 8px; border-radius: 10px; font: 600 11px/1.5 var(--font-body, inherit);
  background: var(--petrol-l, #e3efee); color: var(--petrol-d, #00616c); }
#fahrzeugKarte .marke.gut { background: #e6f0e1; color: var(--good, #2f7a3a); }
#fahrzeugKarte .fein { margin: 8px 0 0; font-size: 12.5px; color: var(--muted, #6f665a); }
#fahrzeugKarte .vz-link { margin: 10px 0 0; font-size: 13px; }
#fahrzeugKarte .vz-link a { color: var(--petrol-d, #00616c); font-weight: 600; text-decoration: none; }
#fahrzeugKarte .vz-link a:hover { text-decoration: underline; }
#fahrzeugKarte .vorlage-aktiv { margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: var(--petrol-l, #e3efee); color: var(--petrol-d, #00616c);
  font-size: 13px; line-height: 1.45; }
#fahrzeugKarte .vorlage-aktiv[hidden] { display: none; }