/* =============================================================================
   Mini Cafe · Fassung 2 · BILDERBAND  (Inhaber 02.11.2026, Vorbild haven-annecy.fr)
   Aufruf: MC.bilderband(element, { variante: 'a' | 'b' | 'aus', fotos, basis })   (gemeinsam/bilderband.js)
     a  = langsam durchlaufendes Band (haelt bei Maus, Fokus, Beruehrung, Pause-Knopf; ruhig/Fotomodus: still, wischbar)
     b  = Wisch-Reihe mit Einrasten, Punkten und (am Computer) Pfeilen
   Farben nur aus basis.css (--flaeche-tief, --haupt, --text, --fokus ...) -> Hell/Dunkel automatisch.
   ============================================================================= */
.bilderband {
  --bb-abstand: 10px;                 /* kleine Abstaende wie bei Haven */
  --bb-w: min(74vw, 340px);           /* Breite je Foto (Handy ca. 74 %) */
  --bb-radius: 6px;
  --bb-tempo: 60s;                    /* eine Runde; setzt bilderband.js nach Breite */
  position: relative; display: block; width: 100%; max-width: 100%;
  overflow: hidden; contain: layout paint;
}
.bilderband[hidden] { display: none !important; }
.bilderband.voll-breit { width: auto; max-width: none; }   /* mit negativem Seitenrand der Seite: wirklich randlos, nicht 100 % minus Rand */
@media (min-width: 768px)  { .bilderband { --bb-w: clamp(280px, 30vw, 480px); --bb-abstand: 12px; } }

.bb-foto { flex: 0 0 var(--bb-w); width: var(--bb-w); margin: 0; border-radius: var(--bb-radius); overflow: hidden; background: var(--flaeche-tief, #E4D9C6); aspect-ratio: 4 / 5; }
.bb-foto img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }

/* ---------- a: durchlaufendes Band ---------- */
.bb-fenster { position: relative; overflow: hidden; outline-offset: -3px; }
.bb-fenster:focus-visible { outline: 3px solid var(--fokus, #14523A); }
.bb-spur { display: flex; width: max-content; will-change: transform; animation: bb-lauf var(--bb-tempo) linear infinite; }
.bb-gruppe { display: flex; gap: var(--bb-abstand); padding-right: var(--bb-abstand); flex: none; }  /* Rest-Abstand -> Naht ohne Ruckeln */
@keyframes bb-lauf { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* still: ruhige, waagrecht wischbare Reihe (weniger Bewegung, Fotomodus) */
.bilderband.bb-still .bb-fenster { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.bilderband.bb-still .bb-spur { animation: none; width: max-content; }
.bilderband.bb-still .bb-gruppe { padding-inline: var(--rand, 22px); }


/* ---------- b: Wisch-Reihe ---------- */
.bb-reihe { display: flex; gap: var(--bb-abstand); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-inline: calc((100% - var(--bb-w)) / 2); scroll-padding-inline: calc((100% - var(--bb-w)) / 2); scrollbar-width: none; -webkit-overflow-scrolling: touch; outline-offset: -3px; }
.bb-reihe::-webkit-scrollbar { display: none; }
.bb-reihe:focus-visible { outline: 3px solid var(--fokus, #14523A); }
.bb-reihe .bb-foto { scroll-snap-align: start; scroll-snap-stop: always; }
/* Computer: erstes Foto buendig mit der Inhaltsspalte (--rand), rechts angeschnitten weiterlaufend; Punkte links buendig */
@media (min-width: 1024px) {
  .bb-reihe { padding-inline: var(--rand, 48px) calc(100% - var(--bb-w) - var(--rand, 48px)); scroll-padding-inline: var(--rand, 48px) 0; }
  .bilderband .bb-punkte { justify-content: flex-start; padding-inline: calc(var(--rand, 48px) - 8px); }
}

.bb-punkte { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin: 10px 0 0; padding: 0; list-style: none; }
.bb-punkt { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.bb-punkt::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-neben, #3b3b38); opacity: .35; transition: transform .2s, opacity .2s, background-color .2s; }
.bb-punkt:hover::before { opacity: .7; }
.bb-punkt[aria-current="true"]::before { background: var(--haupt, #14523A); opacity: 1; transform: scale(1.5); }
.bb-punkt:focus-visible { outline: 3px solid var(--fokus, #14523A); outline-offset: 0; }
html[data-look="dunkel"] .bb-punkt::before { background: var(--text, #F7F2EA); }
html[data-look="dunkel"] .bb-punkt[aria-current="true"]::before { background: var(--akzent, #E3B54A); }

.bb-pfeil { display: none; position: absolute; top: calc((100% - 34px) / 2); transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer; place-items: center;
  background: var(--flaeche, #F7F2EA); color: var(--text, #1D1D1B); box-shadow: 0 1px 8px rgba(0,0,0,.3); }
.bb-pfeil:hover:not(:disabled) { background: var(--flaeche-tief, #E4D9C6); }
.bb-pfeil:disabled { opacity: 0; pointer-events: none; }
.bb-pfeil:focus-visible { outline: 3px solid var(--fokus, #14523A); outline-offset: 2px; }
.bb-pfeil svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bb-pfeil--zurueck { left: 16px; } .bb-pfeil--vor { right: 16px; }
@media (hover: hover) and (min-width: 768px) { .bb-pfeil { display: grid; } }

/* Fotomodus / weniger Bewegung: keine weichen Uebergaenge */
html.bild .bb-punkt::before { transition: none; }
@media (prefers-reduced-motion: reduce) { .bb-punkt::before { transition: none; }
  /* Laufband läuft weiter (Inhaber 06.11.2026): gegen die allgemeine „weniger Bewegung“-Regel in basis.css */
  .bilderband:not(.bb-still) .bb-spur { animation-duration: var(--bb-tempo) !important; animation-iteration-count: infinite !important; } }