/* ==========================================================================
   Christliche Gemeinde Heidelsheim – "Kraichgau"
   Calm and grown-up: warm paper, near-black night bands, the brand green as a
   quiet accent and gold for the two emphasised words of the motto. Source
   Serif 4 for headings, Source Sans 3 for text (19px base), photos of the
   Kraichgau fields. 48px+ targets, AA contrast, no gimmicks.
   Tokens: theme.json presets plus the :root block below (documented in
   DESIGN.md). No literal font sizes, colours or radii below :root.
   ========================================================================== */

:root {
	/* Palette: theme.json presets (the editor palette), aliased once with the same value as fallback. */
	--cgh-bg: var(--wp--preset--color--bg, #fbf9f4);
	--cgh-band: var(--wp--preset--color--band, #f2ede1);
	--cgh-ink: var(--wp--preset--color--ink, #201f1d);
	--cgh-ink-soft: var(--wp--preset--color--ink-soft, #4c4a47);
	--cgh-rule: var(--wp--preset--color--rule, #d9d2c0);
	--cgh-green-deep: var(--wp--preset--color--green-deep, #22542c);
	--cgh-night: var(--wp--preset--color--night, #252320);
	--cgh-gold: var(--wp--preset--color--gold, #f0b44d);
	--cgh-gold-soft: var(--wp--preset--color--gold-soft, #f6cc7a);
	--cgh-white: var(--wp--preset--color--white, #fff);
	/* Clay: only an area colour in the week planner, not in the editor palette. */
	--cgh-clay: #c2703d;
	/* Sage: a lighter step of green-deep's hue, only an area colour in the week planner. */
	--cgh-sage: #66a36f;

	/* Channels for the tints below (rgb(var(--x-rgb) / alpha) works in every browser). */
	--cgh-ink-rgb: 32 31 29;      /* ink: shadows and the popover backdrop */
	--cgh-shade-rgb: 26 25 23;    /* near-black (night): the fades over photos */
	--cgh-line-rgb: 110 98 74;    /* warm taupe: the hairlines below */
	--cgh-gold-rgb: 240 180 77;   /* gold */

	/* Tints on paper and sand */
	--cgh-tint: #f7f3ea;          /* pale warm fill: rhythm chips, contact lines, compact downloads, copy hover */
	--cgh-tint-deep: #ede6d6;     /* .cgh-note and the Menü pill */
	--cgh-tint-strong: #e4dac5;   /* hover of the Menü pill */
	--cgh-cream: #fbf6ea;         /* end of the tint-to-cream wash */
	--cgh-gold-pale: #fdf1d8;     /* soft evening gold: a service elsewhere, the arrival glow of a group card */
	--cgh-error: #a3261b;         /* form errors: text, field borders, the error list (9:1 on white) */
	--cgh-gold-tint: rgb(var(--cgh-gold-rgb) / 0.18); /* today's service row */
	--cgh-band-veil: rgb(242 237 225 / 0.6);          /* nav hover pill (band at 60%) */
	--cgh-white-veil: rgb(255 255 255 / 0.55);        /* planner day columns, fold hover on the wash */
	--cgh-line: rgb(var(--cgh-line-rgb) / 0.18);        /* faint warm hairline (boxes, planner, folds) */
	--cgh-line-strong: rgb(var(--cgh-line-rgb) / 0.3);  /* hover, copy pill, dashed all-day tiles */
	--cgh-wash: linear-gradient(165deg, var(--cgh-tint) 0%, var(--cgh-cream) 100%); /* week planner, Patenkinder */
	--cgh-sunday: linear-gradient(180deg, rgb(var(--cgh-gold-rgb) / 0.32), rgb(var(--cgh-gold-rgb) / 0.14));

	/* On night and on photos */
	--cgh-on-dark: #f3efe3;          /* light text on night and photos (creed band, hero subline, page-head lead) */
	--cgh-on-dark-soft: #e7e4dc;     /* footer text, the creed's second paragraphs */
	--cgh-on-dark-muted: #c9c6bf;    /* secondary footer text, "Dazugehören" */
	--cgh-on-dark-faint: rgb(201 198 191 / 0.7); /* the credit line */
	--cgh-on-dark-line: rgb(231 228 220 / 0.2);       /* hairlines on night */
	--cgh-on-dark-line-faint: rgb(231 228 220 / 0.12); /* footer box borders */
	--cgh-on-dark-fill: rgb(255 255 255 / 0.04);       /* footer boxes */
	--cgh-on-dark-fill-strong: rgb(255 255 255 / 0.12); /* IBAN box, glass button, chips on night */
	--cgh-white-soft: rgb(255 255 255 / 0.88);  /* secondary white text on night and photo fades */
	--cgh-on-photo-line: rgb(255 255 255 / 0.7); /* outline pills and round arrows on photos */
	--cgh-chip-photo: rgb(255 255 255 / 0.94);   /* chips and badges on photos */

	/* Shadows: ink-tinted, soft, always with a real blur (DESIGN.md "Shadow Vocabulary"). */
	--cgh-shadow-lift: 0 4px 12px rgb(var(--cgh-ink-rgb) / 0.07);      /* small white tiles and rows */
	--cgh-shadow-rest: 0 6px 22px rgb(var(--cgh-ink-rgb) / 0.08);      /* file buttons, hovered Termine, small pills */
	--cgh-shadow-raise: 0 10px 28px rgb(var(--cgh-ink-rgb) / 0.12);    /* hover of rest/lift, today's column, posters, "Nach oben" */
	--cgh-shadow-float: 0 18px 45px rgb(var(--cgh-ink-rgb) / 0.1);     /* cover-like boxes, group cards, popover */
	--cgh-shadow-portrait: 0 20px 48px rgb(var(--cgh-ink-rgb) / 0.18); /* person cards, hovered Patenkinder, today on wide screens */
	--cgh-shadow-hero: 0 10px 28px rgb(0 0 0 / 0.25);  /* buttons on the hero photo only: neutral, the photo has no ink hue */
	--cgh-text-shadow: 0 1px 12px rgb(0 0 0 / 0.3);    /* text set on photos */

	/* Type ramp (DESIGN.md "Typography"). Nothing visible goes below --cgh-fs-meta (16px). */
	--cgh-fs-meta: 1rem;                                        /* labels, meta lines, chips, counts, captions */
	--cgh-fs-ui: var(--wp--preset--font-size--small, 1.0625rem); /* buttons, nav, secondary lines, tables, notes */
	--cgh-fs-body: var(--wp--preset--font-size--medium, 1.1875rem); /* reading text (19px; 18px on phones, see 720px) */
	--cgh-fs-lede: 1.3rem;                                      /* ledes, list dates and titles, small serif titles */
	--cgh-fs-card: 1.45rem;                                     /* titles of white cards, facts, person names, footer service time */
	--cgh-fs-title: var(--wp--preset--font-size--large, clamp(1.3rem, 2vw, 1.5rem));        /* fluid serif titles and serif leads, the creed */
	--cgh-fs-subhead: clamp(1.4rem, 2vw, 1.75rem);              /* h3 in page text, Kalender week titles */
	--cgh-fs-heading: var(--wp--preset--font-size--x-large, clamp(1.75rem, 2.6vw, 2.25rem)); /* h2 in page text, cover and group card titles */
	--cgh-fs-headline: var(--wp--preset--font-size--xx-large, clamp(2rem, 3.4vw, 2.9rem));   /* section headings, page titles in the head band */
	--cgh-fs-feature: clamp(2.3rem, 3.3vw, 2.95rem);            /* the next service's date, the closing invitation */
	--cgh-fs-motto: clamp(1.9rem, 3vw, 2.85rem);                /* the hero motto (phones: see 720px) */
	--cgh-fs-display: var(--wp--preset--font-size--display, clamp(2.4rem, 5vw, 4.5rem));   /* h1 elements, initials on person cards */
	--cgh-fs-day: 1.9rem;                                       /* planner day abbreviations; today and the Kalender scale from it */

	/* Corners (DESIGN.md "Shapes"). */
	--cgh-radius-hairline: 2px; /* focus rings, the folded corner of a file icon */
	--cgh-radius-sm: 6px;       /* fields, notes, small boxes, thumbnails, tiles */
	--cgh-radius-card: 12px;    /* cards, cover cards, panels, the popover */
	--cgh-radius-pill: 999px;   /* buttons, chips, the Menü pill */
	--cgh-radius-round: 50%;    /* avatars and round icon buttons */

	--cgh-serif: var(--wp--preset--font-family--serif, "Source Serif 4", Georgia, serif);
	--cgh-sans: var(--wp--preset--font-family--body, "Source Sans 3", system-ui, sans-serif);

	--cgh-gutter: var(--wp--style--root--padding-left, clamp(20px, 4.5vw, 64px));
	/* The accent under headings and names: a short stroke of the Kraichgau horizon (see .cgh-horizon), used as a mask so it takes one solid colour. */
	--cgh-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 10'%3E%3Cpath d='M1.5 7.6C8.5 7.3 13.5 3.4 21.5 3.3S33 8.2 42 7.8 55 3.5 62.5 4.1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	--cgh-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* the `pfeil` icon as a mask */
	--cgh-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5v15M6 13.5l6 6 6-6' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* the `runter` icon as a mask (links in "Auf einen Blick") */
	--cgh-head-h: 96px;
	--cgh-sec-y: clamp(72px, 9vw, 128px);
}

/* Base ---------------------------------------------------------------------- */

html { scroll-behavior: smooth; scroll-padding-top: 1rem; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

body { overflow-x: clip; -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

a { color: var(--cgh-green-deep); text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
a:hover { color: var(--cgh-ink); }
/* Avatars that show the contact person's photo instead of the initials (cgh_avatar()). */
.has-photo { overflow: hidden; }
.has-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Links to other sites in page text (cgh_mark_links()): a small "extern" icon after the text. */
.cgh-ext__icon { display: inline-block; width: 0.85em; height: 0.85em; margin-left: 0.25em; vertical-align: -0.05em; stroke-width: 2; }
/* A paragraph that is just one link: a 48px link line, like the theme's text links. */
.cgh-linkline a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; }
.cgh-prose p.cgh-linkline { margin-block: 0; }
.cgh-prose * + p.cgh-linkline { margin-top: 0.5rem; }
.cgh-prose p.cgh-linkline + p.cgh-linkline { margin-top: 0; }
.cgh-prose p.cgh-linkline + * { margin-top: 0.5rem; }

::selection { background: var(--cgh-gold-soft); color: var(--cgh-ink); }
input, textarea { caret-color: var(--cgh-green-deep); }

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--cgh-green-deep);
	outline-offset: 3px;
	border-radius: var(--cgh-radius-hairline);
}

img { max-width: 100%; height: auto; }

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	padding: 0.7em 1.1em;
	top: 12px;
	left: 12px;
	z-index: 100000;
	background: var(--cgh-ink);
	color: var(--cgh-white);
	font-weight: 700;
	text-decoration: none;
}

.wp-site-blocks { padding-top: 0; padding-bottom: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }

.cgh-icon { width: 20px; height: 20px; flex: none; }

.cgh-wrap {
	box-sizing: content-box;
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	padding-inline: var(--cgh-gutter);
}

/* Type helpers ---------------------------------------------------------------- */

.cgh-label {
	margin: 0 0 0.8rem;
	font-family: var(--cgh-sans);
	font-size: var(--cgh-fs-meta);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cgh-green-deep);
}

.cgh-h2 { margin: 0; font-size: var(--cgh-fs-headline); line-height: 1.15; letter-spacing: -0.01em; }
/* Subpages: the page title in the head is the headline, so every section h2 is one step under it (heading).
   Only the front page, which has no page title, keeps headline-sized section headings. */
main:not(.cgh-main--home) .cgh-h2 { font-size: var(--cgh-fs-heading); }
.cgh-lede { margin: 0; max-width: 38ch; font-size: var(--cgh-fs-lede); line-height: 1.6; color: var(--cgh-ink-soft); }
.cgh-soft { margin: 1.2rem 0 0; max-width: 52ch; color: var(--cgh-ink-soft); }
.cgh-small { font-size: var(--cgh-fs-ui); color: var(--cgh-ink-soft); }

.cgh-textlink {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: 48px;
	font-weight: 700;
}

/* The arrow is the theme's `pfeil` (back: `zurueck`) line icon, never a typed glyph; only the text is underlined. */
.cgh-textlink__icon { width: 1em; height: 1em; flex: none; color: currentColor; transition: transform 0.2s; }
.cgh-textlink:hover .cgh-textlink__icon,
.cgh-card--link:hover .cgh-card__more .cgh-textlink__icon { transform: translateX(3px); }
.cgh-textlink--back:hover .cgh-textlink__icon { transform: translateX(-3px); }
.cgh-textlink--down:hover .cgh-textlink__icon { transform: translateY(3px); }
.cgh-textlink--up:hover .cgh-textlink__icon { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
	.cgh-textlink__icon { transition: none; }
	.cgh-textlink:hover .cgh-textlink__icon,
	.cgh-card--link:hover .cgh-card__more .cgh-textlink__icon { transform: none; }
}

/* Buttons --------------------------------------------------------------------- */

.cgh-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.cgh-btns--stack { display: grid; gap: 12px; }

.cgh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	min-height: 52px;
	padding: 0.7em 1.35em;
	border: 2px solid var(--cgh-green-deep);
	border-radius: var(--cgh-radius-sm);
	font-family: var(--cgh-sans);
	font-size: var(--cgh-fs-ui);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.cgh-btn--primary { background: var(--cgh-green-deep); color: var(--cgh-white); }
.cgh-btn--primary:hover { background: var(--cgh-night); border-color: var(--cgh-night); color: var(--cgh-white); }
.cgh-btn--ghost { background: transparent; color: var(--cgh-green-deep); }
.cgh-btn--ghost:hover { background: var(--cgh-green-deep); color: var(--cgh-white); }
.cgh-btn--light { background: var(--cgh-white); border-color: var(--cgh-white); color: var(--cgh-night); }
.cgh-btn--light:hover { background: var(--cgh-gold-soft); border-color: var(--cgh-gold-soft); color: var(--cgh-night); }
.cgh-btn--light-ghost { background: transparent; border-color: var(--cgh-on-photo-line); color: var(--cgh-white); }
.cgh-btn--light-ghost:hover { background: var(--cgh-white); color: var(--cgh-night); }

/* Core buttons in page content follow the same shapes. */
.wp-block-button__link { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; }
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--cgh-green-deep); border: 2px solid var(--cgh-green-deep); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--cgh-green-deep); color: var(--cgh-white); }

/* The horizon line motif. */
.cgh-horizon { display: block; width: 100%; height: 28px; color: var(--cgh-rule); }
.cgh-horizon path { fill: none; stroke: currentColor; stroke-width: 1.2; vector-effect: non-scaling-stroke; }

/* Header -------------------------------------------------------------------------- */

.cgh-head {
	position: relative;
	z-index: 20;
	background: var(--cgh-bg);
	border-bottom: 1px solid var(--cgh-rule);
}

.cgh-head__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--cgh-head-h);
}

.cgh-logo { display: inline-flex; align-items: center; min-height: 48px; }
.cgh-logo__img { display: block; height: 58px; width: auto; }
/* Phones: the mark and the name as text (cgh_logo()). */
.cgh-logo__small { display: none; align-items: center; gap: 10px; }
.cgh-logo__mark { display: block; width: auto; height: 46px; }
.cgh-logo { text-decoration: none; }
.cgh-logo__name { font-family: var(--cgh-serif); font-size: var(--cgh-fs-ui); font-weight: 500; line-height: 1.15; color: var(--cgh-ink); white-space: nowrap; }
.cgh-logo__name > span { display: block; font-weight: 600; }
.cgh-foot .cgh-logo__mark { filter: brightness(0) invert(1); }
.cgh-foot .cgh-logo__name { color: var(--cgh-white); }
@media (max-width: 720px) {
	.cgh-logo .cgh-logo__img, .cgh-foot__top > .cgh-logo__img { display: none; }
	.cgh-logo__small { display: inline-flex; }
}
/* The narrowest phones: the name on three short lines beside the Menü pill. */
@media (max-width: 380px) {
	.cgh-logo { min-width: 0; }
	.cgh-logo__small { gap: 8px; }
	.cgh-logo__mark { height: 42px; }
	.cgh-logo__name { font-size: var(--cgh-fs-meta); line-height: 1.1; white-space: normal; }
}

.cgh-nav__list { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }

.cgh-nav__list a {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 48px;
	margin-block: 0;
	padding: 0 0.85em;
	border-radius: var(--cgh-radius-pill);
	color: var(--cgh-ink-soft);
	font-size: var(--cgh-fs-ui);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s, color 0.15s;
}
/* The current page or section sits on a soft sand pill, like the buttons; hover shows a fainter one. */
.cgh-nav__list a:hover { background: var(--cgh-band-veil); color: var(--cgh-ink); }
.cgh-nav__list a[aria-current="page"],
.cgh-nav__list a.is-section { background: var(--cgh-band); color: var(--cgh-ink); font-weight: 650; }

.cgh-nav__service { display: none; }
.cgh-menu-btn { display: none; }

@media (max-width: 1240px) {
	.cgh-nav__list a { padding: 0 0.55em; font-size: var(--cgh-fs-meta); }
	.cgh-logo__img { height: 50px; }
}

@media (max-width: 1100px) {
	.cgh-js .cgh-menu-btn {
		display: inline-flex;
		align-items: center;
		gap: 0.6em;
		min-height: 48px;
		padding: 0 1em;
		border: 2px solid var(--cgh-ink);
		border-radius: var(--cgh-radius-sm);
		background: var(--cgh-white);
		color: var(--cgh-ink);
		font: 700 var(--cgh-fs-ui)/1 var(--cgh-sans);
		cursor: pointer;
	}
	.cgh-menu-btn__close { display: none; }
	.cgh-menu-btn[aria-expanded="true"] .cgh-menu-btn__open { display: none; }
	.cgh-menu-btn[aria-expanded="true"] .cgh-menu-btn__close { display: block; }

	.cgh-js .cgh-nav__panel { display: none; }
	.cgh-js .cgh-nav.is-open .cgh-nav__panel {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		max-height: calc(100dvh - var(--cgh-head-h));
		overflow-y: auto;
		padding: 8px var(--cgh-gutter) 24px;
		background: var(--cgh-bg);
		border-bottom: 1px solid var(--cgh-rule);
		box-shadow: 0 18px 30px -24px rgb(var(--cgh-ink-rgb) / 0.5);
	}
	.cgh-nav__list { flex-direction: column; gap: 0; }
	.cgh-nav__list a { min-height: 56px; padding: 0 0.2em; border-bottom: 1px solid var(--cgh-rule); border-radius: 0; font-size: var(--cgh-fs-lede); color: var(--cgh-ink); }
	.cgh-nav__list a[aria-current="page"],
	.cgh-nav__list a.is-section { padding-inline: 0.75em; border-bottom-color: transparent; border-radius: var(--cgh-radius-sm); }
	.cgh-nav__service { display: flex; gap: 0.6em; margin: 1.2rem 0 0; color: var(--cgh-ink-soft); font-size: var(--cgh-fs-ui); }
	.cgh-nav__service .cgh-icon { margin-top: 0.2em; color: var(--cgh-green-deep); }
	/* Without JS the links simply wrap under the logo. */
	html:not(.cgh-js) .cgh-head__row { flex-wrap: wrap; padding-bottom: 8px; }
	html:not(.cgh-js) .cgh-nav__list { flex-flow: row wrap; }
	html:not(.cgh-js) .cgh-nav__list a { border: 0; min-height: 48px; font-size: var(--cgh-fs-ui); }
}

@media (max-width: 720px) {
	:root { --cgh-head-h: 80px; }
	.cgh-logo__img { height: 44px; }
}

@media (max-width: 380px) {
	.cgh-logo__img { height: 38px; }
	.cgh-menu-btn { padding: 0 0.75em; }
}

/* Sections ------------------------------------------------------------------------- */

.cgh-main { padding-bottom: var(--cgh-sec-y); }
.cgh-main--home { padding-bottom: 0; }
body .cgh-main > :first-child { margin-top: 0; }
body .cgh-main > * + * { margin-block-start: clamp(2rem, 4vw, 3.25rem); }
body .cgh-main--home > * + * { margin-block-start: 0; }
/* Pages that end on the closing band (as the front page) run straight onto the footer. */
.cgh-main:has(> .cgh-sec:last-child) { padding-bottom: 0; }
body .cgh-main:not(.cgh-main--home) > .cgh-sec:last-child { margin-block-start: var(--cgh-sec-y); }

.cgh-sec { padding-block: var(--cgh-sec-y); }
.cgh-sec--band { background: var(--cgh-band); }
.cgh-sec--dark { background: var(--cgh-night); color: var(--cgh-on-dark); }

.cgh-split {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(28px, 6vw, 96px);
	align-items: start;
}


.cgh-sec-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: clamp(32px, 4vw, 52px);
}


/* Front page hero ------------------------------------------------------------------- */

.cgh-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	/* Fills the window below the header (--cgh-hero-top comes from theme.js), never below 480px. */
	min-height: max(480px, calc(100vh - var(--cgh-hero-top, calc(var(--wp-admin--admin-bar--height, 0px) + 98px))));
	min-height: max(480px, calc(100svh - var(--cgh-hero-top, calc(var(--wp-admin--admin-bar--height, 0px) + 98px))));
	overflow: hidden;
	background: var(--cgh-night);
	color: var(--cgh-white);
}

.cgh-hero__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 60%;
}

.cgh-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgb(var(--cgh-shade-rgb) / 0.78) 0%, rgb(var(--cgh-shade-rgb) / 0.55) 38%, rgb(var(--cgh-shade-rgb) / 0.05) 72%),
		linear-gradient(0deg, rgb(var(--cgh-shade-rgb) / 0.6) 0%, rgb(var(--cgh-shade-rgb) / 0) 45%);
}

.cgh-hero__inner { padding-block: clamp(40px, 6vw, 72px); }

.cgh-motto {
	max-width: 15.5em;
	margin: 0;
	color: var(--cgh-white);
	font-family: var(--cgh-serif);
	font-size: var(--cgh-fs-motto);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-shadow: var(--cgh-text-shadow);
}

