/* ==========================================================================
   HÄFELE HERO V2 — CINEMATIC CORE
   Semantic HTML + CSS/JS progressive enhancement. No Bootstrap/Swiper.
   ========================================================================== */

.hero-v2{
	--hero-accent:#B91441;
	--hero-stage-height:clamp(500px,37.5vw,560px);
	--hero-content-width:520px;
	--hero-safe-x:clamp(44px,5vw,76px);
	--hero-safe-y:clamp(34px,5vw,76px);
	--hero-x:0;
	--hero-y:0;
	position:relative;
	width:100%;
	overflow:hidden;
	padding:8px 0 8px;
	background:#0b0b0b;
}

.hero-v2 .site-container-wide{
	width:calc(100% - 24px);
	max-width:var(--site-container-wide,1440px);
	margin-inline:auto;
}

.hero-v2__stage{
	position:relative;
	min-height:var(--hero-stage-height);
	overflow:hidden;
	background:#111;
	isolation:isolate;
}

.hero-v2__slides{
	position:relative;
	min-height:inherit;
}

.hero-v2__slide{
	position:absolute;
	inset:0;
	min-height:inherit;
	overflow:hidden;
	color:#fff;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	z-index:1;
	transition:opacity .8s cubic-bezier(.22,.61,.36,1),visibility .8s;
}

.hero-v2__slide.is-active{
	position:relative;
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	z-index:2;
}

.hero-v2__media,
.hero-v2__picture,
.hero-v2__background{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
}

.hero-v2__picture{
	display:block;
	overflow:hidden;
}

.hero-v2__background{
	display:block;
	object-fit:cover;
	object-position:center;
	transform:scale(1.045) translate3d(calc(var(--hero-x) * -4px),calc(var(--hero-y) * -3px),0);
	will-change:transform,opacity,filter;
	transition:transform 7s cubic-bezier(.2,.7,.2,1),filter 1s ease,opacity .7s ease;
}

.hero-v2__slide.is-active .hero-v2__background{
	transform:scale(1.01) translate3d(calc(var(--hero-x) * -7px),calc(var(--hero-y) * -5px),0);
}

.hero-v2__overlay{
	position:absolute;
	inset:0;
	z-index:1;
	pointer-events:none;
	background:linear-gradient(90deg,rgba(7,8,10,.70) 0%,rgba(7,8,10,.46) 32%,rgba(7,8,10,.16) 58%,rgba(7,8,10,.02) 78%,rgba(7,8,10,0) 100%);
}

.hero-v2__slide--content-right .hero-v2__overlay{
	background:linear-gradient(270deg,rgba(7,8,10,.64) 0%,rgba(7,8,10,.38) 38%,rgba(7,8,10,.08) 70%,rgba(7,8,10,.02) 100%);
}

.hero-v2__slide--content-center .hero-v2__overlay{
	background:linear-gradient(90deg,rgba(7,8,10,.25),rgba(7,8,10,.48) 50%,rgba(7,8,10,.25));
}

.hero-v2__slide--overlay-none .hero-v2__overlay{opacity:0}
.hero-v2__slide--overlay-soft .hero-v2__overlay{opacity:.62}
.hero-v2__slide--overlay-medium .hero-v2__overlay{opacity:.88}
.hero-v2__slide--overlay-strong .hero-v2__overlay{opacity:1}

.hero-v2__slide--theme-dark{
	color:#171717;
}

.hero-v2__slide--theme-dark .hero-v2__overlay{
	background:linear-gradient(90deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.56) 40%,rgba(255,255,255,.10) 74%,rgba(255,255,255,0) 100%);
}

.hero-v2__slide--theme-dark.hero-v2__slide--content-right .hero-v2__overlay{
	background:linear-gradient(270deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.56) 40%,rgba(255,255,255,.10) 74%,rgba(255,255,255,0) 100%);
}

.hero-v2__slide--theme-dark.hero-v2__slide--content-center .hero-v2__overlay{
	background:linear-gradient(90deg,rgba(255,255,255,.25),rgba(255,255,255,.68) 50%,rgba(255,255,255,.25));
}

.hero-v2__light{
	position:absolute;
	z-index:2;
	inset:-25% -45%;
	pointer-events:none;
	opacity:0;
	background:linear-gradient(112deg,transparent 37%,rgba(255,255,255,.03) 44%,rgba(255,255,255,.30) 50%,rgba(255,255,255,.04) 56%,transparent 63%);
	transform:translate3d(-28%,0,0) rotate(-2deg);
	mix-blend-mode:screen;
}

