/* ==========================================================================
   UI CARD · components/ui-card.css
   Child-Theme: generatepress-child/assets/css/components/
   ---------------------------------------------------------------------
   STAND 14.09.26 - Aus mp-base.css extrahiert (Card-System lag dort
   fälschlich mit drin, siehe Kopf-Kommentar von mp-base.css: "Buttons/
   Chips ausschließlich in ui-button.css, alles andere hier" - Cards
   gehören aber wie Buttons zu den global wiederverwendbaren
   UI-Komponenten und damit in eine eigene components/-Datei, analog zu
   ui-button.css / ui-form.css / ui-tabs.css). Vorher lag hier
   versehentlich eine 1:1-Kopie von ui-button.css - ersetzt.

   KEIN @layer (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).

   Konsumiert AUSSCHLIESSLICH Tokens aus mp-tokens.css (muss vorher
   geladen sein). Keine eigenen Hex-/px-Werte hier - Ausnahmen mit
   Fallback-Hex sind bewusst dokumentiert (siehe --mp-primary-tint-icon).

   ABHÄNGIGKEIT (nur inhaltlich, nicht Lade-Reihenfolge-kritisch):
   .mp-card__action nutzt .ui-button--tertiary, .mp-card__tags nutzt
   .ui-chip - beide aus ui-button.css. Card-Footer-Markup ohne
   ui-button.css sieht also unvollständig aus, auch wenn diese Datei
   technisch unabhängig lädt.

   Global geladen (nicht an Shortcode/Wrapper gebunden).
   ========================================================================== */

/* ==========================================================================
   CARD SYSTEM · aus Style Guide Abschnitt 08
   ---------------------------------------------------------------------
   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;
*/

/* ==========================================================================
   1. BASIS-ANATOMIE (gilt für alle Varianten)
   ========================================================================== */
.mp-card {
	display: flex;
	flex-direction: column;
	background: var(--mp-surface);
	border: 1px solid var(--mp-ink-200);
	border-radius: var(--mp-radius-lg);
	padding: var(--mp-space-6); /* 24px Standard */
	box-shadow: var(--mp-shadow-xs);
	height: 100%; /* Karten in einer Reihe gleich hoch, siehe Card-Regeln */
	transition: box-shadow .15s ease, border-color .15s ease;
}

/* Ganze Card klickbar -> als <a class="mp-card ..."> verwenden, siehe
   Einbindungs-Beispiel in der Demo. Kein zusätzlicher Button dann. */
a.mp-card {
	text-decoration: none;
	color: inherit;
}

/* Kompakt-Padding, IMMER bei 318px-Breite verwenden, nie darunter */
.mp-card--compact { padding: var(--mp-space-5); /* 20px */ }

/* ---- Zustände ---- */

a.mp-card:hover {
	box-shadow: var(--mp-shadow-sm);
	border-color: var(--mp-ink-300);
	/* bewusst KEIN transform/translateY - Guide: "kein Anheben" */
}
.mp-card--selected {
	border-color: var(--mp-primary);
	box-shadow: 0 0 0 1px var(--mp-primary), var(--mp-shadow-xs);
}
.mp-card--disabled,
.mp-card--disabled:hover {
	position: relative;
	box-shadow: var(--mp-shadow-xs);
	border-color: var(--mp-ink-200);
	background: var(--mp-surface-subtle);
	color: var(--mp-ink-400);
	pointer-events: none; /* keine Hover/Klick-Interaktion */
}
.mp-card--disabled .mp-card__unavailable {
	display: flex;
}
.mp-card__unavailable {
	display: none;
	align-items: center;
	gap: var(--mp-space-2);
	margin-top: var(--mp-space-2);
	font-size: var(--mp-fs-body-s);
	color: var(--mp-ink-400);
}

/* ---- Gemeinsame Bausteine ---- */

/* Bildfläche: 16:9 ODER feste 200px Höhe, Radius NUR oben, randlos bis
   an die Card-Kante (deshalb negative Margins in Höhe des Paddings). */
