/* ============================================================
   Olevon Studio — Design Tokens
   Alles Gestalterische wird hier entschieden. Wenn ihr die Farbe,
   die Schriftgrößen oder die Abstände ändern wollt: nur hier.
   ============================================================ */

:root {
  /* --- Farben -------------------------------------------------
     Die Seite ist schwarzweiß. Die einzige Farbe kommt aus euren
     Bildern und Videos.

     [AKZENT] --c-accent ist die Betonungsfarbe: Kontakt-Button,
     ausgewählte Chips, Schlussblock. Auf Schwarz gestellt heißt
     das: betont wird durch Umkehrung, nicht durch Farbe.
     Wollt ihr doch einen Farbton, reichen diese zwei Zeilen —
     z. B. Signalorange #e8410a mit weißer Schrift. Alles andere
     zieht automatisch nach.                                     */
  --c-paper:      #ffffff;
  --c-ink:        #000000;
  --c-accent:     #000000;
  --c-accent-ink: #ffffff;

  /* Farbe des Fokusrahmens. Wird in dunklen Abschnitten weiter
     unten auf Weiß gedreht, sonst wäre er dort unsichtbar. */
  --c-focus:      #000000;

  --c-grey-90:    #454545;  /* Fließtext auf Weiß, gedämpft */
  /* Labels, Meta. War #999999 — das ergab auf Weiß nur 2,85:1 und lag
     damit unter den 4,5:1, die WCAG AA für Text unter 24 px verlangt.
     Betroffen waren alle Mono-Labels bei 11 px und die Feldnamen im
     Kontaktformular. #767676 erreicht 4,54:1 und bleibt optisch ein
     zurückgenommenes Grau. */
  --c-grey-60:    #767676;
  --c-grey-20:    #e1e1e1;  /* Linien, Flächen */
  --c-grey-08:    #f4f4f4;  /* Platzhalter-Grund */

  /* Auf dunklem Grund */
  --c-ink-invert:      #ffffff;
  --c-grey-invert-60:  rgba(255, 255, 255, 0.58);
  --c-grey-invert-20:  rgba(255, 255, 255, 0.16);

  /* --- Schrift ------------------------------------------------ */
  --f-display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body:    "Switzer", "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono:    "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Anzeigegrößen — fluid, ohne Media Queries */
  --fs-hero:    clamp(3.25rem, 9.4vw, 10rem);   /* Claim auf der Startseite */
  --fs-display: clamp(2.75rem, 6.6vw, 6.5rem);  /* Section-Headlines */
  --fs-title:   clamp(1.75rem, 3.2vw, 3rem);    /* Karten-, Case-Titel */
  --fs-lead:    clamp(1.125rem, 1.6vw, 1.5rem); /* Vorspann */
  --fs-body:    clamp(1rem, 1.05vw, 1.0625rem);
  --fs-small:   0.875rem;
  --fs-mono:    0.6875rem;                      /* 11px — Labels */
  --fs-mono-sm: 0.625rem;                       /* 10px — Uhr, Fußnoten */

  /* Display: Zeilen stehen auf Kante — aber ohne Berührung. In Inter Tight
     reichen die Punkte eines Ü bis 0,937 em über die Grundlinie und ein g
     bis 0,216 em darunter. Bei 0,94 saßen die Umlautpunkte deshalb exakt
     auf der Grundlinie der Zeile darüber („Launch & / Übergabe"), und
     Oberlängen liefen in Unterlängen („Strategie / & Leitidee"). 1,04
     lässt rund 0,1 em Luft unter dem höchsten Zeichen und bleibt eng. */
  --lh-tight: 1.04;
  --lh-snug:  1.12;
  --lh-body:  1.55;

  --ls-mono:  0.08em;
  --ls-tight: -0.03em;

  /* --- Raster & Abstände -------------------------------------- */
  --gutter:      clamp(1.25rem, 3.4vw, 3rem);   /* Seitenrand */
  --grid-gap:    clamp(1rem, 1.6vw, 1.5rem);
  /* Ein gemeinsamer Rhythmus für alle neuen Abschnitte. Der frühere Wert
     wuchs am Desktop bis 11rem und ließ einzelne Übergänge deutlich weiter
     auseinanderfallen als andere. */
  --section-y:   clamp(4rem, 6vw, 6rem);
  --section-head-gap: clamp(1rem, 1.4vw, 1.5rem);
  --stack-sm:    0.75rem;
  --stack-md:    1.5rem;
  --stack-lg:    clamp(2rem, 4vw, 3.5rem);
  --maxw:        120rem;                        /* 1920px Deckel */
  --maxw-text:   38ch;

  /* --- Formen -------------------------------------------------- */
  --r-pill: 80px;
  --r-card: 20px;
  --r-sm:   10px;
  --r-xs:   4px;

  --line: 1px solid var(--c-grey-20);

  /* --- Bewegung ------------------------------------------------
     Ein Easing für alles. Das hält die Seite ruhig.              */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --t-fast:    0.24s;
  --t-mid:     0.5s;
  --t-slow:    0.9s;

  /* --- Ebenen -------------------------------------------------- */
  --z-nav:     100;
  --z-overlay: 200;
  --z-intro:   300;
}

/* Höhe der schwebenden Navigation — von JS nicht gebraucht,
   aber mehrfach in Layouts referenziert. */
:root {
  --nav-h: 52px;
  --nav-top: clamp(0.75rem, 1.4vw, 1.25rem);
}