/* =========================================================
   Schlosspizzeria – Rahmen: Aktionsleiste, Kopf mit großem Logo,
   Handy-Menü, Fußbereich und Textseiten (Impressum, Datenschutz …).
   Gilt auf Startseite, Speisekarte, Textseiten und der 404-Seite.
   ========================================================= */

/* Grundlage – das Lafka-Stylesheet ist auf diesen Seiten abgeschaltet */
html {
	-webkit-text-size-adjust: 100%;
}

body.sp-rahmen {
	margin: 0;
	background: #fff;
	color: var(--sp-text);
	font-family: var(--sp-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.sp-rahmen img {
	max-width: 100%;
	height: auto;
}

/* Sprung-Link für Tastatur und Screenreader */
.sp-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	padding: 10px 16px;
	border-radius: 0 0 12px 0;
	background: var(--sp-gold);
	color: var(--sp-braun);
	font: 700 1rem/1.3 var(--sp-body);
	text-decoration: none;
}

.sp-skip:focus {
	left: 0;
}

/* ---------- Aktionsleiste ganz oben ---------- */
.sp-promo {
	display: block;
	padding: .6em 20px;
	background: #26110C;
	color: var(--sp-gold-hell);
	font: 500 .9rem/1.4 var(--sp-body);
	text-align: center;
	text-decoration: none;
}

.sp-promo:hover,
.sp-promo:focus-visible {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Kopf mit hängendem Logo ---------- */
.sp.sp-kopf {
	position: relative;
	z-index: 60;
	overflow: visible;
	background: #3A1C16;
	color: #fff;
}

.sp-kopf-innen {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	max-width: 1240px;
	min-height: 64px;
	margin: 0 auto;
	padding: 0 14px;
}

.sp-kopf-links,
.sp-kopf-rechts {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.sp-kopf-rechts {
	justify-content: flex-end;
}

.sp .sp-marke {
	position: relative;
	z-index: 3;
	display: block;
	width: 128px;
	height: 64px;
}

.sp .sp-marke img {
	position: absolute;
	top: 6px;
	left: 50%;
	width: 128px;
	max-width: none;
	transform: translateX(-50%);
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .22));
}

.sp .sp-rund {
	display: grid;
	place-items: center;
	flex: none;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sp-gold);
	color: var(--sp-braun);
	cursor: pointer;
	text-decoration: none;
}

.sp .sp-rund-weiss {
	background: #fff;
}

.sp-rund .sp-i {
	width: 21px;
	height: 21px;
}

.sp-menu-knopf .sp-i-zu,
.sp-kopf.sp-menu-offen .sp-menu-knopf .sp-i {
	display: none;
}

.sp-kopf.sp-menu-offen .sp-menu-knopf .sp-i-zu {
	display: block;
}

.sp-kopf-nav,
.sp .sp-kopf-knopf {
	display: none;
}

.sp-kopf :focus-visible {
	outline: 3px solid var(--sp-gold);
	outline-offset: 3px;
	box-shadow: none;
}

/* Handy-Menü */
.sp-nav-mobil {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 2;
	display: none;
	max-height: calc(100vh - 70px);
	padding: 66px 20px 22px;
	overflow-y: auto;
	background: #3A1C16;
	box-shadow: 0 16px 26px rgba(0, 0, 0, .28);
}

.sp-kopf.sp-menu-offen .sp-nav-mobil {
	display: block;
}

.sp .sp-nav-mobil ul {
	max-width: 520px;
	margin: 0 auto;
}

.sp-nav-mobil li a {
	display: block;
	padding: 13px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
	color: #fff;
	font-weight: 600;
	font-size: 1.05rem;
	text-decoration: none;
}

.sp-nav-mobil li a[aria-current="page"] {
	color: var(--sp-gold);
}

.sp-nav-mobil-knoepfe {
	display: grid;
	gap: 10px;
	max-width: 520px;
	margin: 20px auto 0;
}

/* Tablet: „Online bestellen“ neben dem Menü-Knopf */
@media (min-width: 700px) {
	.sp-kopf-innen {
		min-height: 70px;
		padding: 0 22px;
	}

	.sp .sp-marke {
		width: 156px;
		height: 70px;
	}

	.sp .sp-marke img {
		top: 7px;
		width: 156px;
	}

	.sp .sp-kopf-bestellen {
		display: inline-flex;
		min-height: 46px;
		padding: .6em 1.2em;
		font-size: 1rem;
	}
}