.mp-card__media {
	margin: calc(var(--mp-space-6) * -1) calc(var(--mp-space-6) * -1) var(--mp-space-4);
	border-radius: var(--mp-radius-lg) var(--mp-radius-lg) 0 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.mp-card--compact .mp-card__media {
	margin: calc(var(--mp-space-5) * -1) calc(var(--mp-space-5) * -1) var(--mp-space-4);
}
.mp-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Icon-Container: 36×36, Radius 8, Tint-Fläche - siehe Token-Hinweis oben */
.mp-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--mp-radius-lg);
	background: var(--mp-primary-tint-icon, #F7E4EA);
	color: var(--mp-primary);
	font-size: 18px;
	margin-bottom: var(--mp-space-4); /* Icon -> Titel: 16px */
}

/* Eyebrow/Status-Tag oben links, z. B. "Neu", "Empfohlen" - nutzt .mp-tag
   (liegt bewusst in mp-base.css, da dort auch außerhalb von Cards
   genutzt - siehe Kommentar dort) */
.mp-card__eyebrow { margin-bottom: var(--mp-space-2); }

.mp-card__title {
	margin: 0;
	font: inherit;
	font-family: var(--mp-font-body);
	font-size: var(--mp-fs-h5);
	line-height: var(--mp-lh-h5);
	font-weight: 600;
	color: var(--mp-ink-900);
}
.mp-card--disabled .mp-card__title { color: var(--mp-ink-400); }

.mp-card__sublabel {
	margin: var(--mp-space-1) 0 0; /* Titel -> Sublabel: 4px */
	font-size: var(--mp-fs-body-s);
	color: var(--mp-ink-500);
}

.mp-card__meta {
	margin: 0 0 var(--mp-space-2);
	font-size: var(--mp-fs-caption);
	color: var(--mp-ink-500);
}

.mp-card__text {
	margin: var(--mp-space-3) 0 0; /* Sublabel -> Text: 12px */
	font-size: var(--mp-fs-body-m);
	color: var(--mp-ink-700);
	/* max. 3 Zeilen, dann kürzen (Guide-Regel) */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding-bottom: var(--mp-space-3, 12px);
}

/* Footer: Text -> Footer 20px Abstand + Trennlinie + 16px, Aktion unten rechts */
.mp-card__footer {
	margin-top: var(--mp-space-5); /* 20px */
	padding-top: var(--mp-space-4); /* 16px nach der Trennlinie */
	border-top: 1px solid var(--mp-ink-200);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mp-space-3);
	margin-top: auto; /* Footer immer am unteren Rand, Karten gleich hoch */
}
.mp-card__source {
	font-size: var(--mp-fs-caption);
	color: var(--mp-ink-500);
}
/* Aktion: IMMER .ui-button--tertiary (aus ui-button.css), max. 1 pro Card */
.mp-card__action { margin-left: auto; }

.mp-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mp-space-2);
	margin-top: var(--mp-space-3);
}
/* Tags nutzen .ui-chip aus ui-button.css - hier nur das "+n" für
   abgeschnittene Listen (max. 3 Tags, siehe Card-Regeln) */
.mp-card__tags-more {
	font-size: var(--mp-fs-caption);
	color: var(--mp-ink-500);
	align-self: center;
}

/* ==========================================================================
   2. VARIANTE A - CONTENT-CARD (6 Spalten / 660px, Padding 24)
   Artikel-/Beitrags-Card mit Bild, Meta-Zeile, Titel, Text, Quelle + Link.
   ========================================================================== */
.mp-card--content .mp-card__title {
	font-size: var(--mp-fs-h4);
	line-height: var(--mp-lh-h4);
}

/* ==========================================================================
   3. VARIANTE B - PERSONEN-CARD (4 Spalten / 432px, Padding 24)
   Avatar + Name + Rolle + Unternehmen + Ort + Tags + "Profil ansehen".
   ========================================================================== */
