/* DartVision v7.44.1 · Oberer Bereich nach Referenz-Screenshot */
/* ===== Größen-Tokens: einzige Quelle für Header/Hero + Zoom-Stufen für große Displays =====
   --dp-zoom skaliert die komplette UI ab 27"/QHD (x1.333) und 4K-TV (x2) auf das 1080p-Layout.
   --dp-vw/--dp-vh/--dp-dvh ersetzen vw/vh/dvh, damit Viewport-Einheiten unter zoom nicht doppelt skaliert werden. */
:root{
  --dp-zoom:1;
  --dp-vw:calc(1vw / var(--dp-zoom));
  --dp-vh:calc(1vh / var(--dp-zoom));
  --dp-dvh:calc(1dvh / var(--dp-zoom));
  --dv-top-h:clamp(62px,calc(8 * var(--dp-vh)),86px);
  --dv-hero-h:clamp(96px,calc(30 * var(--dp-vh) - 96px),228px);   /* 228 px bei 1080p, kleiner bei niedrigen Displays */
}
@supports (zoom:1){
  html{zoom:var(--dp-zoom)}
  @media (min-width:2200px) and (min-height:1250px){:root{--dp-zoom:1.3333}}
  @media (min-width:3000px) and (min-height:1750px){:root{--dp-zoom:2}}
}

/* Nur EIN Satz Zurück/Hauptmenü: keine schwebenden/globalen Duplikate. */
.dvGlobalPageNav,#dvTopBackBtn,#dvTopHomeBtn{display:none!important}

/* Kopfzeile */
.dvTopbar{
  min-height:var(--dv-top-h)!important;height:var(--dv-top-h)!important;
  display:grid!important;
  grid-template-columns:220px minmax(690px,1fr) auto!important;
  align-items:stretch!important;
  padding:0 16px!important;
  background:linear-gradient(180deg,#080708 0%,#020202 100%)!important;
  border-top:1px solid rgba(255,255,255,.12)!important;
  border-bottom:1px solid rgba(var(--accent-rgb),.72)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.58)!important;
  overflow:visible!important;
}
.dvTopbar:after{height:1px!important;background:linear-gradient(90deg,transparent,var(--accent) 12%,var(--accent) 48%,var(--accent-dark) 88%,transparent)!important;opacity:.75!important}
.dvTopBrand{display:flex!important;align-items:center!important;padding:0!important;min-width:0!important;border-right:1px solid rgba(255,255,255,.04)!important}
.dvTopBrand .brandLogoWide{display:block!important;width:205px!important;height:76px!important;object-fit:contain!important;object-position:left center!important;filter:drop-shadow(0 9px 14px rgba(0,0,0,.55))!important}
.dvTopBrand .brandCompactMark{display:none!important}

/* Hauptnavigation wie im Screenshot */
.dvTopNav{display:grid!important;grid-template-columns:repeat(6,minmax(92px,1fr))!important;height:100%!important;min-width:0!important;border-left:1px solid rgba(255,255,255,.035)!important;border-right:1px solid rgba(255,255,255,.035)!important;background:rgba(0,0,0,.12)!important}
.dvTopNavBtn{position:relative!important;min-width:0!important;max-width:none!important;height:100%!important;padding:9px 8px 8px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important;border:0!important;border-right:1px solid rgba(255,255,255,.045)!important;border-radius:0!important;background:transparent!important;color:#f2eef0!important;box-shadow:none!important}
.dvTopNavBtn img{display:block!important;width:23px!important;height:23px!important;object-fit:contain!important;filter:brightness(0) invert(1) drop-shadow(0 0 6px rgba(255,255,255,.12))!important;opacity:.95!important}
.dvTopNavBtn b{font-size:clamp(8px,calc(.66 * var(--dp-vw)),10px)!important;line-height:1!important;letter-spacing:.1em!important;font-weight:900!important;white-space:nowrap!important}
.dvTopNavBtn:hover{background:linear-gradient(180deg,rgba(var(--accent-rgb),.24),rgba(23,3,5,.16))!important}
.dvTopNavBtn.active{background:linear-gradient(180deg,rgba(var(--accent-rgb),.72),rgba(86,4,11,.46))!important;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.48),inset 0 -3px var(--accent),0 0 24px rgba(var(--accent-rgb),.10)!important}
.dvTopNavBtn.active:after{content:"";position:absolute;left:24%;right:24%;bottom:-1px;height:3px;background:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),.72)}
.dvTopNavBtn.active img{filter:brightness(0) invert(1) drop-shadow(0 0 9px rgba(var(--accent-rgb),.55))!important}

