/* =========================================================
   bios-UNIVERSE Theme – main.css
   Design-System im SkyAgent-Stil (Magic UI):
   neutrale Flächen, feine Borders, runde Karten,
   Hell/Dunkel-Modus über [data-theme].
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--radius: 16px;
	--radius-sm: 10px;
	--container: 1120px;

	/* ===== MARKENFARBE: nur diese 2 Werte ändern, alles andere folgt ===== */
	--accent: #4f46e5;
	--accent-2: #06b6d4;
	--accent-grad: linear-gradient(135deg, var(--accent), var(--accent-2));

	/* Hell (Default) */
	--bg: #fafafa;
	--bg-elev: #ffffff;
	--bg-alt: #f4f4f5;
	--text: #18181b;
	--text-muted: #52525b;
	--text-faint: #a1a1aa;
	--border: rgba(24, 24, 27, 0.10);
	--border-strong: rgba(24, 24, 27, 0.16);
	--shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
	--btn-solid-bg: #18181b;
	--btn-solid-fg: #ffffff;
	--glow-opacity: .16;
}

[data-theme="dark"], .biosu-scope[data-theme="dark"] {
	--bg: #09090b;
	--bg-elev: #101014;
	--bg-alt: #0d0d11;
	--text: #f4f4f5;
	--text-muted: #a1a1aa;
	--text-faint: #63636b;
	--border: rgba(244, 244, 245, 0.10);
	--border-strong: rgba(244, 244, 245, 0.18);
	--shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
	--btn-solid-bg: #f4f4f5;
	--btn-solid-fg: #09090b;
	--glow-opacity: .28;
	--accent: #818cf8;
}

/* ---------- Reset & Basis ---------- */
.biosu-scope, .biosu-scope *, .biosu-scope *::before, .biosu-scope *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.biosu-scope {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	transition: background .3s ease, color .3s ease;
}
.biosu-scope img { max-width: 100%; height: auto; display: block; }
.biosu-scope a { color: inherit; text-decoration: none; }
.biosu-scope ul { margin: 0; padding: 0; list-style: none; }
.biosu-scope h1, .biosu-scope h2, .biosu-scope h3 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
.biosu-scope p { margin: 0; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.container-narrow { max-width: 760px; }
.center { text-align: center; }
.hide-mobile { display: inline-flex; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background .2s ease, border-color .2s ease;
	white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
	background: var(--btn-solid-bg);
	color: var(--btn-solid-fg);
	box-shadow: var(--shadow);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(79,70,229,.25); }
.btn-ghost {
	background: transparent;
	color: var(--text);
	border-color: var(--border-strong);
}
.btn-ghost:hover { background: var(--bg-alt); }
.btn-lg { padding: 13px 26px; font-size: 16px; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--bg) 78%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border);
}
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 64px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; }
.brand-name strong { font-weight: 800; }
.brand-mark {
	width: 26px; height: 26px;
	border-radius: 8px;
	background: var(--accent-grad);
	box-shadow: 0 0 0 1px var(--border), 0 4px 12px rgba(79,70,229,.35);
}
.brand img { max-height: 34px; width: auto; }

.main-nav .nav-list { display: flex; gap: 4px; }
.main-nav a {
	padding: 8px 12px;
	border-radius: 999px;
	font-size: 14.5px;
	color: var(--text-muted);
	transition: color .15s ease, background .15s ease;
}
.main-nav a:hover { color: var(--text); background: var(--bg-alt); }

.header-actions { display: flex; align-items: center; gap: 8px; }

.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	background: transparent;
	color: var(--text);
	cursor: pointer;
	transition: background .15s ease;
}
.theme-toggle:hover { background: var(--bg-alt); }
[data-theme="light"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon, .biosu-scope[data-theme="dark"] .icon-moon { display: none; }

.nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-burger span { width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav { border-top: 1px solid var(--border); padding: 16px 24px 24px; background: var(--bg); }
.mobile-nav ul { display: grid; gap: 4px; margin-bottom: 16px; }
.mobile-nav a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-muted); }
.mobile-nav a:hover { background: var(--bg-alt); color: var(--text); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 88px 0 56px; text-align: center; }

/* Aurora-Farbverlauf: liegt hinter Hero UND läuft sanft in die Seite aus */
.hero-aurora {
	position: absolute;
	inset: -30% -25% -10%;
	background:
		radial-gradient(55% 60% at 18% 10%, var(--accent), transparent 65%),
		radial-gradient(50% 55% at 82% 8%, var(--accent-2), transparent 65%),
		radial-gradient(60% 50% at 50% 45%, color-mix(in srgb, var(--accent) 60%, var(--accent-2)), transparent 70%);
	opacity: var(--glow-opacity);
	filter: blur(70px);
	pointer-events: none;
	animation: aurora 16s ease-in-out infinite alternate;
	will-change: transform;
	transform: translateY(calc(var(--scroll-y, 0) * -0.15px));
}
@keyframes aurora {
	0%   { background-position: 0 0; transform: translateY(calc(var(--scroll-y, 0) * -0.15px)) scale(1); }
	100% { transform: translateY(calc(var(--scroll-y, 0) * -0.15px)) scale(1.08) rotate(2deg); }
}
.hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	background: var(--bg-elev);
	font-size: 13px;
	font-weight: 600;
	color: var(--text-muted);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent-grad); }

.hero h1 { font-size: clamp(38px, 6vw, 64px); font-weight: 800; letter-spacing: -0.03em; max-width: 18ch; }
.hero-sub { max-width: 62ch; font-size: 17.5px; color: var(--text-muted); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; font-size: 13px; color: var(--text-faint); }
.trust-row li { display: inline-flex; align-items: center; gap: 6px; }
.trust-row li::before { content: "✓"; color: var(--accent); font-weight: 700; }

/* Produkt-Video im Browser-Rahmen */
.hero-video { width: 100%; max-width: 880px; margin-top: 16px; }
.video-frame {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--bg-elev);
	box-shadow: 0 24px 60px rgba(0,0,0,.18), 0 0 0 6px color-mix(in srgb, var(--accent) 8%, transparent);
}
.video-frame video { display: block; width: 100%; height: auto; }

/* Chat-Karte (Signature) */
.hero-demo { width: 100%; max-width: 640px; margin-top: 12px; }
.chat-card {
	text-align: left;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
}
.chat-topbar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--border);
	background: var(--bg-alt);
}
.tb-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--border-strong); }
.tb-title { margin-left: 8px; font-size: 12.5px; color: var(--text-faint); }
.chat-body { padding: 20px; display: grid; gap: 16px; }
.msg { font-size: 15px; }
.msg-user {
	justify-self: end;
	max-width: 85%;
	background: var(--btn-solid-bg);
	color: var(--btn-solid-fg);
	padding: 10px 16px;
	border-radius: 16px 16px 4px 16px;
	min-height: 22px;
}
.caret { display: inline-block; width: 2px; height: 1em; background: currentColor; margin-left: 2px; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.chat-card.play .caret { animation: blink 1s steps(1) 4, hide 0s 4s forwards; }
@keyframes hide { to { opacity: 0; } }

.msg-ai { display: flex; gap: 12px; align-items: flex-start; }
.ai-avatar { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; background: var(--accent-grad); }
.ai-steps { display: grid; gap: 8px; padding-top: 2px; }
.ai-step { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 14.5px; opacity: 0; transform: translateY(6px); }
.chat-card.play .ai-step { animation: stepIn .5s ease forwards; animation-delay: var(--d); }
@keyframes stepIn { to { opacity: 1; transform: none; } }
.ai-step .check {
	width: 16px; height: 16px; border-radius: 999px;
	background: var(--accent-grad);
	position: relative; flex: 0 0 auto;
}
.ai-step .check::after {
	content: ""; position: absolute; left: 5px; top: 2.5px;
	width: 4px; height: 8px;
	border: solid #fff; border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.ai-done { color: var(--text); font-weight: 600; }

/* ---------- Marquee ---------- */
.marquee-section { padding: 28px 0 20px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-alt); }
.marquee-label { text-align: center; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
/* Kein gap auf dem Track: Abstände liegen im Item-Padding, damit -50 % exakt auf die Set-Grenze fällt (nahtloser Loop) */
.marquee-track { display: flex; width: max-content; animation: scroll 60s linear infinite; }
.marquee-item { padding-inline: 20px; font-size: 15px; font-weight: 600; color: var(--text-faint); white-space: nowrap; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- Sektionen ---------- */
.section { padding: 88px 0; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--border); }
.section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; display: grid; gap: 14px; }
.kicker { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-head h2 { font-size: clamp(26px, 4vw, 38px); }
.section-sub { color: var(--text-muted); font-size: 16.5px; }

/* ---------- Grids & Karten ---------- */
.grid-2 { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
.grid-3 { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }

.card {
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 26px;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow); }
.card h3 { font-size: 18px; margin-bottom: 10px; }
.card p { color: var(--text-muted); font-size: 15px; }
.card-compact { padding: 22px; }
.card-compact h3 { font-size: 16px; }

/* Bento */
.bento { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }
.bento-lg { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
.bento-lg h3 { font-size: 22px; }
.bento .card:not(.bento-lg) { grid-column: span 2; }
@media (min-width: 901px) {
	.bento .card:not(.bento-lg) { grid-column: span 1; }
	.bento { grid-auto-rows: 1fr; }
}
.bento-visual { margin-top: auto; padding-top: 26px; }
.pill-flow { display: flex; align-items: center; gap: 10px; justify-content: center; }
.pill {
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	background: var(--bg-alt);
	font-size: 13.5px;
	font-weight: 600;
}
.pill-accent { background: var(--accent-grad); color: #fff; border-color: transparent; box-shadow: 0 4px 16px rgba(79,70,229,.35); }
.flow-line { flex: 1; max-width: 70px; height: 2px; background: repeating-linear-gradient(90deg, var(--border-strong) 0 6px, transparent 6px 12px); animation: dash 1.2s linear infinite; }
@keyframes dash { to { background-position: 12px 0; } }

/* ---------- Steps ---------- */
.steps { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); counter-reset: step; }
.step {
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 24px;
	display: grid;
	gap: 14px;
	align-content: start;
}
.step-num {
	width: 34px; height: 34px;
	display: grid; place-items: center;
	border-radius: 999px;
	background: var(--accent-grad);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
}
.step h3 { font-size: 16.5px; margin-bottom: 6px; }
.step p { color: var(--text-muted); font-size: 14.5px; }
.step-time { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--accent); }

/* ---------- Coins-Vergleich ---------- */
.compare { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; align-items: stretch; }
.compare-card {
	position: relative;
	border-radius: var(--radius);
	padding: 30px;
	border: 1px solid var(--border);
	background: var(--bg-elev);
}
.compare-card h3 { font-size: 18px; margin-bottom: 8px; }
.compare-price { font-size: 22px; font-weight: 800; margin-bottom: 18px; }
.compare-price span { display: block; font-size: 14px; font-weight: 500; color: var(--text-muted); }
.compare-card ul { display: grid; gap: 10px; }
.compare-card li { position: relative; padding-left: 26px; font-size: 15px; color: var(--text-muted); }
.compare-bad li::before { content: "×"; position: absolute; left: 2px; top: -1px; color: var(--text-faint); font-weight: 700; font-size: 17px; }
.compare-good { border: 1px solid transparent; background:
	linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box,
	var(--accent-grad) border-box;
	box-shadow: 0 12px 40px rgba(79,70,229,.15);
}
.compare-good li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }
.compare-badge {
	position: absolute; top: -13px; left: 26px;
	padding: 4px 14px;
	border-radius: 999px;
	background: var(--accent-grad);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
}

/* ---------- Kundenstimmen ---------- */
.quote { display: grid; gap: 18px; margin: 0; }
.quote blockquote { margin: 0; font-size: 17px; line-height: 1.55; color: var(--text); }
.quote figcaption { display: flex; align-items: center; gap: 12px; }
.quote-avatar {
	width: 42px; height: 42px;
	display: grid; place-items: center;
	border-radius: 999px;
	background: var(--accent-grad);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
}
.quote figcaption strong { display: block; font-size: 15px; }
.quote figcaption span:not(.quote-avatar) { display: block; font-size: 13px; color: var(--text-muted); }
.quote-metric {
	margin-top: 2px;
	padding-top: 14px;
	border-top: 1px solid var(--border);
	font-size: 13.5px;
	font-weight: 700;
	background: var(--accent-grad);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- FAQ ---------- */
.faq-item {
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	margin-bottom: 12px;
	overflow: hidden;
}
.faq-item summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 52px 18px 22px;
	font-weight: 600;
	font-size: 16px;
	position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: "+";
	position: absolute; right: 20px; top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	color: var(--text-faint);
	transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p { padding: 0 22px 20px; color: var(--text-muted); font-size: 15px; }

/* ---------- Finale CTA ---------- */
.cta-final { position: relative; overflow: hidden; }
.cta-glow {
	position: absolute; inset: auto -20% -60%;
	height: 120%;
	background: radial-gradient(700px 340px at 50% 100%, var(--accent), transparent 70%);
	opacity: var(--glow-opacity);
	filter: blur(60px);
	pointer-events: none;
}
.cta-final .container { position: relative; display: grid; gap: 20px; justify-items: center; }
.cta-final h2 { font-size: clamp(30px, 5vw, 46px); }
.cta-note { font-size: 13px; color: var(--text-faint); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); background: var(--bg-alt); padding: 64px 0 32px; }
.footer-grid { display: grid; gap: 40px; grid-template-columns: 2fr 1fr 1fr 1fr; margin-bottom: 48px; }
.footer-claim { margin-top: 14px; font-size: 14.5px; color: var(--text-muted); }
.footer-address { margin-top: 14px; font-size: 13px; color: var(--text-faint); }
.footer-address a { color: var(--text-muted); }
.footer-col h3 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; }
.footer-col ul { display: grid; gap: 8px; }
.footer-col a { font-size: 14.5px; color: var(--text-muted); }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
	display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	padding-top: 24px;
	border-top: 1px solid var(--border);
	font-size: 12.5px;
	color: var(--text-faint);
}

