/*
 * tpl_imhof_cyber – home.css (v3)
 * Startseite mit 3D-Bühnen, Storytelling, Mauszeiger-Effekten und einheitliche Unterseiten.
 * (C) 2026 Webdesign Imhof, Mannheim
 */

/* ======================================================================
   Hintergrund mit Lichtkegel unter dem Mauszeiger
   ====================================================================== */
.backdrop {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(55% 45% at 85% 0%, rgba(127, 0, 255, 0.16), transparent 70%),
		radial-gradient(45% 40% at 5% 10%, rgba(0, 242, 254, 0.08), transparent 70%),
		var(--c-bg);
}

.backdrop::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 600ms var(--ease);
	background: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(0, 242, 254, 0.09), transparent 70%);
}

.has-cursor .backdrop::before { opacity: 1; }

.backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(0, 242, 254, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 242, 254, 0.045) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
}

/* ======================================================================
   Mauszeiger
   ====================================================================== */
.cursor-ring,
.cursor-dot {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0;
	transition: opacity 300ms var(--ease);
}

.has-cursor .cursor-ring,
.has-cursor .cursor-dot { opacity: 1; }

.cursor-ring::before {
	content: "";
	position: absolute;
	left: -18px;
	top: -18px;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(0, 242, 254, 0.7);
	border-radius: 50%;
	box-shadow: 0 0 18px rgba(0, 242, 254, 0.35), inset 0 0 12px rgba(127, 0, 255, 0.25);
	transition: transform 250ms var(--ease), border-color 250ms var(--ease), background-color 250ms var(--ease);
}

.cursor-ring.is-hover::before {
	transform: scale(1.7);
	border-color: rgba(184, 140, 255, 0.9);
	background: rgba(0, 242, 254, 0.06);
}

.cursor-ring.is-down::before { transform: scale(0.8); }

.cursor-dot::before {
	content: "";
	position: absolute;
	left: -2px;
	top: -2px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--c-cyan);
	box-shadow: 0 0 10px var(--c-cyan);
}

/* ======================================================================
   Abschnitte
   ====================================================================== */
.section {
	position: relative;
	padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}

.section--services {
	background: linear-gradient(180deg, rgba(18, 22, 28, 0.55), rgba(18, 22, 28, 0.85));
	border-block: 1px solid var(--c-line-soft);
}

.is-subpage .section { padding-block: var(--space-7); }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 var(--space-3);
	font-family: var(--f-mono);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-cyan);
}

.eyebrow__pulse {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--c-cyan);
	animation: pulse 2.2s infinite;
}

@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(0, 242, 254, 0.55); }
	70% { box-shadow: 0 0 0 10px rgba(0, 242, 254, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 242, 254, 0); }
}

.section__head {
	max-width: 46rem;
	margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.section__head--center {
	margin-inline: auto;
	text-align: center;
}

.section__head--row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4);
	max-width: none;
}

