/*
 * AnimeRadar v2.4.233
 *
 * Gezielte UI-Korrekturen. Kein Redesign. Jede Aenderung gehoert zu einem
 * der unten aufgefuehrten Bereiche und ist dort begruendet.
 *
 * Diese Datei wird direkt vor material-selected-state-v2-4-232.css geladen.
 * Der gemeinsame Auswahlzustand bleibt damit die letzte Instanz: neue
 * Aktiv-/Ausgewaehlt-Zustaende werden hier nicht neu erfunden, sondern
 * ueber die Tokens --ar-selected-* aus jener Datei bezogen.
 *
 * Abschnitte:
 *   1. Anime Voting
 *   2. Globales AnimeRadar-Logo
 *   3. Entdecken
 *   4. Kalender
 *   5. Bibliothek
 *   6. Startseite
 *   7. Mein Planer
 *   8. Social Media
 *   9. Anime-News Detailansicht
 *  10. Anime-News
 *  11. AnimeRadar App
 */

/* -------------------------------------------------------------------------- */
/* 1. Anime Voting                                                            */
/* -------------------------------------------------------------------------- */

/* 1.1 Der rote Schein hinter dem VS lag 30 px zu weit links.

   Die Ebene ist #view-voting .vt-vs::before mit inset: 8% -30% 8% -30%,
   also gewollt 160 px breit bei einer 100 px breiten VS-Spalte. Die globale
   Regel "*, *::before, *::after { max-inline-size: 100% }" aus
   styles-v2-4-141.css (Ueberlaufschutz) klemmt diese Breite auf 100 px.
   Damit sind left, right und width ueberbestimmt; nur left: -30px wirkt,
   right faellt weg und die ganze Ebene rutscht um 30 px nach links.
   Gemessen bei 1440: Ebene 607-707 statt 607-767, Mitte 657 statt 687.

   Die Aufhebung der Klemmung stellt die gewollte Geometrie wieder her. Der
   Verlauf steht darin bereits mittig (at 50% 50%), deshalb genuegt diese
   eine Deklaration. VS-Spalte und beide Karten bleiben unveraendert. */
#view-voting.voting-2026 .vt-vs::before {
  max-width: none;
}

/* Zweiter Teil derselben Ursache: .vt-card, .vt-vs und .vt-card sind alle
   position: relative ohne z-index und werden deshalb in Dokumentreihen-
   folge gemalt. Die zweite Karte liegt damit ueber dem rechten Ueberhang
   des Scheins, waehrend der linke Ueberhang ueber der ersten Karte sichtbar
   bleibt. Sichtbar gemessen bei gleich eingefaerbten Karten: der Schein
   endet hart an der Kartenkante 737 statt bei 762, sein Schwerpunkt liegt
   1.48 px links der VS-Mitte (mobil 1.73 px).

   z-index: 1 stellt die von inset: 8% -30% 8% -30% gemeinte symmetrische
   Ueberlappung her; danach ist der sichtbare Schwerpunkt deckungsgleich mit
   der VS-Mitte. Der Wert wirkt nur innerhalb der Arena, die wegen
   container-type: inline-size ein eigener Stapelkontext ist. Klicks sind
   nicht betroffen: die VS-Spalte selbst ragt nicht ueber die Karten und die
   Scheinebene traegt pointer-events: none. */
#view-voting.voting-2026 .vt-vs {
  z-index: 1;
}

/* 1.2 Der Umschalter Anime/Charaktere stand rechts in der Kopfzeile
   (margin-left: auto) und damit 241.81 px rechts der Achse zwischen den
   beiden Voting-Bildern. Die Kopfzeile hat dieselbe Inhaltsbreite wie die
   Arena, ihre Mitte ist also genau diese Achse.

   Der Umschalter wird deshalb absolut auf die Mitte der Kopfzeile gesetzt.
   Er verlaesst damit den Flexfluss; das bisherige margin-left: auto
   uebernimmt der Countdown, der dadurch rechtsbuendig bleibt.

   Erst ab 1065 px: darunter wird die Kopfzeile zu schmal und der zentrierte
   Umschalter wuerde die Ueberschrift ueberdecken (gemessener Abstand bei
   960 px: -18.9 px, bei 1041 px: -1.4 px, bei 1065 px: +10.6 px). Unterhalb
   davon bleibt es beim bisherigen rechtsbuendigen Verhalten, mobil bleibt
   die eigene Zeile aus material-giveaway-voting-v2-4-225.css bestehen. */