.hero-v2__slide.is-active .hero-v2__light{
	animation:hero-v2-light-sweep 1.45s .28s cubic-bezier(.16,1,.3,1) both;
}

.hero-v2__foreground-wrap{
	position:absolute;
	z-index:3;
	top:4%;
	right:2%;
	bottom:0;
	width:56%;
	display:flex;
	align-items:flex-end;
	justify-content:center;
	pointer-events:none;
	transform:translate3d(calc(var(--hero-x) * 10px),calc(var(--hero-y) * 7px),0);
	will-change:transform;
}

.hero-v2__slide--content-right .hero-v2__foreground-wrap{
	left:2%;
	right:auto;
}

.hero-v2__foreground{
	display:block;
	max-width:100%;
	max-height:94%;
	object-fit:contain;
	filter:drop-shadow(0 28px 38px rgba(0,0,0,.24));
	opacity:0;
	transform:translate3d(36px,18px,0) scale(.965);
	transition:opacity .8s .16s ease,transform 1.05s .16s cubic-bezier(.16,1,.3,1);
}

.hero-v2__slide.is-active .hero-v2__foreground{
	opacity:1;
	transform:translate3d(0,0,0) scale(1);
}

.hero-v2__content-shell{
	position:relative;
	z-index:5;
	min-height:inherit;
	display:flex;
	align-items:center;
	padding:var(--hero-safe-y) var(--hero-safe-x) 108px;
	pointer-events:none;
}

.hero-v2__content{
	width:min(100%,var(--hero-content-width));
	pointer-events:auto;
	opacity:0;
	transform:translate3d(0,22px,0);
	transition:opacity .7s .26s ease,transform .9s .26s cubic-bezier(.16,1,.3,1);
}

.hero-v2__slide.is-active .hero-v2__content{
	opacity:1;
	transform:translate3d(0,0,0);
}

.hero-v2__slide--content-left .hero-v2__content-shell{justify-content:flex-start;text-align:left}
.hero-v2__slide--content-center .hero-v2__content-shell{justify-content:center;text-align:center}
.hero-v2__slide--content-right .hero-v2__content-shell{justify-content:flex-end;text-align:left}

.hero-v2__content::before{
	content:"";
	display:block;
	width:44px;
	height:3px;
	margin:0 0 18px;
	background:var(--hero-accent);
}

.hero-v2__slide--content-center .hero-v2__content::before{
	margin-inline:auto;
}

.hero-v2__eyebrow{
	margin:0 0 14px;
	font-size:11px;
	font-weight:700;
	line-height:1.2;
	letter-spacing:.17em;
	text-transform:uppercase;
	opacity:.84;
}

.hero-v2__title{
	max-width:13ch;
	margin:0;
	color:inherit;
	font-family:var(--font-base,'Roboto',Arial,sans-serif);
	font-size:clamp(38px,3.7vw,56px);
	font-weight:600;
	line-height:1.035;
	letter-spacing:-.028em;
	text-wrap:balance;
	text-shadow:0 3px 22px rgba(0,0,0,.22);
}

.hero-v2__slide--content-center .hero-v2__title{
	margin-inline:auto;
}

.hero-v2__description{
	max-width:48ch;
	margin:18px 0 0;
	color:inherit;
	font-size:clamp(14px,1.08vw,17px);
	font-weight:400;
	line-height:1.58;
	opacity:.88;
}

.hero-v2__slide--content-center .hero-v2__description{
	margin-inline:auto;
}

.hero-v2__actions{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:12px;
	margin-top:26px;
}

.hero-v2__slide--content-center .hero-v2__actions{
	justify-content:center;
}

.hero-v2__cta{
	min-height:48px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:14px;
	padding:0 20px;
	border:1px solid transparent;
	border-radius:2px;
	font-size:13px;
	font-weight:700;
	line-height:1;
	letter-spacing:.035em;
	text-decoration:none;
	transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
}

.hero-v2__cta:hover{
	transform:translateY(-2px);
	text-decoration:none;
}

.hero-v2__cta--primary{
	background:var(--hero-accent);
	border-color:var(--hero-accent);
	color:#fff;
}

.hero-v2__cta--primary:hover{
	background:#a70b35;
	border-color:#a70b35;
	color:#fff;
}

.hero-v2__cta--secondary{
	background:rgba(255,255,255,.08);
	border-color:rgba(255,255,255,.58);
	color:#fff;
	backdrop-filter:blur(6px);
}

