/*
Theme Name: Raus mit uns
Theme URI: https://raus-mit-uns.de
Author: helloblack.digital
Author URI: https://helloblack.digital
Description: Custom FSE block theme for the raus-mit-uns.de family & travel blog. Gutenberg-based, design tokens in theme.json.
Version: 0.1.1
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: raus-mit-uns
*/

/*
 * Block themes keep most styling in theme.json.
 * Use this file only for rules that theme.json cannot express.
 */

/* Category terms render as small lime tags; darker lime on hover.
   Flex + gap so wrapped rows keep the same spacing horizontally and vertically. */
.wp-block-post-terms {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: 12px;
	gap: 0.6em;
	margin-bottom: 1rem;
}
.wp-block-post-terms a {
	display: inline-block;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
	padding: 0.3em 0.7em;
	margin: 0;
	border-radius: 0;
	transition: background-color 0.2s ease;
}
.wp-block-post-terms a:hover,
.wp-block-tag-cloud a:hover {
	background-color: #b0b81c;
}
.wp-block-tag-cloud a {
	transition: background-color 0.2s ease;
}
.wp-block-post-terms .wp-block-post-terms__separator {
	display: none;
}
/* "Schlagwörter" prefix: same chip shape as the tags, but dark bg + white text
   (and not clickable, since it's a span). */
.wp-block-post-terms__prefix {
	display: inline-block;
	background-color: var(--wp--preset--color--contrast);
	color: #ffffff;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
	padding: 0.3em 0.7em;
	border-radius: 0;
}

/* Tag-cloud links as lime tags (Taglinks section).
   gap drives both axes; core's per-link margin is removed so vertical = horizontal. */
.wp-block-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.875rem;
}
.wp-block-tag-cloud a {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-size: 18px !important;
	font-weight: 500;
	text-decoration: none;
	padding: 0.35em 0.85em;
	margin: 0;
	border-radius: 0;
}

/* Post date (teasers): 12px, #686262. */
.wp-block-post-date {
	font-size: 12px !important;
	line-height: 150%;
	color: #686262 !important;
}

/* Section heading ("Aktuelle Beiträge"). */
.wp-block-heading.has-xx-large-font-size {
	font-size: 28px !important;
	font-weight: 600;
	line-height: 125%;
}

/* First big teaser (featured-row): title + excerpt — kept larger to stand out. */
.wp-block-post-title.has-x-large-font-size {
	font-size: 30px !important;
	font-weight: 600;
	line-height: 125%;
	color: #0d0d0d !important;
}

/* Grid teaser title. */
.wp-block-post-title.has-large-font-size {
	font-size: 22px !important;
	font-weight: 600;
	line-height: 135%;
	color: #0d0d0d !important;
}
.wp-block-post-excerpt.has-medium-font-size,
.wp-block-post-excerpt.has-medium-font-size p {
	font-size: 16px !important;
	font-weight: 400;
	line-height: 150%;
	color: #0d0d0d !important;
}

/* Grid teaser excerpt. */
.wp-block-post-excerpt.has-small-font-size,
.wp-block-post-excerpt.has-small-font-size p {
	font-size: 14px !important;
	font-weight: 400;
	line-height: 150%;
}

/* Trim teaser excerpts to a fixed number of lines (master 4, grid 3). */
.wp-block-post-excerpt p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wp-block-post-excerpt.has-medium-font-size p {
	-webkit-line-clamp: 4;
	line-clamp: 4;
}
.wp-block-post-excerpt.has-small-font-size p {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* "Edo" brush font (from the RAUS MIT UNS wordmark) — used only for the badge
   text, so it lazy-loads only where a badge appears. Freeware (Vic Fieger). */
@font-face {
	font-family: "Edo";
	src: url("assets/fonts/edo-regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Badge ("Tipp des Monats" etc.): round lime stamp on the featured image. */
.wp-block-post-featured-image {
	position: relative;
}
/* Let the badge poke out beyond the image's top edge. No margin on the grid
   image itself, so all teaser images stay aligned on one line — the badge
   overflows upward into the gap above the card. (The master/single variant
   below adds its own margin, where there are no neighbours to misalign.) */
.wp-block-post-featured-image:has(.rmu-badge) {
	overflow: visible;
}
.rmu-badge {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-family: "Edo", sans-serif;
	font-weight: 400;
	line-height: 1.1;
	box-sizing: border-box;
	/* Grid teasers: pokes out the top-right corner (like the large variant),
	   ~13% smaller. */
	width: 104px;
	height: 104px;
	top: -14px;
	right: 16px;
	left: auto;
	font-size: 22px;
	padding: 0 10px;
}
/* Master teaser (2-col featured row) + single post image: 120px, pokes out the
   top by 20px and pushes the teaser down by the same amount. */
.wp-block-query.alignwide .wp-block-column .rmu-badge,
body.single .wp-block-post-content .rmu-badge {
	width: 120px;
	height: 120px;
	font-size: 26px;
	top: -20px;
	right: 24px;
	padding: 0 12px;
}
.wp-block-query.alignwide .wp-block-column .wp-block-post-featured-image:has(.rmu-badge),
body.single .wp-block-post-content .wp-block-post-featured-image:has(.rmu-badge) {
	margin-top: 20px;
}
/* Phone + tablet (≤900px): smaller badge stamps. */
@media (max-width: 900px) {
	.rmu-badge {
		width: 78px;
		height: 78px;
		font-size: 14px;
		top: -12px;
		right: 12px;
		padding: 0 8px;
	}
	.wp-block-query.alignwide .wp-block-column .rmu-badge,
	body.single .wp-block-post-content .rmu-badge {
		width: 88px;
		height: 88px;
		font-size: 16px;
		top: -16px;
		right: 16px;
		padding: 0 10px;
	}
	.wp-block-query.alignwide .wp-block-column .wp-block-post-featured-image:has(.rmu-badge),
	body.single .wp-block-post-content .wp-block-post-featured-image:has(.rmu-badge) {
		margin-top: 16px;
	}
}

/* Legacy content (GutenBee): recolour the old light-blue rating boxes
   (Daumen hoch/runter) to the brand light-green. The colour is an inline
   style on the old blocks, so we target it by value — no content edits. */
[style*="#cdf1ff"] {
	background-color: #dce8e5 !important;
}

/* Smoother enhanced pagination: ease the scroll + fade new cards in. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
	@keyframes rmu-card-in {
		from {
			opacity: 0;
			transform: translateY(8px);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}
	.wp-block-post-template.is-layout-grid > li {
		animation: rmu-card-in 0.35s ease both;
	}
}

/* Pagination: round buttons (light grey, current = lime). */
.wp-block-query-pagination {
	gap: 0.5em;
	align-items: center;
	margin-top: 64px !important;
	margin-bottom: 24px !important;
}
.wp-block-query-pagination a,
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers:not(.dots) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25em;
	height: 2.25em;
	border-radius: 999px;
	background-color: #efefef;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-weight: 600;
	line-height: 1;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.wp-block-query-pagination a:hover,
.wp-block-query-pagination .wp-block-query-pagination-numbers a.page-numbers:not(.dots):hover {
	background-color: var(--wp--preset--color--accent);
}
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers.current {
	background-color: var(--wp--preset--color--accent);
}
/* Center the arrow glyph inside the round button (core adds a side margin). */
.wp-block-query-pagination-previous-arrow,
.wp-block-query-pagination-next-arrow {
	margin: 0 !important;
}
/* The "…" gap indicator stays plain, no circle. */
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers.dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5em;
	color: var(--wp--preset--color--neutral-500);
}
.wp-block-query-pagination-numbers {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

/* Top-level nav: lime highlight bar fades in on hover/active (like the hero). */
.wp-block-navigation__container > .wp-block-navigation-item > a.wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
}
.wp-block-navigation__container > .wp-block-navigation-item > a.wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(75% + 2px);
	transform: translateY(-50%);
	height: 8px;
	background-color: var(--wp--preset--color--accent);
	opacity: 0;
	transition: opacity 0.25s ease;
	z-index: -1;
}
.wp-block-navigation__container > .wp-block-navigation-item > a.wp-block-navigation-item__content:hover::after,
.wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > a.wp-block-navigation-item__content::after,
.wp-block-navigation__container > .wp-block-navigation-item.current-menu-ancestor > a.wp-block-navigation-item__content::after,
.wp-block-navigation__container > .wp-block-navigation-item > a.wp-block-navigation-item__content[aria-current]::after {
	opacity: 1;
}

/* Submenu (pull-down) box: on-brand, sharp corners. Detached a touch from the
   parent item with a transparent hover-bridge so the menu doesn't close while
   the cursor crosses the gap. */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: #ffffff;
	border: 1px solid #e8eae8;
	border-radius: 0;
	padding-block: 0.5rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	margin-top: 12px;
}
/* Breite folgt dem längsten Eintrag statt einer festen Zahl – Katjas Labels
   sind Sätze („auf der Schwäbischen Alb"), keine Stichworte, und brachen sonst
   um. Der Selektor MUSS `.has-child` enthalten: Core setzt dort min-width:200px
   mit drei Klassen und schlägt sonst jede kürzere Regel.
   max-width ist die Notbremse für künftig lange Einträge. */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	width: max-content;
	min-width: 260px;
	max-width: 340px;
}
/* Einzeiler erzwingen – gleiche Spezifitäts-Falle wie oben. */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
	white-space: nowrap;
}
.wp-block-navigation .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 0;
	right: 0;
	height: 12px;
}

