/* ==========================================================================
   Suvales Starter — design system v2.1
   ==========================================================================
   Design language: Framer.com-inspired — dark-only, high contrast,
   atmospheric glows, glass surfaces, pill buttons, bento grids, canvas
   preview windows. Palette: black / dark blue / medium blue / gray / white.

   ── How to re-brand ────────────────────────────────────────────────────────
   1. Fonts:      change the Google Fonts URL in functions.php and the
                  --font-* tokens here.
   2. Colors:     edit the palette block in :root. Blue accents are
                  --color-primary (medium blue) and --color-deep (dark blue).
   3. Radii/shadows/motion: --radius-*, --shadow-*, --dur-*, --ease-*.

   ── Tokens explained ───────────────────────────────────────────────────────
   --color-bg            page background (near-black, blue tint)
   --color-surface       cards / panels (dark charcoal)
   --color-surface-2     alternate section background
   --color-surface-hover card hover background
   --color-primary       medium blue — links, chips, focus, accents
   --color-primary-soft  tinted blue background (icon chips, eyebrows)
   --color-deep          dark blue — deep glows, gradients
   --color-accent        sky blue — gradient partners, stars
   --color-text / -muted / -faint   white → gray text hierarchy
   --color-border / -strong         hairlines (white with low alpha)
   ========================================================================== */

:root {
	/* Palette — neutral black/white base, one dark-blue accent. */
	--color-bg: #050506;
	--color-surface: #0b0b0e;
	--color-surface-2: #08080a;
	--color-surface-hover: #141417;

	--color-primary: #2e6ae8;
	--color-primary-hover: #4b86f5;
	--color-primary-soft: rgba(46, 106, 232, 0.14);
	--color-primary-soft-text: #9db8ff;
	--color-on-primary: #ffffff;
	--color-on-strong: #050506;
	--color-accent: #7c9cff;
	--color-deep: #1e3a8a;

	/* Floating surfaces — header pill, chips, mobile nav panel. The rest
	   pill is deliberately glassy so the hero glow behind it shows through
	   and reads as a light centered on the header bar. */
	--color-pill: rgba(11, 11, 14, 0.45);
	--color-pill-strong: rgba(7, 7, 8, 0.88);
	--color-panel: rgba(9, 9, 10, 0.92);

	/* Glass system — ein System statt Einzelwerte: Standard-Glass für
	   Panels, Karten, Pill, Fenster und Chips; Strong-Glass nur für
	   Overlays (mobiles Menü). Deckkraft kommt aus den --color-pill/-
	   panel-Tokens, Blur + Sättigung aus diesen beiden Skalenwerten. */
	--glass-blur: 12px;
	--glass-blur-strong: 24px;
	--glass-saturate: 1.3;

	--color-dark: #070708;
	--color-dark-2: #0d0d10;
	--color-white: #ffffff;

	/* Text hierarchy — white → neutral gray. */
	--color-text: #f8fafc;
	--color-text-muted: #9aa2ad;
	--color-text-faint: #6e7681;
	--color-border: rgba(148, 155, 166, 0.14);
	--color-border-strong: rgba(148, 155, 166, 0.26);

	/* Hairlines & tints — white alpha scale for borders and hover fills. */
	--hairline-faint: rgba(255, 255, 255, 0.04);
	--hairline: rgba(255, 255, 255, 0.06);
	--hairline-strong: rgba(255, 255, 255, 0.16);
	--tint-hover: rgba(255, 255, 255, 0.08);

	/* Blue glows — repeated halo colors for avatars, rings, focus. */
	--glow-primary: rgba(46, 106, 232, 0.4);
	--glow-primary-strong: rgba(46, 106, 232, 0.5);

	/* Feedback. */
	--color-success: #34d399;
	--color-success-bg: rgba(16, 185, 129, 0.12);
	--color-success-border: rgba(52, 211, 153, 0.4);
	--color-error: #f87171;
	--color-error-bg: rgba(239, 68, 68, 0.12);
	--color-error-border: rgba(248, 113, 113, 0.4);
	--color-warning: #fbbf24;
	--color-warning-bg: rgba(245, 158, 11, 0.12);
	--color-warning-border: rgba(251, 191, 36, 0.4);

	/* Focus ring. */
	--focus-ring: 0 0 0 4px rgba(96, 165, 250, 0.4);

	/* Typography — Sora (display) + Manrope (body) + JetBrains Mono. */
	--font-display: "Sora", "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

	/* Fluid type scale — one step down across the board. --text-5xl is the
	   h1 display tier (hero/page heroes consume it); --text-4xl stays the
	   tier for large statements (quote, sub-hero displays). */
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-md: 1.0625rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
	--text-3xl: clamp(1.625rem, 1.25rem + 1.6vw, 2.375rem);
	--text-4xl: clamp(2.25rem, 5.5vw, 4.25rem);
	/* One step above --text-4xl: min +0.5rem, fluid +1vw, max +1rem. */
	--text-5xl: clamp(2.75rem, 6.5vw, 5.25rem);

	/* Leading & tracking. */
	--leading-none: 1.05;
	--leading-tight: 1.15;
	--leading-snug: 1.35;
	--leading-normal: 1.65;
	--leading-relaxed: 1.7;
	--tracking-tight: -0.03em;
	--tracking-wide: 0.08em;

	/* Spacing scale — 4px grid; the rhythm tokens below are the actual
	   values used by components (gaps, section rhythm). */
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;

	/* Radii. */
	--radius-sm: 10px;
	--radius-md: 14px;
	--radius-lg: 20px;
	--radius-full: 999px;

	/* Shadows — multi-layered, deep. */
	--shadow-sm: 0 4px 16px -8px rgba(0, 0, 0, 0.5);
	--shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.65);
	--shadow-lg: 0 20px 40px -15px rgba(0, 0, 0, 0.7);
	--shadow-xl: 0 40px 80px -24px rgba(0, 0, 0, 0.8);
	--shadow-primary: 0 0 0 1px rgba(59, 130, 246, 0.4), 0 16px 48px -12px rgba(37, 99, 235, 0.45);

	/* Motion. */
	--dur-fast: 0.15s;
	--dur-base: 0.25s;
	--dur-slow: 0.6s;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Layout — 1280px standard, 1440px edge-to-edge, safe areas. */
	--content-width: 1280px;
	--content-width-wide: 1440px;
	--content-width-narrow: 720px;
	--container-pad: clamp(20px, 4vw, 48px);
	--section-pad: clamp(6rem, 12vw, 10rem);
	--section-pad-sm: clamp(3.5rem, 8vw, 5.5rem);
	/* Pill height (58px) + sticky offset (12px): the hero backdrop is
	   pulled up by exactly this so no strip ever shows above the pill. */
	--header-h: 70px;

	/* Z-index scale. */
	--z-content: 10;
	--z-header: 50;
	--z-overlay: 60;
	--z-modal: 70;

	/* Runtime-driven values (fed by main.js). Defaults keep no-JS and
	   reduced-motion identical to a static page. */
	--par-y-1: 0px; /* hero copy      */
	--par-y-3: 0px; /* hero window    */
	--par-y-4: 0px; /* float chips    */
	--win-tilt: 0deg;   /* hero window fly-away tilt (JS)  */
	--win-yaw: 0deg;    /* hero window fly-away yaw (JS)   */
	--win-roll: 0deg;   /* hero window fly-away roll (JS)  */
	--win-scale: 1;     /* hero window fly-away growth    */
	--win-blur: 0px;    /* hero scene defocus near edge   */
	/* Whole mock window at 92% — a touch of the hero light shows through
	   the glass. One user-level knob for the window's presence. */
	--hero-window-opacity: 0.8;

	/* Film grain — one monochrome character (desaturated feTurbulence,
	   stitched tile) reused by every glass/card surface. Strength steps
	   keep the texture consistent while letting size set the feel. */
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
	--grain-s: 0.025;   /* pill, cards           */
	--grain-m: 0.035;   /* hero product window   */
	--spot-x: 50%;  /* cursor light   */
	--spot-y: 30%;

	/* Native form controls & scrollbars render dark. */
	color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 20px);
	-webkit-text-size-adjust: 100%;
}

html {
	/* The root scroll container gets the same clip as body, so reveal
	   transforms or glows can never create a horizontal scroll on the
	   viewport — even in their pre-reveal, out-of-view state. */
	overflow-x: hidden;
	overflow-x: clip;
}
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* Variable fonts only — never synthesize faux weights. */
	font-synthesis: none;
	/* Fallback for browsers without clip support, then the modern value.
	   Prevents any horizontal scroll from reveal transforms or glows. */
	overflow-x: hidden;
	overflow-x: clip;
	-webkit-tap-highlight-color: transparent;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--dur-fast) ease;
}
a:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

h1, h2, h3, h4, h5 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	margin: 0 0 0.5em;
	color: var(--color-text);
	text-wrap: balance;
}

strong {
	font-weight: 600;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: 1.1rem; font-weight: 600; }
h4 { font-size: var(--text-base); font-weight: 600; }

/* Sektionsüberschriften (2.14.0): h2 wechselt von Sora auf Manrope
   500 — die klare, ruhige Absage der Sektionstitel auf allen Seiten.
   H1 bleibt Sora (Hero/Seitentitel), h3+ bleiben Sora (kleine
   Überschriften, Footer-Widgets, Karten). */
h2 {
	font-family: var(--font-body);
	font-weight: 500;
}

p {
	margin: 0 0 1em;
}

ul, ol {
	padding-left: 1.25em;
}

::selection {
	background: rgba(59, 130, 246, 0.35);
	color: var(--color-white);
}

:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* Slim, quiet scrollbars (WebKit/Blink). */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background: rgba(148, 163, 184, 0.22);
	border-radius: var(--radius-full);
	border: 2px solid var(--color-bg);
}
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.4); }

/* ── Film grain ────────────────────────────────────────────────────────────
   Subtle noise over the whole page — the texture that separates premium
   dark sites from flat ones. Static, pointer-transparent, invisible at
   normal reading distance. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 100;
	pointer-events: none;
	opacity: 0.025;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Layout ───────────────────────────────────────────────────────────── */

.container {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}
.container-narrow {
	max-width: var(--content-width-narrow);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}
.container-wide {
	max-width: var(--content-width-wide);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}

.section {
	padding: var(--section-pad) 0;
}
.section-alt {
	background: var(--color-surface-2);
	border-top: 1px solid var(--hairline-faint);
	border-bottom: 1px solid var(--hairline-faint);
}
.section-tight {
	padding: var(--section-pad-sm) 0;
}

/* Anchored sections clear the sticky header. */
[id] {
	scroll-margin-top: calc(var(--header-h) + 20px);
}

/* ── Utilities ─────────────────────────────────────────────────────────── */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	padding: 12px 18px;
	z-index: var(--z-modal);
	border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
	left: 0;
	color: var(--color-text);
	text-decoration: none;
}

/* Brand gradient (blue → sky) for small text moments. */
.text-gradient {
	background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Hero-style white → silver gradient for big display headlines. */
.title-gradient {
	background: linear-gradient(180deg, #ffffff 0%, #aebad1 60%, #64748b 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.icon {
	width: 22px;
	height: 22px;
	display: inline-block;
	flex: none;
	vertical-align: middle;
}

/* ── Buttons (pill) ────────────────────────────────────────────────────── */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 13px 26px;
	border: 1px solid transparent;
	border-radius: var(--radius-full);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	cursor: pointer;
	text-decoration: none;
	position: relative;
	transition:
		background var(--dur-base) ease,
		color var(--dur-base) ease,
		border-color var(--dur-base) ease,
		transform var(--dur-fast) ease,
		box-shadow var(--dur-base) var(--ease-out),
		font-weight var(--dur-base) ease;
}
	.btn:hover {
		text-decoration: none;
		/* 2.15.0: kein Magnetic-Drift, kein font-weight-Wechsel mehr —
		   ruhiger Lift + Farbe/Schatten statt Spielerei. */
		transform: translateY(-1px);
	}
	.btn:active {
		transform: translateY(0) scale(0.98);
	}
.btn .icon {
	width: 18px;
	height: 18px;
}

/* Primary — white on dark (Framer style). */
.btn-primary {
	background: var(--color-white);
	color: var(--color-on-strong);
}
.btn-primary:hover {
	background: #e2e8f0;
	color: var(--color-on-strong);
	box-shadow: var(--shadow-lg), 0 0 24px rgba(46, 106, 232, 0.18);
}

/* Secondary — glassmorphism. */
.btn-secondary {
	background: var(--hairline);
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}
.btn-secondary:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.24);
	color: var(--color-white);
}

/* Ghost — plain transparent for quiet contexts. */
.btn-ghost {
	background: transparent;
	color: var(--color-white);
	border-color: var(--hairline-strong);
}
.btn-ghost:hover {
	background: var(--tint-hover);
	border-color: rgba(255, 255, 255, 0.28);
	color: var(--color-white);
}

/* Blue — solid brand action for sections that need color. */
.btn-blue {
	background: var(--color-primary);
	color: var(--color-on-primary);
}
.btn-blue:hover {
	background: var(--color-primary-hover);
	color: var(--color-on-primary);
	box-shadow: var(--shadow-primary);
}

/* Text link with an animated arrow — "read more" style actions. */
.btn-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 4px 2px;
	border: none;
	background: none;
	border-radius: 4px;
	color: var(--color-primary);
	font-weight: 600;
	cursor: pointer;
}
.btn-link:hover {
	color: var(--color-primary-hover);
	text-decoration: none;
}
.btn-link .icon {
	width: 17px;
	height: 17px;
	transition: transform var(--dur-base) var(--ease-out);
}
.btn-link:hover .icon {
	transform: translateX(4px);
}

.btn-sm {
	padding: 9px 18px;
	font-size: var(--text-sm);
}
.btn-lg {
	padding: var(--space-4) 34px;
	font-size: var(--text-md);
}
.btn-block {
	width: 100%;
}

/* ── Cursor spotlight ─────────────────────────────────────────────────────
   A single soft light follows the pointer across the whole page (fine
   pointers only). Inert by default — it only appears after the first
   pointermove (html.has-spotlight is set by main.js), so no-JS and
   touch users never see a static blob. */

@media (hover: hover) and (pointer: fine) {
	body::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 90;
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.6s ease;
		background: radial-gradient(620px circle at var(--spot-x, 50%) var(--spot-y, 30%), rgba(156, 190, 255, 0.06), transparent 70%);
	}
	html.has-spotlight body::before {
		opacity: 1;
	}
}

/* ── Floating pill header ─────────────────────────────────────────────── */

.site-header {
	position: sticky;
	top: 12px;
	z-index: var(--z-header);
	padding: 0 var(--container-pad);
	transition: transform var(--dur-base) var(--ease-out);
	/* Transparent: the hero/page-hero background runs underneath, so the
	   pill appears to float over one continuous backdrop. */
}
/* Hide on scroll-down, reveal on scroll-up (main.js toggles .header-hidden;
   skipped while the mobile menu is open). */
.site-header.header-hidden {
	transform: translateY(calc(-100% - 12px));
}

.header-pill {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	max-width: 1200px;
	margin: 0 auto;
	min-height: 58px;
	padding: 8px 14px 8px 24px;
	/* Containing block for the grain overlay (::after). */
	position: relative;
	background: var(--color-pill);
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-full);
	transition: background var(--dur-base) ease, border-color var(--dur-base) ease, box-shadow var(--dur-base) ease, min-height var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out);
}
.site-header.scrolled .header-pill {
	background: var(--color-pill-strong);
	border-color: var(--hairline-strong);
	box-shadow: var(--shadow-lg);
	/* Compact once the page is scrolled — the pill breathes. */
	min-height: 50px;
	padding-top: 6px;
	padding-bottom: 6px;
}

.site-brand {
	display: flex;
	align-items: center;
}
.site-brand-name {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--color-white);
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 500;
	letter-spacing: var(--tracking-tight);
	white-space: nowrap;
}
.site-brand-name:hover {
	text-decoration: none;
	color: var(--color-white);
}

.main-nav {
	margin: 0 auto;
}
.main-nav ul {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.main-nav a {
	display: inline-block;
	padding: var(--space-2) 14px;
	color: rgba(255, 255, 255, 0.55);
	font-weight: 400;
	font-size: var(--text-sm);
	border-radius: var(--radius-full);
	transition: color var(--dur-fast) ease, background var(--dur-fast) ease, font-weight var(--dur-base) ease;
}
.main-nav a:hover {
	color: var(--color-white);
	background: var(--hairline);
	font-weight: 500;
	text-decoration: none;
}
.main-nav .current-menu-item > a,
.main-nav a.is-active {
	color: var(--color-white);
	background: var(--tint-hover);
	font-weight: 500;
}

.header-cta {
	display: none;
}
/* 861px = 860px + 1px seam so the header CTA only ever renders on
   breakpoints where the hamburger toggle is hidden. */
@media (min-width: 861px) {
	.header-cta {
		display: inline-flex;
	}
}

/* Kundenkonto-Einstieg (2.21.0) — kompakter Sekundär-Button; auf
   kleinen Screens nur das Icon, damit er neben dem Hamburger Platz hat. */
.header-account {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: var(--radius-full);
	border: 1px solid var(--color-border-strong);
	background: transparent;
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition:
		background var(--dur-base) ease,
		border-color var(--dur-base) ease,
		color var(--dur-base) ease;
}
.header-account:hover {
	background: var(--tint-hover);
	border-color: var(--color-border-strong);
	color: var(--color-white);
	text-decoration: none;
}
.header-account .icon {
	width: 16px;
	height: 16px;
}
@media (max-width: 860px) {
	/* Icon-only Konto-Button: runder Kreis auf Mobil (42x42), Icon mittig. */
	.header-account {
		width: 42px;
		height: 42px;
		padding: 0;
		justify-content: center;
	}
	.header-account-label {
		display: none;
	}
}

/* Mobile toggle */
.nav-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 10px 8px;
	border-radius: var(--radius-full);
}
.nav-toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--color-white);
	margin: 5px 0;
	border-radius: 2px;
	transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) ease;
}
.nav-toggle.active .nav-toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.nav-toggle.active .nav-toggle-bar:nth-child(2) {
	opacity: 0;
}
.nav-toggle.active .nav-toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ── Theme-Toggle Hell/Dunkel (2.31.0) ────────────────────────────────
   Kompakter Icon-Button zwischen Konto und Hamburger. Zeigt im Dunkel-
   Modus die Sonne (Wechsel zu hell), im Hell-Modus den Mond (Wechsel zu
   dunkel). Farben laufen über die Tokens und folgen damit beiden Themes. */
