/**
 * Single Seilwinde — Page CSS
 *
 * Source: Anthropic Design Bundle (Bauplan-Entwurf), 2026-05-11.
 * Portiert mit SSOT-Wording-Korrekturen (Funkwinde statt Ausstoßwinde,
 * Funk = Zubehör, "1. Platz" statt "Testsieger", etc.).
 *
 * Enqueued nur auf `single-seilwinde` (CPT). Erbt Tokens aus tokens.css.
 * Klassen mobile-first, Breakpoints 640 / 768 / 900 / 1024 / 1100 / 1280.
 *
 * @package Koenigswieser2026
 */

/* ---------- Token-Aliase (Design verwendet kürzere Namen) ---------- */
.kw-product-page {
	--kw-text:      var(--kw-body-text);
	--kw-text-soft: var(--kw-text-muted);
	--kw-bg:        var(--kw-bg-alt);
}

/* ---------- Layout primitives ---------- */
.kw-product-page .kw-container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 32px);
}
.kw-product-page .kw-section {
	padding: clamp(48px, 8vw, 100px) 0;
}
.kw-product-page .kw-section--cream      { background: var(--kw-cream); }
.kw-product-page .kw-section--cream-dark { background: var(--kw-cream-dark); }
.kw-product-page .kw-section--bordeaux   { background: var(--kw-bordeaux-dark); color: #fff; }

/* ---------- Typography ---------- */
.kw-product-page .kw-overline {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--kw-sand);
	margin: 0 0 14px;
}
.kw-product-page .kw-section--bordeaux .kw-overline { color: var(--kw-sand-light); }

.kw-product-page .kw-h1 {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 700;
	font-size: clamp(32px, 5.6vw, 60px);
	letter-spacing: 2px;
	text-transform: uppercase;
	line-height: 1.05;
	margin: 0 0 18px;
	color: var(--kw-text);
}
.kw-product-page .kw-h1__sub {
	display: block;
	font-size: clamp(14px, 1.4vw, 18px);
	letter-spacing: 2.5px;
	font-weight: 600;
	color: var(--kw-bordeaux);
	margin-top: 14px;
}
.kw-product-page .kw-h2 {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 600;
	font-size: clamp(26px, 3.6vw, 40px);
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1.15;
	margin: 0 0 18px;
	color: var(--kw-text);
}
.kw-product-page .kw-h2--light { color: #fff; }
.kw-product-page .kw-lead {
	font-family: 'PT Serif', Georgia, serif;
	font-size: clamp(16px, 1.4vw, 19px);
	line-height: 1.65;
	color: var(--kw-text-soft);
	text-wrap: pretty;
	margin: 0 0 32px;
	max-width: 65ch;
}
.kw-product-page .kw-section-head { margin-bottom: 48px; max-width: 820px; }

.kw-product-page .kw-tag {
	display: inline-block;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--kw-bordeaux);
	background: rgba(151,35,63,0.08);
	padding: 5px 10px;
	border-radius: 4px;
	margin-bottom: 12px;
}

/* ---------- Buttons ---------- */
.kw-product-page .kw-btn-primary,
.kw-product-page .kw-btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	border-radius: var(--kw-radius-sm);
	padding: 18px 28px;
	border: 0;
	text-decoration: none;
	min-height: var(--kw-tap-min);
	transition: transform var(--kw-transition), background var(--kw-transition), box-shadow var(--kw-transition);
}
.kw-product-page .kw-btn-primary {
	background: var(--kw-bordeaux);
	color: #fff;
	box-shadow: var(--kw-shadow-sm);
}
.kw-product-page .kw-btn-primary:hover {
	background: var(--kw-bordeaux-dark);
	transform: translateY(-2px);
	box-shadow: var(--kw-shadow-md);
}
.kw-product-page .kw-btn-primary--invert {
	background: #fff;
	color: var(--kw-bordeaux);
}
.kw-product-page .kw-btn-primary--invert:hover {
	background: var(--kw-cream);
	color: var(--kw-bordeaux-dark);
}
.kw-product-page .kw-btn-primary--full { width: 100%; justify-content: center; }
.kw-product-page .kw-btn-outline {
	background: transparent;
	color: var(--kw-bordeaux);
	border: 2px solid var(--kw-bordeaux);
}
.kw-product-page .kw-btn-outline:hover {
	background: var(--kw-bordeaux);
	color: #fff;
	transform: translateY(-2px);
}

/* ---------- Breadcrumb (Block 0) ---------- */
.kw-product-page .kw-breadcrumb {
	background: var(--kw-bg);
	padding: 14px 0;
	border-bottom: 1px solid var(--kw-border);
	font-family: 'Josefin Sans', sans-serif;
	font-size: 12px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}
