/**
 * Komponenten: Buttons, Bilder, Icons, Karten, Badges.
 *
 * Behebt zwei gemessene Fehler des alten Stands:
 *  1. Elementor-Buttons hatten gar keinen Hover-Zustand.
 *  2. Buttons im Footer und Teaser-Links wurden beim Hover unterstrichen,
 *     weil eine generische a:hover-Regel sie mitgenommen hat.
 */

/* =====================================================================
   Buttons
   Eine Basis fuer alle Button-Auspraegungen im System: Elementor,
   Astra-Header/Footer, Gutenberg, WooCommerce.
   ===================================================================== */
.elementor-button,
.ast-custom-button,
.wp-element-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.added_to_cart,
.cz-button {
	--cz-btn-bg: var(--cz-verlauf-orange-weich);
	--cz-btn-farbe: var(--cz-weiss);
	--cz-btn-schatten: var(--cz-schatten-farbig);

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.9em 2em;
	border: 0;
	border-radius: var(--cz-radius-pill);
	background: var(--cz-btn-bg);
	color: var(--cz-btn-farbe);
	font-family: "Quicksand", sans-serif;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition:
		transform var(--cz-dauer) var(--cz-easing),
		box-shadow var(--cz-dauer) var(--cz-easing),
		filter var(--cz-dauer) var(--cz-easing);
}

/* Der Verlauf laesst sich nicht animieren – deshalb liegt eine zweite,
   dunklere Flaeche darueber, die beim Hover eingeblendet wird. */
.elementor-button::before,
.ast-custom-button::before,
.wp-element-button::before,
.woocommerce a.button::before,
.woocommerce button.button::before,
.cz-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(135deg, var(--cz-orange-braun) 0%, #8f4b01 100%);
	opacity: 0;
	transition: opacity var(--cz-dauer) var(--cz-easing);
}

.elementor-button:hover,
.elementor-button:focus-visible,
.ast-custom-button:hover,
.ast-custom-button:focus-visible,
.wp-element-button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.cz-button:hover,
.cz-button:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--cz-btn-schatten);
	color: var(--cz-btn-farbe);
	/* Der Kern des alten Fehlers: generische a:hover-Regeln haben hier
	   unterstrichen. Buttons sind keine Textlinks. */
	text-decoration: none;
}

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

.elementor-button:active,
.ast-custom-button:active,
.cz-button:active {
	transform: translateY(0);
}

/* Nachrueckender Pfeil – nur wo bewusst gesetzt. */
.cz-button--pfeil::after,
.elementor-button.cz-button--pfeil::after {
	content: "→";
	display: inline-block;
	transition: transform var(--cz-dauer) var(--cz-easing);
}

.cz-button--pfeil:hover::after {
	transform: translateX(4px);
}

/* --- Varianten ------------------------------------------------------- */
.cz-button--sekundaer,
.elementor-button.cz-button--sekundaer {
	background: transparent;
	color: var(--cz-orange-braun);
	box-shadow: inset 0 0 0 2px var(--cz-orange-braun);
}

.cz-button--sekundaer:hover {
	color: var(--cz-weiss);
}

.cz-button--hell,
.elementor-button.cz-button--hell {
	background: var(--cz-weiss);
	color: var(--cz-orange-braun);
	--cz-btn-farbe: var(--cz-orange-braun);
	--cz-btn-schatten: var(--cz-schatten-m);
}

.cz-button--hell::before {
	background: var(--cz-flaeche);
}

.cz-button--hell:hover {
	color: var(--cz-orange-braun);
}

/* Astras Header-Button erbt die Basis, braucht aber kompaktere Masse. */
.ast-custom-button {
	padding: 0.7em 1.5em;
	font-size: 0.95rem;
}

/* =====================================================================
   Bilder
   Der alte Stand setzte Radien pro Elementor-Widget – die Einstellung
   heisst dort aber image_border_radius, nicht border_radius. Ergebnis:
   alle Bilder hatten 0px. Deshalb hier global statt pro Widget.
   ===================================================================== */
.elementor-widget-image img,
.wp-block-image img,
.cz-bild,
.cz-bild img,
.entry-content > img,
.woocommerce ul.products li.product img,
.woocommerce div.product div.images img {
	border-radius: var(--cz-radius-m);
}

