/* ---------- Top-Bar -------------------------------------------------- */
.top-bar2{
  position:fixed !important; top:0 !important; left:0 !important; right:0 !important;
  height:60px !important; padding:3rem !important;
  display:flex !important; justify-content:space-between !important; align-items:center !important;
  z-index:2000 !important;
  font-family:"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif !important;
}

/* ---------- Aktiv-Zustände ------------------------------------------ */
.top-bar2.expanded #dropdownContent{
  max-height:500px !important;
  opacity:1 !important; visibility:visible !important;
  transition:
    opacity   var(--fade-speed) ease,
    max-height var(--slide-speed) ease,
    visibility 0s !important;
}

.top-bar2.expanded + .blur-background{
  opacity:1 !important; visibility:visible !important;
}
/* ---------------- Link-Gruppe links (innerhalb .top-bar2) ----------- */
/* =====================================================================
   Stilvolle Link-Gruppe + Button für die feste Top-Bar
   ===================================================================== */

/* -------- Link-Gruppe links ---------------------------------------- */
.left-side{
  display:flex !important;
  align-items:center !important;
  gap:1.25rem !important;          /* gleichmäßiger Abstand zwischen Buttons */
}

/* ------------------------------------------------------------------
   Hochwertiger, moderner „Glass-Button“ für die Top-Bar
   ------------------------------------------------------------------ */
.top-bar-button{
  /* Layout ----------------------------- */
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.5rem !important;                     /* Platz für optionales Icon */
  padding:.6rem 1.4rem !important;
  min-width:110px !important;

  /* Typografie ------------------------- */
  font-size:1rem !important;
  font-weight:600 !important;
  letter-spacing:0.02em !important;
  color:#ffffff !important;
  text-decoration:none !important;

  /* Glassmorphism-Optik ---------------- */
  background:rgba(255,255,255,0.08) !important;
  border:1px solid rgba(255,255,255,0.25) !important;
  border-radius:12px !important;
  backdrop-filter:blur(6px) !important;
  -webkit-backdrop-filter:blur(6px) !important;

  /* Tiefe & Interaktion ---------------- */
  box-shadow:
    0 4px 6px rgba(0,0,0,0.15),
    inset 0 1px 1px rgba(255,255,255,0.30) !important;

  transition:
    background 0.25s ease,
    box-shadow  0.20s ease,
    transform   0.12s ease !important;
}

/* Hover / Fokus: heller & leicht angehoben */
.top-bar-button:hover,
.top-bar-button:focus-visible{
  background:rgba(255,255,255,0.14) !important;
  box-shadow:
    0 6px 10px rgba(0,0,0,0.18),
    inset 0 1px 1px rgba(255,255,255,0.35) !important;
  transform:translateY(-2px) !important;
}

/* Aktiv (Klick gehalten): dunkler & zurückgesetzt */
.top-bar-button:active{
  background:rgba(255,255,255,0.18) !important;
  box-shadow:
    inset 0 3px 6px rgba(0,0,0,0.30) !important;
  transform:translateY(0) !important;
}

/* Tastatur-Fokus­ring sichtbar halten */
.top-bar-button:focus-visible{
  outline:2px solid rgba(255,255,255,0.60) !important;
  outline-offset:2px !important;
}