/* Anne Fiedler — Login-Seite (wp-login.php) im Markendesign.
   Split 38,2/61,8 wie der Hero: links Gradient-Spalte (af-login-aside,
   ausgegeben in login_footer, hier fixiert), rechts das Formular.
   Der SSO-Button des OpenID-Connect-Plugins wird NUR per CSS gestylt.
   ================================================================== */

body.login {
	background: #fff;
	font-family: var(--font-sans);
	color: var(--color-ink);
	/* Formularspalte vertikal zentrieren (Design); 'safe' verhindert
	   abgeschnittenen Kopf auf niedrigen Viewports */
	display: grid;
	align-content: center;
	align-content: safe center;
	min-height: 100vh;
	box-sizing: border-box;
	padding: 32px 0;
}

/* ---------- Linke Gradient-Spalte ---------- */
.af-login-aside {
	position: fixed;
	inset: 0 auto 0 0;
	width: 38.2vw;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: var(--gradient-surface);
	color: #fff;
	padding: clamp(28px, 3vw, 44px);
	box-sizing: border-box;
	overflow: hidden;
}
.af-login-aside__marke { text-decoration: none; align-self: flex-start; }
.af-login-aside__name {
	display: block;
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: clamp(25px, 2.7vw, 32px);
	letter-spacing: 0.005em;
	color: #fff;
	line-height: 1.05;
}
.af-login-aside__punkt { color: var(--color-pink); }
.af-login-aside__claim { display: block; font-size: 13.5px; font-weight: var(--fw-medium); color: #fff; opacity: 0.85; margin-top: 10px; }
.af-login-aside__eyebrow { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.af-login-aside__titel {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.2;
	margin-top: 14px;
	text-wrap: pretty;
}
.af-login-aside__mitte p { font-size: 15.5px; line-height: 1.6; opacity: 0.9; margin: 16px 0 0; max-width: 36ch; }
.af-login-aside__mitte ul { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.af-login-aside__mitte li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 14.5px; line-height: 1.5; opacity: 0.92; }
.af-login-aside__mitte .af-icon { width: 19px; height: 19px; margin-top: 2px; }
.af-login-aside__wahltag { font-size: 13px; opacity: 0.75; }

/* ---------- Formularbereich rechts ---------- */
body.login div#login {
	margin-left: 38.2vw;
	width: auto;
	max-width: 440px;
	padding: 0 24px;
	margin-right: auto;
	/* zentriert in der rechten Spalte */
	transform: translateX(calc((61.8vw - 100%) / 2 - 24px));
}

/* Core-Logo-H1 (direktes Kind von #login) ausblenden — die Marke steht in
   der Gradient-Spalte. Unsere Begrüßungs-H1 liegt in .af-login-gruss. */
body.login #login > h1 { display: none; }

/* „Zur Website"-Link im Spaltenfluss über der Überschrift (Design) */
.af-login-zurueck {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: var(--fw-bold);
	color: var(--color-navy);
	text-decoration: none;
	margin-bottom: 26px;
}
.af-login-zurueck:hover { color: var(--color-pink); }
.af-login-zurueck .af-icon { width: 17px; height: 17px; }

/* Mobil-Logo — nur unter 900px sichtbar (ersetzt die Gradient-Spalte) */
.af-login-logo-mobil { display: none; margin-bottom: 24px; }
.af-login-logo-mobil img { height: 60px; width: auto; display: block; }

/* Begrüßung */
.af-login-gruss h1 {
	display: block;
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: clamp(26px, 3vw, 34px);
	line-height: 1.15;
	color: var(--color-navy);
	margin: 0 0 10px;
	padding: 0;
}
.af-login-gruss .af-dot { color: var(--color-pink); }
.af-login-gruss p { font-size: 15.5px; line-height: 1.6; color: var(--color-ink); margin: 0 0 20px; }

/* WP-Kernmeldungen nach dem af-msg-Kontrakt des Design-Systems:
   umlaufender 1,5px-Rand in der Signalfarbe auf 8%-Tint. Core bringt
   selbst einen 4px-Linksbalken mit, deshalb explizit border-left. */
body.login div#login .message,
body.login div#login .notice {
	border: 1.5px solid var(--color-info);
	border-left: 1.5px solid var(--color-info);
	background: var(--tint-info);
	border-radius: 12px;
	box-shadow: none;
	font-size: 14px;
}
body.login div#login #login_error {
	border: 1.5px solid var(--color-error);
	border-left: 1.5px solid var(--color-error);
	background: var(--tint-error);
	border-radius: 12px;
	box-shadow: none;
	font-size: 14px;
}

/* ---------- SSO-Button (OpenID Connect Generic) ---------- */
/* Das Plugin rendert <div class="openid-connect-login-button"><a class="button">…
   Markup nicht anfassen — nur stylen (Navy, volle Breite, wie Login.dc.html).
   Metriken identisch mit dem Anmelden-Button: 52px hoch, 15px, radius-sm. */
.openid-connect-login-button { margin: 0 0 10px; text-align: center; }
.openid-connect-login-button a.button,
.openid-connect-login-button a.button-large {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 52px;
	width: 100%;
	box-sizing: border-box;
	padding: 0 16px !important;
	background: var(--color-navy) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--radius-sm) !important;
	font-family: var(--font-sans) !important;
	font-size: 15px !important;
	line-height: 1 !important;
	font-weight: var(--fw-bold) !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
.openid-connect-login-button a.button:hover { background: var(--color-navy-dark) !important; }
/* Schild-Icon (Design) — per Maske, damit das Plugin-Markup unberührt bleibt */
.openid-connect-login-button a.button::before {
	content: '';
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	background-color: #fff;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.46 20.846a12 12 0 0 1 -7.96 -14.846a12 12 0 0 0 8.5 -3a12 12 0 0 0 8.5 3a12 12 0 0 1 -.09 7.06"/><path d="M15 19l2 2l4 -4"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.46 20.846a12 12 0 0 1 -7.96 -14.846a12 12 0 0 0 8.5 -3a12 12 0 0 0 8.5 3a12 12 0 0 1 -.09 7.06"/><path d="M15 19l2 2l4 -4"/></svg>') center / contain no-repeat;
}

/* ---------- Google-Button (vorbereitet, rendert nur mit af_login_google_url) ---------- */
.af-login-google { margin: 0 0 18px; }
.af-login-google a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 52px;
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	color: var(--color-navy);
	border: 1.5px solid var(--color-raised);
	border-radius: var(--radius-sm);
	font-size: 15px;
	font-weight: var(--fw-bold);
	text-decoration: none;
}
.af-login-google a:hover { border-color: var(--color-navy); color: var(--color-navy); }
.af-login-google .af-icon { width: 20px; height: 20px; }

/* Trenner „oder per E-Mail" zwischen SSO und Formular. Ein Pseudo-Element
   kann keine Kinder haben — die beiden Linien kommen deshalb als schmale
   Hintergrund-Streifen links/rechts vom zentrierten Text. */
body.login form#loginform::before {
	content: 'oder per E-Mail';
	display: block;
	margin: 0 0 22px;
	font-size: 11px;
	font-weight: var(--fw-bold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-navy);
	text-align: center;
	background:
		linear-gradient(var(--color-raised), var(--color-raised)) left  center / calc(50% - 72px) 1px no-repeat,
		linear-gradient(var(--color-raised), var(--color-raised)) right center / calc(50% - 72px) 1px no-repeat;
}

/* ---------- Formular ---------- */
body.login form#loginform {
	background: #fff;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin-top: 0;
}
body.login form#loginform label {
	font-size: 12px;
	font-weight: var(--fw-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-navy);
}
body.login form#loginform input[type="text"],
body.login form#loginform input[type="password"] {
	font-size: 15.5px;
	padding: 12px 14px;
	border: 1.5px solid var(--color-raised);
	border-radius: var(--radius-md);
	box-shadow: none;
	margin-top: 6px;
	color: var(--color-ink);
}
/* Fokus als Border + Ring statt outline — outlines zeichnen außerhalb der
   Box und werden von Overlays/Containern beschnitten (gemeldeter Bug). */
body.login form#loginform input:focus {
	border-color: var(--color-pink);
	box-shadow: 0 0 0 1px var(--color-pink);
	outline: none;
}
body.login .button.wp-hide-pw { color: var(--color-navy); }
/* Spezifischer als die generische label-Regel oben (form#loginform gewinnt
   sonst) — „Angemeldet bleiben" soll normalgewichtig sein, nicht fett. */
body.login form#loginform .forgetmenot label {
	text-transform: none;
	letter-spacing: 0;
	font-weight: var(--fw-regular);
	font-size: 14px;
	color: var(--color-ink);
}
body.login form#loginform input[type="checkbox"] { accent-color: var(--color-pink); border-color: var(--color-raised); }
body.login form#loginform input[type="checkbox"]:checked::before { content: none; }

body.login form#loginform .button-primary {
	width: 100%;
	min-height: 52px;
	background: var(--color-pink);
	border: 0;
	border-radius: var(--radius-sm);
	font-size: 15px;
	line-height: 1;
	font-weight: var(--fw-bold);
	text-shadow: none;
	box-shadow: none;
	transition: box-shadow 0.18s ease, transform 0.12s ease;
	margin-top: 8px;
	float: none;
}
body.login form#loginform .button-primary:hover {
	background: var(--color-pink);
	box-shadow: var(--shadow-pink);
	transform: translateY(-1px);
}

/* Links unter dem Formular */
body.login #nav,
body.login #backtoblog {
	text-align: left;
	padding: 0;
	margin: 18px 0 0;
	font-size: 13.5px;
}
body.login #nav a,
body.login #backtoblog a { color: var(--color-navy); }
body.login #nav a:hover,
body.login #backtoblog a:hover { color: var(--color-pink); }
/* „Zur Website" gibt es schon oben rechts */
body.login #backtoblog { display: none; }

/* Zeilen unter dem Formular (Design) */
.af-login-unten { margin-top: 26px; }
.af-login-register {
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-ink);
	margin: 0;
}
.af-login-register a {
	font-weight: var(--fw-bold);
	color: var(--color-navy);
	border-bottom: 2px solid var(--color-pink);
	padding-bottom: 1px;
	text-decoration: none;
}
.af-login-datenschutz {
	font-size: 13px;
	line-height: 1.6;
	color: var(--color-ink);
	margin: 18px 0 0;
}
.af-login-datenschutz a {
	color: var(--color-navy);
	border-bottom: 1px solid var(--color-pink);
	text-decoration: none;
}

/* WPs eigenen Register-Link in #nav ausblenden, solange nicht freigeschaltet
   (unsere Design-Zeile oben übernimmt) */
body.login.af-ohne-registrierung #nav a[href*="action=register"] { display: none; }

/* Sprachauswahl ist per Filter deaktiviert; Rest-Container sicherheitshalber weg */
body.login .language-switcher { display: none; }

/* ---------- Mobil: Gradient-Spalte weg, Logo oben, Formular mittig ---------- */
@media (max-width: 900px) {
	.af-login-aside { display: none; }
	.af-login-logo-mobil { display: block; }
	body.login div#login {
		margin: 0 auto;
		transform: none;
		padding-top: 4vh;
	}
}