/* ==========================================================================
   BLICKPUNKT IMMOBILIEN — STARTSEITE
   Block 1 Hero (.bph-h) · Block 2 Was wir tun (.bpb-page) · Block 3 Wertrechner (.bpc)
   Setzt assets/css/main.css voraus.
   ========================================================================== */

/* ==========================================================================
   BLOCK 1 · HERO MIT TABS
   ========================================================================== */

.bph-h {
  position: relative;
  isolation: isolate;
  padding: clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 64px);
  background: #1a0507;
  overflow: hidden;
}

.bph-h__bg { position: absolute; inset: 0; z-index: -1; }
/* Ohne transform: scale(). Das Luftbild bewegt sich hier gar nicht, es brauchte
   also nie einen Ueberstand - die vier Prozent haben das groesste Bild der
   Seite lediglich hochgerechnet und weich gemacht. object-fit: cover fuellt
   den Rahmen bereits vollstaendig aus. */
.bph-h__bg-img {
  width: 100%; height: 100%; object-fit: cover;
}
/* Das Luftbild von Thale soll sichtbar bleiben. Links liegt die Schrift, dort
   deckt der Verlauf stark ab; nach rechts oeffnet er sich auf das Bodetal. */
.bph-h__bg-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      rgba(18, 4, 6, 0.93) 0%,
      rgba(18, 4, 6, 0.80) 30%,
      rgba(18, 4, 6, 0.50) 58%,
      rgba(18, 4, 6, 0.30) 100%),
    linear-gradient(to top, rgba(18, 4, 6, 0.72) 0%, transparent 52%);
}

/* Unterhalb von 900px steht die Schrift ueber der Bildmitte - dort braucht es
   eine flaechige Abdeckung statt des seitlichen Verlaufs. */
@media (max-width: 900px) {
  .bph-h__bg-overlay {
    background:
      linear-gradient(180deg, rgba(18, 4, 6, 0.88) 0%, rgba(18, 4, 6, 0.72) 45%, rgba(18, 4, 6, 0.86) 100%);
  }
}

.bph-h__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}

.bph-h__content { display: flex; flex-direction: column; gap: 20px; }

.bph-h__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  padding: 8px 16px 8px 13px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.9);
}

.bph-h__title {
  font-size: clamp(34px, 5.6vw, 62px); font-weight: 800;
  letter-spacing: -0.033em; line-height: 1.03;
  color: #ffffff; text-wrap: balance;
}

.bph-h__lead {
  font-size: clamp(15px, 1.5vw, 17.5px); line-height: 1.7;
  color: rgba(255, 255, 255, 0.74); max-width: 46ch;
}

/* --- Such-Card ---------------------------------------------------------- */

.bph-h__card {
  background: #ffffff;
  border-radius: 22px;
  box-shadow: var(--bp-shell);
  overflow: hidden;
}

.bph-h__tabs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--bp-bg-soft);
  border-bottom: 1px solid var(--bp-line);
}
/* Zwei Zeilen, und die zweite ist auf allen drei Reitern reserviert - auch auf
   denen ohne Badge. Vorher war das eine zentrierte Flexspalte: "Kaufen" und
   "Mieten" standen dann mittig, "Verkaufen" wurde von seinem Badge nach oben
   gedrueckt, und die drei Beschriftungen lagen sichtbar nicht auf einer Linie.
   Die 21px sind die gemessene Hoehe des Badges (9.5px Schrift plus 3px
   Innenabstand oben und unten). Wer an der Badge-Groesse dreht, zieht diesen
   Wert mit nach, sonst rutscht die Reihe wieder auseinander. */
