/* =========================================================================
   MEILENOPTIMIEREN — mo-tools.css: Tokens & Basis-Komponenten für MO Tools
   =========================================================================
   Stand: 27.08.2026 (angeglichen an base-tokens.css im Ordner
   "Meilenoptimieren Designsystem"). Bis 27.08.2026 unter dem Namen
   design-tokens.css bekannt — umbenannt, weil sie längst nicht nur Tokens
   enthält, sondern auch fertige Komponenten-Regeln, und weil der Name
   damit zum Muster der übrigen, nach Oberfläche benannten Dateien
   (brand-moluxe.css, site-meilenoptimieren.css) passt.

   Diese Datei ist die gemeinsame, produktiv genutzte Basis für alle MO-Tools
   (aktuell: MO Kreditkarten-Meilenrechner, MO Entfernungsrechner; weitere
   Tools sind geplant). Jedes Tool bindet eine eigene Kopie dieser Datei ein
   (lokal per relativem Pfad, auf dem Server unter /mo-tools/mo-tools.css)
   — bei Änderungen daher IMMER an dieser Datei ansetzen und in alle
   Tool-Ordner sowie deren "Deployment Version" kopieren, nicht einzeln in
   den Tools nachpflegen.

   Enthält gegenüber base-tokens.css zusätzlich: Typografie-Skala (Größen,
   Schriftschnitte, Zeilenhöhen), eine Button-Token-Indirektion
   (--btn-primary-bg/-text usw., u. a. für aktive Toggle-/Filter-Zustände
   außerhalb der .btn-Klassen genutzt), Chart-Typografie/-Exportmaße sowie
   Basis-Komponenten (.btn, .card, .badge). Farben, Radius, Abstände,
   Schatten, Fokus-Ring und Chart-Palette sind identisch mit base-tokens.css
   — Werte hier bewusst nicht per @import übernommen, damit diese Datei
   weiterhin als einzelne, eigenständige Kopie pro Tool funktioniert. Seit
   dem 27.08.2026 auch die Token-NAMEN für Hover-Zustände an base-tokens.css
   angeglichen (--role-primary-hover/--role-secondary-hover) — die
   --btn-*-bg-hover-Tokens referenzieren sie, statt eigene Werte zu
   duplizieren.

   Bugfix 27.08.2026: .btn-outline hatte nie einen :hover-Zustand (anders
   als .btn-primary/.btn-secondary) — im Kreditkarten-Meilenrechner sichtbar
   am reaktionslosen "Mehr Infos"-Button. Ergänzt: .btn-outline:hover mit
   var(--surface-muted), wie es der Entfernungsrechner schon lokal in
   seinem eigenen <style>-Block hatte.

   Architektur-Hinweis: Diese Datei ist der einzige produktiv genutzte Weg
   für MO-Tools (Einzeldatei, pro Tool-Ordner dupliziert). Ein früheres
   Verlinkungsmodell (base-tokens.css + tools.css, zwei <link>-Tags) ist
   seit 27.08.2026 archiviert (Archiv/tools.css) — es deckte inhaltlich
   nichts ab, was hier nicht auch steht, und zwei Dateien mit denselben
   Werten von Hand synchron zu halten hatte bereits zu einem echten
   Auseinanderlaufen der Werte geführt. Siehe README.md im Ordner
   "Meilenoptimieren Designsystem" für die Gesamtübersicht.

   Entscheidungen vom 27.08.2026 (siehe base-tokens.css für Details):
   - Gold ist ausschließlich MO Luxe vorbehalten. MO-Tools verwenden kein
     Gold mehr — weder als Rolle (--role-accent) noch als Dark-Mode-CTA.
     Der bisherige Dark-Mode-Primärbutton nutzte Gold als High-Contrast-CTA
     (Navy auf dunklem Grund liegt nur bei 1,47:1); er zeigt jetzt
     stattdessen einen hellen/weißen Hintergrund mit Navy-Text (12,43:1).
   - Kein MO-Luxe-Markenumschalter mehr (der frühere data-brand="moluxe"-
     Umschalter entfällt ersatzlos; Tools sind immer Teil von
     meilenoptimieren).
   - Sekundär-Button (Orange): Weiß-Text als Standard (~2,52:1, bewusst
     unter WCAG AA) statt des bisherigen "Navy-Text auf Orange" (4,93:1).
   - Fließtextfarbe von Überschriften-Navy getrennt: neues Token
     --text-body für normalen Text, --text-primary bleibt den Überschriften
     vorbehalten (vorher liefen beide auf Navy).
   - Schatten-Werte etwas weicher (siehe --shadow-sm/-md unten).
   ========================================================================= */