/* ---------- Content-Fallback (Blog etc.) ---------- */
.content-card h1 { font-size: 30px; margin-bottom: 18px; }
.entry-content p { margin-bottom: 1em; color: var(--text-muted); }
.entry-content a { color: var(--accent); }

/* ---------- Scroll-Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal { opacity: 1; transform: none; transition: none; }
	.marquee-track, .flow-line, .caret { animation: none !important; }
	.chat-card .ai-step { opacity: 1; transform: none; animation: none !important; }
	.card:hover, .btn-primary:hover { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.grid-4 { grid-template-columns: repeat(2, 1fr); }
	.steps { grid-template-columns: repeat(2, 1fr); }
	.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
	.main-nav { display: none; }
	.nav-burger { display: flex; }
	.bento { grid-template-columns: 1fr 1fr; }
	.bento-lg { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 680px) {
	.section { padding: 64px 0; }
	.hero { padding: 56px 0 40px; }
	.grid-2, .grid-3, .grid-4, .steps, .compare, .bento { grid-template-columns: 1fr; }
	.bento-lg, .bento .card:not(.bento-lg) { grid-column: span 1; }
	.hide-mobile { display: none; }
	.footer-grid { grid-template-columns: 1fr; gap: 28px; }
	.footer-bottom { flex-direction: column; }
}

/* =========================================================
   KI-Stack: Kacheln (Tabs) + Panels
   ========================================================= */
.stack { display: grid; gap: 28px; }
/* Funktions-Kacheln: eine Reihe, groß, mit Icon – das Schaufenster der Plattform */
.stack-tabs {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 12px;
}
.stack-tab {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 10px;
	padding: 20px 8px 16px;
	min-height: 104px;
	border-radius: var(--radius);
	border: 1px solid var(--border-strong);
	background: var(--bg-elev);
	color: var(--text-muted);
	font-family: var(--font-sans);
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.tab-ico {
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border-radius: 13px;
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	color: var(--accent);
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.tab-ico svg { width: 24px; height: 24px; }
.tab-label { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }

.stack-tab:hover {
	color: var(--text);
	border-color: color-mix(in srgb, var(--accent) 40%, var(--border-strong));
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}
.stack-tab:hover .tab-ico { transform: scale(1.08); }

.stack-tab.is-active {
	color: #fff;
	border-color: transparent;
	background: var(--accent-grad);
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(79,70,229,.4);
}
.stack-tab.is-active .tab-ico { background: rgba(255,255,255,.18); color: #fff; }

.stack-panels {
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) + 6px);
	box-shadow: var(--shadow);
	overflow: hidden;
	min-height: 380px;
	position: relative;
}
.stack-panel {
	display: none;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	padding: 44px;
	align-items: center;
}
.stack-panel.is-active { display: grid; animation: panelIn .35s ease; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } }

.stack-text h3 { font-size: 24px; margin-bottom: 12px; }
.stack-text > p { color: var(--text-muted); font-size: 15.5px; margin-bottom: 18px; }
.stack-list { display: grid; gap: 10px; }
.stack-list li { position: relative; padding-left: 26px; font-size: 15px; color: var(--text-muted); }
.stack-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }

.stack-visual { display: grid; justify-items: center; }
.stack-visual .chat-card { width: 100%; max-width: 460px; }

.mini-window {
	width: 100%;
	max-width: 440px;
	background: var(--bg-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 20px;
	display: grid;
	gap: 14px;
}
.mw-user {
	justify-self: end;
	max-width: 90%;
	background: var(--btn-solid-bg);
	color: var(--btn-solid-fg);
	padding: 9px 15px;
	border-radius: 14px 14px 4px 14px;
	font-size: 14px;
}
.mw-ai {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	color: var(--text-muted);
	max-width: 95%;
}
.mw-ai .ai-avatar { width: 24px; height: 24px; border-radius: 8px; flex: 0 0 auto; margin-top: 1px; }

.agent-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 380px; }
.pill-flow-lg { width: 100%; max-width: 440px; }

.code-window {
	width: 100%;
	max-width: 440px;
	background: #0d0d11;
	border: 1px solid rgba(244,244,245,.12);
	border-radius: var(--radius);
	padding: 20px 22px;
}
.code-window pre {
	margin: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	line-height: 1.7;
	color: #a5b4fc;
	white-space: pre-wrap;
}

/* =========================================================
   Scroll-Effekte
   ========================================================= */
/* Gestaffeltes Einblenden: Kinder eines .stagger-Containers nacheinander */
.stagger > .reveal:nth-child(1) { transition-delay: .00s; }
.stagger > .reveal:nth-child(2) { transition-delay: .08s; }
.stagger > .reveal:nth-child(3) { transition-delay: .16s; }
.stagger > .reveal:nth-child(4) { transition-delay: .24s; }
.stagger > .reveal:nth-child(5) { transition-delay: .32s; }
.stagger > .reveal:nth-child(6) { transition-delay: .40s; }
.stagger > .reveal:nth-child(7) { transition-delay: .48s; }
.stagger > .reveal:nth-child(8) { transition-delay: .56s; }

/* Video/große Elemente: leichtes Hineinzoomen */
.reveal-scale { transform: translateY(24px) scale(.96); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.8,.32,1); }
.reveal-scale.in { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.hero-aurora { animation: none; transform: none; }
	.reveal-scale { transform: none; transition: none; }
	.stagger > .reveal { transition-delay: 0s !important; }
	.stack-panel.is-active { animation: none; }
}

@media (max-width: 860px) {
	.stack-panel { grid-template-columns: 1fr; padding: 28px 22px; gap: 26px; }
	.stack-text h3 { font-size: 20px; }
	.stack-tabs { display: flex; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.stack-tabs::-webkit-scrollbar { display: none; }
	.stack-tab { flex: 0 0 auto; min-width: 108px; }
}

/* =========================================================
   All-in-One: Feature-Reihen mit Medien-Slots
   ========================================================= */
.feature-rows { display: grid; gap: 96px; }
.feature-row {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 56px;
	align-items: center;
}
/* Jede zweite Reihe: Medien links, Text rechts */
.feature-row:nth-child(even) .feature-text { order: 2; }
.feature-row:nth-child(even) .media-slot { order: 1; }

.feature-text { display: grid; gap: 14px; justify-items: start; }
.feature-text .kicker { margin: 0; }
.feature-text h3 { font-size: clamp(22px, 3vw, 30px); }
.feature-text > p { color: var(--text-muted); font-size: 16px; }
.feature-link {
	margin-top: 6px;
	font-size: 15px;
	font-weight: 700;
	background: var(--accent-grad);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	transition: opacity .15s ease;
}
.feature-link:hover { opacity: .75; }

/* Medien-Slot: Browser-Rahmen; Platzhalter-Inhalt einfach durch <video>/<img> ersetzen */
.media-slot {
	margin: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--bg-elev);
	box-shadow: 0 20px 50px rgba(0,0,0,.14), 0 0 0 6px color-mix(in srgb, var(--accent) 7%, transparent);
}
.media-slot video, .media-slot img { display: block; width: 100%; height: auto; }
.media-drop {
	aspect-ratio: 16 / 10;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 14px;
	margin: 14px;
	border: 2px dashed var(--border-strong);
	border-radius: var(--radius-sm);
	background: var(--bg-alt);
	text-align: center;
	padding: 24px;
}
.media-icon { font-size: 34px; opacity: .7; }
.media-drop p { font-size: 13.5px; color: var(--text-faint); line-height: 1.7; }
.media-drop strong { display: block; color: var(--text-muted); font-size: 14px; margin-bottom: 2px; }
.media-drop em { font-style: normal; font-size: 12px; opacity: .8; }

@media (max-width: 860px) {
	.feature-rows { gap: 64px; }
	.feature-row { grid-template-columns: 1fr; gap: 24px; }
	.feature-row:nth-child(even) .feature-text { order: 1; }
	.feature-row:nth-child(even) .media-slot { order: 2; }
}

/* =========================================================
   KI-Stack: XL-Kopf, Glow, Zahlen-Leiste
   ========================================================= */
.stack-section { position: relative; overflow: hidden; }
.stack-glow {
	position: absolute;
	inset: -10% -20% auto;
	height: 60%;
	background:
		radial-gradient(45% 55% at 30% 20%, var(--accent), transparent 65%),
		radial-gradient(45% 55% at 72% 15%, var(--accent-2), transparent 65%);
	opacity: calc(var(--glow-opacity) * .7);
	filter: blur(80px);
	pointer-events: none;
}
.stack-section .container { position: relative; }