.kw-product-page .kw-breadcrumb ol {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
.kw-product-page .kw-breadcrumb li {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--kw-sand);
}
.kw-product-page .kw-breadcrumb li:not(:last-child)::after {
	content: '›';
	color: var(--kw-sand);
	margin-left: 6px;
	font-size: 13px;
}
.kw-product-page .kw-breadcrumb a { color: var(--kw-text); text-decoration: none; }
.kw-product-page .kw-breadcrumb a:hover { color: var(--kw-bordeaux); }
.kw-product-page .kw-breadcrumb [aria-current="page"] {
	color: var(--kw-bordeaux);
	font-weight: 700;
}

/* ---------- Hero (Block 1) — 4:5 oder 3:2 auto-detect ---------- */
/* Reset gegen Theme-globales .kw-hero (homepage variant) — components.css L117.
 * Theme nutzt .kw-hero als Single-Class für Homepage-Hero (flex/center/white text).
 * Wir überschreiben hier mit höherer Spezifität + !important wo Theme-Properties
 * sonst inherit-vererbt würden. */
.kw-product-page .kw-hero {
	display: block !important;
	min-height: auto !important;
	position: relative;
	text-align: left !important;
	color: var(--kw-text) !important;
	background: var(--kw-bg) !important;
	background-size: auto !important;
	background-position: initial !important;
	overflow: visible !important;
	padding: clamp(28px, 5vw, 56px) 0 0;
	align-items: stretch !important;
	justify-content: flex-start !important;
}
.kw-product-page .kw-hero h1,
.kw-product-page .kw-hero .kw-h1 {
	color: var(--kw-text) !important;
	font-family: 'Josefin Sans', sans-serif !important;
	text-transform: uppercase !important;
	letter-spacing: 2px !important;
	text-shadow: none !important;
	font-size: clamp(32px, 5.6vw, 60px) !important;
}
.kw-product-page .kw-hero__lead { color: var(--kw-text-soft) !important; }
.kw-product-page .kw-hero__wrap {
	display: grid;
	gap: 32px;
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.kw-product-page .kw-hero--4x5 .kw-hero__wrap {
		grid-template-columns: 1.05fr 1fr;
		align-items: center;
	}
}
/* Reset gegen kw-blocks Plugin (kw-hero__content collision):
 * kw-blocks.css: .kw-hero__content { text-align:center; padding:3rem 2rem; max-width:900px; }
 * Wir wollen hier Single-Seilwinde-Layout: left-aligned, kein padding, full-width-grid-cell.
 *
 * Mobile-First-Order (Bauplan): H1 + Subline + CTA zuerst, Hero-Bild danach.
 * Begründung: above-the-fold-Cap auf 375 × 667 verlangt Breadcrumb · H1 · Subline ·
 * Quick-Specs · CTA sichtbar — das Bild darf darunter rutschen. */
.kw-product-page .kw-hero__content {
	order: 1;
	text-align: left !important;
	padding: 0 !important;
	max-width: none !important;
	width: auto !important;
	position: static !important;
}
.kw-product-page .kw-hero__media   { order: 2; }
@media (min-width: 900px) {
	.kw-product-page .kw-hero--4x5 .kw-hero__content { padding-right: 32px; }
}
.kw-product-page .kw-hero--3x2 .kw-hero__wrap { display: block; }
.kw-product-page .kw-hero--3x2 .kw-hero__media { margin-bottom: 32px; }

.kw-product-page .kw-hero__lead {
	font-size: clamp(16px, 1.5vw, 19px);
	line-height: 1.65;
	color: var(--kw-text-soft);
	text-wrap: pretty;
	margin: 0 0 28px;
	max-width: 56ch;
}
.kw-product-page .kw-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--kw-text-soft);
	margin-bottom: 28px;
}
.kw-product-page .kw-hero__award { color: var(--kw-bordeaux); font-weight: 700; }
.kw-product-page .kw-hero__sep   { color: var(--kw-sand); }

.kw-product-page .kw-hero__ctas {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	flex-wrap: wrap;
}
.kw-product-page .kw-hero__ctas .kw-btn-primary {
	justify-content: center;
}
@media (min-width: 640px) {
	.kw-product-page .kw-hero__ctas { align-items: flex-start; }
	.kw-product-page .kw-hero__ctas .kw-btn-primary { justify-content: flex-start; }
}
.kw-product-page .kw-hero__link {
	font-family: 'PT Serif', serif;
	font-size: 14.5px;
	color: var(--kw-text-soft);
	text-decoration: none;
}
.kw-product-page .kw-hero__link strong {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--kw-bordeaux);
	margin-left: 4px;
}
.kw-product-page .kw-hero__link:hover strong { color: var(--kw-bordeaux-dark); }

