/* =========================================
   GEWERBE – Referenzen (wie Montage)
   Markup: #ref-gallery .rg, .rg__viewport, .rg__track, .rg__slide, .rg__media, .rg__nav, .rg__dots
========================================= */
#ref-gallery{
  /* Farben & Spacing */
  --gold-1:#E5C44D;
  --gold-2:#F3D663;
  --ink:#0f172a;
  --muted:#334155;
  --bg:#f8fafc;

  --gap:20px;
  --visible:3; /* 3 Kacheln auf Desktop */
  --slide: calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));

  background: var(--bg);
  padding: 4rem 0;
}

#ref-gallery .container{
  max-width:2000px;
  margin:0 auto;
  padding:0 2rem;
}

/* Titel wie auf Montage */
#ref-gallery .section-title{
  text-align:center;
  font-weight:800;
  font-size:clamp(1.75rem,3vw,2.25rem);
  color:var(--ink);
  margin:0;
}
#ref-gallery .section-title::after{
  content:"";
  display:block;
  width:64px; height:4px; border-radius:8px;
  margin:.6rem auto 0;
  background:linear-gradient(90deg,var(--gold-1),var(--gold-2));
}
#ref-gallery .section-subtitle{
  text-align:center;
  color:var(--muted);
  max-width:820px;
  margin:.75rem auto 2.5rem;
  line-height:1.7;
}

/* ===== Slider-Grundlayout ===== */
#ref-gallery .rg{ position:relative; }

/* Viewport: smooth scroll + snap + keine Scrollbar sichtbar */
#ref-gallery .rg__viewport{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  scroll-snap-stop:always;
  outline:none;
  padding-bottom:4px;
  scrollbar-width:none;        /* Firefox */
}
#ref-gallery .rg__viewport::-webkit-scrollbar{ display:none; } /* WebKit */

/* Track mit „Gap“ + Spacer links/rechts fürs Zentrieren */
#ref-gallery .rg__track{
  display:flex;
  align-items:stretch;
  gap:var(--gap);
  padding:0;
}
#ref-gallery .rg__track::before,
#ref-gallery .rg__track::after{
  content:"";
  flex:0 0 calc((100% - var(--slide))/2 - var(--gap)/2);
}

/* Einzel-Slide */
#ref-gallery .rg__slide{
  list-style:none;
  flex:0 0 var(--slide);
  max-width:var(--slide);
  scroll-snap-align:center;
}

/* Responsive: 3 ➜ 2 ➜ 1 sichtbare Karten */
@media (max-width:1100px){ #ref-gallery .rg{ --visible:2; } }
@media (max-width:680px){  #ref-gallery .rg{ --visible:1; } }

/* Bildkarte (sauber, mit Shadow) */
#ref-gallery .rg__figure{ display:block; text-decoration:none; color:inherit; }
#ref-gallery .rg__media{
  --radius:16px;
  --ratio:16/9;           /* bei Bedarf 3/2 wählen */
  aspect-ratio:var(--ratio);
  width:100%;
  border-radius:var(--radius);
  overflow:hidden;
  background:#f3f6fa;
  box-shadow:0 10px 28px rgba(15,37,51,.12);
}
#ref-gallery .rg__media > img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* Fallback für alte Browser ohne aspect-ratio */
@supports not (aspect-ratio: 1) {
  #ref-gallery .rg__media{ position:relative; }
  #ref-gallery .rg__media::before{
    content:"";
    display:block;
    padding-top:56.25%; /* 16:9 */
  }
  #ref-gallery .rg__media > img{ position:absolute; inset:0; }
}

/* Pfeile (gleiches Feeling wie Montage) */
#ref-gallery .rg__nav{
  position:absolute;
  top:44%;
  transform:translateY(-50%);
  width:40px; height:40px;
  border:0; border-radius:999px;
  cursor:pointer;
  color:#0f172a;
  background:linear-gradient(135deg,var(--gold-1),var(--gold-2));
  box-shadow:0 6px 16px rgba(212,175,55,.25);
  z-index:2;
}
#ref-gallery .rg__nav--prev{ left:max(6px, env(safe-area-inset-left)); }
#ref-gallery .rg__nav--next{ right:max(6px, env(safe-area-inset-right)); }
#ref-gallery .rg__nav:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(212,175,55,.35);
}

/* Dots */
#ref-gallery .rg__dots{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-top:16px;
}
#ref-gallery .rg__dots button{
  width:28px; height:6px;
  border:0; border-radius:999px;
  background:#dfe6ee; cursor:pointer;
}
#ref-gallery .rg__dots button[aria-selected="true"]{
  background:linear-gradient(90deg,var(--gold-1),var(--gold-2));
}

/* Referenzen: mobil nur 1 großes Bild anzeigen */
@media (max-width: 768px) {
  /* WICHTIG: auf #ref-gallery überschreiben, dort ist --slide definiert */
  #ref-gallery{
    --visible: 1;
    --gap: 12px;
    /* neu berechnen, damit die Breite wirklich 100% wird */
    --slide: calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
    padding: 2.25rem 0;
  }

  /* Spacer links/rechts neutralisieren */
  #ref-gallery .rg__track::before,
  #ref-gallery .rg__track::after{
    flex: 0 0 0 !important;
  }

  /* Karte/Bild höher und „größer“ wirken lassen */
  #ref-gallery .rg__media{
    --ratio: 4/3;   /* alternativ: 1/1 für quadratisch */
    --radius: 18px;
    box-shadow: 0 8px 22px rgba(15,37,51,.12);
  }

  /* etwas weniger Außen-/Innenabstand */
  #ref-gallery .container{ padding: 0 1rem; }

  /* Dots kompakter */
  #ref-gallery .rg__dots{ margin-top: 12px; gap: 6px; }
  #ref-gallery .rg__dots button{ width: 22px; height: 5px; }
}