/* ============================================================
   MOLLOGISTIC — Mobile-Optimierung
   Hamburger-Menü · Hochformat-Hero · Feinschliff
   (wird NACH calc.css/track.css geladen und überschreibt gezielt)
   ============================================================ */

/* ---------- Hamburger-Button + Overlay-Menü ---------- */
.navtoggle{display:none}
.mobilemenu{display:none}

@media (max-width:980px){
  /* Topbar: Logo links, Aktionen rechts */
  .actions{display:flex;align-items:center;gap:10px}

  /* „Angebot anfordern": oben unsichtbar, beim Scrollen als Popup einblenden */
  .reserve{
    opacity:0;visibility:hidden;transform:scale(.55);transform-origin:center;
    transition:opacity .25s ease,transform .4s cubic-bezier(.34,1.56,.64,1),visibility .4s;
    pointer-events:none;
  }
  .topbar.scrolled .reserve{
    opacity:1;visibility:visible;transform:scale(1);pointer-events:auto;
  }

  .navtoggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;flex:0 0 44px;
    border:none;background:none;border-radius:0;
    cursor:pointer;box-shadow:none;
    transition:transform .15s;
  }
  .navtoggle:active{transform:scale(.94)}
  .navtoggle__bars,
  .navtoggle__bars::before,
  .navtoggle__bars::after{
    display:block;width:24px;height:2.6px;border-radius:2px;background:#000;content:"";
  }
  .navtoggle__bars{position:relative}
  .navtoggle__bars::before{position:absolute;left:0;top:-7px}
  .navtoggle__bars::after{position:absolute;left:0;top:7px}

  /* Vollbild-Overlay */
  .mobilemenu{
    display:flex;flex-direction:column;
    position:fixed;inset:0;z-index:3000;
    background:#000;color:#fff;
    padding:20px 26px calc(36px + env(safe-area-inset-bottom));
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .28s ease,transform .28s ease,visibility .28s;
  }
  .mobilemenu.open{opacity:1;visibility:visible;transform:none}
  body.menu-open{overflow:hidden}

  .mobilemenu__top{
    display:flex;align-items:center;justify-content:space-between;
    padding-bottom:10px;
  }
  .mobilemenu__brand{
    font-size:18px;font-weight:800;letter-spacing:.06em;color:#fff;
    font-family:inherit;
  }
  .mobilemenu__close{
    width:48px;height:48px;border:none;border-radius:14px;cursor:pointer;
    background:rgba(255,255,255,.08);color:#fff;
    display:flex;align-items:center;justify-content:center;
    transition:background .18s;
  }
  .mobilemenu__close:active{background:rgba(255,255,255,.16)}

  .mobilemenu__links{
    display:flex;flex-direction:column;
    margin:auto 0;
  }
  .mobilemenu__links a{
    color:#fff;text-decoration:none;
    font-size:clamp(30px,8.6vw,44px);font-weight:800;letter-spacing:-.02em;
    padding:14px 0;border-bottom:1px solid rgba(255,255,255,.09);
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    transition:color .18s;
  }
  .mobilemenu__links a:active,
  .mobilemenu__links a.active{color:var(--gold)}
  .mobilemenu__links a .idx{
    font-size:13px;font-weight:700;letter-spacing:.12em;color:#5a5a5a;
  }

  .mobilemenu__cta{
    margin-top:26px;
    display:inline-flex;align-items:center;justify-content:center;gap:12px;
    background:var(--gold);color:#fff;text-decoration:none;
    font-size:17px;font-weight:700;letter-spacing:.01em;
    padding:18px 24px;border-radius:999px;
  }
}

/* Service-Zeile nur auf dem Handy sichtbar */
.hero__lead{display:none}
/* mobile-only Zeilenumbrüche in der Hero-Überschrift */
.br-m{display:none}

/* ---------- HERO: Video unten (komplett), oben Himmel-Fläche + Schrift ---------- */
@media (max-width:760px){
  .hero{height:100svh;}
  .hero__media{
    aspect-ratio:auto;
    flex:1;
    min-height:0;
    height:auto;
    max-height:none;
    /* heller Himmel-Verlauf über dem Video, blendet ins Video-Bild */
    background:#ffffff;
  }
  /* KOMPLETTES Video (16:9, voller Rahmen), unten angepinnt – direkt über „Swipe" */
  .hero__video{
    position:absolute;left:0;right:0;top:auto;
    bottom:0;
    width:100%;height:auto;
    aspect-ratio:16 / 9;
    object-fit:contain;
    object-position:center bottom;
  }
  /* Textblock vertikal in die weiße Fläche zentrieren -> wirkt nicht leer */
  .hero__body{
    top:0;bottom:0;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    text-align:center;
    padding:0 22px calc(56.25vw + 14px);   /* unten Platz fürs Video */
    background:none;
  }
  .hero h1{font-size:clamp(30px,8.8vw,46px);line-height:1.28;}
  .br-m{display:inline;}
  .hero__lead{
    display:block;
    margin-top:56px;max-width:32ch;
    font-size:clamp(15px,4.1vw,17px);line-height:1.72;font-weight:500;
    color:#5b6270;text-wrap:pretty;
  }
  .hero__cta{margin-top:64px;}
  /* Swipe-Hinweis weiter unten, dunkel (helle Fläche darunter) */
  .hero__scroll{font-size:13px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.45);bottom:clamp(18px,4.5vh,38px)}
}

/* ---------- AUFTRAG VERFOLGEN: Phone-Feinschliff ---------- */
@media (max-width:560px){
  .track{padding:54px 16px 60px}
  .track__title{font-size:clamp(26px,8vw,34px)}
  .trk-top{padding:22px 18px}
  .trk-route{font-size:clamp(19px,6vw,24px)}
  .trk-steps{padding:24px 18px 18px}
  .trk-log{padding:22px 18px 26px}
  .track__search{padding:12px}
  .track__btn{padding:14px 22px}
}

/* ---------- KALKULATOR / KARTE: Phone-Feinschliff ---------- */
@media (max-width:560px){
  .calc__title{font-size:clamp(26px,8vw,34px)}
  .calc__map-wrap{min-height:340px}
  /* Karte zuerst sichtbar, dann das Formular */
  .calc__panel{padding:22px 18px}
  .calc__swap{right:14px}
  .styc{padding:20px 18px}
  /* CTA-Button gut greifbar */
  .calc__cta{width:100%;padding:18px 26px}
}

/* ---------- KONTAKT: Phone-Feinschliff ---------- */
@media (max-width:560px){
  .contact{padding:56px 16px 64px}
  .contact__title{font-size:clamp(26px,8vw,34px)}
  .ccard{padding:24px 20px}
  .ccard__value{font-size:19px}
}