/* Farben: vier Werte, sonst nichts (Spec 2.1). Nie #000. */
:root{
  --grund:#fbfbfb; --dunkel:#121212; --tinte:#101010;
  /* Grund = Off-White, nie reines Weiss (Chris, 27.09.2026). Dunkel = gemessener Grund der About-Seite auf
     thisisvermilion.de: 93 % Schwarz ueber Weiss = rgb(18,18,18), an vier Bildpunkten gleich (27.09.2026). */
  --leise:rgba(16,16,16,.42); --linie:rgba(16,16,16,.14); --geist:rgba(16,16,16,.10);
  --akzent:#ff6a00;
  /* Familienfarben aus dem VERMILION-Designsystem (VERMILION_BRAND_DESIGN_SYSTEM.md): OFF-WHITE fuer Flaechen,
     WARM CREAM fuer Zweitflaechen. Chris, 14.10.2026: das Fenster einer Strecke und die Newsletter-Flaeche
     stehen auf diesem gebrochenen Weiss, damit sie sich vom Grund der Seite abheben. */
  --offwhite:#f2faf4; --creme:#fffaf0;
  /* RASTER: ein Rand oben, unten, links, rechts; 12 Spalten, Steg = halber Rand. */
  /* Rand aller Seiten = der des Late Summer Update (Chris, 26.09.2026: Beschriftungen naeher an die Kanten,
     die Seite besser ausnutzen). Das Cover hat sein eigenes, weiteres Raster (--rand-cover). */
  /* Chris, 29.10.2026 (Mockups Selected und Showcase): Rand 28 px bei 2000 px Breite = 1,4 vw */
  --rand:clamp(16px,1.4vw,34px);
  --rand-cover:clamp(20px,3.9vw,96px);
  /* Freiraum zwischen Beschriftung und Bild im Showcase: nie weniger als 50 px */
  --luft:max(50px,3.5vw);
  --steg:calc(var(--rand) / 2);
  /* Kopfzeile (Chris, 29.10.2026): die Uhr beginnt leicht links der Mitte, bei 752 von 2000 px; ebenso der Streckentitel im Showcase */
  --mitte:37.6%;
  --spalte:calc((100vw - 2 * var(--rand) - 11 * var(--steg)) / 12);
  --auf:30%;                            /* Tiefe der Doppelbelichtung */
  --kurve:cubic-bezier(.22,1,.36,1);
  --expo:cubic-bezier(.16,1,.3,1);   /* die eine Kurve fuer den Vorhang */
  --vorhang:900ms;

  /* SCHRIFT (Chris, 25.09.2026): EINE Schrift fuer alles, Akzidenz-Grotesk BQ Bold,
     Variante 3 = Sperrung -40, Strich 20/1000 em. Im Prototyp aus Chris' installierter Schrift
     (local, es wird KEINE Datei ausgeliefert). Vor dem Livegang: Web-Lizenz, dann woff2 hier eintragen. */
  /* Chris, 29.10.2026: zwei Schnitte. Display NUR fuer grosse Schrift (Titel, About, Kontakt, Newsletter),
     alles Kleine in ExtraBold Text - dann stimmt die Laufweite von selbst, ohne Zuschlag. */
  --schrift:OriginText,Origin,AG,Arial,sans-serif;
  --schrift-display:Origin,AG,Arial,sans-serif;
  /* Chris, 19.10.2026: Origin ExtraBold Display, Laufweite -10 (Adobe-Einheiten) = -0,01 em. Kein kuenstlicher Strich. */
  /* Chris, 29.10.2026: in kleiner Schrift viel zu eng, schwer zu lesen; gross ist es gut. Darum ein fester Zuschlag von
     0,8 px auf -0,01 em: er wirkt umso staerker, je kleiner die Schrift (12 px: +0,057 em · 18 px: +0,034 em ·
     34 px: +0,014 em · ab 80 px praktisch wie vorher). Titel und Cover sind Umrisse und haengen nicht hieran. */
  /* 29.10.2026, spaeter am Tag: die Ursache war der Schnitt. Die Text-Fassung braucht keine Sperrung mehr. */
  --sperrung:0em;
  --sperrung-display:-0.01em;
  --strich:0em;
  /* Zeilenabstand wie bei der Akzidenz, gemessen an der Versalhoehe (Chris, 19.10.2026: Zeilen sehr dicht):
     Akzidenz Bold 706/1000 em, Origin ExtraBold Display 690/1000 em. Jede line-height wird damit multipliziert
     (werkzeuge/zeilenabstand.py). */
  --lh-faktor:calc(690 / 706);

  /* TYPO-SKALA: vier Stufen, sonst keine (Chris, 25.09.2026: einheitlich ueber alle Seiten)
     klein  = alle Beschriftungen: Kopf, Fuss, Kennung, Zaehler, Index, Menueknopf, Streckenzeilen
     mittel = zweite Ebene: Cover-Unterzeilen, Kontaktzeilen (entspricht den kleinen Cover-Teilen)
     titel  = Bereichstitel UND Menue, Versalhoehe 6,2 vw (Mitte zwischen Selected und Commissioned)
     name   = nur die Wortmarke auf dem Cover (fuellt den Satzspiegel) */
  /* Chris' Mockup 29.10.2026: Versalhoehe 10 px bei 2000 px Breite -> 14 px Schrift (Textbreiten nachgemessen), Zeilenabstand = Schriftgroesse */
  --t-klein:clamp(12px,0.7vw,18px);
  --t-mittel:clamp(16px,1.89vw,34px);
  --cap-titel:6.2vw;
  --marke:var(--t-klein);
}
/* Origin (Rajesh Rajput): Lizenz verbietet, die Datei online verfuegbar zu machen - fuer den Livegang schriftliche
   Erlaubnis einholen oder Text als Umriss setzen. Im Prototyp nur lokal ausgeliefert, nicht eingecheckt. */
@font-face{font-family:Origin;src:url(schrift/origin/Origin-ExtraBoldDisplay.woff2) format('woff2');font-weight:700;font-display:block}
@font-face{font-family:OriginText;src:url(schrift/origin/Origin-ExtraBoldText.woff2) format('woff2');font-weight:700;font-display:block}
@font-face{font-family:OriginFein;src:url(schrift/origin/Origin-RegularText.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:AG;src:local('AkzidenzGroteskBQ-Bold'),local('Akzidenz-Grotesk BQ Bold');font-weight:700;font-display:block}