/* Speisekarte – blätterbare Karte.
   Die Schriftgröße hängt an der Breite der Kartenseite (Container-Query),
   damit der Text immer zur Seite passt und nichts ineinanderläuft.
   Alle Farben und Schriften sind Variablen und im Theme überschreibbar. */

.spk {
	--spk-paper: #ffffff;
	--spk-ink: #161f30;
	--spk-soft: #5d6779;
	--spk-brand: #0b5489;
	--spk-line: #dfe3ea;
	--spk-leader: #c9d0dc;

	--spk-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--spk-font-display: var(--spk-font);
	--spk-font-stretch: normal;

	--spk-backdrop: #eef1f5;
	--spk-backdrop-blur: 0px;
	--spk-radius: 10px;
	--spk-pad: 40px;
	--spk-maxw: 1280px;
	--spk-scale: 1;
	--spk-leader-style: dotted;
	--spk-shadow: 0 8px 30px rgba(22, 31, 48, 0.13);
	--spk-shadow-filter: drop-shadow(0 8px 22px rgba(22, 31, 48, 0.16));

	max-width: var(--spk-maxw, 1280px);
	margin: 0 auto;
	padding: var(--spk-pad, 40px);
	box-sizing: border-box;
	color: var(--spk-ink);
	font-family: var(--spk-font);
	font-stretch: var(--spk-font-stretch, normal);

	position: relative;
	/* Eigener Stapelkontext: hält die weichgezeichnete Hintergrund-Ebene
	   (z-index -1) INNERHALB der Karte. Ohne das rutscht sie in manchen
	   Themes hinter deren Hintergrund und die Fläche wäre unsichtbar.
	   Kein overflow-clip hier – sonst würde die umblätternde Seite an der
	   Kartenkante abgeschnitten. */
	isolation: isolate;
	background-color: var(--spk-backdrop);
	/* Eigene, unabhängig einstellbare Rundung der Fläche/​des Bildes hinter der
	   Karte (nicht an die Ecken des Blattes --spk-radius gekoppelt). */
	border-radius: var(--spk-back-radius, var(--spk-radius));
}

/* Fläche und Hintergrundbild liegen auf einer eigenen Ebene zwischen der
   Grundfarbe und dem Inhalt, damit sie sich weichzeichnen lassen, ohne die
   Karte selbst zu verwischen. Die weiche Kante verblendet mit der Grundfarbe
   der Karte darunter. */
.spk::before {
	content: "";
	position: absolute;
	/* Die Ebene ragt um das Doppelte des Weichzeichner-Werts ÜBER die
	   Kartenkanten hinaus, damit das weichgezeichnete Bild bis an den Rand
	   deckt (statt vom Rand weggezogen zu werden). Die dabei entstehende
	   unscharfe Überlappung wird per clip-path wieder auf die Kartenform
	   zurückgeschnitten – clip-path greift nach dem filter, also bleibt der
	   Rand sauber und es ist kein overflow-clip an der Karte nötig. */
	inset: calc(-2 * var(--spk-backdrop-blur, 0px));
	z-index: -1;
	border-radius: inherit;

	background-color: var(--spk-backdrop);
	background-image: var(--spk-backdrop-image, none);
	background-size: var(--spk-backdrop-size, cover);
	background-repeat: var(--spk-backdrop-repeat, no-repeat);
	background-position: center;

	filter: blur(var(--spk-backdrop-blur, 0px));
	clip-path: inset(calc(2 * var(--spk-backdrop-blur, 0px)) round var(--spk-back-radius, var(--spk-radius)));
}

/* Über die ganze Fensterbreite, aus dem Inhaltsbereich des Themes heraus.
   --spk-sbw = Breite der vertikalen Scrollleiste (per JS gesetzt, 0 auf
   Geräten mit Overlay-Scrollleisten). Ohne diesen Abzug ist 100vw um die
   Scrollleistenbreite breiter als der sichtbare Bereich – die Seite ragt
   seitlich hinaus und lässt sich horizontal scrollen. */
