/*
 * AnimeRadar V2.4.217 - Kalender nach Referenzbild
 *
 * Vorlage: Referenzbilder/Kalender.png. Wie bei Entdecken ist das
 * Desktop-Mockup ein rund 1083px breites Fenster (Sidebar 188, Shell 12..1071).
 *
 * Gemessene Referenzwerte:
 *   Hero            y  89 .. 266
 *   Monatsraster    x 216 .. 660   also 444 breit
 *   Tagesliste      ab x rund 672
 *   ausgewaehlter Tag als roter Kreis, Release-Tage mit rotem Punkt
 *
 * Die alte Wochen-Zeitleiste, die Wochentagsleiste, der Seitenstreifen
 * "Naechste Veroeffentlichungen" und die Umschaltung Woche/Liste gehoeren
 * nicht zur Referenz und werden ausgeblendet. Ihre Logik bleibt im Code -
 * #calendarGrid und #calendarCount werden weiter beschrieben, nur nicht
 * mehr angezeigt.
 *
 * Flaechen, Rahmen und Radien kommen aus denselben Token wie Startseite und
 * Entdecken. Kein backdrop-filter, kein opacity auf Containern.
 */

@media (min-width: 960px) {
  /* Inhaltsspalte wie auf Startseite und Entdecken. Der Kalender lag vorher
     als Bildschirm-hohe Flaeche mit eigenen Innenabstaenden vor. */
  html:not(.native-app) body[data-active-view="calendar"] .shell {
    height: auto !important;
    min-height: 100vh !important;
    padding: 8px 14px 2px !important;
  }

  html:not(.native-app) body[data-active-view="calendar"] .content-topbar {
    display: grid !important;
    margin: 0 0 7px !important;
  }

  /* Nicht zur Referenz gehoerende Teile der alten Ansicht. */
  html body #view-calendar .mobile-calendar-tabs,
  html body #view-calendar .mobile-upcoming-panel,
  html body #view-calendar .calendar-head,
  html body #view-calendar .calendar-mode-toggle,
  html body #view-calendar .weekday-dock,
  html body #view-calendar .calendar-results,
  html body #view-calendar .calendar-upcoming-strip {
    display: none !important;
  }

  html body #view-calendar .ar-page-hero {
    min-height: 177px !important;
  }

  /* -------- Toolbar: Heute, Pfeile, Monat, zwei Auswahllisten -------- */
  html body #view-calendar .calendar-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 13px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }

  html body #view-calendar .calendar-today-button {
    order: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    min-height: 0 !important;
    padding: 0 20px !important;
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 9px !important;
    background: var(--ar-page-field, rgba(20, 18, 23, .72)) !important;
    color: var(--md-on-surface) !important;
    font-size: 13.5px !important;
    font-weight: 550 !important;
  }

  html body #view-calendar .calendar-week-nav {
    order: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }

  html body #view-calendar .calendar-week-step {
    display: inline-grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 9px !important;
    background: var(--ar-page-field, rgba(20, 18, 23, .72)) !important;
    color: var(--md-on-surface) !important;
  }

  html body #view-calendar .calendar-week-step svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
  }

  html body #view-calendar .calendar-week-step:hover {
    border-color: rgba(216, 52, 58, .6) !important;
  }

  /* Der Monatsname steht in der Referenz zwischen den Pfeilen. */
  html body #view-calendar .calendar-week-label {
    order: 2 !important;
    min-width: 150px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: var(--md-on-surface) !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    text-align: center !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }

  /* Die beiden Auswahllisten stehen rechts. */
  html body #view-calendar .cal-month-select {
    order: 3 !important;
    display: flex !important;
    align-items: center !important;
    height: 38px !important;
  }

  html body #view-calendar .cal-month-select:nth-of-type(1) {
    margin-left: auto !important;
    width: 196px !important;
  }

  html body #view-calendar .cal-month-select:nth-of-type(2) {
    width: 220px !important;
  }

  html body #view-calendar .cal-month-select .ar-select {
    display: block !important;
    width: 100% !important;
  }

  html body #view-calendar .cal-month-select .ar-select-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 0 !important;
    padding: 0 10px 0 14px !important;
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 9px !important;
    background: var(--ar-page-field, rgba(20, 18, 23, .72)) !important;
    box-shadow: none !important;
    color: var(--md-on-surface) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    text-align: left !important;
  }

  html body #view-calendar .cal-month-select .ar-select-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    font-weight: 500 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #view-calendar .cal-month-select .ar-select-arrow {
    flex: 0 0 auto !important;
    display: grid !important;
    place-items: center !important;
    width: 14px !important;
    height: 100% !important;
    border: 0 !important;
    background: none !important;
  }

  html body #view-calendar .cal-month-select .ar-select-arrow::before {
    width: 8px !important;
    height: 8px !important;
    border-right: 1.7px solid currentColor !important;
    border-bottom: 1.7px solid currentColor !important;
    opacity: .8 !important;
  }

  /* Der vorhandene Filterzugang bleibt erreichbar - auf Wunsch des Benutzers,
     damit Format, Herkunft, Studio und Synchro bedienbar bleiben. Er tritt
     dabei zurueck und traegt die Optik der Seite. */
  /* Der Filterzugang traegt auf dem Desktop nur sein Symbol - mit Beschriftung
     waere die Zeile der Referenz zu voll und wuerde umbrechen. */
  html body #view-calendar .calendar-mobile-filter-button > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  html body #view-calendar .calendar-mobile-filter-button {
    order: 4 !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 9px !important;
    background: var(--ar-page-field, rgba(20, 18, 23, .72)) !important;
    color: var(--md-on-surface) !important;
    font-size: 13.5px !important;
    font-weight: 550 !important;
  }

  html body #view-calendar .calendar-mobile-filter-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
  }

  /* -------- Zweispaltiger Hauptbereich -------- */
  html body #view-calendar .cal-month-board {
    display: grid !important;
    grid-template-columns: 444px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  html body #view-calendar .cal-month-panel {
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 12px !important;
    background: var(--ar-page-surface, rgba(30, 28, 34, .62)) !important;
  }

  /* Wochentagszeile */
  html body #view-calendar .cal-month-weekdays {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    border-bottom: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
  }

  html body #view-calendar .cal-month-weekdays span {
    display: grid !important;
    place-items: center !important;
    height: 46px !important;
    color: var(--md-on-surface) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
  }

  html body #view-calendar .cal-month-weekdays span + span {
    border-left: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
  }

  /* Tageszellen: Linienraster wie in der Referenz. */
  html body #view-calendar .cal-month-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  html body #view-calendar .cal-month-cell {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    height: 80px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--md-on-surface) !important;
    font-size: 15px !important;
    font-weight: 550 !important;
  }

  /* Die erste Zeile grenzt schon an die Wochentagszeile. */
  html body #view-calendar .cal-month-cell:nth-child(-n+7) {
    border-top: 0 !important;
  }

  html body #view-calendar .cal-month-cell:not(:nth-child(7n+1)) {
    border-left: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
  }

  html body #view-calendar .cal-month-cell.is-outside {
    color: var(--md-dim) !important;
  }

  html body #view-calendar .cal-month-cell:hover:not(.is-selected) {
    background: rgba(216, 52, 58, .08) !important;
  }

  html body #view-calendar .cal-month-num {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    line-height: 1 !important;
  }

  /* Ausgewaehlter Tag: gefuellter roter Kreis. */
  html body #view-calendar .cal-month-cell.is-selected .cal-month-num {
    background: var(--md-primary) !important;
    color: #fff !important;
    font-weight: 700 !important;
  }

  /* Release-Tage: kleiner roter Punkt unter der Zahl. */
  html body #view-calendar .cal-month-dot {
    position: absolute !important;
    bottom: 17px !important;
    left: 50% !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: transparent !important;
    transform: translateX(-50%) !important;
  }

  html body #view-calendar .cal-month-cell.has-releases .cal-month-dot {
    background: var(--md-primary) !important;
  }

  /* V2.4.218: Der ausgewaehlte Tag faerbte seinen Punkt zuvor weiss. Das war
     doppelt falsch - der Punkt haengt nicht an .has-releases, erschien also
     auch an Tagen ohne Release, und er sitzt mit bottom: 17px unterhalb des
     34px hohen roten Kreises, also auf dunklem Grund statt darin. Die
     Auswahl zeigt jetzt allein der rote Kreis um die Zahl; der rote Punkt
     bleibt ausschliesslich Anzeiger fuer Release-Tage. */

  /* -------- Tagesliste rechts -------- */
  html body #view-calendar .cal-month-day {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 12px !important;
    background: var(--ar-page-surface, rgba(30, 28, 34, .62)) !important;
  }

  html body #view-calendar .cal-month-day-head {
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
    padding: 14px 16px 12px !important;
    border-bottom: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
  }

  html body #view-calendar .cal-month-day-head h3 {
    margin: 0 !important;
    color: var(--md-on-surface) !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
  }

  html body #view-calendar .cal-month-day-count {
    margin-left: auto !important;
    color: var(--md-primary) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }

  html body #view-calendar .cal-month-day-list {
    min-height: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
  }

  html body #view-calendar .cal-day-row {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 11px 16px !important;
  }

  html body #view-calendar .cal-day-row + .cal-day-row {
    border-top: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
  }

  html body #view-calendar .cal-day-cover {
    display: block !important;
    width: 64px !important;
    height: 64px !important;
    overflow: hidden !important;
    border-radius: 9px !important;
  }

  html body #view-calendar .cal-day-cover img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
  }

  html body #view-calendar .cal-day-copy {
    min-width: 0 !important;
  }

  html body #view-calendar .cal-day-top {
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
  }

  html body #view-calendar .cal-day-title {
    min-width: 0 !important;
    overflow: hidden !important;
    color: var(--md-on-surface) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #view-calendar .cal-day-time {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    color: var(--md-on-surface) !important;
    font-size: 12.5px !important;
    font-weight: 650 !important;
  }

  html body #view-calendar .cal-day-episode {
    display: block !important;
    margin: 2px 0 0 !important;
    color: var(--md-muted) !important;
    font-size: 12px !important;
  }

  html body #view-calendar .cal-day-meta {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 7px 0 0 !important;
  }

  html body #view-calendar .cal-day-genres {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html body #view-calendar .cal-day-genres span {
    flex: 0 0 auto !important;
    padding: 3px 8px !important;
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 999px !important;
    background: var(--ar-page-field, rgba(20, 18, 23, .72)) !important;
    color: var(--md-muted) !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  html body #view-calendar .cal-day-providers {
    margin-left: auto !important;
  }

  /* V2.4.301: Der Kalender benutzt dieselbe kompakte Anbieterfassung wie
     Seasons, Bibliothek und Entdecken - nur Symbole, der Name steht im title.
     Masse wie in material-reference-seasons-v2-4-213.css. */
  html body #view-calendar .cal-day-providers .seasons-card-providers {
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #view-calendar .cal-day-providers .seasons-card-providers.is-empty {
    display: none !important;
  }

  html body #view-calendar .cal-day-providers :is(.seasons-provider-logo, .seasons-provider-more) {
    width: 24px !important;
    height: 24px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 6px !important;
    background: #080b0d !important;
    color: #c6cdd1 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
  }

  html body #view-calendar .cal-day-providers .seasons-provider-logo img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
  }

  html body #view-calendar .cal-day-providers .seasons-provider-more {
    background: #151b1f !important;
  }

  /* Die Referenzzeile zeigt kein Merkzeichen - deshalb ausgeblendet.
     Das Element bleibt im Markup, seine Funktion unveraendert. */
  html body #view-calendar .cal-day-save {
    display: none !important;
    place-items: center !important;
    width: 28px !important;
    height: 28px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 8px !important;
    background: var(--ar-page-field, rgba(20, 18, 23, .72)) !important;
    color: var(--md-muted) !important;
  }

  html body #view-calendar .cal-day-save svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
  }

  html body #view-calendar .cal-day-save.is-saved svg {
    fill: var(--md-primary);
    stroke: var(--md-primary);
  }

  html body #view-calendar .cal-month-day-list .ui-state-card {
    margin: 14px 16px !important;
  }
}

