/* =====================================================================
 * KlickKiste v3.0.0 — main.css
 * KOMPLETT NEU cinematic 3D rewrite.
 *
 * 1. Tokens & resets
 * 2. Typography
 * 3. Layout primitives
 * 4. Scroll progress + glass header + mobile drawer + search overlay
 * 5. Cinematic hero (split-letter rotateX entrance + mouse parallax + sparkles)
 * 6. Section reveals (clip-path inset wipe)
 * 7. Cover story
 * 8. Trending tag pills
 * 9. Editor strip + popular grid
 * 10. Author strip
 * 11. Trust strip
 * 12. 4-up category grid with gradient numerals
 * 13. Newsletter stage + confetti burst
 * 14. Testimonials
 * 15. Pinterest embed
 * 16. Sister network
 * 17. Versprechen
 * 18. FAQ
 * 19. Anchor pitch
 * 20. Cards / pin-cards
 * 21. Single article reading view
 * 22. Squiggle dividers
 * 23. Footer
 * 24. News bar + mobile pin
 * 25. WP block / form / a11y
 * 26. Reduced motion
 * 27. Responsive breakpoints
 * ===================================================================== */

/* =========================== 1. Tokens & reset =========================== */
:root {
	--kk-accent: #b14e30;
	--kk-accent-dark: #8a3a21;
	--kk-deep: #041f1c;
	--kk-cream: #fdf5e7;
	--kk-highlight: #e9b461;

	--kk-ink: #041f1c;
	--kk-ink-soft: rgba(var(--kk-deep-rgb), .68);
	--kk-ink-mute: rgba(var(--kk-deep-rgb), .48);

	--kk-paper: #fdf5e7;
	--kk-paper-2: #faeed8;
	--kk-paper-3: #fae3c4;
	--kk-line: rgba(var(--kk-accent-rgb), .16);
	--kk-line-strong: rgba(var(--kk-accent-rgb), .32);

	--kk-shadow-sm: 0 4px 14px rgba(var(--kk-deep-rgb), .08);
	--kk-shadow-md: 0 16px 44px rgba(var(--kk-deep-rgb), .12);
	--kk-shadow-lg: 0 32px 80px rgba(var(--kk-deep-rgb), .18);
	--kk-shadow-deep: 0 48px 120px rgba(var(--kk-deep-rgb), .22);

	/* v4 — escape AI-default Inter+Playfair pair. Bricolage Grotesque
	 * (variable, modern grotesk with personality) for display, Manrope
	 * for body (clean, mobile-readable), Caveat as brand script ornament.
	 * Lora kept as supporting serif for editorial pull-quotes only. */
	--kk-display: "Bricolage Grotesque", "Cabinet Grotesk", "Söhne", -apple-system, system-ui, sans-serif;
	--kk-sans:    "Manrope", "Outfit", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--kk-script:  "Caveat", "Reenie Beanie", "Brush Script MT", cursive;
	--kk-mono:    ui-monospace, "JetBrains Mono", SFMono-Regular, monospace;
	/* --kk-serif aliased to --kk-display so every legacy "serif" headline
	 * automatically gets the new sans-display. True serif reserved for the
	 * .kk-quote / pull-quote class only (Lora explicitly declared there). */
	--kk-serif:   "Bricolage Grotesque", "Cabinet Grotesk", "Söhne", -apple-system, system-ui, sans-serif;
	--kk-true-serif: "Lora", "EB Garamond", Georgia, serif;

	/* v4 — radius scale collapsed from 7 ad-hoc values to 3 tokens.
	 * Cards = lg (20px). Buttons + pills = pill. Small UI = sm. */
	--kk-radius-sm:    8px;
	--kk-radius-md:   14px;  /* kept for backward-compat — prefer -sm or -lg */
	--kk-radius-lg:   20px;
	--kk-radius-pill: 999px;

	--kk-shell-x: clamp(20px, 5vw, 64px);
	--kk-shell-max: 1280px;
	--kk-narrow-max: 720px;

	--kk-ease: cubic-bezier(.16, 1, .3, 1);
	--kk-ease-soft: cubic-bezier(.4, 0, .2, 1);

	--kk-mx: 0;
	--kk-my: 0;
	--kk-scroll: 0;

	/* v5.5 Brand-Preset-Pipeline: RGB-Triplets speisen Glows/Linien/
	 * Schatten, Töne die Farbkacheln — Presets überschreiben alles. */
	--kk-accent-rgb: 177, 78, 46;
	--kk-highlight-rgb: 233, 180, 97;
	--kk-deep-rgb: 4, 31, 28;
	--kk-tone: #52685d;
	--kk-tone-2: #3d4f46;
	--kk-highlight-2: #c98e3e;
	/* v6: Karten-/Eingabeflächen als Token — ermöglicht Dark-Presets */
	--kk-card: #ffffff;
}

* { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Hard viewport seal: nothing (ads, embeds, breakout cards) may create
	 * sideways scroll. hidden = fallback for browsers without clip. */
	overflow-x: hidden;
	overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	background: var(--kk-paper);
	color: var(--kk-ink);
	font-family: var(--kk-sans);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	overflow-x: clip;
	background-image:
		radial-gradient(1100px 700px at 80% -8%, rgba(var(--kk-accent-rgb), .12), transparent 60%),
		radial-gradient(900px 600px at -10% 18%, rgba(var(--kk-highlight-rgb), .08), transparent 60%);
	background-attachment: fixed;
}

a {
	color: var(--kk-accent-dark);
	text-decoration: none;
	transition: color .25s var(--kk-ease);
}
a:hover, a:focus-visible { color: var(--kk-accent); }
a:focus-visible {
	outline: 2px solid var(--kk-accent);
	outline-offset: 3px;
	border-radius: var(--kk-radius-sm);
}

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

button, input, select, textarea {
	font: inherit;
	color: inherit;
}

button { cursor: pointer; }

::selection { background: rgba(var(--kk-accent-rgb), .28); color: var(--kk-deep); }

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px; width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

.skip-link {
	background: var(--kk-deep);
	color: #fff;
	left: 50%;
	padding: 12px 20px;
	position: absolute;
	top: -200px;
	transform: translateX(-50%);
	transition: top .2s var(--kk-ease);
	z-index: 9999;
	border-radius: 0 0 var(--kk-radius-sm) var(--kk-radius-sm);
}
.skip-link:focus { top: 0; color: #fff; }

/* =========================== 2. Typography =========================== */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--kk-display);
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.08;
	margin: 0 0 .6em;
	color: var(--kk-deep);
	text-wrap: balance;          /* v4 — mandatory per impeccable §4.1 */
}
h1 { font-size: clamp(2.2rem, 5.4vw, 4.2rem); }   /* capped under 6rem */
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
h4 { font-size: 1.12rem; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
p, li { max-width: 75ch; }

.kk-eyebrow,
.kk-section-kicker {
	font-family: var(--kk-sans);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--kk-accent-dark);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
}
.kk-eyebrow::before {
	content: "";
	display: inline-block;
	width: 28px;
	height: 2px;
	background: var(--kk-accent);
	border-radius: var(--kk-radius-sm);
}

.kk-script {
	font-family: var(--kk-script);
	font-weight: 700;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	color: var(--kk-accent);
	display: block;
	line-height: 1;
}

.kk-section-head {
	max-width: 760px;
	margin: 0 auto 48px;
	text-align: center;
}
.kk-section-head h2 { margin: 0 0 .5em; }
.kk-section-head p { color: var(--kk-ink-soft); font-size: 1.06rem; }

/* =========================== 3. Layout =========================== */
.kk-main {
	display: block;
	min-height: 60vh;
	padding-top: 88px;
}
.kk-home-active .kk-main { padding-top: 0; }
.kk-home-wrap { display: block; }

.kk-shell {
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	padding: 0 var(--kk-shell-x);
}

.kk-scene {
	position: relative;
	padding: clamp(64px, 9vw, 120px) var(--kk-shell-x);
	max-width: 100%;
}
.kk-scene > * { position: relative; z-index: 1; }
.kk-scene .layer { position: absolute; inset: 0; pointer-events: none; }
.kk-scene .layer.depth-4 {
	position: relative;
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	z-index: 5;
	pointer-events: auto;
}
.kk-blob {
	position: absolute;
	width: 360px; height: 360px;
	border-radius: 50%;
	filter: blur(80px);
	opacity: .42;
	pointer-events: none;
}
.kk-blob-a { background: radial-gradient(circle, var(--kk-accent) 0%, transparent 70%); top: -10%; left: -10%; }
.kk-blob-c { background: radial-gradient(circle, var(--kk-highlight) 0%, transparent 70%); bottom: -10%; right: -10%; opacity: .3; }
.kk-blob-pink { background: radial-gradient(circle, #d98e6a 0%, transparent 70%); }

/* =========================== 4. Header / Drawer / Search — v3.3 cinematic =========================== */
.kk-progress {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: rgba(var(--kk-accent-rgb), .08);
	z-index: 1001;
	pointer-events: none;
}
.kk-progress-fill {
	display: block;
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--kk-accent) 0%, var(--kk-accent-dark) 55%, var(--kk-highlight) 100%);
	box-shadow: 0 1px 12px rgba(var(--kk-accent-rgb), .6);
}

.kk-site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	background: rgba(253, 245, 234, .72);
	-webkit-backdrop-filter: blur(20px) saturate(1.5);
	backdrop-filter: blur(20px) saturate(1.5);
	border-bottom: 1px solid transparent;
	transition: transform .35s var(--kk-ease), background .25s var(--kk-ease), border-color .25s var(--kk-ease), box-shadow .25s var(--kk-ease);
	will-change: transform;
}
.kk-site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(var(--kk-accent-rgb), .04), transparent);
	pointer-events: none;
	opacity: 0;
	transition: opacity .4s var(--kk-ease);
}
.kk-site-header.is-scrolled {
	background: rgba(253, 245, 234, .92);
	border-bottom-color: var(--kk-line);
	box-shadow: 0 8px 30px rgba(var(--kk-deep-rgb), .08);
}
.kk-site-header.is-scrolled::before { opacity: 1; }
.kk-site-header.is-hidden { transform: translateY(-110%); }

.kk-header-shell {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 28px);
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	padding: 14px var(--kk-shell-x);
	transition: padding .25s var(--kk-ease);
	position: relative;
	z-index: 1;
}
.kk-site-header.is-scrolled .kk-header-shell { padding-top: 9px; padding-bottom: 9px; }

.kk-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--kk-deep);
	font-family: var(--kk-serif);
	font-weight: 800;
	font-size: 1.45rem;
	letter-spacing: -.015em;
	flex-shrink: 0;
	transform-style: preserve-3d;
	perspective: 800px;
	transition: transform .35s var(--kk-ease), color .25s var(--kk-ease);
}
.kk-brand:hover { color: var(--kk-accent-dark); transform: translateY(-1px); }
.kk-brand-img { max-height: 42px; width: auto; display: block; }
.kk-site-header.is-scrolled .kk-brand-img { max-height: 34px; }
.kk-brand-glyph {
	display: inline-grid;
	place-items: center;
	width: 46px; height: 46px;
	border-radius: var(--kk-radius-md);
	background:
		radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .35), transparent 55%),
		linear-gradient(135deg, var(--kk-accent) 0%, var(--kk-accent-dark) 100%);
	color: #fff;
	font-weight: 900;
	font-size: 1.4rem;
	letter-spacing: 0;
	box-shadow:
		0 10px 28px rgba(var(--kk-accent-rgb), .4),
		inset 0 1px 0 rgba(255, 255, 255, .35),
		inset 0 -1px 0 rgba(0, 0, 0, .08);
	transition: transform .45s var(--kk-ease), box-shadow .35s var(--kk-ease), width .25s var(--kk-ease), height .25s var(--kk-ease);
	will-change: transform;
}
.kk-brand:hover .kk-brand-glyph {
	transform: rotate3d(1, 1, 0, 18deg) scale(1.08);
	box-shadow:
		0 16px 38px rgba(var(--kk-accent-rgb), .55),
		inset 0 1px 0 rgba(255, 255, 255, .45),
		inset 0 -1px 0 rgba(0, 0, 0, .12);
}
.kk-site-header.is-scrolled .kk-brand-glyph {
	width: 38px; height: 38px;
	border-radius: var(--kk-radius-md);
	font-size: 1.15rem;
}
.kk-brand-name { font-size: clamp(1.15rem, 1.6vw, 1.4rem); white-space: nowrap; }
.kk-site-header.is-scrolled .kk-brand-name { font-size: 1.05rem; }

.kk-nav {
	display: flex;
	justify-content: center;
	flex: 1 1 auto;
	min-width: 0;
}
.kk-nav-list {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	flex-wrap: nowrap !important;
	white-space: nowrap;
}
.kk-nav-list li {
	position: relative;
	flex: 0 0 auto;
	white-space: nowrap;
}
.kk-nav-list a,
.kk-nav-list a span,
.kk-nav-list li a {
	white-space: nowrap !important;
	text-wrap: nowrap !important;
	word-break: keep-all !important;
}
.kk-nav-list a {
	display: inline-flex;
	align-items: center;
	padding: 10px clamp(9px, 1.2vw, 16px);
	color: var(--kk-deep);
	font-weight: 500;
	font-size: clamp(.82rem, .95vw, .94rem);
	line-height: 1.2;
	border-radius: var(--kk-radius-pill);
	position: relative;
	overflow: hidden;
	transition: color .25s var(--kk-ease);
}
.kk-nav-list a::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(var(--kk-accent-rgb), .14), rgba(138, 58, 33, .08));
	border-radius: inherit;
	transform: scale(0.6);
	opacity: 0;
	transition: transform .35s var(--kk-ease), opacity .25s var(--kk-ease);
	pointer-events: none;
}
.kk-nav-list a::after {
	content: "";
	position: absolute;
	left: 50%; bottom: 5px;
	transform: translateX(-50%) scaleX(0);
	transform-origin: center;
	height: 2px; width: 22px;
	background: linear-gradient(90deg, var(--kk-accent), var(--kk-accent-dark));
	border-radius: var(--kk-radius-sm);
	transition: transform .35s var(--kk-ease);
}
.kk-nav-list a:hover::before,
.kk-nav-list a[aria-current="page"]::before { transform: scale(1); opacity: 1; }
.kk-nav-list a:hover::after,
.kk-nav-list a[aria-current="page"]::after { transform: translateX(-50%) scaleX(1); }
.kk-nav-list a:hover { color: var(--kk-accent-dark); }
.kk-nav-list a > span { position: relative; z-index: 1; }

.kk-header-tools {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.kk-tool-btn {
	display: inline-grid;
	place-items: center;
	width: 42px; height: 42px;
	background: transparent;
	border: 1px solid var(--kk-line);
	border-radius: 50%;
	color: var(--kk-deep);
	cursor: pointer;
	transition: background .2s var(--kk-ease), border-color .2s var(--kk-ease), transform .25s var(--kk-ease), color .2s var(--kk-ease);
}
.kk-tool-btn:hover {
	background: rgba(var(--kk-accent-rgb), .1);
	border-color: var(--kk-line-strong);
	color: var(--kk-accent-dark);
	transform: translateY(-2px) scale(1.05);
}
.kk-tool-btn:active { transform: translateY(0) scale(.98); }

.kk-header-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	background: linear-gradient(135deg, var(--kk-accent) 0%, var(--kk-accent-dark) 100%);
	color: #fff;
	font-weight: 600;
	font-size: .92rem;
	border-radius: var(--kk-radius-pill);
	box-shadow:
		0 8px 24px rgba(var(--kk-accent-rgb), .35),
		inset 0 1px 0 rgba(255, 255, 255, .25),
		inset 0 -1px 0 rgba(0, 0, 0, .08);
	transition: transform .3s var(--kk-ease), box-shadow .3s var(--kk-ease);
	white-space: nowrap;
	position: relative;
	overflow: hidden;
}
.kk-header-cta::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: -120%;
	width: 60%;
	background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .35), transparent);
	transform: skewX(-18deg);
	transition: left .65s var(--kk-ease);
	pointer-events: none;
}
.kk-header-cta:hover::before { left: 130%; }
.kk-header-cta:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow:
		0 16px 40px rgba(var(--kk-accent-rgb), .55),
		inset 0 1px 0 rgba(255, 255, 255, .4);
}
.kk-header-cta:active { transform: translateY(0); }
.kk-header-cta > span,
.kk-header-cta > svg { position: relative; z-index: 1; }

.kk-burger {
	display: none;
	width: 42px; height: 42px;
	background: transparent;
	border: 1px solid var(--kk-line);
	border-radius: 50%;
	position: relative;
	cursor: pointer;
	transition: background .2s var(--kk-ease), border-color .2s var(--kk-ease);
}
.kk-burger:hover { background: rgba(var(--kk-accent-rgb), .08); border-color: var(--kk-line-strong); }
.kk-burger span {
	position: absolute;
	left: 12px; right: 12px;
	height: 2px;
	background: var(--kk-deep);
	border-radius: var(--kk-radius-sm);
	transition: transform .35s var(--kk-ease), opacity .25s var(--kk-ease);
}
.kk-burger span:nth-child(1) { top: 14px; }
.kk-burger span:nth-child(2) { top: 20px; }
.kk-burger span:nth-child(3) { top: 26px; }
.kk-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.kk-burger.is-open span:nth-child(2) { opacity: 0; }
.kk-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Breakpoint: 7-item nav doesn't fit < 1100px → switch to drawer */
@media (max-width: 1100px) {
	.kk-nav { display: none; }
	.kk-burger { display: inline-block; }
}
@media (max-width: 720px) {
	.kk-header-shell { padding: 12px var(--kk-shell-x); gap: 10px; }
	.kk-header-cta span { display: none; }
	.kk-header-cta { padding: 0; width: 42px; height: 42px; justify-content: center; gap: 0; }
	.kk-brand-name { display: none; }
	.kk-brand-glyph { width: 42px; height: 42px; font-size: 1.25rem; border-radius: var(--kk-radius-md); }
}
@media (max-width: 480px) {
	.kk-header-tools { gap: 6px; }
	.kk-tool-btn, .kk-burger, .kk-header-cta { width: 40px; height: 40px; }
	.kk-tool-btn svg { width: 18px; height: 18px; }
}

.kk-mobile-drawer {
	position: fixed;
	top: 0; right: 0;
	width: min(380px, 92vw);
	height: 100dvh;
	background: linear-gradient(180deg, var(--kk-paper) 0%, var(--kk-paper-2) 100%);
	border-left: 1px solid var(--kk-line);
	box-shadow: -32px 0 60px rgba(var(--kk-deep-rgb), .25);
	transform: translateX(100%);
	transition: transform .5s cubic-bezier(.65, 0, .35, 1);
	z-index: 1100;
	display: flex;
	flex-direction: column;
	padding: 22px 22px max(22px, env(safe-area-inset-bottom)) 22px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}
.kk-mobile-drawer::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 100% 0%, rgba(var(--kk-accent-rgb), .12), transparent 50%),
		radial-gradient(circle at 0% 100%, rgba(var(--kk-highlight-rgb), .08), transparent 45%);
	pointer-events: none;
	z-index: 0;
}
.kk-mobile-drawer > * { position: relative; z-index: 1; }
.kk-mobile-drawer.is-open { transform: translateX(0); }
.kk-drawer-head {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--kk-line);
}
.kk-drawer-brand {
	font-family: var(--kk-serif);
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--kk-deep);
	letter-spacing: -.01em;
}
.kk-drawer-close {
	width: 42px; height: 42px;
	background: transparent;
	border: 1px solid var(--kk-line);
	border-radius: 50%;
	display: inline-grid; place-items: center;
	color: var(--kk-deep);
	cursor: pointer;
	transition: background .2s var(--kk-ease), border-color .2s var(--kk-ease), transform .35s var(--kk-ease);
}
.kk-drawer-close:hover { background: rgba(var(--kk-accent-rgb), .08); border-color: var(--kk-line-strong); transform: rotate(90deg); }
.kk-drawer-list {
	list-style: none;
	padding: 0; margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.kk-drawer-list li {
	opacity: 0;
	transform: translateX(28px);
	transition: opacity .4s var(--kk-ease), transform .45s cubic-bezier(.16, 1, .3, 1);
	transition-delay: calc(var(--kk-i, 0) * 50ms);
}
.kk-mobile-drawer.is-open .kk-drawer-list li {
	opacity: 1;
	transform: translateX(0);
}
.kk-drawer-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 16px;
	min-height: 56px;
	font-family: var(--kk-serif);
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--kk-deep);
	border-radius: var(--kk-radius-md);
	transition: background .25s var(--kk-ease), color .25s var(--kk-ease), padding-left .3s var(--kk-ease);
}
.kk-drawer-list a::after {
	content: "→";
	font-family: var(--kk-sans);
	font-size: 1rem;
	color: var(--kk-accent);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .25s var(--kk-ease), transform .25s var(--kk-ease);
}
.kk-drawer-list a:hover,
.kk-drawer-list a:focus {
	background: rgba(255, 255, 255, .6);
	color: var(--kk-accent-dark);
	padding-left: 24px;
}
.kk-drawer-list a:hover::after,
.kk-drawer-list a:focus::after { opacity: 1; transform: translateX(0); }
.kk-drawer-list a[aria-current="page"] { background: rgba(var(--kk-accent-rgb), .08); color: var(--kk-accent-dark); }
.kk-drawer-foot {
	margin-top: auto;
	padding-top: 22px;
	border-top: 1px solid var(--kk-line);
}
.kk-drawer-cta {
	display: block;
	text-align: center;
	padding: 16px 20px;
	min-height: 52px;
	background: linear-gradient(135deg, var(--kk-accent) 0%, var(--kk-accent-dark) 100%);
	color: #fff;
	border-radius: var(--kk-radius-pill);
	font-weight: 700;
	font-size: 1rem;
	box-shadow:
		0 10px 28px rgba(var(--kk-accent-rgb), .4),
		inset 0 1px 0 rgba(255, 255, 255, .25);
	transition: transform .3s var(--kk-ease), box-shadow .3s var(--kk-ease);
}
.kk-drawer-cta:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow:
		0 16px 38px rgba(var(--kk-accent-rgb), .55),
		inset 0 1px 0 rgba(255, 255, 255, .4);
}

.kk-drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(var(--kk-deep-rgb), .55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s var(--kk-ease);
	z-index: 1050;
}
.kk-drawer-backdrop.is-visible { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
	.kk-brand-glyph,
	.kk-tool-btn,
	.kk-header-cta,
	.kk-drawer-cta,
	.kk-drawer-close { transition: none !important; }
	.kk-brand:hover .kk-brand-glyph { transform: none; }
	.kk-header-cta::before { display: none; }
	.kk-mobile-drawer { transition: opacity .2s linear; }
}

.kk-search-overlay {
	position: fixed;
	inset: 0;
	background: rgba(var(--kk-deep-rgb), .92);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s var(--kk-ease);
	z-index: 1200;
	display: grid;
	place-items: center;
	padding: var(--kk-shell-x);
}
.kk-search-overlay.is-open { opacity: 1; pointer-events: auto; }
.kk-search-close {
	position: absolute;
	top: 24px; right: 24px;
	width: 44px; height: 44px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 50%;
	color: #fff;
}
.kk-search-shell {
	max-width: 640px;
	width: 100%;
	color: #fff;
	transform: translateY(20px);
	transition: transform .45s var(--kk-ease);
}
.kk-search-overlay.is-open .kk-search-shell { transform: translateY(0); }
.kk-search-shell .kk-eyebrow { color: var(--kk-highlight); }
.kk-search-shell .kk-eyebrow::before { background: var(--kk-highlight); }
.kk-search-shell .search-form { display: flex; gap: 10px; margin: 12px 0 20px; }
.kk-search-shell .search-field {
	flex: 1;
	background: transparent;
	border: none;
	border-bottom: 2px solid rgba(255, 255, 255, .35);
	color: #fff;
	font-family: var(--kk-serif);
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	padding: 12px 0;
	outline: none;
	transition: border-color .25s var(--kk-ease);
}
.kk-search-shell .search-field:focus { border-bottom-color: var(--kk-highlight); }
.kk-search-shell .search-field::placeholder { color: rgba(255, 255, 255, .4); }
.kk-search-shell .search-submit {
	padding: 12px 22px;
	background: var(--kk-highlight);
	color: var(--kk-deep);
	border: none;
	border-radius: var(--kk-radius-pill);
	font-weight: 700;
}
.kk-search-hint { color: rgba(255, 255, 255, .6); font-size: .92rem; }
.kk-kbd {
	display: inline-block;
	padding: 2px 8px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: var(--kk-radius-sm);
	font-family: ui-monospace, SFMono-Regular, monospace;
	font-size: .82rem;
}

/* =========================== 5. Hero — v4 asymmetric editorial =========================== */
.kk-hero {
	position: relative;
	min-height: min(720px, 92dvh);
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5vw, 80px);
	overflow: hidden;
	padding: 96px var(--kk-shell-x) 64px;
	background: var(--kk-paper);
}
.kk-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(800px 480px at 88% 18%, rgba(var(--kk-highlight-rgb), .12), transparent 60%),
		radial-gradient(700px 500px at 4% 92%, rgba(217, 142, 106, .10), transparent 55%);
	pointer-events: none;
	z-index: 0;
}
@media (max-width: 900px) {
	.kk-hero { grid-template-columns: 1fr; padding: 88px var(--kk-shell-x) 48px; min-height: auto; gap: 36px; }
}

