/* ============================================================
   K.O.M. Kranverleih — style.css
   Sauberes statisches HTML, selbst gehostete Fonts (DSGVO).
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#15151a;color:#f4f4f0;font-family:'Barlow',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:#FFD100;text-decoration:none}
a:hover{color:#ffe14d}
::selection{background:#FFD100;color:#0c0c0e}
h1,h2,h3{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.5px;line-height:1.12}

@keyframes komScroll{0%{transform:translateY(0);opacity:1}70%{opacity:1}100%{transform:translateY(14px);opacity:0}}

/* Button-Hover (ersetzt die style-hover-Attribute des Tool-Exports) */
.komb-gold{transition:transform .2s ease,background .2s ease}
.komb-gold:hover{background:#ffdb33;transform:translateY(-3px)}
.komb-ghost{transition:transform .2s ease,background .2s ease,border-color .2s ease}
.komb-ghost:hover{background:rgba(255,255,255,.14);border-color:#FFD100;transform:translateY(-3px)}

/* Mobile-Menü / Cookie-Banner: standardmäßig aus, per JS eingeblendet */
.kom-hidden{display:none!important}

/* Nicht umbrechen (auf Mobil wieder erlauben, damit nichts überläuft) */
.kom-nowrap{white-space:nowrap}
@media(max-width:820px){.kom-nowrap{white-space:normal}}

/* Mobile-Menü: smoothes Ein-/Ausblenden (kein Logo-Sprung, Links gestaffelt) */
#kom-mobile-menu{opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s linear .3s}
#kom-mobile-menu.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s}
#kom-mobile-menu a{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
#kom-mobile-menu.is-open a{opacity:1;transform:none}
#kom-mobile-menu.is-open a:nth-of-type(1){transition-delay:.10s}
#kom-mobile-menu.is-open a:nth-of-type(2){transition-delay:.15s}
#kom-mobile-menu.is-open a:nth-of-type(3){transition-delay:.20s}
#kom-mobile-menu.is-open a:nth-of-type(4){transition-delay:.25s}
#kom-mobile-menu.is-open a:nth-of-type(5){transition-delay:.30s}
#kom-mobile-menu.is-open a:nth-of-type(6){transition-delay:.35s}
@media(prefers-reduced-motion:reduce){
  #kom-mobile-menu,#kom-mobile-menu a{transition:none;transform:none}
}

@media (max-width:820px){
  .kom-hero-h1{font-size:46px!important}.kom-sec-h2{font-size:33px!important}
  .kom-desktop-nav{display:none!important}.kom-burger{display:flex!important}
  .kom-stat-n{font-size:58px!important}.kom-two-col{grid-template-columns:1fr!important}
  .kom-pad{padding-left:22px!important;padding-right:22px!important}.kom-giant{font-size:44px!important}
  [data-pin]{height:auto!important}
  [data-pin]>.kom-stick{position:static!important;height:auto!important}
  [data-swap]{grid-area:auto!important;opacity:1!important;transform:none!important;margin-bottom:22px}
  .kom-crane-svg{max-height:52vh!important}
  /* Fuhrpark: Bild-Rahmen auf Mobil nicht clippen, beide Fotos voll zeigen */
  .kom-machines-media{aspect-ratio:auto!important;overflow:visible!important;border:0!important}
  .kom-machines-media img[data-swap]{aspect-ratio:4/3;height:auto!important;border:1px solid rgba(255,255,255,.1);border-radius:4px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1!important;transform:none!important}
}

/* ============================================================
   GALERIE + LIGHTBOX
   ============================================================ */
/* Bento-Grid */
.kom-gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px}
.kom-gallery-item{padding:0;border:0;cursor:pointer;background:#1d1d24;border-radius:4px;overflow:hidden;position:relative;display:block}
.kom-gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.kom-gallery-item:hover img{transform:scale(1.06)}
.kom-gallery-item::after{content:"";position:absolute;inset:0;border:0 solid #FFD100;border-radius:4px;transition:border-width .2s ease;pointer-events:none}
.kom-gallery-item:hover::after{border-width:3px}
.kom-gallery-item:focus-visible{outline:2px solid #FFD100;outline-offset:2px}
.gi1{grid-column:span 2;grid-row:span 2}
.gi2{grid-column:span 2}
.gi5{grid-column:span 2}
.gi6{grid-column:span 2}
@media(max-width:820px){
  .kom-gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px;gap:10px}
  .gi1{grid-column:span 2;grid-row:span 2}
  .gi2,.gi5,.gi6{grid-column:span 2}
}
@media(max-width:480px){.kom-gallery{grid-auto-rows:128px}}

.kom-lb{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;background:rgba(8,8,10,.94);padding:24px}
.kom-lb.is-open{display:flex}
.kom-lb img{max-width:92vw;max-height:88vh;border-radius:4px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.kom-lb-btn{position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;width:52px;height:52px;border-radius:50%;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease,border-color .2s ease}
.kom-lb-btn:hover{background:#FFD100;color:#0c0c0e;border-color:#FFD100}
.kom-lb-close{top:22px;right:26px;width:46px;height:46px;font-size:30px}
.kom-lb-prev{left:20px;top:50%;transform:translateY(-50%)}
.kom-lb-next{right:20px;top:50%;transform:translateY(-50%)}
.kom-lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:#f4f4f0;font-family:'Barlow Condensed',sans-serif;letter-spacing:1px;font-size:15px;background:rgba(0,0,0,.45);padding:6px 14px;border-radius:20px}
@media(max-width:560px){.kom-lb-prev{left:10px}.kom-lb-next{right:10px}.kom-lb-btn{width:44px;height:44px;font-size:24px}}

/* Lenis Smooth-Scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ============================================================
   LADESCREEN (Turmdrehkran)
   ============================================================ */
.kom-preloader{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;background:#15151a;transition:opacity .6s ease,visibility .6s ease}
.kom-preloader.is-done{opacity:0;visibility:hidden}
.kom-preloader .kom-load-crane{width:min(62vw,240px);height:auto;overflow:visible;perspective:800px}
.kom-crane-jib{transform-box:view-box;transform-origin:120px 72px;transform-style:preserve-3d;animation:kom-slew 3.6s ease-in-out infinite}
@keyframes kom-slew{0%{transform:rotateY(-48deg)}50%{transform:rotateY(48deg)}100%{transform:rotateY(-48deg)}}
.kom-preloader-bar{width:150px;height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.kom-preloader-bar span{display:block;height:100%;width:38%;background:#FFD100;border-radius:2px;animation:kom-preload-slide 1.15s ease-in-out infinite}
@keyframes kom-preload-slide{0%{transform:translateX(-140%)}100%{transform:translateX(360%)}}
@media(prefers-reduced-motion:reduce){.kom-crane-jib,.kom-preloader-bar span{animation:none}}