/* Community-Seiten aus Paket 1d, Welle 1: Mitgliederverzeichnis und Profil.
 * Lokal im Theme (siehe QUELLE.md). Aufbau fuer das Markup, das Ultimate
 * Member 2.14.0 selbst ausgibt: profile.php und members.php kommen aus dem
 * Plugin, nur die Karte (ultimate-member/members-grid.php) ist unsere.
 * Masse aus Design: templates/mitglieder-verzeichnis, templates/mitglied-profil.
 * Farben, Kanten, Schrift und Fokus setzt ultimate-member.css (Kopie aus
 * Design), hier steht nur Layout. Laedt nach ultimate-member.css. */

/* ─── Rahmen der Vorlage "Community-Seite" ──────────────────────────── */
/* Wie .ss-inhaltsseite: 1200px, Innenrand 24px, dieselbe Kante wie das Logo.
 * Der Inhalt ist nicht auf 670px begrenzt, Verzeichnis und Profil brauchen
 * die Breite. wordpress-inhalt.css begrenzt .wp-block-post-content schon auf
 * 1200px und setzt den Innenrand, hier nur Abstaende und der Titel. */
.ss-community-seite {
	padding-block: 48px 96px;
}
.ss-community-seite > .wp-block-post-title,
.ss-community-seite > .wp-block-post-content {
	max-width: var(--ss-page-max);
	margin-inline: auto;
	padding-inline: 24px;
	box-sizing: border-box;
}
.ss-community-seite > .wp-block-post-title {
	margin-block: 0;
}
.ss-community-seite > .wp-block-post-content {
	margin-block-start: 16px;
}
.ss-community-seite > .wp-block-post-content > p {
	max-width: 68ch;
	color: var(--ss-navy-600);
}
/* Profil: Der sichtbare Titel ist der Name des Mitglieds. Der Seitentitel
 * bleibt als h1 fuer Screenreader. */
.um-page-user .ss-community-seite > .wp-block-post-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.um-page-user .ss-community-seite {
	padding-block-start: 32px;
}
.um-page-user .ss-community-seite > .wp-block-post-content {
	margin-block-start: 0;
}

/* ─── Verzeichnis: Suche und Filter in einer Karte ──────────────────── */
.um-directory .um-member-directory-header {
	border: 1px solid var(--ss-navy-200);
	border-radius: 8px;
	padding: 24px;
	margin: 24px 0 32px;
	gap: 20px;
}
.um-directory .um-member-directory-header .um-member-directory-header-row {
	margin: 0;
	padding: 0;
	width: auto !important;
	justify-content: flex-start !important;
}
.um-directory .um-member-directory-search-line {
	display: flex;
	gap: 16px;
	align-items: flex-end;
	flex-wrap: wrap;
	width: 100% !important;
}
.um-directory .um-member-directory-search-line label {
	flex: 1;
	min-width: 240px;
	margin: 0;
}
.um-directory .um-member-directory-search-line .um-do-search {
	margin: 0 !important;
}
.um-directory .um-member-directory-filters-bar .um-search {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	width: 100%;
	padding: 0 !important;
}
.um-directory .um-member-directory-filters-bar .um-search .um-search-filter {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

/* ─── Verzeichnis: Raster ────────────────────────────────────────────── */
/* Ultimate Member ordnet die Karten per Skript an (Masonry) und schreibt
 * position, left und top an jedes Element und eine Hoehe an den Behaelter.
 * Das Raster setzt das ausser Kraft, deshalb !important. */
.um-directory .um-members.um-members-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
	gap: 24px;
	height: auto !important;
	position: static !important;
}
.um-directory .um-members-grid > .um-gutter-sizer,
.um-directory .um-members-grid > .um-clear {
	display: none;
}
.um-directory .um-members-grid > .um-member {
	position: static !important;
	left: auto !important;
	top: auto !important;
	/* Nach einer Suche verschiebt Masonry die Karten zusaetzlich per transform. */
	transform: none !important;
	transition: none !important;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	text-align: left;
}
.um-directory .um-members-grid > .um-members-none {
	grid-column: 1 / -1;
}

