/*
 * KDP-109: Login-Redesign (Variante A, CI-Grün)
 * Zentrierte Auth-Karte für den E-Mail-Schritt (login.phtml) und den
 * Code-Schritt (otp_input.phtml) — geteilt über pv/ea/gdc/index.
 *
 * Tokens sind Teleson-Default. DVAG überschreibt sie in
 * public/css/mandanten/dvag2017/base.css (keine neue Theming-Mechanik,
 * nur Farb-Tokens je Mandant).
 */
:root {
	/* Vertikaler Rhythmus — jeder Kartenabstand kommt aus dieser Skala */
	--auth-s1: 4px;
	--auth-s2: 8px;
	--auth-s3: 12px;
	--auth-s4: 16px;
	--auth-s5: 24px;
	--auth-s6: 32px;

	/* KDP-109: Login folgt dem Mandanten. Diese Marken-Tokens erben die
	   --portal-* Tokens (portal.css-Default = TELESON-Grün, per-Mandant
	   überschrieben, z.B. DVAG-Gold). auth.css lädt NACH der Mandanten-CSS,
	   daher lösen die var() bereits auf den Mandantenwert auf. Grün bleibt
	   Fallback, falls portal.css mal nicht geladen ist. */
	--auth-brand: var(--portal-brand, #9cce1d);
	--auth-brand-strong: var(--portal-brand-strong, #6f9c0f);
	--auth-ink: #212529;
	--auth-copy: #575756;
	--auth-muted: #6c757d;
	--auth-field: #ced4da;
	--auth-badge-bg: rgba(33, 37, 41, .06);
	--auth-btn-bg: var(--portal-btn-bg, #9cce1d);
	--auth-btn-ink: var(--portal-btn-ink, #212529);
	--auth-btn-bg-hover: var(--portal-btn-bg-hover, #8bbb15);
	--auth-focus: var(--portal-focus, rgba(156, 206, 29, .45));
	/* KDP-109 A2 "Zuhause im Licht": geteiltes Login-Hero-Bild (lokales Asset,
	   TELESON + DVAG identisch — Mandant re-themt nur Overlay/Akzent, nicht das Foto). */
	--auth-hero: url(../images/teaser/login-hero.jpg);
}

/* ==========================================================================
   KDP: WEISSER Seiten-Hintergrund (Login + Portal).
   Der Grauton kam bisher aus base.css/den Mandanten-CSS:
     - base.css            body #e1e1e0
     - mandanten/teleson   body #9cce1d !important  +  body > .main #e1e1e0 (grau)
     - mandanten/dvag2017  body #F7F7F7             +  .main #ffffff
   auth.css lädt als LETZTES Stylesheet (nach portal.css UND nach der
   Mandanten-CSS, siehe headInclude.phtml), daher gewinnen diese Regeln die
   Kaskade — der einzige Ort, an dem das teleson-`!important`-Grün am body
   überschrieben werden kann. Ergebnis: Seite weiß, Karten schweben über
   Schatten. Mandanten-Farb-Tokens (--portal-... / --auth-...) bleiben unberührt,
   Theming (TELESON-Grün / DVAG-Gold) funktioniert weiter.
   ========================================================================== */
body { background: #ffffff !important; }
body > .main { background: #ffffff; }

/* KDP-109: Ein fremdes Stylesheet (rsales-main.css) setzt body{min-height:1200px}
   und erzwingt so auf JEDER Seite 1200px Höhe → Scrollbalken, Footer unter dem
   Fold, Layout skaliert nicht mit der Fensterhöhe. Hier auf die korrekte
   Sticky-Footer-Grundlage zurücksetzen: mind. Fensterhöhe, wächst mit Inhalt.
   Hohe Spezifität (html body), damit es die 1200px-Regel sicher schlägt. */
html body { min-height: 100vh; }

/* KDP-109: Mobiler Header — die Mandanten-CSS setzt das Logo groß
   (teleson: .main-header img.brand-top ≈ 60px) und drückt Logo + Hamburger
   auf schmalem Screen in zwei Zeilen. auth.css lädt NACH der Mandanten-CSS,
   daher hier kappen, damit beide in EINE Zeile passen. */
@media (max-width: 560px) {
	.main-header img.brand-top { max-height: 38px; }
	.app-header { flex-wrap: nowrap; gap: 10px; }
	.app-header .brand { min-width: 0; }
	.app-header .brand-top { max-width: 100%; }
}

.auth-shell {
	display: flex;
	justify-content: center;
	align-items: center;      /* horizontal + vertikal mittig */
	flex: 1 1 auto;           /* füllt die verfügbare Höhe (statt festem min-height → kein Scroll) */
	padding: var(--auth-s6) 16px;
}

/* Login vertikal mittig OHNE Scroll: die Seite passt sich der Fensterhöhe an.
   body ist (Mandanten-CSS) Flex-Spalte mit body > .main { flex-grow:1 }. Hier
   die Kette .main > (Bootstrap-)Container > .auth-shell durchgehend flex-füllen,
   damit die Karte in der Resthöhe (Fenster minus Header/Footer) zentriert sitzt.
   :has() grenzt das auf die Login-Seite ein; ältere Browser fallen sauber auf
   oben-ausgerichtet zurück (immer noch ohne Scroll). */
body:has(.auth-shell) > .main { display: flex; flex-direction: column; }
body:has(.auth-shell) > .main > .container,
body:has(.auth-shell) > .main > .container-fluid {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding-top: 0;
	padding-bottom: 0;
}

/* ===== KDP-109 A2 "Zuhause im Licht": Split-Hero für Login + MFA =====
   Marken-Bild links, Auth-Karte rechts. Voll-bleed: JEDEN (auch verschachtelten)
   Bootstrap-Container innerhalb von .main auf der Login-Seite neutralisieren —
   die echte Kette ist body > .main > .container-fluid.pt-5.pb-5 (base.phtml,
   hasTeaser=true) > .container (index.phtml) > .auth-split. Ein Direktkind-
   Selektor griff hier zu kurz (Bug: Split blieb im 1300px-Container gefangen).
   Ohne .auth-split (ältere Browser ohne :has) bleibt die zentrierte Karte. */
body:has(.auth-split) > .main :is(.container, .container-fluid) {
	max-width: none;
	width: 100%;
	/* !important nötig: base.phtml gibt dem Wrapper pt-5/pb-5 — Bootstrap-Utilities
	   mit !important, die sonst weiße Streifen über/unter dem Voll-bleed lassen. */
	padding: 0 !important;
	margin: 0;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.auth-split {
	display: grid;
	grid-template-columns: 1.02fr .98fr;
	flex: 1 1 auto;
	/* Volle Viewport-Höhe: der Footer liegt als fixierter, dezenter Layer über der
	   rechten Formular-Hälfte (kein Weißstreifen mehr unter dem Bild). */
	min-height: 100vh;
	min-height: 100dvh;
}

/* KDP-109 A2 (1:1 zum freigegebenen Mock):
   – Kein eigener Logo-Balken auf der Login-Seite: der Portal-Header verschwindet,
     das echte Mandanten-Logo liegt als Chip oben im Bild (auth_hero.phtml).
   – Formular auf blankem Weiß: keine Karte, kein Rahmen, kein Schatten, linksbündig.
   – Footer dezent und nur auf der rechten (Formular-)Hälfte. */
body:has(.auth-split) .main-header { display: none; }

.auth-hero-brand {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	background: rgba(255, 255, 255, .92);
	border-radius: 10px;
	padding: 8px 14px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}
.auth-hero-brand img { display: block; max-height: 44px; width: auto; }

.auth-split > .auth-shell { background: #fff; padding-bottom: 96px; /* Platz für den fixierten Footer */ }
.auth-split .auth-card {
	max-width: 440px;
	background: transparent;
	border: 0;
	box-shadow: none;
	text-align: left;
	padding: 0 8px;
}
.auth-split .auth-badge { display: none; }

/* Typo-Maßstab 1:1 zum freigegebenen Mock (größer + linksbündig + enge, bewusste Abstände) */
.auth-split .auth-eyebrow { text-align: left; margin: 0 0 8px; }
.auth-split .auth-title { text-align: left; font-size: 2.1rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.05; margin: 0 0 12px; }
.auth-split .auth-lead { text-align: left; font-size: 1rem; line-height: 1.5; margin: 0 0 26px; padding: 0; max-width: none; }
.auth-split .field-label { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.auth-split .field-input {
	text-align: left;
	padding: 16px 18px;
	font-size: 1.02rem;
	border-radius: 12px;
	border-color: var(--auth-brand);
	box-shadow: 0 0 0 4px var(--portal-brand-wash, rgba(156, 206, 29, .08));
}
.auth-split .btn-primary-auth { padding: 17px 18px; border-radius: 12px; font-size: 1.05rem; }
.auth-split .btn-primary-auth::after { content: " \2192"; }
.auth-split .auth-secure { text-align: left; color: var(--auth-brand-strong); }
/* margin/max-width zurücksetzen — die Basis zentriert die Blöcke per auto-Margin,
   im Split-Kontext wirkte das wie Einrückung statt linksbündig (#105). */
.auth-split .auth-hint, .auth-split .auth-resend { text-align: left; margin-left: 0; margin-right: 0; max-width: none; }
.auth-split .auth-resend a { color: var(--auth-brand-strong); font-weight: 600; }
.auth-split .otp-boxes { justify-content: flex-start; }

/* Footer auf der Login-Seite: dezenter, fixierter Layer unten auf der rechten
   Formular-Hälfte — das Bild links läuft dadurch bis ganz nach unten durch. */
body:has(.auth-split) .container-fluid:has(> .footer) {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 49%;
	margin: 0;
	background: transparent;
	z-index: 5;
}
body:has(.auth-split) .footer { font-size: .8rem; opacity: .75; }

@media (max-width: 760px) {
	body:has(.auth-split) .container-fluid:has(> .footer) { position: static; width: 100%; }
	.auth-split > .auth-shell { padding-bottom: var(--auth-s5); }
}
.auth-split > .auth-shell { padding: var(--auth-s6) 5vw; }

.auth-hero {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(180deg, rgba(8, 18, 12, .5) 0%, rgba(8, 18, 12, .12) 30%, rgba(8, 18, 12, .28) 60%, rgba(6, 16, 11, .85) 100%),
		var(--auth-hero);
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between; /* Logo-Chip oben, Begrüßung unten (Mock A2) */
	padding: 34px 38px 44px;
	color: #f4f7e8;
	min-height: 320px;
}
.auth-hero-flow { position: absolute; inset: 0; mix-blend-mode: screen; opacity: .5; }
.auth-hero-flow svg { width: 100%; height: 100%; display: block; }
.auth-hero-flow path { animation: authHeroFlow 16s ease-in-out infinite; }
.auth-hero-text { position: relative; z-index: 1; }
.auth-hero-text h2 { margin: 0 0 10px; font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; }
.auth-hero-text p { margin: 0; font-size: 1rem; line-height: 1.5; color: rgba(244, 247, 232, .86); max-width: 34ch; }
@keyframes authHeroFlow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-14px); } }
@media (prefers-reduced-motion: reduce) { .auth-hero-flow path { animation: none; } }

/* Mobil: stapeln — Bild als Banner oben, Karte darunter */
@media (max-width: 760px) {
	.auth-split { grid-template-columns: 1fr; }
	.auth-hero { min-height: 190px; padding: 26px 24px; }
	.auth-split > .auth-shell { padding: var(--auth-s5) 20px; }
}

.auth-card {
	width: 100%;
	max-width: 400px;
	background: #fff;
	border-radius: 12px;
	text-align: center;   /* KDP: zentrierte Einspalter-Karte — rSign-Hero als Vorbild (Badge, Eyebrow, Titel, Lead, Feld, Secure-Hinweis alle mittig) */
	/* Weißer Hintergrund, Karte trennt sich über Schatten + Haarlinie (kein Grau-Kontrast mehr) */
	border: 1px solid rgba(16, 24, 40, .06);
	box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 12px 32px rgba(16, 24, 40, .10);
	padding: var(--auth-s6) 24px var(--auth-s5);
}

.auth-badge {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--auth-badge-bg);
	color: var(--auth-ink);
	display: grid;
	place-items: center;
	margin: 0 auto var(--auth-s2); /* badge -> eyebrow: 8, zentriert */
}
.auth-badge svg { width: 56%; height: 56%; }

.auth-eyebrow {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--auth-muted);
	margin: 0 0 var(--auth-s2); /* eyebrow -> title: 8 */
}

.auth-title {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--auth-ink);
	margin: 0 0 var(--auth-s3); /* title -> lead: 12 */
	letter-spacing: -.02em;
	line-height: 1.2;
}

.auth-lead {
	font-size: .9rem;
	line-height: 1.5;
	color: var(--auth-copy);
	margin: 0 auto var(--auth-s5); /* lead -> field: 24, zentrierter Block (max-width) */
	max-width: 42ch;
}
.auth-lead strong { color: var(--auth-ink); font-weight: 600; }

.field-label {
	display: block;
	font-size: .78rem;
	font-weight: 700;
	color: var(--auth-ink);
	margin-bottom: var(--auth-s2); /* label -> input: 8 */
	letter-spacing: .01em;
}

.field-input {
	width: 100%;
	font-size: 1rem;
	text-align: center; /* KDP: einzelnes zentriertes Feld — konsistent mit den OTP-Boxen */
	padding: 12px 14px;
	border: 1.5px solid var(--auth-field);
	border-radius: 8px;
	background: #fff;
	color: var(--auth-ink);
	transition: border-color .15s, box-shadow .15s;
}
.field-input::placeholder { color: #b3b9c0; }
.field-input:focus {
	outline: none;
	border-color: var(--auth-brand);
	box-shadow: 0 0 0 4px var(--auth-focus);
}

.btn-primary-auth {
	display: inline-block;
	width: 100%;
	margin-top: var(--auth-s4); /* field -> button: 16 */
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .02em;
	padding: 13px 18px;
	border: none;
	border-radius: 8px;
	background: var(--auth-btn-bg);
	color: var(--auth-btn-ink);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
	box-sizing: border-box;
	transition: background .16s ease, box-shadow .16s ease;
}
.btn-primary-auth:hover {
	background: var(--auth-btn-bg-hover);
	box-shadow: 0 2px 6px rgba(16, 24, 40, .16);
	color: var(--auth-btn-ink);
}
.btn-primary-auth:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--auth-focus);
}
.btn-primary-auth:disabled {
	opacity: .55;
	cursor: not-allowed;
}

/* KDP-handy: Login-Methode Tabs (E-Mail / Handynummer), additiv neben dem bestehenden
   E-Mail-Formular. Panel-Sichtbarkeit setzt LoginForm.js per [hidden]-Attribut — ohne JS
   bleiben beide .auth-method-panel sichtbar (siehe PROGRESS-portal-phone-login.md). */
.auth-method-tabs {
	display: flex;
	gap: 4px;
	margin: 0 0 var(--auth-s4);
	border-bottom: 1px solid var(--auth-field);
	text-align: left;
}
.auth-method-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.auth-method-tab {
	flex: 1;
	text-align: center;
	padding: 8px 4px 10px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--auth-muted);
	border-bottom: 2px solid transparent;
	cursor: pointer;
	margin-bottom: -1px;
	transition: color .15s, border-color .15s;
}
.auth-method-radio:checked + .auth-method-tab {
	color: var(--auth-brand-strong);
	border-color: var(--auth-brand);
}
.auth-method-radio:focus-visible + .auth-method-tab {
	outline: 2px solid var(--auth-brand);
	outline-offset: 2px;
}
.auth-method-panel { text-align: left; margin-bottom: var(--auth-s5); }
.auth-method-panel[hidden] { display: none; }

/* KDP-handy: Feld mit festem Vorwahl-Praefix. Der Rahmen sitzt auf der Gruppe, das
   Eingabefeld selbst ist rahmenlos — sonst gaebe es zwei Rahmen im Rahmen. Der
   Fokusring wird per :focus-within an die Gruppe gehaengt, damit er die ganze
   Einheit umfasst wie bei einem einzelnen Feld. */
.field-prefix-group {
	display: flex;
	align-items: stretch;
	border: 1.5px solid var(--auth-field);
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
	transition: border-color .15s, box-shadow .15s;
}
.field-prefix-group:focus-within {
	border-color: var(--auth-brand);
	box-shadow: 0 0 0 4px var(--auth-focus);
}
.field-prefix {
	display: flex;
	align-items: center;
	padding: 12px 12px 12px 14px;
	font-size: 1rem;
	color: var(--auth-muted);
	background: var(--auth-badge-bg);
	border-right: 1.5px solid var(--auth-field);
	flex: none;
	user-select: none;
}
/* Das Feld in der Gruppe bringt seinen eigenen Rahmen und Fokusring nicht mit. */
.field-input--suffix {
	border: 0;
	border-radius: 0;
	text-align: left;
	background: transparent;
	flex: 1 1 auto;
	min-width: 0;
}
.field-input--suffix:focus { outline: none; box-shadow: none; }

/* Nur fuer Screenreader — der Hinweis zur Schreibweise steht nicht mehr sichtbar
   unter dem Feld, weil das Feld die Form selbst vorgibt. */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.auth-method-hint {
	font-size: .76rem;
	color: var(--auth-muted);
	margin: var(--auth-s2) 0 0;
}

.auth-secure {
	display: flex;
	align-items: center;
	justify-content: center; /* KDP: Secure-Hinweis mittig unter der Karte */
	gap: 7px;
	font-size: .8rem;
	color: var(--auth-muted);
	margin: var(--auth-s5) 0 0; /* button -> secure: 24 */
}
.auth-secure svg { color: var(--auth-brand-strong); flex: none; }

.auth-fineprint {
	font-size: .7rem;
	line-height: 1.5;
	color: var(--auth-muted);
	margin: var(--auth-s3) auto 0; /* secure -> fineprint: 12, zentriert */
	max-width: 42ch;
}

/* OTP — 6 flexible Einzelfelder, laufen bis 320px nie über */
.otp-boxes {
	display: flex;
	gap: 8px;
	justify-content: center;
}
.otp-box {
	flex: 1 1 0;
	min-width: 0;
	aspect-ratio: 1 / 1.18;
	max-width: 56px;
	text-align: center;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--auth-ink);
	border: 1.5px solid var(--auth-field);
	border-radius: 9px;
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.otp-box:focus {
	outline: none;
	border-color: var(--auth-brand);
	box-shadow: 0 0 0 4px var(--auth-focus);
}
.otp-box.filled { border-color: var(--auth-brand); }

.auth-hint {
	font-size: .78rem;
	color: var(--auth-muted);
	margin: var(--auth-s4) auto 0; /* button -> hint: 16, zentriert */
	max-width: 42ch;
}
.auth-resend {
	font-size: .83rem;
	color: var(--auth-copy);
	margin: var(--auth-s3) 0 0; /* hint -> resend: 12 */
}
.link-btn {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: var(--auth-ink);
	font-weight: 700;
	cursor: pointer;
	text-decoration: underline;
}

.auth-back {
	display: flex;
	align-items: center;
	justify-content: center; /* KDP: mittig im zentrierten Layout */
	gap: 5px;
	background: none;
	border: none;
	padding: 0;
	margin: 0 0 var(--auth-s4);
	font: inherit;
	font-size: .83rem;
	color: var(--auth-muted);
	cursor: pointer;
}
.auth-back:hover { color: var(--auth-ink); }

/* Zustand über Tönung + Rand, keine Kanten-Streifen */
.auth-alert {
	border-radius: 8px;
	padding: 12px 15px;
	font-size: .9rem;
	line-height: 1.45;
	text-align: center; /* KDP: im zentrierten Layout mittig (kurze Auth-Meldungen) */
}
.auth-alert.alert-danger { background: #fdecea; color: #8a1c13; border: 1px solid #f3c3bd; }
.auth-alert.alert-warning { background: #fff6e0; color: #7a5b00; border: 1px solid #f0d67a; }
.auth-alert.alert-success { background: #eaf6e6; color: #2f6a1f; border: 1px solid #c7e6bb; }
.auth-alert.alert-info { background: #e6f1fb; color: #1c4a72; border: 1px solid #bcd9f0; }

/* KDP: alert now sits inside the card (login.phtml + otp_input.phtml) — a subtle
   entrance instead of just popping in under the title. */
.auth-card > .auth-alert {
	margin: 0 0 var(--auth-s4); /* title/alert -> lead: 16 */
	animation: auth-alert-in .2s ease-out;
}
@keyframes auth-alert-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.auth-card > .auth-alert { animation: none; }
}

@media (max-width: 400px) {
	.auth-card { padding: var(--auth-s5) 20px var(--auth-s4); }
	.auth-shell { padding: var(--auth-s5) 12px; }
}