/*
 * Lokale Schriften – keine externen Requests.
 *
 * Montserrat und Bebas Neue liegen als WOFF2 unter assets/fonts/ und werden
 * ausschliesslich vom eigenen Server ausgeliefert. Es gibt keine Verbindung
 * mehr zu einem Schriftanbieter, also auch keine Uebertragung der Kunden-IP.
 *
 * Montserrat ist die offizielle Variable Font (Achse wght 400-900): eine Datei
 * je Subset statt sechs Einzelgewichte – deutlich weniger Bytes bei gleicher
 * Darstellung. `font-weight: 400 900` gibt der Engine den nutzbaren Bereich an;
 * Browser ohne Variable-Font-Unterstuetzung gibt es im Zielumfeld nicht mehr,
 * und faellt eine Datei aus, greift der Systemstack in den Font-Tokens.
 *
 * Bebas Neue hat keine Variable-Achse und bleibt ein regulaerer 400er-Schnitt.
 *
 * Die Aufteilung in latin und latin-ext stammt aus der offiziellen Auslieferung:
 * latin-ext wird nur geladen, wenn wirklich ein Zeichen daraus vorkommt (z. B.
 * in osteuropaeischen Firmennamen).
 *
 * Quelle: offizielle Google-Fonts-Auslieferung, Lizenz SIL Open Font License 1.1.
 * Lizenztexte liegen als assets/fonts/OFL-Montserrat.txt und OFL-BebasNeue.txt bei.
 */
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/montserrat-variable-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/montserrat-variable-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Bebas Neue";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/bebas-neue-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Bebas Neue";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/bebas-neue-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * convi Portal – Custom-Login im convi-MEDIA-Design.
 * Restyled ausschliesslich wp-login.php (WordPress-Core-Auth unveraendert).
 * Verwendet dieselben Design-Tokens wie das Portal (kein zweites Designsystem).
 */
:root {
	--cp-font-heading: "Bebas Neue", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	--cp-font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--cp-bg: #070b16;
	--cp-bg-soft: #0d1424;
	--cp-bg-deep: #030711;

	--cp-text: #f7f9ff;
	--cp-text-soft: #c9d3e8;
	--cp-text-muted: #8f9bb4;

	--cp-primary: #2f7cff;
	--cp-primary-soft: rgba(47, 124, 255, 0.16);
	--cp-secondary: #7c3cff;
	--cp-accent: #00d4ff;
	--cp-success: #35d399;
	--cp-danger: #ff6b7d;

	--cp-gradient-primary: linear-gradient(135deg, #2f7cff 0%, #7c3cff 58%, #00d4ff 100%);
	--cp-gradient-primary-hover: linear-gradient(135deg, #1556d8 0%, #6b2cff 48%, #00b8ee 100%);
	--cp-gradient-card: linear-gradient(155deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.028));
	--cp-gradient-dark:
		radial-gradient(circle at 16% 4%, rgba(47, 124, 255, 0.26), transparent 36%),
		radial-gradient(circle at 84% 14%, rgba(124, 60, 255, 0.18), transparent 34%),
		radial-gradient(circle at 52% 96%, rgba(0, 212, 255, 0.10), transparent 38%),
		#070b16;

	--cp-border: rgba(255, 255, 255, 0.10);
	--cp-border-strong: rgba(255, 255, 255, 0.20);
	--cp-border-hairline: rgba(255, 255, 255, 0.06);

	--cp-shadow-soft: 0 24px 70px rgba(2, 5, 14, 0.48);
	--cp-shadow-button: 0 10px 26px rgba(47, 124, 255, 0.26);

	/* Derselbe Aktionsradius wie im Kundenportal – ein Wert fuer beide Seiten. */
	--cp-radius-action: 12px;
	--cp-radius-sm: 12px;
	--cp-radius-md: 16px;
	--cp-radius-lg: 22px;
	--cp-radius-xl: 28px;
	--cp-radius-full: 999px;

	--cp-transition: 200ms cubic-bezier(0.32, 0.72, 0.24, 1);
	--cp-tap: 44px;
	--cp-card-w: 408px;
}

html { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }

body.login.convi-login {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 24px);
	padding-top: max(clamp(20px, 4vw, 40px), env(safe-area-inset-top));
	padding-bottom: max(clamp(20px, 4vw, 40px), env(safe-area-inset-bottom));
	box-sizing: border-box;
	background: var(--cp-gradient-dark);
	background-attachment: fixed;
	color: var(--cp-text);
	font-family: var(--cp-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* Zentraler Login-Stack. */
body.login.convi-login #login {
	width: 100%;
	max-width: var(--cp-card-w);
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/* Logo (extern, convi.media Light-Logo). */
.convi-login #login h1 {
	margin: 0 0 10px;
	padding: 0;
}
.convi-login #login h1 a {
	display: block;
	width: 100%;
	height: 56px;
	margin: 0;
	background-image: url("https://portal.convi.media/wp-content/uploads/2026/08/convi.media-Logo-Light.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	text-indent: -9999px;
	overflow: hidden;
}

/* Untertitel unter dem Logo. */
.convi-login-sub {
	margin: 0 0 22px;
	text-align: center;
	color: var(--cp-text-soft);
	font-size: 0.95rem;
	letter-spacing: 0.02em;
}

/* Glass-Card (Login, Lost-Password, Reset). */
.convi-login #loginform,
.convi-login #lostpasswordform,
.convi-login #resetpassform {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: clamp(22px, 4vw, 30px) clamp(20px, 4vw, 28px) clamp(20px, 3.4vw, 26px);
	background: var(--cp-gradient-card), rgba(13, 20, 36, 0.62);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-xl);
	box-shadow: var(--cp-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	-webkit-backdrop-filter: blur(22px) saturate(140%);
	backdrop-filter: blur(22px) saturate(140%);
	overflow: hidden;
}

.convi-login form label {
	display: block;
	color: var(--cp-text-soft);
	font-weight: 600;
	font-size: 0.86rem;
	line-height: 1.5;
	letter-spacing: 0.01em;
}

.convi-login form input[type="text"],
.convi-login form input[type="email"],
.convi-login form input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	min-height: 50px;
	margin: 8px 0 16px;
	padding: 13px 15px;
	border-radius: var(--cp-radius-action);
	border: 1px solid var(--cp-border-strong);
	background: rgba(255, 255, 255, 0.05);
	color: var(--cp-text);
	font-family: var(--cp-font-body);
	font-size: 1rem;
	line-height: 1.35;
	transition: border-color var(--cp-transition), background var(--cp-transition), box-shadow var(--cp-transition);
}
.convi-login form input[type="text"]::placeholder,
.convi-login form input[type="email"]::placeholder,
.convi-login form input[type="password"]::placeholder { color: rgba(255, 255, 255, 0.42); }
.convi-login form input[type="text"]:focus,
.convi-login form input[type="email"]:focus,
.convi-login form input[type="password"]:focus {
	outline: none;
	border-color: rgba(0, 212, 255, 0.55);
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.12);
}

/* Passwort-Feld inkl. Core-Anzeigen/Verbergen-Button. */
.convi-login .wp-pwd { position: relative; }
.convi-login .wp-pwd input { padding-right: 3.25rem !important; }
.convi-login .wp-pwd button.wp-hide-pw {
	position: absolute;
	right: 5px;
	top: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	width: 40px;
	border-radius: var(--cp-radius-action);
	color: var(--cp-text-muted);
	background: transparent;
	border: 0;
	box-shadow: none;
	cursor: pointer;
	transition: color var(--cp-transition), background var(--cp-transition);
}
.convi-login .wp-pwd button.wp-hide-pw:hover { color: var(--cp-text); background: rgba(255, 255, 255, 0.07); }
.convi-login .wp-pwd button.wp-hide-pw .dashicons { color: inherit; }

/* Passwortstaerke (Reset-Seite). */
.convi-login #pass-strength-result {
	box-sizing: border-box;
	margin: 0 0 14px;
	padding: 10px 14px;
	border-radius: var(--cp-radius-sm);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--cp-border);
	color: var(--cp-text-soft);
	font-size: 0.85rem;
}
.convi-login .pw-weak { color: var(--cp-text-soft); font-size: 0.88rem; margin: 0 0 14px; }

/* Angemeldet bleiben. */
.convi-login #loginform .forgetmenot {
	margin: 0 0 18px;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 28px;
	font-size: 0.9rem;
	color: var(--cp-text-soft);
}
.convi-login #loginform .forgetmenot label { display: inline; font-weight: 500; cursor: pointer; }
.convi-login input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--cp-primary);
	cursor: pointer;
}

/* Primaerer Button (convi-Gradient). */
.convi-login #wp-submit,
.convi-login .submit .button-primary,
.convi-login input[type="submit"].button-primary {
	display: block;
	width: 100% !important;
	float: none !important;
	min-height: var(--cp-tap);
	margin: 2px 0 0;
	padding: 0.92rem 1.4rem;
	border: 1px solid transparent;
	border-radius: var(--cp-radius-action);
	background: var(--cp-gradient-primary);
	color: #fff;
	font-family: var(--cp-font-body);
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.15;
	text-shadow: none;
	box-shadow: var(--cp-shadow-button);
	cursor: pointer;
	transition: transform var(--cp-transition), box-shadow var(--cp-transition), background var(--cp-transition);
}
.convi-login #wp-submit:hover,
.convi-login #wp-submit:focus {
	background: var(--cp-gradient-primary-hover);
	transform: translateY(-2px);
	box-shadow: 0 18px 40px rgba(0, 212, 255, 0.22);
	outline: none;
}
.convi-login #wp-submit:active { transform: translateY(0) scale(0.99); }
.convi-login #wp-submit:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 2px; }

/* Passwort vergessen (Sekundaerlink im Card-Bereich). */
.convi-login #nav {
	margin: 18px 0 0;
	padding: 0;
	text-align: center;
	text-shadow: none;
}
.convi-login #nav a {
	display: inline-block;
	padding: 8px 12px;
	color: var(--cp-text-muted);
	font-size: 0.9rem;
	transition: color var(--cp-transition);
}
.convi-login #nav a:hover { color: var(--cp-accent); }

/* Zurueck-zur-Seite/Branding-Texte entfernen. */
.convi-login #backtoblog { display: none; }

/* Meldungen/Fehler im convi-Design (kein wp-login-Look). */
.convi-login #login_error,
.convi-login .message,
.convi-login .notice {
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 16px;
	padding: 13px 16px;
	border-radius: var(--cp-radius-md);
	border: 1px solid var(--cp-border);
	border-left: 0;
	background: rgba(255, 255, 255, 0.05);
	box-shadow: none;
	color: var(--cp-text-soft);
	font-size: 0.9rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
}
.convi-login #login_error {
	background: rgba(255, 107, 125, 0.09);
	border: 1px solid rgba(255, 107, 125, 0.32);
	color: var(--cp-text);
}
.convi-login .message {
	background: rgba(53, 211, 153, 0.09);
	border: 1px solid rgba(53, 211, 153, 0.30);
	color: var(--cp-text);
}
.convi-login a { color: var(--cp-text-soft); }

/* Rechtslinks unter der Card. */
.convi-login-links {
	width: 100%;
	max-width: var(--cp-card-w);
	margin: 22px auto 0;
	text-align: center;
	color: var(--cp-text-muted);
	font-size: 0.84rem;
	letter-spacing: 0.02em;
}
.convi-login-links a {
	display: inline-block;
	padding: 6px 4px;
	color: var(--cp-text-muted);
	text-decoration: none;
	transition: color var(--cp-transition);
}
.convi-login-links a:hover { color: var(--cp-accent); }
.convi-login-links .sep { margin: 0 8px; opacity: 0.5; }

/* Sprachwahl/Privacy-Link ausblenden (kein Zusatztext). */
.convi-login #language-switcher,
.convi-login .privacy-policy-page-link { display: none; }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	body.login.convi-login { padding: 24px 18px; }
	.convi-login #login h1 a { height: 48px; }
	.convi-login #loginform,
	.convi-login #lostpasswordform,
	.convi-login #resetpassform { border-radius: var(--cp-radius-lg); }
	.convi-login-sub { margin-bottom: 18px; font-size: 0.92rem; }
}

@media (max-width: 430px) {
	body.login.convi-login { padding: 20px 14px; justify-content: flex-start; padding-top: 8vh; }
	body.login.convi-login #login { max-width: 100%; }
	.convi-login-links { max-width: 100%; }
	.convi-login #login h1 a { height: 44px; }
	.convi-login #loginform,
	.convi-login #lostpasswordform,
	.convi-login #resetpassform {
		padding: 20px 16px 18px;
		border-radius: var(--cp-radius-md);
	}
	/* 16px verhindert das Auto-Zoom von iOS beim Fokus. */
	.convi-login form input[type="text"],
	.convi-login form input[type="email"],
	.convi-login form input[type="password"] { font-size: 16px; min-height: var(--cp-tap); }
	.convi-login-links .sep { margin: 0 6px; }
}

@media (prefers-reduced-motion: reduce) {
	.convi-login #wp-submit { transition: none; }
	.convi-login #wp-submit:hover,
	.convi-login #wp-submit:focus,
	.convi-login #wp-submit:active { transform: none; }
}