/**
 * Ponderosa – Haupt-Stylesheet
 *
 * Aufbau:
 *  1. Tokens & Basis
 *  2. Rahmen (CI-Element)
 *  3. Barrierefreiheit (Fokus, Screenreader, reduzierte Bewegung)
 *  4. Kopf- & Fußbereich
 *  5. Typografie-Bausteine, Buttons
 *  6. Blöcke (Lazy Blocks, Präfix pd-)
 *  7. Core-Blöcke & Vorlagen
 *  8. Bewegung
 */

/* ==========================================================================
   1. Tokens & Basis
   ========================================================================== */

:root {
	--pd-frame: var(--wp--custom--frame, 6px);
	--pd-frame-color: var(--wp--preset--color--sand);
	--pd-ease: var(--wp--custom--ease, cubic-bezier(.2, .7, .2, 1));
	--pd-speed: var(--wp--custom--transition, 320ms);
	--pd-gutter: var(--wp--style--root--padding-left, clamp(1.5rem, 1rem + 2vw, 2.5rem));
	--pd-wide: var(--wp--style--global--wide-size, 92rem);
	--pd-content: var(--wp--style--global--content-size, 48rem);
	--pd-space-section: var(--wp--preset--spacing--60);
	--pd-accent: var(--wp--preset--color--gelb);
	--pd-surface: transparent;
	--pd-ink: var(--wp--preset--color--ink);
	--pd-black: var(--wp--preset--color--black);
	--pd-white: var(--wp--preset--color--white);
	--pd-header-h: var(--wp--custom--header-height, 5.5rem);
	scroll-padding-top: calc(var(--pd-header-h) + 1rem);
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

img,
video,
svg {
	max-width: 100%;
	height: auto;
}

::selection {
	background: var(--wp--preset--color--gelb);
	color: var(--pd-black);
}

h1, h2, h3, h4, h5, h6,
.pd-buehne__statement,
.pd-aufruf__headline {
	hyphens: auto;
	overflow-wrap: break-word;
	text-wrap: balance;
}

p,
li,
dd {
	text-wrap: pretty;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--pd-speed) var(--pd-ease), text-decoration-color var(--pd-speed) var(--pd-ease);
}

/* ==========================================================================
   2. Rahmen – das CI-Element der Ponderosa (umlaufend, Farbe pro Seite wählbar)
   ========================================================================== */

/* Nur im Frontend (.wp-site-blocks gibt es im Editor nicht) – ein fixiertes Element mit Rahmen. */
.wp-site-blocks::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 900;
	pointer-events: none;
	border: var(--pd-frame) solid var(--pd-frame-color);
	transition: border-color 600ms var(--pd-ease);
}

.wp-site-blocks {
	padding-inline: var(--pd-frame);
	padding-bottom: var(--pd-frame);
}

/* ==========================================================================
   3. Barrierefreiheit
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background: var(--pd-white);
	clip: auto !important;
	clip-path: none;
	color: var(--pd-black);
	display: block;
	height: auto;
	left: 1rem;
	padding: 1rem 1.5rem;
	top: 1rem;
	width: auto;
	z-index: 100000;
}

/* Sprunglink („Zum Inhalt springen“) – von WordPress automatisch erzeugt. */
.skip-link.screen-reader-text:focus {
	font-weight: 500;
	text-decoration: underline;
	outline: 3px solid var(--pd-black);
	outline-offset: 2px;
}

/* Deutlich sichtbarer Fokus – doppelter Ring funktioniert auf hellen und farbigen Flächen. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--pd-black);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--pd-white);
	border-radius: 2px;
}

.pd-footer :where(a, button, input, summary):focus-visible {
	outline-color: var(--pd-white);
	box-shadow: 0 0 0 6px var(--pd-black);
}

/* Ganze Projektkarte zeigt den Fokus des Titellinks. */
.pd-card:has(.pd-card__link:focus-visible) {
	outline: 3px solid var(--pd-black);
	outline-offset: 6px;
}

.pd-card__link:focus-visible {
	outline: none;
	box-shadow: none;
}

/* Mindestgröße für Bedienelemente (WCAG 2.5.8). */
button,
.pd-btn,
.wp-element-button {
	min-height: 44px;
}

.pd-editor-notice {
	padding: 1rem 1.25rem;
	border: 2px dashed var(--wp--preset--color--stone);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--earth);
	font-size: var(--wp--preset--font-size--small);
}

/* ==========================================================================
   4. Kopfbereich
   ========================================================================== */

.pd-header {
	position: sticky;
	top: 0;
	z-index: 800;
	background: var(--pd-white);
	transition: transform 400ms var(--pd-ease), box-shadow var(--pd-speed) var(--pd-ease);
}

.pd-header.is-scrolled {
	box-shadow: 0 1px 0 var(--wp--preset--color--sand);
}

.pd-header.is-hidden {
	transform: translateY(-100%);
}

.pd-header__inner {
	max-width: var(--pd-wide);
	min-height: var(--pd-header-h);
	margin-inline: auto;
	padding: 1rem var(--pd-gutter);
	gap: 2rem;
}

.admin-bar .pd-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.pd-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	color: var(--pd-black);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
}

