/* ==========================================================================
   VISARO — Zugang (/kundenbereich/, 07.10.2026)
   50/50 unter dem Website-Kopf: links Anmeldung, rechts Markenfläche.
   Handy: Anmeldung zuerst, Markenfläche als schmaler Streifen darunter.
   ========================================================================== */

.vis-access {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	background: var(--vis-bg);
}

@media (min-width: 900px) {
	.vis-access {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		min-block-size: calc(100svh - var(--vis-header-height));
	}
}

/* ── Links: Anmeldung ─────────────────────────────────────────────────── */

.vis-access__login {
	display: grid;
	align-items: center;
	padding: var(--vis-space-12) var(--vis-gutter);
	background: var(--vis-bg-subtle);
}

@media (min-width: 900px) {
	.vis-access__login { padding-block: var(--vis-space-16); }
}

.vis-access__box {
	display: grid;
	gap: var(--vis-space-5);
	inline-size: 100%;
	max-inline-size: 420px;
	margin-inline: auto;
}

.vis-access__title {
	margin: 0;
	font-size: var(--vis-fs-h1);
	font-weight: var(--vis-fw-bold);
	line-height: var(--vis-lh-heading);
	letter-spacing: var(--vis-ls-display);
	text-wrap: balance;
}

.vis-access__lead {
	margin: 0;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body);
	line-height: var(--vis-lh-body);
}

.vis-access__form { display: grid; gap: var(--vis-space-4); margin-block-start: var(--vis-space-2); }

.vis-access__field { display: grid; gap: var(--vis-space-2); margin: 0; }

.vis-access__field label {
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-medium);
}

.vis-access__field input {
	inline-size: 100%;
	min-block-size: var(--vis-control-height);
	padding: 0 var(--vis-space-4);
	border: var(--vis-border-width) solid var(--vis-border-strong);
	border-radius: var(--vis-radius-sm);
	background: var(--vis-white);
	color: var(--vis-text);
	font: inherit;
	font-size: var(--vis-fs-body);
}

.vis-access__field input:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-accent);
	outline-offset: var(--vis-focus-offset);
	border-color: var(--vis-accent);
}

.vis-access__pass { position: relative; display: block; }
.vis-access__pass input { padding-inline-end: 6.5rem; }

.vis-access__reveal {
	position: absolute;
	inset-block: 4px;
	inset-inline-end: 4px;
	padding-inline: var(--vis-space-3);
	border: 0;
	border-radius: var(--vis-radius-xs);
	background: transparent;
	color: var(--vis-accent-text);
	font: inherit;
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-medium);
	cursor: pointer;
}

.vis-access__reveal:hover { background: var(--vis-bg-subtle); }
.vis-access__reveal:focus-visible { outline: var(--vis-focus-width) solid var(--vis-accent); }

.vis-access__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vis-space-3);
	margin: 0;
	font-size: var(--vis-fs-body-s);
}

.vis-access__remember { display: inline-flex; align-items: center; gap: var(--vis-space-2); }
.vis-access__remember input { inline-size: 18px; block-size: 18px; accent-color: var(--vis-accent-fill); }

.vis-access__lost { color: var(--vis-accent-text); text-underline-offset: 0.2em; }
.vis-access__lost:focus-visible { outline: var(--vis-focus-width) solid var(--vis-accent); outline-offset: 2px; border-radius: var(--vis-radius-xs); }

.vis-access__submit { inline-size: 100%; min-block-size: 52px; }

.vis-access__note,
.vis-access__closed {
	margin: 0;
	padding: var(--vis-space-4);
	border-inline-start: 3px solid var(--vis-accent);
	border-radius: 0 var(--vis-radius-sm) var(--vis-radius-sm) 0;
	background: var(--vis-white);
	font-size: var(--vis-fs-body-s);
}

.vis-access__closed { display: grid; gap: var(--vis-space-4); }
.vis-access__closed p { margin: 0; }
.vis-access__actions { display: flex; flex-wrap: wrap; gap: var(--vis-space-3); }

/* Meldungen der Anmeldung (WooCommerce-Hinweise im VISARO-Markup, shop.css lädt hier nicht). */
.vis-access__notices:empty { display: none; }
.vis-access__notices .vis-notice {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: var(--vis-space-3);
	align-items: start;
	padding: var(--vis-space-4);
	border-radius: var(--vis-radius-sm);
	font-size: var(--vis-fs-body-s);
	line-height: var(--vis-lh-body);
}
.vis-access__notices .vis-notice + .vis-notice { margin-block-start: var(--vis-space-2); }
.vis-access__notices .vis-notice__icon svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.vis-access__notices .vis-notice--success { background: var(--vis-ok-bg); color: var(--vis-ok-text); }
.vis-access__notices .vis-notice--error   { background: var(--vis-err-bg); color: var(--vis-err-text); }
.vis-access__notices .vis-notice--info    { background: var(--vis-info-bg); color: var(--vis-info-text); }
.vis-access__notices a { color: inherit; }

/* ── Rechts: Markenfläche ─────────────────────────────────────────────── */

.vis-access__brand {
	position: relative;
	display: none;
	overflow: hidden;
	background: var(--vis-grad-navy, var(--vis-ink-950));
	background-color: var(--vis-ink-950);
}

@media (min-width: 900px) {
	.vis-access__brand { display: block; }
}

.vis-access__image {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	opacity: 0.42;
	mix-blend-mode: luminosity;
}

/* Navy unten, Violett als Licht oben rechts — ruhig, ohne Bewegung. */
.vis-access__brand::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 50% at 85% 10%, rgba(162, 89, 255, 0.45), rgba(162, 89, 255, 0) 70%),
		linear-gradient(180deg, rgba(23, 33, 58, 0.25) 0%, rgba(23, 33, 58, 0.85) 100%);
}

.vis-access__mark {
	position: absolute;
	z-index: 1;
	inset-inline-start: clamp(32px, 6vw, 80px);
	inset-block-end: clamp(32px, 6vw, 80px);
	inline-size: clamp(72px, 8vw, 120px);
	block-size: auto;
}