/* ============================================================
   Komponente: code-eingabe
   ------------------------------------------------------------
   Quelle: Figma „Screens: App und Web" → Code input,
   node 13880:15201 (leer) und 13880:15312 (Feld aktiv),
   ausgelesen am 04.09.2026.

   Zehn Kästchen für den Standort-Code, in zwei Fünfergruppen.

   ------------------------------------------------------------
   ES IST EIN EINZIGES EINGABEFELD, NICHT ZEHN
   Sichtbar sind zehn Kästchen, im Markup steht EIN <input>. Es
   liegt unsichtbar über den Kästchen; was getippt wird, verteilt
   prototyp.js auf die Kästchen.

   Warum nicht zehn Felder: mit zehn Feldern muss der Fokus nach
   jedem Zeichen weiterspringen, Backspace muss zurückspringen,
   Einfügen muss aufgeteilt werden, und die Autofill-Vorschläge
   des Betriebssystems („Code aus Nachrichten") landen im ersten
   Feld statt verteilt. Mit einem Feld macht das alles der
   Browser. Die Zielgruppe tippt hier unter Zeitdruck und ohne
   Einarbeitung (AGENTS.md §1) — der Weg mit den wenigsten
   Fallen gewinnt.

   DIE TASTATUR IST DIE DES BETRIEBSSYSTEMS. In Figma liegt zur
   Veranschaulichung eine gezeichnete Tastatur im zweiten Frame;
   die wird hier NICHT nachgebaut. Ein echtes <input> öffnet auf
   dem Tablet die Systemtastatur, und die Kästchen wandern nach
   oben, weil der sichtbare Bereich kleiner wird — dafür sorgt
   `interactive-widget=resizes-content` im viewport-Meta.

   inputmode="text" und autocomplete="one-time-code": das öffnet
   die Tastatur mit Buchstaben UND Ziffern und lässt das
   Betriebssystem einen erkannten Code anbieten.

   Setzt tokens.css und base.css voraus.

   ------------------------------------------------------------
   GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE
     48 x 48   Kästchen.
     8         Abstand zwischen Kästchen und zwischen den Gruppen.

   SCHRIFT: medium text (18), Regular. Umgestellt am 08.09.2026;
   vorher standen hier 22 px Bold fest.

   Die 22 Bold stammten vom Screen-Frame scanner.codeInput
   (13880:15312), der damals von der Komponente „Code input"
   (13880:15201) abwich. Beide Stellen sind am 08.09.2026 in
   Figma auf 18 px, Stil medium text, Schnitt Regular gebracht
   und hier nachgemessen worden — je zehn Kästchen, beide
   Knoten. Der Widerspruch ist erledigt, die Zeilen bleiben als
   Herkunftsnachweis stehen.

   Das unsichtbare Feld trägt dieselbe Größe wie die Kästchen.
   Sichtbar ist davon nichts — Text und Schreibmarke sind
   transparent —, aber es ist ein echtes <input>, und iOS Safari
   zoomt in jedes Feld unter 16 px hinein (SKILL.md §6).
   ============================================================ */

.code-eingabe {
  position: relative;
  display: flex;
  justify-content: center;
  gap: var(--space-xs);                    /* 8 */
}

.code-eingabe__gruppe {
  display: flex;
  gap: var(--space-xs);                    /* 8 */
}

/* Das echte Feld. Unsichtbar, aber vorhanden: es liegt über den
   Kästchen und fängt jeden Tipp und jeden Klick.

   NICHT opacity:0 ALLEIN — ein Feld mit Deckkraft 0 ist auf
   manchen Systemen nicht mehr fokussierbar, und der Caret wäre
   trotzdem da. Die Schrift wird deshalb zusätzlich transparent
   gesetzt und der Caret abgeschaltet; der Zustand ist an den
   Kästchen zu sehen. */
.code-eingabe__feld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: var(--font-size-medium-text);
  letter-spacing: 3em;
  text-indent: 1.5em;
  cursor: pointer;
}

.code-eingabe__feld:focus {
  outline: none;
}

/* Das Kästchen. 1 px ghost-outline im Ruhezustand — dasselbe
   Grau wie am Eingabefeld (input.css). */
.code-eingabe__slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;                             /* gemessen, siehe Kopf */
  height: 48px;
  border-radius: var(--radius-sm);
  border: var(--outline-default) solid var(--button-ghost-outline);

  font-family: var(--font-family-inter);
  font-size: var(--font-size-medium-text);
  line-height: var(--line-height-medium-text);
  /* REGULAR, nicht bold (Lisi, 08.09.2026). Der Stil heißt
     „medium text regular" — im Screen-Frame stand Bold, in der
     Komponente steht Regular, und die Komponente gilt. */
  font-weight: var(--font-weight-regular);
  color: var(--text-primary);
}

/* Das Kästchen, in dem gerade geschrieben wird. Rand von 1 auf
   2 px — als inset box-shadow, nicht über border-width (§23.6):
   ein Wechsel der Randbreite verschiebt bei border-box den
   Inhalt um 1 px. Dieselbe Lösung wie am Chip und am Feld. */
.code-eingabe__feld:focus ~ .code-eingabe__gruppe .code-eingabe__slot--dran {
  border-color: var(--label-outline-active);
  box-shadow: inset 0 0 0 1px var(--label-outline-active);
}

.code-eingabe__slot {
  transition:
    border-color calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out),
    box-shadow   calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .code-eingabe__slot {
    transition: none;
  }
}

/* ============================================================
   OFFEN
   ------------------------------------------------------------
   · Figma zeigt keinen Fehlerzustand für einen falschen Code.
     §8 verlangt für jede Fehlermeldung einen nächsten Schritt —
     der fehlt hier noch.
   ============================================================ */