:root {
  color-scheme: light;

  /* ---- Markenfarben (roh, nur für Sonderfälle/Illustration nutzen) ---- */
  --brand-navy:   #25325C;
  --brand-orange: #E88E20;

  /* ---- Rollen ---- */
  --role-primary:   var(--brand-navy);
  --role-secondary: var(--brand-orange);
  --role-primary-hover:   #1a2547;  /* Namensparität zu base-tokens.css */
  --role-secondary-hover: #d47f10;  /* Namensparität zu base-tokens.css */

  /* ---- Flächen / Hintergründe ---- */
  --surface-page:   #ffffff;
  --surface-card:   #f7f8fb;   /* leicht navy-getönt statt reinweiß */
  --surface-muted:  #eef0f5;
  --border:         #dde1ea;
  --border-strong:  #c3c9d8;

  /* ---- Text (alle Werte ≥ 4,5:1 auf --surface-page geprüft) ----
     --text-primary: Überschriften (12,4:1 auf Weiß).
     --text-body: normaler Fließtext — seit 27.08.2026 bewusst vom
     Überschriften-Navy getrennt (neutraleres Dunkelgrau, 12,6:1 auf Weiß). */
  --text-primary:   var(--brand-navy);
  --text-body:      #333333;
  --text-secondary: #52607d;            /* 6,3:1 auf Weiß */
  --text-muted:     #64708c;            /* 4,95:1 auf Weiß — Minimum, nicht weiter aufhellen */
  --text-on-dark:   #ffffff;            /* für Flächen in --role-primary */

  /* ---- Links ---- */
  --link:           var(--brand-navy);
  --link-hover:     #1a2547;
  --focus-ring:      #7c93d9;

  /* ---- Buttons / CTAs ---- */
  --btn-primary-bg:      var(--role-primary);
  --btn-primary-text:    #ffffff;                 /* 12,4:1 */
  --btn-primary-bg-hover: var(--role-primary-hover);

  --btn-secondary-bg:    var(--role-secondary);
  --btn-secondary-text:  #ffffff;                 /* ~2,52:1 — bewusste Marken-Entscheidung */
  --btn-secondary-bg-hover: var(--role-secondary-hover);

  --btn-outline-border:  var(--role-primary);
  --btn-outline-text:    var(--role-primary);

  /* ---- Marken-Variante "Orange auf Weiß" ----
     Für dekorative/sekundäre Buttons statt für kritische Kernaktionen;
     fest auf Orange/Weiß codiert (nicht theme-abhängig). */
  --btn-orange-outline-bg:     #ffffff;
  --btn-orange-outline-text:   var(--brand-orange);  /* 2,52:1 — unter WCAG AA */
  --btn-orange-outline-border: var(--brand-orange);

  /* ---- Status (bewusst getrennt von der Chart-Palette, feste Bedeutung) --- */
  --status-success: #1a7f37;  /* ≥ 4.5:1 auf Weiß */
  --status-warning: #a15c00;  /* ≥ 4.5:1 auf Weiß, dunkler als Marken-Orange nötig für Text */
  --status-danger:  #c2412d;  /* ≥ 4.5:1 auf Weiß */

  /* ---- Typografie ----
     Blog-Vorgabe: Open Sans, Helvetica, Arial, Sans Serif.
     Für Diagramme/Excel-Grafiken separat: Helvetica, Überschrift 16px,
     Achsen/Legende 12px (exakte Vorgabe, siehe --chart-* unten). */
  --font-body:    'Open Sans', Helvetica, Arial, sans-serif;
  --font-heading: 'Open Sans', Helvetica, Arial, sans-serif;
  --font-mono:    'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  --weight-regular:  400;
  --weight-semibold: 600;
  --weight-bold:     700;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --line-height-tight: 1.2;
  --line-height-base:  1.5;

  /* ---- Chart-Typografie (exakte Vorgabe aus Farben_und_Formate.docx) --- */
  --chart-font:        Helvetica, Arial, sans-serif;
  --chart-heading-size: 16px;
  --chart-axis-size:    12px;
  --chart-export-web-w:      20cm;
  --chart-export-web-h:      10cm;
  --chart-export-social-w:   20cm;
  --chart-export-social-h:   20cm;

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- Radius / Schatten ---- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(37, 50, 92, 0.10);
  --shadow-md: 0 8px 24px rgba(37, 50, 92, 0.14);
  --shadow-lg: 0 12px 32px rgba(37, 50, 92, 0.18);

  /* ---- Kategoriale Chart-Palette (validiert: scripts/validate_palette.js
     der dataviz-Skill, Modus light, gegen Fläche #fcfcfb, "all-pairs"-Prüfung
     — passend für Karten/Streudiagramme, bei denen mehrere Serien gleich-
     zeitig sichtbar sind, wie in den Meilenoptimieren-Kartentools). Alle 8
     Slots bestehen die all-pairs-Prüfung; Slot 4 wurde am 17.08.2026 von
     einem Gelbton (zu nah an Orange, Slot 2) auf ein dunkles Terrakotta
     verschoben — Trennung primär über Helligkeit statt Farbton, da Orange/
     Gelb/Grün unter Rot-Grün-Sehschwäche auf derselben Verwechslungsachse
     liegen. Slot 1 = markenabgeleitetes Navy-Blau (aufgehellt/gesättigt, da
     reines #25325C zu dunkel/entsättigt für Diagrammfarben ist). Slot 2 =
     Marken-Orange unverändert. Gold ist kein Chart-Slot (ohnehin
     MO-Luxe-exklusiv). ---- */
  --chart-1: #455dad; /* Blau (Navy-Familie) */
  --chart-2: #E88E20; /* Orange (Marke, exakt) */
  --chart-3: #1baf7a; /* Aqua */
  --chart-4: #813a00; /* Terrakotta (bis 17.08.2026: Gelb, zu nah an Orange) */
  --chart-5: #e889ca; /* Magenta */
  --chart-6: #008300; /* Grün */
  --chart-7: #8992fe; /* Violett */
  --chart-8: #e34948; /* Rot */
}