.cgh-em {
	color: var(--cgh-gold-soft);
	font-size: 0.86em;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.cgh-motto-sub {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: clamp(18px, 2.4vw, 26px) 0 0;
	color: var(--cgh-on-dark);
	font-size: var(--cgh-fs-ui);
}

.cgh-motto-sub::before { content: ""; width: 56px; height: 1.5px; flex: none; background: var(--cgh-gold-soft); }
.cgh-hero__cta { margin-top: clamp(22px, 2.8vw, 32px); }
.cgh-hero :focus-visible { outline-color: var(--cgh-white); }

/* Welcome */


/* Next service -------------------------------------------------------------------------- */

.cgh-next {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3.6fr);
	overflow: hidden;
	border: 1px solid var(--cgh-rule);
	border-radius: var(--cgh-radius-card);
	background: var(--cgh-white);
}

.cgh-next--plain { grid-template-columns: minmax(0, 5fr) minmax(0, 3.6fr); }

/* Base (phones, see the 720px block): the picture closes the card below the facts. */
.cgh-next__img { position: relative; width: 100%; min-height: 240px; background: var(--cgh-band); }
.cgh-next__img > img,
.cgh-next__img > .cgh-ph { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* From 721px: a square inset at the top of its column, level with the weekday label, shown
   whole – service pictures are often square series artwork with text or a badge. A
   picture of another shape is fitted onto sand, never cut. The white card continues below. */
@media (min-width: 721px) {
	.cgh-next__img { box-sizing: border-box; align-self: start; min-height: 0; padding: clamp(22px, 2.4vw, 32px) 0 clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 32px); background: none; }
	.cgh-next__img > img,
	.cgh-next__img > .cgh-ph { position: relative; inset: auto; aspect-ratio: 1; height: auto; border-radius: var(--cgh-radius-sm); background: var(--cgh-band); object-fit: contain; }
}

/*
 * Services without a picture: a sand tile with a rule hairline, the logo mark in
 * its own green, standing on the horizon line. The same size and corner as a
 * picture (list rows and next-service card). Never a photo or a gradient.
 */
.cgh-ph { position: relative; overflow: hidden; background: var(--cgh-band); box-shadow: inset 0 0 0 1px var(--cgh-rule); }
.cgh-ph { --cgh-ph-mark: 46%; --cgh-ph-line: 14px; }
.cgh-ph.cgh-ph { display: grid; place-items: center; }
.cgh-ph__mark { position: relative; display: block; width: auto; height: var(--cgh-ph-mark); }
/* The mark stands on the line: its foot at the middle of the curve. */
.cgh-ph__line { position: absolute; left: 0; right: 0; top: calc(50% + var(--cgh-ph-mark) / 2 - var(--cgh-ph-line) / 2); height: var(--cgh-ph-line); }
.cgh-next__img .cgh-ph { --cgh-ph-mark: 120px; --cgh-ph-line: 34px; }
.cgh-next__body { display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 32px); }
.cgh-next__body .cgh-label { margin-bottom: 0.3rem; }
.cgh-next__date { margin: 0; font-family: var(--cgh-serif); font-size: var(--cgh-fs-feature); font-weight: 500; line-height: 1.05; letter-spacing: -0.015em; }
.cgh-next--plain .cgh-next__date { font-size: var(--cgh-fs-heading); }
.cgh-next__time { margin: 0.35rem 0 0; font-family: var(--cgh-serif); font-size: var(--cgh-fs-lede); font-weight: 600; color: var(--cgh-ink); }
/* A plain printed rule between the date and the service, no brand line.
   The date is the card's heading; the title is text set like a heading. */
.cgh-next__title { margin: 1.3rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--cgh-rule); font-family: var(--cgh-serif); font-size: var(--cgh-fs-lede); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--cgh-ink); text-wrap: balance; }
.cgh-next__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0.5rem 0 0; padding: 0; list-style: none; color: var(--cgh-ink-soft); font-size: var(--cgh-fs-ui); }
.cgh-next__meta li { display: flex; align-items: center; gap: 0.45em; }
.cgh-next__meta .cgh-icon { flex: none; width: 16px; height: 16px; color: var(--cgh-green-deep); }
/* Below a dashed rule: the Er:lebt line (one button: chip, short meaning, info icon), then the details as a meta line. */
.cgh-next__note { margin: 0.9rem 0 0; padding-top: 0.8rem; border-top: 1px dashed var(--cgh-rule); line-height: 1.5; }
.cgh-next__erlebt { margin: 0; }
.cgh-erlebt-more { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 48px; margin: -8px 0; padding: 0; border: 0; border-radius: var(--cgh-radius-sm); background: none; color: var(--cgh-ink-soft); font: inherit; font-size: var(--cgh-fs-ui); text-align: left; cursor: pointer; }
.cgh-erlebt-more .cgh-chip--erlebt { flex: none; margin: 0; font-size: var(--cgh-fs-meta); vertical-align: baseline; transition: background-color 0.15s ease-out; }
.cgh-erlebt-more__text { text-wrap: balance; }
.cgh-erlebt-more__icon { width: 18px; height: 18px; vertical-align: -0.2em; color: var(--cgh-green-deep); }
/* Hover tints only where hover is real, so a tap or click never leaves them behind. */
@media (hover: hover) {
	.cgh-erlebt-more:hover { color: var(--cgh-ink); }
	.cgh-erlebt-more:hover .cgh-erlebt-more__text { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
	.cgh-erlebt-more:hover .cgh-chip--erlebt { background: var(--cgh-gold-soft); }
}
.cgh-next__meta.cgh-next__detail { flex-wrap: nowrap; align-items: flex-start; gap: 0.45em; margin-top: 0; }
.cgh-next__erlebt + .cgh-next__detail { margin-top: 0.45rem; }
.cgh-next__detail .cgh-icon { margin-top: 0.22em; }
/* Ort: a calm tinted panel with the address and the actions. */
.cgh-next__where { display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2.2vw, 30px); border-left: 1px solid var(--cgh-rule); background: var(--cgh-bg); }
.cgh-next__where .cgh-label { margin-bottom: 0.3rem; }
.cgh-next__where address { margin: 0 0 1.1rem; font-style: normal; line-height: 1.5; color: var(--cgh-ink-soft); }
.cgh-next__where address strong { display: block; color: var(--cgh-ink); font-family: var(--cgh-serif); font-size: var(--cgh-fs-body); font-weight: 500; line-height: 1.3; }
.cgh-next__hint { display: flex; gap: 0.55em; margin: 1.1rem 0 0; color: var(--cgh-ink); font-size: var(--cgh-fs-body); line-height: 1.5; }
.cgh-next__hint .cgh-icon { flex: none; width: 20px; height: 20px; margin-top: 0.15em; color: var(--cgh-green-deep); }
/* A service outside the Gemeindehaus: the place stands out on the card and in the lists. */
.cgh-next__away { display: inline-flex; align-self: flex-start; justify-self: start; align-items: center; gap: 0.35em; margin: 0 0 0.8rem; padding: 0.25em 0.75em; border-radius: var(--cgh-radius-pill); background: var(--cgh-gold); color: var(--cgh-ink); font-size: var(--cgh-fs-meta); font-weight: 700; }
.cgh-next__where.is-away { background: var(--cgh-gold-pale); }
.cgh-next__where .cgh-btns { gap: 10px; }
.cgh-next__where .cgh-btn { min-height: 52px; padding: 0.6em 1.1em; font-size: var(--cgh-fs-ui); }
.cgh-next__where .cgh-btn .cgh-icon { width: 18px; height: 18px; }
.cgh-row__d.cgh-away { color: var(--cgh-ink); font-weight: 600; }
.cgh-away .cgh-icon { vertical-align: -3px; color: var(--cgh-gold); }

/* The Sundays after / service rows */

.cgh-later { margin-top: clamp(40px, 5vw, 64px); }
.cgh-later__title { margin: 0 0 0.8rem; font-size: var(--cgh-fs-card); }
.cgh-later__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; margin-top: 1.2rem; }
.cgh-later__more { margin: 0 0 0 auto; text-align: right; }

.cgh-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--cgh-rule); }

/*
 * One grid per list, the rows as subgrids, so date and title line up from row to
 * row. Every row has a picture: its own, or the logo tile (`cgh_service_placeholder()`).
 */
.cgh-rows { --cgh-row-img: 104px; --cgh-row-date: 9.5rem; display: grid; grid-template-columns: [img] var(--cgh-row-img) [date] var(--cgh-row-date) [text] minmax(0, 1fr); column-gap: 24px; }
.cgh-row {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	gap: 24px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--cgh-rule);
}
.cgh-row > .cgh-row__img { grid-column: img / span 1; }
.cgh-row > .cgh-row__date { grid-column: date / span 1; }
.cgh-row > .cgh-row__body { display: block; grid-column: text / span 1; }
/* Speaker and livestream: stacked under the title up to 1100px, a right-aligned
   column of the row grid above (the column collapses when no row has them). */
.cgh-row__meta { display: block; }
@media (min-width: 1101px) {
	.cgh-rows { grid-template-columns: [img] var(--cgh-row-img) [date] var(--cgh-row-date) [text] minmax(0, 1fr) [meta] fit-content(18rem); }
	.cgh-row > .cgh-row__body { display: contents; }
	.cgh-row__body > .cgh-row__t { grid-column: text / span 1; }
	.cgh-row__body > .cgh-row__meta { grid-column: meta / span 1; text-align: right; }
	.cgh-row__meta > .cgh-row__d:first-child { margin-top: 0; }
	.cgh-row__meta > a.cgh-row__live { margin: -6px 0 -12px auto; padding: 0 0 0 0.5em; }
}

.cgh-row.is-today { background: linear-gradient(90deg, var(--cgh-gold-tint), transparent); }
.cgh-row__img { display: block; width: 104px; height: 104px; object-fit: cover; border-radius: var(--cgh-radius-sm); }
.cgh-row__date { display: flex; flex-direction: column; font-family: var(--cgh-serif); font-size: var(--cgh-fs-lede); font-weight: 500; line-height: 1.25; }
.cgh-row__day { font-family: var(--cgh-sans); font-size: var(--cgh-fs-meta); font-weight: 700; color: var(--cgh-green-deep); }
.cgh-row__time { font-family: var(--cgh-sans); font-size: var(--cgh-fs-meta); font-weight: 400; color: var(--cgh-ink-soft); }
.cgh-row__t { font-family: var(--cgh-serif); font-size: var(--cgh-fs-lede); line-height: 1.3; }
/* The Er:lebt chip follows the title, so the titles of a list share one left edge. */
.cgh-row__t > .cgh-chip--erlebt { margin: 0 0 0 0.1em; }
.cgh-row__d { display: block; margin-top: 0.15rem; font-family: var(--cgh-sans); font-size: var(--cgh-fs-ui); color: var(--cgh-ink-soft); }
.cgh-row__d .cgh-icon { width: 16px; height: 16px; vertical-align: -2px; color: var(--cgh-green-deep); }
/* Livestream: a real link with a 48px tap area, or a neutral note without a URL. */
a.cgh-row__live { display: flex; align-items: center; gap: 0.4em; width: fit-content; min-height: 48px; margin: -4px 0 -10px; padding-right: 0.5em; font-family: var(--cgh-sans); font-size: var(--cgh-fs-ui); font-weight: 600; color: var(--cgh-green-deep); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
a.cgh-row__live:hover { color: var(--cgh-night); }
a.cgh-row__live .cgh-icon { flex: none; width: 18px; height: 18px; }
.cgh-row__live.is-plain .cgh-icon { color: var(--cgh-ink-soft); }
/* Not a Sunday or not at the usual time: the day and time in ink and bold, and a green
   line with a clock under the title says what differs ("Anderer Tag und andere Uhrzeit als sonst"). */
.cgh-row--special .cgh-row__time { color: var(--cgh-ink); font-weight: 700; }
.cgh-row__why { display: flex; align-items: center; gap: 0.4em; margin-top: 0.3rem; font-family: var(--cgh-sans); font-size: var(--cgh-fs-meta); font-weight: 600; line-height: 1.35; color: var(--cgh-green-deep); }
.cgh-row__why .cgh-icon { flex: none; width: 18px; height: 18px; }
/* Two even lines on phones, never "sonst" alone (the PHP also binds "als sonst"). */
.cgh-row__why > span { text-wrap: balance; }

/* Facts ("Zum ersten Mal hier?") */

.cgh-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: start;
	gap: clamp(24px, 3vw, 44px);
	margin: clamp(36px, 4vw, 56px) 0 0;
	padding: 0;
	list-style: none;
}

.cgh-facts li { padding-top: 1.1rem; border-top: 3px solid var(--cgh-green-deep); }
.cgh-facts :is(h3, h4) { margin: 0 0 0.5rem; font-size: var(--cgh-fs-card); }
.cgh-facts p { margin: 0; color: var(--cgh-ink-soft); text-wrap: pretty; }
/* Four facts: two by two below 1100px, one column on phones (720px block). */
@media (max-width: 1100px) { .cgh-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* "Auf einen Blick" (group style is-style-glance, pattern cg-heidelsheim/auf-einen-blick): an index of the
   page at its top – one sand panel, its entries split by hairlines, not a row of cards. Each entry is a
   group of plain paragraphs (title, a sentence, a link), so editors only type. A paragraph that is only a
   link (`cgh-linkline`, added on render) sits at the entry's foot and makes the whole entry clickable;
   "#…" links point down, others right. inc/blocks.php turns the row into a nav "Auf dieser Seite" and
   adds the entry's title to each link for screen readers. */
.wp-block-group.is-style-glance {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-block: 0;
	border-radius: var(--cgh-radius-card);
	background: var(--cgh-band);
	overflow: hidden;
}
/* Fewer or more entries keep full rows: 2 and 3 side by side, 5 and 6 in rows of three. */
.wp-block-group.is-style-glance:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wp-block-group.is-style-glance:is(:has(> :nth-child(3):last-child), :has(> :nth-child(5))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wp-block-group.is-style-glance > * { margin: 0; }
/* The hairlines: each entry draws its left and top edge; the panel clips those on its own edge. */
.is-style-glance > .wp-block-group {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 2vw, 1.75rem) 0.75rem;
	box-shadow: -1px 0 0 var(--cgh-line-strong), 0 -1px 0 var(--cgh-line-strong);
	transition: background-color 0.2s;
}
.is-style-glance > .wp-block-group > * { margin: 0; overflow-wrap: break-word; }
.is-style-glance > .wp-block-group > p { line-height: 1.5; color: var(--cgh-ink-soft); text-wrap: pretty; }
.is-style-glance > .wp-block-group > :first-child { font-family: var(--cgh-serif); font-size: var(--cgh-fs-card); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: var(--cgh-ink); text-wrap: balance; hyphens: auto; transition: color 0.2s; }
.is-style-glance > .wp-block-group > p:last-child:not(:first-child) a { font-weight: 700; color: var(--cgh-green-deep); }
.is-style-glance > .wp-block-group > .cgh-linkline:last-child:not(:first-child) { margin-top: auto; padding-top: 0.25rem; }
.is-style-glance > .wp-block-group > .cgh-linkline:last-child a { gap: 0.4em; }
.is-style-glance > .wp-block-group > .cgh-linkline:last-child a::before { content: ""; position: absolute; inset: 0; }
.is-style-glance > .wp-block-group > .cgh-linkline:last-child a::after {
	content: "";
	flex: none;
	width: 1em;
	height: 1em;
	background: currentColor;
	-webkit-mask: var(--cgh-arrow-right) center / 100% 100% no-repeat;
	mask: var(--cgh-arrow-right) center / 100% 100% no-repeat;
	transition: transform 0.2s;
}
.is-style-glance > .wp-block-group > .cgh-linkline:last-child a[href^="#"]::after { -webkit-mask-image: var(--cgh-arrow-down); mask-image: var(--cgh-arrow-down); }
.is-style-glance > .wp-block-group:has(> .cgh-linkline:last-child a:hover) { background: var(--cgh-white-veil); }
.is-style-glance > .wp-block-group:has(> .cgh-linkline:last-child a:hover) > :first-child { color: var(--cgh-green-deep); }
.is-style-glance > .wp-block-group > .cgh-linkline:last-child a:hover::after { transform: translateX(3px); }
.is-style-glance > .wp-block-group > .cgh-linkline:last-child a[href^="#"]:hover::after { transform: translateY(3px); }
.is-style-glance > .wp-block-group > .cgh-linkline:last-child a:focus-visible { outline: none; }
.is-style-glance > .wp-block-group:has(> .cgh-linkline:last-child a:focus-visible) { outline: 3px solid var(--cgh-green-deep); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
	.is-style-glance > .wp-block-group,
	.is-style-glance > .wp-block-group > :first-child,
	.is-style-glance > .wp-block-group > .cgh-linkline:last-child a::after { transition: none; }
}
@media (max-width: 1100px) {
	.wp-block-group.is-style-glance:where(:not(:has(> :nth-child(3):last-child))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Jump targets in page text clear the admin bar. */
.cgh-prose > h2[id] { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 16px); }

/* Cards (Bereiche, projects, sponsored children) ---------------------------------------- */

.cgh-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 28px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cgh-cards--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cgh-cards--six .cgh-card { grid-column: span 2; }
.cgh-cards--six .cgh-card--wide { grid-column: span 3; }
.cgh-cards--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cgh-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--cgh-rule);
	border-radius: var(--cgh-radius-sm);
	background: var(--cgh-white);
}

.cgh-fig { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--cgh-band); }
.cgh-card--wide .cgh-fig { aspect-ratio: 16 / 9; }
.cgh-fig--portrait { aspect-ratio: 4 / 5; }
.cgh-fig img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.cgh-card--link:hover .cgh-fig img { transform: scale(1.03); }

.cgh-fig.is-empty { display: grid; place-items: center; }
.cgh-fig__mark {
	width: 56px;
	aspect-ratio: 70 / 100;
	background: var(--cgh-rule);
	-webkit-mask: url("../img/mark.png") center / contain no-repeat;
	mask: url("../img/mark.png") center / contain no-repeat;
}

/* The label chip on the photo – carried over from the old group cards. */
.cgh-badge {
	position: absolute;
	left: 14px;
	top: 14px;
	padding: 0.3em 0.75em;
	border-radius: var(--cgh-radius-sm);
	background: var(--cgh-chip-photo);
	color: var(--cgh-ink);
	font-size: var(--cgh-fs-meta);
	font-weight: 700;
	line-height: 1.3;
}

.cgh-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.cgh-card__title { margin: 0; font-size: var(--cgh-fs-card); line-height: 1.2; }
.cgh-card__title a { color: var(--cgh-ink); text-decoration: none; }
.cgh-card__title a::after { content: ""; position: absolute; inset: 0; }
.cgh-card__title a:focus-visible { outline: none; }
.cgh-card:has(.cgh-card__title a:focus-visible) { outline: 3px solid var(--cgh-green-deep); outline-offset: 3px; }
.cgh-card--link:hover .cgh-card__title a { color: var(--cgh-green-deep); }
.cgh-card__body > p { margin: 0.5rem 0 0; color: var(--cgh-ink-soft); }
.cgh-card__more { display: flex; align-items: center; gap: 0.4em; margin-top: auto !important; padding-top: 1rem; color: var(--cgh-green-deep) !important; font-weight: 700; }

.cgh-card__list {
	display: grid;
	gap: 0.3rem;
	margin: 1rem 0 0;
	padding: 0.9rem 0 0;
	list-style: none;
	border-top: 1px solid var(--cgh-rule);
	font-size: var(--cgh-fs-ui);
}

.cgh-card__list li { display: flex; justify-content: space-between; gap: 12px; }
.cgh-card__list span:last-child { color: var(--cgh-ink-soft); text-align: right; }

/* What we believe (dark band) */

.cgh-sec--dark .cgh-label { color: var(--cgh-gold-soft); }
.cgh-sec--dark .cgh-h2 { color: var(--cgh-white); }
.cgh-sec--dark .cgh-horizon { margin-bottom: clamp(40px, 5vw, 64px); color: var(--cgh-gold-soft); opacity: 0.45; }
.cgh-sec--dark a { color: var(--cgh-gold-soft); }
.cgh-sec--dark a:hover { color: var(--cgh-white); }
.cgh-sec--dark :focus-visible { outline-color: var(--cgh-gold-soft); }

.cgh-believe { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(28px, 6vw, 96px); }
/* Lede size, not a headline: the creed reads as a calm paragraph on the night band. */
.cgh-creed { max-width: 60ch; margin: 0; font-family: var(--cgh-serif); font-size: var(--cgh-fs-title); line-height: 1.5; text-wrap: pretty; }
.cgh-creed-more { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); margin-top: clamp(28px, 3vw, 40px); color: var(--cgh-on-dark-soft); }
.cgh-creed-more p { margin: 0; }
.cgh-belong { margin: clamp(28px, 3vw, 40px) 0 0; padding-top: 1.2rem; border-top: 1px solid var(--cgh-on-dark-line); color: var(--cgh-on-dark-muted); }

/* Link lists (projects, other areas) */

.cgh-linklist { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--cgh-rule); }
.cgh-linklist li { border-bottom: 1px solid var(--cgh-rule); }
.cgh-linklist a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-height: 56px;
	padding: 10px 0;
	color: var(--cgh-ink);
	font-size: var(--cgh-fs-body);
	line-height: 1.3;
	text-decoration: none;
}

.cgh-linklist a .cgh-icon { flex: none; width: 20px; height: 20px; color: var(--cgh-green-deep); transition: transform 0.2s; }
.cgh-linklist a:hover .cgh-icon { transform: translateX(3px); }
.cgh-linklist a:hover { color: var(--cgh-green-deep); }

/* Contact teaser (front page) */


/* Page header: one short photo band on every subpage ------------------------------------- */

/* The field photo (or the featured image / Bereich picture) as a short band, so the page's own
   content starts in the first screen. A min-height, never a fixed one: back link, a two-line
   title and the lead make it grow. Title and lead fill most of the band, so the ink fade is
   strong over its whole height (AA for the lead over any part of the photo). */
