/*
 * MYMOU Core — the only global stylesheet.
 * Everything here is something theme.json cannot express (sticky template part,
 * stacking order on small screens, focus rings, link underline offset).
 */
:where(a, button, input, textarea, select):focus-visible { outline: 3px solid var(--wp--preset--color--brand); outline-offset: 3px; }
a { text-underline-offset: .17em; }
html { overflow-wrap: break-word; }
/* The theme's arrow (SVG, drawn in the text colour with mask-image). The fonts have no arrow characters, so typed
   arrows look different on every device; the panel icon, previous/next and pagination use this instead. */
:root { --mymou-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12h16.5M14 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* Text rendering as on the live site (Divi): finer, lighter-looking text on macOS. Same colours. */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Header template part stays visible while scrolling. */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 1000; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }

/* Links to a spot on the same page (#anfrage, table of contents) scroll smoothly, except for visitors who prefer
   reduced motion. The target stops 1rem below the sticky header (and the admin bar when logged in). The header is
   compact up to 1023px, where the menu turns into the menu button. Easy TOC: its own "smooth scroll" off, offset 0. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
:where([id]) { scroll-margin-top: calc(var(--wp--custom--header-height) + var(--wp-admin--admin-bar--height, 0px) + 1rem); }
@media (max-width: 1023px) {
	:where([id]) { scroll-margin-top: calc(var(--wp--custom--header-height-compact) + var(--wp-admin--admin-bar--height, 0px) + 1rem); }
}

/* Columns style "Reverse when stacked": image-first rows show text first on phones. */
@media (max-width: 781px) {
	.wp-block-columns.is-style-reverse-stacked { flex-direction: column-reverse; }
}

/* Template rhythm: sections sit edge to edge and own their spacing; the footer follows directly. */
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }
.wp-block-post-content > :is(.is-style-section, .is-style-section-accent, .is-style-section-beige, .is-style-section-cta, .is-style-section-intro) { margin-block-start: 0; }
.wp-block-post-content > .wp-block-cover.is-style-hero:first-child { margin-block-start: var(--wp--preset--spacing--60); }

/* Paragraph after paragraph: 1em apart (the live site's spacing), instead of the general block gap. Only in normal
   stacked layouts: paragraphs side by side in a row (icon + text) keep the row's own gap. Eyebrows keep theirs. */
:is(.is-layout-flow, .is-layout-constrained) > p:not(.is-style-eyebrow) + p:not(.is-style-eyebrow) { margin-block-start: 1em; }

/* Card styles stack their content in a flex column. A Group inserted in the editor defaults to the "constrained"
   layout, whose automatic side margins (with !important) would shrink every child to its content and centre it in a
   flex column, so short headings ended up centred and could not be realigned. Inside a card, children use the full
   width; text alignment is then up to each block. !important only to outrank the layout's own !important. */
.wp-block-group:is(.is-style-card, .is-style-card-accent).is-layout-constrained > * { margin-inline: 0 !important; max-width: none; }

/* A card or image card that is the only block in a column fills the column height (equal-height rows). */
.wp-block-column > :is(.is-style-card, .is-style-card-accent, .is-style-image-card, .is-style-container-grey):only-child { height: 100%; }

/* An image card next to a text card takes the text card's height (as on the live site, where the image is the
   column background): its own minimum height only applies when it stands alone or the columns are stacked. */
@media (min-width: 782px) {
	.wp-block-columns:has(> .wp-block-column > :is(.is-style-card, .is-style-card-accent):only-child) > .wp-block-column > .is-style-image-card:only-child { min-height: 0; }
}

/* Group style "Avatars (overlapping)": round photos overlap by 20px, each with a 3px white ring.
   Here and not in theme.json because core's own image margins outrank the :where()-wrapped style CSS. */
.wp-block-group.is-style-avatars { gap: 0; }
.wp-block-group.is-style-avatars > .wp-block-image { margin: 0; }
.wp-block-group.is-style-avatars > .wp-block-image + .wp-block-image { margin-inline-start: -20px; }
.wp-block-group.is-style-avatars > .wp-block-image img { box-sizing: border-box; border: 3px solid var(--wp--preset--color--surface-base); border-radius: 9999px; }

/* Image card whose heading is a link: the whole card is the link (front end only; in the editor the text stays
   editable). The image and its overlay move behind the text so the link can be stretched over the card. */
