/*
 * AnimeRadar v2.4.194 - reference shell
 *
 * Global navigation and viewport proportions only. Page-specific layouts stay
 * in their existing stylesheets. The original AnimeRadar image assets and all
 * existing route behaviour remain unchanged.
 */

:root {
  --reference-sidebar-width: 188px;
  /* Shell-only layout token above; every color below reuses the shared
     --md-* palette from material-redesign-v2-4-194.css so the shell never
     drifts from the rest of the app's Material tokens. */
  --reference-shell-bg: var(--md-background);
  --reference-sidebar-bg: color-mix(in srgb, var(--md-background) 92%, black);
  --reference-line: var(--md-outline);
  --reference-label: color-mix(in srgb, var(--md-primary) 88%, #ff7a55);
}

html body .page-breadcrumbs {
  display: none !important;
}

/* Hidden by default; the desktop rail below turns it on at >=960px. Mobile
   keeps its existing compact top bar instead (no reference mockup for a
   mobile search row exists yet). */
html body .content-topbar {
  display: none !important;
}

/* ------------------------------------------------------------------------ */
/* Sidebar-Account-Block (V2.4.199)                                          */
/* Premium-Card, Profilvorschau + Glocke und Logout gehoeren ausschliesslich  */
/* zur permanenten Desktop-Sidebar. Ueberall sonst - mobile Kopfzeile und     */
/* native App - bleiben sie ausgeblendet und die Profilzeile verhaelt sich    */
/* wie bisher.                                                               */
/* ------------------------------------------------------------------------ */
html body .sidebar-premium-card,
html body .sidebar-bell-button,
html body .sidebar-logout-button {
  display: none;
}

html body .sidebar-account-row {
  display: contents;
}

/* Desktop navigation rail shown throughout the supplied desktop references. */
@media (min-width: 960px) {
  html:not(.native-app) body .topbar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 50 !important;
    isolation: isolate !important;
    width: var(--reference-sidebar-width) !important;
    height: 100dvh !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 11px 8px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-right: 1px solid var(--reference-line) !important;
    border-radius: 0 !important;
    background: var(--reference-sidebar-bg) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  html:not(.native-app) body .topbar::before,
  html:not(.native-app) body .topbar::after {
    display: none !important;
  }

  html:not(.native-app) body .topbar > .brand {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    /* Die Referenz setzt die Wortmarke weiter links als die Nav-Icons. */
    padding: 0 0 0 3px !important;
  }

  html:not(.native-app) body .topbar .brand-mark {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
  }

  html:not(.native-app) body .topbar .brand-text {
    min-width: 0 !important;
  }

  html:not(.native-app) body .topbar .brand-text strong {
    overflow: hidden !important;
    color: var(--md-on-surface) !important;
    font-family: var(--font-body) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -.015em !important;
    text-overflow: ellipsis !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  html:not(.native-app) body .nav-strip {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    scrollbar-width: none;
  }

  html:not(.native-app) body .nav-strip::-webkit-scrollbar {
    display: none;
  }

  html:not(.native-app) body .nav-section-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  /* The calendar board captions every rail group in crimson, including the first. */
  html:not(.native-app) body .nav-section-label {
    display: block !important;
    margin: 17px 12px 15px !important;
    color: var(--reference-label) !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 1.1 !important;
    letter-spacing: .085em !important;
    text-transform: uppercase !important;
  }

  html:not(.native-app) body .nav-section-group:first-child .nav-section-label {
    margin-top: 13px !important;
  }

  html:not(.native-app) body .nav-link {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 11px !important;
    padding: 0 8px !important;
    overflow: hidden !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--md-muted) !important;
    clip-path: none !important;
    box-shadow: none !important;
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: 550 !important;
    letter-spacing: -.01em !important;
    line-height: 1 !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  html:not(.native-app) body .nav-link::after {
    display: none !important;
  }

  /* --------------------------------------------------------------------- */
  /* Rail icons: one 20px stroke glyph per route, painted with currentColor */
  /* through a CSS mask so hover/active states recolour them. Replaces the  */
  /* older mixed mask/text-glyph setup (which left three routes as solid    */
  /* squares because they matched neither rule).                           */
  /* --------------------------------------------------------------------- */
  html:not(.native-app) body .nav-link::before {
    content: "" !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    display: block !important;
    background-color: currentColor !important;
    background-image: none !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: 18px 18px !important;
    mask-size: 18px 18px !important;
    font-size: 0 !important;
  }
  html:not(.native-app) body .nav-link[data-view="home"]::before {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3.2 10.4 12 3.5l8.8 6.9V20a1 1 0 0 1-1 1H4.2a1 1 0 0 1-1-1z'/><path d='M9.6 21v-6.2h4.8V21'/></svg>") !important;
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3.2 10.4 12 3.5l8.8 6.9V20a1 1 0 0 1-1 1H4.2a1 1 0 0 1-1-1z'/><path d='M9.6 21v-6.2h4.8V21'/></svg>") !important;
  }
  html:not(.native-app) body .nav-link[data-view="search"]::before {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='10.8' cy='10.8' r='6.8'/><path d='m20 20-4.4-4.4'/></svg>") !important;
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='10.8' cy='10.8' r='6.8'/><path d='m20 20-4.4-4.4'/></svg>") !important;
  }
  html:not(.native-app) body .nav-link[data-view="calendar"]::before {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.4' y='5' width='17.2' height='15.6' rx='2.6'/><path d='M8 3.4v3.2M16 3.4v3.2M3.4 10.2h17.2'/><path d='m9.6 15.4 2 2 3.2-3.6'/></svg>") !important;
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.4' y='5' width='17.2' height='15.6' rx='2.6'/><path d='M8 3.4v3.2M16 3.4v3.2M3.4 10.2h17.2'/><path d='m9.6 15.4 2 2 3.2-3.6'/></svg>") !important;
  }
  html:not(.native-app) body .nav-link[data-view="season"]::before {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.4' y='3.4' width='7.2' height='7.2' rx='1.8'/><rect x='13.4' y='3.4' width='7.2' height='7.2' rx='1.8'/><rect x='3.4' y='13.4' width='7.2' height='7.2' rx='1.8'/><rect x='13.4' y='13.4' width='7.2' height='7.2' rx='1.8'/></svg>") !important;
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.4' y='3.4' width='7.2' height='7.2' rx='1.8'/><rect x='13.4' y='3.4' width='7.2' height='7.2' rx='1.8'/><rect x='3.4' y='13.4' width='7.2' height='7.2' rx='1.8'/><rect x='13.4' y='13.4' width='7.2' height='7.2' rx='1.8'/></svg>") !important;
  }
  html:not(.native-app) body .nav-link[data-view="planner"]::before {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.4' y='4.4' width='17.2' height='16.2' rx='2.6'/><path d='M3.4 9.4h17.2M7.8 13.2h8.4M7.8 16.8h5.2'/></svg>") !important;
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.4' y='4.4' width='17.2' height='16.2' rx='2.6'/><path d='M3.4 9.4h17.2M7.8 13.2h8.4M7.8 16.8h5.2'/></svg>") !important;
  }
  html:not(.native-app) body .nav-link[data-view="lists"]::before {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='4.8' cy='6.4' r='1.3'/><circle cx='4.8' cy='12' r='1.3'/><circle cx='4.8' cy='17.6' r='1.3'/><path d='M9.4 6.4h10.2M9.4 12h10.2M9.4 17.6h10.2'/></svg>") !important;
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='4.8' cy='6.4' r='1.3'/><circle cx='4.8' cy='12' r='1.3'/><circle cx='4.8' cy='17.6' r='1.3'/><path d='M9.4 6.4h10.2M9.4 12h10.2M9.4 17.6h10.2'/></svg>") !important;
  }
  html:not(.native-app) body .nav-link[data-view="socials"]::before {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8.4' r='3.3'/><path d='M2.9 20c.6-3.8 3-5.8 6.1-5.8 3.2 0 5.6 2 6.2 5.8'/><path d='M15.4 5.5a3 3 0 0 1 0 5.9M17 14.5c2.6.5 4 2.3 4.4 5'/></svg>") !important;
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8.4' r='3.3'/><path d='M2.9 20c.6-3.8 3-5.8 6.1-5.8 3.2 0 5.6 2 6.2 5.8'/><path d='M15.4 5.5a3 3 0 0 1 0 5.9M17 14.5c2.6.5 4 2.3 4.4 5'/></svg>") !important;
  }
  html:not(.native-app) body .nav-link[data-view="toplists"]::before {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='m12 3.6 2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.9-5.4 2.9 1-6L3.3 10l6-.9z'/></svg>") !important;
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='m12 3.6 2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.9-5.4 2.9 1-6L3.3 10l6-.9z'/></svg>") !important;
  }
  html:not(.native-app) body .nav-link[data-view="giveaway"]::before {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.4' y='9.6' width='17.2' height='11' rx='2.2'/><path d='M3.4 13.6h17.2M12 9.6v11'/><path d='M8.3 9.6C6.4 9.6 5 8.4 5 7s1.4-2.6 2.8-2.6c2.1 0 4.2 5.2 4.2 5.2M15.7 9.6c1.9 0 3.3-1.2 3.3-2.6s-1.4-2.6-2.8-2.6C14.1 4.4 12 9.6 12 9.6'/></svg>") !important;
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.4' y='9.6' width='17.2' height='11' rx='2.2'/><path d='M3.4 13.6h17.2M12 9.6v11'/><path d='M8.3 9.6C6.4 9.6 5 8.4 5 7s1.4-2.6 2.8-2.6c2.1 0 4.2 5.2 4.2 5.2M15.7 9.6c1.9 0 3.3-1.2 3.3-2.6s-1.4-2.6-2.8-2.6C14.1 4.4 12 9.6 12 9.6'/></svg>") !important;
  }
  html:not(.native-app) body .nav-link[data-view="voting"]::before {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.4' y='4.4' width='17.2' height='15.2' rx='2.6'/><path d='m8 12.2 2.7 2.7 5.3-5.6'/></svg>") !important;
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.4' y='4.4' width='17.2' height='15.2' rx='2.6'/><path d='m8 12.2 2.7 2.7 5.3-5.6'/></svg>") !important;
  }
  html:not(.native-app) body .nav-link[data-view="premium"]::before {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4.2 8.4 7.8 11l4.2-5.6L16.2 11l3.6-2.6-1.5 9H5.7Z'/><path d='M5.7 20.1h12.6'/></svg>") !important;
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4.2 8.4 7.8 11l4.2-5.6L16.2 11l3.6-2.6-1.5 9H5.7Z'/><path d='M5.7 20.1h12.6'/></svg>") !important;
  }
  html:not(.native-app) body .nav-link[data-view="app"]::before {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='6.4' y='2.8' width='11.2' height='18.4' rx='2.6'/><path d='M10.4 5.6h3.2M11 18.4h2'/></svg>") !important;
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='6.4' y='2.8' width='11.2' height='18.4' rx='2.6'/><path d='M10.4 5.6h3.2M11 18.4h2'/></svg>") !important;
  }
  html:not(.native-app) body .nav-link[data-view="stats"]::before {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20.4V10.6M9.7 20.4V4.6M15.3 20.4v-7M21 20.4V7.8'/></svg>") !important;
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20.4V10.6M9.7 20.4V4.6M15.3 20.4v-7M21 20.4V7.8'/></svg>") !important;
  }
  html:not(.native-app) body .nav-link[data-view="profile"]::before {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8.4' r='3.7'/><path d='M4.4 20.6c1-4.1 3.8-6.1 7.6-6.1s6.6 2 7.6 6.1'/></svg>") !important;
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8.4' r='3.7'/><path d='M4.4 20.6c1-4.1 3.8-6.1 7.6-6.1s6.6 2 7.6 6.1'/></svg>") !important;
  }
  html:not(.native-app) body .nav-link[data-view="favorites"]::before {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20.4S3.7 15.5 3.7 9.8a4.5 4.5 0 0 1 8.3-2.5 4.5 4.5 0 0 1 8.3 2.5c0 5.7-8.3 10.6-8.3 10.6z'/></svg>") !important;
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20.4S3.7 15.5 3.7 9.8a4.5 4.5 0 0 1 8.3-2.5 4.5 4.5 0 0 1 8.3 2.5c0 5.7-8.3 10.6-8.3 10.6z'/></svg>") !important;
  }
  html:not(.native-app) body .nav-link[data-view="news"]::before {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.4' y='5' width='17.2' height='14.4' rx='2.4'/><path d='M7 9h6M7 12.6h6M7 16.2h4M16.4 9h1.2v7.2h-1.2z'/></svg>") !important;
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.4' y='5' width='17.2' height='14.4' rx='2.4'/><path d='M7 9h6M7 12.6h6M7 16.2h4M16.4 9h1.2v7.2h-1.2z'/></svg>") !important;
  }

  /* Der geteilte Menue-Trigger (#siteMenuMobileBtn) bleibt im DOM, weil Mobile
     ihn braucht. Auf dem Desktop uebernimmt die permanente Sidebar die gesamte
     Navigation, deshalb gibt es hier keine Desktop-Regel mehr fuer ihn: die
     Basisregel .site-menu-mobile-trigger { display: none } aus
     site-menu-v2-4-153.css greift und der Button ist aus dem Layout raus. */

  html:not(.native-app) body .nav-link:hover,
  html:not(.native-app) body .nav-link:focus-visible {
    border-color: color-mix(in srgb, var(--md-primary) 20%, transparent) !important;
    background: color-mix(in srgb, var(--md-primary) 8%, transparent) !important;
    color: var(--md-on-surface) !important;
  }

  html:not(.native-app) body .nav-link.active {
    border-color: color-mix(in srgb, var(--md-primary) 26%, transparent) !important;
    background: color-mix(in srgb, var(--md-primary-container) 74%, #000) !important;
    color: var(--md-secondary) !important;
  }

  html:not(.native-app) body .site-menu-desktop-trigger {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 37px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--md-muted) !important;
    box-shadow: none !important;
  }

  html:not(.native-app) body .site-menu-desktop-trigger:hover,
  html:not(.native-app) body .site-menu-desktop-trigger:focus-visible,
  html:not(.native-app) body .site-menu-desktop-trigger[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--md-primary) 20%, transparent) !important;
    background: color-mix(in srgb, var(--md-primary) 8%, transparent) !important;
    color: var(--md-on-surface) !important;
  }

  html:not(.native-app) body .site-menu-desktop-trigger .site-menu-bars {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
  }

  html:not(.native-app) body .site-menu-desktop-trigger .site-menu-label {
    display: inline !important;
    overflow: hidden !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:not(.native-app) body .topbar > .top-actions {
    --sidebar-account-gap: 8px;
    --sidebar-account-radius: 10px;
    --sidebar-account-line: #2b1d20;
    --sidebar-account-surface: #1a1211;
    --sidebar-premium-gold: #f4c66a;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--sidebar-account-gap) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* --------------------------------------------------------- Premium-Card */
  /* Dunkle Card in der Komponentenfamilie der Sidebar, der Premium-Charakter
     kommt allein aus der goldenen Schrift und einem zurueckhaltenden warmen
     Rand. Seit V2.4.209 fuehrt sie auf /premium; Aussehen und Groesse sind
     dabei unveraendert geblieben. Kein Preis in der Sidebar. */
  html:not(.native-app) body .topbar .sidebar-premium-card {
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease;
    width: 100%;
    min-width: 0;
    min-height: 32px;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--sidebar-premium-gold) 34%, transparent);
    border-radius: var(--sidebar-account-radius);
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--sidebar-premium-gold) 9%, transparent), transparent 62%),
      var(--sidebar-account-surface);
  }

  html:not(.native-app) body .topbar .sidebar-premium-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: grid;
    place-items: center;
    color: var(--sidebar-premium-gold);
  }

  html:not(.native-app) body .topbar .sidebar-premium-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  html:not(.native-app) body .topbar .sidebar-premium-text {
    min-width: 0;
    overflow: hidden;
    color: var(--sidebar-premium-gold);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: -.005em;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* -------------------------------------------- Profilvorschau + Glocke */
  html:not(.native-app) body .topbar .sidebar-account-row {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: var(--sidebar-account-gap);
  }

  /* Glocke ohne eigene Flaeche: kein Rahmen, kein Hintergrund, kein Schatten.
     Die Klickflaeche bleibt 34 px breit und so hoch wie die Card. */
  html:not(.native-app) body .topbar .sidebar-bell-button {
    width: 34px;
    min-width: 34px;
    flex: 0 0 34px;
    align-self: stretch;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--md-muted);
    box-shadow: none;
    cursor: pointer;
    transition: color .16s ease;
  }

  html:not(.native-app) body .topbar .sidebar-bell-button svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Hover faerbt nur das Icon - es taucht keine Box wieder auf. */
  html:not(.native-app) body .topbar .sidebar-bell-button:hover {
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--md-on-surface);
  }

  html:not(.native-app) body .topbar .sidebar-bell-button:focus-visible {
    outline: 2px solid var(--md-primary);
    outline-offset: 2px;
    border-radius: 8px;
  }

  /* Profilvorschau fuellt die Restbreite neben der Glocke. */
  html:not(.native-app) body .topbar .sidebar-account-row .top-account-button {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  /* Bild fuellt den runden Avatar ohne Verzerrung. */
  html:not(.native-app) body .topbar .top-account-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    object-fit: cover;
  }

  html:not(.native-app) body .topbar .sidebar-account-row .top-account-button:hover {
    border-color: color-mix(in srgb, var(--md-primary) 38%, var(--sidebar-account-line)) !important;
    background: color-mix(in srgb, var(--md-primary) 7%, var(--sidebar-account-surface)) !important;
  }

  /* ------------------------------------------------------------- Logout */
  html:not(.native-app) body .topbar .sidebar-logout-button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    padding: 0 12px;
    overflow: hidden;
    border: 1px solid var(--sidebar-account-line);
    border-radius: var(--sidebar-account-radius);
    background: var(--sidebar-account-surface);
    color: var(--md-muted);
    box-shadow: none;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 550;
    letter-spacing: -.005em;
    line-height: 1;
    text-align: left;
    text-transform: none;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
  }

  html:not(.native-app) body .topbar .sidebar-logout-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: grid;
    place-items: center;
  }

  html:not(.native-app) body .topbar .sidebar-logout-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  html:not(.native-app) body .topbar .sidebar-logout-button:hover {
    border-color: color-mix(in srgb, var(--md-primary) 46%, var(--sidebar-account-line));
    background: color-mix(in srgb, var(--md-primary) 12%, var(--sidebar-account-surface));
    color: var(--md-on-surface);
  }

  html:not(.native-app) body .topbar .sidebar-logout-button:focus-visible {
    outline: 2px solid var(--md-primary);
    outline-offset: 2px;
  }

  /* Im Rail sichtbar, sofern JS sie nicht per .is-hidden ausblendet. */
  html:not(.native-app) body .topbar .sidebar-premium-card,
  html:not(.native-app) body .topbar .sidebar-bell-button,
  html:not(.native-app) body .topbar .sidebar-logout-button {
    display: flex;
  }

  html:not(.native-app) body .topbar .sidebar-bell-button {
    display: grid;
  }

  html:not(.native-app) body .topbar .sidebar-premium-card.is-hidden,
  html:not(.native-app) body .topbar .sidebar-bell-button.is-hidden,
  html:not(.native-app) body .topbar .sidebar-logout-button.is-hidden {
    display: none;
  }

  /* Masse aus Referenzbild1 (sichtbare Card 228x112, Avatar 72, Padding 12,
     Radius 18) auf die 177 px Cardbreite der Sidebar uebertragen. */
  html:not(.native-app) body .topbar .top-account-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 0 7px !important;
    overflow: hidden !important;
    border: 1px solid #33232a !important;
    border-radius: 12px !important;
    background: #1a1211 !important;
    color: var(--md-on-surface) !important;
    box-shadow: none !important;
  }

  html:not(.native-app) body .topbar .top-account-avatar {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 2px solid color-mix(in srgb, var(--md-secondary) 62%, transparent) !important;
    border-radius: 50% !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  html:not(.native-app) body .topbar .top-account-label {
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    letter-spacing: -.005em !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:not(.native-app) body .shell {
    width: calc(100% - var(--reference-sidebar-width)) !important;
    max-width: none !important;
    min-height: 100vh !important;
    margin: 0 !important;
    margin-left: var(--reference-sidebar-width) !important;
    padding: 8px 14px 2px !important;
    /* Der Aizen-Freisteller des Startbanners ragt oben aus der Spalte heraus.
       Waagerechtes Ueberlaufen faengt weiterhin der body ab. */
    overflow: visible !important;
  }

  html:not(.native-app) body .site-footer {
    width: calc(100% - var(--reference-sidebar-width)) !important;
    max-width: none !important;
    margin: 0 !important;
    margin-left: var(--reference-sidebar-width) !important;
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  html:not(.native-app) body .site-menu-panel {
    left: calc(var(--reference-sidebar-width) + 10px) !important;
  }

  /* Content-column topbar: reuses the real search feature (#searchInput on
     #view-search) from a persistent field above the page content, matching
     the reference boards. Seit V2.4.212 sitzen Glocke und Profilavatar rechts
     in dieser Zeile - beide nur im angemeldeten Zustand, beide mit derselben
     Aktion wie zuvor in der Sidebar. */
  html:not(.native-app) body .content-topbar {
    display: flex !important;
    align-items: center !important;
    height: 33px !important;
    margin: 0 0 3px !important;
  }

  html:not(.native-app) body .content-topbar-search {
    width: min(408px, 100%);
    margin-left: 14px;
  }

  /* Rechts in der Zeile: Glocke und Avatar. Die Lupe ist hier ueberfluessig,
     weil das Suchfeld daneben steht - sie gehoert nur zur Mobilkopfzeile. */
  html:not(.native-app) body .content-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    padding-right: 4px;
  }

  html:not(.native-app) body .content-topbar-search-btn {
    display: none;
  }

  html:not(.native-app) body .content-topbar .sidebar-bell-button {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--md-muted);
    cursor: pointer;
    transition: color .16s ease, background .16s ease;
  }

  html:not(.native-app) body .content-topbar .sidebar-bell-button svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  html:not(.native-app) body .content-topbar .sidebar-bell-button:hover {
    background: rgba(255, 255, 255, .06);
    color: var(--md-on-surface);
  }

  html:not(.native-app) body .content-topbar-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    padding: 0;
    overflow: hidden;
    border: 1px solid #3a2a2d;
    border-radius: 50%;
    background: #241417;
    cursor: pointer;
    transition: border-color .16s ease;
  }

  html:not(.native-app) body .content-topbar-avatar:hover {
    border-color: var(--md-primary);
  }

  html:not(.native-app) body .content-topbar-avatar .top-account-avatar {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    color: var(--md-on-surface);
    font-size: 13px;
    font-weight: 700;
  }

  html:not(.native-app) body .content-topbar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  html:not(.native-app) body .content-topbar-avatar.is-hidden,
  html:not(.native-app) body .content-topbar .sidebar-bell-button.is-hidden {
    display: none;
  }

  html:not(.native-app) body .content-topbar-search input {
    width: 100%;
    height: 33px;
    min-height: 33px;
    padding-left: 40px;
    border: 1px solid #2b1d20 !important;
    border-radius: 10px !important;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8adb1' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 13px center / 17px no-repeat,
      #1c0f0f !important;
    color: var(--md-on-surface) !important;
    font-size: 14px;
  }

  html:not(.native-app) body .content-topbar-search input::placeholder {
    color: var(--md-muted);
  }

  html:not(.native-app) body .content-topbar-search input:focus-visible {
    border-color: var(--md-primary) !important;
    outline: none !important;
  }

  html:not(.native-app) body .consent-banner {
    left: calc(var(--reference-sidebar-width) + 14px) !important;
  }

  /* Secondary tools stay reachable through their existing menu/route. */
  html:not(.native-app) body .roadmap-fab,
  html:not(.native-app) body .release-planner-fab {
    display: none !important;
  }

  html:not(.native-app) body .mobile-tabs {
    display: none !important;
  }
}

