/* ══════════════════════════════════════════════════════════
   LIVING BAR — globale Styles für alle User-Seiten
   zentrale, einheitliche Kopfzeilen- und Logo-Referenz
══════════════════════════════════════════════════════════ */

/* Container */
.dvb-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
  z-index: 1;
}

/* Alle Topbar-Wrapper: Logo + User über dem Layer */
.dv-bar    > *:not(.dvb-center),
.ec-hd     > *:not(.dvb-center),
.co-bar    > *:not(.dvb-center),
.sp-bar    > *:not(.dvb-center),
.sp-top    > *:not(.dvb-center),
.es-topbar > *:not(.dvb-center),
.ps-topbar > *:not(.dvb-center),
.fq-topbar > *:not(.dvb-center),
.groups-topbar > *:not(.dvb-center) {
  position: relative;
  z-index: 2;
}

:where(.ec-hd, .co-bar, .sp-bar, .sp-top, .es-topbar, .ps-topbar, .fq-topbar, .groups-topbar) {
  min-height: var(--echo-header-h, 112px);
}

/* ── Trennpunkte ── */
.dvb-sep {
  color: rgba(168,85,247,0.35);
  font-size: 0.65rem;
  line-height: 1;
  user-select: none;
}

/* ── Uhrzeit ── */
.dvb-time {
  font-size: 0.67rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: rgba(210,185,255,0.90);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Haupttitel ── */
.dvb-title {
  font-size: clamp(0.44rem, 0.82vw, 0.60rem);
  font-weight: 300;
  letter-spacing: 0.50em;
  text-transform: uppercase;
  color: rgba(235,225,255,0.88);
  text-shadow:
    0 0 20px rgba(168,85,247,0.55),
    0 0 45px rgba(6,182,212,0.30),
    0 0 80px rgba(168,85,247,0.18);
  white-space: nowrap;
  user-select: none;
  animation: dvbTitleBreath 10s ease-in-out infinite;
}
@keyframes dvbTitleBreath {
  0%,100% { opacity: 0.80; }
  50%      { opacity: 1.00; }
}

/* ── Wetter ── */
.dvb-weather {
  font-size: 0.67rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(130,235,245,0.90);
  white-space: nowrap;
}

/* ── Orbs ── */
.dvb-orbs {
  display: flex;
  align-items: center;
  gap: 5px;
}
.dvb-orb {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
}
.dvb-orb-v {
  background: #a855f7;
  box-shadow: 0 0 8px rgba(168,85,247,0.90), 0 0 16px rgba(168,85,247,0.45);
  animation: dvbOrbPulse 4s ease-in-out infinite;
}
.dvb-orb-c {
  background: #22d3ee;
  box-shadow: 0 0 8px rgba(34,211,238,0.80), 0 0 16px rgba(34,211,238,0.35);
  animation: dvbOrbPulse 4s ease-in-out infinite 2s;
}
@keyframes dvbOrbPulse {
  0%,100% { opacity: 0.30; transform: scale(0.75); }
  50%      { opacity: 1.00; transform: scale(1.20); }
}

/* ── Equalizer ── */
.dvb-eq {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 14px;
}
.dvb-eq span {
  display: block;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #a855f7, #22d3ee);
  animation: dvbEqBar 2.2s ease-in-out infinite;
}
.dvb-eq span:nth-child(1) { animation-delay: 0.00s; }
.dvb-eq span:nth-child(2) { animation-delay: 0.28s; }
.dvb-eq span:nth-child(3) { animation-delay: 0.56s; }
.dvb-eq span:nth-child(4) { animation-delay: 0.84s; }
.dvb-eq span:nth-child(5) { animation-delay: 1.12s; }
.dvb-eq-r span:nth-child(1) { animation-delay: 1.12s; }
.dvb-eq-r span:nth-child(2) { animation-delay: 0.84s; }
.dvb-eq-r span:nth-child(3) { animation-delay: 0.56s; }
.dvb-eq-r span:nth-child(4) { animation-delay: 0.28s; }
.dvb-eq-r span:nth-child(5) { animation-delay: 0.00s; }

@keyframes dvbEqBar {
  0%,100% { height: 2px;  opacity: 0.20; }
  50%      { height: 12px; opacity: 0.80; }
}

/* ── Responsive Living Bar ── */
@media (max-width: 640px) {
  .dvb-center { display: none; }
  :where(.ec-hd, .co-bar, .sp-bar, .sp-top, .es-topbar, .ps-topbar, .fq-topbar, .groups-topbar) {
    min-height: var(--echo-header-h-mobile, 80px);
  }
}
@media (min-width: 641px) and (max-width: 900px) {
  .dvb-orbs  { display: none; }
  .dvb-eq    { display: none; }
  .dvb-title { letter-spacing: 0.28em; font-size: 0.56rem; }
}

/* ══════════════════════════════════════════════════════════
   LOGO — zentrale Größe auf allen User-Seiten
══════════════════════════════════════════════════════════ */

/* Container */
.ec-hd-logo,
.co-logo,
.es-logo,
.sp-logo,
.ps-logo,
.fq-logo,
.groups-brand {
  width: var(--echo-logo-w, 168px) !important;
  height: var(--echo-logo-h, 96px) !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: none !important;
  transform: none !important;
}

/* Bild */
.ec-hd-logo img,
.co-logo img,
.es-logo img,
.sp-logo img,
.ps-logo img,
.fq-logo img,
.groups-brand img {
  width: var(--echo-logo-w, 168px) !important;
  height: var(--echo-logo-h, 96px) !important;
  object-fit: contain !important;
  display: block !important;
  transition: none !important;
  transform: none !important;
}

.ec-hd-logo:hover,
.ec-hd-logo:active,
.ec-hd-logo:focus-visible,
.co-logo:hover,
.co-logo:active,
.co-logo:focus-visible,
.es-logo:hover,
.es-logo:active,
.es-logo:focus-visible,
.sp-logo:hover,
.sp-logo:active,
.sp-logo:focus-visible,
.ps-logo:hover,
.ps-logo:active,
.ps-logo:focus-visible,
.fq-logo:hover,
.fq-logo:active,
.fq-logo:focus-visible,
.groups-brand:hover,
.groups-brand:active,
.groups-brand:focus-visible {
  transform: none !important;
}

.ec-hd-logo:hover img,
.ec-hd-logo:active img,
.ec-hd-logo:focus-visible img,
.co-logo:hover img,
.co-logo:active img,
.co-logo:focus-visible img,
.es-logo:hover img,
.es-logo:active img,
.es-logo:focus-visible img,
.sp-logo:hover img,
.sp-logo:active img,
.sp-logo:focus-visible img,
.ps-logo:hover img,
.ps-logo:active img,
.ps-logo:focus-visible img,
.fq-logo:hover img,
.fq-logo:active img,
.fq-logo:focus-visible img,
.groups-brand:hover img,
.groups-brand:active img,
.groups-brand:focus-visible img {
  transform: none !important;
}

/* Mobile */
@media (max-width: 600px) {
  .ec-hd-logo,
  .co-logo,
  .es-logo,
  .sp-logo,
  .ps-logo,
  .fq-logo,
  .groups-brand {
    width: var(--echo-logo-w-mobile, 104px) !important;
    height: var(--echo-logo-h-mobile, 56px) !important;
  }
  .ec-hd-logo img,
  .co-logo img,
  .es-logo img,
  .sp-logo img,
  .ps-logo img,
  .fq-logo img,
  .groups-brand img {
    width: var(--echo-logo-w-mobile, 104px) !important;
    height: var(--echo-logo-h-mobile, 56px) !important;
  }
}