/* CLOUDSYSTEMS v2 — Globe UI Layer */

@font-face {
	font-family: 'JetBrains Mono';
	src: url('../assets/fonts/jetbrains/jetbrainsmono-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'JetBrains Mono';
	src: url('../assets/fonts/jetbrains/jetbrainsmono-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--cs-bg: #05070b;
	--cs-bg-soft: #0a0e14;
	--cs-cyan: #35d8ff;
	--cs-red: #ff2e2e;
	--cs-green: #c1ff3a;
	--cs-text: #f2f5f7;
	--cs-dim: #8b94a0;
	--cs-line: rgba(255,255,255,0.08);
	--cs-mono: 'JetBrains Mono', monospace;
	--cs-ease: cubic-bezier(0.7, 0, 0.3, 1);
}

/* Preloader komplett ausblenden — Intro läuft über Video-Layer */
#preloader { display: none !important; }

/* ---------- Intro Video (fullscreen, Blur-Übergang zum Globus) ---------- */
#cs-intro {
	position: fixed;
	inset: 0;
	z-index: 9000;
	background: var(--cs-bg);
	overflow: hidden;
	transition: opacity 0.9s var(--cs-ease), filter 0.9s var(--cs-ease);
}
#cs-intro video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
#cs-intro.cs-intro-out {
	opacity: 0;
	filter: blur(28px) brightness(1.6);
	pointer-events: none;
}
#cs-skip {
	position: absolute;
	right: 28px;
	bottom: 24px;
	z-index: 9001;
	font-family: var(--cs-mono);
	font-size: 11px;
	letter-spacing: 0.35em;
	color: var(--cs-cyan);
	text-decoration: none;
	padding: 10px 18px;
	border: 1px solid rgba(53, 216, 255, 0.35);
	background: rgba(5, 7, 11, 0.55);
	text-shadow: 0 0 12px rgba(53, 216, 255, 0.7);
	transition: border-color 0.2s, background 0.2s, color 0.2s;
}
#cs-skip:hover {
	border-color: var(--cs-cyan);
	background: rgba(53, 216, 255, 0.12);
}

/* ---------- Scanlines / Vignette (CRT-Kante) ---------- */
#cs-scanlines {
	position: fixed;
	inset: 0;
	z-index: 8000;
	pointer-events: none;
	background: repeating-linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.018) 0px,
		rgba(255, 255, 255, 0.018) 1px,
		transparent 1px,
		transparent 4px
	);
	mix-blend-mode: overlay;
}
#cs-vignette {
	position: fixed;
	inset: 0;
	z-index: 8001;
	pointer-events: none;
	background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
}

/* ---------- Status-Ticker (Signature Move, grüne Terminal-Ebene) ---------- */
.cs-status {
	position: fixed;
	z-index: 60;
	font-family: var(--cs-mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	color: var(--cs-green);
	opacity: 0;
	text-shadow: 0 0 8px rgba(193, 255, 58, 0.5);
	pointer-events: none;
	white-space: nowrap;
}
#cs-status-left { left: 26px; bottom: 120px; }
#cs-status-right { right: 26px; bottom: 170px; text-align: right; }

/* ---------- Ring-Pulse (Klick-Feedback) ---------- */
#cs-ring, #cs-ring2 {
	position: fixed;
	left: 50%;
	top: 50%;
	width: 40vmin;
	height: 40vmin;
	margin-left: -20vmin;
	margin-top: -20vmin;
	border-radius: 50%;
	border: 2px solid var(--cs-red);
	box-shadow: 0 0 40px rgba(255, 46, 46, 0.5), inset 0 0 40px rgba(255, 46, 46, 0.25);
	opacity: 0;
	pointer-events: none;
	z-index: 55;
}
#cs-ring2 { border-color: var(--cs-cyan); box-shadow: 0 0 40px rgba(53, 216, 255, 0.4); }
#cs-ring.cs-pulse { animation: csPulse 0.9s var(--cs-ease) forwards; }
#cs-ring2.cs-pulse { animation: csPulse 1.15s var(--cs-ease) 0.08s forwards; }
@keyframes csPulse {
	0% { opacity: 0.9; transform: scale(0.25); }
	100% { opacity: 0; transform: scale(2.6); }
}

