/* Gemeinde theme: component styles that theme.json cannot express.
   Colours and spacing come from the theme.json presets. */

/* ---------- One frame for every card ----------
   Cards across the site (topic cards, verse boxes, announcements, the day
   cards of the weekly verses, tables that turn into cards on a phone) share
   one border and one radius and carry no shadow. */
:root {
	--gemeinde-card-border: 2px solid var(--wp--preset--color--gold);
	--gemeinde-card-radius: var(--wp--custom--radius--medium);
}

/* In-page links glide instead of jumping, and stop below the sticky header. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--wp--custom--header--height, 80px) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ---------- Header ---------- */
/* The template-part wrapper is the sticky element; the inner group carries the colours. */
.wp-block-template-part:has(> .gemeinde-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar .wp-block-template-part:has(> .gemeinde-header) {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.gemeinde-header {
	min-height: var(--wp--custom--header--height, 80px);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
	/* The vertical padding lives here rather than on the block, so it can be
	   animated. An inline style written by the block editor cannot be overridden
	   without !important, and this way the theme needs none. */
	padding-top: var(--wp--preset--spacing--10);
	padding-bottom: var(--wp--preset--spacing--10);
	/* The bar is taller than its one row - 88px on a phone and at least 80px
	   on a computer, around a row of 46-51px - and in block flow the row sat
	   at the top with the spare height below it: 13px high on a phone, 7px on
	   a computer. A column that centres its content puts the wordmark and the
	   burger in the middle of the bar at every height, the compact 52px
	   included, where the row fills the bar and nothing changes. */
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* In a flex column the auto margins of the constrained layout would shrink
   the row to its content and narrow it by 24px; at full width it keeps its
   1200px and its edges. */
.gemeinde-header > * {
	width: 100%;
}

/* ---------- The wordmark ----------
   Set as live text rather than a picture, so it is the site's own type pair by
   definition: Lora for the name, Raleway below it. The second line is tracked
   out until it measures the same as the first, which is what made the old
   drawn logo read as one block. Both lines carry `white-space: nowrap`, or a
   narrow screen would break "Die Gemeinde" in two. */
.gemeinde-header .wp-block-site-logo a.gemeinde-logo,
.gemeinde-header a.gemeinde-logo {
	display: flex;
	flex-direction: column;
	line-height: 1;
	color: inherit;
	text-decoration: none;
}

.gemeinde-logo-name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.05;
	white-space: nowrap;
	transition: font-size 0.25s ease;
}

.gemeinde-logo-ort {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: 0.225em;
	white-space: nowrap;
	transition: font-size 0.25s ease;
}

/* ---------- The header shrinks once the page is scrolled ---------- */
/* Only where it costs real screen: on a phone the bar is 88px of an 812px
   viewport, and it is sticky, so it holds that share all the way down.
   `is-header-compact` is set from rotator.js.

   52px is a floor rather than a preference: the burger is a 44px tap target
   and must not shrink, so 44 plus the 8px that remains of the padding is as
   small as the bar honestly gets.

   TWO THINGS HAD TO BE RIGHT, and the first was not, in the first attempt:

   1. The flow space must not change. Shrinking the bar shortened the document
      by 36px and lifted everything below it by the same amount; with
      `overflow-anchor: auto` the browser then corrected the scroll position,
      which pushed it back across the threshold, and the bar pulsed. The
      wrapper now takes as bottom margin exactly what the bar gives up, so the
      86px of flow space is constant, nothing below moves, and the document
      height never changes. The two transitions share a duration so the sum
      holds at every frame in between.

   2. The logo's LAYOUT box has to shrink, not just its painted result. A
      `transform` leaves the box at 185x72, and that box is what the flex row
      measures: the inner group stayed 72px tall and pushed both the logo and
      the burger 14px below the bar. So the image animates its height, and the
      group follows the burger at 44px.

   The arithmetic behind 52px, corrected: the burger is a 44px tap target and
   the padding is 4px top and bottom in the compact bar - 4 + 44 + 4. An
   earlier pass counted the 8px padding once instead of twice and set 52px
   against a bar that actually needed 60px, which is why things hung out of it.

   No `contain` here, tempting as it is: the mobile menu overlay is
   `position: fixed`, and a contained header would become its containing block
   and break it. */
@media (max-width: 1239px) {
	.gemeinde-header {
		height: 88px;
		min-height: 0;
		transition: height 0.25s ease, padding-top 0.25s ease, padding-bottom 0.25s ease;
	}

	/* The flow space is held open by a spacer after the header rather than by
	   margin on it, for one reason: margin cannot be painted. A transparent
	   36px band under a compact bar shows the page background through it, and
	   near the top of the page that is a white stripe between the bar and the
	   hero. The spacer carries the header's own blue, so the same 36px reads as
	   part of the bar and no timing can betray it. */
	.gemeinde-header-spacer {
		height: 0;
		background-color: var(--wp--preset--color--primary);
		transition: height 0.25s ease;
		/* Above the header's own stacking order (100), so its drop shadow does
		   not fall across the spacer and draw a seam where the two blues meet.
		   They never overlap: when the bar is stuck, the spacer is up at the
		   top of the document and out of view. */
		position: relative;
		z-index: 101;
	}

	.gemeinde-logo-name {
		font-size: 1.65rem;
	}

	.gemeinde-logo-ort {
		font-size: 0.87rem;
	}

	.is-header-compact .gemeinde-header {
		height: 52px;
		padding-top: 4px;
		padding-bottom: 4px;
	}

	/* Exactly what the bar gave up: 88 - 52. The two transitions share a
	   duration, so bar plus spacer is 88px at every frame in between. */
	.is-header-compact .gemeinde-header-spacer {
		height: 36px;
	}

	/* Small enough that neither the wordmark nor the burger drives the row.
	   Font size is what shrinks: a transform would leave the layout box at its
	   old height and push both out of the bar. */
	.is-header-compact .gemeinde-logo-name {
		font-size: 1.15rem;
	}

	.is-header-compact .gemeinde-logo-ort {
		font-size: 0.62rem;
	}
}

/* Near the very top the bar is restored without the animation.
 *
 * The 36px the bar gives up is held as transparent margin on the wrapper. That
 * is invisible while the page is scrolled, but below 36px it enters the frame
 * and the page background shows through it - a white band between a still
 * compact bar and the hero. Restoring the bar earlier (see rotator.js) covers
 * ordinary scrolling; this covers a fast flick to the top, where the animation
 * would otherwise still be running when the band comes into view.
 *
 * Two classes rather than one, because the transition has to be gone before
 * the class that triggers it changes. */
.is-header-instant .gemeinde-header,
.is-header-instant .gemeinde-header-spacer,
.is-header-instant .gemeinde-logo-name,
.is-header-instant .gemeinde-logo-ort {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.gemeinde-header,
	.gemeinde-header-spacer,
	.gemeinde-logo-name,
	.gemeinde-logo-ort {
		transition: none;
	}
}

.gemeinde-header .wp-block-navigation {
	--navigation-layout-justification-setting: center;
	font-family: var(--wp--preset--font-family--body);
	/* The bar sat at `medium`, a body size on a piece of chrome. The scale has
	   no step between `small` 14 and `medium` 18, and the bar wants what is
	   between them, so the size is a named token in theme.json
	   (custom.header.navigationFontSize) instead of a number written here. The
	   mobile overlay does not inherit it - it sets its own size further down. */
	font-size: var(--wp--custom--header--navigation-font-size);
}

.gemeinde-header .wp-block-navigation a:where(:not(.wp-element-button)),
.gemeinde-header .wp-block-navigation .wp-block-navigation-item__content,
.gemeinde-header .wp-block-navigation .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--base);
}

/* Short pages must still push the footer to the bottom of the window. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* Full-width sections carry their own padding: no block gap between them,
   neither at the root (header/main/footer) nor inside the post content. */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.entry-content > .alignfull,
.wp-site-blocks > main > .alignfull,
.wp-block-post-content > .alignfull + .alignfull,
.gemeinde-fest > .alignfull + .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Everything below is the desktop dropdown and applies only where the menu
   bar exists. Below 1240px the same markup is the mobile overlay - a list
   on the header's blue - and these rules, which carry !important to outweigh
   what the navigation block writes, used to leak into it: the submenu entries
   came out dark on blue and the bubble's pointer appeared as a white diamond
   under "Home". */
@media (min-width: 1240px) {
	/* The dropdown is a little speech bubble: it sits a touch below its entry and
	   points back at it with a rotated square. An invisible bridge across that gap
	   keeps the hover from breaking on the way down. */
	/* The navigation block paints the dropdown with the overlay colours it uses
	   for the mobile menu, and WordPress writes those with !important - hence the
	   same weight here to keep the dropdown light. */
	.gemeinde-header .wp-block-navigation .wp-block-navigation__submenu-container {
		min-width: max-content;
		margin-top: 0.625rem;
		background-color: var(--wp--preset--color--surface) !important;
		/* A crisp outline in the colour of the header instead of a soft shadow,
		   which read as a blurred grey edge. */
		border: 1px solid var(--wp--preset--color--primary);
		border-radius: var(--wp--custom--radius--medium);
		box-shadow: none;
		padding: 0.5rem 0;
	}

	.gemeinde-header .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		top: -0.4375rem;
		/* Anchored to the RIGHT edge, because that is the edge the dropdown
		   shares with its parent: the panel is `min-width: max-content` and
		   grows leftwards, so its left edge sits wherever the content ends up.
		   Pinned to the left, the pointer missed "Über uns" by 100px - the
		   panel is 221px wide under a 91px entry. Measured at 1440px, the
		   pointer now lands 30px inside the right edge of all four entries. */
		right: 1.5rem;
		width: 0.75rem;
		height: 0.75rem;
		background: var(--wp--preset--color--surface);
		/* Only the two edges that stay visible once the square is turned. */
		border-top: 1px solid var(--wp--preset--color--primary);
		border-left: 1px solid var(--wp--preset--color--primary);
		border-radius: 2px 0 0 0;
		transform: rotate(45deg);
	}

	.gemeinde-header .wp-block-navigation__submenu-container::after {
		content: "";
		position: absolute;
		top: -0.75rem;
		left: 0;
		right: 0;
		height: 0.75rem;
	}

	.gemeinde-header .wp-block-navigation__submenu-container a:where(:not(.wp-element-button)),
	.gemeinde-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		position: relative;
		z-index: 1;
		color: var(--wp--preset--color--ink) !important;
		font-size: var(--wp--preset--font-size--small);
		white-space: nowrap;
		padding: 0.5rem 1.25rem;
	}

	/* A dropdown inside a dropdown - "Datenpflege" under "Intern". The menu is
	   right-aligned, so WordPress already opens it to the LEFT of its parent
	   panel (`right: 100%`), which keeps it on screen under the last entry of
	   the bar. What the first level gets from the theme is wrong one level
	   down: the pointer looking up at the bar, the bridge across the gap above
	   it and the gap itself. The inner panel sits level with its own entry
	   instead, a few pixels off the outer panel, and the bridge spans that gap
	   sideways so the pointer can travel across without the hover dropping. */
	.gemeinde-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		top: calc(-0.5rem - 1px);
		margin-top: 0;
		margin-right: 0.375rem;
	}

	.gemeinde-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container::before {
		display: none;
	}

	.gemeinde-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container::after {
		top: 0;
		bottom: 0;
		left: auto;
		right: -0.5rem;
		width: 0.5rem;
		height: auto;
	}

	/* The chevron of an entry that opens a further panel: in the ink of the
	   panel rather than the white of the bar, and pointing the way it opens.
	   WordPress turns it to point right with a longer selector, so this one
	   has to be at least as specific to win. */
	.gemeinde-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
		color: var(--wp--preset--color--ink);
	}

	.gemeinde-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg {
		transform: rotate(90deg);
	}

	/* And it stands on the left of its entry, the side the panel opens to. It
	   hangs in the entry's left padding, so "Datenpflege" stays aligned with
	   the entries above and below it. That padding is 14px (WordPress's 1em
	   outweighs the theme's own value) and the chevron is 10px, so the first
	   try laid it over the "D". A panel that holds such an entry therefore
	   gives all its entries 24px on the left: the chevron gets a 7px gap and
	   every label in the panel still starts on one line. Panels without a
	   nested entry - everyone's but an administrator's - are untouched.
	   The chevron sits above the link, which the theme lifts to z-index 1. */
	.gemeinde-header .wp-block-navigation__submenu-container:has(> .has-child) > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding-left: 1.5rem;
	}

	.gemeinde-header .wp-block-navigation__submenu-container .has-child > .wp-block-navigation__submenu-icon {
		position: absolute;
		left: 0.45rem;
		top: 50%;
		z-index: 2;
		margin: 0;
		transform: translateY(-50%);
	}
}