/* ========================================================================== */
/* Kalender - Mobil                                                           */
/* Aufbau der Referenz: Kopfzeile, Hero, Monatsnavigation, Monatsraster,       */
/* Release-Liste, untere Leiste. Keine Wochen-Zeitleiste, keine Tabs.          */
/* ========================================================================== */

@media (max-width: 959px) {
  html body #view-calendar .mobile-calendar-tabs,
  html body #view-calendar .mobile-upcoming-panel,
  html body #view-calendar .calendar-head,
  html body #view-calendar .calendar-mode-toggle,
  html body #view-calendar .weekday-dock,
  html body #view-calendar .calendar-results,
  html body #view-calendar .calendar-upcoming-strip {
    display: none !important;
  }

  html body #view-calendar .calendar-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 11px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }

  /* Referenz Mobil: Pfeil, Monatsname, Pfeil, dann "Heute". */
  html body #view-calendar .calendar-week-nav {
    order: 1 !important;
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }

  html body #view-calendar .calendar-week-step {
    display: inline-grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 9px !important;
    background: var(--ar-page-field, rgba(20, 18, 23, .72)) !important;
    color: var(--md-on-surface) !important;
  }

  html body #view-calendar .calendar-week-step svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
  }

  html body #view-calendar .calendar-week-label {
    flex: 1 1 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: var(--md-on-surface) !important;
    font-size: 14.5px !important;
    font-weight: 650 !important;
    text-align: center !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }

  html body #view-calendar .calendar-today-button {
    order: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 36px !important;
    min-height: 0 !important;
    padding: 0 16px !important;
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 9px !important;
    background: var(--ar-page-field, rgba(20, 18, 23, .72)) !important;
    color: var(--md-on-surface) !important;
    font-size: 13px !important;
    font-weight: 550 !important;
  }

  /* Die Mobil-Referenz zeigt unter dem Hero nur die Monatsnavigation. Die
     beiden Auswahllisten treten dort deshalb zurueck; Genre und Anbieter
     bleiben ueber die Filterschublade erreichbar. */
  html body #view-calendar .cal-month-select {
    display: none !important;
  }

  html body #view-calendar .cal-month-select .ar-select {
    display: block !important;
    width: 100% !important;
  }

  html body #view-calendar .cal-month-select .ar-select-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 0 !important;
    padding: 0 10px 0 14px !important;
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 10px !important;
    background: var(--ar-page-field, rgba(20, 18, 23, .72)) !important;
    color: var(--md-on-surface) !important;
    font-size: 13.5px !important;
    text-align: left !important;
  }

  html body #view-calendar .cal-month-select .ar-select-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #view-calendar .cal-month-select .ar-select-arrow {
    flex: 0 0 auto !important;
    display: grid !important;
    place-items: center !important;
    width: 14px !important;
    height: 100% !important;
    border: 0 !important;
    background: none !important;
  }

  html body #view-calendar .cal-month-select .ar-select-arrow::before {
    width: 8px !important;
    height: 8px !important;
    border-right: 1.7px solid currentColor !important;
    border-bottom: 1.7px solid currentColor !important;
  }

  html body #view-calendar .calendar-mobile-filter-button {
    order: 4 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 0 !important;
    padding: 0 16px !important;
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 10px !important;
    background: var(--ar-page-field, rgba(20, 18, 23, .72)) !important;
    color: var(--md-on-surface) !important;
    font-size: 13.5px !important;
    font-weight: 550 !important;
  }

  html body #view-calendar .calendar-mobile-filter-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
  }

  /* Monatsraster und Liste stehen untereinander. */
  html body #view-calendar .cal-month-board {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 11px !important;
  }

  html body #view-calendar .cal-month-panel {
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 10px !important;
    background: var(--ar-page-surface, rgba(30, 28, 34, .62)) !important;
  }

  html body #view-calendar .cal-month-weekdays {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    border-bottom: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
  }

  html body #view-calendar .cal-month-weekdays span {
    display: grid !important;
    place-items: center !important;
    height: 36px !important;
    color: var(--md-on-surface) !important;
    font-size: 11.5px !important;
    font-weight: 650 !important;
  }

  html body #view-calendar .cal-month-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  html body #view-calendar .cal-month-cell {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    height: 44px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--md-on-surface) !important;
    font-size: 13px !important;
    font-weight: 550 !important;
  }

  html body #view-calendar .cal-month-cell.is-outside {
    color: var(--md-dim) !important;
  }

  html body #view-calendar .cal-month-num {
    display: grid !important;
    place-items: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    line-height: 1 !important;
  }

  html body #view-calendar .cal-month-cell.is-selected .cal-month-num {
    background: var(--md-primary) !important;
    color: #fff !important;
    font-weight: 700 !important;
  }

  html body #view-calendar .cal-month-dot {
    position: absolute !important;
    bottom: 6px !important;
    left: 50% !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: transparent !important;
    transform: translateX(-50%) !important;
  }

  html body #view-calendar .cal-month-cell.has-releases .cal-month-dot {
    background: var(--md-primary) !important;
  }

  /* Wie auf dem Desktop: kein weisser Auswahlpunkt mehr, die Auswahl zeigt
     allein der rote Kreis um die Zahl. */

  html body #view-calendar .cal-month-day {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 10px !important;
    background: var(--ar-page-surface, rgba(30, 28, 34, .62)) !important;
  }

  html body #view-calendar .cal-month-day-head {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    padding: 12px 13px 10px !important;
    border-bottom: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
  }

  html body #view-calendar .cal-month-day-head h3 {
    margin: 0 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
  }

  html body #view-calendar .cal-month-day-count {
    margin-left: auto !important;
    color: var(--md-primary) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
  }

  html body #view-calendar .cal-day-row {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 9px 13px !important;
  }

  html body #view-calendar .cal-day-row + .cal-day-row {
    border-top: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
  }

  html body #view-calendar .cal-day-cover {
    display: block !important;
    width: 46px !important;
    height: 46px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }

  html body #view-calendar .cal-day-cover img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
  }

  html body #view-calendar .cal-day-title {
    display: block !important;
    overflow: hidden !important;
    color: var(--md-on-surface) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Referenz Mobil: Titel mit Uhrzeit rechts, darunter die Folge und die
     Anbietersymbole. Genre-Chips zeigt die Referenz dort nicht.

     V2.4.300: Folge und Anbieter standen in einer Zeile (Raster
     "1fr auto"). Mit mehreren Anbietern wuchs die auto-Spalte und drueckte
     "Folge X . Bewertung" zusammen, bis Text und Symbole kollidierten. Jetzt
     eine Spalte: Folgenzeile, darunter die Anbieter mit Umbruch. Die Karte
     wird bei Bedarf hoeher - lieber das als ueberlappende Elemente. */
  html body #view-calendar .cal-day-copy {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 0 !important;
    min-width: 0 !important;
  }

  html body #view-calendar .cal-day-top {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
  }

  html body #view-calendar .cal-day-time {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    color: var(--md-on-surface) !important;
    font-size: 11.5px !important;
    font-weight: 650 !important;
  }

  html body #view-calendar .cal-day-episode {
    grid-column: 1 !important;
    display: block !important;
    min-width: 0 !important;
    margin: 1px 0 0 !important;
    color: var(--md-muted) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
  }

  html body #view-calendar .cal-day-meta {
    grid-column: 1 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    margin: 4px 0 0 !important;
  }

  html body #view-calendar .cal-day-providers {
    margin-left: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* V2.4.301: dieselbe kompakte Anbieterfassung wie im uebrigen Programm -
     nur Symbole, der Name steht im title. Auf der schmalen Zeile etwas
     kleiner als auf dem Desktop und mit Umbruch. */
  html body #view-calendar .cal-day-providers .seasons-card-providers {
    min-height: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  html body #view-calendar .cal-day-providers .seasons-card-providers.is-empty {
    display: none !important;
  }

  html body #view-calendar .cal-day-providers :is(.seasons-provider-logo, .seasons-provider-more) {
    width: 22px !important;
    height: 22px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 6px !important;
    background: #080b0d !important;
    color: #c6cdd1 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
  }

  html body #view-calendar .cal-day-providers .seasons-provider-logo img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
  }

  html body #view-calendar .cal-day-providers .seasons-provider-more {
    background: #151b1f !important;
  }

  html body #view-calendar .cal-day-genres {
    display: none !important;
  }

  html body #view-calendar .cal-day-save {
    display: none !important;
  }

  html body #view-calendar .cal-month-day-list .ui-state-card {
    margin: 12px 13px !important;
  }
}

