/* =====================================================================
 * KK Magazine — main.css
 * Portables Affiliate-Magazin-Theme. Garten-Skin als Default.
 *
 * ALLE Farben/Fonts als CSS-Variablen in :root → pro Site nur diese
 * Tokens tauschen (Customizer schreibt sie als Inline-:root-Override).
 *
 *  1. Tokens (Design + Pipeline-Aliase)
 *  2. Reset / Base / Typografie
 *  3. Layout-Primitive (shell, section, head, eyebrow, h2, lead, btn, chip)
 *  4. Header / Nav / Drawer / Suche
 *  5. Hero
 *  6. Stats-Band
 *  7. Kategorie-Bento
 *  8. Trust-Badges
 *  9. Blog-Featured
 * 10. Trending
 * 11. Neueste / Postcards
 * 12. Testimonials
 * 13. Pinterest-Masonry
 * 14. Autoren-Strip
 * 15. CTA-Band
 * 16. Newsletter
 * 17. Footer
 * 18. Archiv / Kategorie-Hero / Autor / Pagination / Breadcrumb / 404
 * 19. Einzelbeitrag (Kopf, Hero, entry-content, Tags, Autor-Box, prev/next)
 * 20. Pipeline-Content-Kompatibilität (kk-aff-* / kk-faq / kk-quick-answer / …)
 * 21. Kommentare / WP-Blöcke / a11y / reduced-motion / responsive
 * ===================================================================== */

/* ============================ 1. Tokens ============================ */
:root {
	/* --- Design-Tokens (Garten-Default; per Site via Customizer getauscht) --- */
	--background: #fbfaf2;
	--foreground: #1c2e21;
	--card: #fffefa;
	--primary: #3e8343;
	--primary-foreground: #fdfbf2;
	--secondary: #daedd3;
	--secondary-foreground: #1f4127;
	--muted: #f1f1e5;
	--muted-foreground: #586557;
	--accent: #d9813e;
	--accent-foreground: #fffcf3;
	--border: #dde2d1;
	--ring: #3e8343;
	--honey: #e1b152;
	--terracotta: #d0673b;
	--forest: #22452a;

	--font-serif: "Fraunces", Georgia, "Times New Roman", serif;
	--font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

	--radius-sm: 8px;
	--radius: 14px;
	--radius-lg: 20px;
	--radius-xl: 28px;
	--radius-pill: 999px;

	--shadow-sm: 0 4px 14px rgba(34, 69, 42, .07);
	--shadow-md: 0 16px 40px rgba(34, 69, 42, .10);
	--shadow-lg: 0 30px 70px rgba(34, 69, 42, .16);

	--shell-max: 1200px;
	--shell-x: clamp(16px, 4vw, 28px);
	--ease: cubic-bezier(.16, 1, .3, 1);

	/* --- Pipeline-Aliase: die kk-* Tokens, die das Publish-HTML erwartet.
	 *     Ohne .kk-variant-Wrapper erben Affiliate-Boxen so das Site-Branding. --- */
	--kk-accent: var(--primary);
	--kk-accent-dark: var(--forest);
	--kk-deep: var(--forest);
	--kk-cream: var(--background);
	--kk-bg-cream: var(--background);
	--kk-highlight: var(--honey);
	--kk-ink: var(--foreground);
	--kk-ink-soft: color-mix(in oklab, var(--foreground) 74%, transparent);
	--kk-ink-mute: color-mix(in oklab, var(--foreground) 52%, transparent);
	--kk-paper: var(--background);
	--kk-paper-2: var(--muted);
	--kk-paper-3: var(--secondary);
	--kk-line: var(--border);
	--kk-line-strong: color-mix(in oklab, var(--primary) 34%, var(--border));
	--kk-shadow-sm: var(--shadow-sm);
	--kk-shadow-md: var(--shadow-md);
	--kk-shadow-lg: var(--shadow-lg);
	--kk-shadow-deep: var(--shadow-lg);
	--kk-display: var(--font-serif);
	--kk-sans: var(--font-sans);
	--kk-serif: var(--font-serif);
	--kk-true-serif: var(--font-serif);
	--kk-mono: var(--font-mono);
	--kk-script: var(--font-serif);
	--kk-font-display: var(--font-serif);
	--kk-radius-sm: var(--radius-sm);
	--kk-radius-md: var(--radius);
	--kk-radius-lg: var(--radius-lg);
	--kk-radius-pill: var(--radius-pill);
	--kk-ease: var(--ease);
	--kk-shell-max: var(--shell-max);
	--kk-shell-x: var(--shell-x);
}

/* ============================ 2. Reset / Base ============================ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.kkmag-noscroll { overflow: hidden; }
body {
	margin: 0;
	background: var(--background);
	color: var(--foreground);
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--forest); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
::selection { background: color-mix(in oklab, var(--primary) 22%, transparent); color: var(--forest); }
h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--foreground); letter-spacing: -.02em; font-weight: 600; line-height: 1.15; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; z-index: 9999; background: var(--forest); color: #fff; padding: 8px 14px; border-radius: 8px; }
.kkmag-ic { display: inline-block; vertical-align: middle; flex: none; }

/* ============================ 3. Layout-Primitive ============================ */
.kkmag-shell { max-width: var(--shell-max); margin: 0 auto; padding-inline: var(--shell-x); }
.kkmag-section { padding-block: clamp(56px, 8vw, 80px); }
.kkmag-main { display: block; }

.kkmag-eyebrow {
	margin: 0 0 8px;
	font-family: var(--font-mono);
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--primary);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.kkmag-eyebrow--center { display: block; text-align: center; }
.kkmag-eyebrow--flame { color: var(--terracotta); }
.kkmag-eyebrow--flame::before { display: none; }
.kkmag-h2 {
	margin: 0;
	font-size: clamp(1.7rem, 3.6vw, 2.4rem);
	line-height: 1.12;
}
.kkmag-lead {
	margin: 14px 0 0;
	color: var(--muted-foreground);
	font-size: 1.02rem;
	line-height: 1.65;
	max-width: 62ch;
}
.kkmag-head { margin-bottom: clamp(32px, 5vw, 44px); }
.kkmag-head--center { text-align: center; }
.kkmag-head--center .kkmag-lead { margin-inline: auto; }
.kkmag-head--split { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; }

/* Buttons */
.kkmag-btn {
	display: inline-flex; align-items: center; gap: 8px; justify-content: center;
	padding: 12px 22px; border-radius: var(--radius-pill);
	font-weight: 600; font-size: .93rem; line-height: 1; cursor: pointer;
	border: 1px solid transparent; transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}
