/*
 * Block „Karte“ (webcrow/karte), Design v2 nach Mockup B (mockup/v2-b/assets/v2b.css).
 * Schriften lädt das Theme (Cormorant Garamond, Atkinson Hyperlegible Next, lokal). Das Plugin stellt nur
 * den Ziffern-Alias „WCR Ziffern“ (includes/schrift.php: Figtree, U+0030-0039, Null ohne Schrägstrich).
 * Kartenteile stehen auf der hellen Lesefläche (Theme-Klasse .wcr-im-licht), die Rubrikleiste auf dem dunklen Grund.
 * Die Tokens heißen wie im Theme; hier stehen dieselben Werte als Rückfall, falls das Theme fehlt.
 * Zeilenlängen in em statt ch: ch misst wegen „WCR Ziffern“ die Figtree-Null; die em-Werte sind die im Mockup gemessenen Pixelbreiten.
 */

.wcr-karte-block {
	/* Farben */
	--wcr-grund: #1A1411;
	--wcr-flaeche: #241B16;
	--wcr-licht: #F1E6D6;
	--wcr-licht-gedimmt: #C9B8A3;
	--wcr-akzent: #D08A56;
	--wcr-akzent-hell: #E09A64;
	--wcr-akzent-tief: #7E3F1C;
	--wcr-hell-2: #F6F4F1;
	--wcr-tinte: #211915;
	--wcr-tinte-gedimmt: #5A4C43;
	--wcr-linie-hell: #D3CCC4;
	--wcr-linie-dunkel: rgba(241, 230, 214, 0.16);

	/* Schriften */
	--wcr-schrift-titel: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--wcr-schrift-text: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
	--wcr-schrift-ziffern: "WCR Ziffern"; /* Alias: das Plugin definiert ihn per @font-face (includes/schrift.php) */

	/* Form und Bewegung */
	--wcr-radius: 6px;
	--wcr-ease: cubic-bezier(0.23, 1, 0.32, 1);

	font-family: var(--wcr-schrift-ziffern), var(--wcr-schrift-text);
	line-height: 1.6;
	overflow-wrap: break-word;
}

.wcr-karte-block *,
.wcr-karte-block *::before,
.wcr-karte-block *::after { box-sizing: border-box; }

.wcr-karte-block :is(h2, h3, p, ul, dl, dd) { margin: 0; padding: 0; }
.wcr-karte-block :is(h2, h3) {
	font-family: var(--wcr-schrift-titel);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.005em;
	text-wrap: balance;
	color: inherit;
	/* Cormorant hat Mediävalziffern; für Nummern in Titeln Versalziffern. */
	font-variant-numeric: lining-nums;
}
.wcr-karte-block p { text-wrap: pretty; }
.wcr-karte-block ul { list-style: none; }

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

.wcr-karte-leer { color: var(--wcr-tinte-gedimmt); font-style: italic; }

