/* ============================================================
   MOKKA — DESKTOP BREAKPOINT (v2)
   Additive only. Everything below is scoped to >=900px so the
   mobile design/behavior is never affected. Toggle rules for
   #mobileSite / #desktopSite live OUTSIDE the media query so they
   always apply regardless of viewport width.
   ============================================================ */

@media (max-width: 899.98px){
  #desktopSite{ display:none !important; }
}
@media (min-width: 900px){
  #mobileSite{ display:none !important; }
  /* mobile canvas lock (body{max-width:393px;margin:0 auto} from style.css)
     must not apply once the desktop layout takes over */
  body{ max-width:none !important; width:100% !important; margin:0 !important; }
}

@media (min-width: 900px){

  #desktopSite{
    --dt-bg:            #f7f6f5;
    --dt-dark:          #151515;
    --dt-black:         #0a0a0a;
    --dt-grey:          #a5a5a5;
    --dt-white:         #ffffff;
    --dt-hairline:      #e0ddda;
    --dt-hairline-2:    #d8d8d8;
    --dt-placeholder:   #e0dedd;
    --dt-accent:        #ffa943;
    --dt-font-body:     'DM Sans', sans-serif;
    --dt-font-head:     'Darker Grotesque', sans-serif;
    --dt-max-w:         1680px;
    --dt-radius-img:    3px;
    --dt-radius-pill:   999px;

    position:relative;
    width:100%;
    background:var(--dt-bg);
    overflow:hidden;
    color:var(--dt-dark);
    font-family:var(--dt-font-body);
    font-variation-settings:'opsz' 14;
  }
  #desktopSite *,#desktopSite *::before,#desktopSite *::after{ box-sizing:border-box; }
  #desktopSite img{ display:block; max-width:100%; }
  #desktopSite a{ color:var(--dt-dark); text-decoration:none; }
  #desktopSite{ cursor:url('mokkalogo.svg') 16 16, auto; }
  #desktopSite a:hover{ color:var(--dt-dark); }

  /* ── header ── */
  #dtHeader{ position:fixed; top:0; left:0; width:100%; z-index:300; display:flex; align-items:center; justify-content:space-between; padding:34px 60px; background:transparent; transition:background .4s ease,backdrop-filter .4s ease; }
  #dtHeader.is-scrolled{ background:rgba(247,246,245,.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
  #dtHeader .hdr-textwrap{ overflow:hidden; max-width:0; margin-left:-10px; transition:max-width .6s cubic-bezier(.16,1,.3,1),margin-left .6s cubic-bezier(.16,1,.3,1); }
  #dtHeader.menu-open .hdr-textwrap{ max-width:150px; margin-left:10px; }
  #dtHeader.menu-open .hdr-mark{ filter:brightness(0) invert(1); }
  #dtHeader.menu-open .hdr-textwrap img{ filter:brightness(0) invert(1); }
  #dtMenuBtn .bar{ background:var(--dt-dark); transition:top .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1),background .2s ease; }
  #dtMenuBtn.is-open .bar{ background:#fff !important; }
  #dtMenuBtn.is-open .bar1{ top:15px; transform:translateX(-50%) rotate(45deg); }
  #dtMenuBtn.is-open .bar2{ top:15px; transform:translateX(-50%) rotate(-45deg); }

  /* ── nav overlay ── */
  #dtNav{ opacity:0; transform:translateY(-14px); pointer-events:none; transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1); }
  #dtNav.is-open{ opacity:1; transform:none; pointer-events:auto; }
  #dtNav .navlink{ transform:translateY(118%); transition:transform .65s cubic-bezier(.16,1,.3,1); }
  #dtNav.is-open .navlink{ transform:none; }
  #dtNav.is-open li:nth-child(1) .navlink{ transition-delay:.06s; }
  #dtNav.is-open li:nth-child(2) .navlink{ transition-delay:.12s; }
  #dtNav.is-open li:nth-child(3) .navlink{ transition-delay:.18s; }
  #dtNav.is-open li:nth-child(4) .navlink{ transition-delay:.24s; }
  #dtNav.is-open li:nth-child(5) .navlink{ transition-delay:.30s; }
  #dtNav .metafade{ opacity:0; transition:opacity .6s ease .45s; }
  #dtNav.is-open .metafade{ opacity:1; }
  #desktopSite .roll::after{ content:attr(data-text); position:absolute; top:100%; left:0; white-space:nowrap; }
  #desktopSite .rolllink:hover .roll{ transform:translateY(-100%); }

  /* ── scroll fade-up ── */
  #desktopSite .fade-up{ opacity:0; transform:translateY(30px); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); }
  #desktopSite .fade-up.in-view{ opacity:1; transform:none; }

  /* ── link underline hovers ── */
  #desktopSite .svc-link{ position:relative; display:inline-block; }
  #desktopSite .svc-link::after{ content:''; position:absolute; left:0; bottom:.06em; width:0; height:2px; background:var(--dt-dark); transition:width .4s cubic-bezier(.16,1,.3,1); }
  #desktopSite .svc-link:hover::after{ width:100%; }
  #desktopSite .foot-link{ position:relative; }
  #desktopSite .foot-link::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:1.5px; background:var(--dt-dark); transition:width .3s cubic-bezier(.16,1,.3,1); }
  #desktopSite .foot-link:hover::after{ width:100%; }

  #desktopSite .scrollcue{ animation:dt-cuebob 2.4s ease-in-out infinite; }
  @keyframes dt-cuebob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }
  #desktopSite .pill:hover{ background:#333 !important; }
  @keyframes dt-logoscroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  @keyframes dt-textscroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

  /* ── accordion ── */
  #desktopSite .svc-acc summary{ list-style:none; }
  #desktopSite .svc-acc summary::-webkit-details-marker{ display:none; }
  #desktopSite .svc-plus::before,#desktopSite .svc-plus::after{ content:''; position:absolute; top:50%; left:50%; background:var(--dt-dark); transition:transform .32s cubic-bezier(.16,1,.3,1); }
  #desktopSite .svc-plus::before{ width:20px; height:2px; transform:translate(-50%,-50%); }
  #desktopSite .svc-plus::after{ width:2px; height:20px; transform:translate(-50%,-50%); }
  #desktopSite .svc-acc.is-open .svc-plus::after{ transform:translate(-50%,-50%) scaleY(0); }

  /* ── premium project-card gallery motion ── */
  #desktopSite .proj-frame{ position:relative; width:100%; border-radius:var(--dt-radius-img); overflow:hidden; background:var(--dt-placeholder); clip-path:inset(100% 0 0 0); will-change:clip-path; transition:clip-path 1.15s cubic-bezier(.16,1,.3,1); }
  #desktopSite .proj-card.in-view .proj-frame{ clip-path:inset(0 0 0 0); }
  #desktopSite .proj-imgwrap{ position:absolute; top:-9%; left:0; width:100%; height:118%; will-change:transform; }
  #desktopSite .proj-img{ width:100%; height:100%; object-fit:cover; transform:scale(1.22); will-change:transform; transition:transform 1.3s cubic-bezier(.16,1,.3,1); }
  #desktopSite .proj-card.in-view .proj-img{ transform:scale(1); }
  #desktopSite .proj-card:hover .proj-img{ transform:scale(1.06); transition:transform 1.1s cubic-bezier(.16,1,.3,1); }
  #desktopSite .proj-tag{ position:absolute; left:18px; bottom:18px; z-index:2; display:inline-flex; align-items:center; gap:8px; background:var(--dt-bg); color:var(--dt-dark); font-family:var(--dt-font-body); font-weight:700; font-size:13px; padding:11px 20px; border-radius:var(--dt-radius-pill); transform:translateY(150%); opacity:0; transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .4s ease; }
  #desktopSite .proj-card:hover .proj-tag{ transform:translateY(0); opacity:1; }
  #desktopSite .proj-idx{ font-family:var(--dt-font-head); font-weight:800; font-size:15px; letter-spacing:.04em; color:var(--dt-grey); margin:0 0 10px; display:block; transition:color .4s ease; }
  #desktopSite .proj-card:hover .proj-idx{ color:var(--dt-dark); }
  #desktopSite .proj-title{ position:relative; display:inline-block; font-family:var(--dt-font-head); font-weight:700; font-size:clamp(26px,2.4vw,34px); line-height:1.05; margin:0 0 6px; color:var(--dt-dark); }
  #desktopSite .proj-title::after{ content:''; position:absolute; left:0; bottom:.02em; width:0; height:2px; background:var(--dt-dark); transition:width .5s cubic-bezier(.16,1,.3,1); }
  #desktopSite .proj-card:hover .proj-title::after{ width:100%; }
  #desktopSite .proj-meta{ transform:translateY(14px); opacity:.001; transition:transform .8s cubic-bezier(.16,1,.3,1) .15s,opacity .8s ease .15s; }
  #desktopSite .proj-card.in-view .proj-meta{ transform:none; opacity:1; }

  /* ── Über: pinned photo/logo intro ── */
  #umPin{ position:relative; height:200vh; }
  #umSticky{ position:sticky; top:0; height:100vh; overflow:hidden; }
  #umPhoto{ position:absolute; left:50%; top:50%; width:min(620px,42vw); aspect-ratio:700/1094; transform:translate(-50%,-50%); border-radius:var(--dt-radius-img); overflow:hidden; will-change:transform; }
  #umLogo{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(400px,29vw); pointer-events:none; z-index:3; mix-blend-mode:normal; will-change:opacity,transform; }
  #umIntroText{ position:absolute; top:50%; left:50%; width:min(480px,34vw); transform:translateY(-50%); opacity:0; will-change:opacity,transform; z-index:2; }

  /* ── Leistungen: pinned 3D-render hero ── */
  #lsPin{ position:relative; height:240vh; }
  #lsSticky{ position:sticky; top:0; height:100vh; overflow:hidden; background:#f0efee; }
  #lsRender{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; will-change:transform; }
  #lsBrand{ position:absolute; left:50%; top:50%; transform:translate(-50%,calc(-50% + 70vh)); width:min(560px,42vw); mix-blend-mode:difference; pointer-events:none; z-index:2; will-change:transform; }
  #lsGrad{ position:absolute; left:0; bottom:0; width:100%; height:220px; background:linear-gradient(to bottom,rgba(247,246,245,0),var(--dt-bg)); z-index:3; pointer-events:none; }
  #lsContent{ position:relative; z-index:5; background:var(--dt-bg); margin-top:-42vh; border-radius:22px 22px 0 0; padding-top:clamp(20px,4vh,48px); }
  #desktopSite .ls-caro img{ border-radius:var(--dt-radius-img); transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .6s ease; }
  #desktopSite .ls-caro:hover{ animation-play-state:paused; }
  #desktopSite .ls-caro img:hover{ transform:scale(1.03); }

  /* ── Projekte: Red-Dot-Studio-Stil Vollbreite-Teaser ── */
  #desktopSite .rds-list{ display:flex; flex-direction:column; gap:clamp(64px,7vw,110px); }
  #desktopSite .rds-teaser{ display:block; text-decoration:none; color:inherit; }
  #desktopSite .rds-media{ position:relative; width:100%; aspect-ratio:16/9; border-radius:4px; overflow:hidden; background:var(--dt-placeholder); clip-path:inset(100% 0 0 0); will-change:clip-path; transition:clip-path 1.15s cubic-bezier(.16,1,.3,1); }
  #desktopSite .rds-teaser.in-view .rds-media{ clip-path:inset(0 0 0 0); }
  #desktopSite .rds-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  #desktopSite .rds-base{ transform:scale(1.02); transition:opacity .7s ease,transform 1.3s cubic-bezier(.16,1,.3,1); }
  #desktopSite .rds-hover{ opacity:0; transform:scale(1.08); transition:opacity .7s ease,transform 1.3s cubic-bezier(.16,1,.3,1); }
  #desktopSite .rds-teaser:hover .rds-base{ opacity:0; transform:scale(1.05); }
  #desktopSite .rds-teaser:hover .rds-hover{ opacity:1; transform:scale(1); }
  #desktopSite .rds-cap{ display:flex; align-items:baseline; justify-content:space-between; gap:16px 32px; margin-top:24px; flex-wrap:wrap; }
  #desktopSite .rds-title{ position:relative; font-family:var(--dt-font-head); font-weight:700; font-size:clamp(26px,2.4vw,36px); line-height:1.02; margin:0; color:var(--dt-dark); }
  #desktopSite .rds-title::after{ content:''; position:absolute; left:0; bottom:.04em; width:0; height:2px; background:var(--dt-dark); transition:width .55s cubic-bezier(.16,1,.3,1); }
  #desktopSite .rds-teaser:hover .rds-title::after{ width:100%; }
  #desktopSite .rds-type{ font-family:var(--dt-font-body); font-weight:600; font-size:clamp(15px,1.2vw,18px); color:var(--dt-grey); margin:0; white-space:nowrap; }

  /* ── Projekt-Detail: Screens-Carousel (portiert von Mobile) ── */
  #desktopSite .bg-screens{ margin-top:64px; display:flex; flex-direction:column; overflow:hidden; }
  #desktopSite .bg-row{ overflow:hidden; position:relative; }
  #desktopSite .bg-row__track{ display:flex; gap:20px; will-change:transform; }
  #desktopSite .bg-row--web .bg-row__track{ height:300px; }
  #desktopSite .bg-row--web .bg-item{ flex-shrink:0; width:480px; height:300px; border-radius:4px; overflow:hidden; }
  #desktopSite .bg-row--phone{ margin-top:20px; }
  #desktopSite .bg-row--phone .bg-row__track{ height:326px; }
  #desktopSite .bg-row--phone .bg-item{ flex-shrink:0; width:150px; height:326px; border-radius:8px; overflow:hidden; }
  #desktopSite .bg-item img{ width:100%; height:100%; object-fit:cover; display:block; }

  /* ── Orobianco: before/after slider (portiert von Mobile) ── */
  #desktopSite .oro-slider-wrap{ margin:0 auto; width:420px; height:645px; position:relative; border-radius:6px; overflow:hidden; touch-action:none; user-select:none; }
  #desktopSite .oro-slider-before{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; z-index:1; }
  #desktopSite .oro-slider-after{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; z-index:2; clip-path:inset(0 0 0 50%); }
  #desktopSite .oro-slider-line{ position:absolute; top:0; bottom:0; width:2px; background:rgba(255,255,255,.9); z-index:3; pointer-events:none; transform:translateX(-50%); left:50%; }
  #desktopSite .oro-slider-handle{ position:absolute; top:50%; z-index:4; width:14px; height:56px; background:#ebd7bc; border-radius:9px; cursor:ew-resize; transform:translate(-50%,-50%); left:50%; }

  /* ── Orobianco: gelb-umrandeter vertikaler Zyklus ── */
  #desktopSite .oro-frame-section{ display:flex; justify-content:center; }
  #desktopSite .oro-frame-outer{ position:relative; width:420px; height:584px; border-radius:38px; border:4px solid #FFA943; overflow:hidden; }
  #desktopSite .oro-frame-track{ position:absolute; top:0; left:0; width:100%; display:flex; flex-direction:column; animation:oro-frame-scroll-dt 14s linear infinite; will-change:transform; }
  #desktopSite .oro-frame-track img{ width:100%; height:584px; object-fit:cover; flex-shrink:0; display:block; }
  @keyframes oro-frame-scroll-dt{ 0%{ transform:translateY(0); } 100%{ transform:translateY(-50%); } }

  /* ── Orobianco: Video ── */
  #desktopSite .oro-video-section video{ width:100%; border-radius:6px; display:block; }

  /* ── Orobianco: unterer Horizontal-Scroll ── */
  #desktopSite .oro-hscroll-outer{ width:100%; height:480px; border-radius:3px; overflow:hidden; position:relative; }
  #desktopSite .oro-hscroll-track{ position:absolute; top:0; left:0; height:480px; width:2524px; display:flex; flex-direction:row; animation:oro-hscroll-dt 22s linear infinite; will-change:transform; backface-visibility:hidden; }
  #desktopSite .oro-hscroll-track img{ flex-shrink:0; width:1262px; height:480px; object-fit:cover; display:block; }
  @keyframes oro-hscroll-dt{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-1262px); } }

  /* ── Staib: Flaschen-Karussell (portiert von Mobile) ── */
  #desktopSite .sb-carousel-section{ width:100%; overflow:hidden; }
  #desktopSite .sb-carousel{ position:relative; height:620px; }
  #desktopSite .sb-bottle{ position:absolute; top:50%; left:calc(50% - 125px); width:250px; transform-origin:center center; will-change:transform,opacity; cursor:pointer; }
  #desktopSite .sb-bottle img{ width:100%; height:auto; display:block; }
  #desktopSite .sb-labels-outer{ position:relative; }
  #desktopSite .sb-labels-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; }
  #desktopSite .sb-labels-track{ display:flex; gap:32px; padding-left:64px; padding-right:64px; will-change:transform; }
  #desktopSite .sb-label-item{ flex-shrink:0; width:340px; }
  #desktopSite .sb-label-item img{ width:100%; height:auto; display:block; border-radius:4px; }

  /* ── Pontico: Video-Blöcke + Bild-Bänder (portiert von Mobile) ── */
  #desktopSite .pt-video-block{ border-radius:4px; overflow:hidden; height:480px; position:relative; }
  #desktopSite .pt-video-block video{ width:100%; height:100%; object-fit:cover; display:block; }
  #desktopSite .pt-bands{ display:flex; flex-direction:column; gap:20px; overflow:hidden; }
  #desktopSite .pt-band{ height:360px; overflow:hidden; }
  #desktopSite .pt-band__track{ display:flex; gap:20px; height:100%; will-change:transform; }
  #desktopSite .pt-band--left .pt-band__track{ animation:pt-scroll-left-dt 26s linear infinite; }
  #desktopSite .pt-band--right .pt-band__track{ animation:pt-scroll-right-dt 26s linear infinite; }
  @keyframes pt-scroll-left-dt{ from{ transform:translateX(0); } to{ transform:translateX(-1832px); } }
  @keyframes pt-scroll-right-dt{ from{ transform:translateX(-1832px); } to{ transform:translateX(0); } }
  #desktopSite .pt-band__card{ flex-shrink:0; width:578px; height:360px; border-radius:4px; overflow:hidden; }
  #desktopSite .pt-band__card img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
  #desktopSite .pt-band--right .pt-band__card img{ filter:brightness(.95); }
}