@media (min-width: 1065px) {
  #view-voting.voting-2026 .vt-current-head {
    position: relative;
  }

  #view-voting.voting-2026 .vt-current-head .vt-mode-switch {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: 0;
    transform: translate(-50%, -50%);
  }

  #view-voting.voting-2026 .vt-current-head .vt-countdown {
    margin-left: auto;
  }
}

/* 1.3 Das Logo neben "Aktuelles Voting" hat weder Hintergrund noch Rahmen,
   Schatten oder Wrapper; das wurde nachgemessen und mit gruen hinterlegter
   Kopfzeile belegt. Es ist bereits dasselbe Asset wie die Marke oben links.
   Der dunkle Eindruck kam allein aus der Groesse: bei 24 px verschmilzt das
   Sechseck zu einem dunklen Block. Auf Wunsch des Benutzers steht es auf
   dem Desktop jetzt auf 30 px, genau wie die Marke oben links. Die Regel
   ist auf die Kopfzeile des aktuellen Votings begrenzt, damit das
   Balkensymbol von "Letzte Votings" unveraendert bleibt. Die Kopfzeile ist
   52 px hoch und behaelt diese Hoehe. Mobil bleibt es bei 20 px. */
@media (min-width: 960px) {
  #view-voting.voting-2026 .vt-current-head .vt-panel-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  #view-voting.voting-2026 .vt-current-head .vt-panel-icon img {
    width: 30px;
    height: 30px;
  }
}

/* 1.4 Senkrechte Ausrichtung des Logos zur Ueberschrift. Siehe Abschnitt 2:
   die sichtbare Grafik des Assets sitzt um 4.625 % der Bildhoehe zu hoch.
   Derselbe prozentuale Ausgleich, damit er von der Icongroesse unabhaengig
   bleibt (Desktop 30 px, mobil 20 px). */
#view-voting.voting-2026 .vt-current-head .vt-panel-icon img {
  transform: translateY(4.625%);
}

/* -------------------------------------------------------------------------- */
/* 2. Globales AnimeRadar-Logo                                                */
/* -------------------------------------------------------------------------- */

/* Das Logo stand senkrecht leicht zu hoch neben dem Schriftzug. Ursache ist
   nicht align-items, nicht line-height, nicht die Grundlinie eines Inline-
   Bildes (das img fuellt seine Box vollstaendig aus) und kein Aussen- oder
   Innenabstand, sondern das Asset selbst:

   assets/splash/animeradar-radar-transparent-v1.png ist 1254 x 1254 gross,
   die sichtbare Grafik liegt darin im Rahmen x 220-1035 / y 72-1065. Sie ist
   waagerecht mittig (50.08 %), senkrecht aber bei 45.375 % statt 50 %. Die
   Grafik sitzt dadurch an jeder Anzeigegroesse um 4.625 % ihrer Hoehe zu
   hoch: 1.39 px bei 30, 1.57 px bei 34, 1.30 px bei 28.

   Der Ausgleich ist deshalb prozentual und gilt global, also auch fuer die
   Marke im Fussbereich (.footer-mark), die dasselbe Asset mit demselben
   Fehler zeigt. Groesse, Abstand und Asset bleiben unveraendert. Das
   !important hebt "transform: none !important" aus
   material-redesign-v2-4-194.css auf. */
html body :where(.brand-mark, .footer-mark) img {
  transform: translateY(4.625%) !important;
}

/* -------------------------------------------------------------------------- */
/* 3. Entdecken                                                               */
/* -------------------------------------------------------------------------- */

/* Die Schaltflaeche am Fuss der Filterschublade hiess "Filter anwenden" und
   trug die Kennung searchBtn. Sie ist durch "Alle Filter entfernen" mit der
   Kennung searchFilterClearAll ersetzt, weil jeder Filter der Schublade
   ohnehin sofort greift: die Chips rufen ueber handleDiscoverFilterToggle
   doSearch() auf, Jahr, Status und Synchronfassung haengen an change.
   Das Aussehen bleibt unveraendert, also dieselbe rote Vollflaeche wie zuvor.
   Die Werte stammen eins zu eins aus material-reference-discover-v2-4-194.css,
   wo sie weiterhin unter #searchBtn stehen und dort jetzt ins Leere greifen.
   Der Selektor haengt an :is(#searchFilterCard, #libraryFilterCard, #calendarFilters) und nicht an #view-search, weil
   die Schublade zur Laufzeit an den Seitenkoerper gehaengt wird. */

