/* Ratgeber-Übersicht (app/content/seiten/ratgeber.php): Gruppen nach Lage des Lesers, links Kopf, rechts die Artikel */

.rg { padding-top: clamp(16px, .5rem + 2vw, 40px); }
.rg-gruppe { display: grid; gap: 20px 64px; padding-block: 36px 44px; border-top: 2px solid var(--schwarz); }
.rg-gruppe:first-child { padding-top: 32px; }
.rg-gruppe:last-child { padding-bottom: 0; }
.rg-gruppe__kopf .h3 { margin: 0 0 .45em; text-wrap: balance; }
.rg-gruppe__kopf p { margin: 0; color: var(--text-2); max-width: 30em; }
@media (min-width: 960px) {
  .rg-gruppe { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .rg-gruppe__kopf { position: sticky; top: calc(var(--kopf-h) + 28px); align-self: start; }
}

.rg-liste { display: grid; gap: 0 40px; }
@media (min-width: 640px) { .rg-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rg-artikel { padding: 18px 0 26px; border-top: 1px solid var(--alu); }
.rg-gruppe .rg-artikel:nth-child(-n+2) { border-top-color: transparent; padding-top: 4px; }
@media (max-width: 639px) { .rg-gruppe .rg-artikel:nth-child(2) { border-top-color: var(--alu); padding-top: 18px; } }
.rg-artikel .etikett { margin-bottom: .7em; }
.rg-artikel .h4 { margin: 0 0 .45em; font-size: 1.2rem; text-wrap: balance; }
.rg-artikel .h4 a { color: var(--schwarz); text-decoration: none; }
.rg-artikel .h4 a:hover { text-decoration: underline; text-decoration-color: var(--rot); text-underline-offset: .18em; }
.rg-artikel p:last-child { margin: 0; color: var(--text-2); }