/* =========================================================
HEADER.CSS
Topbar, Navigation, Logo, mobile Menü
========================================================= */
.topbar{position:fixed;top:0;left:0;right:0;height:34px;background:var(--red);color:#fff;z-index:1200;overflow:hidden;display:flex;align-items:center;font-size:14px;font-weight:850}
.topbar-track{display:flex;gap:44px;white-space:nowrap;width:max-content;animation:topbarSlide 38s linear infinite}
.topbar span{display:inline-flex;gap:7px;align-items:center}
@keyframes topbarSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.site-header{position:fixed;top:34px;left:0;right:0;height:92px;padding:0 5.5vw;display:flex;align-items:center;justify-content:space-between;background:rgba(8,8,8,.82);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08);z-index:1000}
.brand img{height:74px;max-width:380px;object-fit:contain}
.main-nav{display:flex;gap:25px}
.main-nav a{font-size:15px;font-weight:850;color:#e8e8e8}
.main-nav a:hover{color:var(--red)}
.header-actions{display:flex;align-items:center;gap:10px}
.social-btn{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.12);transition:.25s}
.social-btn.fb{background:#1877f2}
.social-btn.wa{background:#25d366}
.social-btn:hover{transform:translateY(-3px)}
.header-cta{display:inline-flex;gap:8px;align-items:center;justify-content:center;border-radius:999px;padding:12px 20px;font-weight:900;background:var(--red);color:#fff;box-shadow:0 16px 38px rgba(225,6,0,.25)}
.menu-toggle{display:none;background:none;border:0;width:42px;cursor:pointer}
.menu-toggle span{display:block;height:3px;background:#fff;margin:7px 0;border-radius:8px}
.floating-whatsapp{position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:999px;background:#25d366;color:#fff;display:grid;place-items:center;font-size:30px;z-index:1500;box-shadow:0 18px 45px rgba(37,211,102,.35)}
.theme-floating{position:fixed;left:22px;bottom:22px;z-index:1500;border:1px solid rgba(255,255,255,.18);background:#151515;color:#fff;border-radius:999px;padding:12px 16px;display:flex;align-items:center;gap:8px;cursor:pointer;box-shadow:0 18px 45px rgba(0,0,0,.25)}


/* === FINAL LIVE: Header Desktop Feinschliff === */
@media(min-width:1051px){
  .brand img{
    height:84px!important;
    max-width:430px!important;
  }

  .main-nav{
    margin-left:80px!important;
    gap:34px!important;
  }

  .brand:hover img{
    transform:scale(1.03);
  }

  .brand img{
    transition:.25s ease;
  }
}


/* =========================================================
FINAL HEADERFIX:
- Logo Desktop deutlich größer
- Menü weiter nach rechts
- Aktiver Menüpunkt sichtbar
- Hover-Zoom + Unterstrich
========================================================= */
@media(min-width:1051px){
  .site-header{
    height:104px!important;
    padding-left:5vw!important;
    padding-right:5vw!important;
    display:grid!important;
    grid-template-columns:auto 1fr auto!important;
    gap:38px!important;
  }

  .brand{
    justify-self:start!important;
    display:flex!important;
    align-items:center!important;
  }

  .brand img{
    height:98px!important;
    max-width:500px!important;
    width:auto!important;
    object-fit:contain!important;
    transition:transform .25s ease, filter .25s ease!important;
  }

  .brand:hover img{
    transform:scale(1.035)!important;
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))!important;
  }

  .main-nav{
    justify-self:start!important;
    margin-left:115px!important;
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
  }

  .main-nav a{
    position:relative!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:42px!important;
    padding:0 16px!important;
    border-radius:999px!important;
    color:#e8e8e8!important;
    font-size:15.5px!important;
    font-weight:900!important;
    transition:transform .22s ease, color .22s ease, background .22s ease, box-shadow .22s ease!important;
  }

  .main-nav a:hover{
    transform:translateY(-2px) scale(1.07)!important;
    color:#fff!important;
    background:rgba(255,255,255,.08)!important;
  }

  .main-nav a::after{
    content:""!important;
    position:absolute!important;
    left:18px!important;
    right:18px!important;
    bottom:4px!important;
    height:2px!important;
    border-radius:99px!important;
    background:#e10600!important;
    transform:scaleX(0)!important;
    transform-origin:left!important;
    transition:transform .24s ease!important;
  }

  .main-nav a:hover::after{
    transform:scaleX(1)!important;
  }

  .main-nav a.active{
    background:#ffffff!important;
    color:#111!important;
    box-shadow:0 12px 34px rgba(255,255,255,.16)!important;
    transform:translateY(-1px)!important;
  }

  .main-nav a.active::after{
    display:none!important;
  }

  .header-actions{
    justify-self:end!important;
  }
}

/* Tablet nicht zu riesig */
@media(max-width:1200px) and (min-width:1051px){
  .brand img{
    height:88px!important;
    max-width:430px!important;
  }
  .main-nav{
    margin-left:55px!important;
  }
  .main-nav a{
    padding:0 12px!important;
    font-size:14.5px!important;
  }
}