/* ==========================================================================
   Lazy Habits — Design-Tokens
   Einzige Quelle der Wahrheit fuer Farben, Schrift, Abstaende.
   theme.json referenziert ausschliesslich diese Variablen, damit kein
   Farbwert zweimal existiert.
   ========================================================================== */

/* --- Schriften -----------------------------------------------------------
   Figtree 600 ist die Display-Schrift, ein 222-Glyphen-Subset, nur dieser
   eine Schnitt existiert.

   ⚠ Inter: Die Originalseite lieferte inter-400.woff2 und inter-600.woff2
   aus. Beide Dateien sind BYTE-IDENTISCH (md5 260c81a4…) und enthalten eine
   Variable-Font-Datei mit der Achse wght 100–900, deren Standardwert 400 ist.
   Da jede @font-face-Regel nur ein einzelnes Gewicht deklariert, bleibt die
   Achse auf 400 stehen. Jedes font-weight:600 auf der Live-Seite ist deshalb
   in Wahrheit 400 oder ein synthetischer Fettdruck des Browsers.

   FIX EINGESCHALTET (Entscheidung 15.09.2026): eine Deklaration mit der
   vollen Achse 100-900 statt zweier auf einen Wert gepinnter. Damit ist 600
   echtes 600. Navigation, Tourzeilen, Schaltflaechen und Fusszeile wirken
   dadurch schwerer als auf der Vorlage — das ist die Korrektur eines Fehlers
   im Original, keine Abweichung vom Entwurf.
   -------------------------------------------------------------------- */
@font-face{
  font-family:"Figtree"; font-style:normal; font-weight:600;
  src:url('../fonts/figtree-600.woff2') format('woff2'); font-display:swap;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:100 900;
  src:url('../fonts/inter-var.woff2') format('woff2-variations'); font-display:swap;
}

:root{
  /* --- Marke ---------------------------------------------------------- */
  --lh-ink:           #05010d;   /* Seitengrund, fast schwarzes Violett */
  --lh-paper:         #f5f5f5;   /* Gebrochenes Weiss: Rahmen, Fuellung */
  --lh-white:         #ffffff;   /* Fliesstext auf dem Grund */
  --lh-black:         #000000;   /* Text auf hellen Flaechen */
  --lh-accent:        #e75534;   /* Das Orange */

  /* --- Abgeleitet, nicht von Hand aendern ----------------------------- */
  --lh-nav-bg:        rgb(5 1 13 / .55);
  --lh-accent-glow:   rgb(231 85 52 / .28);
  --lh-rule:          var(--lh-paper);

  /* --- Schrift -------------------------------------------------------- */
  --lh-font-display:  Figtree, Arial, system-ui, sans-serif;  /* nur 600 */
  --lh-font-ui:       Inter, Arial, system-ui, sans-serif;

  /* ⚠ Montserrat stand in der Original-CSS als body-Schrift, wurde aber nie
     ausgeliefert. Der Fallback greift seit jeher. Deshalb hier entfernt. */

  --lh-text-14:  14px;
  --lh-text-16:  clamp(14px, 0.8333vw, 16px);
  --lh-text-24:  clamp(14px, 1.25vw,   24px);
  --lh-text-30:  clamp(18px, 1.5625vw, 30px);
  --lh-text-48:  clamp(29px, 2.5vw,    48px);
  --lh-text-96:  clamp(58px, 5vw,      96px);
  --lh-text-192: clamp(115px,10vw,    192px);

  /* --- Abstaende, 8er-Raster, unveraendert aus dem Original ----------- */
  --lh-space-8:8px;
  --lh-space-12:clamp(8px,0.625vw,12px);
  --lh-space-16:clamp(8px,0.8333vw,16px);
  --lh-space-20:clamp(8px,1.0417vw,20px);
  --lh-space-24:clamp(8px,1.25vw,24px);
  --lh-space-28:clamp(8px,1.4583vw,28px);
  --lh-space-32:clamp(8px,1.6667vw,32px);
  --lh-space-36:clamp(9px,1.875vw,36px);
  --lh-space-40:clamp(10px,2.0833vw,40px);
  --lh-space-42:clamp(11px,2.1875vw,42px);
  --lh-space-76:clamp(19px,3.9583vw,76px);
  --lh-space-80:clamp(20px,4.1667vw,80px);
  --lh-space-96:clamp(24px,5vw,96px);
  --lh-space-100:clamp(25px,5.2083vw,100px);
  --lh-space-124:clamp(31px,6.4583vw,124px);
  --lh-space-128:clamp(32px,6.6667vw,128px);
  --lh-space-192:clamp(48px,10vw,192px);
  --lh-space-224:clamp(56px,11.6667vw,224px);
  --lh-space-232:clamp(58px,12.0833vw,232px);
  --lh-space-236:clamp(59px,12.2917vw,236px);

  /* --- Layout --------------------------------------------------------- */
  --lh-measure:        72ch;
  --lh-container:      1456px;
  --lh-container-wide: 1856px;
  --lh-gutter:         clamp(20px, 1.6667vw, 32px);

  /* --- Hoehe der Seitenhuelle ------------------------------------------
     Damit der Hero auf den Rest der ersten Bildschirmhoehe gedeckelt werden
     kann, ohne dass ein Block die Hoehe von Kopf und Wortmarke raten muss.

     Die Wortmarke ist so breit wie der Inhalt. Ihr Verhaeltnis kommt aus
     dem berechneten Begrenzungsrahmen der Pfade, 1867.94:139.22, nicht aus
     der Buehnenbreite: die versetzten Ebenen ragen rechts darueber hinaus.
     Ihre Hoehe ist also die Breite mal 139.22/1867.94 = 0.07453.
     Die Kopfzeile misst gemessene 42 bis 45px; 48px lassen etwas Luft.
     -------------------------------------------------------------------- */
  --lh-nav-h:       48px;
  --lh-wordmark-h:  calc((100vw - 2 * var(--lh-gutter)) * 0.08381);
  --lh-chrome-h:    calc(var(--lh-nav-h) + var(--lh-wordmark-h));
}

