/* Design-Tokens: BarrierSystems GmbH, Fassung 0.9. Erzeugt von brand-styleguide/build.py. Nicht von Hand ändern, JSON ändern. */
:root {
  color-scheme: light dark;
  --font-display: 'Ardela Edge X03', 'Ardela Edge', 'Open Sans', system-ui, sans-serif;
  --font-text: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display-transform: uppercase;  /* Anzeigeschrift und Grossschreibung gehoeren zusammen */
  --type-display-size: clamp(1.875rem, 1.875rem + 1.25vw, 2.5rem);
  --type-display-line: 1.15;
  --type-display-tracking: 0.01em;
  --type-display-weight: 800;
  --type-h1-size: clamp(1.75rem, 1.75rem + 1.00vw, 2.25rem);
  --type-h1-line: 1.15;
  --type-h1-tracking: 0.01em;
  --type-h1-weight: 800;
  --type-h2-size: clamp(1.5rem, 1.5rem + 0.50vw, 1.75rem);
  --type-h2-line: 1.25;
  --type-h2-tracking: 0.01em;
  --type-h2-weight: 800;
  --type-h3-size: 1.375rem;
  --type-h3-line: 1.25;
  --type-h3-tracking: 0em;
  --type-h3-weight: 700;
  --type-h4-size: 1.125rem;
  --type-h4-line: 1.25;
  --type-h4-tracking: 0em;
  --type-h4-weight: 700;
  --type-fliesstext-size: 1.0625rem;
  --type-fliesstext-line: 1.6;
  --type-fliesstext-tracking: 0em;
  --type-fliesstext-weight: 400;
  --type-klein-size: 0.875rem;
  --type-klein-line: 1.6;
  --type-klein-tracking: 0em;
  --type-klein-weight: 400;
  --type-label-size: 0.8125rem;
  --type-label-line: 1.25;
  --type-label-tracking: 0.08em;
  --type-label-weight: 800;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 40px;
  --space-7: 64px;
  --space-8: 96px;
  --radius: 12px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-slow: 300ms;
  --container: 1320px;
  --tuerkis: #2ab5b9;
  --tiefgruen: #00857b;
  --petrol: #21657f;
  --tuerkis-wash: #e5f6f7;
  --weiss: #ffffff;
  --sand: #e5dfda;
  --tinte: #333333;
  --grau: #656262;
  --linie: #cccccc;
  --linie-weich: #dddddd;
  --warnrot: #990000;
  --graphit: #606160;
  --nacht: #091C24;
  --nachtkopf: #10303A;
  --hellgrau: #e7e9ea;
  --eisblau: #6ecbe3;
}

:root, :root[data-theme="light"] {
  --color-bg: #ffffff;
  --color-surface: #e5dfda;
  --color-text: #333333;
  --color-muted: #656262;
  --color-accent: #21657f;
  --color-accent-soft: #2ab5b9;
  --color-on-accent: #ffffff;
  --color-line: #dddddd;
  --color-line-strong: #cccccc;
}

:root[data-theme="dark"] {
  --color-bg: #091C24;
  --color-surface: #10303A;
  --color-text: #e7e9ea;
  --color-muted: #e7e9ea;
  --color-accent: #6ecbe3;
  --color-accent-soft: #6ecbe3;
  --color-on-accent: #091C24;
  --color-line: #10303A;
  --color-line-strong: #e7e9ea;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #091C24;
    --color-surface: #10303A;
    --color-text: #e7e9ea;
    --color-muted: #e7e9ea;
    --color-accent: #6ecbe3;
    --color-accent-soft: #6ecbe3;
    --color-on-accent: #091C24;
    --color-line: #10303A;
    --color-line-strong: #e7e9ea;
  }
}