/* =========================================================
   AP-Automobile — Theme „Premium Dunkel" (Variante B)
   Dunkles Petrol/Anthrazit mit Gold- und Türkis-Akzenten.
   Liegt ALS EBENE über style.css: überschreibt die Farbtokens
   und die wenigen fest verdrahteten Hell-Stellen.
   Zum Zurücksetzen: dieses <link> in den HTML-Dateien entfernen.
   ========================================================= */

:root{
  /* Dunkle Flächen */
  --paper:          #0E191E;   /* Seitenhintergrund (dunkel) */
  --paper-2:        #12222A;   /* leicht gehobene Sektionen */
  --paper-3:        #0B1417;   /* Platzhalter hinter Fotos */

  /* Tinte = tiefste Stufe (Header, Footer, dunkle Sektionen) */
  --ink:            #0A1216;
  --ink-2:          #14242A;   /* Karten auf Tinte */
  --ink-3:          #20323A;
  --ink-deep:       #070D10;

  /* Linien auf dunklem Grund */
  --line:           rgba(255,255,255,.09);
  --line-strong:    rgba(255,255,255,.2);
  --line-dark:      rgba(255,255,255,.15);

  /* Text hell */
  --text:           #E7EEEC;
  --text-soft:      #93A6A6;
  --text-invert:    #FFFFFF;
  --text-invert-soft: rgba(255,255,255,.72);

  /* Akzente: Türkis für Links/Icons, Gold für Preise/Haupt-Buttons */
  --accent:         #5FD0C4;   /* Petrol-hell (Türkis) — Links, Icons, USP */
  --accent-hover:   #7fded4;
  --accent-soft:    #5FD0C4;
  --accent-ink:     #08161A;   /* dunkler Text auf Akzentflächen */
  --signal:         #E0A83A;   /* Preistipp-Badge = Gold */
  --gold:           #E0A83A;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 2px 6px rgba(0,0,0,.4), 0 20px 44px -24px rgba(0,0,0,.7);
}

/* ---- Haupt-Buttons: Gold mit dunklem Text (wie Variante B) ---- */
.btn--primary{ background:var(--gold); color:#1a1206; }
.btn--primary:hover{ background:#eab74f; }
.btn--line{ background:var(--ink-2); color:var(--text); border-color:var(--line-strong); }

/* ---- Kopfzeile dunkel ---- */
.header{ background:rgba(10,18,22,.85); border-bottom-color:var(--line); }
.header.is-inner{ background:rgba(10,18,22,.92); }
.header.is-solid{ background:rgba(10,18,22,.96); }
.logo__mark{ color:var(--text); }
.logo__sub{ color:var(--accent); }
.nav a{ color:var(--text); }
.headtool{ color:var(--text); border-color:var(--line-strong); }

/* ---- Hero: dezenter Petrol-Schimmer ---- */
.hero{
  background:
    radial-gradient(120% 90% at 82% -20%, rgba(14,107,107,.35), transparent 60%),
    linear-gradient(180deg, #122228, var(--paper) 70%);
}

/* ---- Fahrzeugkarten & Preise ---- */
.car{ background:var(--ink-2); }
.car:hover{ box-shadow:var(--shadow-md); }
.car__price b{ color:var(--gold); }
.car__usp{ color:var(--accent); }
/* „Details"-Button: heller Text + sichtbarer Rahmen auf dunkler Karte */
.car__cta{ color:var(--text); border-color:var(--line-strong); }
.car__cta:hover{ background:var(--gold); border-color:var(--gold); color:#1a1206; }
/* Merken-Herz sitzt auf weißem Kreis → dunkles Icon, damit sichtbar */
.car__fav, .qv__fav{ color:#16303A; }
.car__fav.is-on, .qv__fav.is-on{ color:#E0403A; }

/* ---- „section--dark" bleibt die tiefste Fläche, klar abgesetzt ---- */
.section--dark{ background:var(--ink-deep); }
.section--dark .card{ background:var(--ink-2); }

/* ---- Formularfelder, Selects, Suchfeld dunkel ---- */
input, select, textarea,
.filterbar select, .filterbar input,
.form input, .form select, .form textarea,
.fin select{
  background:var(--ink-2) !important;
  color:var(--text) !important;
  border-color:var(--line-strong) !important;
}
select option{ color:#111; }   /* OS-Dropdown lesbar */
input::placeholder, textarea::placeholder{ color:rgba(231,238,236,.45); }

/* Pfeil-Icon im Filter-Select hell einfärben */
.filterbar select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235FD0C4' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right .8rem center !important;
  background-size:14px !important;
}

/* ---- Schnellansicht / Vergleich ---- */
.qv__box{ background:var(--ink-2); }
.qv__media{ background:var(--paper-3); }
.fin{ background:var(--ink-3); }
.qv__close{ background:var(--gold); color:#1a1206; }
.qv__close:hover{ background:#eab74f; color:#1a1206; }

/* ---- Zuletzt angesehen ---- */
.recent__card{ background:var(--ink-2); border-color:var(--line); }

/* ---- Bewertungs-Badge auf dunklem Grund ---- */
.source-badge{ background:rgba(255,255,255,.06); border-color:rgba(224,168,58,.5); color:var(--gold); }
.source-badge svg:first-child{ color:var(--gold); }

/* ---- Footer ---- */
.footer{ background:var(--ink-deep); }

/* ---- Hinweis-/Callout-/TODO-Box (Impressum/Datenschutz) dunkel statt hellgelb ---- */
.callout, .notice, .hinweis, .todo{
  background:rgba(224,168,58,.1) !important;
  border-color:rgba(224,168,58,.35) !important;
  color:var(--text) !important;
}
.todo *{ color:var(--text) !important; }

/* ---- Cta-Band: heller Button gegen Gold tauschen ---- */
.cta-band .btn--dark{ background:var(--gold); color:#1a1206; }

/* ---- Direkt-anfragen Dialoge: Box + goldenes Schließen-× ---- */
.fmodal__box{ background:var(--ink-2); }
.fmodal .form input, .fmodal .form select, .fmodal .form textarea{ background:var(--paper) !important; }
.fmodal__x{ background:var(--gold); color:#1a1206; }
.fmodal__x:hover{ background:#eab74f; color:#1a1206; }
.svc-cta{ color:var(--accent); }

/* Nettopreis im dunklen Design */
.car__netto, .qv__netto{ background:rgba(212,175,55,.14); color:var(--gold); }
.cmp-netto{ color:var(--gold); }