.cgh-pagehead {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: clamp(300px, 26vw, 400px);
	overflow: hidden;
	background: var(--cgh-night);
	color: var(--cgh-white);
}

.cgh-pagehead__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; }

.cgh-pagehead::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(0deg, rgb(var(--cgh-shade-rgb) / 0.8) 0%, rgb(var(--cgh-shade-rgb) / 0.62) 60%, rgb(var(--cgh-shade-rgb) / 0.5) 100%),
		linear-gradient(90deg, rgb(var(--cgh-shade-rgb) / 0.4) 0%, rgb(var(--cgh-shade-rgb) / 0) 70%);
}

.cgh-pagehead > .cgh-wrap,
.cgh-hero > .cgh-wrap { box-sizing: border-box; width: 100%; max-width: calc(var(--wp--style--global--wide-size, 1280px) + 2 * var(--cgh-gutter)); }
.cgh-pagehead__inner { padding-block: clamp(24px, 3.2vw, 44px); }
.cgh-pagehead__title { max-width: 26ch; text-wrap: balance; margin: 0; color: var(--cgh-white); font-size: var(--cgh-fs-headline); font-weight: 500; line-height: 1.12; text-shadow: var(--cgh-text-shadow); }
.cgh-pagehead__lead { max-width: 62ch; margin: 0.5rem 0 0; color: var(--cgh-on-dark); font-size: var(--cgh-fs-body); line-height: 1.5; text-shadow: var(--cgh-text-shadow); }
.cgh-pagehead__back { margin: 0 0 0.25rem; text-shadow: var(--cgh-text-shadow); }
/* Bereich pages: who the area is for, as on its card on Kreise und Gruppen. */
.cgh-pagehead__for { display: flex; align-items: flex-start; gap: 0.45em; margin: 0.6rem 0 0; color: var(--cgh-white); font-size: var(--cgh-fs-ui); font-weight: 600; line-height: 1.35; text-shadow: var(--cgh-text-shadow); }
.cgh-pagehead__for .cgh-icon { flex: none; width: 1.15em; height: 1.15em; margin-top: 0.1em; color: var(--cgh-gold-soft); }
.cgh-pagehead .cgh-textlink { color: var(--cgh-on-dark); }
.cgh-pagehead .cgh-textlink:hover { color: var(--cgh-gold-soft); }
.cgh-pagehead :focus-visible { outline-color: var(--cgh-white); }

/* Plain sand head (Impressum, Datenschutz, archives, search, 404): same height, padding and
   type as the photo band, so the title sits in the same place. */
.cgh-pagehead.cgh-pagehead--plain { background: var(--cgh-band); color: var(--cgh-ink); border-bottom: 1px solid var(--cgh-rule); }
.cgh-pagehead--plain::before { content: none; }
.cgh-pagehead--plain :is(.cgh-pagehead__title, .cgh-pagehead__lead, .cgh-pagehead__back) { text-shadow: none; }
.cgh-pagehead--plain .cgh-pagehead__title { color: var(--cgh-ink); }
.cgh-pagehead--plain .cgh-pagehead__lead { color: var(--cgh-ink-soft); }
.cgh-pagehead--plain .cgh-textlink { color: var(--cgh-green-deep); }

@media (max-width: 720px) {
	.cgh-pagehead { min-height: 240px; }
	.cgh-pagehead__inner { padding-block: 18px 20px; }
	/* Phones: the lead takes the full content width, so the services lead fits three lines. */
	.cgh-pagehead__lead { max-width: none; font-size: var(--cgh-fs-ui); }
}

/* Prose (page text from the block editor) ------------------------------------------------ */

.cgh-prose > * + * { margin-block-start: 1.15rem; }
.cgh-prose > :first-child { margin-top: 0; }
.cgh-prose.alignwide > :not(.alignwide):not(.alignfull) { max-width: 52rem; margin-inline: 0; }
/* Text runs in one reading column that starts on the content edge, under the page title (never centred,
   so every page shares one left edge); tables, galleries and boxes get a wider measure from the same edge.
   Columns and media-text stay as wide as the text, so their edges line up with the paragraphs. */
.cgh-prose.alignwide > :is(.wp-block-table, .wp-block-gallery, .wp-block-file, .wp-block-group.has-background, .wp-block-group.is-style-card, .wp-block-group.is-style-notice):not(.alignwide):not(.alignfull) { max-width: 64rem; }
.cgh-prose.alignwide > .alignwide { max-width: 100%; }
/* Kontakt: the boxes in the text run as wide as the contact cards above them. */
.cgh-main--contact .cgh-prose.alignwide > .wp-block-columns:not(.alignwide) { max-width: 100%; }
.cgh-prose:empty { display: none; }

/* Text in sections: the page text of every template with .cgh-main--sections (default page, Kontakt,
   Projekte, Patenschaft, Gottesdienste, Gruppen – cgh_section_templates() in inc/editor.php, which gives
   the editor the same preview and hint) once it has an h2, any page text that contains a wide block
   (e.g. "Nächste Gottesdienste" on Termine), and the boxed text on a child's page: on wide screens every
   h2 moves into a left column and its section runs beside it (text before the first h2 sits in the
   right column), so the text spans the same width as the cards. Wide blocks span both columns. */
@media (min-width: 1101px) {
	:is(.cgh-main--sections .cgh-prose:has(> h2), .cgh-prose:has(> .alignwide), .cgh-prose--boxed:has(> h2)).alignwide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 88px); align-items: start; }
	:is(.cgh-main--sections .cgh-prose:has(> h2), .cgh-prose:has(> .alignwide), .cgh-prose--boxed:has(> h2)).alignwide > :not(.alignwide):not(.alignfull) { grid-column: 2; max-width: none; margin-inline: 0; }
	/* The heading spans enough rows that its section's blocks stack beside it. */
	:is(.cgh-main--sections .cgh-prose:has(> h2), .cgh-prose:has(> .alignwide), .cgh-prose--boxed:has(> h2)).alignwide > h2:not(.alignwide):not(.alignfull) { grid-column: 1; grid-row: span 40; font-size: var(--cgh-fs-heading); line-height: 1.2; }
	/* Each heading stays in view while its section scrolls past. The h2 fills its grid area, which ends
	   with its section (the unused rows of the span are empty); only its text (.cgh-h2__inner, added
	   on render in inc/blocks.php) is sticky, so it stops at the end of its own section instead of
	   sliding over the next heading, as a sticky h2 held by the whole grid would. */
	:is(.cgh-main--sections .cgh-prose:has(> h2), .cgh-prose:has(> .alignwide), .cgh-prose--boxed:has(> h2)).alignwide > h2:not(.alignwide):not(.alignfull) { align-self: stretch; }
	:is(.cgh-main--sections .cgh-prose:has(> h2), .cgh-prose:has(> .alignwide), .cgh-prose--boxed:has(> h2)).alignwide > h2 > .cgh-h2__inner { display: block; position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 110px); }
	:is(.cgh-main--sections .cgh-prose:has(> h2), .cgh-prose:has(> .alignwide), .cgh-prose--boxed:has(> h2)).alignwide > h2:has(> .cgh-h2__inner)::after { content: none; }
	:is(.cgh-main--sections .cgh-prose:has(> h2), .cgh-prose:has(> .alignwide), .cgh-prose--boxed:has(> h2)).alignwide > h2 > .cgh-h2__inner::after { content: ""; display: block; width: 64px; height: 10px; margin-top: 1rem; background: var(--cgh-green-deep); -webkit-mask: var(--cgh-mark) center / 100% 100% no-repeat; mask: var(--cgh-mark) center / 100% 100% no-repeat; }
	:is(.cgh-main--sections .cgh-prose:has(> h2), .cgh-prose:has(> .alignwide), .cgh-prose--boxed:has(> h2)).alignwide > h2::after { content: ""; display: block; width: 64px; height: 10px; margin-top: 1rem; background: var(--cgh-green-deep); -webkit-mask: var(--cgh-mark) center / 100% 100% no-repeat; mask: var(--cgh-mark) center / 100% 100% no-repeat; }
	:is(.cgh-main--sections .cgh-prose:has(> h2), .cgh-prose:has(> .alignwide), .cgh-prose--boxed:has(> h2)).alignwide > h2:first-child { margin-top: 0; }
	:is(.cgh-main--sections .cgh-prose:has(> h2), .cgh-prose:has(> .alignwide), .cgh-prose--boxed:has(> h2)).alignwide > h2 + * { margin-top: 0.4rem; }
	:is(.cgh-main--sections .cgh-prose:has(> h2), .cgh-prose:has(> .alignwide), .cgh-prose--boxed:has(> h2)).alignwide > h2:not(:first-child):not(.alignwide),
	:is(.cgh-main--sections .cgh-prose:has(> h2), .cgh-prose:has(> .alignwide), .cgh-prose--boxed:has(> h2)).alignwide > h2:not(:first-child) + * { margin-top: clamp(4.5rem, 8vw, 7rem); }
	:is(.cgh-main--sections .cgh-prose:has(> h2), .cgh-prose:has(> .alignwide), .cgh-prose--boxed:has(> h2)).alignwide > h2 + p { font-family: var(--cgh-serif); font-size: var(--cgh-fs-title); line-height: 1.5; }
	:is(.cgh-main--sections .cgh-prose:has(> h2), .cgh-prose:has(> .alignwide), .cgh-prose--boxed:has(> h2)).alignwide > :is(hr, .wp-block-separator) { max-width: none; margin-block: 2rem; }
	:is(.cgh-main--sections .cgh-prose:has(> h2), .cgh-prose:has(> .alignwide), .cgh-prose--boxed:has(> h2)).alignwide > .alignwide { grid-column: 1 / -1; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
	:is(.cgh-main--sections .cgh-prose:has(> h2), .cgh-prose:has(> .alignwide), .cgh-prose--boxed:has(> h2)).alignwide > .alignwide:first-child { margin-top: 0; }
	/* A thin rule above every later section, across both columns. */
	:is(.cgh-main--sections .cgh-prose:has(> h2), .cgh-prose:has(> .alignwide), .cgh-prose--boxed:has(> h2)).alignwide > h2:not(:first-child)::before { content: ""; position: absolute; left: 0; right: calc(-1 * (140% + clamp(40px, 5vw, 88px))); top: calc(-1 * clamp(2.25rem, 4vw, 3.5rem)); border-top: 1px solid var(--cgh-rule); }
	:is(.cgh-main--sections .cgh-prose:has(> h2), .cgh-prose:has(> .alignwide), .cgh-prose--boxed:has(> h2)).alignwide > h2:not(:first-child) { position: relative; }
	/* In the narrower text column a media-text block stacks (picture above its text), so the text keeps a reading measure. */
	:is(.cgh-main--sections .cgh-prose:has(> h2), .cgh-prose:has(> .alignwide), .cgh-prose--boxed:has(> h2)).alignwide > .wp-block-media-text { display: block; }
	:is(.cgh-main--sections .cgh-prose:has(> h2), .cgh-prose:has(> .alignwide), .cgh-prose--boxed:has(> h2)).alignwide > .wp-block-media-text > .wp-block-media-text__media { max-width: 28rem; }
	:is(.cgh-main--sections .cgh-prose:has(> h2), .cgh-prose:has(> .alignwide), .cgh-prose--boxed:has(> h2)).alignwide > .wp-block-media-text > .wp-block-media-text__content { padding: 1.25rem 0 0; }
	/* That rule replaces a separator the editors put between two sections. */
	:is(.cgh-main--sections .cgh-prose:has(> h2), .cgh-prose:has(> .alignwide), .cgh-prose--boxed:has(> h2)).alignwide > :is(hr, .wp-block-separator):has(+ h2) { display: none; }
}

/* The same templates on every width: the opening paragraph and the first paragraph of each section
   read as a serif lead, and every h2 carries the short green line, so a text page has the same rhythm
   as the designed sections instead of an even wall of text. */
.cgh-main--sections .cgh-prose.alignwide > :is(p:first-child, h2 + p) { font-family: var(--cgh-serif); font-size: var(--cgh-fs-title); line-height: 1.5; color: var(--cgh-ink); }
.cgh-main--sections .cgh-prose.alignwide > h2::after { content: ""; display: block; width: 64px; height: 10px; margin-top: 1rem; background: var(--cgh-green-deep); -webkit-mask: var(--cgh-mark) center / 100% 100% no-repeat; mask: var(--cgh-mark) center / 100% 100% no-repeat; }
.cgh-main--sections .cgh-prose.alignwide > h2 + * { margin-top: 1rem; }

/* :where() keeps these at element weight, so theme blocks inside page text (the next-service card on
   Termine, the calendar …) keep their own heading sizes instead of taking the text page's. */
:where(.cgh-prose) h2 { font-size: var(--cgh-fs-heading); }
:where(.cgh-prose) h3 { font-size: var(--cgh-fs-subhead); }
/* The spacing applies to the page text's own headings (direct children and those in columns or groups). */
.cgh-prose > h2, .cgh-prose > .wp-block-group h2 { margin-top: clamp(3rem, 5vw, 4rem); }
.cgh-prose > h3, .cgh-prose > .wp-block-group h3, .cgh-prose > .wp-block-columns h3 { margin-top: 2.25rem; }
.cgh-prose > h4, .cgh-prose > .wp-block-group h4, .cgh-prose > .wp-block-columns h4 { margin-top: 1.75rem; }
.cgh-prose > :is(h2, h3, h4) + * { margin-top: 0.75rem; }
:where(.cgh-prose) li + li { margin-top: 0.35rem; }
.cgh-prose ul li::marker { color: var(--cgh-green-deep); }

/* Quotes in page text become a sand box (e.g. the bank details on "Wer wir sind"). */
.cgh-prose .wp-block-quote { margin-inline: 0; padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.25rem, 3vw, 2rem); border: 0; border-radius: var(--cgh-radius-sm); background: var(--cgh-band); font-size: var(--cgh-fs-body); font-style: normal; }
.cgh-prose .wp-block-quote > * + * { margin-top: 0.75rem; }
.cgh-prose .wp-block-quote cite { font-size: var(--cgh-fs-meta); font-style: normal; color: var(--cgh-ink-soft); }

.cgh-prose figure.wp-block-image img,
.cgh-prose .wp-block-media-text__media img { border-radius: var(--cgh-radius-sm); }
/* Stacked on phones, the text starts on the picture's edge instead of core's 8% inset. */
@media (max-width: 600px) { .cgh-prose .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content { padding: 1.25rem 0 0; } }
.cgh-prose .wp-element-caption { font-size: var(--cgh-fs-meta); color: var(--cgh-ink-soft); text-align: left; }

.cgh-prose hr,
.cgh-prose .wp-block-separator {
	width: 100%;
	max-width: 46rem;
	height: 0;
	margin: 2.5rem 0;
	border: 0;
	border-top: 1px solid var(--cgh-rule);
	opacity: 1;
}

.cgh-prose table { width: 100%; border-collapse: collapse; font-size: var(--cgh-fs-ui); }
.cgh-prose th, .cgh-prose td { padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--cgh-rule); text-align: left; vertical-align: top; }

.cgh-prose .wp-block-group.has-background,
.cgh-prose .wp-block-group.is-style-card,
.cgh-prose .wp-block-group.is-style-notice { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--cgh-radius-sm); }
.cgh-prose .wp-block-group.is-style-card { background: var(--cgh-white); border: 1px solid var(--cgh-rule); }
.cgh-prose .wp-block-group.is-style-notice { background: var(--cgh-band); border: 1px solid var(--cgh-rule); }
.cgh-prose .wp-block-group:is(.has-background, .is-style-card, .is-style-notice) > :first-child { margin-top: 0; }

.cgh-prose .wp-block-columns { gap: clamp(1.25rem, 3vw, 2.5rem); }

