/* netzpepper · Hero „Partikel (Lite)“ (TYPO3-Inhaltselement npt3theme_herolite)
   Alle Regeln sind auf .np-hero gescoped – Bootstrap Package und Theme bleiben unberührt. */

/* ───────────────── Schriften (lokal, DSGVO-konform) ───────────────── */
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../Fonts/poppins-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../Fonts/poppins-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../Fonts/poppins-latin-ext-500-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../Fonts/poppins-latin-500-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../Fonts/poppins-latin-ext-600-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../Fonts/poppins-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../Fonts/jetbrains-mono-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../Fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../Fonts/jetbrains-mono-latin-ext-500-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../Fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../Fonts/jetbrains-mono-latin-ext-800-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../Fonts/jetbrains-mono-latin-800-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@property --np-accent {
	syntax: "<color>";
	inherits: true;
	initial-value: #ec6608;
}
@property --np-accent2 {
	syntax: "<color>";
	inherits: true;
	initial-value: #ff3d77;
}

/* ───────────────── HERO ───────────────── */
.np-hero {
	/* Im Theme überschreibbar: Höhe und Abstand oben (z. B. bei fixem Seiten-Header) */
	--np-hero-height: 100svh;
	--np-hero-offset-top: 0px;

	--np-bg: #070708;
	--np-fg: #f4f4f5;
	--np-muted: #9a9aa3;
	--np-line: rgba(255, 255, 255, 0.09);
	--np-brand: #ec6608;
	--np-accent: #ec6608;
	--np-accent2: #ff3d77;
	--np-pad: clamp(20px, 6vw, 150px);
	transition:
		--np-accent 0.9s ease,
		--np-accent2 0.9s ease;

	position: relative;
	min-height: var(--np-hero-height);
	display: grid;
	grid-template-rows: 1fr auto;
	padding-inline: var(--np-pad);
	padding-top: var(--np-hero-offset-top);
	overflow: hidden;
	isolation: isolate;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	color: var(--np-fg);
	font-family:
		"Poppins",
		system-ui,
		-apple-system,
		"Segoe UI",
		sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: normal;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	background: radial-gradient(60% 50% at 70% 50%, color-mix(in srgb, var(--np-accent) 14%, transparent), transparent 70%), var(--np-bg);
}

/* Reset nur innerhalb des Heros – neutralisiert Bootstrap-Reboot & Theme-Styles */
.np-hero,
.np-hero *,
.np-hero *::before,
.np-hero *::after {
	box-sizing: border-box;
}
.np-hero *,
.np-hero *::before,
.np-hero *::after {
	margin: 0;
	padding: 0;
}
.np-hero h1,
.np-hero h2 {
	color: inherit;
	font-family: inherit;
	text-transform: none;
}
.np-hero ul {
	list-style: none;
}
.np-hero a,
.np-hero a:hover,
.np-hero a:focus {
	color: inherit;
	text-decoration: none;
}
.np-hero button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	text-transform: none;
}
.np-hero img {
	max-width: none;
	vertical-align: middle;
}
.np-hero > * {
	min-width: 0;
}

.np-hero .np-mono {
	font-family: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
}

.np-hero .np-gl {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 0;
}
.np-hero .np-vignette {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(7, 7, 8, 0.92) 0%, rgba(7, 7, 8, 0.55) 30%, rgba(7, 7, 8, 0) 55%), radial-gradient(120% 90% at 65% 50%, transparent 55%, rgba(7, 7, 8, 0.9) 100%);
}
/* Lite: kein mix-blend-mode über dem animierten Canvas (spart Compositing pro Frame) */
.np-hero .np-scanlines {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.025;
	background: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px);
}

