/*
 * AnimeRadar V2.4.216 - Entdecken nach Referenzbild
 *
 * Vorlage: Referenzbilder/Entdecken.png. Das Desktop-Mockup darin ist ein
 * rund 1083px breites Fenster - die Sidebar steht dort unskaliert mit ihren
 * 188px, die Shell reicht von x 12 bis 1071. Alle Absolutmasse unten sind
 * deshalb 1:1 aus dem Bild entnommen.
 *
 * Gemessene Referenzwerte (Inhaltsspalte 205 .. 1063, also 858 breit):
 *   Hero                y  89 .. 256   Hoehe 167
 *   Suchfeld            y 269 .. 306   Hoehe  37   linke Kante 220
 *   Filterzeile         y 318 .. 353   Hoehe  35   Abstand 12 zum Suchfeld
 *     Auswahlliste 1    x 220 .. 375   Breite 154
 *     Auswahlliste 2    x 390 .. 617   Breite 227   Luecke 15
 *   Chipreihe           y 378 .. 400   Chiphoehe 22
 *   Ergebniszeile       y rund 440
 *   Kartenraster        Karte 198 x 242, Luecke 15 waagerecht und senkrecht
 *     Cover             rund 127 hoch, vollflaechig
 *
 * Die Spaltenzahl folgt daraus der verfuegbaren Breite: bei der Breite des
 * Mockups ergeben 198 + 15 genau vier Spalten (845 / 213 = 3.97). Karten-
 * groesse und Luecke sind die festen Groessen, nicht die Spaltenzahl.
 *
 * Farbwelt, Transparenz und Rahmen kommen aus derselben Stufung wie die
 * Startseite (V2.4.215), damit beide Seiten als eine Oberflaeche gelesen
 * werden. Kein backdrop-filter, kein opacity auf Containern.
 */

/* Flaechentoken der neuen Seiten. Dieselben Werte wie die Startseite in
   V2.4.215, damit Startseite, Entdecken und Kalender eine Oberflaeche sind. */
:root {
  --ar-page-surface: rgba(30, 28, 34, .62);
  --ar-page-line: rgba(64, 58, 66, .74);
  --ar-page-field: rgba(20, 18, 23, .72);
}

/* ========================================================================== */
/* Gemeinsamer Seiten-Hero (Entdecken und Kalender)                           */
/* ========================================================================== */

html body .ar-page-hero {
  --ar-hero-art: none;
  position: relative;
  display: grid;
  /* Die Motivspalte braucht eine eigene Spurbreite. Mit "auto" richtete sich
     die Spur nach ihrem Kind, das Kind aber ueber clamp(0px, 38%, 420px)
     nach der Spur - ein zirkulaerer Bezug, der sich in beiden Richtungen auf
     0 px aufloeste. Gemessen betrug die zweite Spur bei 960, 1024, 1280,
     1366, 1440, 1600, 1920 und 2560 jeweils 0 px, ein hinterlegtes Artwork
     war auf Desktop damit unsichtbar. In grid-template-columns bezieht sich
     der Prozentwert dagegen auf die Inhaltsbreite des Heros und ist
     eindeutig. Die Absicht bleibt unveraendert: 38 Prozent der Herobreite,
     hoechstens 420 px, mindestens 0. */
  grid-template-columns: minmax(0, 1fr) clamp(0px, 38%, 420px);
  align-items: center;
  overflow: hidden;
  margin: 0 0 13px;
  padding: 0;
  border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74));
  border-radius: 12px;
  background: var(--ar-page-surface, rgba(30, 28, 34, .62));
}

html body .ar-page-hero-copy {
  min-width: 0;
  padding: 18px 20px;
}

/* Der Titel bleibt derselbe wie auf den anderen Seiten - nur die Umgebung
   ist neu. Deshalb keine eigene Schriftgroesse hier, sondern die Groesse
   der Referenz auf dem vorhandenen Element. */
