/* ==========================================================================
   Layout-Ebene „Dynamic & Playful“ (Design/Design-System/guidelines/30-dynamic-playful.md)
   Drehung, Versatz, Farbblöcke, Deko-Formen, Masonry. Handy zuerst.
   ========================================================================== */

:root {
	--tilt-1: -1deg; --tilt-2: .75deg; --tilt-3: -.5deg; --tilt-4: 1.25deg; --offset: 0px;
	--pop-x: 8px; --pop-y: -12px;
}
@media (min-width: 960px) {
	:root { --tilt-1: -2deg; --tilt-2: 1.5deg; --tilt-3: -1deg; --tilt-4: 2.5deg; --offset: var(--space-8); --pop-x: 24px; --pop-y: -30px; }
}
/* Stark gezoomt (Desktop mit feiner Maus, sehr schmale Breite): keine Drehung */
@media (max-width: 699px) and (hover: hover) and (pointer: fine) {
	:root { --tilt-1: 0deg; --tilt-2: 0deg; --tilt-3: 0deg; --tilt-4: 0deg; }
}

/* Abschnitte schneiden nichts seitlich an und scrollen nie horizontal */
.pnl-section { overflow-x: clip; }
.pnl-section > * { position: relative; z-index: 1; }

/* ---------- Drehung und Versatz --------------------------------------- */

.pp-tilt { transform: rotate(var(--tilt, var(--tilt-1))); transition: transform .15s, box-shadow .15s; }
.pp-tilt:nth-child(4n+2), .wp-block-post:nth-child(4n+2) > .pp-tilt { --tilt: var(--tilt-2); }
.pp-tilt:nth-child(4n+3), .wp-block-post:nth-child(4n+3) > .pp-tilt { --tilt: var(--tilt-3); }
.pp-tilt:nth-child(4n+4), .wp-block-post:nth-child(4n+4) > .pp-tilt { --tilt: var(--tilt-4); }
.pp-tilt:hover, .pp-tilt:focus-within { transform: rotate(0) translateY(-4px); }
.pp-stagger > :nth-child(even) { margin-top: var(--offset) !important; }
.pp-over { position: relative; z-index: 2; }
.pp-pop img, img.pp-pop { transform: translate(var(--pop-x), var(--pop-y)); }

/* ---------- Deko-Formen (reine Dekoration, per CSS, aria-frei) --------- */

.pnl-deco::after {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-repeat: no-repeat;
}
.pnl-deco--hero::after {
	background-image: url("../deco/dreieck.svg"), url("../deco/ring.svg"), url("../deco/punkte.svg"), url("../deco/welle.svg");
	background-size: 28px, 34px, 64px, 60px;
	background-position: 4% 6%, 96% 8%, 1% 99%, 60% 99%;
}
.pnl-deco--a::after {
	background-image: url("../deco/ring-blau.svg"), url("../deco/welle-gelb.svg"), url("../deco/dreieck-gruen.svg");
	background-size: 30px, 56px, 24px;
	background-position: 99% 4%, 2% 98%, 90% 98%;
}
.pnl-deco--b::after {
	background-image: url("../deco/punkte-gelb.svg"), url("../deco/ring.svg");
	background-size: 70px, 28px;
	background-position: 98% 6%, 2% 92%;
}
.pnl-deco--c::after {
	background-image: url("../deco/welle.svg"), url("../deco/dreieck.svg");
	background-size: 56px, 24px;
	background-position: 99% 2%, 3% 96%;
}
@media (min-width: 960px) {
	.pnl-deco--hero::after {
		background-image: url("../deco/dreieck.svg"), url("../deco/ring.svg"), url("../deco/punkte.svg"), url("../deco/welle.svg"),
			url("../deco/ring-blau.svg"), url("../deco/dreieck-gruen.svg"), url("../deco/punkte-gelb.svg");
		background-size: 30px, 40px, 80px, 70px, 26px, 26px, 70px;
		background-position: 2% 6%, 97% 6%, 1% 100%, 48% 100%, 45% 3%, 99% 72%, 92% 100%;
	}
}

/* ---------- Hero ------------------------------------------------------- */

