/*
 * Was die vier Entwürfe über Farbe und Schrift hinaus unterscheidet.
 *
 * theme.json-Varianten können Werte tauschen, keine Haltung. Genau die
 * macht aber den Unterschied zwischen vier Farbvarianten und vier
 * Entwürfen. Hier steht deshalb je Variante, was sie im Aufbau anders
 * macht — nicht mehr, als nötig ist, um sie auseinanderzuhalten.
 *
 * Mobile first: Jede Regel gilt ab 375 px, breitere Viewports erweitern.
 */

/* Der Radius kommt aus der Variantendatei; die Bauteile lesen ihn hier. */
.fm-filialliste__eintrag,
.fm-prospekt__kachel,
.fm-locator__karte,
.fm-locator__feld,
.fm-newsletter__eingabe,
.fm-knopf,
.fm-platzhalter {
	border-radius: var(--fm-radius, 0.375rem);
}

/* ==================================================================
   1 — KLAR
   Sachlich, nah an der Vorlage. Ruhige Flächen, klare Kanten, nichts,
   was von den Angeboten ablenkt. Das ist die Grundhaltung des Themes;
   hier steht deshalb am wenigsten.
   ================================================================== */

.fm-variante-klar .fm-hero {
	border-block-end: 1px solid var(--wp--preset--color--linie);
}

/* ==================================================================
   2 — BAYERISCH MODERN
   Warm und großzügig. Weiche Radien, luftige Karten, eine schmale
   Akzentlinie über jeder Sektionsüberschrift statt harter Trenner.
   ================================================================== */

.fm-variante-bayerisch .fm-sektion h2,
.fm-variante-bayerisch .fm-hero h1 {
	position: relative;
	padding-block-start: 1.25rem;
}

.fm-variante-bayerisch .fm-sektion h2::before,
.fm-variante-bayerisch .fm-hero h1::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 3rem;
	block-size: 4px;
	border-radius: 2px;
	background: var(--wp--preset--color--signal);
}

.fm-variante-bayerisch .fm-filialliste__eintrag,
.fm-variante-bayerisch .fm-prospekt__kachel {
	padding: var(--wp--preset--spacing--40);
	box-shadow: var(--wp--preset--shadow--weich);
	border-color: transparent;
}

.fm-variante-bayerisch .fm-hero {
	/* Ein sehr flacher Verlauf gibt der Cremefläche Tiefe, ohne dass
	   ein Bild geladen werden müsste. Der Ton ist das gedeckte Blau
	   aus Spec 9 — als Farbrolle wäre es die neunte von acht, als
	   Flächenton tut es genau, was der Entwurf braucht. */
	background-image: linear-gradient(
		180deg,
		color-mix(in srgb, #2e5a7d 10%, transparent),
		transparent 60%
	);
}

/* ==================================================================
   3 — BOLD RETAIL
   Laut und gedrängt. Kanten statt Radien, harte Rahmen, Auszeichnungen
   in Versalien, Überschriften an der Grenze zum Plakat. Der Hero trägt
   eine Preis-Anmutung: schwarzer Block, roter Akzent.
   ================================================================== */

.fm-variante-bold .fm-augenbraue,
.fm-variante-bold .fm-filialtitel__marke {
	display: inline-block;
	padding: 0.35rem 0.6rem;
	background: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--schrift);
	font-weight: 700;
	letter-spacing: 0.12em;
}

/* Im Hero steht die Auszeichnung auf Schwarz. Gelb auf Schwarz ist
   der lauteste Kontrast, den dieser Entwurf hat — hier gehört er hin. */
.fm-variante-bold .fm-hero .fm-augenbraue {
	background: var(--wp--preset--color--signal);
	color: #111111;
}

/* Der Bildplatz im schwarzen Hero braucht eine eigene Fassung: Sein
   Grund ist die helle Fläche und stünde sonst als weißer Kasten da. */
.fm-variante-bold .fm-hero .fm-bildplatz {
	background-color: transparent;
	border-color: color-mix(in srgb, currentColor 45%, transparent);
	color: inherit;
}