.kw-product-page .kw-hero__photo {
	position: relative;
	background: #fff;
	border-radius: var(--kw-radius);
	box-shadow: var(--kw-shadow-md);
	overflow: hidden;
	margin: 0;
}
.kw-product-page .kw-hero__photo--4x5 { aspect-ratio: 4 / 5; }
.kw-product-page .kw-hero__photo--3x2 { aspect-ratio: 3 / 2; }
.kw-product-page .kw-hero__photo > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	box-sizing: border-box;
}
/* 4:5 = freigestellt → contain + 12% Padding (SSOT-Pflicht).
 * box-sizing:border-box damit Padding nicht außen ansetzt + Image überläuft. */
.kw-product-page .kw-hero__photo--4x5 > img {
	padding: 12%;
	object-fit: contain;
	background: #fff;
}
.kw-product-page .kw-hero__caption {
	position: absolute;
	left: 14px; bottom: 14px;
	background: rgba(26,26,26,.78);
	color: #fff;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	padding: 6px 10px;
	border-radius: 4px;
	backdrop-filter: blur(4px);
}

/* ---------- Placeholder (Asset-Lücken sichtbar) ---------- */
.kw-product-page .kw-placeholder {
	position: relative;
	width: 100%; height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: linear-gradient(180deg, var(--kw-cream) 0%, #fff 100%);
	border: 1px dashed var(--kw-sand);
	padding: 12%;
	gap: 16px;
}
.kw-product-page .kw-placeholder__art {
	width: 60%;
	max-width: 220px;
	opacity: 0.55;
	filter: saturate(0);
}
.kw-product-page .kw-placeholder__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--kw-bordeaux);
	background: rgba(151,35,63,0.08);
	padding: 6px 10px;
	border-radius: 4px;
}
.kw-product-page .kw-placeholder__dot {
	width: 6px; height: 6px;
	background: var(--kw-bordeaux);
	border-radius: 50%;
	animation: kw-pulse 1.4s ease-in-out infinite;
}
@keyframes kw-pulse {
	0%, 100% { opacity: 0.4; }
	50%      { opacity: 1; }
}

/* ---------- Quick-Specs (Grid 2/3/6 — kein Scroll-Snap) ---------- */
.kw-product-page .kw-hero__qspecs {
	display: block;
	width: 100%;
	margin-top: 32px;
	padding-bottom: 24px;
}
.kw-product-page .kw-qspecs { width: 100%; }
.kw-product-page .kw-qspecs__track {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	width: 100%;
}
.kw-product-page .kw-qspec {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 12px;
	background: #fff;
	border-radius: 10px;
	box-shadow: var(--kw-shadow-sm);
	min-height: 60px;
	min-width: 0;
}
.kw-product-page .kw-qspec__icon { width: 28px; height: 28px; opacity: 0.85; flex-shrink: 0; }
.kw-product-page .kw-qspec__body { min-width: 0; }
.kw-product-page .kw-qspec__value {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.4px;
	color: var(--kw-text);
	line-height: 1.15;
	overflow-wrap: anywhere;
	hyphens: none;
}
.kw-product-page .kw-qspec__label {
	font-family: 'PT Serif', serif;
	font-size: 11.5px;
	color: var(--kw-sand);
	margin-top: 2px;
	line-height: 1.25;
}
@media (min-width: 640px)  {
	.kw-product-page .kw-qspecs__track { grid-template-columns: repeat(3, 1fr); }
	.kw-product-page .kw-qspec__icon { width: 32px; height: 32px; }
	.kw-product-page .kw-qspec__value { font-size: 16px; }
}
@media (min-width: 1024px) {
	.kw-product-page .kw-qspecs__track { grid-template-columns: repeat(6, 1fr); gap: 10px; }
	.kw-product-page .kw-qspec { padding: 12px 12px; gap: 8px; }
	.kw-product-page .kw-qspec__icon { width: 28px; height: 28px; }
	.kw-product-page .kw-qspec__value { font-size: 15px; }
	.kw-product-page .kw-qspec__label { font-size: 11px; }
}

/* ---------- Pain Points (Block 2) ---------- */
.kw-product-page .kw-pains {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .kw-product-page .kw-pains { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .kw-product-page .kw-pains { grid-template-columns: repeat(4, 1fr); } }
.kw-product-page .kw-pain {
	background: #fff;
	border-radius: var(--kw-radius);
	padding: 28px 24px;
	box-shadow: var(--kw-shadow-sm);
	position: relative;
	border-top: 4px solid transparent;
	transition: transform var(--kw-transition), border-color var(--kw-transition), box-shadow var(--kw-transition);
}
.kw-product-page .kw-pain:hover {
	transform: translateY(-6px);
	border-top-color: var(--kw-bordeaux);
	box-shadow: var(--kw-shadow-hover);
}
.kw-product-page .kw-pain__num {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 2px;
	color: var(--kw-bordeaux);
	margin-bottom: 10px;
}
.kw-product-page .kw-pain__title {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 600;
	font-size: 17px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--kw-text);
	line-height: 1.25;
	margin: 0 0 12px;
}
.kw-product-page .kw-pain__desc {
	font-size: 15px;
	line-height: 1.6;
	color: var(--kw-text-soft);
	margin: 0;
}

