/* ==========================================================================
   Le Marché – Feinkost in Koblenz
   Konzept „Der Anschnitt“, zweite Fassung: helle Seite, große Ladenfotos,
   Graphit nur für Leiste, Angebote-Band und Fuß. Ein einziger roter Akzent –
   das Rot der Aufschnittmaschine. Der Akzent auf dem „É“ ist der Schnitt.
   Die Preisschilder an der Theke geben die zweite Schrift vor (Barlow Condensed).

   Farben     Graphit #1C1D1F · Marmor #EFEEEA · Kreide #F8F7F4 · Weiß #FFFFFF
              Schiefer #5B6065 · Chrom #AEB2B6 · Berkel-Rot #B01B2E
   Schriften  Cormorant Garamond (Überschriften) · Source Serif 4 (Text)
              Barlow Condensed (Schilder: Menü, Zeiten, Preise, Herkunft)
   ========================================================================== */

/* --- Schriften (self-hosted, kein Google-Fonts-Abruf) --------------------- */

@font-face {
	font-family: 'Cormorant Garamond';
	src: url(../fonts/cormorant-garamond-var.woff2) format('woff2');
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Cormorant Garamond';
	src: url(../fonts/cormorant-garamond-italic-var.woff2) format('woff2');
	font-weight: 300 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Source Serif 4';
	src: url(../fonts/source-serif-4-var.woff2) format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Source Serif 4';
	src: url(../fonts/source-serif-4-italic-var.woff2) format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Barlow Condensed';
	src: url(../fonts/barlow-condensed-500.woff2) format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Barlow Condensed';
	src: url(../fonts/barlow-condensed-600.woff2) format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* Ersatzschriften, solange die Webschriften noch laden: Times, Georgia und Arial Narrow werden
   auf Breite und Zeilenmaße der Webschrift eingestellt, damit der Text beim Schriftwechsel
   nicht springt (Werte aus den Schriftdateien berechnet, siehe CLAUDE.md, Schriften).
   Breitengrenzen im sichtbaren Bereich stehen deshalb in em statt ch: ch hängt von der Null
   der gerade benutzten Schrift ab und wäre in der Ersatzschrift ein anderer Wert. */
@font-face {
	font-family: 'Cormorant Ersatz';
	src: local('Times New Roman'), local('TimesNewRomanPSMT');
	size-adjust: 97.5%;
	ascent-override: 94.77%;
	descent-override: 29.44%;
	line-gap-override: 0%;
}

@font-face {
	font-family: 'Source Serif Ersatz';
	src: local('Georgia');
	size-adjust: 101.48%;
	ascent-override: 102.09%;
	descent-override: 33.01%;
	line-gap-override: 0%;
}

@font-face {
	font-family: 'Barlow Ersatz';
	src: local('Arial Narrow'), local('ArialNarrow');
	size-adjust: 81.21%;
	ascent-override: 123.14%;
	descent-override: 24.63%;
	line-gap-override: 0%;
}

/* --- Grundwerte ------------------------------------------------------------ */

:root {
	--graphit: #1C1D1F;
	--graphit-hell: #2A2C2F;
	--marmor: #EFEEEA;
	--kreide: #F8F7F4;
	--weiss: #FFFFFF;
	--schiefer: #5B6065;
	--chrom: #AEB2B6;
	--berkel: #B01B2E;
	--berkel-tief: #8C1323;
	--linie: rgba(28, 29, 31, 0.14);
	--linie-dunkel: rgba(248, 247, 244, 0.16);
	--schatten: 0 30px 50px -36px rgba(28, 29, 31, 0.55);

	--display: 'Cormorant Garamond', 'Cormorant Ersatz', Garamond, 'Times New Roman', serif;
	--text: 'Source Serif 4', 'Source Serif Ersatz', Georgia, 'Times New Roman', serif;
	--schild: 'Barlow Condensed', 'Barlow Ersatz', 'Arial Narrow', 'Helvetica Neue', sans-serif;

	--rand: clamp(1.25rem, 4.5vw, 4.5rem);
	--breite: 90rem;
	--abstand: clamp(4.5rem, 9vw, 8.5rem);
	--kopf-hoehe: 5rem;
	--ease: cubic-bezier(0.7, 0, 0.2, 1);
	--ease-aus: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--kopf-hoehe);
}

body {
	margin: 0;
	background: var(--kreide);
	color: var(--graphit);
	font-family: var(--text);
	font-size: 1.0625rem;
	line-height: 1.65;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

[hidden] {
	display: none !important;
}

h1,
h2,
h3,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

h1,
h2 {
	font-family: var(--display);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.02;
	text-wrap: balance;
}

h2 {
	font-size: clamp(2.25rem, 1.4rem + 2.6vw, 4rem);
}

h3 {
	font-family: var(--display);
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 1.15;
}

em {
	font-style: italic;
}

::selection {
	background: var(--berkel);
	color: var(--kreide);
}

:focus-visible {
	outline: 2px solid var(--berkel);
	outline-offset: 3px;
}

.dunkel :focus-visible,
.leiste :focus-visible,
.menue :focus-visible,
.lightbox :focus-visible {
	outline-color: var(--kreide);
}

.nur-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.sprung {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 200;
	padding: 0.75rem 1.25rem;
	background: var(--graphit);
	color: var(--kreide);
	font-family: var(--schild);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}

.sprung:focus {
	top: 1rem;
}

.rahmen {
	width: 100%;
	max-width: var(--breite);
	margin: 0 auto;
	padding: 0 var(--rand);
}

.dunkel {
	background: var(--graphit);
	color: var(--kreide);
}

.ohne-umbruch {
	white-space: nowrap;
}

/* --- Schilder: Zeilen in der Schrift der Preisschilder, Schnittmarke, Knöpfe -- */

/* Eine Zeile wie auf einem Preisschild: Herkunft, Zeiten, Meta-Angaben */
.zeile,
.vorzeile {
	display: flex;
	align-items: center;
	gap: 0.85em;
	font-family: var(--schild);
	font-weight: 500;
	font-size: 0.8125rem;
	line-height: 1.35;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--schiefer);
}

.dunkel .zeile,
.dunkel .vorzeile {
	color: var(--chrom);
}

/* die Schnittmarke: derselbe rote Strich wie der Akzent auf dem É */
.schnitt {
	flex: none;
	width: 1.35em;
	height: 2px;
	background: var(--berkel);
	transform: rotate(-32deg);
}

.knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7em;
	padding: 1.1em 1.9em;
	border: 1px solid var(--graphit);
	background: var(--graphit);
	color: var(--kreide);
	font-family: var(--schild);
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.knopf:hover {
	background: var(--berkel);
	border-color: var(--berkel);
	color: var(--kreide);
}

.knopf-linie {
	background: transparent;
	color: var(--graphit);
}

.dunkel .knopf {
	background: var(--kreide);
	border-color: var(--kreide);
	color: var(--graphit);
}

.dunkel .knopf-linie {
	background: transparent;
	border-color: rgba(248, 247, 244, 0.45);
	color: var(--kreide);
}

.dunkel .knopf:hover {
	background: var(--berkel);
	border-color: var(--berkel);
	color: var(--kreide);
}

.knopf small {
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	opacity: 0.7;
}

.knopf-klein {
	padding: 0.85em 1.25em;
	font-size: 0.8125rem;
}

.knopf-breit {
	width: 100%;
}

.knopfreihe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* Textlink mit rotem Strich darunter */
.textlink {
	display: inline-block;
	padding-bottom: 0.15em;
	border-bottom: 1px solid var(--berkel);
	font-family: var(--schild);
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--graphit);
	text-decoration: none;
	transition: color 0.25s ease;
}

.textlink:hover {
	color: var(--berkel);
}

.dunkel .textlink {
	color: var(--kreide);
}

/* Das Preisschild: weiße Karte mit Lochung, wie die Schilder an der Theke */
.schild {
	position: relative;
	display: grid;
	gap: 0.25rem;
	padding: 1.5rem 1.5rem 1.25rem;
	background: var(--weiss);
	color: var(--graphit);
	border: 1px solid var(--linie);
	box-shadow: var(--schatten);
	font-family: var(--schild);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}

.schild::before {
	content: "";
	position: absolute;
	top: 0.55rem;
	left: 50%;
	width: 0.45rem;
	height: 0.45rem;
	margin-left: -0.225rem;
	border-radius: 50%;
	background: var(--kreide);
	box-shadow: inset 0 0 0 1px var(--linie);
}

.schild-titel {
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.25;
}

.schild-zeile {
	font-size: 0.8125rem;
	color: var(--schiefer);
	line-height: 1.5;
}

.schild .ist-offen,
.schild .ist-zu {
	display: flex;
	align-items: center;
	gap: 0.55em;
	color: var(--graphit);
}

.schild .ist-offen::before,
.schild .ist-zu::before {
	content: "";
	flex: none;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	border: 1px solid var(--schiefer);
}

.schild .ist-offen::before {
	border-color: var(--berkel);
	background: var(--berkel);
}

a.schild:hover .schild-titel {
	color: var(--berkel);
}

/* --- Obere Leiste (nur große Bildschirme) ---------------------------------- */

.leiste {
	display: none;
	background: var(--graphit);
	color: var(--chrom);
	font-family: var(--schild);
	font-weight: 500;
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.leiste-innen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	max-width: var(--breite);
	min-height: 2.4rem;
	margin: 0 auto;
	padding: 0 var(--rand);
}

.leiste p {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	white-space: nowrap;
}

.leiste a {
	color: var(--kreide);
	text-decoration: none;
}