/* Old file blocks inside page text look like the download buttons. */
.cgh-prose .wp-block-file { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px 14px 56px; position: relative; font-size: var(--cgh-fs-ui); border: 1px solid var(--cgh-line); border-radius: var(--cgh-radius-card); background: var(--cgh-white); box-shadow: var(--cgh-shadow-rest); }
.cgh-prose .wp-block-file::before { content: ""; position: absolute; left: 16px; top: 50%; width: 26px; height: 30px; margin-top: -15px; border-radius: var(--cgh-radius-hairline) var(--cgh-radius-sm) var(--cgh-radius-hairline) var(--cgh-radius-hairline); background: var(--cgh-green-deep); }
.cgh-prose .wp-block-file > a:not(.wp-block-file__button) { flex: 1 1 14rem; min-width: 0; color: var(--cgh-ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.cgh-prose .wp-block-file .wp-block-file__button { display: inline-flex; align-items: center; min-height: 48px; margin: 0; padding: 0 1.2em; border: 2px solid var(--cgh-green-deep); border-radius: var(--cgh-radius-pill); background: var(--cgh-green-deep); color: var(--cgh-white); font-size: var(--cgh-fs-meta); font-weight: 700; text-decoration: none; }
.cgh-prose .wp-block-file .wp-block-file__button:hover { background: var(--cgh-night); border-color: var(--cgh-night); }

.cgh-prose--boxed { padding: clamp(1.25rem, 3vw, 2.25rem); border: 1px solid var(--cgh-rule); border-radius: var(--cgh-radius-sm); background: var(--cgh-white); }

/* Notes inside page texts (e.g. remarks on "Begriffe", blue on the old site). */
.cgh-note { padding: 0.75rem 1rem; border: 1px solid var(--cgh-line); border-radius: var(--cgh-radius-sm); background: var(--cgh-tint-deep); font-size: var(--cgh-fs-ui); }
.cgh-fallback { padding: 1.25rem 1.5rem; border: 1px solid var(--cgh-rule); border-radius: var(--cgh-radius-sm); background: var(--cgh-band); }
.cgh-fallback p { margin: 0; }
.cgh-fallback p + p { margin-top: 0.5rem; }

.cgh-post-date { color: var(--cgh-green-deep); font-weight: 700; }
.cgh-empty { padding: 1.25rem 1.5rem; border: 1px dashed var(--cgh-rule); border-radius: var(--cgh-radius-sm); background: var(--cgh-white); }
.cgh-back { margin-top: 2rem; }

/* Services page */

/* ChurchTools sync is overdue or failed (cgh_ct_stale_note()): one quiet line under the
   next-service card – "Stand: 11. Oktober, 21:59 Uhr · Aktueller Kalender". No box. */
.cgh-stale { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5em; margin: 6px 0 0; color: var(--cgh-ink-soft); font-size: var(--cgh-fs-meta); line-height: 1.4; }
.cgh-stale__icon { flex: none; width: 18px; height: 18px; color: var(--cgh-green-deep); }
.cgh-stale__text { padding-block: 13px; }
.cgh-stale__link { display: inline-flex; align-items: center; min-height: 48px; color: var(--cgh-green-deep); font-weight: 600; }
/* Services page: a quiet shortcut for regulars, past "Zum ersten Mal hier?" to the list. */
.cgh-services__skip { margin: 6px 0 0; }
.cgh-stale + .cgh-services__skip { margin-top: 0; }
.cgh-services__skiplink { display: inline-flex; align-items: center; gap: 0.45em; min-height: 48px; color: var(--cgh-green-deep); font-size: var(--cgh-fs-meta); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
.cgh-services__skiplink .cgh-icon { flex: none; width: 18px; height: 18px; }
@media (hover: hover) { .cgh-services__skiplink:hover { color: var(--cgh-night); } }
#weitere-gottesdienste { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 16px); }
.cgh-services__first { margin-top: clamp(56px, 7vw, 96px); }
.cgh-services__later { margin-top: clamp(56px, 7vw, 96px); }
.cgh-services__later .cgh-later__title { font-size: var(--cgh-fs-heading); }
/* Every month folds away like the Kalender weeks (the first one open); #gottesdienste-YYYY-MM opens one. */
.cgh-services__fold { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 16px); }
@media (hover: hover) { .cgh-cal__fold.cgh-services__fold > summary:hover::before { background: var(--cgh-band); } }
/* An open month ends with one line: the fold's own border, not also the last row's. */
.cgh-services__fold > .cgh-rows > .cgh-row:last-child { border-bottom: 0; }
.cgh-services__fold > .cgh-rows { margin-bottom: 4px; }
/* The list end: more dates follow, and where to find them. */
.cgh-later__end { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.75em; margin: 1rem 0 0; color: var(--cgh-ink-soft); }
.cgh-later__end .cgh-textlink { color: var(--cgh-green-deep); }
.cgh-services__first .cgh-facts { margin-top: clamp(24px, 3vw, 36px); }

/* Week overview (Gruppen page) */

/* Die Woche im Überblick: week planner */
.cgh-week {
	--k1: var(--cgh-green-deep); --k2: var(--cgh-clay); --k3: var(--cgh-gold); --k4: var(--cgh-sage); --k5: var(--cgh-night);
	/* Border-box, so padding and border stay inside the wide width and the box lines up with the cards above. */
	box-sizing: border-box;
	margin-top: clamp(56px, 7vw, 96px);
	padding: clamp(24px, 3.5vw, 48px);
	border: 1px solid var(--cgh-line);
	border-radius: var(--cgh-radius-card);
	background: var(--cgh-wash);
	box-shadow: var(--cgh-shadow-float);
}
.cgh-week__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.cgh-week__item--1 { --k: var(--k1); }
.cgh-week__item--2 { --k: var(--k2); }
.cgh-week__item--3 { --k: var(--k3); }
.cgh-week__item--4 { --k: var(--k4); }
.cgh-week__item--5 { --k: var(--k5); }
.cgh-week__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; list-style: none; }
.cgh-week__day { display: flex; flex-direction: column; min-height: 14rem; padding: 12px 8px 14px; border-radius: var(--cgh-radius-card); background: var(--cgh-white-veil); }
.cgh-week__day.is-sunday { background: var(--cgh-sunday); }
.cgh-week__day.is-today { background: var(--cgh-white); box-shadow: 0 0 0 2px var(--cgh-green-deep), var(--cgh-shadow-raise); }
.cgh-week__day.is-sunday.is-today { background: var(--cgh-sunday); }
/* Wide screens: today's column is wider and stands out above and below the row. */
@media (min-width: 1101px) {
	.cgh-week__days { display: flex; align-items: stretch; }
	.cgh-week__day { flex: 1 1 0; min-width: 0; }
	/* The row keeps room for the raised column, so nothing below it comes closer. */
	.cgh-week__days { padding-block: 14px; }
	.cgh-week__day.is-today { flex-grow: 1.4; margin: -14px 0; padding: 24px 14px 28px; box-shadow: 0 0 0 2px var(--cgh-green-deep), var(--cgh-shadow-portrait); }
	.cgh-week__day.is-today .cgh-week__dayname { font-size: calc(var(--cgh-fs-day) * 1.2); }
}
.cgh-week__dayname { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 12px; padding: 0 4px 10px; border-bottom: 1px solid var(--cgh-line); font-family: var(--cgh-serif); font-size: var(--cgh-fs-day); font-weight: 500; line-height: 1; }
.cgh-week__long { flex-basis: 100%; font-family: var(--cgh-sans); font-size: var(--cgh-fs-meta); font-weight: 600; letter-spacing: 0.04em; color: var(--cgh-ink-soft); }
.cgh-week__items { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cgh-week__item { position: relative; display: grid; align-content: start; gap: 2px; min-height: 48px; box-sizing: border-box; padding: 8px 8px 9px; border-radius: var(--cgh-radius-sm); background: var(--cgh-white); box-shadow: var(--cgh-shadow-lift); line-height: 1.3; transition: transform 0.15s, box-shadow 0.15s; }
.cgh-week__item:has(a):hover { transform: translateY(-2px); box-shadow: var(--cgh-shadow-raise); }
.cgh-week__time { font-size: var(--cgh-fs-ui); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cgh-green-deep); }
.cgh-week__name { font-size: var(--cgh-fs-body); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
.cgh-week__time--open { font-size: var(--cgh-fs-meta); font-weight: 600; }
/* A flex row, so the dot stays with the first word when the area name wraps in a narrow column. */
.cgh-week__area { display: flex; align-items: baseline; gap: 0.4em; color: var(--cgh-ink-soft); font-size: var(--cgh-fs-meta); }
/* The area colour as a small dot before its name (no coloured side bar): the word carries the meaning, the dot the code. */
.cgh-week__area::before { content: ""; flex: none; width: 0.6em; height: 0.6em; border-radius: var(--cgh-radius-round); background: var(--k, var(--cgh-rule)); }
.cgh-week__item--service .cgh-week__area { color: var(--cgh-white-soft); }
/* Who the group is for ("Alter, kurz") takes the area's place in the same style, so the last line reads one way.
   The fifth area's dot is a ring, so it never looks like the fourth (dark green against night at 0.6em). */
.cgh-week__item--5 .cgh-week__area::before, .cgh-week__row.cgh-week__item--5 .cgh-week__area::before { background: none; box-shadow: inset 0 0 0 2px var(--k5); }
/* The name is the link (green like every link); the whole tile is its target. */
.cgh-week__name a { color: var(--cgh-green-deep); text-decoration: none; }
:is(.cgh-week__item, .cgh-week__row):hover .cgh-week__name a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
:is(.cgh-week__item, .cgh-week__row):has(a) { cursor: pointer; }
.cgh-week__name a::after { content: ""; position: absolute; inset: 0; }
.cgh-week__name a:focus-visible { outline: none; }
.cgh-week__item:has(a:focus-visible) { outline: 3px solid var(--cgh-green-deep); outline-offset: 2px; }
.cgh-week__rhythm { justify-self: start; margin-top: 3px; padding: 0.1em 0.5em; border-radius: var(--cgh-radius-pill); background: var(--cgh-tint); line-height: 1.3; color: var(--cgh-green-deep); font-size: var(--cgh-fs-meta); font-weight: 600; }
.cgh-week__item--service { padding: 10px 8px 11px; background: var(--cgh-night); }
.cgh-week__item--service .cgh-week__time { color: var(--cgh-gold-soft); font-size: var(--cgh-fs-body); }
.cgh-week__item--service .cgh-week__name a { color: var(--cgh-white); font-family: var(--cgh-serif); font-size: var(--cgh-fs-body); font-weight: 500; }
.cgh-week__item--service .cgh-week__rhythm { background: var(--cgh-on-dark-fill-strong); color: var(--cgh-white); }
/* In the narrow Sunday column the note is a plain line, not a chip that breaks into a block. */
@media (min-width: 1101px) { .cgh-week__item--service .cgh-week__rhythm { margin-top: 1px; padding: 0; background: none; color: var(--cgh-white-soft); font-weight: 400; } }
.cgh-week__next { font-size: var(--cgh-fs-meta); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cgh-green-deep); }
.cgh-week__none { margin: auto 0; text-align: center; color: var(--cgh-ink-soft); font-size: var(--cgh-fs-meta); font-style: italic; }
.cgh-week__other { margin-top: clamp(24px, 3vw, 36px); }
.cgh-week__othertitle { margin: 0 0 10px; font-family: var(--cgh-sans); font-size: var(--cgh-fs-meta); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cgh-green-deep); }
.cgh-week__other ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
/* Groups without a fixed weekday: plain rows like the tiles – name, when, area. */
.cgh-week__row { position: relative; display: grid; align-content: start; gap: 2px; min-height: 48px; box-sizing: border-box; padding: 9px 12px 10px; border-radius: var(--cgh-radius-sm); background: var(--cgh-white); box-shadow: var(--cgh-shadow-lift); line-height: 1.35; }
.cgh-week__row .cgh-week__name a::after { content: ""; position: absolute; inset: 0; }
.cgh-week__row:has(a:focus-visible) { outline: 3px solid var(--cgh-green-deep); outline-offset: 2px; }
.cgh-week__when { color: var(--cgh-ink-soft); font-size: var(--cgh-fs-meta); }
.cgh-week__hint { margin: 1.25rem 0 0; color: var(--cgh-ink-soft); font-size: var(--cgh-fs-ui); }
.cgh-week__head .cgh-btn { flex: none; }
/* Gemeindekalender (Termine): the planner with real dates, one row of days per week. */
.cgh-cal { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
/* Inside page text the planner keeps its own list and heading spacing. */
.cgh-prose .cgh-week li + li { margin-top: 0; }
.cgh-prose .cgh-week :is(.cgh-cal__weektitle, .cgh-week__dayname) { margin-top: 0; }
.cgh-prose .cgh-week .cgh-week__items { margin-top: 0; }
.cgh-cal__week + .cgh-cal__week { margin-top: clamp(28px, 3.5vw, 44px); }
.cgh-cal__week > .cgh-week__head { align-items: center; }
.cgh-cal__weektitle { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; font-size: var(--cgh-fs-subhead); font-weight: 500; }
.cgh-cal__range { font-family: var(--cgh-sans); font-size: var(--cgh-fs-meta); font-weight: 600; color: var(--cgh-ink-soft); }
.cgh-cal .cgh-week__days { margin-top: 14px; }
.cgh-cal .cgh-week__day { min-height: 9rem; }
.cgh-cal .cgh-week__dayname { font-size: calc(var(--cgh-fs-day) * 0.85); }
/* Later weeks fold away: a row with the dates, the Sunday service and the count. */
.cgh-cal__fold { border-top: 1px solid var(--cgh-line); }
/* Each fold follows its visually hidden heading (cgh_fold_heading()). */
.cgh-cal__week + .cgh-cal__foldtitle + .cgh-cal__fold { margin-top: clamp(28px, 3.5vw, 44px); }
.cgh-cal__fold:last-of-type { border-bottom: 1px solid var(--cgh-line); }
.cgh-cal__fold > summary { position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px 24px; min-height: 48px; padding: 16px 0; cursor: pointer; list-style: none; }
.cgh-cal__fold > summary::-webkit-details-marker { display: none; }
/* Text and chevron sit on the content edge, in line with the rows; the hover fill and the
   focus ring reach 10px past it on a layer behind (same for "… zuklappen" below). */
:is(.cgh-cal__fold > summary, .cgh-cal__close)::before { content: ""; position: absolute; z-index: -1; inset: 0 -10px; border-radius: var(--cgh-radius-sm); transition: background-color 0.2s; }
@media (hover: hover) { .cgh-cal__fold > summary:hover::before { background: var(--cgh-white-veil); } }
:is(.cgh-cal__fold > summary, .cgh-cal__close):focus-visible { outline: none; }
:is(.cgh-cal__fold > summary, .cgh-cal__close):focus-visible::before { outline: 3px solid var(--cgh-green-deep); outline-offset: 2px; }
.cgh-cal__foldhead { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; min-width: 0; }
/* In the summary the title is a span (the heading sits before the fold): it takes the heading's look. */
.cgh-cal__fold .cgh-cal__weektitle { font-family: var(--cgh-serif); font-size: var(--cgh-fs-title); line-height: 1.15; letter-spacing: -0.01em; color: var(--cgh-ink); }
.cgh-cal__foldhead > .cgh-cal__peek { margin: 0; color: var(--cgh-ink-soft); font-size: var(--cgh-fs-meta); line-height: 1.4; }
.cgh-cal__peeklabel { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cgh-green-deep); }
/* Services: a special service in a folded month is named at body size in ink, with the full weekday. */
.cgh-services__fold .cgh-cal__foldhead > .cgh-cal__peek { color: var(--cgh-ink); font-size: inherit; line-height: 1.45; }
.cgh-services__fold .cgh-cal__peeklabel { color: var(--cgh-ink); }
/* An open month shows its special service as a row right below: no peek in the summary. */
.cgh-services__fold[open] > summary .cgh-cal__peek { display: none; }
/* The count is plain text; the chevron and the whole row's hover carry the affordance. */
.cgh-cal__count { flex: none; color: var(--cgh-ink-soft); font-size: var(--cgh-fs-meta); font-variant-numeric: tabular-nums; }
.cgh-cal__fold > summary { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 16px); }
/* "Dezember zuklappen" / "Woche zuklappen" at the end of an open fold (shown by theme.js). */
.cgh-cal__close { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 0.4em; min-height: 48px; margin: 0 0 12px; padding: 0; border: 0; background: none; color: var(--cgh-green-deep); font: inherit; font-size: var(--cgh-fs-ui); font-weight: 600; cursor: pointer; }
.cgh-cal__close[hidden] { display: none; }
@media (hover: hover) { .cgh-cal__close:hover::before { background: var(--cgh-band); } }
.cgh-cal__closeicon { width: 1.25rem; height: 1.25rem; transform: rotate(180deg); }
.cgh-cal__chev { flex: none; width: 1.4rem; height: 1.4rem; color: var(--cgh-green-deep); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.cgh-cal__fold[open] .cgh-cal__chev { transform: rotate(180deg); }
.cgh-cal__fold > .cgh-cal__week { margin: 0; padding-bottom: clamp(20px, 2.5vw, 28px); }
.cgh-cal .cgh-cal__fold .cgh-week__days { margin-top: 4px; }
/* Small screens: the count stays, below the month name and peek; the chevron keeps its place. */
@media (max-width: 560px) {
	.cgh-cal__fold > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
	.cgh-cal__foldhead { grid-column: 1; }
	.cgh-cal__count { grid-column: 1; grid-row: 2; justify-self: start; }
	.cgh-cal__chev { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
@media (prefers-reduced-motion: reduce) { .cgh-cal__fold > summary::before, .cgh-cal__chev, .cgh-cal__close::before { transition: none; } }
.cgh-week__day.is-past { opacity: 0.5; }
.cgh-week__item--allday { background: transparent; box-shadow: none; outline: 1px dashed var(--cgh-line-strong); outline-offset: -1px; }
.cgh-week__item--allday .cgh-week__time { font-size: var(--cgh-fs-meta); font-weight: 600; color: var(--cgh-ink-soft); }
.cgh-week__item--service .cgh-week__when { color: var(--cgh-white-soft); }
@media (min-width: 1101px) {
	.cgh-cal .cgh-week__day.is-today .cgh-week__dayname { font-size: calc(var(--cgh-fs-day) * 1.05); }
}
@media (max-width: 1100px) {
	/* On phones the days of the past are not worth the scroll. */
	.cgh-week__day.is-past { display: none; }
}
/* "Check the calendar": the week is the usual rhythm, ChurchTools has the real dates. */
.cgh-calcheck { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 24px; margin-top: clamp(28px, 3.5vw, 40px); padding-top: clamp(20px, 2.6vw, 28px); border-top: 1px solid var(--cgh-line); }
.cgh-calcheck > svg { width: 2.25rem; height: 2.25rem; color: var(--cgh-green-deep); }
.cgh-calcheck__text { max-width: 62ch; margin: 0; color: var(--cgh-ink-soft); font-size: var(--cgh-fs-body); line-height: 1.55; }
.cgh-calcheck__text strong { color: var(--cgh-ink); }
/* Back up to the area cards, at the end of a long week on phones. */
.cgh-week__up { margin: clamp(12px, 2vw, 20px) 0 0; }
.cgh-week__up a { color: var(--cgh-green-deep); }
@media (max-width: 820px) {
	.cgh-calcheck { grid-template-columns: minmax(0, 1fr); }
	.cgh-calcheck > svg { display: none; }
	.cgh-calcheck .cgh-btn { justify-self: start; }
}
@media (max-width: 1100px) {
	.cgh-week__days { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.cgh-week__day { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; gap: 12px; min-height: 0; padding: 12px; }
	.cgh-week__day.is-empty { display: none; }
	.cgh-week__dayname { margin: 0; padding: 0; border: 0; }
	.cgh-week__items { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
}
/* Phones: the week is no card of its own any more (the days are), and a day is one agenda list (see 560px). */
@media (max-width: 720px) {
	.cgh-week { padding: 0; border: 0; background: none; box-shadow: none; }
	.cgh-week__area, .cgh-week__rhythm { font-size: var(--cgh-fs-ui); }
}
@media (max-width: 560px) {
	.cgh-week__day { grid-template-columns: minmax(0, 1fr); padding: 14px 12px 12px; }
	.cgh-week__dayname { flex-wrap: nowrap; align-items: center; }
	.cgh-week__long { flex-basis: auto; }
	/* One row per group: the time in its own column, name and who it is for beside it – no names broken over two narrow tiles. */
	.cgh-week__items { grid-template-columns: minmax(0, 1fr); gap: 6px; }
	.cgh-week__item { grid-template-columns: 4.1rem minmax(0, 1fr); column-gap: 10px; padding: 10px 12px 11px; }
	.cgh-week__item > * { grid-column: 2; }
	.cgh-week__item > .cgh-week__time { grid-column: 1; grid-row: 1 / span 3; padding-top: 0.12em; }
	.cgh-week__name { hyphens: manual; overflow-wrap: break-word; }
	.cgh-week__item--allday { grid-template-columns: minmax(0, 1fr); }
	.cgh-week__item--allday > .cgh-week__time { grid-column: 1; grid-row: auto; padding-top: 0; }
	.cgh-calcheck .cgh-btn { justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) { .cgh-week__item { transition: none; } .cgh-week__item:has(a):hover { transform: none; } }

/* Groups of an area: "Auf dieser Seite" lists them with day and time (the area's slice of the
   typical week), then one card each: photo left, name and text right. */

.cgh-index__title { margin: 0 0 0.75rem; color: var(--cgh-ink-soft); font-family: var(--cgh-sans); font-size: var(--cgh-fs-ui); font-weight: 700; line-height: 1.3; }
.cgh-index ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cgh-index li { margin: 0; } /* no list spacing from page text: the chips share one top line */
.cgh-index a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 7px 18px 7px 7px; border: 1px solid var(--cgh-rule); border-radius: var(--cgh-radius-card); background: var(--cgh-white); color: var(--cgh-ink); text-decoration: none; box-shadow: var(--cgh-shadow-lift); transition: border-color 0.2s, box-shadow 0.2s; }
.cgh-index__day { display: grid; place-items: center; flex: none; width: 2.6rem; aspect-ratio: 1; border-radius: var(--cgh-radius-sm); background: var(--cgh-night); color: var(--cgh-gold-soft); font-family: var(--cgh-serif); font-size: var(--cgh-fs-body); line-height: 1; }
.cgh-index__day--open { background: var(--cgh-tint); box-shadow: inset 0 0 0 1px var(--cgh-line); color: var(--cgh-green-deep); }
.cgh-index__day--open .cgh-icon { width: 1.25rem; height: 1.25rem; }
.cgh-index__text { display: grid; line-height: 1.3; }
.cgh-index__name { color: var(--cgh-green-deep); font-weight: 700; }
.cgh-index__when { color: var(--cgh-green-deep); font-size: var(--cgh-fs-meta); font-weight: 600; font-variant-numeric: tabular-nums; }
.cgh-index a:hover { border-color: var(--cgh-line-strong); box-shadow: var(--cgh-shadow-raise); }
/* Plain pages: the chips name sections only (no day tile). */
.cgh-index--toc a { padding-left: 18px; }
.cgh-main--plain .cgh-prose > h2[id] { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 16px); }
.cgh-index a:hover .cgh-index__name { text-decoration: underline 1.5px; text-underline-offset: 0.2em; }
/* Phones: one chip per row, all the same width, like a short timetable. */
@media (max-width: 720px) {
	.cgh-index ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

.cgh-offers { display: grid; gap: clamp(20px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none; }

.cgh-offer {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	overflow: hidden;
	border: 1px solid var(--cgh-rule);
	border-radius: var(--cgh-radius-card);
	background: var(--cgh-white);
	box-shadow: var(--cgh-shadow-float);
}

/* Arriving from a link in the week plan (#angebot-…): once the page has scrolled there (theme.js adds
   .is-arrived), the text side lights up in soft evening gold and the border turns green, then both
   fade back. Nothing stays behind. */
.cgh-offer { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 8px); }
.cgh-offer.is-arrived { animation: cgh-arrive 3.2s ease-in-out both; }
/* Gently in (0.6s), hold, gently out. */
@keyframes cgh-arrive {
	0%, 100% { border-color: var(--cgh-rule); background-color: var(--cgh-white); box-shadow: 0 0 0 0 transparent, var(--cgh-shadow-float); }
	19%, 50% { border-color: var(--cgh-green-deep); background-color: var(--cgh-gold-pale); box-shadow: 0 0 0 1px var(--cgh-green-deep), var(--cgh-shadow-float); }
}
.cgh-offer--noimg { grid-template-columns: minmax(0, 1fr); }

/* The photo fills the card next to the text instead of setting its height; no text on it,
   the name leads the text column. */
.cgh-offer__fig { position: relative; margin: 0; min-height: 14rem; overflow: hidden; background: var(--cgh-band); }
.cgh-offer__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.cgh-offer__title { margin: 0 0 0.9rem; font-family: var(--cgh-serif); font-size: var(--cgh-fs-heading); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }

.cgh-offer__body { padding: clamp(22px, 2.6vw, 32px); }
.cgh-offer__main > p { max-width: 65ch; margin: 0 0 0.6rem; line-height: 1.55; }
.cgh-offer__main > p:last-child { margin-bottom: 0; }
.cgh-offer__side { margin-top: 1.1rem; }
.cgh-offer__side > :last-child { margin-bottom: 0; }
.cgh-offer__side .cgh-offer__facts:first-child { margin-top: 0; padding-top: 1.1rem; }
/* "Einfach vorbeikommen" / "Bitte vorher melden": the first answer a newcomer looks for. */
.cgh-offer__facts .cgh-offer__visit dd { font-weight: 700; }
.cgh-offer__ask { margin: 0.9rem 0 0; font-weight: 600; }
.cgh-offer__ask .cgh-textlink { min-height: 48px; }
/* Wide screens: text left, the practical part beside it behind a hairline – half the height. */
@media (min-width: 1101px) {
	.cgh-offer__body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 0 clamp(24px, 3vw, 40px); }
	.cgh-offer__side { margin-top: 0; padding-left: clamp(24px, 3vw, 40px); border-left: 1px solid var(--cgh-rule); }
	.cgh-offer__side > :first-child { margin-top: 0; }
	.cgh-offer__side .cgh-offer__facts { padding-top: 0; border-top: 0; }
	.cgh-offer__side:empty { display: none; }
	.cgh-offer__body:has(.cgh-offer__side:empty) { grid-template-columns: minmax(0, 1fr); }
	.cgh-offer__side .cgh-ask__ways { flex-direction: column; }
}

/* "Wann?" under the name: a night day tile (a calendar mark when there is no weekday), the rule,
   the time, then short notes and the quiet calendar check – all from the group's schedule fields
   (inc/schedule.php), the same data as the week planner. */
.cgh-when { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 14px; margin: 0 0 1rem; padding: 0 0 1rem; border-bottom: 1px solid var(--cgh-rule); }
.cgh-when__day { grid-row: span 2; display: grid; place-items: center; width: 3rem; aspect-ratio: 1; border-radius: var(--cgh-radius-sm); background: var(--cgh-night); color: var(--cgh-gold-soft); font-family: var(--cgh-serif); font-size: var(--cgh-fs-lede); font-weight: 500; line-height: 1; }
.cgh-when__day--open { background: var(--cgh-tint); box-shadow: inset 0 0 0 1px var(--cgh-line); color: var(--cgh-green-deep); }
.cgh-when__day--open .cgh-icon { width: 1.4rem; height: 1.4rem; }
.cgh-when__rule { grid-column: 2; margin: 0; font-family: var(--cgh-serif); font-size: var(--cgh-fs-title); font-weight: 500; line-height: 1.15; }
.cgh-when__time { grid-column: 2; margin: 0; color: var(--cgh-green-deep); font-size: var(--cgh-fs-ui); font-weight: 700; font-variant-numeric: tabular-nums; }
.cgh-when__time--open { color: var(--cgh-ink-soft); font-weight: 600; }
.cgh-when:not(:has(.cgh-when__time)) .cgh-when__rule { grid-row: span 2; }
.cgh-when__tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; }
.cgh-when__tag { display: inline-flex; align-items: center; padding: 0.15em 0.7em; border-radius: var(--cgh-radius-pill); background: var(--cgh-band); color: var(--cgh-ink); font-size: var(--cgh-fs-meta); font-weight: 600; line-height: 1.4; }
.cgh-when__tag--pause { background: transparent; box-shadow: inset 0 0 0 1px var(--cgh-rule); color: var(--cgh-ink-soft); }
.cgh-when__tag--next { background: var(--cgh-gold-pale); box-shadow: inset 0 0 0 1px rgb(var(--cgh-gold-rgb) / 0.45); }
/* 48px tall to tap, pulled in so the row of notes stays compact. */
.cgh-when__check { display: inline-flex; align-items: center; gap: 0.4em; min-height: 48px; margin-block: -10px; color: var(--cgh-green-deep); font-size: var(--cgh-fs-meta); font-weight: 600; text-decoration: none; }
.cgh-when__check span { text-decoration: underline 1.5px; text-decoration-color: rgb(var(--cgh-line-rgb) / 0.35); text-underline-offset: 0.2em; transition: text-decoration-color 0.2s; }
.cgh-when__check:hover span { text-decoration-color: currentColor; }
.cgh-when__check .cgh-icon { flex: none; width: 1.1em; height: 1.1em; color: var(--cgh-green-deep); }
.cgh-when__tag + .cgh-when__check { margin-inline-start: 4px; }

/* "Für wen? / Wo?" as icon lines under the text (labels for screen readers only) */
.cgh-offer__facts { display: grid; gap: 6px; margin: 0.9rem 0 0.25rem; padding-top: 0.9rem; border-top: 1px solid var(--cgh-rule); }
.cgh-offer__facts div { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); align-items: start; gap: 10px; }
.cgh-offer__facts svg { width: 1.3rem; height: 1.3rem; margin-top: 0.15em; color: var(--cgh-green-deep); }
.cgh-offer__facts dd { margin: 0; line-height: 1.45; }

/* "Frag einfach": the group's contact, like the closing band's card – initials beside label and
   name, a hairline, then phone and e-mail as quiet 48px rows (underlined on hover, not always). */
.cgh-ask { margin: 1rem 0 0.25rem; padding: 14px 16px 6px; border: 1px solid var(--cgh-line); border-radius: var(--cgh-radius-sm); background: var(--cgh-tint); }
.cgh-ask__who { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--cgh-line); }
.cgh-ask__who p { margin: 0; line-height: 1.3; }
.cgh-ask__avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--cgh-radius-round); background: var(--cgh-night); color: var(--cgh-gold-soft); font-family: var(--cgh-serif); font-size: var(--cgh-fs-ui); }
.cgh-ask__label { display: block; color: var(--cgh-green-deep); font-size: var(--cgh-fs-meta); font-weight: 700; }
.cgh-ask__name { display: block; font-weight: 700; }
.cgh-ask__ways { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 2px 0 0; padding: 0; list-style: none; }
.cgh-ask__ways a { display: inline-flex; align-items: center; gap: 0.6em; min-height: 48px; color: var(--cgh-green-deep); font-weight: 600; text-decoration: underline 1.5px transparent; text-underline-offset: 0.2em; overflow-wrap: anywhere; transition: text-decoration-color 0.2s; }
.cgh-ask__ways a:hover { text-decoration-color: currentColor; }
.cgh-ask__ways .cgh-icon { flex: none; width: 20px; height: 20px; color: var(--cgh-green-deep); }