@media (min-width: 960px) {
  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card #searchFilterClearAll {
    width: 100% !important;
    height: 38px !important;
    min-height: 0 !important;
    margin: 4px 0 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: var(--md-primary) !important;
    color: #fff !important;
    font-size: 13.5px !important;
    font-weight: 650 !important;
  }

  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card #searchFilterClearAll:hover {
    background: #ee2b34 !important;
  }
}

@media (max-width: 959px) {
  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card #searchFilterClearAll {
    position: sticky !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 0 !important;
    margin: 6px 0 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--md-primary) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 650 !important;
  }
}

/* Die Chipreihe "Beliebte Genres" ist aus index.html entfernt. Die Regeln zu
   .discover-genre-row, .discover-genre-row-label und .discover-chip-row in
   material-reference-discover-v2-4-194.css und in
   material-reference-pages-v2-4-194.css greifen dadurch ins Leere; sie
   bleiben unangetastet stehen. Ein Ersatz fuer den Abstand ist nicht noetig:
   gemessen trug die Reihe bei 1440 eine Hoehe von 22 px und 37 px unteren
   Aussenabstand, bei 390 eine Hoehe von 135.8 px und 12 px. Nach dem Wegfall
   uebernimmt der vorhandene untere Aussenabstand von .discover-filter-row
   den Abstand zur Ergebniszeile, also 11 px auf Desktop und 12 px mobil.
   Die Breite von "Alle Filter zuruecksetzen" bleibt bei den vorhandenen
   186 px: die laengere Beschriftung misst 141.2 px und passt unveraendert. */

/* -------------------------------------------------------------------------- */
/* 4. Kalender                                                                */
/* -------------------------------------------------------------------------- */

/* 4.1 Der Filterzugang der Toolbar zeigte auf dem Desktop nur sein Symbol.
   material-reference-calendar-v2-4-194.css blendet dazu das <span> mit
   position: absolute und clip-path: inset(50%) aus. Der Benutzer verlangt die
   Beschriftung "Mehr Filter" ausdruecklich, deshalb wird diese Ausblendung
   hier wieder aufgehoben statt in der Referenzdatei geloescht. Der Knopf
   wechselt damit von 38 x 38 auf Inhaltsbreite und traegt dieselben
   Innenmasse wie "Mehr Filter" auf Entdecken, also Abstand 9, Innenabstand 14
   und Symbol 16.

   4.3 Genre-Auswahl, Anbieter-Auswahl, "Mehr Filter" und
   "Alle Filter zuruecksetzen" sollen dieselbe Hoehe und Y-Lage haben.
   Gemessen war der Versatz 7 px: die beiden Auswahllisten sind <label> und
   erben aus styles-v2-4-141.css den globalen unteren Aussenabstand von 14 px.
   Die Toolbar zentriert mit align-items: center die Randbox, also 38 + 14 =
   52 - der sichtbare Kasten sitzt dadurch 7 px hoeher als die randlosen
   Nachbarn. Der Aussenabstand wird genullt; min-height haelt die Zeilenhoehe
   bei den bisherigen 52 px, damit der Rest der Seite nicht um 12 px
   hochrutscht. Die Breiten bleiben unveraendert. */