/* ─── Verzeichnis: Karte ─────────────────────────────────────────────── */
.um-directory .um-member .um-member-cover {
	height: 112px !important;
	padding: 0 !important;
	background: var(--ss-navy-100);
	border-bottom: 1px solid var(--ss-navy-200);
	border-radius: 0 !important;
}
.um-directory .um-member .um-member-cover-e,
.um-directory .um-member .um-member-cover-e a {
	display: block;
	height: 100%;
}
.um-directory .um-member .um-member-cover-e img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.um-directory .um-member .um-member-photo {
	padding: 24px 24px 0 !important;
	text-align: left !important;
}
.um-directory .um-member.with-cover .um-member-photo {
	padding-top: 0 !important;
	margin-top: -40px;
}
.um-directory .um-member .um-member-photo a {
	display: inline-block !important;
	width: auto !important;
	height: auto !important;
	position: static !important;
	margin: 0 !important;
}
.um-directory .um-member .um-member-photo img {
	width: 72px !important;
	height: 72px !important;
	display: block;
	box-sizing: border-box;
	background: var(--ss-navy-200);
}
.um-directory .um-member .um-member-card {
	padding: 8px 24px 24px !important;
	text-align: left !important;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}
.um-directory .um-member .um-member-name {
	margin: 0 !important;
	text-align: left;
}
.um-directory .um-member .um-member-name a:hover {
	color: var(--ss-ocean-deep) !important;
}
/* Zeile unter dem Namen: "Segelerfahrung · Heimathafen". Jede Angabe ist
 * ein eigener Block, hier nebeneinander mit Punkt dazwischen. */
.um-directory .um-member .ss-angaben {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.3em;
	margin: 0;
}
.um-directory .um-member .ss-angaben:not(:has(.um-member-tagline)) {
	display: none;
}
.um-directory .um-member .um-member-tagline {
	padding: 0 !important;
	margin: 0 !important;
	text-align: left;
	color: var(--ss-navy-600) !important;
}
/* Ultimate Member rueckt den Block mit den weiteren Angaben ein und setzt
 * eine Linie darueber. */
.um-directory .um-member .um-member-meta-main,
.um-directory .um-member .um-member-meta {
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	width: 100%;
}
.um-directory .um-member .ss-angaben .um-member-tagline + .um-member-tagline::before {
	content: "· ";
}
/* Marken: Segel-Interessen in Navy-100, Crew in Sand-100. Immer mit Wort. */
.um-directory .um-member .ss-marken {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
}
.um-directory .um-member .ss-marke {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ss-navy-600);
	background: var(--ss-navy-100);
	border-radius: 4px;
	padding: 4px 8px;
	margin: 0;
}
.um-directory .um-member .ss-marke--crew {
	color: var(--ss-navy);
	background: var(--ss-sand-100);
}
.um-directory .um-member .um-members-edit-btn {
	margin: 4px 0 0;
	padding: 0;
}
/* Status "wartet", "deaktiviert" sehen nur Admins. Nicht ueber dem Bild. */
.um-directory .um-member .um-member-status {
	position: static !important;
	margin: 12px 24px 0;
}
.um-directory .um-member .um-member-status:empty,
.um-directory .um-member.approved .um-member-status {
	display: none !important;
}

/* ─── Profil: Kopf ───────────────────────────────────────────────────── */
/* Titelbild 200px, Profilbild 132px, halb auf dem Bild. Ultimate Member
 * rechnet Hoehe, Bildgroesse und Einzug aus den Einstellungen (190px) und
 * schreibt sie als eigenes Stylesheet und per Skript, deshalb !important. */
