/*
 * Pipeline-Komponenten (WPP Companion). Farben, Schriften und Abstände kommen aus theme.json.
 * Farbslots: base, contrast, accent-1 (Primär), accent-2 (Akzent), accent-4 (gedämpfter Text),
 * accent-5 (helle Fläche), accent-6 (Rahmen). Textfarbe auf Flächen über settings.custom.wpp.
 */
.wpp {
	--wpp-primary: var(--wp--preset--color--accent-1, #1b45a9);
	--wpp-accent: var(--wp--preset--color--accent-2, #ff6a11);
	--wpp-muted: var(--wp--preset--color--accent-5, #f3f6fb);
	--wpp-border: var(--wp--preset--color--accent-6, rgba(0, 0, 0, .12));
	--wpp-contrast: var(--wp--preset--color--contrast, #111);
	--wpp-base: var(--wp--preset--color--base, #fff);
	--wpp-on-primary: var(--wp--custom--wpp--on-primary, #fff);
	--wpp-on-accent: var(--wp--custom--wpp--on-accent, #fff);
	--wpp-on-contrast: var(--wp--custom--wpp--on-contrast, #fff);
	--wpp-radius: var(--wp--custom--wpp--radius, 10px);
	--wpp-gap: var(--wp--preset--spacing--50, 2rem);
	--wpp-pad: var(--wp--preset--spacing--60, 3.5rem);
}
.wpp.wpp { margin-block: 0; padding-block: var(--wpp-pad); }
.wpp > .wpp__inner > :first-child { margin-top: 0; }
.wpp p:last-child { margin-bottom: 0; }
.wpp :is(h1, h2, h3) { overflow-wrap: break-word; hyphens: auto; }

/* Flächen */
.wpp.has-wpp-bg { padding-inline: var(--wpp-pad); }
/* Vollbreite Flächen: Inhalt bündig mit der Breite "wide" (100% = Breite des Elternelements). */
.wpp.has-wpp-bg.alignfull {
	padding-inline: max(
		var(--wp--style--root--padding-left, 1.5rem),
		calc((100% + 2 * var(--wp--style--root--padding-left, 0px) - var(--wp--style--global--wide-size, 1200px)) / 2)
	);
}
.has-wpp-bg-base { background: var(--wpp-base); }
.has-wpp-bg-muted { background: var(--wpp-muted); }
.has-wpp-bg-primary { background: var(--wpp-primary); color: var(--wpp-on-primary); }
.has-wpp-bg-accent { background: var(--wpp-accent); color: var(--wpp-on-accent); }
.has-wpp-bg-contrast { background: var(--wpp-contrast); color: var(--wpp-on-contrast); }
.has-wpp-bg-primary :is(h1, h2, h3, h4, a:not(.wp-element-button)),
.has-wpp-bg-accent :is(h1, h2, h3, h4, a:not(.wp-element-button)),
.has-wpp-bg-contrast :is(h1, h2, h3, h4, a:not(.wp-element-button)) { color: inherit; }
.wpp:not(.alignfull).has-wpp-bg { border-radius: var(--wpp-radius); }

/* Lesbare Textbreite in breiten Abschnitten */
.wpp-section > .wpp__inner > *, .wpp-faq__list { max-width: 52rem; }

/* Kopf eines Abschnitts */
.wpp-head { max-width: 48rem; margin-bottom: var(--wpp-gap); }
.wpp-eyebrow {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: var(--wp--preset--font-size--small, .875rem);
	margin: 0 0 .75rem;
	opacity: .85;
}

/* Buttons (Grundstil aus theme.json, hier nur Varianten) */
.wpp-buttons { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--wp--preset--spacing--40, 1.5rem); }
.wpp-button--secondary { background: transparent !important; color: inherit !important; box-shadow: inset 0 0 0 2px currentColor; }
.has-wpp-bg-primary .wpp-button--primary,
.has-wpp-bg-accent .wpp-button--primary,
.has-wpp-bg-contrast .wpp-button--primary { background: var(--wpp-base) !important; color: var(--wpp-primary) !important; }

/* Haken-Listen */
.wpp-checklist { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.wpp-checklist li { position: relative; padding: .55rem 0 .55rem 1.9rem; border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.wpp-checklist li::before {
	content: ""; position: absolute; left: 0; top: .8rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
	background: var(--wpp-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 75% no-repeat;
}
.wpp-hero__features li { font-weight: 700; }

/* Hero */
.wpp-hero.is-split { padding: 0 !important; }
.wpp-hero.is-split > .wpp__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(420px, 60vh, 640px); }
.wpp-hero__media { position: relative; min-height: 280px; background: var(--wpp-muted); }
.wpp-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.wpp-hero__text { padding: clamp(2rem, 5vw, 4.5rem); display: flex; flex-direction: column; justify-content: center; }
.wpp-hero.is-text-only .wpp-hero__text { padding-inline: 0; max-width: 52rem; }
.wpp-hero h1 { margin: 0 0 1rem; font-size: var(--wp--custom--wpp--hero-heading-size, clamp(1.9rem, 3.4vw, 3rem)); line-height: 1.15; }

/* Raster und Karten */
.wpp-grid { display: grid; gap: var(--wpp-gap); }
.wpp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wpp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wpp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wpp-item { padding: var(--wp--preset--spacing--40, 1.75rem); background: var(--wpp-base); color: var(--wpp-contrast); border: 1px solid var(--wpp-border); border-radius: var(--wpp-radius); }
.wpp-item h3 { margin: 0 0 .5rem; font-size: var(--wp--preset--font-size--large, 1.25rem); }
.wpp-item__media--icon img { width: 88px; height: 88px; object-fit: contain; margin-bottom: 1rem; border-radius: 0; }
.wpp-item__media--cover { margin: calc(-1 * var(--wp--preset--spacing--40, 1.75rem)) calc(-1 * var(--wp--preset--spacing--40, 1.75rem)) 1.25rem; }
.wpp-item__media--cover img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--wpp-radius) var(--wpp-radius) 0 0; }
.wpp-process .wpp-item { border: 0; border-top: 4px solid var(--wpp-accent); border-radius: 0; background: transparent; color: inherit; padding-inline: 0; }
.wpp-process .wpp-item h3 { color: var(--wpp-primary); }

/* FAQ als Akkordeon */
.wpp-faq__list { border-top: 1px solid var(--wpp-border); }
.wpp-faq__item { border-bottom: 1px solid var(--wpp-border); }
.wpp-faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; }
.wpp-faq__item summary::-webkit-details-marker { display: none; }
.wpp-faq__item summary h3 { margin: 0; font-size: var(--wp--preset--font-size--medium, 1.1rem); }
.wpp-faq__item summary::after { content: "+"; font-size: 1.6rem; line-height: 1; color: var(--wpp-accent); transition: transform .2s; }
.wpp-faq__item[open] summary::after { transform: rotate(45deg); }
.wpp-faq__answer { padding: 0 0 1.25rem; max-width: 48rem; }

/* CTA */
.wpp-cta > .wpp__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wpp-gap); }
.wpp-cta .wpp-cta__text { max-width: 44rem; }
.wpp-cta h2 { margin: 0 0 .5rem; }
.wpp-cta .wpp-buttons { margin-top: 0; }

/* Logos */
.wpp-logos__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 2rem; align-items: center; }
.wpp-logos__item img { max-height: 56px; width: auto; margin: 0 auto; display: block; filter: grayscale(1); opacity: .8; border-radius: 0; }

/* Bild und Text */
.wpp-image-text > .wpp__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--wpp-gap) * 1.5); align-items: center; }

