/*
Theme Name: SupplementScout
Theme URI: https://supplementscout.de
Author: Bjoern Scholz
Author URI: https://igs-service.net
Description: Custom Block Theme fuer SupplementScout — unabhaengige Supplement-Vergleiche und Ratgeber.
Version: 2.97.0
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 8.0
License: proprietary
Text Domain: supplementscout
*/

/* ==========================================================================
   SupplementScout v2.6.0 — Globale CSS-Konsolidierung: Tokens, Inline-Styles, Mobile
   Design Preview: D:\Projekte\supplementscout-preview\
   ========================================================================== */

:root {
	--ss-white: #F5F2ED;
	--ss-pure-white: #ffffff;
	--ss-cream-rgb: 245, 242, 237;
	--ss-cream: #E8E2D9;
	--ss-cream-dark: #DAD3C8;
	--ss-cream-panel: #EDE9E3;
	/* Palette 03.09.2026: Grün eine Stufe dunkler — Weiß auf #4A7C59 lag bei
	   4,35:1 (Buttons, Badges, Brand-Links, 99 Lighthouse-Treffer im Hub).
	   Weiß auf #3A6147 = 6,3:1. Hover rückt entsprechend nach. */
	--ss-green: #3A6147;
	--ss-green-dark: #2D4A37;
	--ss-green-light: #D6E2DA;
	--ss-mocha: #3D2E24;
	--ss-mocha-mid: #6B5A4E;
	--ss-mocha-light: #A89888;
	--ss-grade-a: #2E8B57;
	--ss-grade-b: #5BA37A;
	--ss-grade-c: #D4A843;
	--ss-grade-d: #C47A3A;
	--ss-grade-f: #B94A4A;
	/* Tiefe Noten-Töne für TEXT und Notenkästen (Palette 03.09.2026): die hellen
	   Noten-Farben liegen auf Cream bei 1,7–3,3:1 und bleiben nur für Punkte und
	   Rahmen. Auf Cream gemessen: A 5,0 · B 5,0 · C 4,8 · D 5,1. */
	--ss-grade-a-deep: #1E6B42;
	--ss-grade-b-deep: #2F6A4A;
	--ss-grade-c-deep: #7A5C12;
	--ss-grade-d-deep: #8F4C1C;
	--ss-grade-f-deep: #9E3A3A;
	--ss-radius: 8px;
	--ss-radius-lg: 12px;
	--ss-transition: 0.2s ease;
	--ss-shadow-sm: 0 1px 3px rgba(61, 46, 36, 0.04);
	--ss-shadow-md: 0 4px 16px rgba(61, 46, 36, 0.06);
	--ss-shadow-lg: 0 8px 30px rgba(61, 46, 36, 0.08);
	--ss-font-sans: 'Poppins', system-ui, sans-serif;
	--ss-font-serif: 'DM Serif Display', Georgia, serif;
	--ss-measure: 60rem; /* einheitliche Content-Spalte 960px (Vier-Modell-Konsens Option B, 24.07.2026) */
	--ss-radius-sm: 6px;
	--ss-radius-pill: 100px;
	--ss-text: var(--ss-mocha);
	--ss-muted: var(--ss-mocha-mid);
	--ss-rank-top-bg: #EEF4F0;
	--ss-amazon-orange: #A85F0A; /* war #E8860D, 2,7:1 auf Weiß; jetzt 4,9:1 (Palette 03.09.2026) */
	--ss-amber: #C4923B;
	--ss-amber-dark: #A67B2E;
	--ss-amber-light: #F5ECD7;
	--ss-amber-mid: rgba(196, 146, 59, 0.12);
	--ss-amber-border: rgba(196, 146, 59, 0.3);
	--ss-callout-tip-bg: #FFFBF0;
	--ss-callout-warning-bg: #FDF3EE;
	--ss-callout-info: #2E6B8A;
	--ss-callout-info-bg: #F0F7FA;
	--ss-con-icon-bg: #F5E6DC;
	--ss-success: #2d7a47;
	--ss-error: #c0392b;
	--ss-legal-bg: #2d4a37;
	--ss-legal-text: #e8f0eb;
	--ss-border: var(--ss-cream-dark);
	--ss-cream-alt: #f8f5f0;
	/* Spacing scale (4px base) */
	--ss-space-xs: 0.25rem;   /* 4px */
	--ss-space-sm: 0.5rem;    /* 8px */
	--ss-space-md: 1rem;      /* 16px */
	--ss-space-lg: 1.5rem;    /* 24px */
	--ss-space-xl: 2rem;      /* 32px */
	--ss-space-2xl: 3rem;     /* 48px */
	--ss-space-3xl: 4rem;     /* 64px */
}

/* --- Utilities --- */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.sr-only--focusable:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 9999;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	padding: 0.5rem 1rem;
	background: var(--ss-green);
	color: var(--ss-pure-white);
	border-radius: var(--ss-radius);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}
.footer-link-btn {
	background: none;
	border: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	padding: 0;
	text-decoration: none;
}
.footer-link-btn:hover {
	text-decoration: underline;
}
/* Ratgeber-Dropdown button styling (matches nav link) */
.ss-nav__item--has-dropdown > button.ss-nav__link {
	background: none;
	border: none;
	cursor: pointer;
}

/* --- Global --- */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 120px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

/* --- Header Wrapper (sticky on WP template-part level) --- */

header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* --- Header (Modern Navbar) --- */

.ss-header {
	background: rgba(var(--ss-cream-rgb, 245, 242, 237), 0.98);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--ss-cream-dark);
	box-shadow: 0 1px 3px rgba(61, 46, 36, 0.03);
}

.ss-header__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
	height: 64px;
	display: flex;
	align-items: center;
	gap: 2rem;
}

.ss-header__brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	flex-shrink: 0;
}

.ss-header__logo {
	width: 34px;
	height: 34px;
	border-radius: var(--ss-radius-sm);
}

.ss-header__name {
	font-family: var(--ss-font-sans);
	font-size: 1.1rem;
	font-weight: 300;
	color: var(--ss-mocha);
	letter-spacing: -0.02em;
}

.ss-header__name strong {
	font-weight: 600;
}

/* Desktop nav */
.ss-nav {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin-left: auto;
}

.ss-nav__link {
	font-family: var(--ss-font-sans);
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--ss-mocha-mid);
	text-decoration: none;
	padding: 0.45rem 0.75rem;
	border-radius: var(--ss-radius-sm);
	transition: color var(--ss-transition), background var(--ss-transition);
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

.ss-nav__link:hover {
	color: var(--ss-mocha);
	background: var(--ss-cream);
}

.ss-nav__chevron {
	width: 10px;
	height: 6px;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

/* Dropdown wrapper */
.ss-nav__item {
	position: relative;
}

.ss-nav__item--has-dropdown:hover .ss-nav__chevron {
	transform: rotate(180deg);
}

/* Dropdown panel */
.ss-nav__dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: var(--ss-pure-white);
	border: 1px solid var(--ss-cream-dark);
	border-radius: var(--ss-radius);
	box-shadow: 0 4px 16px rgba(61, 46, 36, 0.08);
	padding: 0.4rem 0;
	z-index: 110;
	margin-top: 0.25rem;
}

.ss-nav__item--has-dropdown:hover .ss-nav__dropdown,
.ss-nav__item--has-dropdown:focus-within .ss-nav__dropdown {
	display: block;
}

/* Invisible bridge so dropdown stays open when moving mouse from link to dropdown */
.ss-nav__item--has-dropdown::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 0.35rem;
}

.ss-nav__dropdown-link {
	display: block;
	font-family: var(--ss-font-sans);
	font-size: 0.84rem;
	font-weight: 400;
	color: var(--ss-mocha-mid);
	text-decoration: none;
	padding: 0.5rem 1rem;
	transition: color var(--ss-transition), background var(--ss-transition);
}

.ss-nav__dropdown-link:hover {
	color: var(--ss-mocha);
	background: var(--ss-cream);
}

/* Dropdown section label */
.ss-nav__dropdown-label {
	display: block;
	font-family: var(--ss-font-sans);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ss-green);
	padding: 0.6rem 0.85rem 0.25rem;
	margin-top: 0.25rem;
	border-top: 1px solid var(--ss-cream-dark);
}

.ss-mobile-nav__label {
	display: block;
	font-family: var(--ss-font-sans);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ss-green);
	padding: 0.75rem 1rem 0.25rem;
	margin-top: 0.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* CTA button in header */
.ss-header__cta {
	font-family: var(--ss-font-sans);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ss-white);
	background: var(--ss-green);
	padding: 0.5rem 1.1rem;
	border-radius: var(--ss-radius-sm);
	text-decoration: none;
	flex-shrink: 0;
	transition: background var(--ss-transition), box-shadow var(--ss-transition);
	box-shadow: 0 1px 4px rgba(74, 124, 89, 0.2);
}

.ss-header__cta:hover {
	background: var(--ss-green-dark);
	box-shadow: 0 2px 8px rgba(74, 124, 89, 0.3);
	color: var(--ss-white);
}

/* Hamburger (hidden on desktop) */
.ss-hamburger {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	margin-left: auto;
	flex-direction: column;
	gap: 5px;
	-webkit-tap-highlight-color: transparent;
}

.ss-hamburger__line {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--ss-mocha);
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hamburger → X animation */
.ss-header.is-open .ss-hamburger__line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.ss-header.is-open .ss-hamburger__line:nth-child(2) {
	opacity: 0;
}

.ss-header.is-open .ss-hamburger__line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav (hidden on desktop) */
.ss-mobile-nav {
	display: none;
}

/* Mobile nav open state — set via media query below */

/* --- Hero Section (Cinematic) --- */

.hero--cinematic {
	position: relative;
	overflow: hidden;
	max-width: none;
	padding: 0;
	display: block;
	min-height: 420px;
}

.hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		135deg,
		rgba(61, 46, 36, 0.88) 0%,
		rgba(61, 46, 36, 0.72) 40%,
		rgba(61, 46, 36, 0.45) 70%,
		rgba(61, 46, 36, 0.3) 100%
	);
}

.hero-content {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	margin: 0 auto;
	padding: 5rem 2rem 4rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

.hero--cinematic .hero-badge {
	background: rgba(74, 124, 89, 0.2);
	border: 1px solid rgba(74, 124, 89, 0.4);
	color: var(--ss-green-light);
	backdrop-filter: blur(8px);
}

.hero--cinematic .hero-title {
	color: var(--ss-cream);
}

.hero--cinematic .hero-sub {
	color: rgba(240, 235, 227, 0.8);
}

.hero--cinematic .btn-ghost--hero {
	color: var(--ss-cream);
	border-color: rgba(240, 235, 227, 0.35);
}

.hero--cinematic .btn-ghost--hero:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(240, 235, 227, 0.6);
	color: var(--ss-white);
}

.hero--cinematic .hero-score-card {
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-color: rgba(255, 255, 255, 0.18);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.hero--cinematic .hero-score-card:first-child {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(74, 124, 89, 0.5);
	box-shadow: 0 4px 24px rgba(74, 124, 89, 0.15);
}

.hero--cinematic .hsc-rank {
	color: rgba(240, 235, 227, 0.6);
}

.hero--cinematic .hero-score-card:first-child .hsc-rank {
	color: var(--ss-green-light);
}

.hero--cinematic .hsc-name {
	color: var(--ss-cream);
}

.hero--cinematic .hsc-meta {
	color: rgba(240, 235, 227, 0.55);
}

.hero--cinematic .score-num {
	color: var(--ss-cream);
}

.hero--cinematic .score-max {
	color: rgba(240, 235, 227, 0.5);
}

/* Fallback: non-cinematic hero */
.hero:not(.hero--cinematic) {
	max-width: 1200px;
	margin: 0 auto;
	padding: 5rem 2rem 4rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

.hero-badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ss-green);
	background: var(--ss-green-light);
	padding: 0.4rem 1rem;
	border-radius: var(--ss-radius-pill);
	margin-bottom: 1.5rem;
}

.hero-title {
	font-family: var(--ss-font-serif);
	font-size: 3.2rem;
	font-weight: 400;
	line-height: 1.15;
	color: var(--ss-mocha);
	letter-spacing: -0.02em;
}

.hero-sub {
	margin-top: 1.2rem;
	font-size: 1.1rem;
	color: var(--ss-mocha-mid);
	line-height: 1.7;
	max-width: 480px;
}

.hero-actions {
	display: flex;
	gap: 0.8rem;
	margin-top: 2rem;
}

.hero-chips {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.2rem;
	flex-wrap: wrap;
}

.hero-chip {
	font-size: 0.78rem;
	font-weight: 500;
	padding: 0.35rem 0.9rem;
	border-radius: var(--ss-radius-pill);
	border: 1px solid var(--ss-cream-dark);
	background: var(--ss-white);
	color: var(--ss-mocha-mid);
	text-decoration: none;
	transition: all var(--ss-transition);
}

.hero-chip:hover {
	background: var(--ss-green);
	border-color: var(--ss-green);
	color: var(--ss-white);
}

.hero--cinematic .hero-chip {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.22);
	color: rgba(240, 235, 227, 0.75);
	backdrop-filter: blur(8px);
}

.hero--cinematic .hero-chip:hover {
	background: rgba(74, 124, 89, 0.5);
	border-color: rgba(74, 124, 89, 0.6);
	color: var(--ss-white);
}

.hero-visual {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.hero-score-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: var(--ss-white);
	border: 1px solid var(--ss-cream-dark);
	border-radius: var(--ss-radius-lg);
	padding: 1rem 1.25rem;
	transition: transform var(--ss-transition), box-shadow var(--ss-transition);
	box-shadow: var(--ss-shadow-sm);
	text-decoration: none;
	cursor: pointer;
}

.hero-score-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--ss-shadow-md);
}

.hero--cinematic .hero-score-card:hover {
	background: rgba(255, 255, 255, 0.22);
	box-shadow: 0 6px 28px rgba(0, 0, 0, 0.18);
}

.hero-score-card:first-child {
	border-color: var(--ss-green);
	border-width: 2px;
	background: linear-gradient(135deg, var(--ss-white) 0%, var(--ss-green-light) 100%);
	box-shadow: 0 4px 20px rgba(74, 124, 89, 0.1);
}

.hsc-rank {
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--ss-mocha-light);
	min-width: 1.8rem;
}

.hero-score-card:first-child .hsc-rank {
	color: var(--ss-green);
}

.hsc-thumb {
	width: 48px;
	height: 48px;
	object-fit: contain;
	border-radius: var(--ss-radius-sm);
	background: rgba(255, 255, 255, 0.15);
	flex-shrink: 0;
}

.hero--cinematic .hsc-thumb {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.hsc-body { flex: 1; }

.hsc-name {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--ss-mocha);
}

.hsc-meta {
	font-size: 0.78rem;
	color: var(--ss-mocha-light);
	margin-top: 0.1rem;
}

.hsc-score { text-align: right; }

.score-num {
	font-weight: 700;
	font-size: 1.4rem;
	color: var(--ss-mocha);
}

.score-max {
	font-size: 0.8rem;
	color: var(--ss-mocha-light);
	font-weight: 400;
}

/* --- Buttons --- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--ss-font-sans);
	font-size: 0.9rem;
	font-weight: 600;
	padding: 0.75rem 1.6rem;
	border-radius: var(--ss-radius);
	transition: all var(--ss-transition);
	cursor: pointer;
	border: none;
	text-decoration: none;
}

.btn-primary {
	background: var(--ss-green);
	color: var(--ss-white);
	box-shadow: 0 2px 8px rgba(74, 124, 89, 0.25);
}

.btn-primary:hover {
	background: var(--ss-green-dark);
	box-shadow: 0 4px 16px rgba(74, 124, 89, 0.3);
	transform: translateY(-1px);
	color: var(--ss-white);
}

.btn-ghost {
	background: transparent;
	color: var(--ss-mocha);
	border: 1.5px solid var(--ss-cream-dark);
}

.btn-ghost:hover {
	border-color: var(--ss-mocha-light);
	background: var(--ss-cream);
	color: var(--ss-mocha);
}


/* --- Grade Badges --- */

.grade {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--ss-radius-sm);
	font-family: var(--ss-font-sans);
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--ss-white);
	flex-shrink: 0;
}


.grade-a { background: var(--ss-grade-a-deep); }
.grade-b { background: var(--ss-grade-b-deep); }
.grade-c { background: var(--ss-grade-c-deep); }
.grade-d { background: var(--ss-grade-d-deep); }
.grade-f { background: var(--ss-grade-f-deep); }
/* Fallback fuer unbekannte/handgetippte Notenwerte — verhindert ein unsichtbares
   Schild (weisse Schrift auf transparent), seit die Basisregel keine Farbe mehr setzt. */
.grade-na { background: var(--ss-mocha-mid); }

/* --- Trust Bar --- */

.trust-bar {
	background: var(--ss-cream);
	border-top: 1px solid var(--ss-cream-dark);
	border-bottom: 1px solid var(--ss-cream-dark);
}

.trust-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.5rem 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.5rem;
}

.trust-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.trust-num {
	font-family: var(--ss-font-serif);
	font-size: 1.6rem;
	color: var(--ss-green);
	line-height: 1;
}

.trust-label {
	font-size: 0.78rem;
	color: var(--ss-mocha-mid);
	margin-top: 0.3rem;
	font-weight: 500;
}

.trust-sep {
	width: 1px;
	height: 2.5rem;
	background: var(--ss-cream-dark);
}

/* --- Section Titles --- */

.section-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

.section-title {
	font-family: var(--ss-font-serif);
	font-size: 2.5rem;
	font-weight: 400;
	color: var(--ss-mocha);
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.section-sub {
	color: var(--ss-mocha-mid);
	font-size: 1.1rem;
	margin-top: 0.6rem;
	max-width: 540px;
}

/* --- Categories --- */

.categories {
	padding: 4.5rem 0;
	background: var(--ss-cream);
}

.cat-grid {
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	gap: 1.25rem;
	margin-top: 2.5rem;
	align-items: stretch;
}

.cat-card {
	background: var(--ss-white);
	border: 1px solid var(--ss-cream-dark);
	border-radius: var(--ss-radius-lg);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	transition: transform var(--ss-transition), box-shadow var(--ss-transition);
	position: relative;
	text-decoration: none;
	color: inherit;
	box-shadow: var(--ss-shadow-sm);
}

.cat-card:hover {
	border-color: var(--ss-green);
	box-shadow: 0 8px 30px rgba(74, 124, 89, 0.08);
	transform: translateY(-3px);
	color: inherit;
}


.cat-name {
	font-family: var(--ss-font-serif);
	font-size: 1.4rem;
	font-weight: 400;
	margin: 0;
}


/* Image-based category cards */
.cat-card--img {
	padding: 0;
	overflow: hidden;
}

.cat-card__img {
	aspect-ratio: 16/9;
	overflow: hidden;
	position: relative;
	display: block;
}

.cat-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.cat-card--img:hover .cat-card__img img {
	transform: scale(1.05);
}

.cat-card__body {
	padding: 1.25rem 1.5rem 1.5rem;
	position: relative;
}

.cat-desc {
	font-size: 0.88rem;
	color: var(--ss-mocha-mid);
	line-height: 1.65;
	margin-top: 0.5rem;
	margin-bottom: 0;
}


/* Feature card (Omega-3) */
.cat-card--feature {
	display: flex;
	flex-direction: column;
}

.cat-card--feature .cat-card__img {
	aspect-ratio: auto;
	height: 220px;
	flex-shrink: 0;
}

.cat-card--feature .cat-card__body {
	padding: 1.5rem 1.75rem 1.75rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.cat-card--feature .cat-name {
	font-size: 1.6rem;
}

.cat-card--feature .cat-desc {
	font-size: 0.9rem;
	margin-top: 0.5rem;
	margin-bottom: 1.25rem;
	flex: 1;
}

.cat-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--ss-green);
	color: var(--ss-pure-white);
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 4px 10px;
	border-radius: 100px;
}

.cat-btn {
	display: inline-block;
	background: var(--ss-green);
	color: var(--ss-pure-white);
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.6rem 1.25rem;
	border-radius: var(--ss-radius);
	text-decoration: none;
	align-self: flex-start;
	transition: background var(--ss-transition);
}

/* Hover nur auf dem Button selbst, nicht beim Hover der ganzen Karte */
.cat-btn:hover {
	background: var(--ss-mocha);
}

.cat-sublinks {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.05rem; /* klarer Abstand zum Button darueber */
	flex-wrap: wrap;
}

.cat-sublink {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--ss-mocha-mid);
	text-decoration: none;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--ss-cream-dark);
	border-radius: var(--ss-radius-pill);
	transition: all var(--ss-transition);
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.cat-sublink span {
	font-size: 0.65rem;
	color: var(--ss-mocha-light);
	font-weight: 400;
}

.cat-sublink:hover {
	border-color: var(--ss-green);
	color: var(--ss-green);
	background: var(--ss-green-light);
}

.cat-sublink:hover span {
	color: var(--ss-green-dark);
}

/* Stack: two small cards */
.cat-stack {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.cat-card--small {
	flex-direction: row;
	padding: 0;
	flex: 1;
}

.cat-card__img-thumb {
	width: 110px;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: var(--ss-radius-lg) 0 0 var(--ss-radius-lg);
}

.cat-card__img-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cat-card--small .cat-card__body {
	padding: 1rem 1.25rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.cat-card--small .cat-name {
	font-size: 1rem;
	margin-bottom: 0.35rem;
}

.cat-card--small .cat-desc {
	font-size: 0.78rem;
	margin-top: 0;
	margin-bottom: 0.75rem;
}

/* --- Testsieger --- */

/* Testsieger + Ranking-Preview laufen jetzt im einheitlichen guide-section-Schema
   (Hintergrund + Padding via .guide-section / .guide-section--alt, Zähler in review-body.php).
   Klassen bleiben nur als Haken für die wpautop-/<br>-Fixes erhalten. */
.testsieger {
	padding: 0;
	background: none;
}

/* --- Ranking Preview --- */

.ranking-preview {
	padding: 0;
	background: none;
}

.rp-header {
	display: block;
}

.rp-all {
	display: inline-block;
	margin-top: 1.25rem;
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--ss-green);
	transition: color var(--ss-transition);
	text-decoration: none;
}

.rp-all:hover {
	color: var(--ss-green-dark);
}


/* --- USP Section --- */

.usp {
	background: var(--ss-mocha);
	padding: 0;
}

.usp-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
}

.usp-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 3rem 3rem;
	border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.usp-item:last-child {
	border-right: none;
}