.wcr-karte-block :focus-visible {
	outline: 3px solid var(--wcr-akzent-tief);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Rubrikleiste: dunkler Streifen über die volle Breite (Schatten und clip-path), Links in der Inhaltsbreite.
   Sticky setzt die umgebende Gruppe im Seiteninhalt. */

.wcr-rubrikleiste {
	position: relative;
	background: rgba(26, 20, 17, 0.96);
	color: var(--wcr-licht);
	border-block: 1px solid var(--wcr-linie-dunkel);
	box-shadow: 0 0 0 100vmax rgba(26, 20, 17, 0.96);
	clip-path: inset(0 -100vmax);
}
.wcr-rubrikleiste ul {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* Deckung: Streifen unter einem Pfeilknopf, ganz ausgeblendet. Verlauf: weicher Übergang daneben. */
	--wcr-deckung-links: 0px;
	--wcr-verlauf-links: 0px;
	--wcr-deckung-rechts: 0px;
	--wcr-verlauf-rechts: 2.5rem;
	-webkit-mask-image: linear-gradient(to right, transparent var(--wcr-deckung-links), #000 calc(var(--wcr-deckung-links) + var(--wcr-verlauf-links)), #000 calc(100% - var(--wcr-deckung-rechts) - var(--wcr-verlauf-rechts)), transparent calc(100% - var(--wcr-deckung-rechts)));
	mask-image: linear-gradient(to right, transparent var(--wcr-deckung-links), #000 calc(var(--wcr-deckung-links) + var(--wcr-verlauf-links)), #000 calc(100% - var(--wcr-deckung-rechts) - var(--wcr-verlauf-rechts)), transparent calc(100% - var(--wcr-deckung-rechts)));
}
/* Mit JavaScript (karte-leiste.js setzt data-rand): Pfeil, Deckung und Verlauf nur an der Seite,
   an der noch Rubriken verborgen sind. Ohne JavaScript bleibt der rechte Verlauf als Hinweis. */
/* scroll-padding = Pfeilbreite (2.75rem) + 1px gegen Rundung: Einrasten (snap start) und Tastaturfokus halten
   Links aus dem Streifen unter dem Pfeil. Der Verlauf (1.25rem) daneben darf den Rand noch aufhellen. */
.wcr-rubrikleiste ul[data-rand] { --wcr-verlauf-rechts: 0px; scroll-padding-inline: calc(2.75rem + 1px); }
/* Tastaturfokus: Einrasten aus, sonst springt die Leiste nach dem Fokus-Scroll auf den alten Rastpunkt zurück
   und der fokussierte Link bleibt halb unter dem Pfeil. */
.wcr-rubrikleiste ul:has(a:focus-visible) { scroll-snap-type: none; }
.wcr-rubrikleiste ul[data-rand~="links"] { --wcr-deckung-links: 2.75rem; --wcr-verlauf-links: 1.25rem; }
.wcr-rubrikleiste ul[data-rand~="rechts"] { --wcr-deckung-rechts: 2.75rem; --wcr-verlauf-rechts: 1.25rem; }
.wcr-rubrikleiste ul::-webkit-scrollbar { display: none; }
.wcr-rubrikleiste li { flex: none; scroll-snap-align: start; }
/* .wcr-karte-block davor: Astra unterstreicht .entry-content a (Spezifität 0,2,1). */
.wcr-karte-block .wcr-rubrikleiste a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border-radius: var(--wcr-radius);
	color: var(--wcr-licht-gedimmt);
	text-decoration: none;
	white-space: nowrap;
	font-weight: 600;
	font-size: 1.0625rem;
	transition: color 200ms ease, background-color 200ms ease;
}
.wcr-karte-block .wcr-rubrikleiste a::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 6px;
	height: 2px;
	border-radius: 2px;
	background: var(--wcr-akzent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 300ms var(--wcr-ease);
}
.wcr-karte-block .wcr-rubrikleiste a[aria-current="true"] { color: var(--wcr-licht); }
.wcr-karte-block .wcr-rubrikleiste a[aria-current="true"]::after { transform: scaleX(1); }
.wcr-karte-block .wcr-rubrikleiste a:focus-visible { outline-color: var(--wcr-akzent-hell); outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
	.wcr-karte-block .wcr-rubrikleiste a:hover { color: var(--wcr-licht); background: rgba(241, 230, 214, 0.06); }
}
/* Pfeilknöpfe (karte-leiste.js). Rund, 44px, Fläche auf dunklem Grund wie Mockup B.
   Präfix .wcr-karte-block gegen die Knopfstile des Themes. */
.wcr-karte-block .wcr-rubrikleiste__pfeil {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	border: 1.5px solid var(--wcr-linie-dunkel);
	border-radius: 999px;
	background: var(--wcr-flaeche);
	color: var(--wcr-licht);
	font: inherit;
	line-height: 1;
	cursor: pointer;
	transition: border-color 200ms ease;
}
.wcr-karte-block .wcr-rubrikleiste__pfeil[hidden] { display: none; }
.wcr-karte-block .wcr-rubrikleiste__pfeil--links { left: 0; }
.wcr-karte-block .wcr-rubrikleiste__pfeil--rechts { right: 0; }
.wcr-karte-block .wcr-rubrikleiste__pfeil svg { display: block; width: 18px; height: 18px; }
.wcr-karte-block .wcr-rubrikleiste__pfeil:hover,
.wcr-karte-block .wcr-rubrikleiste__pfeil:focus,
.wcr-karte-block .wcr-rubrikleiste__pfeil:active {
	background: var(--wcr-flaeche);
	color: var(--wcr-licht);
}
@media (hover: hover) and (pointer: fine) {
	.wcr-karte-block .wcr-rubrikleiste__pfeil:hover { border-color: var(--wcr-akzent); }
}
.wcr-karte-block .wcr-rubrikleiste__pfeil:focus-visible { border-radius: 999px; outline-color: var(--wcr-akzent-hell); }

/* Karte auf der Lesefläche */

.wcr-karte { color: var(--wcr-tinte); }

.wcr-rubrik { scroll-margin-top: calc(var(--wcr-kopf-hoehe, 0px) + var(--wcr-leiste-hoehe, 60px) + 24px); }
.wcr-rubrik + .wcr-rubrik { margin-top: clamp(64px, 8vw, 104px); }

/* Banner: Core-Bildblock mit Lightbox */
.wcr-rubrik__banner {
	margin-bottom: 28px;
	border-radius: var(--wcr-radius);
	background: var(--wcr-tinte);
	overflow: hidden;
	transition: box-shadow 360ms var(--wcr-ease);
}
.wcr-rubrik__banner :is(.wp-block-image, figure) { margin: 0; width: 100%; }
.wcr-rubrik__banner img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 8;
	object-fit: cover;
	cursor: zoom-in;
	transition: transform 800ms var(--wcr-ease);
}
@media (hover: hover) and (pointer: fine) {
	.wcr-rubrik__banner:hover { box-shadow: 0 28px 50px -28px rgba(33, 25, 21, 0.6); }
	.wcr-rubrik__banner:hover img { transform: scale(1.025); }
}

.wcr-karte-block .wcr-rubrik__kopf { margin-bottom: 28px; }
.wcr-karte-block .wcr-rubrik__titel {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	font-weight: 500;
	/* Lange Einzelwörter („Hähnchenbrustfilet“) passen bei 320 px nicht in die Zeile: deutsch trennen
	   (lang="de"), ohne Trennwörterbuch notfalls im Wort umbrechen statt die Seite zu verbreitern. */
	hyphens: auto;
	overflow-wrap: anywhere;
}
.wcr-rubrik__titel::after { content: ""; flex: 1; min-width: 24px; height: 1px; background: var(--wcr-linie-hell); }
.wcr-karte-block .wcr-rubrik__hinweis { margin-top: 10px; color: var(--wcr-tinte-gedimmt); max-width: 41.33em; }

.wcr-karte-block .wcr-rubrik__beilagen {
	margin: -12px 0 24px;
	padding: 14px 18px;
	border: 1px solid var(--wcr-linie-hell);
	border-radius: var(--wcr-radius);
	background: var(--wcr-hell-2);
	font-weight: 600;
}

/* Gerichte: zwei Spalten, Gericht mit Bild über die volle Breite (Modifier wcr-gericht--mit-bild) */

.wcr-rubrik__liste {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 clamp(32px, 4vw, 56px);
}

.wcr-gericht { padding: 22px 0; border-top: 1px solid var(--wcr-linie-hell); }
.wcr-gericht--mit-bild {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(24px, 3vw, 48px);
	align-items: center;
}

.wcr-gericht__bild {
	border-radius: var(--wcr-radius);
	background: var(--wcr-tinte);
	overflow: hidden;
	transition: box-shadow 360ms var(--wcr-ease), transform 160ms var(--wcr-ease);
}
.wcr-gericht__bild :is(.wp-block-image, figure) { margin: 0; width: 100%; }
.wcr-gericht__bild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	cursor: zoom-in;
	transition: transform 700ms var(--wcr-ease);
}
@media (hover: hover) and (pointer: fine) {
	.wcr-gericht__bild:hover { box-shadow: 0 24px 44px -24px rgba(33, 25, 21, 0.6); transform: translateY(-3px); }
	.wcr-gericht__bild:hover img { transform: scale(1.035); }
}

