/* ============================================================ Ergänzung: schwebendes Label am Eingabefeld ------------------------------------------------------------ Quelle: Figma „Screens: App und Web" → login.title, 13837:14872 (leer) und 13837:14909 (aktiv, getippt), ausgelesen am 04.09.2026. input.css ANFASSEN WÄRE FALSCH (AGENTS.md §16: „Nichts Bestehendes wird angefasst"). Diese Datei liegt daneben und ergänzt genau eine Sache. WORUM ES GEHT input.css baut das Feld so, wie es SKILL.md §15 beschreibt: Label und Wert stehen übereinander, das Label ist immer sichtbar — „kein Placeholder, der beim Tippen verschwindet". Die beiden Login-Frames zeigen aber einen Zwischenzustand, den es dort nicht gibt: Im LEEREN Feld steht der Feldname mittig und in Wertgröße, also an der Stelle, wo sonst der Wert steht. Erst wenn getippt wird, wandert er nach oben und wird klein. Die Höhe bleibt dabei gleich — 69 px in beiden Frames. Das ist kein verschwindender Placeholder: der Feldname bleibt sichtbar, er WANDERT nur. §15 ist damit gewahrt. WIE ES GEBAUT IST Das Label liegt absolut, damit sein Wandern die Höhe nicht anfasst. Klein wird es über transform: scale, NICHT über font-size — §23.1 lässt nur transform und opacity animieren, und eine Schriftgröße kann nicht laufen, sie springt. Aus 18 wird 12, also scale(0.6667), Ursprung links oben. Der Wert sitzt im Ruhezustand mittig und rutscht beim Tippen auf seinen Platz — auch das ein transform. Setzt tokens.css, base.css, input.css und motion.css voraus. VERWENDUNG KEIN placeholder-Attribut. Das Label IST der Platzhalter, solange es unten steht — ein zweiter Text an derselben Stelle wäre doppelt. Das Feld trägt data-gefuellt="true", sobald etwas drinsteht. Das setzt prototyp.js; :placeholder-shown greift hier nicht, weil es keinen Placeholder gibt. ------------------------------------------------------------ GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE 69 Feldhöhe (Figma). Aus input.css ergibt sich 12 + 18 + 4 + 21,6 + 12 = 67,6. Die 69 sind hier gesetzt, damit die Höhe im Ruhe- und im Tippzustand exakt gleich bleibt und nichts springt. 0,6667 Skalierung des Labels (12 / 18). ============================================================ */ .field--schwebend { position: relative; height: 69px; /* gemessen, siehe Kopf */ justify-content: flex-end; /* Das Label liegt absolut und nimmt keinen Platz mehr ein — der gap aus input.css hätte nichts mehr zu trennen. */ gap: 0; } /* ------------------------------------------------------------ Label ------------------------------------------------------------ Zwei Zustände, ein Element: RUHE mittig, Wertgröße — liest sich als Platzhalter AKTIV oben, klein — liest sich als Feldname Die Position ist beide Male dieselbe (oben links, im Padding); den Unterschied macht allein das transform. Deshalb kann er laufen. ------------------------------------------------------------ */ .field--schwebend .field__label { position: absolute; left: var(--space-md); /* 16, wie das Padding */ top: var(--space-sm); /* 12, wie das Padding */ /* Ausgangsgröße ist die WERTGRÖSSE, nicht die Labelgröße — verkleinert wird nur über scale. */ font-size: var(--font-size-medium-text); line-height: var(--line-height-medium-text); transform-origin: left top; /* Ruhezustand: um den halben Abstand zur Feldmitte nach unten. Feldhöhe 69, Zeilenhöhe 21,6, oberes Padding 12 → (69 - 21,6) / 2 - 12 = 11,7 */ transform: translateY(11.7px); pointer-events: none; white-space: nowrap; max-width: calc(100% - 2 * var(--space-md)); overflow: hidden; text-overflow: ellipsis; } /* Angehoben, sobald getippt wird oder der Fokus im Feld liegt. Der Fokus zählt mit, weil das Feld dann bereit ist und der Platz für den Wert frei sein muss — sonst tippt man in den Feldnamen hinein. */ .field--schwebend:focus-within .field__label, .field--schwebend[data-gefuellt="true"] .field__label { transform: translateY(0) scale(0.6667); /* 12 / 18 */ } /* ------------------------------------------------------------ Wert ------------------------------------------------------------ Sitzt immer in der unteren Zeile. Im Ruhezustand rutscht er in die Mitte, damit ein leeres Feld wie ein einzeiliges Feld aussieht — so steht es in Figma. ------------------------------------------------------------ */ .field--schwebend .field__row { transform: translateY(-11.7px); } .field--schwebend:focus-within .field__row, .field--schwebend[data-gefuellt="true"] .field__row { transform: translateY(0); } /* ------------------------------------------------------------ Bewegung ------------------------------------------------------------ Werte und Kurve aus motion.css, nicht von hier. Die Dauer ist die des Druckfeedbacks: das Anheben ist die Antwort auf eine Berührung und darf nicht länger dauern als sie. Nur transform läuft (§23.1). ------------------------------------------------------------ */ .field--schwebend .field__label, .field--schwebend .field__row { transition: transform calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out); } /* Reduced Motion: das Label springt an seinen Platz. Größe, Farbe und Position bleiben — nur der Weg dorthin fällt weg (§23.7). */ @media (prefers-reduced-motion: reduce) { .field--schwebend .field__label, .field--schwebend .field__row { transition: none; } } /* ------------------------------------------------------------ Augen-Symbol ------------------------------------------------------------ input.css legt .field__toggle in die Zeile. Im schwebenden Feld muss es unabhängig davon mittig im Feld stehen, sonst wandert es mit dem Wert mit. ------------------------------------------------------------ */ .field--schwebend .field__toggle { position: absolute; right: var(--space-md); /* 16 */ top: 50%; transform: translateY(-50%); /* Die sichtbare Glyphe ist 24 hoch. Die Klickfläche wächst über .touch-target auf 44 — ohne die Border-Box anzufassen, damit der Fokus-Ring an der Glyphe bleibt (base.css). */ } /* Der Wert darf nicht unter das Augen-Symbol laufen. 24 Glyphe + 8 Abstand. */ .field--schwebend:has(.field__toggle) .field__input { padding-right: calc(24px + var(--space-xs)); } /* ============================================================ OFFEN ------------------------------------------------------------ · SKILL.md §15 und input.css kennen diesen Ruhezustand nicht. Entweder wird er dort ergänzt, oder die Login-Frames werden an §15 angepasst (Label immer oben). Bis dahin folgt der Prototyp Figma. · Die 69 px Feldhöhe stehen 1,4 px über dem, was input.css aus Padding und Zeilenhöhen ergibt. ============================================================ */