/* ========================================================================== */
/* UI-Fix 2026-10-03 (V2.4.326)                                               */
/*                                                                            */
/* A. Kalender: Tageswechsel am Ende der Tagesliste                           */
/* B. Auswahlfelder: ein Pfeil fuer alle (Golden Master Bibliothek ->         */
/*    Sortierung)                                                             */
/* ========================================================================== */


/* ========================================================================== */
/* A. Kalender: Tageswechsel am Ende der Tagesliste                           */
/*                                                                            */
/* Die Knoepfe stehen unter der letzten Zeile der Tagesliste. Wer eine lange  */
/* Liste nach unten gelesen hat, wechselt den Tag dort, ohne zurueck nach     */
/* oben zu muessen. Aussehen wie "Heute" in der Kalender-Werkzeugleiste       */
/* (material-reference-calendar-v2-4-194.css), dieselben Tokens.              */
/* ========================================================================== */

html body #view-calendar .cal-day-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74));
}

html body #view-calendar .cal-day-step {
  flex: 1 1 150px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  min-height: 0;
  margin: 0;
  padding: 0 20px;
  border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74));
  border-radius: 9px;
  background: var(--ar-page-field, rgba(20, 18, 23, .72));
  box-shadow: none;
  color: var(--md-on-surface);
  font: inherit;
  font-size: 13.5px;
  font-weight: 550;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

html body #view-calendar .cal-day-step:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--cal-crimson-line, #e53935) 34%, transparent);
  color: var(--cal-text, var(--md-on-surface));
}

html body #view-calendar .cal-day-step:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

html body #view-calendar .cal-day-step:disabled {
  opacity: .45;
  cursor: default;
}

/* Ziel des Sprungs nach einem Tageswechsel: der Kopf der Tagesliste. Auf dem
   Desktop liegt oben keine feste Leiste, mobil die Kopfzeile mit Safe-Area. */
html body #view-calendar .cal-month-day {
  scroll-margin-top: 16px;
}

@media (max-width: 959px) {
  html body #view-calendar .cal-day-nav {
    padding: 10px 13px 12px;
  }

  html body #view-calendar .cal-day-step {
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
  }

  html body #view-calendar .cal-month-day {
    scroll-margin-top: calc(var(--ar-mobile-topbar-height, 64px) + 12px);
  }
}


/* ========================================================================== */
/* B. Auswahlfelder: ein Pfeil fuer alle                                      */
/*                                                                            */
/* Golden Master ist der Pfeil von Bibliothek -> Sortierung, gemessen am      */
/* 03.10.2026 (Desktop 1440 und Mobil 390): Pfeilkasten 14 px breit, ueber    */
/* die volle Knopfhoehe, am Zeilenende. Darin ein Winkel 8 x 8 px aus         */
/* 1,5 px starken Linien in #f1f3f5, Radius 1 px, um 45 Grad gedreht, 2 px    */
/* unterer Aussenabstand. Zum rechten Rand 14 px Innenabstand (mobil bis      */
/* 959 px: 12 px). Kein Trennstrich, keine eigene Flaeche. Geoeffnet zeigt    */
/* der Winkel nach oben (-135 Grad).                                          */
/*                                                                            */
/* Vorher brachte jede Ansicht ihre eigene Pfeilregel mit (Seasons und Profil */
/* blieben beim roten 44-px-Pfeil der Grundfassung in styles-v2-4-141.css).   */
/* Diese Ebene ersetzt sie alle an einer Stelle: wichtige Deklarationen in    */
/* einer Cascade-Layer-Ebene haben Vorrang vor wichtigen Deklarationen        */
/* ausserhalb jeder Ebene - unabhaengig von der Spezifitaet. Die alten        */
/* seitenbezogenen Pfeilregeln bleiben dadurch wirkungslos stehen, ohne dass  */
/* sie einzeln umgebaut werden muessen. Aenderungen am Pfeil gehoeren ab      */
/* jetzt hierher.                                                             */
/*                                                                            */
/* Die Pfeilspur im Knopfraster wird auf "auto" gesetzt, also auf die 14 px   */
/* des Pfeils. Fruehere Spuren (44, 28, 24, 18 px) waren auf die alten Pfeile */
/* zugeschnitten; der Text verliert dadurch keinen Platz.                     */
/* ========================================================================== */

