/*
 * MARLÉ theme – mobile first.
 *
 * Structure:  reset → tokens → base → layout → components → themes → utilities
 * Colours:    the palette lives in CSS variables. Their values are printed into <head> from the
 *             "Website-Einstellungen" (see SettingsPage::themeCss), so editors change colours in the admin.
 * Breakpoints (em): 40 = large phone / small tablet · 48 = tablet · 64 = laptop · 72 = desktop
 */

@font-face {
	font-family: "Cormorant Garamond";
	src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	size-adjust: 118%;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Cormorant Garamond";
	src: url("../fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	size-adjust: 118%;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Cormorant Garamond";
	src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
	font-weight: 300 700;
	font-style: italic;
	font-display: swap;
	size-adjust: 118%;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Cormorant Garamond";
	src: url("../fonts/cormorant-garamond-italic-latin-ext.woff2") format("woff2");
	font-weight: 300 700;
	font-style: italic;
	font-display: swap;
	size-adjust: 118%;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Kumbh Sans";
	src: url("../fonts/kumbh-sans-normal-300-600.woff2") format("woff2");
	font-weight: 300 600;
	font-style: normal;
	font-display: swap;
}

@layer reset, tokens, base, layout, components, themes, utilities;

/* ============================================================================================
   RESET
   ========================================================================================== */
@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }
	body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
	img, picture, svg, video { display: block; max-width: 100%; }
	img { height: auto; }
	button, input, select, textarea { font: inherit; color: inherit; }
	button { cursor: pointer; }
	a { color: inherit; }
	address { font-style: normal; }
	[hidden] { display: none !important; }
}

/* ============================================================================================
   TOKENS  (defaults – overridden by the inline <style id="marle-theme"> from the admin settings)
   ========================================================================================== */
@layer tokens {
	:root {
		--font-display: "Cormorant Garamond", Garamond, "Times New Roman", serif;
		--font-ui: "Kumbh Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

		/* palette: the five original brand colours (SettingsPage::DEFAULT_COLORS). The admin's values are printed into <head>
		   (SettingsPage::themeCss) and win over these defaults. */
		--midnight: #0d1a28;   --midnight-rgb: 13 26 40;   /* Mitternachtsblau */
		--white: #ffffff;      --white-rgb: 255 255 255;   /* Weiß */
		--sand: #d8bb8a;       --sand-rgb: 216 187 138;    /* Warmes Sand */
		--olive: #4e5339;      --olive-rgb: 78 83 57;      /* Olivgrün */
		--black: #000000;      --black-rgb: 0 0 0;         /* Schwarz */
		/* derived: */
		--midnight-2: #13202d; --midnight-2-rgb: 19 32 45; /* cards / footer on dark pages: midnight lifted 2.5 % towards white */
		--olive-on-sand: #494e36; --olive-on-sand-rgb: 73 78 54; /* olive darkened until it reads 4.5 : 1 on sand */
		--ivory: var(--white); --ivory-rgb: var(--white-rgb); /* text on dark pages */
		--paper: var(--white); --paper-rgb: var(--white-rgb); /* background of light pages */
		--on-sand: #000000;
		--on-midnight: #ffffff;
		--pattern-dark: none;
		--pattern-sand: none;

		/* layout */
		--gutter: clamp(1.25rem, 5vw, 2.5rem);
		--container: 76rem;
		--header-h: 4rem;
		--section-y: clamp(3.5rem, 8vw, 7rem);
		--radius: 3px;
		--ease: cubic-bezier(.2, .7, .2, 1);
	}
}

/* ============================================================================================
   BASE
   ========================================================================================== */
@layer base {
	html { background: var(--bg); color: var(--fg); }
	body {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		font-family: var(--font-ui);
		font-size: 1rem;
		line-height: 1.65;
		font-variant-numeric: lining-nums; /* Cormorant Garamond has old-style digits by default; prices and times read better lining */
		color: var(--fg);
		background: transparent;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	main { flex: 1 0 auto; }
	main:focus { outline: none; }
	h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.25; text-wrap: balance; overflow-wrap: break-word; }
	p { text-wrap: pretty; }
	em { font-style: italic; }
	a { text-decoration-thickness: 1px; text-underline-offset: .2em; }
	:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
	::selection { background: var(--accent); color: var(--bg); }

	/* full-viewport damask pattern behind everything (photo-safe: it is fixed, not tiled, so it has no seams) */
	.site-bg {
		position: fixed;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background-image: var(--pattern, none);
		background-size: cover;
		background-position: center top;
		opacity: var(--pattern-opacity, 0);
		mix-blend-mode: var(--pattern-blend, normal);
	}
}

/* ============================================================================================
   LAYOUT
   ========================================================================================== */
