/**
 * Homepage sections. Hero (image/content + info strip) is first;
 * later sections are added here in their own phases.
 */

/* ---------- Hero ---------- */

/*
 * Header + Hero + information strip together fill exactly the first
 * screen. The frosted header floats over the top of the Hero (image runs
 * underneath), so the wrapper takes the full viewport height and the Hero
 * reserves the header height as top padding — the content area stays the
 * same as when the header sat above it. `svh` keeps it fully visible on
 * mobile while the browser toolbar is shown.
 */
/* --hero-strip-h: height of the info strip, which lies on the lower edge of
   the hero photo (the photo runs underneath, like under the header). */
.hero-screen {
	--hero-strip-h: 265px;

	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

@media (min-width: 600px) {
	.hero-screen {
		--hero-strip-h: 181px;
	}
}

@media (min-width: 768px) {
	.hero-screen {
		--hero-strip-h: 203px;
	}
}

@media (min-width: 1080px) {
	.hero-screen {
		--hero-strip-h: 116px;
	}
}

@supports (height: 100svh) {
	.hero-screen {
		min-height: 100svh;
	}
}

/* Phones: the Hero alone fills the first screen; the strip follows below
   with comfortable spacing instead of being squeezed in. */
@media (max-width: 767px) {
	.hero-screen {
		min-height: 0;
	}

	/* The first screen stays the same; the photo continues below it under
	   the strip. */
	.hero {
		min-height: calc(100vh + var(--hero-strip-h));
	}

	@supports (height: 100svh) {
		.hero {
			min-height: calc(100svh + var(--hero-strip-h));
		}
	}
}

/* The hero box reaches under the strip (padding + negative margin of the
   strip's height): the content area — and so headline, copy and CTA —
   stays exactly where it was. */
.hero {
	position: relative;
	margin-bottom: calc(-1 * var(--hero-strip-h));
	padding-top: var(--site-header-height);
	padding-bottom: var(--hero-strip-h);
	flex: 1 0 auto;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: var(--color-green-900);
	isolation: isolate;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 78% center;
}

/* The scrim ends where the strip begins: like the header, the strip's
   glass lies on the plain photo. */
.hero__scrim {
	position: absolute;
	inset: 0 0 var(--hero-strip-h);
	z-index: 1;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--color-green-900) 88%, transparent) 0%,
		color-mix(in srgb, var(--color-green-900) 80%, transparent) 32%,
		color-mix(in srgb, var(--color-green-900) 35%, transparent) 55%,
		transparent 70%
	);
}

.hero__decor {
	position: absolute;
	z-index: 2;
	pointer-events: none;
}

/*
 * "Jeder Mensch zählt" (.glass-badge, components.css). Phones: small,
 * bottom right, beside the CTA (which is not full width there).
 */
.hero__badge {
	right: var(--container-padding);
	bottom: calc(var(--hero-strip-h) + var(--space-4));
	width: clamp(76px, 20vw, 88px);
}

@media (min-width: 768px) {
	.hero__badge {
		right: var(--space-6);
		bottom: calc(var(--hero-strip-h) + var(--space-6));
		width: clamp(124px, 12.5vw, 172px);
	}
}

.hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--container-max-width);
	margin-inline: auto;
	/* Minimum breathing room only — the content is vertically centered in
	   the full-height Hero. */
	padding: var(--space-7) var(--container-padding);
}

.hero__content {
	max-width: 620px;
	color: var(--color-white);
}

