/* ===================================================================
   Erzgebirgscenter – Frontend-CSS.
   Basis-Tokens (Farben, Schriftgrößen, Spacing) kommen aus theme.json;
   hier lebt das Sektions-/Block-Design. Wird auch in den Block-Editor
   geladen (add_editor_style in functions.php), damit die ACF-Blöcke im
   Editor genauso aussehen wie im Frontend.
   =================================================================== */

/* ---- Grundlagen ---- */

/* ⚠️ box-sizing gilt seit 2026-08-19 global (vorher gar nicht, nur an zwei Einzelstellen).
   Grund: Container wie .ec-shopgitter__in oder .ec-kontakt__in stehen auf `width: 100%`
   **plus** `padding-inline` – in der Standardrechnung (content-box) ergibt das auf einem
   390-px-Schirm 422 px, und die ganze Seite ließ sich seitlich schieben (gemessen).
   Wer eine `max-width` setzt, meint jetzt also das **Außenmaß** einschließlich Polsterung;
   an einer Stelle war das einkalkuliert und ist nachgezogen (.ec-centerplan__plan). */
*,
*::before,
*::after {
	box-sizing: border-box;
}

img {
	max-width: 100%;
	display: block;
}

/* Höhe der schwarzen WordPress-Leiste, die eingeloggten Nutzern über der Website
   liegt. Für Besucher ist sie 0 – die sehen die Leiste nicht.

   ⚠️ Alles, was oben klebt, muss diesen Wert einrechnen, sonst schiebt sich die
   Leiste darüber. Genau das ist beim Kopfbereich passiert: Er stand auf `top: 0`
   und wurde beim Scrollen um exakt 32 px verdeckt (gemessen).

   Ab 783 px ist die Leiste `position: fixed` und bleibt oben stehen; darunter ist
   sie `absolute` und scrollt mit weg – dann darf hier kein Abstand entstehen.
   Deshalb die Media Query und nicht einfach ein fester Wert. */
:root {
	--ec-adminleiste: 0px;

	/* Seitenrand der Seite. Auf dem Telefon 1 rem, ab etwa 800 px Schirmbreite 2 rem –
	   ein fester Wert wirkt auf 320 px zu groß und auf dem Tablet zu knapp. Überall dort
	   einsetzen, wo eine Sektion ihren Inhalt von der Displaykante wegrückt. */
	--ec-rand: clamp(1rem, 4vw, 2rem);

	/* Tatsächliche Höhe des klebenden Kopfbereichs, von ec-header.js gemessen und hier
	   eingetragen. Der Startwert ist die Desktop-Höhe; alles, was unter dem Kopf kleben
	   oder anspringen soll, rechnet damit statt mit einer festen Zahl. */
	--ec-header-hoehe: 113px;
}

@media screen and (min-width: 783px) {
	body.admin-bar {
		--ec-adminleiste: 32px;
	}
}

/* ⚠️ Hier stand `overflow-x: clip` gegen Scrollleisten durch alignfull-Sektionen.
   Das hat den klebenden Kopfbereich lahmgelegt: Ein Vorfahre mit clip/hidden wird in
   Chrome zum Bezugsrahmen für `position: sticky` – und weil dieser Rahmen selbst nicht
   scrollt, klebte der Header nie, sondern lief mit hinaus. Statt zu klippen, brechen
   die Sektionen jetzt gar nicht mehr aus: Die Vorlage `page-bildband` läuft über die
   volle Breite, die Blöcke begrenzen ihren Inhalt selbst. */

/* Die Sektionen stoßen wie im Screendesign direkt aneinander – ohne den
   Standard-Abstand, den der Editor zwischen Blöcken setzt. Das gilt auch für
   Kopf- und Fußbereich, die als Template-Teile eingebunden sind. */
.wp-site-blocks > .wp-block-template-part,
.wp-site-blocks > main,
.ec-hero,
.ec-logoband,
.ec-intro,
.ec-centerplan,
.ec-shops,
.ec-anfahrt {
	margin-block: 0;
}

/* Seitenrand für die Textvorlagen (page.html mit Impressum und Datenschutz, single.html,
   index.html). Die setzen nur Abstand oben und unten – auf dem Telefon klebte der Text
   dadurch an beiden Displaykanten (gemessen: main von 0 bis 390 px).

   Bewusst nur `is-layout-constrained`: front-page.html und page-bildband.html stehen auf
   `layout: default`, dort läuft jede Sektion über die volle Breite und bringt ihren Rand
   selbst mit. Ein Rand am main würde die randlosen Bilder und den Hero einrücken. */
main.wp-block-group.is-layout-constrained {
	padding-inline: var(--ec-rand);
}

/* ---- Header ----
   Maße aus dem Screendesign (EC_website_screendesign_lay01.pdf, Seitenbreite
   2015 pt ≙ ca. 1430 px): weißer Balken ~115 px hoch, Logo 200 px breit links,
   Menü rechtsbündig, Wortabstand 40 px, Schrift ~20 px.
   ⚠️ Das Design zeigt die Navigation in Versalien; seit 2026-08-08 steht sie wie die
   ganze Website in Groß-/Kleinschreibung (Wunsch des Nutzers). */
/* ⚠️ Das Kleben gehört an die **Hülle** des Template-Teils, nicht an die Gruppe
   darin. `position: sticky` wandert nur innerhalb seines Elternelements – und das
   ist hier exakt so hoch wie der Kopfbereich selbst (Spielraum 0). Am inneren
   Element sah die Regel richtig aus, wirkte aber nie: Der Balken lief beim Scrollen
   einfach mit hinaus. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	/* Für Besucher 0. Eingeloggt rutscht der Balken unter die WordPress-Leiste,
	   sonst schneidet sie ihn oben ab (siehe --ec-adminleiste ganz oben). */
	top: var(--ec-adminleiste, 0px);
	z-index: 60;
	transition: box-shadow 0.2s ease;
}

/* Sobald gescrollt wird, bekommt der weiße Balken eine Kante – über hellen
   Bereichen verschwimmt er sonst mit dem Inhalt darunter. Ganz oben bleibt er
   flach wie im Screendesign; die Klasse setzt ec-header.js. */
.wp-site-blocks > header.wp-block-template-part.is-gescrollt {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
}

@media (prefers-reduced-motion: reduce) {
	.wp-site-blocks > header.wp-block-template-part {
		transition: none;
	}
}

/* Sprungziele (Inhaltsverzeichnis im Datenschutz, „Zum Inhalt springen") landen
   sonst unter dem klebenden Balken – die Überschrift ist dann nicht zu sehen. */
:target {
	scroll-margin-top: calc(var(--ec-header-hoehe, 113px) + 1rem + var(--ec-adminleiste, 0px));
}

.site-header {
	background: var(--wp--preset--color--base);
}

.site-header__logo {
	flex: 0 0 auto;
}

/* Der Site-Logo-Block setzt die Breite am Container; das Bild selbst muss
   mitwachsen, sonst bleibt es beim Original-Seitenverhältnis stehen. */
.site-header__logo img {
	width: 100%;
	height: auto;
}

/* Navigation: aktiver Punkt im Logo-Grün, übrige im gleichen Ton mit halber
   Deckkraft (im Design #80B299 = #006533 zu 50 % auf Weiß).
   Die Klasse .wp-block-navigation-item__content ist nötig, weil die Core-Styles
   des Navigation-Blocks sonst gewinnen. */
.site-header .site-nav {
	--ec-nav-color: var(--wp--preset--color--primary-mid);
}

.site-header .site-nav .wp-block-navigation-item__content {
	color: color-mix(in srgb, var(--ec-nav-color) 50%, #fff);
	text-decoration: none;
}

.site-header .site-nav .wp-block-navigation-item__content:hover,
.site-header .site-nav .wp-block-navigation-item__content:focus-visible,
.site-header .site-nav .current-menu-item > .wp-block-navigation-item__content,
.site-header .site-nav .current_page_item > .wp-block-navigation-item__content,
.site-header .site-nav .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--ec-nav-color);
	font-weight: 700;
}

/* Burger-Icon und Overlay in denselben Grüntönen. */
.site-header .site-nav .wp-block-navigation__responsive-container-open,
.site-header .site-nav .wp-block-navigation__responsive-container-close {
	color: var(--ec-nav-color);
}

.site-header .site-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
}

/* Ab Tablet abwärts wird der weiße Balken flacher, damit das Logo nicht
   die halbe Höhe einnimmt. */
@media (max-width: 60rem) {
	.site-header__logo {
		width: 150px !important;
	}

	.site-header .site-nav {
		font-size: 1.05rem !important;
	}
}

