/* ============================================================================ KOS KLIMA® Design System – Tokens ---------------------------------------------------------------------------- VENDORED – NICHT VON HAND ÄNDERN. Diese Datei ist die 1:1-Übernahme der Token-Dateien aus dem Design-System "KOS KLIMA Design System (neue Website)". Im Original liegen die Tokens in sieben Dateien, die per @import eingebunden werden; hier sind sie zu einer Datei zusammengefasst, weil verschachtelte @import-Ketten im Browser nacheinander geladen werden und den Seitenaufbau spürbar verzögern. Wird das Design-System aktualisiert, wird diese Datei neu erzeugt – die Anpassungen für das Intranet stehen ausschließlich in app-tokens.css. Quelle: _ds/kos-klima-design-system-neue-website-b9f5a075-.../tokens/*.css ========================================================================== */ @import url("../assets/fonts/rubik.css"); @import url("../assets/fonts/avenir.css"); /* ---------------------------------------------------------------- Farben -- Extrahiert 1:1 von kosklima-preview-v3.pages.dev (DESIGN-SYSTEM.md) */ :root { /* Basis-Palette */ --blue-light: #6CADC6; /* Akzent: CTAs, Links, Akzentlinien */ --blue-dark: #375374; /* Überschriften, Navy, dunkle Flächen */ --blue-deep: #2c4863; /* Hover-Zustand von --blue-dark */ --blue-deeper:#1f3a5a; /* Gradient-Ende auf dunklen Panels */ --blue-night: #1b2c43; /* unterster Footer-Streifen */ --text: #555555; /* Fließtext */ --text-soft: #888888; /* Meta, Labels, Bildunterschriften */ --white: #FFFFFF; --beige: #D9CFCA; /* warmer Akzent, sparsam einsetzen */ --bg-gray: #F2F2F2; /* helle Abschnittsflächen */ --bg-sand: #f7f6f3; /* Sandton, Seitenleiste und Statusflächen */ --red-alert: #c9302c; /* Störungsmeldung / Notfall-Signal */ --red-alert-ink: #a02622; /* Alpha-Stufen (alle abgeleitet von --blue-dark 55,83,116) */ --hairline: rgba(55, 83, 116, 0.08); --hairline-strong:rgba(55, 83, 116, 0.12); --ink-04: rgba(55, 83, 116, 0.04); --ink-07: rgba(55, 83, 116, 0.07); --ink-15: rgba(55, 83, 116, 0.15); --ink-22: rgba(55, 83, 116, 0.22); --accent-08: rgba(108, 173, 198, 0.08); --accent-12: rgba(108, 173, 198, 0.12); --accent-16: rgba(108, 173, 198, 0.16); --accent-30: rgba(108, 173, 198, 0.30); --accent-55: rgba(108, 173, 198, 0.55); --on-dark: rgba(255, 255, 255, 0.85); --on-dark-soft: rgba(255, 255, 255, 0.60); --on-dark-rule: rgba(255, 255, 255, 0.08); --glass: rgba(255, 255, 255, 0.68); --glass-solid: rgba(255, 255, 255, 0.90); --glass-border: rgba(255, 255, 255, 0.88); /* Semantische Aliase */ --text-body: var(--text); --text-heading: var(--blue-dark); --text-meta: var(--text-soft); --text-accent: var(--blue-light); --text-on-dark: var(--on-dark); --surface-page: var(--white); --surface-alt: var(--bg-gray); --surface-card: var(--white); --surface-dark: var(--blue-dark); --border-card: var(--hairline); --border-hover: var(--blue-light); --action-primary: var(--blue-light); --action-primary-hover: var(--blue-dark); --action-dark: var(--blue-dark); --action-dark-hover: var(--blue-deep); --focus-ring: 0 0 0 4px var(--accent-12); --gradient-dark: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-deep) 50%, var(--blue-deeper) 100%); --gradient-card-dark: linear-gradient(170deg, #375374 0%, #2c4663 100%); --gradient-accent-rule: linear-gradient(90deg, var(--blue-light) 0%, transparent 100%); } /* ----------------------------------------------------------- Typografie -- Rubik 700 für alle Überschriften (H1/H2 in Großbuchstaben), Avenir LT Pro für den Fließtext. */ :root { --font-headline: 'Rubik', Arial, Helvetica, sans-serif; --font-body: 'Avenir LT Pro', 'Avenir Next LT Pro', 'Avenir', 'Avenir Next', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* Fließende Anzeige-Skala (Entwurfsbreite 1920) */ --text-h1: clamp(36px, 4.5vw, 68px); --text-h1-hero: clamp(30px, 3.4vw, 46px); --text-h2: clamp(28px, 3vw, 48px); --text-h3: clamp(22px, 2vw, 36px); --text-h4: clamp(18px, 1.4vw, 22px); --text-lead: clamp(15px, 1.4vw, 22px); --text-intro: clamp(15px, 1.2vw, 19px); --text-stat: clamp(32px, 3.5vw, 56px); /* Feste Stufen */ --text-body-lg: 18px; /* Standard-Fließtext */ --text-body-md: 15px; /* Kartentext, Eingabefelder */ --text-body-sm: 13px; /* Meta, Kennzahl-Beschriftungen */ --text-label: 11px; /* Formular-Labels, Chips */ --text-eyebrow: 12px; --text-nav: 13px; --leading-tight: 1.15; /* Überschriften */ --leading-snug: 1.4; --leading-body: 1.6; --leading-card: 1.55; --tracking-headline: 0.02em; --tracking-eyebrow: 0.14em; --tracking-nav: 0.08em; --tracking-brandtag: 0.18em; --weight-body: 400; --weight-medium: 600; --weight-bold: 700; } /* ------------------------------------------------------ Abstände/Layout --*/ :root { --container: min(1760px, calc(1640 * (100vw / 1920))); --space-1: 4px; --space-2: 6px; --space-3: 8px; --space-4: 12px; --space-5: 14px; --space-6: 18px; --space-7: 24px; --space-8: 28px; --space-9: 32px; --space-10: 40px; --space-12: 56px; --space-14: 70px; --space-16: 80px; --gap-grid: 24px; /* Kartenraster Desktop */ --gap-grid-tablet: 14px; --gap-grid-mobile: 12px; --gap-ctas: 14px; --section-y: clamp(40px, 6vw, 100px); --section-y-tight: clamp(16px, 2vw, 28px); --card-padding: 32px 28px; --card-padding-mobile: 22px 20px; --measure-intro: 720px; --measure-lead: 60ch; } /* ------------------------------------------------------------- Radien -- 10px ist der Arbeitswert (Buttons, Navigation, Chips) */ :root { --radius-xs: 6px; /* Eingabefelder */ --radius-sm: 10px; --radius-md: 18px; /* Karten, Panels */ --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 999px; --radius-circle: 50%; } /* ---------------------------------------------------------- Schatten -- Alle Schatten sind blau eingefärbt (55,83,116), niemals neutrales Schwarz */ :root { --shadow-button: 0 1px 0 rgba(255,255,255,0.25) inset, 0 0 0 1px rgba(55,83,116,0.10), 0 4px 10px rgba(55,83,116,0.15), 0 12px 26px rgba(55,83,116,0.25); --shadow-button-hover: 0 1px 0 rgba(255,255,255,0.3) inset, 0 0 0 1px rgba(55,83,116,0.15), 0 8px 18px rgba(55,83,116,0.25), 0 22px 48px rgba(55,83,116,0.35); --shadow-button-active: 0 2px 6px rgba(55,83,116,0.30), 0 0 0 1px rgba(55,83,116,0.10); --shadow-card-hover: 0 16px 40px rgba(55, 83, 116, 0.08); --shadow-card-dark: 0 12px 32px rgba(55,83,116,0.18); --shadow-card-dark-hover: 0 22px 50px rgba(55,83,116,0.28); --shadow-form: 0 18px 42px rgba(55, 83, 116, 0.08); --shadow-glass: 0 8px 32px rgba(55, 83, 116, 0.10), 0 2px 8px rgba(55, 83, 116, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95); --shadow-glass-scrolled: 0 4px 20px rgba(55, 83, 116, 0.10), inset 0 1px 0 rgba(255,255,255,1); --shadow-pill: 0 8px 24px rgba(55,83,116,0.10), 0 1px 3px rgba(55,83,116,0.06); --shadow-menu: 0 12px 36px rgba(55,83,116,0.12); --blur-glass: blur(32px) saturate(210%); --blur-bar: blur(20px) saturate(180%); } /* ----------------------------------------------------------- Bewegung -- Ruhige, langsame Einblendungen; eine federnde Kurve für Mikrointeraktion */ :root { --ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1.4); --ease-spring-soft: cubic-bezier(0.2, 0.9, 0.3, 1); --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1); --ease-standard: ease; --dur-fast: 0.2s; --dur-hover: 0.25s; --dur-panel: 0.4s; --dur-reveal: 1s; --lift-hover: -2px; /* Buttons, Navigationseinträge */ --lift-card: -4px; /* Karten */ --stagger-step: 0.1s; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur-hover: 0.01ms; --dur-panel: 0.01ms; --dur-reveal: 0.01ms; --lift-hover: 0px; --lift-card: 0px; } }