/* Preise */
.wpp-plan { position: relative; padding: 2rem; background: var(--wpp-base); color: var(--wpp-contrast); border: 1px solid var(--wpp-border); border-radius: var(--wpp-radius); display: flex; flex-direction: column; }
.wpp-plan.is-featured { border: 3px solid var(--wpp-accent); }
.wpp-plan__badge { position: absolute; top: -.85rem; left: 1.5rem; margin: 0; padding: .2rem .7rem; font-size: .8rem; font-weight: 700; background: var(--wpp-accent); color: var(--wpp-on-accent); border-radius: 999px; }
.wpp-plan h3 { margin: 0 0 .5rem; }
.wpp-plan__price { margin: 0 0 1rem; }
.wpp-plan__amount { font-size: 2rem; font-weight: 700; color: var(--wpp-primary); }
.wpp-plan__period { opacity: .7; }
.wpp-plan .wpp-buttons { margin-top: auto; padding-top: 1.5rem; }

.wpp-image { max-width: 100%; height: auto; border-radius: var(--wpp-radius); }

@media (max-width: 781px) {
	.wpp-hero.is-split > .wpp__inner, .wpp-image-text > .wpp__inner, .wpp-grid--2, .wpp-grid--3, .wpp-grid--4 { grid-template-columns: minmax(0, 1fr); }
	.wpp-hero.is-split.is-image-right .wpp-hero__media { order: -1; }
}