/* ───────────────── BUTTONS ───────────────── */
.np-hero .np-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 22px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
	transition:
		transform 0.25s ease,
		box-shadow 0.35s ease,
		background 0.25s,
		border-color 0.25s;
}
.np-hero .np-btn .np-arrow {
	transition: transform 0.25s ease;
}
.np-hero .np-btn:hover .np-arrow {
	transform: translateX(4px);
}
.np-hero .np-btn:focus-visible {
	outline: 2px solid var(--np-accent);
	outline-offset: 3px;
}
.np-hero .np-btn-primary,
.np-hero .np-btn-primary:hover,
.np-hero .np-btn-primary:focus {
	background: var(--np-brand);
	color: #fff;
}
.np-hero .np-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow:
		0 10px 40px -8px var(--np-brand),
		0 0 0 1px color-mix(in srgb, var(--np-brand) 60%, #fff);
}
/* Lite: kein backdrop-filter – Blur über bewegtem WebGL kostet jeden Frame GPU-Zeit */
.np-hero .np-btn-ghost {
	border: 1px solid var(--np-line);
	background: rgba(12, 12, 14, 0.6);
}
.np-hero .np-btn-ghost:hover {
	border-color: color-mix(in srgb, var(--np-accent) 60%, transparent);
	transform: translateY(-2px);
}

/* ───────────────── CONTENT ───────────────── */
.np-hero .np-content {
	position: relative;
	z-index: 2;
	align-self: center;
	max-width: 620px;
	padding-block: 24px 40px;
	pointer-events: none;
}
.np-hero .np-content a,
.np-hero .np-content button {
	pointer-events: auto;
}

.np-hero .np-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	line-height: normal;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--np-muted);
	padding: 7px 14px 7px 10px;
	border: 1px solid var(--np-line);
	border-radius: 999px;
	background: rgba(12, 12, 14, 0.6);
}
.np-hero .np-pulse {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--np-brand);
}
.np-hero .np-pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--np-brand);
	animation: np-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes np-ping {
	75%,
	100% {
		transform: scale(2.6);
		opacity: 0;
	}
}

.np-hero .np-title {
	margin-top: 22px;
	font-size: clamp(44px, 5.8vw, 84px);
	line-height: 1;
	letter-spacing: -0.035em;
	font-weight: 600;
}
.np-hero .np-grad {
	background: linear-gradient(90deg, var(--np-accent), var(--np-accent2));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.np-hero .np-panel {
	margin-top: 28px;
	padding-left: 20px;
	border-left: 1px solid color-mix(in srgb, var(--np-accent) 70%, transparent);
}
.np-hero .np-panel-index {
	font-size: 12px;
	letter-spacing: 0.12em;
	color: var(--np-accent);
}
.np-hero .np-panel-title {
	margin-top: 8px;
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 500;
	line-height: normal;
	letter-spacing: -0.01em;
	min-height: 1.3em;
}
.np-hero .np-panel-title .np-dud {
	color: var(--np-accent);
	opacity: 0.8;
	font-family: "JetBrains Mono", monospace;
}
.np-hero .np-panel-text {
	margin-top: 10px;
	color: var(--np-muted);
	font-size: 16px;
	line-height: 1.6;
	max-width: 48ch;
	min-height: 4.8em;
}
.np-hero .np-panel-text.in {
	animation: np-fadeUp 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.np-hero .np-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}
.np-hero .np-tags li {
	font-size: 12px;
	padding: 5px 10px;
	border-radius: 6px;
	border: 1px solid var(--np-line);
	background: rgba(255, 255, 255, 0.03);
	color: #cfcfd6;
	animation: np-fadeUp 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: var(--np-d, 0ms);
}
@keyframes np-fadeUp {
	from {
		opacity: 0;
		transform: translateY(10px);
		filter: blur(4px);
	}
	to {
		opacity: 1;
		transform: none;
		filter: none;
	}
}

.np-hero .np-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.np-hero .np-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	margin-top: 30px;
}
@media (min-width: 900px) and (max-height: 920px) {
	.np-hero .np-stats {
		display: none;
	}
	.np-hero .np-content {
		padding-block: 8px 24px;
	}
}
.np-hero .np-stat strong {
	display: block;
	font-size: 28px;
	font-weight: 500;
	letter-spacing: -0.02em;
}
.np-hero .np-stat span {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--np-muted);
}