.usp-item-icon {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: rgba(74, 124, 89, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ss-green-light);
	flex-shrink: 0;
}

.usp-item-title {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--ss-white);
	margin-bottom: 0.3rem;
}

.usp-item-text {
	font-size: 0.75rem;
	color: rgba(245, 237, 227, 0.55);
	line-height: 1.6;
}

/* --- Articles (Ratgeber) --- */

.articles {
	padding: 4.5rem 0;
	background: var(--ss-cream);
}

.article-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 2.5rem;
}

.article-card {
	background: var(--ss-white);
	border-radius: var(--ss-radius-lg);
	overflow: hidden;
	border: 1px solid transparent;
	transition: all var(--ss-transition);
	box-shadow: var(--ss-shadow-sm);
	text-decoration: none;
	color: inherit;
}

.article-card:hover {
	border-color: var(--ss-cream-dark);
	box-shadow: var(--ss-shadow-lg);
	transform: translateY(-3px);
	color: inherit;
}

.article-img {
	position: relative;
	aspect-ratio: 16/9;
	background: var(--ss-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.article-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.article-card:hover .article-img img {
	transform: scale(1.05);
}


.article-cat {
	position: absolute;
	top: 0.8rem;
	left: 0.8rem;
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: var(--ss-white);
	color: var(--ss-green);
	padding: 0.25rem 0.6rem;
	border-radius: var(--ss-radius-sm);
}

.article-badge {
	position: absolute;
	bottom: 0.8rem;
	right: 0.8rem;
	font-size: 0.65rem;
	font-weight: 600;
	background: var(--ss-green);
	color: var(--ss-pure-white);
	padding: 0.2rem 0.55rem;
	border-radius: var(--ss-radius-pill);
	letter-spacing: 0.02em;
}

.article-body {
	padding: 1.5rem;
}

.article-date {
	font-size: 0.75rem;
	color: var(--ss-mocha-light);
}

.article-title {
	font-family: var(--ss-font-serif);
	font-size: 1.1rem;
	font-weight: 400;
	margin-top: 0.4rem;
	line-height: 1.35;
	margin-bottom: 0;
}

.article-card:hover .article-title {
	color: var(--ss-green-dark);
}

.article-excerpt {
	font-size: 0.88rem;
	color: var(--ss-mocha-mid);
	margin-top: 0.5rem;
	line-height: 1.6;
}

/* --- Article Cards: disabled state (planned articles) --- */


/* --- Footer --- */

.site-footer .footer-links {
	list-style: none;
}

.site-footer .footer-links li {
	padding: 0.25rem 0;
}

/* !important mit Grund (Palette 03.09.2026): die generische
   .guide-section a:not(…)-Kette (0,10,1) zog Footer- und Legal-Links auf
   Marken-Grün — 2,7:1 auf Mocha, 1,4:1 auf Grün-dunkel. Gleiche Mechanik wie
   bei den Fazit-Links (2.78.1). */
.site-footer .footer-links a,
.legal-links__secondary a,
.guide-section--legal .legal-links__secondary a {
	color: var(--ss-green-light) !important;
	transition: color var(--ss-transition);
}

.site-footer .footer-links a:hover,
.legal-links__secondary a:hover,
.guide-section--legal .legal-links__secondary a:hover {
	color: var(--ss-pure-white) !important;
}

/* --- Page Card (content pages) --- */

.page-card {
	box-shadow: var(--ss-shadow-md);
	border: 1px solid var(--ss-cream-dark);
}

.page-card h1 {
	font-family: var(--ss-font-serif);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--ss-mocha);
}

.page-card h2 {
	font-family: var(--ss-font-serif);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ss-mocha);
}

.page-card h3 {
	font-family: var(--ss-font-serif);
	font-weight: 400;
	line-height: 1.2;
	color: var(--ss-mocha);
}

.page-card p,
.page-card li,
.page-card td {
	font-family: var(--ss-font-sans);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ss-mocha);
}

/* Fliesstext-Links in Seiten-Karten einfaerben — aber Buttons und Preis-Chips
   ausnehmen: die tragen ihre eigene Farbe. Ohne die Ausnahme wird der
   Button-Text gruen auf gruen und das Amazon-Chip verliert sein Orange,
   sobald ein Ranking in einer normalen Seite steht statt im Template
   (aufgefallen 18.08.2026 beim ersten Block-Einsatz). */
.page-card a:not(.btn):not(.price-tag) {
	color: var(--ss-green);
}

.page-card a:not(.btn):not(.price-tag):hover {
	color: var(--ss-green-dark);
}

/* --- Supplement Wissen (Bildkarten-Redesign) --- */
.supplement-wissen {
	padding: 4.5rem 0;
	background: var(--ss-pure-white);
}

.supplement-wissen .section-title {
	color: var(--ss-text);
}

.supplement-wissen .section-sub {
	color: var(--ss-muted);
}

.sw-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 2.5rem;
}

.sw-card {
	background: var(--ss-white);
	border-radius: var(--ss-radius-lg);
	overflow: hidden;
	border: 1px solid var(--ss-cream-dark);
	transition: box-shadow var(--ss-transition), transform var(--ss-transition);
}

.sw-card:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.sw-card__img {
	height: 100px;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sw-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sw-card__img-fallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
}

.sw-card__img-fallback--omega { background: linear-gradient(135deg, #1a3a4a 0%, #2d6a7a 40%, #4a9a8a 100%); }
.sw-card__img-fallback--vitd  { background: linear-gradient(135deg, #6b3a1a 0%, #b8700a 40%, #e8a830 100%); }
.sw-card__img-fallback--mag   { background: linear-gradient(135deg, #2a3a2a 0%, #4a5a3a 40%, #7a8a6a 100%); }

.sw-card__badge {
	position: absolute;
	top: 8px;
	left: 10px;
	background: rgba(0, 0, 0, 0.32);
	backdrop-filter: blur(4px);
	color: white;
	font-size: 0.63rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	padding: 3px 9px;
	border-radius: 100px;
}

.sw-card__body {
	padding: 16px 18px 18px;
}

.sw-card__title {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--ss-text);
	margin-bottom: 6px;
}

.sw-card__text {
	font-size: 0.8rem;
	color: var(--ss-muted);
	line-height: 1.65;
	margin-bottom: 10px;
}

.sw-card__stats {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.sw-card__stat {
	font-size: 0.7rem;
	font-weight: 600;
	padding: 3px 9px;
	border-radius: 100px;
	background: var(--ss-green-light);
	color: var(--ss-green);
}

.sw-card__stat--soon {
	background: var(--ss-cream-dark);
	color: var(--ss-mocha-mid);
}

.sw-card__link {
	display: inline-block;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ss-green);
	text-decoration: none;
	transition: color var(--ss-transition);
}

.sw-card__link:hover {
	color: var(--ss-green-dark);
}

.sw-footnote {
	font-size: 0.72rem;
	color: var(--ss-mocha-light);
	line-height: 1.6;
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--ss-cream-dark);
}

/* --- Intro Block --- */
.intro-block {
	background: var(--ss-pure-white);
	padding: 4.5rem 0;
	border-top: 1px solid var(--ss-cream-dark);
	border-bottom: 1px solid var(--ss-cream-dark);
}

.intro-block__lead {
	font-size: 1.125rem;
	line-height: 1.8;
	color: var(--ss-mocha-mid);
	max-width: 640px;
	margin-top: 1rem;
	margin-bottom: 24px;
}

.intro-block__lead strong {
	color: var(--ss-text);
}

.intro-block__trust {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 24px;
}

.intro-block__trust-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	background: var(--ss-white);
	border-radius: var(--ss-radius);
	border: 1px solid var(--ss-cream-dark);
}

.intro-block__trust-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--ss-radius-sm);
	background: var(--ss-green-light);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--ss-green);
}

.intro-block__trust-title {
	font-size: 0.82rem;
	font-weight: 700;
	margin-bottom: 2px;
	color: var(--ss-text);
}

.intro-block__trust-text {
	font-size: 0.74rem;
	color: var(--ss-muted);
	line-height: 1.5;
}

.intro-block__stats {
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
	align-items: baseline;
}

.intro-block__stat {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.intro-block__stat-num {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--ss-green);
	line-height: 1;
}

.intro-block__stat-label {
	font-size: 0.78rem;
	color: var(--ss-muted);
}

/* --- Category Showcase: disabled state --- */
.cat-card--disabled {
	opacity: 0.6;
	pointer-events: none;
	cursor: default;
}


.cat-soon {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 100px;
	background: var(--ss-cream-dark);
	color: var(--ss-mocha-mid);
	margin-top: 6px;
}

/* --- Category Hero --- */


/* --- Empfehlungsbox (Recommendation) --- */
/* Nutzt die rank-card--top-Klassen, braucht nur den Abstand. */
.ranking-cards + .ranking-empty + .rank-card--top,
.ranking-cards + .rank-card--top {
	margin-top: 2.5rem;
}

/* Redaktionelle Anmerkung unter Empfehlungsbox */
.rec-note {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	margin-top: 1rem;
	padding: 1rem 1.25rem;
	background: var(--ss-pure-white);
	border-radius: var(--ss-radius);
	border: 1px solid var(--ss-cream-dark);
}

.rec-note__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ss-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ss-mocha-mid);
	margin-top: 0.1rem;
	overflow: hidden;
}
.rec-note__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.rec-note__body {
	flex: 1;
	min-width: 0;
}
.rec-note__author-link {
	font-weight: 400;
	font-size: 0.78rem;
	color: var(--ss-mocha-mid);
	text-decoration: none;
	margin-left: 0.35rem;
}
.rec-note__author-link:hover {
	text-decoration: underline;
}

.rec-note__title {
	font-family: var(--ss-font-sans);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ss-mocha);
	display: block;
	margin-bottom: 0.3rem;
}

.rec-note__body p {
	font-family: var(--ss-font-sans);
	font-size: 0.8rem;
	line-height: 1.55;
	color: var(--ss-mocha-mid);
	margin: 0 0 0.4rem;
}

.rec-note__body .rec-note__disclosure {
	font-style: italic;
	font-size: 0.72rem;
	color: var(--ss-mocha-mid); /* Mocha-light <3:1 (T2) */
	margin-bottom: 0;
}

/* --- Ranking Cards (Category Page) --- */

.ranking-cards {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-top: 2.5rem;
}

.rank-card {
	background: var(--ss-white);
	border: 2px solid var(--ss-mocha-light);
	border-radius: var(--ss-radius-lg);
	overflow: hidden;
	transition: box-shadow var(--ss-transition);
	max-width: 100%;
	box-sizing: border-box;
}

.rank-card:hover {
	box-shadow: var(--ss-shadow-md);
}

.rank-card--top {
	border-color: var(--ss-green);
	border-width: 2px;
	background: var(--ss-rank-top-bg);
}

.rank-card__badge {
	background: var(--ss-green);
	color: var(--ss-white);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.4rem 1.2rem;
	display: inline-block;
}

.rank-card__inner {
	display: grid;
	grid-template-columns: auto 150px 1fr auto;
	gap: 1.25rem;
	padding: 1.25rem;
	align-items: stretch;
	box-sizing: border-box;
	max-width: 100%;
}

/* --- Testsieger card: two-column grid (content | score panel flush) --- */

.rank-card--top .rank-card__inner {
	display: grid;
	grid-template-columns: 1fr 220px;
	grid-template-rows: auto 1fr;
	gap: 0;
	padding: 0;
	align-items: stretch;
}

/* Badge B1: Corner Tab, 36px, oben links */
.rank-card--top .rank-card__badge {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	align-self: start;
	background: var(--ss-green);
	color: var(--ss-white);
	height: 36px;
	padding: 0 20px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-radius: 0 0 var(--ss-radius) 0;
	display: flex;
	align-items: center;
}

/* Content area: 170px image col + text col */
.rank-card--top .rank-card__content {
	grid-column: 1;
	grid-row: 2;
	display: grid;
	grid-template-columns: 170px 1fr;
	gap: 1.25rem;
	padding: 1.25rem;
	align-items: stretch;
}

/* Image column: image top, button bottom */
.rank-card--top .rank-card__img-col {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.75rem;
}

.rank-card--top .rank-card__img-wrap {
	width: 170px;
	height: 170px;
}

.rank-card--top .rank-card__img-col .btn,
.rank-card--top .rank-card__img-col .rank-card__self {
	height: 36px;
	width: 170px;
	margin-top: 0.35rem; /* mit der Price-Tag-Reihe abgesenkt */
	padding: 0;
	font-size: 0.75rem;
	border-radius: var(--ss-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}

/* Text column: body top, price-tags bottom */
.rank-card--top .rank-card__text-col {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.rank-card--top .rank-card__text-body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Tags+Specs buendig an die Unterkante (= Bildunterkante) pinnen,
   mit Luft zum Beschreibungstext darueber */
.rank-card--top .rank-card__text-body .rank-card__tags {
	margin-top: auto;
	padding-top: 0.75rem;
}

.rank-card--top .rank-card__brand {
	margin-bottom: 0.15rem;
}

.rank-card--top .rank-card__name {
	margin: 0 0 0.25rem;
}

.rank-card--top .rank-card__verdict {
	margin-top: 0.2rem;
}

.rank-card--top .rank-card__tags {
	margin-top: 0.35rem;
}

.rank-card--top .rank-card__specs {
	margin-top: 0.25rem;
}

/* Price tags at bottom of text col */
.rank-card--top .rank-card__price-tags {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: 0.75rem; /* Buttons deutlicher von der Spec-Zeile separieren */
}

.rank-card--top .rank-card__price-tags .price-tag {
	height: 36px;
	font-size: 0.75rem;
	border-radius: var(--ss-radius-sm);
}

/* Score panel — spans full height (badge + content rows) */
.rank-card--top .rank-card__score-panel {
	grid-column: 2;
	grid-row: 1 / -1;
}

/* --- Ranking Card: Gesamtsieger-Grid ohne Badge, ohne Panel-Hintergrund --- */

.rank-card__inner--rank {
	display: grid;
	grid-template-columns: 1fr 220px;
	gap: 0;
	padding: 0;
	align-items: stretch;
	position: relative;
	overflow: hidden;
}

.rank-card__content--rank {
	display: grid;
	grid-template-columns: auto 170px 1fr;
	gap: 1.25rem;
	padding: 1.25rem;
	align-items: stretch;
}

.rank-card__content--rank .rank-card__img-col {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.75rem;
}

.rank-card__content--rank .rank-card__img-wrap {
	width: 170px;
	height: 170px;
	flex: none;
}

.rank-card__content--rank .rank-card__img-col .btn,
.rank-card__content--rank .rank-card__img-col .rank-card__self {
	height: 36px;
	width: 170px;
	margin-top: 0.35rem; /* mit der Price-Tag-Reihe abgesenkt */
	padding: 0;
	font-size: 0.75rem;
	border-radius: var(--ss-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}

.rank-card__content--rank .rank-card__text-col {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.rank-card__content--rank .rank-card__text-body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.rank-card__content--rank .rank-card__text-body .rank-card__tags {
	margin-top: auto;
	padding-top: 0.75rem;
}

.rank-card__content--rank .rank-card__price-tags {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: 1.1rem; /* Buttons deutlicher von der Spec-Zeile separieren */
}

.rank-card__content--rank .rank-card__price-tags .price-tag {
	height: 36px;
	font-size: 0.75rem;
	border-radius: var(--ss-radius-sm);
}

.rank-card__score-panel--plain {
	background: transparent;
	border-left: none;
}

.rank-card__score-panel {
	background: var(--ss-cream-panel);
	border-left: 1px solid var(--ss-cream-dark);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1.5rem 1.2rem;
	gap: 0.2rem;
}

.rank-card__score-header {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.rank-card__score-group {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.rank-card--top .rank-card__score {
	font-size: 2.6rem;
	color: var(--ss-mocha);
}

.rank-card--top .rank-card__score-label {
	font-size: 0.72rem;
	margin-top: 0.08rem;
}

.rank-card__score-grade {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--ss-radius);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ss-white);
	/* Notenfarbe kommt aus der .grade-*-Utility (via ss_grade_class), nicht hart hier. */
}

.rank-card__score-divider {
	width: 50px;
	height: 1px;
	background: var(--ss-cream-dark);
	margin: 0.6rem 0;
}

/* Vertical pills in score panel */
.rank-card__pills-v {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	width: 100%;
}

.rank-pill-v {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--ss-cream);
	border-radius: var(--ss-radius-pill);
	padding: 0.3rem 0.6rem 0.3rem 0.45rem;
}

.rank-pill-v .rank-pill__dot {
	width: 7px;
	height: 7px;
}

.rank-pill-v .rank-pill__label {
	flex: 1;
	font-size: 0.64rem; /* +1px ggue. Basis-Pill-Label */
}

.rank-pill-v .rank-pill__val {
	font-size: 0.74rem; /* +1px */
}

.rank-card__rank {
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--ss-mocha-mid); /* Mocha-light 2,5:1 (T2) */
	min-width: 2rem;
	text-align: center;
	align-self: center;
}


.rank-card__cat-badge {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: var(--ss-green-light);
	color: var(--ss-green-dark); /* Gruen auf Gruen-hell war 3,65:1 (T2, 03.09.2026) */
	padding: 0.2em 0.55em;
	border-radius: 4px;
	margin-bottom: 0.3rem;
}

/* Preis-Leistungs-Sieger (02.09.2026): zweiter Badge im selben Slot. Steht er
   neben "Testsieger Fischoel", trennt ein Abstand die beiden. */
.rank-card__cat-badge + .rank-card__cat-badge {
	margin-left: 0.35rem;
}

.rank-card__brand {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ss-mocha-mid); /* Mocha-light 2,5:1 (T2) */
	text-decoration: none;
}
a.rank-card__brand:hover {
	color: var(--ss-green);
}

.rank-card__name {
	font-family: var(--ss-font-serif);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.3;
	margin: 0.125rem 0 0;
	color: var(--ss-mocha);
}


.rank-card__specs {
	display: flex;
	gap: 1.25rem;
	margin-top: 0.5rem;
	flex-wrap: wrap;
}

.rank-card__spec {
	font-size: 0.8rem;
	color: var(--ss-mocha-mid);
}

.rank-card__spec strong {
	color: var(--ss-mocha);
}

/* Visuell versteckt, fuer Screenreader lesbar. Standard-Rezept, im Theme bis
   zum 27.08.2026 nicht vorhanden. clip-path statt display:none, weil display:none
   den Text auch der Sprachausgabe entzieht. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ── Preisniveau: volle Skala plus beschreibendes Wort ──────────────────────
   Bjoern-Entscheid 27.08.2026. Es stehen immer alle vier Stufen da, die nicht
   erreichten blass. Ohne sichtbares Skalenende liess sich "€€" nicht einordnen
   (zwei von drei oder zwei von vier?) — Befund aus dem Modell-Brainstorming.
   Die Skala traegt aria-hidden, das Wort steht im aria-label des Wrappers:
   Screenreader lesen "€€€" sonst als "Euro Euro Euro" vor. */
.ss-preisniveau__wrap {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
}

.ss-preisniveau__skala {
	white-space: nowrap;
	letter-spacing: 0.03em;
}

.ss-preisniveau__zeichen {
	color: var(--ss-mocha-light);
}

.ss-preisniveau__zeichen.is-aktiv {
	color: var(--ss-green);
	font-weight: 600;
}

.ss-preisniveau__wort {
	color: var(--ss-mocha-mid);
}


.rank-card__score {
	font-family: var(--ss-font-sans);
	font-weight: 700;
	font-size: 2rem;
	color: var(--ss-mocha);
	line-height: 1;
}

.rank-card__score-label {
	font-size: 0.7rem;
	color: var(--ss-mocha-mid); /* "von 100": Mocha-light war 2,31:1 auf Cream (T2) */
}

/* Score bars (testsieger detail) */


/* --- Rank Card: Enhanced compact layout --- */

.rank-card__img-col {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	gap: 1.25rem;
}

/* Karte des Produkts, dessen Test man gerade liest: kein Selbstlink, ein stilles
   Label an der Stelle des Knopfs. Masse wie .btn, damit die Karte nicht springt. */
.rank-card__self {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ss-font-sans);
	font-size: 0.9rem;
	font-weight: 600;
	padding: 0.75rem 1.6rem;
	border-radius: var(--ss-radius);
	border: 1px dashed var(--ss-cream-dark);
	color: var(--ss-mocha-mid);
	background: transparent;
	box-sizing: border-box; /* Rahmen inklusive: 170x36 wie der ersetzte .btn, am DOM gemessen (Gate 4 R2) */
}


.rank-card__img-wrap {
	width: 150px;
	min-height: 150px;
	flex: 1 0 150px;
	background: var(--ss-cream);
	border-radius: var(--ss-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.rank-card__img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}


/* Kein Zeilen-Clamp mehr (Bjoern, 02.09.2026): Gemessen auf Live waren
   24 von 27 Karten am Desktop und 27 von 27 am Handy abgeschnitten — das
   Kurzfazit ist auf drei Zeilen bei 960 px geschrieben und passte nie in zwei
   Zeilen der Karte. Ein Text mit "…" ist schlechter als ein laengerer Text. */
.rank-card__verdict {
	font-size: 0.875rem;
	color: var(--ss-mocha-mid);
	margin-top: 0.5rem;
	line-height: 1.6;
}

.rank-card__tags {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
	flex-wrap: wrap;
}

.rank-card__tag {
	font-size: 0.62rem;
	font-weight: 600;
	color: var(--ss-green);
	background: var(--ss-green-light);
	padding: 0.15rem 0.5rem;
	border-radius: var(--ss-radius-pill);
}

.rank-card__tag[data-filter-slug] {
	cursor: pointer;
	transition: all 0.2s ease;
}

.rank-card__tag[data-filter-slug]:hover {
	background: var(--ss-green);
	color: var(--ss-white);
	transform: translateY(-2px);
	box-shadow: 0 3px 8px rgba(74, 124, 89, 0.25);
}

/* Score pills */


.rank-pill__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}

.rank-pill__label {
	font-size: 0.58rem;
	color: var(--ss-mocha-mid);
}

.rank-pill__val {
	font-size: 0.62rem;
	font-weight: 700;
}

