/* Kunden-Erscheinungsbild VHV Gruppe. Zuschaltbar, nicht Vorgabe.

   Wirkt nur, wenn <html> data-mandant="vhv" traegt (src/core/mandant.js,
   Einstellung 'mandant'). Ohne dieses Attribut gilt limou aus tokens.css.
   Geladen wird diese Datei in allen Oberflaechen DIREKT NACH tokens.css.

   HERKUNFT (seit 25.09.2026): Corporate-Design-Manual der VHV Gruppe, Stand
   Januar 2007, von Tim am 25.09.2026 uebergeben. Daraus uebernommen:
   - Markenfarben: VHV Gruppe Grau RGB 81/98/111 (#51626f) und VHV Gruppe
     Hellgruen RGB 182/191/0 (#b6bf00) mit den Rasterwerten 75 / 50 / 25 %
     (Grau: #7c8993, #a8b1b7, #d4d8db; Hellgruen: #c5cf40, #dbe980, #e8efc0).
   - Schrift fuer digitale Anwendungen ausschliesslich Arial / Arial Bold
     (Manual S. 14 und 15). Arial ist eine Systemschrift; sie wird nicht
     geladen, es gibt keinen Fremdaufruf. Wo sie fehlt (Android), faellt der
     Stapel auf die lokale Roboto und dann auf sans-serif.
   - Headlines in Versalien (Manual S. 15), ohne Sperrung (LW 0). Das gilt
     nur in diesem Erscheinungsbild: Seitentitel, Abschnittstitel und der
     Titel in der Kopfzeile am Handy. Fliesstext gemischt.
   - Flaechen statt Rundungen: das Manual kennt keine gerundeten Ecken.
     Radien hier 2 bis 3 px, damit Knoepfe und Karten technisch sauber bleiben.
   - Farbanwendung (Manual S. 16): Weiss auf Grau, Grau auf Weiss, Hellgruen
     als Flaeche mit Grau oder dunkler Schrift; Weiss auf Hellgruen misst
     2.01:1 und wird fuer Text nicht benutzt (das Manual erlaubt es fuer
     Print-Headlines, die Grenze hier ist 4.5:1 fuer Text unter 24px).
   Vorher (12.09. bis 24.09.2026) stammten die Werte von vhv-gruppe.de
   (Orange als Aktionsfarbe); das Manual kennt kein Orange.

   NICHT uebernommen: Logo, Schraegstrich als Bildmarke, Bildsprache. Die
   Kundenmarke kommt nur als Datei ueber Einstellungen > Logo, das Favicon
   bleibt die limou-Bildmarke.

   Kontraste: gerechnet mit node (WCAG 2) gegen die naechste deckende Flaeche,
   Grenze 4.5:1 fuer Text unter 24px, 3:1 fuer Linien, Marker und Fokus. Die
   Zahl steht am Wert. Gemessen im Browser mit zustaende/kontrast.mjs ^vhv.

   KASKADE, bitte nicht umbauen:
   :root[data-mandant="vhv"] hat dieselbe Spezifitaet wie
   :root[data-thema="dunkel"] in tokens.css und steht spaeter - im dunklen
   Thema gewinnt damit zunaechst dieser helle Block. Deshalb traegt der
   dunkle Block unten (:root[data-mandant="vhv"][data-thema="dunkel"],
   hoehere Spezifitaet) jeden Wert, der sich im dunklen Thema aendert, und
   dieser helle Block traegt JEDEN Farbnamen, den tokens.css in einem der
   beiden Themen setzt. Sonst schiene ein limou-Wert durch.
*/

/* Roboto als Rueckfall fuer Geraete ohne Arial (Android), lokal aus
   assets/fonts (SIL Open Font License 1.1, LIZENZ-Roboto.txt). Geladen wird
   sie erst, wenn ein Element sie tatsaechlich verwendet. */
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-variabel.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

