/* ---------------------------------------------------------------
   Mittagstisch - /mittagstisch/

   Die Seite ist eine Leseseite, keine Bildergalerie: Die Menues stehen
   gesetzt da, in der Schrift der Seite, nach Ort gruppiert. Das
   abfotografierte Original bleibt als Link erreichbar - es ist der Beleg,
   nicht der Inhalt.

   Zwei Zonen:

   Oben die Betriebe mit wechselnder Karte, einer unter dem anderen ueber
   die volle Breite. Sie sind der Grund fuer den Besuch.

   Darunter "Immer auf der Karte" - Betriebe mit festem Mittagsangebot, in
   kleinen Kacheln auf gedeckter Flaeche. Bewusst leiser: Wer die Woche
   sucht, soll nicht zwischen zwei gleich lauten Bereichen entscheiden.

   Bis Oktober 2026 lag oben ein Wechsler mit Kartenbildern. Er ist
   entfallen, als die Menues gesetzt wurden - einen Textblock schiebt man
   nicht seitwaerts. Mit ihm das eigene Javascript der Seite.
   --------------------------------------------------------------- */

.fa-mt {
	padding-bottom: 40px;
}

/* --- Kopf --- */

.fa-mt-kopf {
	margin-bottom: 26px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--fa-tinte);
}

.fa-mt-titel {
	font-family: Archivo, system-ui, sans-serif;
	font-weight: 800;
	font-size: 34px;
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 0 0 8px;
	color: var(--fa-tinte);
	text-wrap: balance;
}

.fa-mt-vorspann {
	max-width: 36rem;
	color: var(--fa-text-sekund);
	font-size: 17px;
	line-height: 1.6;
}

.fa-mt-vorspann p:last-child {
	margin-bottom: 0;
}

/* --- Ein Ort --- */

.fa-mt-ort {
	margin-bottom: 46px;
}

.fa-mt-ort-name {
	font-family: Archivo, system-ui, sans-serif;
	font-weight: 800;
	font-size: 24px;
	line-height: 1.2;
	margin: 0 0 4px;
	color: var(--fa-tinte);
}

/* Der gelbe Strich unter dem Ortsnamen - dieselbe Marke wie am Kicker. */
.fa-mt-ort-name::after {
	content: "";
	display: block;
	width: 46px;
	height: 3px;
	margin-top: 7px;
	background: var(--fa-gelb);
}

.fa-mt-unterzeile {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	letter-spacing: 0.09em;
	color: var(--fa-text-sekund);
	margin: 18px 0 12px;
	font-weight: 600;
}

.fa-mt-unterzeile--leise {
	margin-top: 0;
}

/* --- Ein Betrieb mit wechselnder Karte --- */

.fa-mt-betrieb {
	background: var(--fa-karte);
	border: 1px solid var(--fa-linie);
	border-radius: 3px;
	padding: 22px 26px 24px;
	margin-bottom: 18px;
}

.fa-mt-betrieb-kopf {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--fa-linie);
}

/* Quadratisch mit contain - dieselbe Regel wie im Guide: Der Altbestand ist
   gemischt, und ein halbes Logo ist schlimmer als ein kleines. */
.fa-mt-betrieb-logo {
	flex: 0 0 68px;
	width: 68px;
	height: 68px;
	display: block;
}

.fa-mt-betrieb-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.fa-mt-betrieb-name {
	flex: 1 1 auto;
	min-width: 0;
}

.fa-mt-betrieb-name h3 {
	font-family: Archivo, system-ui, sans-serif;
	font-weight: 800;
	font-size: 21px;
	line-height: 1.2;
	margin: 0;
}

.fa-mt-betrieb-name h3 a {
	color: var(--fa-tinte);
	text-decoration: none;
	border-bottom: 2px solid var(--fa-gelb);
}

.fa-mt-betrieb-name h3 a:hover,
.fa-mt-betrieb-name h3 a:focus-visible {
	border-bottom-color: var(--fa-tinte);
}

.fa-mt-betrieb-wo {
	margin: 5px 0 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--fa-text-sekund);
}

.fa-mt-betrieb-woche {
	flex: 0 0 auto;
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 7px;
}

/* Gelb als Flaeche, nicht als Schrift - auf Papier hat das Gelb zu wenig
   Kontrast fuer Text, als Grund mit Tinte darauf traegt es. */
.fa-mt-marke {
	display: inline-block;
	padding: 4px 9px;
	background: var(--fa-gelb);
	color: var(--fa-tinte);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

/* Eine veraltete Karte bekommt kein Gelb: Gelb heisst hier "gilt jetzt". */
.fa-mt-marke--alt {
	background: var(--fa-linie);
	color: var(--fa-text-sekund);
}

.fa-mt-hinweis {
	font-size: 12px;
	line-height: 1.4;
	color: var(--fa-text-sekund);
	max-width: 15rem;
}

.fa-mt-quelle {
	font-size: 13px;
	color: var(--fa-text-sekund);
	text-decoration: none;
	border-bottom: 2px solid var(--fa-linie);
	white-space: nowrap;
}

.fa-mt-quelle:hover,
.fa-mt-quelle:focus-visible {
	color: var(--fa-tinte);
	border-bottom-color: var(--fa-tinte);
}

/* --- Das Menue --- */

.fa-mt-menue {
	display: flex;
	flex-direction: column;
	gap: 13px;
	padding-top: 14px;
}

/* Nach Tagen gesetzt stehen die Gerichte enger: Eine Zeile je Tag, ohne
   Beschreibung darunter, braucht weniger Luft als ein Gericht mit zwei
   Zeilen Erklaerung. */
.fa-mt-menue--tage {
	gap: 11px;
}

.fa-mt-gericht {
	display: flex;
	align-items: baseline;
	gap: 18px;
}

/* Die Tagesspalte. Feste Breite, damit die Gerichte auf einer Linie
   beginnen - eine Karte, die nach Tagen geht, liest man den Tagen nach.
   180 Pixel, weil "Donnerstag, 3. September" ausgeschrieben hineinpassen
   muss; bei 150 brach der laengste Wochentag um und die Zeile stand
   zweizeilig neben einem einzeiligen Gericht. */
.fa-mt-gericht-tag {
	flex: 0 0 180px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	line-height: 1.5;
	color: var(--fa-text-sekund);
}

.fa-mt-gericht-text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 16px;
	line-height: 1.4;
	color: var(--fa-tinte);
}

