/* SFW Mittagstisch – Frontend
   Alle Farben laufen über Variablen, damit sie im Theme oder in Elementor
   überschrieben werden können: .sfw-mt { --sfw-accent: #862c2c; } */

.sfw-mt {
	/* Werden per Inline-Style aus den Einstellungen überschrieben – bei
	   Farbquelle "Elementor" zeigen sie auf die globalen Kit-Variablen. */
	--sfw-accent: #8c1d1d;
	--sfw-ink: #1c1f1d;
	--sfw-muted: color-mix(in srgb, var(--sfw-ink) 60%, transparent);
	--sfw-line: color-mix(in srgb, var(--sfw-ink) 15%, transparent);
	--sfw-surface: #fff;
	--sfw-surface-alt: color-mix(in srgb, var(--sfw-accent) 7%, transparent);
	--sfw-radius: 6px;
	--sfw-gap: clamp(0.75rem, 2vw, 1.25rem);
	--sfw-font-display: inherit;
	--sfw-font-display-weight: 700;
	--sfw-font-body: inherit;
	--sfw-transform: uppercase;
	--sfw-tracking: 0.06em;

	color: var(--sfw-ink);
	font-family: var(--sfw-font-body, inherit);
	line-height: 1.45;
}

/* Überschriften folgen der Kit-Typografie, damit die Blöcke wie der Rest
   der Seite gesetzt sind. */
.sfw-mt__title,
.sfw-mt-standing__title,
.sfw-mt-downloads__title,
.sfw-mt-month__title {
	font-family: var(--sfw-font-display, inherit);
	font-weight: var(--sfw-font-display-weight, 700);
	text-transform: var(--sfw-transform);
	letter-spacing: var(--sfw-tracking);
}

.sfw-mt *,
.sfw-mt *::before,
.sfw-mt *::after {
	box-sizing: border-box;
}

.sfw-mt__title {
	margin: 0 0 var(--sfw-gap);
}

/* --- Filialwahl --- */
.sfw-mt-filialen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: var(--sfw-gap);
}

.sfw-mt-filiale {
	appearance: none;
	background: transparent;
	border: 1px solid var(--sfw-line);
	border-radius: 999px;
	color: var(--sfw-ink);
	cursor: pointer;
	font: inherit;
	font-size: 0.9em;
	padding: 0.45em 1em;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sfw-mt-filiale:hover {
	border-color: var(--sfw-accent);
}

.sfw-mt-filiale.is-active {
	background: var(--sfw-accent);
	border-color: var(--sfw-accent);
	color: #fff;
}

/* --- Heute-Karte --- */
.sfw-mt-today {
	background: var(--sfw-surface-alt);
	border: 1px solid var(--sfw-line);
	border-left: 4px solid var(--sfw-accent);
	border-radius: var(--sfw-radius);
	margin-bottom: calc(var(--sfw-gap) * 1.5);
	padding: clamp(1rem, 3vw, 1.6rem);
}

.sfw-mt-today__head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 0.8rem;
}

.sfw-mt-today__label {
	background: var(--sfw-accent);
	border-radius: 4px;
	color: #fff;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: var(--sfw-tracking);
	padding: 0.25em 0.6em;
	text-transform: var(--sfw-transform);
}

.sfw-mt-today__date {
	color: var(--sfw-muted);
	font-size: 0.95em;
}

.sfw-mt-today .sfw-mt-dish__title {
	font-family: var(--sfw-font-display, inherit);
	font-size: clamp(1.15rem, 2.6vw, 1.5rem);
	font-weight: var(--sfw-font-display-weight, 700);
}

.sfw-mt-cta {
	background: var(--sfw-accent);
	border-radius: var(--sfw-radius);
	letter-spacing: var(--sfw-tracking);
	text-transform: var(--sfw-transform);
	color: #fff;
	display: inline-block;
	font-weight: 600;
	margin-top: 1rem;
	padding: 0.6em 1.3em;
	text-decoration: none;
}

.sfw-mt-cta:hover,
.sfw-mt-cta:focus {
	color: #fff;
	filter: brightness(1.1);
}

/* --- Filter --- */
.sfw-mt-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: var(--sfw-gap);
}

.sfw-mt-chip {
	appearance: none;
	background: transparent;
	border: 1px solid var(--sfw-line);
	border-radius: 999px;
	color: var(--sfw-muted);
	cursor: pointer;
	font: inherit;
	font-size: 0.85em;
	padding: 0.35em 0.9em;
}

