/*!
 * KURO Theme · main.css
 * Dunkles Premium-Design mit Volt-Akzent. Keine externen Schriften.
 */

/* =====================================================================
   01 · Tokens
   ================================================================== */
:root {
	--bg: #07070a;
	--bg-2: #0c0c11;
	--bg-3: #111118;
	--line: rgba(255, 255, 255, .08);
	--line-2: rgba(255, 255, 255, .15);
	--text: #f2efe8;
	--muted: #9a98a2;
	--dim: #7a7983;
	--accent: #d7ff3a;
	--accent-rgb: 215, 255, 58;
	--on-accent: #0a0a0c;
	--violet-rgb: 138, 108, 255;
	--ember-rgb: 255, 92, 57;
	--radius: 22px;
	--radius-sm: 14px;
	--gutter: clamp(16px, 4vw, 56px);
	--maxw: 1480px;
	--header-h: 76px;
	--topbar-h: 0px;
	--ease: cubic-bezier(.16, 1, .3, 1);
	--ease-io: cubic-bezier(.76, 0, .24, 1);
	--font: "Inter", "Segoe UI Variable Display", "Segoe UI Variable Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	--mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
}
.kuro-has-topbar { --topbar-h: 32px; }

/* =====================================================================
   02 · Basis
   ================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
	background: var(--bg);
	color-scheme: dark;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}
body {
	margin: 0;
	min-height: 100vh;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p { margin: 0 0 1em; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 650; line-height: 1.05; letter-spacing: -.03em; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr-only {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
	position: fixed; left: 16px; top: -80px; z-index: 10001;
	padding: 10px 18px; border-radius: 999px;
	background: var(--accent); color: var(--on-accent); font-weight: 600;
	transition: top .3s var(--ease);
}
.skip-link:focus { top: 16px; }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { width: 100%; max-width: calc(780px + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* =====================================================================
   03 · Typografie
   ================================================================== */
.h1 { font-size: clamp(2.7rem, 6.6vw, 6.2rem); line-height: .95; letter-spacing: -.055em; font-weight: 680; }
.h2 { font-size: clamp(2.4rem, 5.4vw, 5rem); line-height: .98; letter-spacing: -.05em; font-weight: 660; }
.h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -.025em; }
h1 em, h2 em, h3 em, .h1 em, .h2 em, .footer-claim em, .drop--end em {
	font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em;
}
.eyebrow {
	display: inline-flex; align-items: center; gap: .7em; margin: 0 0 1.4rem;
	font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .16em;
	text-transform: uppercase; color: var(--muted);
}
.eyebrow .num { color: var(--accent); }
.eyebrow .icon { width: 16px; height: 16px; color: var(--accent); }
.eyebrow--pill {
	padding: .65em 1.1em .65em .9em; border: 1px solid var(--line-2); border-radius: 999px;
	background: rgba(255, 255, 255, .035); color: var(--text);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.pulse {
	width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--accent);
	animation: kPulse 2.2s infinite;
}
@keyframes kPulse {
	0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .6); }
	70% { box-shadow: 0 0 0 12px rgba(var(--accent-rgb), 0); }
	100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
.lead { font-size: clamp(1.08rem, 1.4vw, 1.3rem); line-height: 1.55; color: var(--muted); max-width: 52ch; }
.lead p { margin: 0; }
.icon { width: 1em; height: 1em; flex: none; }

/* Buchstaben-Animation */
[data-split] .w { display: inline-block; clip-path: inset(-.3em -.25em -.2em -.25em); }
[data-split] .c { display: inline-block; }
.js [data-split] .c {
	transform: translate3d(0, 140%, 0) rotate(7deg);
	transform-origin: 0 100%;
	transition: transform 1.15s var(--ease) calc(var(--i, 0) * 24ms);
}
.js [data-split].is-in .c { transform: none; }

/* Einblenden beim Scrollen */
.js [data-reveal] {
	opacity: 0;
	transform: translate3d(0, 38px, 0);
	transition: opacity 1s var(--ease) var(--d, 0ms), transform 1.25s var(--ease) var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* =====================================================================
   04 · Buttons & Links
   ================================================================== */
.btn {
	--h: 52px;
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .65em;
	height: var(--h); padding: 0 1.6em; border: 1px solid transparent; border-radius: 999px;
	font-size: 15px; font-weight: 600; letter-spacing: -.005em; line-height: 1; white-space: nowrap;
	cursor: pointer; isolation: isolate; overflow: hidden;
	transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s, transform .6s var(--ease), box-shadow .4s;
}
.btn--lg { --h: 60px; padding: 0 1.9em; font-size: 16px; }
.btn--sm { --h: 42px; padding: 0 1.2em; font-size: 14px; }
.btn--accent { background: var(--accent); color: var(--on-accent); box-shadow: 0 12px 40px -12px rgba(var(--accent-rgb), .55); }
.btn--accent:hover { box-shadow: 0 16px 56px -10px rgba(var(--accent-rgb), .8); }
.btn--ghost {
	background: rgba(255, 255, 255, .04); border-color: var(--line-2); color: var(--text);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .32); }
.btn__label { position: relative; display: inline-block; overflow: hidden; line-height: 1.3; }
.btn__label > span { display: block; transition: transform .6s var(--ease); }
.btn__label::after {
	content: attr(data-text); position: absolute; left: 0; top: 100%; width: 100%;
	transition: transform .6s var(--ease);
}
.btn:hover .btn__label > span, .btn:hover .btn__label::after { transform: translateY(-100%); }
.btn__icon { width: 1.1em; height: 1.1em; transition: transform .6s var(--ease); }
.btn:hover .btn__icon { transform: translate(2px, -2px) rotate(0deg); }
.btn__icon--down { transform: rotate(90deg); }
.btn:hover .btn__icon--down { transform: rotate(90deg) translateX(3px); }
.aff { font-size: .72em; line-height: 0; vertical-align: super; margin-left: 1px; opacity: .8; font-weight: 600; }
.btn .aff { margin-left: -.5em; }
.card__cta .aff { margin-left: -.25em; }

.link-arrow {
	display: inline-flex; align-items: center; gap: .55em; padding-bottom: 5px;
	border-bottom: 1px solid var(--line-2); color: var(--text); font-size: 15px; font-weight: 600;
	transition: border-color .3s, gap .4s var(--ease);
}
.link-arrow:hover { gap: .9em; border-color: var(--accent); }