.bph-h__tab {
  position: relative;
  display: grid;
  grid-template-rows: auto 21px;
  align-content: center; justify-items: center;
  gap: 5px;
  min-height: 62px; padding: 12px 8px;
  background: transparent; border: none;
  font-family: var(--bp-font); font-size: 14.5px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--bp-text-muted);
  transition: all 0.3s var(--bp-ease);
}
.bph-h__tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px;
  background: var(--bp-red); transform: scaleX(0);
  transition: transform 0.4s var(--bp-ease);
}
.bph-h__tab:hover { color: var(--bp-red); }
.bph-h__tab--active { background: #ffffff; color: var(--bp-red); }
.bph-h__tab--active::after { transform: scaleX(1); }

.bph-h__tab-badge {
  padding: 3px 9px; border-radius: 100px;
  background: var(--bp-red-soft); color: var(--bp-red);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.bph-h__tab--active .bph-h__tab-badge { background: var(--bp-red); color: #ffffff; }

.bph-h__panel { padding: clamp(20px, 3vw, 28px); }
.bph-h__panel[hidden] { display: none; }

.bph-h__panel-head { margin-bottom: 16px; }
.bph-h__live {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 600; color: var(--bp-text-light);
  letter-spacing: 0.01em;
}

.bph-h__panel-text {
  font-size: 14.5px; line-height: 1.68; color: var(--bp-text-muted);
  margin-bottom: 18px;
}
.bph-h__checks { margin-bottom: 22px; }

.bph-h__cats { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.bph-h__cat {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 15px; border-radius: 14px;
  border: 1.5px solid var(--bp-line); min-height: 48px;
  transition: all 0.3s var(--bp-ease);
}
.bph-h__cat:hover {
  border-color: var(--bp-red); background: var(--bp-red-soft);
  transform: translateY(-2px);
}
.bph-h__cat-icon {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bp-red-soft); color: var(--bp-red);
}
.bph-h__cat-icon svg { width: 19px; height: 19px; }
.bph-h__cat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bph-h__cat-title { font-size: 14.5px; font-weight: 700; color: var(--bp-text); letter-spacing: -0.01em; }
.bph-h__cat-sub { font-size: 12px; color: var(--bp-text-light); }

.bph-h__actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.bph-h__actions .bp-btn { width: 100%; }
.bph-h__link {
  text-align: center; font-size: 13px; font-weight: 600;
  color: var(--bp-text-muted); transition: color 0.25s ease;
}
.bph-h__link:hover { color: var(--bp-red); }

/* --- Trust-Bar ---------------------------------------------------------- */

.bph-h__trust {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2vw, 24px);
  margin-top: clamp(28px, 4vw, 48px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.bph-h__trust-item { display: flex; flex-direction: column; gap: 5px; }
.bph-h__trust-num {
  font-size: clamp(20px, 2.6vw, 30px); font-weight: 800;
  letter-spacing: -0.03em; color: #ffffff;
  font-variant-numeric: tabular-nums;
}
.bph-h__trust-label {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   BLOCK 2 · WAS WIR TUN
   ========================================================================== */

.bpb-page {
  position: relative;
  padding: var(--bp-section-y) 0;
  background: var(--bp-bg);
  overflow: hidden;
}

.bpb-page__intro { margin-bottom: clamp(36px, 5vw, 64px); }

.bpb-page__metrics {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: center;
  gap: clamp(14px, 2.5vw, 26px);
  padding: 14px 26px; border-radius: 100px;
  background: var(--bp-bg-soft); border: 1px solid var(--bp-line);
}
.bpb-page__metric {
  font-size: 13px; font-weight: 500; color: var(--bp-text-muted);
  display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap;
}
.bpb-page__metric strong {
  font-size: 17px; font-weight: 800; color: var(--bp-red);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.bpb-page__metric-sep { width: 1px; height: 18px; background: var(--bp-line); }

/* --- Zickzack-Rows ------------------------------------------------------ */

.bpb-page__rows {
  position: relative;
  display: flex; flex-direction: column;
  /* Abstand zwischen den fuenf Bereichszeilen. Vorher bis 112px - zusammen
     mit den 430px hohen Bildern stand zwischen zwei Zeilen fast ein
     Viertel Bildschirm Leere. 84px halten die Zeilen als Folge lesbar. */
  gap: clamp(44px, 6vw, 84px);
}
/* Timeline-Connector durch die Mitte */
.bpb-page__rows::before {
  content: ''; position: absolute; top: 8%; bottom: 8%; left: 50%;
  width: 1px; transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, var(--bp-red-line) 12%, var(--bp-red-line) 88%, transparent);
  pointer-events: none;
}

.bpb-page__row {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: clamp(32px, 5vw, 70px);
}
.bpb-page__row--reverse .bpb-page__media { order: 2; }
.bpb-page__row--reverse .bpb-page__content { order: 1; }

/* Die Reportagefotos sind im Querformat aufgenommen. Ein Hochformat-Rahmen
   wuerde die Haelfte der Bildbreite wegschneiden - 4:3 haelt das Motiv
   zusammen und macht die Zeilen zugleich kompakter. */
.bpb-page__media {
  position: relative; overflow: hidden;
  border-radius: 22px; aspect-ratio: 4 / 3;
  background: var(--bp-red-soft);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.24);
}
/* Der Ueberstand fuer den Parallax-Effekt entsteht ueber die Groesse, nicht
   ueber transform: scale(). Das ist der Unterschied zwischen scharf und
   weich: Bei scale() rastert der Browser das Bild in Rahmengroesse und zieht
   die fertige Rastergrafik anschliessend auf - jeder Bildpunkt wird also
   hochgerechnet. Ueber die Hoehe rastert er gleich in der groesseren
   Endgroesse, aus echten Bilddaten.
   Der Ueberstand steht nur nach oben und unten, weil initParallax() in
   main.js ausschliesslich senkrecht verschiebt (translate3d(0, y, 0), maximal
   16 Pixel). 108 Prozent geben 4 Prozent Spielraum je Seite - genug.
   Hier stand vorher zusaetzlich width: 108% mit left: -4%. Das war wirkungslos:
   main.css setzt global img { max-width: 100% }, was die Breite wieder auf den
   Rahmen zurueckgeschnitten hat. Die Zeile hat also nichts bewegt, aber jede
   Berechnung der Anzeigebreite verfaelscht - und danach richtet sich das
   sizes-Attribut in build/bildflaechen.py. */
.bpb-page__media img {
  position: absolute; top: -4%; left: 0;
  width: 100%; height: 108%; object-fit: cover;
}
/* Hier stand eine Ausnahme fuer Hochformat-Portraits (.bpb-page__media--person
   mit object-position: 50% 12%). Sie wird nicht mehr gebraucht: In den fuenf
   Reportagezeilen stehen jetzt ausschliesslich 3:2-Aufnahmen, die in den
   4:3-Rahmen fast verlustfrei passen. Ein 4:5-Portrait verliert darin rund die
   Haelfte seiner Hoehe und steht anschliessend als Grossaufnahme neben vier
   Uebersichtsbildern - gleiche Rahmengroesse, sichtbar anderer Massstab. Wer
   hier ein Portrait zeigen will, braucht dafuer eine eigene Zeilenform. */
/* will-change nur dort, wo der Parallax-Effekt auch laeuft. Dauerhaft gesetzt
   haelt es auf jedem Geraet sechs Compositor-Ebenen im Speicher — auf dem
   Handy kostet das mehr, als der Effekt dort bringt (er ist abgeschaltet). */
@media (min-width: 1025px) {
  .bpb-page__media img { will-change: transform; }
}
.bpb-page__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(17, 17, 17, 0.55) 0%, transparent 45%);
  pointer-events: none;
}

.bpb-page__media-tag {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  padding: 7px 14px; border-radius: 100px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bp-red);
}
.bpb-page__media-num {
  position: absolute; top: 6px; right: 20px; z-index: 2;
  font-size: clamp(64px, 9vw, 108px); font-weight: 800;
  letter-spacing: -0.05em; line-height: 1;
  color: rgba(255, 255, 255, 0.2);
}
.bpb-page__media-caption {
  position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2;
  font-size: clamp(16px, 2vw, 21px); font-weight: 700;
  letter-spacing: -0.02em; color: #ffffff;
}

.bpb-page__content { display: flex; flex-direction: column; gap: 18px; }
/* Ohne Zierstrich davor oder dahinter — siehe .bp-eyebrow in main.css.
   Gleiche Groesse wie dort, damit "Bereich 01" und "Was wir tun" als eine
   Ebene gelesen werden. */
.bpb-page__chapter {
  display: block;
  font-size: 13px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--bp-red);
}
.bpb-page__chapter::before, .bpb-page__chapter::after { content: none; }
.bpb-page__content .bp-btn-row { margin-top: 6px; }