/* ---------- About-Popup (klein, Terminal-Stil) ---------- */
#cs-about {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 380px;
	max-width: calc(100vw - 48px);
	z-index: 8500;
	background: rgba(10, 14, 20, 0.92);
	border: 1px solid rgba(53, 216, 255, 0.35);
	box-shadow: 0 0 60px rgba(53, 216, 255, 0.15), 0 0 120px rgba(0, 0, 0, 0.8);
	font-family: var(--cs-mono);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s var(--cs-ease), visibility 0.25s;
	backdrop-filter: blur(6px);
}
#cs-about.cs-open { opacity: 1; visibility: visible; }
.cs-box-head {
	padding: 12px 18px;
	font-size: 12px;
	letter-spacing: 0.3em;
	color: var(--cs-cyan);
	border-bottom: 1px solid var(--cs-line);
	text-shadow: 0 0 10px rgba(53, 216, 255, 0.6);
}
.cs-box-body { padding: 18px; font-size: 12px; line-height: 1.8; color: var(--cs-text); }
.cs-box-body p { margin: 0 0 12px; }
.cs-dim { color: var(--cs-dim); }
.cs-box-close {
	display: block;
	padding: 12px 18px;
	font-size: 11px;
	letter-spacing: 0.25em;
	color: var(--cs-red);
	text-decoration: none;
	border-top: 1px solid var(--cs-line);
	transition: background 0.2s;
}
.cs-box-close:hover { background: rgba(255, 46, 46, 0.08); }

/* ---------- Produkte-Flyout (radial, Desktop-Hover) ---------- */
#cs-flyout {
	position: fixed;
	z-index: 70;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.25s var(--cs-ease);
}
#cs-flyout.cs-open { opacity: 1; pointer-events: auto; }
.cs-fly-item {
	position: absolute;
	transform: translate(-50%, -50%);
	font-family: var(--cs-mono);
	font-size: 10px;
	letter-spacing: 0.3em;
	color: var(--cs-cyan);
	text-decoration: none;
	padding: 8px 14px;
	border: 1px solid rgba(53, 216, 255, 0.3);
	background: rgba(5, 7, 11, 0.7);
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.3s var(--cs-ease), border-color 0.2s, background 0.2s;
	text-shadow: 0 0 10px rgba(53, 216, 255, 0.5);
}
#cs-flyout.cs-open .cs-fly-item { opacity: 1; }
.cs-fly-item:hover {
	border-color: var(--cs-red);
	color: var(--cs-red);
	text-shadow: 0 0 10px rgba(255, 46, 46, 0.7);
	background: rgba(255, 46, 46, 0.08);
}

/* ---------- Produkte-Fullscreen-Overlay ---------- */
#cs-products {
	position: fixed;
	inset: 0;
	z-index: 8600;
	background: rgba(5, 7, 11, 0.94);
	backdrop-filter: blur(10px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s var(--cs-ease), visibility 0.5s;
	overflow-y: auto;
}
#cs-products.cs-open { opacity: 1; visibility: visible; }
#cs-products-close {
	position: fixed;
	top: 26px;
	right: 30px;
	width: 54px;
	height: 54px;
	z-index: 8601;
	display: block;
	transition: transform 0.3s var(--cs-ease);
}
#cs-products-close:hover { transform: rotate(90deg); }
#cs-products-close svg { width: 100%; height: 100%; }
.cs-products-inner {
	max-width: 860px;
	margin: 0 auto;
	padding: 90px 28px 60px;
}
.cs-products-title {
	font-family: var(--cs-mono);
	font-size: 13px;
	letter-spacing: 0.4em;
	color: var(--cs-cyan);
	margin-bottom: 34px;
	text-shadow: 0 0 12px rgba(53, 216, 255, 0.6);
}
.cs-product {
	display: block;
	text-decoration: none;
	padding: 22px 24px;
	margin-bottom: 14px;
	border: 1px solid var(--cs-line);
	background: rgba(10, 14, 20, 0.6);
	transition: border-color 0.2s var(--cs-ease), background 0.2s var(--cs-ease), transform 0.25s var(--cs-ease);
	position: relative;
}
.cs-product:hover {
	border-color: rgba(53, 216, 255, 0.6);
	background: rgba(53, 216, 255, 0.05);
	transform: translateX(6px);
}
.cs-product-name {
	font-family: var(--cs-mono);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.2em;
	color: var(--cs-text);
	margin-bottom: 8px;
}
.cs-product:hover .cs-product-name {
	color: var(--cs-cyan);
	text-shadow: 0 0 14px rgba(53, 216, 255, 0.6);
}
.cs-product-desc {
	font-family: var(--cs-mono);
	font-size: 12px;
	line-height: 1.7;
	color: var(--cs-dim);
	padding-right: 70px;
}
.cs-product-open {
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--cs-mono);
	font-size: 11px;
	letter-spacing: 0.25em;
	color: var(--cs-red);
	opacity: 0.6;
	transition: opacity 0.2s;
}
.cs-product:hover .cs-product-open { opacity: 1; }