.wcr-gericht__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.wcr-karte-block .wcr-gericht__name { font-size: 1.625rem; line-height: 1.2; hyphens: auto; }
.wcr-karte-block .wcr-gericht--mit-bild .wcr-gericht__name { font-size: clamp(1.75rem, 2.6vw, 2.25rem); }
.wcr-karte-block .wcr-gericht__kopf .wcr-preise { flex: none; font-size: 1.1875rem; }

.wcr-karte-block .wcr-beschreibung { margin-top: 6px; color: var(--wcr-tinte-gedimmt); max-width: 37.33em; }
.wcr-karte-block .wcr-hinweis { margin-top: 8px; font-size: 1rem; font-weight: 600; color: var(--wcr-akzent-tief); }

/* Menünummer und Kürzel */
.wcr-nummer {
	display: inline-block;
	min-width: 2.2em;
	margin-right: 6px;
	font-family: var(--wcr-schrift-ziffern), var(--wcr-schrift-text);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wcr-tinte-gedimmt);
	font-variant-numeric: tabular-nums;
	vertical-align: 0.3em;
}
.wcr-kuerzel {
	font-family: var(--wcr-schrift-ziffern), var(--wcr-schrift-text);
	font-size: 0.875rem;
	font-weight: 600;
	margin-left: 3px;
	vertical-align: super;
	line-height: 0;
	letter-spacing: 0;
}
.wcr-karte-block .wcr-kuerzel a { color: var(--wcr-tinte-gedimmt); text-decoration: none; padding: 2px; }
.wcr-karte-block .wcr-kuerzel a:hover { color: var(--wcr-akzent-tief); text-decoration: underline; }

