/*
 * AnimeRadar V2.4.247 - Profil und Anime-Detail nach Referenzbildern
 *
 * Grundlage sind die Referenzbilder zu den fuenf Profil-Reitern und den sechs
 * Reitern der Anime-Detailseite. Die Datei aendert ausschliesslich die
 * Darstellung; Markup-Kennungen, Datenquellen und Bedienlogik bleiben die des
 * Projekts.
 *
 * Farben kommen aus den vorhandenen Tokens. Markenakzente laufen ueber
 * --ar-accent* aus material-accent-theme-v2-4-246.css. Seit V2.4.249 gibt es
 * dort nur noch die eine Palette des Redesigns, keine Auswahl mehr.
 * Fehler-, Loesch- und Statusrot bleiben unveraendert.
 *
 * Die Datei steht vor material-selected-state-v2-4-232.css, damit der
 * gemeinsame Auswahlzustand weiterhin gewinnt. Sie steht nach
 * material-reference-pages-v2-4-194.css und setzt deren feste Rasterhoehen
 * gezielt zurueck.
 *
 * NICHT enthalten, weil im Projekt keine Datengrundlage besteht (mit dem
 * Benutzer abgestimmt):
 *   Follower und "Folge ich", Ueber-mich-Text, Land, Anzeigename,
 *   Lieblings-Genres als Einstellung, verbundene Konten, Design-Umschalter,
 *   Kompaktmodus, Rezensionstitel, Hilfreich-Stimmen, Spoilerflag,
 *   Kritiker-Rolle, Antworten, Match-Prozent, deutsche Synchronsprecher,
 *   Altersfreigabe, Untertitel, Audiospur, Produktions-Timeline und
 *   Episodenbeschreibungen.
 */

/* ========================================================================== */
/* 1. Gemeinsame Werte                                                        */
/* ========================================================================== */

#view-profile,
#view-detail {
  --pf-card-bg: #101419;
  --pf-card-bg-soft: #0d1116;
  --pf-line: rgba(255, 255, 255, .075);
  --pf-line-strong: rgba(255, 255, 255, .13);
  --pf-radius: 12px;
  --pf-radius-sm: 9px;
  --pf-text: #ffffff;
  --pf-soft: #c8ccd2;
  --pf-muted: #a3a9b1;
  --pf-dim: #7f868e;
  --pf-gap: 12px;
  --pf-gruen: #3fd07a;
  --pf-orange: #f0913f;
  --pf-gold: #f5c247;
}

/* Konturzeichnungen im Raster 24x24 wie im uebrigen Projekt. */
html body #view-profile .profile-gm-icon,
html body #view-detail .detail-gm-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  line-height: 0;
}

html body #view-profile .profile-gm-icon svg,
html body #view-detail .detail-gm-icon svg,
html body #view-profile .profile-gm-watch-icon svg,
html body #view-profile .profile-gm-poster-heart svg,
html body #view-profile .profile-gm-poster-score i svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Die Vorlage beginnt direkt mit dem Profilkopf. */
html body #view-profile .profile-gm-page-heading {
  display: none;
}

/* ========================================================================== */
/* 2. Profilkopf                                                              */
/* ========================================================================== */
/* Vorlage: Banner ueber die volle Inhaltsbreite, runder Avatar links, Name mit
   Abzeichen, Handle darunter, darunter eine abgetrennte Kennzahlenzeile mit
   den Aktionen am rechten Rand. */

html body #view-profile .profile-gm-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "avatar identity identity"
    "stats  stats    aktionen";
  align-items: end;
  column-gap: 0;
  row-gap: 0;
  min-height: 0;
  padding: 18px 20px 14px;
  overflow: hidden;
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius);
}

html body #view-profile .profile-gm-avatar-block {
  grid-area: avatar;
  position: relative;
  align-self: start;
}

/* material-reference-pages-v2-4-194.css setzt Groesse, roten Rand und Schein
   mit !important. Die Vorlage zeigt einen weissen Ring ohne Schein. */
html body #view-profile .profile-gm-avatar.avatar-frame {
  width: 118px !important;
  height: 118px !important;
  border: 3px solid rgba(255, 255, 255, .92) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 4px rgba(8, 10, 14, .55) !important;
  font-size: 38px;
}

/* V2.4.252: Der gruene Statuspunkt am Profilbild ist entfallen. Er stand fuer
   "angemeldet" und war die einzige Verwendung von --pf-gruen im Profilkopf.
   Avatar, Ring und Groesse bleiben unveraendert. */

html body #view-profile .profile-gm-identity {
  grid-area: identity;
  min-width: 0;
  align-self: center;
  margin-left: 26px;
}

html body #view-profile .profile-gm-name-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

html body #view-profile .profile-main-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  color: var(--pf-text);
}

/* V2.4.253: Die Regeln fuer .profile-gm-badge (Premium-Krone) und
   .profile-gm-handle ("@benutzername") sind entfallen - beide Elemente gibt es
   im Profilkopf nicht mehr. Sie hatten keine Verwendung ausserhalb dieses
   Kopfes. .profile-gm-name-row bleibt: die Zeile traegt weiterhin die
   Ueberschrift und auf schmalen Geraeten deren Zentrierung. */

html body #view-profile .profile-gm-meta span::before {
  width: 12px;
  height: 12px;
  border: 1.4px solid var(--ar-accent-bright);
  border-radius: 3px;
  background: transparent;
  opacity: .9;
}

html body #view-profile .profile-gm-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  margin-top: 9px;
  font-size: 12.5px;
  line-height: 17px;
  color: var(--pf-soft);
}

/* Kennzahlenzeile: getrennt durch eine feine Linie ueber die volle Breite,
   Werte gross, Beschriftungen klein, feine Trenner dazwischen. */
html body #view-profile .profile-gm-hero-stats {
  grid-area: stats;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-top: 13px;
  padding-top: 10px;
  border-top: 1px solid var(--pf-line-strong);
}

html body #view-profile .profile-gm-hero-stats > div {
  display: grid;
  flex: 1 1 0;
  gap: 1px;
  min-width: 0;
  padding: 2px 10px;
  text-align: center;
}

html body #view-profile .profile-gm-hero-stats > div + div {
  border-left: 1px solid var(--pf-line);
}

html body #view-profile .profile-gm-hero-stats b {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 26px;
  color: var(--pf-text);
}

html body #view-profile .profile-gm-hero-stats span {
  overflow: hidden;
  font-size: 12px;
  line-height: 16px;
  color: var(--pf-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* material-reference-pages-v2-4-194.css erzwingt hier Zeilenrichtung und
   Aussenabstand. Die Vorlage stellt die Schaltflaechen in dieselbe Zeile wie
   die Kennzahlen, deshalb dieselbe Gewichtung. */
html body #view-profile .profile-actions.profile-gm-hero-actions {
  grid-area: aktionen;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  align-self: stretch;
  gap: 8px;
  margin: 13px 0 0 0 !important;
  padding-top: 10px;
  padding-left: 16px;
  border-top: 1px solid var(--pf-line-strong);
}

html body #view-profile .profile-gm-hero-actions button {
  min-width: 0;
  min-height: 36px;
  padding: 0 16px !important;
  border-radius: var(--pf-radius-sm);
  font-size: 13px;
  white-space: nowrap;
}

/* ========================================================================== */
/* 3. Reiter                                                                  */
/* ========================================================================== */
/* Vorlage: gleich breite Pillen ueber die volle Breite, aktiver Reiter in der
   Markenfarbe. */

/* material-reference-pages-v2-4-194.css setzt hier display und Hoehe mit
   !important auf eine Unterstrichleiste. Die Vorlage zeigt Pillen, deshalb
   dieselbe Selektortiefe und dieselbe Gewichtung. */
html body #view-profile .profile-gm-tabs.profile-hub-tabs {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 9px;
  width: 100% !important;
  height: auto !important;
  margin: var(--pf-gap) 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible;
}

html body #view-profile .profile-gm-tabs.profile-hub-tabs .mobile-section-tab {
  min-width: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  border: 1px solid var(--pf-line) !important;
  border-radius: 999px !important;
  background: var(--pf-card-bg) !important;
  color: var(--pf-soft) !important;
  font-size: 13.5px !important;
  font-weight: 600;
  white-space: nowrap;
}

/* Der aktive Reiter folgt dem gemeinsamen Auswahlzustand des Projekts. */
html body #view-profile .profile-gm-tabs.profile-hub-tabs .mobile-section-tab.active {
  border-color: var(--ar-selected-border) !important;
  background: var(--ar-selected-bg) !important;
  color: #fff !important;
}

html body #view-profile .profile-gm-tabs.profile-hub-tabs .mobile-section-tab::after {
  display: none !important;
}

html body #view-profile .profile-gm-panels {
  margin-top: var(--pf-gap);
}

/* ========================================================================== */
/* 4. Karten                                                                  */
/* ========================================================================== */

html body #view-profile .profile-gm-card {
  min-width: 0;
  padding: 13px 15px 15px;
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius);
  background: var(--pf-card-bg);
  box-shadow: none;
}

html body #view-profile .profile-gm-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

html body #view-profile .profile-gm-card h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  color: var(--pf-text);
  white-space: nowrap;
}

html body #view-profile .profile-gm-card h2 > .profile-gm-icon {
  width: 19px;
  height: 19px;
  color: var(--ar-accent-bright);
}

html body #view-profile .profile-gm-card > header button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ar-accent-bright);
  font-family: var(--font-body);
  /* Bedienelemente bleiben bei mindestens 12px lesbar. */
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

html body #view-profile .profile-gm-card > header button::after {
  content: '\203A';
  font-size: 15px;
  line-height: 1;
}

html body #view-profile .profile-gm-empty {
  min-height: 84px;
  padding: 16px;
}

/* ========================================================================== */
/* 5. Uebersicht                                                              */
/* ========================================================================== */
/* Links eine schmale Spalte mit Aktivitaet, Erinnerungen und Watchlist, rechts
   Lieblings-Anime ueber die volle Breite und buendig darunter die neuesten
   Bewertungen. Seit V2.4.254 - die Watchlist stand vorher rechts. */

/* Die alte Regel setzt vier feste Spalten und drei feste Zeilenhoehen. */
html body #view-profile .profile-gm-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 2.16fr);
  grid-template-rows: auto;
  gap: var(--pf-gap);
  align-items: start;
}

html body #view-profile .profile-gm-ov-side {
  display: grid;
  grid-auto-rows: min-content;
  gap: var(--pf-gap);
  min-width: 0;
}

html body #view-profile .profile-gm-ov-main {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr);
  grid-auto-rows: min-content;
  gap: var(--pf-gap);
  min-width: 0;
}

html body #view-profile .profile-gm-favorites,
html body #view-profile .profile-gm-recent-ratings {
  grid-column: 1 / -1;
  grid-row: auto;
  margin-top: 0;
}

html body #view-profile .profile-gm-activity,
html body #view-profile .profile-gm-genres,
html body #view-profile .profile-gm-watchlist,
html body #view-profile .profile-gm-reminders-card {
  grid-column: auto;
  grid-row: auto;
}

/* -------------------------------------------------------- Aktivitaetsliste */
/* Die Vorlage trennt die Zeilen nur durch feine Linien, keine Einzelkarten. */

html body #view-profile .profile-gm-feed,
html body #view-profile .profile-gm-reminder-rows,
html body #view-profile .profile-gm-watch-rows {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--pf-line);
  list-style: none;
}

html body #view-profile .profile-gm-feed-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--pf-line);
  border-radius: 0;
  background: transparent;
}

html body #view-profile .profile-gm-feed-row:last-child,
html body #view-profile .profile-gm-reminder-rows li:last-child,
html body #view-profile .profile-gm-watch-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

html body #view-profile .profile-gm-feed-row img,
html body #view-profile .profile-gm-feed-row .profile-gm-cover-fallback {
  width: 38px;
  height: 38px;
  border-radius: 7px;
  object-fit: cover;
}

html body #view-profile .profile-gm-feed-row > span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

html body #view-profile .profile-gm-feed-row strong {
  display: block;
  overflow: hidden;
  font-size: 13px;
  font-weight: 650;
  line-height: 17px;
  color: var(--pf-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-profile .profile-gm-feed-row small {
  display: block;
  font-size: 11.5px;
  line-height: 15px;
  color: var(--pf-muted);
}

html body #view-profile .profile-gm-feed-row time {
  align-self: start;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 15px;
  color: var(--pf-dim);
  white-space: nowrap;
}