.fm-variante-bold .fm-hero {
	--fm-hero-grund: var(--wp--preset--color--schrift);
	--fm-hero-schrift: var(--wp--preset--color--grund);
}

.fm-variante-bold .fm-hero h1 {
	text-transform: uppercase;
	font-size: clamp(2.25rem, 11vw, 4.5rem);
}

.fm-variante-bold .fm-hero__text {
	color: inherit;
	opacity: 0.85;
}

.fm-variante-bold .fm-sektion h2 {
	text-transform: uppercase;
}

/* Harte Rahmen wirken nur, wenn sie selten sind: Die Filialkarten
   bekommen eine linke Kante statt eines vollen Kastens, sonst wird die
   Liste zum Gitternetz. */
.fm-variante-bold .fm-filialliste__eintrag {
	border-width: 0 0 0 4px;
	border-inline-start-color: var(--wp--preset--color--akzent);
	background: var(--wp--preset--color--grund);
}

.fm-variante-bold .fm-prospekt__kachel {
	border-width: 3px;
}

.fm-variante-bold .fm-knopf,
.fm-variante-bold .wp-block-button__link {
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Auf dem Telefon nimmt der Hauptknopf die volle Breite — Daumen statt
   Mauszeiger. */
@media (max-width: 29.99em) {
	.fm-variante-bold .fm-hero__knoepfe .wp-block-button {
		inline-size: 100%;
	}

	.fm-variante-bold .fm-hero__knoepfe .wp-block-button__link {
		inline-size: 100%;
		justify-content: center;
	}
}

/* ==================================================================
   4 — KÜHL & PREMIUM
   Zurückgenommen und weit. Keine Kästen, nur Haarlinien. Die
   Antiqua-Überschriften stehen mittig über einem schmalen Satzspiegel;
   der Hero verzichtet auf jede Fläche.
   ================================================================== */

.fm-variante-premium .fm-hero,
.fm-variante-premium .fm-sektion {
	text-align: center;
}

.fm-variante-premium .fm-hero h1,
.fm-variante-premium .fm-sektion h2,
.fm-variante-premium .fm-hero__text,
.fm-variante-premium .fm-sektion__vorspann {
	margin-inline: auto;
}

.fm-variante-premium {
	/* Die Glasflächen der Spec, einmal benannt statt viermal getippt. */
	--fm-glas: rgba(232, 237, 234, 0.05);
	--fm-glas-hell: rgba(232, 237, 234, 0.09);
	--fm-glas-linie: rgba(232, 237, 234, 0.14);
}

.fm-variante-premium .fm-hero {
	--fm-hero-grund: radial-gradient(
		120% 90% at 50% 0%,
		var(--wp--preset--color--flaeche),
		var(--wp--preset--color--grund) 70%
	);
}

.fm-variante-premium .fm-augenbraue {
	letter-spacing: 0.22em;
	color: var(--wp--preset--color--signal);
}

.fm-variante-premium .fm-hero__knoepfe,
.fm-variante-premium .fm-newsletter {
	justify-content: center;
	justify-items: center;
}

/* Glaskarten statt Kästen: eine sehr helle Fläche auf dunklem Grund,
   von einer Haarlinie gefasst. Kein Filter, keine Unschärfe — beides
   kostet auf dem Telefon mehr, als es hier einbrächte. */
.fm-variante-premium .fm-filialliste__eintrag,
.fm-variante-premium .fm-prospekt__kachel {
	background: var(--fm-glas);
	border-color: var(--fm-glas-linie);
	text-align: start;
}

.fm-variante-premium .fm-filialliste__eintrag:hover,
.fm-variante-premium .fm-prospekt__kachel:hover {
	border-color: var(--wp--preset--color--signal);
	background: var(--fm-glas-hell);
}

/* Der Karriereabschnitt kippt sonst ins Helle: Seine Vorgabe ist die
   Textfarbe, und die ist hier fast weiß. In einem dunklen Entwurf wäre
   das ein Loch mitten in der Seite. */
.fm-variante-premium .fm-karriere,
.fm-variante-premium .fm-footer {
	--fm-karriere-grund: var(--wp--preset--color--flaeche);
	--fm-karriere-schrift: var(--wp--preset--color--schrift);
	--fm-footer-grund: var(--wp--preset--color--flaeche);
	--fm-footer-schrift: var(--wp--preset--color--schrift);
}

.fm-variante-premium .fm-sektion--maerkte {
	--fm-maerkte-grund: transparent;
}

/* Die Kartenkacheln sind hell. Ohne Fassung schneiden sie ein weißes
   Rechteck in die Seite. */
.fm-variante-premium .fm-locator__karte {
	border: 1px solid var(--fm-glas-linie);
}

.fm-variante-premium .fm-locator__suche {
	text-align: start;
}

/* Der Wertekasten lebt hier von Weißraum, nicht von Kanten. */
.fm-variante-premium .fm-werte {
	margin-block-start: var(--wp--preset--spacing--60);
}

.fm-variante-premium .fm-werte h3 {
	font-variant: small-caps;
	letter-spacing: 0.04em;
}

/* Ab Tablet trägt die zentrierte Haltung; darunter bleibt der
   Fließtext links, sonst wird er auf 375 px unlesbar. */
@media (max-width: 47.99em) {
	.fm-variante-premium .fm-hero__text,
	.fm-variante-premium .fm-sektion__vorspann,
	.fm-variante-premium .fm-werte p {
		text-align: start;
	}
}

/* ==================================================================
   5 — FRISCH
   Ein eigenständiger Entwurf, nicht aus der Reihe der vier: Papier,
   Tinte, Flaschengrün, dazu ein Zitruston, der ausschließlich Flächen
   trägt — als Schrift wäre er auf Papier unlesbar.

   Die Haltung ist redaktionell. Große, eng gesetzte Archivo-Zeilen,
   Haarlinien statt Kästen, Zahlen in Tabellenziffern, kleine
   Auszeichnungen in Versalien. Der Filialfinder ist nicht eine Kachel
   unter anderen, sondern das Werkzeug, dessentwegen die meisten
   kommen: Ab Tablet wird die Liste zur Datenliste, weil man 39 Zeilen
   in einer Spalte besser liest als in vier Kacheln.
   ================================================================== */

.fm-variante-frisch {
	--fm-haarlinie: 1px solid var(--wp--preset--color--linie);
	--fm-tinte: var(--wp--preset--color--schrift);
}

/* --- Auszeichnungen ------------------------------------------------- */
/* Klein, weit gesperrt, auf einem Zitrusstrich. Die einzige Stelle im
   Entwurf, an der die Signalfarbe hinter Text liegt — dort trägt sie
   14:1 gegen die Tinte. */

.fm-variante-frisch .fm-augenbraue,
.fm-variante-frisch .fm-filialtitel__marke {
	/* inline statt inline-block, damit ein Umbruch jede Zeile einzeln
	   unterlegt statt einen Balken zu zerreißen. */
	display: inline;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--schrift);
	background-image: linear-gradient(var(--wp--preset--color--signal), var(--wp--preset--color--signal));
	background-size: 100% 0.5em;
	background-position: 0 0.75em;
	background-repeat: no-repeat;
	padding-inline: 0.15em;
}

