/*
 * AnimeRadar v2.4.194 - Anime-Detailansicht (Desktop-Referenz)
 *
 * Geometrie aus den sechs Referenzboards (1672x941): Content 272..1633,
 * Hero-Card 1362x307 (Banner 268 + Tab-Strip 39), Card-Gap 13, Card-Radius 14.
 * Alle sechs Tabs teilen Hero und Tableiste; nur .detail-tabpanel wechselt.
 */

html body #view-detail {
  --detail-bg: #0c0a0b;
  --detail-surface: #151112;
  --detail-surface-elevated: #1b1517;
  --detail-surface-soft: #191315;
  --detail-border: rgba(255, 255, 255, .062);
  --detail-border-strong: rgba(255, 255, 255, .1);
  --detail-radius: 14px;
  --detail-radius-sm: 10px;
  --detail-gap: 13px;
  --detail-pad: 16px;
  --detail-text: #f4f0f1;
  --detail-muted: #a9a1a3;
  --detail-dim: #8b8385;
  --detail-accent: #e8433f;
  --detail-accent-soft: rgba(232, 67, 63, .14);
  --detail-accent-line: rgba(232, 67, 63, .5);
  --detail-accent-fill: #8e2a32;
  --detail-rating: #ffbd38;
}

html body #view-detail.active {
  display: block !important;
  transform: none !important;
}

html body #view-detail .detail-page-shell,
html body #view-detail #detailContent {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html body #view-detail #detailContent {
  display: grid !important;
  gap: var(--detail-gap) !important;
}

/* Hero ---------------------------------------------------------------------- */

html body #view-detail .detail-hero {
  position: relative;
  z-index: 4;
  min-height: 0 !important;
  display: block !important;
  grid-template-columns: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 1px solid var(--detail-border) !important;
  border-radius: var(--detail-radius) !important;
  background: var(--detail-surface) !important;
  box-shadow: none !important;
}

html body #view-detail .detail-hero-banner {
  position: relative;
  /* styles-v2-4-141.css setzt hier per ".detail-hero > *:not(.backdrop)" z-index 1.
     Damit bildete der Banner einen Stacking Context, in dem das Aktionsmenue die
     Tab-Leiste (z-index 3) nie ueberlagern konnte. Der Banner liegt jetzt darueber;
     visuell ueberschneiden sich beide nicht. */
  z-index: 4;
  height: auto;
  min-height: 268px;
  display: flex;
  align-items: flex-end;
  padding: 0 !important;
  /* Nur das Bannerbild wird beschnitten. Das Aktionsmenue liegt darueber und
     darf aus dem Banner herausragen. */
  overflow: visible;
  border-radius: var(--detail-radius) var(--detail-radius) 0 0;
}

html body #view-detail .detail-hero-banner > .backdrop,
html body #view-detail .detail-hero-banner::before {
  border-radius: inherit;
}

html body #view-detail .detail-hero .backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center 22% !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Links deutlich dunkler, nach rechts fast klar: der Titelblock bleibt auf
   jedem echten Bannerbild lesbar, ohne das Bild global abzudunkeln. */
html body #view-detail .detail-hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(9, 7, 8, .96) 0%, rgba(9, 7, 8, .9) 26%, rgba(9, 7, 8, .55) 52%, rgba(9, 7, 8, .12) 78%, rgba(9, 7, 8, .04) 100%),
    linear-gradient(to top, rgba(9, 7, 8, .82) 0%, rgba(9, 7, 8, .22) 42%, rgba(9, 7, 8, 0) 72%);
}

html body #view-detail .detail-hero .detail-poster {
  display: none !important;
}

html body #view-detail .detail-hero .detail-title {
  position: relative;
  z-index: 5;
  min-width: 0;
  width: 100%;
  display: grid;
  gap: 0;
  /* Der obere Innenabstand ist im Normalfall unsichtbar, weil der Stapel unten
     ausgerichtet ist und in die 268 px passt. Er greift erst, wenn ein langer
     Titel den Banner wachsen laesst - dann haelt das Format-Badge Abstand zur
     Oberkante statt daran zu kleben. */
  padding: 20px 34px 20px !important;
}

/* Sehr lange Titel duerfen den Banner nicht unbegrenzt aufblaehen. */
html body #view-detail .detail-title h1.detail-main-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

html body #view-detail .detail-reference-flags {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 0 13px !important;
}

html body #view-detail .detail-reference-flags .section-kicker {
  height: 24px;
  display: inline-flex !important;
  align-items: center;
  padding: 0 11px !important;
  border: 1px solid var(--detail-accent-line) !important;
  border-radius: 7px !important;
  background: rgba(232, 67, 63, .08) !important;
  color: #ff6f66 !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body #view-detail .detail-dub-badge {
  height: 24px;
  display: inline-flex !important;
  align-items: center;
  padding: 0 10px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, .05) !important;
  color: #ded7d8 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

html body #view-detail .detail-title h1.detail-main-title,
html body #view-detail .detail-main-title {
  margin: 0 !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  letter-spacing: -.028em !important;
  line-height: 1.08 !important;
  text-transform: none !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}

html body #view-detail .detail-title p.detail-reference-alt-title,
html body #view-detail .detail-reference-alt-title {
  margin: 0 !important;
  color: #cdc5c7 !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

html body #view-detail .detail-reference-meta {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 !important;
  margin: 14px 0 0 !important;
  line-height: 1.25 !important;
  color: #c6bec0 !important;
  font-size: 15px !important;
}

html body #view-detail .detail-reference-meta span {
  display: inline-flex;
  align-items: center;
}

html body #view-detail .detail-reference-meta span + span::before {
  content: "•";
  margin: 0 10px;
  color: rgba(255, 255, 255, .34);
  font-size: 13px;
}

html body #view-detail .detail-hero-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 27px;
  margin: 10px 0 0;
}

html body #view-detail .detail-reference-rating-line {
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  margin: 0 !important;
  color: #ece6e7 !important;
  font-size: 15px !important;
}

html body #view-detail .detail-reference-star {
  color: var(--detail-rating) !important;
  font-size: 19px !important;
  line-height: 1;
}

html body #view-detail .detail-reference-rating-line strong {
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 650 !important;
}

html body #view-detail .detail-reference-rating-line small {
  color: #b3abad !important;
  font-size: 14px !important;
}

html body #view-detail .detail-reference-rating-divider {
  width: 1px;
  height: 17px;
  margin: 0 4px;
  background: rgba(255, 255, 255, .16);
}

html body #view-detail .detail-action-row {
  display: flex !important;
  align-items: center;
  gap: 12px !important;
  grid-template-columns: none !important;
  margin: 0 !important;
}

html body #view-detail .detail-list-action {
  height: 33px;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  padding: 0 18px !important;
  border: 1px solid var(--detail-accent-line) !important;
  border-radius: 9px !important;
  background: rgba(232, 67, 63, .16) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

html body #view-detail .detail-list-action:hover {
  background: rgba(232, 67, 63, .26) !important;
}

html body #view-detail .detail-list-action .list-plus-icon {
  position: relative;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}

html body #view-detail .detail-list-action .list-plus-icon::before,
html body #view-detail .detail-list-action .list-plus-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--detail-accent);
  transform: translate(-50%, -50%);
}

html body #view-detail .detail-list-action .list-plus-icon::before {
  width: 13px;
  height: 1.8px;
}

html body #view-detail .detail-list-action .list-plus-icon::after {
  width: 1.8px;
  height: 13px;
}

html body #view-detail .detail-more-wrap {
  position: relative;
  display: flex;
  align-items: center;
  align-self: center;
}

html body #view-detail .detail-more-action {
  width: 35px;
  height: 33px;
  min-height: 0 !important;
  display: grid !important;
  place-items: center;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 9px !important;
  background: rgba(20, 15, 16, .72) !important;
  color: #ded7d8 !important;
  box-shadow: none !important;
  font-size: 17px !important;
}

html body #view-detail .detail-more-action:hover {
  border-color: var(--detail-accent-line) !important;
  color: #fff !important;
}

html body #view-detail .detail-more-menu[hidden] {
  display: none !important;
}

html body #view-detail .detail-more-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  min-width: 232px;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--detail-border-strong);
  border-radius: var(--detail-radius-sm);
  background: #1c1517;
  box-shadow: 0 18px 34px rgba(0, 0, 0, .48);
}

html body #view-detail .detail-more-item {
  min-height: 36px;
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #e4dedf !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: left;
  text-transform: none !important;
}

html body #view-detail .detail-more-item span:last-child {
  white-space: nowrap;
}

html body #view-detail .detail-more-item:hover {
  background: rgba(255, 255, 255, .06) !important;
}

html body #view-detail .detail-more-item.is-favorite {
  color: #ff6f66 !important;
}

/* Release-Erinnerung: Alt-Regeln aus der Icon-Button-Zeit neutralisieren, damit
   der Menueeintrag dieselbe Flaeche und denselben Hover wie seine Nachbarn hat. */
html body #view-detail .detail-more-menu .detail-reminder-action {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 36px !important;
  align-self: auto !important;
  place-items: initial;
  border-style: solid !important;
  opacity: 1 !important;
}

html body #view-detail .detail-more-menu .detail-reminder-action .bell-icon {
  flex: 0 0 auto;
  width: 18px;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  filter: none;
  transform: none;
  transition: color .16s ease;
}

/* Kein Wachsen, kein Springen: der Hover faerbt nur, wie im uebrigen Menue. */
html body #view-detail .detail-more-menu .detail-reminder-action:hover .bell-icon,
html body #view-detail .detail-more-menu .detail-reminder-action:focus-visible .bell-icon {
  transform: none;
}

/* Aktive Erinnerung bleibt auch beim Hover erkennbar - als Farbe, wie beim
   Favoriten-Eintrag, statt mit dem alten Verlauf und Eckpunkt. */
html body #view-detail .detail-more-menu .detail-reminder-action.is-active {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #ffcf6a !important;
}

html body #view-detail .detail-more-menu .detail-reminder-action.is-active:hover {
  background: rgba(255, 255, 255, .06) !important;
}

html body #view-detail .detail-more-menu .detail-reminder-action.is-active::after {
  display: none;
}

html body #view-detail .detail-more-menu .detail-reminder-action.is-paused {
  color: #bdb4b6 !important;
}

/* Fokus bleibt ein eigener, klar unterscheidbarer Zustand. */
html body #view-detail .detail-more-item:focus-visible {
  outline: 2px solid var(--detail-accent);
  outline-offset: -2px;
}

/* Tab-Leiste ---------------------------------------------------------------- */

html body #view-detail .detail-tabs {
  position: relative;
  z-index: 3;
  height: 39px;
  border-radius: 0 0 var(--detail-radius) var(--detail-radius);
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 0 24px;
  border-top: 1px solid rgba(255, 255, 255, .05);
  background: var(--detail-surface);
}

html body #view-detail .detail-tab {
  position: relative;
  min-height: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--detail-muted);
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.005em;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
}

html body #view-detail .detail-tab:hover {
  color: var(--detail-text);
}

html body #view-detail .detail-tab.is-active {
  color: #fff;
  font-weight: 600;
}

html body #view-detail .detail-tab.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--detail-accent);
}

html body #view-detail .detail-tabpanels {
  display: block;
}

html body #view-detail .detail-tabpanel {
  display: none;
  outline: none;
}

html body #view-detail .detail-tabpanel.is-active {
  display: block;
}

/* Card-System -------------------------------------------------------------- */

html body #view-detail .detail-grid {
  display: grid;
  gap: var(--detail-gap);
  align-items: start;
}

html body #view-detail .detail-stack,
html body #view-detail .detail-col {
  min-width: 0;
  display: grid;
  gap: 9px;
  align-content: start;
}

/* Der Rumpf erbt 14px/21px vom body. Das macht jede Datenzeile 3-4 px zu hoch,
   deshalb im Card-System eine proportionale Zeilenhoehe wie im Board. */
html body #view-detail .detail-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  line-height: 1.42;
  margin: 0 !important;
  padding: var(--detail-pad) !important;
  overflow: hidden;
  border: 1px solid var(--detail-border) !important;
  border-radius: var(--detail-radius) !important;
  background: var(--detail-surface) !important;
  box-shadow: none !important;
}

html body #view-detail .detail-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

html body #view-detail .detail-card-titles {
  min-width: 0;
  display: grid;
  gap: 2px;
}

html body #view-detail .detail-card-kicker {
  color: var(--detail-accent);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html body #view-detail .detail-card-title {
  margin: 0 !important;
  color: var(--detail-text) !important;
  font-family: var(--font-body) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: -.006em !important;
  line-height: 1.24 !important;
  text-transform: none !important;
}

html body #view-detail .detail-card-action {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--detail-accent);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
}

html body #view-detail .detail-card-action:hover {
  text-decoration: underline;
}

html body #view-detail .detail-card-more {
  min-height: 0;
  align-self: flex-start;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--detail-accent);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  text-transform: none;
  cursor: pointer;
}

html body #view-detail .detail-card-more:hover {
  text-decoration: underline;
}

html body #view-detail .detail-empty {
  margin: 0 !important;
  padding: 14px 0;
  border: 0 !important;
  background: none !important;
  color: var(--detail-dim) !important;
  font-size: 13px !important;
  line-height: 1.5;
}

html body #view-detail .detail-hint {
  color: var(--detail-dim);
  font-size: 11.5px;
  line-height: 1.4;
}

html body #view-detail .detail-inline-link {
  color: var(--detail-accent);
  font-size: 12.5px;
  text-decoration: none;
}

html body #view-detail .detail-inline-link:hover {
  text-decoration: underline;
}

html body #view-detail .detail-tag {
  height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--detail-border-strong);
  border-radius: 7px;
  background: rgba(255, 255, 255, .03);
  color: #d6cfd0;
  font-size: 11.5px;
}

html body #view-detail .detail-tag.is-genre {
  border-color: var(--detail-accent-line);
  background: var(--detail-accent-soft);
  color: #ff6f66;
}

html body #view-detail .detail-chip-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

html body #view-detail .detail-chip {
  height: 28px;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--detail-border-strong);
  border-radius: 8px;
  background: transparent;
  color: #cac3c5;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  text-transform: none;
  cursor: pointer;
}

html body #view-detail .detail-chip b {
  color: #fff;
  font-weight: 600;
}

html body #view-detail .detail-chip.is-active {
  border-color: transparent;
  background: var(--detail-accent-fill);
  color: #fff;
}

html body #view-detail .detail-chip.is-static {
  cursor: default;
}

html body #view-detail .detail-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
}

html body #view-detail .detail-dot.is-watched {
  background: #57c98b;
}

html body #view-detail .detail-dot.is-locked {
  background: rgba(255, 255, 255, .16);
}

html body #view-detail .detail-primary-action {
  height: 38px;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: var(--detail-radius-sm) !important;
  background: var(--detail-accent-fill) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

html body #view-detail .detail-primary-action:hover {
  background: color-mix(in srgb, var(--detail-accent-fill) 84%, #fff) !important;
}

html body #view-detail .detail-secondary-action {
  height: 38px;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px !important;
  border: 1px solid var(--detail-border-strong) !important;
  border-radius: var(--detail-radius-sm) !important;
  background: transparent !important;
  color: var(--detail-text) !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  font-size: 14.5px !important;
  font-weight: 550 !important;
  text-transform: none !important;
}

html body #view-detail .detail-secondary-action:hover {
  border-color: var(--detail-accent-line) !important;
}

html body #view-detail .detail-seo-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 2px 4px 6px;
}

html body #view-detail .detail-seo-links a {
  color: var(--detail-dim);
  font-size: 12.5px;
  text-decoration: none;
}

html body #view-detail .detail-seo-links a:hover {
  color: var(--detail-accent);
}

/* Tab 1: Übersicht --------------------------------------------------------- */

html body #view-detail .detail-grid--overview {
  grid-template-columns: minmax(0, 555fr) minmax(0, 794fr);
}

html body #view-detail .detail-plot-card {
  gap: 8px;
  padding: 14px 17px 7px !important;
}

html body #view-detail .detail-plot-card p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  margin: 0 !important;
  max-width: none !important;
  overflow: hidden;
  color: #cfc8ca !important;
  font-size: 13px !important;
  line-height: 16.4px !important;
}

html body #view-detail .detail-plot-card p.is-expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
}

html body #view-detail .detail-plot-source {
  color: var(--detail-dim);
  font-size: 11px;
}

html body #view-detail .detail-plot-card .is-hidden {
  display: none !important;
}

/* Provider-Karte: die bestehende Band-Struktur wird in die Card eingepasst,
   damit Datenquelle und Rendering unverändert bleiben. */
html body #view-detail .detail-provider-card {
  padding: 0 !important;
  gap: 0;
}

html body #view-detail .detail-card.detail-provider-card .streaming-provider-band {
  margin: 0 !important;
  padding: var(--detail-pad) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html body #view-detail .detail-provider-card .band-head {
  align-items: center;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: 0 !important;
}

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

html body #view-detail .detail-provider-card .band-head h2 {
  margin: 0 !important;
  color: var(--detail-text) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -.012em !important;
  text-transform: none !important;
}

html body #view-detail .detail-provider-card .streaming-country-chip {
  height: 24px;
  display: inline-flex !important;
  align-items: center;
  padding: 0 9px !important;
  border: 1px solid var(--detail-border-strong) !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--detail-muted) !important;
  font-size: 11.5px !important;
}

html body #view-detail .detail-provider-card .streaming-provider-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important;
  gap: 14px !important;
}

html body #view-detail .detail-provider-card .streaming-provider-card {
  min-height: 0 !important;
  display: grid !important;
  place-items: center;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html body #view-detail .detail-provider-card .streaming-provider-card img {
  width: 54px !important;
  height: 54px !important;
  border-radius: 14px !important;
  object-fit: cover !important;
}

html body #view-detail .detail-provider-card .streaming-provider-card strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--detail-muted) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-detail .detail-card.detail-provider-card .streaming-provider-foot {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

html body #view-detail .detail-card.detail-provider-card .streaming-provider-foot strong {
  min-width: 0;
  overflow: visible;
  color: var(--detail-dim) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: normal;
}

html body #view-detail .detail-provider-card .streaming-provider-link {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--detail-accent) !important;
  font-size: 12.5px !important;
}

html body #view-detail .detail-provider-card :where(.streaming-provider-loading, .streaming-provider-empty) {
  gap: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

html body #view-detail .detail-provider-card :where(.streaming-provider-loading, .streaming-provider-empty) strong {
  color: var(--detail-text) !important;
  font-size: 13.5px !important;
}

html body #view-detail .detail-provider-card :where(.streaming-provider-loading, .streaming-provider-empty) :where(span, p) {
  color: var(--detail-dim) !important;
  font-size: 12px !important;
}

/* Fortschritt / Episoden --------------------------------------------------- */

html body #view-detail .detail-progress {
  display: flex;
  align-items: center;
  gap: 20px;
}

html body #view-detail .detail-progress-ring {
  --detail-progress: 0;
  position: relative;
  width: 67px;
  height: 67px;
  flex: 0 0 67px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--detail-accent) calc(var(--detail-progress) * 1%), rgba(255, 255, 255, .07) 0);
}

html body #view-detail .detail-progress-ring::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--detail-surface);
}

html body #view-detail .detail-progress-ring-value {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 17px;
  font-weight: 650;
}

html body #view-detail .detail-progress-ring-value i {
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  opacity: .8;
}

html body #view-detail .detail-progress.is-large .detail-progress-ring {
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
}

html body #view-detail .detail-progress.is-large .detail-progress-ring::after {
  inset: 9px;
}

html body #view-detail .detail-progress.is-large .detail-progress-ring-value {
  font-size: 21px;
}

html body #view-detail .detail-progress-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

html body #view-detail .detail-progress-copy strong {
  color: var(--detail-text);
  font-size: 16px;
  font-weight: 600;
}

html body #view-detail .detail-progress-copy .detail-progress-headline {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
}

html body #view-detail .detail-progress-copy small {
  color: var(--detail-muted);
  font-size: 12.5px;
}

html body #view-detail .detail-progress-track {
  height: 6px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

html body #view-detail .detail-progress-track b {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8e2a32, var(--detail-accent));
}

html body #view-detail .detail-progress-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

html body #view-detail .detail-progress-mark {
  height: 28px;
  min-height: 0;
  padding: 0 13px;
  border: 1px solid var(--detail-accent-line);
  border-radius: 8px;
  background: var(--detail-accent-soft);
  color: #ff6f66;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 550;
  text-transform: none;
  cursor: pointer;
}

html body #view-detail .detail-progress-mark:hover:not([disabled]) {
  background: rgba(232, 67, 63, .22);
}

html body #view-detail .detail-progress-mark[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

/* Episodenliste / -tabelle ------------------------------------------------- */

html body #view-detail .detail-eplist {
  display: grid;
  gap: 1px;
  margin: 0;
}

html body #view-detail .detail-eprow {
  display: grid;
  grid-template-columns: 26px 64px minmax(0, 1fr) 66px 92px 74px 34px;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 4px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .045);
}

html body #view-detail .detail-eplist.is-compact .detail-eprow {
  grid-template-columns: 20px 52px minmax(0, 1fr) 60px 84px 30px;
  gap: 10px;
  min-height: 36px;
}

html body #view-detail .detail-eprow:last-child {
  border-bottom: 0;
}

html body #view-detail .detail-eprow-num {
  color: var(--detail-muted);
  font-size: 13px;
  text-align: center;
}

html body #view-detail .detail-eprow-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: #241a1c;
}

html body #view-detail .detail-eprow-thumb img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  object-fit: cover !important;
}

html body #view-detail .detail-eprow-thumb-fallback {
  color: rgba(255, 255, 255, .34);
  font-size: 11px;
}

html body #view-detail .detail-eprow-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  overflow: hidden;
  color: var(--detail-text);
  font-size: 13.5px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-detail .detail-eprow-type {
  height: 18px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .07);
  color: #c8c1c3;
  font-size: 10.5px;
  font-weight: 600;
}

html body #view-detail .detail-eprow-type.episode-filler {
  background: rgba(255, 189, 56, .16);
  color: #ffc960;
}

html body #view-detail .detail-eprow-type.episode-mixed {
  background: rgba(91, 156, 246, .16);
  color: #8fc0ff;
}

html body #view-detail :where(.detail-eprow-duration, .detail-eprow-aired) {
  overflow: hidden;
  color: var(--detail-muted);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-detail .detail-eprow-link a {
  color: var(--detail-accent);
  font-size: 12px;
  text-decoration: none;
}

html body #view-detail .detail-eprow-link a:hover {
  text-decoration: underline;
}

/* Watched-Toggle: nutzt weiterhin .episode-btn[data-episode] und damit die
   bestehende toggleEpisode-Logik samt Filler-Klassen. */
html body #view-detail .detail-eprow-status.episode-btn {
  width: 26px !important;
  height: 26px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: rgba(255, 255, 255, .28) !important;
  box-shadow: none !important;
  font-size: 0 !important;
  cursor: pointer;
}

html body #view-detail .detail-eprow-status.episode-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body #view-detail .detail-eprow-status.episode-btn svg path {
  opacity: 0;
}

html body #view-detail .detail-eprow-status.episode-btn:hover:not([disabled]) {
  color: rgba(255, 255, 255, .55) !important;
}

html body #view-detail .detail-eprow-status.episode-btn.watched {
  color: var(--detail-accent) !important;
}

html body #view-detail .detail-eprow-status.episode-btn.watched svg circle {
  fill: var(--detail-accent);
  stroke: var(--detail-accent);
}

html body #view-detail .detail-eprow-status.episode-btn.watched svg path {
  opacity: 1;
  stroke: #fff;
  stroke-width: 2.1;
}

html body #view-detail .detail-eprow-status.episode-btn.future,
html body #view-detail .detail-eprow-status.episode-btn[disabled] {
  color: rgba(255, 255, 255, .12) !important;
  cursor: not-allowed;
}

html body #view-detail .detail-eprow.is-watched .detail-eprow-title {
  color: #fff;
}

html body #view-detail .detail-eprow.is-future {
  opacity: .55;
}

/* Tab 2: Folgen ------------------------------------------------------------ */

html body #view-detail .detail-grid--episodes {
  grid-template-columns: minmax(0, 860fr) minmax(0, 492fr);
  align-items: stretch;
  row-gap: 8px;
}

/* Obere Reihe: eine Flaeche, innen zweigeteilt wie im Board (570 / Rest). */
html body #view-detail .detail-episodes-top {
  grid-column: 1;
  min-height: 199px;
  padding: 15px 17px 17px !important;
}

html body #view-detail .detail-episodes-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 570fr) minmax(0, 273fr);
  align-items: start;
  gap: 24px;
}

html body #view-detail .detail-episodes-block {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

html body #view-detail .detail-episodes-overview {
  grid-column: 2;
  min-height: 199px;
  padding: 15px 17px 17px !important;
}

html body #view-detail .detail-episodes-table {
  grid-column: 1 / -1;
}

html body #view-detail .detail-quick-actions {
  display: grid;
  gap: 8px;
}

html body #view-detail .detail-quick-action {
  min-height: 34px;
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 0 13px !important;
  border: 1px solid var(--detail-border-strong) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #d8d1d3 !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 550 !important;
  text-align: left;
  text-transform: none !important;
  cursor: pointer;
}

html body #view-detail .detail-quick-action.is-primary {
  border-color: var(--detail-accent-line) !important;
  background: var(--detail-accent-soft) !important;
  color: #ff6f66 !important;
}

html body #view-detail .detail-quick-action[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

html body #view-detail .detail-quick-until {
  display: grid;
  gap: 6px;
  margin: 4px 0 0;
  color: var(--detail-dim);
  font-size: 11.5px;
}

html body #view-detail .detail-quick-until input {
  width: 108px;
  height: 32px;
  min-height: 0;
  padding: 0 10px;
  border: 1px solid var(--detail-border-strong);
  border-radius: 8px;
  background: #191315;
  color: var(--detail-text);
  font-size: 13px;
}

html body #view-detail .detail-overview-rows {
  display: grid;
  gap: 12px;
}

html body #view-detail .detail-overview-row {
  display: grid;
  gap: 2px;
  padding-left: 26px;
  position: relative;
}

html body #view-detail .detail-overview-row.detail-countdown {
  /* material-redesign-v2-4-194.css setzt hier display:flex und padding:0 mit
     !important. Dadurch verlor die Zeile ihre 26px-Markerspalte (der Kreis aus
     ::before lag unter dem Text) und Label und Wert standen nebeneinander
     statt untereinander wie in den Nachbarzeilen. */
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  padding-left: 26px !important;
  gap: 2px !important;
}

html body #view-detail .detail-overview-row.detail-countdown strong {
  font-size: 13.5px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

html body #view-detail .detail-overview-row::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 1px;
  width: 12px;
  height: 12px;
  border: 1.5px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
}

html body #view-detail .detail-overview-label {
  color: var(--detail-dim);
  font-size: 11.5px;
}

html body #view-detail .detail-overview-row strong {
  color: var(--detail-text);
  font-size: 13.5px;
  font-weight: 600;
}

html body #view-detail .detail-overview-row small {
  color: var(--detail-dim);
  font-size: 11.5px;
}

html body #view-detail .detail-eptable-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

html body #view-detail .detail-eptable-tools {
  display: flex;
  align-items: center;
  gap: 14px;
}

html body #view-detail .detail-eptable-tools .episode-type-legend {
  display: flex !important;
  align-items: center;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

html body #view-detail .detail-eptable-tools .episode-type-key {
  display: inline-flex !important;
  align-items: center;
  gap: 6px !important;
  color: var(--detail-dim) !important;
  font-size: 11px !important;
}

html body #view-detail .detail-eptable-tools .episode-type-key i {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
}

html body #view-detail .detail-sort-toggle {
  height: 28px;
  min-height: 0;
  padding: 0 12px;
  border: 1px solid var(--detail-border-strong);
  border-radius: 8px;
  background: transparent;
  color: #cac3c5;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 550;
  text-transform: none;
  cursor: pointer;
}

html body #view-detail .detail-eptable-head {
  display: grid;
  grid-template-columns: 26px 64px minmax(0, 1fr) 66px 92px 74px 34px;
  gap: 12px;
  padding: 0 2px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: var(--detail-dim);
  font-size: 11.5px;
}

html body #view-detail .detail-eptable-head span:first-child {
  text-align: center;
}

html body #view-detail .detail-eplist.has-no-dates .detail-eprow,
html body #view-detail .detail-eptable-head.has-no-dates {
  grid-template-columns: 26px 64px minmax(0, 1fr) 66px 74px 34px;
}

html body #view-detail .detail-eplist.has-no-streams .detail-eprow,
html body #view-detail .detail-eptable-head.has-no-streams {
  grid-template-columns: 26px 64px minmax(0, 1fr) 66px 92px 34px;
}

html body #view-detail .detail-eplist.has-no-dates.has-no-streams .detail-eprow,
html body #view-detail .detail-eptable-head.has-no-dates.has-no-streams {
  grid-template-columns: 26px 64px minmax(0, 1fr) 66px 34px;
}

html body #view-detail .detail-eplist.has-no-dates .detail-eprow-aired {
  display: none;
}

html body #view-detail .detail-eplist.has-no-streams .detail-eprow-link {
  display: none;
}

/* Legende kompakt, Sortierung bricht nicht um. */
html body #view-detail .detail-eptable-tools .episode-type-key b {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body #view-detail .detail-sort-toggle {
  white-space: nowrap;
}
/* Tab 3: Besetzung --------------------------------------------------------- */

html body #view-detail .detail-grid--cast {
  grid-template-columns: minmax(0, 884fr) minmax(0, 465fr);
}

html body #view-detail .detail-cast-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

html body #view-detail .detail-cast-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--detail-border);
  border-radius: var(--detail-radius-sm);
  background: var(--detail-surface-soft);
}

html body #view-detail .detail-cast-portrait {
  width: 72px;
  height: 100%;
  min-height: 69px;
  display: block;
  overflow: hidden;
  background: #241a1c;
}

html body #view-detail .detail-cast-portrait img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center 18% !important;
}

html body #view-detail .detail-cast-copy {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 13px 14px;
}

html body #view-detail .detail-cast-copy strong {
  overflow: hidden;
  color: var(--detail-text);
  font-size: 14.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-detail .detail-cast-role {
  color: var(--detail-accent) !important;
  font-size: 11.5px !important;
  font-weight: 550;
}

html body #view-detail .detail-cast-actor {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 9px;
}

html body #view-detail .detail-cast-actor-avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  overflow: hidden;
  border-radius: 50%;
  background: #2a1f21;
}

html body #view-detail .detail-cast-actor-avatar img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

html body #view-detail .detail-cast-actor-copy {
  min-width: 0;
  display: grid;
}

html body #view-detail .detail-cast-actor-copy small {
  color: var(--detail-dim);
  font-size: 10.5px;
}

html body #view-detail .detail-cast-actor-copy b {
  overflow: hidden;
  color: #ded7d8;
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-detail .detail-support-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

html body #view-detail .detail-cast-card.is-compact {
  grid-template-columns: 72px minmax(0, 1fr);
}

html body #view-detail .detail-cast-card.is-compact .detail-cast-portrait {
  width: 72px;
  min-height: 78px;
}

html body #view-detail .detail-cast-card.is-compact .detail-cast-copy {
  padding: 10px 11px;
}

html body #view-detail .detail-cast-card.is-compact .detail-cast-copy strong {
  font-size: 13px;
}

html body #view-detail .detail-cast-card.is-compact .detail-cast-actor {
  margin-top: 7px;
  gap: 7px;
}

html body #view-detail .detail-cast-card.is-compact .detail-cast-actor-avatar {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

html body #view-detail .detail-staff-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

html body #view-detail .detail-staff-grid.is-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html body #view-detail .detail-staff-tile {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 11px;
  border: 1px solid var(--detail-border);
  border-radius: var(--detail-radius-sm);
  background: var(--detail-surface-soft);
}

html body #view-detail .detail-staff-avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  overflow: hidden;
  border-radius: 9px;
  background: #2a1f21;
}

html body #view-detail .detail-staff-avatar img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 9px !important;
  object-fit: cover !important;
}

html body #view-detail .detail-staff-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

html body #view-detail .detail-staff-copy small {
  overflow: hidden;
  color: var(--detail-accent);
  font-size: 11px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-detail .detail-staff-copy strong {
  overflow: hidden;
  color: var(--detail-text);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-detail .detail-studio {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

html body #view-detail .detail-studio-mark {
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  display: grid;
  place-items: center;
  border: 1px solid var(--detail-accent-line);
  border-radius: 12px;
  background: var(--detail-accent-soft);
  color: #ff6f66;
  font-size: 26px;
  font-weight: 700;
}

html body #view-detail .detail-studio-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

html body #view-detail .detail-studio-copy strong {
  color: var(--detail-text);
  font-size: 15px;
  font-weight: 650;
}

html body #view-detail .detail-studio-copy small {
  color: var(--detail-muted);
  font-size: 12.5px;
}

html body #view-detail .detail-relations {
  display: grid;
  gap: 2px;
}

html body #view-detail .detail-relation-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--detail-radius-sm);
  color: inherit;
  text-decoration: none;
}

html body #view-detail .detail-relation-row:hover {
  border-color: var(--detail-accent-line);
  background: rgba(255, 255, 255, .03);
}

html body #view-detail .detail-relation-thumb {
  width: 34px;
  height: 46px;
  overflow: hidden;
  border-radius: 7px;
  background: #241a1c;
}

html body #view-detail .detail-relation-thumb img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  object-fit: cover !important;
}

html body #view-detail .detail-relation-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

html body #view-detail .detail-relation-copy strong {
  overflow: hidden;
  color: var(--detail-text);
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-detail .detail-relation-copy small {
  color: var(--detail-muted);
  font-size: 12px;
}

/* Tab 4: Rezensionen ------------------------------------------------------- */

html body #view-detail .detail-grid--reviews {
  grid-template-columns: minmax(0, 841fr) minmax(0, 508fr);
}

html body #view-detail .detail-review-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 210px);
  align-items: center;
  gap: 24px;
}

html body #view-detail .detail-score-value {
  display: grid;
  gap: 3px;
}

html body #view-detail .detail-score-value strong {
  color: #fff;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}

html body #view-detail .detail-score-value.is-large strong {
  font-size: 40px;
}

html body #view-detail .detail-score-value small {
  color: var(--detail-muted);
  font-size: 12.5px;
}

html body #view-detail .detail-score-count-line {
  color: var(--detail-dim) !important;
  font-size: 12px !important;
}

html body #view-detail .detail-score-star {
  color: var(--detail-rating);
  font-size: 26px;
  line-height: 1;
}

html body #view-detail .detail-score-value.is-large .detail-score-star {
  font-size: 30px;
}

/* Die AniList-Sterneverteilung (5..1) ist entfernt; an ihrer Stelle steht die
   AnimeRadar-Bewertung (.detail-ar-rating). */

html body #view-detail .detail-score-label {
  color: var(--detail-dim);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
}

html body #view-detail .detail-review-actions {
  display: grid;
  gap: 9px;
}

html body #view-detail .detail-rating-card .side-editor {
  min-width: 0;
  position: static !important;
  top: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html body #view-detail .detail-rating-card .rating-editor {
  display: grid !important;
  gap: 14px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html body #view-detail .detail-rating-card .rating-editor-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

html body #view-detail .detail-rating-card .rating-editor-head small {
  display: block;
  color: var(--detail-dim) !important;
  font-size: 11.5px !important;
}

html body #view-detail .detail-rating-card .rating-editor-head strong {
  color: var(--detail-text) !important;
  font-size: 20px !important;
  font-weight: 650 !important;
}

html body #view-detail .detail-rating-card .rating-editor-head .small-btn {
  min-height: 30px !important;
  padding: 0 12px !important;
  border: 1px solid var(--detail-border-strong) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #d8d1d3 !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
}

html body #view-detail .detail-rating-card .rating-stars-wrap {
  display: grid !important;
  gap: 10px !important;
  padding: 0 !important;
}

html body #view-detail .detail-rating-card .rating-editor-value {
  color: var(--detail-muted) !important;
  font-size: 12.5px !important;
}

html body #view-detail .detail-rating-card .rating-clear {
  justify-self: start;
  color: var(--detail-accent) !important;
  font-size: 12.5px !important;
}

html body #view-detail .detail-rating-card .rating-clear.is-hidden {
  display: none !important;
}

/* Kommentare: bestehende Struktur, in die Card-Familie eingepasst. */
html body #view-detail .detail-discussion-card {
  max-height: 720px;
}

html body #view-detail .detail-discussion-card .comment-band {
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html body #view-detail .detail-discussion-card .comments-body {
  display: grid;
  gap: 14px;
}

html body #view-detail .detail-discussion-card .comments-body.is-collapsed {
  display: none;
}

html body #view-detail .detail-discussion-card .comment-composer textarea {
  width: 100%;
  min-height: 84px;
  padding: 11px 12px !important;
  border: 1px solid var(--detail-border-strong) !important;
  border-radius: var(--detail-radius-sm) !important;
  background: #191315 !important;
  color: var(--detail-text) !important;
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  resize: vertical;
}

html body #view-detail .detail-discussion-card .comment-actions {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px !important;
}

html body #view-detail .detail-discussion-card .comments-list {
  display: grid !important;
  gap: 10px !important;
  max-height: 470px;
  overflow-y: auto;
  scrollbar-width: thin;
}

html body #view-detail .detail-discussion-card .comment-card {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 14px !important;
  border: 1px solid var(--detail-border) !important;
  border-radius: var(--detail-radius-sm) !important;
  background: var(--detail-surface-soft) !important;
  box-shadow: none !important;
}

html body #view-detail .detail-discussion-card .comment-card .comment-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

html body #view-detail .detail-discussion-card .comment-card strong {
  color: var(--detail-text) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
}

html body #view-detail .detail-discussion-card .comment-card :where(small, .release-meta, time) {
  color: var(--detail-dim) !important;
  font-size: 11.5px !important;
}

html body #view-detail .detail-discussion-card .comment-card p {
  margin: 0 !important;
  color: #cfc8ca !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

html body #view-detail .detail-discussion-card .comment-card .text-action {
  color: var(--detail-dim) !important;
  font-size: 11.5px !important;
}

/* Tab 5: Empfehlungen ------------------------------------------------------ */

html body #view-detail .detail-grid--recs-top {
  grid-template-columns: minmax(0, 279fr) minmax(0, 1067fr);
}

html body #view-detail .detail-grid--recs-bottom {
  grid-template-columns: minmax(0, 618fr) minmax(0, 729fr);
}

html body #view-detail .detail-reasons {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html body #view-detail .detail-reasons li {
  display: grid;
  gap: 3px;
  padding-left: 26px;
  position: relative;
}

html body #view-detail .detail-reasons li::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1.6px solid var(--detail-accent-line);
  border-radius: 5px;
  background: var(--detail-accent-soft);
}

html body #view-detail .detail-reasons strong {
  color: var(--detail-text);
  font-size: 13px;
  font-weight: 600;
}

html body #view-detail .detail-reasons span {
  color: var(--detail-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

html body #view-detail .detail-rec-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 13px;
}

html body #view-detail .detail-rec-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--detail-border);
  border-radius: var(--detail-radius-sm);
  background: var(--detail-surface-soft);
}

html body #view-detail .detail-rec-poster {
  position: relative;
  display: block;
  aspect-ratio: 182 / 148;
  overflow: hidden;
  background: #241a1c;
}

html body #view-detail .detail-rec-poster img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  object-fit: cover !important;
}

html body #view-detail .detail-rec-votes {
  position: absolute;
  top: 8px;
  left: 8px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 7px;
  background: rgba(12, 8, 9, .78);
  color: #ff8079;
  font-size: 11.5px;
  font-weight: 600;
}

