/* Anfrageformular der Hauptseite, Aussehen wie die Landingpages (rfa-reinigung/teil-formularstil.php).
 * Unterschied: Hier erzeugt CF7 jede Auswahl mit <label> (use_label_element, damit jedes Feld einen Namen hat). Die
 * Karte ist deshalb das Label selbst, nicht das umgebende list-item; sonst wäre der Rand der Karte nicht anklickbar.
 * Klassen aus tools/hauptseite_formulare_bauen.py; wer dort eine umbenennt, benennt sie hier mit. */
#rfa-cf7-wrap .wpcf7 { margin: 0; }
#rfa-cf7-wrap .wpcf7-form { display: flex; flex-direction: column; }
#rfa-cf7-wrap .rfa-step > * + *:not(.rfa-submit):not(.wpcf7-spinner),
#rfa-cf7-wrap .wpcf7-form > .rfa-field-group + *,
#rfa-cf7-wrap .wpcf7-form > .rfa-grid-2 + * { margin-top: 1.1rem; }
/* Kurzfassung auf einer Seite: die Schritte stehen untereinander, mit demselben Abstand wie die Felder */
#rfa-cf7-wrap .rfa-step:not([hidden]) + .rfa-step:not([hidden]) { margin-top: 1.1rem; }
/* Anfrage zweistufig (29.10.2026): Kern sichtbar, darunter der aufklappbare Teil. gap überspringt ausgeblendete Felder */
#rfa-cf7-wrap .rfa-kern, #rfa-cf7-wrap .rfa-mehr { display: flex; flex-direction: column; gap: 1.1rem; }
#rfa-cf7-wrap .rfa-mehr[hidden] { display: none; }
#rfa-cf7-wrap .rfa-mehr-knopf, #rfa-cf7-wrap .rfa-kern ~ .rfa-mehr, #rfa-cf7-wrap .rfa-kern ~ .rfa-datenschutz { margin-top: 1.25rem; }
#rfa-cf7-wrap .rfa-mehr-knopf + .rfa-mehr { margin-top: 1.1rem; }
/* Zwischenzeile ohne JavaScript (dann ist alles offen); mit JavaScript ersetzt sie der Knopf, in der Kurzfassung entfällt sie */
.rfa-mehr-titel { margin: .4rem 0 0; padding-top: 1rem; border-top: 1px solid #d7e0f5; font-size: 1.05rem; font-weight: 800; color: #325ccf; }
.rfa-mehr-titel[hidden], .rfa-formular-huelle[data-einfach="1"] .rfa-mehr-titel { display: none; }
.rfa-kontakt .rfa-label { font-weight: 600; }
.rfa-kontakt > legend.rfa-label { font-weight: 700; }
.rfa-feldhinweis { margin: 0 0 .65rem; font-size: .9375rem; color: #3b4357; line-height: 1.45; }
#rfa-cf7-wrap fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
#rfa-cf7-wrap .wpcf7-form-control-wrap { display: block; }

#rfa-cf7-wrap input[type="text"], #rfa-cf7-wrap input[type="email"], #rfa-cf7-wrap input[type="tel"],
#rfa-cf7-wrap input[type="number"], #rfa-cf7-wrap textarea, #rfa-cf7-wrap select {
  width: 100%; padding: .75rem 1rem; border: 1px solid #b9c6e6; border-radius: .75rem;
  background: #f7f9ff; color: #1c1c1c; font-size: 1rem; box-sizing: border-box; min-height: 48px;
  transition: border-color .15s, box-shadow .15s;
}
#rfa-cf7-wrap select { background: #fff; }
#rfa-cf7-wrap textarea { resize: vertical; min-height: 7rem; }
#rfa-cf7-wrap input:focus, #rfa-cf7-wrap textarea:focus, #rfa-cf7-wrap select:focus {
  outline: none; border-color: #4069e1; box-shadow: 0 0 0 3px rgba(64,105,225,.25);
}
#rfa-cf7-wrap ::placeholder { color: #5b6478; opacity: 1; }

.rfa-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.1rem 1rem; }
@media (min-width: 640px) { .rfa-grid-2 { grid-template-columns: 1fr 1fr; } }
.rfa-grid-2:not(:has(> :not([hidden]))) { display: none; }