.kk-hero-bg { display: none; }

.kk-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 640px;
	text-align: left;
}

.kk-hero-collage {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	align-self: stretch;
	min-height: 460px;
}
.kk-hero-collage-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--kk-radius-lg);
	background: var(--kk-paper-3);
	box-shadow: 0 24px 60px rgba(var(--kk-deep-rgb), .14);
	transition: transform .35s var(--kk-ease);
}
.kk-hero-collage-card img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.kk-hero-collage-card:nth-child(1) { transform: rotate(-2.5deg) translateY(8px); }
.kk-hero-collage-card:nth-child(2) { transform: rotate(1.5deg) translateY(-12px); }
.kk-hero-collage-card:nth-child(3) { transform: rotate(2deg) translateY(0); grid-column: span 2; max-height: 220px; }
.kk-hero-collage-card:hover { transform: rotate(0) translateY(0) scale(1.02); }
@media (max-width: 900px) {
	.kk-hero-collage { min-height: 300px; }
}

.kk-hero-eyebrow {
	font-family: var(--kk-script);
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	color: var(--kk-accent-dark);
	display: inline-block;
	margin-bottom: 14px;
	line-height: 1;
}
.kk-hero-title {
	font-family: var(--kk-display);
	font-weight: 800;
	font-size: clamp(2.4rem, 5.6vw, 5.6rem);
	line-height: 1.04;
	letter-spacing: -.035em;
	color: var(--kk-deep);
	margin: 0 0 24px;
	text-wrap: balance;
}
.kk-hero-title em,
.kk-hero-title .kk-emphasis {
	font-style: italic;
	font-family: var(--kk-display);
	color: var(--kk-accent-dark);
	padding-bottom: .08em;
}
.kk-hero-title .kk-word { display: inline; opacity: 1; transform: none; }
.kk-hero-title.is-revealed .kk-word { opacity: 1; transform: none; }

.kk-underline {
	position: relative;
	display: inline-block;
	color: var(--kk-accent-dark);
	font-style: italic;
	font-family: var(--kk-display);
}
.kk-underline::after {
	content: "";
	position: absolute;
	left: -.05em; right: -.05em;
	bottom: .04em;
	height: .42em;
	background: var(--kk-highlight);
	opacity: .55;
	z-index: -1;
	border-radius: var(--kk-radius-sm);
	transform: skewX(-4deg);
}

.kk-hero-sub {
	max-width: 52ch;
	margin: 0 0 32px;
	font-size: clamp(1rem, 1.2vw, 1.15rem);
	line-height: 1.55;
	color: var(--kk-deep);
	opacity: .82;
	text-wrap: pretty;
}
.kk-hero-ctas {
	display: inline-flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* Kill sparkles + parallax + color-cycle motion soup — gate behind opt-in class */
.kk-sparkle-deco { display: none; }
.kk-anim-color-cycle { animation: none !important; color: var(--kk-accent-dark); }

@media (prefers-reduced-motion: reduce) {
	.kk-hero-collage-card { transition: none; }
	.kk-hero-collage-card:nth-child(1),
	.kk-hero-collage-card:nth-child(2),
	.kk-hero-collage-card:nth-child(3) { transform: none; }
}

.kk-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--kk-radius-pill);
	font-weight: 600;
	font-size: 1rem;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: transform .25s var(--kk-ease), box-shadow .25s var(--kk-ease), background .25s var(--kk-ease), color .25s var(--kk-ease);
	will-change: transform;
}
.kk-btn-pill, .kk-cta-primary {
	background: linear-gradient(135deg, var(--kk-accent) 0%, var(--kk-accent-dark) 100%);
	color: #fff;
	box-shadow: 0 14px 38px rgba(var(--kk-accent-rgb), .42);
}
.kk-cta-primary:hover, .kk-btn-pill:hover {
	color: #fff;
	box-shadow: 0 20px 50px rgba(var(--kk-accent-rgb), .56);
}
.kk-btn-ghost, .kk-cta-ghost {
	background: rgba(255, 255, 255, .7);
	color: var(--kk-deep);
	border: 1px solid var(--kk-line-strong);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	padding: 14px 28px;
}
.kk-btn-ghost:hover, .kk-cta-ghost:hover {
	background: var(--kk-card);
	color: var(--kk-accent-dark);
}
.kk-btn-light {
	background: var(--kk-card);
	color: var(--kk-deep);
	box-shadow: var(--kk-shadow-md);
}
.kk-btn-light:hover { color: var(--kk-accent-dark); }

/* =========================== 6. Reveal =========================== */
.kk-reveal {
	opacity: 0;
	clip-path: inset(4% 0 4% 0 round 4px);
	transform: translateY(36px);
	transition: opacity .9s var(--kk-ease), clip-path .9s var(--kk-ease), transform .9s var(--kk-ease);
	will-change: opacity, clip-path, transform;
}
.kk-reveal.is-revealed {
	opacity: 1;
	clip-path: inset(0 round 4px);
	transform: translateY(0);
}

/* =========================== 7. Cover story =========================== */
.kk-cover-story {
	position: relative;
	margin: clamp(40px, 7vw, 90px) auto;
	max-width: 1320px;
	min-height: 540px;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	display: grid;
	place-items: end start;
	color: #fff;
	padding: clamp(40px, 6vw, 80px);
	background: linear-gradient(135deg, var(--kk-deep) 0%, var(--kk-accent-dark) 100%);
	box-shadow: var(--kk-shadow-deep);
	isolation: isolate;
}
.kk-cover-story h1, .kk-cover-story h2, .kk-cover-story p { color: inherit; }
.kk-cover-story-img {
	position: absolute; inset: -8%;
	background-size: cover;
	background-position: center;
	opacity: .55;
	z-index: 0;
	transform: scale(1.06);
	transition: transform 1.6s var(--kk-ease);
	will-change: transform;
}
.kk-cover-story:hover .kk-cover-story-img { transform: scale(1.12); }
.kk-cover-story-gradient {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(var(--kk-deep-rgb), .15) 0%, rgba(var(--kk-deep-rgb), .55) 50%, rgba(var(--kk-deep-rgb), .9) 100%);
	z-index: 1;
}
.kk-cover-story-body {
	position: relative;
	z-index: 4;
	max-width: 720px;
}
.kk-cover-badge {
	display: inline-block;
	padding: 6px 14px;
	background: var(--kk-highlight);
	color: var(--kk-deep);
	border-radius: var(--kk-radius-pill);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .04em;
	margin-bottom: 14px;
}
.kk-cover-cat {
	display: inline-block;
	padding: 4px 12px;
	margin-left: 8px;
	border: 1px solid rgba(255, 255, 255, .35);
	color: #fff;
	border-radius: var(--kk-radius-pill);
	font-size: .82rem;
}
.kk-cover-title {
	font-size: clamp(2rem, 4.6vw, 3.4rem);
	color: #fff;
	margin-bottom: 18px;
}
.kk-cover-excerpt {
	font-size: 1.1rem;
	color: rgba(255, 255, 255, .82);
	margin-bottom: 26px;
}
.kk-cover-story .kk-cta-primary { color: #fff; }

/* =========================== 8. Trending =========================== */
.kk-trending {
	padding: clamp(20px, 4vw, 36px) var(--kk-shell-x);
}
.kk-trending-inner {
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: center;
}
.kk-trending-label {
	color: var(--kk-ink-soft);
	font-weight: 600;
	margin-right: 8px;
}
.kk-pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	background: linear-gradient(135deg, var(--kk-accent) 0%, var(--kk-accent-dark) 100%);
	color: #fff;
	border-radius: var(--kk-radius-pill);
	font-weight: 500;
	font-size: .92rem;
	transition: transform .25s var(--kk-ease), box-shadow .25s var(--kk-ease);
	box-shadow: 0 6px 16px rgba(var(--kk-accent-rgb), .28);
}
.kk-pill:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 14px 30px rgba(var(--kk-accent-rgb), .42); }
.kk-pill-ghost {
	background: rgba(255, 255, 255, .85);
	color: var(--kk-accent-dark);
	border: 1px solid var(--kk-line-strong);
	box-shadow: var(--kk-shadow-sm);
}
.kk-pill-ghost:hover { color: var(--kk-accent-dark); background: var(--kk-card); }

/* =========================== 9. Editor strip & popular =========================== */
.kk-editor-strip,
.kk-popular {
	padding: clamp(40px, 6vw, 80px) var(--kk-shell-x);
}
.kk-editor-strip .kk-section-head,
.kk-popular .kk-section-head { text-align: center; }
.kk-editor-strip-grid,
.kk-popular-grid {
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 28px;
}

/* =========================== 10. Author strip (editorial masthead) =========================== */
.kk-author-strip {
	border-top: 1px solid var(--kk-line);
	border-bottom: 1px solid var(--kk-line);
	padding: clamp(24px, 4vw, 48px) var(--kk-shell-x);
	background: var(--kk-paper);
}
.kk-author-strip-inner {
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: clamp(20px, 3vw, 40px);
	flex-wrap: wrap;
}
.kk-author-strip .kk-author-photo {
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--kk-paper-3);
	display: block;
	border: 0;
	transition: transform .35s var(--kk-ease);
}
.kk-author-strip .kk-author-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.kk-author-strip .kk-author-photo-initial {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--kk-accent), var(--kk-accent-dark));
	color: #fff;
	font-family: var(--kk-serif);
	font-weight: 800;
	font-size: 2rem;
}
.kk-author-strip .kk-author-photo:hover { transform: scale(1.04); }
.kk-author-signature {
	font-family: var(--kk-script);
	font-size: clamp(2rem, 3.4vw, 2.8rem);
	color: var(--kk-accent-dark);
	line-height: 1;
	margin: 0;
}
.kk-author-strip .kk-author-bio {
	flex: 1 1 280px;
	margin: 0;
	font-size: .98rem;
	color: var(--kk-deep);
	opacity: .82;
	max-width: 60ch;
	line-height: 1.55;
}
.kk-author-strip .kk-author-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--kk-accent-dark);
	font-weight: 600;
	font-size: .95rem;
	border-bottom: 2px solid transparent;
	transition: border-color .25s var(--kk-ease);
}
.kk-author-strip .kk-author-link:hover { border-bottom-color: var(--kk-accent-dark); }
@media (max-width: 720px) {
	.kk-author-strip-inner {
		flex-direction: column;
		text-align: center;
		align-items: center;
		gap: 14px;
	}
	/* In column direction `flex-basis: 280px` becomes the item's main-size
	 * (height) which created a 280px void below the signature. Reset to
	 * auto + cap natural width so bio sits tight against signature. */
	.kk-author-strip .kk-author-bio {
		flex: 0 1 auto;
		max-width: 38ch;
		font-size: 1rem;
		opacity: .92;
	}
	.kk-author-strip .kk-author-photo {
		width: 96px;
		height: 96px;
	}
	.kk-author-signature {
		font-size: clamp(2.4rem, 9vw, 3.2rem);
	}
	.kk-author-strip .kk-author-link {
		font-size: 1rem;
	}
}
@media (prefers-reduced-motion: reduce) {
	.kk-author-strip .kk-author-photo { transition: none; }
	.kk-author-strip .kk-author-photo:hover { transform: none; }
}

/* =========================== 11. Trust strip ===========================
 * Audit P0 #5 redesign: relocated out of hero flow and re-shaped as an
 * inline icon-row promise band. Sits between cover-story and trending
 * tag cloud. Four signals; each = 24x24 SVG + one-line label. Wraps on
 * narrow viewports. Static (no motion needed).
 */
.kk-trust-strip {
	background: var(--kk-paper-3);
	padding: clamp(28px, 4vw, 48px) var(--kk-shell-x);
	border-top: 1px solid var(--kk-line);
	border-bottom: 1px solid var(--kk-line);
}
.kk-trust-row {
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: clamp(24px, 4vw, 48px);
	list-style: none;
	padding: 0;
}
.kk-trust-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--kk-sans);
	font-size: .95rem;
	color: var(--kk-deep);
}
.kk-trust-icon {
	width: 24px;
	height: 24px;
	color: var(--kk-accent-dark);
	flex-shrink: 0;
}

/* =========================== 12. Pinterest masonry category grid =========================== */
.kk-cat-masonry {
	padding: clamp(60px, 8vw, 100px) var(--kk-shell-x);
}
.kk-cat-masonry-grid {
	max-width: 1320px;
	margin: 0 auto;
	column-count: 2;
	column-gap: 16px;
}
@media (min-width: 720px) {
	.kk-cat-masonry-grid { column-count: 3; }
}
.kk-cat-tile {
	display: block;
	position: relative;
	break-inside: avoid;
	margin-bottom: 16px;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	background: var(--kk-deep);
	box-shadow: var(--kk-shadow-md);
	transition: transform .35s var(--kk-ease), box-shadow .35s var(--kk-ease);
	text-decoration: none;
	color: inherit;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}
.kk-cat-tile:hover {
	transform: scale(1.02);
	box-shadow: var(--kk-shadow-deep);
}
.kk-cat-tile:focus-visible {
	outline: 2px solid var(--kk-highlight);
	outline-offset: 2px;
}
.kk-cat-tile-img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}
.kk-cat-tile-img-empty {
	width: 100%;
	aspect-ratio: 4 / 5;
	background: linear-gradient(135deg, var(--kk-deep) 0%, var(--kk-accent-dark) 100%);
}
/* Varied tile aspect-ratios produce the Pinterest masonry feel. */
.kk-cat-tile:nth-child(3n+1) .kk-cat-tile-img { aspect-ratio: 4 / 5; }
.kk-cat-tile:nth-child(3n+2) .kk-cat-tile-img { aspect-ratio: 3 / 4; }
.kk-cat-tile:nth-child(3n+3) .kk-cat-tile-img { aspect-ratio: 5 / 6; }
.kk-cat-tile:nth-child(6n+4) .kk-cat-tile-img { aspect-ratio: 5 / 7; }
.kk-cat-tile:nth-child(6n+5) .kk-cat-tile-img { aspect-ratio: 2 / 3; }
.kk-cat-tile-overlay {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 20px;
	background: linear-gradient(180deg, transparent 0%, rgba(var(--kk-deep-rgb), .65) 100%);
	color: #fff;
	pointer-events: none;
}
.kk-cat-tile-name {
	font-family: var(--kk-display);
	font-weight: 900;
	font-size: clamp(1.4rem, 2.2vw, 1.9rem);
	line-height: 1.05;
	margin: 0 0 4px;
	color: #fff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
	letter-spacing: -.01em;
}
.kk-cat-tile-count {
	margin: 0;
	font-size: .88rem;
	color: rgba(255, 255, 255, .9);
	text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
@media (prefers-reduced-motion: reduce) {
	.kk-cat-tile { transition: none; }
	.kk-cat-tile:hover { transform: none; }
}

/* =========================== 13. Newsletter =========================== */
.kk-newsletter,
.kk-newsletter-inline {
	position: relative;
	overflow: hidden;
	color: #fff;
}
.kk-newsletter-inline { padding: clamp(60px, 9vw, 120px) var(--kk-shell-x); }
.kk-newsletter-card {
	position: relative;
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(40px, 6vw, 70px);
	background: linear-gradient(135deg, var(--kk-deep) 0%, var(--kk-accent-dark) 50%, var(--kk-accent) 100%);
	border-radius: var(--kk-radius-lg);
	color: #fff;
	box-shadow: var(--kk-shadow-deep);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}
.kk-newsletter-card::before {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(600px 400px at 80% 10%, rgba(var(--kk-highlight-rgb), .25), transparent 60%),
		radial-gradient(500px 400px at 10% 100%, rgba(217, 142, 106, .35), transparent 60%);
	z-index: -1;
}
.kk-newsletter-card h2 { color: #fff; font-size: clamp(1.8rem, 3.8vw, 2.6rem); }
.kk-newsletter-card p { color: rgba(255, 255, 255, .85); }
.kk-newsletter-lead {
	display: inline-block;
	margin-top: 4px !important;
	padding: 8px 18px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: var(--kk-radius-pill);
	font-size: .94rem;
}
.kk-card-tag {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	background: var(--kk-highlight);
	color: var(--kk-deep);
	border-radius: var(--kk-radius-pill);
	font-size: .82rem;
	font-weight: 700;
	margin-bottom: 16px;
}
.kk-newsletter-card .kk-card-tag { background: rgba(var(--kk-highlight-rgb), .92); }

.kk-nl-form,
.kk-nl-mini {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 520px;
	margin: 24px auto 0;
	position: relative;
}
.kk-nl-form input[type="email"],
.kk-nl-mini input[type="email"] {
	flex: 1;
	min-width: 200px;
	padding: 14px 18px;
	border: 1px solid rgba(255, 255, 255, .25);
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border-radius: var(--kk-radius-pill);
	outline: none;
	transition: border-color .25s var(--kk-ease), background .25s var(--kk-ease);
}
.kk-nl-form input[type="email"]::placeholder,
.kk-nl-mini input[type="email"]::placeholder { color: rgba(255, 255, 255, .55); }
.kk-nl-form input[type="email"]:focus,
.kk-nl-mini input[type="email"]:focus { background: rgba(255, 255, 255, .2); border-color: var(--kk-highlight); }
.kk-nl-form button,
.kk-nl-mini button {
	padding: 14px 24px;
	background: var(--kk-highlight);
	color: var(--kk-deep);
	border: none;
	border-radius: var(--kk-radius-pill);
	font-weight: 700;
	transition: transform .25s var(--kk-ease), box-shadow .25s var(--kk-ease);
}
.kk-nl-form button:hover,
.kk-nl-mini button:hover { box-shadow: 0 14px 30px rgba(var(--kk-highlight-rgb), .45); }
.kk-nl-msg {
	flex-basis: 100%;
	color: rgba(255, 255, 255, .92);
	font-size: .9rem;
	min-height: 1.2em;
	text-align: center;
}

.kk-confetti {
	position: absolute;
	pointer-events: none;
	z-index: 10;
	width: 8px; height: 14px;
	border-radius: var(--kk-radius-sm);
	opacity: 0;
}
.kk-confetti.is-firing { animation: kkConfetti 1.6s var(--kk-ease) forwards; }
@keyframes kkConfetti {
	0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; }
	100% { transform: translate3d(var(--kk-cdx, 0), var(--kk-cdy, -200px), 0) rotate(var(--kk-cdr, 540deg)); opacity: 0; }
}

/* =========================== 14. Testimonials =========================== */
.kk-testimonials {
	padding: clamp(60px, 8vw, 100px) var(--kk-shell-x);
}
.kk-testimonials-grid {
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}
.kk-testimonial {
	padding: 32px;
	background: var(--kk-card);
	border-radius: var(--kk-radius-lg);
	box-shadow: var(--kk-shadow-md);
	border: 1px solid var(--kk-line);
	transition: transform .35s var(--kk-ease), box-shadow .35s var(--kk-ease);
	position: relative;
	overflow: hidden;
}
.kk-testimonial:hover { transform: translateY(-6px); box-shadow: var(--kk-shadow-lg); }
.kk-testimonial::before {
	content: "\201C";
	position: absolute;
	top: -40px; left: 18px;
	font-family: var(--kk-serif);
	font-size: 8rem;
	color: var(--kk-paper-3);
	line-height: 1;
}
.kk-testimonial blockquote {
	margin: 0 0 16px;
	font-size: 1.05rem;
	color: var(--kk-ink);
	font-style: italic;
	position: relative;
	z-index: 1;
}
.kk-testimonial cite {
	color: var(--kk-accent-dark);
	font-weight: 600;
	font-style: normal;
}

/* =========================== 15. Pinterest embed =========================== */
.kk-pinterest-embed {
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	padding: clamp(40px, 6vw, 80px) var(--kk-shell-x);
	text-align: center;
}

/* =========================== 16. Sister network =========================== */
.kk-sister-network {
	padding: clamp(60px, 8vw, 100px) var(--kk-shell-x);
	background: linear-gradient(180deg, var(--kk-paper) 0%, var(--kk-paper-3) 100%);
}
.kk-sister-grid {
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
}
.kk-sister-card {
	display: block;
	padding: 28px;
	background: var(--kk-card);
	border-radius: var(--kk-radius-md);
	border: 1px solid var(--kk-line);
	color: var(--kk-deep);
	transition: transform .35s var(--kk-ease), box-shadow .35s var(--kk-ease), border-color .35s var(--kk-ease);
}
.kk-sister-card:hover {
	color: var(--kk-deep);
	transform: translateY(-6px);
	box-shadow: var(--kk-shadow-md);
	border-color: var(--kk-line-strong);
}
.kk-sister-card h3 { font-size: 1.2rem; margin: 0 0 6px; }
.kk-sister-card p { color: var(--kk-ink-soft); font-size: .92rem; margin: 0; }

/* =========================== 17. Versprechen =========================== */
.kk-versprechen {
	padding: clamp(60px, 8vw, 100px) var(--kk-shell-x);
}
.kk-versprechen-list {
	max-width: 920px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
	list-style: none;
	padding: 0;
}
.kk-versprechen-list li {
	padding: 28px;
	background: var(--kk-paper-3);
	border-radius: var(--kk-radius-md);
	border-left: 2px solid var(--kk-line-strong);
	transition: transform .35s var(--kk-ease);
}
.kk-versprechen-list li:hover { transform: translateY(-4px); }
.kk-versprechen-list strong { display: block; color: var(--kk-deep); margin-bottom: 6px; }

/* =========================== 18. FAQ =========================== */
.kk-faq {
	padding: clamp(60px, 8vw, 100px) var(--kk-shell-x);
}
.kk-faq-list {
	max-width: 760px;
	margin: 0 auto;
}
/* v4.2 FAQ: native <details>/<summary>, single hairline between items
 * (no double-border per impeccable lists rule), custom plus-to-x rotation,
 * smooth grid-row body open via interpolate-size. */
.kk-faq-item {
	border-bottom: 1px solid var(--kk-line);
	padding: 22px 0;
}
.kk-faq-item:last-child { border-bottom: none; }
.kk-faq-item summary {
	font-family: var(--kk-display);
	font-size: clamp(1.1rem, 2.2vw, 1.32rem);
	letter-spacing: -.015em;
	color: var(--kk-deep);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 18px;
	font-weight: 700;
	line-height: 1.3;
	transition: color .2s var(--kk-ease);
}
.kk-faq-item summary:hover { color: var(--kk-accent-dark); }
.kk-faq-item summary::-webkit-details-marker { display: none; }
.kk-faq-item summary::after {
	content: "";
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	background:
		linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
	color: var(--kk-accent);
	border: 1px solid var(--kk-line-strong);
	border-radius: 50%;
	transition: transform .35s var(--kk-ease), color .25s var(--kk-ease), border-color .25s var(--kk-ease);
	margin-top: 2px;
}
.kk-faq-item[open] summary::after {
	transform: rotate(45deg);
	color: var(--kk-accent-dark);
	border-color: var(--kk-accent);
}
.kk-faq-item-body {
	padding-top: 14px;
	color: var(--kk-ink-soft);
	line-height: 1.7;
	max-width: 68ch;
}
.kk-faq-item-body > :last-child { margin-bottom: 0; }
/* Smooth open via interpolate-size if supported; fallback is the default
 * instant snap which still looks fine. */
@supports (interpolate-size: allow-keywords) {
	.kk-faq-item {
		interpolate-size: allow-keywords;
	}
	.kk-faq-item-body {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows .35s var(--kk-ease);
		padding-top: 0;
		overflow: hidden;
	}
	.kk-faq-item[open] .kk-faq-item-body {
		grid-template-rows: 1fr;
		padding-top: 14px;
	}
	.kk-faq-item-body > * { min-height: 0; }
}

/* =========================== 19. Anchor pitch =========================== */
.kk-anchor-pitch {
	padding: clamp(60px, 8vw, 100px) var(--kk-shell-x);
	text-align: center;
}
.kk-anchor-pitch-card {
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(36px, 6vw, 60px);
	background: var(--kk-paper-3);
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-lg);
}

/* =========================== 20. Cards =========================== */
.kk-card-grid {
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 28px;
}
.kk-card {
	display: flex;
	flex-direction: column;
	background: var(--kk-card);
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	border: 1px solid var(--kk-line);
	box-shadow: var(--kk-shadow-sm);
	transition: transform .35s var(--kk-ease), box-shadow .35s var(--kk-ease), border-color .35s var(--kk-ease);
	position: relative;
}
.kk-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--kk-shadow-deep);
	border-color: var(--kk-line-strong);
}
.kk-card-media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--kk-paper-3);
}
.kk-card-media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .8s var(--kk-ease);
}
.kk-card:hover .kk-card-media img { transform: scale(1.06); }
.kk-card-body { padding: 20px 22px 26px; display: flex; flex-direction: column; gap: 10px; }
.kk-card-body h3 {
	font-size: 1.2rem;
	margin: 0 0 6px;
	line-height: 1.2;
	color: var(--kk-deep);
}
.kk-card-body h3 a { color: inherit; }
.kk-card-body h3 a:hover { color: var(--kk-accent-dark); }
.kk-card-meta {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: .82rem;
	color: var(--kk-ink-mute);
}
.kk-card-cat {
	display: inline-block;
	padding: 2px 10px;
	background: var(--kk-paper-3);
	color: var(--kk-accent-dark);
	border-radius: var(--kk-radius-pill);
	font-weight: 600;
	font-size: .78rem;
}