.pd-brand__logo {
	flex: none;
	width: 30px;
	height: 46px;
	transform-origin: 50% 100%;
	transition: transform 500ms var(--pd-ease);
}

.pd-brand:hover .pd-brand__logo,
.pd-brand:focus-visible .pd-brand__logo {
	transform: rotate(-8deg);
}

.pd-brand__name {
	font-weight: 800;
	letter-spacing: 0.06em;
}

.pd-brand__claim {
	font-weight: 400;
}

@media (max-width: 47.99em) {
	.pd-brand__claim {
		display: block;
		font-size: 0.75rem;
	}
}

/* Hauptnavigation */
.pd-nav .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.5rem;
	text-decoration: none;
}

.pd-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.15rem;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--pd-speed) var(--pd-ease);
}

.pd-nav .wp-block-navigation-item__content:hover::after,
.pd-nav .current-menu-item > .wp-block-navigation-item__content::after,
.pd-nav [aria-current="page"]::after {
	transform: scaleX(1);
	transform-origin: left;
}

.pd-nav .wp-block-navigation__responsive-container-open,
.pd-nav .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
}

/* Mobiles Menü: große, lebendige Typo */
.pd-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: calc(var(--pd-frame) + 1.5rem);
}

.pd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0.5rem;
}

.pd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.pd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start !important;
}

.pd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: clamp(2rem, 8vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	text-transform: none;
}

/* ==========================================================================
   4b. Fußbereich
   ========================================================================== */

.pd-footer {
	margin-top: var(--pd-space-section);
	background: var(--pd-black);
	color: var(--pd-white);
}

.pd-footer__inner {
	padding: var(--wp--preset--spacing--60) var(--pd-gutter) var(--wp--preset--spacing--40);
}

.pd-footer a {
	color: var(--pd-white);
}

.pd-footer a:hover {
	text-decoration-color: var(--wp--preset--color--gelb);
	text-decoration-thickness: 2px;
}

.pd-footer .wp-block-heading,
.pd-footer h2 {
	color: var(--pd-white);
}

.pd-footer__statement {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.pd-footer__links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.pd-footer__bottom {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: 1.25rem;
	border-top: 1px solid rgb(255 255 255 / 0.3);
	font-size: var(--wp--preset--font-size--small);
}

.pd-footer__bottom p {
	margin: 0;
}

/* ==========================================================================
   5. Typografie-Bausteine & Buttons
   ========================================================================== */

.pd-kicker,
.is-style-kicker {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: inherit;
}

.pd-heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: inherit;
}

.pd-lead,
.is-style-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
}

.pd-lead > :first-child,
.pd-prose > :first-child {
	margin-top: 0;
}

.pd-lead > :last-child,
.pd-prose > :last-child {
	margin-bottom: 0;
}

.pd-prose a,
.pd-lead a {
	color: inherit;
}

.pd-section-head {
	display: grid;
	gap: 0.25rem;
	max-width: 52rem;
	margin-bottom: var(--wp--preset--spacing--50);
}

.pd-section-head .pd-lead {
	margin: 1rem 0 0;
}

/* Hervorhebung im Statement – Textmarker in Akzentfarbe (Text bleibt schwarz: Kontrast ≥ 6:1). */
.pd-mark {
	color: inherit;
	background-color: transparent;
	background-image: linear-gradient(var(--pd-accent), var(--pd-accent));
	background-repeat: no-repeat;
	background-position: 0 88%;
	background-size: 100% 0.42em;
	padding-inline: 0.04em;
	transition: background-size 900ms 300ms var(--pd-ease);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Buttons */
.pd-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

.pd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.8em 1.6em;
	border: 2px solid var(--pd-black);
	border-radius: 999px;
	background: var(--pd-black);
	color: var(--pd-white);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--pd-speed) var(--pd-ease), color var(--pd-speed) var(--pd-ease), transform var(--pd-speed) var(--pd-ease);
}

.pd-btn:hover {
	background: var(--pd-white);
	color: var(--pd-black);
}

.pd-btn:active {
	transform: scale(0.97);
}

.pd-btn--outline {
	background: transparent;
	color: var(--pd-black);
}

.pd-btn--outline:hover {
	background: var(--pd-black);
	color: var(--pd-white);
}

.pd-surface .pd-btn:hover {
	background: transparent;
}

.pd-link-arrow,
.is-style-arrow .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 500;
	color: inherit;
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	padding-bottom: 0.15em;
}

.pd-link-arrow::after,
.is-style-arrow .wp-block-button__link::after {
	content: "→";
	transition: transform var(--pd-speed) var(--pd-ease);
}

.pd-link-arrow:hover::after,
.is-style-arrow .wp-block-button__link:hover::after {
	transform: translateX(0.35em);
}

.is-style-arrow .wp-block-button__link {
	background: none;
	padding: 0 0 0.15em;
	border-radius: 0;
	color: var(--pd-black);
	min-height: 0;
}

.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--pd-black);
}

.is-style-outline .wp-block-button__link:hover {
	background: var(--pd-black);
	color: var(--pd-white);
}

/* ==========================================================================
   6. Blöcke
   ========================================================================== */

/*
 * Lazy Blocks legt um jeden Block einen Wrapper (.wp-block-lazyblock-*), der die
 * gewählte Ausrichtung trägt. Ohne gewählte Ausrichtung bekommt der Wrapper die
 * Standardbreite des Blocks (pd-is-full / pd-is-wide am inneren Element).
 */
