/* ==========================================================
   DUST IN THE WIND 2.0
   HEADERMENÜ – MINISTERIUMSREGISTER 1977
   ========================================================== */

#head_menu{
  --hm-bg:#100805;
  --hm-deep:#0c0604;
  --hm-panel:#160d08;
  --hm-panel-soft:#24140c;
  --hm-line:#5a341d;
  --hm-line-soft:rgba(197,139,69,.20);
  --hm-gold:#c58b45;
  --hm-gold-light:#e0b36a;
  --hm-text:#ead0a1;
  --hm-muted:#c8a878;

  position:relative;
  z-index:9998;

  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  align-items:stretch;

  width:100%;
  min-height:64px;

  color:var(--hm-text);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      transparent
    ),
    linear-gradient(
      90deg,
      #120906,
      #24140c 55%,
      #160d08
    );

  border-top:1px solid rgba(197,139,69,.28);
  border-bottom:2px solid #8a4e22;

  box-shadow:
    0 14px 30px rgba(0,0,0,.32),
    inset 0 1px rgba(255,255,255,.025);

  font-family:Antonio,Arial,sans-serif;
  box-sizing:border-box;
}

#head_menu *,
#head_menu *:before,
#head_menu *:after{
  box-sizing:border-box;
}

/* ==========================================================
   AVATAR
   ========================================================== */

.menu_avatar{
  position:relative;
  z-index:9999;

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

  width:76px;
  height:92px;

  margin:8px 8px -28px 16px;
  padding:4px;

  overflow:hidden;

  background:#160d08;

  border:1px solid #8a5a31;
  border-bottom:4px solid #c58b45;
  border-radius:0;

  box-shadow:
    0 12px 24px rgba(0,0,0,.42),
    inset 0 0 0 2px rgba(197,139,69,.07);
}

#member_avatar{
  display:block;
  width:100%;
  height:100%;
}

#member_avatar a{
  display:block;
  width:100%;
  height:100%;
}

#member_avatar img,
.menu_avatar img,
.rund{
  display:block;

  width:100% !important;
  height:100% !important;

  max-width:none !important;
  max-height:none !important;

  margin:0;
  padding:0;

  object-fit:cover;
  object-position:center;

  border:0;
  border-radius:0 !important;
}

/* ==========================================================
   NAVIGATION
   ========================================================== */

#head_menu nav{
  position:relative;
  z-index:2;

  display:block;

  width:100%;
  min-width:0;

  overflow:visible;
}

#head_menu nav ul,
#head_menu nav li,
#head_menu nav a{
  margin:0;
  padding:0;
}

#head_menu nav ul{
  list-style:none;
}

/* Hauptleiste */

#head_menu nav > ul{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;

  width:100%;
  min-height:64px;
}

#head_menu nav > ul > li{
  position:relative;

  display:flex;
  align-items:stretch;

  float:none;

  min-width:0;
}

/* Leere Plugin-Listenelemente nicht sichtbar */

#head_menu nav > ul > li:empty{
  display:none;
}

/* Normale Links und Pluginlinks */

#head_menu nav > ul > li > a,
#head_menu nav > ul > li > span > a,
#head_menu nav > ul > li > div > a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;

  min-height:64px;
  padding:0 11px;

  color:var(--hm-muted);
  background:transparent;

  border-right:1px solid rgba(197,139,69,.12);

  text-decoration:none;

  transition:
    color .2s ease,
    background-color .2s ease,
    box-shadow .2s ease;
}

#head_menu nav > ul > li > a:hover,
#head_menu nav > ul > li > span > a:hover,
#head_menu nav > ul > li > div > a:hover{
  color:var(--hm-text);
  background:#24140c;

  box-shadow:
    inset 0 -3px var(--hm-gold),
    inset 0 1px rgba(255,255,255,.025);
}

/* Überschriften innerhalb der Links */

#head_menu nav h1{
  display:block;

  margin:0;
  padding:0;

  color:inherit;

  font-family:Antonio,Arial,sans-serif;
  font-size:9px;
  font-weight:700;
  line-height:1.2;

  letter-spacing:1px;
  white-space:nowrap;
  text-transform:uppercase;
}

/* Symbole */

.menu_icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  color:var(--hm-gold);

  font-size:11px;
  line-height:1;
}

.menu_icon i{
  color:inherit;
}

/* ==========================================================
   PLUGINLINKS
   ========================================================== */

/*
   Eulenpost und Szenenzähler erzeugen häufig eigenes HTML.
   Dadurch werden auch deren Links wie normale Menüpunkte formatiert.
*/

#head_menu nav > ul > li > a,
#head_menu nav > ul > li > span,
#head_menu nav > ul > li > div{
  font-family:Antonio,Arial,sans-serif;
  font-size:9px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
}

#head_menu nav > ul > li > span:not(.menu_icon),
#head_menu nav > ul > li > div{
  display:flex;
  align-items:center;
}

#head_menu nav > ul > li > span:not(.menu_icon) a,
#head_menu nav > ul > li > div a{
  display:flex;
  align-items:center;
  justify-content:center;

  min-height:64px;
  padding:0 11px;

  color:var(--hm-muted);

  border-right:1px solid rgba(197,139,69,.12);

  text-decoration:none;
}

#head_menu nav > ul > li > span:not(.menu_icon) a:hover,
#head_menu nav > ul > li > div a:hover{
  color:var(--hm-text);
  background:#24140c;

  box-shadow:inset 0 -3px var(--hm-gold);
}

/* Zähler innerhalb der Navigation */

#head_menu nav .counter,
#head_menu nav .badge,
#head_menu nav [class*="count"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:18px;
  min-height:18px;

  margin-left:5px;
  padding:2px 5px;

  color:#160d08;
  background:var(--hm-gold);

  border-radius:0;

  font-size:8px;
  line-height:1;
}

/* ==========================================================
   DROPDOWN
   ========================================================== */

#head_menu nav > ul > li > ul{
  position:absolute;
  top:64px;
  left:0;
  z-index:10000;

  display:block;

  width:175px;
  min-width:175px;

  margin:0;
  padding:5px;

  opacity:0;
  visibility:hidden;

  color:var(--hm-text);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.02),
      transparent
    ),
    #160d08;

  border:1px solid rgba(197,139,69,.35);
  border-top:3px solid var(--hm-gold);

  box-shadow:0 16px 32px rgba(0,0,0,.45);

  transform:translateY(6px);

  transition:
    opacity .2s ease,
    visibility .2s ease,
    transform .2s ease;
}

#head_menu nav > ul > li:hover > ul{
  top:64px;

  opacity:1;
  visibility:visible;

  transform:translateY(0);
}

#head_menu nav ul ul li{
  display:block;
  width:100%;
}

#head_menu nav ul ul a{
  display:block;

  min-height:0;
  padding:9px 10px;

  color:var(--hm-muted);
  background:transparent;

  border:0;
  border-bottom:1px solid rgba(197,139,69,.12);

  font-family:Antonio,Arial,sans-serif;
  font-size:9px;
  font-weight:700;
  line-height:1.3;

  letter-spacing:.8px;
  text-decoration:none;
  text-transform:uppercase;
}

#head_menu nav ul ul li:last-child a{
  border-bottom:0;
}

#head_menu nav ul ul a:hover{
  color:var(--hm-text);
  background:#3a2416;

  box-shadow:inset 3px 0 var(--hm-gold);
}

/* ==========================================================
   SCHALTFLÄCHENBEREICH – FALLS NOCH GENUTZT
   ========================================================== */

.menu_buttons{
  display:flex;
  align-items:center;
  gap:5px;

  margin:0;
  padding:7px;
}

