.teaser { display: grid; gap: var(--space-3xl); padding-block: var(--space-3xl); background: var(--color-ink); color: var(--color-paper); }
.teaser__lead { display: grid; gap: var(--space-2xl); align-items: end; }
.teaser__lead-copy { display: grid; gap: var(--space-md); }
.teaser__lead h2 { max-width: 14ch; color: var(--color-paper); font-size: var(--text-3xl); line-height: 1.05; }
.teaser__lead-copy p { max-width: 42ch; color: var(--color-paper-3); font-size: var(--text-md); line-height: 1.45; }
.teaser__portrait { display: grid; gap: var(--space-xs); max-width: 18rem; justify-self: end; }
.teaser__portrait img { width: 100%; height: auto; aspect-ratio: 6 / 7; object-fit: cover; border-radius: var(--radius-xs); }
.teaser__portrait figcaption { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-paper-3); }
.teaser__body { display: grid; gap: var(--space-3xl); }
.teaser__index { display: grid; border-block-start: var(--rule-hair) solid var(--color-rule-2); }
.teaser__entry { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); padding-block: var(--space-lg); border-block-end: var(--rule-hair) solid var(--color-rule-2); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.teaser__entry:hover, .teaser__entry:focus-visible { background: var(--color-ink-2); }
.teaser__entry h3 { color: var(--color-paper); }
.teaser__entry p { color: var(--color-paper-3); }
.teaser__entry-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-paper-3); white-space: nowrap; }
.teaser__entry--more .teaser__entry-meta { color: var(--color-accent-soft); }
.teaser__path { display: grid; gap: var(--space-md); align-content: start; }
.teaser__path-title { color: var(--color-paper); }
.teaser__path-step { display: grid; gap: var(--space-2xs); padding-block: var(--space-md); border-block-start: var(--rule-hair) solid var(--color-rule-2); }
.teaser__path-step strong { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-paper); }
.teaser__path-step p { color: var(--color-paper-3); }
.teaser__cta { display: grid; gap: var(--space-md); padding: var(--space-xl); background: var(--color-ink-2); border-block-start: var(--rule-hair) solid var(--color-accent); }
.teaser__cta p { max-width: 16ch; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.12; color: var(--color-paper); }
.teaser__cta-link { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 2.75rem; padding-inline: var(--space-lg); width: fit-content; background: var(--color-paper); color: var(--color-ink); border-radius: var(--radius-xs); font-weight: 500; text-decoration: none; white-space: nowrap; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.teaser__cta-link:hover, .teaser__cta-link:focus-visible { transform: translateY(-1px); }
.teaser__cta-link:active { transform: translateY(1px); }
.teaser__cta-link svg { width: 1rem; }
.fluid-grid { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); width: 100%; height: min(80vw, 34rem); }
.fluid-grid__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-lg); min-height: 0; }
.fluid-grid__row:has(> :only-child) { grid-auto-columns: minmax(0, 2fr); }
.fluid-grid__item { position: relative; display: block; min-width: 0; min-height: 0; padding: 0; overflow: hidden; border: var(--rule-hair) solid var(--color-rule); border-radius: 2rem; background: var(--color-paper-2); text-align: start; cursor: pointer; }
.fluid-grid__item:hover { border-color: var(--color-rule-2); }
.fluid-grid__item[aria-pressed="true"] { z-index: var(--z-raised); }
.fluid-grid__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: object-position var(--dur-long) var(--ease-out); }
.fluid-grid__veil { position: absolute; inset: 0; background: var(--color-overlay); transition: background-color var(--dur-long) var(--ease-out); }
.fluid-grid__item[aria-pressed="true"] .fluid-grid__veil { background: transparent; }
.fluid-grid__copy { position: absolute; inset: auto 0 0; display: grid; gap: var(--space-2xs); padding: var(--space-lg); color: var(--color-paper); }
.fluid-grid__copy strong { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.01em; }
.fluid-grid__copy small { font-size: var(--text-xs); color: var(--color-paper-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zoom-parallax { position: relative; height: 300svh; background: var(--color-ink); color: var(--color-paper); }
.zoom-parallax__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
/* Layer bildschirmfüllend wie in der Vorlage: Skalierung wirkt um die */
/* Bildschirmmitte, damit die Bilder beim Zoom auseinanderfliegen. */
.zoom-parallax__layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; will-change: transform; }
.zoom-parallax__frame { position: relative; height: 25vh; width: 25vw; overflow: hidden; background: var(--color-paper-2); }
.zoom-parallax__frame img { display: block; height: 100%; width: 100%; object-fit: cover; }
@media(min-width: 1024px){.teaser__lead{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr)}.teaser__body{grid-template-columns:minmax(0,1.5fr) minmax(16rem,.75fr);gap:var(--space-4xl)}}
.teaser__cta-link{white-space:normal}.teaser__entry-meta{white-space:normal}.intro__note p{display:inline}.intro__note strong{margin-right:.4em}
.zoom-parallax__layer:nth-child(2) .zoom-parallax__frame{top:-30vh;left:5vw;height:30vh;width:35vw}
.zoom-parallax__layer:nth-child(3) .zoom-parallax__frame{top:-10vh;left:-25vw;height:45vh;width:20vw}
.zoom-parallax__layer:nth-child(4) .zoom-parallax__frame{left:27.5vw;height:25vh;width:25vw}
.zoom-parallax__layer:nth-child(5) .zoom-parallax__frame{top:27.5vh;left:5vw;height:25vh;width:20vw}
.zoom-parallax__layer:nth-child(6) .zoom-parallax__frame{top:27.5vh;left:-22.5vw;height:25vh;width:30vw}
.zoom-parallax__layer:nth-child(7) .zoom-parallax__frame{top:22.5vh;left:25vw;height:15vh;width:15vw}
.zoom-parallax:not(.is-animated){height:auto;padding:var(--space-xl)}
.zoom-parallax:not(.is-animated) .zoom-parallax__sticky{position:static;height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md)}
.zoom-parallax:not(.is-animated) .zoom-parallax__layer{position:static;display:block;transform:none!important;will-change:auto}
.zoom-parallax:not(.is-animated) .zoom-parallax__frame{top:auto;left:auto;width:100%;height:auto;aspect-ratio:4/3}
.fluid-grid__item:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px}
@media(max-width:600px){.fluid-grid{height:32rem;gap:.5rem}.fluid-grid__row{gap:.5rem}.fluid-grid__copy{padding:.6rem}.fluid-grid__copy strong{font-size:1rem}.fluid-grid__copy small{white-space:normal}.teaser__portrait{justify-self:start}}
@media(prefers-reduced-motion:reduce){.fluid-grid *{transition:none!important}.zoom-parallax{height:auto!important}.zoom-parallax__layer{transform:none!important}}

/* Schriftauswahl je Block (Editor-Dropdown "Schrift") */
.ps-font-pilcrow-rounded, .ps-font-pilcrow-rounded h1, .ps-font-pilcrow-rounded h2, .ps-font-pilcrow-rounded h3, .ps-font-pilcrow-rounded p, .ps-font-pilcrow-rounded blockquote, .ps-font-pilcrow-rounded figcaption, .ps-font-pilcrow-rounded small { font-family: "Pilcrow Rounded", var(--font-body); }
.ps-font-pilcrow-rounded .hero__caption { font-weight: 500; }
.ps-font-display-serif, .ps-font-display-serif h1, .ps-font-display-serif h2, .ps-font-display-serif h3, .ps-font-display-serif p, .ps-font-display-serif blockquote, .ps-font-display-serif figcaption, .ps-font-display-serif small { font-family: var(--font-display); }

/* Globale Standardschrift (Design → Theme-Einstellungen) */
.ps-site-font-pilcrow-rounded, .ps-site-font-pilcrow-rounded h1, .ps-site-font-pilcrow-rounded h2, .ps-site-font-pilcrow-rounded h3, .ps-site-font-pilcrow-rounded p, .ps-site-font-pilcrow-rounded blockquote, .ps-site-font-pilcrow-rounded figcaption, .ps-site-font-pilcrow-rounded small { font-family: "Pilcrow Rounded", var(--font-body); }
.ps-site-font-display-serif, .ps-site-font-display-serif h1, .ps-site-font-display-serif h2, .ps-site-font-display-serif h3, .ps-site-font-display-serif p, .ps-site-font-display-serif blockquote, .ps-site-font-display-serif figcaption, .ps-site-font-display-serif small { font-family: var(--font-display); }

/* Hintergrund-Ebenen für Abschnitte mit eigenem Hintergrundbild/-farbe (Stufe A).
   Ohne .ps-has-bg bzw. ohne style-Attribute bleibt das exakte Legacy-Rendering. */
.ps-has-bg { position: relative; isolation: isolate; }
.ps-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.ps-bg__image img, .ps-bg__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-bg__overlay { position: absolute; inset: 0; }
/* Hero/CTA: Overlay-Stärke über --ps-overlay steuerbar (Standard bleibt unverändert). */
.hero .hero__shade, .closing-image::after { background: var(--ps-overlay, var(--color-overlay)); }
.hero .hero__shade { background: linear-gradient(90deg, var(--ps-overlay, var(--color-overlay)), var(--color-transparent)); }