/**
 * Base styles: design tokens, reset, layout primitives.
 *
 * Everything a layout needs (container, section spacing, prose, buttons,
 * cards) lives here so layout stylesheets stay small.
 */

/* ------------------------------------------------------------------ Fonts */

/*
 * Same two variable faces the block theme shipped, so the switch does not
 * change the typography. Both cover 200–900 in a single file — no separate
 * weight requests.
 */
@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/source-sans-3-variable.woff2") format("woff2-variations");
}

@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/source-serif-4-variable.woff2") format("woff2-variations");
}

/* ---------------------------------------------------------------- Tokens */

:root {
	/*
	 * Pure neutrals: black, anthracite, grey and white. No blue cast — the
	 * booking plugin's palette (navy-tinted greys) was deliberately dropped.
	 */
	--color-bg: #ffffff;
	--color-surface-alt: #f2f2f2;
	/*
	 * The mid grey the closing band, the step panels and the contact card sit
	 * on. Noticeably darker than --color-surface-alt so it reads as a distinct
	 * block, still light enough for dark text — 9.4:1 against #1f1f1f.
	 */
	--color-surface-strong: #c9c9c9;

	/*
	 * The light-context values are kept under their own names as well, because
	 * the dark section variants below repoint --color-text and friends. A white
	 * card inside a dark section has to take them back, and pointing at these
	 * beats writing the hex codes a second time — see the .section__card rule
	 * further down.
	 */
	--color-surface-light: #f7f7f7;
	--color-text-light: #1f1f1f;
	--color-muted-light: #6b6b6b;
	--color-border-light: #d6d6d6;

	--color-surface: var(--color-surface-light);
	--color-text: var(--color-text-light);
	--color-muted: var(--color-muted-light);
	--color-border: var(--color-border-light);

	/*
	 * PLACEHOLDER — no brand colour was defined anywhere in the old theme
	 * (its style.css referenced a --wp--preset--color--rot that theme.json
	 * never declared). This is a plain anthracite, which is safe but
	 * deliberately unremarkable. Change these three lines once the real brand
	 * colour is settled; everything else re-points at --color-brand.
	 */
	--color-brand: #2b2b2b;
	--color-accent-hover: #111111;

	--color-accent: var(--color-brand);
	--color-accent-contrast: #ffffff;
	--color-dark: #1a1a1a;
	/*
	 * The footer is a lighter anthracite than the near-black the rest of the
	 * theme uses for dark sections. Kept as its own token rather than changing
	 * --color-dark, which would repaint every dark section on the site — a call
	 * that belongs with the brand decision still noted as open.
	 */
	--color-footer-bg: #363636;
	--color-dark-text: #f5f5f5;
	--color-dark-muted: #a3a3a3;

	/*
	 * Both are mixed from --color-brand rather than written out, so changing
	 * the brand colour above carries through to dark sections and highlight
	 * strokes instead of leaving stray hues behind.
	 *
	 * on-dark: the brand is too dark to read on a dark section — this is the
	 * same hue lightened until it passes contrast.
	 * soft: a pale tint for underline strokes, badges and inverted buttons.
	 */
	--color-accent-on-dark: color-mix(in srgb, var(--color-brand) 22%, #ffffff);
	--color-brand-soft: color-mix(in srgb, var(--color-brand) 10%, #ffffff);

	/* The flat tint the decorative patterns are drawn on. */
	--color-pattern-tint: #bdbdbd;

	/* Status tones, matching the booking form's messages. */
	--color-success: #027a48;
	--color-warning: #b54708;
	--color-error: #b42318;

	/* Typography */
	--font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--text-xs: 0.8125rem;
	--text-sm: 0.9375rem;
	--text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
	--text-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	--text-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	--text-3xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);

	--leading-tight: 1.15;
	--leading-snug: 1.35;
	--leading-normal: 1.65;

	/*
	 * The small steps mirror the block theme's spacing scale
	 * (4 / 8 / 16 / 22 / 32 px). Its scale stopped at 46px because it sized
	 * block gaps; the three large steps below are section rhythm and have no
	 * counterpart there.
	 */
	--space-3xs: 0.25rem;  /* 4px  */
	--space-2xs: 0.5rem;   /* 8px  */
	--space-xs: 0.75rem;   /* 12px */
	--space-s: 1rem;       /* 16px */
	--space-m: 1.375rem;   /* 22px */
	--space-l: 2rem;       /* 32px */
	--space-xl: 4rem;
	--space-2xl: 6rem;
	--space-3xl: clamp(5rem, 3rem + 8vw, 9rem);

	/* One rhythm for every section, top and bottom: 3rem on a phone, 5rem on a wide screen. */
	--section-space: clamp(3rem, 2rem + 3vw, 5rem);

	/* Layout — 620px reading column and 1200px container, as in theme.json. */
	--container-narrow: 38.75rem;
	--container-article: 50rem;  /* 800px — the blog reading column */
	--container-default: 75rem;
	--container-wide: 87.5rem;
	--gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

	/* Misc */
	--radius-s: 4px;
	--radius-m: 10px;
	--radius-l: 20px;
	--radius-full: 999px;
	--shadow-s: 0 1px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);
	--shadow-m: 0 4px 12px rgb(0 0 0 / 8%), 0 12px 32px rgb(0 0 0 / 6%);
	--transition: 180ms ease;
	--header-height: 4.5rem;
}

/* ----------------------------------------------------------------- Reset */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + var(--space-s));
}

body {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	-webkit-font-smoothing: antialiased;
}

/*
 * Deliberately no overflow-x: hidden here. It is the usual quick fix for a
 * horizontal scrollbar, but it silently kills position: sticky for every
 * descendant — the sticky header among them. Fix overflow at the element
 * that causes it instead.
 */
.site-main {
	overflow: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--space-s);
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: var(--leading-tight);
	text-wrap: balance;
}