.is-layout-constrained > [class*="wp-block-lazyblock-"]:has(> .pd-is-full) {
	max-width: none !important;
	margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
	margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
}

.is-layout-constrained > [class*="wp-block-lazyblock-"]:not(.alignfull):has(> .pd-is-wide) {
	max-width: var(--wp--style--global--wide-size) !important;
}

/* Abstände zwischen Blöcken */
.pd-content > [class*="wp-block-lazyblock-"],
.pd-projekt > [class*="wp-block-lazyblock-"] {
	margin-block-start: var(--pd-space-section);
}

.pd-content > [class*="wp-block-lazyblock-"]:first-child,
.pd-projekt > [class*="wp-block-lazyblock-"]:first-child {
	margin-block-start: 0;
}

.pd-content > [class*="wp-block-lazyblock-"]:has(> .pd-surface.pd-is-full) + [class*="wp-block-lazyblock-"]:has(> .pd-surface.pd-is-full),
.pd-content > [class*="wp-block-lazyblock-"]:has(> .pd-laufband.pd-is-full) + [class*="wp-block-lazyblock-"]:has(> .pd-surface.pd-is-full) {
	margin-block-start: 0;
}

.pd-content > [class*="wp-block-lazyblock-"]:last-child:has(> .pd-surface.pd-is-full) {
	margin-block-end: calc(var(--wp--preset--spacing--40) * -1 - var(--pd-space-section));
}

/* Farbflächen – Text immer Schwarz (alle CI-Farben ≥ 6:1 Kontrast zu Schwarz). */
.pd-surface {
	background-color: var(--pd-surface);
	color: var(--pd-black);
	padding-block: var(--pd-space-section);
}

.pd-surface :where(h1, h2, h3, h4, a:not(.pd-btn)) {
	color: var(--pd-black);
}

/* Innere Breite bei vollbreiten Blöcken */
.pd-is-full > [class*="__inner"] {
	padding-inline: var(--pd-gutter);
}

.pd-block > [class*="__inner"] {
	max-width: var(--pd-wide);
	margin-inline: auto;
}

/* --- Bühne ---------------------------------------------------------------- */

.pd-buehne {
	position: relative;
	padding-top: var(--wp--preset--spacing--60);
}

.pd-buehne__statement {
	margin: 0;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.035em;
	color: var(--pd-black);
	max-width: 20ch;
}

.pd-buehne__intro {
	margin-top: var(--wp--preset--spacing--50);
	max-width: 38rem;
}

@media (min-width: 64em) {
	.pd-buehne--statement .pd-buehne__intro {
		margin-left: 41.666%;
	}
}

.pd-buehne__media img,
.pd-buehne__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pd-buehne__media--below {
	margin-top: var(--wp--preset--spacing--60);
	aspect-ratio: 16 / 7;
	overflow: hidden;
	background: var(--pd-accent);
}

@media (max-width: 47.99em) {
	.pd-buehne__media--below {
		aspect-ratio: 4 / 5;
	}
}

/* Layout: Medien vollflächig – Text auf weißer Fläche (Kontrast unabhängig vom Bild). */
.pd-buehne--media.has-media {
	display: grid;
	min-height: min(88vh, 60rem);
	padding: 0;
}

.pd-buehne__media--cover {
	grid-area: 1 / 1;
	overflow: hidden;
}

.pd-buehne--media .pd-buehne__inner {
	grid-area: 1 / 1;
	align-self: end;
	width: 100%;
	padding-block: var(--wp--preset--spacing--50);
}

.pd-buehne--media.has-media .pd-buehne__text {
	max-width: 54rem;
	padding: var(--wp--preset--spacing--40);
	background: var(--pd-white);
}

.pd-buehne--media .pd-buehne__statement {
	font-size: var(--wp--preset--font-size--xx-large);
}

/* Layout: geteilt */
@media (min-width: 64em) {
	.pd-buehne--split .pd-buehne__inner {
		display: grid;
		grid-template-columns: 7fr 5fr;
		gap: var(--wp--preset--spacing--50);
		align-items: end;
	}

	.pd-buehne--split .pd-buehne__statement {
		font-size: var(--wp--preset--font-size--xx-large);
	}
}

.pd-buehne--split .pd-buehne__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--pd-accent);
	margin-top: var(--wp--preset--spacing--40);
}

/* --- Text versetzt ---------------------------------------------------------- */

.pd-text-versetzt__inner {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 64em) {
	.pd-text-versetzt__inner {
		grid-template-columns: 5fr 7fr;
		gap: var(--wp--preset--spacing--50);
	}
}

.pd-text-versetzt.pd-size-large .pd-prose {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
}

.pd-text-versetzt__body {
	max-width: 46rem;
}

/* --- Projekte --------------------------------------------------------------- */