.cgh-dl { margin: 1rem 0 0; border-top: 1px solid var(--cgh-rule); }
.cgh-dl div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 16px; padding: 0.6rem 0; border-bottom: 1px solid var(--cgh-rule); }
.cgh-dl dt { font-weight: 700; color: var(--cgh-green-deep); }
.cgh-dl dd { margin: 0; }

.cgh-more { margin-top: clamp(48px, 6vw, 80px); }

/* Termine ("Aktuell" on the Termine page) */

/* Full width like the Gottesdienst list: a board of poster cards, at most three in a row
   (fewer cards share the width). Each card links to the Termin's own page as a whole. */
.cgh-termine {
	--cgh-termine-gap: clamp(16px, 2vw, 28px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(19rem, (100% - 2 * var(--cgh-termine-gap)) / 3)), 1fr));
	gap: var(--cgh-termine-gap);
}
.cgh-termin {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--cgh-line);
	border-radius: var(--cgh-radius-card);
	background: var(--cgh-white);
	transition: box-shadow 0.2s, border-color 0.2s;
}
.cgh-termin:hover { border-color: var(--cgh-line-strong); box-shadow: var(--cgh-shadow-rest); }
/* The poster whole on a sand mat, never cropped: portrait flyers, landscape flyers and banners alike. */
.cgh-termin__media { position: relative; aspect-ratio: 3 / 2; background: var(--cgh-band); }
.cgh-termin__media img {
	position: absolute;
	inset: clamp(14px, 1.6vw, 20px);
	width: auto;
	height: auto;
	max-width: calc(100% - 2 * clamp(14px, 1.6vw, 20px));
	max-height: calc(100% - 2 * clamp(14px, 1.6vw, 20px));
	margin: auto;
	border-radius: var(--cgh-radius-hairline);
	box-shadow: var(--cgh-shadow-lift);
	transition: transform 0.3s, box-shadow 0.3s;
}
.cgh-termin:hover .cgh-termin__media img { transform: translateY(-3px); box-shadow: var(--cgh-shadow-raise); }
.cgh-termin__media > .cgh-ph { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; }
/* Day tile beside the title, then the facts and the teaser across the card. */
.cgh-termin__body {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-content: start;
	gap: 0 16px;
	flex: 1;
	padding: clamp(18px, 2vw, 24px);
	border-top: 1px solid var(--cgh-line);
}
.cgh-termin--nodate .cgh-termin__body { grid-template-columns: minmax(0, 1fr); }
.cgh-termin__day {
	display: grid;
	justify-items: center;
	align-content: center;
	width: 4.25rem;
	min-height: 4.75rem;
	margin: 0;
	padding: 6px 4px;
	box-sizing: border-box;
	border-radius: var(--cgh-radius-sm);
	background: var(--cgh-night);
	color: var(--cgh-on-dark);
	font-size: var(--cgh-fs-meta);
	line-height: 1.15;
}
.cgh-termin__pre { color: var(--cgh-on-dark-muted); }
.cgh-termin__date { color: var(--cgh-gold-soft); font-family: var(--cgh-serif); font-size: var(--cgh-fs-heading); font-weight: 500; line-height: 1; }
.cgh-termin__date .cgh-icon { display: block; width: 1.6rem; height: 1.6rem; margin-block: 2px 4px; }
.cgh-prose .cgh-termin__title,
.cgh-termin__title { align-self: center; margin: 0; font-size: var(--cgh-fs-card); line-height: 1.2; }
.cgh-termin__title a { color: inherit; text-decoration: none; }
.cgh-termin__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.cgh-termin:hover .cgh-termin__title a { color: var(--cgh-green-deep); }
.cgh-termin__title a:focus-visible { outline: none; }
.cgh-termin:has(a:focus-visible) { outline: 3px solid var(--cgh-green-deep); outline-offset: 2px; }
.cgh-termin__facts { grid-column: 1 / -1; display: grid; gap: 4px; margin-top: 1rem; }
.cgh-termin__facts:empty { display: none; }
.cgh-termin__facts p,
.cgh-termin-page__line { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); align-items: start; gap: 10px; margin: 0; font-size: var(--cgh-fs-ui); line-height: 1.4; }
.cgh-termin__facts .cgh-icon,
.cgh-termin-page__line .cgh-icon { width: 1.25rem; height: 1.25rem; margin-top: 0.05em; color: var(--cgh-green-deep); }
.cgh-termin__when { font-weight: 700; }
.cgh-prose .cgh-termin__teaser,
.cgh-termin__teaser {
	grid-column: 1 / -1;
	display: -webkit-box;
	overflow: hidden;
	margin: 0.9rem 0 0;
	padding-top: 0.9rem;
	border-top: 1px solid var(--cgh-line);
	color: var(--cgh-ink-soft);
	font-size: var(--cgh-fs-ui);
	line-height: 1.5;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}
/* A single Termin is one wide card: poster left, text right. */
@media (min-width: 721px) {
	.cgh-termin:only-child { flex-direction: row; }
	.cgh-termin:only-child .cgh-termin__media { flex: 0 0 42%; aspect-ratio: auto; min-height: 20rem; }
	.cgh-termin:only-child .cgh-termin__body { align-content: center; border-top: 0; border-left: 1px solid var(--cgh-line); padding: clamp(24px, 3vw, 40px); }
	.cgh-termin:only-child .cgh-termin__title { font-size: var(--cgh-fs-heading); }
}

/* Own page of a Termin: facts card with the flyers and files under it, then the text.
   From 1101px facts and files stay in the left column (5, sticky), the text on the right (7).
   The featured image is the page head's photo. */
.cgh-termin-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(28px, 4vw, 40px);
	align-items: start;
	margin-top: clamp(32px, 4vw, 56px);
}
@media (min-width: 1101px) {
	.cgh-termin-page {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		grid-template-areas: "side text";
		column-gap: clamp(40px, 5vw, 88px);
	}
	.cgh-termin-page__side { grid-area: side; position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 24px); }
	.cgh-termin-page__text { grid-area: text; }
}
.cgh-termin-page__side { display: grid; gap: clamp(24px, 3vw, 32px); }
/* "Flyer und Dateien" under the facts card: a label (.cgh-label), then one file per row. */
.cgh-termin-page__files .cgh-downloads { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.cgh-termin-page__facts {
	display: grid;
	gap: 12px;
	padding: clamp(20px, 2.4vw, 28px);
	border: 1px solid var(--cgh-line);
	border-radius: var(--cgh-radius-card);
	background: var(--cgh-white);
	box-shadow: var(--cgh-shadow-rest);
}
.cgh-termin-page__facts .cgh-when { margin: 0; padding-bottom: 14px; }
.cgh-termin-page__facts .cgh-when__day { width: 3.25rem; }
.cgh-termin-page__facts .cgh-termin-page__line { font-size: var(--cgh-fs-body); }
.cgh-termin-page__past { padding: 0.7rem 1rem; border-radius: var(--cgh-radius-sm); background: var(--cgh-tint-deep); }
.cgh-termin-page__past p { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; }
.cgh-termin-page__past .cgh-icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--cgh-green-deep); }
.cgh-termin-page__next { margin: 0.1rem 0 -0.6rem; }
.cgh-termin-page__next a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; font-weight: 600; }
.cgh-termin-page__links { margin-top: 6px; }
.cgh-termin-page__links .cgh-btn { width: 100%; justify-content: center; }
.cgh-termin-page__text > :first-child { margin-top: 0; }
.cgh-termin-page__text > * { max-width: 46rem; }
/* Termin titles are often long ("Predigtreihe „David – …“"): a wider measure keeps them to two lines. */
.cgh-main--termin .cgh-pagehead__title { max-width: 34ch; }
@media (min-width: 721px) and (max-width: 1100px) {
	.cgh-termin-page__side { max-width: 34rem; }
}

/* Giving */

.cgh-giving {
	margin-top: clamp(48px, 6vw, 80px);
	padding: clamp(24px, 3.5vw, 48px);
	border-radius: var(--cgh-radius-sm);
	background: var(--cgh-band);
}

.cgh-giving .cgh-h2 { font-size: var(--cgh-fs-heading); }
/* "Spendenkasten" block in page text: the page's h2 introduces it. */
.cgh-prose .cgh-giving--plain { margin-top: 1.5rem; }
.cgh-giving--plain .cgh-dl--bank { margin-top: 0; }
.cgh-giving .cgh-dl--bank { border-top: 0; }
/* What the account is for (Projekte) and the notes under it, at reading size: they decide where
   the money goes and how to get a receipt. */
.cgh-giving__lead { max-width: 40rem; margin: 0.75rem 0 0; color: var(--cgh-ink-soft); }
.cgh-giving__note { max-width: 40rem; margin-top: 1rem; }
.cgh-giving__note p { margin: 0; }
.cgh-giving__note p + p { margin-top: 0.5rem; }
.cgh-dl--bank { max-width: 40rem; margin-top: 1.5rem; }
.cgh-iban { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* The label column fits "Verwendungszweck", so a value never runs into its label. */
.cgh-dl--bank div { grid-template-columns: 11rem minmax(0, 1fr); align-items: center; }
.cgh-dl--bank dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
/* Table style "Bankverbindung" in page text: the same rows on a sand box, like the giving box. */
.cgh-prose .cgh-bank { max-width: 40rem; padding: 0.4rem clamp(1.1rem, 2.5vw, 1.6rem); border-top: 0; border-radius: var(--cgh-radius-sm); background: var(--cgh-band); }
.cgh-prose .cgh-bank > div:last-child { border-bottom: 0; }

/* Core lightbox "Vergrößern" button on images in page text: a real tap target. */
.cgh-prose .wp-lightbox-container button { width: 48px; height: 48px; }

/* "Kopieren" next to the IBAN or the Verwendungszweck: a quiet pill that only turns green on hover
   and once copied. 48px tall like the other small pills in text (file buttons, link lines). */
.cgh-copy {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: 48px;
	padding: 0.3em 1em 0.3em 0.8em;
	border: 1px solid var(--cgh-line-strong);
	border-radius: var(--cgh-radius-pill);
	background: var(--cgh-white);
	color: var(--cgh-green-deep);
	font: 600 var(--cgh-fs-meta)/1 var(--cgh-sans);
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.cgh-copy .cgh-icon { width: 16px; height: 16px; }
@media (hover: hover) { .cgh-copy:hover { border-color: var(--cgh-green-deep); background: var(--cgh-tint); } }
.cgh-copy.is-done { border-color: var(--cgh-green-deep); background: var(--cgh-green-deep); color: var(--cgh-white); }

/* Under the account, after a hairline: the "Spenden und Projekte" button. In a box with its own
   heading it stands in a column beside the bank details from 901px instead of loose below them. */
@media (min-width: 901px) {
	.cgh-giving:not(.cgh-giving--plain) > div { display: grid; grid-template-columns: minmax(0, 40rem) auto; grid-template-areas: "label ." "title ." "lead online" "bank online" "note online"; column-gap: clamp(32px, 5vw, 80px); align-items: start; }
	.cgh-giving:not(.cgh-giving--plain) .cgh-label { grid-area: label; }
	.cgh-giving:not(.cgh-giving--plain) .cgh-h2 { grid-area: title; }
	.cgh-giving:not(.cgh-giving--plain) .cgh-dl--bank { grid-area: bank; }
	.cgh-giving:not(.cgh-giving--plain) .cgh-giving__lead { grid-area: lead; }
	.cgh-giving:not(.cgh-giving--plain) .cgh-giving__note { grid-area: note; }
	.cgh-giving:not(.cgh-giving--plain) .cgh-giving__online { grid-area: online; flex-direction: column; align-items: center; margin-top: 1.5rem; padding-top: 0; border-top: 0; }
	.cgh-giving:not(.cgh-giving--plain) .cgh-giving__btns { align-items: center; }
}
.cgh-giving__btns { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cgh-giving__online { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; max-width: 40rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--cgh-rule); }

/* Sponsored child / project profile */

.cgh-profile { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.cgh-profile--noimg { grid-template-columns: minmax(0, 1fr); }
.cgh-profile__fig { border-radius: var(--cgh-radius-sm); }
.cgh-profile__text { font-size: var(--cgh-fs-lede); }

/* Contact page -------------------------------------------------------------------------- */

/* Kontakt: three boxes of one kind, same accents as the group cards */
.cgh-contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); align-items: stretch; }
.cgh-contact__box {
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 3vw, 34px);
	border: 1px solid var(--cgh-line);
	position: relative;
	overflow: hidden;
	border-radius: var(--cgh-radius-card);
	background: var(--cgh-white);
	box-shadow: var(--cgh-shadow-float);
}
.cgh-contact__label { margin: 0 0 0.6rem; font-family: var(--cgh-sans); line-height: 1.3; }
.cgh-contact__head { margin: 0 0 1rem; font-family: var(--cgh-serif); font-size: var(--cgh-fs-card); line-height: 1.25; }
.cgh-contact__lines { display: grid; gap: 0.55rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.cgh-contact__lines > li { position: relative; display: flex; align-items: center; gap: 0.7em; min-height: 52px; box-sizing: border-box; margin: 0; padding: 0.6rem 0.85rem; border-radius: var(--cgh-radius-sm); background: var(--cgh-tint); line-height: 1.45; overflow-wrap: break-word; }
.cgh-contact__lines .cgh-icon { flex: none; width: 20px; height: 20px; color: var(--cgh-green-deep); }
/* Facts (address, parking): plain lines, so only the rows with a link look tappable. */
.cgh-contact__lines > li.is-fact { align-items: flex-start; min-height: 0; padding: 0.15rem 0; background: none; }
.cgh-contact__lines > li.is-fact .cgh-icon { margin-top: 0.2em; }
/* Keyboard focus rings the whole row, which is the tap area. */
@supports selector(:has(a)) {
	.cgh-contact__lines > li:has(a:focus-visible) { outline: 3px solid var(--cgh-green-deep); outline-offset: 2px; }
	.cgh-contact__lines a:focus-visible { outline: none; }
}
/* Arriving from "Du erreichst sie über …": the card shows where you landed. */
#kontakt-schreiben:target { border-color: var(--cgh-green-deep); box-shadow: 0 0 0 2px var(--cgh-green-deep), var(--cgh-shadow-float); }
/* A row with a link (phone, e-mail, Livestream) is the link's tap area as a whole. */
.cgh-contact__lines a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
@media (hover: hover) { .cgh-contact__lines > li:has(a):hover { background: var(--cgh-tint-deep); } }
.cgh-contact__lines address { font-style: normal; }
.cgh-contact__action { margin-top: 0.25rem; }
.cgh-contact__action .cgh-btn { box-sizing: border-box; width: 100%; }
.cgh-contact__action .cgh-small { margin: 0.75rem 0 0; }
.cgh-contact__who { display: flex; align-items: center; gap: 16px; margin-bottom: 1rem; }
.cgh-contact__who .cgh-contact__head { margin: 0; }
.cgh-contact__avatar { flex: none; width: 76px; height: 76px; overflow: hidden; border-radius: var(--cgh-radius-round); background: var(--cgh-night); }
.cgh-contact__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.cgh-contact__box--write .cgh-small { margin: 0; }
#kontakt-schreiben { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 96px); }
.cgh-contact__avatar .cgh-person__initials { font-size: var(--cgh-fs-card); }
.cgh-contact__role { margin: 0.2rem 0 0; font-weight: 700; color: var(--cgh-green-deep); }
/* On phones the card to call or write comes first: reaching someone is the page's first promise. */
@media (max-width: 720px) { .cgh-contact__box--write { order: -1; } }

/* People – adapted from the old contact cards: portrait, role label on the
   photo, name with a short green line. */

.cgh-people-intro { margin-bottom: clamp(40px, 5vw, 64px); }
.cgh-people-intro .cgh-h2::after { content: ""; display: block; width: 64px; height: 10px; margin: 0.8rem 0 0; background: var(--cgh-green-deep); -webkit-mask: var(--cgh-mark) center / 100% 100% no-repeat; mask: var(--cgh-mark) center / 100% 100% no-repeat; }
.cgh-people-intro .cgh-lede { max-width: 46rem; margin: 1rem 0 0; }
.cgh-people-intro .cgh-lede a { font-weight: 600; }
.cgh-people-index { margin-top: 1.5rem; }
.cgh-people-group__title { margin: 0; font-family: var(--cgh-serif); font-size: var(--cgh-fs-subhead); font-weight: 500; line-height: 1.15; text-wrap: balance; }
.cgh-people-group + .cgh-people-group { margin-top: clamp(48px, 6vw, 80px); }
.cgh-people-group .cgh-prose { margin-top: 0.75rem; max-width: 46rem; }
/* A group nobody in it can be reached directly: one line to the main contact. */
.cgh-people-group__ask { display: flex; align-items: flex-start; gap: 0.6em; max-width: 46rem; margin: clamp(32px, 4vw, 48px) 0 0; color: var(--cgh-ink-soft); }
.cgh-people-group__ask .cgh-icon { flex: none; width: 20px; height: 20px; margin-top: 0.2em; color: var(--cgh-green-deep); }
.cgh-people-group__ask a { display: inline-flex; align-items: center; min-height: 48px; margin-block: -12px; font-weight: 600; }

.cgh-person__initials { display: grid; place-items: center; width: 100%; height: 100%; background: var(--cgh-night); color: var(--cgh-gold-soft); font-family: var(--cgh-serif); font-size: var(--cgh-fs-headline); }



/* Post list, search ---------------------------------------------------------------------- */

.cgh-postlist__item { padding: 1.5rem 0; border-bottom: 1px solid var(--cgh-rule); }
.cgh-postlist__item .wp-block-post-date { color: var(--cgh-green-deep); font-weight: 700; }
.cgh-postlist__item .wp-block-post-title { margin: 0.25rem 0 0.5rem; font-size: var(--cgh-fs-subhead); }
.cgh-postlist__item .wp-block-post-title a { color: var(--cgh-ink); text-decoration: none; }
.cgh-postlist__item .wp-block-post-title a:hover { color: var(--cgh-green-deep); }

.cgh-search .wp-block-search__inside-wrapper { max-width: 40rem; gap: 10px; }
.cgh-search .wp-block-search__input { min-height: 52px; padding: 0.6em 0.9em; border: 2px solid var(--cgh-ink-soft); border-radius: var(--cgh-radius-sm); font: inherit; }
.cgh-search .wp-block-search__button { min-height: 52px; margin: 0; padding: 0.6em 1.3em; border: 2px solid var(--cgh-green-deep); border-radius: var(--cgh-radius-sm); background: var(--cgh-green-deep); color: var(--cgh-white); font-weight: 700; }

/* Footer --------------------------------------------------------------------------------- */

.cgh-foot { position: relative; padding-block: clamp(48px, 6vw, 72px) 40px; background: var(--cgh-night); color: var(--cgh-on-dark-soft); }
.cgh-foot a { color: var(--cgh-on-dark-soft); }
.cgh-foot a:hover { color: var(--cgh-gold-soft); }
.cgh-foot :focus-visible { outline-color: var(--cgh-gold-soft); }
.cgh-foot .cgh-logo__img { height: 60px; }

.cgh-foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 48px; padding-bottom: clamp(28px, 4vw, 40px); border-bottom: 1px solid var(--cgh-on-dark-line); }
.cgh-foot__invite { max-width: 34ch; margin: 0; font-family: var(--cgh-serif); font-size: var(--cgh-fs-lede); line-height: 1.4; color: var(--cgh-on-dark); }

