/**
 * Mehrlenstein brand overrides — keep separate from app.css.
 */
/* Navigation labels must not inherit a subpage's editorial font. */
.header .wr-menu-btn,
.header .wr-menu-btn .btn,
.header .wr-menu-btn .btn__text,
.header .wr-menu-btn .btn__text span {
    font-family: Inter, Helvetica, Arial, sans-serif !important;
    font-weight: 500 !important;
}

.header__logo img,
.header__logo img.wr-logo,
.header__logo img[src*="logowhite.png"] {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.header__logo--mobile img,
.header__logo--mobile img.wr-logo,
.header__logo--mobile img[src*="logowhite.png"] {
    display: block;
    width: clamp(120px, 28vw, 180px);
    height: auto;
    max-height: 30px;
    object-fit: contain;
}

.wr-preloader__logo-img {
    display: block;
    width: clamp(180px, 32vw, 340px);
    height: auto;
    opacity: 0;
    transform: translateY(16px);
    animation: wrPreloaderLogoIn 1s cubic-bezier(.2, .7, .2, 1) .15s forwards;
    filter: drop-shadow(0 1px 26px rgba(0, 0, 0, .55));
}

@keyframes wrPreloaderLogoIn {
    to {
        opacity: 1;
        transform: none;
    }
}

.wr-intro__logo-img {
    display: block;
    width: clamp(220px, 38vw, 420px);
    height: auto;
}

/* Preload intro is disabled — never flash the overlay if markup returns. */
#wr-intro {
    display: none !important;
}

/* =========================================================
   Header redesign — logo left, nav center, menu right.
   (Springs puts burger left + logo center; this flips it.)
   ========================================================= */
.header__left .header__logo {
    display: flex;
    align-items: center;
    height: 100%;
}

.header__left .header__logo img.wr-logo {
    height: 30px;
}

.wr-header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.6em;
}

/* MENU button on the right: text first, burger lines after it. */
.wr-menu-btn .btn__content {
    flex-direction: row-reverse;
}

.wr-menu-btn .btn__icon {
    margin-right: 0 !important;
    margin-left: .9em;
}

.footer__logo img[src*="logowhite.png"] {
    width: clamp(140px, 22vw, 220px);
    height: auto;
}

/* Globale .dim-Abdunkelung aus — nur Basis-Klasse ohne Modifikator. */
.dim:not([class*="dim--"]) {
    background: none;
    opacity: 0;
}

/* Mobile Top-Nav: themed plugin setzt ui-light auf split targets → schwarze Icons.
   Haupt-Header (.js-header) soll auf Mobil immer helle Schrift/Icons behalten. */
@media (max-aspect-ratio:10/11) and (max-width:1439px),
(max-aspect-ratio:13/9) and (max-width:667px),
(max-width:979px) {
    .js-header [data-custom-scroll-theme-target] {
        --t-text: var(--c-beige);
        --t-text-rgb: var(--c-beige-rgb);
        --t-heading: var(--c-beige);
        --t-heading-rgb: var(--c-beige-rgb);
        --t-button-link-text: var(--c-beige);
        --t-button-link-text-rgb: var(--c-beige-rgb);
        --t-button-link-hover-text: var(--c-beige);
        --t-button-link-hover-text-rgb: var(--c-beige-rgb);
        --t-button-link-hover-border: var(--c-beige);
        --t-button-link-hover-border-rgb: var(--c-beige-rgb);
        --t-line: rgba(var(--c-beige-rgb), 0.2);
        color: var(--c-beige);
    }

    .js-header [data-custom-scroll-theme-target] .btn,
    .js-header [data-custom-scroll-theme-target] .lang-toggle {
        color: var(--c-beige);
    }

    .js-header [data-custom-scroll-theme-target] .icon {
        color: var(--c-beige);
    }
}

/* =========================================================
   Hero gallery: 3 straight rows, alternating horizontal marquee
   Completely replaces the tilted Springs parallax gallery.
   ========================================================= */

.wr-hero-gallery,
.wr-hero-gallery__stage,
.wr-hero-gallery .l-gallery__content {
    height: calc(100 * var(--svh));
    width: 100vw;
    overflow: hidden;
    position: absolute;
    inset: 0;
    transform: none !important;
    opacity: 1;
}

#wr-hero-gallery > .l-gallery__split {
    display: none !important;
}

/* Hero caption text must stay visible and on top. */
.wr-hero-gallery .l-gallery__caption {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    color: var(--c-beige, #eeefef) !important;
}

.wr-hero-gallery .l-gallery__caption .text-t1,
.wr-hero-gallery .l-gallery__caption .h0,
.wr-hero-gallery .l-gallery__caption .l-gallery-next,
.wr-hero-gallery .l-gallery__caption a {
    color: var(--c-beige, #eeefef) !important;
    -webkit-text-fill-color: var(--c-beige, #eeefef) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* Seamless top & bottom vignette for hero text readability */
.wr-hero-gallery::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(4, 28, 30, .78) 0%,
        rgba(4, 28, 30, .35) 18%,
        rgba(4, 28, 30, 0) 30%,
        rgba(4, 28, 30, 0) 68%,
        rgba(4, 28, 30, .55) 82%,
        rgba(4, 28, 30, .88) 100%);
    pointer-events: none;
    z-index: 1;
}

.wr-hero-cols {
    position: absolute;
    inset: -12%; /* extra bleed so the tilt never exposes empty corners */
    display: flex;
    gap: 1.4vw;
    padding: 0 1.4vw;
    box-sizing: border-box;
    z-index: 0;
}

.wr-hero-col {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    position: relative;
    height: 100%;
}

.wr-hero-col__loop {
    display: flex;
    flex-direction: column;
    will-change: transform;
}

.wr-hero-col__track {
    display: flex;
    flex-direction: column;
}

/* Spacing lives INSIDE each item so the two loop halves are pixel-identical —
   that is what makes the -50% loop land exactly on the first frame (no glitch). */
.wr-hero-col__item {
    flex: 0 0 auto;
    width: 100%;
    height: calc(66 * var(--svh));
    box-sizing: border-box;
    padding-bottom: 1.4vw;
}

.wr-hero-col__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    pointer-events: none;
    user-select: none;
}

/* Direction: column drifts top -> bottom (translateY -50% -> 0) */
.wr-hero-col--down .wr-hero-col__loop {
    animation: wrMarqueeDown 30s linear infinite;
}

/* Direction: column drifts bottom -> top (translateY 0 -> -50%) */
.wr-hero-col--up .wr-hero-col__loop {
    animation: wrMarqueeUp 26s linear infinite;
}

/* Slight stagger so columns don't feel robotic */
.wr-hero-col--slow .wr-hero-col__loop {
    animation-duration: 36s;
}

@keyframes wrMarqueeDown {
    0% { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}

@keyframes wrMarqueeUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

/* Mobile: same 3-column vertical marquee, tighter */
@media (max-width:979px) {
    .wr-hero-gallery,
    .wr-hero-gallery__stage,
    .wr-hero-gallery .l-gallery__content {
        height: calc(100 * var(--svh));
    }

    .wr-hero-cols {
        gap: 3vw;
        padding: 0;
        /* Widen the strip so each column reads as a real image, not a sliver */
        inset: -12% -30%;
    }

    .wr-hero-col__item {
        height: calc(46 * var(--svh));
        padding-bottom: 3vw;
    }

    .wr-hero-col--down .wr-hero-col__loop {
        animation-duration: 20s;
    }

    .wr-hero-col--up .wr-hero-col__loop {
        animation-duration: 17s;
    }

    .wr-hero-col--slow .wr-hero-col__loop {
        animation-duration: 24s;
    }

    /* --- Mobile caption: readable, never clipped, anchored bottom-left --- */

    /* Stronger bottom scrim so text sits on darkness, not on busy tiles */
    .wr-hero-gallery::after {
        background: linear-gradient(180deg,
            rgba(4, 28, 30, .72) 0%,
            rgba(4, 28, 30, .25) 20%,
            rgba(4, 28, 30, 0) 38%,
            rgba(4, 28, 30, .55) 62%,
            rgba(4, 28, 30, .92) 88%,
            rgba(4, 28, 30, .97) 100%);
    }

    .wr-hero-gallery .l-gallery__caption {
        inset: 0;
        padding: 0 7vw calc(8 * var(--svh));
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end; /* text block hugs the bottom */
        gap: 2.6vh;
    }

    .wr-hero-gallery .l-gallery__caption .col,
    .wr-hero-gallery .l-gallery__caption .l-gallery__title {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        text-align: left !important;
    }

    /* Theme pins the title absolutely (desktop bottom-right) — release it into flow */
    .wr-hero-gallery .l-gallery__caption .l-gallery__title {
        position: static !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }

    .wr-hero-gallery .l-gallery__caption .text-t1 {
        font-size: 13px;
        line-height: 1.5;
        max-width: 34ch;
        text-shadow: 0 1px 14px rgba(4, 28, 30, .8);
    }

    .wr-hero-gallery .l-gallery__caption .h0 {
        font-size: clamp(38px, 11.5vw, 56px);
        line-height: 1.04;
        text-shadow: 0 2px 22px rgba(4, 28, 30, .8);
    }

    /* Scroll cue sits in flow, clear of the text */
    .wr-hero-gallery .l-gallery__caption .l-gallery-next {
        position: static !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;
        margin-top: 1vh;
    }
}

/* =========================================================
   Hero upgrade: living mosaic + poetic caption reveal
   ========================================================= */

/* 12° left tilt + mouse parallax drift (JS sets --px/--py). */
.wr-hero-cols {
    transform: translate3d(var(--px, 0), var(--py, 0), 0) rotate(-12deg) scale(1.06);
    transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}

/* Tiles get a slow, luxurious transition channel so the bloom feels cinematic. */
.wr-hero-col__item img {
    transition: filter 1.6s ease, transform 6s ease;
    transform: scale(1.001);
    will-change: transform, filter;
}

/* Occasional soft "gallery light" bloom on a single tile. */
.wr-hero-col__item.is-glow img {
    filter: brightness(1.16) saturate(1.06);
    transform: scale(1.045);
}

/* ---- Caption: staggered word reveal once the intro is done ---- */
.wr-hero-title .wr-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    /* Expand the rise-mask without moving the title: padding in, same margin out. */
    padding-bottom: .22em;
    margin-bottom: -.22em;
}

.wr-hero-title .wr-word__in {
    display: inline-block;
    transform: translateY(115%);
    opacity: 0;
}

.wr-hero-title .wr-word__in--accent {
    font-style: italic;
}

html.wr-intro-done .wr-hero-title .wr-word__in {
    animation: wrWordRise 1.05s cubic-bezier(.19, 1, .22, 1) var(--d, 0s) both;
}

@keyframes wrWordRise {
    from { transform: translateY(115%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* Tagline rises gently after the headline starts.
   Only the ACTIVE language span becomes inline-block, so the global
   .t-de/.t-en display:none language toggle keeps working. */
html:not([data-lang="en"]) .wr-hero-gallery .l-gallery__caption .text-t1 > .t-de,
html[data-lang="en"] .wr-hero-gallery .l-gallery__caption .text-t1 > .t-en {
    display: inline-block;
}

html.wr-intro-done .wr-hero-gallery .l-gallery__caption .text-t1 > span {
    animation: wrFadeRise 1.1s cubic-bezier(.19, 1, .22, 1) .45s both;
}

@keyframes wrFadeRise {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* Scroll cue breathes. */
html.wr-intro-done .wr-hero-gallery .l-gallery-next {
    animation: wrCuePulse 2.6s ease-in-out 1.2s infinite;
}

@keyframes wrCuePulse {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50%      { transform: translateY(7px); opacity: .65; }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .wr-hero-col__loop {
        animation: none !important;
    }
    .wr-hero-cols {
        transform: rotate(-12deg) scale(1.06) !important; /* keep the tilt, kill the drift */
        transition: none !important;
    }
    .wr-hero-col__item img {
        transition: none !important;
    }
    .wr-hero-title .wr-word__in {
        transform: none !important;
        opacity: 1 !important;
        animation: none !important;
    }
    .wr-hero-gallery .l-gallery__caption .text-t1 > span,
    .wr-hero-gallery .l-gallery-next {
        animation: none !important;
    }
}





/* =========================================================
   Amenities as horizontal chapters (replaces the old slider)
   Scroll down = panels travel sideways. Pinned via the theme's
   sticky layer; JS drives translateX from scroll progress.
   ========================================================= */

.wr-chapters-portal {
    position: fixed;
    inset: 0;
    z-index: 34; /* behind Wohnkomfort (36), above the page */
    overflow: hidden;
    display: none;
    background: #041c1e;
    pointer-events: none;
}

.wr-chapters-portal,
.wr-chapters-portal * {
    pointer-events: none !important;
}

.wr-chapters-portal .wr-chapters__pin {
    height: 100%;
    width: 100%;
    transform: none !important;
}

/* Amenities already owns its scroll distance through __space. Keep only the
   100svh offset that balances the generic under-next negative margin. */
#wr-chapters.sticky--under-previous.sticky--under-next::after {
    height: calc(100 * var(--svh));
}

#wr-chapters {
    min-height: calc(430 * var(--svh));
    background: #041c1e;
}

.wr-chapters__space {
    grid-area: sticky_content;
    height: calc(430 * var(--svh)); /* scroll distance for the sideways journey */
}

.wr-chapters__pin {
    height: calc(100 * var(--svh));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: var(--c-beige, #eeefef);
    background: #041c1e; /* opaque, so the wellness layer beneath never bleeds through */
}

.wr-chapters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: calc(10 * var(--svh));
    padding-bottom: 3vh;
}

.wr-chapters__eyebrow {
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: .55;
}

.wr-chapters__progress {
    width: clamp(120px, 14vw, 220px);
    height: 1px;
    background: rgba(238, 239, 239, .18);
    position: relative;
}

.wr-chapters__bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: currentColor;
}

.wr-chapters__track {
    display: flex;
    align-items: stretch;
    gap: 8vw;
    padding: 0 33vw;
    flex: 1;
    min-height: 0;
    will-change: transform;
}

.wr-chapter {
    position: relative;
    flex: 0 0 auto;
    width: 68vw;
    max-width: 980px;
    display: flex;
    align-items: center;
    gap: 4vw;
    transform-origin: 82% 88%;
    will-change: transform;
}

.wr-chapter__num {
    position: absolute;
    top: -0.52em;
    right: -0.18em;
    left: auto;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(84px, 10vw, 150px);
    font-weight: 400;
    line-height: 1;
    color: #fff;
    -webkit-text-stroke: 0;
    text-shadow: none;
    pointer-events: none;
    user-select: none;
    z-index: 4;
}

.wr-chapter__media {
    position: relative;
    z-index: 1;
    flex: 0 0 34vw;
    height: calc(80 * var(--svh));
    margin: 0;
    overflow: hidden;
}

.wr-chapter__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.08); /* headroom for the inner counter-drift */
    will-change: transform;
}

.wr-chapter__body {
    position: absolute;
    left: calc(34vw - 22vw);
    bottom: 4vh;
    z-index: 3;
    width: 22vw;
    flex: none;
    min-width: 0;
    margin-left: 0;
    padding: clamp(22px, 2.5vw, 40px);
    background: #173b36;
    box-sizing: border-box;
}

.wr-chapter__title {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 400;
    font-size: clamp(34px, 4.2vw, 64px);
    line-height: 1.05;
    letter-spacing: -.01em;
    margin: 0 0 3vh;
    color: #fff;
}

.wr-chapter__title::before {
    content: "";
    display: block;
    width: 44px;
    height: 1px;
    background: currentColor;
    opacity: .5;
    margin-bottom: 3vh;
}

.wr-chapter__text {
    font-size: clamp(14px, 1.1vw, 17px);
    line-height: 1.65;
    opacity: .78;
    max-width: 40ch;
}

/* Mobile: stacked panel, wider */
@media (max-width: 979px) {
    .wr-chapters__space {
        height: calc(400 * var(--svh));
    }

    .wr-chapters__head {
        padding-top: calc(11 * var(--svh));
    }

    .wr-chapters__track {
        gap: 8vw;
        padding: 0 6vw 0 10vw;
    }

    .wr-chapter {
        width: 80vw;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 3vh;
    }

    .wr-chapter__num {
        position: static;
        align-self: flex-start;
        order: -1;
        top: auto;
        right: auto;
        margin-bottom: -3vh; /* let it hug the image like the desktop overlap */
        font-size: clamp(64px, 17vw, 96px);
    }

    .wr-chapter__media {
        flex: 0 0 auto;
        width: 100%;
        height: calc(40 * var(--svh));
    }

    .wr-chapter__body {
        display: contents; /* number above the image; title/text stay in the column */
    }

    .wr-chapter__title {
        font-size: clamp(30px, 8.5vw, 42px);
        margin-bottom: 1.6vh;
    }

    .wr-chapter__title::before {
        margin-bottom: 1.8vh;
    }

    .wr-chapter__text {
        font-size: 14px;
    }
}

/* Intro: pinned dark-green story with scroll-scrubbed right-side triptych. */
.wr-triptych {
    position: absolute;
    top: 0;
    right: 4vw;
    bottom: 0;
    left: 4vw;
    z-index: 1;
    display: flex;
    gap: 1.2vw;
    align-items: center;
    justify-content: stretch;
    padding: 0;
    pointer-events: none;
}

#about .sticky__layer:first-child::before,
.wr-intro-opening-portal .sticky__layer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url("../images/media/landing/1.intro/windows1.webp") center / cover no-repeat;
    opacity: var(--intro-opening-photo-opacity, 1);
    transform: scale(var(--intro-opening-photo-zoom, 1));
    transform-origin: center center;
    will-change: transform, opacity;
}

.wr-triptych__panel {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    height: 100%;
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translate3d(0, 9vh, 0);
    contain: layout paint;
    will-change: opacity, transform, clip-path;
    border: 1px solid rgba(238, 239, 239, .28);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .34);
}

.wr-triptych__panel:nth-child(2) {
    height: 100%;
    margin-top: 0;
}

.wr-triptych__panel:nth-child(3) {
    height: 100%;
    margin-top: 0;
}

.wr-triptych__panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: translateZ(0);
}

/* Grid stays viewport-pinned (ported to body). Second hero overlays it
   from the top — the mosaic and headline must not travel with scroll. */
.wr-hero-gallery-portal {
    position: fixed;
    inset: 0;
    z-index: 30;
    overflow: hidden;
    background: #041c1e;
    pointer-events: none;
}

.wr-hero-gallery-portal #wr-hero-gallery {
    position: relative;
    width: 100%;
    height: 100%;
    transform: none !important;
}

#l-gallery-sticky {
    z-index: 1;
    /* Kurz halten — Pixelcut startet beim Scrollen, nicht nach 3 Screens Leerlauf. */
    height: 110vh;
    --sticky-under-next-distance: calc(10 * var(--svh));
    contain: none !important;
    content-visibility: visible !important;
    background: transparent !important;
}

#about.l-intro,
#about-mobile.l-intro {
    transform: none !important;
}

#about.l-intro {
    /* ~1vh pixelcut + hold + story scrub */
    position: relative;
    height: 780vh;
    margin-top: 0 !important;
    background: #041c1e;
    color: #eeefef;
    z-index: 6;
    clip-path: none !important;
    contain: none !important;
    content-visibility: visible !important;
}

.wr-intro-opening-portal {
    position: fixed;
    inset: 0;
    z-index: 35;
    display: none;
    overflow: hidden;
    pointer-events: none;
    background: #041c1e;
    clip-path: inset(100% 0 0 0);
    will-change: clip-path, transform;
}

.wr-intro-opening-portal,
.wr-intro-opening-portal * {
    pointer-events: none !important;
}

.wr-intro-opening-portal .sticky__layer {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: none !important;
}

.wr-triptych::after {
    display: none;
}

/* Wohnkomfort slides in from the right and pushes the triptych out to the left. */
.wr-wellness-portal {
    position: fixed;
    inset: 0;
    z-index: 36;
    overflow: hidden;
    pointer-events: none !important;
    display: none;
    background: #041c1e;
    will-change: transform, clip-path;
    transform: translate3d(100%, 0, 0);
}

.wr-wellness-portal,
.wr-wellness-portal * {
    pointer-events: none !important;
}

.wr-wellness-portal .sticky__layer {
    position: relative;
    width: 100%;
    height: 100%;
    transform: none !important;
    pointer-events: none;
}

.wr-wellness-portal .l-wellness__webgl {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.wr-wellness-portal .l-wellness__webgl-inner .background,
.wr-wellness-portal .l-wellness__webgl-inner img {
    transform: scale(var(--wr-wellness-zoom, 1.14));
    transform-origin: center center;
    will-change: transform;
}

.wr-wellness-portal .l-wellness__webgl-caption {
    z-index: 2;
}

.wr-wellness-portal [data-reveal],
.js .wr-wellness-portal [data-reveal]:not([data-reveal-visible]),
.wr-wellness-portal .is-invisible--js {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
}

@media (min-width: 1440px), (min-width: 980px) and (min-aspect-ratio: 10/11) {
    #wellness.l-wellness {
        clip-path: none !important;
        margin-top: 0;
        /* cover push + pin; under-next still overlaps the chapters. */
        height: calc(420 * var(--svh));
        background: transparent;
    }
}

@media (max-width: 979px) {
    #wellness-mobile.l-wellness {
        clip-path: none !important;
        margin-top: 0 !important;
    }
}

.l-intro__opening .h1,
.l-intro__opening .l-intro__opening-subtitle {
    color: #eeefef;
    text-shadow: none;
}

#about .l-intro__opening,
.wr-intro-opening-portal .l-intro__opening {
    z-index: 20;
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0 !important;
    transform: none;
    will-change: opacity;
}

#about .l-intro__opening > .col,
.wr-intro-opening-portal .l-intro__opening > .col {
    position: static;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    flex: none;
}

/* Same slot as hero “Luxuriöse Wohnanlagen”: bottom-right.
   Card flush to viewport edges; text stays on the old spacing-layout inset
   via extra right/bottom padding (max-width grows so wrap doesn't change). */
#about .l-intro__opening .h1,
.wr-intro-opening-portal .l-intro__opening .h1 {
    position: absolute;
    right: 0;
    bottom: 0;
    left: auto;
    top: auto;
    margin: 0;
    max-width: min(calc(56vw + var(--spacing-layout)), calc(15em + var(--spacing-layout)));
    z-index: 2;
    font-size: clamp(42px, 4.4vw, 72px);
    line-height: .94;
    text-align: right;
}

@media (min-width: 980px) {
    .wr-chapters-portal {
        z-index: var(--chapter-layer, 34);
        background: rgba(4, 28, 30, var(--chapter-arrival-bg, 1));
    }
    .wr-chapters-portal .wr-chapters__pin {
        background: transparent;
    }
    .wr-chapters-portal .wr-chapters__track {
        translate: var(--chapter-arrival-x, 0px) var(--chapter-arrival-y, 0px);
        opacity: var(--chapter-arrival-opacity, 1);
    }
    .wr-chapters-portal .wr-chapters__head {
        opacity: var(--chapter-arrival-bg, 1);
    }
}

/* Keep the headline and its underlay on the same scroll-driven surface. */
#about .l-intro__opening .h1,
.wr-intro-opening-portal .l-intro__opening .h1 {
    padding: 48px calc(32px + var(--spacing-layout)) calc(28px + var(--spacing-layout)) 32px;
    box-sizing: border-box;
    background: radial-gradient(ellipse at 55% 115%, #1c4949 0%, #0b292b 42%, #070e0f 85%);
    color: #eeefef;
    transform: translate3d(0, var(--intro-headline-y, 0px), 0);
    clip-path: inset(var(--intro-headline-clip, 0%) 0 0 0);
    will-change: transform, clip-path;
}

/* Same slot as hero “Premium-Neubau…”: offset column, top. */
#about .l-intro__opening-subtitle,
.wr-intro-opening-portal .l-intro__opening-subtitle {
    position: absolute;
    top: calc(var(--spacing) * 7);
    left: 16.6666vw;
    width: 25vw;
    max-width: none;
    margin: 0;
    z-index: 1;
    color: #eeefef;
    font-family: Inter, Helvetica, Arial, sans-serif;
    font-size: calc(var(--scale-text-rem) * 2);
    line-height: 1.1;
    letter-spacing: -.02em;
    text-transform: none;
}

/* Original colour blob, pinned to the 44-copy instead of the old lower slot. */
#about .l-intro .l-intro__gradient:not(.l-intro__gradient--headline),
.wr-intro-opening-portal .l-intro__gradient:not(.l-intro__gradient--headline) {
    display: block;
    top: calc(var(--spacing) * 7 - 22vw);
    left: calc(16.6666vw - 18vw);
    bottom: auto;
    width: 56vw;
    height: 40vw;
    z-index: 1;
    pointer-events: none;
    filter: blur(40px);
    background: radial-gradient(circle, rgba(var(--c-blue-rgb), .8) 0, rgba(var(--c-blue-rgb), .8) 5%, rgba(var(--c-blue-rgb), 0) 70%);
}

#about .l-intro .l-intro__gradient--headline,
.wr-intro-opening-portal .l-intro__gradient--headline {
    display: none;
    top: auto;
    left: auto;
    right: var(--spacing-layout);
    bottom: var(--spacing-layout);
    width: min(56vw, 15em);
    height: 3.2em;
    font-size: clamp(42px, 4.4vw, 72px);
    line-height: .94;
    z-index: 1;
    pointer-events: none;
    transform: translateY(18%) scale(1.5, 1.85);
    transform-origin: 50% 50%;
    filter: blur(36px);
    background: radial-gradient(ellipse 92% 70% at 50% 50%, rgba(var(--c-blue-rgb), .88) 0, rgba(var(--c-blue-rgb), .72) 38%, rgba(var(--c-blue-rgb), 0) 74%);
}

#about .l-intro__content {
    position: absolute;
    inset: 0;
    height: 100svh;
    z-index: 25;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 48vw 0 var(--spacing-layout, 60px);
    background: transparent;
    pointer-events: none;
    will-change: opacity, transform;
}

/* The welcome copy uses one manually pinned layer because this section lives in
   a transformed smooth-scroll layout. Integer-pixel pinning avoids subpixel
   shimmer while the scroll position is settling. */
#about.wr-about-active .l-intro__content {
    position: absolute;
}

/* Body portal for the desktop pinned copy. It is outside the transformed
   smooth-scroll wrapper, so its coordinates are genuinely viewport-stable. */
.wr-intro-content-portal {
    --intro-welcome-surface-opacity: 0;
    position: fixed;
    inset: 0;
    z-index: 40;
    display: none;
    align-items: stretch;
    justify-content: center;
    background: transparent;
    visibility: hidden;
    pointer-events: none;
}

.wr-intro-content-portal::before {
    display: none;
}

.wr-intro-content-portal .l-intro__content {
    position: static;
    z-index: 1;
    width: 100%;
    height: 100svh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    background: transparent;
    will-change: opacity;
}

.wr-intro-content-portal .l-intro__content > * {
    flex: 0 0 auto;
}

.wr-intro-content-portal .l-intro__content-title {
    position: absolute;
    top: calc(var(--spacing) * 7);
    left: 16.6666vw;
    width: min(25vw, 480px);
    margin: 0;
    opacity: 0;
    z-index: 0;
    isolation: isolate;
    will-change: opacity;
}

.wr-intro-content-portal .l-intro__content-title::before,
.wr-intro-content-portal .l-intro__content-text::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    filter: blur(18px);
    background: radial-gradient(ellipse at center, rgba(3, 59, 57, .96) 0%, rgba(3, 50, 49, .82) 44%, rgba(4, 28, 30, 0) 82%);
}

.wr-intro-content-portal .l-intro__content-title::before {
    inset: -14.5vh -8vw;
    opacity: .7;
}

.wr-intro-content-portal .l-intro__content-image {
    display: none;
}

.wr-intro-content-portal .l-intro__content-text {
    position: absolute;
    left: auto;
    right: var(--spacing-layout);
    bottom: var(--spacing-layout);
    width: min(32vw, 460px);
    margin: 0;
    opacity: 0;
    z-index: 0;
    isolation: isolate;
    will-change: opacity;
}

.wr-intro-content-portal .l-intro__content-text::before {
    inset: -12vh -8vw -10vh;
}

.wr-intro-content-portal .l-intro__content .h2,
.wr-intro-content-portal .l-intro__content .l-intro__content-text p,
.wr-intro-content-portal .wr-intro-facts {
    color: #eeefef;
    text-align: left;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .4);
}

.wr-intro-content-portal .l-intro__content .h2,
.wr-intro-content-portal .l-intro__content .h2 *,
.wr-intro-content-portal .wr-intro-facts,
.wr-intro-content-portal .wr-intro-facts *,
.wr-intro-content-portal .l-intro__content-text *,
.wr-intro-content-portal .l-intro__content .animation,
.wr-intro-content-portal .l-intro__content .word-wrap {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

.wr-intro-content-portal .l-intro__content .h2 {
    font-size: clamp(46px, 4.3vw, 72px);
    line-height: .96;
}

.wr-intro-facts {
    margin: 0;
}

.wr-intro-fact {
    margin: 0;
}

.wr-intro-fact + .wr-intro-fact {
    margin-top: 2.6vh;
    padding-top: 2.6vh;
    border-top: 1px solid rgba(238, 239, 239, .28);
}

.wr-intro-facts dt {
    margin: 0 0 .65em;
    font-family: Inter, Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .16em;
    line-height: 1.3;
    text-transform: uppercase;
    color: rgba(238, 239, 239, .78);
}

.wr-intro-facts dd {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .45em;
}

.wr-intro-fact__value {
    display: block;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(46px, 4.2vw, 70px);
    font-weight: 400;
    line-height: .96;
    letter-spacing: -.02em;
    color: #eeefef;
}

.wr-intro-fact__prefix {
    display: inline-block;
    margin-right: .4em;
    font-family: Inter, Helvetica, Arial, sans-serif;
    font-size: .36em;
    font-weight: 500;
    letter-spacing: .14em;
    line-height: 1;
    text-transform: uppercase;
    vertical-align: .7em;
    color: rgba(238, 239, 239, .78);
}

.wr-intro-fact__note {
    display: block;
    font-family: Inter, Helvetica, Arial, sans-serif;
    font-size: clamp(16px, 1.15vw, 20px);
    font-weight: 400;
    letter-spacing: .03em;
    color: rgba(238, 239, 239, .78);
}

.wr-intro-content-portal .wr-intro-facts dt,
.wr-intro-content-portal .wr-intro-fact__prefix,
.wr-intro-content-portal .wr-intro-fact__note {
    text-shadow: 0 1px 14px rgba(0, 0, 0, .35);
}

.wr-intro-content-portal .l-intro__content .l-intro__content-text p {
    color: rgba(238, 239, 239, .92);
    text-align: right;
}

/* .col--md-* sets its width via flex-basis; inside this column flex container
   that basis would become a HEIGHT — force it back to auto (width: N vw still applies) */
#about .l-intro__content > * {
    flex: 0 0 auto;
}

#about .l-intro__content-title {
    width: min(36vw, 560px);
    margin: 0 0 2.4vh 0;
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    will-change: opacity, transform;
}

#about .l-intro__content-image {
    display: none;
}

#about .l-intro__content-text {
    width: min(32vw, 460px);
    margin: 0;
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    will-change: opacity, transform;
}

#about .l-intro__content .h2,
#about .l-intro__content .l-intro__content-text p {
    color: #eeefef;
    text-align: center;
    text-shadow: none;
}

#about .l-intro__content .h2,
#about .l-intro__content .h2 *,
#about .l-intro__content-text *,
#about .l-intro__content .animation,
#about .l-intro__content .word-wrap {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* The desktop intro is driven by the scrub script above. Keep the inactive
   copy isolated so the opening and welcome states cannot paint as a duplicate. */
#about .l-intro__opening,
#about .l-intro__content {
    isolation: isolate;
}

#about .l-intro__content .h2 {
    font-size: clamp(46px, 4.8vw, 78px);
    line-height: .96;
}

#about .l-intro__content .l-intro__content-text p {
    color: rgba(238, 239, 239, .72);
}

/* Mobile intro: three staggered columns rise on load — same triptych DNA as desktop */
.wr-triptych-m {
    position: absolute;
    inset: 0;
    display: flex;
    gap: 2.5vw;
    padding: 0 5vw;
    background: #041c1e; /* opaque — the hero layer sits right beneath and would bleed through the gaps */
}

.wr-triptych-m::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(4, 28, 30, .78) 0%, rgba(4, 28, 30, .30) 32%, rgba(4, 28, 30, 0) 55%);
}

.wr-triptych-m__col {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    animation: wrColRise 1.1s cubic-bezier(.22, 1, .36, 1) both;
}

.wr-triptych-m__col:nth-child(1) { margin-top: 9vh; }
.wr-triptych-m__col:nth-child(2) { animation-delay: .14s; }
.wr-triptych-m__col:nth-child(3) { margin-top: 16vh; animation-delay: .28s; }

.wr-triptych-m__col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@keyframes wrColRise {
    from { transform: translateY(26%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Mobile intro content: staggered image duo, replacing the swipe carousel */
.wr-duo {
    display: flex;
    gap: 4vw;
    align-items: flex-start;
}

.wr-duo__item {
    margin: 0;
    overflow: hidden;
}

.wr-duo__item--a { flex: 0 0 57%; }
.wr-duo__item--b { flex: 1 1 auto; margin-top: 12vh; }

.wr-duo__item img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 979px) {
    .l-intro__content .l-intro__content-title:has(.wr-intro-facts) {
        margin-bottom: 1.4em;
        max-width: none;
    }

    .l-intro__content .wr-intro-facts dt {
        font-size: 13px;
    }

    .l-intro__content .wr-intro-fact__value {
        font-size: clamp(44px, 10.4vw, 58px);
    }

    .l-intro__content .wr-intro-fact__note {
        font-size: 17px;
    }
}

/* Map section: framed cartography on dark green — gallery-hung map instead
   of the springs-style full-bleed map + white card. */
@media (min-width: 980px) {
    #l-map-sticky.wr-map .sticky__layer--sticky {
        background: #041c1e;
    }

    #l-map-sticky.wr-map .background--cover {
        top: 9vh;
        bottom: 9vh;
        left: auto;
        right: 60px;
        width: 44vw;
        border: 1px solid rgba(238, 239, 239, .35);
        padding: 14px;
    }

    #l-map-sticky.wr-map .background--cover picture {
        height: 100%;
    }

    #l-map-sticky.wr-map .l-map-caption {
        pointer-events: none;
    }

    #l-map-sticky.wr-map .l-map-caption > .col.ui-light.ui-background {
        background: transparent;
        color: #eeefef;
        width: 100%;
        max-width: none;
        max-height: none;
        height: 100svh;
        margin: 0;
    }

    #l-map-sticky.wr-map .l-map-caption__text {
        position: absolute;
        left: 60px;
        top: 18vh;
        width: 26vw;
        max-width: 430px;
        padding: 0;
    }

    #l-map-sticky.wr-map .l-map-caption__text .h3 {
        max-width: 100%;
        color: #eeefef;
        font-family: "Playfair Display", Georgia, serif;
        font-weight: 400;
        letter-spacing: -.01em;
    }

    #l-map-sticky.wr-map .l-map-caption > .col > picture {
        flex: 0 0 auto;
        position: absolute;
        left: 60px;
        bottom: 10vh;
        height: auto;
        width: min(30vw, 520px);
        margin: 0;
        border: 1px solid rgba(238, 239, 239, .35);
        padding: 10px;
    }

    #l-map-sticky.wr-map .l-map-caption > .col > picture img {
        height: auto;
        width: 100%;
        object-fit: contain;
        object-position: center;
    }
}

@media (max-width: 979px) {
    #l-map-sticky-2.wr-map .background--cover::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(4, 28, 30, .74);
    }

    #l-map-sticky-2.wr-map .l-map-caption > .col.ui-light.ui-background {
        background: transparent;
        color: #eeefef;
    }

    #l-map-sticky-2.wr-map .l-map-caption__text .h3 {
        color: #eeefef;
        font-family: "Playfair Display", Georgia, serif;
        font-weight: 400;
    }

    #l-map-sticky-2.wr-map .l-map-caption__map {
        border: 1px solid rgba(238, 239, 239, .35);
        padding: 8px;
        margin: 0 var(--spacing-layout, 20px);
        flex-grow: 0;
        overflow: hidden;
    }

    #l-map-sticky-2.wr-map .l-map-caption__map::before,
    #l-map-sticky-2.wr-map .l-map-caption__map picture::after {
        display: none;
    }

    #l-map-sticky-2.wr-map .l-map-caption__map picture,
    #l-map-sticky-2.wr-map .l-map-caption__map img {
        width: 100%;
        height: auto;
    }
}

/* Ruhige Lage hero: two visual answers to the same location question. The
   hovered panel opens up while the other one recedes into the background. */
@media (min-width: 980px) {
#l-map-sticky.wr-location-hero {
    height: 300vh;
        background: #041c1e;
        z-index: 30;
    }

    #l-map-sticky.wr-location-hero > .sticky__layer--sticky {
        height: 100svh;
        overflow: hidden;
        background: #041c1e;
        z-index: 30;
    }

    .wr-location-hero__panels {
        position: relative;
        display: flex;
        height: 100%;
        gap: 2px;
        overflow: hidden;
        background: #041c1e;
        pointer-events: auto;
    }

    .wr-location-hero__panel {
        position: relative;
        flex: 0 0 50%;
        max-width: 50%;
        min-width: 0;
        overflow: hidden;
        isolation: isolate;
        background: #041c1e;
        cursor: crosshair;
        transition: filter 1.45s cubic-bezier(.25, .74, .22, .99);
    }

    .wr-location-hero__panel::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        transition: background 1.45s cubic-bezier(.25, .74, .22, .99), opacity 1.45s cubic-bezier(.25, .74, .22, .99);
    }

    .wr-location-hero__panel--map::after {
        background: linear-gradient(180deg, rgba(7, 10, 10, .08) 36%, rgba(7, 10, 10, .78) 100%);
    }

    .wr-location-hero__panel--city::after {
        background: linear-gradient(180deg, rgba(4, 28, 30, .08) 32%, rgba(4, 28, 30, .84) 100%);
    }

    .wr-location-hero__panel img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        clip-path: inset(29% 18% 29% 18% round 1.15rem);
        transform: scale(1.08);
        transition: transform 1.6s cubic-bezier(.25, .74, .22, .99), filter 1.45s cubic-bezier(.25, .74, .22, .99);
        will-change: transform, clip-path;
    }

    .wr-location-hero__panel--map img {
        object-fit: cover;
        object-position: center;
        background: #111716;
    }

    .wr-location-hero__panel-copy {
        position: absolute;
        right: clamp(24px, 4vw, 72px);
        bottom: clamp(28px, 8vh, 90px);
        left: clamp(24px, 4vw, 72px);
        z-index: 2;
        max-width: 360px;
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .7s ease, transform 1s cubic-bezier(.22, .61, .36, 1), color .7s ease;
    }

    .wr-location-hero__panel--map .wr-location-hero__panel-copy {
        color: #e7e7e4;
    }

    .wr-location-hero__panel--city .wr-location-hero__panel-copy {
        color: #eeefef;
    }

    .wr-location-hero__panel-kicker,
    .wr-location-hero__eyebrow {
        display: block;
        margin-bottom: 14px;
        font-size: 11px;
        letter-spacing: .18em;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .wr-location-hero__panel-copy h3 {
        margin: 0 0 12px;
        font-family: "Playfair Display", Georgia, serif;
        font-size: clamp(32px, 4vw, 64px);
        font-weight: 400;
        line-height: .98;
    }

    .wr-location-hero__panel-copy p,
    .wr-location-hero__intro p {
        max-width: 30ch;
        margin: 0;
        font-size: clamp(14px, 1.1vw, 17px);
        line-height: 1.45;
    }

    .wr-location-hero__intro {
        position: absolute;
        top: clamp(92px, 13vh, 142px);
        left: clamp(24px, 5vw, 84px);
        z-index: 3;
        width: min(28vw, 390px);
        color: #eeefef;
        pointer-events: none;
        transition: color .7s ease, transform 1s cubic-bezier(.22, .61, .36, 1), opacity .7s ease;
    }

    .wr-location-hero__intro h2 {
        margin: 0 0 12px;
        font-family: "Playfair Display", Georgia, serif;
        font-size: clamp(42px, 5.6vw, 92px);
        font-weight: 400;
        line-height: .88;
    }

    .wr-location-hero__hint {
        position: absolute;
        right: clamp(24px, 5vw, 84px);
        bottom: clamp(28px, 5vh, 58px);
        z-index: 3;
        color: rgba(238, 239, 239, .76);
        font-size: 11px;
        letter-spacing: .16em;
        text-transform: uppercase;
        pointer-events: none;
        transition: opacity .5s ease;
    }

    .wr-location-hero__panels.is-hover-map .wr-location-hero__panel--city,
    .wr-location-hero__panels.is-hover-city .wr-location-hero__panel--map {
        background: #041c1e;
    }

    .wr-location-hero__panels.is-hover-map .wr-location-hero__panel--map img,
    .wr-location-hero__panels.is-hover-city .wr-location-hero__panel--city img {
        clip-path: inset(0);
        transform: scale(1.08);
    }

    .wr-location-hero__panels.is-hover-map .wr-location-hero__panel--city img,
    .wr-location-hero__panels.is-hover-city .wr-location-hero__panel--map img {
        clip-path: inset(29% 18% 29% 18% round 1.15rem);
        opacity: 1;
        transform: scale(1.08);
    }

    .wr-location-hero__panels.is-hover-map .wr-location-hero__panel--map .wr-location-hero__panel-copy,
    .wr-location-hero__panels.is-hover-city .wr-location-hero__panel--city .wr-location-hero__panel-copy {
        opacity: 1;
        transform: translateY(0);
    }

    .wr-location-hero__panels.is-hover-map .wr-location-hero__intro {
        color: #e7e7e4;
        transform: scale(.7) translate(-19%, -14%);
        transform-origin: left top;
    }

    .wr-location-hero__panels.is-hover-city .wr-location-hero__intro {
        color: #eeefef;
        transform: scale(.7) translate(-19%, -14%);
        transform-origin: left top;
    }

    .wr-location-hero__panels.is-hover-map .wr-location-hero__hint,
    .wr-location-hero__panels.is-hover-city .wr-location-hero__hint {
        opacity: 0;
    }
}

/* Design gallery: pinned horizontal row of framed figures on dark green,
   serif intro column on the left — replaces springs' two vertical clip slides. */
#l-design-sticky-2.wr-dgal-sec {
    background: #041c1e;
    z-index: 8;
    min-height: 600vh;
    margin-bottom: 0 !important;
}

#l-design-sticky-2 .sticky__layer--sticky,
#l-design-sticky-2 .wr-dgal {
    background: #041c1e;
}

/* Residence keeps a final hold after Penthouse is fully visible. */
@media (min-width: 980px) {
    #l-residences-sticky-1 {
        min-height: 700vh;
    }
}

.wr-dgal {
    position: relative;
    height: 100svh;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.wr-dgal__intro {
    position: absolute;
    left: var(--spacing-layout, 60px);
    top: 50%;
    transform: translateY(-50%);
    width: 24vw;
    z-index: 2;
}

.wr-dgal__kicker {
    margin: 0 0 18px;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(238, 239, 239, .65);
}

.wr-dgal__intro .h3 {
    color: #eeefef;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 1.25;
}

.wr-dgal__track {
    display: flex;
    gap: 2.35vw;
    margin-left: 32vw;
    will-change: transform;
}

.wr-dgal__item {
    margin: 0;
    flex: 0 0 20vw;
    will-change: transform, opacity;
}

/* Broken-grid editorial offsets: each figure sits at its own height & width */
.wr-dgal__item--a {
    flex-basis: 19vw;
    margin-top: -9vh;
}

.wr-dgal__item--b {
    flex-basis: 23vw;
    margin-top: 11vh;
}

.wr-dgal__item--c {
    flex-basis: 17vw;
    margin-top: -4vh;
}

.wr-dgal__item--d {
    flex-basis: 21vw;
    margin-top: 14vh;
}

.wr-dgal__item--e {
    flex-basis: 18vw;
    margin-top: -12vh;
}

.wr-dgal__item--f {
    flex-basis: 22vw;
    margin-top: 0;
}

.wr-dgal__item--b .wr-dgal__frame picture {
    height: 60vh;
}

.wr-dgal__item--c .wr-dgal__frame picture {
    height: 46vh;
}

.wr-dgal__item--d .wr-dgal__frame picture {
    height: 42vh;
}

.wr-dgal__item--e .wr-dgal__frame picture {
    height: 50vh;
}

.wr-dgal__item--f .wr-dgal__frame picture {
    height: 56vh;
}

.wr-dgal__progress {
    position: absolute;
    left: var(--spacing-layout, 60px);
    right: var(--spacing-layout, 60px);
    bottom: 6vh;
    height: 1px;
    background: rgba(238, 239, 239, .6);
    transform-origin: left center;
    transform: scaleX(0);
    z-index: 2;
}

.wr-dgal__progress-label {
    position: absolute;
    right: 0;
    bottom: 14px;
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(238, 239, 239, .55);
}

/* Zeilen-Reveal: Maske pro Zeile, Innenzeile schiebt sich hoch */
.wr-dgal__intro .wr-dgal-line {
    display: block;
    overflow: hidden;
}

.wr-dgal__intro .wr-dgal-line__in {
    display: block;
    transform: translateY(115%);
    transition: transform .9s cubic-bezier(.22, .61, .21, 1);
    will-change: transform;
}

.wr-dgal__intro:not(.is-lines-ready) .wr-dgal-line__in {
    transform: none;
    transition: none;
}

.wr-dgal__intro.is-revealed .wr-dgal-line__in {
    transform: translateY(0);
}

/* Großer Fig.-Zähler rechts unten, folgt der dominanten Figur */
.wr-dgal__counter {
    position: absolute;
    right: var(--spacing-layout, 60px);
    bottom: 12vh;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: .35vw;
    color: #eeefef;
    pointer-events: none;
}

.wr-dgal__counter-current {
    display: inline-block;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(72px, 7vw, 130px);
    line-height: 1;
    letter-spacing: -.02em;
    transition: opacity .18s ease, transform .18s ease;
}

.wr-dgal__counter-total {
    font-size: 12px;
    letter-spacing: .22em;
    color: rgba(238, 239, 239, .55);
}

.wr-dgal__counter.is-switching .wr-dgal__counter-current {
    opacity: 0;
    transform: translateY(24%);
}

.wr-dgal__frame {
    position: relative;
    border: 1px solid rgba(238, 239, 239, .35);
    padding: 10px;
}

.wr-dgal__frame picture {
    display: block;
    height: 54vh;
    overflow: hidden;
}

.wr-dgal__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.18);
    will-change: transform;
}

.wr-dgal__item figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 12px;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(238, 239, 239, .7);
}

.wr-dgal__item figcaption > span {
    font-size: 10px;
    letter-spacing: .2em;
    color: rgba(238, 239, 239, .44);
}

.wr-dgal__note {
    position: absolute;
    left: 18px;
    bottom: 18px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid rgba(238, 239, 239, .28);
    background: rgba(4, 28, 30, .48);
    color: #eeefef;
    font-size: 11px;
    letter-spacing: .18em;
    line-height: 1;
    text-transform: uppercase;
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .21, 1);
    pointer-events: none;
}

.wr-dgal__item.is-active .wr-dgal__note {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Design mobile: dark gallery treatment — framed swipe cards, serif titles */
@media (max-width: 979px) {
    #design-mobile.l-design__slide {
        background: #041c1e;
    }

    .l-design__slide--2.is-hidden--lg-up {
        background: #041c1e;
        color: #eeefef;
    }

    .l-design__slide--2.is-hidden--lg-up .h3 {
        color: #eeefef;
        font-family: "Playfair Display", Georgia, serif;
        font-weight: 400;
        letter-spacing: -.01em;
    }

    .l-design__slide--2.is-hidden--lg-up .mobile-scrollable__item picture {
        border: 1px solid rgba(238, 239, 239, .35);
        padding: 8px;
    }

    .l-design__slide--2.is-hidden--lg-up .carousel__thumb__item {
        background: rgba(238, 239, 239, .35);
    }

    .l-design__slide--3.is-hidden--lg-up {
        background: #041c1e;
    }

    .l-design__slide--4.is-hidden--lg-up {
        background: #041c1e;
        color: #eeefef;
    }

    .l-design__slide--4.is-hidden--lg-up .h3 {
        color: #eeefef;
        font-family: "Playfair Display", Georgia, serif;
        font-weight: 400;
        letter-spacing: -.01em;
    }

    .l-design__slide--4.is-hidden--lg-up picture {
        border: 1px solid rgba(238, 239, 239, .35);
        padding: 8px;
    }
}

@media (min-width: 980px) {
    #l-residences-sticky-1 .l-residences__caption {
        border: 1px solid rgba(238, 239, 239, .35);
        background: rgba(4, 28, 30, .72);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

}

@media (max-width: 979px) {
    .l-residences__slider__images .mobile-scrollable__item picture {
        border: 1px solid rgba(238, 239, 239, .35);
        padding: 8px;
    }
}

/* Interiors desktop: the theme's pale thumbnail half can be exposed at the
   sticky end, reading as a broken blank panel. Keep the final slider layered
   above the intro and make the right half part of the dark image composition. */
@media (min-width: 1440px),
(min-width: 980px) and (min-aspect-ratio: 10/11) {
    #interiors.l-interiors {
        background: #041c1e;
    }

    #interiors .l-interiors__slider {
        position: relative;
        z-index: 3;
        overflow: hidden;
        background: #041c1e;
        color: #eeefef;
    }

    #interiors .l-interiors__slider .content-animation {
        flex-basis: 64%;
        width: 64%;
    }

    #interiors .l-interiors__slider-thumb {
        position: relative;
        flex-basis: 36%;
        width: 36%;
        background:
            linear-gradient(90deg, rgba(4, 28, 30, .72), #041c1e 42%),
            #041c1e;
        border-left: 1px solid rgba(238, 239, 239, .18);
        justify-content: flex-end;
    }

    #interiors .l-interiors__slider-thumb__links {
        right: clamp(28px, 4.4vw, 72px);
        z-index: 2;
    }

    #interiors .l-interiors__slider-thumb__links__item.is-active {
        border-color: rgba(238, 239, 239, .9);
    }

    #interiors .l-interiors__slider__caption {
        position: absolute;
        left: clamp(34px, 4.6vw, 72px);
        right: clamp(112px, 11vw, 180px);
        bottom: clamp(104px, 16vh, 140px);
        width: auto;
        color: rgba(238, 239, 239, .78);
        text-shadow: 0 1px 18px rgba(0, 0, 0, .35);
    }

    #interiors .l-interiors__slider__caption p,
    #interiors .l-interiors__slider__caption .animation,
    #interiors .l-interiors__slider__caption .word-wrap {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }
}

/* Footer: compact closing section with useful next steps. */
.footer {
    min-height: 0;
}

.wr-footer__wrap {
    position: relative;
}

.wr-footer {
    padding-top: clamp(52px, 8vh, 92px);
    padding-bottom: clamp(30px, 5vh, 58px);
}

.wr-footer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.wr-footer__logo {
    margin: 0;
}

.wr-footer__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(32px, 8vw, 120px);
    align-items: end;
    padding: clamp(46px, 10vh, 108px) 0 clamp(34px, 7vh, 78px);
}

.wr-footer__statement {
    max-width: 760px;
}

.wr-footer__eyebrow {
    margin: 0 0 18px;
    font-size: 12px;
    letter-spacing: .22em;
    line-height: 1;
    text-transform: uppercase;
    color: rgba(238, 239, 239, .56);
}

.wr-footer__title {
    margin: 0;
    color: #eeefef;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(40px, 6vw, 92px);
    font-weight: 400;
    letter-spacing: 0;
    line-height: .98;
}

.wr-footer__actions {
    display: flex;
    align-items: center;
    gap: 22px;
    padding-bottom: .35em;
    white-space: nowrap;
}

.wr-footer__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid rgba(238, 239, 239, .18);
    border-bottom: 1px solid rgba(238, 239, 239, .18);
}

.wr-footer__facts p {
    min-height: 96px;
    margin: 0;
    padding: 22px clamp(18px, 2.2vw, 34px);
    border-right: 1px solid rgba(238, 239, 239, .14);
    color: rgba(238, 239, 239, .62);
    font-size: 12px;
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
}

.wr-footer__facts p:first-child {
    padding-left: 0;
}

.wr-footer__facts p:last-child {
    border-right: 0;
}

.wr-footer__facts strong {
    display: block;
    margin-bottom: 14px;
    color: #eeefef;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(34px, 4vw, 58px);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
    text-transform: none;
}

.wr-footer__legal {
    display: flex;
    justify-content: flex-start;
    padding-top: clamp(22px, 4vh, 42px);
}

.wr-footer .footer__bottom {
    margin-top: clamp(18px, 3vh, 34px);
}

@media (max-width: 979px) {
    .wr-footer {
        padding-top: 42px;
    }

    .wr-footer__top,
    .wr-footer__main,
    .wr-footer__actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .wr-footer__main {
        display: flex;
        gap: 28px;
        padding: 42px 0 34px;
    }

    .wr-footer__actions {
        gap: 16px;
        white-space: normal;
    }

    .wr-footer__facts {
        grid-template-columns: 1fr;
    }

    .wr-footer__facts p,
    .wr-footer__facts p:first-child {
        min-height: 0;
        padding: 20px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(238, 239, 239, .14);
    }

    .wr-footer__facts p:last-child {
        border-bottom: 0;
    }
}

/* Footer refinement: one calm closing field instead of a statistics table. */
.footer.ui-background,
.wr-footer__wrap,
.wr-footer,
.wr-footer .footer__bottom {
    background: #041c1e;
}

.wr-footer {
    padding-top: clamp(72px, 12vh, 148px);
    padding-bottom: clamp(34px, 6vh, 72px);
}

.wr-footer__top {
    padding-bottom: clamp(28px, 5vh, 56px);
    border-bottom: 1px solid rgba(238, 239, 239, .16);
}

.wr-footer__logo img {
    width: clamp(150px, 18vw, 210px);
}

.wr-footer__main {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(40px, 10vw, 170px);
    padding: clamp(58px, 11vh, 132px) 0 clamp(62px, 12vh, 144px);
}

.wr-footer__eyebrow {
    margin-bottom: 24px;
    color: rgba(238, 239, 239, .5);
}

.wr-footer__title {
    max-width: 13ch;
    font-size: clamp(36px, 4.8vw, 72px);
    line-height: .98;
}

.wr-footer__actions {
    align-items: stretch;
    align-self: end;
    padding-bottom: 0;
}

.wr-footer__actions > .btn {
    align-self: stretch;
    box-sizing: border-box;
}

.wr-footer__actions .btn--outline {
    border-color: rgba(238, 239, 239, .72);
    background: #eeefef;
    color: #041c1e;
}

.wr-footer__actions .btn--outline:hover {
    background: transparent;
    color: #eeefef;
}

.wr-footer__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: clamp(24px, 6vw, 84px);
    border-top: 0;
    border-bottom: 0;
}

.wr-footer__facts p,
.wr-footer__facts p:first-child,
.wr-footer__facts p:last-child {
    min-height: 0;
    padding: 0;
    border: 0;
}

.wr-footer__facts p + p {
    padding-left: 0;
}

.wr-footer__facts p:first-child {
    text-align: left;
}

.wr-footer__facts p:nth-child(2) {
    text-align: center;
}

.wr-footer__facts p:last-child {
    text-align: right;
}

.wr-footer__facts strong {
    margin-bottom: 16px;
    font-size: clamp(40px, 4.8vw, 68px);
}

.wr-footer__facts span {
    color: rgba(238, 239, 239, .56);
}

.wr-footer__legal {
    padding-top: clamp(26px, 4vh, 44px);
    border-top: 1px solid rgba(238, 239, 239, .16);
}

.wr-footer .footer__bottom {
    padding-top: 0;
    color: rgba(238, 239, 239, .42);
}

@media (max-width: 979px) {
    .wr-footer {
        padding-top: 54px;
    }

    .wr-footer__top {
        padding-bottom: 28px;
    }

    .wr-footer__main {
        gap: 42px;
        padding: 54px 0 58px;
    }

    .wr-footer__actions {
        align-self: stretch;
        align-items: center;
        flex-direction: row;
        gap: 16px;
        white-space: nowrap;
    }

    .wr-footer__actions > .btn {
        align-self: center;
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
    }

    .wr-footer__actions > .btn--outline {
        padding-inline: 12px;
    }

    .wr-footer__actions .btn__text {
        font-size: 10px;
        letter-spacing: 0;
    }

    .wr-footer__title {
        max-width: 14ch;
        font-size: clamp(32px, 9vw, 50px);
    }

    .wr-footer__facts p,
    .wr-footer__facts p:first-child,
    .wr-footer__facts p:last-child {
        padding: 18px 0;
        border-bottom: 0;
    }

    .wr-footer__facts p + p {
        padding-left: 0;
    }

    .wr-footer__facts p,
    .wr-footer__facts p:first-child,
    .wr-footer__facts p:nth-child(2),
    .wr-footer__facts p:last-child {
        text-align: left;
    }

    .l-residences__slider-container .l-residences__caption__item-text {
        color: rgba(238, 239, 239, .62);
        opacity: 1;
    }

    .wr-footer__facts {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .wr-footer__facts p,
    .wr-footer__facts p:first-child,
    .wr-footer__facts p:nth-child(2),
    .wr-footer__facts p:last-child {
        display: grid;
        grid-template-columns: minmax(104px, .42fr) 1fr;
        align-items: baseline;
        gap: 18px;
        padding: 20px 0;
        border-top: 1px solid rgba(238, 239, 239, .16);
    }

    .wr-footer__facts strong {
        margin: 0;
        font-size: clamp(38px, 12vw, 52px);
    }

    .wr-footer__facts span {
        max-width: 19ch;
        font-size: 11px;
        line-height: 1.45;
    }
}

/* Umgebung: flies in like a chapter card, then grows to full bleed. */
.wr-journey-portal {
    position: fixed;
    inset: 0;
    z-index: 35;
    display: none;
    overflow: hidden;
    pointer-events: none;
    color: #eeefef;
    --t-text: #eeefef;
    --t-heading: #eeefef;
    --t-text-rgb: 238, 239, 239;
    --t-heading-rgb: 238, 239, 239;
}

.wr-journey-portal,
.wr-journey-portal * {
    pointer-events: none !important;
}

.wr-journey-portal__frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform-origin: 50% 50%;
    will-change: transform;
    background: #041c1e;
}

.wr-journey-portal__frame .l-nature-bg-item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.wr-journey-portal__frame .l-nature-bg-item img,
.wr-journey-portal__frame .l-nature-bg-item picture,
.wr-journey-portal__frame .l-nature-bg-item .background {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wr-journey-portal .l-nature-bg-caption,
.wr-journey-portal .l-nature-bg-caption [data-reveal],
.js .wr-journey-portal .l-nature-bg-caption [data-reveal]:not([data-reveal-visible]),
.wr-journey-portal .l-nature-bg-caption .is-invisible--js {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.wr-journey-portal .l-nature-bg-caption,
.wr-journey-portal .l-nature-bg-caption .g1,
.wr-journey-portal .l-nature-bg-caption .text-c1,
.wr-journey-portal .l-nature-bg-caption .text-t1,
.wr-journey-portal .l-nature-bg-caption p,
.wr-journey-portal .l-nature-bg-caption h2 {
    color: #eeefef !important;
    -webkit-text-fill-color: #eeefef;
}

.wr-journey-intro-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
}

#journey.is-journey-flying .l-nature-bg,
#journey.is-journey-flying .l-nature-bg-caption,
#journey.is-journey-flying .l-nature-bg-gradient {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
}

#journey .l-nature-bg-caption,
#journey .l-nature-bg-caption [data-reveal],
#journey .l-nature-bg-caption .g1,
#journey .l-nature-bg-caption .text-c1,
#journey .l-nature-bg-caption .text-t1 {
    transition: none !important;
}

#journey.wr-journey-intro-done .l-nature-bg-caption,
#journey.wr-journey-intro-done .l-nature-bg-caption .g1,
#journey.wr-journey-intro-done .l-nature-bg-caption .text-c1,
#journey.wr-journey-intro-done .l-nature-bg-caption .text-t1,
#journey.wr-journey-intro-done .l-nature-bg-caption p,
#journey.wr-journey-intro-done .l-nature-bg-caption h2 {
    color: #eeefef !important;
    -webkit-text-fill-color: #eeefef;
}

#journey.is-journey-flying .l-nature__caption {
    opacity: 0 !important;
    visibility: hidden !important;
}