html body .ar-page-hero .page-main-title {
  margin: 0 0 2px !important;
  font-size: 30px !important;
  line-height: 1.12 !important;
  letter-spacing: -.01em !important;
}

html body .ar-page-hero-lead {
  margin: 0 0 8px;
  color: var(--md-on-surface);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.25;
}

html body .ar-page-hero-text {
  max-width: 52ch;
  margin: 0;
  color: var(--md-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Motivflaeche rechts. Sie bleibt leer, solange kein Artwork hinterlegt ist -
   ein fehlendes Bild wuerde sonst als Fehler im Netzwerkprotokoll auftauchen.
   Sobald die Datei vorliegt, genuegt eine Zeile:
     html body .ar-page-hero-discover { --ar-hero-art: url("assets/banners/discover-hero-2026.webp"); }
   Struktur, Hoehe und Beschnitt bleiben dabei unveraendert. */
html body .ar-page-hero-art {
  align-self: stretch;
  /* Keine eigene Breite mehr: die Flaeche fuellt als Rasterelement ihre
     Spur (siehe grid-template-columns oben) ueber das voreingestellte
     justify-self: stretch. Auf Mobil setzt die Regel weiter unten wieder
     eine eigene Breite, dort liegt die Flaeche absolut im Hero. */
  background-image: var(--ar-hero-art);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  pointer-events: none;
}

html body .ar-page-hero-art[hidden] { display: none; }

@media (min-width: 960px) {
  html body .ar-page-hero {
    min-height: 167px;
  }

  html body .ar-page-hero-copy {
    padding: 20px 22px;
  }
}

/* ========================================================================== */
/* Entdecken - Desktop                                                        */
/* ========================================================================== */

@media (min-width: 960px) {
  /* Die Referenz zeigt auf Entdecken dieselbe Kopfzeile wie die Startseite:
     Suchfeld, Glocke, Avatar. Der frueher Entdecken-eigene Entwurf hatte sie
     ausgeblendet, weil die Seite ihre eigene Suche mitbringt. */
  html:not(.native-app) body[data-active-view="search"] .content-topbar {
    display: grid !important;
  }

  /* Inhaltsspalte auf dieselben Innenabstaende wie die Startseite. Damit
     beginnt die Spalte bei 214 und ist 843 breit - genau die Breite, in der
     die Referenz mit Karte 198 und Luecke 15 auf vier Spalten kommt. */
  html:not(.native-app) body[data-active-view="search"] .shell {
    padding: 8px 14px 2px !important;
  }

  /* Referenz: Kopfzeile endet bei y 82, der Hero beginnt bei y 89. */
  html:not(.native-app) body[data-active-view="search"] .content-topbar {
    margin: 0 0 7px !important;
  }

  /* Die alte Titelzeile ist dem Hero gewichen; das Brett darunter traegt
     keine eigene Flaeche mehr, die Bedienelemente stehen direkt darauf. */
  html body #view-search .search-board {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }

  html body #view-search .search-main {
    display: block !important;
    padding: 0 !important;
  }

  /* -------- Suchfeld: Referenz y 269..306, Hoehe 37 -------- */
  html body #view-search .search-input-label {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    height: 37px !important;
    margin: 0 7px 12px !important;
    padding: 0 12px 0 40px !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;
  }

  html body #view-search .discover-search-icon {
    position: absolute !important;
    left: 13px !important;
    width: 17px !important;
    height: 17px !important;
    color: var(--md-muted) !important;
  }

  html body #view-search .discover-search-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
  }

  html body #view-search .search-input-label #searchInput {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--md-on-surface) !important;
    font-size: 14px !important;
  }

  html body #view-search .search-input-label #searchInput::placeholder {
    color: var(--md-dim) !important;
  }

  html body #view-search .search-input-label #searchInput:focus {
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }

  /* Das Lupensymbol im Feld genuegt auf dem Desktop - die Filterschublade
     wird ueber "Mehr Filter" geoeffnet. */
  html body #view-search .discover-inline-filter {
    display: none !important;
  }

  /* -------- Filterzeile: Referenz y 318..353, Hoehe 35, Luecke 15 -------- */
  html body #view-search .discover-filter-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 15px !important;
    margin: 0 7px 11px !important;
  }

  /* margin: 0 ist tragend: die Grundregel fuer label in styles-v2-4-141.css
     gibt jedem label margin-bottom: 14px. Damit war die Aussenbox der
     Auswahlfelder 49 statt 35 hoch, die Flexzeile richtete sich nach diesen
     49 - und align-items: center setzte die randlosen Schaltflaechen 7px
     tiefer als die Felder. Genau das war der sichtbare Versatz. */
  html body #view-search .discover-select-field {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    height: 35px !important;
    margin: 0 !important;
  }

  html body #view-search .discover-select-field:nth-of-type(1) { width: 154px !important; }
  html body #view-search .discover-select-field:nth-of-type(2) { width: 227px !important; }

  /* Die Anwendung ersetzt jedes select durch ein eigenes Bedienelement
     (.ar-select mit .ar-select-btn); das native select bleibt verborgen.
     Deshalb tragen die Masse der Referenz hier die Schaltflaeche. */
  html body #view-search .discover-select-field .ar-select,
  html body #view-search .discover-result-row .ar-select {
    display: block !important;
    width: 100% !important;
  }

  html body #view-search .discover-select-field .ar-select-btn,
  html body #view-search .discover-result-row .ar-select-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    text-align: left !important;
    width: 100% !important;
    height: 35px !important;
    /* Ohne dieses Zuruecksetzen gewinnt die Grundregel .ar-select-btn mit
       min-height 46px gegen die Hoehe der Referenz. */
    min-height: 0 !important;
    padding: 0 8px 0 14px !important;
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 9px !important;
    background-color: 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 #view-search .discover-select-field .ar-select-text,
  html body #view-search .discover-result-row .ar-select-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    /* Die Grundregel gibt dem Text 12px Innenabstand; der Abstand kommt hier
       von der Schaltflaeche selbst. */
    padding: 0 !important;
    overflow: hidden !important;
    font-weight: 500 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Der Pfeil ist im Basis-CSS ein ::before-Winkel in Gold, dazu eine
     eigene Trennlinie und Flaeche. Beides wird hier zurueckgenommen; der
     Winkel selbst uebernimmt die Textfarbe der Schaltflaeche. */
  html body #view-search .discover-select-field .ar-select-arrow,
  html body #view-search .discover-result-row .ar-select-arrow {
    flex: 0 0 auto !important;
    display: grid !important;
    place-items: center !important;
    width: 14px !important;
    height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
    transform: none !important;
  }

  html body #view-search .discover-select-field .ar-select-arrow::before,
  html body #view-search .discover-result-row .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 #view-search .discover-select-field .ar-select-btn:disabled {
    color: var(--md-dim) !important;
  }

  html body #view-search .discover-select-field .ar-select-btn:hover:not(:disabled),
  html body #view-search .discover-result-row .ar-select-btn:hover {
    border-color: rgba(216, 52, 58, .6) !important;
  }

  /* "Mehr Filter" und "Filter zuruecksetzen" stehen auf derselben Hoehe wie
     die Auswahllisten. Die Ruecksetzen-Schaltflaeche traegt die rote Kontur
     der Referenz.
     V2.4.218: Beide Schaltflaechen sind exakt gleich breit und stehen
     unmittelbar nebeneinander. Die Breite richtet sich nach der laengeren
     Beschriftung; der Innenabstand ist dafuer von 22 auf 14 zurueckgenommen,
     damit "Filter zuruecksetzen" vollstaendig hineinpasst und die Zeile bei
     keiner Desktopbreite umbricht. line-height: 1 haelt die Grundlinie
     unabhaengig von der geerbten Zeilenhoehe deckungsgleich mit den Feldern. */
  html body #view-search .discover-filter-row .discover-filter-button,
  html body #view-search .discover-filter-row .discover-filter-reset {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    width: 186px !important;
    flex: 0 0 186px !important;
    height: 35px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 9px !important;
    font-size: 13.5px !important;
    font-weight: 550 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body #view-search .discover-filter-row .discover-filter-button {
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    background: var(--ar-page-field, rgba(20, 18, 23, .72)) !important;
    color: var(--md-on-surface) !important;
  }

  html body #view-search .discover-filter-row .discover-filter-reset {
    border: 1px solid rgba(216, 52, 58, .62) !important;
    background: rgba(216, 52, 58, .10) !important;
    color: var(--md-primary) !important;
  }

  html body #view-search .discover-filter-row .discover-filter-reset.is-idle {
    border-color: rgba(216, 52, 58, .34) !important;
    color: rgba(216, 52, 58, .74) !important;
  }

  /* flex-basis mitgeben: material-reference-pages setzt fuer dasselbe Symbol
     flex: 0 0 17px. Ohne diese Zeile bleibt die Symbolspalte 17 breit,
     waehrend das Symbol 16 zeichnet - die Innenmasse beider Schaltflaechen
     laufen dann um einen Punkt auseinander. */
  html body #view-search .discover-filter-row .discover-filter-button svg,
  html body #view-search .discover-filter-row .discover-filter-reset svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
  }

  html body #view-search .discover-filter-row .discover-filter-button:hover,
  html body #view-search .discover-filter-row .discover-filter-reset:hover {
    border-color: rgba(216, 52, 58, .8) !important;
  }

  /* -------- Chipreihe: Beschriftung in der Zeile, Chips 22 hoch -------- */
  html body #view-search .discover-genre-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 7px 37px !important;
  }

  html body #view-search .discover-genre-row-label {
    flex: 0 0 auto !important;
    color: var(--md-on-surface) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }

  html body #view-search .discover-chip-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    min-width: 0 !important;
  }

  html body #view-search .discover-chip-row button {
    height: 22px !important;
    min-height: 0 !important;
    padding: 0 13px !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;
  }

  /* Der aktive Chip der Referenz ist deckend rot mit weichem Schein. */
  html body #view-search .discover-chip-row button.is-active {
    border-color: transparent !important;
    background: #ee2b34 !important;
    color: #fff !important;
    font-weight: 650 !important;
    box-shadow: 0 0 12px rgba(238, 43, 52, .55) !important;
  }

  html body #view-search .discover-chip-row button:hover:not(.is-active) {
    border-color: rgba(216, 52, 58, .6) !important;
  }

  html body #view-search .discover-chip-row .discover-chip-more {
    gap: 5px !important;
    color: var(--md-muted) !important;
  }

  html body #view-search .discover-chip-row .discover-chip-more svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
  }

  /* -------- Ergebniszeile: Zahl links, Sortierung und Umschalter rechts -- */
  html body #view-search .discover-result-row {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 0 12px !important;
  }

  html body #view-search .discover-result-count {
    margin: 0 !important;
    color: var(--md-on-surface) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
  }

  html body #view-search .discover-result-row .discover-toolbar-end {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important;
  }

  html body #view-search .discover-sort-label {
    color: var(--md-muted) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
  }

  html body #view-search .discover-result-row .discover-toolbar-end > .ar-select {
    width: 148px !important;
  }

  /* Der Umschalter der Referenz zeigt nur Symbole. Die Beschriftungen
     bleiben fuer Screenreader erhalten. */
  html body #view-search .discover-view-toggle {
    display: inline-flex !important;
    gap: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }

  html body #view-search .discover-view-toggle button {
    display: inline-grid !important;
    place-items: center !important;
    width: 33px !important;
    height: 33px !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-search .discover-view-toggle 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-search .discover-view-toggle button svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
  }

  html body #view-search .discover-view-toggle button.is-active {
    border-color: transparent !important;
    background: var(--md-primary) !important;
    color: #fff !important;
  }

  /* Im Raster sind die Kacheln der Referenz Flaechen, keine Konturen. */
  html body #view-search .discover-view-toggle button.is-active svg {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
  }

  /* -------- Kartenraster: Karte 198 breit, Luecke 15 -------- */
  html body #view-search .search-results {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(198px, 1fr)) !important;
    gap: 15px !important;
    align-content: start !important;
  }

  html body #view-search .search-results .ui-state-card {
    grid-column: 1 / -1 !important;
  }

  /* Der bisherige Kartenentwurf war ein vollflaechiges Cover mit einer
     absolut darueber liegenden Textebene und dem Seitenverhaeltnis 194/191.
     Die Referenz zeigt dagegen das Cover oben und den Text darunter auf der
     Kartenflaeche. Deshalb werden Seitenverhaeltnis, Positionierung und der
     Verlauf ueber dem Cover hier ausdruecklich zurueckgenommen. */
  html body #view-search .search-row {
    position: relative !important;
    display: block !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    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;
    box-shadow: none !important;
  }

  html body #view-search .search-row-image-link {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 198 / 117 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  /* Kein Verlauf mehr ueber dem Cover - der Text steht jetzt darunter. */
  html body #view-search .search-row-image-link::after {
    content: none !important;
    display: none !important;
  }

  /* Referenz: Cover 117 hoch, darunter ein Textblock von rund 118 - zusammen
     die Kartenhoehe 242. Der Selektor mit "> div" ist derselbe wie in
     material-reference-pages, sonst gewinnt dort der alte Innenabstand. */
  html body #view-search .search-row > div.search-card-copy {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: grid !important;
    gap: 1px !important;
    padding: 8px 9px 9px !important;
  }

  html body #view-search .search-row-image-link img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center 22% !important;
  }

  html body #view-search .search-card-copy {
    display: block !important;
    padding: 8px 9px 9px !important;
  }

  html body #view-search .search-row-title-link {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.18 !important;
  }

  html body #view-search .search-card-copy h3 {
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--md-on-surface) !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #view-search .search-card-subtitle {
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--md-muted) !important;
    font-size: 11.5px !important;
    font-weight: 550 !important;
    line-height: 1.18 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #view-search .search-card-meta {
    margin: 0 !important;
    color: var(--md-dim) !important;
    font-size: 11.5px !important;
    line-height: 1.18 !important;
  }

  html body #view-search .search-row .release-meta {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  html body #view-search .search-row .release-meta strong {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: var(--md-on-surface) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  html body #view-search .search-row .release-meta strong b {
    color: var(--md-rating) !important;
    font-size: 13px !important;
  }

  html body #view-search .search-card-genres {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin: 3px 0 0 !important;
    overflow: hidden !important;
  }

  html body #view-search .search-card-genres span {
    flex: 0 0 auto !important;
    padding: 3px 7px !important;
    overflow: hidden !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;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #view-search .search-card-provider-slot {
    margin: 3px 0 0 !important;
  }

  /* Das Merkzeichen der Referenz sitzt oben rechts auf dem Cover. */
  html body #view-search .search-card-bookmark {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    display: grid !important;
    place-items: center !important;
    width: 28px !important;
    height: 28px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: rgba(12, 10, 14, .58) !important;
    color: #fff !important;
  }

  html body #view-search .search-card-bookmark svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
  }

  html body #view-search .search-card-bookmark.is-saved svg {
    fill: var(--md-primary);
    stroke: var(--md-primary);
  }
}