.theme-toggle {
	flex: none;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: var(--radius-full);
	border: 1px solid var(--color-border-strong);
	background: transparent;
	color: var(--color-text);
	cursor: pointer;
	transition: background var(--dur-base) ease, border-color var(--dur-base) ease, color var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
}
.theme-toggle:hover {
	background: var(--tint-hover);
	border-color: var(--color-border-strong);
	color: var(--color-white);
	transform: translateY(-1px);
}
html[data-theme="light"] .theme-toggle:hover {
	color: var(--color-text);
}
.theme-toggle:active {
	transform: translateY(0);
}
.theme-toggle-icon {
	position: absolute;
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: opacity var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
}
.theme-toggle-icon-sun {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}
.theme-toggle-icon-moon {
	opacity: 0;
	transform: rotate(-90deg) scale(0.5);
}
html[data-theme="light"] .theme-toggle-icon-sun {
	opacity: 0;
	transform: rotate(90deg) scale(0.5);
}
html[data-theme="light"] .theme-toggle-icon-moon {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}
@media (max-width: 860px) {
	.theme-toggle {
		width: 40px;
		height: 40px;
	}
}

/* ── Hero (front page) ────────────────────────────────────────────────── */

.hero {
	position: relative;
	overflow: hidden;
	/* Runs the hero backdrop up underneath the floating header so the
	   pill appears to hover over the hero, not below a separate strip. */
	margin-top: calc(-1 * var(--header-h));
	padding: calc(clamp(5rem, 12vw, 8.5rem) + var(--header-h)) 0;
	text-align: center;
}
/* One directional light from above — quiet, no blobs, no grid. The
   radial is centered on the floating header pill (pill center ≈ 3% of
   the hero height) so the glow band is vertically centered with the
   header — a soft backlit halo, not a misaligned top line. */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(1000px 520px at 50% 3.02%, rgba(30, 58, 138, 0.3), transparent 65%),
		linear-gradient(180deg, transparent 55%, rgba(30, 58, 138, 0.12) 100%);
	pointer-events: none;
}
/* Light bleed along the hero's bottom edge: a soft blue haze the window
   passes through as it flies down, so the boundary reads as luminous
   light dissolving the scene instead of a hard clip line. Painted above
   the content (z 11 > content 10), below the header (50). */
.hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 34%;
	background: linear-gradient(180deg, rgba(46, 106, 232, 0) 0%, rgba(46, 106, 232, 0.09) 55%, rgba(46, 106, 232, 0.26) 100%);
	filter: blur(18px);
	pointer-events: none;
	z-index: 11;
	}

/* Hero fine grid — a hairline grid spans the whole hero, drawn by main.js
   (canvas). Calm by default: the base lines are barely there, a radial
   light around the pointer reveals them. Sits above the hero's backdrop
   light (::before), below all hero content. */
.hero-grid {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

.hero-inner {
	position: relative;
	z-index: var(--z-content);
	max-width: 920px;
	margin: 0 auto;
	/* Scroll parallax (JS feeds --par-y-1). */
	translate: 0 var(--par-y-1, 0px);
}

/* Eyebrow badge with gradient border. */
.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 16px;
	border-radius: var(--radius-full);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.85);
	background:
		linear-gradient(rgba(11, 11, 14, 0.9), rgba(11, 11, 14, 0.9)) padding-box,
		linear-gradient(90deg, rgba(46, 106, 232, 0.55), rgba(124, 156, 255, 0.35), rgba(255, 255, 255, 0.1)) border-box;
	border: 1px solid transparent;
	margin-bottom: 28px;
	transition: color var(--dur-fast) ease;
}
.hero-badge:hover {
	color: var(--color-white);
}
.hero-badge-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #34d399;
	box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
	animation: pulse-dot 2.4s var(--ease-out) infinite;
}

.hero-title {
	font-size: var(--text-5xl);
	font-weight: 400;
	line-height: var(--leading-none);
	letter-spacing: var(--tracking-tight);
	margin-bottom: 22px;
	/* Light play inside the letterforms: a looping sheen sweeps through
	   the glyphs (JS drives --sheen), and a soft radial light follows the
	   cursor (JS drives --tx/--ty). Without JS the defaults sit center. */
	background-image:
		radial-gradient(220px circle at 50% 50%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2) 40%, transparent 68%),
		linear-gradient(100deg, #57606f 12%, #dbe3ef 38%, #ffffff 50%, #dbe3ef 62%, #57606f 88%);
	background-size: 220px 220px, 220% 100%;
	background-repeat: no-repeat;
	background-position: var(--tx, 50%) var(--ty, 40%), var(--sheen, 40%) 0;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero-subtitle {
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	line-height: var(--leading-relaxed);
	color: var(--color-text-muted);
	max-width: 640px;
	margin: 0 auto 38px;
}

.hero-actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Trust row under the CTAs — short, honest conversion signals. */
.hero-trust {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 26px;
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: var(--text-xs);
	color: var(--color-text-faint);
}
.hero-trust li {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}
.hero-trust li::before {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--color-primary);
	box-shadow: 0 0 8px rgba(59, 130, 246, 0.8);
}
/* The Made-in-Germany badge shows the flag instead of the dot. */
.hero-trust li.made-in-germany::before {
	display: none;
}
.hero-trust li.made-in-germany {
	gap: 7px;
	font-weight: 600;
}

/* ── Hero product preview window ─────────────────────────────────────────
   A canvas window below the hero copy with a skeleton site mock and two
   floating glass status chips. Swap the skeletons for a real screenshot
   (<img> inside .window-body) once you have one. */

.hero-visual {
	position: relative;
	/* Wider than the hero copy so the window reads as a big product shot. */
	max-width: min(1180px, 100%);
	margin: clamp(3rem, 6vw, 5rem) auto 0;
	z-index: var(--z-content);
}
/* Whole-scene defocus (window + chips) as the fly-away nears the hero's
   bottom edge. The filter is applied via a class ONLY while the blur is
   active — an idle blur(0px) would still pin a permanent layer for this
   1180px-wide scene. JS toggles .is-defocusing. */
.hero-visual.is-defocusing {
	filter: blur(var(--win-blur, 0px));
}
/* During the fly-away the window translates over the moving hero backdrop;
   re-sampling backdrop-filter every scroll frame is the single most
   expensive effect on the page. The window is defocusing anyway at that
   point, so its glass blur is dropped while it flies (JS toggles). */
.hero-visual.is-flying .window {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
/* Soft screen light pooling under the window. */
.hero-visual::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -9%;
	width: 78%;
	height: 38%;
	transform: translateX(-50%);
	background: radial-gradient(50% 100% at 50% 100%, rgba(37, 99, 235, 0.28), transparent 72%);
	filter: blur(24px);
	z-index: -1;
	animation: glow-in 1.1s var(--ease-out) 0.5s both;
}

@keyframes glow-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
/* Hero canvas window — translucent glass so the hero light glows through.
   SEE-THROUGH KNOB: the two alphas in the gradient below (0.72 / 0.85)
   control how much of the backdrop shows — lower = more see-through.
   The border alpha (0.18) controls the frame visibility. */
.hero-visual .window {
	position: relative;
	background: linear-gradient(180deg, rgba(13, 19, 34, 0.72) 0%, rgba(8, 11, 19, 0.85) 50%);
	border-color: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
	box-shadow: var(--shadow-xl), inset 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 120px -24px rgba(37, 99, 235, 0.4);
	/* Scroll fly-away: translate (par-y-3) slides the window down, while
	   the transform tips the top edge away (rotateX), banks it (rotateY),
	   gives a hint of roll (rotateZ) and grows it — the window reads as
	   flying toward the camera before the hero clips it. JS feeds the vars. */
	transform: perspective(1100px) rotateX(var(--win-tilt, 0deg)) rotateY(var(--win-yaw, 0deg)) rotateZ(var(--win-roll, 0deg)) scale(var(--win-scale, 1));
	transform-origin: 50% 50%;
	translate: 0 var(--par-y-3, 0px);
}
.hero-visual .window-body {
	padding: 0;
}
/* Real project screenshot inside the hero canvas window (replaces the
   former skeleton mock): a wide browser-viewport shot, top-aligned. */
.hero-visual .window-body img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: top;
}

/* Idle float for the window scene — a slow, gentle bob with its own rhythm
   (chips bob at 5.5s, the window at 6.5s). Pure transform on a wrapper so
   it never collides with the scroll-driven fly-away or parallax. */
.hero-window-float {
	animation: window-float 6.5s ease-in-out infinite;
	/* Whole-scene dim — see --hero-window-opacity. */
	opacity: var(--hero-window-opacity);
}
@keyframes window-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-9px); }
}

/* On small screens the fly-away reads stronger than the content — soften
   the tilt (keep the slide + growth) so the hero stays legible. */
@media (max-width: 860px) {
	.hero-visual .window {
		transform: perspective(900px) rotateX(calc(var(--win-tilt, 0deg) * 0.55)) rotateY(calc(var(--win-yaw, 0deg) * 0.5)) rotateZ(calc(var(--win-roll, 0deg) * 0.5)) scale(var(--win-scale, 1));
	}
}

/* Skeleton site mock inside the hero window. */
.mock-navbar {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--hairline);
}
.mock-logo {
	width: 64px;
	height: 12px;
	border-radius: var(--radius-full);
	background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
	box-shadow: 0 0 16px var(--glow-primary-strong);
}
.mock-navlink {
	width: 44px;
	height: 8px;
	border-radius: var(--radius-full);
	background: var(--tint-hover);
}
.mock-navlink.cta {
	width: 68px;
	height: 22px;
	margin-left: auto;
	background: var(--hairline-strong);
}
.mock-hero-large {
	position: relative;
	display: grid;
	justify-items: center;
	gap: var(--space-3);
	padding: clamp(34px, 6vw, 64px) 24px 40px;
	text-align: center;
}
.mock-hero-large::before {
	content: "";
	position: absolute;
	inset: -40% -20%;
	background: radial-gradient(55% 60% at 50% 30%, rgba(37, 99, 235, 0.22), transparent 70%);
	pointer-events: none;
}
.mock-hero-large .mock-title {
	width: min(420px, 80%);
	height: 36px;
	background: var(--hairline-strong);
}
.mock-hero-large .mock-title.short {
	width: min(300px, 58%);
}
.mock-hero-large .mock-line {
	width: min(340px, 68%);
	height: 12px;
	background: rgba(255, 255, 255, 0.07);
}
.mock-btn {
	width: 156px;
	height: 46px;
	border-radius: var(--radius-full);
	background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
	box-shadow: 0 12px 32px -8px rgba(59, 130, 246, 0.6);
	margin-top: 10px;
}
.mock-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-3);
	padding: 0 22px 26px;
}
.mock-card {
	height: 108px;
	border-radius: var(--radius-sm);
	background: var(--hairline-faint);
	border: 1px solid var(--hairline);
}

/* Floating glass status chips over the hero preview. */
.float-chip {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 10px 16px;
	border-radius: var(--radius-full);
	background: var(--color-pill-strong);
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
	border: 1px solid var(--color-border-strong);
	box-shadow: var(--shadow-lg);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-text-muted);
	white-space: nowrap;
	/* Parallax (translate) composes with the idle float (transform). */
	translate: 0 var(--par-y-4, 0px);
	animation: chip-float 5.5s ease-in-out infinite;
}
.float-chip .icon {
	width: 14px;
	height: 14px;
}
.float-chip-a {
	top: 16%;
	left: -3%;
}
.float-chip-a .icon {
	color: #34d399;
}
.float-chip-b {
	bottom: 12%;
	left: 30%;
	animation-delay: 2.75s;
}
.float-chip-b .icon {
	/* 2.16.0: Blitz orange-gelb statt Akzent-Blau (User-Wunsch). */
	color: #fbbf24;
}
.float-chip-c {
	/* Right side, upper middle — balances chip-a (left) and chip-b (left half). */
	top: 42%;
	right: -3%;
	animation-delay: 1.4s;
}
.float-chip-c .icon {
	color: var(--color-primary-soft-text);
}

@keyframes chip-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-9px); }
}

/* Staggered entrance — CSS-only so it works without JS. Fill-mode
   "backwards" (not "both") so the hero window's scroll-driven transform
   (rotateX/scale) takes over once the entrance ends. */
.hero-inner > * {
	animation: hero-in 0.7s var(--ease-out) backwards;
}
.hero-inner > *:nth-child(2) { animation-delay: 0.1s; }
.hero-inner > *:nth-child(3) { animation-delay: 0.2s; }
.hero-inner > *:nth-child(4) { animation-delay: 0.3s; }
.hero-inner > *:nth-child(5) { animation-delay: 0.4s; }
.hero-inner > *:nth-child(6) { animation-delay: 0.5s; }

/* ── Page hero (inner pages) — unified editorial hero ────────────────────
   Same design as the Referenzen hero (ref-hero classes); the page-hero
   class only adds hero-specific details: breadcrumbs in the meta row and
   intro/points spacing below the title. */

.page-hero .breadcrumbs {
	display: inline-flex;
	justify-content: flex-start;
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.page-hero .breadcrumbs a,
.page-hero .breadcrumbs .current,
.page-hero .breadcrumbs .sep {
	color: var(--color-text-faint);
}
.page-hero .breadcrumbs a:hover {
	color: var(--color-primary-soft-text);
}
.page-hero .ref-hero-intro {
	margin-top: clamp(2rem, 4vw, 3.5rem);
	max-width: 56ch;
}
.ref-hero-points {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	list-style: none;
	padding: 0;
	margin: clamp(2rem, 4vw, 3.5rem) 0 0;
}
/* Each point is a glass card: blue check chip + title/description. The
   pill language matches the header, hover lifts the card gently. */
.ref-hero-points li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 20px;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	background: var(--color-pill);
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
	transition: border-color var(--dur-base) ease, background var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
}
.ref-hero-points li:hover {
	border-color: var(--color-border-strong);
	background: var(--color-pill-strong);
	transform: translateY(-2px);
}
.ref-hero-point-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex: none;
	border-radius: 10px;
	background: var(--color-primary-soft);
	color: var(--color-primary-soft-text);
	box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.2);
}
.ref-hero-point-icon .icon {
	width: 18px;
	height: 18px;
	margin: 0;
}
.ref-hero-point-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
}
.ref-hero-point-text strong {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 1.02rem;
	letter-spacing: var(--tracking-tight);
	color: var(--color-white);
}

/* Small screens: the points stack to a 2×2 grid instead of four tall
   cards (the auto-fit 200px minimum would otherwise collapse to one
   column and push the hero far down the page). Icon above the text keeps
   the narrow cards readable. Below 1024px two symmetric columns, never a
   lopsided 3+1 row. */
@media (max-width: 1023px) {
	.ref-hero-points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 560px) {
	.ref-hero-points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.ref-hero-points li {
		flex-direction: column;
		align-items: flex-start;
		gap: 9px;
		padding: 13px 12px;
	}
	.ref-hero-point-text {
		font-size: 0.8rem;
	}
	.ref-hero-point-text strong {
		font-size: 0.95rem;
	}
	.ref-hero-point-icon {
		width: 28px;
		height: 28px;
		border-radius: 8px;
	}
	.ref-hero-point-icon .icon {
		width: 14px;
		height: 14px;
	}
}

/* ── Breadcrumbs ──────────────────────────────────────────────────────── */

.breadcrumbs {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-2);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--color-text-faint);
	margin-bottom: 22px;
}
.breadcrumbs a {
	color: var(--color-text-muted);
}
.breadcrumbs a:hover {
	color: var(--color-white);
}
.breadcrumbs .current {
	color: var(--color-text-faint);
}
.breadcrumbs .sep {
	opacity: 0.45;
}

/* ── Section headings ─────────────────────────────────────────────────── */

.section-heading {
	text-align: center;
	max-width: 720px;
	margin: 0 auto var(--space-16);
}
.section-heading.heading-left {
	text-align: left;
	margin-left: 0;
	max-width: 600px;
	margin-bottom: var(--space-16);
}

/* Section label — quiet uppercase eyebrow, symmetric gradient rules on
   both sides (fading outward), centered under the section rhythm. No box,
   no dot. The gradient echoes the header logo mark. */
.section-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--color-primary-soft-text);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	white-space: nowrap;
	margin: 0 0 var(--space-8);
}
.section-eyebrow::before,
.section-eyebrow::after {
	content: "";
	flex: 1 1 24px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--color-primary) 60%, var(--color-accent));
}
.section-eyebrow::after {
	background: linear-gradient(90deg, var(--color-accent), var(--color-primary) 40%, transparent);
}

.section-title {
	font-size: var(--text-3xl);
	margin-bottom: var(--space-4);
}

.section-intro {
	color: var(--color-text-muted);
	max-width: 600px;
	margin: 0 auto;
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
}
.section-heading.heading-left .section-intro {
	margin-left: 0;
	max-width: 560px;
}

.section-more {
	text-align: center;
	margin-top: var(--space-8);
}

/* ── Cards (glow-border hover) ────────────────────────────────────────── */

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-8);
}

