/* Ratgeber-Seite – angelehnt an andresen-immobilien.de/ratgeber/ */

.page-ratgeber {
  scroll-padding-top: 5rem;
}

/* Hero-Bild – leichter Graustufen-Filter wie auf andresen-immobilien.de/ratgeber/ */
#ratgeber-startpic picture {
  display: block;
  filter: grayscale(0.6);
}

#ratgeber-startpic .picBox img {
  width: 100%;
  height: clamp(320px, 70vh, 900px);
  object-fit: cover;
}

/* Titel + Intro */
#ratgeber-starttext .outer_wrapper > .title {
  width: 100%;
  max-width: 1440px;
  padding-top: clamp(2rem, 1.17rem + 2.78vw, 4.5rem);
  padding-bottom: clamp(3.75rem, -1.875rem + 18.75vw, 20.625rem);
  margin: 0 auto;
  text-align: center;
}

#ratgeber-starttext .outer_wrapper > .title h1 {
  font-family: "Portrait", "freight-display-pro", Georgia, serif;
  font-size: clamp(3.125rem, 1.04rem + 6.94vw, 9.375rem);
  line-height: 0.9;
  font-weight: 300;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #2a2a2a;
}

#ratgeber-starttext .outer_wrapper > .txt_copy {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: clamp(3rem, 2rem + 3vw, 6rem);
  text-align: center;
}

#ratgeber-starttext .outer_wrapper > .txt_copy p {
  font-family: "Portrait", "freight-display-pro", Georgia, serif;
  font-size: clamp(1.2rem, 0.9rem + 0.85vw, 2rem);
  line-height: 1.15;
  font-weight: 100;
  letter-spacing: -0.01em;
  color: #2a2a2a;
}

/* Immowissen-Ratgeber-Widget */
#ratgeber-scripts {
  padding-bottom: clamp(4rem, 3rem + 3vw, 6rem);
}

#ratgeber-scripts .outer_wrapper {
  max-width: 1236px;
  margin: 0 auto;
}

#ratgeber-scripts .txt_copy {
  width: 100%;
}

.ratgeber-widget-blocker {
  padding: clamp(2rem, 1.5rem + 2vw, 3rem);
  text-align: center;
  background: #f0efee;
  border: 1px solid #d8d6d4;
}

.ratgeber-widget-blocker p {
  max-width: 42rem;
  margin: 0 auto 1.25rem;
  font-family: "Portrait", "freight-display-pro", Georgia, serif;
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem);
  line-height: 1.3;
  color: #3b3a39;
}

.ratgeber-widget-blocker a {
  color: inherit;
  text-decoration: underline;
}

.ratgeber-widget-btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 1px solid #3b3a39;
  background: #3b3a39;
  color: #f0efee;
  font-family: "Untitled", "freight-sans-pro", Arial, sans-serif;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
}

.ratgeber-widget-btn:hover {
  background: #2a2a2a;
  border-color: #2a2a2a;
}