/* Keep reading lines and dashboards comfortably bounded on very wide monitors
   without changing the shared sidebar or any golden-master viewport. */
@media (min-width: 3000px) {
  html:not(.native-app) body .shell > .content-topbar,
  html:not(.native-app) body .shell > .view.active {
    width: min(100%, 2700px) !important;
    max-width: 2700px !important;
    margin-inline: auto !important;
  }
}

/* Mobile/tablet chrome follows the compact top and bottom bars in the boards. */
@media (max-width: 959px) {
  /* UI-Fix 2026-10-03: zentrale Hoehe der mobilen Kopfzeile inklusive
     Safe-Area. Ansichten, die unter der Kopfzeile beginnen muessen (etwa die
     News-Detailansicht), lesen denselben Wert statt ihn zu messen. */
  :root {
    --ar-mobile-topbar-height: calc(64px + env(safe-area-inset-top, 0px));
  }

  html body .topbar {
    position: sticky !important;
    inset: 0 auto auto 0 !important;
    z-index: 52 !important;
    width: 100% !important;
    height: var(--ar-mobile-topbar-height) !important;
    min-height: var(--ar-mobile-topbar-height) !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    grid-template-rows: 48px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid var(--reference-line) !important;
    border-radius: 0 !important;
    background: color-mix(in srgb, var(--md-background) 98%, transparent) !important;
    box-shadow: none !important;
    backdrop-filter: blur(12px) !important;
  }

  html body .topbar::before,
  html body .topbar::after {
    display: none !important;
  }

  html body .topbar > .site-menu-mobile-trigger {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .topbar > .brand {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    min-width: 0 !important;
    display: flex !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  html body .topbar .brand-mark {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }

  html body .topbar .brand-text {
    min-width: 0 !important;
  }

  html body .topbar .brand-text strong {
    overflow: hidden !important;
    color: var(--md-on-surface) !important;
    font-size: 17px !important;
    font-weight: 650 !important;
    letter-spacing: -.015em !important;
    text-overflow: ellipsis !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  html body .topbar > .nav-strip {
    display: none !important;
  }

  html body .topbar > .top-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html body .topbar .top-account-button {
    width: auto !important;
    max-width: 108px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    overflow: hidden !important;
    border: 1px solid var(--reference-line) !important;
    border-radius: 20px !important;
    background: var(--md-surface) !important;
    color: var(--md-on-surface) !important;
    box-shadow: none !important;
  }

  html body .topbar .top-account-avatar {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    border-radius: 50% !important;
  }

  html body .topbar .top-account-label {
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 10px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body .shell {
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100vh - 64px) !important;
    margin: 0 !important;
    padding: 18px 14px calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: clip !important;
  }

  html body .mobile-tabs {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 60 !important;
    width: 100% !important;
    min-height: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 4px 6px max(4px, env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
    border: 0 !important;
    border-top: 1px solid var(--reference-line) !important;
    border-radius: 0 !important;
    background: color-mix(in srgb, var(--md-background) 98%, transparent) !important;
    box-shadow: 0 -5px 18px rgba(0, 0, 0, .28) !important;
    backdrop-filter: blur(12px) !important;
  }

  html body .mobile-tab {
    min-width: 0 !important;
    min-height: 58px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 5px 2px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--md-muted) !important;
    box-shadow: none !important;
  }

  html body .mobile-tab > span {
    width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    display: grid !important;
    place-items: center !important;
    color: currentColor !important;
    line-height: 1 !important;
  }

  html body .mobile-tab > span svg {
    width: 23px !important;
    height: 23px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  /* Der aktive Punkt ist in der Referenz eine gefuellte rote Silhouette. */
  html body .mobile-tab.active > span svg {
    fill: color-mix(in srgb, var(--md-primary) 26%, transparent) !important;
  }

  html body .mobile-tab small {
    max-width: 100% !important;
    overflow: hidden !important;
    color: currentColor !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body .mobile-tab.active {
    background: transparent !important;
    color: var(--md-primary) !important;
  }

  html body .site-footer {
    width: 100% !important;
    margin: 0 !important;
    padding: 24px 14px calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 420px) {
  html body .topbar {
    padding-right: 9px !important;
    padding-left: 9px !important;
  }

  html body .topbar .brand-text strong {
    font-size: 15px !important;
  }

  html body .topbar .top-account-button {
    max-width: 92px !important;
    padding-inline: 8px !important;
  }

  html body .shell {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }
}

/* ------------------------------------------------------------------------ */
/* Mehr-Sheet der mobilen Tableiste (V2.4.212)                               */
/* Faehrt von unten ein und listet die Bereiche, die nicht in der Leiste     */
/* liegen. Gleiche Flaechen, Raender und Radien wie die uebrige Oberflaeche. */
/* ------------------------------------------------------------------------ */
html body .more-sheet-scrim {
  position: fixed;
  z-index: 70;
  inset: 0;
  border: 0;
  background: rgba(6, 3, 4, .62);
  backdrop-filter: blur(2px);
}

html body .more-sheet {
  position: fixed;
  z-index: 71;
  inset: auto 0 0 0;
  display: block;
  padding: 0 8px max(8px, env(safe-area-inset-bottom, 0px));
}

html body .more-sheet[hidden],
html body .more-sheet-scrim[hidden] {
  display: none !important;
}

html body .more-sheet-panel {
  max-height: min(70dvh, 560px);
  display: grid;
  gap: 8px;
  padding: 8px 8px 12px;
  overflow: hidden auto;
  border: 1px solid var(--md-outline);
  border-radius: 16px 16px 12px 12px;
  background: var(--md-surface-variant);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, .46);
}

html body .more-sheet-grip {
  width: 38px;
  height: 4px;
  margin: 2px auto 4px;
  border-radius: 999px;
  background: #4a3438;
}

html body .more-sheet-list {
  display: grid;
  gap: 2px;
}

html body .more-sheet-item {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--md-muted);
  font-size: 14px;
  font-weight: 550;
  text-decoration: none;
}

html body .more-sheet-item svg {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body .more-sheet-item:hover,
html body .more-sheet-item.active {
  background: rgba(255, 255, 255, .05);
  color: var(--md-on-surface);
}

html body .more-sheet-item.active {
  color: var(--md-primary);
}

/* Auf dem Desktop uebernimmt die Sidebar die Navigation - dort erscheint
   weder die Tableiste noch das Sheet. */
@media (min-width: 960px) {
  html:not(.native-app) body .more-sheet,
  html:not(.native-app) body .more-sheet-scrim {
    display: none !important;
  }
}

/* ------------------------------------------------------------------------ */
/* Globaler Seitenhintergrund und abgesetzte App-Shell (V2.4.212)            */
/*                                                                          */
/* Ebenen von hinten nach vorn:                                             */
/*   1. body::before - vollflaechiger Seitenhintergrund, fest stehend       */
/*   2. App-Shell    - Sidebar und Inhaltsspalte als eine dunkle Flaeche,    */
/*                     ringsum abgesetzt, damit der Hintergrund sichtbar     */
/*                     bleibt                                               */
/*   3. Footer       - liegt unterhalb der Shell direkt auf dem Hintergrund  */
/*                                                                          */
/* Das Hintergrundbild wird ueber --shell-backdrop-image gesetzt. Bis das    */
/* Artwork vorliegt, traegt die Ebene nur den dunkelroten Verlauf; ein       */
/* spaeterer Wechsel ist ein reiner Quellentausch ohne Strukturaenderung.    */
/* ------------------------------------------------------------------------ */

:root {
  /* Referenz 1448x1086: rund 12px Rand je Seite, Shell rund 1424 breit,
     Oberkante y 40. */
  --shell-inset: 12px;
  --shell-top: 40px;
  /* Unterhalb der Shell liegt der Footer auf dem Hintergrund: 56px Footer
     plus 15px Abstand. Die Shell endet darueber, wie in der Referenz. Der
     Wert haelt Sidebar- und Inhaltsspaltenunterkante auf einer Linie. */
  --shell-foot: 70px;
  --shell-radius: 16px;
  --shell-surface: #0d0809;
  --shell-edge: color-mix(in srgb, var(--md-outline) 80%, transparent);
  --shell-backdrop-image: url("assets/backgrounds/animeradar-backdrop-2026-1672.webp");

  /* Grundstufe bis 1599px: nahezu volle Breite, 12px Rand je Seite.
     Bei 1448 ergibt das 1424. Die groesseren Stufen stehen weiter unten. */
  --shell-width: calc(100vw - var(--shell-inset) * 2);
  --shell-left: max(var(--shell-inset), calc((100vw - var(--shell-width)) / 2));
}

/* Ab hier waechst die Shell langsamer als der Bildschirm, damit der
   Hintergrund sichtbar wird - aber nie so stark, dass er die Seite
   dominiert. Die Stufen gehen stetig ineinander ueber:
     1600 -> 1576   (12 je Seite)
     1920 -> 1768   (76 je Seite)
     2048 -> 1844   (102 je Seite)
     2560 -> 2244   (158 je Seite)
   Ab 3000px ist bei 2600px Schluss. */
@media (min-width: 1600px) {
  :root { --shell-width: calc(60vw + 616px); }
}

@media (min-width: 2048px) {
  :root { --shell-width: calc(78vw + 247px); }
}

@media (min-width: 3000px) {
  :root { --shell-width: min(calc(78vw + 247px), 2600px); }
}

@media (min-width: 960px) {
  html:not(.native-app) body {
    background: #070506 !important;
  }

  /* Vollflaechiger Hintergrund hinter allem. */
  html:not(.native-app) body::before {
    /* material-redesign blendet body::before global aus - hier muss die
       Ebene deshalb ausdruecklich wieder eingeschaltet werden. */
    content: "" !important;
    display: block !important;
    position: fixed;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background-color: #070506;
    /* Nur eine leichte Abdunklung, damit das Artwork rundherum sichtbar
       bleibt und die Shell trotzdem klar davor steht. */
    /* Leichte Abdunklung, damit die roten Lichtbaender nicht gegen die
       Shell anschreien. */
    background-image:
      linear-gradient(rgba(7, 5, 6, .56), rgba(7, 5, 6, .56)),
      var(--shell-backdrop-image, none);
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
    background-size: 100% 100%, 100% 100%;
  }

  /* Sidebar und Inhaltsspalte stehen ueber dem Hintergrund. */
  html:not(.native-app) body .topbar,
  html:not(.native-app) body .shell,
  html:not(.native-app) body .site-footer {
    position: relative;
    z-index: 1;
  }

  /* Linke Haelfte der Shell. */
  html:not(.native-app) body .topbar {
    position: fixed !important;
    top: var(--shell-top) !important;
    bottom: var(--shell-foot) !important;
    left: var(--shell-left) !important;
    height: auto !important;
    border: 1px solid var(--shell-edge) !important;
    border-right: 0 !important;
    border-radius: var(--shell-radius) 0 0 var(--shell-radius) !important;
    background: var(--shell-surface) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45) !important;
  }

  /* Rechte Haelfte der Shell. Sie beginnt buendig an der Sidebar, damit
     beide zusammen als eine Flaeche gelesen werden. */
  html:not(.native-app) body .shell {
    width: calc(var(--shell-width) - var(--reference-sidebar-width)) !important;
    margin: var(--shell-top) 0 0
      calc(var(--shell-left) + var(--reference-sidebar-width)) !important;
    min-height: calc(100dvh - var(--shell-top) - var(--shell-foot)) !important;
    border: 1px solid var(--shell-edge) !important;
    border-left: 0 !important;
    border-radius: 0 var(--shell-radius) var(--shell-radius) 0 !important;
    background: var(--shell-surface) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45) !important;
  }

  /* Der Footer gehoert nicht in die Shell - er liegt darunter auf dem
     Hintergrund und bekommt deshalb keine Flaeche und keine Trennlinie. */
  html:not(.native-app) body .site-footer {
    width: var(--shell-width) !important;
    margin: 15px 0 0 var(--shell-left) !important;
    padding: 9px 14px !important;
    border: 0 !important;
    border-top: 0 !important;
    background: transparent !important;
  }
}

/* ------------------------------------------------------------------------ */
/* Mobilkopfzeile nach Referenz (V2.4.212)                                   */
/* Links Logo und Wortmarke, rechts Suche, Glocke und Avatar. Das            */
/* Burger-Symbol entfaellt, weil "Mehr" jetzt in der unteren Leiste sitzt.   */
/* Die drei Schaltflaechen sind dieselben Elemente wie auf dem Desktop -     */
/* sie werden nur anders platziert, nicht doppelt angelegt.                  */
/* ------------------------------------------------------------------------ */

@media (max-width: 959px) {
  html body .topbar > .site-menu-mobile-trigger {
    display: none !important;
  }

  html body .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  html body .topbar > .brand {
    grid-column: 1 !important;
  }

  html body .topbar > .top-actions {
    grid-column: 2 !important;
  }

  /* Angemeldet zeigt die Kopfzeile nur noch den runden Avatar. Die
     Schaltflaeche bleibt dieselbe wie bisher - damit oeffnet sie weiterhin
     das mobile Account-Menue. Der Avatar der Inhaltskopfzeile tritt dafuer
     auf Mobile zurueck, sonst staende er doppelt da. */
  html body.is-signed-in .topbar .top-account-button {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 50% !important;
  }

  html body.is-signed-in .topbar .top-account-button .top-account-label {
    display: none !important;
  }

  html body.is-signed-in .topbar .top-account-button .top-account-avatar {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
  }

  html body.is-signed-in .content-topbar-avatar {
    display: none !important;
  }

  /* Die Aktionsgruppe der Inhaltskopfzeile wird in die Mobilkopfzeile
     gelegt. Das Suchfeld selbst bleibt dort ausgeblendet - auf Mobile
     fuehrt das Lupensymbol auf die Suchseite. */
  /* Die Inhaltsspalte bildet mit position:relative + z-index:1 einen eigenen
     Stapelkontext und beschneidet ausserdem ihren Inhalt. Beides zusammen
     verbarg die fest stehende Kopfleiste hinter der Kopfzeile. Auf Mobil
     wird beides aufgehoben; waagerechtes Ueberlaufen faengt weiterhin der
     body ab (overflow-x: clip). */
  html body .shell {
    z-index: auto !important;
    overflow: visible !important;
  }

  html body .content-topbar {
    display: flex !important;
    position: fixed !important;
    z-index: 53 !important;
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    right: 12px !important;
    left: auto !important;
    width: auto !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    pointer-events: none;
  }

  html body .content-topbar-search {
    display: none !important;
  }

  /* Angemeldet ist die Account-Schaltflaeche der Kopfzeile ein 38px breiter
     Avatar am rechten Rand. Die fest stehende Leiste mit Lupe und Glocke
     rueckt genau um diese Breite nach links, sonst liegt sie darueber und
     faengt die Klicks auf den Avatar ab. Reihenfolge wie in der Referenz:
     Lupe, Glocke, Avatar. */
  html body.is-signed-in .content-topbar {
    right: calc(12px + 38px + 8px) !important;
  }

  html body .content-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    pointer-events: auto;
  }

  html body .content-topbar-search-btn,
  html body .content-topbar .sidebar-bell-button,
  html body .content-topbar-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--reference-line);
    border-radius: 50%;
    background: var(--md-surface);
    color: var(--md-on-surface);
    cursor: pointer;
  }

  html body .content-topbar-search-btn svg,
  html body .content-topbar .sidebar-bell-button svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  html body .content-topbar-avatar .top-account-avatar {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
  }

  html body .content-topbar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  html body .content-topbar-avatar.is-hidden,
  html body .content-topbar .sidebar-bell-button.is-hidden {
    display: none !important;
  }

  /* Abgemeldet bleibt rechts Platz fuer die Anmelden-Schaltflaeche. */
  html body:not(.is-signed-in) .topbar > .top-actions {
    margin-right: 46px !important;
  }
}