/* Grundlagen, die theme.json nicht ausdrücken kann.
   Mobile first: alles hier gilt ab 375 px, größere Viewports erweitern. */

:root {
	/* Höhe des Sticky Headers. Von assets/js/nav.js gemessen und
	   gesetzt, damit scroll-margin-top mitwandert, wenn der Kopf wächst
	   oder umbricht. Der Wert hier greift nur ohne JavaScript; er ist
	   der gemessene Höchstwert (76 px bei 1440), damit eine
	   angesprungene Überschrift auch dann nicht hinter dem Kopf
	   verschwindet. Zu viel Abstand fällt kaum auf, zu wenig schon. */
	--fm-header-hoehe: 4.75rem;
}

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

html {
	/* Nur animiert scrollen, wenn niemand widersprochen hat. */
	scroll-behavior: auto;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* Kein horizontales Überlaufen, egal was ein Abschnitt anstellt.
	   Bewusst clip statt hidden: hidden macht den Body zu einem eigenen
	   Scrollbereich, und der klebende Kopf klebte dann an einem Kasten,
	   der selbst mitwandert — er scrollte einfach weg. clip schneidet
	   genauso ab, ohne einen Scrollbereich aufzumachen. */
	overflow-x: clip;
}

/* Jeder Abschnitt mit Anker rückt unter dem Sticky Header aus. */
[id] {
	scroll-margin-top: calc(var(--fm-header-hoehe) + 0.5rem);
}

/* Sichtbarer Fokus auf allem, was bedienbar ist. Nie wegnehmen. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Zum Inhalt springen — sichtbar, sobald er den Fokus bekommt. */
.fm-sprunglink {
	position: absolute;
	left: 0.5rem;
	top: 0.5rem;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--grund);
	border-radius: 0.375rem;
	text-decoration: none;
	transform: translateY(-150%);
}

.fm-sprunglink:focus {
	transform: translateY(0);
}

/* Touch-Ziele. 44 px ist die Untergrenze, nicht das Ziel. */
:where(.wp-block-button__link, .wp-block-navigation-item__content, button) {
	min-block-size: 44px;
	display: inline-flex;
	align-items: center;
}

/* Bilder springen nicht. */
img,
svg,
video {
	max-inline-size: 100%;
	block-size: auto;
}

/* Nur für Screenreader. */
.fm-nur-vorlesen {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Abschnitte auf dunklem Grund ---------------------------------- */
/* Überschriften erben ihre Farbe vom Abschnitt (siehe theme.json).
   Links müssen hier eigens nachgezogen werden, sonst bleibt der grüne
   Akzent auf Dunkel stehen und ist nicht mehr lesbar. */

.fm-footer :where(a) {
	color: inherit;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	text-underline-offset: 0.25em;
}

.fm-footer :where(a):hover {
	text-decoration-color: currentColor;
}

/* --- Touch-Ziele in Kopf und Fuß ----------------------------------- */
/* Textlinks sind von Haus aus so hoch wie ihre Zeile. In Kopf- und
   Fußbereich sind sie die Hauptnavigation und brauchen die vollen
   44 px, ohne dass der Zeilenabstand darunter leidet. */

.fm-header .wp-block-site-title a,
.fm-footer .wp-block-site-title a,
.fm-footer__liste a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
}

.fm-footer__liste {
	list-style: none;
	padding-inline-start: 0;
	margin-block: 0;
}

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

.fm-filiale__eckdaten {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--40);
}

@media (min-width: 48em) {
	.fm-filiale__eckdaten {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}

	/* Die Überschrift „Öffnungszeiten“ startet die zweite Spalte. */
	.fm-filiale__eckdaten > h2 {
		grid-column: 2;
		grid-row: 1;
		margin-block-start: 0;
	}

	.fm-filiale__eckdaten > .fm-zeiten {
		grid-column: 2;
	}
}

.fm-filialdaten__anschrift {
	font-style: normal;
	font-size: var(--wp--preset--font-size--gross);
	line-height: 1.5;
}

.fm-filialdaten__telefon {
	margin-block: var(--wp--preset--spacing--20);
}