/* The Gottesdienst column grows to fit "76646 Bruchsal-Heidelsheim" on one line (it never breaks inside). */
.cgh-foot__grid { display: grid; grid-template-columns: minmax(min-content, 1fr) repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); padding-top: clamp(28px, 4vw, 40px); }
/* Pages that end on the closing band (its contact card) leave out the Kontakt column. */
.cgh-foot__grid--three { grid-template-columns: minmax(min-content, 1fr) repeat(2, minmax(0, 1fr)); }
.cgh-foot__col { display: flex; flex-direction: column; align-items: flex-start; padding: 22px 22px 24px; border: 1px solid var(--cgh-on-dark-line-faint); border-radius: var(--cgh-radius-card); background: var(--cgh-on-dark-fill); }
.cgh-foot__col p { margin: 0; }
.cgh-foot__title { display: block; width: 100%; margin: 0 0 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--cgh-on-dark-line); color: var(--cgh-gold-soft); font-family: var(--cgh-sans); font-size: var(--cgh-fs-meta); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.cgh-foot__big { margin-bottom: 0.9rem !important; font-family: var(--cgh-serif); font-size: var(--cgh-fs-card); line-height: 1.25; color: var(--cgh-white); }
.cgh-foot__lines { display: grid; gap: 0.35rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.cgh-foot__lines:last-child { margin-bottom: 0; }
.cgh-foot__lines li { display: flex; align-items: flex-start; gap: 0.65em; line-height: 1.45; overflow-wrap: anywhere; }
.cgh-foot__lines .cgh-icon { flex: none; width: 19px; height: 19px; margin-top: 0.2em; color: var(--cgh-gold-soft); }
/* Link lines: each link is a 48px tap row; the list is pulled up and down by the extra air so the column keeps its rhythm. */
.cgh-foot__lines a { text-decoration: underline 1px transparent; text-underline-offset: 3px; transition: text-decoration-color 0.2s; }
.cgh-foot__lines a:hover { text-decoration-color: currentColor; }
.cgh-foot__lines--links { gap: 0; margin-top: -0.6rem; }
.cgh-foot__lines--links:last-child { margin-bottom: -0.6rem; }
.cgh-foot__lines--links li { min-height: 48px; align-items: center; }
.cgh-foot__lines--links a { display: inline-flex; align-items: center; min-height: 48px; }
.cgh-foot__lines--links .cgh-icon { margin-top: 0; }
.cgh-foot__btn { display: inline-flex; align-items: center; gap: 0.5em; box-sizing: border-box; min-height: 52px; margin-top: auto; padding: 0 1.2em; border: 1.5px solid var(--cgh-gold-soft); border-radius: var(--cgh-radius-pill); color: var(--cgh-gold-soft) !important; font-weight: 700; text-decoration: none; }
.cgh-foot__btn .cgh-icon { width: 18px; height: 18px; }
.cgh-foot__btn:hover { background: var(--cgh-gold-soft); color: var(--cgh-night) !important; }
.cgh-foot__who { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; }
.cgh-foot__avatar { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--cgh-radius-round); background: var(--cgh-gold-soft); color: var(--cgh-night); font-family: var(--cgh-serif); font-size: var(--cgh-fs-body); }
.cgh-foot__who p strong { display: block; color: var(--cgh-white); font-weight: 600; }
.cgh-foot__who p span { display: block; color: var(--cgh-on-dark-muted); font-size: var(--cgh-fs-meta); }
.cgh-foot__muted { color: var(--cgh-on-dark-muted); }
.cgh-foot__list { margin: 0; padding: 0; list-style: none; }
.cgh-foot__iban { margin-bottom: 0.9rem !important; padding: 0.55em 0.8em; border-radius: var(--cgh-radius-sm); background: var(--cgh-on-dark-fill-strong); font-size: var(--cgh-fs-meta); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.cgh-foot__iban p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0.2rem 0 0; }
.cgh-foot__iban > span { display: block; color: var(--cgh-gold-soft); font-size: var(--cgh-fs-meta); font-weight: 700; letter-spacing: 0.08em; }

.cgh-foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--cgh-on-dark-line); color: var(--cgh-on-dark-muted); font-size: var(--cgh-fs-meta); }
.cgh-foot__legal a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 0.5em; }
.cgh-foot__legal > span:last-child { margin-right: -0.5em; }
.cgh-foot__credit { margin: -6px 0 -12px; color: var(--cgh-on-dark-faint); font-size: var(--cgh-fs-meta); }
.cgh-foot__credit a { display: inline-flex; align-items: center; min-height: 48px; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cgh-foot__credit a:hover { color: var(--cgh-white); }

/* Floating "Nach oben": a white circle at the bottom right, shown by theme.js after one screen
   of scrolling, out of the way while the footer's legal row (with its own link) is in view. */
.cgh-totop {
	position: fixed;
	right: max(16px, calc(env(safe-area-inset-right) + 12px));
	bottom: calc(20px + env(safe-area-inset-bottom));
	z-index: 15;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1px solid var(--cgh-rule);
	border-radius: var(--cgh-radius-round);
	background: var(--cgh-white);
	color: var(--cgh-green-deep);
	box-shadow: var(--cgh-shadow-raise);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.22s ease-out, transform 0.22s ease-out, visibility 0s linear 0.22s, background-color 0.15s, color 0.15s;
}
.cgh-totop[hidden] { display: none; }
.cgh-totop.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.cgh-totop .cgh-icon { width: 22px; height: 22px; }
@media (hover: hover) { .cgh-totop:hover { border-color: var(--cgh-green-deep); background: var(--cgh-green-deep); color: var(--cgh-white); } }
.cgh-totop:focus-visible { outline: 3px solid var(--cgh-green-deep); outline-offset: 3px; }
@media (max-width: 720px) { .cgh-totop { right: max(12px, calc(env(safe-area-inset-right) + 8px)); bottom: calc(16px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .cgh-totop { transform: none; transition: none; } }
@media print { .cgh-totop { display: none !important; } }

/* Responsive --------------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.cgh-next { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
	.cgh-next__where { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 0 32px; border-left: 0; border-top: 1px solid var(--cgh-rule); }
	.cgh-next__where > :not(.cgh-btns) { grid-column: 1; }
	.cgh-next__where > .cgh-btns { grid-column: 2; grid-row: 1 / span 3; }
	.cgh-next--plain .cgh-next__where { grid-column: auto; display: flex; border-top: 0; border-left: 1px solid var(--cgh-rule); }
	.cgh-rows { --cgh-row-img: 88px; --cgh-row-date: 8rem; }
	.cgh-row__img { width: 88px; height: 88px; }
	.cgh-cards--six .cgh-card,
	.cgh-cards--six .cgh-card--wide { grid-column: span 3; }
	.cgh-cards, .cgh-cards--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cgh-contact { grid-template-columns: 1fr 1fr; }
	.cgh-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Three columns (closing-band pages): Gottesdienst across the top, Online and Spenden side by side. */
	.cgh-foot__grid--three > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
	:root { --cgh-fs-body: 1.125rem; --cgh-fs-motto: clamp(1.8rem, 8vw, 2.3rem); }
	body { font-size: var(--cgh-fs-body); }
	.cgh-hero { min-height: max(460px, calc(100svh - var(--cgh-hero-top, calc(var(--wp-admin--admin-bar--height, 0px) + 72px)))); }
	/* The tall phone crop fits the photo's height exactly, so its pale sky strip showed under the header:
	   a taller image anchored at the bottom crops it away and leaves field and bubbles. */
	.cgh-hero__img { inset: auto 0 0; height: 118%; object-position: 70% 100%; }
	.cgh-hero::before { background: linear-gradient(0deg, rgb(var(--cgh-shade-rgb) / 0.86) 0%, rgb(var(--cgh-shade-rgb) / 0.6) 50%, rgb(var(--cgh-shade-rgb) / 0.1) 85%); }
	.cgh-motto { line-height: 1.16; }
	.cgh-motto-sub::before { display: none; }
	/* Time and place on two lines; the "·" between them would dangle at the end of the first. */
	.cgh-motto-sub__sep { display: none; }
	.cgh-motto-sub__place { display: block; }
	.cgh-hero__cta .cgh-btn { flex: 1 1 100%; }
	.cgh-split, .cgh-believe, .cgh-creed-more, .cgh-profile, .cgh-giving, .cgh-contact { grid-template-columns: minmax(0, 1fr); }
	.cgh-next,
	.cgh-next--plain { grid-template-columns: minmax(0, 1fr); }
	.cgh-next__img { order: 3; min-height: 0; aspect-ratio: 21 / 9; border-top: 1px solid var(--cgh-rule); }
	.cgh-next__img .cgh-ph { --cgh-ph-mark: 50%; --cgh-ph-line: 22px; }
	/* A real picture is shown whole: its own aspect ratio, never taller than square;
	   a taller one (a flyer) is fitted onto the sand ground instead of cut. */
	.cgh-next__img:has(> img) { box-sizing: border-box; aspect-ratio: auto; container-type: inline-size; padding: 16px; }
	.cgh-next__img > img { position: static; height: auto; max-height: 56cqw; border-radius: var(--cgh-radius-sm); object-fit: contain; }
	.cgh-next__where > .cgh-btns { align-self: stretch; }
	.cgh-next__where,
	.cgh-next--plain .cgh-next__where { display: flex; border-left: 0; border-top: 1px solid var(--cgh-rule); }
	/* Phones: no shared grid; a row is picture | stacked text. */
	.cgh-rows { display: block; }
	.cgh-row { grid-template-columns: 72px minmax(0, 1fr); gap: 4px 16px; align-items: start; }
	.cgh-row > :is(.cgh-row__img, .cgh-row__date, .cgh-row__body) { grid-column: auto; }
	.cgh-row__img { width: 72px; height: 72px; grid-row: span 3; }
	.cgh-row__date { font-size: var(--cgh-fs-body); }
	.cgh-row__t { font-size: var(--cgh-fs-body); }
	.cgh-row__time { font-size: var(--cgh-fs-ui); }
	.cgh-next__title { font-size: var(--cgh-fs-card); }
	.cgh-facts { grid-template-columns: minmax(0, 1fr); }
	/* Phones: "Auf einen Blick" becomes a list of rows – title and arrow; an entry with a jump link drops
	   its sentence (the section below says it), so the index stays short. */
	.wp-block-group.is-style-glance,
	.wp-block-group.is-style-glance:is(:has(> :nth-child(2):last-child), :has(> :nth-child(3):last-child), :has(> :nth-child(5))) { grid-template-columns: minmax(0, 1fr); }
	.is-style-glance > .wp-block-group:has(> .cgh-linkline:last-child:not(:first-child)) { flex-direction: row; align-items: center; gap: 1rem; padding: 0.35rem 1.1rem 0.35rem 1.25rem; }
	.is-style-glance > .wp-block-group:has(> .cgh-linkline:last-child:not(:first-child)) > :first-child { flex: 1; font-size: var(--cgh-fs-lede); }
	.is-style-glance > .wp-block-group:has(> .cgh-linkline:last-child:not(:first-child)) > :not(:first-child):not(:last-child) { display: none; }
	.is-style-glance > .wp-block-group > .cgh-linkline:last-child:not(:first-child) { margin: 0; padding: 0; }
	.is-style-glance > .wp-block-group > .cgh-linkline:last-child:not(:first-child) a { min-width: 48px; min-height: 56px; justify-content: flex-end; font-size: 0; }
	.is-style-glance > .wp-block-group > .cgh-linkline:last-child:not(:first-child) a::after { width: 1.35rem; height: 1.35rem; }
	.cgh-cards, .cgh-cards--six, .cgh-cards--four { grid-template-columns: minmax(0, 1fr); }
	.cgh-cards--six .cgh-card,
	.cgh-cards--six .cgh-card--wide { grid-column: auto; }
	.cgh-card--wide .cgh-fig { aspect-ratio: 3 / 2; }
	.cgh-offer { grid-template-columns: minmax(0, 1fr); }
	.cgh-offer__fig { min-height: 0; aspect-ratio: 16 / 9; }
	.cgh-dl div { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.cgh-foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.cgh-foot__top { flex-direction: column; align-items: flex-start; }
	/* Serif leads after a heading: a step above the text, not a second headline. */
	.cgh-main--sections .cgh-prose.alignwide > :is(p:first-child, h2 + p) { font-size: 1.2rem; }
	/* File block: the file icon stays beside the name when the button wraps below. */
	.cgh-prose .wp-block-file::before { top: 16px; margin-top: 0; }
}

@media (max-width: 340px) {
}

@media (max-width: 420px) {
	.cgh-foot__grid { grid-template-columns: minmax(0, 1fr); }
}

@media print {
	.cgh-site-header, .cgh-foot, .cgh-btns, .cgh-hero__img, .cgh-pagehead__img { display: none !important; }
	.cgh-hero, .cgh-pagehead, .cgh-sec--dark { background: none !important; color: var(--cgh-ink) !important; min-height: 0 !important; }
	.cgh-motto, .cgh-pagehead__title { color: var(--cgh-ink) !important; text-shadow: none !important; }
}

.cgh-h2 + .cgh-lede { margin-top: 1rem; }

/* Patenschaft status and facts */
.cgh-badge--gold { background: var(--cgh-gold); color: var(--cgh-ink); }
.cgh-card__meta { margin: 0.35rem 0 0 !important; color: var(--cgh-green-deep) !important; font-weight: 600; }
.cgh-profile__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin: 0 0 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--cgh-rule); color: var(--cgh-ink-soft); font-size: var(--cgh-fs-ui); }
.cgh-chip { display: inline-block; padding: 0.3em 0.75em; border-radius: var(--cgh-radius-sm); background: var(--cgh-band); color: var(--cgh-ink); font-weight: 700; }
.cgh-chip--gold { background: var(--cgh-gold); }
/* Er:lebt services – in front of the title on the next-service card and in the list; never below 16px. */
.cgh-chip--erlebt { margin-right: 0.35em; padding: 0.2em 0.65em; border-radius: var(--cgh-radius-pill); background: var(--cgh-gold); font-size: max(var(--cgh-fs-meta), 0.75em); line-height: 1.35; vertical-align: 0.15em; }
/* As a button it opens the shared explanation: the same pill, a 44px tap area around it. */
button.cgh-chip--erlebt { position: relative; border: 0; color: var(--cgh-ink); font-family: inherit; letter-spacing: normal; cursor: pointer; transition: background-color 0.15s ease-out; }
button.cgh-chip--erlebt::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 48px); height: 48px; transform: translate(-50%, -50%); }
@media (hover: hover) { button.cgh-chip--erlebt:hover { background: var(--cgh-gold-soft); } }

/*
 * The Er:lebt explanation (cgh_erlebt_popover()): one native popover per page, a
 * white card centred over a faint ink tint; light dismiss, Escape and the close
 * button hide it. Without popover support theme.js toggles .is-open instead.
 */
.cgh-erlebt-pop { display: none; position: fixed; inset: 0; z-index: 100; box-sizing: border-box; width: min(34rem, calc(100% - 32px)); height: fit-content; max-height: calc(100% - 32px); margin: auto; padding: 22px 64px 26px 26px; overflow: auto; border: 1px solid var(--cgh-rule); border-radius: var(--cgh-radius-card); background: var(--cgh-white); color: var(--cgh-ink); box-shadow: var(--cgh-shadow-float); }
.cgh-erlebt-pop:popover-open { display: block; }
.cgh-erlebt-pop.is-open { display: block; }
.cgh-erlebt-pop::backdrop { background: rgb(var(--cgh-ink-rgb) / 0.2); }
/* The title is a plain heading, not a chip: only the chips that open this are buttons. */
.cgh-erlebt-pop__title { margin: 0 0 0.6rem; font-family: var(--cgh-serif); font-size: var(--cgh-fs-title); font-weight: 500; line-height: 1.2; letter-spacing: normal; color: var(--cgh-ink); }
.cgh-erlebt-pop__text { margin: 0; font-size: var(--cgh-fs-body); line-height: 1.6; text-wrap: pretty; }
.cgh-erlebt-pop__close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--cgh-radius-round); background: transparent; color: var(--cgh-ink-soft); cursor: pointer; transition: background-color 0.15s ease-out, color 0.15s ease-out; }
@media (hover: hover) { .cgh-erlebt-pop__close:hover { background: var(--cgh-band); color: var(--cgh-ink); } }
.cgh-erlebt-pop__close:focus-visible { border-radius: var(--cgh-radius-round); }
.cgh-erlebt-pop__close .cgh-icon { width: 22px; height: 22px; }
@keyframes cgh-erlebt-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes cgh-erlebt-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
	.cgh-erlebt-pop:popover-open { animation: cgh-erlebt-in 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
	.cgh-erlebt-pop:popover-open::backdrop { animation: cgh-erlebt-fade 0.2s ease-out; }
}
@media (prefers-reduced-motion: reduce) { button.cgh-chip--erlebt, .cgh-erlebt-more .cgh-chip--erlebt, .cgh-erlebt-pop__close { transition: none; } }
@media (max-width: 720px) { .cgh-erlebt-pop { padding: 18px 60px 22px 20px; } }

/* Patenkinder: cover cards like the projects and Bereiche (cgh_godchild_card), in portrait, four to a row.
   The status chip sits in the top corner of the photo, the arrow in the other. */
.cgh-kids-wrap { margin-top: clamp(40px, 5vw, 64px); }
.cgh-kids-head { margin-bottom: 0; }
.cgh-kids-head .cgh-lede { max-width: 52ch; }
.cgh-covers.cgh-covers--kids { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: clamp(28px, 3vw, 40px); }
.cgh-covers--kids .cgh-cover--kid { min-width: 0; min-height: 0; aspect-ratio: 4 / 5; }
.cgh-cover--kid .cgh-cover__fig img { object-position: 50% 22%; }
.cgh-cover--kid .cgh-cover__body { padding: clamp(18px, 2vw, 24px); }
.cgh-cover--kid .cgh-cover__title { font-size: var(--cgh-fs-card); }
.cgh-cover--kid .cgh-cover__text { margin-top: 0.45rem; font-size: var(--cgh-fs-meta); line-height: 1.45; }
.cgh-cover--kid .cgh-cover__for { margin-top: 0.55rem; font-size: var(--cgh-fs-meta); }
.cgh-cover--kid .cgh-cover__go { top: 14px; right: 14px; width: 40px; height: 40px; }
.cgh-cover__initials { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 30%; background: var(--cgh-night); color: var(--cgh-gold-soft); font-family: var(--cgh-serif); font-size: var(--cgh-fs-display); }
/* Status, on the photo: gold while a sponsor is needed, white once one is found. */
.cgh-cover__chip { position: absolute; z-index: 1; top: 14px; left: 14px; max-width: calc(100% - 76px); padding: 0.3em 0.8em; border-radius: var(--cgh-radius-pill); box-shadow: var(--cgh-shadow-lift); font-size: var(--cgh-fs-meta); line-height: 1.3; }
.cgh-chip--placed { border: 1px solid var(--cgh-line-strong); background: var(--cgh-white); color: var(--cgh-green-deep); }

/* A child's page: the frame of a project page (cgh-profile) – portrait left with the status chip, text right. */
.cgh-kidprofile { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); align-items: start; }
.cgh-kidprofile__media { position: relative; width: 100%; max-width: 17rem; }
.cgh-kidprofile .cgh-profile__fig { border-radius: var(--cgh-radius-card); box-shadow: var(--cgh-shadow-float); }
.cgh-kidprofile .cgh-profile__fig img { object-position: 50% 22%; }
.cgh-kidprofile__text { max-width: 40rem; }
.cgh-kidprofile .cgh-profile__facts { margin: 0 0 1.25rem; }
.cgh-prose .cgh-kidprofile__intro, .cgh-kidprofile__intro { margin: 0 0 1rem; color: var(--cgh-ink); font-family: var(--cgh-serif); font-size: var(--cgh-fs-title); line-height: 1.4; text-wrap: pretty; }
/* Without a Kurzinfo the child's first sentence ("Ich bin 9 Jahre alt …") is the serif intro. */
.cgh-kidprofile__text:not(:has(.cgh-kidprofile__intro)) > .cgh-prose > p:first-child { color: var(--cgh-ink); font-family: var(--cgh-serif); font-size: var(--cgh-fs-title); line-height: 1.4; }

