/* =========================================================
   Schlosspizzeria – Seite „Speisekarte“
   Baut auf startseite.css auf (Farben, Knöpfe, Preisliste).
   ========================================================= */

/* Die Kategorie-Leiste soll beim Scrollen oben kleben. Lafka setzt am <body> „overflow-x: hidden“,
   damit klebt nichts – „clip“ schneidet genauso ab, lässt das Kleben aber zu. */
body.sp-speisekarte {
	overflow-x: clip;
}
/* Die Kategorie-Leiste soll beim Scrollen oben kleben: dafür darf <main> nicht „overflow: hidden“ sein */
.sp.sp-karte {
	overflow: visible;
	overflow-x: clip;
	background: var(--sp-creme);
}

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

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

.sp .sp-karte-held .sp-lead {
	color: #FFF1E6;
}

.sp-karte-held-grid {
	display: grid;
	gap: 10px;
	align-items: center;
}

.sp .sp-karte-held h1 {
	max-width: 12ch;
	margin-bottom: .3em;
	font-size: clamp(2.3rem, 9vw, 4.4rem);
}

.sp .sp-karte-held .sp-lead {
	max-width: 44ch;
}

.sp-karte-held .sp-held-knoepfe {
	margin-bottom: 16px;
}

.sp-karte-held-bild {
	display: none;
}

.sp-brotkrumen ol {
	display: flex;
	flex-wrap: wrap;
	gap: .4em;
	margin: 0 0 14px;
	font-size: .9rem;
	font-weight: 500;
	color: #FFE3D6;
}

.sp-brotkrumen li + li::before {
	content: "›";
	margin-right: .4em;
	color: rgba(255, 255, 255, .6);
}

.sp-brotkrumen a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* ---------- Kategorie-Leiste (klebt unter dem Lafka-Kopf) ---------- */
.sp-karte-nav {
	position: sticky;
	top: var(--sp-nav-oben, 0px);
	z-index: 40;
	background: rgba(255, 255, 255, .97);
	box-shadow: 0 1px 0 var(--sp-linie), 0 10px 24px rgba(78, 37, 32, .08);
}

.sp-karte-nav-innen {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 0 0 4px;
}

