/* =========================================================
   Schlosspizzeria – Startseite
   Alle Regeln gelten nur innerhalb von <main class="sp">.
   Farben & Schriften: assets/css/marke.css
   ========================================================= */

.sp {
	/* Wie weit das hängende Logo in den Seitenanfang ragt (wird per JS genau gemessen) */
	--sp-oben: 62px;
	display: block;
	font-family: var(--sp-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--sp-text);
	background: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: left;
	overflow: hidden;
}

@media (min-width: 700px) {
	.sp {
		--sp-oben: 84px;
	}
}

@media (min-width: 1100px) {
	.sp {
		--sp-oben: 104px;
	}
}

/* Grundwerte – :where() hält die Spezifität bei 0, damit Klassen sie einfach überschreiben */
.sp *,
.sp *::before,
.sp *::after {
	box-sizing: border-box;
}

:where(.sp) img {
	display: block;
	max-width: 100%;
	height: auto;
}

:where(.sp) p {
	margin: 0 0 1em;
	font-size: inherit;
	line-height: inherit;
}

:where(.sp) :is(ul, ol) {
	list-style: none;
	margin: 0;
	padding: 0;
}

:where(.sp) li {
	margin: 0;
	padding: 0;
}

/* Lafka setzt bei verschachtelten Listen Aufzählungspunkte – auf der Startseite nie */
.sp :is(ul, ol) {
	list-style: none;
}

:where(.sp) a {
	color: inherit;
}

:where(.sp) figure {
	margin: 0;
}

.sp h1,
.sp h2 {
	font-family: var(--sp-display);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: 0;
	text-transform: none;
	margin: 0 0 .45em;
	color: var(--sp-braun);
	text-wrap: balance;
	overflow-wrap: break-word;
}

.sp h1 {
	font-size: clamp(2.05rem, 8.4vw, 4.3rem);
}

.sp h2 {
	font-size: clamp(1.85rem, 6.3vw, 3rem);
}

.sp h3 {
	font-family: var(--sp-body);
	font-weight: 700;
	font-size: 1.18rem;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	margin: 0 0 .35em;
	color: var(--sp-braun);
}

.sp-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}

.sp-abschnitt {
	position: relative;
	padding: 72px 0;
}

.sp [id] {
	scroll-margin-top: 16px;
}

.sp-intro {
	max-width: 60ch;
	color: var(--sp-text-2);
}

.sp-mitte {
	text-align: center;
}

.sp-i {
	width: 1.3em;
	height: 1.3em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sp :focus-visible {
	outline: 3px solid var(--sp-braun);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--sp-gold);
	border-radius: 6px;
}

/* ---------- Knöpfe ---------- */
.sp .sp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	min-height: 52px;
	padding: .75em 1.35em;
	border: 2px solid transparent;
	border-radius: 999px;
	font: 600 1.05rem/1.15 var(--sp-body);
	letter-spacing: 0;
	text-transform: none;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease;
}

.sp .sp-btn:hover {
	text-decoration: none;
}

/* Telefonnummern nie mitten in der Nummer umbrechen */
.sp a[href^="tel:"] {
	white-space: nowrap;
}

.sp .sp-btn:active {
	transform: translateY(3px);
}

.sp .sp-btn-xl {
	min-height: 60px;
	font-size: 1.14rem;
	padding: .85em 1.6em;
}

.sp .sp-btn-rot {
	background: var(--sp-rot);
	color: #fff;
	box-shadow: 0 5px 0 var(--sp-rot-2);
}

.sp .sp-btn-rot:hover {
	background: #E03A45;
	color: #fff;
}

.sp .sp-btn-rot:active {
	box-shadow: 0 2px 0 var(--sp-rot-2);
}

.sp .sp-btn-braun {
	background: var(--sp-braun);
	color: #fff;
	box-shadow: 0 5px 0 var(--sp-braun-2);
}

.sp .sp-btn-braun:hover {
	background: #63322A;
	color: #fff;
}

.sp .sp-btn-gold {
	background: var(--sp-gold);
	color: var(--sp-braun);
	box-shadow: 0 5px 0 var(--sp-gold-2);
}

.sp .sp-btn-gold:hover {
	background: #FFCB70;
	color: var(--sp-braun);
}

.sp .sp-btn-wa {
	background: var(--sp-wa);
	color: var(--sp-wa-text);
	box-shadow: 0 5px 0 #17A34A;
}

.sp .sp-btn-wa:hover {
	background: #3BE077;
	color: var(--sp-wa-text);
}

.sp .sp-btn-linie {
	background: transparent;
	color: var(--sp-braun);
	border-color: var(--sp-braun);
}

.sp .sp-btn-linie:hover {
	background: var(--sp-gold-blass);
	color: var(--sp-braun);
}

.sp .sp-btn-hell {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .85);
}