body:not(.editor-styles-wrapper) .wp-block-cover.is-style-image-card:has(:is(h2, h3, h4) a) { isolation: isolate; }
body:not(.editor-styles-wrapper) .is-style-image-card:has(:is(h2, h3, h4) a) > :is(.wp-block-cover__image-background, .wp-block-cover__background) { z-index: -1; }
body:not(.editor-styles-wrapper) .is-style-image-card:has(:is(h2, h3, h4) a) > .wp-block-cover__inner-container { position: static; }
.is-style-image-card :is(h2, h3, h4) a { color: inherit; text-decoration: none; }
body:not(.editor-styles-wrapper) .is-style-image-card :is(h2, h3, h4) a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.is-style-image-card:hover :is(h2, h3, h4) a, .is-style-image-card :is(h2, h3, h4) a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.is-style-image-card :is(h2, h3, h4) a:focus-visible { outline: none; }
.is-style-image-card :is(h2, h3, h4) a:focus-visible::after { outline: 3px solid var(--wp--preset--color--surface-base); outline-offset: -6px; }

/* Panel (call to action): its icon box is white, and the icon is always the arrow, drawn by the theme (SVG) rather
   than the "→" typed in the block. The site's fonts have no arrow characters, so every device drew it with another
   font, each at another height: centred in one browser, off-centre on a phone. The typed character stays in the
   content (hidden). On phones the panel stacks, centred, and the arrow points down.
   Here and not in theme.json: the panel's own layout settings (flex, align top) outrank variation CSS. */
.is-style-panel > .is-style-icon-large { position: relative; background-color: var(--wp--preset--color--surface-base); font-size: 0; }
.is-style-panel > .is-style-icon-large::before { content: ""; position: absolute; inset: 0; margin: auto; width: 1.75rem; height: 1.75rem; background-color: currentColor; -webkit-mask: var(--mymou-arrow) center / contain no-repeat; mask: var(--mymou-arrow) center / contain no-repeat; }
@media (max-width: 767px) {
	.wp-block-group.is-style-panel { flex-direction: column; align-items: center; text-align: center; }
	.is-style-panel > .is-style-icon-large::before { transform: rotate(90deg); }
}

/* Table style "Editorial" (registered in theme.json, styled here: core's own cell borders outrank theme.json styles).
   Rounded white box with a soft shadow, tinted header, zebra rows, bold first column.
   On small screens the box scrolls sideways; a fade at the right edge shows there is more (it disappears at the end
   in browsers with scroll-driven animations). */
.wp-block-table.is-style-editorial {
	overflow-x: auto;
	margin-block: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--surface-base);
	border-radius: var(--wp--preset--border-radius--sm);
	box-shadow: 0 6px 20px rgb(0 0 0 / .06);
}
.wp-block-table.is-style-editorial table { width: 100%; table-layout: auto; border-collapse: collapse; font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.wp-block-table.is-style-editorial thead { border: 0; }
.wp-block-table.is-style-editorial :is(th, td) {
	border: 0;
	padding: 1rem 1.125rem;
	text-align: left;
	vertical-align: top;
	min-width: 7.5rem;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: auto;
}
.wp-block-table.is-style-editorial thead th {
	background: var(--wp--preset--color--surface-accent);
	color: var(--wp--preset--color--text-heading);
	font-weight: 600;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.wp-block-table.is-style-editorial tbody td { border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--border) 60%, var(--wp--preset--color--surface-base)); }