.fm-knopf {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	padding-inline: 1.5rem;
	background: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--akzent-kontrast);
	border-radius: 0.375rem;
	font-weight: 600;
	text-decoration: none;
}

.fm-knopf:hover {
	background: var(--wp--preset--color--schrift);
	color: var(--wp--preset--color--grund);
}

/* --- Öffnungszeiten -------------------------------------------------- */

.fm-zeiten__liste {
	margin: 0;
	display: grid;
	gap: 0.35rem;
}

.fm-zeiten__zeile {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	justify-content: space-between;
	padding-block: 0.35rem;
	border-block-end: 1px solid var(--wp--preset--color--linie);
}

.fm-zeiten__zeile dt {
	font-weight: 600;
}

.fm-zeiten__zeile dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.fm-zeiten__hinweis {
	margin-block-start: var(--wp--preset--spacing--20);
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--flaeche);
	border-inline-start: 3px solid var(--wp--preset--color--signal);
	font-size: var(--wp--preset--font-size--klein);
}

/* --- Kontakt und Social im Fuß --------------------------------------- */

.fm-footer__titel {
	margin-block: 0 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.75;
}

.fm-kontakt {
	display: grid;
	font-style: normal;
	font-size: var(--wp--preset--font-size--klein);
}

/* Auch im Fuß sind Telefon und E-Mail Ziele für den Daumen. */
.fm-kontakt__zeile {
	display: flex;
	align-items: center;
	min-block-size: 44px;
	color: inherit;
}

/* Die beiden Anschriftszeilen sind keine Ziele; sie dürfen eng stehen. */
.fm-kontakt span.fm-kontakt__zeile {
	min-block-size: 0;
	line-height: 1.5;
}

.fm-social {
	display: flex;
	gap: 0.25rem;
	margin-block-start: var(--wp--preset--spacing--20);
}

.fm-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	color: inherit;
	border-radius: var(--fm-radius, 0.375rem);
}

.fm-social__link svg {
	inline-size: 1.5rem;
	block-size: 1.5rem;
}

.fm-social__link:hover {
	background: color-mix(in srgb, currentColor 12%, transparent);
}

/* Im Fuß steht die Marke auf umgekehrtem Grund; der Akzent aus dem
   Kopf trüge dort zu wenig Kontrast. */
.fm-footer .fm-logo__bild {
	color: inherit;
	--fm-logo-grund: var(--fm-footer-grund, var(--wp--preset--color--schrift));
}

/* Die Siegelreihe: vier kleine Quadrate, mobil zwei nebeneinander. */
.fm-siegel {
	margin-block-start: var(--wp--preset--spacing--50);
	display: grid;
	gap: var(--wp--preset--spacing--20);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-inline-size: min(38rem, 100%);
	margin-inline: auto;
}

