/* ==========================================================================
   MP PROFIL-HEADER (Mitglied) · mp-profile-header.css
   Ablage: generatepress-child/assets/css/mp-profile-header.css
   ---------------------------------------------------------------------
   KOMPLETT ERSETZEN - nicht mergen! Die bisherige Datei enthielt zwei
   hintereinanderkopierte Fassungen; die zweite hat mit
   "position: relative !important" + "margin-left" die Avatar-Positionierung
   der ersten wieder aufgehoben -> Foto im Textfluss, Name um ~300px
   eingerückt, Kamera-Button unter dem Foto.

   URSACHE DES "KAPUTTEN" LAYOUTS (UM-Standard-CSS):
     - .um-profile-photo a.um-profile-photo-img ist bei UM absolut
       positioniert mit negativem top (Foto "schwebt" nach oben)
     - .um-profile-meta hat ein großes padding-left (Platz neben dem Foto)
     - beides zusätzlich über UMs formularspezifisches Inline-CSS
       (.um-51208.um ...) mit hoher Spezifität
   -> Deshalb setzen wir die Layout-Eigenschaften an genau diesen
      Selektoren gezielt mit !important zurück (nur Layout, keine Optik).

   SPEZIFITÄT: Alle UM-Overrides sind mit ".um.mp-profile-header" +
   ".um-header" + Elementtyp (div/a) präfixiert. Grund: UMs mobiles
   Responsive-CSS (.um.uimob500 .um-header .um-profile-photo ...,
   ebenfalls mit !important) hätte sonst auf schmalen Viewports
   gewonnen -> Avatar oval, Text zentriert. Unsere Selektoren liegen
   jetzt immer mindestens eine Stufe darüber.

   AUFBAU (optisch EINE Card):
     .um-cover   = oberer Teil, fest Primary, Radius oben
     .um-header  = unterer Teil, weiß, Rahmen + Radius unten
     .um-profile-photo liegt im normalen Fluss und wird per negativem
     margin-top um die halbe Avatar-Größe in den Banner gezogen.
     -> kein position:absolute nötig, kein Rechnen in JS.

   Tokens (mp-tokens.css): --mp-profile-cover-height, --mp-profile-avatar-size,
   --mp-btn-height-sm, --mp-size-icon-btn, --mp-space-*, --mp-radius-*,
   --mp-shadow-*, --mp-ink-*, --mp-primary*, --mp-error, --mp-overlay-*
   Nutzt zusätzlich: .ui-button / .ui-button--tertiary (ui-button.css).
   ========================================================================== */

/* ============================================================
 * KOMPONENTEN-INTERNE ABLEITUNGEN (mobile-first)
 * Keine neuen Rohwerte - nur aus Tokens abgeleitete Größen.
 * ============================================================ */
.mp-profile-header {
	/* 28.09.26: eigene Member-Tokens (180px Avatar / 200px Cover), damit der
	   Anbieter-Header mit --mp-profile-*-size unverändert bleibt. */
	--mp-pfh-cover-h: calc(var(--mp-profile-cover-height-member, var(--mp-profile-cover-height)) * 0.75);
	--mp-pfh-avatar:  calc(var(--mp-profile-avatar-size-member, var(--mp-profile-avatar-size)) * 0.8);
	--mp-pfh-inset:   var(--mp-space-4);
	/* Positionierungs-Anker für alle absolut positionierten Header-Buttons
	   (Stift, Titelbild ändern, Chat starten). OHNE diese Zeile sucht sich
	   "position: absolute" den nächsten positionierten Vorfahren im DOM -
	   das kann ein beliebiger UM-Wrapper sein, mit zufälliger/falscher
	   Position als Folge (behoben am 28.09.26). */
	position: relative;
}
@media (min-width: 601px) {
	.mp-profile-header {
		--mp-pfh-cover-h: var(--mp-profile-cover-height-member, var(--mp-profile-cover-height));
		--mp-pfh-avatar:  var(--mp-profile-avatar-size-member, var(--mp-profile-avatar-size));
		--mp-pfh-inset:   var(--mp-space-6);
	}
}

/* ============================================================
 * COVER / BANNER - fest Primary, kein Upload.
 * UM setzt per JS ein Inline-height (Ratio 3.2:1) -> !important.
 * ============================================================ */
