/* ==========================================================================
   Angebote: Liste (/angebote) und Objektseite (/angebote/<ID>)
   Den Inhalt setzt der Worker ein (Auslieferung/worker/angebote.js).
   Die Liste ist bewusst ein Register in Zeilen, kein Kartenraster: Bild
   links, rechts Preis in Tabellenziffern und die Maße als eine Zeile.
   ========================================================================== */

.bpa-hinweis {
  margin: 0 0 20px; padding: 12px 16px; border-radius: 12px;
  background: var(--bp-red-soft); color: var(--bp-red-dark); font-size: 14px;
}

.bpa-status {
  display: inline-block; margin-left: 8px; padding: 1px 10px; border-radius: 100px;
  background: var(--bp-red-soft); color: var(--bp-red); font-size: 12.5px; font-weight: 700;
  vertical-align: 1px;
}

/* ---- Kopf der Liste ---------------------------------------------------- */
.bpa-kopf { padding: clamp(36px, 5vw, 64px) 0 clamp(22px, 3vw, 30px); border-bottom: 1px solid var(--bp-line); }
.bpa-kopf--leer { padding-bottom: var(--bp-section-y); border-bottom: 0; }
.bpa-kopf__titel { margin: 0; }
.bpa-kopf .bp-lead { margin: 14px 0 0; }
.bpa-kopf--leer .bp-btn-row { margin-top: 28px; }

.bpa-filter { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 30px; }
.bpa-filter__gruppe { display: flex; flex-wrap: wrap; gap: 8px; }
.bpa-filter__link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 16px;
  border-radius: 100px; border: 1.5px solid var(--bp-line);
  font-size: 15px; color: var(--bp-text); text-decoration: none;
  transition: border-color 0.25s var(--bp-ease), color 0.25s var(--bp-ease), background 0.25s var(--bp-ease);
}
.bpa-filter__link:hover { border-color: var(--bp-red); color: var(--bp-red); }
.bpa-filter__link[aria-current="true"] { background: var(--bp-red); border-color: var(--bp-red); color: #ffffff; }
.bpa-filter__zahl { font-variant-numeric: tabular-nums; color: var(--bp-text-muted); }
.bpa-filter__link[aria-current="true"] .bpa-filter__zahl { color: inherit; }

/* ---- Register ---------------------------------------------------------- */
.bpa-liste { padding: clamp(22px, 3vw, 32px) 0 var(--bp-section-y); }
.bpa-liste__anzahl { margin: 0 0 14px; font-size: 14px; color: var(--bp-text-muted); font-variant-numeric: tabular-nums; }

.bpa-register { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bp-line); }
.bpa-zeile {
  position: relative; display: grid; gap: 18px;
  padding: 22px 0; border-bottom: 1px solid var(--bp-line);
}
@media (min-width: 760px) {
  .bpa-zeile { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3vw, 48px); align-items: center; padding: 30px 0; }
}
.bpa-zeile__bild { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--bp-bg-soft); }
.bpa-zeile__bild img { width: 100%; height: 100%; object-fit: cover; }
.bpa-zeile__ohne { display: grid; place-items: center; height: 100%; font-size: 14px; color: var(--bp-text-muted); }