/* "So wirst du Pate": the same box on Patenschaft and below every child (cgh_render_become_sponsor). */
.cgh-become { margin-top: clamp(48px, 6vw, 80px); padding: clamp(24px, 3.5vw, 48px); border-radius: var(--cgh-radius-card); background: var(--cgh-band); scroll-margin-top: 1.5rem; }
.cgh-become .cgh-h2 { margin: 0; font-size: var(--cgh-fs-heading); }
.cgh-become__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem clamp(24px, 3vw, 48px); margin: clamp(20px, 2.5vw, 32px) 0 0; padding: 0; list-style: none; }
.cgh-become__step { padding-top: 1.1rem; border-top: 1px solid var(--cgh-rule); }
.cgh-become__title { display: flex; align-items: center; gap: 0.65rem; margin: 0; font-size: var(--cgh-fs-card); line-height: 1.2; }
.cgh-become__num { display: inline-grid; flex: none; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: var(--cgh-radius-round); background: var(--cgh-green-deep); color: var(--cgh-white); font-family: var(--cgh-sans); font-size: var(--cgh-fs-ui); font-weight: 700; }
.cgh-become__body { margin-top: 0.7rem; }
.cgh-become__body .cgh-textlink { margin-top: 0.25rem; }
.cgh-amounts { display: grid; gap: 8px; margin: 0.9rem 0 0; padding: 0; list-style: none; }
.cgh-amounts li { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 0.6rem 0.85rem; border-radius: var(--cgh-radius-sm); background: var(--cgh-white); }
.cgh-amounts__euro { color: var(--cgh-green-deep); font-size: var(--cgh-fs-lede); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cgh-amounts__text { font-size: var(--cgh-fs-ui); line-height: 1.4; }
.cgh-become__foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem clamp(24px, 3vw, 48px); align-items: start; margin-top: clamp(24px, 3vw, 36px); padding-top: clamp(20px, 2.5vw, 28px); border-top: 1px solid var(--cgh-rule); }
.cgh-become__cta { margin: 1.25rem 0 0; }
.cgh-become__note { margin: 0; color: var(--cgh-ink-soft); }
/* Whom to ask: name and role, then each way to reach her as one pill (icon inside the link). */
.cgh-become__contact .cgh-become__ask { margin: 0; line-height: 1.45; }
.cgh-become__role { display: block; color: var(--cgh-ink-soft); font-size: var(--cgh-fs-meta); }
.cgh-become__ways, .cgh-prose .cgh-become__ways { display: flex; flex-wrap: wrap; gap: 8px; margin: 0.85rem 0 0; padding: 0; list-style: none; }
.cgh-become__ways li, .cgh-prose .cgh-become__ways li { display: flex; margin: 0; padding: 0; }
.cgh-become__ways li::before, .cgh-prose .cgh-become__ways li::before { content: none; }
.cgh-become__ways a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; box-sizing: border-box; padding: 0 1.1rem 0 0.95rem; border: 1px solid var(--cgh-line-strong); border-radius: var(--cgh-radius-pill); background: var(--cgh-white); color: var(--cgh-ink); font-size: var(--cgh-fs-ui); font-weight: 700; text-decoration: none; transition: border-color 0.15s, color 0.15s; }
.cgh-become__ways a:hover { border-color: var(--cgh-green-deep); color: var(--cgh-green-deep); }
.cgh-become__ways a:focus-visible { outline: 3px solid var(--cgh-green-deep); outline-offset: 2px; }
.cgh-become__ways .cgh-icon { flex: none; width: 20px; height: 20px; color: var(--cgh-green-deep); }
@media (prefers-reduced-motion: reduce) { .cgh-become__ways a { transition: none; } }

/* Sign-up (cgh_render_sponsor_form): the page's 5 : 7 frame – on the left, sticky, the chosen child as a
   snapshot with the amount, what the sponsor can rely on and whom to ask; on the right the form in four
   numbered steps. Big fields, errors named at the field and in a list on top. */
.cgh-signup { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 88px); align-items: start; }
.cgh-prose > .cgh-signup { grid-column: 1 / -1; max-width: none; margin-top: clamp(8px, 1.5vw, 16px); }
.cgh-signup__aside { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 24px); }
.cgh-signup__kid { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: clamp(18px, 2vw, 28px); align-items: center; padding: clamp(18px, 2.2vw, 28px); border: 1px solid var(--cgh-line); border-radius: var(--cgh-radius-card); background: var(--cgh-wash); box-shadow: var(--cgh-shadow-float); }
.cgh-signup__photo, .cgh-prose .cgh-signup__photo { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: var(--cgh-radius-sm); background: var(--cgh-tint); box-shadow: var(--cgh-shadow-raise); }
.cgh-signup__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.cgh-signup__photo img[hidden] { display: none; }
.cgh-signup__placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: var(--cgh-tint); color: var(--cgh-green-deep); }
.cgh-signup__placeholder[hidden] { display: none; }
.cgh-signup__placeholder .cgh-icon { width: 36px; height: 36px; }
.cgh-prose .cgh-signup__who p { margin: 0; }
.cgh-prose .cgh-signup__name { font-family: var(--cgh-serif); font-size: var(--cgh-fs-heading); font-weight: 500; line-height: 1.15; text-wrap: balance; }
.cgh-prose .cgh-signup__amount { margin-top: 0.5rem; color: var(--cgh-green-deep); font-size: var(--cgh-fs-lede); font-weight: 700; font-variant-numeric: tabular-nums; }
.cgh-prose .cgh-signup__amount.is-empty { color: var(--cgh-ink-soft); font-size: var(--cgh-fs-ui); font-weight: 400; }
.cgh-signup__help { margin-top: clamp(24px, 3vw, 32px); }
.cgh-prose .cgh-signup__promises { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.cgh-prose .cgh-signup__promises li { display: flex; gap: 0.75rem; align-items: flex-start; margin: 0; padding: 0; font-size: var(--cgh-fs-ui); line-height: 1.45; }
.cgh-prose .cgh-signup__promises li::before { content: none; }
.cgh-signup__promises .cgh-icon { width: 22px; height: 22px; flex: none; margin-top: 0.05em; color: var(--cgh-green-deep); }
.cgh-signup__help .cgh-become__contact { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--cgh-rule); }

.cgh-form { min-width: 0; scroll-margin-top: 1.5rem; }
.cgh-form__set { min-width: 0; margin: 0; padding: clamp(28px, 3.5vw, 40px) 0 0; border: 0; border-top: 1px solid var(--cgh-rule); }
.cgh-form__set + .cgh-form__set { margin-top: clamp(28px, 3.5vw, 40px); }
.cgh-form > .cgh-form__set:first-of-type { padding-top: 0; border-top: 0; }
/* A floated legend leaves the fieldset's top rule whole. */
.cgh-form__set > legend { float: left; width: 100%; margin: 0 0 1.1rem; padding: 0; }
.cgh-form__set > legend + * { clear: both; }
.cgh-form__set > legend + .cgh-field, .cgh-form__set > legend + .cgh-choices { margin-top: 0; }
.cgh-form__set > legend + .cgh-form__lead { margin-top: -0.6rem; margin-bottom: 0.2rem; }
.cgh-signup__legend { display: flex; align-items: center; gap: 0.7rem; font-family: var(--cgh-serif); font-size: var(--cgh-fs-subhead); font-weight: 500; line-height: 1.2; }
.cgh-prose .cgh-form__lead { margin: 0.4rem 0 0; color: var(--cgh-ink-soft); }
.cgh-form .cgh-field { margin-top: 1.15rem; }
.cgh-form .cgh-field label { display: block; font-size: var(--cgh-fs-ui); font-weight: 700; line-height: 1.3; }
.cgh-field__opt { color: var(--cgh-ink-soft); font-weight: 400; }
.cgh-form .cgh-field input, .cgh-form .cgh-field select { display: block; box-sizing: border-box; width: 100%; min-height: 52px; margin-top: 0.45rem; padding: 0.55em 0.85em; border: 2px solid var(--cgh-ink-soft); border-radius: var(--cgh-radius-sm); background: var(--cgh-white); color: var(--cgh-ink); font: inherit; }
.cgh-form .cgh-field input::placeholder { color: var(--cgh-ink-soft); }
@media (hover: hover) { .cgh-form .cgh-field input:hover, .cgh-form .cgh-field select:hover { border-color: var(--cgh-ink); } }
.cgh-form #f-iban { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; text-transform: uppercase; }
.cgh-prose .cgh-form .cgh-field__hint { margin: 0.25rem 0 0; color: var(--cgh-ink-soft); font-size: var(--cgh-fs-meta); line-height: 1.45; }
.cgh-form .cgh-field__hint .cgh-textlink { font-size: inherit; }
.cgh-prose .cgh-form .cgh-field__error { display: flex; gap: 0.4rem; align-items: flex-start; margin: 0.35rem 0 0; color: var(--cgh-error); font-size: var(--cgh-fs-ui); font-weight: 700; line-height: 1.4; }
.cgh-field__error .cgh-icon { width: 20px; height: 20px; flex: none; margin-top: 0.1em; }
.cgh-form .has-error input, .cgh-form .has-error select { border-color: var(--cgh-error); }
.cgh-form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1rem; align-items: start; }
.cgh-form__row--city { grid-template-columns: 8.5rem minmax(0, 1fr); }
@supports (grid-template-rows: subgrid) {
	@media (min-width: 521px) {
		.cgh-form__row { grid-template-rows: repeat(4, auto); }
		.cgh-form__row > .cgh-field { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
		.cgh-form__row > .cgh-field > label { grid-row: 1; }
		.cgh-form__row > .cgh-field > .cgh-field__hint { grid-row: 2; }
		.cgh-form__row > .cgh-field > .cgh-field__error { grid-row: 3; }
		.cgh-form__row > .cgh-field > :is(input, select) { grid-row: 4; align-self: start; }
	}
}
.cgh-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 12px; margin-top: 1.15rem; }
.cgh-choice { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.75rem; align-content: start; padding: 0.95rem 1.1rem; border: 2px solid var(--cgh-rule); border-radius: var(--cgh-radius-sm); background: var(--cgh-white); cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.cgh-choice input { grid-row: span 2; width: 22px; height: 22px; margin: 0.3rem 0 0; accent-color: var(--cgh-green-deep); }
.cgh-choice input:focus-visible { outline: none; }
.cgh-choice:has(input:focus-visible) { outline: 3px solid var(--cgh-green-deep); outline-offset: 3px; }
.cgh-choice__euro { font-size: var(--cgh-fs-card); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; }
.cgh-choice__euro span { color: var(--cgh-ink-soft); font-size: var(--cgh-fs-ui); font-weight: 400; }
.cgh-choice__text { margin-top: 0.2rem; color: var(--cgh-ink-soft); font-size: var(--cgh-fs-ui); line-height: 1.4; }
.cgh-choice:has(input:checked) { border-color: var(--cgh-green-deep); background: var(--cgh-tint); }
@media (hover: hover) { .cgh-choice:hover { border-color: var(--cgh-line-strong); } .cgh-choice:has(input:checked):hover { border-color: var(--cgh-green-deep); } }
.cgh-form__set.has-error .cgh-choice { border-color: var(--cgh-error); }
.cgh-mandate { margin-top: 1.5rem; padding: 1.1rem 1.25rem 0.6rem; border: 1px solid var(--cgh-line); border-radius: var(--cgh-radius-sm); background: var(--cgh-tint); }
.cgh-mandate.has-error { border: 2px solid var(--cgh-error); }
.cgh-prose .cgh-mandate p { margin: 0; }
.cgh-mandate__title { font-weight: 700; }
.cgh-prose .cgh-mandate .cgh-mandate__text { margin-top: 0.35rem; font-size: var(--cgh-fs-ui); line-height: 1.5; }
.cgh-prose .cgh-mandate .cgh-field__error { margin-top: 0.6rem; }
.cgh-check { display: flex; gap: 0.75rem; align-items: center; min-height: 48px; margin-top: 0.5rem; font-weight: 700; cursor: pointer; }
.cgh-check input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--cgh-green-deep); }
/* The last step: a sand block, the button first. */
.cgh-form__send { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: clamp(32px, 4vw, 48px); padding: clamp(20px, 2.5vw, 28px); border-radius: var(--cgh-radius-card); background: var(--cgh-band); }
.cgh-form__send .cgh-btn { min-height: 56px; padding-inline: 1.75em; }
.cgh-prose .cgh-form__privacy { flex: 1 1 16rem; margin: 0; color: var(--cgh-ink-soft); font-size: var(--cgh-fs-ui); }
button.cgh-btn { cursor: pointer; }
.cgh-form__alert { margin: 0 0 2rem; padding: 1rem 1.25rem; border: 2px solid var(--cgh-error); border-radius: var(--cgh-radius-sm); background: var(--cgh-white); }
.cgh-prose .cgh-form__alert-title { margin: 0; color: var(--cgh-error); font-weight: 700; }
.cgh-prose .cgh-form__alert ul { margin: 0.5rem 0 0; }
.cgh-form__alert a { color: var(--cgh-ink); font-weight: 700; }
.cgh-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cgh-form-done { padding: clamp(24px, 3vw, 40px); border-radius: var(--cgh-radius-card); background: var(--cgh-band); scroll-margin-top: 1.5rem; }
.cgh-prose .cgh-form-done p { margin: 0.75rem 0 0; }
.cgh-prose .cgh-form-done .cgh-form-done__title { margin: 0; font-family: var(--cgh-serif); font-size: var(--cgh-fs-headline); line-height: 1.15; text-wrap: balance; }

@media (max-width: 1100px) {
	.cgh-covers.cgh-covers--kids { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cgh-become__steps { grid-template-columns: minmax(0, 1fr); }
	.cgh-become__step { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); column-gap: 2rem; }
	.cgh-become__body { margin-top: 0.15rem; }
}
@media (max-width: 780px) {
	.cgh-covers.cgh-covers--kids { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.cgh-kidprofile { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.cgh-kidprofile__media { max-width: 15rem; }
	.cgh-become__step { display: block; }
	.cgh-become__body { margin-top: 0.7rem; }
	.cgh-become__foot { grid-template-columns: minmax(0, 1fr); }
	.cgh-become__cta .cgh-btn { width: 100%; }
}
/* Below the frame's two columns: the child first, then the form, then promises and contact. */
@media (max-width: 1100px) {
	.cgh-signup { grid-template-columns: minmax(0, 1fr); row-gap: clamp(28px, 4vw, 40px); }
	.cgh-signup__aside { display: contents; }
	.cgh-signup__kid { order: 1; max-width: 34rem; }
	.cgh-signup > .cgh-form, .cgh-signup > .cgh-form-done { order: 2; }
	.cgh-signup__help { order: 3; max-width: 40rem; margin-top: 0; }
	.cgh-signup.is-done .cgh-signup__help { display: none; }
}
@media (max-width: 520px) {
	.cgh-signup__kid { grid-template-columns: 96px minmax(0, 1fr); padding: 16px; }
	.cgh-prose .cgh-signup__name { font-size: var(--cgh-fs-card); }
	.cgh-form__row { grid-template-columns: minmax(0, 1fr); }
	.cgh-form__row--city { grid-template-columns: 7rem minmax(0, 1fr); }
	.cgh-form__send { padding: 18px; }
	.cgh-form__send .cgh-btn { width: 100%; }
}
@media (max-width: 420px) {
	.cgh-covers.cgh-covers--kids { gap: 10px; }
	/* Two narrow columns: name, year and status carry the card; the sentence is on the child's page. */
	.cgh-cover--kid .cgh-cover__body { padding: 14px; }
	.cgh-cover--kid .cgh-cover__text { display: none; }
	.cgh-cover--kid .cgh-cover__title { font-size: var(--cgh-fs-lede); }
	.cgh-cover--kid .cgh-cover__go { display: none; }
	.cgh-cover__chip { top: 10px; left: 10px; max-width: calc(100% - 20px); padding: 0.2em 0.6em; }
}

/* Cover cards (group areas, projects): adapted from the old site's photo cards */
.cgh-covers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); margin: clamp(28px, 3vw, 40px) 0 0; padding: 0; list-style: none; }
.cgh-cover {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(26rem, 34vw, 30rem);
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--cgh-radius-card);
	background: var(--cgh-night);
}
/* The photo lies behind the text (z-index -1 in the card's own layer), so the body needs no position and
   the title link's ::before covers the whole card, photo included. */
.cgh-cover__fig { position: absolute; inset: 0; z-index: -1; margin: 0; }
.cgh-cover__fig img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.cgh-cover__fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--cgh-shade-rgb) / 0.9) 0%, rgb(var(--cgh-shade-rgb) / 0.7) 35%, rgb(var(--cgh-shade-rgb) / 0) 68%); }
/* Project pictures are often flyers full of lettering: more shade behind the text. */
.cgh-cover--project .cgh-cover__fig::after { background: linear-gradient(to top, rgb(var(--cgh-shade-rgb) / 0.94) 0%, rgb(var(--cgh-shade-rgb) / 0.84) 45%, rgb(var(--cgh-shade-rgb) / 0.4) 72%, rgb(var(--cgh-shade-rgb) / 0.08) 100%); }
.cgh-cover--noimg { background: var(--cgh-night); }
.cgh-cover__body { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; width: 100%; padding: clamp(25px, 3.15vw, 36px); color: var(--cgh-white); }
/* A round arrow in the top right corner instead of a button text, so title and text keep the card's width;
   a little shade of its own keeps it readable on a bright sky. The whole card is the link. */
