/* tokens.css — Oberland Automobile, dunkle Fassung.
   Umbau 29.09.2026: dunkles Grundthema, Radius 0, Archivo als Display-Schrift.
   Orientierung an autohaus-galstyan.de, autowelt-bodensee.de und geigercars.de —
   alle drei arbeiten mit dunkler Grundflaeche, Haarlinien statt Schatten und
   einer eigenen Display-Schrift ueber der Brotschrift.

   Die Primaerfarbe #0066CC bleibt unveraendert (Vorgabe). Sie stammt aus dem
   Autegro-Widget, damit Bestand und Seite dieselbe Farbe tragen.

   Die Namen der Farbtokens sind bewusst geblieben, nur ihre Bedeutung ist
   gekippt: --color-surface ist jetzt die dunkle Grundflaeche, --color-band das
   abgesetzte Band, --color-border die Haarlinie. So bleibt main.css lesbar,
   ohne dass jede Regel einen neuen Variablennamen bekommt. */
:root {
  /* Marke -------------------------------------------------------------- */
  --color-accent:        #0066CC;  /* unveraendert — Flaechen, gefuellte Knoepfe */
  /* Auf dunklem Grund muss der Hover HELLER werden, nicht dunkler: das alte
     #0057AD wuerde auf #0B0B0D nach hinten fallen statt zu reagieren. */
  --color-accent-hover:  #2E86E0;
  --color-accent-on-dark:#4DA3F0;  /* Text und Links: #0066CC kommt auf Dunkel nur auf 2,9:1 */
  --color-on-accent:     #FFFFFF;  /* Weiss auf #0066CC = 5,1:1 */

  /* Flaechen ----------------------------------------------------------- */
  --color-surface:       #0B0B0D;  /* Grundflaeche der Seite */
  --color-band:          #141417;  /* abgesetztes Band, Kartenflaeche */
  --color-band-hover:    #1B1C21;  /* Karte unter dem Zeiger */
  --color-ink:           #08080A;  /* tiefste Flaeche: Footer, Menue-Schublade */
  --color-border:        #2A2C31;  /* Haarlinie — ersetzt die frueheren Schatten */
  /* Bedienelemente brauchen 3:1 gegen die Flaeche, auf der sie liegen
     (WCAG 1.4.11) — nachgerechnet, nicht geschaetzt:
       #3C3F46 auf #0B0B0D = 1,87:1  (durchgefallen)
       #5E6168 auf #0B0B0D = 3,17:1, aber auf #141417 nur 2,96:1 — und seit das
               Kontaktformular im Hero auf einer Karte steht, ist #141417 der
               massgebliche Untergrund.
       #63666D auf #141417 = 3,23:1 und auf #0B0B0D = 3,42:1 — traegt beides. */
  --color-border-strong: #63666D;

  /* Schrift auf Dunkel -------------------------------------------------- */
  --color-heading:       #F5F5F7;
  --color-text:          #C7C9CE;
  --color-muted:         #8E9296;  /* Labels, Meta, Brotkrumen */

  /* Heller Kontrapunkt: nur noch fuer Flaechen, die zwingend hell bleiben
     (Kartenvorschau im Footer-Badge). Keine ganzen Sektionen mehr. */
  --color-light-surface: #FFFFFF;

  /* Einwilligungsbanner (consent.js liest diese Namen, Rueckfallwerte dort) */
  --c-bg:      var(--color-band);
  --c-ink:     var(--color-heading);
  --c-text:    var(--color-text);
  --c-muted:   var(--color-muted);
  --c-primary: var(--color-accent-on-dark);
  --c-line:    var(--color-border);
  --c-track:   #4A4E55;               /* Schalter "aus" — auf Dunkel gedaempft */
  /* "Alle akzeptieren" traegt die Primaerflaeche der Seite (.btn-accent):
     Weiss auf #0066CC = 5,6:1. --c-primary (#4DA3F0) kaeme mit Weiss nur auf 2,7:1.
     "Ablehnen" ist ein schlichter Textbutton in --c-ink. */
  --c-btn1-bg:  var(--color-accent);
  --c-btn1-ink: var(--color-on-accent);
  --radius-lg: 0;                     /* das Banner setzt eigene 14px als Rueckfall */
  --shadow-lg: none;

  /* Typografie ---------------------------------------------------------- */
  /* Archivo fuer Ueberschriften (kantiger Grotesk, traegt den Premium-Eindruck),
     Poppins bleibt die Brotschrift. Beide selbst gehostet unter /assets/fonts. */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-sans:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* Fliessende Skala statt fester Stufen: die Referenzen leben davon, dass die
     Ueberschriften am Desktop deutlich groesser stehen, ohne dass es mobil kippt.
     Der frueher noetige 768px-Block mit eigenen Schriftgraden faellt damit weg. */
  --fs-display:   clamp(2.75rem, 6vw, 4.5rem);
  --fs-h1:        clamp(2.25rem, 4.4vw, 3.5rem);
  --fs-h2:        clamp(1.75rem, 3.2vw, 2.625rem);
  --fs-h3:        clamp(1.25rem, 1.7vw, 1.5rem);
  --fs-h4:        1.1875rem;
  --fs-lead:      clamp(1.0625rem, 1.3vw, 1.1875rem);
  --fs-body:      1rem;
  --fs-small:     0.9375rem;
  --fs-eyebrow:   13px;  /* bleibt px: main.css rechnet damit einen Abstand aus */

  --lh-display: 1.08; --lh-heading: 1.18; --lh-body: 1.65;
  --ls-display: -0.02em;  /* enger Satz gehoert zum Auftritt der Referenzen */
  --ls-eyebrow: 0.6px;
  --ls-kicker:  0.18em;   /* Versalien-Vorspann */

  /* Form ---------------------------------------------------------------- */
  /* Radius exakt 0 ueberall (Vorgabe). Die Namen bleiben, damit keine Regel
     angefasst werden muss — auch --radius-pill, sonst blieben Social-Knoepfe
     und Slider-Pfeile als einzige Rundungen stehen. */
  --radius:       0;
  --radius-card:  0;
  --radius-pill:  0;
  /* Auf Dunkel traegt ein Schatten nicht: die Abgrenzung machen Haarlinien.
     Die Namen bleiben bestehen, damit bestehende Regeln gueltig sind. */
  --shadow-card: none;
  --shadow-soft: none;

  /* Layout -------------------------------------------------------------- */
  --container:        1200px;
  --container-prose:   800px;
  --gutter:             20px;
  --section-y:         clamp(4.5rem, 9vw, 7rem);
  --section-y-lg:      clamp(6rem, 12vw, 9.5rem);

  /* Knoepfe -------------------------------------------------------------- */
  --btn-padding: 19px 34px;
  --btn-fs: 13px; --btn-fw: 600; --btn-transform: uppercase;

  color-scheme: dark;
}