/* ---------- Produkt-Detailansichten (im selben Overlay, breiter) ---------- */
#cs-products.cs-detail-mode .cs-products-inner { display: none; }
.cs-detail { display: none; }
.cs-detail.cs-open { display: block; }
.cs-detail-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 90px 28px 70px;
}
.cs-back {
	display: inline-block;
	font-family: var(--cs-mono);
	font-size: 11px;
	letter-spacing: 0.25em;
	color: var(--cs-dim);
	text-decoration: none;
	margin-bottom: 34px;
	transition: color 0.2s;
	cursor: pointer;
}
.cs-back:hover { color: var(--cs-cyan); }
.cs-detail-head {
	border-bottom: 1px solid var(--cs-line);
	padding-bottom: 28px;
}
.cs-badge {
	display: inline-block;
	font-family: var(--cs-mono);
	font-size: 10px;
	letter-spacing: 0.35em;
	color: var(--cs-green);
	border: 1px solid rgba(193, 255, 58, 0.35);
	padding: 7px 14px;
	text-shadow: 0 0 8px rgba(193, 255, 58, 0.5);
}
.cs-badge-soon {
	color: var(--cs-red);
	border-color: rgba(255, 46, 46, 0.4);
	text-shadow: 0 0 8px rgba(255, 46, 46, 0.5);
}
.cs-detail-name {
	font-family: var(--cs-mono);
	font-weight: 700;
	font-size: clamp(28px, 4.5vw, 46px);
	letter-spacing: 0.15em;
	color: var(--cs-text);
	margin: 18px 0 16px;
	text-shadow: 0 0 18px rgba(53, 216, 255, 0.35);
}
.cs-detail-lead {
	font-family: var(--cs-mono);
	font-size: 13px;
	line-height: 2;
	color: var(--cs-dim);
	max-width: 780px;
	margin: 0 0 8px;
}
.cs-sec-title {
	font-family: var(--cs-mono);
	font-size: 11px;
	letter-spacing: 0.35em;
	color: var(--cs-cyan);
	margin: 48px 0 20px;
	text-shadow: 0 0 10px rgba(53, 216, 255, 0.5);
}
.cs-video-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.cs-video { margin: 0; }
.cs-video video {
	width: 100%;
	display: block;
	background: #000;
	border: 1px solid var(--cs-line);
}
.cs-video figcaption {
	font-family: var(--cs-mono);
	font-size: 11px;
	line-height: 1.8;
	color: var(--cs-dim);
	padding: 10px 2px 0;
}
.cs-video figcaption strong {
	display: block;
	color: var(--cs-text);
	letter-spacing: 0.12em;
	margin-bottom: 4px;
}
.cs-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.cs-steps-3 { grid-template-columns: repeat(3, 1fr); }
.cs-step {
	border: 1px solid var(--cs-line);
	background: rgba(10, 14, 20, 0.6);
	padding: 18px;
}
.cs-step h4 {
	font-family: var(--cs-mono);
	font-size: 12px;
	letter-spacing: 0.15em;
	color: var(--cs-cyan);
	margin: 0 0 10px;
}
.cs-step p {
	font-family: var(--cs-mono);
	font-size: 11px;
	line-height: 1.9;
	color: var(--cs-dim);
	margin: 0;
}
.cs-shot-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.cs-shot {
	margin: 0;
	border: 1px solid var(--cs-line);
	background: rgba(10, 14, 20, 0.6);
	transition: border-color 0.2s;
}
.cs-shot:hover { border-color: rgba(53, 216, 255, 0.5); }
.cs-shot img { width: 100%; display: block; }
.cs-shot figcaption {
	font-family: var(--cs-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	color: var(--cs-dim);
	padding: 8px 10px;
}
.cs-facts {
	font-family: var(--cs-mono);
	font-size: 12px;
	line-height: 2.2;
	color: var(--cs-text);
	margin: 0;
	padding: 0;
	max-width: 780px;
}
.cs-facts li { list-style: none; }
.cs-facts li::before { content: '> '; color: var(--cs-cyan); }
.cs-inline-link {
	display: inline-block;
	font-family: var(--cs-mono);
	font-size: 11px;
	letter-spacing: 0.25em;
	color: var(--cs-cyan);
	text-decoration: none;
	border: 1px solid rgba(53, 216, 255, 0.3);
	padding: 10px 18px;
	margin-top: 8px;
	transition: border-color 0.2s, background 0.2s;
	cursor: pointer;
}
.cs-inline-link:hover {
	border-color: var(--cs-cyan);
	background: rgba(53, 216, 255, 0.08);
}
.cs-cta-row {
	margin-top: 54px;
	border-top: 1px solid var(--cs-line);
	padding-top: 34px;
}
.cs-cta {
	display: inline-block;
	font-family: var(--cs-mono);
	font-size: 12px;
	letter-spacing: 0.3em;
	color: var(--cs-cyan);
	text-decoration: none;
	border: 1px solid rgba(53, 216, 255, 0.4);
	padding: 14px 30px;
	margin-top: 10px;
	transition: background 0.2s, border-color 0.2s;
}
.cs-cta:hover {
	background: rgba(53, 216, 255, 0.1);
	border-color: var(--cs-cyan);
}

/* ---------- Sprachschalter (oben rechts) ---------- */
#cs-lang {
	position: fixed;
	top: 26px;
	right: 104px;
	z-index: 8700;
	font-family: var(--cs-mono);
	font-size: 11px;
	letter-spacing: 0.25em;
	color: var(--cs-dim);
}
/* Produkte-Popup hat oben rechts sein X — Langswitch dann ausblenden */
body.cs-products-open #cs-lang { display: none; }
#cs-lang button {
	background: none;
	border: none;
	padding: 4px 6px;
	font: inherit;
	letter-spacing: inherit;
	color: var(--cs-dim);
	cursor: pointer;
	transition: color 0.2s, text-shadow 0.2s;
}
#cs-lang button:hover { color: var(--cs-text); }
#cs-lang button.active {
	color: var(--cs-cyan);
	text-shadow: 0 0 10px rgba(53, 216, 255, 0.7);
}

