/**
 * Der Frühstücks-Konfigurator auf /fruehstueck-bestellen/ und den Ortsseiten.
 *
 * Lädt nach bestellung.css und benutzt deren Bausteine weiter: .lzb-block,
 * .lzb-option, .lzb-step, .lzb-bestellknopf. Hier steht nur, was es dort noch
 * nicht gibt — die Tarifzeile, die Extras-Liste und die mitlaufende Summe.
 * Keine Farbe und kein Radius wird neu erfunden; alles kommt aus den Custom
 * Properties des Themes.
 */

.lzb-fb {
	display: block;
	scroll-margin-top: calc(var(--header-height) + 1rem);
}

.lzb-fb .section-heading {
	margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

.lzb-fb-form {
	margin: 0;
}

.lzb-fb-spalten {
	display: grid;
	gap: clamp(1.2rem, 2.4vw, 2rem);
	align-items: start;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 62rem) {
	.lzb-fb-spalten {
		grid-template-columns: minmax(0, 1fr) 21rem;
	}
}

.lzb-fb-haupt {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	min-width: 0;
}

.lzb-fb-gruppentitel {
	margin: 1.6rem 0 0.3rem;
	font-family: var(--display);
	font-size: 1.05rem;
	color: var(--wheat-light);
}

.lzb-fb-gruppentitel:first-of-type {
	margin-top: 0.4rem;
}

.lzb-fb-gruppenlead {
	margin: 0 0 0.9rem;
	color: rgba(246, 240, 229, 0.62);
	font-size: 0.86rem;
	line-height: 1.6;
}

/* ------------------------------------------------------------ Die Tarifzeilen */

.lzb-fb-tabelle {
	display: grid;
	gap: 0.55rem;
}

.lzb-fb-zeile {
	position: relative;
	display: grid;
	gap: 0.7rem 0.9rem;
	padding: 0.7rem;
	border: 1px solid var(--line);
	border-radius: 1rem;
	background: rgba(9, 11, 10, 0.34);
	transition: border-color 160ms ease, background 160ms ease;
	grid-template-columns: 4.6rem minmax(0, 1fr);
	grid-template-areas:
		"foto text"
		"preis preis";
}

@media (min-width: 40rem) {
	.lzb-fb-zeile {
		grid-template-columns: 6.4rem minmax(0, 1fr) 9.5rem;
		grid-template-areas: "foto text preis";
		align-items: center;
	}
}

.lzb-fb-zeile:hover {
	border-color: rgba(214, 166, 71, 0.45);
}

.lzb-fb-zeile.is-gewaehlt {
	border-color: var(--wheat);
	background: rgba(214, 166, 71, 0.12);
}

.lzb-fb-zeile:focus-within {
	outline: 2px solid var(--wheat-light);
	outline-offset: 3px;
}

.lzb-fb-zeile.is-feature::after {
	content: "Beliebt";
	position: absolute;
	top: -0.6rem;
	left: 1rem;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--wheat);
	color: var(--ink);
	font-family: var(--utility);
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.lzb-fb-foto {
	grid-area: foto;
	overflow: hidden;
	border-radius: 0.7rem;
	background: var(--olive-deep);
	aspect-ratio: 4 / 3;
}

.lzb-fb-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lzb-fb-text {
	grid-area: text;
	display: grid;
	gap: 0.15rem;
	min-width: 0;
}

.lzb-fb-kicker {
	font-family: var(--utility);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wheat);
}

.lzb-fb-name {
	font-family: var(--display);
	font-size: 1.02rem;
	line-height: 1.25;
	color: var(--cream);
}

.lzb-fb-fit {
	color: var(--cream-muted);
	font-size: 0.84rem;
	line-height: 1.5;
}

.lzb-fb-liste {
	display: none;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
	color: rgba(246, 240, 229, 0.66);
	font-size: 0.8rem;
	line-height: 1.55;
	columns: 2;
	column-gap: 1.2rem;
}

/* Die Zutatenliste steht nur bei einer gewählten Zeile — sonst wären sechzehn
   offene Listen untereinander eine Wand statt einer Tabelle. */
