/* ═══════════════════════════════════════════════════════════════════════════
   vc-suchkarte.css — SUCHBOX ALLER KATEGORIESEITEN = SUCHBOX DER STARTSEITE

   Betreiber 05.09.2026: „die Kategorien haben auch nicht das gleiche Schwarz
   wie bei der Homepage — mach genau alles gleiche Farbe wie bei Homepage, die
   Box, und für alle zukünftigen Kategorien auch."

   GEMESSEN an index.html (.searchcard / .sc-field / .sc-go / .sc-tab / .sc-hint),
   05.09.2026, hell UND dunkel:
     Karte      dunkel #0F0F12 (= Seitenschwarz), hell #FFFFFF · kein Rand · KEIN Schatten
                (Startseite ist „flach", Block #vchome-flach) · Rundung 18 px
     Feld       dunkel #0F0F12 + Rand #28282E, hell #FFFFFF + Rand #E2E6EE · Rundung 10 px
     Schrift    dunkel #E8EDF5, hell #13233A · Platzhalter dunkel #68788F, hell #9AA6B6
     Symbole    #9AA6B6 (beide) · Hinweis dunkel #A0AABA, hell #6B7A90
     Reiter     dunkel #68788F / aktiv #2E5FB5, hell #6B7A90 / aktiv #1B56CC
     Knopf      dunkel #16315C (hover #1F4480), hell #16457E (hover #0F3463), Rundung 10 px

   GILT FÜR: .vc-scard (immobilien · elektrogeraete · maschinen · software ·
   werkstoffe · verpackungen · kategorie.html = jede selbstgebaute Kategorie, auch
   künftige) und .mde-filterbox (fahrzeuge). Eine neue FESTE Kategorieseite bindet
   diese Datei als letzten Style-Layer ein — dann stimmt ihre Suchbox automatisch.

   WARUM `html:not(#vsk) …` + !important: vc-suchkarte.js hängt zur Laufzeit ein
   <style> mit `[data-theme="dark"] .vc-scard{box-shadow:…!important}` ans Ende
   des <head>, fahrzeuge.html hat (0,4,1)-Regeln mit !important; :not(#vsk)
   zählt wie eine ID und gewinnt sicher — ohne echte ID im Dokument. NUR Farben/Rand/Schatten — kein Maß, kein Feld,
   keine Funktion.
   ═══════════════════════════════════════════════════════════════════════════ */
html {
  --vsk-card: #ffffff;
  --vsk-bord: #E2E6EE;
  --vsk-text: #13233A;
  --vsk-ph:   #9AA6B6;
  --vsk-ico:  #9AA6B6;
  --vsk-hint: #6B7A90;
  --vsk-tab:  #6B7A90;
  --vsk-tabon:#1B56CC;
  --vsk-go:   #16457E;
  --vsk-goh:  #0F3463;
  --vsk-hover:#F3F5F9;
}
html[data-theme="dark"] {
  --vsk-card: #0F0F12;
  --vsk-bord: #28282E;
  --vsk-text: #E8EDF5;
  --vsk-ph:   #68788F;
  --vsk-ico:  #9AA6B6;
  --vsk-hint: #A0AABA;
  --vsk-tab:  #68788F;
  --vsk-tabon:#2E5FB5;
  --vsk-go:   #16315C;
  --vsk-goh:  #1F4480;
  --vsk-hover:rgba(255,255,255,.05);
}

