/**
 * envitron 2026 - Produkt-Detail-Template
 *
 * Wird nur auf Pages mit Template-Name „Produkt-Detail" enqueued.
 * Erweitert .product-detail um Hero, USP-Grid, Cross-Link-Grid.
 *
 * Prose-Styles fuer .product-detail__body sind in prose.css zentral
 * (gilt fuer Pages, FAQ + Produkt-Detail einheitlich).
 */

/* ===================================================================== */
/* Hero                                                                   */
/* ===================================================================== */
.product-detail__hero {
	position: relative;
	padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 6vw, 5rem);
	background: linear-gradient(180deg, var(--brand-50, #f0fdf4) 0%, var(--white, #ffffff) 100%);
}

.product-detail__hero-inner {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

@media (max-width: 860px) {
	.product-detail__hero-inner { grid-template-columns: 1fr; }
	.product-detail__hero-image { order: -1; }
}

.product-detail__hero-text {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.product-detail__eyebrow { margin: 0; }

.product-detail__title {
	margin: 0;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.1;
	color: var(--ink-900);
	letter-spacing: -0.01em;
}

.product-detail__lead {
	margin: 0;
	color: var(--ink-700);
	font-size: var(--fs-lg);
	line-height: var(--lh-relaxed);
	max-width: 56ch;
}

.product-detail__awards {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin: 0;
}
.product-detail__award {
	position: static;
	top: auto;
	right: auto;
}

.product-detail__cta-row {
	display: flex;
	gap: 0.85rem;
	flex-wrap: wrap;
	margin: 0.75rem 0 0;
}

.product-detail__hero-image {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 12px 32px rgba(15, 23, 32, 0.16);
	background: var(--ink-50);
	aspect-ratio: 4 / 3;
}
.product-detail__hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ===================================================================== */
/* USP-Grid (Auf einen Blick)                                             */
/* ===================================================================== */
.product-detail__usps {
	padding-block: clamp(2.5rem, 6vw, 5rem);
	background: var(--white);
}

/* .section__header lebt jetzt in main.css, damit auch front-page.php
 * (die page-product.css nicht laedt) die zentrierte Default-Variante
 * bekommt. Hier nur produktspezifische Erweiterungen. */

.usp-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.usp-card {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-items: start;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background: var(--white);
	border: 1px solid var(--ink-300);
	border-radius: var(--radius-lg);
	transition: border-color var(--transition-fast), transform var(--transition-med), box-shadow var(--transition-med);
}
.usp-card:hover {
	transform: translateY(-2px);
	border-color: var(--brand-300);
	box-shadow: 0 8px 24px -16px rgba(40, 167, 69, 0.35);
}

.usp-card__icon {
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--brand-50);
	color: var(--brand-700);
	border-radius: 999px;
	flex-shrink: 0;
}
.usp-card__icon svg { width: 1.2rem; height: 1.2rem; }

.usp-card__body { display: grid; gap: 0.4rem; }
.usp-card__title {
	margin: 0;
	font-size: var(--fs-md);
	font-weight: 600;
	color: var(--ink-900);
	line-height: 1.3;
}
.usp-card__text {
	margin: 0;
	color: var(--ink-700);
	font-size: 0.95rem;
	line-height: var(--lh-relaxed);
}

/* ===================================================================== */
/* Award-Spotlight - prominenter Award-Block pro Produktseite             */
/*                                                                        */
/* Aufbau:                                                                */
/*  - .award-spotlight__bg : Gold-Verlauf-Hintergrund + Strahlen + Shine  */
/*  - .award-spotlight__medal : freigestellte Medaille (groß, schwebend)  */
/*  - .award-spotlight__text  : Eyebrow, Title, Sub-Text, Tag-Pillen      */
/* ===================================================================== */
.award-spotlight {
	position: relative;
	overflow: hidden;
	color: var(--white);
	isolation: isolate;
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

/* Default-Token-Style "gold" - kann durch andere Modifier ueberschrieben. */
.award-spotlight,
.award-spotlight--gold {
	--spot-color-1: #b8842b;
	--spot-color-2: #f3c34b;
	--spot-color-3: #d4a93a;
	--spot-color-4: #7a5414;
	background:
		radial-gradient(120% 80% at 18% 30%, rgba(255, 232, 161, 0.55) 0%, transparent 55%),
		linear-gradient(135deg, var(--spot-color-1) 0%, var(--spot-color-2) 45%, var(--spot-color-3) 78%, var(--spot-color-4) 100%);
}
/* Innovation LEBEN (Bayern Innovativ) - warmes Orange-Rot */
.award-spotlight--leben {
	--spot-color-1: #7a2d18;
	--spot-color-2: #d65f2b;
	--spot-color-3: #b14318;
	--spot-color-4: #4a1a0c;
	background:
		radial-gradient(120% 80% at 18% 30%, rgba(255, 215, 170, 0.45) 0%, transparent 55%),
		linear-gradient(135deg, var(--spot-color-1) 0%, var(--spot-color-2) 45%, var(--spot-color-3) 78%, var(--spot-color-4) 100%);
}
/* German Business Award - Business Royal-Blau */
.award-spotlight--business {
	--spot-color-1: #0e2050;
	--spot-color-2: #2a4f9e;
	--spot-color-3: #1d3a7a;
	--spot-color-4: #0a1a3c;
	background:
		radial-gradient(120% 80% at 18% 30%, rgba(180, 200, 255, 0.42) 0%, transparent 55%),
		linear-gradient(135deg, var(--spot-color-1) 0%, var(--spot-color-2) 45%, var(--spot-color-3) 78%, var(--spot-color-4) 100%);
}

.award-spotlight__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}
.award-spotlight__rays {
	position: absolute;
	top: 50%;
	left: 22%;
	width: 90rem;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	background:
		conic-gradient(
			from 0deg,
			rgba(255, 255, 255, 0)    0deg  10deg,
			rgba(255, 255, 255, 0.10) 10deg 20deg,
			rgba(255, 255, 255, 0)    20deg 40deg,
			rgba(255, 255, 255, 0.10) 40deg 48deg,
			rgba(255, 255, 255, 0)    48deg 70deg,
			rgba(255, 255, 255, 0.10) 70deg 78deg,
			rgba(255, 255, 255, 0)    78deg 100deg,
			rgba(255, 255, 255, 0.10) 100deg 108deg,
			rgba(255, 255, 255, 0)    108deg 360deg
		);
	mask-image: radial-gradient(circle, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 70%);
	-webkit-mask-image: radial-gradient(circle, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 70%);
	opacity: 0.55;
}
.award-spotlight__shine {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(45% 60% at 100% 0%, rgba(255, 255, 255, 0.20) 0%, transparent 60%),
		radial-gradient(40% 50% at 0% 100%, rgba(0, 0, 0, 0.15) 0%, transparent 60%);
}

.award-spotlight__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(200px, 340px) 1fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}
.award-spotlight--wide .award-spotlight__inner { grid-template-columns: minmax(240px, 420px) 1fr; }
.award-spotlight--tall .award-spotlight__inner { grid-template-columns: minmax(220px, 360px) 1fr; }

@media (max-width: 720px) {
	.award-spotlight__inner,
	.award-spotlight--wide .award-spotlight__inner,
	.award-spotlight--tall .award-spotlight__inner {
		grid-template-columns: 1fr;
		text-align: center;
		justify-items: center;
	}
}

.award-spotlight__medal {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	filter:
		drop-shadow(0 14px 22px rgba(0, 0, 0, 0.32))
		drop-shadow(0 0 24px rgba(255, 220, 130, 0.55));
	animation: award-medal-float 6s ease-in-out infinite;
}
.award-spotlight__medal img {
	width: 100%;
	height: auto;
	display: block;
}

/* Pro Aspect-Ratio das Bild gezielt sizen */
.award-spotlight--square .award-spotlight__medal img { max-width: 340px; }
.award-spotlight--wide   .award-spotlight__medal img { max-width: 420px; }
.award-spotlight--tall   .award-spotlight__medal img { max-width: 320px; }

/* Glow-Farbe pro Token: blau fuer leben, royal fuer business */
.award-spotlight--leben .award-spotlight__medal {
	filter:
		drop-shadow(0 14px 22px rgba(0, 0, 0, 0.40))
		drop-shadow(0 0 28px rgba(255, 180, 130, 0.45));
}
.award-spotlight--business .award-spotlight__medal {
	filter:
		drop-shadow(0 14px 22px rgba(0, 0, 0, 0.40))
		drop-shadow(0 0 28px rgba(140, 180, 255, 0.45));
}

@keyframes award-medal-float {
	0%, 100% { transform: translateY(0) rotate(-1deg); }
	50%      { transform: translateY(-8px) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
	.award-spotlight__medal { animation: none; }
}

.award-spotlight__text {
	display: grid;
	gap: var(--space-3);
	max-width: 60ch;
}
.award-spotlight__eyebrow {
	margin: 0;
	font-size: 0.8rem;
	letter-spacing: 0.16em;
	font-weight: 700;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}
.award-spotlight__title {
	margin: 0;
	font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--white);
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}
.award-spotlight__sub {
	margin: 0;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92);
}
.award-spotlight__tags {
	list-style: none;
	padding: 0;
	margin: var(--space-3) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
@media (max-width: 720px) {
	.award-spotlight__tags { justify-content: center; }
}
.award-spotlight__tags li {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.8rem;
	background: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--white);
}