/* Submenu items: lime row highlight on hover/active (dark text, high contrast). */
.wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
	padding: 0.45rem 1.25rem;
	font-size: 14px;
	color: var(--wp--preset--color--neutral-600);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > a.wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content[aria-current] {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}
.wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > a.wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content[aria-current] {
	font-weight: 600;
}

/* Footer logo (SVG). */
.rmu-footer-logo img {
	width: 180px;
	height: auto;
}
/* Footer links: no underline by default, underline on hover (reversed). */
footer a {
	text-decoration: none;
}
footer a:hover {
	text-decoration: underline;
}
/* Footer menu (Navigation block) — centered, small, with pipe separators to
   keep the previous "Kontakt | Impressum | Datenschutz" look. Editable via
   the Site Editor (Footer menu). */
.rmu-footer-nav .wp-block-navigation__container {
	align-items: center;
	gap: 0;
}
.rmu-footer-nav .wp-block-navigation-item {
	font-size: 0.875rem;
}
.rmu-footer-nav .wp-block-navigation-item:not(:last-child)::after {
	content: "|";
	margin: 0 1.25rem;
	color: var(--wp--preset--color--neutral-500);
}

/* Compact sticky nav: a fixed overlay (so the page never shifts) that slides in
   once the full header has scrolled away. ~76px tall, nav vertically centred. */
.rmu-sticky-nav {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 76px;
	gap: 24px;
	/* Full-width bar, but the nav + search align to the 1200px content grid:
	   nav at the left grid edge, search at the right. */
	padding: 0 max(var(--wp--preset--spacing--40), calc((100% - 1200px) / 2));
	background-color: var(--wp--preset--color--base);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
	transform: translateY(-100%);
	transition: transform 0.28s ease;
}
.rmu-sticky-nav.rmu-show {
	transform: translateY(0);
}
/* Neutralise the constrained-layout auto-margins (which core applies with
   !important) so flex can centre nav + icon as a group. */
.rmu-sticky-nav > * {
	margin: 0 !important;
}

/* Search: magnifier toggle in the nav + full-screen overlay. */
.rmu-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.rmu-search-toggle:hover,
.rmu-search-toggle:focus-visible {
	background-color: var(--wp--preset--color--accent);
	outline: none;
}
.rmu-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	padding: 1.5rem;
	background-color: rgba(255, 254, 253, 0.98);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}
.rmu-search-overlay.rmu-open {
	opacity: 1;
	visibility: visible;
}
.rmu-search-title {
	margin: 0;
	font-size: 30px;
	font-weight: 600;
	line-height: 125%;
	color: var(--wp--preset--color--contrast);
}
.rmu-search-form {
	display: flex;
	width: min(680px, 90vw);
}
.rmu-search-input {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast);
	border-right: 0;
	border-radius: 0;
	padding: 12px 16px;
}
.rmu-search-input:focus {
	outline: none;
	border-color: var(--wp--preset--color--contrast);
}
.rmu-search-input::placeholder {
	color: var(--wp--preset--color--neutral-500);
}
.rmu-search-submit {
	flex: 0 0 auto;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 0 24px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.rmu-search-submit:hover,
.rmu-search-submit:focus-visible {
	background-color: #b0b81c;
	outline: none;
}
.rmu-search-close {
	position: absolute;
	top: clamp(16px, 4vw, 40px);
	right: clamp(16px, 4vw, 40px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.rmu-search-close:hover {
	background-color: var(--wp--preset--color--accent);
}
.rmu-search-hint {
	margin: 0;
	font-size: 14px;
	color: var(--wp--preset--color--neutral-500);
}
/* Mobile (≤600px): tone down the overlay chrome (the field itself is already
   unified with the results-page search, so it needs no mobile override). */
@media (max-width: 599.98px) {
	.rmu-search-overlay {
		gap: 1rem;
		padding: 1.25rem;
	}
	.rmu-search-close {
		width: 40px;
		height: 40px;
	}
	.rmu-search-hint {
		font-size: 13px;
	}
}
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Header rule: full-width 1px line. */
.rmu-header-rule {
	border: 0;
	border-top: 1px solid #e8eae8;
	margin: 0;
	height: 0;
	opacity: 1;
}

/* ============================================================
   Compact navigation (≤900px — phone + tablet): compact header +
   slide-down sheet + accordion submenus. Overrides the WP default
   overlay (which fades in once, force-expands every submenu, and
   display:none-s on close) AND extends its 600px breakpoint to 900px.
   ============================================================ */
@media (max-width: 900px) {

	/* Compact header — logo + burger on one row, tight padding. The
	   header bar is a constrained group; flip it to a flex row and kill
	   the constrained auto-margins so the two children sit edge to edge. */
	.rmu-header-bar {
		display: flex !important;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
		gap: 12px;
		padding-top: 19px !important;
		padding-bottom: 19px !important;
	}
	.rmu-header-bar > .wp-block-site-logo {
		margin: 0 !important;
	}
	.rmu-header-bar .wp-block-site-logo img {
		width: 225px !important;
		height: auto !important;
	}
	/* Burger to the right, magnifier before it (swap the two icons). */
	.rmu-nav-row {
		margin: 0 !important;
		flex: 0 0 auto;
		flex-direction: row-reverse;
		gap: 8px;
	}

	/* Make the *template-part wrapper* sticky — .rmu-header's own parent is
	   only as tall as the header, so stickying it gives no scroll room. The
	   wrapper's parent is the tall page body, so it sticks correctly. */
	header.wp-block-template-part:has(> .rmu-header) {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		z-index: 200;
		background-color: var(--wp--preset--color--base);
	}
	/* Opaque header masks the menu sheet, which slides out from behind it. */
	.rmu-header {
		position: relative;
		background-color: var(--wp--preset--color--base);
	}
	.rmu-sticky-nav {
		display: none !important;
	}

	/* Clean 3-bar burger that morphs into an X when the sheet is open.
	   display !important: core hides the burger at ≥600px — keep it up to 900. */
	.rmu-nav-row .wp-block-navigation__responsive-container-open {
		display: block !important;
		position: relative;
		width: 32px;
		height: 24px;
		padding: 0;
		background-color: transparent;
		background-image: linear-gradient(currentColor, currentColor);
		background-size: 26px 2px;
		background-position: center;
		background-repeat: no-repeat;
		color: var(--wp--preset--color--contrast);
		transition: background-size 0.3s ease;
	}
	.rmu-nav-row .wp-block-navigation__responsive-container-open svg {
		display: none;
	}
	.rmu-nav-row .wp-block-navigation__responsive-container-open::before,
	.rmu-nav-row .wp-block-navigation__responsive-container-open::after {
		content: "";
		position: absolute;
		left: 3px;
		right: 3px;
		height: 2px;
		background-color: currentColor;
		transition: top 0.3s ease, transform 0.3s ease;
	}
	.rmu-nav-row .wp-block-navigation__responsive-container-open::before {
		top: 2px;
	}
	.rmu-nav-row .wp-block-navigation__responsive-container-open::after {
		top: 20px;
	}
	.rmu-nav-row .wp-block-navigation__responsive-container-open[aria-expanded="true"] {
		background-size: 0 2px;
	}
	.rmu-nav-row .wp-block-navigation__responsive-container-open[aria-expanded="true"]::before {
		top: 11px;
		transform: rotate(45deg);
	}
	.rmu-nav-row .wp-block-navigation__responsive-container-open[aria-expanded="true"]::after {
		top: 11px;
		transform: rotate(-45deg);
	}

	/* Slide-down sheet — keep the container in the DOM (core would
	   display:none it) so both open and close animate. Anchored to the
	   top edge, sized to its content, slides down like a header drawer. */
	.wp-block-navigation__responsive-container {
		display: flex !important;
		flex-direction: column;
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		bottom: auto;
		max-height: 100dvh;
		overflow-y: auto;
		/* Top pads past the header (its height) plus breathing room above the
		   nav; matching room below. */
		padding: calc(var(--rmu-mobile-nav-top, 92px) + 22px) 18px 34px !important;
		background-color: var(--wp--preset--color--base);
		/* Grey frame like the desktop dropdown. */
		border: 1px solid #e8eae8;
		box-shadow: 0 14px 22px rgba(0, 0, 0, 0.1);
		/* Pure transform slide — no opacity/visibility fade. The sheet slides
		   up behind the opaque header (z 200) and off the top; z-index 100
		   keeps it above page content but below the header. */
		transform: translateY(-100%);
		pointer-events: none;
		transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		animation: none !important;
		/* !important: core sets z-index:100000 on .is-menu-open, which would
		   lift the sheet above the header — we need it below (header is 200). */
		z-index: 100 !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open {
		transform: translateY(0);
		pointer-events: auto;
	}
	/* Dialog wrappers must fill the sheet width; strip core's padding/margin
	   (it adds a ~2em block-gap on top that pushes the first item down). */
	.wp-block-navigation__responsive-close,
	.wp-block-navigation__responsive-dialog,
	.wp-block-navigation__responsive-container-content {
		width: 100%;
		margin: 0 !important;
		padding: 0 !important;
	}
	/* We close via the burger (which morphs to an X), so hide core's X. */
	.wp-block-navigation__responsive-container-close {
		display: none !important;
	}

	/* Stacked top-level items: full-width, tight uniform spacing, no dividers.
	   Kill the nav block's 40px blockGap (far too large in a vertical list). */
	.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content,
	.wp-block-navigation__responsive-container .wp-block-navigation__container {
		width: 100%;
		/* Force left-aligned, full-width items in BOTH states. Core sets
		   align-items:center while open, so the list showed centered when open
		   and snapped left on close — this keeps it left throughout. */
		align-items: stretch !important;
		justify-content: flex-start !important;
		gap: 0 !important;
	}
	.wp-block-navigation__responsive-container .wp-block-navigation-item {
		width: 100%;
	}
	/* Core forces the open overlay's items to flex + centered (the nav is
	   items-justified-center). Override in the open state with matching
	   specificity so items are block, full-width, left — same as closed, so
	   the list no longer jumps from centered to left while closing. */
	/* NOT gated on .is-menu-open — the layout must be identical open and closed,
	   otherwise the list reflows (centered → left) the instant the sheet starts
	   to slide shut. !important beats core's open-overlay centering. */
	.wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item {
		display: block !important;
		width: 100% !important;
		position: relative;
		text-align: center !important;
	}
	.wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: block !important;
		text-align: center !important;
	}
	/* Kill the desktop top-level highlight bar (lime ::after); on a full-width
	   mobile row it rendered as a full-width bar. */
	.wp-block-navigation__responsive-container .wp-block-navigation-item__content::after {
		content: none !important;
	}
	/* Active level-1 item: lime highlighter behind the label only (text-width,
	   centred). A background-gradient works on the white sheet, unlike the
	   desktop z-index:-1 bar which would hide behind it. */
	.wp-block-navigation__responsive-container .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content .wp-block-navigation-item__label,
	.wp-block-navigation__responsive-container .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content .wp-block-navigation-item__label,
	.wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current] .wp-block-navigation-item__label {
		background-image: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent));
		background-repeat: no-repeat;
		background-position: 0 88%;
		background-size: 100% 7px;
	}
	.wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		font-size: 15px;
		padding: 11px 0;
		text-align: center;
	}

	/* Parent items: label + chevron share the top line, the submenu list
	   drops to its own full-width row below — so the accordion reads clearly. */
	.wp-block-navigation__responsive-container .wp-block-navigation-item.wp-block-navigation-submenu {
		display: block;
		position: relative;
	}
	.wp-block-navigation__responsive-container .wp-block-navigation-submenu > .wp-block-navigation-item__content {
		padding-left: 38px;
		padding-right: 38px;
	}
	.wp-block-navigation__responsive-container .wp-block-navigation-submenu > .wp-block-navigation-submenu__toggle {
		position: absolute;
		top: 0;
		right: 0;
		width: 38px;
		/* Match the label row height (font 15 + 2×11 padding) so the chevron
		   centres vertically on the label text. */
		height: 46px;
		z-index: 2;
	}
	/* Neutralise the desktop dropdown styling (gap/border/shadow/width) that
	   would otherwise leak into the flat mobile accordion.
	   `.has-child` MUSS mit rein: die Desktop-Regel weiter oben nutzt denselben
	   Selektor mit .has-child (0,3,0) und schlüge diese sonst — Media Queries
	   erhöhen die Spezifität nicht. */
	.wp-block-navigation__responsive-container .has-child .wp-block-navigation__submenu-container {
		flex-basis: 100%;
		width: 100%;
		min-width: 0;
		max-width: none;
		margin: 0;
		border: 0;
		box-shadow: none;
		background: transparent;
		padding-block: 0;
	}
	.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container::before {
		content: none;
	}

	/* Accordion — collapse every submenu by default (core force-opens
	   them at 0,3,0; these rules win at 0,4,0), reveal only the one whose
	   toggle reports aria-expanded=true. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		transition: max-height 0.42s ease, opacity 0.3s ease, visibility 0.42s;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="false"] ~ .wp-block-navigation__submenu-container {
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		padding-top: 0;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		max-height: 600px;
		opacity: 1;
		visibility: visible;
		/* Framed box like the desktop dropdown: grey border, slightly inset,
		   small gap to the parent, more room below before the next item. */
		margin: 4px 6px 14px;
		padding: 6px 0;
		border: 1px solid #e8eae8;
		background-color: #fff;
	}
	.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: 14px;
		padding: 7px 0;
		text-align: center;
		color: var(--wp--preset--color--neutral-600);
	}

	/* Chevron — small, flat, right-aligned; rotates when its submenu opens.
	   Core hides this toggle in the default overlay (everything is expanded
	   there); we force it back so it can drive the accordion. */
	.wp-block-navigation__responsive-container .wp-block-navigation-submenu__toggle {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		margin: 0;
		padding: 0;
		background-color: transparent;
		color: var(--wp--preset--color--neutral-500);
	}
	.wp-block-navigation__responsive-container .wp-block-navigation-submenu__toggle svg {
		width: 16px;
		height: 16px;
		transition: transform 0.3s ease;
	}
	.wp-block-navigation__responsive-container .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
		color: var(--wp--preset--color--contrast);
	}
	.wp-block-navigation__responsive-container .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}
}