.section__title {
	margin: 0;
	font-family: var(--f-display);
	font-size: var(--fs-h2);
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.section__lead {
	margin: var(--space-4) 0 0;
	font-size: var(--fs-lg);
	color: var(--c-text-muted);
	line-height: 1.55;
}

/* Verlauf im Titel bewegt sich langsam */
.text-gradient {
	background: linear-gradient(100deg, #6AF6FF 0%, var(--c-violet-text) 40%, #6AF6FF 80%);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
	.text-gradient { animation: shimmer 7s linear infinite; }
}

@keyframes shimmer { to { background-position: -200% 0; } }

/* ======================================================================
   Einstieg
   ====================================================================== */
.section--hero {
	padding-top: clamp(1.5rem, 1rem + 3vw, 3.5rem);
	padding-bottom: clamp(2.5rem, 2rem + 3vw, 4rem);
}

.intro {
	display: grid;
	gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
	align-items: center;
}

@media (min-width: 60em) {
	.intro {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		min-height: min(46rem, calc(100svh - var(--header-h) - 3rem));
	}
}

.intro__text { min-width: 0; }

.intro__title {
	margin: 0;
	font-family: var(--f-display);
	font-size: clamp(2rem, 1.2rem + 2.4vw, 3.15rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.intro__lead {
	max-width: 38rem;
	margin: var(--space-5) 0 0;
	font-size: var(--fs-lg);
	line-height: 1.6;
	color: var(--c-text-muted);
}

.intro__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

.intro__actions .btn { transition: transform 200ms var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); }

.intro__promise {
	margin: var(--space-3) 0 0;
	font-size: var(--fs-sm);
	color: var(--c-cyan);
}

.intro__call {
	margin: var(--space-4) 0 0;
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.intro__call a { color: var(--c-text); font-weight: 600; white-space: nowrap; }
.intro__hours { white-space: nowrap; }
.intro__hours::before { content: "·"; margin: 0 0.5em; }

@media (max-width: 30em) {
	.intro__hours { display: block; margin-top: 0.2rem; }
	.intro__hours::before { content: none; }
}

/* Live-KI-Check */
.kiscan {
	max-width: 30rem;
	margin-top: var(--space-6);
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius);
	font-family: var(--f-mono);
	font-size: 0.8rem;
}

.kiscan__head {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 var(--space-3);
	color: var(--c-text);
	letter-spacing: 0.04em;
}

.kiscan__dot {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--c-warn);
}

.kiscan.is-running .kiscan__dot { animation: pulse 1.2s infinite; background: var(--c-cyan); }
.kiscan.is-done .kiscan__dot { background: var(--c-ok); }

.kiscan__live {
	margin-left: auto;
	color: var(--c-text-muted);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	white-space: nowrap;
}

.kiscan__list {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--c-text-muted);
}

.kiscan__list li {
	position: relative;
	overflow-wrap: anywhere;
	padding-left: 1.6em;
	min-height: 1.4em;
}

.kiscan__list li::before {
	content: "○";
	position: absolute;
	left: 0;
	color: var(--c-text-muted);
}

.kiscan__list li.is-checking::before { content: "◌"; color: var(--c-cyan); animation: spin 0.8s linear infinite; }
.kiscan__list li.is-ok { color: var(--c-text); }
.kiscan__list li.is-ok::before { content: "✓"; color: var(--c-ok); }
.kiscan__list li.is-warn::before { content: "!"; color: var(--c-warn); }

@keyframes spin { to { transform: rotate(360deg); } }

/* ======================================================================
   3D-Bühne (Einstieg und Story)
   ====================================================================== */
.stage-box {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background:
		radial-gradient(60% 45% at 50% 40%, rgba(0, 242, 254, 0.10), transparent 70%),
		radial-gradient(70% 50% at 50% 95%, rgba(127, 0, 255, 0.16), transparent 70%),
		#0A0D11;
	border: 1px solid var(--c-line-soft);
}

.stage-box::after {               /* HUD-Ecken */
	content: "";
	position: absolute;
	inset: 10px;
	pointer-events: none;
	background:
		linear-gradient(var(--c-cyan), var(--c-cyan)) top left / 18px 1px,
		linear-gradient(var(--c-cyan), var(--c-cyan)) top left / 1px 18px,
		linear-gradient(var(--c-cyan), var(--c-cyan)) top right / 18px 1px,
		linear-gradient(var(--c-cyan), var(--c-cyan)) top right / 1px 18px,
		linear-gradient(var(--c-cyan), var(--c-cyan)) bottom left / 18px 1px,
		linear-gradient(var(--c-cyan), var(--c-cyan)) bottom left / 1px 18px,
		linear-gradient(var(--c-cyan), var(--c-cyan)) bottom right / 18px 1px,
		linear-gradient(var(--c-cyan), var(--c-cyan)) bottom right / 1px 18px;
	background-repeat: no-repeat;
	opacity: 0.6;
}

.stage-box__canvas,
.stage-box__poster,
.stage-box__labels {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.stage-box__poster {
	object-fit: cover;
	transition: opacity 700ms var(--ease);
}

.stage-box__canvas {
	opacity: 0;
	transition: opacity 700ms var(--ease);
}

.stage-box.is-live .stage-box__canvas { opacity: 1; }
.stage-box.is-live .stage-box__poster { opacity: 0; }

.stage-box__labels {
	pointer-events: none;
	overflow: hidden;
}

.stage-label {
	position: absolute;
	left: 0;
	top: 0;
	padding: 0.2rem 0.55rem;
	border: 1px solid rgba(0, 242, 254, 0.45);
	border-radius: 4px;
	background: rgba(8, 12, 16, 0.75);
	font-family: var(--f-mono);
	font-size: 0.72rem;
	color: #9FF7FF;
	white-space: nowrap;
	opacity: 0;
	will-change: transform;
	transition: background-color 250ms, color 250ms, box-shadow 250ms;
}

.stage-label::after {             /* kleiner Fuß zur Ankerstelle */
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	width: 1px;
	height: 10px;
	background: rgba(0, 242, 254, 0.6);
}

.stage-label--small { font-size: 0.65rem; padding: 0.1rem 0.35rem; }
.stage-label--target.is-hit {
	background: var(--c-cyan);
	color: #04191B;
	box-shadow: 0 0 22px rgba(0, 242, 254, 0.7);
}

/* Einstieg */
.hero3d { margin: 0; min-width: 0; }

.hero3d__frame {
	aspect-ratio: 9 / 11;
	width: 100%;
	max-width: 34rem;
	margin-inline: auto;
}

.hero3d__hint {
	position: absolute;
	right: var(--space-4);
	top: var(--space-4);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	padding: 0.3rem 0.65rem;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	background: rgba(13, 15, 18, 0.7);
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
	pointer-events: none;
}

.hero3d__hint .icon { width: 1em; height: 1em; }

.hero3d__caption {
	max-width: 34rem;
	margin: var(--space-3) auto 0;
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	text-align: center;
	line-height: 1.5;
}

.hero3d__tag {
	display: inline-block;
	margin-right: 0.4em;
	padding: 0 0.45em;
	border: 1px solid var(--c-cyan);
	border-radius: 4px;
	font-family: var(--f-mono);
	font-size: 0.75em;
	color: var(--c-cyan);
	vertical-align: 0.1em;
}

@media (max-width: 59.99em) {
	.hero3d__frame { max-width: 24rem; aspect-ratio: 1 / 1; }
}

/* ======================================================================
   Story: Das Mannheim-Prinzip
   ====================================================================== */
.story {
	display: grid;
	gap: var(--space-5);
}

.story__stage {
	position: sticky;
	top: calc(var(--header-h) + 0.5rem);
	z-index: 2;
	height: 44svh;
}

.story__stage .stage-box { height: 100%; }

.story__chapters {
	display: grid;
	gap: 18svh;
	padding-bottom: 20svh;
}

.chapter {
	min-height: 46svh;
	display: flex;
	align-items: center;
}

.chapter__card {
	width: 100%;
	padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
	border-radius: var(--radius-lg);
	opacity: 0.45;
	transform: scale(0.98);
	transition: opacity 500ms var(--ease), transform 500ms var(--ease), border-color 500ms var(--ease), box-shadow 500ms var(--ease);
}

.chapter.is-active .chapter__card,
.no-js .chapter__card {
	opacity: 1;
	transform: none;
	border-color: var(--c-line);
	box-shadow: var(--glow-cyan);
}

.chapter__place {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin: 0;
	font-family: var(--f-mono);
	font-size: var(--fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-violet-text);
}

.chapter__num {
	padding: 0.1em 0.45em;
	border: 1px solid currentColor;
	border-radius: 4px;
}

.chapter__title {
	margin: var(--space-2) 0 var(--space-3);
	font-family: var(--f-display);
	font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem);
	line-height: 1.1;
}

.chapter__text {
	margin: 0;
	font-size: var(--fs-lg);
	line-height: 1.55;
}

.chapter__list {
	display: grid;
	gap: var(--space-2);
	margin: var(--space-5) 0 0;
	padding: 0;
	list-style: none;
	color: var(--c-text-muted);
	font-size: var(--fs-sm);
}

.chapter__list li {
	position: relative;
	padding-left: 1.5em;
}

.chapter__list li::before {
	content: "";
	position: absolute;
	left: 0.2em;
	top: 0.55em;
	width: 0.55em;
	height: 0.55em;
	border: 1px solid var(--c-cyan);
	transform: rotate(45deg);
}

.chapter__link {
	display: inline-block;
	margin-top: var(--space-5);
	font-weight: 600;
	font-size: var(--fs-sm);
}

.chapter__link::after { content: " →"; }

.story__nav {
	position: absolute;
	left: var(--space-4);
	top: var(--space-4);
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.story__nav a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--c-line-soft);
	border-radius: 999px;
	background: rgba(8, 12, 16, 0.7);
	font-family: var(--f-mono);
	font-size: 0.7rem;
	color: var(--c-text-muted);
	text-decoration: none;
	transition: color var(--dur), border-color var(--dur), background-color var(--dur);
}