.um.um-profile {
	max-width: 1000px !important;
	margin-inline: auto !important;
}
.um.um-profile .um-cover {
	height: 200px !important;
	border: 1px solid var(--ss-navy-200);
	border-bottom: 0;
	border-radius: 8px 8px 0 0 !important;
	overflow: hidden;
	box-sizing: border-box;
}
.um.um-profile .um-cover .um-cover-e {
	height: 100% !important;
}
.um.um-profile .um-cover .um-cover-e img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.um.um-profile .um-header {
	border: 1px solid var(--ss-navy-200) !important;
	border-radius: 0 0 8px 8px;
	padding: 0 32px 32px !important;
	min-height: 0 !important;
	box-sizing: border-box;
}
.um.um-profile .um-header.no-cover {
	border-radius: 8px;
	padding-top: 32px !important;
}
.um.um-profile .um-header .um-profile-photo {
	width: 156px !important;
	min-height: 66px;
}
.um.um-profile .um-header .um-profile-photo a.um-profile-photo-img {
	width: 132px !important;
	height: 132px !important;
	top: -66px !important;
	left: 0 !important;
}
.um.um-profile .um-header.no-cover .um-profile-photo a.um-profile-photo-img {
	top: 0 !important;
}
.um.um-profile .um-header .um-profile-photo a.um-profile-photo-img img {
	width: 100% !important;
	height: 100% !important;
	box-sizing: border-box;
}
.um.um-profile .um-header .um-profile-meta {
	padding: 24px 0 0 !important;
	margin-left: 156px;
}
.um.um-profile .um-header .um-main-meta {
	padding-right: 200px;
}
.um.um-profile .um-header .um-meta-text {
	margin-top: 8px;
}
/* Zahnrad wird zum Wort. Das Menue dahinter bleibt. */
.um.um-profile .um-header .um-profile-edit {
	top: 24px !important;
	right: 32px !important;
	width: auto !important;
	height: auto !important;
}
.um.um-profile .um-header .um-profile-edit-a {
	display: inline-flex !important;
	align-items: center;
	min-height: 44px;
	padding: 0 20px;
	border: 2px solid var(--ss-ocean-deep);
	border-radius: 4px;
	font-family: var(--ss-font-brand);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ss-ocean-deep) !important;
	text-decoration: none;
	box-sizing: border-box;
}
.um.um-profile .um-header .um-profile-edit-a:hover {
	border-color: var(--ss-navy);
	color: var(--ss-navy) !important;
}
.um.um-profile .um-header .um-profile-edit-a i {
	display: none;
}
.um.um-profile .um-header .um-profile-edit-a::after {
	content: "Profil bearbeiten";
}
/* Schmal: Bild, Name, Text und Button untereinander und linksbuendig.
 * Ultimate Member zentriert dort alles (Klassen uimob340 bis uimob800) und
 * laesst das Bild ueber dem Namen schweben. Der Button steht im Markup vor
 * dem Bild, deshalb die Reihenfolge ueber order. */
@media (max-width: 767px) {
	.um.um-profile .um-header {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 0 24px 24px !important;
	}
	.um.um-profile .um-header > .um-clear {
		display: none;
	}
	.um.um-profile .um-header .um-profile-photo {
		order: 1;
		float: none !important;
		width: 132px !important;
		min-height: 0;
		height: auto !important;
		margin: -66px 0 0 !important;
	}
	.um.um-profile .um-header.no-cover .um-profile-photo {
		margin-top: 0 !important;
	}
	.um.um-profile .um-header .um-profile-photo a.um-profile-photo-img {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		display: block;
		margin: 0 !important;
		float: none !important;
	}
	.um.um-profile .um-header .um-profile-meta {
		order: 2;
		margin-left: 0;
		padding-top: 16px !important;
		width: 100%;
		text-align: left !important;
	}
	.um.um-profile .um-header .um-main-meta {
		padding-right: 0;
	}
	.um.um-profile .um-header .um-name {
		float: none !important;
		text-align: left !important;
	}
	.um.um-profile .um-header .um-meta-text {
		text-align: left !important;
		margin: 8px 0 0 !important;
		padding: 0 !important;
	}
	.um.um-profile .um-header .um-profile-edit {
		order: 3;
		position: static !important;
		margin-top: 16px;
	}
}