.cgh-cover__go { position: absolute; z-index: 1; top: clamp(16px, 2vw, 22px); right: clamp(16px, 2vw, 22px); display: grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid var(--cgh-on-photo-line); border-radius: var(--cgh-radius-round); background: rgb(var(--cgh-shade-rgb) / 0.4); color: var(--cgh-white); transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.cgh-cover__go .cgh-icon { width: 20px; height: 20px; }
.cgh-cover--link:hover .cgh-cover__go { border-color: var(--cgh-white); background: var(--cgh-white); color: var(--cgh-night); }
.cgh-cover__title { margin: 0; color: var(--cgh-white); font-family: var(--cgh-serif); font-size: var(--cgh-fs-heading); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
.cgh-cover__title a { color: inherit; text-decoration: none; }
.cgh-cover__title a::before { content: ""; position: absolute; inset: 0; z-index: 2; }
.cgh-cover__title a:focus-visible { outline: none; }
.cgh-cover:has(.cgh-cover__title a:focus-visible) { outline: 3px solid var(--cgh-green-deep); outline-offset: 3px; }
.cgh-cover__text { max-width: 38ch; margin: 0.65rem 0 0; color: var(--cgh-white-soft); font-size: var(--cgh-fs-ui); line-height: 1.5; }
/* Who the area is for (Bereich field "Für wen?"). */
.cgh-cover__for { display: flex; align-items: flex-start; gap: 0.45em; margin: 0.8rem 0 0; color: var(--cgh-white); font-size: var(--cgh-fs-ui); font-weight: 600; line-height: 1.35; }
.cgh-cover__for .cgh-icon { flex: none; width: 1.15em; height: 1.15em; margin-top: 0.1em; color: var(--cgh-gold-soft); }
.cgh-cover--link:hover .cgh-cover__fig img { transform: scale(1.03); }
@media (max-width: 1000px) { .cgh-covers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cgh-covers { grid-template-columns: minmax(0, 1fr); } .cgh-cover { min-height: 20rem; } .cgh-covers.cgh-covers--kids { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cgh-covers--kids .cgh-cover--kid { min-height: 0; }
	/* The children's faces sit high in the card: the fade stays in the lower half, as on wide screens. */
	.cgh-cover--kid .cgh-cover__fig::after { background: linear-gradient(to top, rgb(var(--cgh-shade-rgb) / 0.9) 0%, rgb(var(--cgh-shade-rgb) / 0.6) 30%, rgb(var(--cgh-shade-rgb) / 0) 60%); } }
@media (max-width: 340px) { .cgh-covers.cgh-covers--kids { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .cgh-cover__fig img, .cgh-cover__go { transition: none; } .cgh-cover--link:hover .cgh-cover__fig img { transform: none; } }

/* Area cards (front page and Kreise und Gruppen): two side by side, then three – no gap with five areas. */
.cgh-covers--areas { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: 0; }
.cgh-covers--areas .cgh-cover { grid-column: span 2; min-height: clamp(20.4rem, 25.5vw, 22.95rem); }
.cgh-covers--areas .cgh-cover:nth-child(-n + 2) { grid-column: span 3; }
@media (max-width: 1000px) { .cgh-covers--areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cgh-covers--areas .cgh-cover, .cgh-covers--areas .cgh-cover:nth-child(-n + 2) { grid-column: auto; } .cgh-covers--areas .cgh-cover:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* On phones the text covers most of the card: shade all of it. */
@media (max-width: 640px) { .cgh-cover__fig::after { background: linear-gradient(to top, rgb(var(--cgh-shade-rgb) / 0.94) 0%, rgb(var(--cgh-shade-rgb) / 0.84) 50%, rgb(var(--cgh-shade-rgb) / 0.5) 80%, rgb(var(--cgh-shade-rgb) / 0.2) 100%); } }
@media (max-width: 640px) { .cgh-covers--areas { grid-template-columns: minmax(0, 1fr); gap: 12px; } .cgh-covers--areas .cgh-cover:last-child:nth-child(odd) { grid-column: auto; } .cgh-covers--areas .cgh-cover { min-height: 15.5rem; } }
/*
 * Titles in one row start at the same height: each card spans two rows of the list (photo space, body)
 * on a subgrid, so the body row is as tall as the longest body in the row; texts hang below the title.
 * A subgridded card adds no height of its own, so the photo row carries it (about the old min-height minus
 * a body). Phones keep the single-column cards as they are.
 */
@supports (grid-template-rows: subgrid) {
	@media (min-width: 641px) {
		.cgh-covers--areas { grid-auto-rows: clamp(8.5rem, 18vw - 6rem, 10.5rem) auto; }
		.cgh-covers--areas .cgh-cover { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; align-items: stretch; min-height: 0; }
		.cgh-covers--areas .cgh-cover__body { grid-row: 2; width: auto; grid-template-rows: auto 1fr; align-content: start; }
	}
}

/* Smaller cover cards, e.g. "Weitere Kreise und Gruppen" */
.cgh-covers--mini { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.cgh-cover--mini { min-height: 15rem; }
.cgh-cover--mini .cgh-cover__body { padding: 20px; }
.cgh-cover--mini .cgh-cover__title { font-size: var(--cgh-fs-lede); }
.cgh-cover--mini .cgh-cover__go { width: 40px; height: 40px; }
.cgh-cover--mini .cgh-cover__go { top: 12px; right: 12px; }
@media (max-width: 640px) { .cgh-covers--mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cgh-cover--mini { min-height: 12rem; } }

/* Flyer & Dateien: download buttons */
/* "Flyer und Dateien" (cgh_render_downloads): its own section after the text, like a section of the text –
   a rule above, the heading with the green line on the left, the files on the right (stacked below 1101px). */
.cgh-files { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem clamp(40px, 5vw, 88px); align-items: start; margin-block: clamp(2.25rem, 4vw, 3.5rem) 0; padding-top: clamp(2.25rem, 4vw, 3.5rem); border-top: 1px solid var(--cgh-rule); }
.cgh-files__title { font-size: var(--cgh-fs-heading); line-height: 1.2; }
.cgh-files__title::after { content: ""; display: block; width: 64px; height: 10px; margin-top: 1rem; background: var(--cgh-green-deep); -webkit-mask: var(--cgh-mark) center / 100% 100% no-repeat; mask: var(--cgh-mark) center / 100% 100% no-repeat; }
@media (min-width: 1101px) { .cgh-files { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
/* One file per row, so a label stays on one line beside its icon. */
.cgh-files .cgh-downloads { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
.cgh-downloads { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cgh-download {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 64px;
	height: 100%;
	box-sizing: border-box;
	padding: 12px 16px;
	border: 1px solid var(--cgh-line);
	border-radius: var(--cgh-radius-card);
	background: var(--cgh-white);
	box-shadow: var(--cgh-shadow-rest);
	color: var(--cgh-ink);
	text-decoration: none;
	transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.cgh-download > .cgh-icon:first-child { flex: none; width: 40px; height: 40px; padding: 8px; box-sizing: border-box; border-radius: var(--cgh-radius-card); background: var(--cgh-green-deep); color: var(--cgh-white); }
.cgh-download__thumb { flex: none; width: 40px; height: 40px; object-fit: cover; object-position: top; border-radius: var(--cgh-radius-sm); box-shadow: 0 0 0 1px var(--cgh-line); }
.cgh-download > .cgh-icon:last-child { flex: none; width: 22px; height: 22px; margin-left: auto; color: var(--cgh-green-deep); transition: transform 0.15s; }
.cgh-download__text { display: grid; min-width: 0; }
.cgh-download__label { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.cgh-download__meta { color: var(--cgh-ink-soft); font-size: var(--cgh-fs-meta); font-variant-numeric: tabular-nums; }
.cgh-download:hover { border-color: var(--cgh-green-deep); box-shadow: var(--cgh-shadow-raise); transform: translateY(-2px); }
.cgh-download:hover > .cgh-icon:last-child { transform: translateY(2px); }
.cgh-download:focus-visible { outline: 3px solid var(--cgh-green-deep); outline-offset: 3px; }
/* Compact: inside group cards and service rows */
.cgh-downloads--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 8px; margin-top: 1rem; }
.cgh-downloads--compact .cgh-download { min-height: 52px; padding: 8px 12px; gap: 10px; box-shadow: none; background: var(--cgh-tint); border-color: transparent; }
.cgh-downloads--compact .cgh-download > .cgh-icon:first-child { width: 32px; height: 32px; padding: 6px; border-radius: var(--cgh-radius-sm); }
.cgh-downloads--compact .cgh-download:hover { background: var(--cgh-white); border-color: var(--cgh-green-deep); }
.cgh-row__files { grid-column: 1 / -1; margin-top: 0.5rem; }
@media (prefers-reduced-motion: reduce) { .cgh-download, .cgh-download > .cgh-icon { transition: none; } .cgh-download:hover { transform: none; } }

/* Person cards: portrait cover (like the project and group cards) */
.cgh-people > li { margin: 0; }
.cgh-people { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: clamp(16px, 2vw, 24px); margin: clamp(20px, 2.5vw, 32px) 0 0; padding: 0; list-style: none; }
.cgh-person {
	display: flex;
	flex-direction: column;
	flex: 0 1 calc((100% - 3 * clamp(16px, 2vw, 24px)) / 4);
	min-width: 0;
	overflow: hidden;
	border-radius: var(--cgh-radius-card);
	background: var(--cgh-white);
	box-shadow: var(--cgh-shadow-portrait);
}
/* The portrait: the same 4:5 on every card, so names in a row line up whether or not a strip follows. */
.cgh-person__media { position: relative; display: flex; align-items: flex-end; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cgh-night); }
.cgh-person__photo { position: absolute; inset: 0; }
.cgh-person__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform 0.5s; }
.cgh-person__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--cgh-shade-rgb) / 0.9) 0%, rgb(var(--cgh-shade-rgb) / 0.62) 32%, rgb(var(--cgh-shade-rgb) / 0.25) 52%, transparent 72%); }
.cgh-person .cgh-person__initials { display: grid; place-items: start center; width: 100%; height: 100%; padding-top: 22%; box-sizing: border-box; background: none; color: var(--cgh-gold-soft); font-family: var(--cgh-serif); font-size: var(--cgh-fs-display); }
.cgh-person--noimg .cgh-person__photo::after { background: linear-gradient(to top, rgb(var(--cgh-shade-rgb) / 0.55) 0%, transparent 50%); }
.cgh-person__body { position: relative; z-index: 1; width: 100%; padding: 18px; color: var(--cgh-white); }
.cgh-person__role { display: inline-block; margin: 0.7rem 0 0; padding: 0.35em 0.85em; border-radius: 1.05em; text-wrap: wrap; background: var(--cgh-chip-photo); color: var(--cgh-green-deep); font-size: var(--cgh-fs-meta); font-weight: 700; line-height: 1.35; overflow-wrap: break-word; hyphens: auto; }
.cgh-person__name { margin: 0; color: var(--cgh-white); font-family: var(--cgh-sans); font-size: var(--cgh-fs-card); font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; text-shadow: var(--cgh-text-shadow); }
/* Contact strip under the photo: one or two equal buttons, divided by a hairline. */
.cgh-person__contact { display: flex; margin: 0; }
/* Labelled white pills (the light button on photos), so they read on any background. */
.cgh-person__btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.45em; min-width: 0; min-height: 52px; box-sizing: border-box; padding: 0 0.5em; background: var(--cgh-white); color: var(--cgh-green-deep); font-size: var(--cgh-fs-ui); font-weight: 700; line-height: 1; text-decoration: none; transition: background 0.15s; }
.cgh-person__btn + .cgh-person__btn { border-left: 1px solid var(--cgh-rule); }
.cgh-person__btn .cgh-icon { flex: none; width: 19px; height: 19px; color: var(--cgh-green-deep); }
@media (hover: hover) { .cgh-person__btn:hover { background: var(--cgh-tint); color: var(--cgh-night); } }
.cgh-person__btn:focus-visible { outline: 3px solid var(--cgh-green-deep); outline-offset: -3px; }
.cgh-person:hover .cgh-person__photo img { transform: scale(1.03); }
@media (max-width: 1100px) { .cgh-person { flex-basis: calc((100% - 2 * clamp(16px, 2vw, 24px)) / 3); } }
@media (max-width: 720px) { .cgh-person { flex-basis: calc((100% - 14px) / 2); } .cgh-people { gap: 14px; } .cgh-person__body { padding: 12px; } .cgh-person__role { border-radius: var(--cgh-radius-sm); } .cgh-person__name { font-size: var(--cgh-fs-body); } }
/* Narrow cards: the strip's buttons show only their icons (the label stays for screen readers),
   unless the strip has one button – then there is room for the word. */
@media (max-width: 800px) { .cgh-person__btn { padding: 0; } .cgh-person__btn:not(:only-child) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
/* The role under the photo, for phones only (below). */
.cgh-person__role-below { display: none; }
@media (max-width: 720px) {
	/* A two- or three-line chip covered faces: on phones the role is plain text under the photo. */
	.cgh-person__role { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.cgh-person__role-below { display: block; margin: 0; padding: 10px 12px 12px; color: var(--cgh-green-deep); font-size: var(--cgh-fs-meta); font-weight: 700; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; }
	.cgh-person__role-below + .cgh-person__contact { border-top: 1px solid var(--cgh-rule); }
}
@media (max-width: 360px) { .cgh-person { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .cgh-person__photo img { transition: none; } .cgh-person:hover .cgh-person__photo img { transform: none; } }

/* People groups on Kontakt: heading, cards and text start on the content edge, like every section */
.cgh-people-group .cgh-prose { max-width: 46rem; margin-inline: 0; }

/* Tables in page text: quiet rows instead of a hard grid */
.cgh-prose .wp-block-table table { border: 0; }
.cgh-prose .wp-block-table :is(td, th) { padding: 0.7rem 1rem 0.7rem 0; border: 0; border-bottom: 1px solid var(--cgh-rule); font-variant-numeric: tabular-nums; }
.cgh-prose .wp-block-table tr:last-child :is(td, th) { border-bottom: 0; }
.cgh-prose .wp-block-table td:first-child { width: 1%; white-space: nowrap; color: var(--cgh-green-deep); }
.cgh-prose .wp-block-table td:first-child strong { font-weight: 700; }

/* Buttons in page text look like the theme's buttons */
.cgh-prose .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0.7em 1.35em; border: 2px solid var(--cgh-green-deep); border-radius: var(--cgh-radius-pill); background: var(--cgh-green-deep); color: var(--cgh-white); font-weight: 700; font-size: var(--cgh-fs-ui); line-height: 1.25; text-decoration: none; }
.cgh-prose .wp-block-button__link:hover { background: var(--cgh-night); border-color: var(--cgh-night); }
.cgh-prose .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--cgh-green-deep); }
.cgh-prose .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--cgh-green-deep); border-color: var(--cgh-green-deep); color: var(--cgh-white); }

/* Kontakt page text: its blocks (contact data, people) span the full width, the text sections run in the
   two columns of every text page (heading left); the columns are cards of one kind. */
/* Column blocks an editor adds to the Kontakt text stand below each other as cards (the giving box
   itself is the "Spendenkasten" block now). */
.cgh-main--contact .cgh-prose > .wp-block-columns { flex-direction: column; gap: clamp(16px, 2.4vw, 28px); margin-top: 1.75rem; }
.cgh-main--contact .cgh-prose > .wp-block-columns > .wp-block-column { flex-basis: auto !important; }
.cgh-main--contact .cgh-prose .wp-block-column {
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	padding: clamp(22px, 3vw, 30px);
	border: 1px solid var(--cgh-line);
	border-radius: var(--cgh-radius-card);
	background: var(--cgh-white);
	box-shadow: var(--cgh-shadow-float);
}
.cgh-main--contact .cgh-prose .wp-block-column > * + * { margin-top: 0.9rem; }
.cgh-main--contact .cgh-prose .wp-block-column > h3 { margin-top: 0; font-size: var(--cgh-fs-card); }
.cgh-main--contact .cgh-prose .wp-block-column > .wp-block-buttons { margin-top: auto; padding-top: 1.1rem; }
.cgh-main--contact .cgh-prose .wp-block-column .wp-block-image { width: max-content; max-width: 100%; padding: 10px; border: 1px solid var(--cgh-rule); border-radius: var(--cgh-radius-card); background: var(--cgh-white); }
.cgh-main--contact .cgh-prose .wp-block-column .wp-block-image img { width: 160px; height: auto; border-radius: 0; }
.cgh-main--contact .cgh-prose .wp-block-column .wp-block-table { margin-inline: 0; }

/* Footer on phones: one plain column per row, set apart by its title's hairline – no boxes inside the dark band */
@media (max-width: 720px) {
	.cgh-foot { padding-block: 40px 28px; }
	.cgh-foot__top { gap: 16px; padding-bottom: 24px; }
	.cgh-foot__invite { font-size: var(--cgh-fs-body); }
	.cgh-foot .cgh-logo__img { height: 52px; }
	.cgh-foot__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 28px; }
	.cgh-foot__col { padding: 0; border: 0; border-radius: 0; background: none; }
	.cgh-foot__title { margin-bottom: 0.75rem; }
	.cgh-foot__big { font-size: var(--cgh-fs-lede); }
	.cgh-foot__lines a { overflow-wrap: normal; word-break: normal; }
	.cgh-foot__iban { width: 100%; box-sizing: border-box; }
	.cgh-foot__btn { margin-top: 0.25rem; }
	.cgh-foot__legal { flex-direction: column; align-items: flex-start; gap: 6px; }
	.cgh-foot__legal > span:last-child { margin-left: -0.5em; margin-right: 0; }
}

/* Mobile menu button: a soft pill instead of a hard black box */
@media (max-width: 1100px) {
	.cgh-js .cgh-menu-btn {
		gap: 0.5em;
		min-height: 48px;
		padding: 0 1.05em 0 0.85em;
		border: 0;
		border-radius: var(--cgh-radius-pill);
		background: var(--cgh-tint-deep);
		color: var(--cgh-green-deep);
		font: 700 var(--cgh-fs-meta)/1 var(--cgh-sans);
		transition: background 0.15s, color 0.15s;
	}
	@media (hover: hover) { .cgh-js .cgh-menu-btn:hover { background: var(--cgh-tint-strong); } }
	.cgh-js .cgh-menu-btn[aria-expanded="true"] { background: var(--cgh-green-deep); color: var(--cgh-white); }
	.cgh-js .cgh-menu-btn:focus-visible { outline: 3px solid var(--cgh-gold); outline-offset: 2px; }
	.cgh-menu-btn .cgh-icon { width: 20px; height: 20px; }
}
@media (max-width: 420px) {
	.cgh-logo__img { height: 44px; }
}

/* All theme buttons are pills, like the chips, menu and download buttons */
.cgh-btn { box-sizing: border-box; border-radius: var(--cgh-radius-pill); }
.cgh-btn .cgh-icon { width: 20px; height: 20px; flex: none; }

/* Hero buttons: white pill + frosted glass pill */
.cgh-hero__cta { gap: 12px; align-items: center; }
.cgh-hero__cta .cgh-btn { height: auto; }
.cgh-hero__cta .cgh-btn { min-height: 50px; padding: 0.6em 1.4em 0.6em 1.15em; box-shadow: var(--cgh-shadow-hero); }
.cgh-hero__cta .cgh-btn--light .cgh-icon { color: var(--cgh-green-deep); }
.cgh-hero__cta .cgh-btn--light-ghost { border-color: var(--cgh-on-photo-line); background: var(--cgh-on-dark-fill-strong); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: none; }
.cgh-hero__cta .cgh-btn--light-ghost:hover { background: var(--cgh-white); border-color: var(--cgh-white); color: var(--cgh-night); }
@media (max-width: 720px) {
	.cgh-hero__cta { flex-direction: column; align-items: stretch; gap: 10px; }
	.cgh-hero__cta .cgh-btn { flex: none; min-height: 48px; font-size: var(--cgh-fs-meta); }
}
@media (max-width: 420px) {
	/* Never below 16px: a long label wraps to two balanced lines and the pill grows instead. */
	.cgh-hero__cta .cgh-btn { padding-block: 0.55em; padding-inline: 1em; font-size: var(--cgh-fs-meta); line-height: 1.3; text-wrap: balance; }
}

/* Keeps place names like "Bruchsal-Heidelsheim" or the tagline on one line */
.cgh-nobr { white-space: nowrap; }

/* A separator that opens a text block has nothing to separate */
.cgh-prose > .wp-block-separator:first-child { display: none; }
.cgh-prose > .wp-block-separator:first-child + * { margin-top: 0; }

/* Search results: pages carry their import date, which says nothing */
.type-page > .cgh-postlist__item .wp-block-post-date { display: none; }

/* Front page: the Sunday block ---------------------------------------------------------------- */

/* The one dominant block of the page: a little more air than the other sections. */
.cgh-sunday { padding-block: clamp(64px, 8vw, 120px) clamp(72px, 9vw, 136px); }
#naechster-gottesdienst, #erstes-mal { scroll-margin-top: 16px; }
/* Inside the Sunday block the facts follow the list, as on the services page. */
.cgh-sunday .cgh-services__first { margin-top: clamp(48px, 6vw, 80px); }


/* Front page: projects as a compact row --------------------------------------------------------- */

.cgh-sec--compact { padding-block: clamp(48px, 6vw, 88px); }
.cgh-projrow { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.cgh-projrow__title { margin: 0; font-size: var(--cgh-fs-heading); line-height: 1.15; }
.cgh-projrow .cgh-soft { margin-top: 0.8rem; }
.cgh-linklist--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); border-top: 0; }
.cgh-linklist--grid li:nth-child(-n + 2) { border-top: 1px solid var(--cgh-rule); }
.cgh-linklist--grid a { min-height: 60px; font-family: var(--cgh-serif); font-size: var(--cgh-fs-lede); }

/* Front page: closing invitation ---------------------------------------------------------------- */

.cgh-closing { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
/* Without time and address (services page) the short text column centres on the actions. */
.cgh-closing--short { align-items: center; }
.cgh-closing__title { margin: 0; font-size: var(--cgh-fs-feature); line-height: 1.1; letter-spacing: -0.015em; }
.cgh-closing__when { margin: 1rem 0 0; font-family: var(--cgh-serif); font-size: var(--cgh-fs-title); line-height: 1.45; }
.cgh-closing .cgh-soft { margin-top: 0.8rem; }
.cgh-closing__actions { display: grid; gap: 12px; }
.cgh-closing__actions > .cgh-btn { width: 100%; box-sizing: border-box; }
/* The person to ask, between Anfahrt and the phone: the footer's contact, on sand. */
/* Three bands split by rules – the person, the ways, all contact options – with the same ~18px
   around each rule; the 48px link rows carry their own air, so the padding below is smaller. */
.cgh-closing__contact { margin-top: 0; padding: 22px 22px 10px; background: var(--cgh-white); border: 1px solid var(--cgh-rule); border-radius: var(--cgh-radius-card); }
/* Reached from "Fragen? … hilft dir weiter" on a group card: the same evening-gold glow as an arriving group. */
.cgh-closing__contact { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 8px); }
.cgh-closing__contact.is-arrived { animation: cgh-arrive-contact 3.2s ease-in-out both; }
@keyframes cgh-arrive-contact {
	0%, 100% { border-color: var(--cgh-rule); background-color: var(--cgh-white); box-shadow: 0 0 0 0 transparent; }
	19%, 50% { border-color: var(--cgh-green-deep); background-color: var(--cgh-gold-pale); box-shadow: 0 0 0 1px var(--cgh-green-deep); }
}
/* Bereich pages: the band holds two lines and one card – less air than the front page's closing. */
.cgh-sec--closing { padding-block: clamp(48px, 6vw, 80px); }
.cgh-closing__ask { margin: 0 0 12px; color: var(--cgh-green-deep); font-size: var(--cgh-fs-meta); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.cgh-closing__person { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--cgh-rule); }
.cgh-closing__avatar { display: grid; place-items: center; flex: none; width: 72px; height: 72px; border-radius: var(--cgh-radius-round); background: var(--cgh-night); color: var(--cgh-gold-soft); font-family: var(--cgh-serif); font-size: var(--cgh-fs-card); }
.cgh-closing__person .cgh-closing__ask { margin: 0 0 2px; }
.cgh-closing__person p { margin: 0; line-height: 1.35; }
.cgh-closing__person p strong { display: block; font-weight: 600; }
.cgh-closing__person p span { display: block; color: var(--cgh-ink-soft); font-size: var(--cgh-fs-meta); }
/* Phone and e-mail as one pair: 40px rows (still easy to tap), the air around the rules from the padding. */
.cgh-closing__lines { margin: 0; padding: 10px 0; list-style: none; }
.cgh-closing__lines a { display: flex; align-items: center; gap: 0.65em; min-height: 40px; color: var(--cgh-green-deep); font-weight: 600; text-decoration: underline 1.5px transparent; text-underline-offset: 0.2em; overflow-wrap: anywhere; transition: text-decoration-color 0.2s; }
.cgh-closing__lines a:hover { text-decoration-color: currentColor; }
.cgh-closing__lines .cgh-icon { flex: none; width: 20px; height: 20px; color: var(--cgh-green-deep); }
.cgh-closing__more { margin: 0; }
.cgh-closing__lines + .cgh-closing__more { padding-top: 4px; border-top: 1px solid var(--cgh-rule); }
.cgh-closing__actions > .cgh-closing__more { text-align: center; }
/* Next service elsewhere: a gold-marked note under Anfahrt, so it is not taken for the way to the Gemeindehaus. */
.cgh-closing__away { display: flex; align-items: flex-start; gap: 0.5em; margin: 0; padding: 0.7em 0.9em; border-radius: var(--cgh-radius-sm); background: var(--cgh-white); border: 1px solid var(--cgh-gold); font-size: var(--cgh-fs-meta); line-height: 1.45; }
.cgh-closing__away .cgh-icon { flex: none; width: 18px; height: 18px; margin-top: 0.15em; color: var(--cgh-green-deep); }


@media (max-width: 720px) {
	.cgh-projrow, .cgh-closing { grid-template-columns: minmax(0, 1fr); }
		.cgh-linklist--grid { grid-template-columns: minmax(0, 1fr); }
	.cgh-linklist--grid li:nth-child(2) { border-top: 0; }
	.cgh-later__foot { flex-direction: column; align-items: flex-start; }
	.cgh-later__more { margin-left: 0; }
}

/* Kreise und Gruppen: heading and one sentence on what the cards lead to; the jump to the week sits
   at its end like "Eine typische Woche bei uns" on the front page. */
.cgh-groups-head { margin-bottom: 0; }
/* The two head sentences may run wider than a section lede: they explain, they don't introduce. */
:is(.cgh-groups-head, .cgh-week__head) .cgh-lede { max-width: 52ch; }
/* Under the page title the two section headings are one step smaller, so h1 and h2 don't share a size. */
:is(.cgh-groups-head, .cgh-kids-head, .cgh-weekwrap > .cgh-week__head) .cgh-h2 { font-size: var(--cgh-fs-heading); }
/* The week's head stands outside the planner box, on the same edge as the area head. */
.cgh-weekwrap { margin-top: clamp(56px, 7vw, 96px); }
.cgh-weekwrap > .cgh-week { margin-top: 0; }
.cgh-weekwrap .cgh-week__days { margin-top: 0; }
@media (min-width: 1101px) {
	/* Sunday holds the service and Kinderprogramm side by side in time: a little more room, so names don't hyphenate. */
	.cgh-weekwrap .cgh-week__day.is-sunday { flex-grow: 1.35; }
}
/* Phones: the day once, in words ("Montag", not "Mo Montag"). */
@media (max-width: 720px) {
	.cgh-weekwrap .cgh-week__dayname > [aria-hidden="true"] { display: none; }
	.cgh-weekwrap .cgh-week__long { font-family: var(--cgh-serif); font-size: var(--cgh-fs-title); font-weight: 500; letter-spacing: 0; color: var(--cgh-ink); }
}
.cgh-jump { color: var(--cgh-green-deep); }
#woche, #kalender, #bereiche { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 16px); }
body .cgh-main > .cgh-groups-head + .cgh-covers { margin-block-start: clamp(24px, 3vw, 36px); }