.hero-v2__slide--theme-dark .hero-v2__cta--secondary{
	background:rgba(255,255,255,.55);
	border-color:rgba(23,23,23,.42);
	color:#171717;
}

.hero-v2__cta-arrow{
	font-size:18px;
	font-weight:400;
	transition:transform .2s ease;
}

.hero-v2__cta:hover .hero-v2__cta-arrow{
	transform:translateX(3px);
}

/* Bottom navigation
   -------------------------------------------------------------------------- */

.hero-v2__ui{
	position:absolute;
	z-index:8;
	left:var(--hero-safe-x);
	right:var(--hero-safe-x);
	bottom:32px;
	height:44px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	color:#fff;
	pointer-events:none;
	transition:opacity .45s ease,transform .45s ease;
}

.hero-v2__counter,
.hero-v2__controls,
.hero-v2__progress{
	pointer-events:auto;
}

.hero-v2__counter{
	display:flex;
	align-items:center;
	gap:10px;
	min-width:86px;
	font-size:11px;
	font-weight:700;
	line-height:1;
	letter-spacing:.11em;
}

.hero-v2__counter-current{
	font-size:14px;
}

.hero-v2__counter-separator{
	width:24px;
	height:1px;
	background:rgba(255,255,255,.44);
}

.hero-v2__progress{
	position:absolute;
	left:50%;
	top:50%;
	width:min(360px,32vw);
	height:2px;
	overflow:hidden;
	background:rgba(255,255,255,.30);
	transform:translate(-50%,-50%);
}

.hero-v2__progress-bar{
	position:absolute;
	inset:0 auto 0 0;
	width:0%;
	background:#fff;
	transform-origin:left center;
}

.hero-v2__controls{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:10px;
	min-width:96px;
}

.hero-v2__control{
	width:42px;
	height:42px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:0;
	border:1px solid rgba(255,255,255,.42);
	border-radius:50%;
	background:rgba(15,15,15,.12);
	color:#fff;
	font-size:18px;
	line-height:1;
	cursor:pointer;
	backdrop-filter:blur(6px);
	transition:background .2s ease,border-color .2s ease,transform .2s ease;
}

.hero-v2__control:hover,
.hero-v2__control:focus-visible{
	background:rgba(185,20,65,.92);
	border-color:rgba(185,20,65,.92);
	transform:translateY(-1px);
	outline:0;
}

.hero-v2__slide.is-content-empty .hero-v2__overlay{
	opacity:.10;
}

.hero-v2__slide.is-content-empty.hero-v2__slide--theme-dark .hero-v2__overlay{
	opacity:.06;
}



/* First Touch emotion effect — HEART TOUCH
   Main idea: the first touch draws a warm-gold heart line, then softly opens the space.
   No pink, no cartoon particles, no UI-looking dot/ring.
   -------------------------------------------------------------------------- */

.hero-v2__slide--effect-touch{
	--touch-warm:#f7d6a2;
	--touch-warm-bright:#fff0cf;
	--touch-warm-soft:rgba(247,214,162,.34);
	--touch-warm-fade:rgba(231,178,103,.10);
}

.hero-v2__touch-glow{
	position:absolute;
	z-index:4;
	left:var(--touch-x,50%);
	top:var(--touch-y,50%);
	width:1px;
	height:1px;
	pointer-events:none;
	opacity:0;
	transform:translate(-50%,-50%);
	isolation:isolate;
}

/* Soft core light only — deliberately no visible "dot". */
.hero-v2__touch-core{
	position:absolute;
	left:50%;
	top:50%;
	width:180px;
	height:180px;
	border-radius:50%;
	background:radial-gradient(circle,
		rgba(255,244,218,.52) 0%,
		rgba(255,224,176,.24) 18%,
		rgba(244,195,126,.10) 38%,
		rgba(244,195,126,0) 68%);
	transform:translate(-50%,-50%) scale(.25);
	filter:blur(10px);
	opacity:0;
	mix-blend-mode:screen;
}

/* Large warm bloom: the room gently "opens" after the touch. */
.hero-v2__touch-glow::before{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	width:104vmax;
	height:104vmax;
	border-radius:50%;
	background:radial-gradient(circle,
		rgba(255,245,223,.17) 0%,
		rgba(252,226,184,.105) 14%,
		rgba(242,198,135,.050) 28%,
		rgba(232,180,108,.020) 42%,
		rgba(232,180,108,0) 58%);
	transform:translate(-50%,-50%) scale(.025);
	filter:blur(14px);
	opacity:0;
	mix-blend-mode:screen;
}

