/* ·····························································
   Doradoo - Seitenzahlen (Pager)
   Theme doradoo, kein Pfadfilter: die Seitennavigation kommt in der
   Trefferliste, bei den Shops und in den Profilen vor und soll
   ueberall gleich aussehen. EINE Regel statt drei - Arbeitsregel 12.

   Vorher: die nackte Drupal-Voreinstellung. Auf dem Handy 30 x 30 px
   grosse Textlinks ohne Flaeche - fuer den Daumen zu klein (die
   uebliche Untergrenze sind 40 px, dieselbe wie beim Sortier-Knopf
   und den Verkaeufer-Knoepfen).

   Das Markup kommt unveraendert von Drupal:
     nav.pager > ul.pager__items > li.pager__item > a
   mit is-active fuer die laufende Seite, --ellipsis fuer die drei
   Punkte und --next / --previous / --first / --last fuer die Pfeile.
   Die Woerter ("Seite 2", "Naechste Seite") stehen im Markup als
   visually-hidden und bleiben unberuehrt - sie gehoeren dem
   Screenreader und der Uebersetzung, nicht uns.

   Farben aus dem, was auf der Seite schon da ist:
     laufende Seite  #f8c647  das Gelb des Kopfbereichs
     ruhende Seite   weiss mit Kante #e2e2e8, wie die Karten
   ····························································· */

nav.pager .pager__items {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 28px 0 8px !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Das Theme gibt dem li feste 32 px. Der Knopf darin ist 40 px breit
   und ragte darueber hinaus - der Abstand von 8 px wurde dadurch
   aufgefressen und die Pillen stiessen aneinander. Als flex mit
   width: auto legt sich das li genau um seinen Knopf. */
/* KEIN display hier. Ein "display: flex !important" am li hat auf
   dem Handy die Theme-Regel .hide-mobile { display: none }
   ueberstimmt - die Seiten 4 bis 9 tauchten wieder auf und die
   Leiste brach zweizeilig um. width: auto reicht: das Theme gibt
   dem li feste 32 px, waehrend der Knopf darin 40 px breit ist. */
nav.pager .pager__item {
  /* Das Theme legt eine dunkle Kante (#333) um das li. Sichtbar war
     dadurch ein dunkler Kasten um jede helle Pille - und er machte
     sie 2 px groesser als gewollt. Die Kante gehoert an den Knopf,
     nicht an den Listeneintrag. */
  border: 0 !important;
  background: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* min-width statt width: eine zweistellige Seitenzahl darf breiter
   werden, die Hoehe bleibt gleich. */
/* box-sizing: border-box, sonst kommen Innenabstand und Kante zur
   min-width hinzu: aus 40 px wurden 66 px Breite und 42 px Hoehe.
   Mit border-box heisst 40 px auch 40 px - und eine zweistellige
   Seitenzahl darf ueber den Innenabstand trotzdem breiter werden. */
nav.pager .pager__item a {
  box-sizing: border-box !important;
  /* Ohne max-width: none bleibt der Knopf bei den 32 px des Themes
     stehen - dieselbe Falle wie schon beim Suchfeld. */
  max-width: none !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid #e2e2e8 !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  color: #3a3a42 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

nav.pager .pager__item a:hover,
nav.pager .pager__item a:focus {
  background: #f1f1f0 !important;
  border-color: #c9c9d2 !important;
}

nav.pager .pager__item.is-active a {
  background: #f8c647 !important;
  border-color: #e0ad2b !important;
  color: #1c1c22 !important;
}

/* Der Schatten des Themes am Listeneintrag. Er war beim Knopf
   "Naechste" als weicher Hof um die Pille zu sehen - es sah aus, als
   laege der alte Knopf noch darunter. Selektor mit .pager__items,
   damit er die Theme-Regel an .js-pager__items li schlaegt. */
nav.pager .pager__items .pager__item {
  box-shadow: none !important;
  flex: 0 0 auto !important;
}

/* Das Theme begrenzt Vor und Zurueck mit
     .js-pager__items .pager__item.pager__item--next { max-width: 100px !important }
   und die Zahlen mit max-width: 56px !important. Beides mit
   !important - dagegen hilft nur ein staerkerer Selektor, hier vier
   Klassen statt drei. Sonst wurde das Wort "Naechste" abgeschnitten
   und stand ueber die Pille hinaus. */
nav.pager .pager__items .pager__item.pager__item--next,
nav.pager .pager__items .pager__item.pager__item--previous,
nav.pager .pager__items .pager__item.pager__item--first,
nav.pager .pager__items .pager__item.pager__item--last {
  max-width: none !important;
  width: auto !important;
}

nav.pager .pager__items .pager__item.pager__item--next a,
nav.pager .pager__items .pager__item.pager__item--previous a,
nav.pager .pager__items .pager__item.pager__item--first a,
nav.pager .pager__items .pager__item.pager__item--last a {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}

/* Vor und Zurueck: die beiden span im Markup sind vom Theme auf
   display: none gesetzt - es zeichnet das Wort selbst als
   generierten Inhalt. Das bleibt so: Woerter gehoeren dem Theme und
   dem Admin, nicht dieser Regel (Arbeitsregel 3), sonst steht auf
   franzoesisch und italienisch deutsch da.

   Es braucht nur Platz. Mit min-width: 40px und ohne nowrap brach
   "Naechste" dreizeilig um und sprengte die Pille. */
nav.pager .pager__item--next a,
nav.pager .pager__item--previous a,
nav.pager .pager__item--first a,
nav.pager .pager__item--last a {
  min-width: 0 !important;
  padding: 0 14px !important;
  white-space: nowrap !important;
}

/* Die drei Punkte sind kein Link - nur ausrichten, keine Flaeche. */
nav.pager .pager__item--ellipsis {
  box-sizing: border-box !important;
  /* Das Theme gibt ihnen eine dunkle Kante - sie sind aber kein
     Knopf, sondern nur ein Hinweis auf ausgelassene Seiten. */
  border: 0 !important;
  background: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 40px !important;
  color: #9a9aa4 !important;
}

/* Ab 1240 px etwas kleiner: mit der Maus reichen 36 px, und die
   Zeile wirkt in der breiten Ansicht sonst zu wuchtig. */
@media screen and (min-width: 1240px) {
  nav.pager .pager__items {
    gap: 6px !important;
    margin: 32px 0 12px !important;
  }
  nav.pager .pager__item a {
    min-width: 36px !important;
    height: 36px !important;
    font-size: 13.5px !important;
  }
  nav.pager .pager__item--ellipsis {
    height: 36px !important;
  }
}