/* Pill color classes (rating-only) */
.rank-pill--exc .rank-pill__dot { background: var(--ss-grade-a); }
.rank-pill--exc .rank-pill__val { color: var(--ss-grade-a-deep); }
.rank-pill--good .rank-pill__dot { background: var(--ss-grade-b); }
.rank-pill--good .rank-pill__val { color: var(--ss-grade-b-deep); }
.rank-pill--ok .rank-pill__dot { background: var(--ss-grade-c); }
.rank-pill--ok .rank-pill__val { color: var(--ss-grade-c-deep); }
.rank-pill--weak .rank-pill__dot { background: var(--ss-grade-d); }
.rank-pill--weak .rank-pill__val { color: var(--ss-grade-d-deep); }
.rank-pill--poor .rank-pill__dot { background: var(--ss-grade-f); }
.rank-pill--poor .rank-pill__val { color: var(--ss-grade-f-deep); }


.rank-pill-v[data-sort-key] {
	cursor: pointer;
	transition: all 0.2s ease;
}

.rank-pill-v[data-sort-key]:hover {
	background: var(--ss-green);
	transform: translateY(-2px);
	box-shadow: 0 3px 8px rgba(74, 124, 89, 0.25);
}

.rank-pill-v[data-sort-key]:hover .rank-pill__dot {
	background: var(--ss-white);
}

.rank-pill-v[data-sort-key]:hover .rank-pill__label {
	color: var(--ss-white);
}

.rank-pill-v[data-sort-key]:hover .rank-pill__val {
	color: var(--ss-white);
}

/* --- Price Tags (Amazon / Hersteller) --- */


.price-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.45rem 0.8rem;
	border-radius: var(--ss-radius-sm);
	font-size: 0.75rem;
	font-weight: 600;
	height: 34px;
	box-sizing: border-box;
	text-decoration: none;
	transition: all var(--ss-transition);
}

.price-tag:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(61, 46, 36, 0.12);
}

.price-tag--amazon:hover {
	background: var(--ss-amber-light);
	border-color: var(--ss-amber-dark);
}

.price-tag--shop:hover {
	background: var(--ss-green-light);
	border-color: var(--ss-green-dark);
}


.price-tag--amazon {
	background: var(--ss-pure-white);
	color: var(--ss-amazon-orange);
	border: 1.5px solid var(--ss-amazon-orange);
}

.price-tag--shop {
	background: var(--ss-pure-white);
	color: var(--ss-green-dark);
	border: 1.5px solid var(--ss-green);
}


/* --- Sub-Kategorie-Links --- */

.ranking-subcats {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

.ranking-subcats__label {
	font-size: 0.8rem;
	color: var(--ss-mocha-mid); /* Mocha-light war 2,80:1 auf Weiss (T2) */
	font-weight: 500;
}


.ranking-subcats__pill {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--ss-mocha);
	text-decoration: none;
	background: var(--ss-white);
	border: 1px solid var(--ss-cream-dark);
	padding: 0.4em 1em;
	border-radius: var(--ss-radius);
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.ranking-subcats__pill:hover {
	border-color: var(--ss-green);
	color: var(--ss-green);
	background: var(--ss-green-light);
}

/* Unter 40 em (640 px) brach die Flex-Zeile nach Textbreite um: drei Pillen
   verschiedener Laenge, das Label irgendwo dazwischen — Bjoern sah es als
   "verschoben" (02.09.2026). Jetzt: Label auf eigener Zeile, Pillen als
   zwei gleich breite Spalten. Bei ungerader Zahl laeuft die letzte Pille ueber
   beide Spalten, sonst bliebe rechts ein Loch. */
@media (max-width: 40em) {
	.ranking-subcats {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
	}

	.ranking-subcats__label {
		grid-column: 1 / -1;
	}

	.ranking-subcats__pill {
		text-align: center;
	}

	/* Das Label ist Kind 1, die Pillen sind Kinder 2..n. Die letzte Pille auf
	   einer geraden Position ist die einzelne in einer sonst leeren Zeile. */
	.ranking-subcats__pill:last-child:nth-child(even) {
		grid-column: 1 / -1;
	}
}

.ranking-crosslink {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--ss-cream-dark);
	font-size: 0.85rem;
	color: var(--ss-mocha-mid);
}

.ranking-crosslink p { margin: 0.3rem 0; }
.ranking-crosslink a { color: var(--ss-green); font-weight: 500; }

/* --- Methodik-Kurzblock --- */

.methodik-block {
	margin-bottom: 2rem;
}

.methodik-block__title {
	font-family: var(--ss-font-serif);
	font-size: 1.4rem;
	color: var(--ss-mocha);
	margin: 0 0 0.5rem;
}

.methodik-block__lead {
	font-size: 1.0625rem; /* 17px — Intro-Absatz = Body-Groesse */
	color: var(--ss-mocha-mid);
	margin: 0 0 1.25rem;
	line-height: 1.6;
}

.methodik-block__lead strong {
	color: var(--ss-mocha);
}

.methodik-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 0.5rem;
}

.methodik-card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	background: var(--ss-pure-white, #ffffff);
	border-radius: var(--ss-radius);
	border: 1px solid var(--ss-cream-dark);
}

.methodik-card__icon {
	width: 36px;
	height: 36px;
	border-radius: var(--ss-radius-sm);
	background: var(--ss-green-light);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--ss-green);
}

.methodik-card__title {
	font-size: 1rem; /* 16px — wie andere Boxen-Titel */
	font-weight: 700;
	margin-bottom: 2px;
	color: var(--ss-text);
}

.methodik-card__text {
	font-size: 0.9375rem; /* 15px — wie anderer Boxen-Text */
	color: var(--ss-muted);
	line-height: 1.5;
	margin-bottom: 4px;
}

.methodik-card__weight {
	font-size: 0.75rem; /* 12px */
	font-weight: 600;
	color: var(--ss-green);
	/* an Kartenunterkante pinnen — Gewichtung fluchtet ueber alle Karten,
	   egal ob der Text darueber 1- oder 2-zeilig laeuft */
	margin-top: auto;
}

.methodik-card > div:last-child {
	display: flex;
	flex-direction: column;
	flex: 1;
	align-self: stretch;
}

.methodik-link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-top: 1rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--ss-green);
	text-decoration: none;
}

.methodik-link:hover {
	text-decoration: underline;
}

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

	
}

/* --- Ranking Controls (Filter/Sort UI) --- */

.ranking-controls {
	background: var(--ss-white);
	border: 1px solid var(--ss-cream-dark);
	border-radius: var(--ss-radius-lg);
	padding: 1.2rem 1.5rem;
	margin-top: 2rem;
	margin-bottom: 1.5rem;
}

.ranking-controls__row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.ranking-controls__row + .ranking-controls__row {
	margin-top: 0.8rem;
	padding-top: 0.8rem;
	border-top: 1px solid var(--ss-cream-dark);
}

.ranking-controls__label {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ss-mocha-mid); /* Mocha-light 2,5:1 (T2) */
	min-width: 70px;
}

.ranking-btn {
	font-family: var(--ss-font-sans);
	font-size: 0.78rem;
	font-weight: 500;
	padding: 0.35rem 0.8rem;
	border-radius: var(--ss-radius-pill);
	border: 1.5px solid var(--ss-cream-dark);
	background: transparent;
	color: var(--ss-mocha-mid);
	cursor: pointer;
	transition: all var(--ss-transition);
}

.ranking-btn:hover {
	border-color: var(--ss-green);
	color: var(--ss-green);
}

.ranking-btn--active {
	background: var(--ss-green);
	border-color: var(--ss-green);
	color: var(--ss-white);
}

.ranking-btn--active:hover {
	background: var(--ss-green-dark);
	border-color: var(--ss-green-dark);
	color: var(--ss-white);
}

/* Sort dropdown */
.ranking-sort-select {
	appearance: none;
	-webkit-appearance: none;
	background: var(--ss-white);
	border: 1.5px solid var(--ss-cream-dark);
	border-radius: var(--ss-radius-sm);
	padding: 0.4rem 2.2rem 0.4rem 0.75rem;
	font-family: var(--ss-font-sans);
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--ss-mocha);
	cursor: pointer;
	transition: border-color var(--ss-transition);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%236B5A4E' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.6rem center;
}

.ranking-sort-select:hover,
.ranking-sort-select:focus {
	border-color: var(--ss-green);
	outline: none;
}

.rank-card--hidden {
	display: none;
}

.ranking-empty {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--ss-mocha-light);
	font-size: 1rem;
	display: none;
}


/* --- Focus Styles (Accessibility) --- */

a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--ss-green);
	outline-offset: 2px;
}

/* --- Responsive --- */

@media (max-width: 900px) {
	/* Navbar mobile */
	.ss-nav,
	.ss-header__cta {
		display: none;
	}

	.ss-hamburger {
		display: flex;
	}

	.ss-header__inner {
		padding: 0 1.25rem;
	}

	/* Mobile nav slide-down */
	.ss-mobile-nav {
		display: none;
		flex-direction: column;
		padding: 0.5rem 1.25rem 1.25rem;
		border-top: 1px solid var(--ss-cream-dark);
		background: var(--ss-white);
	}

	.ss-header.is-open .ss-mobile-nav {
		display: flex;
	}

	.ss-mobile-nav__link {
		font-family: var(--ss-font-sans);
		font-size: 0.95rem;
		font-weight: 500;
		color: var(--ss-mocha-mid);
		text-decoration: none;
		padding: 0.75rem 0;
		border-bottom: 1px solid var(--ss-cream-dark);
		transition: color var(--ss-transition);
	}

	.ss-mobile-nav__link:last-of-type {
		border-bottom: none;
	}

	.ss-mobile-nav__link:hover {
		color: var(--ss-mocha);
	}

	.ss-mobile-nav__cta {
		font-family: var(--ss-font-sans);
		font-size: 0.9rem;
		font-weight: 600;
		color: var(--ss-white);
		background: var(--ss-green);
		padding: 0.75rem 1.25rem;
		border-radius: var(--ss-radius);
		text-align: center;
		text-decoration: none;
		margin-top: 0.75rem;
		transition: background var(--ss-transition);
	}

	.ss-mobile-nav__cta:hover {
		background: var(--ss-green-dark);
		color: var(--ss-white);
	}

	/* Mobile accordion toggles */
	.ss-mobile-nav__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		background: none;
		border: none;
		cursor: pointer;
		font-family: var(--ss-font-sans);
		font-size: 0.95rem;
		font-weight: 500;
		color: var(--ss-mocha-mid);
		padding: 0.75rem 0;
		border-bottom: 1px solid var(--ss-cream-dark);
	}

	.ss-mobile-nav__toggle .ss-nav__chevron {
		transition: transform 0.2s ease;
	}

	.ss-mobile-nav__group.is-open .ss-mobile-nav__toggle .ss-nav__chevron {
		transform: rotate(180deg);
	}

	.ss-mobile-nav__sub {
		display: none;
		flex-direction: column;
		padding-left: 1rem;
		background: var(--ss-cream);
		border-radius: 0 0 var(--ss-radius-sm) var(--ss-radius-sm);
	}

	.ss-mobile-nav__group.is-open .ss-mobile-nav__sub {
		display: flex;
	}

	.ss-mobile-nav__sublink {
		font-family: var(--ss-font-sans);
		font-size: 0.88rem;
		font-weight: 400;
		color: var(--ss-mocha-mid);
		text-decoration: none;
		padding: 0.6rem 0.75rem;
		border-bottom: 1px solid var(--ss-cream-dark);
		transition: color var(--ss-transition);
	}

	.ss-mobile-nav__sublink:last-child {
		border-bottom: none;
	}

	.ss-mobile-nav__sublink:hover {
		color: var(--ss-green);
	}

	/* Hide dropdown chevrons in mobile (accordion handles it) */
	.ss-nav__dropdown { display: none !important; }

	/* Hero responsive */
	.hero--cinematic {
		min-height: 320px;
	}

	.hero:not(.hero--cinematic) {
		grid-template-columns: 1fr;
		padding: 3rem 1.5rem 2rem;
		gap: 2rem;
	}

	.hero-content {
		grid-template-columns: 1fr;
		padding: 3rem 1.5rem 2rem;
		gap: 2rem;
	}

	.hero-bg img {
		object-position: center center;
	}

	.hero-title {
		font-size: 2.2rem;
	}

	.hero-visual {
		display: none;
	}

	.hero-actions {
		flex-wrap: wrap;
	}

	/* Grid sections responsive */
	.cat-grid {
		grid-template-columns: 1fr;
	}

	.cat-card--small {
		flex-direction: column;
	}

	.cat-card__img-thumb {
		width: 100%;
		height: 120px;
		border-radius: var(--ss-radius-lg) var(--ss-radius-lg) 0 0;
	}

	.usp-strip {
		grid-template-columns: 1fr;
	}

	.usp-item {
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.usp-item:last-child {
		border-bottom: none;
	}

	.article-grid {
		grid-template-columns: 1fr;
	}

	

	

	/* 2x2 mit gleichen Spalten (Bjoern, 02.09.2026). Als umbrechende Flex-Zeile
	   standen die vier Kennzahlen nach Textbreite verteilt, "Kraut und Rueben". */
	.trust-inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.25rem 1rem;
		justify-items: center;
	}

	.trust-sep {
		display: none;
	}

	/* Supplement-Wissen responsive */
	.sw-grid {
		grid-template-columns: 1fr;
	}

	/* Category hero responsive */
	

	

	

	

	

	/* ── Ranking cards responsive (mobile-first, left-aligned) ── */

	/* Base rank-card: 4-col → stacked */
	.rank-card__inner {
		grid-template-columns: 1fr;
	}

	/* Testsieger: Name → Bild (50%) → Text → Button → Score */
	.rank-card--top .rank-card__inner {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
	}

	.rank-card--top .rank-card__badge {
		grid-column: 1;
		grid-row: 1;
	}

	.rank-card--top .rank-card__content {
		grid-column: 1;
		grid-row: 2;
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.rank-card--top .rank-card__score-panel {
		grid-column: 1;
		grid-row: 3;
	}

	.rank-card--top .rank-card__img-col,
	.rank-card--top .rank-card__text-col,
	.rank-card--top .rank-card__text-body {
		display: contents;
	}

	.rank-card--top .rank-card__brand { order: 1; margin-bottom: 4px; }
	.rank-card--top .rank-card__name { order: 2; margin-bottom: 16px; }
	.rank-card--top .rank-card__img-wrap {
		order: 3;
		width: 50%;
		height: auto;
		flex: 0 0 auto;
		min-height: auto;
		margin-bottom: 16px;
	}
	.rank-card--top .rank-card__verdict { order: 4; margin-bottom: 12px; margin-top: 0; }
	.rank-card--top .rank-card__tags { order: 5; margin-bottom: 10px; }
	.rank-card--top .rank-card__specs { order: 6; margin-bottom: 12px; }
	.rank-card--top .rank-card__price-tags { order: 7; margin-bottom: 10px; }
	.rank-card--top .rank-card__img-col .btn,
	.rank-card--top .rank-card__img-col .rank-card__self {
		order: 8;
		width: 100%;
		text-align: center;
		justify-content: center;
		box-sizing: border-box;
	}

	/* Gesamtsieger-Grid: 2-col → stacked */
	.rank-card__inner--rank {
		grid-template-columns: 1fr;
	}

	/* display:contents mit höherer Spezifität um Desktop-Flex-Regeln zu schlagen */
	.rank-card__inner--rank .rank-card__content--rank .rank-card__img-col,
	.rank-card__inner--rank .rank-card__content--rank .rank-card__text-body {
		display: contents;
	}
	.rank-card__inner--rank .rank-card__content--rank .rank-card__text-col {
		display: contents;
		justify-content: flex-start;
	}
	.rank-card__inner--rank .rank-card__content--rank .rank-card__shop-block {
		margin-top: 0;
	}

	/* Ranking cards (#2+): Rank → Name → Bild (50%) → Text → Button */
	.rank-card__content--rank {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.rank-card__content--rank .rank-card__img-col,
	.rank-card__content--rank .rank-card__text-col,
	.rank-card__content--rank .rank-card__text-body {
		display: contents;
	}

	.rank-card__content--rank .rank-card__rank { order: 1; margin-bottom: 8px; text-align: left; font-size: 0.88rem; color: var(--ss-mocha-mid); /* Mocha-light <3:1 (T2) */ }
	.rank-card__content--rank .rank-card__cat-badge { order: 2; margin-bottom: 4px; align-self: flex-start; }
	/* Zwei Badges stehen hier als Flex-Kinder untereinander, nicht nebeneinander:
	   der Desktop-Abstand nach links wuerde den zweiten um 5 px einruecken. */
	.rank-card__content--rank .rank-card__cat-badge + .rank-card__cat-badge { margin-left: 0; }
	.rank-card__content--rank .rank-card__brand { order: 3; margin-bottom: 4px; }
	.rank-card__content--rank .rank-card__name,
	.guide-section .rank-card__content--rank .rank-card__name { order: 4; margin-bottom: 16px; }
	.rank-card__content--rank .rank-card__img-wrap {
		order: 5;
		width: 50%;
		height: auto;
		min-height: auto;
		flex: 0 0 auto;
		margin-bottom: 16px;
	}
	.rank-card__content--rank .rank-card__verdict { order: 6; margin-bottom: 12px; margin-top: 0; }
	.rank-card__content--rank .rank-card__tags { order: 7; margin-bottom: 10px; }
	.rank-card__content--rank .rank-card__specs { order: 8; margin-bottom: 12px; }
	.rank-card__content--rank .rank-card__price-tags { order: 9; margin-bottom: 10px; }
	.rank-card__content--rank .rank-card__shop-block { order: 9; margin-bottom: 10px; margin-top: 0; }
	.rank-card__content--rank .rank-card__shop-block .rank-card__price-tags { margin-bottom: 0; }
	.rank-card__content--rank .rank-card__img-col .btn,
	.rank-card__content--rank .rank-card__img-col .rank-card__self {
		order: 10;
		width: 100%;
		text-align: center;
		justify-content: center;
		box-sizing: border-box;
	}

	/* Score panel: horizontal bar below card */
	.rank-card__score-panel {
		border-left: none;
		border-top: 1px solid var(--ss-cream-dark);
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1rem;
		padding: 1.2rem 1.25rem;
		align-items: center;
	}

	.rank-card__score-divider {
		width: 1px;
		height: 2.5rem;
		margin: 0;
	}

	.rank-card__pills-v {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.4rem;
		flex: 1;
	}

	/* Price tags: full width stacked */
	.rank-card__price-tags {
		flex-direction: column;
	}

	.rank-card__price-tags .price-tag {
		width: 100%;
		justify-content: center;
	}

	/* Image columns */
	.rank-card__img-col {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.rank-card__img-wrap {
		width: 50%;
		height: auto;
		aspect-ratio: 1;
	}

	

	

	

	

	

	/* Section padding mobile */
	.categories,
	.testsieger,
	.ranking-preview,
	.articles,
	.supplement-wissen,
	.intro-block {
		padding: 3rem 0;
	}

	.intro-block__trust {
		grid-template-columns: 1fr;
	}
	.intro-block__stats {
		gap: 16px;
	}
}

/* --- Small phones --- */
@media (max-width: 480px) {
	.hero--cinematic {
		min-height: 280px;
	}

	.guide-breadcrumb {
		font-size: 0.72rem;
	}

	.hero-content {
		padding: 2.5rem 1.25rem 2rem;
		gap: 1.5rem;
	}

	.hero-title {
		font-size: 1.9rem;
	}

	.hero-sub {
		font-size: 1rem;
	}

	.hero-actions {
		flex-direction: column;
		gap: 0.6rem;
	}

	.hero-actions .btn {
		text-align: center;
		justify-content: center;
	}

	.hero-chips {
		justify-content: center;
	}

	.hero-chip {
		font-size: 0.72rem;
		padding: 0.3rem 0.7rem;
	}

	.hero-badge {
		font-size: 0.6rem;
		padding: 0.3rem 0.7rem;
		letter-spacing: 0.05em;
	}

	.hero-score-card {
		padding: 0.7rem 0.8rem;
		gap: 0.6rem;
	}

	.hsc-thumb {
		width: 36px;
		height: 36px;
	}

	.hsc-name {
		font-size: 0.85rem;
	}

	.hsc-meta {
		font-size: 0.7rem;
	}

	.score-num {
		font-size: 1.15rem;
	}

	.grade {
		width: 1.6rem;
		height: 1.6rem;
		font-size: 0.7rem;
	}

	/* Trust bar small phone */
	.trust-inner {
		padding: 1.25rem 1.25rem;
		gap: 1rem 0.8rem;
	}

	.trust-num {
		font-size: 1.3rem;
	}

	.trust-label {
		font-size: 0.7rem;
	}

	/* Category hero small phone */
	

	

	

	

	/* Section titles */
	.section-title {
		font-size: 1.8rem;
	}

	/* Section padding small phone */
	.categories,
	.testsieger,
	.ranking-preview,
	.articles,
	.supplement-wissen,
	.intro-block {
		padding: 2.5rem 0;
	}

	/* Ranking controls */
	.ranking-controls {
		padding: 0.8rem 1rem;
	}

	.ranking-btn {
		font-size: 0.72rem;
		padding: 0.3rem 0.6rem;
	}
}

/* ── Top-3 Embed ─────────────────────────────────────── */
.top3-embed {
	max-width: 1200px;
	margin: 3rem auto 2rem;
	padding: 0 2rem;
}
.guide-section__inner .top3-embed {
	max-width: none;
	margin: 2rem 0 0;
	padding: 0;
}
.top3-embed__title { font-family: var(--ss-font-serif); font-size: 2.5rem; font-weight: 400; color: var(--ss-mocha); letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 0.5rem; }
.top3-embed__intro { font-size: 1.1rem; color: var(--ss-mocha-mid); margin-bottom: 1.5rem; max-width: 540px; }
.top3-embed__intro a { color: var(--ss-green); text-decoration: underline; }
.top3-embed__grid { display: flex; flex-direction: column; gap: 1rem; }

/* ── FAQ Section ─────────────────────────────────────── */
.faq-section {
	max-width: 1200px;
	margin: 3rem auto 2rem;
	padding: 0 2rem;
}
.faq-section__title { font-family: var(--ss-font-serif); font-size: 2.5rem; font-weight: 400; color: var(--ss-mocha); letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 1.25rem; max-width: var(--ss-measure); }
.faq-section__list { display: flex; flex-direction: column; gap: 0; max-width: var(--ss-measure); }
.faq-item { border-bottom: 1px solid var(--ss-cream-dark); }
.faq-item__question {
    padding: 1rem 0; font-weight: 600; font-size: 1.125rem;
    color: var(--ss-mocha); cursor: pointer; list-style: none;
}
.faq-item__question::marker { display: none; }
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::before {
    content: '+'; display: inline-block; width: 1.5rem;
    font-weight: 700; color: var(--ss-green);
}
.faq-item[open] .faq-item__question::before { content: '\2212'; }
.faq-item__answer { padding: 0 0 1rem 1.5rem; color: var(--ss-mocha-mid); line-height: 1.7; font-size: 1rem; }
.faq-item__answer p { font-size: 1.0625rem; line-height: 1.7; color: var(--ss-mocha-mid); margin: 0 0 0.5rem; }

/* ── Breadcrumbs ─────────────────────────────────────── */
.ss-breadcrumbs { margin: 1rem 0 1.5rem; font-size: 0.8125rem; }
.ss-breadcrumbs__list {
    display: flex; flex-wrap: wrap; gap: 0.25rem;
    list-style: none; padding: 0; margin: 0;
}
.ss-breadcrumbs__item + .ss-breadcrumbs__item::before {
    content: '\203A'; margin-right: 0.25rem; color: var(--ss-mocha-light);
}
.ss-breadcrumbs__item a { color: var(--ss-green); text-decoration: none; }
.ss-breadcrumbs__item a:hover { text-decoration: underline; }
.ss-breadcrumbs__item span { color: var(--ss-mocha-mid); }

/* ── Back-to-Top ─────────────────────────────────────── */

.ss-to-top {
	position: fixed;
	bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
	right: 1.5rem;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	/* Mocha statt Gruen (Bjoern, 02.09.2026): in Gruen sah der Pfeil aus wie ein
	   weiterer "Zum Test"-Button. */
	background: var(--ss-mocha);
	color: var(--ss-pure-white);
	border: none;
	border-radius: var(--ss-radius-pill);
	box-shadow: var(--ss-shadow-lg);
	cursor: pointer;
	z-index: 900;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--ss-transition), transform var(--ss-transition), background var(--ss-transition);
}

.ss-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ss-to-top:hover {
	background: var(--ss-mocha-mid);
	transform: translateY(-2px);
}

.ss-to-top:focus-visible {
	/* Doppelring statt Mocha-Outline: der Button ist selbst Mocha und liegt als
	   fixed-Element auch ueber dem dunklen Footer — dort verschwand die alte
	   Outline (Befund Antigravity, Gate 4 am 02.09.2026). */
	/* transparent statt none: im Windows-Kontrastmodus faellt box-shadow weg,
	   die transparente Outline wird dort zur Systemfarbe (Antigravity, Runde 2). */
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px var(--ss-pure-white), 0 0 0 5px var(--ss-mocha);
}

.ss-to-top__icon {
	display: block;
}

/* Waehrend das Cookie-Consent-Banner offen ist (nur vor der Zustimmung, per JS an
   <body> angehaengt, z-index 9999), den Button ausblenden — er laege sonst dahinter. */
body:has(#ss-cc-banner.ss-cc-visible) .ss-to-top,
body:has(#ss-cc-banner.ss-cc-visible) .ss-stickybuy {
	display: none;
}

@media (max-width: 600px) {
	.ss-to-top {
		bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
		right: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ss-to-top {
		transition: opacity var(--ss-transition);
		transform: none;
	}
	.ss-to-top.is-visible,
	.ss-to-top:hover {
		transform: none;
	}
}

/* ── Cookie Consent ──────────────────────────────────── */

.ss-cc-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--ss-mocha);
	color: var(--ss-cream);
	padding: 1.25rem 0;
	z-index: 9999;
	display: none;
	box-shadow: 0 -4px 20px rgba(0,0,0,.15);
}

.ss-cc-banner.ss-cc-visible { display: block; }

.ss-cc-inner {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.ss-cc-text {
	flex: 1;
	font-size: 0.82rem;
	line-height: 1.6;
	color: rgba(232,226,217,.85);
	margin: 0;
}

.ss-cc-actions {
	display: flex;
	gap: 0.625rem;
	flex-shrink: 0;
}

.ss-cc-btn {
	padding: 0.55rem 1.1rem;
	border: none;
	border-radius: var(--ss-radius-pill);
	font: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	transition: opacity var(--ss-transition), background var(--ss-transition);
}

.ss-cc-btn:hover { opacity: 0.88; }

.ss-cc-btn--accept {
	background: var(--ss-green);
	color: var(--ss-pure-white);
}

.ss-cc-btn--settings {
	background: transparent;
	color: var(--ss-cream);
	border: 1px solid rgba(232,226,217,.35);
}

.ss-cc-btn--reject {
	background: transparent;
	color: var(--ss-cream);
	border: 1px solid rgba(232,226,217,.35);
}

/* Modal */
.ss-cc-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.55);
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.ss-cc-modal-overlay.ss-cc-visible { display: flex; }

.ss-cc-modal {
	background: var(--ss-pure-white);
	color: var(--ss-mocha);
	border-radius: var(--ss-radius-lg);
	max-width: 480px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	padding: 2rem;
	box-shadow: var(--ss-shadow-lg);
}

.ss-cc-modal-title {
	font-family: var(--ss-font-serif);
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--ss-mocha);
	margin: 0 0 0.5rem;
}

