/* ==========================================================================
   merz-flip — Wendekarte (Vorderseite / Rückseite), wie die Benefits im Hub
   (items/HUB-MERZ/Karriere.dc.html)

   Aufbau aus nativen Containern, Klassen unter Erweitert → CSS-Klassen:

     Container  merz-flip            die Karte (Perspektive, Klickfläche)
       Container  merz-flip__dreher  dreht sich um die Y-Achse
         Container  merz-flip__vorne   Vorderseite — bestimmt die Höhe
         Container  merz-flip__hinten  Rückseite — liegt deckungsgleich darunter

   Geräte mit Maus: Drehen beim Überfahren. Touch: Antippen dreht, nochmal
   Antippen dreht zurück (merz-flip.js). Tastatur: Enter / Leertaste.
   Im Editor stehen beide Seiten untereinander, damit man beide bearbeiten kann.
   ========================================================================== */

.merz-flip {
	perspective: 1400px;
	cursor: pointer;
}
.merz-flip > .merz-flip__dreher {
	position: relative;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 1.1s cubic-bezier(.45, .05, .25, 1);
}
.merz-flip .merz-flip__vorne,
.merz-flip .merz-flip__hinten {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.merz-flip .merz-flip__vorne { height: 100%; }
.merz-flip .merz-flip__hinten {
	position: absolute !important;
	inset: 0;
	transform: rotateY(180deg);
}

@media (hover: hover) {
	.merz-flip:hover > .merz-flip__dreher { transform: rotateY(180deg); }
}
.merz-flip.is-gedreht > .merz-flip__dreher { transform: rotateY(180deg); }
.merz-flip:focus-visible { outline: 3px solid var(--merz-dunkelgrau); outline-offset: 4px; border-radius: 5px; }

@media (prefers-reduced-motion: reduce) {
	.merz-flip > .merz-flip__dreher { transition: none; }
}

/* Editor: nicht drehen, Rückseite unter die Vorderseite stellen. */
body.elementor-editor-active .merz-flip > .merz-flip__dreher { transform: none !important; transition: none; height: auto; }
body.elementor-editor-active .merz-flip .merz-flip__vorne { height: auto; }
body.elementor-editor-active .merz-flip .merz-flip__hinten { position: relative !important; inset: auto; transform: none; margin-top: 12px; }