/* ========================================================================== FolienMaxx – Design Tokens (helles Thema) Farbwelt aus dem Logo: #007771 (Teal) + #454F55 (Schiefer) Alle Textfarben sind gegen JEDE Sektionsfläche auf WCAG AA geprüft. Die geprüften Minimalwerte stehen als Kommentar an der jeweiligen Zeile. Wer hier Werte ändert, muss neu messen. ========================================================================== */ :root { /* --- Marke ------------------------------------------------------------ */ --brand-teal: #007771; --brand-teal-bright: #009C94; --brand-teal-deep: #007771; --brand-slate: #454F55; /* --- Flächen: Elevation-Ladder ---------------------------------------- Auf hellem Grund läuft die Leiter andersherum als im dunklen Thema: Weiß ist die höchste Ebene, leicht getönte Flächen liegen tiefer. Die Schritte bleiben klein (2–4 % Helligkeit) – spürbar, nie bunt. */ --e-00: #FFFFFF; /* Karten, hellste Sektionen */ --e-05: #F7FAFA; /* Basis */ --e-10: #EFF6F6; /* leichte Absenkung – Farbton 177° */ --e-15: #E6EFEF; /* Band – Trustbar, Garantie, Farbton 177° */ --e-20: #DEE9EA; /* stärkstes neutrales Band */ --e-teal: #E1F4F3; /* markenfarbenes Band – 177°, kräftiger */ --c-bg: var(--e-05); --c-bg-alt: var(--e-10); --c-surface: var(--e-00); --c-surface-2: var(--e-10); --c-line: #E2EAEC; /* dekorative Trennlinien */ --c-line-soft: rgba(16, 23, 25, .08); --c-line-input:#74898F; /* 3,67:1 auf Weiß – Pflicht für Formularrahmen als UI-Element */ /* --- Farbwäschen ------------------------------------------------------- Deutlich zurückhaltender als im dunklen Thema: Auf hellem Grund wirken farbige Verläufe dreimal so stark und kippen schnell ins Bunte. */ --wash-teal: rgba(0, 119, 113, .08); --wash-teal-2: rgba(0, 119, 113, .045); --wash-warm: rgba(240, 170, 70, .10); --wash-cool: rgba(95, 180, 224, .09); /* --- Text -------------------------------------------------------------- Geprüft gegen #FFFFFF, #F7FAFA, #EFF5F6, #E6EEEF und #E4F1EF. */ --c-text: #101719; /* min. 15,4:1 */ --c-text-mute: #4E6068; /* min. 5,6:1 */ --c-text-dim: #55666C; /* min. 5,1:1 */ /* --- Akzent ------------------------------------------------------------ Drei Rollen, weil eine einzige Teal-Nuance auf Weiß nicht alles kann: die Markenfarbe ist als Text zu hell (nur 2,7:1). */ /* Vier Rollen statt drei. Der Grundgedanke: So oft wie möglich die LOGOFARBE selbst verwenden und lieber die Schriftfarbe darauf anpassen, statt die Fläche abzudunkeln. Nur dort, wo weiße Schrift oder kleine Schriftgrade das erzwingen, wird nachgedunkelt – und dann so wenig wie möglich. */ --c-accent: var(--brand-teal); /* Logofarbe: Flächen, Grafik, Icons */ --c-accent-gross:var(--brand-teal); /* grosse Schrift 5,42:1 */ --c-accent-text: var(--brand-teal); /* kleine Schrift 4,63:1 */ --c-accent-fill: var(--brand-teal); /* Fläche, weisse Schrift 5,42:1 */ --c-accent-auf: #0A2422; /* Schrift auf der Logofarbe 5,10:1 */ --c-accent-hover:#00625E; /* Hover dunkler – weiß 7,2:1 */ --c-accent-ink: #FFFFFF; /* Text auf Akzentfläche */ --c-accent-soft: rgba(0, 119, 113, .10); --c-accent-line: rgba(0, 119, 113, .38); /* --- Handlungsfarbe (Buttons) ----------------------------------------- Graphit statt eines Buntton-Gegenpols. Die Seite ist inzwischen deutlich grün geprägt – Teal-Band, dunkelgrüne Vorteile-Sektion, Mint-Flächen. Eine gesättigte Gegenfarbe wirkte darin wie ein Fremdkörper. Graphit setzt sich über die Helligkeit ab statt über den Farbton und lässt das Teal die einzige Farbe der Seite bleiben. Nebeneffekt: 12,9:1 gegen jeden Seitengrund – der Button braucht keinen Rahmen mehr, um als Fläche erkennbar zu sein. Das Bernstein kam dort nur auf 1,8:1. */ --c-cta: #1C2A28; /* Graphit, Ruhezustand */ --c-cta-ink: #FFFFFF; /* 14,88:1 auf Graphit */ --c-cta-edge: #1C2A28; /* zeichnet den Button im Negativ nach */ --shadow-cta: 0 14px 30px -14px rgba(16, 23, 25, .38); /* --- Semantik --------------------------------------------------------- */ --c-warm: #B4700E; --c-cool: #2C7FA8; --c-danger: #C0392B; /* --- Schatten ---------------------------------------------------------- Auf hellem Grund entsteht Tiefe über Schatten, nicht über Kantenlicht. */ --shadow-sm: 0 1px 2px rgba(16, 23, 25, .05), 0 1px 1px rgba(16, 23, 25, .04); --shadow-md: 0 4px 18px -8px rgba(16, 23, 25, .16), 0 1px 3px rgba(16, 23, 25, .06); --shadow-lg: 0 22px 48px -24px rgba(16, 23, 25, .26), 0 2px 10px rgba(16, 23, 25, .06); --shadow-teal: 0 14px 30px -16px rgba(0, 98, 94, .45); --edge-top: var(--shadow-sm); --edge-card: var(--shadow-sm); --edge-raise: var(--shadow-lg); /* --- Typografie -------------------------------------------------------- */ --ff-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ff-body: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ff-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "Cascadia Mono", Consolas, monospace; --fs-hero: clamp(2.9rem, 7.2vw, 6.75rem); --fs-h1: clamp(2.9rem, 5.2vw, 4.75rem); --fs-h2: clamp(2rem, 4.1vw, 3.6rem); --fs-h3: clamp(1.2rem, 1.9vw, 1.6rem); --fs-lead: clamp(1.05rem, 1.45vw, 1.3rem); --fs-body: clamp(1rem, 1.05vw, 1.0625rem); --fs-small: 0.875rem; --fs-micro: 0.75rem; --lh-tight: 0.98; --lh-snug: 1.2; --lh-body: 1.68; --ls-hero: -0.035em; --ls-h2: -0.025em; --ls-label: 0.16em; /* --- Raster & Abstände ------------------------------------------------- */ --wrap: 1320px; --wrap-slim: 860px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --sp-11: 10rem; --section-y: clamp(5rem, 11vw, 10rem); /* --- Form -------------------------------------------------------------- */ --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px; --border: 1px solid var(--c-line); /* --- Bewegung ---------------------------------------------------------- */ --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --t-fast: 140ms; --t-base: 260ms; --t-slow: 620ms; --header-h: 92px; } @media (max-width: 640px) { :root { --header-h: 74px; } }