/* ─── Profil: Angaben ────────────────────────────────────────────────── */
.um.um-profile .um-profile-body {
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.um.um-profile .um-row-heading {
	font-family: var(--ss-font-brand);
	font-size: 24px !important;
	font-weight: 600 !important;
	line-height: 1.25;
	color: var(--ss-navy) !important;
	margin: 40px 0 16px !important;
	padding: 0 !important;
	border: 0 !important;
}
.um.um-profile .um-row-heading .um-row-heading-icon {
	display: none;
}
.um.um-profile .um-row {
	margin: 0 !important;
	padding: 0 !important;
}
/* Ansicht: jede Angabe eine Karte im Raster. Die beiden Spalten von
 * Ultimate Member loesen sich auf, damit die Felder selbst das Raster
 * fuellen. */
.um.um-profile.um-viewing .um-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 20px;
}
.um.um-profile.um-viewing .um-row > [class*="um-col-"] {
	display: contents;
}
.um.um-profile.um-viewing .um-row .um-clear {
	display: none;
}
.um.um-profile.um-viewing .um-field {
	border: 1px solid var(--ss-navy-200);
	border-radius: 8px;
	padding: 20px 24px !important;
	margin: 0 !important;
	box-sizing: border-box;
}
.um.um-profile.um-viewing .um-field .um-field-label {
	border: 0 !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
}
.um.um-profile.um-viewing .um-field .um-field-label label {
	font-size: 15px !important;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ss-navy-600) !important;
}
.um.um-profile .um-field .um-field-label .um-field-label-icon {
	display: none !important;
}
.um.um-profile.um-viewing .um-field .um-field-area,
.um.um-profile.um-viewing .um-field .um-field-value {
	font-family: var(--ss-font-brand);
	font-size: 17px;
	line-height: 1.5;
	color: var(--ss-navy);
	overflow-wrap: anywhere;
}
/* Hinweis zur Sichtbarkeit: Inhaltsblock im Profil-Formular, ohne Karte. */
.um.um-profile.um-viewing .um-field.um-field-block {
	grid-column: 1 / -1;
	order: 99; /* steht im Formular in Spalte 1, soll nach allen Angaben kommen */
	border: 0;
	border-top: 1px solid var(--ss-navy-200);
	border-radius: 0;
	padding: 20px 0 0 !important;
	margin-top: 20px !important;
	font-size: 15px;
	color: var(--ss-navy-600);
}
/* Leeres Profil */
.um.um-profile .um-profile-note {
	text-align: left;
	margin: 32px 0 0;
	padding: 24px;
	background: var(--ss-navy-100);
	border-radius: 8px;
}
.um.um-profile .um-profile-note span {
	font-size: 17px;
	line-height: 1.5;
	color: var(--ss-navy);
}
.um.um-profile .um-profile-note i {
	display: none;
}

/* ─── Nachbesserungen aus dem Browser, 07.10.2026 ────────────────────── */
/* Ultimate Member rueckt Bild und Name um 30px ein und laesst oben 10px. */
.um.um-profile .um-header .um-profile-photo {
	margin-left: 0 !important;
}
.um.um-profile .um-header .um-main-meta {
	padding-top: 0 !important;
}
.um.um-profile .um-header .um-name {
	margin: 0 !important;
}
.um.um-profile .um-header .um-profile-edit {
	z-index: 2;
	line-height: normal !important;
}
/* Die Leiste fuer Profil-Reiter zeigt ohne Reiter nur eine 2px-Linie. */
.um.um-profile .um-profile-navbar:not(:has(.um-profile-nav-item)) {
	display: none !important;
}
/* Keine Icons: Zahnrad im Button "Profil bearbeiten" auf der Karte. */
.um-directory .um-members-edit-btn .um-button::before,
.um-directory .um-members-edit-btn .um-button i {
	display: none !important;
}
.um-directory .um-members-edit-btn .um-button {
	padding-left: 22px !important;
}
.um.um-profile .um-header .um-profile-edit-a {
	border: 2px solid var(--ss-ocean-deep) !important;
	height: auto !important;
}
.um.um-profile .um-header .um-profile-edit-a:hover {
	border-color: var(--ss-navy) !important;
}