.fa-mt-gericht-text span {
	display: block;
}

.fa-mt-gericht-name {
	font-weight: 500;
	line-height: 1.35;
}

.fa-mt-gericht-dazu {
	margin-top: 2px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--fa-text-sekund);
}

/* Preise untereinander: tabular-nums haelt die Kommastellen in einer
   Flucht, sonst tanzen sie von Zeile zu Zeile. */
.fa-mt-gericht-preis {
	flex: 0 0 auto;
	font-family: Archivo, system-ui, sans-serif;
	font-weight: 600;
	font-size: 16px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--fa-tinte);
}

.fa-mt-menue-hinweis {
	margin: 2px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fa-text-sekund);
}

.fa-mt-menue-fehlt {
	margin: 14px 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--fa-text-sekund);
}

.fa-mt-menue-fehlt a {
	color: var(--fa-tinte);
	text-decoration: none;
	border-bottom: 2px solid var(--fa-gelb);
}

/* --- Immer auf der Karte --- */

.fa-mt-immer {
	margin-top: 26px;
	padding: 18px 20px 20px;
	background: rgba(228, 224, 216, 0.34);
	border-radius: 3px;
}

.fa-mt-immer-text {
	font-size: 14px;
	color: var(--fa-text-sekund);
	margin: 0 0 14px;
	max-width: 34rem;
}

.fa-mt-fest-raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 10px;
}

.fa-mt-fest-link {
	display: flex;
	/* Oben ausgerichtet, nicht mittig: Mit Ortsteil und Zeiten sind die
	   Kacheln verschieden hoch, und ein mittig sitzendes Logo laege dann
	   auf keiner gemeinsamen Linie mehr. */
	align-items: flex-start;
	gap: 12px;
	padding: 10px 12px;
	background: var(--fa-karte);
	border: 1px solid var(--fa-linie);
	border-radius: 3px;
	text-decoration: none;
	color: var(--fa-tinte);
	height: 100%;
}

.fa-mt-fest-link:hover,
.fa-mt-fest-link:focus-visible {
	border-color: var(--fa-tinte);
}

.fa-mt-fest-bild {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	display: block;
}

.fa-mt-fest-bild img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.fa-mt-fest-text {
	min-width: 0;
}

.fa-mt-fest-name {
	display: block;
	font-family: Archivo, system-ui, sans-serif;
	font-weight: 800;
	font-size: 15px;
	line-height: 1.25;
}

.fa-mt-fest-ort {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	line-height: 1.35;
	color: var(--fa-tinte);
}

.fa-mt-fest-zeiten {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--fa-text-sekund);
}

/* --- Rand --- */

.fa-mt-leer,
.fa-mt-fuss {
	font-size: 15px;
	color: var(--fa-text-sekund);
}

.fa-mt-fuss {
	margin-top: 34px;
	padding-top: 16px;
	border-top: 1px solid var(--fa-linie);
}

.fa-mt-leer a,
.fa-mt-fuss a {
	color: var(--fa-tinte);
	text-decoration: none;
	border-bottom: 2px solid var(--fa-gelb);
}

/* --- Unter 768px: der Hauptumbruch des Themes --- */

@media (max-width: 767px) {
	.fa-mt-titel {
		font-size: 27px;
	}

	.fa-mt-ort-name {
		font-size: 21px;
	}

	.fa-mt-betrieb {
		padding: 18px 16px 20px;
	}

	/* Logo und Name bleiben nebeneinander, das Wochendatum rutscht unter
	   beide: Rechtsbuendig neben einem umbrechenden Namen stuende es auf
	   dem Telefon in einer 60 Pixel breiten Spalte. */
	.fa-mt-betrieb-kopf {
		flex-wrap: wrap;
		gap: 14px;
	}

	.fa-mt-betrieb-logo {
		flex-basis: 52px;
		width: 52px;
		height: 52px;
	}

	.fa-mt-betrieb-name {
		flex: 1 1 60%;
	}

	.fa-mt-betrieb-woche {
		flex: 1 1 100%;
		align-items: flex-start;
		text-align: left;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px 14px;
	}

	.fa-mt-hinweis {
		max-width: none;
	}

	/* Der Tag steht ueber dem Gericht statt daneben - 150 Pixel Spalte plus
	   Gericht plus Preis gehen auf einem Telefon nicht nebeneinander. */
	.fa-mt-gericht {
		flex-wrap: wrap;
		gap: 2px 14px;
	}

	.fa-mt-gericht-tag {
		flex: 1 1 100%;
	}

	.fa-mt-gericht-text {
		flex: 1 1 auto;
	}

	/* Bricht der Preis in eine eigene Zeile, schiebt ihn das an den rechten
	   Rand. Links unter dem Gericht sieht er aus wie ein Nachsatz; rechts
	   liest sich die Zeile wie auf einer Karte. */
	.fa-mt-gericht-preis {
		margin-left: auto;
	}

	.fa-mt-immer {
		padding: 14px 14px 16px;
	}

	.fa-mt-fest-raster {
		grid-template-columns: 1fr;
	}
}