/* Soft sunlight wash — not a beam or laser. */
.hero-v2__touch-glow::after{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	width:min(92vw,1100px);
	height:220px;
	background:radial-gradient(ellipse at center,
		rgba(255,239,207,.20) 0%,
		rgba(249,218,169,.12) 28%,
		rgba(238,193,127,.055) 48%,
		rgba(229,177,108,0) 74%);
	transform:translate(-48%,-50%) rotate(-5deg) scaleX(.22);
	transform-origin:48% 50%;
	filter:blur(34px);
	opacity:0;
	mix-blend-mode:screen;
}

/* Warm-gold heart line */
.hero-v2__touch-heart{
	position:absolute;
	left:50%;
	top:50%;
	width:138px;
	height:124px;
	overflow:visible;
	transform:translate(-50%,-55%) scale(.72);
	transform-origin:center;
	fill:none;
	stroke:var(--touch-warm);
	stroke-width:1.8;
	stroke-linecap:round;
	stroke-linejoin:round;
	opacity:0;
	filter:
		drop-shadow(0 0 3px rgba(255,239,205,.72))
		drop-shadow(0 0 10px rgba(237,186,111,.28));
}

.hero-v2__touch-heart path{
	vector-effect:non-scaling-stroke;
	stroke-dasharray:310;
	stroke-dashoffset:310;
}

.hero-v2__touch-heart--echo{
	width:172px;
	height:155px;
	stroke:rgba(247,214,162,.46);
	stroke-width:1.15;
	filter:
		drop-shadow(0 0 5px rgba(255,235,198,.30))
		drop-shadow(0 0 16px rgba(231,177,101,.12));
}

.hero-v2__slide--effect-touch.is-active .hero-v2__content{
	transition-delay:1.8s;
}

.hero-v2__slide--effect-touch.is-touch-playing .hero-v2__touch-glow{
	opacity:1;
}

.hero-v2__slide--effect-touch.is-touch-playing .hero-v2__touch-core{
	animation:hero-v2-heart-core 2.15s .50s cubic-bezier(.16,1,.3,1) both;
}

.hero-v2__slide--effect-touch.is-touch-playing .hero-v2__touch-heart--main{
	animation:hero-v2-heart-body 2.25s .62s cubic-bezier(.16,1,.3,1) both;
}

.hero-v2__slide--effect-touch.is-touch-playing .hero-v2__touch-heart--main path{
	animation:hero-v2-heart-draw 1.65s .62s cubic-bezier(.16,1,.3,1) forwards;
}

.hero-v2__slide--effect-touch.is-touch-playing .hero-v2__touch-heart--echo{
	animation:hero-v2-heart-echo 2.45s 1.05s cubic-bezier(.16,1,.3,1) both;
}

.hero-v2__slide--effect-touch.is-touch-playing .hero-v2__touch-heart--echo path{
	animation:hero-v2-heart-draw 1.45s 1.05s cubic-bezier(.16,1,.3,1) forwards;
}

.hero-v2__slide--effect-touch.is-touch-playing .hero-v2__touch-glow::before{
	animation:hero-v2-heart-bloom 2.8s .92s cubic-bezier(.16,1,.3,1) both;
}

.hero-v2__slide--effect-touch.is-touch-playing .hero-v2__touch-glow::after{
	animation:hero-v2-heart-sunwash 2.5s 1.05s cubic-bezier(.16,1,.3,1) both;
}

