*{box-sizing:border-box}

html,body{width:100%;height:100%;margin:0;background:#080b12;color:#fff}

body{overflow:hidden;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

button,a{font:inherit}

button{border:0;color:inherit}

.experience{position:relative;width:100vw;height:100dvh;overflow:hidden}

.site-header{position:fixed;inset:0 0 auto 0;z-index:1000;height:100px;background:rgba(8,11,18,.9);border-bottom:1px solid rgba(255,255,255,.1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}

.header__content{width:100%;max-width:1200px;height:100%;margin:auto;padding:0 24px;display:flex;align-items:center;gap:40px}

.logo{flex:0 0 auto;display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;white-space:nowrap}

.logo__mark{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#fff;color:#080b12;font-size:.85rem;font-weight:900}

.logo__text{font-size:1rem;font-weight:800}

.header-nav{flex:1;height:100%;display:flex;align-items:center;justify-content:flex-end;overflow:hidden}

.header-nav__list{display:flex;align-items:center;justify-content:flex-end;gap:6px;width:max-content;height:100%;margin:0;padding:0;list-style:none}

.header-nav__list li{flex:0 0 auto}

.header-nav__button{position:relative;height:44px;padding:0 15px;border-radius:12px;background:transparent;color:rgba(255,255,255,.58);font-size:.88rem;font-weight:600;white-space:nowrap;cursor:pointer}

.header-nav__button:hover,.header-nav__button.is-active{color:#fff;background:rgba(255,255,255,.1)}

.header-nav__button.is-active::after{content:"";position:absolute;left:15px;right:15px;bottom:4px;height:2px;border-radius:2px;background:#fff}

.panel-track{position:absolute;top:100px;left:0;width:100%;height:calc(100dvh - 100px);display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}

.panel-track::-webkit-scrollbar{display:none}

.panel-page{flex:0 0 100vw;width:100vw;height:100%;display:flex;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always}

.panel{position:relative;flex:0 0 var(--panel-width);width:var(--panel-width);height:100%;overflow-x:hidden;overflow-y:auto;padding:60px max(24px,calc(env(safe-area-inset-right) + 24px)) 100px max(24px,calc(env(safe-area-inset-left) + 24px));scroll-snap-align:none}

.panel-spacer{flex:0 0 var(--side-space);width:var(--side-space);height:100%;pointer-events:none}

/* Mobile + Tablet: exactly 1 panel visible */ @media(max-width:1199px){
	.panel{--panel-width:100vw}

}

/* Desktop: exactly 3 panels visible */ @media(min-width:1200px){
	.panel{--panel-width:33.3333333333vw}

}

.panel--one{background:radial-gradient(circle at 20% 20%,rgba(59,130,246,.3),transparent 40%),linear-gradient(135deg,#0f172a,#172554)}

.panel--two{background:radial-gradient(circle at 80% 20%,rgba(16,185,129,.28),transparent 40%),linear-gradient(135deg,#052e2b,#064e3b)}

.panel--three{background:radial-gradient(circle at 20% 70%,rgba(245,158,11,.3),transparent 40%),linear-gradient(135deg,#451a03,#713f12)}

.panel--four{background:radial-gradient(circle at 80% 30%,rgba(168,85,247,.32),transparent 40%),linear-gradient(135deg,#3b0764,#581c87)}

.panel--five{background:radial-gradient(circle at 20% 30%,rgba(244,63,94,.3),transparent 40%),linear-gradient(135deg,#450a0a,#7f1d1d)}

.panel--six{background:radial-gradient(circle at 80% 70%,rgba(6,182,212,.3),transparent 40%),linear-gradient(135deg,#083344,#164e63)}

.panel__inner{width:100%;max-width:1100px;margin:auto}

.panel__number{display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;padding:8px 13px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.08);font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}

.panel__number span{width:7px;height:7px;border-radius:50%;background:#fff}

.panel h1{max-width:900px;margin:0 0 24px;font-size:clamp(2.5rem,6vw,6.5rem);line-height:.95;letter-spacing:-.055em}

.panel h2{margin:60px 0 18px;font-size:clamp(1.5rem,3vw,2.5rem)}

.panel__lead{max-width:760px;margin:0 0 35px;color:rgba(255,255,255,.78);font-size:clamp(1rem,2vw,1.3rem);line-height:1.7}

.panel p{max-width:760px;color:rgba(255,255,255,.72);font-size:1rem;line-height:1.8}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:40px}

.card{min-height:180px;padding:24px;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:rgba(255,255,255,.07)}

.card strong{display:block;margin-bottom:10px;font-size:1.1rem}

.card span{color:rgba(255,255,255,.62);font-size:.92rem;line-height:1.6}

.navigation{position:fixed;left:50%;bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));transform:translateX(-50%);z-index:1100;display:flex;align-items:center;gap:8px;padding:8px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(10,12,18,.75);backdrop-filter:blur(20px);box-shadow:0 15px 50px rgba(0,0,0,.35)}

.nav-button{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.09);cursor:pointer}

.nav-button:hover{background:rgba(255,255,255,.18)}

.nav-button:disabled{opacity:.25;cursor:default}

.nav-button svg{width:18px;height:18px}

.dots{display:flex;align-items:center;gap:6px;padding:0 8px}

.dot{width:7px;height:7px;padding:0;border-radius:999px;background:rgba(255,255,255,.25);cursor:pointer}

.dot.is-active{width:22px;background:#fff}

.progress{display:none}

.progress__bar{display:none}

@media(max-width:599px){
	.header__content{gap:18px;padding:0 16px}

	.logo__text{display:none}

	.logo__mark{width:40px;height:40px}

	.header-nav__list{justify-content:flex-end;overflow:hidden}

	.header-nav__button{padding:0 11px;font-size:.82rem}

	.panel{padding-top:45px}

}

/* ========================================================= VERTIKALE PANEL-SCROLLBARS Mobile + Tablet: unsichtbar Desktop: nur schmaler Thumb, transparenter Track ========================================================= */ /* Firefox: auf Mobile/Tablet vollständig verstecken */ .panel {
	scrollbar-width: none;

}

/* Chromium / Safari: auf Mobile/Tablet vollständig verstecken */ .panel::-webkit-scrollbar {
	width: 0;
	height: 0;

}

/* Desktop ab 1200px */ @media (min-width: 1200px) {
	.panel {
		/* Firefox */ scrollbar-width: thin;
		scrollbar-color: rgba(255, 255, 255, .45) transparent;

	}

	/* Chromium / Edge / Safari */ .panel::-webkit-scrollbar {
		width: 7px;
		height: 0;

	}

	/* Vollständig transparenter Hintergrund */ .panel::-webkit-scrollbar-track {
		background: transparent;

	}

	/* Nur der eigentliche Drag/Thumb */ .panel::-webkit-scrollbar-thumb {
		background: rgba(255, 255, 255, .45);
		border: 0;
		border-radius: 999px;
		min-height: 40px;

	}

	.panel::-webkit-scrollbar-thumb:hover {
		background: rgba(255, 255, 255, .70);

	}

	/* Keine Scroll-Up-/Scroll-Down-Pfeile */ .panel::-webkit-scrollbar-button {
		display: none;
		width: 0;
		height: 0;

	}

	.panel::-webkit-scrollbar-corner {
		background: transparent;

	}

}

/* ========================================================= CUSTOM PANEL SCROLLBAR Die native Browser-Scrollbar ist vollständig verborgen. Der eigene Thumb liegt außerhalb des scrollenden Panels, damit er nicht selbst mit dem Panel-Inhalt mitscrollt. ========================================================= */ .panel {
	scrollbar-width: none;
	-ms-overflow-style: none;

}

.panel::-webkit-scrollbar, .panel::-webkit-scrollbar-button, .panel::-webkit-scrollbar-track, .panel::-webkit-scrollbar-thumb, .panel::-webkit-scrollbar-corner {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	background: transparent !important;

}

/* Desktop */ .panel-scrollbar {
	display: none;
	opacity: 0;
	transition: opacity .18s ease;

}

@media (min-width: 1200px) {
	.panel-scrollbar {
		position: fixed;
		z-index: 1300;
		width: 4px;
		pointer-events: none;
		background: transparent;

	}

	.panel-scrollbar__thumb {
		position: absolute;
		top: 0;
		left: 0;
		width: 4px;
		min-height: 40px;
		border-radius: 999px;
		background: rgba(255,255,255,.45);
		pointer-events: auto;
		cursor: grab;
		transition: background .15s ease;

	}

	.panel-scrollbar__thumb:hover, .panel-scrollbar__thumb.is-dragging {
		background: rgba(255,255,255,.72);

	}

	.panel-scrollbar__thumb.is-dragging {
		cursor: grabbing;

	}

}

/* ========================================================= MOBILE BURGER-MENÜ Ab 600px bleibt die normale Navigation erhalten. ========================================================= */ .burger-button {
	display: none;
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	padding: 9px;
	border-radius: 12px;
	background: transparent;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	gap: 5px;

}

.burger-button span {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: #fff;
	transition: transform .2s ease, opacity .2s ease;

}

.burger-button.is-open span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);

}

.burger-button.is-open span:nth-child(2) {
	opacity: 0;

}

.burger-button.is-open span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);

}

@media (max-width: 600px) {
	.header__content {
		position: relative;
		gap: 0;

	}

	.burger-button {
		display: flex;
		margin-left: auto;

	}

	.header-nav {
		position: absolute;
		top: 100%;
		left: 16px;
		right: 16px;
		width: auto;
		height: auto;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: max-height .25s ease, opacity .2s ease, transform .25s ease, visibility .25s ease;
		border: 1px solid rgba(255,255,255,.12);
		border-radius: 18px;
		background: rgba(8,11,18,.96);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		box-shadow: 0 20px 50px rgba(0,0,0,.35);

	}

	.header-nav.is-open {
		max-height: 360px;
		opacity: 1;
		visibility: visible;
		transform: translateY(0);

	}

	.header-nav__list {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 4px;
		padding: 10px;

	}

	.header-nav__list li {
		width: 100%;

	}

	.header-nav__button {
		width: 100%;
		height: 48px;
		padding: 0 14px;
		text-align: left;
		border-radius: 11px;

	}

	.header-nav__button.is-active::after {
		left: 14px;
		right: auto;
		bottom: 7px;
		width: 24px;

	}

}