/* ------------------------------------------------------------- Posterreihe */

/* material-reference-pages-v2-4-194.css baut die Posterkarte als Kachel mit
   Verlauf und absolut gesetztem Titel. Die Vorlage zeigt den Titel unter dem
   Cover, deshalb wird die alte Bauweise hier zurueckgesetzt. */
html body #view-profile .profile-gm-poster-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-flow: row;
  gap: 10px;
  margin-top: 0;
}

html body #view-profile .profile-gm-poster-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
  height: auto;
  min-width: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
}

html body #view-profile .profile-gm-poster-card::after {
  content: none;
}

html body #view-profile .profile-gm-poster-card > span {
  position: static;
  inset: auto;
  z-index: auto;
  display: block;
}

html body #view-profile .profile-gm-poster-card > .profile-gm-poster-media {
  position: relative;
  display: block;
  line-height: 0;
}

html body #view-profile .profile-gm-poster-media > img,
html body #view-profile .profile-gm-poster-media > .profile-gm-cover-fallback {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 7;
  border-radius: 9px;
  object-fit: cover;
}

html body #view-profile .profile-gm-poster-name {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 16px;
  color: var(--pf-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-profile .profile-gm-poster-rail.is-centered .profile-gm-poster-name {
  text-align: center;
}

html body #view-profile .profile-gm-poster-heart {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 6px;
  border-radius: 50%;
  background: var(--ar-accent);
  color: #fff;
  font-style: normal;
}

html body #view-profile .profile-gm-poster-heart svg {
  fill: currentColor;
}

html body #view-profile .profile-gm-poster-score {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  color: var(--pf-text);
}

html body #view-profile .profile-gm-poster-score i {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  color: var(--ar-accent-bright);
  font-style: normal;
}

html body #view-profile .profile-gm-poster-score i svg {
  fill: currentColor;
  stroke: currentColor;
}

html body #view-profile .profile-gm-poster-score em {
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
  color: var(--pf-dim);
}

html body #view-profile .profile-gm-poster-time {
  font-size: 11px;
  line-height: 15px;
  color: var(--pf-dim);
}

/* ------------------------------------------------------------ Genrebalken */

html body #view-profile .profile-gm-genre-bars {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* UI Fix Run (2026-09-25): Die Zeilen von "Top Genres" und "Top Studios"
   tragen auf allen Plattformen kein Symbol mehr. Die 18-px-Symbolspalte samt
   Abstand faellt deshalb auch auf dem Desktop weg (mobil seit V2.4.303);
   Text- und Wertspalte behalten ihre Breite, der Balken wird laenger. */
html body #view-profile .profile-gm-genre-bars li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--pf-soft);
}

html body #view-profile .profile-gm-genre-bars li > .profile-gm-icon {
  width: 18px;
  height: 18px;
  color: var(--ar-accent-bright);
}

html body #view-profile .profile-gm-genre-bars.is-studios li {
  grid-template-columns: 84px minmax(0, 1fr) 26px;
}

html body #view-profile .profile-gm-genre-bars li > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-profile .profile-gm-genre-bars i {
  display: block;
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

html body #view-profile .profile-gm-genre-bars b {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ar-accent);
}

html body #view-profile .profile-gm-genre-bars small {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pf-text);
  text-align: right;
}

/* ------------------------------------------------------------- Watchlist - */

html body #view-profile .profile-gm-watch-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto 18px;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--pf-line);
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
}

html body #view-profile .profile-gm-watch-row img,
html body #view-profile .profile-gm-watch-row .profile-gm-cover-fallback {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  object-fit: cover;
}

html body #view-profile .profile-gm-watch-row strong {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 17px;
  color: var(--pf-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-profile .profile-gm-watch-row small,
html body #view-profile .profile-gm-watch-format {
  font-size: 11px;
  line-height: 15px;
  color: var(--pf-dim);
  white-space: nowrap;
}

html body #view-profile .profile-gm-watch-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--pf-dim);
  font-style: normal;
}

/* ----------------------------------------------------------- Erinnerungen */

html body #view-profile .profile-gm-reminder-rows li {
  display: grid;
  /* Seit 2026-09-26 ohne Glocke vor dem Eintrag: Titel buendig links. */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid var(--pf-line);
  border-radius: 0;
  background: transparent;
}

html body #view-profile .profile-gm-reminder-rows > li > span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

html body #view-profile .profile-gm-reminder-rows strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 650;
  line-height: 17px;
  color: var(--pf-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-profile .profile-gm-reminder-rows small {
  font-size: 11.5px;
  line-height: 15px;
  color: var(--pf-muted);
}

html body #view-profile .profile-gm-reminder-rows time {
  font-size: 11.5px;
  color: var(--pf-dim);
  white-space: nowrap;
}

/* ========================================================================== */
/* 6. Statistik                                                               */
/* ========================================================================== */
/* Vorlage: oben die Kachelreihe ueber zwei Spalten und daneben der Genre-Ring,
   darunter Saison, Monatsdiagramm und Top Studios, unten Watch Status, Top
   bewertete Anime und die Jahreszahlen. */

/* Die alte Regel setzt drei feste Zeilenhoehen (104/252/258). */
html body #view-profile .profile-gm-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto;
  /* V2.4.252: "Top Genres" ist aus der Uebersicht hierher gewandert und
     steht neben der Genre-Verteilung - beide zeigen dieselbe Groesse, einmal
     als Ring, einmal als Balken. Die Uebersichtskacheln ruecken dafuer auf
     eine Spalte zusammen. */
  grid-template-areas:
    "uebersicht genre      topgenres"
    "saison     monate     studios"
    "status     toprated   jahr";
  gap: var(--pf-gap);
  align-items: start;
}

html body #view-profile .profile-gm-stats-overview { grid-area: uebersicht; }
html body #view-profile .profile-gm-stats-grid > .profile-gm-genres { grid-area: topgenres; }
html body #view-profile .profile-gm-genre-ring { grid-area: genre; }
html body #view-profile .profile-gm-seasons { grid-area: saison; }
html body #view-profile .profile-gm-month-chart { grid-area: monate; }
html body #view-profile .profile-gm-studios { grid-area: studios; }
html body #view-profile .profile-gm-status-chart { grid-area: status; }
html body #view-profile .profile-gm-top-rated { grid-area: toprated; }
html body #view-profile .profile-gm-year { grid-area: jahr; }

/* ------------------------------------------------------------ Kachelreihe */

html body #view-profile .profile-gm-stat-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

html body #view-profile .profile-gm-stat-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-card-bg-soft);
}

html body #view-profile .profile-gm-stat-tile > span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

html body #view-profile .profile-gm-stat-tile b {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 23px;
  color: var(--pf-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-profile .profile-gm-stat-tile small {
  overflow: hidden;
  font-size: 10.5px;
  line-height: 15px;
  color: var(--pf-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----------------------------------------------------------------- Ringe - */

html body #view-profile .profile-gm-ring-wrap {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

html body #view-profile .profile-gm-ring {
  position: relative;
  display: grid;
  place-content: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: conic-gradient(var(--profile-ring));
  text-align: center;
}

html body #view-profile .profile-gm-ring::before {
  content: "";
  position: absolute;
  inset: 17px;
  border-radius: 50%;
  background: var(--pf-card-bg);
}

html body #view-profile .profile-gm-ring b,
html body #view-profile .profile-gm-ring small {
  position: relative;
  display: block;
}

html body #view-profile .profile-gm-ring b {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  color: var(--pf-text);
}

html body #view-profile .profile-gm-ring small {
  font-size: 11px;
  color: var(--pf-muted);
}

html body #view-profile .profile-gm-ring-legend {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html body #view-profile .profile-gm-ring-legend li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 0;
  border: 0;
  font-size: 12px;
  color: var(--pf-soft);
}

html body #view-profile .profile-gm-ring-legend.has-value li {
  grid-template-columns: 8px minmax(0, 1fr) auto auto;
}

html body #view-profile .profile-gm-ring-legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

html body #view-profile .profile-gm-ring-legend span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-profile .profile-gm-ring-legend em {
  font-size: 12px;
  font-style: normal;
  font-weight: 650;
  color: var(--pf-text);
}

html body #view-profile .profile-gm-ring-legend b {
  min-width: 30px;
  font-size: 12px;
  font-weight: 650;
  color: var(--pf-muted);
  text-align: right;
}

/* ------------------------------------------------------------- Saisonen - */

html body #view-profile .profile-gm-season-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

html body #view-profile .profile-gm-season-grid article {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-card-bg-soft);
}

html body #view-profile .profile-gm-season-grid .profile-gm-icon {
  width: 26px;
  height: 26px;
  padding: 4px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
}

html body #view-profile .profile-gm-season-grid article.is-spring > .profile-gm-icon { color: #f487b4; }
html body #view-profile .profile-gm-season-grid article.is-summer > .profile-gm-icon { color: #f5c247; }
html body #view-profile .profile-gm-season-grid article.is-fall > .profile-gm-icon { color: #e2703a; }
html body #view-profile .profile-gm-season-grid article.is-winter > .profile-gm-icon { color: #6fb7ff; }

html body #view-profile .profile-gm-season-grid div {
  display: grid;
  gap: 0;
  min-width: 0;
}

html body #view-profile .profile-gm-season-grid strong {
  font-size: 12px;
  font-weight: 650;
  line-height: 16px;
  color: var(--pf-text);
  white-space: nowrap;
}

html body #view-profile .profile-gm-season-grid b {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 21px;
  color: var(--pf-text);
}

html body #view-profile .profile-gm-season-grid small {
  font-size: 10px;
  line-height: 13px;
  color: var(--pf-muted);
  white-space: nowrap;
}

/* ------------------------------------------------------- Monatsdiagramm - */
/* Die Balkenhoehe kommt aus einer absolut gesetzten Spur, damit der Prozentwert
   eine feste Bezugshoehe hat. */

html body #view-profile .profile-gm-chart {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 6px;
}

html body #view-profile .profile-gm-chart-axis {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  height: 140px;
  color: var(--pf-dim);
  font-size: 9.5px;
  text-align: right;
}

html body #view-profile .profile-gm-chart-axis span {
  line-height: 1;
  transform: translateY(-4px);
}

html body #view-profile .profile-gm-chart-axis span:last-child {
  align-self: end;
  transform: translateY(0);
}

html body #view-profile .profile-gm-line-bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 3px;
  height: auto;
  margin-top: 0;
  border-bottom: 0;
}

html body #view-profile .profile-gm-line-bars > div {
  position: relative;
  display: grid;
  grid-template-rows: 140px auto;
  align-items: stretch;
  gap: 4px;
  height: auto;
  min-width: 0;
}

html body #view-profile .profile-gm-bar-track {
  position: relative;
  display: block;
  align-self: stretch;
  height: 100%;
  margin-top: 0;
  border-bottom: 1px solid var(--pf-line-strong);
}

html body #view-profile .profile-gm-line-bars i {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 0;
  width: auto;
  min-height: 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(var(--ar-accent-bright), var(--ar-accent));
}

html body #view-profile .profile-gm-bar-label {
  margin-top: 0;
  color: var(--pf-dim);
  font-size: 9px;
  letter-spacing: -.3px;
  text-align: center;
  white-space: nowrap;
}

/* Werteanzeige beim Ueberfahren - zeigt nur den bereits gerenderten Wert. */
html body #view-profile .profile-gm-bar-tip {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 3;
  margin-top: 0;
  padding: 4px 8px;
  border: 1px solid var(--pf-line-strong);
  border-radius: 7px;
  background: #0b0e12;
  color: var(--pf-text);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity .12s linear;
}

html body #view-profile .profile-gm-line-bars > div:hover .profile-gm-bar-tip {
  opacity: 1;
}

/* ------------------------------------------------------------- Rangliste - */

html body #view-profile .profile-gm-rank-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--pf-line);
  list-style: none;
}

html body #view-profile .profile-gm-rank-row {
  display: grid;
  grid-template-columns: 20px 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid var(--pf-line);
  border-radius: 0;
  background: transparent;
  text-decoration: none;
}

html body #view-profile .profile-gm-rank-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

html body #view-profile .profile-gm-rank-row > b {
  color: var(--ar-accent-bright);
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}

html body #view-profile .profile-gm-rank-row img,
html body #view-profile .profile-gm-rank-row .profile-gm-cover-fallback {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  object-fit: cover;
}

html body #view-profile .profile-gm-rank-row > span {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pf-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-profile .profile-gm-rank-row > em {
  color: var(--pf-text);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