/* =========================== 21. Single article =========================== */
.kk-single-wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 40px var(--kk-shell-x) 80px;
}
.kk-article-header {
	max-width: 800px;
	margin: 0 auto 48px;
	text-align: center;
}
.kk-article-header .entry-title {
	font-size: clamp(2rem, 5.4vw, 3.6rem);
	margin-bottom: 18px;
}
.kk-post-meta-top {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	align-items: center;
	font-size: .9rem;
	color: var(--kk-ink-soft);
}
.kk-meta-cat a { color: var(--kk-accent-dark); font-weight: 600; }
.kk-meta-dot { opacity: .5; }
.kk-bookmark {
	background: transparent;
	border: 1px solid var(--kk-line-strong);
	color: var(--kk-deep);
	padding: 4px 12px;
	border-radius: var(--kk-radius-pill);
	font-size: .82rem;
}
.kk-article-hero {
	max-width: 1100px;
	margin: 40px auto 0;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	box-shadow: var(--kk-shadow-lg);
}
.kk-article-hero-img { width: 100%; height: auto; display: block; }

.kk-quick-answer {
	max-width: 760px;
	margin: 0 auto 28px;
	padding: 24px 28px;
	background: var(--kk-paper-3);
	border-radius: var(--kk-radius-md);
	border-left: 2px solid var(--kk-line-strong);
}
.kk-quick-answer p { margin: 6px 0 0; color: var(--kk-deep); font-size: 1.05rem; }

/* v4.2 TOC: inline card on mobile, sticky 240px sidebar on desktop with a
 * vertical reading-progress rail (dot + thin connecting line per item).
 * JS scroll-spy already toggles .is-active. */
.kk-toc {
	max-width: 760px;
	margin: 0 auto 36px;
	padding: 24px 28px;
	background: var(--kk-card);
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-lg);
	box-shadow: 0 4px 14px rgba(var(--kk-deep-rgb), .04);
}
.kk-toc-title {
	font-family: var(--kk-display);
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--kk-ink-mute);
	margin-bottom: 14px;
}
.kk-toc-list {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: kk-toc;
	position: relative;
}
.kk-toc-list li {
	counter-increment: kk-toc;
	position: relative;
	padding: 6px 0 6px 22px;
	line-height: 1.4;
}
/* Reading-progress rail: single thin line down the gutter, dot per item. */
.kk-toc-list::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 10px;
	bottom: 10px;
	width: 1px;
	background: var(--kk-line);
}
.kk-toc-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--kk-card);
	border: 1.5px solid var(--kk-line-strong);
	transition: background .25s var(--kk-ease), border-color .25s var(--kk-ease), transform .25s var(--kk-ease);
}
.kk-toc-list li:has(a.is-active)::before,
.kk-toc-list li.is-active::before {
	background: var(--kk-accent);
	border-color: var(--kk-accent);
	transform: scale(1.15);
}
.kk-toc-list a {
	color: var(--kk-ink-soft);
	font-size: .95rem;
	transition: color .2s var(--kk-ease), transform .25s var(--kk-ease);
	display: inline-block;
}
.kk-toc-list a:hover,
.kk-toc-list a.is-active {
	color: var(--kk-accent-dark);
	transform: translateX(2px);
}
.kk-toc-list a.is-active { font-weight: 600; color: var(--kk-deep); }

/* Desktop only: promote TOC to sticky 240px sidebar floated right of the
 * reading column. Single-post template grid handled via floats so existing
 * .entry-content / .kk-quick-answer flow stays intact. */
@media (min-width: 1100px) {
	.kk-toc {
		position: sticky;
		top: 100px;
		float: right;
		width: 240px;
		max-width: 240px;
		margin: 0 0 24px 32px;
		padding: 20px 22px;
		clear: right;
	}
	.kk-toc-list a { font-size: .9rem; }
}

.entry-content {
	max-width: 720px;
	margin: 0 auto;
	font-size: 1.08rem;
	line-height: 1.78;
	color: var(--kk-ink);
}
.entry-content > * { margin-bottom: 1.2em; }
/* v4.2: H1 already in article header; tighten H2/H3 rhythm so the reading
 * column doesn't get visually punctured by oversized subheads. Body p/li
 * inherit the global 75ch cap from section 2 (Typography). */
.entry-content h2 {
	margin-top: 2.2em;
	font-size: clamp(1.55rem, 3.4vw, 2.05rem);
	letter-spacing: -.02em;
	max-width: 28ch;
}
.entry-content h3 {
	margin-top: 1.7em;
	font-size: clamp(1.2rem, 2.2vw, 1.45rem);
	max-width: 32ch;
}
.entry-content img { border-radius: var(--kk-radius-md); margin: 1.6em auto; }
/* v4.4.1: the old "90vw full-bleed" breakout maths was inverted on phones
 * ((720px − 90vw)/2 is POSITIVE below 720px) and pushed every affiliate
 * card ~180px out of the right viewport edge — the source of the
 * horizontal wiggle. Mobile cards now simply fill the column and stack. */
@media (max-width: 720px) {
	.entry-content .kk-aff-card {
		grid-template-columns: 1fr;
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	.entry-content .kk-aff-card .kk-aff-img-link { max-width: 100%; }
}
.entry-content blockquote {
	border-left: 2px solid var(--kk-line-strong);
	background: var(--kk-paper-3);
	padding: 20px 24px;
	border-radius: 0 var(--kk-radius-md) var(--kk-radius-md) 0;
	margin: 1.6em 0;
	font-family: var(--kk-serif);
	font-style: italic;
	font-size: 1.18rem;
}
.entry-content iframe,
.entry-content embed,
.entry-content video { max-width: 100%; }
.entry-content a { font-weight: 600; border-bottom: 1px dashed var(--kk-line-strong); }
.entry-content a:hover { border-bottom-style: solid; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li { margin-bottom: .5em; }

.kk-img-wrap { position: relative; display: block; }
.kk-img-pin {
	position: absolute;
	top: 14px; left: 14px;
	padding: 6px 12px;
	background: rgba(255, 255, 255, .9);
	color: var(--kk-accent-dark);
	border-radius: var(--kk-radius-pill);
	font-size: .82rem;
	font-weight: 600;
	opacity: 0;
	transition: opacity .25s var(--kk-ease);
}
.kk-img-wrap:hover .kk-img-pin { opacity: 1; }

.kk-aff-disclosure {
	max-width: 720px;
	margin: 0 auto 24px;
	padding: 14px 18px;
	background: var(--kk-paper-3);
	border-radius: var(--kk-radius-sm);
	font-size: .88rem;
	color: var(--kk-ink-soft);
	border: 1px solid var(--kk-line);
}

.kk-tags {
	max-width: 720px;
	margin: 28px auto;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	font-size: .88rem;
}
.kk-tags span { color: var(--kk-ink-soft); margin-right: 4px; }
.kk-tags a {
	display: inline-block;
	padding: 4px 12px;
	background: var(--kk-paper-3);
	color: var(--kk-accent-dark);
	border-radius: var(--kk-radius-pill);
	font-size: .82rem;
}

.kk-author-card {
	max-width: 760px;
	margin: 48px auto;
	padding: 32px;
	background: var(--kk-card);
	border-radius: var(--kk-radius-lg);
	border: 1px solid var(--kk-line);
	box-shadow: var(--kk-shadow-md);
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 24px;
	align-items: center;
}
.kk-author-photo {
	width: 88px; height: 88px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid var(--kk-accent);
}
.kk-author-photo img { width: 100%; height: 100%; object-fit: cover; }
.kk-author-initials {
	width: 100%; height: 100%;
	display: grid; place-items: center;
	background: linear-gradient(135deg, var(--kk-accent), var(--kk-accent-dark));
	color: #fff;
	font-family: var(--kk-serif);
	font-size: 2.4rem;
	font-weight: 800;
}
.kk-author-body h3 { margin: 4px 0 6px; }
.kk-author-body p { margin: 0 0 10px; color: var(--kk-ink-soft); font-size: .96rem; }
.kk-author-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kk-author-link { color: var(--kk-accent-dark); font-weight: 600; }
.kk-author-icon {
	width: 32px; height: 32px;
	display: inline-grid; place-items: center;
	background: var(--kk-paper-3);
	color: var(--kk-accent-dark);
	border-radius: 50%;
}
@media (max-width: 600px) {
	.kk-author-card { grid-template-columns: 1fr; text-align: center; }
	.kk-author-photo { margin: 0 auto; }
	.kk-author-actions { justify-content: center; }
}

.kk-prevnext {
	max-width: 1100px;
	margin: 48px auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.kk-pn {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 16px;
	padding: 16px;
	background: var(--kk-card);
	border-radius: var(--kk-radius-md);
	border: 1px solid var(--kk-line);
	transition: transform .25s var(--kk-ease), box-shadow .25s var(--kk-ease);
	align-items: center;
	color: var(--kk-deep);
}
.kk-pn:hover { transform: translateY(-4px); box-shadow: var(--kk-shadow-md); color: var(--kk-deep); }
.kk-pn-next { grid-template-columns: 1fr 80px; text-align: right; }
.kk-pn-thumb {
	width: 80px; height: 80px;
	border-radius: var(--kk-radius-sm);
	background-size: cover;
	background-position: center;
}
.kk-pn-body span { display: block; font-size: .82rem; color: var(--kk-ink-mute); margin-bottom: 4px; }
.kk-pn-body b { font-family: var(--kk-serif); font-weight: 700; font-size: 1rem; color: var(--kk-deep); }
@media (max-width: 720px) {
	.kk-prevnext { grid-template-columns: 1fr; }
	.kk-pn-next { grid-template-columns: 80px 1fr; text-align: left; }
	.kk-pn-next .kk-pn-thumb { order: -1; }
}

.kk-related {
	max-width: var(--kk-shell-max);
	margin: 60px auto;
}
.kk-related .kk-section-title {
	text-align: center;
	margin-bottom: 36px;
	font-size: clamp(1.5rem, 3vw, 2.2rem);
}

/* v4.2 share-rail: vertical icon stack, 60px from left edge, hidden under
 * 1100px so it never overlaps the TOC sidebar or the reading column. */
.kk-share-rail {
	position: fixed;
	left: 60px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 12px;
	z-index: 50;
}
.kk-share-rail a,
.kk-share-copy {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: var(--kk-card);
	border: 1px solid var(--kk-line);
	border-radius: 50%;
	color: var(--kk-deep);
	box-shadow: var(--kk-shadow-sm);
	cursor: pointer;
	transition: transform .25s var(--kk-ease), color .25s var(--kk-ease), box-shadow .25s var(--kk-ease), background .25s var(--kk-ease);
}
.kk-share-rail a:hover,
.kk-share-copy:hover {
	transform: translateY(-3px);
	color: var(--kk-accent-dark);
	box-shadow: var(--kk-shadow-md);
	background: var(--kk-paper);
}
.kk-share-rail a:first-child:hover {
	background: #e60023;
	color: #fff;
	border-color: #e60023;
}
@media (max-width: 1100px) { .kk-share-rail { display: none; } }

.kk-mobile-pin {
	position: fixed;
	bottom: 22px; right: 22px;
	width: 52px; height: 52px;
	border-radius: 50%;
	display: none;
	place-items: center;
	background: var(--kk-accent);
	color: #fff;
	font-size: 1.4rem;
	box-shadow: var(--kk-shadow-md);
	z-index: 90;
}
@media (max-width: 720px) {
	.kk-single-active .kk-mobile-pin { display: grid; }
}

.kk-breadcrumb {
	max-width: 1240px;
	margin: 0 auto 24px;
	font-size: .88rem;
	color: var(--kk-ink-mute);
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
.kk-breadcrumb a { color: var(--kk-accent-dark); }
.kk-bc-sep { color: var(--kk-ink-mute); }
.kk-bc-current { color: var(--kk-deep); font-weight: 500; }

/* =========================== 22. Squiggle =========================== */
.kk-divider-squiggle {
	max-width: 320px;
	margin: clamp(40px, 6vw, 80px) auto;
	color: var(--kk-accent);
	display: block;
	height: 28px;
}
.kk-divider-squiggle svg {
	width: 100%; height: 28px;
	display: block;
}
.kk-divider-squiggle svg path {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: kkSquiggle 2.4s var(--kk-ease) forwards;
	animation-delay: .8s;
}
@keyframes kkSquiggle { to { stroke-dashoffset: 0; } }

/* =========================== 23. Footer =========================== */
.kk-site-footer {
	position: relative;
	background: linear-gradient(180deg, var(--kk-deep) 0%, #0d0524 100%);
	color: rgba(255, 255, 255, .85);
	padding: clamp(60px, 8vw, 120px) var(--kk-shell-x) 40px;
	margin-top: 60px;
	overflow: hidden;
	isolation: isolate;
}
.kk-site-footer::before {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(900px 600px at 18% 0%, rgba(var(--kk-accent-rgb), .28), transparent 60%),
		radial-gradient(700px 500px at 85% 100%, rgba(217, 142, 106, .18), transparent 60%);
	z-index: -1;
}
.kk-site-footer h2, .kk-site-footer h3, .kk-site-footer h4, .kk-site-footer p { color: #fff; }
.kk-site-footer a { color: rgba(255, 255, 255, .8); }
.kk-site-footer a:hover { color: var(--kk-highlight); }

.kk-footer-inner {
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	position: relative;
}
.kk-footer-sparkle {
	position: absolute;
	color: rgba(var(--kk-highlight-rgb), .35);
	pointer-events: none;
}
.kk-anim-float { animation: kkFloat 6s ease-in-out infinite; }

.kk-footer-cta {
	text-align: center;
	margin-bottom: 64px;
	max-width: 720px;
	margin-inline: auto;
}
.kk-footer-cta .kk-script { color: var(--kk-highlight); }
.kk-footer-cta h2 { font-size: clamp(1.8rem, 3.8vw, 2.8rem); margin: 12px 0 16px; }
.kk-footer-cta p { color: rgba(255, 255, 255, .78); margin-bottom: 28px; }

.kk-footer-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 40px;
	padding: 48px 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.kk-footer-col h4 {
	font-family: var(--kk-sans);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--kk-highlight);
	margin-bottom: 18px;
}
.kk-footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.kk-footer-socials { display: flex; gap: 10px; margin-bottom: 20px; }
.kk-footer-socials a {
	width: 38px; height: 38px;
	display: grid; place-items: center;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 50%;
	transition: background .25s var(--kk-ease), transform .25s var(--kk-ease);
}
.kk-footer-socials a:hover { background: var(--kk-accent); transform: translateY(-3px); color: #fff; }

.kk-footer-network {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: center;
	padding: 28px 0;
	font-size: .88rem;
	color: rgba(255, 255, 255, .6);
}
.kk-footer-network-label { font-weight: 600; color: rgba(255, 255, 255, .7); }
.kk-footer-network a { padding: 4px 12px; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--kk-radius-pill); }
.kk-footer-network a:hover { background: rgba(var(--kk-highlight-rgb), .1); border-color: var(--kk-highlight); color: var(--kk-highlight); }

.kk-footer-disclosure {
	max-width: 760px;
	margin: 28px auto 0;
	font-size: .82rem;
	color: rgba(255, 255, 255, .5);
	text-align: center;
}
.kk-footer-signature {
	text-align: center;
	margin: 36px 0 24px;
}
.kk-footer-signature .kk-script { color: var(--kk-highlight); font-size: 2rem; }

.kk-footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: .84rem;
	color: rgba(255, 255, 255, .5);
	flex-wrap: wrap;
	gap: 12px;
}
.kk-footer-nav { list-style: none; padding: 0; margin: 0; display: flex; gap: 16px; }
.kk-footer-nav a { font-size: .84rem; }

/* =========================== 24. News bar =========================== */
.kk-news-bar {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 200%);
	width: min(680px, 92vw);
	background: rgba(var(--kk-deep-rgb), .96);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	color: #fff;
	border-radius: var(--kk-radius-lg);
	box-shadow: var(--kk-shadow-deep);
	padding: 18px 24px;
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 14px;
	align-items: center;
	transition: transform .55s var(--kk-ease), visibility 0s .55s;
	z-index: 900;
	visibility: hidden;
	pointer-events: none;
}
.kk-news-bar.is-visible { transform: translate(-50%, 0); visibility: visible; pointer-events: auto; transition: transform .55s var(--kk-ease); }
.kk-news-bar-text strong { display: block; font-family: var(--kk-serif); font-size: 1.1rem; color: #fff; margin-bottom: 4px; }
.kk-news-bar-text { font-size: .88rem; color: rgba(255, 255, 255, .7); }
.kk-news-bar .kk-nl-mini { margin: 0; max-width: 320px; flex-wrap: nowrap; }
.kk-news-bar-close {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .2);
	color: #fff;
	border-radius: 50%;
	width: 32px; height: 32px;
	font-size: 1.2rem;
	line-height: 1;
}
@media (max-width: 720px) {
	.kk-news-bar { grid-template-columns: 1fr; padding: 16px 18px; bottom: 12px; }
	.kk-news-bar .kk-nl-mini { max-width: 100%; }
	.kk-news-bar-close { position: absolute; top: 8px; right: 8px; }
}

/* =========================== 25. WP / blocks / a11y =========================== */
.alignwide { max-width: 1100px; margin-inline: auto; }
.alignfull { max-width: 100%; }
.wp-block-image img { border-radius: var(--kk-radius-md); }
.wp-block-pullquote, .wp-block-quote {
	border-left: 2px solid var(--kk-line-strong);
	background: var(--kk-paper-3);
	padding: 20px 28px;
	border-radius: 0 var(--kk-radius-md) var(--kk-radius-md) 0;
	font-family: var(--kk-serif);
	font-style: italic;
}

.search-form { display: flex; gap: 8px; }
.search-form .search-field {
	padding: 12px 18px;
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-pill);
	background: var(--kk-card);
	flex: 1;
}
.search-form .search-submit {
	padding: 12px 22px;
	border: none;
	background: var(--kk-accent);
	color: #fff;
	border-radius: var(--kk-radius-pill);
	font-weight: 600;
}

.kk-archive-wrap,
.kk-category-wrap {
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	padding: 40px var(--kk-shell-x) 80px;
}
.kk-archive-hero {
	text-align: center;
	margin-bottom: 48px;
}
.kk-archive-title { font-size: clamp(2rem, 5vw, 3.2rem); }
.kk-archive-meta { color: var(--kk-ink-mute); font-size: .94rem; }
.kk-archive-grid { margin-top: 40px; }

/* Category hero — full-bleed gradient banner (v3.3) */
.kk-category-hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--kk-radius-lg);
	padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 64px);
	margin: 0 0 clamp(32px, 5vw, 48px);
	background:
		linear-gradient(135deg, rgba(var(--kk-deep-rgb), .94), rgba(var(--kk-accent-rgb), .82)),
		radial-gradient(900px 500px at 80% 0%, rgba(var(--kk-highlight-rgb), .14), transparent 60%);
	background-size: cover;
	background-position: center;
	box-shadow: 0 22px 60px rgba(var(--kk-deep-rgb), .22);
	color: #fff;
	isolation: isolate;
	transform: translateZ(0);
}
.kk-category-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(600px 400px at 12% 80%, rgba(217, 142, 106, .22), transparent 60%),
		linear-gradient(135deg, rgba(var(--kk-deep-rgb), .18), rgba(var(--kk-accent-rgb), .25));
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 0;
}
.kk-category-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 15% 22%, rgba(255, 255, 255, .35) 0, transparent 1.5px);
	background-size: 36px 36px;
	opacity: .25;
	pointer-events: none;
	z-index: 0;
}
.kk-category-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
}
.kk-category-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--kk-sans);
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .14em;
	padding: 6px 14px;
	background: rgba(255, 255, 255, .15);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--kk-radius-pill);
	color: var(--kk-highlight);
	margin-bottom: 18px;
}
.kk-category-kicker::before {
	content: "";
	display: inline-block;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--kk-highlight);
	box-shadow: 0 0 12px var(--kk-highlight);
}
.kk-category-title {
	font-family: var(--kk-serif);
	font-size: clamp(2.4rem, 6vw, 4rem);
	font-weight: 800;
	line-height: 1.05;
	margin: 0 0 16px;
	color: #fff;
	letter-spacing: -.02em;
	text-shadow: 0 6px 24px rgba(0, 0, 0, .22);
	text-wrap: balance;
}
.kk-category-desc {
	font-size: clamp(1rem, 1.4vw, 1.12rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, .92);
	margin: 0 0 14px;
	max-width: 60ch;
}
.kk-category-count {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: .94rem;
	font-weight: 500;
	color: rgba(255, 255, 255, .9);
	margin: 0;
}
.kk-category-count::before {
	content: "";
	display: inline-block;
	width: 28px;
	height: 2px;
	background: var(--kk-highlight);
	border-radius: var(--kk-radius-sm);
}

/* Filter row — sub-category chips */
.kk-filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 clamp(28px, 4vw, 40px);
	padding: 4px 0;
}
.kk-filter-chip {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	min-height: 40px;
	background: var(--kk-card);
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-pill);
	color: var(--kk-deep);
	font-size: .9rem;
	font-weight: 500;
	white-space: nowrap;
	transition: background .25s var(--kk-ease), border-color .25s var(--kk-ease), color .25s var(--kk-ease), transform .25s var(--kk-ease), box-shadow .25s var(--kk-ease);
}
.kk-filter-chip:hover {
	background: rgba(var(--kk-accent-rgb), .08);
	border-color: var(--kk-line-strong);
	color: var(--kk-accent-dark);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(var(--kk-accent-rgb), .15);
}
.kk-filter-chip.is-active {
	background: linear-gradient(135deg, var(--kk-accent) 0%, var(--kk-accent-dark) 100%);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 10px 24px rgba(var(--kk-accent-rgb), .35);
}
.kk-filter-chip.is-active:hover { color: #fff; transform: translateY(-2px); }

@media (max-width: 720px) {
	.kk-category-hero { padding: 38px 22px; border-radius: var(--kk-radius-lg); }
	.kk-category-title { font-size: clamp(1.8rem, 8vw, 2.6rem); }
	.kk-filter-row { gap: 6px; }
	.kk-filter-chip { padding: 9px 14px; font-size: .85rem; min-height: 38px; }
}
.kk-archive-empty {
	max-width: 520px;
	margin: 80px auto;
	text-align: center;
}
.kk-pagination {
	margin: 60px auto 0;
	text-align: center;
}
.kk-pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	margin: 0 4px;
	border-radius: var(--kk-radius-sm);
	color: var(--kk-deep);
	border: 1px solid var(--kk-line);
	background: var(--kk-card);
	transition: all .25s var(--kk-ease);
}
.kk-pagination .page-numbers.current,
.kk-pagination .page-numbers:hover { background: var(--kk-accent); color: #fff; border-color: var(--kk-accent); }

.kk-pagelinks { margin: 24px 0; }

/* v4.2 affiliate card editorial polish. Base shell (.kk-aff-card) sets
 * the soft purple shadow, large radius, generous padding, font roles.
 * Per-style modifiers (.kk-aff-card-s1 ... s7) only change layout/order;
 * all sub-element styling (.kk-aff-title / .kk-aff-price / .kk-aff-cta /
 * .kk-aff-img) inherits from the base rules below so a writer change to
 * the card emitter never desyncs visuals. */
.kk-aff-card {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: clamp(16px, 2.4vw, 28px);
	align-items: start;
	padding: clamp(20px, 3vw, 32px);
	background: var(--kk-card);
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-lg);
	margin: 28px 0;
	box-shadow: 0 12px 32px rgba(var(--kk-deep-rgb), .10);
	position: relative;
	transition: transform .35s var(--kk-ease), box-shadow .35s var(--kk-ease);
}
.kk-aff-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 48px rgba(var(--kk-deep-rgb), .14);
}
.kk-aff-card .kk-aff-img-link {
	display: block;
	overflow: hidden;
	border-radius: var(--kk-radius-md);
	background: var(--kk-paper-3);
	aspect-ratio: 4 / 3;
}
.kk-aff-card .kk-aff-img,
.kk-aff-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--kk-radius-md);
	transition: transform .6s var(--kk-ease);
}
.kk-aff-card:hover .kk-aff-img { transform: scale(1.04); }
.kk-aff-card .kk-aff-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}
.kk-aff-card .kk-aff-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	padding: 3px 10px;
	background: rgba(var(--kk-deep-rgb), .82);
	color: #fff;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	border-radius: var(--kk-radius-pill);
	z-index: 2;
}
.kk-aff-card .kk-aff-top-badge {
	display: inline-block;
	align-self: flex-start;
	padding: 4px 12px;
	background: var(--kk-highlight);
	color: var(--kk-deep);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-radius: var(--kk-radius-pill);
	margin-bottom: 2px;
}
.kk-aff-card .kk-aff-title {
	font-family: var(--kk-display);
	font-weight: 700;
	font-size: clamp(1.1rem, 2.2vw, 1.3rem);
	line-height: 1.25;
	letter-spacing: -.015em;
	margin: 0;
	color: var(--kk-deep);
	max-width: none;
}
.kk-aff-card .kk-aff-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .92rem;
	color: var(--kk-ink-soft);
}
.kk-aff-card .kk-aff-stars {
	position: relative;
	display: inline-block;
	font-size: 1rem;
	line-height: 1;
	letter-spacing: 2px;
	background:
		linear-gradient(90deg, #ffb800 var(--r, 0%), rgba(var(--kk-deep-rgb), .14) var(--r, 0%));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.kk-aff-card .kk-aff-rating-value { font-weight: 700; color: var(--kk-deep); }
.kk-aff-card .kk-aff-reviews { color: var(--kk-ink-mute); font-size: .85rem; }
.kk-aff-card .kk-aff-price-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 2px;
}
.kk-aff-card .kk-aff-price {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	padding: 6px 14px;
	background: var(--kk-deep);
	color: #fff;
	font-family: var(--kk-mono);
	font-size: 1.06rem;
	font-weight: 700;
	letter-spacing: -.01em;
	border-radius: var(--kk-radius-sm);
}
.kk-aff-card .kk-aff-strike {
	font-family: var(--kk-mono);
	color: var(--kk-ink-mute);
	font-size: .92rem;
}
.kk-aff-card .kk-aff-desc {
	color: var(--kk-ink-soft);
	font-size: .98rem;
	line-height: 1.6;
	margin: 4px 0 6px;
	max-width: none;
}
.kk-aff-card .kk-aff-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 8px;
	padding: 12px 22px;
	background: linear-gradient(135deg, var(--kk-accent) 0%, var(--kk-accent-dark) 100%);
	color: #fff;
	font-family: var(--kk-display);
	font-weight: 700;
	font-size: .98rem;
	letter-spacing: -.005em;
	border-radius: var(--kk-radius-pill);
	box-shadow: 0 8px 20px rgba(138, 58, 33, .28);
	border: none;
	cursor: pointer;
	align-self: flex-start;
	transition: transform .25s var(--kk-ease), box-shadow .25s var(--kk-ease);
}
.kk-aff-card .kk-aff-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(138, 58, 33, .36);
	color: #fff;
}
.kk-aff-card .kk-aff-cta:active { transform: translateY(0); }
.kk-aff-card .kk-aff-disclose {
	display: block;
	margin-top: 10px;
	font-size: .74rem;
	color: var(--kk-ink-mute);
	line-height: 1.4;
	font-style: italic;
}

