/* giant: Startbereich. Grundzustand jedes Elements = Endzustand, Animationen nur auf der aktiven Folie. */

/* Seitenrahmen: Startbereich füllt den Platz zwischen Kopfzeile und Footer */
body.has-giant-hero #mainContent {
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
	padding: 0;
}
body.has-giant-hero #mainContent > .container {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.gh-hero {
	--gh-acc: #ed5f30;
	--gh-acc-2: #f28e6d;
	--gh-acc-strong: #c8461b;
	--gh-ink: #282828;
	--gh-muted: #5a5a5a;
	--gh-line: rgba(40, 40, 40, .14);
	--gh-ease: cubic-bezier(.16, 1, .3, 1);
	--gh-dauer: 7000ms;
	--gh-glow-x: 72%;
	--gh-glow-y: 42%;
	--gh-mx: 0;
	--gh-my: 0;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	flex: 1 0 auto;
	display: flex;
	/* --gh-fit = Bildschirmhöhe minus Kopfzeile minus Footer (per JS gemessen) */
	--gh-fit: 640px;
	min-height: max(500px, var(--gh-fit));
	background: linear-gradient(160deg, #f7f7f7 0%, #efefef 60%, #e9e9e9 100%);
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
	color: var(--gh-ink);
	font-family: "museo_sans_500", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.gh-hero[data-folie="1"] { --gh-glow-x: 66%; --gh-glow-y: 52%; }
.gh-hero[data-folie="2"] { --gh-glow-x: 76%; --gh-glow-y: 36%; }
.gh-hero[data-folie="3"] { --gh-glow-x: 62%; --gh-glow-y: 58%; }
.gh-hero[data-folie="4"] { --gh-glow-x: 78%; --gh-glow-y: 48%; }

.gh-hero, .gh-hero *, .gh-hero *::before, .gh-hero *::after { box-sizing: border-box; }

.gh-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	margin: -1px; padding: 0; border: 0;
}

.gh-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	opacity: 1;
	pointer-events: none;
}
.gh-glow {
	position: absolute;
	inset: -20%;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(38% 46% at var(--gh-glow-x) var(--gh-glow-y), rgba(237, 95, 48, .12), transparent 70%);
	transition: background-position 1.2s var(--gh-ease);
}
@property --gh-glow-x { syntax: "<percentage>"; inherits: true; initial-value: 72%; }
@property --gh-glow-y { syntax: "<percentage>"; inherits: true; initial-value: 42%; }
.gh-hero { transition: --gh-glow-x 1.4s var(--gh-ease), --gh-glow-y 1.4s var(--gh-ease); }