/* --- Hero ------------------------------------------------------------ */
/* Kein Nebeneinander: erst die Aussage über die ganze Breite, darunter
   das Motiv als Band von Kante zu Kante. Ein Titelkopf, keine Kachel. */

.fm-variante-frisch .fm-hero {
	--fm-hero-grund: var(--wp--preset--color--grund);
	padding-block-end: 0;
}

.fm-variante-frisch .fm-hero__satz > * {
	max-inline-size: 26ch;
}

.fm-variante-frisch .fm-hero h1 {
	font-size: clamp(2.75rem, 9.5vw, 6.5rem);
	max-inline-size: 14ch;
	margin-block: 0.35em 0;
}

.fm-variante-frisch .fm-hero__text {
	max-inline-size: 34ch;
	margin-block-start: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: var(--fm-haarlinie);
	font-size: 1.0625rem;
	color: var(--wp--preset--color--schrift-leise);
}

/* --- Zahlenleiste ---------------------------------------------------- */
/* Drei belegte Zahlen, durch Haarlinien getrennt, in Tabellenziffern.
   Sie steht zwischen Hero und Angeboten und gibt der Seite früh einen
   Boden aus Tatsachen. */

.fm-zahlen {
	margin: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	border-block: var(--fm-haarlinie);
	padding-block: var(--wp--preset--spacing--40);
	max-inline-size: min(78rem, 100%);
	margin-inline: auto;
}