/* --- Final-CTA ---------------------------------------------------------- */

.bpb-page__cta {
  position: relative; overflow: hidden;
  margin-top: clamp(44px, 6vw, 76px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: clamp(24px, 4vw, 48px);
  padding: clamp(32px, 5vw, 56px);
  border-radius: 28px;
  background: linear-gradient(135deg, var(--bp-red) 0%, var(--bp-red-dark) 100%);
  box-shadow: 0 30px 70px -28px rgba(133, 14, 21, 0.65);
}
.bpb-page__cta-deco {
  position: absolute; top: -40%; right: -6%;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, transparent 68%);
  pointer-events: none;
}
.bpb-page__cta-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
.bpb-page__cta-title {
  font-size: clamp(22px, 3vw, 32px); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.15; color: #ffffff;
}
.bpb-page__cta-lead {
  font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.8); max-width: 52ch;
}
.bpb-page__cta-actions {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 12px;
}

/* ==========================================================================
   BLOCK 3 · WERTRECHNER
   ========================================================================== */

.bpc-section {
  position: relative; overflow: hidden;
  padding: var(--bp-section-y) 0;
  background: var(--bp-bg-soft);
}

.bpc-section__intro { margin-bottom: clamp(32px, 5vw, 52px); }
.bpc-section__points { justify-content: center; }
.bpc-section__points strong { color: var(--bp-red); font-weight: 800; letter-spacing: 0.02em; }

/* --- Tool-Shell --------------------------------------------------------- */

.bpc {
  max-width: 860px; margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--bp-line);
  border-radius: 26px;
  box-shadow: var(--bp-shell);
  overflow: hidden;
}

.bpc__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px clamp(20px, 3.5vw, 34px);
  border-bottom: 1px solid var(--bp-line-light);
}
.bpc__mark {
  width: 44px; height: 44px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--bp-red) 0%, var(--bp-red-dark) 100%);
  color: #ffffff; box-shadow: 0 8px 20px -8px rgba(133, 14, 21, 0.55);
}
.bpc__mark svg { width: 21px; height: 21px; }
.bpc__status {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 600; color: var(--bp-text-light);
  letter-spacing: 0.02em;
}

/* --- Fortschritt -------------------------------------------------------- */

.bpc__progress {
  display: flex; align-items: center; gap: 16px;
  padding: 18px clamp(20px, 3.5vw, 34px);
}
.bpc__progress-track {
  flex: 1; height: 5px; border-radius: 100px;
  background: var(--bp-line); overflow: hidden;
}
.bpc__progress-fill {
  height: 100%; width: 10%; border-radius: 100px;
  background: linear-gradient(90deg, var(--bp-red) 0%, var(--bp-red-dark) 100%);
  transition: width 0.6s var(--bp-ease);
}
.bpc__progress-step {
  font-size: 12px; font-weight: 600; color: var(--bp-text-light);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bpc__progress-step strong { color: var(--bp-red); font-weight: 800; }

/* --- Antwort-Chips ------------------------------------------------------ */

.bpc__chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 clamp(20px, 3.5vw, 34px);
}
.bpc__chips:not(:empty) { padding-bottom: 18px; }

.bpc__chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 100px;
  background: var(--bp-red-soft); border: 1px solid var(--bp-red-line);
  font-size: 12px; font-weight: 600; color: var(--bp-red);
  animation: bpcChipIn 0.4s var(--bp-ease) both;
}
.bpc__chip span {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bp-text-light);
}

