/* Formulare des Shops (/jetzt-starten, /vertrag-kuendigen, /vertrag-widerrufen, /kasse/…).
   Baut auf den Tokens aus seite.css auf; eigene Datei, damit seite.css unverändert bleibt. */
.formular { display: flex; flex-direction: column; gap: 18px; max-width: 40rem; }
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld > label, .feld > legend { font-weight: 700; font-size: 1.125rem; }
.feld__hilfe { font-size: 1rem; color: var(--tinte-2); }
.feld input[type="text"], .feld input[type="email"], .feld input[type="password"],
.feld input[type="tel"], .feld input[type="date"], .feld select, .feld textarea {
  width: 100%; min-height: var(--ziel); padding: 12px 16px;
  font: inherit; color: var(--tinte); background: var(--karte);
  border: 2px solid var(--linie); border-radius: var(--r-s);
}
.feld textarea { min-height: 7rem; resize: vertical; }
/* Datumsfeld: Mobile Browser (vor allem Safari auf dem iPhone) geben ihm eine eigene Mindestbreite
   und ignorieren width: 100 % — es ragte auf /vertrag-kuendigen aus der Seite (Aufgabe 50). */
.feld input[type="date"] {
  display: block; min-width: 0; max-width: 100%; box-sizing: border-box;
  -webkit-appearance: none; appearance: none; text-align: left;
}
.feld input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.feld input[type="date"]::-webkit-calendar-picker-indicator { margin-left: auto; }
.feld--fehler input, .feld--fehler select, .feld--fehler textarea { border-color: var(--fehler, #B3261E); }
.feld__fehler { color: var(--fehler, #B3261E); font-weight: 700; font-size: 1rem; }
fieldset.feld { border: 0; padding: 0; margin: 0; min-width: 0; }
.wahl { display: flex; align-items: center; gap: 12px; min-height: var(--ziel); padding: 4px 0; font-size: 1.125rem; }
.wahl input { width: 28px; height: 28px; flex: none; accent-color: var(--akzent); }
.meldung { padding: 14px 18px; border-radius: var(--r-s); border: 2px solid var(--linie); background: var(--karte-2); font-size: 1.125rem; }
.meldung--fehler { border-color: var(--fehler, #B3261E); }
.meldung--gut { border-color: var(--gut); }
.wortlaut { padding: 16px 18px; border-left: 6px solid var(--akzent); background: var(--akzent-weich); border-radius: var(--r-s); font-size: 1.125rem; }
.angaben { display: grid; grid-template-columns: 1fr; gap: 4px 18px; font-size: 1.125rem; }
.angaben dt { font-weight: 700; color: var(--tinte-2); }
.angaben dd { margin: 0 0 8px; overflow-wrap: anywhere; }
button.knopf { font-family: var(--f-text); }
/* Passwortfeld mit Auge-Knopf (public/static/js/passwort.js) */
.passwortfeld { position: relative; display: flex; }
.passwortfeld input { padding-right: calc(var(--ziel) + 4px); }
.passwortfeld__knopf {
  position: absolute; top: 0; right: 0; bottom: 0; width: var(--ziel); display: grid; place-items: center;
  border: 0; background: none; color: var(--tinte-2); cursor: pointer; border-radius: var(--r-s);
}
.passwortfeld__knopf:hover, .passwortfeld__knopf[aria-pressed="true"] { color: var(--akzent); }
.passwortfeld__knopf:focus-visible { outline: 3px solid var(--akzent); outline-offset: -5px; }
.passwortfeld__knopf svg { width: 24px; height: 24px; }
.passwortfeld__knopf::after {
  content: ""; position: absolute; width: 26px; height: 2.4px; border-radius: 2px;
  background: currentColor; transform: rotate(-45deg) scaleX(0); transition: transform .15s;
}
.passwortfeld__knopf[aria-pressed="true"]::after { transform: rotate(-45deg) scaleX(1); }
@media (prefers-reduced-motion: reduce) { .passwortfeld__knopf::after { transition: none; } }
@media (min-width: 640px) {
  .angaben { grid-template-columns: max-content 1fr; }
  .angaben dd { margin: 0; }
}
/* Lobby-Screen (/lobby-screen): Bild im Kopf, Lockfeld des Formulars */
.lobby-bild { margin: 0; }
.lobby-bild img { display: block; width: 100%; height: auto; border-radius: var(--r-l); box-shadow: var(--schatten); }
.lockfeld { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.wahl--lang { align-items: flex-start; font-size: 1rem; }
.wahl--lang input { margin-top: 2px; }