/* ===================================================================== */
/* Body - nur gerendert, wenn $has_real_content TRUE ist.                */
/* ===================================================================== */
.product-detail__body {
	padding-block: clamp(2.5rem, 6vw, 5rem);
	background: var(--ink-50);
}

/* ===================================================================== */
/* Sibling Cross-Links                                                    */
/* ===================================================================== */
.product-detail__siblings {
	padding-block: clamp(3rem, 6vw, 5rem);
	background: var(--ink-50);
}

.product-grid--compact {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: 1.25rem;
}
.product-grid--compact .product-card { background: var(--white); }
.product-grid--compact .product-card__body {
	padding: 1rem 1.1rem 1.25rem;
	gap: 0.45rem;
}
.product-grid--compact .product-card__title { font-size: 1rem; }

/* -------------------------------------------------------------------------
 * Detail-Blocks (.product-detail-block)
 * Konsistentes 2-spaltiges Layout fuer die "Im Detail"-Sektionen.
 * Alternierend weiss / grau (via section--alt). Mit oder ohne Bild.
 * ------------------------------------------------------------------------- */
.product-detail-block .container {
	max-width: var(--wide-width, 1290px);
}
.product-detail-block__grid {
	display: grid;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
}
.product-detail-block--with-image .product-detail-block__grid {
	grid-template-columns: 1.1fr 1fr;
}
.product-detail-block--with-specs .product-detail-block__grid {
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
}
.product-detail-block--text-only .product-detail-block__grid {
	grid-template-columns: minmax(0, 80ch);
	max-width: 80ch;
}
/* Text-only-Blocks sollen nicht so monumental wirken wie Image-/Spec-Blocks
 * - sie sind blosse Prosa-Absaetze und brauchen weniger vertikale Wucht. */
