/*
 * AnimeRadar v2.4.240 - Anime Voting, Bibliothek, Entdecken und Startseite.
 *
 * Kein neues Seitendesign: jede Regel loest einen gemeldeten Punkt und bleibt
 * in der vorhandenen Bildsprache.
 *
 * Gemessene Ausgangswerte:
 *   Voting-Bild     .vt-card-media mit aspect-ratio 234/248 (Desktop) und
 *                   140/160 (Mobil), Bild ueber die volle Kartenbreite
 *   Entdecken-Zeile .search-row height: 92 fest bei 97 px Inhalt - die
 *                   Streaminganbieter lagen dadurch 6 px unter der Kante und
 *                   wurden von overflow: hidden abgeschnitten
 *   Werkzeugleiste  .discover-view-toggle mit margin-left: auto - zwischen
 *                   "Ansicht:" und den Schaltflaechen standen 95 px Luft
 */

/* ========================================================================== */
/* 1. Anime Voting - Anime-Bilder rund 20 Prozent kleiner                     */
/* ========================================================================== */

/* Die Bildflaeche sitzt oben in der Karte und laeuft ueber die volle Breite.
   Statt die ganze Karte zu verkleinern, wird nur die Bildhoehe gekuerzt:
   aus 234/248 wird 234/198, das sind 20 Prozent weniger Bildhoehe und
   Bildflaeche. Kartenbreite, Titel, Text und Knoepfe bleiben unveraendert;
   object-fit: cover verhindert jede Verzerrung. */
html body #view-voting.voting-2026 .vt-card-media {
  aspect-ratio: 234 / 198;
}

/* Etwas mehr Luft zwischen Bild und Titel, damit die kompaktere Flaeche
   nicht gedraengt wirkt. */
html body #view-voting.voting-2026 .vt-card-title {
  margin-top: 12px;
}

@media (max-width: 760px) {
  html body #view-voting.voting-2026 .vt-card-media {
    aspect-ratio: 140 / 128;
  }

  html body #view-voting.voting-2026 .vt-card-title {
    margin-top: 8px;
  }
}

/* ========================================================================== */
/* 2. Bibliothek - Lesezeichen neben dem Listennamen                          */
/* ========================================================================== */

/* Jede Liste des Anime steht als eigener Chip. Das Lesezeichen links im Chip
   nimmt den Anime aus genau dieser Liste. Groesse und Form folgen den
   uebrigen Bedienelementen der Listenansicht. */
html body #view-lists .library-list .library-list-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

html body #view-lists .library-list .library-list-chips .list-name-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 4px 10px 4px 6px;
}

html body #view-lists .library-list .lib-list-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-lists .library-list .lib-list-remove {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(255, 64, 78, .38);
  border-radius: 6px;
  background: rgba(229, 32, 46, .14);
  color: #ff6d78;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

html body #view-lists .library-list .lib-list-remove svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
}

html body #view-lists .library-list .lib-list-remove:hover,
html body #view-lists .library-list .lib-list-remove:focus-visible {
  border-color: rgba(255, 64, 78, .8);
  background: rgba(229, 32, 46, .28);
  color: #fff;
}

@media (max-width: 760px) {
  /* In der schmalen Listenansicht steht die Spalte unter dem Titel. */
  html body #view-lists .library-list .library-list-chips {
    gap: 5px;
  }

  html body #view-lists .library-list .lib-list-remove {
    width: 24px;
    height: 24px;
  }
}

/* ========================================================================== */
/* 3. Entdecken - Listenansicht: Anbieter sichtbar, ruhige Abstaende          */
/* ========================================================================== */

/* Ursache: die Zeile hatte height: 92 fest, der Inhalt der Textspalte ist
   aber 97 hoch - die Anbieterzeile lag 6 px unter der Kante und wurde von
   overflow: hidden abgeschnitten. Die Zeile waechst jetzt mit ihrem Inhalt
   (Mindesthoehe bleibt 92) und bekommt oben und unten Innenabstand. */
html body #view-search .search-results.is-list .search-row {
  height: auto !important;
  /* Die Mindesthoehe muss sich gegen die Kartenregeln durchsetzen, sonst
     faellt eine Zeile ohne Anbieter unter die bisherige Hoehe. */
  min-height: 92px !important;
  align-items: stretch;
  overflow: hidden;
}

html body #view-search .search-results.is-list .search-row > div.search-card-copy {
  gap: 3px;
  padding: 11px 48px 11px 16px !important;
}

/* Das Bild fuellt die gewachsene Zeile weiterhin ohne Verzerrung. */
html body #view-search .search-results.is-list .search-row-image-link {
  align-self: stretch;
  overflow: hidden;
  border-radius: 11px 0 0 11px;
}

