/* ==========================================================================
   SBX Hero – 1:1 Nachbau des Slider-Revolution-Sliders "home-4"

   POSITIONIERUNG (wichtig!)
   Die Layer hatten data-basealign="slide". Die X-Werte (337 / 338 px)
   werden daher ab dem LINKEN RAND DES SLIDERS gemessen – nicht ab dem
   linken Rand des 1240px-Rasters. Das Raster dient nur als Maßstab für
   die Skalierung (--sbx-s = min(Fensterbreite / 1240, 1), kein Upscaling).

   Vertikal: Layer sind auf der Slider-Mitte zentriert, mit den
   Original-Offsets -99 / +54 / +240 px (mitskaliert).
   transform-origin ist "left top", damit sich die berechneten
   top-Werte exakt verhalten.

   SPEZIFITÄT
   Alle Regeln sind doppelt geklassen (.sbx-hero .sbx-hero__x), damit sie
   Theme-Regeln wie ".scheme_default h1" (0,1,1) schlagen. Nicht reduzieren!
   ========================================================================== */

.sbx-hero {
	position: relative;
	box-sizing: border-box;
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	height: 100vh;
	overflow: hidden;
	background-color: #E7E7E7;
	--sbx-s: 1;
	--sbx-btn-from: 300px;

	/* Horizontaler Einzug der Layer ab linkem Sliderrand.
	   Originalwert von Slider Revolution war 337px – hier bewusst
	   weiter nach links gezogen. Zum Nachjustieren nur diesen Wert ändern. */
	--sbx-x: 200px;

	/* Stärke des Lesbarkeits-Overlays hinter dem Text (0 = aus, 1 = schwarz). */
	--sbx-overlay: 0.45;
}

/* --- Hintergrund inkl. Ken-Burns (panzoom: fit 100->110, y -100->100) ---- */

.sbx-hero .sbx-hero__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}

.sbx-hero .sbx-hero__bg img {
	position: absolute;
	left: 0;
	top: -5%;
	width: 100%;
	height: 110%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
	display: block;
	border-radius: 0;
	will-change: transform;
	transform: translate3d(0, -4%, 0) scale(1);
	animation: sbx-hero-panzoom 9000ms linear 0ms both;
}

@keyframes sbx-hero-panzoom {
	from { transform: translate3d(0, -4%, 0) scale(1); }
	to   { transform: translate3d(0,  4%, 0) scale(1.1); }
}

/* Lesbarkeits-Overlay: liegt über dem Bild, aber unter den Textlayern.
   Bewegt sich bewusst NICHT mit dem Ken-Burns-Effekt mit. */

.sbx-hero .sbx-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, var(--sbx-overlay)) 0%,
		rgba(0, 0, 0, calc(var(--sbx-overlay) * 0.55)) 42%,
		rgba(0, 0, 0, 0) 72%
	);
}

/* --- Stage: volle Sliderbreite (basealign "slide") ---------------------- */

.sbx-hero .sbx-hero__stage {
	position: absolute;
	inset: 0;
	z-index: 5;
}

.sbx-hero .sbx-hero__layer {
	position: absolute;
	transform-origin: left top;
	transform: scale(var(--sbx-s));
}

/* --- Layer 1: Headline (RS data-color="#ffffff") ------------------------ */

.sbx-hero .sbx-hero__title-wrap {
	left: calc(var(--sbx-x) * var(--sbx-s));
	top: calc(50% - 189px * var(--sbx-s)); /* -(180/2) - 99 */
	width: 951px;
	height: 180px;
	z-index: 9;
	clip-path: inset(0);
	animation: sbx-hero-unmask 1010ms linear 0ms both;
}

.sbx-hero .sbx-hero__title {
	margin: 0;
	padding: 10px 0 0 0;
	color: #ffffff;
	font-family: "Martel", serif;
	font-size: 75px;
	line-height: 85px;
	font-weight: 700;
	letter-spacing: -1px;
	text-align: left;
	text-transform: none;
	text-shadow: 2px 2px 4px rgba(193, 193, 193, 0.48);
	transform-origin: center center;
	animation: sbx-hero-scale-in 1000ms cubic-bezier(.25, .46, .45, .94) 10ms both;
}

/* --- Layer 2: Subline --------------------------------------------------- */

.sbx-hero .sbx-hero__subtitle-wrap {
	left: calc(var(--sbx-x) * var(--sbx-s));
	top: calc(50% + 20px * var(--sbx-s)); /* 54 - (68/2) */
	width: 822px;
	z-index: 10;
	clip-path: inset(0);
	animation: sbx-hero-unmask 2000ms linear 0ms both;
}

.sbx-hero .sbx-hero__subtitle {
	margin: 0;
	display: block;
	padding: 10px 20px;
	background-color: #0c0c0c;
	color: #fff9f9;
	font-family: "Courgette", cursive;
	font-size: 30px;
	line-height: 48px;
	font-weight: 400;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	box-sizing: border-box;
	transform-origin: center center;
	animation: sbx-hero-scale-in 1000ms cubic-bezier(.25, .46, .45, .94) 1000ms both;
}

