/* ==========================================================================
   Haut „Schiefer" — Anthrazit als Bühne, helles Grau, Signalgelb als Akzent.
   Passt zu Werkstätten, Industrie, Fotografie.
   ========================================================================== */
:root {
  /* Grün — die Bühne */
  --c-green: #23262b;
  --c-green-2: #31353c;      /* aufgehellt, für Verlauf und Streifen */
  --c-green-deep: #15171a;   /* Fuß und tiefste Stufe */

  /* Papier */
  --c-paper: #f6f6f5;
  --c-paper-2: #ececeb;      /* zweite helle Stufe */
  --c-sand: #dededc;         /* Beige-Tafel */
  --c-white: #ffffff;

  /* Tinte */
  --c-ink: #16181b;
  --c-muted: #5f6469;
  --c-faint: #8e9399;

  /* Akzent aus dem Logo */
  --c-red: #e0a400;

  --on-green: rgba(246, 246, 245, 0.76);
  --line: rgba(22, 24, 27, 0.14);
  --line-strong: rgba(22, 24, 27, 0.32);
  --line-light: rgba(246, 246, 245, 0.22);

  /* Typografie */
  --font-display: "Jost", "Futura", "Century Gothic", sans-serif;
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;

  --t-display: clamp(2.4rem, 1.4rem + 4.6vw, 5.2rem);   --lh-display: 1.06;
  --t-h2: clamp(1.7rem, 1.3rem + 2vw, 2.9rem);          --lh-h2: 1.12;
  --t-h3: clamp(1.1rem, 1.02rem + 0.5vw, 1.35rem);      --lh-h3: 1.3;
  --t-body: clamp(1rem, 0.96rem + 0.25vw, 1.075rem);    --lh-body: 1.72;
  --t-small: 0.9125rem;
  --t-micro: 0.75rem;

  /* Rhythmus */
  --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-6: 3rem;
  --section-y: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  --head-gap: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  --wrap-max: 74rem;
  --wrap-x: clamp(1.25rem, 4vw, 3rem);

  /* Radius — die Bildkarten sind stark gerundet */
  --radius-s: 0.5rem;
  --radius-m: 1rem;
  --radius-l: clamp(1.2rem, 2.5vw, 1.8rem);
  --radius-pill: 999px;

  /* Motion */
  --duration-fast: 160ms;
  --duration-normal: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Abgeleitet — damit die Bausteine keine festen Farben brauchen */
  --papier-rgb: 246, 246, 245;
  --buehne-rgb: 35, 38, 43;
  --c-sand-text: #55585c;
  --c-on-stage: var(--c-paper);   /* Text auf der Bühne — helle Häute kippen das */
  --schatten-rgb: 14, 16, 18;
}