.leiste a:hover {
	text-decoration: underline;
	text-decoration-color: var(--berkel);
	text-underline-offset: 0.3em;
}

.leiste-status {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	color: var(--kreide);
}

.leiste-status::before {
	content: "";
	width: 0.45em;
	height: 0.45em;
	border-radius: 50%;
	border: 1px solid var(--chrom);
}

.leiste-status.ist-offen::before {
	border-color: var(--berkel);
	background: var(--berkel);
	box-shadow: 0 0 0 0.25em rgba(176, 27, 46, 0.28);
}

/* --- Kopf ------------------------------------------------------------------ */

.kopf {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(248, 247, 244, 0.94);
	color: var(--graphit);
	border-bottom: 1px solid transparent;
	transition: border-color 0.4s ease;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.kopf {
		background: rgba(248, 247, 244, 0.86);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}
}

.kopf.ist-gescrollt {
	border-bottom-color: var(--linie);
}

.kopf-innen {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 3rem);
	max-width: var(--breite);
	min-height: var(--kopf-hoehe);
	margin: 0 auto;
	padding: 0 var(--rand);
}

.wortmarke {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	color: inherit;
	text-decoration: none;
}

.wortmarke-name {
	font-family: var(--display);
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 1;
	letter-spacing: 0.22em;
	white-space: nowrap;
}

/* das É: ein gerades E mit rotem Schnitt als Akzent */
.akut {
	position: relative;
}

.akut::after {
	content: "";
	position: absolute;
	left: 0.17em;
	top: 0.06em;
	width: 0.32em;
	height: 0.075em;
	border-radius: 1px;
	background: var(--berkel);
	transform: rotate(-32deg);
}

.wortmarke-zusatz {
	font-family: var(--schild);
	font-weight: 500;
	font-size: 0.6875rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--schiefer);
	white-space: nowrap;
}

.dunkel .wortmarke-zusatz {
	color: var(--chrom);
}

/* Marke in Kopf und Fuß: das Ladenlogo der alten Seite links neben der Wortmarke (seit 21.10.2026 auf
   Wunsch der Kundin, ausdrücklich zusätzlich, nicht statt der Wortmarke). Bilder aus
   .claude/logo-erzeugen.py, Seitenverhältnis 1,83 : 1, Größe über die Höhe. Die Verwaltung hat nur
   die Wortmarke. */
.marke {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	color: inherit;
	text-decoration: none;
}

.marke-logo {
	flex: none;
	width: auto;
	height: 4rem;
}

/* im Fuß darf die Wortmarke unter das Logo rutschen, wenn die Spalte zu schmal ist (Handy) */
.fuss-marke .marke {
	flex-wrap: wrap;
	gap: 1rem 1.1rem;
}

.fuss-marke .marke-logo {
	height: 5.5rem;
}

.navigation {
	margin-left: auto;
}

.navigation ul {
	display: flex;
	gap: clamp(1.25rem, 2.4vw, 2.5rem);
}

.navigation a {
	position: relative;
	display: block;
	padding: 0.5em 0;
	font-family: var(--schild);
	font-weight: 500;
	font-size: 0.9375rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--graphit);
	text-decoration: none;
}

.navigation a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.2em;
	height: 1px;
	background: var(--berkel);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 0.35s var(--ease);
}

.navigation a:hover::after,
.navigation a[aria-current]::after {
	transform: scaleX(1);
}

.kopf-knopf {
	flex: none;
}

.menue-knopf {
	display: none;
	align-items: center;
	gap: 0.75em;
	margin-left: auto;
	padding: 0.75rem 0;
	border: 0;
	background: none;
	color: var(--graphit);
	font-family: var(--schild);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
}

.menue-knopf span[aria-hidden] {
	display: block;
	flex: none;
	width: 1.6em;
	height: 0.55em;
	border-top: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
}

/* Menü auf kleinen Bildschirmen */
.menue {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 55;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: calc(var(--kopf-hoehe) + 2rem) var(--rand) 2.5rem;
	background: var(--graphit);
	color: var(--kreide);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.menue.ist-offen {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease;
}

html.menue-aktiv .kopf {
	background: var(--graphit);
	color: var(--kreide);
}

html.menue-aktiv .menue-knopf,
html.menue-aktiv .wortmarke-zusatz {
	color: var(--kreide);
}

/* offenes Menü: die zwei Striche werden ein X (auf dem Handy steht seit 21.10.2026 kein „Schließen“ mehr da) */
.menue-knopf[aria-expanded="true"] span[aria-hidden] {
	position: relative;
	border-color: transparent;
}

.menue-knopf[aria-expanded="true"] span[aria-hidden]::before,
.menue-knopf[aria-expanded="true"] span[aria-hidden]::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.25em;
	left: 0.25em;
	border-top: 1px solid currentColor;
	transform: rotate(45deg);
}

.menue-knopf[aria-expanded="true"] span[aria-hidden]::after {
	transform: rotate(-45deg);
}

.menue ul {
	margin-bottom: auto;
}

.menue li + li {
	border-top: 1px solid var(--linie-dunkel);
}

.menue a {
	display: block;
	padding: 0.7rem 0;
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(2.25rem, 9vw, 3.25rem);
	line-height: 1.1;
	color: var(--kreide);
	text-decoration: none;
}

/* aktuelle Seite im Handy-Menü: kursiv */
.menue a[aria-current="page"] {
	font-style: italic;
}

.menue-info {
	margin-top: 2rem;
	font-family: var(--schild);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--chrom);
	line-height: 1.8;
}

.menue-info a {
	color: var(--kreide);
}

html.menue-aktiv {
	overflow: hidden;
}

/* --- Hero: Foto über die ganze Breite, Text davor ------------------------ */

.hero {
	position: relative;
	display: grid;
	min-height: clamp(36rem, 100svh - var(--kopf-hoehe), 62rem);
	overflow: hidden;
	isolation: isolate;
}

.hero-bild {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--graphit-hell);
}

.hero-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 45%;
}

/* Signatur: Die Klinge fährt einmal durchs Bild, das Foto fällt in Scheiben frei. */
.scheiben {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	pointer-events: none;
}

.scheiben span {
	background: var(--graphit);
	transform-origin: 50% 0;
}

.klinge {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 2px;
	background: var(--berkel);
	box-shadow: 0 0 14px rgba(176, 27, 46, 0.55);
	opacity: 0;
}

html:not(.js) .scheiben {
	display: none;
}

html.js .hero-bild.ist-angeschnitten img {
	animation: einrasten 2.6s var(--ease-aus) 0.25s both;
}

html.js .ist-angeschnitten .scheiben span {
	animation: scheibe 1s var(--ease) both;
}

html.js .ist-angeschnitten .scheiben span:nth-child(1) { animation-delay: 0.12s; }
html.js .ist-angeschnitten .scheiben span:nth-child(2) { animation-delay: 0.2s; }
html.js .ist-angeschnitten .scheiben span:nth-child(3) { animation-delay: 0.28s; }
html.js .ist-angeschnitten .scheiben span:nth-child(4) { animation-delay: 0.36s; }
html.js .ist-angeschnitten .scheiben span:nth-child(5) { animation-delay: 0.44s; }
html.js .ist-angeschnitten .scheiben span:nth-child(6) { animation-delay: 0.52s; }
html.js .ist-angeschnitten .scheiben span:nth-child(7) { animation-delay: 0.6s; }

.ist-angeschnitten .klinge {
	animation: klinge 0.85s var(--ease) forwards;
}

@keyframes scheibe {
	from { transform: scaleY(1); }
	to { transform: scaleY(0); }
}

@keyframes einrasten {
	from { transform: scale(1.07); }
	to { transform: scale(1); }
}

/* Die Klinge wandert per transform, nicht per left: left löst bei jedem Bild ein neues Layout aus
   und zählt als Layout-Verschiebung (CLS). Der Hero ist so breit wie das Fenster, 100vw reicht. */
@keyframes klinge {
	0% { transform: translateX(0); opacity: 1; }
	88% { opacity: 1; }
	100% { transform: translateX(100vw); opacity: 0; }
}

/* Schleier, damit der Text auf dem Foto lesbar bleibt */
.hero-schleier {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background:
		linear-gradient(to top, rgba(28, 29, 31, 0.92) 0%, rgba(28, 29, 31, 0.62) 34%, rgba(28, 29, 31, 0.18) 66%, rgba(28, 29, 31, 0) 100%);
	pointer-events: none;
}

.hero-inhalt {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 2rem;
	align-content: end;
	width: 100%;
	max-width: var(--breite);
	margin: 0 auto;
	/* Oben wenig Polster: Der Inhalt sitzt ohnehin unten (align-content: end); zu viel Polster machte den
	   Hero höher als das Fenster, Lede und Knöpfe lagen dann unter dem Rand (20.10.2026) */
	padding: clamp(5rem, 10svh, 9rem) var(--rand) clamp(2.5rem, 6vw, 5rem);
}

.hero-text {
	max-width: 46rem;
	container-type: inline-size;
}

.hero-ort {
	color: rgba(248, 247, 244, 0.86);
}

.hero h1 {
	margin: 0 0 1.1rem;
	font-size: clamp(3rem, 1.4rem + 6vw, 7.75rem);
	/* zusätzlich an der Fensterhöhe gedeckelt: vier Zeilen plus Lede und Knöpfe müssen über dem Rand bleiben */
	font-size: min(clamp(3rem, 1.4rem + 6vw, 7.75rem), 10svh);
	line-height: 0.96;
	letter-spacing: -0.02em;
}

/* Vorzeile „Feinkost in Koblenz · Adresse“ als Teil der h1 (Schild-Schrift über .zeile),
   mit demselben Abstand wie zuvor als eigener Absatz */