@media (min-width: 34em) {
	.fm-siegel {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.fm-filiale__bild {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* --- Bedienelemente der Karte ---------------------------------------- */
/* Leaflet liefert die Zoomknöpfe mit 30 px aus. Am Daumen sind das
   dreißig Pixel zu wenig; die Vorgabe lautet 44. Die Fläche wächst,
   das Zeichen darin bleibt, wo es war. */

/* Der Behälter muss mit in den Selektor, und zwar zweimal: Leaflets
   eigenes Blatt wird erst beim Laden der Karte nachgezogen und stünde
   sonst nach diesem hier — bei gleichem Gewicht gewinnt das spätere.
   Leaflets Regel wiegt .leaflet-touch .leaflet-bar a, also genau so
   viel wie .leaflet-container .leaflet-bar a. Erst beide Klassen am
   selben Element geben den Ausschlag. */
.leaflet-container.leaflet-touch .leaflet-bar a,
.leaflet-container .leaflet-bar a {
	inline-size: 44px;
	block-size: 44px;
	line-height: 44px;
}

/* --- Karte auf der Filialseite --------------------------------------- */
/* Sie kommt versteckt vom Server und wird erst gefüllt, wenn sie in die
   Nähe des Sichtfensters kommt. Der Rahmen hält bis dahin keinen Platz
   frei: Was nicht kommt, soll auch keine Lücke hinterlassen. */

.fm-filialkarte {
	block-size: min(60vh, 22rem);
	margin-block-start: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--fm-radius, 0.375rem);
	overflow: hidden;
	z-index: 0; /* sonst legt sich Leaflet über den Sticky Header */
}

/* --- Inhaltsseiten ---------------------------------------------------- */
/* Langer Fließtext aus der Datenaufbereitung. Hier zählt nur die
   Lesbarkeit: enger Satzspiegel, Luft zwischen den Absätzen. */

.fm-seite :where(p) {
	max-inline-size: 68ch;
}

.fm-seite :where(h2) {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* --- Inhaltsseiten Ende ---------------------------------------------- */

/* --- Bildplätze ------------------------------------------------------ */
/* Kein einziger der 42 Märkte hat ein Foto, im Archiv liegt genau eines.
   Die Entwürfe zeigen deshalb benannte Plätze statt leerer Flächen —
   ein Rahmen, der sagt, was er später trägt, ist etwas anderes als ein
   Loch im Layout. Das Format steht fest, damit später nichts springt. */

.fm-bildplatz {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: var(--wp--preset--spacing--20);
	text-align: center;
	background: var(--wp--preset--color--flaeche);
	border: 1px dashed var(--wp--preset--color--linie);
	border-radius: var(--fm-radius, 0.375rem);
	color: var(--wp--preset--color--schrift-leise);
	/* Ein feines Diagonalraster: erkennbar als Platzhalter, ohne dass
	   ein Bild geladen werden müsste. */
	background-image: repeating-linear-gradient(
		135deg,
		color-mix(in srgb, currentColor 7%, transparent) 0 1px,
		transparent 1px 9px
	);
}

.fm-bildplatz__marke {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 0.2rem 0.5rem;
	border: 1px solid currentColor;
	border-radius: 999px;
}

.fm-bildplatz__text {
	font-size: var(--wp--preset--font-size--klein);
	max-inline-size: 22ch;
}

/* --- Hero ------------------------------------------------------------ */
/* Auf 375 px steht der Satz oben und das Motiv darunter: Die Aussage
   trägt, das Bild begleitet. Erst wenn genug Breite da ist, stehen
   beide nebeneinander. */

.fm-hero .fm-hero__innen {
	/* Der Satzspiegel der Sektionen ist auf Lesetext gemaßt (42 rem).
	   Der Hero ist kein Lesetext; er nimmt die breite Bahn, die auch
	   der Filialfinder nutzt. */
	max-inline-size: min(78rem, 100%);
	margin-inline: auto;
}

/* Zwei Kacheln in einer 78-rem-Bahn stehen verloren da. Sie bekommen
   nur so viel Platz, wie sie füllen können. */
.fm-sektion .fm-prospekt {
	max-inline-size: min(48rem, 100%);
	margin-inline: auto;
}

/* Drei Werte in 42 rem ergeben Spalten von dreizehn Zeichen Breite.
   Etwas mehr Bahn, und die Absätze werden wieder lesbar. */
.fm-sektion .fm-werte {
	max-inline-size: min(62rem, 100%);
	margin-inline: auto;
}

.fm-hero__innen {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 62em) {
	.fm-hero__innen {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--wp--preset--spacing--50);
	}
}

/* Der Satz bleibt lesbar breit, auch wenn die Spalte mehr hergibt. */
.fm-hero__satz > * {
	max-inline-size: 34rem;
}

.fm-hero__bild {
	inline-size: 100%;
}

/* --- Bildmarke und Wortmarke ----------------------------------------- */
/* Die Marke ist eingebettet, nicht verlinkt: nur so greifen
   currentColor und die Variable für den Grund. Beides zusammen macht
   sie einfarbig invertierbar, wie die Spec es verlangt. */

.fm-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	/* Die Marke ist auf jeder Seite der Weg zurueck zum Anfang und
	   damit ein Ziel fuer den Daumen. Auf 375 px ist die Zeichnung nur
	   32 px hoch; die Flaeche darum muss die vollen 44 px haben. */
	min-block-size: 44px;
	text-decoration: none;
	color: inherit;
	/* Die Aussparungen in Kronkorken und Maskottchen sind keine Löcher,
	   sondern der Grund der Seite. Kippt die Variante ins Dunkle,
	   kippen sie mit. */
	--fm-logo-grund: var(--wp--preset--color--grund);
}

.fm-logo__bild {
	display: flex;
	flex: none;
	color: var(--wp--preset--color--akzent);
}

.fm-logo__bild svg {
	inline-size: 2rem;
	block-size: 2rem;
	display: block;
}

.fm-logo__wort {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--gross);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

/* Ab Tablet darf die Marke atmen. */
@media (min-width: 48em) {
	.fm-logo__bild svg {
		inline-size: 2.5rem;
		block-size: 2.5rem;
	}
}

.fm-logo:focus-visible {
	outline: 2px solid var(--wp--preset--color--akzent);
	outline-offset: 4px;
	border-radius: 2px;
}

/* --- Öffnungsstatus --------------------------------------------------- */
/* Der Platz kommt leer vom Server und wird im Browser gefüllt — sonst
   trüge eine gecachte Seite den Status ihres Abrufs. Ohne JavaScript
   bleibt er leer und darf dann auch keinen Abstand aufreißen. */

.fm-status:empty {
	display: none;
}

.fm-status {
	margin: 0.4rem 0 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-size: var(--wp--preset--font-size--klein);
}

.fm-status__punkt {
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.fm-status__wort {
	font-weight: 600;
}

/* Die Zusatzangabe nimmt sich zurück: Die Aussage ist „geöffnet",
   die Uhrzeit ist die Begründung. */
.fm-status__zusatz {
	color: var(--wp--preset--color--schrift-leise);
}

.fm-status--offen {
	color: var(--wp--preset--color--offen);
}

.fm-status--bald {
	color: var(--wp--preset--color--warnung);
}

.fm-status--zu {
	color: var(--wp--preset--color--schrift-leise);
}

/* Auf der Filialseite steht der Status als Antwort auf die Frage, die
   die meisten Besucher überhaupt hertreibt. Dort darf er größer sein. */
.fm-status--gross {
	margin-block-end: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--grund);
}

.fm-status--gross .fm-status__punkt {
	inline-size: 0.65rem;
	block-size: 0.65rem;
}

/* --- Filialliste ----------------------------------------------------- */

.fm-filialliste {
	list-style: none;
	padding-inline-start: 0;
	margin: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

@media (min-width: 40em) {
	.fm-filialliste {
		grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	}
}

.fm-filialliste__eintrag {
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--grund);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 0.5rem;
}

.fm-filialliste__ort {
	margin: 0 0 0.25rem;
	font-size: var(--wp--preset--font-size--gross);
}

.fm-filialliste__ort a {
	text-decoration: none;
}

.fm-filialliste__ort a:hover {
	text-decoration: underline;
}

.fm-filialliste__anschrift,
.fm-filialliste__zeiten {
	margin: 0;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--schrift-leise);
}