.ss-cc-modal-desc {
	font-size: 0.82rem;
	color: var(--ss-mocha-mid);
	margin: 0 0 1.25rem;
	line-height: 1.6;
}

.ss-cc-category {
	padding: 1rem 0;
	border-bottom: 1px solid var(--ss-cream-dark);
}

.ss-cc-category:last-of-type { border-bottom: none; }

.ss-cc-category-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.ss-cc-category-name {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--ss-mocha);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ss-cc-required {
	font-size: 0.68rem;
	font-weight: 600;
	background: var(--ss-green-light);
	color: var(--ss-green-dark);
	padding: 0.15rem 0.45rem;
	border-radius: 100px;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.ss-cc-category-desc {
	font-size: 0.78rem;
	color: var(--ss-mocha-mid);
	margin-top: 0.2rem;
	line-height: 1.5;
}

/* Toggle */
.ss-cc-toggle {
	position: relative;
	width: 44px;
	height: 24px;
	flex-shrink: 0;
}

.ss-cc-toggle input { opacity: 0; width: 0; height: 0; }

.ss-cc-slider {
	position: absolute;
	inset: 0;
	background: var(--ss-cream-dark);
	border-radius: 24px;
	cursor: pointer;
	transition: background var(--ss-transition);
}

.ss-cc-slider::before {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	left: 3px;
	bottom: 3px;
	background: var(--ss-pure-white);
	border-radius: 50%;
	transition: transform var(--ss-transition);
}

.ss-cc-toggle input:checked + .ss-cc-slider { background: var(--ss-green); }
.ss-cc-toggle input:checked + .ss-cc-slider::before { transform: translateX(20px); }
.ss-cc-toggle input:disabled + .ss-cc-slider { opacity: .5; cursor: not-allowed; }

/* Modal actions */
.ss-cc-modal-actions {
	margin-top: 1.5rem;
	display: flex;
	gap: 0.625rem;
	justify-content: flex-end;
}

.ss-cc-btn--save {
	background: var(--ss-green);
	color: var(--ss-pure-white);
}

@media (max-width: 600px) {
	.ss-cc-inner { flex-direction: column; align-items: flex-start; }
	.ss-cc-actions { width: 100%; flex-wrap: wrap; }
	.ss-cc-btn { flex: 1; text-align: center; }
}

/* Deal-Strip: gestapelt auf Mobile — Spezifität 0,2,0 schlägt Desktop 0,1,0.
   Der .rank-card-Vorfahre ist Teil der Regel: Wer den Strip ausserhalb einer
   Karte einsetzt, ergänzt hier seinen Kontext — sonst bleibt die Zeile
   einzeilig, der Text umbricht zeichenweise und die Zeile wächst auf 1.442 px
   (gemessen am Kaufband, 26.08.2026, auf 390 px Breite). */
@media (max-width: 700px) {
	.rank-card .rank-card__deal {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.4rem;
		padding: 0.75rem 1rem;
		overflow: hidden;
		box-sizing: border-box;
		width: 100%;
	}
	.rank-card__deal .rank-card__deal-header {
		display: flex;
		align-items: flex-start;
		gap: 0.4rem;
		width: 100%;
		min-width: 0;
	}
	.rank-card__deal .rank-card__deal-badges {
		flex: 1 1 0;
		min-width: 0;
	}
	.rank-card__deal .rank-card__deal-badge {
		min-width: 0;
		white-space: normal !important;
		word-break: break-word;
		overflow-wrap: break-word;
	}
	.rank-card__deal .rank-card__deal-codes {
		align-self: flex-start;
	}
	.rank-card__deal .rank-card__deal-code {
		align-self: flex-start;
	}
	.rank-card__deal .rank-card__deal-hint {
		white-space: normal;
		word-break: break-word;
		margin-left: 0;
		text-align: left;
		width: 100%;
	}
}

/* ─── Editorial Image-Text Layouts ─────────────────────────── */


/* ─── Section Hero Banner (full-width image strip) ──────────── */


/* ─── Highlight Number Grid ────────────────────────────────── */


/* ─── CTA Box font-size fix ────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
   Guide Components — Editorial Layer (v1.1)
   Fixed: hero left-align, answer as trust-strip, contrast,
   product-rec as rank-card, icons, section alternation.
   ═══════════════════════════════════════════════════════════════ */

/* ── Guide Section Wrapper ──────────────────────────────────── */

.guide-section {
	padding: 4.5rem 0;
	background: var(--ss-pure-white);
}

.guide-section--alt {
	background: var(--ss-cream);
}


.guide-section__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

/* Equal top/bottom spacing: strip trailing margin from last child */
.guide-section__inner > *:last-child {
	margin-bottom: 0;
}

.guide-section h2 {
	font-family: var(--ss-font-serif);
	font-size: 2.5rem;
	font-weight: 400;
	color: var(--ss-mocha);
	margin: 0 0 0.6rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
}


.guide-section h3 {
	font-family: var(--ss-font-serif);
	font-size: 1.375rem; /* 22px Serif — klare Trennung zu Poppins-Body/-Fettung (v2.45) */
	font-weight: 400;
	color: var(--ss-mocha);
	margin: 2.2rem 0 0.6rem;
}


/* Korsett-Pflicht: H4 kleiner als H3 (sonst theme.json-Default 1.4rem > H3). */
.guide-section h4 {
	font-family: var(--ss-font-sans);
	font-size: 1.125rem; /* 18px — Stufe unter h3, ueber Body */
	font-weight: 600;
	color: var(--ss-mocha);
	margin: 1.5rem 0 0.5rem;
}


.guide-section p {
	font-size: 1.0625rem; /* 17px — Zeile bei 960px-Spalte ~90 Zeichen */
	line-height: 1.7;
	color: var(--ss-mocha-mid);
	margin-bottom: 1.25rem;
}

/* ── Measure: EINE Textspalte, unabhaengig von der Verschachtelung ──────
   Kanon seit 27.07.2026 (loest die alte Kind-Kombinator-Regel ab).

   VORHER: Measure galt nur fuer DIREKTE Kinder von __inner. Damit lief jeder
   Fliesstext, der in einem Wrapper steckt, ungebremst auf 1200px — allen voran
   `.review-editorial` (der redaktionelle Haupttext JEDER Produkt-Review und
   jedes Hersteller-Profils) mit gemessen 109-138 Zeichen pro Zeile.

   JETZT: Alles Textartige in einer guide-section laeuft auf --ss-measure,
   egal wie tief es liegt. Nur die bewusst breiten Komponenten brechen aus —
   und die sind unten EXPLIZIT gelistet, nicht implizit ueber die Schachteltiefe.
   Neue Komponenten erben damit automatisch die Textspalte. */
/* Basis — direkte Kinder. Bewusst ohne :is()/:not(), damit die Textspalte
   auch dort steht, wo Selectors-4 nicht unterstuetzt wird. */
.guide-section__inner > p,
.guide-section__inner > h2,
.guide-section__inner > h3,
.guide-section__inner > h4,
.guide-section__inner > ul,
.guide-section__inner > ol {
	max-width: var(--ss-measure);
}

/* Kanon v2.46 — dieselbe Textspalte in JEDER Schachteltiefe. Ausgenommen ist
   nur, was in einer bewusst breiten Komponente steckt; diese Komponenten
   behalten damit ihre EIGENEN Breiten (kein `max-width: none`, das sonst die
   schmaleren Komponenten-Regeln ueberschreiben wuerde — z.B. top3-embed__intro
   mit 540px). Wer eine Komponente ergaenzt, traegt sie hier UND in
   STYLEGUIDE.md §1 (Measure) nach. */
.guide-section__inner :is(p, ul, ol, h2, h3, h4, blockquote, dl):not(:is(
	.guide-table, .guide-table__wrap, .guide-table__outer,
	.guide-media, .guide-numbers, .guide-cards,
	.rank-card, .testsieger-card, .vitamind-testsieger-card,
	.guide-product-rec, .review-verdict,
	.hersteller-infobox, .coupon-box, .ranking-controls, .top3-embed,
	.author-box, .ss-contact-form
) *) {
	max-width: var(--ss-measure);
}

/* Textfuehrende Boxen fluchten mit der Textspalte (Measure + Innenabstand),
   genau wie die Callouts. Sonst steht ein 1200px-Kasten neben 960px Text. */
.guide-toc,
.guide-sources {
	max-width: calc(var(--ss-measure) + 4rem);
}


.guide-section p strong {
	color: var(--ss-mocha);
}


/* .ranking-subcats__pill ausgenommen (T2, 03.09.2026): die Pille hat eigene
   Farbe (Mocha) und kein Underline, wurde hier aber auf Gruen 4,35:1 gezogen. */
.guide-section a:not(.btn):not(.price-tag):not(.rank-card__tag):not(.guide-toc__link):not(.rank-card__deal-code):not(.rp-all):not(.cat-btn):not(.cat-sublink):not(.article-card):not(.ranking-subcats__pill) {
	color: var(--ss-green);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.guide-section a:not(.btn):not(.price-tag):not(.rank-card__tag):not(.guide-toc__link):not(.rank-card__deal-code):not(.cat-btn):not(.cat-sublink):not(.article-card):not(.ranking-subcats__pill):hover {
	color: var(--ss-green-dark);
}

.guide-section--legal a:not(.btn):not(.price-tag):not(.rank-card__tag):not(.guide-toc__link):not(.legal-links__primary) {
	color: rgba(255, 255, 255, 0.95);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.guide-section--legal a:not(.btn):not(.price-tag):not(.rank-card__tag):not(.guide-toc__link):not(.legal-links__primary):hover {
	color: var(--ss-pure-white);
	text-decoration-color: var(--ss-pure-white);
}

/* Buttons inside guide-section: protect from link override */
.guide-section .btn {
	text-decoration: none;
}

.guide-section .btn-primary {
	color: var(--ss-white);
}

.guide-section .btn-ghost--hero {
	color: var(--ss-cream);
}

.guide-cta .btn-ghost--hero:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(240, 235, 227, 0.6);
	color: var(--ss-white);
}

/* Lists */
.guide-section ul,
.guide-section ol {
	padding-left: 0;
	margin: 0 0 1.5rem;
	list-style: none;
}

.guide-section ul li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.6rem;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ss-mocha-mid);
}

.guide-section ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ss-green);
}

/* ── Guide Hero (left-aligned like homepage) ────────────────── */

.hero--guide .hero-content {
	grid-template-columns: 1fr;
	padding: 5rem 2rem 4rem;
}

.hero--guide .hero-inner {
	max-width: 760px;
}

.hero--guide .hero-sub {
	max-width: 620px;
}

/* Breadcrumb inside hero */
.hero--guide .guide-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25rem 0.4rem;
	font-size: 0.78rem;
	color: rgba(255,255,255,0.6);
	margin-bottom: 1rem;
}

.hero--guide .guide-breadcrumb a {
	color: rgba(255,255,255,0.6);
	text-decoration: none;
}

.hero--guide .guide-breadcrumb a:hover {
	color: var(--ss-white);
}

.hero--guide .guide-breadcrumb span:last-child {
	color: var(--ss-white);
}

/* Hersteller-Hero-Logo: weisser Chip, damit jedes Marken-Logo (auch dunkle) auf dem dunklen Hero sichtbar ist */
.hersteller-hero-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: max-content;
	max-width: 100%;
	background: #fff;
	border-radius: 14px;
	padding: 0.8rem 1.1rem;
	margin: 0.25rem 0 1.5rem;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

.hersteller-hero-logo img {
	/* Feste Hoehe statt max-height: ein SVG ohne width/height-Attribute (nur viewBox,
	   z. B. norsan-logo.svg) rendert Chrome in einem Flex-Kasten mit width/height:auto
	   als 0x0 - uebrig blieb die leere weisse Box (Bjoern 07.09.2026). Bei gekappter
	   Breite haelt object-fit das Seitenverhaeltnis. */
	display: block;
	height: 46px;
	width: auto;
	max-width: 210px;
	object-fit: contain;
}

/* ── Review Hero (two-column, product image right) ────────── */

.hero--review .guide-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25rem 0.4rem;
	font-size: 0.78rem;
	color: rgba(255,255,255,0.6);
	margin-bottom: 1rem;
}
.hero--review .guide-breadcrumb a {
	color: rgba(255,255,255,0.6);
	text-decoration: none;
}
.hero--review .guide-breadcrumb a:hover {
	color: var(--ss-white);
}
.hero--review .guide-breadcrumb span:last-child {
	color: var(--ss-white);
}

.review-hero__brand {
	font-size: 0.82rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ss-green-light);
	display: block;
	margin-bottom: 0.25rem;
}

.hero--review .guide-stats {
	justify-content: flex-start;
}

/* Kauf-CTA im ersten Bildschirm (25.08.2026).
   Die Transparenzwerte folgen bewusst .guide-stat__label und .guide-stats —
   ueber dem Hero-Bild liegt kein Token-Hintergrund, an dem sich ein Token-Wert
   messen liesse. Eine neue Konvention hier waere die dritte im selben Block. */
/* ── Hero-Kaufkarte unter dem Produktbild ──────────────────────────
   Variante "C" aus der Runde vom 26.08.2026. Vorher stand hier ein einzelner
   gruener Knopf links unter den Kennzahlen, frei auf der Bildflaeche — von
   Bjoern als No-Go verworfen.

   Ohne eigene Flaeche (Bjoerns Wahl vom 26.08.2026, "Variante B"). Der Entwurf
   trug zuerst eine getoente Glasflaeche, und der Kommentar behauptete, sie sei
   fuer die Lesbarkeit noetig. Nachgemessen stimmt das nicht: Auf der Flaeche
   unter dem Produktbild erreicht der Hero-Text gegen beide Hintergrundbilder
   im Mittel 16,5:1 (algae) bzw. 12,2:1 (ocean); unter das WCAG-Minimum von
   4,5:1 faellt er auf 0,0 % bzw. 0,6 % der Flaeche — einzelne Lichtreflexe im
   Wasser. Der Rahmen war Gestaltung, keine Zugaenglichkeitsfrage.

   Wer ihn zurueckholt, gibt .review-hero__kauf wieder background, border,
   border-radius, backdrop-filter und padding — und nimmt dann width:100%
   zurueck auf min(), sonst sitzt der Rahmen auf der Bildkante. */
.review-hero__kauf {
	margin: var(--ss-space-md) 0 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	box-sizing: border-box;
}

/* Steht UNTER den Knoepfen (Bjoern, 26.08.2026). Bewusst nicht `-kopf`
   genannt: Ein Klassenname, der eine Position behauptet, wird beim naechsten
   Umbau zur Falschaussage. */
.review-hero__kauf-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.15rem 0.1rem 0;
}

/* Leer, wenn ein Produkt weder Code noch Preisband hat — dann darf die Zeile
   keinen Platz kosten. :empty greift, weil PHP in dem Fall wirklich nichts
   ausgibt (keine Leerzeichen: der Hero laeuft durch die Whitespace-Reduktion
   am Dateiende). */
.review-hero__kauf-meta:empty {
	display: none;
}

.review-hero__kauf-info {
	font-size: 0.8rem;
	color: rgba(240, 235, 227, 0.8);
}

.review-hero__kauf-info strong {
	color: var(--ss-green-light);
	font-weight: 600;
}

.review-hero__kauf-code {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 0.25rem 0.5rem;
	border-radius: var(--ss-radius-sm);
	background: rgba(196, 146, 59, 0.22);
	border: 1px solid rgba(196, 146, 59, 0.5);
	color: #E8C98A;
	white-space: nowrap;
}

/* Hoehe NUR ueber min-height. Mit zusaetzlichem senkrechtem Innenabstand kam der
   Knopf im Entwurf auf 72 px — genau die Wuchtigkeit, die am alten Hero-Button
   beanstandet wurde. 48 px ist die Touch-Empfehlung und zugleich die Obergrenze. */
.review-hero__kauf-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	box-sizing: border-box;
	padding: 0 1.2rem;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--ss-radius);
	background: var(--ss-green);
	border: 1px solid var(--ss-green);
	color: #fff;
	transition: background var(--ss-transition), border-color var(--ss-transition);
}

.review-hero__kauf-cta:hover,
.review-hero__kauf-cta:focus-visible {
	background: var(--ss-green-dark);
	border-color: var(--ss-green-dark);
	color: #fff;
}

/* Der zweite Weg ist bewusst leiser: Wo ein Hersteller-Shop existiert, traegt er
   die bessere Marge. Amazon bleibt sichtbar, konkurriert aber nicht. */
.review-hero__kauf-cta--zweit {
	min-height: 42px;
	height: 42px;
	font-size: 0.88rem;
	font-weight: 500;
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(240, 235, 227, 0.45);
	color: #F0EBE3;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.review-hero__kauf-cta--zweit:hover,
.review-hero__kauf-cta--zweit:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(240, 235, 227, 0.7);
	color: #fff;
}

/* Toter Knopf ohne Kaufziel (07.10.2026): gleiche Flaeche wie die Kaufkarte, aber
   erkennbar nicht klickbar. Kein Hover, kein Link, kein Umami-Ereignis. Der Text
   ist die Information ("Derzeit keine Bezugsquelle"), nicht die Farbe. */
.review-hero__kauf-cta--tot {
	background: rgba(255, 255, 255, 0.10);
	border: 1px dashed rgba(240, 235, 227, 0.55);
	color: #F0EBE3;
	cursor: default;
	font-weight: 500;
	text-align: center;
}

@media (max-width: 60em) {
	.review-hero__kauf {
		width: min(320px, 100%);
	}
}