.story__nav a[aria-current="step"] {
	color: #04191B;
	background: var(--c-cyan);
	border-color: var(--c-cyan);
}

.story__nav-num { opacity: 0.7; }

@media (min-width: 60em) {
	.story {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: clamp(2rem, 4vw, 4rem);
		align-items: start;
	}
	.story__stage {
		order: 2;
		height: calc(100svh - var(--header-h) - 2rem);
		max-height: 52rem;
		top: calc(var(--header-h) + 1rem);
	}
	.story__chapters { gap: 0; padding-bottom: 0; }
	.chapter { min-height: 88svh; }
}

@media (max-width: 59.99em) {
	.story__nav { left: var(--space-2); right: var(--space-2); top: var(--space-2); gap: 0.3rem; }
	.story__nav a { font-size: 0.62rem; padding: 0.2rem 0.45rem; }
	.story__nav-num { display: none; }
}

/* KI-Antwort-Simulation */
.aisim {
	margin-top: var(--space-5);
	padding: var(--space-4);
	border: 1px dashed rgba(0, 242, 254, 0.35);
	border-radius: var(--radius);
	background: rgba(0, 242, 254, 0.04);
	font-size: var(--fs-sm);
}

.aisim__label {
	margin: 0 0 var(--space-3);
	font-family: var(--f-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-warn);
}