/* --------------------------------------------------------------- Jahr --- */

html body #view-profile .profile-gm-year-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html body #view-profile .profile-gm-year-list li {
  display: grid;
  /* Seit 2026-09-26 ohne Symbol vor der Zeile. */
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 9px 10px;
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-card-bg-soft);
}

html body #view-profile .profile-gm-year-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
}

html body #view-profile .profile-gm-year-list b {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  color: var(--pf-text);
}

html body #view-profile .profile-gm-year-list small {
  grid-column: 1;
  font-size: 11px;
  line-height: 15px;
  color: var(--pf-muted);
}

html body #view-profile .profile-gm-year-list em {
  grid-area: 1 / 2 / 3 / 3;
  align-self: center;
  display: grid;
  gap: 0;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  text-align: right;
}

html body #view-profile .profile-gm-year-list em small {
  color: var(--pf-dim);
  font-size: 10px;
  font-weight: 500;
}

html body #view-profile .profile-gm-year-list em.is-up { color: var(--pf-gruen); }
html body #view-profile .profile-gm-year-list em.is-down { color: #ff7a7a; }

/* ========================================================================== */
/* 10. Mobil - Profil                                                         */
/* ========================================================================== */
/* Vorlage Mobil: Kopf gestapelt, Kennzahlen in einer Zeile, Reiter waagerecht
   scrollbar, Karten untereinander in der Reihenfolge der Vorlage. */

@media (max-width: 1099px) {
  html body #view-profile .profile-gm-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* V2.4.259: topgenres ergaenzt. Ohne den Namen fiel die Karte in eine
       implizite Spalte und riss das Raster auseinander. */
    grid-template-areas:
      "uebersicht uebersicht"
      "genre      topgenres"
      "saison     monate"
      "studios    status"
      "toprated   jahr";
  }

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

  html body #view-profile .profile-gm-ov-side,
  html body #view-profile .profile-gm-ov-main {
    display: contents;
  }

  /* Beide Spalten sind hier display:contents, die Reihenfolge macht also
     allein order. Seit V2.4.254 folgen die Bewertungen den Lieblings-Anime
     und die Watchlist den Erinnerungen; die Aktivitaet behaelt ihren Platz. */
  html body #view-profile .profile-gm-favorites { order: 1; }
  html body #view-profile .profile-gm-activity { order: 2; }
  html body #view-profile .profile-gm-genres { order: 3; }
  html body #view-profile .profile-gm-recent-ratings { order: 4; }
  html body #view-profile .profile-gm-reminders-card { order: 5; }
  html body #view-profile .profile-gm-watchlist { order: 6; }
}

@media (max-width: 760px) {
  html body #view-profile .profile-gm-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "avatar"
      "identity"
      "stats"
      "aktionen";
    justify-items: center;
    padding: 18px 14px 14px;
    text-align: center;
  }

  html body #view-profile .profile-gm-identity {
    margin-left: 0;
    text-align: center;
  }

  html body #view-profile .profile-gm-name-row,
  html body #view-profile .profile-gm-meta {
    justify-content: center;
  }

  html body #view-profile .profile-gm-avatar {
    width: 104px;
    height: 104px;
    font-size: 34px;
  }

  html body #view-profile .profile-main-title {
    font-size: 24px;
    line-height: 30px;
  }

  html body #view-profile .profile-gm-hero-stats {
    width: 100%;
    margin-top: 13px;
    padding-top: 11px;
  }

  html body #view-profile .profile-gm-hero-stats > div {
    padding: 2px 4px;
  }

  html body #view-profile .profile-gm-hero-stats b { font-size: 17px; line-height: 21px; }
  html body #view-profile .profile-gm-hero-stats span { font-size: 10px; line-height: 14px; }

  html body #view-profile .profile-actions.profile-gm-hero-actions {
    width: 100%;
    margin: 11px 0 0 !important;
    padding-top: 0;
    padding-left: 0;
    border-top: 0;
  }

  html body #view-profile .profile-gm-hero-actions button {
    flex: 1 1 0;
  }

  /* Die Reiter passen mobil nicht nebeneinander und werden gescrollt. */
  html body #view-profile .profile-gm-tabs.profile-hub-tabs {
    grid-auto-columns: max-content;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  html body #view-profile .profile-gm-tabs.profile-hub-tabs::-webkit-scrollbar {
    height: 0;
  }

  html body #view-profile .profile-gm-tabs.profile-hub-tabs .mobile-section-tab {
    padding: 0 14px !important;
    font-size: 12.5px !important;
  }

  html body #view-profile .profile-gm-stats-grid {
    grid-template-columns: minmax(0, 1fr);
    /* V2.4.259: topgenres ergaenzt - siehe Block oben. Die Reihenfolge bleibt
       die der Desktopfassung, nur untereinander. */
    grid-template-areas:
      "uebersicht"
      "genre"
      "topgenres"
      "saison"
      "monate"
      "studios"
      "status"
      "toprated"
      "jahr";
  }

  html body #view-profile .profile-gm-stat-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html body #view-profile .profile-gm-ring-wrap {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 12px;
  }

  html body #view-profile .profile-gm-ring {
    width: 104px;
    height: 104px;
  }

  html body #view-profile .profile-gm-ring::before { inset: 17px; }

  /* Posterreihen laufen mobil waagerecht, wie in der Vorlage. */
  html body #view-profile .profile-gm-poster-rail {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 96px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  html body #view-profile .profile-gm-poster-rail::-webkit-scrollbar {
    height: 0;
  }

  html body #view-profile .profile-gm-genre-bars li {
    grid-template-columns: 18px 74px minmax(0, 1fr) 36px;
    gap: 8px;
    font-size: 12px;
  }

  /* V2.4.303: "Top Genres" und "Top Studios" zeigen auf Telefon und in der
     App kein Zeilensymbol mehr. Die erste Rasterspalte faellt deshalb ganz
     weg - nur das Symbol auszublenden wuerde eine leere 18-px-Spalte samt
     ihrem Abstand stehen lassen. Seit dem UI Fix Run kommt das Symbol gar
     nicht mehr ins Markup, auch nicht auf dem Desktop; die Ausblendung unten
     bleibt als Absicherung. */
  html body #view-profile :is(.profile-gm-genres, .profile-gm-studios) .profile-gm-genre-bars li > .profile-gm-icon {
    display: none;
  }

  html body #view-profile .profile-gm-genres .profile-gm-genre-bars li {
    grid-template-columns: 74px minmax(0, 1fr) 36px;
  }

  html body #view-profile .profile-gm-studios .profile-gm-genre-bars.is-studios li {
    grid-template-columns: 84px minmax(0, 1fr) 26px;
  }

  html body #view-profile .profile-gm-chart {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  html body #view-profile .profile-gm-chart-axis { height: 120px; }
  html body #view-profile .profile-gm-line-bars > div { grid-template-rows: 120px auto; }
  html body #view-profile .profile-gm-line-bars { gap: 3px; }
  html body #view-profile .profile-gm-bar-label { font-size: 9px; }
}

@media (max-width: 420px) {
  html body #view-profile .profile-gm-stat-tiles {
    grid-template-columns: minmax(0, 1fr);
  }

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

/* ========================================================================== */
/* 7. Bewertungen                                                             */
/* ========================================================================== */
/* Drei Ebenen: oben die Statistikzeile (Durchschnitt, Verteilung, Trend),
   darunter die neuesten Bewertungen ueber die volle Breite, unten die
   vollstaendige Tabelle mit Schnellfiltern und Auswahlfeldern.

   V2.4.300: Das Raster hatte sechs gleiche Spalten und align-items: start;
   die drei Statistikkarten wurden dadurch unterschiedlich hoch und die
   Verteilung mit ihren zehn Balken bekam nicht mehr Platz als der
   Durchschnitt. Jetzt drei bewusst gesetzte Spalten, gleiche Hoehe, und die
   Verteilung breiter. */

html body #view-profile .profile-gm-rating-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--pf-gap);
  align-items: stretch;
}

/* Die Karten der Statistikzeile fuellen ihre Zelle und richten den Kopf
   oben aus; die Diagramme sitzen darunter auf gleicher Hoehe. */
html body #view-profile .profile-gm-rating-grid > .profile-gm-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

html body #view-profile .profile-gm-rating-grid > .profile-gm-card > header {
  flex: 0 0 auto;
}

html body #view-profile .profile-gm-rating-average,
html body #view-profile .profile-gm-rating-dist,
html body #view-profile .profile-gm-rating-trend { grid-column: span 1; }

/* Der Durchschnitt steht vertikal mittig in seiner Karte. */
html body #view-profile .profile-gm-rating-average .profile-gm-average {
  flex: 1 1 auto;
}

/* Ebene 2: die neuesten Bewertungen ueber die volle Breite. */
html body #view-profile .profile-gm-rating-recent { grid-column: 1 / -1; }

html body #view-profile .profile-gm-rating-table-card {
  margin-top: var(--pf-gap);
}

/* ------------------------------------------------------- Durchschnitt --- */

html body #view-profile .profile-gm-average {
  display: flex;
  align-items: center;
  gap: 14px;
}

html body #view-profile .profile-gm-average-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  color: var(--ar-accent-bright);
}

html body #view-profile .profile-gm-average-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
}

html body #view-profile .profile-gm-average b {
  display: block;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 34px;
  color: var(--pf-text);
}

html body #view-profile .profile-gm-average b em {
  margin-left: 5px;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  color: var(--pf-muted);
}

html body #view-profile .profile-gm-average small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--pf-muted);
}

html body #view-profile .profile-gm-average-quote {
  position: relative;
  margin: 12px 0 0;
  padding: 0 20px;
  color: var(--pf-soft);
  font-size: 12.5px;
  font-style: italic;
  line-height: 17px;
}

html body #view-profile .profile-gm-average-quote::before,
html body #view-profile .profile-gm-average-quote::after {
  position: absolute;
  color: var(--pf-dim);
  font-size: 20px;
  font-style: normal;
  line-height: 1;
}

html body #view-profile .profile-gm-average-quote::before { content: '\201E'; left: 0; top: 4px; }
html body #view-profile .profile-gm-average-quote::after { content: '\201C'; right: 0; bottom: 0; }

/* --------------------------------------------------- Balkenverteilung --- */

html body #view-profile .profile-gm-vbars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: end;
  gap: 5px;
}

html body #view-profile .profile-gm-vbars > div {
  display: grid;
  grid-template-rows: 16px 96px 16px;
  gap: 3px;
  min-width: 0;
  text-align: center;
}

html body #view-profile .profile-gm-vbars b {
  color: var(--pf-soft);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 16px;
}

html body #view-profile .profile-gm-vbar-track {
  position: relative;
  display: block;
  align-self: stretch;
  height: 100%;
}

html body #view-profile .profile-gm-vbars i {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(var(--ar-accent-bright), var(--ar-accent));
}

html body #view-profile .profile-gm-vbars small {
  color: var(--pf-dim);
  font-size: 10.5px;
  line-height: 16px;
}

/* ------------------------------------------------------------- Trend --- */

html body #view-profile .profile-gm-trend-badge {
  padding: 3px 9px;
  border: 1px solid var(--pf-line);
  border-radius: 999px;
  background: var(--pf-card-bg-soft);
  color: var(--pf-soft);
  font-size: 11.5px;
  font-weight: 650;
}

html body #view-profile .profile-gm-trend {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 6px;
}

html body #view-profile .profile-gm-trend-axis {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  height: 108px;
  color: var(--pf-dim);
  font-size: 9.5px;
  text-align: right;
}

html body #view-profile .profile-gm-trend-axis span {
  line-height: 1;
  transform: translateY(-3px);
}

html body #view-profile .profile-gm-trend-plot svg {
  display: block;
  width: 100%;
  height: 108px;
}

html body #view-profile .profile-gm-trend-grid {
  stroke: rgba(255, 255, 255, .07);
  stroke-width: 1;
}

html body #view-profile .profile-gm-trend-line {
  fill: none;
  stroke: var(--ar-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

html body #view-profile .profile-gm-trend-dot {
  fill: var(--ar-accent-bright);
}

html body #view-profile .profile-gm-trend-labels {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin-top: 4px;
  color: var(--pf-dim);
  font-size: 9.5px;
  text-align: center;
}

/* -------------------------------------------- Rezensions- und Zeilen ---- */

html body #view-profile .profile-gm-review-rows {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--pf-line);
  list-style: none;
}

html body #view-profile .profile-gm-review-rows > li {
  border-bottom: 1px solid var(--pf-line);
}

