/* ==========================================================================
   H3 Design-Variablen – EINE Stelle für Farben, Schriften, Abstände,
   Rundungen und Bewegung. Änderungen hier wirken auf die ganze Website.
   Kontrastwerte (WCAG) sind geprüft und neben den Farben notiert.
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-latin-full-normal.woff2") format("woff2-variations");
  font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 300 900; font-display: swap;
}

:root {
  /* Farben */
  --ink:            #25272D;  /* Anthrazit – dunkle Flächen, Text auf hell */
  --ink-2:          #30333A;  /* erhöhte Fläche auf dunkel */
  --ink-3:          #3D4048;  /* Linien auf dunkel */
  --paper:          #FFFFFF;
  --mist:           #EEF0F3;  /* helle Wechselfläche */
  --line:           #DCDFE5;  /* Linien auf hell */
  --steel:          #5E636D;  /* Nebentext auf hell (6,0:1 auf Weiß) */
  --steel-dark:     #A9AFB8;  /* Nebentext auf dunkel (6,8:1 auf Anthrazit) */
  --pink:           #E0136F;  /* Hauptakzent: Buttons, Links auf hell (4,7:1) */
  --pink-press:     #C70F62;
  --pink-on-dark:   #FF6FAA;  /* Pink als Text auf Anthrazit (5,8:1) */
  --pink-glow:      #FF4D97;  /* nur Grafik, nie Fließtext */
  --pink-tint:      #FDE7F0;
  --blue:           #2D5BE3;  /* Ergänzung: Info/„auf Anfrage“ (5,7:1 auf Weiß) */
  --blue-on-dark:   #7FA0FF;
  --ok:             #1F7A4D;
  --warn:           #9A5B00;

  /* Schrift */
  --font-display: "Bricolage Grotesque", "Inter Display", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Figtree", "Inter", "Segoe UI", system-ui, sans-serif;
  --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
  --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.35vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.7vw, 1.9rem);
  --step-3:  clamp(1.8rem, 1.5rem + 1.4vw, 2.75rem);
  --step-4:  clamp(2.3rem, 1.7rem + 2.8vw, 4.2rem);
  --step-5:  clamp(3rem, 1.6rem + 6.4vw, 7.4rem);
  --leading-tight: 1.02;
  --leading-head: 1.12;
  --leading-body: 1.6;
  --track-display: -0.035em;  /* große Schrift enger */
  --track-head: -0.02em;
  --track-small: 0.01em;      /* kleine Schrift minimal weiter */

  /* Abstände (rem → wächst mit der Schriftgröße des Browsers) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4.5rem;
  --space-9: clamp(4rem, 3rem + 5vw, 8rem);
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --measure: 66ch;
  --page: 78rem;

  /* Rundungen: nach Hierarchie, nicht überall gleich */
  --radius-media: 1.4rem;   /* Bilder, große Flächen */
  --radius-panel: 1rem;     /* Karten, Formulare */
  --radius-field: 0.7rem;   /* Eingabefelder */
  --radius-pill: 999px;     /* Buttons, Chips */

  /* Bewegung – Federkurven (kritisch gedämpft bzw. leicht nachfedernd) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
  --dur-press: 110ms;
  --dur-ui: 260ms;
  --dur-reveal: 620ms;

  --shadow-raise: 0 1px 2px rgb(37 39 45 / 0.06), 0 8px 24px -12px rgb(37 39 45 / 0.28);
  --shadow-float: 0 2px 6px rgb(37 39 45 / 0.08), 0 24px 48px -24px rgb(37 39 45 / 0.45);
  --header-h: 4.25rem;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-press: 0ms; --dur-ui: 120ms; --dur-reveal: 0ms; --spring: ease; }
}