.gemeinde-header .wp-block-navigation__responsive-container-open,
.gemeinde-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--base);
}

/* The burger ships at 24px, which is slight beside the logo and below the 44px
   a finger needs. The icon grows; the button keeps a tap area around it. */
@media (max-width: 1239px) {
	.gemeinde-header .wp-block-navigation__responsive-container-open svg,
	.gemeinde-header .wp-block-navigation__responsive-container-close svg {
		width: 34px;
		height: 34px;
	}

	.gemeinde-header .wp-block-navigation__responsive-container-open,
	.gemeinde-header .wp-block-navigation__responsive-container-close {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}
}

/* The navigation block switches to the burger below 600px, but the bar needs
   the full content width for the logo and eight entries - between the two it
   overflowed the viewport at 768px and wrapped at 1024px. Measured: the eight
   entries need 944px, the logo 185px and the gap 32px, so the bar asks for
   about 1210px of viewport - the switch sits at 1239px, mirroring the core
   rules with a little room to spare. */
@media (min-width: 600px) and (max-width: 1239px) {
	.gemeinde-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.gemeinde-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* A menu entry for the phone overlay only (class `mobile-only`). "Über uns"
   was repeated this way as the first entry of its own dropdown until
   2026-10-06, when Gerhard read it as a double and the owner had it removed;
   on a phone the three entries below "Über uns" lead on. Kept for the next
   entry that only a phone needs. */
.gemeinde-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item.mobile-only {
	display: none;
}

/* An entry set apart from the rest of its dropdown by a line above it:
   "App herunterladen" at the foot of Intern, below "Abmelden", so the menu of
   the members' area and the app read as two things (the owner, 2026-09-30).
   Class `menu-separated` on the entry in navigation 4054. The line has the
   colour of the dropdown's frame; in the phone overlay it is a light one. */
.gemeinde-header .wp-block-navigation__submenu-container > .wp-block-navigation-item.menu-separated {
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--wp--preset--color--primary);
}

.gemeinde-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item.menu-separated {
	border-top-color: color-mix(in srgb, var(--wp--preset--color--base) 45%, transparent);
}

/* ---------- Mobile navigation overlay ---------- */
.gemeinde-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--primary);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.gemeinde-header .wp-block-navigation__responsive-container.is-menu-open a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-large);
}

/*
 * The overlay is a list on a phone, not a spaced-out menu bar: drop the block
 * gap, align the entries to the left and let each one span the full width, so
 * the tap area is the whole row.
 */
.gemeinde-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.gemeinde-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.gemeinde-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	gap: 0;
	align-items: stretch;
	text-align: start;
}

/* Each entry is a flex column centred by core; stretch it so the label starts
   at the left edge and the whole row is the tap area. */
.gemeinde-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	align-items: stretch;
}

.gemeinde-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	flex: 1 1 auto;
	padding: 0.6rem 0;
}

/*
 * The dropdown of the desktop menu keeps its card look; inside the overlay that
 * shadow was drawn as a stripe across the blue background.
 */
.gemeinde-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0 0 0.4rem;
}

/* The whole second-level indent lives here and nowhere else. WordPress indents
   the list by 2rem and core's `padding: 0.5em 1em` on the link adds another em -
   at the overlay's 20px type that came to 52px of text indent, leaving "Aus
   unseren Versammlungen" 208px on a 320px screen. One step of 1rem still reads
   as nested and gives the text back 36px.

   Both core rules are written with five classes, so these carry six. Raising
   the specificity is what makes them win; none of this needs !important. */
.gemeinde-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
	padding-left: 1rem;
}

.gemeinde-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item > a.wp-block-navigation-item__content {
	padding-left: 0;
	padding-right: 0;
}

.gemeinde-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--large);
	opacity: 0.9;
}

.gemeinde-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container li > a:where(:not(.wp-element-button)) {
	padding-top: 0.45rem;
	padding-bottom: 0.45rem;
}

/*
 * WordPress prints every submenu expanded in the overlay, which makes the menu
 * about twice as long as the screen. Collapse them and let the parent entry
 * open its own submenu (rotator.js); the parent links point to "#" and lead
 * nowhere. Without JavaScript the submenus stay open, as WordPress intends.
 */
.js .gemeinde-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu:not(.is-submenu-open) > .wp-block-navigation__submenu-container {
	display: none;
}

.js .gemeinde-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.js .gemeinde-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content::after {
	content: "";
	flex: none;
	width: 0.7em;
	height: 0.7em;
	margin-inline-start: auto;
	background: currentColor;
	transition: transform 0.2s ease;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.5 4.5 8l1.4-1.4L12 12.7l6.1-6.1L19.5 8Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.5 4.5 8l1.4-1.4L12 12.7l6.1-6.1L19.5 8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.js .gemeinde-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu.is-submenu-open > .wp-block-navigation-item__content::after {
	transform: rotate(180deg);
}

/* ---------- Menu button: log in / members area ----------
   A pill, like every other button on the site. It carries a thin outline in the
   blue header and turns into a white button with blue lettering on hover and
   focus.
   The frame sits on the entry itself, so the submenu arrow of the members
   entry is inside the button. The icon follows the context: the visibility
   class decides between the log-in arrow and the member silhouette. */
.gemeinde-header .wp-block-navigation-item.is-style-menu-button {
	align-items: center;
	gap: 0.35rem;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.3rem 0.9rem;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.gemeinde-header .wp-block-navigation-item.is-style-menu-button > .wp-block-navigation-item__content::before {
	content: "";
	flex: none;
	width: 1.05em;
	height: 1.05em;
	background: currentColor;
}

.gemeinde-header .wp-block-navigation-item.is-style-menu-button.logged-out-only > .wp-block-navigation-item__content::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v3H3v4h7v3zm9-14H5a2 2 0 0 0-2 2v4h2V5h14v14H5v-4H3v4a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v3H3v4h7v3zm9-14H5a2 2 0 0 0-2 2v4h2V5h14v14H5v-4H3v4a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gemeinde-header .wp-block-navigation-item.is-style-menu-button.logged-in-only > .wp-block-navigation-item__content::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gemeinde-header .wp-block-navigation-item.is-style-menu-button > .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0;
	text-decoration: none;
}

.gemeinde-header .wp-block-navigation-item.is-style-menu-button:hover,
.gemeinde-header .wp-block-navigation-item.is-style-menu-button:focus-within {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}

.gemeinde-header .wp-block-navigation-item.is-style-menu-button:hover > .wp-block-navigation-item__content,
.gemeinde-header .wp-block-navigation-item.is-style-menu-button:focus-within > .wp-block-navigation-item__content,
.gemeinde-header .wp-block-navigation-item.is-style-menu-button:hover .wp-block-navigation__submenu-icon,
.gemeinde-header .wp-block-navigation-item.is-style-menu-button:focus-within .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--primary);
}

/* In the overlay the button keeps its own width instead of filling the row. */
.gemeinde-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.is-style-menu-button {
	width: auto;
	align-self: flex-start;
	align-items: flex-start;
	margin-top: 0.6rem;
	padding: 0;
	border: 0;
	background: none;
}

.gemeinde-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.is-style-menu-button > .wp-block-navigation-item__content {
	flex: 0 0 auto;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.45rem 1.1rem;
}

.gemeinde-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.is-style-menu-button > .wp-block-navigation-item__content:hover,
.gemeinde-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.is-style-menu-button > .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}

.js .gemeinde-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu.is-style-menu-button > .wp-block-navigation-item__content::after {
	margin-inline-start: 0.3em;
}

/* Menu items with an icon: the profile, and the app ("App herunterladen",
   a phone). The icon takes the colour of the text. */
.wp-block-navigation-item.is-style-icon-profile > .wp-block-navigation-item__content,
.wp-block-navigation-submenu.is-style-icon-profile > .wp-block-navigation-item__content,
.wp-block-navigation-item.is-style-icon-phone > .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.wp-block-navigation-item.is-style-icon-profile > .wp-block-navigation-item__content::before,
.wp-block-navigation-submenu.is-style-icon-profile > .wp-block-navigation-item__content::before,
.wp-block-navigation-item.is-style-icon-phone > .wp-block-navigation-item__content::before {
	content: "";
	display: inline-block;
	flex: none;
	width: 22px;
	height: 22px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wp-block-navigation-item.is-style-icon-phone > .wp-block-navigation-item__content::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 1h-8A2.5 2.5 0 0 0 5 3.5v17A2.5 2.5 0 0 0 7.5 23h8a2.5 2.5 0 0 0 2.5-2.5v-17A2.5 2.5 0 0 0 15.5 1Zm-4 21a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm4.5-4H7V4h9v14Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 1h-8A2.5 2.5 0 0 0 5 3.5v17A2.5 2.5 0 0 0 7.5 23h8a2.5 2.5 0 0 0 2.5-2.5v-17A2.5 2.5 0 0 0 15.5 1Zm-4 21a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm4.5-4H7V4h9v14Z'/%3E%3C/svg%3E");
}

/* Inside the installed app there is nothing left to install. */
@media (display-mode: standalone) {
	.wp-block-navigation-item.is-style-icon-phone {
		display: none;
	}
}

/* ---------- Hero ---------- */
.gemeinde-hero.wp-block-cover {
	/* Three things paint here in turn: this background, then the poster, then
	   the video. Without a colour of its own the section starts out white and
	   the white verses are invisible on it, so it holds the brand blue until
	   the poster covers it. */
	background-color: var(--wp--preset--color--primary);
	min-height: clamp(420px, 60vh, 640px);
	/* The cover carries no padding of its own: the strip at its foot has to run
	   from edge to edge, and the text keeps its distance through a wrapper of
	   its own instead. Stretch rather than centre, so that wrapper can take the
	   height that is left and the strip can sit under it. */
	align-items: stretch;
}

.gemeinde-hero .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: none;
}

/* Everything above the strip: the heading, the rotating verse and the button.
   This is what holds the reading width and the distance from the edges. */
.gemeinde-hero .gemeinde-hero-content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: calc(1100px + 2 * var(--wp--preset--spacing--30));
	margin-inline: auto;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
}

/* Large hero type needs a tighter leading than the global 1.2. */
.gemeinde-hero h1,
.gemeinde-hero h2 {
	line-height: 1.12;
}

/* Only the "Jesus sagt:" line is set in the heading face; the verse itself and
   its reference are body text. */
.gemeinde-hero h2,
.gemeinde-hero .gemeinde-quicklink,
.gemeinde-quicklink {
	font-family: var(--wp--preset--font-family--body);
}