/* ============================= Dunkel-Modus ============================= */
:root[data-theme="dark"] {
  color-scheme: dark;

  --surface-page:  #0b1331;  /* markenabgeleitetes Dunkel-Navy, kein neutrales Grau */
  --surface-card:  #131c3a;
  --surface-muted: #1a2542;
  --border:        #2a3660;
  --border-strong: #3a4878;

  --text-primary:   #ffffff;
  --text-body:      #e4e7f1;  /* 15,9:1 — helles, neutrales Pendant zu --text-body */
  --text-secondary: #b7c0dd;  /* 10,1:1 */
  --text-muted:     #8590b3;  /* 5,76:1 */

  --link:       #9fb2e8;
  --link-hover: #c3d0f0;
  --focus-ring: #6681d4;

  /* Primärbutton: Ersatz für den bisherigen Gold-CTA, hell statt farbig,
     damit er sich klar vom Orange-Sekundärbutton abhebt (12,43:1). */
  --btn-primary-bg:       #eaedf5;
  --btn-primary-text:     var(--brand-navy);
  --btn-primary-bg-hover: #ffffff;

  --btn-secondary-bg:      var(--brand-orange);
  --btn-secondary-text:    #ffffff;
  --role-secondary-hover:   #f2a24a;  /* Dark-Mode-Variante, gleicher Tokenname wie oben */
  --btn-secondary-bg-hover: var(--role-secondary-hover);

  --btn-outline-border: #6681d4;
  --btn-outline-text:   #ffffff;

  --status-success: #4ade80;
  --status-warning: #eab308;
  --status-danger:  #f87171;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);

  /* Chart-Palette Dunkel (separat validiert gegen Fläche #0b1331,
     all-pairs-Prüfung, Stand 17.08.2026). 6 von 8 Slots bestehen alle
     Prüfungen vollständig; zwei Randfälle bleiben unter der strengen
     Normalsicht-Schwelle (Slot 5↔3 und Slot 8↔2, ΔE ~9-10 statt Ziel 15) —
     im Tool durch durchgängige Textbeschriftung (IATA-Codes je Route,
     Programmnamen je Reihe) abgefedert. */
  --chart-1: #6681d4;
  --chart-2: #c96f00;
  --chart-3: #199e70;
  --chart-4: #1e7ca1; /* Stahlblau (bis 17.08.2026: Gelb, zu nah an Orange) */
  --chart-5: #c8508e;
  --chart-6: #127812;
  --chart-7: #7a3fc2;
  --chart-8: #e66767;
}

/* ============================ Basis-Elemente ============================= */
body {
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-height-base);
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
}
a { color: var(--link); }
a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: var(--weight-semibold);
  font-size: var(--text-sm); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); border: 1px solid transparent;
  cursor: pointer; transition: background-color .15s ease;
}
.btn-primary   { background: var(--btn-primary-bg);   color: var(--btn-primary-text); }
.btn-primary:hover   { background: var(--btn-primary-bg-hover); }
.btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); }
.btn-secondary:hover { background: var(--btn-secondary-bg-hover); }
.btn-outline   { background: transparent; color: var(--btn-outline-text); border-color: var(--btn-outline-border); }
.btn-outline:hover { background: var(--surface-muted); }

/* Marken-Variante "Orange auf Weiß" — siehe Hinweis bei den Variablen
   weiter oben (unter WCAG AA, bewusst freigegeben). */
.btn-orange-outline  { background: var(--btn-orange-outline-bg); color: var(--btn-orange-outline-text); border-color: var(--btn-orange-outline-border); }
.btn-orange-outline:hover { background: #fdf3e7; }

.card {
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.badge {
  display: inline-flex; align-items: center; font-size: var(--text-xs);
  font-weight: var(--weight-semibold); padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-muted); color: var(--text-secondary);
}