/* TIME TRAX Hero | Author: Time Trax */

.tt-hero {
	--tt-ease: cubic-bezier(0.19, 1, 0.22, 1);
	--tt-dist: 50vw;
	--tt-screen: 100vh;
	position: relative;
	display: block;
	width: 100%;
	min-height: 360px;
	overflow: hidden;
	background: #0b0b0b;
	isolation: isolate;
	box-sizing: border-box;
	margin-top: 0;
	margin-bottom: 0;
}
@supports (height: 100svh) {
	.tt-hero { --tt-screen: 100svh; }
}

/* ---------- Höhe ---------- */
.tt-hero--height-fit    { height: calc(var(--tt-screen) - var(--tt-top, 0px)); }
.tt-hero--height-screen { height: calc(var(--tt-screen) - var(--tt-offset, 0px)); }
.tt-hero--height-fixed  { height: var(--tt-h, 650px); }

/* ---------- Volle Fensterbreite, auch aus einem Container heraus ---------- */
.tt-hero--full {
	width: var(--tt-vw, 100vw);
	max-width: none;
	margin-left: calc(50% - var(--tt-vw, 100vw) / 2);
	margin-right: 0;
}

/* ---------- Bild ---------- */
.tt-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.tt-hero .tt-hero__img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--tt-img-pos, 50% 50%);
	display: block;
	opacity: 0;
	border: 0;
	margin: 0;
}
.tt-hero.is-in .tt-hero__img { animation: tt-img-fade 1.2s ease-out forwards; }
.tt-hero--img-kenburns.is-in .tt-hero__img {
	transform-origin: var(--tt-img-pos, 50% 50%);
	animation: tt-img-fade 1.2s ease-out forwards, tt-img-kenburns 14s ease-out forwards;
}
.tt-hero--img-zoom-out.is-in .tt-hero__img {
	animation: tt-img-fade 1.2s ease-out forwards, tt-img-zoom-out 2.5s var(--tt-ease) forwards;
}
/* Wischen: Bild wird von rechts nach links aufgedeckt, danach statisch */
.tt-hero--img-wipe .tt-hero__img,
.tt-hero--img-wipe-left .tt-hero__img { opacity: 1; }
.tt-hero--img-wipe .tt-hero__img      { clip-path: inset(0 0 0 100%); }
.tt-hero--img-wipe-left .tt-hero__img { clip-path: inset(0 100% 0 0); }
.tt-hero--img-wipe.is-in .tt-hero__img {
	animation: tt-img-wipe-rtl 1.1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
.tt-hero--img-wipe-left.is-in .tt-hero__img {
	animation: tt-img-wipe-ltr 1.1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.tt-hero--img-none .tt-hero__img,
.tt-hero--img-none.is-in .tt-hero__img { opacity: 1; animation: none; }

.tt-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: #000;
	opacity: var(--tt-overlay, 0);
	pointer-events: none;
}

/* ---------- Textblock ---------- */
.tt-hero__content {
	position: absolute;
	z-index: 2;
	left: var(--tt-x, 54%);
	top: var(--tt-y, 48%);
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	max-width: 90%;
}
.tt-hero--align-right  .tt-hero__content { transform: translate(-100%, -50%); align-items: flex-end;   text-align: right; }
.tt-hero--align-center .tt-hero__content { transform: translate(-50%, -50%);  align-items: center;     text-align: center; }
.tt-hero--align-left   .tt-hero__content { transform: translate(0, -50%);     align-items: flex-start; text-align: left; }

.tt-hero__link { color: inherit; text-decoration: none; display: contents; }

.tt-hero .tt-hero__headline {
	margin: 0;
	padding: 0;
	color: var(--tt-hl-color, #fff);
	font-size: var(--tt-hl-size, 46px);
	font-weight: 900;
	font-style: normal;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-transform: none;
	white-space: nowrap;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	border: 0;
	background: none;
}
.tt-hero .tt-hero__subline {
	margin: 0.1em 0 0;
	padding: 0;
	color: var(--tt-sl-color, #fff);
	font-size: var(--tt-sl-size, 18px);
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 0.02em;
	white-space: nowrap;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.tt-hero .tt-hero__subline em { font-style: italic; font-weight: inherit; }
.tt-hero__char { display: inline-block; white-space: pre; }

/* ---------- Text-Animationen ---------- */
.tt-hero .tt-anim:not(.tt-hero__headline--split),
.tt-hero .tt-hero__headline--split .tt-hero__char { opacity: 0; }

.tt-hero.is-in .tt-anim:not(.tt-hero__headline--split) {
	animation-duration: var(--tt-dur, 1200ms);
	animation-timing-function: var(--tt-ease);
	animation-fill-mode: both;
}
.tt-hero.is-in .tt-hero__headline:not(.tt-hero__headline--split) { animation-delay: var(--tt-hl-delay, 400ms); }
.tt-hero.is-in .tt-hero__subline { animation-delay: var(--tt-sl-delay, 1300ms); }

/* Buchstabe für Buchstabe */
.tt-hero.is-in .tt-hero__headline--split .tt-hero__char {
	--tt-dist: 120px;
	animation-duration: var(--tt-dur, 1200ms);
	animation-timing-function: var(--tt-ease);
	animation-fill-mode: both;
	animation-delay: calc(var(--tt-hl-delay, 400ms) + var(--tt-i, 0) * 45ms);
}

.tt-hero.is-in .tt-anim--left:not(.tt-hero__headline--split),
.tt-hero.is-in .tt-anim--left .tt-hero__char   { animation-name: tt-in-left; }
.tt-hero.is-in .tt-anim--right:not(.tt-hero__headline--split),
.tt-hero.is-in .tt-anim--right .tt-hero__char  { animation-name: tt-in-right; }
.tt-hero.is-in .tt-anim--top:not(.tt-hero__headline--split),
.tt-hero.is-in .tt-anim--top .tt-hero__char    { animation-name: tt-in-top; }
.tt-hero.is-in .tt-anim--bottom:not(.tt-hero__headline--split),
.tt-hero.is-in .tt-anim--bottom .tt-hero__char { animation-name: tt-in-bottom; }
.tt-hero.is-in .tt-anim--zoom:not(.tt-hero__headline--split),
.tt-hero.is-in .tt-anim--zoom .tt-hero__char   { animation-name: tt-in-zoom; }
.tt-hero.is-in .tt-anim--fade:not(.tt-hero__headline--split),
.tt-hero.is-in .tt-anim--fade .tt-hero__char   { animation-name: tt-in-fade; }

/* ---------- Keyframes ---------- */
@keyframes tt-img-fade      { from { opacity: 0; } to { opacity: 1; } }
@keyframes tt-img-kenburns  { from { transform: scale(1); }    to { transform: scale(1.1); } }
@keyframes tt-img-wipe-rtl  { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes tt-img-wipe-ltr  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tt-img-zoom-out  { from { transform: scale(1.25); } to { transform: scale(1); } }

@keyframes tt-in-left   { from { opacity: 0; transform: translate3d(calc(var(--tt-dist) * -1), 0, 0) skewX(12deg); } to { opacity: 1; transform: none; } }
@keyframes tt-in-right  { from { opacity: 0; transform: translate3d(var(--tt-dist), 0, 0) skewX(-12deg); }        to { opacity: 1; transform: none; } }
@keyframes tt-in-top    { from { opacity: 0; transform: translate3d(0, -80px, 0); } to { opacity: 1; transform: none; } }
@keyframes tt-in-bottom { from { opacity: 0; transform: translate3d(0, 80px, 0); }  to { opacity: 1; transform: none; } }
@keyframes tt-in-zoom   { from { opacity: 0; transform: scale(2.2); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes tt-in-fade   { from { opacity: 0; } to { opacity: 1; } }


/* ---------- Kleinere Laptops ---------- */
@media (max-width: 1200px) {
	.tt-hero .tt-hero__headline { font-size: min(var(--tt-hl-size, 46px), 3.6vw); }
	.tt-hero .tt-hero__subline  { font-size: max(14px, min(var(--tt-sl-size, 18px), 1.5vw)); }
}

/* ---------- Mobil: Text zentriert ---------- */
@media (max-width: 767px) {
	.tt-hero { --tt-dist: 100vw; }
	.tt-hero--height-fixed { height: var(--tt-h-m, 420px); }
	.tt-hero .tt-hero__content,
	.tt-hero--align-right .tt-hero__content,
	.tt-hero--align-left .tt-hero__content {
		left: 50%;
		width: 90%;
		transform: translate(-50%, -50%);
		align-items: center;
		text-align: center;
	}
	.tt-hero .tt-hero__headline { font-size: clamp(26px, 8vw, var(--tt-hl-size, 46px)); }
	.tt-hero .tt-hero__subline  { font-size: clamp(14px, 4vw, var(--tt-sl-size, 18px)); }
}

/* ---------- Barrierefreiheit: keine Bewegung gewünscht ---------- */
@media (prefers-reduced-motion: reduce) {
	.tt-hero .tt-hero__img,
	.tt-hero .tt-anim,
	.tt-hero .tt-anim * { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
}