/* ========================================================================== */
/* Filterschublade des Kalenders (V2.4.217)                                   */
/*                                                                            */
/* Dieselbe Designfamilie wie die Schublade von Entdecken. Struktur,           */
/* Reihenfolge, Beschriftungen und Funktion bleiben unveraendert - nur die     */
/* Darstellung wechselt. Vorher: deckende Flaeche rgb(24,20,21) mit Rand       */
/* rgb(34,28,30), absolut im alten Buehnenbereich positioniert.                */
/* ========================================================================== */

@media (min-width: 960px) {
  html body #calendarFilters[id].calendar-filters {
    position: fixed !important;
    z-index: 82 !important;
    top: 22px !important;
    right: 22px !important;
    bottom: 22px !important;
    left: auto !important;
    width: min(348px, calc(100vw - 44px)) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 16px !important;
    /* V2.4.218: Die Schublade selbst scrollt nicht mehr. Zuvor trug sie
       overflow-y: auto, waehrend .filter-body dasselbe tat - zwei
       verschachtelte Scrollbereiche. Beim Ansteuern einer unteren
       Filtergruppe scrollten beide, und die klebende Kopfzeile mit der
       Schliessen-Schaltflaeche wurde dabei aus dem Sichtfeld geschoben.
       Der Aufbau ist eine Flexspalte: Kopfzeile fest, Mitte scrollt,
       Ruecksetzen-Schaltflaeche fest - dafuer darf nur die Mitte scrollen. */
    overflow: hidden !important;
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 12px !important;
    background: rgba(24, 22, 28, .94) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .42) !important;
    scrollbar-width: thin !important;
  }

  html body #calendarFilters[id].calendar-filters[aria-hidden="true"] {
    display: none !important;
  }

  html body #calendarFilters[id].calendar-filters .calendar-drawer-head {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 14px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
  }

  html body #calendarFilters[id].calendar-filters .calendar-drawer-head h3 {
    margin: 0 !important;
    color: var(--md-on-surface) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  /* place-content ist hier tragend, nicht place-items: die Grundregel fuer
     .filter-toggle in styles-v2-4-141.css setzt justify-content:
     space-between. Das blieb auch nach dem Wechsel auf display: grid aktiv
     und schob die einzige Spalte an den linken Rand - place-items richtet nur
     innerhalb der Spalte aus und konnte das nicht aufheben. Das X sass
     dadurch 7px links der Mitte. place-content zentriert die Spalte selbst.
     cursor: pointer holt nach, was dieselbe Grundregel mit cursor: default
     ueberschrieben hatte. */
  html body #calendarFilters[id].calendar-filters .filter-toggle {
    display: grid !important;
    place-items: center !important;
    place-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-height: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 9px !important;
    background: var(--ar-page-field, rgba(20, 18, 23, .72)) !important;
    color: var(--md-muted) !important;
    cursor: pointer !important;
  }

  html body #calendarFilters[id].calendar-filters .filter-toggle svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
  }

  html body #calendarFilters[id].calendar-filters .filter-toggle:hover {
    border-color: rgba(216, 52, 58, .6) !important;
    color: var(--md-on-surface) !important;
  }

  html body #calendarFilters[id].calendar-filters .filter-toggle-state {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  html body #calendarFilters[id].calendar-filters .calendar-filter-section {
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }

  html body #calendarFilters[id].calendar-filters .calendar-filter-label {
    display: block !important;
    margin: 0 0 7px !important;
    color: var(--md-on-surface) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  html body #calendarFilters[id].calendar-filters .calendar-chip-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
  }

  html body #calendarFilters[id].calendar-filters .calendar-chip-row button {
    height: 24px !important;
    min-height: 0 !important;
    padding: 0 12px !important;
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 999px !important;
    background: var(--ar-page-field, rgba(20, 18, 23, .72)) !important;
    color: var(--md-on-surface) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }

  html body #calendarFilters[id].calendar-filters .calendar-chip-row button.is-active {
    border-color: transparent !important;
    background: #ee2b34 !important;
    color: #fff !important;
    font-weight: 650 !important;
    box-shadow: 0 0 10px rgba(238, 43, 52, .45) !important;
  }

  html body #calendarFilters[id].calendar-filters .calendar-chip-row button:hover:not(.is-active) {
    border-color: rgba(216, 52, 58, .6) !important;
  }

  html body #calendarFilters[id].calendar-filters input,
  html body #calendarFilters[id].calendar-filters .ar-select-btn {
    width: 100% !important;
    height: 35px !important;
    min-height: 0 !important;
    padding: 0 12px !important;
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 9px !important;
    background: var(--ar-page-field, rgba(20, 18, 23, .72)) !important;
    box-shadow: none !important;
    color: var(--md-on-surface) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
  }

  html body #calendarFilters[id].calendar-filters .ar-select-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 0 8px 0 12px !important;
    text-align: left !important;
  }

  html body #calendarFilters[id].calendar-filters .ar-select-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    font-weight: 500 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #calendarFilters[id].calendar-filters .ar-select-arrow {
    flex: 0 0 auto !important;
    display: grid !important;
    place-items: center !important;
    width: 14px !important;
    height: 100% !important;
    border: 0 !important;
    background: none !important;
  }

  html body #calendarFilters[id].calendar-filters .ar-select-arrow::before {
    width: 8px !important;
    height: 8px !important;
    border-right: 1.7px solid currentColor !important;
    border-bottom: 1.7px solid currentColor !important;
    opacity: .8 !important;
  }

  html body #calendarFilters[id].calendar-filters .ar-select-menu {
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 10px !important;
    background: rgba(22, 20, 26, .98) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .46) !important;
  }

  html body #calendarFilters[id].calendar-filters .ar-select-option {
    color: var(--md-on-surface) !important;
    font-size: 13px !important;
  }

  html body #calendarFilters[id].calendar-filters .ar-select-option.is-selected,
  html body #calendarFilters[id].calendar-filters .ar-select-option:hover {
    background: rgba(216, 52, 58, .16) !important;
    color: #fff !important;
  }

  html body #calendarFilters[id].calendar-filters small {
    display: block !important;
    margin: 5px 0 0 !important;
    color: var(--md-dim) !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  html body #calendarFilters[id].calendar-filters .calendar-apply-filters {
    width: 100% !important;
    height: 38px !important;
    min-height: 0 !important;
    margin: 4px 0 0 !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: 650 !important;
  }

  html body #calendarFilters[id].calendar-filters .calendar-apply-filters:hover {
    border-color: rgba(216, 52, 58, .9) !important;
  }
}

@media (max-width: 959px) {
  html body #calendarFilters[id].calendar-filters {
    position: fixed !important;
    z-index: 82 !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    max-width: none !important;
    max-height: 84dvh !important;
    margin: 0 !important;
    padding: 14px 14px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    /* Platz fuer die klebende Schaltflaeche am unteren Rand. */
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-bottom: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    background: rgba(22, 20, 26, .97) !important;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, .5) !important;
  }

  html body #calendarFilters[id].calendar-filters[aria-hidden="true"] {
    display: none !important;
  }

  html body #calendarFilters[id].calendar-filters .calendar-drawer-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 12px !important;
    padding: 0 0 11px !important;
    border-bottom: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    background: rgba(22, 20, 26, .97) !important;
  }

  html body #calendarFilters[id].calendar-filters .calendar-drawer-head h3 {
    margin: 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
  }

  /* place-content wie auf dem Desktop - siehe die Begruendung dort: die
     Grundregel setzt justify-content: space-between, das place-items allein
     nicht aufheben kann. */
  html body #calendarFilters[id].calendar-filters .filter-toggle {
    display: grid !important;
    place-items: center !important;
    place-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-height: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 10px !important;
    background: var(--ar-page-field, rgba(20, 18, 23, .72)) !important;
    color: var(--md-muted) !important;
    cursor: pointer !important;
  }

  html body #calendarFilters[id].calendar-filters .filter-toggle svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
  }

  html body #calendarFilters[id].calendar-filters .filter-toggle-state {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
  }

  html body #calendarFilters[id].calendar-filters .calendar-filter-label {
    display: block !important;
    margin: 0 0 8px !important;
    color: var(--md-on-surface) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-transform: none !important;
  }

  html body #calendarFilters[id].calendar-filters .calendar-filter-section {
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }

  html body #calendarFilters[id].calendar-filters .calendar-chip-row button {
    height: 30px !important;
    min-height: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 8px !important;
    background: var(--ar-page-field, rgba(20, 18, 23, .72)) !important;
    color: var(--md-on-surface) !important;
    font-size: 12.5px !important;
    line-height: 1 !important;
  }

  html body #calendarFilters[id].calendar-filters .calendar-chip-row button.is-active {
    border-color: transparent !important;
    background: #ee2b34 !important;
    color: #fff !important;
    font-weight: 650 !important;
  }

  html body #calendarFilters[id].calendar-filters input,
  html body #calendarFilters[id].calendar-filters .ar-select-btn {
    width: 100% !important;
    height: 40px !important;
    min-height: 0 !important;
    padding: 0 12px !important;
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 10px !important;
    background: var(--ar-page-field, rgba(20, 18, 23, .72)) !important;
    box-shadow: none !important;
    color: var(--md-on-surface) !important;
    font-size: 13.5px !important;
  }

  html body #calendarFilters[id].calendar-filters .ar-select-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 0 10px 0 12px !important;
    text-align: left !important;
  }

  html body #calendarFilters[id].calendar-filters .ar-select-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #calendarFilters[id].calendar-filters .ar-select-arrow {
    flex: 0 0 auto !important;
    display: grid !important;
    place-items: center !important;
    width: 14px !important;
    height: 100% !important;
    border: 0 !important;
    background: none !important;
  }

  html body #calendarFilters[id].calendar-filters .ar-select-arrow::before {
    width: 8px !important;
    height: 8px !important;
    border-right: 1.7px solid currentColor !important;
    border-bottom: 1.7px solid currentColor !important;
  }

  html body #calendarFilters[id].calendar-filters .calendar-apply-filters {
    position: sticky !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 0 !important;
    margin: 6px 0 0 !important;
    border: 1px solid rgba(216, 52, 58, .62) !important;
    border-radius: 10px !important;
    background: rgba(30, 16, 19, .96) !important;
    color: var(--md-primary) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
  }
}