.hero__eyebrow {
	margin: 0 0 var(--space-4);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hero__headline {
	margin: 0 0 var(--space-5);
	color: var(--color-white);
	font-size: clamp(2rem, 3.2vw + 1.2rem, 3.5rem);
	line-height: 1.08;
}

.hero__lead {
	margin: 0 0 var(--space-6);
	max-width: 46ch;
	font-size: 1.0625rem;
	line-height: 1.55;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

/* ---------- Hero: mobile-first responsive ---------- */

@media (max-width: 767px) {
	.hero__image {
		object-position: 68% center;
	}

	.hero__scrim {
		background: linear-gradient(
			180deg,
			color-mix(in srgb, var(--color-green-900) 80%, transparent) 0%,
			color-mix(in srgb, var(--color-green-900) 68%, transparent) 55%,
			color-mix(in srgb, var(--color-green-900) 50%, transparent) 100%
		);
	}

	/* Content is vertically centered in the full-height Hero, so less fixed
	   padding is needed; keeps Hero + strip within one phone screen. */
	.hero__inner {
		padding-block: var(--space-6);
	}

	.hero__content {
		max-width: none;
	}

	.hero__lead {
		max-width: none;
	}
}

/* ---------- Information strip ---------- */

/*
 * The info strip lies on the lower edge of the hero photo as the same
 * frosted glass as the header (own glass layer, cream 70%, blur 18px,
 * saturate 1.25), without lines — header and strip frame the photo as a
 * pair. Quieter titles (500); text and icons in the full text colour for
 * contrast on the photo.
 * Same container as the hero content, so the first icon starts on the
 * hero's text edge.
 */
.hero-strip {
	position: relative;
	z-index: 3;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: var(--hero-strip-h);
}

.hero-strip::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgba(247, 243, 236, 0.7);
	-webkit-backdrop-filter: blur(18px) saturate(1.25);
	backdrop-filter: blur(18px) saturate(1.25);
	pointer-events: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.hero-strip::before {
		background-color: rgba(247, 243, 236, 0.95);
	}
}

.hero-strip__list {
	--hero-strip-icon-size: 26px;
	--hero-strip-gap: var(--space-5);

	list-style: none;
	margin: 0;
	padding: var(--space-2) var(--container-padding);
	width: 100%;
	max-width: var(--container-max-width);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr;
}

.hero-strip__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-width: 0;
	padding-block: var(--space-2);
}

/* Phones: hairlines between the stacked rows. */
.hero-strip__item + .hero-strip__item {
	border-top: 1px solid var(--color-rule-soft);
}

.hero-strip__icon {
	flex-shrink: 0;
	width: var(--hero-strip-icon-size);
	height: var(--hero-strip-icon-size);
	color: var(--color-text);
}

.hero-strip__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hero-strip__primary {
	font-weight: 500;
	color: var(--color-text);
}

/* Full text colour: on the glass over the photo the muted tone drops below
   4.5:1 (measured); the hierarchy comes from size and weight (500 / 400). */
.hero-strip__secondary {
	font-size: 0.875rem;
	color: var(--color-text);
}

/* Fine translucent vertical separator, inset from the band edges. */
.hero-strip__item::before {
	content: none;
	position: absolute;
	left: 0;
	top: 22%;
	width: 1px;
	height: 56%;
	background-color: var(--color-rule);
}

/* Tablets: 2×2 — separator in the middle, hairline between the rows. */
@media (min-width: 600px) {
	.hero-strip__list {
		--hero-strip-icon-size: 28px;

		grid-template-columns: repeat(2, 1fr);
		padding-block: var(--space-3);
	}

	.hero-strip__item {
		padding-block: var(--space-4);
	}

	.hero-strip__item:nth-child(even) {
		padding-left: var(--hero-strip-gap);
	}

	.hero-strip__item:nth-child(even)::before {
		content: "";
	}

	.hero-strip__item + .hero-strip__item {
		border-top: 0;
	}

	.hero-strip__item:nth-child(n + 3) {
		border-top: 1px solid var(--color-rule-soft);
	}
}

/*
 * From 768px the hero and the strip share the first screen. The strip
 * height (--hero-strip-h) keeps the hero's content area exactly as it was.
 */
@media (min-width: 1080px) {
	/* The first screen unit is 10px shorter than the viewport, so a sliver
	   of the next section shows below the strip. */
	.hero-screen {
		min-height: calc(100vh - 10px);
	}

	@supports (height: 100svh) {
		.hero-screen {
			min-height: calc(100svh - 10px);
		}
	}
}

/* Desktop: one row, equal columns, separators at ¼, ½ and ¾. From 1080px
   every text fits on one line (at 1024px "Gutes Essen. Gemeinschaft." would
   wrap by a pixel). */
@media (min-width: 1080px) {
	.hero-strip__list {
		grid-template-columns: repeat(4, 1fr);
		padding-block: var(--space-2);
	}

	.hero-strip__item + .hero-strip__item {
		padding-left: var(--hero-strip-gap);
	}

	.hero-strip__item + .hero-strip__item::before {
		content: "";
	}

	.hero-strip__item:nth-child(n + 3) {
		border-top: 0;
	}
}

/* ---------- Homepage anchor targets ---------- */

/* Breathing room above the reached heading; the sticky header itself is
   covered by `scroll-padding-top` on <html> (layout.css). */
