/* ===========================================================
   Foto-Karussell — gemeinsame Komponente

   Wird von der Startseite (index.html) und den drei Vermietungsseiten
   benutzt. Lag vorher in rental.css; ausgelagert, damit beide Seiten
   dieselbe Galerie zeigen und nicht auseinanderlaufen.
   Setzt die Farbvariablen aus villa.css bzw. rental.css voraus.
   =========================================================== */
.gal-stage{position:relative;border-radius:4px;overflow:hidden;background:#ece7de;
  max-width:820px;margin:0 auto}   /* 820 px = native Bildbreite, keine Hochskalierung */
.gal-viewport{position:relative;overflow:hidden;cursor:grab;touch-action:pan-y;outline:none}
.gal-viewport.is-dragging{cursor:grabbing}
.gal-track{display:flex;will-change:transform}
.gal-slide{flex:0 0 100%;aspect-ratio:3/2;background:#ece7de}
.gal-slide img{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;pointer-events:none}

.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  border:0;background:rgba(255,255,255,.82);color:var(--charcoal);cursor:pointer;z-index:3;
  display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1;
  box-shadow:0 6px 20px rgba(0,0,0,.18);transition:transform .18s ease,background .18s ease,opacity .18s ease}
.gal-nav:hover:not([disabled]){transform:translateY(-50%) scale(1.09);background:#fff}
.gal-nav[disabled]{opacity:.35;cursor:not-allowed}
.gal-prev{left:16px}
.gal-next{right:16px}
/* 44 px ist die kleinste Flaeche, die ein Daumen zuverlaessig trifft */
@media(max-width:560px){.gal-nav{width:44px;height:44px}.gal-prev{left:8px}.gal-next{right:8px}}

.gal-count{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:3;
  background:rgba(26,26,26,.58);color:#fff;padding:5px 13px;border-radius:999px;font-size:12px;letter-spacing:.06em;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.gal-hint{position:absolute;top:14px;right:16px;z-index:3;background:rgba(26,26,26,.5);color:#fff;
  padding:5px 12px;border-radius:999px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

.gal-thumbs{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;margin-top:10px;
  max-width:820px;margin-inline:auto}
.gal-thumbs::-webkit-scrollbar{display:none}
.gal-thumbs-inner{display:flex;gap:2px;height:80px;width:fit-content;padding-bottom:6px}
.gal-thumb{position:relative;flex-shrink:0;height:100%;width:35px;padding:0;border:0;border-radius:3px;
  overflow:hidden;cursor:pointer;background:#ece7de;
  transition:width .3s ease,margin .3s ease,box-shadow .2s ease}
.gal-thumb img{width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.gal-thumb.is-active{box-shadow:0 0 0 2px var(--gold)}
@media (prefers-reduced-motion:reduce){.gal-thumb{transition:none}}

/* Telefon: volle Breite, kleinere Miniaturen */
@media(max-width:560px){
  .gal-stage,.gal-thumbs{max-width:100%}
  .gal-thumb{height:64px}
  .gal-thumbs-inner{height:64px}
  .gal-thumb{-webkit-tap-highlight-color:rgba(201,169,110,.25)}
}