/* ---------- Features (Block 3) — 3:2 Cards + Text-Only ---------- */
.kw-product-page .kw-features {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .kw-product-page .kw-features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .kw-product-page .kw-features { grid-template-columns: repeat(3, 1fr); } }
.kw-product-page .kw-feature {
	background: #fff;
	border-radius: var(--kw-radius);
	overflow: hidden;
	box-shadow: var(--kw-shadow-sm);
	transition: transform var(--kw-transition), box-shadow var(--kw-transition);
	display: flex;
	flex-direction: column;
}
.kw-product-page .kw-feature:hover {
	transform: translateY(-6px);
	box-shadow: var(--kw-shadow-hover);
}
.kw-product-page .kw-feature__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--kw-cream);
}
.kw-product-page .kw-feature__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.kw-product-page .kw-feature:hover .kw-feature__media img { transform: scale(1.06); }
.kw-product-page .kw-feature__placeholder {
	aspect-ratio: 3 / 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background:
		repeating-linear-gradient(45deg, var(--kw-cream) 0 10px, var(--kw-cream-dark) 10px 20px);
	text-align: center;
	padding: 24px;
}
.kw-product-page .kw-feature__plchip {
	font-family: 'Josefin Sans', sans-serif;
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--kw-bordeaux);
	background: #fff;
	padding: 6px 10px;
	border-radius: 4px;
}
.kw-product-page .kw-feature__plnote {
	font-family: 'PT Serif', serif;
	font-style: italic;
	font-size: 12px;
	color: var(--kw-sand);
}
.kw-product-page .kw-feature__body { padding: 22px 24px 28px; }
.kw-product-page .kw-feature__title {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	margin: 0 0 10px;
	line-height: 1.25;
	color: var(--kw-text);
}
.kw-product-page .kw-feature__desc {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--kw-text-soft);
	margin: 0;
}

/* ---------- Konfigurator CTA (Block 4) ---------- */
.kw-product-page .kw-cfg {
	display: grid;
	gap: 24px;
	align-items: center;
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.kw-product-page .kw-cfg { grid-template-columns: auto 1fr auto; gap: 36px; }
}
.kw-product-page .kw-cfg__icon { color: var(--kw-sand-light); }
.kw-product-page .kw-cfg__body p {
	color: var(--kw-cream);
	margin: 0;
	max-width: 60ch;
	font-size: 16.5px;
}
.kw-product-page .kw-cfg__body strong { color: #fff; }
.kw-product-page .kw-cfg__cta {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}
@media (min-width: 900px) { .kw-product-page .kw-cfg__cta { align-items: flex-end; } }
.kw-product-page .kw-cfg__url {
	font-family: 'Josefin Sans', sans-serif;
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--kw-sand-light);
	opacity: 0.7;
}