@media (min-width: 960px) {
  html body #view-calendar .calendar-controls {
    min-height: 52px !important;
  }

  /* Nur der untere Aussenabstand wird genullt. Die Kurzform margin: 0 waere
     hier falsch: material-reference-calendar-v2-4-194.css setzt auf der
     ersten Auswahlliste margin-left: auto !important und schiebt damit beide
     Listen an den rechten Rand der Zeile. Beide Selektoren haben dieselbe
     Spezifitaet (1,2,2), dieses Blatt laedt spaeter - die Kurzform haette die
     Rechtsbuendigkeit aufgehoben. */
  html body #view-calendar .calendar-controls .cal-month-select {
    margin-bottom: 0 !important;
  }

  html body #view-calendar .calendar-controls .calendar-mobile-filter-button > span {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip-path: none !important;
  }

  html body #view-calendar .calendar-controls .calendar-mobile-filter-button {
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    padding: 0 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body #view-calendar .calendar-controls .calendar-mobile-filter-button svg {
    flex: 0 0 16px !important;
  }

  /* 4.2 Gegenstueck zu "Alle Filter zuruecksetzen" auf Entdecken. Die Farben
     entsprechen der Ruecksetz-Schaltflaeche der Filterschublade
     (#calendarApplyFilters), die Masse den uebrigen Bedienelementen der
     Toolbar. */
  html body #view-calendar .calendar-controls .calendar-toolbar-reset {
    order: 5 !important;
    width: auto !important;
    height: 38px !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(216, 52, 58, .62) !important;
    border-radius: 9px !important;
    background: rgba(216, 52, 58, .10) !important;
    color: var(--md-primary) !important;
    font-size: 13.5px !important;
    font-weight: 550 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body #view-calendar .calendar-controls .calendar-toolbar-reset:hover {
    border-color: rgba(216, 52, 58, .8) !important;
    background: rgba(216, 52, 58, .16) !important;
  }

  html body #view-calendar .calendar-controls .calendar-toolbar-reset svg {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
  }
}

/* Mobil traegt die Toolbar den Filterzugang bereits ueber die volle Breite.
   Die Ruecksetz-Schaltflaeche reiht sich unmittelbar darunter mit denselben
   Massen ein. Die beiden Auswahllisten sind in dieser Breite ausgeblendet. */
@media (max-width: 959px) {
  html body #view-calendar .calendar-controls .calendar-toolbar-reset {
    order: 5 !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(216, 52, 58, .62) !important;
    border-radius: 10px !important;
    background: rgba(216, 52, 58, .10) !important;
    color: var(--md-primary) !important;
    font-size: 13.5px !important;
    font-weight: 550 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body #view-calendar .calendar-controls .calendar-toolbar-reset svg {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
  }
}

/* 4.4 Aufklappmenues in der Filterschublade.

   Beim Oeffnen von "Sortierung" oder "Animationsstudio" sprang der Inhalt der
   Schublade an den Anfang zurueck und ragte weit unter ihre Unterkante
   hinaus. Ursache ist ein Spezifitaetskonflikt, kein z-index- und kein
   Positionierungsfehler:

     material-reference-pages-v2-4-194.css
       html body #calendarFilters[id]:has(.ar-select.is-open),
       html body #calendarFilters[id] .filter-body:has(.ar-select.is-open)
       { overflow: visible !important }            (1,3,2) bzw. (1,4,2)

     material-recovery-calendar-discover-v2-4-219.css
       body[data-active-view="calendar"] #calendarFilters:has(...)
       body[data-active-view="calendar"] #calendarFilters .filter-body:has(...)
       { overflow: hidden bzw. hidden auto !important }  (1,3,1) bzw. (1,4,1)

   Beide tragen !important, deshalb entscheidet die Spezifitaet - und die
   spaeter geladene Korrektur aus 219 verliert. Gemessen bei 1440: der
   Scrollstand der Mitte ging von 210 auf 0 zurueck, das Studio-Feld sprang um
   210 px nach unten auf 76 px unterhalb der Schubladenkante, und 137 px
   Filterinhalt lagen frei ueber der Seite.

   positionSelectProxyMenu() in app-v2-4-153.js ist ausdruecklich darauf
   gebaut, dass die Mitte scrollt und beschneidet: es misst den freien Raum
   gegen .filter-body und klappt nach oben oder deckelt max-height. Der Klipp
   wird deshalb wiederhergestellt, ohne JavaScript zu aendern.

   Getrennt nach Breite, weil der Aufbau sich unterscheidet: ab 960 ist die
   Schublade eine feste Spalte, in der nur die Mitte scrollt; darunter scrollt
   die Schublade selbst. */

@media (min-width: 960px) {
  html body #calendarFilters[id].calendar-filters:has(.ar-select.is-open) {
    overflow: hidden !important;
  }

  html body #calendarFilters[id].calendar-filters .filter-body:has(.ar-select.is-open) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 959px) {
  html body #calendarFilters[id].calendar-filters:has(.ar-select.is-open) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

/* -------------------------------------------------------------------------- */
/* 5. Bibliothek                                                              */
/* -------------------------------------------------------------------------- */

