/* ============================================================
   ENTWURF 01 — "Grid"
   Referenzen: oberon.framer.website, firecrawl.dev
   Technisches Raster, freistehender Header, oranger roter Faden.

   EINZIGE Quelle für Farben, Schriften, Maße, Muster.
   Nirgends sonst ein Hex-Wert.
   ============================================================ */

:root {
  /* --- Farben (vom Nutzer vorgegeben) --------------------- */
  --c-bg:        #F2F0EE;   /* Papier                          */
  --c-ink:       #202020;   /* Text, dunkle Flächen            */
  --c-accent:    #ED5000;   /* Signalorange — roter Faden, CTA */

  /* abgeleitet, damit nichts ad hoc erfunden wird */
  --c-ink-soft:  #6E6C69;   /* Sekundärtext                    */
  --c-ink-faint: #A5A29E;   /* Meta, Nummern                   */
  --c-line:      #D6D4D2;   /* Rasterlinien, SVG-Deko          */
  --c-line-soft: #E4E2DF;   /* sehr dezente Hilfslinien        */
  --c-paper:     #FBFAF9;   /* helle Karte auf dem Papier      */
  --c-terrain:   #D6D4D2;   /* Punktlandschaft — eigener Token,
                               weil sie pro Modus anders dosiert werden muss */
  --c-on-ink:    #F2F0EE;   /* Text auf dunkler Fläche         */

  /* --- Invertierte Palette --------------------------------
     Für dunkle Sektionen. Sie werden NICHT direkt benutzt, sondern in
     `.section--invert` auf die normalen Token gemappt — dadurch funktioniert
     jede Komponente darin unverändert weiter. */
  --c-bg-invert:        #202020;
  --c-ink-invert:       #F2F0EE;
  --c-ink-soft-invert:  #A3A19E;
  --c-ink-faint-invert: #6B6966;
  --c-line-invert:      #3A3A38;
  --c-line-soft-invert: #2C2C2A;
  --c-paper-invert:     #2A2A28;

  /* --- Bewegung/Transitions siehe unten ------------------- */

  /* --- Schrift --------------------------------------------
     REGEL (verbindlich):
     Inter  = Fließtext, Headlines, Navigation — der Normalfall.
     Mono   = NUR Aufzählungen/Labels, KPI-Zahlen und CTAs.
     -------------------------------------------------------- */
  --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-mono:      0.6875rem;   /* 11px — Labels, CTA, Meta     */
  --fs-mono-lead: 0.8125rem;   /* 13px — Mono-Fließzeilen      */
  --fs-small:     0.8125rem;
  --fs-body:      1rem;
  --fs-lead:      clamp(1rem, 0.35vw + 0.9rem, 1.1875rem);
  /* Der UNTERE Wert gilt auf dem Handy: 4.6vw ergeben bei 390px nur 18px, es
     greift also immer das Minimum. Mit 2.25rem stand die Headline dort auf
     36px und ließ 77px der verfügbaren 350px ungenutzt — sie wirkte kleiner
     als der Entwurf sie meint. 2.65rem füllen die Zeile, ohne sie zu brechen.
     Mitte und Maximum bleiben unangetastet: Der Desktop ändert sich nicht. */
  --fs-hero:      clamp(2.65rem, 4.6vw, 4.75rem);
  --fs-kpi:       clamp(2rem, 3.5vw, 3.25rem);

  /* Mono läuft immer in Versalien, schwarz und etwas fetter */
  --fw-mono: 500;

  --lh-hero: 0.94;
  --lh-body: 1.6;

  --tr-hero: -0.035em;   /* Headline läuft eng               */
  --tr-mono:  0.12em;    /* Mono-Labels laufen gesperrt      */

  /* --- Maße ------------------------------------------------ */
  /* Header und Hero laufen breit … */
  --container:      1560px;
  /* … die Inhaltssektionen darunter bewusst schmaler (.shell--narrow) */
  --container-body: 1240px;
  --grid-cols:      8;      /* Anzahl der senkrechten Hilfslinien */
  --gutter:     clamp(1.25rem, 3vw, 2.5rem);
  /* Einzug des Hauptinhalts — an DIESER Kante läuft der rote Faden */
  --inset:      clamp(1.5rem, 5vw, 5.5rem);

  /* Breite EINER Rasterspalte — Grundlage für jede Platzierung im Raster */
  --shell-w:    min(var(--container), 100vw);
  --col:        calc((var(--shell-w) - 2 * var(--gutter)) / 8);

  /* Der rote Faden liegt exakt auf der Kante, an der der Inhaltsblock
     beginnt (Rasterfeld 3) — dieselbe Linie wie Headline, Text und CTAs. */
  --pipe-x:     calc(var(--gutter) + 2 * var(--col));
  /* so dünn wie die übrigen Rasterlinien — er soll führen, nicht dominieren */
  --pipe-w:     var(--hairline);
  --header-h:   4.5rem;

  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;

  --hairline: 1px;

  /* --- Muster (als Token, damit kein Hex ins Stylesheet wandert) --- */

  /* Die Landschaft liegt als eigene Datei daneben: `terrain.svg`.
     Sie enthält das komplette Dither-Muster (4px-Quadrate im 8px-Raster,
     geordnetes Bayer-Dithering) inklusive Wolkenkontur — deshalb braucht sie
     KEINE Maske mehr. Erzeugt mit dem Skript im Changelog-Eintrag. */
  --img-terrain-file: url("terrain.svg");

  /* Kachelbreite der Landschaft — Wanderweg und Kachelbreite müssen
     identisch sein, sonst springt die Wiederholung.
     Die Höhe wird AUSGESCHRIEBEN (nicht `auto`): Safari zeichnet Masken mit
     `auto`-Höhe nicht zuverlässig, die Landschaft bleibt dann unsichtbar. */
  --terrain-tile: 1600px;
  --terrain-h:    340px;   /* exakte Höhe von terrain.svg */

  /* Deckkraft der Landschaft im FOOTER. Die Fußzeile ist in beiden Farbmodi
     dunkel — im Hellmodus liegt darauf aber die HELLE Landschaftsdatei, die
     dort viel zu laut wird und dem Schriftzug die Ruhe nimmt. Deshalb hier
     deutlich zurückgenommen; im Dunkelmodus greift die dunkle Datei und darf
     kräftiger sein, sonst verschwindet sie ganz. */
  --terrain-footer-o: 0.14;

  /* Punktmuster für Bildflächen — rein aus CSS, damit nichts nachgeladen wird */
  --img-dots:
    radial-gradient(circle at 1px 1px, var(--c-terrain) 1.4px, transparent 1.6px);

  /* --- Bewegung -------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  0.35s;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0.01s; }
}

/* ============================================================
   DUNKELMODUS
   Es werden ausschließlich die TOKEN neu belegt — kein einziges
   Bauteil bekommt eine Sonderregel. Genau dafür ist die Struktur da.

   Die Signalfarbe wechselt bewusst von Orange auf ein Grüngelb:
   Orange verliert auf Dunkel seine Leuchtkraft, Limette trägt sie.
   ============================================================ */

:root[data-theme="dark"] {
  --c-bg:        #121411;   /* fast schwarz, minimal grünlich  */
  --c-ink:       #E9EBE5;   /* Text                            */
  --c-ink-soft:  #9BA096;
  --c-ink-faint: #61665D;
  --c-line:      #313629;   /* Trennlinien                     */
  --c-line-soft: #24281F;   /* Rasterlinien                    */
  --c-paper:     #191C16;   /* abgesetzte Fläche               */
  --c-on-ink:    #121411;   /* Text auf heller Fläche          */

  --c-accent:    #CBEF45;   /* Grüngelb statt Orange           */
  /* Deutlich heller als --c-line: auf Dunkel verschwindet die Landschaft
     sonst komplett. Sie braucht mehr Abstand zum Untergrund als eine Linie. */
  --c-terrain:   #3E4536;
  /* eigene Bilddatei für den Dunkelmodus — siehe Kommentar bei .terrain */
  --img-terrain-file: url("terrain-dark.svg");
  /* dunkle Landschaft auf dunkler Fußzeile — darf kräftiger sein */
  --terrain-footer-o: 0.5;

  /* Der Kontrastblock wird im Dunkelmodus NICHT hell, sondern nur angehoben.
     Grund: Die Signalfarbe ist hier Limette — auf einer hellen Fläche wäre sie
     unlesbar. Der Block bleibt also dunkel und hebt sich über eine leicht
     hellere, wärmere Fläche ab. */
  --c-bg-invert:        #1E2119;
  --c-ink-invert:       #EDEFE8;
  --c-ink-soft-invert:  #A2A79C;
  --c-ink-faint-invert: #6A7064;
  --c-line-invert:      #3C4235;
  --c-line-soft-invert: #2C3126;
  --c-paper-invert:     #272C1F;
}