/* ========================================================================== */
/* Entdecken - Mobil                                                          */
/* Die Referenz stapelt Suchfeld, beide Auswahllisten, "Mehr Filter" und      */
/* "Filter zuruecksetzen" jeweils ueber die volle Breite, darunter die        */
/* Chipreihe und ein zweispaltiges Kartenraster.                              */
/* ========================================================================== */

@media (max-width: 959px) {
  html body .ar-page-hero {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 11px;
    border-radius: 10px;
  }

  html body .ar-page-hero-copy {
    padding: 14px 15px;
  }

  html body .ar-page-hero .page-main-title {
    font-size: 23px !important;
  }

  html body .ar-page-hero-lead {
    margin-bottom: 6px;
    font-size: 14px;
  }

  html body .ar-page-hero-text {
    font-size: 12px;
  }

  /* Auf Mobil liegt das Motiv als Hintergrund der ganzen Flaeche rechts,
     damit der Text darueber lesbar bleibt. */
  html body .ar-page-hero-art {
    position: absolute;
    inset: 0 0 0 auto;
    width: 46%;
    background-position: right center;
  }

  html body #view-search .discover-filter-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
  }

  /* margin: 0 wie auf dem Desktop - ohne die Ruecknahme des label-Grundwerts
     von 14px stehen die vier Controls in der gestapelten Reihe mit
     ungleichen Abstaenden (24/24/10 statt gleichmaessig 10). */
  html body #view-search .discover-select-field {
    width: 100% !important;
    margin: 0 !important;
  }

  html body #view-search .discover-select-field .ar-select {
    display: block !important;
    width: 100% !important;
  }

  html body #view-search .discover-select-field .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 12px 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-search .discover-select-field .ar-select-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

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

  html body #view-search .discover-select-field .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 #view-search .discover-filter-row .discover-filter-button,
  html body #view-search .discover-filter-row .discover-filter-reset {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 0 !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
  }

  html body #view-search .discover-filter-row .discover-filter-button {
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    background: var(--ar-page-field, rgba(20, 18, 23, .72)) !important;
    color: var(--md-on-surface) !important;
  }

  html body #view-search .discover-filter-row .discover-filter-reset {
    border: 1px solid rgba(216, 52, 58, .62) !important;
    background: rgba(216, 52, 58, .10) !important;
    color: var(--md-primary) !important;
  }

  html body #view-search .discover-filter-row .discover-filter-button svg,
  html body #view-search .discover-filter-row .discover-filter-reset svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
  }

  /* Die Beschriftung steht auf Mobil ueber den Chips. */
  html body #view-search .discover-genre-row {
    display: block !important;
    margin: 0 0 12px !important;
  }

  html body #view-search .discover-genre-row-label {
    display: block !important;
    margin: 0 0 8px !important;
    color: var(--md-on-surface) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }

  html body #view-search .discover-chip-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  html body #view-search .discover-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;
  }

  html body #view-search .discover-chip-row button.is-active {
    border-color: transparent !important;
    background: #ee2b34 !important;
    color: #fff !important;
    font-weight: 650 !important;
  }

  html body #view-search .discover-result-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 10px !important;
  }

  html body #view-search .discover-result-count {
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }

  html body #view-search .discover-result-row .discover-toolbar-end {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
  }

  html body #view-search .discover-sort-label {
    color: var(--md-muted) !important;
    font-size: 11px !important;
  }

  html body #view-search .discover-result-row .ar-select-btn {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    height: 28px !important;
    min-height: 0 !important;
    padding: 0 9px !important;
    border: 1px solid var(--ar-page-line, rgba(64, 58, 66, .74)) !important;
    border-radius: 7px !important;
    background: var(--ar-page-field, rgba(20, 18, 23, .72)) !important;
    color: var(--md-on-surface) !important;
    font-size: 11.5px !important;
  }

  html body #view-search .discover-result-row .ar-select-arrow {
    display: grid !important;
    place-items: center !important;
    width: 11px !important;
    height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
    transform: none !important;
  }

  html body #view-search .discover-result-row .ar-select-arrow::before {
    width: 6px !important;
    height: 6px !important;
    border-right: 1.5px solid currentColor !important;
    border-bottom: 1.5px solid currentColor !important;
  }

  html body #view-search .discover-view-toggle {
    display: inline-flex !important;
    gap: 5px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }

  html body #view-search .discover-view-toggle button {
    display: inline-grid !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: 7px !important;
    background: var(--ar-page-field, rgba(20, 18, 23, .72)) !important;
    color: var(--md-muted) !important;
  }

  html body #view-search .discover-view-toggle button > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
  }

  html body #view-search .discover-view-toggle button svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }

  html body #view-search .discover-view-toggle button.is-active {
    border-color: transparent !important;
    background: var(--md-primary) !important;
    color: #fff !important;
  }

  html body #view-search .discover-view-toggle button.is-active svg {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
  }

  /* Zweispaltiges Raster wie in der Referenz. */
  html body #view-search .search-results {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 11px !important;
  }

  html body #view-search .search-results .ui-state-card {
    grid-column: 1 / -1 !important;
  }

  html body #view-search .search-row {
    position: relative !important;
    display: block !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    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-search .search-row-image-link {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 165 / 106 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  html body #view-search .search-row-image-link::after {
    content: none !important;
    display: none !important;
  }

  html body #view-search .search-row-image-link img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center 22% !important;
  }

  html body #view-search .search-row > div.search-card-copy {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: grid !important;
    gap: 1px !important;
    padding: 7px 8px 8px !important;
  }

  html body #view-search .search-card-copy h3 {
    margin: 0 !important;
    overflow: hidden !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #view-search .search-card-subtitle {
    margin: 1px 0 0 !important;
    overflow: hidden !important;
    color: var(--md-muted) !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #view-search .search-card-meta {
    margin: 3px 0 0 !important;
    color: var(--md-dim) !important;
    font-size: 11px !important;
  }

  html body #view-search .search-row .release-meta {
    margin: 3px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  html body #view-search .search-card-genres {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin: 6px 0 0 !important;
    overflow: hidden !important;
  }

  html body #view-search .search-card-genres span {
    flex: 0 0 auto !important;
    padding: 2px 7px !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: 9.5px !important;
    white-space: nowrap !important;
  }

  html body #view-search .search-card-provider-slot {
    margin: 6px 0 0 !important;
  }

  html body #view-search .search-card-bookmark {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    display: grid !important;
    place-items: center !important;
    width: 25px !important;
    height: 25px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: rgba(12, 10, 14, .58) !important;
    color: #fff !important;
  }

  html body #view-search .search-card-bookmark svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
  }
}