/* Tablet (601–900px): the compact header gets a bit more presence than on the
   phone — larger logo and more vertical padding. */
@media (min-width: 601px) and (max-width: 900px) {
	.rmu-header-bar {
		padding-top: 22px !important;
		padding-bottom: 22px !important;
	}
	.rmu-header-bar .wp-block-site-logo img {
		width: 290px !important;
	}
	/* Roomier menu items on tablet. */
	.wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		font-size: 18px;
		padding: 13px 0;
	}
	.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
		font-size: 16px;
		padding: 9px 0;
	}
	/* Keep the chevron centred on the taller row. */
	.wp-block-navigation__responsive-container .wp-block-navigation-submenu > .wp-block-navigation-submenu__toggle {
		height: 52px;
	}

	/* Hero is a touch too tall here — flatten the ratio.
	   Teil der Höhen-Progression: 46vh (>900) → 34vh (601–900) → 38vh (≤600).
	   Die vh-Werte laufen bewusst nicht monoton: entscheidend ist die sichtbare
	   Proportion, und die wird zum schmalen Display hin sonst immer hochkantiger.
	   Der 240px-Boden fängt flache Querformate ab (z.B. 900×600), wo 34vh den
	   Hero sonst auf einen Briefkastenstreifen zusammendrücken würde. */
	.rmu-hero.wp-block-cover {
		min-height: max(34vh, 240px) !important;
	}

	/* Post grids: 3 columns are too tight here → 2 columns. */
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* Ads: the Hochformat column is full-width here, so the 373×510 creative
	   would upscale hugely. Cap the slot to the creative's native width and
	   centre it; the label stays at its left edge. (Querformat stays full
	   width — it only gets shorter, which is fine.) */
	.rmu-ad-slot--hochformat {
		width: 373px;
		max-width: 100%;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.rmu-ad-slot--hochformat .rmu-ad-label {
		margin: 0 !important;
	}
	.rmu-ad-slot .rmu-ad img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
}

/* Ads: in-house banner system (rmu/ad block). The creative fills the slot;
   a small "Anzeige" chip is shown only for paid (sponsored) banners. */
.rmu-ad-slot {
	margin: 0;
}
.rmu-ad {
	border: 1px solid #eaecea;
}
.rmu-ad img {
	display: block;
	width: 100%;
	height: auto;
}
.rmu-ad-label {
	display: block;
	width: fit-content;
	max-width: 100%;
	background-color: #eaecea;
	color: var(--wp--preset--color--contrast);
	font-size: 12px !important;
	font-weight: 400;
	line-height: 150%;
	padding: 2px 5px;
	margin: 0 !important;
	text-transform: uppercase;
	letter-spacing: normal;
}
/* Neutral fallback shown when no banner is booked for the slot. */
.rmu-ad--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	border: 1px solid #eaecea;
	background: #f4f5f4;
	color: var(--wp--preset--color--neutral-500);
	font-size: 14px;
}
/* Responsive creative: when a banner has a separate mobile image, swap to it
   (centred) below 600px so wide formats don't shrink into an unreadable strip.
   Selectors include `img` to out-specify the base `.rmu-ad img` rule. */
