/* =====================================================================
   Hörprobe – schlichter Abspielknopf

   Bewusst kein vollständiger Player: auf der bisherigen Seite stand dort
   nur ein Knopf, und mehr braucht eine halbe Minute Audio nicht. Das
   <audio>-Element bleibt im Markup, aber ohne Bedienleiste; gesteuert
   wird es über den Knopf (siehe cz-effekte.js). Ohne JavaScript bekommt
   der Besucher die native Leiste zu sehen – siehe .cz-hoerprobe__fallback.
   ===================================================================== */
.cz-hoerprobe {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.65rem;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

.cz-hoerprobe__knopf {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--cz-verlauf-orange);
	color: var(--cz-weiss);
	cursor: pointer;
	box-shadow: 0 8px 22px rgba(178, 94, 2, 0.28);
	transition: transform var(--cz-dauer) var(--cz-easing), box-shadow var(--cz-dauer) var(--cz-easing);
}

.cz-hoerprobe__knopf:hover,
.cz-hoerprobe__knopf:focus-visible {
	transform: translateY(-3px) scale(1.04);
	box-shadow: 0 14px 30px rgba(178, 94, 2, 0.34);
}

.cz-hoerprobe__knopf::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	margin-left: 4px; /* das Dreieck wirkt sonst aus der Mitte gerückt */
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8%205.14v13.72a1%201%200%20001.5.86l11.14-6.86a1%201%200%20000-1.72L9.5%204.28A1%201%200%20008%205.14z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8%205.14v13.72a1%201%200%20001.5.86l11.14-6.86a1%201%200%20000-1.72L9.5%204.28A1%201%200%20008%205.14z%22%2F%3E%3C%2Fsvg%3E");
}

.cz-hoerprobe__knopf[aria-pressed="true"]::before {
	margin-left: 0;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7%204h3.5v16H7zM13.5%204H17v16h-3.5z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7%204h3.5v16H7zM13.5%204H17v16h-3.5z%22%2F%3E%3C%2Fsvg%3E");
}

/* Während der Wiedergabe ein ruhiger Puls, damit klar ist: es läuft. */
.cz-hoerprobe__knopf[aria-pressed="true"] {
	animation: cz-puls 2.4s ease-in-out infinite;
}

@keyframes cz-puls {
	0%, 100% { box-shadow: 0 8px 22px rgba(178, 94, 2, 0.28); }
	50%       { box-shadow: 0 8px 22px rgba(178, 94, 2, 0.28), 0 0 0 12px rgba(245, 147, 15, 0.12); }
}

.cz-hoerprobe__text {
	font-family: "Quicksand", sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--cz-orange-braun);
	text-align: center;
	line-height: 1.35;
}

.cz-hoerprobe__dauer {
	display: block;
	font-family: var(--cz-schrift, inherit);
	font-weight: 400;
	font-size: 14px;
	color: var(--cz-warmgrau);
}

/* Das Audio-Element trägt der Knopf – sichtbar wird es nur, wenn kein
   JavaScript läuft (die Klasse setzt cz-effekte.js). */
.cz-hoerprobe audio {
	display: none;
}

.cz-hoerprobe--ohne-js {
	flex-direction: column;
}

.cz-hoerprobe--ohne-js .cz-hoerprobe__knopf {
	display: none;
}

.cz-hoerprobe--ohne-js audio {
	display: block;
	width: min(100%, 30rem);
	height: 42px;
}

@media (prefers-reduced-motion: reduce) {
	.cz-hoerprobe__knopf,
	.cz-hoerprobe__knopf[aria-pressed="true"] {
		animation: none;
		transition: none;
	}
	.cz-hoerprobe__knopf:hover {
		transform: none;
	}
}

/* =====================================================================
   Elementor-Editor: keine Effekte im Bearbeitungsmodus

   Der Scroll-Reveal setzt Sektionen auf opacity 0 und blendet sie erst
   ein, wenn der IntersectionObserver sie sieht. Im Vorschaurahmen des
   Editors feuert der Observer nicht zuverlässig – dort blieb alles
   unterhalb des ersten Bildschirms unsichtbar und damit unbearbeitbar.

   Deshalb sind im Editor sämtliche Einblende- und Bewegungseffekte aus.
   Diese Regeln stehen bewusst ganz am Ende und mit !important: sie
   müssen jede Effektregel überstimmen, egal aus welcher Datei sie kommt.
   ===================================================================== */
body.elementor-editor-active .cz-reveal,
body.elementor-editor-active .cz-reveal > *,
.elementor-editor-active .cz-reveal,
.elementor-editor-active .cz-reveal > * {
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
	transition: none !important;
	animation: none !important;
}

/* Parallax, Maus- und Kippeffekte verschieben im Editor die Klickflächen
   gegenüber dem, was man sieht. */
body.elementor-editor-active [data-cz-parallax],
body.elementor-editor-active .cz-kippen,
body.elementor-editor-active .cz-glanz,
body.elementor-editor-active .cz-banner__bild,
body.elementor-editor-active .cz-banner__slideshow {
	transform: none !important;
	transition: none !important;
}

/* Der Warenkorb-Schubladen-Overlay von Astra liegt im Editor über der
   Seite und fängt Klicks ab. */
body.elementor-editor-active .astra-cart-drawer,
body.elementor-editor-active .astra-cart-drawer-overlay,
body.elementor-editor-active #astra-mobile-cart-drawer {
	display: none !important;
}

/* Banner im Editor abgeschaltet: Es bleibt im Markup stehen, damit man
   es über die Seiteneinstellungen wieder einschalten kann, ohne die
   Seite neu zu laden. Im Frontend wird es dann gar nicht erst gerendert. */
body.elementor-editor-active .cz-banner--aus {
	display: none !important;
}

/* Leere Bausteine im Banner nehmen im Editor keinen Platz ein. */
body.elementor-editor-active .cz-banner [hidden] {
	display: none !important;
}