/* ============ KONTO-SEITE — ANMELDEN / REGISTRIEREN (seit 2.22.0) ============
   Eine schmale Karte mit einer Aufgabe pro Ansicht: Anmelden ist der
   Standard, Registrieren eine eigene Ansicht (?registrieren). Vorlagen:
   woocommerce/myaccount/form-login.php, form-lost-password.php,
   form-reset-password.php, lost-password-confirmation.php; Verhalten:
   assets/js/konto.js; Logik: inc/konto.php.

   Lädt nur auf den Konto-Formularen für nicht angemeldete Besucher, nach
   dem gesamten Design-System. WooCommerce (woocommerce.css) und das
   Elementor-Kit setzen Formularstile mit mittlerer Spezifität — deshalb
   beginnt jede Regel mit `.mb-konto` und nennt Elemente/Klassen dazu.

   Muster:
     Karte ........ .mb-konto > .mb-konto__karte
     Ansicht ...... .mb-konto__ansicht [hidden] (zwei in der Anmelde-Vorlage)
     Feld ......... p.mb-konto__feld  (Label über Eingabe, 52 px hoch)
     Fehler ....... .mb-konto__fehler (am Feld), .mb-konto__hinweise (Meldungen)
     Wechsel ...... .mb-konto__wechsel (Link zur anderen Ansicht)
*/

.mb-konto {
	--mb-konto-feld-h: 52px;
	--mb-konto-linie: var(--mb-rule-strong);
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	font-family: var(--mb-font-body);
	color: var(--mb-ink-900);
}

/* ---------- Karte ---------- */
.mb-konto .mb-konto__karte {
	position: relative;
	overflow: hidden;
	background: var(--mb-card);
	border: 1px solid var(--mb-rule);
	border-top: 4px solid var(--mb-red);
	padding: var(--mb-space-6) var(--mb-space-5) var(--mb-space-5);
	box-shadow: var(--mb-shadow-press);
}
/* Slope-Signatur: graue Schräge oben rechts (Winkel wie im Seitenkopf) */
.mb-konto .mb-konto__karte::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 150px;
	height: 96px;
	background: var(--mb-neutral-100);
	clip-path: polygon(calc(96px * 0.404) 0, 100% 0, 100% 100%, 0 100%);
	pointer-events: none;
}
.mb-konto .mb-konto__karte > * { position: relative; }

.mb-konto .mb-konto__ansicht[hidden] { display: none; }

.mb-konto .mb-konto__eyebrow {
	margin: 0 0 var(--mb-space-1);
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: var(--mb-tracking-cap);
	text-transform: uppercase;
	color: var(--mb-red);
}
.mb-konto h2.mb-konto__titel {
	margin: 0 0 var(--mb-space-2);
	font-size: var(--mb-fs-h3);
	line-height: var(--mb-lh-tight);
	outline: none;
}
.mb-konto .mb-konto__lead {
	margin: 0 0 var(--mb-space-4);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--mb-ink-600);
}

/* ---------- WooCommerce-Formularrahmen neutralisieren ---------- */
.mb-konto form.mb-konto__form {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	text-align: left;
}
.mb-konto form .form-row,
.mb-konto form .form-row-first,
.mb-konto form .form-row-last,
.mb-konto form .form-row-wide {
	float: none;
	width: 100%;
	clear: both;
	margin: 0 0 var(--mb-space-4);
	padding: 0;
}
.mb-konto form .clear { display: none; }

/* ---------- Beschriftungen ---------- */
.mb-konto form label {
	display: block;
	margin: 0 0 var(--mb-space-1);
	font-family: var(--mb-font-body);
	font-size: 0.9375rem;
	font-weight: var(--mb-weight-medium);
	line-height: 1.35;
	color: var(--mb-ink-800);
}
.mb-konto form label .required,
.mb-konto form .required { color: var(--mb-red); text-decoration: none; border: 0; font-weight: var(--mb-weight-strong); }
.mb-konto form label .optional,
.mb-konto form label span:not(.required):not(.screen-reader-text) { font-weight: var(--mb-weight-body); }
.mb-konto form .optional { color: var(--mb-ink-600); }
.mb-konto .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.mb-konto .mb-konto__labelzeile {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mb-space-2);
}
.mb-konto .mb-konto__labelzeile label { margin-bottom: var(--mb-space-1); }
.mb-konto .mb-konto__vergessen { margin: 0; font-size: var(--mb-fs-small); }
.mb-konto .mb-konto__vergessen a { font-weight: var(--mb-weight-medium); }