/* Preise: eine Zeile im Kopf, mehrere Zeilen als Liste mit gepunkteten Trennern */
.wcr-preis,
.wcr-zeile__preis {
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
	font-weight: 600;
	white-space: nowrap;
}
.wcr-gebinde { font-weight: 500; }
.wcr-preiszeile { white-space: nowrap; }
.wcr-karte-block .wcr-gericht__text > .wcr-preise {
	display: grid;
	max-width: 360px;
	margin-top: 12px;
}
.wcr-gericht__text > .wcr-preise .wcr-trenner { display: none; }
.wcr-gericht__text > .wcr-preise .wcr-preiszeile {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 6px 0;
	border-top: 1px dotted #B3A89E;
}
.wcr-gericht__text > .wcr-preise .wcr-preiszeile:first-child { border-top: 0; }
.wcr-gericht__text > .wcr-preise .wcr-preis { margin-left: auto; }
.wcr-preise .wcr-nummer { margin: 0; min-width: 2.6em; vertical-align: baseline; }

/* Getränke: zwei Spalten, Preise rechts gestapelt */

.wcr-getraenk {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px 16px;
	align-items: baseline;
	padding: 14px 0;
	border-top: 1px solid var(--wcr-linie-hell);
}
.wcr-getraenk:has(.wcr-getraenk__bild) { grid-template-columns: auto minmax(0, 1fr) auto; }
.wcr-getraenk__bild { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: var(--wcr-radius); align-self: center; }
.wcr-karte-block .wcr-getraenk__name { font-family: var(--wcr-schrift-ziffern), var(--wcr-schrift-text); font-weight: 600; font-size: 1.125rem; line-height: 1.4; letter-spacing: 0; }
.wcr-karte-block .wcr-getraenk .wcr-beschreibung { margin-top: 0; font-size: 1rem; }
.wcr-karte-block .wcr-getraenk .wcr-preise {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}
.wcr-getraenk .wcr-trenner { display: none; }
.wcr-getraenk .wcr-preiszeile { display: flex; gap: 10px; align-items: baseline; }
.wcr-getraenk .wcr-gebinde { color: var(--wcr-tinte-gedimmt); font-weight: 400; }
.wcr-getraenk .wcr-nummer { min-width: 0; }

/* Mittagstisch und Tageskarte (Mockup B start.html). Lesefläche und Lichthof setzt die umgebende Gruppe. */

