/* =========================================
   BURGER BUTTON
========================================= */

.burger{
  display:none;
  background:none;
  border:none;
  width:44px;
  height:44px;
  position:relative;
  cursor:pointer;
  z-index:1002;
}

.burger span{
  position:absolute;
  left:10px;
  right:10px;
  height:3px;
  background:#111;
  border-radius:3px;
  transition:.3s ease;
}

.burger span:nth-child(1){ top:14px; }
.burger span:nth-child(2){ top:21px; }
.burger span:nth-child(3){ top:28px; }

body.menu-open .burger span:nth-child(1){
  transform:rotate(45deg);
  top:21px;
}

body.menu-open .burger span:nth-child(2){
  opacity:0;
}

body.menu-open .burger span:nth-child(3){
  transform:rotate(-45deg);
  top:21px;
}

/* =========================================
   MOBILE NAV – SCREENSHOT STYLE
========================================= */

@media (max-width:900px){

  .burger{
    display:block;
    position:absolute;
    right:20px;
    top:18px;
  }

  /* OVERLAY */

  .nav-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.35);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
    z-index:1000;
  }

  body.menu-open .nav-overlay{
    opacity:1;
    pointer-events:auto;
  }

  /* NAV PANEL */

  .nav{
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    width:100%;
    max-width:420px;

    background:#f5f5f5;

    padding:120px 28px 60px;

    display:flex;
    flex-direction:column;

    transform:translateX(100%);
    transition:transform .45s cubic-bezier(.77,0,.18,1);

    overflow-y:auto;
    z-index:1001;
  }

  body.menu-open .nav{
    transform:translateX(0);
  }

  body.menu-open{
    overflow:hidden;
  }

  /* HAUPTPUNKTE */

  .nav > a,
  .nav > .nav-dropdown > .nav-parent{
    font-size:1.7rem;
    font-weight:800;
    color:#000;
    padding:22px 0;

    display:flex;
    justify-content:space-between;
    align-items:center;

    border-bottom:1px solid rgba(0,0,0,.06);
  }

  /* DROPDOWN CONTAINER */

  .nav-dropdown{
    display:flex;
    flex-direction:column;
  }

  .nav-parent{
    cursor:pointer;
  }

  /* SUBMENU */

  .nav-sub{
    display:flex;
    flex-direction:column;
    gap:18px;

    max-height:0;
    overflow:hidden;

    transition:max-height .35s ease;
  }

  .nav-dropdown.open .nav-sub{
    max-height:600px;
    padding:16px 0 24px;
  }

  .nav-sub a{
    font-size:1.05rem;
    font-weight:500;
    color:#555;
    padding-left:12px;
  }

  .nav-sub a:hover{
    color:#000;
  }

  /* CARET */

  .nav-caret{
    font-size:1rem;
    transition:transform .3s ease;
  }

  .nav-dropdown.open .nav-caret{
    transform:rotate(180deg);
  }

  /* DARK MODE */

  body.night .nav{
    background:#111;
  }

  body.night .nav > a,
  body.night .nav-parent{
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  body.night .nav-sub a{
    color:rgba(255,255,255,.7);
  }

  body.night .nav-sub a:hover{
    color:#fff;
  }

  /* HERO FIX (WICHTIG FÜR SAFARI) */

  .sticky-hero{
    position:relative;
    backdrop-filter:none;
  }

}

/* =========================
   DESKTOP HEADER AUF MOBILE AUSBLENDEN
========================= */

@media (max-width:900px){
  header.desktop-header{
    display:none !important;
  }
}

.sticky-hero {
  position: relative;
  top: auto;
  z-index: 1;
  max-width: 1400px;
  margin: 40px auto;
  padding: 40px 60px;
  border-radius: 40px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(25px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.15);
}
@media (max-width:900px){
  .desktop-header{
    display:none;
  }

  .sticky-hero{
    width:100%;
    max-width:100%;
    margin:0;
    padding:30px 20px;
    border-radius:0;
    box-shadow:none;
    background:#ffffff;
  }

  body.night .sticky-hero{
    background:#0f172a;
  }
}