/* ───────────────── SERVICE TABS ───────────────── */
.np-hero .np-tabs {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	padding-block: 8px 30px;
}
.np-hero .np-tab {
	position: relative;
	width: 100%;
	text-align: left;
	padding-top: 16px;
	border-top: 1px solid var(--np-line);
	color: var(--np-muted);
	transition: color 0.3s;
}
.np-hero .np-tab::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	height: 1px;
	width: 100%;
	background: linear-gradient(90deg, var(--np-accent), var(--np-accent2));
	transform: scaleX(var(--np-p, 0));
	transform-origin: left;
	box-shadow: 0 0 12px var(--np-accent);
}
.np-hero .np-tab:hover,
.np-hero .np-tab[aria-selected="true"] {
	color: var(--np-fg);
}
.np-hero .np-tab-num {
	font-size: 11px;
	letter-spacing: 0.12em;
}
.np-hero .np-tab[aria-selected="true"] .np-tab-num {
	color: var(--np-accent);
}
.np-hero .np-tab-label {
	display: block;
	margin-top: 6px;
	font-size: 17px;
	font-weight: 500;
}
.np-hero .np-tab-sub {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: var(--np-muted);
}
.np-hero .np-tab:focus-visible {
	outline: 1px dashed var(--np-accent);
	outline-offset: 6px;
}

/* ───────────────── HUD ───────────────── */
.np-hero .np-hud {
	position: absolute;
	z-index: 2;
	right: var(--np-pad);
	top: calc(var(--np-hero-offset-top) + 32px);
	font-size: 11px;
	line-height: 1.9;
	color: var(--np-muted);
	pointer-events: none;
	display: none;
	grid-template-columns: auto auto;
	column-gap: 18px;
	padding: 14px 16px;
	border: 1px solid var(--np-line);
	border-radius: 10px;
	background: rgba(7, 7, 8, 0.7);
}
.np-hero .np-hud dt {
	opacity: 0.6;
	font-weight: 400;
}
.np-hero .np-hud dd {
	color: #cfcfd6;
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.np-hero .np-hud dd.np-accent {
	color: var(--np-accent);
}

.np-hero .np-hint {
	position: absolute;
	z-index: 2;
	right: var(--np-pad);
	bottom: 118px;
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--np-muted);
	display: flex;
	align-items: center;
	gap: 10px;
	pointer-events: none;
}
.np-hero .np-hint kbd {
	font-family: inherit;
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 4px;
	border: 1px solid var(--np-line);
	color: #cfcfd6;
	background: none;
	box-shadow: none;
}

/* ───────────────── BOOT ───────────────── */
.np-hero .np-boot {
	position: absolute;
	inset: 0;
	z-index: 50;
	display: grid;
	place-items: center;
	background: var(--np-bg);
	transition:
		opacity 0.9s ease,
		visibility 0.9s;
}
.np-hero .np-boot.done {
	opacity: 0;
	visibility: hidden;
}
.np-hero .np-boot-inner {
	display: grid;
	justify-items: start;
	gap: 22px;
}
.np-hero .np-boot-inner img {
	width: 64px;
	height: 64px;
}
.np-hero .np-boot-log {
	font-size: 13px;
	line-height: 1.9;
	color: var(--np-muted);
	min-width: 280px;
}
.np-hero .np-boot-log div {
	animation: np-fadeUp 0.3s ease both;
}
.np-hero .np-boot-log div:last-child {
	color: var(--np-brand);
}
.np-hero .np-boot-log div:last-child::after {
	content: "▍";
	animation: np-blink 1s steps(1) infinite;
	margin-left: 4px;
}
@keyframes np-blink {
	50% {
		opacity: 0;
	}
}