/* =====================================================================
   05 · Header & Navigation
   ================================================================== */
.site-header { position: fixed; inset: 0 0 auto; z-index: 900; transition: transform .7s var(--ease); }
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
.site-header.is-hidden { transform: translateY(-110%); }
.site-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: rgba(7, 7, 10, .62); border-bottom: 1px solid var(--line);
	-webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
	opacity: 0; transition: opacity .5s;
}
.site-header.is-scrolled::before, .menu-open .site-header::before { opacity: 1; }
.topbar {
	display: flex; align-items: center; justify-content: center; gap: .7em;
	height: var(--topbar-h); padding: 0 16px; overflow: hidden;
	border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .025);
	font-size: 12px; color: var(--muted); white-space: nowrap;
	transition: height .5s var(--ease), opacity .4s, border-color .4s;
}
.topbar span { overflow: hidden; text-overflow: ellipsis; }
.topbar strong { font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.topbar a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.topbar a:hover { text-decoration-color: var(--accent); }
.site-header.is-scrolled .topbar { height: 0; opacity: 0; border-color: transparent; }
.site-header__inner {
	position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px;
	height: var(--header-h); padding: 0 var(--gutter); transition: height .5s var(--ease);
}
.site-header.is-scrolled .site-header__inner { height: 66px; }
.brand, .custom-logo-link { display: inline-flex; align-items: center; color: var(--text); }
.kuro-wordmark { height: 22px; width: auto; transition: transform .6s var(--ease); }
.brand:hover .kuro-wordmark { transform: scale(1.04); }
.k-dot { fill: var(--accent); }
.custom-logo { max-height: 42px; width: auto; }
.nav { position: absolute; left: 50%; transform: translateX(-50%); }
.nav__list {
	display: flex; gap: 2px; margin: 0; padding: 5px; list-style: none;
	border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .03);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.nav__list a {
	display: block; padding: .55em 1.1em; border-radius: 999px;
	font-size: 14px; font-weight: 500; color: var(--muted); transition: color .3s, background-color .3s;
}
.nav__list a:hover, .nav__list .current-menu-item > a { color: var(--text); background: rgba(255, 255, 255, .08); }
.site-header__actions { display: flex; align-items: center; gap: 10px; }
.burger {
	display: none; position: relative; width: 46px; height: 46px; padding: 0;
	border: 1px solid var(--line-2); border-radius: 50%; background: rgba(255, 255, 255, .04);
	align-items: center; justify-content: center; flex-direction: column; gap: 6px;
}
.burger i { display: block; width: 18px; height: 1.5px; background: var(--text); transition: transform .6s var(--ease); }
.menu-open .burger i:nth-of-type(1) { transform: translateY(3.75px) rotate(45deg); }
.menu-open .burger i:nth-of-type(2) { transform: translateY(-3.75px) rotate(-45deg); }

.overlay {
	position: fixed; inset: 0; z-index: 850; display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
	padding: calc(var(--header-h) + var(--topbar-h) + 48px) var(--gutter) 32px;
	background: radial-gradient(120% 70% at 100% 0%, rgba(var(--accent-rgb), .12), transparent 60%), var(--bg);
	clip-path: circle(0 at calc(100% - var(--gutter) - 23px) calc(var(--topbar-h) + var(--header-h) / 2));
	visibility: hidden;
	transition: clip-path .85s var(--ease-io), visibility 0s linear .85s;
	overflow-y: auto;
}
.menu-open .overlay {
	clip-path: circle(150% at calc(100% - var(--gutter) - 23px) calc(var(--topbar-h) + var(--header-h) / 2));
	visibility: visible; transition: clip-path .85s var(--ease-io), visibility 0s;
}
.overlay__list { margin: 0; padding: 0; list-style: none; }
.overlay__list li { overflow: hidden; }
.overlay__list a {
	display: block; padding: .06em 0; font-size: clamp(2.6rem, 12vw, 4.6rem); font-weight: 680;
	letter-spacing: -.055em; line-height: 1.08;
	transform: translateY(105%); transition: transform .9s var(--ease), color .3s;
}
.overlay__list a:hover { color: var(--accent); }
.menu-open .overlay__list a { transform: none; }
.menu-open .overlay__list li:nth-child(1) a { transition-delay: .18s; }
.menu-open .overlay__list li:nth-child(2) a { transition-delay: .24s; }
.menu-open .overlay__list li:nth-child(3) a { transition-delay: .30s; }
.menu-open .overlay__list li:nth-child(4) a { transition-delay: .36s; }
.menu-open .overlay__list li:nth-child(5) a { transition-delay: .42s; }
.menu-open .overlay__list li:nth-child(6) a { transition-delay: .48s; }
.overlay__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; opacity: 0; transition: opacity .6s .5s; }
.menu-open .overlay__foot { opacity: 1; }
.menu-open, .menu-open body { overflow: hidden; }

@media (max-width: 980px) {
	.nav, .header-cta { display: none !important; }
	.burger { display: inline-flex; }
}

/* Scroll-Fortschritt */
.progress {
	position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 2px;
	background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}

/* =====================================================================
   06 · Hero
   ================================================================== */