/* ---------- Eingaben ---------- */
.mb-konto form input.input-text:where(:not([type="checkbox"]):not([type="file"])),
.mb-konto form input[type="text"],
.mb-konto form input[type="email"],
.mb-konto form input[type="password"],
.mb-konto form input[type="tel"] {
	display: block;
	width: 100%;
	height: var(--mb-konto-feld-h);
	margin: 0;
	padding: 0 var(--mb-space-3);
	font-family: var(--mb-font-body);
	font-size: var(--mb-fs-body);
	line-height: 1.4;
	color: var(--mb-ink-900);
	background: var(--mb-card);
	border: 1px solid var(--mb-konto-linie);
	border-radius: var(--mb-radius-input);
	box-shadow: inset 0 0 0 0 transparent;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--mb-dur-fast) var(--mb-ease-cut),
		box-shadow var(--mb-dur-fast) var(--mb-ease-cut);
}
.mb-konto.mb-konto form input.input-text:hover:not(:focus) { border-color: var(--mb-ink-600); }
.mb-konto.mb-konto form input.input-text:focus,
.mb-konto.mb-konto form input.input-text:focus-visible {
	border-color: var(--mb-ink-900);
	box-shadow: inset 0 -3px 0 0 var(--mb-red);
	outline: none;
}
.mb-konto.mb-konto form input.input-text.is-fehler,
.mb-konto.mb-konto form input.input-text[aria-invalid="true"] {
	border-color: var(--mb-error);
	box-shadow: inset 0 -3px 0 0 var(--mb-error);
}
.mb-konto.mb-konto form input.input-text.is-fehler:focus,
.mb-konto.mb-konto form input.input-text[aria-invalid="true"]:focus { border-color: var(--mb-ink-900); }
.mb-konto form input.input-text:-webkit-autofill {
	-webkit-text-fill-color: var(--mb-ink-900);
	box-shadow: inset 0 0 0 100px var(--mb-card);
}

/* Fehlermeldung am Feld (konto.js) */
.mb-konto .mb-konto__fehler {
	display: block;
	margin: var(--mb-space-1) 0 0;
	font-size: var(--mb-fs-small);
	font-weight: var(--mb-weight-medium);
	line-height: 1.4;
	color: var(--mb-error);
}

/* ---------- Passwort anzeigen (WooCommerce-Schalter im CI) ---------- */
.mb-konto .password-input { position: relative; display: block; }
.mb-konto .password-input input { padding-right: 52px; }
.mb-konto .show-password-input {
	position: absolute;
	top: 0;
	right: 0;
	width: 52px;
	height: var(--mb-konto-feld-h);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	cursor: pointer;
	color: var(--mb-ink-700);
	display: grid;
	place-content: center;
	box-shadow: none;
}
.mb-konto .show-password-input::before,
.mb-konto .show-password-input::after {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: url('../icons/eye-fill.svg') center / contain no-repeat;
	mask: url('../icons/eye-fill.svg') center / contain no-repeat;
	position: static;
	border: 0;
	opacity: 1;
	transform: none;
}
.mb-konto .show-password-input::after { display: none; }
.mb-konto .show-password-input.display-password::before {
	-webkit-mask-image: url('../icons/eye-slash-fill.svg');
	mask-image: url('../icons/eye-slash-fill.svg');
}
.mb-konto .show-password-input:hover { color: var(--mb-ink-900); background: none; }
.mb-konto .show-password-input:focus-visible { outline: 2px solid var(--mb-red); outline-offset: -4px; }

