@font-face { font-family: Barlow; src: url('../theme/fonts/barlow-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Barlow; src: url('../theme/fonts/barlow-semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Barlow; src: url('../theme/fonts/barlow-extrabold.woff2') format('woff2'); font-weight: 800; font-display: swap; }
:root { --red: #df2020; --background: #0f0e13; --panel: #18171f; --muted: #a0a0a0; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { min-width: 0; margin: 0; background: var(--background); color: var(--muted); font-family: Barlow, "Segoe UI", sans-serif; }
.login-shell { display: grid; grid-template-columns: minmax(28rem, 1.05fr) minmax(30rem, .95fr); min-height: 100vh; }
.login-story { position: relative; display: flex; flex-direction: column; isolation: isolate; overflow: hidden; min-height: 100vh; padding: clamp(2rem, 5vw, 5rem); background: linear-gradient(rgb(18 17 23 / 90%), rgb(18 17 23 / 90%)), url('../theme/images/hero-background.webp') center / cover no-repeat; color: #fff; }
.login-story::before { content: ''; position: absolute; z-index: -1; inset: 0; opacity: .25; background-image: linear-gradient(rgb(255 255 255 / 3%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 3%) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, #000, transparent 78%); }
.login-brand { display: inline-block; width: min(15rem, 55%); }
.login-brand img, .login-mobile-brand img { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 30px rgb(0 0 0 / 35%)); }
.login-story-content { width: min(43rem, 92%); margin: auto 0; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem; padding: .3rem .85rem .3rem .65rem; border: 1px solid #2c2b36; border-radius: 999px; background: #1b1a23; color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .16em; line-height: 1.5; text-transform: uppercase; }
.eyebrow::before { content: ""; flex: none; width: 8px; height: 12px; border-radius: 1px; background: #f5b800; box-shadow: inset -2px 0 0 #c98a00, inset 2px 0 0 #ffd84d; }
.login-story h1 { max-width: 40rem; margin: 0 0 1.5rem; color: #fff; font-size: clamp(2.8rem, 5vw, 5.4rem); font-weight: 800; letter-spacing: -.045em; line-height: .98; }
.login-story-content > p { max-width: 36rem; margin: 0 0 2rem; color: rgb(255 255 255 / 72%); font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.65; }
.login-story ul { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.login-story li { position: relative; padding-left: 1.7rem; color: rgb(255 255 255 / 88%); font-size: .95rem; font-weight: 600; }
.login-story li::before { content: ''; position: absolute; top: .35rem; left: 0; width: .72rem; height: .72rem; border: 2px solid #ff4a4a; box-shadow: 3px 3px 0 rgb(223 32 32 / 28%); }
.login-story-footer { margin: 2rem 0 0; color: rgb(255 255 255 / 50%); font-size: .82rem; letter-spacing: .06em; }
.login-panel { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 100vh; padding: 3rem clamp(2rem, 6vw, 6rem); background: var(--panel); }
.login-mobile-brand { display: none; }
.login-box { width: 100%; max-width: 31rem; }
.login-intro { margin-bottom: 2.2rem; }
.login-intro .eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem; padding: .3rem .85rem .3rem .65rem; border: 1px solid #2c2b36; border-radius: 999px; background: #1b1a23; color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .16em; line-height: 1.5; text-transform: uppercase; }
.eyebrow::before { content: ""; flex: none; width: 8px; height: 12px; border-radius: 1px; background: #f5b800; box-shadow: inset -2px 0 0 #c98a00, inset 2px 0 0 #ffd84d; }
.login-intro h2 { margin: 0 0 .8rem; color: #fff; font-size: clamp(2.2rem, 3.8vw, 3.35rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.login-intro p { margin: 0; font-size: 1rem; line-height: 1.6; }
label { display: block; margin-bottom: .55rem; color: #fff; font-size: .88rem; font-weight: 600; }
.input-wrap { position: relative; }
.login-input { width: 100%; min-height: 3.5rem; margin: 0 0 1.25rem; padding: .85rem 1rem; border: 1px solid rgb(255 255 255 / 14%); border-radius: .75rem; outline: 0; background: rgb(15 14 19 / 82%); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%); font: inherit; transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
.login-input:focus { border-color: #ef4444; background: var(--background); box-shadow: 0 0 0 3px rgb(223 32 32 / 20%); }
.input-wrap .login-input { padding-right: 3.5rem; }
.password-toggle { position: absolute; top: .35rem; right: .35rem; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; padding: 0; border: 0; background: transparent; color: rgb(255 255 255 / 62%); cursor: pointer; }
.password-toggle:hover, .password-toggle:focus { color: #fff; }
.password-toggle svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.remember { display: inline-flex; align-items: center; gap: .55rem; margin: 0; color: rgb(255 255 255 / 68%); cursor: pointer; }
.remember input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--red); }
.submit { width: 100%; min-height: 3.5rem; margin-top: 1.4rem; padding: .85rem 1.4rem; border: 0; border-radius: .75rem; background: #df2020; color: #fff; box-shadow: 0 4px 0 #8e1515; font: 800 .95rem Barlow, sans-serif; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease; }
.submit:hover, .submit:focus { background: #f23838; box-shadow: 0 4px 0 #8e1515; transform: translateY(-2px); }
.login-error { margin: -.7rem 0 1.1rem; padding: .8rem 1rem; border: 1px solid rgb(223 32 32 / 35%); border-left: 3px solid var(--red); border-radius: .65rem; background: rgb(223 32 32 / 10%); color: #fff; font-size: .88rem; }
.login-status { margin: 0 0 1.4rem; padding: .8rem 1rem; border: 1px solid rgb(74 222 128 / 30%); border-left: 3px solid #4ade80; border-radius: .65rem; background: rgb(74 222 128 / 10%); color: #fff; font-size: .88rem; }
.login-links, .back-link, .privacy-link { margin: 1.45rem 0 0; color: rgb(255 255 255 / 24%); text-align: center; font-size: .86rem; }
.back-link { margin-top: .9rem; }
.privacy-link { margin-top: 1.8rem; font-size: .78rem; }
.login-links a, .back-link a, .privacy-link a { color: rgb(255 255 255 / 68%); font-weight: 600; text-decoration: none; transition: color 160ms ease; }
.login-links a:hover, .back-link a:hover, .privacy-link a:hover { color: #fff; }
@media (max-width: 960px) { .login-shell { display: block; background: linear-gradient(rgb(15 14 19 / 94%), rgb(15 14 19 / 94%)), url('../theme/images/hero-background.webp') center / cover fixed; } .login-story { display: none; } .login-panel { flex-direction: column; min-height: 100vh; padding: 2.5rem 1.25rem; background: transparent; } .login-mobile-brand { display: block; width: 11rem; margin: 0 auto 2.5rem; } .login-box { padding: 1.6rem; border: 1px solid rgb(255 255 255 / 12%); border-radius: 1.25rem; background: rgb(24 23 31 / 88%); box-shadow: 0 24px 60px rgb(0 0 0 / 45%); backdrop-filter: blur(18px); } }
@media (max-width: 480px) { .login-panel { justify-content: flex-start; padding: 1.5rem 1rem 2rem; } .login-mobile-brand { width: 9rem; margin-bottom: 1.5rem; } .login-box { padding: 1.35rem; border-radius: 1rem; } .login-intro { margin-bottom: 1.6rem; } .login-intro h2 { font-size: 2rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }

/* Ergänzungen für weitere Auth-Seiten (Passwort festlegen/vergessen, Registrieren, E-Mail bestätigen) */
.field-hint { margin: -.25rem 0 .6rem; color: rgb(255 255 255 / 55%); font-size: .82rem; line-height: 1.5; }
.auth-account-email { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.6rem; padding: .85rem 1rem; border: 1px solid rgb(255 255 255 / 12%); border-radius: .75rem; background: rgb(15 14 19 / 60%); color: #fff; font-size: .92rem; }
.auth-account-email span { display: grid; place-items: center; flex: 0 0 2.2rem; height: 2.2rem; border-radius: 50%; background: rgb(223 32 32 / 18%); color: #ff6b6b; font-weight: 800; }
.auth-account-email small { display: block; color: rgb(255 255 255 / 55%); font-size: .75rem; }
.auth-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.auth-checkbox { display: flex; align-items: flex-start; gap: .65rem; margin: .2rem 0 0; color: rgb(255 255 255 / 72%); font-weight: 400; line-height: 1.5; cursor: pointer; }
.auth-checkbox input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; accent-color: var(--red); }
.auth-checkbox a { color: #fff; }
.auth-errors { margin: 0 0 1.2rem; padding: .8rem 1rem .8rem 2rem; border: 1px solid rgb(223 32 32 / 35%); border-left: 3px solid var(--red); border-radius: .65rem; background: rgb(223 32 32 / 10%); color: #fff; font-size: .88rem; }
.auth-errors li + li { margin-top: .25rem; }
.submit--secondary { margin-top: 0; background: transparent; border: 1px solid rgb(255 255 255 / 18%); box-shadow: none; }
.submit--secondary:hover, .submit--secondary:focus { background: rgb(255 255 255 / 6%); box-shadow: none; }
.auth-text { margin: 0 0 1.4rem; line-height: 1.65; }
.auth-text strong { color: #fff; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }