/* quartier26 Bilder-Slider - Darstellung (Splide 4 Kern-CSS wird separat geladen) */

.q26-slider {
  --q26-dot: #9a9a9a;
  --q26-dot-active: #222;
  --q26-ctrl-bg: rgba(0, 0, 0, .68);
  --q26-ctrl-bg-hover: rgba(0, 0, 0, .88);
  position: relative;
  margin-top: 30px;          /* Platz fuer die Punkte ueber den Bildern */
}
.q26-slider.q26-no-dots { margin-top: 0; }

.q26-slider .splide__list { list-style: none; margin: 0; padding: 0; }
.q26-slider .splide__slide { background: #fff; list-style: none; }
.q26-slider .q26-img {
  display: block; width: 100%; height: auto;
  aspect-ratio: var(--q26-ratio, 3 / 2);
}
.q26-slider .q26-fit-cover   { object-fit: cover; }
.q26-slider .q26-fit-contain { object-fit: contain; background: #fff; }

/* Punkte: oben rechts ueber den Bildern, immer sichtbar */
.q26-slider .q26-dots {
  position: absolute; right: 22px; top: -26px; margin: 0; padding: 0;
  display: flex; gap: 8px; list-style: none;
}
.q26-slider .q26-dots[hidden] { display: none; }
.q26-slider .q26-dots li { display: block; margin: 0; padding: 0; line-height: 0; }
.q26-slider .q26-dot {
  width: 11px; height: 11px; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: var(--q26-dot); cursor: pointer; transition: background .2s; box-shadow: none;
}
.q26-slider .q26-dot:hover { background: #555; }
.q26-slider .q26-dot.is-active { background: var(--q26-dot-active); }

/* Pfeile und Pause-Knopf: nur beim Darueberfahren sichtbar */
.q26-slider .splide__arrow,
.q26-slider .splide__toggle {
  position: absolute; z-index: 2; top: 6px; width: 44px; height: 44px; min-width: 0;
  margin: 0; border: 0; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--q26-ctrl-bg); color: #fff; box-shadow: none;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s, background .2s;
}
.q26-slider .splide__arrow--prev { left: 5px; }
.q26-slider .splide__arrow--next { right: 5px; }
.q26-slider .splide__autoplay { position: absolute; z-index: 2; top: 0; left: 50%; width: 0; height: 0; }
.q26-slider .splide__toggle { left: -22px; }

.q26-slider:hover .splide__arrow,
.q26-slider:hover .splide__toggle,
.q26-slider:focus-within .splide__arrow,
.q26-slider:focus-within .splide__toggle,
.q26-slider.q26-controls-always .splide__arrow,
.q26-slider.q26-controls-always .splide__toggle { opacity: 1; }

.q26-slider .splide__arrow:hover,
.q26-slider .splide__toggle:hover { background: var(--q26-ctrl-bg-hover); }

.q26-slider svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.q26-slider .splide__arrow--prev svg { transform: scaleX(-1); }
.q26-slider .splide__toggle svg.ico-pause { fill: #fff; stroke: none; }
.q26-slider .splide__toggle svg.ico-play  { fill: #fff; stroke: none; display: none; }
.q26-slider .splide__toggle:not(.is-active) svg.ico-play  { display: block; }
.q26-slider .splide__toggle:not(.is-active) svg.ico-pause { display: none; }

/* Sichtbarer Fokus fuer Tastatur-Bedienung */
.q26-slider button:focus-visible { outline: 3px solid #fff; outline-offset: -5px; box-shadow: 0 0 0 2px #222; }

/* Touch-Geraete haben kein Darueberfahren: Bedienelemente immer zeigen */
@media (hover: none) {
  .q26-slider .splide__arrow,
  .q26-slider .splide__toggle { opacity: 1; }
}
/* Handy: Pfeile und Pause-Knopf liegen unter dem Foto, immer sichtbar.
   Links Pfeil zurueck, in der Mitte Pause, rechts Pfeil weiter. */
@media (max-width: 700px) {
  .q26-slider { padding-bottom: 54px; }
  .q26-slider .q26-dots { right: 4px; }
  .q26-slider .splide__arrow,
  .q26-slider .splide__toggle { width: 38px; height: 38px; opacity: 1; }
  .q26-slider .splide__arrow { top: auto; bottom: 8px; }
  .q26-slider .splide__arrow--prev { left: 0; }
  .q26-slider .splide__arrow--next { right: 0; }
  .q26-slider .splide__autoplay { top: auto; bottom: 8px; }
  .q26-slider .splide__toggle { top: auto; bottom: 0; left: -19px; }
  .q26-slider svg { width: 20px; height: 20px; }
}