/* ⚠️ Burger-Schwelle: Der Navigationsblock von WordPress kennt bei
   `"overlayMenu":"mobile"` nur **eine** Grenze, und die liegt fest bei 600 px
   (wp-includes/blocks/navigation/style.min.css, `@media (min-width:600px)`) – im
   Block einstellbar ist sie nicht. Zwischen 600 und 960 px standen Logo und vier
   Menüpunkte dadurch gedrängt in einer Zeile, die laut header.html nicht umbrechen
   darf (`flexWrap: nowrap`).

   Deshalb nehmen die beiden Regeln hier die Core-Regeln bis 900 px wieder zurück:
   Knopf einblenden, aufgeklappte Leiste ausblenden. Der geöffnete Zustand
   (`.is-menu-open`) steht bei Core außerhalb der Media Query und funktioniert
   unverändert weiter. Ändert Core seine Klassennamen, greift die Rücknahme nicht
   mehr – dann steht wieder das heutige Verhalten da, kaputt geht nichts.

   ⚠️ Das Overlay öffnet nur mit JavaScript – so ist der Core-Block gebaut. Zwischen 600
   und 900 px ist das Kopfmenü ohne JS deshalb nicht erreichbar, genau wie unterhalb von
   600 px auch schon. Der Weg bleibt in beiden Fällen die Fußzeile, die dieselben Punkte
   als offene Liste führt. */
@media (min-width: 600px) and (max-width: 56.25rem) {
	.site-header .site-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.site-header .site-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Fingerfreundliche Knöpfe: Der Burger ist im Core ein 24-px-Icon ohne Polsterung –
   als Trefferfläche zu klein (Empfehlung 44 px). Das Icon bleibt 24 px, nur die
   Fläche darum wächst; `margin-inline-end: -0.625rem` holt den optischen Rand
   zurück, damit der Knopf bündig zur Kante steht statt eingerückt.

   ⚠️ Hier steht bewusst **kein** `display` für den Öffnen-Knopf: Core blendet ihn ab
   600 px über genau diese Eigenschaft aus. Eine Angabe hier hätte ihn auch am
   Schreibtisch eingeblendet (beim Bauen passiert und gemessen). Die Zentrierung
   steht deshalb in der Media Query weiter oben. */
.site-header .site-nav .wp-block-navigation__responsive-container-open,
.site-header .site-nav .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
}

.site-header .site-nav .wp-block-navigation__responsive-container-close {
	display: flex;
}

.site-header .site-nav .wp-block-navigation__responsive-container-open {
	margin-inline-end: -0.625rem;
}

/* Unterhalb der Burger-Schwelle zeigt Core den Knopf ohnehin – hier nur die
   Zentrierung des Icons in der größeren Fläche. */
@media (max-width: 56.25rem) {
	.site-header .site-nav .wp-block-navigation__responsive-container-open {
		display: flex;
	}
}

/* Im aufgeklappten Overlay dürfen die Punkte nicht kleben – sie sind dort das
   einzige Ziel und werden mit Daumen bedient. */
/* Im Overlay sind die Punkte das einzige, was auf dem Schirm steht – dort dürfen sie
   größer sein als die 1.05 rem, die für die Kopfzeile gelten (die muss neben das Logo
   passen, das Overlay nicht). */
.site-header .site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	font-size: 1.5rem;
}

/* Auf dem Telefon nimmt das Logo sonst 42 % der Displaybreite ein (150 px von 360),
   neben dem Burger bleibt dann kaum Luft. */
@media (max-width: 37.5rem) {
	.site-header__logo {
		width: 120px !important;
	}
}

/* ---- Footer ---- */
.site-footer a {
	color: inherit;
	text-decoration: none;
}

.site-footer a:hover {
	text-decoration: underline;
}

/* Die fünf Fußzeilen-Punkte sind 22 px hoch (kleine Schrift, keine Polsterung) und
   umbrechen auf dem Telefon in mehrere Zeilen – als Ziel für den Daumen zu wenig.
   Der Zeilenabstand des Menüs steht dafür in footer.html auf 0.25rem, sonst rissen
   44 px Höhe **plus** 2,5 rem Zeilenlücke die Fußzeile auseinander. */
.site-footer__nav .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
}

.site-footer__social .wp-block-social-link-anchor {
	padding: 0.65rem;
}

/* ===================================================================
   ACF-Blocks
   Je Block ein eigener Abschnitt, Klassennamen wie im render.php.
   =================================================================== */

/* ---- Hero (acf/erzgebirgscenter-hero) ----
   Bild links auf gelber Fläche, das Gelb läuft rechts weiter. Darüber die
   Info-Box (Adresse, Öffnungszeiten) und die Headline auf grünen Balken.

   Alle Maße stammen aus dem Screendesign (Seitenbreite 2015 pt ≙ 1430 px,
   Faktor 0,709). Sie sind als Prozent der Container-Breite bzw. als vw notiert,
   damit der Aufbau bis 1430 px mitskaliert und darüber stehen bleibt:
   Hero-Höhe 606 px · Info-Box ab 61,5 % der Breite, 469 × 230 px, 72 px unter
   der Oberkante · Headline-Balken linksbündig darunter, 89 px über der Unterkante. */
.ec-hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: clamp(20rem, 42.4vw, 37.9rem);
	background-color: var(--wp--preset--color--hero-yellow);
	overflow: hidden;
}

/* Die Motive liegen übereinander und werden überblendet. Bewegt wird nur das Bild –
   Info-Box und Überschriftposition bleiben davon unberührt. */
/* Immer über die volle Breite: Die Motive positionieren sich darin selbst – das
   linksbündige über seine eigene Breite, das Vollbild über inset. Würde der Rahmen
   je nach Motiv die Breite wechseln, klappte er beim Überblenden schlagartig um. */
.ec-hero__slides {
	position: absolute;
	inset: 0;
	height: 100%;
}

.ec-hero__img {
	position: absolute;
	inset: 0 auto 0 0;
	height: 100%;
	width: auto;
	max-width: none;
	object-fit: cover;
	object-position: left bottom;
	opacity: 0;
	/* Ruhige, lange Blende (Wunsch des Nutzers). Bleibt deutlich unter dem Takt von
	   5 s, sonst überschnitten sich zwei Wechsel. */
	transition: opacity 1.6s ease-in-out;
}

.ec-hero__img.is-aktiv {
	opacity: 1;
}

/* Motiv über die volle Section (Schalter am Slide): für Fotos ohne freigestelltes Motiv. */
.ec-hero__img--voll {
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Dunkler Verlauf nur unter dem Vollbild: Die Info-Box hat weiße Schrift und einen
   weißen Rahmen – über einem hellen Foto wäre sie sonst kaum zu lesen. Er liegt
   dauerhaft im Markup und wird mit derselben Dauer ein- und ausgeblendet wie das
   Bild; sonst schaltete er hart um, während das Motiv noch überblendet. */
.ec-hero__slides::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0.45) 100%);
	opacity: 0;
	transition: opacity 1.6s ease-in-out;
	pointer-events: none;
}

.ec-hero__slides:has(.ec-hero__img--voll.is-aktiv)::after {
	opacity: 1;
}

.ec-hero__img--leer {
	display: grid;
	place-items: center;
	width: 55%;
	color: rgba(0, 0, 0, 0.45);
	background: rgba(255, 255, 255, 0.25);
	font-size: var(--wp--preset--font-size--small);
}

.ec-hero__in {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	max-width: 1430px;
	margin-inline: auto;
	/* Prozentwerte – auch oben und unten – beziehen sich auf die Breite; der Aufbau
	   bleibt dadurch bis 1430 px proportional zum Screendesign.

	   ⚠️ **Der Deckel per min() ist Pflicht.** Prozentuale Innenabstände rechnen gegen
	   den **Elternblock**, nicht gegen die eigene, hier auf 1430 px gedeckelte Breite.
	   Ohne Deckel wächst das Padding über 1430 px hinaus weiter, während der Kasten
	   stehen bleibt – die Textspalte schrumpft und verschwindet: gemessen 469 px bei
	   1430 px, **140 px bei 1920 px** (jedes Wort auf einem eigenen Balken, die Adresse
	   ebenso zerrissen) und **0 px ab 2130 px** – dort steigt ec-hero.js aus und die
	   Balken laufen aus dem Bild. Genau so stand es live.

	   Die px-Werte sind die Prozentwerte bei 1430 px Containerbreite. Bis dahin greift
	   immer der Prozentwert, darüber steht der Aufbau still. */
	padding: min(5%, 71.5px) min(5.7%, 81.5px) min(6.2%, 88.7px) min(61.5%, 879.5px);
	display: grid;
	/* minmax(0, 1fr) ist Pflicht: Eine Überschriftzeile darf nicht umbrechen. Ohne die
	   Begrenzung zieht eine lange Zeile die Rasterspalte auf – und die Info-Box, die auf
	   100 % dieser Spalte steht, wandert mit aus der Section heraus. Genau so passiert. */
	grid-template-columns: minmax(0, 1fr);
	justify-items: start;
	align-content: space-between;
	gap: 2rem;
	min-height: inherit;
}