html body #view-profile .profile-gm-review-rows > li:last-child {
  border-bottom: 0;
}

html body #view-profile .profile-gm-review-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
  color: inherit;
  text-decoration: none;
}

html body #view-profile .profile-gm-review-row img,
html body #view-profile .profile-gm-review-row .profile-gm-cover-fallback {
  width: 38px;
  height: 38px;
  border-radius: 7px;
  object-fit: cover;
}

html body #view-profile .profile-gm-review-row strong {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 17px;
  color: var(--pf-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-profile .profile-gm-review-ident {
  display: grid;
  gap: 2px;
  min-width: 0;
}

html body #view-profile .profile-gm-review-row q {
  overflow: hidden;
  color: var(--pf-muted);
  font-size: 11.5px;
  font-style: italic;
  line-height: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

html body #view-profile .profile-gm-review-row time {
  color: var(--pf-dim);
  font-size: 11.5px;
  white-space: nowrap;
}

html body #view-profile .profile-gm-score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--pf-text);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

html body #view-profile .profile-gm-score i {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  color: var(--ar-accent-bright);
  font-style: normal;
}

html body #view-profile .profile-gm-score i svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

html body #view-profile .profile-gm-score em {
  color: var(--pf-dim);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

/* ------------------------------------------------------- Tabellenkarte -- */

html body #view-profile .profile-gm-rating-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 12px;
}

html body #view-profile .profile-gm-rating-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  color: var(--pf-text);
  white-space: nowrap;
}

html body #view-profile .profile-gm-rating-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

html body #view-profile .profile-gm-rating-pills button {
  min-height: 30px;
  padding: 0 13px;
  border: 1px solid var(--pf-line);
  border-radius: 999px;
  background: var(--pf-card-bg-soft);
  color: var(--pf-soft);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

html body #view-profile .profile-gm-rating-pills button.active {
  border-color: var(--ar-selected-border);
  background: var(--ar-selected-bg);
  color: #fff;
}

/* Die alte Regel setzt hier eine feste Mindesthoehe und einen linken
   Aussenabstand fuer die Sortierung. */
html body #view-profile .profile-gm-rating-toolbar {
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

html body #view-profile .profile-gm-rating-toolbar .profile-gm-rating-sort {
  margin-left: 0;
}

html body #view-profile .profile-gm-rating-toolbar select {
  min-width: 0;
  width: auto;
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--pf-line);
  border-radius: 999px;
  background: var(--pf-card-bg-soft);
  color: var(--pf-soft);
  font-size: 12px;
}

html body #view-profile .profile-gm-rating-table {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--pf-line);
}

html body #view-profile .profile-gm-rating-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1.5fr) 96px minmax(0, 2fr) 118px 92px 30px;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--pf-line);
  border-radius: 0;
  background: transparent;
  color: var(--pf-soft);
  text-decoration: none;
}

html body #view-profile .profile-gm-rating-row:last-child {
  border-bottom: 0;
}

/* Die alte Regel setzt jeder zweiten Zeile einen rechten Rand. */
html body #view-profile .profile-gm-rating-row:nth-child(odd) {
  border-right: 0;
}

html body #view-profile .profile-gm-rating-row.is-head {
  padding: 0 0 8px;
  color: var(--pf-dim);
  font-size: 11px;
  font-weight: 600;
}

html body #view-profile .profile-gm-rating-row > b {
  color: var(--pf-dim);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
}

html body #view-profile .profile-gm-rt-anime {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

html body #view-profile .profile-gm-rt-anime img,
html body #view-profile .profile-gm-rt-anime .profile-gm-cover-fallback {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  object-fit: cover;
}

html body #view-profile .profile-gm-rt-anime strong {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--pf-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-profile .profile-gm-rt-review {
  min-width: 0;
}

html body #view-profile .profile-gm-rt-review q {
  overflow: hidden;
  color: var(--pf-muted);
  font-size: 11.5px;
  font-style: italic;
  line-height: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

html body #view-profile .profile-gm-rt-review i {
  color: var(--pf-dim);
  font-style: normal;
}

html body #view-profile .profile-gm-rt-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--pf-line);
  border-radius: 999px;
  background: var(--pf-card-bg-soft);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

html body #view-profile .profile-gm-rt-status.is-completed { border-color: rgba(63, 208, 122, .34); color: var(--pf-gruen); }
html body #view-profile .profile-gm-rt-status.is-watching { border-color: rgba(90, 160, 255, .34); color: #7db3ff; }
html body #view-profile .profile-gm-rt-status.is-planned { border-color: rgba(240, 182, 106, .34); color: #f0b66a; }
html body #view-profile .profile-gm-rt-status.is-paused { border-color: rgba(200, 204, 210, .22); color: var(--pf-muted); }
html body #view-profile .profile-gm-rt-status.is-dropped { border-color: rgba(255, 122, 122, .3); color: #ff9a9a; }

html body #view-profile .profile-gm-rt-date {
  color: var(--pf-muted);
  font-size: 11.5px;
  white-space: nowrap;
}

html body #view-profile .profile-gm-rt-action {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-height: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--pf-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

html body #view-profile .profile-gm-rt-action:hover {
  border-color: var(--pf-line);
  background: var(--pf-card-bg-soft);
  color: var(--pf-text);
}

@media (max-width: 1099px) {
  html body #view-profile .profile-gm-rating-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html body #view-profile .profile-gm-rating-average,
  html body #view-profile .profile-gm-rating-dist { grid-column: span 1; }

  html body #view-profile .profile-gm-rating-trend,
  html body #view-profile .profile-gm-rating-recent { grid-column: span 2; }
}

@media (max-width: 760px) {
  html body #view-profile .profile-gm-rating-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  html body #view-profile .profile-gm-rating-average,
  html body #view-profile .profile-gm-rating-dist,
  html body #view-profile .profile-gm-rating-trend,
  html body #view-profile .profile-gm-rating-recent { grid-column: span 1; }

  html body #view-profile .profile-gm-rating-toolbar {
    width: 100%;
    margin-left: 0;
  }

  html body #view-profile .profile-gm-rating-toolbar label {
    flex: 1 1 40%;
  }

  html body #view-profile .profile-gm-rating-toolbar select {
    width: 100%;
  }

  /* Mobil wird aus jeder Tabellenzeile eine Karte. */
  html body #view-profile .profile-gm-rating-row.is-head {
    display: none;
  }

  html body #view-profile .profile-gm-rating-row {
    grid-template-columns: 42px minmax(0, 1fr) 30px;
    grid-template-areas:
      "cover  anime  aktion"
      "cover  score  score"
      "rezension rezension rezension"
      "status status  datum";
    gap: 4px 10px;
    padding: 11px 0;
  }

  html body #view-profile .profile-gm-rating-row > b { display: none; }
  html body #view-profile .profile-gm-rt-anime {
    grid-area: cover / cover / anime / anime;
    grid-template-columns: 42px minmax(0, 1fr);
  }

  html body #view-profile .profile-gm-rt-anime img,
  html body #view-profile .profile-gm-rt-anime .profile-gm-cover-fallback {
    width: 42px;
    height: 42px;
  }

  html body #view-profile .profile-gm-rating-row > .profile-gm-score { grid-area: score; }
  html body #view-profile .profile-gm-rt-review { grid-area: rezension; }
  html body #view-profile .profile-gm-rt-status { grid-area: status; justify-self: start; }
  html body #view-profile .profile-gm-rt-date { grid-area: datum; text-align: right; }
  html body #view-profile .profile-gm-rt-action { grid-area: aktion; }

  html body #view-profile .profile-gm-vbars > div {
    grid-template-rows: 14px 78px 14px;
    gap: 2px;
  }

}

/* ------------------------------------------------- Auswahlfelder Profil -- */
/* Die Auswahlfelder des Projekts werden durch einen Stellvertreter ersetzt.
   Die Vorlage zeigt schmale Pillen, deshalb wird nur dieser gestaltet. */

html body #view-profile .profile-gm-rating-toolbar label {
  display: flex;
  align-items: center;
  min-width: 0;
}

html body #view-profile .profile-gm-rating-toolbar .ar-select {
  min-width: 0;
}

html body #view-profile .profile-gm-rating-toolbar .ar-select-btn {
  min-width: 0;
  width: auto;
  height: 32px;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--pf-line);
  border-radius: 999px;
  background: var(--pf-card-bg-soft);
  color: var(--pf-soft);
  font-size: 12px;
  font-weight: 600;
}

html body #view-profile .profile-gm-rating-toolbar .ar-select-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-profile .profile-gm-rating-toolbar .ar-select.is-open .ar-select-btn {
  border-color: var(--ar-selected-border);
  background: var(--ar-selected-bg);
  color: #fff;
}

/* ========================================================================== */
/* 8. Erinnerungen                                                            */
/* ========================================================================== */
/* Vorlage: oben vier Kennzahlen, darunter links "Heute" und "Diese Woche",
   rechts "Demnaechst" und die Erinnerungs-Einstellungen. */

html body #view-profile .profile-gm-reminder-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pf-gap);
  margin-bottom: var(--pf-gap);
}

html body #view-profile .profile-gm-reminder-kpi {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius);
  background: var(--pf-card-bg);
}

html body #view-profile .profile-gm-reminder-kpi > div {
  display: grid;
  gap: 0;
  min-width: 0;
}

html body #view-profile .profile-gm-reminder-kpi span {
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: var(--pf-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-profile .profile-gm-reminder-kpi b {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 26px;
  color: var(--pf-text);
}

html body #view-profile .profile-gm-reminder-kpi small {
  overflow: hidden;
  font-size: 10.5px;
  line-height: 14px;
  color: var(--pf-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Die alte Regel setzt hier drei Spalten und eine Mindesthoehe. */
/* V2.4.252: "Demnaechst" und "Erinnerungs-Einstellungen" standen in einer
 * zweiten Spalte und begannen dadurch bei 829 px, waehrend "Heute" und
 * "Diese Woche" bei 267 px an der Inhaltskante lagen. Jetzt stehen alle vier
 * Bereiche untereinander an derselben linken Kante wie der Profilkopf und die
 * uebrigen Reiter. Mobil war das ohnehin schon so. */
html body #view-profile .profile-gm-reminder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pf-gap);
  min-height: 0;
  align-items: start;
}

html body #view-profile .release-reminders-list,
html body #view-profile .profile-gm-reminder-side {
  display: grid;
  grid-auto-rows: min-content;
  gap: var(--pf-gap);
  min-width: 0;
}

html body #view-profile .profile-gm-reminder-toolbar {
  min-height: 0;
  margin: 0 0 var(--pf-gap);
}

html body #view-profile .profile-gm-reminder-group > header {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}

html body #view-profile .profile-gm-reminder-group h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  color: var(--pf-text);
}

html body #view-profile .profile-gm-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--ar-accent-soft);
  color: var(--ar-accent-bright);
  font-size: 11.5px;
  font-weight: 700;
}

html body #view-profile .release-reminder-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  grid-template-areas:
    "cover copy  kanal   aktionen"
    "cover copy  zeit    aktionen";
  align-items: center;
  gap: 2px 11px;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid var(--pf-line);
  border-radius: 0;
  background: transparent;
}

html body #view-profile .profile-gm-reminder-group .release-reminder-card:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

html body #view-profile .release-reminder-card.is-paused {
  opacity: .62;
}

html body #view-profile .release-reminder-cover {
  grid-area: cover;
  display: block;
  width: 48px;
  height: 48px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 9px;
  background: var(--pf-card-bg-soft);
  cursor: pointer;
}

html body #view-profile .release-reminder-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html body #view-profile .release-reminder-card-copy {
  grid-area: copy;
  display: grid;
  gap: 1px;
  min-width: 0;
}

html body #view-profile .release-reminder-card-copy h3 {
  margin: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 650;
  line-height: 17px;
  color: var(--pf-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-profile .release-reminder-card-copy p {
  margin: 0;
  font-size: 11.5px;
  line-height: 15px;
  color: var(--ar-accent-bright);
}

html body #view-profile .release-reminder-card-copy time {
  font-size: 11px;
  line-height: 15px;
  color: var(--pf-muted);
}

html body #view-profile .release-reminder-channel {
  grid-area: kanal;
  justify-self: end;
  padding: 3px 9px;
  border: 1px solid var(--pf-line);
  border-radius: 999px;
  background: var(--pf-card-bg-soft);
  color: var(--pf-soft);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

