/* Anfrageformular — Ergänzungen zum Stylesheet der Seite.

   assets/style.css ist eine Kopie des Design-Systems (v5.0 "Blau trägt") und wird hier nicht bearbeitet; was das
   Formular zusätzlich braucht, steht in dieser Datei. */

/* Was das Skript ausblendet, bleibt aus, auch wenn eine Klasse display setzt. */
[hidden] { display: none !important; }

.kopf--ohne-rand { padding: 0; }
.kopf-logo-link { display: inline-flex; align-items: center; }

.anfrage-bereich { gap: 40px; }
.anfrage-formular { display: flex; flex-direction: column; gap: 48px; width: 100%; max-width: 760px; }

/* Fortschritt */
.schritte-anzeige {
  list-style: none; margin: 0; padding: 0; max-width: 760px;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; counter-reset: schritt;
}
.schritte-anzeige li {
  counter-increment: schritt; font-size: 16px; line-height: 1.4; color: var(--akzent);
  border-top: 2px solid var(--blass); padding-top: 8px;
}
.schritte-anzeige li::before { content: counter(schritt) ". "; font-weight: 900; }
.schritte-anzeige li.ist-erledigt { color: var(--tinte); border-top-color: var(--akzent); }
.schritte-anzeige li[aria-current="step"] { color: var(--tinte); border-top-color: var(--tinte); font-weight: 900; }
.fortschritt { height: 4px; max-width: 760px; background: var(--sand); }
.fortschritt-balken { height: 100%; width: 20%; background: var(--akzent); transition: width 0.2s ease; }

