/* ---------------------------------------------------------------
   slider.css - Darstellung des Endlos-Sliders.
   Gehoert zusammen mit js/slider.js, siehe dort fuer das Markup.

   Bewusst nur das Verhalten: Breite der Folien, Bewegung und die
   Navigationspunkte. Aussehen der Folien selbst (Polsterung,
   Hintergrund, Ausrichtung) bleibt bei der jeweiligen Seite.
   --------------------------------------------------------------- */

[data-slider]{
  display:flex;
  transition:transform 0.7s cubic-bezier(0.4,0,0.2,1);
  will-change:transform;
  /* pan-y ueberlaesst das senkrechte Scrollen dem Browser und gibt uns
     die waagerechten Gesten fuers Wischen. pinch-zoom bleibt ausdruecklich
     erlaubt - sonst liesse sich der Slider nicht mehr vergroessern, was
     fuer Menschen mit Sehbeeintraechtigung ein echtes Hindernis waere. */
  touch-action:pan-y pinch-zoom;
  /* Beim Wischen soll nicht versehentlich Text markiert werden. */
  -webkit-user-select:none;
  user-select:none;
}
/* Bilder in den Folien nicht ziehbar machen, sonst startet die Maus
   einen Drag-Vorgang statt einer Wischbewegung. */
[data-slider] img{-webkit-user-drag:none;user-drag:none}
[data-slider] > *{
  /* flex:0 0 100% gibt jeder Folie genau die Breite des Sliders.
     Achtung, nicht durch "min-width:100%;flex-shrink:0" ersetzen:
     min-width ist nur eine Untergrenze. Ohne Schrumpfen behielte
     jede Folie ihre max-content-Breite und der Inhalt liefe aus
     dem Rahmen. flex-basis setzt die Breite dagegen verbindlich. */
  flex:0 0 100%;
  min-width:0;
}

/* Navigationspunkte */
.dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#cfd7e5;
  border:none;
  padding:0;
  cursor:pointer;
  transition:background 0.2s,transform 0.2s;
}
.dot:hover{background:#99b9ff}
.dot:focus-visible{outline:2px solid #004985;outline-offset:3px}
.dot.active{background:#004985;transform:scale(1.25)}

/* Wer Bewegung reduziert haben will, bekommt keine.
   Das Autoplay schaltet js/slider.js in diesem Fall ebenfalls ab. */
@media (prefers-reduced-motion:reduce){
  [data-slider]{transition:none}
  .dot{transition:none}
  .dot.active{transform:none}
}