/* GLUT — Design-Tokens.
   EINZIGE Quelle fuer Farbe, Typografie, Raster und Timing.
   Rebranding: diese Datei plus content/inhalt.json. Sonst nichts.
   Kein Hex-Wert und kein Timing-Wert darf ausserhalb dieser Datei stehen. */

@font-face {
  font-family: "Archivo";
  src: url("schriften/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("schriften/inter-tight-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("schriften/jetbrains-mono-var.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  /* ---- Farbe (Abschnitt 5.1) --------------------------------------------
     Kontrast gemessen, nicht geschaetzt:
       cream auf void  15,86:1   Fliesstext, jede Groesse
       smoke auf void   5,84:1   Sekundaertext ab 14 px
       smoke auf ash    4,53:1   Sekundaertext auf Karten
       gold  auf void   9,49:1   Zahlen und Preise
       ember auf void   5,23:1   NUR ab 24 px oder als Flaeche
       void  auf ember  4,02:1   dunkle Schrift auf dem Akzent, nur ab 24 px
       ashh  auf void   3,01:1   NUR grosse Zierschrift (Fusszeilen-Wortmarke)
     Regel: --glut-ember wird nie fuer Fliesstext unter 18 px verwendet.
     ⚠️ --glut-smoke stand auf #8C8177 und fiel auf Karten (--glut-ash) mit 4,06:1
     durch. Aufgehellt auf #95897F: auf void 5,33 -> 5,84, auf ash 4,06 -> 4,53.
     Beide Untergruende besser, keiner schlechter. */
  --glut-void:  #0A0908;
  --glut-char:  #16120F;
  --glut-ash:   #2A2320;
  --glut-ashh:  #6B5952;
  --glut-ember: #FF4A16;
  --glut-flame: #FF8A3D;
  --glut-gold:  #E8B14C;
  --glut-cream: #F4EDE3;
  --glut-smoke: #95897F;

  /* ---- Typografie (5.2) ---- */
  --ff-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-body:    "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Gemessen statt geschaetzt: „GLUT" in Archivo 900 bei font-stretch 125 % ist
     3,54 x der Schriftgroesse breit. Bei 390 px Fenster stehen 350 px Inhalt zur
     Verfuegung, die Wortmarke nutzte mit 18vw nur 249 davon. 24,5vw fuellt sie auf
     338 px, ohne bei 360 px umzubrechen; oben deckelt 20rem. Nachgemessen bei
     360 / 390 / 600 / 900 / 1280 / 1440 / 2560. */
  /* ⚠️ Die Groesse muss die HOEHE kennen, nicht nur die Breite. Rein an der Breite
     bemessen wuchs die Wortmarke auf Laptops so stark, dass der Hero nicht mehr auf
     einen Bildschirm passte: gemessen 973 px bei 1280x800 und 984 px bei 1440x900.
     Ein Hero, den man anscrollen muss, ist kein Hero. min(vw, svh) nimmt jeweils die
     knappere Achse: am Handy entscheidet die Breite, auf dem Laptop die Hoehe. */
  --fs-hero:  clamp(5.5rem, min(24.5vw, 33svh), 34rem);
  --fs-h1:    clamp(2.5rem, 7vw, 6rem);
  --fs-h2:    clamp(1.75rem, 4vw, 3.25rem);
  --fs-h3:    clamp(1.25rem, 2.2vw, 1.75rem);
  --fs-body:  clamp(1rem, 1.15vw, 1.25rem);
  --fs-label: 0.75rem;

  --lh-tight: 0.92;
  --lh-head:  1.06;
  --lh-body:  1.55;

  /* ---- Raster und Raum (5.3) ---- */
  --gutter: clamp(16px, 2vw, 32px);
  --rand:   clamp(20px, 5vw, 120px);
  --spur:   8px;                 /* vertikaler Rhythmus, alles ein Vielfaches */
  --sp-1: calc(var(--spur) * 1);
  --sp-2: calc(var(--spur) * 2);
  --sp-3: calc(var(--spur) * 3);
  --sp-4: calc(var(--spur) * 5);
  --sp-5: calc(var(--spur) * 8);
  --sp-6: calc(var(--spur) * 13);
  --sp-7: calc(var(--spur) * 21);

  /* Radien: 0 fuer Flaechen, 999px nur fuer Knoepfe und Pillen.
     Die harte Kante ist Teil der Marke, deshalb gibt es kein 12px. */
  --r-flaeche: 0px;
  --r-pille:   999px;

  /* ---- Bewegung (Abschnitt 8.3) ----
     Nichts unter 0,45 s, nichts ueber 1,6 s ausser scrub-gebunden. */
  --e-grund:   cubic-bezier(0.22, 0.61, 0.24, 1);   /* power2.out */
  --e-reveal:  cubic-bezier(0.16, 1, 0.30, 1);      /* expo.out */
  --e-beides:  cubic-bezier(0.87, 0, 0.13, 1);      /* expo.inOut */
  --d-kurz:   0.45s;
  --d-mittel: 0.70s;
  --d-lang:   1.10s;

  /* ---- Verlaeufe ----
     Stehen HIER, weil sonst Hex- und rgba-Literale in globals.css stehen wuerden
     (Auftrag 19.17: Farbe nur in dieser Datei). Beim Umfaerben aendert sich nichts
     ausser diesen Zeilen. */
  --verlauf-kopf: linear-gradient(to bottom,
      rgba(10, 9, 8, 0.94) 0%, rgba(10, 9, 8, 0.72) 46%, rgba(10, 9, 8, 0) 100%);
  --verlauf-vignette: radial-gradient(ellipse at center,
      rgba(10, 9, 8, 0) 42%, rgba(10, 9, 8, 0.55) 100%);

  --z-canvas:   0;
  --z-inhalt:   10;
  --z-leiste:   60;
  --z-overlay:  80;
  --z-korn:     90;
  --z-preload: 100;
}