/* =====================================
   SERVICE-TOPBAR
   ===================================== */

.topbar{
  position: static;
  top: 0;
  z-index: 1100;

  background:#596068;
  padding:6px 18px;
  text-align:right;
  border-bottom:1px solid rgba(0,0,0,0.35);
}

.topbar a{
  color:#8d9aa7;
  text-decoration:none;
  margin-left:22px;
  font: 1rem/1.2 Arial, Helvetica, sans-serif;
}

.topbar a:hover{
  color:#725a5a;
  text-decoration:underline;
}


/* =====================================
   HAUPTNAVIGATION
   ===================================== */

.mainnav{
  position: static;
  top: 40px;                 /* Höhe der Topbar */
  z-index: 1050;
  padding: 6px 0;
}

/* WICHTIG: nur die TOP-UL als Flex – nicht verschachtelte ULs (Dropdown) */
.mainnav > ul{
  list-style:none;
  margin:0;
  padding:0 24px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:28px;
}

/* Nur Top-Level-LIs positionieren (Dropdown-Anker) */
.mainnav > ul > li{
  position: relative;
}

/* Menülinks */
.mainnav > ul > li > a{
  position: relative;
  display: inline-block;
  padding: 6px 0;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size:1.6rem;
  font-weight:400;
  letter-spacing:0.4px;
  color: rgba(255,255,255,0.88);
  line-height:1.1;
  transition: color 0.35s ease, text-shadow 0.35s ease;
}

/* Hover */
.mainnav > ul > li > a:hover{
  color: rgba(255,255,255,0.98);
  text-shadow: 0 0 10px rgba(216,255,0,0.18);
}

/* Unterlinie Animation (nur Top-Level) */
.mainnav > ul > li > a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-3px;
  width:0;
  height:2px;
  background: rgba(45, 219, 103, 0.95);
  transform: translateX(-50%);
  transition: width 0.45s ease;
}

.mainnav > ul > li > a:hover::after{
  width:100%;
}

/* Aktiv */
.mainnav > ul > li > a.active{
  color: rgba(255,255,255,0.98);
}

.mainnav > ul > li > a.active::after{
  width:100%;
}


/* =====================================
   DROPDOWN (Hover stabil)
   ===================================== */

.has-dropdown > a{
  padding-right: 18px; /* Platz für Pfeil */
}

.has-dropdown > a::before{
  content:"▾";
  position:absolute;
  right:0;
  top:50%;
  transform: translateY(-48%);
  font-size: 0.9rem;
  opacity: 0.85;
}

/* Unsichtbare "Hover-Brücke", damit beim Wechsel ins Dropdown nichts abreißt */
.has-dropdown::after{
  content:"";
  position:absolute;
  left:-10px;
  right:-10px;
  top:100%;
  height:14px;              /* überbrückt den Mausweg */
}

/* Dropdown-Liste */
.has-dropdown > .dropdown{
  position: absolute;
  right: 0;
  top: 100%;                /* KEIN Abstand mehr! */
  min-width: 180px;

  margin: 0;
  padding: 10px 0 8px;       /* optische Luft nach oben */
  list-style: none;

  background: rgba(30, 34, 40, 0.98);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.35);

  display: none;
}

/* Dropdown-Einträge */
.has-dropdown > .dropdown a{
  display:block;
  padding: 10px 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.2px;
  color: rgba(191, 216, 236, 0.9);
  text-decoration: none;
  line-height: 12px;
}

/* keine grüne Unterlinie im Dropdown */
.has-dropdown > .dropdown a::after{
  display:none;
}

.has-dropdown > .dropdown a:hover{
  background: #216d56;
}


/* Öffnen bei Hover + Tastatur + (Klick/Fokus bleibt auch) */
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown{
  display: block;
}

.mainnav{
  position: sticky;
  top: 0;
  z-index: 1000;
}
.mainnav{
  background:#111;
}


/* =====================================
   RESPONSIVE
   ===================================== */

@media (max-width: 900px){

  .mainnav > ul{
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:16px;
    padding:0 16px;
  }

  .mainnav > ul > li > a{
    font-size:1.3rem;
  }

  .topbar{
    padding:6px 14px;
  }

  .topbar a{
    font-size:0.95rem;
    margin-left:14px;
  }

  /* Dropdown auf kleineren Screens links ausrichten */
  .has-dropdown > .dropdown{
    right: auto;
    left: 0;
  }
}

@media (max-width: 700px){
  .topbar,
  .mainnav{
    position: static;
  }
}