/* --------------------------------------------------------------
# Dropdown (Leistungen)
-------------------------------------------------------------- */


/* =========================================
   HEADER + NAV (FINAL) – Theme bleibt Mobile im Header
   ========================================= */

:root { --header-h: 75px; }

#header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9990;

  height: var(--header-h);
  width: 100%;
  background: var(--hintergrund-farbe);
  

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

  padding: 0 10px;
  gap: 12px;
  border-bottom: var(--border-slim);
  backdrop-filter: blur(14px);
  box-shadow: var(--schatten-header);
}



/* Content nicht unter Header */
body{ padding-top: var(--header-h); }
 

/* Logo */
.logo-link{ display:inline-flex; align-items:center; }
.logo-s{
  height: 4rem;
  width: auto;
  filter: drop-shadow(1px 1px 2px #00000080);
  transition: 0.3s;
}

.logo-s:hover{
  filter: drop-shadow(0 0 2px #8200cd) ;
  transform: scale(1.1);

}

/* Rechts: Social + Theme */
.menu-bar{
  display:flex;
  align-items:center;
  gap: 12px;
  height: 100%;
  position: relative;
  z-index: 9991; /* über Nav */
  
}

.social-box{
  display:flex;
  align-items:center;
  gap: 10px;
}

header i{ font-size: 1.3rem; }

.t-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 1.3rem;
  height: 40px;
  width: 40px;
}

/* Theme Button */
#theme-button{
  padding: 5px 10px;
  box-shadow: var(--schatten-btn);
  border-radius: 5px;
  transition: 0.3s;
  cursor:pointer;
   color: var(--text-farbe);
   margin:0 1.5rem;
}
#theme-button:hover{
  box-shadow: var(--schatten-btn-inset);
  color: var(--akzent-farbe);
  transform: rotate(360deg);
}

#theme-button:active{
  transform: translateY(0) rotate(0);
  box-shadow: var(--schatten-btn-inset);
}

/* =========================================
   NAVBAR (Desktop)
   ========================================= */
.navbar{
  flex: 1;
  display:flex;
  justify-content:center;
  position: relative;
  isolation:isolate;

}

.navbar ul{
  display:flex;
  list-style:none;
  justify-content:center;
  align-items:center;
  margin: 0;
  padding: 0;
  gap: 2px;
  overflow: visible;
}

.navbar ul li{
  position: relative;
  display:flex;
  padding: 0;
  overflow: visible;
  font-family: var(--akzent-schrift);
}

.navbar ul li a{
  white-space: nowrap;
  text-decoration: none;
  font-weight: 900;
  font-family: var(--akzent-schrift);
  font-size: 1rem;
  color: var(--text-farbe);

  border-radius: 8px;
  padding: 8px 12px;
  transition: 0.25s ease;
}

.navbar ul li a:hover{ color: var(--akzent-farbe); }

/* =========================================
   DROPDOWN (Desktop – klickbar, ohne Hover-Lücke)
   ========================================= */
.navbar .dropdown{ position: relative; z-index: 1; }

.navbar .dropdown-toggle{
  display:flex;
  align-items:center;
  gap: 8px;
}

.navbar .dd-icon{
  font-size:.85rem;
  transition: transform .2s ease;
  opacity:.8;
}

/* Menü */
.navbar .dropdown-menu{
  display:none;
  position:absolute;
  top: 100%;
  left: 0;
  margin-top: 30px;
  min-width: 220px;

  background: var(--hintergrund-farbe);
  border-radius: 10px;
  padding: 8px 0;
   border: var(--border-slim);
      backdrop-filter: blur(14px);
  z-index: 10;
  box-shadow: var(--schatten-header);

}

/* Hover-Bridge */
.navbar .dropdown-menu::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-12px;
  height:12px;
}

.navbar .dropdown-menu li{ display:block; }
.navbar .dropdown-menu li a{
  display:block;
  padding: 10px 14px;
  border-radius: 0;
  filter: none;
}

/* Offen */
.navbar .dropdown:hover .dropdown-menu,
.navbar .dropdown:focus-within .dropdown-menu,
.navbar .dropdown-menu:hover{ display:block; }

/* aktives Dropdown nach vorne -> nicht nur letzter klickbar */
.navbar .dropdown:hover,
.navbar .dropdown:focus-within{ z-index: 9999; }