.sp .sp-btn-hell:hover {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

.sp-knopfreihe {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.sp-knopfreihe-mitte {
	justify-content: center;
}

/* „Ganze Speisekarte ansehen“ unter der Schnellwahl */
.sp .sp-kats-karte {
	margin: 4px 0 0;
	padding: 0 20px;
	text-align: center;
}

/* ---------- Zinnen (Burgmauer) ---------- */
.sp-zinnen {
	position: absolute;
	left: 0;
	right: 0;
	height: 28px;
	background-repeat: repeat-x;
	background-size: 56px 28px;
	pointer-events: none;
	z-index: 1;
}

.sp-zinnen-weiss {
	bottom: -1px;
	background-position: left bottom;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28'%3E%3Cpath d='M0 0h30v12h26v16H0z' fill='%23fff'/%3E%3C/svg%3E");
}

.sp-zinnen-dunkel-oben {
	top: -27px;
	background-position: left top;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28'%3E%3Cpath d='M0 0h30v12h26v16H0z' fill='%234E2520'/%3E%3C/svg%3E");
}

/* ---------- Kopfbereich ---------- */
.sp-held {
	position: relative;
	padding: calc(var(--sp-oben) + 24px) 0 0;
	color: #fff;
	background: radial-gradient(110% 70% at 70% 100%, #EE3A3F 0%, var(--sp-rot) 60%);
}

.sp .sp-held h1 {
	color: #fff;
}

.sp-held-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 0 0 18px;
}

.sp .sp-held-links a {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	font-weight: 600;
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.sp .sp-held-links a:hover {
	color: var(--sp-gold-hell);
}

.sp .sp-aktion {
	display: inline-block;
	max-width: 46ch;
	margin: 0 0 18px;
	padding: .55em 1em;
	border-radius: 14px;
	background: var(--sp-braun-2);
	color: var(--sp-gold-hell);
	font-size: .9rem;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	box-shadow: 0 4px 0 rgba(47, 21, 17, .25);
}

.sp .sp-aktion:hover {
	color: #fff;
	text-decoration: underline;
}

.sp-held h1 {
	max-width: 11.5ch;
}

.sp .sp-lead {
	max-width: 36ch;
	font-size: 1.15rem;
	color: #FFF1E6;
}

/* Knöpfe im Kopfbereich: nebeneinander, wenn Platz ist – sonst untereinander, nie abgeschnitten */
.sp-held-grid > *,
.sp-karte-held-grid > * {
	min-width: 0;
}

.sp-held-knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 480px;
	margin: 24px 0 18px;
}

.sp-held-knoepfe .sp-btn {
	flex: 1 1 auto;
	padding-left: .8em;
	padding-right: .8em;
}

.sp-held-knoepfe .sp-btn-voll {
	flex-basis: 100%;
}

.sp-fakten {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: .9rem;
	font-weight: 500;
}

.sp-fakten li {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .38em .85em;
	border-radius: 999px;
	background: rgba(38, 17, 12, .28);
	color: #fff;
}

.sp-punkt {
	width: 10px;
	height: 10px;
	flex: none;
	border-radius: 50%;
	background: #7DF2A0;
	box-shadow: 0 0 0 3px rgba(125, 242, 160, .28);
}

.sp-zu .sp-punkt {
	background: #FFB3AB;
	box-shadow: 0 0 0 3px rgba(255, 179, 171, .28);
}

.sp-held-bild {
	position: relative;
	z-index: 2;
	width: min(100%, 520px);
	aspect-ratio: 1 / .86;
	margin: 26px auto -30px;
}

.sp-held-pizza {
	position: absolute;
	top: 0;
	right: -18%;
	width: 88%;
	animation: sp-reinrollen 1.2s cubic-bezier(.2, .75, .25, 1) both;
}

.sp-held-pizza img {
	filter: drop-shadow(0 18px 22px rgba(70, 8, 4, .4));
}

.sp-held-burger {
	position: absolute;
	left: -3%;
	bottom: 0;
	width: 62%;
	z-index: 2;
	animation: sp-hoch .9s .35s cubic-bezier(.2, .75, .25, 1) both;
}

.sp-held-burger img {
	filter: drop-shadow(0 16px 18px rgba(70, 8, 4, .42));
}

.sp .sp-sticker {
	position: absolute;
	z-index: 3;
	top: 2%;
	left: 1%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 118px;
	height: 118px;
	border-radius: 50%;
	background: var(--sp-gold);
	color: var(--sp-braun);
	text-align: center;
	text-decoration: none;
	line-height: 1.05;
	transform: rotate(-10deg);
	box-shadow: 0 6px 0 var(--sp-gold-2), 0 14px 24px rgba(70, 8, 4, .3);
	animation: sp-stempel .5s .9s cubic-bezier(.3, 1.6, .5, 1) both;
}

.sp-sticker span {
	font-weight: 700;
	font-size: .9rem;
}

.sp-sticker small {
	font-size: .8rem;
	margin-top: 2px;
}

.sp-sticker strong {
	font-family: var(--sp-display);
	font-weight: 400;
	font-size: 1.5rem;
	color: var(--sp-braun);
}

.sp-krone {
	position: absolute;
	z-index: 1;
	left: 20%;
	top: 34%;
	width: 74px;
	color: #fff;
	opacity: .95;
	transform: rotate(-14deg);
}

@keyframes sp-reinrollen {
	from {
		transform: translateX(40%) rotate(-90deg);
		opacity: 0;
	}
	to {
		transform: none;
		opacity: 1;
	}
}

@keyframes sp-hoch {
	from {
		transform: translateY(18%);
		opacity: 0;
	}
	to {
		transform: none;
		opacity: 1;
	}
}

@keyframes sp-stempel {
	from {
		transform: rotate(-10deg) scale(.4);
		opacity: 0;
	}
	to {
		transform: rotate(-10deg) scale(1);
		opacity: 1;
	}
}

/* ---------- Schnellwahl ---------- */
.sp-kats {
	position: relative;
	padding: 34px 0 6px;
	background: #fff;
}

.sp .sp-kats-titel {
	font-size: clamp(1.45rem, 5vw, 2rem);
	margin-bottom: .6em;
}

.sp-kats-liste {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 20px;
	padding: 4px 20px 18px;
	scrollbar-width: none;
}

.sp-kats-liste::-webkit-scrollbar {
	display: none;
}

.sp-kats-liste li {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.sp-kats-liste a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 88px;
	color: var(--sp-braun);
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
}

.sp-kat-bild {
	display: block;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--sp-gold-blass);
	box-shadow: inset 0 0 0 2px var(--sp-linie);
	transition: transform .15s ease, box-shadow .15s ease;
}

.sp-kat-bild img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sp-kats-liste a:hover .sp-kat-bild {
	transform: translateY(-3px);
	box-shadow: inset 0 0 0 3px var(--sp-gold);
}

/* ---------- Pizza ---------- */
.sp-pizza {
	padding-top: 48px;
}

.sp-pizza-grid {
	display: grid;
	gap: 8px;
}

.sp-pizza-bilder {
	position: relative;
	width: 100%;
	max-width: 560px;
	aspect-ratio: 1 / .78;
	margin: 0 auto 10px;
}

.sp-pizza-bild {
	position: absolute;
}

.sp-pizza-bild img {
	filter: drop-shadow(0 12px 16px rgba(78, 37, 32, .22));
}

.sp-pizza-bild-1 {
	width: 64%;
	left: 0;
	top: 4%;
	z-index: 2;
}

.sp-pizza-bild-2 {
	width: 44%;
	right: 2%;
	top: 0;
}

.sp-pizza-bild-3 {
	width: 46%;
	right: 6%;
	bottom: 0;
	z-index: 3;
}

.sp .sp-liste-titel {
	font-family: var(--sp-display);
	font-weight: 400;
	font-size: 1.45rem;
	margin-bottom: .3em;
}

.sp-preisliste {
	margin-bottom: 28px;
}

.sp-preisliste li {
	padding: 11px 0;
}

.sp-pl-zeile {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.sp-pl-name {
	font-weight: 700;
	font-size: 1.08rem;
	color: var(--sp-braun);
}

.sp-pl-punkte {
	flex: 1 1 auto;
	min-width: 16px;
	border-bottom: 3px dotted #DDBB86;
	transform: translateY(-5px);
}

.sp-pl-preis {
	font-family: var(--sp-display);
	font-size: 1.15rem;
	color: var(--sp-rot);
	white-space: nowrap;
}

.sp-pl-info {
	display: block;
	max-width: 52ch;
	font-size: .94rem;
	line-height: 1.45;
	color: var(--sp-text-2);
}

/* ---------- Dunkle Abschnitte ---------- */
.sp-dunkel {
	background: var(--sp-braun);
	color: #FBE9D6;
}

.sp-dunkel h2 {
	color: var(--sp-gold);
}

.sp-dunkel h3 {
	color: #fff;
}

.sp-dunkel .sp-intro {
	color: #F2D9C2;
}

.sp .sp-preis-pille {
	display: inline-block;
	margin: 4px 0 0;
	padding: .35em 1em;
	border-radius: 999px;
	background: var(--sp-gold);
	color: var(--sp-braun);
	font-family: var(--sp-display);
	font-size: 1.05rem;
	line-height: 1.4;
}

.sp .sp-preis-pille-braun {
	background: var(--sp-braun);
	color: var(--sp-gold);
	margin-bottom: 22px;
}

.sp .sp-preis-pille-hell {
	background: var(--sp-gold-blass);
	color: var(--sp-braun);
	box-shadow: inset 0 0 0 2px var(--sp-linie);
}

/* ---------- Burger ---------- */
.sp-burger {
	padding-top: 64px;
}

.sp-burger-liste {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 20px;
	padding: 6px 20px 22px;
	margin: 26px 0 18px;
	scrollbar-width: thin;
	scrollbar-color: var(--sp-gold) transparent;
}

.sp-burger-karte {
	flex: 0 0 76%;
	max-width: 320px;
	scroll-snap-align: start;
}

.sp-burger-bild {
	position: relative;
	aspect-ratio: 4 / 3;
	display: grid;
	place-items: end center;
	margin-bottom: 14px;
}

.sp-burger-bild::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 84%;
	aspect-ratio: 1 / .38;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(253, 190, 85, .55), rgba(253, 190, 85, .12) 70%, rgba(253, 190, 85, 0));
}