.aisim__q,
.aisim__a {
	margin: 0;
	line-height: 1.55;
}

.aisim__a {
	margin-top: var(--space-3);
	color: var(--c-text);
	min-height: 4.6em;
}

.aisim__who {
	display: inline-block;
	margin-right: 0.4em;
	padding: 0 0.4em;
	border-radius: 4px;
	background: var(--c-line-soft);
	font-family: var(--f-mono);
	font-size: 0.7rem;
	color: var(--c-text-muted);
}

.aisim__a .aisim__who { background: var(--c-cyan); color: #04191B; }
.aisim.is-typing [data-aisim-text]::after { content: "▌"; color: var(--c-cyan); animation: blink 0.8s steps(1) infinite; }

@keyframes blink { 50% { opacity: 0; } }

/* ======================================================================
   Leistungen (Karten mit 3D-Neigung)
   ====================================================================== */
.offers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.offer {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--space-5);
	border: 1px solid var(--c-line-soft);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(260px circle at var(--px, 50%) var(--py, 0%), rgba(0, 242, 254, 0.10), transparent 70%),
		var(--c-surface);
	transition: border-color var(--dur) var(--ease), transform 200ms var(--ease);
}

.offer:hover,
.offer:focus-within { border-color: var(--c-line); }

.offer__icon { width: 2.25rem; height: 2.25rem; color: var(--c-cyan); }

.offer__title {
	margin: var(--space-4) 0 var(--space-2);
	font-family: var(--f-display);
	font-size: 1.2rem;
	line-height: 1.25;
}

.offer__title a { color: var(--c-text); text-decoration: none; }
.offer__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.offer:has(a:focus-visible) { outline: 2px solid var(--c-cyan); outline-offset: 2px; }
.offer__title a:focus-visible { outline: none; }

.offer__text {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	line-height: 1.55;
}

.offer__price {
	margin: auto 0 0;
	padding-top: var(--space-4);
	font-family: var(--f-display);
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--c-cyan);
}

.offer__price--text { font-size: 1.05rem; }

/* ======================================================================
   Kontakt-Band
   ====================================================================== */
.cta-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	padding: var(--space-6);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(80% 120% at 100% 0%, rgba(127, 0, 255, 0.18), transparent 60%),
		var(--c-surface);
}

.cta-band__title { margin: 0; font-family: var(--f-display); font-size: var(--fs-h3); }
.cta-band__text { margin: var(--space-2) 0 0; color: var(--c-text-muted); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ======================================================================
   Einblenden beim Scrollen (reveal.js setzt .reveal-ready)
   ====================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.reveal-ready .reveal {
		opacity: 0;
		translate: 0 18px;
		transition: opacity 700ms var(--ease), translate 700ms var(--ease), scale 700ms var(--ease), border-color 300ms var(--ease), box-shadow 300ms var(--ease), background-color 300ms var(--ease);
	}
	.reveal-ready .reveal.is-in { opacity: 1; translate: 0 0; }
}

/* ======================================================================
   Unterseiten: einheitliche Typografie und Bausteine
   ====================================================================== */
.page-container { max-width: 64rem; }

.page-content {
	padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
	font-size: var(--fs-base);
	line-height: 1.65;
}

.page-content h1 {
	margin: 0 0 var(--space-4);
	font-family: var(--f-display);
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.4rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.page-content h2 {
	margin: var(--space-7) 0 var(--space-4);
	padding-top: var(--space-5);
	border-top: 1px solid var(--c-line-soft);
	font-family: var(--f-display);
	font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
	line-height: 1.25;
}

.page-content h3 {
	margin: var(--space-5) 0 var(--space-2);
	font-family: var(--f-display);
	font-size: 1.1rem;
	line-height: 1.3;
}

.page-content p,
.page-content li { max-width: 70ch; }

.page-content ul,
.page-content ol { padding-left: 1.2em; }
.page-content li + li { margin-top: 0.35em; }

.page-content .lead {
	font-size: var(--fs-lg);
	color: var(--c-text-muted);
	line-height: 1.6;
}

.page-content .source,
.page-content .note {
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
}

.page-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.page-content th,
.page-content td {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--c-line-soft);
	text-align: left;
	vertical-align: top;
}

.page-content th { color: var(--c-text-muted); font-weight: 600; }

/* Pakete in Boxen */
.pkg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
	gap: var(--space-4);
	margin: var(--space-6) 0 var(--space-5);
	padding: 0 !important;
	list-style: none;
}

.pkg {
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: none !important;
	margin: 0 !important;
	padding: var(--space-5);
	border: 1px solid var(--c-line-soft);
	border-radius: var(--radius-lg);
	background: var(--c-surface);
}

.pkg--featured {
	border-color: var(--c-line);
	box-shadow: var(--glow-cyan);
}