.rmu-ad img.rmu-ad__mobile {
	display: none;
}
@media (max-width: 600px) {
	/* All ad slots become a centred 300px column on mobile — uniform footprint,
	   "Anzeige" label flush left, and the (tall) desktop creatives no longer
	   blow up to full width. Slots with a dedicated mobile creative swap to it. */
	.rmu-ad-slot {
		width: 300px;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	.rmu-ad-slot .rmu-ad-label {
		margin: 0 !important;
	}
	.rmu-ad-slot .rmu-ad {
		width: 100%;
		margin: 0;
	}
	.rmu-ad-slot .rmu-ad img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	.rmu-ad-slot--has-mobile .rmu-ad img.rmu-ad__desktop {
		display: none;
	}
	.rmu-ad-slot--has-mobile .rmu-ad img.rmu-ad__mobile {
		display: block;
	}
}

/* Section rule: content-width 1px divider between home rows. */
.rmu-section-rule {
	border: 0;
	border-top: 1px solid #e8eae8;
	margin: 0;
	height: 0;
	opacity: 1;
}

/* Single post sidebar: sticky on desktop (below the compact nav). */
@media (min-width: 782px) {
	.rmu-sidebar {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 92px);
		align-self: flex-start;
	}
}

/* Sidebar — table of contents. */
.rmu-toc {
	border: 1px solid #e8eae8;
	padding: 1rem 1.25rem 1.25rem;
	margin-bottom: var(--wp--preset--spacing--50);
}
.rmu-toc[hidden] {
	display: none;
}
.rmu-toc__title {
	margin: 0 0 0.6rem;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral-500);
}
.rmu-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.rmu-toc__list li + li {
	margin-top: 0.5rem;
}
.rmu-toc__list a {
	display: block;
	font-size: 14px;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	border-left: 2px solid transparent;
	padding-left: 0.75rem;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.rmu-toc__list a:hover {
	color: #686262;
	border-left-color: var(--wp--preset--color--accent);
}

/* Sidebar — share box (DSGVO-friendly: plain links, no third-party scripts). */
.rmu-share {
	margin-top: var(--wp--preset--spacing--40);
	border: 1px solid #e8eae8;
	padding: 1rem 1.25rem 1.25rem;
}
.rmu-share__title {
	margin: 0 0 0.75rem;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral-500);
}
.rmu-share__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.rmu-share__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #e8eae8;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.rmu-share__btn:hover {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}
.rmu-share__btn svg {
	width: 18px;
	height: 18px;
}
/* Hover tooltip (label) above each button. */
.rmu-share__btn::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	background-color: var(--wp--preset--color--contrast);
	color: #ffffff;
	font-size: 12px;
	line-height: 1;
	padding: 5px 8px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
	z-index: 5;
}
.rmu-share__btn:hover::after,
.rmu-share__btn:focus-visible::after {
	opacity: 1;
}
.rmu-share__copy.is-copied {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

/* Copy confirmation toast. */
.rmu-toast {
	position: fixed;
	left: 50%;
	bottom: 32px;
	transform: translateX(-50%) translateY(10px);
	background-color: var(--wp--preset--color--contrast);
	color: #ffffff;
	font-size: 14px;
	line-height: 1.3;
	padding: 11px 20px;
	z-index: 3000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.rmu-toast.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}


/* Hero stage box: 800px on desktop. */
.rmu-hero-box {
	max-width: 800px;
}

/* Hero stage: bold key phrases get an 8px lime highlight bar (Home V2-3). */
.rmu-hero-headline strong {
	font-weight: 800;
	background-image: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent));
	background-repeat: no-repeat;
	background-size: 100% 8px;
	background-position: 0 88%;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Mobile hero (≤600px): dieselbe Ansicht wie ab 600px – Bild mit der weißen
   Claim-Karte unten links darauf. Bewusst KEINE eigene Mobil-Struktur: der
   Cover, das Bild und die Karte kommen unverändert aus dem größeren
   Breakpoint, hier werden nur Schriftgröße und Innenabstände auf kleine
   Displays heruntergezogen. */
@media (max-width: 599.98px) {
	.rmu-hero.wp-block-cover {
		/* Ohne diese Regel griffe hier wieder der Inline-Wert 46vh aus dem
		   Pattern – der Hero wäre auf dem Handy höher als auf dem Tablet.
		   Der 300px-Boden sichert kurze Displays (z.B. 360×640): dort ergäbe
		   42vh nur 269px, und die Claim-Karte würde den Hero zu stark füllen. */
		min-height: max(42vh, 300px) !important;
		padding: 16px !important;
		/* Randlos bis an die Bildschirmkanten: der Cover ist alignwide, wir heben
		   dafür den Root-Gutter per negativem Margin auf – dieselbe Mechanik, die
		   Core für alignfull nutzt. Nur hier (≤600px), weil der Claim erst auf
		   Handy-Breiten von der zusätzlichen Textbreite profitiert (eine Zeile
		   weniger); auf Tablets bleibt die Karte ohnehin bei 2 Zeilen. */
		width: auto !important;
		max-width: none !important;
		margin-left: calc(var(--wp--style--root--padding-left, 24px) * -1) !important;
		margin-right: calc(var(--wp--style--root--padding-right, 24px) * -1) !important;
	}
	.rmu-hero .rmu-hero-box {
		max-width: none;
		padding: 20px !important;
	}
	.rmu-hero .rmu-hero-headline {
		font-size: 19px !important;
		line-height: 1.3 !important;
	}
}

/* Mobile (≤600px): trim the big headlines ~2px (body copy, dates, small
   labels untouched). */
@media (max-width: 599.98px) {
	.wp-block-heading.has-xx-large-font-size {
		font-size: 26px !important;
	}
	.wp-block-post-title.has-x-large-font-size {
		font-size: 24px !important;
	}
	.wp-block-post-title.has-large-font-size {
		font-size: 20px !important;
	}
	.rmu-search-title {
		font-size: 24px !important;
	}
	.rmu-about-heading {
		font-size: 28px !important;
	}
	.wp-block-query-title {
		font-size: 28px !important;
	}
	.rmu-cta-heading {
		font-size: 34px !important;
	}
	.rmu-archive-faq__title {
		font-size: 24px !important;
	}
	body.single .wp-block-post-title.has-xx-large-font-size {
		font-size: 36px !important;
	}
	body.single .wp-block-post-content h2 {
		font-size: 26px;
	}
	body.single .wp-block-post-content h3 {
		font-size: 20px;
	}
	.rmu-page .wp-block-post-content h2 {
		font-size: 1.375rem;
	}
}

/* "Über mich" section -------------------------------------------------- */

/* Full-bleed background: #D8E022 at 10% (texture layer follows once provided). */
/* The background image is set in Gutenberg (Group → Hintergrundbild), so it stays
   editor-manageable. Groups have no opacity control, so these two overlays knock
   that image back to ~10% and lay #D8E022 at 10% on top. */
.rmu-about {
	position: relative;
	isolation: isolate;
}
.rmu-about > * {
	position: relative;
	z-index: 1;
}
/* Veil over the (opaque) group image -> image shows through at ~10%. */
.rmu-about::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: rgba(255, 254, 253, 0.9);
	pointer-events: none;
}
/* Lime #D8E022 at 10%. */
.rmu-about::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: rgba(216, 224, 34, 0.1);
	pointer-events: none;
}

/* Heading + body copy. */
.rmu-about-heading {
	font-size: 30px;
	font-weight: 600;
	line-height: 125%;
	color: var(--wp--preset--color--contrast);
}
.rmu-about-text {
	font-size: 16px;
	font-weight: 400;
	line-height: 150%;
	color: var(--wp--preset--color--contrast);
}
.rmu-about-text strong {
	font-weight: 700;
}

/* Handwritten signature image. */
.rmu-about-signature {
	margin-top: var(--wp--preset--spacing--40);
}
.rmu-about-signature img {
	width: 160px;
	height: auto;
}

/* Photo column holds the round CTA in its bottom-right corner. */
.rmu-about-media {
	position: relative;
}
.rmu-about-cta.wp-block-buttons {
	position: absolute;
	right: -32px;
	bottom: -36px;
	margin: 0;
	z-index: 2;
}
.rmu-about-cta .wp-block-button__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 150px;
	height: 150px;
	padding: 0 18px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	transition: background-color 0.2s ease;
}
.rmu-about-cta .wp-block-button__link::after {
	content: "↗";
	font-size: 28px;
	line-height: 1;
	margin-top: 4px;
}
.rmu-about-cta .wp-block-button__link:hover {
	background-color: #b0b81c;
}
/* On stacked (mobile) layout the round CTA must not poke past the screen edge —
   pull it inside the photo's bottom-right corner instead of overhanging it. */