.kkmag-btn:hover { transform: translateY(-2px); }
.kkmag-btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-sm); }
.kkmag-btn-primary:hover { background: var(--forest); color: #fff; }
.kkmag-btn-honey { background: var(--honey); color: var(--forest); box-shadow: 0 8px 22px color-mix(in oklab, var(--honey) 40%, transparent); }
.kkmag-btn-honey:hover { background: color-mix(in oklab, var(--honey) 90%, #000); color: var(--forest); }
.kkmag-btn-glass { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .32); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.kkmag-btn-glass:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.kkmag-btn-pin { background: #e60023; color: #fff; box-shadow: 0 8px 22px rgba(230, 0, 35, .3); }
.kkmag-btn-pin:hover { background: #c9001f; color: #fff; }

.kkmag-pilllink {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 10px 18px; border-radius: var(--radius-pill);
	border: 1px solid var(--border); background: var(--card);
	color: var(--foreground); font-weight: 600; font-size: .9rem;
	transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
	white-space: nowrap;
}
.kkmag-pilllink:hover { border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); color: var(--primary); transform: translateY(-1px); }

/* Chips (Kategorie-Labels) */
.kkmag-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 12px; border-radius: var(--radius-pill);
	font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	border: 1px solid transparent; line-height: 1.3;
}
.kkmag-chip--primary { background: color-mix(in oklab, var(--primary) 12%, transparent); color: var(--primary); border-color: color-mix(in oklab, var(--primary) 22%, transparent); }
.kkmag-chip--accent { background: color-mix(in oklab, var(--accent) 15%, transparent); color: var(--terracotta); border-color: color-mix(in oklab, var(--accent) 26%, transparent); }
.kkmag-chip--forest { background: color-mix(in oklab, var(--forest) 10%, transparent); color: var(--forest); border-color: color-mix(in oklab, var(--forest) 20%, transparent); }
.kkmag-chip--glass { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

.kkmag-stars { display: inline-flex; color: var(--honey); }
.kkmag-stars svg { fill: currentColor; }
.kkmag-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .4; display: inline-block; }

/* ============================ 4. Header / Nav / Drawer / Suche ============================ */
.kkmag-header {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in oklab, var(--background) 82%, transparent);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
	transition: box-shadow .25s var(--ease);
}
.kkmag-header.is-scrolled { box-shadow: 0 6px 24px rgba(34, 69, 42, .06); }
.kkmag-header-shell {
	max-width: var(--shell-max); margin: 0 auto; padding-inline: var(--shell-x);
	height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.kkmag-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-weight: 600; font-size: 1.3rem; color: var(--foreground); flex: none; }
.kkmag-brand:hover { color: var(--foreground); }
.kkmag-brand-glyph { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-sm); }
.kkmag-brand-glyph .kkmag-ic { color: var(--primary-foreground); }
.kkmag-brand-name { white-space: nowrap; letter-spacing: -.01em; }
.kkmag-brand-accent { color: var(--primary); }
.kkmag-brand-img { max-height: 42px; width: auto; }

.kkmag-nav { display: none; }
.kkmag-nav-list { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }
.kkmag-nav-list a {
	display: inline-flex; padding: 8px 14px; border-radius: var(--radius-pill);
	color: color-mix(in oklab, var(--foreground) 78%, transparent);
	font-size: .9rem; font-weight: 500; white-space: nowrap;
	transition: background .2s var(--ease), color .2s var(--ease);
}
.kkmag-nav-list a:hover, .kkmag-nav-list .current-menu-item > a { background: color-mix(in oklab, var(--secondary) 60%, transparent); color: var(--foreground); }

.kkmag-header-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.kkmag-tool { display: none; width: 40px; height: 40px; place-items: center; background: transparent; border: none; border-radius: 50%; color: color-mix(in oklab, var(--foreground) 70%, transparent); cursor: pointer; }
.kkmag-tool:hover { background: color-mix(in oklab, var(--secondary) 60%, transparent); color: var(--foreground); }
.kkmag-header-cta { display: none; padding: 9px 18px; border-radius: var(--radius-pill); background: var(--primary); color: var(--primary-foreground); font-weight: 600; font-size: .9rem; box-shadow: var(--shadow-sm); }
.kkmag-header-cta:hover { background: var(--forest); color: #fff; }
.kkmag-burger { display: grid; width: 40px; height: 40px; place-items: center; gap: 4px; background: transparent; border: 1px solid var(--border); border-radius: 50%; cursor: pointer; }
.kkmag-burger span { width: 16px; height: 2px; background: var(--foreground); border-radius: 2px; }

/* Drawer */
.kkmag-drawer {
	position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw); z-index: 80;
	background: var(--card); box-shadow: var(--shadow-lg);
	transform: translateX(100%); transition: transform .4s var(--ease);
	padding: 20px; overflow-y: auto;
}
.kkmag-drawer.is-open { transform: translateX(0); }
.kkmag-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.kkmag-drawer-title { font-family: var(--font-serif); font-weight: 600; font-size: 1.15rem; }
.kkmag-drawer-close { width: 38px; height: 38px; background: transparent; border: 1px solid var(--border); border-radius: 50%; font-size: 1.4rem; line-height: 1; color: var(--foreground); cursor: pointer; }
.kkmag-drawer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.kkmag-drawer-list a { display: block; padding: 12px 14px; border-radius: 10px; font-weight: 500; color: var(--foreground); }
.kkmag-drawer-list a:hover { background: color-mix(in oklab, var(--secondary) 60%, transparent); }

/* Suche-Overlay */
.kkmag-search-overlay {
	position: fixed; inset: 0; z-index: 90; display: grid; place-items: start center;
	padding-top: 18vh; background: color-mix(in oklab, var(--forest) 62%, transparent);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s;
}
.kkmag-search-overlay.is-open { opacity: 1; visibility: visible; }
.kkmag-search-close { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.kkmag-search-shell { width: min(620px, 92vw); text-align: center; color: #fff; }
.kkmag-search-shell .kkmag-eyebrow { color: var(--honey); display: block; margin-bottom: 14px; }

/* ============================ 5. Hero ============================ */
.kkmag-hero { padding-top: clamp(24px, 4vw, 40px); }
.kkmag-hero-card {
	position: relative; overflow: hidden; border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg); isolation: isolate;
	min-height: 520px; display: flex;
	background: linear-gradient(135deg, var(--forest), var(--primary));
}
.kkmag-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.kkmag-hero-shade {
	position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(to top, color-mix(in oklab, var(--forest) 92%, transparent) 0%, color-mix(in oklab, var(--forest) 42%, transparent) 45%, color-mix(in oklab, var(--forest) 8%, transparent) 100%),
		linear-gradient(to right, color-mix(in oklab, var(--forest) 58%, transparent), transparent 55%);
}
.kkmag-hero-card:not(:has(.kkmag-hero-img)) { background: linear-gradient(135deg, var(--forest), var(--primary)); }
.kkmag-hero-body { position: relative; z-index: 2; margin-top: auto; padding: clamp(24px, 5vw, 56px); max-width: 640px; color: #fff; }
.kkmag-hero-badge {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 16px; border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .92);
}
.kkmag-hero-title { margin: 20px 0 0; color: #fff; font-size: clamp(2.3rem, 6vw, 4.2rem); line-height: 1.03; text-wrap: balance; }
.kkmag-hero-accent { color: var(--honey); font-style: italic; }
.kkmag-hero-sub { margin: 18px 0 0; max-width: 34rem; color: rgba(255, 255, 255, .86); font-size: 1.05rem; line-height: 1.6; text-wrap: balance; }
.kkmag-hero-ctas { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.kkmag-hero-trust { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: .9rem; color: rgba(255, 255, 255, .82); }
.kkmag-hero-trust .kkmag-stars { color: var(--honey); }
.kkmag-hero-sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .28); }

/* ============================ 6. Stats-Band ============================ */
.kkmag-stats { padding-block: 0 clamp(48px, 7vw, 64px); }
.kkmag-stats-row {
	display: grid; grid-template-columns: repeat(2, 1fr);
	background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm); overflow: hidden;
}
.kkmag-stat { display: flex; align-items: center; gap: 16px; padding: 26px clamp(18px, 3vw, 30px); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.kkmag-stat:nth-child(-n+2) { border-top: none; }
.kkmag-stat:nth-child(2n+1) { border-left: none; }
.kkmag-stat-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); border: 1px solid color-mix(in oklab, var(--primary) 16%, transparent); }
.kkmag-stat-val { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1; color: var(--foreground); font-variant-numeric: tabular-nums; }
.kkmag-stat-lab { margin-top: 6px; font-size: .9rem; color: var(--muted-foreground); }