.hero {
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; flex-direction: column; justify-content: center;
	min-height: 100vh; min-height: 100svh;
	padding: calc(var(--header-h) + var(--topbar-h) + 64px) 0 36px;
}
.hero__canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.hero__aurora { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.hero__aurora span { position: absolute; border-radius: 50%; will-change: transform; }
.hero__aurora span:nth-child(1) {
	width: 70vw; height: 70vw; left: 40%; top: -30%;
	background: radial-gradient(circle, rgba(var(--accent-rgb), .16), transparent 62%);
	animation: kDrift1 18s ease-in-out infinite alternate;
}
.hero__aurora span:nth-child(2) {
	width: 60vw; height: 60vw; left: -18%; top: 25%;
	background: radial-gradient(circle, rgba(var(--violet-rgb), .2), transparent 62%);
	animation: kDrift2 22s ease-in-out infinite alternate;
}
.hero__aurora span:nth-child(3) {
	width: 48vw; height: 48vw; left: 58%; top: 52%;
	background: radial-gradient(circle, rgba(var(--ember-rgb), .12), transparent 62%);
	animation: kDrift3 26s ease-in-out infinite alternate;
}
@keyframes kDrift1 { to { transform: translate(-14vw, 12vh) scale(1.15); } }
@keyframes kDrift2 { to { transform: translate(16vw, -10vh) scale(1.1); } }
@keyframes kDrift3 { to { transform: translate(-10vw, -14vh) scale(1.2); } }
.hero::after {
	content: ""; position: absolute; inset: auto 0 0; height: 28vh; z-index: -1; pointer-events: none;
	background: linear-gradient(to bottom, transparent, var(--bg));
}
.hero__inner { position: relative; flex: 1; display: flex; align-items: center; }
.hero__content { position: relative; z-index: 2; max-width: min(860px, 100%); will-change: transform; }
.hero__title {
	margin: 0 0 .32em; font-size: clamp(3.5rem, 10.6vw, 10.4rem); line-height: .86;
	letter-spacing: -.068em; font-weight: 720;
}
.hero__title .line { display: block; }
.hero__title em { color: var(--accent); padding-right: .04em; }
.hero__lead { margin: 0 0 .9rem; font-size: clamp(1.4rem, 2.5vw, 2.15rem); line-height: 1.2; letter-spacing: -.035em; font-weight: 560; }
.rotator {
	position: relative; display: inline-block; vertical-align: bottom; height: 1.25em; overflow: hidden;
	color: var(--accent); font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em;
	white-space: nowrap; transition: width .7s var(--ease);
}
.rotator > span {
	position: absolute; left: 0; top: 0; padding-right: .1em;
	transform: translateY(105%); opacity: 0;
	transition: transform .8s var(--ease), opacity .8s var(--ease);
}
.rotator > span:first-child { position: relative; }
.rotator > span.is-active { transform: none; opacity: 1; }
.rotator > span.is-out { transform: translateY(-105%); opacity: 0; }
.hero__text { max-width: 54ch; margin: 0 0 2.3rem; color: var(--muted); font-size: clamp(1rem, 1.2vw, 1.12rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.spotlight { position: absolute; right: var(--gutter); bottom: 2%; z-index: 3; width: 320px; }
.spotlight__float { animation: kFloat 7s ease-in-out infinite; }
@keyframes kFloat { 50% { transform: translateY(-14px); } }
.spotlight__card {
	position: relative; overflow: hidden; padding: 12px; border-radius: 26px;
	background: rgba(18, 18, 25, .55); border: 1px solid var(--line-2);
	-webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
	transition: transform .8s var(--ease);
}
.spotlight__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 6px 12px; }
.spotlight__label { display: inline-flex; align-items: center; gap: .6em; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.spotlight__badge { padding: 4px 9px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; }
.spotlight__media { display: block; aspect-ratio: 5 / 4; border-radius: 18px; overflow: hidden; background: var(--bg-3); }
.spotlight__media img, .spotlight__media svg { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.spotlight__card:hover .spotlight__media img, .spotlight__card:hover .spotlight__media svg { transform: scale(1.06); }
.spotlight__body { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 14px 6px 6px; }
.spotlight__brand { margin: 0 0 2px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.spotlight__title { margin: 0 0 6px; font-size: 1.12rem; font-weight: 620; letter-spacing: -.025em; line-height: 1.2; }
.spotlight__price { margin: 0; font-size: 14px; color: var(--muted); }
.spotlight__price strong { color: var(--text); }
.spotlight__price s { color: var(--dim); margin-left: 4px; }
.spotlight__go {
	display: inline-grid; place-items: center; position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%;
	background: var(--accent); color: var(--on-accent); transition: transform .5s var(--ease);
}
.spotlight__go .cta-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.spotlight__go .aff { position: absolute; top: 7px; right: 9px; font-size: 11px; }
.spotlight__go .icon { width: 18px; height: 18px; }
.spotlight__go:hover { transform: rotate(45deg) scale(1.06); }

.hero__bottom { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 56px; }
.scroll-cue { display: inline-flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.scroll-cue__line { position: relative; width: 1px; height: 52px; overflow: hidden; background: var(--line-2); }
.scroll-cue__line::after {
	content: ""; position: absolute; left: 0; top: -50%; width: 100%; height: 50%;
	background: var(--accent); animation: kCue 2.2s var(--ease-io) infinite;
}
@keyframes kCue { to { top: 100%; } }
.hero__stats { display: flex; gap: clamp(20px, 4vw, 52px); margin: 0; padding: 0; list-style: none; }
.hero__stats strong { display: block; font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 650; letter-spacing: -.04em; line-height: 1.1; }
.hero__stats span { font-size: 12.5px; color: var(--muted); }

@media (max-width: 1180px) {
	.spotlight { display: none; }
}
@media (max-width: 760px) {
	.hero { padding-top: calc(var(--header-h) + var(--topbar-h) + 34vh); }
	.hero__bottom { flex-direction: column; align-items: flex-start; margin-top: 44px; }
	.scroll-cue { display: none; }
	.hero__actions .btn { flex: 1 1 auto; }
}

/* =====================================================================
   07 · Laufbänder
   ================================================================== */
.bands { position: relative; overflow: hidden; padding: clamp(70px, 9vw, 130px) 0; }
.band { position: relative; width: 120%; margin-left: -10%; overflow: hidden; padding: clamp(14px, 1.5vw, 22px) 0; }
.band--accent {
	z-index: 2; transform: rotate(-3deg);
	background: var(--accent); color: var(--on-accent);
	box-shadow: 0 30px 80px -30px rgba(var(--accent-rgb), .55);
}
.band--outline {
	z-index: 1; margin-top: 0; transform: rotate(2.4deg);
	background: var(--bg-2); border-block: 1px solid var(--line);
}
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; flex: none; align-items: center; }
.marquee__item {
	padding: 0 .38em; white-space: nowrap; line-height: 1;
	font-size: clamp(2.2rem, 5.6vw, 4.8rem); font-weight: 760; letter-spacing: -.05em; text-transform: uppercase;
	transition: color .3s, -webkit-text-stroke-color .3s;
}
.marquee__sep { font-size: clamp(1.2rem, 2.6vw, 2.2rem); line-height: 1; }
.band--accent a.marquee__item:hover { color: #000; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.band--outline .marquee__item { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .42); }
.band--outline .marquee__sep { color: var(--accent); }
.no-js .marquee__track { animation: kMarquee 40s linear infinite; }
@keyframes kMarquee { to { transform: translateX(-50%); } }

/* =====================================================================
   08 · Sektionen
   ================================================================== */
.section { position: relative; padding: clamp(90px, 12vw, 170px) 0; }
.section--tight { padding: clamp(60px, 8vw, 110px) 0; }
.section--flush { padding-top: 0; }
.section-head {
	display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end;
	gap: 28px 64px; margin-bottom: clamp(40px, 5vw, 70px);
}
.section-head .h2 { max-width: 14ch; }
.section-head__side { justify-self: end; max-width: 44ch; color: var(--muted); }
.section-head__side p { margin-bottom: 1.3em; }
@media (max-width: 900px) {
	.section-head { grid-template-columns: 1fr; }
	.section-head__side { justify-self: start; }
}
.empty { padding: 40px 0; color: var(--muted); }
.empty .search-form { margin: 20px 0; }

/* Filter-Chips */
.chips, .brand-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.brand-pills { margin: 32px 0 0; }
.chip {
	display: inline-flex; align-items: center; padding: .6em 1.15em; border-radius: 999px;
	border: 1px solid var(--line-2); background: transparent; color: var(--muted);
	font-size: 14px; font-weight: 500; line-height: 1.2; white-space: nowrap;
	transition: color .3s, background-color .3s, border-color .3s;
}
.chip:hover { color: var(--text); border-color: rgba(255, 255, 255, .35); }
.chip.is-active { background: var(--text); border-color: var(--text); color: var(--bg); }
@media (max-width: 600px) {
	.chips, .brand-pills {
		flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
		scrollbar-width: none;
	}
	.chips::-webkit-scrollbar, .brand-pills::-webkit-scrollbar { display: none; }
	.chip { flex: none; }
}

/* =====================================================================
   09 · Produktkarten
   ================================================================== */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
@media (max-width: 1180px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card { position: relative; min-width: 0; }
.card.is-hidden { display: none; }
.card__tilt {
	position: relative; height: 100%; overflow: hidden; border-radius: var(--radius);
	background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
	border: 1px solid var(--line);
	transition: transform .8s var(--ease), border-color .4s;
}
.card__tilt::before {
	content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; padding: 1px;
	background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--accent-rgb), .9), transparent 45%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	opacity: 0; transition: opacity .4s;
}
.card:hover .card__tilt::before { opacity: 1; }
.card__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-3); }
.card__media img, .card__media svg { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.card:hover .card__media img, .card:hover .card__media svg { transform: scale(1.07); }
.card__badge {
	position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 10px; border-radius: 999px;
	background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; letter-spacing: .01em; line-height: 1;
}
.card__index { position: absolute; top: 15px; right: 16px; z-index: 2; font-family: var(--mono); font-size: 11px; color: rgba(255, 255, 255, .5); }
.card__body { padding: 16px 18px 18px; }
.card__meta {
	display: flex; justify-content: space-between; gap: 10px; margin: 0;
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.card__title { margin: .55em 0 1.1em; font-size: clamp(1.05rem, 1.3vw, 1.28rem); font-weight: 620; line-height: 1.2; letter-spacing: -.025em; }
.card__title a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease); }
.card:hover .card__title a { background-size: 100% 1px; }
.card__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card__price { margin: 0; line-height: 1.2; }
.card__price strong { font-size: 1.05rem; font-weight: 650; letter-spacing: -.02em; }
.card__price s { display: block; margin-top: 2px; font-size: .82rem; color: var(--dim); }
.card__cta {
	position: relative; z-index: 4; display: inline-flex; align-items: center; gap: .35em; flex: none;
	padding: .7em 1em; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .05);
	font-size: 13px; font-weight: 600; white-space: nowrap;
	transition: background-color .35s, color .35s, border-color .35s, transform .5s var(--ease);
}
.card__cta .icon { width: 14px; height: 14px; transition: transform .5s var(--ease); }
.card__cta:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.card__cta:hover .icon { transform: rotate(45deg); }
.card__glare {
	position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .1), transparent 42%);
	opacity: 0; transition: opacity .5s;
}
.card:hover .card__glare, .product-stage:hover .card__glare, .spotlight__card:hover .card__glare { opacity: 1; }
@media (max-width: 600px) {
	.card__body { padding: 12px 12px 14px; }
	.card__meta span:last-child { display: none; }
	.card__row { align-items: flex-end; }
		.card__cta { width: 38px; height: 38px; padding: 0; justify-content: center; }
	.card__cta .cta-text { display: none; }
	.card__cta .aff { position: absolute; top: 4px; right: 7px; }
	.card__badge { top: 10px; left: 10px; padding: 5px 8px; font-size: 10px; }
	.card__index { display: none; }
}

/* Platzhalter-Grafik */
.ph__word { font-family: var(--font); font-weight: 800; letter-spacing: -.04em; fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.ph__float { animation: kPhFloat 6s ease-in-out infinite; }
.ph__shadow { transform-box: fill-box; transform-origin: center; animation: kPhShadow 6s ease-in-out infinite; }
@keyframes kPhFloat { 50% { transform: translateY(-5px); } }
@keyframes kPhShadow { 50% { transform: scaleX(.82); opacity: .6; } }

/* =====================================================================
   10 · Drops der Woche (horizontal)
   ================================================================== */
.hscroll { position: relative; }
.hscroll__sticky {
	position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
	display: flex; flex-direction: column; justify-content: center; gap: clamp(22px, 3.5vh, 44px);
	padding: calc(var(--header-h) - 10px) 0 28px;
}
.hscroll__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.hscroll__head .eyebrow { margin-bottom: 1rem; }
.hscroll__hint { display: inline-flex; align-items: center; gap: .6em; margin: 0 0 .6em; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.hscroll__hint .icon { animation: kNudge 1.6s var(--ease) infinite; }
@keyframes kNudge { 50% { transform: translateX(6px); } }
.hscroll__track { display: flex; gap: clamp(14px, 1.6vw, 24px); width: max-content; padding-inline: var(--gutter); will-change: transform; }
.hscroll__bar { height: 2px; overflow: hidden; border-radius: 2px; background: var(--line); }
.hscroll__bar span { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.drop { flex: none; width: min(36vw, 64vh, 540px); }
.drop__media {
	position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden;
	border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-3);
}
.drop__media img, .drop__media svg { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.drop:hover .drop__media img, .drop:hover .drop__media svg { transform: scale(1.05); }
.drop__num {
	position: absolute; left: 18px; bottom: 4px; z-index: 2; line-height: 1;
	font-size: clamp(4rem, 7.5vw, 7.5rem); font-weight: 780; letter-spacing: -.07em;
	color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .55);
}
.drop__body { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 4px 0; }
.drop__meta { margin: 0 0 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.drop__title { font-size: clamp(1.2rem, 1.7vw, 1.6rem); font-weight: 620; letter-spacing: -.03em; line-height: 1.15; }
.drop__side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.drop__price { margin: 0; text-align: right; }
.drop__price strong { font-size: 1.1rem; }
.drop__price s { color: var(--dim); font-size: .85rem; margin-left: .4em; }
.drop--end {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
	aspect-ratio: 5 / 4; align-self: flex-start; border-radius: var(--radius); border: 1px dashed var(--line-2);
	transition: border-color .4s, background-color .4s;
}
.drop--end:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), .04); }
.drop--end__circle {
	display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%;
	background: var(--accent); color: var(--on-accent); transition: transform .7s var(--ease);
}
.drop--end__circle .icon { width: 34px; height: 34px; }
.drop--end:hover .drop--end__circle { transform: scale(1.1) rotate(45deg); }
.drop--end__text { font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 650; letter-spacing: -.04em; text-align: center; line-height: 1.05; }
.drop--end__text em { display: block; color: var(--muted); }

.hscroll.is-static .hscroll__sticky { position: relative; height: auto; padding: clamp(80px, 10vw, 140px) 0; }
.hscroll.is-static .hscroll__track {
	width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px;
	scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
.hscroll.is-static .hscroll__track::-webkit-scrollbar { display: none; }
.hscroll.is-static .drop { width: min(80vw, 440px); scroll-snap-align: start; }
.hscroll.is-static .hscroll__bar { display: none; }

/* =====================================================================
   11 · Haltung & Zahlen
   ================================================================== */
.manifesto__text {
	margin: 0 0 clamp(70px, 9vw, 130px); max-width: 24ch;
	font-size: clamp(2rem, 4.6vw, 4.3rem); line-height: 1.08; letter-spacing: -.045em; font-weight: 620;
}
.manifesto__text em { font-family: var(--serif); font-weight: 400; color: var(--accent); letter-spacing: -.02em; }
.js .manifesto__text .word { opacity: .13; transition: opacity .45s ease; }
.js .manifesto__text .word.on { opacity: 1; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.stat { padding: 30px 24px 0 0; }
.stat + .stat { padding-left: 24px; border-left: 1px solid var(--line); }
.stat strong { display: block; font-size: clamp(2.8rem, 5.6vw, 5.4rem); font-weight: 680; letter-spacing: -.065em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat > span { display: block; margin-top: 12px; color: var(--muted); font-size: 14px; }
@media (max-width: 860px) {
	.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stat:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* =====================================================================
   12 · So funktioniert's
   ================================================================== */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); margin: 0 0 22px; padding: 0; list-style: none; }
.step {
	position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; min-height: 320px;
	padding: clamp(24px, 2.8vw, 38px); border-radius: var(--radius); border: 1px solid var(--line);
	background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01));
	transition: border-color .4s, transform .8s var(--ease);
}
.step::after {
	content: attr(data-n); position: absolute; top: -.18em; right: -.04em; line-height: 1; pointer-events: none;
	font-size: clamp(8rem, 13vw, 12rem); font-weight: 800; letter-spacing: -.08em;
	color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .07); transition: -webkit-text-stroke-color .5s;
}
.step:hover { border-color: rgba(var(--accent-rgb), .4); }
.step:hover::after { -webkit-text-stroke-color: rgba(var(--accent-rgb), .45); }
.step__icon {
	display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px;
	background: rgba(var(--accent-rgb), .1); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), .25);
}
.step__icon .icon { width: 24px; height: 24px; }
.step h3 { margin: auto 0 .45em; padding-top: 64px; font-size: clamp(1.4rem, 2vw, 1.8rem); }
.step p { min-height: 4.8em; }
.step p { margin: 0; color: var(--muted); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } .step { min-height: 0; } }
.note {
	display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 20px 24px;
	border: 1px dashed var(--line-2); border-radius: var(--radius-sm); color: var(--muted); font-size: 14px; line-height: 1.6;
}
.note .icon { width: 20px; height: 20px; margin-top: 1px; color: var(--accent); }
.note--inline { margin: 2em 0; }

/* =====================================================================
   13 · Journal
   ================================================================== */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); }
@media (max-width: 960px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .posts { grid-template-columns: 1fr; } }
.post-card__media {
	display: block; aspect-ratio: 16 / 11; margin-bottom: 18px; overflow: hidden;
	border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-3);
}
.post-card__media img, .post-card__media svg { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.post-card:hover .post-card__media img, .post-card:hover .post-card__media svg { transform: scale(1.05); }
.post-card__meta { margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.post-card__title { margin: .5em 0 .5em; font-size: clamp(1.25rem, 1.7vw, 1.55rem); font-weight: 620; letter-spacing: -.03em; line-height: 1.15; }
.post-card__title a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease); }
.post-card:hover .post-card__title a { background-size: 100% 1px; }
.post-card__excerpt { margin: 0; color: var(--muted); font-size: 15px; }

/* =====================================================================
   14 · Newsletter
   ================================================================== */
