/* ==========================================================================
   voziti.eu – Kopfzeile / Hauptnavigation (18.10.2026)
   Navigation: Preise · Händler werden · Hilfe · Kontakt
   Wird in jeder Seite als letztes Stylesheet geladen und vereinheitlicht die
   unterschiedlichen alten Header-Stile. Unter 900 px gilt das Handy-Menü aus css/mobile.css.
   ========================================================================== */
@media (min-width: 900px) {
  header.header { background: #1f1f21 !important; border-bottom: 1px solid #333336 !important; }
  header.header .header-inner {
    display: flex !important; align-items: center !important; flex-wrap: nowrap !important;
    gap: 1.25rem !important; min-height: 64px !important; height: 64px !important;
  }
  header.header .header-inner > .logo { flex: 0 0 auto !important; display: flex; align-items: center; }
  header.header .header-inner > .logo img { height: 30px !important; width: auto !important; display: block; }

  /* Navigation: ruhige Textlinks, orange Unterstreichung bei Hover und auf der aktuellen Seite */
  header.header .nav-main {
    display: flex !important; align-items: stretch !important; gap: 0.25rem !important;
    flex: 1 1 auto !important; min-width: 0; height: 64px; margin: 0 0 0 0.5rem !important;
  }
  header.header .nav-main a {
    position: relative; display: inline-flex !important; align-items: center; height: 100%;
    padding: 0 0.8rem !important; color: #c8c8ce !important; font-size: 0.92rem !important; font-weight: 500 !important;
    text-decoration: none !important; white-space: nowrap; letter-spacing: 0.01em; transition: color .15s;
  }
  header.header .nav-main a::after {
    content: ''; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0; height: 3px;
    background: #FD5701; transform: scaleX(0); transition: transform .18s ease;
  }
  header.header .nav-main a:hover { color: #fff !important; }
  header.header .nav-main a:hover::after { transform: scaleX(0.6); }
  header.header .nav-main a[aria-current="page"] { color: #fff !important; }
  header.header .nav-main a[aria-current="page"]::after { transform: scaleX(1); }

  /* Aktionen rechts: gleiche Höhe, gleiche Kanten */
  header.header .header-actions { display: flex !important; align-items: center !important; gap: 0.5rem !important; margin-left: auto !important; flex: 0 0 auto !important; }
  header.header .header-actions > .btn, header.header .header-actions > a.btn,
  header.header .hdr-user-btn, header.header .vl-sw .vl-btn {
    height: 38px !important; min-height: 38px !important; box-sizing: border-box; display: inline-flex !important; align-items: center;
    padding: 0 0.9rem !important; font-size: 0.86rem !important; font-weight: 600 !important; border-radius: 0 !important; white-space: nowrap;
  }
  header.header .hdr-user-btn { gap: 0.3em; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; background: #2c2c2e !important; border: 1px solid #45454a !important; }
  header.header .header-actions .btn-secondary { background: #2c2c2e !important; border: 1px solid #45454a !important; color: #f0f0f2 !important; }
  header.header .header-actions .btn-secondary:hover, header.header .hdr-user-btn:hover { border-color: #FD5701 !important; }
  header.header .vl-sw .vl-btn { background: #2c2c2e !important; border: 1px solid #45454a !important; }
}
/* Schmale Desktop-Fenster: alles etwas kompakter, damit nichts überlappt */
@media (min-width: 900px) and (max-width: 1180px) {
  header.header .header-inner { gap: 0.6rem !important; }
  header.header .header-inner > .logo img { height: 24px !important; }
  header.header .nav-main { margin-left: 0 !important; gap: 0 !important; }
  header.header .nav-main a { padding: 0 0.5rem !important; font-size: 0.84rem !important; }
  header.header .nav-main a::after { left: 0.5rem; right: 0.5rem; }
  header.header .header-actions { gap: 0.35rem !important; }
  header.header .header-actions > .btn, header.header .hdr-user-btn, header.header .vl-sw .vl-btn { padding: 0 0.6rem !important; font-size: 0.8rem !important; }
  header.header .hdr-user-btn { max-width: 8.5rem; }
}