/* ==========================================================================
   merz-marken — Markenraster aus nativen Containern (Verhalten: merz-marken.js)

   Maße, Farben, Hintergrund und Spalten stehen als Einstellungen an den
   Elementen. Hier nur, wofür es kein Control gibt: Ausgrauen, aktiver
   Filterknopf, Lightbox-Gerüst.
   ========================================================================== */

/* Kachel */
.merz-marken .merz-marke {
	cursor: pointer;
	transition: opacity .45s ease, transform .45s ease, filter .45s ease;
}
.merz-marken .merz-marke.is-dimmed { opacity: .15; transform: scale(.94); filter: grayscale(1); }
.merz-marken .merz-marke:focus-visible { outline: 3px solid var(--merz-dunkelgrau); outline-offset: 3px; }
/* Der Lightbox-Inhalt steht in der Kachel und ist dort über Erweitert →
   Responsive auf allen Geräten ausgeblendet; die Kopie verliert diese Klassen. */

/*
 * Im Elementor-Editor.
 *
 * Der Editor zeigt „auf allen Geräten ausgeblendete" Elemente trotzdem —
 * halbtransparent und in voller Größe. Der Lightbox-Text schob dadurch das
 * Logo aus der Kachel und lag über dem Raster (gemeldet 24.09.2026).
 *
 * Deshalb: im Editor unsichtbar, bis man die Kachel oder etwas darin
 * auswählt. Dann liegt er als weiße Fläche über der Kachel und ist direkt
 * bearbeitbar. Auswahl auch über den Navigator: „Marke — … → Lightbox-Inhalt".
 */
body.elementor-editor-active .merz-marken .merz-marke { position: relative; }
body.elementor-editor-active .merz-marken .merz-marke > .merz-marke__lightbox { display: none !important; }
body.elementor-editor-active .merz-marken .merz-marke.elementor-element-editable > .merz-marke__lightbox,
body.elementor-editor-active .merz-marken .merz-marke:has(.elementor-element-editable) > .merz-marke__lightbox {
	display: flex !important;
	position: absolute;
	inset: 0;
	z-index: 5;
	overflow: auto;
	opacity: 1 !important;
	background: var(--merz-weiss);
	border-radius: var(--radius, 5px);
	box-shadow: inset 0 0 0 2px var(--merz-rot);
}
/* Kleine Kacheln sind für den ganzen Text zu niedrig — zum Bearbeiten wächst
   die Fläche nach unten über die Nachbarkacheln hinaus. */
body.elementor-editor-active .merz-marken .merz-marke:has(.elementor-element-editable) > .merz-marke__lightbox,
body.elementor-editor-active .merz-marken .merz-marke.elementor-element-editable > .merz-marke__lightbox {
	bottom: auto;
	min-height: 100%;
}
body.elementor-editor-active .merz-marken .merz-marke:has(.elementor-element-editable),
body.elementor-editor-active .merz-marken .merz-marke.elementor-element-editable { overflow: visible; z-index: 6; }

/* Aktiver Filterknopf: gefüllt rot wie Primär (0,4,0 schlägt die Ausprägung) */
.merz-marken .merz-btn.is-active .elementor-button,
.merz-marken .merz-btn.is-active .elementor-button:hover,
.merz-marken .merz-btn.is-active .elementor-button:focus {
	background-color: var(--merz-rot);
	color: var(--merz-weiss);
	box-shadow: none;
}
.merz-marken [data-filter] .elementor-button { cursor: pointer; }

/* Lightbox */
.merz-marken__lb {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, .55);
	opacity: 0;
	transition: opacity .25s ease;
}
.merz-marken__lb[hidden] { display: none; }
.merz-marken__lb.is-open { opacity: 1; }
.merz-marken__lb-karte {
	width: 620px;
	max-width: 100%;
	max-height: calc(100vh - 32px);
	overflow: auto;
	background: var(--merz-weiss);
	border-radius: var(--radius, 5px);
	transform: scale(.96);
	transition: transform .25s ease;
}
.merz-marken__lb.is-open .merz-marken__lb-karte { transform: scale(1); }
.merz-marken__lb-kopf {
	height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	box-sizing: border-box;
	background-size: cover;
	background-repeat: no-repeat;
}
.merz-marken__lb-kopf img { max-width: 70%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.merz-marken__lb-inhalt > .merz-marke__lightbox { display: flex; }
.merz-marken__lb-schliessen { margin-left: auto; }
/* Beim Öffnen bekommt „Schließen" den Fokus; `:focus` sieht in merz-elementor.css
   wie `:hover` aus. Ohne sichtbaren Tastaturfokus bleibt es beim Outline. */
.merz-marken__lb-schliessen .elementor-button:focus:not(:focus-visible):not(:hover) {
	background-color: transparent;
	color: var(--merz-rot);
}
@media (max-width: 767px) {
	.merz-marken__lb-kopf { height: 200px; }
}