@media (min-width: 44em) {
	.fm-zahlen {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0;
	}

	.fm-zahlen__feld + .fm-zahlen__feld {
		border-inline-start: var(--fm-haarlinie);
		padding-inline-start: var(--wp--preset--spacing--40);
		margin-inline-start: var(--wp--preset--spacing--40);
	}
}

.fm-zahlen__wert {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(2.75rem, 7vw, 4.5rem);
	line-height: 0.9;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--akzent);
}

.fm-zahlen__wort {
	margin: 0.6rem 0 0;
	display: grid;
	gap: 0.15rem;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.4;
}

.fm-zahlen__wort strong {
	font-weight: 700;
}

.fm-zahlen__wort span {
	color: var(--wp--preset--color--schrift-leise);
	max-inline-size: 30ch;
}

/* --- Sektionen ------------------------------------------------------- */
/* Jeder Abschnitt beginnt mit einer Haarlinie über die ganze Bahn.
   Das ersetzt die Flächenwechsel der anderen Entwürfe: Der Grund
   bleibt Papier, die Gliederung macht die Linie. */

.fm-variante-frisch .fm-sektion {
	--fm-maerkte-grund: transparent;
	position: relative;
}

.fm-variante-frisch .fm-sektion + .fm-sektion::before,
.fm-variante-frisch .fm-sektion--maerkte::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	border-block-start: var(--fm-haarlinie);
}

/* Linksbündig, und zwar ausdrücklich: Die umgebende Bahn zentriert
   jedes Kind, das eine Höchstbreite hat. Ein redaktioneller Entwurf
   lebt aber von der linken Kante — zentrierte Überschriften über
   linksbündigem Fließtext sehen aus wie zwei verschiedene Seiten.

   Das !important ist hier keine Bequemlichkeit: WordPress schreibt in
   die Regel für zentrierte Bahnen selbst `margin-left: auto !important`
   (nachgemessen). Ohne dasselbe Mittel gewinnt keine noch so
   spezifische Regel. */
.fm-variante-frisch .fm-sektion > *,
.fm-variante-frisch .fm-karriere > *,
.fm-variante-frisch .fm-hero__satz > * {
	margin-inline: 0 auto !important;
}

.fm-variante-frisch .fm-sektion h2 {
	font-size: clamp(1.875rem, 5vw, 3rem);
	max-inline-size: 18ch;
}

.fm-variante-frisch .fm-sektion__vorspann {
	max-inline-size: 46ch;
	color: var(--wp--preset--color--schrift-leise);
	font-size: 1.0625rem;
}

/* --- Angebote -------------------------------------------------------- */

.fm-variante-frisch .fm-prospekt__kachel {
	background: transparent;
	border: var(--fm-haarlinie);
	padding: var(--wp--preset--spacing--30);
}

.fm-variante-frisch .fm-prospekt__marke {
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--akzent);
}

.fm-variante-frisch .fm-prospekt__titel {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* --- Filialfinder als Datenliste ------------------------------------- */
/* 39 Zeilen liest man in einer Spalte besser als in vier Kacheln. Ab
   Tablet wird aus dem Kachelraster deshalb eine Liste mit vier
   Feldern je Zeile, getrennt durch Haarlinien. */

.fm-variante-frisch .fm-locator__feld {
	border: 0;
	border-block-end: 2px solid var(--fm-tinte);
	border-radius: 0;
	background: transparent;
	font-size: 1.125rem;
	padding-inline: 0;
}

.fm-variante-frisch .fm-locator__label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--schrift-leise);
}

.fm-variante-frisch .fm-locator__treffer {
	font-variant-numeric: tabular-nums;
}