.sp-karte-nav ul {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	gap: 8px;
	min-width: 0;
	padding: 10px 16px;
	overflow-x: auto;
	scroll-padding: 0 16px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.sp-karte-nav ul::-webkit-scrollbar {
	display: none;
}

.sp-karte-nav li {
	flex: 0 0 auto;
}

.sp .sp-karte-nav a[data-sp-karte-link] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 4px 16px 4px 5px;
	border-radius: 999px;
	background: var(--sp-gold-blass);
	box-shadow: inset 0 0 0 1.5px var(--sp-linie);
	color: var(--sp-braun);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.sp .sp-karte-nav a[data-sp-karte-link]:hover {
	background: var(--sp-gold-hell);
}

.sp .sp-karte-nav a.sp-aktiv,
.sp .sp-karte-nav a.sp-aktiv:hover {
	background: var(--sp-braun);
	box-shadow: none;
	color: #fff;
}

.sp-karte-nav-bild {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff;
	overflow: hidden;
}

.sp-karte-nav-bild img {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.sp .sp-karte-nav-bestellen {
	display: none;
}

/* ---------- Kategorien ---------- */
.sp-karte-kat {
	padding: 50px 0 34px;
}

/* Sprung zu einer Kategorie (z. B. /speisekarte/#pizza): Abstand = Kopf + Kategorie-Leiste (misst startseite.js) */
.sp.sp-karte [id] {
	scroll-margin-top: var(--sp-sprung, 245px);
}

/* Abwechselnd creme und weiß (der Kopfbereich ist der erste Abschnitt) */
.sp-karte-kat:nth-of-type(odd) {
	background: #fff;
}

.sp-karte-kat-kopf {
	margin-bottom: 22px;
}

.sp .sp-karte-kat-kopf h2 {
	display: inline-block;
	margin: 0 14px 6px 0;
	vertical-align: middle;
	font-size: clamp(1.9rem, 7vw, 2.7rem);
}

.sp .sp-karte-kat-kopf .sp-preis-pille {
	margin: 0 0 8px;
	vertical-align: middle;
}

.sp .sp-karte-kat-kopf .sp-intro {
	margin: 6px 0 0;
}

.sp-karte-kat-kopf .sp-nudeln {
	margin-top: 14px;
}

/* Fotos zur Kategorie (z. B. Pizzen, Pasta) */
.sp-karte-fotos {
	display: flex;
	gap: 14px;
	margin: 0 -20px 24px;
	padding: 4px 20px 8px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.sp-karte-fotos::-webkit-scrollbar {
	display: none;
}

.sp-karte-foto {
	flex: 0 0 auto;
	width: 46%;
	max-width: 230px;
	scroll-snap-align: start;
}

.sp-karte-fotos-viele .sp-karte-foto {
	width: 40%;
}

.sp-karte-foto img {
	width: 100%;
	filter: drop-shadow(0 12px 14px rgba(78, 37, 32, .22));
}

.sp-karte-foto figcaption {
	margin-top: 8px;
	font-size: .88rem;
	font-weight: 600;
	color: var(--sp-text-2);
	text-align: center;
}

/* Gruppen-Überschrift (z. B. Bier, Wein) */
.sp .sp-karte-gruppe {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 30px 0 14px;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sp-braun-3);
}

.sp-karte-gruppe::after {
	content: "";
	flex: 1;
	height: 2px;
	background: var(--sp-linie);
}

/* Karten mit Foto */
.sp-karte-karten {
	display: grid;
	gap: 14px;
}

.sp-karte-karte {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	padding: 12px 14px 12px 12px;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 0 0 1.5px var(--sp-linie), 0 10px 22px rgba(78, 37, 32, .06);
	transition: transform .15s ease, box-shadow .15s ease;
}

.sp-karte-kat:nth-of-type(odd) .sp-karte-karte {
	box-shadow: 0 0 0 1.5px var(--sp-linie), 0 10px 22px rgba(78, 37, 32, .08);
}

.sp-karte-karte-bild {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border-radius: 18px;
	background: radial-gradient(60% 55% at 50% 58%, #FFF1D3 0%, rgba(255, 241, 211, 0) 72%);
}

.sp-karte-karte-bild img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 8px 9px rgba(78, 37, 32, .2));
}

.sp-karte-karte-foto .sp-karte-karte-bild {
	background: #fff;
	overflow: hidden;
}

.sp-karte-karte-foto .sp-karte-karte-bild img {
	object-fit: cover;
	filter: none;
}

.sp .sp-karte-name {
	margin: 0 0 4px;
	font-family: var(--sp-body);
	font-size: 1.08rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--sp-braun);
}

.sp-karte-marke {
	display: block;
	margin-bottom: 1px;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--sp-rot-2);
}

.sp .sp-karte-info {
	margin: 0;
	font-size: .92rem;
	line-height: 1.45;
	color: var(--sp-text-2);
}

.sp .sp-karte-preis {
	margin: 8px 0 0;
	font-family: var(--sp-display);
	font-size: 1.1rem;
	line-height: 1.2;
	color: var(--sp-rot);
}

