/* V2.4.221: gemeinsame Desktop-Transparenz und gezielte Kopfzeilenkorrektur. */

html body .sidebar-bell-label { display: none; }

@media (min-width: 960px) {
  html:not(.native-app) body {
    /* Unveraenderte Transparenzstufen aus Entdecken und Kalender V2.4.219. */
    --shell-backdrop-shade: rgba(7, 5, 6, .24);
    --shell-sidebar-surface: rgba(30, 24, 28, .74);
    --shell-surface: rgba(27, 22, 26, .64);
    --shell-topbar-surface: rgba(18, 15, 20, .30);
  }

  html:not(.native-app) body::before {
    background-image: linear-gradient(var(--shell-backdrop-shade), var(--shell-backdrop-shade)), var(--shell-backdrop-image, none) !important;
  }

  html:not(.native-app) body[data-active-view] .topbar { background: var(--shell-sidebar-surface) !important; }
  html:not(.native-app) body .shell { background: var(--shell-surface) !important; }

  /* Nur Seitenwrapper freilegen. Cards, Bilder und Dialoge behalten ihre Flaechen. */
  html:not(.native-app) body .shell > .view { background: transparent !important; }

  /* Referenz 1448 x 1086: Banner 1218 x 168, danach 10 px zum Hero.
     Breite Bildschirme behalten dieses flache Verhaeltnis. Die alte
     Quellbild-Ratio 1916 / 821 und die alte vw-Hoehe greifen hier nicht. */
  html:not(.native-app) body #view-home .ar-page-banner-home {
    --ar-banner-h: 168px;
    height: auto !important;
    min-height: var(--ar-banner-h) !important;
    max-height: none !important;
    aspect-ratio: 1218 / 168 !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  html:not(.native-app) body #view-home .ar-page-banner-frame { height: 100%; }

  html:not(.native-app) body[data-active-view="home"] #topbarAvatarBtn { display: none !important; }

  html:not(.native-app) body .topbar #sidebarNotificationsBtn {
    width: 100%;
    min-width: 0;
    height: 32px;
    min-height: 32px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--md-muted);
    box-shadow: none;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 550;
    line-height: 1;
    letter-spacing: -.01em;
    text-align: left;
    text-transform: none;
  }
  html:not(.native-app) body .topbar #sidebarNotificationsBtn:not(.is-hidden) { display: flex; }
  html:not(.native-app) body .topbar #sidebarNotificationsBtn svg { width: 18px; height: 18px; flex: 0 0 18px; }
  html:not(.native-app) body .topbar #sidebarNotificationsBtn .sidebar-bell-label { display: inline; }
  html:not(.native-app) body .topbar #sidebarNotificationsBtn:hover {
    background: color-mix(in srgb, var(--md-primary) 8%, transparent);
    color: var(--md-on-surface);
  }
  html:not(.native-app) body .topbar #sidebarNotificationsBtn:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
}