/* Passwort-Stärke (WooCommerce) */
.mb-konto .woocommerce-password-strength {
	margin: var(--mb-space-1) 0 0;
	padding: var(--mb-space-1) var(--mb-space-2);
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: 0.02em;
	line-height: 1.4;
	text-align: left;
	color: var(--mb-ink-900);
	background: var(--mb-neutral-100);
	border-left: 4px solid var(--mb-neutral-400);
}
.mb-konto .woocommerce-password-strength.short,
.mb-konto .woocommerce-password-strength.bad { background: var(--mb-red-tint); border-left-color: var(--mb-error); }
.mb-konto .woocommerce-password-strength.good { background: #FFF3DF; border-left-color: var(--mb-warning); }
.mb-konto .woocommerce-password-strength.strong { background: #E8F3E8; border-left-color: var(--mb-success); }
.mb-konto .woocommerce-password-hint {
	display: block;
	margin: var(--mb-space-1) 0 0;
	font-size: var(--mb-fs-small);
	line-height: 1.4;
	color: var(--mb-ink-600);
}

/* ---------- Kontrollkästchen (eigene Form, echtes Eingabefeld) ---------- */
.mb-konto .mb-konto__merken { margin-bottom: var(--mb-space-4); }
.mb-konto form label.woocommerce-form__label-for-checkbox {
	display: block;
	position: relative;
	margin: 0;
	padding-left: 34px;
	min-height: 24px;
	font-weight: var(--mb-weight-body);
	line-height: 1.5;
	cursor: pointer;
}
.mb-konto form input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	background: var(--mb-card);
	border: 1.5px solid var(--mb-ink-700);
	border-radius: var(--mb-radius-input);
	cursor: pointer;
	display: grid;
	place-content: center;
	transition: background-color var(--mb-dur-fast) var(--mb-ease-cut), border-color var(--mb-dur-fast) var(--mb-ease-cut);
}
.mb-konto form input[type="checkbox"]::before {
	content: "";
	width: 12px;
	height: 12px;
	background-color: #fff;
	-webkit-mask: url('../icons/check-bold.svg') center / contain no-repeat;
	mask: url('../icons/check-bold.svg') center / contain no-repeat;
	transform: scale(0);
	transition: transform var(--mb-dur-fast) var(--mb-ease-cut);
}
.mb-konto form input[type="checkbox"]:checked { background: var(--mb-ink-900); border-color: var(--mb-ink-900); }
.mb-konto form input[type="checkbox"]:checked::before { transform: scale(1); }
.mb-konto form input[type="checkbox"]:focus-visible { outline: 2px solid var(--mb-red); outline-offset: 2px; }
.mb-konto form input[type="checkbox"].is-fehler,
.mb-konto form input[type="checkbox"][aria-invalid="true"] { border-color: var(--mb-error); box-shadow: 0 0 0 1px var(--mb-error); }
.mb-konto .mb-konto__zustimmung .form-row { margin-bottom: var(--mb-space-4); }
.mb-konto .mb-konto__zustimmung a { font-weight: var(--mb-weight-medium); }

/* ---------- Firmenangaben (aufklappbar) ---------- */
.mb-konto details.mb-konto__firma[hidden] { display: none; }
.mb-konto details.mb-konto__firma {
	margin: 0 0 var(--mb-space-4);
	border: 1px solid var(--mb-rule);
	background: var(--mb-neutral-100);
}
.mb-konto details.mb-konto__firma > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mb-space-2);
	padding: var(--mb-space-2) var(--mb-space-3);
	min-height: 48px;
	font-weight: var(--mb-weight-medium);
	font-size: 0.9375rem;
	color: var(--mb-ink-800);
	cursor: pointer;
	list-style: none;
}
.mb-konto details.mb-konto__firma > summary::-webkit-details-marker { display: none; }
.mb-konto details.mb-konto__firma > summary span { font-weight: var(--mb-weight-body); color: var(--mb-ink-600); }
.mb-konto details.mb-konto__firma > summary::after {
	content: "";
	flex: 0 0 auto;
	margin-left: auto;
	width: 14px;
	height: 14px;
	background-color: var(--mb-ink-900);
	-webkit-mask: url('../icons/plus-bold.svg') center / contain no-repeat;
	mask: url('../icons/plus-bold.svg') center / contain no-repeat;
	transition: transform var(--mb-dur-base) var(--mb-ease-cut);
}
.mb-konto details.mb-konto__firma[open] > summary::after { transform: rotate(45deg); }
.mb-konto details.mb-konto__firma > summary:focus-visible { outline: 2px solid var(--mb-red); outline-offset: -2px; }
.mb-konto .mb-konto__firma-inhalt { padding: var(--mb-space-1) var(--mb-space-3) 0; }
.mb-konto .mb-konto__firma-inhalt .woocommerce-input-wrapper { display: block; }

