/**
 * Sektionen. Gestylt wird ausschließlich über die Row-Klasse, die im Page Builder
 * unter „Row → Attribute → Row Class“ gesetzt wird. Die Design-Tabs der Widgets
 * bleiben leer. Jede Sektion funktioniert für sich – fehlt eine Row, fehlt nur
 * ihr Abschnitt.
 *
 * Reihenfolge: gemeinsame Row-Basis, dann Sektion für Sektion.
 */

/* ============================================================ Row-Basis === */

/*
 * Jede Zeile läuft in voller Breite (Hintergrund randlos), der Inhalt bleibt
 * mittig im Raster. Das ersetzt SiteOrigins eigene Randlogik: bei row_stretch
 * setzt SiteOrigin negative Außenabstände per Inline-Style – die werden hier
 * zurückgenommen, sonst rutscht der Inhalt links aus dem Bild.
 */
.pp-row {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	padding-block: var(--pp-section-y);
	/* !important, weil SiteOrigin bei gestreckten Zeilen Inline-Padding setzt. */
	padding-inline: max( var(--pp-gutter), calc( (100% - var(--pp-max)) / 2 ) ) !important;
}

.pp-row--tight { padding-block: var(--pp-section-y-tight); }

.pp-row > .panel-grid-cell,
.pp-row .panel-grid-cell { min-width: 0; }

/* SiteOrigin-Wrapper dürfen nicht zusätzlich begrenzen oder überstehen. */
.pp-fullwidth .panel-layout,
.pp-fullwidth .siteorigin-panels-stretch { max-width: 100%; }

body { overflow-x: hidden; }

/* Dunkle Zeilen */
.pp-row--dark,
.pp-row--hero {
	background: var(--pp-ink);
	color: var(--pp-on-dark);
}

.pp-row--dark h1, .pp-row--dark h2, .pp-row--dark h3,
.pp-row--hero h1, .pp-row--hero h2, .pp-row--hero h3 { color: var(--pp-on-dark); }

.pp-row--dark .pp-lead,
.pp-row--hero .pp-lead { color: var(--pp-on-dark-soft); }

.pp-row--dark a:not(.pp-btn),
.pp-row--hero a:not(.pp-btn) { color: var(--pp-on-dark); }

.pp-row--dark a:hover,
.pp-row--hero a:hover { color: var(--pp-accent); }

/* =============================================================== Hero ===== */

.pp-row--hero {
	padding-block: 0;
	align-items: stretch !important;
	/* Bild läuft rechts bis an den Rand. */
	padding-right: 0 !important;
	margin-bottom: 0 !important;
}

.pp-row--hero .panel-grid-cell:first-child { align-self: center; }

.pp-row--hero .panel-grid-cell:first-child {
	padding-block: clamp(2rem, 4.5vw, 4rem);
	padding-right: var(--pp-space-6);
}

/* Bildzelle: randlos, volle Zeilenhöhe – SiteOrigin-Abstände an Widget/Absatz raus. */
.pp-row--hero .panel-grid-cell:last-child {
	position: relative;
	padding: 0 !important;
	margin: 0 !important;
	min-height: clamp(260px, 38vw, 520px);
}

.pp-row--hero .panel-grid-cell:last-child .so-panel,
.pp-row--hero .panel-grid-cell:last-child .textwidget,
.pp-row--hero .panel-grid-cell:last-child .siteorigin-widget-tinymce,
.pp-row--hero .panel-grid-cell:last-child p,
.pp-row--hero .panel-grid-cell:last-child figure {
	margin: 0 !important;
	padding: 0 !important;
}

.pp-row--hero .panel-grid-cell:last-child .pp-hero__img {
	position: absolute;
	inset: 0;
	display: block;
	min-height: 0;
}

.pp-row--hero h1 { max-width: 15ch; }
.pp-row--hero .pp-lead { max-width: 46ch; }