/* ============================ 7. Kategorie-Bento ============================ */
.kkmag-bento { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; gap: 16px; }
.kkmag-bento-item {
	position: relative; overflow: hidden; border-radius: var(--radius-lg);
	display: flex; flex-direction: column; justify-content: flex-end; padding: 20px;
	color: #fff; box-shadow: var(--shadow-sm); isolation: isolate;
}
.kkmag-bento-item:hover { color: #fff; box-shadow: var(--shadow-lg); }
.kkmag-bento-big { grid-column: span 2; grid-row: span 2; }
.kkmag-bento-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .7s var(--ease); }
.kkmag-bento-img--fallback { background: linear-gradient(135deg, var(--secondary), var(--muted)); }
.kkmag-bento-item:hover .kkmag-bento-img { transform: scale(1.07); }
.kkmag-bento-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, color-mix(in oklab, var(--forest) 90%, transparent), color-mix(in oklab, var(--forest) 22%, transparent) 55%, transparent); }
.kkmag-bento-body { position: relative; z-index: 2; }
.kkmag-bento-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 50%; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .26); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.kkmag-bento-name { display: block; font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.15; }
.kkmag-bento-count { display: block; margin-top: 2px; font-size: .78rem; color: rgba(255, 255, 255, .78); }

/* ============================ 8. Trust-Badges ============================ */
.kkmag-trust-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.kkmag-trust-card {
	background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
	padding: 26px; box-shadow: var(--shadow-sm);
	transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.kkmag-trust-card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--primary) 30%, var(--border)); box-shadow: var(--shadow-md); }
.kkmag-trust-ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 12px; background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); border: 1px solid color-mix(in oklab, var(--primary) 16%, transparent); transition: background .25s var(--ease), color .25s var(--ease); }
.kkmag-trust-card:hover .kkmag-trust-ic { background: var(--primary); color: var(--primary-foreground); }
.kkmag-trust-card h3 { margin: 0 0 8px; font-size: 1.12rem; }
.kkmag-trust-card p { margin: 0; color: var(--muted-foreground); font-size: .94rem; line-height: 1.6; }

/* ============================ 9. Blog-Featured ============================ */
.kkmag-featured { position: relative; }
.kkmag-featured-title { margin: 0; text-align: center; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.08; text-wrap: balance; }
.kkmag-featured-bgword { position: absolute; top: -4%; right: -10%; z-index: 0; font-family: var(--font-serif); font-weight: 900; font-size: clamp(140px, 22vw, 320px); line-height: 1; color: color-mix(in oklab, var(--foreground) 3.5%, transparent); pointer-events: none; user-select: none; }
.kkmag-featured .kkmag-lead--center, .kkmag-lead--center { margin-inline: auto; text-align: center; }
.kkmag-featured-grid { position: relative; z-index: 1; margin-top: 40px; display: grid; grid-template-columns: 1fr; gap: 18px; }
.kkmag-featured-item {
	position: relative; overflow: hidden; border-radius: var(--radius-xl);
	min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end;
	padding: 24px; color: #fff; box-shadow: var(--shadow-sm); isolation: isolate;
}
.kkmag-featured-item:hover { color: #fff; box-shadow: var(--shadow-lg); }
.kkmag-featured-primary { min-height: 380px; }
.kkmag-featured-imgbg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; transition: transform .7s var(--ease); }
.kkmag-featured-item:hover .kkmag-featured-imgbg { transform: scale(1.06); }
.kkmag-featured-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, color-mix(in oklab, var(--forest) 90%, transparent), color-mix(in oklab, var(--forest) 20%, transparent) 55%, transparent); }
.kkmag-featured-content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.kkmag-featured-h { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.15; }
.kkmag-featured-primary .kkmag-featured-h { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.kkmag-featured-meta { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: rgba(255, 255, 255, .9); }

/* ============================ 10. Trending ============================ */
.kkmag-trending-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; counter-reset: none; }
.kkmag-trending-item {
	display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 16px;
	padding: 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.kkmag-trending-item:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--primary) 30%, var(--border)); box-shadow: var(--shadow-md); }
.kkmag-trending-rank { width: 34px; text-align: center; font-family: var(--font-serif); font-weight: 700; font-size: 2.2rem; line-height: 1; color: color-mix(in oklab, var(--primary) 28%, transparent); }
.kkmag-trending-thumb { width: 96px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--secondary); flex: none; }
.kkmag-trending-thumb img { width: 100%; height: 100%; object-fit: cover; }
.kkmag-trending-body { min-width: 0; }
.kkmag-trending-cat { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--primary); }
.kkmag-trending-h { display: block; margin-top: 3px; font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem; line-height: 1.25; color: var(--foreground); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kkmag-trending-item:hover .kkmag-trending-h { color: var(--primary); }
.kkmag-trending-meta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .8rem; color: var(--muted-foreground); }

