@import url("https://fonts.googleapis.com/css2?family=News+Cycle:wght@400;700&display=swap");

html,body{margin:0;padding:0;background:#000}

:root{
  --black:#000000;
  --white:#ffffff;
  --muted:#9fb0c7;
  --darkblue:#0e1a2b;
}

/* ===== HEADER BASIS ===== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #000;
  border-top: 10px solid var(--darkblue);
  width: 100%;
}
.header-inner{
  max-width: 100%;
  margin: 0;
  padding: 6px 0;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'News Cycle', sans-serif;
  color: var(--white);
}
.left-group{ display: flex; align-items: center; gap: 20px; }

/* ===== CENTER: Logo | Partner/Brands | User/Login ===== */
.center-group{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  justify-content: flex-start;
}
.center-group .logo{
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--white);
  white-space: nowrap;
  font-size: 1.6rem;
  margin: 0;
  flex: 0 0 auto;
}
.logo-text{ font-weight: 700; letter-spacing: .4px; }
.logo img{
  height: 70px;
  width: auto;
  max-width: 380px;
  display: block;
  object-fit: contain;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* ===== NEU: adblock-sichere Klassen ===== */
.brand-strip{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}
.brand-item{ margin: 0; }
.brand-item{
  position: relative;
  margin: 0;
  padding: 0;
  height: 60px;
  min-width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: 0;
}
.brand-item img{
  display: block;
  height: 100%;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.brand-link{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }

/* ===== ALT (Fallback): alte Klassen – kannst du später entfernen ===== */
.sponsors{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}
figure.sponsor{ margin: 0; }
.sponsor{
  position: relative;
  margin: 0;
  padding: 0;
  height: 60px;
  min-width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: 0;
}
.sponsor img{
  display: block;
  height: 100%;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.sponsor-link{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }

/* Login/Userbox ganz rechts – ohne starre Margins */
.login-btn{
  padding: 10px 12px;
  background: transparent;
  border: 0;
  color: var(--white);
  font-weight: 600;
  cursor: pointer;
  font-size: 1.05rem;
  margin: 0;
  margin-left: auto;
}
.login-btn:hover{ text-decoration: underline; }
.userbox{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid rgba(255,255,255,.12);
  padding: .35rem .55rem;
  border-radius: 4px;
  background: rgba(255,255,255,.04);
  margin: 0;
  margin-left: auto;
}
.userbox-name{ font-weight: 600; font-size: .95rem; }
.userbox-logout{
  font-size: .9rem;
  text-decoration: none;
  color: #cfd8e3;
  border-left: 1px solid rgba(255,255,255,.12);
  padding-left: .55rem;
}
.userbox-logout:hover{ text-decoration: underline; }

.cart-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  margin-left:.5rem;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  color:#e7eefb;
  text-decoration:none;
  position:relative;
  z-index:2;
}
.cart-link svg{ width:20px; height:20px; display:block; }
.cart-link:hover{ background: rgba(255,255,255,.1); }

.role-sim{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-left: .5rem;
}
.role-sim select{
  background: rgba(255,255,255,.06);
  color: #e7eefb;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 4px;
  padding: .2rem .35rem;
  font-size: .85rem;
}
.role-sim-badge{
  font-size: .75rem;
  padding: .15rem .35rem;
  border-radius: 10px;
  background: rgba(255,255,255,.12);
  color: #cfd8e3;
}

/* ===== BURGER ===== */
.burger{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  background: transparent; border: 0; color: var(--white);
  cursor: pointer;
  --bar-full: 30px;
  --bar-short: 18px;
}
.burger span,
.burger span::before,
.burger span::after{
  height: 3px;
  background: var(--white);
}
.burger span{
  display: block;
  width: var(--bar-short);
  position: relative;
  transition: width .18s ease;
}
.burger span::before,
.burger span::after{
  content: "";
  position: absolute;
  left: 0;
  width: var(--bar-full);
}
.burger span::before{ top: -8px; }
.burger span::after { top:  8px; }
.burger:hover span,
.burger:focus-visible span{ width: var(--bar-full); }
@media (prefers-reduced-motion: reduce){
  .burger span{ transition: none; }
}

/* ===== OFFCANVAS ===== */
.sidewrap{ position: fixed; inset: 0; display: none; }
.sidewrap.active{ display: block; }
.backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.sidemenu{
  position: absolute; top: 0; left: 0;
  height: 100%; width: 320px;
  background: #111; color: #fff;
  font-family: 'News Cycle', sans-serif;
  padding: 22px; border: 0; box-shadow: none;
}
.sidemenu h3{ margin: 0 0 16px; font-size: 1.2rem; color: #dfe8f5; }
.navlist{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.navlist a{
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: #e7eefb;
  padding: 12px 14px; font-size: 1.1rem;
}
.navlist a:hover{ background: #222; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px){
  .logo img{ height: 62px; }
  .brand-item{ height: 56px; }
  .sponsor{ height: 56px; }
}
@media (max-width: 640px){
  .logo img{ height: 56px; }
  .brand-item{ height: 52px; }
  .sponsor{ height: 52px; }
}
@media (max-width: 480px){
  .header-inner{ min-height: 72px; }
  .logo img{ height: 50px; }
  .brand-item{ height: 48px; }
  .brand-item img{ max-width: 180px; }
  .sponsor{ height: 48px; }
  .sponsor img{ max-width: 180px; }
}
/* === HEADER: kompaktere Logos & weniger Gaps === */

/* 1) Zentraler Logo-Schriftzug kleiner & flexibler */
.center-group .logo img{
  height: clamp(40px, 5.5vw, 56px);  /* vorher 70px */
  max-width: clamp(180px, 28vw, 300px);
}

/* 2) Brand-/Sponsor-Logos kleiner + enger zusammen */
.brand-strip,
.sponsors{
  gap: .35rem .5rem;   /* weniger Abstand */
}

/* Boxen kleiner + min-width runter, damit mehr nebeneinander passt */
.brand-item,
.sponsor{
  height: clamp(36px, 5.2vw, 48px);  /* vorher 60px */
  min-width: 84px;                   /* vorher 100px */
}

/* Bilder selbst ebenfalls limitieren */
.brand-item img,
.sponsor img{
  max-width: clamp(110px, 18vw, 160px); /* vorher bis 220px */
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* 3) Mitte atmen lassen: weniger Grundabstand */
.center-group{ gap: .5rem; }

/* 4) Safety: nichts darf horizontal überlaufen */
.header-inner,
.center-group{ min-width: 0; }
.center-group{ overflow: hidden; }

/* 5) Noch kompakter auf kleineren Breakpoints */
@media (max-width: 900px){
  .center-group .logo img{ height: clamp(38px, 6vw, 50px); }
  .brand-item, .sponsor{ height: clamp(34px, 5.5vw, 44px); min-width: 78px; }
  .brand-item img, .sponsor img{ max-width: clamp(100px, 22vw, 150px); }
}

@media (max-width: 640px){
  .center-group .logo img{ height: clamp(34px, 7vw, 46px); }
  .brand-item, .sponsor{ height: clamp(32px, 6vw, 40px); min-width: 72px; }
  .brand-item img, .sponsor img{ max-width: clamp(92px, 26vw, 140px); }
}

@media (max-width: 480px){
  .header-inner{ min-height: 64px; }
  .center-group .logo img{ height: clamp(32px, 8vw, 42px); }
  .brand-item, .sponsor{ height: clamp(30px, 6.5vw, 38px); min-width: 68px; }
  .brand-item img, .sponsor img{ max-width: clamp(88px, 30vw, 128px); }
}
/* === Mobile: Username ausblenden, Logout bleibt sichtbar === */
@media (max-width: 640px){
  .userbox-name {
    display: none !important;
  }
}