@layer layout {
	.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
	.container--wide { --container: 76rem; } /* same as the default; kept so templates can say what they mean */
	.container--narrow { --container: 46rem; }
	.section { padding-block: var(--section-y); }
	.section--tight { padding-block: clamp(1.5rem, 4vw, 2.75rem); }
	.section__head { margin-bottom: clamp(1.5rem, 4vw, 2.75rem); }

	.skip-link {
		position: fixed; top: .5rem; left: .5rem; z-index: 100;
		padding: .8rem 1.1rem;
		background: var(--btn-bg); color: var(--btn-fg);
		font-weight: 500; text-decoration: none;
		transform: translateY(-200%);
	}
	.skip-link:focus { transform: none; }

	/* ---- header ---- */
	/* the header is Mitternachtsblau in EVERY colour world (Dunkel, Hell, Sand) and in every state (at the top over the photo, scrolled): solid,
	   with the light dark-world tokens (see ".site-header" next to ".on-dark" in "themes": white menu, sand wordmark, sand button) */
	.site-header {
		position: sticky; top: 0; z-index: 40;
		height: var(--header-h);
		background: var(--midnight);
		border-bottom: 1px solid rgb(var(--sand-rgb) / .22);
	}
	.site-header__inner {
		height: 100%;
		max-width: calc(76rem + 2 * var(--gutter));
		margin-inline: auto;
		padding-inline: var(--gutter);
		display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	}
	.site-header__actions { display: flex; align-items: center; gap: 1.25rem; }
	/* pages that start with a full-bleed photo: the photo runs up under the (solid) header, so the hero keeps its size */
	.has-cover main { margin-top: calc(var(--header-h) * -1); }

	/* ---- footer ---- */
	.site-footer {
		margin-top: auto;
		padding-top: clamp(3rem, 7vw, 5rem);
		background: var(--midnight-2);
		border-top: 1px solid rgb(var(--sand-rgb) / .2);
	}
	.footer__grid { display: grid; gap: 2.5rem; width: min(100% - 2 * var(--gutter), 76rem); margin-inline: auto; }
	@media (min-width: 40em) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
	@media (min-width: 64em) { .footer__grid { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 3rem; } }
	.footer__bottom {
		display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem;
		width: min(100% - 2 * var(--gutter), 76rem); margin-inline: auto;
		margin-top: clamp(2.5rem, 6vw, 4rem); padding-block: 1.5rem;
		border-top: 1px solid var(--line);
		font-size: .8125rem; color: var(--muted);
	}
}

/* ============================================================================================
   COMPONENTS
   ========================================================================================== */
