/* Das Kit-Formular. EIGENE Datei, und das aus einem gemessenen Grund.
 *
 * Diese Regeln braucht genau eine Seite: /kit. Sie standen bis zum 14.09.2026
 * in upward.css -- und upward.css wird auf der Startseite VOLLSTAENDIG in die
 * Seite eingebettet (os/server/startseite.mjs -> cssInline()), damit der erste
 * Bildaufbau nicht auf drei verlinkte Dateien wartet. Damit trug die Startseite
 * 1.628 Zeichen Formular-CSS mit, die sie nie benutzt.
 *
 * Gemessen: Die Desktop-Leistung der Startseite fiel danach von ueber 95 auf
 * 92, bei First Contentful Paint 1,0 s und Largest Contentful Paint 1,5 s. Die
 * Seite liegt an der Kante; ein Prozent auf dem kritischen Pfad entscheidet
 * dort. Harte Bedingung aus dem Auftrag vom 14.09.2026: "Keine Seite wird
 * langsamer."
 *
 * /kit verlinkt seine Stilblaetter ohnehin, statt sie einzubetten -- dort
 * kostet eine weitere Datei nichts, was der geteilte Zwischenspeicher nicht
 * zurueckgibt.
 */

/* ------------------------------------------------- Das Kit-Formular, kurz
   Auftrag vom 14.09.2026: "Genau vier Felder, alle Pflicht, jeweils mit Symbol
   und Platzhalter, ohne Beschriftung darueber ... Darunter der Knopf, gross,
   mit Nutzen statt Funktion, dazu eine kleine zweite Zeile im Knopf."

   Gebaut aus vorhandenen Tokens, keine neuen Farben, keine neuen Radien, keine
   neue Schrift. Das Symbol sitzt IM Feld, weil die Beschriftung darueber
   wegfaellt -- ohne ein Zeichen waere auf 390 px nicht zu sehen, was in welches
   Feld gehoert. Die Tippflaeche bleibt bei var(--tippflaeche). */
.feldreihe { position: relative; margin-bottom: var(--m3); }
.feldreihe > svg {
  position: absolute; left: var(--m3); top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--ink-48); pointer-events: none;
}
/* ZWEIMAL `.feldreihe`, und das ist kein Tippfehler.
   Befund vom 15.09.2026: Die Symbole lagen auf dem Platzhaltertext -- „Vorname"
   begann unter dem Personensymbol. Gemessen in Chromium UND WebKit:
       Symbol reicht bis 32 px · padding-left des Feldes 12 px
   Ursache: `os/server/html.mjs` bettet BASIS_CSS als <style>-Block NACH allen
   verlinkten Stilblaettern ein, und dort steht
       input[type=text],…{ padding: var(--m2) var(--m3) }
   Beide Regeln haben dieselbe Spezifitaet (0,1,1), also gewinnt die spaetere --
   und das ist die aus dem <style>-Block, unabhaengig davon, in welcher
   Reihenfolge die Dateien geladen werden.
   Die Klasse doppelt zu schreiben hebt die Spezifitaet auf 0,2,1. Das ist
   ehrlicher als `!important`: Es sagt „diese Regel muss gewinnen", ohne die
   ganze Kaskade fuer alles Weitere auszuhebeln. */
.feldreihe.feldreihe > input,
.feldreihe.feldreihe > select { padding-left: 2.75rem; }
/* Die Landesvorwahl steht VOR der Nummer, in einer Zeile, und nimmt nur so viel
   Platz wie ihr laengster Eintrag. */
.telefonreihe { display: flex; gap: var(--m2); margin-bottom: var(--m3); }
.telefonreihe select { width: auto; flex: 0 0 auto; min-width: 7.5rem; }
.telefonreihe .feldreihe { flex: 1 1 auto; margin-bottom: 0; }

/* Der Knopf traegt zwei Zeilen: oben der Nutzen, darunter das Ergebnis. */
.knopf-gross {
  display: block; width: 100%; text-align: center;
  padding: var(--m4) var(--m5); border-radius: var(--radius-klein);
  line-height: 1.3;
}
.knopf-gross .knopf-nutzen { display: block; font-size: var(--t-gross); font-weight: 700; }
.knopf-gross .knopf-ergebnis { display: block; font-size: var(--t-mikro); opacity: .78; margin-top: var(--m1); }