.card {
	position: relative;
	overflow: hidden;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 28px;
	box-shadow: var(--shadow-sm), inset 0 1px 0 var(--hairline);
	transition:
		transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		border-color var(--dur-base) ease,
		background var(--dur-base) ease;
}
/* Cursor-following glow (position fed by main.js as --mx/--my). */
.card::before,
.bento-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.07), transparent 65%);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}
.card:hover::before,
.bento-card:hover::before {
	opacity: 1;
}
.card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
	border-color: var(--color-border-strong);
	background: var(--color-surface-hover);
}

/* ── Film grain on glass & card surfaces ───────────────────────────────
   A static monochrome noise layer (desaturated, stitched feTurbulence)
   gives frosted surfaces materiality and masks gradient banding. One
   character for the whole theme; strength varies per container via the
   --grain-s/m steps. Painted above the surface but pointer-inert, so
   hover glow (::before) and interactivity are untouched. */
.header-pill::after,
.card::after,
.bento-card::after,
.hero-visual .window::after,
.back-to-top::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-image: var(--grain);
	background-size: 300px 300px;
	opacity: var(--grain-s);
	pointer-events: none;
	z-index: 1;
}
/* The product window is the biggest glass surface — one step stronger. */
.hero-visual .window::after {
	opacity: var(--grain-m);
}
/* Without blend support: plain low-alpha noise (darkens slightly). */
@supports not (mix-blend-mode: soft-light) {
	.header-pill::after,
	.card::after,
	.bento-card::after,
	.hero-visual .window::after,
	.back-to-top::after {
		opacity: 0.015;
	}
}
@supports (mix-blend-mode: soft-light) {
	.header-pill::after,
	.card::after,
	.bento-card::after,
	.hero-visual .window::after,
	.back-to-top::after {
		mix-blend-mode: soft-light;
	}
}

.card h3 {
	margin-top: 0;
}

.card-thumb {
	display: block;
	margin: -24px -24px 18px;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	overflow: hidden;
	position: relative;
}
.card-thumb img {
	width: 100%;
	transition: transform 0.5s var(--ease-out);
}
.card:hover .card-thumb img,
.card-thumb:hover img {
	transform: scale(1.04);
}

/* ── Canvas preview window (app/site mockup) ──────────────────────────── */

.window {
	width: 100%;
	border-radius: var(--radius-md);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 1px 0 var(--hairline);
	background: linear-gradient(180deg, var(--color-dark-2) 0%, var(--color-surface-2) 100%);
	overflow: hidden;
}

.window-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--hairline);
}

.window-dots {
	display: inline-flex;
	gap: 6px;
	flex: none;
	justify-self: start;
}
.window-dots i {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	/* macOS-Traffic-Lights — in beiden Themes dieselben Farben. */
	background: #ff5f57;
}
.window-dots i:nth-child(1) { background: #ff5f57; }
.window-dots i:nth-child(2) { background: #febc2e; }
.window-dots i:nth-child(3) { background: #28c840; }

.window-title {
	margin: 0;
	padding: 4px 14px;
	border-radius: var(--radius-full);
	background: var(--hairline);
	border: 1px solid var(--tint-hover);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	white-space: nowrap;
	justify-self: center;
}

.window-body {
	position: relative;
	padding: var(--space-5);
}

/* ── Terminal card ────────────────────────────────────────────────────── */

.terminal {
	width: 100%;
	background: rgba(0, 0, 0, 0.6);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	padding: 20px 22px;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	line-height: 2.1;
	color: var(--color-text-muted);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.terminal p {
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.terminal .t-prompt {
	color: var(--color-primary-soft-text);
}
.terminal .t-ok {
	color: var(--color-success);
}
.terminal .t-dim {
	color: var(--color-text-faint);
}

/* Terminal micro-scene (2.37.0): lines reveal sequentially, the command
   types itself. Hidden only with JS active (.js); reduced motion keeps
   the terminal fully readable. */
.js .t-line {
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.3s ease, transform 0.3s var(--ease-out);
}
.js .t-line.is-on {
	opacity: 1;
	transform: none;
}
.t-cursor {
	display: inline-block;
	width: 7px;
	height: 13px;
	margin-left: 3px;
	vertical-align: -2px;
	background: var(--color-primary-soft-text);
	opacity: 0;
}
.t-cursor.is-typing {
	opacity: 1;
	animation: t-blink 1.05s steps(1) infinite;
}
@keyframes t-blink {
	0%, 55% { opacity: 1; }
	56%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.js .t-line {
		opacity: 1;
		transform: none;
	}
	.t-cursor.is-typing {
		animation: none;
		opacity: 0;
	}
}

/* Skeleton mock (mini landing page inside a window). */
.mock-hero {
	display: grid;
	gap: var(--space-3);
	justify-items: center;
	text-align: center;
	position: relative;
}
.mock-hero::before {
	content: "";
	position: absolute;
	inset: -30% -20%;
	background: radial-gradient(60% 50% at 50% 30%, rgba(37, 99, 235, 0.28), transparent 70%);
	pointer-events: none;
}
.mock-badge,
.mock-title,
.mock-line,
.mock-btn {
	display: block;
	height: 10px;
	border-radius: var(--radius-full);
	background: var(--tint-hover);
}
.mock-badge {
	width: 96px;
	height: 22px;
	background: rgba(59, 130, 246, 0.16);
	border: 1px solid rgba(59, 130, 246, 0.3);
}
.mock-title {
	width: 260px;
	height: 26px;
	background: rgba(255, 255, 255, 0.14);
}
.mock-title.short {
	width: 180px;
}
.mock-line {
	width: 220px;
	background: var(--hairline);
}
.mock-line.short {
	width: 150px;
}
.mock-btn {
	width: 120px;
	height: 32px;
	background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
	box-shadow: 0 8px 24px -8px rgba(59, 130, 246, 0.7);
	margin-top: var(--space-2);
}

/* ── Bento grid (highlight component) ─────────────────────────────────── */

.bento-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--space-8);
}

.bento-card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg), inset 0 1px 0 var(--hairline);
	transition:
		transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		border-color var(--dur-base) ease;
}
.bento-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-xl);
	border-color: var(--color-border-strong);
}
.bento-7 { grid-column: span 7; }
.bento-5 { grid-column: span 5; }
.bento-4 { grid-column: span 4; }

.bento-media {
	flex: 1;
	padding: 20px 20px 0;
	display: flex;
	align-items: stretch;
	min-height: 220px;
}
.bento-media .window,
.bento-media .terminal {
	align-self: flex-start;
}

.bento-content {
	padding: var(--space-6);
}
.bento-content h3 {
	margin-bottom: var(--space-2);
	font-size: 1.15rem;
}
.bento-content p {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
}

.bento-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--radius-md);
	background: var(--color-primary-soft);
	color: var(--color-primary-soft-text);
	margin-bottom: 18px;
	box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.2);
}

.bento-mini-stats {
	display: grid;
	gap: 0;
}
.bento-mini-stats .mini-stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: var(--space-3) 0;
	border-bottom: 1px dashed rgba(148, 163, 184, 0.14);
}
.bento-mini-stats .mini-stat:first-child {
	padding-top: 0;
}
.bento-mini-stats .mini-stat:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.mini-stat strong {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: var(--tracking-tight);
	color: var(--color-white);
}
.mini-stat > span {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}
.mini-stat-num {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.mini-stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 9px;
	background: var(--color-primary-soft);
	color: var(--color-primary-soft-text);
	box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.2);
}
.mini-stat-icon svg {
	width: 16px;
	height: 16px;
}

/* ── Bento mock scenes: Store window (Design, das konvertiert) ────────────
   A miniature e-commerce checkout driven by main.js: a cursor enters,
   adds to cart (icon → loader), clicks "Kaufen" (button pulse + toast),
   then leaves. All transforms come from the JS tween; CSS only styles
   the states. Skipped entirely for prefers-reduced-motion. */

.mock-store-top {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 16px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--hairline);
}
.mock-store-top .mock-logo {
	width: 58px;
	height: 11px;
	border-radius: var(--radius-full);
	background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}
.mock-store-top .mock-navlink {
	width: 40px;
	height: 7px;
	border-radius: var(--radius-full);
	background: var(--tint-hover);
}

/* Store scene composition — the window body is a mini product page:
   top bar, product skeleton, checkout row (price + buy button). The
   cursor choreography in main.js moves between cart and button. */
.mock-store {
	display: flex;
	flex-direction: column;
	min-height: 210px;
}
.mock-store-main {
	display: grid;
	gap: 10px;
	margin-top: 20px;
}
.mock-store-main .mock-title {
	width: 150px;
}
.mock-store-main .mock-line {
	width: 100%;
}
.mock-store-main .mock-line.short {
	width: 62%;
}
.mock-store-checkout {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: auto;
	padding-top: 18px;
}
.mock-store-price {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 500;
	letter-spacing: var(--tracking-tight);
	color: var(--color-white);
}

/* Cart button — icon swaps to a spinner while "processing". */
.mock-cart {
	position: relative;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--radius-full);
	border: 1px solid var(--hairline-strong);
	background: var(--tint-hover);
	color: var(--color-text-muted);
	transition:
		transform var(--dur-base) var(--ease-out),
		color var(--dur-base) ease,
		border-color var(--dur-base) ease,
		box-shadow var(--dur-base) ease;
}
.mock-cart.is-hover {
	transform: scale(1.07);
	color: var(--color-text);
	border-color: rgba(59, 130, 246, 0.55);
	box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
}
.mock-cart-icon {
	width: 17px;
	height: 17px;
	transition: opacity 0.22s ease, transform 0.22s var(--ease-out);
}
.mock-cart.is-loading .mock-cart-icon {
	opacity: 0;
	transform: scale(0.4) rotate(-90deg);
}
.mock-cart-spinner {
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: var(--radius-full);
	border: 2px solid rgba(59, 130, 246, 0.25);
	border-top-color: var(--color-primary);
	opacity: 0;
	transform: scale(0.4);
	transition: opacity 0.2s ease, transform 0.2s var(--ease-out);
}
.mock-cart.is-loading .mock-cart-spinner {
	opacity: 1;
	transform: scale(1);
	animation: mock-spin 0.75s linear infinite;
}
@keyframes mock-spin {
	to { transform: scale(1) rotate(360deg); }
}
.mock-cart-badge {
	position: absolute;
	top: -3px;
	right: -3px;
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	border-radius: var(--radius-full);
	background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
	color: var(--color-on-primary);
	font-family: var(--font-body);
	font-size: 9px;
	font-weight: 700;
	line-height: 15px;
	text-align: center;
	transform: scale(0);
	transition: transform 0.35s var(--ease-spring);
}
.mock-cart.has-item .mock-cart-badge {
	transform: scale(1);
}

/* Purchase button — the confirmation lives IN the button: on click it
   morphs from the blue "Kaufen" pill into a green "Bestellt ✓" pill
   (label crossfade, soft glow — no ring, no overlay toast). */
.mock-store .mock-btn {
	display: inline-grid;
	place-items: center;
	width: 120px;
	height: 32px;
	padding: 0;
	border: 0;
	outline: none;
	appearance: none;
	background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 24px -8px rgba(59, 130, 246, 0.7);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--color-on-primary);
	cursor: default;
	transition:
		transform 0.18s var(--ease-out),
		box-shadow 0.35s ease,
		background 0.35s ease;
}
.mock-btn-label,
.mock-btn-done {
	grid-area: 1 / 1;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}
.mock-btn-label {
	transition: opacity 0.2s ease, transform 0.2s var(--ease-out);
}
.mock-btn-done {
	opacity: 0;
	transform: translateY(7px) scale(0.9);
	transition: opacity 0.2s ease 0.05s, transform 0.22s var(--ease-out) 0.05s;
}
.mock-btn-done svg {
	width: 11px;
	height: 11px;
}
.mock-store .mock-btn.is-press {
	transform: scale(0.93);
}
.mock-store .mock-btn.is-done {
	background: linear-gradient(90deg, #0ea371, #34d399);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 24px -8px rgba(16, 185, 129, 0.6);
	animation: mock-btn-success 0.65s var(--ease-out);
}
.mock-store .mock-btn.is-done .mock-btn-label {
	opacity: 0;
	transform: translateY(-7px) scale(0.9);
}
.mock-store .mock-btn.is-done .mock-btn-done {
	opacity: 1;
	transform: translateY(0) scale(1);
}
@keyframes mock-btn-success {
	0% {
		transform: scale(0.93);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 24px -8px rgba(16, 185, 129, 0.35);
	}
	55% {
		transform: scale(1.05);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 30px -6px rgba(16, 185, 129, 0.7);
	}
	100% {
		transform: scale(1);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 24px -8px rgba(16, 185, 129, 0.6);
	}
}

/* Cursor — hidden by default (no-JS / reduced-motion / before start). */
.mock-cursor {
	position: absolute;
	top: 0;
	left: 0;
	width: 18px;
	height: 18px;
	color: rgba(255, 255, 255, 0.95);
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
	opacity: 0;
	pointer-events: none;
	z-index: 2;
	will-change: transform, opacity;
}

/* ── Bento mock scenes: Insights window (Einblicke, die zählen) ──────────
   Subtle live-dashboard loop: bars breathe via CSS keyframes, the visitor
   counter counts up once and then ticks +1 every few seconds (main.js),
   and the progress bar fills on a slow loop. */

.mock-chart {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 84px;
	padding-top: 14px;
}
.mock-bar {
	flex: 1;
	height: var(--h, 50%);
	border-radius: 4px 4px 2px 2px;
	background: linear-gradient(180deg, rgba(59, 130, 246, 0.6), rgba(59, 130, 246, 0.16));
	transform-origin: bottom;
	animation: mock-bar-breathe 4.4s ease-in-out infinite;
}
.mock-bar:nth-child(2n) { animation-duration: 5.6s; animation-delay: -1.4s; }
.mock-bar:nth-child(3n) { animation-duration: 4.9s; animation-delay: -2.6s; }
@keyframes mock-bar-breathe {
	0%, 100% { transform: scaleY(0.84); opacity: 0.75; }
	50%      { transform: scaleY(1); opacity: 1; }
}
.mock-insight-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: 16px;
	/* Narrow windows (tablet): let the review line wrap instead of clipping
	   the „Empfehlungen“ label against the window edge. */
	flex-wrap: wrap;
	row-gap: 8px;
}
/* Review line — stars + value sit on the same row as the label. */
.mock-review-line {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}
.mock-review-line .mock-insight-value {
	font-size: 1.05rem;
	line-height: 1;
}
.mock-insight-label {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	letter-spacing: 0.03em;
}
.mock-insight-value {
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 500;
	letter-spacing: var(--tracking-tight);
	color: var(--color-white);
	font-variant-numeric: tabular-nums;
}
/* Star rating — the Empfehlungen value as a review widget. The five
   stars pop in left to right once the window is visible (JS toggles
   .is-live); the fifth star is clipped to 50% (--fill) for the 4,5
   rating. Skipped/static for prefers-reduced-motion. */
.mock-stars {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.mock-star {
	position: relative;
	display: inline-grid;
	width: 18px;
	height: 18px;
}
.mock-star svg {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
}
.mock-star .star-ico {
	color: var(--hairline-strong);
}
.mock-star .star-fill {
	color: var(--color-primary);
	opacity: 0;
	transform: scale(0.5) rotate(-14deg);
	clip-path: inset(0 calc(100% - var(--fill, 100%)) 0 0);
}
.mock-stars.is-live .star-fill {
	animation: mock-star-pop 0.55s var(--ease-spring) both;
	animation-delay: calc(var(--i, 0) * 0.14s);
}
@keyframes mock-star-pop {
	0%   { opacity: 0; transform: scale(0.5) rotate(-14deg); }
	60%  { opacity: 1; transform: scale(1.14) rotate(3deg); }
	100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ── Clients marquee ──────────────────────────────────────────────────── */

.clients-section {
	padding: var(--section-pad-sm) 0;
	overflow: hidden;
}

.clients-section .section-eyebrow {
	display: flex;
	justify-content: center;
}

/* "Vertraut von" as plain intro text instead of a pill. */
.clients-label {
	text-align: center;
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-faint);
	margin-bottom: 30px;
}

.clients-strip {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.clients-track {
	display: flex;
	width: max-content;
	animation: marquee 34s linear infinite;
}
.clients-track:hover {
	animation-play-state: paused;
}

.clients-group {
	display: flex;
	align-items: center;
	gap: clamp(48px, 6vw, 88px);
	padding-right: clamp(48px, 6vw, 88px);
}

.client-name {
	font-family: var(--font-display);
	font-weight: 500;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-faint);
	font-size: var(--text-sm);
	white-space: nowrap;
	opacity: 0.8;
	transition: color var(--dur-base) ease, opacity var(--dur-base) ease;
}
.client-name:hover {
	color: var(--color-white);
	opacity: 1;
}

/* ── Services ─────────────────────────────────────────────────────────── */

.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--space-8);
}

.service-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: var(--radius-md);
	background: var(--color-primary-soft);
	color: var(--color-primary-soft-text);
	margin-bottom: 18px;
	box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.18);
	transition: background var(--dur-base) ease, color var(--dur-base) ease, transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) ease;
}
.service-card:hover .service-icon {
	background: var(--color-primary);
	color: var(--color-on-primary);
	box-shadow: var(--shadow-primary);
	transform: translateY(-2px) rotate(-4deg) scale(1.04);
}
.service-card h3 {
	margin-bottom: 12px;
	font-size: 1.1rem;
}
.service-card p {
	color: var(--color-text-muted);
	margin: 0;
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
}

/* ── About / values ───────────────────────────────────────────────────── */

.about-grid {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: clamp(32px, 6vw, 72px);
	align-items: start;
}
.about-grid .section-heading {
	margin-bottom: var(--space-6);
}
.about-grid > div:first-child > p {
	color: var(--color-text-muted);
}

