/* Vertriebskraftwerk-Design für die Authelia-Anmeldeseite (Authelia 4.39, Tailwind-Oberfläche) */
@import url("/login-design/schriften.css");

:root, .light, html.light, body {
	--primary: #D51619 !important;
	--primary-foreground: #FFFFFF !important;
	--ring: #252B2F !important;
	--foreground: #252B2F !important;
	--background: #F6F5F2 !important;
	--input: #cfd3d5 !important;
	--radius: 4px !important;
}

html, body, #root { background: #F6F5F2 !important; }
body { color: #252B2F; font-family: Inter, Arial, sans-serif !important; hyphens: manual; }
#root, #root * { font-family: Inter, Arial, sans-serif; }

/* Linke Bildseite: Toni + Claim */
body::before {
	content: "";
	position: fixed; inset: 0 auto 0 0; width: 46vw; z-index: 0;
	background:
		linear-gradient(to top, rgba(37,43,47,.94) 0%, rgba(37,43,47,.55) 32%, rgba(37,43,47,0) 60%),
		url("/login-design/toni.jpg") center 20% / cover no-repeat;
}
body::after {
	content: "Aus Service\A wird Vertrieb.";
	white-space: pre;
	position: fixed; left: 4.5vw; bottom: 10vh; z-index: 1;
	color: #FFFFFF;
	font: 700 clamp(30px, 3.2vw, 50px)/1.12 Montserrat, Arial, sans-serif;
	letter-spacing: -.01em;
	padding-top: 22px;
	background: linear-gradient(#D51619, #D51619) left top / 56px 4px no-repeat;
}

/* Rechte Seite: Formular */
#root { position: relative; z-index: 2; margin-left: 46vw; min-height: 100vh; }
#first-factor-stage, #root [id$="-stage"] { min-height: 92vh !important; text-align: left !important; }
#first-factor-stage > div { max-width: 420px !important; padding: 0 24px !important; }
#root img[alt="Logo"] { width: 260px !important; max-width: 100%; height: auto; margin: 0 0 36px !important; }
#root h5, #root h4, #root h3 {
	font: 700 32px/1.15 Montserrat, Arial, sans-serif !important;
	color: #252B2F !important; text-align: left; text-wrap: balance; margin-bottom: 4px;
}
#root h5::after {
	content: "Melde dich an, um deine Apps zu öffnen.";
	display: block; margin-top: 10px;
	font: 400 15px/1.5 Inter, Arial, sans-serif; color: #5d666c; text-wrap: pretty;
}

#root input[data-slot="floating-input"] {
	border-radius: 4px !important; background: #FFFFFF !important; border-color: #cfd3d5 !important; color: #252B2F;
}
#root input[data-slot="floating-input"]:focus { border-color: #252B2F !important; box-shadow: 0 0 0 1px #252B2F !important; }
#root input[data-slot="floating-input"] + label { color: #5d666c !important; }
#root input[data-slot="floating-input"]:focus + label { color: #252B2F !important; }

#root [data-slot="checkbox"] { border-radius: 2px !important; border-color: #9aa2a7 !important; }
#root [data-slot="checkbox"][data-checked], #root [data-slot="checkbox"][aria-checked="true"] {
	background: #D51619 !important; border-color: #D51619 !important; color: #FFFFFF !important;
}

#root button[data-slot="button"][data-variant="default"], #sign-in-button {
	background: #D51619 !important; color: #FFFFFF !important;
	border-radius: 4px !important; box-shadow: none !important;
	height: 52px !important; font: 600 16px Inter, Arial, sans-serif !important;
	text-transform: none !important; letter-spacing: 0;
	transition: background .15s;
}
#root button[data-slot="button"][data-variant="default"]:hover, #sign-in-button:hover { background: #b31215 !important; }

#reset-password-button, #root .text-primary { color: #252B2F !important; text-decoration-color: #D51619 !important; }
#reset-password-button:hover { color: #D51619 !important; }

a[href*="authelia.com"] { display: none !important; }
#language-button { color: #252B2F; }

/* Tablet und Handy: Bild oben als Band, Formular darunter */
@media (max-width: 900px) {
	body::before { width: 100%; height: 240px; inset: 0 0 auto 0; position: absolute; background-position: center 18%; }
	body::after { position: absolute; top: 120px; bottom: auto; left: 16px; font-size: 28px; padding-top: 16px; }
	html, body { background: #F6F5F2 !important; }
	#root { margin-left: 0; padding-top: 240px; background: transparent !important; }
	#root > div { background: transparent !important; }
	#first-factor-stage, #root [id$="-stage"] { min-height: auto !important; padding: 32px 0 48px; }
	#first-factor-stage > div { padding: 0 16px !important; }
	#root img[alt="Logo"] { width: 220px !important; margin-bottom: 24px !important; }
	#root h5, #root h4, #root h3 { font-size: 26px !important; }
	#language-button { color: #252B2F; }
}