/* ============================================================
   Mittelfranken Informatik — WERNER BILDER
   DESIGNSYSTEM — die EINZIGE Datei mit festen Farben, Abständen,
   Schriftgrößen, Radien und Schatten.

   stil.css benutzt ausschließlich diese Variablen (var(--…)). Wer das
   Aussehen ändert — später Claude Design —, ändert zuerst HIER; in
   stil.css stehen nur Anordnung und Verweise. Inline-Styles gibt es
   keine (die Content-Security-Policy in server.js verbietet sie auch).

   Ausgangspunkt sind die Farben des Eichschein-Archivs: Hausfarbe
   RAL 5010 Enzianblau, das Logo-Rot nur neben dem Logo.
   ============================================================ */

:root {
  /* ---------- Marke ---------- */
  --mfi-primaer:          #004E7C;
  --mfi-primaer-dunkel:   #003A5C;
  --mfi-primaer-hell:     #E6EFF5;
  --mfi-primaer-rand:     #B8D0E0;
  --mfi-akzent:           #C10731;   /* NUR im Kopf neben dem Logo */
  --mfi-aktion:           var(--mfi-primaer);
  --mfi-aktion-hover:     var(--mfi-primaer-dunkel);
  --mfi-aktion-text:      #FFFFFF;

  /* ---------- Neutral ---------- */
  --mfi-grund:            #F4F6F8;
  --mfi-flaeche:          #FFFFFF;
  --mfi-flaeche-tief:     #E9EDF1;
  --mfi-linie:            #D5DBE0;
  --mfi-linie-kraeftig:   #C2CAD1;
  --mfi-text:             #1E2428;
  --mfi-text-leise:       #5C666E;
  --mfi-fokus:            #2A7FBF;

  /* ---------- Zustände ----------
     Rechtestufen haben eigene Namen, auch wenn Werte sich ähneln:
     "herunterladen" und "ansehen" sollen unterscheidbar bleiben, wenn
     das Design sie später anders färbt. */
  --mfi-stufe-kein:          #8A1C1C;
  --mfi-stufe-kein-flaeche:  #FBEAEA;
  --mfi-stufe-ansehen:       #00507A;
  --mfi-stufe-ansehen-flaeche: #E3F0F8;
  --mfi-stufe-laden:         #1E6B34;
  --mfi-stufe-laden-flaeche: #E5F4E9;
  --mfi-gefahr:              #A3191F;
  --mfi-gefahr-hover:        #7F1217;
  --mfi-erfolg:              #1E6B34;
  --mfi-warnung-flaeche:     #FFF4D6;
  --mfi-warnung-text:        #6B4A00;

  /* ---------- Lightbox ---------- */
  --mfi-lb-grund:         #0A0E12;
  --mfi-lb-text:          #F1F4F6;
  --mfi-lb-leise:         #B9C3CA;
  --mfi-lb-knopf:         rgba(255, 255, 255, 0.12);
  --mfi-lb-knopf-hover:   rgba(255, 255, 255, 0.24);
  --mfi-abdunkeln:        rgba(10, 14, 18, 0.5);

  /* ---------- Schrift ---------- */
  --mfi-schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mfi-gr-klein:   0.8125rem;
  --mfi-gr-normal:  1rem;
  --mfi-gr-gross:   1.125rem;
  --mfi-gr-titel:   1.5rem;
  --mfi-gr-titel-gross: 1.875rem;
  --mfi-zeile:      1.5;
  --mfi-gewicht-fett: 600;

  /* ---------- Abstände (4er-Raster) ---------- */
  --mfi-a1: 0.25rem;
  --mfi-a2: 0.5rem;
  --mfi-a3: 0.75rem;
  --mfi-a4: 1rem;
  --mfi-a5: 1.5rem;
  --mfi-a6: 2rem;
  --mfi-a7: 3rem;

  /* ---------- Maße ---------- */
  --mfi-seite-max:     80rem;
  --mfi-baum-breite:   18rem;
  --mfi-kachel-min:    13rem;
  --mfi-bild-min:      10rem;
  --mfi-bild-min-handy: 7.5rem;
  --mfi-kopf-hoehe:    3.75rem;
  --mfi-logo-hoehe:    2.25rem;
  --mfi-knopf-hoehe:   2.5rem;
  --mfi-lb-knopf-gr:   3rem;
  --mfi-dialog-breite: 34rem;
  --mfi-suche-max:     22rem;
  --mfi-anmeldung-breite: 24rem;
  --mfi-meldung-breite: 26rem;
  --mfi-text-max:      48rem;
  --mfi-feld-min:      12rem;

  /* ---------- Form ---------- */
  --mfi-radius:        8px;
  --mfi-radius-klein:  4px;
  --mfi-radius-rund:   999px;
  --mfi-rand:          1px;
  --mfi-rand-fokus:    2px;
  --mfi-schatten:      0 1px 2px rgba(16, 24, 32, 0.06), 0 2px 8px rgba(16, 24, 32, 0.06);
  --mfi-schatten-hoch: 0 8px 28px rgba(16, 24, 32, 0.18);

  /* ---------- Bewegung ---------- */
  --mfi-dauer:         150ms;
  --mfi-dauer-lb:      200ms;
  --mfi-ebene-kopf:    10;
  --mfi-ebene-meldung: 40;
  --mfi-ebene-lb:      50;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --mfi-primaer:          #6FB3E0;
    --mfi-primaer-dunkel:   #9ACBEB;
    --mfi-primaer-hell:     #16303F;
    --mfi-primaer-rand:     #2B4D63;
    --mfi-aktion:           #2A7FBF;
    --mfi-aktion-hover:     #3990D0;
    --mfi-grund:            #14181B;
    --mfi-flaeche:          #1E2428;
    --mfi-flaeche-tief:     #272E33;
    --mfi-linie:            #333C42;
    --mfi-linie-kraeftig:   #46525A;
    --mfi-text:             #E8ECEF;
    --mfi-text-leise:       #A3AEB6;
    --mfi-stufe-kein:          #F2A3A3;
    --mfi-stufe-kein-flaeche:  #3A1E1E;
    --mfi-stufe-ansehen:       #9ACBEB;
    --mfi-stufe-ansehen-flaeche: #16303F;
    --mfi-stufe-laden:         #9BD8A9;
    --mfi-stufe-laden-flaeche: #1A3322;
    --mfi-gefahr:              #C8323A;
    --mfi-gefahr-hover:        #DA4A52;
    --mfi-erfolg:              #9BD8A9;
    --mfi-warnung-flaeche:     #3A3016;
    --mfi-warnung-text:        #F2D58A;
    --mfi-schatten:      0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}