/* ══════════════════════════ tokens.css ══════════════════════════
   Alle Design-Werte an einem Ort. Nichts hier hat einen Selektor -
   das sind nur Variablen, die global.css benutzt.

   Warum überhaupt: Wenn das Rot an neun Stellen im CSS steht und du es
   ändern willst, änderst du acht davon und findest die neunte drei Wochen
   später. Hier steht es einmal.

   Navbar- und Hero-Tokens sind jetzt da. css/preloader.css braucht keine
   eigenen: Sie übernimmt bewusst --hero-bg/--hero-text/--morph, damit
   der Übergang von der Lade-Maske zum Hero darunter farblich nahtlos
   wirkt statt wie ein Bruch zwischen zwei Paletten.
   ═══════════════════════════════════════════════════════════════ */

:root{

  /* ── Farbe ────────────────────────────────────────────────────
     Die Zahlen in Klammern sind die Kontrastverhältnisse. WCAG 2.2 AA
     verlangt 4.5:1 für normalen Text. Deshalb stehen sie dabei, damit
     man beim Ändern sieht, wie viel Luft noch da ist. */
  --bg:#F7F6F3;             /* Seitenhintergrund */
  --surface:#ffffff;        /* Karten, Pill, Overlay */
  --ink:#1a1a1a;            /* Text: 16.1:1 auf --bg */
  --muted:#4a4a4a;          /* Nebentext: 8.2:1 auf --bg */

  /* Markenrot. Nur für Flächen, Rahmen und Dekoration.
     Als Textfarbe liegt es auf --bg bei genau 4.50:1 und damit exakt auf
     der AA-Grenze: ein Wert, der beim Runden kippen kann. */
  --accent:#DA291C;

  /* Dieselbe Farbfamilie, für TEXT abgedunkelt: auf --bg 5.38:1.
     Sieht aus wie dasselbe Rot, nur ohne Grenzfall. */
  --accent-ink:#C42418;

  --hairline:rgba(26,26,26,.12);

  /* Zwei Namen für dieselbe Farbe. Mit Absicht.
     Die Navbar liegt hier über hellem Grund. Kommt später eine dunkle
     Hero-Box darunter, ändert man nur diese zwei Zeilen statt jede
     Navbar-Regel. */
  --hero-ink:var(--ink);
  --hero-muted:var(--muted);


  /* ── Bewegung ─────────────────────────────────────────────────
     Drei Kurven, drei Aufgaben. Immer dieselben zu verwenden ist der
     Unterschied zwischen "wirkt wie aus einem Guss" und "wirkt gebastelt".

     morph   gleichmässig, für Grössen- und Formwechsel
     spring  schiesst leicht über und federt zurück
     settle  schnell los, sanft auslaufend */
  --morph:cubic-bezier(0.32, 0.72, 0, 1);
  --spring:cubic-bezier(0.34, 1.42, 0.64, 1);
  --settle:cubic-bezier(0.22, 1, 0.36, 1);

  /* Hinweg langsamer als Rückweg: Das Einrasten in die Pill darf man
     sehen, das Zurückgehen soll nur nicht im Weg sein. */
  --dur-in:.52s;
  --dur-out:.42s;


  /* ── Raster ───────────────────────────────────────────────────
     Ein gemeinsamer Aussenabstand für alles. clamp(min, wächst, max):
     18px auf dem Handy, 48px auf grossen Bildschirmen, dazwischen
     stufenlos, statt drei Breakpoints, die man pflegen muss. */
  --gutter:clamp(18px,3.2vw,48px);

  --nav-h:76px;             /* Höhe der Navbar im Ruhezustand */
  --brand-fs:19px;          /* Schriftgrösse der Wortmarke */

  /* Maximale Inhaltsbreite: aus dem Design System (Page max-width). */
  --wrap-max:1440px;


  /* ── Design-System-Tokens: Abstand & Form ────────────────────────
     Importiert aus dem übergebenen Token-Set (Spacing & Shapes).
     Basiseinheit 4px, Dichte "comfortable". Nur diese Kategorie wurde
     übernommen. Farbe und Typografie bleiben unverändert (siehe oben). */

  --spacing-4:4px;
  --spacing-8:8px;
  --spacing-12:12px;
  --spacing-16:16px;
  --spacing-20:20px;
  --spacing-24:24px;
  --spacing-40:40px;
  --spacing-48:48px;
  --spacing-56:56px;

  /* Radius: nur noch zwei Werte statt drei, für ein einheitlicheres Bild.
     Eckige Elemente (Karten, Bilder, Inputs) teilen sich EINEN Radius -
     kein Sonderfall mehr, bei dem Inputs minimal enger sind als die Karte,
     in der sie liegen. Pills (Tags/Buttons) bleiben separat voll gerundet. */
  --radius-tag:980px;
  --radius-button:980px;
  --radius-card:16px;
  --radius-image:var(--radius-card);
  --radius-input:var(--radius-card);

  --shadow-xl:rgba(0,0,0,.22) 3px 5px 30px 0px;

  --section-gap:64px;       /* Abstand zwischen den Inhaltsblöcken einer Section */
  --card-padding:24px;      /* Innenabstand von Karten */
  --element-gap:12px;       /* Abstand zwischen eng verwandten Elementen */


  /* ── Kontakt-Knopf ────────────────────────────────────────────
     Als Variablen, weil derselbe Knopf im Mobile-Menü grösser ist.
     Dort werden nur diese vier Werte überschrieben, das restliche CSS
     bleibt unangetastet. */
  --cta-w:118px;
  --cta-h:42px;
  --iris-x:21px;            /* Startposition des roten Punkts */
  --iris-size:132px;        /* Grösse, auf die er beim Hover aufgeht */


  /* ── Hero ─────────────────────────────────────────────────────
     Dunkle Karte statt heller Seite. Deshalb eigene Farben statt der
     Token oben, und --hero-ink/--hero-muted (Abschnitt Farbe) laufen ab
     hier tatsächlich auf diese Werte um, sobald js/nav.js sie umschaltet.
     --hero-bg deckt sich bewusst mit dem Favicon-Kasten (favicon.svg),
     damit Tab-Icon und Hero aus einem Guss wirken. */
  --hero-bg:#131211;
  --hero-border:rgba(255,255,255,.08);
  --hero-text:#F7F6F3;

  /* Das Markenrot ist für HELLEN Grund kalibriert (siehe --accent oben).
     Auf --hero-bg (fast Schwarz) wirkt derselbe Ton stumpf und liegt bei
     der kleinen Rollen-Schrift unter 4.5:1. Angehellt statt gesättigt,
     damit es nach derselben Farbfamilie aussieht: auf --hero-bg 5.8:1. */
  --accent-on-dark:#FF6E5C;

  /* Abstand der Box zur Navbar oben, und ihre Höhe: sie füllt die
     Resthöhe des Viewports (siehe #home in hero.css).

     + var(--gutter) voll ergab spürbar mehr Luft oben als seitlich/unten:
     die Navbar ist im Ruhezustand transparent, darunter also nur leere
     Seitenfläche bis zur dunklen Box. Ein voller Gutter obendrauf sah
     dadurch nach deutlich mehr aus, nicht nach demselben Abstand. Ein
     Bruchteil des Gutters reicht als zusätzliche Luft unter der Navbar. */
  --hero-top:calc(var(--nav-h) + var(--gutter) * .35);
  --hero-box-h:calc(100svh - var(--hero-top) - var(--gutter));
  --hero-pad-v:clamp(28px,5vh,56px);
  --hero-pad-h:clamp(20px,5vw,64px);

  /* Auf schmalen Screens steht der Name für sich (gestapelt, über dem
     Foto) und darf bescheiden bleiben. Ab 1241px liegt er einzeilig
     HINTER dem Foto (siehe hero.css). Dafür muss er breiter sein als
     das Foto, sonst ragt links und rechts nichts mehr heraus und der
     Name ist komplett verdeckt. 140px Obergrenze ist bewusst grosszügig;
     nachjustieren, falls der Rand zu knapp oder zu breit wirkt. */
  --hero-name-fs:clamp(48px,9vw,140px);

  /* 935 × 1169 ist die Auflösung des Ausgangsfotos (assets/hero/README.md).
     880px als Obergrenze bleibt knapp darunter, mehr würde das Bild
     sichtbar hochskalieren.

     min(44vw, ...) statt nur 44vw: 44vw allein kennt nur die Breite des
     Viewports, nicht seine Höhe. Auf einem breiten, aber flachen Bildschirm
     (z.B. 1440×900 Laptop) wurde das Foto dadurch höher als der Platz, den
     --hero-box-h vorsieht. Die Box wuchs über ihr eigenes Budget hinaus
     und schob alles darunter zusätzlich nach unten (bemerkbar als
     überraschend viel zusätzlicher Scrollweg). Der zweite Term rechnet
     über das Seitenverhältnis (.8) zurück, wie breit das Foto höchstens
     sein darf, damit seine Höhe nicht über die Box hinausschiesst.

     .72 statt .5: Name und Foto liegen ab 1241px übereinander in
     derselben Zelle (hero.css), teilen sich die Höhe also nicht mehr wie
     im gestapelten Layout. Das Foto darf fast die ganze Boxhöhe
     einnehmen. .85 probiert und wieder zurückgenommen: löste bei 1440×900
     erneut einen kleinen Überlauf aus (22px). .72 bleibt knapp
     drunter, deutlich grösser als .5 aber ohne diesen Rand erneut zu
     riskieren. */
  --hero-photo-w:clamp(260px,min(44vw,calc(var(--hero-box-h) * .72)),880px);
  /* 4:5 (935 × 1169), das Seitenverhältnis des tatsächlichen Fotos. */
  --hero-photo-ratio-num:.8;
}


/* Auf schmalen Geräten wird die Navbar flacher. --nav-h muss deshalb
   mitziehen. Die Hero-Box rechnet ihren Abstand und ihre Höhe darüber. */
@media (max-width:640px){
  :root{--nav-h:66px}
}