.sp-burger-bild img {
	position: relative;
	width: 92%;
	filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .35));
}

.sp .sp-burger-karte h3 {
	font-family: var(--sp-display);
	font-weight: 400;
	font-size: 1.32rem;
	line-height: 1.15;
	color: #fff;
}

.sp-burger-karte p {
	margin: 0;
	font-size: .95rem;
	line-height: 1.45;
	color: #EBD2BD;
}

/* ---------- Pasta & Aufläufe ---------- */
.sp-gold {
	background: var(--sp-gold);
}

.sp-gold .sp-intro {
	color: #5A2A21;
}

.sp-nudeln {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.sp-nudeln li {
	padding: .4em 1em;
	border-radius: 999px;
	background: #fff;
	color: var(--sp-braun);
	font-weight: 600;
	font-size: .95rem;
	box-shadow: 0 3px 0 var(--sp-gold-2);
}

.sp-pasta-bilder {
	display: grid;
	gap: 18px;
	margin: 34px 0 30px;
}

.sp-pasta-bild img {
	width: 100%;
	filter: drop-shadow(0 16px 18px rgba(78, 37, 32, .28));
}

.sp-pasta-bild figcaption {
	margin-top: 10px;
	font-size: .95rem;
	font-weight: 600;
	color: #5A2A21;
	text-align: center;
}

.sp-auflauf {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 14px;
	align-items: center;
	margin: 0 0 34px;
	padding: 22px 18px;
	border-radius: 24px;
	background: rgba(255, 255, 255, .45);
}

.sp-auflauf-text {
	grid-column: 1 / -1;
}

.sp .sp-auflauf-text h3 {
	font-family: var(--sp-display);
	font-weight: 400;
	font-size: 1.6rem;
}

.sp-auflauf-text p {
	margin: 0;
	color: #5A2A21;
}

.sp-auflauf-bild img {
	width: 100%;
	max-width: 260px;
	margin: 0 auto;
	filter: drop-shadow(0 10px 12px rgba(78, 37, 32, .25));
}

/* ---------- Snacks ---------- */
.sp-snack-liste {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px 16px;
	margin: 30px 0 24px;
}

.sp-snack {
	text-align: center;
}

.sp-snack-bild {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1 / .82;
	margin-bottom: 10px;
}

.sp-snack-bild::before {
	content: "";
	position: absolute;
	inset: 6% 4%;
	border-radius: 50%;
	background: var(--sp-gold-blass);
}

.sp-snack-bild img {
	position: relative;
	width: 100%;
	filter: drop-shadow(0 10px 12px rgba(78, 37, 32, .2));
}

.sp .sp-snack h3 {
	font-size: 1.02rem;
}

/* ---------- Helle Abschnitte ---------- */
.sp-creme {
	background: var(--sp-creme);
}

/* ---------- Schnitzel & Hähnchen ---------- */
.sp-teller-liste {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 20px;
	padding: 6px 20px 22px;
	margin: 22px 0 14px;
	scrollbar-width: thin;
	scrollbar-color: var(--sp-gold) transparent;
}

.sp-teller {
	flex: 0 0 84%;
	max-width: 380px;
	scroll-snap-align: start;
}

.sp-teller-bild {
	aspect-ratio: 1.42 / 1;
	margin-bottom: 12px;
}

.sp-teller-bild img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 14px 16px rgba(78, 37, 32, .22));
}