/* ─── Verzeichnis: Blaettern ─────────────────────────────────────────── */
/* Ultimate Member gibt span.pagi aus und faerbt die aktuelle Seite hellblau. */
.um-directory .um-members-pagination-box {
	margin-top: 32px !important;
}
.um-directory .um-members-pagi {
	gap: 8px;
	height: auto !important;
}
.um-directory .um-members-pagi span.pagi {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	float: none !important;
	min-width: 44px;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 12px !important;
	box-sizing: border-box;
	border: 1px solid var(--ss-navy-200) !important;
	border-radius: 4px !important;
	background: #fff !important;
	color: var(--ss-ocean-deep) !important;
	font-size: 17px;
	line-height: 1;
}
.um-directory .um-members-pagi span.pagi:hover {
	color: var(--ss-navy) !important;
	border-color: var(--ss-navy) !important;
}
.um-directory .um-members-pagi span.pagi.current {
	color: var(--ss-navy) !important;
	border-color: var(--ss-navy) !important;
	font-weight: 600;
}
.um-directory .um-members-pagi span.pagi.disabled {
	color: var(--ss-navy-300) !important;
	border-color: var(--ss-navy-200) !important;
	cursor: not-allowed;
}
/* Die Karte um Suche und Filter rechnet den Innenrand sonst zur Breite dazu
 * und steht rechts 48px ueber das Raster hinaus. */
.um-directory .um-member-directory-header {
	box-sizing: border-box;
	width: 100%;
}
/* Kein display hier: Ultimate Member blendet den Hinweis selbst ein, wenn
 * das Profil leer ist. */
.um.um-profile .um-profile-note,
.um.um-profile .um-profile-note span {
	text-align: left !important;
}
.um-directory .um-members-none,
.um-directory .um-members-none p {
	text-align: left !important;
}

/* ─── Formulare: Anmelden, Registrieren, Passwort (Welle 2) ──────────── */
/* Auf dem Markup, das Ultimate Member 2.14.0 ausgibt (login.php,
 * register.php, password-reset.php aus dem Plugin). Masse aus Design:
 * templates/registrierung, components/core/Feld. Farben, Kanten und Fokus
 * setzt ultimate-member.css.
 * UM schreibt die Breite des Formulars aus den Einstellungen als eigenes
 * Stylesheet (.um-1949.um { max-width: 450px }) und zentriert es. In der
 * Spalte der Formularseite fuellt das Formular die Breite. */
.ss-formularseite .um {
	max-width: none !important;
	margin-inline: 0 !important;
}
.ss-formularseite .um .um-form {
	margin-block-start: 8px;
}
.ss-formularseite .um .um-field {
	padding: 24px 0 0;
}
.ss-formularseite .um .um-field-label {
	margin: 0 0 8px;
}
/* UM: .um .um-form input[type=text] (0,3,1, !important) setzt 40px Hoehe,
 * 12px Innenrand und 15px Schrift. */
.ss-formularseite .um .um-form input[type="text"],
.ss-formularseite .um .um-form input[type="email"],
.ss-formularseite .um .um-form input[type="password"] {
	box-sizing: border-box !important;
	height: auto !important;
	min-height: var(--ss-hit-min);
	padding: 12px 16px !important;
	font-size: 17px !important;
	line-height: 1.4 !important;
}
/* Hinweis zu einem Feld: Inhaltsblock aus dem Formular-Editor, steht direkt
 * unter dem Feld. Nur im Formular Registrieren: Auf "Passwort zuruecksetzen"
 * gibt UM seine Einleitung und seine Meldungen ebenfalls als Inhaltsblock aus. */
.ss-formularseite .um-register .um-field.um-field-type_block {
	padding-top: 8px;
}
.ss-formularseite .um-register .um-field-block {
	font-size: 15px;
	line-height: 1.5;
	color: var(--ss-navy-600);
}
/* Passwort zuruecksetzen: UM setzt Einleitung und Meldungen mittig (style am
 * Element) und klein. Hier wie die Einleitung der anderen Formularseiten:
 * linksbuendig, Literata 17px. */