/* ============================ 11. Neueste / Postcards ============================ */
.kkmag-latest { background: color-mix(in oklab, var(--muted) 55%, var(--background)); }
.kkmag-post-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
.kkmag-postcard { display: flex; flex-direction: column; color: var(--foreground); }
.kkmag-postcard:hover { color: var(--foreground); }
.kkmag-postcard-media { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--secondary); aspect-ratio: 16 / 10; }
.kkmag-postcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.kkmag-postcard-media--fallback { position: absolute; inset: 0; background: linear-gradient(135deg, var(--secondary), var(--muted)); }
.kkmag-postcard:hover .kkmag-postcard-media img { transform: scale(1.05); }
.kkmag-postcard-media .kkmag-chip { position: absolute; left: 12px; top: 12px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.kkmag-postcard-body { padding: 16px 2px 0; display: flex; flex-direction: column; }
.kkmag-postcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted-foreground); }
.kkmag-postcard-author { font-weight: 600; color: color-mix(in oklab, var(--foreground) 72%, transparent); }
.kkmag-postcard-h { margin-top: 8px; font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; line-height: 1.2; }
.kkmag-postcard:hover .kkmag-postcard-h { color: var(--primary); }
.kkmag-postcard-excerpt { margin-top: 8px; color: var(--muted-foreground); font-size: .92rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kkmag-postcard-more { margin-top: 12px; font-weight: 600; font-size: .9rem; color: var(--primary); }

/* ============================ 12. Testimonials ============================ */
.kkmag-testi { background: color-mix(in oklab, var(--muted) 55%, var(--background)); }
.kkmag-testi-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.kkmag-testi-card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.kkmag-testi-quote { position: absolute; top: 20px; right: 20px; color: color-mix(in oklab, var(--primary) 12%, transparent); }
.kkmag-testi-card .kkmag-stars { margin-bottom: 12px; }
.kkmag-testi-card blockquote { margin: 0 0 20px; font-size: .98rem; line-height: 1.65; color: color-mix(in oklab, var(--foreground) 90%, transparent); }
.kkmag-testi-card figcaption { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--border); padding-top: 18px; }
.kkmag-testi-card figcaption img, .kkmag-testi-initials { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.kkmag-testi-initials { display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), var(--forest)); color: #fff; font-family: var(--font-serif); font-weight: 700; }
.kkmag-testi-name { display: block; font-weight: 600; font-size: .9rem; }
.kkmag-testi-role { display: block; font-size: .8rem; color: var(--muted-foreground); }