.hero h1 .hero-ort {
	margin-bottom: 0.6rem;
}

.hero-titel {
	display: block;
	max-width: 5.25em;   /* 11ch in Cormorant Garamond */
}

/* „Leidenschaft“ ist 4,77 em breit – 20cqi hält das Wort immer in der Textspalte */
@supports (width: 1cqi) {
	.hero h1 {
		font-size: min(clamp(3rem, 1.4rem + 6vw, 7.75rem), 20cqi, 10svh);
	}
}

.hero-lede {
	max-width: 20em;   /* 40ch in Source Serif 4 */
	color: rgba(248, 247, 244, 0.88);
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3rem);
	line-height: 1.55;
}

.hero .knopfreihe {
	margin-top: 2rem;
}

.hero-schild {
	justify-self: start;
	min-width: 16rem;
}

/* Rechts unten im Hero: Schild „Diese Woche“ (nur solange eine Woche eingetragen ist) über dem
   Öffnungsschild. Seit 21.10.2026 (Idee 1 von drei Entwürfen): die Woche ist so ohne Scrollen zu sehen;
   die ganze Karte führt zur Wochenkarte unter Über uns (Link „Zur Wochenkarte“ über die Karte
   gezogen). Höchstens drei Zeilen aus lm_woche_auszug(); die Karte bleibt schmal, lange Namen brechen um. */
.hero-schilder {
	display: grid;
	justify-items: start;
	gap: 0.9rem;
	align-content: end;
}

.woche-schild {
	gap: 0.6rem;
	min-width: 23rem;
	max-width: 27rem;
	padding: 1.7rem 1.6rem 1.25rem;
}

.woche-schild-kopf {
	display: flex;
	align-items: center;
	gap: 0.7em;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
}

.woche-schild-liste li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0 1.25rem;
	align-items: baseline;
	padding: 0.6rem 0 0.15rem;
	border-top: 1px solid var(--linie);
}

.woche-schild-name {
	font-family: var(--display);
	font-weight: 500;
	font-size: 1.35rem;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
}

.woche-schild-preis {
	font-weight: 600;
	font-size: 1.2rem;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.woche-schild-preis.ist-angebot {
	color: var(--berkel);
}

/* Angebot ohne Preis („bis zu 30 % reduziert“): der Text steht kleiner an der Stelle des Preises */
.woche-schild-preis.als-text {
	max-width: 11em;
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-align: right;
	white-space: normal;
}

/* Gericht ohne Preis („Kleine Snacks“): die Beschreibung als kleine Zeile unter dem Namen */
.woche-schild-text {
	grid-column: 1 / -1;
	margin-top: -0.15rem;
	font-family: var(--text);
	font-weight: 400;
	font-size: 0.875rem;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--schiefer);
}

.woche-schild-mehr {
	padding-top: 0.55rem;
	border-top: 1px solid var(--linie);
	font-size: 0.8125rem;
	color: var(--schiefer);
	text-decoration: none;
}

.woche-schild-mehr::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.woche-schild:hover .woche-schild-mehr {
	color: var(--berkel);
}

/* der Hero ist .dunkel (Fokusring kreideweiß) – auf der weißen Karte wieder rot */
.woche-schild :focus-visible {
	outline-color: var(--berkel);
}

/* --- Abschnitte ------------------------------------------------------------ */

.abschnitt {
	padding: var(--abstand) 0;
}

.abschnitt-marmor {
	background: var(--marmor);
}

.abschnitt-kopf {
	display: grid;
	gap: 1.25rem 3rem;
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.abschnitt-kopf p {
	max-width: 42ch;
	color: var(--schiefer);
	font-size: 1.125rem;
}

.abschnitt-kopf .knopf,
.abschnitt-kopf .textlink {
	justify-self: start;
}

.abschnitt-fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.lede {
	max-width: 40ch;
	font-size: 1.25rem;
	line-height: 1.6;
}

/* Die Stände der Startseite (seit 21.10.2026): die Theke groß, Käse und Salami & Schinken mit je zwei
   Fotos (.stand-paar), Pasta und Antipasti mit einem breiten Foto (.stand-breit); Wein und Süßes als
   Kacheln im 4:5-Format (.stand-klein). Bis 64em zwei Spalten: Paar und breites Foto über die ganze
   Breite (das Paar als zwei 4:5-Bilder, das breite als 3:2), die Kacheln nebeneinander. */
.staende {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem 1rem;
}

.stand-paar,
.stand-breit {
	grid-column: 1 / -1;
}

.bereich-paar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}

.stand-breit .bereich-bild {
	aspect-ratio: 3 / 2;
}

.bereich {
	display: grid;
	gap: 0.9rem;
	align-content: start;
	color: inherit;
	text-decoration: none;
}

.bereich-bild {
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--marmor);
}

.bereich-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--ease-aus);
}

a.bereich:hover .bereich-bild img,
a.bereich:focus-visible .bereich-bild img {
	transform: scale(1.045);
}

.bereich h3 {
	font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem);
	line-height: 1.1;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: text-decoration-color 0.3s ease;
}

a.bereich:hover h3 {
	text-decoration-color: var(--berkel);
}

.bereich .zeile {
	margin-top: 0.3rem;
}

/* Über uns */
.haus-raster {
	display: grid;
	gap: clamp(3rem, 7vw, 6rem);
}

.haus-text h2 {
	margin-bottom: 1.5rem;
	max-width: 14ch;
}

.merkmale {
	display: grid;
	gap: 1.5rem;
	margin-top: 2.75rem;
}

.merkmale li {
	padding-top: 1.25rem;
	border-top: 1px solid var(--linie);
}

.merkmale h3 {
	margin-bottom: 0.3rem;
	font-size: 1.45rem;
}

.merkmale p {
	color: var(--schiefer);
}

.haus-bilder {
	position: relative;
	align-self: start;
	padding-bottom: 30%;
}

.haus-bild-gross {
	width: 78%;
	margin-left: auto;
}

/* das Foto aus der Theke: bewusst groß, ragt über das Bild des Verkaufstischs */
.haus-bild-klein {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 66%;
	border: 10px solid var(--marmor);
}

.haus-links {
	align-items: center;
	gap: 1rem 2.25rem;
	margin-top: 2.75rem;
}

/* Über uns als eigene Seite: die drei Merkmale nebeneinander mit mehr Text */
.merkmale-breit p {
	max-width: 36ch;
}

/* Angebote-Band (dunkel) */
.angebot-raster {
	display: grid;
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}

.angebot-text h2 {
	margin-bottom: 1.25rem;
}

.angebot-text > p {
	max-width: 40ch;
	color: var(--chrom);
	font-size: 1.125rem;
}

.angebot-text .knopfreihe {
	margin-top: 2.25rem;
}

/* die beiden Flyer-Seiten auf Graphit: feine helle Kante, sonst verschwimmt die dunkle Vorderseite */
.dunkel .flyer-seiten img {
	box-shadow: 0 0 0 1px var(--linie-dunkel), var(--schatten);
}

/* Empfehlungen aus dem Shop: Preisschilder */
.schilder {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
}

.schilder + .abschnitt-fuss {
	margin-top: 2.5rem;
}

#bestellen .test-hinweis {
	margin: 0 0 1.5rem;
}

.artikel-schild {
	display: grid;
	grid-template-rows: auto 1fr auto auto;
	gap: 0.3rem;
	padding: 1.6rem 1.5rem 1.5rem;
	background: var(--weiss);
	border: 1px solid var(--linie);
}

.artikel-schild h3 {
	font-size: 1.55rem;
	line-height: 1.12;
}

.artikel-schild .artikel-angaben {
	margin-top: 0.5rem;
}

.schild-preis {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.1rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--linie);
	font-variant-numeric: tabular-nums;
}

.schild-preis .preis {
	font-size: 1.65rem;
}

.artikel-schild .paket-form {
	margin-top: 1rem;
}

.artikel-schild .knopf {
	width: 100%;
}

/* Einblicke (ueber-uns.php) */
.galerie {
	columns: 2;
	column-gap: 0.75rem;
}

.galerie li {
	break-inside: avoid;
	margin-bottom: 0.75rem;
}

.galerie a {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--marmor);
	cursor: zoom-in;
}

.galerie img {
	width: 100%;
	transition: transform 1.2s var(--ease-aus);
}

.galerie a:hover img {
	transform: scale(1.03);
}

.galerie a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	box-shadow: inset 0 0 0 0 var(--berkel);
	transition: box-shadow 0.35s ease;
}

.galerie a:hover::after,
.galerie a:focus-visible::after {
	box-shadow: inset 0 0 0 3px var(--berkel);
}

/* Stimme */
.stimme {
	text-align: center;
}

.stimme figure {
	max-width: 56rem;
	margin: 0 auto;
}

.stimme blockquote p {
	font-family: var(--display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.8rem, 1.1rem + 2.3vw, 3.1rem);
	line-height: 1.2;
	letter-spacing: -0.005em;
}

.stimme figcaption {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
}

/* Besuch (Abschnitt der Startseite und besuch.php) */
.besuch-raster {
	display: grid;
	gap: clamp(3rem, 7vw, 6rem);
}

.besuch-text h2 {
	margin-bottom: 1.25rem;
}

/* auf besuch.php sind die Blocktitel h2, sehen aber aus wie die h3 der Startseite */
.besuch-text .besuch-h2 {
	margin-bottom: 0.9rem;
	font-size: 1.45rem;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.15;
}

.besuch-block-erster {
	margin-top: 0;
}

.besuch-adresse {
	font-size: 1.125rem;
}