:root[data-mandant="vhv"] {
  /* --- Neutral, aus VHV Gruppe Grau und seinen Rasterwerten ------------ */
  --ton-000: #ffffff;
  --ton-025: #f7f8f9;   /* abgeleitet, vertiefte Flaeche */
  --ton-050: #f1f3f4;   /* abgeleitet (etwa 8 % Grau), Grund */
  --ton-100: #e4e7e9;   /* abgeleitet (etwa 15 % Grau), stille Flaeche */
  --ton-200: #d4d8db;   /* 25 % Grau (Manual S. 12) */
  --ton-300: #a8b1b7;   /* 50 % Grau */
  --ton-400: #7c8993;   /* 75 % Grau */
  --ton-500: #6e7c87;   /* abgeleitet */
  --ton-600: #51626f;   /* VHV Gruppe Grau 100 % */
  --ton-700: #46555f;   /* abgeleitet, dunkler */
  --ton-800: #3a4750;   /* abgeleitet */
  --ton-900: #2e3940;   /* abgeleitet, Fliesstext stark */
  --ton-950: #222b31;   /* abgeleitet, Grund im dunklen Thema */

  /* --- Akzent = VHV Gruppe Grau ---------------------------------------- */
  --akzentton-300: #a8b1b7;   /* 50 % Grau */
  --akzentton-400: #7c8993;   /* 75 % Grau */
  --akzentton-500: #51626f;   /* Grau 100 %; Weiss darauf 6.31 */
  --akzentton-600: #3a4750;   /* dunkler, Hover; Weiss darauf 9.56 */
  --akzentton-700: #2e3940;

  /* --- Primaerfarbe = VHV Gruppe Hellgruen ------------------------------ */
  --primaerton-300: #e8efc0;  /* 25 % Hellgruen */
  --primaerton-400: #dbe980;  /* 50 % */
  --primaerton-500: #b6bf00;  /* Hellgruen 100 %; nur Flaeche, nie Text auf Hell */
  --primaerton-600: #c5cf40;  /* 75 % (Linie auf dunklen Flaechen) */
  --primaerton-700: #505400;  /* abgeleitet, Schrift der Bedeutung "gut": 6.72 auf 25 % */

  /* Flaechen */
  --flaeche-grund: var(--ton-050);
  --flaeche-karte: var(--ton-000);
  --flaeche-erhoben: var(--ton-000);
  --flaeche-vertieft: var(--ton-025);
  --flaeche-navigation: var(--ton-600);   /* Grau: Weiss darauf 6.31 (Manual "Weiss auf Grau") */
  --flaeche-still: var(--ton-100);

  /* Schrift. Ueberschriften in der Markenfarbe Grau (Manual S. 16): 6.31 auf
     Weiss, 5.67 auf dem Grund, 5.08 auf der stillen Flaeche. */
  --schrift-stark: var(--ton-600);
  --schrift-normal: var(--ton-800);       /* 8.59 auf dem Grund */
  --schrift-leise: #556570;               /* 4.8 auf still, 5.4 auf Grund, 6.0 auf Weiss */
  --schrift-invers: var(--ton-000);
  --schrift-akzent: var(--ton-600);       /* Verweise in Grau, 6.31 auf Weiss */

  /* Linien: 25 % Grau als Trennung, 50 % als starke Linie (Linie gegen Weiss
     nur Gliederung, kein Kontrastanspruch). */
  --linie: var(--ton-200);
  --linie-stark: var(--ton-300);
  --linie-leise: var(--ton-100);

  /* Warnzaehler auf der Navigation (beide Themen): dunkle Schrift 8.5 auf der
     Flaeche, Flaeche gegen Grau 3.9 (Marker). */
  --marke-warnung-flaeche: #e3aca4;
  --marke-warnung-schrift: #222b31;

  /* Akzent / Bedienelemente: Knoepfe in Grau mit weisser Schrift (Manual
     "Weiss auf Grau", 6.31), Hover dunkler (9.56). */
  --akzent: var(--akzentton-500);
  --akzent-schrift: #ffffff;
  --akzent-schwach: var(--akzentton-600);
  --fokus: var(--akzentton-500);          /* 6.31 auf Weiss, 5.08 auf still */
  --akzent-linie: var(--akzentton-500);   /* 5.67 gegen den Grund */

  /* --- Markenflaechen, in BEIDEN Themen gleich ------------------------ */
  /* Hellgruen als Band (Manual "Grau auf Hellgruen"): Grau misst darauf nur
     3.14, deshalb dunkle Schrift 7.16; leise Schrift ton-800 5.5. */
  --band-flaeche: var(--primaerton-500);
  --band-schrift: #222b31;
  --band-schrift-leise: var(--ton-800);
  --band-fokus: #222b31;
  --band-knopf-hover: rgba(34, 43, 49, 0.12);

  /* Fahne fuer Kategorien: 25 % Hellgruen mit dunkler Schrift (11.9). */
  --fahne-flaeche: var(--primaerton-300);
  --fahne-schrift: #222b31;

  /* Aktiver Navigationseintrag und Fokus auf der Grau-Navigation: Hellgruen
     gegen Grau 3.14 (Marker, Grenze 3:1). */
  --navigation-leiste: var(--primaerton-500);
  --navigation-fokus: var(--primaerton-500);

  /* Bedeutungsfarben. Gut aus Hellgruen, Info aus Grau; Warn und Gefahr sind
     Funktionsfarben ohne Markenbezug (das Manual kennt keine). */
  --gut-flaeche: var(--primaerton-300);
  --gut-linie: var(--primaerton-600);
  --gut-schrift: var(--primaerton-700);   /* 6.72 auf der Flaeche, 6.84 auf Weiss */

  --info-flaeche: var(--ton-100);
  --info-linie: var(--ton-300);
  --info-schrift: var(--ton-800);         /* 7.69 auf der Flaeche */

  --warn-flaeche: #fdeee2;
  --warn-linie: #e0a070;
  --warn-schrift: #a83d00;                /* 5.55 auf der Flaeche */

  --gefahr-flaeche: #fae9e7;
  --gefahr-linie: #e3aca4;
  --gefahr-schrift: #8f2418;              /* 7.35 auf der Flaeche */

  --neutral-flaeche: var(--ton-100);
  --neutral-linie: var(--ton-200);
  --neutral-schrift: var(--ton-600);      /* 5.08 auf der eigenen Flaeche */

  /* Konflikt: kein Signalgelb im Erscheinungsbild; Konflikte im Gefahrton. */
  --konflikt-flaeche: var(--gefahr-flaeche);
  --konflikt-linie: var(--gefahr-linie);
  --konflikt-schrift: var(--gefahr-schrift);
  --konflikt-signal: var(--gefahr-linie);
  --konflikt-kante: var(--gefahr-schrift);

  /* Typografie: Arial fuer digitale Anwendungen (Manual S. 14/15). */
  --schriftfamilie: Arial, "Helvetica Neue", Helvetica, Roboto, sans-serif;
  --schriftfamilie-zahl: Arial, "Helvetica Neue", Helvetica, Roboto, sans-serif;
  --schriftfamilie-fest: ui-monospace, "Cascadia Mono", "Segoe UI Mono",
    Consolas, "Liberation Mono", monospace;

  /* Arial Bold ist das einzige fette Gewicht. */
  --gewicht-titel: 700;
  --gewicht-abschnitt: 700;

  /* Rundungen: Flaechen mit Kante (Manual: Rechtecke). */
  --rund-1: 0;
  --rund-2: 2px;
  --rund-3: 2px;
  --rund-4: 3px;
  --rund-voll: 999px;
  --rund-knopf: 2px;
  --rund-karte: 3px;

  /* Schatten sparsam, Karten tragen die Linie. */
  --schatten-1: 0 1px 2px rgba(46, 57, 64, 0.08);
  --schatten-2: 0 2px 6px rgba(46, 57, 64, 0.10), 0 1px 2px rgba(46, 57, 64, 0.06);
  --schatten-3: 0 12px 32px rgba(46, 57, 64, 0.18), 0 2px 8px rgba(46, 57, 64, 0.10);

  /* Abholschild: Schrift ton-900 11.83 auf Weiss, leise Grau 6.31, Fokus Grau
     6.31, Linie 25 % Grau (nur Trennung). */
  --schild-grund: var(--ton-000);
  --schild-schrift: var(--ton-900);
  --schild-leise: var(--ton-600);
  --schild-linie: var(--ton-200);
  --schild-fokus: var(--ton-600);
}