html body #view-search .search-results.is-list .search-row-image-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Die Anbieterzeile bekommt einen eigenen kleinen Abstand nach oben. */
html body #view-search .search-results.is-list .search-card-provider-slot {
  margin-top: 2px;
}

html body #view-search .search-results.is-list .search-card-genres {
  margin-top: 1px;
}

/* ========================================================================== */
/* 4. Entdecken - "Ansicht:" direkt vor den beiden Schaltflaechen             */
/* ========================================================================== */

/* Der Umschalter trug margin-left: auto und wurde dadurch an den rechten
   Rand gedrueckt. Jetzt schiebt das Label die gemeinsame Gruppe nach rechts,
   zwischen Label und Schaltflaechen bleibt ein normaler Abstand. */
html body #view-search .discover-toolbar-end > .discover-view-label {
  margin-left: auto;
}

html body #view-search .discover-toolbar-end > .discover-view-toggle {
  margin-left: 0;
}

/* ========================================================================== */
/* 5. Startseite - "Gerade heiss" laesst sich mit der Maus ziehen             */
/* ========================================================================== */

/* Nur Zeiger mit Feingefuehl (Maus, Stift) bekommen die Greifhand; auf
   Touchgeraeten scrollt der Browser weiterhin selbst. */
@media (hover: hover) and (pointer: fine) {
  html body #view-home #trendingRail {
    cursor: grab;
  }

  html body #view-home #trendingRail.is-dragging {
    cursor: grabbing;
    /* Einrasten und weiches Scrollen setzt die Zugfunktion zusaetzlich per
       Stilattribut aus; hier stehen sie als Rueckfall. */
    scroll-snap-type: none;
    scroll-behavior: auto;
    user-select: none;
  }

  /* Waehrend des Ziehens darf kein Bild den eigenen Zugmodus starten. */
  html body #view-home #trendingRail.is-dragging a,
  html body #view-home #trendingRail.is-dragging img {
    pointer-events: none;
  }
}

/* ========================================================================== */
/* 6. Startseite - Aktualisieren-Knopf bei "Naechste Releases"                */
/* ========================================================================== */

html body #view-home .pulse-card .band-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

html body #view-home .home-releases-refresh {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(167, 187, 195, .18);
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
  color: #d8dcdf;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

html body #view-home .home-releases-refresh svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body #view-home .home-releases-refresh:hover:not(:disabled),
html body #view-home .home-releases-refresh:focus-visible:not(:disabled) {
  border-color: rgba(255, 64, 78, .5);
  background: rgba(229, 32, 46, .12);
  color: #fff;
}

html body #view-home .home-releases-refresh:disabled {
  opacity: .7;
  cursor: progress;
}

/* Waehrend des Ladens dreht sich das Symbol; die Breite bleibt gleich,
   damit nichts springt. */
html body #view-home .home-releases-refresh[aria-busy="true"] svg {
  animation: ar-refresh-spin .9s linear infinite;
}

@keyframes ar-refresh-spin {
  to { rotate: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  html body #view-home .home-releases-refresh[aria-busy="true"] svg {
    animation: none;
  }
}

/* Auf schmalen Schirmen bleibt nur das Symbol - der Kopf hat dort keinen
   Platz fuer das Wort. */
@media (max-width: 620px) {
  html body #view-home .home-releases-refresh {
    gap: 0;
    width: 30px;
    padding: 0;
    justify-content: center;
  }

  html body #view-home .home-releases-refresh span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ========================================================================== */
/* 7. Giveaway - Bildausschnitt der Inhaltskarte                              */
/* ========================================================================== */

/* Das neue Motiv ist 1672 x 941 (16:9) mit mittigem Schriftzug. Am Desktop
   sitzt es im Ausschnitt 263/187 mittig, der Titel bleibt vollstaendig zu
   sehen - dort bleibt alles wie bisher.
   Mobil stand das Bild bisher als 109 x 174 hochkant links neben dem Text.
   Dieser Ausschnitt zeigt nur rund ein Drittel der Bildbreite; bei einem
   liegenden Motiv mit Schrift in der Mitte laesst sich kein Ausschnitt
   finden, der den Schriftzug nicht mitten durchschneidet. Die Karte stapelt
   mobil deshalb: Bild oben ueber die volle Breite im Seitenverhaeltnis des
   Motivs, Text darunter. Aufbau, Farben und Knopf bleiben unveraendert. */
@media (max-width: 959px) {
  html body #view-giveaway .gw-card {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html body #view-giveaway .gw-card-media {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html body #view-giveaway .gw-card-media img {
    object-position: 50% 50% !important;
  }

  html body #view-giveaway .gw-card-body {
    padding: 0 6px 6px !important;
  }
}