.wp-block-table.is-style-editorial tbody tr:last-child td { border-bottom: 0; }
.wp-block-table.is-style-editorial tbody tr:nth-child(even) { background: color-mix(in srgb, var(--wp--preset--color--surface-accent) 60%, var(--wp--preset--color--surface-base)); }
.wp-block-table.is-style-editorial tbody td:first-child { color: var(--wp--preset--color--text-heading); font-weight: 600; }
.wp-block-table.is-style-editorial figcaption { padding: .75rem 1.125rem; font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--text-muted); }
@property --mymou-table-fade { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes mymou-table-fade { from { --mymou-table-fade: 2rem; } to { --mymou-table-fade: 0px; } }
@media (max-width: 767px) {
	.wp-block-table.is-style-editorial {
		-webkit-mask-image: linear-gradient(to left, transparent, #000 var(--mymou-table-fade));
		mask-image: linear-gradient(to left, transparent, #000 var(--mymou-table-fade));
	}
	@supports (animation-timeline: scroll()) {
		.wp-block-table.is-style-editorial { animation: mymou-table-fade linear both; animation-timeline: scroll(self inline); }
	}
	@supports not (animation-timeline: scroll()) {
		.wp-block-table.is-style-editorial { --mymou-table-fade: 2rem; }
	}
}

/* Long compound words in headings (German): hyphenate words of 12+ letters, only where the line needs it.
   Works with the page language (html lang="de-DE"); shorter words keep wrapping whole. */
:where(h1, h2, h3, h4, h5, h6) {
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 12 5 5;
}
/* Except the big headlines: page titles (H1) and the hero's headings never hyphenate (Julius, 2026-10-17). */
:where(h1, .wp-block-cover.is-style-hero :is(h2, h3)) {
	-webkit-hyphens: manual;
	hyphens: manual;
}

/* Card — Accent (blue) holding other blocks: eyebrows stay readable on blue, and a white Card inside it
   (e.g. a form) switches back to the normal text colours. Variation styles have zero specificity, so this lives here. */
.is-style-card-accent .is-style-eyebrow { color: inherit; opacity: .85; }
.is-style-card-accent .is-style-card { color: var(--wp--preset--color--text-body); }
.is-style-card-accent .is-style-card :is(h1, h2, h3, h4, h5, h6) { color: var(--wp--preset--color--text-heading); }
.is-style-card-accent .is-style-card a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--brand); }

/* Tabs style "Timeline": the tab buttons become a timeline (a dot on a line, the year above the city) and the
   panels hold one Cover each. Write a tab label as bold year + city ("**2004** Thessaloniki"): the bold part is the
   year, the rest the small caption below it. Here and not in the variation: it needs media queries and a keyframe. Swipe on touch screens and
   loading the other images ahead: assets/js/timeline.js (loaded only where this style is used). */
/* A grid, not flex: core forces flex-grow/flex-basis "inherit !important" on the buttons. Each button draws the line to
   the next one (::after), so any number of steps works. */
.wp-block-tabs.is-style-timeline .wp-block-tab-list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 0;
	padding: 0;
}
.wp-block-tabs.is-style-timeline .wp-block-tab-list button:not(:last-child)::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: calc(.5rem - .5px);
	left: 50%;
	width: 100%;
	height: 1px;
	background: var(--wp--preset--color--border);
}
.wp-block-tabs.is-style-timeline .wp-block-tab-list button {
	width: auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .2rem;
	padding: 0 .5rem .25rem;
	text-align: center;
	color: var(--wp--preset--color--text-muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1.3;
	text-transform: uppercase;
}
.wp-block-tabs.is-style-timeline .wp-block-tab-list button::before {
	content: "";
	position: relative;
	z-index: 1;
	inset: auto;
	order: -1;
	box-sizing: border-box;
	width: 1rem;
	height: 1rem;
	margin-block-end: .6rem;
	border: 2px solid var(--wp--preset--color--brand);
	border-radius: 50%;
	background: var(--wp--preset--color--surface-base);
	transition: background-color .2s, box-shadow .2s;
}
.wp-block-tabs.is-style-timeline .wp-block-tab-list button strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
	color: var(--wp--preset--color--text-heading);
	transition: color .2s;
}
/* A label written without a bold part reads as the year line (the whole label in the year style). */
.wp-block-tabs.is-style-timeline .wp-block-tab-list button:not(:has(strong)) {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
	color: var(--wp--preset--color--text-heading);
}
.wp-block-tabs.is-style-timeline .wp-block-tab-list button:not(:has(strong))[aria-selected="true"],
.wp-block-tabs.is-style-timeline .wp-block-tab-list button:hover strong,
.wp-block-tabs.is-style-timeline .wp-block-tab-list button:not(:has(strong)):hover { color: var(--wp--preset--color--brand); }
.wp-block-tabs.is-style-timeline .wp-block-tab-list button[aria-selected="true"] { color: var(--wp--preset--color--text-heading); }
.wp-block-tabs.is-style-timeline .wp-block-tab-list button[aria-selected="true"] strong { color: var(--wp--preset--color--brand); }
.wp-block-tabs.is-style-timeline .wp-block-tab-list button[aria-selected="true"]::before {
	background: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 5px var(--wp--preset--color--brand-subtle);
}
.wp-block-tabs.is-style-timeline .wp-block-tab-list button:focus-visible { outline: none; }
.wp-block-tabs.is-style-timeline .wp-block-tab-list button:focus-visible strong {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 4px;
	border-radius: 2px;
}
@media (max-width: 479px) {
	.wp-block-tabs.is-style-timeline .wp-block-tab-list button { padding-inline: .25rem; letter-spacing: .06em; }
}
/* Text on the photos: a soft shadow, and on phones (where the text covers most of the slide) an even, stronger
   darkening instead of the slide's own gradient. Measured on the three live photos: white text at least 4.5:1 for
   body text and 3:1 for large text at the 95th percentile of the area behind it (desktop gradient "Image scrim —
   strong at the bottom"; phones this one, Thessaloniki's sunset band 4.4:1). */
