/* Die Anmeldeseite * ===================================================================== * * Ramazan am 14.08.2026 zum bisherigen Bild: „diese sollte v0 besser * designen." Vorlage ist der v0-Entwurf (components/login-page.tsx, * Fassung „zentrierte Karte"): ruhiger Grund mit zartem Verlauf, eine * Karte, große beschriftete Felder, deutlicher Fokusring. * * Diese Datei gilt NUR für die Anmeldeseite (`body.lg2`). Die alten * `.login-*`-Regeln in style.css bleiben unangetastet – sie tragen * weiterhin die Seite „Passwort ändern". */ body.lg2 { /* KEINE FENSTERHÖHE. Das war der Fehler (Ramazan, 29.08.2026: „bei anmeldeseite wird anmeldefelder ganz klein und mann kann es scrollen ist aber nur bei windows pc so"). `min-height:100vh` unter `body{zoom}` geht nicht auf: Chrome und Edge rechnen vh mit dem Zoom, Safari nicht. Am Mac fiel es deshalb nicht auf. UND DIESE FALLE WAR IM PROJEKT SCHON GELÖST. In design.css steht seit längerem, mit genau dieser Begründung: .login-body{min-height:0;padding:7vh 0 9vh} „… und rechnet man sie hoch, kommt das Scrollen ins Leere zurück. Deshalb gar keine Fensterhöhe mehr, sondern Abstand oben und unten." Diese Datei kam danach dazu, trägt `body.lg2` (höhere Spezifität, später geladen) — und hat die Lösung wieder ausgehebelt. Der erste Anlauf am 29.08. war `calc(100vh / var(--vhfix))`; genau davor warnt der Satz oben. Jetzt derselbe Weg wie in design.css. */ min-height: 0; margin: 0; display: flex; align-items: center; justify-content: center; padding: 22vh 20px 9vh; background: transparent; } /* DER GRUND GEHÖRT AUF `html`, NICHT AUF DEN BODY. Sobald der body nur noch so hoch ist wie sein Inhalt (siehe oben), reicht sein Hintergrund auch nur so weit — darunter blitzte das Weiß des Dokuments durch, mit einer sichtbaren Kante quer über den Bildschirm. Beim ersten Anlauf am 29.08. genau so passiert und im Bildschirmfoto aufgefallen. `html` ist nicht gezoomt und füllt immer das Fenster; dieselbe Lösung wie bei `.app::before` in style.css („Damit reicht die Farbe immer bis unten, ohne vh-Rechnung"). Über eine Klasse an ``, nicht über `:has(body.lg2)`: `:has` kennen ältere Browser nicht, und dann stünde die Anmeldeseite ohne Grund da. */ html.lg2-grund { background: radial-gradient(1100px 520px at 50% -10%, var(--ds-primary-l, #eaeffb) 0%, rgba(234,239,251,0) 62%), #fafbfc; background-attachment: fixed; } .lg2-karte { width: 100%; max-width: 420px; box-sizing: border-box; padding: 34px 34px 28px; background: #fff; border: 1px solid #eaebf1; border-radius: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 18px 40px -24px rgba(15,23,42,.18); } /* DIE MARKE STEHT ÜBEREINANDER, NICHT NEBENEINANDER. Nebeneinander lag der Schriftzug halb hinter dem Zeichen, sobald die Schrift breiter wurde als gedacht. Übereinander kann das nicht passieren. */ .lg2-marke { text-align: center; margin: 0 0 22px } .lg2-zeichen { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 0 10px; border-radius: 14px; background: var(--ds-primary, var(--ds-primary,#1f4f7a)); color: #fff; } .lg2-zeichen svg { width: 34px; height: 29px } .lg2-name { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: #2e3342; } body.lg2 h1 { margin: 0 0 22px; font-size: 21px; font-weight: 600; letter-spacing: -.01em; color: #2e3342; text-align: center; } .lg2-feld { display: block; margin: 0 0 16px } .lg2-feld > span { display: block; margin: 0 0 6px; font-size: 12.5px; font-weight: 500; color: #5a6070; } .lg2-feld input { width: 100%; box-sizing: border-box; height: 42px; padding: 0 13px; border: 1px solid #dfe2ea; border-radius: 9px; background: #fff; font-size: 14.5px; color: #2e3342; transition: border-color .12s ease, box-shadow .12s ease; } .lg2-feld input:focus { outline: none; border-color: #7d9ce4; box-shadow: 0 0 0 3px rgba(31,79,122,.15); } .lg2-knopf { width: 100%; height: 44px; margin: 6px 0 0; border: none; border-radius: 9px; background: var(--ds-primary, var(--ds-primary,#1f4f7a)); color: #fff; font-size: 14.5px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 2px rgba(37,64,155,.25); transition: background-color .12s ease; } .lg2-knopf:hover { background: var(--ds-primary-d, #2850b4) } /* Der Fehler steht ÜBER dem Formular, nicht darunter: Wer ihn liest, soll die Felder darunter gleich vor sich haben. */ .lg2-fehler { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 18px; padding: 11px 13px; border: 1px solid #f3cdc8; border-radius: 10px; background: #fdecea; color: #b3261e; font-size: 13px; line-height: 1.45; } .lg2-fehler svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px } .lg2-hinweis { margin: 20px 0 0; padding: 14px 0 0; border-top: 1px solid #f0f1f5; font-size: 12.5px; line-height: 1.5; color: #868ca0; text-align: center; }