/*
 * AnimeRadar v2.4.235
 *
 * Gezielte Korrekturen auf Startseite und den vier Rechtsseiten. Kein
 * Redesign. Diese Datei wird direkt vor material-selected-state-v2-4-232.css
 * geladen, damit der gemeinsame Auswahlzustand die letzte Instanz bleibt.
 *
 * Abschnitte:
 *   1. Startseite - Pfeil zurueck bei "Gerade heiss"
 *   2. Startseite - Sektion "Aktuelle Giveaways"
 *   3. Rechtsseiten - Darstellung auf schmalen Geraeten
 *   4. Fusszeile - Rechtslinks auf schmalen Geraeten
 *
 * Nicht enthalten, weil reine Markup-Aenderungen: der fehlende Satzpunkt im
 * Social-Media-Hero, das entfernte Icon in "Zum Kalender" und der entfernte
 * untere Banner der App-Seite (dessen Regeln liegen geloescht in
 * material-app-v2-4-227.css).
 */

/* ========================================================================== */
/* 1. Startseite - Pfeil zurueck bei "Gerade heiss"                           */
/* ========================================================================== */

/* Die Rolle hatte nur einen Vorwaertsknopf. Der neue Zurueckknopf spiegelt
   ihn exakt: gleiche Groesse, gleiche Farben, gleiche Position, nur an der
   linken Kante. Sichtbarkeit steuert das Skript ueber das hidden-Attribut,
   damit der Knopf auch fuer Hilfsmittel verschwindet. */
@media (min-width: 960px) {
  html body #view-home .poster-rail-prev {
    position: absolute !important;
    top: 50%;
    left: 8px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid var(--home-card-line);
    border-radius: 50%;
    background: rgba(10, 5, 6, .78);
    color: var(--md-on-surface);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
  }

  html body #view-home .poster-rail-prev:hover {
    border-color: color-mix(in srgb, var(--md-primary) 45%, transparent);
    color: #fff;
  }

  html body #view-home .poster-rail-prev[hidden] {
    display: none !important;
  }
}

/* Unter 960 px blendet die Referenz bereits den Vorwaertsknopf aus; die
   Rolle wird dort mit dem Finger geschoben. Der Zurueckknopf folgt dem. */
@media (max-width: 959px) {
  html body #view-home .poster-rail-prev {
    display: none !important;
  }
}

/* ========================================================================== */
/* 2. Startseite - Sektion "Aktuelle Giveaways"                               */
/* ========================================================================== */

/* Ersetzt die frueheren Community-Beispielinhalte an derselben Stelle. Der
   Inhalt wird aus der Giveaway-Ansicht gespiegelt, hier steht nur die
   Darstellung. Farben und Radien kommen aus den vorhandenen Startseiten-
   Tokens, es wird keine neue Designsprache eingefuehrt.

   Der Platz ist eng und vorgegeben: .home-bottom-grid stellt auf Desktop
   eine Spalte von rund 386 px bei fester Zeilenhoehe 210 px bereit, auf
   schmalen Geraeten nur rund 172 px Breite. Deshalb eine kompakte Kachel
   mit begrenzten Zeilenzahlen statt einer breiten Karte. */
html body #view-home .home-giveaway-body {
  margin-top: 8px;
}

html body #view-home .home-giveaway-card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--home-card-line);
  border-radius: var(--home-card-radius, 10px);
  background: var(--home-sub-bg, #0e0808);
}

html body #view-home .home-giveaway-media {
  display: block;
  overflow: hidden;
  border-radius: 7px;
  aspect-ratio: 4 / 3;
}

html body #view-home .home-giveaway-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html body #view-home .home-giveaway-copy {
  min-width: 0;
}

html body #view-home .home-giveaway-status {
  display: inline-flex;
  align-items: center;
  height: 18px;
  margin-bottom: 4px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--home-chip-bg, #241618);
  color: var(--home-title, #fff);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

html body #view-home .home-giveaway-status[hidden] {
  display: none;
}

/* Zeilenzahl begrenzt, damit die Kachel die feste Zeilenhoehe des
   Startseitenrasters nicht sprengt. */
html body #view-home .home-giveaway-copy h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0 0 4px;
  color: var(--home-title, #fff);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.25;
}

html body #view-home .home-giveaway-copy p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  color: var(--home-body, rgba(236, 230, 233, .84));
  font-size: 12px;
  line-height: 1.45;
}

