/* ══════════════════════════════════════════════════════════════════════════
   cd-skin.css — Marken-Skin für die Produktseite (CD-Variante)
   Scope: .pd (auf <main class="pd"> der Produktseite cd.html)

   Zweck: Die vereinbarte Struktur bleibt unangetastet — diese Ebene bringt
   jedes Element auf die echte waldner.de-Formensprache:
     · Outline-Buttons, scharfe Ecken (0 Radius), 3px-Rahmen, ▶-Pfeil
     · Sektions-H2 in VERSALIEN (600), Sub-Headlines sentence-case
     · Akkordeon mit [+]-Box-Marker und blauer Trennlinie (statt Chevron)
     · durchgängig scharfe Ecken (Marken-Radius = none)
   Lädt NACH den Komponenten-Stylesheets; .pd erhöht die Spezifität.
   Magazin-Seiten besitzen kein .pd → bleiben unberührt.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Scharfe Ecken (Marken-Radius „none") ─────────────────────────────── */

.pd .btn,
.pd .hero__media,
.pd .hero__media img,
.pd .usecase-card,
.pd .usecase-card__img,
.pd .crosssell-card,
.pd .crosssell-card__img,
.pd .trust__ref,
.pd .trust__norms-panel,
.pd .trust__ref-logo--placeholder,
.pd .trust__ref-photo,
.pd .trust__placeholder-flag,
.pd .faq__list,
.pd .contact__form input,
.pd .contact__form textarea,
.pd .contact__person-img,
.pd .contact__person-img--placeholder,
.pd .specs-table,
.pd .download-list li a {
	border-radius: 0;
}

/* ── 2. Buttons — Marken-Outline, scharf, 3px, mit ▶-Pfeil ───────────────── */

.pd .btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-width: 0.1875rem;        /* 3px — wie Live-Seite */
	font-weight: 600;
	padding: 0.75rem 1.5rem;
	text-transform: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Primary — gefüllt: klare CTA-Hierarchie (wie auf der Live-Seite). */
.pd .btn--primary {
	background: var(--c-primary);
	color: var(--c-white);
	border-color: var(--c-primary);
}

.pd .btn--primary:hover {
	background: var(--c-secondary);
	border-color: var(--c-secondary);
	color: var(--c-white);
}

/* Secondary — Outline: ordnet sich dem Primary unter. */
.pd .btn--secondary {
	background: transparent;
	color: var(--c-primary);
	border-color: var(--c-primary);
}

.pd .btn--secondary:hover {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: var(--c-white);
}

/* ▶ — kleines, gefülltes Dreieck in currentColor (Marken-Signatur) */
.pd .btn--primary::after,
.pd .btn--secondary::after {
	content: "";
	flex-shrink: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.3125rem 0 0.3125rem 0.4375rem;
	border-color: transparent transparent transparent currentColor;
}

/* ── 3. Headings — Sektions-H2 in VERSALIEN, 600 ─────────────────────────── */

.pd .hero__copy h1 {
	text-transform: uppercase;
	font-weight: 700;
	font-size: clamp(1.875rem, 1.1rem + 2.6vw, 2.5rem);
	line-height: 1.12;
	letter-spacing: 0;
}

.pd .usecases__title,
.pd .trust__title,
.pd .tabs-section__title,
.pd .faq__title,
.pd .crosssell__title,
.pd .contact__form-title {
	text-transform: uppercase;
	font-weight: 600;
	font-size: var(--fs-section);
	line-height: 1.15;
	letter-spacing: 0;
	color: var(--c-text);
}

/* Sub-Headlines bleiben sentence-case, etwas größer (Marken-Maß ~27px) */
.pd .tab-panel-content h3,
.pd .trust__norms-title {
	text-transform: none;
	font-weight: 600;
}

/* ── 4. Sticky-CTA-Leiste — scharfe Ecken, ▶ am Button ───────────────────── */

.pd-bar.sticky-cta {
	border-radius: 0;
}

