/* ERZEUGT AUS src/Gestaltung/tokens.json — NICHT VON HAND BEARBEITEN.
   Neu schreiben: VELTOCARE_GESTALTUNG_SCHREIBEN=1 setzen und
   dotnet test tests/VeltoCare.Web.Tests --filter Erzeugnis fahren. */

@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("schriften/IBMPlexSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("schriften/IBMPlexSans-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans Condensed";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("schriften/IBMPlexSansCondensed-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans Condensed";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("schriften/IBMPlexSansCondensed-SemiBold.woff2") format("woff2");
}

:root {
  --farbe-chrome: #1d1e33;
  --farbe-surface: #ffffff;
  --farbe-surface-sunken: #f8fafc;
  --farbe-surface-hover: #eef3fb;
  --farbe-page: #e8effb;
  --farbe-ink: #111827;
  --farbe-ink-secondary: #374151;
  --farbe-ink-muted: #4b5563;
  --farbe-ink-invers: #ffffff;
  --farbe-state-good: #009b81;
  --farbe-state-warn: #ba7d00;
  --farbe-state-warn-stark: #92400e;
  --farbe-state-bad: #ee4e7f;
  --farbe-state-bad-stark: #c9184a;
  --farbe-state-info: #3b82f6;
  --farbe-accent: #8b5cf6;
  --farbe-arbeit: #2563eb;
  --farbe-arbeit-stark: #1d4ed8;
  --farbe-border: #e2e8f0;
  --farbe-border-strong: #cbd5e1;
  --farbe-control-border: #7c8798;
  --farbe-control-border-hover: #64748b;
  --farbe-chrome-border: #2d2e43;
  --schrift-standard: "IBM Plex Sans";
  --schrift-schmal: "IBM Plex Sans Condensed";
  --grad-kpi: 29px;
  --schnitt-kpi: 600;
  --grad-title: 23px;
  --schnitt-title: 600;
  --grad-section: 18px;
  --schnitt-section: 600;
  --grad-body: 16px;
  --schnitt-body: 400;
  --grad-data: 15px;
  --schnitt-data: 400;
  --grad-micro: 14px;
  --schnitt-micro: 400;
  --abstand-2: 2px;
  --abstand-4: 4px;
  --abstand-8: 8px;
  --abstand-12: 12px;
  --abstand-16: 16px;
  --abstand-24: 24px;
  --abstand-32: 32px;
  --polster-formularbereich: 16px;
  --zeilenhoehe-tabelle: 25px;
  --breite-navigation: 224px;
  --breite-datumsfeld: 124px;
  --breite-feld: 200px;
  --breite-feld-lang: 320px;
  --lesebreite: 72ch;
  --linie-hairline: 1px;
  --fokusring-staerke: 2px;
  --radius-0: 0px;
  --radius-2: 2px;
  --radius-6: 6px;
  --radius-10: 10px;
  --radius-bedienelement: 6px;
  --radius-karte: 10px;
  --radius-meldung: 6px;
  --hoehe-bedienelement: 38px;
  --schnitt-schaltflaeche: 600;
  --erhoehung-schatten: 0 2px 8px rgba(29, 30, 51, 0.12);
  --bewegung-0ms: 0ms;
  --bewegung-100ms: 100ms;
  --bewegung-150ms: 150ms;
}

.polster-formularbereich { padding: var(--polster-formularbereich); }