/* ============================================================================
   DESIGN-KIT — die einzige Gestaltungsdatei, die je Kunde angefasst wird.
   ============================================================================

   Sie wird NACH styles.css geladen und überschreibt deren Vorgaben. styles.css
   selbst bleibt bei jedem Kunden byte-gleich — nur so kann ein Kern-Update
   ausgeliefert werden, ohne ein Kundendesign zu brechen.

   ZU ÄNDERN SIND DIE SECHS WERTE IM ERSTEN BLOCK. Alles darunter leitet sich
   daraus ab und bleibt in Ruhe.

   Prüfen nach dem Umfärben (drei Handgriffe, fünf Minuten):
     1. Kontrast Text auf Fläche mindestens 4.5:1, grosse Titel 3:1.
        --akzent steht auf WEISS (Links, Rahmen) und muss dort lesbar sein —
        ein helles Firmen-Türkis besteht das oft nicht. Dann --akzent-d
        (die dunklere Fassung für Text) getrennt setzen.
     2. Die Kopfleiste ist --dunkel, die Navigation steht darauf. Ein dunkles
        Firmenblau plus dunkler Akzent = unlesbare Navigation.
     3. Auf dem Handy ansehen, nicht nur am Bildschirm.
   ============================================================================ */

:root{
  /* ---- DIE SECHS WERTE JE KUNDE ------------------------------------------ */
  --dunkel:      var(--kern-haupt);    /* Kopfleiste, Navigation, Titel; Logistikwerk #002D47 aus kern.css */
  --akzent:      var(--kern-akzent);   /* Links, aktive Zustände, Hervorhebung; Logistikwerk #2BA5CA aus kern.css */
  --akzent-d:    #17789a;   /* dunklere Fassung für Text auf Weiss */
  --warnung:     #C51B29;   /* Löschen, Fehler */
  --schrift-marke: var(--kern-titel-schrift);   /* nur Seitentitel (h1), aus kern.css (data-marke); alles andere --schrift-text (seit 1.19.0, D2-6) */
  --schrift-text:  var(--kern-schrift);         /* Fliesstext, aus kern.css (data-marke) */

  /* ---- ab hier abgeleitet — nicht je Kunde anfassen ---------------------- */
  --navy:var(--dunkel);
  --navy-h:color-mix(in srgb, var(--dunkel) 88%, white);
  --teal:var(--akzent);
  --teal-d:var(--akzent-d);
  --red:var(--warnung);
  --red-h:color-mix(in srgb, var(--warnung) 82%, white);

  --teal-tint: color-mix(in srgb, var(--akzent) 12%, white);
  --teal-tint2:color-mix(in srgb, var(--akzent)  8%, white);
  --teal-rand: color-mix(in srgb, var(--akzent) 32%, white);
  --teal-rand2:color-mix(in srgb, var(--akzent) 24%, white);
  --rot-tint:  color-mix(in srgb, var(--warnung) 10%, white);
  --rot-rand:  color-mix(in srgb, var(--warnung) 28%, white);
  --rot-text:  color-mix(in srgb, var(--warnung) 75%, black);

  --schrift:var(--schrift-text);
  --schrift-titel:var(--schrift-marke);
  --ic-akzent:var(--akzent);
}

/* ---- Wortmarke ------------------------------------------------------------
   Der Text steht in kunde/kunde.js (wortmarkeVorn/wortmarkeHinten). Wer statt
   Text ein Logo will, blendet den Text aus und legt die Datei darüber:

   .brand{ background:url(/kunde-logo.svg) left center/contain no-repeat;
           width:150px; height:34px; text-indent:-9999px; overflow:hidden; }

   ⚠️ Beim Logistikwerk-eigenen Einsatz gilt: das LW-Logo nie auf dunklem
   Grund. Die Kopfleiste ist hell (--flaeche), das passt — aber vor dem
   Übernehmen in einen dunklen Kopf prüfen.                                  */