.sfw-mt-chip.is-active {
	border-color: var(--sfw-accent);
	color: var(--sfw-accent);
	font-weight: 600;
}

/* --- Wochenplan --- */
.sfw-mt-week__nav {
	align-items: center;
	display: flex;
	gap: 0.75rem;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.sfw-mt-week__title {
	color: var(--sfw-muted);
	font-size: 0.95em;
}

.sfw-mt-navbtn {
	appearance: none;
	background: transparent;
	border: 1px solid var(--sfw-line);
	border-radius: 6px;
	color: var(--sfw-ink);
	cursor: pointer;
	font: inherit;
	line-height: 1;
	padding: 0.45em 0.8em;
}

.sfw-mt-navbtn:hover {
	border-color: var(--sfw-accent);
	color: var(--sfw-accent);
}

.sfw-mt-days {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 720px) {
	.sfw-mt-days {
		grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	}
}

.sfw-mt-days .sfw-mt-day {
	background: var(--sfw-surface);
	border: 1px solid var(--sfw-line);
	border-radius: var(--sfw-radius);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0.9rem 1rem;
}

.sfw-mt-days .sfw-mt-day.is-today {
	border-color: var(--sfw-accent);
	box-shadow: 0 0 0 1px var(--sfw-accent) inset;
}

.sfw-mt-days .sfw-mt-day.is-past {
	opacity: 0.55;
}

.sfw-mt-day__head {
	align-items: baseline;
	border-bottom: 1px solid var(--sfw-line);
	display: flex;
	justify-content: space-between;
	padding-bottom: 0.4rem;
}

.sfw-mt-day__name {
	font-family: var(--sfw-font-display, inherit);
	font-size: 0.78em;
	font-weight: var(--sfw-font-display-weight, 700);
	letter-spacing: var(--sfw-tracking);
	text-transform: var(--sfw-transform);
}

.sfw-mt-day__date,
.sfw-mt-day__empty {
	color: var(--sfw-muted);
	font-size: 0.85em;
}

.sfw-mt-day__empty {
	margin: 0;
}

/* --- Gerichte --- */
.sfw-mt-list {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sfw-mt-dish {
	display: flex;
	gap: 0.75rem;
	justify-content: space-between;
	margin: 0;
}

.sfw-mt-dish.is-hidden {
	display: none;
}

.sfw-mt-dish__main {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.sfw-mt-dish__title {
	font-weight: 600;
}

.sfw-mt-dish__sub,
.sfw-mt-dish__note {
	color: var(--sfw-muted);
	font-size: 0.9em;
}

.sfw-mt-dish__note {
	font-style: italic;
}

.sfw-mt-dish__price {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}

.sfw-mt-allergene {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin-top: 0.15rem;
}

.sfw-mt-allergen {
	border: 1px solid var(--sfw-line);
	border-radius: 3px;
	color: var(--sfw-muted);
	cursor: help;
	font-size: 0.68em;
	letter-spacing: 0.03em;
	padding: 0.1em 0.35em;
	text-decoration: none;
}

/* --- Monatsansicht --- */
.sfw-mt-monthlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sfw-mt-monthday {
	border-bottom: 1px solid var(--sfw-line);
	display: grid;
	gap: 0.25rem 1rem;
	grid-template-columns: 7rem 1fr;
	padding: 0.7rem 0;
}

.sfw-mt-monthday.is-today {
	background: var(--sfw-surface-alt);
}

.sfw-mt-monthday__date {
	color: var(--sfw-muted);
	font-size: 0.9em;
	font-weight: 600;
}

@media (max-width: 600px) {
	.sfw-mt-monthday {
		grid-template-columns: 1fr;
	}
}

/* --- Dauerangebote --- */
.sfw-mt-standing {
	border-top: 1px solid var(--sfw-line);
	margin-top: calc(var(--sfw-gap) * 1.5);
	padding-top: var(--sfw-gap);
}

.sfw-mt-standing__title {
	font-size: 1.05em;
	margin: 0 0 0.5rem;
}

.sfw-mt-standing__list {
	columns: 2;
	column-gap: 2rem;
	margin: 0 0 0.75rem;
	padding-left: 1.1rem;
}

@media (max-width: 600px) {
	.sfw-mt-standing__list {
		columns: 1;
	}
}

.sfw-mt-standing__note,
.sfw-mt-standing__pdf {
	color: var(--sfw-muted);
	font-size: 0.9em;
	margin: 0.25rem 0 0;
}

.sfw-mt-empty {
	color: var(--sfw-muted);
	margin: 0;
}

/* --- Zustände --- */
.sfw-mt-plan.is-loading {
	opacity: 0.45;
	transition: opacity 0.15s ease;
}

.sfw-mt :focus-visible {
	outline: 2px solid var(--sfw-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.sfw-mt * {
		transition: none !important;
	}
}

@media print {
	.sfw-mt-filialen,
	.sfw-mt-filter,
	.sfw-mt-week__nav,
	.sfw-mt-cta {
		display: none;
	}

	.sfw-mt-days {
		grid-template-columns: 1fr;
	}
}

/* --- PDF-Downloads --- */
.sfw-mt-downloads {
	margin-top: var(--sfw-gap);
}

.sfw-mt-downloads__title {
	font-size: 1.05em;
	margin: 0 0 0.6rem;
}

.sfw-mt-downloads__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sfw-mt-downloads__list li {
	margin: 0;
}

.sfw-mt-download {
	align-items: center;
	border: 1px solid var(--sfw-line);
	border-radius: var(--sfw-radius);
	color: var(--sfw-ink);
	display: inline-flex;
	gap: 0.6rem;
	padding: 0.55em 0.9em;
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.sfw-mt-download:hover,
.sfw-mt-download:focus {
	border-color: var(--sfw-accent);
	color: var(--sfw-ink);
}

.sfw-mt-download__icon {
	background: var(--sfw-accent);
	border-radius: 3px;
	color: #fff;
	font-size: 0.65em;
	font-weight: 700;
	letter-spacing: var(--sfw-tracking);
	padding: 0.3em 0.45em;
}

.sfw-mt-download__label {
	font-weight: 600;
}

.sfw-mt-download__meta {
	color: var(--sfw-muted);
	font-size: 0.85em;
}

/* --- Theme-Reset ---
   Themes und der Elementor-Kit stylen alle <button> global, dadurch erben
   die Pfeil- und Filialbuttons die Button-Farbe des Themes. Hier gezielt
   zurücksetzen – die Farbgebung kommt ausschließlich aus --sfw-accent. */
.sfw-mt button.sfw-mt-navbtn,
.sfw-mt button.sfw-mt-filiale,
.sfw-mt button.sfw-mt-chip {
	background-color: transparent !important;
	background-image: none !important;
	border: 1px solid var(--sfw-line) !important;
	box-shadow: none !important;
	color: var(--sfw-ink) !important;
	font-family: var(--sfw-font-body, inherit) !important;
	font-size: 0.9em !important;
	text-shadow: none !important;
	text-transform: var(--sfw-transform) !important;
	letter-spacing: var(--sfw-tracking) !important;
}

.sfw-mt button.sfw-mt-chip {
	color: var(--sfw-muted) !important;
	font-size: 0.85em !important;
}

.sfw-mt button.sfw-mt-navbtn:hover,
.sfw-mt button.sfw-mt-navbtn:focus,
.sfw-mt button.sfw-mt-filiale:hover,
.sfw-mt button.sfw-mt-filiale:focus,
.sfw-mt button.sfw-mt-chip:hover,
.sfw-mt button.sfw-mt-chip:focus {
	border-color: var(--sfw-accent) !important;
	color: var(--sfw-accent) !important;
}

.sfw-mt button.sfw-mt-filiale.is-active {
	background-color: var(--sfw-accent) !important;
	border-color: var(--sfw-accent) !important;
	color: #fff !important;
}

.sfw-mt button.sfw-mt-chip.is-active {
	border-color: var(--sfw-accent) !important;
	color: var(--sfw-accent) !important;
	font-weight: 600 !important;
}

.sfw-mt a.sfw-mt-cta {
	background-color: var(--sfw-accent) !important;
	color: #fff !important;
	font-family: var(--sfw-font-display, inherit) !important;
	text-decoration: none !important;
}

/* Ältere Browser ohne color-mix: sichtbare Trennlinien behalten. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.sfw-mt {
		--sfw-muted: #6b716c;
		--sfw-line: rgba(28, 31, 29, 0.14);
		--sfw-surface-alt: rgba(0, 0, 0, 0.04);
	}
}

@media print {
	.sfw-mt-downloads {
		display: none;
	}
}