.seiten-status {
	margin-top: 1.5rem;
	color: var(--graphit);
}

.besuch-text > p {
	max-width: 40ch;
	color: var(--schiefer);
	font-size: 1.125rem;
}

.besuch-block {
	margin-top: 2.5rem;
}

.besuch-block h3 {
	margin-bottom: 0.9rem;
	font-size: 1.45rem;
}

/* Die Öffnungszeiten als Tafel */
.zeiten {
	width: 100%;
	max-width: 30rem;
	border-collapse: collapse;
	background: var(--weiss);
	border: 1px solid var(--linie);
	font-family: var(--schild);
	font-weight: 500;
	font-size: 1.0625rem;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}

.zeiten th,
.zeiten td {
	padding: 0.65rem 1.1rem;
	border-bottom: 1px solid var(--linie);
}

.zeiten tr:last-child th,
.zeiten tr:last-child td {
	border-bottom: 0;
}

.zeiten th {
	text-align: left;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.zeiten td {
	text-align: right;
}

.zeiten .ist-zu {
	color: var(--schiefer);
}

.zeiten tr.heute th,
.zeiten tr.heute td {
	color: var(--berkel);
	font-weight: 600;
}

.heute-marke {
	margin-left: 0.6em;
	font-size: 0.75rem;
	letter-spacing: 0.16em;
}

.kontaktliste {
	display: grid;
	gap: 0.35rem;
	font-size: 1.125rem;
}

.kontaktliste a {
	text-decoration-color: var(--linie);
}

.kontaktliste a:hover {
	text-decoration-color: var(--berkel);
}

.besuch-text .knopfreihe {
	margin-top: 2.5rem;
}

.besuch-hinweis {
	margin-top: 1.5rem;
	color: var(--schiefer);
	font-size: 0.9375rem;
}

.besuch-bild img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.besuch-bild figcaption {
	margin-top: 0.9rem;
}

/* Lageplan unter den Öffnungszeiten (inc/lageplan.php): eigenes Kartenbild, Klick öffnet Google Maps.
   Nicht .karte – das sind die Wochenkarten-Listen. */
/* Breite der Textspalte (unter den Öffnungszeiten), nicht über die ganze Seite (Wunsch 20.10.2026) */
.lageplan {
	grid-column: 1;
	max-width: 44rem;
	margin: 0;
}

.lageplan a {
	position: relative;
	display: block;
	color: inherit;
	text-decoration: none;
}

.lageplan img {
	width: 100%;
	height: auto;
	border: 1px solid var(--linie);
	background: var(--marmor);
}

.lageplan-hinweis {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	padding: 0.65rem 0.95rem;
	background: var(--weiss);
	color: var(--graphit);
	font-family: var(--schild);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	box-shadow: 0 8px 24px -12px rgba(28, 29, 31, 0.5);
	transition: color 0.2s var(--ease-aus);
}

.lageplan a:hover .lageplan-hinweis,
.lageplan a:focus-visible .lageplan-hinweis {
	color: var(--berkel);
}

.lageplan figcaption {
	margin-top: 0.9rem;
}

.lageplan figcaption a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Häufige Fragen */
.fragen-kopf h2 {
	margin-bottom: 1.25rem;
}

.fragen-kopf p:last-child {
	max-width: 32ch;
	color: var(--schiefer);
	font-size: 1.125rem;
}

.fragen {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	border-top: 1px solid var(--linie);
}

.frage {
	border-bottom: 1px solid var(--linie);
}

.frage summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.35rem 0;
	font-family: var(--display);
	font-weight: 500;
	font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.6rem);
	line-height: 1.2;
	list-style: none;
	cursor: pointer;
}

.frage summary::-webkit-details-marker {
	display: none;
}

/* Plus aus zwei feinen Strichen, wird beim Öffnen zum roten Kreuz */
.frage summary::after {
	content: "";
	flex: none;
	width: 0.85rem;
	height: 0.85rem;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
	color: var(--schiefer);
	transition: transform 0.3s var(--ease-aus), color 0.2s;
}

.frage summary:hover::after,
.frage[open] summary::after {
	color: var(--berkel);
}

.frage[open] summary::after {
	transform: rotate(45deg);
}

.frage p {
	max-width: 60ch;
	padding-bottom: 1.5rem;
	color: var(--schiefer);
}

/* --- Fuß ------------------------------------------------------------------- */

.fuss {
	padding: clamp(4rem, 8vw, 7rem) 0 2rem;
}

.fuss-raster {
	display: grid;
	gap: 2.75rem;
}

.fuss-marke .wortmarke-name {
	font-size: 2.1rem;
}

.fuss-marke p {
	margin-top: 1.5rem;
	color: var(--chrom);
}

.fuss h2 {
	margin-bottom: 1rem;
	font-family: var(--schild);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--chrom);
}

.fuss-zeiten {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: start;
	gap: 0.25rem 1.5rem;
	font-family: var(--schild);
	font-weight: 500;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
}

.fuss-zeiten dt {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--chrom);
}

.fuss p,
.fuss li {
	line-height: 1.75;
}

.fuss a {
	text-decoration-color: var(--linie-dunkel);
}

.fuss a:hover {
	text-decoration-color: var(--berkel);
}

.fuss-liste a {
	text-decoration: none;
}

.fuss-liste a:hover {
	text-decoration: underline;
}

.fuss-a11y p {
	max-width: 34ch;
	color: var(--chrom);
}

.fuss-a11y p a {
	color: var(--kreide);
}

.fuss-klein {
	margin-top: 1.25rem;
	font-size: 0.9375rem;
}

.fuss-a11y .fuss-a11y-link {
	margin-top: 0.5rem;
	font-size: 0.9375rem;
}

.fuss-unten {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	margin-top: clamp(3.5rem, 7vw, 6rem);
	padding-top: 1.75rem;
	border-top: 1px solid var(--linie-dunkel);
	font-family: var(--schild);
	font-weight: 500;
	font-size: 0.875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--chrom);
}

.fuss-unten nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
}

.fuss-unten a {
	color: var(--kreide);
	text-decoration: none;
}

.fuss-unten a:hover {
	text-decoration: underline;
}

/* „Webseite erstellt von …“: eigene letzte Zeile, klein und in normaler Schreibung wie auf den Seiten
   Kornpforte und Alter Posthof (seit 21.10.2026); Chrom auf Graphit 8:1 */
.fuss-credit {
	flex-basis: 100%;
	font-family: var(--text);
	font-weight: 400;
	font-size: 0.8125rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--chrom);
}

/* --- Unterseiten: Kopf, Bildband, Register --------------------------------- */

.seiten-kopf {
	padding: clamp(3rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3.5rem);
}

/* Untergrenze 2,5rem: „Wochenangebote“ muss bei 320px in eine Zeile passen */
.seiten-kopf h1 {
	font-size: clamp(2.5rem, 1.5rem + 3.6vw, 5.25rem);
	max-width: 7.63em;   /* 16ch in Cormorant Garamond */
}

.seiten-kopf h1 + p,
.seiten-lede {
	max-width: 23em;   /* 46ch in Source Serif 4 */
	margin-top: 1.25rem;
	color: var(--schiefer);
	font-size: 1.1875rem;
	line-height: 1.6;
}

.seiten-kopf .zeile {
	margin-bottom: 1rem;
}

/* Folgt dem Seitenkopf direkt ein Abschnitt, braucht er oben weniger Luft */
.seiten-kopf + .abschnitt {
	padding-top: clamp(1rem, 3vw, 2.5rem);
}

/* Foto über die ganze Breite unter dem Seitenkopf */
.seiten-band {
	margin: 0;
	background: var(--marmor);
}

.seiten-band img {
	width: 100%;
	max-height: 34rem;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}

.register {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--linie);
}

.register ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem 2rem;
}

.register a {
	font-family: var(--schild);
	font-weight: 500;
	font-size: 0.9375rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--graphit);
	text-decoration: none;
	text-underline-offset: 0.35em;
}

.register a:hover {
	text-decoration: underline;
	text-decoration-color: var(--berkel);
}

/* Sortiment: Reihen mit Foto und Text */
.reihe {
	padding: clamp(4rem, 8vw, 8rem) 0;
}

.reihe-gespiegelt {
	background: var(--marmor);
}

.reihe-raster {
	display: grid;
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: center;
}

.reihe-bild img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.reihe-text h2 {
	margin-bottom: 0.75rem;
}

.reihe-text .zeile {
	margin-bottom: 1.25rem;
}

.reihe-text .knopfreihe {
	margin-top: 2.25rem;
}

/* Beispiele wie auf einer Karte: Name links, Herkunft rechts */
.beispiele-titel {
	margin: 2.5rem 0 0.4rem;
	font-family: var(--schild);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--schiefer);
}

.beispiele {
	max-width: 36rem;
	border-top: 1px solid var(--linie);
}

.beispiele li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.1rem 1.5rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--linie);
}

.beispiel-name {
	font-family: var(--display);
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 1.2;
}

.beispiel-detail {
	font-family: var(--schild);
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--schiefer);
	text-align: right;
}

/* Gerichte und Angebote der Woche (Startseite und angebote.php, gepflegt in verwaltung/woche.php):
   zwei Listen wie eine Tafel, Name links, Preis rechts in der Schrift der Preisschilder.
   Seit 21.10.2026 ein weißes Blatt (.woche-blatt) mit dunklem Titelfeld (.woche-deckel, Klasse dunkel):
   auf dem Handy ein Kopf über den Listen, ab 64em eine Spalte links (30 % der Breite; der Farbverlauf
   malt die ganze Spalte dunkel, damit der Preishinweis unten darin steht). Rot nur als Akzent:
   Schnittmarke vor dem Zeitraum, Angebotspreise, Unterstrich des Textlinks. Verworfen am selben Tag:
   der ganze Abschnitt in Berkel-Rot und ein rotes Titelfeld („das Rot ist total hässlich … einfach
   stilvoll hervorheben“); die weiße Tafel auf Kreide davor (20.10.) war zu unauffällig. */