@keyframes bpcChipIn {
  from { opacity: 0; transform: translateY(6px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* --- Schritte ----------------------------------------------------------- */

.bpc__body { position: relative; padding: 0 clamp(20px, 3.5vw, 34px) clamp(24px, 3.5vw, 34px); }

.bpc__step { display: none; border: none; padding: 0; margin: 0; min-width: 0; }
.bpc__step--current { display: block; animation: bpcStepIn 0.45s var(--bp-ease) both; }

@keyframes bpcStepIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.bpc__q {
  display: block; padding: 0; float: none;
  font-size: clamp(19px, 2.4vw, 25px); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.25; color: var(--bp-text);
}
.bpc__hint {
  margin-top: 8px; margin-bottom: 24px;
  font-size: 13.5px; line-height: 1.6; color: var(--bp-text-light);
}

/* --- Options ------------------------------------------------------------ */

.bpc__options { display: grid; grid-template-columns: 1fr; gap: 10px; }
.bpc__options--compact { grid-template-columns: repeat(2, 1fr); }

.bpc__opt {
  position: relative; text-align: left;
  display: flex; align-items: center; gap: 14px;
  min-height: 48px; padding: 16px 18px;
  background: #ffffff; border: 1.5px solid var(--bp-line);
  border-radius: 16px; font-family: var(--bp-font);
  transition: all 0.3s var(--bp-ease);
}
.bpc__opt:hover {
  border-color: var(--bp-red); background: var(--bp-red-soft);
  transform: translateY(-2px);
}
.bpc__opt--selected {
  border-color: var(--bp-red); background: var(--bp-red-soft);
  box-shadow: 0 10px 26px -14px rgba(133, 14, 21, 0.5);
}

.bpc__opt-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bp-red-soft); color: var(--bp-red);
  transition: all 0.3s var(--bp-ease);
}
.bpc__opt-icon svg { width: 20px; height: 20px; }
.bpc__opt:hover .bpc__opt-icon,
.bpc__opt--selected .bpc__opt-icon { background: var(--bp-red); color: #ffffff; }

.bpc__opt-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.bpc__opt-label { font-size: 14.5px; font-weight: 700; color: var(--bp-text); letter-spacing: -0.01em; }
.bpc__opt-desc { font-size: 12px; line-height: 1.5; color: var(--bp-text-light); }

.bpc__opt-pick {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--bp-line); position: relative;
  transition: all 0.3s var(--bp-ease);
}
.bpc__opt-pick::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  background: var(--bp-red); transform: scale(0);
  transition: transform 0.3s var(--bp-ease);
}
.bpc__opt--selected .bpc__opt-pick { border-color: var(--bp-red); }
.bpc__opt--selected .bpc__opt-pick::after { transform: scale(1); }

.bpc__opt-badge {
  position: absolute; top: -8px; right: 14px;
  padding: 3px 9px; border-radius: 100px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #ffffff; white-space: nowrap;
}
.bpc__opt-badge--green { background: var(--bp-green); }
.bpc__opt-badge--orange { background: var(--bp-orange); }

/* --- Slider ------------------------------------------------------------- */

.bpc__slider {
  padding: clamp(24px, 4vw, 36px) clamp(18px, 3vw, 28px);
  border: 1.5px solid var(--bp-line); border-radius: 20px;
  background: var(--bp-bg-softer);
}
.bpc__slider-display {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  margin-bottom: 26px;
}
.bpc__slider-display strong {
  font-size: clamp(36px, 6vw, 54px); font-weight: 800;
  letter-spacing: -0.04em; color: var(--bp-red);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.bpc__slider-display span {
  font-size: 15px; font-weight: 600; color: var(--bp-text-light);
}

.bpc__slider input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 100px;
  background: var(--bp-line); outline: none; margin: 0;
}
.bpc__slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--bp-red) 0%, var(--bp-red-dark) 100%);
  border: 3px solid #ffffff;
  box-shadow: 0 4px 14px -4px rgba(133, 14, 21, 0.7);
  cursor: pointer; transition: transform 0.2s var(--bp-ease);
}
.bpc__slider input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.12); }
.bpc__slider input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bp-red); border: 3px solid #ffffff;
  box-shadow: 0 4px 14px -4px rgba(133, 14, 21, 0.7); cursor: pointer;
}
.bpc__slider input[type="range"]:focus-visible { outline: 2px solid var(--bp-red); outline-offset: 6px; }

.bpc__slider-scale {
  display: flex; justify-content: space-between; margin-top: 14px;
  font-size: 11.5px; font-weight: 600; color: var(--bp-text-light);
}

.bpc__next-row { display: flex; justify-content: flex-end; margin-top: 22px; }

/* --- Sonstiges / freie Eingabe ------------------------------------------ */
.bpc__custom-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 10px 16px;
  background: #ffffff; border: 1.5px dashed var(--bp-line);
  border-radius: 100px; font-family: var(--bp-font);
  font-size: 13px; font-weight: 600; color: var(--bp-text-muted);
  cursor: pointer; transition: all 0.3s var(--bp-ease);
}
.bpc__custom-toggle svg { width: 15px; height: 15px; color: var(--bp-red); flex-shrink: 0; }
.bpc__custom-toggle:hover { border-color: var(--bp-red); color: var(--bp-red); background: var(--bp-red-soft); }
.bpc__custom-toggle--active { border-style: solid; border-color: var(--bp-red); color: var(--bp-red); background: var(--bp-red-soft); }
.bpc__custom-toggle-hint { font-weight: 500; color: var(--bp-text-light); }
.bpc__custom-toggle:hover .bpc__custom-toggle-hint,
.bpc__custom-toggle--active .bpc__custom-toggle-hint { color: inherit; }

