/* punkte-in-note.de – Design-Tokens. Alle Custom Properties der Seite (Farben, Schriften, Skalen); wird vor site.css geladen.
   Regel (SPEC "Design-Tokens"): neue CSS-Werte nur aus diesen Skalen; Abweichung nur mit Kommentar ("optisch: ..." bzw. "Budget: ...").
   Lokale Komponenten-Variablen (--m, --logo-*) bleiben in site.css. In Media-Queries bleiben Breiten als Literale (var() wirkt dort nicht). */
:root{
  /* ---------- Farben ---------- */
  --paper:#FBF5E9;--card:#FFFDF8;--ink:#3B2C24;--ink-2:#5E5046;--ink-3:#6B5D52;
  --red:#C8432B;--red-text:#A63A24;--red-shadow:#8F2C1A;--marker:#F6D36B;
  --line:rgba(42,33,27,.12);--grid:rgba(140,98,64,.15);
  --t1:#FBE19A;--t2:#FBD9A2;--t3:#F9CBA2;--t4:#F6BFA4;--t5:#F2AFA1;--t6:#EB9D93;
  --mk1:#F4C534;--mk2:#F6B547;--mk3:#F29A4E;--mk4:#EE8455;--mk5:#E66A55;--mk6:#D9534A;
  --pill:#F7EFE1;--pill-under:#F7D9CF;--ink-4:#4A3D33;--track:#E3D6C3;--track-edge:#857363;--chip-x:#EADCC6;
  --focus:0 0 0 4px rgba(246,211,107,.8);

  /* ---------- Schriftfamilien ---------- */
  --font-text:'Figtree','Figtree Fallback',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --font-disp:'Bricolage Grotesque','Bricolage Fallback','Figtree',system-ui,sans-serif;
  --font-hand:'Caveat','Caveat Fallback',cursive;

  /* ---------- Skalen (gestuft; Stufe = Position, nicht Wert) ---------- */
  /* Abstaende: margin, padding, gap, scroll-margin (Abschnittsabstaende = sp-7 / sp-8) */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:40px;--sp-8:56px;--sp-9:72px;
  /* Zwischenstufen T2 (Wert mehrfach genutzt, keine Stufe innerhalb 2 px): 4b liegt zwischen sp-4 und sp-5, 5b zwischen sp-5 und sp-6; Nummern der bestehenden Stufen bleiben (N11 = sp-7/sp-8) */
  --sp-4b:20px;--sp-5b:28px;
  /* Schriftgroessen (font-size) */
  --fs-1:12px;--fs-2:13px;--fs-3:14px;--fs-4:16px;--fs-5:18px;--fs-6:22px;--fs-7:28px;--fs-8:38px;--fs-9:62px;
  /* Zwischenstufen T2 (Wert mehrfach genutzt, keine Stufe innerhalb 1 px): 5b = 20, 6b = 26, 7b = 31, 8b = 44 px */
  --fs-5b:20px;--fs-6b:26px;--fs-7b:31px;--fs-8b:44px;
  /* Radien (border-radius): r-4 = Karte, r-pill = Pille */
  --r-1:6px;--r-2:12px;--r-3:18px;--r-4:26px;--r-pill:999px;
  --r-3b:22px; /* Zwischenstufe T2: 22 px an Eingabe- und Ergebnis-Karte mobil (keine Stufe innerhalb 2 px) */
  /* Zeilenhoehe und Laufweite (semantisch benannt, weil nur je 2-3 Stufen) */
  --lh-solid:1;--lh-tight:1.1;--lh-body:1.5;--lh-loose:1.65; /* loose: Fliesstext Infoblock/Unterseiten (T2, 1.6 und 1.65 zusammengelegt) */
  --ls-tight:-.02em;--ls-caps:.1em;

  /* ---------- Bestehende Layout-Tokens ---------- */
  --radius-card:var(--r-4);
  --gutter:16px;
  --karo-solid:40vh;--karo-end:66vh; /* Karo: voll bis --karo-solid, ausgeblendet bis --karo-end (Hoehe vom Seitenanfang); vh nur als Fallback */
  --head-h:66px; /* Hoehe der Desktop-Kopfleiste (min-height; Logo 44 px + 2 x sp-2 Padding + 2 x 1 px Rahmen = 62 px, Rest zentriert), Basis fuer scroll-margin-top */
}
@supports (height:1svh){:root{--karo-solid:40svh;--karo-end:66svh}} /* svh: kein Mitwandern, wenn mobil die Browserleiste ein-/ausfaehrt */
@media (min-width:840px){:root{--gutter:32px}}