.woche-blatt {
	display: grid;
	grid-template-areas: "deckel" "listen" "fuss" "links";
	background: var(--weiss);
	background-clip: padding-box;
	border: 1px solid var(--linie);
	box-shadow: var(--schatten);
}

.woche-deckel {
	grid-area: deckel;
	padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.25rem, 4vw, 3rem) clamp(1.75rem, 4vw, 3rem);
}

.woche-deckel h2 {
	max-width: 12ch;
	font-size: clamp(1.9rem, 1.1rem + 1.8vw, 3rem);
}

.woche-deckel .zeile {
	margin-top: 1rem;
}

/* „Beispiel“ wie ein Stempel im Titelfeld, solange noch keine echten Angebote drinstehen */
.beispiel-marke {
	display: inline-block;
	margin-bottom: 1.5rem;
	padding: 0.4rem 0.85rem 0.35rem;
	border: 2px solid var(--kreide);
	color: var(--kreide);
	font-family: var(--schild);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.2;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.woche-raster {
	grid-area: listen;
	display: grid;
	gap: 3rem clamp(3rem, 6vw, 6rem);
	padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.25rem, 4vw, 3rem) clamp(1.75rem, 4vw, 3rem);
}

.woche-liste h3 {
	margin-bottom: 0.9rem;
	font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2rem);
}

.karte {
	border-top: 1px solid var(--graphit);
}

/* Beschreibung direkt unter dem Namen, der Preis (bei Angeboten mit „statt“) rechts daneben */
.karte li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "name preis" "text preis";
	gap: 0.15rem 1.5rem;
	align-items: baseline;
	padding: 1rem 0 1.05rem;
	border-bottom: 1px solid var(--linie);
}

.karte-name {
	grid-area: name;
	font-family: var(--display);
	font-weight: 500;
	font-size: clamp(1.35rem, 1.2rem + 0.4vw, 1.6rem);
	line-height: 1.2;
}

.karte-preis {
	grid-area: preis;
	display: grid;
	justify-items: end;
	font-family: var(--schild);
	font-weight: 600;
	font-size: 1.25rem;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.karte-angebote .karte-neu {
	color: var(--berkel);
}

.karte-alt {
	font-weight: 500;
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	color: var(--schiefer);
}

.karte-text {
	grid-area: text;
	align-self: start;
	max-width: 48ch;
	color: var(--schiefer);
	font-size: 0.9875rem;
	line-height: 1.5;
}

/* Hinweis unter den Listen; content-box, damit die 60ch neben dem Polster gelten */
.woche-fuss {
	grid-area: fuss;
	box-sizing: content-box;
	max-width: 60ch;
	padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(1.75rem, 4vw, 3rem);
	color: var(--schiefer);
	font-size: 0.9375rem;
}

.woche-links {
	grid-area: links;
	align-items: center;
	gap: 1rem 2.25rem;
	padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(1.75rem, 4vw, 3rem);
}

/* Flyer Frühstück & Snacks (angebote.php): Text links, beide Seiten wie zwei Karten rechts */
.flyer-raster {
	display: grid;
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}

.flyer-text h2 {
	margin-bottom: 1.25rem;
	max-width: 14ch;
}

.flyer-text .knopfreihe {
	margin-top: 2rem;
}

.flyer-seiten {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 3vw, 2rem);
	align-items: start;
}

.flyer-seiten img {
	width: 100%;
	box-shadow: var(--schatten);
}

/* ein Klick öffnet die Seite groß (Lightbox in site.js, Bild flyer-*-1500.jpg) */
.flyer-seiten a {
	display: block;
	cursor: zoom-in;
}

/* Anlässe auf angebote.php: Überschrift und Lede nach dem Bildband, dann die Reihen */
.anlaesse-kopf {
	padding-top: clamp(3.5rem, 7vw, 6rem);
}

.anlaesse-kopf h2 {
	max-width: 16ch;
}

.anlaesse-kopf + .reihe {
	padding-top: clamp(2.5rem, 5vw, 4.5rem);
}

.abschluss {
	padding: clamp(4.5rem, 8vw, 7.5rem) 0;
	text-align: center;
}

.abschluss h2 {
	max-width: 22ch;
	margin: 0 auto 2.5rem;
	font-size: clamp(2rem, 1.3rem + 2.2vw, 3.4rem);
}

.abschluss .knopfreihe {
	justify-content: center;
}

/* Öffnungsstatus als Zeile mit Punkt (besuch.php) */
.info-status {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--schild);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.info-status::before {
	content: "";
	flex: none;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	border: 1px solid var(--schiefer);
}

.info-status.ist-offen::before {
	border-color: var(--berkel);
	background: var(--berkel);
}

/* --- Rechtsseiten ---------------------------------------------------------- */

.fliesstext {
	max-width: 46rem;
	padding-top: clamp(1rem, 3vw, 2.5rem);
	padding-bottom: var(--abstand);
}

.fliesstext h2 {
	margin: 2.75rem 0 0.75rem;
	font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
	font-weight: 500;
}

.fliesstext h2:first-child {
	margin-top: 0;
}

.fliesstext p + p {
	margin-top: 1rem;
}

.fliesstext .knopf {
	margin-top: 3rem;
}

.fliesstext .test-hinweis {
	margin: 0 0 2.5rem;
}

.formular-liste,
.text-liste {
	margin-top: 1rem;
	padding-left: 1.25rem;
	list-style: disc;
}

.formular-liste li + li {
	margin-top: 0.4rem;
}

.text-liste li + li {
	margin-top: 0.6rem;
}

.fliesstext .text-liste + p {
	margin-top: 1rem;
}

/* --- Shop: Bestellen, Paket, Kasse, Bestätigung --------------------------- */

.test-hinweis {
	margin: 2rem 0 0;
	padding: 0.9rem 1.25rem;
	background: var(--weiss);
	border: 1px solid var(--linie);
	border-left: 3px solid var(--berkel);
	font-size: 0.9375rem;
}

.test-hinweis strong {
	font-family: var(--schild);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Ablauf im Kopf: echte Reihenfolge, deshalb nummeriert */
.ablauf {
	display: grid;
	gap: 1.5rem;
	margin-top: 2.5rem;
	counter-reset: schritt;
}

.ablauf li {
	position: relative;
	padding-left: 2.6rem;
	color: var(--schiefer);
	counter-increment: schritt;
}

.ablauf li::before {
	content: counter(schritt);
	position: absolute;
	left: 0;
	top: -0.35rem;
	font-family: var(--display);
	font-weight: 400;
	font-size: 2.3rem;
	line-height: 1;
	color: var(--berkel);
}

.ablauf-titel {
	display: block;
	margin-bottom: 0.15rem;
	font-family: var(--display);
	font-weight: 500;
	font-size: 1.35rem;
	line-height: 1.2;
	color: var(--graphit);
}

.shop-raster {
	display: grid;
	gap: clamp(3rem, 5vw, 4.5rem);
	padding-bottom: var(--abstand);
	align-items: start;
}

.kategorie {
	margin-top: clamp(3rem, 6vw, 5rem);
	scroll-margin-top: calc(var(--kopf-hoehe) + 1rem);
}

.kategorie-bild img {
	width: 100%;
	aspect-ratio: 21 / 8;
	object-fit: cover;
}

h2.kategorie-titel {
	margin: 1.5rem 0 0.75rem;
	font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3.2rem);
}

.artikel-liste {
	border-top: 1px solid var(--linie);
}

.artikel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"text preis"
		"text knopf";
	gap: 0.6rem 1.5rem;
	padding: 1.15rem 0;
	border-bottom: 1px solid var(--linie);
	align-items: start;
}

.artikel-text {
	grid-area: text;
}

.artikel .paket-form {
	grid-area: knopf;
	justify-self: end;
}

.artikel-name {
	font-weight: 500;
	font-size: 1.45rem;
	line-height: 1.15;
}

.artikel-detail {
	margin-top: 0.25rem;
	font-family: var(--schild);
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--schiefer);
}

.artikel-angaben {
	margin-top: 0.35rem;
	font-size: 0.875rem;
	color: var(--schiefer);
}

.artikel-angaben summary {
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: var(--linie);
	text-underline-offset: 0.2em;
}

.artikel-angaben p {
	max-width: 52ch;
	margin-top: 0.35rem;
}