.bpc__custom { margin-top: 12px; }
.bpc__custom-field { position: relative; display: flex; align-items: center; }
.bpc__custom-input {
  width: 100%; padding: 14px 60px 14px 16px;
  border: 1.5px solid var(--bp-line); border-radius: 14px;
  font-family: var(--bp-font); font-size: 16px; font-weight: 600; color: var(--bp-text);
  background: #ffffff; transition: border-color 0.25s ease;
  -moz-appearance: textfield; appearance: textfield;
}
.bpc__custom-input::-webkit-outer-spin-button,
.bpc__custom-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bpc__custom-input:focus { outline: none; border-color: var(--bp-red); }
.bpc__custom-input--error { border-color: #c0392b; background: var(--bp-red-soft); }
.bpc__custom-unit { position: absolute; right: 16px; font-size: 14px; font-weight: 600; color: var(--bp-text-light); pointer-events: none; }

/* --- Zusammenstellung ---------------------------------------------------- */
/* Hier stand ein Radar (.bpc__radar): Suchstrahl im conic-gradient, drei
   blinkende Punkte, dazu die Ueberschrift "Ihre Angaben werden ausgewertet".
   Das ist die Bildsprache einer laufenden Berechnung. Berechnet wird an dieser
   Stelle aber nichts - der Schritt buendelt die Angaben und uebergibt sie an
   Frau Fahldieck, die anruft. Der Radar hat also eine Zahl versprochen, die
   nie kommt.
   Geblieben ist die Form: derselbe Kreis, dieselben drei Ringe. Weg sind der
   Suchstrahl und die Blips, in die Mitte kommt eine Mappe. Die Ringe pulsieren
   nach aussen - das liest sich als "wird gesammelt" und nicht als "wird
   abgetastet". */

.bpc__step--analyse { text-align: center; padding: clamp(16px, 3vw, 32px) 0; }

.bpc__gather {
  position: relative;
  width: 130px; height: 130px; margin: 0 auto 26px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, var(--bp-red-soft) 100%);
  border: 1px solid var(--bp-red-line);
  display: flex; align-items: center; justify-content: center;
}
.bpc__gather-ring {
  position: absolute; top: 50%; left: 50%;
  width: 40%; height: 40%;
  border: 1px solid var(--bp-red-line); border-radius: 50%;
  /* Der Startzustand steht hier UND als 0%-Bild in der Kurve. Ohne den Wert
     hier stuende der Ring in dem einen Frame vor dem Animationsstart auf
     voller Groesse - ein kurzes Aufblitzen beim Betreten des Schritts. */
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  animation: bpcPuls 2.8s ease-out infinite;
}
.bpc__gather-ring--1 { animation-delay: 0s; }
.bpc__gather-ring--2 { animation-delay: 0.9s; }
.bpc__gather-ring--3 { animation-delay: 1.8s; }

@keyframes bpcPuls {
  0%   { transform: translate(-50%, -50%) scale(1);    opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(2.3);  opacity: 0; }
}

.bpc__gather-core {
  position: relative; z-index: 1;
  width: 52px; height: 52px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--bp-red) 0%, var(--bp-red-dark) 100%);
  color: #ffffff;
  box-shadow: 0 10px 24px -8px rgba(133, 14, 21, 0.55);
}
.bpc__gather-core svg { width: 24px; height: 24px; }

.bpc__analyse-title {
  font-size: clamp(18px, 2.2vw, 22px); font-weight: 700;
  letter-spacing: -0.02em; color: var(--bp-text); margin-bottom: 8px;
}
.bpc__analyse-sub {
  font-size: 13.5px; line-height: 1.65; color: var(--bp-text-light);
  max-width: 420px; margin: 0 auto 22px;
}

.bpc__stages {
  display: flex; flex-direction: column; gap: 10px;
  max-width: 420px; margin: 0 auto; text-align: left;
}
.bpc__stage {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: 13px;
  background: var(--bp-bg-soft); border: 1px solid var(--bp-line-light);
  font-size: 13.5px; font-weight: 500; color: var(--bp-text-light);
  transition: all 0.4s var(--bp-ease);
}
.bpc__stage::before {
  content: ''; width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--bp-line);
  transition: all 0.4s var(--bp-ease);
}
.bpc__stage--active {
  border-color: var(--bp-red-line); background: var(--bp-red-soft); color: var(--bp-text);
}
.bpc__stage--active::before {
  border-color: var(--bp-red);
  border-top-color: transparent;
  animation: bpcSpin 0.8s linear infinite;
}
.bpc__stage--done { color: var(--bp-text); background: #ffffff; border-color: var(--bp-line); }
.bpc__stage--done::before {
  border-color: var(--bp-green); background: var(--bp-green);
  animation: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 10px; background-position: center; background-repeat: no-repeat;
}

@keyframes bpcSpin { to { transform: rotate(360deg); } }

/* --- Kontakt-Formular --------------------------------------------------- */

/* Ablauf ueber den Feldern: Anruf, Ortstermin, Einschaetzung.
   Steht bewusst im gedeckten Ton und nicht in Rot - es ist eine Erklaerung,
   kein Hinweiskasten. Rot traegt in diesem Werkzeug bereits die Auswahl
   (.bpc__opt--selected) und das Versprechen darunter (.bpc__promise); ein
   dritter roter Block wuerde die Reihenfolge der Wichtigkeit einebnen. */
.bpc__flow {
  display: flex; flex-direction: column; gap: 12px;
  margin: 0 0 24px; padding: clamp(16px, 2.5vw, 20px);
  border-radius: 16px;
  background: var(--bp-bg-soft); border: 1px solid var(--bp-line-light);
}
.bpc__flow-item { display: flex; align-items: flex-start; gap: 13px; }
.bpc__flow-num {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 8px; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bp-red); color: #ffffff;
  font-size: 12px; font-weight: 800;
}
.bpc__flow-text {
  font-size: 13.5px; line-height: 1.65; color: var(--bp-text-muted); min-width: 0;
}
.bpc__flow-text strong {
  display: block; color: var(--bp-text); font-weight: 700;
  font-size: 14px; letter-spacing: -0.005em; margin-bottom: 2px;
}