.um.mp-profile-header div.um-cover,
.um.mp-profile-header .um-header.no-cover div.um-cover {
	display: block !important;
	position: relative !important;
	height: var(--mp-pfh-cover-h) !important;
	min-height: 0 !important;
	margin: 0 !important;
	background: var(--mp-pfh-cover-bg, var(--mp-primary)) !important; /* Farbe/Verlauf/Platzhalter: kommt aus dem Titelbild-Dialog */
	border-radius: var(--mp-radius-lg) var(--mp-radius-lg) 0 0;
	overflow: hidden;
}
/* Titelbild (UM-nativer Upload): UMs Bild-Container liegt als Fläche im Cover
   und wird nur sichtbar, wenn der Dialog "Bild" gewählt hat (--mp-pfh-cover-img: 1).
   BEWUSST opacity statt display:none: UMs versteckter Upload-Button
   (.um-btn-auto-width) muss im Rendering bleiben, sonst startet der
   UM-Upload nicht zuverlässig. */
.um.mp-profile-header div.um-cover .um-cover-e {
	position: absolute !important;
	inset: 0;
	height: 100% !important;
	margin: 0 !important;
	opacity: var(--mp-pfh-cover-img, 0);
	pointer-events: none;
}
.um.mp-profile-header div.um-cover .um-cover-e img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: center;
}
/* UM-eigene Bedienelemente im Cover: unsichtbar, aber im DOM (per JS auslösbar). */
.um.mp-profile-header div.um-cover .um-cover-overlay,
.um.mp-profile-header div.um-cover .um-cover-add,
.um.mp-profile-header div.um-cover .um-manual-trigger,
.um.mp-profile-header div.um-cover .um-btn-auto-width {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

/* ============================================================
 * BUTTON "TITELBILD ÄNDERN" (unten rechts im Cover)
 * Gleiche Konvention wie der Kamera-Button am Avatar: immer weiße
 * Fläche (liegt auf Bild/Farbe), Größe --mp-btn-height-sm.
 * ============================================================ */
.um.mp-profile-header div.um-cover button.mp-profile-header__cover-edit.ui-button {
	position: absolute;
	right: var(--mp-space-3);
	bottom: var(--mp-space-3);
	z-index: 3;
	height: var(--mp-btn-height-sm);
	padding: 0 var(--mp-space-3);
	border-color: transparent;
	background: var(--mp-surface);
	color: var(--mp-ink-700);
}
/* Typografie in JEDEM Zustand festnageln: Elementor-Kit/GeneratePress setzen
   für button:hover eigene Schrift-Werte (Schnitt, Buchstabenabstand), die
   spezifischer sind als .ui-button und den Text beim Hover "zusammenziehen". */
.um.mp-profile-header div.um-cover button.mp-profile-header__cover-edit.ui-button,
.um.mp-profile-header div.um-cover button.mp-profile-header__cover-edit.ui-button:hover,
.um.mp-profile-header div.um-cover button.mp-profile-header__cover-edit.ui-button:focus,
.um.mp-profile-header div.um-cover button.mp-profile-header__cover-edit.ui-button:active {
	font-family: var(--mp-font-body);
	font-size: var(--mp-btn-fontsize-sm);
	font-weight: 600;
	line-height: var(--mp-lh-button);
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	transform: none;
	gap: var(--mp-space-2);
	padding: 0 var(--mp-space-3);
}
@media (max-width: 600px) {
	.um.mp-profile-header div.um-cover button.mp-profile-header__cover-edit.ui-button,
	.um.mp-profile-header div.um-cover button.mp-profile-header__cover-edit.ui-button:hover,
	.um.mp-profile-header div.um-cover button.mp-profile-header__cover-edit.ui-button:focus,
	.um.mp-profile-header div.um-cover button.mp-profile-header__cover-edit.ui-button:active { padding: 0; }
}
.um.mp-profile-header div.um-cover button.mp-profile-header__cover-edit.ui-button:hover {
	background: linear-gradient(var(--mp-btn-secondary-bg-hover), var(--mp-btn-secondary-bg-hover)), var(--mp-surface);
	color: var(--mp-primary);
}
.um.mp-profile-header div.um-cover button.mp-profile-header__cover-edit.ui-button:active {
	background: linear-gradient(var(--mp-btn-secondary-bg-active), var(--mp-btn-secondary-bg-active)), var(--mp-surface);
	color: var(--mp-primary);
}
.um.mp-profile-header div.um-cover button.mp-profile-header__cover-edit.ui-button:focus-visible {
	outline: none;
	box-shadow: var(--mp-shadow-focus);
}
@media (max-width: 600px) {
	/* Mobil nur Icon */
	.um.mp-profile-header div.um-cover button.mp-profile-header__cover-edit.ui-button { width: var(--mp-btn-height-sm); padding: 0; }
	.um.mp-profile-header div.um-cover button.mp-profile-header__cover-edit.ui-button span { display: none; }
}

/* ============================================================
 * HEADER-CARD (unterer Teil)
 * ============================================================ */
.um.mp-profile-header div.um-header {
	position: relative !important;
	display: flow-root;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 0 var(--mp-space-4) !important;
	padding: 0 0 var(--mp-space-6) !important;
	background: var(--mp-surface);
	border: 1px solid var(--mp-ink-200);
	border-top: 0;
	border-radius: 0 0 var(--mp-radius-lg) var(--mp-radius-lg);
	box-shadow: var(--mp-shadow-xs);
	text-align: left !important;
}

/* ============================================================
 * AVATAR-CONTAINER
 * Im Fluss, per negativem margin-top halb in den Banner gezogen.
 * ============================================================ */
.um.mp-profile-header .um-header div.um-profile-photo {
	position: relative !important;
	float: none !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	width: var(--mp-pfh-avatar) !important;
	min-width: var(--mp-pfh-avatar) !important;
	max-width: var(--mp-pfh-avatar) !important;
	height: var(--mp-pfh-avatar) !important;
	min-height: 0 !important;
	aspect-ratio: 1 / 1;
	margin: calc(var(--mp-pfh-avatar) / -2) 0 0 var(--mp-pfh-inset) !important;
	padding: 0 !important;
	z-index: 2;
}

/* UMs Link-Wrapper: negatives top/absolute aus UM-CSS neutralisieren.
   pointer-events:none -> Klick aufs Foto navigiert nicht zur eigenen
   Profil-URL (gleiches Verhalten wie im Anbieter-Header). */
.um.mp-profile-header .um-header div.um-profile-photo a.um-profile-photo-img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: auto !important;
	bottom: auto !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;         /* UM setzt hier einen eigenen weißen Rahmen -> doppelter Ring */
	box-shadow: none !important;
	background: transparent !important;
	border-radius: var(--mp-radius-pill) !important;
	overflow: hidden !important;
	pointer-events: none;
}
.um.mp-profile-header .um-header div.um-profile-photo a.um-profile-photo-img img {
	display: block;
	box-sizing: border-box;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	margin: 0 !important;
	padding: 0 !important;
	border: 3px solid var(--mp-surface) !important; /* identisch zum Initialen-Fallback */
	border-radius: var(--mp-radius-pill) !important;
	box-shadow: var(--mp-shadow-sm);
	background: var(--mp-surface);
	object-fit: cover;
}

