/* Design System — generated from tokens.json */
:root, [data-theme="light"] {
  --surface: #ffffff; /* Seitenhintergrund. Dark = Sturm, der Himmel hinter dem Logo (Median des Banners). */
  --surface-tint: #f2f6fa; /* Abgesetzte Abschnitte im Wechsel mit surface, Zebra-Zeilen, Eingabefelder auf dunklem Grund. */
  --surface-raised: #ffffff; /* Karten, Header-Leiste, Popover. Auf Light immer mit line-Rahmen, auf Dark hebt sich die Fläche selbst ab. */
  --line: #d6dee7; /* Haarlinien, Kartenrahmen, Tabellenlinien. Nur Struktur, trägt keine Bedeutung. */
  --line-strong: #7d8b99; /* Rahmen von Eingabefeldern und Checkboxen (mindestens 3:1 auf surface und surface-tint in beiden Themes). */
  --ink: #0e1e2d; /* Fließtext und Überschriften auf surface, surface-tint und surface-raised. Light = Sturm-Dunkel, Dark = das Weiß des Wortmarken-Balkens. */
  --ink-muted: #4f6070; /* Zweitrangiger Text, Bildunterschriften, Metadaten auf allen drei surfaces (Light 6,5:1, Dark 7,8:1). Dark = das Grau der Zeile TRANSPORT | KURIER | SPEDITION. */
  --brand: #34a4f4; /* Nordway-Azur, die Fläche des N im Logo. Akzente, Icons und hervorgehobene Wörter auf dunklen Flächen (6,2:1 auf surface Dark). Auf hellen Flächen nur dekorativ (Linien, Flächen) – als Text oder bedeutungstragendes Icon dort link verwenden. */
  --brand-deep: #0474c4; /* Schattenton des Logo-Blaus. Füllung des Primär-Buttons im Light-Theme (weißer Text 4,9:1), Trennlinie neben LOGISTICS, Verlaufsende in Grafiken. */
  --brand-soft: #e4f2fd; /* Getönter Hintergrund hinter link-Text: Badges, Icon-Kacheln der Service-Karten, markierte Zeilen. */
  --action: #0474c4; /* Füllung des Primär-Buttons und aktiver Steuerelemente. Text darauf ist on-action, nie hart Weiß. */
  --action-hover: #045ca4; /* Primär-Button bei Hover und gedrückt. */
  --on-action: #ffffff; /* Beschriftung und Icons auf action und action-hover (Light 4,9:1, Dark 6,2:1). */
  --link: #045ca4; /* Textlinks, Badge-Text und bedeutungstragende Icons auf surface, surface-tint, surface-raised und brand-soft (Light 6,8:1 auf Weiß, Dark 6,2:1 auf Sturm). */
  --focus: var(--action); /* Farbe des Fokusrings (shadow-Token focus-ring): 2 px Lücke in Seitenfarbe, dann 2 px durchgehend in dieser Farbe – mindestens 3:1 auf jeder surface. */
  --danger: #b3261e; /* Fehlertext unter Eingabefeldern und Fehlerrahmen, auf surface, surface-tint und danger-soft. Immer mit Wort oder Icon, nie Farbe allein. */
  --danger-soft: #fdecea; /* Hintergrund einer Fehlermeldung hinter danger-Text. */
  --success: #0f766e; /* Bestätigung („Anfrage gesendet“) als Text und Icon auf surface, surface-tint und success-soft. Bewusst Blaugrün statt Grün, damit es sich von danger auch ohne Farbsehen unterscheidet. */
  --success-soft: #e2f7f4; /* Hintergrund einer Bestätigung hinter success-Text. */
  --shadow-sm: 0 1px 2px #0e1e2d14, 0 1px 3px #0e1e2d1f; /* Karten bei Hover, Eingabefelder mit Fokus. */
  --shadow-md: 0 6px 16px -4px #0e1e2d29, 0 2px 4px #0e1e2d14; /* Mobile Navigation, Popover, klebende Kontaktleiste. */
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #0474c4; /* Tastaturfokus auf jedem interaktiven Element (box-shadow, folgt dem Radius): 2 px Lücke in Seitenfarbe, dann 2 px focus. */
}
[data-theme="dark"] {
  --surface: #0e1e2d;
  --surface-tint: #0a1826;
  --surface-raised: #17293b;
  --line: #2a3f54;
  --line-strong: #6f8398;
  --ink: #f3f4f8;
  --ink-muted: #a5b1bf;
  --brand-soft: #0f2f4a;
  --action: #34a4f4;
  --action-hover: #5fb6f6;
  --on-action: #0e1e2d;
  --link: #34a4f4;
  --focus: var(--action);
  --danger: #ff8f85;
  --danger-soft: #4a1512;
  --success: #5eead4;
  --success-soft: #0d3b36;
  --shadow-sm: 0 1px 3px #00000080;
  --shadow-md: 0 10px 24px -6px #000000b3;
  --focus-ring: 0 0 0 2px #0e1e2d, 0 0 0 4px #34a4f4;
}
:root {
  --space-1: 4px; /* Abstand Icon zu Beschriftung, Lücke im Fokusring. */
  --space-2: 8px; /* Innenabstand von Badges, Abstand Label zu Eingabefeld. */
  --space-3: 12px; /* Zwischen zusammengehörigen Zeilen, vertikaler Innenabstand von Buttons und Feldern. */
  --space-4: 16px; /* Horizontaler Innenabstand von Buttons, Abstand zwischen Karten auf Mobil, Seitenrand auf Mobil. */
  --space-6: 24px; /* Innenabstand von Karten, Abstand zwischen Karten, Seitenrand ab Tablet. */
  --space-8: 32px; /* Abstand zwischen Überschrift und Inhalt eines Abschnitts, Abstand zwischen Formularblöcken. */
  --space-12: 48px; /* Vertikaler Innenabstand von Abschnitten auf Mobil, Abstand Hero-Text zu Buttons. */
  --space-16: 64px; /* Vertikaler Innenabstand von Abschnitten ab Tablet. */
  --space-24: 96px; /* Vertikaler Innenabstand von Hero und Abschnitten auf Desktop. */
  --radius-sm: 4px; /* Eingabefelder, Checkboxen, kleine Kacheln. */
  --radius-md: 6px; /* Buttons, Icon-Kacheln. */
  --radius-lg: 8px; /* Karten, Bildrahmen, Hinweiskästen. */
  --radius-pill: 9999px; /* Badges und Verfügbarkeits-Chips. */
  --container-max: 1120px; /* Maximale Breite des Seiteninhalts, zentriert, Seitenrand space-4 (Mobil) bis space-6. */
  --content-max: 720px; /* Maximale Breite laufender Textblöcke (Lead, Absätze, Formulare). */
  --font-display: "Russo One", "Arial Black", Impact, sans-serif;
  --font-label: Michroma, Sora, sans-serif;
  --font-sans: Sora, "Segoe UI", system-ui, sans-serif;
  --text-display-xl: 400 56px/60px var(--font-display); /* H1 im Hero. Höchstens zwei Zeilen. Auf Mobil auf 36px/40px verkleinern. */
  --text-display-lg: 400 36px/42px var(--font-display); /* H2 der Seitenabschnitte. */
  --text-display-md: 400 24px/30px var(--font-display); /* H3, große Zahlen (Uhrzeiten in der Verfügbarkeitstabelle), Kartentitel mit Gewicht. */
  --text-label-lg: 400 13px/20px var(--font-label); /* Eyebrow über Überschriften, Leistungs-Zeile im Hero und Footer. Trennzeichen ist der senkrechte Strich mit je zwei Leerzeichen. */
  --text-label-sm: 400 11px/16px var(--font-label); /* Badges, Tabellenköpfe, Wochentag über der Uhrzeit. */
  --text-title: 600 22px/28px var(--font-sans); /* Kartentitel, Formularüberschriften, H3 ohne Display-Gewicht. */
  --text-lead: 400 19px/30px var(--font-sans); /* Einleitungsabsatz unter H1 und H2. Höchstens drei Zeilen. */
  --text-body: 400 16px/26px var(--font-sans); /* Fließtext, Listen, Formularfelder. Zeilenlänge 60–75 Zeichen (content-max). */
  --text-body-strong: 600 16px/26px var(--font-sans); /* Hervorhebungen im Fließtext, Begriffe in Definitionslisten, Tabellenwerte. */
  --text-small: 400 14px/22px var(--font-sans); /* Nebentext, Hinweise unter Feldern, Footer-Zeilen. */
  --text-caption: 500 12px/16px var(--font-sans); /* Bildunterschriften, Metadaten, Rechtliches im Footer. */
  --text-button: 600 15px/20px var(--font-sans); /* Beschriftung aller Buttons und Navigationslinks. */
}
.display-xl {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 60px;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.display-lg {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 42px;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.display-md {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.label-lg {
  font-family: var(--font-label);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0.3em;
}
.label-sm {
  font-family: var(--font-label);
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.24em;
}
.title {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.lead {
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-strong {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: 0;
}
.small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.button {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
@font-face {
  font-family: "Russo One";
  src: url("fonts/RussoOne-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Michroma";
  src: url("fonts/Michroma-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("fonts/Sora-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}