@layer ar-auswahl-pfeil {
  .ar-select .ar-select-btn {
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding-right: 14px !important;
  }

  .ar-select .ar-select-arrow {
    display: grid !important;
    place-items: center !important;
    justify-self: end !important;
    align-self: stretch !important;
    flex: 0 0 14px !important;
    width: 14px !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: #f1f3f5 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Ein gesperrtes Feld zeigt den Pfeil in seiner gedimmten Textfarbe. */
  .ar-select .ar-select-btn:disabled .ar-select-arrow {
    color: inherit !important;
  }

  .ar-select .ar-select-arrow::before {
    content: "" !important;
    display: block !important;
    position: static !important;
    width: 8px !important;
    height: 8px !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
    border: 0 !important;
    border-right: 1.5px solid currentColor !important;
    border-bottom: 1.5px solid currentColor !important;
    border-radius: 1px !important;
    background: none !important;
    opacity: 1 !important;
    transform: rotate(45deg) !important;
  }

  .ar-select.is-open .ar-select-arrow::before {
    transform: rotate(-135deg) !important;
  }

  /* Roadmap-Formular: dort zeichnete ein eigenes SVG den Pfeil und der Pfeil
     der Auswahlkomponente war ausgeblendet. Jetzt gilt auch dort der eine
     Pfeil. */
  #view-roadmap .rm-select-chevron {
    display: none !important;
  }

  /* Seasons -> Archiv ist ein details-Ausklappmenue ohne Auswahlkomponente;
     sein Winkel bekommt dieselbe Form und Farbe. */
  #view-season .seasons-archive > summary::after {
    width: 8px !important;
    height: 8px !important;
    margin: 0 0 2px !important;
    border: 0 !important;
    border-right: 1.5px solid #f1f3f5 !important;
    border-bottom: 1.5px solid #f1f3f5 !important;
    border-radius: 1px !important;
    transform: rotate(45deg) !important;
  }

  #view-season .seasons-archive[open] > summary::after {
    transform: rotate(-135deg) !important;
  }

  @media (max-width: 959px) {
    .ar-select .ar-select-btn {
      padding-right: 12px !important;
    }
  }
}

/* ========================================================================== */
/* C. Profil -> Bewertungen: Filterleiste wie Bibliothek -> Sortierung        */
/*    (2026-10-04)                                                            */
/*                                                                            */
/* Golden Master sind die Regeln fuer html body :is(#view-lists,              */
/* #view-planner) .ar-select-* in material-reference-library-planner-v2-4-    */
/* 220.css (Knopf, geoeffnet, Menue, Optionen, Tastaturfokus; unter 960 px    */
/* 36 px hoch, 12 px Rand, 11 px Schrift). Dieselben Werte gelten jetzt fuer  */
/* Score, Genre, Jahr, Liste und Sortieren unter "Alle meine Bewertungen".    */
/* Vorher kamen Flaeche, Rahmen und Schriftstaerke aus der allgemeinen        */
/* Formularregel in material-redesign-v2-4-194.css (--md-surface-elevated,    */
/* Gewicht 550) und die Hoehe aus material-reference-pages-v2-4-194.css       */
/* (34 px). Breite und Raster der Leiste bleiben; der Pfeil kommt aus B.      */
/* Nachtrag: Fokusring und ausgewaehlte Option wie in der Bibliothek. Der     */
/* Ring nimmt dort --md-secondary aus :root (#ff5252); #view-profile          */
/* setzt eigene Token-Werte (#ff8a8d), daher hier der Wert selbst. Die        */
/* Auswahl kommt wie dort aus den Tokens in material-selected-state-          */
/* v2-4-232.css.                                                              */
/* ========================================================================== */

html body #view-profile .profile-gm-rating-toolbar .ar-select-btn {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(167, 187, 195, .18) !important;
  border-radius: 8px !important;
  background: linear-gradient(130deg, #131a1e, #101619) !important;
  color: #f1f3f5 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-align: left !important;
  text-transform: none !important;
  transform: none !important;
}