/* ============================ 13. Pinterest-Masonry ============================ */
.kkmag-eyebrow--pin .kkmag-pin-dot { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e60023; color: #fff; }
.kkmag-pin-masonry { columns: 2; column-gap: 16px; }
.kkmag-pin { position: relative; display: block; margin-bottom: 16px; overflow: hidden; border-radius: var(--radius-lg); break-inside: avoid; box-shadow: var(--shadow-sm); }
.kkmag-pin img { width: 100%; transition: transform .7s var(--ease); }
.kkmag-pin:hover img { transform: scale(1.06); }
.kkmag-pin-shade { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklab, var(--forest) 85%, transparent), transparent 55%); opacity: 0; transition: opacity .25s var(--ease); }
.kkmag-pin:hover .kkmag-pin-shade { opacity: 1; }
.kkmag-pin-cap { position: absolute; inset: auto 0 0 0; padding: 14px; opacity: 0; transform: translateY(8px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.kkmag-pin:hover .kkmag-pin-cap { opacity: 1; transform: translateY(0); }
.kkmag-pin-save { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; margin-bottom: 8px; border-radius: var(--radius-pill); background: #e60023; color: #fff; font-size: .7rem; font-weight: 600; }
.kkmag-pin-title { display: block; font-family: var(--font-serif); font-weight: 600; font-size: .9rem; line-height: 1.25; color: #fff; }

/* ============================ 14. Autoren-Strip ============================ */
.kkmag-authorstrip-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); box-shadow: var(--shadow-sm); display: grid; grid-template-columns: 1fr; }
.kkmag-authorstrip-media { position: relative; min-height: 260px; background: linear-gradient(135deg, var(--secondary), var(--muted)); }
.kkmag-authorstrip-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kkmag-authorstrip-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: color-mix(in oklab, var(--primary) 45%, transparent); }
.kkmag-authorstrip-shade { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklab, var(--forest) 40%, transparent), transparent); }
.kkmag-authorstrip-body { padding: clamp(28px, 5vw, 48px); display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.kkmag-authorstrip-quote { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.3; color: var(--foreground); }
.kkmag-authorstrip-name { font-weight: 700; }
.kkmag-authorstrip-role { color: var(--muted-foreground); font-size: .92rem; margin-top: -8px; }
.kkmag-authorstrip-stats { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 6px; font-size: .9rem; color: var(--muted-foreground); }
.kkmag-authorstrip-stats span { display: inline-flex; align-items: center; gap: 8px; }
.kkmag-authorstrip-stats .kkmag-ic { color: var(--primary); }

/* ============================ 15. CTA-Band ============================ */
.kkmag-ctaband-card { position: relative; overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); isolation: isolate; background: linear-gradient(135deg, var(--forest), var(--primary)); }
.kkmag-ctaband-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.kkmag-ctaband-card:not(:has(.kkmag-ctaband-img)) { background: linear-gradient(135deg, var(--forest), var(--primary)); }
.kkmag-ctaband-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, color-mix(in oklab, var(--forest) 94%, transparent), color-mix(in oklab, var(--forest) 78%, transparent) 50%, color-mix(in oklab, var(--forest) 42%, transparent)); }
.kkmag-ctaband-body { position: relative; z-index: 2; padding: clamp(28px, 5vw, 60px); color: #fff; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.kkmag-ctaband-h { margin: 0; max-width: 20ch; color: #fff; font-size: clamp(1.7rem, 4vw, 3rem); line-height: 1.12; text-wrap: balance; }
.kkmag-ctaband-sub { margin: 0; max-width: 40ch; color: rgba(255, 255, 255, .84); font-size: 1.02rem; line-height: 1.6; text-wrap: balance; }

/* ============================ 16. Newsletter ============================ */
.kkmag-newsletter-card { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--forest); box-shadow: var(--shadow-lg); padding: clamp(36px, 6vw, 72px) clamp(24px, 5vw, 56px); }
.kkmag-nl-glow { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.kkmag-nl-glow--a { top: -80px; right: -80px; width: 300px; height: 300px; background: color-mix(in oklab, var(--honey) 30%, transparent); }
.kkmag-nl-glow--b { bottom: -110px; left: -60px; width: 260px; height: 260px; background: color-mix(in oklab, var(--primary) 45%, transparent); }
.kkmag-newsletter-inner { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; text-align: center; color: #fff; }
.kkmag-newsletter-h { margin: 20px 0 0; color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.15; text-wrap: balance; }
.kkmag-newsletter-sub { margin: 14px auto 0; max-width: 42ch; color: rgba(255, 255, 255, .72); line-height: 1.6; text-wrap: balance; }
.kkmag-nl-form { margin: 26px auto 0; max-width: 460px; display: flex; flex-wrap: wrap; gap: 12px; }
.kkmag-nl-form input[type="email"] { flex: 1 1 200px; height: 48px; padding: 0 18px; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .1); color: #fff; font-size: .95rem; }
.kkmag-nl-form input[type="email"]::placeholder { color: rgba(255, 255, 255, .5); }
.kkmag-nl-form input[type="email"]:focus-visible { outline: 2px solid var(--honey); outline-offset: 2px; }
.kkmag-nl-form .kkmag-btn { height: 48px; }
.kkmag-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.kkmag-nl-msg { flex: 1 0 100%; margin: 6px 0 0; min-height: 1em; font-size: .88rem; color: var(--honey); }

/* ============================ 17. Footer ============================ */
.kkmag-footer { background: var(--forest); color: rgba(255, 255, 255, .8); border-top: 1px solid var(--border); }
.kkmag-footer-inner { max-width: var(--shell-max); margin: 0 auto; padding: clamp(48px, 7vw, 72px) var(--shell-x) 40px; }
.kkmag-footer-grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
.kkmag-footer h3, .kkmag-footer h4 { color: #fff; }
.kkmag-footer a { color: rgba(255, 255, 255, .72); }
.kkmag-footer a:hover { color: #fff; }
.kkmag-brand--footer { color: #fff; }
.kkmag-brand--footer:hover { color: #fff; }
.kkmag-brand--footer .kkmag-brand-glyph { background: var(--honey); color: var(--forest); }
.kkmag-brand--footer .kkmag-brand-glyph .kkmag-ic { color: var(--forest); }
.kkmag-brand--footer .kkmag-brand-name { color: #fff; }
.kkmag-footer-about { margin: 16px 0 0; max-width: 30ch; font-size: .92rem; line-height: 1.6; color: rgba(255, 255, 255, .7); }
.kkmag-footer-nlbtn { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 10px 18px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .15); color: #fff; font-weight: 600; font-size: .9rem; }
.kkmag-footer-nlbtn:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.kkmag-footer-socials { display: flex; gap: 10px; margin-top: 20px; }
.kkmag-footer-socials a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #fff; transition: background .2s var(--ease), transform .2s var(--ease); }
.kkmag-footer-socials a:hover { background: var(--honey); color: var(--forest); transform: translateY(-2px); }
.kkmag-footer-col h3 { margin: 0 0 16px; font-family: var(--font-mono); font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--honey); }
.kkmag-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kkmag-footer-col a { font-size: .94rem; }
.kkmag-footer-disclosure { margin-top: 44px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: rgba(255, 255, 255, .04); font-size: .8rem; line-height: 1.6; color: rgba(255, 255, 255, .6); }
.kkmag-footer-disclosure strong { color: rgba(255, 255, 255, .82); }
.kkmag-footer-network { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 28px; font-size: .84rem; color: rgba(255, 255, 255, .6); }
.kkmag-footer-network-label { font-weight: 600; color: rgba(255, 255, 255, .72); }
.kkmag-footer-network a { padding: 4px 12px; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-pill); }
.kkmag-footer-network a:hover { border-color: var(--honey); color: var(--honey); }
.kkmag-footer-bottom { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .84rem; color: rgba(255, 255, 255, .55); }
.kkmag-footer-nav { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; }

/* ============================ 18. Archiv / Kategorie-Hero / Pagination ============================ */
.kkmag-archive { padding-block: clamp(28px, 4vw, 44px) clamp(56px, 8vw, 80px); }
.kkmag-archive-head, .kkmag-archive-hero { text-align: center; margin-bottom: clamp(32px, 5vw, 48px); }
.kkmag-archive-hero .kkmag-chip { margin-bottom: 14px; }
.kkmag-archive-title { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.08; margin: 0; }
.kkmag-archive-desc, .kkmag-archive-meta { margin: 12px auto 0; color: var(--muted-foreground); max-width: 60ch; }
.kkmag-archive-meta { font-size: .9rem; }
.kkmag-archive-search { max-width: 520px; margin: 20px auto 0; }

.kkmag-cat-hero {
	position: relative; overflow: hidden; border-radius: var(--radius-xl);
	padding: clamp(44px, 7vw, 88px) clamp(24px, 5vw, 56px); margin-bottom: clamp(32px, 5vw, 48px);
	color: #fff; isolation: isolate;
	background: linear-gradient(135deg, var(--forest), var(--primary));
}
.kkmag-cat-hero[style*="--kkmag-cat-hero"]::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background-image: linear-gradient(135deg, color-mix(in oklab, var(--forest) 84%, transparent), color-mix(in oklab, var(--primary) 62%, transparent)), var(--kkmag-cat-hero);
	background-size: cover; background-position: center;
}
.kkmag-cat-hero-inner { position: relative; max-width: 60ch; }
.kkmag-cat-hero .kkmag-chip { margin-bottom: 16px; }
.kkmag-cat-title { color: #fff; font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.05; margin: 0 0 14px; text-wrap: balance; }
.kkmag-cat-desc { color: rgba(255, 255, 255, .9); font-size: 1.05rem; line-height: 1.55; margin: 0 0 12px; }
.kkmag-cat-count { color: rgba(255, 255, 255, .82); font-size: .92rem; margin: 0; }

.kkmag-pagination { margin-top: clamp(40px, 6vw, 56px); text-align: center; }
.kkmag-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; margin: 0 4px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); font-weight: 600; }
.kkmag-pagination .page-numbers.current, .kkmag-pagination a.page-numbers:hover { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }

.kkmag-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 24px; font-size: .85rem; color: var(--muted-foreground); }
.kkmag-breadcrumb a { color: var(--primary); }
.kkmag-bc-sep { opacity: .5; }
.kkmag-bc-current { color: var(--foreground); font-weight: 500; }

.kkmag-empty { max-width: 560px; margin: 60px auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.kkmag-404 .kkmag-404-cats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* Autor-Hero */
.kkmag-author-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-bottom: clamp(32px, 5vw, 48px); padding: clamp(24px, 4vw, 40px); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.kkmag-author-hero-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary); flex: none; }
.kkmag-author-hero-body { min-width: 260px; flex: 1; }
.kkmag-author-hero-name { margin: 12px 0 4px; font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.kkmag-author-hero-role { margin: 0 0 8px; color: var(--primary); font-weight: 600; }
.kkmag-author-hero-bio { margin: 0; color: var(--muted-foreground); max-width: 62ch; line-height: 1.6; }
.kkmag-author-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.kkmag-author-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); }
.kkmag-author-icon:hover { background: var(--primary); color: #fff; }

/* Suchformular */
.kkmag-searchform { display: flex; gap: 8px; }
.kkmag-searchform-input { flex: 1; height: 48px; padding: 0 18px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--card); color: var(--foreground); font-size: .95rem; }
.kkmag-search-overlay .kkmag-searchform-input { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; }
.kkmag-search-overlay .kkmag-searchform-input::placeholder { color: rgba(255, 255, 255, .6); }
.kkmag-searchform-btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--primary); color: var(--primary-foreground); cursor: pointer; }

