/* ============================================================ code dimension — Gestaltungstoken ============================================================ Alle Werte aus dem Entwurf web2026-v12 gemessen (Haeufigkeit in index.html in Klammern). Der Entwurf trug sie als Inline-Angaben an 594 Stellen; hier stehen sie einmal. Regel: Farben, Abstaende und Radien werden NUR ueber diese Variablen verwendet. Ein Hex-Wert direkt in einer Regel ist ein Fehler, kein Sonderfall. ============================================================ */ :root { /* --- Marke ------------------------------------------------- */ --cd-rot: #C41118; /* 143x — Handlung, Akzent */ --cd-rot-tief: #9E0C12; /* Hover auf hellem Grund */ --cd-rot-hell: #E01A22; /* Hover auf dunklem Grund */ --cd-rot-auf-dunkel: #E1666B; /* 20x — Rot, das auf Anthrazit noch traegt. NICHT --cd-rot auf dunklem Grund verwenden: der Kontrast reicht nicht. */ /* Dasselbe Rot eine Stufe heller — fuer Text auf --cd-dunkel-2, also auf KARTEN, die auf einer dunklen Bahn liegen. Gemessen: #E1666B traegt auf der Bahn 4,62:1, auf der Karte nur noch 3,91:1 und faellt damit durch 1.4.3. Der Unterschied ist mit blossem Auge nicht zu sehen — die Kartenflaeche ist nur neun Helligkeitsstufen lichter als die Bahn. #E97A7E traegt auf beiden: 5,53:1 auf der Bahn, 4,68:1 auf der Karte. Wer eine dunkle Karte auf eine dunkle Bahn stellt, nimmt dieses Rot. */ --cd-rot-auf-karte-dunkel: #E97A7E; /* --- Text -------------------------------------------------- */ --cd-tinte: #0D1A21; /* 84x — Fliesstext, Ueberschr. */ --cd-text-2: #4E626C; /* 26x — Beitext */ --cd-text-3: #5C6F79; /* 42x — Nebentext, Meta */ --cd-text-schwach: #7E97A2; --cd-text-auf-dunkel: #A9BEC8; --cd-text-auf-dunkel-2: #93A9B4; /* --- Flaechen ---------------------------------------------- */ --cd-weiss: #ffffff; --cd-flaeche-1: #F7F9FA; --cd-flaeche-2: #F2F5F7; --cd-flaeche-3: #E9EEF1; --cd-dunkel: #16272F; /* 38x — dunkle Bahnen */ --cd-dunkel-2: #1F343C; --cd-dunkel-3: #2C444D; /* --- Linien ------------------------------------------------ */ --cd-linie: #DDE4E8; /* 32x */ --cd-linie-2: #E1E7EA; /* 23x */ --cd-linie-3: #D7E0E4; --cd-linie-auf-dunkel: #5C7684; /* --- Schrift ----------------------------------------------- */ /* Archivo traegt die Schlagzeilen, IBM Plex Sans den Text, IBM Plex Mono die Kicker und Ordnungszahlen. Alle lokal — kein Aufruf an fonts.googleapis.com. ZWEITE STELLE: DIE ERSATZFAMILIE, NICHT system-ui. Bis zum 07.09.2026 stand hier system-ui. Das ist auf Windows Segoe UI, auf Android Roboto — beide bauen anders als die Zielschrift, und beim Umschalten sprang das Layout. Die *-Ersatz-Familien stehen in schriften.css, nehmen Arial als Koerper und sind per size-adjust auf die Zielschrift gerechnet. Sie laden nichts nach; dort steht die Messung. system-ui ist bewusst ganz aus der Kette genommen: als dritte Stelle waere es wieder das, was einspringt, wenn Arial fehlt. */ --cd-schrift-display: 'Archivo', 'Archivo Ersatz', Arial, sans-serif; --cd-schrift-text: 'IBM Plex Sans', 'IBM Plex Sans Ersatz', Arial, sans-serif; --cd-schrift-mono: 'IBM Plex Mono', 'IBM Plex Mono Ersatz', 'Courier New', monospace; /* Stufen. Der Entwurf sprang zwischen 36 und 66 px; die Zwischenwerte sind zusammengefasst, damit nicht jede Ueberschrift ihre eigene Groesse bekommt. */ --cd-gr-mikro: 11px; --cd-gr-klein: 13px; --cd-gr-text: 16px; --cd-gr-gross: 18px; --cd-gr-h4: 20px; --cd-gr-h3: 24px; --cd-gr-h2: clamp(28px, 1.6rem + 1.4vw, 44px); --cd-gr-h1: clamp(34px, 1.9rem + 2.4vw, 60px); /* Der Wert im Zahlenband. Zwischen h3 und h2 und mit eigener Obergrenze: Werte sind nicht immer Zahlen — "Kunststoffindustrie" muss in einer Drittelspalte noch in eine Zeile passen (gemessen bei 1440 px: 426 px Spalte, 19 Zeichen). */ --cd-gr-kennzahl: clamp(27px, 1.05rem + 1.2vw, 38px); --cd-zeile-eng: 1.15; --cd-zeile-kopf: 1.22; --cd-zeile-text: 1.62; /* --- Raster ------------------------------------------------ */ --cd-inhalt: 1280px; /* Inhaltsspalte */ --cd-rinne: 40px; /* seitlicher Innenabstand */ /* Portalschiene: Breite der Karte und ihr Abstand zum Inhalt. --cd-schienen-platz ist die RECHENGROESSE, die alles liest, was von der Schiene weiss. Sie steht hier auf 0 und wird nur im Kundenbereich und nur ab 1101 px gefuellt — ausserhalb ist sie damit wirkungslos, und keine Regel muss den Fall abfragen. */ --cd-portalschiene: 260px; --cd-portalschiene-fuge: 40px; --cd-schienen-platz: 0px; --cd-schiene: 170px; /* Abschnittsschiene links */ /* --- Abstaende --------------------------------------------- */ --cd-a1: 4px; --cd-a2: 8px; --cd-a3: 12px; --cd-a4: 16px; --cd-a5: 24px; --cd-a6: 32px; --cd-a7: 48px; --cd-a8: 64px; --cd-a9: 96px; /* Luft um eine Bahn. Die Vorlage arbeitet mit festen 118px. Hier steht ein Bereich, weil ein Handy sonst dieselbe Luft traegt wie ein grosser Schirm — bei 1440px, der Breite in der der Entwurf gezeichnet ist, kommen genau die 118px heraus. */ --cd-bahn: clamp(64px, 8.2vw, 118px); /* Unten etwas mehr Luft als oben — in der Vorlage durchgehend rund fuenf Prozent. Das ist keine Unachtsamkeit des Entwurfs: ein Abschnitt mit gleicher Luft oben und unten sitzt optisch zu tief, weil die Ueberschrift oben schwerer wiegt als der Textausgang unten. */ --cd-bahn-fuss: 1.05; /* --- Radien ------------------------------------------------ */ /* Nach Bauteilgroesse gestaffelt. Nicht gerundet werden: Fokusringe, Trennlinien, Balken, Akzentlinien. */ --cd-r-feld: 2px; --cd-r-knopf: 3px; --cd-r-karte: 10px; --cd-r-gross: 14px; /* --- Schatten ---------------------------------------------- */ --cd-schatten-mega: 0 34px 64px -38px rgba(13, 26, 33, .6); --cd-schatten-karte: 0 12px 28px -20px rgba(13, 26, 33, .45); /* --- Hoehen ------------------------------------------------ */ --cd-kopf-oben: 38px; --cd-kopf-haupt: 84px; --cd-kopf-gesamt: calc(var(--cd-kopf-oben) + var(--cd-kopf-haupt)); /* --- Ebenen ------------------------------------------------ */ --cd-e-schiene: 140; /* Die Portalschiene liegt UNTER der Kontaktschiene und unter den Dialogen — sie ist Navigation im Fluss und kein Aufsatz. */ --cd-e-portalschiene: 120; --cd-e-kopf: 150; --cd-e-mega: 160; --cd-e-mobilmenue: 200; --cd-e-dialog: 300; /* --- Bewegung ---------------------------------------------- */ --cd-zeit: .2s; --cd-kurve: cubic-bezier(.2, .7, .2, 1); } /* ============================================================ Bedienart statt Bildschirmbreite ============================================================ Layout schaltet nach Breite, Bedienung nach Eingabeart. Eine reine Breitenschwelle laesst Tablets zwischen den Stuehlen haengen: 900 px breit, aber ohne Mauszeiger. ============================================================ */ @media (hover: none) and (pointer: coarse) { :root { --cd-zielgroesse: 44px; /* Finger brauchen mehr als 24 px */ } } @media (hover: hover) and (pointer: fine) { :root { --cd-zielgroesse: 24px; /* WCAG 2.5.8 Minimum */ } }