#soforthilfe,
#ueber-uns,
#aktuelles {
	scroll-margin-top: var(--space-6);
}

/* smooth-scroll.js focuses the reached section (tabindex="-1") so keyboard
   users continue from there; a ring around a whole section isn't useful. */
#soforthilfe:focus,
#ueber-uns:focus,
#aktuelles:focus {
	outline: none;
}

/* ---------- Homepage sections (D-025) ---------- */

/*
 * Rhythm below the hero: a light photo band with one glass panel
 * ("Was brauche ich jetzt?"), cream with the offers page's aurora
 * ("Unsere Angebote"), calm cream carried by photos ("Berg der Hoffnung")
 * and a botanical photo band with one glass panel ("Aktuelles & Termine").
 * Straight edges between the bands; heads use .section-intro, panels
 * .glass-panel, links .link-arrow (components.css).
 */
.immediate-help,
.offers-preview,
.about-berg,
.latest-posts {
	padding-block: clamp(72px, 8vw, 120px);
}

.immediate-help__inner,
.offers-preview__inner,
.about-berg__inner,
.latest-posts__inner {
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

/* ---------- Was brauche ich jetzt? ---------- */

/* The photo fades softly into the cream of the middle ground below (its
   lower padding holds the fade, so the glass panel stays on the photo). */
.immediate-help {
	--help-fade: clamp(120px, 14vw, 200px);

	padding-bottom: var(--help-fade);
}

.immediate-help::after {
	inset: auto 0 0;
	height: var(--help-fade);
	background: linear-gradient(to bottom, rgba(247, 243, 236, 0) 0%, rgba(247, 243, 236, 0.55) 45%, var(--color-background) 100%);
}

.immediate-help__head {
	display: grid;
	gap: var(--space-5);
}

/* "Manche Wege sind schwer. Wir gehen ein Stück mit." — beside the intro
   from 768px, in its own grid column so it never covers the text. */
.immediate-help__note {
	display: none;
}

@media (min-width: 768px) {
	.immediate-help__head {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: var(--space-6);
	}

	.immediate-help__note {
		display: block;
		width: clamp(200px, 22vw, 320px);
		margin-top: var(--space-6);
	}

	.immediate-help__note-image {
		display: block;
		width: 100%;
		height: auto;
	}
}

.help-panel {
	margin-top: clamp(40px, 5vw, 64px);
}

.help-panel__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Phones: a compact list — icon left, text right, hairlines between. */
.help-card {
	position: relative;
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	align-items: start;
	column-gap: var(--space-4);
	padding: var(--space-5) var(--space-5) var(--space-4);
	transition: background-color 0.2s ease;
}

.help-card + .help-card {
	border-top: 1px solid var(--color-rule-soft);
}

/* Fine inset separator between columns (tablet/desktop). */
.help-card::before {
	content: none;
	position: absolute;
	left: 0;
	top: var(--space-6);
	bottom: var(--space-6);
	width: 1px;
	background-color: var(--color-rule);
}

.help-card__icon {
	width: 32px;
	height: 32px;
	color: var(--color-text);
}

.help-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
	height: 100%;
}

.help-card__title {
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 0.4vw + 1.15rem, 1.5rem);
	line-height: 1.2;
}

.help-card__link {
	color: inherit;
	text-decoration: none;
}

/* The whole column is the link target. */
.help-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.help-card__link:focus-visible {
	outline: none;
}

.help-card--linked:focus-within {
	outline: 3px solid var(--color-accent);
	outline-offset: -3px;
}

.help-card__copy {
	margin: 0;
	color: var(--color-text);
	font-size: 1rem;
	line-height: 1.55;
}

/* Links of all columns sit on one line. */
.help-card__cta {
	margin-top: auto;
	padding-top: var(--space-2);
	font-size: 1rem;
}

.help-card--linked:hover {
	background-color: color-mix(in srgb, var(--color-white) 30%, transparent);
}

.help-card--linked:hover .link-arrow__icon,
.help-card--linked:focus-within .link-arrow__icon {
	transform: translateX(3px);
}