.rfa-label { display: block; font-weight: 700; font-size: 1rem; color: #1c1c1c; margin-bottom: .35rem; line-height: 1.35; }   /* mind. 16 px (Dennis 29.10.2026) */
.rfa-field-group { display: flex; flex-direction: column; }
.rfa-field-group[hidden], .rfa-step[hidden] { display: none; }

/* Auswahl als Karten: Radio wie Checkbox, das Label ist die Karte */
#rfa-cf7-wrap .wpcf7-radio, #rfa-cf7-wrap .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: .6rem; }
#rfa-cf7-wrap .wpcf7-radio .wpcf7-list-item, #rfa-cf7-wrap .wpcf7-checkbox .wpcf7-list-item { margin: 0; flex: 1 1 auto; }
#rfa-cf7-wrap .wpcf7-list-item > label {
  display: flex; align-items: center; gap: .55rem; height: 100%; min-height: 48px; box-sizing: border-box;
  padding: .7rem .95rem; border: 2px solid #c9d4ef; border-radius: .75rem; background: #fff;
  cursor: pointer; font-weight: 600; font-size: .9375rem; color: #1c1c1c; line-height: 1.3;   /* Auswahltexte mind. 15 px */
  transition: border-color .15s, background .15s;
}
#rfa-cf7-wrap .wpcf7-list-item > label:hover { border-color: #4069e1; }
#rfa-cf7-wrap .wpcf7-list-item > label:has(input:checked) { border-color: #4069e1; background: #f0f4ff; }
#rfa-cf7-wrap .wpcf7-list-item > label:focus-within { outline: 3px solid #4069e1; outline-offset: 2px; }
#rfa-cf7-wrap .wpcf7-list-item input { accent-color: #4069e1; flex-shrink: 0; width: 1.1rem; height: 1.1rem; margin: 0; }
/* Objektarten im festen Raster: auf dem Telefon EINE Spalte (zwei Spalten trennten „Hausverwaltu-ng“, Gestaltungs-Audit F5),
   ab 640 px drei Spalten. Lange Wörter umbrechen nur im Notfall, nie mit Trennstrich mitten im Wort. */
