/* Diese Datei übernimmt die Speisekarte-Optik vollständig selbst, statt sich
   auf Elementors global generierte Klassen (pilltab, gericht-zeile, text-name,
   text-desc, text-price) zu verlassen. Grund: Elementor erzeugt CSS für eine
   Klasse offenbar nur, solange sie noch mindestens einmal auf einem
   veröffentlichten Element im Editor verwendet wird. Die 6 manuellen
   Speisekarte-Zeilen, auf denen gericht-zeile/text-name/text-desc/text-price
   ursprünglich lagen, wurden durch diesen Shortcode ersetzt und existieren in
   Elementor nicht mehr — die zugehörige CSS ist dadurch verschwunden.
   pilltab wirkte zufällig weiter, weil diese Klasse (wahrscheinlich) noch an
   anderer Stelle im Editor verwendet wird.
   Werte 1:1 aus der Elementor-Bauanleitung / dem Mockup übernommen. */

:root {
	--sb-spk-ink: #182420;
	--sb-spk-ink-soft: rgba( 24, 36, 32, 0.64 );
	--sb-spk-orange: #e2632a;
	--sb-spk-cream: #fbf6e8;
	--sb-spk-cream-2: #f2e9d3;
	--sb-spk-line: rgba( 24, 36, 32, 0.12 );
}

.sb-spk-wrapper {
	font-family: 'Jost', sans-serif;
}

/* ---------------- Tab-Leiste (pilltab) ---------------- */

.sb-spk-tabs-menu {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 34px;
}

@media screen and ( max-width: 767px ) {
	.sb-spk-tabs-menu {
		justify-content: center;
	}
}

.sb-spk-tab.pilltab {
	border: none;
	border-radius: 999px;
	padding: 11px 20px;
	font-family: 'Jost', sans-serif;
	font-weight: 500;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	cursor: pointer;
	background: var( --sb-spk-cream-2 ) !important;
	color: var( --sb-spk-ink-soft ) !important;
	transition: all 150ms;
}

/* Laut Vorgabe keine eigene Hover-Formatierung — Hover bleibt identisch
   zu Normal. Explizit gesetzt, damit keine fremde CSS (z. B. Elementors
   eigene .pilltab-Regeln an anderer Stelle) dazwischenfunkt. */
.sb-spk-tab.pilltab:hover {
	background: var( --sb-spk-cream-2 ) !important;
	color: var( --sb-spk-ink-soft ) !important;
}

.sb-spk-tab.pilltab.sb-spk-active,
.sb-spk-tab.pilltab.sb-spk-active:hover {
	background: var( --sb-spk-ink ) !important;
	color: var( --sb-spk-cream ) !important;
}

/* ---------------- Panels ---------------- */

.sb-spk-panel {
	display: none;
}

.sb-spk-panel.sb-spk-panel-active {
	display: block;
}

/* ---------------- Eine Speisekarte-Zeile (gericht-zeile) ---------------- */

.sb-spk-panel .gericht-zeile {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 18px;
	padding: 18px 0;
	border-bottom: 1px solid var( --sb-spk-line );
}

.sb-spk-panel .gericht-zeile:last-child {
	border-bottom: none;
}

.sb-spk-name-desc {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.text-name {
	font-family: 'Jost', sans-serif;
	font-weight: 500;
	font-size: 1.05rem;
	color: var( --sb-spk-ink );
	margin: 0;
}

.text-desc {
	font-family: 'Jost', sans-serif;
	font-weight: 300;
	font-size: 0.88rem;
	color: var( --sb-spk-ink-soft );
	margin: 4px 0 0;
}

.text-price {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 600;
	font-size: 1.2rem;
	color: var( --sb-spk-orange );
	white-space: nowrap;
	margin: 0;
	flex: 0 0 auto;
}