/* The video and its poster stay clear: readability comes from a soft halo
   around the text instead of an overlay that dims the whole picture. */
.gemeinde-hero h1,
.gemeinde-hero h2,
.gemeinde-hero p {
	color: var(--wp--preset--color--base);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 20px rgba(0, 0, 0, 0.5);
}

.gemeinde-hero .gemeinde-hero-video-el {
	opacity: 0;
	transition: opacity 1s ease;
}

.gemeinde-hero.has-video-playing .gemeinde-hero-video-el {
	opacity: 1;
}

.wochenverse-zeitraum-wrap {
	text-align: center;
	margin-top: 0;
}

.wochenverse-bild img {
	width: 100%;
	max-height: 320px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--medium);
	margin-bottom: var(--wp--preset--spacing--30);
}

.wochenverse-zurueck {
	text-align: center;
	margin-top: var(--wp--preset--spacing--40);
}

.wochenverse-pagination {
	text-align: center;
	margin-top: var(--wp--preset--spacing--30);
}

/* ---------- Verse rotator (progressively enhanced) ---------- */
.is-style-rotator {
	position: relative;
}

/*
 * With JavaScript all verses share one grid cell: the box keeps the height of
 * the tallest verse, so switching a verse never resizes the hero and nothing
 * below it moves. The stack is set up from CSS (html.js) and not from the
 * rotator script, which is deferred - otherwise the verses would first be
 * listed below each other and the page would jump once the script arrives.
 * Without JavaScript the verses stay in normal flow and are simply listed.
 */
.js .is-style-rotator {
	display: grid;
	align-items: center;
}

.js .is-style-rotator > * {
	grid-area: 1 / 1;
}

/* Until the script has picked a verse, only the first one is shown. */
.js .is-style-rotator:not(.is-ready) > *:not(:first-child) {
	opacity: 0;
	visibility: hidden;
}

.is-style-rotator.is-ready > .gemeinde-rotator__item {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

.is-style-rotator.is-ready > .gemeinde-rotator__item.is-active {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

/*
 * The cross-fade is enabled one frame after the first state has been painted.
 * The outgoing verse leaves first and the incoming one follows, so two
 * half-transparent texts never sit on top of each other.
 */
.is-style-rotator.is-animating > .gemeinde-rotator__item {
	transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.is-style-rotator.is-animating > .gemeinde-rotator__item.is-active {
	transition: opacity 0.55s ease 0.35s, visibility 0s;
}

/* ---------- Announcements section ----------
   The plugin renders the box; the theme gives it the look of a section: a
   slightly different ground than its neighbours, the same padding as the other
   sections, and the entries as cards - three across on the desktop, one below
   the other on a phone. */
.gemeinde-ankuendigungen-section:not(:has(.gemeinde-ankuendigungen-box)) {
	/* Nothing due: no empty coloured band. */
	display: none;
}

.gemeinde-ankuendigungen-section .gemeinde-ankuendigungen-box {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
}

.gemeinde-ankuendigungen-section .gemeinde-ankuendigungen-titel {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
	margin-bottom: var(--wp--preset--spacing--40);
}

.gemeinde-ankuendigungen-section .gemeinde-ankuendigungen-liste {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--30);
}

@media (min-width: 782px) {
	/* Up to three per row, the gap included: one entry fills the width, two
	   take half each, three a third each, a fourth starts a second row. */
	.gemeinde-ankuendigungen-section .gemeinde-ankuendigungen-liste {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.gemeinde-ankuendigungen-section .gemeinde-ankuendigungen-liste:has(.gemeinde-ankuendigung-item:nth-child(2):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gemeinde-ankuendigungen-section .gemeinde-ankuendigungen-liste:has(.gemeinde-ankuendigung-item:only-child) {
		grid-template-columns: minmax(0, 1fr);
	}
}

.gemeinde-ankuendigungen-section .gemeinde-ankuendigung-item {
	/* Clears the automatic minimum of a grid item, and this is the line that
	   keeps Firefox from tearing the page sideways.
	
	   The item is a cell of a `1fr` grid, so its automatic minimum is its
	   min-content width. `overflow-wrap: break-word` on the text below does not
	   change that: per CSS Text, overflow-wrap has no effect on min-content
	   size. Chromium and WebKit let the box shrink anyway; Gecko follows the
	   letter, so "EVANGELIUMSVERSAMMLUNG" held the cell at its own width and
	   pushed the page 13 to 62px wider than the phone, depending on the
	   viewport. Firefox is the correct one here.
	
	   Reproduced and then verified with real Gecko through Playwright, not
	   reasoned about. */
	min-width: 0;
	gap: 0.9rem;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--base);
	border: var(--gemeinde-card-border);
	border-radius: var(--gemeinde-card-radius);
	box-shadow: none;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

.gemeinde-ankuendigungen-section .ga-icon svg {
	width: 40px;
	height: 40px;
}

/* Long German compounds must not push a column wider than its share: hyphenate
   them (the document is German), and break them only as a last resort. */
.gemeinde-ankuendigungen-section .gemeinde-ankuendigung-text {
	min-width: 0;
	hyphens: auto;
	overflow-wrap: break-word;
}

.gemeinde-ankuendigungen-section .gemeinde-ankuendigung-text a {
	color: var(--wp--preset--color--primary);
}

/* ---------- Quick links under the hero ----------
   Three entry points straight below the hero (agreed layout): a round icon and
   a label each, side by side on a desktop and stacked on a phone. */
/* Three blocks of equal width with an even gap between them, each one filling
   its share of the row. */
/* The quick links live at the foot of the hero: a strip of its own, darkened
   just enough to carry white outlined icons over the moving water. It is pulled
   out over the cover's bottom padding so it sits flush with the section edge. */
.gemeinde-hero .gemeinde-quicklinks {
	flex: none;
	padding: 0.85rem var(--wp--preset--spacing--30);
	background-color: rgba(0, 0, 0, 0.38);
}

.gemeinde-hero .gemeinde-quicklink a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--base);
	/* The strip is the ground here; the shadow the rest of the hero needs would
	   only muddy a label that already sits on its own dark band. */
	text-shadow: none;
}

/* Outlined rather than filled: a solid disc would read as a button competing
   with "Schau doch vorbei" right above it. */
.gemeinde-hero .gemeinde-quicklink a::before {
	width: 44px;
	height: 44px;
	background-color: transparent;
	border: 2px solid currentColor;
	background-size: 48%;
}

.gemeinde-quicklinks-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}

.gemeinde-quicklink {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.2;
}

.gemeinde-quicklink a:where(:not(.wp-element-button)) {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	color: var(--wp--preset--color--primary);
	text-align: center;
	text-decoration: none;
	transition: color 0.2s ease;
}

.gemeinde-quicklink a:where(:not(.wp-element-button)):hover,
.gemeinde-quicklink a:where(:not(.wp-element-button)):focus-visible {
	color: var(--wp--preset--color--gold);
	text-decoration: none;
}

.gemeinde-quicklink a::before {
	content: "";
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	/* The disc takes the colour of the entry, so hovering recolours both. */
	background-color: currentColor;
	background-position: center;
	background-size: 55%;
	background-repeat: no-repeat;
	transition: background-color 0.2s ease;
}

/* Counter on the announcements quick link, the way a cart shows its items. It
   hangs off the end of the word, at its top right. `left: 100%` is measured
   against the anchor, which on a wide screen ends with the label - and on a
   phone holds nothing but the disc, because the label is clipped out of flow.
   The two cases therefore need different offsets, not different rules. */
.gemeinde-badge {
	position: absolute;
	top: 2px;
	left: 100%;
	margin-left: -0.15rem;
	box-sizing: border-box;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 24px;
	text-align: center;
	text-shadow: none;
	pointer-events: none;
}

.gemeinde-quicklink.is-icon-announcement a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2Zm6-6v-5a6 6 0 0 0-4.5-5.8V4.5a1.5 1.5 0 0 0-3 0v0.7A6 6 0 0 0 6 11v5l-1.5 1.5v1h15v-1Z'/%3E%3C/svg%3E");
}

/* The dot and the stem are drawn to the height the bell uses, so the two read
   as the same size on the strip. Before this the "i" filled a third of its
   frame and looked half the size of its neighbours. */
.gemeinde-quicklink.is-icon-info a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Ccircle cx='12' cy='4.6' r='2.3'/%3E%3Crect x='9.7' y='9' width='4.6' height='12' rx='2.3'/%3E%3C/svg%3E");
}

.gemeinde-quicklink.is-icon-login a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M10 17l5-5-5-5v3H3v4h7v3zm9-14H5a2 2 0 0 0-2 2v4h2V5h14v14H5v-4H3v4a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
}

.gemeinde-quicklink.is-icon-member a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5Z'/%3E%3C/svg%3E");
}

@media (max-width: 781px) {
	/* On a phone the quick links are icons only. With their labels they stood
	   one under the other and the band grew as tall as the hero itself. The
	   label is not removed, only taken out of sight: it is what gives the link
	   its name to a screen reader.

	   The group block lays this row out as flex with space-between, which
	   pushes the outer two icons hard against the edges. Space-around gives
	   each icon the same room on both sides instead. */
	.gemeinde-quicklinks-row {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
		gap: 0;
	}

	.gemeinde-quicklink a:where(:not(.wp-element-button)) {
		gap: 0;
	}

	/* Without its label the anchor is only the disc, so the counter comes back
	   onto the icon instead of hanging into the next link. */
	.gemeinde-badge {
		top: -2px;
		left: 34px;
		margin-left: 0;
	}


	.gemeinde-quicklink-text {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
}

/* Foot of the meeting times card: address and the contact button in one row. */
.gemeinde-versammlungen-fuss {
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--30);
}

.gemeinde-versammlungen-fuss p {
	margin: 0;
}

/* A button that has to sit inside a card without dominating it. */
.wp-block-button.is-style-compact .wp-block-button__link {
	font-size: var(--wp--preset--font-size--medium);
	padding: 0.45rem 1.1rem;
}

/* ---------- Cards ---------- */
/* In a columns row - and in a query loop - every card is as tall as the
   tallest one in its row. */
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column > .is-style-card,
.wp-block-column > .is-style-card,
.wp-block-post > .is-style-card {
	height: 100%;
}

/* A card whose whole content is one picture. Beside a column of text it has to
   end level with it, so from the width at which the columns stand side by side
   the picture fills whatever height the row settles on and gives up its own
   ratio. Stacked on a phone there is no height to fill, and the rule is off. */
@media (min-width: 782px) {
	.is-bild-karte {
		display: flex;
		flex-direction: column;
	}

	.is-bild-karte .wp-block-image {
		flex: 1 1 auto;
		margin: 0;
		min-height: 0;
	}

	.is-bild-karte .wp-block-image img {
		aspect-ratio: auto;
		height: 100%;
	}
}

/* ---------- The greeting laid on the picture ----------
   The sky fills the upper third of the photograph and holds nothing, so the
   section's heading sits there in white rather than standing above the row:
   the opener and the picture become one thing instead of two.

   The scrim is not decoration. Measured on the photograph itself, white over
   the average sky is 3.67:1 - enough for large text, which needs 3:1 - but the
   brightest patches fall to **2.82:1**, which is not. A gradient over the top
   of the picture buys the margin and leaves the building untouched; it carries
   the image's own radius so the corners stay round.

   Below 782px the title stays above the picture in ordinary ink, and that is
   the right answer rather than a compromise. It was tried on the picture there
   too and measured: the picture is only 275x155, the line wraps to two, and it
   reaches into the crown of the tree on the right, where white falls to
   **2.53:1** - under the 3:1 large text needs. A small picture has no room to
   hold a heading. */