.pd-projekte__grid {
	display: grid;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

@media (min-width: 48em) {
	.pd-projekte--grid-2 .pd-projekte__grid { grid-template-columns: repeat(2, 1fr); }
	.pd-projekte--grid-3 .pd-projekte__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
	.pd-projekte--grid-3 .pd-projekte__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Versetztes Raster – lebendig wie ein Moodboard */
@media (min-width: 48em) {
	.pd-projekte--staggered .pd-projekte__grid {
		grid-template-columns: repeat(12, 1fr);
		row-gap: var(--wp--preset--spacing--60);
		align-items: start;
	}

	.pd-projekte--staggered .pd-card:nth-child(6n + 1) { grid-column: 1 / span 7; }
	.pd-projekte--staggered .pd-card:nth-child(6n + 2) { grid-column: 9 / span 4; margin-top: var(--wp--preset--spacing--70); }
	.pd-projekte--staggered .pd-card:nth-child(6n + 3) { grid-column: 2 / span 5; }
	.pd-projekte--staggered .pd-card:nth-child(6n + 4) { grid-column: 8 / span 5; margin-top: var(--wp--preset--spacing--60); }
	.pd-projekte--staggered .pd-card:nth-child(6n + 5) { grid-column: 1 / span 4; margin-top: calc(var(--wp--preset--spacing--40) * -1); }
	.pd-projekte--staggered .pd-card:nth-child(6n + 6) { grid-column: 6 / span 7; margin-top: var(--wp--preset--spacing--50); }
}

/* Gefiltert: ruhiges 2er-Raster, da die Versatz-Positionen sonst Lücken reißen. */
@media (min-width: 48em) {
	.pd-projekte--staggered .pd-projekte__grid.is-filtered .pd-card {
		grid-column: span 6;
		margin-top: 0;
	}
}

.pd-projekte__more {
	margin-top: var(--wp--preset--spacing--50);
	text-align: center;
}

/* Filter */
.pd-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: var(--wp--preset--spacing--50);
}

.pd-filter__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.55em 1.1em;
	border: 2px solid var(--pd-black);
	border-radius: 999px;
	background: var(--pd-white);
	color: var(--pd-black);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	cursor: pointer;
	transition: background-color var(--pd-speed) var(--pd-ease), color var(--pd-speed) var(--pd-ease);
}

.pd-filter__btn[data-filter]:not([data-filter="*"])::before {
	content: "";
	width: 0.7em;
	height: 0.7em;
	border-radius: 50%;
	background: var(--pd-accent);
	border: 1px solid var(--pd-black);
}

.pd-filter__btn:hover {
	background: var(--wp--preset--color--paper);
}

.pd-filter__btn[aria-pressed="true"] {
	background: var(--pd-black);
	color: var(--pd-white);
}

/* Projektkarte */
.pd-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.pd-card[hidden] {
	display: none;
}

.pd-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--pd-accent);
}

.pd-card--l .pd-card__media { aspect-ratio: 4 / 3; }
.pd-card--s .pd-card__media { aspect-ratio: 1 / 1; }

.pd-card__media img,
.pd-card__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	clip-path: inset(0);
	transition: clip-path 600ms var(--pd-ease), transform 900ms var(--pd-ease);
}

.pd-card__media video {
	z-index: 1;
}

/* Hover: das Bild zieht sich zurück und gibt einen Rahmen in Projektfarbe frei – Zitat des CI-Rahmens. */
.pd-card:hover .pd-card__media img,
.pd-card:hover .pd-card__media video,
.pd-card:focus-within .pd-card__media img,
.pd-card:focus-within .pd-card__media video {
	clip-path: inset(clamp(10px, 3%, 22px));
	transform: scale(1.03);
}

.pd-card__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--pd-black);
}

.pd-card__placeholder svg {
	width: 18%;
	opacity: 0.35;
}

.pd-card__body {
	display: grid;
	gap: 0.75rem;
	max-width: 36rem;
}

.pd-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.pd-card__link {
	color: var(--pd-black);
	text-decoration: none;
}

.pd-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.pd-card__kicker {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pd-card__name {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 2px;
	transition: background-size 500ms var(--pd-ease);
}

.pd-card:hover .pd-card__name,
.pd-card:focus-within .pd-card__name {
	background-size: 100% 2px;
}

.pd-card__teaser {
	margin: 0;
	color: var(--wp--preset--color--earth);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

/* Schlagworte: ● Branche, ○ Leistung (angelehnt an eiga.design) */
.pd-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	line-height: 1.4;
}

.pd-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.pd-tag::before {
	content: "";
	flex: none;
	width: 0.65em;
	height: 0.65em;
	border: 1.5px solid currentColor;
	border-radius: 50%;
}

.pd-tag--branche {
	font-weight: 500;
}

.pd-tag--branche::before {
	background: currentColor;
}

/* --- Leistungen ------------------------------------------------------------- */

.pd-leistungen__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pd-leistung__title {
	margin: 0;
	overflow-wrap: anywhere;
	hyphens: auto;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	line-height: 1.15;
}

.pd-leistung__link {
	color: inherit;
	text-decoration: none;
}

.pd-leistung__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.pd-leistung__claim {
	margin: 0.5rem 0 0;
	font-weight: 500;
}

.pd-leistung__text {
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--earth);
	font-size: var(--wp--preset--font-size--small);
}

.pd-leistung__icon {
	display: block;
	color: var(--pd-white);
}

.pd-leistung__icon path {
	transition: stroke-dashoffset 1600ms var(--pd-ease);
}

/* Kacheln */
.pd-leistungen--tiles .pd-leistungen__list {
	display: grid;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	grid-template-columns: 1fr;
}