.pkg__badge {
	position: absolute;
	top: -0.7rem;
	right: var(--space-4);
	padding: 0.1rem 0.55rem;
	border-radius: 999px;
	background: var(--c-cyan);
	color: #04191B;
	font-family: var(--f-mono);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.page-content .pkg__name {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--f-display);
	font-size: 1.1rem;
}

.pkg__price {
	margin: var(--space-2) 0 var(--space-1);
	font-family: var(--f-display);
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--c-cyan);
	line-height: 1.2;
}

.pkg__price small {
	font-size: 0.55em;
	font-weight: 400;
	color: var(--c-text-muted);
}

.pkg__meta {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
}

.page-content .pkg ul {
	margin: 0;
	padding: var(--space-3) 0 0;
	border-top: 1px solid var(--c-line-soft);
	list-style: none;
	font-size: var(--fs-sm);
}

.pkg li {
	position: relative;
	padding-left: 1.4em;
	color: var(--c-text-muted);
}

.pkg li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--c-cyan);
}

.pkg li + li { margin-top: 0.3em; }

/* Kennzahlen */
.stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
	gap: var(--space-4);
	margin: var(--space-5) 0;
	padding: 0 !important;
	list-style: none;
}

.page-content .stat {
	max-width: none;
	margin: 0;
	padding: var(--space-4) var(--space-5);
	border-left: 2px solid var(--c-cyan);
	background: linear-gradient(90deg, rgba(0, 242, 254, 0.06), transparent);
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	line-height: 1.5;
}

.stat strong {
	display: block;
	font-family: var(--f-display);
	font-size: 2rem;
	line-height: 1.1;
	color: var(--c-text);
}

/* Merkmale als Kacheln */
.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--space-3);
	margin: var(--space-5) 0;
	padding: 0 !important;
	list-style: none;
}

.page-content .feature-grid li {
	max-width: none;
	margin: 0;
	padding: var(--space-4);
	border: 1px solid var(--c-line-soft);
	border-radius: var(--radius);
	background: rgba(18, 22, 28, 0.5);
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	line-height: 1.55;
}

.feature-grid li strong {
	display: block;
	margin-bottom: 0.2em;
	font-size: var(--fs-base);
	color: var(--c-text);
}

/* Ablauf */
.steps {
	counter-reset: step;
	display: grid;
	gap: var(--space-3);
	margin: var(--space-5) 0;
	padding: 0 !important;
	list-style: none;
}

.page-content .steps > li {
	counter-increment: step;
	position: relative;
	max-width: none;
	margin: 0;
	padding: var(--space-4) var(--space-4) var(--space-4) 3.6rem;
	border: 1px solid var(--c-line-soft);
	border-radius: var(--radius);
	background: rgba(18, 22, 28, 0.5);
	color: var(--c-text-muted);
	font-size: var(--fs-sm);
	line-height: 1.55;
}

.steps > li::before {
	content: counter(step, decimal-leading-zero);
	position: absolute;
	left: var(--space-4);
	top: var(--space-4);
	font-family: var(--f-mono);
	color: var(--c-cyan);
}

.steps > li strong { display: block; color: var(--c-text); font-size: var(--fs-base); }

/* Hinweis-Kasten */
.page-content .callout {
	max-width: none;
	margin: var(--space-5) 0;
	padding: var(--space-4) var(--space-5);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	background: rgba(0, 242, 254, 0.05);
}

.callout p { margin: 0; }
.callout p + p { margin-top: var(--space-2); }

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

/* ======================================================================
   Navigation mit Untermenü
   ====================================================================== */
.site-nav .mod-menu li { position: relative; }

.site-nav .mod-menu__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 64em) {
	.site-nav .mod-menu__sub {
		position: absolute;
		left: 50%;
		top: calc(100% + 0.5rem);
		z-index: 120;
		display: grid;
		min-width: 15rem;
		padding: var(--space-2);
		border: 1px solid var(--c-line);
		border-radius: var(--radius);
		background: rgba(13, 15, 18, 0.96);
		box-shadow: var(--shadow);
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, -6px);
		transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms;
	}
	.site-nav .mod-menu__sub::before {          /* Brücke für die Maus */
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -0.6rem;
		height: 0.6rem;
	}
	.site-nav .mod-menu li:hover > .mod-menu__sub,
	.site-nav .mod-menu li:focus-within > .mod-menu__sub {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
	}
	.site-nav .mod-menu__sub a { display: block; white-space: nowrap; }
	.site-nav .deeper.parent > a::after {
		content: "";
		display: inline-block;
		width: 0.4em;
		height: 0.4em;
		margin-left: 0.45em;
		border-right: 1px solid currentColor;
		border-bottom: 1px solid currentColor;
		transform: translateY(-0.2em) rotate(45deg);
		opacity: 0.7;
	}
}