/* ---------- Lade-Indikator (Fragment nachladen) ---------- */
.cs-loading {
	font-family: var(--cs-mono);
	font-size: 11px;
	letter-spacing: 0.3em;
	color: var(--cs-green);
	padding: 40px 0;
	text-shadow: 0 0 8px rgba(193, 255, 58, 0.5);
	animation: csBlink 1s steps(2) infinite;
}
@keyframes csBlink { 50% { opacity: 0.25; } }

/* ---------- Custom Cursor (PLAN 4.3) ---------- */
#cs-cursor {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9500;
	pointer-events: none;
	display: none;
	font-family: var(--cs-mono);
	will-change: transform;
}
#cs-cursor::before {
	content: '+';
	position: absolute;
	left: -5px;
	top: -7px;
	font-size: 12px;
	color: var(--cs-cyan);
	text-shadow: 0 0 8px rgba(53, 216, 255, 0.8);
}
#cs-cursor::after {
	content: '';
	position: absolute;
	left: -12px;
	top: -12px;
	width: 24px;
	height: 24px;
	border: 1px solid rgba(53, 216, 255, 0.55);
	border-radius: 50%;
	box-shadow: 0 0 10px rgba(53, 216, 255, 0.25);
}
#cs-cursor.cs-hot::before { color: var(--cs-red); text-shadow: 0 0 8px rgba(255, 46, 46, 0.8); }
#cs-cursor.cs-hot::after { border-color: rgba(255, 46, 46, 0.65); box-shadow: 0 0 10px rgba(255, 46, 46, 0.3); }
#cs-cursor-label {
	position: absolute;
	left: 12px;
	top: -6px;
	font-size: 9px;
	letter-spacing: 0.3em;
	white-space: nowrap;
	color: var(--cs-cyan);
	text-shadow: 0 0 8px rgba(53, 216, 255, 0.7);
}
.cs-click-pulse {
	position: fixed;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border: 1px solid var(--cs-cyan);
	border-radius: 50%;
	pointer-events: none;
	z-index: 9499;
	animation: csClickPulse 0.5s var(--cs-ease) forwards;
}
@keyframes csClickPulse {
	0% { opacity: 0.9; transform: scale(0.4); }
	100% { opacity: 0; transform: scale(3.2); }
}
@media (hover: hover) and (pointer: fine) {
	body.cs-custom-cursor, body.cs-custom-cursor * { cursor: none !important; }
	#cs-cursor { display: block; }
}