/* 5.1 Importieren und Exportieren lagen hinter einem Drei-Punkte-Menue
   (<details class="lib-reference-actions">) in der Ergebniszeile. Das Menue
   ist aus index.html entfernt; beide Schaltflaechen stehen jetzt zusammen mit
   "Liste erstellen" sichtbar in der Listenleiste.

   Nebenbefund zum entfernten Menue: seine Flaeche war nie 190 px breit,
   sondern 28 px. Die globale Regel "*, *::before, *::after
   { max-inline-size: 100% }" aus styles-v2-4-141.css klemmt jedes
   Aufklappmenue auf die Breite seines Ankers - hier auf die 28 px des
   Summary-Knopfes. Dieselbe Ursache steckt hinter Abschnitt 7.4.

   5.2 bis 5.5: die drei Funktionen behalten ihre bestehenden Handler
   (#newListBtn, #importListBtn, #exportAllLibraryBtn). Geaendert sind nur
   Ort, Beschriftung und Darstellung. #exportAllLibraryBtn traegt weiterhin
   is-hidden im Markup; updateAllLibraryExportButton() nimmt die Klasse beim
   Oeffnen der Bibliothek ab. Diese Logik ist unveraendert.

   Die drei Knoepfe teilen sich bewusst EINEN neutralen Aktionsstil. Ein roter
   gefuellter Knopf bedeutet seit V2.4.232 projektweit "ausgewaehlt";
   "Liste erstellen" ist aber eine Aktion. Die Flaeche entspricht deshalb der
   ruhenden Listen-Pille derselben Leiste (#101619 auf
   var(--collection-border), 32 px hoch). Kein --ar-selected-*-Token. */

html body #view-lists .lib-reference-listbar {
  flex-wrap: wrap;
  row-gap: 8px;
}

html body #view-lists .lib-listbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

html body #view-lists .lib-listbar-action {
  display: inline-flex;
  align-items: center;
  height: 32px;
  min-height: 0;
  padding: 0 14px;
  border: 1px solid var(--collection-border);
  border-radius: 8px;
  background: #101619;
  box-shadow: none;
  color: #e6ebee;
  font-size: 12px;
  font-weight: 550;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

html body #view-lists .lib-listbar-action:hover {
  border-color: rgba(167, 187, 195, .34);
  background: #141c20;
}

/* Wie die uebrigen Bedienelemente der Ansicht: kein Groessensprung im
   aktiven oder fokussierten Zustand. */
html body #view-lists .lib-listbar-action:where(:hover, :focus, :focus-visible, :active) {
  transform: none;
}

@media (max-width: 959px) {
  /* Die drei Knoepfe brauchen zusammen mehr Platz als die Listen-Pillen
     uebrig lassen. Ohne eigene Zeile schrumpft #customLists bei 390/360/320
     auf 30/0/0 px und der letzte Knopf laeuft aus der Leiste heraus; sichtbar
     wird das nur deshalb nicht, weil html/body overflow-x: clip tragen. */
  html body #view-lists .lib-listbar-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
    gap: 6px;
  }

  html body #view-lists .lib-listbar-action {
    height: 30px;
    padding: 0 11px;
    font-size: 11px;
  }
}


/* -------------------------------------------------------------------------- */
/* 6. Startseite                                                              */
/* -------------------------------------------------------------------------- */