.value-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-4);
}

.value-item {
	/* Premium value card: number + title + description (no icon clutter). */
	display: grid;
	grid-template-columns: 44px 1fr;
	align-items: start;
	gap: 14px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 20px 22px;
	box-shadow: var(--shadow-sm), inset 0 1px 0 var(--hairline-faint);
	transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) ease, box-shadow var(--dur-base) var(--ease-out);
}
.value-item:hover {
	transform: translateX(4px);
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow-md);
}
.value-num {
	font-family: var(--font-display);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--color-text-faint);
	padding-top: 3px;
}
.value-body h4 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-md);
	letter-spacing: var(--tracking-tight);
	margin: 0 0 4px;
}
.value-body p {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
}

/* ── Split / feature highlight (asymmetric 7:5) ───────────────────────── */

.split-grid {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: clamp(36px, 6vw, 72px);
	align-items: center;
}
.split-grid .section-heading {
	margin-bottom: var(--space-6);
}

.split-text p {
	color: var(--color-text-muted);
}

.split-list {
	list-style: none;
	margin: var(--space-6) 0 var(--space-8);
	padding: 0;
	display: grid;
	gap: 16px;
}
.split-point {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-weight: 500;
}
.split-point .icon {
	width: 16px;
	height: 16px;
	color: var(--color-primary);
	margin-top: 3px;
}

.split-actions {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}

.split-media {
	position: relative;
}
.split-media .window {
	box-shadow: var(--shadow-xl), inset 0 0 0 1px rgba(0, 0, 0, 0.5);
	/* 2.16.0: gleicher passiver Bob wie das Hero-Fenster (6.5s). */
	animation: window-float 6.5s ease-in-out infinite;
}
.split-media .window-body {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	background:
		radial-gradient(60% 70% at 30% 20%, rgba(37, 99, 235, 0.25), transparent 70%),
		radial-gradient(50% 60% at 80% 90%, rgba(124, 156, 255, 0.16), transparent 70%);
}
.split-media .window-body .icon {
	width: 56px;
	height: 56px;
	color: rgba(255, 255, 255, 0.5);
}

.split-badge {
	position: absolute;
	left: -14px;
	bottom: -14px;
	z-index: var(--z-content);
	display: flex;
	align-items: center;
	gap: var(--space-3);
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	/* 2.16.0: gleicher passiver Bob wie die Hero-Chips (5.5s, Phasenversatz). */
	animation: chip-float 5.5s ease-in-out infinite;
	animation-delay: 1.4s;
	padding: 12px 18px;
	box-shadow: var(--shadow-lg);
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}
.split-badge strong {
	display: block;
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 500;
	line-height: 1.1;
	color: var(--color-white);
}
.split-badge span {
	display: block;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}
.split-badge .icon {
	width: 32px;
	height: 32px;
	color: var(--color-primary);
}

/* ── Stats band ───────────────────────────────────────────────────────── */

.stats {
	position: relative;
	overflow: hidden;
	border-top: 1px solid var(--hairline-faint);
	border-bottom: 1px solid var(--hairline-faint);
}
.stats::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(560px 300px at 50% 0%, rgba(30, 58, 138, 0.3), transparent 70%);
	pointer-events: none;
}
.stats .container {
	position: relative;
	z-index: var(--z-content);
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 40px;
	text-align: center;
}

.stat-number {
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 4vw, 3.2rem);
	font-weight: 500;
	letter-spacing: var(--tracking-tight);
	color: var(--color-white);
	line-height: var(--leading-none);
	font-variant-numeric: tabular-nums;
}

.stat-label {
	color: var(--color-text-muted);
	margin-top: 12px;
	font-size: var(--text-sm);
}

/* Hairline dividers between stats (single row only). */
@media (min-width: 1100px) {
	.stats-grid .stat + .stat {
		border-left: 1px solid var(--hairline);
	}
}

/* ── Process ──────────────────────────────────────────────────────────── */

.process-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--space-8);
}

/* Gradient connector line behind the step numbers (desktop only).
   1024px is process-specific, intentionally between the 1100 and 860
   breakpoints of the grid systems. */
@media (min-width: 1024px) {
	.process-grid::before {
		content: "";
		position: absolute;
		top: 47px;
		left: 10%;
		right: 10%;
		height: 1px;
		background: linear-gradient(90deg, transparent, rgba(46, 106, 232, 0.35) 25%, rgba(124, 156, 255, 0.35) 75%, transparent);
		pointer-events: none;
	}
	.process-grid .process-step {
		z-index: 1;
	}
}

.process-step {
	position: relative;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 30px 28px;
	box-shadow: var(--shadow-sm), inset 0 1px 0 var(--hairline-faint);
	transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) ease;
}
.process-step:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
	border-color: var(--color-border-strong);
}

.step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--radius-full);
	background: var(--color-primary-soft);
	color: var(--color-primary-soft-text);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--text-sm);
	margin-bottom: 18px;
	box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.2);
	transition: background var(--dur-base) ease, color var(--dur-base) ease, transform var(--dur-base) var(--ease-spring);
}
.process-step:hover .step-number {
	background: var(--color-primary);
	color: var(--color-on-primary);
	transform: scale(1.08) rotate(-6deg);
}

.process-step h3 {
	margin-bottom: 12px;
	font-size: 1.05rem;
}
.process-step p {
	color: var(--color-text-muted);
	margin: 0;
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
}

/* ── Portfolio (browser windows) ──────────────────────────────────────── */

.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-8);
}
/* Full-width portfolio section — the grid uses the viewport padding
   instead of the 1280px container, so the cards get real presence. */
.portfolio-section {
	padding-left: var(--container-pad);
	padding-right: var(--container-pad);
}
.portfolio-section .section-heading {
	margin-bottom: var(--space-12);
}
.portfolio-index {
	position: absolute;
	top: 20px;
	right: 22px;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--color-text-faint);
	z-index: 1;
}
@media (max-width: 1100px) {
	.portfolio-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.portfolio-grid {
		grid-template-columns: 1fr;
	}
}

.portfolio-card {
	padding: 0;
}

.portfolio-thumb {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-surface-2);
}
/* Fallback-Panel ohne Screenshot — abgerundeter Gradient (kein Fenster). */
.portfolio-mock {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 8px;
	padding: 18px;
	background:
		radial-gradient(70% 90% at 30% 0%, rgba(37, 99, 235, 0.3), transparent 70%),
		radial-gradient(60% 80% at 85% 100%, rgba(124, 156, 255, 0.16), transparent 70%),
		linear-gradient(180deg, var(--hairline-faint), transparent);
}

/* Dekorative UI-Zeilen im Fenster-Mock (2.28.0). */
.mock-line {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.04);
	font-size: 10px;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.7);
}
.mock-line i {
	width: 6px;
	height: 6px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.35);
	flex: none;
}
.mock-line--accent {
	border-color: rgba(37, 99, 235, 0.4);
	background: rgba(37, 99, 235, 0.14);
	color: #fff;
}
.mock-line--accent i {
	background: var(--color-primary);
}
.portfolio-card:nth-child(3n + 2) .mock-line--accent {
	border-color: rgba(99, 102, 241, 0.4);
	background: rgba(99, 102, 241, 0.14);
}
.portfolio-card:nth-child(3n + 2) .mock-line--accent i {
	background: #6366f1;
}
.portfolio-card:nth-child(3n + 3) .mock-line--accent {
	border-color: rgba(124, 156, 255, 0.45);
	background: rgba(124, 156, 255, 0.16);
}
.portfolio-card:nth-child(3n + 3) .mock-line--accent i {
	background: #7c9cff;
}
.portfolio-card:nth-child(3n + 2) .portfolio-mock {
	background:
		radial-gradient(70% 90% at 30% 0%, rgba(99, 102, 241, 0.3), transparent 70%),
		radial-gradient(60% 80% at 85% 100%, rgba(124, 156, 255, 0.16), transparent 70%),
		linear-gradient(180deg, var(--hairline-faint), transparent);
}
.portfolio-card:nth-child(3n + 3) .portfolio-mock {
	background:
		radial-gradient(70% 90% at 30% 0%, rgba(124, 156, 255, 0.22), transparent 70%),
		radial-gradient(60% 80% at 85% 100%, rgba(37, 99, 235, 0.2), transparent 70%),
		linear-gradient(180deg, var(--hairline-faint), transparent);
}
.portfolio-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	transition: transform var(--dur-slow) var(--ease-out);
}
.portfolio-card:hover .portfolio-thumb img {
	transform: scale(1.05);
}

.portfolio-arrow {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: var(--radius-full);
	background: var(--color-white);
	color: var(--color-on-strong);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
	z-index: var(--z-content);
}
.portfolio-card:hover .portfolio-arrow {
	opacity: 1;
	transform: translateY(0);
}
.portfolio-arrow .icon {
	width: 17px;
	height: 17px;
}

.portfolio-body {
	padding: 20px 24px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.portfolio-body h3 {
	margin: 8px 0 8px;
	font-size: 1.1rem;
}
.portfolio-body p {
	color: var(--color-text-muted);
	margin: 0;
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	flex: 1;
}

/* ── Team ─────────────────────────────────────────────────────────────── */

.team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-8);
}

.team-card {
	text-align: center;
	padding: 30px 22px;
}

.team-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
	color: var(--color-white);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 1.3rem;
	margin-bottom: 16px;
	box-shadow: 0 8px 24px -8px var(--glow-primary-strong);
	transition: transform var(--dur-base) var(--ease-spring);
}
.team-card:nth-child(2) .team-avatar {
	background: linear-gradient(135deg, var(--color-deep), var(--color-primary));
}
.team-card:nth-child(3) .team-avatar {
	background: linear-gradient(135deg, #0ea5e9, #22d3ee);
}
.team-card:nth-child(4) .team-avatar {
	background: linear-gradient(135deg, #6366f1, var(--color-primary));
}
.team-card:hover .team-avatar {
	transform: scale(1.06);
}
.team-avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.team-card h3 {
	margin-bottom: 4px;
	font-size: 1.05rem;
}

.team-role {
	color: var(--color-text-muted);
	margin: 0;
	font-size: var(--text-sm);
}

/* Solo-Gründer-Karte (2.17.0) — eine Person statt Team-Grid. */
.founder-card {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
	padding: clamp(2rem, 5vw, 3rem);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}
.founder-card .team-avatar {
	width: 88px;
	height: 88px;
	font-size: 1.6rem;
}
.founder-card h3 {
	margin: 0 0 4px;
	font-size: 1.2rem;
}
.founder-card .founder-text {
	color: var(--color-text-muted);
	max-width: 440px;
	margin: var(--space-3) auto 0;
}

/* ── Testimonials ─────────────────────────────────────────────────────── */

.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--space-8);
}

.testimonial {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.testimonial-stars {
	display: inline-flex;
	gap: 3px;
	margin-bottom: 16px;
}
.testimonial-stars .icon {
	width: 15px;
	height: 15px;
	color: var(--color-accent);
	fill: currentColor;
	filter: drop-shadow(0 0 6px rgba(124, 156, 255, 0.5));
}

.testimonial-text {
	font-style: italic;
	color: rgba(255, 255, 255, 0.88);
	margin-bottom: 18px;
	line-height: var(--leading-relaxed);
}

.testimonial-author {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--color-border);
}

.testimonial-avatar {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
	color: var(--color-white);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--text-sm);
	box-shadow: 0 4px 16px -4px var(--glow-primary-strong);
}
.testimonial:nth-child(2) .testimonial-avatar {
	background: linear-gradient(135deg, var(--color-deep), var(--color-primary));
}
.testimonial:nth-child(3) .testimonial-avatar {
	background: linear-gradient(135deg, #0ea5e9, #22d3ee);
}
.testimonial-author strong {
	display: block;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-white);
}
.testimonial-role {
	display: block;
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	margin-top: 2px;
}

/* ── Pricing ──────────────────────────────────────────────────────────── */

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	align-items: stretch;
	gap: var(--space-6);
}

.pricing-card {
	display: flex;
	flex-direction: column;
	text-align: center;
	padding: 34px 28px;
	position: relative;
	overflow: visible;
}

.pricing-card.featured {
	border: 1px solid var(--glow-primary-strong);
	box-shadow: var(--shadow-primary);
}
.pricing-card.featured:hover {
	box-shadow: 0 24px 64px -16px rgba(37, 99, 235, 0.55);
}

.featured-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-primary);
	color: var(--color-on-primary);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 5px 16px;
	border-radius: var(--radius-full);
	white-space: nowrap;
	box-shadow: var(--shadow-primary);
}

.pricing-card h3 {
	font-size: 1.1rem;
	margin-bottom: 8px;
}

.price {
	font-family: var(--font-display);
	font-size: 2.6rem;
	font-weight: 500;
	letter-spacing: var(--tracking-tight);
	line-height: var(--leading-none);
	color: var(--color-white);
	margin-bottom: 20px;
}

.price-period {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 400;
	color: var(--color-text-muted);
}

.pricing-list {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	text-align: left;
}

.pricing-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	border-bottom: 1px dashed rgba(148, 163, 184, 0.14);
}
.pricing-list li:last-child {
	border-bottom: none;
}

.pricing-check {
	flex: none;
	color: var(--color-primary);
	margin-top: 3px;
}
.pricing-check .icon {
	width: 16px;
	height: 16px;
}

.pricing-card .btn {
	margin-top: auto;
}

/* ── Blog preview + cards ─────────────────────────────────────────────── */

.post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	align-items: center;
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	margin-bottom: 18px;
}
.post-meta .icon {
	width: 14px;
	height: 14px;
	margin-right: 5px;
	vertical-align: -2px;
}
.post-meta a {
	color: inherit;
	font-weight: 500;
}

.card .post-meta {
	margin: 0 0 8px;
}
.card h3 a {
	color: var(--color-text);
	transition: color var(--dur-fast) ease;
}
.card h3 a:hover {
	color: var(--color-primary);
	text-decoration: none;
}
.card > p {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
}

/* ── Care-Paket (single pricing plan) ──────────────────────────────────── */

.care-wrap {
	max-width: 780px;
	margin: 0 auto;
}
/* Interactive grid backdrop (same effect as the hero) — the section must
   contain the absolute canvas, and the content needs to sit above it. */
.pricing {
	position: relative;
	overflow: hidden;
}
.pricing .container {
	position: relative;
	z-index: var(--z-content);
}

.care-card {
	/* Narrower than the wrap so list lines stay at a comfortable length. */
	max-width: 640px;
	margin: 0 auto;
	padding: 44px 44px 40px;
	text-align: left;
	overflow: visible;
}
.care-card h3 {
	text-align: center;
	font-size: var(--text-xl);
}
.care-price {
	text-align: center;
	margin: 8px 0 4px;
}
.care-intro {
	text-align: center;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	max-width: 480px;
	margin: 0 auto 30px;
}
.care-subtitle {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-text);
	margin: 24px 0 12px;
}
.care-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}
.care-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--color-text-muted);
}
.care-list .icon {
	width: 16px;
	height: 16px;
	margin-top: 2px;
}
.care-included li .icon {
	color: var(--color-primary);
}
.care-excluded li .icon {
	color: var(--color-text-faint);
}
.care-card .btn {
	margin-top: 28px;
	width: 100%;
}
.care-note {
	text-align: center;
	font-size: var(--text-xs);
	color: var(--color-text-faint);
	margin: 14px 0 0;
}
.care-extra {
	text-align: center;
	margin-top: 36px;
}
.care-extra p {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	margin: 0 auto 10px;
	max-width: 520px;
}

/* ── FAQ accordion ────────────────────────────────────────────────────── */

.faq-list {
	max-width: 760px;
	margin: 0 auto;
}

.faq-item {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	margin-bottom: 14px;
	overflow: hidden;
	box-shadow: var(--shadow-sm), inset 0 1px 0 var(--hairline-faint);
	transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease, background var(--dur-base) ease;
}
.faq-item:hover {
	border-color: var(--color-border-strong);
}
.faq-item.open {
	border-color: rgba(59, 130, 246, 0.45);
	background: var(--color-surface-hover);
	box-shadow: var(--shadow-md);
}

.faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	padding: 18px 22px;
	background: none;
	border: none;
	font: inherit;
	font-family: var(--font-display);
	font-size: var(--text-md);
	font-weight: 600;
	text-align: left;
	color: var(--color-text);
	cursor: pointer;
	border-radius: var(--radius-md);
	transition: color var(--dur-fast) ease;
}
.faq-question:hover {
	color: var(--color-primary-soft-text);
}

.faq-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-full);
	background: var(--color-primary-soft);
	color: var(--color-primary-soft-text);
	transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) ease;
}
.faq-icon .icon {
	width: 15px;
	height: 15px;
}
.faq-item.open .faq-icon {
	transform: rotate(45deg);
	background: var(--color-primary);
	color: var(--color-on-primary);
}

/* Smooth height animation via grid rows (display:none would jump). */
.faq-answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.faq-answer-inner {
	overflow: hidden;
}
.faq-answer p {
	padding: 0 22px 20px;
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
}
.faq-item.open .faq-answer {
	grid-template-rows: 1fr;
}

/* ── Contact ──────────────────────────────────────────────────────────── */

.contact-grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(32px, 6vw, 64px);
	align-items: start;
}

.contact-info-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-5);
}

.contact-info-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
}

.contact-info-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--radius-md);
	background: var(--color-primary-soft);
	color: var(--color-primary-soft-text);
	box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.18);
	transition: background var(--dur-base) ease, color var(--dur-base) ease, transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) ease;
}
.contact-info-item:hover .contact-info-icon {
	background: var(--color-primary);
	color: var(--color-on-primary);
	box-shadow: var(--shadow-primary);
	transform: translateY(-2px);
}

