/* DIE FORMULARE OHNE ANMELDUNG: "Verträge hier kündigen" (kuendigen.html,
   Paket 312) und Kontakt (kontakt.html, Paket 344). Bis 344 stand dieser
   Stil in kuendigen.html selbst; seitdem teilen beide Seiten ihn, damit sie
   gleich aussehen und nicht auseinanderlaufen. Klassen mit kf-, Farbe und
   Form nur aus Token (stil.css); am Handy eine Spalte. Offen in der
   Herkunftsschicht wie die zwei Seiten (server/herkunft.py). Seit Paket 392
   traegt er auch die eigene Newsletter-Anmeldung (newsletter.html), ohne
   eigene Regel. */
.kf-kasten {
  max-width: 640px;
  padding: 18px 20px;
  border: var(--form-rand, 1px) solid var(--linie-hell);
  border-radius: var(--form-karte-radius, 8px);
  background: var(--grund-hell);
}
.kf-schritt { display: flex; flex-direction: column; gap: 12px; }
.kf-schritt[hidden], .kf-feld[hidden] { display: none; }
.kf-feld { display: flex; flex-direction: column; gap: 4px; }
.kf-feld-wort { margin: 0; font-size: 13px; color: var(--schrift-gedaempft); }
.kf-eingabe {
  padding: 7px 9px;
  border: var(--form-rand, 1px) solid var(--feld-rand);
  border-radius: var(--form-klein-radius, 4px);
  background: var(--feld);
  color: var(--schrift-hell);
  font: inherit;
}
textarea.kf-eingabe { min-height: 90px; resize: vertical; }
.kf-eingabe:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.kf-eingabe[aria-invalid="true"] { outline: 2px solid var(--warnung); outline-offset: 1px; }
.kf-wahl { display: flex; flex-direction: column; gap: 6px; }
.kf-wahl-zeile { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.kf-wahl-zeile input { accent-color: var(--akzent); }
.kf-knopf {
  align-self: flex-start;
  padding: 8px 16px;
  border: var(--form-rand, 1px) solid var(--knopf-rand);
  border-radius: var(--form-klein-radius, 4px);
  background: var(--grund-hell);
  color: var(--schrift-hell);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.kf-knopf.primaer { background: var(--akzent); border-color: var(--akzent); color: var(--schrift-auf-akzent); }
.kf-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.kf-knopf[disabled] { opacity: .5; cursor: default; }
.kf-angaben { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.kf-angaben dt { color: var(--schrift-gedaempft); }
.kf-angaben dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.kf-meldung {
  margin: 0 0 12px;
  padding: 8px 12px;
  border: var(--form-rand, 1px) solid var(--gruen-rand);
  border-radius: var(--form-klein-radius, 4px);
  background: var(--gruen-flaeche);
}
.kf-meldung.schlecht { border-color: var(--warnung-rand); background: var(--warnung-flaeche); color: var(--warnung); }
.kf-meldung[hidden] { display: none; }
.kf-satz-fertig { margin: 0; font-size: 16px; color: var(--gruen-schrift); }
.kf-verweis { display: block; margin-top: 6px; color: var(--akzent); }
/* Paket 344: der Zaehler unter der Nachricht, der Satz zum Datenschutz unter
   dem Knopf und das Honigtopf-Feld (fuer Menschen unsichtbar, nicht in der
   Tab-Reihenfolge, fuer Vorleser verborgen; nur Programme fuellen es). */
.kf-zaehler { margin: 0; align-self: flex-end; font-size: 12px; color: var(--schrift-gedaempft); }
.kf-zaehler.voll { color: var(--warnung); }
.kf-hinweis { margin: 0; font-size: 13px; color: var(--schrift-gedaempft); }
.kf-hinweis a { color: var(--akzent); }
.kf-fuell {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* Paket 344b: das Sternchen an jedem Pflichtfeld (fuer Vorleser verborgen,
   dort sagt es aria-required), die Zeile "* Pflichtangabe", der
   Pflicht-Haken (Text darf umbrechen, der Haken bleibt oben) und der
   Fortschritt der Rechenaufgabe als stiller Balken im Knopf (--kf-anteil
   setzt kontakt.js; ohne color-mix bleibt der Knopf einfach still). */
.kf-stern { margin-left: .25em; color: var(--akzent); font-weight: 600; }
.kf-pflicht { font-size: 12px; }
.kf-haken { align-items: flex-start; }
.kf-haken input { margin-top: 3px; }
.kf-haken a { color: var(--akzent); }
.kf-haken input[aria-invalid="true"] { outline: 2px solid var(--warnung); outline-offset: 1px; }
.kf-knopf.rechnet {
  background-image: linear-gradient(to right,
    color-mix(in srgb, var(--schrift-auf-akzent) 22%, transparent) var(--kf-anteil, 0%),
    transparent var(--kf-anteil, 0%));
  cursor: progress;
}
@media (max-width: 700px) {
  .kf-kasten { padding: 14px; }
  .kf-angaben { grid-template-columns: 1fr; }
}