.spk--full {
	width: calc(100vw - var(--spk-sbw, 0px));
	max-width: none;
	margin-left: calc(50% - 50vw + var(--spk-sbw, 0px) / 2);
	margin-right: calc(50% - 50vw + var(--spk-sbw, 0px) / 2);
	border-radius: 0;
	/* Über die ganze Breite darf nichts seitlich hinausragen: die
	   umblätternde Seite hebt beim Blättern kurz über den Kartenrand hinaus,
	   und die Scrollleistenbreite kann um ein paar Pixel danebenliegen. „clip“
	   schneidet nur den (ohnehin außerhalb des Bildschirms liegenden) Überhang
	   ab, ohne einen Scrollcontainer zu erzeugen – die klebende Bereichsleiste
	   bleibt dadurch funktionsfähig. */
	overflow-x: clip;
}

.spk__book {
	margin: 0 auto;
}

/* Wegwerf-Container für die Blätter-Bibliothek. */
.spk__stage {
	margin: 0 auto;
}

/* Ohne JavaScript und in der Listenansicht: eine durchgehende Karte zum Scrollen. */
.spk:not(.is-book) .spk__book {
	display: block;
	max-width: var(--spk-list-width, 44rem);
	margin: 0 auto;
	border-radius: var(--spk-radius);
	box-shadow: var(--spk-shadow);
	overflow: hidden;
}

.spk.is-book .spk__book {
	filter: var(--spk-shadow-filter);
}

.spk.is-book .spk__page {
	border-radius: calc(var(--spk-radius) / 2);
}

.spk:not(.is-book) .spk__page-inner {
	padding: 1.6rem 1.9rem 2rem;
}

/* Kopf- und Fußzeile stehen beim Scrollen nur einmal statt auf jeder Seite. */
.spk:not(.is-book) .spk__page .spk__head,
.spk:not(.is-book) .spk__footer-line {
	display: none;
}

.spk:not(.is-book) .spk__page:last-child .spk__footer-line {
	display: block;
}

.spk:not(.is-book) .spk__page:last-child .spk__foot {
	margin-top: 2rem;
}

/* Fortsetzungsseiten fließen ohne neue Überschrift weiter. */
.spk:not(.is-book) .spk__page--continued .spk__section-head {
	display: none;
}

.spk:not(.is-book) .spk__page--continued .spk__page-inner {
	/* Kein voller Seitenrand, aber der normale Zeilenabstand zum letzten
	   Gericht der vorherigen Seite – sonst kleben die beiden Gerichte an der
	   Seitengrenze direkt aneinander. Entspricht dem Abstand zwischen zwei
	   Gerichten (0.85em). */
	padding-top: 0.85em;
}

.spk:not(.is-book) .spk__page:has( + .spk__page--continued ) .spk__page-inner {
	padding-bottom: 0;
}

.spk:not(.is-book) .spk__page:has( + .spk__page--continued ) .spk__foot {
	display: none;
}

.spk:not(.is-book) .spk__page--cover .spk__cover {
	padding: 2rem 0 2.5rem;
}

/* Die Kopfzeile steht beim Scrollen einmal über der Karte. */
.spk__masthead {
	display: none;
	max-width: 44rem;
	margin: 0 auto;
	padding: 0 1.9rem 0.75rem;
	box-sizing: border-box;
}

.spk:not(.is-book) .spk__masthead {
	display: block;
}

.spk__masthead .spk__head {
	font-size: 1.05rem;
	margin-bottom: 0;
}

.spk__page {
	background-color: var(--spk-paper);
	background-image: var(--spk-paper-image, none);
	background-size: var(--spk-paper-size, cover);
	background-repeat: var(--spk-paper-repeat, no-repeat);
	background-position: center;
	overflow: hidden;
	container-type: inline-size;
	scroll-margin-top: var(--spk-scroll-offset, 4rem);
}