html body #view-profile .profile-gm-rating-toolbar .ar-select-text {
  color: inherit !important;
  font: inherit !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

html body #view-profile .profile-gm-rating-toolbar .ar-select.is-open .ar-select-btn {
  border-color: #bd2938 !important;
  background: linear-gradient(130deg, #131a1e, #101619) !important;
  color: #f1f3f5 !important;
}

html body #view-profile .profile-gm-rating-toolbar .ar-select-btn:focus-visible {
  outline: 2px solid #ff5252 !important;
  outline-offset: 3px !important;
}

html body #view-profile .profile-gm-rating-toolbar .ar-select-menu {
  padding: 6px !important;
  border: 1px solid rgba(167, 187, 195, .18) !important;
  border-radius: 10px !important;
  background: #16141a !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .46) !important;
}

html body #view-profile .profile-gm-rating-toolbar .ar-select-option {
  border-radius: 7px !important;
  background: transparent !important;
  color: #ece6e9 !important;
  font-weight: 500 !important;
}

html body #view-profile .profile-gm-rating-toolbar .ar-select-option:is(:hover, .is-selected) {
  background: rgba(216, 52, 58, .16) !important;
}

html body #view-profile .profile-gm-rating-toolbar .ar-select-option.is-selected:not(:disabled) {
  background: var(--ar-selected-row-bg) !important;
  color: var(--ar-selected-text) !important;
}

@media (max-width: 959px) {
  html body #view-profile .profile-gm-rating-toolbar .ar-select-btn {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
  }
}

/* ========================================================================== */
/* D. Suchfelder: Entdecken ist der Golden Master (2026-10-04)                */
/*                                                                            */
/* 1. Entdecken bis 959 px: Das Feld hielt rechts 52 px frei - den Platz des  */
/*    Filtersymbols im Feld, das seit V2.4.255 ausgeblendet ist. Das native   */
/*    Leeren-X sass dadurch rund 50 px vor dem rechten Rand. Rechts gilt jetzt*/
/*    derselbe Abstand wie links fuer die Lupe (19 px).                       */
/* 2. Bibliothek: dasselbe Feld wie Entdecken - ab 960 px die Huelle aus      */
/*    material-reference-discover-v2-4-194.css (37 px, Radius 10, Lupe 13 px  */
/*    vom Rand, 14 px Schrift), darunter die Werte aus                        */
/*    material-reference-pages-v2-4-194.css (41 px, bis 760 px 44 px, Radius  */
/*    11, Lupe 19 px, Text ab 51 px). Fokus wie Entdecken: kein Ring am Feld, */
/*    unter 960 px nur der rot getoente Rand. Der rote 2-px-Ring kam aus der  */
/*    allgemeinen :focus-visible-Regel in material-redesign-v2-4-194.css.     */
/*    Das Feld traegt dafuer wie Entdecken autocomplete="off" (index.html).   */
/* ========================================================================== */

@media (max-width: 959px) {
  html body #view-search .search-input-label #searchInput {
    padding-right: 19px !important;
  }
}

html body #view-lists .lib-reference-search {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

html body #view-lists .lib-reference-search svg {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  pointer-events: none !important;
}

html body #view-lists #libraryQuickFilter {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
}

html body #view-lists #libraryQuickFilter:focus,
html body #view-lists #libraryQuickFilter:focus-visible {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
}

@media (min-width: 960px) {
  html body #view-lists .lib-reference-search {
    height: 37px !important;
    min-height: 37px !important;
    padding: 0 12px 0 40px !important;
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 10px !important;
    background: var(--ar-page-field, rgba(20, 18, 23, .72)) !important;
  }

  html body #view-lists .lib-reference-search svg {
    left: 13px !important;
    width: 17px !important;
    height: 17px !important;
    color: var(--md-muted) !important;
    stroke-width: 1.9 !important;
  }

  html body #view-lists #libraryQuickFilter {
    color: var(--md-on-surface) !important;
    font-size: 14px !important;
  }

  html body #view-lists #libraryQuickFilter::placeholder {
    color: var(--md-dim) !important;
  }
}

