/* * Alibaba Security – Design-Tokens. EINZIGE Stelle für Farben, Schrift, Größen, Abstände, Radien, Schatten. * Quelle: marke/cd/farben.md, marke/cd/schriften.md, Markenbuch (Stand 2026-11-15). * Bauteile (main.css, pages/*.css) verwenden nur var(--…), nie Hex-Werte oder Schriftnamen. * * Aufteilung 60 / 30 / 10 * 60 Fläche: --color-bg, --color-surface, --color-tint * 30 Blau: --color-primary (Bänder, Haupt-Button), --color-light (Zierde), --color-link * 10 Rot: --color-cta (der eine rote Button je Ansicht), --color-accent (Logo-Rot, nie Button mit Schrift) * * Kontraste (WCAG 2.x, aus den Hex-Werten berechnet, siehe farben.md) * Hell Dunkel * Text auf Seite 16,56:1 Text auf Seite 17,08:1 * Text auf Karte 18,10:1 Text auf Karte 15,33:1 * Text auf Tönung 15,21:1 Text auf Tönung 12,54:1 * Text-2 auf Seite / Karte 7,79 / 8,52:1 Text-2 auf Seite / Karte 10,73 / 9,63:1 * Text-3 auf Seite / Karte 5,47 / 5,98:1 Text-3 auf Seite / Karte 7,51 / 6,74:1 * Text-3 auf Tönung 5,03:1 Text-3 auf Tönung 5,52:1 * Link auf Seite / Karte 4,93 / 5,39:1 Link auf Seite / Karte 8,02 / 7,20:1 * Link auf Tönung 4,53:1 Link auf Tönung 5,89:1 * Weiß auf Logo-Blau 5,39:1 (Hover 7,79:1), in beiden Themes * Weiß auf CTA-Rot 5,01:1 (Hover 6,67:1), in beiden Themes * Fehler auf Seite / Karte 5,40 / 5,90:1 Fehler auf Seite / Karte 7,01 / 6,29:1 * Erfolg auf Seite / Karte 5,13 / 5,61:1 Erfolg auf Seite / Karte 8,89 / 7,98:1 * Feldrahmen auf Seite/Karte 3,32 / 3,63:1 Feldrahmen auf Seite/Karte 5,14 / 4,61:1 * Logo-Blau als Fläche 4,93:1 Logo-Blau als Fläche 3,46:1 (Karte 3,11:1) * * Nicht erlaubt (Befund farben.md) * Weiß auf Logo-Rot --color-accent: 4,24:1, deshalb nie Button mit Schrift. * Hellblau --color-light auf heller Fläche: 2,13:1, nur Zierde, keine Schrift, kein alleiniger Rahmen. * Logo-Blau als Link im Dunkelmodus: 3,46:1, deshalb dort --color-link = Hellblau. * Rote Links gibt es nicht. Fehler nie als gefüllte Fläche. */ @font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Bold-Latin1.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { color-scheme: light; /* ------------------------------------------------------------ Farben, hell */ --color-bg: #F0F5FF; --color-surface: #FFFFFF; --color-tint: #E1ECFF; --color-line: #D8DEE9; --color-line-strong: #7C8799; --color-line-soft: color-mix(in srgb, var(--color-text) 14%, transparent); /* Haarlinie, auch auf der Tönung sichtbar */ --color-text: #0E1625; --color-text-2: #424D61; --color-text-3: #586478; --color-primary: #005DF6; --color-band: var(--color-primary); /* blaue Flächen (Bänder, Monitoring-Held); Buttons bleiben --color-primary */ --color-primary-hover: #0048C1; --color-on-primary: #FFFFFF; --color-link: #005DF6; --color-light: #7BAAFE; --color-accent: #F60808; --color-cta: #E00506; --color-cta-hover: #BC0203; --color-on-cta: #FFFFFF; --color-error: #CB0404; --color-success: #057836; /* Abgeleitete Rollen: zeigen nur auf die Rollen oben. */ --color-focus: var(--color-link); /* Kopfband und Fußzeile tragen das farbige Logo (Entscheidung 15.11.2026: das farbige Logo überall, keine weiße Fassung). Hell: weiße Fläche. Dunkel: Nachtblau, dort hat das Logo-Blau als Grafik 3,46:1 und das Logo-Rot 4,41:1 (Schwelle 3:1); auf der dunklen Karte wären es nur 3,11:1, deshalb liegt das Logo im Dunkelmodus auf der Seitenfläche. */ --color-header: var(--color-surface); --color-footer: var(--color-surface); --color-scrim: rgb(14 22 37 / 0.55); /* Tinte, halbtransparent: Abdunklung hinter Überlagerungen */ /* Auf Blau (Kopfband, Bänder, Fußzeile): Nebentext und Linien, aus Weiß und der Fläche gemischt. Nebentext auf Logo-Blau 4,6:1, auf Blau dunkel 6,7:1 (berechnet). */ --color-on-primary-2: color-mix(in srgb, var(--color-on-primary) 90%, var(--color-primary)); --color-on-primary-line: color-mix(in srgb, var(--color-on-primary) 22%, transparent); --color-on-primary-soft: color-mix(in srgb, var(--color-on-primary) 12%, transparent); /* KI-Label: Vorgabe Pflichtstandard §5 (1:1 von innovate-systems.de), keine Markenfarbe. */ --ki-label-bg: rgba(15, 23, 42, 0.18); --ki-label-text: rgba(255, 255, 255, 0.7); /* ------------------------------------------------------------ Schrift (eine Stelle) */ --font-sans: "IBM Plex Sans", Arial, sans-serif; --weight-regular: 400; --weight-semibold: 600; --weight-bold: 700; /* Typo-Skala mobil (schriften.md). 1rem = 16px. */ --text-display: 2.125rem; /* 34 px */ --text-hero: var(--text-display); /* Hauptzeile eines Helden; wächst erst ab 81em über Display hinaus */ --text-figure: calc(var(--text-display) * 2.4);/* große Ziffer (Preis, Maß, Anzahl), Klasse .ziffer */ --text-h1: 1.875rem; /* 30 px */ --text-h2: 1.5rem; /* 24 px */ --text-h3: 1.1875rem; /* 19 px */ --text-lead: 1.125rem; /* 18 px */ --text-body: 1.0625rem; /* 17 px */ --text-small: 0.9375rem; /* 15 px, kleinste Schrift der Seite */ --text-button: 1.0625rem; /* 17 px */ --text-input: 1.0625rem; /* 17 px, nie unter 16 px (iOS-Zoom) */ --leading-display: 1.08; --leading-h1: 1.12; --leading-h2: 1.2; --leading-h3: 1.3; --leading-lead: 1.5; --leading-body: 1.6; --leading-small: 1.45; --leading-button: 1.2; --tracking-display: -0.02em; --tracking-h1: -0.02em; --tracking-h2: -0.01em; --measure: 68ch; /* längste Zeile im Fließtext */ /* ------------------------------------------------------------ Abstände (4er-Raster) */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-7: 2rem; /* 32 */ --space-8: 2.5rem; /* 40 */ --space-9: 3rem; /* 48 */ --space-10: 4rem; /* 64 */ --space-11: 5rem; /* 80 */ --space-12: 6rem; /* 96 */ --gutter: var(--space-5); /* Seitenrand mobil: 20 px wie im Markenbuch */ --section-y: var(--space-9); /* Abstand ober- und unterhalb einer Sektion */ --stack: var(--space-4); /* Abstand zwischen Absätzen */ /* ------------------------------------------------------------ Container */ --container: 72rem; /* 1152 px */ --container-narrow: 44rem; /* Lesespalte */ --container-wide: 84rem; /* ------------------------------------------------------------ Maße der Bedienelemente */ --control-h: 3rem; /* 48 px: Buttons und Felder */ --tap: 2.75rem; /* 44 px: kleinste Tippfläche (Icon-Knöpfe) */ --field-h: 3.75rem; /* 60 px: Eingabefeld mit Beschriftung im Feld (oben die Beschriftung, darunter die Eingabe) */ --label-float-scale: 0.8824;/* Beschriftung oben im Feld: 17 px × 0,8824 = 15 px, die kleinste Schrift der Seite */ --header-h: 4.25rem; /* Kopfband mobil: Bildmarke 44 px + 12 px Rand */ --header-h-compact: 3.75rem;/* Kopfband beim Scrollen */ --actionbar-h: 4rem; /* mobile Aktionsleiste */ --logo-w: 7.5rem; /* ganzes Logo: mindestens 120 px breit (Markenbuch) */ --logo-h: calc(var(--logo-w) * 0.911); /* Seitenverhältnis des Logos 292 : 266 */ --mark-h: 2.75rem; /* Bildmarke: mindestens 44 px hoch */ /* Titelblatt (Held am Desktop ohne Kopfband) und Kopfband ab 60em: gleicher Rand zum Bildschirm, links wie rechts */ --cover-gutter: clamp(2rem, 3.6vw, 5.5rem); --cover-top: clamp(1.5rem, 3.6vh, 3rem); /* Abstand des Titelblatt-Logos nach oben */ --cover-logo-h: clamp(6.5rem, 14vh, 10.5rem); /* ganzes Logo im Titelblatt: 104 bis 168 px hoch */ --cover-zone: min(40vh, 22rem); /* ab dieser Scrolltiefe fährt das Kopfband ein */ /* ------------------------------------------------------------ Radien, Linien */ --radius: 12px; /* Karten, Bilder, Felder: weicher gerundet, passend zu Pillen und Kreisen (Sören 16.11.2026, vorher 6 px) */ --radius-pill: 999px; /* Knöpfe, Schalter, Sprachwahl: Pillenform (Sören 15.11.2026) */ --radius-tile: 0.75rem; /* 12 px: kleine Kacheln und Zeilen (Icon-Kacheln in Fußzeile und Menü, aktive Zeile im Menü) */ --radius-round: 50%; --border: 1px; --border-control: 2px; --focus-w: 3px; --focus-offset: 2px; /* ------------------------------------------------------------ Schatten Karten haben laut Markenbuch weder Rahmen noch Schatten. Schatten nur für Schwebendes (Aufklappmenü, Nach-oben-Knopf, Aktionsleiste). Farbe ist die Tinte, halbtransparent. */ --shadow-float: 0 6px 20px rgb(14 22 37 / 0.16), 0 1px 3px rgb(14 22 37 / 0.1); --shadow-bar: 0 -1px 0 var(--color-line), 0 -6px 18px rgb(14 22 37 / 0.08); /* ------------------------------------------------------------ Übergänge */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-press: 100ms; --dur-fast: 160ms; --dur: 240ms; --dur-slow: 360ms; --dur-reveal: 600ms; /* Einblenden von Inhalten beim Scrollen */ --stagger: 60ms; /* Versatz zwischen Geschwistern (Inhalt) */ --stagger-menu: 18ms; /* Versatz der Zeilen im Vollbildmenü */ --reveal-y: 0.75rem; /* Weg beim Einblenden */ --press-scale: 0.97; /* Rückmeldung beim Drücken */ /* ------------------------------------------------------------ Ebenen */ --z-header: 50; --z-actionbar: 60; --z-totop: 55; --z-menu: 80; --z-dialog: 90; --z-skip: 100; } /* Typo-Skala ab 768 px: nur die Überschriften wachsen deutlich. */ @media (min-width: 48em) { :root { --text-display: 3.5rem; /* 56 px */ --text-h1: 2.5rem; /* 40 px */ --text-h2: 1.75rem; /* 28 px */ --text-h3: 1.25rem; /* 20 px */ --text-lead: 1.25rem; /* 20 px */ --text-body: 1.125rem; /* 18 px */ --gutter: var(--space-7); --section-y: var(--space-11); --header-h: 4.5rem; } } /* Ab 1296 px: Navigation im Kopfband. Das Band ist schlank (68 px, kompakt 60 px) und trägt links nur die Bildmarke. */ @media (min-width: 81em) { :root { --header-h: 4.25rem; --header-h-compact: 3.75rem; --text-hero: 4.2rem; /* 67 px */ } } /* ------------------------------------------------------------ Farben, dunkel data-theme setzt das Kopf-Skript vor dem ersten Zeichnen (inc/assets.php). */ :root[data-theme="dark"] { color-scheme: dark; --color-bg: #051229; --color-surface: #0E1D39; --color-tint: #1B2D4E; --color-line: #324260; --color-line-strong: #79879F; --color-text: #F0F5FF; --color-text-2: #BDC5D1; --color-text-3: #99A5BB; --color-primary: #005DF6; --color-band: #0A3178; /* blaue Flächen (Bänder, Monitoring-Held): im Dunkeln ruhiger als Logo-Blau, Weiß 12,2:1 */ --color-primary-hover: #0048C1; --color-on-primary: #FFFFFF; --color-link: #7BAAFE; --color-light: #7BAAFE; --color-accent: #F60808; --color-cta: #E00506; --color-cta-hover: #BC0203; --color-on-cta: #FFFFFF; --color-error: #FF7362; --color-success: #5DC879; --color-header: var(--color-bg); --color-footer: var(--color-bg); --color-scrim: rgb(0 0 0 / 0.6); --shadow-float: 0 6px 20px rgb(0 0 0 / 0.45), 0 1px 3px rgb(0 0 0 / 0.3); --shadow-bar: 0 -1px 0 var(--color-line), 0 -6px 18px rgb(0 0 0 / 0.3); }