.bpc__fields {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  margin-bottom: 20px;
}
.bpc__field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bpc__field--full { grid-column: 1 / -1; }
.bpc__label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bp-text-muted);
}
/* War frueher ein <em>, das hier wieder aufgerichtet werden musste. "(optional)"
   ist aber keine Betonung, sondern eine Angabe zum Feld - jetzt ein neutrales
   span, das gar nicht erst kursiv anfaengt. */
.bpc__label-opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--bp-text-light); }

.bpc__field input,
.bpc__field textarea {
  width: 100%; padding: 14px 16px; min-height: 48px;
  border: 1.5px solid var(--bp-line); border-radius: 13px;
  background: #ffffff; font-family: var(--bp-font); font-size: 15px;
  color: var(--bp-text); transition: all 0.25s var(--bp-ease);
}
.bpc__field textarea { resize: vertical; line-height: 1.6; }
.bpc__field input::placeholder,
.bpc__field textarea::placeholder { color: #b5b5b5; }
.bpc__field input:focus,
.bpc__field textarea:focus {
  outline: none; border-color: var(--bp-red);
  box-shadow: 0 0 0 4px rgba(133, 14, 21, 0.08);
}

.bpc__check {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 22px; cursor: pointer;
}
.bpc__check input { position: absolute; opacity: 0; width: 0; height: 0; }
.bpc__check-box {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; margin-top: 1px;
  border: 1.5px solid var(--bp-line); background: #ffffff;
  display: flex; align-items: center; justify-content: center;
  color: #ffffff; transition: all 0.25s var(--bp-ease);
}
.bpc__check-box svg { width: 12px; height: 12px; opacity: 0; transform: scale(0.6); transition: all 0.25s var(--bp-ease); }
.bpc__check input:checked + .bpc__check-box { background: var(--bp-red); border-color: var(--bp-red); }
.bpc__check input:checked + .bpc__check-box svg { opacity: 1; transform: none; }
.bpc__check input:focus-visible + .bpc__check-box { outline: 2px solid var(--bp-red); outline-offset: 3px; }
.bpc__check-text { font-size: 13px; line-height: 1.6; color: var(--bp-text-muted); }
.bpc__check-text a { color: var(--bp-red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Der Knopf traegt die laengste Beschriftung des ganzen Formulars. .bp-btn
   setzt global white-space: nowrap - das ist fuer kurze Knoepfe richtig, hier
   aber faengt der Text ab etwa 340 Pixel Fensterbreite an, links und rechts
   aus dem Knopf herauszulaufen (der Pfeil verschwindet dann ganz). Da der
   Knopf ohnehin die volle Breite hat, darf der Text stattdessen umbrechen;
   das schmalere Innenpolster schiebt den Umbruch zusaetzlich nach hinten. */
.bpc__submit {
  width: 100%;
  white-space: normal;
  text-align: center;
  padding-left: 16px;
  padding-right: 16px;
}

/* Rueckmeldung nach dem Absenden. Leer nimmt der Absatz keinen Platz ein -
   sonst stuende zwischen Knopf und Versprechen dauerhaft eine Luecke, die
   nur in dem einen Moment nach dem Klick etwas enthaelt. */
.bpc__form-status:empty { display: none; }
.bpc__form-status {
  margin-top: 14px; padding: 12px 16px; border-radius: 12px;
  background: var(--bp-bg-soft); border: 1px solid var(--bp-line-light);
  font-size: 13px; line-height: 1.6; color: var(--bp-text-muted);
  text-align: center;
}

/* --- Ansprechpartnerin --------------------------------------------------- */

.bpc__promise {
  margin-top: 24px; padding: clamp(20px, 3vw, 28px);
  border-radius: 20px; background: var(--bp-red-soft);
  border: 1px solid var(--bp-red-line);
}
.bpc__promise-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
/* Traegt jetzt ein Portraet statt der Initialen "SF". Der weisse Ring setzt
   den Kopf vom roten Untergrund ab - ohne ihn laeuft das Haar an der Kante in
   den Hintergrund und der Kreis franst optisch aus.
   ---------------------------------------------------------------------------
   Der Beschnitt laeuft NICHT ueber object-fit: cover. Das Motiv ist 500 x 625
   und zeigt Frau Fahldieck etwa ab der Huefte; ein quadratischer Beschnitt aus
   der vollen Breite haette in einem 56-Pixel-Kreis einen fingernagelgrossen
   Kopf mit viel Oberkoerper darunter ergeben. Gebraucht wird ein Ausschnitt,
   kein Beschnitt.

   Im Quellbild (500 x 625) liegt der Scheitel bei etwa y = 20, das Kinn bei
   y = 165. Ueber dem Kopf sind also nur rund 20 Pixel Luft - mehr gibt das
   Motiv nicht her. Der Ausschnitt muss deshalb bei y = 0 beginnen; jeder
   groessere Startwert kappt den Scheitel, und weil der Rahmen rund ist,
   schneidet die Woelbung oben zusaetzlich mit.

   Gewaehlt: 260 x 260 ab y = 0, waagerecht mittig. Damit sitzt der Kopf
   vollstaendig im Kreis, das Gesicht liegt knapp oberhalb der Mitte (wie bei
   Portraits ueblich), und von den Schultern bleibt gerade so viel stehen,
   dass es nicht wie ein Passbild wirkt.

   Umrechnung fuer einen anderen Ausschnitt der Hoehe H ab y0:
     width      = 50000 / H   Prozent   (hier 50000/260 = 192%)
     translateY = -y0 / 6,25  Prozent   (hier y0 = 0, also 0)
   Waagerecht zentriert left/translateX von selbst richtig.
   Wird das Motiv ausgetauscht, muessen Scheitel- und Kinnhoehe neu abgelesen
   und die Zahlen nachgerechnet werden, sonst sitzt der Kopf schief. */
.bpc__promise-avatar {
  position: relative;
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--bp-red) 0%, var(--bp-red-dark) 100%);
  color: #ffffff; font-size: 15px; font-weight: 800; letter-spacing: 0.02em;
  box-shadow: 0 0 0 2px #ffffff, 0 8px 18px -8px rgba(133, 14, 21, 0.5);
}
/* Die <picture>-Huelle von bildflaechen.py steht schon global auf
   display: contents (siehe main.css), das <img> ist hier also direktes Kind
   des Rahmens - die Prozentwerte unten beziehen sich damit auf die 56 Pixel. */
.bpc__promise-avatar img {
  position: absolute;
  left: 50%; top: 0;
  width: 192%; height: auto;
  /* main.css deckelt jedes Bild global auf max-width: 100%. Ohne diese Zeile
     bliebe die Breite oben bei 100 Prozent haengen - der Ausschnitt waere
     wieder der volle Oberkoerper, und zwar lautlos: 192% stuende im
     Stilblatt, gerechnet wuerde 100%. */
  max-width: none;
  transform: translateX(-50%);
}
.bpc__promise-intro { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bpc__promise-intro strong { font-size: 15px; font-weight: 700; color: var(--bp-text); letter-spacing: -0.01em; }
.bpc__promise-intro span { font-size: 12px; color: var(--bp-text-light); }

.bpc__promise-text {
  font-size: 14.5px; line-height: 1.7; color: var(--bp-text-muted);
  margin-bottom: 18px;
}

.bpc__promise-contacts {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px;
  padding-top: 16px; border-top: 1px solid var(--bp-red-line);
}
.bpc__promise-contacts li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bpc__promise-contacts li > span:first-child {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bp-text-light);
}
.bpc__promise-contacts a,
.bpc__promise-contacts li > span:last-child {
  font-size: 13.5px; font-weight: 600; color: var(--bp-text);
  overflow-wrap: anywhere;
}
.bpc__promise-contacts a:hover { color: var(--bp-red); }

/* --- Fuß ---------------------------------------------------------------- */

.bpc__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px clamp(20px, 3.5vw, 34px);
  border-top: 1px solid var(--bp-line-light);
  background: var(--bp-bg-softer);
}
.bpc__back {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 16px; border-radius: 100px;
  background: transparent; border: 1.5px solid var(--bp-line);
  font-family: var(--bp-font); font-size: 13px; font-weight: 600;
  color: var(--bp-text-muted); transition: all 0.3s var(--bp-ease);
}
.bpc__back svg { width: 15px; height: 15px; }
.bpc__back:hover:not(:disabled) { border-color: var(--bp-red); color: var(--bp-red); }
.bpc__back:disabled { opacity: 0.35; cursor: not-allowed; }
.bpc__foot-note { font-size: 11.5px; color: var(--bp-text-light); text-align: right; }