.ec-hero__box {
	box-sizing: border-box;
	display: grid;
	gap: 2rem;
	width: 100%;
	padding: 1.5rem 1.4rem 1.6rem;
	border: 3px solid #fff;
	border-radius: 1.2rem;
	color: #fff;
	/* Design: 22 px in Myriad Bold. Fira Sans baut breiter – bei 19 px bleibt
	   „Montag – Freitag 09:00 bis 19:00 Uhr" auch auf schmaleren Screens einzeilig. */
	font-size: clamp(0.95rem, 1.35vw, 1.2rem);
	/* SemiBold statt Bold: Fira läuft kräftiger als das Myriad im Layout. */
	font-weight: 600;
	line-height: 1.35;
}

.ec-hero__row {
	display: grid;
	grid-template-columns: 2.4rem 1fr;
	gap: 0.65rem;
	align-items: start;
}

.ec-hero__icon {
	width: 100%;
	height: auto;
	/* halber Zeilenvorlauf, damit die Icon-Oberkante auf der Versalhöhe der
	   ersten Zeile sitzt (wie im Design). */
	margin-top: 0.12em;
	fill: #fff;
}

.ec-hero__icon--pin {
	width: 2.15rem;
}

.ec-hero__box p {
	margin: 0;
}

/* Kundenwunsch 2026-09-16: Die Center-Zeiten sind Kernzeiten – der Hinweis darunter
   bleibt etwas kleiner, aber in derselben Fette wie der Rest der Box (Nutzer, 2026-09-16:
   nicht leichter setzen). */
.ec-hero__oz-hinweis {
	margin-top: 0.35em !important;
	font-size: 0.8em;
}

/* Alle Überschriftgruppen liegen im selben Rasterfeld übereinander und sitzen an der
   Unterkante. So bleibt die Position fest, egal ob ein Motiv eine oder zwei Zeilen hat. */
.ec-hero__title {
	display: grid;
	/* Volle Spaltenbreite, damit sie nicht mit einer langen Zeile mitwächst – nur so
	   misst ec-hero.js den tatsächlich verfügbaren Platz und nicht sich selbst. */
	width: 100%;
	margin: 0;
	/* Design: 71 px in Myriad Black Condensed. Fira Sans Condensed baut deutlich
	   breiter, deshalb lange Zeit nur 54 px.
	   Seit die Überschrift in Groß-/Kleinschreibung steht (2026-08-08), läuft sie
	   schmaler und wirkt kleiner – daher auf **62 px** bei 1430 px Fensterbreite
	   angehoben (Wunsch des Nutzers).
	   ⚠️ **Maßgeblich ist der vw-Wert, nicht das Maximum.** Bis 1430 px greift
	   immer 4,3 vw; der rem-Wert deckelt nur darüber. Wer die Schrift ändern will,
	   muss den vw-Wert anfassen – am Maximum allein passiert nichts.
	   ⚠️ Mehr geht nicht ohne Schaden: Bei 62 px bricht „Direkt an der B101." in
	   zwei Balken (vier statt drei) – genau wie früher im Versalsatz. Darüber wird
	   der Abstand zur Info-Box zu knapp; gemessen sinkt er von 52 auf 32 px.
	   Die Spalte lässt sich auch nicht verbreitern: Sie ist exakt so breit wie die
	   Info-Box darüber, damit die Balken mit ihr fluchten (Screendesign). */
	font-size: clamp(1.75rem, 4.3vw, 3.9rem);
	/* Fira Sans Condensed Black läuft von Haus aus sehr eng – ohne Laufweite kleben die
	   Buchstaben im Balken aneinander. Der Wert ist eingependelt: 0,03em zu wenig,
	   0,045em zu viel, 0,035em noch zu wenig – 0,04em ist die Ansage.
	   ⚠️ Nach oben begrenzt der Platz: Bei 0,04em bleiben in der 469 px breiten Spalte
	   noch rund 13 px Luft, bei 0,045em nur 8 px. Danach verteilt ec-hero.js „Echt gut
	   für die" auf einen zusätzlichen Balken. */
	letter-spacing: 0.04em;
	text-align: left;
}

.ec-hero__slide-titel {
	grid-area: 1 / 1;
	align-self: end;
	justify-self: start;
	display: grid;
	justify-items: start;
	gap: 0.1em;
	/* Der Faktor kommt aus ec-hero.js: Passt die längste Zeile nicht in die Spalte,
	   wird die Überschrift so weit verkleinert, dass sie hineinpasst. Sonst müsste
	   die Redaktion beim Texten Zeichen zählen. */
	font-size: calc(1em * var(--ec-titel-skala, 1));
	opacity: 0;
	/* visibility, damit die verdeckten Gruppen keine Klicks abfangen. */
	visibility: hidden;
	transition: opacity 1.6s ease-in-out, visibility 1.6s;
}

.ec-hero__slide-titel.is-aktiv {
	opacity: 1;
	visibility: visible;
}

.ec-hero__line {
	display: inline-block;
	/* Der Balken umschließt im Design nur die Versalhöhe: Zeilenbox eng ziehen
	   und den Abstand über/unter der Schrift per Padding setzen. Deshalb darf eine
	   Zeile nie umbrechen – die Zeilen würden sich sonst überlagern. */
	line-height: 0.7;
	white-space: nowrap;
	padding: 0.15em 0.19em 0.16em;
	background: var(--wp--preset--color--primary);
	color: #fff;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

/* ---- Bis 1120 px: Das Bild **ist** der Hero, der Text liegt darauf ----

   Links die weiße Box mit Anschrift und Öffnungszeiten, rechts die Überschrift, beide
   unten im Bild; die Wechselpunkte darunter in der Mitte. Damit steht der Hero auf
   **keiner** Breite gestapelt: Bis hierher Bild mit Text darauf, darüber die
   Schreibtisch-Fassung mit der Textspalte rechts.

   Vorher stand hier das Gegenteil – Bild oben, Text darunter. Das war die Fassung, die
   dem Nutzer nicht gefallen hat: Der Hero bekam seine Größe aus Kästen statt aus dem Bild.

   ⚠️ **Die Höhe steuert den Bildausschnitt.** Das Familienmotiv (2015 × 855) zeigt die
   Familie auf den linken 57,5 %, rechts steht die leere gelbe Fläche, die am Schreibtisch
   den Text trägt. `object-position: left` schneidet von rechts weg, und wie viel sichtbar
   bleibt, hängt allein am **Verhältnis Höhe zu Breite**: bei 72 vw sind es 59 % – die
   ganze Familie. Wird der Hero höher, fällt zuerst die Mutter aus dem Bild.

   ⚠️ **Deshalb der Deckel `min(72vw, 32rem)`**: Ohne ihn wäre der Hero bei 1120 px
   806 px hoch. Der Deckel macht das Bild auf breiten Schirmen flacher – und zeigt damit
   sogar mehr vom Motiv (bei 1120 px 93 %).

   ⚠️ **Und deshalb die 60/40-Aufteilung.** Eine schmalere Box lässt die Öffnungszeiten
   mehrfach umbrechen, die Box wird hoch, der Text sprengt die 72 vw und der Hero wächst –
   gemessen bei 52/48: Box 281 px hoch, Hero 306 px, nur noch 54 % des Motivs, Mutter
   angeschnitten. */
@media (max-width: 70rem) {
	.ec-hero {
		min-height: min(72vw, 32rem);
		grid-template-columns: minmax(0, 1fr);
		align-items: stretch;
		padding: 0;
	}

	/* Wie am Schreibtisch: Die Motive liegen als Fläche hinter dem Text. */
	.ec-hero__slides {
		position: absolute;
		inset: 0;
		height: 100%;
		margin: 0;
	}

	.ec-hero__img,
	.ec-hero__img:first-child {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* links ausgerichtet: Beschnitten wird rechts, wo beim Familienmotiv nur die
		   leere gelbe Fläche steht. */
		object-position: left center;
	}

	/* Den dunklen Verlauf gibt es schon – er wird sonst nur beim Vollbild-Motiv
	   eingeblendet. Hier liegt der Text auf **jedem** Motiv, deshalb immer an und von
	   unten statt von der Seite. Ohne ihn steht weiße Schrift auf hellem Gelb. */
	.ec-hero__slides::after {
		opacity: 1;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.5) 100%);
	}

	/* Nur die weiße Box, unten mittig im Bild. Der untere Innenabstand hält die Zeile
	   über den Wechselpunkten frei. */
	.ec-hero__in {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		align-content: end;
		padding: 3.2vw var(--ec-rand) calc(3.2vw + 2.75rem);
		gap: 0;
	}

	/* ⚠️ Die Überschrift ist bis 1120 px **unsichtbar, aber vorhanden** (Wunsch des
	   Nutzers: hier soll nur die Box stehen). Bewusst kein `display: none`: Das h1 ist
	   die Hauptüberschrift der Seite – so bleibt es für Screenreader und Suchmaschinen
	   im Dokument. Die Motivüberschriften wechseln im Hintergrund weiter mit, das kostet
	   nichts. */
	.ec-hero__title {
		position: absolute;
		/* ⚠️ Nicht 1 px breit, wie sonst bei versteckten Elementen üblich: ec-hero.js
		   misst genau diese Breite und verteilt die Worte darauf. Bei 1 px landet jedes
		   Wort auf einem eigenen Balken und der Vorlesetext zerfällt in Einzelwörter.
		   Mit einer realistischen Breite bleiben die Zeilen so, wie sie gemeint sind. */
		width: min(30rem, 100%);
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
	}

	/* Ohne Überschrift daneben hat die Box die ganze Breite – bis 30 rem, danach wirkt
	   sie zerdehnt. In dieser Breite passen die Öffnungszeiten wieder einzeilig. */
	.ec-hero__box {
		max-width: min(30rem, 100%);
		gap: 2vw;
		padding: 2.2vw 2.4vw 2.4vw;
		border-width: 2px;
		font-size: clamp(0.9375rem, 3.9vw, 1.125rem);
	}

	.ec-hero__row {
		grid-template-columns: 1.5rem 1fr;
		gap: 0.4rem;
	}

	/* In der schmalen Spalte brechen die Öffnungszeiten um; ohne Nachhilfe bleibt „Uhr"
	   allein auf der letzten Zeile stehen. `pretty` zieht solche Schusterjungen hoch,
	   Browser ohne Unterstützung brechen wie bisher um. */
	.ec-hero__box p {
		text-wrap: pretty;
	}

	.ec-hero__icon--pin {
		width: 1.35rem;
	}

}