.lzb-fb-zeile.is-gewaehlt .lzb-fb-liste {
	display: block;
}

@media (max-width: 40rem) {
	.lzb-fb-liste {
		columns: 1;
	}
}

.lzb-fb-liste li {
	break-inside: avoid;
	padding-left: 0.85rem;
	position: relative;
}

.lzb-fb-liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.3rem;
	height: 0.3rem;
	border-radius: 999px;
	background: var(--wheat);
}

.lzb-fb-mehr {
	color: var(--wheat-light);
}

.lzb-fb-preis {
	grid-area: preis;
	display: grid;
	gap: 0.1rem;
	justify-items: start;
	text-align: left;
}

@media (min-width: 40rem) {
	.lzb-fb-preis {
		justify-items: end;
		text-align: right;
	}
}

.lzb-fb-preis b {
	font-family: var(--utility);
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--wheat-light);
}

.lzb-fb-preis small {
	color: rgba(246, 240, 229, 0.58);
	font-size: 0.74rem;
	line-height: 1.4;
}

/* Der Mengenschalter der Zeile. Dieselbe Pille wie bei den Extras, nur etwas
   grösser: hier ist sie die Hauptbedienung der Seite und nicht ein Zusatz. */
.lzb-fb-stepper {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	margin-top: 0.35rem;
	padding: 0.15rem;
	border: 1px solid var(--pill-line);
	border-radius: 999px;
	background: var(--pill-bg);
}

.lzb-fb-stepper input {
	width: 3rem;
	border: 0;
	background: transparent;
	color: var(--cream);
	font-family: var(--utility);
	font-size: 1.02rem;
	font-weight: 800;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

.lzb-fb-stepper input::-webkit-outer-spin-button,
.lzb-fb-stepper input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.lzb-fb-zeile.is-gewaehlt .lzb-fb-stepper {
	border-color: var(--wheat);
}

/* ---------------------------------------------------------------- Personen */

.lzb-fb-personen {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.lzb-fb-personen input {
	width: 5.2rem;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--line);
	border-radius: 0.7rem;
	background: rgba(9, 11, 10, 0.4);
	color: var(--cream);
	font-family: var(--utility);
	font-size: 1.15rem;
	font-weight: 800;
	text-align: center;
}

.lzb-fb-personen label {
	color: var(--cream-muted);
	font-size: 0.9rem;
}

.lzb-fb-minhinweis {
	margin: 0.7rem 0 0;
	color: var(--wheat-light);
	font-size: 0.84rem;
	line-height: 1.6;
}

/* ------------------------------------------------------------------ Extras */

.lzb-fb-extras {
	margin-top: 0.55rem;
	border: 1px solid var(--line);
	border-radius: 0.9rem;
	background: rgba(9, 11, 10, 0.28);
	overflow: hidden;
}

.lzb-fb-extras > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
	padding: 0.85rem 1rem;
	cursor: pointer;
	color: var(--cream);
	list-style: none;
}

.lzb-fb-extras > summary::-webkit-details-marker {
	display: none;
}

.lzb-fb-extras > summary::after {
	content: "+";
	font-family: var(--utility);
	font-size: 1.2rem;
	color: var(--wheat);
	margin-left: auto;
}

.lzb-fb-extras[open] > summary::after {
	content: "–";
}

.lzb-fb-extras > summary strong {
	font-family: var(--display);
	font-size: 1rem;
	font-weight: 400;
}

.lzb-fb-extras > summary span {
	font-family: var(--utility);
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wheat);
}

.lzb-fb-extralead {
	margin: 0 1rem 0.8rem;
	color: rgba(246, 240, 229, 0.62);
	font-size: 0.84rem;
	line-height: 1.6;
}

.lzb-fb-extraliste {
	display: grid;
	gap: 0.4rem;
	padding: 0 0.7rem 0.8rem;
}

.lzb-fb-extra {
	display: grid;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 0.5rem;
	border-radius: 0.7rem;
	background: rgba(9, 11, 10, 0.3);
	grid-template-columns: 3rem minmax(0, 1fr) auto;
	grid-template-areas:
		"foto text preis"
		"foto stepper stepper";
}

