/* ===================================================================== KUSCH & WIRTZ — Token-System (Stand 24.09.2026) Quelle der Marke: die Beschriftung der roten Firmenwagen (Signalrot, Signalgelb der Sicherungsleiste, Kabelschwarz). OKLCH ist der Wert. Die #hex-Angabe im Kommentar dahinter ist nur Dokumentation des Zielwerts, kein Fallback — bei Custom Properties gewinnt immer die zweite Deklaration, auch ohne oklch()-Unterstuetzung. Kontrast-Gate (Pflicht nach jeder Aenderung hier, Exit 1 = Blocker): python "C:\Users\Sebastian\Desktop\Claude Code\_tools\kontrast-check\kontrast.py" "\assets\tokens.css" Die Rollen erkennt das Werkzeug am NAMEN (-text/-ink = Text, -bg/-surface = Flaeche, --on-* = Text auf der eigenen Flaeche). Namen deshalb nicht „schoener" machen, ohne das Werkzeug mitzudenken. ===================================================================== */ /* ---- Schriften: zwei Dateien, beide self-hosted ---- Hanken Grotesk ist variabel (wght 100–900) und traegt alles Lesbare. Saira Condensed ExtraBold ist die bewusste Ausnahme von der Regel „variabel": sie echot das Lettering auf dem Wagen, und die variable Saira, die hier vorliegt, reicht nur bis Breite 88 — Condensed ist 75. Ein Schnitt, eine Datei. Beide Dateien sind latin-Subsets (Umlaute, „ “ – € geprueft am 24.09.2026), eine latin-ext-Datei gibt es nicht. Vorher lagen hier fuenf byte-gleiche Hanken-Dateien unter fuenf Namen — der Browser haette dieselbe Schrift bis zu fuenfmal geladen. */ @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap; src:url('/assets/fonts/hanken-grotesk-var.woff2') format('woff2')} @font-face{font-family:'Saira Condensed';font-style:normal;font-weight:800;font-display:swap; src:url('/assets/fonts/saira-condensed-800.woff2') format('woff2')} :root{ /* ---- Marken-Hue: EINE Quelle ---- */ --hue: 29.2; /* Flaechen — Neutrale leicht zur Marken-Hue getoent (Chroma ~0,004). Bewusst KEIN Creme mehr: der alte Grund #f6f2ec lag bei Hue 78 und war damit genau das warme KI-Standard-Creme. */ --page-bg: oklch(0.968 0.004 40); /* #f7f4f2 */ --card-surface: oklch(0.995 0.0015 40); /* #fefdfd */ /* Text auf hell */ --body-text: oklch(0.205 0.012 35); /* #1c1513 16,5:1 auf page-bg */ --muted-text: oklch(0.46 0.014 35); /* #605553 6,6:1 auf page-bg */ /* Marken-Rot in zwei Rollen (Kontrast-Token-Disziplin): accent-fill = Flaechen, Icons, grosse Schrift (auf hell nur 4,3:1!) accent-text = Links und kleiner Text auf hell (6,3:1) */ --accent-fill: oklch(0.579 0.227 var(--hue)); /* #e11a12 Wagen-Rot */ --accent-text: oklch(0.49 0.19 var(--hue)); /* #b3150f */ --accent-deep-text: oklch(0.44 0.17 var(--hue));/* #9b120c Hover */ --on-accent-fill: #ffffff; /* 4,8:1 auf accent-fill */ /* Signalgelb der Sicherungsleiste — nur Flaeche oder Text AUF DUNKEL */ --signal-fill: oklch(0.81 0.167 81.9); /* #f6b400 */ --on-signal-fill: oklch(0.205 0.012 35); /* 9,5:1 */ /* Formularfeld-Rahmen: ein Bedienelement, braucht 3:1 (WCAG 1.4.11) */ --field-border: oklch(0.56 0.012 35); /* #7a706c */ /* Zustaende — Fehler bewusst dunkler und mit Textpraefix „Fehler:", weil die Marke selbst rot ist: Farbe allein darf nichts tragen. */ --err-text: oklch(0.44 0.17 25); /* #9a1d18 */ --ok-text: oklch(0.42 0.11 150); /* #1f5a31 */ --ok-bg: oklch(0.95 0.035 150); /* Platzhalter-Markierung (Vorschau): Textmarker-Gelb, klar anders als das Signalgelb der Marke, dazu gestrichelter Rahmen + Etikett. */ --ph-bg: oklch(0.94 0.13 100); /* #ffed82 */ --on-ph-bg: oklch(0.205 0.012 35); /* 15:1, nur auf --ph-bg */ /* Abgeleitete Toene — alle aus einer Quelle (color-mix). Haarlinien sind reine Gliederung, kein Bedienelement: bewusst ohne Rollenwort im Namen, das Kontrast-Gate listet sie unter „OHNE ROLLE". */ --hairline: color-mix(in oklch, var(--body-text) 13%, transparent); --hairline-strong: color-mix(in oklch, var(--body-text) 26%, transparent); --hairline-red: color-mix(in oklch, var(--accent-fill) 34%, transparent); --red-tint-bg: color-mix(in oklch, var(--accent-fill) 7%, var(--card-surface)); --gold-tint-bg: color-mix(in oklch, var(--signal-fill) 16%, var(--card-surface)); --focus-outline: var(--accent-fill); /* ---- Typografie ---- */ --disp: 'Saira Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif; --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Gewichte je Rolle (Hanken ist variabel — eigene Zwischenwerte statt der Foundry-Stufen). Ueber font-weight, NIE font-variation-settings: das vererbt sich und macht platt. */ --wght-body: 420; --wght-lead: 400; --wght-strong: 690; --wght-label: 640; /* Fluide Skala 375 px -> 1440 px, Media Queries nur fuer Spaltenwechsel */ --fs-display: clamp(2.55rem, 1.46rem + 4.65vw, 5.4rem); --fs-h2: clamp(1.95rem, 1.42rem + 2.25vw, 3.35rem); --fs-h3: clamp(1.28rem, 1.16rem + 0.5vw, 1.62rem); --fs-lead: clamp(1.125rem, 1.06rem + 0.3vw, 1.34rem); --fs-body: clamp(1.0625rem, 1.03rem + 0.14vw, 1.15rem); --fs-small: 0.9375rem; /* 15 px — nichts Sichtbares unter 14 px */ --fs-label: 0.875rem; /* 14 px, nur mit Sperrung + Versalien */ /* Sperrung ist groessenabhaengig — nie pauschal auf body/* (WCAG 1.4.12) */ --track-display: -0.004em; --track-label: 0.13em; --track-btn: 0.045em; --lh-body: 1.6; --lh-lead: 1.5; --lh-head: 0.96; --measure: 66ch; /* ---- Raum ---- */ --gutter: clamp(16px, 4.2vw, 40px); --sec-y: clamp(56px, 7.5vw, 112px); --sec-y-tight: clamp(40px, 5vw, 72px); --wrap: 1200px; --rad: 8px; --rad-lg: 14px; /* ---- Bewegung: eine Signatur-Kurve ---- */ --ease: cubic-bezier(.22,.61,.36,1); --ease-snap: cubic-bezier(.5,1.6,.4,1); /* nur fuer das Umlegen der Sicherungen */ /* ---- Ebenen ---- */ --z-head: 50; --z-dock: 60; --z-skip: 100; /* Hoehe der mobilen Aktionsleiste — der Seitenfuss haelt so viel Abstand */ --dock-h: 64px; } /* ---- Dunkler Satz: dunkle Baender, Footer, Stellen-Band ---- Dieselben ROLLEN-Namen wie oben, andere Werte. Jede Komponente, die --body-text/--muted-text/--accent-text benutzt, schaltet in einem .is-dark von selbst um — kein zweites Satz Klassen „--light". Das Kontrast-Gate prueft diesen Block als eigenen Farbsatz. Rot als Text auf Kabelschwarz kaeme nur auf 3,9:1; die Akzent-Textrolle uebernimmt hier deshalb das Signalgelb (9,6:1). */ .is-dark{ --page-bg: oklch(0.195 0.012 35); /* #1a1311 Kabelschwarz */ --card-surface: oklch(0.245 0.014 35); /* #271e1c */ --body-text: oklch(0.97 0.004 40); /* 16,8:1 */ --muted-text: oklch(0.83 0.008 40); /* ~10:1 */ --accent-text: oklch(0.81 0.167 81.9); /* Signalgelb als Text, 9,6:1 */ --accent-deep-text: oklch(0.87 0.14 85); --field-border: oklch(0.62 0.01 40); --hairline: color-mix(in oklch, var(--body-text) 16%, transparent); --hairline-strong: color-mix(in oklch, var(--body-text) 30%, transparent); --err-text: oklch(0.8 0.11 25); --ok-text: oklch(0.84 0.1 150); --ok-bg: oklch(0.3 0.05 150); --focus-outline: oklch(0.81 0.167 81.9); }