/* ---------- Zubehör (Block 5) — 1:1 Cards ---------- */
.kw-product-page .kw-zubehoer {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr 1fr;
}
@media (min-width: 768px)  { .kw-product-page .kw-zubehoer { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .kw-product-page .kw-zubehoer { grid-template-columns: repeat(4, 1fr); } }
.kw-product-page .kw-zcard {
	background: #fff;
	border-radius: var(--kw-radius);
	overflow: hidden;
	box-shadow: var(--kw-shadow-sm);
	display: flex;
	flex-direction: column;
	transition: transform var(--kw-transition), box-shadow var(--kw-transition);
}
.kw-product-page .kw-zcard:hover {
	transform: translateY(-6px);
	box-shadow: var(--kw-shadow-hover);
}
.kw-product-page .kw-zcard__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: #fff;
	border-bottom: 1px solid var(--kw-border);
	overflow: hidden;
}
.kw-product-page .kw-zcard__inner {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	padding: 12%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.kw-product-page .kw-zcard__photo {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.kw-product-page .kw-zcard__icon  { width: 80px; height: 80px; opacity: 0.85; }
.kw-product-page .kw-zcard__body  { padding: 18px 20px 22px; }
.kw-product-page .kw-zcard__name {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	margin: 0 0 10px;
	line-height: 1.3;
	color: var(--kw-text);
}
.kw-product-page .kw-zcard__cta {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--kw-bordeaux);
}
.kw-product-page .kw-zcard__cta:hover { color: var(--kw-bordeaux-dark); }

/* ---------- Trust (Block 6) — 4:5 Porträt + 3 Versprechen ---------- */
.kw-product-page .kw-trust {
	display: grid;
	gap: 40px;
	grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
	.kw-product-page .kw-trust { grid-template-columns: 0.95fr 1.05fr; align-items: center; gap: 64px; }
}
.kw-product-page .kw-trust__portrait {
	aspect-ratio: 1 / 1;
	background: var(--kw-cream);
	border-radius: var(--kw-radius);
	position: relative;
	overflow: hidden;
	box-shadow: var(--kw-shadow-md);
}
.kw-product-page .kw-trust__portrait img { width: 100%; height: 100%; object-fit: cover; }
.kw-product-page .kw-trust__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-align: center;
	padding: 12%;
	background: repeating-linear-gradient(135deg, var(--kw-cream) 0 16px, #fff 16px 32px);
	color: var(--kw-sand);
}
.kw-product-page .kw-trust__placeholder p {
	margin: 0;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--kw-text-soft);
}
.kw-product-page .kw-trust__plnote {
	font-family: 'PT Serif', serif !important;
	font-style: italic;
	font-size: 12px !important;
	letter-spacing: 0.2px !important;
	text-transform: none !important;
	color: var(--kw-sand) !important;
	max-width: 28ch;
	line-height: 1.5;
}
.kw-product-page .kw-trust__plicon { color: var(--kw-sand); margin-bottom: 8px; }
.kw-product-page .kw-trust__quote {
	background: var(--kw-cream);
	border-left: 4px solid var(--kw-bordeaux);
	padding: 18px 22px;
	margin-top: 18px;
	border-radius: 0 8px 8px 0;
}
.kw-product-page .kw-trust__quote blockquote {
	margin: 0 0 8px;
	font-family: 'PT Serif', serif;
	font-style: italic;
	font-size: 16px;
	line-height: 1.55;
	color: var(--kw-text);
}
.kw-product-page .kw-trust__quote cite {
	display: block;
	font-family: 'Josefin Sans', sans-serif;
	font-style: normal;
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--kw-sand);
}
.kw-product-page .kw-trust__head { margin-bottom: 24px; }
.kw-product-page .kw-trust__list {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	display: grid;
	gap: 18px;
}
.kw-product-page .kw-trust__list li {
	padding: 22px 24px;
	background: #fff;
	border-radius: var(--kw-radius);
	box-shadow: var(--kw-shadow-sm);
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 16px;
	align-items: center;
}
@media (min-width: 640px) {
	.kw-product-page .kw-trust__list li {
		grid-template-columns: 92px 1fr;
		gap: 22px;
	}
}
.kw-product-page .kw-trust__num {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 12px 0;
	border-right: 1px solid var(--kw-border);
	font-family: 'Josefin Sans', sans-serif;
	color: var(--kw-bordeaux);
	text-align: center;
}
.kw-product-page .kw-trust__num span {
	font-weight: 700;
	font-size: 36px;
	letter-spacing: 0.5px;
	line-height: 1;
}
.kw-product-page .kw-trust__icon {
	width: 28px;
	height: 28px;
	display: block;
}

/* ============================================================
   BLOCK 2a — GALERIE (Im Einsatz)
   CSS-Columns Masonry — variable Höhe, respektiert Aspect-Ratio.
   ============================================================ */
.kw-product-page .kw-galerie__grid {
	column-count: 1;
	column-gap: 16px;
}
@media (min-width: 600px) {
	.kw-product-page .kw-galerie__grid { column-count: 2; column-gap: 20px; }
}
@media (min-width: 980px) {
	.kw-product-page .kw-galerie__grid { column-count: 3; column-gap: 24px; }
	/* Bei nur 1 Bild: nicht über die ganze Breite ziehen */
	.kw-product-page .kw-galerie__grid--1 { column-count: 1; max-width: 720px; margin: 0 auto; }
	/* Bei 2 Bildern: 2 spalten reichen */
	.kw-product-page .kw-galerie__grid--2 { column-count: 2; max-width: 960px; margin: 0 auto; }
}
.kw-product-page .kw-galerie__item {
	margin: 0 0 16px;
	overflow: hidden;
	border-radius: var(--kw-radius);
	break-inside: avoid;
	box-shadow: var(--kw-shadow-sm, 0 2px 8px rgba(76,71,38,0.06));
}
@media (min-width: 980px) {
	.kw-product-page .kw-galerie__item { margin-bottom: 24px; }
}
.kw-product-page .kw-galerie__item img {
	width: 100%;
	height: auto;
	display: block;
}
.kw-product-page .kw-trust__num em {
	display: block;
	font-style: normal;
	margin-top: 4px;
	font-weight: 600;
	font-size: 9.5px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--kw-sand);
}
.kw-product-page .kw-trust__list h3 {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin: 0 0 6px;
	color: var(--kw-text);
}
.kw-product-page .kw-trust__list p {
	margin: 0;
	font-size: 14.5px;
	color: var(--kw-text-soft);
	line-height: 1.55;
}