@media (max-width: 959px) {
  html body #view-lists .lib-reference-search {
    height: 41px !important;
    min-height: 41px !important;
    padding: 0 19px 0 51px !important;
    border: 1px solid var(--dis-line, rgba(255, 255, 255, .075)) !important;
    border-radius: 11px !important;
    background: var(--dis-surface, #1e1a1b) !important;
  }

  html body #view-lists .lib-reference-search:focus-within {
    border-color: color-mix(in srgb, var(--dis-crimson, #e8433f) 55%, transparent) !important;
  }

  html body #view-lists .lib-reference-search svg {
    left: 19px !important;
    width: 19px !important;
    height: 19px !important;
    color: var(--dis-muted, #9a9698) !important;
  }

  html body #view-lists #libraryQuickFilter {
    color: var(--dis-text, #ececec) !important;
    font-size: 15px !important;
  }

  html body #view-lists #libraryQuickFilter::placeholder {
    color: var(--dis-muted, #9a9698) !important;
  }
}

@media (max-width: 760px) {
  html body #view-lists .lib-reference-search {
    height: 44px !important;
    min-height: 44px !important;
  }

  html body #view-lists #libraryQuickFilter {
    font-size: 12px !important;
  }
}

/* ======================================================================== */
/* E. Bibliothek-Liste und Profil-Bewertungen (2026-10-04, Pass 3)          */
/*                                                                          */
/* 1. Bibliothek -> Listenansicht: Die Bewertung traegt den gelben Stern    */
/*    der gemeinsamen Listenzeile (Entdecken/Seasons; Groesse und Farbe     */
/*    aus material-season-list-reference-v2-4-265.css) und bricht nicht     */
/*    um. Jede Zeile ist ein eigenes Raster mit fester Spalte 3             */
/*    (V2.4.301), daher wie bei --ar-list-col-tail ein gemessener Wert      */
/*    fuer --ar-list-col-rating statt max-content: Stern + "8,5 / 10".      */
/* 2. Profil -> Alle meine Bewertungen: Kopf und Zeilen teilen bereits      */
/*    das Raster von .profile-gm-rating-row. Abweichend war die             */
/*    Ausrichtung in zwei Spalten: die spaltenbreite Listen-Badge           */
/*    (V2.4.322) zeigte ihren Text mittig unter dem linksbuendigen Kopf,    */
/*    und der Kopf "Aktionen" war breiter als seine 30-px-Spalte und        */
/*    stand rechtsbuendig ueber dem mittigen Knopf. Jetzt beginnt der       */
/*    Badge-Text links wie der Kopf (Badge bleibt spaltenbreit), und die    */
/*    gemeinsame Aktionsspalte ist so breit wie ihr Kopf (48 px, gleicher   */
/*    Wert fuer Kopf und Zeilen), Kopf und Knopf stehen darin mittig.       */
/*    Uebrige Spalten wie in material-profile-detail-v2-4-247.css.          */
/* 3. "Kommentar anzeigen" in der Optik der Textknoepfe der Profilkarten.   */
/* ======================================================================== */

html body #view-lists #libraryGrid.library-list {
  --ar-list-col-rating: 68px;
}

html body #view-lists #libraryGrid.library-list .seasons-card-rating {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

html body #view-lists #libraryGrid.library-list .seasons-card-rating > :is(i, strong) {
  flex: 0 0 auto;
  white-space: nowrap !important;
}

/* Mobil und App (<= 760 px, 2.4.332): Dort ist die Zelle eine gerahmte    */
/* Box ueber die volle Kartenbreite, und die alte Mobilregel               */
/* .library-list-cell { justify-content: space-between } (<= 640 px,       */
/* styles-v2-4-141.css) schob den Wert an den rechten Rand. Stern und Wert */
/* stehen wie in der Suchliste (material-platform-fixes-v2-4-265.css)      */
/* als Einheit am Zeilenanfang, Abstand bleibt der column-gap der Zeile.   */
/* Desktop (normal = Zeilenanfang) bleibt unberuehrt.                      */
@media (max-width: 760px) {
  html body #view-lists #libraryGrid.library-list .seasons-card-rating {
    justify-content: flex-start;
  }
}