/* --- Bruecke fuer den portierten Bestand ---------------------------------
   Die 360 Zeilen Original-CSS referenzieren maschinell benannte Variablen
   (--c-e75534, --space-32, --font-inter). Diese 1:1 umzuschreiben waere eine
   Einladung fuer Tippfehler. Stattdessen zeigen die alten Namen auf die
   neuen. Neuer Block-Code benutzt ausschliesslich die semantischen Namen.
   Dieser Block verschwindet, wenn der Altbestand vollstaendig portiert ist.
   ---------------------------------------------------------------------- */
:root{
  --c-000000:var(--lh-black);
  --c-05010d:var(--lh-ink);
  --c-e75534:var(--lh-accent);
  --c-f5f5f5:var(--lh-paper);
  --c-ffffff:var(--lh-white);
  --font-inter:var(--lh-font-ui);
  --font-figtree:var(--lh-font-display);
  --text-14:var(--lh-text-14);   --text-16:var(--lh-text-16);
  --text-24:var(--lh-text-24);   --text-30:var(--lh-text-30);
  --text-48:var(--lh-text-48);   --text-96:var(--lh-text-96);
  --text-192:var(--lh-text-192);
  --space-8:var(--lh-space-8);     --space-12:var(--lh-space-12);
  --space-16:var(--lh-space-16);   --space-20:var(--lh-space-20);
  --space-24:var(--lh-space-24);   --space-28:var(--lh-space-28);
  --space-32:var(--lh-space-32);   --space-36:var(--lh-space-36);
  --space-40:var(--lh-space-40);   --space-42:var(--lh-space-42);
  --space-76:var(--lh-space-76);   --space-80:var(--lh-space-80);
  --space-96:var(--lh-space-96);   --space-100:var(--lh-space-100);
  --space-124:var(--lh-space-124); --space-128:var(--lh-space-128);
  --space-192:var(--lh-space-192); --space-224:var(--lh-space-224);
  --space-232:var(--lh-space-232); --space-236:var(--lh-space-236);
}
