/* ============================================================ Slipac Systems – Gestaltungsgrundlagen Stand: 1. Oktober 2026 Einzige Quelle für Farben, Schrift, Abstände und Rundungen. Produktionskopie von design/design-system/tokens.css mit angepasstem Schriftpfad und Monospace-Schrift für Akzente (JetBrains Mono, seit 5. Oktober 2026). Farbwerte stammen aus BRAND-POSITIONIERUNG.md und dürfen nur nach ausdrücklicher Freigabe geändert werden. ============================================================ */ /* ---- Schrift ---------------------------------------------- Nur drei Schnitte statt bisher sechs: Regular, Semibold, Bold. Das spart rund 350 Kilobyte gegenüber dem alten Stand. font-display: swap – Text ist sofort lesbar, auch wenn die Schrift noch lädt. ----------------------------------------------------------- */ @font-face { font-family: 'Inter'; src: url('../fonts/Inter/woff2/Inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/Inter/woff2/Inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/Inter/woff2/Inter-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* Technische Akzente: JetBrains Mono NL (ohne Programmier-Ligaturen, SIL Open Font License, siehe fonts/JetBrainsMono/OFL.txt), selbst gehostet, damit Mac, Windows und Handy dieselbe Schrift zeigen. Auf lateinische Zeichen einschließlich č, ć, đ, š, ž gekürzt, rund 17 Kilobyte je Schnitt. */ @font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono/woff2/JetBrainsMono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono/woff2/JetBrainsMono-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono/woff2/JetBrainsMono-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ---- Farben --------------------------------------------- Geprüfte Kontrastwerte nach WCAG 2.1 stehen in README.md. Zwei verbindliche Grenzen: – Hellblau niemals auf Weiß (nur 2,14:1) – Systemblau auf Marineblau nur als Fläche, nie als Text --------------------------------------------------------- */ --farbe-marineblau: #081B33; --farbe-systemblau: #155EEF; --farbe-eisblau: #EDF4FF; --farbe-weiss: #FFFFFF; --farbe-text: #1D2A3A; --farbe-text-sekundaer: #526172; --farbe-hellblau: #38BDF8; /* Abgeleitete Zustände. Bewusst dunkler statt heller, damit der Kontrast bei Hover nicht unter den Grenzwert fällt. */ --farbe-systemblau-hover: #1149BC; --farbe-systemblau-aktiv: #0E3C9C; --farbe-linie: #D8E3F5; /* dekorative Trennlinie, 1,29:1 – trägt nie Information */ --farbe-linie-dunkel: #1C3350; --farbe-feldrahmen: #74879F; /* Umriss von Eingabefeldern: 3,68:1 auf Weiß, 3,33:1 auf Eisblau */ --farbe-fehler: #B3261E; /* 6,54:1 auf Weiß */ /* Rollen – im Stylesheet immer diese verwenden, nicht die Grundfarben direkt. */ --hintergrund: var(--farbe-weiss); --hintergrund-ruhig: var(--farbe-eisblau); --hintergrund-dunkel: var(--farbe-marineblau); --text: var(--farbe-text); --text-leise: var(--farbe-text-sekundaer); --text-auf-dunkel: var(--farbe-weiss); --text-leise-auf-dunkel: #B9C7DB; --aktion: var(--farbe-systemblau); --fokus: var(--farbe-systemblau); --fokus-auf-dunkel: var(--farbe-hellblau); /* ---- Schriftgrößen -------------------------------------- Fließend zwischen Handy und Desktop über clamp(). Die Grundgröße von html wird nie überschrieben, damit die Schriftgrößeneinstellung des Browsers wirksam bleibt. --------------------------------------------------------- */ --schrift: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Technische Akzente (Vorspann, Status, Nummern). Selbst gehostet; die Systemschriften dahinter greifen nur, bis die Datei geladen ist. */ --schrift-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace; --groesse-display: clamp(2.5rem, 1.75rem + 3.4vw, 4rem); /* 40 – 64 px */ --groesse-h1: clamp(2rem, 1.55rem + 2.1vw, 3rem); /* 32 – 48 px */ --groesse-h2: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem); /* 28 – 36 px */ --groesse-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); /* 20 – 24 px */ --groesse-lead: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem); /* 18 – 21 px */ --groesse-text: 1.0625rem; /* 17 px */ --groesse-klein: 0.9375rem; /* 15 px */ --groesse-mini: 0.875rem; /* 14 px */ --zeilenhoehe-eng: 1.15; --zeilenhoehe-mittel: 1.35; --zeilenhoehe-text: 1.65; --laufweite-eng: -0.02em; --laufweite-weit: 0.08em; /* ---- Abstände ------------------------------------------- Vierer-Raster. Immer diese Stufen verwenden, keine Zwischenwerte – das hält die Seite ruhig. --------------------------------------------------------- */ --abstand-1: 0.25rem; /* 4 px */ --abstand-2: 0.5rem; /* 8 px */ --abstand-3: 0.75rem; /* 12 px */ --abstand-4: 1rem; /* 16 px */ --abstand-5: 1.5rem; /* 24 px */ --abstand-6: 2rem; /* 32 px */ --abstand-7: 3rem; /* 48 px */ --abstand-8: 4rem; /* 64 px */ --abstand-9: 6rem; /* 96 px */ --abstand-10: 8rem; /* 128 px */ /* Abstand zwischen zwei Abschnitten, fließend */ --abschnitt: clamp(4rem, 2.5rem + 6vw, 7.5rem); /* ---- Raster ---------------------------------------------- */ --breite-inhalt: 1200px; /* äußerer Container */ --breite-schmal: 800px; /* für zentrierte Textblöcke */ --breite-lesetext: 68ch; /* Zeilenlänge im Fließtext */ --rand: var(--abstand-5); /* Seitenrand am Handy */ --rand-gross: var(--abstand-6); /* ---- Rundungen und Tiefe -------------------------------- Sehr zurückhaltend. Die Marke wirkt über Ruhe, nicht über Schatten. Schatten sind marineblau eingefärbt statt grau. --------------------------------------------------------- */ --rundung-klein: 8px; --rundung: 14px; --rundung-gross: 20px; --rundung-voll: 999px; /* Mehrstufig und marineblau eingefärbt statt grau – so wirken die Schatten weich statt wie ein grauer Kasten. */ --schatten-klein: 0 1px 2px rgba(8, 27, 51, 0.04), 0 2px 4px rgba(8, 27, 51, 0.04); --schatten: 0 2px 4px rgba(8, 27, 51, 0.04), 0 6px 16px rgba(8, 27, 51, 0.06); --schatten-gross: 0 4px 8px rgba(8, 27, 51, 0.04), 0 12px 32px rgba(8, 27, 51, 0.08), 0 24px 64px rgba(8, 27, 51, 0.06); --schatten-aktion: 0 2px 6px rgba(21, 94, 239, 0.24), 0 8px 24px rgba(21, 94, 239, 0.16); --linie: 1px solid var(--farbe-linie); /* ---- Bewegung ------------------------------------------- Kurz und funktional. Kein Custom Cursor, keine Parallax, kein Scrolljacking. Scrollgebundene Bewegung nur in den engen Grenzen von DECISIONS.md P-069 – siehe auch BRAND-POSITIONIERUNG.md. --------------------------------------------------------- */ --dauer: 150ms; --dauer-lang: 320ms; --kurve: cubic-bezier(0.2, 0, 0.2, 1); /* Weiche Kurve für Bewegungen, die sichtbar ausschwingen sollen */ --kurve-weich: cubic-bezier(0.16, 1, 0.3, 1); } /* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt keine. Das ist keine Kür, sondern Barrierefreiheit. */ @media (prefers-reduced-motion: reduce) { :root { --dauer: 0ms; --dauer-lang: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }