/*
 * Moveliner — Markenwerte (Designsystem)
 *
 * Einzige Quelle für Farben, Schrift, Maße und Bewegung. Neue Oberflächen
 * (Verwaltung, Editor, Berichte, Seitenverwaltung, Konfigurator) benutzen nur
 * diese Variablen, keine eigenen Hexwerte.
 *
 * moveliner.css aus dem Entwurf bleibt unverändert und benutzt diese Datei
 * nicht. Die Werte hier sind aus ihr vermessen (29.09.2026), damit beides
 * gleich aussieht. Regeln und Begründungen: designsystem/brandbook.html
 *
 * Präfix --ml-. Farbnamen beschreiben den Ton, Rollennamen den Zweck.
 * In Oberflächen werden die Rollen benutzt, nicht die Töne.
 */

/* Hausschrift Archivo (entschieden 29.09.2026), selbst gehostet, SIL Open Font License.
   Eine variable Datei je Stil: Gewicht 100–900, Breite 62–125 %. Nur Zeichensatz latin
   (deckt Deutsch samt „“ – € ab). */
@font-face {
  font-family: "Archivo";
  src: url("../schriften/archivo/archivo-latin-standard-normal.woff2") format("woff2-variations"),
       url("../schriften/archivo/archivo-latin-standard-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../schriften/archivo/archivo-latin-standard-italic.woff2") format("woff2-variations"),
       url("../schriften/archivo/archivo-latin-standard-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Töne ─────────────────────────────────────────────── */

  /* Anthrazit: Basis der Marke. Text, Hero, Fuß, dunkle Abschnitte */
  --ml-anthrazit-900: #111318;
  --ml-anthrazit-800: #191d25;
  --ml-anthrazit-700: #30394a;
  --ml-anthrazit-600: #3b4351;

  /* Schiefer: Nebentexte, Linien, Flächen */
  --ml-schiefer-600: #586373;
  --ml-schiefer-500: #737f90;   /* nur große Schrift ab 24 px, siehe Brandbook */
  --ml-schiefer-400: #7f8a9a;   /* Umrandung von Bedienelementen, 3:1 auf allen hellen Flächen */
  --ml-schiefer-300: #aab6c9;
  --ml-schiefer-200: #c6cbd4;
  --ml-schiefer-100: #d9dfe7;

  /* Helle Flächen */
  --ml-hell-300: #e9edf3;
  --ml-hell-200: #eceff3;
  --ml-hell-100: #f6f7f9;
  --ml-weiss: #ffffff;

  /* Regenbogen: nur als schmaler Akzent, nie für Text auf hellem Grund */
  --ml-regenbogen-rot: #ef4444;
  --ml-regenbogen-orange: #f97316;
  --ml-regenbogen-gelb: #facc15;
  --ml-regenbogen-gruen: #22c55e;
  --ml-regenbogen-blau: #3b82f6;
  --ml-regenbogen-violett: #a855f7;
  --ml-regenbogen: linear-gradient(90deg,
    var(--ml-regenbogen-rot), var(--ml-regenbogen-orange), var(--ml-regenbogen-gelb),
    var(--ml-regenbogen-gruen), var(--ml-regenbogen-blau), var(--ml-regenbogen-violett));

  /* Funktion */
  --ml-blau-fokus: #3972bd;
  --ml-gruen-ok: #1f6b3a;
  --ml-gruen-ok-hell: #e3f1e7;
  --ml-rot-fehler: #a12a2a;
  --ml-rot-fehler-hell: #fbe6e6;

  /* ── Rollen: helle Umgebung ───────────────────────────── */

  --ml-grund: var(--ml-hell-100);          /* Seitenhintergrund */
  --ml-flaeche: var(--ml-weiss);           /* Karten, Panels */
  --ml-flaeche-2: var(--ml-hell-200);      /* abgesetzte Abschnitte, Kartenraster */
  --ml-flaeche-akzent: var(--ml-hell-300); /* Hover, gewählte Option, Kontaktbereich */
  --ml-text: var(--ml-anthrazit-900);
  --ml-text-2: var(--ml-schiefer-600);     /* Nebentext, Beschriftungen */
  --ml-text-gross-leise: var(--ml-schiefer-500); /* zweite Zeile großer Überschriften */
  --ml-linie: var(--ml-schiefer-100);      /* Trenner, Kartenrand */
  --ml-linie-bedien: var(--ml-schiefer-400); /* Eingabefelder, Auswahlfelder */
  --ml-fokus: var(--ml-blau-fokus);

  /* Hauptaktion auf hellem Grund: dunkel mit weißer Schrift */
  --ml-aktion: var(--ml-anthrazit-900);
  --ml-aktion-hover: var(--ml-anthrazit-700);
  --ml-aktion-text: var(--ml-weiss);

  /* ── Rollen: dunkle Umgebung (Hero, Ablauf, Fuß) ──────── */

  --ml-dunkel-grund: var(--ml-anthrazit-900);
  --ml-dunkel-flaeche: var(--ml-anthrazit-800);
  --ml-dunkel-hover: var(--ml-anthrazit-700);
  --ml-dunkel-linie: var(--ml-anthrazit-600);
  --ml-dunkel-text: var(--ml-weiss);
  --ml-dunkel-text-2: var(--ml-schiefer-200);
  --ml-dunkel-label: var(--ml-schiefer-300); /* Abschnittsnummern, Hervorhebung in h1 */

  /* Hauptaktion auf dunklem Grund: weiß mit dunkler Schrift */
  --ml-dunkel-aktion: var(--ml-weiss);
  --ml-dunkel-aktion-hover: #e2e8f0;
  --ml-dunkel-aktion-text: var(--ml-anthrazit-900);

  /* ── Schrift ──────────────────────────────────────────── */

  /* Archivo, entschieden 29.09.2026 (Vergleich: designsystem/schriftvergleich.html).
     Arial bleibt Ersatz, solange die Datei lädt. */
  --ml-schrift: "Archivo", Arial, Helvetica, sans-serif;
  --ml-breite-normal: 100%;
  --ml-breite-modell: 112%;  /* Modellnamen „ML3" im Stil der Fahrzeugbeschriftung */
  --ml-schrift-mono: ui-monospace, Menlo, Consolas, monospace;

  --ml-gewicht-normal: 400;
  --ml-gewicht-mittel: 600;
  --ml-gewicht-fett: 700;

  /* Stufen. Große Überschriften skalieren mit der Breite. */
  --ml-groesse-display: clamp(48px, 6.5vw, 100px); /* h1 Startseite */
  --ml-groesse-modell: clamp(64px, 7vw, 110px);    /* h1 Fahrzeugseite, „ML3" */
  --ml-groesse-h2: clamp(36px, 4vw, 60px);
  --ml-groesse-h3: 30px;
  --ml-groesse-h4: 22px;
  --ml-groesse-lead: 18px;
  --ml-groesse-text: 16px;
  --ml-groesse-klein: 14px;
  --ml-groesse-label: 12px;  /* Großbuchstaben-Labels mobil; nie kleiner */

  --ml-zeile-display: 1.03;
  --ml-zeile-titel: 1.1;
  --ml-zeile-text: 1.6;

  --ml-sperrung-display: -0.065em;
  --ml-sperrung-h2: -0.055em;
  --ml-sperrung-h3: -0.03em;
  --ml-sperrung-label: 0.1em;

  /* ── Maße ─────────────────────────────────────────────── */

  --ml-radius-s: 4px;   /* Plaketten, Badges */
  --ml-radius-m: 6px;   /* Buttons, Eingabefelder, Modellumschalter */
  --ml-radius-l: 8px;   /* Karten, Bilder */
  --ml-radius-xl: 10px; /* Formularpanel */

  /* Abstandsraster in 4er-Schritten */
  --ml-abstand-1: 4px;
  --ml-abstand-2: 8px;
  --ml-abstand-3: 12px;
  --ml-abstand-4: 16px;
  --ml-abstand-5: 24px;
  --ml-abstand-6: 32px;
  --ml-abstand-7: 48px;
  --ml-abstand-8: 64px;
  --ml-abstand-9: 96px;

  --ml-seitenrand: 5%;               /* links und rechts, alle Breiten */
  --ml-abschnitt: var(--ml-abstand-9); /* oben und unten; mobil 60px */
  --ml-abschnitt-mobil: 60px;
  --ml-textbreite: 560px;            /* maximale Zeilenlänge für Fließtext */
  --ml-trefferflaeche: 44px;         /* Mindestgröße jedes Bedienelements */

  --ml-gelb-warnung: #8a5a00;
  --ml-gelb-warnung-hell: #fdf1d8;

  /* ── Bewegung ─────────────────────────────────────────── */
  /* Drei Bewegungen aus der Themenwelt, siehe Brandbook „Bewegung":
     Fahren (seitlich einrollen, ausrollen), Aufbauen (von unten, gestaffelt),
     Einschalten (Licht an, kurz und klar). Nie schweben, nie wabern. */

  --ml-dauer-kurz: 0.12s;   /* Druck, Fokus */
  --ml-dauer: 0.2s;         /* Farbe, Hintergrund, Pfeile */
  --ml-dauer-mittel: 0.35s; /* Aufklappen, Auswahl, Häkchen */
  --ml-dauer-lang: 0.6s;    /* Einrollen, Aufbauen, Diagrammbalken */
  --ml-dauer-bild: 0.4s;    /* Bildzoom bei Hover */
  --ml-staffel: 70ms;       /* Versatz je Element beim gestaffelten Aufbauen */

  --ml-kurve: ease;
  --ml-kurve-fahrt: cubic-bezier(0.22, 0.61, 0.36, 1);   /* ausrollen: schnell rein, weich zum Stand */
  --ml-kurve-aufbau: cubic-bezier(0.2, 0.8, 0.2, 1);     /* aufbauen: fest, ohne Nachschwingen */
  --ml-kurve-einfedern: cubic-bezier(0.34, 1.4, 0.64, 1); /* einfedern: kleines Nachschwingen, nur Bestätigungen */

  --ml-weg: 24px;           /* Strecke beim Einrollen und Aufbauen */

  /* ── Diagramme ────────────────────────────────────────── */
  /* Aus den Regenbogentönen für Daten gestuft und geprüft (29.09.2026):
     Farbfehlsichtigkeit ΔE ≥ 13,5, Normalsicht ≥ 19,8, jede Farbe ≥ 3:1 auf
     Weiß, --ml-grund, --ml-dunkel-grund und --ml-dunkel-flaeche. Hell und dunkel
     gleich. Reihenfolge fest, nie überspringen. Punkt- und Kartendiagramme: nur
     die ersten drei, danach „Sonstige". */
  --ml-reihe-1: #3b82f6;   /* Blau */
  --ml-reihe-2: #ea580c;   /* Orange */
  --ml-reihe-3: #0d9488;   /* Petrol */
  --ml-reihe-4: #a16207;   /* Ocker */
  --ml-reihe-5: #a855f7;   /* Violett */
  --ml-reihe-6: #ef4444;   /* Rot */

  /* Mengen: ein Ton, hell nach dunkel (Stufen geprüft) */
  --ml-menge-1: #60a5fa;
  --ml-menge-2: #3b82f6;
  --ml-menge-3: #1d4ed8;
  --ml-menge-4: #1e3a8a;

  --ml-diagramm-raster: var(--ml-hell-200);   /* Hilfslinien, zurückhaltend */
  --ml-diagramm-achse: var(--ml-schiefer-100); /* Grundlinie */
  --ml-diagramm-offen: var(--ml-schiefer-300); /* unbestätigte Werte, schraffiert */
  --ml-balken: 22px;        /* Balkenstärke */
  --ml-balken-ende: 4px;    /* gerundetes Datenende */

  /* ── Grafik ───────────────────────────────────────────── */

  --ml-symbol: 24px;         /* Standardgröße, Raster 24 × 24 */
  --ml-symbol-klein: 20px;
  --ml-symbol-gross: 32px;
  --ml-strich: 1.75;         /* Strichstärke der Symbole in Rastereinheiten */
  --ml-plan: #3972bd;        /* Linienfarbe der Blaupause (= Fokusblau) */
  --ml-plan-raster: rgba(57, 114, 189, 0.08);
  --ml-plan-raster-stark: rgba(57, 114, 189, 0.16);

  /* ── Umbrüche (nur zur Dokumentation: in @media nicht verwendbar) ──
     380px  kleine Telefone
     700px  Telefon → Tablet
     1000px Navigation klappt ein
     1100px Tablet → Desktop
     1600px große Bildschirme */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ml-dauer-kurz: 0s;
    --ml-dauer: 0s;
    --ml-dauer-mittel: 0s;
    --ml-dauer-lang: 0s;
    --ml-dauer-bild: 0s;
    --ml-staffel: 0ms;
    --ml-weg: 0px;
  }
}