/* 6.1 "Zum Kalender" (Karte Naechste Releases) und "Zu deiner Bibliothek"
   (Karte Deine Anime auf einen Blick) trugen einen warmen Braunton, der
   sonst nirgends vorkommt: Flaeche #281616, Rand #2b1d20, Radius 9. Beide
   sind einfache Navigationsknoepfe und sollen aussehen wie der sekundaere
   Knopf der Anime-News-Seite.

   Vorlage ist die Pille "Alle News" (.news-pill in
   material-news-toplists-v2-4-224.css) im RUHEZUSTAND. Im Browser gemessen:

     Ruhe    background #0f1316, Rand 1px solid rgba(255,255,255,.14),
             Farbe #ffffff, Radius 999px, kein Schatten
     Hover   background #161b1f, Rand rgba(255,255,255,.26)
     Focus   Rahmen und Flaeche bleiben wie im Ruhezustand, dazu der
             Systemumriss (siehe unten)

   Bewusst NICHT der aktive Zustand der Pille: der rote Schein ist seit
   V2.4.232 projektweit die Bedeutung "ausgewaehlt". Zwei Navigationsknoepfe
   duerfen sie nicht tragen. Deshalb kommt hier auch kein --ar-selected-*
   Token vor.

   Der Umriss bei Tastaturfokus wird hier NICHT gesetzt. Er stammt schon
   heute bei Vorlage und Zielen aus derselben globalen Regel in
   material-redesign-v2-4-194.css:358
   (:focus-visible { outline: 2px solid var(--md-secondary); offset 2 }).
   Gemessen: Vorlage rgb(255,92,107), weil #view-news --md-secondary auf
   #ff5c6b setzt; Startseite rgb(255,82,82) aus dem globalen #ff5252. Den
   News-Wert hier fest einzutragen wuerde einen ansichtsgebundenen Token in
   die Startseite kopieren und die globale Fokussprache brechen.

   Nur Farben, Rand und Radius. Keine Groessen-, Abstands- oder Positions-
   eigenschaft: beide Knoepfe haben feste height/min-height (29 bzw. 33,
   mobil 40) bei box-sizing: border-box und padding 0 bzw. 0 12px, deshalb
   aendert weder der Radius noch der Rand ihr Aussenmass.

   !important ist noetig, weil die Grundregeln in
   material-reference-home-v2-4-194.css und material-redesign-v2-4-194.css
   ebenfalls !important tragen. Die Reihenfolge Basis - :focus-visible -
   :hover bildet die Vorlage nach: dort setzt nur :hover die Flaeche neu. */
html body #view-home .pulse-card .home-card-action,
html body #view-home .home-library-snapshot .ghost-action {
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 999px !important;
  background: #0f1316 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Bei Tastaturfokus bleibt die Flaeche stehen. Ohne diese Regel faerbt
   html body :where(.ghost-action, ...):focus-visible aus
   material-redesign-v2-4-194.css:339 "Zu deiner Bibliothek" mobil rot ein
   (gemessen: Rand rgb(229,57,53), Text rgb(255,82,82)). */
html body #view-home .pulse-card .home-card-action:focus-visible,
html body #view-home .home-library-snapshot .ghost-action:focus-visible {
  border-color: rgba(255, 255, 255, .14) !important;
  background: #0f1316 !important;
  color: #ffffff !important;
}

html body #view-home .pulse-card .home-card-action:hover,
html body #view-home .home-library-snapshot .ghost-action:hover {
  border-color: rgba(255, 255, 255, .26) !important;
  background: #161b1f !important;
  color: #ffffff !important;
}

/* -------------------------------------------------------------------------- */
/* 7. Mein Planer                                                             */
/* -------------------------------------------------------------------------- */

/* 7.1 Der Statistikbereich ist aus index.html und aus
   renderPlannerReference() entfernt. Das Raster braucht dafuer keine
   Anpassung: .planner-reference-layout traegt align-items: start und
   .planner-reference-side ist ein Grid mit gap; mit nur noch einem Kind endet
   die Seitenspalte unter "Demnaechst faellig", ohne Leerflaeche. Deshalb
   steht hier bewusst keine Regel.

   7.3 Die Spalte zeigt jetzt die zugeordnete Liste statt des Sehstatus. Die
   Zelle ist rund 103 px breit; lange oder mehrere Listennamen muessen darin
   einzeilig kuerzen statt die Zeilenhoehe zu sprengen. Der vollstaendige Text
   steht im title-Attribut. Flaeche, Farbe, Radius und Schriftgroesse der
   Pille bleiben unveraendert (aus
   material-reference-library-planner-v2-4-220.css); inline-block statt
   inline-flex, weil text-overflow an einem Flex-Container nicht greift, und
   line-height 16 plus Innenabstand 3 ergibt dieselben 22 px Hoehe wie
   bisher. */
html body #view-planner .planner-status-chip {
  display: inline-block;
  min-height: 0;
  max-width: 100%;
  overflow: hidden;
  line-height: 16px;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

