/* Einzige Quelle der Website-Werte. Industrial Precision: Papier, Grünschwarz, ein Akzent. */
@font-face {
  font-family: "IBM Plex Sans Condensed";
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-condensed-latin-700-normal.2d17ba69ba22.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 100 700;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-wght-normal.b2c9031d9fd6.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400-normal.79936b18df9f.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500-normal.b1c8a895f5fd.woff2") format("woff2");
}

:root {
  /* Vorgabe */
  --color-background: #f4f3ef;
  --color-text: #202724;
  --color-surface: #ffffff;
  --color-muted: #788580; /* nur Linien und Flächen: 3,5:1 auf Papier, zu wenig für Text */
  --color-border: #d5dad5;
  --color-accent: #c65e38; /* nur Flächen und Linien: 3,7:1 auf Papier, zu wenig für Text */
  --color-dark: #191d1b;

  /* Ergänzt, damit Text WCAG 2.2 AA erreicht */
  --color-text-2: #4f5a55;
  --color-accent-text: #9e4524;
  --color-accent-on-dark: #e8956f;
  --color-on-dark: #f4f3ef;
  --color-on-dark-2: #b9c1bc;
  --color-border-dark: #414a45;
  --color-band: #e8e7e2;
  --color-ok: #0b6b4f;
  --color-error: #9f1239;
  --color-error-bg: #fdf0f3;

  --font-display: "IBM Plex Sans Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --text-label: 0.75rem;
  --text-small: 0.875rem;
  --text-body: 1.0625rem;
  --text-lead: clamp(1.125rem, 1.5vw, 1.3125rem);
  --text-h3: clamp(1.625rem, 2.5vw, 2.25rem);
  --text-h2: clamp(2.25rem, 5.4vw, 4.75rem);
  --text-display: clamp(1.75rem, 9.5vw, 5rem);

  --gutter: 16px;
  --gap: 24px;
  --page: 1520px;
  --section: clamp(64px, 9vw, 136px);
  --radius: 2px;
  --touch: 44px;
  --transition: 120ms ease-out;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

@media (min-width: 1200px) {
  :root { --gutter: 40px; }
}

@media (min-width: 1280px) {
  :root { --text-display: clamp(3.5rem, 4.85vw, 5.5rem); }
}