.fm-variante-frisch .fm-locator .fm-filialliste {
	display: block;
	max-block-size: min(72vh, 44rem);
	border-block-start: var(--fm-haarlinie);
}

.fm-variante-frisch .fm-filialliste__eintrag {
	background: transparent;
	border: 0;
	border-block-end: var(--fm-haarlinie);
	border-radius: 0;
	padding: var(--wp--preset--spacing--20) 0;
}

.fm-variante-frisch .fm-filialliste__eintrag:hover {
	background: var(--wp--preset--color--flaeche);
}

.fm-variante-frisch .fm-filialliste__ort {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	letter-spacing: -0.02em;
	font-size: 1.25rem;
}

.fm-variante-frisch .fm-filialliste__anschrift,
.fm-variante-frisch .fm-filialliste__zeiten {
	font-size: 0.9375rem;
}

.fm-variante-frisch .fm-filialliste__zeiten {
	font-variant-numeric: tabular-nums;
}

@media (min-width: 48em) {
	.fm-variante-frisch .fm-filialliste__eintrag {
		display: grid;
		grid-template-columns: minmax(9rem, 1.1fr) minmax(0, 1.6fr) minmax(8rem, 1fr) minmax(9rem, 0.9fr);
		align-items: baseline;
		column-gap: var(--wp--preset--spacing--30);
		padding-inline: var(--wp--preset--spacing--20);
	}

	.fm-variante-frisch .fm-filialliste__ort,
	.fm-variante-frisch .fm-filialliste__anschrift,
	.fm-variante-frisch .fm-filialliste__zeiten,
	.fm-variante-frisch .fm-filialliste .fm-status {
		margin: 0;
	}
}

/* --- Öffnungsstatus als Merkzeichen ---------------------------------- */

.fm-variante-frisch .fm-status {
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.fm-variante-frisch .fm-status--offen .fm-status__punkt {
	inline-size: 0.45rem;
	block-size: 0.45rem;
}

/* --- Über uns -------------------------------------------------------- */
/* Zwei Spalten Lesetext ab Tablet — der Abschnitt trägt die längste
   Passage der Seite, und 46 Zeichen lesen sich besser als 90. */

@media (min-width: 56em) {
	.fm-variante-frisch #ueber-uns .fm-sektion__vorspann {
		columns: 2;
		column-gap: var(--wp--preset--spacing--50);
		max-inline-size: min(62rem, 100%);
		font-size: 1.125rem;
	}
}

.fm-variante-frisch .fm-werte h3 {
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: 2px solid var(--fm-tinte);
}

/* Vier leere Kästen sind kein Vertrauensbeweis. Solange keine Siegel
   vorliegen, zeigt dieser Entwurf keine — die anderen vier führen den
   Platz weiter vor. */
.fm-variante-frisch .fm-siegel {
	display: none;
}

/* --- Weiterlesen ------------------------------------------------------ */
/* Der Weg von einem Abschnitt auf seine Seite. Kein Knopf: Das ist ein
   Link, und er soll nicht mit den beiden Handlungen im Hero
   konkurrieren. */

.fm-weiterlesen {
	margin-block-start: var(--wp--preset--spacing--30);
	font-weight: 600;
}

.fm-weiterlesen a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-block-size: 44px;
	text-decoration: none;
	border-block-end: 2px solid var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--akzent);
}

.fm-weiterlesen a:hover {
	background: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--schrift);
	border-block-end-color: var(--wp--preset--color--schrift);
}

/* Die Warengruppen stehen auf der Startseite als Vorschau, auf der
   Sortimentsseite als Einstieg. Dort dürfen sie größer sein. */
.fm-variante-frisch #angebote .fm-gruppen {
	margin-block-start: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.fm-variante-frisch #angebote .fm-gruppen__zeichen {
	inline-size: 2rem;
	block-size: 2rem;
}

/* --- Karriere -------------------------------------------------------- */
/* Der eine laute Moment: Zitrus über die volle Breite, Tinte darauf.
   Weil er der einzige ist, trägt er. */

.fm-variante-frisch .fm-karriere {
	--fm-karriere-grund: var(--wp--preset--color--signal);
	--fm-karriere-schrift: var(--wp--preset--color--schrift);
}