/* ==========================================================================
   HUERDEN — WARUM NICHT ALLEIN VERKAUFEN
   ==========================================================================
   Ein Kasten in gedecktem Ton zwischen den fuenf Bereichen und dem Abschluss.
   Er ist absichtlich ruhig gehalten: Der Inhalt ist bereits unangenehm genug,
   und ein zusaetzlich lauter Rahmen liesse ihn nach Werbung aussehen statt
   nach einer sachlichen Aufzaehlung.

   Die sechs Punkte sind zweispaltig, aber nicht als Karten. Karten haetten
   hier suggeriert, dass man sich einen davon aussuchen kann - gemeint ist
   aber die Summe. */

.bphu {
  /* Steht direkt unter der letzten Bereichszeile, die mit einem randlosen
     Bild endet. Weniger Abstand liest sich wie eine Bildunterschrift statt
     wie ein eigener Abschnitt. */
  margin-top: clamp(48px, 6vw, 80px);
  padding: clamp(28px, 4vw, 52px);
  border-radius: 24px;
  background: var(--bp-bg-soft);
  border: 1px solid var(--bp-line);
}

.bphu__head { max-width: 660px; }

.bphu__title {
  margin-top: 10px;
  font-size: clamp(23px, 2.6vw, 31px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--bp-text);
}

.bphu__lead {
  margin-top: 14px;
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.65;
  color: var(--bp-text-muted);
}

.bphu__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 30px) clamp(24px, 3.4vw, 48px);
  margin-top: clamp(28px, 3.6vw, 44px);
}

/* Der rote Strich links steht statt eines Aufzaehlungspunktes. Er laeuft ueber
   die volle Hoehe des Eintrags und bindet Titel und Text damit sichtbar
   zusammen - ein Punkt haette nur an der ersten Zeile gehangen. */
.bphu__item {
  padding-left: clamp(14px, 1.6vw, 20px);
  border-left: 2px solid var(--bp-red-line);
}