@media (max-width: 781px) {
	.rmu-about-cta.wp-block-buttons {
		right: 12px;
		bottom: -28px;
	}
	/* Stacked layout: drop the text column clear of the photo and the round
	   CTA that overhangs the photo's bottom edge. */
	.rmu-about-media + .wp-block-column {
		margin-top: 52px;
	}
	/* Cap the photo to a portrait-friendly width (centred) so it isn't cropped
	   to a wide landscape strip when the column goes full width. */
	.rmu-about-media {
		max-width: 440px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}
/* Mobile (≤600px): smaller tag pills + smaller round "Über mich" CTA. */
@media (max-width: 599.98px) {
	.wp-block-tag-cloud {
		gap: 0.6rem;
	}
	.wp-block-tag-cloud a {
		font-size: 15px !important;
	}
	.rmu-about-cta .wp-block-button__link {
		width: 120px;
		height: 120px;
		font-size: 15px;
		padding: 0 14px;
	}
	.rmu-about-cta .wp-block-button__link::after {
		font-size: 22px;
	}
}

/* Single post: typographic hierarchy (scoped to .single so it never leaks
   onto the home page, which is itself wrapped in .wp-block-post-content). */
body.single .wp-block-post-title.has-xx-large-font-size {
	font-size: 38px !important;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
}
body.single .wp-block-post-content h2,
body.single .wp-block-post-content h3,
body.single .wp-block-post-content h4 {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}
body.single .wp-block-post-content h2 {
	font-size: 28px;
	line-height: 1.25;
	margin-top: 2.25rem;
	margin-bottom: 0.6rem;
}
body.single .wp-block-post-content h3 {
	font-size: 22px;
	line-height: 1.3;
	margin-top: 1.75rem;
	margin-bottom: 0.5rem;
}
body.single .wp-block-post-content h4 {
	font-size: 18px;
	line-height: 1.35;
	margin-top: 1.5rem;
	margin-bottom: 0.4rem;
}
body.single .wp-block-post-content p {
	font-size: 16px;
	line-height: 1.7;
}
/* Phone + tablet (≤900px): smaller single-post headings. Placed AFTER the base
   single typography above so it wins by source order. */
@media (max-width: 900px) {
	body.single .wp-block-post-title.has-xx-large-font-size {
		font-size: 28px !important;
	}
	body.single .wp-block-post-content h2 {
		font-size: 20px;
	}
	body.single .wp-block-post-content h3 {
		font-size: 17px;
	}
	body.single .wp-block-post-content h4 {
		font-size: 16px;
	}
}
/* Phone + tablet (≤900px): the stacked sidebar would dump the TOC + share
   below the comments. Hide the sidebar column (kills the now-useless TOC); the
   share widget is relocated under the article text by JS. */
@media (max-width: 900px) {
	body.single .rmu-sidebar {
		display: none !important;
	}
	body.single .wp-block-post-content + .rmu-share {
		margin-top: var(--wp--preset--spacing--40);
	}
	/* Author box: stack (avatar over text), not side by side. */
	.rmu-author-box {
		flex-direction: column;
		text-align: center;
	}
	.rmu-author-box .wp-block-post-author-biography {
		margin-left: auto;
		margin-right: auto;
	}
}

/* Author box (E-E-A-T / trust signal): same background treatment as the home
   "Über mich" section — texture image at ~10% over #D8E022 at 10%. */
.rmu-author-box {
	position: relative;
	isolation: isolate;
	align-items: center;
	background-image: url("/wp-content/uploads/2026/06/bg.jpg");
	background-size: cover;
	background-position: center;
}
.rmu-author-box > * {
	position: relative;
	z-index: 1;
}
.rmu-author-box::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: rgba(255, 254, 253, 0.9);
	pointer-events: none;
}
.rmu-author-box::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: rgba(216, 224, 34, 0.1);
	pointer-events: none;
}
.rmu-author-box .wp-block-avatar {
	flex: 0 0 auto;
}
.rmu-author-box .wp-block-avatar img {
	display: block;
	border-radius: 50%;
}
.rmu-author-box > .wp-block-group {
	flex: 1 1 auto;
}
.rmu-author-eyebrow {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	color: var(--wp--preset--color--neutral-500);
}
.rmu-author-name {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
}
.rmu-author-box .wp-block-post-author-biography {
	margin: 0.75rem 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--neutral-600);
}

/* Single post: section dividers between article / discussion / more-reading. */
.rmu-comments,
.rmu-crosssell {
	border-top: 1px solid #e8eae8;
	padding-top: var(--wp--preset--spacing--50);
}

/* Comment count in the post meta — a quiet jump-link to the comments. */
a.rmu-comments-count {
	color: inherit;
	text-decoration: none;
}
a.rmu-comments-count:hover {
	text-decoration: underline;
}