.head-xl h2 { font-size: clamp(34px, 5.5vw, 56px); font-weight: 800; letter-spacing: -0.03em; }
.head-xl .section-sub { font-size: 18px; }

.grad-text {
	background: var(--accent-grad);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	position: relative;
	white-space: nowrap;
}
/* handgezeichnete Unterstreichung */
.grad-text::after {
	content: "";
	position: absolute;
	left: 2%; right: 2%; bottom: -0.08em;
	height: 0.14em;
	background: var(--accent-grad);
	border-radius: 999px;
	opacity: .9;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .7s cubic-bezier(.22,.8,.32,1) .35s;
}
.reveal.in .grad-text::after { transform: scaleX(1); }

.stat-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	max-width: 880px;
	margin: 0 auto 44px;
}
.stat {
	display: grid;
	justify-items: center;
	gap: 4px;
	padding: 20px 12px;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
.stat-num {
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 800;
	letter-spacing: -0.02em;
	background: var(--accent-grad);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 13px; color: var(--text-muted); text-align: center; }

@media (max-width: 680px) {
	.stat-row { grid-template-columns: 1fr; }
}

/* =========================================================
   Sicherheits-Siegel (Badges)
   ========================================================= */
.seal-row {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
	max-width: 1000px;
	margin: 0 auto 48px;
}
.seal {
	display: grid;
	justify-items: center;
	gap: 10px;
	padding: 24px 12px 20px;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	text-align: center;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.seal:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.seal-ring {
	position: relative;
	width: 58px; height: 58px;
	display: grid; place-items: center;
	border-radius: 999px;
	color: #fff;
	background: var(--accent-grad);
	box-shadow: 0 6px 18px rgba(79,70,229,.35);
}
/* gestrichelter Siegel-Außenring */
.seal-ring::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 999px;
	border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent);
}
.seal-ring svg { width: 26px; height: 26px; }
.seal strong { font-size: 14.5px; letter-spacing: -0.01em; }
.seal-sub { font-size: 12px; color: var(--text-faint); }

@media (max-width: 900px) { .seal-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .seal-row { grid-template-columns: repeat(2, 1fr); } }

/* Kacheln bleiben IMMER in einer Reihe: unterhalb 1080px wird horizontal gescrollt */
@media (max-width: 1080px) {
	.stack-tabs { display: flex; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.stack-tabs::-webkit-scrollbar { display: none; }
	.stack-tab { flex: 0 0 auto; min-width: 116px; }
}

/* =========================================================
   KI-Agenten: Bild-Umschalter mit Chips
   ========================================================= */
.agent-switch { width: 100%; max-width: 520px; display: grid; gap: 16px; }
.agent-stage { position: relative; }
img.agent-img {
	display: none;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 18px 36px rgba(0,0,0,.16));
}
img.agent-img.is-active { display: block; animation: agentIn .4s cubic-bezier(.22,.8,.32,1); }
@keyframes agentIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }

.agent-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.agent-chip {
	padding: 8px 15px;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	background: var(--bg-elev);
	color: var(--text-muted);
	font-family: var(--font-sans);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: color .15s ease, background .2s ease, border-color .15s ease, box-shadow .2s ease;
}
.agent-chip:hover { color: var(--text); }
.agent-chip.is-active {
	color: #fff;
	border-color: transparent;
	background: var(--accent-grad);
	box-shadow: 0 4px 14px rgba(79,70,229,.35);
}

@media (prefers-reduced-motion: reduce) {
	img.agent-img.is-active { animation: none; }
}

/* =========================================================
   Potenzial-Karten (positive Rahmung)
   ========================================================= */
.potential-card { display: grid; gap: 6px; align-content: start; }
.pot-num {
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.02em;
	background: var(--accent-grad);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	font-variant-numeric: tabular-nums;
}
.potential-card h3 { margin-bottom: 6px; }

/* =========================================================
   Highlight im Titel (markierter Begriff)
   ========================================================= */
.hl {
	padding: 0.04em 0.18em;
	border-radius: 0.22em;
	background: color-mix(in srgb, var(--accent) 14%, transparent);
	color: var(--accent);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* =========================================================
   VS-Vergleich: überlappende Karten
   ========================================================= */
.vs {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	align-items: stretch;
	max-width: 1040px;
	margin: 56px auto 0;
}
.vs-plain {
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) + 4px);
	padding: 40px 100px 40px 40px;   /* rechts Platz für die Überlappung */
	margin-right: -64px;              /* Akzentkarte legt sich darüber */
}
.vs-plain h3 { font-size: 20px; margin-bottom: 26px; color: var(--text); }
.vs-plain ul { display: grid; gap: 20px; }
.vs-plain li { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 600; color: var(--text-muted); }
.vs-x {
	width: 30px; height: 30px;
	display: grid; place-items: center;
	border-radius: 999px;
	background: var(--bg-alt);
	border: 1px solid var(--border);
	color: var(--text-faint);
	font-size: 15px;
	font-weight: 700;
	flex: 0 0 auto;
}

.vs-accent {
	position: relative;
	overflow: hidden;
	border-radius: calc(var(--radius) + 4px);
	padding: 40px 38px;
	background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent-2)));
	color: #fff;
	transform: translateY(-32px);
	box-shadow: 0 30px 70px rgba(79,70,229,.4);
	z-index: 2;
}
/* dezentes Strahlen-Wasserzeichen wie in der Vorlage */
.vs-deco {
	position: absolute;
	right: -60px; top: -40px;
	width: 320px; height: 320px;
	background:
		conic-gradient(from 0deg, rgba(255,255,255,.14) 0 14deg, transparent 14deg 40deg,
			rgba(255,255,255,.10) 40deg 54deg, transparent 54deg 90deg,
			rgba(255,255,255,.12) 90deg 104deg, transparent 104deg 360deg);
	border-radius: 999px;
	filter: blur(1px);
	pointer-events: none;
}
.vs-accent h3 {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 20px;
	margin-bottom: 30px;
	color: #fff;
}
.vs-spark { font-size: 22px; line-height: 1; }
.vs-accent ul { position: relative; display: grid; gap: 20px; }
.vs-accent li { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 600; }
.vs-check {
	width: 30px; height: 30px;
	display: grid; place-items: center;
	border-radius: 999px;
	background: rgba(255,255,255,.95);
	color: var(--accent);
	flex: 0 0 auto;
}
.vs-check svg { width: 15px; height: 15px; }

[data-theme="dark"] .vs-accent, .biosu-scope[data-theme="dark"] .vs-accent { box-shadow: 0 30px 70px rgba(0,0,0,.55); }

@media (max-width: 860px) {
	.vs { grid-template-columns: 1fr; margin-top: 40px; }
	.vs-plain { margin-right: 0; padding: 30px 24px; border-radius: var(--radius) var(--radius) 0 0; }
	.vs-accent { transform: none; margin: -8px 12px 0; padding: 30px 24px; }
}

/* =========================================================
   Chatfenster mit Modell-Auswahl (Dropdown)
   ========================================================= */
.model-chat {
	width: 100%;
	max-width: 480px;
	text-align: left;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: visible;
}
.model-chat .chat-topbar { border-radius: var(--radius) var(--radius) 0 0; }

.mc-toolbar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--border);
}
.mc-select {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 12px;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	background: var(--bg-alt);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color .15s ease, background .2s ease;
}
.mc-select:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); }
.mc-badge {
	width: 22px; height: 22px;
	display: grid; place-items: center;
	border-radius: 999px;
	background: var(--brand, var(--accent));
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	flex: 0 0 auto;
}
.mc-tag { font-size: 12px; font-weight: 600; color: var(--text-faint); }
.mc-chev { width: 15px; height: 15px; color: var(--text-faint); transition: transform .2s ease; }
.mc-select[aria-expanded="true"] .mc-chev { transform: rotate(180deg); }
.mc-count { font-size: 12px; font-weight: 700; color: var(--text-faint); white-space: nowrap; }

.mc-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 14px;
	z-index: 20;
	min-width: 260px;
	background: var(--bg-elev);
	border: 1px solid var(--border-strong);
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(0,0,0,.22);
	padding: 6px;
	display: grid;
	animation: menuIn .18s ease;
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } }
.mc-menu button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 11px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--text);
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	text-align: left;
}
.mc-menu button:hover { background: var(--bg-alt); }
.mc-menu em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: var(--text-faint); }

.mc-answer { color: var(--text-muted); font-size: 14.5px; }
.mc-via { display: block; margin-top: 8px; font-size: 12px; color: var(--text-faint); }
.mc-via strong { color: var(--accent); font-weight: 700; }

/* CTA unter dem Ablauf-Zeitstrahl */
.steps-cta { display: grid; justify-items: center; gap: 12px; margin-top: 44px; text-align: center; }

/* =========================================================
   Magazin: Beitrags-Karten
   ========================================================= */
.post-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.post-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.post-media { display: block; }
.post-media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.post-card:hover .post-media img { transform: scale(1.04); }
.post-media-ph {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	background:
		radial-gradient(120% 120% at 15% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
		radial-gradient(120% 120% at 90% 100%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 60%),
		var(--bg-alt);
	border-bottom: 1px solid var(--border);
}
.post-media-ph .brand-mark { width: 42px; height: 42px; border-radius: 13px; opacity: .9; }

.post-body { display: grid; gap: 10px; padding: 22px 24px 24px; align-content: start; }
.post-meta { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); display: flex; gap: 8px; }
.post-body h3 { font-size: 18px; line-height: 1.35; }
.post-body h3 a { transition: color .15s ease; }
.post-body h3 a:hover { color: var(--accent); }
.post-excerpt { color: var(--text-muted); font-size: 14.5px; }
.post-body .feature-link { margin-top: 2px; font-size: 14px; }

@media (max-width: 900px) { .post-grid { grid-template-columns: 1fr; } }

/* Branchen-Karten */
.branche-card { display: grid; gap: 10px; align-content: start; }
.branche-ico {
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border-radius: 13px;
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	color: var(--accent);
	margin-bottom: 4px;
}
.branche-ico svg { width: 24px; height: 24px; }

/* =========================================================
   Kunden-Leiste (Wortmarken / Logos)
   ========================================================= */
.customer-strip { padding: 8px 0 40px; }
.customer-strip .marquee-label { margin-bottom: 18px; }
.customer-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 18px 48px;
}
.customer {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--text-faint);
	white-space: nowrap;
	transition: color .2s ease;
	cursor: default;
}
.customer:hover { color: var(--text-muted); }
.customer-row img { max-height: 34px; width: auto; opacity: .65; filter: grayscale(1); transition: opacity .2s ease, filter .2s ease; }
.customer-row img:hover { opacity: 1; filter: grayscale(0); }

@media (max-width: 680px) {
	.customer-row { gap: 12px 28px; }
	.customer { font-size: 15px; }
}

/* =========================================================
   Case-Study-Karte
   ========================================================= */