@media (max-width: 600px) {
	.kk-aff-card {
		grid-template-columns: 1fr;
		text-align: left;
	}
	.kk-aff-card .kk-aff-img-link { aspect-ratio: 16 / 10; }
	.kk-aff-card .kk-aff-cta {
		width: 100%;
		align-self: stretch;
	}
}

/* S1 Classic magazine: image left bleeds to card edges, title right. */
.kk-aff-card-s1 .kk-aff-img-link {
	margin: calc(clamp(20px, 3vw, 32px) * -1) 0 calc(clamp(20px, 3vw, 32px) * -1) calc(clamp(20px, 3vw, 32px) * -1);
	border-radius: var(--kk-radius-lg) 0 0 var(--kk-radius-lg);
	aspect-ratio: 3 / 4;
	height: 100%;
}
.kk-aff-card-s1 .kk-aff-img-link img,
.kk-aff-card-s1 .kk-aff-img {
	border-radius: var(--kk-radius-lg) 0 0 var(--kk-radius-lg);
}
@media (max-width: 600px) {
	.kk-aff-card-s1 .kk-aff-img-link {
		margin: calc(clamp(20px, 3vw, 32px) * -1) calc(clamp(20px, 3vw, 32px) * -1) 12px;
		border-radius: var(--kk-radius-lg) var(--kk-radius-lg) 0 0;
		aspect-ratio: 16 / 10;
	}
	.kk-aff-card-s1 .kk-aff-img-link img,
	.kk-aff-card-s1 .kk-aff-img {
		border-radius: var(--kk-radius-lg) var(--kk-radius-lg) 0 0;
	}
}

/* S2 Mini catalog: small square thumbnail, dense body. */
.kk-aff-card-s2 {
	grid-template-columns: 120px 1fr;
	gap: 18px;
	padding: clamp(16px, 2.4vw, 22px);
}
.kk-aff-card-s2 .kk-aff-img-link { aspect-ratio: 1; }
.kk-aff-card-s2 .kk-aff-title { font-size: 1.05rem; }

/* S3 Story card: image on top, body stacks below. */
.kk-aff-card-s3 {
	grid-template-columns: 1fr;
}
.kk-aff-card-s3 .kk-aff-img-link { aspect-ratio: 16 / 9; }

/* S4 List row: portrait thumbnail, body fills the rest. */
.kk-aff-card-s4 {
	grid-template-columns: 140px 1fr;
	gap: 20px;
}
.kk-aff-card-s4 .kk-aff-img-link { aspect-ratio: 3 / 4; }