/* Max. 3 Spalten – lange deutsche Begriffe („Informationsgestaltung“) brauchen Platz. */
@media (min-width: 40em) {
	.pd-leistungen--tiles .pd-leistungen__list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
	.pd-leistungen--tiles .pd-leistungen__list { grid-template-columns: repeat(3, 1fr); }

	/* Versatz wie im Projektraster */
	.pd-leistungen--tiles .pd-leistung:nth-child(3n + 2) { margin-top: var(--wp--preset--spacing--50); }
}

.pd-leistungen--tiles .pd-leistung {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.pd-leistungen--tiles .pd-leistung__figure {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	background: var(--pd-accent);
	overflow: hidden;
}

.pd-leistungen--tiles .pd-leistung__icon {
	width: auto;
	height: 78%;
	transition: transform 700ms var(--pd-ease);
}

.pd-leistungen--tiles .pd-leistung:hover .pd-leistung__icon,
.pd-leistungen--tiles .pd-leistung:focus-within .pd-leistung__icon {
	transform: scale(1.1) rotate(-4deg);
}

.pd-leistung:has(.pd-leistung__link:focus-visible) {
	outline: 3px solid var(--pd-black);
	outline-offset: 6px;
}

.pd-leistung__link:focus-visible {
	outline: none;
	box-shadow: none;
}

/* Liste */
.pd-leistungen--list .pd-leistung {
	position: relative;
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	gap: 1rem 1.25rem;
	align-items: start;
	padding: 1.5rem 1rem;
	border-top: 2px solid var(--pd-black);
	isolation: isolate;
}

.pd-leistungen--list .pd-leistung:last-child {
	border-bottom: 2px solid var(--pd-black);
}

.pd-leistungen--list .pd-leistung::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--pd-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 500ms var(--pd-ease);
}

.pd-leistungen--list .pd-leistung:hover::before,
.pd-leistungen--list .pd-leistung:focus-within::before {
	transform: scaleX(1);
}

.pd-leistungen--list .pd-leistung:hover .pd-leistung__text,
.pd-leistungen--list .pd-leistung:focus-within .pd-leistung__text {
	color: var(--pd-black);
}

.pd-leistungen--list .pd-leistung__figure {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--pd-accent);
}

.pd-leistungen--list .pd-leistung__icon {
	width: 100%;
}

@media (min-width: 64em) {
	.pd-leistungen--list .pd-leistung {
		grid-template-columns: 6rem minmax(0, 5fr) minmax(0, 7fr);
		padding-block: 2rem;
	}

	.pd-leistungen--list .pd-leistung__figure {
		width: 6rem;
		height: 6rem;
	}

	.pd-leistungen--list .pd-leistung__body {
		display: contents;
	}

	.pd-leistungen--list .pd-leistung__title {
		font-size: var(--wp--preset--font-size--x-large);
	}

	.pd-leistungen--list .pd-leistung__claim,
	.pd-leistungen--list .pd-leistung__text {
		grid-column: 3;
		margin: 0;
	}

	.pd-leistungen--list .pd-leistung__title {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.pd-leistungen--list .pd-leistung__figure {
		grid-row: 1 / span 2;
	}
}

/* --- Text & Medien ---------------------------------------------------------- */

.pd-text-medien__inner {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

@media (min-width: 64em) {
	.pd-text-medien__inner {
		grid-template-columns: 1fr 1fr;
	}

	.pd-text-medien.is-reversed .pd-text-medien__media {
		order: -1;
	}
}

.pd-text-medien__text .pd-heading {
	margin-bottom: 1.5rem;
}

.pd-text-medien__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--pd-ratio, 4 / 5);
	background: var(--wp--preset--color--sand);
}

.pd-text-medien[style*="--pd-ratio:auto"] .pd-text-medien__media {
	aspect-ratio: auto;
}

.pd-text-medien__media img,
.pd-text-medien__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Laufband ---------------------------------------------------------------- */

.pd-laufband {
	--pd-marquee-duration: 40s;
	position: relative;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--40);
}

.pd-laufband--slow { --pd-marquee-duration: 70s; }
.pd-laufband--fast { --pd-marquee-duration: 22s; }

.pd-laufband:not(.pd-surface) {
	border-block: 2px solid var(--pd-black);
}

.pd-laufband__viewport {
	display: flex;
	width: max-content;
}

.pd-is-full > .pd-laufband__viewport {
	padding-inline: 0;
}

.pd-laufband__track {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: pd-marquee var(--pd-marquee-duration) linear infinite;
}

.pd-laufband.is-reversed .pd-laufband__track {
	animation-direction: reverse;
}

.pd-laufband:hover .pd-laufband__track,
.pd-laufband.is-paused .pd-laufband__track {
	animation-play-state: paused;
}

.pd-laufband__item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.pd-laufband--large .pd-laufband__item {
	font-size: var(--wp--preset--font-size--xx-large);
}

.pd-laufband--small .pd-laufband__item {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	letter-spacing: 0;
}

.pd-laufband__item::after {
	content: "";
	flex: none;
	width: 0.42em;
	height: 0.42em;
	margin-inline: 0.6em;
	border-radius: 50%;
	background: var(--wp--preset--color--rot);
}