@media (min-width: 600px) {
	.help-panel__list {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Icon row at its own height, the text block takes the rest, so the
	   titles of a row start on one line however long the copy is. */
	.help-card {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		row-gap: var(--space-4);
		padding: var(--space-6);
	}

	.help-card__cta {
		padding-top: var(--space-3);
	}

	.help-card__icon {
		width: 56px;
		height: 56px;
	}

	.help-card + .help-card {
		border-top: 0;
	}

	.help-card:nth-child(n + 3) {
		border-top: 1px solid var(--color-rule-soft);
	}

	.help-card:nth-child(even)::before {
		content: "";
	}
}

@media (min-width: 1080px) {
	.help-panel__list {
		grid-template-columns: repeat(4, 1fr);
	}

	.help-card {
		padding: var(--space-7) var(--space-5);
	}

	.help-card:first-child {
		padding-left: var(--space-6);
	}

	.help-card:last-child {
		padding-right: var(--space-6);
	}

	.help-card__icon {
		width: 64px;
		height: 64px;
	}

	.help-card:nth-child(n + 3) {
		border-top: 0;
	}

	.help-card + .help-card::before {
		content: "";
		top: var(--space-7);
		bottom: var(--space-7);
	}
}

/* ---------- Middle ground: Unsere Angebote + Berg der Hoffnung ---------- */

/*
 * The two middle sections share one calm cream ground with an aurora that
 * flows through both (as on the offers page) — no edge between them; the
 * photo bands above and below frame it with straight edges. Their shared
 * gap is one calm spacing, not two section paddings.
 */
.home-ground {
	background:
		/* Starts and ends in plain cream, where the photos above and below
		   fade out / in. */
		linear-gradient(to bottom, var(--color-background) 0, rgba(247, 243, 236, 0) clamp(160px, 18vw, 280px)),
		linear-gradient(to top, var(--color-background) 0, rgba(247, 243, 236, 0) clamp(160px, 18vw, 280px)),
		radial-gradient(ellipse 60% 30% at 86% 14%, var(--aurora-sage), transparent 70%),
		radial-gradient(ellipse 55% 28% at 18% 30%, var(--aurora-sage-soft), transparent 70%),
		radial-gradient(ellipse 55% 32% at 24% 68%, var(--aurora-apricot), transparent 70%),
		radial-gradient(ellipse 60% 30% at 84% 86%, var(--aurora-sage-soft), transparent 70%),
		var(--color-background);
}

.home-ground .offers-preview {
	padding-top: clamp(32px, 4vw, 56px);
	padding-bottom: clamp(48px, 5vw, 80px);
}

.home-ground .about-berg {
	padding-top: clamp(48px, 5vw, 80px);
	padding-bottom: clamp(32px, 4vw, 56px);
}

/* ---------- Unsere Angebote ---------- */

/*
 * Page-wise carousel (.carousel__*, assets/js/carousel.js): only complete
 * offers per view — 1 on phones, 2 on tablets, 4 from 1080px. The entries
 * use the full content width (in line with the head above); with more than
 * one page a small centred row below — chevron, dots, chevron — shows that
 * the row can be swiped and pages it without swiping.
 */
.offer-carousel {
	--per-view: 1;
	--offer-gap: var(--space-5);

	margin-top: clamp(40px, 5vw, 64px);
}

@media (min-width: 600px) {
	.offer-carousel {
		--per-view: 2;
	}
}

@media (min-width: 900px) {
	.offer-carousel {
		--per-view: 3;
	}
}

@media (min-width: 1080px) {
	.offer-carousel {
		--per-view: 4;
		--offer-gap: var(--space-6);
	}
}

/*
 * The viewport is a size container (its own font stays the reader's): the
 * breakpoints above are only upper limits; the container queries below
 * show 4, 3, 2 or 1 cards — as many as leave every offer name room for one
 * line (D-037). data-title-tier (template) is the longest title in
 * characters, rounded up to 12/16/20/24/28. One card needs
 * tier × 0.6em × 1.375 (Georgia bold ≈ 0.55em per character at the
 * largest title size, with a reserve); the thresholds add the gaps in px.
 * In em, they scale with the reader's font size and zoom.
 */
.offer-carousel__viewport {
	container: offer-carousel / inline-size;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.offer-carousel__viewport::-webkit-scrollbar {
	display: none;
}

.offer-carousel__list {
	display: flex;
	gap: var(--offer-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	transition: opacity 0.2s ease-out;
}

.offer-carousel__item {
	--offer-fit: 1;
	--offer-n: min(var(--per-view), var(--offer-fit));
	display: flex;
	flex: 0 0 calc((100% - (var(--offer-n) - 1) * var(--offer-gap)) / var(--offer-n));
	min-width: 0;
	scroll-snap-align: start;
}

/* tier 12: one card 9.9em */
@container offer-carousel (width >= calc(19.8em + 32px)) { .offer-carousel[data-title-tier="12"] .offer-carousel__item { --offer-fit: 2; } }
@container offer-carousel (width >= calc(29.7em + 64px)) { .offer-carousel[data-title-tier="12"] .offer-carousel__item { --offer-fit: 3; } }
@container offer-carousel (width >= calc(39.6em + 96px)) { .offer-carousel[data-title-tier="12"] .offer-carousel__item { --offer-fit: 4; } }

/* tier 16: one card 13.2em */
@container offer-carousel (width >= calc(26.4em + 32px)) { .offer-carousel[data-title-tier="16"] .offer-carousel__item { --offer-fit: 2; } }
@container offer-carousel (width >= calc(39.6em + 64px)) { .offer-carousel[data-title-tier="16"] .offer-carousel__item { --offer-fit: 3; } }
@container offer-carousel (width >= calc(52.8em + 96px)) { .offer-carousel[data-title-tier="16"] .offer-carousel__item { --offer-fit: 4; } }

/* tier 20: one card 16.5em */
@container offer-carousel (width >= calc(33em + 32px)) { .offer-carousel[data-title-tier="20"] .offer-carousel__item { --offer-fit: 2; } }
@container offer-carousel (width >= calc(49.5em + 64px)) { .offer-carousel[data-title-tier="20"] .offer-carousel__item { --offer-fit: 3; } }
@container offer-carousel (width >= calc(66em + 96px)) { .offer-carousel[data-title-tier="20"] .offer-carousel__item { --offer-fit: 4; } }

/* tier 24: one card 19.8em */
@container offer-carousel (width >= calc(39.6em + 32px)) { .offer-carousel[data-title-tier="24"] .offer-carousel__item { --offer-fit: 2; } }
@container offer-carousel (width >= calc(59.4em + 64px)) { .offer-carousel[data-title-tier="24"] .offer-carousel__item { --offer-fit: 3; } }
@container offer-carousel (width >= calc(79.2em + 96px)) { .offer-carousel[data-title-tier="24"] .offer-carousel__item { --offer-fit: 4; } }

/* tier 28: one card 23.1em */
@container offer-carousel (width >= calc(46.2em + 32px)) { .offer-carousel[data-title-tier="28"] .offer-carousel__item { --offer-fit: 2; } }
@container offer-carousel (width >= calc(69.3em + 64px)) { .offer-carousel[data-title-tier="28"] .offer-carousel__item { --offer-fit: 3; } }
@container offer-carousel (width >= calc(92.4em + 96px)) { .offer-carousel[data-title-tier="28"] .offer-carousel__item { --offer-fit: 4; } }

/* Controls row below the entries: ‹ • • • • › */
.offer-carousel__controls:not([hidden]),
.news-carousel__controls:not([hidden]) {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-1);
}

.offer-carousel__controls:not([hidden]) {
	margin-top: var(--space-4);
}

.offer-carousel__nav,
.news-carousel__nav {
	width: 44px;
	height: 44px;
}

.offer-carousel__dots,
.news-carousel__dots {
	padding-inline: var(--space-2);
}

.offer-card {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	/* Stay as wide as the carousel slot, even with a long single-word title. */
	min-width: 0;
	transition: transform 0.2s ease-out;
}

.offer-card__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background:
		radial-gradient(ellipse 80% 70% at 30% 40%, var(--aurora-sage), transparent 70%),
		radial-gradient(ellipse 60% 60% at 75% 65%, var(--aurora-apricot), transparent 70%),
		var(--color-surface-warm);
}

.offer-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter 0.3s ease;
}