/* Comments (compact list). */
.rmu-comments {
	scroll-margin-top: 90px;
}
.rmu-comments .wp-block-comments-title {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: 0.75rem;
}
.rmu-comment-meta .wp-block-comment-author-name,
.rmu-comment-meta .wp-block-comment-author-name a {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.rmu-comment-meta .wp-block-comment-date,
.rmu-comment-meta .wp-block-comment-date a {
	color: var(--wp--preset--color--neutral-500);
	text-decoration: none;
}
.rmu-comment-meta .wp-block-comment-date::before {
	content: "·";
	margin-right: 0.5em;
	color: var(--wp--preset--color--neutral-500);
}
.rmu-comment-meta {
	margin: 0;
	font-size: 14px;
	line-height: 1.3;
}
.rmu-comments .wp-block-comment-content {
	margin-top: 0.15rem;
	font-size: 15px;
	line-height: 1.5;
}
.rmu-comments .wp-block-comment-content p {
	margin: 0 0 0.4em;
}
.rmu-comments .wp-block-comment-template {
	margin: 0;
	padding: 0;
	list-style: none;
}
.rmu-comments .wp-block-comment-template > li {
	margin-bottom: 0.85rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid #e8eae8;
}
/* Nested replies: slim indent with a thread line, no divider. */
.rmu-comments .wp-block-comment-template .wp-block-comment-template {
	margin-top: 0.85rem;
	padding-left: 1rem;
	border-left: 2px solid #e8eae8;
	list-style: none;
}
.rmu-comments .wp-block-comment-template .wp-block-comment-template > li {
	margin-bottom: 0.75rem;
	padding-bottom: 0;
	border-bottom: 0;
}
/* Cap a long thread; JS adds --capped (fade + button) when it overflows. */
.rmu-comments:not(.rmu-comments--expanded) .wp-block-comment-template {
	max-height: 520px;
	overflow: hidden;
}
.rmu-comments--capped:not(.rmu-comments--expanded) .wp-block-comment-template {
	-webkit-mask-image: linear-gradient(#000 60%, transparent);
	mask-image: linear-gradient(#000 60%, transparent);
}
.rmu-comments-more {
	display: inline-block;
	margin-top: 1.25rem;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	padding: 9px 18px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.rmu-comments-more:hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* "Kommentar schreiben" trigger button. */
.rmu-comment-open {
	display: inline-block;
	margin-top: 1.25rem;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	padding: 9px 18px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.rmu-comment-open:hover {
	background-color: #b0b81c;
}

/* Comment form lightbox. */
.rmu-comment-modal {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background-color: rgba(13, 13, 13, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}
.rmu-comment-modal.rmu-open {
	opacity: 1;
	visibility: visible;
}
.rmu-comment-modal__card {
	position: relative;
	width: min(600px, 100%);
	max-height: 88vh;
	overflow-y: auto;
	background-color: var(--wp--preset--color--base);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}
.rmu-comment-modal__card .comment-reply-title {
	margin-top: 0;
	font-size: 22px;
}
.rmu-comment-close {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.rmu-comment-close:hover {
	background-color: var(--wp--preset--color--accent);
}
/* Comment form fields + submit on-brand. */
.rmu-comments .comment-form input[type="text"],
.rmu-comments .comment-form input[type="email"],
.rmu-comments .comment-form input[type="url"],
.rmu-comments .comment-form textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 16px;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	border: 1px solid #d9dbd9;
	border-radius: 0;
	padding: 12px 14px;
}
.rmu-comments .comment-form input:focus,
.rmu-comments .comment-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--contrast);
}
.rmu-comments .comment-form .form-submit .submit,
.rmu-comments .wp-block-post-comments-form .wp-element-button {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	padding: 9px 18px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
/* Comment form copy a touch smaller. */
.rmu-comments .comment-reply-title {
	font-size: 20px;
}
.rmu-comments .comment-form label {
	font-size: 14px;
}
.rmu-comments .comment-form .comment-notes,
.rmu-comments .comment-form .logged-in-as,
.rmu-comments .comment-form .form-allowed-tags {
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--neutral-600);
}
.rmu-comments .comment-form input[type="text"],
.rmu-comments .comment-form input[type="email"],
.rmu-comments .comment-form input[type="url"],
.rmu-comments .comment-form textarea {
	font-size: 15px;
}
.rmu-comments .comment-form .form-submit .submit:hover,
.rmu-comments .wp-block-post-comments-form .wp-element-button:hover {
	background-color: #b0b81c;
}
/* Honeypot field — visually + audibly hidden, but not display:none (bots skip those). */
.rmu-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.comment-form-consent {
	display: flex;
	gap: 0.5em;
	align-items: flex-start;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--neutral-600);
}
.comment-form-consent input {
	margin-top: 0.2em;
}

/* Post navigation (previous / next): small label line + compact title. */
.rmu-post-nav .wp-block-post-navigation-link {
	max-width: 48%;
}
.rmu-post-nav .post-navigation-link-next {
	text-align: right;
	margin-left: auto;
}
.rmu-post-nav .post-navigation-link-previous::before,
.rmu-post-nav .post-navigation-link-next::before {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral-500);
}
.rmu-post-nav .post-navigation-link-previous::before {
	content: "Vorheriger Beitrag";
}
.rmu-post-nav .post-navigation-link-next::before {
	content: "Nächster Beitrag";
}
.rmu-post-nav a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.rmu-post-nav a:hover {
	color: #686262;
}

/* Phone + tablet (≤900px): post-nav centred, comments + lightbox toned down.
   Placed AFTER the base comment/post-nav rules above so it wins by source
   order (earlier-placed mobile rules were being overridden). */
@media (max-width: 900px) {
	.rmu-post-nav {
		flex-direction: column;
		align-items: center;
	}
	.rmu-post-nav .wp-block-post-navigation-link {
		max-width: 100%;
		text-align: center;
	}
	.rmu-post-nav .post-navigation-link-next {
		text-align: center;
		margin-left: 0;
	}

	/* Comments: lighter heading + meta + body + buttons. */
	.rmu-comments .wp-block-comments-title {
		font-size: 17px;
	}
	.rmu-comment-meta {
		font-size: 13px;
	}
	.rmu-comments .wp-block-comment-content {
		font-size: 14px;
	}
	.rmu-comment-open,
	.rmu-comments-more {
		font-size: 13px;
		padding: 8px 15px;
		margin-top: 1rem;
	}

	/* Comment lightbox: smaller form. (Inputs stay 16px to avoid iOS zoom.) */
	.rmu-comment-modal {
		padding: 1rem;
	}
	.rmu-comment-modal__card {
		padding: clamp(1rem, 3vw, 1.5rem);
	}
	.rmu-comment-modal__card .comment-reply-title,
	.rmu-comments .comment-reply-title {
		font-size: 16px;
	}
	.rmu-comments .comment-form label {
		font-size: 13px;
	}
	.rmu-comments .comment-form input[type="text"],
	.rmu-comments .comment-form input[type="email"],
	.rmu-comments .comment-form input[type="url"],
	.rmu-comments .comment-form textarea {
		padding: 9px 11px;
	}
}

/* Search / archive page title. */
.wp-block-query-title {
	font-size: 30px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
}

/* Search form block — same look as the lightbox (bordered field + lime button). */
.wp-block-search {
	display: flex;
}
.wp-block-search .wp-block-search__input {
	flex: 0 1 480px;
	min-width: 0;
	margin: 0;
	border: 1px solid var(--wp--preset--color--contrast);
	border-right: 0;
	border-radius: 0;
	background-color: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: 16px;
	padding: 12px 16px;
}
.wp-block-search .wp-block-search__input:focus {
	outline: none;
}
.wp-block-search .wp-block-search__button {
	flex: 0 0 auto;
	margin: 0;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 0 24px;
	transition: background-color 0.2s ease;
}
.wp-block-search .wp-block-search__button:hover {
	background-color: #b0b81c;
}

/* Kontakt-Abbinder (CTA) — same background treatment as the home "Über mich". */
.rmu-cta {
	position: relative;
	isolation: isolate;
	text-align: center;
	background-image: url("/wp-content/uploads/2026/06/bg.jpg");
	background-size: cover;
	background-position: center;
}
/* On the home page the CTA is the last block inside the (constrained) post
   content and would otherwise butt directly against the social wall above it.
   The search page CTA sits outside <main> and already has its own spacing. */
.wp-block-post-content > .rmu-cta {
	margin-top: var(--wp--preset--spacing--60);
}
.rmu-cta > * {
	position: relative;
	z-index: 1;
}
.rmu-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: rgba(255, 254, 253, 0.9);
	pointer-events: none;
}
.rmu-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: rgba(216, 224, 34, 0.1);
	pointer-events: none;
}
.rmu-cta-heading {
	margin: 0;
	font-size: 36px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
}
.rmu-cta-text {
	margin-top: 1rem;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
}
.rmu-cta .wp-block-buttons {
	margin-top: 2rem;
}
.rmu-cta-btn .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	padding: 13px 30px;
	transition: background-color 0.2s ease;
}
.rmu-cta-btn .wp-block-button__link:hover {
	background-color: #b0b81c;
}

/* ---------------------------------------------------------------------------
   404 – "nicht gefunden" page. Centered, on-brand, with search + topic chips.
--------------------------------------------------------------------------- */
.rmu-404 {
	text-align: center;
}
.rmu-404-eyebrow {
	margin: 0 0 0.5rem;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral-500);
}
.rmu-404-title {
	margin: 0;
	font-size: clamp(2rem, 4vw, 2.75rem) !important;
	line-height: 1.15;
}
.rmu-404-text {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
	color: var(--wp--preset--color--neutral-600);
}
/* Search row: reuse the global lightbox-style search, just centered.
   Cap the form to a comfortable width and let the field fill it, so the
   field+button group sits centered instead of spanning the full column. */
.rmu-404 .wp-block-search {
	justify-content: center;
	max-width: 600px;
	margin-top: 0.5rem;
	margin-left: auto !important;
	margin-right: auto !important;
}
.rmu-404 .wp-block-search__input {
	flex: 1 1 auto;
}
/* "oder" divider between the search field and the home button — small caps
   with a thin rule on each side. */
.rmu-404-or {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	max-width: 320px;
	margin: 1.75rem auto !important;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral-500);
}
.rmu-404-or::before,
.rmu-404-or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(13, 13, 13, 0.15);
}

/* "Zur Startseite": secondary ghost button — square, dark outline, fills on
   hover. Deliberately not the lime pill so it reads as the quieter action
   next to the search and topic chips. */
.rmu-404-home .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	font-weight: 600;
	padding: 12px 28px;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.rmu-404-home .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Divider between the search/action block and the topic browse block. */
.rmu-404-sep.wp-block-separator {
	width: 100%;
	max-width: 72px;
	margin: 3rem auto;
	border: none;
	border-top: 1px solid rgba(13, 13, 13, 0.15);
	background: none;
	opacity: 1;
}

/* Topic chips: same lime square chips as the tag cloud. */
.rmu-404-chips-label {
	margin: 1rem 0 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral-500);
}
.rmu-404-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.875rem;
	margin-top: 0.75rem;
}
.rmu-404-chips a {
	display: inline-block;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-size: 18px;
	font-weight: 500;
	text-decoration: none;
	padding: 0.35em 0.85em;
	transition: background-color 0.2s ease;
}
.rmu-404-chips a:hover {
	background-color: #b0b81c;
}
/* Mobile (≤600px): smaller 404 chips (matches the tag pills). */
@media (max-width: 599.98px) {
	.rmu-404-chips {
		gap: 0.6rem;
	}
	.rmu-404-chips a {
		font-size: 15px;
	}
}

/* ---------------------------------------------------------------------------
   Archive SEO content (per-term intro / text / FAQ). Editable via the
   Kategorie / Schlagwort editor (ACF). Empty fields render nothing.
--------------------------------------------------------------------------- */
/* Archive header: small eyebrow ("Kategorie"/"Schlagwort") over a clean H1
   that holds only the term name (better for SEO than "Kategorie: …"). */
.rmu-archive-header {
	text-align: center;
}
.rmu-archive-eyebrow {
	margin: 0 0 0.5rem;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral-500);
}
.rmu-archive-title {
	margin: 0;
	font-size: clamp(2rem, 4vw, 2.5rem);
	font-weight: 600;
	line-height: 1.15;
}
/* Intro: centred lead under the header, clearly set off from the grid below. */
.rmu-archive-intro {
	max-width: 720px;
	margin-top: 1rem;
	margin-bottom: var(--wp--preset--spacing--60);
	text-align: center;
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--wp--preset--color--contrast);
}
.rmu-archive-intro p:last-child {
	margin-bottom: 0;
}

/* Bottom body text — centred readable column, text stays left-aligned. */
.rmu-archive-text {
	max-width: 760px;
	margin-top: var(--wp--preset--spacing--60);
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--wp--preset--color--contrast);
}

/* FAQ — centred section, set off with a top rule + centred heading. */
.rmu-archive-faq {
	max-width: 760px;
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid #e8eae8;
}
.rmu-archive-faq__title {
	text-align: center;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 1.5rem;
}
.rmu-archive-faq__item {
	border-bottom: 1px solid #e8eae8;
}
.rmu-archive-faq__q {
	position: relative;
	list-style: none;
	cursor: pointer;
	padding: 1.15rem 2.5rem 1.15rem 0;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}