.newsletter__inner {
	position: relative; isolation: isolate; overflow: hidden; text-align: center;
	padding: clamp(70px, 10vw, 140px) clamp(20px, 5vw, 80px);
	border-radius: clamp(24px, 3vw, 44px); border: 1px solid var(--line);
	background: radial-gradient(120% 100% at 50% 0%, rgba(var(--accent-rgb), .08), transparent 55%), var(--bg-2);
}
.newsletter__glow {
	position: absolute; left: 50%; top: 100%; z-index: -1; width: 1000px; height: 1000px;
	transform: translate(-50%, -32%); border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--accent-rgb), .22), transparent 60%);
	animation: kBreathe 7s ease-in-out infinite;
}
@keyframes kBreathe { 50% { transform: translate(-50%, -38%) scale(1.08); opacity: .8; } }
.newsletter__badge { position: absolute; top: clamp(16px, 3vw, 36px); right: clamp(16px, 3vw, 36px); }
.newsletter .eyebrow { justify-content: center; }
.newsletter .h1 { max-width: 13ch; margin: 0 auto .4em; }
.newsletter__text { max-width: 46ch; margin: 0 auto 2.2rem; color: var(--muted); }
.nl-form {
	display: flex; gap: 8px; max-width: 540px; margin: 0 auto; padding: 6px; border-radius: 999px;
	border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	transition: border-color .3s, box-shadow .3s;
}
.nl-form:focus-within { border-color: rgba(var(--accent-rgb), .6); box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .08); }
.nl-form input { flex: 1; min-width: 0; padding: 0 20px; border: 0; background: none; outline: none; font-size: 16px; }
.nl-form input::placeholder { color: var(--dim); }
.nl-note { margin: 16px 0 0; font-size: 13px; color: var(--dim); }
.admin-hint { max-width: 60ch; margin: 18px auto 0; padding: 10px 14px; border-radius: 10px; background: rgba(var(--accent-rgb), .08); color: var(--accent); font-size: 12.5px; }
@media (max-width: 560px) {
	.nl-form { flex-direction: column; border-radius: 24px; }
	.nl-form input { height: 52px; }
	.newsletter__badge { display: none; }
}

/* Rotierendes Siegel */
.rot-badge { width: 120px; height: 120px; animation: kSpin 20s linear infinite; }
.rot-badge text { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; fill: var(--text); }
.rot-badge__mark { color: var(--text); }
@keyframes kSpin { to { transform: rotate(360deg); } }

/* =====================================================================
   15 · Footer
   ================================================================== */
.site-footer { position: relative; overflow: hidden; padding: clamp(80px, 10vw, 130px) 0 28px; border-top: 1px solid var(--line); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.footer-claim { max-width: 17ch; margin: 0 0 28px; font-size: clamp(1.7rem, 2.8vw, 2.6rem); line-height: 1.08; letter-spacing: -.04em; font-weight: 620; }
.footer-claim em { color: var(--accent); }
.footer-title { margin: 0 0 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.footer-list { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.footer-list a { color: var(--muted); transition: color .3s; }
.footer-list a:hover { color: var(--text); }
.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.socials a {
	display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
	border: 1px solid var(--line-2); color: var(--text);
	transition: background-color .35s, color .35s, border-color .35s, transform .5s var(--ease);
}
.socials a:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: translateY(-3px); }
.socials .icon { width: 19px; height: 19px; }
.footer-mark { margin: clamp(70px, 9vw, 120px) 0 0; color: var(--text); }
.footer-mark__svg { width: 100%; height: auto; overflow: visible; }
.footer-mark__svg g { stroke-width: 3; }
.js .footer-mark[data-reveal] { opacity: 1; transform: none; }
.js .footer-mark path, .js .footer-mark g circle { stroke-dasharray: 1; stroke-dashoffset: 1.01; opacity: 0; transition: stroke-dashoffset 2.2s var(--ease), opacity .15s; }
.js .footer-mark path:nth-child(2) { transition-delay: .1s; }
.js .footer-mark path:nth-child(3) { transition-delay: .2s; }
.js .footer-mark path:nth-child(4) { transition-delay: .3s; }
.js .footer-mark path:nth-child(5) { transition-delay: .4s; }
.js .footer-mark path:nth-child(6) { transition-delay: .5s; }
.js .footer-mark g circle { transition-delay: .6s; }
.js .footer-mark.is-in path, .js .footer-mark.is-in g circle { stroke-dashoffset: 0; opacity: 1; }
.footer-mark .k-dot { transform-box: fill-box; transform-origin: center; }
.js .footer-mark .k-dot { transform: scale(0); transition: transform 1s var(--ease) 1.6s; }
.js .footer-mark.is-in .k-dot { transform: scale(1); }
.footer-disclosure { max-width: 100ch; margin: 36px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--dim); }
.footer-bottom {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
	margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--dim);
}
.to-top {
	display: inline-flex; align-items: center; gap: .5em; padding: 10px 16px; border-radius: 999px;
	border: 1px solid var(--line-2); background: none; color: var(--text); font-size: 13px;
	transition: background-color .3s, color .3s, border-color .3s;
}
.to-top:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.to-top .icon { width: 15px; height: 15px; }
@media (max-width: 900px) {
	.footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.footer-brand { grid-column: 1 / -1; }
}

/* =====================================================================
   16 · Unterseiten
   ================================================================== */
.page-hero { position: relative; isolation: isolate; padding: calc(var(--header-h) + var(--topbar-h) + clamp(70px, 10vw, 140px)) 0 clamp(40px, 5vw, 70px); }
.page-hero::before {
	content: ""; position: absolute; left: 50%; top: -40%; z-index: -1; width: min(110vw, 1200px); aspect-ratio: 1;
	transform: translateX(-50%); border-radius: 50%; pointer-events: none;
	background: radial-gradient(circle, rgba(var(--accent-rgb), .1), transparent 60%);
}
.page-hero .h1 { max-width: 16ch; margin-bottom: .35em; }
.page-hero .search-form { margin-top: 28px; }