/* UMs natives Hover-Overlay + natives Foto-Dropdown ersetzen wir durch
   unser eigenes Foto-Menü (Aktionen laufen trotzdem über UMs Original-
   Elemente, siehe mp-profile-header.js). */
.um.mp-profile-header .um-header div.um-profile-photo .um-profile-photo-overlay,
.um.mp-profile-header .um-header div.um-profile-photo .um-dropdown {
	display: none !important;
}

/* ============================================================
 * INITIALEN-FALLBACK
 * Sichtbar, sobald JS .mp-profile-header__avatar--empty setzt (kein
 * eigenes Foto). Wird LIVE umgeschaltet (Upload/Entfernen ohne Reload).
 * ============================================================ */
.mp-profile-header__avatar-fallback {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border: 3px solid var(--mp-surface);
	border-radius: var(--mp-radius-pill);
	background: var(--mp-primary);
	box-shadow: var(--mp-shadow-sm);
	color: var(--mp-surface);
	font-family: var(--mp-font-body);
	font-weight: 600;
	font-size: calc(var(--mp-pfh-avatar) * 0.32);
	line-height: 1;
	user-select: none;
}
.um.mp-profile-header .um-header div.um-profile-photo.mp-profile-header__avatar--empty a.um-profile-photo-img {
	visibility: hidden;
}
.um.mp-profile-header .um-header div.um-profile-photo.mp-profile-header__avatar--empty .mp-profile-header__avatar-fallback {
	display: flex;
}

