/* =========================================================
   Schlosspizzeria – Marke (wird auf allen Seiten geladen)
   Schriften lokal, Farben, Bestell-Leiste unten am Handy
   ========================================================= */

@font-face {
	font-family: "Rubik";
	src: url(../fonts/rubik.woff2) format("woff2");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Alfa Slab One";
	src: url(../fonts/alfa-slab-one.woff2) format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--sp-gold: #FDBE55;
	--sp-gold-2: #F0A63A;
	--sp-gold-hell: #FFE3A8;
	--sp-gold-blass: #FFF3D9;
	--sp-braun: #4E2520;
	--sp-braun-2: #2F1511;
	--sp-braun-3: #6B3A2E;
	--sp-rot: #D32F3A;
	--sp-rot-2: #A51F2A;
	--sp-creme: #FFF8EC;
	--sp-linie: #F0DDBC;
	--sp-text: #2F1511;
	--sp-text-2: #6A4B41;
	--sp-wa: #25D366;
	--sp-wa-text: #053516;
	--sp-display: "Alfa Slab One", Rockwell, "Roboto Slab", Georgia, serif;
	--sp-body: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Bestell-Leiste unten (Handy) ---------- */
.sp-leiste {
	position: fixed;
	z-index: 9990;
	left: 0;
	right: 0;
	bottom: 0;
	display: grid;
	grid-template-columns: 1.45fr 1fr 1fr;
	gap: 8px;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
	background: rgba(47, 21, 17, .97);
	box-shadow: 0 -6px 22px rgba(0, 0, 0, .22);
	transition: transform .25s ease;
}

.sp-leiste.sp-leiste-weg {
	transform: translateY(115%);
}

.sp-leiste a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: 56px;
	border-radius: 16px;
	font: 600 .82rem/1.1 var(--sp-body);
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none !important;
}

.sp-leiste .sp-i {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sp-leiste a.sp-l-bestellen {
	flex-direction: row;
	gap: 8px;
	font-size: 1.02rem;
	background: var(--sp-rot);
	color: #fff;
}

.sp-leiste a.sp-l-anrufen {
	background: var(--sp-gold);
	color: var(--sp-braun);
}

.sp-leiste a.sp-l-wa {
	background: var(--sp-wa);
	color: var(--sp-wa-text);
}

.sp-leiste a:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* Bestell-Leiste unten am Handy: mit Reservieren vier Knöpfe */
.sp-leiste.sp-leiste-4 {
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 6px;
	padding-left: 8px;
	padding-right: 8px;
}

.sp-leiste a.sp-l-reservieren {
	background: #fff;
	color: var(--sp-braun);
}

.sp-leiste.sp-leiste-4 a.sp-l-anrufen {
	background: var(--sp-gold);
}

.sp-leiste.sp-leiste-4 a {
	font-size: .76rem;
}

.sp-leiste.sp-leiste-4 a.sp-l-bestellen {
	flex-direction: column;
	gap: 3px;
	font-size: .9rem;
}

@media (min-width: 420px) {
	.sp-leiste.sp-leiste-4 a.sp-l-bestellen {
		flex-direction: row;
		gap: 8px;
		font-size: 1rem;
	}

	.sp-leiste.sp-leiste-4 a {
		font-size: .8rem;
	}
}

body.sp-hat-leiste {
	padding-bottom: calc(78px + env(safe-area-inset-bottom));
}

/* Lafka: schwebende Warenkorb-/Suche-Knöpfe über die Leiste schieben */
@media only screen and (max-width: 979px) {
	body.sp-hat-leiste .lafka-search-cart-holder {
		bottom: calc(92px + env(safe-area-inset-bottom)) !important;
	}
}

@media only screen and (min-width: 980px) {
	.sp-leiste {
		display: none;
	}

	body.sp-hat-leiste {
		padding-bottom: 0;
	}
}

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

/* ---------- Lafka-Fußbereich: Links in der Copyright-Zeile gut lesbar ---------- */
#powered .author_credits a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

#powered .author_credits a:hover {
	color: var(--sp-gold);
}