/* ==========================================================================
   AnimeRadar V2.4.262 - Einheitliche Seitenbanner

   Alle Standard-Seitenbanner ausser der Startseite tragen dieselbe
   Bildsprache wie der Banner der Seite "Social Media": roter Lichtschwerpunkt
   rechts, weicher Uebergang nach links ins Dunkle, Text auf dunklem Grund.

   Kein Bild. Die Optik von Social Media entsteht dort ausschliesslich aus
   Verlaeufen - das Element .socialhub-hero-art ist leer. Die vorhandenen
   Dateien assets/banners/socials-inkedweeb-2026-*.webp sind an keiner Stelle
   eingebunden und tragen den Schriftzug "INKEDWEEB" fest im Bild; sie
   bleiben deshalb unberuehrt. Damit gibt es auch nichts zu duplizieren und
   nichts zusaetzlich zu laden.

   Die Werte sind Zeichen fuer Zeichen die aus
   material-social-media-v2-4-223.css, Abschnitt "Hero":

     Grundflaeche   linear-gradient(100deg, #08080e, #0b0810 42%, #16070f)
     Lichtkegel     vier radiale Verlaeufe auf den rechten 58 Prozent
     Uebergang      linear-gradient(90deg, #08080e -> transparent bei 84%)

   Aufgebaut wird das hier nicht ueber ein eigenes Element, sondern als
   Ebenenstapel auf der Bannerflaeche selbst. Der Grund: jede Seite bringt
   ihren eigenen Banner mit eigener Geometrie mit (Raster, absolute Flaechen,
   verschiedene Hoehen). Ein Stapel aus background-Ebenen kommt ohne jede
   Aenderung an Position, Groesse und Innenabstand aus - Titel, Texte,
   Knoepfe, Symbole und Hoehen bleiben, wie sie sind.

   Die rechten 58 Prozent entstehen ueber background-size: die Prozentwerte
   innerhalb eines radial-gradient beziehen sich auf die Ebene, nicht auf das
   Element. Eine 58 Prozent breite, rechtsbuendige Ebene ergibt damit exakt
   dasselbe Bild wie die 58 Prozent breite Flaeche auf Social Media.

   V264: Die gemeinsamen Masse und Abstaende stehen in
   material-platform-fixes-v2-4-264.css. Mobile/App 197 px, Desktop 234 px.
   Die abschliessenden Regeln entfernen alte doppelte Pseudo-Overlays.

   Nicht enthalten:
     - Startseite (#view-home) - ausdruecklich unveraendert
     - Anime-Detail und Profil - eigene, inhaltsbezogene Koepfe
   ========================================================================== */