.wp-block-tabs.is-style-timeline .wp-block-cover__inner-container { text-shadow: 0 1px 3px rgb(0 0 0 / .35); }
@media (max-width: 767px) {
	/* !important only to outrank the gradient preset class, which is !important itself. */
	.wp-block-tabs.is-style-timeline .wp-block-cover__background.has-background-gradient {
		background: linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.82) 100%) !important;
	}
}
/* Panels: one fixed height per screen size (set in the variation), so the page does not jump between slides.
   The new slide fades in; no motion when the visitor asked for less. */
.wp-block-tabs.is-style-timeline .wp-block-tab-panel > .wp-block-cover { margin-block: 0; }
@keyframes mymou-timeline-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
	body:not(.editor-styles-wrapper) .wp-block-tabs.is-style-timeline .wp-block-tab-panel:not([hidden]) { animation: mymou-timeline-in .45s ease-out both; }
}

/* A section right after the Hero cover (the homepage) starts without the divider line: the hero image already
   separates the two. Every other section keeps its line. */
.wp-block-cover.is-style-hero + :is(.is-style-section, .is-style-section-accent, .is-style-section-beige, .is-style-section-cta) { border-top: 0; }

/* Three cards in a row (a grid of exactly three, directly in a section): where only two fit side by side, the third
   is centred below them instead of sitting alone on the left. Four half-columns: each card spans two, the third
   starts at the second. The range is where the grid (min. 18rem per card) shows two columns. */
@media (min-width: 680px) and (max-width: 1039px) {
	:is(.is-style-section, .is-style-section-accent, .is-style-section-beige, .is-style-section-cta) > .wp-block-group.is-layout-grid:not(.is-style-stats, .is-style-proof-points):has(> :nth-child(3):last-child) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	:is(.is-style-section, .is-style-section-accent, .is-style-section-beige, .is-style-section-cta) > .wp-block-group.is-layout-grid:not(.is-style-stats, .is-style-proof-points):has(> :nth-child(3):last-child) > * { grid-column: span 2; }
	:is(.is-style-section, .is-style-section-accent, .is-style-section-beige, .is-style-section-cta) > .wp-block-group.is-layout-grid:not(.is-style-stats, .is-style-proof-points):has(> :nth-child(3):last-child) > :nth-child(3) { grid-column: 2 / span 2; }
}

/* Columns styles "Stack on tablet" and "Article + sidebar": stacked up to 1023px (where the header shows the menu
   button), not only below 782px as core columns do. !important only to outrank core's own !important on flex-wrap
   and the columns' inline widths. */
@media (max-width: 1023px) {
	.wp-block-columns:is(.is-style-stack-tablet, .is-style-article-sidebar) { flex-wrap: wrap !important; }
	.wp-block-columns:is(.is-style-stack-tablet, .is-style-article-sidebar) > .wp-block-column { flex-basis: 100% !important; }
}
/* "Article + sidebar" on desktop: a thin line between article and sidebar; the sidebar stays in view below the sticky
   header while the article scrolls, and stops at the end of the row (the end of the grey container). */
@media (min-width: 1024px) {
	.wp-block-columns.is-style-article-sidebar > .wp-block-column:first-child {
		padding-inline-end: 3rem;
		border-inline-end: 1px solid var(--wp--preset--color--border);
	}
	.wp-block-columns.is-style-article-sidebar > .wp-block-column:last-child > * {
		position: sticky;
		top: calc(var(--wp--custom--header-height) + var(--wp-admin--admin-bar--height, 0px) + 1.5rem);
	}
}

/* Post navigation style "Pill": "Next" always sits at the right end, also when it is alone (newest post) or wraps to
   its own line on narrow phones. Here because the flex layout's own margin reset outranks variation CSS. */
