/* ============================================================ 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. Sie trifft genau eine sichtbare Stelle: den Kontakt-Knopf in der Navigation. Am 15. Oktober 2026 kurz auf Orange (#d63a08) gestellt und noch am selben Tag zurückgenommen — ein einzelner bunter Knopf hat die Seite nicht weniger schwarzweiss gemacht, er stand nur fremd darin. Die Abstufung der Flächen weiter unten leistet das besser. Wollt ihr es doch nochmal versuchen: Diese eine Zeile auf einen Farbwert stellen. Dann aber auch den Block `.nav .pill--accent` in components.css prüfen — er kehrt den Knopf bewusst gegen seinen Untergrund um, und das würde die Farbe wieder überschreiben. */ --c-paper: #ffffff; /* Seit 19. Oktober 2026 ein einziges Schwarz für die ganze Seite: Schrift, Knöpfe, Fußzeile, Intro und Seitenwechsel tragen denselben aufgehellten Ton wie die dunklen Abschnitte. Vorher lag die Fußzeile samt Knöpfen und Vorhang auf reinem #000 und stach sichtbar gegen die #111113-Flächen ab. Ändern: nur diese Zeile. */ --c-ink: #111113; --c-accent: var(--c-ink); --c-accent-ink: #ffffff; /* Farbe des Fokusrahmens. Wird in dunklen Abschnitten weiter unten auf Weiß gedreht, sonst wäre er dort unsichtbar. */ --c-focus: var(--c-ink); /* --- Flächen ------------------------------------------------- Bis zum 15. Oktober 2026 gab es genau zwei: reines Weiß und reines Schwarz. Dadurch wirkte die Seite flach — alles lag entweder ganz vorn oder ganz hinten, dazwischen nichts. Das war der Grund für den Eindruck „zu schwarzweiß". Jetzt vier Stufen, von hell nach dunkel: --c-paper #ffffff Grundfläche der Seite --c-flaeche-hell #f7f6f4 zweite helle Fläche, leicht warm --c-flaeche-dunkel #111113 dunkle Abschnitte --c-ink #111113 Fußzeile, Knöpfe und Schrift Seit 19. Oktober 2026 sind die beiden dunklen Stufen gleich: Fabio wollte keine Fußzeile auf reinem Schwarz neben den helleren Flächen, sondern einen durchgehenden Ton. */ --c-flaeche-hell: #f7f6f4; --c-flaeche-dunkel: var(--c-ink); --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. */ /* Von #767676 auf #6f6f6f nachgezogen: Auf reinem Weiß reichte #767676 mit 4,54:1 gerade eben, auf der neuen hellen Fläche #f7f6f4 wären es nur noch 4,21:1 gewesen. #6f6f6f kommt auf 5,03:1 bzw. 4,65:1 und bleibt damit auf beiden Gründen sicher. */ --c-grey-60: #6f6f6f; --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: 1.25rem; --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: 3.25rem; /* 52px bei 16px-Wurzel; wächst am grossen Schirm mit */ --nav-top: clamp(0.75rem, 1.4vw, 1.25rem); }