/* Schritte */
.schritt { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.schritt[hidden] { display: none; }
.schritt legend { padding: 0; margin: 0 0 8px 0; }
.schritt legend:focus { outline: none; }

.feld-titel { font-size: 18px; font-weight: 300; line-height: 1.4; color: var(--tinte); }
.feld select {
  width: 100%; box-sizing: border-box; margin: 0; border: 0; border-bottom: 1px solid var(--akzent); border-radius: 0;
  background: transparent; padding: 6px 0 12px 0; font-size: 18px; font-family: inherit; font-weight: 300;
  line-height: 1.4; color: var(--tinte); outline: none;
}
.feld select:focus { border-bottom-color: var(--blass); }
/* Tastaturfokus sichtbar wie bei Optionsfeld und Häkchen; die hellere Unterlinie allein ist zu schwach.
   Steht hier und nicht in der Kopie assets/style.css, die unverändert bleibt; anfrage.css lädt danach. */
.feld input:focus-visible, .feld textarea:focus-visible,
.feld select:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* Ebenso für Links und Knöpfe (2 px Blau); im dunklen Kopf in Sand. */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.kapitelkopf a:focus-visible { outline-color: var(--sand); }
.feld-fehler { margin: 0; font-size: 16px; line-height: 1.4; color: #8c3a2b; }
/* Der Ladehinweis soll beim Scrollen nicht am Fensterrand kleben (sonst knapp unter dem Rand). */
.formular-rueckmeldung { scroll-margin-bottom: 32px; }
/* Leer, aber im Baum: Eine Live-Region, die erst mit ihrem Text entsteht (display: none), sagen manche Vorleser nicht an.
   Darum unsichtbar statt ausgeblendet, ohne Platz im Layout. */
.feld-fehler:empty, .formular-rueckmeldung:empty {
  display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.ist-fehlerhaft input, .ist-fehlerhaft select { border-bottom-color: #8c3a2b; }

/* Fallenfeld: für Menschen unsichtbar, für Programme ein gewöhnliches Feld. */
.feld-falle { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Einheiten */
.einheiten-liste { display: flex; flex-direction: column; gap: 16px; }
.einheit {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 96px; gap: 24px; align-items: end;
  border-top: 1px solid var(--blass); padding-top: 16px;
}
.einheit > .feld:first-child { grid-column: 1; }
.einheit > .einheit-miete { grid-column: 2; }
.einheit > [data-einheit-entfernen] { grid-column: 3; justify-self: end; }
.einheit [hidden] { display: none; }
.knopf-entfernen {
  font: inherit; font-size: 16px; line-height: 1.4; color: var(--tinte); background: transparent; border: 0;
  border-bottom: 1px solid var(--akzent); padding: 0; min-height: 44px; cursor: pointer;
}
.knopf-entfernen[hidden] { display: none; }
button.btn-umriss { font-family: inherit; cursor: pointer; }

.hinweis-kasten { border-left: 3px solid var(--akzent); padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }

/* Weg 1 (/formular/): Ablaufkasten, Preis brutto groß und netto klein darunter (§ 3 Abs. 3 PAngV). */
.ablauf-kasten { border: 1px solid var(--blass); border-radius: 8px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.ablauf-kasten ol { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 8px; }
.ablauf-titel { margin: 0; font-weight: 900; }
.preis-kasten { background: var(--sand); border-radius: 8px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.preis-kasten p { margin: 0; }
.preis-betrag { font-size: 40px; font-weight: 900; line-height: 1.1; color: var(--tinte); }
/* Übersicht unmittelbar vor dem Knopf (§ 312j Abs. 2 BGB): netto, Umsatzsteuer, Gesamtpreis; bei Verbrauchern
   der Gesamtpreis hervorgehoben. */
.bestellung { background: var(--sand); border-radius: 8px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.bestellung p { margin: 0; }
/* Gedämpfter Text auf Sand in Tinte (9,7:1), bei jeder Breite; Blau auf Sand hätte nur 4,42:1. */
.preis-kasten .gedaempft-auf-hell, .bestellung .gedaempft-auf-hell { color: var(--tinte); }
.bestellung-titel { font-weight: 900; }
.bestellung-preise { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 18px; line-height: 1.45; }
.bestellung-preise > div { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.bestellung-preise dd { margin: 0; white-space: nowrap; }
.bestellung-gesamt { border-top: 1px solid var(--blass); padding-top: 8px; }
.bestellung--verbraucher .bestellung-gesamt { font-weight: 900; font-size: 28px; line-height: 1.2; color: var(--tinte); }
.wegweiser { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; max-width: 720px; }
.wegweiser a { display: block; text-decoration: none; text-align: left; }

/* Segmentschalter (vorher stand hier der Laufzeit-Regler): kleine Optionslisten
   (Wer beauftragt, Laufzeit, Art der Kündigung, Interesse an der Mieteranfrage) als abgerundeter Schalter mit gleitender
   weißer Auswahlfläche, weichem Schatten und Systemschrift. Die Radio-Eingänge bleiben die Formularfelder: Sie liegen
   unsichtbar über ihrer Fläche (Pfeiltasten, Fokus, Vorleser, Name und Wert wie zuvor). Die Fläche gleitet, wo der
   Browser :has() kennt; sonst bekommt die gewählte Option die weiße Fläche ohne Bewegung. Ohne „Bewegung reduzieren“. */
.radio-gruppe.segment {
  --seg-n: 2; position: relative; display: grid; grid-template-columns: repeat(var(--seg-n), minmax(0, 1fr)); gap: 0;
  align-items: stretch; width: 100%; max-width: 520px; box-sizing: border-box; padding: 3px; border-radius: 12px;
  background: rgba(33, 58, 85, 0.08);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.radio-gruppe.segment.segment--3 { --seg-n: 3; }
.segment-option { position: relative; z-index: 1; display: block; min-height: 0; margin: 0; padding: 0; cursor: pointer; }
.segment-option input[type="radio"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0;
  opacity: 0; cursor: pointer; z-index: 2;
}
.segment-text {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; padding: 6px 12px;
  border-radius: 9px; text-align: center; font-size: 17px; font-weight: 500; line-height: 1.25; color: var(--tinte);
  transition: background-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}
.segment-option input:checked ~ .segment-text {
  background: var(--weiss); font-weight: 600;
  box-shadow: 0 3px 8px rgba(33, 58, 85, 0.14), 0 1px 1px rgba(33, 58, 85, 0.10);
}
@media (hover: hover) {
  .segment-option input:not(:checked):hover ~ .segment-text { background: rgba(255, 255, 255, 0.55); }
}
.segment-option input:focus-visible ~ .segment-text { outline: 2px solid var(--akzent); outline-offset: 2px; }
.segment-mehr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap;
}
.segment-zusatz { margin: 0; }
.ist-fehlerhaft .segment { box-shadow: 0 0 0 1.5px #8c3a2b; }
@supports selector(:has(*)) {
  .radio-gruppe.segment::before {
    content: ""; position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--seg-n));
    border-radius: 9px; background: var(--weiss); box-shadow: 0 3px 8px rgba(33, 58, 85, 0.14), 0 1px 1px rgba(33, 58, 85, 0.10);
    transition: transform 240ms cubic-bezier(0.3, 0.7, 0.2, 1); pointer-events: none;
  }
  .segment:has(> :nth-child(2) input:checked)::before { transform: translateX(100%); }
  .segment:has(> :nth-child(3) input:checked)::before { transform: translateX(200%); }
  .segment-option input:checked ~ .segment-text { background: transparent; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .radio-gruppe.segment::before, .segment-text { transition: none; }
}
@media (max-width: 420px) {
  .segment-text { padding: 6px 6px; font-size: 15px; }
}

/* Nachweise: Ablagefläche je Dokument. Das native input[type=file] steht vor der Karte,
   für das Auge unsichtbar, aber mit Tastatur und Vorleser erreichbar; die Karte ist sein Label. */
.nachweis-gruppe { display: flex; flex-direction: column; gap: 16px; }
.nachweis { display: flex; flex-direction: column; gap: 8px; }
.ablage { position: relative; }
.ablage-eingabe {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0;
  overflow: hidden; pointer-events: none;
}
.ablage-flaeche {
  display: flex; align-items: center; gap: 20px; box-sizing: border-box; width: 100%; min-height: 112px; padding: 20px 24px;
  border: 1.5px dashed var(--akzent); border-radius: 16px; background: var(--weiss); color: var(--tinte); cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
@media (hover: hover) {
  .ablage-flaeche:hover { border-color: var(--tinte); background: rgba(169, 192, 216, 0.14); }
}
.ablage.ist-darueber .ablage-flaeche {
  border-style: solid; border-color: var(--tinte); background: rgba(169, 192, 216, 0.28);
  box-shadow: 0 6px 18px rgba(33, 58, 85, 0.12);
}
.ablage-eingabe:focus-visible + .ablage-flaeche { outline: 2px solid var(--akzent); outline-offset: 3px; }
.ablage-symbol {
  flex: none; box-sizing: border-box; width: 48px; height: 48px; padding: 11px; border-radius: 50%;
  background: rgba(74, 109, 153, 0.12); color: var(--akzent);
}
.ablage-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ablage-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.ablage-titel { font-size: 18px; font-weight: 900; line-height: 1.3; }
.ablage-kennzeichen {
  flex: none; padding: 4px 9px; border: 1px solid var(--blass); border-radius: 9999px; font-size: 13px; font-weight: 500;
  line-height: 1; color: var(--akzent); white-space: nowrap;
}
.ablage-kennzeichen--pflicht { border-color: var(--tinte); background: var(--tinte); color: var(--weiss); }
.ablage-hinweis { font-size: 16px; line-height: 1.4; }
.ablage-format { font-size: 14px; line-height: 1.4; color: var(--akzent); }
.nachweis.ist-voll .ablage-flaeche { border-style: solid; border-color: var(--blass); background: var(--sand); cursor: default; }
.nachweis.ist-voll .ablage-symbol { background: rgba(33, 58, 85, 0.10); color: var(--tinte); }
.nachweis.ist-fehlerhaft .ablage-flaeche { border-color: #8c3a2b; background: #fbf3f1; }
.nachweis.ist-fehlerhaft .ablage-symbol { background: rgba(140, 58, 43, 0.12); color: #8c3a2b; }
.nachweis-fehler { margin: 0; font-size: 16px; line-height: 1.4; color: #8c3a2b; }
.nachweis-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nachweis-liste:empty { display: none; }
.nachweis-liste li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 8px 8px 8px 14px;
  border: 1px solid var(--blass); border-radius: 12px; background: var(--weiss); font-size: 16px;
}
.nachweis-liste .datei-name { overflow-wrap: anywhere; }
.nachweis-liste .datei-status {
  box-sizing: border-box; width: 22px; height: 22px; border: 1.5px solid var(--blass); border-radius: 50%;
}
.nachweis-liste li.ist-fertig .datei-status {
  border-color: var(--tinte); background: var(--tinte) center / 13px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.5l3 3 6-7'/%3E%3C/svg%3E");
}
.nachweis-liste li.ist-gescheitert .datei-status { border-color: #8c3a2b; background: rgba(140, 58, 43, 0.15); }
.nachweis-liste progress { grid-column: 1 / -1; width: 100%; height: 6px; accent-color: var(--akzent); }
.nachweis-liste .ist-fehler { color: #8c3a2b; grid-column: 1 / -1; }

/* Zusammenfassung */
.zusammenfassung dl { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 8px 24px; margin: 0; font-size: 18px; line-height: 1.45; }
.zusammenfassung dt { color: var(--akzent); }
.zusammenfassung dd { margin: 0; overflow-wrap: anywhere; }
/* Zusammenfassung vor dem Absenden als Tabelle: links die Angabe, rechts der Wert, je Schritt eine Gruppe. */
.zusammenfassung-tabelle {
  width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; border: 1px solid var(--blass);
  border-radius: 12px; overflow: hidden; font-size: 18px; line-height: 1.45;
}
.zusammenfassung-tabelle th, .zusammenfassung-tabelle td {
  padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--blass); overflow-wrap: anywhere;
}
.zusammenfassung-tabelle tr:last-child > th, .zusammenfassung-tabelle tr:last-child > td { border-bottom: 0; }
.zusammenfassung-tabelle th[scope="row"] { width: 34%; font-weight: 300; color: var(--akzent); }
.zusammenfassung-tabelle td { font-weight: 300; color: var(--tinte); }
.zusammenfassung-tabelle .zusammenfassung-gruppe > th {
  padding: 10px 16px; background: var(--sand); color: var(--tinte); font-size: 16px; font-weight: 900; letter-spacing: 0.02em;
}
.nur-vorleser {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap;
}

.schritt-knoepfe { display: flex; gap: 16px; flex-wrap: wrap; }
.schritt-knoepfe [hidden] { display: none; }
.knopf-zweitrangig { border-color: var(--blass); }
.btn-absenden[disabled] { opacity: 0.5; cursor: wait; }

.anfrage-erfolg { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.anfrage-erfolg[hidden] { display: none; }
.anfrage-erfolg:focus { outline: none; }

.anfrage-fuss {
  display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; font-size: 16px; line-height: 1.4;
  padding: 40px var(--rand-desktop); border-top: 1px solid var(--blass);
}

@media (max-width: 1024px) {
  .anfrage-fuss { padding-left: var(--rand-tablet); padding-right: var(--rand-tablet); }
}

@media (max-width: 640px) {
  .anfrage-fuss { padding-left: var(--rand-mobil); padding-right: var(--rand-mobil); }
  .schritte-anzeige li { font-size: 0; }
  .schritte-anzeige li::before { font-size: 16px; }
  .einheit { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .einheit > .feld:first-child, .einheit > .einheit-miete { grid-column: 1; justify-self: stretch; }
  .einheit > [data-einheit-entfernen] { grid-column: 1; justify-self: start; }
  .zusammenfassung dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .zusammenfassung dd { margin-bottom: 12px; }
  .zusammenfassung-tabelle { font-size: 16px; }
  .zusammenfassung-tabelle th, .zusammenfassung-tabelle td { padding: 10px 12px; }
  .zusammenfassung-tabelle th[scope="row"] { width: 38%; }
  .ablage-flaeche { gap: 14px; min-height: 104px; padding: 16px; }
  .ablage-symbol { width: 44px; height: 44px; padding: 10px; }
}

/* Kündigungsknopf und Widerrufsfunktion: sichtbar als Knopf, nicht als Textlink. */
.fuss-knopf {
  display: inline-block; padding: 10px 18px; border: 1px solid var(--tinte); color: var(--tinte);
  text-decoration: none; font-weight: 900;
}
.fuss-knopf:hover, .fuss-knopf:focus { background: var(--sand); }

/* ---------- Lebendige Knöpfe: Absenden, Weiter, Zurück ----------
   Pill-Form, mindestens 48 px. Der Hauptknopf ist gefüllt in Blau dunkel und trägt einen Pfeil, der beim Überfahren
   in 350 ms dreht; „Zurück“ bleibt Umriss ohne Pfeil. Druck skaliert auf 0,97. Licht und Magnet nur im
   Anfrageformular (knopf-leben.css, knopf-leben.js); Kündigen, Widerrufen und Mieteranfrage bleiben ohne Skript.
   Bei „Bewegung reduzieren“ steht alles still.
   Der Pfeil ist eine Maske aus einem data:-Bild (die CSP erlaubt img-src data:), gefärbt in der Schriftfarbe; er gilt
   auch für die Knöpfe der Erstgespräch-Kacheln, weil erstgespraech-kacheln.css selbst keine Bilder lädt. */
.btn-absenden {
  justify-content: center; gap: 12px; min-height: 48px; padding: 0 28px; border-radius: 9999px;
  background: var(--tinte); border-color: var(--tinte); color: var(--weiss);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, scale 120ms ease;
}
.btn-absenden::after, .kachel-knopf::after {
  content: ''; flex: none; width: 18px; height: 12px; background-color: currentColor; transform-origin: 50% 50%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h15M11 1l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h15M11 1l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn-absenden:hover { background: var(--akzent); border-color: var(--akzent); color: var(--weiss); }
.btn-absenden:hover::after, .btn-absenden:focus-visible::after { transform: rotate(-45deg); }
.btn-absenden:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.btn-absenden:active { scale: 0.97; background: var(--akzent); border-color: var(--akzent); }
.btn-absenden.knopf-zweitrangig { background: transparent; border-color: var(--blass); color: var(--tinte); }
.btn-absenden.knopf-zweitrangig::after { content: none; }
.btn-absenden.knopf-zweitrangig:hover, .btn-absenden.knopf-zweitrangig:active { background: var(--sand); border-color: var(--blass); color: var(--tinte); }
.btn-absenden[disabled] { scale: none; }
@media (prefers-reduced-motion: reduce) {
  .btn-absenden, .btn-absenden::after, .kachel-knopf::after { transition: none; }
  .btn-absenden:active { scale: none; }
  .btn-absenden:hover::after, .btn-absenden:focus-visible::after { transform: none; }
}

/* Kennzeichnung neben dem Label der Einwilligungen, „(erforderlich)“ und „(freiwillig)“: nicht im Einwilligungstext und
   nicht im Label. Schmal auf einer eigenen Zeile unter dem Text. */
.einwilligung-kennzeichen {
  flex: none; padding-top: 2px; font-size: 16px; font-weight: 300; line-height: 1.4; color: var(--akzent);
  white-space: nowrap;
}
@media (max-width: 767px) {
  .einwilligung-kennzeichen { flex-basis: 100%; padding: 0 0 0 30px; }
}