.pp-hero__img {
	width: 100%;
	height: 100%;
	min-height: clamp(260px, 38vw, 520px);
	object-fit: cover;
	object-position: 50% 20%;
	/* Fehlt das Bild noch, bleibt der Alt-Text lesbar statt unsichtbar auf Dunkel. */
	color: var(--pp-on-dark-soft);
	font-size: var(--pp-text-sm);
}

.pp-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pp-space-3);
	margin-top: var(--pp-space-6);
}

.pp-btn--ghost-light {
	background: rgba(251, 249, 246, 0.12);
	border: var(--pp-border) solid rgba(251, 249, 246, 0.4);
	color: var(--pp-paper);
}

.pp-btn--ghost-light:hover {
	background: rgba(251, 249, 246, 0.2);
	color: var(--pp-paper);
}

/* ==================================================== Vorteilsleiste ====== */

.pp-row--trust {
	padding-block: var(--pp-space-4);
	border-bottom: var(--pp-border) solid var(--pp-line);
}

.pp-row--trust .panel-grid-cell + .panel-grid-cell { padding-left: var(--pp-space-5); }

.pp-row--trust .panel-grid-cell {
	padding-left: var(--pp-space-4);
	border-left: var(--pp-border) solid var(--pp-line);
}

.pp-row--trust .panel-grid-cell:first-child {
	padding-left: 0;
	border-left: 0;
}

.pp-trust {
	margin: 0;
	font-size: 0.9rem;
	font-weight: var(--pp-weight-medium);
}

/* ================================================= Kategoriekacheln ======= */

.pp-cardlink {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--pp-surface);
	border: var(--pp-border) solid var(--pp-line);
	border-radius: var(--pp-radius-l);
	overflow: hidden;
	transition: border-color var(--pp-dur-fast) var(--pp-ease);
}

.pp-cardlink:hover { border-color: var(--pp-ink); color: var(--pp-ink); }

.pp-cardlink img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	overflow: hidden;
	background: var(--pp-paper-2);
	font-size: var(--pp-text-xs);
	color: var(--pp-muted);
}

.pp-cardlink__body {
	display: flex;
	flex-direction: column;
	gap: var(--pp-space-2);
	padding: var(--pp-space-5);
	flex: 1;
}

.pp-cardlink__title {
	font-family: var(--pp-font-display);
	font-weight: var(--pp-weight-display);
	font-size: var(--pp-h3);
	letter-spacing: var(--pp-tracking-tight);
}

.pp-cardlink__text { color: var(--pp-muted); }

.pp-cardlink .pp-price { margin-top: auto; padding-top: var(--pp-space-3); }

/* Preisausgabe des Shortcodes [pp_ab_preis] */
.pp-price { font-weight: var(--pp-weight-strong); }
.pp-price__prefix { font-weight: var(--pp-weight-text); color: var(--pp-muted); }
.pp-price__note {
	display: block;
	font-size: var(--pp-text-xs);
	font-weight: var(--pp-weight-text);
	color: var(--pp-muted);
}

/* ====================================================== Vorteilsblock ===== */

.pp-benefits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
	gap: var(--pp-space-6);
	margin-top: var(--pp-space-8);
}

.pp-benefits h3 { font-size: 1.1rem; margin-bottom: var(--pp-space-1); }

.pp-benefits h3::before {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	margin-bottom: var(--pp-space-3);
	border-radius: var(--pp-radius-pill);
	background: var(--pp-accent);
}

.pp-benefits p { margin: 0; color: var(--pp-on-dark-soft); }

/* ======================================================= Referenzlogos ==== */

.pp-row--logos .panel-grid-cell { display: flex; align-items: center; }
.pp-row--logos .panel-grid-cell > .so-panel,
.pp-row--logos .panel-grid-cell .widget,
.pp-row--logos .panel-grid-cell .so-widget-sow-editor,
.pp-row--logos .panel-grid-cell .textwidget { width: 100%; margin: 0 !important; }

/* Überschrift-Zeile („Im Einsatz bei“) direkt über den Logos: kein doppelter Abstand. */
.pp-row--tight:has(+ .pp-row--logos) { padding-bottom: 0; }
.pp-row--tight + .pp-row--logos { padding-top: var(--pp-space-4); }