.pd-laufband__item:nth-child(5n + 2)::after { background: var(--wp--preset--color--gelb); }
.pd-laufband__item:nth-child(5n + 3)::after { background: var(--wp--preset--color--blau); }
.pd-laufband__item:nth-child(5n + 4)::after { background: var(--wp--preset--color--gruen); }
.pd-laufband__item:nth-child(5n + 5)::after { background: var(--wp--preset--color--lila); }

.pd-surface .pd-laufband__item::after {
	background: var(--pd-black);
}

.pd-laufband__logo {
	display: block;
	max-height: 3.5rem;
	width: auto;
	filter: grayscale(1);
}

@keyframes pd-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-100%); }
}

/* Pause-Knopf (Laufband) */
.pd-motion-toggle {
	position: absolute;
	right: calc(var(--pd-gutter) / 2);
	bottom: 0.4rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 32px;
	padding: 0.3rem 0.75rem;
	border: 0;
	border-radius: 999px;
	background: var(--pd-black);
	color: var(--pd-white);
	font: inherit;
	font-size: 0.75rem;
	cursor: pointer;
	opacity: 0.85;
}

.pd-motion-toggle:hover,
.pd-motion-toggle:focus-visible {
	opacity: 1;
}

.pd-motion-toggle__icon {
	width: 0.6rem;
	height: 0.7rem;
	border-inline: 3px solid currentColor;
}

.pd-motion-toggle[aria-pressed="true"] .pd-motion-toggle__icon {
	border: 0;
	border-left: 0.6rem solid currentColor;
	border-block: 0.35rem solid transparent;
	width: 0;
	height: 0;
}

/* --- Zahlen ----------------------------------------------------------------- */

.pd-zahlen__list {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	margin: 0;
}

.pd-zahl {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 0.5rem;
	padding-top: 1.25rem;
	border-top: 6px solid var(--pd-accent);
}

.pd-zahl__value {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--pd-black);
}

.pd-zahl__prefix {
	display: block;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	letter-spacing: 0;
}

.pd-zahl__label {
	font-weight: 500;
}

/* --- Team ------------------------------------------------------------------- */

.pd-team__list {
	display: grid;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 64em) {
	.pd-team__list:has(> :nth-child(2):last-child) .pd-person:nth-child(2) {
		margin-top: var(--wp--preset--spacing--60);
	}
}

.pd-person__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	margin-bottom: 1.25rem;
	background: var(--pd-accent);
}

.pd-person__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 500ms var(--pd-ease), transform 900ms var(--pd-ease);
}

.pd-person__photo--alt {
	opacity: 0;
}

.pd-person:hover .pd-person__media.has-alt .pd-person__photo--alt {
	opacity: 1;
}

.pd-person:hover .pd-person__media img {
	transform: scale(1.03);
}

.pd-person__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

.pd-person__placeholder svg {
	width: 22%;
	opacity: 0.4;
}

.pd-person__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
}

.pd-person__role {
	margin: 0.25rem 0 0;
	font-weight: 500;
}

.pd-person__bio {
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--earth);
	font-size: var(--wp--preset--font-size--small);
}

.pd-person__contact {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
}

/* --- Kundenstimme --------------------------------------------------------------- */

.pd-zitat {
	margin: 0;
}

.pd-zitat__inner {
	max-width: 64rem;
}

.pd-zitat__quote {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
}

.pd-zitat__quote::before {
	content: "\201C";
	display: block;
	height: 0.5em;
	margin-bottom: 0.15em;
	font-size: clamp(5rem, 10vw, 9rem);
	font-weight: 800;
	line-height: 1;
}

.pd-zitat__quote p {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.pd-zitat__source {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: var(--wp--preset--spacing--40);
}

.pd-zitat__photo {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	object-fit: cover;
}

.pd-zitat__name,
.pd-zitat__role {
	display: block;
}

/* --- Medien-Galerie ---------------------------------------------------------------- */

.pd-medien {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(6, 1fr);
}

.pd-medien__item {
	grid-column: span 6;
	margin: 0;
}

@media (min-width: 48em) {
	.pd-medien__item--half { grid-column: span 3; }
	.pd-medien__item--third { grid-column: span 2; }
	.pd-medien__item--two-thirds { grid-column: span 4; }
}

.pd-medien__item img,
.pd-medien__item video {
	display: block;
	width: 100%;
	height: auto;
}

.pd-medien__item.pd-surface {
	padding: clamp(1.5rem, 6%, 4rem);
}

.pd-medien__item.pd-surface figcaption {
	color: var(--pd-black);
}

/* Video-Pause-Knopf (wird per JS ergänzt) */
.pd-video-wrap {
	position: relative;
}

.pd-video-toggle {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(0 0 0 / 0.75);
	color: var(--pd-white);
	cursor: pointer;
}

.pd-video-toggle:hover {
	background: var(--pd-black);
}

.pd-video-toggle::before {
	content: "";
	width: 12px;
	height: 14px;
	border-inline: 4px solid currentColor;
}

.pd-video-toggle[aria-pressed="true"]::before {
	width: 0;
	height: 0;
	border: 0;
	border-left: 13px solid currentColor;
	border-block: 8px solid transparent;
	margin-left: 4px;
}

/* --- Video (2-Klick) ---------------------------------------------------------- */

.pd-video {
	margin-inline: auto;
}

.pd-video__player {
	display: block;
	width: 100%;
	background: var(--pd-black);
}

.pd-consent {
	position: relative;
	display: grid;
	aspect-ratio: var(--pd-ratio, 16 / 9);
	overflow: hidden;
	background: var(--wp--preset--color--paper);
}

.pd-consent__poster {
	grid-area: 1 / 1;
}

.pd-consent__poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.6);
}

.pd-consent__box {
	grid-area: 1 / 1;
	place-self: center;
	max-width: 32rem;
	margin: 1rem;
	padding: clamp(1.25rem, 4vw, 2rem);
	background: var(--pd-white);
	color: var(--pd-black);
	font-size: var(--wp--preset--font-size--small);
}

.pd-consent__title {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 800;
}

.pd-consent__text {
	margin: 0 0 1rem;
}

.pd-consent__button {
	display: inline-flex;
	align-items: center;
	padding: 0.7em 1.4em;
	border: 2px solid var(--pd-black);
	border-radius: 999px;
	background: var(--pd-black);
	color: var(--pd-white);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.pd-consent__button::before {
	content: "";
	margin-right: 0.6em;
	border-left: 0.7em solid currentColor;
	border-block: 0.42em solid transparent;
}

.pd-consent__button:hover {
	background: var(--pd-white);
	color: var(--pd-black);
}

.pd-consent__alt {
	margin: 0.75rem 0 0;
}

.pd-consent iframe {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 35em) {
	.pd-consent {
		aspect-ratio: auto;
	}

	.pd-consent.is-loaded {
		aspect-ratio: var(--pd-ratio, 16 / 9);
	}

	.pd-consent__poster {
		display: none;
	}
}

/* --- Akkordeon --------------------------------------------------------------------- */

.pd-akkordeon__item {
	border-top: 2px solid var(--pd-black);
}

.pd-akkordeon__item:last-of-type {
	border-bottom: 2px solid var(--pd-black);
}

.pd-akkordeon__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 0;
	cursor: pointer;
	list-style: none;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	line-height: 1.2;
}

.pd-akkordeon__summary::-webkit-details-marker {
	display: none;
}

.pd-akkordeon__icon {
	position: relative;
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--gelb);
	transition: transform var(--pd-speed) var(--pd-ease), background-color var(--pd-speed) var(--pd-ease);
}

.pd-akkordeon__icon::before,
.pd-akkordeon__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.9rem;
	height: 2px;
	background: var(--pd-black);
	transform: translate(-50%, -50%);
}

.pd-akkordeon__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.pd-akkordeon__item[open] .pd-akkordeon__icon {
	transform: rotate(45deg);
	background: var(--wp--preset--color--rot);
}

.pd-akkordeon__content {
	padding: 0 0 1.5rem;
	max-width: 46rem;
}

/* --- Kontakt-Aufruf ------------------------------------------------------------------ */

.pd-aufruf {
	padding-block: var(--wp--preset--spacing--70);
}

.pd-aufruf:not(.pd-surface) {
	border-top: 2px solid var(--pd-black);
}

.pd-aufruf__headline {
	margin: 0;
	max-width: 18ch;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.035em;
	color: var(--pd-black);
}

.pd-aufruf__body {
	margin-top: var(--wp--preset--spacing--50);
	max-width: 46rem;
}

@media (min-width: 64em) {
	.pd-aufruf__body {
		margin-left: 41.666%;
	}
}

.pd-aufruf__contact {
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.pd-aufruf__link {
	display: inline-block;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--pd-black);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.15em;
	overflow-wrap: anywhere;
}

.pd-aufruf__link:hover {
	text-decoration-thickness: 6px;
}

/* --- Projekt-Kopf & Fakten ---------------------------------------------------------- */

.pd-projekt-kopf {
	padding-top: var(--wp--preset--spacing--60);
}

.pd-projekt-kopf__title {
	margin: 1.5rem 0 0;
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	max-width: 20ch;
}

.pd-projekt-kopf__title .pd-kicker {
	display: block;
	margin-bottom: 1.25rem;
	letter-spacing: 0.14em;
}

.pd-projekt-kopf__teaser {
	margin: var(--wp--preset--spacing--40) 0 0;
	max-width: 40rem;
}

@media (min-width: 64em) {
	.pd-projekt-kopf__teaser {
		margin-left: 41.666%;
	}
}

.pd-projekt-kopf__media {
	margin-top: var(--wp--preset--spacing--60);
	aspect-ratio: 16 / 8;
	overflow: hidden;
	background: var(--pd-accent);
}

.pd-projekt-kopf__media img,
.pd-projekt-kopf__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pd-projekt-fakten {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

@media (min-width: 64em) {
	.pd-projekt-fakten:has(.pd-projekt-fakten__intro) {
		grid-template-columns: 5fr 7fr;
	}
}

.pd-projekt-fakten__list {
	display: grid;
	gap: 1rem 2rem;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	align-content: start;
	margin: 0;
}

.pd-projekt-fakten__list > div {
	padding-top: 0.75rem;
	border-top: 2px solid var(--pd-black);
}

.pd-projekt-fakten__list dt {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pd-projekt-fakten__list dd {
	margin: 0.25rem 0 0;
}

/* ==========================================================================
   7. Core-Blöcke & Vorlagen
   ========================================================================== */

.pd-main {
	padding-bottom: var(--wp--preset--spacing--40);
}

.pd-main--flush {
	padding-top: 0;
}

.pd-projekt > .pd-content {
	margin-block-start: var(--pd-space-section);
}

.pd-page-head {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--40);
}

.pd-page-title {
	margin: 0;
	max-width: 20ch;
	font-size: var(--wp--preset--font-size--xx-large) !important;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.pd-meta {
	gap: 1rem;
	margin-bottom: 1.25rem;
	font-size: var(--wp--preset--font-size--small);
}

.pd-meta__terms a {
	color: inherit;
}

.pd-page-image {
	margin-bottom: var(--wp--preset--spacing--50);
}

.pd-content > :where(p, ul, ol, h2, h3, h4, blockquote, figure) {
	margin-block-start: 1.5em;
}

.pd-content > h2 {
	margin-block-start: 2em;
}

/* Gruppe mit Rahmen (Block-Stil) */
.is-style-frame {
	border: var(--pd-frame) solid var(--pd-frame-color);
	padding: var(--wp--preset--spacing--40);
}

/* Liste mit farbigen Punkten */
.is-style-dots {
	list-style: none;
	padding-left: 0;
}

.is-style-dots li {
	position: relative;
	padding-left: 1.6em;
	margin-block: 0.4em;
}

.is-style-dots li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.7em;
	height: 0.7em;
	border-radius: 50%;
	background: var(--wp--preset--color--rot);
}

.is-style-dots li:nth-child(5n + 2)::before { background: var(--wp--preset--color--gelb); }
.is-style-dots li:nth-child(5n + 3)::before { background: var(--wp--preset--color--blau); }
.is-style-dots li:nth-child(5n + 4)::before { background: var(--wp--preset--color--gruen); }
.is-style-dots li:nth-child(5n + 5)::before { background: var(--wp--preset--color--lila); }

/* Beitrags-/Projekt-Navigation */
.pd-post-nav {
	margin-top: var(--pd-space-section);
	padding-top: 1.5rem;
	border-top: 2px solid var(--pd-black);
	gap: 1.5rem;
}

.pd-post-nav a {
	font-weight: 500;
	color: var(--pd-black);
}

/* Beitragsliste */
.pd-post-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.pd-post-card__image {
	margin-bottom: 0.5rem;
	overflow: hidden;
	background: var(--wp--preset--color--sand);
}

.pd-post-card__image img {
	transition: transform 900ms var(--pd-ease);
}

.pd-post-card:hover .pd-post-card__image img {
	transform: scale(1.04);
}

.pd-post-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large) !important;
	line-height: 1.2;
}

.pd-post-card__title a {
	text-decoration: none;
}

.pd-post-card__title a:hover {
	text-decoration: underline;
}

.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--50);
	font-weight: 500;
}

/* Suche */
.pd-search .wp-block-search__input {
	min-height: 48px;
	border: 2px solid var(--pd-black);
	padding: 0.6rem 1rem;
	font: inherit;
}

.pd-search .wp-block-search__button {
	margin-left: 0.5rem;
}

/* Core-Embed (2-Klick, siehe inc/privacy.php) */
.pd-embed {
	margin-inline: auto;
}

/* Bilder mit Einblend-Stil */
.is-style-reveal img {
	clip-path: inset(0);
	transition: clip-path 1200ms var(--pd-ease);
}

/* ==========================================================================
   8. Bewegung – nur wenn JavaScript läuft und keine reduzierte Bewegung gewünscht ist
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.pd-motion .pd-reveal:not(.is-visible) {
		opacity: 0;
		transform: translateY(2.5rem);
	}

	.pd-motion .pd-reveal {
		transition: opacity 900ms var(--pd-ease), transform 900ms var(--pd-ease);
	}

	.pd-motion .pd-reveal.is-visible:nth-child(2) { transition-delay: 80ms; }
	.pd-motion .pd-reveal.is-visible:nth-child(3) { transition-delay: 160ms; }

	.pd-motion .pd-reveal:not(.is-visible) .pd-mark,
	.pd-motion .pd-buehne__statement:not(.is-visible) .pd-mark {
		background-size: 0 0.42em;
	}

	.pd-motion .pd-leistung:not(.is-visible) .pd-leistung__icon path {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
	}

	.pd-motion .pd-leistung.is-visible .pd-leistung__icon path {
		stroke-dasharray: 1;
		stroke-dashoffset: 0;
	}

	.pd-motion .is-style-reveal:not(.is-visible) img {
		clip-path: inset(0 0 100% 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.pd-laufband__viewport {
		width: auto;
	}

	.pd-laufband__track {
		flex-wrap: wrap;
		row-gap: 0.5rem;
		animation: none !important;
	}

	.pd-laufband__track--copy,
	.pd-motion-toggle {
		display: none !important;
	}

	.pd-laufband__item {
		white-space: normal;
	}

	.pd-header.is-hidden {
		transform: none;
	}
}

/* Alle Animationen pausiert (Schalter im Fußbereich/Laufband) */
.pd-motion-paused .pd-laufband__track {
	animation-play-state: paused;
}