*{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:40%;bottom:8%}
.h5{right:38%;bottom:8%}

.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;
}


/* ===== BUNJA FOUNDATION V2 ===== */

.scroller{
    height:100vh;
}

.container{
    width:100%;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    padding:0 3rem;
}

#wrapper{
    margin:0;
    padding:0;
    height:auto !important;
}

#wrap{
    position:relative;
    z-index:200;
    height:100%;
}

.hides{
    display:none !important;
}

.ttl{
    text-align:center;
    position:relative;
    z-index:50;
}

.ttl h2,
.ttl h3{
    color:#fff;
    font-size:clamp(48px,4vw,90px);
    line-height:0.95;
    letter-spacing:-0.03em;
    font-weight:300;
}

.ttl p{
    color:rgba(255,255,255,.7);
    max-width:800px;
    margin:20px auto 0;
}

.br{
    display:block;
}

picture{
    display:block;
}

sup{
    top:-0.75em;
    font-size:50%;
    position:relative;
}

.section-divider{
    width:100%;
    height:1px;
    background:rgba(255,255,255,.15);
    overflow:hidden;
}

.section-divider::after{
    content:"";
    display:block;
    width:100%;
    height:100%;
    background:#515258;
    transform-origin:center;
    transform:scaleX(0);
    transition:transform .8s ease;
}

.section-divider.active::after{
    transform:scaleX(1);
}

@media(max-width:1440px){
    .container{
        padding:0 2rem;
    }
}

@media(max-width:760px){
    .scroller{
        height:auto;
    }

    .container{
        padding:0 1rem;
    }
}


/* V37 HERO LOCK */
.hero{
    height:220vh !important;
}


/* V38 HERO FIX */
.center.zoomout{
    transform:none !important;
    opacity:1 !important;
}

.heroimg{
    opacity:1 !important;
}


/* V50 Editorial Stack */
.heroimg{
    width:340px !important;
    height:340px !important;
}

.h1{left:35% !important; top:22% !important;}
.h2{
    left:44% !important;
    top:16% !important;
    z-index:999 !important;
}
.h3{right:32% !important; top:24% !important;}
.h4{left:41% !important; bottom:10% !important;}
.h5{right:39% !important; bottom:10% !important;}


/* V53 HERO HOLD */
.hero{
    height:280vh !important;
}

.center h1{color:#111 !important;}
.center p{color:#222 !important;}


/* V60 lower images closer together */
.h4{
    left:32% !important;
    bottom:12% !important;
}

.h5{
    right:30% !important;
    bottom:12% !important;
}
.side{
    display:none;
}

/* HOTFIX 2026-06-12 */
.center h1{
    color:#000 !important;
}
.center p{
    color:#000 !important;
}


/* MOBILE HEADLINE FIX */
@media (max-width:768px){

  .headline h2{
      font-size:clamp(52px,14vw,90px) !important;
  }

  .bg-label{
      font-size:40vw !important;
      margin-bottom:-220px !important;
  }
}


/* MOBILE HARD OVERRIDES */
@media (max-width:768px){

  .drage-sticky .video-overlay h2{
      font-size:9vw !important;
      line-height:1 !important;
  }

  .headline h2{
      font-size:42px !important;
      transform:none !important;
      opacity:1 !important;
  }

  .headline span,
  .bg-label{
      display:none !important;
  }

  .no1{
      margin-top:0 !important;
      padding-top:30px !important;
  }
}



/* MOBILE NO1 LOWER */
@media (max-width:768px){

  .no1{
      margin-top:25vh !important;
      padding-top:20px !important;
  }

}
/* MOBILE FINAL OVERRIDE */
@media (max-width:768px){

  .headline span{
      display:none !important;
  }

  .headline h2{
      font-size:28px !important;
      line-height:1 !important;
      transform:none !important;
      opacity:1 !important;
      margin:0 !important;
  }

  .no1{
      margin-top:45vh !important;
      padding-top:10px !important;
  }

  .bg-label{
      display:none !important;
  }

}

/* MOBILE CLEAN REBUILD */
@media (max-width:768px){

  .no1{
      margin-top:0 !important;
      padding-top:0 !important;
  }

  .headline{
      position:relative !important;
      margin-top:0 !important;
      padding-top:40px !important;
      padding-bottom:20px !important;
      margin-bottom:20px !important;
      text-align:left !important;
  }

  .headline span{
      display:none !important;
  }

  .headline h2{
      font-size:72px !important;
      line-height:.9 !important;
      margin:0 !important;
      text-align:left !important;
      transform:none !important;
      opacity:1 !important;
  }

  .bg-label{
      display:none !important;
  }

  .drage-sticky .video-overlay h2{
      font-size:11vw !important;
      line-height:.95 !important;
  }
}