/* Telefon: Nur die Feinmaße, die sich von oben unterscheiden. Der Aufbau kommt aus dem
   Zweig darüber. */
@media (max-width: 37.5rem) {
	.ec-hero__icon--pin {
		width: 1.2rem;
	}
}

/* Punkte unten rechts im Hero: ein Punkt je Motiv, der aktive gefüllt. Die
   Trefferfläche ist bewusst größer als der sichtbare Punkt (44 px, Fingergröße). */
.ec-hero__punkte {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: clamp(0.5rem, 1.5vw, 1rem);
	display: flex;
	justify-content: center;
	gap: 0.15rem;
}

.ec-hero__punkt {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.ec-hero__punkt::before {
	content: "";
	width: 0.85rem;
	height: 0.85rem;
	border: 2px solid #fff;
	border-radius: 50%;
	background: transparent;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	transition: background 0.2s ease, transform 0.2s ease;
}

.ec-hero__punkt.is-aktiv::before,
.ec-hero__punkt:hover::before {
	background: #fff;
	transform: scale(1.1);
}

.ec-hero__punkt:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: -6px;
	border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
	.ec-hero__img,
	.ec-hero__slide-titel,
	.ec-hero__punkt::before {
		transition: none;
	}
}

/* ---- Logo-Band (acf/erzgebirgscenter-logo-band) ----
   Grünes Band, Höhe wie im Screendesign (100 pt ≙ 71 px). Die Logo-Dateien sind alle
   auf dieselbe Boxhöhe (100 px) normiert – deshalb genügt eine einheitliche Höhe,
   die Größenverhältnisse der Marken stimmen dann automatisch.

   Endlosschleife: Die Spur enthält die Liste mehrfach (`--ec-band-kopien`, gesetzt im
   render.php). Jede Liste trägt ihren Abstand rechts selbst (padding-right = gap),
   dadurch sind alle Kopien exakt gleich breit und eine Verschiebung um 1/Kopien
   ergibt einen nahtlosen Übergang. */
/* ⚠️ Die Untergrenze 3.25rem gilt erst ab etwa 1040 px (5vw), darunter greift sie
   immer – auf dem Telefon blieb das Band bei 52 px, die Logos maßen dann 23 px und der
   Namensfallback 13,5 px. Deshalb ein eigener Sockel für schmale Schirme. */
.ec-logoband {
	--ec-band-hoehe: clamp(3.25rem, 5vw, 4.45rem);
	--ec-band-abstand: clamp(2.5rem, 4.9vw, 4.4rem);
	--ec-band-kopien: 6;
	display: flex;
	align-items: center;
	height: var(--ec-band-hoehe);
	overflow: hidden;
	background: var(--wp--preset--color--footer);
	color: #fff;
}

/* Dauer kommt aus render.php und wächst mit der Zahl der Geschäfte – sonst liefe das
   Band mit jedem weiteren Eintrag schneller. Der Wert hier ist nur die Rückfalllinie. */
.ec-logoband__track {
	display: flex;
	width: max-content;
	animation: ec-logoband-lauf var(--ec-band-dauer, 60s) linear infinite;
}

@keyframes ec-logoband-lauf {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-100% / var(--ec-band-kopien)));
	}
}

/* Kein Anhalten bei Mauskontakt (Wunsch des Nutzers): Das Band zieht sich über die
   volle Breite, der Zeiger liegt ständig darauf und es wirkte wie ein Hänger. */

/* Wer Bewegung reduziert haben will, sieht das Band still stehen. */
@media (prefers-reduced-motion: reduce) {
	.ec-logoband__track {
		animation: none;
	}
}

.ec-logoband__list {
	/* Nicht schrumpfen: sonst rutschen die Kopien ineinander, weil die Logos
	   selbst ihre Breite behalten. */
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--ec-band-abstand);
	margin: 0;
	padding: 0 var(--ec-band-abstand) 0 0;
	list-style: none;
}

.ec-logoband__item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

/* Grundhöhe 45 % der Bandhöhe – die weißen Fassungen sind randlos zugeschnitten und
   säßen sonst Kante an Kante. Der Faktor kommt je Logo aus render.php und gleicht die
   *Fläche* an: Gleiche Höhe für alle sähe nicht einheitlich aus, sondern ließe breite
   Schriftzüge das Band beherrschen. Die Obergrenze hält kompakte Zeichen (Telekom-T,
   Apotheken-A) im Band. */
.ec-logoband__item img {
	height: calc(var(--ec-band-hoehe) * 0.45 * var(--ec-logo-faktor, 1));
	max-height: calc(var(--ec-band-hoehe) * 0.62);
	width: auto;
	max-width: none;
}

.ec-logoband__name {
	font-size: calc(var(--ec-band-hoehe) * 0.26);
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.ec-logoband__leer {
	margin: 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 37.5rem) {
	.ec-logoband {
		--ec-band-hoehe: 4rem;
		--ec-band-abstand: 2rem;
	}
}

/* ---- Willkommen (acf/erzgebirgscenter-intro) ---- */
.ec-intro {
	padding-block: var(--wp--preset--spacing--60);
}

.ec-intro__in {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: var(--ec-rand);
	text-align: center;
}

/* Der Umbruch kommt aus dem Feld (zwei Zeilen wie im Screendesign) – deshalb
   keine Breitenbegrenzung, die zusätzlich umbricht. */
.ec-intro__title {
	margin: 0 auto 1.5rem;
}

.ec-intro__text {
	max-width: 62ch;
	margin: 0 auto 2.5rem;
	text-align: left;
}

/* Schmaler als die Sektion (1200 px): So groß wie im Screendesign ist die Fläche
   nicht, dort steht sie über 720 px – 900 px ist der Mittelweg, den der Nutzer
   gewählt hat. Ein Wert, an dem sich die Größe ändern lässt. */
.ec-intro__media {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	border-radius: 0.5rem;
	overflow: hidden;
}

/* Die Medienfläche ist im Screendesign 16:9 – das Vorschaubild wird passend
   beschnitten, damit später ein Video an derselben Stelle sitzen kann. */
.ec-intro__media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.ec-intro__leer {
	display: grid;
	place-items: end center;
	aspect-ratio: 16 / 9;
	padding-bottom: 2rem;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Liegt ein Video vor, sitzt es an derselben Stelle wie sonst das Bild. */
.ec-intro__media video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--wp--preset--color--contrast);
}