/* ───────────────── CURSOR (nur innerhalb des Heros) ───────────────── */
.np-hero .np-cursor,
.np-hero .np-cursor-dot {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 60;
	pointer-events: none;
	border-radius: 50%;
	opacity: 0;
}
.np-hero .np-cursor {
	width: 38px;
	height: 38px;
	margin: -19px 0 0 -19px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	transition:
		width 0.25s,
		height 0.25s,
		margin 0.25s,
		border-color 0.25s,
		background 0.25s,
		opacity 0.3s;
}
.np-hero .np-cursor-dot {
	width: 4px;
	height: 4px;
	margin: -2px 0 0 -2px;
	background: var(--np-accent);
}
.np-hero .np-cursor.is-hover {
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-color: var(--np-accent);
	background: color-mix(in srgb, var(--np-accent) 10%, transparent);
}
.np-hero .np-cursor.is-drag {
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	border-color: var(--np-accent2);
}
.np-hero .np-cursor.is-pulse {
	animation: np-cursorPulse 0.5s ease-out;
}
@keyframes np-cursorPulse {
	0% {
		box-shadow: 0 0 0 0 var(--np-accent);
	}
	100% {
		box-shadow: 0 0 0 40px transparent;
	}
}
@media (pointer: fine) {
	.np-hero.has-cursor,
	.np-hero.has-cursor a,
	.np-hero.has-cursor button {
		cursor: none;
	}
	.np-hero.has-cursor.cursor-on .np-cursor,
	.np-hero.has-cursor.cursor-on .np-cursor-dot {
		opacity: 1;
	}
}

.np-hero .np-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Fallback, falls WebGL nicht verfügbar ist */
.np-hero.no-webgl {
	background: radial-gradient(40% 40% at 72% 45%, color-mix(in srgb, var(--np-accent) 30%, transparent), transparent 70%), radial-gradient(40% 40% at 60% 60%, color-mix(in srgb, var(--np-accent2) 30%, transparent), transparent 70%), var(--np-bg);
}
.np-hero.no-webgl .np-hud,
.np-hero.no-webgl .np-hint {
	display: none;
}

/* ───────────────── RESPONSIVE ───────────────── */
@media (max-width: 1180px) {
	.np-hero .np-hud {
		display: none;
	}
}
@media (max-width: 899px) {
	.np-hero .np-vignette {
		background: linear-gradient(0deg, rgba(7, 7, 8, 0.96) 0%, rgba(7, 7, 8, 0.7) 45%, rgba(7, 7, 8, 0) 68%), radial-gradient(120% 80% at 50% 25%, transparent 50%, rgba(7, 7, 8, 0.85) 100%);
	}
	.np-hero .np-content {
		align-self: end;
		padding-top: 42svh;
		padding-bottom: 28px;
	}
	.np-hero .np-title {
		margin-top: 18px;
	}
	.np-hero .np-panel {
		margin-top: 24px;
	}
	.np-hero .np-panel-text {
		font-size: 15px;
		min-height: 6.4em;
	}
	.np-hero .np-stats {
		gap: 24px;
		margin-top: 28px;
	}
	.np-hero .np-stat strong {
		font-size: 22px;
	}
	.np-hero .np-tabs {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px 18px;
		padding-bottom: 24px;
	}
	.np-hero .np-tab {
		padding-top: 12px;
	}
	.np-hero .np-tab-label {
		font-size: 15px;
	}
	.np-hero .np-tab-sub {
		display: none;
	}
	.np-hero .np-hint {
		display: none;
	}
}
@media (max-width: 420px) {
	.np-hero .np-cta .np-btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}