.wp-block-post-navigation-link.is-style-pill.post-navigation-link-next { margin-inline-start: auto; }
/* Its arrow: the theme's SVG arrow instead of the typed one (see --mymou-arrow); the pill's gap replaces core's 1ch. */
.wp-block-post-navigation-link.is-style-pill :is(.wp-block-post-navigation-link__arrow-previous, .wp-block-post-navigation-link__arrow-next) {
	display: inline-block;
	flex: none;
	width: 1rem;
	height: 1rem;
	margin: 0;
	font-size: 0;
	background-color: currentColor;
	-webkit-mask: var(--mymou-arrow) center / contain no-repeat;
	mask: var(--mymou-arrow) center / contain no-repeat;
}
.wp-block-post-navigation-link.is-style-pill .wp-block-post-navigation-link__arrow-previous { transform: scaleX(-1); }

/* Post Terms style "Badge" right after a featured image: the white category pill sits over the lower part of the
   image, centred and up to 500px wide (as on the live site). On phones it sits under the image. */
@media (min-width: 768px) {
	.wp-block-group:has(> .wp-block-post-featured-image + .wp-block-post-terms.is-style-badge) { position: relative; }
	.wp-block-post-featured-image + .wp-block-post-terms.is-style-badge {
		position: absolute;
		inset-inline: 0;
		bottom: 4.25rem;
		z-index: 1;
		width: min(31.25rem, calc(100% - 4rem));
		margin: 0 auto;
	}
}

/* Query Loop style "Slider" (Post Template): a row of cards that scrolls sideways and snaps card by card; two cards
   in view (one and a bit on phones, so it shows that it scrolls). No scrollbar: arrow buttons from
   assets/js/slider.js (mouse), swipe and trackpad work by themselves. No autoplay. */
.wp-block-post-template.is-style-slider {
	--mymou-slider-gap: var(--wp--preset--spacing--70);
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - var(--mymou-slider-gap)) / 2);
	column-gap: var(--mymou-slider-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.wp-block-post-template.is-style-slider::-webkit-scrollbar { display: none; }
.wp-block-post-template.is-style-slider > li { margin: 0; min-width: 0; scroll-snap-align: start; }
@media (max-width: 599px) {
	.wp-block-post-template.is-style-slider { --mymou-slider-gap: var(--wp--preset--spacing--40); grid-auto-columns: 82%; }
}
.mymou-slider-nav { display: flex; justify-content: flex-end; gap: .5rem; margin-block-start: var(--wp--preset--spacing--50); }
.mymou-slider-nav[hidden] { display: none; }
.mymou-slider-nav button {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	background: var(--wp--preset--color--surface-base);
	color: var(--wp--preset--color--text-heading);
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}
.mymou-slider-nav button:hover:not(:disabled) {
	background: var(--wp--preset--color--text-heading);
	border-color: var(--wp--preset--color--text-heading);
	color: var(--wp--preset--color--text-inverse);
}
.mymou-slider-nav button:disabled { opacity: .35; cursor: default; }

/* Query Loop style "List" (Post Template, blog overview): one post per row, the image filling the left half and
   title, category and excerpt on light grey beside it. Two columns of stacked cards on tablets, one on phones. */
.wp-block-post-template.is-style-list { display: grid; gap: var(--wp--preset--spacing--80); }
.wp-block-post-template.is-style-list > li { margin: 0; min-width: 0; }
.is-style-list > li > .wp-block-group {
	display: grid;
	height: 100%;
	box-sizing: border-box;
	background: var(--wp--preset--color--surface-muted);
	border-radius: var(--wp--preset--border-radius--lg);
	overflow: hidden;
}
.is-style-list > li > .wp-block-group > * { margin: 0; }
.is-style-list > li > .wp-block-group:has(> .wp-block-post-featured-image) { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: min(31.25rem, 45vw); }
.is-style-list .wp-block-post-featured-image { height: 100%; }
.is-style-list .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.is-style-list > li > .wp-block-group > .wp-block-group { padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70); }
@media (max-width: 1023px) {
	.wp-block-post-template.is-style-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--60); }
	.is-style-list > li > .wp-block-group:has(> .wp-block-post-featured-image) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 0; }
	.is-style-list .wp-block-post-featured-image { height: auto; aspect-ratio: 3 / 2; }
	.is-style-list > li > .wp-block-group > .wp-block-group { padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }
}
@media (max-width: 599px) {
	.wp-block-post-template.is-style-list { grid-template-columns: minmax(0, 1fr); }
}