/* ── 1. Die sechs festen Seiten + kategorie.html (.vc-scard) ─────────────── */
html:not(#vsk) .vc-scard {
  background: var(--vsk-card) !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 18px !important;
  color: var(--vsk-text) !important;
}
html:not(#vsk) .vc-scard-field {
  background: var(--vsk-card) !important;
  border: 1px solid var(--vsk-bord) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: var(--vsk-text) !important;
}
html .vc-scard-field:focus-within { border-color: var(--vsk-tabon) !important; box-shadow: 0 0 0 3px rgba(27,86,204,.12) !important; }
html .vc-scard-field input,
html .vc-scard-field select { background: transparent !important; color: var(--vsk-text) !important; }
html .vc-scard-field input::placeholder { color: var(--vsk-ph) !important; opacity: 1; }
html .vc-scard-field > svg { color: var(--vsk-ico) !important; }
html:not(#vsk) .vc-scard-go {
  background: var(--vsk-go) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
html .vc-scard-go:hover { background: var(--vsk-goh) !important; }
/* Filterzeile = Reiter der Startseite: durchsichtig, grauer Text, aktiv Blau */
html .vc-scard-filters,
html .vc-scard-filters .hf-field,
html .vc-scard-filters .hf-col { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
html .vc-scard-filters .hf-col select,
html .vc-scard-filters .hf-col input { background: transparent !important; color: var(--vsk-tab) !important; }
html .vc-scard-filters .hf-col select:focus { color: var(--vsk-tabon) !important; }
html .vc-scard-filters .hf-col input::placeholder { color: var(--vsk-ph) !important; opacity: 1; }
html .vc-scard-filters .hf-field svg,
html .vc-scard-filters .hf-col svg { color: var(--vsk-ico) !important; }
html .vc-scard .hf-more { background: transparent !important; border-color: transparent !important; color: var(--vsk-text) !important; }
html .vc-scard .hf-more > svg { color: var(--vsk-ico) !important; }
html .vc-scard-hint { color: var(--vsk-hint) !important; }
html .vc-scard .vc-foot-link { color: var(--vsk-text) !important; background: transparent !important; }
html .vc-scard .vc-foot-link:hover { color: var(--vsk-tabon) !important; }
/* Vollbild-Suchleiste (vc-aisearch) auf denselben Seiten, falls sichtbar */
html .vc-scard .vcai-input, html .vc-scard .vcai-wrap { background: transparent !important; color: var(--vsk-text) !important; }

/* ── 2. Fahrzeuge (.mde-filterbox — mobile.de-Aufbau, Startseiten-Farben) ── */
html:not(#vsk) .mde-filterbox,
html:not(#vsk) .mde-searchbox {
  background: var(--vsk-card) !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 18px !important;
  color: var(--vsk-text) !important;
}
html .mde-search-title { color: var(--vsk-text) !important; }
/* Felder „Was suchen Sie?" / „Ort oder PLZ" */
html:not(#vsk) .mde-scf {
  background: var(--vsk-card) !important;
  border: 1px solid var(--vsk-bord) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: var(--vsk-text) !important;
}
html .mde-scf:focus-within { border-color: var(--vsk-tabon) !important; box-shadow: 0 0 0 3px rgba(27,86,204,.12) !important; }
html .mde-scf input, html .mde-scf select { background: transparent !important; color: var(--vsk-text) !important; }
html .mde-scf input::placeholder { color: var(--vsk-ph) !important; opacity: 1; font-style: normal; }
html .mde-scf svg, html .mde-scf .mde-scf-chev { color: var(--vsk-ico) !important; }
/* „73 Angebote"-Knopf */
html .mde-filterbox .mde-go,
html .mde-filterbox .mde-count,
html .mde-search-row .mde-go-find {
  background: var(--vsk-go) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
html .mde-filterbox .mde-go:hover, html .mde-filterbox .mde-count:hover { background: var(--vsk-goh) !important; }
/* Obere Zeile Marke · Modell · Erstzulassung · Kilometer · Kaufen|Leasen · Preis = Reiter */
html .mde-grid { border-bottom-color: var(--vsk-bord) !important; }
/* Spezifität: fahrzeuge.html setzt `html:not([data-theme="dark"]) .mde-filterbox .mde-f select.ph`
   (0,4,1) mit !important — darum hier html:not(#vsk) (0,1,0,1 durch :not(#…)), sonst blieb im
   Hellmodus das alte Grau rgb(91,107,128) statt #6B7A90. */
html:not(#vsk) .mde-filterbox .mde-f select,
html:not(#vsk) .mde-filterbox .mde-f input,
html:not(#vsk) .mde-filterbox .mde-f select.ph { background: transparent !important; border: 0 !important; color: var(--vsk-tab) !important; font-style: normal !important; }
html:not(#vsk) .mde-filterbox .mde-f input::placeholder { color: var(--vsk-ph) !important; opacity: 1; font-style: normal; }
html .mde-filterbox .mde-f select:focus { color: var(--vsk-tabon) !important; }
html .mde-fsel::after { color: var(--vsk-ico) !important; border-color: var(--vsk-ico) !important; }
html .mde-filterbox .mde-toggle { background: transparent !important; border: 0 !important; }
html .mde-filterbox .mde-toggle button { background: transparent !important; color: var(--vsk-tab) !important; box-shadow: none !important; }
html .mde-filterbox .mde-toggle button:first-child { border-right-color: var(--vsk-bord) !important; }
html .mde-filterbox .mde-toggle button.on { color: var(--vsk-tabon) !important; }
/* Linke Symbolleiste */
html .mde-rail { border-right-color: var(--vsk-bord) !important; background: transparent !important; }
html .mde-rail .mde-rail-btn { background: transparent !important; color: var(--vsk-tab) !important; border-bottom-color: var(--vsk-bord) !important; }
html .mde-rail .mde-rail-btn:hover,
html .mde-rail .mde-rail-btn.on,
html .mde-rail .mde-rail-more { color: var(--vsk-tabon) !important; background: transparent !important; }
/* Fußzeile: Nur Elektroautos · Zurücksetzen · Weitere Filter */
html .mde-foot { border-top-color: var(--vsk-bord) !important; background: transparent !important; }
html .mde-foot-link { color: var(--vsk-text) !important; background: transparent !important; }
html .mde-foot-link:hover { color: var(--vsk-tabon) !important; }
html .mde-elektro { color: var(--vsk-text) !important; }
html .mde-plug { background: var(--vsk-go) !important; color: #fff !important; }
/* Aufgeklappte Fahrzeugtyp-Kacheln („…") */
html .mde-cats { background: transparent !important; }
html .mde-cat { background: transparent !important; border-color: var(--vsk-bord) !important; color: var(--vsk-text) !important; }
html .mde-cat svg { color: var(--vsk-ico) !important; }
html .mde-cat:hover { background: var(--vsk-hover) !important; }
html .mde-cat.on { background: var(--vsk-hover) !important; color: var(--vsk-tabon) !important; }
html .mde-cat.on svg { color: var(--vsk-tabon) !important; }