/* ── Sticky-Kaufleiste (alle Seiten mit Kategoriebezug, alle Breiten) ──
   Band am unteren Rand, kein Overlay: es verdeckt keinen Inhalt und faellt
   damit nicht unter Googles Abstrafung mobiler Interstitials. Sichtbarkeit
   steuert assets/js/sticky-buy.js zwischen Hero-CTA und Preis-Sektion. */
.ss-stickybuy {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 890;                       /* unter .ss-to-top (900), ueber dem Text */
	/* Heller Grund nach Plattform-Konvention (iOS Tab Bar, Material 3 Bottom
	   Navigation): helle Flaeche, EIN Akzent — und der Akzent ist der
	   Kauf-Knopf. Deshalb traegt die Oberkante ein neutrales Cremegrau und
	   keinen Markenton; ein zweiter Akzent wuerde den Knopf schwaechen.

	   Eine dunkle Fassung war am 26.08.2026 gebaut und wieder verworfen: Sie
	   sticht staerker hervor, loest bei einer fixierten Fussleiste auf heller
	   redaktioneller Seite aber den Werbebanner-Filter des Lesers aus
	   (Banner Blindness, NN/g — Einwand von Codex und Antigravity). Bjoerns
	   Abwaegung: lieber ein uebersehener Klick als eine Leiste, die reflexhaft
	   weggeklickt wird.

	   Reines Weiss, NICHT --ss-white: Das ist exakt die Hintergrundfarbe der
	   Seite; damit stand die Leiste farblich gar nicht ab. Die Trennung leisten
	   Kante und Schatten — zwischen Weiss und Seitengrund liegen nur 1,12:1. */
	background: var(--ss-pure-white);
	border-top: 2px solid var(--ss-cream-dark);
	box-shadow: 0 -8px 24px rgba(61, 46, 36, 0.16);
	padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
	/* Ruhezustand im CSS statt per hidden-Attribut: display:none schneidet die
	   Transition beim Ausblenden ab (Befund Gemini, Gate 4 vom 25.08.2026).
	   visibility haelt die Leiste zugleich aus dem Screenreader-Baum heraus und
	   folgt damit dem Muster von .ss-to-top. */
	visibility: hidden;
	transform: translateY(100%);
	transition: transform var(--ss-transition), visibility var(--ss-transition);
}

.ss-stickybuy.is-visible {
	visibility: visible;
	transform: translateY(0);
}

.ss-stickybuy__inner {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	max-width: 52rem;
	margin: 0 auto;
}

/* ⚠ DIE Regel dieser Leiste: Bild, Code, Knopf und X sind EXAKT gleich hoch.
   Bjoern am 26.08.2026: "Worauf ich ganz grossen Wert lege, ist, dass die
   Buttons immer die gleiche Groesse besitzen (also zumindest in der Hoehe).
   Ich hasse es, wenn etwas unsymmetrisch ist."

   Die Vorfassung hatte drei Hoehen nebeneinander (Chips 32, Knopf 44, X 44).
   44 px kommt vom Touch-Minimum des Knopfes — wer eine Hoehe aendert, aendert
   alle vier hier gemeinsam. box-sizing ist noetig, weil Code und Knopf einen
   Rand tragen: ohne border-box werden sie 46 px. */
.ss-stickybuy__bild,
.ss-stickybuy__code,
.ss-stickybuy__cta,
.ss-stickybuy__close {
	height: 44px;
	box-sizing: border-box;
	border-radius: var(--ss-radius);
	flex: 0 0 auto;
}

.ss-stickybuy__bild {
	width: 44px;
	object-fit: contain;
	background: var(--ss-pure-white);
	border: 1px solid var(--ss-cream-dark);
	padding: 2px;
}

.ss-stickybuy__text {
	flex: 1 1 auto;
	min-width: 0;                       /* sonst schiebt langer Text den Knopf raus */
	display: flex;
	flex-direction: column;
	gap: 0.05rem;
	overflow: hidden;
	padding-inline: 0.35rem;
}

/* Hersteller und Note auf der eigenen Seite, Deal-Text auf fremden — welche
   der beiden Zeilen erscheint, entscheidet PHP. */
.ss-stickybuy__meta {
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* Nicht --ss-mocha-light, obwohl das der urspruengliche Wert war: Auf Weiss
	   erreicht er nur 2,80:1 und verfehlt die 4,5:1 deutlich — ein Verstoss, der
	   von Anfang an drin war und nie gerechnet wurde. */
	color: var(--ss-mocha-mid);
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ss-stickybuy__name {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--ss-mocha);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ss-stickybuy__code,
.ss-stickybuy__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	white-space: nowrap;
	font-weight: 600;
}

/* Beschriftung vor dem Chip, wie im Hero. Auf schmalen Geraeten faellt sie weg
   — dort teilen sich Chip und Knopf die untere Zeile, und das Label haette
   beide auf unbrauchbare Breiten gedrueckt. */
.ss-stickybuy__codelabel {
	flex: 0 0 auto;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ss-mocha);
	white-space: nowrap;
}

.ss-stickybuy__code {
	padding: 0 0.7rem;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	/* Weisse Schrift auf --ss-amber — identisch zum Code-Chip der Ranking-Karte
	   und zum Eckband.

	   ⚠ Bekannt und bewusst in Kauf genommen: Weiss auf #C4923B erreicht nur
	   2,79:1 und verfehlt die 4,5:1 aus WCAG 1.4.3. Ein dunklerer Goldton mit
	   5,02:1 wurde am 26.08.2026 gebaut, an der echten Ranking-Karte
	   gegenuebergestellt und von Bjoern verworfen: Der helle Ton gefaellt ihm
	   besser, besonders auf dem dunkelgruenen Grund des Eckbands. Die
	   Entscheidung ist getroffen — nicht erneut vorlegen. Wer den Ton doch
	   aendern will, aendert ihn an ALLEN drei Stellen zugleich (Eckband,
	   Karten-Chip, Leisten-Chip), sonst stehen zwei Goldtoene nebeneinander.

	   Vollton statt der frueheren 12-%-Flaeche bleibt: Die Transparenz versagte
	   auf hellem wie dunklem Grund (Flaeche 1,11:1 zum Grund — als Bedienelement
	   nicht erkennbar, Text darauf 3,43:1). */
	color: var(--ss-pure-white);
	background: var(--ss-amber);
	border: 1px solid var(--ss-amber);
}

.ss-stickybuy__code:hover,
.ss-stickybuy__code:focus-visible {
	background: var(--ss-amber-dark);
	border-color: var(--ss-amber-dark);
	color: var(--ss-pure-white);
}

.ss-stickybuy__cta {
	padding: 0 1.15rem;
	font-size: 0.88rem;
	background: var(--ss-green);
	/* Auf Weiss traegt die Knopfflaeche selbst: 4,86:1 gegen den Grund, damit
	   ueber der 3:1 aus WCAG 1.4.11. Eine Hilfskante wie auf dunklem Grund
	   braucht es hier nicht. */
	border: 1px solid var(--ss-green);
	color: #fff;
	transition: background var(--ss-transition);
}

.ss-stickybuy__cta:hover,
.ss-stickybuy__cta:focus-visible {
	background: var(--ss-green-dark);
	color: #fff;
}

.ss-stickybuy__close {
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: none;
	/* Nicht --ss-mocha-light: 2,80:1 auf Weiss. */
	color: var(--ss-mocha-mid);
	cursor: pointer;
}

.ss-stickybuy__close:hover {
	color: var(--ss-mocha);
}

/* Tastaturfokus war nur ueber :hover abgedeckt, also fuer Tastaturnutzer gar
   nicht (Befund Codex). */
.ss-stickybuy__close:focus-visible {
	color: var(--ss-mocha);
	outline: 2px solid var(--ss-green);
	outline-offset: -3px;
}

/* Mobil zwei Zeilen: oben Bild und Text, unten Code und Kauf-Knopf
   NEBENEINANDER (Bjoern, 26.08.2026). Ohne die Breitenvorgabe am Textblock
   passt der Code-Chip noch neben den Text und der Knopf steht allein unten —
   genau die Aufteilung, die nicht gewollt ist (gemessen am Entwurf). */
@media (max-width: 40em) {
	.ss-stickybuy__inner {
		flex-wrap: wrap;
		row-gap: 0.45rem;
	}
	.ss-stickybuy__text {
		flex: 1 1 60%;
	}
	.ss-stickybuy__cta {
		flex: 1 1 auto;
		order: 3;
	}
	.ss-stickybuy__codelabel {
		display: none;
	}
	/* Das X wandert in die obere Zeile. Unten haette es sich die Zeile mit Code
	   und Knopf geteilt — auf 320 px (iPhone SE) passten die drei nicht mehr
	   nebeneinander, die Leiste wuchs auf eine dritte Zeile und 166 px
	   (Befund Antigravity, am gerenderten Stand nachgemessen). Oben rechts ist
	   ohnehin der gewohnte Ort zum Schliessen. */
	.ss-stickybuy__close {
		order: 1;
	}
	.ss-stickybuy__code {
		order: 2;
	}
}

/* Der Back-to-Top-Button sitzt unten rechts und laege sonst hinter der Leiste.
   Die Hoehe kommt aus sticky-buy.js (--ss-stickybuy-h, gemessen per
   offsetHeight, schon inklusive safe-area-Polster). Ein fester Wert von 5rem
   reichte nur fuer die einzeilige Desktop-Leiste; mobil ist sie zweizeilig,
   rund 116 px, und der Button sass genau auf dem Schliessen-Kreuz (Bjoern,
   02.09.2026). Der Fallback greift nur, wenn die Variable je fehlen sollte. */
body.has-stickybuy .ss-to-top {
	bottom: calc(var(--ss-stickybuy-h, 5rem) + 1rem);
}

/* Platz am Dokumentende, damit die Leiste die letzten Zeilen nicht ueberdeckt.
   Eine fixierte Leiste liegt ueber dem Inhalt — ohne diesen Ausgleich waeren am
   Seitenende rund 70 px verdeckt, darunter Links des Footers (Befund Codex,
   Gate 4 vom 25.08.2026; der Kommentar „kein Overlay" war insofern zu grosszuegig:
   die Leiste verdeckt keinen Inhalt MITTEN im Lesefluss, wohl aber am Ende).

   Bewusst dauerhaft statt an .has-stickybuy gehaengt: an die Klasse gebunden
   entstuende bei jedem Ein- und Ausblenden ein Layout-Sprung. Der Selektor
   greift nur dort, wo die Leiste ueberhaupt im Markup steht — PHP gibt sie nur
   auf Produktseiten mit Kauf-Ziel aus. */
/* :not([hidden]) ist wesentlich: Bricht das Skript ab, weil kein Anker existiert,
   bleibt das Attribut stehen und die Leiste erscheint nie. Ohne diesen Zusatz
   stuenden am Seitenende trotzdem 4,5 rem Leerraum, fuer den es keinen sichtbaren
   Grund gaebe (Befund Gemini, Gate 4 Runde 2). */
body:has(.ss-stickybuy:not([hidden])) {
	/* 6 rem statt 4,5: Die Leiste misst auf dem Desktop nominal bereits 72 px
	   (48 px Button plus zweimal 12 px Innenabstand plus Rahmen). Ein Ausgleich
	   von exakt 72 px waere auf den Pixel genau und bei abweichender Zeilenhoehe
	   sofort zu knapp (Befund Codex, 26.08.2026). */
	padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
}

/* Auf dem Desktop laeuft die Leiste seit dem 26.08.2026 ebenfalls.
   Die erste Fassung sperrte sie ab 48 em aus — „Kaufleiste unten wie bei mobilen
   Seiten" zu woertlich genommen. Folge: Bjoern arbeitet am Desktop und hat das
   Hauptmerkmal nie zu Gesicht bekommen („ich sehe auch keine Floating Bar, ich
   sehe gar nichts"). 45 % der Leser sitzen dort.

   Breiter Innenraum statt der 40 rem von Mobil: Auf 1280 px saehen ein kurzer
   Produktname und ein Button in der Bildschirmmitte verloren aus. Die Leiste
   folgt jetzt der Containerbreite der Seite. */
@media (min-width: 48em) {
	.ss-stickybuy {
		padding: 0.75rem 1.5rem;
	}

	.ss-stickybuy__inner {
		max-width: 1200px;
		gap: 1rem;
	}

	.ss-stickybuy__name {
		font-size: 0.95rem;
	}

	.ss-stickybuy__meta {
		font-size: 0.7rem;
	}

	/* Nur Beschriftung und Innenabstand — die Hoehe bleibt bei 44 px, sonst
	   steht der Knopf hoeher als Bild, Code und X. */
	.ss-stickybuy__cta {
		padding: 0 1.6rem;
		font-size: 0.9rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ss-stickybuy {
		transition: none;
	}
}

@media (max-width: 40em) {

	/* 13 px weniger Luft ueber den Kennzahlen. Bewusst auf .hero--review
	   begrenzt — .guide-stats traegt auch die Kategorie-Hubs.

	   Kein kleinerer `gap`: gemessen auf 375x812 passen die vier Kennzahlen
	   ohnehin nicht in eine Zeile (flex-wrap greift, Hoehe 147 px statt 83).
	   Ein engerer Abstand aendert daran nichts und ruecht die Kennzahlen nur
	   unnoetig zusammen.

	   Der Kauf-Button bleibt damit rund 60 px unter der Faltkante. Ihn ganz
	   hereinzuholen hiesse, Produktbild (230 px) und Kennzahlen umzubauen —
	   ein Hero-Redesign, das hier nicht ansteht. Diese Luecke schliesst
	   stattdessen die Sticky-Leiste. */
	.hero--review .guide-stats {
		margin-top: 1.25rem;
		padding-top: 1rem;
	}
}

/* Bildbox und Kaufblock teilen sich EINE Breite — sonst steht der Knopf
   schmaler als das Bild darueber (Bjoern, 26.08.2026: "Da ich immer alles
   symmetrisch haben moechte").

   306 px ist keine geratene Zahl, sondern die Breite, die die Bildbox ohnehin
   hat:  240 px Bild (.review-hero__img img max-width)
       + 2 x 32 px Innenabstand (padding 2rem)
       + 2 x 1 px Rand.
   Wer eine dieser drei Groessen aendert, rechnet hier nach.

   Warum eine feste Zahl und nicht width:fit-content am Container: fit-content
   folgt dem BREITESTEN Kind. Sobald der Kaufblock zwei Knoepfe nebeneinander
   traegt, ist er das — und streckt die Bildbox auf 495 px mit (gemessen
   26.08.2026). Die Klammer mit 100 % faengt schmale Geraete ab, auf denen
   306 px samt Seitenrand nicht mehr passen. */
.hero--review .hero-visual {
	--ss-kaufbreite: 306px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: min(var(--ss-kaufbreite), 100%);
	margin-inline: auto;
}

.hero--review .review-hero__img {
	width: 100%;
	box-sizing: border-box;
}

.review-hero__img {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--ss-radius-lg);
	padding: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.review-hero__img img {
	max-width: 240px;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.15));
}

.review-hero__grade {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: var(--ss-radius);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--ss-pure-white);
}

/* ── Guide Answer Strip (trust-bar style, full-width) ───────── */

.guide-answer-strip {
	background: var(--ss-cream);
}

/* ── Werbehinweis-Leiste (sitewide, über dem Header) ───────── */

.ss-topline {
	background: var(--ss-pure-white);
	border-bottom: 1px solid var(--ss-cream-dark);
}

.ss-topline__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0.4rem 2rem;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--ss-muted);
	text-align: left;
}

.ss-topline__inner a {
	color: var(--ss-green);
	text-decoration: underline;
}

@media (max-width: 600px) {
	.ss-topline__inner { padding: 0.35rem 1rem; font-size: 0.7rem; }
}

/* ══ Answer-Strip: Bauvertrag ══════════════════════════════════════════
   Der Streifen sitzt auf JEDEM Seitentyp direkt unter dem Hero und muss
   ueberall gleich proportioniert sein (Bjoern-Vorgabe 28.08.2026, Referenz
   ist der Omega-3-Hub: 145 px hoch, 25 px Luft ueber dem Label und unter
   der letzten Textzeile).

   ⚠ WER HIER ETWAS AENDERT, AENDERT NUR DIE VARIABLEN OBEN IM BLOCK.
   `display`, `grid-template-columns`, `align-items`, `padding` und
   `min-height` sind der Mechanismus — ein Seitentyp, der sie direkt
   anfasst, bricht die Einheitlichkeit. Genau das ist am 27./28.08.2026
   dreimal passiert:
     1. Ein Hersteller-Override setzte `align-items: flex-start` -> die Luft
        sammelte sich unten (0 px oben gegen 48 px unten statt 25/25).
     2. Ein Breakpoint stellte auf `flex-direction: column` um -> in Flex
        kippt die Querachse, `align-items: center` zentrierte plotzlich
        waagerecht, das Icon schwebte bei 282 px statt bei 0.
     3. Derselbe Breakpoint erbte den Innenabstand 0 -> ohne Zentrierung,
        die daraus Luft macht, klebten Icon und Text 2 px am Rand.

   Zwei Entscheidungen aus dem Gate-4-Review (Codex + Antigravity, 28.08.):

   GRID statt FLEX. Flex ist eindimensional: Wer die Richtung auf `column`
   dreht, kippt die Achse von `align-items` mit. Grid ist zweidimensional —
   `align-items` richtet dort IMMER auf der Blockachse aus, egal wie das
   Raster umgebaut wird. Bruch 2 waere damit unmoeglich gewesen.

   ECHTES PADDING statt Null-Trick. Vorher stand der senkrechte Innenabstand
   auf 0 und `align-items: center` machte daraus Luft. Das koppelte drei
   Eigenschaften, die in CSS ueblicherweise unabhaengig gesetzt werden —
   jede fremde Regel an einer davon brach die anderen zwei. Jetzt traegt das
   Padding den Abstand, die Zentrierung verteilt nur noch den Ueberschuss
   bis zur Mindesthoehe. Fasst jemand die Zentrierung an, wird es dadurch
   hoechstens unsymmetrisch, aber nie klebend.

   Kein `@layer`: Das Theme fuehrt keine Layer. Einen einzelnen einzufuehren
   wuerde die Komponente schwaecher machen, nicht staerker — ungelayerte
   Regeln schlagen gelayerte. Der Schutz liegt hier im Variablen-Vertrag.

   145 px traegt Label plus DREI Textzeilen (25 + 17 + 5,6 + 72 + 25). Wer
   den Wert aendert, rechnet das nach. Mobil faellt die Mindesthoehe weg:
   derselbe Text braucht dort bis zu doppelt so viele Zeilen. */
.guide-answer-strip__inner {
	/* ── einzige erlaubte Stellschrauben ── */
	--strip-pad-y: 1.5rem;      /* 24 px Grundabstand; bei 3 Zeilen hebt die
	                               Mindesthoehe ihn auf die Referenz 25 px an */
	--strip-pad-x: 2rem;
	--strip-min-height: 145px;  /* Label + 3 Textzeilen + 2x Luft */

	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	/* ⚠ `max-content`, NICHT `auto`: Ein auto-Track dehnt sich auf den freien
	   Platz, sobald ihn keine dritte Spalte nimmt. Auf allen Seiten OHNE CTA
	   wuchs die Icon-Spalte dadurch von 36 auf 156 px und der Text begann bei
	   208 statt bei 88 — 120 px weiter rechts als auf Herstellerprofilen.
	   Gemessen am 28.08.2026 nach dem Grid-Umbau; Gate 4 hatte es nicht
	   gesehen, die Layout-Messung schon. */
	grid-template-columns: max-content minmax(0, var(--ss-measure));
	gap: 1.25rem;
	align-items: center;
	padding: var(--strip-pad-y) var(--strip-pad-x);
	min-height: var(--strip-min-height);
	box-sizing: border-box;
}

/* Dritte Spalte NUR wenn es einen CTA gibt (nur Herstellerprofile haben einen).
   Stuende der `auto`-Track fest im Raster, bliebe er auf allen anderen Seiten
   als leere Spalte samt zweitem Gap stehen und veraenderte die waagerechte
   Verteilung gegenueber Seiten mit CTA (Befund Codex, Gate 4 am 28.08.2026). */
.guide-answer-strip__inner:has(> .guide-answer-strip__cta) {
	grid-template-columns: max-content minmax(0, var(--ss-measure)) auto;
}

/* Breakpoints stehen bewusst HIER bei der Komponente, nicht in einer
   Sammlung mobiler Overrides. In der Sammlung ist am 27.08. genau der
   Bereich 481–760 px durchgefallen: Die Spaltenumstellung stand im einen
   Block, der Innenabstand im anderen, und dazwischen klebte der Inhalt am
   Rand. Wer den Streifen aendert, findet ab jetzt alles an einer Stelle. */
@media (max-width: 760px) {
	.guide-answer-strip__inner {
		--strip-min-height: 0;
		/* Seitlicher Abstand runter: In der Spalte steht der Text ueber die
		   volle Breite, 2 rem je Seite sind auf einem 600-px-Schirm zu eng.
		   Der Wert stand bisher erst ab 480 px niedriger — dazwischen klemmte
		   der Text (Befund Antigravity, Gate 4 am 28.08.2026). */
		--strip-pad-x: 1.5rem;
		grid-template-columns: 1fr;
		justify-items: start;
	}
	.guide-answer-strip__cta { justify-self: start; }
}

@media (max-width: 480px) {
	.guide-answer-strip__inner {
		--strip-pad-y: 1.25rem;
		--strip-pad-x: 1.25rem;
	}
}

.guide-answer-strip__icon {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: var(--ss-green-light);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ss-green);
	flex-shrink: 0;
	margin-top: 0.1rem;
}

.guide-answer-strip__label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ss-green-dark); /* Gruen auf Cream bei 12 px war 3,78:1 (T2) */
	margin-bottom: 0.35rem;
}

.guide-answer-strip__text {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ss-mocha-mid);
}

.guide-answer-strip__text strong {
	color: var(--ss-mocha);
}

/* Die Textspalte von 960 px steckt jetzt in der Grid-Spalte
   (`minmax(0, var(--ss-measure))`) statt in einer eigenen max-width-Regel.
   Die alte Regel musste beide Markup-Varianten treffen — Produktseiten
   rendern ein `__body`, Kategorie- und Herstellerseiten ein div ohne Klasse.
   Das Raster braucht die Unterscheidung nicht mehr. */