.offer-card:hover .offer-card__image {
	filter: brightness(1.05);
}

.offer-card__media-placeholder {
	width: 100%;
	height: 100%;
}

.offer-card__body {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: var(--space-2);
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-rule);
}

.offer-card__title {
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-heading);
	/* Offer names stay on one line and are never hyphenated (D-037): the
	   carousel shows fewer cards instead. Only when a single card is too
	   narrow (very small phones) the size follows the longest word
	   (--title-ch), never below the reader's base size (1rem). */
	font-size: max(1rem, min(clamp(1.25rem, 0.3vw + 1.15rem, 1.375rem), calc(100cqi / (var(--title-ch, 1) * 0.6))));
	line-height: 1.2;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

.offer-card__link {
	color: inherit;
	text-decoration: none;
}

.offer-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.offer-card__link:focus-visible {
	outline: none;
}

/* Inset ring: the carousel viewport clips anything outside the entry. */
.offer-card:focus-within {
	outline: 3px solid var(--color-accent);
	outline-offset: -3px;
}

.offer-card__excerpt {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.offer-card__cta {
	margin-top: auto;
	padding-top: var(--space-2);
}

.offer-card:hover .link-arrow__icon,
.offer-card:focus-within .link-arrow__icon {
	transform: translateX(3px);
}

/* ---------- Über uns · Berg der Hoffnung ---------- */

/* Small screens: head, photos, text. From 920px: photos left, head and
   text right. */
.about-berg__inner {
	display: grid;
	grid-template-areas:
		"intro"
		"media"
		"body";
	row-gap: clamp(32px, 5vw, 48px);
}

.about-berg__intro {
	grid-area: intro;
}

.about-berg__body {
	grid-area: body;
}

/* Organic composition: the large photo in a soft, irregular round shape,
   the small one as a circle overlapping its lower right with a cream ring.
   No backdrop shape, no shadow. */
.about-berg__media {
	grid-area: media;
	position: relative;
	width: 100%;
	max-width: 560px;
	margin-inline: auto;
	padding-bottom: 12%;
}

.about-berg__media picture {
	display: block;
}

.about-berg__image {
	display: block;
	height: auto;
	object-fit: cover;
}

.about-berg__image--primary {
	width: 86%;
	aspect-ratio: 1 / 0.86;
	border-radius: 58% 42% 52% 48% / 46% 54% 46% 54%;
}

.about-berg__image--secondary {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 42%;
	aspect-ratio: 1;
	border-radius: 50%;
	box-shadow: 0 0 0 6px var(--color-background);
}

.about-berg__kicker {
	margin: 0 0 var(--space-3);
	color: var(--color-text);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.about-berg__copy p {
	max-width: 60ch;
	margin: 0 0 var(--space-4);
	color: var(--color-text);
	font-size: 1.0625rem;
	line-height: 1.65;
}

.about-berg__quote {
	margin: var(--space-6) 0 0;
	padding: var(--space-1) 0 var(--space-1) var(--space-5);
	border-left: 2px solid var(--color-accent);
}

.about-berg__quote p {
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 0.6vw + 1.05rem, 1.5rem);
	font-style: italic;
	line-height: 1.4;
}

@media (min-width: 920px) {
	.about-berg__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"media intro"
			"media body";
		column-gap: clamp(48px, 6vw, 96px);
		row-gap: var(--space-6);
	}

	.about-berg__media {
		align-self: center;
		max-width: none;
	}
}

