/* Anmeldeseite im Stil des Portals. Überschreibt die Standardgestaltung von wp-login.php. */

@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-latin-wght.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-latin-wght.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

body.login { background: #FAFAF7; color: #141820; font: 400 17px/1.55 "Source Serif 4", Georgia, serif; display: flex; flex-direction: column; min-height: 100vh; }
/* WordPress setzt html und body auf 100 % Höhe; ohne das wird der Streifen auf kleinen Bildschirmen gestaucht und das Logo rutscht heraus. */
body.login { height: auto; }
body.login > *, body.login::before { flex-shrink: 0; }
body.login::before { content: ""; display: block; height: 92px; background: linear-gradient(to bottom, #0F2F5C 0 80px, #7DB8E8 80px 85px, #C8231B 85px 87px, #0F2F5C 87px 92px); }
::selection { background: #7DB8E8; color: #141820; }
#login { width: min(440px, calc(100% - 32px)); padding: 0; margin: -72px auto 0; }
.login h1 a { background: url("../img/cai42-logo-farbig-negativ.svg") no-repeat left center / contain; width: 120px; height: 42px; margin: 0 0 54px; }
.anmeldung-titel { margin-bottom: 24px; text-align: left; }
.anmeldung-titel h1 { font: 700 2.4rem/1.1 "Space Grotesk", Arial, sans-serif; letter-spacing: -0.02em; margin: 0 0 8px; text-align: left; }
.anmeldung-titel p { color: #565A62; margin: 0; }
.login form { background: #FFFFFF; border: 2px solid #141820; box-shadow: none; padding: 26px 26px 24px; margin-top: 0; border-radius: 0; }
.login label { font: 600 15px "Space Grotesk", Arial, sans-serif; color: #141820; }
.login form .input, .login input[type=text], .login input[type=password] { font: 400 17px "Source Serif 4", Georgia, serif; border: 1.5px solid #141820; border-radius: 0; padding: 8px 12px; background: #FFF; box-shadow: none; margin-top: 6px; }
.login form .input:focus, .login input:focus { outline: 3px solid #7DB8E8; outline-offset: 0; box-shadow: none; border-color: #141820; }
.login .button-primary, .anmeldung-knopf { font: 600 15px "Space Grotesk", Arial, sans-serif; background: #0F2F5C; border: 2px solid #0F2F5C; border-radius: 0; color: #FFF; padding: 8px 18px; min-height: 0; line-height: 1.4; text-shadow: none; box-shadow: none; text-decoration: none; display: inline-block; }
.login .button-primary:hover, .login .button-primary:focus, .anmeldung-knopf:hover { background: #0B2347; border-color: #0B2347; }
.login .button.wp-hide-pw { color: #0F2F5C; }
.login .forgetmenot label { font-weight: 500; }
.login input[type=checkbox] { border: 1.5px solid #141820; border-radius: 0; box-shadow: none; }
.login input[type=checkbox]:checked { background: #0F2F5C; border-color: #0F2F5C; }
.login input[type=checkbox]:checked::before { filter: brightness(0) invert(1); }
.login #nav, .login #backtoblog { padding: 0; margin: 16px 0 0; font: 500 15px "Space Grotesk", Arial, sans-serif; }
.login #nav a, .login #backtoblog a, .anmeldung-fuss a { color: #1B4F94; text-decoration: underline; text-underline-offset: .18em; }
.login .message, .login .notice, .login #login_error { border: 1.5px solid #0F2F5C; border-left-width: 1.5px; background: #E8F1FB; box-shadow: none; font: 500 15px/1.45 "Space Grotesk", Arial, sans-serif; color: #0F2F5C; padding: 12px 16px; }
.login #login_error { border-color: #C83232; background: #FBECEC; color: #6E1515; }
.anmeldung-demo { width: min(440px, calc(100% - 32px)); margin: 36px auto 0; border-top: 2px solid #141820; padding-top: 18px; }
.anmeldung-demo h2 { font: 700 1.35rem "Space Grotesk", Arial, sans-serif; margin: 0 0 6px; }
.anmeldung-demo p { margin: 0 0 14px; color: #565A62; }
.anmeldung-fuss { width: min(440px, calc(100% - 32px)); margin: auto auto 0; padding: 40px 0 28px; display: flex; gap: 18px; font: 500 14px "Space Grotesk", Arial, sans-serif; }
.login .privacy-policy-page-link { display: none; }
:focus-visible { outline: 3px solid #7DB8E8; outline-offset: 2px; }