/* Design-Tokens — die einzige Stelle, an der Farben, Schriften und Abstände * definiert werden. Alles andere referenziert nur noch diese Variablen. */ :root { /* ---------- Marke ---------- * Blau und Grün stammen aus der bestehenden Marke und bleiben unverändert. * Ihre Rollen unterscheiden sich aber deutlich, siehe Kontrastwerte. */ --pvm-blue: #024f9d; /* 8,05:1 auf Weiß — trägt Text, Links, UI */ --pvm-blue-dark: #013a75; /* Hover- und Aktivzustand */ --pvm-blue-light: #e8f0fa; /* helle Fläche für Infokästen */ --pvm-blue-line: #b9cfe8; /* feine Umrandung, nur Linie — nie Text */ /* ACHTUNG Grün: 1,91:1 auf Weiß. Das reißt selbst die 3:1-Grenze für * große Schrift. Grün ist deshalb ausschließlich Flächenfarbe mit dunkler * Schrift darauf — niemals Textfarbe, Icon oder Rahmen auf hellem Grund. * Es gibt bewusst kein Token "--pvm-green-text". */ --pvm-green: #aac811; --pvm-green-dark: #7d9209; /* nur für Flächen, nicht für Text auf Weiß */ /* ---------- Neutrale ---------- */ --pvm-ink: #1a1a1a; /* 15,3:1 auf Weiß */ --pvm-ink-muted: #555563; /* 7,3:1 auf Weiß */ --pvm-line: #d9d9d9; --pvm-white: #ffffff; /* ---------- Warmes Beige ---------- * Aimées Wunsch vom 17.08.2026: „ggf. kann noch ein warmes Beige dazu". * Es ersetzt das kühle Hellgrau als ruhige Fläche unter Fallbeispielen, * Kundenstimmen und Seitenköpfen. Ink darauf: 13,4:1. */ --pvm-sand: #f6f1e6; --pvm-sand-line: #e2d8c4; --pvm-surface: var(--pvm-sand); --pvm-surface-alt: #ffffff; /* ---------- Der tragende Grund ---------- * Bis zum 17.08.2026 war das ein fast schwarzes Marineblau (#0b1220). * Aimée: „Wieso ersetzt das Schwarz das freundliche Grün? Farblich ist uns * das viel zu dunkel." Der Grund ist deshalb jetzt das Markenblau selbst. * Gemessen gegen #024f9d: * * Weiß #ffffff 8,05:1 — Text und Überschriften * Helles Blau #cfe3f8 6,13:1 — Links * Blasses Blau #d6e4f4 6,22:1 — Nebentext * Grün #aac811 4,21:1 — nur Flächen, Linien, große Schrift * * Grün bleibt damit auch hier keine Farbe für kleinen Text: 4,21:1 reicht * für Grafik (3:1) und große Schrift, nicht für 15-px-Beschriftungen. */ --pvm-ground: #024f9d; --pvm-ground-raised: #0d66c0; /* 5,73:1 gegen Weiß */ --pvm-ground-line: #3d82c4; --pvm-on-ground: #ffffff; /* 8,05:1 */ --pvm-on-ground-muted: #d6e4f4; /* 6,22:1 */ --pvm-signal: var(--pvm-green); /* 4,21:1 — Fläche und Linie, nie klein */ --pvm-link-on-ground: #cfe3f8; /* 6,13:1 */ /* Grün, so weit aufgehellt, dass es auf dem Markenblau auch kleine Schrift * tragen darf (6,00:1). Damit bleibt Grün als Signalfarbe auf dem Band * erhalten — Navigation, Sprungmarken, Zahlen —, ohne die 4,5:1 zu reißen. */ --pvm-signal-on-ground: #d6e879; /* 6,00:1 */ /* Die Fußzeile steht seit dem 19.08.2026 im Markenblau — Juri: „Footer * bitte in das Standard Blau setzen". Damit ist das dunkle Marineblau * (#0b1220) nirgends mehr im Einsatz. Folge für die Schrift: Grün trägt * hier keine Buchstaben mehr (4,21:1), dafür steht * `--pvm-signal-on-ground` bereit. Grün bleibt Linie und Fläche. */ --pvm-footer-ground: var(--pvm-blue); --pvm-footer-line: #4d7cb8; /* nur Trennlinie, kein Text */ --pvm-footer-muted: #c7d4e8; /* 5,37:1 auf dem Markenblau */ /* ---------- Semantisch ---------- */ --pvm-text: var(--pvm-ink); --pvm-text-muted: var(--pvm-ink-muted); --pvm-bg: var(--pvm-white); --pvm-link: var(--pvm-blue); --pvm-link-hover: var(--pvm-blue-dark); --pvm-focus: var(--pvm-blue); --pvm-focus-inverse: var(--pvm-white); /* ---------- Schrift ---------- */ --pvm-font-heading: 'Onest', system-ui, sans-serif; --pvm-font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Fluide Skala, Basis 18px mobil bis 19px Desktop. */ --pvm-text-xs: clamp(0.78rem, 0.76rem + 0.1vw, 0.83rem); --pvm-text-sm: clamp(0.89rem, 0.86rem + 0.15vw, 0.95rem); --pvm-text-base: clamp(1.05rem, 1rem + 0.25vw, 1.19rem); --pvm-text-lg: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem); --pvm-text-xl: clamp(1.4rem, 1.25rem + 0.7vw, 1.75rem); --pvm-text-2xl: clamp(1.65rem, 1.4rem + 1.2vw, 2.25rem); --pvm-text-3xl: clamp(1.95rem, 1.55rem + 2vw, 3rem); --pvm-text-4xl: clamp(2.3rem, 1.7rem + 3vw, 3.75rem); --pvm-leading-tight: 1.15; --pvm-leading-snug: 1.3; --pvm-leading-normal: 1.65; /* ---------- Abstände ---------- */ --pvm-space-3xs: 0.25rem; --pvm-space-2xs: 0.5rem; --pvm-space-xs: 0.75rem; --pvm-space-sm: 1rem; --pvm-space-md: 1.5rem; --pvm-space-lg: 2.25rem; --pvm-space-xl: 3.5rem; --pvm-space-2xl: 5rem; --pvm-space-3xl: 7rem; /* Ein Abstandsschritt zwischen zwei Abschnitten einer Seite. Er wird genau * einmal zwischen zwei Nachbarn gesetzt, nicht von beiden Seiten — sonst * addieren sich zwei Werte zu einer Lücke, die niemand geplant hat. */ --pvm-section-y: clamp(3rem, 2rem + 4vw, 6rem); /* ---------- Layout ---------- */ --pvm-container: 1200px; /* Höchstbreite der Tonspur. Darüber würden ihre Balken gezogen — das SVG * skaliert ohne Seitenverhältnis. Gezeichnet ist sie für 1590 px. */ --pvm-wave-max: 2400px; --pvm-container-text: 68ch; /* Lesebreite für Fließtext */ --pvm-gutter: clamp(1rem, 4vw, 2.5rem); --pvm-radius-sm: 4px; --pvm-radius: 8px; --pvm-radius-lg: 16px; --pvm-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 4px 16px rgb(0 0 0 / 8%); /* Der Abstand zwischen der Oberkante einer Textzeile und dem ersten * Buchstaben — Halbdurchschuss plus die Lücke über der Versalhöhe. Ein * Bild, das auf der Kastenkante steht, wirkt daneben zu hoch. Aimée am * 21.08.2026: „das Startbild oben auch nicht ganz bündig … oben zur Head * parallel." Gemessen 7 px neben der H1, 8 px neben dem Fließtext. */ --pvm-optische-kante: 0.5rem; /* Muss das 80 px hohe Logo tragen, mit Luft darüber und darunter. */ --pvm-header-height: clamp(4.25rem, 3.4rem + 3vw, 7rem); --pvm-transition: 160ms ease; } /* Nutzer, die weniger Bewegung wollen, bekommen keine. * Gilt global, damit auch Elementor-Animationen erfasst werden. */ @media (prefers-reduced-motion: reduce) { :root { --pvm-transition: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }