/*
 * punkt.de Branding für Frappes Web-Seiten außerhalb der LMS-Oberfläche
 * (Login, Passwort zurücksetzen, …). Eingebunden über web_include_css.
 */
@font-face {
	font-family: 'Patron';
	font-weight: 351 450;
	font-display: swap;
	src: url('/assets/punkt_lms/fonts/Patron-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Patron';
	font-weight: 451 700;
	font-display: swap;
	src: url('/assets/punkt_lms/fonts/Patron-Medium.woff2') format('woff2');
}

@font-face {
	font-family: 'Patron';
	font-weight: 701 900;
	font-display: swap;
	src: url('/assets/punkt_lms/fonts/Patron-Black.woff2') format('woff2');
}

@font-face {
	font-family: 'IBMPlexMono';
	font-weight: 400;
	font-display: swap;
	src: url('/assets/punkt_lms/fonts/IBMPlexMono-Regular.woff2') format('woff2');
}

body {
	font-family: 'Patron', 'Calibri', 'Helvetica Neue', Arial, sans-serif;
}

/* SSO-Button (Klasse aus dem Provider-Namen "punkt.de" gebildet) als Hauptaktion */
.btn-login-option.btn-punkt\.de {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	/* !important: Frappes .btn-default-Regeln (Login-Seite) sind spezifischer */
	background-color: #e4003a !important;
	border-color: #e4003a !important;
	color: #fff !important;
	font-family: 'IBMPlexMono', ui-monospace, monospace;
	border-radius: 0 !important;
}

.btn-login-option.btn-punkt\.de:hover,
.btn-login-option.btn-punkt\.de:focus {
	background-color: #c80033 !important;
	border-color: #c80033 !important;
	color: #fff !important;
}

.btn-login-option.btn-punkt\.de img {
	height: 16px;
	width: 16px;
	/* Bildzeichen weiß auf rotem Button */
	filter: brightness(0) invert(1);
}

/* ------------------------------------------------------------------------
 * Login-Seite: geteilte Fläche. Links das punkt.de-Bildzeichen übergroß und
 * angeschnitten auf warmem Grau, rechts eine ruhige Spalte mit Logo, Titel,
 * einem Satz und dem SSO-Button. Nur CSS, damit alle Login-Varianten von
 * Frappe (auch der Passwort-Fallback ohne SSO) funktionsfähig bleiben.
 * --------------------------------------------------------------------- */

body[data-path='login'] {
	background: #ffffff;
	color: #212121;
}

/* Linke Fläche mit dem Bildzeichen (rein dekorativ, daher Pseudo-Element) */
body[data-path='login'] #page-login::before {
	content: '';
	position: fixed;
	inset: 0 auto 0 0;
	width: 50vw;
	background-color: #f6f5f3;
	background-image: url('/assets/punkt_lms/images/punkt-mark.svg');
	background-repeat: no-repeat;
	/* Zeichen fast so breit wie die Fläche, rechts und unten angeschnitten */
	background-size: 46vw auto;
	background-position: 7vw calc(100% + 7vw);
}

body[data-path='login'] #page-login .page-content-wrapper {
	margin-left: 50vw;
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding: 48px clamp(32px, 7vw, 160px);
}

body[data-path='login'] #page-login main.container {
	max-width: clamp(360px, 26vw, 520px);
	margin: 0;
	padding: 0;
}

body[data-path='login'] .page-card {
	/* Frappe setzt auf Mobilgeräten min-height: 100vh – hier stünde sie zusätzlich zum Band */
	min-height: 0;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

body[data-path='login'] .page-card-head {
	text-align: left;
	padding: 0;
	margin-bottom: 40px;
}

body[data-path='login'] .page-card-head .app-logo {
	display: block;
	height: clamp(28px, 1.9vw, 40px);
	width: auto;
	margin: 0 0 clamp(64px, 6vw, 120px);
}

body[data-path='login'] .page-card-head h4 {
	font-family: 'Patron', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 900;
	font-size: clamp(40px, 3.4vw, 72px);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: #212121;
	margin: 0 0 16px;
}

body[data-path='login'] .page-card-subtitle {
	font-size: clamp(17px, 1.15vw, 22px);
	line-height: 1.5;
	color: #73777d;
	max-width: 30ch;
	margin: 0;
}

body[data-path='login'] .page-card-actions,
body[data-path='login'] .social-logins {
	padding: 0;
	margin: 0;
	text-align: left;
}

body[data-path='login'] .btn-login-option.btn-punkt\.de {
	height: clamp(56px, 3.4vw, 68px);
	font-size: clamp(15px, 0.95vw, 18px) !important;
	gap: 12px;
}

/* Bildzeichen steht auf der Login-Seite schon groß links und im Logo */
body[data-path='login'] .btn-login-option.btn-punkt\.de img {
	display: none;
}

body[data-path='login'] .btn-login-option.btn-punkt\.de:focus-visible {
	outline: 3px solid #212121;
	outline-offset: 3px;
}

/* Schmale Bildschirme: Fläche wird zum Band oben */
@media (max-width: 767px) {
	body[data-path='login'] #page-login::before {
		position: absolute;
		inset: 0 0 auto 0;
		width: auto;
		height: 34vh;
		background-size: 78vw auto;
		background-position: 12vw calc(100% + 14vw);
	}

	body[data-path='login'] #page-login .page-content-wrapper {
		margin-left: 0;
		min-height: 0;
		display: block;
		padding: calc(34vh + 40px) 24px 48px;
	}

	body[data-path='login'] .page-card-head .app-logo {
		margin-bottom: 48px;
	}

	body[data-path='login'] .page-card-head h4 {
		font-size: 36px;
	}
}