html body #view-profile .release-reminder-countdown {
  grid-area: zeit;
  justify-self: end;
  color: var(--pf-dim);
  font-size: 10.5px;
  white-space: nowrap;
}

html body #view-profile .release-reminder-card .profile-gm-switch {
  grid-area: aktionen;
  align-self: center;
}

html body #view-profile .profile-gm-reminder-actions {
  grid-area: aktionen;
  display: flex;
  align-items: center;
  gap: 2px;
  justify-self: end;
}

/* Schalter und Aktionen teilen sich die letzte Spalte nebeneinander. */
html body #view-profile .release-reminder-card {
  grid-template-columns: 48px minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "cover copy  kanal schalter aktionen"
    "cover copy  zeit  schalter aktionen";
}

html body #view-profile .release-reminder-card .profile-gm-switch {
  grid-area: schalter;
}

/* V2.4.252: .profile-gm-more (Kebab an einer Erinnerung) ist entfernt.
   Die Regeln gelten nur noch fuer den Loeschen-Knopf. */
html body #view-profile .profile-gm-delete {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--pf-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

html body #view-profile .profile-gm-delete:hover {
  border-color: var(--pf-line);
  background: var(--pf-card-bg-soft);
  color: var(--pf-text);
}

/* ----------------------------------------------- Einstellungszeilen ------ */

html body #view-profile .profile-gm-setting-rows {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--pf-line);
  list-style: none;
}

/* Seit 2026-09-26 ohne Symbolspalte: Text links, Wert rechts. */
html body #view-profile .profile-gm-setting-rows > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--pf-line);
  color: var(--pf-soft);
  font-size: 13px;
}

html body #view-profile .profile-gm-setting-rows > li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

html body #view-profile .profile-gm-setting-rows > li > span:first-child {
  display: grid;
  gap: 1px;
  min-width: 0;
}

html body #view-profile .profile-gm-setting-rows strong {
  font-size: 12.5px;
  font-weight: 650;
  line-height: 17px;
  color: var(--pf-text);
}

html body #view-profile .profile-gm-setting-rows small {
  font-size: 11px;
  line-height: 15px;
  color: var(--pf-muted);
}

html body #view-profile .profile-gm-setting-rows b {
  color: var(--pf-soft);
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
}

html body #view-profile .profile-gm-set-go {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--pf-line);
  border-radius: 8px;
  background: var(--pf-card-bg-soft);
  color: var(--pf-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

html body #view-profile .profile-gm-set-go:hover:not(:disabled) {
  border-color: var(--ar-selected-border);
  color: var(--pf-text);
}

html body #view-profile .profile-gm-next-reminder {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-card-bg-soft);
}

html body #view-profile .profile-gm-next-reminder img,
html body #view-profile .profile-gm-next-reminder .profile-gm-cover-fallback {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
}

html body #view-profile .profile-gm-next-reminder div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

html body #view-profile .profile-gm-next-reminder span {
  font-size: 10.5px;
  color: var(--ar-accent-bright);
  text-transform: uppercase;
  letter-spacing: .4px;
}

html body #view-profile .profile-gm-next-reminder strong {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--pf-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-profile .profile-gm-next-reminder small {
  font-size: 11px;
  color: var(--pf-muted);
}

html body #view-profile .profile-gm-reminder-note {
  margin: var(--pf-gap) 0 0;
  color: var(--pf-dim);
  font-size: 11.5px;
}

/* ========================================================================== */
/* 9. Einstellungen                                                           */
/* ========================================================================== */
/* Vorlage: drei Spalten mit je einer Karte pro Bereich. "Verbundene Konten"
   entfaellt nach Absprache; "Darstellung" ist mit der waehlbaren Akzentfarbe
   in V2.4.249 entfallen. */

html body #view-profile .profile-gm-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: var(--pf-gap);
  align-items: start;
}

html body #view-profile .profile-gm-settings-grid > .profile-gm-card {
  display: grid;
  align-content: start;
  gap: 10px;
  grid-column: auto;
  grid-row: auto;
}

/* V2.4.252: Mit dem Wegfall von "Konto & Aktionen" bleiben vier Karten. Bei
   drei Spalten stand danach nur noch "Bibliothek & Daten" in der zweiten
   Reihe, und zwar erst unterhalb der sehr hohen Profilkarte - zwei Drittel
   der Reihe blieben leer. Die Profilkarte nimmt jetzt beide Reihen ein, die
   drei kurzen Karten verteilen sich daneben. */
html body #view-profile .profile-gm-settings-grid > .profile-gm-account-card {
  grid-row: span 2;
}

/* Desktop, drei Spalten: "Bibliothek & Daten" steht in der zweiten Reihe
   unter "Benachrichtigungen", begann aber erst unter der hoechsten Karte der
   ersten Reihe. Zwei Ursachen: Die erste Reihe war so hoch wie "Datenschutz"
   (samt dort eingehaengter Kontoloeschung), und die ueber beide Reihen
   gespannte Profilkarte verteilte ihre Resthoehe zusaetzlich auf beide
   Reihen - gemessen 130 px (1366) bzw. 123,5 px (1920) statt 12 px Abstand.
   Jetzt spannt auch "Datenschutz" beide Reihen, und die Resthoehe der
   gespannten Karten geht ausschliesslich in die flexible zweite Reihe. Die
   erste Reihe ist damit genau so hoch wie "Benachrichtigungen". DOM- und
   Tab-Reihenfolge bleiben unveraendert; App und Mobil sind nicht betroffen. */
@media (min-width: 1100px) {
  html:not(.capacitor-shell) body #view-profile .profile-gm-settings-grid {
    grid-template-rows: auto 1fr;
  }

  html:not(.capacitor-shell) body #view-profile .profile-gm-settings-grid > .profile-gm-datenschutz-card {
    grid-row: span 2;
  }
}

/* V2.4.252: Die Kontoloeschung war die letzte Zeile der Karte
   "Konto & Aktionen". Die Karte ist entfallen; die Aktion steht jetzt als
   abschliessende Gefahrenaktion unter dem Raster rechts aussen, abgesetzt von
   den gewoehnlichen Einstellungen. */
html body #view-profile .profile-gm-settings-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--pf-gap);
}

html body #view-profile .profile-gm-settings-footer .danger-action {
  flex: 0 0 auto;
}

/* V2.4.252: Der Kopf war als Raster mit fuehrendem Symbol gedacht. Die
   allgemeinere Regel "html body #view-profile .profile-gm-card > header"
   weiter oben hat einen Typselektor mehr und damit das Raster ueberstimmt.
   Uebrig blieb ein Flex-Kopf mit space-between: Symbol ganz links, Textblock
   ganz rechts. Weil der Textblock unter Flex nur so breit ist wie sein
   laengster Satz, begann jede Ueberschrift an einer anderen Stelle - gemessen
   50, 65, 109 und 131 px Einzug in vier gleich breiten Karten.
   Jetzt gewinnt das Raster ueber die zusaetzliche Klasse im Selektor. Der
   Titel steht buendig an der Inhaltskante der Karte, das Symbol rechts -
   dasselbe Muster wie bei den uebrigen Profilkarten, die links den Titel und
   rechts eine Marke tragen. */
html body #view-profile .profile-gm-card > header.profile-gm-set-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}

/* Seit 2026-09-26 tragen "Profil", "Benachrichtigungen", "Datenschutz" und
   "Bibliothek & Daten" kein Kopfsymbol mehr; ihr Kopf hat nur die
   Textspalte. */
html body #view-profile .profile-gm-card > header.profile-gm-set-head.is-ohne-symbol {
  grid-template-columns: minmax(0, 1fr);
}

html body #view-profile .profile-gm-set-head > div {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

html body #view-profile .profile-gm-set-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  color: var(--pf-text);
}

html body #view-profile .profile-gm-set-head p {
  margin: 1px 0 0;
  font-size: 11.5px;
  line-height: 15px;
  color: var(--pf-muted);
}

html body #view-profile .profile-gm-settings-grid label {
  display: grid;
  gap: 5px;
  font-size: 11.5px;
  color: var(--pf-muted);
}

/* Mindestens 15px: die Pruefung aus V2.4.195 haelt kleinere Eingabefelder
   fuer nicht gut genug lesbar. */
html body #view-profile .profile-gm-settings-grid label input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-card-bg-soft);
  color: var(--pf-text);
  font-size: 15px;
}

html body #view-profile .profile-gm-settings-grid .field-hint {
  font-size: 10.5px;
  line-height: 14px;
  color: var(--pf-dim);
}

html body #view-profile .profile-gm-set-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

html body #view-profile .profile-gm-set-actions button {
  flex: 1 1 auto;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--pf-radius-sm);
  font-size: 12.5px;
}

html body #view-profile .profile-gm-info-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--pf-line);
  list-style: none;
}

html body #view-profile .profile-gm-info-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--pf-line);
  color: var(--pf-muted);
  font-size: 12px;
}

html body #view-profile .profile-gm-info-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

html body #view-profile .profile-gm-info-list b {
  color: var(--pf-text);
  font-size: 12px;
  font-weight: 650;
}

/* ========================================================================== */
/* 11. Mobil - Bewertungen, Erinnerungen, Einstellungen                       */
/* ========================================================================== */

@media (max-width: 1099px) {
  html body #view-profile .profile-gm-reminder-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 760px) {
  html body #view-profile .profile-gm-reminder-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  html body #view-profile .profile-gm-reminder-kpi {
    padding: 11px;
    gap: 10px;
  }

  html body #view-profile .profile-gm-reminder-kpi b { font-size: 19px; line-height: 23px; }

  html body #view-profile .profile-gm-reminder-layout {
    grid-template-columns: minmax(0, 1fr);
  }

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

  /* In einer Spalte wuerde die Zeilenspanne eine leere Reihe erzeugen. */
  html body #view-profile .profile-gm-settings-grid > .profile-gm-account-card {
    grid-row: auto;
  }

  html body #view-profile .release-reminder-card {
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    grid-template-areas:
      "cover copy  schalter aktionen"
      "cover kanal  kanal   zeit";
    gap: 4px 10px;
  }

  html body #view-profile .release-reminder-cover {
    width: 44px;
    height: 44px;
  }

  html body #view-profile .release-reminder-channel {
    justify-self: start;
  }

  html body #view-profile .profile-gm-reminder-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  html body #view-profile .profile-gm-reminder-toolbar .release-reminders-head-actions {
    display: flex;
    gap: 8px;
  }

  html body #view-profile .profile-gm-reminder-toolbar .release-reminders-head-actions > button {
    flex: 1 1 0;
  }
}

/* ========================================================================== */
/* 12. Anime-Detailansicht                                                    */
/* ========================================================================== */
/* Vorlage: Banner mit Cover links, Titel, Merkmalen, Kurztext und der
   Aktionszeile; darunter gleich breite Reiterpillen. Die Karten folgen
   derselben Sprache wie das Profil. */

html body #view-detail .detail-gm-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  line-height: 0;
}

html body #view-detail .detail-gm-icon svg,
html body #view-detail .detail-gm-icon-btn svg,
html body #view-detail .detail-eprow-meta svg,
html body #view-detail .detail-gm-chevron svg,
html body #view-detail .detail-link-icon svg,
html body #view-detail .detail-gm-plan-icon svg,
html body #view-detail .detail-gm-info-list dt svg,
html body #view-detail .detail-quick-action svg,
html body #view-detail .detail-gm-season-tiles svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body #view-detail .detail-gm-icon.is-big {
  width: 42px;
  height: 42px;
}

html body #view-detail .detail-gm-icon.is-big svg,
html body #view-detail .detail-gm-chip.is-score svg,
html body #view-detail .detail-stat-score svg,
html body #view-detail .detail-gm-review-score svg {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.4;
}

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

html body #view-detail .detail-gm-hero .detail-hero-banner {
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  min-height: 232px;
  padding: 16px 20px !important;
  overflow: hidden;
}

/* Die alte Regel blendet das Cover aus. Die Vorlage zeigt es links im Banner. */
html body #view-detail .detail-gm-hero .detail-poster {
  position: relative;
  z-index: 5;
  display: block !important;
  width: 156px;
  height: 206px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
}

html body #view-detail .detail-gm-hero .detail-title {
  padding: 0 !important;
  gap: 0;
}

html body #view-detail .detail-gm-hero h1.detail-main-title,
html body #view-detail .detail-gm-hero .detail-main-title {
  font-family: var(--font-display) !important;
  font-size: 34px !important;
  line-height: 1.1 !important;
}

