/*
 * AnimeRadar v2.4.238 - gezielte Korrekturen in Bibliothek, Seasons,
 * Startseite und bei den Seitenbannern.
 *
 * Jede Regel steht mit ihrer gemessenen Ursache dabei. Es wird nur das
 * geaendert, was die jeweilige Meldung betrifft; Farben, Schriften und die
 * uebrigen Abstaende der abgeschlossenen Redesigns bleiben unberuehrt.
 */

/* ========================================================================== */
/* 1. Bibliothek - Chevrons der Filterfelder stehen rechts                    */
/* ========================================================================== */

/* .ar-select-btn ist ein Raster "minmax(0, 1fr) 44px" (styles-v2-4-141.css).
   material-reference-library-planner-v2-4-220.css gibt dem Pfeil width: 14px
   und flex: 0 0 14px - flex wirkt an einem Rasterelement nicht, die feste
   Breite hebt aber das voreingestellte justify-self: stretch auf. Der Pfeil
   klebte dadurch links in der 44-px-Spalte: gemessen 45 px Abstand zur
   rechten Feldkante bei allen drei Feldern, waehrend der Text links nur
   15 px Abstand hat. justify-self: end schiebt ihn an das rechte Ende seiner
   Spalte. Dieselbe Korrektur hat der Planer seit V2.4.233. */
html body #view-lists .ar-select-arrow {
  justify-self: end !important;
}

/* ========================================================================== */
/* 2. Bibliothek - geoeffnetes Aufklappmenue liegt ueber der Listenleiste     */
/* ========================================================================== */

/* Gemessen: #customLists.list-tabs traegt position: relative und
   z-index: 30000 (fuer die eigenen Listenmenues). Das Aufklappmenue der
   Filterfelder liegt zwar bei z-index 62000, aber innerhalb des
   Stapelkontexts seines <label>, und der steht ohne eigenen Rang unter der
   Listenleiste. Die Genres- und Statusliste wurde deshalb von den
   Listen-Pillen ueberdeckt.
   Loesung: nur das Label mit geoeffnetem Feld bekommt einen Rang knapp
   ueber der Listenleiste. Keine globale z-index-Anhebung. */
html body #view-lists .lib-reference-filter-row label:has(.ar-select.is-open) {
  position: relative;
  z-index: 30001;
}

/* ========================================================================== */
/* 3. Seasons - "Beliebtheit" steht linksbuendig im Feld                      */
/* ========================================================================== */

/* Das Feld war 148 px breit, die Textspalte damit genau so breit wie der
   Text selbst (gemessen 88 px inklusive der 12 px Innenabstand von
   .ar-select-text). Zwischen Feldkante und Text lag links wie rechts
   derselbe Abstand, der Schriftzug wirkte zentriert. Mit mehr Breite fuellt
   die 1fr-Spalte den Rest und der Text sitzt sichtbar links; der Pfeil
   bleibt in seiner 44-px-Spalte rechts. */
/* Die feste Breite gilt nur am Desktop. Bei 360 px steht neben dem Feld
   noch die Ansichtsumschaltung; 190 px wuerden sie dort ueberdecken
   (gemessen: Feldkante 341, Umschalter ab 265). Mobil bleibt die bisherige
   Breite, der Text steht dort durch die 1fr-Spalte ohnehin links. */
@media (min-width: 960px) {
  html body #view-season .seasons-reference-actions > .ar-select {
    width: 190px;
    min-width: 190px;
  }
}

html body #view-season .seasons-reference-actions > .ar-select .ar-select-text {
  justify-content: flex-start;
  text-align: left;
}

/* ========================================================================== */
/* 4. Startseite - "Gerade heiss" enger zusammen                              */
/* ========================================================================== */

/* Ab 1181 px setzt material-reference-home-v2-4-194.css die Karten auf
   90 px Breite ("die Referenz zeigt sieben schmale Karten"), die Spurbreite
   des Rasters blieb aber bei 150 px. Zwischen zwei 90-px-Karten lagen damit
   78 px statt der vorgesehenen 18 px - gemessener Rasterabstand 168 px.
   Die Spur folgt jetzt der Kartenbreite, der Abstand wird sichtbar zum
   eingestellten Wert. Kartengroesse, Bildhoehe und Text bleiben gleich. */