.gh-stage {
	position: relative;
	width: 100%;
	max-width: 1148px;
	margin: 0 auto;
	padding: clamp(24px, 4vh, 56px) 24px 96px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Folien liegen übereinander */
.gh-slides { display: grid; }
.gh-slide {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
	visibility: hidden;
	opacity: 0;
	transition: opacity .6s ease, visibility 0s linear .6s;
}
.gh-slide.is-active {
	visibility: visible;
	opacity: 1;
	transition: opacity .6s ease .1s, visibility 0s;
}

/* Text */
.gh-copy { max-width: 36rem; }
.gh-label {
	margin: 0 0 16px !important;
	color: var(--gh-acc-strong);
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.gh-title {
	margin: 0 0 20px !important;
	padding: 0 !important;
	border: 0 !important;
	float: none !important;
	color: var(--gh-ink) !important;
	font-family: "nexa_500", Tahoma, Geneva, sans-serif !important;
	font-size: clamp(30px, 3.1vw, 46px) !important;
	line-height: 1.12 !important;
	letter-spacing: -.01em;
	text-transform: none !important;
}
.gh-title span { color: var(--gh-acc); }
.gh-text {
	margin: 0 0 32px !important;
	color: var(--gh-muted);
	font-size: 17px;
	line-height: 1.65;
	max-width: 32em;
}
.gh-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.gh-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 20px 12px;
	border-radius: 4px;
	background: #dd5526;
	color: #fff !important;
	font-family: "nexa_500", Tahoma, Geneva, sans-serif;
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
	transition: transform .35s var(--gh-ease), background-color .25s, box-shadow .35s var(--gh-ease), color .25s;
}
.gh-btn:hover { background: var(--gh-acc-strong); transform: translateY(-2px); }
.gh-btn:active { transform: translateY(0) scale(.98); }
.gh-btn:focus-visible, .gh-tab:focus-visible, .gh-pause:focus-visible { outline: 2px solid var(--gh-ink); outline-offset: 3px; }
.gh-btn--ghost { background: transparent; color: var(--gh-ink) !important; box-shadow: inset 0 0 0 1px rgba(40, 40, 40, .4); }
.gh-btn--ghost:hover { background: rgba(40, 40, 40, .05); box-shadow: inset 0 0 0 1px rgba(40, 40, 40, .7); }
.gh-btn-icon { width: 16px; height: 16px; transition: transform .35s var(--gh-ease); }
.gh-btn:hover .gh-btn-icon { transform: translateX(3px); }

.gh-in {
	opacity: 0;
	transform: translateY(26px);
	filter: blur(8px);
	transition: opacity .5s ease, transform .5s ease, filter .5s ease;
}
.is-active .gh-in {
	opacity: 1;
	transform: none;
	filter: none;
	transition: opacity .9s var(--gh-ease), transform 1.1s var(--gh-ease), filter .9s var(--gh-ease);
	transition-delay: calc(var(--i) * 110ms + 180ms);
}

/* Grafik */
.gh-visual {
	position: relative;
	transform: translate3d(calc(var(--gh-mx) * 14px), calc(var(--gh-my) * 10px), 0);
	transition: transform .8s var(--gh-ease);
}
.gh-scene {
	display: block;
	width: 100%;
	height: auto;
	max-height: clamp(240px, calc(max(500px, var(--gh-fit)) - 170px), 480px);
	overflow: visible;
	opacity: 0;
	transform: translateX(40px) scale(.96);
	transition: opacity .5s ease, transform .6s ease;
}
.is-active .gh-scene {
	opacity: 1;
	transform: none;
	transition: opacity 1s var(--gh-ease) .15s, transform 1.4s var(--gh-ease) .1s;
}
.gh-parallax-far { transform: translate(calc(var(--gh-mx) * -10px), calc(var(--gh-my) * -8px)); transition: transform .8s var(--gh-ease); }

/* Navigation */
.gh-nav {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 28px;
	display: flex;
	align-items: flex-end;
	gap: 20px;
}
.gh-tabs {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
}
.gh-tab {
	all: unset;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 6px;
	color: #7a7a7a;
	font-size: 13px;
	transition: color .3s;
}
.gh-tab:hover, .gh-tab.is-active { color: var(--gh-ink); }
.gh-tab-bar { position: relative; display: block; height: 2px; border-radius: 2px; background: rgba(40, 40, 40, .14); overflow: hidden; }
.gh-tab-fill { position: absolute; inset: 0; background: var(--gh-acc); transform: scaleX(0); transform-origin: left; }
.gh-tab.is-done .gh-tab-fill { transform: scaleX(1); opacity: .35; }
.gh-tab.is-active .gh-tab-fill { animation: gh-progress var(--gh-dauer) linear forwards; opacity: 1; }
.gh-hero.is-paused .gh-tab.is-active .gh-tab-fill,
.gh-hero.is-hover .gh-tab.is-active .gh-tab-fill { animation-play-state: paused; }
@keyframes gh-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.gh-pause {
	all: unset;
	cursor: pointer;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--gh-ink);
	box-shadow: inset 0 0 0 1px rgba(40, 40, 40, .3);
	transition: background-color .25s, box-shadow .25s;
}
.gh-pause:hover { background: rgba(40, 40, 40, .05); box-shadow: inset 0 0 0 1px rgba(40, 40, 40, .6); }
.gh-pause svg { width: 14px; height: 14px; }
.gh-pause .gh-ico-play, .gh-hero.is-paused .gh-pause .gh-ico-pause { display: none; }
.gh-hero.is-paused .gh-pause .gh-ico-play { display: inline; }

