/* Design-Tokens aus dem WebWerker Design System (02_Branding & CI/WebWerker Design System/tokens/). Werte wörtlich übernommen. */
:root{
  /* Farben: Schwarz, Weiß, Werkgelb. Sonst nichts. */
  --ww-ink:#111111;
  --ww-ink-soft:#444444;
  --ww-ink-muted:#6f6f6f;
  --ww-white:#ffffff;
  --ww-grey:#e9e9e9;
  --ww-line:#d4d4d4;
  --ww-yellow:#ffc400;
  --ww-yellow-press:#e8b000;
  --ww-yellow-tint:#fff3cc;
  --ww-blue:#1d45c8;
  --ww-blue-press:#16359c;
  --ww-green:#1f7a3d;
  --ww-green-tint:#e6f2ea;
  --ww-red:#c7361b;
  --ww-red-tint:#fbe9e4;

  --surface-page:var(--ww-white);
  --surface-inverse:var(--ww-ink);
  --text-body:var(--ww-ink);
  --text-soft:var(--ww-ink-soft);
  --text-muted:var(--ww-ink-muted);
  --text-inverse:var(--ww-white);
  --focus-ring:var(--ww-blue);
  --focus-shadow:0 0 0 3px rgba(29,69,200,.35);

  /* Typografie: Big Shoulders Display 900 (Display, uppercase) + Archivo (Fließtext). Selbst gehostet, SIL OFL. */
  --font-display:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif;
  --font-body:'Archivo',Helvetica,Arial,sans-serif;
  --text-display-1:clamp(56px,9vw,120px);
  --text-display-2:clamp(36px,5vw,56px);
  --text-h3:clamp(24px,3vw,32px);
  --text-body-lg:18px;
  --text-body-md:16px;
  --text-body-sm:14px;
  --text-caption:12.5px;
  --leading-display:.92;
  --leading-body:1.55;
  --tracking-caps:.02em;

  /* Spacing: 4px-Raster, Container 1120px */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
  --space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;
  --container-max:1120px;
  --container-pad:20px;

  /* Kanten: kein Radius. 2px Schwarz-Border ist das einzige Trennmittel. Keine Schatten. */
  --border-2:2px solid var(--ww-ink);
  --border-1:1px solid var(--ww-line);

  /* Maßband-Leiste: Tick-Leiste als Sektionstrenner */
  --ruler:repeating-linear-gradient(90deg,var(--ww-ink) 0 2px,transparent 2px 40px),repeating-linear-gradient(90deg,var(--ww-ink) 0 1px,transparent 1px 8px);
  --ruler-inverse:repeating-linear-gradient(90deg,var(--ww-white) 0 2px,transparent 2px 40px),repeating-linear-gradient(90deg,var(--ww-white) 0 1px,transparent 1px 8px);

  /* Motion: schnell und trocken, kein Bounce */
  --ease-out:cubic-bezier(.2,.7,.3,1);
  --dur-fast:120ms;
  --dur-med:200ms;
}
@media (min-width:720px){:root{--container-pad:24px}}