.artikel-preis {
	grid-area: preis;
	display: grid;
	justify-items: end;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.preis {
	font-family: var(--display);
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.1;
}

.portion,
.grundpreis {
	font-family: var(--schild);
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	color: var(--schiefer);
}

.knopf.ist-im-paket {
	background: var(--berkel);
	border-color: var(--berkel);
}

.shop-leer {
	margin-top: 3rem;
}

.shop-info {
	margin-top: clamp(3rem, 6vw, 5rem);
}

.shop-info details {
	border-bottom: 1px solid var(--linie);
}

.shop-info summary {
	padding: 1rem 0;
	font-family: var(--display);
	font-weight: 500;
	font-size: 1.35rem;
	cursor: pointer;
}

.shop-info details p {
	max-width: 60ch;
	padding-bottom: 1.25rem;
	color: var(--schiefer);
}

/* Paket */
.paket-box {
	padding: 1.75rem 1.75rem 2rem;
	background: var(--weiss);
	border: 1px solid var(--linie);
	border-top: 3px solid var(--graphit);
	box-shadow: var(--schatten);
}

.paket-titel {
	margin-bottom: 1rem;
	font-family: var(--schild);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.3;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.paket-titel-zahl {
	color: var(--schiefer);
}

.paket-leer {
	color: var(--schiefer);
}

.paket-liste {
	border-top: 1px solid var(--linie);
}

.paket-zeile {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"text weg"
		"menge summe";
	gap: 0.5rem 1rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--linie);
	align-items: center;
}

.pz-text {
	grid-area: text;
	display: grid;
}

.pz-name {
	font-family: var(--display);
	font-weight: 500;
	font-size: 1.2rem;
	line-height: 1.2;
}

.pz-portion {
	font-family: var(--schild);
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	color: var(--schiefer);
}

.pz-menge {
	grid-area: menge;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.pz-zahl {
	min-width: 1.5rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.pz-knopf,
.pz-weg {
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	padding: 0;
	border: 1px solid var(--linie);
	background: transparent;
	color: var(--graphit);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.pz-knopf:hover {
	border-color: var(--graphit);
}

.paket-zeile > .paket-form:last-child {
	grid-area: weg;
	justify-self: end;
}

.pz-weg {
	border-color: transparent;
	color: var(--schiefer);
}

.pz-weg:hover {
	color: var(--berkel);
}

.pz-summe {
	grid-area: summe;
	justify-self: end;
	font-variant-numeric: tabular-nums;
}

.symbol {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
}

.paket-summe {
	display: flex;
	justify-content: space-between;
	margin-top: 1rem;
	font-family: var(--display);
	font-weight: 500;
	font-size: 1.4rem;
	font-variant-numeric: tabular-nums;
}

.paket-hinweis {
	margin-top: 0.4rem;
	font-size: 0.875rem;
	color: var(--schiefer);
}

.paket-weiter {
	width: 100%;
	margin-top: 1.25rem;
}

/* Anzahl im Menü */
.paket-zahl {
	display: inline-grid;
	place-items: center;
	min-width: 1.4rem;
	height: 1.4rem;
	margin-left: 0.45rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: var(--berkel);
	color: var(--kreide);
	font-size: 0.75rem;
	letter-spacing: 0;
	line-height: 1;
	vertical-align: 0.1em;
}

.menue .paket-zahl {
	font-family: var(--schild);
	font-size: 1rem;
	min-width: 1.9rem;
	height: 1.9rem;
	vertical-align: 0.4em;
}

/* Leiste am unteren Rand (nur kleine Bildschirme) */
.paket-leiste {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem var(--rand) calc(0.75rem + env(safe-area-inset-bottom));
	background: var(--graphit);
	color: var(--kreide);
	box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.25);
}

.paket-leiste-info {
	display: grid;
	color: var(--kreide);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.paket-leiste-titel {
	font-family: var(--schild);
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--chrom);
}

.paket-leiste .knopf {
	background: var(--kreide);
	border-color: var(--kreide);
	color: var(--graphit);
}

body:has(.paket-leiste:not([hidden])) .fuss {
	padding-bottom: 7rem;
}

/* Kasse */
.kasse {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	padding: clamp(2rem, 4vw, 3rem) 0 var(--abstand);
	align-items: start;
}

.fehler-box {
	margin-bottom: 2.5rem;
	padding: 1.25rem 1.5rem;
	background: var(--weiss);
	border: 1px solid var(--linie);
	border-left: 3px solid var(--berkel);
}

.fehler-box h2 {
	margin-bottom: 0.5rem;
	font-family: var(--schild);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--berkel);
}

.fehler-box li + li {
	margin-top: 0.3rem;
}

.kasse-block {
	min-width: 0;
	margin: 0 0 2.75rem;
	padding: 0;
	border: 0;
}

.kasse-block legend {
	margin-bottom: 1rem;
	padding: 0;
	font-family: var(--display);
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 1.2;
}

.wahl-raster {
	display: grid;
	gap: 0.75rem;
}

.wahl {
	position: relative;
	display: grid;
	gap: 0.2rem;
	padding: 1.1rem 1.25rem 1.15rem 3.1rem;
	border: 1px solid var(--linie);
	background: var(--weiss);
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wahl input {
	position: absolute;
	left: 1.15rem;
	top: 1.35rem;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
	accent-color: var(--graphit);
}

.wahl:has(input:checked) {
	border-color: var(--graphit);
	box-shadow: inset 3px 0 0 var(--berkel);
}

.wahl-titel {
	font-family: var(--display);
	font-weight: 500;
	font-size: 1.35rem;
	line-height: 1.2;
}

.wahl-text {
	font-size: 0.9375rem;
	color: var(--schiefer);
}

.feld {
	display: grid;
	gap: 0.4rem;
	margin-bottom: 1.25rem;
}

.feld label {
	font-family: var(--schild);
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.feld-zusatz {
	font-family: var(--text);
	font-size: 0.8125rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--schiefer);
}

.feld input,
.feld select,
.feld textarea {
	width: 100%;
	padding: 0.8rem 0.9rem;
	border: 1px solid rgba(28, 29, 31, 0.3);
	border-radius: 0;
	background: var(--weiss);
	color: var(--graphit);
	font: inherit;
	font-size: 1.0625rem;
}

.feld textarea {
	resize: vertical;
}

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
	border-color: var(--graphit);
}

.feld input[readonly] {
	color: var(--schiefer);
}

.feld [aria-invalid="true"] {
	border-color: var(--berkel);
}

.feld-paar {
	display: grid;
	gap: 0 1.25rem;
}

.feld-hinweis {
	font-size: 0.9375rem;
	color: var(--schiefer);
}

.feld-fehler {
	margin-top: 0.25rem;
	font-size: 0.9375rem;
	color: var(--berkel);
}

.haken {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.75rem;
	align-items: start;
	margin-bottom: 0.9rem;
	font-size: 0.9375rem;
	cursor: pointer;
}

.haken input {
	width: 1.1rem;
	height: 1.1rem;
	margin: 0.2rem 0 0;
	accent-color: var(--graphit);
}

.honig {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.kasse-uebersicht {
	padding: 1.75rem 1.75rem 2rem;
	background: var(--weiss);
	border: 1px solid var(--linie);
	border-top: 3px solid var(--graphit);
	box-shadow: var(--schatten);
}

.uebersicht-liste li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--linie);
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}

.uebersicht-liste li > span:last-child {
	white-space: nowrap;
}

.uebersicht-aendern {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: 0.875rem;
}

.uebersicht-summen {
	margin-top: 1.25rem;
	font-variant-numeric: tabular-nums;
}

.uebersicht-summen div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.3rem 0;
}

.uebersicht-summen .uebersicht-gesamt {
	margin-top: 0.5rem;
	padding-top: 0.8rem;
	border-top: 1px solid var(--graphit);
	font-family: var(--display);
	font-weight: 500;
	font-size: 1.5rem;
}

.kasse-zustimmung {
	margin-top: 1.75rem;
}

.kasse-absenden {
	display: grid;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

#paypal-knoepfe {
	min-height: 3rem;
}

/* Bestätigung */
.bestaetigung {
	max-width: 46rem;
	padding: clamp(1rem, 3vw, 2.5rem) 0 var(--abstand);
}

.bestaetigung-daten {
	display: grid;
	gap: 1rem;
	margin: 2rem 0 2.75rem;
}

.bestaetigung-daten dt {
	font-family: var(--schild);
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--schiefer);
}

.bestaetigung-daten dd {
	font-family: var(--display);
	font-size: 1.4rem;
	line-height: 1.3;
}

.bestaetigung-text {
	margin: 2rem 0 2.5rem;
	color: var(--schiefer);
}

@media (min-width: 40em) {
	.ablauf {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.artikel {
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-areas: "text preis knopf";
		align-items: center;
	}

	.wahl-raster,
	.feld-paar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bestaetigung-daten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.shop-raster {
		grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	}

	.paket {
		margin-top: clamp(3rem, 6vw, 5rem);
	}

	.paket-leiste {
		display: none;
	}

	body:has(.paket-leiste:not([hidden])) .fuss {
		padding-bottom: clamp(4rem, 8vw, 7rem);
	}

	.kasse {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
}

/* Mitlaufen nur, wenn das Fenster hoch genug ist – sonst wäre der Bestellknopf nicht erreichbar.
   Ein langes Paket scrollt in seinem Feld. */
@media (min-width: 64em) and (min-height: 50em) {
	.paket {
		position: sticky;
		top: calc(var(--kopf-hoehe) + 1.5rem);
	}

	.paket-box {
		max-height: calc(100vh - var(--kopf-hoehe) - 3rem);
		overflow-y: auto;
	}

	.kasse-uebersicht {
		position: sticky;
		top: calc(var(--kopf-hoehe) + 1.5rem);
	}
}

/* --- Verwaltung (/verwaltung/) ---------------------------------------------- */

.v-kopf {
	padding: 0.9rem 0;
}

.v-kopf-innen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2.5rem;
	min-height: 3.5rem;
}

.v-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.75rem;
}

.v-navigation a {
	padding: 0.35rem 0;
	border-bottom: 1px solid transparent;
	font-family: var(--schild);
	font-weight: 500;
	font-size: 0.9375rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kreide);
	text-decoration: none;
}

.v-navigation a[aria-current="page"],
.v-navigation a:hover {
	border-bottom-color: var(--berkel);
}

.v-abmelden {
	margin-left: auto;
}

.v-inhalt {
	padding-top: 1rem;
	padding-bottom: 5rem;
}