.contact-info-item h3 {
	font-size: var(--text-base);
	margin: 0 0 3px;
}
.contact-info-item p {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}
.contact-info-item a {
	font-weight: 500;
}

/* ── Forms ────────────────────────────────────────────────────────────── */

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
}

.form-group {
	margin-bottom: 16px;
}

.form-group label {
	display: block;
	font-weight: 600;
	font-size: var(--text-sm);
	margin-bottom: 7px;
	color: var(--color-text-muted);
}

.form-group input,
.form-group textarea,
.form-group select,
.search-field {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	font: inherit;
	font-size: var(--text-sm);
	background: var(--color-surface);
	color: var(--color-text);
	transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;
}
.form-group textarea {
	resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder,
.search-field::placeholder {
	color: var(--color-text-faint);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.search-field:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-soft), 0 0 24px -6px var(--glow-primary);
}

.form-note {
	font-size: var(--text-xs);
	color: var(--color-text-faint);
	margin: 0 0 18px;
}

.form-success,
.form-error,
.form-warning {
	border-radius: var(--radius-sm);
	padding: 13px 16px;
	margin: 0 0 18px;
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
}
.form-success {
	background: var(--color-success-bg);
	border: 1px solid var(--color-success-border);
	color: var(--color-success);
}
.form-error {
	background: var(--color-error-bg);
	border: 1px solid var(--color-error-border);
	color: var(--color-error);
}
.form-warning {
	background: var(--color-warning-bg);
	border: 1px solid var(--color-warning-border);
	color: var(--color-warning);
}

/* Honeypot field: invisible to humans, tempting for bots. */
.hp-field {
	position: absolute;
	left: -9999px;
	height: 0;
	overflow: hidden;
	margin: 0;
}

/* ── Newsletter (pill form) ───────────────────────────────────────────── */

.newsletter-wrap {
	max-width: 560px;
	margin: 0 auto;
}
.newsletter-form {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: 6px;
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-full);
	transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.newsletter-form:focus-within {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-soft), 0 0 24px -6px var(--glow-primary);
}
.newsletter-form .search-field {
	flex: 1;
	border: none;
	background: transparent;
	box-shadow: none;
	border-radius: var(--radius-full);
	padding: 10px 16px;
}
.newsletter-form .search-field:focus {
	box-shadow: none;
}
.newsletter-form .btn {
	flex: none;
	padding: 11px 22px;
}
.newsletter-note {
	text-align: center;
	font-size: var(--text-xs);
	color: var(--color-text-faint);
	margin: 14px 0 0;
}

/* ── Gallery (window tiles) ───────────────────────────────────────────── */

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}

.gallery-item {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid var(--color-border);
	background:
		radial-gradient(70% 90% at 30% 0%, rgba(37, 99, 235, 0.3), transparent 70%),
		linear-gradient(180deg, var(--color-dark-2), var(--color-surface-2));
	display: grid;
	place-items: center;
	box-shadow: var(--shadow-sm);
	cursor: zoom-in;
	transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) ease;
}
.gallery-item:nth-child(3n + 2) {
	background:
		radial-gradient(70% 90% at 30% 0%, rgba(99, 102, 241, 0.3), transparent 70%),
		linear-gradient(180deg, var(--color-dark-2), var(--color-surface-2));
}
.gallery-item:nth-child(3n + 3) {
	background:
		radial-gradient(70% 90% at 30% 0%, rgba(124, 156, 255, 0.22), transparent 70%),
		linear-gradient(180deg, var(--color-dark-2), var(--color-surface-2));
}
.gallery-item:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
	border-color: var(--color-border-strong);
}

.gallery-item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}
.gallery-item:hover img {
	transform: scale(1.05);
}

.gallery-item .icon {
	position: relative;
	z-index: var(--z-content);
	width: 36px;
	height: 36px;
	color: rgba(255, 255, 255, 0.55);
}

.gallery-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 32px 16px 14px;
	background: linear-gradient(transparent, rgba(2, 6, 23, 0.85));
	color: var(--color-white);
	font-size: var(--text-sm);
	font-weight: 600;
	z-index: var(--z-content);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
}
.gallery-item:hover .gallery-caption,
.gallery-item:focus-within .gallery-caption {
	opacity: 1;
	transform: translateY(0);
}

/* Zoom hint chip (slides in on hover, like the portfolio arrow). */
.gallery-zoom {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.92);
	color: var(--color-on-strong);
	box-shadow: var(--shadow-md);
	opacity: 0;
	transform: translateY(10px) scale(0.9);
	transition: opacity var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
	z-index: var(--z-content);
}
.gallery-item:hover .gallery-zoom,
.gallery-item:focus-within .gallery-zoom {
	opacity: 1;
	transform: translateY(0) scale(1);
}
.gallery-zoom .icon {
	width: 16px;
	height: 16px;
}

/* ── CTA band (big headline) ──────────────────────────────────────────── */

.cta {
	position: relative;
	overflow: hidden;
	text-align: center;
}
.cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(640px 480px at 50% 0%, rgba(30, 58, 138, 0.4), transparent 70%),
		radial-gradient(520px 400px at 15% 100%, rgba(37, 99, 235, 0.18), transparent 70%),
		radial-gradient(520px 400px at 85% 100%, rgba(30, 58, 138, 0.18), transparent 70%);
	pointer-events: none;
}

.cta-inner {
	position: relative;
	z-index: var(--z-content);
	max-width: 760px;
}
.cta h2 {
	font-size: clamp(1.875rem, 4.5vw, 3.375rem);
	line-height: var(--leading-none);
	letter-spacing: var(--tracking-tight);
	margin-bottom: 18px;
}
.cta p {
	color: var(--color-text-muted);
	margin-bottom: 30px;
	font-size: var(--text-md);
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-footer {
	border-top: 1px solid var(--hairline);
	background: var(--color-dark);
	color: var(--color-text-muted);
}

/* Giant filled wordmark — the Linear/Framer-style footer signature.
   Soft white fill, glowing blue where the pointer hovers (see
   .glow-ghost). Padding lives on the layers so the glow overlay aligns
   exactly. */
.footer-wordmark {
	margin: 0;
	text-align: center;
	font-family: var(--font-display);
	font-size: clamp(3.5rem, 13vw, 11rem);
	font-weight: 500;
	letter-spacing: -0.045em;
	line-height: 0.8;
	user-select: none;
}
.footer-wordmark .gg-base,
.footer-wordmark .gg-glow {
	padding-top: clamp(2.5rem, 6vw, 5rem);
}

/* Glow ghost — filled text that lights up where the pointer hovers
   (footer signature + Referenzen hero number). The base layer is a
   subtle white fill fading downward; the glow layer is the same text in
   the accent blue, masked to a radial that follows --mx/--my (set by JS
   on pointermove), fading in smoothly on hover. */
.glow-ghost {
	position: relative;
	display: block;
}
.glow-ghost .gg-base,
.glow-ghost .gg-glow {
	display: block;
}
.glow-ghost .gg-base {
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.08) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.glow-ghost .gg-glow {
	position: absolute;
	inset: 0;
	color: var(--color-primary);
	filter: drop-shadow(0 0 16px rgba(46, 106, 232, 0.7));
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur-base) ease;
	-webkit-mask-image: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), #000 0%, transparent 72%);
	mask-image: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), #000 0%, transparent 72%);
}
.glow-ghost:hover .gg-glow,
.glow-ghost:focus-visible .gg-glow {
	opacity: 1;
}

.footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-10);
	padding-top: clamp(3.5rem, 7vw, 5.5rem);
	padding-bottom: var(--space-12);
}

.footer-widgets .widget + .widget {
	margin-top: 32px;
}

.widget-title {
	color: var(--color-white);
	font-size: var(--text-sm);
	font-weight: 500;
	margin-bottom: 16px;
	letter-spacing: var(--tracking-tight);
}

/* Brand fallback column (used until real footer widgets are assigned). */
.widget-brand .widget-title {
	font-size: 1.35rem;
	font-weight: 500;
}
.footer-blurb {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	margin: 0 0 14px;
}
.footer-contact-line {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	font-size: var(--text-sm);
}
.footer-contact-line .icon {
	width: 15px;
	height: 15px;
	color: var(--color-primary);
}
.widget-contact li,
.widget-services li {
	color: var(--color-text-muted);
}

.footer-widgets .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer-widgets .widget li {
	margin-bottom: 9px;
	line-height: var(--leading-snug);
	font-size: var(--text-sm);
}
.footer-widgets .widget a {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	transition: color var(--dur-fast) ease, padding-left var(--dur-fast) ease;
}
.footer-widgets .widget a:hover {
	color: var(--color-white);
	padding-left: 4px;
	text-decoration: none;
}

/* Dropdown widgets (Archiv, Kategorien, …) match the dark design. */
.footer-widgets .widget select {
	width: 100%;
	max-width: 260px;
	padding: 10px 14px;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-text);
	font: inherit;
	font-size: var(--text-sm);
}
.footer-widgets .widget select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.footer-bottom {
	border-top: 1px solid var(--hairline);
	padding: var(--space-6) 0;
	font-size: var(--text-sm);
}

.footer-bottom-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px 28px;
	flex-wrap: wrap;
}
.footer-bottom p {
	margin: 0;
	color: var(--color-text-faint);
}
.footer-bottom ul.menu {
	display: flex;
	align-items: center;
	gap: var(--space-2) var(--space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer-bottom a {
	color: var(--color-text-muted);
	transition: color var(--dur-fast) ease;
}
.footer-bottom a:hover {
	color: var(--color-white);
	text-decoration: none;
}
.footer-bottom .menu .current-menu-item > a {
	color: var(--color-primary-soft-text);
}

/* Social icon row. */
.social-links {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.social-links a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: var(--radius-full);
	border: 1px solid var(--color-border-strong);
	background: var(--hairline-faint);
	color: var(--color-text-muted);
	transition: background var(--dur-base) ease, color var(--dur-base) ease, border-color var(--dur-base) ease, transform var(--dur-base) var(--ease-spring);
}
.social-links a:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
	transform: translateY(-3px);
	text-decoration: none;
}
.social-links .icon {
	width: 17px;
	height: 17px;
}

/* ── Lightbox ──────────────────────────────────────────────────────────── */

.lightbox {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(3, 5, 9, 0.92);
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-base) ease, visibility var(--dur-base) ease;
}
.lightbox.open {
	opacity: 1;
	visibility: visible;
}

.lightbox-stage {
	max-width: min(1100px, 92vw);
	width: 100%;
}
.lightbox-stage .gallery-item {
	cursor: default;
	box-shadow: var(--shadow-xl), 0 0 120px -32px rgba(37, 99, 235, 0.5);
	border-color: var(--color-border-strong);
}
.lightbox-stage .gallery-item:hover {
	transform: none;
}
.lightbox-stage .gallery-caption,
.lightbox-stage .gallery-zoom {
	display: none;
}

.lightbox-caption {
	text-align: center;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	margin: 16px 0 0;
}

.lightbox-close {
	position: absolute;
	top: 20px;
	right: 20px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-full);
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	color: var(--color-white);
	cursor: pointer;
	transition: background var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
}
.lightbox-close:hover {
	background: var(--color-primary);
	transform: rotate(90deg);
}
.lightbox-close .icon {
	width: 18px;
	height: 18px;
	transform: rotate(45deg);
}

/* ── Back to top ──────────────────────────────────────────────────────── */

.back-to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: var(--z-overlay);
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-full);
	background: var(--color-pill-strong);
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
	color: var(--color-white);
	cursor: pointer;
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--dur-base) ease, visibility var(--dur-base) ease, transform var(--dur-base) var(--ease-out), background var(--dur-base) ease, border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.back-to-top.visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.back-to-top:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	box-shadow: var(--shadow-primary);
	transform: translateY(-3px);
}
.back-to-top:active {
	transform: translateY(0);
}
/* Ring stays legible on the filled hover state. */
.back-to-top:hover .btt-progress {
	stroke: rgba(255, 255, 255, 0.9);
}
.back-to-top:hover .btt-track {
	stroke: rgba(255, 255, 255, 0.25);
}

/* ── Blog pieces (listing, single) ────────────────────────────────────── */

.page-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--text-5xl);
	line-height: 1.05;
	letter-spacing: var(--tracking-tight);
	margin-bottom: 24px;
}

.single-article .entry-content {
	max-width: var(--content-width-narrow);
}
.single-article .entry-content p {
	line-height: var(--leading-relaxed);
	color: var(--color-text-muted);
}

.post-thumbnail {
	margin: 0 0 24px;
}
.post-thumbnail img {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	width: 100%;
	border: 1px solid var(--color-border);
}

.entry-content h2 {
	margin-top: 1.6em;
}
.entry-content img {
	border-radius: var(--radius-sm);
}

.archive-desc {
	color: var(--color-text-muted);
	margin-bottom: 28px;
}

.post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 28px 0 0;
}
.post-tags a {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	background: var(--color-surface);
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	font-weight: 600;
	transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.post-tags a:hover {
	color: var(--color-primary-soft-text);
	border-color: var(--glow-primary);
	text-decoration: none;
}

.post-navigation {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 40px;
}
.post-navigation a {
	display: block;
	padding: 16px 18px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-text);
	transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) ease, box-shadow var(--dur-base) var(--ease-out);
}
.post-navigation a:hover {
	transform: translateY(-2px);
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow-md);
	text-decoration: none;
}
.post-navigation .nav-next {
	text-align: right;
}
.post-navigation .nav-label {
	display: block;
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--color-text-faint);
	margin-bottom: 3px;
}

/* ── Blog: cards, covers, listing head (2.36.0) ───────────────────────── */

.post-card {
	padding: 0;
	display: flex;
	flex-direction: column;
}
.post-card > .card-thumb {
	margin: 0;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.card-thumb img,
.card-thumb svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s var(--ease-out);
}
.card:hover .card-thumb img,
.card-thumb:hover img,
.card:hover .card-thumb svg,
.card-thumb:hover svg {
	transform: scale(1.04);
}
.post-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px 24px 24px;
}
.post-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 12px;
}
.post-cats a {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--radius-full);
	background: var(--color-primary-soft);
	color: var(--color-primary-soft-text);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.post-cats a:hover {
	background: rgba(59, 130, 246, 0.24);
	color: var(--color-text);
	text-decoration: none;
}
.post-card h3 {
	font-size: 1.2rem;
	line-height: 1.35;
	margin: 0 0 10px;
}
.post-card h3 a {
	color: var(--color-text);
}
.post-card h3 a:hover {
	color: var(--color-primary-soft-text);
}
.post-excerpt {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	margin: 0 0 18px;
}
.post-card-foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	border-top: 1px solid var(--hairline);
	padding-top: 14px;
}
.post-card-foot .post-meta {
	margin: 0;
}
.post-meta-read {
	display: inline-flex;
	align-items: center;
}

/* Blog listing head — centered, with category filter chips. */
.blog-head {
	max-width: var(--content-width-narrow);
	margin: 0 auto var(--space-10);
	text-align: center;
}
.blog-head .page-title {
	margin-bottom: 12px;
}
.blog-intro {
	margin-bottom: 22px;
}
.cat-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.cat-chips a {
	display: inline-block;
	padding: 7px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	background: var(--color-surface);
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	font-weight: 600;
	transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.cat-chips a span {
	opacity: 0.6;
	margin-left: 4px;
}
.cat-chips a:hover {
	border-color: var(--glow-primary);
	color: var(--color-text);
	transform: translateY(-1px);
	text-decoration: none;
}
.cat-chips a.is-active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-on-primary);
	box-shadow: var(--shadow-primary);
}

/* Blog listing — filter row under the hero + featured post (2.68.0). */
.blog-filter {
	margin-top: clamp(1.5rem, 4vw, 2.5rem);
	margin-bottom: var(--space-8);
}
.featured-post {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 0;
	padding: 0;
	overflow: hidden;
	margin-bottom: var(--space-8);
}
.featured-thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.featured-thumb svg,
.featured-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s var(--ease-out);
}
.featured-post:hover .featured-thumb svg,
.featured-post:hover .featured-thumb img {
	transform: scale(1.04);
}
.featured-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1.5rem, 4vw, 3rem);
}
.featured-body h2 {
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	line-height: 1.25;
	margin: 0 0 14px;
}
.featured-body h2 a {
	color: var(--color-text);
}
.featured-body h2 a:hover {
	color: var(--color-primary-soft-text);
}
.featured-body .post-excerpt {
	font-size: var(--text-base);
	margin-bottom: 22px;
}
@media (max-width: 860px) {
	.featured-post {
		grid-template-columns: 1fr;
	}
	.featured-body .post-excerpt {
		font-size: var(--text-sm);
	}
}

/* Single post — centered header, hero cover, author box, related. */
.single-article {
	max-width: var(--content-width-narrow);
	margin: 0 auto;
}
.single-head {
	text-align: center;
	margin-bottom: 26px;
}
.single-head .post-cats {
	justify-content: center;
	margin-bottom: 14px;
}
.single-head .page-title {
	margin-bottom: 14px;
}
.single-head .post-meta {
	justify-content: center;
	margin-bottom: 0;
}
.post-hero {
	margin: 0 0 30px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-md);
}
.post-hero img,
.post-hero svg {
	width: 100%;
	display: block;
}
.author-box {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-top: 34px;
	padding: 20px 22px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}
.author-avatar {
	flex: none;
}
.author-avatar img {
	border-radius: var(--radius-full);
	width: 56px;
	height: 56px;
}
.author-box h4 {
	margin: 0 0 4px;
	font-size: 1rem;
}
.author-box p {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
}
.related-posts {
	margin-top: var(--space-12);
}
.related-posts h2 {
	font-size: 1.4rem;
	margin-bottom: var(--space-6);
}

/* ── Referenzen experience (2.40.0) ──────────────────────────────────────
   Editorial catalogue: typographic hero → index table → three case
   presentations → closing statement. Motion is GSAP-driven on the
   Referenzen page (main.js); everything stays readable without JS. */

