/* =============================================================================
 * landing-stadt.css — "Stadt · Foto" landing page (template-landing-stadt.php)
 *
 * Pseudo one-pager inside the shared public shell. Everything is scoped to
 * body.lps (added by the template) so no other page is touched:
 *   - the shell header waits off-screen until the hero has scrolled away
 *     (body.lps-nav-on, toggled by landing-stadt.js), then slides in in its
 *     compact "is-scrolled" state;
 *   - the shell content panel is unboxed so the hero can run full-bleed; the
 *     template's own beige panel (and the member bar) start below the fold.
 * Effects are CSS only (scroll timelines, :has()); without support, or with
 * reduced motion, the page is simply static and complete. Only transform and
 * opacity animate, so weak phones stay on the compositor.
 * Design reference: public/mockups/landing/4b-stadt-foto.html
 * ============================================================================= */

.lps {
    --lps-red: #7b1e1e;
    --lps-red-deep: #561313;
    --lps-green: #2e5e3a;
    --lps-beige: #e8e4d8;
    --lps-paper: #f4f1ea;
    --lps-ink: #1f2937;
    --lps-muted: #6b7280;
    --lps-line: rgba(31, 41, 55, .14);
    --lps-dark: #2c0808;
    --lps-ease: cubic-bezier(.22, .61, .36, 1);
    overflow-x: clip;
}
html:has(body.lps) { scroll-behavior: smooth; scroll-padding-top: 96px; } /* landing-stadt.js refines it to the bars actually shown */
/* the hero fills the screen that is left: logged-in editors lose the admin bar's height */
.lps.admin-bar { --lps-adminbar: 32px; }
@media (max-width: 782px) { .lps.admin-bar { --lps-adminbar: 46px; } }

/* ---------------------------------------------------------------- shell overrides */
.lps .sk-shell__header { transform: translateY(-101%); transition: transform .45s var(--lps-ease), background .4s ease, box-shadow .4s ease; }
.lps.lps-nav-on .sk-shell__header,
.lps .sk-shell__header:focus-within { transform: none; box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .18); }
.lps .sk-shell__main { padding-bottom: 0; }
.lps .sk-shell__content,
.lps.is-scrolled .sk-shell__content {
    max-width: none; margin: 0; padding: 0; background: none; border-radius: 0; box-shadow: none;
}
.lps .sk-shell__content:has(+ .sk-shell__footer) { margin-bottom: 0; }