.is-bild-karte {
	position: relative;
}

.is-bild-karte .wp-block-image {
	position: relative;
}

.gemeinde-bild-titel {
	margin-top: 0;
}

@media (min-width: 782px) {
	.is-bild-karte .wp-block-image::after {
		content: "";
		position: absolute;
		inset: 0 0 auto 0;
		height: 58%;
		border-radius: var(--wp--custom--radius--medium) var(--wp--custom--radius--medium) 0 0;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
		pointer-events: none;
	}

	.is-bild-karte .gemeinde-bild-titel {
		position: absolute;
		top: calc(var(--wp--preset--spacing--30) + 1.4rem);
		left: calc(var(--wp--preset--spacing--30) + 1.6rem);
		right: calc(var(--wp--preset--spacing--30) + 1.6rem);
		margin: 0;
		/* The figure is positioned and comes later in the markup, so without
		   this the picture would paint over the heading. */
		z-index: 1;
		color: var(--wp--preset--color--base);
		/* The card pins every heading inside it to `large` so card titles
		   match each other. This one is not a card title - it is the section's
		   own opening, which happens to lie on the picture - so it keeps the
		   step it had when it stood above the row. */
		font-size: var(--wp--preset--font-size--xx-large);
	}
}

/* Listings of a post type: the same grid as the cards on the home page. */
.gemeinde-beitragsliste {
	gap: var(--wp--preset--spacing--40);
}

/* The number of entries decides the grid (the owner, 2026-10-06): one sits
   centred at half the width, two stand side by side at half each, three in a
   row, four two by two, five and more in rows of three as the block sets it.
   One entry spans the middle two of four columns, which is exactly half the
   width with the gap counted, the width each of two gets. Phones keep the
   single column core gives them. */
@media (min-width: 600px) {
	.wp-block-post-template.gemeinde-beitragsliste:has(> li:only-child) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.wp-block-post-template.gemeinde-beitragsliste > li:only-child {
		grid-column: 2 / span 2;
	}

	.wp-block-post-template.gemeinde-beitragsliste:has(> li:nth-child(2):last-child),
	.wp-block-post-template.gemeinde-beitragsliste:has(> li:nth-child(4):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.gemeinde-beitragsliste .wp-block-post-title {
	margin-top: 0;
}

.gemeinde-beitragsliste .wp-block-post-featured-image {
	margin-bottom: var(--wp--preset--spacing--20);
}

.gemeinde-beitragsliste .wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius--medium);
}

/* A short description written by hand is shown whole, with its paragraphs,
   lists and links (Gemeinde Core, excerpts.php) - in the lists of entries and
   in the church info archive. */
.gemeinde-excerpt > * {
	margin: 0;
}

.gemeinde-excerpt > * + * {
	margin-top: 0.75em;
}

.gemeinde-excerpt :where(ul, ol) {
	padding-left: 1.25em;
}

.gemeinde-excerpt li + li {
	margin-top: 0.25em;
}

/* The picture of an entry on its own page: rounded like every picture and
   card of the site (the owner, 2026-09-30). */
.wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius--medium);
}

/* The files of an entry (Gemeinde Core, files.php): the browser's own player
   for the MP3, then the attachments - PDFs and pictures - as links, below the
   picture and as wide as it. A link says what the file is, its label or
   title, followed by format and size: "Als PDF herunterladen" read as if the
   entry itself could be downloaded when the PDF was an invitation (Gerhard,
   2026-10-10). */
.gemeinde-audio {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.gemeinde-audio audio {
	display: block;
	width: 100%;
	max-width: 100%;
}

.gemeinde-attachments {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.gemeinde-attachments__title {
	margin: 0 0 0.35rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.gemeinde-attachments__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* One file per row, its sign hanging at the left so a long label wraps
   under its own first word, not under the sign. */
.gemeinde-attachment {
	position: relative;
	padding-left: 1.7em;
}

.gemeinde-attachment + .gemeinde-attachment {
	margin-top: 0.4rem;
}

.gemeinde-attachment__link {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.gemeinde-attachment__link::before {
	content: "";
	position: absolute;
	top: 0.15em;
	left: 0;
	width: 1.25em;
	height: 1.25em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 16h8v2H8zm0-4h8v2H8zm6-10H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Zm4 18H6V4h7v5h5v11Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 16h8v2H8zm0-4h8v2H8zm6-10H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Zm4 18H6V4h7v5h5v11Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gemeinde-attachment.is-image .gemeinde-attachment__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 5v14H5V5h14m0-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Zm-4.86 8.86-3 3.87L9 13.14 6 17h12l-3.86-5.14Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 5v14H5V5h14m0-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Zm-4.86 8.86-3 3.87L9 13.14 6 17h12l-3.86-5.14Z'/%3E%3C/svg%3E");
}

.gemeinde-attachment__details {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

/* Under an announcement or a conference: no heading, close to its text. */
.gemeinde-attachments.is-compact {
	margin: 0.5rem 0 0;
}

.konf-liste-item .gemeinde-attachments {
	width: 100%;
	margin: 0;
}

/* A single entry (templates/single.html): from 600px on the picture, with the
   MP3 and the attachments below it, stands at the left at 40% of the column and the
   text runs beside it and then below it on the full width - the picture
   took the whole screen before (Gerhard, 2026-10-01). On a phone it stays
   full width above the text. Without a picture nothing floats: an MP3 alone
   keeps the width of the text. */
.gemeinde-entry {
	display: flow-root;
}

/* Core makes the text block a flow-root to hold its own floats; here that
   would stand it beside the picture as a column instead of letting it run
   on below. The entry around it holds the floats instead. */
.gemeinde-entry .wp-block-post-content {
	display: block;
}

.gemeinde-entry .gemeinde-entry-media > * {
	margin-block: 0 var(--wp--preset--spacing--30);
}

.gemeinde-entry .gemeinde-entry-media > :last-child {
	margin-block-end: 0;
}

.gemeinde-entry-media:not(:has(> *)) {
	display: none;
}

@media (min-width: 600px) {
	.gemeinde-entry-media:has(> .wp-block-post-featured-image) {
		float: left;
		width: 40%;
		max-width: 480px;
		margin: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--20) 0;
	}

	.gemeinde-entry-media:has(> .wp-block-post-featured-image) + .wp-block-post-content {
		margin-block-start: 0;
	}

	/* Lists, quotes, separators and pictures next to the picture keep to the
	   space beside it, so no bullet or line runs underneath it. */
	.gemeinde-entry .wp-block-post-content > :where(ul, ol, blockquote, figure, hr) {
		display: flow-root;
	}
}

/* A picture in the text aligned left (or right) in the block editor sits like
   the entry's own picture: 40% of the column and at most 480px, the text
   running beside it and then below it, and under any picture still floating
   on that side; on a phone it takes the full width (the owner, 2026-10-02).
   Core gives an aligned image `display: table`, which on a phone would size it
   by the file's own width; a block holds the picture to the column instead. */
.gemeinde-entry .wp-block-post-content > .wp-block-image:is(.alignleft, .alignright) {
	display: block;
}

.gemeinde-entry .wp-block-post-content > .wp-block-image:is(.alignleft, .alignright) img {
	width: 100%;
	height: auto;
}

/* A heading that would run past the bottom of a floating picture starts below
   it instead (assets/js/rotator.js decides which). */
.gemeinde-entry .wp-block-post-content > .gemeinde-heading-clear {
	clear: both;
}

@media (max-width: 599px) {
	.gemeinde-entry .wp-block-post-content > .wp-block-image:is(.alignleft, .alignright) {
		float: none;
		margin-inline: 0;
	}
}

@media (min-width: 600px) {
	.gemeinde-entry .wp-block-post-content > .wp-block-image.alignleft {
		clear: left;
		width: 40%;
		max-width: 480px;
		margin: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--20) 0;
	}

	.gemeinde-entry .wp-block-post-content > .wp-block-image.alignright {
		clear: right;
		width: 40%;
		max-width: 480px;
		margin: 0 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	}
}

/* A list that fits on one page still renders the pagination nav, empty but
   carrying its top margin. Hide it until there is a second page to link to. */
.wp-block-query-pagination:not(:has(a)) {
	display: none;
}

.is-style-card {
	background: var(--wp--preset--color--base);
	border: var(--gemeinde-card-border);
	border-radius: var(--gemeinde-card-radius);
	padding: var(--wp--preset--spacing--30);
	box-shadow: none;
}

.is-style-card .wp-block-image img {
	border-radius: var(--wp--custom--radius--medium);
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
}

.is-style-card :is(h2, h3, h4) {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
}

/* Only the heading that opens a card loses its top margin. One that follows a
   paragraph needs the space, or the two collide. */
.is-style-card > :is(h2, h3, h4):first-child {
	margin-top: 0;
}

/* A linked card heading speaks the same language as every other link on the
   site: `accent-hover` with an underline, hovering to `accent`.

   It used to stay plain ink and reveal itself only on hover, which read well
   on the front page, where each card also carried links in its text. The
   Weblinks grid killed that idea: there the heading is the card's only link,
   and **a phone has no hover**, so fourteen cards offered a visitor nothing at
   all to tell them the names could be tapped. Colour alone would not fix it
   either - against the body ink the link colour is 1.79:1. */
.is-style-card :is(h2, h3, h4) a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--accent-hover);
	text-decoration: underline;
	text-underline-offset: 0.12em;
}

.is-style-card :is(h2, h3, h4) a:where(:not(.wp-element-button)):hover,
.is-style-card :is(h2, h3, h4) a:where(:not(.wp-element-button)):focus-visible {
	color: var(--wp--preset--color--accent);
}

/* ---------- Verse box (verse of the day, quotes) ---------- */
.is-style-verse-box {
	background: var(--wp--preset--color--base);
	border: var(--gemeinde-card-border);
	border-radius: var(--gemeinde-card-radius);
	padding: var(--wp--preset--spacing--30);
	text-align: center;
}

.is-style-verse-box .tagesvers-label,
.is-style-verse-box h6 {
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	margin: 0 0 0.75rem;
}

.is-style-verse-box .tagesvers-text,
.is-style-verse-box p {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}

/* Verse of the day shortcode output (rendered by Gemeinde Core) */
.tagesvers-box {
	background: var(--wp--preset--color--base);
	border: var(--gemeinde-card-border);
	border-radius: var(--gemeinde-card-radius);
	padding: var(--wp--preset--spacing--30);
	text-align: center;
}

/* The box is a link to this week's verses (Gemeinde Core renders it as one).
   It must not look like one: no underline, no link colour, the text keeps the
   colours it had. Only the pointer and a warmer border on hover say that it
   can be clicked. */
a.tagesvers-box {
	display: block;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

a.tagesvers-box:hover,
a.tagesvers-box:focus-visible {
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--cream);
	text-decoration: none;
}

a.tagesvers-box:hover .tagesvers-label,
a.tagesvers-box:focus-visible .tagesvers-label {
	color: var(--wp--preset--color--accent);
}

.tagesvers-box .tagesvers-label {
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	margin-bottom: 0.75rem;
}

.tagesvers-box .tagesvers-text {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}

/* Announcements box (rendered by Gemeinde Core): align with the theme tokens */
.gemeinde-ankuendigungen-box {
	border-radius: var(--wp--custom--radius--medium);
	margin-bottom: 0;
}

.gemeinde-ankuendigungen-titel {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
}

.gemeinde-ankuendigung-item {
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Schedule list ---------- */
.is-style-schedule {
	list-style: none;
	padding-left: 0;
}

.is-style-schedule li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.75rem;
}

.is-style-schedule li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.25rem;
	height: 1.25rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7Zm-2 8h14v10H5V10Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7Zm-2 8h14v10H5V10Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The welcome heading reads as two thoughts: the greeting, then where you are
   welcome. On a phone it wraps wherever it likes; from the width at which the
   columns sit side by side the second half gets a line of its own. */
@media (min-width: 782px) {
	.gemeinde-willkommen span {
		display: block;
	}
}

/* ---------- Meetings card: name first, time underneath ----------
   The name of the meeting is what a visitor scans for, so it leads and the day
   and time follow it. Its size sits between `medium` and `large`, where the
   scale has no step - the same situation as the desktop menu bar, solved the
   same way, with one named token in theme.json rather than a number here. */
.is-style-termine {
	list-style: none;
	padding-left: 0;
}

.is-style-termine li {
	margin-bottom: 0.8rem;
	font-size: var(--wp--custom--card--termin-font-size);
	line-height: 1.25;
}

.is-style-termine li:last-child {
	margin-bottom: 0;
}

.is-style-termine .termin-zeit {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 0.2rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

/* The closing line of the meetings card sits below three entries and a
   heading in a column only a third wide, so it takes the small step. */
.termin-hinweis {
	font-size: var(--wp--preset--font-size--small);
}

.is-style-termine .termin-zusatz {
	display: block;
	font-size: var(--wp--preset--font-size--small);
}

.is-style-termine .termin-zeit::before,
.gemeinde-adresse::before {
	content: "";
	flex: none;
	width: 1.15em;
	height: 1.15em;
	background-color: currentColor;
	color: var(--wp--preset--color--gold);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3V1h-2v2H9V1H7v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7.26a6.5 6.5 0 0 1-.66-2H5V9h14v2.6a6.5 6.5 0 0 1 2 1.26V5a2 2 0 0 0-2-2h-2Z'/%3E%3Cpath d='M17.5 13a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Zm.5 4.75 2.05 1.22-.5.86-2.55-1.53V15h1v2.75Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3V1h-2v2H9V1H7v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7.26a6.5 6.5 0 0 1-.66-2H5V9h14v2.6a6.5 6.5 0 0 1 2 1.26V5a2 2 0 0 0-2-2h-2Z'/%3E%3Cpath d='M17.5 13a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Zm.5 4.75 2.05 1.22-.5.86-2.55-1.53V15h1v2.75Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The address closes the card and belongs to the whole of it, not to the
   meeting above it. Without a top margin it sat as close to "Freitags 19:30
   Uhr" as that line sits to its own heading, and read as a fourth line of the
   last meeting. The gap is wider than the 0.8rem between meetings, so the eye
   groups it with the card rather than with anything above it. */
.gemeinde-adresse {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 1.3rem 0 0;
}

.gemeinde-adresse::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
	color: var(--wp--preset--color--gold);
}

/* ---------- Contact page: the three ways to reach us ----------
   The heading is an invitation, so the icon belongs to the line it marks, not
   to the heading: one pin for the address, one handset per number, one envelope
   for the mail. `align-items: flex-start` keeps the pin level with the first
   line of a three-line address instead of centring it against the whole block.
   The glyphs are masks in the same gold as the map pin on the front page. */
.kontakt-zeile {
	position: relative;
	padding-left: 1.9rem;
}

.kontakt-zeile::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.15em;
	height: 1.15em;
	background-color: var(--wp--preset--color--gold);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.kontakt-zeile.is-icon-adresse::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
}

.kontakt-zeile.is-icon-telefon::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.4 21 3 13.6 3 4.5a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1l-2.22 2.23Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.4 21 3 13.6 3 4.5a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1l-2.22 2.23Z'/%3E%3C/svg%3E");
}