.pp-reflogo {
	display: block;
	box-sizing: border-box;
	width: 100% !important;
	max-width: none !important;
	height: 88px !important;
	padding: var(--pp-space-3);
	object-fit: contain;
	background: var(--pp-surface);
	border: var(--pp-border) solid var(--pp-line);
	border-radius: var(--pp-radius-s);
}

/* ============================================================= Teaser ===== */

/* Zwei Teaser nebeneinander: gleiche Höhe, fester Abstand, kein Zellhintergrund. */
.pp-row--teaser { gap: var(--pp-gap-cards); align-items: stretch !important; }

.pp-row--teaser > .panel-grid-cell {
	display: flex;
	flex: 1 1 0 !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
}

.pp-row--teaser > .panel-grid-cell > .so-panel,
.pp-row--teaser .so-panel > .panel-widget-style,
.pp-row--teaser .so-widget-sow-editor,
.pp-row--teaser .siteorigin-widget-tinymce {
	display: flex;
	flex-direction: column;
	flex: 1;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
}

@media (max-width: 780px) {
	.pp-row--teaser { flex-direction: column; }
}

.pp-teaser {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pp-space-4);
	flex: 1;
	width: 100%;
	height: 100%;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--pp-surface);
	border: var(--pp-border) solid var(--pp-line);
	border-radius: var(--pp-radius-l);
}

.pp-teaser--accent {
	background: var(--pp-accent);
	border-color: var(--pp-accent);
	color: var(--pp-ink);
}

.pp-teaser--accent a:not(.pp-btn) { color: var(--pp-ink); }

/*
 * Teaser mit Hintergrundbild. Bild per Inline-Variable setzen:
 * <div class="pp-teaser pp-teaser--accent pp-teaser--image" style="--pp-bg: url(…)">
 * Ein Farbverlauf in Akzentfarbe liegt darüber, damit der Text lesbar bleibt.
 */
.pp-teaser--image {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--pp-accent);
	background-image:
		linear-gradient(100deg,
			color-mix(in srgb, var(--pp-accent) 96%, transparent) 0%,
			color-mix(in srgb, var(--pp-accent) 88%, transparent) 45%,
			color-mix(in srgb, var(--pp-accent) 35%, transparent) 100%),
		var(--pp-bg, none);
	background-size: cover;
	background-position: center;
	border-color: var(--pp-accent);
}

.pp-teaser--image.pp-teaser--dark {
	background-image:
		linear-gradient(100deg,
			color-mix(in srgb, var(--pp-ink) 92%, transparent) 0%,
			color-mix(in srgb, var(--pp-ink) 70%, transparent) 55%,
			color-mix(in srgb, var(--pp-ink) 25%, transparent) 100%),
		var(--pp-bg, none);
}

@media (max-width: 780px) {
	.pp-teaser--image {
		background-image:
			linear-gradient(color-mix(in srgb, var(--pp-accent) 90%, transparent), color-mix(in srgb, var(--pp-accent) 90%, transparent)),
			var(--pp-bg, none);
	}
}

.pp-teaser > * { margin: 0 !important; }
.pp-teaser > h2 { max-width: 20ch; }
/* Button/Link immer unten, auch wenn der Editor die Absätze verschluckt. */
.pp-teaser > p:last-child,
.pp-teaser > .pp-btn,
.pp-teaser > .pp-link { margin-top: auto !important; padding-top: var(--pp-space-2); }
.pp-teaser .pp-btn { display: inline-flex; }

.pp-teaser--dark {
	background: var(--pp-ink);
	border-color: var(--pp-ink);
	color: var(--pp-on-dark);
}

.pp-teaser--dark h2 { color: var(--pp-on-dark); }
.pp-teaser--dark ul { color: var(--pp-on-dark-soft); }

.pp-link {
	display: inline-block;
	padding-bottom: 2px;
	border-bottom: 2px solid var(--pp-accent);
	font-weight: var(--pp-weight-strong);
}

