/* ── Anmelde-Screen (#login-screen) ────────────────────────────────────── Ausgelagert aus den Inline-`style="…"`-Attributen in app/index.php (Ticket 3.84). Ausschliesslich fuer den nicht-authentifizierten Login-/2FA-/Passkey-Screen — keine geteilten App-Klassen hier. Reihenfolge im bewusst NACH components.css/nav.css: einige Regeln ueberschreiben absichtlich Defaults von .btn/.card-body/.input/ .ds-alert-banner--warning (border, padding, font-size). Zur Robustheit gegen eine kuenftige Umsortierung der -Reihenfolge sind diese Ueberschreibungen als Verbund-Selektor geschrieben (zwei Klassen auf demselben Element schlagen einen Einzel-Klassen-Selektor unabhaengig von der Ladereihenfolge). Variablen ausschliesslich aus base.css. */ .login-screen { display: none; /* app.js setzt .style.display beim Screen-Wechsel direkt — Inline-Wert gewinnt dann ohnehin. */ } .login-wrap { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-secondary); padding: 1rem; gap: 1rem; } .login-card { width: 100%; max-width: 400px; } .card-body.login-card-body { padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; } .login-header { text-align: center; } .login-logo { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 1rem; display: block; } .login-title { font-size: 1.5rem; } /* Offline-Hinweis (Ticket 3.192): reused .ds-alert-banner--warning (nav.css) — identisches App-weites Muster fuer "Handlungsbedarf". border-radius/border-bottom ueberschrieben, damit der Banner sich ins gerundete, randlose Card-Layout der Anmeldeseite einfuegt (analog .login-error-box direkt darunter). */ .ds-alert-banner--warning.login-offline-hint { border-radius: var(--radius-md); border-bottom: none; } .login-form { display: flex; flex-direction: column; gap: 1rem; } .login-pw-wrap { position: relative; } .input.login-pw-input { padding-right: 2.75rem; } .login-pw-toggle { position: absolute; right: 0; top: 0; height: 100%; width: 2.75rem; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--text-tertiary); padding: 0; line-height: 1; } /* Gemeinsam fuer #login-error + #twofa-error — app.js setzt .style.display explizit ('none'/'block'), nie per leerem String, daher hier sicher als Klassen-Default hinterlegbar (siehe login-screen.js-Kommentar). */ .login-error-box { display: none; padding: 0.75rem; background: var(--coral-light); color: var(--coral); border-radius: var(--radius-md); font-size: 0.875rem; } .login-submit-btn { justify-content: center; } .login-twofa-step { display: none; flex-direction: column; gap: 1rem; } .login-twofa-header { text-align: center; } .login-twofa-icon-wrap { width: 48px; height: 48px; border-radius: 50%; background: var(--accent-light); display: flex; align-items: center; justify-content: center; margin: 0 auto .75rem; } .login-twofa-title { font-size: 1.125rem; font-weight: 600; margin: 0 0 .25rem; } .login-twofa-desc { font-size: 0.875rem; color: var(--text-secondary); margin: 0; } .input.login-twofa-code-input { text-align: center; font-size: 1.25rem; letter-spacing: .15em; } .login-twofa-methods { display: flex; gap: .5rem; flex-wrap: wrap; } /* Basis fuer twofa-resend + twofa-back — Modifier ergaenzen die unterschiedlichen Farb-/Padding-Werte je Button. */ .login-link-btn { background: none; border: none; cursor: pointer; text-align: center; font-size: 0.8125rem; } /* display:none bleibt bewusst INLINE auf dem Element (nicht hier) — login-screen.js/app.js setzen .style.display teils auf '' (leerer String) statt 'none'/'block'; das raeumt nur die Inline-Deklaration weg und faellt auf die Klassen-Kaskade zurueck. Stuende display:none hier in der Klasse, bliebe der Button dauerhaft unsichtbar. */ .login-twofa-resend { color: var(--accent); text-decoration: underline; padding: 0; } .login-twofa-back { color: var(--text-secondary); padding: .25rem; } .login-passkey-wrap { text-align: center; } /* class="btn" ergaenzt (Ticket 3.192): nur so greift .btn:disabled{opacity:.45} fuer die Offline-Sperre. Verbund-Selektor ueberschreibt border/border-radius/ font-size von .btn — Aussehen bleibt identisch zur vorherigen Inline-Version. */ .btn.login-passkey-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius-md); padding: .5rem 1rem; cursor: pointer; color: var(--text-secondary); font-size: 0.8125rem; display: inline-flex; align-items: center; gap: .375rem; line-height: 1; } .login-footer-text { text-align: center; font-size: 0.8125rem; color: var(--text-tertiary); margin: 0; } .login-legal-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.75rem; padding-top: 0.875rem; border-top: 1px solid var(--border); } .login-legal-link { color: var(--text-secondary); } .login-theme-btn { background: none; border: none; padding: 0.375rem 0.75rem; cursor: pointer; color: var(--text-secondary); display: flex; align-items: center; gap: 0.375rem; line-height: 1; font-size: 0.8125rem; }