@media (min-width: 46rem) {
	.lzb-fb-extra {
		grid-template-columns: 3rem minmax(0, 1fr) 5.5rem auto;
		grid-template-areas: "foto text preis stepper";
	}
}

.lzb-fb-extrafoto {
	grid-area: foto;
	overflow: hidden;
	border-radius: 0.5rem;
	background: var(--olive-deep);
	aspect-ratio: 1;
}

.lzb-fb-extrafoto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lzb-fb-extratext {
	grid-area: text;
	display: grid;
	min-width: 0;
}

.lzb-fb-extratext strong {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--cream);
}

.lzb-fb-extratext small {
	color: rgba(246, 240, 229, 0.55);
	font-size: 0.76rem;
}

.lzb-fb-extrapreis {
	grid-area: preis;
	font-family: var(--utility);
	font-size: 0.92rem;
	font-weight: 800;
	color: var(--wheat-light);
	text-align: right;
	white-space: nowrap;
}

.lzb-fb-extrastepper {
	grid-area: stepper;
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	padding: 0.15rem;
	border: 1px solid var(--pill-line);
	border-radius: 999px;
	background: var(--pill-bg);
	justify-self: end;
}

.lzb-fb-extrastepper input {
	width: 2.6rem;
	border: 0;
	background: transparent;
	color: var(--cream);
	font-family: var(--utility);
	font-size: 0.95rem;
	font-weight: 800;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

.lzb-fb-extrastepper input::-webkit-outer-spin-button,
.lzb-fb-extrastepper input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.lzb-fb-extra:has(input[data-lzb-extrafeld]:not([value="0"])) {
	background: rgba(214, 166, 71, 0.1);
}

/* ---------------------------------------------------------------- Rhythmus */

.lzb-fb-rhythmus {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

/* ------------------------------------------------------------------- Summe */

.lzb-fb-summe {
	min-width: 0;
}

@media (min-width: 62rem) {
	.lzb-fb-summe {
		position: sticky;
		top: calc(var(--header-height) + 0.8rem);
	}
}

.lzb-fb-summe-innen {
	display: grid;
	gap: 0.75rem;
	padding: 1.2rem 1.25rem 1.35rem;
	border: 1px solid rgba(214, 166, 71, 0.34);
	border-radius: 1.1rem;
	background: rgba(9, 11, 10, 0.62);
	box-shadow: var(--shadow);
}

.lzb-fb-ort {
	display: grid;
	gap: 0.3rem;
	margin: 0;
}

.lzb-fb-ort label,
.lzb-fb-lieferwahl label {
	color: var(--cream-muted);
	font-size: 0.84rem;
}

.lzb-fb-ort select {
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--line);
	border-radius: 0.7rem;
	background: rgba(9, 11, 10, 0.5);
	color: var(--cream);
	font-size: 0.88rem;
	width: 100%;
}

.lzb-fb-lieferwahl {
	display: flex;
	gap: 0.9rem;
	flex-wrap: wrap;
}

.lzb-fb-lieferwahl label {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	cursor: pointer;
}

/* Was gerade im Korb liegt. Mit einer Auswahl aus mehreren Zeilen ist eine
   blosse Endsumme zu wenig: der Gast muss sehen, was er zusammengestellt hat,
   bevor er weiterklickt. */
.lzb-fb-auswahl {
	display: grid;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 13rem;
	overflow-y: auto;
}

.lzb-fb-auswahl:empty {
	display: none;
}

.lzb-fb-auswahl li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.7rem;
	font-size: 0.84rem;
	line-height: 1.45;
	color: var(--cream-muted);
}

.lzb-fb-auswahl li > b:last-child {
	font-family: var(--utility);
	color: var(--cream);
	white-space: nowrap;
}

.lzb-fb-auswahl li span b {
	font-family: var(--utility);
	color: var(--wheat-light);
	margin-right: 0.15rem;
}