/* ================================================================ FAQ ===== */

.pp-faq {
	max-width: 80ch;
	border-top: var(--pp-border) solid var(--pp-line);
}

.pp-faq details { border-bottom: var(--pp-border) solid var(--pp-line); }

.pp-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pp-space-4);
	padding-block: var(--pp-space-4);
	cursor: pointer;
	list-style: none;
}

.pp-faq summary::-webkit-details-marker { display: none; }

.pp-faq summary::after {
	content: "+";
	font-family: var(--pp-font-display);
	font-size: 1.3rem;
	line-height: 1;
	color: var(--pp-accent-ink);
}

.pp-faq details[open] summary::after { content: "–"; }

.pp-faq summary h3 {
	display: inline;
	margin: 0;
	font-family: var(--pp-font-text);
	font-size: 1.05rem;
	font-weight: var(--pp-weight-strong);
	letter-spacing: 0;
}

.pp-faq__answer {
	padding-bottom: var(--pp-space-4);
	max-width: var(--pp-measure);
	color: var(--pp-muted);
}

/* ======================================================== Seitenkopf ====== */

.pp-row--pagehead { padding-block: var(--pp-space-8) var(--pp-space-4); }
.pp-row--pagehead .pp-geo { margin-top: var(--pp-space-5); }

.pp-entry__header { margin-block: var(--pp-space-4) var(--pp-space-6); }
.pp-entry__header > :first-child { margin-top: 0; }

/* ========================================================== Schritte ====== */

.pp-step {
	height: 100%;
	padding: var(--pp-space-6);
	background: var(--pp-surface);
	border: var(--pp-border) solid var(--pp-line);
	border-radius: var(--pp-radius-l);
}

.pp-step__no {
	display: block;
	margin-bottom: var(--pp-space-1);
	font-family: var(--pp-font-display);
	font-weight: var(--pp-weight-display);
	font-size: 1.9rem;
	color: var(--pp-accent-ink);
}

.pp-step h2 { font-size: 1.15rem; }

/* ====================================================== Formularkarte ===== */

.pp-formcard {
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--pp-surface);
	border: var(--pp-border) solid var(--pp-line);
	border-radius: var(--pp-radius-l);
}

.pp-formcard input[type="text"],
.pp-formcard input[type="email"],
.pp-formcard input[type="tel"],
.pp-formcard input[type="number"],
.pp-formcard input[type="date"],
.pp-formcard input[type="file"],
.pp-formcard select,
.pp-formcard textarea {
	width: 100%;
	min-height: var(--pp-control-h);
	padding: var(--pp-space-3) var(--pp-space-4);
	border: var(--pp-border) solid var(--pp-line-strong);
	border-radius: var(--pp-radius-s);
	background: var(--pp-paper);
	font: var(--pp-weight-text) 1rem var(--pp-font-text);
}

.pp-formcard textarea { min-height: 120px; resize: vertical; }

.pp-formcard button[type="submit"],
.pp-formcard input[type="submit"] {
	min-height: var(--pp-control-h-l);
	padding: 0 var(--pp-space-6);
	border: 0;
	border-radius: var(--pp-radius-s);
	background: var(--pp-accent);
	color: var(--pp-ink);
	font: var(--pp-weight-strong) 1rem var(--pp-font-text);
	cursor: pointer;
}

/* Platzhalter, solange kein Formular-Plugin eingesetzt ist */
.pp-note {
	padding: var(--pp-space-3) var(--pp-space-4);
	background: var(--pp-paper-2);
	border-radius: var(--pp-space-2);
	font: var(--pp-weight-medium) 0.8rem var(--pp-font-mono);
	color: var(--pp-muted);
}

/* ============================================================ Galerie ===== */

.pp-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
	gap: var(--pp-space-3);
	margin-bottom: var(--pp-space-6);
}

.pp-gallery img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--pp-radius-s);
}

.pp-about-photo { width: 100%; border-radius: var(--pp-radius-l); }

/* ==================================================== Ratgeber-Artikel ==== */