.mp-card--person {
	text-align: left;
}
.mp-card--person .mp-card__avatar {
	width: 56px;
	height: 56px;
	border-radius: var(--mp-radius-pill);
	background: var(--mp-primary-tint-icon, #F7E4EA);
	color: var(--mp-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: var(--mp-fs-body-l);
	margin-bottom: var(--mp-space-4);
	overflow: hidden;
}
.mp-card--person .mp-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.mp-card--person .mp-card__person-name {
	margin: 0;
	font-family: var(--mp-font-body);
	font-weight: 600;
	font-size: var(--mp-fs-h5);
	color: var(--mp-ink-900);
}
.mp-card--person .mp-card__person-role {
	margin: var(--mp-space-1) 0 0;
	font-size: var(--mp-fs-body-s);
	color: var(--mp-ink-500);
}
.mp-card--person .mp-card__person-location {
	margin: var(--mp-space-1) 0 0;
	font-size: var(--mp-fs-caption);
	color: var(--mp-ink-500);
	display: flex;
	align-items: center;
	gap: var(--mp-space-1);
}

/* ==========================================================================
   4. VARIANTE C - KOMPAKT / KPI (3 Spalten / 318px, Padding 20 -> IMMER
   zusammen mit .mp-card--compact verwenden)
   ========================================================================== */
.mp-card--kpi .mp-card__kpi-label {
	margin: 0;
	font-size: var(--mp-fs-label);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--mp-ink-500);
}
.mp-card--kpi .mp-card__kpi-value {
	margin: var(--mp-space-2) 0 0;
	font-family: var(--mp-font-display);
	font-size: var(--mp-fs-h2);
	line-height: var(--mp-lh-h2);
	color: var(--mp-ink-900);
	/* Guide 04: "Ausschließlich H1/Display und Zahlen in KPI" nutzen
	   Merriweather - deshalb --mp-font-display statt --mp-font-body. */
}
.mp-card--kpi .mp-card__kpi-delta {
	margin: var(--mp-space-2) 0 0;
	font-size: var(--mp-fs-body-s);
	color: var(--mp-success);
}

/* ==========================================================================
   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); }

/* ==========================================================================
   6. MUSTER - UM-PROFIL-BUILDER-ZEILE ALS CARD
   ---------------------------------------------------------------------
   Gilt für jede .um-row aus dem UM Profil-Builder, die zusätzlich
   .mp-card trägt (via "CSS-Klasse"-Feld in den Zeilen-Einstellungen).
   UM schreibt pro Zeile immer Inline-Styles für
   border-width/-style/-radius, padding und margin aus den
   Zeilen-Einstellungen - diese schlagen jede Klassen-Regel und müssen
   daher gezielt mit !important zurückgesetzt werden. Betrifft NUR
   Zeilen mit .mp-card, alle anderen .um-row bleiben unangetastet.
   Nutzung: nur "mp-card" ins CSS-Klasse-Feld der Zeile eintragen,
   Inhalts-Varianten (--content/--person/...) werden hier NICHT
   gebraucht, die stylen nur die __-Bausteine, nicht UM-Feld-Markup.
   ========================================================================== */
.um-row.mp-card {
	border-width: 1px !important;
	border-style: solid !important;
	border-radius: var(--mp-radius-lg) !important;
	padding: var(--mp-space-6) !important; /* Standard 24px */
}
.um-row.mp-card.mp-card--compact {
	padding: var(--mp-space-5) !important; /* Kompakt 20px, nur bei 318px-Spalten */
}

/* ==========================================================================
   8. EMPTY STATE (.mp-empty-state)
   ---------------------------------------------------------------------
   Aus eigenständigem mp_empty_state-Snippet integriert (vorher eigener
   wp_head-Inline-<style>-Block). Gehört zur selben Standalone-Familie
   wie .mp-card/.mp-progress oben in dieser Datei.

   Fallback-Hex-Werte aus der Ursprungsversion entfernt - waren
   generische Tailwind-Grautöne, keine echten Tokens (--mp-ink-900
   Fallback #111827 statt echtem #14161C, --mp-ink-300 Fallback
   #9ca3af statt echtem #C7CCD6, usw.). Tokens sind ohnehin immer
   geladen.

   NEU ggü. Ursprungsversion: .mp-empty-state__suggestions +
   __suggestion - Platzhalter-Markup für "Meinten Sie: ..."-Vorschläge
   (siehe Rückfrage im Chat zur Datenquelle/Trigger-Mechanik, bevor die
   eigentliche Tippfehler-Erkennung gebaut wird). Nutzt bewusst
   .ui-button--tertiary-Optik (kleine Text-Links, keine neue
   Button-Variante) statt Chips - Vorschläge sind klickbare Aktionen
   (lösen eine neue Suche aus), keine reinen Info-Tags wie .ui-chip.
   ========================================================================== */

.mp-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--mp-space-12) var(--mp-space-6);
}