/* ⚠ Nur Produktseiten rendern hier leere Absaetze — zwei Stueck, je 20 px
   Aussenabstand, zusammen 20 px Leerraum nach Rand-Kollaps. Sie stammen von
   wpautop(), dasselbe Muster wie frueher im Kaufband. Kategorie- und
   Herstellerseiten haben sie nicht; genau das war der Unterschied, den Bjoern
   am 26.08.2026 als „Balken bei den Reviews zu gross“ gesehen hat
   (141 px gegen 121 px ohne die Absaetze).

   Ausblenden statt an der Vorlage bekaempfen: wpautop laeuft nach dem Template
   und kann die Absaetze jederzeit neu erzeugen. */
.guide-answer-strip p:empty {
	display: none;
}

/* ⚠ Dieselbe Ursache eine Ebene hoeher, gemessen am 28.08.2026: Auf Bewertungen
   wickelt wpautop den Streifen zusaetzlich in leere <p> AUSSERHALB von
   .guide-answer-strip. Sie sind 0 px hoch, tragen aber je 20 px Aussenabstand —
   nach Rand-Kollaps klafft dadurch eine 20-px-Luecke zwischen Hero und Streifen,
   die Kategorie- und Herstellerseiten nicht haben (dort grenzt der Streifen mit
   0 px an den Hero).

   Die Regel darueber greift hier nicht: Sie ist auf Nachfahren des Streifens
   begrenzt, diese Absaetze sind seine Geschwister.

   Bewusst NICHT als `article > p:empty` — Codex und Antigravity haben das im
   Gate 4 am 28.08.2026 unabhaengig als zu breit beanstandet: Ein im Editor
   gesetzter Leerabsatz oder ein leeres <p>, das ein Plugin als DOM-Anker
   nutzt, waere sitewide mitverschwunden. Der Selektor bleibt deshalb an der
   Komponente. */
.guide-answer-strip + p:empty,
p:empty:has(+ .guide-answer-strip) {
	display: none;
}

.guide-answer-strip__body {
	flex: 1;
	min-width: 0;
}


.guide-answer-strip__cta {
	flex-shrink: 0;
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: var(--ss-green);
	color: var(--ss-pure-white);
	padding: 0.6rem 1.25rem;
	border-radius: var(--ss-radius-sm);
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s;
}
.guide-answer-strip__cta:hover {
	background: var(--ss-green-dark);
}

/* ── Guide Info Board (grey strip, matches answer-strip) ──── */

/* ── Guide Transparency Card ─────────────────────────── */
.guide-transparency {
	background: #f4f7f5;
	border: 1px solid #d4ddd7;
	border-left: 4px solid var(--ss-green);
	border-radius: var(--ss-radius-md);
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.75rem;
}

.guide-transparency__header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--ss-green);
	margin-bottom: 0.75rem;
	font-size: 0.92rem;
}

.guide-transparency__header strong {
	color: var(--ss-mocha);
}

.guide-transparency__body p {
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--ss-mocha-mid);
	margin: 0 0 0.75rem;
}

.guide-transparency__body ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.guide-transparency__body li {
	font-size: 0.85rem;
	line-height: 1.55;
	padding-left: 1.3rem;
	position: relative;
	color: var(--ss-mocha-mid);
}

.guide-transparency__body li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--ss-green);
	font-weight: 700;
	font-size: 0.8rem;
}

.guide-transparency__body li strong {
	color: var(--ss-mocha);
}

.guide-transparency__body a {
	color: var(--ss-green);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	border-bottom: none;
}

.guide-transparency__body a:hover {
	color: var(--ss-green-dark);
}

/* Stats strip — mirrors trust-bar values */
.guide-stats {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 2.5rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255,255,255,0.15);
}

.guide-stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: center;
}

.guide-stat__num {
	font-family: var(--ss-font-serif);
	font-size: 1.6rem;
	color: var(--ss-green-light);
	line-height: 1;
}

.guide-stat__label {
	font-size: 0.78rem;
	color: rgba(240, 235, 227, 0.6);
	margin-top: 0.3rem;
	font-weight: 500;
}

.guide-stat-sep {
	width: 1px;
	height: 2.5rem;
	background: rgba(255,255,255,0.15);
}

/* ── Guide TOC (Table of Contents) ─────────────────────────── */

.guide-toc {
	background: var(--ss-white);
	border-left: 4px solid var(--ss-green);
	border-radius: 0 var(--ss-radius-lg) var(--ss-radius-lg) 0;
	padding: 1.5rem 2rem;
	margin: 0 0 2.5rem;
}

.guide-toc__title {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ss-mocha);
	margin-bottom: 0.75rem;
}

.guide-toc__list {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: toc;
}

.guide-toc__list li {
	counter-increment: toc;
	padding: 0.3rem 0;
	font-size: 0.875rem;
	line-height: 1.5;
}

.guide-toc__list li::before {
	content: counter(toc) ".";
	display: inline-block;
	width: 1.5rem;
	font-weight: 600;
	color: var(--ss-green);
}

.guide-toc__link {
	color: var(--ss-mocha-mid);
	text-decoration: none;
	transition: color var(--ss-transition), padding-left var(--ss-transition);
}

.guide-toc__link:hover {
	color: var(--ss-green);
	padding-left: 4px;
}

/* .guide-toc-Praefix erhoeht Spezifitaet ueber '.guide-section ol' (margin:0 0 1.5rem) */
.guide-toc .guide-toc__sublist {
	list-style: none;
	padding: 0;
	/* Marker buendig unter dem Text des Hauptpunkts (Nummer = 1.5rem breit) */
	margin: 0.35rem 0 0 1.5rem;
}

.guide-toc__sublist li {
	counter-increment: none;
	padding: 0.25rem 0;
	font-size: 0.82rem;
	line-height: 1.5;
}

/* erster/letzter Subpunkt buendig: Abstand Sub->Punkt 5 = normaler Item-Abstand */
.guide-toc__sublist li:first-child {
	padding-top: 0;
}

.guide-toc__sublist li:last-child {
	padding-bottom: 0;
}

.guide-toc__sublist li::before {
	content: "\2192\00a0";
	display: inline-block;
	width: 1.3rem;
	font-weight: 400;
	color: var(--ss-mocha-light);
}

/* ── Guide Callout (tip / info / warning) ───────────────────── */

.guide-callout {
	background: var(--ss-pure-white);
	border-left: 4px solid var(--ss-green);
	border-radius: 0 var(--ss-radius-lg) var(--ss-radius-lg) 0;
	padding: 1.5rem 2rem;
	margin: 2rem 0;
	/* ganze Box auf Measure (+ Padding), fluchtet mit dem Textblock */
	max-width: calc(var(--ss-measure) + 4rem);
}

.guide-callout__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ss-mocha);
	margin-bottom: 0.4rem;
}

.guide-callout p {
	font-size: 0.9375rem; /* 15px — Boxentext eine Stufe unter 17px-Body */
	line-height: 1.6;
	color: var(--ss-mocha-mid);
	margin: 0;
}

.guide-callout--tip {
	border-left-color: var(--ss-grade-c);
	background: var(--ss-callout-tip-bg);
}

.guide-callout--warning {
	border-left-color: var(--ss-grade-d);
	background: var(--ss-callout-warning-bg);
}

/* ── Guide Numbers (highlight grid — white cards with shadow) ─ */

.guide-numbers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin: 1.5rem 0;
}

.guide-number {
	background: var(--ss-white);
	border: 1px solid var(--ss-cream-dark);
	border-radius: var(--ss-radius-lg);
	padding: 1.25rem 1.25rem;
	text-align: left;
	box-shadow: var(--ss-shadow-sm);
}

.guide-number__value {
	font-family: var(--ss-font-serif);
	font-size: 1.35rem;
	color: var(--ss-green);
	line-height: 1.15;
	margin-bottom: 0.3rem;
}

.guide-number__label {
	font-size: 0.78rem;
	color: var(--ss-mocha-mid);
	font-weight: 500;
	line-height: 1.4;
}

/* ── Guide Table ────────────────────────────────────────────── */

.guide-table__outer {
	position: relative;
	margin: 1.5rem 0;
}

.guide-table__outer::after {
	content: '← Wischen zum Scrollen →';
	display: none;
	font-size: 0.72rem;
	color: var(--ss-mocha-light);
	text-align: center;
	padding: 0.5rem 0 0;
}

.guide-table__wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--ss-radius-lg);
	border: 1px solid var(--ss-cream-dark);
	box-shadow: var(--ss-shadow-md);
	margin: 1.75rem 0;
}

.guide-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--ss-pure-white);
}

.guide-table thead tr {
	background: var(--ss-mocha);
	color: var(--ss-white);
}

.guide-table thead th {
	padding: 0.85rem 1rem;
	text-align: left;
	font-family: var(--ss-font-sans);
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 1px solid var(--ss-cream-dark);
}

.guide-table tbody tr:nth-child(even) {
	background: var(--ss-cream);
}

.guide-table tbody td {
	padding: 0.85rem 1rem;
	color: var(--ss-mocha-mid);
	border-bottom: 1px solid var(--ss-cream-dark);
	vertical-align: top;
	line-height: 1.5;
	font-size: 0.9375rem;
}

.guide-table tbody td:first-child {
	color: var(--ss-mocha);
	font-weight: 500;
}

.guide-table tbody tr:last-child td {
	border-bottom: none;
}

.guide-table__note {
	font-size: 0.82rem;
	color: var(--ss-mocha-mid); /* Mocha-light <3:1, wie T2; zweite Regel (0.82rem, margin-top 0.6rem) hier eingearbeitet */
	margin: 0.6rem 0 0;
	line-height: 1.5;
}

/* Table section heading — more prominent than default h3 */
.guide-table__heading {
	font-family: var(--ss-font-serif);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--ss-mocha);
	margin: 0 0 0.6rem;
	line-height: 1.25;
}

/* ── Guide Media (image + text, 2-col) ──────────────────────── */

.guide-media {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: start;
	margin: 2rem 0;
}

.guide-media--flip .guide-media__img {
	order: 2;
}

.guide-media--flip .guide-media__text {
	order: 1;
}

.guide-media__img {
	border-radius: var(--ss-radius-lg);
	overflow: hidden;
}

.guide-media__img img {
	width: 100%;
	height: auto;
	aspect-ratio: 16/10;
	object-fit: cover;
	display: block;
	border-radius: var(--ss-radius-lg);
}

.guide-media__caption {
	font-size: 0.78rem;
	color: var(--ss-mocha-mid);
	margin: 0.75rem 0 0;
	line-height: 1.5;
	background: var(--ss-white);
	border-left: 3px solid var(--ss-green);
	border-radius: 0 var(--ss-radius) var(--ss-radius) 0;
	padding: 0.6rem 0.75rem;
}

.guide-media__credit {
	display: inline;
	font-size: 0.7rem;
	color: var(--ss-mocha-light);
	font-style: italic;
}

.guide-media__credit a {
	color: var(--ss-mocha-light);
	text-decoration: underline;
}

.guide-media__text h3 {
	font-family: var(--ss-font-serif);
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--ss-mocha);
	margin: 0 0 0.75rem;
	line-height: 1.25;
}

/* Unter-Überschrift (H4) in Editorial-Slots: kleine, sans-serife Sub-Überschrift — nie größer als die H3 darüber */
.guide-media__text h4 {
	font-family: var(--ss-font-sans);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--ss-mocha);
	margin: 1.5rem 0 0.5rem;
	line-height: 1.35;
	letter-spacing: 0.01em;
}

.guide-media__text p {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ss-mocha-mid);
	margin: 0 0 1rem;
}

.guide-media__text p:last-child {
	margin-bottom: 0;
}

.guide-media__text ul {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
}
.guide-media__text li {
	position: relative;
	padding-left: 1.1rem;
	margin-bottom: 0.4rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--ss-mocha-mid);
}
.guide-media__text li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ss-green);
}
.guide-media__text li strong {
	color: var(--ss-mocha);
}

/* ── Guide Cards (3-col grid, cat-card style) ───────────────── */

.guide-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin: 1.5rem 0;
}

.guide-cards--2col {
	grid-template-columns: repeat(2, 1fr);
}

.guide-card {
	background: var(--ss-white);
	border: 1px solid var(--ss-cream-dark);
	border-radius: var(--ss-radius-lg);
	padding: 2rem;
	box-shadow: var(--ss-shadow-sm);
	transition: transform var(--ss-transition), box-shadow var(--ss-transition);
}

.guide-card:hover {
	box-shadow: var(--ss-shadow-md);
	transform: translateY(-2px);
}

.guide-card__icon {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: var(--ss-green-light);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ss-green);
	margin-bottom: 0.75rem;
}

.guide-card__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ss-mocha);
	margin-bottom: 0.4rem;
}

.guide-card p {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ss-mocha-mid);
	margin: 0;
}

/* ── Guide Criteria (vertical list with icons) ──────────────── */

.guide-criteria {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 1.5rem 0;
	/* Einzelspalten-Liste = Fliesstext-artig -> auf Measure (+ Card-Padding) */
	max-width: calc(var(--ss-measure) + 4rem);
}

.guide-criterion {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	background: var(--ss-pure-white);
	border: 1px solid var(--ss-cream-dark);
	border-radius: var(--ss-radius-lg);
	padding: 1.5rem 2rem;
	box-shadow: var(--ss-shadow-sm);
}

.guide-criterion__icon {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: var(--ss-green-light);
	color: var(--ss-green);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Nur der Titel-strong (direktes Kind) wird Block — strong IM Absatz bleibt inline */
.guide-criterion__body > strong {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ss-mocha);
	display: block;
	margin-bottom: 0.35rem;
}

.guide-criterion__body p {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ss-mocha-mid);
	margin: 0;
}

/* ── Fix: guide-section generic h3/p rules must not leak into rank-card components ── */
/* guide-section h3 = (0,1,1), these overrides = (0,2,0) → component styles win */

.guide-section .rank-card__name {
	font-family: var(--ss-font-serif);
	font-size: 1.25rem;
	font-weight: 400;
	margin: 0.125rem 0 0;
	color: var(--ss-mocha);
}

.guide-section .rank-card--top .rank-card__name {
	margin: 0 0 0.25rem;
}

.guide-section .rank-card__verdict {
	font-size: 0.875rem;
	line-height: 1.6;
	margin-top: 0.5rem;
	margin-bottom: 0;
}

.guide-section .rank-card--top .rank-card__verdict {
	margin-top: 0.2rem;
}

.guide-section .rank-card__brand {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ss-mocha-mid); /* Mocha-light <3:1 (T2) */
	margin: 0;
}

.guide-section .rank-card__spec {
	font-size: 0.8rem;
	color: var(--ss-mocha-mid);
	line-height: 1.4;
	margin-bottom: 0;
}

.guide-section .rank-card__spec strong {
	color: var(--ss-mocha);
}

/* ── Guide CTA Box ──────────────────────────────────────────── */

.guide-cta {
	background: var(--ss-mocha);
	border-radius: var(--ss-radius-lg);
	padding: 2rem;
	text-align: center;
	margin: 2rem 0;
}

.guide-cta__title {
	font-family: var(--ss-font-serif);
	font-size: 1.4rem;
	color: var(--ss-white);
	margin-bottom: 0.6rem;
}

.guide-cta p {
	font-size: 0.875rem;
	color: var(--ss-mocha-light);
	margin: 0 0 1.25rem;
}

.guide-cta__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

/* ── Guide Sources ──────────────────────────────────────────── */

.guide-sources {
	padding: 2rem;
	background: var(--ss-cream);
	border-radius: var(--ss-radius-lg);
	margin-top: 2rem;
}

.guide-sources h3 {
	font-family: var(--ss-font-sans);
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ss-mocha-mid);
	margin: 0 0 0.75rem;
}

.guide-sources ul li {
	font-size: 0.78rem;
	color: var(--ss-mocha-mid);
	line-height: 1.6;
}

.guide-sources ul li::before {
	width: 4px;
	height: 4px;
	background: var(--ss-mocha-light);
}

/* ── Guide Claim Note ───────────────────────────────────────── */

p.guide-claim-note {
	font-size: 0.78rem;
	color: var(--ss-mocha-light);
	line-height: 1.5;
	background: var(--ss-white);
	border-left: 3px solid var(--ss-cream-dark);
	border-radius: 0 var(--ss-radius) var(--ss-radius) 0;
	padding: 0.6rem 0.75rem;
	margin: 0.75rem 0 0;
}

/* ── Guide Responsive ───────────────────────────────────────── */

