/* 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: 14vh 20px 10vh; 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 { /* Zwei grosse Lichtkegel in der Markenfarbe, die sich langsam gegeneinander bewegen, dazu ein Grundverlauf. Bewusst AUF html und nicht im body: html ist nicht gezoomt (siehe base.html, body{zoom:0.66}) und fuellt immer das Fenster. Ein animiertes
mit position:fixed haette unter dem Zoom nur zwei Drittel des Bildschirms bedeckt - dieselbe Falle wie seinerzeit bei min-height:100vh. */ background: radial-gradient(900px 560px at 22% 18%, rgba(31,79,122,.20) 0%, rgba(31,79,122,0) 60%), radial-gradient(780px 520px at 78% 74%, rgba(86,136,186,.18) 0%, rgba(86,136,186,0) 62%), radial-gradient(1300px 680px at 50% -12%, rgba(31,79,122,.13) 0%, rgba(31,79,122,0) 64%), linear-gradient(180deg, #f8fafc 0%, #e9eef4 100%); background-size: 200% 200%, 200% 200%, 100% 100%, 100% 100%; background-attachment: fixed; animation: lg2-licht 42s ease-in-out infinite alternate; } @keyframes lg2-licht { from { background-position: 0% 0%, 100% 100%, 50% 0%, 0 0 } to { background-position: 46% 34%, 54% 66%, 50% 0%, 0 0 } } .lg2-karte { width: 100%; max-width: 560px; box-sizing: border-box; padding: 46px 48px 38px; 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 28px } .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 28px; font-size: 28px; font-weight: 600; letter-spacing: -.01em; color: #2e3342; text-align: center; } .lg2-feld { display: block; margin: 0 0 20px } .lg2-feld > span { display: block; margin: 0 0 6px; font-size: 15px; font-weight: 500; color: #5a6070; } .lg2-feld input { width: 100%; box-sizing: border-box; height: 56px; padding: 0 16px; border: 1px solid #dfe2ea; border-radius: 9px; background: #fff; font-size: 19px; 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: 58px; margin: 10px 0 0; border: none; border-radius: 9px; background: var(--ds-primary, var(--ds-primary,#1f4f7a)); color: #fff; font-size: 19px; 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: 16px; 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: 15px; line-height: 1.5; color: #868ca0; text-align: center; } /* =================================================================== * Das Intro (11.09.2026) * * Ramazan: „vielleicht Hintergrund Intro machen ... mit Animation." * * Drei Bewegungen, alle nur ueber `transform`, `opacity` und * `stroke-dashoffset` - das sind die Eigenschaften, die der Browser ohne * Neuberechnung des Layouts zeichnen kann. Kein Bild, keine Bibliothek, * keine Schrift, die nachgeladen werden muss. * * 1. Die Marke wird GEZEICHNET: erst der senkrechte Strich, dann die * beiden Querlinien, dann die Wellenlinie, zuletzt die Schrift. * 2. Die Karte steigt leicht auf und wird sichtbar. * 3. Der Hintergrund bewegt sich dauerhaft, sehr langsam (42 s). * * WER KEINE BEWEGUNG WILL, BEKOMMT KEINE. Ganz unten steht die Regel fuer * `prefers-reduced-motion` - eine Systemeinstellung, die Menschen mit * Schwindel oder Migraene setzen. Sie abzufragen ist kein Beiwerk. * =================================================================== */ .lg2-karte { position: relative; animation: lg2-karte-auf .62s cubic-bezier(.2,.8,.2,1) both; } @keyframes lg2-karte-auf { from { opacity: 0; transform: translateY(16px) scale(.985) } to { opacity: 1; transform: none } } /* Die Linien der Wortmarke werden gezeichnet. `stroke-dasharray` legt eine Strichfolge so lang wie die Linie selbst; `stroke-dashoffset` schiebt sie zunaechst ganz aus dem Bild. Laeuft der Versatz auf 0, waechst die Linie. */ .lg2-marke .brand-lockup line { stroke-dasharray: 280; stroke-dashoffset: 280; animation: lg2-strich 1s ease-out forwards; } .lg2-marke .brand-lockup line:nth-of-type(1) { animation-delay: .15s } .lg2-marke .brand-lockup line:nth-of-type(2) { animation-delay: .35s } .lg2-marke .brand-lockup line:nth-of-type(3) { animation-delay: .5s } .lg2-marke .brand-lockup path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: lg2-strich .5s ease-out forwards 1.15s; } @keyframes lg2-strich { to { stroke-dashoffset: 0 } } /* Die Schrift der Marke kommt zuletzt - sie ist das Ergebnis, nicht der Weg. */ .lg2-marke .brand-lockup text { opacity: 0; animation: lg2-ein .55s ease-out forwards; } .lg2-marke .brand-lockup text:nth-of-type(1) { animation-delay: .95s } .lg2-marke .brand-lockup text:nth-of-type(2) { animation-delay: 1.1s } .lg2-marke .brand-lockup text:nth-of-type(3) { animation-delay: 1.3s } @keyframes lg2-ein { to { opacity: 1 } } @media (prefers-reduced-motion: reduce) { html.lg2-grund, .lg2-karte, .lg2-marke .brand-lockup line, .lg2-marke .brand-lockup path, .lg2-marke .brand-lockup text { animation: none } .lg2-marke .brand-lockup line, .lg2-marke .brand-lockup path { stroke-dashoffset: 0 } .lg2-marke .brand-lockup text { opacity: 1 } }