html body :is(
  #view-search .ar-page-hero,
  #view-calendar .ar-page-hero,
  #view-season .seasons-reference-hero,
  #view-lists .collection-hero,
  #view-planner .collection-hero,
  #view-news .news-hero,
  #view-toplists .tl-hero,
  #view-socials .socialhub-hero,
  #view-giveaway .gw-hero,
  #view-voting .vt-hero,
  #view-roadmap .rm-hero,
  #view-app .ap-hero,
  #view-premium .pm-hero,
  #view-app .ap-hero-copy
) {
  /* Breite des Lichtbereichs. Mobil wird der Wert weiter unten angepasst. */
  --ar-banner-art: 58%;
  --ar-banner-grund: #08080e;
  background:
    /* 1. Uebergang nach links - liegt vor dem Licht, damit der Text traegt */
    linear-gradient(90deg,
      var(--ar-banner-grund) 0%,
      rgba(8, 8, 14, .72) 24%,
      rgba(8, 8, 14, .14) 60%,
      rgba(8, 8, 14, 0) 84%),
    /* 2. bis 5. der rote Lichtkegel auf der rechten Seite */
    radial-gradient(66% 108% at 72% 44%, rgba(255, 48, 66, .52) 0%, rgba(176, 16, 38, .34) 40%, rgba(24, 6, 14, 0) 74%),
    radial-gradient(40% 70% at 40% 22%, rgba(255, 86, 96, .30) 0%, rgba(255, 86, 96, 0) 76%),
    radial-gradient(48% 92% at 90% 78%, rgba(214, 24, 50, .30) 0%, rgba(214, 24, 50, 0) 72%),
    radial-gradient(26% 44% at 58% 62%, rgba(255, 120, 128, .18) 0%, rgba(255, 120, 128, 0) 78%),
    /* 6. die Grundflaeche */
    linear-gradient(100deg, #08080e 0%, #0b0810 42%, #16070f 100%) !important;
  background-repeat: no-repeat !important;
  /* Der Uebergang liegt auf derselben Ebenenbreite wie das Licht, nicht
     ueber dem ganzen Banner. Das ist der entscheidende Punkt: auf Social
     Media ist er das ::after der 58 Prozent breiten Flaeche, seine Stopps
     20/58/86 beziehen sich also auf diese Flaeche. Ueber die volle Breite
     gelegt haette er das Rot deutlich zu stark gedaempft - auf Mobil war
     davon fast nichts mehr uebrig. */
  background-position:
    right center,
    right center, right center, right center, right center,
    left center !important;
  background-size:
    var(--ar-banner-art) 100%,
    var(--ar-banner-art) 100%, var(--ar-banner-art) 100%, var(--ar-banner-art) 100%, var(--ar-banner-art) 100%,
    100% 100% !important;
}

/* Die Motivflaechen der einzelnen Seiten malen jetzt nichts mehr - der
   Lichtkegel kommt vom Banner selbst. Geometrie und Platzbedarf bleiben
   unangetastet, damit keine Hoehe springt. */
html body :is(
  #view-search .ar-page-hero-art,
  #view-calendar .ar-page-hero-art,
  #view-season .seasons-reference-hero-art,
  #view-lists .collection-hero-art,
  #view-planner .collection-hero-art,
  #view-news .news-hero-art,
  #view-toplists .tl-hero-art,
  #view-socials .socialhub-hero-art,
  #view-voting .vt-hero-art,
  #view-roadmap .rm-hero-art,
  #view-app .ap-hero-art,
  #view-premium .pm-hero-art
) {
  background: none !important;
}

/* Giveaway war die einzige Seite mit einem eigenen Bannerbild
   (assets/banners/giveaway-itachi-2026-*.webp). Es entfaellt hier auf
   ausdruecklichen Wunsch zugunsten der einheitlichen Flaeche. Die Flaeche
   selbst bleibt stehen - sie liegt absolut mit inset: 0 und z-index: -1,
   ihr Wegfall wuerde an der Bannerhoehe nichts aendern, ihr Bestehenbleiben
   aber auch nichts verdecken. Rueckgaengig zu machen ist das eine Zeile. */
html body #view-giveaway .gw-hero-art {
  background: none !important;
}

html body #view-giveaway .gw-hero-art > :is(img, picture) {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Mobil
   --------------------------------------------------------------------------
   Social Media faehrt unterhalb von 960 px einen schmaleren Lichtbereich
   (56 statt 58 Prozent) und einen etwas frueher greifenden Uebergang. Beides
   wird hier uebernommen, damit der Text auf der schmalen Flaeche nicht in
   den hellen Bereich rutscht. */
