/* ==========================================================================
   Ratgeber (BottImmo/immowissen) — Übersicht (Teaser) + Detailseite
   ========================================================================== */

/* Übersichts-Header (Einleitung) zentriert — überschreibt die globale
   Links-Ausrichtung der Section-Header (höhere Spezifität). */
.section.ratgeber-header > .container > .section__label,
.section.ratgeber-header > .container > h1 {
  text-align: center;
}
.section.ratgeber-header > .container > .section__intro {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

/* 3D-Buch (Übersichts-Teaser) */
.ratgeber-book {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.22));
}

/* ── Übersicht: ein Teaser pro Ratgeber (3D-Buch links, Text rechts) ─────── */
.ratgeber-teaser {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
.ratgeber-teaser__textcol h2 { margin: 0 0 1rem; }
.ratgeber-teaser__textcol p  { margin: 0 0 1.75rem; line-height: 1.7; }
.ratgeber-teaser__bookcol .ratgeber-book { max-width: 260px; }

/* ── Detailseite: Buch-Cover links | Stichpunkte rechts, Formular darunter ── */
.ratgeber-detail {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 6rem;   /* Spalten-Abstand verdoppelt (war 3rem) */
  align-items: start;
  /* Header → Content = var(--space-2xl) (64px), unser Standard-Abstand. */
  margin-top: var(--space-2xl);
}

.ratgeber-detail-img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.ratgeber-detail__intro {
  margin: 0 0 var(--space-sm);
}

.ratgeber-detail__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md);
}
.ratgeber-detail__bullets li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.7rem;
  line-height: 1.5;
}
.ratgeber-detail__bullets li::before {
  content: "\2714";
  position: absolute;
  left: 0;
  top: 0;
  color: #2e9e5b;
  font-weight: 700;
}

.ratgeber-detail__outro {
  line-height: 1.7;
  margin: 0;
}

/* Formular unter den Spalten, volle Breite. Abstand zum Text-Block = space-xl.
   Padding INNERHALB des iframes gehört BottImmo — von außen nicht steuerbar. */
.ratgeber-detail__form {
  margin-top: var(--space-xl);   /* Abstand nach oben wieder kleiner */
  border: 1px solid #ccc;
  padding: 1.25rem;
}
.ratgeber-detail__form iframe {
  width: 100%;
  border: 0;
}

/* ── Mobil: Bild/Buch oben, Text darunter ────────────────────────────────── */
@media (max-width: 767px) {
  .ratgeber-teaser,
  .ratgeber-detail {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .ratgeber-teaser__bookcol { max-width: 240px; margin-inline: auto; }
  .ratgeber-teaser__textcol { text-align: center; }
  .ratgeber-detail__imgcol  { max-width: 240px; margin-inline: auto; }
}