/* ============================================================
 * KAMERA-BUTTON AM AVATAR
 * Folgt der Icon-Button-Konvention (= Bearbeiten-Stift):
 * Markup-Klassen "ui-button ui-button--icon-only ui-button--secondary",
 * d. h. Radius md, Icon Ink-700, Hover/Active-Tönung + Primary-Icon,
 * Fokus-Ring - alles aus ui-button.css, hier NICHT neu definiert.
 *
 * EINZIGE Abweichung (Kontext "liegt auf Foto/Banner"): die Fläche ist
 * IMMER weiß, sonst geht das Icon auf dem Bild unter. Hover/Active
 * legen die gewohnte Tönung (dieselben Alias-Tokens wie der Stift)
 * ÜBER das Weiß - optisch identisch zum Stift auf weißer Card.
 * Größe: --mp-btn-height-sm, da 44px auf dem 112px-Avatar zu dominant.
 *
 * Selektor bewusst mit .um-profile-photo + a-Tag: UM stylt Links im
 * Foto-Container selbst, das hier gewinnt ohne !important.
 * ============================================================ */
.um.mp-profile-header .um-header div.um-profile-photo a.mp-profile-header__avatar-edit.ui-button {
	position: absolute;
	right: calc(-1 * var(--mp-space-2));   /* ragt über den Kreis hinaus -> verdeckt weniger Foto */
	bottom: calc(-1 * var(--mp-space-2));
	z-index: 3;
	width: var(--mp-btn-height-sm);
	height: var(--mp-btn-height-sm);
	padding: 0;
	border-color: transparent;
	background: var(--mp-surface);
	color: var(--mp-ink-700);
}
.um.mp-profile-header .um-header div.um-profile-photo a.mp-profile-header__avatar-edit.ui-button:hover {
	background: linear-gradient(var(--mp-btn-secondary-bg-hover), var(--mp-btn-secondary-bg-hover)), var(--mp-surface);
	color: var(--mp-primary);
}
.um.mp-profile-header .um-header div.um-profile-photo a.mp-profile-header__avatar-edit.ui-button:active {
	background: linear-gradient(var(--mp-btn-secondary-bg-active), var(--mp-btn-secondary-bg-active)), var(--mp-surface);
	color: var(--mp-primary);
}
.um.mp-profile-header .um-header div.um-profile-photo a.mp-profile-header__avatar-edit.ui-button:focus-visible {
	background: var(--mp-surface);
	color: var(--mp-ink-700);
	outline: none;
	box-shadow: var(--mp-shadow-focus);
}

/* ============================================================
 * NAME-/META-BEREICH (UMs padding-left für "Text neben Foto" weg)
 * ============================================================ */
.um.mp-profile-header .um-header div.um-profile-meta,
.um.mp-profile-header .um-header div.um-main-meta {
	position: static !important;
	float: none !important;
	width: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
}
.um.mp-profile-header .um-header div.um-profile-meta {
	padding-top: var(--mp-space-3) !important;
}
.um.mp-profile-header .um-header div.um-name {
	float: none !important;
	margin: 0 !important;
	padding: 0 var(--mp-pfh-inset) !important;
	text-align: left !important;
}
.um.mp-profile-header .um-header div.um-name a {
	color: var(--mp-ink-900);
	text-decoration: none;
}

.mp-profile-header__role {
	margin-top: var(--mp-space-1);
	padding: 0 var(--mp-pfh-inset);
	font-size: var(--mp-fs-body-m);
	line-height: var(--mp-lh-body-m);
	font-weight: 600;
	color: var(--mp-ink-900);
}
.mp-profile-header__company {
	padding: 0 var(--mp-pfh-inset);
	font-size: var(--mp-fs-body-s);
	line-height: var(--mp-lh-body-s);
	color: var(--mp-ink-500);
}
.mp-profile-header__meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mp-space-2) var(--mp-space-4);
	padding: var(--mp-space-3) var(--mp-pfh-inset) 0;
}
.mp-profile-header__meta-item {
	display: inline-flex;
	align-items: center;
	gap: var(--mp-space-1);
	font-size: var(--mp-fs-caption);
	line-height: var(--mp-lh-caption);
	color: var(--mp-ink-500);
}
.mp-profile-header__role--empty,
.mp-profile-header__company--empty,
.mp-profile-header__meta-item--empty {
	font-style: italic;
	color: var(--mp-ink-400);
	font-weight: 400;
}

/* ============================================================
 * BEARBEITEN-STIFT - oben rechts im weißen Header-Teil
 * (Bezug: .um-header, da .um-profile-meta/.um-main-meta static sind)
 * ============================================================ */
