/* Page layout — ratgeber (/ratgeber/). Layout only, tokens only (BUILD-CONTRACT §4, BRICKS §0.3). */

/* 2 · guide grid: four numbered guide cards, the Glossar as a wide dark card. */
.rg-guide .card__foot { padding-top: var(--sp-2); }
.rg-glossar-card { grid-column: 1 / -1; }
@media (min-width: 48em) {
	.rg-glossar-card { flex-direction: row; align-items: center; gap: var(--sp-6); }
	.rg-glossar-card .badge { margin-bottom: 0; flex: none; }
}
.rg-glossar-card__body > * + * { margin-top: var(--sp-2); }

/* 3 · nach Lebenslage: coin head left (vertically centred), boxed rows right. */
.rg-lagen__list { max-width: 46rem; }
@media (min-width: 62em) {
	.rg-lagen { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
	.rg-lagen__head { margin-bottom: 0; }
	.rg-lagen__list { max-width: none; }
}

/* 4 · warum diese Themen: photo rows (figure + paragraph), a coin closes the list. */
.rg-themes { display: grid; gap: var(--sp-7); max-width: 64rem; }
.rg-themes__row { display: grid; gap: var(--sp-4); }
.rg-themes__row + .rg-themes__row { padding-top: var(--sp-7); border-top: 1px solid var(--c-line); }
.rg-themes__fig { margin: 0; }
.rg-themes__fig .media { --ratio: 16 / 9; }
.rg-themes__fig--haus .media > img { object-position: 50% 78%; }
.rg-themes__fig figcaption { margin-top: var(--sp-2); color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.4; }
.rg-themes .prose { max-width: 66ch; font-size: var(--fs-md); line-height: 1.6; }
@media (min-width: 43.75em) {
	.rg-themes__row { grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-7); align-items: center; }
	.rg-themes__fig .media { --ratio: 1 / 1; }
	.rg-themes__coin { display: grid; place-items: center; }
}

/* 6 · router: text left, 2 × 2 route tiles right. */
.rg-router__tiles .cardrow__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rg-router__tiles .cardrow__item { justify-content: space-between; min-height: 150px; }
@media (max-width: 37.49em) {
	.rg-router__tiles .cardrow__item { min-height: 0; }
}