.navbar .dropdown:hover .dd-icon,
.navbar .dropdown:focus-within .dd-icon{ transform: rotate(180deg); }

/* =========================================
   BURGER (Mobile)
   ========================================= */
.mobile-nav-toggle{
  display:none;
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10001;

  padding: 5px 10px ;
  border-radius: 5px;
  border: none;
  cursor: pointer;

  background: transparent;
  box-shadow: var(--schatten-btn);
   color: var(--text-farbe);
}


/* BURGER */
.mobile-nav-toggle{
  transition: transform .18s ease, box-shadow .1s ease, color .1s ease;
}
.mobile-nav-toggle:hover{
  transform: translateY(-50%);
   box-shadow:  0px 0px 8px #8200cd;
  
  color: var(--akzent-farbe);
}
.mobile-nav-toggle:active{
  transform: translateY(-50%);
  box-shadow: var(--schatten-btn-inset);
  border: 1px solid color-mix(in oklab, var(--akzent-farbe) 75%, transparent);
}

/* Keyboard-Fokus (wichtig!) */
#theme-button:focus-visible,
.mobile-nav-toggle:focus-visible{
 border: 1px solid color-mix(in oklab, var(--akzent-farbe) 75%, transparent);
  outline-offset: 3px;
  
}

/* Optional: wenn Menü offen ist, Burger “aktiv” darstellen */
.navbar.navbar-mobile ~ .mobile-nav-toggle,
.mobile-nav-toggle[aria-expanded="true"]{
  box-shadow: var(--schatten-btn-inset);
  color: var(--akzent-farbe);
  box-shadow:  0px 0px 8px #8200cd;
  background: var(--hintergrund-farbe);
}

.list-icon {
  font-size: 1.3rem;
}

/* =========================================
   MOBILE OVERLAY NAV
   ========================================= */
@media (max-width: 1000px){
  .mobile-nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }

  /* Social raus – Theme bleibt */
  .social-box{ display:none; }

  /* Theme neben Burger platzieren (rechts im Header) */
  .menu-bar{
    position: absolute;
        right: 460px;     /* Platz für Burger */
    top: 50%;
    transform: translateY(-50%);
    height: auto;
  }

  /* Desktop UL aus */
  .navbar ul{ display:none; }

  /* Overlay */
  .navbar.navbar-mobile{
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.55);
    display:flex;
    justify-content:center;
    align-items:center;
    padding-top: 60px;
    text-align: center;
    height: 100%;
    
  }

  /* Menübox */
  .navbar.navbar-mobile ul{
    display:flex !important;
    flex-direction:column;
    gap: 8px;
    width: 100%;
    max-width: 600px;
    background: var(--hintergrund-farbe);
    border-radius: 22px;
    padding: 0 .5rem;
    margin: 0;
    box-shadow: 0px 0px 20px #8200cd;
 
  }

  .navbar.navbar-mobile ul:first-child {
    
    display: flex;
    flex-direction: column;
  

  
  
    margin: .5rem ;

  }

  .navbar.navbar-mobile ul li{
    display:block;
    text-align: center;
     width: 100%;
      
  }



  .navbar.navbar-mobile ul li a{
  
    justify-content: space-between;
  }



  /* Desktop Hover auf Mobile aus */
  .navbar.navbar-mobile .dropdown:hover .dropdown-menu{ display:none; }

  /* Mobile Dropdown */
  .navbar.navbar-mobile .dropdown-menu{
    position: static;
    display:none;
    min-width: auto;
    background: transparent;
    padding: -1px 0 0 0;
    margin-top: 6px;
    border-radius: 22px;
    box-shadow: var(--schatten-btn-inset);
    width: 100%;
  }

  .navbar.navbar-mobile .dropdown.open .dropdown-menu{
    display:flex;
    flex-direction:column;
    gap: 5px;
  }

  .navbar.navbar-mobile .dropdown.open .dd-icon{
    transform: rotate(180deg);
  }

  .nav-tag{ margin-left: 0rem; }
}

/* Mobile Header kleiner */
@media (max-width: 768px){
  :root{ --header-h: 60px; }
  .logo-s{ height: 3rem; }
  .mobile-nav-toggle{ right: 10px; padding: 10px ; color: var(--text-farbe);}
  .menu-bar{ right:50px; }
}