/* 7.2 Die Chevrons der Aufklappfelder standen nicht rechtsbuendig.

   .ar-select-btn ist ein Grid mit "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 Grid-Item
   nicht, und die feste Breite hebt das voreingestellte justify-self: stretch
   auf. Der Pfeil klebte dadurch links in der 44-px-Spalte.
   Gemessen bei 1448: Abstand Pfeilkante zu Feldkante 45 px in allen drei
   Feldern, waehrend der Text links nur 15 px Abstand hat.

   justify-self: end schiebt den Pfeil an das rechte Ende seiner Spalte. Der
   Abstand wird damit zu den 15 px des Feldinnenabstands und ist symmetrisch
   zur linken Textkante. Breite, Hoehe, Farbe, Glyph und Menue bleiben
   unveraendert; die Textausrichtung links wird nicht angefasst.

   Bewusst nur #view-planner: die Bibliothek hat denselben Versatz, ist aber
   nicht Teil dieser Aufgabe. */
html body #view-planner .ar-select-arrow {
  justify-self: end !important;
}

/* 7.4 Das Aktionsmenue der Anime-Zeilen war kaum zu sehen.

   Zwei Ursachen, beide gemessen:

   a) Breite. .planner-row-menu ist mit width: 184px angelegt, war im Browser
      aber 28 px breit - die globale Regel "*, *::before, *::after
      { max-inline-size: 100% }" aus styles-v2-4-141.css klemmt das absolut
      positionierte Menue auf die Breite seines <details>, und das ist der
      28 px breite Summary-Knopf. Die Beschriftungen liefen ungerahmt nach
      rechts heraus (scrollWidth 117 bei 28 px Kastenbreite). Mit
      max-inline-size: none stellt sich die vorgesehene Breite wieder her.

   b) Flaechenkontrast. #14191e gegen das Panel #0d1317 ergibt 1.058:1, gegen
      den Seitenhintergrund #070506 1.149:1 - als Flaeche praktisch nicht
      wahrnehmbar. Rand mit Alpha .18 und Schatten #0009 auf fast schwarzem
      Grund tragen kaum.

   Die neuen Werte bleiben in der Formensprache des benachbarten
   .ar-select-menu derselben Ansicht (Innenabstand 6, Radius 10, Rand aus
   --collection-border): etwas hellere Flaeche, doppelte Randdeckkraft und ein
   tragender Schatten mit dunklem Ring. Position, z-index, die
   opens-up-Logik, Eintragshoehen und alle Handler bleiben unveraendert. */
html body #view-planner .planner-row-menu {
  max-inline-size: none !important;
  width: 184px !important;
  padding: 6px !important;
  border: 1px solid rgba(167, 187, 195, .34) !important;
  border-radius: 10px !important;
  background: #1b2026 !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .72), 0 0 0 1px rgba(0, 0, 0, .6) !important;
}

/* -------------------------------------------------------------------------- */
/* 8. Social Media                                                            */
/* -------------------------------------------------------------------------- */

/* 8.1 Der Partnerbereich inkedweeb (Banner, Artwork, Text, Knopf
   "Profil ansehen") ist aus index.html entfernt, samt allen
   .socialhub-partner*-Regeln und dem nur dort benutzten Token --sh-banner
   in material-social-media-v2-4-223.css.

   Hier steht bewusst keine Regel: das Panel .socialhub-channels-panel
   schliesst von selbst 12 px unter den Kanalkarten (eigener
   padding-bottom), es bleibt keine reservierte Hoehe zurueck. Gemessen
   1440: Panel 434,2 -> 277,2 und Ansicht 624,2 -> 467,2; 390: Panel
   445,5 -> 211 und Ansicht 654,5 -> 420.

   8.2 Der Hero-Text ist ausgetauscht. Ohne Wirkung auf das Layout: der
   Absatz bleibt bei 1440 zweizeilig und bei 390 dreizeilig, der Hero
   behaelt 174 bzw. 197.

   8.3 Die vier Beschreibungszeilen unter den Kanalnamen sind entfernt,
   auch bei Discord. Grund fuer Discord: die Karten sind Grid-Geschwister
   und strecken sich auf die Zeilenhoehe. Bliebe eine Beschreibung stehen,
   haetten die anderen drei einen Leerraum von 41 px zwischen Name und
   Aktion statt der bisherigen 14. Die Kartenhoehe faellt deshalb in
   material-social-media-v2-4-223.css von 228 auf 187 und der Abstand Name
   zu Aktion liegt wieder bei 14. Mobil aendert sich nichts, dort war die
   Beschreibung schon vorher ausgeblendet. Auch dafuer braucht es hier
   keine Regel. */

