/* ==========================================================================
   AnimeRadar V2.4.273 - Bedienelemente einer Release-Erinnerung
   ==========================================================================

   Zwei Befunde aus Profil > Erinnerungen, gemessen bei 390 und 1440:

   1. Der Loeschknopf traegt aus material-reference-pages-v2-4-194.css
      "opacity: 0" und wird nur bei :hover oder :focus-visible sichtbar.
      Auf einem Touchgeraet gibt es kein Hover - dort ist das X dauerhaft
      unsichtbar, obwohl es anklickbar bleibt. Gemessen: opacity 0 bei
      (hover: none).

   2. Die Beruehrflaechen sind klein: der Schalter misst 35x20, das X 28x28.
      Zwischen beiden liegen 10 px.

   Geaendert wird nur die Bedienbarkeit, nicht das Aussehen: die sichtbaren
   Masse von Schalter und X bleiben exakt gleich. Die Flaeche waechst ueber
   ein unsichtbares Pseudo-Element, und zwar hoechstens um die halbe Luecke
   zwischen beiden - so kann ein Tippen nie das jeweils andere Element
   treffen.
   ========================================================================== */

/* Auf Geraeten ohne Hover muss das X von sich aus sichtbar sein. Am Desktop
   bleibt es beim bisherigen Verhalten: es erscheint beim Zeigen auf die
   Karte. */
@media (hover: none) {
  html body #view-profile .profile-gm-delete {
    opacity: 1;
  }
}

/* Vergroesserte Beruehrflaeche ohne sichtbare Veraenderung.

   Die Regel "*, *::before, *::after { max-inline-size: 100% }" aus
   styles-v2-4-141.css klemmt ein absolut gesetztes Pseudo-Element auf die
   Breite seines Bezugselements. Ohne max-inline-size: none bliebe die
   seitliche Vergroesserung wirkungslos. */
html body #view-profile .release-reminder-card .profile-gm-switch,
html body #view-profile .release-reminder-card .profile-gm-delete {
  position: relative;
}

html body #view-profile .release-reminder-card .profile-gm-switch::after,
html body #view-profile .release-reminder-card .profile-gm-delete::after {
  content: "";
  position: absolute;
  inset: -12px -5px;
  max-inline-size: none;
  border-radius: 12px;
  background: transparent;
  pointer-events: auto;
}

/* Der Schalter ist mit 20 px am flachsten und bekommt die groesste
   Erweiterung: 20 + 2 x 13 = 46 px. */
html body #view-profile .release-reminder-card .profile-gm-switch::after {
  inset: -13px -5px;
}

/* Das X ist bereits 28 px hoch: 28 + 2 x 9 = 46 px. */
html body #view-profile .release-reminder-card .profile-gm-delete::after {
  inset: -9px -5px;
}