.hero-v2__slide--effect-touch.is-touch-playing .hero-v2__overlay{
	animation:hero-v2-heart-room-open 2.55s .72s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes hero-v2-heart-draw{
	0%{stroke-dashoffset:310}
	100%{stroke-dashoffset:0}
}

@keyframes hero-v2-heart-body{
	0%{opacity:0;transform:translate(-50%,-55%) scale(.68)}
	18%{opacity:.14}
	44%{opacity:.72;transform:translate(-50%,-55%) scale(.90)}
	72%{opacity:.92;transform:translate(-50%,-55%) scale(1)}
	100%{opacity:0;transform:translate(-50%,-55%) scale(1.08)}
}

@keyframes hero-v2-heart-echo{
	0%{opacity:0;transform:translate(-50%,-55%) scale(.78)}
	34%{opacity:.22}
	62%{opacity:.34;transform:translate(-50%,-55%) scale(1)}
	100%{opacity:0;transform:translate(-50%,-55%) scale(1.20)}
}

@keyframes hero-v2-heart-core{
	0%{opacity:0;transform:translate(-50%,-50%) scale(.24)}
	32%{opacity:.18}
	58%{opacity:.52;transform:translate(-50%,-50%) scale(.62)}
	100%{opacity:0;transform:translate(-50%,-50%) scale(1.08)}
}

@keyframes hero-v2-heart-bloom{
	0%{opacity:0;transform:translate(-50%,-50%) scale(.025)}
	32%{opacity:.08}
	62%{opacity:.24;transform:translate(-50%,-50%) scale(.52)}
	82%{opacity:.12}
	100%{opacity:0;transform:translate(-50%,-50%) scale(1)}
}

@keyframes hero-v2-heart-sunwash{
	0%{opacity:0;transform:translate(-48%,-50%) rotate(-5deg) scaleX(.22)}
	36%{opacity:.08}
	66%{opacity:.24;transform:translate(-48%,-50%) rotate(-5deg) scaleX(.78)}
	100%{opacity:0;transform:translate(-48%,-50%) rotate(-5deg) scaleX(1.08)}
}

@keyframes hero-v2-heart-room-open{
	0%{opacity:1;filter:brightness(.76) saturate(.88)}
	36%{opacity:.96;filter:brightness(.82) saturate(.92)}
	64%{opacity:.84;filter:brightness(1.04) saturate(1.02)}
	82%{opacity:.80;filter:brightness(1.08) saturate(1.035)}
	100%{opacity:.88;filter:brightness(1) saturate(1)}
}

@media(max-width:767px){
	.hero-v2__slide--effect-touch.is-active .hero-v2__content{
		transition-delay:1.45s;
	}

	.hero-v2__touch-heart{
		width:104px;
		height:94px;
	}

	.hero-v2__touch-heart--echo{
		width:128px;
		height:116px;
	}

	.hero-v2__touch-core{
		width:138px;
		height:138px;
	}

	.hero-v2__touch-glow::after{
		width:112vw;
		height:150px;
		filter:blur(26px);
	}
}

@media(prefers-reduced-motion:reduce){
	.hero-v2__touch-glow{
		display:none!important;
	}
}

/* Motion modes
   -------------------------------------------------------------------------- */

.hero-v2--motion-balanced .hero-v2__background{
	transition-duration:5.5s;
}

.hero-v2--motion-balanced .hero-v2__light{
	display:none;
}

.hero-v2--motion-minimal .hero-v2__background{
	transform:none !important;
	transition:opacity .5s ease;
}

.hero-v2--motion-minimal .hero-v2__light{
	display:none;
}

.hero-v2--motion-minimal .hero-v2__foreground-wrap{
	transform:none;
}

/* Tablet
   -------------------------------------------------------------------------- */

@media (max-width:1023px){
	.hero-v2{
		--hero-stage-height:clamp(460px,54vw,540px);
		--hero-safe-x:clamp(30px,5vw,48px);
		--hero-safe-y:46px;
		padding:7px 0;
	}

	.hero-v2 .site-container-wide{
		width:calc(100% - 20px);
	}

	.hero-v2__title{
		font-size:clamp(34px,4.9vw,46px);
	}

	.hero-v2__foreground-wrap{
		width:54%;
		opacity:.95;
	}
}

/* Mobile
   -------------------------------------------------------------------------- */

@media (max-width:767px){
	.hero-v2{
		--hero-stage-height:clamp(460px,132vw,540px);
		--hero-safe-x:18px;
		--hero-safe-y:34px;
		padding:6px 0;
	}

	.hero-v2 .site-container-wide{
		width:calc(100% - 12px);
		max-width:none;
	}

	.hero-v2__background{
		object-position:center center;
		transform:scale(1.018);
	}

	.hero-v2__slide.is-active .hero-v2__background{
		transform:scale(1.002);
	}

	.hero-v2__overlay,
	.hero-v2__slide--content-right .hero-v2__overlay,
	.hero-v2__slide--content-center .hero-v2__overlay{
		background:linear-gradient(180deg,rgba(7,8,10,.16) 15%,rgba(7,8,10,.26) 42%,rgba(7,8,10,.78) 100%);
	}

	.hero-v2__slide--theme-dark .hero-v2__overlay,
	.hero-v2__slide--theme-dark.hero-v2__slide--content-right .hero-v2__overlay,
	.hero-v2__slide--theme-dark.hero-v2__slide--content-center .hero-v2__overlay{
		background:linear-gradient(180deg,rgba(255,255,255,.08) 12%,rgba(255,255,255,.18) 45%,rgba(255,255,255,.88) 100%);
	}

	.hero-v2__content-shell,
	.hero-v2__slide--content-left .hero-v2__content-shell,
	.hero-v2__slide--content-center .hero-v2__content-shell,
	.hero-v2__slide--content-right .hero-v2__content-shell{
		align-items:flex-end;
		justify-content:flex-start;
		padding:32px var(--hero-safe-x) 92px;
		text-align:left;
	}

	.hero-v2__content{
		width:100%;
		max-width:560px;
	}

	.hero-v2__eyebrow{
		margin-bottom:12px;
		font-size:11px;
	}

	.hero-v2__content::before{
		width:36px;
		height:2px;
		margin-bottom:14px;
	}

	.hero-v2__title{
		max-width:12ch;
		margin:0;
		font-size:clamp(29px,8.1vw,34px);
		font-weight:600;
		line-height:1.05;
		letter-spacing:-.022em;
	}

	.hero-v2__description,
	.hero-v2__slide--content-center .hero-v2__description{
		max-width:43ch;
		margin:16px 0 0;
		font-size:13px;
		line-height:1.5;
	}

	.hero-v2__actions,
	.hero-v2__slide--content-center .hero-v2__actions{
		justify-content:flex-start;
		margin-top:22px;
	}

	.hero-v2__cta{
		min-height:42px;
		padding:0 15px;
		font-size:11px;
	}

	.hero-v2__foreground-wrap,
	.hero-v2__slide--content-right .hero-v2__foreground-wrap{
		top:4%;
		left:8%;
		right:8%;
		bottom:31%;
		width:auto;
		align-items:center;
		opacity:.92;
	}

	.hero-v2__ui{
		left:var(--hero-safe-x);
		right:var(--hero-safe-x);
		bottom:20px;
		height:38px;
	}

	.hero-v2__progress{
		width:min(180px,42vw);
	}

	.hero-v2__counter{
		min-width:60px;
	}

	.hero-v2__controls{
		min-width:78px;
	}

	.hero-v2__controls{
		gap:6px;
	}

	.hero-v2__control{
		width:36px;
		height:36px;
		font-size:16px;
	}

	.hero-v2__counter{
		gap:7px;
		min-width:54px;
	}

	.hero-v2__counter-separator{
		width:14px;
	}
}

@media (max-width:420px){
	.hero-v2__description{
		display:-webkit-box;
		-webkit-line-clamp:3;
		-webkit-box-orient:vertical;
		overflow:hidden;
	}

	.hero-v2__cta--secondary{
		display:none;
	}
}


@media (max-width:359px){
	.hero-v2{
		--hero-stage-height:450px;
	}

	.hero-v2__content-shell,
	.hero-v2__slide--content-left .hero-v2__content-shell,
	.hero-v2__slide--content-center .hero-v2__content-shell,
	.hero-v2__slide--content-right .hero-v2__content-shell{
		padding-bottom:82px;
	}

	.hero-v2__title{
		font-size:32px;
	}

	.hero-v2__control{
		width:34px;
		height:34px;
	}
}

@media (prefers-reduced-motion:reduce){
	.hero-v2 *,
	.hero-v2 *::before,
	.hero-v2 *::after{
		animation:none !important;
		transition-duration:.01ms !important;
		scroll-behavior:auto !important;
	}

	.hero-v2__background,
	.hero-v2__foreground-wrap{
		transform:none !important;
	}
}

@keyframes hero-v2-light-sweep{
	0%{opacity:0;transform:translate3d(-28%,0,0) rotate(-2deg)}
	18%{opacity:.45}
	58%{opacity:.62}
	100%{opacity:0;transform:translate3d(30%,0,0) rotate(-2deg)}
}

/* ==========================================================================
   HAFELE OL 2026 — HERO STORY / FIRST TOUCH NARRATIVE
   Integrated 57C: black intro → natural typewriter → emotional image →
   Häfele promise → complete Hero. This block replaces 57A + 57B overrides.
   ========================================================================== */

.hero-v2--story-ui-hidden .hero-v2__ui{
	opacity:0;
	transform:translateY(12px);
	pointer-events:none;
}

.hero-v2__story-layer{
	position:absolute;
	inset:0;
	z-index:6;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	overflow:hidden;
}

.hero-v2__slide.is-story-running .hero-v2__story-layer,
.hero-v2__slide.is-story-phase-black .hero-v2__story-layer,
.hero-v2__slide.is-story-phase-image .hero-v2__story-layer,
.hero-v2__slide.is-story-phase-bridge .hero-v2__story-layer{
	opacity:1;
	visibility:visible;
}

.hero-v2__story-screen{
	position:absolute;
	inset:0;
	background:#030303;
	opacity:0;
	transition:opacity 1.35s cubic-bezier(.22,.61,.36,1),background .95s ease,backdrop-filter .95s ease;
}

.hero-v2__story-copy{
	position:absolute;
	left:50%;
	top:50%;
	z-index:2;
	width:min(860px,84%);
	padding:0 20px;
	text-align:center;
	transform:translate(-50%,-50%);
	opacity:0;
	transition:opacity .8s ease,transform .8s ease;
}

.hero-v2__story-line,
.hero-v2__story-bridge{
	margin:0;
	color:#fff;
	opacity:0;
	text-shadow:0 10px 40px rgba(0,0,0,.32);
}

.hero-v2__story-line--1{
	font-size:clamp(34px,4vw,64px);
	font-weight:500;
	line-height:1.08;
	letter-spacing:-.026em;
}

.hero-v2__story-line--2{
	margin-top:16px;
	font-size:clamp(26px,3vw,46px);
	font-weight:400;
	line-height:1.16;
	letter-spacing:-.02em;
	opacity:0;
}

.hero-v2__story-bridge{
	max-width:24ch;
	margin-inline:auto;
	font-size:clamp(22px,2.25vw,38px);
	font-weight:400;
	line-height:1.5;
	letter-spacing:-.012em;
}

.hero-v2__story-line.is-visible,
.hero-v2__story-bridge.is-visible{
	opacity:1;
}

.hero-v2__story-line.is-typing::after,
.hero-v2__story-bridge.is-typing::after{
	content:"";
	display:inline-block;
	width:1px;
	height:1em;
	margin-left:.14em;
	background:currentColor;
	vertical-align:-.08em;
	animation:hero-v2-caret .72s steps(1,end) infinite;
}

.hero-v2__slide.is-story-phase-black .hero-v2__story-screen{
	opacity:1;
}

.hero-v2__slide.is-story-phase-black .hero-v2__story-copy--intro{
	opacity:1;
}

.hero-v2__slide.is-story-phase-image .hero-v2__story-screen{
	opacity:0;
	transition-duration:1.35s;
}

.hero-v2__slide.is-story-phase-image .hero-v2__story-copy--intro{
	opacity:0;
	transform:translate(-50%,-54%);
}

.hero-v2__slide.is-story-phase-bridge .hero-v2__story-screen{
	opacity:.74;
	background:linear-gradient(180deg,rgba(3,3,3,.68),rgba(3,3,3,.82));
	backdrop-filter:blur(2.2px);
}

.hero-v2__slide.is-story-phase-bridge .hero-v2__story-copy--bridge{
	opacity:1;
	transform:translate(-50%,-50%);
}

.hero-v2__slide.is-story-running .hero-v2__content,
.hero-v2__slide.is-story-phase-black .hero-v2__content,
.hero-v2__slide.is-story-phase-image .hero-v2__content,
.hero-v2__slide.is-story-phase-bridge .hero-v2__content{
	opacity:0!important;
	visibility:hidden!important;
	transform:translate3d(0,18px,0)!important;
}

.hero-v2__slide.is-story-final-reveal .hero-v2__content{
	visibility:visible!important;
	animation:hero-v2-story-final-reveal 1.15s cubic-bezier(.16,1,.3,1) both;
}

.hero-v2__slide.is-story-final-reveal .hero-v2__content::before{
	animation:hero-v2-story-bar-reveal .8s .08s cubic-bezier(.16,1,.3,1) both;
}

.hero-v2__slide.is-story-final-reveal .hero-v2__eyebrow,
.hero-v2__slide.is-story-final-reveal .hero-v2__title,
.hero-v2__slide.is-story-final-reveal .hero-v2__description,
.hero-v2__slide.is-story-final-reveal .hero-v2__actions{
	opacity:0;
	animation:hero-v2-story-item-rise .85s cubic-bezier(.16,1,.3,1) both;
}

.hero-v2__slide.is-story-final-reveal .hero-v2__eyebrow{animation-delay:.12s}
.hero-v2__slide.is-story-final-reveal .hero-v2__title{animation-delay:.24s}
.hero-v2__slide.is-story-final-reveal .hero-v2__description{animation-delay:.40s}
.hero-v2__slide.is-story-final-reveal .hero-v2__actions{animation-delay:.58s}

/* Story-only First Touch timing.
   The normal touch effect above remains unchanged for regular slide transitions. */
.hero-v2__slide--effect-touch.is-story-phase-image.is-touch-playing .hero-v2__touch-core{
	animation:hero-v2-heart-core 3.8s .70s cubic-bezier(.16,1,.3,1) both;
}

.hero-v2__slide--effect-touch.is-story-phase-image.is-touch-playing .hero-v2__touch-heart--main{
	animation:hero-v2-heart-body 4.25s .82s cubic-bezier(.16,1,.3,1) both;
}

.hero-v2__slide--effect-touch.is-story-phase-image.is-touch-playing .hero-v2__touch-heart--main path{
	animation:hero-v2-heart-draw 2.8s .82s cubic-bezier(.16,1,.3,1) forwards;
}

.hero-v2__slide--effect-touch.is-story-phase-image.is-touch-playing .hero-v2__touch-heart--echo{
	animation:hero-v2-heart-echo 4.55s 1.40s cubic-bezier(.16,1,.3,1) both;
}

.hero-v2__slide--effect-touch.is-story-phase-image.is-touch-playing .hero-v2__touch-heart--echo path{
	animation:hero-v2-heart-draw 2.75s 1.40s cubic-bezier(.16,1,.3,1) forwards;
}

.hero-v2__slide--effect-touch.is-story-phase-image.is-touch-playing .hero-v2__touch-glow::before{
	animation:hero-v2-heart-bloom 4.8s 1.15s cubic-bezier(.16,1,.3,1) both;
}

.hero-v2__slide--effect-touch.is-story-phase-image.is-touch-playing .hero-v2__touch-glow::after{
	animation:hero-v2-heart-sunwash 4.45s 1.25s cubic-bezier(.16,1,.3,1) both;
}

.hero-v2__slide--effect-touch.is-story-phase-image.is-touch-playing .hero-v2__overlay{
	animation:hero-v2-heart-room-open 4.65s .90s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes hero-v2-story-final-reveal{
	from{opacity:0;transform:translate3d(0,26px,0)}
	to{opacity:1;transform:translate3d(0,0,0)}
}

@keyframes hero-v2-story-bar-reveal{
	from{opacity:0;transform:translateY(10px) scaleX(.45);transform-origin:left center}
	to{opacity:1;transform:translateY(0) scaleX(1);transform-origin:left center}
}

@keyframes hero-v2-story-item-rise{
	from{opacity:0;transform:translate3d(0,18px,0)}
	to{opacity:1;transform:translate3d(0,0,0)}
}

@keyframes hero-v2-caret{
	0%,48%{opacity:1}
	49%,100%{opacity:0}
}

@media(max-width:1023px){
	.hero-v2__story-copy{width:min(88%,760px)}
	.hero-v2__story-line--1{font-size:clamp(30px,5vw,48px)}
	.hero-v2__story-line--2{font-size:clamp(22px,3.8vw,36px)}
	.hero-v2__story-bridge{font-size:clamp(19px,3vw,30px)}
}

@media(max-width:767px){
	.hero-v2__story-copy{width:min(90%,620px);padding:0 8px}
	.hero-v2__story-line--1{font-size:clamp(26px,9vw,38px);line-height:1.12}
	.hero-v2__story-line--2{margin-top:13px;font-size:clamp(20px,6.6vw,30px);line-height:1.2}
	.hero-v2__story-bridge{max-width:18ch;font-size:clamp(18px,5vw,26px);line-height:1.5}
	.hero-v2__slide.is-story-phase-bridge .hero-v2__story-screen{opacity:.79}
}

@media(prefers-reduced-motion:reduce){
	.hero-v2__ui,
	.hero-v2__story-screen,
	.hero-v2__story-copy,
	.hero-v2__slide.is-story-final-reveal .hero-v2__content,
	.hero-v2__slide.is-story-final-reveal .hero-v2__content::before,
	.hero-v2__slide.is-story-final-reveal .hero-v2__eyebrow,
	.hero-v2__slide.is-story-final-reveal .hero-v2__title,
	.hero-v2__slide.is-story-final-reveal .hero-v2__description,
	.hero-v2__slide.is-story-final-reveal .hero-v2__actions{
		transition:none!important;
		animation:none!important;
	}
}