.product-detail-block--text-only {
	padding-block: clamp(1.75rem, 3.5vw, 3rem);
}
.product-detail-block__grid--reverse .product-detail-block__copy {
	order: 2;
}
.product-detail-block__grid--reverse .product-detail-block__media {
	order: 1;
}

.product-detail-block__title {
	font-size: clamp(1.25rem, 1rem + 0.7vw, 1.6rem);
	margin: 0 0 0.75em;
	color: var(--ink, #08213b);
	text-wrap: balance;
	position: relative;
	padding-block-start: 0.6em;
}
/* Dezenter Brand-Akzent ueber dem Titel - bringt etwas Pepp ohne den
 * Block zu ueberladen. Nur auf Text-only-Blocks (mit specs/image sieht
 * die Karte ohnehin reicher aus). */
.product-detail-block--text-only .product-detail-block__title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2.5rem;
	height: 3px;
	border-radius: 999px;
	background: var(--brand-500, #2aa84a);
}
.product-detail-block__body p {
	font-size: clamp(0.96rem, 0.92rem + 0.15vw, 1.04rem);
	line-height: 1.65;
	color: var(--ink-700, #314357);
	margin: 0;
	text-wrap: pretty;
	hyphens: auto;
	overflow-wrap: break-word;
}
.product-detail-block__body p + p { margin-top: 0.85em; }
.product-detail-block__body a {
	color: var(--brand-600, #1c7430);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.product-detail-block__body a:hover,
.product-detail-block__body a:focus-visible {
	color: var(--brand-700, #145626);
}

.product-detail-block__media {
	margin: 0;
	overflow: hidden;
	border-radius: 14px;
	background: var(--bg-surface, #fff);
	box-shadow: 0 18px 40px rgba(8, 33, 59, 0.08);
	border: 1px solid var(--border-light, rgba(8, 33, 59, 0.08));
}
.product-detail-block__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.product-detail-block__media-link {
	display: block;
	position: relative;
	overflow: hidden;
	cursor: zoom-in;
	outline: none;
}
.product-detail-block__media-link:focus-visible {
	outline: 3px solid var(--brand-500, #2aa84a);
	outline-offset: 4px;
	border-radius: 14px;
}
.product-detail-block__media-link:hover img,
.product-detail-block__media-link:focus-visible img {
	transform: scale(1.025);
}
/* Lupe-Hint oben rechts beim Hover. */
.product-detail-block__media-link::after {
	content: "";
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.95) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a3a5b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") center / 18px no-repeat;
	box-shadow: 0 4px 12px rgba(8, 33, 59, 0.2);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}
.product-detail-block__media-link:hover::after,
.product-detail-block__media-link:focus-visible::after {
	opacity: 1;
	transform: translateY(0);
}

/* Auf dunklen / alternierenden Sektionen sieht die Karte aerodynamischer aus */
.product-detail-block.section--alt .product-detail-block__media {
	background: var(--white, #fff);
}

@media (max-width: 820px) {
	.product-detail-block--with-image .product-detail-block__grid,
	.product-detail-block--with-specs .product-detail-block__grid {
		grid-template-columns: 1fr;
	}
	.product-detail-block__grid--reverse .product-detail-block__copy { order: 1; }
	.product-detail-block__grid--reverse .product-detail-block__media { order: 2; }
}

/* -------------------------------------------------------------------------
 * Inline-Specs-Karte (.product-detail-block__specs)
 * Rechte Spalte in .product-detail-block--with-specs - graue Card mit
 * "Technische Daten"-Heading + Key-Value-Liste mit Brand-Bullets.
 * In dieser Variante wird auch die Copy-Seite zur grauen Card, damit
 * beide Spalten visuell als Paar lesbar sind (Pattern aus Live-Site).
 * ------------------------------------------------------------------------- */
.product-detail-block--with-specs .product-detail-block__copy {
	background: var(--ink-50, #f2f4f7);
	padding: clamp(1.25rem, 2.5vw, 2rem);
	border-radius: 14px;
	box-shadow: 0 1px 0 rgba(8, 33, 59, 0.04);
	align-self: stretch;
}
.product-detail-block--with-specs.section--alt .product-detail-block__copy {
	background: var(--white, #fff);
}
.product-detail-block--with-specs .product-detail-block__title {
	font-size: clamp(1.25rem, 1rem + 0.8vw, 1.65rem);
	margin: 0 0 0.6em;
	padding-bottom: 0.4em;
	border-bottom: 2px solid var(--brand-500, #2aa84a);
	display: inline-block;
}
.product-detail-block--with-specs .product-detail-block__body p {
	font-size: 0.95rem;
	line-height: 1.65;
	margin: 0 0 0.85em;
}

.product-detail-block__specs {
	background: var(--ink-50, #f2f4f7);
	padding: clamp(1.25rem, 2.5vw, 2rem);
	border-radius: 14px;
	box-shadow: 0 1px 0 rgba(8, 33, 59, 0.04);
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	align-self: stretch;
}
.product-detail-block.section--alt .product-detail-block__specs {
	background: var(--white, #fff);
}
.product-detail-block__specs-title {
	margin: 0 0 0.4em;
	font-size: 1rem;
	font-weight: 700;
	color: var(--ink, #08213b);
}
.product-detail-block__specs-list {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}
.product-detail-block__specs-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1rem;
	align-items: baseline;
	padding-left: 1.25rem;
	position: relative;
	font-size: 0.9rem;
	line-height: 1.5;
}
/* Gruener Bullet-Indikator vor jedem Spec-Item (Brand-Akzent). */
.product-detail-block__specs-row::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--brand-500, #2aa84a);
}
.product-detail-block__specs-row dt {
	font-weight: 500;
	color: var(--ink-700, #40495d);
	margin: 0;
}
.product-detail-block__specs-row dd {
	margin: 0;
	color: var(--ink, #08213b);
	font-weight: 600;
	text-align: right;
}
@media (max-width: 520px) {
	.product-detail-block__specs-row {
		grid-template-columns: 1fr;
		gap: 0.2rem;
	}
	.product-detail-block__specs-row dd {
		text-align: left;
	}
}

/* -------------------------------------------------------------------------
 * Technische Daten (.product-tech-specs)
 * Eine oder mehrere Key-Value-Karten in einem responsiven Grid.
 * ------------------------------------------------------------------------- */
.product-tech-specs .container {
	max-width: var(--wide-width, 1290px);
}
.tech-specs-grid {
	display: grid;
	grid-template-columns: minmax(0, 720px);
	gap: clamp(1.25rem, 2.5vw, 2rem);
	justify-content: center;
}
.tech-specs-grid--multi {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
	justify-content: stretch;
}

.tech-specs-card {
	background: var(--white, #fff);
	border: 1px solid var(--border-light, rgba(8, 33, 59, 0.08));
	border-radius: 14px;
	padding: clamp(1.25rem, 2vw, 2rem) clamp(1.25rem, 2vw, 2rem);
	box-shadow: 0 8px 24px rgba(8, 33, 59, 0.04);
}
.tech-specs-card__label {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--brand-700, #145626);
	margin: 0 0 1rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--brand-100, #d4f0db);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.tech-specs-list {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}
.tech-specs-list__row {
	display: grid;
	grid-template-columns: minmax(120px, 0.85fr) minmax(0, 1.15fr);
	gap: 1rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--border-light, rgba(8, 33, 59, 0.06));
	align-items: baseline;
}
.tech-specs-list__row:last-child {
	border-bottom: 0;
}
.tech-specs-list dt {
	color: var(--ink-600, #475569);
	font-size: 0.9rem;
	font-weight: 500;
}
.tech-specs-list dd {
	margin: 0;
	color: var(--ink, #08213b);
	font-size: 0.95rem;
	font-weight: 600;
	overflow-wrap: break-word;
}

@media (max-width: 540px) {
	.tech-specs-list__row {
		grid-template-columns: 1fr;
		gap: 0.15rem;
		padding: 0.65rem 0;
	}
	.tech-specs-list dt {
		font-size: 0.82rem;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.product-detail__hero,
	.product-detail__hero-image img,
	.usp-card { transition: none; transform: none; }
}