/* Design-Tokens – einzige Quelle für Farben, Schrift, Abstände.
   Akzentfarbe tauschen: nur --accent ändern (Alternativen unten). */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url("../assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url("../assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url("../assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2")}

:root{
  /* Flächen */
  --paper:#F7F4EC;          /* Grundfläche (Papier statt Bildschirmweiß) */
  --paper-2:#F1EDE2;        /* abgesetzte Bänder */
  --paper-3:#F6F3EA;        /* Mini-Visuals */
  --surface:#FFFEFB;        /* Karten */
  --surface-2:#FAF8F2;      /* Tabellenkopf */
  --line:#DAD4C4;
  --line-soft:#EBE6D8;
  --line-strong:#C9C2AE;
  --line-input:#A89F86;

  /* Text */
  --ink:#23282B;            /* Graphit statt Schwarz */
  --ink-2:#3B4145;
  --muted:#5A6064;          /* 5,7:1 auf --paper */

  /* Akzent (eine Farbe) – Alternativen: #2D5E3E Waldgrün, #8A5A00 Ocker */
  --accent:#135E66;         /* Petrol */
  --accent-hover:#0E474D;
  --on-accent:#FFFFFF;

  /* Markierung (Erkennungselement) */
  --mark:#F4DC8A;
  --mark-row:rgba(244,220,138,.5);

  /* Status – tragen Bedeutung, nie dekorativ; immer mit Text/Symbol */
  --st-open-bg:#ECE9E0;   --st-open-fg:#3B4145;   --st-open-line:#CFC9B8;
  --st-check-bg:#F9EBB8;  --st-check-fg:#5E4500;
  --st-done-bg:#DDEBE0;   --st-done-fg:#25593A;
  --st-note-bg:#E3EDF3;   --st-note-fg:#1F4A66;
  --st-error-bg:#F6E1DC;  --st-error-fg:#8A2A1B;  /* Formularfehler, 7,6:1 */

  /* Typografie */
  --font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-h1:clamp(34px,4.6cqw,58px);
  --fs-h2:clamp(28px,3.4cqw,42px);

  /* Layout */
  --maxw:1200px;
  --gutter:clamp(16px,4cqw,40px);
  --section-y:clamp(48px,7cqw,96px);
  --radius:8px;
  --radius-sm:6px;
  --radius-xs:4px;
}