/* S5 Pinterest pin: square, body overlays the bottom with a gradient. */
.kk-aff-card-s5 {
	grid-template-columns: 1fr;
	padding: 0;
	overflow: hidden;
	aspect-ratio: 2 / 3;
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
}
.kk-aff-card-s5 .kk-aff-img-link {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	border-radius: var(--kk-radius-lg);
	z-index: 0;
}
.kk-aff-card-s5 .kk-aff-body {
	position: relative;
	z-index: 1;
	margin-top: auto;
	padding: 28px 24px 22px;
	background: linear-gradient(180deg, transparent 0%, rgba(var(--kk-deep-rgb), .88) 60%, rgba(var(--kk-deep-rgb), .96) 100%);
	color: #fff;
	border-radius: 0 0 var(--kk-radius-lg) var(--kk-radius-lg);
}
.kk-aff-card-s5 .kk-aff-title,
.kk-aff-card-s5 .kk-aff-rating,
.kk-aff-card-s5 .kk-aff-rating-value,
.kk-aff-card-s5 .kk-aff-desc { color: #fff; }
.kk-aff-card-s5 .kk-aff-price {
	background: var(--kk-highlight);
	color: var(--kk-deep);
}
.kk-aff-card-s5 .kk-aff-pin-save {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	padding: 6px 12px;
	background: rgba(255, 255, 255, .92);
	color: var(--kk-accent-dark);
	font-size: .76rem;
	font-weight: 700;
	border-radius: var(--kk-radius-pill);
}
.kk-aff-card-s5 .kk-aff-disclose { color: rgba(255, 255, 255, .7); }
@media (max-width: 600px) {
	.kk-aff-card-s5 { aspect-ratio: 3 / 4; }
}

/* ============ Wave-8: affiliate card styles S6/S7 + lead styles L6/L7 ======
 * All colours pull from the per-article CSS-vars that writer.py's
 * _variant_wrapper_open() injects (--kk-accent, --kk-accent-dark,
 * --kk-bg-cream, --kk-highlight), so each variant is palette-scoped.
 * ----------------------------------------------------------------------- */

/* S6 — Magazine-Quote-Card: photo right, italic excerpt, large quote-mark,
 * price-strip pushed to the bottom of the body. */
.kk-aff-card-s6 {
	grid-template-columns: 1fr 150px;
	align-items: stretch;
	background: var(--kk-bg-cream, #fdf5ea);
	border-left: 2px solid var(--kk-line-strong);
}
.kk-aff-card-s6 .kk-aff-img-link { order: 2; }       /* photo to the right */
.kk-aff-card-s6 .kk-aff-body { order: 1; position: relative; padding-left: 34px; }
.kk-aff-card-s6 .kk-aff-quote-mark {
	position: absolute;
	left: -2px;
	top: -10px;
	font-family: Georgia, serif;
	font-size: 3.2rem;
	line-height: 1;
	color: var(--kk-accent, #c0584a);
	opacity: .55;
}
.kk-aff-card-s6 .kk-aff-desc { font-style: italic; color: var(--kk-accent-dark, #94372b); }
.kk-aff-card-s6 .kk-aff-price-row { order: 9; margin-top: 12px; }
@media (max-width: 600px) {
	.kk-aff-card-s6 { grid-template-columns: 1fr; }
	.kk-aff-card-s6 .kk-aff-img-link { order: 0; }
}

/* S7 — Tabbed-Spec-Card: photo on top, decorative top tabs, only the active
 * tab (Specs) is highlighted. Tabs are purely visual (aria-hidden). */
.kk-aff-card-s7 {
	grid-template-columns: 1fr;
	text-align: left;
}
.kk-aff-card-s7 .kk-aff-img-link { order: 0; }
.kk-aff-card-s7 .kk-aff-tabs {
	order: 1;
	display: flex;
	gap: 4px;
	margin: 6px 0 2px;
	border-bottom: 2px solid var(--kk-accent, #4a6fa5);
}
.kk-aff-card-s7 .kk-aff-tab {
	padding: 6px 14px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--kk-accent-dark, #2f4d7a);
	background: transparent;
	border-radius: var(--kk-radius-sm) var(--kk-radius-sm) 0 0;
	opacity: .55;
}
.kk-aff-card-s7 .kk-aff-tab.is-active {
	color: #fff;
	background: var(--kk-accent, #4a6fa5);
	opacity: 1;
}
.kk-aff-card-s7 .kk-aff-body { order: 2; }

/* L6 — Stat-Hook lead: oversized accent number + bandwagon sub-line. */
.kk-lead-stat {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin: 0 0 28px;
	padding: 18px 22px;
	background: var(--kk-bg-cream, #fdf5ea);
	border-left: 2px solid var(--kk-line-strong);
	border-radius: var(--kk-radius-md, 14px);
}
.kk-lead-stat-num {
	font-family: var(--kk-font-display, Georgia, serif);
	font-size: clamp(2.6rem, 8vw, 4rem);
	font-weight: 900;
	line-height: 1;
	color: var(--kk-accent, #b14e30);
}
.kk-lead-stat-sub { margin: 0; font-size: 1.02rem; line-height: 1.5; }

/* L7 — Conversation lead: italic reader question, then the answer line. */
.kk-lead-convo {
	margin: 0 0 28px;
	padding: 18px 22px;
	background: var(--kk-bg-cream, #fdf5ea);
	border-left: 2px solid var(--kk-line-strong);
	border-radius: var(--kk-radius-md, 14px);
}
.kk-lead-convo-q {
	margin: 0 0 8px;
	font-family: var(--kk-font-display, Georgia, serif);
	font-size: 1.18rem;
	color: var(--kk-accent-dark, #8a3a21);
}
.kk-lead-convo-a { margin: 0; line-height: 1.6; }

/* =========================== 26. Reduced motion =========================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.kk-reveal { opacity: 1; clip-path: none; transform: none; }
	.kk-hero-title .kk-word { opacity: 1; transform: none; }
	.kk-sparkle-deco { display: none; }
}

/* =========================== 27. Responsive =========================== */
@media (max-width: 1024px) {
	.kk-cover-story { min-height: 460px; padding: 40px; }
}
@media (max-width: 720px) {
	body { font-size: 16px; }
	.kk-hero { padding-top: 120px; }
	.kk-hero-title { font-size: clamp(2.2rem, 11vw, 3.6rem); }
	.kk-cover-story { padding: 28px; min-height: 380px; }
	.kk-section-head { margin-bottom: 32px; }
	.kk-cat-tile { min-height: 320px; }
}

/* =========================== 28. Legacy template-part compat =========================== */

/* trust-strip pill variant removed in audit P0 #5 redesign; canonical
 * rules now live in section 11 above (icon-row layout). */

/* =========================== Sticker SVG component ===========================
 * Pinterest-native die-cut sticker shapes that replace the flat rounded-pill
 * labels. Rotation is set inline per instance via the --kk-rot custom prop
 * (computed from a hash of the label) so each sticker tilts a little differently.
 */
.kk-sticker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--kk-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	line-height: 1;
	transform: rotate(var(--kk-rot, -2deg));
	transition: transform .25s var(--kk-ease);
	filter: drop-shadow(0 6px 14px rgba(var(--kk-deep-rgb), .12));
}
.kk-sticker:hover { transform: rotate(0deg) scale(1.04); }
.kk-sticker svg { display: block; overflow: visible; }
.kk-sticker-star  { padding: 14px 22px; }
.kk-sticker-tape  { padding: 8px 18px; transform: rotate(var(--kk-rot, -3deg)); }
.kk-sticker-tag   { padding: 12px 24px 12px 32px; }
.kk-sticker-burst { padding: 18px 26px; }
.kk-sticker-polaroid { padding: 10px 16px; }
@media (prefers-reduced-motion: reduce) {
	.kk-sticker, .kk-sticker:hover { transform: rotate(0); transition: none; }
}

/* card layout used by content-card.php with .kk-card-img */
.kk-card-img {
	aspect-ratio: 4 / 5;
	background-size: cover; background-position: center;
	transition: transform .8s var(--kk-ease);
}
.kk-card:hover .kk-card-img { transform: scale(1.05); }
.kk-card-img-fallback {
	background: linear-gradient(135deg, var(--kk-paper-3), var(--kk-paper-2));
}
.kk-card-title {
	font-size: 1.15rem; margin: 6px 0 4px; color: var(--kk-deep);
	font-family: var(--kk-serif); line-height: 1.25;
}
.kk-card-tag {
	display: inline-block;
	padding: 4px 12px;
	background: var(--kk-paper-3);
	color: var(--kk-accent-dark);
	border-radius: var(--kk-radius-pill);
	font-weight: 600; font-size: .78rem;
	margin-bottom: 4px;
}
.kk-link-arrow,
.kk-link-arrow-sm {
	display: inline-block;
	color: var(--kk-accent-dark);
	font-weight: 600;
	margin-top: 6px;
	transition: transform .25s var(--kk-ease);
}
.kk-card:hover .kk-link-arrow,
.kk-card:hover .kk-link-arrow-sm { transform: translateX(4px); }

/* featured hero card */
.kk-featured-card {
	position: relative;
	display: block;
	min-height: 480px;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	color: #fff;
	background: var(--kk-deep);
	padding: 40px;
	box-shadow: var(--kk-shadow-lg);
	transition: transform .35s var(--kk-ease), box-shadow .35s var(--kk-ease);
}
.kk-featured-card:hover { transform: translateY(-6px); box-shadow: var(--kk-shadow-deep); color: #fff; }
.kk-featured-img {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	z-index: 1;
}
.kk-featured-card::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 30%, rgba(var(--kk-deep-rgb), .9) 100%);
	z-index: 2;
}
.kk-featured-body {
	position: absolute;
	left: 40px; right: 40px; bottom: 40px;
	z-index: 3;
}
.kk-featured-title { color: #fff; font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 10px 0 8px; }
.kk-featured-excerpt { color: rgba(255, 255, 255, .8); margin-bottom: 14px; }
.kk-featured-card .kk-card-tag { background: var(--kk-highlight); color: var(--kk-deep); }

/* testimonials carousel (kk-tm-*) */
.kk-tm-carousel { max-width: var(--kk-shell-max); margin: 0 auto; }
.kk-tm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}
.kk-tm-card {
	margin: 0;
	padding: 32px;
	background: var(--kk-card);
	border-radius: var(--kk-radius-lg);
	border: 1px solid var(--kk-line);
	box-shadow: var(--kk-shadow-md);
	position: relative;
	overflow: hidden;
	transition: transform .35s var(--kk-ease), box-shadow .35s var(--kk-ease);
}
.kk-tm-card:hover { transform: translateY(-6px); box-shadow: var(--kk-shadow-lg); }
.kk-tm-card::before {
	content: "\201C";
	position: absolute;
	top: -50px; left: 14px;
	font-family: var(--kk-serif);
	font-size: 8rem;
	color: var(--kk-paper-3);
	line-height: 1;
}
.kk-tm-card blockquote {
	margin: 0 0 14px;
	font-size: 1.02rem;
	font-style: italic;
	color: var(--kk-ink);
	position: relative; z-index: 1;
}
.kk-tm-card figcaption b { display: block; color: var(--kk-deep); font-weight: 600; }
.kk-tm-card figcaption span { color: var(--kk-ink-mute); font-size: .88rem; }
.kk-tm-dots { display: none; }

/* promise grid (section-versprechen.php) */
.kk-promise { padding: clamp(60px, 8vw, 100px) var(--kk-shell-x); }
.kk-promise-grid {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}
.kk-promise-card {
	padding: 32px;
	background: var(--kk-paper-3);
	border-radius: var(--kk-radius-lg);
	border-left: 2px solid var(--kk-line-strong);
	transition: transform .35s var(--kk-ease), box-shadow .35s var(--kk-ease);
}
.kk-promise-card:hover { transform: translateY(-4px); box-shadow: var(--kk-shadow-md); }
.kk-promise-icon {
	display: inline-grid; place-items: center;
	width: 56px; height: 56px;
	background: var(--kk-card);
	border-radius: 50%;
	margin-bottom: 16px;
	font-size: 1.6rem;
	box-shadow: var(--kk-shadow-sm);
}
.kk-promise-card h3 { margin: 0 0 6px; }
.kk-promise-card p { color: var(--kk-ink-soft); margin: 0; }

/* anchor pitch card (section-anchor-pitch.php) */
.kk-anchor-card {
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(40px, 6vw, 60px);
	background: linear-gradient(135deg, var(--kk-deep) 0%, var(--kk-accent-dark) 100%);
	color: #fff;
	border-radius: var(--kk-radius-lg);
	box-shadow: var(--kk-shadow-deep);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.kk-anchor-card h2 { color: #fff; }
.kk-anchor-card p { color: rgba(255, 255, 255, .82); }
.kk-card-tag-gold { background: var(--kk-highlight) !important; color: var(--kk-deep) !important; }
.kk-anchor-form { max-width: 480px; }
.kk-blob-d.kk-blob-gold { background: radial-gradient(circle, var(--kk-highlight) 0%, transparent 70%); }

/* home FAQ dl/dt/dd accordion (section-faq.php uses native <dl>) */
.kk-home-faq { padding: clamp(60px, 8vw, 100px) var(--kk-shell-x); }
.kk-home-faq .kk-section-title { text-align: center; margin-bottom: 36px; }
dl.kk-faq {
	max-width: 760px;
	margin: 0 auto;
}
dl.kk-faq dt {
	font-family: var(--kk-serif);
	font-weight: 700;
	font-size: 1.18rem;
	color: var(--kk-deep);
	padding: 18px 0 8px;
	border-top: 1px solid var(--kk-line);
	cursor: pointer;
	position: relative;
	padding-right: 40px;
}
dl.kk-faq dt::after {
	content: "+";
	position: absolute;
	right: 0; top: 18px;
	width: 28px; height: 28px;
	display: grid; place-items: center;
	border: 1px solid var(--kk-line-strong);
	border-radius: 50%;
	color: var(--kk-accent);
	font-weight: 300; font-size: 1.4rem;
	transition: transform .3s var(--kk-ease);
}
dl.kk-faq dt.is-open::after { transform: rotate(45deg); }
dl.kk-faq dd {
	margin: 0 0 14px;
	color: var(--kk-ink-soft);
	padding-bottom: 6px;
	max-height: 0;
	overflow: hidden;
	transition: max-height .45s var(--kk-ease);
}
dl.kk-faq dd.is-open { max-height: 400px; padding-bottom: 18px; }
dl.kk-faq dt:first-of-type { border-top: none; }

/* sister-network cards on homepage (kk-sister-card defined above; sister-grid handled) */

/* cover-story blob/sparkle decor */
.kk-cover-story .kk-blob-a { background: radial-gradient(circle, rgba(var(--kk-highlight-rgb), .35) 0%, transparent 70%); top: -20%; left: -10%; }
.kk-cover-story .kk-sparkle {
	position: absolute;
	top: 14%; right: 12%;
	font-size: 2rem;
	z-index: 3;
	animation: kkFloat 4s ease-in-out infinite;
}

/* section-title used across many parts */
.kk-section-title {
	font-family: var(--kk-serif);
	font-weight: 800;
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
	margin: 0 0 .5em;
	letter-spacing: -.02em;
}

/* Pinterest embed inner wrap */
.kk-pin-iframe-wrap { border-radius: var(--kk-radius-md); overflow: hidden; box-shadow: var(--kk-shadow-md); margin-bottom: 24px; }
.kk-pin-follow { text-align: center; }
.kk-cta-secondary {
	display: inline-block;
	padding: 10px 22px;
	background: rgba(var(--kk-accent-rgb), .12);
	color: var(--kk-accent-dark);
	border-radius: var(--kk-radius-pill);
	font-weight: 600;
	transition: background .25s var(--kk-ease), transform .25s var(--kk-ease);
}
.kk-cta-secondary:hover { background: var(--kk-accent); color: #fff; transform: translateY(-2px); }

/* kk-snap-mobile (editor strip horizontal scroll on mobile) */
@media (max-width: 720px) {
	.kk-snap-mobile {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 16px;
		padding-bottom: 12px;
	}
	.kk-snap-mobile > * {
		flex: 0 0 80%;
		scroll-snap-align: start;
	}
}

/* magnetic-card alias used by content-featured */
.magnetic-card { transition: transform .35s var(--kk-ease), box-shadow .35s var(--kk-ease); }
.magnetic-card:hover { transform: translateY(-6px); }

/* parallax-img class noise from older templates */
.parallax-img { will-change: transform; }

/* fallback kk-anim-color-cycle no-op (left for class continuity) */
.kk-anim-color-cycle { color: inherit; }
.kk-noise { isolation: isolate; }

/* bookmark saved state */
.kk-bookmark.is-saved { background: var(--kk-accent); color: #fff; border-color: var(--kk-accent); }

/* =========================== 28. v4.3 PINK CINEMATIC 3D =========================== */

/* Hero FX layer: aurora + grain + sparkles live behind the hero content */
.kk-hero-fx {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}
.kk-aurora {
	position: absolute;
	inset: -25%;
	background: conic-gradient(from 0deg at 50% 50%,
		rgba(var(--kk-accent-rgb), .22),
		rgba(var(--kk-highlight-rgb), .16),
		rgba(138, 58, 33, .18),
		rgba(217, 142, 106, .14),
		rgba(var(--kk-accent-rgb), .22));
	filter: blur(70px);
	opacity: .9;
	animation: kkAuroraSpin 26s linear infinite;
}
@keyframes kkAuroraSpin { to { transform: rotate(360deg); } }
.kk-grain {
	position: absolute;
	inset: 0;
	opacity: .05;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
	background-size: 160px 160px;
}

/* Sparkles: re-enabled (were display:none), spin + pulse, JS adds parallax */
.kk-sparkle-deco {
	display: block;
	position: absolute;
	width: 34px; height: 34px;
	opacity: .85;
	animation: kkSparkleSpin 9s linear infinite, kkSparklePulse 3.2s ease-in-out infinite;
	filter: drop-shadow(0 2px 8px rgba(var(--kk-accent-rgb), .35));
}
.kk-sparkle-deco.kk-sparkle-sm { width: 22px; height: 22px; animation-duration: 12s, 4s; }
@keyframes kkSparkleSpin { to { rotate: 360deg; } }
@keyframes kkSparklePulse { 0%, 100% { opacity: .65; scale: 1; } 50% { opacity: 1; scale: 1.18; } }

/* 3D tilt + glare (JS sets transform; glare follows cursor) */
.kk-tilt {
	transform-style: preserve-3d;
	will-change: transform;
	transition: transform .35s var(--kk-ease);
	position: relative;
}
.kk-glare {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: 3;
	background: none;
}

/* Cursor glow orb */
#kk-glow {
	position: fixed;
	top: 0; left: 0;
	width: 440px; height: 440px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 1;
	background: radial-gradient(circle, rgba(var(--kk-accent-rgb), .13), rgba(var(--kk-highlight-rgb), .06) 45%, transparent 65%);
	opacity: 0;
	transition: opacity .5s ease;
	will-change: transform;
}
#kk-glow.is-on { opacity: 1; }

/* Shine sweep on card imagery */
.kk-card-img,
.kk-cover-story-img,
.kk-hero-collage-card,
.kk-cat-tile { position: relative; overflow: hidden; }
.kk-card-img::after,
.kk-cover-story-img::after,
.kk-hero-collage-card::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: -90%;
	width: 50%;
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .38), transparent);
	transform: skewX(-18deg);
	transition: left .7s ease;
	pointer-events: none;
	z-index: 2;
}
.kk-card:hover .kk-card-img::after,
.kk-cover-story:hover .kk-cover-story-img::after,
.kk-hero-collage-card:hover::after { left: 150%; }

/* Animated gradient-ink underlines on section headings */
.kk-section-head h2 { position: relative; padding-bottom: 14px; }
.kk-section-head h2::after {
	content: "";
	position: absolute;
	left: 50%; bottom: 0;
	transform: translateX(-50%);
	width: 88px; height: 4px;
	border-radius: var(--kk-radius-pill);
	background: linear-gradient(90deg, var(--kk-accent), var(--kk-highlight), var(--kk-accent-dark), var(--kk-accent));
	background-size: 240% 100%;
	animation: kkInk 6s ease infinite;
}
@keyframes kkInk { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

/* Hero headline underline: animated gradient sweep */
.kk-underline::after {
	background: linear-gradient(90deg, var(--kk-accent), var(--kk-highlight), var(--kk-accent-dark), var(--kk-accent)) !important;
	background-size: 240% 100% !important;
	animation: kkInk 5s ease infinite;
}

/* Hero collage: gentle staggered float */
.kk-hero-collage-card { animation: kkCollageFloat 7s ease-in-out infinite; }
.kk-hero-collage-card:nth-child(2) { animation-delay: 1.2s; animation-duration: 8s; }
.kk-hero-collage-card:nth-child(3) { animation-delay: 2.4s; animation-duration: 9s; }
@keyframes kkCollageFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* Footer script line: handwritten wiggle */
.kk-footer-signature .kk-script {
	display: inline-block;
	transform: rotate(-2deg);
	animation: kkScriptSway 6s ease-in-out infinite;
}
@keyframes kkScriptSway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(1.5deg); } }

@media (max-width: 720px) {
	.kk-sparkle-deco { display: none; }
	#kk-glow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.kk-aurora, .kk-sparkle-deco, #kk-glow { display: none !important; }
	.kk-hero-collage-card, .kk-underline::after, .kk-section-head h2::after, .kk-footer-signature .kk-script { animation: none !important; }
	.kk-tilt { transition: none; }
}

/* =========================== 29. v4.4 CYBERNETIC EDGE HEADER =========================== */
/* Floating dark glass pill navbar — deep plum, pink glow CTA, animated
 * light edge orbiting the border. Pure overrides over section 4. */

@property --kk-edge {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

.kk-site-header,
.kk-site-header.is-scrolled {
	background: transparent;
	border-bottom: none;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.kk-site-header::before { display: none; }

.kk-header-shell {
	position: relative;
	margin: 12px auto 0;
	max-width: min(1240px, calc(100% - 24px));
	padding: 10px 12px 10px 22px;
	background: linear-gradient(180deg, rgba(16, 30, 25, .92), rgba(11, 21, 17, .90));
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	backdrop-filter: blur(18px) saturate(1.4);
	border: 1px solid rgba(var(--kk-accent-rgb), .20);
	border-radius: var(--kk-radius-pill);
	box-shadow:
		0 18px 50px rgba(var(--kk-deep-rgb), .35),
		inset 0 1px 0 rgba(255, 255, 255, .07);
	transition: padding .25s var(--kk-ease), box-shadow .3s var(--kk-ease), background .3s var(--kk-ease);
}
.kk-site-header.is-scrolled .kk-header-shell {
	padding-top: 7px;
	padding-bottom: 7px;
	background: linear-gradient(180deg, rgba(14, 27, 22, .97), rgba(9, 18, 15, .96));
	box-shadow:
		0 14px 44px rgba(var(--kk-deep-rgb), .45),
		0 0 30px rgba(var(--kk-accent-rgb), .12),
		inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Animated light edge orbiting the pill border */
.kk-header-shell::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1.5px;
	background: conic-gradient(from var(--kk-edge),
		transparent 0%,
		rgba(var(--kk-accent-rgb), .95) 10%,
		rgba(var(--kk-highlight-rgb), .85) 18%,
		transparent 30%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	animation: kkEdgeOrbit 7s linear infinite;
	pointer-events: none;
	opacity: .85;
	z-index: 0;
}
@keyframes kkEdgeOrbit { to { --kk-edge: 360deg; } }

/* Brand: white name, glyph keeps the pink gradient cube */
.kk-brand,
.kk-brand-name { color: #fff; }
.kk-brand:hover { color: var(--kk-highlight); }
.kk-brand-glyph {
	box-shadow:
		0 10px 28px rgba(var(--kk-accent-rgb), .5),
		0 0 22px rgba(var(--kk-accent-rgb), .35),
		inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* Nav links: soft white, pink hover pill */
.kk-nav-list a { color: rgba(255, 255, 255, .76); font-weight: 500; }
.kk-nav-list a:hover { color: #fff; }
.kk-nav-list a::before { background: linear-gradient(135deg, rgba(var(--kk-accent-rgb), .22), rgba(138, 58, 33, .14)); }
.kk-nav-list a::after { background: linear-gradient(90deg, var(--kk-accent), var(--kk-highlight)); }
.kk-nav-list a[aria-current="page"] { color: #fff; }

/* Tools: ghost-dark icon buttons */
.kk-tool-btn,
.kk-burger {
	border-color: rgba(255, 255, 255, .16);
	color: rgba(255, 255, 255, .88);
	background: rgba(255, 255, 255, .03);
}
.kk-tool-btn:hover,
.kk-burger:hover {
	background: rgba(var(--kk-accent-rgb), .18);
	border-color: rgba(var(--kk-accent-rgb), .45);
	color: #fff;
}
.kk-burger span { background: var(--kk-card); }

/* CTA: gradient pill with outer pink glow ("cybernetic" highlight) */
.kk-header-cta {
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, .10),
		0 8px 26px rgba(var(--kk-accent-rgb), .55),
		0 0 38px rgba(var(--kk-accent-rgb), .30),
		inset 0 1px 0 rgba(255, 255, 255, .30);
}
.kk-header-cta:hover {
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, .14),
		0 12px 36px rgba(var(--kk-accent-rgb), .65),
		0 0 52px rgba(var(--kk-accent-rgb), .45),
		inset 0 1px 0 rgba(255, 255, 255, .4);
}

/* Content clears the floating pill */
.kk-main { padding-top: 104px; }
.kk-home-active .kk-main { padding-top: 0; }
.kk-hero { padding-top: 120px; }

/* Mobile drawer: matching dark plum panel */
.kk-mobile-drawer {
	background: linear-gradient(180deg, #13241d 0%, #0c1714 100%);
	border-left: 1px solid rgba(var(--kk-accent-rgb), .22);
}
.kk-mobile-drawer::before {
	background:
		radial-gradient(circle at 100% 0%, rgba(var(--kk-accent-rgb), .16), transparent 50%),
		radial-gradient(circle at 0% 100%, rgba(var(--kk-highlight-rgb), .10), transparent 45%);
}
.kk-drawer-brand { color: #fff; }
.kk-drawer-close { border-color: rgba(255, 255, 255, .16); color: #fff; }
.kk-drawer-close:hover { background: rgba(var(--kk-accent-rgb), .18); border-color: rgba(var(--kk-accent-rgb), .45); }
.kk-drawer-head { border-bottom-color: rgba(255, 255, 255, .10); }
.kk-drawer-list a { color: rgba(255, 255, 255, .85); }
.kk-drawer-list a:hover,
.kk-drawer-list a:focus { background: rgba(var(--kk-accent-rgb), .12); color: #fff; }
.kk-drawer-list a[aria-current="page"] { background: rgba(var(--kk-accent-rgb), .16); color: #fff; }
.kk-drawer-list a::after { color: var(--kk-highlight); }
.kk-drawer-foot { border-top-color: rgba(255, 255, 255, .10); }

@media (max-width: 720px) {
	.kk-header-shell { max-width: calc(100% - 16px); margin-top: 8px; padding: 8px 10px 8px 16px; }
	.kk-main { padding-top: 92px; }
	.kk-hero { padding-top: 104px; }
}
@media (prefers-reduced-motion: reduce) {
	.kk-header-shell::after { animation: none; opacity: .4; }
}

/* =========================== 30. v4.5 SCROLL-PARALLAX + EDITORIAL =========================== */

/* Collage: scroll-parallax owns the motion now — the float animation also
 * animated `translate` and would fight the engine. Depth via JS speeds. */
.kk-hero-collage-card,
.kk-hero-collage-card:nth-child(2),
.kk-hero-collage-card:nth-child(3) { animation: none; will-change: translate, transform; }

/* Article hero: sealed frame so the parallax drift never shows edges */
.kk-article-hero { overflow: hidden; border-radius: var(--kk-radius-lg); }
.kk-article-hero-img { scale: 1.12; will-change: translate; }

/* Cover story → cinematic editorial banner (reference: premium palette hero) */
.kk-cover-story { min-height: min(560px, 72dvh); display: grid; align-items: end; }
.kk-cover-story-img {
	position: absolute;
	inset: -14% 0;
	background-size: cover;
	background-position: center;
	will-change: background-position;
}
.kk-cover-story-gradient {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(10deg, rgba(10, 20, 16, .92) 0%, rgba(var(--kk-deep-rgb), .55) 45%, rgba(var(--kk-deep-rgb), .10) 75%),
		radial-gradient(700px 320px at 12% 100%, rgba(var(--kk-accent-rgb), .28), transparent 60%);
}
.kk-cover-story-body { padding-bottom: clamp(28px, 4vw, 56px); }
.kk-cover-title {
	color: #fff;
	text-shadow: 0 4px 28px rgba(10, 20, 16, .6);
	font-size: clamp(2rem, 5vw, 3.6rem);
	max-width: 18ch;
}
.kk-cover-excerpt { color: rgba(255, 255, 255, .85); max-width: 52ch; }

/* Palette signature row — curated-palette chips like the reference banner */
.kk-palette-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 22px;
}
.kk-palette-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px 6px 8px;
	border-radius: var(--kk-radius-pill);
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .18);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: rgba(255, 255, 255, .9);
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .04em;
}
.kk-palette-chip i {
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--chip);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 8px rgba(10, 20, 16, .35);
}
@media (max-width: 720px) {
	.kk-palette-row { gap: 6px; }
	.kk-palette-chip { font-size: .7rem; padding: 5px 11px 5px 6px; }
	.kk-palette-chip i { width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.kk-article-hero-img { scale: 1; }
	.kk-cover-story-img { inset: 0; }
}

/* =========================== 31. v4.5.1 PIN-OVERLAY-PILL =========================== */
/* Pinterest's signature gesture: the category tag rides ON the image as a
 * white pill (bottom-left), instead of sitting in the card body. */
.kk-tag-overlay {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 3;
	background: rgba(255, 255, 255, .94);
	color: var(--kk-deep);
	padding: 6px 12px;
	border-radius: var(--kk-radius-pill);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .03em;
	box-shadow: 0 4px 14px rgba(var(--kk-deep-rgb), .22);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: transform .25s var(--kk-ease), background .25s var(--kk-ease);
}
.kk-card:hover .kk-tag-overlay {
	transform: translateY(-2px);
	background: var(--kk-card);
}

/* =========================== 32. v5.0 MOBILE PERFECTION PASS =========================== */

/* Performance: the 70px-blurred spinning aurora is a GPU hog on phones —
 * static warm wash instead. Grain stays (cheap). */
@media (max-width: 720px) {
	.kk-aurora { animation: none; opacity: .55; }
	/* Parallax engine is desktop-only now → undo its visual headrooms */
	.kk-article-hero-img { scale: 1; }
	.kk-cover-story-img { inset: 0; }
	/* Hero collage: tighter, no oversize tail card */
	.kk-hero-collage { min-height: 280px; gap: 10px; }
	/* Sections breathe but don't waste a viewport */
	.kk-cover-story { min-height: 420px; }
}

/* Safe areas: notch/home-indicator devices (Dynamic Island etc.) */
.kk-news-bar { bottom: max(16px, env(safe-area-inset-bottom)); }
.kk-mobile-pin {
	bottom: max(22px, calc(env(safe-area-inset-bottom) + 8px));
	right: max(22px, env(safe-area-inset-right));
}

/* Ultra-narrow (Galaxy Fold, iPhone SE zoomed): keep the pill intact */
@media (max-width: 360px) {
	.kk-header-shell { margin-top: 6px; max-width: calc(100% - 12px); padding: 7px 8px 7px 14px; gap: 6px; }
	.kk-brand-glyph { width: 38px; height: 38px; font-size: 1.1rem; }
	.kk-tool-btn, .kk-burger, .kk-header-cta { width: 38px; height: 38px; }
	.kk-main { padding-top: 84px; }
	.kk-hero { padding-top: 96px; }
}

/* =========================== 33. v5.1 WP CORE COMPLETENESS =========================== */
/* Required theme classes + Gutenberg coverage so EVERY WordPress feature
 * renders correctly (Theme-Review-Handbook checklist). */

/* Sticky posts: quiet editorial marker on the card */
.sticky .kk-card-title::before,
.kk-card.sticky .kk-card-title::before {
	content: "★ ";
	color: var(--kk-highlight);
}

/* Comment by the post author */
.bypostauthor > article,
.bypostauthor .comment-body {
	border-left: 2px solid var(--kk-line-strong);
	padding-left: 14px;
}

/* Captions */
.wp-caption { max-width: 100%; margin: 1.6em auto; }
.wp-caption img { display: block; margin: 0 auto; border-radius: var(--kk-radius-md); }
.wp-caption-text,
.wp-element-caption,
figcaption {
	font-size: .85rem;
	color: var(--kk-ink-mute);
	text-align: center;
	padding: 8px 4px 0;
}

/* Classic alignments */
.alignleft { float: left; margin: 6px 24px 16px 0; max-width: 50%; }
.alignright { float: right; margin: 6px 0 16px 24px; max-width: 50%; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
@media (max-width: 600px) {
	.alignleft, .alignright { float: none; margin: 1.2em auto; max-width: 100%; display: block; }
}

/* Wide / full alignments inside the 720px reading column */
.entry-content .alignwide {
	width: min(1100px, calc(100vw - 2 * var(--kk-shell-x)));
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}
.entry-content .alignfull {
	width: calc(100vw - 2 * var(--kk-shell-x));
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}

/* Galleries (classic + block) */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 1.6em 0; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-item { margin: 0; }
.gallery-item img { border-radius: var(--kk-radius-sm); width: 100%; height: auto; }
.gallery-caption { font-size: .8rem; color: var(--kk-ink-mute); padding-top: 6px; }
@media (max-width: 600px) {
	.gallery, .gallery-columns-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Password-protected post form */
.post-password-form {
	background: var(--kk-paper-2);
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-lg);
	padding: 24px;
	max-width: 480px;
	margin: 2em auto;
}
.post-password-form input[type="password"] {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--kk-line-strong);
	border-radius: var(--kk-radius-pill);
	margin: 10px 0 14px;
	background: var(--kk-card);
}
.post-password-form input[type="submit"] {
	background: linear-gradient(135deg, var(--kk-accent), var(--kk-accent-dark));
	color: #fff;
	border: none;
	padding: 12px 26px;
	border-radius: var(--kk-radius-pill);
	font-weight: 600;
	cursor: pointer;
}

/* Comments pagination + reply navigation */
.comments-navigation,
.comment-navigation {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 24px 0;
}
.comments-navigation a,
.comment-navigation a {
	padding: 10px 18px;
	background: var(--kk-paper-2);
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-pill);
	font-weight: 600;
	font-size: .9rem;
}
.comments-navigation a:hover,
.comment-navigation a:hover { background: var(--kk-paper-3); }

/* Blocks: separator, table, quote-large, pullquote */
.entry-content hr,
.wp-block-separator {
	border: none;
	height: 2px;
	background: var(--kk-line);
	margin: 2.4em auto;
	max-width: 240px;
	border-radius: var(--kk-radius-pill);
}
.entry-content table,
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
	margin: 1.6em 0;
}
.entry-content th, .entry-content td,
.wp-block-table th, .wp-block-table td {
	border: 1px solid var(--kk-line);
	padding: 10px 14px;
	text-align: left;
}
.entry-content th, .wp-block-table th { background: var(--kk-paper-2); }
.wp-block-pullquote {
	border-top: 2px solid var(--kk-line-strong);
	border-bottom: 2px solid var(--kk-line-strong);
	padding: 24px 0;
	font-family: var(--kk-true-serif);
	font-style: italic;
}

/* =========================== 34. v5.2 SECTION REWORK (pin-gerecht) =========================== */

/* Pins are 2:3 with baked-in text — show them UNCROPPED. */
.kk-card-img { aspect-ratio: 2 / 3; }

/* Category color tiles: zero photos, zero text collisions */
.kk-cat-color-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.kk-cat-color-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 180px;
	padding: 22px;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	color: #fff;
	transition: box-shadow .3s var(--kk-ease);
}
.kk-cat-tone-0 { background: linear-gradient(150deg, var(--kk-accent), var(--kk-accent-dark)); }
.kk-cat-tone-1 { background: linear-gradient(150deg, var(--kk-tone), var(--kk-tone-2)); }
.kk-cat-tone-2 { background: linear-gradient(150deg, #21342c, var(--kk-deep)); }
.kk-cat-tone-3 { background: linear-gradient(150deg, #e9b461, var(--kk-highlight-2)); color: var(--kk-deep); }
.kk-cat-color-tile:hover { box-shadow: var(--kk-shadow-lg); color: inherit; }
.kk-cat-color-num {
	position: absolute;
	top: 14px; right: 18px;
	font-family: var(--kk-display);
	font-size: 2.4rem;
	font-weight: 800;
	opacity: .22;
	line-height: 1;
}
.kk-cat-color-name {
	margin: 0 0 4px;
	font-size: clamp(1.15rem, 1.8vw, 1.45rem);
	color: inherit;
}
.kk-cat-color-count { font-size: .82rem; opacity: .75; }
.kk-cat-color-arrow {
	position: absolute;
	bottom: 20px; right: 20px;
	font-size: 1.2rem;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .25s var(--kk-ease), transform .25s var(--kk-ease);
}
.kk-cat-color-tile:hover .kk-cat-color-arrow { opacity: 1; transform: translateX(0); }
@media (max-width: 900px) { .kk-cat-color-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
	.kk-cat-color-grid { gap: 10px; }
	.kk-cat-color-tile { min-height: 130px; padding: 16px; }
}

/* Author strip v2: substance instead of a sparse gap */
.kk-author-strip-v2 {
	background: linear-gradient(150deg, var(--kk-tone), var(--kk-tone-2));
	border-radius: var(--kk-radius-lg);
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	padding: clamp(28px, 4vw, 48px);
	color: #fff;
}
.kk-author-strip-v2 .kk-author-strip-inner {
	display: grid;
	grid-template-columns: 104px 1fr;
	gap: 24px;
	align-items: center;
	max-width: 760px;
	margin: 0 auto;
}
.kk-author-strip-v2 .kk-author-photo {
	width: 104px; height: 104px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid var(--kk-highlight);
	display: block;
}
.kk-author-strip-v2 .kk-author-photo img { width: 100%; height: 100%; object-fit: cover; }
.kk-author-strip-v2 .kk-author-photo-initial {
	width: 100%; height: 100%;
	display: grid; place-items: center;
	background: linear-gradient(135deg, var(--kk-accent), var(--kk-accent-dark));
	color: #fff; font-family: var(--kk-display); font-size: 2.6rem; font-weight: 800;
}
.kk-author-strip-v2 .kk-author-signature {
	font-family: var(--kk-script);
	font-size: 2.1rem;
	color: var(--kk-highlight);
	margin: 0 0 4px;
	line-height: 1;
}
.kk-author-strip-v2 .kk-author-tagline { font-weight: 600; margin: 0 0 6px; color: #fff; }
.kk-author-strip-v2 .kk-author-bio { color: rgba(255, 255, 255, .78); font-size: .95rem; margin: 0 0 14px; }
.kk-author-strip-v2 .kk-author-strip-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kk-author-strip-v2 .kk-author-icon {
	width: 38px; height: 38px;
	display: inline-grid; place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	transition: background .25s var(--kk-ease), transform .25s var(--kk-ease);
}
.kk-author-strip-v2 .kk-author-icon:hover { background: var(--kk-accent); transform: translateY(-2px); }
@media (max-width: 600px) {
	.kk-author-strip-v2 .kk-author-strip-inner { grid-template-columns: 1fr; text-align: center; }
	.kk-author-strip-v2 .kk-author-photo { margin: 0 auto; }
	.kk-author-strip-v2 .kk-author-strip-actions { justify-content: center; }
}

/* Sister band: one slim row instead of 7 card walls */
.kk-sister-band {
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	padding: clamp(24px, 3vw, 40px) var(--kk-shell-x);
	background: var(--kk-paper-2);
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-lg);
}
.kk-sister-band-inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.kk-sister-band-head { flex: 0 0 auto; }
.kk-sister-band-head h2 { margin: 4px 0 0; font-size: clamp(1.2rem, 2vw, 1.6rem); }
.kk-sister-pills { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0; }
.kk-sister-pill {
	padding: 10px 18px;
	background: var(--kk-card);
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-pill);
	font-weight: 600;
	font-size: .92rem;
	color: var(--kk-deep);
	transition: border-color .25s var(--kk-ease), color .25s var(--kk-ease), transform .25s var(--kk-ease);
}
.kk-sister-pill:hover { border-color: var(--kk-accent); color: var(--kk-accent-dark); transform: translateY(-2px); }

/* Back to top */
.kk-back-to-top {
	position: fixed;
	bottom: max(24px, calc(env(safe-area-inset-bottom) + 10px));
	left: 22px;
	width: 46px; height: 46px;
	display: grid; place-items: center;
	background: var(--kk-deep);
	color: #fff;
	border: none;
	border-radius: 50%;
	box-shadow: var(--kk-shadow-md);
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity .3s var(--kk-ease), transform .3s var(--kk-ease), background .25s var(--kk-ease);
	z-index: 80;
}
.kk-back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.kk-back-to-top:hover { background: var(--kk-accent); }

/* Load more (progressive enhancement; classic pagination = no-JS fallback) */
.kk-load-more {
	display: block;
	margin: 32px auto 0;
	padding: 14px 36px;
	background: linear-gradient(135deg, var(--kk-accent), var(--kk-accent-dark));
	color: #fff;
	border: none;
	border-radius: var(--kk-radius-pill);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(var(--kk-accent-rgb), .35);
	transition: transform .25s var(--kk-ease), box-shadow .25s var(--kk-ease), opacity .2s;
}
.kk-load-more:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(var(--kk-accent-rgb), .45); }
.kk-load-more.is-loading { opacity: .6; cursor: progress; }
.kk-pagination.is-enhanced .nav-links { display: none; }

/* =========================== 35. v5.3 SECTION REWORK II =========================== */

/* BUGFIX: .kk-site-footer a (0-1-1) beat .kk-btn-light (0-1-0) →
 * white text on a white button. */
.kk-site-footer .kk-btn-light { color: var(--kk-deep); }
.kk-site-footer .kk-btn-light:hover { color: var(--kk-accent-dark); }

/* Cover v3: split editorial banner — matte panel + uncropped pin card */
.kk-cover-split {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
	background:
		radial-gradient(560px 300px at 90% 0%, rgba(var(--kk-accent-rgb), .25), transparent 60%),
		linear-gradient(150deg, #1a2b24 0%, var(--kk-deep) 100%);
	border-radius: var(--kk-radius-lg);
	padding: clamp(28px, 5vw, 64px);
	overflow: hidden;
}
.kk-cover-kicker {
	display: block;
	font-family: var(--kk-script);
	font-size: 1.9rem;
	color: var(--kk-highlight);
	margin-bottom: 10px;
	transform: rotate(-1.5deg);
}
.kk-cover-split .kk-cover-cat { margin-bottom: 14px; }
.kk-cover-split .kk-cover-title {
	color: #fff;
	font-size: clamp(1.7rem, 3.6vw, 2.8rem);
	margin: 0 0 14px;
	max-width: 20ch;
}
.kk-cover-split .kk-cover-excerpt {
	color: rgba(255, 255, 255, .78);
	max-width: 46ch;
	margin: 0 0 22px;
}
.kk-cover-pin {
	display: block;
	justify-self: center;
	width: min(320px, 100%);
	aspect-ratio: 2 / 3;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
	rotate: 2deg;
}
.kk-cover-pin img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
	.kk-cover-split { grid-template-columns: 1fr; }
	.kk-cover-pin { width: min(260px, 80%); rotate: 0deg; }
}

/* Hero collage: 2 pins, uncropped, equal */
.kk-hero-collage { grid-template-columns: repeat(2, 1fr); min-height: 0; align-self: center; }
.kk-hero-collage-card { aspect-ratio: 2 / 3; min-height: 0; max-height: none; }
.kk-hero-collage-card:nth-child(3) { display: none; }
.kk-hero-collage-card img { position: static; }

/* Editor strip pin cards: image only, generous radius */
.kk-card-pin { background: transparent; box-shadow: none; border: none; }
.kk-card-pin .kk-card-img { border-radius: var(--kk-radius-lg); box-shadow: var(--kk-shadow-md); }
.kk-card-pin:hover .kk-card-img { box-shadow: var(--kk-shadow-lg); }

/* FAQ v2: card accordion instead of bare hairlines */
.kk-home-faq .kk-section-title { scroll-margin-top: 110px; }
.kk-faq dt {
	background: var(--kk-card);
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-md);
	box-shadow: var(--kk-shadow-sm);
	padding: 18px 60px 18px 20px;
	margin: 0 0 10px;
	font-weight: 700;
	color: var(--kk-deep);
	position: relative;
	cursor: pointer;
	transition: border-color .25s var(--kk-ease), box-shadow .25s var(--kk-ease);
}
.kk-faq dt:hover { border-color: var(--kk-line-strong); box-shadow: var(--kk-shadow-md); }
.kk-faq dt::after {
	content: "+";
	position: absolute;
	right: 16px; top: 50%;
	translate: 0 -50%;
	width: 30px; height: 30px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--kk-paper-3);
	color: var(--kk-accent-dark);
	font-size: 1.2rem;
	font-weight: 600;
	transition: rotate .3s var(--kk-ease), background .25s var(--kk-ease);
}
.kk-faq dt.is-open { border-color: var(--kk-line-strong); border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }
.kk-faq dt.is-open::after { rotate: 45deg; background: var(--kk-accent); color: #fff; }
.kk-faq dd {
	background: var(--kk-card);
	border: 1px solid var(--kk-line);
	border-top: none;
	border-radius: 0 0 var(--kk-radius-md) var(--kk-radius-md);
	margin: 0 0 10px;
	padding: 0 20px;
	max-height: 0;
	overflow: hidden;
	color: var(--kk-ink-soft);
	transition: max-height .35s var(--kk-ease), padding .25s var(--kk-ease);
}
.kk-faq dd.is-open { max-height: 400px; padding: 4px 20px 18px; }

/* Versprechen v2: white cards + tone icon tiles (peach-on-peach fixed) */
.kk-promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kk-promise-card {
	background: var(--kk-card);
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-lg);
	box-shadow: var(--kk-shadow-sm);
	padding: 26px 24px;
	transition: transform .25s var(--kk-ease), box-shadow .25s var(--kk-ease);
}
.kk-promise-card:hover { transform: translateY(-3px); box-shadow: var(--kk-shadow-md); }
.kk-promise-icon {
	display: inline-grid;
	place-items: center;
	width: 52px; height: 52px;
	border-radius: var(--kk-radius-md);
	margin-bottom: 14px;
	background: linear-gradient(150deg, var(--kk-accent), var(--kk-accent-dark));
	color: #fff;
}
.kk-promise-card:nth-child(2) .kk-promise-icon { background: linear-gradient(150deg, var(--kk-tone), var(--kk-tone-2)); }
.kk-promise-card:nth-child(3) .kk-promise-icon { background: linear-gradient(150deg, #e9b461, var(--kk-highlight-2)); color: var(--kk-deep); }
.kk-promise-card h3 { font-size: 1.1rem; margin: 0 0 8px; }
.kk-promise-card p { font-size: .94rem; color: var(--kk-ink-soft); margin: 0; }
@media (max-width: 860px) { .kk-promise-grid { grid-template-columns: 1fr; } }

/* Testimonials v2: avatar chips, serif quotes, featured middle card */
.kk-tm-card {
	background: var(--kk-card);
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-lg);
	box-shadow: var(--kk-shadow-sm);
	padding: 26px 24px;
	margin: 0;
	position: relative;
}
.kk-tm-card::before {
	content: "„";
	position: absolute;
	top: 2px; left: 18px;
	font-family: var(--kk-script);
	font-size: 4rem;
	line-height: 1;
	color: var(--kk-accent);
	opacity: .35;
}
.kk-tm-card blockquote {
	margin: 18px 0 18px;
	font-family: var(--kk-true-serif);
	font-style: italic;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--kk-ink);
	border: none;
	background: none;
	padding: 0;
}
.kk-tm-card figcaption { display: flex; align-items: center; gap: 12px; }
.kk-tm-avatar {
	flex: 0 0 auto;
	width: 42px; height: 42px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: linear-gradient(150deg, var(--kk-accent), var(--kk-accent-dark));
	color: #fff;
	font-weight: 700;
	font-family: var(--kk-display);
}
.kk-tm-meta b { display: block; color: var(--kk-deep); font-size: .92rem; }
.kk-tm-meta span { color: var(--kk-ink-mute); font-size: .8rem; }
.kk-tm-card:nth-child(2) {
	background: linear-gradient(150deg, var(--kk-tone), var(--kk-tone-2));
	border-color: transparent;
}
.kk-tm-card:nth-child(2) blockquote { color: rgba(255, 255, 255, .92); }
.kk-tm-card:nth-child(2)::before { color: var(--kk-highlight); opacity: .7; }
.kk-tm-card:nth-child(2) .kk-tm-meta b { color: #fff; }
.kk-tm-card:nth-child(2) .kk-tm-meta span { color: rgba(255, 255, 255, .65); }
.kk-tm-card:nth-child(2) .kk-tm-avatar { background: var(--kk-highlight); color: var(--kk-deep); }

/* =========================== 36. v5.4 HERO-DECK · SPOTLIGHT-STAGE · FAQ-CHAT =========================== */

/* ── HERO v5: 3D-Pin-Deck ─────────────────────────────────────────── */
.kk-hero-deck {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	min-height: 480px;
	perspective: 1200px;
}
.kk-deck-ring {
	position: absolute;
	width: min(420px, 90%);
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, transparent 58%, rgba(var(--kk-accent-rgb), .10) 59%, transparent 72%),
		conic-gradient(from 0deg, transparent, rgba(var(--kk-highlight-rgb), .35), transparent 30%);
	filter: blur(1px);
	animation: kkDeckRing 18s linear infinite;
}
@keyframes kkDeckRing { to { rotate: 360deg; } }
.kk-deck-stage {
	position: relative;
	width: min(380px, 86%);
	aspect-ratio: 2 / 3;
	transform-style: preserve-3d;
	/* Maus-Parallax: --kk-mx/--kk-my kommen aus main.js Modul 9 */
	transform:
		rotateY(calc(var(--kk-mx, 0) * 9deg))
		rotateX(calc(var(--kk-my, 0) * -7deg));
	transition: transform .25s var(--kk-ease-soft);
}
.kk-deck-card {
	position: absolute;
	inset: 0;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(var(--kk-deep-rgb), .35);
	transform-style: preserve-3d;
	will-change: transform;
	animation: kkDeckIdle 9s ease-in-out infinite;
	transition: translate .4s var(--kk-ease), rotate .4s var(--kk-ease), box-shadow .4s var(--kk-ease);
}
.kk-deck-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kk-deck-card[style*="--i:0"] {
	rotate: -10deg;
	translate: -34% 4%;
	z-index: 1;
	animation-delay: 0s;
}
.kk-deck-card[style*="--i:1"] {
	rotate: 0deg;
	translate: 0 -2%;
	z-index: 3;
	animation-delay: 1.4s;
	box-shadow: 0 44px 90px rgba(var(--kk-deep-rgb), .42);
}
.kk-deck-card[style*="--i:2"] {
	rotate: 10deg;
	translate: 34% 4%;
	z-index: 2;
	animation-delay: 2.8s;
}
@keyframes kkDeckIdle {
	0%, 100% { margin-top: 0; }
	50% { margin-top: -12px; }
}
.kk-deck-card:hover {
	z-index: 4;
	translate: 0 -6%;
	rotate: 0deg;
	box-shadow: 0 50px 100px rgba(var(--kk-deep-rgb), .5);
}
@media (max-width: 900px) {
	.kk-hero-deck { min-height: 340px; }
	.kk-deck-stage { width: min(240px, 64%); transform: none; }
	.kk-deck-ring { width: min(320px, 96%); }
}

/* ── COVER v4: Spotlight-Stage ───────────────────────────────────── */
.kk-stage { text-align: center; }
.kk-stage-head { max-width: 720px; margin: 0 auto 8px; }
.kk-stage-kicker {
	display: inline-block;
	font-family: var(--kk-script);
	font-size: 1.9rem;
	color: var(--kk-accent-dark);
	transform: rotate(-1.5deg);
	margin-bottom: 6px;
}
.kk-stage-title { font-size: clamp(1.6rem, 3.4vw, 2.6rem); margin: 0 auto; max-width: 22ch; }
.kk-stage-floor {
	position: relative;
	display: grid;
	place-items: center;
	padding: clamp(28px, 4vw, 56px) 0 0;
}
.kk-stage-spot {
	position: absolute;
	bottom: 0;
	width: min(640px, 96%);
	height: 86%;
	background:
		radial-gradient(50% 100% at 50% 100%, rgba(var(--kk-highlight-rgb), .30), transparent 70%),
		conic-gradient(from 165deg at 50% -20%, transparent 42%, rgba(var(--kk-accent-rgb), .12) 50%, transparent 58%);
	border-radius: 0 0 50% 50% / 0 0 18% 18%;
	pointer-events: none;
}
.kk-stage-pinwrap { position: relative; display: grid; place-items: center; }
.kk-stage-ring {
	position: absolute;
	width: 132%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 2px dashed rgba(var(--kk-accent-rgb), .35);
	animation: kkDeckRing 30s linear infinite;
	pointer-events: none;
}
.kk-stage-pin {
	position: relative;
	display: block;
	width: min(300px, 70vw);
	aspect-ratio: 2 / 3;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	box-shadow: 0 40px 90px rgba(var(--kk-deep-rgb), .35);
	z-index: 1;
}
.kk-stage-pin img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kk-stage-ribbon {
	position: absolute;
	top: 18px; left: -34px;
	z-index: 2;
	background: linear-gradient(135deg, var(--kk-accent), var(--kk-accent-dark));
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 7px 40px;
	rotate: -45deg;
	box-shadow: 0 4px 14px rgba(var(--kk-deep-rgb), .3);
}
.kk-stage-reflection {
	width: min(300px, 70vw);
	aspect-ratio: 5 / 1;
	margin-top: 6px;
	background-size: cover;
	background-position: top center;
	border-radius: var(--kk-radius-lg);
	transform: scaleY(-1);
	opacity: .18;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000);
	mask-image: linear-gradient(180deg, transparent, #000);
	pointer-events: none;
}
.kk-stage-meta { position: absolute; inset: 0; pointer-events: none; }
.kk-stage-chip {
	position: absolute;
	background: var(--kk-card);
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-pill);
	box-shadow: var(--kk-shadow-md);
	padding: 8px 16px;
	font-size: .82rem;
	font-weight: 700;
	color: var(--kk-deep);
	animation: kkChipFloat 7s ease-in-out infinite;
}
.kk-stage-chip-l { left: 12%; top: 34%; rotate: -4deg; }
.kk-stage-chip-r { right: 12%; top: 56%; rotate: 3deg; animation-delay: 1.6s; }
@keyframes kkChipFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.kk-stage-foot { max-width: 560px; margin: 28px auto 0; }
.kk-stage-excerpt { color: var(--kk-ink-soft); margin: 0 0 20px; }
@media (max-width: 720px) {
	.kk-stage-chip-l { left: 2%; top: 20%; }
	.kk-stage-chip-r { right: 2%; top: 64%; }
	.kk-stage-ring { width: 118%; }
}

/* ── FAQ v3: Chat-Dialog ─────────────────────────────────────────── */
.kk-faq-chat { max-width: 680px; margin: 0 auto; }
.kk-chat-row { display: flex; margin-bottom: 14px; }
.kk-chat-q { justify-content: flex-end; }
.kk-chat-a { justify-content: flex-start; gap: 10px; align-items: flex-end; }
.kk-chat-bubble {
	max-width: 82%;
	padding: 14px 18px;
	font-size: .97rem;
	line-height: 1.55;
	box-shadow: var(--kk-shadow-sm);
}
.kk-chat-q .kk-chat-bubble {
	background: linear-gradient(135deg, var(--kk-accent), var(--kk-accent-dark));
	color: #fff;
	font-weight: 600;
	border-radius: var(--kk-radius-lg) var(--kk-radius-lg) var(--kk-radius-sm) var(--kk-radius-lg);
}
.kk-chat-a .kk-chat-bubble {
	background: var(--kk-card);
	border: 1px solid var(--kk-line);
	color: var(--kk-ink);
	border-radius: var(--kk-radius-lg) var(--kk-radius-lg) var(--kk-radius-lg) var(--kk-radius-sm);
}
.kk-chat-name {
	display: block;
	font-family: var(--kk-script);
	font-size: 1.25rem;
	color: var(--kk-accent-dark);
	line-height: 1;
	margin-bottom: 6px;
}
.kk-chat-avatar {
	flex: 0 0 36px;
	width: 36px; height: 36px;
	border-radius: 50%;
	overflow: hidden;
	display: grid; place-items: center;
	background: linear-gradient(150deg, var(--kk-tone), var(--kk-tone-2));
	color: #fff;
	font-weight: 700;
	border: 2px solid #fff;
	box-shadow: var(--kk-shadow-sm);
}
.kk-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kk-chat-cta { text-align: center; margin-top: 28px; }
/* Reveal-Stagger der Bubbles */
.kk-home-faq [data-reveal].is-revealed .reveal-card,
.kk-home-faq .reveal-card { transition-delay: var(--card-delay, 0ms); }

@media (prefers-reduced-motion: reduce) {
	.kk-deck-ring, .kk-stage-ring, .kk-deck-card, .kk-stage-chip { animation: none !important; }
	.kk-deck-stage { transform: none !important; }
}

/* =========================== 37. v5.6 BLUEPRINTS: HERO-VARIANTEN · COVER-VARIANTEN · FLAVORS =========================== */

/* ── Hero "split": ein großer Solo-Pin ── */
.kk-hero-v-split .kk-hero-solo { position: relative; display: grid; place-items: center; }
.kk-hero-solo-halo {
	position: absolute;
	width: min(440px, 92%);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--kk-accent-rgb), .14), transparent 65%);
}
.kk-hero-solo-pin {
	position: relative;
	width: min(330px, 76%);
	aspect-ratio: 2 / 3;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	box-shadow: 0 36px 80px rgba(var(--kk-deep-rgb), .35);
	rotate: 2deg;
}
.kk-hero-solo-pin img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Hero "mosaic": zentrierter Text + Pin-Reihe ── */
.kk-hero-v-mosaic { grid-template-columns: 1fr; text-align: center; padding-bottom: 48px; }
.kk-hero-inner-center { margin: 0 auto; text-align: center; }
.kk-hero-inner-center .kk-hero-ctas { justify-content: center; }
.kk-hero-mosaic {
	display: flex;
	justify-content: center;
	gap: clamp(12px, 2.5vw, 28px);
	margin-top: 36px;
}
.kk-mosaic-pin {
	width: clamp(120px, 22vw, 220px);
	aspect-ratio: 2 / 3;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	box-shadow: 0 24px 56px rgba(var(--kk-deep-rgb), .28);
	animation: kkChipFloat 8s ease-in-out infinite;
}
.kk-mosaic-pin[style*="--i:0"] { rotate: -4deg; animation-delay: 0s; }
.kk-mosaic-pin[style*="--i:1"] { rotate: 2deg; translate: 0 -14px; animation-delay: 1.2s; }
.kk-mosaic-pin[style*="--i:2"] { rotate: 4deg; animation-delay: 2.4s; }
.kk-mosaic-pin img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Hero "editorial": reine Typo + Ghostword + Kategorie-Ticker ── */
.kk-hero-v-editorial { grid-template-columns: 1fr; text-align: center; min-height: min(640px, 86dvh); }
.kk-hero-title-xl { font-size: clamp(2.6rem, 7vw, 5.4rem); }
.kk-hero-ghostword {
	position: absolute;
	left: 50%; top: 52%;
	translate: -50% -50%;
	font-family: var(--kk-display);
	font-weight: 800;
	font-size: clamp(6rem, 22vw, 18rem);
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(var(--kk-accent-rgb), .14);
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}
.kk-hero-ticker {
	position: absolute;
	left: 0; right: 0; bottom: 22px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: .82rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.kk-hero-ticker a { color: var(--kk-ink-mute); font-weight: 600; }
.kk-hero-ticker a:hover { color: var(--kk-accent-dark); }
.kk-hero-ticker span { color: var(--kk-line-strong); }

/* ── Cover "wide": liegende weiße Editorial-Karte ── */
.kk-cwide {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: clamp(20px, 3vw, 40px);
	align-items: center;
	background: var(--kk-card);
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-lg);
	box-shadow: var(--kk-shadow-md);
	padding: clamp(18px, 2.5vw, 32px);
	color: var(--kk-ink);
}
.kk-cwide-pin { display: block; aspect-ratio: 2 / 3; border-radius: var(--kk-radius-md); overflow: hidden; }
.kk-cwide-pin img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kk-cwide-kicker { display: block; font-family: var(--kk-script); font-size: 1.6rem; color: var(--kk-accent-dark); margin-bottom: 6px; }
.kk-cwide-title { display: block; font-family: var(--kk-display); font-weight: 800; font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.15; margin: 8px 0; color: var(--kk-deep); }
.kk-cwide-excerpt { display: block; color: var(--kk-ink-soft); font-size: .96rem; margin-bottom: 12px; }
@media (max-width: 720px) { .kk-cwide { grid-template-columns: 1fr; } .kk-cwide-pin { max-width: 220px; margin: 0 auto; } }

/* ── Cover "panel": dunkles Split-Panel ── */
.kk-cpanel {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
	background:
		radial-gradient(560px 300px at 90% 0%, rgba(var(--kk-accent-rgb), .25), transparent 60%),
		linear-gradient(150deg, var(--kk-tone-2) 0%, var(--kk-deep) 100%);
	border-radius: var(--kk-radius-lg);
	padding: clamp(28px, 5vw, 64px);
	overflow: hidden;
}
.kk-cpanel-kicker { display: block; font-family: var(--kk-script); font-size: 1.9rem; color: var(--kk-highlight); margin-bottom: 10px; rotate: -1.5deg; }
.kk-cpanel-title { color: #fff; font-size: clamp(1.7rem, 3.6vw, 2.8rem); margin: 12px 0 14px; max-width: 20ch; }
.kk-cpanel-excerpt { color: rgba(255, 255, 255, .78); max-width: 46ch; margin: 0 0 22px; }
.kk-cpanel-pin {
	display: block;
	justify-self: center;
	width: min(300px, 100%);
	aspect-ratio: 2 / 3;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
	rotate: 2deg;
}
.kk-cpanel-pin img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) { .kk-cpanel { grid-template-columns: 1fr; } .kk-cpanel-pin { width: min(240px, 78%); rotate: 0deg; } }

/* ── Kategorien "pills": große Ton-Pills ── */
.kk-cat-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.kk-cat-bigpill {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	padding: 16px 28px;
	border-radius: var(--kk-radius-pill);
	color: #fff;
	font-family: var(--kk-display);
	font-weight: 700;
	font-size: clamp(1rem, 1.8vw, 1.3rem);
	box-shadow: var(--kk-shadow-sm);
	transition: transform .25s var(--kk-ease), box-shadow .25s var(--kk-ease);
}
.kk-cat-bigpill:hover { transform: translateY(-3px) scale(1.03); box-shadow: var(--kk-shadow-md); color: #fff; }
.kk-cat-bigpill.kk-cat-tone-3 { color: var(--kk-deep); }
.kk-cat-bigpill.kk-cat-tone-3:hover { color: var(--kk-deep); }
.kk-cat-bigpill small { font-size: .72em; opacity: .7; font-family: var(--kk-sans); }
.kk-cat-bigpill.kk-cat-tone-0 { background: linear-gradient(150deg, var(--kk-accent), var(--kk-accent-dark)); }
.kk-cat-bigpill.kk-cat-tone-1 { background: linear-gradient(150deg, var(--kk-tone), var(--kk-tone-2)); }
.kk-cat-bigpill.kk-cat-tone-2 { background: linear-gradient(150deg, var(--kk-tone-2), var(--kk-deep)); }
.kk-cat-bigpill.kk-cat-tone-3 { background: linear-gradient(150deg, var(--kk-highlight), var(--kk-highlight-2)); }

/* ── Kategorien "strip": horizontale Snap-Reihe ── */
.kk-cat-strip {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 10px;
	-webkit-overflow-scrolling: touch;
}
.kk-cat-stripcard {
	scroll-snap-align: start;
	flex: 0 0 200px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 140px;
	padding: 18px;
	border-radius: var(--kk-radius-lg);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.kk-cat-stripcard.kk-cat-tone-0 { background: linear-gradient(150deg, var(--kk-accent), var(--kk-accent-dark)); }
.kk-cat-stripcard.kk-cat-tone-1 { background: linear-gradient(150deg, var(--kk-tone), var(--kk-tone-2)); }
.kk-cat-stripcard.kk-cat-tone-2 { background: linear-gradient(150deg, var(--kk-tone-2), var(--kk-deep)); }
.kk-cat-stripcard.kk-cat-tone-3 { background: linear-gradient(150deg, var(--kk-highlight), var(--kk-highlight-2)); color: var(--kk-deep); }
.kk-cat-strip-name { font-family: var(--kk-display); font-weight: 800; font-size: 1.1rem; }

/* ── Testimonial "spotlight": eine große Stimme ── */
.kk-tm-spotlight { max-width: 680px; margin: 0 auto; text-align: center; }
.kk-tm-spotlight blockquote {
	font-family: var(--kk-true-serif);
	font-style: italic;
	font-size: clamp(1.2rem, 2.4vw, 1.6rem);
	line-height: 1.55;
	color: var(--kk-ink);
	border: none; background: none; padding: 0;
	margin: 0 0 22px;
}
.kk-tm-spotlight figcaption { display: flex; align-items: center; justify-content: center; gap: 12px; }

/* ── Autor "inline": minimal zentriert ── */
.kk-author-inline { text-align: center; max-width: 480px; margin: 0 auto; padding: 12px 0; }
.kk-author-inline-photo {
	display: inline-grid;
	place-items: center;
	width: 72px; height: 72px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid var(--kk-accent);
	background: var(--kk-paper-3);
	font-family: var(--kk-display); font-weight: 800; font-size: 1.8rem; color: var(--kk-deep);
}
.kk-author-inline-photo img { width: 100%; height: 100%; object-fit: cover; }
.kk-author-inline-sig { font-family: var(--kk-script); font-size: 1.9rem; color: var(--kk-accent-dark); margin: 10px 0 2px; line-height: 1; }
.kk-author-inline-tag { color: var(--kk-ink-soft); font-size: .95rem; margin: 0 0 8px; }

/* ── FLAVORS: pro Blueprint eine eigene Anmutung ── */
.kk-flavor-sharp { --kk-radius-lg: 12px; --kk-radius-md: 8px; --kk-radius-sm: 4px; }
.kk-flavor-sharp .kk-eyebrow,
.kk-flavor-sharp .kk-section-kicker { letter-spacing: .3em; }
.kk-flavor-sharp .kk-section-head h2::after { width: 40px; height: 3px; border-radius: 0; }
.kk-flavor-sharp .kk-aurora, .kk-flavor-sharp .kk-sparkle-deco { display: none; }

.kk-flavor-glam { --kk-radius-lg: 26px; }
.kk-flavor-glam h1, .kk-flavor-glam h2 { letter-spacing: -.01em; font-weight: 700; }
.kk-flavor-glam .kk-section-kicker { color: var(--kk-highlight-2); }

.kk-flavor-warm .kk-scene { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 88px); }

.kk-flavor-clean .kk-aurora,
.kk-flavor-clean .kk-grain,
.kk-flavor-clean .kk-sparkle-deco,
.kk-flavor-clean #kk-glow { display: none !important; }
.kk-flavor-clean .kk-card { box-shadow: none; border: 1px solid var(--kk-line); }

@media (max-width: 900px) {
	.kk-hero-v-split { grid-template-columns: 1fr; }
	.kk-hero-solo-pin { width: min(240px, 70%); }
	.kk-hero-ghostword { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.kk-mosaic-pin { animation: none !important; }
}

/* =========================== 38. v5.8 AUDIT-FIXES =========================== */

/* Editor-Strip: echtes 3er-Grid (war nie definiert — Audit-Fund) */
.kk-card-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .kk-card-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .kk-card-grid-3 { grid-template-columns: 1fr; } }

/* Grid-Kinder: Text darf die Spalte nie sprengen */
.kk-author-strip-body,
.kk-cwide-body,
.kk-cpanel-body { min-width: 0; }

/* =========================== 39. v6.0 SITE-DNA: CHROME-VARIANTEN · FLAVOR-TEXTUREN · DARK =========================== */

/* ── Header "light": ruhige weiße Editorial-Leiste (Küche/Ordnung/GHF) ── */
.kk-header-light .kk-header-shell {
	max-width: none;
	margin: 0;
	border-radius: 0;
	background: var(--kk-card);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border: none;
	border-bottom: 1px solid var(--kk-line);
	box-shadow: none;
	padding: 14px var(--kk-shell-x);
}
.kk-header-light .kk-header-shell::after { display: none; }
.kk-header-light .kk-brand,
.kk-header-light .kk-brand-name { color: var(--kk-deep); }
.kk-header-light .kk-nav-list a { color: var(--kk-ink-soft); }
.kk-header-light .kk-nav-list a:hover,
.kk-header-light .kk-nav-list a[aria-current="page"] { color: var(--kk-accent-dark); }
.kk-header-light .kk-tool-btn,
.kk-header-light .kk-burger { border-color: var(--kk-line); color: var(--kk-deep); background: transparent; }
.kk-header-light .kk-burger span { background: var(--kk-deep); }
.kk-header-light.is-scrolled .kk-header-shell { box-shadow: 0 6px 24px rgba(var(--kk-deep-rgb), .08); }

/* ── Header "center": Magazin-Masthead, Logo über der Navigation ── */
.kk-header-center .kk-header-shell {
	max-width: none;
	margin: 0;
	border-radius: 0;
	background: var(--kk-paper);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border: none;
	border-bottom: 1px solid var(--kk-line);
	box-shadow: none;
	flex-direction: column;
	gap: 6px;
	padding: 14px var(--kk-shell-x) 8px;
}
.kk-header-center .kk-header-shell::after { display: none; }
.kk-header-center .kk-brand,
.kk-header-center .kk-brand-name { color: var(--kk-deep); }
.kk-header-center .kk-brand { font-size: 1.7rem; }
.kk-header-center .kk-nav { order: 3; }
.kk-header-center .kk-nav-list a { color: var(--kk-ink-soft); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.kk-header-center .kk-nav-list a:hover,
.kk-header-center .kk-nav-list a[aria-current="page"] { color: var(--kk-accent-dark); }
.kk-header-center .kk-header-tools { position: absolute; right: var(--kk-shell-x); top: 16px; }
.kk-header-center .kk-tool-btn,
.kk-header-center .kk-burger { border-color: var(--kk-line); color: var(--kk-deep); background: transparent; }
.kk-header-center .kk-burger span { background: var(--kk-deep); }
.kk-header-center.is-scrolled .kk-header-shell { padding-top: 8px; }
body.kk-chrome-center .kk-main { padding-top: 132px; }
body.kk-chrome-center .kk-hero { padding-top: 148px; }
@media (max-width: 1100px) {
	.kk-header-center .kk-header-shell { flex-direction: row; padding-bottom: 14px; }
	.kk-header-center .kk-header-tools { position: static; }
	body.kk-chrome-center .kk-main { padding-top: 96px; }
	body.kk-chrome-center .kk-hero { padding-top: 110px; }
}

/* ── Footer "slim": eine ruhige Zeile statt Mega-Footer ── */
body.kk-footer-style-slim .kk-site-footer { padding-top: 36px; }
body.kk-footer-style-slim .kk-footer-sparkle { display: none; }
.kk-footer-slimrow {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-bottom: 22px;
}
.kk-footer-slimlinks { flex-direction: row !important; gap: 18px !important; }
.kk-footer-slimlinks a { font-size: .88rem; }

/* ── Flavor-Texturen: jede Seite ihr eigenes Papier ── */
body.kk-flavor-sharp {
	background-image:
		linear-gradient(rgba(127, 127, 127, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(127, 127, 127, .05) 1px, transparent 1px);
	background-size: 28px 28px;
	background-attachment: scroll;
}
body.kk-flavor-glam {
	background-image:
		radial-gradient(900px 540px at 85% -5%, rgba(255, 255, 255, .55), transparent 60%),
		radial-gradient(700px 460px at 0% 25%, rgba(var(--kk-accent-rgb), .07), transparent 60%);
}
body.kk-flavor-warm {
	background-image:
		radial-gradient(1000px 640px at 75% -10%, rgba(var(--kk-highlight-rgb), .14), transparent 60%),
		radial-gradient(800px 520px at -5% 30%, rgba(var(--kk-accent-rgb), .08), transparent 60%);
}

/* ── Dark-Preset-Feinschliff (Technikkiste) ── */
body.kk-flavor-sharp.kk-footer-style-slim .kk-site-footer h2 { font-size: 1.4rem; }
.kk-header-pill .kk-header-shell { /* expliziter Alias der Standard-Pille */ }

/* =========================== 40. v7.1 KISTE · KARUSSELL · NEUE VARIANTEN =========================== */

/* ── BUGFIX: helle/zentrierte Header kippten beim Scrollen zurück ins
 *    Dunkle (.kk-site-header.is-scrolled .kk-header-shell hat 0-3-0). ── */
.kk-site-header.kk-header-light.is-scrolled .kk-header-shell,
.kk-site-header.kk-header-center.is-scrolled .kk-header-shell {
	background: var(--kk-card);
	box-shadow: 0 6px 24px rgba(var(--kk-deep-rgb), .1);
}

/* ── DIE KISTE: öffnet sich, Gegenstände schweben heraus ── */
.kk-kiste-scene { padding-top: 0; padding-bottom: 0; text-align: center; }
.kk-kiste {
	position: relative;
	display: inline-block;
	width: 150px;
	height: 190px;
	margin: 0 auto;
}
.kk-kiste-body {
	position: absolute;
	left: 50%; bottom: 24px;
	translate: -50% 0;
	width: 120px; height: 84px;
	background: linear-gradient(160deg, var(--kk-accent), var(--kk-accent-dark));
	border-radius: 10px;
	box-shadow: inset 0 -10px 22px rgba(0, 0, 0, .22), 0 14px 30px rgba(var(--kk-deep-rgb), .25);
	display: grid;
	place-items: center;
	z-index: 3;
}
.kk-kiste-label {
	color: rgba(255, 255, 255, .85);
	font-family: var(--kk-display);
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: .04em;
}
.kk-kiste-lid {
	position: absolute;
	left: 50%; bottom: 104px;
	translate: -50% 0;
	width: 132px; height: 20px;
	background: linear-gradient(160deg, var(--kk-accent-dark), var(--kk-accent));
	border-radius: 6px;
	box-shadow: 0 6px 14px rgba(var(--kk-deep-rgb), .25);
	transform-origin: 6% 100%;
	z-index: 4;
}
.kk-kiste-shadow {
	position: absolute;
	left: 50%; bottom: 12px;
	translate: -50% 0;
	width: 140px; height: 14px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(var(--kk-deep-rgb), .28), transparent);
	z-index: 1;
}
.kk-kiste-item {
	position: absolute;
	left: 50%; bottom: 78px;
	translate: -50% 0;
	color: var(--kk-accent-dark);
	opacity: 0;
	z-index: 2;
}
/* Reveal: Deckel klappt auf, Items steigen gestaffelt + floaten dann */
.kk-reveal.is-revealed .kk-kiste-lid {
	animation: kkLidOpen .9s var(--kk-ease) .15s forwards;
}
@keyframes kkLidOpen {
	60% { rotate: -118deg; }
	100% { rotate: -106deg; }
}
.kk-reveal.is-revealed .kk-kiste-item-0 { animation: kkItemRise 1s var(--kk-ease) .55s forwards, kkItemFloat 5s ease-in-out 1.6s infinite; --rise-x: -52px; --rise-y: -96px; --rise-r: -14deg; }
.kk-reveal.is-revealed .kk-kiste-item-1 { animation: kkItemRise 1s var(--kk-ease) .75s forwards, kkItemFloat 5.6s ease-in-out 1.8s infinite; --rise-x: 2px;   --rise-y: -128px; --rise-r: 6deg; }
.kk-reveal.is-revealed .kk-kiste-item-2 { animation: kkItemRise 1s var(--kk-ease) .95s forwards, kkItemFloat 6.2s ease-in-out 2s infinite;  --rise-x: 54px;  --rise-y: -92px;  --rise-r: 15deg; }
@keyframes kkItemRise {
	0% { opacity: 0; transform: translate(0, 10px) scale(.5) rotate(0deg); }
	100% { opacity: 1; transform: translate(var(--rise-x), var(--rise-y)) scale(1) rotate(var(--rise-r)); }
}
@keyframes kkItemFloat {
	0%, 100% { margin-bottom: 0; }
	50% { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.kk-kiste-lid { rotate: -106deg; }
	.kk-kiste-item { opacity: 1; }
	.kk-kiste-item-0 { transform: translate(-52px, -96px) rotate(-14deg); }
	.kk-kiste-item-1 { transform: translate(2px, -128px) rotate(6deg); }
	.kk-kiste-item-2 { transform: translate(54px, -92px) rotate(15deg); }
	.kk-reveal.is-revealed .kk-kiste-lid,
	.kk-reveal.is-revealed .kk-kiste-item { animation: none !important; }
}

/* ── Testimonial-KARUSSELL (Variante 'carousel') ── */
.kk-tm-carousel-live .kk-tm-grid {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.kk-tm-carousel-live .kk-tm-grid::-webkit-scrollbar { display: none; }
.kk-tm-carousel-live .kk-tm-card {
	flex: 0 0 min(420px, 88%);
	scroll-snap-align: center;
}
.kk-tm-carousel-live .kk-tm-card:nth-child(2) { background: var(--kk-card); border-color: var(--kk-line); }
.kk-tm-carousel-live .kk-tm-card:nth-child(2) blockquote { color: var(--kk-ink); }
.kk-tm-carousel-live .kk-tm-card:nth-child(2)::before { color: var(--kk-accent); opacity: .35; }
.kk-tm-carousel-live .kk-tm-card:nth-child(2) .kk-tm-meta b { color: var(--kk-deep); }
.kk-tm-carousel-live .kk-tm-card:nth-child(2) .kk-tm-meta span { color: var(--kk-ink-mute); }
.kk-tm-carousel-live .kk-tm-card:nth-child(2) .kk-tm-avatar { background: linear-gradient(150deg, var(--kk-accent), var(--kk-accent-dark)); color: #fff; }
.kk-tm-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.kk-dot {
	width: 9px; height: 9px;
	border-radius: 50%;
	border: none;
	background: var(--kk-line-strong);
	cursor: pointer;
	transition: scale .25s var(--kk-ease), background .25s var(--kk-ease);
	padding: 0;
}
.kk-dot.is-active { background: var(--kk-accent); scale: 1.35; }

/* ── Editor-SLIDER (Variante 'slider') ── */
.kk-editor-slider { position: relative; display: flex; align-items: center; gap: 10px; }
.kk-editor-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	flex: 1;
	padding: 6px 2px 14px;
}
.kk-editor-track::-webkit-scrollbar { display: none; }
.kk-editor-track .kk-card { flex: 0 0 clamp(180px, 26vw, 260px); scroll-snap-align: start; }
.kk-slider-arrow {
	flex: 0 0 44px;
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid var(--kk-line);
	background: var(--kk-card);
	color: var(--kk-deep);
	font-size: 1.1rem;
	cursor: pointer;
	box-shadow: var(--kk-shadow-sm);
	transition: background .25s var(--kk-ease), color .25s var(--kk-ease), transform .25s var(--kk-ease);
}
.kk-slider-arrow:hover { background: var(--kk-accent); color: #fff; transform: scale(1.06); }
@media (max-width: 640px) { .kk-slider-arrow { display: none; } }

/* ── FAQ 'cards': 2-spaltiges Q&A-Raster ── */
.kk-faq-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 920px; margin: 0 auto; }
.kk-faq-card {
	background: var(--kk-card);
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-lg);
	box-shadow: var(--kk-shadow-sm);
	padding: 22px;
}
.kk-faq-card h3 { font-size: 1.05rem; margin: 0 0 8px; color: var(--kk-accent-dark); }
.kk-faq-card p { font-size: .94rem; color: var(--kk-ink-soft); margin: 0; }
@media (max-width: 720px) { .kk-faq-cards { grid-template-columns: 1fr; } }

/* ── FAQ 'timeline': nummerierte Schritte an einer Linie ── */
.kk-faq-timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 680px; position: relative; }
.kk-faq-timeline::before {
	content: "";
	position: absolute;
	left: 19px; top: 8px; bottom: 8px;
	width: 2px;
	background: var(--kk-line-strong);
}
.kk-faq-timeline li { display: flex; gap: 20px; padding: 0 0 28px; position: relative; }
.kk-faq-tl-num {
	flex: 0 0 40px;
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--kk-accent);
	color: #fff;
	font-family: var(--kk-script);
	font-size: .9rem;
	font-weight: 700;
	z-index: 1;
}
.kk-faq-timeline h3 { font-size: 1.05rem; margin: 8px 0 6px; }
.kk-faq-timeline p { font-size: .94rem; color: var(--kk-ink-soft); margin: 0; }

/* ── Autor 'split': großes Foto + Statement ── */
.kk-author-split {
	display: grid;
	grid-template-columns: minmax(0, 380px) 1fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	max-width: 1000px;
	margin: 0 auto;
}
.kk-author-split-photo {
	aspect-ratio: 4 / 5;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	box-shadow: var(--kk-shadow-md);
	background: linear-gradient(150deg, var(--kk-tone), var(--kk-tone-2));
	display: grid; place-items: center;
	color: #fff; font-family: var(--kk-display); font-size: 4rem; font-weight: 800;
}
.kk-author-split-photo img { width: 100%; height: 100%; object-fit: cover; }
.kk-author-split-body h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 6px 0 12px; }
.kk-author-split-body p { color: var(--kk-ink-soft); margin: 0 0 18px; }
@media (max-width: 760px) {
	.kk-author-split { grid-template-columns: 1fr; }
	.kk-author-split-photo { max-width: 280px; margin: 0 auto; }
	.kk-author-split-body { text-align: center; }
}

/* ── Autor 'polaroid': Foto mit Tape + Handschrift-Notiz ── */
.kk-author-polaroid {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(24px, 5vw, 64px);
	flex-wrap: wrap;
	max-width: 880px;
	margin: 0 auto;
}
.kk-polaroid {
	background: #fff;
	padding: 12px 12px 14px;
	border-radius: 4px;
	box-shadow: var(--kk-shadow-md);
	rotate: -3deg;
	position: relative;
	flex: 0 0 auto;
}
.kk-polaroid-tape {
	position: absolute;
	top: -12px; left: 50%;
	translate: -50% 0;
	width: 90px; height: 26px;
	background: rgba(var(--kk-highlight-rgb), .65);
	rotate: -2deg;
	border-radius: 2px;
}
.kk-polaroid-img { display: block; width: 200px; aspect-ratio: 1; overflow: hidden; background: var(--kk-paper-3); }
.kk-polaroid-img img { width: 100%; height: 100%; object-fit: cover; }
.kk-polaroid-initial { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--kk-display); font-size: 3.4rem; font-weight: 800; color: var(--kk-deep); }
.kk-polaroid-caption {
	display: block;
	text-align: center;
	font-family: var(--kk-script);
	font-size: 1.5rem;
	color: var(--kk-ink);
	padding-top: 8px;
}
.kk-polaroid-note { max-width: 380px; }
.kk-polaroid-script { font-family: var(--kk-script); font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--kk-accent-dark); line-height: 1.25; margin: 0 0 10px; }
.kk-polaroid-bio { color: var(--kk-ink-soft); font-size: .95rem; margin: 0 0 10px; }

/* =========================== 41. v7.2 CINEMATIC KISTE · AUTHOR SHOWCASE =========================== */

/* ── Kiste v2: Vollbild-Filmszene statt kleinem Icon-Stack ── */
.kk-kiste-cine {
	position: relative;
	margin: 0;
	padding: clamp(72px, 10vw, 140px) var(--kk-shell-x) clamp(56px, 8vw, 110px);
	background:
		radial-gradient(900px 460px at 50% 118%, rgba(var(--kk-accent-rgb), .35), transparent 65%),
		radial-gradient(700px 380px at 18% -10%, rgba(var(--kk-highlight-rgb), .10), transparent 60%),
		linear-gradient(180deg, color-mix(in srgb, var(--kk-deep) 92%, #000) 0%, var(--kk-deep) 100%);
	overflow: hidden;
	text-align: center;
}
.kk-cine-bg { position: absolute; inset: 0; pointer-events: none; }
.kk-cine-dust {
	position: absolute;
	width: 5px; height: 5px;
	border-radius: 50%;
	background: rgba(var(--kk-highlight-rgb), .8);
	filter: blur(.5px);
	opacity: 0;
	animation: kkDustDrift 9s ease-in-out infinite;
}
.kk-cine-dust-0 { left: 18%; bottom: 26%; animation-delay: 0s; }
.kk-cine-dust-1 { left: 34%; bottom: 40%; animation-delay: 1.8s; width: 3px; height: 3px; }
.kk-cine-dust-2 { left: 55%; bottom: 52%; animation-delay: 3.4s; }
.kk-cine-dust-3 { left: 70%; bottom: 34%; animation-delay: 5s; width: 4px; height: 4px; }
.kk-cine-dust-4 { left: 84%; bottom: 24%; animation-delay: 6.6s; width: 3px; height: 3px; }
@keyframes kkDustDrift {
	0% { opacity: 0; translate: 0 0; }
	15% { opacity: .9; }
	85% { opacity: 0; }
	100% { opacity: 0; translate: 14px -110px; }
}
.kk-cine-script {
	display: inline-block;
	font-family: var(--kk-script);
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	color: rgba(var(--kk-highlight-rgb), .95);
	rotate: -2deg;
	margin-bottom: clamp(28px, 4vw, 48px);
	text-shadow: 0 4px 24px rgba(0, 0, 0, .4);
}
.kk-kiste {
	position: relative;
	display: inline-block;
	width: 230px;
	height: 280px;
	margin: 0 auto;
	perspective: 900px;
}
/* Lichtkegel aus der offenen Kiste */
.kk-cine-beam {
	position: absolute;
	left: 50%; bottom: 96px;
	translate: -50% 0;
	width: 300px; height: 240px;
	background: conic-gradient(from 155deg at 50% 100%, transparent 40%, rgba(var(--kk-highlight-rgb), .35) 50%, transparent 60%);
	filter: blur(6px);
	opacity: 0;
	transform-origin: bottom center;
	z-index: 1;
	pointer-events: none;
}
.kk-reveal.is-revealed .kk-cine-beam { animation: kkBeam 1.4s var(--kk-ease) .7s forwards, kkBeamPulse 4s ease-in-out 2.2s infinite; }
@keyframes kkBeam { from { opacity: 0; scale: .6 .2; } to { opacity: 1; scale: 1 1; } }
@keyframes kkBeamPulse { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }
/* Kiste in 3D: Front + Seitenfläche */
.kk-kiste-body {
	position: absolute;
	left: 50%; bottom: 26px;
	translate: -50% 0;
	width: 168px; height: 110px;
	background:
		linear-gradient(115deg, rgba(255, 255, 255, .16) 0%, transparent 28%),
		linear-gradient(160deg, var(--kk-accent), var(--kk-accent-dark));
	border-radius: 10px;
	box-shadow:
		inset 0 -16px 30px rgba(0, 0, 0, .3),
		inset 0 2px 0 rgba(255, 255, 255, .2),
		0 22px 50px rgba(0, 0, 0, .45);
	display: grid;
	place-items: center;
	z-index: 3;
	transform: rotateX(6deg);
}
.kk-kiste-side {
	position: absolute;
	left: calc(50% + 78px);
	bottom: 30px;
	width: 26px; height: 104px;
	background: linear-gradient(160deg, var(--kk-accent-dark), color-mix(in srgb, var(--kk-accent-dark) 60%, #000));
	border-radius: 0 8px 8px 0;
	transform: skewY(-8deg);
	z-index: 2;
}
.kk-kiste-label {
	color: rgba(255, 255, 255, .92);
	font-family: var(--kk-display);
	font-weight: 800;
	font-size: 2rem;
	letter-spacing: .04em;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.kk-kiste-lid {
	position: absolute;
	left: 50%; bottom: 132px;
	translate: -50% 0;
	width: 184px; height: 24px;
	background:
		linear-gradient(115deg, rgba(255, 255, 255, .2) 0%, transparent 30%),
		linear-gradient(160deg, var(--kk-accent-dark), var(--kk-accent));
	border-radius: 7px;
	box-shadow: 0 8px 18px rgba(0, 0, 0, .4);
	transform-origin: 4% 100%;
	z-index: 5;
}
.kk-kiste-shadow {
	position: absolute;
	left: 50%; bottom: 10px;
	translate: -50% 0;
	width: 220px; height: 20px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0, 0, 0, .5), transparent);
	z-index: 1;
}
/* Items: groß, glühend, mit Lichtspur */
.kk-kiste-item {
	position: absolute;
	left: 50%; bottom: 100px;
	translate: -50% 0;
	color: rgba(var(--kk-highlight-rgb), 1);
	filter: drop-shadow(0 0 14px rgba(var(--kk-highlight-rgb), .65));
	opacity: 0;
	z-index: 4;
}
.kk-reveal.is-revealed .kk-kiste-item-0 { animation: kkItemRise 1.2s var(--kk-ease) .8s forwards, kkItemFloat 5s ease-in-out 2.1s infinite; --rise-x: -88px; --rise-y: -132px; --rise-r: -16deg; }
.kk-reveal.is-revealed .kk-kiste-item-1 { animation: kkItemRise 1.2s var(--kk-ease) 1.05s forwards, kkItemFloat 5.6s ease-in-out 2.35s infinite; --rise-x: 0px; --rise-y: -178px; --rise-r: 5deg; }
.kk-reveal.is-revealed .kk-kiste-item-2 { animation: kkItemRise 1.2s var(--kk-ease) 1.3s forwards, kkItemFloat 6.2s ease-in-out 2.6s infinite; --rise-x: 90px; --rise-y: -126px; --rise-r: 17deg; }
@media (max-width: 540px) {
	.kk-kiste { width: 190px; height: 240px; }
	.kk-reveal.is-revealed .kk-kiste-item-0 { --rise-x: -64px; --rise-y: -112px; }
	.kk-reveal.is-revealed .kk-kiste-item-1 { --rise-y: -150px; }
	.kk-reveal.is-revealed .kk-kiste-item-2 { --rise-x: 66px; --rise-y: -106px; }
}
@media (prefers-reduced-motion: reduce) {
	.kk-cine-dust, .kk-cine-beam { display: none; }
	.kk-kiste-lid { rotate: -106deg; }
	.kk-kiste-item { opacity: 1; }
	.kk-kiste-item-0 { transform: translate(-88px, -132px) rotate(-16deg); }
	.kk-kiste-item-1 { transform: translate(0, -178px) rotate(5deg); }
	.kk-kiste-item-2 { transform: translate(90px, -126px) rotate(17deg); }
	.kk-reveal.is-revealed .kk-kiste-lid,
	.kk-reveal.is-revealed .kk-kiste-item,
	.kk-reveal.is-revealed .kk-cine-beam { animation: none !important; }
}

/* ── Author "showcase": Premium-Panel ── */
.kk-author-showcase {
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	border-radius: var(--kk-radius-lg);
	background:
		radial-gradient(560px 300px at 88% 0%, rgba(var(--kk-accent-rgb), .18), transparent 60%),
		linear-gradient(150deg, var(--kk-tone) 0%, var(--kk-tone-2) 100%);
	padding: clamp(32px, 5vw, 64px);
	color: #fff;
	overflow: hidden;
}
.kk-showcase-inner {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
	max-width: 920px;
	margin: 0 auto;
}
.kk-showcase-visual { position: relative; display: grid; place-items: center; }
.kk-showcase-photo {
	width: 200px; height: 200px;
	border-radius: 50%;
	overflow: hidden;
	border: 4px solid rgba(255, 255, 255, .9);
	box-shadow: 0 24px 56px rgba(0, 0, 0, .35);
	display: grid; place-items: center;
	background: linear-gradient(150deg, var(--kk-accent), var(--kk-accent-dark));
}
.kk-showcase-photo img { width: 100%; height: 100%; object-fit: cover; }
.kk-showcase-initial { font-family: var(--kk-display); font-size: 4.4rem; font-weight: 800; color: #fff; }
.kk-showcase-orbit {
	position: absolute;
	width: 252px; height: 252px;
	border-radius: 50%;
	border: 1.5px dashed rgba(255, 255, 255, .35);
	animation: kkDeckRing 26s linear infinite;
}
.kk-showcase-orbit i {
	position: absolute;
	top: -5px; left: 50%;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--kk-highlight);
	box-shadow: 0 0 12px rgba(var(--kk-highlight-rgb), .8);
}
.kk-showcase-chip {
	position: absolute;
	background: var(--kk-card);
	color: var(--kk-deep);
	border-radius: var(--kk-radius-pill);
	padding: 8px 14px;
	font-size: .8rem;
	font-weight: 700;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
	animation: kkChipFloat 6.5s ease-in-out infinite;
	white-space: nowrap;
}
.kk-showcase-chip b { color: var(--kk-accent-dark); }
.kk-showcase-chip-a { top: 6px; right: -16px; rotate: 4deg; }
.kk-showcase-chip-b { bottom: 10px; left: -22px; rotate: -4deg; animation-delay: 1.4s; }
.kk-showcase-sig {
	display: block;
	font-family: var(--kk-script);
	font-size: clamp(2rem, 3.4vw, 2.8rem);
	color: var(--kk-highlight);
	line-height: 1;
	margin-bottom: 8px;
	rotate: -1.5deg;
}
.kk-showcase-tagline { color: #fff; font-size: clamp(1.25rem, 2.4vw, 1.8rem); margin: 0 0 12px; max-width: 24ch; }
.kk-showcase-bio { color: rgba(255, 255, 255, .8); font-size: .98rem; margin: 0 0 20px; max-width: 52ch; }
.kk-showcase-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kk-author-showcase .kk-author-icon { background: rgba(255, 255, 255, .14); color: #fff; width: 40px; height: 40px; }
.kk-author-showcase .kk-author-icon:hover { background: var(--kk-accent); }
@media (max-width: 760px) {
	.kk-showcase-inner { grid-template-columns: 1fr; text-align: center; }
	.kk-showcase-visual { margin-bottom: 8px; }
	.kk-showcase-actions { justify-content: center; }
	.kk-showcase-chip-a { right: 4%; }
	.kk-showcase-chip-b { left: 4%; }
	.kk-showcase-tagline, .kk-showcase-bio { margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.kk-showcase-orbit, .kk-showcase-chip { animation: none !important; }
}

/* =========================== 42. v7.2.1 KISTE-FEINSCHLIFF (Paket-Realismus) =========================== */

/* Mehr Luft: Items dürfen nicht in die Headline fliegen */
.kk-cine-script { margin-bottom: clamp(48px, 7vw, 84px); position: relative; z-index: 6; }

/* Lichtkegel v2: klarer Trapez-Kegel, hell aus der Kistenöffnung */
.kk-cine-beam {
	left: 50%; bottom: 118px;
	translate: -50% 0;
	width: 280px; height: 230px;
	background: linear-gradient(to top, rgba(var(--kk-highlight-rgb), .5), rgba(var(--kk-highlight-rgb), .12) 60%, transparent);
	clip-path: polygon(38% 100%, 62% 100%, 100% 0%, 0% 0%);
	filter: blur(7px);
	transform-origin: bottom center;
}

/* Korpus: Karton-Anmutung — Latten-Linien + Klebeband-Strip */
.kk-kiste-body {
	background:
		linear-gradient(115deg, rgba(255, 255, 255, .14) 0%, transparent 28%),
		repeating-linear-gradient(0deg, transparent 0 24px, rgba(0, 0, 0, .10) 24px 26px),
		linear-gradient(160deg, var(--kk-accent), var(--kk-accent-dark));
}
.kk-kiste-body::before {
	content: "";
	position: absolute;
	left: 50%; top: 0; bottom: 0;
	translate: -50% 0;
	width: 30px;
	background: rgba(var(--kk-highlight-rgb), .35);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

/* Versandetikett statt Riesen-Lettermark ("OK" las sich als Button) */
.kk-kiste-label { display: none; }
.kk-kiste-sticker {
	position: relative;
	z-index: 1;
	background: #fff;
	color: var(--kk-deep);
	font-family: var(--kk-script);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1;
	padding: 8px 16px 9px;
	border-radius: 4px;
	rotate: -4deg;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}
.kk-kiste-sticker::before {
	content: "";
	position: absolute;
	top: -7px; left: 50%;
	translate: -50% 0;
	width: 42px; height: 12px;
	background: rgba(var(--kk-highlight-rgb), .55);
	rotate: 2deg;
	border-radius: 2px;
}

/* Alte Einzel-Deckel-Optik ersetzen: zwei aufklappende Kartonlaschen */
.kk-kiste-lid { display: none; }
.kk-kiste-flap {
	position: absolute;
	bottom: 132px;
	width: 86px; height: 22px;
	background:
		linear-gradient(115deg, rgba(255, 255, 255, .16) 0%, transparent 35%),
		linear-gradient(160deg, var(--kk-accent-dark), var(--kk-accent));
	box-shadow: 0 6px 14px rgba(0, 0, 0, .35), inset 0 -3px 6px rgba(0, 0, 0, .25);
	z-index: 5;
}
.kk-kiste-flap-l { left: calc(50% - 84px); border-radius: 7px 4px 0 4px; transform-origin: 100% 100%; }
.kk-kiste-flap-r { left: calc(50% - 2px); border-radius: 4px 7px 4px 0; transform-origin: 0% 100%; }
.kk-reveal.is-revealed .kk-kiste-flap-l { animation: kkFlapL .8s var(--kk-ease) .15s forwards; }
.kk-reveal.is-revealed .kk-kiste-flap-r { animation: kkFlapR .8s var(--kk-ease) .25s forwards; }
@keyframes kkFlapL { 70% { rotate: -132deg; } 100% { rotate: -118deg; } }
@keyframes kkFlapR { 70% { rotate: 132deg; } 100% { rotate: 118deg; } }

/* Items: unterhalb der Headline halten, Tiefe über Größenstaffel */
.kk-reveal.is-revealed .kk-kiste-item-0 { --rise-x: -84px; --rise-y: -118px; --rise-r: -14deg; }
.kk-reveal.is-revealed .kk-kiste-item-1 { --rise-x: 0px; --rise-y: -152px; --rise-r: 5deg; }
.kk-reveal.is-revealed .kk-kiste-item-2 { --rise-x: 86px; --rise-y: -112px; --rise-r: 15deg; }
.kk-kiste-item-1 svg { width: 52px; height: 52px; }
.kk-kiste-item-0 svg, .kk-kiste-item-2 svg { width: 42px; height: 42px; }

@media (max-width: 540px) {
	.kk-reveal.is-revealed .kk-kiste-item-0 { --rise-x: -62px; --rise-y: -100px; }
	.kk-reveal.is-revealed .kk-kiste-item-1 { --rise-y: -132px; }
	.kk-reveal.is-revealed .kk-kiste-item-2 { --rise-x: 64px; --rise-y: -96px; }
	.kk-kiste-flap { width: 72px; }
	.kk-kiste-flap-l { left: calc(50% - 70px); }
}
@media (prefers-reduced-motion: reduce) {
	.kk-kiste-flap-l { rotate: -118deg; }
	.kk-kiste-flap-r { rotate: 118deg; }
	.kk-reveal.is-revealed .kk-kiste-flap-l,
	.kk-reveal.is-revealed .kk-kiste-flap-r { animation: none !important; }
}

/* =========================== 43. v7.3 HOLLYWOOD PACK =========================== */

/* Partikel-Canvas: liegt hinter dem Kisten-Inhalt */
.kk-particles {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}
.kk-kiste-cine .kk-cine-inner { position: relative; z-index: 2; }

/* Fluid-Cursor: drei Schichten — Kern, Mitte, Schweif */
#kk-glow { display: none; }
.kk-glow-layer {
	position: fixed;
	top: 0; left: 0;
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	transition: opacity .5s ease;
	will-change: transform;
	z-index: 1;
}
.kk-glow-layer.is-on { opacity: 1; }
.kk-glow-layer-0 {
	width: 440px; height: 440px;
	background: radial-gradient(circle, rgba(var(--kk-accent-rgb), .13), rgba(var(--kk-highlight-rgb), .05) 45%, transparent 65%);
}
.kk-glow-layer-1 {
	width: 440px; height: 440px;
	margin: 70px;
	background: radial-gradient(circle, rgba(var(--kk-highlight-rgb), .09), transparent 55%);
	scale: .68;
}
.kk-glow-layer-2 {
	width: 440px; height: 440px;
	margin: 130px;
	background: radial-gradient(circle, rgba(var(--kk-accent-rgb), .08), transparent 50%);
	scale: .42;
}
@media (max-width: 720px) { .kk-glow-layer { display: none; } }

/* Volumetrisches Licht: zwei zusätzliche God-Ray-Schrägen in der Szene */
.kk-cine-bg::before,
.kk-cine-bg::after {
	content: "";
	position: absolute;
	bottom: 0;
	width: 90px;
	height: 78%;
	background: linear-gradient(to top, rgba(var(--kk-highlight-rgb), .14), transparent 75%);
	filter: blur(14px);
	transform-origin: bottom center;
	animation: kkRaySway 9s ease-in-out infinite;
}
.kk-cine-bg::before { left: calc(50% - 180px); rotate: -16deg; }
.kk-cine-bg::after { left: calc(50% + 96px); rotate: 14deg; animation-delay: 2.5s; }
@keyframes kkRaySway {
	0%, 100% { opacity: .5; scale: 1 1; }
	50% { opacity: 1; scale: 1.15 1.02; }
}

/* Bloom-Boost: Items + primäre CTAs strahlen in HDR-Anmutung */
.kk-kiste-item {
	filter:
		drop-shadow(0 0 10px rgba(var(--kk-highlight-rgb), .9))
		drop-shadow(0 0 30px rgba(var(--kk-highlight-rgb), .45));
}
.kk-cta-primary:hover,
.kk-header-cta:hover {
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, .14),
		0 12px 36px rgba(var(--kk-accent-rgb), .6),
		0 0 56px rgba(var(--kk-accent-rgb), .5),
		0 0 110px rgba(var(--kk-accent-rgb), .25),
		inset 0 1px 0 rgba(255, 255, 255, .4);
}

/* Dolly-Zoom: Hero-Inhalt braucht eigenen Stacking-Context */
.kk-hero .kk-hero-inner { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
	.kk-glow-layer, .kk-particles, .kk-cine-bg::before, .kk-cine-bg::after { display: none !important; }
	.kk-hero .kk-hero-inner { transform: none !important; opacity: 1 !important; }
}

/* =========================== 44. v8.0 PHASE 0: AMBIENT-KISTE =========================== */
/* Die Kiste ist kein Vollbild-Takeover mehr, sondern ein fixierter
 * Hintergrund-Begleiter unten rechts (z-index -1, Opazität ≤ .22).
 * Der 1px-Marker liefert via Story-Engine --kk-scrub über ~3.2
 * Viewporthöhen: einblenden → öffnen → Items steigen als Konstellation
 * auf → alles verweht. Ohne JS / bei Reduced-Motion: statisches,
 * halb geöffnetes Standbild bei .12 (Fallback --kk-scrub: .5). */

.kk-kiste-marker {
	position: relative;
	height: 1px;
	margin: 0;
	--kk-scrub: .5;
	--kk-amb-max: .22;
}
html.no-js .kk-kiste-marker { --kk-amb-max: .12; }

.kk-ambient-fix {
	position: fixed;
	right: clamp(8px, 4vw, 56px);
	bottom: 5vh;
	width: 320px;
	height: 430px;
	z-index: -1;
	pointer-events: none;
	display: grid;
	place-items: end center;
	/* Envelope: schnell rein, lange halten, weich raus — nie über --kk-amb-max */
	opacity: calc(min(var(--kk-scrub) * 9, 1) * min((1 - var(--kk-scrub)) * 4, 1) * var(--kk-amb-max));
}

/* "Mitbewegen": ganze Kiste driftet langsam aufwärts + kommt minimal heran */
.kk-ambient-fix .kk-kiste {
	scale: calc(.56 + .1 * var(--kk-scrub));
	transform-origin: bottom center;
	translate: 0 calc(var(--kk-scrub) * -11vh);
}

/* Öffnungsphase: erste ~40% des Scrubs öffnen die Laschen + den Kegel */
.kk-ambient-fix .kk-kiste-flap-l { rotate: calc(min(var(--kk-scrub) * 2.5, 1) * -118deg); animation: none !important; }
.kk-ambient-fix .kk-kiste-flap-r { rotate: calc(min(var(--kk-scrub) * 2.5, 1) * 118deg); animation: none !important; }
.kk-ambient-fix .kk-cine-beam {
	opacity: min(var(--kk-scrub) * 2.5, 1);
	scale: 1 min(var(--kk-scrub) * 2.5, 1);
	animation: none !important;
}

/* Items: steigen LANGSAM über den ganzen Scrub, driften auseinander,
 * werden größer + transparenter — "Sternenstaub" hinter dem Content */
.kk-ambient-fix .kk-kiste-item {
	opacity: min(calc(var(--kk-scrub) * 2.6), calc((1.04 - var(--kk-scrub)) * 2.4), 1);
	animation: none !important;
}
.kk-ambient-fix .kk-kiste-item-0 { transform: translate(calc(-130px * var(--kk-scrub)), calc(-250px * var(--kk-scrub))) rotate(calc(-18deg * var(--kk-scrub))) scale(calc(.5 + 1 * var(--kk-scrub))); }
.kk-ambient-fix .kk-kiste-item-1 { transform: translate(calc(8px * var(--kk-scrub)), calc(-320px * var(--kk-scrub))) rotate(calc(7deg * var(--kk-scrub))) scale(calc(.5 + 1.2 * var(--kk-scrub))); }
.kk-ambient-fix .kk-kiste-item-2 { transform: translate(calc(126px * var(--kk-scrub)), calc(-230px * var(--kk-scrub))) rotate(calc(20deg * var(--kk-scrub))) scale(calc(.5 + .9 * var(--kk-scrub))); }

/* K3: Sticker bleibt lesbar, lange Lettermarks laufen nicht aus dem Label */
.kk-kiste-sticker {
	max-width: 116px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Dust-Partikel (Canvas) füllen den Ambient-Layer, Envelope dimmt mit */
.kk-ambient-fix .kk-particles { z-index: 0; }

@media (max-width: 720px) {
	.kk-ambient-fix {
		right: 2vw;
		bottom: 4vh;
		width: 230px;
		height: 330px;
	}
	.kk-kiste-marker { --kk-amb-max: .18; }
	.kk-ambient-fix .kk-kiste { scale: calc(.44 + .08 * var(--kk-scrub)); }
	.kk-ambient-fix .kk-kiste-item-0 { transform: translate(calc(-86px * var(--kk-scrub)), calc(-180px * var(--kk-scrub))) rotate(calc(-18deg * var(--kk-scrub))) scale(calc(.5 + .8 * var(--kk-scrub))); }
	.kk-ambient-fix .kk-kiste-item-1 { transform: translate(calc(6px * var(--kk-scrub)), calc(-230px * var(--kk-scrub))) rotate(calc(7deg * var(--kk-scrub))) scale(calc(.5 + .9 * var(--kk-scrub))); }
	.kk-ambient-fix .kk-kiste-item-2 { transform: translate(calc(84px * var(--kk-scrub)), calc(-170px * var(--kk-scrub))) rotate(calc(20deg * var(--kk-scrub))) scale(calc(.5 + .7 * var(--kk-scrub))); }
}

@media (prefers-reduced-motion: reduce) {
	/* JS koppelt nicht; --kk-scrub bleibt .5 → ruhiges Standbild */
	.kk-ambient-fix { opacity: .12; }
}

/* =========================== 45. v8.0 PHASE 2: SIGNATURE-SZENEN =========================== */
/* Pro Seite EINE scroll-gesteuerte Szene (CINEMATIC-PLAN §Phase 2).
 * Host-Sektionen tragen data-kk-scene="{preset}" + data-kk-story; alle
 * Bewegung folgt --kk-scrub (linear aus JS, Kurven hier). Fallback ohne
 * JS / Reduced-Motion: var(--kk-scrub, …) zeigt den fertigen Endzustand
 * (bzw. beim Hero-Deck den intakten Anfangszustand). */

/* ── klickkiste · "Pin-Flug": Deck-Pins lösen sich beim Scrollen ── */
[data-kk-scene="klickkiste"] { --kk-fly: clamp(0, (var(--kk-scrub, 0) - .42) * 2.2, 1); }
[data-kk-scene="klickkiste"] .kk-deck-card { transition: box-shadow .4s var(--kk-ease); }
[data-kk-scene="klickkiste"] .kk-deck-card[style*="--i:0"] {
	translate: calc(-34% - var(--kk-fly) * 70%) calc(4% + var(--kk-fly) * 46%);
	rotate: calc(-10deg - var(--kk-fly) * 16deg);
	opacity: calc(1 - var(--kk-fly) * .92);
}
[data-kk-scene="klickkiste"] .kk-deck-card[style*="--i:1"] {
	translate: 0 calc(-2% + var(--kk-fly) * 58%);
	rotate: calc(var(--kk-fly) * 4deg);
	opacity: calc(1 - var(--kk-fly) * .92);
}
[data-kk-scene="klickkiste"] .kk-deck-card[style*="--i:2"] {
	translate: calc(34% + var(--kk-fly) * 70%) calc(4% + var(--kk-fly) * 46%);
	rotate: calc(10deg + var(--kk-fly) * 16deg);
	opacity: calc(1 - var(--kk-fly) * .92);
}

/* ── wohnkiste · "Raum einrichten": Möbel-Icons docken an der Karte an ── */
.kk-scene-room { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.kk-room-item {
	position: absolute;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 16px;
	background: var(--kk-card);
	border: 1px solid var(--kk-line);
	box-shadow: var(--kk-shadow-md);
	color: var(--kk-accent-dark);
	translate: 0 calc((1 - var(--p, 1)) * 46px);
	opacity: var(--p, 1);
}
.kk-room-item-0 { --p: clamp(0, var(--kk-scrub, 1) * 2.6, 1); top: -18px; right: 7%; rotate: -5deg; }
.kk-room-item-1 { --p: clamp(0, (var(--kk-scrub, 1) - .18) * 2.6, 1); top: 36%; right: -14px; rotate: 4deg; }
.kk-room-item-2 { --p: clamp(0, (var(--kk-scrub, 1) - .36) * 2.6, 1); bottom: -18px; right: 22%; rotate: -3deg; }
@media (max-width: 720px) {
	.kk-room-item { width: 44px; height: 44px; }
	.kk-room-item-1 { right: -6px; }
}

/* ── kuechenkiste · "Rezept-Dampf": Deckel hebt sich, Dampf zeichnet sich ── */
[data-kk-scene="kuechenkiste"] .kk-cpanel { position: relative; }
.kk-scene-steam {
	position: absolute;
	left: clamp(18px, 5%, 48px);
	bottom: 14px;
	width: 64px;
	height: 134px;
	z-index: 2;
	pointer-events: none;
}
.kk-steam-pot { position: absolute; bottom: 0; left: 50%; translate: -50% 0; color: var(--kk-highlight); }
.kk-steam-lid {
	position: absolute;
	bottom: 32px;
	left: 50%;
	width: 32px;
	height: 6px;
	border-radius: 4px;
	background: var(--kk-highlight);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
	translate: -50% calc(min(var(--kk-scrub, 1) * 1.8, 1) * -18px);
	rotate: calc(min(var(--kk-scrub, 1) * 1.8, 1) * -9deg);
}
.kk-steam-svg { position: absolute; bottom: 38px; left: 0; width: 100%; height: 92px; color: rgba(255, 255, 255, .65); }
.kk-steam-path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - min(var(--kk-scrub, 1) * 1.2, 1)); }
.kk-steam-path-1 { stroke-dashoffset: calc(1 - clamp(0, (var(--kk-scrub, 1) - .12) * 1.2, 1)); }
.kk-steam-path-2 { stroke-dashoffset: calc(1 - clamp(0, (var(--kk-scrub, 1) - .24) * 1.2, 1)); }
@media (max-width: 860px) { .kk-scene-steam { height: 110px; } .kk-steam-svg { height: 70px; } }

/* ── ordnungskiste · "Einsortieren": Chaos → gerade Reihe ── */
.kk-scene-sort {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 18px;
	height: 60px;
	margin: 0 0 22px;
	position: relative;
	pointer-events: none;
	--kk-tidy: clamp(0, var(--kk-scrub, 1) * 1.6, 1);
}
.kk-sort-item {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: var(--kk-card);
	border: 1px solid var(--kk-line-strong);
	box-shadow: var(--kk-shadow-sm);
	color: var(--kk-accent-dark);
}
.kk-sort-item-0 { translate: calc((1 - var(--kk-tidy)) * -28px) calc((1 - var(--kk-tidy)) * -16px); rotate: calc((1 - var(--kk-tidy)) * -24deg); }
.kk-sort-item-1 { translate: 0 calc((1 - var(--kk-tidy)) * -28px); rotate: calc((1 - var(--kk-tidy)) * 14deg); }
.kk-sort-item-2 { translate: calc((1 - var(--kk-tidy)) * 32px) calc((1 - var(--kk-tidy)) * -10px); rotate: calc((1 - var(--kk-tidy)) * 28deg); }
.kk-sort-shelf {
	position: absolute;
	bottom: -10px;
	left: 50%;
	translate: -50% 0;
	width: 188px;
	height: 2px;
	border-radius: 1px;
	background: var(--kk-line-strong);
}

/* ── beautykiste · "Shimmer-Vorhang": Glanzwelle über der Bühne ── */
.kk-scene-shimmer {
	position: absolute;
	inset: 0;
	z-index: 3;
	overflow: hidden;
	border-radius: var(--kk-radius-lg);
	pointer-events: none;
}
.kk-scene-shimmer::before {
	content: "";
	position: absolute;
	top: -12%;
	bottom: -12%;
	left: -45%;
	width: 38%;
	rotate: 8deg;
	background: linear-gradient(105deg, transparent, rgba(var(--kk-highlight-rgb), .2) 42%, rgba(255, 255, 255, .3) 50%, rgba(var(--kk-highlight-rgb), .2) 58%, transparent);
	filter: blur(2px);
	translate: calc(var(--kk-scrub, 1) * 480%) 0;
}

/* ── technikkiste · "Boot-Sequenz": Statuszeile + Wireframe-Kacheln ── */
.kk-scene-boot {
	display: flex;
	align-items: center;
	gap: 3px;
	margin: -6px 0 20px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .85rem;
	letter-spacing: .08em;
	color: var(--kk-highlight);
}
.kk-boot-text {
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	clip-path: inset(0 calc((1 - min(var(--kk-scrub, 1) * 1.6, 1)) * 100%) 0 0);
}
.kk-boot-caret { width: 8px; height: 15px; background: currentColor; animation: kkCaretBlink 1s steps(1) infinite; }
@keyframes kkCaretBlink { 50% { opacity: 0; } }
[data-kk-scene="technikkiste"] .kk-cat-color-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--kk-paper);
	border: 1px dashed rgba(var(--kk-accent-rgb), .6);
	pointer-events: none;
}
[data-kk-scene="technikkiste"] .kk-cat-color-tile:nth-child(1)::after { opacity: clamp(0, (.30 - var(--kk-scrub, 1)) * 8, 1); }
[data-kk-scene="technikkiste"] .kk-cat-color-tile:nth-child(2)::after { opacity: clamp(0, (.40 - var(--kk-scrub, 1)) * 8, 1); }
[data-kk-scene="technikkiste"] .kk-cat-color-tile:nth-child(3)::after { opacity: clamp(0, (.50 - var(--kk-scrub, 1)) * 8, 1); }
[data-kk-scene="technikkiste"] .kk-cat-color-tile:nth-child(4)::after { opacity: clamp(0, (.60 - var(--kk-scrub, 1)) * 8, 1); }
[data-kk-scene="technikkiste"] .kk-cat-color-tile:nth-child(5)::after { opacity: clamp(0, (.70 - var(--kk-scrub, 1)) * 8, 1); }
[data-kk-scene="technikkiste"] .kk-cat-color-tile:nth-child(6)::after { opacity: clamp(0, (.80 - var(--kk-scrub, 1)) * 8, 1); }

/* ── cozytrendhub · "Candle-Glow": wandert mit --kk-page-scrub ── */
.kk-scene-candle {
	position: fixed;
	right: 10px;
	top: calc(12vh + var(--kk-page-scrub, .35) * 62vh);
	z-index: -1;
	width: 34px;
	display: grid;
	place-items: center;
	color: var(--kk-accent-dark);
	opacity: .55;
	pointer-events: none;
}
.kk-candle-glow {
	position: absolute;
	top: -28px;
	left: 50%;
	translate: -50% 0;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--kk-highlight-rgb), .5), transparent 70%);
	filter: blur(2px);
	animation: kkCandleFlicker 3.2s ease-in-out infinite;
}
@keyframes kkCandleFlicker {
	0%, 100% { opacity: .65; scale: 1; }
	38% { opacity: .45; scale: .92; }
	62% { opacity: .8; scale: 1.06; }
	80% { opacity: .55; scale: .97; }
}

/* ── goodhomefinds · "Preis-Tag-Drop": fällt an der Schnur, pendelt ── */
.kk-scene-tagdrop {
	position: absolute;
	top: 0;
	right: clamp(20px, 8%, 90px);
	z-index: 3;
	height: 96px;
	pointer-events: none;
	translate: 0 calc((min(var(--kk-scrub, 1) * 1.4, 1) - 1) * 130px);
	opacity: min(var(--kk-scrub, 1) * 4, 1);
}
.kk-tagdrop-string { position: absolute; top: -44px; right: 23px; width: 2px; height: 82px; background: var(--kk-line-strong); }
.kk-tagdrop-tag {
	position: absolute;
	top: 38px;
	right: 4px;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--kk-highlight);
	color: var(--kk-deep);
	box-shadow: var(--kk-shadow-md);
	transform-origin: 50% -44px;
	animation: kkPendulum 3.6s ease-in-out infinite;
}
@keyframes kkPendulum { 0%, 100% { rotate: 5deg; } 50% { rotate: -5deg; } }

@media (prefers-reduced-motion: reduce) {
	.kk-boot-caret, .kk-candle-glow, .kk-tagdrop-tag { animation: none !important; }
	.kk-scene-shimmer { display: none; }
}

/* =========================== 46. v8.0 PHASE 3: PREMIUM-POLISH =========================== */

/* P1 — Glas-Tiefe: Newsletter-Karte wird Frosted-Glass-Panel
 * (transluzenter Marken-Verlauf + backdrop-blur + 1px Innenlinie). */
.kk-newsletter-card {
	background: linear-gradient(135deg, rgba(var(--kk-deep-rgb), .9) 0%, rgba(var(--kk-accent-rgb), .82) 100%);
	-webkit-backdrop-filter: blur(14px) saturate(1.15);
	backdrop-filter: blur(14px) saturate(1.15);
	box-shadow:
		var(--kk-shadow-deep),
		inset 0 1px 0 rgba(255, 255, 255, .22),
		inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.kk-newsletter-lead {
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* P2 — Sektions-Brücke: Footer blendet weich aus der Seite auf
 * (weicher Schatten-Verlauf statt harter Kante = eine Kamerafahrt). */
.kk-site-footer { box-shadow: 0 -120px 90px -80px rgba(var(--kk-deep-rgb), .35); }

/* P3 — Typo-Mikrokinetik: Kicker schreiben sich beim Reveal auf */
@media (prefers-reduced-motion: no-preference) {
	.kk-reveal.is-revealed .kk-section-kicker,
	[data-reveal].is-revealed .kk-section-kicker {
		animation: kkKickerTrack .8s var(--kk-ease) both;
	}
	/* sharp-Flavor: Mono-Cursor blinkt kurz hinter dem Kicker */
	.kk-flavor-sharp .kk-reveal.is-revealed .kk-section-kicker::after,
	.kk-flavor-sharp [data-reveal].is-revealed .kk-section-kicker::after {
		content: "▌";
		margin-left: .35em;
		color: var(--kk-accent);
		animation: kkCaretBlink 1s steps(1) 3, kkCaretOut .3s ease 3.1s forwards;
	}
}
@keyframes kkKickerTrack { from { letter-spacing: .55em; opacity: 0; } }
@keyframes kkCaretOut { to { opacity: 0; } }

/* P4 — View-Transitions (progressive enhancement, Chrome/Safari):
 * Seitenwechsel als weicher Film-Schnitt statt hartem Weißblitz. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
	::view-transition-old(root) { animation: kkVtOut .26s ease both; }
	::view-transition-new(root) { animation: kkVtIn .34s ease both; }
}
@keyframes kkVtOut { to { opacity: 0; } }
@keyframes kkVtIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) { animation: none !important; }
}