.fm-filialliste__zeiten {
	margin-block-start: 0.35rem;
	font-variant-numeric: tabular-nums;
}

/* --- Titel der Filialseite ------------------------------------------ */
/* Die Marke steht klein über dem Ort. Der gepflegte Titel wiederholt
   sie sonst direkt unter dem Kopfbereich und braucht auf 375 px drei
   Zeilen für eine Information, die schon dasteht. */

.fm-filialtitel__marke {
	margin: 0;
	font-size: var(--wp--preset--font-size--klein);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--schrift-leise);
}

.fm-filialtitel__ort {
	margin-block: 0.15rem 0;
}

/* --- Kleine Links, die trotzdem greifbar sein müssen ----------------- */

.fm-brotkrume a,
.fm-filialdaten__telefon a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
}

/* --- Sektionen des One-Pagers --------------------------------------- */

.fm-augenbraue {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--akzent);
}

.fm-hero h1 {
	margin-block: 0;
	max-inline-size: 18ch;
}

.fm-hero__text {
	margin-block-start: var(--wp--preset--spacing--30);
	max-inline-size: 46ch;
	color: var(--wp--preset--color--schrift-leise);
}

.fm-hero__knoepfe {
	margin-block-start: var(--wp--preset--spacing--40);
	gap: var(--wp--preset--spacing--20);
}

