/* ============================================================ Pro Tier — ECOTHERM Immobilien GmbH, Achern Corporate-Farben, gemessen auf im-ecotherm.de (Quelle offline): Blau #0061AA = hsl(206, 100%, 33%) Kopf-/Fußbalken Gold #A9762D = hsl( 35, 58%, 42%) H1-Überschriften ⚠ Die warme Familie ist bewusst vom gemessenen Gold weggezogen worden: jetzt das Standard-Orange #FFA500 (CSS `orange`, Hue 39). Buttons sind Outline statt gefüllt. ⚠ Orange trägt NIE weisse Schrift. Es ist Akzent (Kontur, kleine Marker, Hover), nicht Flächenfarbe. Siehe „Warme Markenfamilie". ⚠ brand-gold NICHT auf Corporate-Blau (1,73:1). --color-complement dagegen schafft dort 3,23:1 — genug fuer Striche/Flaechen (3:1), nicht fuer Text (4,5:1). Traegt so den Nav-Hover. ⚠ brand-gold nur für GROSSE Schrift (3,62:1). Für farbige Schrift auf Weiss stattdessen --color-complement-text (5,62:1). ============================================================ */ :root { /* Default-Blau = Nachtblau. Trägt Buttons, Links und aktive Zustände im gesamten Auftritt ausserhalb des Kopfes. ⚠ 1,00:1 gegen --color-text → Links im Fliesstext unterscheiden sich nur über Unterstreichung/Gewicht, nicht über die Farbe. */ --color-primary: var(--color-night); --color-primary-hover: var(--color-night-deep); --color-accent: var(--color-night); --color-accent-hover: var(--color-night-deep); /* Original-Corporate-Blau — NUR im Header (Topline + Logo-Band). */ --color-brand-blue: hsl(206, 100%, 33%); /* ─── Warme Markenfamilie: #FFA500 ────────────────────────────────────── Basis ist das Standard-Orange #FFA500 (CSS-Farbname `orange`), hsl(39, 100%, 50%). Die vier weiteren Rollen sind daraus abgeleitet — gleicher Farbton und volle Saettigung, nur die Helligkeit variiert. GRUNDSATZ: Orange traegt NIE weisse Schrift. Auf #FFA500 waeren das 1,96:1. Button-Text ist --text-sm (14 px / 500), also kleiner Text nach WCAG mit 4,5:1 — ein Orange, das das mit Weiss schafft, ist zwangs- laeufig dunkel und wirkt blutrot. Deshalb: Orange fuellt Flaechen mit DUNKLER Schrift darauf, oder es steht als Kontur bzw. Akzent. Rollen (Kernel-Verwendung live geprueft 09.09.2026): complement Fuellung + Akzent complement-ink Schrift AUF der Fuellung 6,00:1 complement-text orange Schrift auf Weiss 5,62:1 complement-deko Kontur/Balken auf Weiss 3,70:1 Zuweisung der Rollen in card.css. */ --color-complement: #FFA500; /* hsl(39,100%,50%) Fuellung */ --color-complement-hover: #FFB429; /* hsl(39,100%,58%) Hover, heller */ --color-complement-ink: #4D3200; /* hsl(39,100%,15%) Schrift darauf */ --color-complement-text: #8F5D00; /* hsl(39,100%,28%) Schrift auf Weiss */ --color-complement-deko: #B87700; /* hsl(39,100%,36%) Kontur/Balken */ /* Headline-Orange. Auf Hue 39 nachgezogen (Basis #FFA500), Helligkeit auf AA fuer GROSSE Schrift gehalten (auf Weiss 3,70:1, Anforderung 3,0). ⚠ Wird derzeit NIRGENDS verbraucht — 0 Treffer im Kernel-CSS, lokal nur in header.css.bak-zentriert; die H1 laufen ueber --color-primary. ⚠ Nicht auf Corporate-Blau (1,73:1). Gemessener Originalton der Marke war hsl(35,58%,42%) = #A9762D; im-ecotherm.de ist offline, die Messung nicht wiederholbar. */ --color-brand-gold: #B87700; /* hsl(39,100%,36%) — 3,70:1, unbenutzt */ /* Info-Button-Orange, eine Spur heller als complement. ⚠ Trotz des Namens NICHT .btn.primary — die läuft über --color-primary (Nachtblau). Verbraucher ist allein #info-button in card.css. Weisse Schrift darauf 4,73:1 (AA auch für kleine Schrift). */ --color-cta: var(--color-complement); /* ein Orange fuer alles */ /* Nachtblau — Navigations-Sockel, Footer, dunkle Sections. 2,31:1 zum Corporate-Blau = klar erkennbare Stufe. */ --color-night: hsl(214, 45%, 17%); --color-night-deep: hsl(216, 42%, 13%); /* Text — Graphit mit leichtem Blaustich (210°). */ --color-text: hsl(210, 12%, 16%); --color-text-muted: hsl(210, 8%, 36%); --color-text-light: hsl(210, 8%, 44%); --color-graphite: hsl(210, 14%, 24%); --color-graphite-deep: hsl(210, 18%, 15%); --color-bg: hsl(0, 0%, 100%); --color-bg-alt: hsl(210, 20%, 97%); /* Footer: night-DEEP, nicht night — sonst verschwinden Buttons (= --color-primary) vollständig in der Fläche. */ --color-bg-dark: var(--color-night-deep); --color-topbar: var(--color-brand-blue); --color-topbar-text: hsl(0, 0%, 100%); /* Bänder — aus --color-bg-dark aufgehellt, tragen denselben Hue. band-deep trägt das Abschluss-CTA (siehe card.css). */ --color-band: color-mix(in srgb, var(--color-bg-dark) 5%, hsl(0 0% 100%)); --color-band-deep: color-mix(in srgb, var(--color-bg-dark) 10%, hsl(0 0% 100%)); /* Kräftiger als die Kernel-Defaults — feine Hairlines verschwinden für ältere Augen. */ --color-border: hsl(210, 14%, 85%); --color-border-alt: hsl(210, 16%, 91%); --color-border-dark: hsl(210, 12%, 74%); --font-base: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Kundenschrift Book Antiqua — nur lokal, kein Download. Book Antiqua kommt mit MS Office, Palatino Linotype mit Windows, Palatino mit macOS/iOS; TeX Gyre Pagella ist der freie Palatino-Klon auf Linux. Georgia bleibt der Fallback. Fuer garantiert gleiches Rendering muesste Pagella als WOFF2 selbst gehostet werden (Book Antiqua ist Monotype-lizenziert). */ --font-accent: 'Book Antiqua', 'Palatino Linotype', Palatino, 'TeX Gyre Pagella', Georgia, 'Times New Roman', serif; --font-heading: var(--font-accent); /* Zielgruppe 60+: Fließtext und Zeilenabstand über dem Plattform-Default. */ --text-base: 1.0625rem; --leading: 1.7; --button-tracking: 0.06em; --icon-stroke: 2.25; --btn-radius: 0.125rem; --btn-padding: var(--space-4) var(--space-8); --radius: 0.125rem; --radius-lg: 0.25rem; /* Schmale Content-Seiten laufen auf voller Breite mit. Auf 52rem zurücksetzen, wenn Lesezeilen zu breit werden. */ --width-narrow: var(--content-width); --property-hero-aspect: 3 / 2; /* Welcome-Hero (Startseite). Kernel-Default 100dvh + 182px Header ergibt mehr als eine Bildschirmhöhe — die Folgesektion bleibt unsichtbar. 72dvh lässt sie anschneiden und signalisiert so das Scrollen. */ --teaser-welcome-min-height: 72dvh; --teaser-welcome-min-height-fallback: 72vh; }