/* ============================================================
   anfrage-breit.css — Patch gegenüber public/assets/anfrage.css
   Wird NACH style.css und anfrage.css eingebunden:
     <link rel="stylesheet" href="/assets/style.css">
     <link rel="stylesheet" href="/assets/anfrage.css">
     <link rel="stylesheet" href="/assets/anfrage-breit.css">
   Das Formular nutzt die ganze Breite des Kastens „So kommt der Vertrag zustande“ (Hauptspalte 1200 px:
   .seite max 1440 px minus 2 x --rand-desktop 120 px), Felder etwas größer, Schrittleiste und Fortschrittsbalken
   über die ganze Breite. Nur Regeln, die sich ändern oder neu sind; Palette v5.0, 0 px Radius, keine Schatten.
   ============================================================ */

/* 1. Formular: keine 760-px-Bremse mehr, es füllt die Breite des Kastens. */
.anfrage-formular { max-width: none; gap: 56px; }
.anfrage-erfolg { max-width: none; }

/* 2. Schrittleiste: fünf gleiche Spalten über die ganze Breite (waren 760 px), etwas größere Schrift. */
.schritte-anzeige { max-width: none; gap: 24px; }
.schritte-anzeige li { font-size: 18px; padding-top: 12px; }

/* 3. Fortschrittsbalken: ebenfalls volle Breite, etwas kräftiger. */
.fortschritt { max-width: none; height: 6px; }

/* 4. Felderraster: mehr Luft zwischen Zeilen und Spalten. */
.formular-felder { gap: 48px; }
.feld-zeile { gap: 56px; }

/* 5. Felder etwas größer: Beschriftung 20 px, Eingabe 20 px, höhere Zeilen. Gleiche Selektoren wie in style.css,
      damit die Reihenfolge der Stylesheets entscheidet. */
.feld label, .feld-titel { font-size: 20px; }
.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld textarea { font-size: 20px; padding: 10px 0 14px 0; }
.feld select { font-size: 20px; padding: 10px 0 14px 0; }
.radio-gruppe { gap: 48px; }

/* 6. Einheiten: Spalten wachsen mit, der Knopf „Entfernen“ bleibt rechts. */
.einheit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 128px; gap: 40px; }

/* 7. Zusammenfassung: breitere Beschriftungsspalte, größere Schrift. */
.zusammenfassung dl { grid-template-columns: 280px minmax(0, 1fr); gap: 12px 32px; font-size: 20px; }

/* Tablet: etwas weniger Abstand. */
@media (max-width: 1024px) {
  .feld-zeile { gap: 40px; }
  .schritte-anzeige { gap: 16px; }
}

/* Handy (<= 640 px): zurück auf die Maße von anfrage.css, damit nichts abschneidet. Die Schrittleiste zeigt dort
   weiter nur die Ziffern (font-size 0 an li, Ziffer über ::before). */
@media (max-width: 640px) {
  .anfrage-formular { gap: 40px; }
  .schritte-anzeige { gap: 8px; }
  .schritte-anzeige li { font-size: 0; padding-top: 8px; }
  .formular-felder { gap: 40px; }
  .feld-zeile { gap: 40px; }
  .feld label, .feld-titel { font-size: 18px; }
  .feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld textarea, .feld select { font-size: 18px; }
  .radio-gruppe { gap: 24px; }
  .einheit { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .zusammenfassung dl { grid-template-columns: minmax(0, 1fr); gap: 2px; font-size: 18px; }
}