.ref-label {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-text-faint);
}

/* Hero — statement type with meta row and ghost index number.
   Boxed like the rest of the site: content lives in .container, only the
   case sections below are full-width. */
.ref-hero {
	position: relative;
	padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6.5rem);
}
.ref-hero .container {
	position: relative;
}
.ref-hero-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-4);
	padding: 14px 0;
	border-top: 1px solid var(--hairline);
	border-bottom: 1px solid var(--hairline);
}
.ref-hero-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--text-5xl);
	line-height: 1.05;
	letter-spacing: var(--tracking-tight);
	margin: clamp(2.5rem, 5vw, 4rem) 0 0;
}
.ref-hero-bottom {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--space-8);
	margin-top: clamp(2rem, 4vw, 3.5rem);
}
.ref-hero-intro {
	max-width: 44ch;
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
}
.ref-hero-scroll {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: none;
	color: var(--color-text-faint);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.ref-hero-scroll-line {
	position: relative;
	width: 1px;
	height: 56px;
	overflow: hidden;
	background: var(--hairline);
	/* Pill-shaped line with rounded caps. */
	border-radius: 999px;
}
.ref-hero-scroll-line::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-primary);
	transform: translateY(-100%);
	animation: ref-scroll-hint 2.4s var(--ease-out) infinite;
	border-radius: 999px;
}
@keyframes ref-scroll-hint {
	0% { transform: translateY(-100%); }
	55%, 100% { transform: translateY(100%); }
}
.ref-hero-ghost {
	position: absolute;
	right: 0;
	bottom: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(7rem, 20vw, 16rem);
	line-height: 0.8;
	user-select: none;
	z-index: 0;
}

/* Split-word system (GSAP animates .split-word inside hidden wraps). */
.split-word-wrap {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	/* Glyph room: the overflow mask must never cut diacritics (Ü) or
	   descenders (g). Negative margins keep the line box unchanged. */
	padding: 0.16em 0;
	margin: -0.16em 0;
}
.split-word {
	display: inline-block;
	will-change: transform;
}

/* ── Manifesto quote (Über uns) ───────────────────────────────────────── */
.quote-section {
	padding: clamp(4rem, 8vw, 6.5rem) 0;
	border-top: 1px solid var(--hairline);
}
.quote-inner {
	max-width: 920px;
	margin: 0 auto;
	text-align: center;
}
.quote-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 28px;
	border-radius: var(--radius-full);
	background: var(--color-primary-soft);
	color: var(--color-primary-soft-text);
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 500;
	line-height: 1;
}
.quote-text {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--text-4xl);
	line-height: 1.3;
	letter-spacing: var(--tracking-tight);
	color: var(--color-text);
}
.quote-source {
	margin: 30px 0 0;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-text-faint);
}

/* Index — catalogue table with cursor preview card. Boxed (.container). */
.ref-index {
	position: relative;
	padding: var(--space-12) 0;
}
.ref-index-head {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	padding-bottom: 12px;
	border-bottom: 1px solid var(--hairline);
}
.ref-index-row {
	display: grid;
	grid-template-columns: 72px 1fr 44px;
	align-items: center;
	gap: var(--space-4);
	padding: 22px 10px;
	border-bottom: 1px solid var(--hairline);
	text-decoration: none;
	transition: background var(--dur-base) ease;
}
.ref-index-row:hover {
	background: var(--tint-hover);
}
.ref-index-num {
	font-family: var(--font-display);
	color: var(--color-text-faint);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.08em;
}
.ref-index-name {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.35rem, 2.8vw, 2rem);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text);
	transition: color var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
}
.ref-index-row:hover .ref-index-name {
	color: var(--color-primary-soft-text);
	transform: translateX(6px);
}
.ref-index-arrow {
	justify-self: end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	color: var(--color-text-muted);
	transition: background var(--dur-base) ease, color var(--dur-base) ease, border-color var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
}
.ref-index-arrow .icon {
	width: 16px;
	height: 16px;
}
.ref-index-row:hover .ref-index-arrow {
	background: var(--color-white);
	color: var(--color-on-strong);
	border-color: transparent;
	transform: rotate(45deg);
}

/* Cases — shared visual/copy system with per-case variations. */
.ref-cases {
	display: grid;
	gap: 0;
	/* The scene glow (ref-case::before, inset: 0 -6%) must not inflate the
	   page layout beyond the viewport — clip it at the section edge. overflow
	   clip (not hidden) keeps the sticky featured visual working. */
	overflow-x: clip;
}
.ref-case {
	position: relative;
	padding: clamp(3.5rem, 9vw, 7.5rem) var(--container-pad);
	border-top: 1px solid var(--hairline);
	scroll-margin-top: calc(var(--header-h) + 20px);
}
/* Scene glow behind each case — one lit presentation per case. */
.ref-case::before {
	content: "";
	position: absolute;
	inset: 0 -6%;
	background:
		radial-gradient(44% 50% at 24% 22%, rgba(46, 106, 232, 0.13), transparent 72%),
		radial-gradient(38% 44% at 82% 88%, rgba(124, 156, 255, 0.08), transparent 72%);
	pointer-events: none;
}
.ref-case-head {
	display: flex;
	align-items: baseline;
	gap: var(--space-4);
	padding-bottom: 16px;
	border-bottom: 1px solid var(--hairline);
	margin-bottom: clamp(2rem, 5vw, 4rem);
}
.ref-case-num {
	font-family: var(--font-display);
	color: var(--color-text-faint);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.08em;
}
.ref-case-head-tag {
	color: var(--color-primary-soft-text);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.ref-case-head-name {
	margin-left: auto;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.2rem, 2.4vw, 1.7rem);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text);
}
.ref-case-grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: clamp(40px, 6vw, 96px);
	align-items: center;
}
.ref-case-visual,
.ref-case-copy {
	position: relative;
	z-index: 1;
}
.ref-case-intro {
	color: var(--color-text-muted);
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
	margin: 0 0 30px;
	max-width: 48ch;
}
.ref-dossier {
	display: grid;
	gap: 0;
	margin-bottom: 28px;
}
.ref-dossier-block {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 16px;
	padding: 18px 0;
	border-top: 1px solid var(--hairline);
}
.ref-dossier-block:last-child {
	border-bottom: 1px solid var(--hairline);
}
.ref-dossier-num {
	font-family: var(--font-display);
	color: var(--color-text-faint);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	padding-top: 3px;
}
.ref-dossier-body h3 {
	font-size: 1rem;
	margin: 0 0 5px;
}
.ref-dossier-body p {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
}

/* Case 01 — featured: larger grid, sticky visual on desktop. */
.ref-case--featured .ref-case-grid {
	grid-template-columns: 1.25fr 1fr;
	gap: clamp(48px, 7vw, 110px);
}
.ref-case--featured .ref-case-intro {
	font-size: var(--text-base);
}
@media (min-width: 1024px) {
	.ref-case--featured .ref-case-visual {
		position: sticky;
		top: calc(var(--header-h) + 32px);
	}
}

/* Case 02 — mirrored split. */
.ref-case--essig-elektro .ref-case-visual {
	order: 2;
}

/* Case shot — one rounded screenshot per project. No browser chrome:
   the image itself is the presentation. The border uses the same white
   alpha as every window frame, so the shot reads as one consistent
   surface. The scene glow behind each case (ref-case::before) provides
   the atmosphere. */
.case-shot {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top;
	border-radius: var(--radius-lg);
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: var(--shadow-xl), 0 24px 60px -30px rgba(0, 0, 0, 0.7);
	background: var(--color-dark-2);
}
/* Placeholder frame for cases without screenshots yet — same rounded
   shape, skeleton lines instead of the image. */
.case-shot--mock {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 8px;
	min-height: 280px;
	padding: 18px;
	background:
		radial-gradient(70% 90% at 30% 0%, rgba(37, 99, 235, 0.3), transparent 70%),
		linear-gradient(180deg, var(--hairline-faint), transparent);
}

/* Outro — closing statement with next-project ghost number. Boxed. */
.ref-outro {
	position: relative;
	padding: clamp(5rem, 12vw, 9rem) 0;
	text-align: center;
	border-top: 1px solid var(--hairline);
	overflow: hidden;
}
.ref-outro-inner {
	position: relative;
	z-index: 1;
}
.ref-outro-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--text-5xl);
	line-height: 1.06;
	letter-spacing: var(--tracking-tight);
	max-width: 18ch;
	margin: 18px auto;
}
.ref-outro-text {
	color: var(--color-text-muted);
	max-width: 46ch;
	margin: 0 auto 34px;
}

@media (max-width: 960px) {
	.ref-case-grid,
	.ref-case--featured .ref-case-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.ref-case--essig-elektro .ref-case-visual {
		order: 0;
	}
}

@media (max-width: 640px) {
	.ref-index-row {
		grid-template-columns: 52px 1fr 44px;
		padding: 18px 6px;
	}
	.ref-hero-scroll {
		display: none;
	}
	.ref-hero-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
	.ref-case-head {
		flex-wrap: wrap;
	}
	.ref-case-head-name {
		margin-left: 0;
		width: 100%;
		order: 3;
	}
	.ref-outro-title {
		max-width: 14ch;
	}
}

/* Light theme: dark covers stay dark (like the window mocks). */
[data-theme="light"] .post-card h3 a {
	color: var(--color-text);
}
[data-theme="light"] .cat-chips a {
	background: #ffffff;
}
[data-theme="light"] .author-box {
	background: #ffffff;
}
[data-theme="light"] .ref-hero-ghost .gg-base {
	background-image: linear-gradient(180deg, rgba(20, 28, 46, 0.38) 0%, rgba(20, 28, 46, 0.08) 100%);
}
[data-theme="light"] .ref-hero-points li {
	background: rgba(255, 255, 255, 0.72);
	border-color: rgba(20, 28, 46, 0.1);
}
[data-theme="light"] .ref-hero-point-text strong {
	color: var(--color-text);
}

/* Whole-card click target on portfolio cards → scrolls to the matching
   case study on the Referenzen page. */
.portfolio-card-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
}

.pagination {
	margin-top: 40px;
	text-align: center;
}
.pagination .nav-links {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
}
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	background: var(--color-surface);
	color: var(--color-text-muted);
	font-weight: 600;
	font-size: var(--text-sm);
	transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.pagination .page-numbers:hover {
	border-color: var(--color-primary);
	color: var(--color-white);
	transform: translateY(-1px);
	text-decoration: none;
}
.pagination .page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-on-primary);
	box-shadow: var(--shadow-primary);
}

/* ── Comments ─────────────────────────────────────────────────────────── */

.comments-area {
	max-width: var(--content-width-narrow);
	margin: 56px auto 0;
}

.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment {
	border-top: 1px solid var(--color-border);
	padding: 20px 0;
}
.comment .comment-body {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}
.comment-meta {
	font-size: var(--text-xs);
	color: var(--color-text-faint);
	margin-bottom: 6px;
}
.comment-meta a {
	font-weight: 600;
	color: var(--color-text);
}
.comment-meta a:hover {
	color: var(--color-primary);
}
.comment .children {
	list-style: none;
	padding-left: 24px;
	margin-top: 10px;
}

.comment-form label {
	display: block;
	font-weight: 600;
	font-size: var(--text-sm);
	margin: 14px 0 7px;
	color: var(--color-text-muted);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	font: inherit;
	font-size: var(--text-sm);
	background: var(--color-surface);
	color: var(--color-text);
	transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.comment-form .comment-notes,
.comment-form .logged-in-as {
	font-size: var(--text-xs);
	color: var(--color-text-faint);
}
.comment-form .form-submit {
	margin-top: 18px;
}

/* ── Legal / long-form pages ──────────────────────────────────────────── */

.legal-content {
	max-width: var(--content-width-narrow);
	margin: 0 auto;
}
.legal-content h2 {
	margin-top: 2em;
}
.legal-content ul,
.legal-content ol {
	padding-left: 1.4em;
}
.legal-content li {
	margin-bottom: 0.4em;
	line-height: var(--leading-relaxed);
	color: var(--color-text-muted);
}

/* ── Search ───────────────────────────────────────────────────────────── */

.search-form {
	display: flex;
	gap: 10px;
	max-width: 480px;
	margin: 0 auto 32px;
}
.search-form > label {
	flex: 1;
}
.not-found .search-form {
	margin: 28px auto 0;
}

/* ── 404 ──────────────────────────────────────────────────────────────── */

.not-found {
	position: relative;
	text-align: center;
	padding: clamp(3rem, 8vw, 5.5rem) 0;
}
.not-found::before {
	content: "";
	position: absolute;
	inset: -20% 0;
	background: radial-gradient(560px 400px at 50% 30%, rgba(30, 58, 138, 0.35), transparent 70%);
	pointer-events: none;
}
.not-found-code {
	position: relative;
	display: block;
	font-family: var(--font-display);
	font-size: clamp(5rem, 14vw, 9rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: var(--tracking-tight);
	background: linear-gradient(180deg, #ffffff 0%, #64748b 100%);
	-webkit-background-clip: text;
	background-clip: text;
}
.not-found-actions {
	position: relative;
	display: flex;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 24px;
}

/* ── Motion: scroll reveal ──────────────────────────────────────────────
   Elements opt in with [data-reveal] (values: fade-up | left | right |
   zoom). Children of [data-reveal-group] are staggered automatically by
   main.js. Everything is disabled for reduced motion and never hidden
   without JS (the .js class is set in the head). */

.js [data-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.8s var(--ease-out) var(--reveal-delay, 0s),
		transform 0.8s var(--ease-out) var(--reveal-delay, 0s);
}
.js [data-reveal="left"] { transform: translateX(-28px); }
.js [data-reveal="right"] { transform: translateX(28px); }
.js [data-reveal="zoom"] { transform: scale(0.95); }
/* "Stack" — for groups of repeated items (cards, steps, stats…): a taller
   rise with a settle-scale, cascaded per item by main.js so the group
   reads as a pile assembling bottom-up. */
.js [data-reveal="stack"] {
	transform: translateY(44px) scale(0.94);
}
.js [data-reveal].revealed {
	opacity: 1;
	transform: none;
}

/* ── 3D tilt (data-tilt) & magnetic buttons (data-magnetic) ─────────────
   Transforms are driven by main.js; the CSS only smooths them. Both are
   gated to fine pointers and skipped for reduced motion in JS. */

.js [data-tilt] {
	transition: transform 0.35s var(--ease-out);
	will-change: transform;
}
.btn[data-magnetic] {
	will-change: transform;
}

/* ── Keyframes ────────────────────────────────────────────────────────── */

@keyframes marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@keyframes hero-in {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: none; }
}

@keyframes nav-link-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

@keyframes pulse-dot {
	0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
	70% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
	100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* ── Next-gen feel ────────────────────────────────────────────────────────
   Masked title reveals, scroll-scrubbed eyebrows, the live
   window headline, progress-ring back-to-top, link underlines. Every
   effect degrades to a static page without JS / for reduced motion. */

/* Line-mask titles — overflow-masked lines slide up when the heading
   enters (JS splits .section-title into .title-mask/.title-line). */
.title-split,
.title-measure {
	text-wrap: normal;
}
.title-mask {
	display: block;
	overflow: hidden;
	padding: 0.14em 0;
	margin: -0.14em 0;
}
.title-line {
	display: block;
	transform: translateY(120%);
	transition: transform 0.8s var(--ease-out) var(--title-delay, 0s);
	will-change: transform;
}
.section-heading.in .title-line {
	transform: translateY(0);
}

/* Scroll-scrubbed eyebrow draw-in — lines grow from the center as the
   heading enters. Progressive enhancement only. */
@supports (animation-timeline: view()) {
	.section-eyebrow::before,
	.section-eyebrow::after {
		animation: eyebrow-draw 0.6s var(--ease-out) both;
		animation-timeline: view();
		animation-range: entry 0% entry 65%;
	}
}
	@keyframes eyebrow-draw {
		from { transform: scaleX(0); }
		to { transform: scaleX(1); }
	}

	/* Hero window — live headline replaces the skeleton lines. */
.hero .mock-hero-large.has-live-line .mock-title,
.hero .mock-hero-large.has-live-line .mock-line {
	display: none;
}
.hero .mock-hero-large.has-live-line {
	align-content: center;
}
.window-type-line {
	grid-column: 1 / -1;
	margin: 0;
	font-family: var(--font-body);
	font-size: clamp(1rem, 2.2vw, 1.45rem);
	font-weight: 600;
	color: var(--color-text);
	line-height: 1.5;
	min-height: 1.6em;
}

/* Back-to-top progress ring. */
.back-to-top .icon {
	position: relative;
	z-index: 1;
	width: 17px;
	height: 17px;
}
.btt-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}
.btt-track {
	stroke: rgba(255, 255, 255, 0.08);
	stroke-width: 1.5;
}
.btt-progress {
	stroke: var(--color-primary);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-dasharray: 97.4;
	stroke-dashoffset: 97.4;
	transition: stroke-dashoffset 0.1s linear, stroke var(--dur-fast) ease;
}

/* Quiet underline draw for text links. */
.footer-nav a,
.footer-contact-line a,
.entry-content a,
.breadcrumbs a {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 0% 1px;
	background-position: 0 100%;
	transition: background-size var(--dur-base) var(--ease-out), color var(--dur-fast) ease;
}
.footer-nav a:hover,
.footer-contact-line a:hover,
.entry-content a:hover,
.breadcrumbs a:hover {
	background-size: 100% 1px;
}

/* ── Responsive ─────────────────────────────────────────────────────────
   Breakpoint ladder: 1100 (grids collapse) → 1024 (process connector
   only) → 860 (nav toggle, page hero) → 640 (single columns). */

@media (max-width: 1100px) {
	.bento-7,
	.bento-5 {
		grid-column: span 12;
	}
	.bento-4 {
		grid-column: span 6;
	}
	.split-grid,
	.about-grid,
	.contact-grid {
		grid-template-columns: 1fr;
		gap: var(--space-10);
	}
	.split-media {
		max-width: 640px;
		margin: 0 auto;
		width: 100%;
	}
	.split-badge {
		left: 16px;
		bottom: 16px;
	}
	.footer-widgets {
		grid-template-columns: 1fr 1fr;
	}
	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.post-navigation {
		grid-template-columns: 1fr;
	}
	.post-navigation .nav-next {
		text-align: left;
	}
}

@media (max-width: 860px) {
	.nav-toggle {
		display: block;
	}
	.site-header {
		padding: 0 24px;
	}
	.header-pill {
		padding-left: var(--space-6);
		gap: var(--space-3);
	}
	.main-nav {
		position: absolute;
		top: calc(100% + 10px);
		/* The pill is the containing block now (grain overlay) — flush the
		   panel to the pill's edges so it hangs directly off it. */
		left: 0;
		right: 0;
		margin: 0;
		/* Frosted glass: halbtransparentes Panel mit starkem Backdrop-Blur,
		   damit die Menütexte unabhängig vom Inhalt dahinter lesbar sind. */
		background: rgba(9, 9, 10, 0.8);
		backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
		-webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		padding: 10px;
		box-shadow: var(--shadow-xl);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity var(--dur-base) ease, transform var(--dur-base) var(--ease-out), visibility var(--dur-base) ease;
	}
	html[data-theme="light"] .main-nav {
		background: rgba(250, 251, 253, 0.78);
	}
	/* Browser ohne backdrop-filter (alte Firefox/Safari): volle Deckkraft,
	   damit das Menü trotzdem immer lesbar bleibt. */
	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		.main-nav {
			background: rgba(9, 9, 10, 0.97);
		}
		html[data-theme="light"] .main-nav {
			background: rgba(250, 251, 253, 0.97);
		}
	}
	.main-nav.open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	.main-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}
	.main-nav a {
		display: block;
		padding: 13px 14px;
		font-size: var(--text-base);
		border-radius: var(--radius-sm);
	}
	.main-nav a:hover {
		background: rgba(255, 255, 255, 0.07);
	}
	/* Staggered link reveal behind the blur panel (replays on open). */
	.main-nav.open a {
		animation: nav-link-in 0.35s var(--ease-out) both;
	}
	.main-nav.open li:nth-child(1) a { animation-delay: 0.03s; }
	.main-nav.open li:nth-child(2) a { animation-delay: 0.08s; }
	.main-nav.open li:nth-child(3) a { animation-delay: 0.13s; }
	.main-nav.open li:nth-child(4) a { animation-delay: 0.18s; }
	.main-nav.open li:nth-child(5) a { animation-delay: 0.23s; }
	.main-nav.open li:nth-child(6) a { animation-delay: 0.28s; }
	.main-nav.open li:nth-child(n + 7) a { animation-delay: 0.33s; }

	.hero {
		padding: calc(4.5rem + var(--header-h)) 0;
	}
	/* Mobile: `--section-pad` (siehe unten) statt --section-pad-sm — der
	   größere Mobile-Wert greift, damit Sektionen auf kleinen Screens
	   vertikal atmen (war 2.18.0-intendiert, aber nie aktiv). */
	.section {
		padding: var(--section-pad) 0;
	}
	.page-hero {
		padding: var(--section-pad) 0;
	}
	.form-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.float-chip-a {
		left: -3%;
	}
	.float-chip-b {
		left: 30%;
	}
	.float-chip-c {
		right: -3%;
	}
}