.mp-profile-header .mp-profile-header__edit.mp-profile-header__edit {
	position: absolute;
	top: var(--mp-space-3);
	right: var(--mp-space-3);
	z-index: 3;
}

/* ============================================================
 * "ALS NUTZER ANMELDEN" (nur Admins auf fremden Profilen)
 * ============================================================ */
.mp-profile-header__switch-user {
	position: absolute;
	top: calc(var(--mp-space-3) + var(--mp-size-icon-btn) + var(--mp-space-2));
	right: var(--mp-space-3);
	z-index: 3;
}
.mp-profile-header__switch-user a {
	display: inline-flex;
	align-items: center;
	gap: var(--mp-space-1);
	padding: var(--mp-space-1) var(--mp-space-3);
	border: 1px solid var(--mp-ink-300);
	border-radius: var(--mp-radius-md);
	background: var(--mp-surface);
	font-size: var(--mp-fs-caption);
	line-height: var(--mp-lh-caption);
	color: var(--mp-ink-500);
	text-decoration: none;
	white-space: nowrap;
}
.mp-profile-header__switch-user a:hover {
	border-color: var(--mp-primary);
	color: var(--mp-primary);
}

/* ============================================================
 * "ZURÜCK"-LINK (oberhalb der Card)
 * ============================================================ */
.mp-profile-header__back-link {
	display: inline-flex;
	align-items: center;
	gap: var(--mp-space-2);
	margin-bottom: var(--mp-space-4);
	font-size: var(--mp-fs-body-s);
	font-weight: 600;
	color: var(--mp-ink-500);
	text-decoration: none;
	cursor: pointer;
}
.mp-profile-header__back-link:hover {
	color: var(--mp-primary);
}

/* ============================================================
 * NATIVES UM-UPLOAD-POPUP (Profilbild) - Umstyling
 * body:has(), weil UM das Popup als body-Kind rendert.
 * ============================================================ */
body:has(.mp-profile-header) .um-modal-overlay {
	background-color: var(--mp-overlay-75) !important;
	animation: mpProfileHeaderFadeIn 0.15s ease;
}
body:has(.mp-profile-header) .um-modal {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	width: 92vw !important;
	max-width: 640px !important;
	height: auto !important;
	max-height: 85vh !important;
	margin: 0 !important;
	overflow-y: auto;
	border-radius: var(--mp-radius-modal) !important;
	transform: translate(-50%, -50%) !important;
	animation: mpProfileHeaderSlideUp 0.2s ease;
}
@keyframes mpProfileHeaderFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mpProfileHeaderSlideUp {
	from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
	to   { opacity: 1; transform: translate(-50%, -50%); }
}

body:has(.mp-profile-header) .um-modal-header {
	position: relative;
	box-sizing: border-box;
	padding: var(--mp-space-6) calc(var(--mp-space-6) + var(--mp-size-icon-btn)) var(--mp-space-6) var(--mp-space-6) !important;
	border-bottom: 1px solid var(--mp-ink-200);
	background: var(--mp-surface) !important;
	color: var(--mp-ink-900) !important;
	font-size: var(--mp-fs-h5);
	line-height: var(--mp-lh-h5);
	font-weight: 700;
}
.mp-profile-header__upload-close {
	position: absolute;
	top: 50%;
	right: var(--mp-space-4);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mp-btn-height-sm);
	height: var(--mp-btn-height-sm);
	padding: 0;
	border: none;
	border-radius: var(--mp-radius-md);
	background: transparent !important;
	color: var(--mp-primary) !important;
	font-size: var(--mp-fs-h4);
	line-height: 1;
	cursor: pointer;
	transform: translateY(-50%);
}
.mp-profile-header__upload-close:hover {
	background: var(--mp-primary-tint) !important;
}
.mp-profile-header__min-size-hint {
	font-style: italic;
	opacity: 0.85;
}

body:has(.mp-profile-header) .um-modal-body {
	padding: var(--mp-space-6) !important;
}
body:has(.mp-profile-header) .um-single-image-upload {
	border: 1.5px dashed var(--mp-ink-300) !important;
	border-radius: var(--mp-radius-md);
	background: var(--mp-ink-100) !important;
	color: var(--mp-ink-900) !important;
}
body:has(.mp-profile-header) .um-modal .upload,
body:has(.mp-profile-header) .um-single-image-upload .upload {
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--mp-primary) !important;
	font-weight: 700 !important;
	text-decoration: underline !important;
}
body:has(.mp-profile-header) .um-single-image-upload .upload:hover {
	color: var(--mp-primary-hover) !important;
}