@media (min-width: 761px) {
  html body #view-profile .profile-gm-rating-row {
    grid-template-columns: 26px minmax(0, 1.5fr) 96px minmax(0, 2fr) 118px 92px 48px;
  }

  html body #view-profile .profile-gm-rt-status.is-list:not(.is-empty) {
    justify-content: flex-start;
  }

  html body #view-profile .profile-gm-rating-row.is-head > span:last-child,
  html body #view-profile .profile-gm-rt-action {
    justify-self: center;
  }
}

html body #view-profile .profile-gm-rt-comment {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ar-accent-bright);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

/* ========================================================================== */
/* E. UI-Aenderungen fuer 2.0.5 (2026-10-05)                                  */
/*                                                                            */
/* 1. Deutsche Synchro auf Karten: Entdecken (Raster, Liste), Bibliothek      */
/*    (Raster, Liste), Kalender (Tagesliste). Dasselbe Abzeichen wie in der   */
/*    Detailansicht (.german-dub-badge, Flagge aus styles-v2-4-141.css), als  */
/*    kompakter Chip unten links im Cover. Dort liegt auf keiner Karte ein    */
/*    anderes Bedienelement (Lesezeichen oben rechts). Der Platz ist absolut  */
/*    positioniert und verschiebt nichts. Die Beschriftung erscheint nur,     */
/*    wenn das Cover breit genug ist (Container-Abfrage auf dem Platz); sonst */
/*    bleibt die Flagge, die Beschriftung steht dann fuer Screenreader und    */
/*    als title bereit. Ohne Container-Abfragen (alte WebViews) bleibt es     */
/*    bei der Flagge.                                                         */
/* 2. Profil -> Statistik: Raster ohne die entfernte Karte "Top Genres".      */
/*    Die Flaechennamen aus material-profile-detail-v2-4-247.css ohne         */
/*    topgenres; die Uebersichtskacheln belegen wie vor V2.4.252 zwei Spalten.*/
/* 3. Profil -> Alle meine Bewertungen, 360-760 px: Die Menues der rechten    */
/*    Spalte (Genre, Liste) liefen mit min-width 220 px ueber die Karte und   */
/*    wurden von #view-profile (overflow-x: clip) abgeschnitten - gemessen    */
/*    bei 390: Knopf 199..350, Menue 199..419, Karte bis 366. Sie haengen     */
/*    jetzt an der rechten Knopfkante und oeffnen nach links. Nur diese       */
/*    Leiste, nur dieser Bereich; Desktop und die einspaltige Leiste unter    */
/*    360 px bleiben unberuehrt.                                              */
/* 4. Startseite bis 959 px - "Anime Geheimtipp": dieselbe dunkle             */
/*    Kartenflaeche wie "Naechste Releases" (material-mobile-fixes-v2-4-255.  */
/*    css: #101619, Rand var(--collection-border), Radius 8) statt des        */
/*    roetlichen Verlaufs mit goldenem Rand aus styles-v2-4-141.css. Ab       */
/*    960 px ist die Karte unveraendert transparent.                          */
/* 5. Startseite bis 959 px - "Naechste Releases": Das Bild war 118 px breit, */
/*    die Karte (118 px, 8 px Innenabstand, 1 px Rand) liess ihm aber nur     */
/*    100 px. Es begann 9 px innen und stiess rechts an die Kartenkante.      */
/*    Jetzt wie "Gerade heiss": 4 px Innenabstand, Bild ueber die volle       */
/*    Innenbreite (108 x 66, Radius 7), Text 3 px eingerueckt, 10 px          */
/*    Kartenabstand. Alle Angaben bleiben.                                    */
/* ========================================================================== */

/* Das Raster von Entdecken setzt den Cover-Link mit position: static
   !important (material-reference-discover-v2-4-194.css). relative ohne
   Versatz aendert den Fluss nicht, gibt dem Abzeichen aber das Cover als
   Bezug. */
html body :is(#view-search .search-row-image-link, #view-lists .lib-card-art, #view-lists .library-list-thumb, #view-calendar .cal-day-cover) {
  position: relative !important;
  isolation: isolate;
}