.menu_button{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:30px;
  padding:6px 9px;

  color:var(--hm-muted);
  background:#24140c;

  border:1px solid rgba(197,139,69,.20);

  font-family:Antonio,Arial,sans-serif;
  font-size:9px;
  font-weight:700;

  letter-spacing:.8px;
  text-transform:uppercase;
}

.menu_button:hover{
  color:var(--hm-text);
  border-color:var(--hm-gold);
}

/* ==========================================================
   LOGIN-MODAL
   ========================================================== */

#quick_login{
  color:var(--hm-text);
}

#quick_login .tborder{
  overflow:hidden;

  color:var(--hm-text);
  background:#160d08;

  border:1px solid rgba(197,139,69,.38);
  border-left:5px solid var(--hm-gold);
  border-radius:0;

  box-shadow:0 20px 45px rgba(0,0,0,.48);
}

#quick_login .thead{
  padding:11px 14px;

  color:var(--hm-gold-light);
  background:#160d08;

  border-bottom:2px solid #8a4e22;

  font-family:Cinzel,Georgia,serif;
  font-size:15px;
  letter-spacing:.7px;
  text-transform:uppercase;
}

#quick_login .trow1,
#quick_login .trow2{
  padding:9px;

  color:var(--hm-text);
  background:#24140c;

  border-bottom:1px solid rgba(197,139,69,.10);
}

#quick_login input.textbox{
  width:100%;

  padding:8px 9px;

  color:var(--hm-text);
  background:#100805;

  border:1px solid rgba(197,139,69,.28);
  border-radius:0;

  box-sizing:border-box;
}

#quick_login input.textbox:focus{
  border-color:var(--hm-gold);
  outline:none;

  box-shadow:0 0 0 1px rgba(197,139,69,.15);
}

#quick_login input.button{
  padding:7px 13px;

  color:var(--hm-text);
  background:#3a2416;

  border:1px solid rgba(197,139,69,.30);
  border-radius:0;

  cursor:pointer;
}

#quick_login input.button:hover{
  color:#160d08;
  background:var(--hm-gold);
}

#quick_login .lost_password{
  color:var(--hm-gold);
}

/* ==========================================================
   TABLET – HORIZONTAL SCROLLBARE LEISTE
   ========================================================== */

@media screen and (max-width:1000px){

  #head_menu{
    grid-template-columns:82px minmax(0,1fr);
  }

  .menu_avatar{
    width:68px;
    height:84px;

    margin-left:10px;
  }

  #head_menu nav{
    overflow-x:auto;
    overflow-y:visible;

    scrollbar-width:thin;
    scrollbar-color:#8a5a31 #160d08;
  }

  #head_menu nav > ul{
    flex-wrap:nowrap;
    width:max-content;
    min-width:100%;
  }

  #head_menu nav > ul > li{
    flex:0 0 auto;
  }

  #head_menu nav::-webkit-scrollbar{
    height:6px;
  }

  #head_menu nav::-webkit-scrollbar-track{
    background:#160d08;
  }

  #head_menu nav::-webkit-scrollbar-thumb{
    background:#8a5a31;
  }
}

/* ==========================================================
   SMARTPHONE
   ========================================================== */

@media screen and (max-width:600px){

  #head_menu{
    display:block;
    min-height:0;

    padding-top:8px;
  }

  .menu_avatar{
    width:62px;
    height:78px;

    margin:0 auto 8px;
  }

  #head_menu nav{
    width:100%;
  }

  #head_menu nav > ul{
    min-height:46px;
  }

  #head_menu nav > ul > li > a,
  #head_menu nav > ul > li > span > a,
  #head_menu nav > ul > li > div > a{
    min-height:46px;
    padding:0 9px;
  }

  #head_menu nav h1{
    font-size:8px;
  }

  #head_menu nav > ul > li > ul{
    top:46px;
  }

  #head_menu nav > ul > li:hover > ul{
    top:46px;
  }
}