.spk__page-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	padding: 2.1em 2em 1.5em;

	font-size: calc(16px * var(--spk-scale, 1));
	line-height: 1.45;
}

.stf__item .spk__page,
.spk.is-book .spk__page {
	width: 100%;
	height: 100%;
}

/* Im Blättermodus wächst die Schrift mit der Seitenbreite (3,3 %),
   damit das Verhältnis auf jedem Bildschirm stimmt. Die Untergrenze ist
   bewusst niedrig (11 px): Bei schmalen Seiten – etwa wenn die Karte über
   „an Bildschirmhöhe anpassen“ klein wird – darf die Schrift proportional
   mitschrumpfen, sonst passt der Seiteninhalt nicht mehr und wird unten
   abgeschnitten. Für größere Schrift die Seite breiter machen (kleineres
   Seitenformat / größere Seitenbreite). */
.spk.is-book .spk__page-inner {
	font-size: calc(clamp(11px, 3.3cqw, 19px) * var(--spk-scale, 1));
}

/* --- Schiebe-Ansicht (Handy) -----------------------------------------
   Statt der Buch-Faltung gleiten die Einzelseiten seitlich hinein und
   hinaus. Der Container zeigt genau eine Seite, die Spur enthält alle
   Seiten nebeneinander und wird per translateX verschoben. */
.spk.is-slider .spk__book {
	overflow: hidden;
	margin: 0 auto;
}

.spk__track {
	display: flex;
	height: 100%;
	transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.spk.is-slider .spk__page {
	flex: 0 0 100%;
}

/* Auf der Einzelseite darf eine lange Seite senkrecht scrollen. */
.spk.is-slider .spk__page-inner {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce) {
	.spk__track {
		transition: none;
	}
}

.spk__body {
	flex: 1 1 auto;
	min-height: 0;
}

/* --- Kopfzeile -------------------------------------------------------- */

.spk__head {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding-bottom: 0.8em;
	border-bottom: 1px solid var(--spk-line);
	margin-bottom: 1.6em;
}

.spk__logo {
	width: 1.9em;
	height: auto;
	flex: none;
	border-radius: 2px;
}

.spk__head-text {
	display: block;
	line-height: 1.15;
}

.spk__claim {
	display: block;
	font-size: 0.6em;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--spk-soft);
}

.spk__house {
	display: block;
	font-family: var(--spk-font-display);
	font-size: 0.95em;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--spk-brand);
}

/* --- Bereichsüberschrift ---------------------------------------------- */

.spk__section-head {
	margin-bottom: 1.3em;
}

.spk__section-title {
	margin: 0;
	font-family: var(--spk-font-display);
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--spk-brand);
	line-height: 1.3;
}

.spk__section-title span {
	display: inline-block;
	padding-bottom: 0.5em;
	border-bottom: 2px solid var(--spk-brand);
}

.spk__section-subtitle {
	margin: 0.6em 0 0;
	font-size: 0.82em;
	color: var(--spk-soft);
}

/* --- Positionen ------------------------------------------------------- */

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

.spk__dish {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.8em;
	row-gap: 0.15em;
	align-items: baseline;
}

.spk__dishes--numbered {
	/* Breite der Nummernspalte. Als Variable, damit der hängende Einzug der
	   Beschreibung/Varianten (unten) automatisch dazu passt. */
	--spk-num: 2.4em;
}

.spk__dish + .spk__dish {
	margin-top: 0.85em;
}

.spk__dish-number {
	display: none;
	font-size: 0.78em;
	font-weight: 600;
	color: var(--spk-soft);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.spk__dishes--numbered .spk__dish-number {
	display: block;
	flex: 0 0 var(--spk-num, 2.4em);
}

.spk__new {
	/* Steht jetzt als „NEU:“ vor dem Gerichtnamen, nicht mehr über der Nummer. */
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--spk-brand);
	margin-right: 0.4em;
}

.spk__new::after {
	content: ":";
}