/* ---------- SVG-Grundformen ---------- */
.gh-panel { fill: rgba(255, 255, 255, .75); stroke: rgba(40, 40, 40, .14); stroke-width: 1.2; }
.gh-panel--solid { fill: #fff; stroke: rgba(40, 40, 40, .14); }
.gh-dot { fill: rgba(40, 40, 40, .2); }
.gh-line { fill: rgba(40, 40, 40, .14); }
.gh-line--acc { fill: var(--gh-acc); }
.gh-line--white { fill: rgba(255, 255, 255, .9); }
.gh-axis { stroke: rgba(40, 40, 40, .2); stroke-width: 1.2; }
.gh-bar { fill: rgba(40, 40, 40, .2); transform-box: fill-box; transform-origin: 50% 100%; }
.gh-bar--acc { fill: var(--gh-acc); }
.gh-draw { fill: none; stroke-dasharray: 1; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: round; }
.gh-stroke-acc { stroke: var(--gh-acc); stroke-width: 3; }
.gh-stroke-white { stroke: #fff; stroke-width: 3.2; }
.gh-pop { fill: var(--gh-acc); stroke: #fff; stroke-width: 3; transform-box: fill-box; transform-origin: center; }
.gh-track { fill: none; stroke: rgba(40, 40, 40, .08); stroke-width: 8; }
.gh-ring { fill: none; stroke: var(--gh-acc); stroke-width: 8; stroke-linecap: round; }
.gh-badge { fill: var(--gh-acc); }
.gh-svg-text { fill: #3a3a3a; font-family: "museo_sans_500", Helvetica, Arial, sans-serif; font-size: 15px; }
.gh-svg-text--big { font-family: "nexa_500", Tahoma, sans-serif; font-size: 24px; fill: var(--gh-ink); }
.gh-svg-text--hub { font-family: "nexa_500", Tahoma, sans-serif; font-size: 13px; fill: #fff; }

.gh-edge { stroke: rgba(40, 40, 40, .1); stroke-width: 1; }
.gh-pulse { fill: none; stroke: var(--gh-acc); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 14 100; stroke-dashoffset: 14; opacity: 0; }
.gh-node { fill: #fff; stroke: rgba(40, 40, 40, .45); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; }
.gh-wave { fill: none; stroke: var(--gh-acc); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.gh-typing { fill: var(--gh-acc); transform-box: fill-box; transform-origin: center; }
.gh-grow-x { transform-box: fill-box; transform-origin: left center; }

.gh-house { stroke: #3a3a3a; stroke-width: 3; }
.gh-win { fill: rgba(40, 40, 40, .05); stroke: rgba(40, 40, 40, .35); stroke-width: 1.4; }
.gh-blind { transform: translateY(-34px); }
.gh-blind-fill { fill: #d6d6d6; }
.gh-slat { stroke: rgba(40, 40, 40, .18); stroke-width: 1; }
.gh-door { fill: rgba(237, 95, 48, .18); stroke: rgba(40, 40, 40, .35); stroke-width: 1.4; }
.gh-hub { fill: var(--gh-acc); stroke: none; }
.gh-flow { fill: none; stroke: rgba(40, 40, 40, .3); stroke-width: 1.6; stroke-dasharray: 4 7; }
.gh-flow--acc { stroke: var(--gh-acc); stroke-width: 2; }

.gh-code { fill: rgba(40, 40, 40, .5); transform-box: fill-box; transform-origin: left center; }
.gh-code--acc { fill: var(--gh-acc); }
.gh-code--dim { fill: rgba(40, 40, 40, .2); }
.gh-cursor { fill: var(--gh-acc); }
.gh-hero-block { fill: var(--gh-acc); }
.gh-btn-mini { fill: rgba(255, 255, 255, .92); }
.gh-card { fill: rgba(40, 40, 40, .04); stroke: rgba(40, 40, 40, .12); }
.gh-rise { transform-box: fill-box; transform-origin: center bottom; }

.gh-led { fill: #3fae5f; }
.gh-led--acc { fill: var(--gh-acc); }
.gh-vent { stroke: rgba(40, 40, 40, .15); stroke-width: 2; stroke-linecap: round; }
.gh-activity { fill: var(--gh-acc); transform-box: fill-box; transform-origin: left center; opacity: .8; }
.gh-track-path { fill: none; stroke: rgba(40, 40, 40, .12); stroke-width: 1.4; }
.gh-packet { fill: none; stroke: var(--gh-acc); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 34; opacity: 0; }
.gh-globe-ring { fill: rgba(255, 255, 255, .7); stroke: rgba(40, 40, 40, .5); stroke-width: 1.6; }
.gh-globe-lat, .gh-meridian { fill: none; stroke: rgba(40, 40, 40, .22); stroke-width: 1.2; }
.gh-meridian { transform-box: fill-box; transform-origin: center; transform: scaleX(.45); }
.gh-meridian[style*="--i:1"] { transform: scaleX(.15); }
.gh-meridian[style*="--i:2"] { transform: scaleX(.8); }
.gh-shield { fill: var(--gh-acc); stroke: none; }

/* ---------- Animationen (nur bei erlaubter Bewegung, nur aktive Folie) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.is-active .gh-float { animation: gh-float 7s ease-in-out infinite; }
	.is-active .gh-float--b { animation-duration: 8.5s; animation-delay: -2s; }
	.is-active .gh-float--c { animation-duration: 6.5s; animation-delay: -4s; }

	.is-active .gh-draw { animation: gh-draw 1.6s var(--gh-ease) .5s both; }
	.is-active .gh-house { animation-duration: 2.4s; animation-delay: .2s; }

	/* Business Central */
	.is-active .gh-bar { animation: gh-grow 1s var(--gh-ease) calc(var(--i) * 90ms + 300ms) both, gh-breathe 3.6s ease-in-out calc(var(--i) * 260ms + 1.5s) infinite alternate; }
	.is-active .gh-pop { animation: gh-pop .6s var(--gh-ease) 1.9s both; }
	.is-active .gh-ring { animation: gh-ring 1.8s var(--gh-ease) .6s both; }
	.is-active .gh-badge { animation: gh-pop .6s var(--gh-ease) 1.2s both; }
	.is-active .gh-scene--bc .gh-stroke-white { animation-delay: 1.5s; }

	/* KI */
	.is-active .gh-pulse { animation: gh-pulse 2.6s cubic-bezier(.45, 0, .2, 1) calc(var(--i) * 430ms + .4s) infinite; }
	.is-active .gh-node { animation: gh-node-in .7s var(--gh-ease) calc(var(--i) * 40ms + .1s) both, gh-node-glow 2.6s ease-in-out calc(var(--i) * 170ms + 1s) infinite; }
	.is-active .gh-wave { animation: gh-wave 2.6s ease-out calc(var(--i) * 300ms + 1s) infinite; }
	.is-active .gh-typing { animation: gh-typing 1.2s ease-in-out calc(var(--i) * 160ms) infinite; }
	.is-active .gh-grow-x { animation: gh-grow-x 3.2s var(--gh-ease) .6s infinite; }

	/* KNX */
	.is-active .gh-win { animation: gh-light 6s ease-in-out calc(var(--i) * 700ms + 1.4s) infinite; }
	.is-active .gh-blind { animation: gh-blind 6s ease-in-out 1.8s infinite; }
	.is-active .gh-flow { animation: gh-flow 1.2s linear infinite; }
	.is-active .gh-wave--big { animation: gh-wave-big 3s ease-out calc(var(--i) * 500ms + .8s) infinite; }
	.is-active .gh-scene--knx .gh-ring { animation: gh-ring 2s var(--gh-ease) 1s both; }

	/* Software */
	.is-active .gh-code { animation: gh-type 7s var(--gh-ease) calc(var(--i) * 220ms + .3s) infinite both; }
	.is-active .gh-cursor { animation: gh-blink 1s steps(1) infinite; }
	.is-active .gh-rise { animation: gh-rise .9s var(--gh-ease) calc(var(--i) * 120ms + 1s) both; }
	.is-active .gh-scene--sw .gh-flow--acc { animation: gh-flow 1s linear infinite; }

	/* Hosting */
	.is-active .gh-led { animation: gh-led var(--d) steps(2, jump-none) infinite; }
	.is-active .gh-activity { animation: gh-activity 1.8s ease-in-out calc(var(--i) * 230ms) infinite alternate; }
	.is-active .gh-packet { animation: gh-packet 2.2s linear calc(var(--i) * 500ms) infinite; }
	.is-active .gh-meridian { animation: gh-spin 6s linear calc(var(--i) * -2s) infinite; }
	.is-active .gh-shield { animation: gh-pop .7s var(--gh-ease) .9s both; transform-box: fill-box; transform-origin: center; }
	.is-active .gh-scene--host .gh-stroke-white { animation-delay: 1.4s; }

	.gh-btn { will-change: transform; }
}

@keyframes gh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes gh-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes gh-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes gh-breathe { from { transform: scaleY(1); } to { transform: scaleY(.78); } }
@keyframes gh-pop { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes gh-ring { from { stroke-dasharray: 0 100; } }
@keyframes gh-pulse { 0% { stroke-dashoffset: 14; opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes gh-node-in { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes gh-node-glow { 0%, 100% { stroke: rgba(40, 40, 40, .45); } 50% { stroke: var(--gh-acc); } }
@keyframes gh-wave { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes gh-wave-big { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes gh-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes gh-grow-x { 0% { transform: scaleX(0); } 45%, 80% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes gh-light { 0%, 100% { fill: rgba(40, 40, 40, .05); } 18%, 55% { fill: rgba(237, 95, 48, .85); } 70% { fill: rgba(40, 40, 40, .05); } }
@keyframes gh-blind { 0%, 100% { transform: translateY(-55px); } 40%, 70% { transform: translateY(0); } }
@keyframes gh-flow { to { stroke-dashoffset: -22; } }
@keyframes gh-type { 0% { transform: scaleX(0); } 8%, 82% { transform: scaleX(1); } 92%, 100% { transform: scaleX(0); } }
@keyframes gh-blink { 50% { opacity: 0; } }
@keyframes gh-rise { from { transform: translateY(18px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gh-led { 0% { opacity: 1; } 100% { opacity: .25; } }
@keyframes gh-activity { from { transform: scaleX(.15); } to { transform: scaleX(1); } }
@keyframes gh-packet { 0% { stroke-dashoffset: 40; opacity: 0; } 10%, 90% { opacity: 1; } 100% { stroke-dashoffset: -120; opacity: 0; } }
@keyframes gh-spin { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
	.gh-hero *, .gh-hero { transition-duration: .01ms !important; animation: none !important; }
	.gh-tab.is-active .gh-tab-fill { transform: scaleX(1); }
}

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
	.gh-hero { min-height: 0; }
	.gh-stage { padding: 28px 20px 96px; justify-content: flex-start; }
	.gh-slide { grid-template-columns: 1fr; gap: 12px; align-content: start; }
	.gh-visual { order: -1; max-width: 460px; margin: 0 auto; width: 100%; }
	.gh-scene { max-height: 280px; }
	.gh-copy { max-width: none; }
	.gh-title { font-size: clamp(26px, 6.4vw, 34px) !important; }
	.gh-text { font-size: 16px; margin-bottom: 24px !important; }
	.gh-nav { left: 20px; right: 20px; bottom: 28px; gap: 12px; }
	.gh-tabs { gap: 8px; }
	.gh-tab { font-size: 11px; }
}
@media (max-width: 520px) {
	.gh-tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}