.case-card {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 44px;
	padding: 44px;
	margin-bottom: 24px;
	background:
		linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box,
		var(--accent-grad) border-box;
	border: 1px solid transparent;
	border-radius: calc(var(--radius) + 6px);
	box-shadow: 0 18px 50px rgba(79,70,229,.12);
}
.case-main { display: grid; gap: 16px; align-content: start; justify-items: start; }
.case-main .kicker { margin: 0; }
.case-main h3 { font-size: clamp(21px, 2.8vw, 27px); }
.case-text { color: var(--text-muted); font-size: 15.5px; }
.case-main blockquote {
	margin: 4px 0 0;
	padding-left: 18px;
	border-left: 3px solid var(--accent);
	font-size: 16px;
	line-height: 1.55;
	color: var(--text);
}
.case-person { display: flex; align-items: center; gap: 12px; }
.case-person strong { display: block; font-size: 15px; }
.case-person span:not(.quote-avatar) { display: block; font-size: 13px; color: var(--text-muted); }

.case-stats {
	display: grid;
	gap: 0;
	align-content: center;
	border-left: 1px solid var(--border);
	padding-left: 40px;
}
.case-stat { padding: 18px 0; }
.case-stat + .case-stat { border-top: 1px solid var(--border); }
.case-stat span {
	display: block;
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.02em;
	background: var(--accent-grad);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	font-variant-numeric: tabular-nums;
}
.case-stat p { font-size: 13.5px; color: var(--text-muted); margin-top: 2px; }

.quote-single { max-width: 680px; margin: 24px auto 0; }

@media (max-width: 860px) {
	.case-card { grid-template-columns: 1fr; gap: 28px; padding: 28px 22px; }
	.case-stats { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; padding-top: 10px; }
}

/* =========================================================
   Kontrast-Fix: Kunden-Leiste & System-Marquee im Dunkelmodus
   ========================================================= */
.marquee-item, .customer { color: var(--text-muted); }
[data-theme="dark"] { --text-faint: #85858e; }
[data-theme="dark"] .marquee-item,
[data-theme="dark"] .customer, .biosu-scope[data-theme="dark"] .customer { color: #c9c9d1; }
[data-theme="dark"] .marquee-label, .biosu-scope[data-theme="dark"] .marquee-label { color: #9a9aa3; }
[data-theme="dark"] .marquee-section, .biosu-scope[data-theme="dark"] .marquee-section { background: #101017; border-color: rgba(244,244,245,.14); }

/* =========================================================
   KI-Potenzial-Check
   ========================================================= */
.check-hero { padding-bottom: 24px; }
.check-section { padding-top: 24px; }
.check-card {
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) + 6px);
	box-shadow: var(--shadow);
	padding: 40px;
	position: relative;
}
.check-progress {
	height: 6px;
	border-radius: 999px;
	background: var(--bg-alt);
	overflow: hidden;
	margin-bottom: 14px;
}
.check-bar {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--accent-grad);
	transition: width .35s ease;
}
.check-count { font-size: 13px; font-weight: 700; color: var(--text-faint); margin-bottom: 22px; }

.check-step { display: none; }
.check-step.is-active { display: block; animation: panelIn .3s ease; }
.check-step h2 { font-size: clamp(20px, 3vw, 26px); margin-bottom: 20px; }
.check-hint { font-size: 13px; color: var(--text-faint); margin: -12px 0 16px; }

.check-options { display: grid; gap: 10px; }
.check-options button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 15px 18px;
	border-radius: 13px;
	border: 1px solid var(--border-strong);
	background: var(--bg-alt);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, background .2s ease, transform .12s ease, box-shadow .2s ease;
}
.check-options button:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); transform: translateY(-1px); }
.check-options button.is-active {
	border-color: transparent;
	background: var(--accent-grad);
	color: #fff;
	box-shadow: 0 8px 22px rgba(79,70,229,.35);
}

.check-nav { margin-top: 20px; display: flex; justify-content: flex-end; }
.check-nav button:disabled { opacity: .45; cursor: not-allowed; }
.check-back {
	margin-top: 22px;
	background: none;
	border: 0;
	color: var(--text-faint);
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.check-back:hover { color: var(--text); }

.check-result { text-align: center; }
.check-result h2 { margin-bottom: 8px; }
.check-score { margin: 18px 0 24px; }
.check-score .pot-num { font-size: 52px; }
.check-score p { font-size: 13.5px; color: var(--text-muted); }
.check-result .stack-list { text-align: left; max-width: 560px; margin: 0 auto 28px; }
.check-result .hero-cta { justify-content: center; }
.check-disclaimer { margin-top: 18px; font-size: 12px; color: var(--text-faint); max-width: 480px; margin-inline: auto; }

@media (max-width: 680px) {
	.check-card { padding: 24px 18px; }
}

/* =========================================================
   Stilisierte UI-Mockups (Medien-Slots) – Peec-Stil
   ========================================================= */
.mock {
	display: grid;
	gap: 14px;
	padding: 26px 24px;
	background:
		radial-gradient(90% 90% at 10% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
		radial-gradient(90% 90% at 95% 100%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 60%),
		var(--bg-alt);
	min-height: 280px;
	align-content: center;
}
.mk-caption { text-align: center; font-size: 12.5px; color: var(--text-faint); margin-top: 4px; }

/* Verbinden: Hub-Grafik */
.mock-connect { grid-template-columns: auto 1fr auto; align-items: center; column-gap: 14px; }
.mock-connect .mk-col { display: grid; gap: 12px; }
.mock-connect .mk-hub { display: flex; align-items: center; gap: 8px; }
.mock-connect .mk-caption { grid-column: 1 / -1; }
.mk-pulse { position: relative; }
.mk-pulse::after {
	content: "";
	position: absolute; inset: -7px;
	border-radius: 999px;
	border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
	animation: mkpulse 2.2s ease-out infinite;
}
@keyframes mkpulse { 0% { opacity: .9; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.25); } }

/* Workflows: Prozess-Karten */
.mock-flow .mk-card {
	display: flex; align-items: center; gap: 12px;
	padding: 13px 16px;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-size: 14px; font-weight: 600;
}
.mock-flow .mk-card em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--text-faint); }
.mk-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--accent-2); animation: mkblink 1.1s ease-in-out infinite alternate; flex: 0 0 auto; margin-inline: 3px; }
@keyframes mkblink { to { opacity: .25; } }
.mk-live { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }

/* Sicherheit: Admin-Tabelle */
.mock-admin { gap: 10px; }
.mk-head, .mk-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; }
.mk-head { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); padding-inline: 16px; grid-template-columns: 1fr auto auto; }
.mk-row { padding: 11px 16px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; }
.mk-ava { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: var(--accent-grad); color: #fff; font-size: 11.5px; font-weight: 800; }
.mk-chip { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg-alt); font-size: 12px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.mk-chip-accent { border-color: transparent; background: var(--accent-grad); color: #fff; }
.mk-toggle { width: 36px; height: 20px; border-radius: 999px; background: var(--border-strong); position: relative; }
.mk-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #fff; transition: left .2s ease; }
.mk-toggle.on { background: var(--accent-grad); }
.mk-toggle.on::after { left: 18px; }

/* Steuern: Coins-Dashboard */
.mk-kpi { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-inline: 4px; }
.mk-kpi span { font-size: 12.5px; color: var(--text-faint); font-weight: 600; }
.mk-kpi strong { font-size: 26px; font-weight: 800; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mk-bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; padding: 4px; }
.mk-bars i { flex: 1; height: var(--h, 40%); background: var(--border-strong); border-radius: 6px 6px 3px 3px; }
.mk-bars i.hi { background: var(--accent-grad); }
.mk-legend { display: flex; flex-wrap: wrap; gap: 8px; }

/* =========================================================
   Potenzial-Karten: Mini-Visuals
   ========================================================= */
.potential-card { position: relative; }
.pv { display: block; margin-bottom: 14px; }

/* Ring (Zeit zurück) */
.pv-ring { width: 54px; height: 54px; border-radius: 999px; background: conic-gradient(var(--accent) 0 62%, color-mix(in srgb, var(--text-faint) 25%, transparent) 62% 100%); display: grid; place-items: center; }
.pv-ring i { width: 38px; height: 38px; border-radius: 999px; background: var(--bg-elev); }

/* Balken-Vergleich (Projekt vs. Minuten) */
.pv-bars { display: grid; gap: 8px; }
.pvb { display: grid; gap: 3px; }
.pvb i { display: block; height: 9px; border-radius: 999px; }
.pvb i.long { width: 92%; background: color-mix(in srgb, var(--text-faint) 30%, transparent); }
.pvb i.short { width: 16%; background: var(--accent-grad); }
.pvb em { font-style: normal; font-size: 11px; color: var(--text-faint); }

/* Team-Avatare (alle an Bord) */
.pv-team { display: flex; }
.pv-team i {
	width: 32px; height: 32px;
	display: grid; place-items: center;
	border-radius: 999px;
	background: var(--accent-grad);
	color: #fff;
	font-style: normal; font-size: 12px; font-weight: 800;
	border: 2px solid var(--bg-elev);
	margin-left: -8px;
}
.pv-team i:first-child { margin-left: 0; }
.pv-team i:last-child { background: var(--bg-alt); color: var(--text-muted); border-color: var(--border-strong); }

@media (prefers-reduced-motion: reduce) {
	.mk-pulse::after, .mk-dot { animation: none; }
}

/* =========================================================
   Screens-Upgrade: Fenster-Optik, Dark-Mode-Glow, Leben
   ========================================================= */

/* macOS-Ampel in allen Fensterleisten – liest sich sofort als "Bildschirm" */
.chat-topbar .tb-dot:nth-of-type(1) { background: #ff5f57; }
.chat-topbar .tb-dot:nth-of-type(2) { background: #febc2e; }
.chat-topbar .tb-dot:nth-of-type(3) { background: #28c840; }

/* Screen-Glanz oben (subtile Spiegelung) */
.mock { position: relative; }
.mock::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(165deg, rgba(255,255,255,.06), transparent 38%);
	pointer-events: none;
}

/* Hover: Screens heben sich als Objekte an */
.media-slot { transition: transform .25s ease, box-shadow .25s ease; }
.media-slot:hover { transform: translateY(-4px); }

/* ---------- Dark Mode: Fenster leuchten klar hervor ---------- */
[data-theme="dark"] .media-slot, .biosu-scope[data-theme="dark"] .media-slot, .biosu-scope[data-theme="dark"] .media-slot {
	border-color: rgba(255,255,255,.16);
	box-shadow:
		0 30px 70px rgba(0,0,0,.55),
		0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),
		0 0 60px color-mix(in srgb, var(--accent) 22%, transparent);
}
[data-theme="dark"] .media-slot .chat-topbar, .biosu-scope[data-theme="dark"] .media-slot .chat-topbar, .biosu-scope[data-theme="dark"] .media-slot .chat-topbar {
	background: #1c1c27;
	border-color: rgba(255,255,255,.12);
}
[data-theme="dark"] .mock, .biosu-scope[data-theme="dark"] .mock, .biosu-scope[data-theme="dark"] .mock {
	background:
		radial-gradient(90% 90% at 10% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
		radial-gradient(90% 90% at 95% 100%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 60%),
		#15151f;
}
[data-theme="dark"] .mk-card, .biosu-scope[data-theme="dark"] .mk-card,
[data-theme="dark"] .mk-row, .biosu-scope[data-theme="dark"] .mk-row, .biosu-scope[data-theme="dark"] .mk-row {
	background: #1e1e2a;
	border-color: rgba(255,255,255,.13);
}
[data-theme="dark"] .pv-ring i, .biosu-scope[data-theme="dark"] .pv-ring i, .biosu-scope[data-theme="dark"] .pv-ring i { background: #15151f; }

/* ---------- Farbige Details ---------- */
.mock-connect .pill { display: inline-flex; align-items: center; gap: 8px; }
.sysdot { width: 8px; height: 8px; border-radius: 999px; background: var(--c, var(--accent)); box-shadow: 0 0 8px var(--c, var(--accent)); flex: 0 0 auto; }

.mk-kpi-right { display: grid; justify-items: end; gap: 2px; }
.mk-trend { font-style: normal; font-size: 12px; font-weight: 700; color: #34d399; }

.mk-chip-cyan { border-color: transparent; background: color-mix(in srgb, var(--accent-2) 22%, transparent); color: var(--accent-2); }
.mk-ava-b { background: linear-gradient(135deg, var(--accent-2), #34d399); }

/* ---------- Einstiegs-Animationen (starten beim Scrollen ins Bild) ---------- */
.media-slot.in .mk-bars i {
	transform-origin: bottom;
	animation: mkBarUp .7s cubic-bezier(.22,.8,.32,1) both;
}
.media-slot.in .mk-bars i:nth-child(1) { animation-delay: .05s; }
.media-slot.in .mk-bars i:nth-child(2) { animation-delay: .12s; }
.media-slot.in .mk-bars i:nth-child(3) { animation-delay: .19s; }
.media-slot.in .mk-bars i:nth-child(4) { animation-delay: .26s; }
.media-slot.in .mk-bars i:nth-child(5) { animation-delay: .33s; }
.media-slot.in .mk-bars i:nth-child(6) { animation-delay: .40s; }
.media-slot.in .mk-bars i:nth-child(7) { animation-delay: .47s; }
@keyframes mkBarUp { from { transform: scaleY(0); } }

.media-slot.in .mock-flow .mk-card { animation: mkCardIn .45s ease both; }
.media-slot.in .mock-flow .mk-card:nth-child(1) { animation-delay: .1s; }
.media-slot.in .mock-flow .mk-card:nth-child(2) { animation-delay: .3s; }
.media-slot.in .mock-flow .mk-card:nth-child(3) { animation-delay: .5s; }
.media-slot.in .mock-flow .mk-card:nth-child(4) { animation-delay: .7s; }
@keyframes mkCardIn { from { opacity: 0; transform: translateX(-12px); } }

.media-slot.in .mock-admin .mk-row { animation: mkCardIn .45s ease both; }
.media-slot.in .mock-admin .mk-row:nth-child(2) { animation-delay: .1s; }
.media-slot.in .mock-admin .mk-row:nth-child(3) { animation-delay: .25s; }
.media-slot.in .mock-admin .mk-row:nth-child(4) { animation-delay: .4s; }
.media-slot.in .mk-toggle.on::after { animation: mkToggle .35s ease .55s backwards; }
@keyframes mkToggle { from { left: 2px; } }

@media (prefers-reduced-motion: reduce) {
	.media-slot.in .mk-bars i,
	.media-slot.in .mock-flow .mk-card,
	.media-slot.in .mock-admin .mk-row,
	.media-slot.in .mk-toggle.on::after { animation: none; }
	.media-slot:hover { transform: none; }
}

/* =========================================================
   Peec-Stil Bento: Kacheln mit Ebenen-Mockups
   ========================================================= */
.p-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.p-tile {
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) + 6px);
	padding: 30px 30px 0;
	overflow: hidden;
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.p-tile:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.p-tile h3 { font-size: 21px; margin-bottom: 8px; }
.p-tile > p { color: var(--text-muted); font-size: 15px; max-width: 46ch; }
.p-visual { margin-top: 22px; }
.p-visual video, .p-visual img { display: block; width: 100%; border-radius: var(--radius) var(--radius) 0 0; }

/* Bühne mit Ebenen */
.p-mock { position: relative; min-height: 270px; padding-top: 6px; }

/* Basis-Ebene: leicht zurückgenommen */
.pm-base {
	background: var(--bg-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius) var(--radius) 0 0;
	padding: 18px 18px 60px;
	display: grid;
	gap: 10px;
	opacity: .8;
	-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.pmb-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; margin-bottom: 4px; }
.pmb-row {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 14px;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-size: 13.5px; font-weight: 600;
}
.pmb-row em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--text-faint); font-weight: 500; }
.pmb-row .mk-ava { width: 24px; height: 24px; font-size: 10px; }
.pm-bars { height: 88px; }

/* Schwebende Detail-Karte: scharf, geneigt, mit Tiefe */
.pm-float {
	position: absolute;
	left: 6%; right: 6%; bottom: 14px;
	background: var(--bg-elev);
	border: 1px solid var(--border-strong);
	border-radius: 14px;
	padding: 16px 18px;
	box-shadow: 0 22px 50px rgba(0,0,0,.28), 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
	transform: rotate(-1.2deg);
	display: grid;
	gap: 10px;
}
.p-tile:nth-child(even) .pm-float { transform: rotate(1.2deg); }
.pmf-q { font-size: 14.5px; font-weight: 700; }
.pmf-title { font-size: 14px; font-weight: 700; }
.pmf-sub { font-size: 13px; color: var(--text-muted); }
.pmf-tags, .pmf-steps { display: flex; flex-wrap: wrap; gap: 7px; }
.pmf-steps span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.pmf-steps .check { width: 14px; height: 14px; }
.pmf-steps .check::after { left: 4px; top: 1.5px; width: 3.5px; height: 7px; }
.pmf-actions { display: flex; gap: 8px; }
.pmf-btn { padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; border: 1px solid var(--border-strong); color: var(--text-muted); }
.pmf-btn-accent { background: var(--accent-grad); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(79,70,229,.35); }
.pmf-list { display: grid; gap: 7px; }
.pmf-list span { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.pmf-list em { margin-left: auto; font-style: normal; color: var(--text-faint); font-size: 12px; }
.pmf-check { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--border-strong); position: relative; flex: 0 0 auto; }
.pmf-check.on { background: var(--accent-grad); border-color: transparent; }
.pmf-check.on::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Geneigtes Mini-Kärtchen (wie Peecs "Suggested Prompts") */
.pm-tilt {
	position: absolute;
	top: -2px; right: -6px;
	z-index: 2;
	background: var(--bg-elev);
	border: 1px solid var(--border-strong);
	border-radius: 12px;
	padding: 9px 12px;
	transform: rotate(4deg);
	box-shadow: 0 12px 28px rgba(0,0,0,.2);
}

/* Pastell-Chips */
.tagc { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.tg-green  { background: color-mix(in srgb, #34d399 16%, transparent); color: #10b981; }
.tg-violet { background: color-mix(in srgb, #a78bfa 18%, transparent); color: #8b5cf6; }
.tg-orange { background: color-mix(in srgb, #fb923c 18%, transparent); color: #f97316; }
.tg-blue   { background: color-mix(in srgb, var(--accent-2) 18%, transparent); color: var(--accent-2); }
[data-theme="dark"] .tg-green, .biosu-scope[data-theme="dark"] .tg-green, .biosu-scope[data-theme="dark"] .tg-green { color: #34d399; }
[data-theme="dark"] .tg-violet, .biosu-scope[data-theme="dark"] .tg-violet, .biosu-scope[data-theme="dark"] .tg-violet { color: #a78bfa; }
[data-theme="dark"] .tg-orange, .biosu-scope[data-theme="dark"] .tg-orange, .biosu-scope[data-theme="dark"] .tg-orange { color: #fb923c; }

/* Dark Mode: Kacheln & Ebenen klar als Screens lesbar */
[data-theme="dark"] .p-tile, .biosu-scope[data-theme="dark"] .p-tile, .biosu-scope[data-theme="dark"] .p-tile {
	background: #101018;
	border-color: rgba(255,255,255,.14);
}
[data-theme="dark"] .pm-base, .biosu-scope[data-theme="dark"] .pm-base, .biosu-scope[data-theme="dark"] .pm-base { background: #171722; border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .pmb-row, .biosu-scope[data-theme="dark"] .pmb-row, .biosu-scope[data-theme="dark"] .pmb-row { background: #1f1f2c; border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .pm-float, .biosu-scope[data-theme="dark"] .pm-float,
[data-theme="dark"] .pm-tilt, .biosu-scope[data-theme="dark"] .pm-tilt, .biosu-scope[data-theme="dark"] .pm-tilt {
	background: #1c1c29;
	border-color: rgba(255,255,255,.18);
	box-shadow: 0 26px 60px rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 44px color-mix(in srgb, var(--accent) 16%, transparent);
}

/* Einstieg: Float-Karte poppt herein, Balken wachsen */
.p-tile.reveal.in .pm-float { animation: pmPop .6s cubic-bezier(.22,.8,.32,1) .25s backwards; }
@keyframes pmPop { from { opacity: 0; transform: translateY(16px) rotate(0deg) scale(.96); } }
.p-tile.reveal.in .pm-tilt { animation: pmPop .5s ease .5s backwards; }
.p-tile.reveal.in .pm-bars i { transform-origin: bottom; animation: mkBarUp .7s cubic-bezier(.22,.8,.32,1) both; }
.p-tile.reveal.in .pm-bars i:nth-child(2) { animation-delay: .08s; }
.p-tile.reveal.in .pm-bars i:nth-child(3) { animation-delay: .16s; }
.p-tile.reveal.in .pm-bars i:nth-child(4) { animation-delay: .24s; }
.p-tile.reveal.in .pm-bars i:nth-child(5) { animation-delay: .32s; }
.p-tile.reveal.in .pm-bars i:nth-child(6) { animation-delay: .40s; }

@media (max-width: 860px) {
	.p-grid { grid-template-columns: 1fr; }
	.p-tile { padding: 24px 20px 0; }
	.pm-float { left: 3%; right: 3%; }
}
@media (prefers-reduced-motion: reduce) {
	.p-tile.reveal.in .pm-float, .p-tile.reveal.in .pm-tilt, .p-tile.reveal.in .pm-bars i { animation: none; }
	.p-tile:hover { transform: none; }
}

/* =========================================================
   Mosaik-Raster + detaillierte App-Screens
   ========================================================= */
.p-grid { grid-template-columns: repeat(12, 1fr); }
.pt-7 { grid-column: span 7; }
.pt-5 { grid-column: span 5; }

/* Dark Mode: lokale Token-Überschreibung → alle Screen-Bauteile adaptieren automatisch */
[data-theme="dark"] .p-tile, .biosu-scope[data-theme="dark"] .p-tile, .biosu-scope[data-theme="dark"] .p-tile {
	--bg-alt: #171722;
	--bg-elev: #1f1f2c;
	--border: rgba(255,255,255,.11);
	--border-strong: rgba(255,255,255,.18);
	background: #101018;
}

/* ---------- App-Fenster (Kachel Verbinden) ---------- */
.app {
	display: grid;
	grid-template-columns: 158px 1fr;
	border: 1px solid var(--border);
	border-radius: var(--radius) var(--radius) 0 0;
	overflow: hidden;
	min-height: 400px;
	background: var(--bg-elev);
}
.app-side {
	background: var(--bg-alt);
	border-right: 1px solid var(--border);
	padding: 14px 10px;
	display: grid;
	gap: 10px;
	align-content: start;
	grid-template-rows: auto auto 1fr auto;
}
.as-logo { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; padding-inline: 4px; }
.as-logo .brand-mark { width: 18px; height: 18px; border-radius: 6px; }
.as-new {
	display: block;
	text-align: center;
	padding: 7px 8px;
	border-radius: 9px;
	background: var(--accent-grad);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(79,70,229,.3);
}
.as-list { display: grid; gap: 3px; align-content: start; }
.as-item {
	padding: 7px 9px;
	border-radius: 8px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.as-item.active { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); }
.as-user { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; padding-inline: 4px; }
.as-user .mk-ava { width: 22px; height: 22px; font-size: 9px; }

.app-main { display: grid; grid-template-rows: auto 1fr; }
.am-top {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--border);
}
.am-model {
	white-space: nowrap;
	display: inline-flex; align-items: center; gap: 7px;
	padding: 6px 11px;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	background: var(--bg-alt);
	font-size: 12.5px; font-weight: 700;
}
.am-model .mc-badge { width: 18px; height: 18px; font-size: 10px; }
.am-model b { font-weight: 400; color: var(--text-faint); font-size: 10px; }
.am-chat { padding: 18px 18px 20px; display: grid; gap: 14px; align-content: start; }
.bub-u {
	justify-self: end;
	max-width: 82%;
	background: var(--btn-solid-bg);
	color: var(--btn-solid-fg);
	padding: 9px 14px;
	border-radius: 14px 14px 4px 14px;
	font-size: 13px;
	font-weight: 500;
}
.bub-a { display: flex; gap: 10px; align-items: flex-start; }
.bub-a .ai-avatar { width: 24px; height: 24px; border-radius: 8px; flex: 0 0 auto; margin-top: 2px; }
.bub-body { display: grid; gap: 10px; font-size: 13px; color: var(--text-muted); max-width: 92%; }
.tool {
	border: 1px solid var(--border-strong);
	border-left: 3px solid var(--accent);
	border-radius: 10px;
	background: var(--bg-alt);
	padding: 11px 13px;
	display: grid;
	gap: 7px;
}
.tool-h { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; font-weight: 800; color: var(--text-faint); }
.tool-step { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.tool-step .check { width: 14px; height: 14px; }
.tool-step .check::after { left: 4px; top: 1.5px; width: 3.5px; height: 7px; }

/* ---------- Workflow-Builder (Kachel Automatisieren) ---------- */
.wf {
	position: relative;
	border: 1px solid var(--border);
	border-radius: var(--radius) var(--radius) 0 0;
	background: var(--bg-alt);
	padding: 16px 16px 22px;
	display: grid;
	gap: 0;
	min-height: 340px;
	align-content: start;
}
.wf-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; margin-bottom: 14px; }
.wf-node {
	display: flex; align-items: center; gap: 11px;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 11px 13px;
}
.wf-node strong { display: block; font-size: 13px; }
.wf-node em { display: block; font-style: normal; font-size: 11.5px; color: var(--text-faint); }
.wf-ico {
	width: 32px; height: 32px;
	display: grid; place-items: center;
	border-radius: 10px;
	background: color-mix(in srgb, var(--c, var(--accent)) 16%, transparent);
	font-size: 15px;
	flex: 0 0 auto;
}
.wf-t { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text-faint); display: inline-flex; }
.wf-line { justify-self: start; margin-left: 28px; width: 2px; height: 14px; background: repeating-linear-gradient(180deg, var(--border-strong) 0 4px, transparent 4px 8px); }
.wf-run { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.wf .pm-tilt { top: -14px; right: -8px; }

/* ---------- Admin (Kachel Sicherheit) ---------- */
.adm {
	position: relative;
	border: 1px solid var(--border);
	border-radius: var(--radius) var(--radius) 0 0;
	background: var(--bg-alt);
	padding: 14px 14px 66px;
	display: grid;
	gap: 8px;
	min-height: 340px;
	align-content: start;
}
.adm-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.adm-tabs span { padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--text-faint); }
.adm-tabs .active { background: var(--bg-elev); border: 1px solid var(--border-strong); color: var(--text); }
.adm-row {
	display: flex; align-items: center; gap: 10px;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 9px 12px;
}
.adm-row .mk-ava { width: 28px; height: 28px; font-size: 10.5px; }
.adm-row strong { display: block; font-size: 12.5px; }
.adm-row em { display: block; font-style: normal; font-size: 10.5px; color: var(--text-faint); }
.adm-row .tagc { margin-left: auto; font-size: 10.5px; padding: 3px 9px; }
.adm-row .mk-toggle { flex: 0 0 auto; transform: scale(.85); }
.adm-foot { font-size: 11px; color: var(--text-faint); padding-inline: 4px; margin-top: 2px; }
.pm-float-sm { left: auto; right: 10px; bottom: 10px; width: min(78%, 250px); padding: 12px 14px; }
.pm-float-sm .pmf-title { font-size: 12.5px; }
.pm-float-sm .pmf-sub { font-size: 11.5px; }
.pm-float-sm .pmf-btn { font-size: 11px; padding: 5px 11px; }

/* ---------- Dashboard (Kachel Steuern) ---------- */
.dash {
	border: 1px solid var(--border);
	border-radius: var(--radius) var(--radius) 0 0;
	background: var(--bg-alt);
	padding: 16px;
	display: grid;
	gap: 14px;
	min-height: 340px;
	align-content: start;
}
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpi {
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 12px 14px;
	display: grid;
	gap: 2px;
	justify-items: start;
}
.kpi em { font-style: normal; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; }
.kpi strong { font-size: 24px; font-weight: 800; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.kpi .mk-trend, .kpi .tagc { font-size: 10.5px; }
.kpi-sub { font-size: 11px; color: var(--text-faint); font-weight: 700; }

.dash-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; align-items: stretch; }
.dash-chart { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 14px 14px 10px; display: grid; gap: 6px; }
.dash-chart .mk-bars { height: 120px; }
.dash-days { display: flex; }
.dash-days span { flex: 1; text-align: center; font-size: 10px; color: var(--text-faint); font-weight: 700; }
.dash-side { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: grid; gap: 10px; align-content: start; }
.dash-side .pmf-list span { font-size: 12px; }
.dash-side .tagc { justify-self: start; font-size: 10.5px; }

/* Einstiegs-Animationen für die neuen Screens */
.p-tile.reveal.in .tool-step { animation: mkCardIn .4s ease both; }
.p-tile.reveal.in .tool-step:nth-of-type(1) { animation-delay: .15s; }
.p-tile.reveal.in .tool-step:nth-of-type(2) { animation-delay: .35s; }
.p-tile.reveal.in .tool-step:nth-of-type(3) { animation-delay: .55s; }
.p-tile.reveal.in .tool-step:nth-of-type(4) { animation-delay: .75s; }
.p-tile.reveal.in .wf-node { animation: mkCardIn .45s ease both; }
.p-tile.reveal.in .wf-node:nth-of-type(3) { animation-delay: .15s; }
.p-tile.reveal.in .wf-node:nth-of-type(4) { animation-delay: .3s; }
.p-tile.reveal.in .wf-node:nth-of-type(5) { animation-delay: .45s; }
.p-tile.reveal.in .adm-row { animation: mkCardIn .45s ease both; }
.p-tile.reveal.in .adm-row:nth-of-type(2) { animation-delay: .12s; }
.p-tile.reveal.in .adm-row:nth-of-type(3) { animation-delay: .24s; }
.p-tile.reveal.in .adm-row:nth-of-type(4) { animation-delay: .36s; }

@media (max-width: 1000px) {
	.pt-7, .pt-5 { grid-column: span 12; }
}
@media (max-width: 640px) {
	.app { grid-template-columns: 1fr; min-height: 0; }
	.app-side { display: none; }
	.dash-kpis, .dash-body { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.p-tile.reveal.in .tool-step, .p-tile.reveal.in .wf-node, .p-tile.reveal.in .adm-row { animation: none; }
}

/* =========================================================
   Dark Mode: App-Screens deutlich hervorheben
   ========================================================= */
[data-theme="dark"] .p-tile, .biosu-scope[data-theme="dark"] .p-tile, .biosu-scope[data-theme="dark"] .p-tile {
	background: #12121c;
	border-color: rgba(255,255,255,.15);
	--bg-alt: #1c1c2a;
	--bg-elev: #282838;
	--border: rgba(255,255,255,.14);
	--border-strong: rgba(255,255,255,.24);
}

/* Farbiges Ambient-Licht hinter jedem Screen */
[data-theme="dark"] .p-visual, .biosu-scope[data-theme="dark"] .p-visual, .biosu-scope[data-theme="dark"] .p-visual { position: relative; }
[data-theme="dark"] .p-visual::before, .biosu-scope[data-theme="dark"] .p-visual::before, .biosu-scope[data-theme="dark"] .p-visual::before {
	content: "";
	position: absolute;
	left: -10%; right: -10%; top: 8%; bottom: -12%;
	background:
		radial-gradient(55% 55% at 30% 55%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%),
		radial-gradient(50% 50% at 75% 70%, color-mix(in srgb, var(--accent-2) 26%, transparent), transparent 70%);
	filter: blur(30px);
	pointer-events: none;
	z-index: 0;
}

/* Die Screens selbst: heller Rand, Akzent-Ring, Glow, Glanz */
[data-theme="dark"] .app, .biosu-scope[data-theme="dark"] .app,
[data-theme="dark"] .wf, .biosu-scope[data-theme="dark"] .wf,
[data-theme="dark"] .adm, .biosu-scope[data-theme="dark"] .adm,
[data-theme="dark"] .dash, .biosu-scope[data-theme="dark"] .dash, .biosu-scope[data-theme="dark"] .dash {
	position: relative;
	z-index: 1;
	border-color: rgba(255,255,255,.24);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
		0 -8px 40px color-mix(in srgb, var(--accent) 16%, transparent),
		0 -28px 70px rgba(0,0,0,.55);
}
[data-theme="dark"] .app::after, .biosu-scope[data-theme="dark"] .app::after,
[data-theme="dark"] .wf::after, .biosu-scope[data-theme="dark"] .wf::after,
[data-theme="dark"] .adm::after, .biosu-scope[data-theme="dark"] .adm::after,
[data-theme="dark"] .dash::after, .biosu-scope[data-theme="dark"] .dash::after, .biosu-scope[data-theme="dark"] .dash::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(160deg, rgba(255,255,255,.07), transparent 34%);
	pointer-events: none;
}

/* Innenleben: klar gestaffelte Flächen und kräftigere Details */
[data-theme="dark"] .as-item.active, .biosu-scope[data-theme="dark"] .as-item.active, .biosu-scope[data-theme="dark"] .as-item.active { background: #303044; color: #fff; }
[data-theme="dark"] .am-top, .biosu-scope[data-theme="dark"] .am-top, .biosu-scope[data-theme="dark"] .am-top { background: #222230; }
[data-theme="dark"] .tool, .biosu-scope[data-theme="dark"] .tool, .biosu-scope[data-theme="dark"] .tool { background: #202030; }
[data-theme="dark"] .tool-step, .biosu-scope[data-theme="dark"] .tool-step, .biosu-scope[data-theme="dark"] .tool-step { color: #e6e6ee; }
[data-theme="dark"] .bub-u, .biosu-scope[data-theme="dark"] .bub-u, .biosu-scope[data-theme="dark"] .bub-u { background: #fff; color: #0b0b10; }
[data-theme="dark"] .wf-node strong, .biosu-scope[data-theme="dark"] .wf-node strong,
[data-theme="dark"] .adm-row strong, .biosu-scope[data-theme="dark"] .adm-row strong, .biosu-scope[data-theme="dark"] .adm-row strong { color: #f2f2f7; }
[data-theme="dark"] .pm-float, .biosu-scope[data-theme="dark"] .pm-float, .biosu-scope[data-theme="dark"] .pm-float { background: #262636; }
[data-theme="dark"] .mk-bars i, .biosu-scope[data-theme="dark"] .mk-bars i, .biosu-scope[data-theme="dark"] .mk-bars i { background: rgba(255,255,255,.22); }
[data-theme="dark"] .mk-bars i.hi, .biosu-scope[data-theme="dark"] .mk-bars i.hi, .biosu-scope[data-theme="dark"] .mk-bars i.hi { background: var(--accent-grad); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent); }

/* "Und vieles mehr"-Leiste unter dem Mosaik */
.p-more { margin-top: 34px; display: grid; justify-items: center; gap: 16px; text-align: center; }
.p-more-title { font-size: 14px; font-weight: 700; color: var(--text-muted); }
.p-more-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; max-width: 760px; }
.p-more-chips .pill { font-size: 13.5px; }

/* =========================================================
   Echte Logos: Modelle (bunt) & Kunden (modus-einheitlich)
   ========================================================= */
/* Modell-Logos: bunt auf weißem Chip – funktioniert hell wie dunkel */
img.mc-logo {
	width: 22px; height: 22px; max-width: none; height: 22px;
	border-radius: 999px;
	background: #fff;
	object-fit: contain;
	padding: 3px;
	border: 1px solid rgba(0,0,0,.08);
	flex: 0 0 auto;
}
img.am-logo { width: 19px; height: 19px; max-width: none; padding: 2.5px; }
.mc-menu img.mc-logo { width: 24px; height: 24px; }

/* Kunden-Logos: helle Seite dunkles Logo, dunkle Seite helles Logo */
.customer-logo { display: inline-flex; align-items: center; }
.customer-logo img {
	height: 30px; width: auto;
	max-height: none;
	filter: none;
	opacity: .85;
	transition: opacity .2s ease;
}
.customer-logo:hover img { opacity: 1; }
.customer-logo.tall img { height: 50px; }
.cl-dark { display: none; }
[data-theme="dark"] .cl-light, .biosu-scope[data-theme="dark"] .cl-light { display: none; }
[data-theme="dark"] .cl-dark, .biosu-scope[data-theme="dark"] .cl-dark { display: inline; }

/* =========================================================
   Trust-Band: Kunden + Systeme als ein fließender Block
   ========================================================= */
.trust-band { padding: 10px 0 48px; }
.trust-band .customer-row { gap: 22px 58px; margin-bottom: 0; }
.trust-band .customer-logo img { height: 36px; opacity: .9; }
.trust-band .customer-logo.tall img { height: 58px; }

/* Schneider-Wortmarke exakt an die Logo-Tönung angleichen */
.trust-band .customer {
	font-size: 15px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: .02em;
	text-align: center;
	color: #3f3f46;
	opacity: .88;
}
[data-theme="dark"] .trust-band .customer, .biosu-scope[data-theme="dark"] .trust-band .customer { color: #d4d4d8; }

.trust-label-2 { margin: 40px 0 14px; }

/* Laufband: kein Kasten mehr, weiche Kanten – wirkt fließend */
.trust-band .marquee {
	background: none;
	border: none;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

/* Laufband: weiche Seitenkanten */
.marquee-section .marquee {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* Zwei Case-Studies untereinander */
.case-card + .case-card { margin-top: 24px; }

/* =========================================================
   Kachel: KI-Agenten (Poststellen-Chat)
   ========================================================= */
.agc {
	border: 1px solid var(--border);
	border-radius: var(--radius) var(--radius) 0 0;
	background: var(--bg-alt);
	padding: 14px 14px 20px;
	display: grid;
	gap: 12px;
	min-height: 360px;
	align-content: start;
}
.agc-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.agc-tabs span { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--text-faint); }
.agc-tabs .active { background: var(--bg-elev); border: 1px solid var(--border-strong); color: var(--text); }
.agc-head {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 12px;
}
.agc-ava { width: 32px; height: 32px; font-size: 12px; background: linear-gradient(135deg, #a78bfa, #6366f1); }
.agc-head strong { display: block; font-size: 13.5px; }
.agc-on { font-style: normal; font-size: 11px; color: #34d399; font-weight: 700; }
.agc-head .tagc { margin-left: auto; font-size: 10.5px; }
.agc-chat { display: grid; gap: 12px; }
.bub-sm { font-size: 12.5px; max-width: 92%; }

/* =========================================================
   Kachel: Schnittstellen (Sync-Übersicht)
   ========================================================= */
.sync {
	border: 1px solid var(--border);
	border-radius: var(--radius) var(--radius) 0 0;
	background: var(--bg-alt);
	padding: 14px 14px 18px;
	display: grid;
	gap: 12px;
	min-height: 360px;
	align-content: start;
}
.sync-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; padding-inline: 2px; }
.sync-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sync-card {
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 12px 14px;
	display: grid;
	gap: 7px;
}
.sc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-top strong { font-size: 13px; }
.sc-top .tagc { font-size: 10px; padding: 3px 9px; }
.sc-row { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--text-faint); }
.sc-row em { font-style: normal; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sc-ok { color: #34d399; font-weight: 800; }

/* Einstieg: Sync-Karten nacheinander */
.p-tile.reveal.in .sync-card { animation: mkCardIn .45s ease both; }
.p-tile.reveal.in .sync-card:nth-child(2) { animation-delay: .12s; }
.p-tile.reveal.in .sync-card:nth-child(3) { animation-delay: .24s; }
.p-tile.reveal.in .sync-card:nth-child(4) { animation-delay: .36s; }

@media (max-width: 640px) { .sync-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .p-tile.reveal.in .sync-card { animation: none; } }

/* =========================================================
   Echtes Mosaik: verzahnte Kacheln, bündige Außenkanten
   ========================================================= */
.p-grid {
	grid-template-columns: repeat(12, 1fr);
	grid-template-areas:
		"v v v v v v v a a a a a"
		"t t t t t s s s s s s s"
		"g g g g g g g x x x x x";
}
.ar-verb { grid-area: v; }
.ar-auto { grid-area: a; }
.ar-agen { grid-area: g; }
.ar-schn { grid-area: s; }
.ar-sich { grid-area: x; }
.ar-steu { grid-area: t; }

/* Kacheln füllen ihre Zelle komplett – Screens dehnen sich bis zur Unterkante */
.p-tile { display: flex; flex-direction: column; }
.p-visual { flex: 1; display: flex; flex-direction: column; }
.p-visual > * { flex: 1; }
.app, .wf, .adm, .dash, .agc, .sync { min-height: 0; height: 100%; }
.app { min-height: 340px; }

@media (max-width: 1000px) {
	.p-grid { grid-template-columns: 1fr; grid-template-areas: none; }
	.ar-verb, .ar-auto, .ar-agen, .ar-schn, .ar-sich, .ar-steu { grid-area: auto; }
	.app, .wf, .adm, .dash, .agc, .sync { height: auto; }
}


/* Reihen-Höhen: Reihe 2 medium, Reihe 3 hoch */
.ar-schn .sync, .ar-steu .dash { min-height: 320px; }
.ar-agen .agc, .ar-sich .adm { min-height: 460px; }

/* Steuern in der schmalen Spalte: kompaktere KPIs, Budgets unter dem Chart */
.ar-steu .kpi strong { font-size: 19px; }
.ar-steu .kpi em { font-size: 9.5px; }
.ar-steu .dash-body { grid-template-columns: 1fr; }
.ar-steu .dash-chart .mk-bars { height: 84px; }

/* Agenten-Kachel breit: Chat darf atmen */
.ar-agen .bub-sm { max-width: 70%; }
.ar-agen .bub-body { max-width: 80%; }

/* Video: Ton-Umschalter */
.video-frame { position: relative; }
.vf-sound {
	position: absolute;
	right: 14px; bottom: 14px;
	z-index: 3;
	width: 42px; height: 42px;
	display: grid; place-items: center;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.35);
	background: rgba(10,10,16,.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #fff;
	cursor: pointer;
	transition: background .2s ease, transform .15s ease;
}
.vf-sound:hover { background: rgba(10,10,16,.75); transform: scale(1.06); }
.vf-sound svg { width: 20px; height: 20px; }

/* Mobile: gewünschte Reihenfolge beibehalten */
@media (max-width: 1000px) {
	.ar-verb { order: 1; } .ar-auto { order: 2; } .ar-steu { order: 3; }
	.ar-schn { order: 4; } .ar-agen { order: 5; } .ar-sich { order: 6; }
	.ar-agen .agc, .ar-sich .adm { min-height: 0; }
	.ar-steu .dash-body { grid-template-columns: 1fr; }
}

/* =========================================================
   KI-Agenten: Avatar-Foto + rechte Einstellungs-Spalte
   ========================================================= */
.agc { grid-template-columns: 1fr 158px; gap: 12px; align-content: stretch; }
.agc-main { display: grid; gap: 12px; align-content: start; min-width: 0; }

img.agc-photo {
	width: 36px; height: 36px;
	max-width: none;
	border-radius: 999px;
	object-fit: cover;
	border: 2px solid var(--bg-elev);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
	flex: 0 0 auto;
}
img.agc-photo-sm { width: 26px; height: 26px; margin-top: 2px; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 40%, transparent); }

.agc-side { display: grid; gap: 10px; align-content: start; }
.ags-box, .ags-stat {
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 11px 12px;
}
.ags-t { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 800; color: var(--text-faint); margin-bottom: 7px; }
.ags-status { font-size: 12px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.ags-dot { width: 8px; height: 8px; border-radius: 999px; background: #34d399; box-shadow: 0 0 8px #34d39988; }
.ags-select {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 5px 10px;
	border-radius: 8px;
	border: 1px solid var(--border-strong);
	background: var(--bg-alt);
	font-size: 11.5px; font-weight: 700;
	white-space: nowrap;
}
.ags-select b { font-weight: 400; font-size: 9px; color: var(--text-faint); }
.ags-time { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); flex-wrap: wrap; }
.ags-stat { display: grid; gap: 1px; }
.ags-stat em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--text-faint); }
.ags-stat strong {
	font-size: 24px; font-weight: 800;
	background: var(--accent-grad);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	font-variant-numeric: tabular-nums;
}

/* Einstieg: Seitenspalte gleitet nach */
.p-tile.reveal.in .ags-box, .p-tile.reveal.in .ags-stat { animation: mkCardIn .45s ease both; }
.p-tile.reveal.in .agc-side > *:nth-child(2) { animation-delay: .1s; }
.p-tile.reveal.in .agc-side > *:nth-child(3) { animation-delay: .2s; }
.p-tile.reveal.in .agc-side > *:nth-child(4) { animation-delay: .3s; }
.p-tile.reveal.in .agc-side > *:nth-child(5) { animation-delay: .4s; }

@media (max-width: 640px) {
	.agc { grid-template-columns: 1fr; }
	.agc-side { grid-template-columns: 1fr 1fr; }
	.agc-side .ags-box { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
	.p-tile.reveal.in .ags-box, .p-tile.reveal.in .ags-stat { animation: none; }
}

/* Steuern-Kachel: Balken füllen die Chart-Fläche proportional */
.dash { grid-template-rows: auto 1fr; }
.dash-body { align-items: stretch; }
.dash-chart { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.dash-chart .mk-bars { flex: 1; height: auto; min-height: 110px; align-items: flex-end; }
.ar-steu .dash-chart .mk-bars { height: auto; min-height: 130px; }

/* Steuern (schmale Spalte): kompakte KPI-Zeilen statt großer Kästen */
.ar-steu .dash-kpis { grid-template-columns: 1fr; gap: 8px; }
.ar-steu .kpi {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: 10px;
	row-gap: 2px;
	padding: 10px 14px;
}
.ar-steu .kpi em { font-size: 10px; margin: 0; }
.ar-steu .kpi strong { font-size: 20px; }
.ar-steu .kpi .mk-trend,
.ar-steu .kpi .tagc,
.ar-steu .kpi .kpi-sub { grid-column: 1 / -1; justify-self: end; font-size: 10px; padding-block: 2px; }

/* Checkbox-Größe im Scope absichern */
i.pmf-check { width: 16px; height: 16px; }

/* Potenzial-Karten: neue Visuals */
.pot-word { font-size: 27px; line-height: 1.15; }
.pv-shield {
	width: 54px; height: 54px;
	display: grid; place-items: center;
	border-radius: 16px;
	background: color-mix(in srgb, var(--accent) 13%, transparent);
	color: var(--accent);
}
.pv-shield svg { width: 30px; height: 30px; }
.pv-rw { display: inline-flex; align-items: center; gap: 9px; }
.pv-rw b {
	font-size: 21px; font-weight: 800;
	background: var(--accent-grad);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.pv-stay { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pv-stay .pill { display: inline-flex; align-items: center; gap: 6px; }
.pv-stay svg { flex: 0 0 auto; color: var(--accent); }
.pv-stay em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--text-faint); }

/* Potenzial als 4er-Reihe: kompaktere Maße */
.grid-4 .potential-card .pot-num { font-size: 32px; }
.grid-4 .potential-card .pot-word { font-size: 22px; }
.grid-4 .potential-card h3 { font-size: 16px; }
.grid-4 .potential-card p { font-size: 13.5px; }
.grid-4 .potential-card .pv { min-height: 54px; display: flex; align-items: center; }
.grid-4 .pv-rw .pill { font-size: 11.5px; padding: 5px 10px; }
.grid-4 .pv-stay .pill { font-size: 11.5px; padding: 5px 10px; }

/* Potenzial-Karten: einheitliche Zeilenhöhen – Visual, Zahl, Titel, Text beginnen auf gleicher Höhe */
.grid-4 .potential-card { grid-template-rows: 58px 46px 46px auto; gap: 8px; }
.grid-4 .potential-card .pv { min-height: 0; align-self: center; }
.grid-4 .potential-card .pot-num { display: flex; align-items: flex-end; margin: 0; }
.grid-4 .potential-card h3 { display: flex; align-items: flex-start; margin: 0; line-height: 1.3; }

/* Potenzial 4er-Reihe: exakt ausgerichtetes Raster */
.grid-4 .potential-card { grid-template-rows: 58px 46px 50px auto; gap: 8px; align-content: start; }
.grid-4 .potential-card .pv { display: flex; align-items: center; min-height: 0; }
.grid-4 .potential-card .pot-num { display: flex; align-items: flex-end; font-size: 34px; line-height: 1; }
.grid-4 .potential-card .pot-word { font-size: 25px; line-height: 1.1; padding-bottom: 2px; }
.grid-4 .potential-card h3 { display: flex; align-items: flex-start; font-size: 16px; line-height: 1.3; }
.grid-4 .pvb em { font-size: 10px; line-height: 1.25; white-space: nowrap; }
.grid-4 .pv-bars { gap: 14px; }
.grid-4 .pvb { min-width: 0; }
.grid-4 .pvb i.long { width: 100%; }
.grid-4 .pvb i.short { width: 24%; }

@media (max-width: 900px) {
	.grid-4 .potential-card { grid-template-rows: auto auto auto auto; }
}

/* Schild-Icon exakt mittig in seinem Quadrat (Flex-Kontext der 4er-Reihe) */
.grid-4 .potential-card .pv-shield { justify-content: center; }
.pv-shield { justify-content: center; }

/* =========================================================
   Case Studies: Zickzack-Karten mit Produkt-Visual
   ========================================================= */
.case2 {
	display: grid;
	grid-template-columns: 1.12fr .88fr;
	gap: 40px;
	align-items: center;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) + 6px);
	padding: 36px;
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.case2:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.case2 + .case2 { margin-top: 26px; }
.case2.cs-rev .cs-content { order: 2; }
.case2.cs-rev .cs-visual { order: 1; }

.cs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.case2 h3 { font-size: 25px; margin-bottom: 10px; letter-spacing: -0.01em; }
.cs-text { color: var(--text-muted); font-size: 15px; margin-bottom: 14px; }
.cs-quote {
	margin: 0 0 14px;
	padding: 4px 0 4px 16px;
	border-left: 3px solid var(--accent);
	font-size: 14.5px;
	font-style: italic;
	color: var(--text-muted);
}
.case2 .case-person { margin-bottom: 4px; }

.cs-stats { display: flex; margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--border); }
.cs-stats > div { flex: 1; min-width: 0; padding-right: 16px; }
.cs-stats > div + div { border-left: 1px solid var(--border); padding-left: 16px; }
.cs-stats span {
	display: block;
	font-size: 23px; font-weight: 800; line-height: 1.1;
	background: var(--accent-grad);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	font-variant-numeric: tabular-nums;
	margin-bottom: 3px;
}
.cs-stats em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--text-faint); line-height: 1.35; display: block; }
.case2 .feature-link { margin-top: 16px; display: inline-block; }

/* Visual-Seite */
.cs-visual { position: relative; }
.cs-visual .pm-tilt { top: -16px; right: -4px; }
.cs-panel {
	background: var(--bg-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 16px;
	display: grid;
	gap: 10px;
}
.of-row {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 11px 13px;
	font-size: 12.5px; font-weight: 600;
}
.of-row em { font-style: normal; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.of-btn {
	background: var(--accent-grad);
	color: #fff;
	text-align: center;
	border-radius: 10px;
	padding: 10px;
	font-size: 12.5px; font-weight: 700;
	box-shadow: 0 6px 16px rgba(79,70,229,.3);
}
.of-flow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.of-flow b { font-weight: 400; color: var(--text-faint); font-size: 12px; }
.of-flow .pill { font-size: 11px; padding: 4px 11px; }

/* Dark: Karte + Panel klar gestaffelt mit Glow (wie Mosaik) */
[data-theme="dark"] .case2, .biosu-scope[data-theme="dark"] .case2, .biosu-scope[data-theme="dark"] .case2 {
	background: #12121c;
	border-color: rgba(255,255,255,.15);
	--bg-alt: #1c1c2a;
	--bg-elev: #282838;
	--border: rgba(255,255,255,.14);
	--border-strong: rgba(255,255,255,.24);
}
[data-theme="dark"] .cs-visual::before, .biosu-scope[data-theme="dark"] .cs-visual::before, .biosu-scope[data-theme="dark"] .cs-visual::before {
	content: "";
	position: absolute;
	inset: -8% -10% -12%;
	background: radial-gradient(55% 55% at 50% 60%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
	filter: blur(30px);
	pointer-events: none;
	z-index: 0;
}
[data-theme="dark"] .cs-panel, .biosu-scope[data-theme="dark"] .cs-panel, .biosu-scope[data-theme="dark"] .cs-panel {
	position: relative;
	z-index: 1;
	border-color: rgba(255,255,255,.24);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
		0 -8px 40px color-mix(in srgb, var(--accent) 14%, transparent),
		0 24px 60px rgba(0,0,0,.5);
}
[data-theme="dark"] .cs-visual .pm-tilt, .biosu-scope[data-theme="dark"] .cs-visual .pm-tilt, .biosu-scope[data-theme="dark"] .cs-visual .pm-tilt { z-index: 2; }

/* Einstieg */
.case2.reveal.in .cs-panel > * { animation: mkCardIn .45s ease both; }
.case2.reveal.in .cs-panel > *:nth-child(2) { animation-delay: .1s; }
.case2.reveal.in .cs-panel > *:nth-child(3) { animation-delay: .2s; }
.case2.reveal.in .cs-panel > *:nth-child(4) { animation-delay: .3s; }
.case2.reveal.in .cs-panel > *:nth-child(5) { animation-delay: .4s; }

@media (max-width: 900px) {
	.case2 { grid-template-columns: 1fr; gap: 26px; padding: 24px 20px; }
	.case2.cs-rev .cs-content { order: 1; }
	.case2.cs-rev .cs-visual { order: 2; }
	.cs-stats { flex-wrap: wrap; gap: 12px 0; }
	.cs-stats > div { flex: 1 1 45%; }
	.cs-stats > div:nth-child(3) { border-left: none; padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.case2.reveal.in .cs-panel > * { animation: none; }
	.case2:hover { transform: none; }
}


/* Theme-Integration: Absicherung */
.biosu-scope { background: var(--bg); color: var(--text); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.biosu-scope h1, .biosu-scope h2, .biosu-scope h3 { font-family: var(--font-sans); color: inherit; }
.biosu-scope button { font-family: var(--font-sans); }
.biosu-scope section { margin: 0; }
.mobile-nav .nav-list { display: grid; gap: 4px; margin-bottom: 16px; }
.mobile-nav .nav-list a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-muted); }

/* Bild-/Element-Regeln im Scope explizit bestätigen (höchste Priorität) */
.biosu-scope img.mc-logo { width: 22px; height: 22px; max-width: none; }
.biosu-scope .mc-menu img.mc-logo { width: 24px; height: 24px; }
.biosu-scope img.am-logo { width: 19px; height: 19px; max-width: none; }
.biosu-scope img.agent-img { display: none; }
.biosu-scope img.agent-img.is-active { display: block; }
.biosu-scope img.agc-photo { width: 36px; height: 36px; max-width: none; }
.biosu-scope img.agc-photo-sm { width: 26px; height: 26px; }
.biosu-scope i.pmf-check { width: 16px; height: 16px; }
.biosu-scope .pv-shield { justify-content: center; }