@layer components {

	/* ---------- typography ---------- */
	.eyebrow {
		display: block;
		font: 500 .75rem/1.4 var(--font-ui);
		letter-spacing: .22em;
		text-transform: uppercase;
		text-wrap: pretty; /* the same whether the small line is a <p> or a heading (start page <h1>, no headings in the footer) */
		color: var(--accent);
	}
	.eyebrow + .hero__title, .eyebrow + .h2 { margin-top: .9rem; }
	.h2 { font-size: clamp(1.85rem, 1.4rem + 1.9vw, 3rem); line-height: 1.22; }
	.h2 em, .hero__title em { font-style: italic; color: var(--accent); }
	.lead { margin-top: 1rem; max-width: 36rem; font-size: 1.0625rem; color: var(--muted); }
	.prose { max-width: 40rem; }
	.prose > * + * { margin-top: 1.1em; }
	.prose h2 { margin-top: 2em; font-size: 1.6rem; }
	.prose h3 { margin-top: 1.6em; font-size: 1.3rem; }
	.prose a { color: var(--accent); }
	.prose ul, .prose ol { padding-left: 1.25rem; }
	.prose strong { font-weight: 600; }
	.prose--lead { max-width: none; }
	.prose--lead p { font-family: var(--font-display); font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem); line-height: 1.5; }
	.link-arrow { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: .8125rem; color: var(--accent); text-decoration: none; }
	.link-arrow .icon { width: 1.25rem; height: 1.25rem; transition: transform .25s var(--ease); }
	.link-arrow:hover .icon { transform: translateX(.3rem); }

	/* ---------- brand + header controls ---------- */
	.brand { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
	.brand__word {
		font-family: var(--font-display);
		font-size: 1rem; line-height: 1;
		letter-spacing: .42em; margin-right: -.42em;
		text-transform: uppercase;
		color: var(--brand, var(--accent));
	}
	.brand__logo { height: 2.25rem; width: auto; }

	.menu-btn {
		display: inline-flex; align-items: center; gap: .8rem;
		min-height: 2.75rem; min-width: 2.75rem; padding: 0 .25rem;
		background: none; border: 0; color: var(--fg);
		font: 500 .75rem/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase;
	}
	.menu-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	@media (min-width: 40em) {
		.menu-btn__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
	}
	.menu-btn__icon { display: grid; gap: .36rem; width: 1.5rem; }
	.menu-btn__icon i { display: block; height: 1px; background: currentColor; transition: transform .25s var(--ease); }
	.menu-btn:hover .menu-btn__icon i:first-child { transform: translateY(-1px); }
	.menu-btn:hover .menu-btn__icon i:last-child { transform: translateY(1px); }
	.menu-btn__x { width: 1.5rem; height: 1.5rem; }
	.no-js .menu-btn[data-dialog-open] { display: none; }

	/* ---------- buttons ---------- */
	.btn {
		display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
		min-height: 3.25rem; padding: .9rem 1.6rem;
		border: 1px solid transparent; border-radius: 2px;
		font: 500 .8125rem/1.2 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; text-align: center; text-decoration: none;
		cursor: pointer;
		transition: background-color .2s, border-color .2s, color .2s, filter .2s;
	}
	.btn .icon { width: 1.1rem; height: 1.1rem; }
	.btn--primary { background: var(--btn-bg); color: var(--btn-fg); }
	.btn--primary:hover { filter: brightness(1.08); }
	.btn--ghost { border-color: rgb(var(--fg-rgb) / .45); color: var(--fg); background: transparent; }
	.btn--ghost:hover { border-color: var(--fg); background: rgb(var(--fg-rgb) / .08); }
	.btn--small { min-height: 2.5rem; padding: .55rem 1.1rem; font-size: .75rem; }
	.header-cta { display: none; }
	@media (min-width: 40em) { .header-cta { display: inline-flex; } }
	.btn--block { display: flex; width: 100%; }
	.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

	.badge {
		display: inline-block; padding: .3rem .5rem;
		background: var(--btn-bg); color: var(--btn-fg); border-radius: 2px;
		font: 500 .6875rem/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
	}
	.badge--inline { margin-left: .5rem; vertical-align: .15em; }

	/* ---------- overlays: menu, reservation, dish sheet, lightbox ---------- */
	dialog { color: inherit; }
	dialog::backdrop { background: rgb(6 16 29 / .75); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } /* constant colour: ::backdrop does not reliably inherit custom properties */
	html.is-locked { overflow: hidden; }

	.nav-dialog {
		position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
		margin: 0; padding: 0; border: 0; overflow: hidden;
		background: var(--midnight); color: var(--ivory);
	}
	.nav-dialog[open] { display: block; animation: fade-in .28s var(--ease); }
	.nav-dialog::before {
		content: ""; position: absolute; inset: 0; pointer-events: none;
		background: var(--pattern-dark) center / cover; opacity: .45; mix-blend-mode: screen;
	}
	.nav-dialog__inner {
		position: relative; height: 100%; overflow-y: auto;
		display: flex; flex-direction: column;
		padding: 0 var(--gutter) max(1.5rem, env(safe-area-inset-bottom));
	}
	.nav-dialog__bar { flex: none; display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
	.nav-dialog .index { margin-top: clamp(1rem, 4vh, 2.5rem); }
	.nav-dialog__foot { margin-top: auto; padding-top: 2.5rem; }
	@media (min-width: 64em) {
		.nav-dialog { inset: 0 0 0 auto; width: min(32rem, 100%); border-left: 1px solid rgb(var(--sand-rgb) / .2); }
		.nav-dialog[open] { animation: slide-in .35s var(--ease); }
	}

	.modal {
		width: min(42rem, 100% - 1.5rem); max-width: none;
		height: min(48rem, 100% - 1.5rem); max-height: none;
		margin: auto; padding: 0; overflow: hidden;
		background: var(--midnight-2); color: var(--ivory);
		border: 1px solid rgb(var(--sand-rgb) / .3); border-radius: var(--radius);
	}
	.modal[open] { display: flex; animation: fade-up .3s var(--ease); }
	.modal__inner { display: flex; flex-direction: column; width: 100%; min-height: 0; }
	.modal__head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: .5rem 1.25rem; border-bottom: 1px solid var(--line); }
	.modal__title { font-size: 1.4rem; }
	.modal__note { flex: none; padding: .75rem 1.25rem 0; font-size: .9rem; color: var(--muted); }
	.modal__body { flex: 1; min-height: 0; padding-top: .75rem; }
	.modal__body iframe { width: 100%; height: 100%; border: 0; background: #fff; }

	.sheet {
		width: 100%; max-width: none; max-height: 90vh; max-height: 90dvh;
		margin: auto 0 0; padding: 0; overflow: auto;
		background: var(--midnight-2); color: var(--ivory);
		border: 0; border-top: 1px solid rgb(var(--sand-rgb) / .25); border-radius: 1.4rem 1.4rem 0 0;
	}
	.sheet[open] { animation: sheet-in .35s var(--ease); }
	.sheet__inner { padding: 1.25rem var(--gutter) max(2rem, env(safe-area-inset-bottom)); }
	.sheet__inner::before { content: ""; display: block; width: 2.4rem; height: 3px; margin: 0 auto 1.4rem; border-radius: 2px; background: rgb(var(--sand-rgb) / .4); }
	.sheet__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: .6rem; }
	.sheet__title { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); }
	.sheet__price { font-family: var(--font-display); font-size: 1.35rem; color: var(--accent); white-space: nowrap; }
	.sheet__desc { margin-top: 1rem; color: var(--muted); }
	.sheet__wine { display: flex; gap: 1rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
	.sheet__wine .icon { flex: none; width: 1.75rem; height: 1.75rem; color: var(--accent); opacity: .8; }
	.sheet__wine-name { margin-top: .5rem; font-family: var(--font-display); font-style: italic; font-size: 1.2rem; line-height: 1.4; }
	.sheet__wine-note { margin-top: .25rem; font-size: .875rem; color: var(--muted); }
	.sheet .btn { margin-top: 1.75rem; }
	@media (min-width: 40em) {
		.sheet { width: min(34rem, 100% - 2 * var(--gutter)); margin: auto; border: 1px solid rgb(var(--sand-rgb) / .3); border-radius: var(--radius); }
		.sheet[open] { animation: fade-up .3s var(--ease); }
		.sheet__inner { padding: 2rem 2.25rem 2.25rem; }
		.sheet__inner::before { display: none; }
	}

	.lightbox {
		position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
		margin: 0; padding: 0; border: 0; background: rgb(var(--midnight-rgb) / .97); color: #fff;
	}
	.lightbox[open] { display: grid; place-items: center; animation: fade-in .25s var(--ease); }
	.lightbox__figure { display: grid; justify-items: center; gap: .75rem; max-width: min(96vw, 80rem); padding: 3.5rem 0 1.25rem; }
	.lightbox__img { width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 9rem); max-height: calc(100dvh - 9rem); object-fit: contain; border-radius: var(--radius); }
	.lightbox__caption { min-height: 1.5em; padding-inline: 1rem; font-size: .875rem; text-align: center; color: rgb(var(--ivory-rgb) / .85); }
	.lightbox__btn {
		position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0;
		background: rgb(var(--midnight-rgb) / .65); color: var(--sand);
		border: 1px solid rgb(var(--sand-rgb) / .45); border-radius: 50%;
	}
	.lightbox__btn:hover { background: var(--midnight); border-color: var(--sand); }
	.lightbox__btn .icon { width: 1.4rem; height: 1.4rem; }
	.lightbox__btn--close { top: max(1rem, env(safe-area-inset-top)); right: 1rem; }
	.lightbox__btn--prev { left: .75rem; top: 50%; transform: translateY(-50%); }
	.lightbox__btn--next { right: .75rem; top: 50%; transform: translateY(-50%); }

	/* ---------- numbered index (menu overlay + start page cards) ---------- */
	.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
	.index__link {
		position: relative;
		display: grid; grid-template-columns: 2.25rem 1fr auto; align-items: baseline; gap: .25rem;
		padding: 1.15rem 0; border-bottom: 1px solid var(--line);
		color: var(--fg); text-decoration: none; transition: color .2s;
	}
	.index__num { font-size: .75rem; letter-spacing: .1em; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }
	.index__name { font-family: var(--font-display); font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.1rem); line-height: 1.25; overflow-wrap: anywhere; transition: color .2s; }
	.index__home { width: 1.05rem; height: 1.05rem; align-self: center; }
	/* main menu on phones (screen up to 450 px wide): a badge ("KW 38", "immer Sonntags") sits under the name of its menu item, not beside it */
	@media (max-width: 450px) {
		.nav-dialog .index__aside { display: contents; }
		.nav-dialog .index__num { grid-column: 1; grid-row: 1; }
		.nav-dialog .index__name { grid-column: 2; grid-row: 1; }
		.nav-dialog .index__aside > .icon { grid-column: 3; grid-row: 1; align-self: center; }
		.nav-dialog .index__aside > .badge { grid-column: 2; grid-row: 2; justify-self: start; margin-top: .4rem; }
	}
	.index__aside { display: inline-flex; align-items: center; gap: .75rem; color: var(--accent); }
	.index__aside .icon { width: 1.25rem; height: 1.25rem; transition: transform .25s var(--ease); }
	.index__link:hover .index__name, .index__link:focus-visible .index__name { color: var(--accent); }
	.index__link:hover .icon { transform: translateX(.3rem); }
	.index__link[aria-current="page"] .index__name { font-style: italic; color: var(--accent); }
	.index__media { display: none; }

	@media (min-width: 48em) {
		.index--cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; border-top: 0; }
		.index--cards .index__link {
			--fg: var(--ivory); --accent: var(--sand); --line: rgb(var(--sand-rgb) / .25);
			display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem;
			min-height: 16rem; padding: 1.5rem;
			border: 1px solid var(--line); border-radius: var(--radius);
			overflow: hidden; isolation: isolate;
		}
		.index--cards .index__media { display: block; position: absolute; inset: 0; z-index: -2; }
		.index--cards .index__media picture, .index--cards .index__media img { width: 100%; height: 100%; }
		.index--cards .index__media img { object-fit: cover; transition: transform .9s var(--ease); }
		.index--cards .index__link::after {
			content: ""; position: absolute; inset: 0; z-index: -1;
			background: linear-gradient(180deg, rgb(var(--midnight-rgb) / .1) 0%, rgb(var(--midnight-rgb) / .9) 100%);
		}
		.index--cards .index__link:hover .index__media img { transform: scale(1.05); }
		.index--cards .index__name { font-size: clamp(1.7rem, 1.2rem + 1.1vw, 2.3rem); }
		.index--cards .index__aside { position: absolute; top: 1.25rem; right: 1.25rem; }
	}
	@media (min-width: 72em) { .index--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

	/* ---------- hero ---------- */
	.hero { position: relative; isolation: isolate; }
	.hero__inner { position: relative; }
	/* the big headline is an <h1> on most pages but a <p> on the start page (there the small line above it is the <h1>): the type is set here, not by the element */
	.hero__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 1.6rem + 4.4vw, 5rem); line-height: 1.18; letter-spacing: -.005em; text-wrap: balance; overflow-wrap: break-word; }
	.hero__lead { margin-top: 1.1rem; max-width: 34rem; font-size: 1.0625rem; color: var(--muted); }
	.hero__info { margin-top: 1.1rem; font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
	.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
	.hero__actions .btn { flex: 1 1 9rem; }
	@media (min-width: 40em) { .hero__actions .btn { flex: 0 0 auto; min-width: 12.5rem; } }
	.notes {
		display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; padding-top: 1rem;
		border-top: 1px solid var(--line);
		font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
	}
	@media (min-width: 40em) { .notes { justify-content: flex-start; gap: 2.5rem; } }

	.hero--cover {
		display: flex; flex-direction: column; justify-content: flex-end; /* text block at the bottom; the optional image stacks above it */
		min-height: min(78vh, 44rem); min-height: min(78svh, 44rem);
		padding: calc(var(--header-h) + 5rem) 0 clamp(2rem, 5vw, 3.5rem);
	}
	.hero--cover.hero--home { min-height: min(100vh, 58rem); min-height: min(100svh, 58rem); }
	.hero--cover .hero__inner { width: min(100% - 2 * var(--gutter), 76rem); margin-inline: auto; }
	/* The veil keeps the text readable on the photo (WCAG 1.4.3, measured on every page in every colour world by qa/wcag-audit.js): it starts
	   under the header (which is solid), lets the photo show in the top part where the logo sits and rises to nearly the page colour behind
	   the text block, then fades into the page. Colour = the page's --bg (Dunkel: midnight; the Hell / Sand versions are further down in "themes"). */
	.hero--cover::after {
		content: ""; position: absolute; inset: 0; z-index: -1;
		background: linear-gradient(180deg,
			rgb(var(--bg-rgb) / .9) 0, rgb(var(--bg-rgb) / .84) var(--header-h), rgb(var(--bg-rgb) / .2) calc(var(--header-h) + 6rem),
			rgb(var(--bg-rgb) / .2) 22%, rgb(var(--bg-rgb) / .58) 36%, rgb(var(--bg-rgb) / .85) 48%, rgb(var(--bg-rgb) / .92) 62%, var(--bg) 100%);
	}
	.hero--cover { overflow-x: clip; } /* whatever sticks out sideways is cut off instead of scrolling the page */

	/* the Hero Logo (Website-Einstellungen → Marke) above the headline, centered above the text block; its own proportions are kept.
	   It is as wide as the file itself (width: auto) but never wider than 300 px (or the screen on very small phones). */
	.hero__emblem { display: flex; justify-content: center; margin-bottom: clamp(1rem, 2.5vw, 1.75rem); }
	.hero__logo { display: block; width: auto; max-width: min(300px, 100%); height: auto; }
	.hero__media { position: absolute; inset: 0; z-index: -2; }
	.hero__media picture, .hero__media img { width: 100%; height: 100%; }
	.hero__media img { object-fit: cover; }
	.hero--home .hero__title { font-size: clamp(2.6rem, 1.5rem + 5vw, 5.75rem); }
	@media (max-width: 22.5em) { .hero__title, .hero--home .hero__title, .hero--simple .hero__title { font-size: 2.25rem; } } /* 320 px phones: "Unkomplizierter" has to fit the line */

	/* text pages (Impressum, Datenschutz ...): headline only */
	.hero--simple { padding-top: clamp(2.5rem, 7vw, 5rem); padding-bottom: 0; }
	.hero--simple .hero__title { font-size: clamp(2.75rem, 1.6rem + 5vw, 5.75rem); line-height: 1.12; }

	/* ---------- start page: headline that morphs from sentence to sentence (scripts/main.js) ----------
	   The headline paragraph (<p class="hero__title" data-morph>; the <h1> of the start page is the small line above it) holds sentence 1
	   (.morph__text) and the further sentences as aria-hidden "ghosts". With JavaScript and motion
	   allowed they are stacked in ONE grid cell (invisible), so the headline is always as tall as the tallest sentence and
	   nothing below it ever moves - not at load, not while morphing. Without JavaScript or with reduced motion the ghosts are
	   display:none and the headline is just sentence 1. */
	.hero__kicker { display: flex; align-items: center; gap: .9rem; }
	.hero__kicker + .hero__title { margin-top: .9rem; }
	.morph__ghost { display: none; }
	.morph-toggle {
		display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; padding: 0;
		border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer;
		transition: color .2s var(--ease), border-color .2s var(--ease);
	}
	.morph-toggle[hidden] { display: none; }
	.morph-toggle:hover { color: var(--accent); border-color: var(--accent); }
	.morph-toggle .icon { width: .8125rem; height: .8125rem; stroke-width: 2; }
	.morph-toggle .icon--play { display: none; fill: currentColor; }
	.morph-toggle.is-paused .icon--pause { display: none; }
	.morph-toggle.is-paused .icon--play { display: block; }
	.morph__fx { position: absolute; inset: 0; pointer-events: none; } /* the moving letters */
	.morph__ch { position: absolute; margin: 0; padding: 0; white-space: pre; } /* no will-change: own layers would rasterise the letters differently from the real text */
	.morph__ch.is-accent { font-style: italic; color: var(--accent); }
	@media (prefers-reduced-motion: no-preference) {
		.js .hero__kicker { min-height: 2rem; } /* room for the pause button, reserved before JavaScript shows it */
		.js .hero__kicker + .hero__title { margin-top: .4rem; }
		.js .hero__title[data-morph] { display: grid; position: relative; font-variant-ligatures: none; }
		.js .hero__title[data-morph] > .morph__text, .js .hero__title[data-morph] > .morph__ghost { grid-area: 1 / 1; display: block; }
		.js .hero__title[data-morph] > .morph__ghost { visibility: hidden; pointer-events: none; }
		.js .hero__title[data-morph].is-morphing > .morph__text { visibility: hidden; }
	}

	@media (prefers-reduced-motion: no-preference) {
		.hero__emblem, .hero__inner > * { animation: fade-up .8s var(--ease) both; }
		.hero__inner > :nth-child(2) { animation-delay: .07s; }
		.hero__inner > :nth-child(3) { animation-delay: .14s; }
		.hero__inner > :nth-child(4) { animation-delay: .21s; }
		.hero__inner > :nth-child(5) { animation-delay: .28s; }
	}

	/* ---------- PDF card ---------- */
	.pdf-card {
		display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.1rem;
		padding: 1.25rem;
		background: var(--surface); color: var(--fg);
		border: 1px solid rgb(var(--sand-rgb) / .35); border-radius: var(--radius);
		text-decoration: none; transition: border-color .2s, transform .3s var(--ease);
	}
	.pdf-card:hover { border-color: var(--sand); transform: translateY(-2px); }
	.pdf-card__icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border: 1px solid var(--line); border-radius: 50%; color: var(--accent); }
	.pdf-card__icon .icon { width: 1.5rem; height: 1.5rem; }
	.pdf-card__title { display: block; font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem); line-height: 1.3; }
	.pdf-card__meta { display: block; margin-top: .25rem; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
	.pdf-card__arrow { color: var(--accent); }
	.pdf-card__arrow .icon { width: 1.5rem; height: 1.5rem; transition: transform .25s var(--ease); }
	.pdf-card:hover .pdf-card__arrow .icon { transform: translateX(.3rem); }
	.pdf__note { margin-top: .9rem; font-size: .875rem; color: var(--muted); text-align: center; }
	.editor-hint { padding: 1rem 1.25rem; border: 1px dashed rgb(var(--fg-rgb) / .5); border-radius: var(--radius); font-size: .9rem; color: var(--muted); text-align: center; }

	/* ---------- menu: rubrics, dishes, photo cards ---------- */
	.chips {
		position: sticky; top: var(--header-h); z-index: 20;
		margin-bottom: 1rem;
		background: rgb(var(--bg-rgb) / .94);
		-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
		border-bottom: 1px solid var(--line);
	}
	.chips ul { display: flex; flex-wrap: wrap; column-gap: 1.6rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; } /* wraps instead of hiding rubrics behind a scroll bar on narrow screens (WCAG 1.4.10) */
	.chips ul::-webkit-scrollbar { display: none; }
	.chips a {
		display: block; padding: 1rem 0 .8rem; white-space: nowrap;
		border-bottom: 2px solid transparent;
		font-size: .75rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--muted);
	}
	.chips a:hover { color: var(--fg); }
	.chips a.is-active { color: var(--accent); border-bottom-color: var(--accent); }

	.menu__groups { display: block; }
	.menu-group { scroll-margin-top: calc(var(--header-h) + 4.5rem); }
	.menu-group + .menu-group { margin-top: clamp(2rem, 5vw, 3.5rem); }
	.menu-group__title { margin-bottom: .25rem; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); padding-top: .5rem; }
	@media (min-width: 64em) {
		.menu__groups { column-count: 2; column-gap: clamp(3rem, 6vw, 6rem); }
		.menu-group { break-inside: avoid; }
		.menu-group + .menu-group { margin-top: 0; padding-top: clamp(2rem, 4vw, 3rem); }
	}

	.dishes { margin: 0; padding: 0; list-style: none; }
	.dish {
		display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1rem;
		padding: 1.15rem 0; border-bottom: 1px solid var(--line);
	}
	.dish__name { font-size: 1.3rem; line-height: 1.2; }
	.dish__desc { margin-top: .3rem; font-size: .9rem; line-height: 1.55; color: var(--muted); }
	.dish__price { font-family: var(--font-display); font-size: 1.05rem; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; text-align: right; }
	.dish--photo { display: block; padding: .8rem 0; border-bottom: 0; }
	.dish-card {
		position: relative; display: block; width: 100%; height: 11.5rem; padding: 0;
		background: var(--surface); color: #fff; text-align: left;
		border: 0; border-radius: var(--radius); overflow: hidden; isolation: isolate;
	}
	.dish-card picture, .dish-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
	.dish-card img { object-fit: cover; transition: transform .9s var(--ease); }
	.dish-card:hover img { transform: scale(1.04); }
	.dish-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(var(--midnight-rgb) / .1), rgb(var(--midnight-rgb) / .9)); }
	.dish-card__body { position: absolute; left: 1.1rem; right: 5.5rem; bottom: 1rem; display: block; }
	.dish-card .eyebrow { color: var(--sand); }
	.dish-card__name { display: block; margin-top: .4rem; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.3; color: #fff; }
	.dish-card__price { position: absolute; right: 1.1rem; bottom: 1rem; font-family: var(--font-display); font-size: 1.1rem; color: var(--sand); }
	@media (min-width: 40em) { .dish-card { height: 13.5rem; } }

	/* ---------- start page: highlight tile + about teaser ---------- */
	.feature__grid { display: grid; gap: 2rem; }
	@media (min-width: 64em) {
		.feature__grid { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(3rem, 6vw, 6rem); }
		.feature--flip .feature__intro { order: 2; } /* every second section: tile / image on the left */
	}
	.feature + .feature { padding-top: 0; } /* several sections in a row: no double spacing */
	.lunch {
		position: relative; isolation: isolate; overflow: hidden;
		padding: 1.5rem 1.4rem 1.6rem;
		background: var(--midnight); color: var(--fg);
		border: 1px solid rgb(var(--sand-rgb) / .2); border-radius: var(--radius);
	}
	.lunch::before {
		content: ""; position: absolute; inset: 0; z-index: -1;
		background: var(--pattern-dark) center / cover; opacity: .55; mix-blend-mode: screen;
	}
	@media (min-width: 40em) { .lunch { padding: 2rem 2.25rem; } }
	.lunch__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .5rem; }
	.lunch__info { margin-top: 1.25rem; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
	.dishes--compact .dish { padding: 1rem 0; }
	.dishes--compact .dish:last-child { border-bottom: 0; }

	.about-teaser__grid { display: grid; gap: 2rem; }
	.about-teaser__media, .story__media, .feature__media { overflow: hidden; border-radius: var(--radius); background: rgb(var(--fg-rgb) / .08); }
	.about-teaser__media img, .story__media img, .feature__media img { width: 100%; height: auto; }
	@media (min-width: 64em) {
		.about-teaser__grid { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(3rem, 6vw, 6rem); }
	}

	/* ---------- about: story blocks ---------- */
	.story__block { display: grid; gap: 1.5rem; padding-block: clamp(1.5rem, 4vw, 3rem); }
	.story__text .h2 { margin-block: .5rem 1rem; }
	@media (min-width: 64em) {
		.story__block { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(3rem, 6vw, 6rem); }
		.story__block:nth-child(even) .story__media { order: 2; }
	}

	/* ---------- gallery ---------- */
	.gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin: 0; padding: 0; list-style: none; }
	.gallery__item a { position: relative; display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 5; background: rgb(var(--fg-rgb) / .08); }
	.gallery__item picture, .gallery__item img { width: 100%; height: 100%; }
	.gallery__item img { object-fit: cover; transition: transform .9s var(--ease); }
	.gallery__item a:hover img { transform: scale(1.05); }
	.gallery__item:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
	.gallery__item:first-child:nth-last-child(odd) a { aspect-ratio: 16 / 10; }
	@media (min-width: 40em) {
		.gallery__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
		.gallery__item:first-child:nth-last-child(odd) { grid-column: auto; }
		.gallery__item:first-child:nth-last-child(odd) a { aspect-ratio: 4 / 5; }
	}

	/* ---------- contact ---------- */
	.contact__grid { display: grid; gap: 2.5rem; }
	@media (min-width: 64em) { .contact__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; } }
	.contact__block + .contact__block { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
	.contact__name, .contact__address { font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.4; }
	.contact__name { margin-top: .75rem; font-weight: 500; }
	.contact__list { display: grid; gap: .25rem; margin: .75rem 0 0; padding: 0; list-style: none; }
	.contact__link { display: inline-flex; align-items: center; gap: .9rem; min-height: 2.75rem; font-size: 1.15rem; text-decoration: none; }
	.contact__link:hover span { text-decoration: underline; text-underline-offset: .25em; }
	.contact__link .icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--accent); }
	.contact__note { margin-top: .75rem; font-size: .875rem; color: var(--muted); }
	.hours { display: grid; margin: .75rem 0 0; }
	.hours > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
	.hours dt { color: var(--muted); }
	.hours dd { margin: 0; text-align: right; }
	/* footer: the name of each entry on its own line, the times right below it ("Mittagsteller" / "Täglich 12:00 – 14:00") */
	.footer__col .hours > div { display: block; }
	.footer__col .hours dd { margin-top: .15rem; text-align: left; }
	.map { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--midnight-2); border: 1px solid var(--line); border-radius: var(--radius); }
	.map__placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem; padding: 1.5rem; text-align: center; }
	.map__pin { width: 2rem; height: 2rem; color: var(--accent); }
	.map__text { max-width: 26rem; font-size: .875rem; color: var(--muted); }
	.map__prefs { margin: 0; font-size: .75rem; color: var(--muted); }
	.map__prefs a { color: inherit; text-decoration: underline; }
	.map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
	/* the Cookie module (site/modules/Cookie) swaps data-src -> src on this element the moment "Externe Medien" is
	   allowed; the frame and its placeholder show/hide purely by that attribute's presence, no JavaScript needed here */
	.map__frame:not([src]) { display: none; }
	.map__frame[src] ~ .map__placeholder { display: none; }
	.no-js [data-map-load] { display: none; }
	.map-links { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 0; padding: 0; list-style: none; }
	.map-links .btn { min-height: 2.75rem; padding-inline: 1.1rem; }

	/* ---------- Instagram feed ("Über uns"): Instagram's profile embed, loaded after a click; without JavaScript only the profile link stays ---------- */
	.insta__head { text-align: center; }
	.insta__embed { width: min(100%, 36rem); margin-inline: auto; overflow: hidden; background: var(--midnight-2); border: 1px solid var(--line); border-radius: var(--radius); }
	.insta__placeholder { display: grid; justify-items: center; gap: 1rem; padding: clamp(1.75rem, 5vw, 2.5rem) 1.5rem; text-align: center; }
	.insta__icon { width: 2.25rem; height: 2.25rem; color: var(--sand); }
	.insta__text { max-width: 26rem; font-size: .875rem; color: var(--muted); }
	.insta__prefs { margin: 0; font-size: .75rem; color: var(--muted); }
	.insta__prefs a { color: inherit; text-decoration: underline; }
	.insta__frame { display: block; width: 100%; height: 24rem; border: 0; background: #fff; } /* the height follows the embed's own message (main.js) */
	/* see the matching comment at .map__frame: consent-driven show/hide, no JavaScript needed for this part */
	.insta__frame:not([src]) { display: none; }
	.insta__frame[src] ~ .insta__placeholder { display: none; }
	.insta__link { display: flex; justify-content: center; margin-top: 1rem; }
	.no-js .insta__embed { display: none; }

	/* ---------- footer ---------- */
	.footer__brand .brand__word { font-size: 1.15rem; }
	.footer__text { max-width: 22rem; margin-top: 1rem; color: var(--muted); }
	.footer__cta { margin-top: 1.5rem; }
	.footer__col .eyebrow { margin-bottom: 1rem; }
	.footer__address { line-height: 1.7; }
	.footer__links { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
	.footer__links a { display: inline-flex; align-items: center; min-height: 2.5rem; text-decoration: none; }
	.footer__links a:hover, .footer__links a[aria-current="page"] { color: var(--accent); }
	.footer__address + .footer__links { margin-top: .75rem; }
	.footer__note { margin-top: .75rem; font-size: .875rem; color: var(--muted); }
	.footer__social-title { margin: 2rem 0 1rem; }
	/* social links: the network's icon (sand) in front of its name */
	.footer__social a { gap: .7rem; }
	.footer__social .icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--sand); }
	.footer__legal { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0; padding: 0; list-style: none; }
	.footer__legal a { display: inline-flex; align-items: center; min-height: 2.5rem; text-decoration: none; }
	.footer__legal a:hover { text-decoration: underline; }

	/* ---------- editor toolbar (only shown to logged-in editors) ---------- */
	.edit-bar { position: fixed; left: max(1rem, env(safe-area-inset-left)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 60; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
	.edit-bar__link {
		display: inline-flex; align-items: center; gap: .55rem; padding: .65rem 1rem;
		background: var(--midnight); color: var(--sand);
		border: 1px solid rgb(var(--sand-rgb) / .5); border-radius: 2rem;
		font: 500 .8125rem/1 var(--font-ui); text-decoration: none;
		box-shadow: 0 6px 20px -6px rgb(0 0 0 / .6);
	}
	.edit-bar__link:hover { border-color: var(--sand); }
	.edit-bar__link .icon { width: 1.1rem; height: 1.1rem; }

	/* ---------- animation ---------- */
	@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
	@keyframes fade-up { from { opacity: 0; transform: translateY(.7rem); } to { opacity: 1; transform: none; } }
	@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
	@keyframes slide-in { from { transform: translateX(100%); } to { transform: none; } }
	@media (prefers-reduced-motion: reduce) {
		*, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
	}
}

/* ============================================================================================
   THEMES  – three colour worlds, chosen per page ("Farbwelt dieser Seite"):
             dark (Mitternachtsblau, default) · ivory (Elfenbein, "Tageslicht") · sand (warmes Gold)
   ========================================================================================== */
@layer themes {
	:root, [data-theme="dark"] {
		color-scheme: dark;
		--bg: var(--midnight);    --bg-rgb: var(--midnight-rgb);
		--fg: var(--ivory);       --fg-rgb: var(--ivory-rgb);
		--muted: rgb(var(--ivory-rgb) / .74);
		--accent: var(--sand);    --accent-rgb: var(--sand-rgb);
		--line: rgb(var(--sand-rgb) / .22);
		--btn-bg: var(--sand);    --btn-fg: var(--on-sand);
		--brand: var(--sand);
		--surface: var(--midnight-2);
		--pattern: var(--pattern-dark); --pattern-opacity: .45; --pattern-blend: screen;
	}
	[data-theme="ivory"], [data-theme="sand"] {
		color-scheme: light;
		--fg: var(--black);       --fg-rgb: var(--black-rgb);
		--muted: rgb(var(--black-rgb) / .76);
		--accent: var(--olive);   --accent-rgb: var(--olive-rgb);
		--line: rgb(var(--black-rgb) / .2);
		--btn-bg: var(--midnight); --btn-fg: var(--on-midnight);
		--brand: var(--midnight);
		--surface: var(--midnight-2);
		--pattern-blend: normal;
	}
	/* light pages (option "ivory", labelled "Hell" in the admin): plain white, no pattern */
	[data-theme="ivory"] { --bg: var(--paper); --bg-rgb: var(--paper-rgb); --pattern: none; --pattern-opacity: 0; --veil-top: .36; }
	/* sand pages: olive on sand is only 4.35 : 1, so small olive text uses the slightly darker --olive-on-sand */
	[data-theme="sand"]  { --bg: var(--sand);  --bg-rgb: var(--sand-rgb);  --accent: var(--olive-on-sand); --accent-rgb: var(--olive-on-sand-rgb); --pattern: var(--pattern-sand);  --pattern-opacity: .75; --veil-top: .5; }

	/* dark islands on any page: menu overlay, footer, dialogs, PDF card, highlight tile ... and the site header, which is always Mitternachtsblau */
	.on-dark, .site-header {
		--fg: var(--ivory); --fg-rgb: var(--ivory-rgb);
		--muted: rgb(var(--ivory-rgb) / .74);
		--accent: var(--sand); --accent-rgb: var(--sand-rgb);
		--line: rgb(var(--sand-rgb) / .22);
		--btn-bg: var(--sand); --btn-fg: var(--on-sand);
		--brand: var(--sand);
		color: var(--fg);
	}

	/* ---- the photo header (.hero--cover) follows the colour world of its page ----
	   Dunkel: the photo fades into midnight, text white (the default in "components").
	   Hell / Sand: the photo is veiled with the page colour (white / sand) instead, the headline, text and buttons use the page's own tokens
	   (black, midnight) and the white Hero Logo turns black. The veil is stronger than the dark one because black text needs a much lighter
	   background than white text needs a dark one. The site header stays Mitternachtsblau in all three worlds (see above). */
	[data-theme="ivory"] .hero--cover::after, [data-theme="sand"] .hero--cover::after {
		background: linear-gradient(180deg,
			rgb(var(--bg-rgb) / var(--veil-top)) 0, rgb(var(--bg-rgb) / var(--veil-top)) 22%, rgb(var(--bg-rgb) / .8) 44%, rgb(var(--bg-rgb) / .9) 58%, var(--bg) 100%);
	}
	[data-theme="ivory"] .hero__logo, [data-theme="sand"] .hero__logo { filter: brightness(0); }
	/* the small accent text in the photo header is black (olive only reaches 4.5 : 1 on solid white / sand, not on a veiled photo) */
	[data-theme="ivory"] .hero--cover .eyebrow, [data-theme="ivory"] .hero--cover .hero__info,
	[data-theme="sand"] .hero--cover .eyebrow, [data-theme="sand"] .hero--cover .hero__info { color: var(--fg); }
}

/* ============================================================================================
   UTILITIES
   ========================================================================================== */
@layer utilities {
	.visually-hidden {
		position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
		clip-path: inset(50%); white-space: nowrap; border: 0;
	}
}

@media print {
	.site-header, .site-bg, .edit-bar, dialog, .skip-link, .hero__media, .chips { display: none !important; }
	html, body { background: #fff !important; color: #000 !important; }
	.has-cover main { margin-top: 0; }
	.hero--cover { min-height: 0; padding: 1rem 0; }
	.site-footer { background: none; color: #000; border-top: 1px solid #000; }
}
