/* ==========================================================================
   AnimeRadar V2.4.256 - Mobile-Korrekturen der Startseite

   Jede Regel dieser Datei steht in @media (max-width: 959px). Der Desktop
   wird dadurch nicht erreicht; die Grenze 959/960 ist dieselbe, die das
   Projekt seit V2.4.212 fuer Mobil und Desktop verwendet.

   Inhalt:
     1. Anime News - Herausgeber und Datum bleiben in der Karte
     2. "Deine Anime auf einen Blick" - erstmals eine eigene Mobilfassung

   Die Season-Korrektur dieser Runde liegt nicht hier, sondern in
   app-v2-4-153.js: sie betrifft die Datenlogik, nicht die Darstellung.
   ========================================================================== */

@media (max-width: 959px) {

  /* ======================================================================== */
  /* 1. Anime News - Herausgeber und Datum                                    */
  /* ======================================================================== */
  /* Ausgangslage, gemessen bei 390: die Karte steht in einem Banner mit
     height: 112px und overflow: hidden (material-reference-home-v2-4-194.css).
     Die Textspalte brauchte 133 px. Und genau der Block mit Quelle und Datum
     stand dort als letztes Element - die Mobilregel jenes Blattes setzt
     .anime-news-meta auf order: 3, also unter Titel und Anriss. Die unteren
     rund 20 px wurden vom Banner abgeschnitten, und damit zuerst der
     Herausgeber.

     Zwei Aenderungen, beide nur an der Reihenfolge und am Umfang, nicht an
     der Kartenhoehe:

       a) Quelle und Datum ruecken direkt unter den Titel. Wird es eng, faellt
          jetzt der Anriss weg - nicht die Herkunftsangabe.
       b) Der Anriss steht auf einer Zeile statt auf zweien. Damit passt der
          gesamte Inhalt in die 112 px, auch bei einem Titel ueber zwei
          Zeilen; abgeschnitten wird gar nichts mehr.

     Die Karte behaelt Hoehe, Bild, Raster und Typografie. */

  html body #view-home .anime-news-meta {
    order: 2 !important;
    /* Der Block darf nicht mehr nach unten gedrueckt werden; das margin: auto
     * aus der Grundregel haette ihn weiter an den Kartenfuss geschoben. */
    margin: 2px 0 0 !important;
    flex-wrap: wrap !important;
  }

  html body #view-home .anime-news-banner-copy p {
    order: 3 !important;
    -webkit-line-clamp: 1 !important;
    margin: 4px 0 0 !important;
  }

  /* Die Quelle steht vor dem Datum - sie ist die Angabe, um die es geht. */
  html body #view-home .anime-news-meta span {
    order: 1 !important;
  }

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

  /* Sicherheitsnetz: die Textspalte darf die Karte nicht sprengen. Ohne
     min-height: 0 wuerde ein Flex-Kind seine Inhaltshoehe erzwingen. */
  html body #view-home .anime-news-banner-copy {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* ======================================================================== */
  /* 2. "Deine Anime auf einen Blick"                                         */
  /* ======================================================================== */
  /* Der Bereich hatte bisher ueberhaupt keine Mobilfassung: die gesamte
     Gestaltung steht in material-reference-home-v2-4-194.css in einem
     @media (min-width: 960px)-Block. Unter 960 px fiel damit alles auf die
     Grundwerte zurueck. Gemessen bei 390:

       - der Fortschrittsring war ein 21 px hoher Block statt eines Kreises,
       - die Statusliste stand als schlichte Liste untereinander,
       - jede der sechs Zeilen war 312 px hoch, weil das Symbol ohne
         Groessenangabe in seiner Eigengroesse gerendert wurde,
       - die Karte insgesamt 2014 px hoch.

     Die folgende Fassung uebernimmt Inhalte, Werte, Symbole, Reihenfolge und
     Aktion unveraendert und benutzt dieselben Gestaltungswerte wie die
     Desktopfassung - gleicher Ring, gleiche Farben, gleiche Schriftfamilie.
     Neu ist allein die Anordnung: Kopf, Ring, zweispaltige Statusliste,
     Aktionsknopf ueber die volle Breite. */

  html body #view-home .home-library-snapshot {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 14px !important;
    text-align: left !important;
  }

  html body #view-home .home-library-snapshot > .section-kicker {
    margin: 0 !important;
  }

  html body #view-home .home-library-snapshot h2 {
    margin: 2px 0 0 !important;
    color: var(--home-title, #f3f5f6) !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  /* ---------------------------------------------------------------- Ring -- */
  /* Gleiche Bildsprache wie auf dem Desktop, nur kleiner: derselbe
     Kegelverlauf, derselbe Innenkreis, derselbe Prozentwert in der Mitte.
     Die Beschriftung sitzt absolut unter dem Kreis, damit der Ring rund
     bleibt; die 20 px Aussenabstand unten halten den Platz dafuer frei. */
  html body #view-home .home-library-ring {
    --home-library-pct: 0;
    position: relative !important;
    justify-self: center !important;
    display: grid !important;
    place-items: center !important;
    grid-template-rows: 104px !important;
    width: 104px !important;
    height: 104px !important;
    margin: 2px 0 20px !important;
    border-radius: 50% !important;
    background:
      radial-gradient(closest-side, var(--home-card-bg, #0f1417) 79%, transparent 80% 100%),
      conic-gradient(#f4404a calc(var(--home-library-pct) * 1%), #2b1d20 0) !important;
  }

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

  html body #view-home .home-library-ring small {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: block !important;
    width: 180px !important;
    max-width: none !important;
    color: var(--md-muted, #aeb6bb) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  /* ------------------------------------------------------- Statusliste --- */
  /* Zwei Spalten: die sechs Werte stehen damit in drei ruhigen Zeilen statt
     in sechs. "Watchlist" ist die Summe und bekommt wie auf dem Desktop eine
     eigene Zeile mit Trennlinie darueber. */
  html body #view-home .home-library-counts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2px 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  html body #view-home .home-library-counts li {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0 8px !important;
    /* 34 px Zeilenhoehe: bequem mit dem Daumen zu treffen und immer noch
       kompakt genug fuer drei Zeilen. */
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  html body #view-home .home-library-counts li.is-total {
    grid-column: 1 / -1 !important;
    margin-top: 4px !important;
    padding-top: 6px !important;
    border-top: 1px solid var(--home-card-line, rgba(255, 255, 255, .08)) !important;
  }

  /* Ohne feste Groesse rendert das Symbol in seiner Eigengroesse - das war
     die Ursache der 312 px hohen Zeilen. */
  html body #view-home .home-library-counts li i {
    display: grid !important;
    place-items: center !important;
    width: 18px !important;
    height: 18px !important;
    color: var(--md-dim, #7f8a91) !important;
  }

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

  html body #view-home .home-library-counts li span {
    min-width: 0 !important;
    overflow: hidden !important;
    color: var(--md-muted, #aeb6bb) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

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

  /* ------------------------------------------------------------ Aktion --- */
  /* Voller Breite und 44 px hoch - dieselbe Knopfsprache wie die uebrigen
     mobilen Aktionen der Startseite. Ziel und Beschriftung unveraendert. */
  html body #view-home .home-library-snapshot .ghost-action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    text-align: center !important;
  }
}