/* =========================================================
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.ig{background:linear-gradient(135deg,#f58529 0%,#feda77 18%,#dd2a7b 52%,#8134af 76%,#515bd4 100%)}
.social-btn.tt{background:#0e0e10;color:#fff;box-shadow:inset -2px -2px 0 rgba(37,244,238,.65), inset 2px 2px 0 rgba(254,44,85,.55)}
.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(101,120,93,.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:var(--dm-green)!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;
  }
}


/* =========================================================
DM LOGO LOCKUP V2
Kompaktes Monogramm + gesetzter Markenname statt Bild-Kasten
========================================================= */
.brand.dm-brand{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  color:#fff!important;
  min-width:max-content;
}
.brand.dm-brand .brand-mark{
  width:64px!important;
  height:64px!important;
  max-width:none!important;
  object-fit:contain!important;
  filter:none!important;
  flex:0 0 auto;
}
.brand-copy{
  display:flex;
  flex-direction:column;
  line-height:1;
  transform:translateY(1px);
}
.brand-copy strong{
  font-family:Georgia,"Times New Roman",serif;
  font-size:20px;
  font-weight:500;
  letter-spacing:.02em;
  color:#fff;
  white-space:nowrap;
}
.brand-copy small{
  margin-top:8px;
  font-family:Manrope,Inter,Arial,sans-serif;
  font-size:9px;
  font-weight:850;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(255,255,255,.66);
}
@media(min-width:1051px){
  .brand.dm-brand img.brand-mark{
    width:70px!important;
    height:70px!important;
    max-width:70px!important;
  }
  .brand.dm-brand:hover img.brand-mark{
    transform:scale(1.04)!important;
    filter:none!important;
  }
  .brand.dm-brand{transition:transform .22s ease!important}
  .brand.dm-brand:hover{transform:translateY(-1px)}
}
@media(max-width:700px){
  .brand.dm-brand{gap:9px!important}
  .brand.dm-brand .brand-mark{
    width:48px!important;height:48px!important;max-width:48px!important;
  }
  .brand-copy strong{font-size:14px}
  .brand-copy small{font-size:7px;letter-spacing:.24em;margin-top:5px}
}


.social-btn.ig i,
.social-btn.tt i,
.social-btn.wa i{font-size:18px}

.header-cta{background:#65785d!important;color:#fff!important}
.social-btn.ig{background:linear-gradient(135deg,#f58529 0%,#feda77 18%,#dd2a7b 52%,#8134af 76%,#515bd4 100%)!important}
.social-btn.tt{background:#0b0b0c!important;box-shadow:inset -2px -2px 0 rgba(37,244,238,.72),inset 2px 2px 0 rgba(254,44,85,.58)!important}
.social-btn.wa{background:#25d366!important}