/* Produktseite */
.product-hero { padding: calc(var(--header-h) + var(--topbar-h) + clamp(40px, 6vw, 80px)) 0 clamp(60px, 8vw, 110px); }
.product-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5.5vw, 100px); align-items: center; }
.product-stage {
	position: relative; overflow: hidden; aspect-ratio: 4 / 5;
	border-radius: clamp(22px, 2.6vw, 36px); border: 1px solid var(--line); background: var(--bg-3);
	transition: transform .8s var(--ease);
}
.product-stage > img, .product-stage > svg { width: 100%; height: 100%; object-fit: cover; }
.product-stage .card__badge { top: 20px; left: 20px; font-size: 12px; padding: 7px 12px; }
.crumbs { display: flex; flex-wrap: wrap; gap: .55em; margin-bottom: 26px; font-size: 13px; color: var(--dim); }
.crumbs a { color: var(--muted); transition: color .3s; }
.crumbs a:hover { color: var(--text); }
.product-title { margin: 0 0 .35em; font-size: clamp(2.5rem, 5.2vw, 4.8rem); line-height: .95; letter-spacing: -.055em; font-weight: 680; }
.product-lead { max-width: 46ch; color: var(--muted); font-size: 1.12rem; }
.price-block { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 30px 0; padding: 22px 0; border-block: 1px solid var(--line); }
.price-block__price { margin: 0; }
.price-block__price strong { font-size: clamp(2rem, 3.2vw, 2.8rem); font-weight: 650; letter-spacing: -.045em; }
.price-block__price s { margin-left: .5em; color: var(--dim); font-size: 1.1rem; }
.price-note { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--dim); }
.product-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.trust { display: grid; gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; }
.trust li { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 15px; }
.trust .icon { width: 19px; height: 19px; color: var(--accent); }
.disclosure-inline { margin: 26px 0 0; font-size: 12.5px; color: var(--dim); line-height: 1.6; }
.buybar {
	position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 800;
	display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 20px;
	border-radius: 999px; border: 1px solid var(--line-2); background: rgba(18, 18, 25, .82);
	-webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
	transform: translateY(160%); transition: transform .7s var(--ease);
}
.buybar.is-on { transform: none; }
.buybar__info { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.buybar__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
.buybar__price { font-size: 15px; }
@media (max-width: 900px) {
	.product-hero__grid { grid-template-columns: 1fr; }
	.buybar { display: flex; }
}

/* Artikel & Prosa */
.article__head { padding: calc(var(--header-h) + var(--topbar-h) + clamp(70px, 9vw, 130px)) var(--gutter) clamp(36px, 5vw, 60px); }
.article__head .h1 { font-size: clamp(2.5rem, 5.4vw, 4.8rem); }
.article__head .lead { margin-top: 1.4rem; }
.article__media { max-width: 1240px; margin: 0 auto clamp(40px, 6vw, 80px); padding-inline: var(--gutter); }
.article__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: clamp(18px, 2vw, 30px); }
.prose { font-size: clamp(1.04rem, 1.15vw, 1.14rem); line-height: 1.78; color: #d6d3cc; }
.prose > * { margin-top: 0; margin-bottom: 0; }
.prose > * + * { margin-top: 1.25em; }
.prose h2 { margin-top: 2.1em; color: var(--text); font-size: clamp(1.7rem, 2.8vw, 2.3rem); line-height: 1.1; }
.prose h3 { margin-top: 1.8em; color: var(--text); font-size: 1.4rem; line-height: 1.2; }
.prose a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), .55); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: text-decoration-color .3s; }
.prose a:hover { text-decoration-color: var(--accent); }
.prose a.btn, .prose .card a, .prose .drop a { text-decoration: none; }
.prose strong { color: var(--text); }
.prose img { border-radius: 16px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--accent); }
.prose blockquote {
	margin-inline: 0; padding: .2em 0 .2em 1.2em; border-left: 2px solid var(--accent);
	font-family: var(--serif); font-style: italic; font-size: 1.4em; line-height: 1.45; color: var(--text);
}
.prose code { padding: .15em .4em; border-radius: 6px; background: rgba(255, 255, 255, .07); font-family: var(--mono); font-size: .88em; }
.prose pre { overflow-x: auto; padding: 18px; border-radius: 14px; background: var(--bg-3); font-size: .9em; }
.prose hr { height: 1px; margin: 3em 0; border: 0; background: var(--line); }
.prose table { width: 100%; border-collapse: collapse; font-size: .95em; }
.prose th, .prose td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.prose figcaption, .wp-caption-text { margin-top: .7em; font-size: 13px; color: var(--dim); }
.prose .grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin-block: 2em; }
.prose .kuro-btn-wrap { margin-block: 1.6em; }
.prose .alignwide { width: min(1100px, 100vw - var(--gutter) * 2); max-width: none; margin-left: 50%; transform: translateX(-50%); }
.prose .alignfull { width: 100vw; max-width: none; margin-left: 50%; transform: translateX(-50%); }
.prose .wp-block-button__link { display: inline-block; padding: .85em 1.5em; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; }
.page-links { display: flex; gap: 8px; margin-top: 2em; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 48px; }
.tags a { padding: .45em .9em; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; color: var(--muted); }
.post-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 70px; }
.post-nav a { display: block; padding: 22px 24px; border-radius: var(--radius-sm); border: 1px solid var(--line); transition: border-color .3s, background-color .3s; }
.post-nav a:hover { border-color: rgba(var(--accent-rgb), .5); background: rgba(255, 255, 255, .02); }
.post-nav a:only-child:last-child { grid-column: 2; }
.post-nav span { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.post-nav strong { font-weight: 600; letter-spacing: -.02em; }
@media (max-width: 600px) { .post-nav { grid-template-columns: 1fr; } .post-nav a:only-child:last-child { grid-column: auto; } }

/* Paginierung */
.pagination { margin-top: 64px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pagination .page-numbers {
	display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 16px; border-radius: 999px;
	border: 1px solid var(--line-2); color: var(--muted); font-size: 14px; transition: color .3s, border-color .3s;
}
.pagination a.page-numbers:hover { color: var(--text); border-color: rgba(255, 255, 255, .4); }
.pagination .current { background: var(--text); border-color: var(--text); color: var(--bg); }

/* Formulare, Suche, Kommentare */
.search-form {
	position: relative; display: flex; align-items: center; gap: 8px; max-width: 560px; padding: 6px 6px 6px 18px;
	border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04);
}
.search-form:focus-within { border-color: rgba(var(--accent-rgb), .6); }
.search-form .icon { width: 18px; height: 18px; color: var(--muted); }
.search-form input { flex: 1; min-width: 0; padding: 0 6px; border: 0; background: none; outline: none; font-size: 16px; }
.comments { margin-top: 90px; padding-top: 50px; border-top: 1px solid var(--line); }
.comment-list { margin: 30px 0; padding: 0; list-style: none; }
.comment-list ol { list-style: none; padding-left: 24px; }
.comment-body { padding: 22px 0; border-bottom: 1px solid var(--line); }
.comment-meta { font-size: 13px; color: var(--dim); }
.comment-author .fn { font-style: normal; font-weight: 600; color: var(--text); }
.comment-content { margin-top: 10px; color: #d6d3cc; }
.reply a { font-size: 13px; color: var(--accent); }
.comment-form label { display: block; margin-bottom: 6px; font-size: 14px; color: var(--muted); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2);
	background: rgba(255, 255, 255, .04); color: var(--text); outline: none;
}
.comment-form input:focus, .comment-form textarea:focus { border-color: rgba(var(--accent-rgb), .6); }
.comment-form .submit { height: 50px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 600; }

/* 404 */
.e404 { display: grid; place-items: center; min-height: 100svh; padding: calc(var(--header-h) + 40px) var(--gutter) 60px; text-align: center; }
.e404__inner { max-width: 760px; }
.e404__num {
	position: relative; margin: 0 0 .1em; line-height: .8;
	font-size: clamp(8rem, 30vw, 22rem); font-weight: 820; letter-spacing: -.08em;
	color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .4);
}
.e404__num::before, .e404__num::after {
	content: attr(data-text); position: absolute; inset: 0; -webkit-text-stroke: 1.5px var(--accent);
	clip-path: inset(0 0 0 0); animation: kGlitch 3.2s steps(1) infinite;
}
.e404__num::after { -webkit-text-stroke-color: rgb(var(--violet-rgb)); animation-delay: -1.6s; }
@keyframes kGlitch {
	0%, 86%, 100% { transform: none; clip-path: inset(0 0 100% 0); }
	88% { transform: translate(-6px, 2px); clip-path: inset(20% 0 52% 0); }
	91% { transform: translate(6px, -2px); clip-path: inset(62% 0 12% 0); }
	94% { transform: translate(-3px, 0); clip-path: inset(40% 0 38% 0); }
}
.e404 .h2 { margin-bottom: .4em; }
.e404 .lead { margin: 0 auto 2.2rem; }
.e404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* =====================================================================
   17 · Effekte: Preloader, Vorhang, Cursor, Körnung, Toast
   ================================================================== */