.kontakt-zeile.is-icon-mail::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm8 7.2 8-5V6H4v.2l8 5Zm0 2.35L4 8.55V18h16V8.55l-8 5Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm8 7.2 8-5V6H4v.2l8 5Zm0 2.35L4 8.55V18h16V8.55l-8 5Z'/%3E%3C/svg%3E");
}

/* The heading starts where the icons start, not where their text starts. The
   icon column is the card's left edge: three cards side by side then share one
   vertical line down the page, and the heading sits over its own icon rather
   than floating a glyph's width to the right of it. */
.kontakt-info h3 {
	margin-top: 0;
	padding-left: 0;
}

.kontakt-info .kontakt-zeile {
	margin-bottom: 0.4rem;
}

.kontakt-info .kontakt-zeile:last-child {
	margin-bottom: 0;
}

.kontakt-info a {
	overflow-wrap: anywhere;
}

/* ---------- The map on the contact page ----------
   The image and the button came from hand-written HTML with inline styles: a
   grey hairline, a drop shadow and a solid blue block. The styles are gone from
   the markup, so the picture takes the shared card frame and the button is the
   same pill as every other one. The glyph is the "directions" sign rather than
   the Google Maps pin, which is a trademark and would be the only multicoloured
   icon on the site. */
/* The map block comes from [gemeinde_anfahrt] (Gemeinde Core); the margin and
   the picture's size used to be written inline in the page. */
.kontakt-map-wrapper {
	margin: 1.25rem 0;
	text-align: left;
}

.kontakt-map-wrapper img {
	display: block;
	max-width: 100%;
	height: auto;
}

.kontakt-map-wrapper img {
	border: var(--gemeinde-card-border);
	border-radius: var(--gemeinde-card-radius);
	box-shadow: none;
}

.kontakt-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.9rem;
	padding: 0.45rem 1.1rem;
	background-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--accent);
	border: 1px solid currentColor;
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.kontakt-btn::before {
	content: "";
	flex: none;
	width: 1.2em;
	height: 1.2em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.71 11.29l-9-9a.996.996 0 0 0-1.41 0l-9 9a.996.996 0 0 0 0 1.41l9 9c.39.39 1.02.39 1.41 0l9-9a.996.996 0 0 0 0-1.41ZM14 14.5V12h-4v3H8v-4c0-.55.45-1 1-1h5V7.5l3.5 3.5-3.5 3.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.71 11.29l-9-9a.996.996 0 0 0-1.41 0l-9 9a.996.996 0 0 0 0 1.41l9 9c.39.39 1.02.39 1.41 0l9-9a.996.996 0 0 0 0-1.41ZM14 14.5V12h-4v3H8v-4c0-.55.45-1 1-1h5V7.5l3.5 3.5-3.5 3.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kontakt-map-wrapper a:hover .kontakt-btn,
.kontakt-map-wrapper a:focus-visible .kontakt-btn {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.kontakt-map-hinweis {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}


/* ---------- Buttons ---------- */
.wp-block-button.is-style-outline-light .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-outline-light .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--accent);
}

/* Legacy auth buttons rendered by the [auth_button] shortcode */
.custom-dynamic-btn {
	display: inline-block;
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--accent);
	border: 1px solid currentColor;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.1;
	padding: 0.4rem 1rem;
	margin-left: 0.6rem;
	border-radius: var(--wp--custom--radius--pill);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.custom-dynamic-btn:hover,
.custom-dynamic-btn:focus-visible {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* On the blue header the light outline reads better than the cream fill. */
.custom-dynamic-btn.register-btn {
	background: transparent;
	border: 1px solid var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
}

/* ---------- Page title band ---------- */
/* The title band repeats the light blue of the quick links on the home page. */
.gemeinde-page-title {
	background: var(--wp--preset--color--sky);
	border-bottom: 0;
}

/* ---------- Weekly verses ---------- */
.wochenverse-zeitraum {
	display: inline-block;
	background: var(--wp--preset--color--sand);
	color: #5c5346;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.25rem 0.9rem;
	border-radius: var(--wp--custom--radius--pill);
}

.wochenverse-leitvers {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.7;
	text-align: center;
	color: var(--wp--preset--color--ink);
	max-width: 600px;
	margin: 0 auto var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wochenverse-tage {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Three days to a row on a desktop, two on a tablet, one on a phone. A week
   leaves the last card - Sunday - alone on its row, so it takes the whole
   width instead of sitting in a third with two gaps beside it. The rule reads
   the day cards by type, not by :last-child, so it stays right when a day
   without a verse is skipped and the row happens to come out full. */
@media (min-width: 600px) and (max-width: 781px) {
	.wochenverse-tage {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wochenverse-tage .tag-karte:last-of-type:nth-of-type(2n + 1) {
		grid-column: 1 / -1;
	}
}

@media (min-width: 782px) {
	.wochenverse-tage {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.wochenverse-tage .tag-karte:last-of-type:nth-of-type(3n + 1) {
		grid-column: 1 / -1;
	}
}

.tag-karte {
	background: var(--wp--preset--color--base);
	border: var(--gemeinde-card-border);
	border-radius: var(--gemeinde-card-radius);
	padding: var(--wp--preset--spacing--20);
}

/* Today keeps its own ground instead of a heavier frame. */
.tag-karte.heute {
	background: var(--wp--preset--color--cream);
}

.tag-karte h3 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 0.5rem;
}

.tag-karte .badge {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--base);
	padding: 0.1rem 0.5rem;
	border-radius: var(--wp--custom--radius--pill);
	font-weight: 400;
}

.tag-vers {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}

.wochenverse-liste {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 600px;
}

.wochenverse-liste li {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wochenverse-liste a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.9rem 0.25rem;
	text-decoration: none;
	color: inherit;
}

.wochenverse-liste .zeitraum {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}

/* ---------- Conferences ---------- */
.konf-tabelle {
	width: 100%;
	border-collapse: collapse;
}

.konf-tabelle thead th {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--base);
	text-align: left;
	padding: 0.85rem 1.1rem;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.konf-tabelle thead th:first-child { border-radius: 6px 0 0 0; }
.konf-tabelle thead th:last-child { border-radius: 0 6px 0 0; }

.konf-tabelle tbody td {
	padding: 0.85rem 1.1rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	vertical-align: top;
}

.konf-tabelle tbody tr:nth-child(even) { background: var(--wp--preset--color--surface); }

.konf-datum {
	white-space: nowrap;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	width: 150px;
}

.konf-veranstalter { color: var(--wp--preset--color--muted); }

@media (max-width: 640px) {
	.konf-tabelle thead { display: none; }
	/* The cells carry horizontal padding, so without border-box the 100% width
	   grows past the row, which clips and hides the right padding. */
	.konf-tabelle, .konf-tabelle tbody, .konf-tabelle tr, .konf-tabelle td { display: block; width: 100%; box-sizing: border-box; }
	.konf-tabelle tr { margin-bottom: 1rem; border: var(--gemeinde-card-border); border-radius: var(--gemeinde-card-radius); overflow: hidden; background: var(--wp--preset--color--base); }
	.konf-tabelle td { border-bottom: none; padding: 0.5rem 1rem; }
	.konf-tabelle td.konf-datum { background: var(--wp--preset--color--surface); width: auto; }
	.konf-tabelle td.konf-konferenz { font-weight: 600; padding-top: 0.75rem; }
}

.konf-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.konf-liste-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.konf-liste-item:last-child { border-bottom: 0; }

.konf-liste-datum {
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	white-space: nowrap;
}

.konf-liste-veranstalter {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	width: 100%;
}

/* ---------- Content cards used on inner pages (classes kept from the old site) ---------- */
/* Sections of the contact page read like the text pages of the site: no tinted
   box and no underlined headings, just the usual rhythm. */
.kontakt-card {
	margin-bottom: var(--wp--preset--spacing--50);
}

.kontakt-card h2 {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* These two really are cards, so they take the shared frame. */
.zoom-card,
.profil-card {
	background: var(--wp--preset--color--base);
	border: var(--gemeinde-card-border);
	border-radius: var(--gemeinde-card-radius);
	padding: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--30);
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

/* Responsive tables: on narrow screens every row becomes a card; the first cell is the title. */
@media (max-width: 640px) {
	.wp-block-table.zoom-meetings thead,
	.wp-block-table.zoom-teams thead { display: none; }
	.wp-block-table.zoom-meetings table,
	.wp-block-table.zoom-meetings tbody,
	.wp-block-table.zoom-meetings tr,
	.wp-block-table.zoom-meetings td,
	.wp-block-table.zoom-teams table,
	.wp-block-table.zoom-teams tbody,
	.wp-block-table.zoom-teams tr,
	.wp-block-table.zoom-teams td { display: block; width: 100%; }
	.wp-block-table.zoom-meetings tr,
	.wp-block-table.zoom-teams tr { margin-bottom: 1rem; border: var(--gemeinde-card-border); border-radius: var(--gemeinde-card-radius); overflow: hidden; background: var(--wp--preset--color--base); }
	.wp-block-table.zoom-meetings td,
	.wp-block-table.zoom-teams td { border: 0; padding: 0.5rem 1rem; }
	.wp-block-table.zoom-meetings td:first-child,
	.wp-block-table.zoom-teams td:first-child { font-weight: 700; color: var(--wp--preset--color--navy); background: #eef5f8; padding-top: 0.85rem; }
	.wp-block-table.zoom-meetings td:nth-child(2)::before,
	.wp-block-table.zoom-teams td:nth-child(2)::before { content: "ID: "; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--x-small); }
	.wp-block-table.zoom-meetings td:nth-child(3)::before { content: "Passcode: "; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--x-small); }
	.wp-block-table.zoom-teams td:nth-child(3)::before { content: "Telefon: "; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--x-small); }
	.wp-block-table.zoom-meetings td:nth-child(4)::before,
	.wp-block-table.zoom-teams td:nth-child(4)::before { content: "Wann: "; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--x-small); }
}

/* ---------- Church info ---------- */
.gi-liste { list-style: none; margin: 0; padding: 0; }
.gi-liste-item { padding: 0.75rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.gi-liste-item:last-child { border-bottom: 0; }
.gi-liste-titel { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); text-decoration: none; }
.gi-liste-datum { display: block; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted); }
.gi-neueste-eintrag .gi-datum { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); margin-bottom: var(--wp--preset--spacing--20); }
.gi-neueste-eintrag .gi-beitragsbild img { border-radius: var(--wp--custom--radius--large); }