/* Dateiauswahl (konto.js ersetzt das native Feld) */
.mb-konto .mb-konto-datei { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mb-space-1) var(--mb-space-3); }
.mb-konto .mb-konto-datei__eingabe {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	opacity: 0;
	clip: rect(0 0 0 0);
}
.mb-konto .mb-konto-datei__knopf {
	display: inline-flex;
	align-items: center;
	gap: var(--mb-space-1);
	min-height: 44px;
	padding: 0 var(--mb-space-3);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: var(--mb-weight-medium);
	color: var(--mb-ink-900);
	background: var(--mb-card);
	border: 1.5px solid var(--mb-ink-900);
	border-radius: var(--mb-radius-input);
	cursor: pointer;
	transition: background-color var(--mb-dur-fast) var(--mb-ease-cut), color var(--mb-dur-fast) var(--mb-ease-cut);
}
.mb-konto .mb-konto-datei__knopf::before {
	content: "";
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url('../icons/upload-bold.svg') center / contain no-repeat;
	mask: url('../icons/upload-bold.svg') center / contain no-repeat;
}
.mb-konto .mb-konto-datei__knopf:hover { background: var(--mb-ink-900); color: #fff; }
.mb-konto .mb-konto-datei__eingabe:focus-visible + .mb-konto-datei__knopf,
.mb-konto .mb-konto-datei__knopf:focus-visible { outline: 2px solid var(--mb-red); outline-offset: 2px; }
.mb-konto .mb-konto-datei__name { font-size: var(--mb-fs-small); color: var(--mb-ink-600); overflow-wrap: anywhere; }

/* ---------- Knopf (mb-cta) ---------- */
.mb-konto .mb-konto__aktion { margin-bottom: 0; }
.mb-konto button.mb-konto__senden,
.mb-konto button.mb-cta {
	width: 100%;
	justify-content: center;
	min-height: 56px;
	margin: 0;
	padding: var(--mb-space-3) var(--mb-space-5);
	font-family: var(--mb-font-body);
	font-size: var(--mb-fs-body);
	font-weight: var(--mb-weight-strong);
	line-height: 1.2;
	color: #fff;
	background: var(--mb-red);
	border: 0;
	border-radius: 0;
	cursor: pointer;
	text-decoration: none;
	box-shadow: none;
}
.mb-konto button.mb-konto__senden:hover { background: var(--mb-red-hover); color: #fff; text-decoration: none; }
.mb-konto button.mb-konto__senden:focus-visible { outline: 2px solid var(--mb-ink-900); outline-offset: 2px; text-decoration: none; }
.mb-konto button.mb-konto__senden:disabled,
.mb-konto button.mb-konto__senden.disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ---------- Wechsel zur anderen Ansicht ---------- */
.mb-konto .mb-konto__wechsel {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: var(--mb-space-1) var(--mb-space-2);
	margin: var(--mb-space-5) 0 0;
	padding-top: var(--mb-space-4);
	border-top: 1px solid var(--mb-rule);
}
.mb-konto .mb-konto__wechsel-text { margin: 0; color: var(--mb-ink-600); font-size: 0.9375rem; }
.mb-konto a.mb-konto__wechsel-link {
	display: inline-flex;
	align-items: center;
	gap: var(--mb-space-1);
	min-height: 44px;
	font-weight: var(--mb-weight-strong);
	color: var(--mb-red);
	text-decoration: none;
}
.mb-konto a.mb-konto__wechsel-link::after {
	content: "››";
	font-family: var(--mb-font-mono);
	transition: transform var(--mb-dur-base) var(--mb-ease-cut);
}
.mb-konto a.mb-konto__wechsel-link:hover { color: var(--mb-red-hover); text-decoration: none; }
.mb-konto a.mb-konto__wechsel-link:hover::after { transform: translateX(4px); }
.mb-konto a.mb-konto__wechsel-link:focus-visible,
.mb-konto .mb-konto__vergessen a:focus-visible,
.mb-konto .mb-konto__firmenhinweis a:focus-visible { outline: 2px solid var(--mb-red); outline-offset: 3px; }
.mb-konto .mb-konto__gast,
.mb-konto .mb-konto__hinweis {
	margin: var(--mb-space-1) 0 0;
	text-align: center;
	font-size: var(--mb-fs-small);
	color: var(--mb-ink-600);
}
.mb-konto .mb-konto__hinweis { text-align: left; margin: 0 0 var(--mb-space-4); }
.mb-konto .mb-konto__firmenhinweis {
	margin: var(--mb-space-4) 0 0;
	font-size: var(--mb-fs-small);
	line-height: 1.5;
	color: var(--mb-ink-600);
}
.mb-konto .mb-konto__firmenhinweis a { font-weight: var(--mb-weight-medium); }

/* ---------- WooCommerce-Meldungen im CI ---------- */
.mb-konto .mb-konto__hinweise:not(:has(.woocommerce-error, .woocommerce-message, .woocommerce-info)) { display: none; }
.mb-konto .mb-konto__hinweise { margin: 0 0 var(--mb-space-4); }
.mb-konto .mb-konto__hinweise .woocommerce-notices-wrapper { margin: 0; }
.mb-konto .woocommerce-error,
.mb-konto .woocommerce-message,
.mb-konto .woocommerce-info {
	display: block;
	position: relative;
	margin: 0 0 var(--mb-space-3);
	padding: var(--mb-space-2) var(--mb-space-3);
	list-style: none;
	font-size: 0.9375rem;
	line-height: 1.45;
	font-weight: var(--mb-weight-medium);
	color: var(--mb-ink-900);
	background: var(--mb-neutral-100);
	border: 0;
	border-left: 4px solid var(--mb-ink-700);
	border-radius: 0;
	box-shadow: none;
	width: auto;
}
.mb-konto .woocommerce-error::before,
.mb-konto .woocommerce-message::before,
.mb-konto .woocommerce-info::before { display: none; content: none; }
.mb-konto .woocommerce-error { background: var(--mb-red-tint); border-left-color: var(--mb-error); }
.mb-konto .woocommerce-message { background: #E8F3E8; border-left-color: var(--mb-success); }
.mb-konto .woocommerce-error li { margin: 0; padding: 0; list-style: none; }
.mb-konto .woocommerce-error li + li { margin-top: var(--mb-space-1); }
.mb-konto .woocommerce-error a,
.mb-konto .woocommerce-message a,
.mb-konto .woocommerce-info a { font-weight: var(--mb-weight-strong); }
.mb-konto .woocommerce-message .button,
.mb-konto .woocommerce-info .button { display: none; }

/* ---------- Handy: volle Breite, 16 px Rand ---------- */
@media (max-width: 540px) {
	.mb-konto { max-width: none; padding: 0 6px; } /* Elementor-Abschnitt trägt 10 px Rand: zusammen 16 px */
	.mb-konto .mb-konto__karte { padding: var(--mb-space-5) var(--mb-space-3) var(--mb-space-4); box-shadow: 3px 3px 0 var(--mb-ink-900); }
	.mb-konto h2.mb-konto__titel { font-size: var(--mb-fs-h4); }
}