/* Der alte Entwurf stellte die Schublade neben den Inhalt und reservierte
   dafuer Platz. Sie liegt jetzt als Ebene darueber, deshalb entfaellt die
   Reservierung - sonst schrumpfte die Inhaltsspalte beim Oeffnen. */
html body #view-calendar:has(#calendarFilters[id].is-open) {
  padding-right: 0 !important;
}

/* V2.4.218: Aufwaertsoeffnen in der Filterschublade zulassen.
   styles-v2-4-141.css bindet .ar-select-filter fuer Entdecken und Kalender
   gemeinsam auf eine Abwaertsoeffnung fest - auch im Zustand .opens-up. Fuer
   die Kalenderschublade ist das falsch, weil die unteren Filtergruppen dann
   in den abgeschnittenen Bereich unterhalb des Scrollbereichs oeffnen.
   Die Regel haengt bewusst an der Kennung der Schublade statt an
   #view-calendar: unterhalb von 760px verschiebt die Anwendung die Schublade
   an den Seitenkoerper, wo ein Selektor mit #view-calendar nicht mehr greift.
   Sie steht ausserhalb der Breakpoint-Bloecke, weil sie fuer jede Breite
   gilt. Entdecken bleibt unberuehrt. */
html body #calendarFilters[id].calendar-filters .ar-select-filter.opens-up .ar-select-menu {
  top: auto !important;
  bottom: calc(100% + 8px) !important;
}