@media (prefers-reduced-motion: reduce) {
	.np-hero *,
	.np-hero *::before,
	.np-hero *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* netzpepper · Hero ohne gepflegte Leistungen (alle vier Reiter „Leistung“ im Backend leer): Panel und Reiter ausblenden */
.np-hero .np-content--noslides .np-panel,
.np-hero:has(.np-content--noslides) .np-tabs {
    display: none;
}

/* netzpepper · Einleitungstext unter der Überschrift (FlexForm-Feld „Einleitungstext“) */
.np-hero .np-intro {
    margin-top: 28px;
    max-width: 30em;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(244, 244, 245, 0.78);
}

/* netzpepper · „Übersicht als Start“: Text links bleibt fest (kein Panel); die Übersicht hat den ersten Reiter („00 · Übersicht“) */
.np-hero .np-content--overview .np-panel {
    display: none;
}

/* netzpepper · Reiter-Leiste: so viele Spalten wie Reiter (bis zu 5 Leistungen + Übersicht) */
@media (min-width: 900px) {
    .np-hero .np-tabs {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }
}

/* netzpepper · Reiter-Leiste zwischen 900 und 1180 px: höchstens 3 Spalten (6 Reiter bei „Übersicht als Start“ wären sonst zu schmal) */
@media (min-width: 900px) and (max-width: 1180px) {
    .np-hero .np-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-flow: row;
        gap: 18px 28px;
    }
}
/* netzpepper · Einleitungstext mobil etwas kleiner */
@media (max-width: 899px) {
    .np-hero .np-intro {
        margin-top: 20px;
        font-size: 15px;
    }
}

/* netzpepper · Ladescreen: schlichte schwarze Fläche (ohne Logo und Boot-Log – das Markup bleibt, hero-lite.js schreibt hinein),
   die nach dem Aufbau des Heros (Klasse .done) wie ein Vorhang nach oben auffährt; Unterkante mit feiner Lichtlinie */
.np-hero .np-boot {
    background: var(--np-bg);
    transition:
        transform 1s cubic-bezier(0.76, 0, 0.24, 1),
        visibility 0s linear 1s;
}
.np-hero .np-boot-inner {
    display: none;
}
.np-hero .np-boot::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--np-accent) 30%, var(--np-accent2) 70%, transparent);
    box-shadow: 0 0 18px var(--np-accent);
    opacity: 0.8;
}
.np-hero .np-boot.done {
    opacity: 1;
    visibility: hidden;
    transform: translateY(-101%);
}
@media (prefers-reduced-motion: reduce) {
    .np-hero .np-boot {
        transition:
            opacity 0.4s ease,
            visibility 0s linear 0.4s;
    }
    .np-hero .np-boot.done {
        opacity: 0;
        transform: none;
    }
}

/* netzpepper · „Übersicht als Start“: die Übersicht läuft als Slide mit durch, hat aber keinen eigenen Reiter unten
   (der Reiter „00 · Übersicht“ bleibt im Markup, damit Ablauf und Grafik ihn weiter nutzen) */
.np-hero .np-tabs li:has(> .np-tab[data-np-flow="overview"]) {
    display: none;
}

/* netzpepper · zwischen 900 und 1180 px: genau vier sichtbare Reiter (4 Leistungen, oder Übersicht + 4 mit verstecktem Übersicht-Reiter)
   in einer Reihe statt 3 + 1 */
@media (min-width: 900px) and (max-width: 1180px) {
    .np-hero .np-tabs:has(> li:nth-child(4)):not(:has(> li:nth-child(5))),
    .np-hero .np-tabs:has(> li:first-child > .np-tab[data-np-flow="overview"]):has(> li:nth-child(5)):not(:has(> li:nth-child(6))) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* netzpepper · leere Felder einer Leistung (Text, Tags) nehmen keinen Platz ein – sonst bleibt unter dem Titel eine Lücke
   (die Mindesthöhe des Texts soll nur Sprünge zwischen Leistungen mit Text verhindern) */
.np-hero .np-panel-text:empty,
.np-hero .np-tags:empty {
    display: none;
}

/* netzpepper · Datenfluss-Grafik über dem Text (np-hero-apiflow.js setzt .np-flow-above, wenn rechts neben dem Text
   zu wenig Platz ist): Text unten über den Reitern, darüber hat die Grafik die volle Breite */
@media (min-width: 900px) {
    .np-hero.np-flow-above .np-content {
        align-self: end;
    }
}