.pnl-hero { padding-top: var(--space-10); }
.pnl-hero__grid { display: grid; gap: var(--space-10); align-items: center; position: relative; }
.pnl-hero__grid::before {  /* Farbblock Orange hinter dem Text */
	content: ""; position: absolute; z-index: 0; background: var(--orange);
	left: -20px; top: -20px; width: 70%; height: 55%; border-radius: 0 0 var(--radius-2xl) 0;
}
.pnl-hero__text {
	background: var(--weiss); border-radius: var(--radius-2xl); box-shadow: var(--shadow-card);
	padding: var(--space-8) var(--space-6); margin: var(--space-8) 0 0 !important;
}
.pnl-hero__text > * + * { margin-block-start: var(--space-4); }
.pnl-hero__text .pnl-display { margin-top: var(--space-2); }
.pnl-hero__text .wp-block-buttons { margin-top: var(--space-8); }
.pnl-hero__text .pnl-checks { margin-top: var(--space-6) !important; gap: var(--space-2); }
.pnl-hero__media { position: relative; margin: 0 !important; }
.pnl-hero__media::before {  /* Farbblock Blau hinter dem Bild */
	content: ""; position: absolute; z-index: -1; background: var(--blau);
	right: -20px; bottom: -24px; width: 75%; height: 80%; border-radius: var(--radius-2xl) 0 0 0;
}
.pnl-hero__img img { aspect-ratio: 4 / 3; transform: translate(var(--pop-x), var(--pop-y)); }
@media (min-width: 960px) {
	.pnl-hero { padding-top: var(--space-15); padding-bottom: var(--space-20); }
	.pnl-hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--space-15); }
	.pnl-hero__grid::before { left: -60px; top: -40px; width: 46%; height: 78%; }
	.pnl-hero__text { padding: var(--space-10) var(--space-10) var(--space-10); margin: var(--space-10) 0 0 !important; }
	.pnl-hero__media::before { right: -60px; bottom: -40px; width: 70%; height: 90%; }
}

/* ---------- Seitenkopf der Unterseiten -------------------------------- */

.pnl-pagehead { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.pnl-pagehead__grid { display: grid; gap: var(--space-10); align-items: center; position: relative; }
.pnl-pagehead__grid::before {
	content: ""; position: absolute; z-index: 0; background: var(--gelb);
	left: -20px; top: -20px; width: 55%; height: 60%; border-radius: 0 0 var(--radius-2xl) 0;
}
.pnl-pagehead__text { background: var(--weiss); border-radius: var(--radius-2xl); box-shadow: var(--shadow-card); padding: var(--space-8) var(--space-6); margin: var(--space-6) 0 0 !important; }
.pnl-pagehead__text > * + * { margin-block-start: var(--space-3); }
.pnl-pagehead__media { position: relative; margin: 0 !important; }
.pnl-pagehead__media::before {
	content: ""; position: absolute; z-index: -1; background: var(--gruen);
	right: -20px; bottom: -20px; width: 70%; height: 80%; border-radius: var(--radius-2xl) 0 0 0;
}
.pnl-pagehead__img img { aspect-ratio: 4 / 3; }
.pnl-pagehead--plain { padding-bottom: var(--space-6); }
.pnl-pagehead--plain .wp-block-post-title, .pnl-pagehead--plain > .pnl-h1 { margin-top: var(--space-6); }
@media (min-width: 960px) {
	.pnl-pagehead { padding-top: var(--space-15); padding-bottom: var(--space-15); }
	.pnl-pagehead__grid.has-media { grid-template-columns: 1.1fr .9fr; gap: var(--space-15); }
	.pnl-pagehead__grid::before { left: -60px; top: -40px; width: 40%; height: 75%; }
	.pnl-pagehead__text { padding: var(--space-10); }
	.pnl-pagehead__grid:not(.has-media) .pnl-pagehead__text { max-width: 860px; }
	.pnl-pagehead__media::before { right: -60px; bottom: -40px; }
}

/* ---------- Quick-Info-Kacheln ---------------------------------------- */

.pnl-quickinfo { padding-top: var(--space-10); }
.pnl-tiles { display: grid; gap: var(--space-8); grid-template-columns: 1fr; padding-inline: 8px; }
.pnl-tile {
	position: relative; border-radius: var(--radius-xl); padding: var(--space-6);
	min-height: 200px; display: flex; flex-direction: column; gap: var(--space-4); color: var(--dark);
	box-shadow: 8px 8px 0 0 var(--gelb);
}
.pnl-tile > * { margin: 0 !important; }
.pnl-tile::before { --pnl-icon-size: 32px; }
.pnl-tile--blau { background: var(--blau); color: var(--weiss); box-shadow: 8px 8px 0 0 var(--gelb); }
.pnl-tile--gruen { background: var(--gruen); box-shadow: 8px 8px 0 0 var(--blau); }
.pnl-tile--orange { background: var(--orange); box-shadow: 8px 8px 0 0 var(--gruen); }
.pnl-tile--gelb { background: var(--gelb); box-shadow: 8px 8px 0 0 var(--orange); }
.pnl-tile__title { font-size: 26px; line-height: 30px; font-weight: 800; color: inherit; }
.pnl-tile__title a { color: inherit; text-decoration: none; }
.pnl-tile__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pnl-tile__title a:focus-visible { outline: none; }
.pnl-tile:focus-within { outline: 3px solid var(--focus); outline-offset: 6px; }
.pnl-tile__text { background: var(--weiss); color: var(--text); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: 15px; line-height: 22px; margin-top: auto !important; }
@media (min-width: 800px) {
	.pnl-tiles { grid-template-columns: repeat(3, 1fr); gap: var(--space-10); }
	.pnl-tile { min-height: 260px; }
}

/* ---------- Über Frau Lehmann und Lotte ------------------------------- */

.pnl-about__grid { display: grid; gap: var(--space-10); align-items: center; position: relative; }
.pnl-about__portrait { position: relative; max-width: 340px; margin: 0 auto !important; }
.pnl-about__portrait::before {
	content: ""; position: absolute; z-index: -1; background: var(--gruen);
	width: 78%; height: 78%; left: -8%; top: -6%; border-radius: var(--radius-2xl);
}
.pnl-about__text > * + * { margin-block-start: var(--space-4); }
.pnl-lottecard { max-width: 320px; margin: 0 auto !important; padding: 0; }
.pnl-lottecard > * { margin: 0 !important; }
.pnl-lottecard .wp-block-image img { border-radius: 0; box-shadow: none; aspect-ratio: 4 / 3; }
.pnl-lottecard__title { padding: var(--space-5) var(--space-6) 0; }
.pnl-lottecard__text { padding: var(--space-2) var(--space-6) var(--space-6); font-size: 15px; line-height: 22px; }
@media (min-width: 960px) {
	.pnl-about__grid { grid-template-columns: .8fr 1.3fr .9fr; gap: var(--space-10); }
	.pnl-lottecard { margin-top: var(--space-15) !important; }
}

/* ---------- Methoden, Ablauf, Text mit Bild --------------------------- */

.pnl-methoden__grid, .pnl-ablauf__grid, .pnl-textbild__grid { display: grid; gap: var(--space-8); align-items: start; margin-top: var(--space-8); }
.pnl-methoden__schema { padding: var(--space-8); }
.pnl-methoden__schema > * + *, .pnl-methoden__pills > * + * { margin-block-start: var(--space-4); }
.pnl-bring { padding: var(--space-6); }
.pnl-bring > * + * { margin-block-start: var(--space-3); }
.pnl-textbild__grid { margin-top: 0; }
.pnl-textbild__text > * + * { margin-block-start: var(--space-4); }
.pnl-textbild__media { position: relative; }
.pnl-textbild__media::before {
	content: ""; position: absolute; z-index: -1; background: var(--orange);
	left: -16px; bottom: -16px; width: 60%; height: 70%; border-radius: 0 var(--radius-2xl) 0 0;
}
.pnl-textbild__img img { aspect-ratio: 3 / 2; }
@media (min-width: 960px) {
	.pnl-methoden__grid { grid-template-columns: 1fr 1.2fr; gap: var(--space-15); }
	.pnl-ablauf__grid { grid-template-columns: 1.4fr 1fr; gap: var(--space-10); }
	.pnl-textbild__grid.has-media { grid-template-columns: 1.2fr .8fr; gap: var(--space-15); }
	.pnl-textbild__grid.has-media.is-reversed .pnl-textbild__media { order: -1; }
	.pnl-textbild__grid.has-media.is-reversed { grid-template-columns: .8fr 1.2fr; }
	.pnl-textbild__media { margin-top: var(--space-15) !important; }
	.pnl-bring { margin-top: var(--space-8) !important; }
}

/* ---------- Abschluss-Aufruf ------------------------------------------ */

.pnl-cta__box { background: var(--gelb); border-radius: var(--radius-2xl); padding: var(--space-10) var(--space-6); text-align: left; position: relative; }
.pnl-cta__box > * + * { margin-block-start: var(--space-4); }
.pnl-cta__box .pp-lead { color: var(--dark); }
.pnl-cta__box .wp-block-buttons { margin-top: var(--space-6); }
.pnl-cta__box .wp-block-button__link { background: var(--dark); color: var(--weiss); }
.pnl-cta__box .wp-block-button__link:hover { background: var(--blau-text); }
@media (min-width: 960px) { .pnl-cta__box { padding: var(--space-15); } }

/* ---------- Masonry (Blog, nur CSS; HTML-Reihenfolge bleibt chronologisch) */

.pp-masonry { columns: 3 280px; column-gap: var(--space-5); display: block; }
.pp-masonry > * { break-inside: avoid; margin: 0 0 var(--space-8) !important; padding: 6px 4px; }
/* Jede zweite Karte als Farbkarte: Titel groß, kein Foto */
.pnl-masonry > li:nth-child(even) .pnl-postcard { border-color: transparent; }
.pnl-masonry > li:nth-child(even) .pnl-postcard__img { display: none; }
.pnl-masonry > li:nth-child(even) .pp-card__title { font-size: 26px; line-height: 31px; }
.pnl-masonry > li:nth-child(even) .pp-card__body { padding: var(--space-8) var(--space-6); }
.pnl-masonry > li:nth-child(even) :is(.pp-card__title a, .pnl-postcard__cat a, .pnl-postcard__date, .wp-block-post-excerpt__excerpt) { color: var(--dark); }
.pnl-masonry > li:nth-child(6n+2) .pnl-postcard { background: var(--orange); }
.pnl-masonry > li:nth-child(6n+4) .pnl-postcard { background: var(--gruen); }
.pnl-masonry > li:nth-child(6n+6) .pnl-postcard { background: var(--gelb); }

/* ---------- Mobil ------------------------------------------------------ */

@media (max-width: 959px) {
	.pnl-section { padding-block: var(--space-15); }
	.pnl-section + .pnl-section { padding-top: var(--space-8); }
	.pnl-hero__grid::before, .pnl-pagehead__grid::before { left: -20px; }
	.pnl-hero__media::before, .pnl-pagehead__media::before { right: -20px; }
}

/* ---------- Einblenden beim Scrollen (nur mit JS, nicht bei reduced motion) */

.pnl-js .pnl-reveal { opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .4s ease; }
.pnl-js .pnl-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.pp-tilt, .pp-tilt:hover, .pp-tilt:focus-within { transition: none; transform: rotate(var(--tilt, var(--tilt-1))); }
	.pnl-js .pnl-reveal { opacity: 1; transform: none; transition: none; }
	.wp-block-button__link { transition: none; }
}

/* Mobil: Deko nur in den unteren Ecken, nie über Text */
@media (max-width: 959px) {
	.pnl-deco--hero::after { background-image: url("../deco/punkte.svg"), url("../deco/welle.svg"); background-size: 48px, 48px; background-position: 2% 100%, 96% 100%; }
	.pnl-deco--a::after { background-image: url("../deco/ring-blau.svg"), url("../deco/welle-gelb.svg"); background-size: 24px, 44px; background-position: 96% 100%, 3% 100%; }
	.pnl-deco--b::after { background-image: url("../deco/ring.svg"); background-size: 22px; background-position: 97% 100%; }
	.pnl-deco--c::after { background-image: url("../deco/dreieck.svg"); background-size: 20px; background-position: 3% 100%; }
}

/* Hochformat-Fotos nicht mehr quer zuschneiden (Axel, 11.10.2026: Bilder zu stark beschnitten) */
.pnl-textbild__img.is-hoch img { aspect-ratio: 4 / 5; object-position: 50% 40%; }
.pnl-textbild__img.is-hoch { max-width: 400px; margin-inline: auto !important; }
.pnl-pagehead__img.is-hoch img { aspect-ratio: 1; object-position: 50% 45%; }
.pnl-lottecard .wp-block-image.is-hoch img { aspect-ratio: 4 / 5; object-position: 50% 40%; }
.pnl-portrait img { object-position: 50% 25%; }