.spk__dish-head {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	min-width: 0;
	/* Nimmt den Platz zwischen Nummer und Preis ein; wird der Platz zu eng,
	   rutscht der Preis (unten, per flex-wrap) in die nächste Zeile. */
	flex: 1 1 8em;
}

.spk__dish-name {
	font-weight: 600;
	font-size: 1em;
	overflow-wrap: break-word;
}

.spk__leader {
	flex: 1 1 auto;
	min-width: 1em;
	border-bottom: 1px var(--spk-leader-style, dotted) var(--spk-leader);
	transform: translateY(-0.3em);
}

.spk__allergens {
	font-size: 0.62em;
	font-weight: 400;
	color: var(--spk-soft);
	margin-left: 0.2em;
	vertical-align: super;
}

.spk__extra {
	font-weight: 400;
	font-size: 0.8em;
	color: var(--spk-soft);
	margin-left: 0.4em;
	white-space: nowrap;
}

.spk__mark {
	display: inline-block;
	font-size: 0.66em;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--spk-brand);
	background: rgba(11, 84, 137, 0.08);
	border-radius: 999px;
	padding: 0.15em 0.6em;
	margin-left: 0.5em;
	vertical-align: 0.1em;
}

.spk__dish-price {
	white-space: nowrap;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	/* Rechtsbündig – auch wenn er bei Enge allein in der nächsten Zeile steht. */
	flex: 0 0 auto;
	margin-left: auto;
}

.spk__dish-desc {
	flex: 0 0 100%;
	/* border-box: der hängende Einzug (padding-left) liegt INNERHALB der 100 %
	   und schiebt die Zeile nicht über den Kartenrand hinaus. */
	box-sizing: border-box;
	font-size: 0.82em;
	color: var(--spk-soft);
	line-height: 1.4;
	margin-top: 0.15em;
	padding-right: 4em;
	overflow-wrap: break-word;
	min-width: 0;
}

.spk__dishes--numbered .spk__dish-desc {
	padding-left: calc(var(--spk-num, 2.4em) + 0.8em);
}

.spk ul.spk__variants {
	flex: 0 0 100%;
	box-sizing: border-box;
	list-style: none;
	margin: 0.35em 0 0;
	/* padding ausdrücklich auf 0 und mit erhöhter Spezifität (.spk ul…),
	   sonst erbt die Liste den Listeneinzug des Themes (z. B. Ollie:
	   ul { padding-left }) und die Varianten stehen eingerückt statt bündig
	   unter der Beschreibung – siehe VIO Mineralwasser. */
	padding: 0;
	font-size: 0.86em;
	color: var(--spk-soft);
}

.spk .spk__dishes--numbered ul.spk__variants {
	padding-left: calc(var(--spk-num, 2.4em) + 0.8em);
}

.spk__variants--nopricing .spk__variant-price {
	display: none;
}

/* Jede Variante als eigene Zeile (untereinander): Bezeichnung und Größe
   links, Preis über margin-left:auto ganz nach rechts an den Kartenrand. */
.spk__variants li {
	display: flex;
	align-items: baseline;
	padding: 0.12em 0;
}

/* Abstand nur, wenn eine Bezeichnung vorhanden ist. Sonst würde ein
   leeres Label die Größe einrücken und nicht mehr bündig zur
   Beschreibung (z. B. „0,25 l Fl.“) stehen. */
.spk__variant-label:not(:empty) {
	margin-right: 0.7em;
}

.spk__variants li + li {
	border-top: 1px solid var(--spk-line);
}

.spk__variant-size {
	font-variant-numeric: tabular-nums;
}

.spk__variant-price {
	margin-left: auto;
	min-width: 4.5em;
	text-align: right;
	font-weight: 600;
	color: var(--spk-ink);
	font-variant-numeric: tabular-nums;
}

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

.spk__foot {
	margin-top: 1.4em;
	padding-top: 0.8em;
	border-top: 1px solid var(--spk-line);
	text-align: center;
}

