/* ==========================================================================
   Valoora · Im Licht · Tokens
   Die einzige Quelle für Farben, Schrift, Abstände, Radien, Licht und Maße.
   Regeln, Register und Ausnahmen: design-system.md
   Neue Werte kommen zuerst hierher, nie direkt in einen Abschnitt.
   ========================================================================== */

:root {
  /* ---------- Farben: der Raum ---------- */
  --nacht: #030304;                        /* Seitenhintergrund */
  --ebene-1: #0B0B0E;                      /* Fläche einer Bühne */
  --ebene-2: #111115;                      /* Leisten, Ersatzflächen */
  --ebene-3: #141418;                      /* Karten auf einer Bühne, Geräterahmen */
  --ebene-4: #2C2C33;                      /* kleinste Bedienpunkte */
  --ebene-mint: #182221;                   /* Karte, die an ist: Mint-Hauch auf --ebene-3, deckend (Bausteine) */
  --tinte: #0A0A0A;                        /* dunkle Schrift auf Mint */

  /* Schleier: die Nacht, durchscheinend */
  --schleier-0: rgba(3, 3, 4, 0);
  --schleier-1: rgba(3, 3, 4, .35);
  --schleier-2: rgba(3, 3, 4, .6);
  --schleier-3: rgba(3, 3, 4, .72);
  --schleier-4: rgba(3, 3, 4, .96);

  /* ---------- Farben: Schrift ---------- */
  --weiss: #FFFFFF;                        /* Überschriften, Hervorhebung */
  --text-1: rgba(255, 255, 255, .88);      /* längerer Text auf Bühnen */
  --text-2: rgba(255, 255, 255, .64);      /* Fließtext */
  --text-3: rgba(255, 255, 255, .42);      /* Nebentext, Labels */
  --text-4: rgba(255, 255, 255, .3);       /* das Bequeme, bevor das V korrigiert */
  --text-aus: rgba(255, 255, 255, .24);    /* das Bequeme, durchgestrichen */

  /* ---------- Farben: Flächen und Linien (Weiß, durchscheinend) ---------- */
  --flaeche-1: rgba(255, 255, 255, .04);
  --flaeche-2: rgba(255, 255, 255, .08);
  --flaeche-3: rgba(255, 255, 255, .12);   /* Hover */
  --linie-1: rgba(255, 255, 255, .08);     /* feine Kanten */
  --linie-2: rgba(255, 255, 255, .12);     /* Trennlinien */
  --linie-3: rgba(255, 255, 255, .16);     /* Ränder von Knöpfen */
  --linie-4: rgba(255, 255, 255, .25);     /* Unterstreichung, Marken */
  --linie-5: rgba(255, 255, 255, .3);      /* Hover */

  /* ---------- Farben: Marke ---------- */
  --mint: #4DDC9E;                         /* Akzent, Handlungen, das Richtige */
  --mint-hauch: rgba(77, 220, 158, .07);
  --mint-flaeche: rgba(77, 220, 158, .14);
  --mint-rand-leise: rgba(77, 220, 158, .35);
  --mint-rand: rgba(77, 220, 158, .5);
  --violett: #7A56F0;
  --violett-hell: #9B7BF5;
  --violett-hauch: rgba(122, 86, 240, .16);
  --violett-flaeche: rgba(122, 86, 240, .14);  /* Fläche im Licht von Valoora, derzeit nicht im Einsatz */
  --violett-rand: rgba(155, 123, 245, .5);     /* Rand im Licht von Valoora */
  --auswahl: rgba(122, 86, 240, .45);          /* markierter Text */
  --blau: #6EA8FF;                         /* Markenfarbe, derzeit nicht im Einsatz */
  --bernstein: #E0A458;                    /* „von Hand“: Arbeit, die noch Arbeit ist */
  --bernstein-hauch: rgba(224, 164, 88, .16);
  --bernstein-rand: rgba(224, 164, 88, .5);   /* Rand „von Hand“ (Schalter in Szene 4) */

  /* Licht. --licht wechselt mit der Kundenseite (r, g, b), gesetzt von einstieg.js */
  --licht: 155, 123, 245;
  --licht-leer: 155, 123, 245;             /* Licht der leeren Seite „Deine Firma“ (wie am Anfang) */
  --licht-mint: 77, 220, 158;              /* Mint als Licht (r, g, b): Belege auf der Leistungsseite */
  --licht-violett: 122, 86, 240;           /* Violett als Licht (r, g, b): das Licht von Valoora (ganz oben auf der Startseite, Kopf der Unterseiten, Fuß) */
  --glut-weiss: rgba(255, 255, 255, .9);
  --glut-mint: rgba(77, 220, 158, .9);
  --schein-mint: rgba(77, 220, 158, .6);
  --glut-violett: rgba(155, 123, 245, .7);
  --schein-violett: rgba(122, 86, 240, .55);   /* farbiger Schein unter Flächen im Licht von Valoora */
  --schatten-farbe: rgba(0, 0, 0, .6);
  --kante-dunkel: rgba(0, 0, 0, .4);

  /* ---------- Schatten und Glut ---------- */
  --ring: 0 0 0 1px var(--linie-2);
  --schatten: 0 30px 80px var(--schatten-farbe);
  --schein-seite: 0 60px 140px rgba(var(--licht), .25);
  --glut-v: drop-shadow(0 0 5px var(--glut-weiss)) drop-shadow(0 0 26px var(--glut-violett));
  --glut-linie: drop-shadow(0 0 4px var(--weiss)) drop-shadow(0 0 16px var(--glut-violett)); /* die Lichtkante: das Licht von Valoora */
  --glut-haken: drop-shadow(0 0 8px var(--glut-violett));   /* das V als Haken und Zeichen (Listen, Fragen, Beispiele): immer violett */
  --glut-mint-linie: drop-shadow(0 0 8px var(--schein-mint)); /* Mint-Linien, die angehen (Fundament, Bausteine, Pakete) */
  --glut-korrektur: drop-shadow(0 0 .04em var(--weiss)) drop-shadow(0 0 .22em var(--glut-violett)) drop-shadow(0 0 .5em var(--schein-violett)); /* das V, das korrigiert: nur violettes Licht */
  --glut-strich: 0 0 .1em var(--glut-weiss), 0 0 .45em var(--glut-mint);
  --glut-strich-ruhig: 0 0 .25em var(--mint-rand);
  --glut-name: 0 0 .5em rgba(var(--licht-leer), .55); /* ein Firmenname im Licht (Kontakt-Titel) */
  --schein-punkt: 0 0 0 4px var(--mint-hauch), 0 0 18px var(--schein-mint); /* Punkt, der an ist (V-Weg, Zeitleiste, aktive Seite) */
  --schein-kopf: 0 0 10px var(--glut-weiss), 0 0 28px var(--glut-violett);      /* das wandernde Licht im V-Weg */
  --glas: blur(14px) saturate(1.2);

  /* ---------- Zeichen ---------- */
  --v-zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 200 176'%3E%3Cpath d='M18 18 0 45 76 163h35l76-120-20-26-74 112Z'/%3E%3C/svg%3E"); /* das V aus dem Logo als Maske: Haken, Pfeil der Fragen */
  --pfeil-zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6h13M9 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* der Pfeil: Weiter-Links, Pfeilknöpfe, Listen */

  /* ---------- Schrift ---------- */
  --schrift: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* nur für Code in Belegen (Systemschrift, nichts zu laden) */

  /* Größen: Text */
  --t-label: 11px;                         /* Labels in Versalien, kleinste Angaben */
  --t-klein: 13px;                         /* Bildunterschriften, Hinweise, Fuß */
  --t-ui: 15px;                            /* Knöpfe, Navigation, Namen, kurze Zeilen */
  --t-text: clamp(16px, 1.2vw, 19px);      /* Fließtext */
  --t-lead: clamp(18px, 1.45vw, 24px);     /* Einleitung unter großen Titeln */
  --t-h3: clamp(22px, 2.1vw, 34px);        /* Zwischenüberschriften, Reiter */
  /* Größen: Titel (Handy, ab 821 px siehe unten) */
  --t-held: clamp(28px, 7.6vw, 38px);      /* Hero-Titel, Brücke, Titel der Zwischenseite */
  --t-titel: clamp(42px, 11.6vw, 58px);    /* Abschnittstitel, Menü */
  --t-prinzip: clamp(42px, 11.6vw, 58px);  /* Namen der Prinzipien */
  --t-display: clamp(44px, 12.4vw, 60px);  /* die größte Aussage (Haltung) */
  --t-held-niedrig: clamp(36px, 3.6vw, 60px); /* Hero-Titel in niedrigen Desktop-Fenstern */

  /* Zeilenhöhen */
  --zeile-text: 1.55;
  --zeile-mittel: 1.5;
  --zeile-knapp: 1.45;
  --zeile-zwischen: 1.2;                   /* Zwischenüberschriften und Kernsätze (--t-h3) */
  --zeile-titel: 1.02;
  --zeile-display: .98;

  /* Buchstabenabstand */
  --sperrung-display: -.055em;
  --sperrung-prinzip: -.05em;
  --sperrung-titel: -.045em;
  --sperrung-zwischen: -.03em;
  --sperrung-ui: -.01em;
  --sperrung-meta: .08em;                  /* Versalien klein: Art, Ort, Marken */
  --sperrung-label: .14em;                 /* Versalien: Abschnittslabels */

  /* ---------- Abstände: Viererschritte (Stufe × 4 px) ---------- */
  --a-05: 2px;
  --a-1: 4px;
  --a-2: 8px;
  --a-3: 12px;
  --a-4: 16px;
  --a-5: 20px;
  --a-6: 24px;
  --a-7: 28px;
  --a-8: 32px;
  --a-10: 40px;
  --a-12: 48px;
  --a-16: 64px;
  --a-20: 80px;
  --ziel: 44px;                            /* Mindestgröße für alles, was man antippt */

  /* Vertikaler Takt (Anteil der Fensterhöhe) */
  --takt-1: 2.4svh;                        /* Label zu Titel, Linie zu Name, Name zu Text */
  --takt-2: 3.2svh;                        /* Titel zu Text, Liste zu Text */
  --takt-3: 5svh;                          /* Kopf zu Inhalt (eng) */
  --takt-4: 8svh;                          /* Kopf zu Inhalt */
  --takt-5: 12svh;                         /* Inhalt zu Weiter-Link, großer Block zu Block */
  --takt-6: 16svh;                         /* Kopf zu langer Liste */
  --abschnitt-oben: 18svh;
  --abschnitt-unten: 12svh;

  /* ---------- Radien ---------- */
  --r-xs: 4px;
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 16px;
  --r-pille: 999px;

  /* ---------- Layout ---------- */
  --rand: 20px;                            /* seitlicher Rand */
  --mass-max: 1700px;                      /* groesste Inhaltsbreite, darueber waechst nur der Rand */
  /* Seitenrand, der ab 1812px zum Zentrieren wird. Der Abschnitt selbst bleibt
     randlos, damit Buehnen und Lichtverlaeufe weiter ueber die volle Breite laufen. */
  --rand-aussen: max(var(--rand), calc((100% - var(--mass-max)) / 2));
  --kopf: 64px;                            /* Höhe der Kopfzeile */
  --breite-text: 900px;                    /* schmale Textseiten */
  --breite-schmal: 560px;                  /* kurzer Text unter großer Schrift (Desktop) */
  --breite-handy: 190px;                   /* höchste Breite eines Handys in der Reihe (Arbeiten), Format wie ein iPhone */
  --mass-s: 30ch;                          /* Zeilenlänge: kurze Einleitung */
  --mass-m: 34ch;                          /* Zeilenlänge: Text neben großer Schrift */
  --mass-l: 46ch;                          /* Zeilenlänge: Fließtext */
  --spalten-luecke: 6vw;                   /* zwei Spalten nebeneinander (Desktop): Philip, Kontakt, Unterseiten */
  /* Bühne der Szene 1: Breite und Seitenverhältnis der Kundenseite */
  --platz-b: 76vw;
  --platz-seite: 561 / 1216;

  /* ---------- Bewegung ---------- */
  --weich: cubic-bezier(.2, .8, .2, 1);
  --dauer-0: .15s;                         /* Rückmeldung: Drücken, Hinzeigen (04.10.2026) */
  --dauer-1: .3s;
  --dauer-2: .5s;
  --dauer-3: .8s;
}

/* Desktop ab 821 px (Breakpoint steht so auch in licht.css) */
@media (min-width: 821px) {
  :root {
    --rand: clamp(28px, 3.4vw, 56px);
    --kopf: 80px;
    --platz-b: min(76vw, 1480px, calc((100svh - 300px) * 1.887));
    --platz-seite: 2538 / 1345;
    --t-held: clamp(40px, 4.35vw, 80px);
    --t-titel: clamp(60px, 7.4vw, 136px);
    --t-prinzip: clamp(56px, 7.8vw, 150px);
    --t-display: clamp(64px, 8.4vw, 156px);
    --abschnitt-oben: 20svh;
    --abschnitt-unten: 14svh;
  }
}