.fm-sektion h2 {
	margin-block: 0;
	max-inline-size: 20ch;
}

.fm-sektion__vorspann {
	margin-block-start: var(--wp--preset--spacing--20);
	max-inline-size: 58ch;
	color: var(--wp--preset--color--schrift-leise);
}

/* Auf dunklem Grund darf der Vorspann nicht zurückgenommen werden --
   die leise Schriftfarbe ist dort nicht mehr kontraststark genug. */
.fm-karriere .fm-sektion__vorspann {
	color: inherit;
	opacity: 0.85;
}

.fm-werte {
	margin-block-start: var(--wp--preset--spacing--50);
	gap: var(--wp--preset--spacing--40);
}

.fm-werte h3 {
	margin-block: 0 0.5rem;
}

.fm-werte p {
	margin: 0;
	color: var(--wp--preset--color--schrift-leise);
}

/* --- Platzhalter, die als solche erkennbar bleiben ------------------- */
/* Wo Material fehlt, steht ein benannter Platzhalter statt einer leeren
   Fläche. Auf den vier Entwürfen soll niemand raten müssen, ob etwas
   fehlt oder kaputt ist. */

.fm-platzhalter {
	margin-block-start: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	border: 2px dashed var(--wp--preset--color--linie);
	border-radius: 0.5rem;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--schrift-leise);
	max-inline-size: 52ch;
}

.fm-karriere .fm-platzhalter {
	color: inherit;
	border-color: currentColor;
	opacity: 0.7;
}

/* --- Prospekt -------------------------------------------------------- */

.fm-prospekt__kachel--leer {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	cursor: default;
}

/* Der Knopf in einer Platzhalterkachel ist Schaubild, kein Ziel: Er
   trägt aria-hidden und darf deshalb auch nicht anklickbar aussehen. */
.fm-prospekt__knopf {
	margin-block-start: auto;
	align-self: start;
	opacity: 0.55;
	pointer-events: none;
}

.fm-prospekt__kachel .fm-bildplatz {
	margin-block-end: 0.5rem;
}

.fm-prospekt {
	margin-block-start: var(--wp--preset--spacing--40);
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

/* Zwei Spalten, fest: auto-fit legt sonst eine dritte, leere Spur an,
   weil der Hinweis darunter über alle Spuren geht und keine mehr leer
   ist. Die Kacheln standen dadurch schmaler, als sie sein sollen. */
@media (min-width: 34em) {
	.fm-prospekt {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}

/* Liegt ein Prospekt vor, steht nur eine Kachel hier. Über die halbe
   Seite gezogen sähe sie wie ein Fehler aus. */
.fm-prospekt__kachel {
	max-inline-size: 24rem;
}

/* Der Hinweis gehört unter die Kacheln, nicht neben sie. */
.fm-prospekt > .fm-platzhalter {
	grid-column: 1 / -1;
}

.fm-prospekt__kachel {
	display: grid;
	gap: 0.25rem;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--grund);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 0.75rem;
	text-decoration: none;
	max-inline-size: 22rem;
}

.fm-prospekt__marke {
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--akzent);
}

.fm-prospekt__titel {
	font-size: var(--wp--preset--font-size--titel-klein);
	font-weight: 700;
	color: var(--wp--preset--color--schrift);
}

.fm-prospekt__hinweis {
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--schrift-leise);
}

/* --- Filialfinder ---------------------------------------------------- */