html body #view-detail .detail-rec-bookmark {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  min-height: 0 !important;
  display: grid !important;
  place-items: center;
  padding: 5px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: rgba(12, 8, 9, .62) !important;
  color: #f2ecec !important;
  box-shadow: none !important;
}

html body #view-detail .detail-rec-bookmark svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}

html body #view-detail .detail-rec-bookmark.is-saved {
  color: var(--detail-accent) !important;
}

html body #view-detail .detail-rec-bookmark.is-saved svg {
  fill: currentColor;
}

html body #view-detail .detail-rec-copy {
  display: grid;
  gap: 5px;
  padding: 12px 13px 13px;
}

html body #view-detail .detail-rec-title {
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

html body #view-detail .detail-rec-title strong {
  display: block;
  overflow: hidden;
  color: var(--detail-text);
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-detail .detail-rec-copy small {
  color: var(--detail-muted);
  font-size: 12px;
}

html body #view-detail .detail-rec-score {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #e7e0e1 !important;
}

html body #view-detail .detail-rec-score i {
  color: var(--detail-rating);
  font-style: normal;
}

html body #view-detail .detail-rec-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

html body #view-detail .detail-rec-genres span {
  height: 21px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--detail-border-strong);
  border-radius: 6px;
  color: #bfb8ba;
  font-size: 10.5px;
}

html body #view-detail .detail-rec-action {
  min-height: 32px;
  margin-top: 6px;
  padding: 0 10px !important;
  border: 1px solid var(--detail-accent-line) !important;
  border-radius: 8px !important;
  background: var(--detail-accent-soft) !important;
  color: #ff6f66 !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  cursor: pointer;
}

html body #view-detail .detail-similar-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  justify-content: start;
  gap: 13px;
}

/* Board: fuenf gleiche Spalten mit Gap 30, Poster 125x168. */
html body #view-detail .detail-similar-rail {
  grid-auto-flow: row;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 30px;
}

html body #view-detail .detail-similar-card {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}

html body #view-detail .detail-similar-poster {
  display: block;
  aspect-ratio: 16 / 21;
  overflow: hidden;
  border-radius: var(--detail-radius-sm);
  background: #241a1c;
}

html body #view-detail .detail-similar-poster img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  object-fit: cover !important;
}

html body #view-detail .detail-similar-card strong {
  overflow: hidden;
  color: var(--detail-text);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-detail .detail-similar-card small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--detail-muted);
  font-size: 12px;
  line-height: 1.25;
}

html body #view-detail .detail-similar-card small i {
  color: var(--detail-rating);
  font-style: normal;
}

/* Tab 6: Details ----------------------------------------------------------- */

html body #view-detail .detail-grid--details {
  grid-template-columns: minmax(0, 852fr) minmax(0, 497fr);
}

html body #view-detail .detail-grid--details-bottom {
  grid-template-columns: minmax(0, 408fr) minmax(0, 433fr);
}

html body #view-detail .detail-info-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 34px;
}

html body #view-detail .detail-info-list {
  margin: 0;
  display: grid;
  align-content: start;
  gap: 0;
}

html body #view-detail .detail-info-row {
  display: grid;
  grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
  align-items: baseline;
  gap: 14px;
  padding: 4px 0;
}

html body #view-detail .detail-info-row dt {
  color: var(--detail-dim);
  font-size: 12.5px;
}

html body #view-detail .detail-info-row dd {
  margin: 0;
  color: var(--detail-text);
  font-size: 13px;
  font-weight: 500;
}

html body #view-detail .detail-chip-cell {
  display: flex !important;
  flex-wrap: wrap;
  gap: 7px;
}

html body #view-detail .detail-stat-rows,
html body #view-detail .detail-link-rows {
  display: grid;
  gap: 2px;
}

html body #view-detail .detail-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0;
}

html body #view-detail .detail-stat-row span {
  color: var(--detail-muted);
  font-size: 13px;
}

html body #view-detail .detail-stat-row strong {
  color: var(--detail-text);
  font-size: 13.5px;
  font-weight: 650;
}

html body #view-detail .detail-stat-score {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

html body #view-detail .detail-stat-score i {
  color: var(--detail-rating);
  font-style: normal;
}

html body #view-detail .detail-link-row {
  display: grid;
  grid-template-columns: minmax(0, 172px) minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  padding: 4px 6px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}

html body #view-detail .detail-link-row:hover {
  background: rgba(255, 255, 255, .04);
}

html body #view-detail .detail-link-label {
  overflow: hidden;
  color: var(--detail-muted);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-detail .detail-link-value {
  overflow: hidden;
  color: var(--detail-text);
  font-size: 12.5px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-detail .detail-link-icon {
  color: var(--detail-dim);
  font-size: 12px;
  text-align: right;
}

html body #view-detail .detail-provider-mirror {
  min-height: 78px;
}

html body #view-detail .detail-provider-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

html body #view-detail .detail-provider-tile {
  display: grid;
  place-items: center;
  gap: 7px;
  min-width: 62px;
}

html body #view-detail .detail-provider-tile img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
}

html body #view-detail .detail-provider-tile small {
  max-width: 74px;
  overflow: hidden;
  color: var(--detail-muted);
  font-size: 11.5px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ladezustand -------------------------------------------------------------- */

html body #view-detail .detail-skeleton {
  display: grid !important;
  gap: var(--detail-gap) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

html body #view-detail .detail-skeleton > div:first-child {
  height: 307px;
  border-radius: var(--detail-radius);
  background: linear-gradient(120deg, #1b1416, #120d0f);
}

html body #view-detail .detail-skeleton > div:last-child {
  display: grid;
  gap: 12px;
  min-height: 220px;
  padding: var(--detail-pad);
  border: 1px solid var(--detail-border);
  border-radius: var(--detail-radius);
  background: var(--detail-surface);
}

html body #view-detail .detail-skeleton > div:last-child > * {
  height: 14px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .05);
}

html body #view-detail .detail-skeleton > div:last-child > strong {
  width: 42%;
  height: 26px;
}

html body #view-detail .detail-skeleton > div:last-child > p {
  width: 72%;
}

/* Altregeln, die die neue Geometrie sonst überschreiben würden --------------- */

html body #view-detail .detail-body,
html body #view-detail .detail-copy,
html body #view-detail .seo-discovery-band,
html body #view-detail .detail-facts-panel,
html body #view-detail .detail-meta-grid--hero,
html body #view-detail .detail-rating-board,
html body #view-detail .detail-release-box {
  display: none !important;
}

html body #view-detail .detail-card .content-band {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html body #view-detail #mobileRatingSlot {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}


/* ID-Selektoren der Altdateien neutralisieren (Handlung war früher eine
   zweiteilige Card mit eigener Border). */
html body #view-detail #detailDescription {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: #cfc8ca !important;
  font-size: 13px !important;
  line-height: 16.4px !important;
}

html body #view-detail #detailDescription.is-expanded {
  display: block !important;
  overflow: visible !important;
}

html body #view-detail #detailDescriptionSource {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--detail-dim) !important;
  font-size: 11px !important;
}

html body #view-detail #detailDescriptionSource.is-hidden {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Board-Feinabstimmung. Diese Regeln stehen bewusst am Dateiende: sie schlagen
   die Grundwerte weiter oben und sind pro Tab nach Golden-Master-Mass gesetzt.
   -------------------------------------------------------------------------- */

/* Bewertung (Uebersicht, Board 796x122): Head und Wert links, fuenf Balken
   daneben (Label x 1096, Track 232 breit), rechts der freie Raum fuer die
   AnimeRadar-Bewertung. */
html body #view-detail .detail-score-card {
  padding: 16px 17px 19px !important;
}

html body #view-detail .detail-score-card .detail-score-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}

html body #view-detail .detail-score-card .detail-score-lead {
  display: grid;
  gap: 14px;
}

html body #view-detail .detail-score-main {
  display: flex;
  align-items: center;
  gap: 9px;
}

html body #view-detail .detail-score-card .detail-score-value strong {
  font-size: 28px;
  line-height: 1;
}