html body #view-home .home-giveaway-empty {
  margin: 0;
  padding: 16px 10px;
  border: 1px dashed var(--home-card-line);
  border-radius: var(--home-card-radius, 10px);
  color: var(--home-body, rgba(236, 230, 233, .84));
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

/* Der Knopf uebernimmt den Ruhezustand der Filterpille, den die Startseite
   seit V2.4.233 fuer ihre sekundaeren Knoepfe verwendet ("Zum Kalender",
   "Zu deiner Bibliothek"). Keine neue Knopfsprache. */
html body #view-home .home-giveaway-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  margin-top: 8px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: #0f1316;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

html body #view-home .home-giveaway-cta:hover {
  border-color: rgba(255, 255, 255, .26);
  background: #161b1f;
}

/* Unter 960 px ist die Kachel nur rund 172 px breit. Nebeneinander bliebe
   fuer den Text nichts uebrig, deshalb dort gestapelt. */
@media (max-width: 959px) {
  html body #view-home .home-giveaway-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  html body #view-home .home-giveaway-media {
    aspect-ratio: 16 / 9;
  }

  html body #view-home .home-giveaway-copy h3 {
    font-size: 13px;
  }

  html body #view-home .home-giveaway-copy p {
    -webkit-line-clamp: 3;
    font-size: 11.5px;
  }

  html body #view-home .home-giveaway-cta {
    width: 100%;
  }
}

/* ========================================================================== */
/* 3. Rechtsseiten - Darstellung auf schmalen Geraeten                        */
/* ========================================================================== */

/* Credits nutzt .legal-card, die drei uebrigen Rechtsseiten .legal-doc. Nur
   .legal-doc war in material-reference-misc-v2-4-194.css auf eine ruhige
   Groesse gebracht worden; .legal-card blieb bei clamp(24px, 2.4vw, 34px)
   aus styles-v2-4-141.css. Auf 390 px standen dadurch 24px-Ueberschriften
   neben 17px-Ueberschriften derselben Seitengruppe. Die folgende Regel
   bringt Credits auf dieselbe Stufe. */
html body #view-credits .legal-card h2 {
  margin: 0 0 12px;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -.005em;
}

html body #view-credits .legal-card p {
  max-width: 74ch;
  line-height: 1.7;
}

/* Lange, nicht trennbare Zeichenfolgen - Mailadressen, Domains im code-Tag,
   Erklaerungs-URLs - duerfen auf schmalen Geraeten keinen Ueberlauf
   erzeugen. break-word trennt nur, wenn es sonst nicht passt. */
html body :where(#view-credits, #view-privacy, #view-imprint, #view-terms)
  :where(.legal-doc, .legal-card) :where(p, li, a, code, strong) {
  overflow-wrap: break-word;
}

@media (max-width: 760px) {
  html body #view-credits .legal-card {
    padding: 16px;
  }

  html body #view-credits .legal-card h2 {
    font-size: 17px;
  }

  /* Die Einleitung der Rechtsseiten lief bis an die Spaltenkante. Eine
     ruhigere Zeilenlaenge und etwas Luft darunter trennen sie sichtbar vom
     folgenden Dokument. */
  html body :where(#view-credits, #view-privacy, #view-imprint, #view-terms)
    .legal-title-row {
    margin-bottom: 14px;
  }

  html body :where(#view-credits, #view-privacy, #view-imprint, #view-terms)
    .legal-title-row p {
    max-width: 42ch;
    line-height: 1.6;
  }

  /* Auf schmalen Geraeten wirkte die Grossschreibung der Hauptueberschrift
     gedraengt. Etwas mehr Zeilenabstand, gleiche Schriftgroesse. */
  html body :where(#view-credits, #view-privacy, #view-imprint, #view-terms)
    .legal-title-row .page-main-title {
    line-height: 1.15;
  }
}

/* ========================================================================== */
/* 4. Fusszeile - Rechtslinks auf schmalen Geraeten                           */
/* ========================================================================== */

/* Die drei Rechtslinks standen unter 760 px als schmale, rechtsbuendige
   Saeule neben der Wortmarke. Sie bilden jetzt eine eigene Zeile mit
   gleichmaessigen Abstaenden und brechen bei Bedarf um. */
@media (max-width: 760px) {
  html body .site-footer .footer-links {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px 18px;
    width: 100%;
  }

  html body .site-footer .footer-links > a {
    white-space: nowrap;
  }
}