.elementor-widget-image img,
.cz-bild img {
	box-shadow: var(--cz-schatten-s);
	transition:
		transform var(--cz-dauer-lang) var(--cz-easing),
		box-shadow var(--cz-dauer) var(--cz-easing);
}

/* Ausnahmen: Logos und Icons bleiben unangetastet.
   Nicht .cz-wasserzeichen img aufnehmen – die Klasse sitzt auf ganzen
   Sektionen und wuerde dort jedes Bild treffen. Das Wasserzeichen
   selbst ist ein ::before, kein <img>. */
.custom-logo,
.site-logo-img img,
.cz-kein-radius img,
.elementor-widget-icon img {
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Seitenverhaeltnisse – ersetzt die frueheren Einzelregeln. */
.cz-bild--21-9 img,
.cz-bild--21-9 { aspect-ratio: 21 / 9; object-fit: cover; width: 100%; }
.cz-bild--16-9 img,
.cz-bild--16-9 { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.cz-bild--4-3 img,
.cz-bild--4-3 { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.cz-bild--1-1 img,
.cz-bild--1-1 { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.cz-bild--hoch img,
.cz-bild--hoch { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }

/* Frueher vergebene Klasse weiterhin gueltig, damit bestehende
   Elementor-Inhalte nicht brechen. */
.cz-leistungsbild img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

/* Zoom beim Hover – nur wo ein Rahmen den Ueberstand abschneidet. */
.cz-bild-zoom {
	overflow: hidden;
	border-radius: var(--cz-radius-m);
}

.cz-bild-zoom img {
	border-radius: 0;
	transition: transform var(--cz-dauer-lang) var(--cz-easing);
}

.cz-bild-zoom:hover img {
	transform: scale(1.05);
}

/* =====================================================================
   Icons im Kreis
   Ersetzt die frueheren 50-px-Glyphen ohne Hintergrund.
   ===================================================================== */
.elementor-widget-icon-box .elementor-icon,
.elementor-widget-icon .elementor-icon,
.cz-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--cz-verlauf-orange-weich);
	color: var(--cz-weiss);
	font-size: 24px;
	box-shadow: var(--cz-schatten-s);
	transition:
		transform var(--cz-dauer) var(--cz-easing),
		box-shadow var(--cz-dauer) var(--cz-easing);
}

.elementor-widget-icon-box .elementor-icon svg,
.elementor-widget-icon .elementor-icon svg,
.cz-icon svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.elementor-widget-icon-box:hover .elementor-icon,
.cz-icon:hover {
	transform: translateY(-3px) rotate(-4deg);
	box-shadow: var(--cz-schatten-farbig);
}

.cz-icon--blau {
	background: var(--cz-verlauf-blau-weich);
}

/* =====================================================================
   Karten
   ===================================================================== */
.cz-karte {
	display: flex;
	flex-direction: column;
	background: var(--cz-weiss);
	border-radius: var(--cz-radius-m);
	overflow: hidden;
	box-shadow: var(--cz-schatten-s);
	transition:
		transform var(--cz-dauer) var(--cz-easing),
		box-shadow var(--cz-dauer) var(--cz-easing);
}

.cz-karte:hover {
	transform: translateY(-6px);
	box-shadow: var(--cz-schatten-m);
}

.cz-karte__medien {
	overflow: hidden;
}

.cz-karte__medien img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
	transition: transform var(--cz-dauer-lang) var(--cz-easing);
}

.cz-karte:hover .cz-karte__medien img {
	transform: scale(1.06);
}

.cz-karte__inhalt {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	flex: 1;
	padding: 1.4rem 1.5rem 1.6rem;
}

/* =====================================================================
   Badges
   ===================================================================== */
.cz-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.32em 0.85em;
	border-radius: var(--cz-radius-pill);
	background: var(--cz-flaeche-2);
	color: var(--cz-orange-braun);
	font-family: "Quicksand", sans-serif;
	font-weight: 600;
	font-size: var(--cz-text-meta);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.cz-badge--orange { background: var(--cz-verlauf-orange); color: var(--cz-weiss); }
.cz-badge--blau { background: var(--cz-verlauf-blau); color: var(--cz-weiss); }
.cz-badge--gold { background: var(--cz-gold); color: var(--cz-weiss); }
.cz-badge--hell { background: var(--cz-weiss); color: var(--cz-orange-braun); box-shadow: inset 0 0 0 1px var(--cz-linie); }