html body #view-detail .detail-gm-hero .detail-reference-alt-title {
  margin: 3px 0 0 !important;
  font-size: 14.5px !important;
  color: #c8ccd2 !important;
}

html body #view-detail .detail-gm-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
}

html body #view-detail .detail-gm-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  background: rgba(12, 15, 20, .62);
  color: #dde1e6;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

html body #view-detail .detail-gm-chip:first-child {
  border-color: var(--ar-accent-line, rgba(255, 255, 255, .2));
  background: var(--ar-accent-soft);
  color: var(--ar-accent-bright);
}

html body #view-detail .detail-gm-chip.is-score {
  color: #fff;
}

html body #view-detail .detail-gm-chip.is-score .detail-gm-icon {
  color: var(--ar-accent-bright);
}

html body #view-detail .detail-gm-chip.is-score small {
  color: #9aa1a9;
  font-weight: 500;
}

html body #view-detail .detail-gm-tagline {
  margin: 12px 0 0 !important;
  max-width: 620px;
  overflow: hidden;
  color: #dfe3e8;
  font-size: 13.5px;
  line-height: 19px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

html body #view-detail .detail-gm-actions {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 15px !important;
}

html body #view-detail .detail-gm-actions .detail-list-action {
  min-height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 650;
}

/* V2.4.250: Im Knopf standen ein Plus UND zwei weisse Striche darunter.
 *
 * Das Symbol wird von zwei Blaettern gebaut. styles-v2-4-141.css zeichnet ein
 * Listensymbol: ::before ist ein waagerechter Strich, dessen
 * "box-shadow: 0 6px 0 currentColor, 0 12px 0 currentColor" zwei weitere
 * Striche darunter erzeugt; ::after traegt das Pluszeichen als Text.
 * material-reference-detail-v2-4-194.css baut daraus ein Pluskreuz: ::before
 * waagerecht, ::after senkrecht, beide in der Markenfarbe. Dabei werden
 * background, Groesse, Lage und transform neu gesetzt - box-shadow aber nicht.
 * Die beiden Schattenkopien blieben deshalb stehen und wurden weiss, weil der
 * Knopftext weiss ist. Gemessen bei 1440 px:
 * "rgb(255,255,255) 0 6px 0, rgb(255,255,255) 0 12px 0".
 *
 * Hier faellt nur der Schatten weg. Das Kreuz, seine Farbe, Groesse und
 * Zentrierung bleiben unveraendert. */
html body #view-detail .detail-list-action .list-plus-icon::before,
html body #view-detail .detail-list-action .list-plus-icon::after {
  box-shadow: none;
}

html body #view-detail .detail-gm-icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: rgba(12, 15, 20, .66);
  color: #dde1e6;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

html body #view-detail .detail-gm-icon-btn:hover,
html body #view-detail .detail-gm-icon-btn.is-active {
  border-color: var(--ar-selected-border);
  background: var(--ar-selected-bg);
  color: #fff;
}

/* V2.4.248: Glocke und Teilen sind jetzt derselbe Knopf.
 *
 * Gemessen bei 1440 px war die Glocke 50 x 42 px ohne Innenabstand, Teilen
 * dagegen 40 x 42 px mit 9 px. Zwei aeltere Blaetter greifen allein auf die
 * Glocke zu, weil sie an deren Zweitklasse .detail-reminder-action haengen:
 *
 *   material-redesign-v2-4-194.css
 *     html body #view-detail :where(.detail-fav-action, .detail-reminder-action)
 *       { width: 42px !important; padding: 0 !important }
 *     Das !important schlaegt die Regel oben trotz hoeherer Spezifitaet.
 *
 *   styles-v2-4-141.css
 *     .detail-reminder-action { width: 50px; min-width: 50px; padding: 0 }
 *     min-width bleibt unwidersprochen, weil die Regel oben nur width setzt -
 *     aus 42 werden dadurch 50 px.
 *
 * Beide werden hier fuer die Aktionszeile der Detailansicht zurueckgenommen.
 * Massgeblich ist ausschliesslich .detail-gm-icon-btn; die Glocke behaelt
 * ihre eigene Klasse fuer Zustaende (is-active, is-paused) und ihre Funktion.
 */
html body #view-detail .detail-gm-actions .detail-gm-icon-btn {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 9px !important;
  border-radius: 50% !important;
  border-width: 1px !important;
  align-self: center !important;
}

/* Unterhalb der Desktopgrenze gelten die 32 px, die V2.4.247 fuer die
   Symbolknoepfe gesetzt hat. Die Werte stehen hier mit, weil das min-width
   von oben sonst auch mobil auf 40 px klemmen wuerde. */
@media (max-width: 760px) {
  html body #view-detail .detail-gm-actions .detail-gm-icon-btn {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 7px !important;
  }
}

/* Die aktive Glocke trug aus styles-v2-4-141.css noch einen rotbraunen
 * Schlagschatten, den Teilen nie hatte. Flaeche und Rand kommen bereits aus
 * .detail-gm-icon-btn.is-active und damit aus der Akzentfarbe; der Schatten
 * faellt weg, damit beide Knoepfe auch im aktiven Zustand gleich wirken.
 * Der goldene Punkt oben rechts bleibt - er meldet eine gesetzte Erinnerung
 * und ist kein Formunterschied. */
html body #view-detail .detail-gm-actions .detail-gm-icon-btn.is-active {
  box-shadow: none !important;
}

/* ---------------------------------------------------------------- Reiter -- */
/* Die alte Regel zeichnet eine Unterstrichleiste. Die Vorlage zeigt Pillen. */

html body #view-detail .detail-gm-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 9px;
  height: auto;
  margin-top: 12px;
  padding: 0;
  border: 0;
  overflow: visible;
}

html body #view-detail .detail-gm-tabs .detail-tab {
  min-width: 0;
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 999px;
  background: #101419;
  color: #c8ccd2;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}

html body #view-detail .detail-gm-tabs .detail-tab.is-active {
  border-color: var(--ar-selected-border);
  background: var(--ar-selected-bg);
  color: #fff;
}

html body #view-detail .detail-gm-tabs .detail-tab::after {
  display: none;
}

/* ----------------------------------------------------------------- Karten - */

html body #view-detail .detail-card {
  padding: 13px 15px 15px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 12px;
  background: #101419;
  box-shadow: none;
}

html body #view-detail .detail-card-head {
  margin-bottom: 10px;
}

html body #view-detail .detail-card-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  color: #fff;
}

html body #view-detail .detail-card-kicker {
  color: #a3a9b1;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

html body #view-detail .detail-card-action {
  color: var(--ar-accent-bright);
  font-size: 11.5px;
  font-weight: 600;
}

/* -------------------------------------------------------------- Besetzung */

html body #view-detail .detail-grid--cast {
  display: grid;
  grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

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

html body #view-detail .detail-gm-char-grid.is-support {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

html body #view-detail .detail-gm-char {
  display: grid;
  align-content: start;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 10px;
  background: #0d1116;
}

html body #view-detail .detail-gm-char-portrait {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #161b22;
}

html body #view-detail .detail-gm-char-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html body #view-detail .detail-gm-char-copy {
  display: grid;
  gap: 3px;
  padding: 9px 10px 10px;
  min-width: 0;
}

html body #view-detail .detail-gm-char-copy strong {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 16px;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-detail .detail-gm-char-copy > small {
  overflow: hidden;
  color: #a3a9b1;
  font-size: 10.5px;
  line-height: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

html body #view-detail .detail-gm-role-badge {
  justify-self: start;
  margin-top: 3px;
  padding: 2px 8px;
  border: 1px solid rgba(90, 160, 255, .3);
  border-radius: 999px;
  background: rgba(90, 160, 255, .12);
  color: #7db3ff;
  font-size: 10px;
  font-weight: 650;
}

html body #view-detail .detail-gm-role-badge.is-main {
  border-color: var(--ar-selected-border);
  background: var(--ar-accent-soft);
  color: var(--ar-accent-bright);
}

html body #view-detail .detail-gm-va-list {
  display: grid;
  gap: 5px;
  margin-top: 6px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, .075);
}

html body #view-detail .detail-gm-va {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

html body #view-detail .detail-gm-va-flag {
  display: block;
  width: 14px;
  height: 10px;
  border-radius: 2px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3);
  position: relative;
}

html body #view-detail .detail-gm-va-flag::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d3222a;
  transform: translate(-50%, -50%);
}

html body #view-detail .detail-gm-va b {
  display: block;
  overflow: hidden;
  font-size: 11px;
  font-weight: 650;
  line-height: 14px;
  color: #e7eaee;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-detail .detail-gm-va small {
  display: block;
  color: #7f868e;
  font-size: 9.5px;
  line-height: 12px;
}

html body #view-detail .detail-gm-staff-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .075);
  list-style: none;
}

html body #view-detail .detail-gm-staff-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 11px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .075);
}

html body #view-detail .detail-gm-staff-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

html body #view-detail .detail-gm-staff-avatar {
  display: block;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: 9px;
  background: #161b22;
}

html body #view-detail .detail-gm-staff-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html body #view-detail .detail-gm-staff-row small {
  display: block;
  color: #a3a9b1;
  font-size: 10.5px;
  line-height: 14px;
}

html body #view-detail .detail-gm-staff-row strong {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 17px;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-detail .detail-gm-chevron {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: #7f868e;
}

html body #view-detail .detail-gm-facts {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, .075);
}

html body #view-detail .detail-gm-facts > div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .075);
}

html body #view-detail .detail-gm-facts > div:last-child {
  border-bottom: 0;
}

html body #view-detail .detail-gm-facts dt {
  color: #a3a9b1;
  font-size: 11.5px;
}

html body #view-detail .detail-gm-facts dd {
  margin: 0;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
}

/* ----------------------------------------------------------------- Folgen */

html body #view-detail .detail-grid--episodes {
  display: grid;
  grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr);
  grid-template-rows: auto;
  gap: 12px;
  align-items: start;
}

html body #view-detail .detail-gm-filter-card .detail-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* V2.4.248: Die Filterkarte stand neben "Staffel auswaehlen" in einem
 * zweispaltigen Balken. Die Nachbarkarte ist entfallen; ueber die volle
 * Spaltenbreite blieben neben den drei Pillen rund 500 px leer. Ueberschrift
 * und Pillen stehen deshalb in einer Zeile, die Pillen rechtsbuendig. Die
 * Karte behaelt Rahmen, Radius und Innenabstand aller anderen Karten. */
html body #view-detail .detail-gm-filter-card {
  display: flex !important;
  /* .detail-card ist eine Spalte (material-reference-detail-v2-4-194.css).
     Fuer diese eine Karte wird daraus eine Zeile. */
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 12px;
}

html body #view-detail .detail-gm-filter-card .detail-card-head {
  margin-bottom: 0;
}

/* Unter 760 px reicht die Breite fuer die Zeile nicht mehr - dort stehen
   Ueberschrift und Pillen wieder untereinander. */
@media (max-width: 760px) {
  html body #view-detail .detail-gm-filter-card {
    display: block !important;
  }

  html body #view-detail .detail-gm-filter-card .detail-card-head {
    margin-bottom: 10px;
  }
}

html body #view-detail .detail-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 999px;
  background: #0d1116;
  color: #c8ccd2;
  font-size: 12.5px;
  font-weight: 600;
}

html body #view-detail .detail-chip.is-active {
  border-color: var(--ar-selected-border);
  background: var(--ar-selected-bg);
  color: #fff;
}

html body #view-detail .detail-eplist {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .075);
}

/* PV-012: Die Folgenliste als Block statt Grid. Bei gap 0 und vollbreiten
   Zeilen ist die Darstellung identisch, das Layout beim Reiterwechsel aber
   deutlich billiger (jede Zeile bleibt ein eigenes Grid). */
html body #view-detail .detail-eplist[data-detail-episode-table] {
  display: block;
}

html body #view-detail .detail-eprow {
  display: grid;
  grid-template-columns: 26px 96px minmax(0, 1fr) auto 30px;
  align-items: center;
  gap: 12px;
  min-height: 0;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .075);
}

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

html body #view-detail .detail-eprow-num {
  color: #a3a9b1;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

html body #view-detail .detail-eprow-thumb {
  position: relative;
  display: block;
  width: 96px;
  height: 56px;
  overflow: hidden;
  border-radius: 8px;
  background: #161b22;
}

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