.wcr-tageskarte { color: var(--wcr-tinte); }
.wcr-tageskarte__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--wcr-linie-hell);
}
.wcr-karte-block .wcr-tageskarte__kopf h2 { font-size: clamp(2rem, 3.4vw, 2.75rem); }
.wcr-karte-block .wcr-tageskarte__kopf p { color: var(--wcr-tinte-gedimmt); font-size: 1rem; }
.wcr-tageskarte__spalten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 8px clamp(32px, 5vw, 72px);
	margin-top: 8px;
}
.wcr-karte-block .wcr-tageskarte__abschnitt h3 {
	font-size: 1.5rem; margin: 22px 0 4px;
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
}
.wcr-karte-block .wcr-tageskarte__zeit {
	font-family: var(--wcr-schrift-ziffern), var(--wcr-schrift-text); font-size: 1rem; font-weight: 600;
	color: var(--wcr-akzent-tief);
}
.wcr-tageskarte__liste > li,
.wcr-wochenplan__plan .wcr-zeilen > li { padding: 14px 0; border-bottom: 1px solid var(--wcr-linie-hell); }
.wcr-tageskarte__liste > li:last-child,
.wcr-wochenplan__plan .wcr-zeilen > li:last-child { border-bottom: 0; }
/* Zeilen von Tageskarte und Mittagstisch (nur dort; Hauptkarte und Getränke nutzen eigene Bausteine).
   Der Preis bleibt neben dem Namen, solange daneben Platz für das längste Wort des Namens ist; der Name
   wächst bis zu seiner vollen Länge und bricht sonst zwischen Wörtern um (Mockup v2-b). Reicht der Platz
   nicht (mehrere Preiszeilen, sehr schmale Spalte), rutscht der Preis rechtsbündig unter den Namen und
   bricht zwischen den Preiszeilen um, nie innerhalb einer Preiszeile und nie mitten im Wort. */
