/* ============================================================
   Newsletter Page
   Page: #newsletter
   Centered single-column signup form.

   max-width via main.narrow (04-layout.css)
   Card-Look für form/fieldset/legend kommt zentral aus 03-forms.css
   (main.narrow form:has(fieldset) etc.) — hier nur newsletter-spezifisch.
   ============================================================ */

#newsletter > article > header {
  margin-block-end: var(--gap-block);
}

/* Breite/Ausrichtung via globalem .form-stack button[type="submit"] (03-forms.css) —
   nur der Zusatzabstand nach oben bleibt hier. */
#newsletter button[type="submit"] {
  margin-block-start: var(--space-4);
}

/* Such-Profil-Block: Abstand zum Kontaktdaten-Block */
.newsletter-profile {
  margin-block-start: var(--gap-inline);
}

/* Spannen-Zeile (Preis/Fläche/Zimmer/Grundstück): Bezeichnung + von – bis, Abstand über den Gap */
.newsletter-profile .range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.newsletter-profile .range > span:first-child {
  min-width: 9rem;
}

.newsletter-profile .range input[type="number"] {
  width: 8.5rem;   /* sechsstellige Kaufpreise (Vorbelegung aus dem Objekt, 07.10.2026) passten in 6rem nicht */
}

/* Suchauftrag: Umkreis mit Karte (07.10.2026) */
.newsletter-profile .newsletter-radius { display: flex; flex-direction: column; gap: var(--space-3); }
/* Hinweis Kundenkonto (Matching-Vorrang): Symbol + Text + Link, ruhig unter den Suchkriterien. */
/* „Kundenkonto anlegen“: Häkchen, darunter aufgeklappt Passwort + Wiederholung (.form-panel). */
#newsletter .account-option { display: flex; flex-direction: column; gap: var(--space-3); }
.newsletter-profile .newsletter-radius-fields:not([hidden]) { display: grid; gap: var(--space-3); }
/* Umkreis-Schieberegler: Bezeichnung links, Wert rechts, Skala darunter (wie Finanzierungsrechner). */
.newsletter-profile .radius-slider-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.newsletter-profile .radius-slider-head output { color: var(--color-primary); font-weight: 700; }
.newsletter-profile .radius-slider input[type="range"] { cursor: pointer; margin-block: var(--space-2) 0; }
.newsletter-profile .radius-slider-scale { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--color-text-muted); }
.newsletter-profile .newsletter-radius-canvas { block-size: 18rem; border-radius: var(--radius); }
.newsletter-profile .radius-handle {
  border-radius: 50%; background: var(--color-bg); border: 3px solid var(--color-primary);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.35); cursor: ew-resize;
}

/* Pillen (Kategorien, Objekttyp …) und der abgesetzte Kriterien-Bereich kommen aus dem globalen 03-forms.css
   (.choice-group / .choice-pills / .form-panel.is-scroll). */

/* Kriterien-Bereich: Linie zwischen den Blöcken (Dirk 08.10.2026). Nur über SICHTBAREN Auswahlgruppen, vor denen schon
   etwas Sichtbares steht — nicht passende Gruppen blendet newsletter.js per style="display: none" aus; so steht nie eine
   Linie ganz oben, und die Spannen-Zeilen (Preis, Fläche …) bleiben ein kompakter Block. */
.newsletter-profile .search-criteria > :not([style*="display: none"]) ~ .choice-group:not([style*="display: none"]) {
  padding-block-start: var(--space-3);
  border-block-start: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-bg));
}