@media (max-width: 63.99em) {
	.site-nav .mod-menu__sub { margin-left: var(--space-3); padding-left: var(--space-4); border-left: 1px solid var(--c-line-soft); }
	.site-nav .mod-menu__sub a { font-size: var(--fs-sm); }
}

/* Assistent-Knopf erst nach dem Einstieg zeigen (Startseite) */
.is-home .assistant-dock__toggle { transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
html:not(.past-hero) .is-home .assistant-dock__toggle { opacity: 0; transform: translateY(12px); pointer-events: none; }

/* ======================================================================
   v3.1: Beitrags-Infos ausblenden, Premium-Paket, FAQ, Reiter
   ====================================================================== */
.com-content-article .article-info,
.com-content-article dl.article-info,
.blog-item .article-info,
.com-content-article .icons { display: none; }

.pkg--premium {
	border-color: rgba(184, 140, 255, 0.55);
	background:
		radial-gradient(120% 80% at 100% 0%, rgba(127, 0, 255, 0.22), transparent 60%),
		var(--c-surface);
	box-shadow: var(--glow-violet);
}

.pkg--premium .pkg__badge { background: var(--c-violet-text); color: #12061F; }
.pkg--premium .pkg__price { color: var(--c-violet-text); }

.pkg__name a { color: var(--c-text); text-decoration: none; }
.pkg__name a:hover { color: var(--c-cyan); }

/* FAQ in Beiträgen */
.faq-list {
	display: grid;
	gap: var(--space-3);
	margin: var(--space-4) 0 var(--space-5);
}

.faq-item {
	border: 1px solid var(--c-line-soft);
	border-radius: var(--radius);
	background: var(--c-surface);
}

.faq-item[open] { border-color: var(--c-line); }

.faq-item > summary {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item > summary::after {
	content: "+";
	flex: none;
	font-family: var(--f-mono);
	color: var(--c-cyan);
	transition: transform var(--dur) var(--ease);
}

.faq-item[open] > summary::after { transform: rotate(45deg); }

.page-content .faq-item p {
	margin: 0;
	padding: 0 var(--space-5) var(--space-5);
	color: var(--c-text-muted);
}

/* Reiter (tabs.js); ohne JavaScript stehen die Bereiche untereinander */
.tabs__list {
	position: sticky;
	top: calc(var(--header-h) + 0.5rem);
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: var(--space-6) 0 var(--space-5);
	padding: var(--space-2);
	border: 1px solid var(--c-line-soft);
	border-radius: 999px;
	background: rgba(13, 15, 18, 0.9);
	-webkit-backdrop-filter: blur(var(--blur));
	backdrop-filter: blur(var(--blur));
}

.tabs__tab {
	flex: 1 1 auto;
	padding: 0.55rem 1rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--c-text-muted);
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--dur), color var(--dur);
}

.tabs__tab:hover { color: var(--c-text); }

.tabs__tab[aria-selected="true"] {
	background: var(--c-cyan);
	color: #04191B;
}

.tabs.is-ready .tab-panel > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.tab-panel:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 6px; }

@media (max-width: 40em) {
	.tabs__list { border-radius: var(--radius); }
	.tabs__tab { flex: 1 1 45%; padding: 0.5rem 0.6rem; }
}

/* ======================================================================
   v3.2: Terminbuchung (Calendly, Zwei-Klick)
   ====================================================================== */
.booking { max-width: 62rem; margin-inline: auto; }

.booking__gate {
	display: grid;
	gap: var(--space-4);
	padding: clamp(1.25rem, 1rem + 2vw, 2rem);
	border-radius: var(--radius-lg);
}

.booking__gate .btn-row { margin-top: 0; }
.booking__consent { align-items: flex-start; font-size: var(--fs-sm); line-height: 1.55; }
.booking__alt { margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); }
.field__opt { font-weight: 400; color: var(--c-text-muted); }

.booking__frame {
	overflow: hidden;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	background: #12161C;
}

.booking__iframe {
	display: block;
	width: 100%;
	height: 760px;
	border: 0;
}

@media (max-width: 40em) {
	.booking__iframe { height: 1050px; }
}

.booking__done { margin-top: var(--space-4); }

/* ======================================================================
   v3.3: Boxen leuchten, umlaufendes Licht bei Links, mehr Bewegung beim Scrollen
   ====================================================================== */
@property --spin {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

.fx-box {
	position: relative;
	transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease), background-color 300ms var(--ease), opacity 600ms var(--ease), translate 600ms var(--ease), scale 600ms var(--ease), transform 500ms var(--ease);
}

