/* =========================================================================
   MVL Complete Core - Hero-Banner Blur-Box
   -------------------------------------------------------------------------
   Legt hinter den Text der beiden Hero-Banner auf der Startseite eine
   dezente Blur-Box, damit der Text gut lesbar ist. Bewusst schlicht:
   leichter Backdrop-Blur, leichte Abdunklung, mehr nicht.

   Scope:  nur Startseite (.elementor-22070) + Hero-Banner (.ts-banner.center-bottom)
   Aufbau: .ts-banner > .banner-wrapper > .box-content > .header-content (h2/h4/Button)
   ========================================================================= */

.elementor-22070 .ts-banner.center-bottom .box-content {
	/* Theme setzt hier 50px Padding -> mit !important reduzieren, aber nicht
	   ganz in die Ecke: etwas Luft zum Rand lassen. */
	padding: 0 clamp(24px, 4%, 34px) clamp(24px, 4%, 34px) !important;
	box-sizing: border-box;
}

/* Die schlichte Blur-Box hinter dem Text. Bewusst schmal, damit sie das
   Produktbild nicht verdeckt. Kein Rand (der erzeugte eine sichtbare Linie
   am oberen Kante der Box) -> nur Blur + leichte Abdunklung + Schatten. */
.elementor-22070 .ts-banner.center-bottom .header-content {
	display: inline-block;
	max-width: min(60%, 340px);
	padding: clamp(13px, 1.9vw, 18px) clamp(15px, 2.1vw, 20px);
	border-radius: 14px;
	border: none;
	background: linear-gradient(160deg, rgba(15, 23, 30, 0.32) 0%, rgba(12, 18, 24, 0.48) 100%);
	-webkit-backdrop-filter: blur(11px) saturate(115%);
	backdrop-filter: blur(11px) saturate(115%);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
	color: #ffffff;
}

/* Titel: kleiner als zuvor, hell und klar lesbar. */
.elementor-22070 .ts-banner.center-bottom .header-content h2 {
	color: #ffffff !important;
	margin: 0 0 0.35em;
	font-size: clamp(18px, 2vw, 24px) !important;
	line-height: 1.15;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Untertitel-Satz. */
.elementor-22070 .ts-banner.center-bottom .header-content h4 {
	color: rgba(255, 255, 255, 0.92) !important;
	margin: 0 0 1em;
	font-size: clamp(13px, 1vw, 15px) !important;
	font-weight: 400;
	line-height: 1.4;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}

.elementor-22070 .ts-banner.center-bottom .header-content .ts-banner-button {
	margin-top: 4px;
}

/* Kein Hover-Effekt auf der Box (bewusst statisch, verhindert Rand-Flimmern
   beim Bild-Zoom des Themes). */

/* Fallback ohne backdrop-filter: kraeftigerer Hintergrund. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.elementor-22070 .ts-banner.center-bottom .header-content {
		background: linear-gradient(160deg, rgba(12, 18, 24, 0.70), rgba(8, 12, 18, 0.80));
	}
}

/* Ab Tablet abwaerts: Beschreibung ausblenden. Die Banner werden schmaler,
   dadurch verdeckt die Box mit dem ganzen Satz zu viel vom Bild. Nur Titel +
   Button bleiben -> kompakte Box, Motiv bleibt gut sichtbar. */
@media (max-width: 1024px) {
	.elementor-22070 .ts-banner.center-bottom .header-content h4 {
		display: none;
	}
	.elementor-22070 .ts-banner.center-bottom .header-content h2 {
		margin-bottom: 0.6em;
	}
}

/* Handy: nur noch ein kleines Titel-Label, damit das Produkt sichtbar bleibt.
   Button ausgeblendet (der ganze Banner ist per JS antippbar). */
@media (max-width: 767px) {
	.elementor-22070 .ts-banner.center-bottom {
		cursor: pointer;
	}
	.elementor-22070 .ts-banner.center-bottom .header-content {
		max-width: min(80%, 300px);
		padding: 9px 14px;
		border-radius: 12px;
	}
	.elementor-22070 .ts-banner.center-bottom .header-content h2 {
		font-size: 19px !important;
		margin: 0 !important;
	}
	.elementor-22070 .ts-banner.center-bottom .ts-banner-button {
		display: none;
	}
}