p,
ul,
ol,
figure,
blockquote,
table {
	margin: 0 0 var(--space-s);
}

:where(p, li) {
	text-wrap: pretty;
}

img,
picture,
video,
canvas,
svg,
iframe {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

a {
	color: var(--color-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--transition);
}

a:hover,
a:focus-visible {
	color: var(--color-accent-hover);
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px dashed var(--color-text);
	outline-offset: 2px;
	border-radius: var(--radius-s);
}

/*
 * Where the text colour is set directly instead of via --color-text, the
 * ring would fall back to the page's dark ink — invisible on these grounds.
 */
.site-header :focus-visible {
	outline-color: var(--header-ink);
}

.site-footer :focus-visible,
.post-nav__card:focus-visible {
	outline-color: var(--color-dark-text);
}

/*
 * Text fields keep the frame, not the ring. The caret already says where the
 * focus is, and browsers count a click into a field as :focus-visible — the
 * dashed ring would sit on every clicked input. The border takes the accent
 * instead. Checkboxes, radios and buttons keep the ring: they have no frame
 * worth colouring.
 */
:is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="file"], [type="range"], [type="color"]), textarea, select):focus-visible {
	outline: 0;
	border-color: var(--color-accent);
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------ A11y utils */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	padding: var(--space-2xs) var(--space-s);
	background: var(--color-accent);
	color: var(--color-accent-contrast);
	transform: translateY(-150%);
	transition: transform var(--transition);
}

.skip-link:focus {
	position: fixed;
	width: auto;
	height: auto;
	clip-path: none;
	margin: 0;
	transform: translateY(0);
}

/* ------------------------------------------------------------- Container */

.container {
	width: 100%;
	max-width: var(--container-default);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--narrow {
	max-width: var(--container-narrow);
}

.container--wide {
	max-width: var(--container-wide);
}

.container--article {
	max-width: var(--container-article);
}

.container--full {
	max-width: none;
	padding-inline: 0;
}

/* ------------------------------------------------------- Block content */

/*
 * Content coming from the block editor rather than the builder: the pages not
 * yet migrated off Kadence, and the WooCommerce cart/checkout blocks.
 *
 * The theme declares align-wide support, so blocks emit .alignwide and
 * .alignfull — but a classic theme has to implement them. Without these rules
 * a full-width Kadence row simply sits in the content column and its inner
 * padding and background stop lining up.
 *
 * The negative margin technique is used rather than a wider container so the
 * surrounding text keeps its measure. 100vw is deliberately avoided: it
 * includes the scrollbar and causes horizontal overflow on Windows.
 */
.block-content {
	max-width: none;
}

.block-content > .alignwide {
	width: 100%;
	max-width: var(--container-wide);
	margin-inline: auto;
}

.block-content > .alignfull {
	width: auto;
	max-width: none;
	/*
	 * Cancels the container's gutter on both sides. calc() rather than a raw
	 * negative gutter so this keeps working if --gutter changes.
	 */
	margin-inline: calc(-1 * var(--gutter));
}

.block-content > .alignleft,
.block-content > .alignright {
	max-width: 50%;
}

@media (min-width: 48rem) {
	.block-content > .alignleft {
		float: left;
		margin: 0 var(--space-m) var(--space-s) 0;
	}

	.block-content > .alignright {
		float: right;
		margin: 0 0 var(--space-s) var(--space-m);
	}
}

.block-content > .aligncenter {
	margin-inline: auto;
}

/* Blocks bring their own vertical rhythm; do not double it up. */
.block-content > :last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------- Section */

.section {
	position: relative;
	padding-block: var(--section-space);
	background-color: var(--section-bg, transparent);
	color: var(--section-color, inherit);
}

/*
 * Templates only. The builder has no spacing switch: every section shares
 * --section-space. A page header hands its bottom gap to what follows, and
 * the content or comments block under a header sits flush against it.
 */
.section--pt-none { padding-top: 0; }
.section--pb-none { padding-bottom: 0; }

/* Page and entry headers: the title stays close to what follows. */
.section.page-header,
.section.entry-header {
	padding-bottom: var(--space-m);
}

/*
 * Minimum height from the settings modal. border-box, so the padding counts
 * towards it: a full-height section is one screen, not one screen plus
 * padding.
 */
.section--height-medium,
.section--height-full {
	display: grid;
	align-content: center;
	box-sizing: border-box;
}

.section--height-medium {
	min-height: 60vh;
}

.section--height-full {
	min-height: calc(100svh - var(--header-height));
}

.section--bg-light {
	--section-bg: var(--color-surface);
}

.section--bg-accent {
	--section-bg: var(--color-brand);
	--section-color: #ffffff;
	--color-text: #ffffff;
	--color-muted: rgb(255 255 255 / 80%);
	--color-border: rgb(255 255 255 / 32%);
	/* Buttons invert here, otherwise a primary button is brand on brand. */
	--color-accent: #ffffff;
	--color-accent-hover: var(--color-brand-soft);
	--color-accent-contrast: var(--color-brand);
	--color-surface: rgb(255 255 255 / 12%);
}

.section--bg-dark {
	--section-bg: var(--color-dark);
	--section-color: var(--color-dark-text);
	--color-text: var(--color-dark-text);
	--color-muted: var(--color-dark-muted);
	--color-surface: color-mix(in srgb, var(--color-dark-text) 8%, var(--color-dark));
	--color-border: color-mix(in srgb, var(--color-dark-text) 18%, transparent);
	--color-accent: var(--color-accent-on-dark);
	--color-accent-hover: #ffffff;
	--color-accent-contrast: var(--color-dark);
}

.section--bg-image {
	--section-color: #ffffff;
	--color-text: #ffffff;
	--color-muted: rgb(255 255 255 / 82%);
	--color-border: rgb(255 255 255 / 30%);
	/* The default accent fails contrast against the darkened image. */
	--color-accent: var(--color-accent-on-dark);
	--color-accent-hover: #ffffff;
	--color-accent-contrast: var(--color-dark);

	background-image: var(--section-bg-image);
	background-size: cover;
	background-position: center;
	isolation: isolate;
}

.section--bg-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgb(0 0 0 / 55%), rgb(0 0 0 / 70%));
}

/*
 * Pattern background: a tiling SVG on a flat tint, with the content sitting on
 * a white card above it. The SVGs draw in white, so the tint underneath is what
 * gives the pattern its colour.
 */
.section--bg-pattern {
	--section-bg: var(--color-pattern-tint, #bdbdbd);

	background-image: var(--section-bg-image);
	background-repeat: repeat;
	background-size: 600px 600px;
}

/* The contour graphic is one artwork, not a tile: it covers the section. */
.section--pattern-topo {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

/*
 * The card. Layouts that use a pattern wrap their content in .section__card —
 * the pattern is only ever a frame, never something text sits directly on.
 */
.section__card {
	padding: clamp(var(--space-l), 2rem + 4vw, 5rem) clamp(var(--space-m), 1.5rem + 3vw, 4rem);
	background: var(--color-bg);
	border-radius: var(--radius-l);
}

.section__card > :last-child {
	margin-bottom: 0;
}

/* Without a pattern behind it the card would be white on white — drop it. */
.section:not(.section--bg-pattern):not(.section--bg-image) .section__card {
	padding-inline: 0;
	background: none;
	border-radius: 0;
}

/*
 * A light surface inside a dark section takes the light colours back.
 *
 * --bg-dark, --bg-accent and --bg-image all repoint --color-text at a near
 * white. That is right for text sitting straight on the section, and wrong the
 * moment the same text sits on a white card instead: the FAQ card rendered
 * white on white, and so did every bike card on the dark Velos section.
 *
 * Scoped to the elements that actually paint their own light background, so
 * text on the section itself keeps the inverted colours it needs.
 */
.section--bg-dark :is(.section__card, .bike-card, .post-card, .booking__form),
.section--bg-accent :is(.section__card, .bike-card, .post-card, .booking__form),
.section--bg-image :is(.section__card, .bike-card, .post-card, .booking__form),
.section--bg-pattern :is(.section__card, .bike-card, .post-card, .booking__form) {
	--color-text: var(--color-text-light);
	--color-muted: var(--color-muted-light);
	--color-border: var(--color-border-light);
	--color-surface: var(--color-surface-light);

	/* Buttons invert back too, otherwise a primary button is white on white. */
	--color-accent: var(--color-brand);
	--color-accent-hover: var(--color-dark);
	--color-accent-contrast: #ffffff;

	color: var(--color-text);
}

.section__title {
	margin-bottom: var(--space-m);
	font-size: var(--text-2xl);
}

.section__title--small {
	font-size: var(--text-lg);
	color: var(--color-muted);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/*
 * Split heading: serif lead-in, sans continuation. Both parts sit on one line
 * where there is room and wrap together where there is not — hence inline
 * spans rather than a flex row, which would break the line box.
 */
.section__title--split {
	font-family: var(--font-body);
	font-weight: 700;
}

.section__title-lead {
	font-family: var(--font-heading);
	font-weight: 700;
}

.section__intro {
	max-width: 60ch;
	margin-bottom: var(--space-l);
	color: var(--color-muted);
	font-size: var(--text-lg);
}

/* The short line above a heading: small, spaced, muted. */
.section__kicker {
	display: block;
	margin-bottom: var(--space-xs);
	color: var(--color-muted);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * Optional title + intro block above a grid or list. Collapses the trailing
 * margins of its children so the gap to the content below is set here, once,
 * instead of per layout.
 */
.section__header {
	margin-bottom: var(--space-l);
}

.section__header > :last-child {
	margin-bottom: 0;
}

/* ----------------------------------------------------------------- Prose */

.prose {
	max-width: 68ch;
}

.prose > :last-child {
	margin-bottom: 0;
}

.prose h2 { font-size: var(--text-xl); margin-top: var(--space-l); }
.prose h3 { font-size: var(--text-lg); margin-top: var(--space-m); }
.prose h2:first-child,
.prose h3:first-child { margin-top: 0; }

.prose ul,
.prose ol {
	padding-left: 1.25em;
}

.prose li + li {
	margin-top: var(--space-3xs);
}

.prose blockquote {
	margin-inline: 0;
	padding-left: var(--space-s);
	border-left: 3px solid var(--color-accent);
	color: var(--color-muted);
	font-size: var(--text-lg);
}

.prose img {
	border-radius: var(--radius-m);
}

/* Editor images: pmt_wysiwyg_images() lifts them out of their paragraph. */
.prose figure {
	margin-block: var(--space-m);
}

.prose figcaption {
	margin-top: var(--space-2xs);
	color: var(--color-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
}

.prose code {
	padding: 0.15em 0.4em;
	background: var(--color-surface);
	border-radius: var(--radius-s);
	font-family: var(--font-mono);
	font-size: 0.9em;
}

.prose--small {
	font-size: var(--text-sm);
}

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

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	padding: 0.6em 1.6em;
	border: 1px solid transparent;
	/* A rounded rectangle, not a pill — the shape every section's button shares. */
	border-radius: var(--radius-m);
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}

.button:hover,
.button:focus-visible {
	transform: translateY(-1px);
}

.button--primary {
	background-color: var(--color-accent);
	color: var(--color-accent-contrast);
}

.button--primary:hover,
.button--primary:focus-visible {
	background-color: var(--color-accent-hover);
	color: var(--color-accent-contrast);
}

.button--ghost {
	border-color: currentcolor;
	background-color: transparent;
	color: var(--color-text);
}

.button--ghost:hover,
.button--ghost:focus-visible {
	background-color: color-mix(in srgb, currentcolor 10%, transparent);
	color: var(--color-text);
}

.button--small {
	padding: 0.6em 1.1em;
	font-size: var(--text-xs);
}

/*
 * Brand button — the mint call to action in the header. Keeps its colour in
 * every header state, so it stays the one fixed point while the bar changes.
 */
.button--brand {
	background: var(--color-brand-soft);
	color: var(--color-dark);
	border-radius: var(--radius-s);
	padding: 0.6em 1.3em;
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.button--brand:hover,
.button--brand:focus-visible {
	background: #ffffff;
	color: var(--color-dark);
}

/* ---------------------------------------------------------- Site header */

/*
 * The header has three states. Colours come from two custom properties so the
 * state rules stay to two lines each instead of restating every child.
 */
.site-header {
	--header-ink: var(--color-text);
	--header-bg: var(--color-bg);

	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--header-bg);
	color: var(--header-ink);
	transition: background-color var(--transition), color var(--transition);
}

/* Scrolled: the bar gains its edge. */
.site-header.is-stuck {
	--header-ink: var(--color-text);
	--header-bg: var(--color-bg);

	box-shadow: 0 1px 0 var(--color-border);
}

.header-sentinel {
	position: absolute;
	top: 0;
	height: 1px;
	width: 1px;
	pointer-events: none;
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(var(--space-s), 2.5vw, var(--space-l));
	min-height: var(--header-height);
}

.site-header__branding {
	margin-right: auto;
}

/*
 * Desktop: logo left, navigation centred, cart and language switcher right.
 * The two outer columns share the leftover width, so the nav sits on the
 * true centre of the bar regardless of how wide the logo or the actions are.
 */
@media (min-width: 861px) {
	.site-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
	}

	.site-header__branding {
		margin-right: 0;
		justify-self: start;
	}

	.site-nav {
		justify-self: center;
	}

	.site-header__actions {
		grid-column: 3;
		justify-self: end;
	}
}

.site-header__branding img {
	max-height: 2.25rem;
	width: auto;
}

/*
 * One logo file. The open mobile menu and the footer tint it white — see the
 * rules there.
 */
.site-logo {
	display: inline-flex;
	align-items: center;
}

.site-logo__img {
	display: block;
	max-height: 2.25rem;
	width: auto;
}

.site-title {
	font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--header-ink);
	text-decoration: none;
	transition: color var(--transition);
}

.site-title:hover,
.site-title:focus-visible {
	color: var(--header-ink);
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(var(--space-s), 2vw, var(--space-l));
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a {
	position: relative;
	color: var(--header-ink);
	font-size: var(--text-base);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--transition);
}

/* Underline on hover and for the current page, drawn so it does not shift text. */
.site-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.35em;
	height: 1px;
	background: currentcolor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transition);
}

.site-nav__list a:hover::after,
.site-nav__list a:focus-visible::after,
.site-nav__list .current-menu-item > a::after,
.site-nav__list .current_page_ancestor > a::after {
	transform: scaleX(1);
}

/* Sub menu */
.site-nav__list .sub-menu {
	position: absolute;
	min-width: 12rem;
	margin: 0;
	padding: var(--space-2xs);
	list-style: none;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-m);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition);
}

.site-nav__list li {
	position: relative;
}

.site-nav__list li:hover > .sub-menu,
.site-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.site-nav__list .sub-menu a {
	display: block;
	padding: var(--space-2xs) var(--space-xs);
	border-radius: var(--radius-s);
}

.site-nav__list .sub-menu a:hover,
.site-nav__list .sub-menu a:focus-visible {
	background: var(--color-surface);
}

/*
 * Burger that morphs into a close icon. No border or background — the touch
 * target stays 44px through the box, not through a visible frame.
 */
.nav-toggle {
	display: none;
	position: relative;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: none;
	border: 0;
	color: var(--header-ink, var(--color-text));
	cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	position: absolute;
	left: 50%;
	width: 1.6rem;
	height: 2px;
	background: currentcolor;
	border-radius: 1px;
	transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle__bars {
	top: 50%;
	transform: translate(-50%, -50%);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	left: 0;
	transform-origin: center;
}

.nav-toggle__bars::before { top: -0.45rem; }
.nav-toggle__bars::after { top: 0.45rem; }

/* Open: middle bar disappears, the outer two cross. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
	background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
	top: 0;
	transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
	top: 0;
	transform: rotate(-45deg);
}

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

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-m);
}

.cart-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	color: inherit;
	text-decoration: none;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.cart-link:hover,
.cart-link:focus-visible {
	color: inherit;
	opacity: 0.7;
}

.cart-link__icon {
	display: block;
}

/* ------------------------------------------------------- Lean checkout chrome */

/*
 * The checkout keeps a header and a footer, but only the parts that are not a
 * way out of the funnel: the logo, a link back to the cart, and the legal
 * links. See pmt_is_lean_checkout() in inc/woocommerce.php.
 */
/*
 * Lean checkout: logo left, the way back to the cart hard right — where the
 * language switcher sits on every other page. Flex, not the desktop grid
 * above: with only two children the grid would centre the link.
 */
.site-header--lean .site-header__inner {
	display: flex;
	justify-content: space-between;
}

.site-header__back {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	color: var(--color-muted);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
}

.site-header__back:hover,
.site-header__back:focus-visible {
	color: var(--color-text);
}

.site-header__back svg {
	transition: transform var(--transition);
}

.site-header__back:hover svg,
.site-header__back:focus-visible svg {
	transform: translateX(-2px);
}

/*
 * No sticky behaviour on the checkout: the header has nothing in it worth
 * following the customer down a long form.
 */
.site-footer--lean {
	padding-block: var(--space-l);
}

.site-footer--lean .site-footer__bottom {
	justify-content: space-between;
}

/*
 * Scoped to --lean rather than written bare: the footer's own .site-footer__legal
 * rules sit further down this file at the same specificity and would otherwise
 * win on order, leaving the links stacked and shouting in white bold.
 */
.site-footer--lean .site-footer__legal--inline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-m);
}

.site-footer--lean .site-footer__legal--inline a {
	color: var(--color-dark-muted);
	font-size: var(--text-xs);
	font-weight: 500;
}

.site-footer--lean .site-footer__legal--inline a:hover,
.site-footer--lean .site-footer__legal--inline a:focus-visible {
	color: #ffffff;
}

.lang-switch__list {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Separator between the codes, drawn rather than typed so it never gets read
   out as text. */
.lang-switch__item + .lang-switch__item {
	padding-left: var(--space-2xs);
	border-left: 1px solid currentcolor;
	line-height: 1;
}

.lang-switch__link {
	color: inherit;
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-decoration: none;
	opacity: 0.65;
	transition: opacity var(--transition);
}

a.lang-switch__link:hover,
a.lang-switch__link:focus-visible {
	color: inherit;
	opacity: 1;
}

.lang-switch__link.is-current {
	opacity: 1;
}

/* The language name is on the abbr for screen readers; no dotted underline. */
.lang-switch__link abbr {
	text-decoration: none;
}

/* Overlay-only: lives in the markup at every width, so it is switched off here. */
.lang-switch--nav {
	display: none;
}

@media (max-width: 860px) {
	/* Branding, cart and toggle stay above the overlay: the logo keeps its
	   place, the burger doubles as the close button, and the cart link stays
	   reachable — someone who opens the menu with a bike in the basket should
	   not have to close it again to get there. It inherits --header-ink, so the
	   nav-open rule below turns it white with the rest of the bar. */
	.site-header__branding,
	.site-header__actions,
	.nav-toggle {
		position: relative;
		z-index: 2;
	}

	.nav-toggle {
		display: block;
		order: 3;
	}

	.lang-switch--header {
		display: none;
	}

	/* The switcher moves into the overlay, where there is room for it. */
	.lang-switch--nav {
		display: block;
	}

	.lang-switch--nav .lang-switch__link {
		color: #ffffff;
		font-size: var(--text-lg);
	}

	/*
	 * Full-screen menu. It sits at z-index 1 inside the header's stacking
	 * context — below the logo, the cart link and the toggle, above the page.
	 * That way the bar stays put and only one close control exists.
	 */
	.site-nav {
		position: fixed;
		inset: 0;
		z-index: 1;
		display: grid;
		place-items: center;
		background: var(--color-dark);
		visibility: hidden;
		opacity: 0;
		/*
		 * visibility switches instantly on open and only waits on close. If it
		 * were transitioned in both directions the overlay would still be
		 * invisible the moment the script tries to move focus into it — and
		 * focus() on an invisible element is silently ignored.
		 */
		transition: opacity var(--transition), visibility 0s var(--transition);
	}

	.site-nav.is-open {
		visibility: visible;
		opacity: 1;
		transition: opacity var(--transition), visibility 0s;
	}

	/* Darkens the overlay ground a step further. */
	.site-nav::after {
		content: "";
		position: absolute;
		inset: 0;
		background: rgb(0 0 0 / 72%);
	}

	.site-nav__inner {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-l);
		width: 100%;
		max-height: 100svh;
		padding: calc(var(--header-height) + var(--space-l)) var(--gutter) var(--space-l);
		overflow-y: auto;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: center;
		gap: var(--space-m);
		width: 100%;
	}

	.site-nav__list > li > a {
		display: inline-block;
		padding: var(--space-3xs) 0;
		color: #ffffff;
		font-size: clamp(1.35rem, 1rem + 2.4vw, 2rem);
		font-weight: 400;
		letter-spacing: 0.04em;
	}

	/* Current page: mint underline, matching the desktop treatment. */
	.site-nav__list > li > a::after {
		bottom: -0.1em;
		height: 2px;
		background: var(--color-brand-soft);
	}

	.site-nav__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		box-shadow: none;
		border: 0;
		background: transparent;
		padding: var(--space-2xs) 0 0;
		text-align: center;
	}

	.site-nav__list .sub-menu a {
		color: rgb(255 255 255 / 82%);
		font-size: var(--text-base);
	}

	/* While the menu is open the bar is see-through and white, whatever page. */
	body.nav-open .site-header {
		--header-ink: #ffffff;
		--header-bg: transparent;
	}

	body.nav-open .site-header.is-stuck {
		--header-ink: #ffffff;
		--header-bg: transparent;
		box-shadow: none;
	}

	body.nav-open .site-logo--single .site-logo__img--dark {
		filter: brightness(0) invert(1);
	}

	/* Stops the page behind scrolling while the menu is open. */
	body.nav-open {
		overflow: hidden;
	}
}

/* ---------------------------------------------------------- Site footer */

.site-footer {
	margin-top: auto;
	padding-block: var(--space-xl) var(--space-l);
	background: var(--color-footer-bg);
	color: var(--color-dark-text);
	font-size: var(--text-sm);
}

.site-footer a {
	color: var(--color-dark-text);
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: #ffffff;
}

/*
 * Three tracks: brand and social, newsletter, legal links hard right. Each one
 * collapses out on its own when empty, so a site that fills in only some of the
 * footer does not end up with gaps in the grid.
 */
.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	padding-bottom: var(--space-xl);
}

@media (min-width: 720px) {
	.site-footer__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-l);
	}
}

@media (min-width: 1100px) {
	.site-footer__grid {
		grid-template-columns: 1fr minmax(0, 1.3fr) auto;
		gap: var(--space-xl);
		align-items: start;
	}
}

.site-footer__grid > div:empty {
	display: none;
}

/* The dark mark would vanish on the dark footer, so it is tinted white. */
.site-footer .site-logo--single .site-logo__img--dark {
	filter: brightness(0) invert(1);
}

.site-footer__brand .site-title,
.site-footer__brand .custom-logo-link {
	display: inline-block;
	margin-bottom: var(--space-m);
	font-size: var(--text-2xl);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #ffffff;
}

.site-footer__brand img {
	max-height: 2.75rem;
	width: auto;
}

.site-footer__menu,
.site-footer__legal,
.social-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__menu li + li {
	margin-top: var(--space-2xs);
}

.site-footer__menu a {
	text-decoration: none;
}

.site-footer__menu a:hover,
.site-footer__menu a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ------------------------------------------------------ Footer: social row */

.social-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-top: var(--space-l);
}

/*
 * Solid white discs with the dark glyph; hover inverts to an outline. Both
 * selectors carry .site-footer so they beat the footer's generic link colour
 * on specificity rather than on source order.
 */
.site-footer .social-list__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border: 2px solid #ffffff;
	border-radius: var(--radius-full);
	background-color: #ffffff;
	color: var(--color-footer-bg);
	transition: background-color var(--transition), color var(--transition);
}

.site-footer .social-list__link:hover,
.site-footer .social-list__link:focus-visible {
	background-color: transparent;
	color: #ffffff;
}

.social-list__icon {
	width: 1.6rem;
	height: 1.6rem;
	stroke-width: 2;
}

/* A network with no glyph of its own falls back to its label as a pill. */
.social-list__link:has(.social-list__label) {
	width: auto;
	padding-inline: var(--space-s);
	font-weight: 650;
}

/* ------------------------------------------------------ Footer: newsletter */

.site-footer__newsletter-title {
	margin: 0 0 var(--space-3xs);
	color: #ffffff;
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 700;
}

.site-footer__newsletter-text {
	margin: 0 0 var(--space-s);
	color: #ffffff;
	font-weight: 600;
	line-height: var(--leading-snug);
}

/*
 * Input and submit read as one pill: the button sits inside the field's rounded
 * end rather than beside it.
 */
.newsletter-form {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	max-width: 24rem;
	padding: 0.25rem 0.25rem 0.25rem 0.2rem;
	border-radius: var(--radius-full);
	background-color: #ffffff;
}

/* Exactly as tall as the arrow button: the pill is the button plus its inset. */
.newsletter-form__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 2.2rem;
	padding: 0 0.9em;
	border: 0;
	background: transparent;
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
}

.newsletter-form__input::placeholder {
	color: var(--color-text);
	opacity: 1;
}

.newsletter-form__input:focus {
	outline: 0;
}

/*
 * The pill is the field's frame, so the focus colours its rim — a shadow, not
 * a border, so the pill does not grow by a pixel. :has(:focus-visible) rather
 * than :focus-within, in step with the fields elsewhere.
 */
.newsletter-form:not(.newsletter-form--fluent):has(:focus-visible) {
	box-shadow: 0 0 0 2px var(--color-brand-soft);
}

.newsletter-form__submit {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.2rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius-full);
	background-color: var(--color-surface-alt);
	color: var(--color-text);
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition);
}

.newsletter-form__submit:hover,
.newsletter-form__submit:focus-visible {
	background-color: var(--color-dark);
	color: #ffffff;
}

/*
 * The Fluent Forms variant of the pill. The plugin's markup is a two-column
 * container with a labelled email field and a submit button; these rules
 * fold it into the same single line as the plain form above — label for
 * screen readers only, transparent input, round arrow button. The plugin's
 * per-form <style> sets the button colours, hence !important there.
 */
.site-footer .newsletter-form--fluent {
	display: block;
	padding: 0;
	background: none;
	border-radius: 0;
}

/*
 * The pill is the <form>; the flex row is its <fieldset> — the plugin wraps
 * every form in one, with inline !important styles for border, padding and
 * background (which is why the white ground sits on the form, not on it).
 * The legend is the form title, hidden here; the column container is
 * flattened so both cells are direct flex items.
 */
.site-footer .newsletter-form--fluent .fluentform .frm-fluent-form {
	max-width: 24rem;
	padding: 0.25rem 0.25rem 0.25rem 0.2rem;
	border-radius: var(--radius-full);
	background-color: #ffffff;
}

.site-footer .newsletter-form--fluent .frm-fluent-form fieldset {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
}

.site-footer .newsletter-form--fluent .frm-fluent-form legend {
	display: none !important;
}

.site-footer .newsletter-form--fluent .ff-t-container {
	display: contents;
}

.site-footer .newsletter-form--fluent .ff-t-cell {
	flex: none !important;
	width: auto !important;
	padding: 0 !important;
}

.site-footer .newsletter-form--fluent .ff-t-column-1 {
	flex: 1 1 auto !important;
	min-width: 0;
}

.site-footer .newsletter-form--fluent .ff-el-group {
	margin: 0 !important;
}

.site-footer .newsletter-form--fluent .ff-el-input--label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: 0 !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* Same height as the arrow button — the plugin's own sizing made it taller. */
.site-footer .newsletter-form--fluent .ff-el-form-control {
	width: 100%;
	height: 2.2rem !important;
	min-height: 0 !important;
	padding: 0 0.9em;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
}

.site-footer .newsletter-form--fluent .ff-el-form-control::placeholder {
	color: var(--color-text);
	opacity: 1;
}

.site-footer .newsletter-form--fluent .ff-el-form-control:focus {
	outline: 0;
}

.site-footer .newsletter-form--fluent .frm-fluent-form:has(:focus-visible) {
	box-shadow: 0 0 0 2px var(--color-brand-soft);
}

/* The submit: text for assistive tech, an arrow for everyone else. */
.site-footer .newsletter-form--fluent .ff-btn-submit.ff_btn_style,
.site-footer .newsletter-form--fluent .ff-btn-submit {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.2rem;
	margin: 0 !important;   /* the plugin's 20px below the button stretched the pill */
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--radius-full) !important;
	background-color: var(--color-surface-alt) !important;
	color: var(--color-text) !important;
	font-size: 0 !important;
	line-height: 0;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition);
}

.site-footer .newsletter-form--fluent .ff-btn-submit::after {
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.site-footer .newsletter-form--fluent .ff-btn-submit.ff_btn_style:hover,
.site-footer .newsletter-form--fluent .ff-btn-submit.ff_btn_style:focus-visible,
.site-footer .newsletter-form--fluent .ff-btn-submit:hover,
.site-footer .newsletter-form--fluent .ff-btn-submit:focus-visible {
	background-color: var(--color-dark) !important;
	color: #ffffff !important;
}

/* Validation and success messages inherit the footer's white. */
.site-footer .newsletter-form--fluent .ff-errors-in-stack,
.site-footer .newsletter-form--fluent .ff-message-success,
.site-footer .newsletter-form--fluent .ff-el-is-error .text-danger {
	margin-top: var(--space-2xs);
	color: #ffffff;
	font-size: var(--text-xs);
}

.site-footer__newsletter-note {
	margin-top: var(--space-xs);
	color: var(--color-dark-muted);
	font-size: var(--text-xs);
	line-height: var(--leading-snug);
}

.site-footer__newsletter-note p {
	margin: 0;
}

.site-footer__newsletter-note a {
	color: var(--color-dark-muted);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.site-footer__newsletter-note a:hover,
.site-footer__newsletter-note a:focus-visible {
	color: #ffffff;
}

/* ----------------------------------------------------- Footer: legal links */

.site-footer__links {
	display: grid;
	gap: var(--space-m);
}

/* Right-aligned stack, but only once it actually sits in its own column. */
@media (min-width: 1100px) {
	.site-footer__links {
		justify-items: end;
		text-align: right;
	}
}

.site-footer__legal {
	display: grid;
	gap: var(--space-3xs);
}

.site-footer__legal a {
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	align-items: center;
	justify-content: space-between;
	color: var(--color-dark-muted);
	font-size: var(--text-xs);
}

.site-footer__copyright {
	margin: 0;
}

/* ------------------------------------------------------------ Post cards */

.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: var(--space-m);
}

.card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-m);
	transition: box-shadow var(--transition), transform var(--transition);
}

.card:hover,
.card:focus-within {
	box-shadow: var(--shadow-m);
	transform: translateY(-2px);
}

.card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-surface);
}

.card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	padding: var(--space-s);
}

.card__title {
	margin: 0;
	font-size: var(--text-lg);
}

.card__link {
	color: var(--color-text);
	text-decoration: none;
}

.card__link:hover,
.card__link:focus-visible {
	color: var(--color-accent);
}

.card__excerpt {
	color: var(--color-muted);
	font-size: var(--text-sm);
}

.entry-meta {
	margin: 0;
	color: var(--color-muted);
	font-size: var(--text-xs);
}

/* ---------------------------------------------------- Archive & headings */

.page-header__title,
.archive-header__title,
.entry-header__title {
	margin-bottom: var(--space-2xs);
	font-size: var(--text-3xl);
}

.archive-header {
	margin-bottom: var(--space-l);
}

.entry-thumbnail {
	margin: 0;
}

.entry-thumbnail__image {
	width: 100%;
	border-radius: var(--radius-l);
}

/* ------------------------------------------------------- Single post hero */

/*
 * Featured image at the header's width, 16:9, and the title card pulled up
 * over its lower edge by a fixed amount. The card has its own white ground,
 * so the overlap works on any photo.
 */
.entry-hero {
	--entry-hero-overlap: clamp(2.5rem, 2rem + 4vw, 5rem);

	padding-top: var(--space-m);
	margin-bottom: var(--space-l);
}

.entry-hero__media {
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-l);
	background-color: var(--color-surface-alt);
}

.entry-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.entry-hero__card {
	position: relative;
	margin-top: calc(-1 * var(--entry-hero-overlap));
	padding: clamp(var(--space-m), 1rem + 2vw, var(--space-xl)) clamp(var(--space-m), 1rem + 2vw, var(--space-l)) var(--space-s);
	background-color: var(--color-bg);
	border-radius: var(--radius-l) var(--radius-l) 0 0;
}

.entry-hero__card .entry-header__title {
	text-wrap: balance;
}

/* The reading column keeps the content's measure to the column width. */
.entry-content .prose {
	max-width: none;
}

.entry-content .prose img {
	width: 100%;
	border-radius: var(--radius-m);
}

.pagination,

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	padding: 0.4em 0.75em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-s);
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-accent-contrast);
}

/* ------------------------------------------------- Beitrags-Navigation */

/*
 * Das Band unter einem Beitrag: der Weg zurück zur Übersicht und die beiden
 * Nachbarn als Karten mit ihrem Beitragsbild. Zwei Karten, nicht vier Zeilen
 * Text — nach einem gelesenen Artikel entscheidet das Bild, ob der nächste
 * gelesen wird.
 */
.post-nav__back {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	margin-bottom: var(--space-m);
	color: var(--color-text);
	text-decoration: none;
	font-size: var(--text-sm);
	font-weight: 600;
}

.post-nav__back:hover,
.post-nav__back:focus-visible {
	color: var(--color-accent);
}

/*
 * Zwei gleich breite Karten, die unter 720px untereinander stehen. auto-fit
 * statt einer Media Query, damit ein einzelner Nachbar — erster oder letzter
 * Beitrag — die volle Breite bekommt statt einer halben neben einer Lücke.
 */
.post-nav__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: var(--space-m);
}

.post-nav__card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 15rem;
	padding: var(--space-m);
	overflow: hidden;
	border-radius: var(--radius-l);
	background-color: var(--color-dark);
	background-image: var(--post-nav-image);
	background-size: cover;
	background-position: center;
	color: #ffffff;
	text-decoration: none;
	isolation: isolate;
	transition: transform var(--transition), box-shadow var(--transition);
}

/*
 * Der Verlauf hält den Text lesbar, egal was im Bild unten passiert — dieselbe
 * Lösung wie bei .section--bg-image, hier nur von unten statt über die ganze
 * Fläche.
 */
.post-nav__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgb(0 0 0 / 25%) 0%, rgb(0 0 0 / 75%) 100%);
}

/* Ohne Beitragsbild bleibt der dunkle Grund — dann braucht es keinen Verlauf. */
.post-nav__card--plain::before {
	background: none;
}

.post-nav__card:hover,
.post-nav__card:focus-visible {
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: var(--shadow-m);
}

.post-nav__card--next {
	text-align: right;
}

.post-nav__body {
	display: block;
	max-width: 22rem;
}

.post-nav__card--next .post-nav__body {
	margin-left: auto;
}

.post-nav__label {
	display: block;
	margin-bottom: var(--space-3xs);
	color: rgb(255 255 255 / 82%);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.post-nav__title {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: 700;
	line-height: var(--leading-tight);
	text-wrap: balance;
}

/*
 * Der Pfeil sitzt am äusseren Rand, mittig — die Richtung ist damit auf einen
 * Blick da, ohne dass die Beschriftung sie tragen muss.
 */
.post-nav__arrow {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius-full);
	background: rgb(255 255 255 / 18%);
	color: #ffffff;
	transform: translateY(-50%);
	transition: background-color var(--transition);
}

.post-nav__card--prev .post-nav__arrow {
	left: var(--space-s);
}

.post-nav__card--next .post-nav__arrow {
	right: var(--space-s);
}

.post-nav__card:hover .post-nav__arrow,
.post-nav__card:focus-visible .post-nav__arrow {
	background: rgb(255 255 255 / 32%);
}

/* Der Pfeil überlagert sonst den Text der schmalsten Karte. */
.post-nav__card--prev {
	padding-left: calc(var(--space-m) + 2.75rem);
}

.post-nav__card--next {
	padding-right: calc(var(--space-m) + 2.75rem);
}

/* ----------------------------------------------------- Forms & comments */

.search-form {
	display: flex;
	gap: var(--space-2xs);
	max-width: 30rem;
	margin-block: var(--space-s);
}

.search-form__input,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
textarea {
	width: 100%;
	padding: 0.65em 0.9em;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-s);
}

.comments-area {
	margin-top: var(--space-xl);
	padding-top: var(--space-l);
	border-top: 1px solid var(--color-border);
}

.comment-list {
	margin: 0 0 var(--space-l);
	padding: 0;
	list-style: none;
}

.comment-list .children {
	list-style: none;
	padding-left: var(--space-m);
}

.comment-body {
	padding-block: var(--space-s);
	border-bottom: 1px solid var(--color-border);
}

.comment-form p {
	margin-bottom: var(--space-s);
}

/* --------------------------------------------------------------- Notices */

.notice-inline {
	padding: var(--space-xs) var(--space-s);
	background: #fff8e1;
	border-left: 3px solid #f0b429;
	border-radius: var(--radius-s);
	color: #6b4b00;
	font-size: var(--text-sm);
}

/* ---------------------------------------------------------- Contact widget */

/*
 * The floating "Kontaktiere uns" button, bottom right, and the panel it opens
 * above itself. Fixed, so it stays reachable while scrolling; it sits below
 * the header's z-index so the open menu still covers it.
 */
/*
 * Sitzt am unteren Rand auf, nicht darüber: der Knopf ist unten flach
 * abgerundet und war dafür gedacht, mit dem Fensterrand abzuschliessen — mit
 * einem Abstand darunter sah die gerade Kante nach einem Fehler aus.
 */
.chat-widget {
	position: fixed;
	right: var(--space-s);
	bottom: 0;
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--space-xs);
}

.chat-widget__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	padding: 0.6em 1.3em;
	border: 0;
	border-radius: var(--radius-m) var(--radius-m) 0 0;
	background-color: #ffffff;
	color: var(--color-text);
	box-shadow: var(--shadow-m);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition);
}

.chat-widget__toggle:hover,
.chat-widget__toggle:focus-visible,
.chat-widget.is-open .chat-widget__toggle {
	background-color: var(--color-dark);
	color: #ffffff;
}

.chat-widget__panel {
	width: min(20rem, calc(100vw - 2 * var(--space-s)));
	padding: var(--space-m);
	background-color: #ffffff;
	color: var(--color-text-light);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-m);
}

.chat-widget__title {
	margin: 0 0 var(--space-xs);
	font-weight: 700;
}

.chat-widget__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.chat-widget__list li + li {
	margin-top: var(--space-2xs);
}

.chat-widget__link {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-xs) var(--space-s);
	border-radius: var(--radius-s);
	background-color: var(--color-surface-light);
	color: var(--color-text-light);
	text-decoration: none;
	font-weight: 600;
	transition: background-color var(--transition), color var(--transition);
}

.chat-widget__link:hover,
.chat-widget__link:focus-visible {
	background-color: var(--color-dark);
	color: #ffffff;
}

/*
 * While the booking form's sticky price bar is on the page, the widget moves
 * up so the two do not sit on top of each other on narrow screens.
 */
@media (max-width: 860px) {
	body:has(.pm-price-footer) .chat-widget {
		bottom: 4.5rem;
	}
}

@media print {
	.chat-widget {
		display: none;
	}
}