/* ============================================================
   Mitgliederbereich – eigenständiges Layout
   Member-Shell (eigener Header + weißes Logo) + WooCommerce-Konto
   (Navigation + Endpoints inkl. „Meine Kurse"). Nur geladen, wenn
   VP_IS_MEMBER_PAGE gesetzt ist (template-parts/member-page.php).
   ============================================================ */

/* `margin: 0 !important`: das Theme schiebt per `body{margin-top:5.5rem !important}` (style.css,
   @media min-width:992px) den Inhalt unter den fixierten Standard-Header. Diesen Header gibt es
   im Mitgliederbereich nicht → die 5.5rem wären eine leere Lücke. Höhere Spezifität (body.Klasse)
   + !important schlägt die Theme-Regel zuverlässig. */
body.vp-template-member-page {
	margin: 0 !important;
	/* Mitgliederbereich-Farben (übernommen aus V1, getwid-vitalpilze/css/member-page.css).
	   Am body definiert, damit auch der Seitenhintergrund die Variable nutzen kann. */
	--color-sidebar-bg:        hsl(95deg 100% 9%);
	--color-sidebar-text:      #fff;
	--color-sidebar-hover-bg:  hsl(95deg 60% 25%);
	--color-sidebar-active-bg: hsl(95deg 100% 15%);
	--color-content-bg:        hsl(95deg 30% 70%);
	--color-content-text:      #132E00; /* Button-Dunkelgrün als Content-Textfarbe */
	background: var(--color-sidebar-bg); /* dunkelgrüner Seitenhintergrund wie V1 */
}

/* Admin-Bar im Mitgliederbereich ausblenden: saubere Kundenansicht, grüne Leiste bündig
   oben. Betrifft nur Administratoren (für Mitglieder ist die Bar ohnehin aus). `:root` hat
   höhere Spezifität als das `html{margin-top:32px}` der Admin-Bar und überschreibt es sicher. */
:root { margin-top: 0 !important; }
#wpadminbar { display: none !important; }

/* App-Layout: Seite füllt den Viewport, der Header bleibt fix, NUR der Inhaltsbereich (main)
   scrollt intern. So scrollt nichts „dazwischen" mit. (Mobil: siehe Responsive-Block unten.) */