/* --- Layer 3: Button ---------------------------------------------------- */

.sbx-hero .sbx-hero__button-wrap {
	left: calc(var(--sbx-x) * var(--sbx-s));
	top: calc(50% + 205.5px * var(--sbx-s)); /* 240 - (69/2) */
	z-index: 11;
}

.sbx-hero .sbx-hero__button,
.sbx-hero a.sbx-hero__button {
	display: inline-block;
	padding: 22px 67px 23px 67px;
	border: 2px solid #edcb9a;
	border-radius: 0;
	background-color: #edcb9a;
	background-image: none;
	color: #ffffff;
	font-family: "Roboto Slab", serif;
	font-size: 18px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: lowercase;
	text-decoration: none;
	text-shadow: none;
	cursor: pointer;
	outline: none;
	box-shadow: none;
	box-sizing: border-box;
	transition: background-color .25s linear, color .25s linear, border-color .25s linear;
	animation: sbx-hero-slide-up 1000ms cubic-bezier(.645, .045, .355, 1) 2000ms both;
}

.sbx-hero .sbx-hero__button:hover,
.sbx-hero .sbx-hero__button:focus,
.sbx-hero a.sbx-hero__button:hover,
.sbx-hero a.sbx-hero__button:focus {
	background-color: rgba(237, 203, 154, 0);
	border-color: #edcb9a;
	color: #edcb9a;
	text-decoration: none;
}

/* --- Keyframes ---------------------------------------------------------- */

@keyframes sbx-hero-scale-in {
	from { opacity: 0; transform: scale(2); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes sbx-hero-slide-up {
	from { transform: translate3d(0, var(--sbx-btn-from), 0); }
	to   { transform: translate3d(0, 0, 0); }
}

@keyframes sbx-hero-unmask {
	0%, 99%  { clip-path: inset(0); }
	100%     { clip-path: inset(-200px); }
}

/* ==========================================================================
   Responsive – übernommen aus themes/ryancole/css/responsive.css,
   wo die Original-Layerklassen (#home-1 .home-title-wrap etc.) gestylt waren.
   ========================================================================== */

@media (max-width: 1135px) {
	.sbx-hero .sbx-hero__title-wrap,
	.sbx-hero .sbx-hero__subtitle-wrap,
	.sbx-hero .sbx-hero__button-wrap {
		transform: translateX(-110px) scale(var(--sbx-s));
	}
}

@media (max-width: 959px) {
	.sbx-hero .sbx-hero__subtitle-wrap {
		display: none;
	}
	.sbx-hero .sbx-hero__title-wrap,
	.sbx-hero .sbx-hero__button-wrap {
		transform: translateX(-50px) scale(var(--sbx-s));
	}
}

/* Ab hier hat das Theme feste Schriftgrößen per !important erzwungen,
   die Skalierung war damit ausgehebelt – deshalb hier ohne scale(). */
@media (max-width: 767px) {
	/* Auf Mobil steht der Text fast über die volle Breite –
	   deshalb hier ein Verlauf von oben nach unten statt von links. */
	.sbx-hero .sbx-hero__bg::after {
		background: linear-gradient(
			to bottom,
			rgba(0, 0, 0, calc(var(--sbx-overlay) * 0.35)) 0%,
			rgba(0, 0, 0, calc(var(--sbx-overlay) * 0.9)) 100%
		);
	}
	.sbx-hero .sbx-hero__title-wrap,
	.sbx-hero .sbx-hero__button-wrap {
		left: 20px;
		right: 20px;
		width: auto;
		height: auto;
		transform: none;
	}
	.sbx-hero .sbx-hero__title-wrap {
		top: 50%;
		margin-top: -110px;
	}
	.sbx-hero .sbx-hero__title {
		font-size: 32px;
		line-height: 40px;
	}
	.sbx-hero .sbx-hero__button-wrap {
		top: 50%;
		margin-top: 20px;
	}
	.sbx-hero .sbx-hero__button,
	.sbx-hero a.sbx-hero__button {
		font-size: 14px;
		line-height: 18px;
		padding: 8px 10px;
	}
}

@media (max-width: 479px) {
	.sbx-hero .sbx-hero__title {
		font-size: 26px;
		line-height: 34px;
	}
	.sbx-hero .sbx-hero__title-wrap {
		margin-top: -95px;
	}
}

/* --- Barrierefreiheit --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sbx-hero .sbx-hero__bg img {
		animation: none;
		transform: none;
	}
	.sbx-hero .sbx-hero__title,
	.sbx-hero .sbx-hero__subtitle,
	.sbx-hero .sbx-hero__button {
		animation: none;
		opacity: 1;
	}
	.sbx-hero .sbx-hero__title-wrap,
	.sbx-hero .sbx-hero__subtitle-wrap {
		animation: none;
		clip-path: none;
	}
}