.fm-locator {
	margin-block-start: var(--wp--preset--spacing--40);
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

/* Ohne Skript filtert das Feld nicht, und die Trefferanzeige darüber
   bleibt stumm. Beides erscheint deshalb erst, wenn JavaScript läuft —
   die Liste darunter ist vollständig und ohnehin nutzbar. */
.fm-locator__suche {
	display: none;
}

.fm-js .fm-locator__suche {
	display: block;
}

.fm-locator__label {
	display: block;
	margin-block-end: 0.35rem;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
}

.fm-locator__feld,
.fm-newsletter__eingabe {
	inline-size: 100%;
	max-inline-size: 26rem;
	min-block-size: 48px;
	padding: 0.6rem 0.9rem;
	font-size: 1rem; /* unter 16px zoomt iOS beim Fokus hinein */
	color: var(--wp--preset--color--schrift);
	background: var(--wp--preset--color--grund);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 0.375rem;
}

.fm-locator__feld:focus-visible,
.fm-newsletter__eingabe:focus-visible {
	outline: 2px solid var(--wp--preset--color--akzent);
	outline-offset: 1px;
}

.fm-locator__treffer {
	margin-block: 0.5rem 0;
	min-block-size: 1.5em;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--schrift-leise);
}

.fm-locator__karte {
	block-size: clamp(16rem, 45vh, 28rem);
	border-radius: 0.75rem;
	overflow: hidden;
	background: var(--wp--preset--color--grund);
	border: 1px solid var(--wp--preset--color--linie);
}

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

.fm-newsletter {
	margin-block-start: var(--wp--preset--spacing--40);
	display: grid;
	gap: var(--wp--preset--spacing--20);
	justify-items: start;
}

.fm-newsletter__label {
	display: block;
	margin-block-end: 0.35rem;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
}

.fm-newsletter__hinweis {
	margin: 0;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--schrift-leise);
	max-inline-size: 46ch;
}

/* --- Die Filialliste im Locator ------------------------------------- */
/* 39 Märkte am Stück machen den One-Pager auf 375 px über 7000 px lang
   und begraben alles darunter. Die Liste bekommt deshalb einen eigenen
   Scrollbereich — die Suche darüber ist der eigentliche Einstieg. */

.fm-locator .fm-filialliste {
	max-block-size: min(65vh, 34rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 2px; /* sonst schneidet der Scrollbereich den Fokusrahmen ab */
	-webkit-overflow-scrolling: touch;
}

/* Karte für Karte klickbar: Ein 21 px hoher Textlink ist am Daumen
   nicht zu treffen. Die Fläche darüber übernimmt das. */
.fm-filialliste__eintrag {
	position: relative;
}

.fm-filialliste__ort a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.fm-filialliste__eintrag:hover {
	border-color: var(--wp--preset--color--akzent);
}

.fm-filialliste__eintrag:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--akzent);
	outline-offset: 2px;
}

/* Der Fokusrahmen sitzt schon auf der Karte. */
.fm-filialliste__ort a:focus-visible {
	outline: none;
}

/* --- Flächen der Sektionen ------------------------------------------ */
/* Bewusst hier statt über die Hintergrundklassen der Blöcke: WordPress
   gibt jene mit !important aus, sodass eine Variante sie nicht mehr
   umfärben kann. Im Entwurf „Bold" stand dadurch weiße Schrift auf
   hellem Grund. Über Variablen behält jede Variante die Kontrolle. */

.fm-hero {
	background: var(--fm-hero-grund, var(--wp--preset--color--flaeche));
	color: var(--fm-hero-schrift, inherit);
}

.fm-sektion--maerkte {
	background: var(--fm-maerkte-grund, var(--wp--preset--color--flaeche));
}

.fm-karriere {
	background: var(--fm-karriere-grund, var(--wp--preset--color--schrift));
	color: var(--fm-karriere-schrift, var(--wp--preset--color--grund));
}

/* Derselbe Grund wie bei den Sektionen: Der Fuß hatte seine Farben als
   Blockattribute und kippte damit in einem dunklen Entwurf ins Helle —
   die Textfarbe ist dort fast weiß. Über Variablen behält jede Variante
   die Kontrolle. */
.fm-footer {
	background: var(--fm-footer-grund, var(--wp--preset--color--schrift));
	color: var(--fm-footer-schrift, var(--wp--preset--color--grund));
}