.ss-formularseite .um-password .um-field.um-field-type_block {
	padding-top: 0;
}
.ss-formularseite .um-password .um-field-block,
.ss-formularseite .um-password .um-field-block > div {
	text-align: left !important;
	font-family: var(--ss-font-read);
	font-size: 17px;
	line-height: 1.6;
	color: var(--ss-navy);
}

/* Buttons: so breit wie ihr Wort, links. UM gibt zwei Haelften nebeneinander. */
.ss-formularseite .um .um-col-alt,
.ss-formularseite .um .um-col-alt-b {
	margin: 0;
	padding: 0;
}
.ss-formularseite .um .um-half,
.ss-formularseite .um .um-center {
	float: none;
	width: auto !important;
	text-align: left;
}
.ss-formularseite .um .um-col-alt .um-clear {
	display: none;
}
.ss-formularseite .um input[type="submit"].um-button {
	display: inline-flex !important;
	width: auto !important;
	min-height: 48px;
	padding: 0 24px !important;
	font-size: 17px !important;
}
/* Zweiter Weg als Textlink ("Schon registriert? Anmelden",
 * "Noch nicht dabei? Registrieren"). */
.ss-formularseite .um a.um-button.um-alt {
	display: inline-flex !important;
	align-items: center;
	width: auto !important;
	min-height: var(--ss-hit-min);
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	text-align: left;
}
/* UM setzt den Link auf display: block, der Text haengt dann oben in der
 * 44px-Zeile statt mittig neben dem Button. */
.ss-formularseite .um .um-link-alt {
	display: inline-flex !important;
	align-items: center;
	min-height: var(--ss-hit-min);
	font-size: 17px;
	color: var(--ss-ocean-deep) !important;
	text-decoration: none;
}
.ss-formularseite .um .um-link-alt:hover {
	color: var(--ss-navy) !important;
}

/* Registrieren und Passwort: Button, darunter der Textlink. */
.ss-formularseite .um-register .um-col-alt,
.ss-formularseite .um-password .um-col-alt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding-top: 24px;
}

/* Anmelden: "Anmelden" und "Passwort vergessen?" in einer Zeile, darunter
 * mit Linie abgesetzt der Weg zur Registrierung. UM gibt die drei in zwei
 * Behaeltern aus (.um-col-alt mit Kaestchen und beiden Buttons, .um-col-alt-b
 * mit dem Link). display: contents loest den ersten auf, damit die Reihenfolge
 * ueber order gesetzt werden kann. */
.ss-formularseite .um-login form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 24px;
}
.ss-formularseite .um-login form > .um-row,
.ss-formularseite .um-login .um-col-alt > .um-field {
	flex: 0 0 100%;
}
.ss-formularseite .um-login .um-col-alt {
	display: contents;
}
.ss-formularseite .um-login .um-left {
	order: 1;
	margin-block-start: 24px;
}
.ss-formularseite .um-login .um-col-alt-b {
	order: 2;
	margin-block-start: 24px;
	text-align: left;
}
.ss-formularseite .um-login .um-right {
	order: 3;
	flex: 0 0 100%;
	margin-block-start: 48px;
	padding-block-start: 24px;
	border-top: 1px solid var(--ss-navy-200);
}

/* Kaestchen ("Angemeldet bleiben", Datenschutz): UM setzt das gezeichnete
 * Kaestchen absolut und den Text grau (#888) mit 36px Rand. Hier eine Zeile
 * von 44px, Kaestchen und Text mittig, Text in Navy. Das echte input bleibt
 * unsichtbar im Label und nimmt keinen Platz in der Zeile. */
.ss-formularseite .um .um-field.um-field-c {
	padding-top: 16px;
}
.ss-formularseite .um label.um-field-checkbox {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: var(--ss-hit-min);
	margin: 0;
	padding: 0;
}
.ss-formularseite .um label.um-field-checkbox input {
	position: absolute;
}
.ss-formularseite .um .um-field-checkbox-state {
	position: static;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
}
.ss-formularseite .um .um-field-checkbox-option {
	margin: 0 !important;
	font-size: 17px !important;
	line-height: 1.5;
	color: var(--ss-navy) !important;
}
.ss-formularseite .um-login .um-col-alt-b {
	display: flex;
	align-items: center;
}