/* ---------- Profile form (Gemeinde Core) ---------- */
.gemeinde-profile { max-width: 480px; margin: 0 auto; }
.gemeinde-profile label { display: block; font-size: var(--wp--preset--font-size--small); margin-bottom: 0.25rem; }
.gemeinde-profile input { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--small); box-sizing: border-box; font: inherit; }
.gemeinde-profile fieldset { border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--small); padding: var(--wp--preset--spacing--20); margin: var(--wp--preset--spacing--20) 0; }
.gemeinde-profile legend { font-family: var(--wp--preset--font-family--heading); padding: 0 0.5rem; }
/* The form buttons wear the same pill as every other button on the site. The
   danger one keeps a red, but a darker one: #dc3545 is 4.53:1 on white and
   4.28:1 on the cream fill, which is under the 4.5 asked of normal text. */
.gemeinde-btn { border: 1px solid currentColor; width: 100%; padding: 0.7rem 1.25rem; border-radius: var(--wp--custom--radius--pill); cursor: pointer; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); background-color: var(--wp--preset--color--cream); transition: background-color 0.2s ease, color 0.2s ease; }
.gemeinde-btn-primary { color: var(--wp--preset--color--accent); }
.gemeinde-btn-primary:hover, .gemeinde-btn-primary:focus-visible { background-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); }
.gemeinde-btn-danger { color: #b32d2e; }
.gemeinde-btn-danger:hover, .gemeinde-btn-danger:focus-visible { background-color: #b32d2e; color: var(--wp--preset--color--base); }
.gemeinde-profile-notice.is-error { color: #b32d2e; font-weight: 600; }
.gemeinde-profile-notice.is-success { color: #1d7a3a; font-weight: 600; }

/* ---------- Datenpflege: editing on the website (Gemeinde Core) ----------
   [gemeinde_datenpflege]: the list of a content type's entries, the form for
   one of them and the church data, for people who never see the backend -
   many of them elderly. Hence the whole width of the content column, dark
   text throughout (ink, 12:1 on white, never the muted grey), fields framed
   by a 2px dark line, a thick focus ring, and no text below the body size.
   Links and the main button use accent-hover, 7:1 on white. */
.gemeinde-dp {
	--gemeinde-dp-frame: 2px solid var(--wp--preset--color--ink);
	--gemeinde-dp-divider: 2px solid var(--wp--preset--color--muted);
	--gemeinde-dp-link: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--contrast);
}
.gemeinde-dp a { color: var(--gemeinde-dp-link); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.gemeinde-dp a:hover, .gemeinde-dp a:focus-visible { color: var(--wp--preset--color--contrast); }
.gemeinde-dp :focus-visible { outline: 3px solid var(--wp--preset--color--primary); outline-offset: 2px; }
.gemeinde-dp-heading { font-size: var(--wp--preset--font-size--xx-large); margin: 0 0 var(--wp--preset--spacing--20); color: var(--wp--preset--color--contrast); }
.gemeinde-dp-type { display: block; margin-top: 0.3rem; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--ink); }
.gemeinde-dp-empty { color: var(--wp--preset--color--ink); }
.gemeinde-dp-help { display: block; margin-top: 0.35rem; font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--ink); }
.gemeinde-dp-backend { margin: var(--wp--preset--spacing--20) 0 0; }

.gemeinde-dp-notice { margin: 0 0 var(--wp--preset--spacing--30); padding: 1rem 1.25rem; border: 2px solid #1d7a3a; border-left-width: 8px; border-radius: var(--wp--custom--radius--small); background-color: #eef7f0; font-size: var(--wp--preset--font-size--large); }
.gemeinde-dp-notice.is-error { border-color: #b32d2e; background-color: #fbeeee; }
.gemeinde-dp-notice p { margin: 0; }
.gemeinde-dp-notice p + p, .gemeinde-dp-notice form { margin-top: 0.5rem; }

/* A button that reads as a link: undo, move to trash. */
.gemeinde-dp-link { padding: 0; border: 0; background: none; font: inherit; color: var(--gemeinde-dp-link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; cursor: pointer; }
.gemeinde-dp-link.is-danger { color: #b32d2e; }

/* Overview: one card per content type. */
/* Overview: the page the menu entry opens - one card per section, each with
   a button to open it and one for a new entry. */
.gemeinde-dp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--wp--preset--spacing--30); list-style: none; margin: 0; padding: 0; }
.gemeinde-dp-card { display: flex; flex-direction: column; gap: 0.6rem; padding: var(--wp--preset--spacing--30); border: 2px solid var(--wp--preset--color--gold); border-radius: var(--gemeinde-card-radius); background-color: var(--wp--preset--color--base); }
.gemeinde-dp .gemeinde-dp-card-title { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-large); color: var(--wp--preset--color--contrast); text-decoration: none; }
.gemeinde-dp .gemeinde-dp-card-title:hover, .gemeinde-dp .gemeinde-dp-card-title:focus-visible { color: var(--gemeinde-dp-link); text-decoration: underline; }
.gemeinde-dp-card-count { color: var(--wp--preset--color--ink); }
.gemeinde-dp-card-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; padding-top: 0.4rem; }
.gemeinde-dp-card-actions .gemeinde-btn { padding: 0.5rem 1.2rem; font-size: var(--wp--preset--font-size--medium); }
.gemeinde-dp-card-actions .gemeinde-btn:not(.gemeinde-btn-primary) { border-color: var(--wp--preset--color--contrast); background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }
.gemeinde-dp-card-actions .gemeinde-btn:not(.gemeinde-btn-primary):hover, .gemeinde-dp-card-actions .gemeinde-btn:not(.gemeinde-btn-primary):focus-visible { background-color: var(--wp--preset--color--sand); }
.gemeinde-dp-backend-links { margin-top: var(--wp--preset--spacing--40); padding-top: var(--wp--preset--spacing--20); border-top: var(--gemeinde-dp-divider); }
.gemeinde-dp-backend-links h3 { margin: 0 0 0.5rem; font-size: var(--wp--preset--font-size--large); }
.gemeinde-dp-backend-links ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; padding: 0; list-style: none; }

/* List. */
.gemeinde-dp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: var(--wp--preset--spacing--20); }
.gemeinde-dp-head .gemeinde-dp-heading { margin: 0; }
.gemeinde-dp .gemeinde-btn { width: auto; display: inline-block; border-width: 2px; text-decoration: none; font-size: var(--wp--preset--font-size--large); }
/* The one action that matters on each screen is filled, so nobody has to
   guess which button saves. */
.gemeinde-dp .gemeinde-btn-primary { background-color: var(--gemeinde-dp-link); border-color: var(--gemeinde-dp-link); color: var(--wp--preset--color--base); }
.gemeinde-dp .gemeinde-btn-primary:hover, .gemeinde-dp .gemeinde-btn-primary:focus-visible { background-color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.gemeinde-dp-search { display: flex; gap: 0.5rem; margin-bottom: var(--wp--preset--spacing--20); }
.gemeinde-dp-search input { flex: 1; min-width: 0; padding: 0.65rem 0.85rem; border: var(--gemeinde-dp-frame); border-radius: var(--wp--custom--radius--small); background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); font: inherit; }
.gemeinde-dp-search button { padding: 0.65rem 1.1rem; border: var(--gemeinde-dp-frame); border-radius: var(--wp--custom--radius--small); background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); font: inherit; font-weight: 600; cursor: pointer; }
.gemeinde-dp-search button:hover { background-color: var(--wp--preset--color--sand); }
.gemeinde-dp-list { list-style: none; margin: 0; padding: 0; border-top: var(--gemeinde-dp-divider); }
.gemeinde-dp-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 0.75rem 1.25rem; align-items: center; padding: 1rem 0.5rem; border-bottom: var(--gemeinde-dp-divider); }
.gemeinde-dp-row.is-highlighted { background-color: var(--wp--preset--color--cream); }
/* Types without images (announcements, conferences, weekly verses) drop the
   thumbnail column instead of showing an empty square on every row. */
.gemeinde-dp-list.has-no-images .gemeinde-dp-row { grid-template-columns: 1fr auto; }
.gemeinde-dp-thumb { display: block; width: 72px; height: 72px; border-radius: var(--wp--custom--radius--small); background-color: var(--wp--preset--color--surface); overflow: hidden; }
.gemeinde-dp-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gemeinde-dp-title { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-large); line-height: 1.25; }
.gemeinde-dp .gemeinde-dp-title { color: var(--wp--preset--color--contrast); text-decoration: none; }
.gemeinde-dp .gemeinde-dp-title:hover, .gemeinde-dp .gemeinde-dp-title:focus-visible { color: var(--gemeinde-dp-link); text-decoration: underline; }
.gemeinde-dp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.3rem; color: var(--wp--preset--color--ink); }
.gemeinde-dp-badge { padding: 0.1rem 0.7rem; border: 1px solid var(--wp--preset--color--ink); border-radius: var(--wp--custom--radius--pill); background-color: var(--wp--preset--color--sky); color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.gemeinde-dp-badge.is-draft { background-color: var(--wp--preset--color--sand); }
.gemeinde-dp-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 1.25rem; }
.gemeinde-dp-actions form { margin: 0; }
.gemeinde-dp-pages { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.25rem; margin-top: var(--wp--preset--spacing--30); }