/* ---------------------------------------------------------------- shared bits */
.lps-btn {
    display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: .75rem 1.4rem; border-radius: .35rem;
    font-weight: 600; font-size: .95rem; line-height: 1; letter-spacing: .02em; text-decoration: none; cursor: pointer;
    border: 2px solid transparent; background: var(--lps-red); color: #fff;
    transition: background .2s, transform .2s var(--lps-ease);
}
.lps-btn:hover, .lps-btn:focus-visible { background: var(--lps-red-deep); color: #fff; transform: translateY(-2px); }
.lps-btn svg { width: 1.1em; height: 1.1em; fill: currentColor; transition: transform .2s var(--lps-ease); }
.lps-btn:hover svg { transform: translateX(3px); }
.lps-link { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; color: var(--lps-red); font-weight: 600; text-decoration: none; }
.lps-link:hover { color: var(--lps-red); text-decoration: underline; text-underline-offset: 4px; }
.lps-link svg { width: 1em; height: 1em; fill: currentColor; }
.lps :focus-visible { outline: 3px solid #ffc107; outline-offset: 3px; }

@keyframes lps-rise { from { opacity: 0; transform: translateY(2.5rem); } }
@keyframes lps-fade { from { opacity: 0; } }
@keyframes lps-intro { from { opacity: 0; transform: translateY(1.25rem); } }
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .lps [data-reveal] { animation: lps-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
        .lps [data-reveal="fade"] { animation-name: lps-fade; }
    }
}

/* ---------------------------------------------------------------- hero */
.lps-hero { position: relative; min-height: max(520px, calc(100svh - var(--lps-adminbar, 0px))); overflow: hidden; color: #fff; isolation: isolate; background: var(--lps-dark); }
.lps-hero__bar { position: absolute; inset: 0 0 auto; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .75rem 1rem; }
.lps-hero__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #fff; }
.lps-hero__icon:hover { color: rgba(255, 255, 255, .85); }
.lps-hero__icon svg { width: 24px; height: 24px; fill: currentColor; }
.lps-hero__tools { display: flex; align-items: center; gap: .5rem; }
.lps-hero .sk-lang-switcher { display: flex; gap: .1rem; font-size: .78rem; letter-spacing: .12em; }
.lps-hero .sk-lang-switcher a, .lps-hero .sk-lang-switcher span { padding: .5rem .45rem; color: #fff; text-decoration: none; opacity: .72; border: 0; }
.lps-hero .sk-lang-switcher a:hover { opacity: 1; }
.lps-hero .sk-lang-switcher .is-current { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.lps-hero__menu {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .9rem; color: #fff; background: none;
    border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; font: inherit; font-weight: 600; font-size: .78rem; line-height: 1;
    letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
.lps-hero__menu svg { width: 18px; height: 18px; fill: currentColor; }
.lps-hero__menu:hover { background: rgba(255, 255, 255, .1); }

/* the band photo as the backdrop: a burgundy scrim keeps the logo legible on
   top and melts the bottom into the dark the content panel rises out of */
.lps-photo { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--lps-dark); }
.lps-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transform: scale(1.08); animation: lps-open 1.6s var(--lps-ease) both; }
@keyframes lps-open { from { opacity: 0; transform: scale(1.16); } }
.lps-scrim {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(48% 26% at 50% 34%, rgba(40, 8, 8, .78), rgba(40, 8, 8, 0) 100%),
        linear-gradient(180deg, rgba(46, 9, 9, .9) 0%, rgba(78, 17, 17, .72) 30%, rgba(78, 17, 17, .28) 55%, rgba(44, 8, 8, .55) 78%, var(--lps-dark) 100%),
        radial-gradient(120% 80% at 50% 45%, transparent 40%, rgba(44, 8, 8, .55) 100%);
}
@media (max-width: 700px) {
    .lps-photo img { object-position: 50% 70%; }
    .lps-scrim { background:
        radial-gradient(90% 22% at 50% 30%, rgba(40, 8, 8, .8), rgba(40, 8, 8, 0) 100%),
        linear-gradient(180deg, rgba(46, 9, 9, .92) 0%, rgba(78, 17, 17, .7) 34%, rgba(78, 17, 17, .3) 56%, rgba(44, 8, 8, .7) 80%, var(--lps-dark) 100%); }
}

.lps-hero__title { position: absolute; z-index: 2; inset: 24% 0 auto; display: grid; justify-items: center; gap: 1.25rem; padding: 0 1rem; text-align: center; }
.lps-hero__title h1 { margin: 0; line-height: 0; }
.lps-hero__title img { width: clamp(270px, 50vw, 640px); height: auto; }
@media (prefers-reduced-motion: reduce) {
    .lps-photo img { animation: none; }
}

@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .lps-photo, .lps-hero__title { animation: linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
        .lps-photo { animation-name: lps-drift-photo; }
        .lps-hero__title { animation-name: lps-drift-title; }
    }
}
@keyframes lps-drift-photo { to { transform: translateY(22%); } }
@keyframes lps-drift-title { to { transform: translateY(26vh); opacity: .15; } }

/* hero card: the featured event, else the next event with a live public page (markup mirrors the plugin's .sk-next-strip) */
.lps-next { position: absolute; z-index: 3; left: 50%; bottom: 6.25rem; transform: translateX(-50%); width: min(620px, calc(100% - 2rem)); animation: lps-intro .8s .3s var(--lps-ease) both; }
.lps-next .sk-next-strip {
    display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem; margin: 0; padding: .85rem;
    background: var(--lps-beige); color: var(--lps-ink); border: 0; border-radius: .6rem; box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .35);
}
.lps-next .sk-next-strip__date {
    display: grid; place-content: center; justify-items: center; width: 4.3rem; aspect-ratio: 1; margin: 0; padding: 0;
    background: var(--lps-red); color: #fff; border-radius: .4rem; line-height: 1; text-align: center;
}
.lps-next .sk-next-strip__date b { font-size: 1.75rem; font-weight: 800; }
.lps-next .sk-next-strip__date span { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.lps-next .sk-next-strip__main { min-width: 0; }
.lps-next .sk-next-strip__kicker { margin: 0; font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--lps-red); }
.lps-next .sk-next-strip__title { margin: .1rem 0; font-size: 1.15rem; line-height: 1.2; color: var(--lps-ink); }
.lps-next .sk-next-strip__meta { display: flex; flex-wrap: wrap; gap: .15rem 1rem; font-size: .85rem; color: var(--lps-muted); }
.lps-next .sk-next-strip__meta > * { display: inline-flex; align-items: center; gap: .3rem; color: inherit; }
.lps-next .sk-next-strip__ic { width: 1em; height: 1em; }
.lps-next__cal { color: var(--lps-red) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.lps-next__all { position: absolute; right: .85rem; top: 50%; translate: 0 -50%; }
.lps-next:has(.lps-next__all) .sk-next-strip { padding-right: 12.75rem; }
@media (max-width: 560px) {
    .lps-next { bottom: 4.75rem; }
    .lps-next .sk-next-strip__date { width: 3.8rem; }
    .lps-next:has(.lps-next__all) .sk-next-strip { padding-right: .85rem; padding-bottom: 4rem; }
    .lps-next__all { top: auto; bottom: .85rem; right: auto; left: calc(3.8rem + 1.85rem); translate: none; min-height: 40px; padding: .5rem 1rem; font-size: .85rem; }
}

/* no event but a call to action: the campaign box on the photo, right side
   (homepage-variations/5-unterstuetzen): title, formatted text, up to three buttons */
.lps-hcta {
    position: absolute; z-index: 3; right: clamp(1rem, 6vw, 11rem); bottom: 5.5rem; width: min(360px, calc(100% - 2rem));
    animation: lps-intro .8s .3s var(--lps-ease) both;
}
.lps-hcta {
    padding: 1rem 1.4rem 1.1rem; background: var(--lps-beige); color: var(--lps-ink); font-size: .95rem;
    border: 1px solid rgba(255, 255, 255, .7); border-radius: 1rem;
    box-shadow: 0 0 0 4px rgba(123, 30, 30, .35), 0 1.25rem 2.5rem rgba(0, 0, 0, .4);
}
.lps-hcta h2 { margin: 0 0 .4rem; font-size: 1.6rem; line-height: 1.15; font-weight: 800; color: var(--lps-red-deep); }
.lps-hcta__text p { margin: 0 0 .75rem; }
.lps-hcta__text > :last-child { margin-bottom: 0; }
.lps-hcta__text a { color: var(--lps-red); text-decoration: underline; }
.lps-hcta__text ul, .lps-hcta__text ol { margin: 0 0 .75rem; padding-left: 1.2rem; }
.lps-hcta__buttons { display: grid; gap: .5rem; margin-top: .85rem; }
.lps-hcta__buttons .lps-btn { justify-content: center; width: 100%; border-radius: .6rem; }
.lps-btn--ghost { background: transparent; color: var(--lps-red); border-color: var(--lps-red); }
.lps-btn--ghost:hover, .lps-btn--ghost:focus-visible { background: var(--lps-red); color: #fff; }
@media (max-width: 700px) { .lps-hcta { left: 1rem; right: 1rem; width: auto; bottom: 3.75rem; } }

/* no event: "Das sind wir." takes the card's place in the hero */
.lps-hero-about {
    position: absolute; z-index: 3; left: 50%; bottom: 5.5rem; transform: translateX(-50%); width: min(1040px, calc(100% - 2rem));
    display: grid; grid-template-columns: auto 1fr; gap: 1rem 2.5rem; align-items: start; padding: 1.4rem 1.6rem;
    background: var(--lps-beige); color: var(--lps-ink); border-radius: .7rem; box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .35);
    animation: lps-intro .8s .3s var(--lps-ease) both;
}
.lps-hero-about__h { margin: 0; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.05; font-weight: 800; letter-spacing: -.025em; color: var(--lps-red); white-space: nowrap; }
.lps-hero-about .lps-about__list { gap: 1.1rem; }
.lps-hero-about .lps-about__list li { padding-top: .6rem; }
.lps-hero-about .lps-about__list strong { font-size: .98rem; }
.lps-hero-about .lps-about__list span { font-size: .88rem; }
@media (max-width: 900px) {
    .lps-hero-about { grid-template-columns: 1fr; bottom: 4rem; padding: 1.1rem 1.2rem; }
    .lps-hero-about .lps-about__list { gap: .55rem; }
    .lps-hero-about .lps-about__list li { padding-top: .45rem; }
}
.lps-about__yearh--first { margin-top: 0; }

/* scroll cue: a gently bobbing chevron, faded out as the hero leaves */
.lps-scroll {
    position: absolute; z-index: 3; left: 50%; bottom: 1.5rem; translate: -50% 0; display: grid; justify-items: center; gap: .1rem;
    color: rgba(255, 255, 255, .85); text-decoration: none; font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}
.lps-scroll:hover, .lps-scroll:focus-visible { color: #fff; }
.lps-scroll svg { width: 26px; height: 26px; fill: currentColor; animation: lps-bob 1.8s ease-in-out infinite; }
@keyframes lps-bob { 0%, 100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(6px); opacity: 1; } }
@media (max-width: 560px) { .lps-scroll { bottom: .6rem; } .lps-scroll span { display: none; } }
@media (prefers-reduced-motion: reduce) { .lps-scroll svg { animation: none; } }
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .lps-scroll { animation: lps-fade-out linear both; animation-timeline: scroll(root); animation-range: 0 30vh; }
    }
}
@keyframes lps-fade-out { to { opacity: 0; } }

/* back to top: appears with the header, once the hero has scrolled away */
.lps-top {
    position: fixed; z-index: 35; right: 1.25rem; bottom: 1.25rem; display: grid; place-items: center; width: 48px; height: 48px;
    border-radius: 50%; background: var(--lps-red); color: #fff; box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .25);
    opacity: 0; translate: 0 1rem; pointer-events: none; transition: opacity .3s, translate .3s var(--lps-ease), background .2s;
}
.lps-top svg { width: 24px; height: 24px; fill: currentColor; transition: transform .2s var(--lps-ease); }
.lps-top:hover, .lps-top:focus-visible { background: var(--lps-red-deep); color: #fff; }
.lps-top:hover svg { transform: translateY(-2px); }
.lps.lps-nav-on .lps-top, .lps-top:focus-visible { opacity: 1; translate: none; pointer-events: auto; }
@media (max-width: 560px) { .lps-top { right: .9rem; bottom: .9rem; width: 44px; height: 44px; } }

/* ---------------------------------------------------------------- panel */
/* starts below the fold: the first screen is the hero alone */
.lps-after { background: linear-gradient(180deg, var(--lps-dark) 0, var(--lps-dark) 3.5rem, rgba(90, 23, 23, .8) 14rem, rgba(90, 23, 23, 0) 34rem); padding: 1.5rem .5rem; }
.lps-panel {
    position: relative; z-index: 4; max-width: 1140px; margin: 0 auto; background: var(--lps-beige); color: var(--lps-ink);
    border-radius: .9rem .9rem .5rem .5rem; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3.5rem) 1rem;
}
/* member bar: its own sticky box (regular style) between hero and panel */
.lps-after > .sk-member-nav-wrap { position: sticky; z-index: 30; max-width: 1140px; margin: 0 auto 1rem; }
.lps-sec { padding: clamp(2.5rem, 6vw, 5rem) 0; border-top: 1px solid var(--lps-line); }
.lps-sec:first-of-type { border-top: 0; padding-top: 0; }
.lps-news + .lps-sec { border-top: 0; padding-top: 0; }
.lps-head { display: grid; gap: .5rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); max-width: 46rem; }
.lps-head h2 { margin: 0; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.02; font-weight: 800; letter-spacing: -.025em; color: var(--lps-red); }
.lps-head p { margin: 0; font-size: 1.05rem; color: #4b5563; }

/* über uns — "Das sind wir." + the year */
.lps-about__top { display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem 3rem; align-items: start; }
.lps-about__h { margin: 0; font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.04; font-weight: 800; letter-spacing: -.025em; color: var(--lps-red); }
.lps-about__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.lps-about__list li { margin: 0; padding-top: .8rem; border-top: 1px solid rgba(123, 30, 30, .35); }
.lps-about__list strong { display: block; margin-bottom: .3rem; font-size: 1.05rem; line-height: 1.3; }
.lps-about__list span { font-size: .93rem; color: #4b5563; }
@media (max-width: 900px) { .lps-about__top, .lps-about__list { grid-template-columns: 1fr; } }
.lps-about__yearh { margin: clamp(2.5rem, 5vw, 3.5rem) 0 .9rem; font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--lps-muted); }
.lps-year { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--lps-red); }
.lps-year li { margin: 0; padding: 1rem .9rem 0 0; }
.lps-year li + li { border-left: 1px solid var(--lps-line); padding-left: .9rem; }
.lps-year span { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lps-muted); }
.lps-year strong { display: block; margin: .35rem 0 .2rem; font-size: 1.05rem; line-height: 1.2; }
.lps-year em { font-style: normal; font-size: .88rem; color: #4b5563; }
@media (max-width: 900px) { .lps-year { grid-template-columns: 1fr 1fr; row-gap: 1.25rem; } .lps-year li + li { border-left: 0; padding-left: 0; } }
.lps-about__foot { margin-top: 1.5rem; }
.lps-about__links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }

/* jugend */
.lps-youth { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 900px) { .lps-youth { grid-template-columns: 1fr; } }
.lps-collage { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, minmax(0, 1fr)); aspect-ratio: 1.15; }
.lps-collage img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: .55rem; border: 5px solid var(--lps-paper); box-shadow: 0 .6rem 1.4rem rgba(0, 0, 0, .18); }
.lps-collage img:nth-child(1) { grid-area: 1 / 1 / 5 / 5; z-index: 1; }
.lps-collage img:nth-child(2) { grid-area: 2 / 4 / 6 / 7; z-index: 2; transform: rotate(2.5deg); }
.lps-collage img:nth-child(3) { grid-area: 4 / 2 / 7 / 5; z-index: 3; transform: rotate(-2deg); }
.lps-steps { list-style: none; margin: 1.25rem 0 1.5rem; padding: 0; display: grid; gap: .6rem; counter-reset: lps; }
.lps-steps li { display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; align-items: baseline; counter-increment: lps; margin: 0; }
.lps-steps li::before { content: counter(lps); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--lps-red); color: #fff; font-weight: 700; font-size: .9rem; }
.lps-steps strong { display: block; }
.lps-steps span { color: #4b5563; font-size: .92rem; }
.lps-bk {
    display: grid; grid-template-columns: auto 1fr auto; gap: 1rem 1.75rem; align-items: center; margin-top: clamp(2rem, 4vw, 3rem);
    padding: clamp(1.25rem, 3vw, 2rem); background: var(--lps-red); color: #fff; border-radius: .7rem;
}
.lps-bk__mark { display: grid; place-items: center; width: 4.5rem; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.lps-bk__mark svg { width: 2.1rem; height: 2.1rem; fill: #fff; }
.lps-bk h3 { margin: 0 0 .5rem; font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.15; color: #fff; }
.lps-bk p { margin: 0 0 .5rem; color: rgba(255, 255, 255, .88); max-width: 60ch; }
.lps-bk p:last-child { margin-bottom: 0; }
.lps-bk .lps-btn { background: #fff; color: var(--lps-red); }
.lps-bk .lps-btn:hover, .lps-bk .lps-btn:focus-visible { background: var(--lps-beige); color: var(--lps-red); }
@media (max-width: 760px) {
    .lps-bk { grid-template-columns: 1fr; }
    .lps-bk__mark { width: 3.5rem; }
    .lps-bk .lps-btn { justify-self: start; }
}
.lps-cta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* medien — the [sk_items] gallery, laid out as a mosaic of its first five photos */
.lps-media__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; margin-bottom: 1.5rem; }
.lps-media__meta { margin: .4rem 0 0; color: var(--lps-muted); }
.lps-media__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.lps-media--gallery [data-sk-gallery]:has(> :nth-child(5)) {
    display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .6rem; aspect-ratio: 2.4 / 1;
}
.lps-media--gallery [data-sk-gallery]:has(> :nth-child(5)) > * { aspect-ratio: auto; height: 100%; border-radius: .55rem; }
.lps-media--gallery [data-sk-gallery]:has(> :nth-child(5)) > :first-child { grid-row: span 2; }
.lps-media--gallery [data-sk-gallery] > :nth-child(n+6) { display: none; }
.lps-media--gallery [data-sk-gallery] > :nth-child(5) { position: relative; }
.lps-media--gallery[style] [data-sk-gallery] > :nth-child(5)::after {
    content: var(--lps-more); position: absolute; inset: 0; display: grid; place-items: center; background: rgba(86, 19, 19, .72);
    color: #fff; font-size: 1.6rem; font-weight: 800; pointer-events: none;
}
@media (max-width: 700px) {
    .lps-media--gallery [data-sk-gallery]:has(> :nth-child(5)) { grid-template-columns: 1fr 1fr; grid-template-rows: auto; aspect-ratio: auto; }
    .lps-media--gallery [data-sk-gallery]:has(> :nth-child(5)) > * { aspect-ratio: 1; }
    .lps-media--gallery [data-sk-gallery]:has(> :nth-child(5)) > :first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }
}

/* aktuelles — a strip of headlines opening the panel */
.lps-news { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)) auto; margin: 0 0 clamp(1.5rem, 4vw, 2.5rem); border-top: 2px solid var(--lps-red); border-bottom: 1px solid var(--lps-line); }
.lps-news__lbl { align-self: center; margin: 0; padding: .9rem 1.25rem .9rem 0; font-size: 1.15rem; font-weight: 800; color: var(--lps-red); }
.lps-news__item { display: grid; grid-template-columns: 3.4rem 1fr; gap: .7rem; align-items: center; padding: .9rem 1rem; color: inherit; text-decoration: none; border-left: 1px solid var(--lps-line); transition: background .2s; }
.lps-news__item:hover, .lps-news__item:focus-visible { background: rgba(255, 255, 255, .5); color: inherit; }
.lps-news__item:hover strong { color: var(--lps-red); }
.lps-news__img { display: block; width: 3.4rem; aspect-ratio: 1; border-radius: .35rem; overflow: hidden; background: #ded8c8; }
.lps-news__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lps-news time { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lps-muted); }
.lps-news strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .95rem; line-height: 1.25; }
.lps-news__all { display: inline-flex; align-items: center; gap: .35rem; padding: .9rem 0 .9rem 1rem; border-left: 1px solid var(--lps-line); color: var(--lps-red); font-weight: 600; text-decoration: none; white-space: nowrap; }
.lps-news__all:hover { color: var(--lps-red); text-decoration: underline; text-underline-offset: 4px; }
.lps-news__all svg { width: 1em; height: 1em; fill: currentColor; }
@media (max-width: 900px) {
    .lps-news { grid-template-columns: 1fr; }
    .lps-news__lbl { padding: .8rem 0 .3rem; }
    .lps-news__item, .lps-news__all { border-left: 0; border-top: 1px solid var(--lps-line); padding-left: 0; }
}