.bpa-zeile__ort { margin: 0; font-size: 14px; color: var(--bp-text-muted); }
.bpa-zeile__titel { margin: 8px 0 0; font-size: clamp(19px, 2vw, 24px); font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
.bpa-zeile__link { color: var(--bp-text); text-decoration: none; transition: color 0.25s var(--bp-ease); }
/* Die ganze Zeile ist klickbar, der Link bleibt trotzdem nur der Titel. */
.bpa-zeile__link::after { content: ""; position: absolute; inset: 0; }
.bpa-zeile:hover .bpa-zeile__link { color: var(--bp-red); }
.bpa-zeile__link:focus-visible { outline: none; }
.bpa-zeile:focus-within { outline: 2px solid var(--bp-red); outline-offset: 4px; border-radius: 6px; }

.bpa-zeile__preis { margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.bpa-zeile__preis-wert { font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bpa-zeile__preis-label { font-size: 14px; color: var(--bp-text-muted); }

.bpa-masse { display: flex; flex-wrap: wrap; margin: 12px 0 0; padding: 0; list-style: none; font-size: 15px; font-variant-numeric: tabular-nums; }
.bpa-masse li + li::before { content: "·"; margin: 0 10px; color: var(--bp-text-muted); }

.bpa-leer { padding: 36px 0 8px; }
.bpa-leer p { margin: 0 0 18px; font-size: 16px; color: var(--bp-text-muted); }

/* ---- Abschluss --------------------------------------------------------- */
.bpa-ende { padding: clamp(40px, 5vw, 64px) 0; background: var(--bp-bg-soft); }
.bpa-ende__innen { display: grid; gap: 22px; align-items: center; }
@media (min-width: 900px) { .bpa-ende__innen { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; } }
.bpa-ende .bp-h3 { margin: 0; }
.bpa-ende .bp-lead { margin: 10px 0 0; }

/* ---- Objektseite ------------------------------------------------------- */
.bpa-objekt { padding: clamp(18px, 2.5vw, 32px) 0 var(--bp-section-y); }
.bpa-zurueck {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 14px; color: var(--bp-text-muted); text-decoration: none;
  transition: color 0.25s var(--bp-ease);
}
.bpa-zurueck:hover { color: var(--bp-red); }
.bpa-zurueck svg { width: 16px; height: 16px; }
.bpa-objekt__kopf { margin: 6px 0 clamp(22px, 3vw, 34px); max-width: 920px; }
.bpa-objekt__ort { margin: 0 0 12px; font-size: 15px; color: var(--bp-text-muted); }
.bpa-objekt__titel { margin: 0; }

/* Bildstreifen: beginnt an der Inhaltskante und läuft rechts aus dem Raster
   heraus. Wischen am Handy, Knöpfe und Pfeiltasten am Rechner. */
.bpa-galerie { --bpa-rand: max(var(--bp-gutter), calc((100% - var(--bp-max)) / 2 + var(--bp-gutter))); margin-bottom: clamp(26px, 4vw, 44px); }
.bpa-galerie__spur {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: var(--bpa-rand); scroll-padding-inline: var(--bpa-rand);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.bpa-galerie__spur::-webkit-scrollbar { display: none; }
.bpa-galerie__spur:focus-visible { outline: 2px solid var(--bp-red); outline-offset: 4px; }
.bpa-galerie__bild {
  flex: 0 0 auto; width: min(86vw, 880px); aspect-ratio: 3 / 2; margin: 0;
  border-radius: 18px; overflow: hidden; background: var(--bp-bg-soft); scroll-snap-align: start;
}
.bpa-galerie__bild img { width: 100%; height: 100%; object-fit: cover; }
.bpa-galerie__leiste { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }
.bpa-galerie__zaehler { font-size: 14px; color: var(--bp-text-muted); font-variant-numeric: tabular-nums; }
.bpa-galerie__knoepfe { display: flex; gap: 8px; }
.bpa-galerie__knoepfe[hidden] { display: none; }
.bpa-galerie__knopf {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--bp-line); background: #ffffff; color: var(--bp-text); cursor: pointer;
  transition: border-color 0.25s var(--bp-ease), color 0.25s var(--bp-ease);
}
.bpa-galerie__knopf:hover { border-color: var(--bp-red); color: var(--bp-red); }
.bpa-galerie__knopf svg { width: 18px; height: 18px; }

/* Am Handy steht die Anfragebox erst unter allen Texten. Diese Leiste holt
   Preis und Knopf nach oben. */
.bpa-schnell {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 0 30px; padding: 14px 16px 14px 20px; border: 1px solid var(--bp-line); border-radius: 16px;
}
.bpa-schnell p { margin: 0; display: flex; flex-direction: column; }
.bpa-schnell__label { font-size: 13px; color: var(--bp-text-muted); }
.bpa-schnell__wert { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }

.bpa-objekt__raster { display: grid; gap: clamp(36px, 4vw, 56px); }
@media (min-width: 1024px) {
  .bpa-schnell { display: none; }
  .bpa-objekt__raster { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; }
}
/* Mitlaufen nur, wenn die ganze Box samt Formular auf den Schirm passt.
   Sonst bliebe der Absendeknopf unter der Bildschirmkante hängen. */
@media (min-width: 1024px) and (min-height: 1080px) {
  .bpa-objekt__seite { position: sticky; top: calc(var(--bph-height) + 20px); }
}

.bpa-block + .bpa-block { margin-top: clamp(34px, 4vw, 50px); }
/* Größe und Schnitt kommen von .bp-h3, wie auf den übrigen Seiten. */
.bpa-block__titel { margin: 0 0 16px; }
.bpa-block__text p, p.bpa-block__text { margin: 0 0 14px; font-size: 16px; line-height: 1.75; max-width: 68ch; }
.bpa-block__text p:last-child { margin-bottom: 0; }

.bpa-daten { margin: 0; display: grid; border-top: 1px solid var(--bp-line); }
@media (min-width: 640px) { .bpa-daten { grid-template-columns: 1fr 1fr; column-gap: 36px; } }
.bpa-daten__zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--bp-line-light); }
.bpa-daten dt { font-size: 15px; color: var(--bp-text-muted); }
.bpa-daten dd { margin: 0; font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.bpa-grundrisse { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.bpa-grundrisse img { width: 100%; border: 1px solid var(--bp-line); border-radius: 12px; background: #ffffff; }

/* ---- Anfragebox -------------------------------------------------------- */
.bpa-box { padding: clamp(22px, 3vw, 30px); border: 1px solid var(--bp-line); border-radius: 22px; background: #ffffff; scroll-margin-top: calc(var(--bph-height) + 16px); }
.bpa-box__label { margin: 0; font-size: 14px; color: var(--bp-text-muted); }
.bpa-box__preis { margin: 2px 0 0; font-size: clamp(30px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.bpa-box__provision { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--bp-text-muted); }
.bpa-box__makler { margin: 20px 0 0; padding: 14px 0; border-block: 1px solid var(--bp-line-light); font-size: 15px; }
.bpa-box__makler p { margin: 0; }
.bpa-box__makler p + p { margin-top: 4px; }
.bpa-box__makler a { color: var(--bp-red); font-weight: 700; text-decoration: none; }

.bpa-form { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.bpa-form__titel { margin: 0; font-size: 17px; font-weight: 700; }
.bpa-form__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 380px) { .bpa-form__reihe { grid-template-columns: 1fr; } }
.bpa-feld { display: flex; flex-direction: column; gap: 6px; }
.bpa-feld label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bp-text-muted); }
.bpa-feld input, .bpa-feld select, .bpa-feld textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--bp-line);
  background: var(--bp-bg-softer); font-family: inherit; font-size: 15px; color: var(--bp-text);
  transition: border-color 0.25s var(--bp-ease), box-shadow 0.25s var(--bp-ease), background 0.25s var(--bp-ease);
}
.bpa-feld textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.bpa-feld input:focus, .bpa-feld select:focus, .bpa-feld textarea:focus {
  outline: none; background: #ffffff; border-color: var(--bp-red); box-shadow: 0 0 0 3px var(--bp-red-line);
}
.bpa-form__einwilligung { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.6; color: var(--bp-text-muted); cursor: pointer; }
.bpa-form__einwilligung input { flex-shrink: 0; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--bp-red); }
.bpa-form__einwilligung a { color: var(--bp-red); font-weight: 700; }
.bpa-form .bp-btn { width: 100%; }
.bpa-form__falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.bpa-meldung { margin: 18px 0 0; padding: 14px 16px; border-radius: 12px; font-size: 14.5px; line-height: 1.6; }
.bpa-meldung p { margin: 0; }
.bpa-meldung__titel { font-weight: 700; }
.bpa-meldung--ok { background: #eef8f3; color: #0d5a3d; }
.bpa-meldung--fehler { background: var(--bp-red-soft); color: var(--bp-red-dark); }

/* ---- Referenzen: Kontaktbogen ----------------------------------------- */
/* Bilder in ihrem echten Format, in Spalten gesetzt wie ein Kontaktbogen.
   Darunter der Stempel „Verkauft 2025“. Keine Preise, keine Adressen. */
.bpz-liste { padding: clamp(22px, 3vw, 32px) 0 var(--bp-section-y); }
.bpz-bogen { list-style: none; margin: 0; padding: 0; columns: 3 280px; column-gap: clamp(20px, 2.5vw, 36px); }
.bpz-eintrag { break-inside: avoid; margin: 0 0 clamp(28px, 3vw, 40px); }
.bpz-eintrag__bild { border-radius: 14px; overflow: hidden; background: var(--bp-bg-soft); }
.bpz-eintrag__bild img { width: 100%; height: auto; }
.bpz-eintrag__stempel { margin: 14px 0 0; font-size: 13px; font-weight: 700; color: var(--bp-red); font-variant-numeric: tabular-nums; }
.bpz-eintrag__titel { margin: 6px 0 0; font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.bpz-eintrag__ort, .bpz-eintrag__masse { margin: 6px 0 0; font-size: 14px; color: var(--bp-text-muted); font-variant-numeric: tabular-nums; }