/* ---------- Zielgruppe (Block 7) ---------- */
.kw-product-page .kw-zg {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr;
	margin-bottom: 36px;
}
@media (min-width: 768px) { .kw-product-page .kw-zg { grid-template-columns: repeat(3, 1fr); } }
.kw-product-page .kw-zg__card {
	background: #fff;
	border-radius: var(--kw-radius);
	padding: 24px 24px 28px;
	box-shadow: var(--kw-shadow-sm);
	border-top: 4px solid transparent;
}
.kw-product-page .kw-zg__card.is-top { border-top-color: var(--kw-bordeaux); }
.kw-product-page .kw-zg__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
}
.kw-product-page .kw-zg__match {
	font-family: 'Josefin Sans', sans-serif;
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 4px;
}
.kw-product-page .kw-zg__match--topmatch    { background: var(--kw-bordeaux); color: #fff; }
.kw-product-page .kw-zg__match--sehrpassend { background: var(--kw-cream-dark); color: var(--kw-text); }
.kw-product-page .kw-zg__match--moeglich    { background: var(--kw-cream); color: var(--kw-sand); }
.kw-product-page .kw-zg__match--ehernicht   {
	background: transparent;
	color: var(--kw-sand);
	border: 1px dashed var(--kw-sand);
}
.kw-product-page .kw-zg__card h3 {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 600;
	font-size: 17px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	margin: 0 0 10px;
	color: var(--kw-text);
}
.kw-product-page .kw-zg__card p {
	margin: 0 0 18px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--kw-text-soft);
}
.kw-product-page .kw-zg__ps {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 14px;
	border-top: 1px solid var(--kw-border);
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 1px;
	color: var(--kw-text);
}
.kw-product-page .kw-zg__ps img { width: 24px; height: 24px; opacity: 0.7; }
.kw-product-page .kw-zg__rule {
	background: #fff;
	border-radius: var(--kw-radius);
	padding: 22px 26px;
	box-shadow: var(--kw-shadow-sm);
	border-left: 4px solid var(--kw-bordeaux);
}
.kw-product-page .kw-zg__rule p { margin: 0; font-size: 15.5px; color: var(--kw-text); }

/* ---------- FAQ (Block 8) ---------- */
.kw-product-page .kw-faq-wrap { max-width: 880px; }
.kw-product-page .kw-faq {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 1px solid var(--kw-border);
}
.kw-product-page .kw-faq__item { border-bottom: 1px solid var(--kw-border); }
.kw-product-page .kw-faq__q {
	width: 100%;
	background: transparent;
	border: 0;
	padding: 18px 4px;
	min-height: 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	text-align: left;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--kw-text);
	cursor: pointer;
	transition: color .25s;
}
.kw-product-page .kw-faq__q:hover,
.kw-product-page .kw-faq__item[open] .kw-faq__q { color: var(--kw-bordeaux); }
.kw-product-page .kw-faq__plus {
	width: 28px; height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 400;
	font-size: 22px;
	color: var(--kw-bordeaux);
	flex-shrink: 0;
}
.kw-product-page .kw-faq__item[open] .kw-faq__plus::before { content: '–'; }
.kw-product-page .kw-faq__item:not([open]) .kw-faq__plus::before { content: '+'; }
.kw-product-page .kw-faq__a { padding: 0 4px 22px; max-width: 70ch; }
.kw-product-page .kw-faq__a p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--kw-text-soft);
}

/* ---------- Tech-Daten (Block 9) ---------- */
.kw-product-page .kw-specs {
	background: #fff;
	border-radius: var(--kw-radius);
	overflow: hidden;
	box-shadow: var(--kw-shadow-sm);
}
.kw-product-page .kw-specs table { width: 100%; border-collapse: collapse; }
.kw-product-page .kw-specs tr { border-bottom: 1px solid var(--kw-border); }
.kw-product-page .kw-specs tr:last-child { border-bottom: 0; }
.kw-product-page .kw-specs tr:hover { background: var(--kw-cream); }
.kw-product-page .kw-specs th,
.kw-product-page .kw-specs td {
	padding: 14px 22px;
	text-align: left;
	font-size: 15px;
	vertical-align: top;
}
.kw-product-page .kw-specs th {
	width: 40%;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--kw-sand);
}
.kw-product-page .kw-specs td { color: var(--kw-text); }
.kw-product-page .kw-specs__note {
	font-size: 13px;
	color: var(--kw-sand);
	margin: 14px 4px 0;
	font-style: italic;
}
@media (max-width: 600px) {
	.kw-product-page .kw-specs th,
	.kw-product-page .kw-specs td {
		display: block;
		padding: 12px 18px;
	}
	.kw-product-page .kw-specs th { width: 100%; padding-bottom: 2px; }
	.kw-product-page .kw-specs td { padding-top: 2px; padding-bottom: 14px; }
}

