/* ─── DROPDOWN-NAVIGATION (nav.main-nav Ergänzung) ─── */
.nav-dropdown{
  position:relative;
}
.nav-dropdown-toggle{
  font-family:'Cinzel',serif; font-size:12px; letter-spacing:1px;
  padding:8px 14px; border:1px solid var(--border3); border-radius:3px;
  background:transparent; color:var(--text3); cursor:pointer; transition:all .2s;
  display:flex; align-items:center; gap:5px;
}
.nav-dropdown-toggle:hover,
.nav-dropdown.active > .nav-dropdown-toggle,
.nav-dropdown.open > .nav-dropdown-toggle{
  background:rgba(200,168,75,0.12); color:var(--gold); border-color:var(--gold);
}
.nav-caret{
  font-size:9px; transition:transform .2s; color:var(--text3);
}
.nav-dropdown.open .nav-caret{ transform:rotate(180deg); color:var(--gold); }

.nav-dropdown-menu{
  display:none;
  position:absolute; top:100%; left:0;
  min-width:220px; z-index:200;
  background:var(--bg2); border:1px solid var(--border3); border-radius:4px;
  padding:12px 6px 6px 6px; margin-top:0;
  flex-direction:column; gap:2px;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
}
/* Der optische Abstand zum Button entsteht durch padding-top (10-12px) statt
   durch ein echtes margin/gap. Da Padding zur Box und damit zur Hover-Flaeche
   gehoert, kann die Maus beim Runtergehen nicht mehr "durchrutschen" und den
   Hover verlieren. Zusaetzlich ragt der Kasten optisch minimal ueber den
   Button, was den Effekt eines nahtlosen Uebergangs verstaerkt. */
.nav-dropdown-toggle{
  margin-bottom:0;
}
.nav-dropdown.open .nav-dropdown-menu{ display:flex; }

/* Öffnet zusätzlich beim Drüberhovern (Desktop/Maus). Der Klick-Mechanismus
   (JS, siehe header.php) bleibt parallel bestehen, damit es auf Touch-Geräten
   ohne Hover trotzdem funktioniert. */
@media (hover: hover) and (pointer: fine){
  .nav-dropdown:hover .nav-dropdown-menu{ display:flex; }
  .nav-dropdown:hover .nav-caret{ transform:rotate(180deg); color:var(--gold); }
  .nav-dropdown:hover > .nav-dropdown-toggle{
    background:rgba(200,168,75,0.12); color:var(--gold); border-color:var(--gold);
  }
}

.nav-dropdown-menu a{
  font-family:'Cinzel',serif; font-size:12px; letter-spacing:.5px;
  padding:9px 12px; border-radius:3px; color:var(--text3);
  white-space:nowrap; transition:all .15s;
}
.nav-dropdown-menu a:hover{
  background:rgba(200,168,75,0.12); color:var(--gold);
}

/* Aktiver Hauptlink / aktive Dropdown-Gruppe */
nav.main-nav > a.active{
  background:rgba(200,168,75,0.12); color:var(--gold); border-color:var(--gold);
}

/* Mobile: Dropdown-Menu als Vollbreite unter dem Button statt absolut positioniert,
   damit es auf schmalen Screens nicht abgeschnitten wird */
@media (max-width: 640px){
  .nav-dropdown-menu{
    position:static; min-width:0; width:100%; margin-top:4px;
    box-shadow:none;
  }
}