:root{
    --overlay-opacity: 0.45;
    --overlay-opacity-mobile: 0.85;
  
    --logo-max-width: 900px;
    --logo-vw: 60vw;
    --logo-vw-mobile: 55vw;
  
    --menu-text: #d9d9d9;
    --menu-text-hover: #ffffff;
  
    --menu-font-weight: 600;
    --transition: 240ms ease;
  }
  
  /* GLOBAL */
  *{ box-sizing:border-box; }
  
  html,body{
    margin:0;
    height:100%;
    background:#000;
    font-family:'Raleway', sans-serif;
  }
  
  .hero{
    position:relative;
    min-height:100vh;
    background-image:url("images/sw_sunset.jpg");
    background-size:cover;
    background-position:center;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  
  .bg-layer{
    position:absolute;
    inset:0;
    background:transparent;
    transition:background var(--transition);
    z-index:1;
  }
  
  /* LOGO */
  .logo{
    background:transparent;
    border:0;
    padding:0;
    cursor:pointer;
    z-index:6;
  }
  
  .logo img{
    width:var(--logo-vw);
    max-width:var(--logo-max-width);
    opacity:0.75;
    transition:opacity var(--transition), transform var(--transition);
  }
  
  .logo:hover img{
    opacity:1;
    transform:translateY(-6px);
  }
  
  /* CLOSE BUTTON: standard Desktop ausblenden */
  .close-menu{
    display:none !important;
  }
  
  /* DESKTOP MENÜ */
  .menu{
    position:fixed;
    top:5vh;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    max-width:1200px;
    opacity:0;
    visibility:hidden;
    display:flex;
    justify-content:center;
    transition:opacity var(--transition);
    z-index:10;
  }
  
  .menu.menu-open{
    opacity:1;
    visibility:visible;
  }
  
  .menu ul{
    list-style:none;
    display:flex;
    gap:56px;
    padding:0;
    margin:0;
  }
  
  .menu a{
    text-decoration:none;
    color:var(--menu-text);
    font-weight:var(--menu-font-weight);
    font-size:18px;
    display:flex;
    align-items:center;
    gap:10px;
    opacity:0;
    transform:translateY(8px);
    transition:color var(--transition);
  }
  
  .menu a:hover{
    color:var(--menu-text-hover);
  }
  
  /* Fade-In Animation */
  @keyframes fadeInUp{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
  }
  
  .menu.menu-open a{
    animation:fadeInUp 420ms cubic-bezier(.2,.9,.2,1) forwards;
  }
  
  .menu.menu-open li:nth-child(1) a{ animation-delay:0ms; }
  .menu.menu-open li:nth-child(2) a{ animation-delay:90ms; }
  .menu.menu-open li:nth-child(3) a{ animation-delay:180ms; }
  .menu.menu-open li:nth-child(4) a{ animation-delay:270ms; }
  .menu.menu-open li:nth-child(5) a{ animation-delay:360ms; }
  
  /* Wenn Menü offen: Scroll auf allen Geräten verhindern */
  html.menu-open-state,
  body.menu-open-state,
  .menu-open-state html,
  .menu-open-state body{
    overflow:hidden;
    height:100%;
  }
  
  /* ---------------- MOBILE ---------------- */
  @media (max-width:640px){
  
    :root{
      --logo-vw: var(--logo-vw-mobile);
    }
  
    /* Logo komplett ausblenden wenn Menü offen (nur mobil) */
    .menu-open-state .logo{
      display:none !important;
    }
  
    .logo img{
      width:var(--logo-vw);
      max-width:360px;
    }
  
    /* Vollbild, zentriert */
    .menu{
      position:fixed;
      inset:0;
      display:flex;
      justify-content:center;
      align-items:center;
      opacity:0;
      visibility:hidden;
      transform:none;
      max-width:none;
      padding:0;
    }
  
    .menu.menu-open{
      opacity:1;
      visibility:visible;
    }
  
    .menu-open-state .bg-layer{
      background:rgba(0,0,0,var(--overlay-opacity-mobile)) !important;
    }
  
    /* UL nimmt volle Breite, Inhalt mittig */
    .menu ul{
      list-style:none;
      margin:0;
      padding:0;
      width:100%;
      max-width:360px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:0;
    }
  
    .menu a{
      font-size:26px;
      padding:18px 0;
      width:100%;
      text-align:center;
      justify-content:center;
      position:relative;
      color:var(--menu-text);
    }
  
    .menu a i{
      font-size:28px;
      margin-right:8px;
    }
  
    /* Fade‑In Linie */
    .menu a::after{
      content:"";
      position:absolute;
      left:50%;
      bottom:0;
      width:0%;
      height:1px;
      background:rgba(255,255,255,0.35);
      transform:translateX(-50%);
      opacity:0;
      transition:width 0.4s ease, opacity 0.4s ease;
    }
  
    .menu.menu-open a::after{
      width:100%;
      opacity:1;
    }
  
    .menu li:last-child a::after{
      display:none;
    }
  
    /* Close Button: nur mobil sichtbar, wird bei Menü-Open eingeblendet */
    .close-menu{
      position:fixed;
      top:18px;
      right:18px;
      z-index:20;
      background:transparent;
      border:0;
      color:#fff;
      font-size:34px;
      display:none !important;
    }
  
    .menu-open-state .close-menu{
      display:block !important;
    }
  
    /* Stagger mobil */
    .menu.menu-open li:nth-child(1) a{ animation-delay:0ms; }
    .menu.menu-open li:nth-child(2) a{ animation-delay:120ms; }
    .menu.menu-open li:nth-child(3) a{ animation-delay:240ms; }
    .menu.menu-open li:nth-child(4) a{ animation-delay:360ms; }
    .menu.menu-open li:nth-child(5) a{ animation-delay:480ms; }
  
    .menu-open-state body{
      touch-action:none;
    }
  }