/* Getränke: Fotos mit weißem Hintergrund, zwei Spalten am Handy */
.sp-karte-karten-fotos {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sp-karte-karten-fotos .sp-karte-karte {
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	align-content: start;
	gap: 8px;
	padding: 8px 8px 14px;
}

.sp-karte-karten-fotos .sp-karte-karte-text {
	padding: 0 6px;
}

.sp-karte-karten-fotos .sp-karte-name {
	font-size: 1rem;
}

/* Merkmale: vegetarisch, scharf, Bio */
.sp .sp-merkmale {
	margin: 0 0 4px;
	line-height: 1.2;
}

.sp-merkmal {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	margin: 0 6px 4px 0;
	padding: .18em .6em .18em .45em;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.3;
	vertical-align: middle;
}

.sp-merkmal .sp-i {
	width: 1.05em;
	height: 1.05em;
}

.sp-merkmal-vegetarisch,
.sp-merkmal-bio {
	background: #E4F4E7;
	color: #1D6A35;
}

.sp-merkmal-scharf {
	background: #FDE4E1;
	color: #A51F2A;
}

.sp-merkmal-alkoholfrei {
	background: #E3F0FB;
	color: #1C5D8F;
}

/* Gerichte ohne Foto: Liste mit Preisen */
.sp-karte-liste {
	margin: 16px 0 0;
	padding: 6px 20px;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 0 0 1.5px var(--sp-linie);
}

.sp-karte-liste li + li {
	border-top: 1px solid #F5E7CF;
}

.sp .sp-karte-liste .sp-pl-name {
	margin: 0;
	font-family: var(--sp-body);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
}

.sp .sp-karte-liste .sp-pl-info {
	margin: 3px 0 0;
}

.sp-karte-liste .sp-merkmal {
	margin-right: 8px;
}

/* Liste mit kleinen Fotos: jede Zeile hat links Platz für ein Foto, damit Namen und Preise bündig stehen */
.sp-karte-liste-bilder .sp-karte-zeile {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
}

.sp-karte-zeile-bild.sp-leer {
	height: 1px;
	background: none;
}

/* Am Handy: Preis unter dem Namen, damit lange Namen Platz haben */
@media (max-width: 699px) {
	.sp-karte-liste-bilder .sp-pl-zeile {
		flex-wrap: wrap;
	}

	.sp-karte-liste-bilder .sp-pl-punkte {
		display: none;
	}

	.sp-karte-liste-bilder .sp-pl-preis {
		flex-basis: 100%;
		margin-top: 2px;
	}
}

.sp-karte-zeile-bild {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: radial-gradient(circle at 50% 55%, var(--sp-gold-blass) 0 62%, rgba(255, 243, 217, 0) 63%);
}

.sp-karte-zeile-bild img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 4px 5px rgba(78, 37, 32, .2));
}

.sp-mit-foto .sp-karte-zeile-bild {
	overflow: hidden;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--sp-linie);
}

.sp-mit-foto .sp-karte-zeile-bild img {
	object-fit: cover;
	filter: none;
}

.sp-karte-zeile-text {
	min-width: 0;
}

.sp-karte-name .sp-nr {
	margin-right: .45em;
}

.sp-karte-marke {
	margin-top: 4px;
}

/* Hinweis (z. B. Jugendschutz) */
.sp .sp-karte-hinweis {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	max-width: 70ch;
	margin: 22px 0 0;
	padding: 14px 18px;
	border-radius: 16px;
	background: var(--sp-gold-blass);
	box-shadow: inset 0 0 0 1.5px var(--sp-linie);
	font-size: .93rem;
	line-height: 1.5;
	color: var(--sp-braun);
}

.sp-karte-hinweis .sp-i {
	flex: none;
	margin-top: .1em;
	color: var(--sp-rot);
}

.sp .sp-karte-kat-fuss {
	margin: 24px 0 0;
}

.sp-karte-kat-fuss .sp-i {
	width: 1.1em;
	height: 1.1em;
}

/* Abschluss */
.sp-karte-schluss {
	margin-top: 28px;
}

.sp .sp-karte-schluss .sp-intro {
	margin: 0 auto 24px;
}

.sp .sp-karte-schluss .sp-hinweis {
	margin: 26px auto 0;
	color: #EBD2BD;
}

