/* ============================================================
Komponente: Textfeld
------------------------------------------------------------
Quelle: Figma „Text inputs & search" → Email input container,
ausgelesen am 25.08.2026 (Varianten size=large).
Aufbau: Label und Wert stehen übereinander INNERHALB des
Rahmens. Das Label bleibt immer sichtbar, auch wenn getippt
wird — kein Placeholder, der beim Tippen verschwindet.
VERWENDUNG
Fehler: Klasse .field--error am Container, Meldung darunter.
============================================================ */
.field {
display: flex;
flex-direction: column;
gap: var(--space-2xs);
padding: var(--space-sm) var(--space-md); /* 12 / 16 */
border-radius: var(--radius-md);
background-color: transparent;
cursor: text;
/* Der Strich liegt in Figma INNEN und zählt nicht zur Höhe;
ein CSS-border tut das bei automatischer Höhe doch und macht
das Element 2 px höher. AGENTS.md §8a verbietet ihn
ausdrücklich („NIE ein CSS-border an beiden"). Er liegt
deshalb als inset box-shadow in --field-outline.
Nachgezogen am 04.09.2026, zusammen mit .btn. */
--field-outline: var(--button-ghost-outline);
box-shadow: inset 0 0 0 var(--outline-default) var(--field-outline);
}
/* Der Rahmen wächst im Fokus optisch von 1px auf 2px — aber NICHT
über border-width. Das zweite Pixel kommt als inset box-shadow
dazu, der Border bleibt 1px.
Grund: border-width von 1 auf 2 verschiebt bei
box-sizing: border-box den Inhalt um 1px. In Figma passiert das
nicht, weil der Strich dort INSIDE liegt und den Rahmen nicht
anfasst. Der inset-Schatten ist die CSS-Entsprechung.
Umgestellt am 28.08.2026 (SKILL.md §23.6). Vorher glich ein
Padding-Abzug die Differenz aus — das funktionierte, stand aber
an einer zweiten Stelle und konnte nicht animieren. Ein Padding
springt; ein Schatten läuft mit. Dieselbe Lösung gilt für den
aktiven Chip (§5) und die Suchleiste (§6). */
.field:focus-within,
.field--error,
.field.is-focus {
/* Zwei Pixel statt einem. Seit dem 04.09.2026 liegt auch der
Grundrand als inset box-shadow vor (§8a) — diese Regel
ERSETZT ihn deshalb, statt ihn zu ergänzen, und nennt die
volle Breite selbst. Vorher kam das zweite Pixel vom border
darunter; ohne den blieb der Fokus einen Pixel schmal. */
box-shadow: inset 0 0 0 calc(var(--outline-default) * 2) currentColor;
color: var(--button-ghost-outline);
}
.field__label {
font-family: var(--font-family-inter);
font-size: var(--font-size-extra-small-text);
line-height: var(--line-height-extra-small-text);
color: var(--text-description);
}
.field__input {
border: none;
background: none;
padding: 0;
width: 100%;
font-family: var(--font-family-inter);
font-size: var(--font-size-medium-text);
line-height: var(--line-height-medium-text);
color: var(--text-primary);
}
.field__input::placeholder {
color: var(--text-description);
}
/* ------------------------------------------------------------
Fokus
------------------------------------------------------------
AUSNAHME von der globalen Fokus-Regel: Eingabefelder zeigen
den Tastatur-Fokus über den Rand, nicht über den weißen Ring.
Bei Textfeldern sind Fokus und Tippen derselbe Moment, und der
farbige Rand ist dafür die etablierte Form. So ist es auch in
Figma gebaut — die Komponente kennt keinen Ring.
Der Ring aus base.css wird deshalb am inneren Feld unterdrückt.
------------------------------------------------------------ */
/* IM FOKUS WIRD DAS FELD EINE KARTE und kommt nach vorn:
surface-card, nicht ghost-fill-hover.
Grund: ghost-fill-hover ist kein Spiegel. In Dark liegt es
ÜBER dem Grund (heller), in Light DARUNTER (dunkler, gray-100
auf gray-50). Für einen Button ist Abdunkeln auf hellem Grund
die normale Konvention — für ein Feld, das im Fokus nach vorn
kommen soll, ist es die falsche Richtung.
surface-card löst in Dark auf denselben Wert auf wie vorher
(#212C3E), in Light auf Weiß. Die Richtung stimmt damit in
beiden Modes, und der Textkontrast im fokussierten Feld steigt
in Light von 13,39 auf 17,01:1 — getippt wird genau in diesem
Moment. Geändert am 28.08.2026 (SKILL.md §15).
color trägt den inset-Ring über currentColor — deshalb hier
dieselbe Farbe wie am Rand, statt sie zweimal zu nennen.
.field__label und .field__input setzen ihre Textfarbe selbst,
erben also nicht mit. */
.field:focus-within,
.field.is-focus {
--field-outline: var(--label-outline-active);
color: var(--label-outline-active);
background-color: var(--surface-card);
}
.field__input:focus-visible {
outline: none;
}
/* ------------------------------------------------------------
Fehler
------------------------------------------------------------
Fehler schlägt Fokus: der Rand bleibt rot, auch während getippt
wird. Die Füllung folgt weiterhin dem Fokus.
Rot allein trägt die Aussage nicht (WCAG 1.4.1) — deshalb steht
unter dem Feld immer eine Meldung mit Text.
------------------------------------------------------------ */
/* Rot schlägt den Fokus-Akzent — der inset-Ring folgt über
currentColor mit, ohne eigene Regel. */
.field--error,
.field--error:focus-within,
.field--error.is-focus {
--field-outline: var(--red-label-text);
color: var(--red-label-text);
}
/* Auch im Fehlerfall bleibt die Fläche neutral — Rot tragen Rand
und die Meldung darunter. warning-red-fill als Feldfläche käme
in Dark auf 1,01:1 und in Light auf 1,05:1 zum Grund, wäre also
als Fläche unsichtbar und würde nur den Text schlechter lesbar
machen. Dieselbe Größenregel wie §21.3: Tönung trägt in kleiner
Fläche, ein Feld ist dafür zu groß und zu textlastig. */
.field--error:focus-within,
.field--error.is-focus {
background-color: var(--surface-card);
}
.field-message {
display: block;
margin-top: var(--space-2xs);
padding-inline: var(--space-md);
font-family: var(--font-family-inter);
font-size: var(--font-size-extra-small-text);
line-height: var(--line-height-extra-small-text);
color: var(--red-label-text);
}
/* ------------------------------------------------------------
Passwort-Umschalter
------------------------------------------------------------
Liegt rechts neben dem Wert, innerhalb des Rahmens. Das Icon
erbt seine Farbe über currentColor, deshalb reicht ein
Farbwechsel am Button.
Das aria-label muss beim Umschalten mitwechseln — sonst sagt
der Screenreader „anzeigen", während das Passwort sichtbar ist.
------------------------------------------------------------ */
.field__row {
display: flex;
align-items: center;
gap: var(--space-xs);
}
.field__row .field__input {
flex: 1;
}
.field__toggle {
display: flex;
align-items: center;
justify-content: center;
color: var(--text-description);
flex-shrink: 0;
}
.field__toggle:hover {
color: var(--text-primary);
}
.icon {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
}
/* ============================================================
OFFEN
------------------------------------------------------------
· size=small ist in Figma vorhanden, aber noch nicht
ausgelesen. Padding und Textgrößen fehlen hier bewusst,
statt sie aus large abzuleiten.
· Der Abstand von 4px zwischen Label und Wert ist aus der
Gesamthöhe (69px) zurückgerechnet, nicht direkt gemessen.
============================================================ */