/* Remove the native disclosure triangle (incl. Safari). */
.rmu-archive-faq__q::-webkit-details-marker {
	display: none;
}
/* Rotating chevron: points right when closed, down when open. */
.rmu-archive-faq__q::after {
	content: "";
	position: absolute;
	right: 4px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--wp--preset--color--neutral-500);
	border-bottom: 2px solid var(--wp--preset--color--neutral-500);
	transform: translateY(-60%) rotate(-45deg);
	transition: transform 0.25s ease;
}
.rmu-archive-faq__item[open] .rmu-archive-faq__q::after {
	transform: translateY(-50%) rotate(45deg);
}
/* Answer panel: height tweened by JS, content clipped while collapsing. */
.rmu-archive-faq__a {
	overflow: hidden;
	transition: height 0.3s ease;
}
.rmu-archive-faq__a-inner {
	padding: 0 0 1.25rem;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--wp--preset--color--contrast);
}
.rmu-archive-faq__a-inner p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Static text pages (Kontakt, Impressum, Datenschutz, …). Readable document
   typography in a narrow column. Scoped to .rmu-page (page.html) so it never
   affects the front page, which uses front-page.html.
--------------------------------------------------------------------------- */
.rmu-page .wp-block-post-title {
	margin-bottom: var(--wp--preset--spacing--50);
	line-height: 1.2;
	text-align: center;
}
.rmu-page .wp-block-post-content h2 {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 2.5rem 0 0.75rem;
}
.rmu-page .wp-block-post-content > :first-child {
	margin-top: 0;
}
.rmu-page .wp-block-post-content h3 {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 2rem 0 0.5rem;
}
.rmu-page .wp-block-post-content p {
	margin: 0 0 1rem;
}
.rmu-page .wp-block-post-content p,
.rmu-page .wp-block-post-content li {
	font-size: 1rem;
	line-height: 1.75;
}
.rmu-page .wp-block-post-content ul,
.rmu-page .wp-block-post-content ol {
	margin: 0 0 1rem;
	padding-left: 1.25rem;
}
.rmu-page .wp-block-post-content li {
	margin-bottom: 0.35rem;
}
.rmu-page .wp-block-post-content a {
	text-decoration: underline;
}
.rmu-page .wp-block-post-content a:hover {
	text-decoration: none;
}