.wcr-zeile { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
.wcr-zeile__name { flex: 1000 1 0%; max-width: max-content; font-weight: 600; font-size: 1.125rem; }
.wcr-zeile__preis { flex: 0 1 auto; max-width: 100%; margin-left: auto; text-align: right; white-space: normal; }
.wcr-zeile__preis .wcr-preiszeile { display: inline-block; white-space: nowrap; }
.wcr-karte-block .wcr-zeile__vergleich { margin-top: 2px; font-size: 0.9375rem; color: var(--wcr-tinte-gedimmt); }
.wcr-zeitfenster { white-space: nowrap; }
.wcr-karte-block a.wcr-textlink {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wcr-akzent-tief);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}
@media (hover: hover) and (pointer: fine) {
	.wcr-karte-block a.wcr-textlink:hover { text-decoration-thickness: 2px; }
}
.wcr-karte-block .wcr-tageskarte__mehr { margin-top: 4px; }
/* Führungspunkte: gepunktete Linie zwischen Name und Preis */
.wcr-zeile__fuehrung { flex: 1; min-width: 24px; border-bottom: 1.5px dotted #A79C92; transform: translateY(-5px); }
.wcr-karte-block .wcr-zeile__text { color: var(--wcr-tinte-gedimmt); font-size: 1.0625rem; margin-top: 2px; max-width: 29.76em; }
.wcr-karte-block .wcr-zeile__text.wcr-hinweis { color: var(--wcr-akzent-tief); font-size: 1rem; font-weight: 600; }
.wcr-tageskarte .wcr-nummer { vertical-align: baseline; min-width: 0; }
.wcr-tageskarte .wcr-trenner { color: var(--wcr-tinte-gedimmt); }

/* Mittagstisch-Wochenplan (Mockup v2-b mittagstisch.html). Lesefläche und Innenabstand setzt die umgebende Gruppe. */

.wcr-wochenplan__plan { color: var(--wcr-tinte); }
.wcr-wochenplan__kopf {
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px;
	padding-bottom: 20px; border-bottom: 1px solid var(--wcr-linie-hell);
}
.wcr-karte-block .wcr-wochenplan__kopf h2 { font-size: clamp(2rem, 3.4vw, 2.75rem); }
.wcr-karte-block .wcr-wochenplan__zeit { font-weight: 600; color: var(--wcr-akzent-tief); }
.wcr-karte-block .wcr-wochenplan__hinweis {
	margin-top: 20px; padding: 12px 16px; border-radius: var(--wcr-radius);
	background: var(--wcr-hell-2); border: 1px solid var(--wcr-linie-hell);
}
.wcr-karte-block .wcr-wochenplan__hinweis[hidden] { display: none; }
.wcr-wochenplan__hinweis strong { color: var(--wcr-akzent-tief); }
.wcr-wochenplan__woche { margin-top: clamp(28px, 4vw, 40px); }
.wcr-karte-block .wcr-wochenplan__woche > h3 {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px;
	font-size: clamp(1.75rem, 2.6vw, 2.125rem); padding-bottom: 12px;
}
.wcr-wochenplan__woche > h3 small {
	font-family: var(--wcr-schrift-text); font-size: 1rem; font-weight: 600; color: var(--wcr-tinte-gedimmt);
}
.wcr-wochenplan__tag {
	display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 6px clamp(24px, 4vw, 48px);
	padding: 20px 0; border-top: 1px solid var(--wcr-linie-hell);
}
.wcr-karte-block .wcr-wochenplan__datum { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.wcr-wochenplan__wochentag { font-family: var(--wcr-schrift-titel); font-size: 1.625rem; font-weight: 600; line-height: 1.1; }
.wcr-wochenplan__datum time { font-size: 1rem; color: var(--wcr-tinte-gedimmt); }
.wcr-wochenplan__heute {
	display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: var(--wcr-radius);
	background: var(--wcr-akzent-tief); color: var(--wcr-hell-2); font-size: 0.875rem; font-weight: 700;
}
.wcr-wochenplan__abweichend { font-size: 0.9375rem; font-weight: 600; color: var(--wcr-akzent-tief); }
.wcr-wochenplan__tag--heute {
	margin-inline: calc(-1 * clamp(12px, 2vw, 20px)); padding-inline: clamp(12px, 2vw, 20px);
	background: var(--wcr-hell-2); border-radius: var(--wcr-radius);
	border-top-color: transparent; box-shadow: 0 0 0 1px rgba(126, 63, 28, 0.35);
}
.wcr-wochenplan__tag--heute .wcr-wochenplan__wochentag { color: var(--wcr-akzent-tief); }
.wcr-wochenplan__tag--heute + .wcr-wochenplan__tag { border-top-color: transparent; }
.wcr-wochenplan__plan .wcr-wochenplan__tag .wcr-zeilen > li:first-child { padding-top: 4px; }
.wcr-wochenplan__plan .wcr-wochenplan__tag .wcr-zeilen > li:last-child { padding-bottom: 0; }
.wcr-wochenplan__fuss {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 24px;
	margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--wcr-linie-hell);
	font-size: 1rem; color: var(--wcr-tinte-gedimmt);
}

/* Legende */

.wcr-legende {
	margin-top: clamp(64px, 8vw, 104px);
	padding-top: 40px;
	border-top: 2px solid var(--wcr-tinte);
	color: var(--wcr-tinte);
	scroll-margin-top: calc(var(--wcr-kopf-hoehe, 0px) + var(--wcr-leiste-hoehe, 60px) + 24px);
}
.wcr-karte-block .wcr-legende__titel { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 500; }
.wcr-karte-block .wcr-legende__text { margin-top: 8px; color: var(--wcr-tinte-gedimmt); max-width: 41.33em; }
.wcr-legende__gruppen {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px clamp(32px, 5vw, 72px);
	margin-top: 28px;
}
.wcr-karte-block .wcr-legende__gruppe { font-size: 1.5rem; margin-bottom: 8px; }
.wcr-legende dl { margin: 0; display: grid; grid-template-columns: 2.4em 1fr; font-size: 1rem; }
.wcr-karte-block .wcr-legende :is(dt, dd) { margin: 0; padding: 7px 0; border-top: 1px solid var(--wcr-linie-hell); }
.wcr-legende dt { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Responsiv */

@media (max-width: 860px) {
	.wcr-rubrik__liste,
	.wcr-legende__gruppen { grid-template-columns: minmax(0, 1fr); }
	.wcr-gericht--mit-bild { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.wcr-rubrik__banner img { aspect-ratio: 16 / 9; }
}
@media (max-width: 760px) {
	.wcr-wochenplan__tag { grid-template-columns: minmax(0, 1fr); }
	.wcr-karte-block .wcr-wochenplan__datum { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
	.wcr-wochenplan__heute { margin-top: 0; }
}
@media (max-width: 600px) {
	.wcr-wochenplan__tag--heute { margin-inline: -8px; padding-inline: 8px; }
	.wcr-karte-block .wcr-gericht__name { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.wcr-karte-block *,
	.wcr-karte-block *::before,
	.wcr-karte-block *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
	.wcr-rubrikleiste ul { scroll-behavior: auto; }
}