/* --- Tablet (900px) --- */
@media (max-width: 900px) {
	.hero--guide .hero-content { padding: 3rem 2rem 2.5rem; }
	.guide-section { padding: 3.5rem 0; }
	.guide-section h2 { font-size: 2rem; }
	.guide-cards { grid-template-columns: 1fr; }

	/* CTA box */
	.guide-cta__links { flex-direction: column; align-items: center; }
	.guide-cta__links .btn { width: 100%; text-align: center; justify-content: center; box-sizing: border-box; }

	/* Guide rank-card--top: Name → Bild → Text (Option A) */
	.guide-section .rank-card--top .rank-card__content {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.guide-section .rank-card--top .rank-card__img-col,
	.guide-section .rank-card--top .rank-card__text-col,
	.guide-section .rank-card--top .rank-card__text-body {
		display: contents;
	}

	.guide-section .rank-card--top .rank-card__brand { order: 1; margin-bottom: 4px; }
	.guide-section .rank-card--top .rank-card__name { order: 2; margin-bottom: 12px; }
	.guide-section .rank-card--top .rank-card__img-wrap {
		order: 3;
		width: 50%;
		height: auto;
		aspect-ratio: 1;
		flex: 0 0 auto;
		min-height: auto;
		margin-bottom: 12px;
	}
	.guide-section .rank-card--top .rank-card__verdict { order: 4; margin-bottom: 12px; }
	.guide-section .rank-card--top .rank-card__tags { order: 5; margin-bottom: 10px; }
	.guide-section .rank-card--top .rank-card__specs { order: 6; margin-bottom: 12px; }
	.guide-section .rank-card--top .rank-card__price-tags { order: 7; margin-bottom: 10px; }
	.guide-section .rank-card--top .rank-card__img-col .btn,
	.guide-section .rank-card--top .rank-card__img-col .rank-card__self {
		order: 8;
		width: 100%;
		text-align: center;
		justify-content: center;
		box-sizing: border-box;
	}
}

/* --- Large phone (760px) --- */
@media (max-width: 760px) {
	.guide-media { grid-template-columns: 1fr; gap: 1.5rem; }
	.guide-media--flip .guide-media__img,
	.guide-media--flip .guide-media__text { order: unset; }
	.guide-criterion { flex-direction: column; gap: 0.75rem; }
	.guide-stats { gap: 1.5rem; flex-wrap: wrap; }
	/* ⚠ `align-items` MUSS hier mit: In der Spalte dreht sich die Querachse,
	   das `center` der Basisregel zentriert dann nicht mehr senkrecht, sondern
	   waagerecht — das Icon schwebte dadurch in der Mitte ueber linksbuendigem
	   Text (gemessen 282 px statt 0 px bei 600 px Fensterbreite, auf allen
	   Seitentypen). Bestandsfehler, aufgefallen im Gate 4 am 28.08.2026
	   (Befund Antigravity). */

	/* rank-card (regular) — already flex-column from 900px, no overrides needed */
	.rank-card__content--rank .rank-card__img-col .btn,
	.rank-card__content--rank .rank-card__img-col .rank-card__self {
		width: 100%;
		box-sizing: border-box;
	}

	/* Section inner padding */
	.guide-section__inner { padding: 0 1.5rem; }

	/* TOC compact */
	.guide-toc { padding: 1.25rem 1.5rem; }
}

/* --- Phone (640px) --- */
@media (max-width: 640px) {
	/* Table: force horizontal scroll on mobile */
	.guide-table { min-width: 480px; }
	.guide-table thead th,
	.guide-table tbody td { padding: 0.6rem 0.75rem; font-size: 0.82rem; white-space: nowrap; }
	.guide-table__outer::after { display: block; }

	/* Guide text sizing */
	.guide-section h2 { font-size: 1.75rem; }
	.guide-section h3 { font-size: 1.2rem; } /* Serif, klar ueber 17px-Body (v2.45) */
	.guide-table__heading { font-size: 1.25rem; }

	/* rank-card mobile polish */
	.rank-card--top .rank-card__name { font-size: 1.1rem; }
	.rank-card--top .rank-card__score { font-size: 2.2rem; }

	.rank-card--top .rank-card__price-tags {
		flex-direction: column;
	}

	.rank-card--top .rank-card__price-tags .price-tag {
		width: 100%;
		justify-content: center;
	}

	/* Hero guide */
	.hero--guide .hero-content { padding: 2.5rem 1.5rem 2rem; }
	.hero--guide .hero-title { font-size: 1.8rem; }
	.hero--guide .hero-sub { font-size: 0.9rem; }

	/* Callout compact */
	.guide-callout { padding: 1.25rem 1.25rem; }
}

/* --- Small phone (560px) --- */
@media (max-width: 560px) {
	.guide-numbers { grid-template-columns: 1fr 1fr; }
	.guide-numbers .guide-number:last-child:nth-child(odd) { grid-column: span 2; }
}

/* --- Very small phone (480px) --- */
@media (max-width: 480px) {
	.guide-section { padding: 2.5rem 0; }
	.guide-section__inner { padding: 0 1.25rem; }
	.guide-section h2 { font-size: 1.5rem; }

	/* rank-card--top: tighter on small screens */
	.rank-card--top .rank-card__content {
		padding: 1rem;
	}

	.rank-card--top .rank-card__img-wrap {
		width: 50%;
		height: auto;
		flex: 0 0 auto;
		min-height: auto;
	}

	.rank-card--top .rank-card__img-col .btn,
	.rank-card--top .rank-card__img-col .rank-card__self {
		font-size: 0.82rem;
		padding: 0.6rem 1rem;
		width: 100%;
		box-sizing: border-box;
	}

	.rank-card--top .rank-card__score-panel {
		padding: 1rem;
		gap: 0.75rem;
	}

	.rank-card--top .rank-card__pills-v {
		flex-direction: column;
	}

	/* Guide numbers: single column */
	.guide-numbers { grid-template-columns: 1fr; }
	.guide-numbers .guide-number:last-child:nth-child(odd) { grid-column: auto; }

	/* Hero small phone */
	/* Hero left-aligned on small phones */
	.hero--guide .hero-content { padding: 2rem 1.25rem 1.5rem; }
	.hero--guide .hero-inner { text-align: left; }
	.hero--guide .hero-title { font-size: 1.5rem; }
	.hero--guide .hero-badge { margin-left: 0; margin-right: auto; }
	.guide-stats { gap: 1rem; justify-content: flex-start; }
	.guide-stat { align-items: flex-start; text-align: left; }
	.guide-stat-sep { display: none; }
	.guide-stat__num { font-size: 1.3rem; }
	.guide-stat__label { font-size: 0.7rem; }

	/* Answer strip + info board */
	.guide-answer-strip__text { font-size: 0.82rem; }

	/* TOC small */
	.guide-toc { padding: 1rem 1.25rem; }
	.guide-toc__list li { font-size: 0.82rem; }

	/* CTA */
	.guide-cta { padding: 1.5rem 1.25rem; }
	.guide-cta__title { font-size: 1.2rem; }

	/* Sources */
	.guide-sources { padding: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════
   PRODUKT-REVIEW-SEITEN
   ═══════════════════════════════════════════════════════════════ */

/* ── wpautop-Neutralisierung ────────────────────────────────── */
/* WordPress wpautop injiziert <p> und <br> in Shortcode-Output.
   display:contents macht <p> unsichtbar, display:none entfernt <br>. */

.hero--review p,
.rank-card--review p,
.review-verdict p,
.review-related p,
.guide-section .rank-card p:not(.rank-card__verdict),
.guide-section .guide-media > p,
.guide-media__img > p:not(.guide-media__caption),
.testsieger p:not(.section-sub):not(.rank-card__verdict),
.ranking-preview p:not(.rank-card__verdict),
.top3-embed p:not(.top3-embed__intro):not(.rank-card__verdict) { display: contents; }

/* wpautop erzeugt leere <p> zwischen Sektionen — body-bg scheint durch */
.review-page > p { display: none; }

.hero--review br,
.rank-card--review br,
.review-verdict br,
.review-related br,
.guide-section .rank-card br,
.guide-section .guide-media br,
.testsieger .rank-card br,
.ranking-preview .rank-card br,
.top3-embed .rank-card br { display: none; }

/* ── Review Header — rank-card--review overrides ───────────── */
/* Reuses rank-card--top; only h1 sizing + rabattcode added.   */

.rank-card--review .rank-card__name {
	font-size: 1.75rem;
}
/* ── Deal — Amber Strip + Corner Ribbon (Ranking Cards) ─────── */

/* Corner Ribbon: linke obere Ecke, 45° gedreht, über Bildecke */
.rank-card__ribbon {
	position: absolute;
	top: 20px;
	left: -34px;
	width: 130px;
	background: var(--ss-amber);
	color: var(--ss-pure-white);
	font-family: var(--ss-font-sans);
	font-size: 0.65rem;
	font-weight: 700;
	text-align: center;
	padding: 5px 0;
	transform: rotate(-45deg);
	letter-spacing: 0.04em;
	box-shadow: 0 2px 6px rgba(196, 146, 59, 0.4);
	z-index: 5;
	pointer-events: none;
	will-change: transform;
	backface-visibility: hidden;
}

@media (max-width: 900px) {
	.rank-card__ribbon {
		left: auto;
		right: -34px;
		transform: rotate(45deg);
	}
}

/* Shop-Block: struktureller Wrapper, kein visueller Trenner */
.rank-card__shop-block {
	margin-top: 0.75rem;
}

.rank-card__shop-block .rank-card__price-tags {
	margin-top: 0;
}

/* Amber Strip: volle Kartenbreite, unterhalb des Grids */
.rank-card__deal {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.55rem 1.25rem;
	background: var(--ss-amber-light);
	border-top: 1px solid var(--ss-amber-border);
	font-family: var(--ss-font-sans);
	font-size: 0.8rem;
}

.rank-card__deal-header {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	min-width: 0;
}

.rank-card__deal-icon {
	color: var(--ss-amber-dark);
	flex-shrink: 0;
}

.rank-card__deal-badges {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.rank-card__deal-badge {
	color: var(--ss-amber-dark);
	font-weight: 600;
	font-size: 0.78rem;
	white-space: nowrap;
}

.rank-card__deal-badge--bk {
	color: var(--ss-mocha);
	font-weight: 500;
}

.rank-card__deal-codes {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	flex-shrink: 0;
}


/* Code = Affiliate-Link direkt zum Hersteller */
.rank-card__deal-code,
.rank-card__deal-code:link,
.rank-card__deal-code:visited {
	display: inline-flex;
	align-items: center;
	background: var(--ss-amber);
	color: var(--ss-pure-white);
	padding: 4px 14px;
	border-radius: var(--ss-radius-sm);
	font-family: var(--ss-font-sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-decoration: none;
	white-space: nowrap;
	border: 0;
	outline: 0;
	box-shadow: none;
	background-clip: padding-box;
	cursor: pointer;
	transition: background 0.15s;
}

.rank-card__deal-code:hover,
.rank-card__deal-code:focus,
.rank-card__deal-code:focus-visible {
	background: var(--ss-amber-dark);
	color: var(--ss-pure-white);
	text-decoration: none;
	outline: none;
}

.rank-card__deal-hint {
	font-size: 0.73rem;
	font-style: italic;
	color: var(--ss-mocha-mid); /* Mocha-light 2,5:1 (T2) */
	margin-left: auto;
}

/* Prominent variant (review header) */
.rank-card__deal--prominent {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.375rem;
	margin-top: 0.75rem;
	padding: 0.625rem 0.875rem;
	background: var(--ss-green-light);
	border-radius: var(--ss-radius);
	border-left: 3px solid var(--ss-green);
}
.rank-card__deal--prominent .rank-card__deal-badge {
	font-size: 0.8rem;
	padding: 0;
	background: none;
	color: var(--ss-green-dark);
}
.rank-card__deal-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.rank-card__deal-copy {
	background: var(--ss-green);
	color: var(--ss-pure-white);
	border: 0;
	padding: 4px 12px;
	border-radius: var(--ss-radius-sm);
	font-size: 0.75rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
}
.rank-card__deal-copy:hover {
	background: var(--ss-green-dark);
}

/* ── Coupon Box (Produkt-Detailseite, Preise-Sektion) ──────── */

.coupon-box {
	background: var(--ss-green-light);
	border: 1px solid var(--ss-green);
	border-radius: var(--ss-radius);
	padding: 1rem 1.25rem;
	margin-top: 1rem;
}
.coupon-box__header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--ss-green-dark);
	margin-bottom: 0.625rem;
}
.coupon-box__title {
	font-weight: 700;
	font-size: 0.95rem;
}
.coupon-box__body {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.coupon-box__code {
	background: var(--ss-pure-white);
	color: var(--ss-green-dark);
	padding: 0.5rem 1rem;
	border: 2px dashed var(--ss-green);
	border-radius: var(--ss-radius-sm);
	font-weight: 700;
	font-size: 1.1rem;
	font-family: 'Courier New', monospace;
	letter-spacing: 0.05em;
}
.coupon-box__copy {
	background: var(--ss-green);
	color: var(--ss-pure-white);
	border: 0;
	padding: 0.5rem 1.25rem;
	border-radius: var(--ss-radius-sm);
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
}
.coupon-box__copy:hover {
	background: var(--ss-green-dark);
}
.coupon-box__copy:focus-visible {
	outline: 2px solid var(--ss-green);
	outline-offset: 2px;
}
.coupon-box__hint {
	font-size: 0.8rem;
	color: var(--ss-mocha-mid);
	margin-top: 0.5rem;
	margin-bottom: 0;
}
@media (max-width: 480px) {
	.coupon-box__body {
		flex-wrap: wrap;
	}
	.coupon-box__code {
		min-width: 0;
		word-break: break-all;
	}
	.coupon-box__copy {
		width: 100%;
		text-align: center;
	}
}

/* ── Review Verdict (Pros/Cons) ─────────────────────────────── */

.review-verdict {
	margin-top: 2.5rem;
}
.review-verdict__title {
	font-family: var(--ss-font-serif);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--ss-mocha);
	margin: 0 0 1.25rem 0;
}
.review-verdict__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}
.review-verdict__col {
	background: var(--ss-pure-white);
	border: 1px solid var(--ss-cream-dark);
	border-radius: var(--ss-radius);
	padding: 1.25rem 1.5rem;
}
.review-verdict__col--pro {
	border-top: 3px solid var(--ss-grade-a);
}
.review-verdict__col--con {
	border-top: 3px solid var(--ss-grade-d);
}
.review-verdict .review-verdict__subtitle {
	font-family: var(--ss-font-sans);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ss-mocha);
	margin: 0 0 0.75rem 0;
}
.review-verdict__col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.review-verdict__col ul li {
	font-size: 0.88rem;
	color: var(--ss-mocha);
	font-family: var(--ss-font-sans);
	line-height: 1.5;
	padding: 0.6rem 0 0.6rem 1.75rem;
	border-bottom: 1px solid var(--ss-cream);
	position: relative;
}
.review-verdict__col ul li:last-child {
	border-bottom: none;
}
.review-verdict__col ul li::before {
	position: absolute;
	left: 0;
	top: 0.6rem;
	width: 1.15rem;
	height: 1.15rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 0.65rem;
	font-weight: 700;
	line-height: 1;
}
.review-verdict__col--pro ul li::before {
	content: "✓";
	background: var(--ss-green-light);
	color: var(--ss-grade-a-deep); /* Palette 03.09.2026 (Gate 4, Codex) */
}
.review-verdict__col--con ul li::before {
	content: "✗";
	background: var(--ss-con-icon-bg);
	color: var(--ss-grade-d-deep); /* Palette 03.09.2026 (Gate 4, Codex) */
}

/* ── Review Content (post_content styling) ──────────────────── */


/* ── Review Related Products ────────────────────────────────── */

.review-related {
	margin-top: 3rem;
}
.review-related__title {
	font-family: var(--ss-font-serif);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--ss-mocha);
	margin: 0 0 1.25rem 0;
}
.review-related__grid {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.review-related__card {
	display: grid;
	grid-template-columns: 80px 1fr 60px;
	gap: 1rem;
	align-items: center;
	background: var(--ss-pure-white);
	border: 1px solid var(--ss-cream-dark);
	border-radius: var(--ss-radius);
	padding: 1rem 1.25rem;
	text-decoration: none;
	transition: box-shadow var(--ss-transition), border-color var(--ss-transition);
}
.review-related__card:hover {
	box-shadow: var(--ss-shadow-md);
	border-color: var(--ss-green-light);
}
.review-related__img {
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.review-related__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: var(--ss-radius-sm);
}
.review-related__info {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.review-related__brand {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ss-green);
	font-family: var(--ss-font-sans);
}
.review-related__name {
	font-family: var(--ss-font-sans);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--ss-mocha);
	margin: 0;
}
.review-related__desc {
	font-size: 0.8rem;
	color: var(--ss-mocha-light);
	line-height: 1.4;
	margin: 0;
	font-family: var(--ss-font-sans);
}
.review-related__score-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
}
.review-related__score {
	font-family: var(--ss-font-serif);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--ss-mocha);
	line-height: 1;
}
.review-related__grade {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--ss-radius-sm);
	font-family: var(--ss-font-sans);
	font-weight: 700;
	font-size: 0.72rem;
	color: var(--ss-pure-white);
}
.review-related__more {
	margin-top: 1.25rem;
	text-align: center;
}

/* ── Review Page Responsive ─────────────────────────────────── */

@media (max-width: 900px) {
	.hero--review .hero-content {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.hero--review .hero-visual {
		order: -1;
	}
	.review-hero__img {
		padding: 1.5rem;
	}
	.review-hero__img img {
		max-width: 180px;
	}
}

@media (max-width: 640px) {
	.hero--review .hero-title {
		font-size: 1.5rem;
	}
	.rank-card--review .rank-card__name {
		font-size: 1.35rem;
	}
	.review-verdict__cols {
		grid-template-columns: 1fr;
	}
	.review-related__card {
		grid-template-columns: 60px 1fr 50px;
		padding: 0.75rem 1rem;
	}
	.review-related__img {
		width: 60px;
		height: 60px;
	}
	.review-related__name {
		font-size: 0.88rem;
	}
	.review-related__desc {
		display: none;
	}
}

/* ── Review Editorial (post_content wrapper) ─────────────────── */

.review-editorial {
	font-family: var(--ss-font-sans);
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--ss-mocha-mid);
	margin-top: 1.5rem;
}
.review-editorial p {
	display: block !important;
	margin: 0 0 1.25rem;
}
.review-editorial h3 {
	font-family: var(--ss-font-serif);
	font-size: 1.35rem;
	font-weight: 400;
	color: var(--ss-mocha);
	margin: 2rem 0 0.75rem;
}
.review-editorial h4 {
	font-family: var(--ss-font-sans);
	font-size: 1rem;
	font-weight: 600;
	color: var(--ss-mocha);
	margin: 1.5rem 0 0.5rem;
	letter-spacing: 0.01em;
}
.review-editorial strong {
	color: var(--ss-mocha);
	font-weight: 600;
}
.review-editorial ul,
.review-editorial ol {
	margin: 0 0 1.25rem 1.25rem;
}
.review-editorial li {
	margin-bottom: 0.4rem;
}
/* Unterstreichung kommt aus .guide-section a (text-decoration, Spezifitaet 0,10,1).
   Bis 2.78.1 stand hier text-decoration: none plus ein border-bottom als zweite
   Linie — wirkungslos gegen die Section-Regel, sichtbar als Doppelstrich beim
   Hover und im Fazit (Bjoern, 03.09.2026). */
.review-editorial a {
	color: var(--ss-green);
}
.guide-section--fazit {
	background: var(--ss-mocha);
	color: var(--ss-cream);
}
.guide-section--fazit h2 {
	color: var(--ss-pure-white);
}
.guide-section--fazit .review-editorial--fazit {
	margin-top: 0;
	color: var(--ss-cream);
}
.guide-section--fazit .review-editorial--fazit p {
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.1rem;
	line-height: 1.8;
}
.guide-section--fazit .review-editorial--fazit strong {
	color: var(--ss-pure-white);
}
/* !important mit Spezifitaets-Beleg: .guide-section a:not(...)x9 (0,10,1) setzt Farbe
   und per Shorthand text-decoration-color zurueck. Ohne Vorrang stand hier --ss-green
   auf Mocha (rund 2,5:1, am DOM gemessen 03.09.2026) statt --ss-green-light. */
.guide-section--fazit .review-editorial--fazit a:not(.btn):not(.wp-block-button__link) {
	color: var(--ss-green-light) !important;
	text-decoration-color: rgba(214, 226, 218, 0.4) !important;
	transition: text-decoration-color 0.2s;
}
.guide-section--fazit .review-editorial--fazit a:not(.btn):not(.wp-block-button__link):hover {
	color: var(--ss-green-light) !important;
	text-decoration-color: var(--ss-green-light) !important;
}
@media (max-width: 640px) {
	.guide-section--fazit .review-editorial--fazit p {
		font-size: 0.95rem;
		line-height: 1.7;
	}
}
.review-editorial figure {
	margin: 2rem 0;
	border-radius: var(--ss-radius-md, 12px);
	overflow: hidden;
}
.review-editorial img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--ss-radius-md, 12px);
}
.review-editorial figcaption {
	font-size: 0.88rem;
	color: var(--ss-mocha-mid);
	padding: 0.5rem 0;
	text-align: center;
	line-height: 1.5;
}

/* ── Scientific Sources (collapsible) ────────────────────────── */
/* Nur die <details>-Variante; die statischen <div class="guide-sources">-Quellenboxen
   behalten ihr cream/12px-Styling weiter oben (Audit M8/S15). */
details.guide-sources {
	margin: 2rem 0;
	border: 1px solid var(--ss-cream-dark);
	border-radius: var(--ss-radius);
	background: var(--ss-pure-white);
}
.guide-sources__toggle {
	padding: 0.85rem 1.25rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ss-mocha);
	cursor: pointer;
	list-style: none;
}
.guide-sources__toggle::-webkit-details-marker {
	display: none;
}
.guide-sources__toggle::before {
	content: '\25B6';
	display: inline-block;
	margin-right: 0.5rem;
	font-size: 0.65rem;
	transition: transform 0.15s;
}
.guide-sources[open] .guide-sources__toggle::before {
	transform: rotate(90deg);
}
.guide-sources__list {
	padding: 0 1.25rem 1rem 2.5rem;
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.6;
	color: var(--ss-mocha-mid);
}
.guide-sources__list li {
	margin-bottom: 0.5rem;
}
.guide-sources__list em {
	font-style: italic;
}

/* Methodik-Akkordeon — Kriterien je Supplement (skalierbar) */
.methodik-akk-group {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 1.5rem 0;
}
.methodik-akk {
	border: 1px solid var(--ss-cream-dark);
	border-radius: var(--ss-radius-lg);
	background: var(--ss-pure-white);
	overflow: hidden;
}
.methodik-akk__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 1.1rem 1.5rem;
	cursor: pointer;
	list-style: none;
	color: var(--ss-mocha);
}
.methodik-akk__head::-webkit-details-marker { display: none; }
.methodik-akk__name { font-size: 1.05rem; font-weight: 700; }
.methodik-akk__count { font-size: 0.82rem; font-weight: 400; color: var(--ss-mocha-light); }
.methodik-akk__chev { margin-left: auto; color: var(--ss-mocha-mid); transition: transform 0.2s; flex-shrink: 0; }
.methodik-akk[open] .methodik-akk__chev { transform: rotate(180deg); }
.methodik-akk[open] .methodik-akk__head { border-bottom: 1px solid var(--ss-cream-dark); }
.methodik-akk__head:hover { background: var(--ss-green-light); }
.methodik-akk__body { padding: 0.25rem 1.5rem 1.5rem; }
.methodik-akk__intro { font-size: 0.9rem; color: var(--ss-mocha-mid); margin: 0.9rem 0 0; }
.methodik-akk__body .guide-criteria { margin: 1.1rem 0; }
.methodik-akk__body .guide-criterion { background: var(--ss-cream); box-shadow: none; padding: 1.1rem 1.35rem; }
.methodik-akk__weight {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--ss-green-dark);
	background: var(--ss-green-light);
	padding: 1px 9px;
	border-radius: 999px;
	margin-left: 0.35rem;
	white-space: nowrap;
	vertical-align: 1px;
}
.methodik-akk__formel {
	font-size: 0.9rem;
	color: var(--ss-mocha);
	background: var(--ss-green-light);
	border-radius: var(--ss-radius);
	padding: 0.95rem 1.2rem;
	margin-top: 1.75rem;
}
.methodik-akk__formel-label {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ss-green);
	margin-right: 0.5rem;
}
/* ── Affiliate Note ──────────────────────────────────────────── */

.affiliate-note {
	font-size: 0.82rem;
	color: var(--ss-mocha-mid);
	line-height: 1.6;
	opacity: 0.8;
}
.affiliate-note a {
	color: var(--ss-green);
	text-decoration: underline;
}

/* ── Review Meta Line (date + author) ────────────────────────── */

.review-meta-line {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: 0.82rem;
	color: var(--ss-mocha-light);
	margin-bottom: 1.25rem;
}
.review-meta-line__item {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}
.review-meta-line__item svg {
	color: var(--ss-mocha-light);
	flex-shrink: 0;
}
.review-meta-line__avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--ss-cream-dark);
	vertical-align: middle;
}

/* ── Autorenbox ────────────────────────────────────────────────── */

.author-box {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	padding: 2rem;
	background: var(--ss-pure-white);
	border: 1px solid var(--ss-cream-dark);
	border-left: 3px solid var(--ss-green);
	border-radius: var(--ss-radius-lg);
	box-shadow: var(--ss-shadow-sm);
}
.author-box__sidebar {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
}
.author-box__avatar img {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--ss-green-light);
}
.author-box__social {
	display: flex;
	gap: 0.5rem;
}
.author-box__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ss-cream);
	color: var(--ss-mocha-mid);
	transition: var(--ss-transition);
}
.author-box__social-link:hover {
	background: var(--ss-green);
	color: var(--ss-pure-white);
}
.author-box__body {
	flex: 1;
	min-width: 0;
}
.author-box__label {
	display: block;
	font-family: var(--ss-font-sans);
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ss-green);
	margin-bottom: 0.15rem;
}
.author-box__name {
	display: block;
	font-family: var(--ss-font-sans);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--ss-mocha);
	margin-bottom: 0.5rem;
}
.author-box__credentials {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}
.author-box__credential {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-family: var(--ss-font-sans);
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--ss-mocha-mid);
	background: var(--ss-cream);
	padding: 0.25rem 0.6rem;
	border-radius: var(--ss-radius-pill);
}
.author-box__credential svg {
	color: var(--ss-green);
	flex-shrink: 0;
}
.author-box__bio {
	font-family: var(--ss-font-sans);
	font-size: 0.85rem;
	line-height: 1.65;
	color: var(--ss-mocha-mid);
	margin: 0;
}
.author-box__review-note {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin: 0.6rem 0 0;
	font-family: var(--ss-font-sans);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--ss-green);
}
.author-box__review-note svg {
	flex-shrink: 0;
}