/* ========================================================================== */
/* Filterschublade "Mehr Filter" (V2.4.217)                                   */
/*                                                                            */
/* Die Referenzbilder zeigen diesen Zustand nicht. Uebernommen wird deshalb    */
/* ausschliesslich die Designfamilie der Seite selbst: dieselben Flaechen,     */
/* Rahmen, Radien, Chips und Bedienelemente wie in der Filterzeile darunter.  */
/* Struktur, Reihenfolge, Beschriftungen und Funktion bleiben unveraendert -   */
/* nur die Darstellung wechselt.                                              */
/*                                                                            */
/* Vorher: deckende warmbraune Flaeche rgb(42,24,28) mit Rand rgb(90,42,47),   */
/* Pfeile in Gold in einer eigenen 44px-Spalte, Panelhoehe 1042px und damit    */
/* ueber den Fensterrand hinaus.                                              */
/* ========================================================================== */

@media (min-width: 960px) {
  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card {
    /* Dichter als die Seitenflaechen: die Schublade liegt ueber Inhalten und
       muss lesbar bleiben. Farbton und Rahmen sind dieselben. */
    max-height: calc(100dvh - 44px) !important;
    overflow-y: auto !important;
    padding: 16px !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;
  }

  /* Kopfbereich: Kicker, Titel, Schliessen. */
  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .search-filter-head {
    align-items: flex-start !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 :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .search-filter-head .section-kicker {
    color: var(--md-primary) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
  }

  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .search-filter-head h3 {
    margin: 2px 0 0 !important;
    color: var(--md-on-surface) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .search-filter-close {
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    height: 30px !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-muted) !important;
    font-size: 17px !important;
    line-height: 1 !important;
  }

  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .search-filter-close:hover {
    border-color: rgba(216, 52, 58, .6) !important;
    color: var(--md-on-surface) !important;
  }

  /* Gruppen und ihre Beschriftungen. */
  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .discover-filter-group {
    margin: 0 0 14px !important;
  }

  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .discover-filter-group h4,
  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card > label {
    display: block !important;
    margin: 0 0 7px !important;
    color: var(--md-on-surface) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }

  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card > label {
    margin-bottom: 14px !important;
  }

  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .discover-filter-count {
    margin-left: 6px !important;
    padding: 1px 6px !important;
    border-radius: 999px !important;
    background: rgba(216, 52, 58, .18) !important;
    color: var(--md-primary) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
  }

  /* Chips wie in der Filterzeile der Seite. */
  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .discover-filter-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
  }

  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .discover-filter-chips.is-scroll {
    max-height: 148px !important;
    overflow-y: auto !important;
  }

  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .discover-filter-chips 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 :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .discover-filter-chips 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 :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .discover-filter-chips button:hover:not(.is-active) {
    border-color: rgba(216, 52, 58, .6) !important;
  }

  /* Eingabefelder und Auswahllisten wie in der Filterzeile. */
  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card input,
  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .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 :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .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 :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card input::placeholder {
    color: var(--md-dim) !important;
  }

  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .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;
  }

  /* Der Pfeil war eine eigene Spalte mit Trennlinie und goldenem Winkel. */
  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .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 :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .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 :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .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 :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .ar-select-option {
    color: var(--md-on-surface) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
  }

  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .ar-select-option.is-selected,
  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .ar-select-option:hover {
    background: rgba(216, 52, 58, .16) !important;
    color: #fff !important;
  }

  /* Hinweiszeilen. */
  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .search-provider-note {
    display: block !important;
    margin: 5px 0 12px !important;
    color: var(--md-dim) !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  /* Uebernehmen: dieselbe rote Schaltflaeche wie auf der Seite. */
  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card #searchBtn {
    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 #searchBtn:hover {
    background: #ee2b34 !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Filterschublade auf Mobil: Blatt von unten                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 959px) {
  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card {
    position: fixed !important;
    z-index: 80 !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    max-width: none !important;
    max-height: 84dvh !important;
    overflow-y: auto !important;
    /* Untere Sicherheitszone der Geraete beruecksichtigen. Zusaetzlich Platz
       fuer die klebende Uebernehmen-Schaltflaeche, damit das letzte Element
       am Ende des Blaetterns nicht darunter verschwindet. */
    padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !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 :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .search-filter-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    align-items: flex-start !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 :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .search-filter-head .section-kicker {
    color: var(--md-primary) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
  }

  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .search-filter-head h3 {
    margin: 2px 0 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
  }

  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .search-filter-close {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    min-height: 0 !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;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .discover-filter-group {
    margin: 0 0 14px !important;
  }

  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .discover-filter-group h4,
  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card > label {
    display: block !important;
    margin: 0 0 8px !important;
    color: var(--md-on-surface) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }

  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card > label {
    margin-bottom: 14px !important;
  }

  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .discover-filter-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .discover-filter-chips.is-scroll {
    max-height: 168px !important;
    overflow-y: auto !important;
  }

  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .discover-filter-chips 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 :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .discover-filter-chips button.is-active {
    border-color: transparent !important;
    background: #ee2b34 !important;
    color: #fff !important;
    font-weight: 650 !important;
  }

  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card input,
  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .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 :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .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 :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .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 :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .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 :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .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 :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card .search-provider-note {
    display: block !important;
    margin: 5px 0 12px !important;
    color: var(--md-dim) !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  /* Die Uebernehmen-Schaltflaeche bleibt am unteren Rand erreichbar. */
  html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters).search-filter-card #searchBtn {
    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;
  }
}