/* * VOMA Child Theme – base.css * * Ausschließlich CSS Custom Properties (Design Tokens) und globale * Basis-Reset-Regeln. * * Keine Komponenten, keine Layout-Regeln, keine Utility-Klassen. * * Quellen: * 06_Standards/DEVELOPMENT/CSS-TOKENS.md – autoritative Token-Werte * 06_Standards/CI/COLORS.md – Farbpalette * 06_Standards/CI/TYPOGRAPHY.md – Schriftsystem * 06_Standards/CI/DESIGN.md – Radien, Schatten, Rahmen * 06_Standards/DEVELOPMENT/SPACING.md – Spacing-Skala * 06_Standards/DEVELOPMENT/BREAKPOINTS.md – Breakpoint-Werte * 06_Standards/DEVELOPMENT/LAYOUT.md – Breiten-Tokens * 06_Standards/DEVELOPMENT/ANIMATIONS.md – Transition-Token * 06_Standards/QUALITAET/ACCESSIBILITY.md – prefers-reduced-motion */ /* ============================================================ 1. VOMA DESIGN TOKENS ============================================================ */ :root { /* ---------------------------------------------------------- Farben – Eigene VOMA-Tokens Quelle: 06_Standards/CI/COLORS.md, CSS-TOKENS.md ---------------------------------------------------------- */ --voma-green: #52b165; /* Markenfarbe – nur Ruhezustand */ --voma-green-dark: #3f9a55; /* UI-Interaktions-Token: Hover, Active, Focus, Pressed */ /* ---------------------------------------------------------- Farben – GeneratePress-Tokens (werden von GP verwaltet) Diese Tokens existieren bereits im GP-Customizer. Sie werden hier dokumentiert, aber nicht neu definiert. Referenz: 06_Standards/CI/COLORS.md --contrast: #222222 --contrast-2: #575760 --contrast-3: #b2b2be --base: #f0f0f0 --base-2: #f7f8f9 --base-3: #ffffff --voma-gruen: #52B165 ---------------------------------------------------------- */ /* ---------------------------------------------------------- Radien Quelle: 06_Standards/DEVELOPMENT/CSS-TOKENS.md ---------------------------------------------------------- */ --voma-radius-card: 18px; --voma-radius-inner: 14px; --voma-radius-btn: 12px; --voma-radius-pill: 999px; /* ---------------------------------------------------------- Schatten Quelle: 06_Standards/DEVELOPMENT/CSS-TOKENS.md ---------------------------------------------------------- */ --voma-shadow-card: 0 10px 26px rgba(0, 0, 0, .07); --voma-shadow-card-hover: 0 16px 38px rgba(0, 0, 0, .12); --voma-shadow-btn: 0 10px 20px rgba(0, 0, 0, .10); --voma-shadow-btn-hover: 0 14px 26px rgba(0, 0, 0, .14); /* ---------------------------------------------------------- Rahmen Quelle: 06_Standards/DEVELOPMENT/CSS-TOKENS.md ---------------------------------------------------------- */ --voma-border: 1px solid rgba(0, 0, 0, .06); /* ---------------------------------------------------------- Spacing-Skala Quelle: 06_Standards/DEVELOPMENT/CSS-TOKENS.md, SPACING.md ---------------------------------------------------------- */ --voma-space-1: 0.25rem; /* 4px */ --voma-space-2: 0.5rem; /* 8px */ --voma-space-3: 0.75rem; /* 12px */ --voma-space-4: 1rem; /* 16px */ --voma-space-5: 1.5rem; /* 24px */ --voma-space-6: 2rem; /* 32px */ --voma-space-7: 3rem; /* 48px */ --voma-space-8: 4rem; /* 64px */ /* ---------------------------------------------------------- Seitenrand ("Edge") – einzige Quelle für horizontales Container-Padding, siehe docs/components/mobile-design-system.md. Bewusst getrennt von der generischen --voma-space-Skala, damit eine künftige Anpassung des Seitenrands nicht versehentlich Innenabstände von Kacheln, Buttons etc. mitverändert. Mobile: 20px – lässt Content ca. 90 % der 390–430px-iPhone-Breite nutzen. Ab Tablet großzügiger (siehe Media Query unten). ---------------------------------------------------------- */ --voma-edge: 1.25rem; /* 20px – Mobile */ /* ---------------------------------------------------------- Breakpoints Quelle: 06_Standards/DEVELOPMENT/CSS-TOKENS.md, BREAKPOINTS.md Hinweis: Diese Tokens dienen der Dokumentation und können in JavaScript referenziert werden. In CSS-Mediaqueries werden die Rohwerte direkt verwendet, da Custom Properties in @media-Regeln nicht als Werte genutzt werden können. ---------------------------------------------------------- */ --voma-bp-tablet: 48rem; /* 768px */ --voma-bp-desktop: 64rem; /* 1024px */ /* ---------------------------------------------------------- Breiten Quelle: 06_Standards/DEVELOPMENT/CSS-TOKENS.md, LAYOUT.md ---------------------------------------------------------- */ --voma-max: 75rem; /* 1200px – Standard-Inhaltsbreite */ --voma-max-service: 68.75rem; /* 1100px – Service- und FAQ-Bereiche */ /* Premium-Feinschliff 04.07.2026: getönte Flächen (grauer Hintergrund #f7f8f9, z. B. .voma-story, .voma-trust) wirkten mit der Standardbreite optisch zu knapp gerahmt – der Ton-Wechsel zum Seitenhintergrund war kaum als bewusst gestaltete Fläche erkennbar, eher wie zufällig übrig gebliebener Rand. Eigener, schmalerer Wert nur für den Innenbereich getönter Sektionen (Desktop). */ --voma-max-tinted: 60rem; /* 960px – Innenbreite getönter Flächen */ /* ---------------------------------------------------------- Schrift Quelle: 06_Standards/DEVELOPMENT/CSS-TOKENS.md, TYPOGRAPHY.md ---------------------------------------------------------- */ --voma-font-body: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* ---------------------------------------------------------- Übergänge Quelle: 06_Standards/DEVELOPMENT/CSS-TOKENS.md, ANIMATIONS.md ---------------------------------------------------------- */ --voma-transition-base: 180ms ease; } @media (min-width: 48rem) { :root { --voma-edge: 2rem; /* 32px – Tablet */ } } @media (min-width: 64rem) { :root { --voma-edge: 1.5rem; /* 24px – Desktop (Container-Max-Width greift bereits, Rand darf wieder enger sein) */ } } /* ============================================================ 2. GLOBALER RESET UND BASIS-REGELN ============================================================ */ /* * Box-Sizing: alle Elemente berechnen Breite einschließlich Padding. * Verhindert unerwartete Breitenüberschreitungen. */ *, *::before, *::after { box-sizing: border-box; } /* * Basis-HTML-Regeln. * Schrift, Farbe und Zeilenhöhe gemäß TYPOGRAPHY.md. */ html { font-size: 100%; scroll-behavior: smooth; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; } body { font-family: var(--voma-font-body); font-size: 17px; font-weight: 400; line-height: 1.5; color: #1f2933; background: #ffffff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* * Bilder. * Verhindert, dass Bilder breiter als ihr Container werden. * height: auto bewahrt das Seitenverhältnis. * Quelle: 06_Standards/QUALITAET/PERFORMANCE.md */ img, svg { display: block; max-width: 100%; height: auto; } /* * Links erben Farbe vom umgebenden Element. * Komponentendateien überschreiben dies für spezifische Kontexte. */ a { color: inherit; } /* ============================================================ 3. FOKUS-STILE Quelle: 06_Standards/QUALITAET/ACCESSIBILITY.md ============================================================ */ /* * Sichtbarer Fokusindikator für alle interaktiven Elemente. * :focus-visible zeigt den Fokus nur bei Tastaturnavigation, * nicht bei Mausklick (bessere UX). */ :focus-visible { outline: 2px solid var(--voma-green); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(82, 177, 101, .2); } /* * Standard-Outline entfernen, da :focus-visible übernimmt. * Nur wenn :focus-visible unterstützt wird. */ :focus:not(:focus-visible) { outline: none; } /* ============================================================ 4. HILFKLASSEN ============================================================ */ /* * Screen-Reader-Only: Element visuell verstecken, bleibt aber für * Assistenztechnologien zugänglich (z. B. semantische Überschriften). * Quelle: 06_Standards/QUALITAET/ACCESSIBILITY.md */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ 5. REDUZIERTE BEWEGUNG Quelle: 06_Standards/QUALITAET/ACCESSIBILITY.md 06_Standards/DEVELOPMENT/ANIMATIONS.md ============================================================ */ /* * Alle Animationen und Übergänge für Nutzer deaktivieren, * die in ihrem System "Bewegung reduzieren" aktiviert haben. * * !important ist hier ausdrücklich erlaubt und begründet: * Diese Regel muss alle anderen Transitions übersteuern, um * WCAG 2.1 Erfolgskriterium 2.3.3 zu erfüllen. * Quelle: 06_Standards/DEVELOPMENT/ANIMATIONS.md */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }