/**
 * 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.
 *
 * Subset to Latin (2026-10; Sans 168 → 67 KB, Serif 424 → 235 KB), axes and
 * OpenType features kept: Basic Latin, Latin-1, Latin Extended-A, general
 * punctuation (incl. U+202F), super-/subscripts, currency, ™ №, arrows, − ≈ ≠
 * ≤ ≥ and ✓ (the booking app). A character outside falls back to the system
 * font. To change the set, subset the originals from git again:
 *
 * pyftsubset <original>.woff2 --flavor=woff2 --layout-features='*' --name-IDs='*'
 *   --unicodes="U+0000-00FF,U+0100-017F,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
 *   U+0300-0308,U+030A,U+030C,U+0327-0328,U+2000-206F,U+2070-209F,
 *   U+20A0-20CF,U+2113,U+2116,U+2122,U+2126,U+212E,U+2190-2199,U+2212,
 *   U+2215,U+2248,U+2260,U+2264-2265,U+2713-2714,U+2717,U+FB01-FB02,U+FEFF,
 *   U+FFFD" --output-file=<name>.woff2
 */
@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 {
	/*
	 * The styleguide palette (2026-10): five colours, everything below points
	 * at them. Nebelblau carries a faint blue on purpose; the rest are
	 * neutrals. The settings modal offers exactly these five as section
	 * backgrounds (pmt_section_setting_options(), swatches in admin.css).
	 */
	--pm-anthrazit: #413f3b;  /* text, buttons, logo, footer, icons — the main colour */
	--pm-nebelblau: #ceced2;  /* product cards, hero areas, section backgrounds */
	--pm-hellgrau: #eeedee;   /* light surfaces */
	--pm-weiss: #ffffff;      /* the page, the booking bar, text on anthracite */
	--pm-schwarz: #020407;    /* single texts and lines; the hover tone */

	/* Styleguide shapes. */
	--radius-ui: 12px;        /* buttons, cards, the booking form */
	--radius-section: 0;      /* full-width sections */
	--line: 3.6px;            /* dividers, icons */
	/* The white gap above and below coloured sections (template): ~3.5 % of the window. */
	--frame: clamp(0.75rem, 3.5vw, 3.5rem);

	--color-bg: var(--pm-weiss);
	--color-surface-alt: var(--pm-hellgrau);
	/*
	 * The closing band, the step panels and the contact card. Darker than
	 * --color-surface-alt so it reads as a distinct block; anthracite text on
	 * it reaches 6.7:1.
	 */
	--color-surface-strong: var(--pm-nebelblau);

	/*
	 * 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: var(--pm-hellgrau);
	--color-text-light: var(--pm-anthrazit);
	/* Anthracite lightened, so grey text keeps its warmth — 5.4:1 on white. */
	--color-muted-light: color-mix(in srgb, var(--pm-anthrazit) 78%, var(--pm-weiss));
	--color-border-light: var(--pm-nebelblau);

	/*
	 * Muted text on Nebelblau. The default grey reaches only 3.3:1 there; this
	 * mix about 4.7:1. Used by .section--bg-mist and the grey post cards.
	 */
	--color-muted-on-mist: color-mix(in srgb, var(--pm-anthrazit) 85%, var(--pm-nebelblau));

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

	/* Anthracite is the main colour, Tiefschwarz its hover tone (styleguide). */
	--color-brand: var(--pm-anthrazit);
	--color-accent-hover: var(--pm-schwarz);

	--color-accent: var(--color-brand);
	--color-accent-contrast: var(--pm-weiss);
	/* Dark sections and the footer: both anthracite since the styleguide. */
	--color-dark: var(--pm-anthrazit);
	--color-footer-bg: var(--pm-anthrazit);
	--color-dark-text: var(--pm-weiss);
	/* Nebelblau as the quiet text on anthracite — 6.7:1, the old grey was 4.2. */
	--color-dark-muted: var(--pm-nebelblau);

	/*
	 * on-dark: what a button or link turns into on a dark section — white
	 * with anthracite text, the styleguide's "Kontaktiere uns" on dark.
	 * soft: a pale tint for underline strokes and badges, mixed from the brand
	 * so it follows it.
	 */
	--color-accent-on-dark: var(--pm-weiss);
	--color-brand-soft: color-mix(in srgb, var(--color-brand) 10%, #ffffff);

	/*
	 * The flat tint the decorative patterns are drawn on: the neutral grey the
	 * contour artwork came with (#B3B3B3), not one of the five palette colours.
	 * Nebelblau was tried here and dropped again (2026-10-08).
	 */
	--color-pattern-tint: #b3b3b3;

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

	/* 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. -m (buttons, inputs) and -l (cards) both follow --radius-ui. */
	--radius-s: 4px;
	--radius-m: var(--radius-ui);
	--radius-l: var(--radius-ui);
	--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;
	/*
	 * «Geschäftsbedingungen» at --text-3xl is wider than a phone. Long compounds
	 * hyphenate; the limits keep ordinary words whole (Safari reads only the
	 * -webkit- pair). overflow-wrap catches what the dictionary cannot split.
	 */
	overflow-wrap: break-word;
	hyphens: auto;
	hyphenate-limit-chars: 14 6 6;
	-webkit-hyphenate-limit-before: 6;
	-webkit-hyphenate-limit-after: 6;
}

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
 * WooCommerce pages (cart, checkout, My Account) with their shortcode.
 *
 * 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 block 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);
}

/*
 * The page title band (page.php) sits on Hellgrau, set apart from the white
 * header above and the section below — with the same room above and below
 * the title instead of the open section rhythm.
 */
.section.page-header {
	--section-bg: var(--pm-hellgrau);

	padding-block: clamp(var(--space-l), 1rem + 3vw, var(--space-xl));
}

/* Content without a builder sat flush under the white header; under the grey band it needs its gap back. */
.page-header + .section--pt-none {
	padding-top: var(--section-space);
}

/*
 * The white gap between blocks (template): every section that paints a
 * background of its own keeps --frame of white above and below it, full
 * width — so two coloured sections in a row are always parted by a white
 * strip (the margins between them collapse into one). No inset at the
 * sides. White sections need no gap, they are the gap; their rhythm stays
 * as it was. The CTA banner counts as coloured even on "none"
 * (cta-banner.css fills it).
 */
.section:is(.section--bg-light, .section--bg-mist, .section--bg-dark, .section--bg-black, .section--bg-image, .section--bg-pattern),
.section.page-header,
.section--cta-banner.section--bg-none {
	margin-block: var(--frame);
}

/*
 * The first block of a page starts right under the header, no white strip
 * above it. Also when it comes from a global section inside a wrapper.
 */
.site-main > .section:first-child,
.site-main > :first-child > .section:first-child {
	margin-top: 0;
}

/*
 * 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);
}

/*
 * Nebelblau. The default grey text and the hairlines would sink into it, so
 * both darken here.
 */
.section--bg-mist {
	--section-bg: var(--pm-nebelblau);
	--color-muted: var(--color-muted-on-mist);
	--color-border: color-mix(in srgb, var(--pm-anthrazit) 25%, var(--pm-nebelblau));
}

/*
 * Anthrazit (key `dark`) and Tiefschwarz (`black`): white text, and buttons
 * turn white with anthracite text — the styleguide's buttons on dark.
 * The «Akzent» background left with the styleguide palette; old rows read
 * as `dark` (pmt_section_settings_upgrade()).
 */
.section--bg-dark,
.section--bg-black {
	--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(--section-bg));
	--color-border: color-mix(in srgb, var(--color-dark-text) 18%, transparent);
	--color-accent: var(--color-accent-on-dark);
	--color-accent-hover: var(--pm-hellgrau);
	--color-accent-contrast: var(--color-dark);
}

.section--bg-black {
	--section-bg: var(--pm-schwarz);
}

.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: var(--pm-hellgrau);
	--color-accent-contrast: var(--color-dark);

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

/*
 * Phones get the smaller file (pmt_section_bg_image_urls()). The query is the
 * one on the preload links of pmt_preload_section_image() — change both
 * together, or a phone downloads the image twice.
 */
@media (max-width: 47.99rem) {
	.section--bg-image {
		background-image: var(--section-bg-image-small, var(--section-bg-image));
	}
}

.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);

	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;
}

/*
 * Section setting «Fixiert»: the pattern stays put behind the content and fills
 * the viewport, at the same scale however tall the section is. The technique of
 * the legal pages (text.css): a fixed pseudo-element, because iOS ignores
 * background-attachment; clip-path confines it to the section and keeps
 * z-index: -1 above the tint.
 */
.section--bg-fixed {
	background-image: none;
	clip-path: inset(0);
}

.section--bg-fixed::before {
	content: "";
	position: fixed;
	inset: 0 0 auto;
	z-index: -1;
	height: 100lvh;
	background: var(--section-bg-image) 0 0 / 600px 600px repeat;
}

.section--bg-fixed.section--pattern-topo::before {
	background: var(--section-bg-image) center / cover no-repeat;
}

/*
 * 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-black and --bg-image all repoint --color-text at 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-black :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(--pm-schwarz);
	--color-accent-contrast: var(--pm-weiss);

	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;
}

/* 800: at the same number the serif reads lighter than the sans beside it. */
.section__title-lead {
	font-family: var(--font-heading);
	font-weight: 800;
}

.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;
	/*
	 * A URL in a legal text is one word longer than a phone line. Scoped here,
	 * not on body: inherited into the plugin's search form it adds a line box
	 * under its inline-flex type switch.
	 */
	overflow-wrap: break-word;
}

.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: var(--space-s) var(--space-m);
	border-radius: var(--radius-m);
	background: var(--color-surface);
	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);
}

/*
 * Wide tables scroll sideways inside the text column instead of widening the
 * page: as a block, the table element is its own scroll box and the rows keep
 * their table layout inside it. The inline height TinyMCE writes when a table
 * is resized would turn that box into a vertical scroller, hence !important.
 * In articles the info box around the table scrolls instead (post-article.css).
 */
.prose table {
	display: block;
	max-width: 100%;
	height: auto !important;
	overflow-x: auto;
}

.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 */

/*
 * Styleguide: primary 54px high, radius 12, Sans Bold 20. A rounded
 * rectangle, not a pill — the shape every section's button shares. The
 * border is part of the height (2px, transparent on filled buttons), so a
 * filled and an outlined button stand the same size side by side.
 */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	min-height: 54px;
	padding: 0.4em 1.4em;
	border: 2px solid transparent;
	border-radius: var(--radius-ui);
	font-size: 1.25rem;
	font-weight: 700;
	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);
}

/*
 * Styleguide «Gross»: 97px high, Sans Bold 36. Only the style guide shows it;
 * the CTA banner, its one use, went to the normal button (2026-11-01). Scales
 * down on a phone, where 36px bold breaks a two-word label.
 */
.button--large {
	min-height: clamp(4rem, 2.6rem + 4vw, 97px);
	padding-inline: 1.3em;
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
}

.button--small {
	min-height: 0;
	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;
}

/*
 * Dropdown, three languages and up (pmt_language_dropdown()): globe and the
 * current code in the bar, the full list in a panel styled like the sub menu.
 */
.lang-switch__dropdown {
	position: relative;
}

.lang-switch__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	min-height: 2.75rem;
	color: inherit;
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	list-style: none;
	cursor: pointer;
	user-select: none;
	transition: opacity var(--transition);
}

/* Safari still draws its own triangle without this. */
.lang-switch__toggle::-webkit-details-marker {
	display: none;
}

.lang-switch__toggle:hover {
	opacity: 0.7;
}

.lang-switch__globe,
.lang-switch__chevron {
	display: block;
	flex-shrink: 0;
}

.lang-switch__chevron {
	transition: transform var(--transition);
}

.lang-switch__dropdown[open] .lang-switch__chevron {
	transform: rotate(180deg);
}

.lang-switch__panel {
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 10rem;
	margin: 0;
	padding: var(--space-2xs);
	list-style: none;
	background: var(--color-bg);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-m);
}

.lang-switch__dropdown[open] .lang-switch__panel {
	animation: lang-switch-in var(--transition);
}

@keyframes lang-switch-in {
	from {
		opacity: 0;
		transform: translateY(-0.25rem);
	}
}

.lang-switch__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xs);
	padding: var(--space-2xs) var(--space-xs);
	border-radius: var(--radius-s);
	color: inherit;
	font-size: var(--text-sm);
	font-weight: 500;
	text-decoration: none;
}

a.lang-switch__option:hover,
a.lang-switch__option:focus-visible {
	color: inherit;
	background: var(--color-surface);
}

.lang-switch__option.is-current {
	font-weight: 700;
}

/* Check mark, drawn so it never gets read out. */
.lang-switch__option.is-current::after {
	content: "";
	width: 0.35em;
	height: 0.7em;
	margin-right: 0.15em;
	border: solid currentcolor;
	border-width: 0 2px 2px 0;
	transform: translateY(-0.1em) rotate(45deg);
}

/* 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 field: the button sits inside the field's
 * end rather than beside it. Styleguide colours and radius: a white field
 * (radius 12), the button in Nebelblau with an inner radius that follows the
 * field's corner.
 */
.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-ui);
	background-color: var(--pm-weiss);
}

/* 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: calc(var(--radius-ui) - 0.25rem);
	background-color: var(--pm-schwarz);
	color: var(--pm-weiss);
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition);
}

.newsletter-form__submit:hover,
.newsletter-form__submit:focus-visible {
	background-color: var(--pm-nebelblau);
	color: var(--pm-anthrazit);
}

/*
 * 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-ui);
	background-color: var(--pm-weiss);
}

.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: calc(var(--radius-ui) - 0.25rem) !important;
	background-color: var(--pm-schwarz) !important;
	color: var(--pm-weiss) !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(--pm-nebelblau) !important;
	color: var(--pm-anthrazit) !important;
}

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

/* The success message takes the form's place: a grey box on the dark footer. */
.site-footer .newsletter-form--fluent .ff-message-success {
	margin-top: var(--space-2xs);
	padding: var(--space-s);
	border: 0;
	border-radius: var(--radius-m);
	background-color: var(--pm-nebelblau);
	box-shadow: none;
	color: var(--pm-schwarz);
	font-size: var(--text-xs);
}

.site-footer .newsletter-form--fluent .ff-message-success p:last-child {
	margin-bottom: 0;
}

.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-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);
}

/*
 * A white rim on three sides, like the footer's social icons: invisible on
 * the white button, it frames the anthracite hover state — over the footer
 * the button would otherwise melt into the anthracite behind it. No rim at
 * the bottom, which sits on the window edge.
 */
.chat-widget__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	padding: 0.6em 1.3em;
	border: 2px solid var(--pm-weiss);
	border-bottom: 0;
	border-radius: var(--radius-m) var(--radius-m) 0 0;
	background-color: var(--pm-weiss);
	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;
	}
}