/* =====================================================================================
   Vorlage 47 Elektro-Autohaus · Farben, Schrift, Ecken, Abstände
   Brücke zur Web-App: --bg --surface --text --muted --accent --on-accent --border --radius --schrift
   heißen wie in 00_Projektstart/starter-webapp/styles.css.
   Grundton ist der dunkle Schauraum (Graphit). Helle Kapitel (Eisweiß) wechseln sich mit dunklen ab,
   wie eine Präsentation. Kontrastwerte stehen neben den Farben.
   ===================================================================================== */
@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --schrift: "Sora", "Segoe UI", system-ui, sans-serif;

  /* Schauraum, dunkel */
  --graphit: #0f1114;        /* Bühne, Grund */
  --graphit-2: #171a1f;      /* dunkle Kapitel */
  --graphit-3: #22262c;      /* Karten auf Dunkel */
  --linie-dunkel: #2c3138;   /* Haarlinien auf Dunkel */
  --text-hell: #f2f5f8;      /* 17,6 : 1 auf --graphit */
  --leise-hell: #9aa5b1;     /* 7,3 : 1 auf --graphit, 6,6 : 1 auf --graphit-2 */

  /* Eisweiß, helle Kapitel */
  --eisweiss: #eef2f6;
  --weiss: #ffffff;
  --linie-hell: #d6dde5;
  --text: #121519;           /* 17 : 1 auf --eisweiss */
  --muted: #4f5a66;          /* 6,6 : 1 auf --eisweiss */

  /* Elektroblau: Knöpfe, Fokus, Ladestrom */
  --elektro: #2a62f0;        /* Weiß darauf 5,1 : 1 */
  --elektro-tief: #1f4fd1;   /* als Text auf Eisweiß 6 : 1 */
  --elektro-hell: #6b97ff;   /* als Text auf Graphit 5,9 : 1 */
  --elektro-glut: #9cc0ff;

  /* Zweite und dritte Farbe: Sommer-Bernstein und Karmin (Vergleich, Hinweise) */
  --bernstein: #ffb23e;      /* auf Graphit 10 : 1 */
  --eis: #9fd4ff;            /* Winter, auf Graphit 11 : 1 */
  --karmin: #e2475a;         /* Benziner im Vergleich, Rücklicht */
  --ladegruen: #3ddc97;      /* Akku voll */

  /* Brücke zur Web-App */
  --bg: var(--graphit);
  --surface: var(--graphit-3);
  --accent: var(--elektro);
  --on-accent: #ffffff;
  --border: var(--linie-dunkel);
  --error: #ff8a8a;

  --radius: 14px;
  --radius-klein: 10px;
  --radius-gross: 22px;

  --breite: 1240px;
  --kopf: 64px;
  --leiste: 76px;            /* Platz für die Kapitelleiste unten */
  --weich: cubic-bezier(.2, .7, .1, 1);
}

/* ---------- Lackfarben: drei Töne je Farbe (hell, mitte, tief). Die Stopps im SVG lesen sie,
   @property macht den Übergang weich. Gesetzt am <html> (data-lack), gelesen nur in #lackfarben. ---------- */
@property --lh { syntax: "<color>"; inherits: true; initial-value: #e6eaef; }
@property --lm { syntax: "<color>"; inherits: true; initial-value: #9ba5b0; }
@property --lt { syntax: "<color>"; inherits: true; initial-value: #3a4149; }

#lackfarben { --lh: #e6eaef; --lm: #9ba5b0; --lt: #3a4149; transition: --lh .8s var(--weich), --lm .8s var(--weich), --lt .8s var(--weich); }
[data-lack="weiss"]  #lackfarben { --lh: #fbfcfd; --lm: #d9dfe5; --lt: #7d8893; }
[data-lack="silber"] #lackfarben { --lh: #e6eaef; --lm: #9ba5b0; --lt: #3a4149; }
[data-lack="schwarz"] #lackfarben { --lh: #6b727c; --lm: #262a30; --lt: #08090b; }
[data-lack="blau"]   #lackfarben { --lh: #86adff; --lm: #2457d6; --lt: #0a1a52; }
[data-lack="rot"]    #lackfarben { --lh: #f0707a; --lm: #a5121f; --lt: #34040a; }
[data-lack="bronze"] #lackfarben { --lh: #ecc29a; --lm: #9a5f34; --lt: #33190a; }