.spk__note {
	font-size: 0.78em;
	font-weight: 600;
	color: var(--spk-ink);
	margin: 0 0 0.4em;
}

.spk__footer-line {
	font-size: 0.68em;
	letter-spacing: 0.04em;
	color: var(--spk-soft);
	margin: 0;
}

/* --- Titelblatt ------------------------------------------------------- */

/* Titelblatt „nur beim Blättern“: überall außer im Blättermodus ausblenden.
   Bewusst über :not(.is-book) statt .is-list, damit das Titelblatt auch schon
   VOR dem Start des Skripts (noch ohne .is-list) verborgen ist – sonst blitzt
   es beim Laden kurz auf, bis die Ansicht aufgebaut ist. Die Schiebe-Ansicht
   (Handy) trägt .is-book und zeigt das Titelblatt daher weiterhin. */
.spk--cover-book-only:not(.is-book) .spk__page--cover {
	display: none;
}

.spk__page--cover .spk__head {
	border-bottom: 0;
	margin-bottom: 0;
}

.spk__cover {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 3em;
	box-sizing: border-box;
}

.spk__wordmark {
	display: block;
	width: 74%;
	max-width: 26em;
	height: auto;
}

.spk__cover-title {
	font-family: var(--spk-font-display);
	font-size: 2em;
	font-weight: 700;
	color: var(--spk-brand);
	margin: 0;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-align: center;
}

/* --- Allergenseite ---------------------------------------------------- */

.spk__legal-text {
	font-size: 0.8em;
	line-height: 1.5;
	color: var(--spk-soft);
	margin: 0 0 0.7em;
}

.spk__legal-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
	gap: 0.8em 1.6em;
	margin-top: 1.2em;
}

.spk__legal-cols ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.74em;
	line-height: 1.6;
	color: var(--spk-ink);
}

.spk__pdf {
	margin-top: 1.4em;
	font-size: 0.85em;
}

/* --- Steuerung -------------------------------------------------------- */

.spk__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: 1.25rem;
}

/* Beim Blättern stehen Pfeile + Seitenzähler mittig unter der Karte und die
   Modus-Knöpfe (Liste/Vollbild) mittig in einer eigenen Zeile darunter. So ist
   der Zähler exakt zentriert, ohne dass die Modus-Knöpfe – gerade bei voller
   Fensterbreite – weit nach außen an den Rand rutschen. In der Liste bleibt es
   beim einfachen zentrierten Fluss (Pager/Modes = contents). */
.spk__pager,
.spk__modes {
	display: contents;
}

.spk.is-book .spk__controls,
.spk.is-slider .spk__controls {
	flex-direction: column;
}

.spk.is-book .spk__pager,
.spk.is-slider .spk__pager,
.spk.is-book .spk__modes,
.spk.is-slider .spk__modes {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}

/* Der Zähler ist ein <p>; manche Themes geben Absätzen einen unteren Abstand.
   Der würde in der Flex-Zeile die Mitte verschieben (Text säße zu hoch über den
   Pfeilen), daher hier gezielt zurücksetzen. */
.spk .spk__pager .spk__counter {
	margin: 0;
}

.spk__nav,
.spk__toggle,
.spk__fs {
	font-family: var(--spk-font);
	background: transparent;
	color: var(--spk-ink);
	border: 1px solid var(--spk-line);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease,
		color 0.18s ease, transform 0.14s ease, box-shadow 0.18s ease;
}

/* Beide Pfeile nutzen dieselbe Glyphe (→). Der Zurück-Pfeil wird gespiegelt,
   damit beide exakt symmetrisch sind – unabhängig von den Schrift-Metriken.
   Der Pfeil sitzt in einem eigenen Span, damit er sich in die Blätterrichtung
   schieben lässt. */
.spk__nav span {
	display: inline-block;
	transition: transform 0.18s ease;
}

.spk__nav[data-spk-prev] span {
	transform: scaleX(-1);
}

