/* ===========================================================================
   Farbwelt: messlog
   ---------------------------------------------------------------------------
   Wofür: die Website MessLOG (Messprotokolle, Labor und Chemielager für
   Beschichter). Aufbau und Regeln wie die Farbwelt coatdepot: Trennung über
   1-px-Linien, keine Schatten, keine Rundungen. Die Farben kommen aus dem
   MessLOG-Logo: Nachtblau #011137 (LOG), Königsblau #1b3c7e (mess),
   Laborblau #2389db (Flüssigkeit im Kolben).

   Das Laborblau ist Akzent, nicht Fläche: Häkchen, Nummern, Messband,
   Knopf im dunklen Anfrageband. Für kleine Schrift auf hellem Grund gilt
   die dunklere Stufe #1673c0, sonst reicht der Kontrast nicht.

   Schriften: Inter Tight (Titel und Text), IBM Plex Mono (Dachzeilen, Codes).
   Beide liegen lokal unter assets/schriften/.

   Vor basis.css einbinden.
   =========================================================================== */

:root {
  /* --- 1. Baukasten-Variablen ------------------------------------------- */
  --hg:            #f6f8fa;   /* Seitenhintergrund (Entwurf: ground)  */
  --flaeche:       #f6f8fa;   /* Rasterzelle       (Entwurf: cell)    */
  --flaeche2:      #eef1f6;   /* abgesetzter Block (Entwurf: panel)   */
  --rand:          #dde3ea;   /* jede Trennlinie, 1 px (border)       */
  --rand-fein:     #e8ecf1;
  --text:          #111c33;
  --schwach:       #5f6b7c;   /* Beschriftungen, Nebensaechliches (muted) */
  --akzent:        #011137;
  --akzent-text:   #ffffff;

  /* Dunkle Zonen: hier das Anfrageband und der Fuss, im Verwaltungs-
     bereich die Seitenleiste des Aufbaus «konsole». */
  --dunkel:         #011137;
  --dunkel-flaeche: #0a1f4d;
  --dunkel-text:    #f2f4f8;
  --dunkel-schwach: #aab6cc;

  --erfolg: #1f7a4d;
  --warn:   #8a5a00;
  --fehler: #a12b2b;

  --radius:       0;
  --radius-gross: 0;
  --schatten:     none;

  --schrift:       'Inter Tight', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /*
   * Titel und Fliesstext teilen sich die Schriftfamilie. Der Unterschied
   * entsteht ueber Groesse und Strichstaerke (700 gegen 400), nicht ueber
   * eine zweite Schrift.
   *
   * Grund: Die Wortmarke OBETRechner ist fett und serifenlos. Eine
   * Serifen-Ueberschrift daneben — so sah es der Entwurf vor — wirkte wie
   * zwei verschiedene Firmen auf einer Seite.
   *
   * Willst du es doch anders: Diese eine Zeile aendern und die Schriftdatei
   * unter assets/schriften/ ablegen, dazu einen @font-face-Block in
   * assets/schriften.css. Sonst ist nichts anzupassen — alle Ueberschriften
   * holen sich die Schrift von hier.
   */
  --schrift-titel: 'Inter Tight', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --mono:          'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* --- 2. Ergaenzungen fuer den Aufbau «fachblatt» ----------------------- */

  /* Zwischenstufe zwischen --text und --schwach. Der Baukasten kennt nur
     zwei Helligkeiten; der Entwurf braucht drei: Titel, Fliesstext,
     Beschriftung. */
  --fliess:       #3f4b5e;

  --akzent-hover: #13295e;

  /* Bildplatzhalter: gestreift, solange kein echtes Bild da ist. */
  --streif-a:     #e3e8ef;
  --streif-b:     #eef1f6;
  --platz-linie:  #d3dae4;

  /* Anfrageband und Fuss */
  --band-fliess:      #c3cde0;
  --feld-grund:       #030f2b;
  --feld-linie:       #22386b;
  --band-knopf:       #2389db;
  --band-knopf-text:  #ffffff;
  --band-knopf-hover: #3a9bec;
  --fuss-linie:       #1c2c56;

  /*
   * Wortmarke. Dieselbe Zweifarbigkeit wie in der Anwendung: dort steht
   * OBET in Weiss und «Rechner» in Hellblau auf dem dunklen Kopfband
   * (assets/style.css, .logo-obet / .logo-rechner). Der Kopf dieser Website
   * ist hell, deshalb gelten hier die Werte der Anmeldeseite der Anwendung
   * — die steht ebenfalls auf hellem Grund.
   */
  --logo-obet:    #011137;
  --logo-rechner: #1b3c7e;
  --marke:        #2389db;   /* Laborblau: Häkchen, Messband, Flächen      */
  --marke-text:   #1673c0;   /* dasselbe Blau als kleine Schrift auf Hell  */
  --marke-mitte:  #1b3c7e;   /* Königsblau aus «mess»                      */
  --zettel-grund: #ffffff;   /* Protokollzettel ist immer weiss            */
  --zettel-text:  #011137;
  --ok:           #1f8a52;
  --ok-grund:     #e6f4ec;
  --soll-band:    #d6ebfb;

  /* Flaechen der Meldungen (basis.css setzt nur die Schriftfarbe) */
  --erfolg-grund: #e8f5ee;
  --warn-grund:   #fdf3e2;
  --fehler-grund: #fbecec;
}