/* "List" and "Slider" cards: the whole card opens the post (the title link is stretched over the card; category links
   stay clickable on top). Front end only; in the editor the texts stay selectable. */
body:not(.editor-styles-wrapper) :is(.is-style-list, .is-style-slider) > li > .wp-block-group { position: relative; }
body:not(.editor-styles-wrapper) :is(.is-style-list, .is-style-slider) .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
:is(.is-style-list, .is-style-slider) .wp-block-post-terms a { position: relative; z-index: 1; }
:is(.is-style-list, .is-style-slider) > li > .wp-block-group:hover .wp-block-post-title a { color: var(--wp--preset--color--brand); }
:is(.is-style-list, .is-style-slider) .wp-block-post-title a:focus-visible { outline: none; }
:is(.is-style-list, .is-style-slider) .wp-block-post-title a:focus-visible::after { outline: 3px solid var(--wp--preset--color--brand); outline-offset: 3px; }

/* Query pagination (blog overview, archives): page numbers as round buttons, the current page filled dark; previous /
   next as outlined pills with the theme's arrow. On phones previous / next shrink to round arrow buttons (the label
   stays for screen readers). The labels are WordPress' own ("Vorherige Seite" / "Nächste Seite" with the site
   language set to German). */
.wp-block-query-pagination { gap: var(--wp--preset--spacing--10); align-items: center; }
.wp-block-query-pagination > * { margin: 0; }
.wp-block-query-pagination-numbers { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--10); }
.wp-block-query-pagination :is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	box-sizing: border-box;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 .75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 9999px;
	background: var(--wp--preset--color--surface-base);
	color: var(--wp--preset--color--text-heading);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1;
	text-decoration: none;
	transition: background-color .15s, border-color .15s, color .15s;
}
.wp-block-query-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) { padding: 0 1.25rem; }
.wp-block-query-pagination .page-numbers.dots { border-color: transparent; background: none; min-width: 1.5rem; padding: 0; }
.wp-block-query-pagination .page-numbers.current,
.wp-block-query-pagination :is(a.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next):hover {
	background: var(--wp--preset--color--text-heading);
	border-color: var(--wp--preset--color--text-heading);
	color: var(--wp--preset--color--text-inverse);
}
.wp-block-query-pagination :is(.wp-block-query-pagination-previous-arrow, .wp-block-query-pagination-next-arrow) {
	display: inline-block;
	flex: none;
	width: 1rem;
	height: 1rem;
	margin: 0;
	font-size: 0;
	background-color: currentColor;
	-webkit-mask: var(--mymou-arrow) center / contain no-repeat;
	mask: var(--mymou-arrow) center / contain no-repeat;
}
/* core sets scaleX(1) on these arrows with a :not() selector, hence the longer selector */
.wp-block-query-pagination a .wp-block-query-pagination-previous-arrow.is-arrow-arrow { transform: scaleX(-1); }
@media (max-width: 599px) {
	.wp-block-query-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) { width: 2.75rem; padding: 0; font-size: 0; }
}

/* Breadcrumb separator "→" (the theme's default) drawn with the theme's SVG arrow, so it sits on the text's middle on
   every device (the fonts have no arrow; the typed one came from each device's fallback font). Another separator
   chosen in a block stays as typed. Core prints the separator as --separator in the block's style attribute. */
.wp-block-breadcrumbs[style*='--separator: "→"'] li:not(:last-child)::after {
	content: "";
	flex: none;
	width: 1.15em;
	height: 1.15em;
	font-size: inherit;
	transform: none;
	background-color: currentColor;
	-webkit-mask: var(--mymou-arrow) center / contain no-repeat;
	mask: var(--mymou-arrow) center / contain no-repeat;
}

/* Button style "Arrow": the ↗ in its white circle drawn with the theme's SVG arrow (turned up-right), centred in the
   circle the style draws (::before, 2rem, after the button's left padding). */
.wp-block-button.is-style-arrow .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(1rem + .5rem);
	width: 1rem;
	height: 1rem;
	margin-top: -.5rem;
	background-color: var(--wp--preset--color--brand);
	-webkit-mask: var(--mymou-arrow) center / contain no-repeat;
	mask: var(--mymou-arrow) center / contain no-repeat;
	transform: rotate(-45deg);
	pointer-events: none;
}
@media (max-width: 767px) {
	.wp-block-button.is-style-arrow .wp-block-button__link::after { left: calc(.75rem + .5rem); }
}

/* Group style "Logo row" (same look as Leptokaridou's lex-core): a line of text (a paragraph with the style Eyebrow)
   above a Row of logos (Image blocks) in equal cells with a fine line between them. The logos keep their own colours
   and all have one height; five or fewer sit in one row from tablets up, on phones two per row with the last one
   centred (2 + 2 + 1). The section around it gives the band (background, top line, padding). Cells, lines and logo
   height are set here: theme.json has no image height or item widths. */
.is-style-logo-row { --mymou-logo-height: 3.25rem; }
.is-style-logo-row .is-style-eyebrow { margin-block: 0 clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); text-align: center; color: var(--wp--preset--color--text-muted); }
.is-style-logo-row .is-layout-flex { gap: 2rem 0; flex-wrap: wrap; justify-content: center; }
.is-style-logo-row .is-layout-flex > .wp-block-image { box-sizing: border-box; flex: 1 1 0; min-width: 0; max-width: 20%; display: flex; justify-content: center; align-items: center; margin: 0; padding-inline: clamp(1rem, .5rem + 1.5vw, 2rem); }
.is-style-logo-row .is-layout-flex > .wp-block-image + .wp-block-image { border-inline-start: 1px solid var(--wp--preset--color--border); }
.is-style-logo-row .wp-block-image img { display: block; width: auto; max-width: 100%; height: var(--mymou-logo-height); object-fit: contain; }
@media (max-width: 781px) {
	.is-style-logo-row { --mymou-logo-height: 2.5rem; }
	.is-style-logo-row .is-layout-flex > .wp-block-image { flex: 0 0 50%; max-width: 50%; padding-inline: 1.25rem; }
	.is-style-logo-row .is-layout-flex > .wp-block-image + .wp-block-image { border-inline-start: 0; }
	.is-style-logo-row .is-layout-flex > .wp-block-image:nth-child(even) { border-inline-start: 1px solid var(--wp--preset--color--border); }
}

/* Group style "Logo grid" on phones: two columns; an odd last logo (five logos: 2 + 2 + 1) sits centred in the last
   row instead of alone on the left. !important not needed: the style's class outranks the grid layout's own class. */
@media (max-width: 599px) {
	.wp-block-group.is-style-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wp-block-group.is-style-logo-grid > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: 50%;
		box-sizing: border-box;
		border-inline-start: 0;
	}
}

/* Group style "Proof points" (a grid of short facts, each an icon + a line of text: the landing-page hero). From
   1024px all facts side by side (one column each), each a white card with the icon above the centred text (the old
   site's hero boxes); 768–1023px two by two, an odd last one centred; phones: one white panel with the facts as rows, so four facts don't push the page down by
   four cards. The facts keep their own markup (a Row of Icon + Paragraph): only the grid carries the style.
   Here and not in theme.json: the grid and row layouts' own classes would outrank the :where()-wrapped style CSS. */
.wp-block-group.is-style-proof-points { gap: var(--wp--preset--spacing--50); grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.wp-block-group.is-style-proof-points > * {
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	text-align: center;
	background: var(--wp--preset--color--surface-base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--lg);
	box-shadow: var(--wp--preset--shadow--card);
}
.wp-block-group.is-style-proof-points > * > .is-style-icon { flex: 0 0 auto; width: 3.25rem; height: 3.25rem; border-radius: var(--wp--preset--border-radius--md); font-size: 1.375rem; }
.wp-block-group.is-style-proof-points > * > p:not(.is-style-icon) {
	flex-grow: 0;
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--text-heading);
	text-wrap: balance;
}
@media (max-width: 1023px) {
	.wp-block-group.is-style-proof-points { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1023px) {
	.wp-block-group.is-style-proof-points > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--wp--preset--spacing--50) / 2); box-sizing: border-box; }
}
@media (max-width: 767px) {
	.wp-block-group.is-style-proof-points {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding: .25rem 1.25rem;
		background: var(--wp--preset--color--surface-base);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--wp--preset--border-radius--lg);
		box-shadow: var(--wp--preset--shadow--card);
	}
	.wp-block-group.is-style-proof-points > * {
		flex-direction: row;
		gap: .875rem;
		padding: 1rem 0;
		text-align: start;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
	.wp-block-group.is-style-proof-points > * + * { border-top: 1px solid var(--wp--preset--color--border); }
	.wp-block-group.is-style-proof-points > * > .is-style-icon { width: 2.25rem; height: 2.25rem; font-size: 1.0625rem; border-radius: var(--wp--preset--border-radius--sm); }
	.wp-block-group.is-style-proof-points > * > p:not(.is-style-icon) { font-size: var(--wp--preset--font-size--base); }
}

/* Group style "Stats" (a grid of key figures: a heading with the number, a paragraph with its label). One row of
   equal columns divided by thin lines, centred, the number large in the heading font (the old site's figures band);
   stacked with lines between on phones. Cards inside lose their frame, so a grid of Cards can simply take the style. */
.wp-block-group.is-style-stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
.wp-block-group.is-style-stats > * {
	margin: 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	text-align: center;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.wp-block-group.is-style-stats > * + * { border-inline-start: 1px solid var(--wp--preset--color--border); }
.wp-block-group.is-style-stats > * > :is(h2, h3, h4) {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.25rem, 1.5rem + 2.2vw, 3.5rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--wp--preset--color--text-heading);
}
.wp-block-group.is-style-stats > * > p { margin: .625rem 0 0; color: var(--wp--preset--color--text-muted); }
@media (min-width: 768px) and (max-width: 1023px) {
	.wp-block-group.is-style-stats > * { padding-inline: var(--wp--preset--spacing--30); }
	.wp-block-group.is-style-stats > * > :is(h2, h3, h4) { font-size: 2rem; }
}
@media (max-width: 767px) {
	.wp-block-group.is-style-stats { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
	.wp-block-group.is-style-stats > * { padding: var(--wp--preset--spacing--50) 0; }
	.wp-block-group.is-style-stats > * + * { border-inline-start: 0; border-top: 1px solid var(--wp--preset--color--border); }
}

/* Image style "Portrait": a cut-out photo (transparent PNG/WebP) in a white card the width of its column (the Card
   style's border, radius and shadow), the photo centred and standing on the card's lower edge. The paragraph right
   after it (name and role) becomes a small white name card overlapping that edge. */
.wp-block-image.is-style-portrait {
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	margin-inline: 0;
	padding: 2.5rem 1.75rem 0;
	overflow: hidden;
	background: var(--wp--preset--color--surface-base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--lg);
	box-shadow: var(--wp--preset--shadow--card);
}
.wp-block-image.is-style-portrait img { display: block; width: 100%; max-width: 20rem; height: auto; }
.wp-block-image.is-style-portrait + p {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: fit-content;
	max-width: calc(100% - 2rem);
	margin: -2.5rem auto 0 !important;
	padding: .875rem 1.5rem;
	text-align: center;
	background: var(--wp--preset--color--surface-base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--md);
	box-shadow: var(--wp--preset--shadow--card);
}
.wp-block-image.is-style-portrait + p strong { color: var(--wp--preset--color--text-heading); }
@media (max-width: 781px) {
	.wp-block-image.is-style-portrait { padding: 2rem 1.25rem 0; }
	.wp-block-image.is-style-portrait img { max-width: 15rem; }
}

/* A Cover without text inside (an image card used as a picture) gets the flow layout class itself, so its overlay
   took the block gap above it as a second child: a strip of photo without the scrim at the top. The overlay and the
   image always fill the cover. */
.wp-block-cover > :is(.wp-block-cover__background, .wp-block-cover__image-background, .wp-block-cover__video-background) { margin: 0; }

/* Checklist inside Card — Accent (the form panel's "what happens next"): ticks in the text colour, a little lighter. */
.is-style-card-accent .is-style-checklist { gap: .875rem; }
.is-style-card-accent .is-style-checklist > li::before { font-size: 1.125rem; top: .1em; opacity: .9; }
.is-style-card-accent .is-style-checklist > li { padding-inline-start: 2rem; }

/* The form panel's title (Card — Accent holding a form: Kontakt, booking page): one step smaller than a page H1 on
   phones and tablets, so long single words ("Vertragsprüfung", "Rechtsberatung") fit the blue box without breaking. */
.is-style-card-accent:has(.fluentform) h1 { font-size: clamp(1.75rem, 1.2rem + 2.6vw, var(--wp--preset--font-size--title-lg)); }