.spk__nav {
	/* Flex-Zentrierung, damit der Pfeil (→) exakt in der Mitte des runden
	   Knopfes sitzt. Ohne das saß die Glyphe wegen der Innenabstände des
	   Buttons ein paar Pixel rechts der Kreismitte. */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	width: 2.5rem;
	height: 2.5rem;
	/* Der Pfeil bleibt etwas größer als die Beschriftung der Modus-Knöpfe,
	   skaliert aber mit derselben Einstellung. */
	font-size: calc(var(--spk-btn-size, 13px) + 3px);
	line-height: 1;
}

.spk__toggle,
.spk__fs {
	padding: 0.6rem 1.1rem;
	font-size: var(--spk-btn-size, 13px);
	font-weight: 500;
}

.spk__nav:hover,
.spk__toggle:hover,
.spk__fs:hover {
	background: rgba(11, 84, 137, 0.07);
	border-color: var(--spk-brand);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(22, 31, 48, 0.12);
}

/* Kurzer Druck-Effekt beim Klicken. */
.spk__nav:active,
.spk__toggle:active,
.spk__fs:active {
	transform: translateY(0) scale(0.94);
	box-shadow: none;
}

/* Die Pfeile deuten beim Hovern die Blätterrichtung an – symmetrisch nach
   außen. Beim Zurück-Pfeil wirkt die Verschiebung im gespiegelten System,
   schiebt ihn also nach links. */
.spk__nav[data-spk-next]:hover:not([disabled]) span {
	transform: translateX(3px);
}

.spk__nav[data-spk-prev]:hover:not([disabled]) span {
	transform: scaleX(-1) translateX(3px);
}

.spk__nav:focus-visible,
.spk__toggle:focus-visible,
.spk__fs:focus-visible {
	outline: 2px solid var(--spk-brand);
	outline-offset: 2px;
}

.spk__nav[disabled] {
	opacity: 0.3;
	cursor: default;
	transform: none;
	box-shadow: none;
}

/* Gefüllte Knöpfe: die Akzentfarbe als Fläche statt nur als Rand. */
.spk--btn-filled .spk__nav,
.spk--btn-filled .spk__toggle,
.spk--btn-filled .spk__fs {
	background: var(--spk-brand);
	border-color: var(--spk-brand);
	color: #fff;
}

.spk--btn-filled .spk__nav:hover,
.spk--btn-filled .spk__toggle:hover,
.spk--btn-filled .spk__fs:hover {
	background: var(--spk-brand);
	border-color: var(--spk-brand);
	filter: brightness(0.92);
}

.spk--btn-filled .spk__nav[disabled] {
	opacity: 0.35;
}