@media (max-width: 640px) {
	.bento-4 {
		grid-column: span 12;
	}
	.bento-grid {
		gap: var(--space-4);
	}
	.pricing-grid,
	.services-grid,
	.portfolio-grid,
	.team-grid,
	.testimonials-grid {
		grid-template-columns: 1fr;
	}
	.stats-grid {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
	}
	.gallery-grid {
		grid-template-columns: 1fr;
	}
	.newsletter-form {
		border-radius: var(--radius-lg);
		flex-direction: column;
		align-items: stretch;
		padding: 10px;
	}
	.newsletter-form .btn {
		width: 100%;
	}
	.hero-actions {
		flex-direction: column;
		align-items: stretch;
		max-width: 320px;
		margin: 0 auto;
	}
	.mock-cards {
		grid-template-columns: 1fr 1fr;
	}
	.mock-card:last-child {
		display: none;
	}
	.footer-widgets {
		grid-template-columns: 1fr;
	}
	.footer-bottom-inner {
		justify-content: center;
		text-align: center;
	}
	.back-to-top {
		right: 16px;
		bottom: 16px;
	}
}

/* Seiten-Intro für Unterseiten (2.22.0) — eigener Inhalt statt
   Home-Duplikaten, Layout im about/split-Stil. */
.page-intro {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: clamp(32px, 6vw, 72px);
	align-items: start;
}
.page-intro .section-title {
	margin-bottom: var(--space-4);
}
.page-intro .intro-text {
	margin: 0;
	max-width: 560px;
}
.intro-points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-4);
}
.intro-point {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--color-text-muted);
}
.intro-point .icon {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	color: var(--color-primary-soft-text);
}
@media (max-width: 860px) {
	.page-intro {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
}

/* ── Mobile breathing room (2.18.0) ─────────────────────────────────────
   Mehr vertikaler Abstand auf kleinen Screens — Sektionen und Elemente
   bekommen Luft, wo es vorher eng wurde. */

@media (max-width: 860px) {
	:root {
		--section-pad: clamp(6.5rem, 14vw, 11rem);
	}
	.section-heading {
		margin-bottom: clamp(4rem, 12vw, 5rem);
	}
	.hero-visual {
		margin-top: clamp(3.5rem, 10vw, 5rem);
	}
	.about-grid,
	.split-grid {
		gap: clamp(2.5rem, 8vw, 3.5rem);
	}
	.contact-grid {
		gap: clamp(3rem, 9vw, 4rem);
	}
}

@media (max-width: 640px) {
	.cards,
	.process-grid,
	.team-grid,
	.testimonials-grid,
	.portfolio-grid {
		gap: 28px;
	}
	.bento-grid {
		gap: 20px;
	}
	.stats-grid {
		gap: 40px 24px;
	}
	.gallery-grid {
		gap: var(--space-6);
	}
	.value-list {
		gap: var(--space-4);
	}
	.form-row {
		gap: var(--space-5);
	}
	.form-group {
		margin-bottom: var(--space-5);
	}
	.footer-widgets {
		gap: var(--space-12);
	}
	.care-card {
		padding: clamp(1.75rem, 7vw, 2.5rem);
	}
	.newsletter-form {
		padding: 14px;
	}
}

/* ── Kunden-Portal (2.18.0) ───────────────────────────────────────────────
   Frontend-Dashboard: Login, Profil, vertikale Status-Leiste, Dateien.
   Alles im Theme-Stil (Karten, Tokens, h2-System). */

.kp-wrap {
	max-width: 980px;
}
.kp-card {
	position: relative;
	overflow: hidden;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 4vw, 2.25rem);
	transition: border-color var(--dur-base) ease, transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.kp-card:hover {
	border-color: var(--color-border-strong);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}
/* Cursor-Glow + Grain wie auf .card (Home-Qualität). */
.kp-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.07), transparent 65%);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}
.kp-card:hover::before {
	opacity: 1;
}
.kp-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-image: var(--grain);
	background-size: 300px 300px;
	opacity: var(--grain-s);
	pointer-events: none;
	z-index: 1;
}
.kp-card > * {
	position: relative;
	z-index: 2;
}
.kp-card h2 {
	font-size: var(--text-2xl);
	margin-bottom: var(--space-3);
}
.kp-card + .kp-card {
	margin-top: var(--space-8);
}

/* Karten-Icons für die Einstiegs-Karten (Login/Register/Admin) —
   visuelles Gewicht wie die step-number auf der Home. */
.kp-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--radius-md);
	background: var(--color-primary-soft);
	color: var(--color-primary-soft-text);
	margin-bottom: var(--space-4);
}
.kp-card-icon .icon {
	width: 22px;
	height: 22px;
}

/* Login/Register: 2-spaltig auf Desktop (2.23.0), Vorteils-Karten davor. */
/* Dezente Tipp-Zeilen unter dem Anmelde-Bereich (2.28.0) — bewusst
   zurückhaltend, damit die Auth-Karten die Aufmerksamkeit bekommen. */
.kp-benefits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-5);
	margin-top: var(--space-12);
	margin-bottom: 0;
}
.kp-benefit {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: transparent;
}
.kp-benefit-body {
	flex: 1;
	min-width: 0;
}
.kp-benefit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-sm);
	background: var(--color-primary-soft);
	color: var(--color-primary-soft-text);
}
.kp-benefit-icon .icon {
	width: 16px;
	height: 16px;
}
.kp-benefit h3 {
	margin: 0 0 2px;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--color-text);
}
.kp-benefit p {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-text-faint);
	line-height: 1.5;
}
.kp-auth-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-8);
	align-items: start;
}
.kp-auth-col .kp-login-card {
	max-width: none;
	margin: 0;
}
.kp-auth-label {
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-faint);
	margin: 0 0 var(--space-3);
}
.kp-auth-help {
	text-align: center;
	color: var(--color-text-muted);
	margin-top: var(--space-10);
}
.kp-auth-help a {
	color: var(--color-primary-soft-text);
}

/* Passwort-vergessen-Ansicht */
.kp-auth-grid--single {
	max-width: 520px;
	margin: 0 auto;
	grid-template-columns: 1fr;
}
.kp-forgot {
	margin-top: var(--space-5);
	text-align: center;
}
.kp-back-login {
	margin-top: var(--space-6);
	text-align: center;
}
.kp-forgot a,
.kp-back-login a {
	color: var(--color-primary-soft-text);
	font-weight: 500;
}
@media (max-width: 860px) {
	.kp-auth-grid {
		grid-template-columns: 1fr;
	}
}

/* Login */
.kp-login-card {
	max-width: 460px;
	margin: 0 auto;
}
.kp-login-hint {
	color: var(--color-text-muted);
	margin-bottom: var(--space-6);
}
.kp-login-card form {
	display: grid;
	gap: var(--space-5);
}
.kp-remember {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	cursor: pointer;
}
.kp-remember input {
	width: 15px;
	height: 15px;
	accent-color: var(--color-primary);
	margin: 0;
}
.kp-login-card form p {
	margin: 0;
}
.kp-login-card form label {
	display: block;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-bottom: 6px;
}
.kp-login-card form input[type="text"],
.kp-login-card form input[type="password"] {
	width: 100%;
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border-strong);
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-base);
}
.kp-login-card form .login-remember {
	display: flex;
	align-items: center;
	gap: 8px;
}
.kp-login-card form .login-remember label {
	margin: 0;
}
.kp-login-card form .login-submit .button {
	width: 100%;
	justify-content: center;
}

/* Admin-Vorschau */
.kp-admin-card {
	max-width: 640px;
	margin: 0 auto;
}
.kp-admin-links {
	list-style: none;
	margin: var(--space-4) 0;
	padding: 0;
	display: grid;
	gap: var(--space-3);
}
.kp-admin-links a {
	color: var(--color-primary-soft-text);
}
.kp-admin-note {
	color: var(--color-text-faint);
	font-size: var(--text-sm);
}

/* Dashboard-Layout */
.kp-logout {
	text-align: right;
	margin: 0 0 var(--space-5);
	font-size: var(--text-sm);
}
.kp-logout a {
	color: var(--color-text-muted);
	text-decoration: none;
}
.kp-logout a:hover {
	color: var(--color-white);
	text-decoration: underline;
}
.kp-grid {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: var(--space-8);
	align-items: start;
}
.kp-side {
	display: grid;
	gap: var(--space-8);
}

/* Profil */
.kp-profile-form {
	display: grid;
	gap: var(--space-5);
}

/* Projekt */
.kp-project-title {
	margin-bottom: var(--space-6);
}
.kp-section-label {
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-faint);
	margin: var(--space-8) 0 var(--space-4);
}

/* Vertikale Step-Leiste */
.kp-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}
.kp-steps::before {
	content: "";
	position: absolute;
	left: 19px;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: var(--color-border-strong);
}
.kp-step {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	position: relative;
	padding: 10px 0;
	color: var(--color-text-faint);
}
/* Farbige Linie unter abgeschlossenen Schritten (bis zum nächsten Dot). */
.kp-step:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 19px;
	top: 38px;
	bottom: -10px;
	width: 2px;
	background: transparent;
	transition: background var(--dur-base) ease;
}
.kp-step.done:not(:last-child)::after {
	background: var(--color-primary-soft);
}
.kp-step-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--color-bg);
	border: 1px solid var(--color-border-strong);
	color: var(--color-text-faint);
	font-size: var(--text-sm);
	font-weight: 600;
	position: relative;
	z-index: 1;
	transition: background var(--dur-base) ease, border-color var(--dur-base) ease, color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.kp-step.done {
	color: var(--color-text-muted);
}
.kp-step.done .kp-step-dot {
	background: var(--color-primary);
	border-color: transparent;
	color: #fff;
}
.kp-step-check {
	font-weight: 700;
}
.kp-step.current {
	color: var(--color-text);
}
.kp-step.current .kp-step-dot {
	background: var(--color-primary);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 0 0 4px var(--color-primary-soft), 0 0 20px var(--glow-primary-strong);
}
.kp-step-label {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-weight: 500;
}
.kp-step-tag {
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-primary-soft-text);
	background: var(--color-primary-soft);
	border-radius: var(--radius-full);
	padding: 3px 10px;
}

/* Nachricht von suvales */
.kp-note {
	margin-top: var(--space-6);
	padding: var(--space-5) var(--space-6);
	border-radius: var(--radius-md);
	background: var(--color-primary-soft);
	border: 1px solid rgba(46, 106, 232, 0.25);
}
.kp-note strong {
	display: block;
	font-size: var(--text-sm);
	letter-spacing: 0.02em;
	margin-bottom: 6px;
}
.kp-note p {
	margin: 0;
	color: var(--color-text);
}

/* Projekt angelegt, aber noch kein Erstgespräch (Schritt 0). */
.kp-pending {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-md);
	background: var(--color-primary-soft);
	border: 1px solid rgba(46, 106, 232, 0.25);
}
.kp-pending-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-primary-soft-text);
}
.kp-pending-icon .icon {
	width: 18px;
	height: 18px;
}
.kp-pending strong {
	display: block;
	font-size: var(--text-sm);
	letter-spacing: 0.02em;
	margin-bottom: 4px;
}
.kp-pending p {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/* Kurzbeschreibung des aktuellen Schritts unter der Leiste. */
.kp-step-info {
	margin: var(--space-4) 0 0;
	padding: var(--space-3) var(--space-4);
	border-left: 3px solid var(--color-primary);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	background: var(--color-surface-2);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: 1.55;
}

/* Datei-Liste */
.kp-empty {
	color: var(--color-text-muted);
}
.kp-file-list {
	list-style: none;
	margin: 0 0 var(--space-5);
	padding: 0;
	display: grid;
	gap: var(--space-3);
}
.kp-file-row {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-bg);
	transition: border-color var(--dur-base) ease, background var(--dur-base) ease;
}
.kp-file-row:hover {
	border-color: var(--color-border-strong);
	background: var(--tint-hover);
}
.kp-file-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
	background: var(--color-primary-soft);
	color: var(--color-primary-soft-text);
}
.kp-file-icon .icon {
	width: 18px;
	height: 18px;
}
.kp-file-meta {
	flex: 1;
	min-width: 0;
	display: grid;
	gap: 2px;
}
.kp-file-meta strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.kp-file-meta small {
	color: var(--color-text-faint);
}

/* Upload */
.kp-upload {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-5);
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-md);
	background: var(--color-bg);
	transition: border-color var(--dur-base) ease, background var(--dur-base) ease;
}
.kp-upload:hover,
.kp-upload:focus-within {
	border-color: var(--color-primary);
	background: var(--color-primary-soft);
}
.kp-file-input {
	flex: 1;
	min-width: 200px;
	cursor: pointer;
}
.kp-file-input input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.kp-file-input-text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}
.kp-file-input-text::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 4px;
	border: 1px solid var(--color-border-strong);
	flex: none;
}
.kp-upload:focus-within .kp-file-input-text::before {
	border-color: var(--color-primary);
}
.kp-upload-note {
	color: var(--color-text-faint);
	font-size: var(--text-xs);
	margin: var(--space-3) 0 0;
}