/* Leuchtender Rand, der dem Mauszeiger folgt */
.fx-box::after {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: 1;
	border-radius: inherit;
	padding: 1.5px;
	pointer-events: none;
	background: radial-gradient(220px circle at var(--px, 50%) var(--py, 0%), rgba(0, 242, 254, 0.95), rgba(127, 0, 255, 0.5) 40%, transparent 70%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	opacity: 0;
	transition: opacity 300ms var(--ease);
}

.fx-box:hover,
.fx-box:focus-within {
	border-color: rgba(0, 242, 254, 0.45);
	box-shadow: 0 0 0 1px rgba(0, 242, 254, 0.15), 0 0 32px rgba(0, 242, 254, 0.16), 0 0 60px rgba(127, 0, 255, 0.10);
}

.fx-box:hover::after,
.fx-box:focus-within::after { opacity: 1; }

/* Box mit Link: Licht kreist um den Rand */
.fx-box.is-linked::after {
	padding: 2px;
	background:
		conic-gradient(from var(--spin), transparent 0deg 220deg, rgba(0, 242, 254, 0.2) 250deg, #00F2FE 300deg, #B88CFF 335deg, transparent 360deg),
		radial-gradient(220px circle at var(--px, 50%) var(--py, 0%), rgba(0, 242, 254, 0.5), transparent 70%);
	animation: box-spin 2.6s linear infinite;
	animation-play-state: paused;
}

.fx-box.is-linked:hover::after,
.fx-box.is-linked:focus-within::after { animation-play-state: running; }

@keyframes box-spin { to { --spin: 360deg; } }

.fx-box.is-clickable { cursor: pointer; }

/* Lichtfleck im Inneren (nur Boxen ohne eigenen Verlauf) */
.page-content .feature-grid > li.fx-box:hover,
.page-content .steps > li.fx-box:hover,
.faq-item.fx-box:hover,
.case-grid > div.fx-box:hover {
	background: radial-gradient(300px circle at var(--px, 50%) var(--py, 0%), rgba(0, 242, 254, 0.07), transparent 70%), rgba(18, 22, 28, 0.7);
}

@media (prefers-reduced-motion: reduce) {
	.fx-box.is-linked::after { animation: none; }
}

/* Einblende-Varianten */
@media (prefers-reduced-motion: no-preference) {
	.reveal-ready .reveal[data-reveal="zoom"] { scale: 0.94; }
	.reveal-ready .reveal[data-reveal="left"] { translate: -36px 0; }
	.reveal-ready .reveal[data-reveal="right"] { translate: 36px 0; }
	.reveal-ready .reveal.is-in { scale: 1; translate: 0 0; }

	.reveal-ready .page-content h2.reveal { position: relative; }
	.reveal-ready .page-content h2.reveal::before {
		content: "";
		position: absolute;
		left: 0;
		top: -1px;
		width: 0;
		height: 2px;
		background: linear-gradient(90deg, var(--c-cyan), var(--c-violet));
		box-shadow: 0 0 12px rgba(0, 242, 254, 0.6);
		transition: width 900ms var(--ease) 200ms;
	}
	.reveal-ready .page-content h2.reveal.is-in::before { width: 7rem; }

	/* Hintergrundraster läuft langsamer mit (Parallax) */
	.backdrop::after { background-position: 0 calc(var(--sy, 0px) * -0.25); }
}

/* Fortschritt beim Scrollen */
.scroll-progress {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 200;
	width: 100%;
	height: 2px;
	transform-origin: 0 50%;
	transform: scaleX(var(--scroll, 0));
	background: linear-gradient(90deg, var(--c-cyan), var(--c-violet));
	box-shadow: 0 0 10px rgba(0, 242, 254, 0.7);
	pointer-events: none;
}

/* ======================================================================
   v3.3: Referenzen (Fallstudien-Layout)
   ====================================================================== */
.case-head {
	margin-bottom: var(--space-5);
}

.case-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0 0 var(--space-3);
	padding: 0;
	list-style: none;
}

.tag {
	display: inline-flex;
	align-items: center;
	padding: 0.15rem 0.6rem;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--c-text-muted);
}

.tag--warn { border-color: rgba(255, 200, 87, 0.5); color: var(--c-warn); }
.tag--ok { border-color: rgba(74, 222, 128, 0.5); color: var(--c-ok); }

.case-visual {
	margin: var(--space-5) 0;
	overflow: hidden;
	border: 1px solid var(--c-line-soft);
	border-radius: var(--radius-lg);
	background: #0A0D11;
}

.case-visual img {
	display: block;
	width: 100%;
	height: auto;
}

.case-visual figcaption,
.gallery figcaption {
	padding: var(--space-3) var(--space-4);
	border-top: 1px solid var(--c-line-soft);
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
}

.case-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--space-4);
	margin: var(--space-5) 0;
}

.case-grid > div {
	padding: var(--space-5);
	border: 1px solid var(--c-line-soft);
	border-radius: var(--radius-lg);
	background: rgba(18, 22, 28, 0.6);
}