/* ---------- Form + Ansprechpartner (Block 10) ---------- */
.kw-product-page .kw-form {
	display: grid;
	gap: 32px;
	grid-template-columns: 1fr;
}
@media (min-width: 980px) {
	.kw-product-page .kw-form { grid-template-columns: 0.95fr 1.05fr; align-items: start; gap: 48px; }
}
.kw-product-page .kw-ansprechpartner {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 14px;
	align-items: center;
	margin-top: 20px;
	padding: 16px;
	background: var(--kw-cream);
	border-radius: var(--kw-radius);
}
@media (min-width: 640px) {
	.kw-product-page .kw-ansprechpartner {
		grid-template-columns: 96px 1fr;
		gap: 18px;
		padding: 18px;
	}
}
.kw-product-page .kw-ansprechpartner__photo {
	width: 80px;
	height: 100px;
	border-radius: var(--kw-radius-sm);
	overflow: hidden;
	background: var(--kw-cream-dark);
	position: relative;
}
@media (min-width: 640px) {
	.kw-product-page .kw-ansprechpartner__photo { width: 96px; height: 120px; }
}
.kw-product-page .kw-ansprechpartner__photo img { width: 100%; height: 100%; object-fit: cover; }
.kw-product-page .kw-flag {
	position: absolute;
	top: 6px; left: 6px;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 1.2px;
	background: rgba(26,26,26,.78);
	color: #fff;
	padding: 3px 6px;
	border-radius: 3px;
}
.kw-product-page .kw-ansprechpartner__name {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--kw-text);
	margin-bottom: 4px;
}
.kw-product-page .kw-ansprechpartner__role {
	font-size: 13px;
	color: var(--kw-sand);
	font-style: italic;
	margin-bottom: 10px;
}
.kw-product-page .kw-ansprechpartner__contact {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 13px;
}
.kw-product-page .kw-ansprechpartner__contact li {
	display: flex;
	gap: 8px;
	align-items: baseline;
	margin-bottom: 3px;
}
.kw-product-page .kw-ansprechpartner__contact span {
	color: var(--kw-sand);
	font-family: 'Josefin Sans', sans-serif;
	font-size: 10px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	min-width: 80px;
}
.kw-product-page .kw-ansprechpartner__contact strong { color: var(--kw-text); }
.kw-product-page .kw-ansprechpartner__fallback {
	grid-column: 1 / -1;
	margin-top: 4px;
	padding: 8px 10px;
	font-size: 11.5px;
	font-style: italic;
	color: var(--kw-bordeaux);
	background: rgba(151,35,63,.06);
	border-radius: 6px;
}
.kw-product-page .kw-form__panel {
	background: #fff;
	border-radius: var(--kw-radius);
	padding: 28px;
	box-shadow: var(--kw-shadow-md);
	border-top: 4px solid var(--kw-bordeaux);
}

/* ---------- Related (Block 11) — 4:5 Cards ---------- */
.kw-product-page .kw-related {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .kw-product-page .kw-related { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .kw-product-page .kw-related { grid-template-columns: repeat(3, 1fr); } }
.kw-product-page .kw-related__card {
	background: #fff;
	border-radius: var(--kw-radius);
	overflow: hidden;
	box-shadow: var(--kw-shadow-sm);
	display: flex;
	flex-direction: column;
	transition: transform var(--kw-transition), box-shadow var(--kw-transition);
}
.kw-product-page .kw-related__card:hover {
	transform: translateY(-6px);
	box-shadow: var(--kw-shadow-hover);
}
.kw-product-page .kw-related__media {
	aspect-ratio: 4 / 5;
	background: #fff;
	border-bottom: 1px solid var(--kw-border);
}
.kw-product-page .kw-related__inner {
	width: 100%; height: 100%;
	display: flex;
}
.kw-product-page .kw-related__inner .kw-placeholder { border: 0; }
.kw-product-page .kw-related__inner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 12%;
	background: #fff;
	box-sizing: border-box;
}
.kw-product-page .kw-related__body { padding: 20px 22px 26px; }
.kw-product-page .kw-related__body h3 {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin: 0 0 14px;
	color: var(--kw-text);
}
.kw-product-page .kw-related__specs {
	list-style: none;
	padding: 0;
	margin: 0 0 18px;
	display: flex;
	gap: 18px;
}
.kw-product-page .kw-related__specs li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.8px;
	color: var(--kw-text);
}
.kw-product-page .kw-related__specs img { width: 22px; height: 22px; opacity: 0.7; }
.kw-product-page .kw-related__link {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--kw-bordeaux);
}
.kw-product-page .kw-related__link:hover { color: var(--kw-bordeaux-dark); }