/* V2.4.251: Steht fuer eine Folge kein eigenes Vorschaubild zur Verfuegung,
 * zeigt die Zeile den Backdrop des Anime. Er muss als Ersatz erkennbar sein
 * und darf sich nicht als Episodenbild ausgeben: abgedunkelt, entsaettigt und
 * mit einer feinen Schraffur darueber. So bleibt die Zeile bebildert, ohne
 * etwas zu behaupten. AniList fuehrt fuer rund 14 Prozent der beliebten Titel
 * keine Episodenbilder - ohne diesen Rueckfall waeren das leere Kaesten. */
html body #view-detail .detail-eprow-thumb img.is-backdrop {
  filter: saturate(.55) brightness(.52);
}

html body #view-detail .detail-eprow-thumb:has(img.is-backdrop)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, .05) 0 2px,
    rgba(255, 255, 255, 0) 2px 6px
  );
}

html body #view-detail .detail-eprow-thumb-fallback {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(140deg, #1b2029, #12161c);
}

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

/* V2.4.249: Das Abzeichen ist in material-reference-detail-v2-4-194.css als
 * inline-flex mit "flex: 0 0 auto" fuer eine Flex-Zeile gebaut. Hier liegt es
 * in einem Raster und wurde deshalb ueber die volle Spaltenbreite gezogen -
 * ein Balken statt einer Pille. Solange "Canon" an fast jeder Zeile stand,
 * fiel das kaum auf; jetzt, wo nur noch Filler erscheint, schon. */
html body #view-detail .detail-eprow-type {
  justify-self: start;
}

/* V2.4.252: Das Filler-Abzeichen ist blau. Vorher trug es das Gelb aus
 * material-reference-detail-v2-4-194.css, das dort zwischen Filler (gelb) und
 * Mixed (blau) unterschied. Mixed wird nicht mehr angezeigt, also ist Blau
 * frei und wird zur einen Kennzeichnung, die es noch gibt. Gedeckt, nicht
 * leuchtend: dieselbe Flaechen- und Randlogik wie die uebrigen Pillen der
 * Detailansicht. Das semantische Rot der Danger-Aktionen bleibt unberuehrt. */
html body #view-detail .detail-eprow-type.episode-filler {
  border: 1px solid rgba(91, 156, 246, .32);
  background: rgba(91, 156, 246, .14);
  color: #9ec6ff;
  letter-spacing: .01em;
}

html body #view-detail .detail-eprow-title {
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 650;
  line-height: 17px;
  color: #fff;
  white-space: normal;
}

html body #view-detail .detail-eprow-meta {
  display: grid;
  gap: 3px;
  justify-items: end;
  color: #a3a9b1;
  font-size: 11.5px;
}

html body #view-detail .detail-eprow-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

html body #view-detail .detail-eprow-meta svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}

html body #view-detail .detail-eprow-done {
  color: #3fd07a;
  font-weight: 650;
}

html body #view-detail .detail-eprow-stream {
  color: var(--ar-accent-bright);
  font-weight: 600;
  text-decoration: none;
}

html body #view-detail .detail-gm-season-overview {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

html body #view-detail .detail-gm-season-overview b {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 23px;
  color: #fff;
}

html body #view-detail .detail-gm-season-overview small {
  display: block;
  margin-bottom: 6px;
  color: #a3a9b1;
  font-size: 11.5px;
}

html body #view-detail .detail-gm-season-overview em {
  color: var(--ar-accent-bright);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

html body #view-detail .detail-gm-season-overview .detail-progress-track {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

html body #view-detail .detail-gm-season-overview .detail-progress-track b {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ar-accent);
}

html body #view-detail .detail-gm-season-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

html body #view-detail .detail-gm-season-tiles article {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 10px 6px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 9px;
  background: #0d1116;
  text-align: center;
}

html body #view-detail .detail-gm-season-tiles svg {
  width: 16px;
  height: 16px;
  color: var(--ar-accent-bright);
}

html body #view-detail .detail-gm-season-tiles b {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

html body #view-detail .detail-gm-season-tiles small {
  color: #a3a9b1;
  font-size: 10px;
}

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

html body #view-detail .detail-quick-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 9px;
  background: #0d1116;
  color: #c8ccd2;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

html body #view-detail .detail-quick-action svg {
  width: 15px;
  height: 15px;
}

html body #view-detail .detail-quick-action.is-primary {
  border-color: var(--ar-selected-border);
  background: var(--ar-selected-bg);
  color: #fff;
}

html body #view-detail .detail-quick-until {
  display: grid;
  gap: 5px;
  color: #a3a9b1;
  font-size: 11.5px;
}

html body #view-detail .detail-quick-until input {
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 9px;
  background: #0d1116;
  color: #fff;
  font-size: 12.5px;
}

html body #view-detail .detail-gm-tagrow {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

html body #view-detail .detail-tag {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background: #0d1116;
  color: #c8ccd2;
  font-size: 11.5px;
}

html body #view-detail .detail-tag.is-genre {
  border-color: var(--ar-selected-border);
  color: var(--ar-accent-bright);
}

/* ------------------------------------------------------------ Rezensionen */

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

html body #view-detail .detail-gm-review-score {
  display: flex;
  align-items: center;
  gap: 12px;
}

html body #view-detail .detail-gm-review-score .detail-gm-icon {
  color: var(--ar-accent-bright);
}

html body #view-detail .detail-gm-review-score b {
  display: block;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 34px;
  color: #fff;
}

html body #view-detail .detail-gm-review-score b em {
  margin-left: 5px;
  color: #a3a9b1;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
}

html body #view-detail .detail-gm-review-score small {
  display: block;
  margin-top: 2px;
  color: #a3a9b1;
  font-size: 11.5px;
}

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

html body #view-detail .detail-gm-stars li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  color: #c8ccd2;
  font-size: 11.5px;
}

html body #view-detail .detail-gm-stars i {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

html body #view-detail .detail-gm-stars i b {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ar-accent);
}

html body #view-detail .detail-gm-stars small {
  color: #e7eaee;
  font-weight: 650;
  text-align: right;
}

html body #view-detail .detail-gm-review-cta {
  display: grid;
  gap: 8px;
}

html body #view-detail .detail-gm-review-cta .detail-primary-action,
html body #view-detail .detail-gm-review-cta .detail-secondary-action {
  justify-content: center;
  min-height: 38px;
  border-radius: 9px;
  font-size: 12.5px;
}

html body #view-detail .detail-gm-review-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

html body #view-detail .detail-grid--reviews {
  display: grid;
  grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}


/* ---------------------------------------------------------------- Details */

html body #view-detail .detail-grid--details {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

html body #view-detail .detail-gm-plot {
  margin: 0;
  color: #dfe3e8;
  font-size: 13px;
  line-height: 20px;
}

html body #view-detail .detail-gm-info-list {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, .075);
}

html body #view-detail .detail-gm-info-list > div {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .075);
}

html body #view-detail .detail-gm-info-list dt {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  color: #a3a9b1;
  font-size: 11.5px;
}

html body #view-detail .detail-gm-info-list dt svg {
  color: #7f868e;
}

html body #view-detail .detail-gm-info-list dd {
  margin: 0;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

html body #view-detail .detail-gm-plan {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 10px;
  background: #0d1116;
}

html body #view-detail .detail-gm-plan-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 10px;
  background: var(--ar-accent-soft);
  color: var(--ar-accent-bright);
}

html body #view-detail .detail-gm-plan strong {
  display: block;
  font-size: 12.5px;
  font-weight: 650;
  color: #fff;
}

html body #view-detail .detail-gm-plan small {
  display: block;
  color: #a3a9b1;
  font-size: 11px;
}

html body #view-detail .detail-gm-plan-state {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ar-accent);
  color: var(--ar-accent-on, #fff);
  font-size: 11px;
  font-weight: 650;
}

html body #view-detail .detail-gm-plan-next {
  grid-column: 1 / -1;
  display: grid;
  gap: 1px;
  margin-top: 8px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, .075);
}

html body #view-detail .detail-gm-plan-next small {
  color: #a3a9b1;
  font-size: 11px;
}

html body #view-detail .detail-gm-plan-next strong {
  font-size: 13px;
  color: #fff;
}

html body #view-detail .detail-gm-plan-next em {
  color: var(--ar-accent-bright);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 650;
}

html body #view-detail .detail-link-rows {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .075);
}

html body #view-detail .detail-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) 16px;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .075);
  color: inherit;
  text-decoration: none;
}

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

html body #view-detail .detail-link-label {
  overflow: hidden;
  color: #e7eaee;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-detail .detail-link-value {
  overflow: hidden;
  color: #a3a9b1;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-detail .detail-link-icon {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: #7f868e;
}

html body #view-detail .detail-stat-rows {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .075);
}

html body #view-detail .detail-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .075);
  color: #a3a9b1;
  font-size: 11.5px;
}

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

html body #view-detail .detail-stat-row strong {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

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

html body #view-detail .detail-stat-score i {
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
  color: var(--ar-accent-bright);
}

html body #view-detail .detail-stat-score i svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: currentColor;
}

/* ========================================================================== */
/* 13. Mobil - Anime-Detailansicht                                            */
/* ========================================================================== */

@media (max-width: 1099px) {
  html body #view-detail .detail-gm-char-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

}

@media (max-width: 760px) {
  html body #view-detail .detail-gm-hero .detail-hero-banner {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
    padding: 14px !important;
  }

  html body #view-detail .detail-gm-hero .detail-poster {
    width: 96px;
    height: 128px;
    align-self: start;
  }

  html body #view-detail .detail-gm-hero h1.detail-main-title,
  html body #view-detail .detail-gm-hero .detail-main-title {
    font-size: 20px !important;
  }

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

  html body #view-detail .detail-gm-chips {
    gap: 6px;
    margin-top: 9px;
  }

  html body #view-detail .detail-gm-chip {
    height: 22px;
    padding: 0 8px;
    font-size: 10.5px;
  }

  /* Die Kurzbeschreibung entfaellt mobil - die Vorlage zeigt sie dort nicht. */
  html body #view-detail .detail-gm-tagline {
    display: none;
  }

  html body #view-detail .detail-gm-actions {
    grid-column: 1 / -1;
    margin-top: 12px !important;
  }

  html body #view-detail .detail-gm-actions .detail-list-action {
    flex: 1 1 auto;
    min-height: 36px;
    padding: 0 14px;
    font-size: 12.5px;
  }

  html body #view-detail .detail-gm-icon-btn {
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 8px;
  }

  html body #view-detail .detail-gm-tabs {
    grid-auto-columns: max-content;
    overflow-x: auto;
    scrollbar-width: none;
  }

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

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

  html body #view-detail .detail-gm-char-grid,
  html body #view-detail .detail-gm-char-grid.is-support {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 132px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  html body #view-detail .detail-gm-char-grid::-webkit-scrollbar {
    height: 0;
  }

  html body #view-detail .detail-eprow {
    grid-template-columns: 22px 72px minmax(0, 1fr) 28px;
    grid-template-areas:
      "nr thumb titel status"
      "nr thumb meta  status";
    gap: 3px 10px;
  }

  /* V2.4.249: material-mobile-fixes-v2-4-244.css gibt der Bildspalte mobil
   * 52 px und ist mit ".detail-eplist .detail-eprow" spezifischer als die
   * Regel oben. Gemessen war der Rahmen dadurch 52 x 44 statt 72 x 44 -
   * ein Seitenverhaeltnis von 1.18 statt 1.64. Solange das Vorschaubild ein
   * Play-Overlay trug, fiel das nicht auf; seit V2.4.248 ist es die einzige
   * Bildinformation der Zeile und wurde an den Seiten stark beschnitten.
   * Dieselben Selektoren, nur die Bildspalte auf die vorgesehene Breite. */
  html body #view-detail .detail-eplist.has-no-dates.has-no-streams .detail-eprow,
  html body #view-detail .detail-eplist.has-no-dates .detail-eprow,
  html body #view-detail .detail-eplist.has-no-streams .detail-eprow,
  html body #view-detail .detail-eplist .detail-eprow {
    grid-template-columns: 22px 72px minmax(0, 1fr) 30px;
  }

  html body #view-detail .detail-eplist.is-compact.has-no-dates.has-no-streams .detail-eprow,
  html body #view-detail .detail-eplist.is-compact.has-no-dates .detail-eprow,
  html body #view-detail .detail-eplist.is-compact.has-no-streams .detail-eprow,
  html body #view-detail .detail-eplist.is-compact .detail-eprow {
    grid-template-columns: 20px 64px minmax(0, 1fr) 28px;
  }

  html body #view-detail .detail-eprow-num { grid-area: nr; }
  html body #view-detail .detail-eprow-thumb { grid-area: thumb; width: 72px; height: 44px; }
  html body #view-detail .detail-eprow-copy { grid-area: titel; }
  /* V2.4.249: Laufzeit, Datum und Anbieter standen mobil in drei erzwungenen
   * Rasterspalten (57 + 103 + 60 px plus Abstaende = 240 px). Verfuegbar sind
   * bei 360 px aber nur 140 px, also lief der Anbieterlink nach rechts aus der
   * Zeile. Als umbrechende Reihe passt sich die Gruppe der Breite an; der Link
   * rutscht bei Bedarf in eine zweite Zeile, statt abgeschnitten zu werden. */
  html body #view-detail .detail-eprow-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 3px 10px;
    min-width: 0;
  }
  html body #view-detail .detail-eprow-status { grid-area: status; }

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

  html body #view-detail .detail-gm-info-list > div {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }

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

  html body #view-detail .detail-gm-season-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ------------------------------------------------ Ruecksetzer Kartenraster */