/* Einmalige Navigation rechts */
.dvTopUtilities{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:9px!important;margin:0 0 0 12px!important;min-width:max-content!important}
.dvTopUtilities .badge,.dvTopUtilities .dvSystemBtn,.dvTopUtilities .dvHiddenUtility,.dvTopUtilities .adminTopBtn{display:none!important}
.dvHeaderNavBtn{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:42px!important;height:42px!important;padding:0 14px!important;border-radius:4px!important;border:1px solid rgba(var(--accent-rgb),.55)!important;background:linear-gradient(180deg,#0d0b0c,#060506)!important;color:#f3edef!important;font-size:10px!important;font-weight:900!important;letter-spacing:.06em!important;white-space:nowrap!important;box-shadow:inset 0 1px rgba(255,255,255,.035),0 6px 14px rgba(0,0,0,.3)!important}
.dvHeaderNavBtn:hover{border-color:var(--accent)!important;background:linear-gradient(180deg,#171012,#080607)!important;box-shadow:0 0 16px rgba(var(--accent-rgb),.12)!important}
.dvHeaderNavBtn:disabled{opacity:.38!important;cursor:default!important;box-shadow:none!important}
.dvTopUtilities .dvProfileBtn{display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;min-width:168px!important;max-width:196px!important;height:54px!important;padding:0 16px!important;border-radius:20px!important;border:1px solid rgba(255,255,255,.075)!important;background:linear-gradient(180deg,#121011,#080708)!important;color:#eee9eb!important;font-size:10px!important;font-weight:800!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;box-shadow:0 8px 18px rgba(0,0,0,.38)!important}
.dvTopMotto{display:none!important}

/* Gesamtraster: genau der hohe obere Block aus dem Screenshot */
.app{grid-template-rows:var(--dv-top-h) var(--dv-hero-h) minmax(0,1fr) 66px!important}

/* Hero – großes, dunkles Logo im Hintergrund + klares Logo mittig */
.dvLiveHero{position:relative!important;min-height:var(--dv-hero-h)!important;height:var(--dv-hero-h)!important;display:grid!important;grid-template-columns:210px minmax(520px,1fr) 250px!important;align-items:center!important;padding:0 36px!important;overflow:hidden!important;border-bottom:1px solid rgba(var(--accent-rgb),.67)!important;background:#030202!important;box-shadow:inset 0 -25px 48px rgba(0,0,0,.52)!important;isolation:isolate!important}
.dvLiveHero:before{content:""!important;position:absolute!important;inset:0!important;z-index:-2!important;background:url('../branding/dartprime-hero-7463.png') center 47%/cover no-repeat!important;opacity:.22!important;filter:saturate(.88) brightness(.72)!important;transform:scale(1.08)!important}
.dvLiveHero:after{content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;background:linear-gradient(90deg,rgba(0,0,0,.90) 0%,rgba(0,0,0,.30) 24%,rgba(72,0,7,.26) 50%,rgba(0,0,0,.38) 78%,rgba(0,0,0,.92) 100%),linear-gradient(180deg,rgba(0,0,0,.16),rgba(77,0,8,.18) 54%,rgba(0,0,0,.48))!important;pointer-events:none!important}
.dvLiveHeroLogo{position:relative!important;z-index:2!important;justify-self:center!important;width:min(510px,88%)!important;height:190px!important;max-height:none!important;object-fit:contain!important;background:rgba(0,0,0,.80)!important;padding:0 12px!important;filter:drop-shadow(0 12px 26px rgba(0,0,0,.72)) drop-shadow(0 0 14px rgba(var(--accent-rgb),.10))!important}
.dvLiveHeroLeft,.dvLiveHeroRight{position:relative!important;z-index:2!important;display:flex!important;flex-direction:column!important;gap:12px!important;font-size:13px!important;line-height:1.1!important;letter-spacing:.31em!important;font-weight:850!important;color:#e1dade!important;text-transform:uppercase!important}
.dvLiveHeroLeft{align-items:flex-start!important;text-align:left!important}
.dvLiveHeroLeft:after{content:""!important;width:80px!important;height:2px!important;margin-top:8px!important;background:var(--accent)!important;box-shadow:0 0 12px rgba(var(--accent-rgb),.42)!important}
.dvLiveHeroRight{align-items:flex-end!important;text-align:right!important;padding-right:5px!important;color:#e8dfe2!important}

/* Responsive, ohne Header zu zerlegen */
@media(max-width:1500px){
  .dvTopbar{grid-template-columns:190px minmax(570px,1fr) auto!important;padding-inline:10px!important}
  .dvTopBrand .brandLogoWide{width:178px!important}
  .dvTopNavBtn b{font-size:8px!important;letter-spacing:.08em!important}
  .dvHeaderNavBtn{padding-inline:10px!important;font-size:9px!important}
  .dvTopUtilities .dvProfileBtn{min-width:128px!important;max-width:148px!important}
  .dvLiveHero{grid-template-columns:160px minmax(430px,1fr) 200px!important;padding-inline:24px!important}
  .dvLiveHeroLogo{width:min(470px,90%)!important}
  .dvLiveHeroLeft,.dvLiveHeroRight{font-size:10px!important}
}
@media(max-width:1180px){
  :root{--dv-top-h:clamp(62px,calc(8 * var(--dp-vh)),76px);--dv-hero-h:clamp(96px,calc(30 * var(--dp-vh) - 96px),190px)}
  .dvTopbar{grid-template-columns:150px minmax(480px,1fr) auto!important}
  .dvTopBrand .brandLogoWide{width:142px!important;height:64px!important}
  .dvTopNavBtn img{width:19px!important;height:19px!important}.dvTopNavBtn b{font-size:7px!important}
  .dvHeaderNavBtn{min-width:0!important;padding:0 8px!important;font-size:8px!important}
  .dvTopUtilities .dvProfileBtn{min-width:46px!important;width:46px!important;padding:0!important;font-size:0!important;border-radius:50%!important;justify-content:center!important}
  .dvLiveHero{grid-template-columns:120px 1fr 150px!important}.dvLiveHeroLogo{height:150px!important;width:min(410px,92%)!important}.dvLiveHeroLeft,.dvLiveHeroRight{font-size:8px!important}
}
@media(max-width:850px){
  .dvTopbar{grid-template-columns:64px minmax(0,1fr) auto!important;padding:0 6px!important}
  .dvTopBrand .brandLogoWide{display:none!important}.dvTopBrand .brandCompactMark{display:block!important;width:48px!important;height:48px!important}
  .dvTopNav{overflow-x:auto!important;grid-template-columns:repeat(6,80px)!important;scrollbar-width:none!important}.dvTopNav::-webkit-scrollbar{display:none!important}
  .dvHeaderNavBtn{display:none!important}
  .dvLiveHero{grid-template-columns:1fr!important;padding:0 10px!important}.dvLiveHeroLeft,.dvLiveHeroRight{display:none!important}.dvLiveHeroLogo{width:min(500px,92%)!important}
}
@media(max-width:980px){:root{--dv-top-h:70px;--dv-hero-h:150px}}
@media(max-width:720px){:root{--dv-top-h:64px;--dv-hero-h:118px}}

/* ===== Im laufenden Spiel (body.dvInGame): oben nur Hauptmenü + Profil ===== */
body.dvInGame .dvTopNav,
body.dvInGame #dvHeaderBackBtn{visibility:hidden!important;pointer-events:none!important}
.dvProfileMenu .dvProfileMenuCancel{display:none!important;color:#ff9aa1!important}
body.dvInGame .dvProfileMenu .dvProfileMenuCancel{display:block!important}

/* v7.46.68: gemeldet - das Hero-Banner (großes DartPrime-Bild) war standardmäßig AUCH während des laufenden
   Spiels sichtbar (Einstellung "Kopfbild im Spiel anzeigen", stand bei den meisten auf an). Im normalen
   Fenster fällt das kaum auf, im Vollbild frisst es aber wertvollen Platz - genau dort kam es nach mehrfachem
   Vollbild-Wechsel zu der gemeldeten Überlagerung. Statt weiter der Vollbild-Ursache hinterherzujagen: das
   Hero-Banner blendet jetzt IMMER aus, sobald ein Spiel läuft (nicht mehr von der Einstellung abhängig) -
   die Einstellung "Kopfbild im Spiel anzeigen" wurde aus den Anzeigeeinstellungen entfernt. */
html.dvInGame{--dv-hero-h:0px}
html.dvInGame .dvLiveHero{display:none!important}
html.dvInGame .dvTopbar::before{
  background:radial-gradient(ellipse at 50% -70%,rgba(var(--accent-rgb),.32),transparent 62%),linear-gradient(180deg,#0b0708,#050304)!important;
  filter:none!important;
}