/* Sticky-CTA: ausgelagert in components.css (.kw-sticky-cta — Issue #283).
   body-padding wird via body.kw-has-sticky-cta gesetzt. */

/* ============================================================
   BLOCK 2b — SBS / Sonderbremssystem (Issue #408)
   Stop-Motion-Sequenz „Bringen" (4:5 hoch, pingpong).
   Anziehen-Use-Case per ACF-Toggle abschaltbar (Asset-Lücke).
   ============================================================ */
.kw-sbs { background: #f5f3ee; }
.kw-sbs .kw-section-head { max-width: 780px; margin: 0 auto 32px; text-align: center; }
/* Single-Case: Section-Head an Image-Breite (480px) angleichen statt 780px, sonst wirkt der breite Heading-Block links-versetzt. */
.kw-sbs:has(.kw-sbs__usecases--single) .kw-section-head { max-width: 560px; }
/* SBS-Overline prominenter — Pille in Bordeaux statt zarter Sand-Text. */
.kw-product-page .kw-sbs .kw-overline {
	display: inline-block;
	background: var(--kw-bordeaux);
	color: #fff;
	padding: 6px 14px;
	border-radius: 4px;
	font-size: 13px;
	letter-spacing: 2px;
	margin-bottom: 18px;
}
.kw-sbs__usecases {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	max-width: 1080px;
	margin: 0 auto;
}
@media (min-width: 768px) {
	.kw-sbs__usecases { grid-template-columns: 1fr 1fr; gap: 48px; }
	.kw-sbs__usecases--single { grid-template-columns: minmax(0, 480px); justify-content: center; }
}
.kw-sbs__case {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: stretch;
}
.kw-sbs__caption {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.25;
	margin: 0;
	color: var(--kw-bordeaux, #6e1d2a);
}
.kw-sbs__body {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: #2b2620;
}
.kw-sbs__media {
	position: relative;
	width: 100%;
	margin: 8px 0 0;
	overflow: hidden;
	background: #e9e4dc;
	border-radius: 4px;
}
.kw-sbs__media--4x5 { aspect-ratio: 4 / 5; }
/* Wenn der Container auch .kw-stop-motion ist, hat dieser aspect-ratio via --kw-sm-aspect.
   Damit kein Konflikt: ratio-Wert ist identisch (4/5). */
.kw-sbs__media .kw-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e9e4dc;
}
.kw-sbs__media .kw-placeholder__chip {
	background: rgba(255,255,255,0.85);
	padding: 8px 14px;
	font-size: 12px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #6b6357;
	border-radius: 2px;
}

/* ============================================================
   BLOCK 2 — BENEFITS Card-Grid (Issue #416)
   WAS:   Pro Bauart 2 Benefit-Cards (Headline + Subtext + optional Eyebrow-Pille).
   WARUM: Vorher textlastig (H3 + Absatz untereinander). Card-Grid liefert
          visuellen Anker pro Sektion (Design-Gate) und konsistenten Look zu
          den anderen Card-Grids (.kw-card / archive-cards). Mobile 1col,
          Tablet+ 2col — passt zur 2-Cards-pro-Bauart-Datenlage.
          .kw-card-Basis ist scoped genug (kein Bild, kein Hover-Lift hier —
          die Card ist nicht klickbar, daher reduzieren wir das Verhalten).
   ============================================================ */
.kw-product-page .kw-benefits--grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 768px) {
	.kw-product-page .kw-benefits--grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}
}
.kw-product-page .kw-benefits--grid .kw-benefit-card {
	/* Override generischer .kw-card-Hover-Lift — die Card ist nicht klickbar.
	   Look (Shadow, Radius, Body) bleibt geerbt von .kw-card. */
	transition: none;
}
.kw-product-page .kw-benefits--grid .kw-benefit-card:hover {
	transform: none;
	box-shadow: var(--kw-shadow-sm, 0 2px 8px rgba(76,71,38,0.06));
}
.kw-product-page .kw-benefit-card__body {
	padding: clamp(20px, 3vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.kw-product-page .kw-benefit-card__tag {
	align-self: flex-start;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.kw-product-page .kw-benefit-card__icon {
	width: 14px;
	height: 14px;
	display: inline-block;
	flex-shrink: 0;
}
.kw-product-page .kw-benefit-card__title {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 700;
	font-size: clamp(20px, 2.4vw, 24px);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	line-height: 1.2;
	margin: 0;
	color: var(--kw-text);
}
.kw-product-page .kw-benefit-card__desc {
	font-family: 'PT Serif', Georgia, serif;
	font-size: 15px;
	line-height: 1.65;
	color: var(--kw-text-soft);
	margin: 0;
}