.sp .sp-teller h3 {
	font-family: var(--sp-display);
	font-weight: 400;
	font-size: 1.32rem;
	line-height: 1.15;
}

.sp-teller p {
	margin: 0;
	font-size: .95rem;
	line-height: 1.45;
	color: var(--sp-text-2);
}

.sp-teller-mehr {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 24px;
	border-radius: 24px;
	background: #fff;
	box-shadow: inset 0 0 0 2px var(--sp-linie);
}

.sp .sp-mehr-titel {
	margin-bottom: .5em;
	font-family: var(--sp-display);
	font-weight: 400;
	font-size: 1.32rem;
	line-height: 1.15;
}

/* "Außerdem auf der Karte": am Handy unter der Wisch-Reihe, ab Tablet als Karte im Raster */
.sp-teller-liste .sp-nur-gross {
	display: none;
}

.sp-nur-handy {
	margin-bottom: 30px;
}

.sp-mehr-liste li {
	padding: 9px 0;
	border-top: 2px dotted var(--sp-linie);
	color: var(--sp-text-2);
	font-size: .97rem;
	line-height: 1.45;
}

.sp-mehr-liste strong {
	display: block;
	color: var(--sp-braun);
	font-weight: 700;
	font-size: 1.03rem;
}

/* ---------- Salate & Suppen ---------- */
.sp-salat-liste {
	display: grid;
	gap: 36px;
	margin: 30px 0 0;
}

.sp-salat-bild {
	margin-bottom: 14px;
}

.sp-salat-bild img {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	filter: drop-shadow(0 16px 18px rgba(78, 37, 32, .22));
}

.sp .sp-salat h3 {
	font-family: var(--sp-display);
	font-weight: 400;
	font-size: 1.45rem;
	line-height: 1.15;
}

.sp-salat p {
	max-width: 46ch;
	margin: 0;
	color: var(--sp-text-2);
}

.sp-suppen {
	margin-top: 54px;
}

.sp .sp-unter-titel {
	margin-bottom: .55em;
	font-family: var(--sp-display);
	font-weight: 400;
	font-size: clamp(1.6rem, 5vw, 2.1rem);
	line-height: 1.1;
}

.sp-suppen-liste {
	display: grid;
	gap: 16px;
	margin: 0 0 38px;
}

.sp-suppe {
	display: flex;
	align-items: center;
	gap: 18px;
}

.sp-suppe-bild {
	flex: 0 0 104px;
}

.sp-suppe-bild img {
	width: 100%;
	filter: drop-shadow(0 8px 10px rgba(78, 37, 32, .2));
}

.sp .sp-suppe h4 {
	margin: 0 0 .2em;
	font: 700 1.1rem/1.3 var(--sp-body);
	letter-spacing: 0;
	text-transform: none;
	color: var(--sp-braun);
}

.sp-suppe p {
	margin: 0;
	font-size: .95rem;
	line-height: 1.45;
	color: var(--sp-text-2);
}

/* ---------- Eis ---------- */
.sp-eis-liste {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 20px;
	padding: 6px 20px 22px;
	margin: 22px 0 14px;
	scrollbar-width: thin;
	scrollbar-color: var(--sp-gold) transparent;
}

.sp-eis-sorte {
	flex: 0 0 46%;
	max-width: 230px;
	scroll-snap-align: start;
	text-align: center;
}

.sp-eis-bild {
	position: relative;
	aspect-ratio: 1 / 1;
	margin-bottom: 12px;
}

.sp-eis-bild::before {
	content: "";
	position: absolute;
	inset: 6%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(253, 190, 85, .4), rgba(253, 190, 85, .12) 62%, rgba(253, 190, 85, 0));
}

.sp-eis-bild img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .4));
}

.sp .sp-eis-sorte h3 {
	margin-bottom: .35em;
	font-family: var(--sp-display);
	font-weight: 400;
	font-size: 1.12rem;
	line-height: 1.2;
	color: #fff;
}

.sp-eis-marke {
	display: block;
	margin-bottom: 4px;
	font-family: var(--sp-body);
	font-weight: 600;
	font-size: .82rem;
	color: var(--sp-gold);
}

.sp-eis-sorte p {
	margin: 0;
	font-size: .88rem;
	line-height: 1.4;
	color: #EBD2BD;
}

.sp .sp-hinweis {
	max-width: 70ch;
	margin: 28px 0 0;
	font-size: .93rem;
	color: var(--sp-text-2);
}

.sp-hinweis a {
	font-weight: 700;
	color: var(--sp-braun);
}

.sp .sp-eis .sp-hinweis {
	margin: 30px auto 0;
	color: #EBD2BD;
}

.sp-eis .sp-hinweis a {
	color: var(--sp-gold);
}

/* ---------- So bestellst du ---------- */
.sp-schritt-liste {
	display: grid;
	gap: 22px;
	margin: 26px 0 34px;
	counter-reset: sp-schritt;
}

.sp-schritt-liste li {
	position: relative;
	padding-left: 64px;
}

.sp-schritt-liste li::before {
	counter-increment: sp-schritt;
	content: counter(sp-schritt);
	position: absolute;
	left: 0;
	top: -4px;
	font-family: var(--sp-display);
	font-size: 2.9rem;
	line-height: 1;
	color: var(--sp-rot);
}

.sp-schritt-liste p {
	margin: 0;
	color: var(--sp-text-2);
}

/* ---------- Restaurant ---------- */
.sp-restaurant {
	padding-top: 72px;
}

.sp-restaurant-grid {
	display: grid;
	gap: 26px;
	align-items: center;
}

.sp-restaurant h2 {
	color: var(--sp-gold);
}

.sp-vorteile {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 14px;
	margin: 26px 0 26px;
}

.sp-vorteile li {
	display: flex;
	gap: 12px;
	align-items: center;
	font-weight: 600;
	line-height: 1.25;
	color: #FFF4E8;
}

.sp-vorteile .sp-i {
	width: 32px;
	height: 32px;
	color: var(--sp-gold);
	stroke-width: 1.8;
}

.sp .sp-feier-tipp {
	max-width: 60ch;
	margin: 0 0 26px;
	padding: 16px 18px;
	border-radius: 18px;
	background: rgba(255, 255, 255, .08);
	color: #F3DCC6;
}

.sp .sp-restaurant-anruf {
	margin: 18px 0 0;
	color: #F3DCC6;
}

.sp-restaurant-anruf a {
	font-weight: 600;
	color: #fff;
}

.sp-restaurant-bild {
	display: none;
}

/* ---------- Lieferung ---------- */
.sp-wege {
	display: grid;
	gap: 18px;
	margin: 26px 0 38px;
}

.sp-weg {
	padding: 24px;
	border-radius: 24px;
	box-shadow: inset 0 0 0 2px var(--sp-linie);
}

.sp-weg p {
	color: var(--sp-text-2);
}

.sp-i-gross {
	width: 40px;
	height: 40px;
	margin-bottom: 10px;
	color: var(--sp-rot);
}

.sp-seo-text {
	max-width: 70ch;
}

.sp-seo-text p {
	color: var(--sp-text-2);
}

/* ---------- Liefergebiet ---------- */
.sp-fakten a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.sp-fakten a:hover {
	color: var(--sp-gold-hell);
}

.sp-liefergebiet {
	margin: 0 0 40px;
	padding: 26px 18px 22px;
	border-radius: 28px;
	background: var(--sp-creme);
	box-shadow: inset 0 0 0 2px var(--sp-linie);
}

.sp-lg-kopf p {
	max-width: 62ch;
	color: var(--sp-text-2);
}

.sp .sp-lg-kopf h3 {
	margin-bottom: .35em;
	font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
	line-height: 1.2;
}

.sp-ort-suche {
	margin: 20px 0 22px;
}

.sp .sp-ort-suche label {
	display: block;
	margin: 0 0 8px;
	font: 700 1.1rem/1.3 var(--sp-body);
	font-size: 1.1rem !important; /* Lafka setzt bei label 12px !important */
	letter-spacing: 0;
	text-transform: none;
	color: var(--sp-braun);
}

.sp-ort-feld {
	position: relative;
	max-width: 480px;
}