/* ---------- Mobile ---------- */
@media (hover: none) {
	#cs-flyout { display: none; }
}
@media (max-width: 768px) {
	.cs-product-desc { padding-right: 0; }
	.cs-product-open { position: static; transform: none; margin-top: 12px; opacity: 1; }
	.cs-products-inner { padding: 80px 18px 40px; }
	.cs-detail-inner { padding: 80px 18px 50px; }
	.cs-video-grid { grid-template-columns: 1fr; }
	.cs-steps, .cs-steps-3 { grid-template-columns: 1fr; }
	.cs-shot-grid { grid-template-columns: 1fr 1fr; }
	.cs-status { display: none; }
	#cs-skip { right: 16px; bottom: 16px; }
	/* Langswitch kleiner, ganz rechts in der Ecke */
	#cs-lang { top: 18px; right: 16px; font-size: 10px; }
	#cs-products-close { width: 44px; height: 44px; top: 16px; right: 16px; }
}

/* ---------- Globus-Chrome auf kleinen Screens (Original-Layout haelt nichts her) ---------- */
/* "THESE ARE BOOK LOCATIONS"-Tagline des Originals — bei uns ueberall aus */
#tutorial { display: none !important; }

@media (max-width: 600px) {
	/* Original blendet #header komplett aus — wir brauchen ihn (About-Popup) */
	#header {
		display: block;
		top: 96px;
		width: 260px;
		margin-left: -130px;
		font-size: 10px;
		line-height: 13px;
		z-index: 50;
	}
	#header strong { font-size: 22px; letter-spacing: 0.06em; }

	/* Settings-Balken, Minimap, FPS, AUTO-Link: weg — der Globus braucht die Flaeche */
	#settings-left,
	#settings-right,
	#minimap,
	#minimapBackground,
	#rotationMode,
	#fps,
	#stats { display: none !important; }

	/* Groessere Tap-Targets in der Nav */
	#nav-left a, #nav-right a { padding: 8px 2px; }

	/* Custom Cursor auf Touch sicher aus (hover:none greift nicht immer) */
	#cs-cursor { display: none !important; }
}

/* Portrait: Intro-Video komplett zeigen statt es zu croppen (cover zoomt rein) */
@media (orientation: portrait) {
	#cs-intro video { object-fit: contain; }
}
@media (min-width: 769px) and (max-width: 1100px) {
	.cs-steps { grid-template-columns: 1fr 1fr; }
	.cs-shot-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	#cs-intro { display: none; }
	.cs-status { display: none; }
}