/* WECKTECH – Farbschema: EINE Datei für die Shop-Seiten (privat/lib/seite.php → shop.css, stil-*.css) und alle
   Konfiguratoren (css/einheit.css und die Seiten-Stile). Inhaber 2026-10-10: Ein neues Farbschema ändert nur diese Werte.

   Nicht hier: Werkstatt-Orange (css/werkstatt-stil.css, bleibt eigenständig), Material- und Druckfarben der 3D-Ansichten
   (js/druckfarben.js, Werkstatt), das blaue EU-Gewährleistungsschild und die Farben der Infozeile (Werkstatt).
   Schema „Schiefer und Nebel“ (Inhaber 2026-10-11): Schieferblau als Akzent, kühler Nebelgrund, fast schwarzer Kopf, gedämpftes Kupfer als Zweitakzent. Vorher: Petrol #007a87 auf Sand.

   Liegt im Konfigurator-Ordner, damit die Konfiguratoren auch ohne Netz (Service Worker) ihre Farben haben. */
:root {
  /* ---------- Kopf und Fuß (immer dunkel) ---------- */
  --wt-kopf: #232a31;                      /* Hintergrund Kopfzeile, Menü am Handy, Produktwahl-Zeile */
  --wt-kopf-glas: rgba(35, 42, 49, .97);   /* Kopfzeile (leicht durchscheinend) */
  --wt-kopf-text: #dde3e8;                 /* Menüpunkte und Knöpfe im Kopf */
  --wt-kopf-text-2: #9aa6b0;               /* Zweittext im Kopf (Untertitel, Gruppen im Handy-Menü) */
  --wt-kopf-flaeche: rgba(255, 255, 255, .07);   /* Knöpfe im Kopf */
  --wt-kopf-flaeche-2: rgba(255, 255, 255, .12); /* Knöpfe im Kopf beim Überfahren, aktiver Punkt */
  --wt-kopf-linie: rgba(255, 255, 255, .2);      /* Rand der Knöpfe im Kopf */
  --wt-kopf-aktiv: #a9c8de;                /* aktueller Menüpunkt / Produkt, Fokus im Kopf (Bernstein) */
  --wt-fuss: #232a31;                      /* Fußzeile */
  --wt-fuss-text: #aab5be;
  --wt-fuss-link: #dde3e8;

  /* ---------- Flächen ---------- */
  --wt-grund: #f1f3f4;      /* Seite (Sand hell) */
  --wt-grund-2: #e7ebed;    /* vertiefte Flächen */
  --wt-karte: #ffffff;      /* Karten (Papier) */
  --wt-sand: #dce2e6;       /* kräftiger Sandton */
  --wt-linie: #dde2e5;      /* Ränder, Trennlinien */
  --wt-linie-2: #c8d0d5;    /* Ränder von Feldern und Knöpfen */

  /* ---------- Schrift ---------- */
  --wt-text: #22282d;
  --wt-text-2: #435059;
  --wt-text-3: #66727b;     /* gedämpft */

  /* ---------- Akzent (Marke Petrol) ---------- */
  --wt-akzent: #4f6b80;
  --wt-akzent-d: #3d5668;   /* dunkler: Schrift auf hell, Überfahren */
  --wt-akzent-dd: #34495a;  /* Verlauf im Titelbereich */
  --wt-akzent-l: #e2e9ee;   /* heller Grund für Auswahl und Hinweise */
  --wt-akzent-xl: #eef2f5;  /* ganz heller Grund (Menüpunkt aktiv im hellen Kopf) */

  /* ---------- Zweitakzent (Holz) ---------- */
  --wt-holz: #a8734e;
  --wt-holz-d: #8c5e3e;
  --wt-holz-dd: #7a5135;
  --wt-holz-l: #f2e4d9;
  --wt-amber: #e2b98f;

  /* ---------- Hinweise ---------- */
  --wt-warn: #9a5a0c; --wt-warn-bg: #fbf0dc;
  --wt-fehler: #a83a2a; --wt-fehler-bg: #fbeae5;
  --wt-gut: #2f7a3a;

  /* ---------- Piktogramme zu den Einstellungen (js/piktogramme.js) ---------- */
  --wt-pikto-grund: #f1f3f4;   /* Kästchen um das Piktogramm */
  --wt-pikto-fuell: #dfe5e9;   /* Material (Holz, Druckteil) – wie die Kanten-Piktogramme der Tischplatte */
  --wt-pikto-fuell-2: #c3ccd3; /* Seitenfläche, zweites Material */
  --wt-pikto-linie: #435059;   /* Umriss */
  --wt-pikto-akzent: #4f6b80;  /* was gemeint ist: Maßpfeile, die Einstellung selbst */

  /* ---------- Schatten (warm getönt) ---------- */
  --wt-schatten: 0 1px 2px rgba(20, 32, 44, .05), 0 10px 28px rgba(20, 32, 44, .08);
  --wt-schatten-s: 0 1px 2px rgba(20, 32, 44, .05), 0 8px 22px rgba(20, 32, 44, .07);
  --wt-schatten-l: 0 1px 2px rgba(20, 32, 44, .05), 0 18px 44px rgba(20, 32, 44, .10);
}