.pd-bar.sticky-cta .btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 0;
}

.pd-bar.sticky-cta .btn--primary::after {
	content: "";
	flex-shrink: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.3125rem 0 0.3125rem 0.4375rem;
	border-color: transparent transparent transparent currentColor;
}

/* ── 5. Stats-Band — Marken-Zahlenfarbe, ruhiger Rhythmus ────────────────── */

.pd .stat__n {
	font-weight: 700;
	color: var(--c-primary);
}

/* ── 6. Use-Case-Cards — Marken-Label, blauer Akzentbalken ───────────────── */

/* Branchen-Sektion liegt jetzt auf dem Navy-Band → Headline hell.
   Überschreibt die dunkle Default-Farbe aus dem geteilten Headline-Block oben
   (gleiche Spezifität, später in der Datei → gewinnt). */
.pd .usecases__title {
	color: var(--c-white);
}

.pd .usecase-card {
	border-color: var(--c-border-light);
}

.pd .usecase-card:hover {
	border-color: var(--c-primary);
}

.pd .usecase-card__solution {
	display: flex;
	gap: 0.4rem;
	align-items: baseline;
}

.pd .usecase-card__solution::before {
	content: "";
	flex-shrink: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.25rem 0 0.25rem 0.375rem;
	border-color: transparent transparent transparent currentColor;
	transform: translateY(0.45rem);
}

/* ── 7. Trust — Zitat-Karte als blaues Feature, Normen-Panel weiß ─────────── */

.pd .trust__ref {
	background: var(--c-primary);
	border-left: none;
}

.pd .trust__ref blockquote {
	color: var(--c-white);
}

.pd .trust__ref blockquote::before {
	color: rgb(var(--c-white-rgb) / 0.5);
}

.pd .trust__ref-meta {
	border-top-color: rgb(var(--c-white-rgb) / 0.2);
}

.pd .trust__ref-name {
	color: var(--c-white);
}

.pd .trust__ref-role {
	color: var(--c-white);
	opacity: 0.85;
}

.pd .trust__ref-result {
	color: var(--c-white);
}

/* ── 8. FAQ — Marken-Akkordeon mit [+]-Box statt Chevron ─────────────────── */

.pd .faq__list {
	border: none;
	background: transparent;
	overflow: visible;
}

.pd .faq__item {
	border: none;
	border-top: 0.125rem solid var(--c-primary);
	background: transparent;
}

.pd .faq__item:last-child {
	border-bottom: 0.125rem solid var(--c-primary);
}

.pd .faq__item summary {
	padding: 1.1rem 0.25rem;
	font-size: 1.0625rem;
	font-weight: 600;
}

.pd .faq__item summary:hover {
	background: transparent;
	color: var(--c-primary);
}

/* [+]-Box: blaue Umrandung + zwei Balken (waagrecht + senkrecht) */
.pd .faq__item summary::after {
	content: "";
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
	background-color: transparent;
	-webkit-mask-image: none;
	mask-image: none;
	border: 0.125rem solid var(--c-primary);
	background-image:
		linear-gradient(var(--c-primary), var(--c-primary)),
		linear-gradient(var(--c-primary), var(--c-primary));
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
	background-size: 0.75rem 0.125rem, 0.125rem 0.75rem;  /* — und | = + */
	transition: background-size 0.2s ease;
	transform: none;
}

/* Geöffnet: senkrechten Balken ausblenden → wird zu „–" */
.pd .faq__item[open] summary::after {
	transform: none;
	background-size: 0.75rem 0.125rem, 0.125rem 0;
}

/* ── 9. Cross-Sell — ▶ statt Pfeil, Marken-Hover ─────────────────────────── */

.pd .crosssell-card:hover {
	border-color: var(--c-primary);
}

.pd .crosssell-card__cta::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.25rem 0 0.25rem 0.375rem;
	border-color: transparent transparent transparent currentColor;
}