.pp-row--article .panel-grid-cell:first-child { align-self: start; }

.pp-toc {
	position: sticky;
	top: calc(var(--pp-header-h) + var(--pp-space-4));
	padding: var(--pp-space-5);
	background: var(--pp-paper-2);
	border-radius: var(--pp-radius-l);
}

.pp-toc h2 {
	margin-bottom: var(--pp-space-3);
	font-family: var(--pp-font-text);
	font-size: var(--pp-text-xs);
	font-weight: var(--pp-weight-strong);
	letter-spacing: var(--pp-tracking-label);
	text-transform: uppercase;
	color: var(--pp-muted);
}

.pp-toc ol {
	display: flex;
	flex-direction: column;
	gap: var(--pp-space-2);
	margin: 0;
	padding-left: var(--pp-space-4);
	font-size: 0.95rem;
}

/* Scroll-Spy setzt is-current */
.pp-toc a.is-current {
	font-weight: var(--pp-weight-strong);
	color: var(--pp-accent-ink);
}

.pp-article__meta { color: var(--pp-muted); font-size: var(--pp-text-sm); }

.pp-article__figure {
	margin: 0 0 var(--pp-space-8);
	border-radius: var(--pp-radius-l);
	overflow: hidden;
}

/* ============================================ Produktempfehlung (Affiliate) */

.pp-pick {
	display: grid;
	gap: var(--pp-space-2);
	margin-block: var(--pp-space-5);
	padding: var(--pp-space-5);
	background: var(--pp-surface);
	border: var(--pp-border) solid var(--pp-line);
	border-radius: var(--pp-radius-l);
}

.pp-pick > * { margin: 0 !important; }

.pp-pick__label {
	font-size: 0.72rem;
	font-weight: var(--pp-weight-strong);
	letter-spacing: var(--pp-tracking-label);
	text-transform: uppercase;
	color: var(--pp-muted);
}

.pp-pick__name { font-size: 1.15rem; line-height: 1.3; }
.pp-pick__why { color: var(--pp-muted); font-size: 0.95rem; }
.pp-pick__price { font-weight: var(--pp-weight-strong); }

.pp-pick__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pp-space-2) var(--pp-space-4);
	padding-top: var(--pp-space-2);
}

.pp-pick__alt { font-size: var(--pp-text-xs); color: var(--pp-muted); }

/* Eigenes Produkt: Akzentrand, damit es sich von Fremdempfehlungen abhebt. */
.pp-pick--own { border: 2px solid var(--pp-accent); background: var(--pp-paper); }
.pp-pick--own .pp-pick__label { color: var(--pp-ink); }

/* Pflichthinweis für Affiliate-Links */
.pp-disclosure {
	font-size: var(--pp-text-xs);
	line-height: 1.5;
	color: var(--pp-muted);
}

/* ====================================================== Beitragskarten ==== */

.pp-cardgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: var(--pp-gap-cards);
}

.pp-card {
	background: var(--pp-surface);
	border: var(--pp-border) solid var(--pp-line);
	border-radius: var(--pp-radius-l);
	overflow: hidden;
}

.pp-card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pp-card__body { padding: var(--pp-space-5); }

.pp-card__title {
	font-family: var(--pp-font-text);
	font-size: 1.05rem;
	font-weight: var(--pp-weight-strong);
	letter-spacing: 0;
}

.pp-card__excerpt { margin: 0; font-size: 0.92rem; color: var(--pp-muted); }

/* ======================================================== Breakpoints ===== */

@media (max-width: 899px) {
	.pp-toc { position: static; }
	.pp-row--hero .panel-grid-cell:first-child { padding-right: var(--pp-gutter); }
	.pp-row--hero .panel-grid-cell:last-child { margin-left: calc(-1 * var(--pp-gutter)) !important; }
}

@media (max-width: 639px) {
	.pp-row--trust .panel-grid-cell {
		padding-left: 0;
		border-left: 0;
		padding-block: var(--pp-space-1);
	}
	.pp-benefits { gap: var(--pp-space-5); }
}