.ec-intro__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}

/* Als <button> ist derselbe Knopf der Auslöser fürs Video – dann klickbar
   und mit der Tastatur erreichbar. Als <span> bleibt er reine Dekoration. */
button.ec-intro__play {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	pointer-events: auto;
}

/* Muss sein: `display: grid` weiter oben ist eine Autoren-Regel und schlägt die
   Browser-Regel `[hidden] { display: none }`. Ohne diese Zeile bleibt der Knopf
   beim Abspielen stehen, liegt über dem ganzen Video und fängt jeden Klick ab –
   die Steuerleiste ist dann nicht mehr erreichbar. */
.ec-intro__play[hidden] {
	display: none;
}

/* clamp statt fester 5.5rem: Auf dem Telefon ist das Video 201 px hoch, ein 88-px-Knopf
   nähme davon 44 % ein. Untergrenze 3.25rem = 52 px, immer noch weit über Fingergröße. */
.ec-intro__play svg {
	width: clamp(3.25rem, 14vw, 5.5rem);
	height: clamp(3.25rem, 14vw, 5.5rem);
	transition: transform 0.2s ease;
}

button.ec-intro__play:hover svg,
button.ec-intro__play:focus-visible svg {
	transform: scale(1.06);
}

button.ec-intro__play:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
	.ec-intro__play svg {
		transition: none;
	}

	button.ec-intro__play:hover svg,
	button.ec-intro__play:focus-visible svg {
		transform: none;
	}
}

.ec-intro__play circle {
	fill: rgba(255, 255, 255, 0.9);
}

.ec-intro__play polygon {
	fill: var(--wp--preset--color--primary);
}

/* ---- Centerplan (acf/erzgebirgscenter-centerplan) ---- */
.ec-centerplan {
	padding-block: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--secondary);
}

.ec-centerplan__in {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: var(--ec-rand);
	text-align: center;
}

.ec-centerplan__title {
	margin: 0 0 1rem;
}

.ec-centerplan__text {
	margin: 0 0 2rem;
}