html body #view-detail .detail-score-card .detail-score-star {
  font-size: 22px;
}

/* Balkenzeilen (Uebersicht und Rezensionen) auf Board-Pitch 15-16. */
/* AnimeRadar-Bewertung: zweites, eigenstaendiges Bewertungssystem neben der
   externen AniList-Wertung. Speist sich nur aus public.anime_ratings. */
html body #view-detail .detail-ar-rating {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--detail-border);
  border-radius: var(--detail-radius-sm);
  background: rgba(255, 255, 255, .022);
}

html body #view-detail .detail-ar-label {
  color: var(--detail-dim);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
}

html body #view-detail .detail-ar-stars {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
  line-height: 1;
}

html body #view-detail .detail-ar-star {
  position: relative;
  color: rgba(255, 255, 255, .18);
  font-size: 17px;
  font-style: normal;
  line-height: 1;
}

html body #view-detail .detail-ar-star.is-full {
  color: var(--detail-rating);
}

html body #view-detail .detail-ar-star.is-half {
  color: rgba(255, 255, 255, .18);
}

html body #view-detail .detail-ar-star.is-half::before {
  content: "★";
  position: absolute;
  inset: 0;
  width: 50%;
  overflow: hidden;
  color: var(--detail-rating);
}

html body #view-detail .detail-ar-rating strong {
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}

html body #view-detail .detail-ar-rating small {
  color: var(--detail-muted);
  font-size: 12.5px;
}

html body #view-detail .detail-ar-rating.is-empty strong {
  color: var(--detail-dim);
  font-size: 20px;
}

html body #view-detail .detail-review-summary .detail-ar-rating {
  align-self: center;
}

/* Trailer: echte Trailer-Card im Card-System der Detailansicht. */
html body #view-detail .detail-trailer-card {
  gap: 12px;
}

html body #view-detail .detail-trailer-card .trailer-content {
  margin-top: 0 !important;
  overflow: hidden;
  border-radius: var(--detail-radius-sm);
}

html body #view-detail .detail-trailer-card .trailer-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--detail-border) !important;
  border-radius: var(--detail-radius-sm);
  background: #000 !important;
  box-shadow: none !important;
}

html body #view-detail .detail-trailer-card .trailer-frame iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

html body #view-detail .detail-trailer-card .trailer-help-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 10px;
}

html body #view-detail .detail-trailer-card .trailer-source {
  margin: 0 !important;
  color: var(--detail-dim) !important;
  font-size: 11.5px !important;
}

html body #view-detail .detail-trailer-card .trailer-external-fallback {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--detail-accent) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-decoration: none;
}

html body #view-detail .detail-trailer-card .trailer-external-fallback:hover {
  background: none !important;
  color: #ff8a83 !important;
  text-decoration: underline;
}

html body #view-detail .detail-trailer-card[hidden] {
  display: none !important;
}

/* GAP-002: Zwei-Klick-Trailer. Vor der Freigabe zeigt der Rahmen nur das
   AniList-Bild und einen Knopf; der YouTube-Player entsteht erst nach dem Klick. */
html body #view-detail .detail-trailer-card .trailer-frame.trailer-consent {
  position: relative;
}

html body #view-detail .detail-trailer-card .trailer-consent-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .34;
  display: block;
}

html body #view-detail .detail-trailer-card .trailer-consent-button {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  margin: 0;
  padding: 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(0, 0, 0, .38) !important;
  box-shadow: none !important;
  color: #fff !important;
  text-align: center;
  cursor: pointer;
}

html body #view-detail .detail-trailer-card .trailer-consent-button:hover {
  background: rgba(0, 0, 0, .22) !important;
}

html body #view-detail .detail-trailer-card .trailer-consent-button:focus-visible {
  outline: 2px solid var(--detail-accent);
  outline-offset: -4px;
}

html body #view-detail .detail-trailer-card .trailer-consent-play {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--detail-accent);
  color: #fff;
}

html body #view-detail .detail-trailer-card .trailer-consent-play svg {
  width: 24px;
  height: 24px;
  margin-left: 3px;
  fill: currentColor;
}

html body #view-detail .detail-trailer-card .trailer-consent-label {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

html body #view-detail .detail-trailer-card .trailer-consent-note {
  max-width: 40ch;
  color: rgba(255, 255, 255, .74);
  font-size: 12px;
  line-height: 1.4;
}

/* Sterne-Auswahl: exakte Trefferflaechen.
   Ursache des unpraezisen Hovers: .star-hit-grid nutzte
   "repeat(10, minmax(15px, 1fr))". Bei 23px Schriftgroesse ist das Widget nur
   101px breit, das Raster aber 150px - die Trefferzellen lagen um bis zu 49px
   neben den sichtbaren Sternen. Ohne Mindestbreite deckt jede der zehn Zellen
   exakt einen halben Stern ab. */
html body #view-detail .detail-rating-card .star-rating {
  letter-spacing: 0 !important;
}

html body #view-detail .detail-rating-card .star-hit-grid {
  grid-template-columns: repeat(10, 1fr);
}

html body #view-detail .detail-rating-card .star-hit {
  min-width: 0;
}

/* Der Hover skalierte das Widget (scale 1.03) - dadurch wanderten die Sterne
   unter dem Cursor und das Highlight sprang. */
html body #view-detail .detail-rating-card .star-rating:has(.star-hit:hover),
html body #view-detail .detail-rating-card .star-rating:has(.star-hit:focus-visible) {
  transform: none;
}

/* Fortschritt & Episoden (Board 555x382): flachere Abstaende. */
html body #view-detail .detail-progress-card {
  gap: 10px;
  padding: 16px 17px 20px !important;
}

/* Kompakte Episodenvorschau (Uebersicht): Board-Zeilenpitch 35. */
html body #view-detail .detail-eplist.is-compact .detail-eprow {
  grid-template-columns: 20px 46px minmax(0, 1fr) 58px 82px 28px;
  min-height: 34px;
  padding: 2px;
}

html body #view-detail .detail-eplist.is-compact .detail-eprow-status.episode-btn {
  width: 22px !important;
  height: 22px !important;
}

html body #view-detail .detail-eplist.is-compact .detail-eprow-status.episode-btn svg {
  width: 19px;
  height: 19px;
}

/* Cast-Card kompakt wie im Board: Name und Rolle in einer Zeile. */
html body #view-detail .detail-cast-card {
  min-height: 69px;
}

html body #view-detail .detail-cast-nameline {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 9px;
  white-space: nowrap;
}

html body #view-detail .detail-cast-nameline strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

html body #view-detail .detail-cast-actor-copy b,
html body #view-detail .detail-cast-actor-copy small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

html body #view-detail .detail-cast-actor {
  margin-top: 6px !important;
}

html body #view-detail .detail-cast-actor-avatar {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
}

html body #view-detail .detail-cast-copy {
  gap: 2px;
  padding: 8px 11px;
}

html body #view-detail .detail-cast-card.is-compact .detail-cast-nameline {
  flex-direction: column;
  gap: 1px;
}

html body #view-detail .detail-cast-card.is-compact {
  min-height: 95px;
  grid-template-columns: 58px minmax(0, 1fr);
}

html body #view-detail .detail-cast-card.is-compact .detail-cast-portrait {
  width: 58px;
  min-height: 95px;
}

/* Rollen-Tiles (Produktionsteam und Mitwirkende) auf Board-Hoehe. */
html body #view-detail .detail-staff-tile {
  padding: 6px 10px !important;
  gap: 9px !important;
}

html body #view-detail .detail-staff-avatar {
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
}

/* Handlung: flache Fusszeile mit Aktion links und Quelle rechts. */
html body #view-detail .detail-plot-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

html body #view-detail .detail-plot-card .detail-card-more {
  font-size: 13px;
  line-height: 1.25;
}

/* Der Bewertungs-Editor erbt Grossschreibung und Sperrsatz aus den Altstilen. */
html body #view-detail .detail-rating-card .rating-editor-head,
html body #view-detail .detail-rating-card .rating-editor-head strong,
html body #view-detail .detail-rating-card .rating-editor-head small {
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 400;
}