.preloader {
	position: fixed; inset: 0; z-index: 10000; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
	background: var(--bg); clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease-io);
}
.js:not(.is-internal):not(.reduced-motion) .preloader { display: flex; }
.preloader.is-done { clip-path: inset(0 0 100% 0); }
.preloader__mark { width: 88px; height: 88px; color: var(--text); }
.preloader__mark path { stroke-dasharray: 1; stroke-dashoffset: 1.01; opacity: 0; animation: kDraw 1.2s var(--ease) both; }
.preloader__mark path:nth-child(2) { animation-delay: .3s; }
.preloader__mark path:nth-child(3) { animation-delay: .45s; }
.preloader__mark path:nth-child(4) { animation-delay: .6s; }
.preloader__mark .k-dot { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: kPop .7s var(--ease) 1s forwards; }
@keyframes kDraw { 0% { stroke-dashoffset: 1.01; opacity: 0; } 2% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes kPop { to { transform: scale(1); } }
.preloader__meta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.preloader__count { font-family: var(--mono); font-size: 12px; letter-spacing: .3em; color: var(--muted); font-variant-numeric: tabular-nums; }
.preloader__bar { display: block; width: 160px; height: 1px; overflow: hidden; background: var(--line-2); }
.preloader__bar span { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }

.curtain {
	position: fixed; inset: 0; z-index: 9990; display: grid; place-items: center; pointer-events: none;
	background: var(--bg-2); transform: translateY(100%);
}
.curtain__mark { width: 54px; height: 54px; color: var(--text); opacity: .9; }
.is-internal:not(.reduced-motion) .curtain { animation: kCurtainOut .9s var(--ease-io) .05s both; }
.is-leaving .curtain { animation: kCurtainIn .55s var(--ease-io) forwards !important; pointer-events: auto; }
@keyframes kCurtainOut { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes kCurtainIn { from { transform: translateY(100%); } to { transform: translateY(0); } }

.cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity .3s; mix-blend-mode: difference; }
.cursor-dot.is-on, .cursor-ring.is-on { opacity: 1; }
.cursor-dot::before { content: ""; position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; transition: transform .3s; }
.cursor-dot.is-hidden::before { transform: scale(0); }
.cursor-ring::before {
	content: ""; position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .75); transform: translate(-50%, -50%);
	transition: width .5s var(--ease), height .5s var(--ease), background-color .4s, border-color .4s;
}
.cursor-ring.is-hover::before { width: 70px; height: 70px; background: #fff; border-color: #fff; }
.cursor-ring.is-down::before { width: 28px; height: 28px; }
.cursor-ring.has-label { mix-blend-mode: normal; }
.cursor-ring.has-label::before { width: 96px; height: 96px; background: var(--accent); border-color: var(--accent); }
.cursor-label {
	position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0;
	transform: translate(-50%, -50%) scale(.5); font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; color: var(--on-accent);
	transition: opacity .3s, transform .5s var(--ease);
}
.cursor-ring.has-label .cursor-label { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.has-cursor body, .has-cursor a, .has-cursor button, .has-cursor label, .has-cursor [data-cursor] { cursor: none; }
.has-cursor input, .has-cursor textarea, .has-cursor select { cursor: text; }

.grain {
	position: fixed; inset: -10%; z-index: 9980; pointer-events: none; opacity: .055;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: kGrain 1.1s steps(6) infinite;
}
@keyframes kGrain {
	0%, 100% { transform: translate(0, 0); }
	20% { transform: translate(-4%, 3%); }
	40% { transform: translate(3%, -4%); }
	60% { transform: translate(-3%, 4%); }
	80% { transform: translate(4%, -2%); }
}

.toast {
	position: fixed; left: 50%; bottom: 28px; z-index: 9995; max-width: min(92vw, 520px);
	padding: 14px 20px; border-radius: 16px; border: 1px solid var(--line-2);
	background: rgba(18, 18, 25, .9); color: var(--text); font-size: 14px; line-height: 1.45;
	-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
	box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .8);
	transform: translate(-50%, 160%); transition: transform .6s var(--ease);
}
.toast::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.toast.is-on { transform: translate(-50%, 0); }

/* =====================================================================
   18 · Weniger Bewegung
   ================================================================== */
.reduced-motion [data-reveal], .reduced-motion [data-split] .c { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
	.js [data-reveal], .js [data-split] .c { opacity: 1; transform: none; }
	.grain { display: none; }
}