/* ---------- Aktuelles & Termine ---------- */

/* The botanical photo fades in softly from the cream of the middle ground
   above (mirrors the fade below "Was brauche ich jetzt?"); the fade sits
   in the top padding. */
.latest-posts {
	--news-fade: clamp(120px, 14vw, 200px);

	padding-top: var(--news-fade);
}

.latest-posts.photo-band--botanical::after {
	background:
		linear-gradient(to bottom, var(--color-background) 0%, rgba(247, 243, 236, 0.55) calc(var(--news-fade) * 0.55), rgba(247, 243, 236, 0) var(--news-fade)),
		var(--botanical-wash);
}

.latest-posts__panel {
	margin-top: clamp(40px, 5vw, 64px);
}

/* Phones: a full-width band (no side edges), so image and text of the one
   visible post line up with the head above. */
@media (max-width: 599px) {
	.latest-posts__panel {
		margin-inline: calc(-1 * var(--container-padding));
		border-inline: 0;
		border-radius: 0;
	}
}

/*
 * Page-wise carousel inside the panel: 1 post on phones, 2 on tablets,
 * 3 from 1024px. As soon as posts stand side by side (600px+), all entries
 * share one row grid (subgrid): image, meta, title, text and link start on
 * the same line in every entry — also across pages — and posts without
 * event meta leave that row empty. One post per view is laid out on its
 * own, so no empty meta row opens up there.
 */
.news-carousel {
	--per-view: 1;
	--news-pad: var(--space-5);
	--news-pad-inline: var(--container-padding);
}

@media (min-width: 600px) {
	.news-carousel {
		--per-view: 2;
		--news-pad-inline: var(--news-pad);
	}
}