/* -------------------------------------------------------------------------- */
/* 9. Anime-News Detailansicht                                                */
/* -------------------------------------------------------------------------- */

/* 9.1 Teilen und Speichern sind aus der Detailansicht entfernt: die beiden
   Knoepfe und ihr Trenner in index.html, die Handler shareAnimeNewsDetail,
   toggleAnimeNewsDetailSave, syncNewsDetailSaveState, savedNewsIds,
   toggleSavedNewsItem und isNewsItemSaved samt der Konstante
   NEWS_SAVED_STORAGE_KEY in app-v2-4-153.js sowie die nur dafuer gebauten
   Regeln .nd-actions-group, .nd-act, .nd-act-sep und .nd-act-save in
   material-news-detail-v2-4-229.css. Bereits vorhandene Eintraege unter
   animeradar:news-saved:v1 im Browser der Nutzer bleiben unberuehrt, sie
   werden nur nicht mehr gelesen oder geschrieben. Die Teilen-Wege anderer
   Seiten (shareAppPage, data-share-list, copyProfileLinkBtn) sind nicht
   betroffen.

   Auf dem Desktop braucht es dafuer keine Regel: in .nd-actions bleibt nur
   noch "Zurueck zu den News", und justify-content: space-between haelt den
   Knopf an der linken Kante. Gemessen bei 1097 vorher wie nachher: Zeile
   54 hoch, Knopf bei x 230, Panelhoehe unveraendert. */

@media (max-width: 760px) {
  /* 9.2 Mobil blieb nach dem Entfernen eine leere Aktionszeile stehen: der
     Zurueck-Knopf ist dort ausgeblendet, weil er waehrend der Ansicht in
     der Kopfzeile sitzt, und Teilen und Speichern gibt es nicht mehr.
     Uebrig waeren nur 12 px Innenabstand oben und 84 px unten gewesen,
     also eine sinnlose Flaeche. Die Zeile wird deshalb mobil entfernt. */
  html body dialog#animeNewsDetailDialog.nd-2026 .nd-actions {
    display: none;
  }

  /* 9.3 Die 84 px unten waren die Freihaltung ueber der mobilen
     Navigationsleiste. Sie wandert an die scrollende Vollflaeche, sonst
     endet der Quellenblock hinter der Leiste. Gemessen bei 390: die Leiste
     beginnt bei y 778; vorher endete der Speichern-Knopf am Scrollende
     18 px darueber. Mit diesem Wert endet der Quellenblock an genau
     derselben Stelle. */
  html body dialog#animeNewsDetailDialog.nd-2026.is-sheet .nd-panel {
    padding-bottom: 84px;
  }
}

/* -------------------------------------------------------------------------- */
/* 10. Anime-News                                                             */
/* -------------------------------------------------------------------------- */

/* 10.1 Die Anime-News-Seite selbst braucht in dieser Version keine eigene
   Regel. Die Filterpills, die Listenkarten und die Geometrie der Seite
   bleiben unveraendert; den Aktivzustand der Pills liefert weiterhin
   material-selected-state-v2-4-232.css. */

/* -------------------------------------------------------------------------- */
/* 11. AnimeRadar App                                                         */
/* -------------------------------------------------------------------------- */

/* 11.1 Die vier Feature-Punkte unter den Store-Badges sind aus index.html
   und aus material-app-v2-4-227.css entfernt. Die Store-Badges bleiben.

   Hier steht bewusst keine Regel, und die Hero-Hoehe bleibt bei
   min-height: 691px. Die Hoehe kommt nicht vom Text, sondern von der
   Geraetedarstellung: .ap-stage ist absolut positioniert, das vordere
   Smartphone reicht um 11 Grad gedreht bis 675,4 px unter die
   Hero-Oberkante. Unter 676 wuerde es angeschnitten. Gemessen bleibt auf
   dem Desktop deshalb alles stehen (Hero 691, Banner y 772, Ansicht 907);
   unter den Badges bleibt Freiflaeche, die Geraete fuellen die rechte
   Seite. Mobil ist .ap-hero display: contents, dort rueckt der Banner
   ueber seinen eigenen margin-top von 17 px um 319 px nach oben
   (y 745,9 -> 426,9), ebenfalls ohne zusaetzliche Regel.

   .ap-app-tab im Telefon-Mockup bleibt wie in V2.4.232 festgelegt
   unveraendert. */