@media (max-width: 860px) {
	.kp-grid {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
}

/* Hinweis-Karte in der Kontakt-Sektion (2.19.0). */
.kp-portal-hint {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
	margin-top: var(--space-12);
	padding: clamp(1.5rem, 4vw, 2.25rem);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
}
.kp-portal-hint-text h3 {
	font-size: 1.1rem;
	margin-bottom: 6px;
}
.kp-portal-hint-text p {
	color: var(--color-text-muted);
	max-width: 560px;
	margin: 0;
}
.kp-portal-hint-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	flex: none;
}
@media (max-width: 860px) {
	.kp-portal-hint {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Konto-löschen-Bereich (2.34.0) — dezent rot getönt, bewusst zurück-
   haltend; der Button wird erst beim Hover kräftig rot. */
.kp-danger {
	border-color: var(--color-error-border);
	background: var(--color-error-bg);
}
.kp-danger h2 {
	color: var(--color-error);
}
.kp-danger-btn {
	border-color: var(--color-error-border);
}
.kp-danger-btn:hover {
	background: var(--color-error);
	border-color: var(--color-error);
	color: var(--color-on-primary);
}

/* ── Reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}

	.js [data-reveal] {
		opacity: 1;
		transform: none;
	}
	.hero-inner > * {
		animation: none;
	}
	.card::before,
	.bento-card::before {
		opacity: 0 !important;
	}

	.clients-track {
		animation: none;
		width: auto;
		flex-wrap: wrap;
		justify-content: center;
	}
	.clients-track .clients-group[aria-hidden="true"] {
		display: none;
	}
	/* Scroll-timeline animations are immune to the duration kill above. */
	.section-eyebrow::before,
	.section-eyebrow::after {
		animation: none !important;
	}
}

/* ── Light mode (2.32.0) ────────────────────────────────────────────────────
   Native Hell-Modus: html[data-theme="light"] wird vom Inline-Script im
   <head> gesetzt (gespeicherte Wahl oder prefers-color-scheme), der
   Theme-Toggle im Header schaltet um. Basis bleibt das dunkle Design —
   dieser Block übersteuert nur die Tokens und die wenigen hartkodierten
   Farben. Mock-Fenster, Terminal, Galerie-Kacheln und Mocks wechseln mit
   dem Theme (helle macOS-Fenster, heller Editor); nur der Footer bleibt
   als Marken-Anker bewusst dunkel. */

html[data-theme="light"] {
	color-scheme: light;

	/* Palette — hell: weiße Basis, dunkle Schrift, gleicher Blau-Akzent. */
	--color-bg: #f6f7fa;
	--color-surface: #ffffff;
	--color-surface-hover: #e9ecf3;

	--color-primary: #2458c4;
	--color-primary-hover: #1d4fae;
	--color-primary-soft: rgba(36, 88, 196, 0.1);
	--color-primary-soft-text: #2a55b8;
	--color-on-primary: #ffffff;
	--color-on-strong: #0f172a;
	--color-accent: #5b7ff0;
	--color-deep: #1e3a8a;

	/* Floating surfaces — helle Gläser. */
	--color-pill: rgba(255, 255, 255, 0.72);
	--color-pill-strong: rgba(255, 255, 255, 0.92);
	--color-panel: rgba(250, 251, 253, 0.94);

	/* Text-Hierarchie — Tintenblau → Grau. */
	--color-text: #141c2e;
	--color-text-muted: #4c5668;
	--color-text-faint: #7b8494;
	--color-border: rgba(20, 28, 46, 0.1);
	--color-border-strong: rgba(20, 28, 46, 0.18);

	/* Hairlines & Tints — dunkle Alpha-Skala. */
	--hairline-faint: rgba(20, 28, 46, 0.05);
	--hairline: rgba(20, 28, 46, 0.08);
	--hairline-strong: rgba(20, 28, 46, 0.16);
	--tint-hover: rgba(20, 28, 46, 0.06);

	/* Glows — gedämpft für helle Flächen. */
	--glow-primary: rgba(36, 88, 196, 0.28);
	--glow-primary-strong: rgba(36, 88, 196, 0.38);

	/* Feedback — kräftiger für Weiß-Grund. */
	--color-success: #0e9f6e;
	--color-success-bg: rgba(14, 159, 110, 0.1);
	--color-success-border: rgba(14, 159, 110, 0.35);
	--color-error: #dc2626;
	--color-error-bg: rgba(220, 38, 38, 0.08);
	--color-error-border: rgba(220, 38, 38, 0.35);
	--color-warning: #b45309;
	--color-warning-bg: rgba(180, 83, 9, 0.1);
	--color-warning-border: rgba(180, 83, 9, 0.35);

	/* Focus-Ring. */
	--focus-ring: 0 0 0 4px rgba(59, 130, 246, 0.45);

	/* Shadows — weich & hell. */
	--shadow-sm: 0 4px 16px -8px rgba(20, 30, 60, 0.14);
	--shadow-md: 0 12px 32px -12px rgba(20, 30, 60, 0.18);
	--shadow-lg: 0 20px 40px -15px rgba(20, 30, 60, 0.2);
	--shadow-xl: 0 40px 80px -24px rgba(20, 30, 60, 0.26);
	--shadow-primary: 0 0 0 1px rgba(59, 130, 246, 0.35), 0 16px 48px -12px rgba(37, 99, 235, 0.35);

	/* Sanfter Hintergrund-Übergang beim Umschalten (reduced-motion: instant). */
	body {
		transition: background-color var(--dur-base) ease;
	}
}

/* Mock-Fenster & Terminal wechseln mit dem Theme — helle macOS-Fenster
   mit dunkler Tinte, das Terminal wird zum hellen Editor. Der Footer
   bleibt als dunkle Insel (Brand-Anker). */
[data-theme="light"] .window {
	border-color: rgba(20, 28, 46, 0.14);
	box-shadow: 0 20px 40px -15px rgba(20, 30, 60, 0.22), inset 0 0 0 1px rgba(20, 28, 46, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
	background: linear-gradient(180deg, #ffffff 0%, #eef1f7 100%);
}
[data-theme="light"] .hero-visual .window {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(238, 241, 247, 0.9) 50%);
	border-color: rgba(20, 28, 46, 0.16);
	box-shadow: var(--shadow-xl), inset 0 0 0 1px rgba(20, 28, 46, 0.08), 0 0 120px -24px rgba(37, 99, 235, 0.35);
}
[data-theme="light"] .split-media .window {
	box-shadow: var(--shadow-xl), inset 0 0 0 1px rgba(20, 28, 46, 0.06);
}
[data-theme="light"] .mock-hero-large .mock-line {
	background: rgba(20, 28, 46, 0.09);
}
[data-theme="light"] .mock-line {
	border-color: rgba(20, 28, 46, 0.1);
	background: rgba(20, 28, 46, 0.045);
	color: rgba(20, 28, 46, 0.72);
}
[data-theme="light"] .mock-line i {
	background: rgba(20, 28, 46, 0.35);
}
[data-theme="light"] .mock-line--accent {
	color: #16223c;
}
[data-theme="light"] .terminal {
	background: #f4f6fa;
	box-shadow: inset 0 0 0 1px rgba(20, 28, 46, 0.08);
}
[data-theme="light"] .split-media .window-body {
	background:
		radial-gradient(60% 70% at 30% 20%, rgba(37, 99, 235, 0.12), transparent 70%),
		radial-gradient(50% 60% at 80% 90%, rgba(124, 156, 255, 0.1), transparent 70%);
}
[data-theme="light"] .split-media .window-body .icon {
	color: rgba(20, 28, 46, 0.4);
}
[data-theme="light"] .portfolio-mock {
	background:
		radial-gradient(70% 90% at 30% 0%, rgba(37, 99, 235, 0.18), transparent 70%),
		radial-gradient(60% 80% at 85% 100%, rgba(124, 156, 255, 0.1), transparent 70%),
		linear-gradient(180deg, rgba(20, 28, 46, 0.04), transparent);
}
[data-theme="light"] .portfolio-card:nth-child(3n + 2) .portfolio-mock {
	background:
		radial-gradient(70% 90% at 30% 0%, rgba(99, 102, 241, 0.18), transparent 70%),
		radial-gradient(60% 80% at 85% 100%, rgba(124, 156, 255, 0.1), transparent 70%),
		linear-gradient(180deg, rgba(20, 28, 46, 0.04), transparent);
}
[data-theme="light"] .portfolio-card:nth-child(3n + 3) .portfolio-mock {
	background:
		radial-gradient(70% 90% at 30% 0%, rgba(124, 156, 255, 0.16), transparent 70%),
		radial-gradient(60% 80% at 85% 100%, rgba(37, 99, 235, 0.12), transparent 70%),
		linear-gradient(180deg, rgba(20, 28, 46, 0.04), transparent);
}

/* Galerie-Kacheln — helle Screenshots statt dunkler Folien. */
[data-theme="light"] .gallery-item {
	background:
		radial-gradient(70% 90% at 30% 0%, rgba(37, 99, 235, 0.16), transparent 70%),
		linear-gradient(180deg, #ffffff, #eef0f5);
}
[data-theme="light"] .gallery-item:nth-child(3n + 2) {
	background:
		radial-gradient(70% 90% at 30% 0%, rgba(99, 102, 241, 0.16), transparent 70%),
		linear-gradient(180deg, #ffffff, #eef0f5);
}
[data-theme="light"] .gallery-item:nth-child(3n + 3) {
	background:
		radial-gradient(70% 90% at 30% 0%, rgba(124, 156, 255, 0.14), transparent 70%),
		linear-gradient(180deg, #ffffff, #eef0f5);
}
[data-theme="light"] .gallery-item .icon {
	color: rgba(20, 28, 46, 0.5);
}
[data-theme="light"] .gallery-caption {
	background: linear-gradient(transparent, rgba(238, 240, 245, 0.92));
	color: var(--color-text);
}
[data-theme="light"] .site-footer {
	--color-text: #f8fafc;
	--color-text-muted: #9aa2ad;
	--color-text-faint: #6e7681;
	--color-white: #ffffff;
	--color-surface: #0b0b0e;
	--color-border: rgba(148, 155, 166, 0.14);
	--color-border-strong: rgba(148, 155, 166, 0.26);
	--hairline: rgba(255, 255, 255, 0.06);
	--hairline-strong: rgba(255, 255, 255, 0.16);
	--tint-hover: rgba(255, 255, 255, 0.08);
}

/* ── Komponenten-Übersteuerungen (Hell) ───────────────────────────────── */

/* Kopfzeile & Navigation. */
[data-theme="light"] .header-pill {
	border-color: rgba(20, 28, 46, 0.12);
}
[data-theme="light"] .site-brand-name,
[data-theme="light"] .site-brand-name:hover {
	color: var(--color-text);
}
[data-theme="light"] .main-nav a {
	color: rgba(20, 28, 46, 0.68);
}
[data-theme="light"] .main-nav a:hover,
[data-theme="light"] .main-nav .current-menu-item > a,
[data-theme="light"] .main-nav a.is-active {
	color: var(--color-text);
}
[data-theme="light"] .nav-toggle-bar {
	background: var(--color-text);
}
[data-theme="light"] .header-account:hover {
	color: var(--color-text);
}
@media (max-width: 860px) {
	[data-theme="light"] .main-nav a:hover {
		background: rgba(20, 28, 46, 0.06);
	}
}

/* Buttons — Primary wird im Hell-Modus zum satten Blau (Dunkel-Modus:
   weißer Framer-Pill), Secondary/Ghost bekommen dunkle Gläser. */
[data-theme="light"] .btn-primary {
	background: var(--color-primary);
	color: var(--color-on-primary);
}
[data-theme="light"] .btn-primary:hover {
	background: var(--color-primary-hover);
	color: var(--color-on-primary);
	box-shadow: var(--shadow-primary);
}
[data-theme="light"] .btn-secondary {
	color: var(--color-text);
	border-color: var(--color-border-strong);
}
[data-theme="light"] .btn-secondary:hover {
	background: var(--tint-hover);
	border-color: var(--color-border-strong);
	color: var(--color-text);
}
[data-theme="light"] .btn-ghost {
	color: var(--color-text);
}
[data-theme="light"] .btn-ghost:hover {
	border-color: var(--color-border-strong);
	color: var(--color-text);
}

/* Hero & Glows — blaue Lichter für helle Flächen dimmen. */
[data-theme="light"] .hero::before {
	background:
		radial-gradient(1000px 520px at 50% 3.02%, rgba(37, 99, 235, 0.14), transparent 65%),
		linear-gradient(180deg, transparent 55%, rgba(37, 99, 235, 0.06) 100%);
}
[data-theme="light"] .hero::after {
	background: linear-gradient(180deg, rgba(46, 106, 232, 0) 0%, rgba(46, 106, 232, 0.04) 55%, rgba(46, 106, 232, 0.12) 100%);
}
[data-theme="light"] .hero-visual::before {
	background: radial-gradient(50% 100% at 50% 100%, rgba(37, 99, 235, 0.16), transparent 72%);
}
[data-theme="light"] .stats::before {
	background: radial-gradient(560px 300px at 50% 0%, rgba(37, 99, 235, 0.13), transparent 70%);
}
[data-theme="light"] .cta::before {
	background:
		radial-gradient(640px 480px at 50% 0%, rgba(30, 58, 138, 0.18), transparent 70%),
		radial-gradient(520px 400px at 15% 100%, rgba(37, 99, 235, 0.09), transparent 70%),
		radial-gradient(520px 400px at 85% 100%, rgba(30, 58, 138, 0.09), transparent 70%);
}
[data-theme="light"] .not-found::before {
	background: radial-gradient(560px 400px at 50% 30%, rgba(37, 99, 235, 0.16), transparent 70%);
}

/* Textfarben, die im Dunkel-Modus Weiß sind → im Hell-Modus Tinte. */
[data-theme="light"] .title-gradient {
	background: linear-gradient(180deg, #101c36 0%, #33425f 60%, #64748b 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
[data-theme="light"] .not-found-code {
	background: linear-gradient(180deg, #101c36 0%, #8a94a6 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Kopfzeilen-Hero-Titel & Badge — dunkle Silber-Lesart. Muss NACH
   .title-gradient stehen: Der Hero-h1 trägt beide Klassen, und die
   Silver-Variante soll den generischen Titel-Verlauf überstimmen.
   Der Cursor-Licht-Effekt (JS: --tx/--ty) und der Sheen (--sheen)
   funktionieren über background-size/-position aus der Basisregel —
   die Radiale muss dafür kräftige dunkle Tinte sein, damit sie auf dem
   hellen Silber sichtbar „abbrennt“. */
[data-theme="light"] .hero-title {
	background-image:
		radial-gradient(220px circle at 50% 50%, rgba(10, 18, 36, 0.9), rgba(10, 18, 36, 0.35) 40%, transparent 68%),
		linear-gradient(100deg, #8b97ab 12%, #c9d2de 38%, #16223c 50%, #c9d2de 62%, #8b97ab 88%);
	/* Die .title-gradient-Shorthand (background) würde position/size auf
	   0 setzen — der Hero-h1 trägt beide Klassen. Deshalb hier explizit
	   wiederholen, damit Cursor-Licht (--tx/--ty) & Sheen (--sheen) laufen. */
	background-size: 220px 220px, 220% 100%;
	background-repeat: no-repeat;
	background-position: var(--tx, 50%) var(--ty, 40%), var(--sheen, 40%) 0;
}
[data-theme="light"] .hero-badge {
	color: rgba(20, 28, 46, 0.78);
	background:
		linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)) padding-box,
		linear-gradient(90deg, rgba(36, 88, 196, 0.5), rgba(91, 127, 240, 0.3), rgba(20, 28, 46, 0.12)) border-box;
}
[data-theme="light"] .hero-badge:hover {
	color: var(--color-text);
}
[data-theme="light"] .testimonial-text {
	color: rgba(20, 28, 46, 0.82);
}
[data-theme="light"] .stat-number,
[data-theme="light"] .mini-stat strong,
[data-theme="light"] .price,
[data-theme="light"] .split-badge strong {
	color: var(--color-text);
}

/* Bento mock scenes — helle Fenster: dunkle Tinte statt weißer Flächen. */
[data-theme="light"] .mock-insight-value {
	color: var(--color-text);
}
[data-theme="light"] .mock-cursor {
	color: rgba(20, 28, 46, 0.92);
	filter: drop-shadow(0 2px 3px rgba(20, 30, 60, 0.25));
}
[data-theme="light"] .mock-bar {
	background: linear-gradient(180deg, rgba(46, 106, 232, 0.5), rgba(46, 106, 232, 0.14));
}
[data-theme="light"] .mock-store-top {
	border-color: rgba(20, 28, 46, 0.1);
}
[data-theme="light"] .mock-store .mock-title {
	background: rgba(20, 28, 46, 0.14);
}
[data-theme="light"] .mock-store .mock-line {
	background: rgba(20, 28, 46, 0.09);
}
[data-theme="light"] .mock-store-price {
	color: var(--color-text);
}
[data-theme="light"] .mock-star .star-ico {
	color: rgba(20, 28, 46, 0.18);
}
[data-theme="light"] .mock-cart {
	border-color: rgba(20, 28, 46, 0.16);
	background: rgba(20, 28, 46, 0.05);
	color: rgba(20, 28, 46, 0.6);
}
[data-theme="light"] .mock-cart.is-hover {
	color: var(--color-text);
	border-color: rgba(46, 106, 232, 0.5);
	box-shadow: 0 0 0 4px rgba(46, 106, 232, 0.12);
}

/* Cursor-Glows & Spotlight — dunkler Tint, statt weißes Licht. */
[data-theme="light"] .card::before,
[data-theme="light"] .bento-card::before,
[data-theme="light"] .kp-card::before {
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(20, 40, 90, 0.07), transparent 65%);
}
@media (hover: hover) and (pointer: fine) {
	[data-theme="light"] body::before {
		background: radial-gradient(620px circle at var(--spot-x, 50%) var(--spot-y, 30%), rgba(40, 70, 160, 0.045), transparent 70%);
	}
}

/* Alt-Sektionen — heller statt dunkler Ton (--color-surface-2 bleibt
   global dunkel, weil Mock-Fenster & Galerie-Kacheln es brauchen). */
[data-theme="light"] .section-alt {
	background: #eef0f5;
}
[data-theme="light"] .kp-step-info {
	background: #eef0f5;
}

/* Lightbox & Back-to-top. */
[data-theme="light"] .lightbox {
	background: rgba(244, 246, 250, 0.94);
}
[data-theme="light"] .lightbox-close {
	color: var(--color-text);
}
[data-theme="light"] .back-to-top {
	color: var(--color-text);
}
[data-theme="light"] .btt-track {
	stroke: rgba(20, 28, 46, 0.14);
}
[data-theme="light"] .back-to-top:hover .btt-progress {
	stroke: rgba(20, 28, 46, 0.85);
}
[data-theme="light"] .back-to-top:hover .btt-track {
	stroke: rgba(20, 28, 46, 0.3);
}