@media (max-width: 600px) {
	.gemeinde-dp-row { grid-template-columns: 60px 1fr; }
	.gemeinde-dp-thumb { width: 60px; height: 60px; }
	.gemeinde-dp-actions { grid-column: 1 / -1; justify-content: flex-start; }
	.gemeinde-dp-list.has-no-images .gemeinde-dp-row { grid-template-columns: 1fr; }
}

/* Form. */
.gemeinde-dp-back { margin: 0 0 var(--wp--preset--spacing--20); }
.gemeinde-dp-form { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }
.gemeinde-dp-field { margin: 0; }
.gemeinde-dp-field > label:not(.gemeinde-dp-check):not(.gemeinde-dp-file), .gemeinde-dp-label, .gemeinde-dp-image legend, .gemeinde-dp-attachments legend, .gemeinde-dp-choices legend { display: block; margin-bottom: 0.4rem; padding: 0; font-size: var(--wp--preset--font-size--large); font-weight: 700; color: var(--wp--preset--color--contrast); }
.gemeinde-dp-field input[type="text"], .gemeinde-dp-field input[type="date"], .gemeinde-dp-field input[type="time"], .gemeinde-dp-field input[type="email"], .gemeinde-dp-field input[type="url"], .gemeinde-dp-field select, .gemeinde-dp-field textarea { width: 100%; padding: 0.7rem 0.85rem; border: var(--gemeinde-dp-frame); border-radius: var(--wp--custom--radius--small); background-color: var(--wp--preset--color--base); box-sizing: border-box; color: var(--wp--preset--color--contrast); font: inherit; }
/* A date needs no full row; the browser's own picker opens on tap. */
.gemeinde-dp-field input[type="date"], .gemeinde-dp-field input[type="time"] { width: auto; min-width: 12rem; }
.gemeinde-dp-field input:focus, .gemeinde-dp-field select:focus, .gemeinde-dp-field textarea:focus { outline: 3px solid var(--wp--preset--color--primary); outline-offset: 2px; }
.gemeinde-dp-field ::placeholder { color: var(--wp--preset--color--muted); opacity: 1; }
.gemeinde-dp-image, .gemeinde-dp-attachments, .gemeinde-dp-choices { padding: 0; border: 0; }
/* The attachments (files.php): one file per row - its name, a field for the
   label, and the box or link that takes it off. */
.gemeinde-dp-attachments-list { margin: 0 0 0.75rem; padding: 0; list-style: none; }
.gemeinde-dp-attachment { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.gemeinde-dp-attachment:first-child { padding-top: 0; }
.gemeinde-dp-attachment .gemeinde-file-name { flex: 1 1 100%; font-weight: 600; overflow-wrap: anywhere; }
.gemeinde-dp-attachment-label { display: flex; flex: 1 1 16rem; flex-direction: column; gap: 0.25rem; }
.gemeinde-dp-attachment-label span { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.gemeinde-dp-attachment .gemeinde-dp-check { margin: 0 0 0.6rem; }
.gemeinde-dp-attachment > .gemeinde-dp-link { margin-bottom: 0.8rem; }
.gemeinde-dp-attachment.is-removed > :not(.gemeinde-dp-check) { opacity: 0.35; }
.gemeinde-dp-image-preview:not(:empty) { margin-bottom: 0.75rem; }
.gemeinde-dp-image-preview img { display: block; max-width: 100%; max-height: 300px; width: auto; height: auto; border: var(--gemeinde-dp-frame); border-radius: var(--wp--custom--radius--small); }
.gemeinde-dp-image-preview.is-removed > * { opacity: 0.3; }
.gemeinde-dp-image-preview .gemeinde-file-name { margin: 0; overflow-wrap: anywhere; }
.gemeinde-dp-image-preview audio { display: block; width: 100%; }
/* The file picker wears a button of the site instead of the browser's own
   control, whose "Choose file / No file chosen" comes in the browser's
   language. The input lies invisibly over the button, so a tap anywhere on it
   opens the picker and the keyboard still reaches it. */
.gemeinde-dp-file { position: relative; display: inline-block; }
.gemeinde-dp-file span { display: inline-block; padding: 0.6rem 1.3rem; border: 2px solid var(--gemeinde-dp-link); border-radius: var(--wp--custom--radius--pill); background-color: var(--wp--preset--color--cream); color: var(--gemeinde-dp-link); font-weight: 600; transition: background-color 0.2s ease, color 0.2s ease; }
.gemeinde-dp-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.gemeinde-dp-file:hover span, .gemeinde-dp-file:focus-within span { background-color: var(--gemeinde-dp-link); color: var(--wp--preset--color--base); }
.gemeinde-dp-file:focus-within span { outline: 3px solid var(--wp--preset--color--primary); outline-offset: 2px; }
.gemeinde-dp-check { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; font-size: var(--wp--preset--font-size--large); cursor: pointer; }
.gemeinde-dp-check input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--gemeinde-dp-link); }
.gemeinde-dp-image-error { margin: 0.5rem 0 0; color: #b32d2e; font-weight: 700; }
.gemeinde-dp-text .wp-editor-container, .gemeinde-dp-richtext .wp-editor-container { border: var(--gemeinde-dp-frame); border-radius: var(--wp--custom--radius--small); overflow: hidden; }
/* The editor's toolbar in dark on a light band, its buttons a size larger
   than WordPress draws them. */
.gemeinde-dp div.mce-toolbar-grp { background-color: var(--wp--preset--color--surface); border-bottom: var(--gemeinde-dp-divider); }
.gemeinde-dp .mce-toolbar .mce-btn-group .mce-btn button { padding: 6px 8px; }
.gemeinde-dp .mce-toolbar .mce-btn-group .mce-btn .mce-ico { color: var(--wp--preset--color--contrast); font-size: 22px; width: 22px; height: 22px; }
.gemeinde-dp .mce-toolbar .mce-listbox button .mce-txt { color: var(--wp--preset--color--contrast); font-size: 16px; }
.gemeinde-dp-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; padding-top: var(--wp--preset--spacing--20); border-top: var(--gemeinde-dp-divider); }
.gemeinde-dp-buttons .gemeinde-btn:not(.gemeinde-btn-primary) { border-color: var(--wp--preset--color--contrast); background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }
.gemeinde-dp-buttons .gemeinde-btn:not(.gemeinde-btn-primary):hover, .gemeinde-dp-buttons .gemeinde-btn:not(.gemeinde-btn-primary):focus-visible { background-color: var(--wp--preset--color--sand); }
.gemeinde-dp-form.is-sending .gemeinde-btn { opacity: 0.6; cursor: wait; }

@media (max-width: 600px) {
	.gemeinde-dp-buttons .gemeinde-btn { width: 100%; }
}

/* Church data: one fieldset per group, and every entry of a list (meetings,
   phone numbers, online meetings) as a card of labelled boxes. The empty
   cards at the end, dashed, are for new entries. */
.gemeinde-dp-group { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); margin: 0; padding: var(--wp--preset--spacing--30) 0 0; border: 0; border-top: var(--gemeinde-dp-divider); }
.gemeinde-dp-group legend { float: left; width: 100%; margin-bottom: 0.25rem; padding: 0; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--xx-large); color: var(--wp--preset--color--contrast); }
.gemeinde-dp-group > .gemeinde-dp-help { margin: 0; }
.gemeinde-dp-rows { display: flex; flex-direction: column; gap: 1rem; }
.gemeinde-dp-rows > .gemeinde-dp-help { margin: -0.25rem 0 0; }
.gemeinde-dp-row-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem 1rem; padding: 1rem; border: var(--gemeinde-dp-divider); border-radius: var(--wp--custom--radius--small); background-color: var(--wp--preset--color--base); }
.gemeinde-dp-row-card.is-new { border-style: dashed; background-color: var(--wp--preset--color--surface); }
.gemeinde-dp-new-label { grid-column: 1 / -1; font-weight: 700; color: var(--wp--preset--color--ink); }
.gemeinde-dp-row-card .gemeinde-dp-field.gemeinde-dp-cell > label { margin-bottom: 0.3rem; font-size: var(--wp--preset--font-size--medium); font-weight: 700; }
.gemeinde-dp-cell.is-url { grid-column: span 2; }
/* A text of several lines and a picture take the whole width of their card. */
.gemeinde-dp-cell.is-textarea, .gemeinde-dp-cell.is-image { grid-column: 1 / -1; }
.gemeinde-dp-cell.is-image .gemeinde-dp-image { margin: 0; }
/* A list managed with "Veröffentlicht" and "Löschen" (the cards of the home
   page): the switch heads the card, the delete button closes it, and a card
   that is not published is pale with a dashed frame. */
.gemeinde-dp-cell.is-toggle, .gemeinde-dp-cell.is-delete { grid-column: 1 / -1; margin: 0; }
.gemeinde-dp-cell.is-delete { text-align: right; }
.gemeinde-dp-row-card.is-unpublished { border-style: dashed; background-color: var(--wp--preset--color--surface); }
.gemeinde-dp-row-card.is-unpublished .gemeinde-dp-image-preview img { opacity: 0.55; }
@media (max-width: 600px) {
	.gemeinde-dp-cell.is-url { grid-column: auto; }
}

/* ---------- Church app (Gemeinde Core, [gemeinde_app]) ----------
   The page the app on a phone opens. Read mostly by elderly members, often in
   poor light: large dark type, cards with a clear frame, urgent news in red at
   the top, and a red "Neu" on whatever appeared since the last visit. */
/* The app page has a template of its own (templates/gemeinde-app.html): no
   site header, menu or footer, a calm light ground behind white cards, a navy
   bar with the church's name and the date - the colours of the app icon - and
   one way out at the foot. */