html body #view-detail .detail-rating-card .rating-editor-head small {
  font-weight: 500;
}

html body #view-detail .detail-rating-card .rating-editor-head strong {
  font-size: 16px !important;
  font-weight: 650 !important;
}

/* Sterne im Editor auf Board-Groesse. */
html body #view-detail .detail-rating-card .star-rating {
  font-size: 23px !important;
  letter-spacing: 1px;
}

html body #view-detail .detail-rating-card .star-hit {
  min-height: 28px !important;
}

/* Empfehlungen, untere Reihe (Board 147 hoch): die Eintraege stehen nebeneinander. */
html body #view-detail .detail-relations.is-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

html body #view-detail .detail-relations.is-row.is-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Obere Reihe: beide Cards auf gleiche Hoehe (Board 384). */
html body #view-detail .detail-grid--recs-top {
  align-items: stretch;
}

/* Genre-Chips der Empfehlungs-Card bleiben wie im Board in einer Zeile. */
html body #view-detail .detail-rec-genres {
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 4px;
}

/* Rezensionen: Board-Buttons sind 32 hoch, damit die Card 142 bleibt. */
html body #view-detail .detail-review-actions {
  gap: 10px;
}

html body #view-detail .detail-review-actions .detail-primary-action,
html body #view-detail .detail-review-actions .detail-secondary-action {
  height: 32px;
  min-height: 0 !important;
}

/* Diskussionen fuellt im Board die volle Hoehe der linken Spalte. */
html body #view-detail .detail-discussion-card {
  min-height: 537px;
}

/* Besetzung, Board-Masse: Hauptbesetzung-Tile 69, Nebenrolle 95, Rollen-Tile 39.
   Die Portraits brauchen eine feste Hoehe - mit height:100% zieht das Bild die
   Rasterzeile ueber sein Eigenformat auf. */
html body #view-detail .detail-cast-main .detail-cast-portrait {
  height: 69px;
  min-height: 69px;
}

html body #view-detail .detail-cast-card.is-compact .detail-cast-portrait {
  height: 95px;
  min-height: 95px;
}

html body #view-detail .detail-cast-copy {
  padding: 7px 11px !important;
}

html body #view-detail .detail-cast-actor {
  margin-top: 5px !important;
  gap: 8px !important;
}

html body #view-detail .detail-cast-actor-avatar {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
}

html body #view-detail .detail-cast-actor-copy small {
  font-size: 10.5px;
  line-height: 1.3;
}

html body #view-detail .detail-cast-actor-copy b {
  font-size: 12.5px;
  line-height: 1.3;
}

html body #view-detail .detail-staff-copy small {
  font-size: 10.5px;
  line-height: 1.3;
}

html body #view-detail .detail-staff-copy strong {
  font-size: 12.5px;
  line-height: 1.3;
}

/* Nebenrollen (Board 5 Tiles je 168): schmaleres Portrait und kleinere Schrift,
   damit der echte Sprechername nicht abgeschnitten wird. */
html body #view-detail .detail-cast-card.is-compact {
  grid-template-columns: 48px minmax(0, 1fr);
}

html body #view-detail .detail-cast-card.is-compact .detail-cast-portrait {
  width: 48px;
}

html body #view-detail .detail-cast-card.is-compact .detail-cast-actor-avatar {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
}

html body #view-detail .detail-cast-card.is-compact .detail-cast-actor-copy small {
  display: none;
}

html body #view-detail .detail-cast-card.is-compact .detail-cast-actor-copy b {
  font-size: 11.5px;
}

html body #view-detail .detail-cast-card.is-compact .detail-cast-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile: eine Spalte, kompakter Hero. Der Desktop-Golden-Master gilt nur für
   Breiten ab 981px; das bestehende Mobilverhalten bleibt funktionsfähig. */
@media (max-width: 980px) {
  /* Aeltere Stylesheets setzen auf schmalen Viewports width:100% auf den
     Watchlist-Button. Zusammen mit der Flexzeile rutschte das Drei-Punkte-Menue
     in eine zweite Reihe und wurde auf 7px zusammengedrueckt. Zwei feste
     Spalten halten beide Buttons auf einer Linie und in voller Groesse. */
  html body #view-detail .detail-action-row {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 35px !important;
    align-items: stretch;
  }

  html body #view-detail .detail-action-row > .detail-list-action {
    width: 100% !important;
    min-width: 0;
    height: 100% !important;
  }

  /* Beide Buttons teilen sich die Zeilenhoehe, damit sie auch bei einem
     hoeheren Touch-Target exakt auf einer Linie sitzen. */
  html body #view-detail .detail-more-wrap {
    width: 35px;
    align-self: stretch;
    justify-self: end;
  }

  html body #view-detail .detail-more-action {
    flex: 0 0 35px;
    width: 35px !important;
    min-width: 35px !important;
    height: 100% !important;
  }

  html body #view-detail .detail-more-menu {
    left: auto;
    right: 0;
  }

  html body #view-detail .detail-grid,
  html body #view-detail .detail-grid--overview,
  html body #view-detail .detail-grid--episodes,
  html body #view-detail .detail-grid--cast,
  html body #view-detail .detail-grid--reviews,
  html body #view-detail .detail-grid--recs,
  html body #view-detail .detail-grid--details {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: none !important;
  }

  html body #view-detail .detail-grid > .detail-card,
  html body #view-detail .detail-grid > [data-detail-area] {
    grid-area: auto !important;
    grid-column: auto !important;
  }

  html body #view-detail .detail-rec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html body #view-detail .detail-cast-grid,
  html body #view-detail .detail-support-grid,
  html body #view-detail .detail-staff-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html body #view-detail .detail-review-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  html body #view-detail .detail-relations.is-row,
  html body #view-detail .detail-relations.is-row.is-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html body #view-detail .detail-score-card .detail-score-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  html body #view-detail .detail-info-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  html body #view-detail .detail-similar-rail {
    grid-auto-columns: minmax(132px, 1fr);
    overflow-x: auto;
    scrollbar-width: none;
  }
}

@media (max-width: 760px) {
  /* Bisher gewann die feste Desktop-Hoehe (height: 268px) auch hier, die
     196 px waren nie wirksam. Damit die mobile Darstellung unveraendert
     bleibt, wird die gemessene Hoehe uebernommen. */
  html body #view-detail .detail-hero-banner {
    min-height: 268px;
  }

  html body #view-detail .detail-hero .detail-title {
    padding: 18px 16px 16px !important;
  }

  html body #view-detail .detail-main-title {
    font-size: 25px !important;
  }

  html body #view-detail .detail-reference-alt-title {
    font-size: 14px !important;
  }

  html body #view-detail .detail-reference-meta {
    margin-top: 10px !important;
    font-size: 12.5px !important;
  }

  html body #view-detail .detail-hero-bottom {
    gap: 12px;
    margin-top: 14px;
  }

  html body #view-detail .detail-tabs {
    height: 44px;
    gap: 6px;
    padding: 0 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  html body #view-detail .detail-tabs::-webkit-scrollbar {
    height: 0;
  }

  html body #view-detail .detail-tab {
    font-size: 13.5px;
    white-space: nowrap;
  }

  html body #view-detail .detail-card {
    padding: 15px !important;
  }

  html body #view-detail .detail-eprow {
    grid-template-columns: 22px 52px minmax(0, 1fr) 30px;
    gap: 10px;
  }

  html body #view-detail :where(.detail-eprow-duration, .detail-eprow-aired, .detail-eprow-link) {
    display: none;
  }

  html body #view-detail .detail-eptable-head {
    display: none;
  }

  html body #view-detail .detail-rec-grid,
  html body #view-detail .detail-cast-grid,
  html body #view-detail .detail-support-grid,
  html body #view-detail .detail-staff-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  html body #view-detail .detail-link-row {
    grid-template-columns: minmax(0, 1fr) 18px;
  }

  html body #view-detail .detail-link-value {
    display: none;
  }

  html body #view-detail .detail-discussion-card {
    max-height: none;
  }

  html body #view-detail .detail-discussion-card .comments-list {
    max-height: none;
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #view-detail * {
    transition: none !important;
    animation: none !important;
  }
}