/* ==========================================================================
   Slider - Leiste mit Punkten und Pfeilen
   Gehoert zu js/slider.js. Das Skript ist seit dem 27.08.2026 generisch
   ueber data-slider, die Gestaltung lag bisher aber als .pverw__* in
   pages/produkt.css - also am Ort der ersten Verwendung.

   DIESES BAUTEIL IST DER ZWEITE NUTZER, die Produktuebersicht. Statt die
   Regeln dort ein zweites Mal zu schreiben, stehen sie jetzt hier und
   generisch. Die Produktdetailseite behaelt vorerst ihre .pverw__* -
   sie ist vom Kunden abgenommen, und ein Umbau daran gehoert nicht in
   dieselbe Runde. IM THEME sind beide dasselbe Bauteil; die Notiz dazu
   steht in theme-notizen.md.

   Das Skript setzt und entfernt hidden selbst: es misst, ob die erste und
   die letzte Folie vollstaendig sichtbar sind, und blendet die Leiste aus,
   wenn alles passt. Bei jeder Breitenaenderung rechnet es neu. Genau
   dadurch verschwindet die Leiste im Raster von allein und erscheint in
   der Wischbahn von allein - ohne eine zweite Media-Query.
   ========================================================================== */

.slider__leiste {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.slider__leiste > .slider__punkte { grid-column: 2; justify-self: center; }
.slider__leiste > .slider__nav { grid-column: 3; justify-self: end; }
/* Auf schmalen Schirmen untereinander: nebeneinander wird die Zeile eng,
   und die Punkte rutschen aus der Mitte. */
@media (max-width: 40rem) {
  .slider__leiste { grid-template-columns: 1fr; justify-items: center; gap: var(--sp-3); }
  .slider__leiste > .slider__punkte,
  .slider__leiste > .slider__nav { grid-column: 1; justify-self: center; }
}

.slider__punkte {
  display: flex;
  /* Kein Abstand: die Polsterung der Knoepfe traegt die Luft. */
  gap: 0;
}
/* [hidden] BRAUCHT EINE EIGENE REGEL. Jede Klassenregel mit display schlaegt
   das [hidden] des Browsers - dieselbe Spezifitaetsstufe, aber unsere Regel
   kommt spaeter. Ohne diese Zeile stehen Punkte und Pfeile sichtbar da,
   obwohl das Skript sie versteckt hat. Im Projekt siebenmal passiert, siehe
   theme-notizen.md. */
.slider__punkte[hidden] { display: none; }
/* Kern 8 px, Trefferflaeche 28x44. ABWEICHUNG von der Projektregel
   "Tap-Targets ab 44 px", bewusst und nur in der Breite - senkrecht bleiben
   es 44. Punkte mit je 44 px Breite standen so weit auseinander, dass sie
   nicht mehr als Reihe lasen. 28x44 liegt weiter deutlich ueber der
   WCAG-Mindestgroesse von 24x24. */
.slider__punkt {
  appearance: none;
  border: 0;
  background: none;
  width: 1.75rem;
  height: 2.75rem;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.slider__punkt::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--r-pill);
  background: var(--c-grau-300);
  transition: background var(--dur) var(--ease), transform var(--dur-hover) var(--ease-hover);
}
.slider__punkt:hover::before { background: var(--text-muted); }
/* Markenblau, nicht die Sortenfarbe: die wechselt je Folie. */
.slider__punkt[aria-current="true"]::before {
  background: var(--toem-blau);
  transform: scale(1.3);
}
.slider__punkt:focus-visible { outline-offset: -6px; }

.slider__nav {
  display: flex;
  gap: var(--sp-2);
}
.slider__nav[hidden] { display: none; }
.slider__pfeil {
  appearance: none;
  /* 44 px Trefferflaeche laut Projektregel. */
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--toem-blau);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.slider__pfeil svg { width: var(--zeichen-klein); height: var(--zeichen-klein); }
.slider__pfeil:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: var(--shadow-1);
}
/* Deaktiviert: sichtbar, aber zurueckgenommen. Ausblenden waere schlechter -
   die Reihe wuerde springen, sobald ein Knopf verschwindet. */
.slider__pfeil:disabled {
  color: var(--text-muted);
  opacity: 0.4;
  cursor: default;
}