/*
 * 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;
	}
}