/* Einstiegsseiten (/login und Geschwister). * * Eigenes Blatt, nicht login.css: das trägt noch register, register_user, * password_reset und verify_2fa und arbeitet über nackte Element-Selektoren * (form, input, .modal). Ein Umbau dort hätte vier Seiten mitgerissen, die * niemand angeschaut hat. Diese Datei setzt stattdessen die Werte aus * style.css fort — DM Sans, --primary-color, Haarlinien statt Schatten, * Radius 8/14 — und die anderen vier können nachziehen, wenn sie dran sind. * * style.css macht den zum Flex-Container mit overflow:hidden, weil es * für die App-Hülle geschrieben ist. Hier ist die Seite die Hülle, also wird * das gleich zu Beginn zurückgenommen. */ :root { --auth-hairline: rgba(6, 3, 20, 0.10); --auth-hairline-strong: rgba(6, 3, 20, 0.18); --auth-mute: #6e6e73; --auth-faint: #a8a8ad; --auth-ink: #060314; --auth-panel: #050b1f; --auth-danger: #ff453a; --auth-ok: #0a8a4a; --auth-ease: cubic-bezier(0.22, 1, 0.36, 1); } body.auth-body { display: block; height: auto; min-height: 100vh; overflow: auto; background-color: #ffffff; color: var(--auth-ink); -webkit-font-smoothing: antialiased; } .auth-page { display: flex; min-height: 100vh; } /* ---------------------------------------------------------------- Formular */ .auth-side { width: 46%; min-width: 480px; flex: none; display: flex; flex-direction: column; padding: 44px 0 32px; } .auth-side-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 clamp(32px, 5vw, 72px); } .auth-wordmark { height: 26px; width: auto; display: block; } .auth-side-body { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; padding: 40px clamp(32px, 5vw, 72px); } .auth-form { width: 100%; max-width: 396px; display: flex; flex-direction: column; gap: 22px; } .auth-head { display: flex; flex-direction: column; gap: 8px; } .auth-head h1 { font-size: 34px; font-weight: 500; letter-spacing: -0.024em; line-height: 1.12; margin: 0; } .auth-head p { font-size: 15px; color: var(--auth-mute); line-height: 1.5; margin: 0; } .auth-fields { display: flex; flex-direction: column; gap: 16px; } .auth-field { display: flex; flex-direction: column; gap: 7px; } .auth-field > label { font-size: 13px; font-weight: 500; color: var(--auth-mute); } /* Der sichtbare Rahmen sitzt auf dem Wrapper, nicht auf dem — nur so * können Symbol, Feld und Auge in einer Zeile liegen und der Fokusring das * Ganze umfassen. Das echte Feld darunter ist rahmenlos. */ .auth-control { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1px solid var(--auth-hairline); border-radius: 8px; background: #ffffff; color: var(--auth-mute); transition: border-color 180ms ease, box-shadow 180ms ease; } .auth-control:hover { border-color: var(--auth-hairline-strong); } .auth-control:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(2, 125, 253, 0.12); } .auth-control.is-invalid { border-color: var(--auth-danger); box-shadow: 0 0 0 3px rgba(255, 69, 58, 0.10); } .auth-control > .sp-icon { width: 18px; height: 18px; flex: none; fill: currentColor; } .auth-control input { flex-grow: 1; min-width: 0; border: 0; outline: 0; padding: 0; margin: 0; background: transparent; font-family: inherit; font-size: 15px; color: var(--auth-ink); } .auth-control input::placeholder { color: var(--auth-faint); } /* Chrome färbt automatisch ausgefüllte Felder gelb und ignoriert * background-color. Der Schatten-Trick überschreibt die Fläche trotzdem. */ .auth-control input:-webkit-autofill, .auth-control input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px #ffffff inset; -webkit-text-fill-color: var(--auth-ink); } .auth-peek { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: -6px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--auth-faint); cursor: pointer; transition: color 160ms ease, background-color 160ms ease; } .auth-peek:hover { color: var(--auth-mute); background: rgba(6, 3, 20, 0.05); } .auth-peek .sp-icon { width: 18px; height: 18px; fill: currentColor; } .auth-meta-row { display: flex; justify-content: flex-end; margin-top: -4px; } .auth-link { font-size: 13px; font-weight: 500; color: var(--primary-color); cursor: pointer; } .auth-link:hover { color: #0064cc; } .auth-submit { display: flex; align-items: center; justify-content: center; gap: 9px; height: 48px; width: 100%; border: none; border-radius: 8px; background-color: var(--primary-color); color: #ffffff; font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer; position: relative; overflow: hidden; transition: transform 160ms ease, filter 160ms ease; } .auth-submit:hover { filter: brightness(1.06); } .auth-submit:active { transform: scale(0.988); } .auth-submit .sp-icon { width: 18px; height: 18px; fill: currentColor; transition: transform 220ms var(--auth-ease); } .auth-submit:hover .sp-icon { transform: translateX(3px); } /* Ein Lichtstreifen, der beim Überfahren einmal durchläuft — im selben * Winkel wie die Bildmarke. */ .auth-submit::after { content: ""; position: absolute; inset: 0; width: 46%; transform: translateX(-120%) skewX(-24deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent); transition: transform 620ms ease; } .auth-submit:hover::after { transform: translateX(320%) skewX(-24deg); } .auth-submit[disabled] { background-color: rgba(6, 3, 20, 0.10); color: var(--auth-mute); cursor: not-allowed; filter: none; } .auth-submit[disabled]::after { display: none; } .auth-spinner { width: 17px; height: 17px; flex: none; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.32); border-top-color: #ffffff; animation: auth-spin 720ms linear infinite; } .auth-switch { font-size: 14px; color: var(--auth-mute); text-align: center; margin: 0; } .auth-switch a { font-weight: 500; color: var(--primary-color); } .auth-switch a:hover { color: #0064cc; } /* Datenschutz und AGB sind Pflichtlinks — 12px auf --auth-faint kommt nur * auf 2,4:1. --auth-mute schafft 5,3:1 und bleibt trotzdem zurueckhaltend. */ .auth-side-foot { display: flex; gap: 14px; align-items: center; padding: 0 clamp(32px, 5vw, 72px); font-size: 13px; color: var(--auth-mute); } .auth-side-foot a { color: var(--auth-mute); text-decoration: underline; text-decoration-color: rgba(6, 3, 20, 0.20); text-underline-offset: 3px; } .auth-side-foot a:hover { color: var(--auth-ink); text-decoration-color: currentColor; } .auth-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; } /* ------------------------------------------------------------- Markenfeld */ .auth-panel { flex-grow: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(48px, 5vw, 76px); background-color: var(--auth-panel); color: #ffffff; } .auth-glow { position: absolute; width: 640px; height: 640px; left: 6%; top: 6%; border-radius: 50%; background: rgba(2, 125, 253, 0.20); filter: blur(90px); pointer-events: none; animation: auth-breathe 8s ease-in-out infinite; } .auth-rays { position: absolute; inset: -10% -30%; pointer-events: none; } .auth-ray { position: absolute; left: 0; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.09); animation: auth-drift 15s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .auth-ray:nth-child(1) { top: 18%; width: 38%; animation-delay: 0s; } .auth-ray:nth-child(2) { top: 31%; width: 26%; animation-delay: 3.4s; } .auth-ray:nth-child(3) { top: 62%; width: 44%; animation-delay: 6.1s; } .auth-ray:nth-child(4) { top: 77%; width: 30%; animation-delay: 9.2s; } .auth-panel-inner { position: relative; display: flex; flex-direction: column; gap: 34px; } .auth-mark { width: 116px; height: 116px; display: block; margin-left: -14px; } .auth-claim { display: flex; flex-direction: column; gap: 14px; max-width: 460px; } .auth-claim h2 { font-size: clamp(30px, 2.8vw, 40px); font-weight: 500; letter-spacing: -0.028em; line-height: 1.14; margin: 0; } .auth-claim p { font-size: 16px; line-height: 1.62; color: rgba(255, 255, 255, 0.58); margin: 0; } /* -------------------------------------------------------- Sprachumschalter */ .auth-lang { position: relative; } .auth-lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0.66px solid rgba(6, 3, 20, 0.17); border-radius: 8px; background: #ffffff; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--auth-mute); cursor: pointer; transition: border-color 160ms ease; } .auth-lang-btn:hover { border-color: var(--auth-hairline-strong); } .auth-lang-btn .sp-icon { width: 13px; height: 13px; fill: currentColor; transition: transform 200ms var(--auth-ease); } .auth-lang.is-open .auth-lang-btn .sp-icon { transform: rotate(180deg); } /* Schwebt über beliebigem Inhalt — hier ist ein Schatten richtig. */ .auth-lang-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 148px; padding: 5px; background: #ffffff; border: 1px solid var(--auth-hairline); border-radius: 12px; box-shadow: 0 12px 28px rgba(6, 3, 20, 0.14); display: none; flex-direction: column; gap: 2px; } .auth-lang.is-open .auth-lang-menu { display: flex; animation: auth-rise 220ms var(--auth-ease) both; } .auth-lang-menu a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--auth-ink); } .auth-lang-menu a:hover { background: rgba(6, 3, 20, 0.05); } .auth-lang-menu a.is-active { font-weight: 500; background: rgba(2, 125, 253, 0.08); color: var(--primary-color); } .auth-lang-menu .sp-icon { width: 15px; height: 15px; fill: currentColor; flex: none; } /* ---------------------------------------------------------------- Meldungen */ .auth-notes { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 396px; margin-bottom: 26px; } .auth-note { display: flex; gap: 13px; padding: 15px 16px; background: #ffffff; border: 1px solid var(--auth-hairline); border-radius: 12px; animation: auth-slide-down 520ms var(--auth-ease) both; } .auth-note-tile { width: 32px; height: 32px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(6, 3, 20, 0.06); color: var(--auth-mute); } .auth-note-tile .sp-icon { width: 18px; height: 18px; fill: currentColor; } .auth-note-text { display: flex; flex-direction: column; gap: 3px; } .auth-note-text strong { font-size: 14px; font-weight: 500; } .auth-note-text p { font-size: 13px; color: var(--auth-mute); line-height: 1.52; margin: 0; } .auth-note.tone-brand .auth-note-tile { background: rgba(2, 125, 253, 0.10); color: var(--primary-color); } .auth-note.tone-ok .auth-note-tile { background: rgba(10, 138, 74, 0.10); color: var(--auth-ok); } .auth-note.tone-error { border-color: rgba(255, 69, 58, 0.30); animation: auth-slide-down 520ms var(--auth-ease) both, auth-nudge 480ms ease-in-out 520ms 1; } .auth-note.tone-error .auth-note-tile { background: rgba(255, 69, 58, 0.10); color: var(--auth-danger); } /* ------------------------------------------------------------------ Dialoge */ .auth-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(6, 3, 20, 0.42); } .auth-modal.is-open { display: flex; animation: auth-fade 200ms ease both; } .auth-modal-card { position: relative; width: 100%; max-width: 428px; max-height: calc(100vh - 40px); overflow-y: auto; padding: 28px; background: #ffffff; border-radius: 14px; box-shadow: 0 24px 60px rgba(6, 3, 20, 0.22); animation: auth-rise 300ms var(--auth-ease) both; display: flex; flex-direction: column; gap: 20px; } .auth-modal-head { display: flex; flex-direction: column; gap: 6px; padding-right: 34px; } .auth-modal-head h2 { font-size: 20px; font-weight: 500; letter-spacing: -0.015em; margin: 0; } .auth-modal-head p { font-size: 14px; color: var(--auth-mute); line-height: 1.55; margin: 0; } .auth-modal-close { position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--auth-faint); cursor: pointer; transition: color 160ms ease, background-color 160ms ease; } .auth-modal-close:hover { color: var(--auth-ink); background: rgba(6, 3, 20, 0.06); } .auth-modal-close .sp-icon { width: 17px; height: 17px; fill: currentColor; } .auth-modal form { display: flex; flex-direction: column; gap: 16px; } .auth-modal-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(2, 125, 253, 0.10); color: var(--primary-color); } .auth-modal-icon .sp-icon { width: 24px; height: 24px; fill: currentColor; } .auth-benefits { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .auth-benefits li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--auth-mute); } .auth-benefits .sp-icon { width: 16px; height: 16px; margin-top: 2px; flex: none; fill: var(--auth-ok); } .auth-modal-actions { display: flex; flex-direction: column; gap: 8px; } .auth-btn-ghost { height: 42px; border: 0; border-radius: 8px; background: transparent; font-family: inherit; font-size: 14px; color: var(--auth-mute); cursor: pointer; transition: background-color 160ms ease, color 160ms ease; } .auth-btn-ghost:hover { background: rgba(6, 3, 20, 0.05); color: var(--auth-ink); } .auth-feedback { display: none; font-size: 13px; line-height: 1.5; padding: 11px 13px; border-radius: 8px; } .auth-feedback.is-visible { display: block; animation: auth-slide-down 320ms var(--auth-ease) both; } .auth-feedback.is-ok { background: rgba(10, 138, 74, 0.08); color: var(--auth-ok); } .auth-feedback.is-error { background: rgba(255, 69, 58, 0.08); color: var(--auth-danger); } /* ------------------------------------------------------------------ Auftritt * * Die Staffelung liegt als Variable auf dem Element, damit das Markup nur * --i="3" setzt und nicht sechs Verzögerungen ausschreibt. */ /* backwards statt both: waehrend der Verzoegerung gilt der Startzustand, * danach wieder die Kaskade. Mit `both` haette die Animation dauerhaft * `transform: none` gehalten und jedes spaetere :active oder :hover mit * transform tot gestellt. */ .auth-rise { animation: auth-rise-up 720ms var(--auth-ease) backwards; animation-delay: calc(60ms + var(--i, 0) * 55ms); } .auth-panel { animation: auth-wipe 860ms var(--auth-ease) both; } .auth-mark { animation: auth-mark-in 900ms var(--auth-ease) 340ms both; } @keyframes auth-rise-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes auth-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes auth-wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } } @keyframes auth-mark-in { from { opacity: 0; transform: translateY(14px) scale(0.965); } to { opacity: 1; transform: none; } } @keyframes auth-drift { 0% { transform: translateX(-42%) skewX(-24deg); opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { transform: translateX(150%) skewX(-24deg); opacity: 0; } } @keyframes auth-breathe { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.06); } } @keyframes auth-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @keyframes auth-nudge { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-3px); } 40%, 60% { transform: translateX(3px); } } @keyframes auth-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes auth-spin { to { transform: rotate(360deg); } } /* --------------------------------------------------------------- Bildschirm */ /* Unter 1024px hat das Markenfeld neben dem Formular keinen Platz mehr. Es * legt sich als Band darüber — dieselbe Fläche, dieselbe Bewegung, nur quer. */ @media (max-width: 1024px) { .auth-page { flex-direction: column; } .auth-side { width: 100%; min-width: 0; flex-grow: 1; order: 2; padding: 30px 0 24px; } .auth-side-top { display: none; } .auth-side-body { padding: 0 26px; } .auth-form { max-width: 440px; margin: 0 auto; } .auth-notes { max-width: 440px; margin: 0 auto 22px; } .auth-side-foot { justify-content: center; padding: 26px 26px 0; } .auth-panel { order: 1; flex-grow: 0; min-height: 244px; justify-content: space-between; padding: 34px 26px 28px; animation: none; } .auth-panel-inner { gap: 22px; } .auth-panel-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .auth-mark { width: 64px; height: 64px; margin-left: -8px; } /* Im Band sitzt die Marke in .auth-panel-top neben dem Umschalter — die breite Fassung darüber wäre die zweite. */ .auth-mark-wide { display: none; } .auth-claim p { display: none; } .auth-glow { width: 300px; height: 300px; left: -60px; top: -90px; filter: blur(66px); } .auth-ray:nth-child(1) { top: 62%; width: 52%; } .auth-ray:nth-child(2) { top: 78%; width: 34%; } .auth-ray:nth-child(3), .auth-ray:nth-child(4) { display: none; } /* Im Band steht der Umschalter auf dunklem Grund. */ .auth-panel .auth-lang-btn { background: transparent; border-color: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.72); } .auth-panel .auth-lang-btn:hover { border-color: rgba(255, 255, 255, 0.34); } } @media (min-width: 1025px) { .auth-panel-top { display: none; } } @media (max-width: 480px) { .auth-head h1 { font-size: 27px; } .auth-control, .auth-submit { height: 48px; } .auth-side-foot { flex-wrap: wrap; justify-content: center; } } /* Wer Bewegung abbestellt hat, bekommt die Seite fertig aufgebaut. */ @media (prefers-reduced-motion: reduce) { .auth-rise, .auth-panel, .auth-mark, .auth-note, .auth-modal.is-open, .auth-modal-card, .auth-lang.is-open .auth-lang-menu, .auth-feedback.is-visible { animation: none; } .auth-glow, .auth-ray { animation: none; opacity: 0.5; } .auth-submit::after { display: none; } }