.mp-empty-state__icon {
	font-size: 40px;
	color: var(--mp-ink-300);
	margin-bottom: var(--mp-space-4);
	line-height: 1;
}

.mp-empty-state__title {
	margin: 0 0 var(--mp-space-2);
	font-family: var(--mp-font-body);
	font-size: var(--mp-fs-h5);
	line-height: var(--mp-lh-h5);
	font-weight: 600;
	color: var(--mp-ink-900);
}

.mp-empty-state__text {
	margin: 0;
	font-size: var(--mp-fs-body-m);
	color: var(--mp-ink-500);
	max-width: 360px;
}

.mp-empty-state__action {
	margin-top: var(--mp-space-6);
}

/* ---- Vorschläge ("Meinten Sie: Firewall?") - Platzhalter-Markup,
   Logik/Datenquelle noch offen, siehe Klärung im Chat. ---- */
.mp-empty-state__suggestions {
	margin-top: var(--mp-space-5);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mp-space-2);
}
.mp-empty-state__suggestions-label {
	font-size: var(--mp-fs-caption);
	color: var(--mp-ink-500);
}
.mp-empty-state__suggestions-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--mp-space-3);
}

/* ---- Klickbarer Chip (als <a>) - z. B. "Meinten Sie: Firewall"-
   Vorschläge im Empty State. .ui-chip selbst bleibt der reine
   Info-Badge ohne Interaktions-Optik (Personen-Card-Tags, Status-
   Badges etc.) - Hover/Focus greifen hier NUR, wenn der Chip
   tatsächlich ein <a>-Tag ist, nie bei <span>. ---- */
a.ui-chip {
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s ease;
}
a.ui-chip:hover {
	background: var(--mp-btn-secondary-bg-hover);
	color: var(--mp-primary);
}
a.ui-chip:focus-visible {
	outline: none;
	box-shadow: var(--mp-shadow-focus);
}

/* ==========================================================================
   9. CARD SKELETON (.mp-card--skeleton)
   ---------------------------------------------------------------------
   Platzhalter-Zustand für Cards waehrend eines echten Ladevorgangs
   (AJAX-Request, NICHT fuer rein client-seitiges Filtern wie
   mp-filter-chip.js - dort gibt es keine Wartezeit, die zu verstecken
   waere). Ersetzt Titel/Text/Avatar durch pulsierende graue Balken,
   Card-Huelle (.mp-card selbst: Rahmen/Radius/Schatten/Padding) bleibt
   exakt gleich - dadurch kein Layout-Sprung beim Austauschen gegen die
   echte Card.

   Reines CSS, kein neues JS-File - Shimmer laeuft ueber eine simple
   opacity-Pulsation (kein aufwendiger Gradient-Sweep), das reicht
   fuer den Zweck "es laedt gerade" voellig aus und ist die
   guenstigste Variante performance-seitig (keine background-position-
   Animation über die volle Card-Breite noetig).

   Nutzt AUSSCHLIESSLICH bestehende Tokens (--mp-ink-100/-200), keine
   neuen Farben.
   ========================================================================== */

.mp-card--skeleton {
	cursor: default;
	pointer-events: none;
}
/* Alle echten Inhalte (Bild, Text, Icon, Footer, Tags) ausblenden -
   Skeleton zeigt NUR die Platzhalter-Balken, egal welche Variante
   (--content/--person/--service/--kpi) gerade "lädt". */
.mp-card--skeleton > *:not(.mp-card__skeleton-line) {
	visibility: hidden;
}

.mp-card__skeleton-line {
	display: block;
	height: 12px;
	border-radius: var(--mp-radius-sm);
	background: var(--mp-ink-100);
	animation: mp-skeleton-pulse 1.4s ease-in-out infinite;
}
.mp-card__skeleton-line + .mp-card__skeleton-line {
	margin-top: var(--mp-space-3);
}
/* Größen-Varianten für unterschiedliche Zeilen (Titel breiter/höher
   als Fließtext, letzte Zeile kürzer - klassisches Skeleton-Muster) */
.mp-card__skeleton-line--title  { height: 18px; width: 70%; }
.mp-card__skeleton-line--text   { width: 100%; }
.mp-card__skeleton-line--text-short { width: 55%; }
.mp-card__skeleton-line--avatar {
	width: 56px;
	height: 56px;
	border-radius: var(--mp-radius-pill);
	margin-bottom: var(--mp-space-4);
}

@keyframes mp-skeleton-pulse {
	0%, 100% { background-color: var(--mp-ink-100); }
	50%      { background-color: var(--mp-ink-200); }
}

/* Reduced-Motion: Nutzer, die Animationen deaktiviert haben, bekommen
   einen statischen Platzhalter statt der Puls-Animation. */
@media (prefers-reduced-motion: reduce) {
	.mp-card__skeleton-line {
		animation: none;
	}
}


/* ==========================================================================
   10. REPEATABLE LIST (.mp-repeatable-list)
   ---------------------------------------------------------------------
   Wiederholbare Einträge mit "+"-Button (öffnet ein Eintragen-Modal)
   und pro Zeile ein Stift-Icon (öffnet dasselbe ODER ein eigenes
   Bearbeiten-Modal, VORBEFÜLLT mit den Werten dieser Zeile - siehe
   mp-repeatable-list.js für die Vorbefüllungs-Logik).

   Gehört zur mp-Familie (kein natives HTML-Element als Gegenstück).
   Nutzt für Add/Edit-Buttons ausschließlich bestehende .ui-button-
   Klassen (--icon-only, --secondary, --icon-ghost) - keine neuen
   Button-Varianten nötig.
   ========================================================================== */

.mp-repeatable-list__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--mp-space-3);
}

.mp-repeatable-list__title {
	margin: 0;
	font-family: var(--mp-font-body);
	font-weight: 600;
	font-size: var(--mp-fs-body-m);
	color: var(--mp-ink-900);
}

.mp-repeatable-list__items {
	display: flex;
	flex-direction: column;
}

.mp-repeatable-list__item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--mp-space-3);
	padding: var(--mp-space-3) 0;
	border-bottom: 1px solid var(--mp-ink-200);
}
.mp-repeatable-list__item:last-child {
	border-bottom: 0;
}

.mp-repeatable-list__item-title {
	margin: 0;
	font-weight: 600;
	font-size: var(--mp-fs-body-m);
	color: var(--mp-ink-900);
}
.mp-repeatable-list__item-meta {
	margin: var(--mp-space-1) 0 0;
	font-size: var(--mp-fs-body-s);
	color: var(--mp-ink-500);
}

.mp-repeatable-list__empty {
	padding: var(--mp-space-4) 0;
	font-size: var(--mp-fs-body-s);
	color: var(--mp-ink-500);
}

/* ---------- Bearbeiten-Modal-Footer: Löschen links, Aktionen rechts ----------
   Gemeinsames Muster für alle Repeatable-Lists (Berufserfahrung,
   Bildungsweg, Zertifizierungen) - Löschen-Button sitzt im FUSS als
   ui-button--tertiary statt als Icon oben im Header. Startet mit
   .mp-hidden im Markup, mp-repeatable-list.js blendet ihn beim
   Bearbeiten-Klick ein (siehe data-repeatable-delete-trigger dort -
   der Selektor sucht innerhalb des ganzen Modals, nicht nur im Header,
   die Position ist ihm also egal). */
