/* ============================================================
   Geräteauswahl ohne Neuladen - KSF Grillgeräte
   Gehört zu inc/geraete-auswahl.php und js/geraete-auswahl.js.

   Zwei Aufgaben: die gewählte Karte im Karussell erkennbar machen
   (das fehlte bisher ganz) und den Austausch ruhig wirken lassen.
   ============================================================ */

/* Gewähltes Modell im Karussell.
   Die Karten haben von Haus aus schon einen blauen Rahmen - ein zweiter
   fiele nicht auf. Eingefärbt wird deshalb das Namensband; das Produktbild
   bleibt wie bei allen anderen Karten auf Weiss stehen. (Die ganze Karte
   blau zu füllen ginge nicht: .text-content bringt einen eigenen weissen
   Hintergrund mit, die weisse Schrift wäre darauf unsichtbar.) */
.rgs-carousel .card.ksf-aktiv { border-color: #07589b; }
.rgs-carousel .card.ksf-aktiv .text-content { background: #07589b; }
.rgs-carousel .card.ksf-aktiv .text-content h2,
.rgs-carousel .card.ksf-aktiv .text-content span { color: #fff; }

.rgs-carousel .card[data-href] {
  cursor: pointer;
  transition: background-color .15s ease;
}

/* Während nachgeladen wird. Bei vorgeladenen Modellen sieht man das gar nicht,
   weil der Austausch dann im selben Wimpernschlag passiert. */
.ksf-auswahl-laedt { cursor: progress; }

/* Hülle um den nachgeladenen Teil: nötig, damit Flatsome seine Reiter darin
   findet (siehe js/geraete-auswahl.js). "contents" heisst: die Hülle ist für
   das Layout nicht vorhanden, die Zeilen darin sitzen wie zuvor. */
.ksf-auswahl-bereich { display: contents; }

/* ---------------------------------------------------------- Kartenbreite
   Vorher waren die Karten 17,5 % breit: in die 900 px breite Reihe passten
   5,41 Karten, die sechste ragte angeschnitten hervor. Jetzt füllen genau so
   viele Karten die Reihe, wie das Karussell je Ansicht weiterschaltet
   (5 / 4 / 2 - dieselben Schwellen wie getCardPerView() im Fußbereich der
   Theme-Einstellungen). Abstand zwischen den Karten: 10 px.
   Die höhere Spezifität (.rgs-wrapper davor) ist nötig, damit die Regel
   die bestehende Angabe schlägt, egal in welcher Reihenfolge die
   Stylesheets geladen werden. */
.rgs-wrapper .rgs-carousel .card {
  flex: 0 0 calc((100% - 40px) / 5);

  /* Die Karten sind Listenelemente und erbten vom Theme einen linken Rand
     von rund 21 px. Zusammen mit dem Abstand von 10 px war der tatsächliche
     Schritt 202 px - die Pfeile rechnen aber mit Kartenbreite + 10 px und
     liefen damit aus dem Takt. Ohne diesen Rand stimmt beides wieder. */
  margin: 0;
}

@media (max-width: 1200px) {
  .rgs-wrapper .rgs-carousel .card { flex-basis: calc((100% - 30px) / 4); }
}
@media (max-width: 768px) {
  .rgs-wrapper .rgs-carousel .card { flex-basis: calc((100% - 10px) / 2); }
}