/* ========================================================================== MP DESIGN TOKENS · mp-tokens.css Child-Theme: generatepress-child/assets/css/ --------------------------------------------------------------------- Einzige Aufgabe dieser Datei: Design-Tokens bereitstellen. Quelle der Wahrheit für Farben ist AB HIER diese Datei selbst (echte Hex-Werte), NICHT mehr Elementor Global Colors. Grund (Stand 10.09.26): Elementor vergibt nur für die 4 "System Farben" (Primary/Secondary/Text/Accent) stabile, sprechende CSS-Variablennamen (--e-global-color-primary etc.). Alle weiteren, selbst angelegten "Individuellen Farben" (Ink 900, Success, Error BG ...) bekommen zufällige Hash-Namen (z. B. --e-global-color-81d5805), die nicht verlässlich referenzierbar sind und sich beim Neuanlegen der Farbe ändern können. Nur --e-global-color-primary und --e-global-color-text sind deshalb unten verlinkt, der Rest ist Klartext-Hex. Elementor "Individuelle Farben" bleibt trotzdem bestehen und wird bei Änderungen HÄNDISCH mit dieser Datei synchron gehalten (siehe Namenskonventionen-Dokument, Abschnitt 7) - sie ist die Quelle für alles, was Redakteure direkt in Elementor bauen. Diese Datei ändert sich selten (neue Farbe, neuer Radius-Wert) – im Gegensatz zu mp-base.css, die laufend um Komponenten wächst. WICHTIG: STAND 10.09.26 - kein @layer mehr, siehe ui-button.css für die Begründung (Architektur-Korrektur, @layer verlor gegen GeneratePress' nicht-layered CSS unabhängig von Spezifität). ========================================================================== */ :root { /* Farben — Primary/Text sind die einzigen mit stabilem Elementor- Var-Namen, deshalb hier verlinkt. Alles andere: Klartext-Hex, manuell mit Elementor "Individuelle Farben" synchron halten. */ --mp-primary: var(--e-global-color-primary, #951D40); --mp-primary-hover: #7C1936; --mp-primary-active: #6B1530; --mp-primary-tint: #FBE9EF; --mp-primary-tint-icon: #F7E4EA; --mp-ink-900: var(--e-global-color-text, #14161C); --mp-ink-700: #3A3F4B; --mp-ink-500: #6A7183; --mp-ink-400: #9098A8; --mp-ink-300: #C7CCD6; --mp-ink-200: #E1E4EB; --mp-ink-100: #EEEFF4; --mp-surface: #FFFFFF; --mp-surface-subtle: #F6F7FA; --mp-success: #1F7A4D; --mp-success-bg: #E6F4EC; --mp-warning: #9A5B00; --mp-warning-bg: #FCF0DC; --mp-error: #B3261E; --mp-error-bg: #FBE9E7; --mp-info: #3D6488; --mp-info-bg: #E4EBF2; --mp-overlay-75: rgba(20, 22, 28, .75); --mp-overlay-60: rgba(20, 22, 28, .60); /* Radien */ --mp-radius-sm: 4px; --mp-radius-md: 6px; --mp-radius-lg: 8px; --mp-radius-modal: 10px; --mp-radius-xl: 12px; --mp-radius-pill: 999px; /* Spacing – Basis 4px, nur diese Werte verwenden */ --mp-space-1: 4px; --mp-space-2: 8px; --mp-space-3: 12px; --mp-space-4: 16px; --mp-space-5: 20px; --mp-space-6: 24px; --mp-space-8: 32px; --mp-space-10: 40px; --mp-space-12: 48px; --mp-space-16: 64px; /* Typografie Basis: 1rem = 16px (Browser-Standard). rem statt px, damit die Schrift mit der Browser-Schriftgrößen-Einstellung des Nutzers mitskaliert (WCAG-relevant). px-Werte in Kommentaren = Vorgabe aus dem Style Guide, zum Gegenchecken. */ --mp-font-body: "Roboto", sans-serif; --mp-font-serif: "Merriweather", serif; /* bleibt definiert + in mp-fonts.css eingebunden, wird aber nur geladen, wenn sie benutzt wird */ /* SCHRIFT-SCHALTER für alle Überschriften (H1-H5, Modal-Titel, Card-Titel ...): AKTIV = Roboto. Zum Zurückwechseln auf Merriweather genau EINE Zeile ändern: --mp-font-display: var(--mp-font-serif); */ --mp-font-display: var(--mp-font-body); --mp-fs-h1: 2.5rem; --mp-lh-h1: 3rem; /* 40 / 48px */ --mp-fs-h2: 1.875rem; --mp-lh-h2: 2.375rem; /* 30 / 38px */ --mp-fs-h3: 1.5rem; --mp-lh-h3: 2rem; /* 24 / 32px */ --mp-fs-h4: 1.25rem; --mp-lh-h4: 1.75rem; /* 20 / 28px */ --mp-fs-h5: 1.125rem; --mp-lh-h5: 1.625rem; /* 18 / 26px */ --mp-fs-body-l: 1.0625rem; --mp-lh-body-l: 1.75rem; /* 17 / 28px */ --mp-fs-body-m: 0.9375rem; --mp-lh-body-m: 1.5rem; /* 15 / 24px */ --mp-fs-body-s: 0.875rem; --mp-lh-body-s: 1.375rem;/* 14 / 22px */ --mp-fs-label: 0.75rem; --mp-lh-label: 1rem; /* 12 / 16px */ --mp-fs-field-label: 0.875rem; --mp-lh-field-label: 1.25rem; /* 14 / 20px */ --mp-fs-button: 0.9375rem; --mp-lh-button: 1.25rem; /* 15 / 20px */ --mp-fs-caption: 0.75rem; --mp-lh-caption: 1.125rem;/* 12 / 18px */ /* Button-Maße */ --mp-btn-height-sm: 36px; --mp-btn-height-md: 44px; --mp-btn-height-lg: 52px; --mp-btn-fontsize-sm: 14px; --mp-btn-fontsize-md: 15px; --mp-btn-fontsize-lg: 16px; --mp-btn-paddingx-sm: 16px; --mp-btn-paddingx-md: 20px; --mp-btn-paddingx-lg: 24px; /* Component Heights */ --mp-height-input: 48px; --mp-height-header: 64px; --mp-height-badge: 28px; --mp-height-listrow: 56px; --mp-size-icon-btn: 44px; /* Klickfläche 44×44 */ /* Grid (Referenz-Viewport 1440px) */ --mp-grid-columns: 12; --mp-grid-column-width: 90px; --mp-grid-gutter: 24px; --mp-grid-content-width: 1344px; --mp-grid-margin: 48px; /* Shadows */ --mp-shadow-xs: 0 1px 2px rgba(20,22,28,.06); --mp-shadow-sm: 0 2px 6px rgba(20,22,28,.08); --mp-shadow-md: 0 6px 16px rgba(20,22,28,.10); --mp-shadow-lg: 0 16px 32px rgba(20,22,28,.14); --mp-shadow-focus: 0 0 0 3px rgba(90,20,41,.28); /* NACHTRAG (11.09.26): war in ui-form.css bereits referenziert und im dortigen Kopf-Kommentar als "neu in mp-tokens.css ergänzt" beschrieben - war aber nie tatsächlich hier angekommen (var() ohne Fallback, lief seither ins Leere). Wert 1:1 aus dem Style Guide, Abschnitt "Form Elements": "Popover: ... Shadow 0 8 20 rgba(20,22,28,.1)". Ersetzt außerdem drei bisher hart codierte Duplikate (0 8px 20px rgba(20,22,28,.12), leicht abweichende Opacity) in mp-user-menu.css/mp-notification.css. */ --mp-shadow-popover: 0 8px 20px rgba(20,22,28,.1); /* Semantische Button-Tokens (Alias-Ebene) Kein neuer Wert - jedes Token zeigt auf ein bestehendes Ink-Token. Zweck: sprechender Name für "was ist das", ohne den Hex-Wert ein zweites Mal einzutippen. */ --mp-btn-secondary-border: var(--mp-primary); --mp-btn-secondary-text: var(--mp-primary); --mp-btn-secondary-bg: transparent; --mp-btn-secondary-border-hover: var(--mp-primary); --mp-btn-secondary-bg-hover: rgba(149, 29, 64, .08); --mp-btn-secondary-bg-active: rgba(149, 29, 64, .16); --mp-btn-secondary-border-disabled: var(--mp-ink-200); --mp-btn-secondary-text-disabled: var(--mp-ink-400); /* NACHTRAG (11.09.26): ui-button.css nutzt dieses Token bereits seit längerem, aber nur mit Fallback - var(--mp-btn-secondary-bg-disabled, var(--mp-ink-100)) - weil es hier nie definiert wurde. Visuell keine Änderung (der Fallback-Wert war schon Ink-100), jetzt aber sauber zentral gepflegt statt dauerhaft vom Fallback abhängig. */ --mp-btn-secondary-bg-disabled: var(--mp-ink-100); /* PROFIL SPEZIFISCHE TOKENS*/ --mp-profile-cover-height: 160px; --mp-profile-avatar-size: 112px; /* 28.09.26: nur Anwender-/Mitglied-Profil (Anbieter nutzt die Werte oben) */ --mp-profile-avatar-size-member: 180px; --mp-profile-cover-height-member: 200px; } /* -------------------------------------------------------------------- Brücke zu GeneratePress: GP generiert beim Laden ein eigenes :root { --base: ...; --contrast: ...; } Inline-Style im (aus den Customizer-Werten, Stand aktuell noch GP-Standardgrau/-Blau, siehe Screenshot). Diese Datei lädt NACH GP im Enqueue, deshalb gewinnt unser :root-Override hier automatisch (letzte Deklaration auf :root gewinnt, auch ohne höhere Spezifität) - GP-gesteuerte Theme-Bereiche (Menü, Widgets, Suche) ziehen sich dadurch automatisch unsere Farben, ohne dass man sie zusätzlich im Customizer einträgt. TROTZDEM empfohlen, die Customizer-Werte manuell auf dieselben Hex nachzuziehen (siehe Chat) - falls diese Bridge durch eine spätere Enqueue-Umstellung mal vor GP statt danach lädt, zeigt der Customizer dann wenigstens die richtige Live-Vorschau. -------------------------------------------------------------------- */ :root { --base: var(--mp-ink-100); /* helle Flächen */ --base-2: var(--mp-ink-200); --base-3: var(--mp-surface); /* Weiß */ --contrast: var(--mp-ink-900); /* Fließtext */ --contrast-2: var(--mp-ink-700); --contrast-3: var(--mp-ink-500); --accent: var(--mp-primary); /* Links, Akzente */ --accent-2: var(--mp-primary-hover); }