#rfa-cf7-wrap .rfa-objektart .wpcf7-checkbox, #rfa-cf7-wrap .rfa-objektart .wpcf7-radio { display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  #rfa-cf7-wrap .rfa-objektart .wpcf7-checkbox, #rfa-cf7-wrap .rfa-objektart .wpcf7-radio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
#rfa-cf7-wrap .wpcf7-list-item-label { hyphens: manual; overflow-wrap: break-word; min-width: 0; }
@media (max-width: 639.98px) { #rfa-cf7-wrap .wpcf7-list-item > label { padding: .65rem .8rem; gap: .5rem; } }

/* Schritte. Ohne JavaScript bleiben alle sichtbar, das Formular ist dann eine lange Liste und funktioniert. */
.rfa-fortschritt { display: flex; gap: .4rem; margin-bottom: .5rem; }
.rfa-fortschritt-punkt {
  flex: 1; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #4a5368;
  padding-top: .55rem; border-top: 3px solid #d7e0f5; transition: color .2s, border-color .2s;
}
.rfa-fortschritt-punkt.ist-aktiv { color: #325ccf; border-top-color: #4069e1; }
.rfa-fortschritt-punkt.ist-fertig { border-top-color: #00e1a1; }
.rfa-schritt-stand { font-size: .85rem; color: #4a5368; margin: 0 0 1.25rem; }
.rfa-schritt-navi { display: flex; gap: .75rem; margin-top: 1.25rem; }
.rfa-schritt-navi button[hidden] { display: none; }
/* Knöpfe einheitlich (Dennis 29.10.2026): gleiche Höhe, Rundung und Schrift. Vorwärts (Weiter, Senden) in Mint, der
   Klickfarbe der Seite; Zurück und Aufklappen als heller Nebenknopf. */
.rfa-schritt-weiter, .rfa-schritt-zurueck, .rfa-mehr-knopf, .rfa-submit {
  min-height: 52px; border-radius: .75rem; font-size: 1.05rem; font-weight: 700; line-height: 1.3; cursor: pointer;
  font-family: inherit; touch-action: manipulation; transition: background .2s, border-color .2s, transform .2s;
}
.rfa-schritt-weiter, .rfa-schritt-zurueck { flex: 1; }
.rfa-schritt-weiter { background: #00e1a1; color: #0A1628; border: 0; box-shadow: 0 12px 20px -8px rgba(10,22,40,.22); }
.rfa-schritt-weiter:hover { background: #2dedb3; }
.rfa-schritt-zurueck, .rfa-mehr-knopf { background: #fff; color: #325ccf; border: 2px solid #c9d4ef; }
.rfa-schritt-zurueck:hover, .rfa-mehr-knopf:hover { border-color: #4069e1; }
.rfa-mehr-knopf { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 1.1rem; text-align: left; }
.rfa-mehr-knopf svg { flex-shrink: 0; transition: transform .2s; }
.rfa-mehr-knopf[aria-expanded="true"] { border-color: #4069e1; background: #f0f4ff; }
.rfa-mehr-knopf[aria-expanded="true"] svg { transform: rotate(180deg); }
.rfa-schritt-weiter:focus-visible, .rfa-schritt-zurueck:focus-visible, .rfa-mehr-knopf:focus-visible, .rfa-submit:focus-visible { outline: 3px solid #0A1628; outline-offset: 2px; }
.rfa-pflicht-hinweis { color: #b91c1c; font-size: .9375rem; margin-top: .3rem; }

/* Upload */
.rfa-upload-zone {
  position: relative; display: block; border: 2px dashed #9fb0d8; border-radius: .75rem; padding: 1.4rem 1rem;
  text-align: center; cursor: pointer; background: #f7f9ff; transition: border-color .15s, background .15s;
}
.rfa-upload-zone:hover, .rfa-upload-zone.drag-over { border-color: #4069e1; background: #f0f4ff; }
.rfa-upload-zone:focus-within { outline: 3px solid #4069e1; outline-offset: 2px; }
.rfa-upload-zone.has-file { border-color: #00a776; background: #f0fdf9; }
.rfa-upload-icon { color: #4a5368; margin: 0 auto .5rem; display: block; }
.rfa-upload-zone:hover .rfa-upload-icon { color: #4069e1; }
.rfa-upload-text { display: block; font-size: .9rem; color: #1c1c1c; font-weight: 600; margin-bottom: .25rem; }
.rfa-upload-text span { color: #325ccf; text-decoration: underline; }
.rfa-upload-hint { display: block; font-size: .875rem; color: #4a5368; }
.rfa-upload-filename { display: none; font-size: .85rem; color: #047857; font-weight: 700; margin-top: .5rem; }
.rfa-upload-zone.has-file .rfa-upload-filename { display: block; }
.rfa-upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

/* Einwilligung, Hinweis, Knopf */
.rfa-datenschutz { display: block; font-size: 1rem; color: #3b4357; line-height: 1.5; }
.rfa-datenschutz .wpcf7-list-item { margin: 0; }
.rfa-datenschutz .wpcf7-list-item label { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; }
.rfa-datenschutz input[type="checkbox"] { margin-top: .2rem; accent-color: #4069e1; flex-shrink: 0; width: 1.1rem; height: 1.1rem; }
.rfa-datenschutz a, .rfa-hinweis a { color: #325ccf; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rfa-hinweis { font-size: .9375rem; color: #3b4357; }
.rfa-submit {
  margin-top: 1.25rem; width: 100%; background: #00e1a1; color: #0A1628;
  padding: .85rem 2rem; border: 0; box-shadow: 0 12px 20px -8px rgba(10,22,40,.22);
}
.rfa-submit:hover { background: #2dedb3; transform: translateY(-2px); }
.rfa-submit[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .rfa-submit:hover { transform: none; } .rfa-mehr-knopf svg { transition: none; } }

/* Meldungen. Die Sammelmeldung bleibt für Bildschirmleser, sichtbar steht der Fehler am Feld */
#rfa-cf7-wrap .wpcf7-response-output { display: none !important; }
#rfa-cf7-wrap .wpcf7-not-valid-tip { color: #b91c1c; font-size: .9375rem; margin-top: .3rem; display: block; }
#rfa-cf7-wrap .wpcf7-not-valid { border-color: #b91c1c !important; }
#rfa-cf7-wrap .wpcf7-spinner { margin: .75rem auto 0; display: block; }