/* Computer: Menü links und rechts vom Logo */
@media (min-width: 1100px) {
	.sp-kopf-innen {
		min-height: 78px;
		padding: 0 26px;
	}

	.sp .sp-marke {
		width: 196px;
		height: 78px;
	}

	.sp .sp-marke img {
		top: 8px;
		width: 196px;
	}

	.sp .sp-menu-knopf,
	.sp .sp-kopf-anruf,
	.sp-nav-mobil,
	.sp-kopf.sp-menu-offen .sp-nav-mobil {
		display: none;
	}

	.sp-kopf-nav {
		display: block;
	}

	.sp .sp-nav-liste {
		display: flex;
		align-items: center;
		gap: 24px;
	}

	.sp .sp-nav-liste a {
		padding: 8px 0;
		color: #fff;
		font-weight: 600;
		font-size: 1.06rem;
		text-decoration: none;
		white-space: nowrap;
	}

	.sp .sp-nav-liste a:hover,
	.sp .sp-nav-liste a[aria-current="page"] {
		color: var(--sp-gold);
	}

	.sp .sp-kopf-knopf {
		display: inline-flex;
		min-height: 46px;
		padding: .6em 1.15em;
		font-size: 1rem;
	}
}

@media (min-width: 1100px) and (max-width: 1239px) {
	.sp .sp-nav-liste {
		gap: 18px;
	}

	.sp .sp-nav-liste a {
		font-size: 1rem;
	}

	.sp .sp-kopf-knopf {
		padding: .6em .95em;
	}
}

@media (max-width: 359px) {
	.sp-kopf-innen {
		padding: 0 10px;
	}

	.sp .sp-rund {
		width: 42px;
		height: 42px;
	}

	.sp .sp-marke,
	.sp .sp-marke img {
		width: 112px;
	}
}

/* ---------- Fußbereich ---------- */
.sp.sp-fuss {
	position: relative;
	overflow: visible;
	padding: 62px 0 28px;
	background: #3A1C16;
	color: #EFDCC8;
	font-size: .98rem;
}

.sp-fuss .sp-zinnen-dunkel-oben {
	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='%233A1C16'/%3E%3C/svg%3E");
}

.sp-fuss-grid {
	display: grid;
	gap: 28px;
}

.sp .sp-fuss-logo {
	display: block;
	width: 150px;
	margin: 0 0 14px;
}

.sp .sp-fuss-titel {
	margin: 0 0 .6em;
	font: 700 1.02rem/1.3 var(--sp-body);
	color: var(--sp-gold);
}

.sp-fuss p {
	margin: 0 0 .8em;
}

.sp-fuss address {
	font-style: normal;
	line-height: 1.75;
}

.sp-fuss li {
	padding: 3px 0;
}

.sp.sp-fuss a {
	color: inherit;
	text-decoration: none;
}

.sp.sp-fuss a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sp-fuss-sozial {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sp-fuss :focus-visible {
	outline: 3px solid var(--sp-gold);
	outline-offset: 3px;
	box-shadow: none;
}

.sp-fuss-unten {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px;
	margin-top: 36px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .15);
	color: #D2B9A2;
	font-size: .88rem;
}

@media (min-width: 760px) {
	.sp-fuss-grid {
		grid-template-columns: 1.3fr 1fr 1fr 1fr;
	}
}

@media (min-width: 980px) {
	.sp.sp-fuss {
		padding-top: 80px;
	}
}

/* ---------- Textseiten: Impressum, Datenschutz, AGB, 404 ---------- */
.sp.sp-textseite-inhalt {
	padding: calc(var(--sp-oben) + 34px) 0 96px;
	background: var(--sp-creme);
}

.sp-textseite-inhalt .sp-wrap {
	max-width: 820px;
}

.sp.sp-textseite-inhalt h1 {
	font-size: clamp(2rem, 6vw, 2.8rem);
}

.sp-text {
	font-size: 1.02rem;
	line-height: 1.65;
	overflow-wrap: anywhere;
}

.sp .sp-text h2,
.sp .sp-text h3,
.sp .sp-text h4 {
	margin: 1.7em 0 .45em;
	font-family: var(--sp-body);
	font-weight: 700;
	line-height: 1.3;
	color: var(--sp-braun);
}

.sp .sp-text h2 {
	font-size: 1.3rem;
}

.sp .sp-text h3 {
	font-size: 1.12rem;
}

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

.sp .sp-text :is(ul, ol) {
	margin: 0 0 1em;
	padding-left: 1.3em;
}

.sp .sp-text ul {
	list-style: disc;
}

.sp .sp-text ol {
	list-style: decimal;
}

.sp-text li {
	margin: 0 0 .35em;
}

.sp-textseite-inhalt .sp-knopfreihe {
	margin-top: 28px;
}