/*
 * Gemeinsame Typografie und Medienregeln für bestehende Ratgeberinhalte.
 * Die Selektoren bleiben auf .hb-guide begrenzt, damit andere Seitentypen
 * ihr vorhandenes Layout behalten.
 */
.hb-guide {
  --guide-copy-width: 940px;
  --guide-text-size: 1rem;
  --guide-section-space: 60px;
}

.hb-guide .article-copy,
.hb-guide .section-heading,
.hb-guide .guide-context-card {
  width: min(100%, var(--guide-copy-width));
}

main#main-content .hb-guide .article-copy {
  max-width: var(--guide-copy-width) !important;
  margin-inline: auto;
  font-size: var(--guide-text-size);
}

.hb-guide .article-copy > :where(p, ul, ol, blockquote) + :where(p, ul, ol, blockquote) {
  margin-top: 1.1em;
}

.hb-guide section {
  padding-block: var(--guide-section-space);
}

.hb-guide :where(.guide-hero-image, .depth-card-image, .related-image, .inline-guide-visual) {
  display: block;
  max-width: 100%;
  object-fit: cover;
}

@media (max-width: 760px) {
  .hb-guide {
    --guide-text-size: 1rem;
    --guide-section-space: 48px;
  }

  .hb-guide .article-copy {
    line-height: 1.7;
  }
}