/* ---------------------------------------------------------------------------
   Dunkle Fassung (Entwurf 2b)

   Zwei Wege, absichtlich getrennt:
     1. <html class="dunkel"> — der Besucher hat oben umgeschaltet. Seine Wahl
        wird im Browser gemerkt und gewinnt immer.
     2. prefers-color-scheme — er hat nie umgeschaltet, dann folgen wir dem
        Geraet. Das :not(.hell) sorgt dafuer, dass eine bewusste Wahl «hell»
        auf einem dunkel gestellten Geraet nicht ueberfahren wird.

   Die beiden Bloecke sind wortgleich. Zusammenfassen liesse sich das nur
   ueber :is(...) — dann aendert sich aber die Gewichtung. Doppelt und
   berechenbar ist hier besser als kurz und ueberraschend.
   --------------------------------------------------------------------------- */

html.dunkel {
  --hg:            #0a1128;
  --flaeche:       #111b3a;
  --flaeche2:      #0e1733;
  --rand:          #22305a;
  --rand-fein:     #1a2548;
  --text:          #e6eaf2;
  --schwach:       #8d9ab5;
  --akzent:        #4aa3ec;
  --akzent-text:   #011137;

  --dunkel:         #07102b;
  --dunkel-flaeche: #0e1a3f;
  --dunkel-text:    #e6eaf2;
  --dunkel-schwach: #93a3c2;

  --erfolg: #6ede9f;
  --warn:   #ffc873;
  --fehler: #ff9a9a;

  --fliess:       #a3b0c8;
  --akzent-hover: #6cb6f0;

  --streif-a:     #16224a;
  --streif-b:     #0e1733;
  --platz-linie:  #22305a;

  --band-fliess:  #b3bfd6;
  --feld-grund:   #060d24;
  --feld-linie:   #22386b;
  --fuss-linie:   #1c2c56;

  --erfolg-grund: #12291d;
  --warn-grund:   #2c2210;
  --fehler-grund: #2c1416;

  /* Dunkler Kopf: jetzt wie im Kopfband der Anwendung selbst. */
  --logo-obet:    #ffffff;
  --logo-rechner: #8fb8ff;
  --marke-text:   #6cb6f0;
  --soll-band:    #16345e;
  --ok-grund:     #12291d;
}

@media (prefers-color-scheme: dark) {
  html:not(.hell) {
    --hg:            #0a1128;
    --flaeche:       #111b3a;
    --flaeche2:      #0e1733;
    --rand:          #22305a;
    --rand-fein:     #1a2548;
    --text:          #e6eaf2;
    --schwach:       #8d9ab5;
    --akzent:        #4aa3ec;
    --akzent-text:   #011137;

    --dunkel:         #07102b;
    --dunkel-flaeche: #0e1a3f;
    --dunkel-text:    #e6eaf2;
    --dunkel-schwach: #93a3c2;

    --erfolg: #6ede9f;
    --warn:   #ffc873;
    --fehler: #ff9a9a;

    --fliess:       #a3b0c8;
    --akzent-hover: #6cb6f0;

    --streif-a:     #16224a;
    --streif-b:     #0e1733;
    --platz-linie:  #22305a;

    --band-fliess:  #b3bfd6;
    --feld-grund:   #060d24;
    --feld-linie:   #22386b;
    --fuss-linie:   #1c2c56;

    --erfolg-grund: #12291d;
    --warn-grund:   #2c2210;
    --fehler-grund: #2c1416;

    --logo-obet:    #ffffff;
    --logo-rechner: #8fb8ff;
    --marke-text:   #6cb6f0;
    --soll-band:    #16345e;
    --ok-grund:     #12291d;
  }
}