.sp-karte-schluss-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 28px;
	margin: 20px 0 0;
}

.sp .sp-karte-schluss-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-karte-schluss-links a:hover {
	color: var(--sp-gold-hell);
}

.sp-karte-schluss-links .sp-i {
	width: 1.2em;
	height: 1.2em;
}

/* ---------- Tablet ---------- */
@media (min-width: 700px) {
	.sp-karte-held {
		padding-bottom: 80px;
	}

	.sp-karte-held-grid {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
		gap: 30px;
	}

	.sp-karte-held-bild {
		position: relative;
		display: block;
		width: min(100%, 440px);
		justify-self: end;
	}

	.sp-karte-held-bild > img {
		width: 100%;
		filter: drop-shadow(0 22px 26px rgba(70, 8, 4, .4));
	}

	.sp-karte-held-burger {
		position: absolute;
		left: -12%;
		bottom: -8%;
		width: 52%;
	}

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

	/* Karten nebeneinander – eine einzelne Karte in der letzten Reihe steht mittig */
	.sp-karte-karten {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 18px;
	}

	.sp-karte-karten > .sp-karte-karte {
		flex: 0 1 calc((100% - 18px) / 2);
	}

	.sp-karte-karten-fotos > .sp-karte-karte {
		flex-basis: calc((100% - 36px) / 3);
	}

	.sp-karte-fotos {
		margin: 0 0 28px;
		padding: 4px 0 8px;
	}

	.sp-karte-foto,
	.sp-karte-fotos-viele .sp-karte-foto {
		width: 25%;
	}

	.sp-karte-kat {
		padding: 64px 0 44px;
	}
}

/* ---------- Computer ---------- */
@media (min-width: 980px) {
	.sp-karte-nav-innen {
		padding: 0 20px 0 6px;
	}

	.sp .sp-karte-nav-bestellen {
		display: inline-flex;
		flex: none;
		min-height: 46px;
		padding: .6em 1.3em;
		font-size: 1rem;
	}

	.sp-karte-karten {
		gap: 22px;
	}

	.sp-karte-karten > .sp-karte-karte {
		flex-basis: calc((100% - 44px) / 3);
	}

	.sp-karte-karte {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		align-content: start;
		gap: 12px;
		padding: 14px 14px 20px;
	}

	.sp-karte-karte:hover {
		transform: translateY(-3px);
		box-shadow: 0 0 0 1.5px var(--sp-gold), 0 16px 30px rgba(78, 37, 32, .12);
	}

	.sp-karte-karte-bild {
		aspect-ratio: 4 / 3;
	}

	.sp-karte-karte-text {
		padding: 0 6px;
	}

	.sp-karte-karten-fotos > .sp-karte-karte {
		flex-basis: calc((100% - 66px) / 4);
	}

	.sp-karte-karten-fotos .sp-karte-karte-bild {
		aspect-ratio: 1;
	}

	.sp-karte-liste {
		columns: 2;
		column-gap: 48px;
		padding: 8px 28px;
	}

	.sp-karte-liste li {
		break-inside: avoid;
	}

	.sp-karte-liste li + li {
		border-top: 0;
	}

	.sp-karte-liste-bilder .sp-karte-zeile {
		grid-template-columns: 72px minmax(0, 1fr);
	}

	.sp-karte-zeile-bild {
		width: 72px;
		height: 72px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sp-karte-karte,
	.sp .sp-karte-nav a[data-sp-karte-link] {
		transition: none;
	}

	.sp-karte-karte:hover {
		transform: none;
	}
}

/* Sehr schmale Handys (unter 360 px) */
@media (max-width: 359px) {
	.sp .sp-karte-kat-kopf h2 {
		font-size: 1.65rem;
	}

	.sp-karte-liste {
		padding: 6px 14px;
	}

	.sp-karte-fotos {
		margin: 0 -16px 24px;
		padding: 4px 16px 8px;
	}
}