.lzb-fb-leer {
	margin: 0;
	color: rgba(246, 240, 229, 0.55);
	font-size: 0.82rem;
	line-height: 1.5;
}

.lzb-fb-zahlen {
	display: grid;
	gap: 0.35rem;
	margin: 0.2rem 0 0;
	padding: 0.8rem 0 0;
	border-top: 1px solid var(--line);
}

.lzb-fb-zahlen > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.8rem;
}

.lzb-fb-zahlen dt {
	color: var(--cream-muted);
	font-size: 0.86rem;
}

.lzb-fb-zahlen dd {
	margin: 0;
	font-family: var(--utility);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--cream);
	white-space: nowrap;
}

.lzb-fb-zahlen .is-gesamt {
	margin-top: 0.35rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--line);
}

.lzb-fb-zahlen .is-gesamt dt {
	color: var(--cream);
	font-size: 0.95rem;
}

.lzb-fb-zahlen .is-gesamt dd {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--wheat-light);
}

.lzb-fb-prokopf,
.lzb-fb-fenster {
	margin: 0;
	color: rgba(246, 240, 229, 0.62);
	font-size: 0.8rem;
	line-height: 1.55;
}

.lzb-fb-hinweise {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lzb-fb-hinweise:empty {
	display: none;
}

.lzb-fb-hinweise li {
	padding: 0.5rem 0.7rem;
	border-radius: 0.6rem;
	border-left: 2px solid var(--wheat);
	background: rgba(214, 166, 71, 0.12);
	color: var(--cream);
	font-size: 0.82rem;
	line-height: 1.5;
}

.lzb-fb-hinweise li.is-warnung {
	border-left-color: var(--ember);
	background: rgba(189, 90, 50, 0.16);
}

.lzb-fb-knoepfe {
	display: grid;
	gap: 0.5rem;
	margin-top: 0.3rem;
}

.lzb-fb-korbknopf {
	width: 100%;
	min-height: 2.9rem;
	border: 1px solid var(--pill-line);
	border-radius: 999px;
	background: transparent;
	color: var(--cream);
	font-family: var(--utility);
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 160ms ease, color 160ms ease;
}

.lzb-fb-korbknopf:hover {
	background: var(--glass-light);
	color: var(--wheat-light);
}

.lzb-fb-fuss {
	margin: 0;
	color: rgba(246, 240, 229, 0.5);
	font-size: 0.74rem;
	line-height: 1.55;
}

/* ------------------------------------------- Der Rest der Frühstücksseite */

.lzb-fb--zu .cta-surface {
	text-align: left;
}

.fb-vorteile-grid {
	display: grid;
	gap: clamp(0.9rem, 2vw, 1.4rem);
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.fb-staffel {
	padding: 1.2rem 1.3rem 1.3rem;
	border: 1px solid var(--line);
	border-radius: 1.1rem;
	background: var(--glass-light);
}

.fb-staffel h3 {
	margin: 0 0 0.8rem;
	font-family: var(--display);
	font-size: 1.1rem;
	color: var(--cream);
}

.fb-staffel-liste {
	display: grid;
	gap: 0.35rem;
	margin: 0 0 0.9rem;
	padding: 0;
	list-style: none;
}

.fb-staffel-liste li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.8rem;
	padding: 0.45rem 0;
	border-bottom: 1px dashed rgba(246, 240, 229, 0.14);
	color: var(--cream-muted);
	font-size: 0.88rem;
}

.fb-staffel-liste li:last-child {
	border-bottom: 0;
}

.fb-staffel-liste b {
	font-family: var(--utility);
	font-size: 1rem;
	color: var(--wheat-light);
	text-align: right;
}

.fb-staffel-fuss {
	margin: 0;
	color: rgba(246, 240, 229, 0.58);
	font-size: 0.8rem;
	line-height: 1.6;
}

.fb-staffel-fuss a {
	color: var(--wheat-light);
}

.fb-ablauf .route-grid,
.fb-ortsteile .quarter-block {
	margin-top: 0;
}

/* ===========================================================================
 * Das Telefon
 *
 * Auf 375 Pixeln war diese Seite zwanzig Bildschirme lang, allein die Auswahl
 * sechs davon: sechzehn Zeilen zu je 233 Pixeln, weil unter jedem Namen noch
 * ein Beschreibungssatz stand und Preis und Mengenschalter untereinander
 * lagen. Auf dem Schreibtisch ist das eine Tabelle, auf dem Telefon eine Wand.
 *
 * Hier wird dieselbe Zeile flach gelegt: kleines Foto, Name, daneben Preis und
 * Schalter in einer Reihe. Der Satz, für wen das Tablett gedacht ist, und die
 * Zutatenliste erscheinen erst, wenn die Zeile gewählt ist — dann sind sie
 * eine Bestätigung und keine Wand.
 * ======================================================================== */

@media (max-width: 40rem) {
	.lzb-fb-zeile {
		gap: 0.5rem 0.7rem;
		padding: 0.6rem;
		grid-template-columns: 3.1rem minmax(0, 1fr);
	}

	.lzb-fb-foto {
		border-radius: 0.55rem;
		aspect-ratio: 1;
	}

	/* Der Satz zur Zeile steht erst, wenn sie gewählt ist. */
	.lzb-fb-zeile:not(.is-gewaehlt) .lzb-fb-fit {
		display: none;
	}

	.lzb-fb-name {
		font-size: 0.97rem;
	}

	/* Preis und Schalter nebeneinander statt untereinander: spart je Zeile
	   rund fünfzig Pixel, und der Daumen findet beides in einer Höhe. */
	.lzb-fb-preis {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.6rem;
	}

	.lzb-fb-preis b {
		font-size: 1.1rem;
	}

	.lzb-fb-preis small {
		display: none;
	}

	.lzb-fb-stepper {
		margin-top: 0;
	}

	.lzb-fb-liste {
		margin-top: 0.4rem;
	}

	/* Die Extras-Zeilen dürfen ebenfalls flacher werden. */
	.lzb-fb-extra {
		grid-template-columns: 2.4rem minmax(0, 1fr);
		grid-template-areas:
			"foto text"
			"preis stepper";
		gap: 0.35rem 0.55rem;
	}

	.lzb-fb-extrapreis {
		text-align: left;
		align-self: center;
	}

	/* Platz für die Leiste und den Aktionen-Knopf, damit beide nichts
	   verdecken. Ohne das steht die letzte Zeile der Seite hinter ihnen. */
	body.is-breakfastpage {
		padding-bottom: 7.5rem;
	}

	body.is-breakfastpage .campaign-launcher {
		bottom: 4.6rem;
	}
}

/* --------------------------------------------------------- Die Leiste */

.lzb-fb-leiste {
	display: none;
}

@media (max-width: 62rem) {
	.lzb-fb-leiste {
		position: fixed;
		z-index: 140;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.8rem;
		padding: 0.7rem clamp(0.9rem, 4vw, 1.4rem);
		padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid rgba(214, 166, 71, 0.34);
		background: rgba(9, 11, 10, 0.94);
		backdrop-filter: var(--pill-blur);
		box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.42);
	}

	.lzb-fb-leiste[hidden] {
		display: none;
	}

	.lzb-fb-leiste-text {
		min-width: 0;
		color: var(--cream-muted);
		font-size: 0.84rem;
		line-height: 1.35;
	}

	.lzb-fb-leiste-text b {
		font-family: var(--utility);
		color: var(--cream);
	}

	.lzb-fb-leiste-text b[data-lzb-fb-leistensumme] {
		font-size: 1.05rem;
		color: var(--wheat-light);
	}

	.lzb-fb-leiste-knopf {
		flex: 0 0 auto;
		min-height: 2.7rem;
		padding: 0 1.2rem;
		border: 0;
		border-radius: 999px;
		background: var(--wheat);
		color: var(--ink);
		font-family: var(--utility);
		font-size: 0.82rem;
		font-weight: 800;
		letter-spacing: 0.09em;
		text-transform: uppercase;
		cursor: pointer;
	}
}