.v-inhalt h1 {
	margin: 2rem 0 1.5rem;
	font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
}

.v-kopfzeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 2rem 0 1.5rem;
}

.v-kopfzeile h1 {
	margin: 0;
}

.v-meldung {
	margin: 1.5rem 0 0;
	padding: 0.8rem 1.1rem;
	background: var(--weiss);
	border: 1px solid var(--linie);
	border-left: 3px solid var(--graphit);
}

.v-hinweis {
	margin: 1rem 0 1.5rem;
	padding: 0.7rem 1.1rem;
	background: var(--weiss);
	border: 1px solid var(--linie);
	border-left: 3px solid var(--berkel);
	font-size: 0.9375rem;
}

.v-zurueck {
	margin-top: 1.5rem;
	font-size: 0.9375rem;
}

.v-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.v-filter a {
	padding: 0.55rem 0.9rem;
	border: 1px solid var(--linie);
	font-family: var(--schild);
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--graphit);
	text-decoration: none;
}

.v-filter a[aria-current="page"] {
	background: var(--graphit);
	border-color: var(--graphit);
	color: var(--kreide);
}

.v-anzahl {
	margin-left: 0.3rem;
	font-variant-numeric: tabular-nums;
	opacity: 0.7;
}

.v-tabelle-rahmen {
	overflow-x: auto;
}

.v-tabelle {
	width: 100%;
	border-collapse: collapse;
	background: var(--weiss);
}

.v-tabelle th,
.v-tabelle td {
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--linie);
	text-align: left;
	vertical-align: top;
}

.v-tabelle thead th {
	font-family: var(--schild);
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--schiefer);
}

.v-tabelle tbody th {
	font-weight: 500;
}

.v-klein {
	font-size: 0.8125rem;
	color: var(--schiefer);
}

.v-zahl {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.v-status,
.v-marke {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	border: 1px solid currentColor;
	font-family: var(--schild);
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.v-status-neu {
	color: var(--berkel);
}

.v-status-in_arbeit,
.v-status-bereit {
	color: var(--graphit);
}

.v-status-erledigt,
.v-status-zahlung_offen {
	color: var(--schiefer);
}

.v-status-storniert,
.v-status-abgebrochen {
	color: var(--schiefer);
	text-decoration: line-through;
}

.v-marke {
	border-color: var(--linie);
	color: var(--schiefer);
}

.v-marke-warn {
	border-color: var(--berkel);
	color: var(--berkel);
}

.v-raster {
	display: grid;
	gap: 1.5rem;
}

.v-karte {
	padding: 1.5rem 1.75rem;
	background: var(--weiss);
	border: 1px solid var(--linie);
}

.v-karte h2 {
	margin: 1.4rem 0 0.4rem;
	font-family: var(--schild);
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.v-karte h2:first-child {
	margin-top: 0;
}

.v-gross {
	font-family: var(--display);
	font-size: 1.4rem;
	line-height: 1.3;
}

.v-zahlung {
	margin-top: 1rem;
}

.v-status-form {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 1rem;
	margin: 2rem 0;
}

.v-status-form .feld {
	min-width: 16rem;
	margin: 0;
}

.v-verlauf h2,
.v-gruppe h2 {
	margin: 2.5rem 0 0.75rem;
	font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
	font-weight: 500;
	text-align: left;
}

.v-verlauf li {
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--linie);
	font-size: 0.9375rem;
}

.v-verlauf time {
	margin-right: 0.75rem;
	font-family: var(--schild);
	font-variant-numeric: tabular-nums;
	color: var(--schiefer);
}

.v-formular {
	max-width: 30rem;
}

.v-formular-breit {
	max-width: 48rem;
}

/* Wochenangebote: je Zeile ein Eintrag; ab 48em wie eine Tabelle mit Spaltenköpfen */
.v-woche {
	max-width: 66rem;
}

.v-woche .feld-hinweis {
	max-width: 70ch;
	margin-bottom: 1rem;
}

.w-kopfzeile {
	display: none;
}

.w-zeile {
	display: grid;
	gap: 0 0.75rem;
	padding: 0.9rem 0 0.4rem;
	border-top: 1px solid var(--linie);
}

.w-zeile .feld {
	margin-bottom: 0.6rem;
}

.w-zeile input {
	padding: 0.6rem 0.7rem;
	font-size: 1rem;
}

@media (min-width: 48em) {
	.w-kopfzeile,
	.w-zeile {
		grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 1.6fr);
		gap: 0 0.75rem;
	}

	.w-kopfzeile.w-mit-statt,
	.w-zeile.w-mit-statt {
		grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 1.6fr) minmax(0, 1.6fr);
	}

	.w-kopfzeile {
		display: grid;
		padding-bottom: 0.4rem;
		font-family: var(--schild);
		font-weight: 600;
		font-size: 0.75rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--schiefer);
	}

	.w-zeile {
		padding: 0.3rem 0;
		border-top: 0;
	}

	.w-zeile .feld {
		margin: 0;
	}

	/* die Spaltenköpfe stehen oben; Beschriftungen bleiben für Screenreader */
	.w-zeile label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

.v-formular .knopfreihe {
	margin-top: 1.5rem;
}

.v-loeschen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	max-width: 48rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--linie);
}

.v-loeschen .haken {
	margin: 0;
}

.v-artikel {
	border-top: 1px solid var(--linie);
}

.v-artikel li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.3rem 1rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--linie);
	align-items: center;
}

.v-artikel a {
	display: grid;
	color: var(--graphit);
	text-decoration: none;
}

.v-artikel a:hover .v-artikel-name {
	text-decoration: underline;
	text-decoration-color: var(--berkel);
}

.v-artikel-name {
	font-family: var(--display);
	font-weight: 500;
	font-size: 1.25rem;
}

