/* Zelic Consulting · Design-Tokens · Quelle: Zelic-Brain/Zelic-Intern/Marketing/Website-Designsystem */ :root { /* --- 1 · SCHRIFTFAMILIEN ------------------------------------------------ Inter allein ueber eine ganze Seite ist der staerkste Erkennungsmarker fuer KI-gebaute Websites. Deshalb eine zweite Familie fuer Ueberschriften. --zelic-font-display wird zunaechst auf Inter gesetzt, damit sich nichts aendert, bevor die Zweitschrift entschieden ist. Genau eine Zeile tauschen, dann greift sie ueberall. */ --zelic-font-body: 'Inter', sans-serif; --zelic-font-display: var(--zelic-font-body); /* Entscheid JP 25.08.2026: bleibt Inter (Verkaufsseiten) */ /* Editorial-Schrift, Entscheid JP 25.08.2026: Fraunces, und zwar AUSSCHLIESSLICH fuer die Wissensschicht (/wissen/-Seiten). Verkaufs- und Leistungsseiten bleiben komplett bei Inter. Die Schriftdatei wird von der jeweiligen Wissensseite selbst geladen (self-hosted), dieses Token liefert nur den Namen samt Fallback-Kette. */ --zelic-font-editorial: 'Fraunces', Georgia, 'Times New Roman', serif; /* --- 2 · TYPO-SKALA ----------------------------------------------------- Acht Stufen, Verhaeltnis rund 1,25. Die vier grossen Stufen skalieren mit dem Viewport, damit Mobil nicht die geschrumpfte Desktop-Seite ist. Eine einzelne Seite benutzt typisch fuenf bis sechs davon, nie alle. */ --zelic-t-micro: 0.8125rem; /* 13px · Rechtliches, Bildunterschriften */ --zelic-t-small: 0.875rem; /* 14px · Micro-Copy unter CTAs, Labels */ --zelic-t-body: 1rem; /* 16px · Fliesstext */ --zelic-t-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem); /* 17 bis 19px · Einleitungen */ --zelic-t-h4: clamp(1.1875rem, 1.08rem + 0.5vw, 1.375rem); /* 19 bis 22px */ --zelic-t-h3: clamp(1.4375rem, 1.25rem + 0.9vw, 1.75rem); /* 23 bis 28px */ --zelic-t-h2: clamp(1.75rem, 1.35rem + 2vw, 2.5rem); /* 28 bis 40px */ --zelic-t-h1: clamp(2.25rem, 1.6rem + 3.2vw, 3.5rem); /* 36 bis 56px */ --zelic-t-display: clamp(2.75rem, 1.7rem + 5.2vw, 5rem); /* 44 bis 80px · nur Hero */ /* Zeilenhoehen: je groesser die Schrift, desto enger */ --zelic-lh-tight: 1.08; /* Display und h1 */ --zelic-lh-snug: 1.22; /* h2 und h3 */ --zelic-lh-normal: 1.5; /* Fliesstext */ --zelic-lh-loose: 1.62; /* lange Absaetze */ /* Laufweite: grosse Schrift braucht negative, kleine positive */ --zelic-ls-display: -0.022em; --zelic-ls-head: -0.014em; --zelic-ls-body: 0; --zelic-ls-caps: 0.08em; /* Kicker und Eyebrows in Versalien */ /* Schriftschnitte */ --zelic-w-regular: 400; --zelic-w-medium: 500; --zelic-w-semi: 600; --zelic-w-bold: 700; --zelic-w-black: 800; /* --- 3 · RHYTHMUS ------------------------------------------------------- Der eigentliche Fehler der bisherigen Seiten: 7 von 8 Abschnitten hatten exakt denselben Innenabstand. Wenn jeder Abschnitt gleich beginnt, darf keiner wichtiger sein als ein anderer, und die Seite wird zur Liste. Diese vier Werte sind bewusst weit auseinander. Sie werden gemischt eingesetzt, nicht durchgaengig: tight zwei Abschnitte, die inhaltlich zusammengehoeren normal Standardfall loose Themenwechsel feature vor dem Moment, auf den die Seite hinarbeitet (Preis, Abschluss) */ --zelic-rhythm-tight: clamp(2.5rem, 2rem + 2vw, 3.5rem); /* 40 bis 56px */ --zelic-rhythm-normal: clamp(3.5rem, 2.6rem + 3.6vw, 5rem); /* 56 bis 80px */ --zelic-rhythm-loose: clamp(4.5rem, 3rem + 6vw, 7rem); /* 72 bis 112px */ --zelic-rhythm-feature: clamp(5.5rem, 3.2rem + 9vw, 9.5rem); /* 88 bis 152px */ /* --- 4 · ABSTAENDE INNERHALB VON BAUSTEINEN ----------------------------- Bestand unveraendert uebernommen, damit keine Seite kippt. --zelic-space-lg (20px) faellt aus der Reihe, bleibt aber, weil er im Bestand benutzt wird. Fuer Neubauten nicht mehr verwenden. */ --zelic-space-sm: 8px; --zelic-space-md: 12px; --zelic-space-base: 16px; --zelic-space-lg: 20px; /* Altbestand, nicht mehr neu verwenden */ --zelic-space-2xl: 32px; --zelic-space-3xl: 48px; --zelic-space-4xl: 64px; --zelic-space-5xl: 80px; --zelic-space-6xl: 100px; /* --- 4b · ALTBESTAND: TOKEN, DIE LIVE-SEITEN BENUTZEN -------------------- Diese Werte stammen aus den bestehenden Seiten und bleiben unveraendert, sonst kippt Bestand. Fuer NEUE Seiten gilt stattdessen die Typo-Skala aus Abschnitt 2. Die alte font-Skala hat sieben Stufen zwischen 12 und 18 Pixeln, jeweils einen Pixel auseinander, und keine einzige Ueberschriften-Groesse. Genau das war die Ursache der 169 verschiedenen Schriftgroessen im Bestand. */ --zelic-font-xs: 0.75rem; /* 12px · Altbestand */ --zelic-font-sm: 0.8125rem; /* 13px · Altbestand */ --zelic-font-base: 0.875rem; /* 14px · Altbestand */ --zelic-font-md: 0.9375rem; /* 15px · Altbestand */ --zelic-font-lg: 1rem; /* 16px · Altbestand */ --zelic-font-xl: 1.0625rem; /* 17px · Altbestand */ --zelic-font-2xl: 1.125rem; /* 18px · Altbestand */ --zelic-space-xs: 4px; --zelic-space-xl: 24px; --zelic-bg-white: #ffffff; --zelic-transition-carousel: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); /* --- 5 · MASSE ----------------------------------------------------------- */ --zelic-max-text: 68ch; /* Lesbare Zeilenlaenge fuer Fliesstext */ --zelic-max-page: 1200px; --zelic-max-narrow: 820px; --zelic-gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem); /* --- 6 · FARBEN (Bestand, unveraendert) ---------------------------------- */ --zelic-primary: #D4ED6D; --zelic-primary-hover: #c5e050; --zelic-primary-dark: #b8d45a; --zelic-primary-light: #e5f590; --zelic-success: #00b300; --zelic-bg-dark: #0a0a0a; --zelic-bg-dark-medium: #141414; --zelic-bg-card-dark: #1e1e1e; --zelic-bg-element-dark: #2a2a2a; --zelic-bg-element-dark-hover: #3a3a3a; --zelic-bg-button-dark: #4d4d4d; --zelic-bg-light: #fafafa; --zelic-bg-light-alt: #f5f5f5; --zelic-bg-light-warm: #F8F8F6; --zelic-text-dark: #0a0a0a; --zelic-text-dark-alt: #141414; --zelic-text-dark-heading: #1A1D21; --zelic-text-muted: #737373; --zelic-text-muted-dark: #525252; --zelic-text-muted-light: #a0a0a0; --zelic-text-subtle: #6B7280; --zelic-text-light-warm: #E8E8E2; --zelic-text-white: #ffffff; --zelic-border-subtle: #EFEFEF; --zelic-border-light: #e5e5e5; --zelic-border-medium: #d4d4d4; --zelic-border-dark: #2a2a2a; --zelic-border-dark-medium: #3a3a3a; --zelic-border-dark-light: #4a4a4a; /* --- 7 · RADIEN, SCHATTEN, UEBERGAENGE (Bestand, unveraendert) ----------- */ --zelic-radius-sm: 4px; --zelic-radius-md: 8px; --zelic-radius-base: 10px; --zelic-radius-lg: 12px; --zelic-radius-xl: 16px; --zelic-radius-2xl: 20px; --zelic-radius-3xl: 24px; --zelic-radius-pill: 50px; --zelic-radius-circle: 50%; --zelic-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04); --zelic-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --zelic-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08); --zelic-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.08); --zelic-glow-sm: 0 0 12px rgba(212, 237, 109, 0.3); --zelic-glow-md: 0 0 20px rgba(212, 237, 109, 0.4); --zelic-glow-lg: 0 0 30px rgba(212, 237, 109, 0.6); --zelic-glow-btn: 0 4px 14px rgba(212, 237, 109, 0.3); --zelic-glow-btn-hover: 0 12px 32px rgba(212, 237, 109, 0.4); --zelic-glow-pill: 0 4px 16px rgba(212, 237, 109, 0.35); --zelic-transition: all 0.2s ease; --zelic-transition-medium: all 0.3s ease; --zelic-transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* --- 9 · WISSENSSCHICHT (/wissen/, Entscheid JP 04.09.2026) -------------- Das Designkonzept Wissensseiten (25.08.2026) steht fuer alles unter /wissen/ ueber diesem Token-Fundament und schreibt acht feste Stufen und zwei eigene Flaechentoene vor. Damit auch diese Seiten Tokens konsumieren (Faustregel 1 des Designsystems), stehen die Werte hier einmal zentral. Verkaufs- und Leistungsseiten benutzen sie nicht. */ --zelic-wissen-t-zahl: 51px; /* nur im Kennzahl-Element */ --zelic-wissen-t-h1: 41px; --zelic-wissen-t-h2: 30px; /* Kapitel, als Frage formuliert */ --zelic-wissen-t-h3: 22px; --zelic-wissen-t-lead: 21px; /* Einleitung, Antwort-Boxen */ --zelic-wissen-t-body: 18px; /* Fliesstext, Zeilenhoehe 1,65 */ --zelic-wissen-t-klein: 15px; /* Bildunterschriften, Quellen, Meta */ --zelic-wissen-t-kicker: 14px; /* Versalien, weite Laufweite */ --zelic-wissen-flaeche: #F6F6F3; /* Kapitelflaeche, wechselt mit Weiss */ --zelic-wissen-box: #E8E8E2; /* Antwort-Box */ --zelic-wissen-text-sekundaer: #55554F; /* leise Zeilen, 6,9:1 auf der Kapitelflaeche */ --zelic-wissen-text-grau: #6B6B6B; /* zweifarbige Ueberschrift, 5,3:1 auf Weiss */ --zelic-wissen-linie: #E3E3DC; /* Hairlines */ } /* --- 8 · BEWEGUNG NUR AUF WUNSCH ------------------------------------------ Wer im Betriebssystem reduzierte Bewegung eingestellt hat, bekommt keine. Gilt fuer alle Seiten, ohne dass eine Seite etwas tun muss. */ @media (prefers-reduced-motion: reduce) { :root { --zelic-transition: none; --zelic-transition-medium: none; --zelic-transition-smooth: none; } }