html body .card-dub-slot {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  container-type: inline-size;
}

html body .card-dub-slot:empty {
  display: none;
}

html body .german-dub-badge.is-cover {
  max-width: 100%;
  gap: 5px;
  padding: 2px;
  border-radius: 5px;
  background: rgba(12, 10, 12, .84);
  font-size: 10px;
  line-height: 12px;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

html body .german-dub-badge.is-cover::before {
  width: 16px;
  min-width: 16px;
  height: 11px;
  padding: 0;
  border-radius: 2px;
}

html body .german-dub-badge.is-cover .german-dub-badge-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@container (min-width: 60px) {
  html body .german-dub-badge.is-cover {
    padding: 3px;
    border-radius: 6px;
  }

  html body .german-dub-badge.is-cover::before {
    width: 18px;
    min-width: 18px;
    height: 12px;
  }
}

@container (min-width: 128px) {
  html body .german-dub-badge.is-cover:not(.is-partial) {
    padding-right: 7px;
  }

  html body .german-dub-badge.is-cover:not(.is-partial) .german-dub-badge-label {
    position: static;
    width: auto;
    height: auto;
    overflow: hidden;
    clip: auto;
    text-overflow: ellipsis;
  }
}

@container (min-width: 176px) {
  html body .german-dub-badge.is-cover.is-partial {
    padding-right: 7px;
  }

  html body .german-dub-badge.is-cover.is-partial .german-dub-badge-label {
    position: static;
    width: auto;
    height: auto;
    overflow: hidden;
    clip: auto;
    text-overflow: ellipsis;
  }
}

html body #view-profile .profile-gm-stats-grid {
  grid-template-areas:
    "uebersicht uebersicht genre"
    "saison     monate     studios"
    "status     toprated   jahr";
}

@media (max-width: 1099px) {
  html body #view-profile .profile-gm-stats-grid {
    grid-template-areas:
      "uebersicht uebersicht"
      "genre      genre"
      "saison     monate"
      "studios    status"
      "toprated   jahr";
  }
}

@media (max-width: 760px) {
  html body #view-profile .profile-gm-stats-grid {
    grid-template-areas:
      "uebersicht"
      "genre"
      "saison"
      "monate"
      "studios"
      "status"
      "toprated"
      "jahr";
  }
}

@media (min-width: 360px) and (max-width: 760px) {
  /* Zweispaltiges Raster aus material-mobile-fixes-v2-4-260.css: Score,
     Genre, Jahr, Liste, Sortieren (ueber beide Spalten). Gerade Positionen
     stehen rechts. */
  html body #view-profile .profile-gm-rating-toolbar > label:nth-child(2n) .ar-select-menu {
    left: auto !important;
    right: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 959px) {
  html body #view-home .hidden-treasure-card {
    border: 1px solid var(--collection-border, rgba(167, 187, 195, .18)) !important;
    border-radius: 8px !important;
    background: #101619 !important;
    box-shadow: none !important;
  }

  html body #view-home .hidden-treasure-inner > img {
    border: 0 !important;
    border-radius: 8px !important;
  }

  html body #view-home #homeCountdowns.release-stack {
    gap: 10px !important;
  }

  html body #view-home #homeCountdowns .release-item {
    padding: 4px !important;
  }

  html body #view-home #homeCountdowns .release-item .release-thumb {
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 7px !important;
  }

  html body #view-home #homeCountdowns .release-item :is(.release-copy, .release-day) {
    padding: 0 3px !important;
  }

  html body #view-home #homeCountdowns .release-item .release-day {
    padding-bottom: 2px !important;
  }
}

/* SEO-Technikpass 2026-10-08: Die Geheimtipp-Karte ist ein Link (<a href>).
   Ihr Rahmen aus .hidden-treasure-inner:focus-within (styles-v2-4-141.css)
   griff damit auch bei Maus- und Touch-Fokus. Sichtbar bleibt nur der
   Tastaturfokus (:focus-visible, globaler Fokusring). */
html body #hiddenTreasure .hidden-treasure-inner:focus:not(:focus-visible) {
  outline: none;
}