/* === Referenzgalerie (scoped) ===================================== */
#ref-gallery, #ref-gallery * { box-sizing: border-box; }

#ref-gallery {
  --gold-1: #E5C44D;
  --gold-2: #F3D663;
  --ink: #0f172a;
  --muted: #334155;
  --bg: #f8fafc;

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

  background: var(--bg);
  padding: 4rem 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

#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;
}

#ref-gallery .rg { position: relative; }
#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;
}
#ref-gallery .rg__viewport::-webkit-scrollbar { display: none; }

#ref-gallery .rg__track {
  display: flex;
  align-items: stretch;
  gap: var(--gap);
  padding: 0;
  margin: 0;
}
#ref-gallery .rg__track::before,
#ref-gallery .rg__track::after {
  content: "";
  flex: 0 0 calc((100% - var(--slide)) / 2 - var(--gap) / 2);
}

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

@media (max-width: 1100px){ #ref-gallery { --visible: 2; } }
@media (max-width: 680px){  #ref-gallery { --visible: 1; } }

#ref-gallery .rg__figure { display: block; text-decoration: none; color: inherit; }
#ref-gallery .rg__media {
  --radius: 16px;
  --ratio: 16/9;
  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;
}

@supports not (aspect-ratio: 1) {
  #ref-gallery .rg__media { position: relative; }
  #ref-gallery .rg__media::before { content:""; display:block; padding-top:56.25%; }
  #ref-gallery .rg__media > img { position:absolute; inset:0; }
}

#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; display:flex; align-items:center; justify-content:center;
}
#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); }

#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; padding:0;
}
#ref-gallery .rg__dots button[aria-selected="true"] {
  background: linear-gradient(90deg, var(--gold-1), var(--gold-2));
}

@media (max-width: 768px){
  #ref-gallery { --visible:1; --gap:12px; --slide: calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible)); padding:2.25rem 0; }
  #ref-gallery .rg__track::before, #ref-gallery .rg__track::after { flex:0 0 0 !important; }
  #ref-gallery .container { padding: 0 1rem; }
  #ref-gallery .rg__media { --ratio: 4/3; --radius: 18px; box-shadow: 0 8px 22px rgba(15, 37, 51, .12); }
  #ref-gallery .rg__dots { margin-top:12px; gap:6px; }
  #ref-gallery .rg__dots button { width:22px; height:5px; }
}