/* ============================================================
   BUDE ITTERBECK – Design-Grundlagen
   Linie: Schwarz, Weiß und Grau in Abstufungen. Keine Buntfarben.
   Farbe kommt nur aus Fotos und Video.
   ============================================================ */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Graustufen */
  --grau-0: #000;
  --grau-50: #070707;
  --grau-100: #0e0e0e;
  --grau-150: #151515;
  --grau-200: #1e1e1e;
  --grau-300: #2b2b2b;
  --grau-400: #3d3d3d;
  --grau-500: #5f5f5f;
  --grau-600: #8b8b8b;
  --grau-700: #b5b5b5;
  --grau-800: #dadada;
  --grau-900: #f3f3f3;
  --weiss: #fff;

  /* Bedeutung */
  --bg: var(--grau-50);
  --flaeche: var(--grau-100);
  --flaeche-2: var(--grau-150);
  --linie: var(--grau-200);
  --linie-stark: var(--grau-300);
  --text: var(--grau-900);
  --text-2: var(--grau-700);
  --gedimmt: var(--grau-600);
  --leise: #828282; /* hellster Grauton, der auf allen Flächen noch 4,5:1 Kontrast schafft */

  /* Licht statt Farbe */
  --glow-text: 0 0 18px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.15);
  --glow-box: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 32px rgba(255, 255, 255, 0.28);
  --schatten: 0 24px 60px rgba(0, 0, 0, 0.6);

  /* Schrift: Montserrat Black für Headlines, System-Sans für Text, Mono für Labels */
  --font-head: "Montserrat", "Arial Black", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;

  --t-xs: 0.72rem;
  --t-sm: 0.875rem;
  --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --t-lg: clamp(1.125rem, 1rem + 0.5vw, 1.32rem);
  --t-h3: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
  --t-h2: clamp(2.3rem, 1.2rem + 4.6vw, 4.8rem);
  --t-h1: clamp(2.9rem, 1rem + 8vw, 7.8rem);
  --t-mega: clamp(3.6rem, 0.5rem + 14vw, 14rem);

  /* Raum */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;
  --abschnitt: clamp(5rem, 3rem + 8vw, 10rem);
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 72px;

  /* Formen */
  --r-s: 3px;
  --r: 8px;
  --r-l: 18px;
  --r-pill: 999px;

  /* Bewegung */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --d-schnell: 160ms;
  --d: 320ms;
  --d-langsam: 900ms;
}