@media (min-width: 1181px) {
  html body #view-home #trendingRail {
    grid-auto-columns: 90px !important;
    gap: 14px !important;
  }
}

/* ========================================================================== */
/* 5. Startseite - "Zum Giveaway" sitzt unten wie "Zum Kalender"              */
/* ========================================================================== */

/* Die Schaltflaeche war ein schmaler Pillenknopf am linken Rand. Die
   Vergleichsflaeche "Zum Kalender" (.home-card-action) steht unten ueber die
   volle Breite. Dieselbe Logik: nach unten schieben, volle Breite, Inhalt
   mittig. Farben und Hoehe bleiben wie bisher in V2.4.235 definiert. */
@media (min-width: 960px) {
  html body #view-home .home-giveaway-cta {
    display: flex;
    width: 100%;
    margin-top: auto;
    border-radius: 9px;
  }

  html body #view-home .home-community-activity:has(.home-giveaway-cta),
  html body #view-home .content-band:has(> .home-giveaway-cta) {
    display: flex;
    flex-direction: column;
  }

  html body #view-home .home-giveaway-body {
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* ========================================================================== */
/* 6. Gemeinsame Groessenlogik der Seitenbanner                               */
/* ========================================================================== */

/* Entdecken und Kalender nutzen .ar-page-hero mit min-height 167,
   Innenabstand 20/22 und Radius 12. Die uebrigen Inhaltsseiten hatten
   eigene Hoehen zwischen 160 und 188 px. Diese Werte stehen jetzt einmal
   als Variablen und werden auf die Koepfe der normalen Inhaltsseiten
   angewandt.
   Nicht angefasst wird der Abstand nach unten: er kommt auf den meisten
   Seiten aus dem Raster der Seite selbst (Premium zum Beispiel aus einem
   row-gap von 12). Ein zusaetzlicher Aussenabstand wuerde sich dort
   addieren.
   Bewusst ausgenommen: Startseite, Profil und Anime-Detailansicht. */
:root {
  --ar-page-hero-min-h: 167px;
  --ar-page-hero-pad-y: 20px;
  --ar-page-hero-pad-x: 22px;
  --ar-page-hero-radius: 12px;
}

@media (min-width: 960px) {
  html body #view-lists .collection-hero,
  html body #view-planner .collection-hero,
  html body #view-season .seasons-reference-hero,
  html body #view-socials .socialhub-hero,
  html body #view-news .news-hero,
  html body #view-toplists .tl-hero,
  html body #view-voting .vt-hero,
  html body #view-premium .pm-hero {
    min-height: var(--ar-page-hero-min-h) !important;
    height: auto !important;
    max-height: none !important;
    padding-top: var(--ar-page-hero-pad-y) !important;
    padding-bottom: var(--ar-page-hero-pad-y) !important;
    border-radius: var(--ar-page-hero-radius) !important;
  }

  /* Seiten mit eigenem Motiv links oder rechts behalten ihren
     Innenabstand an der Motivseite, sonst wuerde das Bild beschnitten. */
  html body #view-lists .collection-hero,
  html body #view-planner .collection-hero,
  html body #view-socials .socialhub-hero,
  html body #view-news .news-hero,
  html body #view-toplists .tl-hero,
  html body #view-voting .vt-hero {
    padding-left: var(--ar-page-hero-pad-x) !important;
  }
}

/* Bewusst nicht angeglichen: der Kopf von Roadmap, Bugs melden und Feature
   Wunsch (.rm-hero) traegt ausser Titel und Text auch die Filterzeile
   (.rm-hero-extra). Eine feste Hoehe von 167 wuerde dort Inhalt abschneiden.
   Ebenfalls aussen vor bleibt der Giveaway-Kopf: er zeigt als einziger ein
   echtes Projektbanner (gw-hero-art mit Bild, 232 hoch) und ist damit ein
   anderer Kopftyp als die reinen Textkoepfe von Entdecken und Kalender.
   Ebenfalls unberuehrt: Startseite, Profil und Anime-Detailansicht.

   Mobil bleibt es bei den bestehenden Hoehen der einzelnen Seiten: die
   Referenzbilder zeigen dort bewusst unterschiedlich hohe Koepfe. */