.vp-member-page {
	height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* --- Header-Bar (signalisiert „Mitgliederbereich") --- */
/* Der grüne Balken ist voll breit; der Inhalt (.vp-member-bar) sitzt im gleichen
   zentrierten max-width-Container wie der Seiteninhalt (.vp-member-inner), damit
   Logo/Titel exakt mit Sidebar/Content fluchten. Das Logo nimmt die Sidebar-Breite
   ein → der Titel beginnt genau dort, wo der Content (rechte Spalte) anfängt. */
.vp-member-header {
	background: var(--color-sidebar-bg, #6B722F);
	color: var(--color-sidebar-text, #fff);
	padding: 0.6rem 1.5rem;
	flex: 0 0 auto; /* fixe Kopfleiste – scrollt nicht mit */
	z-index: 50;
}
.vp-member-bar {
	display: flex;
	align-items: center;
	gap: 2rem;
	max-width: none;
	margin: 0;
}
.vp-member-logo { display: flex; align-items: center; line-height: 0; flex: 0 0 270px; }
.vp-member-logo img { height: 42px; width: auto; }
.vp-member-title {
	font-family: var(--font-1, "Raleway", sans-serif);
	font-weight: 700;
	font-size: 1.25rem;
	color: #fff;
}
.vp-member-backlink {
	margin-left: auto;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	opacity: 0.9;
}
.vp-member-backlink:hover { opacity: 1; color: #fff; text-decoration: underline; }

/* --- Warenkorb-Icon (links neben dem Hamburger, nur wenn Warenkorb gefüllt) --- */
.vp-member-cart {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: #fff;
	text-decoration: none;
	position: relative;
}
.vp-member-cart:hover { color: #fff; opacity: 0.85; }
.vp-member-cart.is-empty { display: none; }
.vp-member-cart svg { display: block; width: 24px; height: 24px; }
.vp-member-cart__count {
	min-width: 1.25em; height: 1.25em; padding: 0 0.35em;
	border-radius: 999px; background: #fff; color: #132E00;
	font-size: 0.72rem; font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}

/* --- Hamburger-Menü (rechts in der Leiste) --- */
.vp-member-menu { margin-left: auto; position: relative; }
.vp-member-cart:not(.is-empty) + .vp-member-menu { margin-left: 1rem; }
.vp-member-menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}
.vp-burger,
.vp-burger::before,
.vp-burger::after {
	display: block;
	width: 26px;
	height: 3px;
	background: #fff;
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.vp-burger { position: relative; }
.vp-burger::before,
.vp-burger::after { content: ""; position: absolute; left: 0; }
.vp-burger::before { top: -8px; }
.vp-burger::after  { top: 8px; }
.vp-member-menu.is-open .vp-burger { background: transparent; }
.vp-member-menu.is-open .vp-burger::before { top: 0; transform: rotate(45deg); }
.vp-member-menu.is-open .vp-burger::after  { top: 0; transform: rotate(-45deg); }

.vp-member-menu-list {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 200px;
	margin: 0;
	padding: 0.4rem 0;
	list-style: none;
	background: var(--color-sidebar-bg); /* gleiche Farbe wie die Sidebar */
	border: 1px solid rgba(255, 255, 255, 0.2); /* gleiche Farbe wie der Separator */
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	z-index: 1000;
}
.vp-member-menu-list li { margin: 0; }
.vp-member-menu-list a {
	display: block;
	padding: 0.6rem 1.1rem;
	color: var(--color-sidebar-text, #fff);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	white-space: nowrap;
}
.vp-member-menu-list a:hover {
	background: var(--color-sidebar-hover-bg, #DBDCD2);
	color: var(--color-sidebar-text, #fff) !important;
}
.vp-member-menu-list .vp-menu-sep {
	height: 1px;
	margin: 0.4rem 0;
	background: rgba(255, 255, 255, 0.2);
}
/* Sidebar-Punkte stehen nur auf kleinen Geräten im Hamburger (Desktop: in der linken Sidebar). */
.vp-member-menu-list .vp-menu-mobile { display: none; }

/* --- Inhaltsbereich --- */
/* Einziger scrollender Bereich. min-height:0 ist nötig, damit das Flex-Item bei overflow scrollt
   (statt zu wachsen). */
.vp-member-main { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 1.5rem; display: flex; flex-direction: column; }
/* flex:1 + column → die Höhe wird bis zum unteren Rand durchgereicht, damit der graugrüne
   Inhaltsbereich auch bei wenig Inhalt bis zum Browser-Boden reicht. */
.vp-member-inner { max-width: none; width: 100%; margin: 0; flex: 1 1 auto; display: flex; flex-direction: column; }

/* --- WooCommerce-Konto: zweispaltig (Navigation + Inhalt) --- */
/* flex:1 + align-items:stretch → die Spalten füllen die volle Höhe; der graugrüne Inhalt reicht
   damit bis zum unteren Rand. Die Navigation behält align-self:flex-start (bleibt oben/sticky). */
.vp-member-inner .vp-account {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: stretch;
	flex: 1 1 auto;
	min-height: 0;
}
/* WooCommerce setzt einen Clearfix (.woocommerce::before/::after, display:table). Im Flex-Container
   werden diese Pseudoelemente zu Flex-Items und schieben die Navigation über den gap um 2rem nach
   rechts (Versatz zwischen Header-Titel und Content). Im Flex-Layout nicht nötig → ausblenden,
   damit die Navigation an der Container-Kante beginnt und Header-Titel + Content fluchten. */
.vp-member-inner .vp-account::before,
.vp-member-inner .vp-account::after { display: none; }
/* Navigation bleibt beim Scrollen stehen – nur der Inhalt scrollt.
   Funktioniert dank align-items:flex-start am .woocommerce-Container (Nav stretcht nicht). */
.vp-account-nav {
	flex: 0 0 270px;
	position: sticky;
	/* 1rem Abstand zum Header – initial (margin-top) und beim Scrollen (sticky top) konsistent. */
	top: 1rem;
	margin-top: 1rem;
	align-self: flex-start;
	background: var(--color-sidebar-bg);
	border-radius: 6px;
	padding: 0.5rem;
}
.vp-account-nav ul { list-style: none; margin: 0; padding: 0; }
.vp-account-nav li { margin: 0 0 0.25rem; }
.vp-account-nav a {
	display: block;
	padding: 0.6rem 0.9rem;
	border-radius: 4px;
	color: var(--color-sidebar-text, #fff);
	font-style: normal;
	text-decoration: none;
	font-weight: 600;
	font-size: 16px;
}
.vp-account-nav a:hover {
	background: var(--color-sidebar-hover-bg, #DBDCD2);
	/* !important schlägt die Theme-Regel body a:…:hover{color:army-green} (höhere Spezifität),
	   damit der Text beim Hover die helle Sidebar-Standardfarbe behält. */
	color: var(--color-sidebar-text, #fff) !important;
}
.vp-account-nav .is-active a {
	background: var(--color-sidebar-active-bg, #6B722F);
	color: var(--color-sidebar-text, #fff);
}
/* Trennlinie zwischen den Konto-/Inhalts-Funktionen (Übersicht, Ausbildungen & Kurse,
   Webinare & Aufzeichnungen, Lieferanten) und den Fachbereichs-Seiten. Anker = „Ausbildungen
   & Kurse"; danach folgen „Webinare & Aufzeichnungen" und „Lieferanten", deshalb das DRITTE
   Element (+ li + li + li) = erster Fachbereich-Punkt (robust ohne feste Seiten-IDs). */
.vp-account-nav li.vp-account-nav-link--meine-kurse + li + li + li {
	margin-top: 0.6rem;
	padding-top: 0.6rem;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}
/* Kommt die Navigation aus einem WP-Menü (.vp-account-nav--menu), zieht die gezählte Regel
   darüber ins Leere: Wo die Linie sitzt, bestimmt dann der Menüeintrag mit der Klasse
   „vp-separator" — sonst stünden zwei Linien da, eine gemeinte und eine gezählte. */
.vp-account-nav--menu li.vp-account-nav-link--meine-kurse + li + li + li {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.vp-account-nav .vp-account-nav-sep {
	height: 1px;
	margin: 0.6rem 0;
	background: rgba(255, 255, 255, 0.2);
}

.vp-account-content {
	flex: 1 1 320px;
	min-width: 0;
	background: var(--color-content-bg, #fff);
	color: var(--color-content-text, #000);
	border: 0;
	border-radius: 6px;
	padding: 1.5rem;
}
.vp-account-content > h2:first-child,
.vp-account-content > .vp-course-list h2:first-child { margin-top: 0; }

/* Member-Warenkorb/-Kasse: der Cart-/Checkout-Shortcode erzeugt INNERHALB des Inhalts einen
   weiteren .woocommerce-Wrapper. Der obige Flex-Layer (.vp-member-inner .woocommerce, für
   Nav+Inhalt gedacht) trifft ihn als Nachfahren und quetscht die Warenkorb-/Kasse-Tabelle,
   sodass die Positionen nicht über die volle Breite laufen. Innen wieder normaler Blockfluss. */
.vp-account-content .vp-account {
	display: block;
	flex: none;
	min-height: 0;
}

/* --- Rechnungsadresse-Block in der Profil-Seite --- */
.vp-billing-fields {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--vp-kasten-rand);
	clear: both; /* WC-Formularzeilen floaten (.form-row-first/-last) */
}
.vp-billing-fields::after { content: ""; display: table; clear: both; }
.vp-billing-fields h3 { margin-top: 0; }

/* --- Login (ausgeloggt): zentrierter Kasten ---
   ⚠️ Markup-Wechsel: Bis zum WooCommerce-Ausbau (3c28bbb, 24.07.2026) kam die Loginmaske vom
   [woocommerce_my_account]-Shortcode und hieß form.woocommerce-form-login mit .form-row/.input-text.
   Seither rendert vp_account_login_form() (vitalpilze-member/inc/account.php) das WordPress-Core-
   Formular aus wp_login_form(): <form id="loginform"> mit p.login-username / .login-password /
   .login-remember / .login-submit und input.input. Die alten WC-Klassen gibt es nicht mehr – wer
   hier wieder .form-row o. ä. einträgt, stylt ins Leere. Aufhänger ist .vp-account-login (eigene
   Klasse aus account.php), NICHT .woocommerce. */

/* Ausgeloggt: die generische .woocommerce-Flexregel (Konto-Navigation) aufheben → Block-Layout,
   damit der zentrierte (margin:auto) Kasten wirklich mittig steht. */
body.vp-member-guest .vp-member-inner .vp-account,
body.vp-member-guest .vp-member-inner .vp-account-login {
	display: block;
}
/* Der Gast-Block als Ganzes zentriert: Überschrift, Formularkasten und der
   „Passwort vergessen?"-Link stehen dadurch bündig untereinander. */
body.vp-member-guest .vp-member-inner .vp-account-login {
	/* width:100% ist nötig, nicht überflüssig: .vp-member-inner ist ein Spalten-Flex-Container,
	   und ein Flex-Item mit auto-Margins auf der Querachse streckt sich NICHT (align-self:stretch
	   wird dann ignoriert) – ohne width schrumpft der Kasten auf die Inhaltsbreite (~356px). */
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
}
/* Überschrift „Anmelden“: kommt seit 3c28bbb aus account.php und ist gewollt. Vorher stand hier
   display:none, um WooCommerces eigene Überschrift zu unterdrücken – das versteckte danach die
   eigene mit.
   Helle Schrift, weil h2 und Link AUSSERHALB des weißen Kastens auf dem dunkelgrünen Grund
   stehen: mit der geerbten Textfarbe kamen sie auf 2,87:1 bzw. 1,75:1 und waren praktisch
   unlesbar (WCAG AA verlangt 3:1 für große bzw. 4,5:1 für normale Schrift). */
.vp-member-inner .vp-account-login > h2 {
	margin: 0 0 1rem;
	color: #fff;
}
/* Formular-Kasten. box-sizing, damit die Breite inkl. Padding gilt. */
.vp-member-inner .vp-account-login form {
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--vp-kasten-rand);
	border-radius: 6px;
	padding: 1.5rem;
}
/* Formularzeilen: wp_login_form() setzt Label und Feld als Inline-Geschwister in ein <p>.
   Ohne display:block am Label stünden beide nebeneinander und das Feld bliebe in der
   HTML-Vorgabebreite (~145px) stehen. */
.vp-member-inner .vp-account-login form p {
	margin: 0 0 1rem;
}
.vp-member-inner .vp-account-login form p:last-child {
	margin-bottom: 0;
}
.vp-member-inner .vp-account-login form label {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 600;
}
.vp-member-inner .vp-account-login form .input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.5rem 0.6rem;
	border: 1px solid #bbb;
	border-radius: 3px;
	font-family: inherit;
	font-size: 1rem;
}
/* „Angemeldet bleiben“: Checkbox und Text auf einer Zeile, Label nicht fett.
   Die Checkbox trägt keine .input-Klasse, wird von der Regel oben also nicht breit gezogen. */
.vp-member-inner .vp-account-login form .login-remember label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
}
/* „Passwort vergessen?“ unter dem Kasten, bündig zum Kastenrand – ebenfalls hell (s. o.). */
.vp-member-inner .vp-account-login .vp-account-login-lost {
	margin: 1rem 0 0;
}
.vp-member-inner .vp-account-login .vp-account-login-lost a {
	color: #F6F6F1;
	text-decoration: underline;
}
.vp-member-inner .vp-account-login .vp-account-login-lost a:hover,
.vp-member-inner .vp-account-login .vp-account-login-lost a:focus {
	color: #fff;
}

/* --- Meldungen im Mitgliederbereich: Gast-Bildschirme (Passwort vergessen / neues Passwort)
   UND das eingeloggte Profil (Speichern-Erfolg / -Fehler, account.php).
   Eigene Klassen statt der alten .woocommerce-message/-error: WooCommerce ist raus, seine
   Meldungs-Optik kam mit ihm weg. Gleiche Kastenform wie das Formular, damit die Bildschirme
   nebeneinander stimmig aussehen. --- */
/* Grundregel von .vp-account-notice: style.css (gilt auch für Kasse und Kündigung). Hier bleibt
   nur, was im Mitgliederbereich anders ist. */
/* Feld, das beim Speichern leer war. Die Meldung oben nennt es beim Namen, hier steht die
   Markierung am Feld selbst — wer nach unten scrollt, sieht ohne Rückfrage, welches gemeint ist.
   Nur der Rahmen, keine Hintergrundfarbe: Die Felder tragen sonst keine eigene Flächenfarbe,
   und eine einzelne rote Fläche sähe nach Störung aus statt nach Hinweis. */
.vp-member-inner .vp-account-form .vp-feld-fehlt {
	border: 1px solid var(--vp-feld-fehler-farbe);
	outline: none;
}
.vp-member-inner .vp-account-form .vp-feld-fehlt:focus {
	border-color: var(--vp-feld-fehler-farbe);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--vp-feld-fehler-farbe) 25%, transparent);
}
/* Steht die Meldung allein (ohne Formular darunter), soll sie nicht als letztes Element
   noch einen Abstand nach unten erzeugen. */
.vp-member-inner .vp-account-login .vp-account-notice:last-child {
	margin-bottom: 0;
}

/* --- Konto-Formulare: Profil, Kontodaten, Rechnungsadresse -------------------------
   ⚠️ Diese Felder hatten bis zum 28.08.2026 GAR KEIN eigenes CSS. Sie fielen auf die
   Browser-Vorgabe zurück – `2px inset`, kein Radius, kein Innenabstand, Schrift 13,3px in
   Chromium und 11px in WebKit – und die Beschriftung stand neben statt über dem Feld. Das
   war die „zerstückelte" Profilseite, die der Betreiber gemeldet hat. Das Styling kam
   vermutlich früher von WooCommerce und fiel mit dessen Ablösung weg (8e5c657, 29.07.2026).

   Die Werte sind NICHT neu erfunden, sondern aus der Abo-Kasse übernommen
   (vitalpilze-member/inc/membership-abo-checkout.php, dort inline). Sie benutzt dieselben
   Klassen und hatte als einzige Stelle eine gepflegte Formular-Optik; so laufen die beiden
   Formulare des Mitgliederbereichs nicht auseinander.

   ⚠️ Der Selektor bleibt eng auf `.vp-account-form`, und das ist kein Zufall: `.vp-member-f`
   allein träfe auch die Abo-Kasse, die ihr eigenes Inline-CSS mitbringt – zwei Quellen für
   dasselbe Element. Ein Selektor auf `input` träfe das Suchfeld der Wissensdatenbank und
   jeden Filter gleich mit. */
/* Die Variablen der Konto-Formulare (--vp-label-size, --vp-feld-fehler-farbe, --vp-kasten-rand,
   --vp-hinweis-streifen) stehen seit 2026-09-28 in style.css (:root) – auch Kasse und Kündigung
   liegen außerhalb des Mitgliederbereichs und brauchen sie. */
.vp-account-form .vp-member-f {
	margin: 0 0 .7rem;
}
.vp-account-form .vp-member-f label {
	display: block;
	font-size: var(--vp-label-size);
	color: var(--basic-color-3);
	margin: 0 0 .25rem;
}
/* Hinweistexte (UID, Passwort, Therapeutensuche …). Bis 2026-09-28 gab es für die Klasse gar keine
   Regel, sie standen in Fließtextgröße. Jetzt Größe und Farbe wie die Labels. Unverankert, damit
   auch künftige Verwender sie bekommen. */
.vp-account-hint {
	font-size: var(--vp-label-size);
	color: var(--basic-color-3);
	line-height: 1.45;
	margin: 0 0 .7rem;
}
.vp-account-form .vp-member-req {
	color: #a00;
}
.vp-account-form .vp-member-f input,
.vp-account-form .vp-member-f select,
.vp-account-form .vp-member-f textarea {
	/* Ohne appearance:none behält WebKit die native Darstellung – eigene Höhe, eigene
	   Rundung – und dasselbe Formular sieht in Safari anders aus als in Vivaldi. */
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	max-width: 32rem;
	box-sizing: border-box;
	padding: .55rem .65rem;
	border: 1px solid #bbb;
	border-radius: 5px;
	font: inherit;      /* sonst bleibt es in Safari bei 11px */
	font-size: 1rem;
	/* Ausdrücklich, nicht geerbt: Ohne feste Zeilenhöhe rechnet Chromium beim <select> mit
	   einer anderen als beim <input> – das Auswahlfeld „Land" stand dort 4px niedriger als
	   die Felder darüber, in WebKit nicht. */
	line-height: 1.4;
	background: #fff;
	color: #132E00;
}
/* Das Auswahlfeld verliert mit appearance:none seinen Pfeil – hier ein eigener, damit man
   ihm weiterhin ansieht, dass es aufklappt. */
.vp-account-form .vp-member-f select {
	padding-right: 2rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23132E00' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .7rem center;
	background-size: 10px 6px;
}
.vp-account-form .vp-member-f input:focus,
.vp-account-form .vp-member-f select:focus,
.vp-account-form .vp-member-f textarea:focus {
	outline: 2px solid #6B722F;
	outline-offset: 1px;
	border-color: #6B722F;
}
.vp-account-form .vp-member-f input.is-error,
.vp-account-form .vp-member-f select.is-error {
	border-color: #a00;
	background: #fff6f6;
}
.vp-account-form .vp-member-row {
	display: flex;
	gap: .7rem;
	max-width: 32rem;
}
.vp-account-form .vp-member-row .vp-member-f {
	flex: 1;
}
/* Die PLZ-Spalte: knapp genug, dass man ihr ansieht, was hineingehört – weit genug für eine
   ausländische Postleitzahl. ⚠️ NICHT auf fünf Ziffern auslegen: Die Kundschaft sitzt im
   DACH-Raum (AT und CH haben vier Stellen), und Auslandsanschriften tragen Formen wie
   `1234 AB` (NL), `00-000` (PL) oder `SW1A 1AA` (GB) – bis zu acht Zeichen mit Leerzeichen
   oder Bindestrich. Ein zu enges Feld schneidet die Eingabe optisch ab, während der Wert
   korrekt gespeichert wird; auffallen würde das erst auf dem Briefumschlag.
   Maß in `ch` statt in Pixeln, damit die Spalte bei einer anderen Schriftgröße mitwächst. */
.vp-account-form .vp-member-row .vp-member-narrow {
	flex: 0 0 auto;
}
.vp-account-form .vp-member-row .vp-member-narrow input {
	width: 11ch;
}
/* --- Panel „Therapeutensuche" im Profil (vitalpilze-member/inc/therapist-profile.php) ---
   Farben nur über die Theme-Variablen (style.css, :root) – keine neuen Farbwerte.
   ⚠️ Die Auswahlgruppen (Bereich, Beruf) und das Datei-Feld stehen bewusst NICHT in
   .vp-member-f: Die Regel `.vp-member-f input` oben macht jedes Input blockbreit und nimmt ihm
   die native Darstellung – ein Radio würde zu einem leeren Balken über die ganze Zeile. */
.vp-account-form .vp-member-f textarea {
	resize: vertical;
}
.vp-account-form .vp-th-switch label {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-weight: 600;
	cursor: pointer;
}
.vp-account-form .vp-th-fields {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0; /* fieldset wächst sonst mit breitem Inhalt (Karte) über die Spalte hinaus */
}
.vp-account-form .vp-th-fields[hidden] {
	display: none;
}
/* Die Panel-Hinweise (noch nicht freigeschaltet, Premium, keine Position, Altformat) tragen den
   Streifen des Grund-Hinweises (--vp-hinweis-streifen). Bis 2026-09-28 hatten Premium und
   „keine Position" hier das helle Laubgrün – das war der „dünne" Streifen. */
.vp-account-form .vp-th-geo,
.vp-account-form .vp-th-cert {
	margin: 0 0 1rem;
	max-width: 32rem;
}
.vp-account-form .vp-th-choice-label {
	display: block;
	font-size: var(--vp-label-size);
	color: var(--basic-color-3);
	margin: 0 0 .35rem;
}
/* Bereich und Beruf: nur lesbar (Betreiber, 28.09.2026) – zwei Zeilen Begriff/Wert. */
.vp-account-form .vp-th-readonly {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: .3rem 1rem;
	margin: 0 0 .4rem;
	max-width: 32rem;
}
.vp-account-form .vp-th-readonly dt {
	font-size: var(--vp-label-size);
	color: var(--basic-color-3);
}
.vp-account-form .vp-th-readonly dd {
	margin: 0;
}
.vp-account-form .vp-th-geo .vp-member-f {
	margin-bottom: .5rem;
}
.vp-account-form .vp-th-geo-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: .2rem 0 .5rem;
}
.vp-account-form .vp-th-geo-buttons .vp-btn {
	padding: .55em 1em;
}
/* Icon-Knopf „Zurücksetzen": Höhe aus der Flex-Zeile (wie die beiden Text-Knöpfe daneben), quadratisch
   genug durch schmalen Innenabstand; das Zeichen mittig über Flex statt über Zeilenhöhe. */
.vp-account-form .vp-th-geo-buttons .vp-th-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 .75em;
}
.vp-account-form .vp-th-icon-button .dashicons {
	width: 20px; height: 20px; font-size: 20px; line-height: 1;
}
.vp-account-form #vp-th-map-msg:empty {
	display: none;
}
.vp-account-form #vp-th-map-msg.vp-th-msg-error {
	color: var(--basic-color-3);
	font-weight: 600;
}
.vp-account-form .vp-th-map {
	height: clamp(260px, 45vh, 420px);
	max-width: 32rem;
	border: 1px solid var(--basic-color-5);
	border-radius: 5px;
}
/* Zwei Spalten ab der Theme-Schwelle 1200 px: Felder links, Karte rechts – wie in der Admin-Maske
   (Betreiber, 28.09.2026). Warum 1200 und nicht 800/1580: Das Panel ist die Fensterbreite minus
   398 px Seitenleiste (gemessen). Bei 1200 sind das 802 px → zwei Spalten à ~385 px, beide lesbar.
   Darunter, bei 1000, blieben 602 px → ~285 px je Spalte, zu schmal für Adresse und Karte; dort
   bleibt es einspaltig mit der Karte unter den Feldern.
   Die Karte klebt beim Scrollen wie in der Admin-Maske (dort position:sticky). */
@media (min-width: 1200px) {
	.vp-account-form .vp-th-cols {
		display: flex;
		align-items: flex-start;
		gap: 2rem;
	}
	.vp-account-form .vp-th-col-fields {
		flex: 1 1 22rem;
		max-width: 32rem;
		min-width: 0;
	}
	.vp-account-form .vp-th-col-map {
		flex: 1 1 22rem;
		min-width: 0;
		position: sticky;
		top: 1rem;
	}
	.vp-account-form .vp-th-col-map .vp-th-map {
		max-width: none;
		height: clamp(400px, 68vh, 700px);
	}
}
/* Meldung direkt unter dem Feld (Kontaktdaten in Anschrift/Name). Schrift wie die Hinweise, Farbe
   wie der Rahmen des markierten Feldes (.vp-feld-fehlt). */
.vp-account-form .vp-th-feldfehler {
	display: block;
	margin: .3rem 0 0;
	font-size: var(--vp-label-size);
	color: var(--vp-feld-fehler-farbe);
}
.vp-account-form .vp-th-cert input[type="file"] {
	display: block;
	max-width: 100%;
	font: inherit;
	font-size: .9rem;
}

@media (max-width: 480px) {
	.vp-account-form .vp-member-row { display: block; }
	.vp-account-form .vp-member-row .vp-member-narrow { flex: none; }
}

/* --- Buttons: WooCommerce-Buttons im Mitgliederbereich im Website-Stil (grün/braun, wie .vp-btn) --- */
body.vp-member-shop .vp-account .button,
body.vp-member-shop .vp-account button.button,
body.vp-member-shop .vp-account input.button,
body.vp-member-shop .vp-member-inner button[type="submit"],
body.vp-member-shop .vp-member-inner input[type="submit"] {
	display: inline-block;
	background: var(--basic-color-1, #6B722F);
	color: #fff;
	padding: 0.5rem 1.1rem;
	border: 0;
	border-radius: 3px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.4;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease;
}
body.vp-member-shop .vp-account .button:hover,
body.vp-member-shop .vp-account button.button:hover,
body.vp-member-shop .vp-account input.button:hover,
body.vp-member-shop .vp-member-inner button[type="submit"]:hover,
body.vp-member-shop .vp-member-inner input[type="submit"]:hover,
body.vp-member-shop .vp-account .button:focus,
body.vp-member-shop .vp-account button.button:focus {
	background: var(--basic-color-3, #5D4B17);
	color: #fff;
}

/* --- Buttons im Mitgliederbereich (eingeloggte Konto-Seiten UND ausgeloggte Login-/
   Passwort-vergessen-/Neues-Passwort-Formulare): einheitlich dunkelgrün wie die Webinar-
   Buttons (.vp-card-btn) UND auf gleicher Höhe. Gescoped auf .vp-member-inner → deckt
   .woocommerce-MyAccount-content (eingeloggt) UND die Gast-Formulare ab; Frontend unberührt. --- */
body.vp-template-member-page .vp-member-inner .button,
body.vp-template-member-page .vp-member-inner button.button,
body.vp-template-member-page .vp-member-inner a.button,
body.vp-template-member-page .vp-member-inner input[type="submit"],
body.vp-template-member-page .vp-member-inner button[type="submit"],
body.vp-template-member-page .vp-member-inner .vp-btn,
body.vp-template-member-page .vp-member-inner .vp-card-btn {
	display: inline-block;
	background: #132E00; /* dunkelgrün – identisch zu .vp-card-btn (Webinare) */
	color: #fff !important;
	padding: 0.6rem 1.2rem; /* einheitliche Höhe für alle Sektionen */
	border: 0;
	border-radius: 3px;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease;
}
body.vp-template-member-page .vp-member-inner .button:hover,
body.vp-template-member-page .vp-member-inner button.button:hover,
body.vp-template-member-page .vp-member-inner a.button:hover,
body.vp-template-member-page .vp-member-inner input[type="submit"]:hover,
body.vp-template-member-page .vp-member-inner button[type="submit"]:hover,
body.vp-template-member-page .vp-member-inner .vp-btn:hover,
body.vp-template-member-page .vp-member-inner .vp-card-btn:hover,
body.vp-template-member-page .vp-member-inner .button:focus,
body.vp-template-member-page .vp-member-inner button.button:focus,
body.vp-template-member-page .vp-member-inner a.button:focus,
body.vp-template-member-page .vp-member-inner input[type="submit"]:focus,
body.vp-template-member-page .vp-member-inner button[type="submit"]:focus,
body.vp-template-member-page .vp-member-inner .vp-btn:focus,
body.vp-template-member-page .vp-member-inner .vp-card-btn:focus {
	background: #39661A; /* Hover – wie Webinare */
	color: #fff !important;
}

/* --- Warenkorb/Kasse im Mitgliederbereich: Buttons auf die Höhe des Gutscheincode-Feldes
   bringen (~45px, wie im Frontend). Nur auf den Shop-Seiten (body.vp-member-shop) – die
   kompakteren Konto-Buttons (0.85rem) bleiben unverändert. Kommt in der Quelle NACH dem
   Block oben (gleiche Spezifität) → gewinnt per Reihenfolge; Farbe/Optik bleibt Member-Stil. */
body.vp-member-shop .vp-account .button,
body.vp-member-shop .vp-account button.button,
body.vp-member-shop .vp-account input.button,
body.vp-member-shop .vp-account .checkout-button,
body.vp-member-shop .vp-member-inner button[type="submit"],
body.vp-member-shop .vp-member-inner input[type="submit"] {
	box-sizing: border-box;
	padding: 0.7em 1.4em;
	font-size: 1rem;
	line-height: 1.4;
}
/* „Weiter zur Kasse" und „Warenkorb aktualisieren" haben im WooCommerce-Kern eigene, speziellere
   Regeln (u. a. font-size:1.25em / abweichende Paddings). Deshalb hier gezielt mit höherer
   Spezifität auf dieselbe Feldhöhe (~45px) bringen wie die übrigen Buttons. */
body.vp-member-shop .vp-account .actions button[name="update_cart"] {
	box-sizing: border-box;
	padding: 0.7em 1.4em;
	font-size: 1rem;
	line-height: 1.4;
}

/* Download-Liste ([vp-downloads]) NUR im Mitgliederbereich: die „Download"-Pille in
   Member-Button-Optik (Dunkelgrün #132E00 / Hover #39661A, weiß, 3px-Radius) statt der
   Frontend-Standardfarben (--basic-color-*). Greift ausschließlich hier, weil member-page.css
   nur im Mitgliederbereich geladen wird → die öffentliche Seite „Downloadbereich" bleibt unberührt. */
body.vp-template-member-page .vp-download-action {
	background: #132E00;
	color: #fff !important;
	border-radius: 3px;
}
body.vp-template-member-page .vp-download-link:hover .vp-download-action,
body.vp-template-member-page .vp-download-link:focus .vp-download-action {
	background: #39661A;
}
/* Dazu passend: Datei-Titel/Meta und das PDF-Icon im Mitgliederbereich ebenfalls im Dunkelgrün
   (#132E00); der Eck-Falz des Icons im Hover-Grün #39661A, damit er sichtbar bleibt. */
body.vp-template-member-page .vp-download-title,
body.vp-template-member-page .vp-download-meta {
	color: #132E00;
}
body.vp-template-member-page .vp-download-thumb svg path:first-of-type {
	fill: #132E00;
}
body.vp-template-member-page .vp-download-thumb svg path:nth-of-type(2) {
	fill: #39661A;
}

/* Tabreiter/Pills (vitalpilze/tabs) im Mitgliederbereich in Button-Optik: ruhend Dunkelgrün
   #132E00, Hover + aktiver Reiter im Hover-Grün #39661A (so bleibt der aktive Reiter sichtbar).
   !important schlägt sicher das Blocks-CSS (.vp-tabs.is-style-pills …), unabhängig von der
   Ladereihenfolge. Nur im Mitgliederbereich (member-page.css lädt nur hier). */
body.vp-template-member-page .vp-tabs__nav {
	border-bottom-color: #132E00;
}
body.vp-template-member-page .vp-tabs__nav-link {
	background: #132E00 !important;
	color: #fff !important;
	border-color: #132E00 !important;
}
body.vp-template-member-page .vp-tabs__nav-link:hover,
body.vp-template-member-page .vp-tabs__nav-link:focus-visible,
body.vp-template-member-page .vp-tabs__nav-link.is-active {
	background: #39661A !important;
	color: #fff !important;
	border-color: #39661A !important;
}

/* Lektions-Buttons (Starten/Fortsetzen/Wiederholen) auf einheitliche Breite –
   min-width passt das längste Label ein, alle drei dadurch gleich breit. */
body.vp-template-member-page .vp-account-content .vp-lesson-cta {
	box-sizing: border-box;
	min-width: 9.5rem;
	text-align: center;
	white-space: nowrap;
}

/* --- Mitgliederbereich-Texte im Button-Dunkelgrün (#132E00) ---
   Grundtext kommt aus --color-content-text; hier zusätzlich Überschriften, Lektionsnamen,
   Progress-Label und die Balkenfüllung. Sidebar/Header bleiben weiß (eigene Variablen). */
body.vp-template-member-page .vp-account-content h1,
body.vp-template-member-page .vp-account-content h2,
body.vp-template-member-page .vp-account-content h3,
body.vp-template-member-page .vp-account-content h4,
body.vp-template-member-page .vp-account-content h5,
body.vp-template-member-page .vp-account-content h6,
body.vp-template-member-page .vp-account-content .vp-lesson-name,
body.vp-template-member-page .vp-account-content .vp-progress-label {
	color: #132E00;
}
body.vp-template-member-page .vp-account-content .vp-progress-fill {
	background: #132E00;
}
/* Ausnahme: „Bestellungen"-Tabelle hat grüne Zeilen → Zellentext weiß (lesbar, wie der Kopf). */
body.vp-template-member-page .vp-account-content table.vp-invoices-table td {
	color: var(--basic-color-4); /* vorher #fff */
}

/* Lektions-Status-Icons im Button-Dunkelgrün (gestartet = halbvoll, abgeschlossen = Haken).
   „Nicht gestartet" bleibt grau (neutraler Indikator). */
body.vp-template-member-page .vp-account-content .vp-status-started {
	border-color: #132E00;
}
body.vp-template-member-page .vp-account-content .vp-status-started::after {
	background: #132E00;
}
body.vp-template-member-page .vp-account-content .vp-status-done {
	border-color: #132E00;
	background: #132E00;
}

/* Lektions-Player-Modal: Hintergrund wie der allgemeine Content (Grün) statt weiß. */
body.vp-template-member-page .vp-account-content .vp-player-dialog {
	background: var(--color-content-bg, hsl(95deg 30% 70%));
}

/* --- Checkboxen als Toggle-Switch (alle Mitgliederbereich-Seiten) --- */
/* Rein per CSS: jede echte Checkbox wird zum Schalter. Radio-Buttons (z. B. Dashboard-Spalten)
   bleiben normal. */
body.vp-template-member-page input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 42px;
	height: 24px;
	min-width: 42px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: #c4c6bb;
	position: relative;
	cursor: pointer;
	vertical-align: middle;
	transition: background 0.15s ease;
}
body.vp-template-member-page input[type="checkbox"]::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	transition: transform 0.15s ease;
}
body.vp-template-member-page input[type="checkbox"]:checked {
	background: #132E00; /* Button-Dunkelgrün */
}
body.vp-template-member-page input[type="checkbox"]:checked::before {
	transform: translateX(18px);
}
body.vp-template-member-page input[type="checkbox"]:focus-visible {
	outline: 2px solid #132E00;
	outline-offset: 2px;
}

/* --- Fachbereich-Listen (Vitalpilze/Erkrankungen, .vp-column-3): zwei Spalten + mehr Abstand --- */
/* Nur im Mitgliederbereich – die öffentlichen Listen bleiben unverändert (3 Spalten). */
body.vp-member-shop .vp-column-3 {
	columns: 250px 2;
	column-gap: 2.5rem;
}
body.vp-member-shop .vp-column-3 li {
	margin-bottom: 0.9rem;
	break-inside: avoid;
}

/* --- Pilz-/Erkrankungs-Detailseite im Mitgliederbereich --- */
.vp-member-back { margin: 0 0 1.25rem; }
.vp-member-back a {
	display: inline-flex;
	align-items: center;
	color: var(--basic-color-1, #6B722F);
	font-weight: 600;
	text-decoration: none;
}
.vp-member-back a:hover { text-decoration: underline; }
.vp-member-detail img { max-width: 100%; height: auto; }
.vp-member-detail .entry-content { margin-top: 1rem; }

/* Der Tabreiter-Block nutzt im Mitgliederbereich die volle Inhaltsbreite. Das Theme begrenzt
   direkte .entry-content-Kinder sonst auf --vp-max-width (1200px, lesbare Breite öffentlicher
   Seiten); im fullwidth-Mitgliederbereich für den Tabreiter aufheben. */
body.vp-member-shop .hentry > .entry-content > .vp-tabs {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* --- Responsive --- */
@media (max-width: 782px) {
	/* Mobil: normaler Dokument-Scroll statt App-Layout (kein 100vh-Lock). */
	.vp-member-page { height: auto; overflow: visible; }
	.vp-member-main { overflow: visible; }
	/* Linke Sidebar ausblenden – ihre Punkte erscheinen stattdessen im Hamburger-Menü. */
	.vp-account-nav { display: none; }
	.vp-member-menu-list .vp-menu-mobile { display: block; }
	.vp-member-header { padding: 0.6rem 1rem; }
	.vp-member-bar { flex-wrap: wrap; gap: 0.5rem 1rem; }
	.vp-member-logo { flex: 0 0 auto; }
	.vp-member-title { font-size: 1.1rem; }
	.vp-member-logo img { height: 36px; }
}

/* === Kasse: normaler Dokument-Scroll statt App-Layout-Lock ===
   Der Mitgliederbereich ist ein „App-Layout" (.vp-member-page: height:100vh; overflow:hidden) –
   nur der innere Container .vp-member-main scrollt. WooCommerce geht an der Kasse aber davon aus,
   dass das Dokument (html,body) scrollt: Fehler-Scroll (scroll_to_notices), das blockUI-Overlay
   beim AJAX-Neuberechnen (z. B. nach Nachtragen von „Ort") und das Zahlungs-Skript des Gateways.
   In der Kombination konnte der innere Scroll-Container hängen bleiben → man kam nicht mehr zum „Jetzt kaufen"-Button.
   Auf der Kasse deshalb wie mobil: ganzseitiger Scroll (Hintergrund via min-height). Der Warenkorb
   behält das App-Layout. */
body.vp-member-checkout .vp-member-page {
	height: auto;
	min-height: 100vh;
	overflow: visible;
}
body.vp-member-checkout .vp-member-main {
	overflow: visible;
}

/* === WooCommerce Warenkorb/Kasse im Mitgliederbereich (NUR Member-Layout) ===
   Gescoped auf .vp-template-member-page – das Frontend (ohne diese Klasse) bleibt unberührt.
   Greift, wenn /cart/ bzw. /checkout/ über template-parts/member-shop.php gerendert werden. */
/* Inhaltsbereich in der Mitgliederbereich-Inhaltsfarbe (wie die Konto-Ansicht), damit der
   Warenkorb/die Kasse nicht auf dem dunkelgrünen Seitenhintergrund sitzt. */
.vp-member-shop-full .vp-member-inner {
	background: var(--color-content-bg, #fff);
	color: var(--color-content-text, #000);
	border-radius: 6px;
	padding: 1.5rem;
	margin: 1rem 0;
}
.vp-member-shop-full .vp-member-inner > .vp-account {
	/* Konto-Ansicht macht .woocommerce zum Flex-Container (Nav+Content) – im Shop zurücksetzen. */
	display: block;
	flex: none;
	min-height: 0;
	max-width: 920px;
	margin: 0 auto;
}
.vp-member-shop .vp-account h1,
.vp-member-shop .vp-account h2,
.vp-member-shop .vp-account h3 {
	font-family: var(--font-1, "Raleway", sans-serif);
	color: #132E00;
}
.vp-member-shop .vp-account a { color: #132E00; }
.vp-member-shop .vp-account a:hover { color: #39661A; }
/* Konto-Navigation (Sidebar) behält im Shop-Kontext ihre helle Schrift –
   die Inhalts-Linkfarbe (.vp-member-shop .woocommerce a) darf nicht hineinbluten. */
.vp-member-shop .vp-account .vp-account-nav a {
	color: var(--color-sidebar-text, #fff);
}
.vp-member-shop .vp-account .vp-account-nav .is-active a {
	color: var(--color-sidebar-text, #fff);
}
.vp-member-shop .vp-account table.shop_table { border-color: var(--vp-kasten-rand); border-radius: 6px; }
.vp-member-shop .vp-account table.shop_table th { color: #132E00; }

/* Buttons (Warenkorb aktualisieren, Weiter zur Kasse, Bestellung aufgeben …) im GfV-Grün */
.vp-member-shop .vp-account .button,
.vp-member-shop .vp-account button.button,
.vp-member-shop .vp-account a.button,
.vp-member-shop .vp-account .checkout-button,
.vp-member-shop .vp-account #place_order {
	background: #132E00 !important;
	color: #fff !important;
	border: 0;
	border-radius: 3px;
	text-transform: uppercase;
	font-weight: 700;
}
.vp-member-shop .vp-account .button:hover,
.vp-member-shop .vp-account button.button:hover,
.vp-member-shop .vp-account a.button:hover,
.vp-member-shop .vp-account .checkout-button:hover,
.vp-member-shop .vp-account #place_order:hover {
	background: #39661A !important;
	color: #fff !important;
}

/* „In den Warenkorb gelegt"-/Hinweis-Meldungen dezent an die Member-Optik anpassen */

/* === Warenkorb/Kasse im Mitgliederbereich: Überlauf und Button-Farben === */
/* Die früheren Regeln für den WooCommerce-Blocks-Warenkorb (.wp-block-woocommerce-cart|-checkout)
   sind mit dem WooCommerce-Ausbau entfallen – die Blöcke gibt es nicht mehr. */
/* Überlauf rechts: die Blöcke nutzen .alignwide (negative Ränder/zu breit) → im Member-Content
   auf die verfügbare Breite begrenzen. */
.vp-member-shop-full .vp-member-inner { overflow-x: hidden; }
.vp-member-shop .alignwide,
.vp-member-shop .alignfull {
	max-width: 100% !important;
	width: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Block-Buttons (Zur Kasse / Bestellung aufgeben / …) im GfV-Grün */
.vp-member-shop .wp-element-button{
	background: #132E00 !important;
	border-color: #132E00 !important;
	color: #fff !important;
	border-radius: 3px;
}
.vp-member-shop .wp-element-button:hover{
	background: #39661A !important;
	border-color: #39661A !important;
	color: #fff !important;
}
/* Text-Links (z. B. „Gutschein") in GfV-Grün statt Frontend-Farbe */

/* === Überlauf rechts zuverlässig verhindern (Block-Cart/Checkout, zweispaltig) === */
.vp-member-shop-full .vp-member-main { overflow-x: hidden; max-width: 100%; }
.vp-member-shop-full .vp-member-inner { box-sizing: border-box; max-width: 100%; overflow-x: hidden; }
.vp-member-shop-full .vp-member-inner * { box-sizing: border-box; min-width: 0; }
/* Spalten (Hauptbereich + Bestellübersicht) dürfen schrumpfen bzw. umbrechen statt zu überlaufen. */