/* Versalien fuer Headlines (Manual S. 15), ohne Sperrung. Nur in diesem
   Erscheinungsbild; die Grundgestaltung limou schreibt normal (DESIGN.md 6). */
:root[data-mandant="vhv"] .seitenkopf-titel,
:root[data-mandant="vhv"] .abschnitt-titel,
:root[data-mandant="vhv"] .kopfzeile-titel {
  text-transform: uppercase;
  letter-spacing: 0;
}

:root[data-mandant="vhv"][data-thema="dunkel"] {
  --flaeche-grund: #1b2227;
  --flaeche-karte: #242d33;
  --flaeche-erhoben: var(--ton-900);
  --flaeche-vertieft: #171d21;
  --flaeche-navigation: #141a1e;
  --flaeche-still: var(--ton-900);

  --schrift-stark: #eef1f2;               /* 12.35 auf der Karte */
  --schrift-normal: var(--ton-200);       /* 9.78 */
  --schrift-leise: var(--ton-300);        /* 6.43 auf Karte, 5.43 auf erhoben und still */
  --schrift-invers: #222b31;
  --schrift-akzent: var(--primaerton-400); /* 50 % Hellgruen, 10.67 auf der Karte */

  --linie: #3a4750;
  --linie-stark: #51626f;
  --linie-leise: #2e3940;

  /* Auf dunklem Grund ist Hellgruen die Aktionsfarbe (Manual "Hellgruen auf
     Grau"), mit dunkler Schrift 7.16; Hover 75 % Hellgruen, dunkle Schrift 8.49. */
  --akzent: var(--primaerton-500);
  --akzent-schrift: #222b31;
  --akzent-schwach: var(--primaerton-600);
  --fokus: var(--primaerton-500);          /* 6.97 gegen die Karte, 8.00 gegen den Grund */
  --akzent-linie: var(--primaerton-500);

  --gut-flaeche: #262b0f;
  --gut-linie: #4d5417;
  --gut-schrift: #ced263;                 /* 9.08 */

  --info-flaeche: #1e2a36;
  --info-linie: #3a4857;
  --info-schrift: #b6bfc8;                /* 7.83 */

  --warn-flaeche: #33200f;
  --warn-linie: #6b3a14;
  --warn-schrift: #fc9f6a;

  --gefahr-flaeche: #331a16;
  --gefahr-linie: #6b3029;
  --gefahr-schrift: #e8a79e;

  --neutral-flaeche: var(--ton-900);
  --neutral-linie: #44525f;
  --neutral-schrift: var(--ton-300);      /* 5.43 auf der eigenen Flaeche */

  --konflikt-flaeche: var(--gefahr-flaeche);
  --konflikt-linie: var(--gefahr-linie);
  --konflikt-schrift: var(--gefahr-schrift);
  --konflikt-signal: var(--gefahr-linie);
  --konflikt-kante: var(--gefahr-schrift);

  --schatten-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --schatten-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4);
  --schatten-3: 0 14px 36px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Abholschild dunkel (data-schild="dunkel" am <html>). Schrift 15.5 auf dem
   Grund, leise 50 % Grau 7.0, Fokus 50 % Hellgruen 10.7. */
:root[data-mandant="vhv"][data-schild="dunkel"] {
  --schild-grund: #141a1e;
  --schild-schrift: #eef1f2;
  --schild-leise: #a8b1b7;
  --schild-linie: #3a4750;
  --schild-fokus: #dbe980;
}