.sp-ort-feld .sp-i {
	position: absolute;
	top: 50%;
	left: 18px;
	width: 22px;
	height: 22px;
	transform: translateY(-50%);
	color: var(--sp-text-2);
	pointer-events: none;
}

.sp .sp-ort-feld input {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	height: 56px;
	margin: 0;
	padding: 0 20px 0 52px;
	border: 2px solid var(--sp-linie);
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 3px 0 var(--sp-linie);
	font: 500 1.08rem/1.2 var(--sp-body);
	color: var(--sp-text);
}

.sp .sp-ort-feld input::placeholder {
	color: #7A5E54;
	opacity: 1;
}

.sp .sp-ort-feld input:focus {
	border-color: var(--sp-braun);
	outline: none;
	box-shadow: 0 0 0 4px var(--sp-gold);
}

.sp .sp-ort-ergebnis {
	display: flex;
	align-items: flex-start;
	gap: .5em;
	min-height: 1.6em;
	margin: 12px 0 0;
	font-weight: 600;
	line-height: 1.45;
}

.sp-ort-ergebnis:empty {
	display: none;
}

.sp-ort-ergebnis .sp-i {
	margin-top: .05em;
}

.sp-ort-ergebnis.sp-ja {
	color: #17733F;
}

.sp-ort-ergebnis.sp-nein {
	color: var(--sp-rot-2);
}

.sp-ort-ergebnis a {
	color: inherit;
	white-space: nowrap;
}

.sp-orte-raster {
	position: relative;
	columns: 3 270px;
	column-gap: 18px;
}

.sp-orte-gruppe {
	margin: 0 0 18px;
	padding: 16px 18px 18px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 2px 0 var(--sp-linie);
	-webkit-column-break-inside: avoid;
	break-inside: avoid;
}

.sp .sp-orte-gruppe h4 {
	margin: 0 0 10px;
	font-family: var(--sp-body);
	font-size: 1.04rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sp-braun);
}

.sp-orte-gruppe h4 small {
	display: block;
	font-size: .8rem;
	font-weight: 500;
	color: var(--sp-text-2);
}

.sp .sp-orte {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.sp .sp-orte li {
	margin: 0;
	padding: .28em .7em;
	border-radius: 999px;
	background: var(--sp-gold-blass);
	font-size: .92rem;
	line-height: 1.3;
	color: var(--sp-braun);
	transition: background-color .15s ease, box-shadow .15s ease;
}

.sp .sp-orte li.sp-treffer {
	background: var(--sp-gold);
	box-shadow: inset 0 0 0 2px var(--sp-braun);
	font-weight: 700;
}

.sp-orte-raster.sp-eingeklappt {
	max-height: 520px; /* genaue Höhe setzt startseite.js */
	overflow: hidden;
	columns: auto; /* sonst verteilt der Browser den Rest auf unsichtbare Spalten daneben */
}

.sp-orte-raster.sp-eingeklappt::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 96px;
	background: linear-gradient(rgba(255, 248, 236, 0), var(--sp-creme) 80%);
	pointer-events: none;
}

.sp .sp-orte-mehr {
	margin: 4px 0 0;
}

.sp .sp-lg-fehlt {
	margin: 18px 0 0;
	color: var(--sp-text-2);
}

.sp-lg-fehlt a {
	font-weight: 700;
	color: var(--sp-rot-2);
	white-space: nowrap;
}

.sp-lg-fehlt a .sp-i {
	margin-right: .3em;
	vertical-align: -.25em;
}

/* ---------- Öffnungszeiten ---------- */
.sp-zeiten-grid {
	display: grid;
	gap: 30px;
}

.sp .sp-status-zeile {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .45em 1em;
	border-radius: 999px;
	background: var(--sp-braun);
	color: #fff;
	font-weight: 600;
	font-size: .95rem;
}

.sp .sp-oeffnung {
	width: auto;
	overflow: visible;
	margin: 22px 0 0;
}

.sp-oeffnung > div {
	padding: 14px 0;
	border-bottom: 2px dotted #DDBB86;
}

.sp .sp-oeffnung dt,
.sp .sp-oeffnung dd {
	float: none;
	width: auto;
	padding: 0;
	margin: 0;
}

.sp .sp-oeffnung dt {
	font-weight: 700;
	color: var(--sp-braun);
}

.sp .sp-oeffnung dd {
	margin-top: 2px;
	font-family: var(--sp-display);
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--sp-braun);
}

.sp-adresse {
	padding: 24px;
	border-radius: 24px;
	background: #fff;
	box-shadow: inset 0 0 0 2px var(--sp-linie);
	font-style: normal;
}

.sp .sp-adresse-name {
	margin: 0 0 .2em;
	font-family: var(--sp-display);
	font-size: 1.5rem;
	color: var(--sp-braun);
}

.sp-kontaktliste {
	margin: 20px 0 0;
}

.sp-kontaktliste li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
}

.sp-kontaktliste .sp-i,
.sp-parken .sp-i {
	color: var(--sp-rot);
}

.sp-kontaktliste a {
	font-weight: 700;
	color: var(--sp-braun);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.sp-kontaktliste a:hover {
	text-decoration: underline;
}

.sp .sp-parken {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 10px 0 0;
	color: var(--sp-text-2);
}

/* ---------- Bewertung ---------- */
.sp-bewertung {
	padding: 56px 0;
	background: var(--sp-rot);
	color: #fff;
}

.sp-bewertung h2 {
	color: #fff;
}

.sp-bewertung p {
	max-width: 46ch;
	color: #fff;
}

.sp-bewertung-grid {
	display: grid;
	gap: 10px;
}

/* ---------- Fragen ---------- */
.sp-faq-liste {
	max-width: 820px;
	margin-top: 22px;
	border-top: 2px dotted #DDBB86;
}

.sp-faq details {
	border-bottom: 2px dotted #DDBB86;
}

.sp-faq summary {
	position: relative;
	padding: 17px 46px 17px 0;
	list-style: none;
	cursor: pointer;
	font-weight: 700;
	font-size: 1.07rem;
	color: var(--sp-braun);
}

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

.sp-faq summary::after {
	content: "";
	position: absolute;
	right: 12px;
	top: 50%;
	width: 11px;
	height: 11px;
	border-right: 3px solid var(--sp-rot);
	border-bottom: 3px solid var(--sp-rot);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .2s ease;
}

.sp-faq details[open] summary::after {
	transform: translateY(-20%) rotate(-135deg);
}

.sp-faq details p {
	max-width: 66ch;
	margin: 0 0 18px;
	color: var(--sp-text-2);
}

.sp-rechtliches {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin-top: 34px;
	font-size: .93rem;
}

.sp-rechtliches a {
	color: var(--sp-text-2);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sp-rechtliches a:hover {
	color: var(--sp-braun);
}

/* =========================================================
   Größere Bildschirme
   ========================================================= */
@media (min-width: 700px) {
	.sp-snack-liste {
		grid-template-columns: repeat(4, 1fr);
	}

	.sp-pasta-bilder {
		grid-template-columns: 1fr 1fr;
		align-items: end;
	}

	.sp-wege {
		grid-template-columns: 1fr 1fr;
	}

	.sp-liefergebiet {
		padding: 34px 32px 28px;
	}

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

	.sp-schritt-liste {
		grid-template-columns: repeat(3, 1fr);
		gap: 30px;
	}

	.sp-schritt-liste li {
		padding: 56px 0 0;
	}

	.sp-schritt-liste li::before {
		top: 0;
	}

	.sp-teller-liste {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 40px 30px;
		max-width: 1180px;
		margin: 34px auto 26px;
		padding: 0 20px;
		overflow: visible;
	}

	.sp-teller {
		max-width: none;
	}

	.sp-teller-liste .sp-nur-gross {
		display: flex;
	}

	.sp-nur-handy {
		display: none;
	}

	.sp-salat-liste {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}

	.sp-suppen-liste {
		grid-template-columns: repeat(3, 1fr);
		gap: 30px;
	}

	.sp-suppe {
		flex-direction: column;
		gap: 14px;
		text-align: center;
	}

	.sp-suppe-bild {
		flex: none;
		width: min(100%, 220px);
	}

	.sp-eis-liste {
		flex-wrap: wrap;
		justify-content: center;
		gap: 36px 26px;
		max-width: 1180px;
		margin: 34px auto 26px;
		overflow: visible;
		scroll-snap-type: none;
	}

	.sp-eis-sorte {
		flex: 0 0 calc((100% - 52px) / 3);
		max-width: none;
	}
}

@media (min-width: 980px) {
	.sp-abschnitt {
		padding: 96px 0;
	}

	.sp-held {
		padding-top: calc(var(--sp-oben) + 22px);
	}

	.sp-held-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		align-items: center;
	}

	.sp-held-text {
		padding-bottom: 90px;
	}

	.sp-held-bild {
		width: 112%;
		max-width: 640px;
		margin: 0 -6% -56px 0;
		justify-self: end;
	}

	.sp .sp-sticker {
		width: 136px;
		height: 136px;
	}

	.sp-sticker strong {
		font-size: 1.7rem;
	}

	.sp-kats {
		padding-top: 52px;
	}

	.sp-kats .sp-wrap {
		text-align: center;
	}

	.sp-kats-liste {
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
		overflow: visible;
	}

	.sp-kats-liste a {
		width: 92px;
	}

	.sp-kat-bild {
		width: 88px;
		height: 88px;
	}

	.sp-pizza {
		padding-top: 72px;
	}

	.sp-pizza-grid {
		grid-template-columns: 1fr 1.05fr;
		grid-template-areas: "kopf bilder" "liste bilder";
		column-gap: 64px;
		align-items: start;
	}

	.sp-pizza-kopf {
		grid-area: kopf;
	}

	.sp-pizza-liste {
		grid-area: liste;
	}

	.sp-pizza-bilder {
		grid-area: bilder;
		align-self: center;
		max-width: none;
		aspect-ratio: 1 / .92;
	}

	.sp-burger .sp-kopf {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: end;
		column-gap: 40px;
	}

	.sp-burger .sp-kopf h2,
	.sp-burger .sp-kopf .sp-intro {
		grid-column: 1;
	}

	.sp-burger .sp-preis-pille {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: center;
		font-size: 1.3rem;
	}

	/* Burger nebeneinander – eine kürzere letzte Reihe steht mittig */
	.sp-burger-liste {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 44px 34px;
		max-width: 1180px;
		margin: 40px auto 26px;
		overflow: visible;
	}

	.sp-burger-karte {
		flex: 0 1 calc((100% - 68px) / 3);
		max-width: none;
	}

	.sp-pasta .sp-kopf {
		max-width: 760px;
	}

	.sp-auflauf {
		grid-template-columns: 1fr 1fr 1fr;
		padding: 26px 34px;
	}

	.sp-auflauf-text {
		grid-column: auto;
	}

	.sp-teller-liste {
		grid-template-columns: repeat(3, 1fr);
		gap: 48px 34px;
	}

	.sp-teller-mehr {
		grid-column: span 2;
		padding: 30px 34px;
	}

	.sp-teller-mehr .sp-mehr-liste {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 34px;
	}

	.sp-eis-sorte {
		flex-basis: calc((100% - 104px) / 5);
	}

	.sp-restaurant-grid {
		grid-template-columns: minmax(0, 1fr) 420px;
		gap: 56px;
	}

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

	.sp-restaurant-bild {
		display: block;
	}

	.sp-restaurant-bild img {
		width: 100%;
		filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .4));
	}

	.sp-zeiten-grid {
		grid-template-columns: 1.1fr .9fr;
		align-items: start;
	}

	.sp-bewertung-grid {
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 30px;
	}

	.sp-bewertung p {
		margin-bottom: 0;
	}
}