.bphu__item-title {
  display: block;
  font-size: 15px; font-weight: 700; line-height: 1.4;
  color: var(--bp-red);
}

.bphu__item-text {
  display: block;
  margin-top: 6px;
  font-size: 14.5px; line-height: 1.65;
  color: var(--bp-text-muted);
}

.bphu__close {
  margin-top: clamp(26px, 3.4vw, 40px);
  padding-top: clamp(20px, 2.6vw, 28px);
  border-top: 1px solid var(--bp-line);
  max-width: 720px;
  font-size: clamp(15.5px, 1.2vw, 17px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--bp-text);
}

/* ==========================================================================
   TEAMABSCHNITT DER STARTSEITE
   ==========================================================================
   Einleitung, Gruppenfoto, zwei Knoepfe. Mehr nicht.

   Die fuenf Einzelportraits, die hier zwischenzeitlich standen, sind wieder
   entfernt worden; die zugehoerigen Klassen .bpst__face* gibt es deshalb nicht
   mehr. Auf der Startseite reicht das Gruppenbild, alles Weitere steht auf
   team.html.

   Der Rahmen laeuft auf volle Containerbreite, damit seine linke Kante auf
   der Kante von Ueberschrift, Text und Knoepfen sitzt. Die dazugehoerige
   sizes-Angabe steht in build/bildflaechen.py - wer hier aendert, aendert
   dort mit, sonst laedt der Browser die falsche Bildstufe. */
.bpst__group-frame {
  /* .bp-intro ist ein Flex-Container ohne Aussenabstand nach unten - ohne
     diesen Wert stossen Einleitungstext und Bildkante direkt aneinander. */
  margin: clamp(32px, 4.5vw, 56px) 0 0;
  overflow: hidden;
  border-radius: 24px;
  background: var(--bp-bg-soft);
  border: 1px solid var(--bp-line);
  box-shadow: var(--bp-shell);
}

.bpst__group-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Gleicher Wert wie der Abstand ueber dem Rahmen, damit das Bild mittig
   zwischen Text und Knoepfen sitzt und nicht an einer Seite klebt. */
.bpst__actions { margin-top: clamp(32px, 4.5vw, 56px); justify-content: center; }

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */

@media (max-width: 1100px) {
  .bph-h__inner { grid-template-columns: 1fr; }
  .bph-h__card { max-width: 560px; }
  .bpb-page__row { gap: clamp(28px, 4vw, 44px); }
}

@media (max-width: 1024px) {
  .bpb-page__rows::before { display: none; }
  .bpb-page__row { grid-template-columns: 1fr; gap: 28px; }
  .bpb-page__row--reverse .bpb-page__media { order: 0; }
  .bpb-page__row--reverse .bpb-page__content { order: 0; }
  .bpb-page__media { aspect-ratio: 3 / 2; }
  .bpb-page__media img { transform: none; }

  .bpb-page__cta { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .bph-h__card { max-width: none; }
  .bph-h__trust { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  .bpb-page__metrics { padding: 14px 18px; }

  .bpc__options--compact { grid-template-columns: 1fr; }
  .bpc__fields { grid-template-columns: 1fr; }
  .bpc__promise-contacts { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* Hochkant wird das 16:9-Band sonst zu einem schmalen Streifen, in dem von
     den Personen kaum noch etwas uebrig bleibt. */
  .bpst__group-frame img { aspect-ratio: 3 / 2; }

  .bphu__list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .bpst__actions { flex-direction: column; align-items: stretch; }
  .bpst__actions .bp-btn { width: 100%; }

  /* Kleineres Badge, also auch eine niedrigere reservierte Zeile:
     8.5px Schrift plus 2px Innenabstand oben und unten. */
  .bph-h__tab { font-size: 13px; min-height: 58px; grid-template-rows: auto 18px; }
  .bph-h__tab-badge { font-size: 8.5px; padding: 2px 7px; }
  .bpb-page__cta-actions { flex-direction: column; align-items: stretch; }
  .bpb-page__cta-actions .bp-btn { width: 100%; }

  .bpc__next-row { justify-content: stretch; }
  .bpc__next-row .bp-btn { width: 100%; }
  .bpc__foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .bpc__back { justify-content: center; }
  .bpc__foot-note { text-align: center; }
}

@media (max-width: 420px) {
  .bph-h__trust { grid-template-columns: 1fr; gap: 14px; }
  .bph-h__trust-item { flex-direction: row; align-items: baseline; gap: 10px; }
  .bpb-page__media-num { font-size: 56px; }
  .bpc__opt { padding: 14px; gap: 11px; }
  .bpc__opt-icon { width: 38px; height: 38px; }
}

@media (min-width: 1800px) {
  .bpc { max-width: 940px; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  /* Die Ringe pulsieren aus der Mitte heraus und stehen ohne Animation auf
     opacity: 0 - sie waeren also unsichtbar. Deshalb hier nicht nur die
     Animation abschalten, sondern den Ruhezustand nachreichen: ein stiller
     Ring, der die Form des Kreises traegt. */
  .bpc__gather-ring { animation: none; opacity: 0.5; }
  .bpc__gather-ring--2 { width: 62%; height: 62%; }
  .bpc__gather-ring--3 { width: 88%; height: 88%; }
  .bpc__stage--active::before { animation: none; }
  .bpc__step--current,
  .bpc__chip { animation: none; }
  .bpb-page__media img { transform: none; }
}