/* Über-mich / Kooperationen extras. */
.rmu-page .wp-block-post-content .rmu-lead {
	font-size: 1.125rem;
	line-height: 1.6;
	margin-bottom: 1.5rem;
}
/* Image captions (e.g. photo credit) — clearly smaller than the body copy. */
.rmu-page .wp-block-post-content figcaption {
	margin-top: 0.5rem;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--wp--preset--color--neutral-500);
	text-align: right;
}
.rmu-page .wp-block-post-content .rmu-signature {
	margin: 1.5rem 0;
}
/* Partner logo wall — tidy 3-up grid, each logo capped + centred. */
.rmu-page .wp-block-post-content .rmu-partner-logos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem 2rem;
	align-items: center;
	margin-top: 1.5rem;
}
.rmu-page .wp-block-post-content .rmu-partner-logos .wp-block-image {
	margin: 0;
}
.rmu-page .wp-block-post-content .rmu-partner-logos img {
	max-height: 64px;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
	display: block;
	object-fit: contain;
}
@media (max-width: 600px) {
	.rmu-page .wp-block-post-content .rmu-partner-logos {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------------------------------------------------------------------------
   Ausflugsziel-Steckbrief — structured fact box (ACF block rmu/steckbrief).
--------------------------------------------------------------------------- */
.rmu-steckbrief {
	margin: 2rem 0;
	padding: 1.5rem 1.75rem;
	/* Off-white "note card" (not a green fill) so it doesn't clash with the
	   green author box; a lime accent stripe keeps the brand tie-in. */
	background: var(--wp--preset--color--base);
	border: 1px solid #e8eae8;
	border-left: 4px solid var(--wp--preset--color--accent);
}
.rmu-steckbrief__title {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 1rem !important;
	font-size: 1.25rem !important;
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--contrast);
}
.rmu-steckbrief__title::before {
	content: "";
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	background: url("assets/steckbrief-clip.svg") no-repeat center / contain;
}
.rmu-steckbrief__list {
	margin: 0;
}
.rmu-steckbrief__row {
	display: grid;
	grid-template-columns: 205px 1fr;
	gap: 0.2rem 1.25rem;
	padding: 0.5rem 0;
}
.rmu-steckbrief__row:first-child {
	padding-top: 0;
}
.rmu-steckbrief__row dt,
.rmu-steckbrief__row dd {
	font-size: 0.9375rem;
	line-height: 1.5;
}
.rmu-steckbrief__row dt {
	margin: 0;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}
.rmu-steckbrief__row dd {
	margin: 0;
	color: var(--wp--preset--color--neutral-600);
}
.rmu-steckbrief__row dd a {
	color: var(--wp--preset--color--contrast);
}
/* WYSIWYG-Felder (Tipp / mehr Zeit) liefern <p> – Abstände an die Liste angleichen. */
.rmu-steckbrief__row dd > p {
	margin: 0 0 0.5em;
}
.rmu-steckbrief__row dd > p:last-child {
	margin-bottom: 0;
}
.rmu-steckbrief--empty {
	margin: 2rem 0;
	padding: 1rem 1.25rem;
	border: 1px dashed #cfd3b0;
	color: var(--wp--preset--color--neutral-500);
	font-style: italic;
}
@media (max-width: 600px) {
	.rmu-steckbrief__row {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.rmu-steckbrief__row dt {
		margin-bottom: 0.15rem;
	}
}

/* ============================================================
   Interaktive Ausflugsziel-Karte (Leaflet + OSM + FacetWP)
   Layout: Filter-Chips + Reset, große Karte volle Breite, Treffer-Raster darunter
   ============================================================ */

/* ---- Filter-Kopf: Label links, Reset rechts ---- */
.rmu-karte-filter {
	margin: 24px 0 36px;
	padding: 28px;
	background: none;
	border: 1px solid var(--wp--preset--color--contrast);
}
.rmu-karte-filter__body { margin-top: 0; }
.rmu-karte-filter__head { margin-bottom: 10px; }
.rmu-karte-filter__label {
	font-weight: 600;
	font-size: 14px;
	color: var(--wp--preset--color--contrast);
}
.rmu-karte-reset {
	appearance: none;
	display: inline-block;
	margin-top: 16px;
	background: none;
	border: 0;
	padding: 0;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	border-bottom: 2px solid var(--wp--preset--color--accent);
	cursor: pointer;
	transition: border-color .12s ease;
}
.rmu-karte-reset::before { content: "\2715\00a0"; }
.rmu-karte-reset:hover { border-bottom-color: #b0b81c; }
.rmu-karte-reset[hidden] { display: none; }

/* ---- Filter-Chips (FacetWP-Checkboxen) ---- */
.rmu-karte-filter .facetwp-facet { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.rmu-karte-filter .facetwp-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: var(--wp--preset--color--base) !important;
	border: 1px solid var(--wp--preset--color--contrast);
	padding: 6px 13px !important;
	margin: 0 !important;
	font-size: 14px;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: background-color .12s ease;
}
.rmu-karte-filter .facetwp-checkbox::before { display: none !important; }
.rmu-karte-filter .facetwp-checkbox:hover { background: var(--wp--preset--color--accent-soft) !important; }
.rmu-karte-filter .facetwp-checkbox.checked { background: var(--wp--preset--color--accent) !important; font-weight: 600; }
.rmu-karte-filter .facetwp-counter { color: var(--wp--preset--color--neutral-600, #686262); font-size: 12px; }
.rmu-karte-filter .facetwp-checkbox.checked .facetwp-counter { color: var(--wp--preset--color--contrast); }

/* ---- Große Karte, volle Breite ---- */
.rmu-karte { margin: 0 0 1.5rem; }
.rmu-karte__map {
	width: 100%;
	height: 600px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--contrast);
	z-index: 1;
}
.rmu-karte__map .leaflet-container { font-family: inherit; }

/* Basiskarte entsättigen. Standard-OSM ist von Haus aus sehr grün und kämpft
   mit den Lime-Pins; entsättigt bleibt die Wald-/Landschaftsinformation gut
   lesbar, die Pins gewinnen aber klar die Oberhand. Bewusst nur auf der
   Kachel-Ebene – Marker, Cluster und Popups liegen in eigenen Panes und
   bleiben dadurch unangetastet farbecht. */
.rmu-karte .leaflet-tile-pane {
	filter: saturate(0.45) brightness(1.06);
}

/* ---- Treffer-Raster darunter ---- */
.rmu-karte__results { margin-top: 18px; }
.rmu-karte__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.rmu-karte__item {
	display: flex;
	flex-direction: column;
	border: 1px solid #d9dbd9;
	background: var(--wp--preset--color--base);
	transition: border-color .12s ease;
}
.rmu-karte__item:hover { border-color: var(--wp--preset--color--contrast); }
.rmu-karte__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	text-decoration: none !important;
	color: var(--wp--preset--color--contrast);
	transition: background-color .12s ease;
}
.rmu-karte__link:hover { background: var(--wp--preset--color--accent-soft); }
.rmu-karte__thumb {
	overflow: hidden;
	background: var(--wp--preset--color--accent-soft);
}
.rmu-karte__thumb img { width: 100%; height: 168px; object-fit: cover; display: block; }
.rmu-karte__body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 12px 14px;
	min-width: 0;
}
.rmu-karte__cat {
	order: -1;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral-600, #686262);
}
.rmu-karte__title {
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	text-decoration: none !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.rmu-karte__actions {
	border-top: 1px solid #ececec;
	padding: 9px 14px;
}
.rmu-karte__show {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	transition: color .12s ease;
}
.rmu-karte__show svg { flex: 0 0 auto; }
.rmu-karte__show:hover { color: #b0b81c; }
.rmu-karte__empty { color: var(--wp--preset--color--neutral-500, #7d7575); font-style: italic; }

/* ---- Leaflet-Popup im Marken-Look ---- */
.rmu-karte .leaflet-popup-content-wrapper {
	border-radius: 0;
	border: 1px solid var(--wp--preset--color--contrast);
	box-shadow: 0 4px 14px rgba(0,0,0,.18);
	padding: 0;
	overflow: hidden;
}
.rmu-karte .leaflet-popup-content { margin: 0; }
.rmu-karte .leaflet-container a { text-decoration: none !important; }
.rmu-karte .leaflet-popup-tip { background: var(--wp--preset--color--base); }
.rmu-karte a.leaflet-popup-close-button {
	width: 24px;
	height: 24px;
	top: 6px;
	right: 6px;
	padding: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
	color: var(--wp--preset--color--contrast) !important;
	background: var(--wp--preset--color--accent) !important;
	border: 1px solid var(--wp--preset--color--contrast);
}
.rmu-karte a.leaflet-popup-close-button:hover {
	background: #b0b81c !important;
	color: var(--wp--preset--color--contrast) !important;
}
.rmu-map-popup { display: block; text-decoration: none !important; color: var(--wp--preset--color--contrast) !important; }
.rmu-map-popup__img { display: block; width: 100%; height: 120px; object-fit: cover; }
.rmu-map-popup__text { display: block; padding: 10px 12px 12px; }
.rmu-map-popup__cat {
	display: block;
	margin-bottom: 3px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral-600, #686262);
}
.rmu-map-popup__title {
	display: block;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	text-decoration: none !important;
}

/* ---- Marken-Pin (Leaflet divIcon) ---- */
.rmu-map-pin { background: none !important; border: 0 !important; }
.rmu-map-pin svg { display: block; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }

/* ---- Volltextsuche (FacetWP-Search) – Look wie das Seiten-Suchfeld ---- */
.rmu-karte-filter .facetwp-type-search { margin-bottom: 18px; }
.rmu-karte-filter .facetwp-input-wrap {
	display: flex;
	width: 100%;
	max-width: 460px;
}
.rmu-karte-filter input.facetwp-search {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast);
	border-right: 0;
	border-radius: 0;
	padding: 12px 16px;
}
.rmu-karte-filter input.facetwp-search:focus { outline: none; }
.rmu-karte-filter input.facetwp-search::placeholder { color: var(--wp--preset--color--neutral-500, #7d7575); }
.rmu-karte-filter .facetwp-icon { display: none !important; }
.rmu-karte-filter .facetwp-input-wrap::after {
	content: "";
	flex: 0 0 auto;
	width: 52px;
	align-self: stretch;
	border: 1px solid var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230d0d0d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='20' y1='20' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	pointer-events: none;
}

/* ---- Marker-Cluster (Leaflet.markercluster) im Marken-Look ---- */
/* Die äußere 40×40-Fläche ist nur Icon-/Klickfläche und bleibt transparent.
   Leaflet.markercluster legt hier per Default (bzw. über .marker-cluster-small
   /-medium/-large) eine halbtransparente Farbfläche hinein, die ringsum 5px
   hinter der 30×30-Bubble hervorschaut – der „Schein" um die Zahl. */
.rmu-karte .marker-cluster { background: transparent; }
.rmu-karte .marker-cluster div {
	/* Leaflets Standard-CSS gibt der Bubble 30×30 (bei content-box) mit 5px
	   Margin in der 40×40-Icon-Fläche und einen festen border-radius von 15px.
	   Das ging mit unserem 2px-Rand mehrfach schief. Deshalb: Bubble füllt die
	   Icon-Fläche komplett (40×40, Margin 0) – sie beansprucht ohnehin genau
	   diesen Platz, vorher lag dort nur der halbtransparente Halo. border-box
	   legt den Rand nach innen, 50% hält sie unabhängig von der Größe rund,
	   und Flex zentriert die Zahl ohne fixe line-height-Rechnerei. */
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	border: 2px solid var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
}
.rmu-karte .marker-cluster span { line-height: 1; }

/* ---- "Weitere anzeigen"-Button ---- */
.rmu-karte-more {
	display: block;
	margin: 22px auto 0;
	appearance: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	padding: 11px 28px;
	cursor: pointer;
	transition: background-color .12s ease;
}
.rmu-karte-more:hover { background: var(--wp--preset--color--accent); }
.rmu-karte-more[hidden] { display: none; }

/* ---- Filter ein-/ausklappen (nur mobil) ---- */
.rmu-karte-filter__toggle { display: none; }
.rmu-karte-filter__badge {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	border: 1px solid var(--wp--preset--color--contrast);
}
.rmu-karte-filter__badge[hidden] { display: none; }
@media (max-width: 782px) {
	.rmu-karte-filter { margin: 18px 0 28px; padding: 0; background: none; border: 0; }
	.rmu-karte-filter__toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-family: inherit;
		font-size: 14px;
		font-weight: 600;
		color: var(--wp--preset--color--contrast);
		background: var(--wp--preset--color--base);
		border: 1px solid var(--wp--preset--color--contrast);
		border-radius: 0;
		padding: 10px 16px;
		cursor: pointer;
	}
	.rmu-karte-filter__chev { transition: transform .15s ease; }
	.rmu-karte-filter.is-open .rmu-karte-filter__chev { transform: rotate(180deg); }
	.rmu-karte-filter__body { display: none; margin-top: 14px; }
	.rmu-karte-filter.is-open .rmu-karte-filter__body { display: block; }
}

/* ---- 3-Gruppen-Filter unter der Karte (ART / DAUER / EIGENSCHAFTEN) ---- */
.rmu-kartenfilter__intro {
	margin: 0 0 22px;
	font-weight: 600;
	font-size: 15px;
	color: var(--wp--preset--color--contrast);
}
.rmu-kartenfilter__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px 32px;
}
.rmu-kartenfilter__label {
	display: block;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	padding-bottom: 10px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--wp--preset--color--contrast);
}
/* Abstand der Section-Überschriften zur Karte/zum Panel */
.rmu-karte-filter { margin-top: 14px; }
.rmu-karte-filter .rmu-kartenfilter__group .facetwp-facet {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.rmu-karte-filter .rmu-kartenfilter__group .facetwp-checkbox {
	display: flex;
	align-items: center;
	gap: 9px;
	background: none !important;
	border: 0 !important;
	padding: 6px 0 !important;
	margin: 0 !important;
	font-size: 14px;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}
.rmu-karte-filter .rmu-kartenfilter__group .facetwp-checkbox::before {
	content: "";
	display: inline-block !important;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	transition: background-color .12s ease;
}
.rmu-karte-filter .rmu-kartenfilter__group .facetwp-checkbox.checked::before {
	background-color: var(--wp--preset--color--accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d0d0d' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-size: 13px 13px;
	background-position: center;
	background-repeat: no-repeat;
}
.rmu-karte-filter .rmu-kartenfilter__group .facetwp-checkbox:hover::before { border-color: var(--wp--preset--color--accent); }
.rmu-karte-filter .rmu-kartenfilter__group .facetwp-counter {
	margin-left: -7px;
	color: var(--wp--preset--color--neutral-600, #686262);
	font-size: 12px;
}
@media (max-width: 700px) {
	.rmu-kartenfilter__grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ---- Intro-Text: zentriert, reduzierte Breite ---- */
.rmu-karte-intro {
	max-width: 900px !important;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* ---- Karten-Section-Überschriften (Suche verfeinern / Ergebnisse) ---- */
.rmu-karte-section {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.rmu-karte__map { height: 420px; }
	.rmu-karte__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.rmu-karte__map { height: 340px; }
	.rmu-karte__list { grid-template-columns: 1fr; }
}