@media (max-width: 959px) {
  html body :is(
    #view-search .ar-page-hero,
    #view-calendar .ar-page-hero,
    #view-season .seasons-reference-hero,
    #view-lists .collection-hero,
    #view-planner .collection-hero,
    #view-news .news-hero,
    #view-toplists .tl-hero,
  #view-socials .socialhub-hero,
    #view-giveaway .gw-hero,
    #view-voting .vt-hero,
    #view-roadmap .rm-hero,
    #view-app .ap-hero,
    /* Unterhalb von 960 px setzt die App-Seite ihren Banner auf
       display: contents - das Element hat dort keine eigene Flaeche und kann
       nichts malen. Sichtbar ist stattdessen die Textflaeche, die dort einen
       eigenen roten Verlauf mitbringt. Sie traegt hier die Komposition. */
    #view-app .ap-hero-copy,
    #view-premium .pm-hero
  ) {
    --ar-banner-art: 56%;
    /* Hier bewusst background-image und nicht die Kurzform background:
       Die Kurzform setzt background-size und background-position auf ihre
       Anfangswerte zurueck. Alle sechs Ebenen lagen dann links oben in
       Originalgroesse - der Uebergang deckte das Licht vollstaendig zu, und
       vom Rot blieb auf Mobil fast nichts uebrig. */
    background-image:
      linear-gradient(90deg,
        var(--ar-banner-grund) 0%,
        rgba(8, 8, 14, .70) 20%,
        rgba(8, 8, 14, .12) 58%,
        rgba(8, 8, 14, 0) 86%),
      radial-gradient(66% 108% at 72% 44%, rgba(255, 48, 66, .52) 0%, rgba(176, 16, 38, .34) 40%, rgba(24, 6, 14, 0) 74%),
      radial-gradient(40% 70% at 40% 22%, rgba(255, 86, 96, .30) 0%, rgba(255, 86, 96, 0) 76%),
      radial-gradient(48% 92% at 90% 78%, rgba(214, 24, 50, .30) 0%, rgba(214, 24, 50, 0) 72%),
      radial-gradient(26% 44% at 58% 62%, rgba(255, 120, 128, .18) 0%, rgba(255, 120, 128, 0) 78%),
      linear-gradient(100deg, #08080e 0%, #0b0810 42%, #16070f 100%) !important;
  }
}

/* Die Textflaeche der App-Seite ist unterhalb von 960 px rund 400 px hoch -
   etwa doppelt so hoch wie ein Banner. Ueber diese Flaeche verteilt sich
   derselbe Lichtkegel auf die doppelte Hoehe und wirkt entsprechend blass.
   Deshalb wird er dort auf Bannerhoehe gehalten und oben verankert; die
   Flaeche darunter traegt weiterhin die Grundflaeche. */
@media (max-width: 959px) {
  html body #view-app .ap-hero-copy {
    background-size:
      var(--ar-banner-art) 240px,
      var(--ar-banner-art) 240px, var(--ar-banner-art) 240px, var(--ar-banner-art) 240px, var(--ar-banner-art) 240px,
      100% 100% !important;
    background-position:
      right top,
      right top, right top, right top, right top,
      left center !important;
  }
}

/* --------------------------------------------------------------------------
   Tablet
   --------------------------------------------------------------------------
   Zwischen 600 und 959 px ist der Banner breiter als auf einem Telefon, der
   Text aber weiterhin linksbuendig und schmal. Mit 56 Prozent rueckt der
   Lichtkegel dort zu weit in die Mitte; 50 Prozent halten ihn rechts und
   lassen die Textseite so dunkel wie auf dem Desktop. */
@media (min-width: 600px) and (max-width: 959px) {
  html body :is(
    #view-search .ar-page-hero,
    #view-calendar .ar-page-hero,
    #view-season .seasons-reference-hero,
    #view-lists .collection-hero,
    #view-planner .collection-hero,
    #view-news .news-hero,
    #view-toplists .tl-hero,
  #view-socials .socialhub-hero,
    #view-giveaway .gw-hero,
    #view-voting .vt-hero,
    #view-roadmap .rm-hero,
    #view-app .ap-hero,
    #view-app .ap-hero-copy,
    #view-premium .pm-hero
  ) {
    --ar-banner-art: 50%;
  }
}

/* V264: Remove the old decorative passes; the six layers above paint once. */
html body :is(
  #view-search .ar-page-hero, #view-calendar .ar-page-hero,
  #view-season .seasons-reference-hero, #view-lists .collection-hero,
  #view-planner .collection-hero, #view-news .news-hero,
  #view-toplists .tl-hero, #view-socials .socialhub-hero,
  #view-giveaway .gw-hero, #view-voting .vt-hero,
  #view-roadmap .rm-hero, #view-premium .pm-hero
)::before,
html body :is(
  #view-search .ar-page-hero, #view-calendar .ar-page-hero,
  #view-season .seasons-reference-hero, #view-lists .collection-hero,
  #view-planner .collection-hero, #view-news .news-hero,
  #view-toplists .tl-hero, #view-socials .socialhub-hero,
  #view-giveaway .gw-hero, #view-voting .vt-hero,
  #view-roadmap .rm-hero, #view-premium .pm-hero
)::after,
html body :is(
  #view-search .ar-page-hero-art, #view-calendar .ar-page-hero-art,
  #view-season .seasons-reference-hero-art, #view-lists .collection-hero-art,
  #view-planner .collection-hero-art, #view-news .news-hero-art,
  #view-toplists .tl-hero-art, #view-socials .socialhub-hero-art,
  #view-giveaway .gw-hero-art, #view-voting .vt-hero-art,
  #view-roadmap .rm-hero-art, #view-premium .pm-hero-art
)::after { content: none !important; }