/* ========================================================================== MP BASE · mp-base.css Child-Theme: generatepress-child/assets/css/ --------------------------------------------------------------------- STAND 10.09.26 - Architektur-Korrektur: KEIN @layer mehr (siehe ui-button.css für die ausführliche Begründung: @layer macht alles darin automatisch schwächer als GeneratePress' nicht-layered CSS, unabhängig von Spezifität - das war der Kern des Secondary/Tertiary- Bugs vom 10.09.26). Button-Komponenten (.mp-btn, .ui-button, alle Varianten) sind HIER RAUSGEFLOGEN - die waren komplett doppelt zu ui-button.css definiert. Ab jetzt gilt: Buttons/Chips ausschließlich in ui-button.css, alles andere (Body-Typo, Cards, Tags, Alerts, Utilities) hier. Konsumiert ausschließlich die Tokens aus mp-tokens.css (muss vorher geladen werden, siehe wp_enqueue_style-Dependency in functions.php). ========================================================================== */ /* ========================================================================== BASE – Grundelemente von GeneratePress überschreiben ========================================================================== */ /* box-sizing: border-box als Fundament - GeneratePress/Elementor setzen das zwar meist schon global, aber wir verlassen uns nicht drauf (z. B. das isolierte Mobile-Vorschau-iframe im User-Menü-Snippet lädt NUR unsere eigenen CSS-Dateien, ohne GP/Elementor - dort fehlte das dann und ein Panel mit width:100% + Rahmen lief 2px über den Viewport hinaus). */ *, *::before, *::after { box-sizing: border-box; } /* Body-Hintergrund bewusst NICHT hier gesetzt: body {background:...} ist ein zu breiter Selektor - hätte sonst Elementors individuelle Seitenhintergründe pro Template überschrieben. Der allgemeine Seitenhintergrund läuft stattdessen über die GeneratePress-Brücke (--base/--base-3 in mp-tokens.css), die GP's eigene, gezieltere Selektoren speist statt einen eigenen body-Selektor zu duplizieren. */ body { color: var(--mp-ink-900); font-family: var(--mp-font-body); font-size: var(--mp-fs-body-m); line-height: var(--mp-lh-body-m); } /* KORREKTUR (11.09.26, 2): !important auf font-family/-size/-weight/ line-height ergänzt. Grund: Elementor-Widgets (z. B. der Heading- Widget-Titel

) tragen NICHT automatisch unsere .mp-h1-Klasse - dort greift von unserer Regel "h1, .mp-h1" nur der reine Tag-Teil "h1" (Spezifität 0,0,1). Elementors eigenes Kit schreibt aber ".elementor-kit-XX h1 {...}" (Spezifität 0,1,1) - schlägt uns also automatisch, IMMER, unabhängig von Ladereihenfolge oder davon, ob in Elementor selbst ein Wert eingetragen oder leer gelassen wurde. Die Kit-ID (hier zufällig -99) ist pro Umgebung unterschiedlich und nicht hart verdrahtbar - exakt dieselbe Situation wie beim border-radius in ui-button.css, dort bereits mit !important gelöst (siehe Kopf-Kommentar dort). Diese Zeilen sind die Fortsetzung derselben, bewusst begrenzten Ausnahme - nicht der Beginn einer generellen !important-Politik. */ h1, .mp-h1 { font-family: var(--mp-font-display) !important; font-weight: 400 !important; font-size: var(--mp-fs-h1) !important; line-height: var(--mp-lh-h1) !important; letter-spacing: -1%; color: var(--mp-ink-900); } /* KORREKTUR (11.09.26): H2-H5 standen auf Roboto 600, Style Guide Abschnitt 04 "Typography System" sieht für H2-H5 durchgängig Merriweather 600 vor (nur H1 ist Merriweather 400) - Roboto ist im Guide ausschließlich für Body/Buttons/Labels/Captions vorgesehen, nicht für Überschriften. Größen/Zeilenhöhen unverändert, die waren schon korrekt. */ h2, .mp-h2 { font-family: var(--mp-font-display) !important; font-weight: 600 !important; font-size: var(--mp-fs-h2) !important; line-height: var(--mp-lh-h2) !important; } h3, .mp-h3 { font-family: var(--mp-font-display) !important; font-weight: 600 !important; font-size: var(--mp-fs-h3) !important; line-height: var(--mp-lh-h3) !important; } h4, .mp-h4 { font-family: var(--mp-font-display) !important; font-weight: 600 !important; font-size: var(--mp-fs-h4) !important; line-height: var(--mp-lh-h4) !important; } h5, .mp-h5 { font-family: var(--mp-font-display) !important; font-weight: 600 !important; font-size: var(--mp-fs-h5) !important; line-height: var(--mp-lh-h5) !important; } /* ========================================================================== TYPOGRAFIE-UTILITIES – Style Guide Abschnitt 04, freistehende Text- Stile ohne eigenes Heading-Tag. H1-H5 laufen oben über Tags, "Button" und "Feld-Label" sind bereits in ui-button.css / ui-form.css komponentisiert - hier NUR die bisher fehlenden Stile: Body L/M/S, Label/Eyebrow, Caption. Body M entspricht dem body{}-Default oben, .mp-text-m ist trotzdem da für Elemente, die NICHT direkt auf body sitzen (z. B. ein

in einer Card mit abweichendem Erb-Kontext). */ .mp-text-l { font-family: var(--mp-font-body); font-weight: 400; font-size: var(--mp-fs-body-l); line-height: var(--mp-lh-body-l); } .mp-text-m { font-family: var(--mp-font-body); font-weight: 400; font-size: var(--mp-fs-body-m); line-height: var(--mp-lh-body-m); } .mp-text-s { font-family: var(--mp-font-body); font-weight: 400; font-size: var(--mp-fs-body-s); line-height: var(--mp-lh-body-s); } .mp-label { font-family: var(--mp-font-body); font-weight: 600; font-size: var(--mp-fs-label); line-height: var(--mp-lh-label); text-transform: uppercase; letter-spacing: .08em; } .mp-caption { font-family: var(--mp-font-body); font-weight: 400; font-size: var(--mp-fs-caption); line-height: var(--mp-lh-caption); } a { color: var(--mp-primary); text-decoration: none; } a:hover, a:focus-visible { color: var(--mp-primary-hover); } :focus-visible { outline: none; box-shadow: var(--mp-shadow-focus); } /* ========================================================================== CARD SYSTEM · aus Style Guide Abschnitt 08 --------------------------------------------------------------------- Ersetzt in mp-base.css den bisherigen Platzhalter: .mp-card { ... nur Fläche/Rahmen/Radius/Schatten ... } .mp-card--compact { padding: var(--mp-space-5); } durch den kompletten Block unten. EINE Anatomie (Basis-Klasse .mp-card + gemeinsame __-Elemente), VIER Inhalts-Varianten als BEM-Modifier (--content / --person / --service / --kpi), UNABHÄNGIG davon die Breite (kommt immer aus dem Grid/Elementor-Spalten, NIE hart auf der Card selbst) und die Zustände (Hover/Selected/Disabled). Style Guide 08: Radius 8, Rahmen 1px Ink-200, Schatten xs (Ruhe) → sm (Hover, KEIN Anheben), Padding 24 Standard / 20 nur bei 318px. ========================================================================== */ /* ---- NEUE TOKENS (bitte in mp-tokens.css ergänzen, direkt unter --mp-primary-tint aus der Badge-Klärung) ---- Guide nennt für den Icon-Container-Tint #F7E4EA - ein anderer Hex-Wert als --mp-primary-tint (#FBE9EF) für den User-Menü-Badge. Bewusst als zweites Token angelegt statt wiederverwendet, siehe Hinweis im Chat. --mp-primary-tint-icon: #F7E4EA; */ /* ========================================================================== 5. VARIANTE D - SERVICE / TOOL (3-up, meist 432px, Padding 24) Icon-Container + Titel + Sublabel + Text + 1 Aktion - entspricht der Anatomie-Referenz-Card im Style Guide 08. ========================================================================== */ .mp-card--service .mp-card__title { font-size: var(--mp-fs-h5); } .mp-tag { display: inline-flex; align-items: center; height: var(--mp-height-badge); padding: 0 var(--mp-space-3); border-radius: var(--mp-radius-pill); font-size: var(--mp-fs-caption); font-weight: 600; } .mp-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--mp-size-icon-btn); height: var(--mp-size-icon-btn); border-radius: var(--mp-radius-md); border: 1px solid var(--mp-ink-300); background: var(--mp-surface); cursor: pointer; } .mp-icon-btn:hover { background: var(--mp-error-bg); border-color: rgba(149, 29, 64, .35); } /* ========================================================================== ALERT SYSTEM --------------------------------------------------------------------- Ersetzt in mp-base.css den bisherigen Platzhalter: .mp-alert { display:flex; gap:...; padding:...; border-radius:...; } .mp-alert--success { background:...; color:...; } ... (nur die 4 Farbzustände, kein Icon/Layout) durch den kompletten Block unten. Struktur: Icon links, Titel (optional) + Text mittig, Close-Button (optional) rechts. Zwei Einsatzarten: 1. STATISCH (kein JS nötig) - Alert steht direkt sichtbar im Markup, z. B. "Profil zu 60% vollständig" im Dashboard. Einfach ohne hidden-Attribut rendern. 2. GETRIGGERT (mp-alert.js) - Alert startet mit hidden-Attribut im Markup, wird per data-alert-show="alert-id" sichtbar gemacht. Für Details siehe Demo-Snippet ("So bindest du es ein"). ========================================================================== */ .mp-alert { display: flex; align-items: flex-start; gap: var(--mp-space-3); padding: var(--mp-space-4); border-radius: var(--mp-radius-lg); border: 1px solid transparent; } /* ---- 4 Farbzustände - unverändert aus dem bisherigen Platzhalter, nur border-color ergänzt (dezenter Rahmen in derselben Farbfamilie, damit Alerts z. B. auf hellem Ink-100-Hintergrund nicht verschwimmen) ---- */ .mp-alert--success { background: var(--mp-success-bg); color: var(--mp-success); border-color: rgba(31, 122, 77, .24); } .mp-alert--warning { background: var(--mp-warning-bg); color: var(--mp-warning); border-color: rgba(154, 91, 0, .24); } .mp-alert--error { background: var(--mp-error-bg); color: var(--mp-error); border-color: rgba(179, 38, 30, .24); } .mp-alert--info { background: var(--mp-info-bg); color: var(--mp-info); border-color: rgba(61, 100, 136, .24); } /* Getriggerte Alerts starten unsichtbar (siehe mp-alert.js) */ .mp-alert[hidden] { display: none; } .mp-alert__icon { flex-shrink: 0; display: flex; font-size: 20px; line-height: 1; margin-top: 1px; /* optische Ausrichtung zur ersten Textzeile */ } .mp-alert__body { flex: 1; min-width: 0; } .mp-alert__title { margin: 0; font-family: var(--mp-font-body); font-weight: 600; font-size: var(--mp-fs-body-m); color: inherit; } /* Titel optional - wenn keiner da ist, trägt __text allein die Zeile */ .mp-alert__title + .mp-alert__text { margin-top: var(--mp-space-1); } .mp-alert__text { margin: 0; font-size: var(--mp-fs-body-s); color: inherit; opacity: .9; /* Text minimal zurückhaltender als der fette Titel */ } .mp-alert__actions { margin-top: var(--mp-space-2); display: flex; gap: var(--mp-space-3); } /* Aktions-Link im Alert (z. B. "Jetzt vervollständigen") - Farbe folgt IMMER der Alert-Farbe, deshalb kein eigenes ui-button--tertiary hier, sondern eine eigene, bewusst schlichte Unterstrichen-Optik */ .mp-alert__action { font-size: var(--mp-fs-body-s); font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 2px; background: none; border: none; padding: 0; cursor: pointer; } .mp-alert__close { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--mp-radius-md); border: none; background: transparent; color: inherit; opacity: .7; cursor: pointer; } .mp-alert__close:hover { opacity: 1; background: rgba(0, 0, 0, .06); } .mp-alert__close:focus-visible { outline: none; box-shadow: var(--mp-shadow-focus); } .mp-alert__close i { font-size: 16px; } /* ========================================================================== UTILITIES ========================================================================== */ .mp-radius-sm { border-radius: var(--mp-radius-sm); } .mp-radius-md { border-radius: var(--mp-radius-md); } .mp-radius-lg { border-radius: var(--mp-radius-lg); } .mp-radius-modal { border-radius: var(--mp-radius-modal); } .mp-radius-xl { border-radius: var(--mp-radius-xl); } .mp-radius-pill { border-radius: var(--mp-radius-pill); } .mp-border { border: 1px solid var(--mp-ink-200); } .mp-border-strong { border: 1px solid var(--mp-ink-300); } .mp-shadow-xs { box-shadow: var(--mp-shadow-xs); } .mp-shadow-sm { box-shadow: var(--mp-shadow-sm); } .mp-shadow-md { box-shadow: var(--mp-shadow-md); } .mp-shadow-lg { box-shadow: var(--mp-shadow-lg); } .mp-overlay-75 { background: var(--mp-overlay-75); } .mp-overlay-60 { background: var(--mp-overlay-60); } .mp-mt-4 { margin-top: var(--mp-space-4); } .mp-mt-6 { margin-top: var(--mp-space-6); } .mp-mt-8 { margin-top: var(--mp-space-8); } /* NEU (21.09.26): Generisches Avatar (Initialen-Kreis) - Basis für .mp-card__avatar (Personen-Card, ui-card.css) UND .mp-data-table__avatar (Tabellen-Style-Guide, mp-data-table.css). Nur hier definiert, damit Farbe/Radius/Zentrierung nicht doppelt gepflegt werden - Größe und Schriftgröße kommen pro Kontext von außen. */ .mp-avatar { border-radius: var(--mp-radius-pill); background: var(--mp-primary-tint-icon); color: var(--mp-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; overflow: hidden; } .mp-avatar img { width: 100%; height: 100%; object-fit: cover; } /* ========================================================================== PROFIL-TYP-SICHTBARKEIT Für Elementor-Container im gemeinsamen UM-Profil-Template. Klasse im Container unter Erweitert -> CSS-Klassen eintragen. Body-Klasse kommt aus dem Snippet "MP Profil-Typ Body-Klasse". ========================================================================== */ body.mp-profile--mitglied .mp-only-anbieter, body.mp-profile--anbieter .mp-only-mitglied { display: none !important; }