.gemeinde-app-shell { min-height: 100vh; min-height: 100dvh; background-color: var(--wp--preset--color--surface); }
.gemeinde-app { color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--large); }
.gemeinde-app-head { padding: 1rem var(--wp--preset--spacing--20); background-color: var(--wp--preset--color--navy); color: var(--wp--preset--color--base); }
.gemeinde-app-head-inner, .gemeinde-app-body, .gemeinde-app-foot { max-width: 860px; margin: 0 auto; }
.gemeinde-app-name { margin: 0; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-large); font-weight: 500; line-height: 1.2; }
.gemeinde-app-date { margin: 0.2rem 0 0; font-size: var(--wp--preset--font-size--medium); opacity: 0.85; }
.gemeinde-app-body { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20) 0; }
.gemeinde-app-foot { padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20) var(--wp--preset--spacing--50); text-align: center; }
.gemeinde-app-foot .gemeinde-btn { display: inline-block; width: auto; border-width: 2px; text-decoration: none; color: var(--wp--preset--color--ink); }
.gemeinde-app-back { margin: 0 0 1rem; }
.gemeinde-app-back a { font-weight: 700; color: var(--wp--preset--color--accent-hover); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.gemeinde-app-entry { margin: 0 0 1rem; padding: 1.25rem; border: var(--gemeinde-card-border); border-radius: var(--gemeinde-card-radius); background-color: var(--wp--preset--color--base); }
.gemeinde-app-entry-title { margin: 0 0 0.35rem; font-size: var(--wp--preset--font-size--xx-large); }
.gemeinde-app-entry-image img { display: block; width: 100%; height: auto; margin: 1rem 0 0; border-radius: var(--wp--custom--radius--small); }
.gemeinde-app-entry .gemeinde-audio, .gemeinde-app-entry .gemeinde-attachments { margin: 1rem 0 0; }
.gemeinde-app-entry-text { margin-top: 1rem; line-height: 1.6; overflow-wrap: break-word; }
.gemeinde-app-entry-text > :first-child { margin-top: 0; }
.gemeinde-app-entry-text img { max-width: 100%; height: auto; }
.gemeinde-app-section { margin: 0 0 var(--wp--preset--spacing--40); }
.gemeinde-app-section > h2, .gemeinde-app-install > h2 { margin: 0 0 var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--xx-large); color: var(--wp--preset--color--contrast); }
.gemeinde-app-section.is-urgent { padding: var(--wp--preset--spacing--20); border: 3px solid #b32d2e; border-radius: var(--gemeinde-card-radius); background-color: #fbeeee; }
.gemeinde-app-section.is-urgent > h2 { color: #b32d2e; }
.gemeinde-app-list { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.gemeinde-app-item { display: flex; align-items: flex-start; gap: 0.9rem; padding: 1rem 1.1rem; border: var(--gemeinde-card-border); border-radius: var(--gemeinde-card-radius); background-color: var(--wp--preset--color--base); }
.gemeinde-app-item .ga-icon { flex: none; margin-top: 0.15rem; }
.gemeinde-app-item .ga-icon svg { width: 36px; height: 36px; }
.gemeinde-app-item-body { flex: 1; min-width: 0; }
.gemeinde-app-text { line-height: 1.5; overflow-wrap: break-word; }
.gemeinde-app-text a, .gemeinde-app a.gemeinde-app-title { color: var(--wp--preset--color--accent-hover); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.gemeinde-app a.gemeinde-app-title { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-large); line-height: 1.25; }
.gemeinde-app-meta { margin-top: 0.35rem; font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--ink); }
.gemeinde-app-new { display: none; margin-bottom: 0.35rem; padding: 0.1rem 0.7rem; border-radius: var(--wp--custom--radius--pill); background-color: #b32d2e; color: var(--wp--preset--color--base); font-size: var(--wp--preset--font-size--small); font-weight: 700; letter-spacing: 0.03em; }
.gemeinde-app-item.is-new { border-color: #b32d2e; }
.gemeinde-app-item.is-new .gemeinde-app-new { display: inline-block; }
.gemeinde-app-empty { color: var(--wp--preset--color--ink); }
.gemeinde-app-section.is-verse .tagesvers-box { font-size: var(--wp--preset--font-size--large); }

/* Installing: app.js shows the part that fits the phone; inside the
   installed app the whole block is hidden. */
.gemeinde-app-install { margin: 0 0 var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--30); border: 2px solid var(--wp--preset--color--navy); border-radius: var(--gemeinde-card-radius); background-color: var(--wp--preset--color--sky); }
.gemeinde-app-install > h2 { font-size: var(--wp--preset--font-size--x-large); }
.gemeinde-app-install-prompt, .gemeinde-app-install-ios, .gemeinde-app-install-other { display: none; }
.gemeinde-app-install.is-prompt .gemeinde-app-install-prompt,
.gemeinde-app-install.is-ios .gemeinde-app-install-ios,
.gemeinde-app-install:not(.is-prompt):not(.is-ios) .gemeinde-app-install-other { display: block; }
.gemeinde-app-install p { margin: 0 0 0.75rem; }
.gemeinde-app-install ol { margin: 0; padding-left: 1.4rem; }
.gemeinde-app-install ol li + li { margin-top: 0.5rem; }
.gemeinde-app-install .gemeinde-btn { width: auto; border-width: 2px; background-color: var(--wp--preset--color--accent-hover); border-color: var(--wp--preset--color--accent-hover); color: var(--wp--preset--color--base); }

/* Notifications (push.php): shown inside the installed app only. Until they
   are on, the switch sits at the top like the install card; once on, app.js
   moves it below the news, where it is a plain card with the test button. */
.gemeinde-app-install-push { margin: 0.75rem 0 0; font-weight: 700; }
.gemeinde-app-push { margin: 0 0 var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--30); border: 2px solid var(--wp--preset--color--navy); border-radius: var(--gemeinde-card-radius); background-color: var(--wp--preset--color--sky); }
.gemeinde-app-push[hidden], .gemeinde-app-push [hidden] { display: none; }
.gemeinde-app-push[data-state="on"] { border: var(--gemeinde-card-border); background-color: var(--wp--preset--color--base); }
.gemeinde-app-push > h2 { margin: 0 0 var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--x-large); color: var(--wp--preset--color--contrast); }
.gemeinde-app-push p { margin: 0 0 0.75rem; }
.gemeinde-app-push-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.gemeinde-app-push .gemeinde-btn { width: auto; border-width: 2px; }
.gemeinde-app-push .gemeinde-btn-primary { background-color: var(--wp--preset--color--accent-hover); border-color: var(--wp--preset--color--accent-hover); color: var(--wp--preset--color--base); }
.gemeinde-app-push .gemeinde-btn:disabled { opacity: 0.6; cursor: wait; }
.gemeinde-app-push-note { margin: 0.75rem 0 0; font-weight: 700; }
.gemeinde-app-push-note:empty { display: none; }
.gemeinde-app-install .gemeinde-btn:hover, .gemeinde-app-install .gemeinde-btn:focus-visible { background-color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); }
@media (display-mode: standalone) {
	.gemeinde-app-install { display: none; }
}

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

.gemeinde-footer .wp-block-site-title,
.gemeinde-footer p {
	color: inherit;
}
.gemeinde-footer a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--line);
	text-decoration: none;
}

.gemeinde-footer a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

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

@media (prefers-reduced-motion: reduce) {
	.is-style-rotator > .gemeinde-rotator__item { transition: none; }
}

/* Complianz builds the cookie statement out of content-box boxes that carry
   15px of horizontal padding on a full width, so each came out 30px wider than
   its column and hung over the right edge - the same cause as the conference
   table above. They sit at several depths (the service description, then the
   cells of the cookie grid), so naming them one by one only moved the problem
   down a level. The page is plugin markup from end to end, so border-box is
   set for that subtree alone rather than for the whole site, where it would
   quietly change every box the theme was drawn against. */
.cmplz-document,
.cmplz-document *,
.cmplz-document *::before,
.cmplz-document *::after {
	box-sizing: border-box;
}

/* The cookie table is a grid of `100px 1fr`, and a `1fr` track cannot shrink
   below the min-content width of what is in it - a long cookie name held the
   second column at 179px where only 171px were left, so the rows hung 8px over
   the edge. Clearing the automatic minimum on the items lets the track do what
   `1fr` promises. This is deliberately not a fight with the plugin's own
   `#cmplz-cookies-overview` rule: it sets no min-width, so nothing needs an id
   or !important, and a plugin update that changes the template still works. */
.cmplz-document .cookies-per-purpose > * {
	min-width: 0;
	overflow-wrap: break-word;
}

/* Buttons as outlined pills, the shape the keyword tags in the SEO handout use.

   The border is drawn in the text colour rather than in `gold`: gold on cream
   is 2.92:1, just under the 3:1 a control's own outline needs when the outline
   is what makes it a control. The text colour gives 4.90:1.

   The fill is opaque, which is what lets this work on the hero photograph too -
   the picture behind never touches the text, so the pair is 4.90:1 there as
   everywhere else. On the photograph the light pill also carries further than
   the solid gold one did: light on a dark green picture, rather than a dark
   block sitting in it. */
.wp-block-button__link.wp-element-button {
	background-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--accent);
	border: 1px solid currentColor;
	border-radius: var(--wp--custom--radius--pill);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wp-block-button__link.wp-element-button:hover,
.wp-block-button__link.wp-element-button:focus-visible {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* The cookie banner in the site's colours.
 *
 * Complianz builds the banner from its own custom properties, declared on
 * `:root` in `banner-1-optin.css`. That file loads after the theme, so a
 * `:root` block here would lose on source order alone; `html:root` outranks it
 * on specificity and the load order stops mattering. Setting the plugin's own
 * variables also means its rules keep working - no selector is being fought
 * and nothing needs `!important`. The same colours can be set in Complianz
 * itself (Consent Banner → Appearance); they are here so they travel with the
 * theme and sit beside the rest of the palette.
 *
 * "Akzeptieren" and "Ablehnen" are deliberately given the same treatment.
 * Complianz ships a vivid #3B29FF accept next to a washed-out grey deny, and
 * that is the shape of a dark pattern: under the GDPR both answers should cost
 * the reader the same effort. "Einstellungen ansehen" stays quieter because it
 * leads onward rather than deciding anything.
 */
html:root {
	--cmplz_button_accept_background_color: #fdf8f0;
	--cmplz_button_accept_border_color: #8b6637;
	--cmplz_button_accept_text_color: #8b6637;

	--cmplz_button_deny_background_color: #fdf8f0;
	--cmplz_button_deny_border_color: #8b6637;
	--cmplz_button_deny_text_color: #8b6637;

	--cmplz_button_settings_background_color: #ffffff;
	--cmplz_button_settings_border_color: #e2e8f0;
	--cmplz_button_settings_text_color: #215387;

	--cmplz_hyperlink_color: #215387;
	--cmplz_text_color: #2d3748;
	--cmplz_slider_active_color: #8b6637;
	--cmplz_slider_inactive_color: #718096;
	--cmplz_category_header_always_active_color: #215387;

	/* The shape is a variable too - 6px by default. The buttons are 45px tall,
	   so this rounds them fully, like the buttons on the site. */
	--cmplz_button_border_radius: 999px 999px 999px 999px;
}

/* Weight is the one thing Complianz does not expose. */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	font-weight: 600;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover {
	background-color: #8b6637;
	color: #fdf8f0;
}

/* Hover on the hero strip: ring, glyph and label all take one tint.
 *
 * The ring and the label already follow `currentColor`. The glyph could not:
 * it is an SVG in a data URI, and a data URI used as `background-image` cannot
 * inherit `currentColor`. Masking it instead would have solved that, but a
 * mask clips the whole element - tested, and the ring disappeared with it. So
 * the glyph simply carries a second copy in the hover tint. Three rules, and
 * the alternative was redrawing the ring into each piece of artwork.
 *
 * The tint is a couple of steps below the cream the buttons are filled with,
 * at the same hue: light enough to stay clearly lighter than the button
 * outline, dark enough that the change is visible against white. */
.gemeinde-hero .gemeinde-quicklink a:where(:not(.wp-element-button)):hover,
.gemeinde-hero .gemeinde-quicklink a:where(:not(.wp-element-button)):focus-visible {
	color: var(--wp--custom--hero--quicklink-hover);
}

.gemeinde-hero .gemeinde-quicklink.is-icon-announcement a:hover::before,
.gemeinde-hero .gemeinde-quicklink.is-icon-announcement a:focus-visible::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f6e2c0'%3E%3Cpath d='M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2Zm6-6v-5a6 6 0 0 0-4.5-5.8V4.5a1.5 1.5 0 0 0-3 0v0.7A6 6 0 0 0 6 11v5l-1.5 1.5v1h15v-1Z'/%3E%3C/svg%3E");
}

.gemeinde-hero .gemeinde-quicklink.is-icon-info a:hover::before,
.gemeinde-hero .gemeinde-quicklink.is-icon-info a:focus-visible::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f6e2c0'%3E%3Ccircle cx='12' cy='4.6' r='2.3'/%3E%3Crect x='9.7' y='9' width='4.6' height='12' rx='2.3'/%3E%3C/svg%3E");
}

.gemeinde-hero .gemeinde-quicklink.is-icon-login a:hover::before,
.gemeinde-hero .gemeinde-quicklink.is-icon-login a:focus-visible::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f6e2c0'%3E%3Cpath d='M10 17l5-5-5-5v3H3v4h7v3zm9-14H5a2 2 0 0 0-2 2v4h2V5h14v14H5v-4H3v4a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
}