/* =========================================================================== Hanse Outlet – Corporate Identity Farbwerte und Typografie nach Style Guide (Stand 2024), Seite "FARBEN"/"TYPOGRAFIE", erweitert um die Ergänzung 2026 (Akzentfarben Dusty Rose und Baltic Sun). =========================================================================== */ :root { /* --- Grundfarben laut Style Guide ------------------------------------- */ --ho-horizon: #eaeaea; /* Horizon Grey 100 % */ --ho-horizon-50: #f4f4f4; --ho-horizon-25: #fafafa; --ho-nordic: #547893; /* Nordic Blue 100 % */ --ho-nordic-75: #7f9bb0; --ho-nordic-50: #aabcca; --ho-nordic-25: #d4dee4; --ho-nordic-10: #eef2f5; --ho-nordic-dark: #3f5c72; /* Abstufung für Hover/Tiefe */ --ho-mint: #96aa99; /* Minty Breeze 100 % */ --ho-mint-50: #cad5cc; --ho-mint-25: #e4eae5; --ho-mint-dark: #5f7563; /* Text auf Weiß und Erfolgsmeldung, 5.0:1 */ --ho-mint-tief: #4a5b4d; /* abgeleitet: Text auf der Minty-Fläche, sonst nur 4.1:1 */ --ho-rust: #b5462d; /* Rusty Red 100 % */ --ho-rust-50: #daa396; --ho-rust-25: #ecd1ca; --ho-rust-10: #f7ebe8; --ho-rust-dark: #8c3522; /* --- Akzentfarben, Ergänzung 2026 ------------------------------------- Die 50-%- und 25-%-Stufen sind wie in der übrigen Palette die Volltonfarbe über Weiß. Die -dark-Töne stehen nicht im Style Guide; sie sind abgeleitet, weil die Pastelltöne als Schriftfarbe auf Weiß nicht lesbar wären. */ --ho-altrosa: #deafb6; /* Dusty Rose 100 % */ --ho-altrosa-50: #efd7db; --ho-altrosa-25: #f7ebed; --ho-altrosa-dark: #9c5c68; /* abgeleitet: Text auf Weiß, 5.1:1 */ --ho-altrosa-tief: #7d4552; /* abgeleitet: Text auf der Dusty-Rose-Fläche, 5.4:1 */ --ho-sun: #ead2a4; /* Baltic Sun 100 % */ --ho-sun-50: #f5e9d2; --ho-sun-25: #faf4e8; --ho-sun-dark: #8a6a33; /* abgeleitet: Text auf Weiß, 5.0:1 */ --ho-sun-tief: #5c4519; /* abgeleitet: Text auf der Baltic-Sun-Fläche, 6.1:1 */ --ho-black: #1d1d1b; /* nur für Texte */ --ho-white: #ffffff; --ho-orange: #ee7300; /* Bildmarke */ /* --- Abgeleitete Rollen ----------------------------------------------- */ --grund: var(--ho-horizon-50); --flaeche: var(--ho-white); --flaeche-2: var(--ho-horizon-25); --linie: #dcdcdc; --linie-stark: #c6c6c6; --text: var(--ho-black); --text-leise: #6a6a68; --text-invers: var(--ho-white); /* --- Designelement: abgerundete Quadrate der Bildmarke ----------------- */ --radius-xs: 4px; --radius-s: 8px; --radius: 12px; --radius-l: 18px; --radius-xl: 26px; --schatten-s: 0 1px 2px rgba(29, 29, 27, .06); --schatten: 0 2px 10px rgba(29, 29, 27, .07); --schatten-l: 0 12px 40px rgba(29, 29, 27, .18); --sidebar: 248px; --kopf: 72px; /* Statusleiste des iPhones im Homescreen-Betrieb – sonst liegt die Kopfzeile hinter Uhrzeit und Akkuanzeige. */ --rand-oben: env(safe-area-inset-top, 0px); --kopf-gesamt: calc(var(--kopf) + var(--rand-oben)); /* Unten mindestens 8px Luft, damit die Reiter nicht in der Greifzone von Safari liegen und dessen Symbolleiste aufklappen lassen. */ --rand-unten: max(env(safe-area-inset-bottom, 0px), 8px); --font: 'Lato', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; color-scheme: light; } /* ---------------------------------------------------------- Typografie --- Lato ist Hausschrift für alle Text-Hierarchien. Black für Headlines, Semibold für Sublines, Regular/Bold für Fließtexte. */ @font-face { font-family: 'Lato'; font-weight: 400; font-style: normal; font-display: swap; src: local('Lato Regular'), local('Lato'); } @font-face { font-family: 'Lato'; font-weight: 700; font-style: normal; font-display: swap; src: local('Lato Bold'); } @font-face { font-family: 'Lato'; font-weight: 900; font-style: normal; font-display: swap; src: local('Lato Black'), local('Lato Heavy'); } .headline { font-weight: 900; text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; } .subline { font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: var(--text-leise); } /* ------------------------------------------------------------- Zustände --- Ampel ausschließlich aus CI-Farben und deren Abstufungen: Rusty Red = Alarm, Rusty Red 25 % = Vorwarnung, Nordic Blue = geplant, Minty Breeze = in Ordnung. */ /* --st-bg/--st-fg = gefüllte Chips · --st-line = Kanten --st-weich = flächige Hinterlegung hinter Text (Hinweisboxen, muss ruhig bleiben) --st-ecke = das Eckquadrat der Kennzahlkacheln, trägt keinen Text und darf kräftig sein. Alle auf der 50-%-Stufe, nur Baltic Sun als Vollton: Gelb ist der hellste Ton der Palette und läge auf 50 % gleichauf mit dem neutralen Grau. --st-akzent = Text auf weißem Grund Ampel seit der Ergänzung 2026: Rusty Red für überfällig, Baltic Sun für fällig, Minty Breeze für in Ordnung. Davor waren überfällig und fällig beide rot und nur über die Helligkeit unterschieden. Geplantes steht in Dusty Rose, damit Nordic Blue der Navigation und den Aktionen vorbehalten bleibt. */ [data-status="ueberfaellig"] { --st-bg: var(--ho-rust); --st-fg: var(--ho-white); --st-line: var(--ho-rust-dark); --st-weich: var(--ho-rust-10); --st-ecke: var(--ho-rust-50); --st-akzent: var(--ho-rust); } [data-status="faellig"] { --st-bg: var(--ho-sun); --st-fg: var(--ho-sun-tief); --st-line: var(--ho-sun); --st-weich: var(--ho-sun-25); --st-ecke: var(--ho-sun); --st-akzent: var(--ho-sun-dark); } [data-status="geplant"] { --st-bg: var(--ho-altrosa-50); --st-fg: var(--ho-altrosa-tief); --st-line: var(--ho-altrosa); --st-weich: var(--ho-altrosa-25); --st-ecke: var(--ho-altrosa-50); --st-akzent: var(--ho-altrosa-dark); } [data-status="ok"] { --st-bg: var(--ho-mint-25); --st-fg: var(--ho-mint-tief); --st-line: var(--ho-mint-50); --st-weich: var(--ho-mint-25); --st-ecke: var(--ho-mint-50); --st-akzent: var(--ho-mint-dark); } [data-status="unklar"] { --st-bg: var(--ho-horizon); --st-fg: var(--text-leise); --st-line: var(--linie-stark); --st-weich: var(--ho-horizon-50); --st-ecke: var(--ho-horizon); --st-akzent: var(--text); } [data-status="ruhend"] { --st-bg: var(--ho-horizon); --st-fg: var(--text-leise); --st-line: var(--linie); --st-weich: var(--ho-horizon-50); --st-ecke: var(--ho-horizon); --st-akzent: var(--text-leise); }