/* ============================ 19. Einzelbeitrag ============================ */
.kkmag-single { padding-block: clamp(28px, 4vw, 44px) clamp(56px, 8vw, 88px); }
.kkmag-article-head { max-width: 820px; margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; }
.kkmag-article-head .kkmag-chip { margin-bottom: 16px; }
.kkmag-article-title { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.08; margin: 0 0 18px; text-wrap: balance; }
.kkmag-post-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; font-size: .88rem; color: var(--muted-foreground); }
.kkmag-meta-cat { color: var(--primary); font-weight: 600; }
.kkmag-article-hero { max-width: 1000px; margin: 32px auto 0; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.kkmag-article-hero-img { width: 100%; height: auto; }

.entry-content { max-width: 720px; margin: 0 auto; font-size: 1.09rem; line-height: 1.78; color: var(--foreground); }
.entry-content > * { margin-block: 0 1.2em; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content h2 { margin-top: 2.1em; font-size: clamp(1.5rem, 3.2vw, 2rem); }
.entry-content h3 { margin-top: 1.6em; font-size: clamp(1.2rem, 2.2vw, 1.45rem); }
.entry-content p, .entry-content li { max-width: 72ch; }
.entry-content a { color: var(--primary); font-weight: 600; border-bottom: 1px solid color-mix(in oklab, var(--primary) 35%, transparent); }
.entry-content a:hover { color: var(--forest); border-bottom-color: currentColor; }
.entry-content img { border-radius: var(--radius); margin-inline: auto; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li { margin-bottom: .5em; }
.entry-content blockquote {
	margin: 1.6em 0; padding: 20px 24px; border-left: 4px solid var(--primary);
	background: color-mix(in oklab, var(--secondary) 55%, var(--background));
	border-radius: 0 var(--radius) var(--radius) 0; font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: var(--foreground);
}
.kkmag-pagelinks { margin: 24px 0; font-weight: 600; }

.kkmag-article-foot { max-width: 820px; margin: 0 auto; }
.kkmag-tags { max-width: 720px; margin: 32px auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .88rem; }
.kkmag-tags > span { color: var(--muted-foreground); }
.kkmag-tags a { padding: 4px 12px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--secondary) 60%, transparent); color: var(--primary); font-size: .82rem; font-weight: 600; }

.kkmag-author-card { max-width: 760px; margin: 40px auto; padding: 28px; display: grid; grid-template-columns: 88px 1fr; gap: 22px; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.kkmag-author-photo { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; border: 3px solid var(--primary); }
.kkmag-author-photo img { width: 100%; height: 100%; object-fit: cover; }
.kkmag-author-initials { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary), var(--forest)); color: #fff; font-family: var(--font-serif); font-size: 2.2rem; font-weight: 700; }
.kkmag-author-body .kkmag-eyebrow { margin-bottom: 4px; }
.kkmag-author-body h3 { margin: 2px 0 6px; font-size: 1.25rem; }
.kkmag-author-role { color: var(--muted-foreground); font-weight: 500; font-size: .92rem; }
.kkmag-author-body p { margin: 0 0 10px; color: var(--muted-foreground); font-size: .95rem; }
.kkmag-author-cred { color: var(--primary); font-weight: 600; }
.kkmag-author-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.kkmag-author-link { color: var(--primary); font-weight: 600; }
.kkmag-author-icon { width: 34px; height: 34px; }

.kkmag-prevnext { max-width: 1000px; margin: 48px auto; display: grid; grid-template-columns: 1fr; gap: 14px; }
.kkmag-pn { display: block; padding: 18px 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--foreground); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.kkmag-pn:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--foreground); }
.kkmag-pn-next { text-align: right; }
.kkmag-pn-dir { display: block; font-size: .8rem; color: var(--muted-foreground); margin-bottom: 4px; }
.kkmag-pn-t { display: block; font-family: var(--font-serif); font-weight: 600; }

.kkmag-related { max-width: var(--shell-max); margin: 56px auto 0; }
.kkmag-related-title { text-align: center; margin-bottom: 32px; font-size: clamp(1.5rem, 3vw, 2.1rem); }

.kkmag-share-rail { position: fixed; left: 24px; top: 50%; transform: translateY(-50%); z-index: 40; display: none; flex-direction: column; gap: 10px; }
.kkmag-share-rail a, .kkmag-share-copy { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--card); border: 1px solid var(--border); color: var(--foreground); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .2s var(--ease), color .2s var(--ease); }
.kkmag-share-rail a:hover, .kkmag-share-copy:hover { transform: translateY(-2px); color: var(--primary); }
.kkmag-share-copy.is-copied { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Kommentare */
.kkmag-comments { max-width: 720px; margin: 48px auto 0; }
.kkmag-comments-title { font-size: 1.4rem; margin-bottom: 20px; }
.kkmag-comment-list { list-style: none; margin: 0 0 24px; padding: 0; }
.kkmag-comment-list .comment-body { padding: 16px 0; border-bottom: 1px solid var(--border); }

/* ============================ 20. Pipeline-Content-Kompatibilität ============================
 * Struktur-CSS für das Publish-HTML. Alle Farben ziehen die --kk-* Tokens
 * (oben auf Garten gemappt). .kk-variant-Wrapper überschreiben --kk-accent
 * je Artikel inline → Palette bleibt pro Artikel gescoped.
 * ------------------------------------------------------------------------- */

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

/* Quick-Answer */
.kk-quick-answer { max-width: 760px; margin: 0 auto 28px; padding: 22px 26px; background: var(--kk-paper-3); border-left: 4px solid var(--kk-accent); border-radius: var(--kk-radius-md); }
.kk-quick-answer .kk-card-tag { display: inline-block; margin-bottom: 6px; font-weight: 700; color: var(--kk-accent-dark); }
.kk-quick-answer p { margin: 4px 0 0; color: var(--kk-deep); font-size: 1.04rem; }

/* Table of Contents */
.kk-toc { max-width: 760px; margin: 0 auto 32px; padding: 22px 26px; background: var(--card); border: 1px solid var(--kk-line); border-radius: var(--kk-radius-lg); box-shadow: var(--kk-shadow-sm); }
.kk-toc-title { font-family: var(--kk-display); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--kk-ink-mute); margin-bottom: 12px; }
.kk-toc-list { list-style: none; margin: 0; padding: 0; }
.kk-toc-list li { padding: 6px 0 6px 20px; position: relative; line-height: 1.4; }
.kk-toc-list li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--kk-line-strong); }
.kk-toc-list a { color: var(--kk-ink-soft); font-size: .94rem; }
.kk-toc-list a:hover, .kk-toc-list a.is-active { color: var(--kk-accent-dark); font-weight: 600; }
@media (min-width: 1080px) {
	.kk-toc { position: sticky; top: 88px; float: right; width: 240px; margin: 0 0 24px 32px; clear: right; }
}

