@charset "UTF-8"; @font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/chakra-petch-latin-700.woff2") format("woff2"); } @font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/geist-latin-400.woff2") format("woff2"); } @font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/geist-latin-500.woff2") format("woff2"); } @font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/geist-latin-600.woff2") format("woff2"); } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/geist-mono-latin-500.woff2") format("woff2"); } :root { --bg: #0a0b0d; --flaeche: #121417; --flaeche-2: #1a1d21; --flaeche-3: #22262c; --linie: rgba(255, 255, 255, .08); --linie-stark: rgba(255, 255, 255, .16); --text: #eceef1; --text-leise: #9aa1ab; --text-schwach: #878e99; --akzent: #e0a83e; --akzent-hell: #f0c46a; --akzent-text: #0a0b0d; --fehler: #ff9b9b; --erfolg: #8be0b0; --f-display: "Chakra Petch", "Segoe UI", system-ui, sans-serif; --f-text: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif; --f-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --gutter: clamp(20px, 4vw, 48px); --schatten-hoch: 0 40px 90px -30px rgba(0, 0, 0, .85); --takt: .2s; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--f-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, p { margin: 0; } img { max-width: 100%; } a { color: var(--akzent); } button { font: inherit; } :focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; } ::selection { background: var(--akzent); color: var(--akzent-text); } .login-page { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 40px var(--gutter); background: radial-gradient(900px 620px at 85% 8%, rgba(224, 168, 62, .07), transparent 70%), var(--bg); } .login-wrapper { width: 100%; max-width: 1120px; } .login-seite { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 96px); align-items: center; } .login-claim { font: 700 clamp(40px, 4.6vw, 64px)/1.02 var(--f-display); text-transform: uppercase; letter-spacing: -.005em; } .login-claim span { color: var(--akzent); } .login-claim-sub { margin-top: 18px; color: var(--text-leise); font: 500 14px/1.5 var(--f-mono); } .login-faecher { position: relative; max-width: 460px; height: 380px; margin-top: 48px; } .login-faecher img { position: absolute; width: 190px; aspect-ratio: 5 / 8; height: auto; object-fit: cover; object-position: top center; box-shadow: var(--schatten-hoch); } .login-faecher .a { left: 0; top: 40px; transform: rotate(-7deg); } .login-faecher .c { left: 232px; top: 40px; transform: rotate(7deg); } .login-faecher .b { left: 110px; top: 0; width: 212px; z-index: 1; } .login-spalte { width: 100%; max-width: 440px; justify-self: end; } .login-logo-wrap { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px; color: var(--text); text-decoration: none; } .login-logo { display: block; width: 40px; height: 40px; } .login-site-name { font: 700 26px/1 var(--f-display); } .login-card { background: var(--flaeche); border: 1px solid var(--linie); border-top: 2px solid var(--akzent); padding: clamp(26px, 3vw, 40px); box-shadow: var(--schatten-hoch); } .login-heading { margin-bottom: 12px; font: 700 clamp(26px, 3vw, 34px)/1.08 var(--f-display); text-transform: uppercase; } .login-heading span { color: var(--akzent); } .login-subline { margin-bottom: 28px; color: var(--text-leise); font-size: 15px; line-height: 1.55; } .field-group { margin-bottom: 18px; } .field-group label { display: block; margin-bottom: 8px; color: var(--text-leise); font: 500 12px/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; } .login-card input { width: 100%; padding: 13px 14px; background: var(--bg); border: 1px solid var(--linie-stark); border-radius: 0; color: var(--text); font: 16px/1.4 var(--f-text); transition: border-color var(--takt), box-shadow var(--takt); } .login-card input::placeholder { color: var(--text-schwach); } .login-card input:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent); } .pw-field { position: relative; } .pw-field input { padding-right: 52px; } .pw-toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: none; border: 0; color: var(--text-leise); cursor: pointer; transition: color var(--takt); } .pw-toggle:hover { color: var(--akzent); } .pw-toggle svg { display: block; width: 20px; height: 20px; } .login-submit-btn { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; margin: 10px 0 6px; padding: 0 36px; background: none; border: 0; color: var(--akzent-text); font: 600 15px/1.1 var(--f-text); cursor: pointer; transition: transform var(--takt), color var(--takt); } .login-submit-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--akzent); clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); transition: background-color var(--takt); } .login-submit-btn:hover::before { background: var(--akzent-hell); } .login-submit-btn:active { transform: translateY(1px); } .login-submit-btn:disabled { color: var(--text-leise); cursor: not-allowed; transform: none; } .login-submit-btn:disabled::before { background: var(--flaeche-3); } .login-secondary-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; margin-top: 10px; padding: 0 16px; background: transparent; border: 1px solid var(--linie-stark); color: var(--text); font: 600 14px/1.2 var(--f-text); cursor: pointer; transition: color var(--takt), border-color var(--takt); } .login-secondary-btn:hover { color: var(--akzent); border-color: var(--akzent); } .login-secondary-btn:disabled { opacity: .6; cursor: not-allowed; } .login-secondary-btn.login-textlink { width: auto; min-height: 40px; margin: 0 auto; padding: 0 8px; border: 0; color: var(--text-leise); font-weight: 500; } .login-secondary-btn.login-textlink:hover { color: var(--akzent); } .status-message { min-height: 1.4em; margin: 10px 0; color: var(--text-leise); font-size: 14px; line-height: 1.5; text-align: center; } .status-message:empty { min-height: 0; margin: 4px 0; } .status-message.error { color: var(--fehler); } .status-message.success { color: var(--erfolg); } .status-message.loading { color: var(--text-leise); } .login-back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 18px; color: var(--text-leise); font-size: 14px; text-decoration: none; transition: color var(--takt); } .login-back-link:hover { color: var(--text); } .login-vertrag { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .login-vertrag a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--linie-stark); color: var(--text-leise); font-size: 14px; text-decoration: none; transition: color var(--takt), border-color var(--takt); } .login-vertrag a:hover { color: var(--akzent); border-color: var(--akzent); } #login-loader { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-leise); font: 500 13px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; } @media (max-width: 900px) { .login-page { align-items: flex-start; padding-top: max(24px, 6vh); } .login-seite { grid-template-columns: minmax(0, 1fr); } .login-schau { display: none; } .login-spalte { justify-self: center; } } @media (max-width: 480px) { .login-page { padding: 24px 16px 32px; } .login-card { padding: 24px 20px; } .login-logo-wrap { margin-bottom: 20px; } .login-site-name { font-size: 22px; } .login-logo { width: 34px; height: 34px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }