*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;color:#555}

.nav{position:fixed;top:0;width:100%;padding:25px 40px;display:flex;justify-content:space-between;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);z-index:100}
.nav a{text-decoration:none;color:#666;margin-left:20px}

.side{position:fixed;right:25px;top:40%;display:flex;flex-direction:column;gap:20px;z-index:100}
.side a{text-decoration:none;color:#777}

.hero{height:220vh;background:#f7f4ef}
.sticky{position:sticky;top:0;height:100vh;overflow:hidden}

.center{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    transition:transform 1.2s ease, opacity 1.2s ease;
    transform-origin:center center;
}

.center.zoomout{
    transform:scale(2.5);
    opacity:0;
}

.center h1{
    font-size:clamp(180px,22vw,420px);
    margin:0;
    color:#7e7e7e;
    font-weight:300;
    line-height:0.85;
    letter-spacing:-0.04em;
}

.center p{
    margin-top:20px;
    font-size:18px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:#777;
}

.heroimg{position:absolute;width:280px;height:280px;object-fit:cover}
.h1{left:40%;top:15%}
.h2{left:18%;top:20%}
.h3{right:18%;top:20%}
.h4{left:24%;bottom:12%}
.h5{right:24%;bottom:12%}

.apt{
    padding:40px 8%;
    border-top:1px solid rgba(0,0,0,.08);
}

.no1{background:#eef2ee}
.no2{background:#f7f3ec}
.no3{background:#f2f5f1}

.headline{
    text-align:center;
    padding-bottom:40px;
    margin-bottom:40px;
    border-bottom:1px solid rgba(0,0,0,.08);
}

.headline span{
    font-size:24px;
    letter-spacing:8px;
    display:block;
    margin-bottom:20px;
}

.headline h2{
    font-size:clamp(90px,10vw,180px);
    font-weight:300;
    line-height:.9;
    position:relative;
    transform:scale(8);
    opacity:0;
    transition:transform 1.5s cubic-bezier(.16,1,.3,1), opacity 1.5s ease;
}

.headline h2.show{
    transform:scale(1);
    opacity:1;
}

.facts{
    margin:40px 0;
    font-size:18px;
}

.row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    padding:40px 0;
    align-items:center;
    position:relative;
    border-top:1px solid rgba(0,0,0,.08);
}

.reverse .imgs{
    order:2;
}

.row::after{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    bottom:0;
    width:1px;
    background:rgba(0,0,0,.08);
    pointer-events:none;
}

.imgs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.imgs img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    transition:transform .6s cubic-bezier(.16,1,.3,1), filter .6s ease;
}

.imgs img:hover{
    transform:scale(1.08);
}

.txt h3{
    font-size:48px;
    font-weight:300;
}

.book{
    display:inline-block;
    padding:16px 30px;
    background:#666;
    color:#fff;
    text-decoration:none;
}

footer{
    text-align:center;
    padding:150px 10%;
    background:#222;
    color:#fff;
}

@media(max-width:900px){
    .row{
        grid-template-columns:1fr;
    }

    .reverse .imgs{
        order:0;
    }

    .row::after{
        display:none;
    }

    .heroimg{
        width:160px;
        height:160px;
    }
}

/* ========================= */
/* SPOTLIGHT TEXT EFFEKT */
/* ========================= */

.apartment-text{
    position:relative;
}

.spotlight-wrap{
    position:relative;
    --x:50%;
    --y:50%;
}

.text-base{
    color:#6f6f6f;
}

.text-light{
    position:absolute;
    inset:0;

    color:#ffffff;

    clip-path:circle(
        140px at var(--x) var(--y)
    );

    pointer-events:none;
}

.text-base h3,
.text-light h3{

    font-size:clamp(70px,6vw,120px);

    line-height:.9;

    font-weight:300;

    margin:0 0 25px 0;

    letter-spacing:-0.03em;
}

.facts-big{
    margin-bottom:25px;

    font-size:15px;

    letter-spacing:.2em;

    text-transform:uppercase;

    color:#888;
}

.text-base p,
.text-light p{

    max-width:650px;

    font-size:20px;

    line-height:1.8;

    margin:0;
}

/* ========================= */
/* BESSERE BUTTONS */
/* ========================= */

.book{

    display:inline-block;

    padding:18px 35px;

    background:transparent;

    border:1px solid #666;

    color:#666;

    text-decoration:none;

    transition:.35s ease;
}

.book:hover{

    background:#666;

    color:#fff;
}

/* ========================= */
/* WENIGER LEERRAUM */
/* ========================= */

.hero{
    height:160vh;
}

.row{
    gap:30px;
    padding:25px 0;
}

.imgs img:hover{
    transform:scale(1.12);
}

/* V7 Hover + Spotlight */

.imgs img{
    transition:
        transform .6s cubic-bezier(.16,1,.3,1),
        filter .6s ease;
}

.imgs img:hover{
    transform:scale(1.08);
    filter:brightness(1.05);
}

.text-light{
    clip-path:circle(65px at var(--x) var(--y));
    filter:blur(.3px);
}


/* ===== V10 Rollback ===== */
.spotlight-wrap{
    position:relative !important;
    display:block !important;
    width:auto !important;
}

.text-light{
    clip-path:circle(55px at var(--x) var(--y));
}


/* ===== V12 ===== */

/* Penthouse etwas kleiner */
.text-base h3,
.text-light h3{
    font-size:clamp(55px,5vw,90px) !important;
}

/* Küche + Schlafzimmer */
.kitchen-title h3,
.bedroom-title h3{
    font-size:clamp(60px,5vw,95px);
    font-weight:300;
    line-height:.95;
    color:#666;
    transition:
        color .35s ease,
        letter-spacing .35s ease,
        transform .35s ease;
}

.kitchen-title h3:hover,
.bedroom-title h3:hover{
    color:#ffffff;
    letter-spacing:.02em;
    transform:translateX(6px);
}


/* ===== V13 CLEANUP ===== */

/* Spotlight komplett deaktiviert */
.text-light,
.text-base,
.spotlight-wrap{
    all: unset;
}

/* Einheitliche hochwertige Überschriften */
.txt h3{
    font-size:clamp(52px,4.5vw,82px) !important;
    font-weight:300;
    color:#666;
    line-height:.95;
    letter-spacing:-0.02em;

    transition:
        color .35s ease,
        letter-spacing .35s ease,
        transform .35s ease,
        opacity .35s ease;
}

.txt h3:hover{
    color:#ffffff;
    letter-spacing:.015em;
    transform:translateX(6px);
}

/* Penthouse etwas dezenter */
#no1 .txt h3{
    font-size:clamp(48px,4vw,72px) !important;
}


/* ===== V21 STICKY VIDEO ===== */

.destination-video{
    position:relative;
    height:260vh;
}

.sticky-video{
    position:sticky;
    top:0;
    height:100vh;
    overflow:hidden;
}

.sticky-video video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;

    transform:rotate(-90deg) scale(1.45);
    transform-origin:center center;
}

.video-overlay{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.18);

    text-align:center;
}

.video-overlay span{
    color:#fff;
    letter-spacing:.35em;
    margin-bottom:15px;
    font-size:14px;
}

.video-overlay h2{
    color:#fff;
    margin:0;

    font-size:clamp(40px,5vw,90px);
    line-height:.9;
    font-weight:300;
}

/* Hover überall */
.txt h3:hover{
    color:#fff !important;
    transform:translateX(8px) !important;
    letter-spacing:.02em !important;
}

.imgs img:hover{
    transform:scale(1.08) !important;
    filter:brightness(1.05);
}


/* ===== V26 ===== */

.video-intro{
    position:sticky;
    top:0;
    height:100vh;
    overflow:hidden;
    z-index:1;
}

.video-intro video{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transform:rotate(0deg) scale(1.45);
    transform-origin:center center;
}

.video-overlay{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.15);
}

.video-overlay span{
    color:#fff;
    letter-spacing:.35em;
}

.video-overlay h2{
    color:#fff;
    margin:0;

    font-size:clamp(40px,5vw,90px);
    line-height:.9;
    font-weight:300;
}

/* Apartment schiebt sich komplett über Video */

.no1{
    position:relative;

    z-index:20;

    margin-top:-100vh;

    padding-top:120px;

    min-height:auto;

    background:#eef2ee;

    border-radius:40px 40px 0 0;

    box-shadow:0 -25px 80px rgba(0,0,0,.12);
}

/* NO2 überdeckt NO1 sauber */

.no2{
    position:relative;
    z-index:30;
}

.no3{
    position:relative;
    z-index:40;
}

footer{
    position:relative;
    z-index:50;
}


/* V9 FINAL TUNING */

.bg-label{
 position:sticky;
 top:20px;
 font-size:55vw;
 font-weight:900;
 line-height:.72;
 text-align:center;
 opacity:.38;
 pointer-events:none;
 user-select:none;
 z-index:0;
 margin-bottom:-500px;
 letter-spacing:-0.09em;
}

.no1 .bg-label{color:#d4dbd4;}
.no2 .bg-label{color:#ece3d8;}
.no3 .bg-label{color:#dde5dd;}

.headline,.row,.book{
 position:relative;
 z-index:2;
}

.imgs{
 overflow:hidden;
}

.imgs img{
 opacity:0;
 transform:translateY(260px);
 will-change:transform,opacity;
 box-shadow:0 18px 45px rgba(0,0,0,.10);
}


/* ===== DRAGE REBUILD ===== */
.drage-container{
    position:relative;
    height:180vh;
    z-index:1;
}

.drage-sticky{
    position:sticky;
    top:0;
    height:100vh;
    overflow:hidden;
}

.drage-sticky video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.cinema-cut{
    position:relative;
    height:120vh;
}

.cinema-sticky{
    position:sticky;
    top:0;
    height:55vh;
    overflow:hidden;
}

.cinema-sticky video{
    width:100%;
    height:100%;
    object-fit:cover;
}
/* DRAGE FEINTUNING */
.drage-container{
    height:120vh !important;
}

.drage-container .video-overlay{
    transition:opacity .15s linear, transform .15s linear;
}
.drage-container{
    height:140vh !important;
}

.drage-sticky{
    position:sticky !important;
    top:0 !important;
    height:100vh !important;
    overflow:hidden !important;
}

.drage-sticky video{
    width:100% !important;
    height:100vh !important;
    object-fit:cover !important;
    display:block !important;
}

.drage-container .video-overlay{
    position:absolute !important;
    inset:0 !important;

    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    flex-direction:column !important;

    z-index:10 !important;
}

.drage-container .video-overlay h2{
    color:#fff !important;
    font-size:clamp(48px,6vw,110px) !important;
}

.drage-container .video-overlay span{
    color:#fff !important;
}


/* FINAL DRAGE TUNING */
.drage-sticky{
    height:100vh !important;
}

.drage-sticky video{
    width:100% !important;
    height:100vh !important;
    object-fit:cover !important;
}

.drage-container .video-overlay{
    transition: opacity .15s linear, transform .15s linear;
}


/* ===== DRAGE HOTFIX ===== */
.drage-container{
    height:140vh !important;
}

.drage-sticky{
    position:sticky !important;
    top:0 !important;
    height:100vh !important;
    overflow:hidden !important;
}

.drage-sticky video{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
}

.drage-sticky .video-overlay{
    position:absolute !important;
    inset:0 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
    z-index:50 !important;
}

.drage-sticky .video-overlay span{
    font-size:16px !important;
    margin-bottom:20px !important;
}

.drage-sticky .video-overlay h2{
    font-size:clamp(72px,8vw,140px) !important;
    line-height:.9 !important;
    margin:0 !important;
}


/* DRAGE OVERLAY REWORK */
.drage-sticky .video-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    z-index:50;
    transition:transform .25s linear, opacity .25s linear;
}

.drage-sticky .video-overlay span{
    color:#fff;
    font-size:14px;
    letter-spacing:.45em;
    margin-bottom:20px;
}

.drage-sticky .video-overlay h2{
    color:#fff;
    margin:0;
    font-size:clamp(70px,8vw,150px);
    line-height:.92;
    font-weight:300;
}


/* FINAL CONTENT POSITION */
.no1{
    margin-top:-65vh !important;
}

/* Content etwas kompakter */
.apt{
    max-width:1400px;
    margin-left:auto;
    margin-right:auto;
}

.txt{
    max-width:650px;
}


/* FINAL VIDEO CLEANUP */
.drage-sticky .video-overlay{
    background:transparent !important;
}


/* PERFORMANCE FIX */
.drage-sticky .video-overlay{
    will-change: transform;
    backface-visibility:hidden;
}