.mp-repeatable-modal-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mp-space-3);
	width: 100%;
}
.mp-repeatable-modal-footer__delete.ui-button--tertiary,
.mp-repeatable-modal-footer__delete.ui-button--tertiary:hover {
	gap: var(--mp-space-2);
	margin-right: auto;
	color: var(--mp-error);
}
.mp-repeatable-modal-footer__actions {
	display: flex;
	gap: var(--mp-space-3);
	margin-left: auto;
}

/* ============================================================
   ERWEITERUNG: Repeatable List - Icon-Badge, Timeline-Linie,
   Beschreibungstext, Tag-Chips
   ------------------------------------------------------------
   EINFÜGEN in ui-card.css, direkt NACH der bestehenden
   .mp-repeatable-list__empty-Regel (Ende von Abschnitt
   "10. REPEATABLE LIST").

   Nur aktiv, wenn mp_repeatable_list_markup() ein 'icon' bekommt
   bzw. ein Item 'description'/'tags' setzt - ohne diese Args sieht
   die Liste exakt wie zuvor aus (Titel + Meta + Trennlinie), da
   keine der hier neuen Klassen dann im Markup vorkommt.
   ============================================================ */

.mp-repeatable-list__item-body { flex: 1; min-width: 0; }

.mp-repeatable-list__item-description {
	margin: var(--mp-space-2) 0 0;
	font-size: var(--mp-fs-body-s);
	color: var(--mp-ink-700);
	line-height: 1.5;
}

.mp-repeatable-list__item-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mp-space-2);
	margin-top: var(--mp-space-3);
}
/* Tags nutzen bewusst .ui-chip aus ui-button.css (dieselbe Komponente
   wie bei den Card-Tags) statt eigener Chip-Styles. */

/* ---- Timeline-Variante (.mp-repeatable-list--timeline) ---- */
.mp-repeatable-list--timeline .mp-repeatable-list__item {
	border-bottom: 0;
	padding: 0 0 var(--mp-space-5);
	gap: var(--mp-space-4);
}
.mp-repeatable-list--timeline .mp-repeatable-list__item:last-child {
	padding-bottom: 0;
}

.mp-repeatable-list__item-icon {
	position: relative;
	flex: 0 0 auto;
	width: var(--mp-btn-height-md); /* 44px - 28.09.26 vergrößert (vorher 36px fest) */
	height: var(--mp-btn-height-md);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--mp-radius-pill);
	background: var(--mp-primary-tint, #FBE9EF);
	color: var(--mp-primary);
	font-size: var(--mp-fs-h4); /* 20px - vorher 16px fest */
}
/* Farb-Variante für die Timeline-Icons (z. B. um Berufserfahrung optisch von
   Bildungsweg zu unterscheiden). Nutzung: mp_repeatable_list_markup(array(
   ..., 'icon_variant' => 'blue' )) -> Klasse
   .mp-repeatable-list__item-icon--blue am Icon-Kreis. Weitere Varianten nach
   demselben Muster ergänzen (immer Token-Pärchen wie --mp-success/-bg). */
.mp-repeatable-list__item-icon--blue {
	background: var(--mp-info-bg);
	color: var(--mp-info);
}
/* Verbindende Linie zum jeweils nächsten Eintrag - letztes Item bekommt
   keine (kein :after, weil :not(:last-child) oben greift). Falls der
   Abstand bei euch im Live-Rendering nicht exakt bündig wirkt: einfach
   die "20px" unten an var(--mp-space-5) im padding oben anpassen. */
.mp-repeatable-list--timeline .mp-repeatable-list__item:not(:last-child) .mp-repeatable-list__item-icon::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: calc(100% + var(--mp-space-5));
	background: var(--mp-ink-200);
}