/* ============================================================================ Christiane Vogel — Gestaltungstokens Quelle: 01_Assets/brand-guide/2026-08-21-brand-guide-christiane-vogel.pdf Angelegt 25.08.2026. Werte abgeschrieben, nicht erfunden. Regel für diese Datei: hier steht nur, was im Brand Guide steht. Wer einen Wert braucht, den der Guide nicht kennt, meldet das als Befund, statt hier still eine neue Variable aufzumachen. ============================================================================ */ /* --- Schriften, selbst gehostet ------------------------------------------- Kein Google-Fonts-CDN. Die Kundin sitzt in der Schweiz, die Besucher in der EU; ein CDN-Abruf gäbe die IP an Google weiter (LG München I, 3 O 17493/20). Der Livestand hostet Kanit aus demselben Grund schon selbst. Beide Familien sind Variable Fonts: eine Datei je Subset deckt alle Schnitte. -------------------------------------------------------------------------- */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; /* wght-Achse der Datei */ font-display: swap; src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/caveat-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/caveat-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* --- Farben, Brand Guide Seite „Colours" ------------------------------- */ --cv-slate-800: #1e293b; /* Primary Dark — Headlines, Primärtext, dunkle Flächen */ --cv-coral: #f95738; /* Hero Accent / CTA — primäre Buttons, Logo-Punkt */ --cv-teal-dark: #156363; /* Section Deep — Kompass-Hintergründe, Executive Cards */ --cv-sand: #e7d5c7; /* Warm Neutral — dekorative Linien, feine Trenner */ --cv-teal-mid: #0f766e; /* Sekundär — verbindende Grafiken, Kicker */ --cv-body: #475569; /* Fliesstext und Zwischenüberschriften */ --cv-off-white: #f8fafc; /* Sektionshintergründe */ --cv-border: #cbd5e1; /* Rahmen, 1 px — siehe OFFEN 2 unten */ --cv-white: #ffffff; /* --- Rollen ------------------------------------------------------------ */ --cv-text: var(--cv-slate-800); --cv-text-muted: var(--cv-body); --cv-surface: var(--cv-white); --cv-surface-alt: var(--cv-off-white); --cv-surface-deep: var(--cv-teal-dark); --cv-accent: var(--cv-coral); /* --- Typografie -------------------------------------------------------- */ --cv-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --cv-font-accent: 'Caveat', 'Segoe Script', cursive; --cv-weight-light: 300; /* Fliesstext */ --cv-weight-medium: 500; /* Buttons, Navigation */ --cv-weight-semibold: 600; /* H1–H3, Kicker */ /* Grade und Zeilenhöhen wörtlich aus dem Guide. Zur Herkunft: der Entwurf ist ein 1646-pt-Bogen ohne angegebene Entwurfsbreite, seine PDF-Metrik lässt sich nicht sauber in CSS-Pixel umrechnen. Deshalb gilt die Zahl aus dem Guide, nicht meine Messung. */ --cv-hero-size: 48px; --cv-hero-lh: 55.2px; --cv-hero-ls: -1.2px; --cv-h1-size: 24px; --cv-h1-lh: 33px; --cv-h2-size: 17.5px; --cv-h2-lh: 25px; --cv-kicker-size: 12px; --cv-kicker-lh: 16px; --cv-kicker-ls: 2.4px; --cv-body-size: 14px; --cv-body-lh: 22.75px; /* siehe OFFEN 3 */ --cv-accent-size: 28px; /* Caveat, Guide: 24–32 px */ /* Knopfmasse, Guide-Wert 12 px Medium — gilt in JEDER Kontrastvariante. Am 29.08.2026 stand hier kurz ein 24-px-Knopf: ab 24 px gilt die WCAG-Grenze 3,0 statt 4,5, und Weiss auf Korall besteht mit 3,26. Das rechnet sich, sieht aber als Balken aus (Kopfknopf 450 × 62 statt 268 × 44 px) und ist zurückgenommen. Der Kontrast kommt jetzt aus der Schriftfarbe, siehe OFFEN 1a. */ --cv-btn-size: 12px; --cv-btn-ls: 1.2px; --cv-btn-pad-y: 14px; --cv-btn-pad-x: 24px; /* --- Form -------------------------------------------------------------- */ --cv-radius: 0; /* Brand Guide: Border-Radius 0 px, überall */ --cv-icon-stroke: 1.75px; /* Lucide, Guide: 1,5–2,0 px */ --cv-icon-size: 24px; --cv-icon-size-lg: 40px; } /* ============================================================================ OFFEN — drei Werte, die der Guide so vorgibt, dass sie messbar durchfallen. Nicht still korrigiert. Jeder Vorschlag bleibt INNERHALB der Palette; eine neue Marken-Hexzahl zu erfinden wäre der falsche Weg. 1 Weiss auf Korall #f95738 misst 3,26:1. Normaler Text braucht 4,5:1. Betrifft den primären Knopf und den Kopf-CTA im freigegebenen Entwurf. Innerhalb der Palette lösbar auf zwei Wegen: a) Knopfschrift auf Slate 800 statt Weiss -> 4,49:1 b) Knopfschrift gross genug setzen (ab 18,66 px fett bzw. 24 px), dann gilt die Grenze 3,0 und Weiss reicht. Weg b) war einen Tag live und macht aus dem Kopf-CTA einen Balken; gemessen 450 × 62 statt 268 × 44 px, deshalb zurückgenommen. ENTSCHIEDEN 31.08.2026 (Ian): keiner von beiden. Der Knopf trägt Weiss, wie der Guide ihn zeichnet, und bleibt bei 3,26:1. Bewusster Markenentscheid, kein Versehen — Christiane muss die Zahl hören. Weg a) bleibt als Rückweg über --cv-btn-primary-fg erreichbar. 2 Rahmen #cbd5e1 auf Weiss misst 1,48:1. Bedienelementkanten brauchen 3,0 (WCAG 1.4.11). Der zweite Knopf hat faktisch keine sichtbare Kante. Innerhalb der Palette wäre es lösbar: Rahmen auf --cv-body #475569 -> 7,58:1. ENTSCHIEDEN 31.08.2026 (Ian): der Guide gilt, #cbd5e1 bleibt. Vom 29.08. bis 31.08. stand hier Korall #f95738 (3,26:1); das war markenfremd am Secondary Button und ist zurückgenommen. Der Befund bleibt offen und gehört Christiane. 3 Fliesstext 14 px ist klein. Der Guide sagt es so, und Christianes Zielgruppe sind Geschäftsführungen, also eher ältere Augen. 16 px wäre die übliche Grundlinie. Das ist kein WCAG-Verstoss, nur eine Empfehlung, und sie gehört der Kundin, nicht mir. Solange nichts entschieden ist, setzt der Bau KEINEN dieser Werte eigenmächtig um. Die Variablen oben bilden den Guide ab, wie er ist. ============================================================================ */