/* pufferplan v3 – Design-Tokens (cream & clean) */
@font-face{font-family:"Archivo";src:url("fonts/archivo-var.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{
  /* Basis */
  --cream:#F4EFE6;      /* Haupt-Hintergrund */
  --paper:#FAF7F1;      /* Karten, Flächen hell */
  --sand:#E9E2D6;       /* zweite Fläche, Linien-Hintergrund */
  --line:#D9D0C2;       /* Haarlinien (dekorativ, kein Text) */
  --ink:#141210;        /* Wortmarke, Headlines, Text */
  /* Dezente Töne (nur diese beiden, sparsam) */
  --grey:#645C54;       /* warmes Grau – Sekundärtext */
  --brown:#735A49;      /* zartes Braun – Akzent, Links, Zahlen-Hervorhebung */
  --mute:#9A9086;       /* nur Deko/Großes, NICHT für Fließtext */
  /* Typo */
  --font:"Archivo",system-ui,sans-serif;
  --w-text:420; --w-head:520; --w-logo:560;
  --stretch-head:108%;
  --track-head:-0.02em; --track-caps:0.14em;
  /* Raum */
  --s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6:104px;--s7:168px;
  --radius:2px;
  /* Papier-Textur (SVG-Rauschen, multipliziert) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;background:var(--grain);pointer-events:none;mix-blend-mode:multiply}