/* ─── "Neu dabei" auf der Seite Community (Welle 2) ──────────────────── */
/* Zweites Verzeichnis mit den juengsten Profilen, im Kasten .ss-neu-dabei.
 * Dieselbe Vorlage wie im Verzeichnis (members-grid.php), hier aber als Liste
 * wie in templates/community: je Seglerin eine Zeile mit Linie oben, Bild
 * 48px, Name 17px, darunter die Angaben in 15px. Titelbild und Marken sind in
 * den Einstellungen dieses Verzeichnisses aus, Kopfzeile und Blaettern haben
 * dort keinen Schalter. Die Selektoren tragen .ss-neu-dabei zusaetzlich und
 * gewinnen damit gegen die Karten-Regeln weiter oben. */
.ss-neu-dabei .um-directory .um-member-directory-header,
.ss-neu-dabei .um-directory .um-members-total,
.ss-neu-dabei .um-directory .um-members-pagination-box {
	display: none !important;
}
.ss-neu-dabei .um-directory {
	margin-block-start: 16px;
}
.ss-neu-dabei .um-directory .um-members.um-members-grid {
	display: block;
}
.ss-neu-dabei .um-directory .um-members-grid > .um-member {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 0 !important;
	border: 0 !important;
	border-top: 1px solid var(--ss-navy-200) !important;
	border-radius: 0 !important;
	background: none !important;
}
.ss-neu-dabei .um-directory .um-member .um-member-cover,
.ss-neu-dabei .um-directory .um-member .um-members-edit-btn,
.ss-neu-dabei .um-directory .um-member .um-member-meta-main {
	display: none !important;
}
.ss-neu-dabei .um-directory .um-member .um-member-photo {
	flex: none;
	margin: 0 !important;
	padding: 0 !important;
}
.ss-neu-dabei .um-directory .um-member .um-member-photo img {
	width: 48px !important;
	height: 48px !important;
	border: 0 !important;
}
.ss-neu-dabei .um-directory .um-member .um-member-card {
	min-width: 0;
	padding: 0 !important;
	gap: 0;
}
.ss-neu-dabei .um-directory .um-member .um-member-name a {
	font-size: 17px !important;
	line-height: 1.4 !important;
}
.ss-neu-dabei .um-directory .um-member .um-member-tagline {
	font-size: 15px !important;
	line-height: 1.4 !important;
	color: var(--ss-navy-600) !important;
}

/* Anmeldeseite, wenn schon angemeldet: UM zeigt Bild, Name und zwei Links,
 * mittig und mit Listenpunkten. Hier linksbuendig in einer Zeile wie "Neu
 * dabei", die Links als Textlinks. */
.ss-formularseite .um-logout .um-misc-with-img {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 24px 0 16px;
	border-bottom: 1px solid var(--ss-navy-200);
	text-align: left;
}
.ss-formularseite .um-logout .um-misc-img {
	margin: 0;
	padding: 0;
	text-align: left;
}
.ss-formularseite .um-logout .um-misc-img img {
	display: block;
	width: 48px !important;
	height: 48px !important;
}
.ss-formularseite .um-logout .um-misc-with-img strong {
	font-size: 17px;
	font-weight: 600;
	color: var(--ss-navy);
}
.ss-formularseite .um-logout .um-misc-ul {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}
.ss-formularseite .um-logout .um-misc-ul li {
	margin: 0;
	padding: 0;
}
.ss-formularseite .um-logout .um-misc-ul a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ss-hit-min);
	font-size: 17px;
	font-weight: 600;
	color: var(--ss-ocean-deep);
	text-decoration: none;
}
.ss-formularseite .um-logout .um-misc-ul a:hover {
	color: var(--ss-navy);
}