@media (min-width: 1200px) {
	.sp-kats-liste {
		gap: 24px;
	}

	.sp-kats-liste a {
		width: 104px;
	}

	.sp-kat-bild {
		width: 104px;
		height: 104px;
	}
}

/* Schmale Handys: Knöpfe im Kopfbereich etwas kompakter */
@media (max-width: 420px) {
	.sp-held-knoepfe {
		gap: 10px;
	}

	.sp-held-knoepfe .sp-btn {
		padding-left: .6em;
		padding-right: .6em;
		font-size: .98rem;
	}

	.sp-held-knoepfe .sp-btn-xl {
		font-size: 1.08rem;
	}

	/* Lange Knopf-Texte dürfen umbrechen, statt über den Rand zu laufen */
	.sp .sp-knopfreihe .sp-btn {
		max-width: 100%;
		white-space: normal;
	}
}

@media (max-width: 359px) {
	.sp-wrap {
		padding: 0 16px;
	}

	.sp h1,
	.sp h2 {
		overflow-wrap: break-word;
	}

	.sp h2 {
		font-size: 1.65rem;
	}

	.sp .sp-btn {
		white-space: normal;
	}

	/* Preis rutscht bei Bedarf in die nächste Zeile (rechtsbündig) */
	.sp-pl-zeile {
		flex-wrap: wrap;
	}

	.sp-pl-preis {
		margin-left: auto;
	}

	.sp .sp-sticker {
		width: 100px;
		height: 100px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sp-held-pizza,
	.sp-held-burger,
	.sp .sp-sticker {
		animation: none;
	}

	.sp .sp-btn,
	.sp-kat-bild {
		transition: none;
	}
}

/* =========================================================
   Version 2.1
   ========================================================= */

/* Nur für Screenreader */
.sp-vh {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Nummer wie in der Online-Bestellung */
.sp-nr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	min-width: 2.1em;
	height: 1.7em;
	margin-right: .5em;
	padding: 0 .45em;
	border-radius: 999px;
	background: var(--sp-gold-blass);
	box-shadow: inset 0 0 0 1px var(--sp-linie);
	color: #8A5A2B;
	font: 700 .78rem/1 var(--sp-body);
	letter-spacing: 0;
	vertical-align: .15em;
}

.sp-pl-zeile .sp-nr {
	align-self: center;
	transform: translateY(-1px);
}

/* Preis klein unter Gerichten der Startseite */
.sp .sp-karte-preis-klein {
	margin: 6px 0 0;
	font-family: var(--sp-display);
	font-size: 1.05rem;
	line-height: 1.2;
	color: var(--sp-rot);
}

.sp-dunkel .sp-karte-preis-klein {
	color: var(--sp-gold);
}

/* Halb & Halb Pizza */
.sp-tipp {
	display: grid;
	grid-template-columns: 70px 1fr;
	gap: 6px 16px;
	align-items: center;
	margin: 0 0 30px;
	padding: 18px;
	border-radius: 24px;
	background: var(--sp-gold-hell);
}

.sp-tipp-bild {
	width: 70px;
	height: 70px;
}

.sp .sp-tipp h3 {
	margin: 0 0 .15em;
	font-family: var(--sp-display);
	font-weight: 400;
	font-size: 1.45rem;
	line-height: 1.1;
}

.sp .sp-tipp p {
	margin: 0;
	color: #5A2A21;
}

.sp-tipp .sp-btn {
	grid-column: 1 / -1;
	margin-top: 10px;
}

@media (min-width: 700px) {
	.sp-tipp {
		grid-template-columns: 84px 1fr auto;
		padding: 22px 26px;
	}

	.sp-tipp-bild {
		width: 84px;
		height: 84px;
	}

	.sp-tipp .sp-btn {
		grid-column: auto;
		margin: 0;
	}
}

@media (min-width: 980px) {
	.sp-pizza-liste .sp-tipp {
		grid-template-columns: 76px 1fr;
	}

	.sp-pizza-liste .sp-tipp .sp-btn {
		grid-column: 1 / -1;
		justify-self: start;
		margin-top: 8px;
	}
}



/* Knopf, der gerade das Bestell-Fenster lädt */
.sp-btn.sp-laedt,
a.sp-laedt {
	cursor: progress;
	opacity: .78;
}

@media (min-width: 1200px) {
	.sp-burger-karte {
		flex-basis: calc((100% - 102px) / 4);
	}
}