/* Lead styles (L6 Stat, L7 Conversation) */
.kk-lead-stat { display: flex; align-items: baseline; gap: 16px; margin: 0 0 28px; padding: 18px 22px; background: var(--kk-bg-cream); border-left: 6px solid var(--kk-accent); border-radius: var(--kk-radius-md); }
.kk-lead-stat-num { font-family: var(--kk-font-display); font-size: clamp(2.4rem, 8vw, 3.8rem); font-weight: 900; line-height: 1; color: var(--kk-accent); }
.kk-lead-stat-sub { margin: 0; line-height: 1.5; }
.kk-lead-convo { margin: 0 0 28px; padding: 18px 22px; background: var(--kk-bg-cream); border-left: 6px solid var(--kk-accent); border-radius: var(--kk-radius-md); }
.kk-lead-convo-q { margin: 0 0 8px; font-family: var(--kk-font-display); font-size: 1.16rem; color: var(--kk-accent-dark); }
.kk-lead-convo-a { margin: 0; line-height: 1.6; }

/* Generischer aside-Fallback (Definition, Inline-QA, Test-Methodik, Trust-Ribbon,
   Author-Chip u.ä.) — falls keine spezifische Regel greift, sauberer Panel-Look. */
.entry-content aside:not([class]),
.kk-definition, .kk-inline-qa, .kk-test-methodology, .kk-trust-ribbon, .kk-author-chip {
	margin: 24px 0; padding: 18px 22px; background: var(--kk-paper-3); border: 1px solid var(--kk-line); border-left: 4px solid var(--kk-accent); border-radius: var(--kk-radius-md); color: var(--kk-ink-soft);
}
.kk-definition > :first-child, .kk-inline-qa > :first-child, .kk-test-methodology > :first-child { margin-top: 0; }

/* FAQ (native <details>/<summary> + dl/dt/dd) */
.kk-faq { padding-block: clamp(20px, 4vw, 40px); }
.kk-faq-list { max-width: 760px; margin: 0 auto; }
.kk-faq-item { border-bottom: 1px solid var(--kk-line); padding: 20px 0; }
.kk-faq-item:last-child { border-bottom: none; }
.kk-faq-item summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; cursor: pointer; list-style: none; font-family: var(--kk-display); font-weight: 700; font-size: clamp(1.05rem, 2.2vw, 1.28rem); line-height: 1.3; color: var(--kk-deep); }
.kk-faq-item summary::-webkit-details-marker { display: none; }
.kk-faq-item summary::after { content: ""; flex: none; width: 30px; height: 30px; border: 1px solid var(--kk-line-strong); border-radius: 50%; background: linear-gradient(currentColor, currentColor) center / 13px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 13px no-repeat; color: var(--kk-accent); transition: transform .3s var(--ease); }
.kk-faq-item[open] summary::after { transform: rotate(45deg); }
.kk-faq-item-body { padding-top: 12px; color: var(--kk-ink-soft); line-height: 1.7; max-width: 68ch; }
.kk-faq-item-body > :last-child { margin-bottom: 0; }
dl.kk-faq { max-width: 760px; margin: 0 auto; }
dl.kk-faq dt { font-family: var(--kk-display); font-weight: 700; font-size: 1.16rem; color: var(--kk-deep); padding: 18px 0 8px; border-top: 1px solid var(--kk-line); }
dl.kk-faq dt:first-of-type { border-top: none; }
dl.kk-faq dd { margin: 0 0 14px; color: var(--kk-ink-soft); }

