/* Design-Tokens. Quelle: design/DESIGN.md. Keine weiteren Farben ergänzen. */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2"); }

:root {
  /* Farben */
  --c-accent: #0F6B5C;        /* Petrol, Begründung in design/DESIGN.md */
  --c-accent-press: #0B5248;  /* nur Hover/Active des Akzents, keine eigene Schmuckfarbe */
  --c-accent-on-dark: #5DBFA9; /* nur Fokusrahmen und Akzent auf dem dunklen Footer */
  --c-on-accent: #FFFFFF;
  --c-text: #1A1A1A;
  --c-black: #000000;
  --c-text-2: #333333;
  --c-text-3: #666666;
  --c-muted: #707070;     /* vorher #777777 (4,48:1 auf Weiß, unter WCAG AA); jetzt 4,95:1 */
  --c-bg: #FFFFFF;
  --c-surface: #F9F9F9;
  --c-surface-2: #F5F5F5;
  --c-surface-3: #FAFAFA;
  --c-border: #E5E5E5;
  --c-footer: #2A2A2A;
  --c-footer-text: #E6E6E6;
  --c-footer-muted: #A6A6A6;
  --c-footer-strong: #FFFFFF;   /* Überschriften, Wortmarke und Hover im Footer */
  --c-footer-border: rgba(255, 255, 255, 0.12);
  --c-error: #B3261E;

  /* Schrift */
  --font: "Montserrat", system-ui, "Helvetica Neue", Arial, sans-serif;
  --fs-h1: clamp(2.25rem, 1.55rem + 2.8vw, 3.5rem);   /* 36–56px */
  --fs-h2: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);  /* 26–36px */
  --fs-h3: 1.25rem;
  --fs-body: 1rem;        /* 16px */
  --fs-small: 0.875rem;   /* 14px */
  --fs-xs: 0.8125rem;     /* 13px */
  --fs-btn: 0.875rem;     /* 14px */
  --lh-tight: 1.15;
  --lh-body: 1.6;

  /* Radien */
  --r-pill: 999px;
  --r-xl: 28px;   /* Hero-Karte, Sektionsflächen */
  --r-lg: 20px;   /* Formular-Karte, Rechner-Panel */
  --r-md: 14px;   /* kleine Karten */
  --r-sm: 10px;   /* Inputs */
  --r-xs: 4px;    /* Markierungen im Text */

  /* Schatten nur für Hero-Karte, Rechner-Panel, Formular-Karte */
  --shadow-focus: 0 0 0 3px rgba(15, 107, 92, 0.2); /* Fokus an Eingabefeldern, Akzent mit 20 % */
  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);

  /* Abstände */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  --container: 1200px;
  --gutter: 16px;
  --form-width: 560px;
}

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