body:has(.mp-profile-header) .um-modal-footer {
	padding: var(--mp-space-4) var(--mp-space-6) !important;
	border-top: 1px solid var(--mp-ink-200);
}
body:has(.mp-profile-header) .um-modal-right {
	display: flex !important;
	flex-direction: row-reverse;
	gap: var(--mp-space-3);
}
body:has(.mp-profile-header) .um-modal-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--mp-btn-height-sm);
	margin: 0 !important;
	padding: 0 var(--mp-space-4);
	border-radius: var(--mp-radius-md) !important;
	font-size: var(--mp-fs-body-s) !important;
	font-weight: 700;
}
body:has(.mp-profile-header) .um-modal-btn.alt {
	background: var(--mp-surface) !important;
	border: 1px solid var(--mp-ink-300) !important;
	color: var(--mp-ink-900) !important;
}
body:has(.mp-profile-header) .um-modal-btn.um-finish-upload {
	background: var(--mp-primary) !important;
	border: 1px solid var(--mp-primary) !important;
	color: var(--mp-surface) !important;
}
body:has(.mp-profile-header) .um-modal-btn.um-finish-upload:hover {
	background: var(--mp-primary-hover) !important;
	border-color: var(--mp-primary-hover) !important;
}
body:has(.mp-profile-header) .um-modal-btn.um-finish-upload.disabled {
	background: var(--mp-ink-300) !important;
	border-color: var(--mp-ink-300) !important;
	color: var(--mp-surface) !important;
	cursor: not-allowed;
}

/* "Foto entfernen" im Footer des UM-Dialogs (links, von JS eingefügt).
   .ui-button--tertiary liefert Größe/Hover-Unterstrich, hier nur die
   Fehlerfarbe für die destruktive Aktion + Footer als Flex-Zeile. */
body:has(.mp-profile-header) .um-modal-footer {
	display: flex;
	align-items: center;
	gap: var(--mp-space-3);
}
body:has(.mp-profile-header) .um-modal-footer .um-modal-right {
	margin-left: auto;
	float: none !important;
}
body:has(.mp-profile-header) .um-modal-footer .um-clear {
	display: none;
}
body:has(.mp-profile-header) .mp-profile-header__upload-remove.ui-button--tertiary,
body:has(.mp-profile-header) .mp-profile-header__upload-remove.ui-button--tertiary:hover {
	gap: var(--mp-space-2);
	color: var(--mp-error);
}
body:has(.mp-profile-header) .mp-profile-header__upload-remove.ui-button--tertiary:active {
	background: var(--mp-error-bg);
	color: var(--mp-error);
}

/* ============================================================
 * ZUSCHNITT-VORSCHAU IM UM-UPLOAD-DIALOG: RUND
 * UM nutzt für den Zuschnitt die Bibliothek Cropper.js. Die Auswahl
 * bleibt technisch quadratisch (UM speichert ein quadratisches Bild,
 * die Rundung macht später CSS), wir runden nur die SICHTBARE
 * Auswahlfläche ab: innen hell = späterer Kreis, Ecken abgedunkelt.
 * Nur Profilbild (data-crop="square"), nicht das Titelbild.
 * Anfasser/Rahmenlinien bleiben eckig -> Größe ziehen funktioniert
 * unverändert.
 * ============================================================ */
body:has(.mp-profile-header) .um-single-image-preview[data-crop="square"] .cropper-view-box,
body:has(.mp-profile-header) .um-single-image-preview[data-crop="square"] .cropper-face {
	border-radius: var(--mp-radius-pill);
}
body:has(.mp-profile-header) .um-single-image-preview[data-crop="square"] .cropper-view-box {
	outline: 0;
	box-shadow: 0 0 0 2px var(--mp-surface);
}

/* ============================================================
 * HEADER + TAB-NAVIGATION = EINE CARD
 * Nur wenn UM eine Tab-Leiste rendert (:has) - ohne Tabs behält der
 * Header seine unteren Rundungen. Die Nav-Card selbst (Hintergrund,
 * Schatten, Tab-Optik) bleibt, wie sie global definiert ist; wir
 * nehmen nur den Abstand und die aneinanderstoßenden Rundungen weg
 * und setzen eine Trennlinie in Ink-200.
 * ============================================================ */
