/* Farbwechsler.

   Die Farbreihe kommt unveraendert aus [product_color_swatches] — Groesse,
   Farbe und Form werden hier NICHT angefasst. Dazu kommt nur, was noetig ist,
   damit man sie bedienen kann.

   Zum Weichzeichner der Bilder: der kommt aus js/image-protection.js und ist
   gewollt. Hier darf nichts dagegenhalten. */

/* ── Die Reihe bedienbar machen ─────────────────────────────────────────
   Das Theme setzt pointer-events:none auf die Chips, weil sie bisher reine
   Anzeige waren ("nur Anzeige, nicht klickbar" steht so im Shortcode). Nur in
   Kacheln MIT Farbwechsler nehmen wir das zurueck — ueberall sonst bleibt es. */
.e-loop-item:has(.ak86-flaeche) .bulli-swatch,
.product:has(.ak86-flaeche) .bulli-swatch {
  pointer-events: auto;
  cursor: pointer;
}
.e-loop-item:has(.ak86-flaeche) .bulli-swatch .bulli-swatch__chip,
.product:has(.ak86-flaeche) .bulli-swatch .bulli-swatch__chip {
  pointer-events: auto;
  transition: transform .12s ease;
}
.e-loop-item:has(.ak86-flaeche) .bulli-swatch:hover .bulli-swatch__chip,
.product:has(.ak86-flaeche) .bulli-swatch:hover .bulli-swatch__chip { transform: scale(1.18); }
.e-loop-item:has(.ak86-flaeche) .bulli-swatch.is-an .bulli-swatch__chip,
.product:has(.ak86-flaeche) .bulli-swatch.is-an .bulli-swatch__chip {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #1a1a1a;
}

/* Rueckfall fuer Browser ohne :has() — die Klasse setzt das JS auf die Kachel. */
.ak86-bedienbar .bulli-swatch { pointer-events: auto; cursor: pointer; }
.ak86-bedienbar .bulli-swatch .bulli-swatch__chip { pointer-events: auto; }

/* ── Bildflaeche ────────────────────────────────────────────────────────── */
.ak86-flaeche { position: relative; }
.ak86-flaeche .swiper-slide { display: block; touch-action: pan-y; }
.ak86-flaeche img {
  display: block; width: 100%; height: auto;
  transition: opacity .16s ease;
}
.ak86-flaeche.is-laedt img { opacity: .5; }

/* ── Pfeile ─────────────────────────────────────────────────────────────
   Auf dem Zeigergeraet sind sie die eigentliche Bedienung — wischen kann man
   dort zwar (die Maus zieht), aber niemand kommt von selbst darauf. Auf
   Touch-Geraeten sind sie der Hinweis, dass hier ueberhaupt etwas geht. */
.ak86-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; z-index: 7;      /* ueber der Dein-Design-Karte (6) */
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.88);
  box-shadow: 0 1px 4px rgba(0,0,0,.22);
  opacity: 0; transition: opacity .15s ease, background .15s ease;
  pointer-events: auto;
}
.ak86-pfeil--vor { right: 8px; }
.ak86-pfeil svg { width: 15px; height: 15px; display: block; }
.ak86-flaeche:hover .ak86-pfeil,
.ak86-pfeil:focus-visible { opacity: 1; }
.ak86-pfeil:hover { background: #fff; }
.ak86-pfeil:focus-visible { outline: 2px solid #c62828; outline-offset: 2px; }

/* Ohne Maus gibt es kein Hover — dort stehen die Pfeile dauerhaft, aber leise. */
@media (hover: none) {
  .ak86-pfeil { opacity: .8; }
}

@media (prefers-reduced-motion: reduce) {
  .ak86-flaeche img,
  .bulli-swatch .bulli-swatch__chip,
  .ak86-pfeil { transition: none; }
}