/* material-reference-detail-v2-4-194.css setzt einzelnen Karten feste Spalten
   und Mindesthoehen des alten Aufbaus. Die Karten liegen jetzt in Spalten,
   deshalb wird die Platzierung zurueckgenommen. */

html body #view-detail .detail-col > .detail-card,
html body #view-detail .detail-stack > .detail-card {
  grid-column: auto;
  grid-row: auto;
  min-height: 0;
  padding: 13px 15px 15px !important;
}

html body #view-detail .detail-stack {
  display: grid;
  gap: 12px;
  align-content: start;
}

html body #view-detail .detail-col {
  gap: 12px;
}


/* Verwandte Serien als Zeilen. */
html body #view-detail .detail-relations {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .075);
}

/* V2.4.248: "Verwandte Serien" steht jetzt in der rechten Spalte der
 * Uebersicht statt ueber die volle Breite des Empfehlungen-Reiters.
 * material-reference-detail-v2-4-194.css gibt .is-row drei Spalten (mobil
 * zwei); in der schmalen Spalte blieben davon rund 110 px je Zeile uebrig
 * und die Titel wurden abgeschnitten. Hier eine Zeile je Eintrag. */
html body #view-detail .detail-relations.is-row {
  grid-auto-flow: row;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

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

html body #view-detail .detail-relation-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .075);
  color: inherit;
  text-decoration: none;
}

html body #view-detail .detail-relation-thumb img {
  width: 34px;
  height: 46px;
  border-radius: 6px;
  object-fit: cover;
}

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

html body #view-detail .detail-relation-copy strong {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 650;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-detail .detail-relation-copy small {
  color: #a3a9b1;
  font-size: 11px;
}

/* V2.4.323: "Staffeln" nutzt dieselben Zeilen wie "Verwandte Serien". Der
 * geoeffnete Anime ist der aktuelle Eintrag: Zeilen-Auspraegung des
 * gemeinsamen Auswahlzustands (material-selected-state-v2-4-232.css), wie
 * die Auswahlzeilen der Listendialoge; ohne Schein, damit er die
 * Nachbarzeilen nicht ueberstrahlt. Die Flaeche ragt 6 px in den
 * Kartenrand, Vorschaubild und Titel bleiben auf der Linie der anderen
 * Zeilen. */
html body #view-detail .detail-relation-row.is-current {
  margin-inline: -6px;
  padding-inline: 6px;
  border-color: var(--ar-selected-row-line, rgba(255, 64, 78, .8));
  background: var(--ar-selected-row-bg, rgba(255, 64, 78, .16));
}

html body #view-detail .detail-relation-row.is-current .detail-relation-copy strong {
  color: var(--ar-selected-text, #fff);
}

/* V2.4.300: Scrollbalken der Detailseite wieder in der Familie der Seite.
   #view-detail setzt --gold auf --md-secondary (#ff6b6b, ein Rot); der
   universelle Daumen aus styles-v2-4-141.css ist ein Verlauf
   var(--red) -> var(--gold) und wurde hier deshalb rot -> rot. Dieselben
   Werte wie dort, mit dem Gold der Wurzel (#f4b95f = :root --gold), das der
   Detail-Scope verdeckt. Betrifft ausschliesslich Scrollbalken. */
html body #view-detail,
html body #view-detail * {
  scrollbar-color: rgba(244, 185, 95, .72) rgba(255, 255, 255, .06);
}

html body #view-detail *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--red), #f4b95f);
}

/* Aehnliche Anime als kleine Posterreihe. */
html body #view-detail .detail-similar-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

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

html body #view-detail .detail-similar-poster img {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  object-fit: cover;
}

html body #view-detail .detail-similar-card strong {
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-detail .detail-similar-card small {
  color: var(--ar-accent-bright);
  font-size: 10.5px;
  font-weight: 650;
}

@media (max-width: 760px) {
  html body #view-detail .detail-relations.is-four {
    grid-template-columns: minmax(0, 1fr);
  }

  html body #view-detail .detail-similar-rail {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 96px;
    overflow-x: auto;
    scrollbar-width: none;
  }
}

/* Die Vorlage stellt die Erlaeuterung unter den Kartentitel. */
html body #view-detail .detail-card-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

html body #view-detail .detail-card-titles .detail-card-kicker {
  order: 2;
}

/* Kompakte Folgenliste der Uebersicht: schmaleres Bild, nur die Laufzeit. */
/* material-reference-detail-v2-4-194.css spricht die kompakte Zeile ueber
   .detail-eplist.is-compact .detail-eprow an und liegt damit tiefer. */
html body #view-detail .detail-eplist.is-compact .detail-eprow,
html body #view-detail .detail-eprow.is-compact {
  grid-template-columns: 22px 64px minmax(0, 1fr) auto 26px;
  gap: 9px;
}

html body #view-detail .detail-eplist.is-compact .detail-eprow .detail-eprow-thumb,
html body #view-detail .detail-eprow.is-compact .detail-eprow-thumb {
  width: 64px;
  height: 38px;
}

html body #view-detail .detail-eplist.is-compact .detail-eprow .detail-eprow-meta > *:nth-child(n + 2),
html body #view-detail .detail-eprow.is-compact .detail-eprow-meta > *:nth-child(n + 2) {
  display: none;
}

html body #view-detail .detail-eplist.is-compact .detail-eprow .detail-eprow-num,
html body #view-detail .detail-eprow.is-compact .detail-eprow-num {
  font-size: 13px;
}

/* Im Reiter "Details" steht die Handlung vollstaendig. */
html body #view-detail .detail-grid--details .detail-gm-plot {
  display: block;
  overflow: visible;
  -webkit-line-clamp: none;
}

/* ------------------------------------------- Mobile Feinkorrekturen ---- */

html body #view-profile .profile-gm-hero-stats span.is-short {
  display: none;
}

@media (max-width: 760px) {
  html body #view-profile .profile-gm-hero-stats span.is-long { display: none; }
  html body #view-profile .profile-gm-hero-stats span.is-short { display: block; }

  /* Listenknopf und die drei Symbolknoepfe passen so auch auf 360 px. */
  html body #view-detail .detail-gm-actions { gap: 7px; }

  html body #view-detail .detail-gm-actions .detail-list-action {
    flex: 0 1 auto;
    min-width: 0;
    padding: 0 12px;
    font-size: 12px;
  }

  html body #view-detail .detail-gm-actions .detail-list-action span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html body #view-detail .detail-gm-icon-btn {
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 7px;
  }
}

@media (max-width: 760px) {
  /* styles-v2-4-141.css und material-reference-detail-v2-4-194.css erzwingen
     mobil ein Raster aus zwei Spalten fuer die alte Zweiknopf-Zeile. Die
     Vorlage zeigt vier Elemente in einer Reihe. */
  html body #view-detail .detail-gm-actions.detail-action-row {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap;
    width: 100%;
    gap: 7px !important;
  }

  html body #view-detail .detail-gm-actions.detail-action-row > .detail-list-action {
    width: auto !important;
    height: auto !important;
    min-width: 0;
    flex: 1 1 auto;
  }

  html body #view-detail .detail-gm-actions.detail-action-row > .detail-gm-icon-btn {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    flex: 0 0 32px;
  }
}

/* Der Listenknopf zeigt je nach Breite die lange oder die kurze Beschriftung. */
html body #view-detail .detail-list-label.is-short {
  display: none;
}

@media (max-width: 760px) {
  html body #view-detail .detail-list-label.is-long { display: none; }
  html body #view-detail .detail-list-label.is-short { display: inline; }
}

/* ---------------------------------------- Feinschliff Statistik ---------- */
/* Die Monatsbeschriftungen brauchen die volle Spaltenbreite, die Legende des
   Watch-Status den vollen Namen. */

html body #view-profile .profile-gm-chart {
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 5px;
}

html body #view-profile .profile-gm-line-bars {
  gap: 2px;
}

html body #view-profile .profile-gm-bar-label {
  font-size: 8.5px;
  letter-spacing: -.35px;
}

html body #view-profile .profile-gm-status-chart .profile-gm-ring-legend li {
  gap: 6px;
  font-size: 11.5px;
}

html body #view-profile .profile-gm-status-chart .profile-gm-ring-legend em,
html body #view-profile .profile-gm-status-chart .profile-gm-ring-legend b {
  font-size: 11.5px;
}

html body #view-profile .profile-gm-status-chart .profile-gm-ring-legend b {
  min-width: 28px;
}

/* "Beigetreten am" steht seit 2026-09-26 ohne Zeichen davor (alle
   Plattformen). Die Grundregel liegt in material-reference-pages-v2-4-194.css. */
html body #view-profile .profile-gm-meta span::before {
  content: none;
  display: none;
}

@media (max-width: 360px) {
  /* Unter 360 px steht die Legende unter dem Ring (Vorgabe aus V2.4.244). */
  html body #view-profile .profile-gm-ring-wrap {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 10px;
  }

  html body #view-profile .profile-gm-ring-legend {
    width: 100%;
  }
}

/* V2.4.321: Spalte "Liste" in "Alle meine Bewertungen". Gleiche Form, Groesse
   und Position wie der fruehere Status; Listen haben keine eigene Farbe,
   deshalb der neutrale Grundton. Lange oder mehrere Listennamen werden in der
   Spalte gekuerzt (vollstaendig im Titel), statt in die Datumsspalte zu laufen.
   Ohne Liste steht ein "-" in derselben Box, ohne Rahmen. */
html body #view-profile .profile-gm-rt-status.is-list {
  min-width: 0;
  max-width: 100%;
  color: var(--pf-soft);
}

html body #view-profile .profile-gm-rt-status.is-list > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-profile .profile-gm-rt-status.is-list.is-empty {
  justify-self: start;
  border-color: transparent;
  background: transparent;
  color: var(--pf-dim);
}

/* V2.4.322 (W10): Die Listen-Badge hat die Optik der Listen-Badges in der
   Bibliothek (dort der Listen-Chip der Seasons-Zeile,
   material-season-list-reference-v2-4-265.css): Farbe, Rahmen, Radius,
   Innenabstand und Schrift. Groesse und Platz bleiben die der frueheren
   Status-Pille - am Desktop spaltenbreit, mobil am Zeilenanfang (Regel oben
   im Block max-width: 760px). Mehrere Listen stehen mit Komma in einer Badge,
   gekuerzt mit "...", voller Text im Titel. Das "-" ohne Liste bleibt wie es
   ist. Die Badge ist 3,55 px niedriger als die Pille (22,95 statt 26,5 px);
   der Aussenabstand haelt den alten Platz, damit keine Zeile ihre Hoehe
   aendert. */
html body #view-profile .profile-gm-rt-status.is-list:not(.is-empty) {
  margin-block: 1.775px;
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
  color: #bcc4c8;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.3;
}

@media (max-width: 760px) {
  html body #view-profile .profile-gm-rt-status.is-list:not(.is-empty) {
    padding: 3px 5px;
  }
}

/* V2.4.321: Der Kopf "Aktionen" ist breiter als seine 30-px-Spalte und wurde
   am rechten Rand abgeschnitten. Rechtsbuendig laeuft er in den freien Raum
   vor der Spalte; Spaltenbreiten und Zeilen bleiben unveraendert. Die globale
   Regel max-inline-size: 100% (styles-v2-4-141.css) hielte ihn sonst auf
   Spaltenbreite. */
html body #view-profile .profile-gm-rating-row.is-head > span:last-child {
  justify-self: end;
  max-inline-size: none;
  white-space: nowrap;
}