/* Nur ab 2 Tabs ist eine Leiste zum Umschalten sinnvoll - :nth-child(2) prüft,
   ob es überhaupt ein ZWEITES Element gibt (unabhängig davon, ob .um-profile-menu
   selbst sichtbar ist). Bei genau 1 Tab bleibt der Header unten rund, ohne
   Trennlinie - siehe Regel weiter unten, die die Leiste dann ausblendet. */
.um.mp-profile-header:has(.um-profile-menu > *:nth-child(2)) div.um-header {
	margin-bottom: 0 !important;
	border-bottom: 1px solid var(--mp-ink-200);
	border-radius: 0;
}
/* 28.09.26 - Tab-Leiste mit nur 1 Tab (z. B. Anwender nach Entfernen des
   Better-Messages-"Nachrichten"-Tabs, siehe Snippet "Neue Ultimate Member
   Profil-Tabs"): komplett ausblenden. Reagiert automatisch auf die
   tatsächliche Tab-Anzahl, keine Rollenabfrage nötig. Der Inhalt des
   verbleibenden Tabs (z. B. "Über") bleibt normal sichtbar - nur die
   Umschalt-Leiste selbst verschwindet, weil es nichts umzuschalten gibt. */
.um.mp-profile-header .um-profile-navbar:has(.um-profile-menu > *:only-child) {
	display: none !important;
}
.um.mp-profile-header div.um-profile-navbar {
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
}
.um.mp-profile-header div.um-profile-menu {
	margin-top: 0 !important;
	border-top: 0 !important;
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

/* ============================================================
 * ABSTAND TAB-NAVIGATION -> ERSTE CARD
 * UMs .um-profile-body klebt direkt an der Tab-Leiste. Gleicher
 * Rhythmus wie zwischen den übrigen Cards.
 * ============================================================ */
.um.mp-profile-header div.um-profile-body {
	margin-top: var(--mp-space-6) !important;
	padding-top: 0 !important;
}

/* ============================================================
 * UNSICHTBARE AUSWAHL-SHORTCODES IN CARDS
 * [meine_it_loesungen_auswahl] / [meine_branche_mitglied_auswahl]
 * rendern nur das (versteckte) Modal. UM packt sie trotzdem in ein
 * .um-field mit eigenem Innenabstand -> leerer Streifen über der
 * Card-Überschrift. Abstand weg, Element bleibt im DOM (Modal muss
 * erreichbar bleiben - daher KEIN display:none).
 * ============================================================ */
.um.mp-profile-header .um-field:has(> .mp-terms-selector) {
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
}

/* ============================================================
 * 28.09.26 - KONTAKT-ITEMS IN DER META-ZEILE (Zweit-E-Mail / Telefon)
 * Nutzt die bestehende .mp-profile-header__meta-item; nur das
 * Schloss-Symbol ("nur für Sie sichtbar") ist neu.
 * ============================================================ */
.mp-profile-header__meta-lock {
	color: var(--mp-ink-400);
	font-size: var(--mp-fs-caption);
}

/* ============================================================
 * 28.09.26 - CHAT-BUTTON IM HEADER
 * Markup kommt aus mp_render_chat_button() (ui-button--primary).
 * Position: oben rechts, wie der Stift. Ist zusätzlich ein Stift da
 * (Inhaber/Admin), rückt der Chat-Button links daneben.
 * ============================================================ */
.mp-profile-header .mp-profile-header__chat.mp-profile-header__chat {
	position: absolute;
	top: var(--mp-space-3);
	right: var(--mp-space-3);
	z-index: 3;
}
.mp-profile-header .mp-profile-header__chat--with-edit.mp-profile-header__chat--with-edit {
	right: calc(var(--mp-space-3) + var(--mp-size-icon-btn) + var(--mp-space-2));
}
/* Sehr schmale Bildschirme: nur Icon (quadratische 44px-Klickfläche), damit
   der Name Platz behält. Sonst bleibt "Icon + Chat starten" wie auf dem Desktop. */
@media (max-width: 400px) {
	.mp-profile-header .mp-profile-header__chat.mp-profile-header__chat {
		width: var(--mp-size-icon-btn);
		padding: 0;
	}
	.mp-profile-header .mp-profile-header__chat.mp-profile-header__chat span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}


/* ============================================================
 * TITELBILD-DIALOG  (.mp-cover-editor, Inhalt von mp_render_modal)
 * Varianten/States: Tabs (aria-selected), Swatches/Richtung
 * (aria-pressed), hover, focus-visible, disabled (Speichern ohne Bild).
 * ============================================================ */
.mp-cover-editor__preview {
	position: relative;
	aspect-ratio: 4 / 1; /* entspricht dem Banner (ca. 4:1) */
	margin-bottom: var(--mp-space-4);
	border: 1px solid var(--mp-ink-200);
	border-radius: var(--mp-radius-lg);
	background: var(--mp-ink-100);
	overflow: hidden;
}
.mp-cover-editor__preview img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mp-cover-editor__preview-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: var(--mp-fs-body-s);
	color: var(--mp-ink-500);
}
.mp-cover-editor__tabs {
	display: flex;
	gap: var(--mp-space-1);
	padding: var(--mp-space-1);
	margin-bottom: var(--mp-space-4);
	background: var(--mp-ink-100);
	border-radius: var(--mp-radius-md);
}
/* 28.09.26: Reiter "Bild"/"Farbe"/"Verlauf" springen beim Umschalten nicht
   mehr in der Höhe. Vorher wurde das inaktive Panel per [hidden] (=
   display:none) komplett aus dem Layout genommen - die Modal-Höhe folgte
   dadurch jeweils dem gerade sichtbaren Panel (Verlauf ist am höchsten:
   Farbfelder + Richtung, "Bild" am niedrigsten). Jetzt liegen alle drei
   Panels per Grid exakt übereinander (dieselbe Grid-Zelle) - das Grid
   bemisst seine Höhe automatisch am HÖCHSTEN Panel, unabhängig davon,
   welches gerade sichtbar ist. Nur visibility+Klasse steuern jetzt die
   Sichtbarkeit, nicht mehr [hidden]/display - deshalb bleiben alle drei
   Panels layout-technisch "da" (siehe mp-profile-header.js: setzt jetzt
   .mp-cover-editor__panel--active per classList statt panel.hidden). */