.spk__counter {
	font-size: 0.78rem;
	color: var(--spk-soft);
	margin: 0;
	min-width: 7rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.spk.is-list .spk__nav,
.spk.is-list .spk__counter {
	display: none;
}

/* --- Vollbild --------------------------------------------------------- */

.spk:fullscreen {
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: var(--spk-pad, 40px);
	overflow: auto;
	border-radius: 0;
	box-sizing: border-box;
}

.spk:-webkit-full-screen {
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: var(--spk-pad, 40px);
	overflow: auto;
	border-radius: 0;
	box-sizing: border-box;
}

.spk:fullscreen .spk__book {
	margin: 0 auto;
}

.spk:-webkit-full-screen .spk__book {
	margin: 0 auto;
}

/* --- Druck ------------------------------------------------------------ */

@media print {
	.spk__controls {
		display: none;
	}

	.spk__page {
		break-after: page;
		border: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spk__nav,
	.spk__toggle,
	.spk__fs,
	.spk__nav span {
		transition: none;
	}

	.spk__nav:hover,
	.spk__toggle:hover,
	.spk__fs:hover,
	.spk__nav:active,
	.spk__toggle:active,
	.spk__fs:active {
		transform: none;
		box-shadow: none;
	}

	/* Nudge entfällt, aber die Spiegelung des Zurück-Pfeils bleibt. */
	.spk__nav[data-spk-next]:hover:not([disabled]) span {
		transform: none;
	}

	.spk__nav[data-spk-prev]:hover:not([disabled]) span {
		transform: scaleX(-1);
	}
}


/* --- Sprungleiste zu den Bereichen ------------------------------------ */

.spk__jump[hidden],
.spk__controls[hidden] {
	display: none !important;
}

.spk__jump {
	display: flex;
	gap: var(--spk-jump-gap, 0.4rem);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;

	/* Die Blätter-Bibliothek setzt der umblätternden Seite z-index 5.
	   Die Leiste muss darüber liegen, sonst verschwindet sie beim Blättern.
	   Dafür muss sie positioniert sein – sonst bleibt z-index wirkungslos. */
	position: relative;
	z-index: 20;

	width: fit-content;
	max-width: 100%;
	margin: 0 auto 1.25rem;
	padding: 0.6rem 0.9rem;
	box-sizing: border-box;
	border-radius: var(--spk-jump-radius, 999px);
	background-color: var(--spk-jump-bg, var(--spk-paper));
}

/* Beim Scrollen bleibt sie oben stehen, beim Blättern steht sie fest über der Karte. */
.spk:not(.is-book) .spk__jump {
	position: sticky;
	top: 0.5rem;
	width: auto;
	max-width: 44rem;
	padding: 0.6rem 1.1rem;
	margin-bottom: 0.75rem;
	border: 1px solid var(--spk-line);
	box-shadow: 0 6px 18px -12px rgba(22, 31, 48, 0.55);
}

.spk__jump::-webkit-scrollbar {
	display: none;
}

.spk__jump button {
	flex: none;
	font-family: var(--spk-font);
	font-size: var(--spk-jump-btn-size, 0.8rem);
	line-height: 1;
	white-space: nowrap;
	padding: 0.65rem 0.95rem;
	border: 1px solid var(--spk-jump-btn-border, var(--spk-line));
	border-radius: var(--spk-jump-btn-radius, 999px);
	background: var(--spk-jump-btn-bg, transparent);
	color: var(--spk-jump-btn-text, var(--spk-soft));
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.spk__jump button.is-active {
	background: var(--spk-jump-btn-active-bg, var(--spk-brand));
	border-color: var(--spk-jump-btn-active-bg, var(--spk-brand));
	color: var(--spk-jump-btn-active-text, #fff);
}

.spk__jump button:focus-visible {
	outline: 2px solid var(--spk-brand);
	outline-offset: 2px;
}

/* --- Handy ------------------------------------------------------------ */

@media (max-width: 767px) {
	.spk {
		--spk-font-size: 16px;
		/* Auf kleinen Bildschirmen den farbigen Rand rund um die Karte
		   deckeln, damit das Blatt möglichst groß bleibt und nicht in einer
		   breiten grauen Fläche „schwimmt“. Kleinere Nutzerwerte bleiben. */
		padding: min(var(--spk-pad, 40px), 18px) min(var(--spk-pad, 40px), 10px);
	}

	/* Im Blättermodus Leiste, Karte und Knöpfe enger zusammenrücken,
	   damit die Karte nicht verloren zwischen leeren Flächen steht. */
	.spk.is-book .spk__controls {
		margin-top: 0.85rem;
	}

	.spk.is-book .spk__jump {
		margin-bottom: 0.85rem;
	}

	.spk:not(.is-book) .spk__page-inner {
		padding: 1.25rem 1.15rem 1.6rem;
	}

	.spk__masthead,
	.spk__jump,
	.spk__search,
	.spk__empty {
		padding-left: 1.15rem;
		padding-right: 1.15rem;
	}

	/* Fingerfreundliche Flächen: mindestens 44 px hoch. Die Schriftgröße richtet
	   sich nach der Einstellung (--spk-jump-btn-size), damit sie auch mobil greift. */
	.spk__jump button {
		padding: 0.8rem 1.05rem;
	}

	.spk__search input {
		font-size: 16px; /* verhindert das Hineinzoomen unter iOS */
		padding: 0.85rem 1.1rem;
	}

	/* Auf dem Handy soll man schnell beim Essen sein, nicht beim Logo. */
	.spk:not(.is-book) .spk__page--cover .spk__cover {
		padding: 1rem 0 1.25rem;
	}

	.spk:not(.is-book) .spk__wordmark {
		width: 62%;
	}

	.spk__dishes--numbered {
		--spk-num: 2.1em;
	}

	.spk__variant-label:not(:empty) {
		margin-right: 0.6rem;
	}

	.spk__dish-desc {
		padding-right: 0;
	}

	.spk__section-head {
		margin-bottom: 1.1em;
	}

	/* Größere Flächen zum Antippen. */
	.spk__nav {
		width: 3rem;
		height: 3rem;
	}

	.spk__toggle,
	.spk__fs {
		padding: 0.8rem 1.2rem;
		font-size: var(--spk-btn-size, 0.85rem);
	}

	.spk__controls {
		gap: 0.6rem;
	}

	/* Wer auf dem Handy blättert, kann eine volle Seite scrollen. */
	.spk.is-book .spk__page-inner {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.spk__legal-cols {
		grid-template-columns: 1fr;
	}

	.spk__wordmark {
		width: 82%;
	}
}


/* --- Seitenvorlage „ganze Seite" -------------------------------------- */

.spk-fullpage {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Innerhalb der Vorlage nimmt die Karte die volle Breite ein, die
   Breiten-Einstellung des Plugins greift hier nicht zusätzlich. */
.spk-fullpage .spk {
	max-width: none;
	width: auto;
	margin-left: 0;
	margin-right: 0;
	border-radius: 0;
}

.spk-fullpage > .entry-content,
.spk-fullpage > article,
.spk-fullpage > .wp-block-post-content {
	max-width: none;
}


/* --- Suche ------------------------------------------------------------ */

.spk__search {
	display: none;
	max-width: 44rem;
	margin: 0 auto 0.5rem;
	/* Kein seitlicher Einzug: das Suchfeld ist so genau so breit wie die
	   Bereichsleiste darunter (beide 44 rem, gleiche Kanten). */
	padding: 0;
	box-sizing: border-box;
}

.spk:not(.is-book) .spk__search {
	display: block;
}

.spk__search input {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--spk-font);
	font-size: 1rem;
	line-height: 1.2;
	padding: 0.8rem 1.1rem;
	color: var(--spk-ink);
	background: var(--spk-paper);
	border: 1px solid var(--spk-line);
	border-radius: 999px;
	-webkit-appearance: none;
	appearance: none;
}

.spk__search input:focus-visible {
	outline: 2px solid var(--spk-brand);
	outline-offset: 1px;
}

.spk__dish.is-filtered-out,
.spk__page.is-filtered-out {
	display: none;
}

/* Beim Suchen sind Titelblatt, Hinweisseite und Bereichsleiste im Weg. */
.spk.is-filtering .spk__page--cover,
.spk.is-filtering .spk__page--legal,
.spk.is-filtering .spk__jump {
	display: none;
}

.spk.is-filtering .spk__page--continued .spk__section-head {
	display: block;
}

.spk__empty {
	max-width: 44rem;
	margin: 0 auto;
	padding: 2rem 1.9rem;
	text-align: center;
	color: var(--spk-soft);
	font-size: 0.95rem;
}

/* --- Zurück nach oben -------------------------------------------------- */

.spk__top {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 30;
	width: 3rem;
	height: 3rem;
	font-size: 1.1rem;
	line-height: 1;
	color: #fff;
	background: var(--spk-brand);
	border: 0;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(22, 31, 48, 0.3);
	cursor: pointer;
}

.spk__top:focus-visible {
	outline: 2px solid var(--spk-ink);
	outline-offset: 2px;
}

@media (min-width: 768px) {
	.spk__top {
		display: none;
	}
}