/* ── Erfahrungen aus dem Netz (aggregierte Nutzerbewertungen) ── */
.review-feedback__intro {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ss-mocha-mid);
	margin: 0 0 1.6rem;
}
.review-feedback__ratings {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
	margin: 0 0 1.5rem;
}
.review-feedback__chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1.15rem 1rem;
	background: #fff;
	border: 1px solid var(--ss-border, #e7e2d8);
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(60, 47, 33, 0.05);
}
.review-feedback__score {
	font-family: var(--ss-font-display, serif);
	font-size: 2rem;
	font-weight: 700;
	color: var(--ss-green);
	line-height: 1;
}
.review-feedback__src {
	margin-top: 0.5rem;
	font-size: 0.8rem;
	color: var(--ss-mocha-light, #8a7f70);
	text-align: center;
	line-height: 1.35;
}
.review-feedback__summary {
	font-size: 1rem;
	line-height: 1.7;
	margin: 0 0 1.75rem;
}
.review-feedback__procon {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	margin-bottom: 1.6rem;
}
@media (max-width: 680px) {
	.review-feedback__procon { grid-template-columns: 1fr; }
}
.review-feedback__col {
	border-radius: 14px;
	padding: 1.3rem 1.4rem;
}
.review-feedback__col--pro {
	background: #eef5ee;
	border: 1px solid #cfe3cf;
}
.review-feedback__col--con {
	background: #f7ece6;
	border: 1px solid #e8cfc3;
}
.review-feedback__col h3 {
	margin: 0 0 0.85rem;
	font-size: 1.1rem;
}
.review-feedback__col--pro h3 { color: #2f6b34; }
.review-feedback__col--con h3 { color: #b4472f; }
.review-feedback__col ul {
	margin: 0;
	padding-left: 1.15rem;
}
.review-feedback__col li {
	margin-bottom: 0.55rem;
	line-height: 1.6;
}
.review-feedback__col--pro li::marker { color: #3f9a47; }
.review-feedback__col--con li::marker { color: #c0563b; }
.review-feedback__verdict {
	padding: 1.05rem 1.25rem;
	background: var(--wp--preset--color--green-light, #eef4ee);
	border-left: 3px solid var(--ss-green);
	border-radius: 10px;
	font-size: 0.96rem;
	line-height: 1.65;
}
.review-feedback__src-note {
	margin-top: 1rem;
	font-size: 0.78rem;
	color: var(--ss-mocha-light, #8a7f70);
	font-style: italic;
}

@media (max-width: 600px) {
	.author-box {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		gap: 1rem;
		padding: 1.5rem;
		border-left: none;
		border-top: 3px solid var(--ss-green);
	}
	.author-box__credentials {
		justify-content: flex-start;
	}
}

/* ── Hersteller-Infobox ──────────────────────────────────────── */

.hersteller-infobox {
	background: var(--ss-mocha);
	border-radius: var(--ss-radius-lg);
	padding: 1.5rem 1.75rem;
	margin-top: 2.5rem;
}
.hersteller-infobox__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}
.hersteller-infobox__logo {
	width: 44px;
	height: 44px;
	border-radius: var(--ss-radius-sm);
	object-fit: contain;
	background: var(--ss-pure-white);
	padding: 4px;
}
.hersteller-infobox__label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.5);
	font-weight: 600;
}
.hersteller-infobox__name {
	font-family: var(--ss-font-serif);
	font-size: 1.15rem;
	font-weight: 400;
	color: var(--ss-pure-white);
}
.hersteller-infobox__details {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 0.75rem;
}
.hersteller-infobox__detail strong {
	color: rgba(255, 255, 255, 0.85);
}
.hersteller-infobox__detail a {
	color: var(--ss-green-light);
	text-decoration: none;
}
.hersteller-infobox__detail a:hover {
	text-decoration: underline;
}
.hersteller-infobox__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: 0.75rem;
}
.hersteller-infobox__tag {
	font-size: 0.72rem;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.75);
	border: 1px solid rgba(255, 255, 255, 0.15);
}
.hersteller-infobox__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	align-items: baseline;
}
.hersteller-infobox__link {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ss-green-light);
	text-decoration: none;
}
.hersteller-infobox__link:hover {
	color: var(--ss-pure-white);
}
.hersteller-infobox__link--secondary {
	font-weight: 500;
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
}
.hersteller-infobox__link--secondary:hover {
	color: var(--ss-green-light);
}

/* ── Hersteller-Grid (Archiv) ────────────────────────────────── */

.hersteller-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin-top: 2rem;
}
.hersteller-grid__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 2rem 1.5rem 1.5rem;
	background: var(--ss-pure-white);
	border: 1px solid var(--ss-cream-dark);
	border-radius: var(--ss-radius-lg);
	text-decoration: none;
	color: var(--ss-mocha);
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.hersteller-grid__card:hover {
	border-color: var(--ss-green);
	box-shadow: 0 4px 16px rgba(45, 74, 55, 0.10);
}
.hersteller-grid__card:hover .hersteller-grid__logo img {
	opacity: 1;
	filter: grayscale(0);
}
.hersteller-grid__logo {
	width: 100%;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
}
.hersteller-grid__logo img {
	max-width: 140px;
	max-height: 56px;
	min-height: 1px;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: 1;
	filter: none;
	transition: opacity 0.25s ease, filter 0.25s ease;
}
.hersteller-grid__logo--placeholder {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--ss-cream);
}
.hersteller-grid__initial {
	font-family: var(--ss-font-serif);
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--ss-mocha-mid);
	line-height: 1;
}
.hersteller-grid__name {
	font-family: var(--ss-font-serif);
	font-size: 1.05rem;
	font-weight: 400;
	margin-bottom: 0.5rem;
}
.hersteller-grid__link {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--ss-green);
	margin-top: auto;
	opacity: 0.65;
	transition: opacity 0.2s ease;
}
.hersteller-grid__card:hover .hersteller-grid__link {
	opacity: 1;
}
@media (max-width: 768px) {
	.hersteller-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}
	.hersteller-grid__card {
		padding: 1.5rem 1rem 1.25rem;
	}
	.hersteller-grid__logo {
		height: 44px;
	}
	.hersteller-grid__logo img {
		max-height: 44px;
	}
}
@media (max-width: 480px) {
	.hersteller-grid {
		grid-template-columns: 1fr;
	}
	.hersteller-grid__logo img {
		opacity: 1;
		filter: none;
	}
}

/* ── Hersteller-Profilseite (Single) ──────────────────────────── */

/* ⚠ Hier stand bis zum 28.08.2026 `align-items: flex-start` und `gap: 1rem`.
   Beides brach die Norm: Die feste Hoehe von 145 px beruht darauf, dass der
   senkrechte Innenabstand 0 ist und erst `align-items: center` daraus Luft
   macht, die sich gleichmaessig oben und unten verteilt. Mit flex-start klebte
   der Inhalt oben und die gesamte Luft sammelte sich unten — gemessen 0 px
   oben gegen 48 px unten, waehrend Hub und Bewertung bei 24/24 stehen.

   Die Ueberschreibung stammt aus der Zeit, als die Staerken-Tags noch im
   Streifen standen und eine Spalte brauchten. Sie tun es nicht mehr; der
   CTA-Knopf richtet sich ohnehin selbst aus (`align-self: center`).

   Bjoern-Vorgabe 28.08.2026: Der Omega-3-Hub ist die Referenz, alle Seitentypen
   ausser der Startseite folgen ihm. Wer hier wieder abweicht, begruendet es. */

.hersteller-staerken {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.hersteller-staerken__tag {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.75rem;
	background: rgba(45, 74, 55, 0.08);
	border: 1px solid rgba(45, 74, 55, 0.20);
	border-radius: var(--ss-radius-pill);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ss-green);
	letter-spacing: 0.01em;
}


/* Hersteller stat value for non-numeric text (e.g. Standort) */
.guide-stat__num--text {
	font-size: 1.1rem;
}

/* Certification status badges (replaces emoji icons in tables) */
.cert-status {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.2rem 0.65rem;
	border-radius: var(--ss-radius-pill);
	white-space: nowrap;
}
.cert-status--confirmed {
	background: var(--ss-green-light);
	color: var(--ss-green);
	border: 1px solid rgba(45, 74, 55, 0.2);
}
.cert-status--claimed {
	background: rgba(180, 130, 50, 0.1);
	color: #8a6d2b;
	border: 1px solid rgba(180, 130, 50, 0.25);
}

/* Hersteller staerken margin inside guide-section */
.hersteller-staerken--spaced {
	margin-top: var(--ss-space-lg);
}

/* ── Guide Callout Info variant ───────────────────────────────── */

.guide-callout--info {
	border-left-color: var(--ss-callout-info);
	background: var(--ss-callout-info-bg);
}

/* ── Guide Cards Compact (3-col, smaller) ─────────────────────── */

.guide-cards--compact {
	grid-template-columns: repeat(3, 1fr);
}
.guide-cards--2x2 {
	grid-template-columns: repeat(2, 1fr);
}
.guide-cards--compact .guide-card {
	padding: 1.25rem;
}
.guide-cards--compact .guide-card__title {
	font-size: 0.92rem;
}
.guide-cards--compact .guide-card p {
	font-size: 0.82rem;
}

@media (max-width: 640px) {
	.guide-cards--compact,
	.guide-cards--2x2 {
		grid-template-columns: 1fr;
	}
	.hersteller-infobox__details {
		flex-direction: column;
		gap: 0.35rem;
	}
}

/* ── Static Utility Pages (Methodik, Kontakt, Über uns) ───── */


/* ── Founder Profile ──────────────────────────────────────── */

.founder-profile {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 2.5rem;
	align-items: start;
}

.founder-profile__photo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	text-align: center;
}

.founder-profile__photo img {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--ss-green);
}

.founder-profile__avatar {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: var(--ss-green);
	color: var(--ss-pure-white);
	font-size: 2.2rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 0.04em;
	border: 3px solid var(--ss-green);
}

.founder-profile__name {
	font-weight: 700;
	font-size: 1rem;
	color: var(--ss-mocha);
}

.founder-profile__role {
	font-size: 0.8rem;
	color: var(--ss-mocha-light);
}

.founder-profile__links {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 0.25rem;
}

.founder-profile__social {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.78rem;
	color: var(--ss-mocha-mid);
	text-decoration: none;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--ss-border);
	border-radius: 4px;
	transition: border-color 0.2s, color 0.2s;
}

.founder-profile__social:hover {
	color: var(--ss-green);
	border-color: var(--ss-green);
}

.founder-profile__content p {
	margin: 0 0 1rem;
	line-height: 1.75;
	color: var(--ss-mocha-mid);
}

.founder-profile__score-box {
	display: flex;
	align-items: center;
	gap: 0;
	background: var(--ss-cream-alt, #f8f5f0);
	border: 1px solid var(--ss-border);
	border-radius: 8px;
	overflow: hidden;
	margin-top: 1.5rem;
}

.founder-profile__score-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1rem 1.5rem;
	flex: 1;
	text-align: center;
}

.founder-profile__score-num {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--ss-green);
	line-height: 1;
}

.founder-profile__score-label {
	font-size: 0.72rem;
	color: var(--ss-mocha-light);
	margin-top: 0.3rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.founder-profile__score-div {
	width: 1px;
	height: 2.5rem;
	background: var(--ss-border);
	flex-shrink: 0;
}

@media (max-width: 768px) {
	.founder-profile {
		grid-template-columns: 1fr;
	}
	.founder-profile__photo {
		display: grid;
		grid-template-columns: 80px 1fr;
		grid-template-rows: auto auto auto;
		column-gap: 1rem;
		row-gap: 0.15rem;
		align-items: center;
		text-align: left;
	}
	.founder-profile__photo img,
	.founder-profile__avatar {
		width: 80px;
		height: 80px;
		font-size: 1.4rem;
		grid-row: 1 / 4;
		grid-column: 1;
	}
	.founder-profile__name {
		grid-column: 2;
		grid-row: 1;
	}
	.founder-profile__role {
		grid-column: 2;
		grid-row: 2;
	}
	.founder-profile__links {
		grid-column: 2;
		grid-row: 3;
		justify-content: flex-start;
		margin-top: 0.15rem;
	}
	.founder-profile__score-box {
		flex-wrap: wrap;
	}
	.founder-profile__score-div {
		display: none;
	}
}

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

.ss-contact-form {
	background: var(--ss-cream-alt, #f8f5f0);
	border: 1px solid var(--ss-border);
	border-radius: 10px;
	padding: 2rem;
	margin-top: 1.5rem;
	max-width: 720px;
}

.ss-contact-form__row--2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.ss-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 1.25rem;
}

.ss-contact-form__field label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ss-mocha);
}

.ss-contact-form__field label span {
	color: var(--ss-green);
}

.ss-contact-form__field input[type="text"],
.ss-contact-form__field input[type="email"],
.ss-contact-form__field select,
.ss-contact-form__field textarea {
	width: 100%;
	padding: 0.65rem 0.9rem;
	border: 1px solid var(--ss-border);
	border-radius: 6px;
	background: var(--ss-pure-white);
	font-size: 0.9rem;
	color: var(--ss-mocha);
	font-family: inherit;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.ss-contact-form__field input:focus,
.ss-contact-form__field select:focus,
.ss-contact-form__field textarea:focus {
	outline: none;
	border-color: var(--ss-green);
}

.ss-contact-form__field textarea {
	resize: vertical;
	min-height: 120px;
}

.ss-contact-form__field--checkbox {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.65rem;
	margin-bottom: 1.5rem;
}

.ss-contact-form__field--checkbox input[type="checkbox"] {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 3px;
	accent-color: var(--ss-green);
	cursor: pointer;
}

.ss-contact-form__field--checkbox label {
	font-size: 0.82rem;
	font-weight: 400;
	color: var(--ss-mocha-mid);
	cursor: pointer;
	line-height: 1.55;
	margin: 0;
}

.ss-contact-form__actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.ss-contact-form__submit {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.ss-contact-form__status {
	font-size: 0.85rem;
	line-height: 1.4;
}


@media (max-width: 600px) {
	.ss-contact-form__row--2col {
		grid-template-columns: 1fr;
	}
	.ss-contact-form {
		padding: 1.25rem;
	}
	.legal-links__primary {
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}
	.founder-profile__score-box {
		flex-wrap: wrap;
	}
	.founder-profile__score-div {
		display: none;
	}
	.founder-profile__score-item {
		flex: 1 1 40%;
		padding: 0.75rem 1rem;
	}
}

/* ── Legal Links ──────────────────────────────────────────── */

.legal-links {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 1.5rem;
}

.legal-links__primary {
	display: inline-flex;
	align-items: center;
	background: var(--ss-green);
	color: var(--ss-pure-white);
	font-weight: 600;
	font-size: 0.9rem;
	padding: 0.75rem 1.5rem;
	border-radius: 6px;
	text-decoration: none;
	align-self: flex-start;
	transition: opacity 0.2s;
}

.legal-links__primary:hover {
	opacity: 0.88;
}

.legal-links__secondary {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.legal-links__secondary a {
	font-size: 0.875rem;
	color: rgba(255,255,255,0.75);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.2s;
}

.legal-links__secondary a:hover {
	color: var(--ss-pure-white);
}

/* ── Legal Section ────────────────────────────────────────── */

.guide-section--legal {
	background: var(--ss-legal-bg);
}

.guide-section--legal h2 {
	color: var(--ss-legal-text);
	font-family: var(--ss-font-serif);
	font-size: 2.5rem;
	font-weight: 400;
	margin: 0 0 0.6rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.guide-section--legal p {
	color: rgba(232, 240, 235, 0.80);
	line-height: 1.75;
}

.guide-section--legal .legal-links__primary {
	background: var(--ss-pure-white);
	color: var(--ss-green);
	font-weight: 700;
}

.guide-section--legal .legal-links__primary:hover {
	background: var(--ss-cream);
	opacity: 1;
}

.guide-section--legal .legal-links__secondary a {
	color: rgba(255, 255, 255, 0.95);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-size: 0.95rem;
}

.guide-section--legal .legal-links__secondary a:hover {
	color: var(--ss-pure-white);
	text-decoration-color: var(--ss-pure-white);
}

/* Callout inside legal section */
.guide-section--legal .guide-callout {
	background: rgba(255,255,255,0.07);
	border-color: rgba(255,255,255,0.15);
}

.guide-section--legal .guide-callout__title {
	color: var(--ss-legal-text);
}

.guide-section--legal .guide-callout p {
	color: rgba(232, 240, 235, 0.75);
}

/* Criteria inside legal section */
.guide-section--legal .guide-criterion__body strong {
	color: var(--ss-legal-text);
}

.guide-section--legal .guide-criterion__body p {
	color: rgba(232, 240, 235, 0.75);
	margin: 0.4rem 0 0;
}

.guide-section--legal .guide-criterion__icon {
	color: rgba(232, 240, 235, 0.55);
	border-color: rgba(232, 240, 235, 0.15);
}

/* ── Tagesbedarf-Rechner (bis 2.80.0 als <style> im Pattern, T1 03.09.2026) ── */
.o3rech{max-width:840px;margin:0}
.o3rech__card{background:var(--ss-cream);border:1px solid var(--ss-cream-dark);border-radius:12px;padding:1.6rem;display:grid;grid-template-columns:1.1fr 0.9fr;gap:1.4rem}
.o3rech__controls{display:flex;flex-direction:column;gap:1.1rem}
.o3rech__field label{display:block;font-size:0.82rem;font-weight:600;color:var(--ss-mocha);margin-bottom:0.4rem}
.o3rech__field select{width:100%;padding:0.7rem 0.8rem;border:1px solid var(--ss-cream-dark);border-radius:8px;background:var(--ss-pure-white);color:var(--ss-mocha);font-size:0.95rem;font-family:inherit}
.o3rech__check{display:flex;align-items:flex-start;gap:0.6rem;font-size:0.9rem;color:var(--ss-mocha-mid);cursor:pointer}
.o3rech__check input{margin-top:0.2rem;width:18px;height:18px;accent-color:var(--ss-green);flex:0 0 auto}
.o3rech__result{background:var(--ss-pure-white);border:1px solid var(--ss-cream-dark);border-radius:10px;padding:1.3rem;min-height:356px;display:flex;flex-direction:column}
.o3rech__rlabel{font-size:0.74rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--ss-mocha-light)}
.o3rech__value{font-family:var(--ss-font-serif);font-size:2.3rem;line-height:1.1;color:var(--ss-green);margin:0.3rem 0 0.1rem}
.o3rech__nut{font-size:0.9rem;font-weight:600;color:var(--ss-mocha);margin-bottom:0.7rem}
.o3rech__basis{font-size:0.82rem;line-height:1.5;color:var(--ss-mocha-mid);margin:0 0 0.7rem}
.o3rech__note{font-size:0.84rem;line-height:1.55;color:var(--ss-mocha);background:var(--ss-green-light);border-radius:8px;padding:0.6rem 0.7rem;margin:0 0 0.8rem}
.o3rech__cta{margin-top:auto}
.o3rech__cta a{display:inline-block;font-size:0.86rem;font-weight:600;color:var(--ss-green);text-decoration:none}
.o3rech__cta a:hover{color:var(--ss-green-dark)}
.o3rech__disc{font-size:0.72rem;line-height:1.5;color:var(--ss-mocha-light);margin:0.9rem 0 0;text-align:left}
@media(max-width:640px){.o3rech__card{grid-template-columns:1fr}.o3rech__result{min-height:460px}}

/* ── Deals (2.90.0/2.90.1): Deals-Seite nutzt die Ranking-Karten, eigene Kartenoptik entfernt
   (Bjoern 08.09.2026). Bleibt: Neu-Badge auf den Karten. */
.rank-card__cat-badge--neu {
	background: var(--ss-green-dark);
	color: var(--ss-pure-white);
	border-color: var(--ss-green-dark);
}
.ranking-cards--deals {
	margin: 1rem 0 2.5rem;
}

/* Deals: Umschalter Kundenstatus (2.91.0). Kein Verstecken, nur Abschwaechen:
   ein Produkt mit einem einzigen Code gilt fuer alle Kunden und bleibt voll sichtbar. */
.deals-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 1.25rem 0 0.5rem;
	font-family: var(--ss-font-sans);
	font-size: 0.88rem;
}
.deals-filter__label {
	color: var(--ss-muted);
	margin-right: 0.25rem;
}
.deals-filter__btn {
	font: inherit;
	font-weight: 600;
	color: var(--ss-green-dark);
	background: var(--ss-pure-white);
	border: 1px solid var(--ss-border);
	border-radius: var(--ss-radius-pill);
	padding: 0.4rem 0.9rem;
	cursor: pointer;
	transition: background var(--ss-transition), color var(--ss-transition), border-color var(--ss-transition);
}
.deals-filter__btn:hover {
	background: var(--ss-cream);
}
.deals-filter__btn.is-active {
	color: var(--ss-pure-white);
	background: var(--ss-green);
	border-color: var(--ss-green);
}
.deals-filter__btn:focus-visible {
	outline: 2px solid var(--ss-green-dark);
	outline-offset: 2px;
}
/* Nicht passender Code: neutral eingefaerbt statt per Opacity abgeschwaecht, damit der Link
   lesbar und kontrastfest bleibt (Mocha auf Cream-Dark 8,4:1; Gate 4 Codex, WCAG 1.4.3). */
.deals-modus--nk .rank-card__deal-code--bk,
.deals-modus--bk .rank-card__deal-code:not(.rank-card__deal-code--bk):not(:only-child) {
	background: var(--ss-cream-dark);
	color: var(--ss-mocha);
	font-weight: 500;
}
.deals-modus--nk .rank-card__deal-badge--bk,
.deals-modus--bk .rank-card__deal-badge:not(.rank-card__deal-badge--bk):not(:only-child) {
	color: var(--ss-mocha-mid);
	font-weight: 400;
}

/* Review-Hero: Kennzahl bricht nie um ("20.000 IE" stand zweizeilig, Bjoern 09.09.2026) */
.hero--review .guide-stat__num {
	white-space: nowrap;
}

/* Hub: sichtbares Aktualisierungsdatum plus juengste Aufnahmen (2.91.0) */
.guide-updated {
	font-family: var(--ss-font-sans);
	font-size: 0.85rem;
	color: var(--ss-muted);
	margin: -0.25rem 0 1.25rem;
}
.guide-updated time {
	font-weight: 600;
	color: var(--ss-mocha);
}

/* ── Nav: "Deals" hervorgehoben (Bjoern 08.09.2026): gruene Pille mit Rabatt-Icon,
   gleiche Farbwelt wie Coupon-Box und Rabatt-Ribbon. Mobil identisch. */
/* Deals-Eintrag: gefüllte Pille in der Farbe der Rabatt-Ribbons (Deep-Amber, weiß 6,2:1).
   Best Practice Shop-Navigationen (Amazon "Angebote", Otto/Zalando "Sale"): ein warmer
   Akzent, der sonst nirgends in der Navigation vorkommt, auf jeder Seite gleich. */
.ss-nav__link--deals {
	color: var(--ss-pure-white);
	background: var(--ss-grade-c-deep);
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 0.4rem 0.8rem;
	border-radius: var(--ss-radius-pill);
	box-shadow: 0 1px 2px rgba(61, 46, 36, 0.15);
}
.ss-nav__link--deals:hover,
.ss-nav__link--deals:focus-visible {
	color: var(--ss-pure-white);
	background: var(--ss-grade-d-deep);
}
.ss-nav__deals-icon {
	flex-shrink: 0;
}
.ss-mobile-nav__link--deals {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.4rem;
	margin: 0.5rem 0;
	padding: 0.5rem 1rem;
	color: var(--ss-pure-white);
	background: var(--ss-grade-c-deep);
	font-weight: 600;
	border-bottom: none;
	border-radius: var(--ss-radius-pill);
}
.ss-mobile-nav__link--deals:hover {
	color: var(--ss-pure-white);
	background: var(--ss-grade-d-deep);
}