.mp-cover-editor__panels {
	display: grid;
}
.mp-cover-editor__panel {
	grid-area: 1 / 1;
	visibility: hidden;
	pointer-events: none;
}
.mp-cover-editor__panel--active {
	visibility: visible;
	pointer-events: auto;
}
.mp-cover-editor__tab {
	flex: 1;
	height: var(--mp-btn-height-sm);
	border: 0;
	border-radius: var(--mp-radius-sm) !important;
	background: transparent;
	font-family: var(--mp-font-body);
	font-size: var(--mp-fs-body-s);
	font-weight: 600;
	color: var(--mp-ink-700);
	cursor: pointer;
}
.mp-cover-editor__tab:hover { color: var(--mp-primary); background: transparent; }
.mp-cover-editor__tab[aria-selected="true"] {
	background: var(--mp-surface);
	color: var(--mp-primary);
	box-shadow: var(--mp-shadow-xs);
}
.mp-cover-editor__tab:focus-visible { outline: none; box-shadow: var(--mp-shadow-focus); }
/* [hidden] muss auch gegen .ui-button { display:inline-flex } gewinnen
   (z. B. "Bild entfernen", solange kein Bild vorhanden ist). */
.mp-cover-editor [hidden] { display: none !important; }
.mp-cover-editor__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mp-space-2);
}
.mp-cover-editor__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mp-space-2);
	margin-bottom: var(--mp-space-4);
}
.mp-cover-editor__swatch {
	width: var(--mp-size-icon-btn);
	height: var(--mp-size-icon-btn);
	padding: 0;
	border: 1px solid var(--mp-ink-300);
	border-radius: var(--mp-radius-md) !important;
	background: var(--mp-swatch);
	cursor: pointer;
}
.mp-cover-editor__swatch:hover { border-color: var(--mp-ink-700); background: var(--mp-swatch); }
.mp-cover-editor__swatch[aria-pressed="true"] {
	outline: 2px solid var(--mp-ink-900);   /* Auswahlring, Stärke wie Fokus-Ring */
	outline-offset: 2px;
}
.mp-cover-editor__swatch:focus-visible { outline: none; box-shadow: var(--mp-shadow-focus); }
.mp-cover-editor__picker {
	width: var(--mp-size-icon-btn);
	height: var(--mp-height-input);
	padding: 0;
	border: 1px solid var(--mp-ink-300);
	border-radius: var(--mp-radius-md);
	background: var(--mp-surface);
	cursor: pointer;
}
.mp-cover-editor__row .ui-input { flex: 1; min-width: 0; }
.mp-cover-editor__dir[aria-pressed="true"] {
	background: var(--mp-primary-tint);
	border-color: var(--mp-primary);
	color: var(--mp-primary);
}