@media (min-width: 1024px) {
	.news-carousel {
		--per-view: 3;
		--news-pad: var(--space-6);
	}
}

/* clip-path hides the separator of the first visible entry. */
.news-carousel__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	clip-path: inset(0 0 0 1px);
}

.news-carousel__viewport::-webkit-scrollbar {
	display: none;
}

.news-carousel__list {
	display: grid;
	grid-auto-columns: calc(100% / var(--per-view));
	grid-auto-flow: column;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: opacity 0.2s ease-out;
}

.news-carousel__item {
	position: relative;
	display: flex;
	min-width: 0;
	scroll-snap-align: start;
}

/* Fine inset separator between entries. */
.news-carousel__item + .news-carousel__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: var(--news-pad);
	bottom: var(--news-pad);
	width: 1px;
	background-color: var(--color-rule);
}

.news-carousel__controls:not([hidden]) {
	padding-bottom: var(--space-4);
}

.news-card {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--news-pad) var(--news-pad-inline);
	transition: background-color 0.2s ease, transform 0.2s ease-out;
}

@media (min-width: 600px) {
	.news-carousel__list {
		grid-template-rows: repeat(5, auto);
	}

	.news-carousel__item,
	.news-card {
		display: grid;
		grid-row: 1 / span 5;
		grid-template-rows: subgrid;
	}

	.news-card {
		row-gap: var(--space-2);
	}

	.news-card__cta {
		align-self: end;
		justify-self: start;
	}
}

/* Same frame for every entry; the image is always shown in full. */
.news-card__media {
	grid-row: 1;
	aspect-ratio: 3 / 4;
	margin-bottom: var(--space-2);
	overflow: hidden;
	background:
		radial-gradient(ellipse 80% 70% at 30% 40%, var(--aurora-sage), transparent 70%),
		radial-gradient(ellipse 60% 60% at 75% 65%, var(--aurora-apricot), transparent 70%),
		var(--color-surface-warm);
}

.news-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: filter 0.3s ease;
}

.news-card:hover .news-card__image {
	filter: brightness(1.05);
}

.news-card__media-placeholder {
	width: 100%;
	height: 100%;
}

.news-card__meta {
	grid-row: 2;
	margin: 0;
	text-wrap: pretty;
	color: var(--color-accent-text);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.6;
	text-transform: uppercase;
}

.news-card__meta-secondary {
	color: var(--color-text);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: none;
}

.news-card__title {
	grid-row: 3;
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: 1.25rem;
	line-height: 1.25;
	/* As .offer-card__title: long words hyphenate instead of overflowing. */
	hyphens: auto;
	-webkit-hyphens: auto;
	hyphenate-limit-chars: 10 4 4;
	overflow-wrap: break-word;
}

.news-card__link {
	color: inherit;
	text-decoration: none;
}

.news-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.news-card__link:focus-visible {
	outline: none;
}

.news-card:focus-within {
	outline: 3px solid var(--color-accent);
	outline-offset: -3px;
}

.news-card__excerpt {
	grid-row: 4;
	margin: 0;
	color: var(--color-text);
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* The link sits at the bottom of every entry. */
.news-card__cta {
	grid-row: 5;
	align-self: flex-start;
	margin-top: auto;
	padding-top: var(--space-2);
}

.news-card:hover {
	background-color: color-mix(in srgb, var(--color-white) 30%, transparent);
}

.news-card:hover .link-arrow__icon,
.news-card:focus-within .link-arrow__icon {
	transform: translateX(3px);
}

.latest-posts__empty {
	padding: var(--space-7) var(--space-6);
	text-align: center;
}

.latest-posts__empty-title {
	margin: 0 0 var(--space-2);
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: 1.375rem;
}

.latest-posts__empty-note {
	max-width: 52ch;
	margin: 0 auto;
	color: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
	.offer-card__image,
	.news-card__image,
	.help-card,
	.offer-card,
	.news-card,
	.offer-carousel__list,
	.news-carousel__list {
		transition: none;
	}

	.help-card--linked:hover .link-arrow__icon,
	.help-card--linked:focus-within .link-arrow__icon,
	.offer-card:hover .link-arrow__icon,
	.offer-card:focus-within .link-arrow__icon,
	.news-card:hover .link-arrow__icon,
	.news-card:focus-within .link-arrow__icon {
		transform: none;
	}
}