.fm-variante-frisch .fm-karriere .fm-sektion__vorspann {
	color: var(--fm-tinte);
	opacity: 0.82;
	max-inline-size: 42ch;
}

.fm-variante-frisch .fm-karriere h2 {
	font-size: clamp(2.25rem, 7vw, 4rem);
	max-inline-size: 16ch;
}

.fm-variante-frisch .fm-karriere .fm-knopf,
.fm-variante-frisch .fm-karriere .wp-block-button__link {
	background: var(--fm-tinte);
	color: var(--wp--preset--color--grund);
	border-color: var(--fm-tinte);
}

/* --- Newsletter ------------------------------------------------------ */

.fm-variante-frisch .fm-newsletter__eingabe {
	border: 0;
	border-block-end: 2px solid var(--fm-tinte);
	border-radius: 0;
	background: transparent;
	padding-inline: 0;
}

/* --- Fuß -------------------------------------------------------------- */

.fm-variante-frisch .fm-footer {
	--fm-footer-grund: var(--wp--preset--color--schrift);
	--fm-footer-schrift: var(--wp--preset--color--grund);
}

/* Im Fuß steht die Auszeichnung auf Tinte. Ein Zitrusstrich darunter
   wäre dort ein gelber Fleck; hier trägt die Sperrung allein. */
.fm-variante-frisch .fm-footer__titel {
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--grund);
	opacity: 0.6;
}

/* --- Filialseite ------------------------------------------------------ */

.fm-variante-frisch .fm-filialtitel__ort {
	font-size: clamp(2.5rem, 8vw, 4.5rem);
}

.fm-variante-frisch .fm-zeiten__zeile {
	border-block-end: var(--fm-haarlinie);
}

.fm-variante-frisch .fm-filialkarte {
	border: var(--fm-haarlinie);
	border-radius: 0;
}

/* --- Übersichtskarte -------------------------------------------------- */
/* Eine echte Karte: Leaflet aus dem Theme, Kacheln von OpenStreetMap.
   Die Höhe geht mit der Breite mit — auf dem Telefon hochkant, am
   Schreibtisch breit. Feste Pixelhöhen sehen auf einem der beiden
   Geräte immer falsch aus. */

.fm-uebersicht {
	margin: 0;
}

.fm-uebersicht__karte {
	block-size: clamp(15rem, 62vw, 30rem);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--fm-radius, 0.375rem);
	overflow: hidden;
	z-index: 0;
	background: var(--wp--preset--color--flaeche);
}

.fm-uebersicht__karte:not([hidden]) {
	background: none;
}

.fm-uebersicht__unterschrift {
	margin-block-start: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--schrift-leise);
	font-variant-numeric: tabular-nums;
}

/* Ohne Karte bleibt auch die Unterschrift weg — sie beschriebe nichts. */
.fm-uebersicht__karte[hidden] + .fm-uebersicht__unterschrift {
	display: none;
}

/* Im Kopfbereich steht die Karte neben dem Satz. Sie ist dort ein Bild,
   kein Werkzeug — deshalb ohne Bedienelemente. */
.fm-variante-frisch .fm-hero__karte {
	margin-block-start: var(--wp--preset--spacing--30);
}

.fm-variante-frisch .fm-hero__karte .fm-uebersicht__karte {
	block-size: clamp(14rem, 56vw, 26rem);
}

@media (min-width: 62em) {
	.fm-variante-frisch .fm-hero__innen {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		align-items: center;
	}

	.fm-variante-frisch .fm-hero__karte {
		margin-block-start: 0;
	}

	.fm-variante-frisch .fm-hero__karte .fm-uebersicht__karte {
		block-size: clamp(20rem, 30vw, 27rem);
	}
}

/* Die Karte des Filialfinders trägt dort die Hauptlast. */
.fm-variante-frisch .fm-locator__karte {
	block-size: clamp(17rem, 60vw, 30rem);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--fm-radius, 0.375rem);
}