/* Affiliate-Card (kk-aff-*) — Struktur portiert, Garten-getönt */
.kk-aff-card { display: grid; grid-template-columns: 160px 1fr; gap: clamp(16px, 2.4vw, 28px); align-items: start; margin: 28px 0; padding: clamp(20px, 3vw, 30px); background: var(--card); border: 1px solid var(--kk-line); border-radius: var(--kk-radius-lg); box-shadow: var(--kk-shadow-md); position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.kk-aff-card:hover { transform: translateY(-3px); box-shadow: var(--kk-shadow-lg); }
.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 .5s var(--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; z-index: 2; padding: 3px 10px; background: color-mix(in oklab, var(--kk-deep) 82%, transparent); color: #fff; font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border-radius: var(--kk-radius-pill); }
.kk-aff-card .kk-aff-top-badge { align-self: flex-start; padding: 4px 12px; background: var(--kk-highlight); color: var(--kk-deep); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: var(--kk-radius-pill); }
.kk-aff-card .kk-aff-title { margin: 0; font-family: var(--kk-display); font-weight: 700; font-size: clamp(1.08rem, 2.2vw, 1.3rem); line-height: 1.25; color: var(--kk-deep); }
.kk-aff-card .kk-aff-rating { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--kk-ink-soft); }
.kk-aff-card .kk-aff-stars { position: relative; display: inline-block; font-size: 1rem; letter-spacing: 2px; background: linear-gradient(90deg, #f5a623 var(--r, 0%), color-mix(in oklab, var(--kk-deep) 14%, transparent) 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: .84rem; }
.kk-aff-card .kk-aff-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.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.04rem; font-weight: 700; border-radius: var(--kk-radius-sm); }
.kk-aff-card .kk-aff-strike { font-family: var(--kk-mono); color: var(--kk-ink-mute); font-size: .9rem; }
.kk-aff-card .kk-aff-desc { margin: 4px 0 6px; color: var(--kk-ink-soft); font-size: .97rem; line-height: 1.6; }
.kk-aff-card .kk-aff-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: flex-start; margin-top: 8px; padding: 12px 22px; background: linear-gradient(135deg, var(--kk-accent), var(--kk-accent-dark)); color: #fff; font-family: var(--kk-display); font-weight: 700; font-size: .96rem; border: none; border-radius: var(--kk-radius-pill); box-shadow: 0 8px 20px color-mix(in oklab, var(--kk-accent) 32%, transparent); cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.kk-aff-card .kk-aff-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px color-mix(in oklab, var(--kk-accent) 40%, transparent); color: #fff; }
.kk-aff-card .kk-aff-disclose { display: block; margin-top: 10px; font-size: .74rem; font-style: italic; color: var(--kk-ink-mute); line-height: 1.4; }
.kk-aff-list-title { font-family: var(--kk-display); font-weight: 700; font-size: 1.2rem; margin: 8px 0 16px; color: var(--kk-deep); }
@media (max-width: 600px) {
	.kk-aff-card { grid-template-columns: 1fr; }
	.kk-aff-card .kk-aff-img-link { aspect-ratio: 16 / 10; }
	.kk-aff-card .kk-aff-cta { width: 100%; align-self: stretch; }
}
/* S1–S7 Layout-Modifier (nur Anordnung, Farben erben von der Basis) */
.kk-aff-card-s2 { grid-template-columns: 120px 1fr; gap: 18px; }
.kk-aff-card-s2 .kk-aff-img-link { aspect-ratio: 1; }
.kk-aff-card-s3, .kk-aff-card-s7 { grid-template-columns: 1fr; }
.kk-aff-card-s3 .kk-aff-img-link { aspect-ratio: 16 / 9; }
.kk-aff-card-s4 { grid-template-columns: 140px 1fr; }
.kk-aff-card-s4 .kk-aff-img-link { aspect-ratio: 3 / 4; }
.kk-aff-card-s5 { grid-template-columns: 1fr; padding: 0; overflow: hidden; aspect-ratio: 2 / 3; max-width: 540px; margin-inline: auto; }
.kk-aff-card-s5 .kk-aff-img-link { position: absolute; inset: 0; aspect-ratio: auto; border-radius: var(--kk-radius-lg); }
.kk-aff-card-s5 .kk-aff-body { position: relative; z-index: 1; margin-top: auto; padding: 26px 22px 20px; background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--kk-deep) 92%, transparent) 60%); color: #fff; }
.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-s6 { grid-template-columns: 1fr 150px; background: var(--kk-bg-cream); border-left: 5px solid var(--kk-accent); }
.kk-aff-card-s6 .kk-aff-img-link { order: 2; }
.kk-aff-card-s6 .kk-aff-body { order: 1; }
.kk-aff-card-s7 .kk-aff-tabs { display: flex; gap: 4px; margin: 6px 0 2px; border-bottom: 2px solid var(--kk-accent); }
.kk-aff-card-s7 .kk-aff-tab { padding: 6px 14px; font-size: .82rem; font-weight: 600; color: var(--kk-accent-dark); opacity: .55; border-radius: var(--kk-radius-sm) var(--kk-radius-sm) 0 0; }
.kk-aff-card-s7 .kk-aff-tab.is-active { color: #fff; background: var(--kk-accent); opacity: 1; }

/* Pin-Overlay-Wrap (falls Snippet <img> ummantelt) */
.kk-img-wrap { position: relative; display: block; }
.kk-img-pin { position: absolute; top: 12px; left: 12px; padding: 6px 12px; background: rgba(255, 255, 255, .92); color: var(--kk-accent-dark); border-radius: var(--kk-radius-pill); font-size: .8rem; font-weight: 600; opacity: 0; transition: opacity .2s var(--ease); }
.kk-img-wrap:hover .kk-img-pin { opacity: 1; }

/* ============================ 21. WP-Blöcke / a11y / responsive ============================ */
.alignwide { max-width: 1000px; margin-inline: auto; }
.alignfull { max-width: 100%; }
.wp-block-image img { border-radius: var(--radius); }
.wp-block-quote, .wp-block-pullquote { border-left: 4px solid var(--primary); background: color-mix(in oklab, var(--secondary) 55%, var(--background)); padding: 20px 26px; border-radius: 0 var(--radius) var(--radius) 0; font-family: var(--font-serif); font-style: italic; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- Responsive: hoch ---- */
@media (min-width: 640px) {
	.kkmag-stats-row { grid-template-columns: repeat(4, 1fr); }
	.kkmag-stat:nth-child(-n+2) { border-top: 1px solid var(--border); }
	.kkmag-stat:nth-child(1) { border-top: none; }
	.kkmag-stat { border-top: none; }
	.kkmag-stat:not(:first-child) { border-left: 1px solid var(--border); }
	.kkmag-trust-grid { grid-template-columns: repeat(2, 1fr); }
	.kkmag-trending-list { grid-template-columns: repeat(2, 1fr); }
	.kkmag-post-grid { grid-template-columns: repeat(2, 1fr); }
	.kkmag-testi-grid { grid-template-columns: repeat(3, 1fr); }
	.kkmag-pin-masonry { columns: 3; }
	.kkmag-prevnext { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
	.kkmag-nav { display: flex; flex: 1; justify-content: center; }
	.kkmag-tool { display: grid; }
	.kkmag-header-cta { display: inline-flex; }
	.kkmag-burger { display: none; }
	.kkmag-bento { grid-template-columns: repeat(4, 1fr); }
	.kkmag-trust-grid { grid-template-columns: repeat(4, 1fr); }
	.kkmag-featured-grid { grid-template-columns: 1fr 0.62fr; grid-template-rows: 1fr 1fr; }
	.kkmag-featured-primary { grid-row: span 2; min-height: 0; }
	.kkmag-post-grid { grid-template-columns: repeat(3, 1fr); }
	.kkmag-pin-masonry { columns: 4; }
	.kkmag-authorstrip-card { grid-template-columns: 0.9fr 1.1fr; }
	.kkmag-authorstrip-media { min-height: 340px; }
	.kkmag-share-rail { display: flex; }
}
@media (min-width: 1080px) {
	.kkmag-hero-card { min-height: 620px; }
}

/* ---- Responsive: runter ---- */
@media (max-width: 600px) {
	.kkmag-author-card { grid-template-columns: 1fr; text-align: center; }
	.kkmag-author-photo { margin: 0 auto; }
	.kkmag-author-actions { justify-content: center; }
	.kkmag-pn-next { text-align: left; }
	.kkmag-trending-item { grid-template-columns: auto 76px 1fr; gap: 12px; }
	.kkmag-trending-thumb { width: 76px; height: 60px; }
}