/* ========================================================= obsrv* — Design-Token --------------------------------------------------------- Die einzige Datei im Projekt, in der Farbwerte, Schriftgroessen, Abstaende und Zeiten als Zahl stehen. Alles Uebrige verweist mit var(--token) hierher (BS-5.5). Wer die Gestaltung aendern will, aendert sie hier — einmal, und sie gilt ueberall. Die ausfuehrliche Begruendung der Werte steht in DESIGNSYSTEM.md. ========================================================= */ :root { /* ============================================== 1 · FARBEN Jede Farbe steht zusaetzlich als reine Kanalfolge (--*-rgb) bereit. Damit laesst sich eine Farbe mit Deckkraft schreiben, ohne den Wert ein zweites Mal zu wiederholen: rgb(var(--cream-rgb) / .62) ============================================== */ /* Akzent — aus dem Logo abgeleitet */ --blue: #2E3EAC; --blue-rgb: 46 62 172; --blue-deep: #22307C; --blue-deep-rgb: 34 48 124; --blue-soft: #E7E9F8; /* Neutrale Palette, hell nach dunkel */ --paper: #FBFAF7; --paper-rgb: 251 250 247; --cream: #F4F1E6; --cream-rgb: 244 241 230; --sand: #F0EEE8; --stone: #E3E0D8; --white: #FFFFFF; --white-rgb: 255 255 255; /* Linien */ --line: #E4E2DC; /* ruhige Trennlinien im Fliesstext */ --line-strong: #8E897E; /* Raender von Bedienelementen: 3,34 : 1 auf Papier */ /* Schriftfarben. --grey ist der Ton fuer Kleintext und erreicht auf --paper 5,35 : 1. --grey-soft ist heller und daher nur fuer grossen Text (ab 24 px oder 19 px fett) oder fuer nicht tragende Zeichen zugelassen. */ --grey: #65686F; --grey-soft: #8C8F96; --graphite: #4B4F58; --ink: #14161C; --ink-rgb: 20 22 28; /* Fehlermeldungen im Formular. Rotbraun statt Signalrot, damit es zur Palette passt — 6,77 : 1 auf Papier, 6,09 : 1 auf Sand. */ --fehler: #A32E22; /* Hinweiskasten in den Rechtstexten */ --note-bg: #FFF6D8; --note-line: #E0B93B; --note-ink: #6B5310; /* ============================================== 2 · SCHRIFT ============================================== */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --font-display: "The Poet", "Snell Roundhand", cursive; /* ---- Textskala · 8 Stufen ---- Fuer alles, was gelesen wird. Ab 1600 px Fensterbreite werden die Stufen weiter unten einmal neu gesetzt — die Regeln im Stylesheet bleiben davon unberuehrt. */ --fs-1: 10px; /* Bildbadge, Zaehler — reine Auszeichnung, kein Lesetext */ --fs-2: 11px; /* Mikro-Label, Ueberzeile, Feldbeschriftung */ --fs-3: 12px; /* Meta-Zeile, Navigation, Kapitaelchen */ --fs-4: 13px; /* Hinweis, kleiner Link */ --fs-5: 14px; /* Kleintext, Kartentext */ --fs-6: 15px; /* Fliesstext in Listen und Rechtstexten */ --fs-7: 16px; /* Fliesstext, Eingabefelder */ --fs-8: clamp(15px, 1.2vw, 17.5px); /* Lead, Einleitung */ /* ---- Displayskala · 5 Stufen ---- Fuer Ueberschriften und die grossen Zeichen. Sie waechst mit der Fensterbreite, deshalb clamp() statt fester Werte. */ --fs-d1: clamp(16px, 1.6vw, 20px); /* Kontaktangaben */ --fs-d2: clamp(20px, 2.2vw, 28px); /* h3, Zwischenueberschrift */ --fs-d3: clamp(20px, 3.4vw, 40px); /* grosse Mailadresse */ --fs-d4: clamp(30px, 4.6vw, 58px); /* h2 */ --fs-d5: clamp(40px, 7vw, 88px); /* h1 */ /* Zwei Sonderfaelle ausserhalb der Skala, weil sie keine Schrift im Lesesinn sind, sondern Bildmarken: der Asterisk im Hero und der Satz daneben. */ --fs-brand: 30px; /* Wortmarke in der Kopfzeile */ --fs-nav-mobil: 26px; /* Menuepunkte im Vollbildmenue am Handy */ --fs-mark: clamp(88px, 21vw, 300px); --fs-hero-line: clamp(14px, 3.2vw, 26px); --fs-brand-footer: clamp(46px, 6vw, 78px); /* Die Wortmarke im Hero wird erst von logo.js eingesetzt. Damit die Seite dabei nicht springt, steht ihr Platz schon im Stylesheet: Breite und Seitenverhaeltnis der SVG-Datei (viewBox 420 x 255). */ --logo-hero-breite: min(74vw, 820px); --logo-hero-verhaeltnis: 1.6471; /* Seitenverhaeltnis der breiten Bildfelder. Der Rahmen schneidet das Bild zu (object-fit: cover) — steht hier ein anderes Verhaeltnis als im Foto, verliert es oben und unten. 16/11 ist der Normalfall; die Webseiten- Projekte zeigen ihre Bildschirmfotos in einem flacheren Format. */ --bild-breit: 16 / 11; --bild-kino: 16 / 9; /* wie die Videokacheln daneben */ /* Abstand von der Ueberzeile zur Ueberschrift darunter. Steht hier, weil der kleine Text rechts im Seitenkopf um genau diesen Betrag nach unten versetzt wird — sonst beginnen die beiden Spalten nicht auf einer Hoehe. */ --ueberzeile-abstand: 18px; /* Von der Oberkante des Textkastens bis zur Oberlaenge der Buchstaben ist immer ein Stueck Luft: halbe Zeilenhoehe plus der Teil des Kastens, den die Schrift ueber H hinaus freilaesst. Beides ist bei einer Schrift ein fester Anteil der Schriftgroesse. Gemessen an Helvetica Neue: h1 (Zeilenabstand 1,05) 0,1611 x Schriftgroesse Lead (Zeilenabstand 1,65) 0,4641 x 15 px = 6,96 px Damit laesst sich der kleine Text rechts so setzen, dass seine Oberlaenge auf einer Linie mit der Oberlaenge der Ueberschrift sitzt — nicht die unsichtbaren Kaesten, sondern die Buchstaben selbst. */ --h1-bis-oberlaenge: .1611; --lead-bis-oberlaenge: 6.96px; /* ---- Zeilenabstaende ---- */ --lh-tight: 1.05; /* Ueberschriften */ --lh-snug: 1.35; --lh-base: 1.6; /* Fliesstext */ --lh-loose: 1.7; /* Rechtstexte, lange Absaetze */ /* ---- Laufweite · 5 Stufen ---- */ --ls-tight: -0.02em; /* Ueberschriften */ --ls-snug: -0.01em; /* Fliesstext */ --ls-normal: .04em; /* leicht geoeffnet */ --ls-wide: .12em; /* Kapitaelchen */ --ls-wider: .18em; /* Ueberzeilen, weit gesperrt */ /* ============================================== 3 · ABSTAENDE · 6 Stufen Grundmass 4 px. Die Stufen verdoppeln sich ungefaehr, damit Abstaende auf einen Blick unterscheidbar bleiben. ============================================== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 40px; --sp-6: 64px; /* Abstand zwischen zwei Abschnitten — waechst mit der Fensterbreite */ --sp-section: clamp(64px, 9vw, 140px); /* ============================================== 4 · MASSE ============================================== */ --wrap: 1280px; --gutter: clamp(20px, 5vw, 64px); --header-h: 76px; --r: 2px; /* Eckenradius. Fast eckig, nur entschaerft */ /* ============================================== 5 · BEWEGUNG · 3 Stufen Keine Uebergangsdauer ueber 600 ms (BS-11.4). ============================================== */ --dur-0: 1ms; /* praktisch sofort — fuer "Bewegung reduzieren" */ --dur-1: 200ms; /* Farbwechsel, Deckkraft */ --dur-2: 350ms; /* Bewegung kleiner Elemente */ --dur-3: 600ms; /* Flaechen, Einblendungen, Menue */ --ease: cubic-bezier(.22, .61, .36, 1); /* Dauerhafte Bewegungen. Keine Uebergaenge, sondern Schleifen — deshalb ausserhalb der Stufenskala. */ --dur-spin: 18s; /* Drehung des Asterisk */ --dur-cue: 2.4s; /* Wippen des Scroll-Pfeils */ /* ============================================== 6 · FOKUS Ein einziger, ueberall gleicher Rahmen fuer die Tastaturbedienung (BS-9.2). Der Versatz laesst ihn auch auf dunklem Grund stehen. ============================================== */ /* ---- Zurueckgenommener Text ---- Leiser Text wird ueber Deckkraft gedaempft, nicht ueber eine eigene Farbe. Diese zwei Werte sind die kleinsten, die auf ihrem Untergrund noch 4,5 : 1 halten (WCAG 2.2, BS-11.1). Tiefer darf keiner davon. */ --op-leise: .62; /* Fusszeile, Sprachschalter, Trennzeichen */ --op-leise-klein: .82; /* die 10-px-Zahlen in der Filterleiste */ --focus-color: var(--blue); --focus-width: 2px; --focus-offset: 3px; } /* ========================================================= GROSSE BILDSCHIRME · ab 100rem (1600 px) --------------------------------------------------------- Auf einem Standbildschirm wirkt die Schrift sonst verloren klein. Die Textskala rueckt deshalb geschlossen eine Spur nach oben — die Regeln im Stylesheet muessen dafuer nichts wissen. ========================================================= */ @media (min-width: 100rem) { :root { --fs-2: 12px; --fs-3: 13px; --fs-4: 14px; --fs-5: 15.5px; --fs-6: 16.5px; --fs-7: 17px; --fs-8: 18.5px; --fs-d1: 22px; --fs-d2: 30px; --fs-d3: clamp(20px, 3.4vw, 52px); --fs-d4: clamp(30px, 4.6vw, 68px); --fs-d5: clamp(40px, 7vw, 108px); --fs-hero-line: 30px; } }