/* Ab Tablet stehen Karte und Liste nebeneinander — die übliche Form
   eines Filialfinders, und die einzige, die beides gleichzeitig zeigt.
   Über die volle Breite gezogen zoomt die Karte so weit heraus, dass
   der Ausschnitt von Stuttgart bis Linz reicht; in einer Spalte sitzt
   er auf dem Gebiet, um das es geht. */
@media (min-width: 62em) {
	.fm-variante-frisch .fm-locator {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		grid-template-areas:
			"suche karte"
			"liste karte";
		align-items: start;
		column-gap: var(--wp--preset--spacing--40);
	}

	.fm-variante-frisch .fm-locator__suche {
		grid-area: suche;
	}

	.fm-variante-frisch .fm-locator__karte {
		grid-area: karte;
		position: sticky;
		inset-block-start: calc(var(--fm-header-hoehe) + 1rem);
		block-size: min(70vh, 34rem);
	}

	.fm-variante-frisch .fm-locator .fm-filialliste {
		grid-area: liste;
	}

	/* In der schmalen Spalte tragen vier Felder je Zeile nicht mehr.
	   Ort und Zeiten bleiben, die Anschrift rückt darunter.

	   justify-content: start ist hier der Punkt: Mit einer auto-Spalte
	   am Ende zieht das Raster die Zeiten an die rechte Kante, und dann
	   steht in einem durchweg linksbündigen Entwurf plötzlich eine
	   Spalte rechts. Die Spalten stehen jetzt nebeneinander und hören
	   auf, wo ihr Inhalt aufhört. */
	.fm-variante-frisch .fm-locator .fm-filialliste__eintrag {
		grid-template-columns: auto auto;
		justify-content: start;
		column-gap: var(--wp--preset--spacing--30);
		row-gap: 0.15rem;
	}

	.fm-variante-frisch .fm-locator .fm-filialliste__anschrift {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.fm-variante-frisch .fm-locator .fm-filialliste .fm-status {
		grid-column: 1 / -1;
		grid-row: 3;
	}

	/* Die Zeiten bleiben linksbündig. Rechts an die Spaltenkante
	   gesetzt stehen sie weit weg von dem Ort, zu dem sie gehören —
	   das Auge muss springen, und in einem Entwurf, der von der linken
	   Kante lebt, fällt die eine rechte Kante sofort auf. */
	.fm-variante-frisch .fm-locator .fm-filialliste__zeiten {
		text-align: start;
	}
}

/* --- Filialfinder auf der eigenen Seite -------------------------------- */
/* Auf der Startseite steckt die Liste in einem Scrollkasten, damit die
   39 Märkte den One-Pager nicht auf 7000 Pixel treiben. Auf der Seite,
   die ihnen gehört, ist genau das falsch: Dort soll die Seite scrollen
   und die Karte danebenstehen bleiben. */

.fm-seite .fm-locator .fm-filialliste {
	max-block-size: none;
	overflow: visible;
}

/* --- Unterseiten: Bahnen nach Inhalt ----------------------------------- */
/* Der Satzspiegel der Seiten ist auf Lesetext gemaßt. Kacheln,
   Zeitstrahl und Stellenliste sind kein Lesetext — über die ganze
   Breite gezogen bleibt rechts sonst ein Drittel der Seite leer, und
   das sieht nicht nach Zurückhaltung aus, sondern nach Abbruch. */

.fm-variante-frisch .fm-seite .fm-gruppen,
.fm-variante-frisch .fm-seite .fm-stellen,
.fm-variante-frisch .fm-seite .fm-zeitstrahl {
	max-inline-size: min(66rem, 100%);
	margin-inline: 0 auto !important;
}

.fm-variante-frisch .fm-seite .fm-gruppen {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

/* Die Zeichnung trägt die Kachel — klein wirkt sie wie ein Aufkleber. */
.fm-variante-frisch .fm-seite .fm-gruppen__zeichen {
	inline-size: 3.25rem;
	block-size: 3.25rem;
}

.fm-variante-frisch .fm-seite .fm-gruppen__feld {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

/* Der Fließtext danach bleibt schmal — er ist zum Lesen da. */
.fm-variante-frisch .fm-seite .wp-block-post-content {
	max-inline-size: min(42rem, 100%);
	margin-inline: 0 auto !important;
}