/*
 * AnimeRadar v2.4.194 - reference home (desktop golden master)
 *
 * The desktop start page geometry below is measured from the supplied
 * 1672x941 desktop board. Only presentation changes here: every id, class,
 * data-attribute, route and render function of the existing home markup
 * stays in place, and all content still comes from the live AniList /
 * news / library data sources.
 *
 * Board measurements (board page box 1653x921, sidebar 242px, inset 14px):
 *   topbar search field           y  15 ..  53   height  39
 *   row 1  hero + Naechste Rel.   y  68 .. 423   height 355
 *   row 2  Anime News + heiss     y 437 .. 680   height 243
 *   row 3  Geheimtipp/Comm/Blick  y 694 .. 921   height 227
 *   row gap 14, card radius 10, card padding 18
 *   row 1 columns  868 : 504     (hero : releases)
 *   row 2 columns  665 : 707     (news : trending)
 *   row 3 columns  455 : 431 : 474
 *   release row 53, trending item 150 x 190 (image 125), news media 270 x 165
 */

html body #view-home {
  --home-gap: 13px;
  --home-row1: 318px;
  --home-row2: 190px;
  --home-row3: 210px;
  --home-pad: 18px;
  --home-card-bg: #1a1211;
  --home-card-line: #2b1d20;
  --home-card-radius: 10px;
  --home-sub-bg: #0e0808;
  --home-chip-bg: #241618;
  --home-cta-fill: #b62e37;
  --home-title: #ffffff;
  --home-body: rgba(236, 230, 233, .84);
}

/* -------------------------------------------------------------------------- */
/* Hero rating badge (real AniList score, dynamic slides only)                 */
/* -------------------------------------------------------------------------- */

html body #view-home .hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 4px 10px;
  border: 1px solid var(--home-card-line);
  border-radius: 999px;
  background: rgba(0, 0, 0, .38);
  color: var(--md-rating);
  font-size: 12.5px;
  font-weight: 650;
}

/* -------------------------------------------------------------------------- */
/* Admin live counter (admins only, optional)                                 */
/* -------------------------------------------------------------------------- */

html body #view-home .admin-live-counter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--home-gap) !important;
  padding: 8px 12px;
  border: 1px solid var(--home-card-line);
  border-radius: var(--home-card-radius);
  background: var(--home-card-bg);
  font-size: 12px;
}

html body #view-home .admin-live-counter-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--md-primary);
}

html body #view-home .admin-live-counter strong {
  color: var(--md-on-surface);
  font-size: 12px;
}

html body #view-home .admin-live-counter small {
  display: block;
  color: var(--md-dim);
  font-size: 11px;
}

html body #view-home .admin-live-counter > b {
  margin-left: auto;
  color: var(--md-secondary);
}

/* ========================================================================== */
/* DESKTOP (>= 960px) - golden master structure                               */
/* ========================================================================== */

@media (min-width: 960px) {

  /* ----------------------------------------------------------------- rows -- */

  html body #view-home .hero-grid,
  html body #view-home .home-news-trending-grid,
  html body #view-home .home-bottom-grid {
    display: grid !important;
    align-items: stretch !important;
    gap: var(--home-gap) !important;
    margin: 0 !important;
  }

  html body #view-home .home-news-trending-grid,
  html body #view-home .home-bottom-grid {
    margin-top: var(--home-gap) !important;
  }

  html body #view-home .hero-grid > *,
  html body #view-home .home-news-trending-grid > *,
  html body #view-home .home-bottom-grid > * {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
  }

  html body #view-home .hero-grid {
    grid-template-columns: minmax(0, 837fr) minmax(0, 368fr) !important;
    min-height: var(--home-row1);
  }

  html body #view-home .home-news-trending-grid {
    grid-template-columns: minmax(0, 559fr) minmax(0, 646fr) !important;
    min-height: var(--home-row2);
  }

  html body #view-home .home-bottom-grid {
    grid-template-columns: minmax(0, 372fr) minmax(0, 393fr) minmax(0, 429fr) !important;
    min-height: var(--home-row3);
  }

  /* The mobile-only social panel row never renders on desktop. */
  html body #view-home .split-band {
    display: none !important;
  }

  /* ---------------------------------------------------------- card family -- */

  html body #view-home .hero-panel,
  html body #view-home .pulse-card,
  html body #view-home .content-band,
  html body #view-home .watch-box {
    padding: var(--home-pad) !important;
    border: 1px solid var(--home-card-line) !important;
    border-radius: var(--home-card-radius) !important;
    background: var(--home-card-bg) !important;
    box-shadow: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Auth-state and JS visibility toggles must keep winning over the layout
     rules in this block (both promo and snapshot live in the bottom grid). */
  html body #view-home .is-hidden.is-hidden {
    display: none !important;
  }

  html body #view-home .band-head {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    height: 22px !important;
    margin: 0 0 6px !important;
  }

  html body #view-home .band-head > div {
    min-width: 0;
  }

  html body #view-home .band-head .section-kicker {
    display: none !important;
  }

  html body #view-home .band-head h2 {
    margin: 0 !important;
    color: var(--home-title) !important;
    font-family: var(--font-display) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -.005em !important;
    text-transform: none !important;
  }

  html body #view-home .text-action {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center !important;
    height: 20px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    line-height: 1.2 !important;
    color: var(--md-secondary) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }

  html body #view-home .text-action::after {
    display: none !important;
  }

  /* Shared compact card action button (releases / community bottom rows). */
  html body #view-home .home-card-action {
    display: flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 35px;
    min-height: 35px;
    border: 1px solid var(--home-card-line);
    border-radius: 9px;
    background: #281616;
    color: var(--home-title);
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
  }

  html body #view-home .home-card-action:hover,
  html body #view-home .home-card-action:focus-visible {
    border-color: color-mix(in srgb, var(--md-primary) 40%, transparent);
    background: #331a1c;
  }

  html body #view-home .home-card-action svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ================================================================= hero == */

  html body #view-home .hero-panel {
    position: relative !important;
    padding: 0 !important;
    height: 100% !important;
  }

  html body #view-home .hero-carousel-track {
    height: 100% !important;
    min-height: 0 !important;
  }

  html body #view-home .hero-slide {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  html body #view-home .hero-slide::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    background:
      linear-gradient(90deg, #150c0d 0%, #150c0d 30%, rgba(21, 12, 13, .88) 44%, rgba(21, 12, 13, .30) 64%, rgba(21, 12, 13, .10) 82%, rgba(21, 12, 13, .48) 100%),
      linear-gradient(0deg, rgba(18, 10, 11, .70) 0%, rgba(18, 10, 11, .12) 34%, transparent 60%) !important;
    pointer-events: none;
  }

  html body #view-home .hero-slide .section-kicker {
    display: none !important;
  }

  html body #view-home .hero-copy {
    position: relative;
    z-index: 2;
    align-self: center !important;
    padding: 0 18px 0 52px !important;
  }

  html body #view-home .hero-copy .hero-main-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-width: 350px !important;
    margin: 0 0 7px !important;
    color: var(--home-title) !important;
    font-family: var(--font-display) !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    line-height: 40px !important;
    letter-spacing: -.012em !important;
    text-transform: none !important;
  }

  html body #view-home .hero-copy p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-width: 400px !important;
    margin: 0 0 18px !important;
    color: var(--home-body) !important;
    font-size: 15px !important;
    line-height: 26px !important;
  }

  html body #view-home .hero-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 13px !important;
    margin: 0 !important;
  }

  html body #view-home .hero-actions .solid-action.large,
  html body #view-home .hero-actions .ghost-action.large {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 41px !important;
    min-height: 41px !important;
    padding: 0 20px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    clip-path: none !important;
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap;
  }

  html body #view-home .hero-actions .solid-action.large {
    border: 0 !important;
    background: var(--home-cta-fill) !important;
    color: #fff !important;
  }

  html body #view-home .hero-actions .solid-action.large:hover:not(:disabled) {
    background: #c9333d !important;
  }

  html body #view-home .hero-actions .ghost-action.large {
    border: 1px solid rgba(255, 255, 255, .16) !important;
    background: rgba(255, 255, 255, .05) !important;
    color: #fff !important;
  }

  html body #view-home .hero-actions .ghost-action.large:hover {
    background: rgba(255, 255, 255, .10) !important;
  }

  html body #view-home .hero-art {
    position: relative;
    min-height: 0 !important;
  }

  html body #view-home .hero-art::after {
    display: none !important;
  }

  html body #view-home .hero-art .hero-fixed-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    /* Der Ausschnitt haengt vom Motiv ab, nicht von einer festen Zahl:
       --ar-hero-focus wird je Bild aus dem Verhaeltnis von Bild und Flaeche
       berechnet (applyHeroImageFocus). Ohne Skript bleibt der bisherige Wert
       stehen - dadurch gibt es weder einen Sprung noch einen Rueckschritt. */
    object-position: var(--ar-hero-focus, center 22%) !important;
  }

  /* dots: centered on the hero, 8px inactive / 18px active pill */
  html body #view-home .hero-carousel-dots {
    position: absolute !important;
    left: 50% !important;
    bottom: 16px !important;
    transform: translateX(-50%) !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }

  html body #view-home .hero-carousel-dots button {
    width: 8px !important;
    height: 8px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .28) !important;
    box-shadow: none !important;
    transition: width .18s var(--md-motion), background .18s var(--md-motion);
  }

  html body #view-home .hero-carousel-dots button.is-active {
    width: 18px !important;
    background: var(--md-primary) !important;
  }

  /* arrows stay available but only surface on hover / keyboard focus */
  html body #view-home .hero-carousel-arrow {
    z-index: 4 !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 50% !important;
    background: rgba(12, 6, 7, .62) !important;
    color: #fff !important;
    font-size: 18px !important;
    opacity: 0;
    transition: opacity .16s var(--md-motion);
  }

  html body #view-home .hero-panel:hover .hero-carousel-arrow,
  html body #view-home .hero-carousel-arrow:focus-visible {
    opacity: 1;
  }

  html body #view-home .hero-carousel-progress {
    display: none !important;
  }

  /* ===================================================== Naechste Releases == */

  html body #view-home .pulse-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
  }

  html body #view-home .pulse-card > .section-kicker {
    display: none !important;
  }

  html body #view-home .pulse-card .band-head {
    flex: 0 0 auto !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border-bottom: 1px solid var(--home-card-line) !important;
  }

  html body #view-home .pulse-card .band-head h2 {
    font-size: 19px !important;
  }

  html body #view-home #homeCountdowns {
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none;
  }

  html body #view-home #homeCountdowns::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  html body #view-home .release-stack.compact .release-item {
    display: grid !important;
    grid-template-columns: 42px 50px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0 10px !important;
    height: 39px !important;
    min-height: 39px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--home-card-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    clip-path: none !important;
    text-decoration: none !important;
  }

  html body #view-home .release-stack.compact .release-item:hover {
    background: rgba(255, 255, 255, .035) !important;
  }

  html body #view-home .release-stack.compact .release-item::before {
    display: none !important;
  }

  html body #view-home .release-stack.compact .release-meta-date {
    display: none !important;
  }

  html body #view-home .release-stack.compact .release-day {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  html body #view-home .release-stack.compact .release-day b {
    color: var(--md-muted);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
  }

  html body #view-home .release-stack.compact .release-day span {
    color: var(--home-title);
    font-size: 12px;
    font-weight: 600;
  }

  html body #view-home .release-stack.compact .release-thumb {
    width: 50px !important;
    height: 32px !important;
    min-width: 0 !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: var(--home-sub-bg) !important;
    box-shadow: none !important;
    object-fit: cover !important;
  }

  html body #view-home .release-stack.compact .release-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }

  html body #view-home .release-stack.compact .release-title {
    overflow: hidden !important;
    color: var(--home-title) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #view-home .release-stack.compact .release-meta {
    overflow: hidden !important;
    color: var(--md-muted) !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #view-home .release-stack.compact .countdown {
    justify-self: end;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: var(--md-muted) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    white-space: nowrap;
  }

  html body #view-home .pulse-card .home-card-action {
    height: 29px !important;
    min-height: 29px !important;
    margin: 2px 8px !important;
  }

  /* loading / empty / error keep the card geometry */
  html body #view-home .release-stack.compact .release-item-skeleton {
    grid-template-columns: 42px 50px minmax(0, 1fr) auto !important;
  }

  html body #view-home #homeCountdowns .ui-state-card,
  html body #view-home #homeCountdowns .empty-state {
    margin: 18px !important;
    min-height: 0 !important;
  }

  /* =========================================================== Anime News == */

  html body #view-home .anime-news-band {
    display: flex !important;
    flex-direction: column !important;
    position: relative;
  }

  html body #view-home .anime-news-band .band-head {
    margin: 0 0 6px !important;
  }

  html body #view-home .anime-news-banner-shell {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body #view-home .anime-news-banner {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body #view-home .anime-news-banner-slide,
  html body #view-home .anime-news-banner-link {
    display: grid !important;
    grid-template-columns: 158px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 0 14px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
  }

  html body #view-home .anime-news-banner-media {
    width: 158px !important;
    height: 110px !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    overflow: hidden !important;
  }

  html body #view-home .anime-news-banner-media::after {
    display: none !important;
  }

  html body #view-home .anime-news-banner-image {
    width: 100% !important;
    height: 100% !important;
    border-radius: 9px !important;
    object-fit: cover !important;
  }

  html body #view-home .anime-news-banner-copy {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-width: 0 !important;
    padding: 0 10px 0 0 !important;
  }

  html body #view-home .anime-news-banner-copy h3 {
    order: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0 0 6px !important;
    color: var(--home-title) !important;
    font-family: var(--font-display) !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.28 !important;
    text-transform: none !important;
  }

  /* Die Referenz kuerzt den Anriss nach zwei Zeilen, damit Datum und Quelle
     darunter noch in die 190px hohe Zeile passen. */
  html body #view-home .anime-news-banner-copy p {
    order: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0 0 8px !important;
    color: var(--md-muted) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  html body #view-home .anime-news-meta {
    order: 3;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: auto 0 0 !important;
    color: var(--md-dim) !important;
    font-size: 11.5px !important;
  }

  html body #view-home .anime-news-meta span {
    order: 2;
    color: var(--md-secondary) !important;
    font-weight: 600 !important;
  }

  html body #view-home .anime-news-meta time {
    order: 1;
  }

  html body #view-home .anime-news-read {
    display: none !important;
  }

  /* dots row under the banner, arrow at the copy edge */
  html body #view-home .anime-news-banner-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 20px !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }

  html body #view-home #homeNewsPrev {
    display: none !important;
  }

  html body #view-home .anime-news-dots {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  html body #view-home .anime-news-dots button {
    width: 8px !important;
    height: 8px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .24) !important;
    box-shadow: none !important;
  }

  html body #view-home .anime-news-dots button.is-active {
    width: 18px !important;
    background: var(--md-primary) !important;
  }

  html body #view-home #homeNewsNext {
    position: absolute !important;
    top: 173px !important;
    right: 18px !important;
    z-index: 3 !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--home-card-line) !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, .34) !important;
    color: var(--md-on-surface) !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  html body #view-home #homeNewsNext:hover {
    border-color: color-mix(in srgb, var(--md-primary) 45%, transparent) !important;
    color: #fff !important;
  }

  html body #view-home .anime-news-progress {
    display: none !important;
  }

  /* news loading / error keep the banner box */
  html body #view-home .anime-news-banner-skeleton,
  html body #view-home .anime-news-unavailable {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 165px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body #view-home .anime-news-banner-skeleton span {
    height: 14px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .06);
  }

  html body #view-home .anime-news-banner-skeleton span:first-child {
    height: 165px;
    max-width: 270px;
  }

  /* ========================================================= Gerade heiss == */

  html body #view-home .home-trending-band {
    display: flex !important;
    flex-direction: column !important;
    position: relative;
    padding: 18px 18px 8px !important;
  }

  html body #view-home .home-trending-band .band-head {
    margin: 0 0 4px !important;
  }

  html body #view-home #trendingRail {
    display: grid !important;
    flex: 1 1 auto !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 150px !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    gap: 18px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  html body #view-home #trendingRail::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  html body #view-home .poster-card {
    display: grid !important;
    grid-template-rows: 125px minmax(0, 1fr) !important;
    width: 150px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 4px !important;
    gap: 0 !important;
    border: 1px solid var(--home-card-line) !important;
    border-radius: var(--home-card-radius) !important;
    background: var(--home-sub-bg) !important;
    box-shadow: none !important;
    clip-path: none !important;
    overflow: hidden !important;
    scroll-snap-align: start;
    text-decoration: none !important;
  }

  html body #view-home .poster-card:hover {
    border-color: color-mix(in srgb, var(--md-primary) 38%, transparent) !important;
  }

  html body #view-home .poster-card > img {
    width: 100% !important;
    height: 125px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
  }

  html body #view-home .poster-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    padding: 9px 5px 4px !important;
    background: none !important;
    border: 0 !important;
  }

  html body #view-home .poster-info strong {
    overflow: hidden;
    color: var(--home-title) !important;
    font-family: var(--font-body) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html body #view-home .poster-info .poster-rating {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--home-title) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  html body #view-home .poster-info .poster-rating::before {
    content: "\2605";
    color: var(--md-rating);
    font-size: 14px;
  }

  html body #view-home .poster-info > span:not(.poster-rating) {
    overflow: hidden;
    color: var(--md-muted) !important;
    font-size: 12px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html body #view-home .poster-rail-next {
    position: absolute !important;
    top: 50%;
    right: 8px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid var(--home-card-line);
    border-radius: 50%;
    background: rgba(10, 5, 6, .78);
    color: var(--md-on-surface);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
  }

  html body #view-home .poster-rail-next:hover {
    border-color: color-mix(in srgb, var(--md-primary) 45%, transparent);
    color: #fff;
  }

  html body #view-home #trendingRail .ui-state-card,
  html body #view-home #trendingRail .empty-state,
  html body #view-home #trendingRail .skeleton-status {
    min-height: 0 !important;
  }

  html body #view-home .poster-card.ui-skeleton {
    min-height: 0 !important;
    background: var(--home-sub-bg) !important;
  }

  /* ===================================================== Anime Geheimtipp == */

  html body #view-home .hidden-treasure-band {
    display: flex !important;
    flex-direction: column !important;
  }

  html body #view-home .hidden-treasure-band .band-head {
    margin: 0 0 8px !important;
  }

  html body #view-home .hidden-treasure-card {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body #view-home .hidden-treasure-inner {
    position: relative;
    display: grid !important;
    grid-template-columns: 124px minmax(0, 1fr) !important;
    align-items: start !important;
    /* Poster und Textspalte bilden EINE Zeile, die als Ganzes mittig in der
       Karte sitzt. Ohne das streckt sich die Zeile auf die Kartenhoehe: auf
       hohen Canvases (ab 1050px Hoehe waechst --home-row3) stand der Text dann
       oben, waehrend das Poster mittig zentriert war - bei 2560x1440 lagen
       114px dazwischen. */
    align-content: center !important;
    gap: 0 18px !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body #view-home .hidden-treasure-inner > img {
    /* styles-v2-4-141.css setzt hier align-self: center. Das Poster wuerde
       damit als einziges Kind zentriert, waehrend die Textspalte oben bleibt.
       Beide starten jetzt an derselben Oberkante. */
    align-self: start !important;
    width: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;
    height: 155px !important;
    aspect-ratio: auto !important;
    border: 0 !important;
    border-radius: var(--home-card-radius) !important;
    box-shadow: none !important;
    object-fit: cover !important;
  }

  html body #view-home .hidden-treasure-inner > div {
    min-width: 0;
  }

  html body #view-home .hidden-treasure-inner h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin: 0 0 11px !important;
    color: var(--home-title) !important;
    font-family: var(--font-display) !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -.005em !important;
    text-transform: none !important;
  }

  html body #view-home .hidden-treasure-inner .tag-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0 0 12px !important;
    overflow: hidden;
  }

  html body #view-home .hidden-treasure-inner .tag {
    flex: 0 0 auto;
    padding: 5px 11px !important;
    border: 1px solid var(--home-card-line) !important;
    border-radius: 8px !important;
    background: var(--home-chip-bg) !important;
    color: var(--md-muted) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap;
  }

  html body #view-home .hidden-treasure-inner p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0 0 12px !important;
    color: var(--md-muted) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  html body #view-home .hidden-treasure-meta {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--md-muted) !important;
    font-size: 13px !important;
  }

  html body #view-home .hidden-treasure-meta b {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--home-title);
    font-weight: 600;
  }

  html body #view-home .hidden-treasure-meta b::before {
    content: "\2605";
    color: var(--md-rating);
    font-size: 14px;
  }

  /* the card stays keyboard reachable through the existing detail link */
  html body #view-home .hidden-treasure-inner .small-btn {
    position: absolute !important;
    inset: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--home-card-radius) !important;
    background: none !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  html body #view-home .hidden-treasure-inner .small-btn:focus-visible {
    outline: 2px solid var(--md-secondary) !important;
    outline-offset: 2px;
  }

  html body #view-home .hidden-treasure-card .empty-state,
  html body #view-home .hidden-treasure-card .ui-state-card {
    width: 100%;
    min-height: 0 !important;
  }

  /* ====================================================== Anime Community == */

  html body #view-home .home-community-activity {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  html body #view-home .home-community-activity .band-head {
    margin: 0 0 6px !important;
  }

  html body #view-home .home-community-activity .band-head > div {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  html body #view-home .home-community-demo-tag {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    height: 16px;
    margin: 0;
    padding: 0 7px;
    border: 1px solid var(--home-card-line);
    border-radius: 999px;
    color: var(--md-dim);
    font-size: 9.5px;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  html body #view-home .home-community-feed {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body #view-home .home-community-post {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0 11px !important;
    margin: 0 !important;
    padding: 3px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--home-card-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body #view-home .home-community-avatar {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    font-size: 14px !important;
  }

  html body #view-home .home-community-post p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin: 0 !important;
    color: var(--md-muted) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  html body #view-home .home-community-post p strong {
    color: var(--home-title) !important;
    font-weight: 650 !important;
  }

  html body #view-home .home-community-post-rating {
    color: var(--md-rating) !important;
    font-weight: 650 !important;
  }

  html body #view-home .home-community-demo-note {
    display: none !important;
  }

  html body #view-home .home-community-activity .home-card-action {
    margin: auto 0 0 !important;
  }

  /* ============================================= Deine Anime auf einen Blick */

  html body #view-home .watch-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    text-align: left !important;
  }

  html body #view-home .watch-box > .section-kicker {
    display: none !important;
  }

  html body #view-home .watch-box h2 {
    margin: 0 !important;
    max-width: none !important;
    color: var(--home-title) !important;
    font-family: var(--font-display) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
  }

  html body #view-home .home-library-snapshot {
    display: grid !important;
    grid-template-columns: 140px minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0 16px !important;
    text-align: left !important;
  }

  html body #view-home .home-library-snapshot h2 {
    grid-column: 1 / -1;
    margin: 0 0 4px !important;
  }

  html body #view-home .home-library-ring {
    --home-library-pct: 0;
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    position: relative;
    display: grid;
    place-items: center;
    /* Genau eine Zeile ueber die volle Ringhoehe: der Prozentwert liegt damit
       auf halber Hoehe, also exakt im Kreismittelpunkt. Die Beschriftung ist
       unten absolut positioniert und belegt keine zweite Zeile mehr.
       98 statt 104 px: die sechs Punkte gaben dem Ring bisher 15 px Luft nach
       unten, was fuer eine lesbare Beschriftung zu wenig war. Die 6 px kommen
       der Beschriftung zugute; Kartenhoehe und Zeilenraster bleiben gleich. */
    grid-template-rows: 98px;
    width: 98px !important;
    height: 98px !important;
    /* Ring und Beschriftung bilden optisch einen Block. Die 8px unter dem Ring
       gehen in die Zentrierung von Zeile 2 ein, sodass der Block als Ganzes
       mittig sitzt und die Beschriftung Abstand zum Bibliotheks-Button behaelt.
       Zeile 2 wird davon nicht hoeher: die Statusliste bleibt das hoehere
       Element der Zeile. */
    margin-bottom: 8px;
    border-radius: 50%;
    background:
      radial-gradient(closest-side, var(--home-card-bg) 79%, transparent 80% 100%),
      conic-gradient(#f4404a calc(var(--home-library-pct) * 1%), #2b1d20 0) !important;
  }

  html body #view-home .home-library-ring-value {
    color: var(--home-title) !important;
    font-family: var(--font-display) !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
  }

  html body #view-home .home-library-ring small {
    /* Aus dem Grid-Fluss genommen und unter den Kreis gesetzt. Absolut, damit
       der Ring seine feste Groesse behaelt: die Karte ist ab 1500px auf eine
       feste Hoehe gepinnt und wuerde sonst clippen. Breite 140px entspricht
       der Gitterspalte, der Text bleibt damit einzeilig und laeuft nicht in
       die Statusliste. Der 3px-Versatz haelt die Beschriftung vom Ring frei,
       die Obergrenze 12.5px vom darunter liegenden Bibliotheks-Button. */
    position: absolute;
    top: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 140px;
    max-width: none;
    color: var(--md-muted) !important;
    font-size: clamp(11px, 0.55vw + 3.6px, 12.5px) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: .005em !important;
    white-space: nowrap;
    text-align: center;
  }

  html body #view-home .home-library-counts {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 100%;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    list-style: none;
  }

  html body #view-home .home-library-counts li {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0 10px !important;
    padding: 1px 0 !important;
    border: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }

  html body #view-home .home-library-counts li.is-total {
    margin-top: 3px !important;
    padding-top: 5px !important;
    border-top: 1px solid var(--home-card-line) !important;
  }

  html body #view-home .home-library-counts li i {
    display: grid;
    place-items: center;
    color: var(--md-dim);
  }

  html body #view-home .home-library-counts li i svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  html body #view-home .home-library-counts li span {
    color: var(--md-muted) !important;
  }

  html body #view-home .home-library-counts li strong {
    color: var(--home-title) !important;
    font-family: var(--font-display) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  html body #view-home .home-library-snapshot .ghost-action {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 33px;
    min-height: 33px;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    border: 1px solid var(--home-card-line) !important;
    border-radius: 9px !important;
    background: #281616 !important;
    color: var(--home-title) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  /* guest variant keeps the exact same card box */
  html body #view-home .accent-box {
    justify-content: flex-start !important;
    border-color: var(--home-card-line) !important;
    background: var(--home-card-bg) !important;
  }

  html body #view-home .accent-box h2 {
    max-width: none !important;
  }

  html body #view-home .accent-box p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    margin: 0 !important;
    color: var(--md-muted) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  html body #view-home .accent-box .solid-action {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 35px;
    min-height: 35px;
    margin: auto 0 0 !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: var(--home-cta-fill) !important;
    color: #fff !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
}

/* ========================================================================== */
/* Desktop: exakte Zeilenhoehen des Golden Master                             */
/* Galt bisher erst ab 1500px. Darunter wuchsen die Zeilen mit ihrem Inhalt,  */
/* wodurch News- und Trendingkarten weit ueber ihre Sollhoehe gestreckt       */
/* wurden. Ab 1181px greifen jetzt dieselben Werte wie im Golden Master.      */
/* ========================================================================== */

@media (min-width: 1181px) {
  html body #view-home .hero-grid {
    height: var(--home-row1);
    min-height: var(--home-row1);
  }

  html body #view-home .home-news-trending-grid {
    height: var(--home-row2);
    min-height: var(--home-row2);
  }

  html body #view-home .home-bottom-grid {
    height: var(--home-row3);
    min-height: var(--home-row3);
  }
}

/* A desktop-width hero still needs enough copy width below the golden-master
   canvas. At compact desktop widths the release rail becomes the next row
   instead of squeezing both panels into unreadable columns. */
@media (min-width: 960px) and (max-width: 1180px) {
  html body #view-home .hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: var(--home-row1) var(--home-row1) !important;
    min-height: 0;
  }
}

@media (min-width: 1181px) and (max-width: 1499px) {
  html body #view-home .hero-slide {
    grid-template-columns: minmax(330px, 62%) minmax(0, 1fr) !important;
  }
}

/* Hohe, breite Bildschirme geben den drei Baendern begrenzt Raum zum
   Wachsen. Bei 1080px Bildschirmhoehe ergeben die Formeln genau die Werte
   der Referenz; darueber waechst jede Zeile massvoll mit. */
@media (min-width: 1500px) and (min-height: 1050px) {
  html body #view-home {
    --home-row1: clamp(318px, calc(20dvh + 102px), 440px);
    --home-row2: clamp(190px, calc(20dvh - 26px), 330px);
    --home-row3: clamp(210px, calc(40dvh - 222px), 400px);
  }
}

/* -------------------------------------------------------------------------- */
/* Mobile / tablet (<= 959px) - unchanged behaviour. The desktop-only         */
/* elements added for the reference layout stay out of the flow.             */
/* -------------------------------------------------------------------------- */

@media (max-width: 959px) {
  html body .release-stack .release-day,
  html body #view-home .home-card-action,
  html body #view-home .poster-rail-next {
    display: none !important;
  }

  /* The reference row splits day / thumb / copy / countdown into four grid
     children. Below the desktop breakpoint they collapse back into the
     original two-column row (thumb + stacked copy and countdown). */
  html body .release-stack .release-item {
    grid-template-rows: auto auto !important;
    align-items: start !important;
  }

  html body .release-stack .release-item .release-thumb {
    grid-area: 1 / 1 / 3 / 2 !important;
    align-self: start !important;
  }

  html body .release-stack .release-item .release-copy {
    grid-area: 1 / 2 / 2 / 3 !important;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  html body .release-stack .release-item .countdown {
    grid-area: 2 / 2 / 3 / 3 !important;
    justify-self: start !important;
  }
}

@media (max-width: 760px) {
  html body #view-home .admin-live-counter {
    margin: 0 0 12px !important;
  }

  html body #view-home #homeCountdowns {
    max-height: none;
    overflow-y: visible;
  }

  html body #view-home .social-community-mobile {
    border: 1px solid var(--md-outline) !important;
    border-radius: var(--md-radius-card) !important;
    background: var(--md-surface-variant) !important;
    box-shadow: var(--md-elevation-1) !important;
  }

  html body #view-home .hidden-treasure-inner h3 {
    font-size: 20px !important;
  }

  html body #view-home .accent-box h2 {
    max-width: none;
  }

  html body #view-home .anime-news-banner-copy {
    padding: 14px !important;
  }

  html body #view-home .anime-news-banner-copy h3 {
    font-size: clamp(17px, 5vw, 20px) !important;
    -webkit-line-clamp: 2 !important;
  }

  html body #view-home .anime-news-banner-copy p {
    -webkit-line-clamp: 2 !important;
  }
}

/* ------------------------------------------------------------------------ */
/* Startseite nach Referenz (V2.4.212)                                       */
/* ------------------------------------------------------------------------ */

/* Die kleinen roten Vorzeilen ueber den Abschnitten erscheinen auf der
   Referenz nicht. Sie bleiben im Markup, weil die Hero-Vorzeile per
   JavaScript beschrieben wird, sind auf der Startseite aber ausgeblendet. */
html body #view-home .section-kicker { display: none !important; }

/* Trending-Karten: die Referenz zeigt sieben schmale Karten nebeneinander
   statt vier breiter. Bild im Hochformat, Titel und Bewertung darunter. */
@media (min-width: 1181px) {
  html body #view-home #trendingRail > * {
    width: 90px !important;
    min-width: 90px !important;
    flex: 0 0 90px !important;
  }

  html body #view-home #trendingRail > * img {
    height: 118px !important;
  }
}

/* ========================================================================== */
/* Mobile Startseite nach Referenz (V2.4.212)                                 */
/* Reihenfolge wie im Referenzbild: Banner, Hero, Naechste Releases,          */
/* Anime News, Gerade heiss, Geheimtipp neben Community, Account.             */
/* ========================================================================== */

@media (max-width: 959px) {
  html body #view-home {
    --home-gap: 11px;
  }

  html body #view-home .hero-grid,
  html body #view-home .home-news-trending-grid,
  html body #view-home .home-bottom-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--home-gap) !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html body #view-home .hero-grid > *,
  html body #view-home .home-news-trending-grid > *,
  html body #view-home .home-bottom-grid > * {
    height: auto !important;
  }

  /* ------------------------------------------------------------- Hero ---- */
  /* Referenz: Text links, Artwork rechts - nicht gestapelt. */
  html body #view-home .hero-slide {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 41% !important;
    align-items: stretch !important;
    min-height: 0 !important;
  }

  html body #view-home #heroSpotlight {
    height: 232px !important;
    min-height: 232px !important;
  }

  html body #view-home .hero-copy {
    order: 0 !important;
    justify-content: center !important;
    padding: 14px 12px !important;
  }

  html body #view-home .hero-main-title,
  html body #view-home .hero-slide h2 {
    font-size: 19px !important;
    line-height: 1.18 !important;
  }

  html body #view-home .hero-slide p {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  /* ------------------------------------------------- Naechste Releases ---- */
  /* Referenz: waagerechte Karten statt einer senkrechten Liste. */
  html body #view-home #homeCountdowns {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 2px !important;
    scrollbar-width: none;
  }

  html body #view-home #homeCountdowns::-webkit-scrollbar { display: none; }

  html body #view-home #homeCountdowns .release-item {
    width: 118px !important;
    min-width: 118px !important;
    flex: 0 0 118px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  html body #view-home #homeCountdowns .release-thumb {
    width: 118px !important;
    height: 66px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
  }

  html body #view-home #homeCountdowns .release-copy {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  html body #view-home #homeCountdowns .release-title {
    overflow: hidden !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #view-home #homeCountdowns .release-meta {
    color: var(--md-dim) !important;
    font-size: 11px !important;
  }

  html body #view-home #homeCountdowns .release-meta-date { display: none !important; }

  /* Tag und Uhrzeit stehen in der Referenz unter dem Titel. */
  html body #view-home #homeCountdowns .release-day {
    order: 3 !important;
    display: flex !important;
    gap: 4px !important;
    align-items: baseline !important;
    color: var(--md-dim) !important;
    font-size: 11px !important;
  }

  html body #view-home #homeCountdowns .release-day b {
    color: var(--md-dim) !important;
    font-weight: 500 !important;
  }

  html body #view-home #homeCountdowns .release-day > span {
    color: var(--md-on-surface) !important;
    font-weight: 650 !important;
  }

  /* Die Restzeit steht auf der Referenz nicht in der Mobilansicht. */
  html body #view-home #homeCountdowns .countdown { display: none !important; }

  /* ------------------------------------------------------- Anime News ---- */
  /* Referenz: eine kompakte Zeile, Bild links, Text rechts. */
  html body #view-home .anime-news-banner-slide,
  html body #view-home .anime-news-banner-link {
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 0 11px !important;
    height: auto !important;
  }

  html body #view-home .anime-news-banner-media {
    width: 150px !important;
    height: 88px !important;
    border-radius: 8px !important;
  }

  html body #view-home .anime-news-banner-title {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  html body #view-home .anime-news-banner-text {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
  }

  /* ------------------------------------------------------ Gerade heiss --- */
  html body #view-home #trendingRail {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  html body #view-home #trendingRail::-webkit-scrollbar { display: none; }

  html body #view-home #trendingRail > * {
    width: 118px !important;
    min-width: 118px !important;
    flex: 0 0 118px !important;
    height: auto !important;
  }

  html body #view-home #trendingRail > * img {
    width: 118px !important;
    height: 66px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
  }

  html body #view-home .poster-rail-next { display: none !important; }

  /* -------------------------------- Geheimtipp neben Community ----------- */
  html body #view-home .home-bottom-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  html body #view-home .home-bottom-grid > #homeAccountPromo,
  html body #view-home .home-bottom-grid > .home-library-snapshot {
    grid-column: 1 / -1 !important;
  }

  html body #view-home .hidden-treasure-inner {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #view-home .hidden-treasure-inner img {
    width: 100% !important;
    height: 96px !important;
    object-fit: cover !important;
  }

  /* Die Community-Karte zeigt in der Referenz drei Zeilen ohne Fusstext. */
  html body #view-home .home-community-demo-note { display: none !important; }

  /* ---------------------------------------------------- Account-Karte ---- */
  html body #view-home #homeAccountPromo {
    padding: 14px !important;
  }

  html body #view-home #homeAccountPromo h2 {
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  html body #view-home #homeAccountPromo p {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
}

/* ========================================================================== */
/* Mobile Startseite - Korrekturen gegen bestehende Regeln (V2.4.212)         */
/* Die folgenden Bereiche wurden vorher von spezifischeren Regeln aus         */
/* material-redesign bzw. aus dem bisherigen Mobilblock ueberstimmt.          */
/* ========================================================================== */

@media (max-width: 959px) {
  /* ------------------------------------------------------------- Hero ---- */
  /* Gegen html body #view-home .hero-carousel .hero-slide aus
     material-redesign: dort steht das Artwork oben und der Text darunter.
     Die Referenz zeigt Text links, Artwork rechts. */
  html body #view-home .hero-carousel {
    min-height: 232px !important;
    height: 232px !important;
  }

  html body #view-home .hero-carousel .hero-slide {
    grid-template-columns: minmax(0, 1fr) 41% !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  html body #view-home .hero-carousel .hero-slide .hero-art {
    grid-column: 2 !important;
    grid-row: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    order: 0 !important;
  }

  html body #view-home .hero-carousel .hero-slide .hero-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    padding: 12px 12px 12px 14px !important;
  }

  /* Beide Schaltflaechen stehen in der Referenz untereinander. */
  html body #view-home .hero-carousel .hero-actions {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  html body #view-home .hero-carousel-dots {
    top: auto !important;
    bottom: 9px !important;
    left: 50% !important;
  }

  /* --------------------------------------------------- Naechste Releases -- */
  /* Die Zeilen hatten feste grid-area-Zuweisungen fuer die zweispaltige
     Listenform. Fuer die Kartenform werden sie aufgehoben. */
  html body #view-home #homeCountdowns .release-item .release-thumb,
  html body #view-home #homeCountdowns .release-item .release-copy,
  html body #view-home #homeCountdowns .release-item .release-day,
  html body #view-home #homeCountdowns .release-item .countdown {
    grid-area: auto !important;
    align-self: auto !important;
    justify-self: stretch !important;
  }

  html body #view-home #homeCountdowns .release-item {
    grid-template-rows: auto auto auto !important;
    align-items: start !important;
  }

  html body #view-home #homeCountdowns .release-item .release-thumb {
    width: 118px !important;
    min-width: 118px !important;
    height: 66px !important;
    border: 0 !important;
  }

  html body #view-home #homeCountdowns .release-item .release-title {
    display: block !important;
    -webkit-line-clamp: none !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  /* ------------------------------------------------------ Gerade heiss --- */
  /* Die Karten wurden auf Desktop-Hoehe gestreckt und wirkten dadurch leer. */
  html body #view-home #trendingRail .poster-card {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    gap: 5px !important;
  }

  html body #view-home #trendingRail .poster-info {
    width: 100% !important;
    display: grid !important;
    gap: 2px !important;
  }

  html body #view-home #trendingRail .poster-info strong {
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* ------------------------------------------------------- Anime News ---- */
  /* Feste Kartenhoehe: die Folien liegen uebereinander, ohne Hoehe faellt
     die Karte auf null zusammen. */
  html body #view-home #homeNewsBanner {
    height: 112px !important;
    min-height: 112px !important;
  }

  html body #view-home .anime-news-banner-slide,
  html body #view-home .anime-news-banner-link {
    height: 100% !important;
    min-height: 0 !important;
  }

  /* ------------------------------------------------------- Geheimtipp ---- */
  /* Halbe Spaltenbreite: Text und Zustandskarte muessen schmaler werden,
     sonst steht dort ein Wort je Zeile. */
  html body #view-home .hidden-treasure-inner h3 {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  html body #view-home .hidden-treasure-inner p {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
  }

  html body #view-home .hidden-treasure-card .ui-state-card {
    flex-direction: column !important;
    gap: 6px !important;
    text-align: left !important;
  }

  html body #view-home .hidden-treasure-card .ui-state-card h3 {
    font-size: 13px !important;
  }

  html body #view-home .hidden-treasure-card .ui-state-card p {
    font-size: 11.5px !important;
  }
}

/* ========================================================================== */
/* Mobile Startseite - Feinschliff (V2.4.212)                                 */
/* ========================================================================== */

@media (max-width: 959px) {
  /* ------------------------------------------------------- Anime News ---- */
  html body #view-home .anime-news-banner-media {
    height: 88px !important;
  }

  html body #view-home .anime-news-banner-copy {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    align-content: start !important;
  }


  /* Wie in der Mobilreferenz: erst der Titel, dann der Anriss, ganz unten
     Datum und Quelle. */
  html body #view-home .anime-news-banner-copy h3 { order: 1 !important; }
  html body #view-home .anime-news-banner-copy p { order: 2 !important; }
  html body #view-home .anime-news-meta { order: 3 !important; }
  html body #view-home .anime-news-meta time { order: 1 !important; }
  html body #view-home .anime-news-meta span { order: 2 !important; }

  html body #view-home .anime-news-banner-copy h3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
  }

  html body #view-home .anime-news-banner-copy p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  html body #view-home .anime-news-meta {
    margin-top: 2px !important;
    font-size: 10px !important;
  }

  /* Der Verweis steht auf der Referenz nicht in der Mobilkarte. */
  html body #view-home .anime-news-read { display: none !important; }

  /* ------------------------------------------------------ Gerade heiss --- */
  /* Ohne dies streckt der Flexbereich alle Karten auf die hoechste. */
  html body #view-home #trendingRail {
    align-items: flex-start !important;
  }

  /* ------------------------------------------------------------- Hero ---- */
  /* Der Inhalt lief unten aus der Karte. Etwas kompaktere Masse und eine
     auf zwei Zeilen begrenzte Beschreibung halten ihn im Rahmen. */
  html body #view-home .hero-carousel .hero-copy .hero-main-title,
  html body #view-home .hero-carousel .hero-copy h2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
  }

  html body #view-home .hero-carousel .hero-copy p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  html body #view-home .hero-carousel .hero-actions .solid-action,
  html body #view-home .hero-carousel .hero-actions .ghost-action {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
  }

  html body #view-home .hero-carousel .hero-copy {
    gap: 7px !important;
    padding: 10px 10px 22px 14px !important;
  }

  /* Die Punkte sitzen unter dem Text, nicht darueber. */
  html body #view-home .hero-carousel-dots {
    left: 78px !important;
    bottom: 7px !important;
    transform: none !important;
  }
}

/* ========================================================================== */
/* Mobile Startseite - vollstaendige Kartenmasse (V2.4.212)                    */
/* Die Desktop-Definitionen geben feste Zeilenhoehen und height:100% vor.     */
/* Fuer die Mobilfassung werden sie hier vollstaendig neu gesetzt.            */
/* ========================================================================== */

@media (max-width: 959px) {
  html body #view-home #trendingRail .poster-card {
    display: grid !important;
    /* Feste Gesamthoehe: Bild plus zwei Textzeilen. Ohne das waechst die
       Textzeile auf die Desktop-Masse und die Karte wird ueberhoch. */
    grid-template-rows: 66px 44px !important;
    width: 118px !important;
    height: 114px !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 4px !important;
    gap: 0 !important;
  }

  html body #view-home #trendingRail .poster-card > img {
    width: 100% !important;
    height: 66px !important;
    border-radius: 7px !important;
    object-fit: cover !important;
  }

  html body #view-home #trendingRail .poster-info {
    gap: 3px !important;
    padding: 6px 3px 2px !important;
  }

  /* UI-Fix 2026-10-03: Das Bild fuellt die ganze Kartenhoehe (vorher 88 px
     in einer 112 px hohen Karte) und waechst auf breiteren Telefonen mit.
     object-fit: cover bleibt (.anime-news-banner-image), es wird nichts
     verzerrt. Der Desktop hat eigene Regeln ausserhalb dieser Media-Query. */
  /* Die Zeile ist so hoch wie die Karte. Ohne feste Zeile richtete sie sich
     nach dem (abgeschnittenen) Text und das Bild wurde hoeher als die Karte. */
  html body #view-home #homeNewsBanner .anime-news-banner-slide,
  html body #view-home #homeNewsBanner .anime-news-banner-link {
    grid-template-columns: clamp(150px, 46%, 172px) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  html body #view-home #homeNewsBanner .anime-news-banner-media {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    align-self: stretch !important;
  }
}

@media (max-width: 959px) {
  html body #view-home #trendingRail .poster-info {
    overflow: hidden !important;
    align-content: start !important;
  }
}

/* ========================================================================== */
/* Schriftgroessen nach der Startseiten-Referenz (V2.4.212)                    */
/* Die Referenz setzt die Startseite eine Stufe kleiner als der bisherige      */
/* Stand: Abschnittstitel 15.5 statt 18/19, Fliesstext 12.5 statt 15.         */
/* Der Block steht bewusst am Dateiende, damit er die frueheren Werte bei      */
/* gleicher Spezifitaet ueberschreibt.                                        */
/* ========================================================================== */

@media (min-width: 960px) {
  html body #view-home .band-head h2,
  html body #view-home .watch-box h2,
  html body #view-home .pulse-card .band-head h2,
  html body #view-home .hidden-treasure-inner h3 {
    font-size: 15.5px !important;
  }

  html body #view-home .anime-news-banner-copy h3 {
    font-size: 13.5px !important;
  }

  html body #view-home .text-action {
    font-size: 12.5px !important;
  }

  html body #view-home .watch-box p {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }

  html body #view-home .home-community-post p {
    font-size: 12px !important;
  }
}

/* ========================================================================== */
/* Newskarte: Platz fuer Datum und Quelle (V2.4.212)                          */
/* Bild und Text brauchen zusammen rund 112px. Innenabstand und Punktreihe    */
/* geben diesen Platz frei, sonst schneidet die Karte die Zeile mit Datum     */
/* und Quelle ab.                                                             */
/* ========================================================================== */

@media (min-width: 960px) {
  html body #view-home .anime-news-band {
    padding: 14px !important;
  }

  html body #view-home .anime-news-banner-controls {
    height: 16px !important;
    margin: 6px 0 0 !important;
  }
}

/* ========================================================================== */
/* Startansicht beschneidet den Aizen-Freisteller nicht (V2.4.212)            */
/* .view traegt grundsaetzlich overflow-x: clip. Der Freisteller des          */
/* Startbanners ragt nach oben heraus und wuerde dadurch abgeschnitten.       */
/* ========================================================================== */

@media (min-width: 960px) {
  html body #view-home {
    overflow: visible !important;
  }
}