.v-marken {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.v-leer {
	color: var(--schiefer);
}

.v-anmeldung {
	max-width: 30rem;
	padding-bottom: 3rem;
}

.v-anmeldung pre {
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	overflow-x: auto;
	background: var(--weiss);
	border: 1px solid var(--linie);
	font-size: 0.9375rem;
}

.v-zustand {
	margin-bottom: 2.5rem;
}

@media (min-width: 40em) {
	.v-artikel li {
		grid-template-columns: minmax(0, 1fr) auto auto;
	}

	.v-marken {
		grid-column: auto;
	}
}

@media (min-width: 64em) {
	.v-raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- Lightbox -------------------------------------------------------------- */

.lightbox {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4.5rem 5.5rem 4rem;
	background: rgba(20, 21, 23, 0.96);
	color: var(--kreide);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.lightbox.ist-offen {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease;
}

.lightbox figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	max-height: 100%;
}

.lightbox img {
	max-width: 100%;
	max-height: calc(100vh - 10.5rem);
	width: auto;
	height: auto;
}

.lightbox figcaption {
	max-width: 46rem;
	margin-top: 1.1rem;
	font-family: var(--display);
	font-style: italic;
	font-size: 1.35rem;
	line-height: 1.3;
	text-align: center;
}

.lb-zaehler {
	position: absolute;
	top: 1.75rem;
	left: 1.75rem;
	font-family: var(--schild);
	font-weight: 500;
	letter-spacing: 0.2em;
	color: var(--chrom);
	font-variant-numeric: tabular-nums;
}

.lightbox button {
	position: absolute;
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	padding: 0;
	border: 1px solid var(--linie-dunkel);
	background: transparent;
	color: var(--kreide);
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.lightbox button:hover {
	background: var(--berkel);
	border-color: var(--berkel);
}

.lightbox button svg {
	width: 1.1rem;
	height: 1.1rem;
	stroke: currentColor;
	stroke-width: 1.5;
	fill: none;
}

.lb-schliessen {
	top: 1rem;
	right: 1rem;
}

.lb-zurueck,
.lb-weiter {
	top: 50%;
	margin-top: -1.625rem;
}

.lb-zurueck {
	left: 1rem;
}

.lb-weiter {
	right: 1rem;
}

html.lightbox-aktiv {
	overflow: hidden;
}

/* --- Breakpoints ----------------------------------------------------------- */

@media (min-width: 40em) {
	.staende {
		gap: 2.5rem 1.5rem;
	}

	.merkmale-breit {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2rem 3rem;
	}

	.galerie {
		columns: 3;
		column-gap: 1rem;
	}

	.galerie li {
		margin-bottom: 1rem;
	}

	.fuss-raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.merkmale {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.leiste {
		display: block;
	}

	/* Leiste (2,4rem) und Kopf abziehen, damit Überschrift und Knöpfe ohne Scrollen zu sehen sind */
	.hero {
		min-height: clamp(36rem, 100svh - var(--kopf-hoehe) - 2.4rem, 60rem);
	}

	.hero-inhalt {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		gap: 3rem;
	}

	.hero-schild {
		justify-self: end;
	}

	.hero-schleier {
		background:
			linear-gradient(to top, rgba(28, 29, 31, 0.9) 0%, rgba(28, 29, 31, 0.5) 32%, rgba(28, 29, 31, 0.1) 62%, rgba(28, 29, 31, 0) 100%),
			linear-gradient(to right, rgba(28, 29, 31, 0.5) 0%, rgba(28, 29, 31, 0) 55%);
	}

	.abschnitt-kopf {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: end;
		gap: 3rem;
	}

	.abschnitt-kopf > :nth-child(2) {
		justify-self: end;
		text-align: left;
	}

	.haus-raster {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		align-items: center;
	}

	.merkmale {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
		max-width: 34rem;
	}

	.merkmale-breit {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2rem 3rem;
		max-width: none;
	}

	/* Stände im Wechsel (Reihenfolge aus $reihe in index.php): oben Käse (drei Spalten) und Wein,
	   dann Süßes und Salami & Schinken (drei Spalten), unten Pasta und Antipasti (je zwei). Jedes Foto
	   ist so hoch wie eine 4:5-Kachel, also 5/4 einer Spalte; eine Spalte ist bei drei Spalten
	   (100cqi − 2 Lücken) ÷ 3, bei zwei (100cqi − 1 Lücke) ÷ 2 breit (Lücke 1,5rem). So schließen die
	   Fotos einer Reihe unten bündig ab. Ohne Container-Einheiten gilt das Seitenverhältnis davor. */
	.staende {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 3rem 1.5rem;
	}

	.stand-paar {
		grid-column: span 3;
	}

	.stand-breit {
		grid-column: span 2;
	}

	.stand-paar .bereich,
	.stand-breit .bereich {
		container-type: inline-size;
	}

	.stand-paar .bereich-bild {
		aspect-ratio: 5 / 4;
		height: calc((100cqi - 3rem) * 5 / 12);
	}

	.stand-breit .bereich-bild {
		aspect-ratio: 5 / 3;
		height: calc((100cqi - 1.5rem) * 5 / 8);
	}

	/* Flyer seit 21.10.2026 etwas größer (vorher Text 6 : Flyer 5) */
	.angebot-raster {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	}

	/* Sortiment: Bild 5 Teile, Text 6 Teile; jede zweite Reihe mit Bild rechts */
	.reihe-raster {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	}

	.reihe-gespiegelt .reihe-raster {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	}

	.reihe-gespiegelt .reihe-bild {
		order: 2;
	}

	/* Flyer seit 21.10.2026 etwas größer (vorher Text 5 : Flyer 7) */
	.flyer-raster {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	}

	/* Wochenkarte: Titelfeld als dunkle Spalte links (30 %), rechts die Listen, darunter die Knöpfe;
	   der Hinweis steht unten in der dunklen Spalte, der Farbverlauf des Blatts färbt sie durchgehend
	   (background-clip: padding-box, sonst wiederholt sich der Verlauf unter dem Rand) */
	.woche-blatt {
		grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
		grid-template-rows: auto minmax(0, 1fr) auto;
		grid-template-areas: "deckel listen" "fuss listen" "fuss links";
		background: linear-gradient(90deg, var(--graphit) 30%, var(--weiss) 30%) padding-box;
	}

	.woche-deckel {
		padding: clamp(2.5rem, 4vw, 3.5rem) clamp(2rem, 3.5vw, 3rem) 2rem;
	}

	.woche-raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: clamp(2.5rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem) clamp(2.25rem, 4vw, 3.5rem);
	}

	/* nur eine Liste eingetragen: nicht über die ganze Breite ziehen */
	.woche-liste:only-child {
		max-width: 44rem;
	}

	.woche-blatt .woche-fuss {
		align-self: end;
		max-width: none;
		padding: 0 clamp(2rem, 3.5vw, 3rem) clamp(2.5rem, 4vw, 3.5rem);
		color: var(--chrom);
	}

	.woche-blatt .woche-links {
		padding: 0 clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 4vw, 3.5rem);
	}

	.besuch-raster {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		align-items: center;
	}

	.fragen-raster {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(3rem, 6vw, 6rem);
		align-items: start;
	}

	.fragen {
		margin-top: 0;
	}
}

/* vier Spalten im Fuß erst ab 80em – darunter passt die E-Mail-Adresse nicht in eine Spalte */
@media (min-width: 80em) {
	.fuss-raster {
		grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
		gap: 3rem;
	}

	.galerie {
		columns: 4;
	}
}

@media (max-width: 63.99em) {
	.navigation,
	.kopf-knopf {
		display: none;
	}

	.menue-knopf {
		display: flex;
	}

	.hero {
		min-height: clamp(34rem, 88svh, 52rem);
	}
}

/* Tablet hochkant: Schild „Diese Woche“ und Öffnungsschild nebeneinander, sonst rutscht das
   Öffnungsschild auf 768 × 1024 unter den Rand; ist es zu eng (um 640 px), bricht es um */
@media (min-width: 40em) and (max-width: 63.99em) {
	.hero-schilder {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
	}
}

@media (max-width: 39.99em) {
	:root {
		--kopf-hoehe: 4.25rem;
	}

	body {
		font-size: 1rem;
	}

	.wortmarke-name {
		font-size: 1.3rem;
	}

	/* Kopf auf dem Handy: Logo, Wortmarke und Menü-Knopf müssen nebeneinander passen. Der Knopf zeigt
	   nur das Symbol (der Text „Menü“/„Schließen“ bleibt für Screenreader), die Wortmarke wird kleiner. */
	.kopf .marke {
		gap: 0.55rem;
	}

	.kopf .marke-logo {
		height: 2.6rem;
	}

	.kopf .wortmarke-name {
		font-size: 1.15rem;
	}

	.kopf .wortmarke-zusatz {
		font-size: 0.625rem;
		letter-spacing: 0.2em;
	}

	.menue-knopf {
		justify-content: flex-end;
		min-width: 2.75rem;
		min-height: 2.75rem;
	}

	.menue-knopf-text {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.hero-inhalt {
		padding-top: clamp(6rem, 14svh, 12rem);
	}

	/* Das Schild als Zeile, damit das Foto Platz behält */
	.hero-schild {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.4rem 1.25rem;
		width: 100%;
		min-width: 0;
		padding: 1rem 1.25rem;
	}

	.hero-schild::before {
		display: none;
	}

	.hero-schild .schild-zeile:last-child {
		margin-left: auto;
	}

	/* Mit Schild „Diese Woche“: oben weniger Polster, beide Schilder als ein Block über die ganze
	   Breite, damit Woche und Öffnungsstatus auf 390 × 844 noch ohne Scrollen zu sehen sind */
	.mit-woche .hero-inhalt {
		gap: 1.25rem;
		padding-top: clamp(2.25rem, 5svh, 4rem);
	}

	.mit-woche .knopfreihe {
		margin-top: 1.25rem;
	}

	/* Öffnungsschild in einer Zeile: „Alle Öffnungszeiten“ entfällt, das Schild selbst ist der Link */
	.mit-woche .hero-schild .schild-zeile:last-child {
		display: none;
	}

	.hero-schilder {
		justify-items: stretch;
		gap: 0;
	}

	.woche-schild {
		gap: 0.35rem;
		min-width: 0;
		max-width: none;
		padding: 1rem 1.25rem 0.75rem;
		box-shadow: none;
	}

	.woche-schild::before {
		display: none;
	}

	.woche-schild-liste li {
		padding-top: 0.4rem;
	}

	.woche-schild-name {
		font-size: 1.15rem;
	}

	.woche-schild-preis {
		font-size: 1.05rem;
	}

	/* „Zur Wochenkarte“ nur unsichtbar: Die ganze Karte bleibt der Link (::after), die Wochenkarte
	   folgt gleich darunter; der Fokus zeigt sich dann um die ganze Karte */
	.woche-schild-mehr {
		height: 0;
		padding: 0;
		border: 0;
		font-size: 0;
		line-height: 0;
	}

	.woche-schild:has(.woche-schild-mehr:focus-visible) {
		outline: 2px solid var(--kreide);
		outline-offset: 3px;
	}

	.woche-schild + .hero-schild {
		border-top: 0;
	}

	.haus-bilder {
		padding-bottom: 38%;
	}

	.lightbox {
		padding: 4.5rem 0.75rem 6rem;
	}

	.lightbox img {
		max-height: calc(100vh - 13rem);
	}

	.lb-zurueck,
	.lb-weiter {
		top: auto;
		bottom: 1.25rem;
		margin-top: 0;
	}

	.lb-zurueck {
		left: calc(50% - 3.75rem);
	}

	.lb-weiter {
		right: calc(50% - 3.75rem);
	}
}

/* sehr schmale Handys (unter 360 px): Logo und Wortmarke im Kopf noch etwas kleiner */
@media (max-width: 22.49em) {
	.kopf .marke-logo {
		height: 2.3rem;
	}

	.kopf .wortmarke-name {
		font-size: 1.05rem;
	}

	.kopf .wortmarke-zusatz {
		font-size: 0.6rem;
		letter-spacing: 0.16em;
	}
}

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

	.scheiben,
	.klinge {
		display: none;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	html.js .hero-bild.ist-angeschnitten img {
		animation: none;
	}
}

/* --- Niedrige Fenster ------------------------------------------------------ */
/* Laptops mit 768 px Bildschirmhöhe, Handy quer: Überschrift, Lede, Polster und die Mindesthöhe des
   Hero knapper, damit Lede und Knöpfe über dem unteren Rand bleiben (20.10.2026). Steht am Ende des
   Stylesheets, damit es die Hero-Regeln der Breakpoints überschreibt. */
@media (max-height: 44em) {
	.hero {
		min-height: calc(100svh - var(--kopf-hoehe));
	}

	.hero h1 {
		margin-bottom: 0.8rem;
		font-size: min(clamp(3rem, 1.4rem + 6vw, 7.75rem), 9svh);
	}

	.hero-inhalt {
		padding-top: 4rem;
		padding-bottom: 2.5rem;
	}

	.hero-lede {
		max-width: 26em;
		font-size: 1rem;
	}

	.hero .knopfreihe {
		margin-top: 1.25rem;
	}
}

@media (max-height: 44em) and (min-width: 64em) {
	.hero {
		min-height: calc(100svh - var(--kopf-hoehe) - 2.4rem);   /* Leiste abziehen */
	}
}