.ec-centerplan__etagen {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

/* min-height 2.75rem = 44 px: Trefferfläche für den Daumen. Die Polsterung allein
   ergab 38 px – zu wenig, gemessen am Telefon. */
.ec-centerplan__etage {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.35rem 0.9rem;
	border: 2px solid transparent;
	border-radius: 0.4rem;
	background: none;
	font: inherit;
	font-weight: 700;
	color: var(--wp--preset--color--footer);
	cursor: pointer;
}

.ec-centerplan__etage.is-aktiv {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* ---- Lageplan (Inline-SVG) ----
   Eine einzige Szene: Umgebung, Gebäudeumriss und darüber die drei Etagen als
   Ebenen. Beim Umschalten wechselt nur die Ebene, das Bild steht still.
   Farben aus assets/centerplan/design.png abgenommen. */
/*
 * Der Plan darf breiter als das Textmaß sein – er steht deshalb außerhalb von
 * .ec-centerplan__in (siehe render.php). Der Innenabstand hält ihn auf schmalen Schirmen
 * von der Kante weg – bisher kam der von __in.
 *
 * ⚠ Die 1150 px sind das **Maß des SVG**, nicht des Kastens. Seit box-sizing global auf
 * border-box steht (2026-08-19), zöge `max-width: 1150px` den Innenabstand mit hinein und
 * der Plan wäre 32 px schmaler als vom Nutzer festgelegt. Deshalb die Polsterung in der
 * Rechnung – wer den Rand ändert, muss hier nichts nachziehen.
 *
 * ⚠ 1150 statt früher 1600 px. Seit die Kulisse enger zugeschnitten ist (viewBox in
 * kulisse.svg), ist die Szene 1,41 : 1 statt 1,92 : 1 – bei gleicher Breite wüchse der
 * Plan also um 300 px in die Höhe. Erst standen hier 1400 px, das war dem Nutzer zu
 * groß (2026-08-18). Mit 1150 px ist der Block **niedriger als vor dem Zuschnitt**
 * (816 statt 832 px), das Gebäude darin aber immer noch deutlich größer als damals
 * (rund 610 statt 471 px). Wer hier aufdreht, bekommt einen hohen Block – nachmessen.
 */
.ec-centerplan__plan {
	max-width: calc(1150px + 2 * var(--ec-rand));
	margin-inline: auto;
	padding-inline: var(--ec-rand);
}

.ec-plan {
	/* ⚠ Grund und Park teilen sich bewusst denselben Ton (2026-08-18, Wunsch des
	   Nutzers). Das Designbild unterscheidet die Umgebung (#d8dcd7, leicht grünlich) von
	   den Parkflächen (#e2e3e2, neutral) – im engeren Ausschnitt trafen beide Töne
	   großflächig aufeinander und sahen aus wie ein Fehler statt wie eine Angabe.
	   Die Straßen (--ec-plan-weg) bleiben hell abgesetzt, sonst verschwindet das
	   Wegenetz. Wer die Unterscheidung zurückholen will: hier wieder #d8dcd7. */
	--ec-plan-grund: #e2e3e2;
	--ec-plan-park: #e2e3e2;
	--ec-plan-weg: #f7f8f7;
	--ec-plan-mall: #c7c7c6;
	--ec-plan-frei: #d6e2b8;
	--ec-plan-belegt: #becd79;
	--ec-plan-aktiv: #9ec043;
	--ec-plan-kante: #575656;
	--ec-plan-schrift: #8b8f8a;

	display: block;
	width: 100%;
	height: auto;
	font-family: var(--wp--preset--font-family--body);
}

/* Umgebung */
/* Grundfläche über die ganze Szene: Sie liegt hinter allem und verhindert, dass
   irgendwo der weiße Seitenhintergrund durchscheint. */
.ec-plan__grund {
	fill: var(--ec-plan-grund);
}

/* ⚠ Die Konturen sind kein Zierrat, sie schließen Fugen.
   Die Kulisse wird aus design.png vektorisiert; beim Begradigen (tools/kulisse-begradigen.py)
   wandern die Ränder benachbarter Flächen um Bruchteile einer Einheit auseinander. Übrig
   bleiben haarfeine Spalten, durch die der Hintergrund scheint – im fertigen Bild sah das
   aus wie ein zweiter, hellerer Grauton entlang der Straßen (vom Nutzer am 2026-08-18
   gemeldet). Ein Strich in der **eigenen** Füllfarbe lässt jede Fläche um eine halbe
   Strichbreite wachsen und deckt die Fuge zu. Bei 1240 Einheiten Bildbreite fällt der
   Zuwachs von 0,75 Einheiten nicht auf. */
.ec-plan__gruen {
	fill: var(--ec-plan-grund);
	stroke: var(--ec-plan-grund);
	stroke-width: 1.5;
}

.ec-plan__park {
	fill: var(--ec-plan-park);
	stroke: var(--ec-plan-park);
	stroke-width: 1.5;
}

.ec-plan__weg {
	fill: var(--ec-plan-weg);
	stroke: var(--ec-plan-weg);
	stroke-width: 1.5;
}

.ec-plan__strassenname,
.ec-plan__bereichsname {
	fill: var(--ec-plan-schrift);
	font-weight: 700;
}

.ec-plan__strassenname.is-gross {
	fill: #7c807b;
}

.ec-plan__bereichsname {
	fill: #9aa09a;
	letter-spacing: 0.14em;
}

/* Gebäude: Umriss und Verkehrsflächen */
.ec-plan__umriss,
.ec-plan__nebenflaeche {
	fill: var(--ec-plan-mall);
	stroke: var(--ec-plan-kante);
	stroke-width: 0.8;
	stroke-miterlimit: 10;
}

.ec-plan__etage[data-ec-verborgen] {
	display: none;
}

/* Mietflächen. Ohne Geschäft bleibt die Fläche blass und stumm – kein Zeiger,
   kein Fokus, kein Tooltip. Sonst sähe der Plan „kaputt" aus, solange die
   Zuordnung unvollständig ist. */
.ec-plan__flaeche {
	fill: var(--ec-plan-frei);
	stroke: var(--ec-plan-kante);
	stroke-width: 0.8;
	stroke-miterlimit: 10;
	transition: fill 0.15s ease;
}

.ec-plan__flaeche.is-belegt {
	fill: var(--ec-plan-belegt);
}

.ec-plan__bereich.is-belegt {
	cursor: pointer;
}

/* ⚠️ Der Farbwechsel steht in `hover: hover`, die Auswahl daneben. Ohne die Abfrage
   bleibt auf Touch-Geräten nach einem Tipp die Aktiv-Färbung stehen („klebendes
   Hover") – die Fläche sieht dann dauerhaft ausgewählt aus, obwohl sie es nicht ist. */
@media (hover: hover) {
	.ec-plan__bereich.is-belegt:hover .ec-plan__flaeche {
		fill: var(--ec-plan-aktiv);
	}
}

.ec-plan__bereich.is-belegt:focus-visible .ec-plan__flaeche {
	fill: var(--ec-plan-aktiv);
}

/* `outline` auf SVG-Gruppen ist browserabhängig – der Fokus wird deshalb an der
   Fläche selbst gezeigt. ⚠️ Auch `:focus`, nicht nur `:focus-visible`: Schließt sich die
   Visitenkarte, gibt der Browser den Fokus an die Fläche zurück und Chrome zeichnet
   dann einen Rahmen um die ganze Gruppe – samt der unsichtbaren Sprechblase, also
   deutlich größer als der Laden (Meldung des Nutzers, 2026-09-16). */
.ec-plan__bereich:focus,
.ec-plan__bereich:focus-visible {
	outline: none;
}

.ec-plan__bereich.is-belegt:focus-visible .ec-plan__flaeche {
	stroke: var(--wp--preset--color--primary-dark);
	stroke-width: 3;
}

/* Sprechblase mit dem Ladenlogo. Erscheint beim Überfahren und bei Tastaturfokus –
   dauerhaft würden sich zwei Dutzend Blasen überlagern. */
.ec-plan__blase {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.ec-plan__blase-grund {
	fill: #fff;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.ec-plan__blase-name {
	fill: var(--wp--preset--color--primary);
	font-size: 15px;
	font-weight: 700;
}

@media (hover: hover) {
	.ec-plan__bereich.is-belegt:hover .ec-plan__blase {
		opacity: 1;
	}
}

.ec-plan__bereich.is-belegt:focus-visible .ec-plan__blase {
	opacity: 1;
}

/* Bei Tastaturfokus hängt ec-centerplan.js die Blase in eine Ebene über allem um –
   dort greift der Selektor oben nicht mehr, weil sie nicht mehr in der Fläche steckt. */
.ec-plan__blase.is-oben {
	opacity: 1;
}

/* Piktogramme */
.ec-plan__marke-grund {
	fill: var(--ec-plan-kante);
}

.ec-plan__marke-grund.is-blau {
	fill: #1a6fc4;
}

.ec-plan__marke-zeichen {
	fill: var(--ec-plan-kante);
}

.ec-plan__markentext {
	fill: #1a6fc4;
	font-size: 15px;
	font-weight: 600;
}

.ec-centerplan__hinweis {
	margin: 1.5rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* ---- Anfahrt (acf/erzgebirgscenter-anfahrt) ----
   Randlos zweigeteilt: links das Foto, rechts die Karte, beide über die volle
   Höhe der Section. Die Karte ist ein lokal erzeugtes Bild – beim Seitenaufruf
   geht keine Anfrage an Google oder einen Kachelserver. */
.ec-anfahrt {
	background: var(--wp--preset--color--secondary);
}

.ec-anfahrt__in {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: clamp(18rem, 33.8vw, 32rem);
}

/* Unter 48 rem rutscht die Karte unter das Foto, beide im Bildformat 3 : 2. */
@media (max-width: 48rem) {
	.ec-anfahrt__in {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.ec-anfahrt__bild,
	.ec-karte {
		aspect-ratio: 3 / 2;
	}
}

.ec-anfahrt__bild,
.ec-karte {
	position: relative;
	margin: 0;
	display: block;
	overflow: hidden;
}

/* Beide Hälften füllen ihre Fläche vollständig – der Zuschnitt sitzt mittig,
   damit die Nadel auf der Karte an der richtigen Stelle bleibt. */
.ec-anfahrt__bild img,
.ec-karte__bild {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Überschrift liegt über dem Foto, unten links – wie im Hero und auf gleicher Höhe
   wie die Adressbox in der rechten Hälfte. */
.ec-anfahrt__bild figcaption {
	position: absolute;
	left: clamp(1rem, 3vw, 2.5rem);
	right: clamp(1rem, 3vw, 2.5rem);
	bottom: clamp(1rem, 3vw, 2.5rem);
}

.ec-anfahrt__title {
	display: grid;
	justify-items: start;
	gap: 0.1em;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.3rem, 3.3vw, 3rem);
	/* Dieselbe Schnittschrift wie im Hero, also dieselbe Laufweite. */
	letter-spacing: 0.04em;
}

/* ⚠️ Anders als im Hero steht hier **kein** `white-space: nowrap` und es gibt kein JS,
   das die Zeilen neu verteilt. Die enge Zeilenhöhe 0.7 ist aber genau darauf gebaut,
   dass nie umbrochen wird – sonst überlagern sich die beiden Zeilen innerhalb eines
   Balkens. `box-decoration-break: clone` gibt jeder Zeile ihre eigene Polsterung, und
   auf dem Telefon (wo es am ehesten umbricht) läuft die Zeilenhöhe wieder normal. */
.ec-anfahrt__line {
	display: inline;
	line-height: 0.7;
	max-width: 100%;
	padding: 0.15em 0.19em 0.16em;
	background: var(--wp--preset--color--primary);
	color: #fff;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

@media (max-width: 37.5rem) {
	.ec-anfahrt__line {
		line-height: 1.2;
	}

}

/* Die Überschrift liegt auf dem Foto und ist das Erste, was man dort liest – mit der
   Untergrenze von 1.3 rem (20,8 px) wirkte sie neben dem Bild verloren. Eigene Kurve,
   solange das Foto über die **volle Breite** läuft: 25,6 px bei 320 px Schirm, knapp
   29 px bei 390 px, gedeckelt bei 30,4 px.
   ⚠️ Dieselbe Grenze wie der Layoutwechsel darüber (48 rem) – ab da steht das Foto in
   der halben Breite, und die längste Zeile liefe mit dieser Kurve aus dem Bild.
   ⚠️ Deshalb auch nicht einfach die vw-Kurve der Grundregel steiler stellen. */
@media (max-width: 48rem) {
	.ec-anfahrt__title {
		font-size: clamp(1.6rem, 7.4vw, 1.9rem);
	}
}

/* Die ganze Karte ist der Link zur Routenführung. */
.ec-karte {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.ec-karte:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: -3px;
}

/* Nadel: reines CSS, damit sie scharf bleibt und in Hausfarbe steht. Die Spitze
   soll genau auf der Bildmitte sitzen. Mit Rahmen ist die Nadel 30 px breit; um
   45° gedreht misst sie diagonal 42 px, die Spitze liegt also 21 px unter ihrem
   Mittelpunkt. Versatz: halbe Breite nach links (15 px), halbe Höhe plus
   Diagonalanteil nach oben (15 + 21 = 36 px). */
.ec-karte__nadel {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.5rem;
	height: 1.5rem;
	margin: -36px 0 0 -15px;
	border: 3px solid #fff;
	border-radius: 50% 50% 50% 0;
	background: var(--wp--preset--color--primary);
	transform: rotate(-45deg);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Adresse und Knopf liegen als weiße Karte auf der Karte – unten links,
   auf derselben Höhe wie die Überschrift in der linken Hälfte. */
/* ⚠️ `right` und `max-width` sind Pflicht: Ohne sie wächst die Box mit dem Inhalt nach
   rechts aus der Karte heraus (die Adresse kommt aus dem Feld und kann länger werden)
   und wird vom `overflow: hidden` der Karte abgeschnitten. */
.ec-karte__box {
	position: absolute;
	left: clamp(1rem, 3vw, 2.5rem);
	right: clamp(1rem, 3vw, 2.5rem);
	bottom: clamp(1rem, 3vw, 2.5rem);
	max-width: max-content;
	display: grid;
	justify-items: start;
	gap: 1rem;
	padding: 1rem 1.25rem 1.25rem;
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 0.15rem 0.7rem rgba(0, 0, 0, 0.25);
	line-height: 1.5;
}

/* Pill-Knopf wie im Projekt üblich: weiß mit grünem Rand. Bewusst ein <span>,
   der Klick kommt vom umgebenden Link. */
.ec-karte__cta {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 1.6rem;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	transition: background 0.16s ease, color 0.16s ease;
}

.ec-karte:hover .ec-karte__cta,
.ec-karte:focus-visible .ec-karte__cta {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* ---- Seitenbild (acf/erzgebirgscenter-seitenbild) ----
   Bildband als Auftakt einer Unterseite. Die Höhe kommt aus dem Feld am Block;
   „hoch" entspricht dem Hero der Startseite. */
.ec-seitenbild {
	margin-block: 0;
	overflow: hidden;
}

.ec-seitenbild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Ein flaches Band zeigt nur einen Streifen des Bildes. Welcher das ist, kommt aus
   dem Feld am Block – bei einem Schriftzug über dem Eingang etwa „oben". */
.ec-seitenbild--oben img {
	object-position: center 8%;
}

.ec-seitenbild--unten img {
	object-position: center 78%;
}

.ec-seitenbild--schmal {
	height: clamp(11rem, 25vw, 22rem);
}

.ec-seitenbild--mittel {
	height: clamp(14rem, 33vw, 28rem);
}

.ec-seitenbild--hoch {
	height: clamp(20rem, 42.4vw, 37.9rem);
}

/* ---- Shop-Kacheln (acf/erzgebirgscenter-shopgitter) ----
   Kachel = Ladenfoto mit Logo darauf, Name darunter. Die ganze Kachel ist ein
   Button und öffnet dieselbe Visitenkarte wie Startseite und Centerplan. */
.ec-shopgitter {
	padding-block: var(--wp--preset--spacing--60);
}

.ec-shopgitter__in {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: var(--ec-rand);
}

.ec-shopgitter__title {
	margin: 0 0 2rem;
}

/* Zwei Spalten: links die Kategorie-Navigation, rechts die Kacheln. */
.ec-shopgitter__spalten {
	display: grid;
	grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: start;
}

/* Klebt beim Scrollen unter dem Kopfbereich – der ist selbst sticky, deshalb der
   Abstand. Die WordPress-Leiste kommt oben drauf, sonst verschiebt sich der Abstand
   für eingeloggte Nutzer um deren Höhe.

   ⚠️ Die Höhe kommt aus --ec-header-hoehe (von ec-header.js gemessen). Vorher stand
   hier die feste Desktop-Zahl 113 px; der Balken ist aber je nach Breite flacher. */
.ec-shopnav {
	position: sticky;
	top: calc(var(--ec-header-hoehe, 113px) + 1.5rem + var(--ec-adminleiste, 0px));
}

.ec-shopnav ul {
	display: grid;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ec-shopnav a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border-left: 3px solid transparent;
	border-radius: 0 0.35rem 0.35rem 0;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	text-decoration: none;
	transition: background 0.16s ease, color 0.16s ease;
}

.ec-shopnav a:hover,
.ec-shopnav a:focus-visible {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
}

.ec-shopnav a.is-aktiv {
	border-left-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
}

.ec-shopnav__zahl {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

/* Unter 60 rem liegt die Navigation als Zeile über den Kacheln. */
@media (max-width: 60rem) {
	.ec-shopgitter__spalten {
		grid-template-columns: minmax(0, 1fr);
	}

	.ec-shopnav {
		position: static;
	}

	.ec-shopnav ul {
		grid-auto-flow: column;
		grid-auto-columns: max-content;
		gap: 0.5rem;
		overflow-x: auto;
		padding-bottom: 0.5rem;
	}

	.ec-shopnav a {
		border-left: 0;
		border-radius: 999px;
		background: var(--wp--preset--color--secondary);
		white-space: nowrap;
	}

	.ec-shopnav a.is-aktiv {
		background: var(--wp--preset--color--primary);
		color: #fff;
	}

	.ec-shopnav a.is-aktiv .ec-shopnav__zahl {
		color: rgba(255, 255, 255, 0.75);
	}
}

.ec-shopgitter__gruppe + .ec-shopgitter__gruppe {
	margin-top: 2.5rem;
}


.ec-shopgitter__cat {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--medium);
}

/* auto-fill statt fester Spaltenzahl: eine Spalte am Telefon, vier bis fünf am
   Schreibtisch – ohne eigene Umbruchpunkte. */
.ec-shopgitter__gitter {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
}

.ec-shopgitter__kachel {
	display: grid;
	/* ⚠ align-content: start ist Pflicht. Das Gitter zieht alle Kacheln einer Reihe auf
	   die Höhe der höchsten – ein Ladenname, der auf zwei Zeilen umbricht, macht die
	   ganze Reihe höher. Ohne diese Zeile verteilt sich der Zuwachs auf die Rasterzeilen,
	   die Bildbox wächst mit, das Bild darin bleibt wegen `aspect-ratio: 3 / 2` aber
	   gleich hoch – unter dem Foto stand ein weißer Streifen (bei Rossmann und Apotheke
	   neben dem langen Praxisnamen genau 10 px). So bleiben Bild und Name oben, und der
	   überschüssige Platz fällt unter den Namen, wo er nicht auffällt. */
	align-content: start;
	gap: 0.6rem;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	transition: transform 0.16s ease;
}

.ec-shopgitter__bild {
	position: relative;
	display: block;
	border-radius: 0.5rem;
	overflow: hidden;
	box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.12);
	transition: box-shadow 0.16s ease;
}

.ec-shopgitter__bild img,
.ec-shopgitter__leer {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Kachel ohne Ladenfoto: gleiche Fläche, darin der Hinweis. Der Text sitzt in der
   oberen Hälfte – unten links liegt die Markenbox mit Logo bzw. Name. */
.ec-shopgitter__leer {
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--secondary);
}

.ec-shopgitter__hinweis {
	padding: 0 1rem;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 900;
	line-height: 1.15;
	text-align: center;
}

/* Liegt unten links eine Markenbox, rückt der Text um deren Höhe nach oben – sonst
   stünde er auf ihr. Ohne Box (kein Foto *und* kein Logo) bleibt er exakt mittig. */
.ec-shopgitter__bild:has(.ec-shopgitter__marke) .ec-shopgitter__hinweis {
	padding-bottom: 2.5rem;
}

/* Weiße Box wie in der Visitenkarte – Logo oder, wenn keins da ist, der Name. */
.ec-shopgitter__marke {
	position: absolute;
	left: 0.6rem;
	bottom: 0.6rem;
	max-width: 70%;
	padding: 0.35rem 0.55rem;
	border-radius: 0.35rem;
	background: #fff;
	box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.25);
}

.ec-shopgitter__marke img {
	display: block;
	max-width: 100%;
	max-height: 1.9rem;
	width: auto;
	aspect-ratio: auto;
	object-fit: contain;
}

.ec-shopgitter__marke span {
	display: block;
	color: var(--wp--preset--color--primary);
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.2;
}

.ec-shopgitter__name {
	color: var(--wp--preset--color--primary);
	font-size: 1.05rem;
	font-weight: 700;
}

.ec-shopgitter__kachel:hover,
.ec-shopgitter__kachel:focus-visible {
	transform: translateY(-2px);
}

.ec-shopgitter__kachel:hover .ec-shopgitter__bild,
.ec-shopgitter__kachel:focus-visible .ec-shopgitter__bild {
	box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.22);
}

.ec-shopgitter__kachel:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
	border-radius: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.ec-shopgitter__kachel,
	.ec-shopgitter__bild {
		transition: none;
	}

	.ec-shopgitter__kachel:hover,
	.ec-shopgitter__kachel:focus-visible {
		transform: none;
	}
}

/* ---- Kontakt (acf/erzgebirgscenter-kontakt) ----
   Links die Angaben, rechts die Karte aus inc/karte.php. */
.ec-kontakt {
	padding-block: var(--wp--preset--spacing--60);
}

.ec-kontakt__in {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: var(--ec-rand);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: start;
}

@media (max-width: 48rem) {
	.ec-kontakt__in {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ec-kontakt__daten {
	display: grid;
	justify-items: start;
	gap: 1.25rem;
}

.ec-kontakt__title {
	margin: 0;
}

.ec-kontakt__adresse,
.ec-kontakt__mail,
.ec-kontakt__hinweis,
.ec-kontakt__oz {
	margin: 0;
	line-height: 1.6;
}

.ec-kontakt__zeiten {
	display: grid;
	gap: 0.25rem;
}

.ec-kontakt__zeiten-titel {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

.ec-kontakt__oz-hinweis {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Die Zeiten der großen Läden unter den Kernöffnungszeiten (Kundenwunsch 2026-09-16):
   ein Block je Geschäft, enger gesetzt als die übrigen Absätze der Spalte. */
.ec-kontakt__zeiten--shop {
	margin-top: -0.5rem;
}

.ec-kontakt__mail a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.ec-kontakt__hinweis {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Auf der Kontaktseite steht die Karte in einer Spalte statt über die halbe
   Section – deshalb hier ein Seitenverhältnis und runde Ecken. */
.ec-kontakt__karte .ec-karte {
	aspect-ratio: 3 / 2;
	border-radius: 0.5rem;
}

/* ---- Shop-Übersicht (acf/erzgebirgscenter-shops) ---- */
.ec-shops {
	padding-block: var(--wp--preset--spacing--60);
}

/* Zwischen Screendesign (720 px) und voller Inhaltsbreite: schmal genug, dass die drei
   Spalten als Block mittig wirken, aber nicht so klein wie im Layout. */
.ec-shops__in {
	max-width: 64rem;
	margin-inline: auto;
	padding-inline: var(--ec-rand);
}

/* 4 rem sind am Schreibtisch der Abstand aus dem Layout; auf dem Telefon wären 64 px
   ein Loch zwischen Überschrift und erster Kategorie. */
.ec-shops__title {
	margin: 0 0 clamp(1.75rem, 6vw, 4rem);
	text-align: center;
}

/* Drei Textspalten wie im Screendesign: die Kategorieblöcke fließen nacheinander
   durch die Spalten (Reihenfolge siehe erzgebirgscenter_shop_kategorien()) und werden
   nie auseinandergerissen. Auf schmalen Bildschirmen bleiben automatisch weniger
   Spalten übrig, weil jede mindestens 14 rem breit sein muss. */
.ec-shops__cols {
	columns: 16rem 3;
	column-gap: 3rem;
	/* 22 px waren für drei Spalten am Schreibtisch gedacht. Einspaltig auf dem Telefon
	   wirkt das wie eine Speisekarte – dort 18 px. */
	font-size: clamp(1.125rem, 3.6vw, 1.375rem);
}

.ec-shops__group {
	break-inside: avoid;
	margin-bottom: 2rem;
}

.ec-shops__cat {
	margin: 0 0 1rem;
	font-size: clamp(1.125rem, 3.6vw, 1.375rem);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

.ec-shops__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Die Zeilen sind das Ziel für den Finger: 0.15 rem Polsterung ergaben 31 px Höhe.
   min-height statt mehr Polsterung, damit der Textblock optisch eine Liste bleibt. */
.ec-shops__item {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	width: 100%;
	padding: 0.15rem 0;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.ec-shops__item:hover,
.ec-shops__item:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* ---- Pop-up (Shop-Details) ----
   Kein eigenes `position` setzen: der Browser stellt modale Dialoge mit
   `position: fixed` mittig ins Bild. Ein Autor-Style gewinnt dagegen, der Dialog
   stünde dann im Textfluss und die Seite springt beim Öffnen dorthin.
   Für den absolut gesetzten Schließen-Button genügt das `fixed` des Dialogs. */
.ec-shop-dialog {
	/* 38rem statt 32rem: bei 32rem blieben neben dem 10rem-Label nur ~17rem für den
	   Wert – die längste Adresse (intersport.erzgebirgscenter@gmail.com) lief heraus. */
	width: min(38rem, calc(100vw - 2rem));
	padding: 0;
	border: 0;
	border-radius: 0.75rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.25);
	/* auto statt hidden: lange Texte bleiben im Pop-up scrollbar. */
	overflow: auto;
}

/* Rahmen für Foto + Markenbox – die Box wird darin absolut gesetzt. */
.ec-shop-dialog__bild {
	position: relative;
}

/* Logo unten links auf dem Foto, auf Weiß, damit es sich gegen jedes Bild
   durchsetzt. Fehlt das Logo, steht der Ladenname in derselben Box. */
.ec-shop-dialog__marke {
	position: absolute;
	bottom: 0.75rem;
	/* Bündig mit Name und Text darunter – das ist das Seitenpolster von
	   .ec-shop-dialog__in. Ändert sich das dort, muss es hier mitwandern. */
	left: 2rem;
	max-width: 60%;
	padding: 0.5rem 0.75rem;
	border-radius: 0.5rem;
	background: #fff;
	box-shadow: 0 0.15rem 0.6rem rgba(0, 0, 0, 0.25);
}

.ec-shop-dialog__marke img {
	display: block;
	max-width: 100%;
	max-height: 2.5rem;
	width: auto;
	object-fit: contain;
}

.ec-shop-dialog__marke span {
	display: block;
	color: var(--wp--preset--color--primary);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.25;
}

/* Headerbild sitzt randlos ganz oben in der Visitenkarte und rundet selbst mit. */
.ec-shop-dialog__header {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 0.75rem 0.75rem 0 0;
}

/* Kein Ladenfoto: derselbe 3:2-Platz, aber als ruhige Fläche mit Hinweis. Die Höhe
   bleibt gleich, damit die Karte mit und ohne Foto identisch aufgebaut ist – das
   Logo unten links sitzt in beiden Fällen an derselben Stelle. */
.ec-shop-dialog__bild--leer {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 2;
	border-radius: 0.75rem 0.75rem 0 0;
	background: var(--wp--preset--color--secondary);
}

.ec-shop-dialog__hinweis {
	padding: 0 1.5rem;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 900;
	line-height: 1.15;
	text-align: center;
}

/* Wie bei der Kachel: Platz für die Markenbox unten links, aber nur wenn es sie gibt. */
.ec-shop-dialog__bild--leer:has(.ec-shop-dialog__marke) .ec-shop-dialog__hinweis {
	padding-bottom: 3rem;
}

.ec-shop-dialog::backdrop {
	background: rgba(0, 32, 20, 0.55);
}

/* 2 rem beidseits lassen auf einem 390-px-Schirm nur 264 px Textbreite übrig –
   die Datenzeilen (Öffnungszeiten, E-Mail) werden dann unnötig zerrissen. */
.ec-shop-dialog__in {
	position: relative;
	padding: clamp(1.25rem, 5vw, 2rem) clamp(1.25rem, 5vw, 2rem) clamp(1.5rem, 5.5vw, 2.25rem);
}

/* Liegt über dem Headerbild, deshalb eigener heller Kreis als Untergrund. */
.ec-shop-dialog__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 1;
	display: grid;
	place-items: center;
	/* 44 px Trefferfläche (vorher 36) – der Kreis darunter bleibt optisch gleich groß. */
	width: 2.75rem;
	height: 2.75rem;
	padding: 0 0 0.15rem;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.2);
	font-size: 1.6rem;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
}

.ec-shop-dialog__close:hover,
.ec-shop-dialog__close:focus-visible {
	background: #fff;
}

.ec-shop-dialog__title {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--large);
}

.ec-shop-dialog__text {
	margin: 0 0 1.25rem;
}

.ec-shop-dialog__data {
	margin: 0;
	display: grid;
	gap: 0.5rem;
}

.ec-shop-dialog__row {
	display: grid;
	grid-template-columns: 10rem 1fr;
	gap: 0.5rem;
}

.ec-shop-dialog__row dt {
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

/* Sicherheitsnetz für den Fall, dass doch einmal eine noch längere Adresse kommt:
   E-Mails und URLs haben keine Trennstellen, ohne das hier laufen sie aus der Box. */
.ec-shop-dialog__row dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

@media (max-width: 30rem) {
	.ec-shop-dialog__row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* Editor-Hinweis, wenn ein Block noch nicht befüllt ist. */
.ec-block-placeholder {
	padding: 1.25rem;
	border: 1px dashed var(--wp--preset--color--muted);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.ec-rechtstext h2 {
	margin-top: 2.5em;
	font-size: var(--wp--preset--font-size--large);
}

.ec-rechtstext h3 {
	margin-top: 1.75em;
	font-size: var(--wp--preset--font-size--medium);
}

.ec-rechtstext li {
	margin-bottom: 0.5rem;
}

/* Redaktioneller Prüfhinweis – bewusst außerhalb der Farbpalette und bewusst laut.
   Steht sichtbar auf der Seite und muss vor dem Livegang raus: die passende
   „> PRÜFEN:"-Zeile in assets/texte/*.md löschen und neu einspielen. */
.ec-pruefhinweis {
	--ec-pruefrot: #b3261e;

	margin-block: 1.5rem;
	padding: 1rem 1.25rem;
	border-left: 6px solid var(--ec-pruefrot);
	border-radius: 0 0.35rem 0.35rem 0;
	background: #fdeceb;
	color: var(--ec-pruefrot);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.ec-pruefhinweis::before {
	content: "⚠ Zu prüfen: ";
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ec-pruefhinweis a {
	color: inherit;
}