.page-content .case-grid h3 {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 var(--space-2);
	font-size: var(--fs-xs);
	font-family: var(--f-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-cyan);
}

.page-content .case-grid p { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); line-height: 1.6; }
.page-content .case-grid ul { margin: 0; padding-left: 1.1em; font-size: var(--fs-sm); color: var(--c-text-muted); }

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: var(--space-3);
	margin: var(--space-5) 0;
}

.gallery figure {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--c-line-soft);
	border-radius: var(--radius);
	background: #0A0D11;
}

.gallery img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 11; object-fit: cover; transition: scale 600ms var(--ease); }
.gallery figure:hover img { scale: 1.05; }

.ref-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: var(--space-3);
	margin: var(--space-4) 0 0;
}

.ref-nav a {
	display: block;
	padding: var(--space-4);
	border: 1px solid var(--c-line-soft);
	border-radius: var(--radius);
	background: rgba(18, 22, 28, 0.6);
	color: var(--c-text);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--fs-sm);
}

.ref-nav a span {
	display: block;
	margin-bottom: 0.2rem;
	font-family: var(--f-mono);
	font-size: 0.68rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-text-muted);
}

/* Referenz-Übersicht mit Bildern */
.pkg-grid--media .pkg { padding-top: 0; }
.pkg-grid--media .pkg__badge { top: var(--space-3); z-index: 2; }

.page-content .pkg__img {
	display: block;
	width: calc(100% + 2 * var(--space-5));
	max-width: none;
	height: auto;
	aspect-ratio: 16 / 10;
	margin: 0 calc(-1 * var(--space-5)) var(--space-4);
	object-fit: cover;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	border-bottom: 1px solid var(--c-line-soft);
	transition: filter 400ms var(--ease);
}

.pkg:hover .pkg__img { filter: brightness(1.15) saturate(1.1); }

.page-content { hyphens: auto; -webkit-hyphens: auto; }
.page-content .pkg__name { overflow-wrap: anywhere; }

/* ======================================================================
   v3.3.1: Handy – keine feststehende Bühne, nichts verdeckt den Inhalt
   ====================================================================== */
.stage-box__canvas,
.stage-box__poster { pointer-events: none; touch-action: pan-y; }
.chapter__media { display: none; }

@media (max-width: 59.99em) {
	.story__stage { display: none; }
	.story__chapters { gap: var(--space-5); padding-bottom: 0; }
	.chapter { min-height: 0; }
	.chapter__card { opacity: 1; transform: none; }
	.chapter__media {
		position: relative;
		display: block;
		margin: calc(-1 * clamp(1.25rem, 1rem + 1.5vw, 2rem)) calc(-1 * clamp(1.25rem, 1rem + 1.5vw, 2rem)) var(--space-4);
		aspect-ratio: 4 / 3;
		overflow: hidden;
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		border-bottom: 1px solid var(--c-line-soft);
		background: #0A0D11;
	}
	.chapter__img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.chapter__media .stage-box {
		position: absolute;
		inset: 0;
		border: 0;
		border-radius: 0;
	}
	.chapter__media .stage-box__canvas { pointer-events: auto; touch-action: pan-y; }
	.chapter__3d {
		position: absolute;
		left: 50%;
		bottom: var(--space-3);
		z-index: 4;
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		padding: 0.55rem 1rem;
		border: 1px solid var(--c-cyan);
		border-radius: 999px;
		background: rgba(8, 12, 16, 0.85);
		color: var(--c-cyan);
		font: inherit;
		font-size: var(--fs-sm);
		font-weight: 600;
		transform: translateX(-50%);
		box-shadow: 0 0 18px rgba(0, 242, 254, 0.35);
		cursor: pointer;
		white-space: nowrap;
	}
	.chapter__3d .icon { width: 1.1em; height: 1.1em; }
	.chapter__3d.is-on { right: var(--space-3); left: auto; transform: none; padding: 0.35rem 0.75rem; font-size: var(--fs-xs); }
	@media (prefers-reduced-motion: no-preference) {
		.chapter__3d:not(.is-on) { animation: pulse 2.4s infinite; }
	}
	.tabs__list { position: static; }
	.faq-teaser .section__head { position: static; }
}

/* v3.3.2: Navigation einheitlich ausrichten (auch mit Untermenü-Pfeil) */
.site-nav .mod-menu {
	align-items: center;
}

.site-nav .mod-menu > li {
	display: flex;
	align-items: center;
}

.site-nav .mod-menu > li > a,
.site-nav .mod-menu > li > span {
	display: inline-flex;
	align-items: center;
	min-height: 2.4rem;
	line-height: 1.2;
	white-space: nowrap;
}

@media (min-width: 64em) {
	.site-nav .deeper.parent > a::after {
		transform: rotate(45deg);
		margin-top: -0.25em;
	}
	.site-nav .mod-menu__toggle-sub { display: none; }
}