/* Amperatec · aus tokens.json erzeugt von design/werkzeuge/tokens_css.py. Nicht von Hand ändern. */

@font-face { font-family: "Schibsted Grotesk"; src: url("fonts/schibsted-grotesk.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
  --bg: #f9fafc;
  --surface: #ffffff;
  --surface-inset: #fbfcfd;
  --surface-2: #f3f4f7;
  --surface-3: #eef0f4;
  --line: #eaecf0;
  --line-2: #e4e6eb;
  --line-strong: #d3d6dd;
  --subtle: #bbbec4;
  --line-control: #868a94;
  --ink: #060712;
  --ink-hover: #1a1c2e;
  --ink-2: #4b505b;
  --muted: #666a75;
  --accent: #0055ff;
  --accent-hover: #0043d9;
  --accent-soft: #e7f1ff;
  --accent-soft-hover: #e0ebff;
  --accent-line: #b7d2ff;
  --on-accent: #ffffff;
  --surface-dark: var(--ink);
  --surface-dark-gradient: radial-gradient(130% 130% at 50% -10%, #171d31 0%, #0b0e1d 60%, #060712 100%);
  --surface-dark-2: #0d0e19;
  --line-dark: #1f202a;
  --line-dark-strong: rgba(255, 255, 255, 0.18);
  --on-ink: #ffffff;
  --on-ink-2: #dbdee5;
  --on-ink-muted: #a0a4b0;
  --accent-on-ink: #6ea1ff;
  --accent-cell-on-ink: #051338;
  --on-accent-cell: #cddfff;
  --ok: #1d7d3e;
  --ok-soft: #e6fae9;
  --alert: #be222a;
  --alert-soft: #ffefed;
  --trace-1: var(--ink);
  --trace-2: #00868c;
  --plot-grid: var(--line);
  --tag-bg: var(--surface-3);
  --ink-a06: rgba(6, 7, 18, 0.06);
  --ink-a07: rgba(6, 7, 18, 0.07);
  --ink-a10: rgba(6, 7, 18, 0.10);
  --ink-a15: rgba(6, 7, 18, 0.15);
  --scrim: rgba(6, 7, 18, 0.55);
  --glass: rgba(255, 255, 255, 0.55);
  --glass-solid: rgba(255, 255, 255, 0.85);
  --glass-panel: rgba(255, 255, 255, 0.95);
  --accent-a15: rgba(0, 85, 255, 0.15);
  --drawing-fill: #e8ebf2;
  --drawing-key: #d5d8e1;
  --drawing-screen: #262a31;
  --drawing-glyph: #e5e8f0;
  --drawing-dim: #afb2ba;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-44: 44px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-88: 88px;
  --space-112: 112px;
  --space-120: 120px;
  --gutter: 8px;
  --section-y: 32px;
  --header-h: 100px;
  --header-bar: 64px;
  --wrap: 1480px;   /* 1360 → 1480 (Leo, 01.10.2026): schmalere Seitenränder */
  --measure: 460px;
  --measure-wide: 640px;
  --radius-pill: 9999px;
  --radius-footer: 22px;
  --radius-card: 32px;
  --radius-panel: 28px;
  --radius-table: 24px;
  --radius-card-sm: 22px;
  --radius-inner: 20px;
  --radius-item: 16px;
  --radius-tile: 14px;
  --radius-control: 12px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --shadow-card: 0 1px 0 rgba(6, 7, 18, 0.02), 0 40px 80px -52px rgba(6, 7, 18, 0.20);
  --shadow-card-geteilt: 0 1px 0 rgba(6, 7, 18, 0.02), 0 40px 80px -48px rgba(6, 7, 18, 0.20);
  --shadow-card-dark: 0 40px 90px -50px rgba(6, 7, 18, 0.5);
  --shadow-window: 0 24px 50px -34px rgba(6, 7, 18, 0.25);
  --shadow-window-lg: 0 30px 60px -40px rgba(6, 7, 18, 0.28);
  --shadow-header: 0 0 0 1px rgba(6, 7, 18, 0.06), 0 8px 30px rgba(6, 7, 18, 0.07);
  --shadow-panel: 0 24px 60px -12px rgba(6, 7, 18, 0.18);
  --shadow-modal: 0 30px 80px -20px rgba(6, 7, 18, 0.40);
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-short: (min-width: 1024px) and (max-height: 880px);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-reveal: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-item: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-pop: cubic-bezier(0.34, 1.7, 0.5, 1);
  --dur-fast: 150ms;
  --dur-ui: 200ms;
  --dur-item: 280ms;
  --dur-state: 300ms;
  --dur-pop: 450ms;
  --dur-header: 500ms;
  --dur-reveal: 700ms;
  --dur-draw: 1200ms;
  --dur-takt: 2500ms;
  --stagger-chip: 50ms;
  --stagger-num: 60ms;
  --stagger-row: 450ms;
  --stagger-step: 700ms;
  --font-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", "Schibsted Grotesk", ui-monospace, monospace;
  --text-display: 40px;
  --text-display-2: 36px;
  --text-h2: 32px;
  --text-h2-s: 30px;
  --text-kpi: 34px;
  --text-kennwert-text: 14px;
  --text-stat: 24px;
  --text-h3-l: 18px;
  --text-h3: 16px;
  --text-lead-xl: 18px;
  --text-lead-l: 16px;
  --text-lead: 16px;
  --text-lead-dunkel: 16px;
  --text-body: 16px;
  --text-title: 15px;
  --text-title-s: 14px;
  --text-small: 13px;
  --text-mittel: 14px;
  --text-nav: 15px;
  --text-nav-menu: 22px;
  --text-button: 14px;
  --text-button-l: 16px;
  --text-eyebrow: 12px;
  --text-plakette: 12px;
  --text-footer-head: 13px;
  --text-label: 11px;
  --text-micro: 10px;
  --text-schritt: 12px;
  --text-ui-title: 15px;
  --text-ui-row: 14px;
  --text-ui-sub: 12px;
  --text-ui-label: 11px;
  --text-ui-window: 11px;
  --text-ui-status: 11px;
  --text-data: 12px;
  --text-value: 13px;
  --text-code: 13px;
  --text-kpi-mono: 22px;
  --text-axis: 10px;
}

@media (min-width: 640px) {
  :root {
    --gutter: 24px;
    --section-y: 44px;
    --radius-footer: 28px;
    --text-display: 60px;
    --text-display-2: 52px;
    --text-h2: 40px;
    --text-h2-s: 36px;
    --text-kpi: 46px;
    --text-kennwert-text: 15px;
    --text-h3-l: 20px;
    --text-lead-xl: 22px;
    --text-lead-l: 18px;
    --text-lead-dunkel: 17px;
    --text-mittel: 15px;
    --text-button: 15px;
    --text-button-l: 18px;
  }
}

@media (min-width: 768px) {
  :root {
    --radius-footer: 40px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
    --section-y: 56px;
    --text-display: clamp(56px, 5vw, 72px);
    --text-display-2: 64px;
    --text-h2: 44px;
    --text-h2-s: 40px;
    --text-kpi: 64px;
    --text-lead-xl: 24px;
  }
}

.display { font-family: var(--font-sans); font-size: var(--text-display); line-height: 1.04; font-weight: 800; letter-spacing: -0.03em; }
.display-2 { font-family: var(--font-sans); font-size: var(--text-display-2); line-height: 1.03; font-weight: 800; letter-spacing: -0.03em; }
.h2 { font-family: var(--font-sans); font-size: var(--text-h2); line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; }
.h2-s { font-family: var(--font-sans); font-size: var(--text-h2-s); line-height: 1.07; font-weight: 800; letter-spacing: -0.03em; }
.kpi { font-family: var(--font-sans); font-size: var(--text-kpi); line-height: 0.95; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.kennwert-text { font-family: var(--font-sans); font-size: var(--text-kennwert-text); line-height: 1.4; font-weight: 500; }
.stat { font-family: var(--font-sans); font-size: var(--text-stat); line-height: 1; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.h3-l { font-family: var(--font-sans); font-size: var(--text-h3-l); line-height: 1.3; font-weight: 800; letter-spacing: -0.02em; }
.h3 { font-family: var(--font-sans); font-size: var(--text-h3); line-height: 1.5; font-weight: 800; letter-spacing: -0.01em; }
.lead-xl { font-family: var(--font-sans); font-size: var(--text-lead-xl); line-height: 1.5; font-weight: 400; }
.lead-l { font-family: var(--font-sans); font-size: var(--text-lead-l); line-height: 1.55; font-weight: 400; }
.lead { font-family: var(--font-sans); font-size: var(--text-lead); line-height: 1.55; font-weight: 400; }
.lead-dunkel { font-family: var(--font-sans); font-size: var(--text-lead-dunkel); line-height: 1.55; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.6; font-weight: 400; }
.title { font-family: var(--font-sans); font-size: var(--text-title); line-height: 1.5; font-weight: 700; }
.title-s { font-family: var(--font-sans); font-size: var(--text-title-s); line-height: 1.5; font-weight: 700; }
.small { font-family: var(--font-sans); font-size: var(--text-small); line-height: 1.45; font-weight: 400; }
.mittel { font-family: var(--font-sans); font-size: var(--text-mittel); line-height: 1.5; font-weight: 400; }
.nav { font-family: var(--font-sans); font-size: var(--text-nav); line-height: 1.5; font-weight: 600; }
.nav-menu { font-family: var(--font-sans); font-size: var(--text-nav-menu); line-height: 1.5; font-weight: 600; }
.button { font-family: var(--font-sans); font-size: var(--text-button); line-height: 1.5; font-weight: 600; }
.button-l { font-family: var(--font-sans); font-size: var(--text-button-l); line-height: 1.5; font-weight: 600; }
.eyebrow { font-family: var(--font-sans); font-size: var(--text-eyebrow); line-height: 1.5; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.plakette { font-family: var(--font-sans); font-size: var(--text-plakette); line-height: 1.5; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.footer-head { font-family: var(--font-sans); font-size: var(--text-footer-head); line-height: 1.5; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.label { font-family: var(--font-sans); font-size: var(--text-label); line-height: 1.5; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.micro { font-family: var(--font-sans); font-size: var(--text-micro); line-height: 1.5; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.schritt { font-family: var(--font-sans); font-size: var(--text-schritt); line-height: 1.5; font-weight: 600; }
.ui-title { font-family: var(--font-sans); font-size: var(--text-ui-title); line-height: 1.375; font-weight: 800; letter-spacing: -0.01em; }
.ui-row { font-family: var(--font-sans); font-size: var(--text-ui-row); line-height: 1.45; font-weight: 600; }
.ui-sub { font-family: var(--font-sans); font-size: var(--text-ui-sub); line-height: 1.4; font-weight: 400; }
.ui-label { font-family: var(--font-sans); font-size: var(--text-ui-label); line-height: 1.5; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ui-window { font-family: var(--font-sans); font-size: var(--text-ui-window); line-height: 1.5; font-weight: 400; letter-spacing: 0.06em; }
.ui-status { font-family: var(--font-sans); font-size: var(--text-ui-status); line-height: 1.5; font-weight: 600; }
.data { font-family: var(--font-mono); font-size: var(--text-data); line-height: 1.45; font-weight: 400; }
.value { font-family: var(--font-mono); font-size: var(--text-value); line-height: 1.3; font-weight: 500; font-variant-numeric: tabular-nums; }
.code { font-family: var(--font-mono); font-size: var(--text-code); line-height: 1.5; font-weight: 400; }
.kpi-mono { font-family: var(--font-mono); font-size: var(--text-kpi-mono); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.axis { font-family: var(--font-mono); font-size: var(--text-axis); line-height: 1.2; font-weight: 400; }