/**
 * Bewegung und Interaktion – zusaetzlich zu 80-effekte.css.
 *
 * Hier liegen die mausabhaengigen Effekte, die Hero-Slideshow und die
 * Korrekturen an Uebergaengen. Alles laeuft ueber CSS-Variablen, die
 * cz-effekte.js setzt – so bleibt die Bewegung ohne JS aus, ohne dass
 * etwas fehlt.
 */

/* =====================================================================
   Hero-Slideshow
   Mehrere Ebenen uebereinander, es blendet immer genau eine ein.
   ===================================================================== */
.cz-banner__slideshow {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

.cz-banner__folie {
	position: absolute;
	inset: -8% -4%;
	background-position: center center;
	background-size: cover;
	opacity: 0;
	transform: scale(1.06);
	transition:
		opacity 1.6s var(--cz-easing),
		transform 7s linear;
	will-change: opacity, transform;
}

.cz-banner__folie.cz-aktiv {
	opacity: 1;
	/* Langsamer Zoom, solange die Folie sichtbar ist – das haelt das
	   Bild in Bewegung, ohne dass es unruhig wird. */
	transform: scale(1);
}

/* Punkte zur Orientierung */
.cz-banner__punkte {
	position: absolute;
	left: 50%;
	bottom: clamp(48px, 6vw, 84px);
	z-index: 3;
	display: flex;
	gap: 0.5rem;
	transform: translateX(-50%);
}

.cz-banner__punkt {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: background-color var(--cz-dauer) var(--cz-easing), transform var(--cz-dauer) var(--cz-easing);
}

.cz-banner__punkt.cz-aktiv {
	background: var(--cz-weiss);
	transform: scale(1.4);
}

/* =====================================================================
   Maus-Parallax im Hero
   --cz-maus-x/y liefern -1 .. 1, gesetzt von cz-effekte.js.
   ===================================================================== */
.cz-banner__slideshow,
.cz-banner__bild {
	transform: translate3d(
		calc(var(--cz-maus-x, 0) * 12px),
		calc(var(--cz-maus-y, 0) * 8px),
		0
	);
}

.cz-banner__inhalt {
	transform: translate3d(
		calc(var(--cz-maus-x, 0) * -6px),
		calc(var(--cz-maus-y, 0) * -4px),
		0
	);
	transition: transform 0.4s var(--cz-easing);
}

/* =====================================================================
   Glanzpunkt auf Buttons, folgt der Maus
   ===================================================================== */
.elementor-button,
.ast-custom-button,
.cz-button,
.woocommerce a.button,
.woocommerce button.button {
	--cz-glanz-x: 50%;
	--cz-glanz-y: 50%;
}

.elementor-button::after,
.ast-custom-button::after,
.cz-button:not(.cz-button--pfeil)::after,
.woocommerce a.button::after,
.woocommerce button.button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(
		circle 90px at var(--cz-glanz-x) var(--cz-glanz-y),
		rgba(255, 255, 255, 0.32),
		transparent 60%
	);
	opacity: 0;
	transition: opacity var(--cz-dauer) var(--cz-easing);
	pointer-events: none;
}

.elementor-button:hover::after,
.ast-custom-button:hover::after,
.cz-button:hover::after,
.woocommerce a.button:hover::after,
.woocommerce button.button:hover::after {
	opacity: 1;
}

/* =====================================================================
   Pfeil als echtes Icon statt Textzeichen
   ===================================================================== */
.cz-button--pfeil::after,
.elementor-button.cz-button--pfeil::after,
.cz-teaser__mehr::after {
	content: "";
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-image: var(--cz-icon-pfeil);
	mask-image: var(--cz-icon-pfeil);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform var(--cz-dauer) var(--cz-easing);
	/* Der Glanzpunkt darf hier nicht mitlaufen. */
	background-image: none;
	opacity: 1;
	position: static;
	inset: auto;
}

.cz-teaser__mehr {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

/* =====================================================================
   Karten-Neigung zur Maus
   ===================================================================== */
.cz-karte,
.woocommerce ul.products li.product {
	transform-style: preserve-3d;
}

.cz-js .cz-karte.cz-neigung,
.cz-js .woocommerce ul.products li.product.cz-neigung {
	transform:
		perspective(900px)
		rotateX(calc(var(--cz-neig-y, 0) * -3deg))
		rotateY(calc(var(--cz-neig-x, 0) * 3deg))
		translateY(-6px);
}

/* =====================================================================
   Uebergang zum Pre-Footer
   Die Welle sass frueher als eigenes Element mit weissem Rest darunter.
   Jetzt haengt sie direkt am Footer und schneidet ihn oben an.
   ===================================================================== */
#colophon .site-primary-footer-wrap {
	/* Die Welle liegt jetzt ausserhalb des Footers – der normale
	   Innenabstand reicht wieder. */
	padding-top: clamp(2.75rem, 5vw, 4rem) !important;
	margin-top: 0;
}



/* Der Inhaltsbereich darf unten keinen Abstand mehr lassen – sonst
   entsteht der weisse Streifen ueber der Welle. */
#content,
.site-content,
.ast-page-builder-template .site-content > .ast-container {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* =====================================================================
   Abschluss-CTA vor dem Footer
   ===================================================================== */
.cz-abschluss {
	position: relative;
	padding: clamp(3.5rem, 6vw, 5.5rem) 1.25rem clamp(4.5rem, 7vw, 6.5rem);
	background: var(--cz-verlauf-orange);
	color: var(--cz-weiss);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}

.cz-abschluss h2,
.cz-abschluss p {
	color: var(--cz-weiss);
	position: relative;
}

.cz-abschluss h2 {
	margin: 0.2em 0 0.35em;
}

.cz-abschluss p {
	max-width: 40rem;
	margin: 0 auto 1.6rem;
	font-size: var(--cz-text-gross);
}

/* Sanft wandernder Lichtschein */
.cz-abschluss::before {
	content: "";
	position: absolute;
	inset: -40%;
	z-index: -1;
	background: radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.22), transparent 55%);
	animation: cz-schein 14s ease-in-out infinite alternate;
}

@keyframes cz-schein {
	from { transform: translate3d(-8%, -4%, 0) scale(1); }
	to   { transform: translate3d(8%, 6%, 0) scale(1.15); }
}

/* =====================================================================
   To-Top: wirklich rund
   Die Button-Basisregel gab ihm Padding und damit ein Oval.
   ===================================================================== */
.cz-nach-oben {
	width: 48px !important;
	height: 48px !important;
	min-width: 48px;
	padding: 0 !important;
	border-radius: 50% !important;
	font-size: 20px;
	line-height: 1;
}

/* =====================================================================
   Shop: Raster immer links oben beginnen
   ===================================================================== */
.woocommerce ul.products {
	justify-items: stretch;
	justify-content: start;
	align-items: start;
	text-align: left;
}

.woocommerce ul.products li.product {
	margin-inline: 0 !important;
	text-align: left;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	text-align: left;
}

/* Astra zentriert die Kacheln je nach Einstellung – hier nicht. */
.woocommerce .astra-shop-summary-wrap,
.ast-woo-shop-archive .site-content .ast-woocommerce-container {
	text-align: left;
}

/* =====================================================================
   Footer-Button: dezenter
   ===================================================================== */
.cz-footer-cta:hover,
.cz-footer-cta:focus-visible {
	/* War ein harter Wechsel auf Orange-Braun – jetzt bleibt es hell,
	   nur Schatten und Anheben zeigen den Zustand. */
	background: var(--cz-flaeche);
	color: var(--cz-petrol) !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(58, 52, 47, 0.18);
	padding-left: 1.7em;
}