/* ===================================================================
   Referenz-Slider — zwei Reihen, horizontal scrollbar
   Gemeinsam genutzt von leistungen-web.html und referenzen.html.
   Vorher lag dieser Block doppelt inline; ausgelagert, damit Änderungen
   nur an einer Stelle nötig sind.
   =================================================================== */

/* Referenz-Slider — zwei Reihen, horizontal scrollbar */
.ref-slider { position: relative; margin-top: 60px; }
.ref-track {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: 288px;
  gap: 22px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Luft, damit Hover-Lift und Fokusring nicht abgeschnitten werden */
  padding: 8px 2px 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ref-track::-webkit-scrollbar { display: none; }
.ref-track > .ref-card { scroll-snap-align: start; }

/* Rand-Verläufe signalisieren, dass es weitergeht */
.ref-slider::before,
.ref-slider::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 60px;
  pointer-events: none; z-index: 2;
  opacity: 0; transition: opacity 220ms ease;
}
.ref-slider::before { left: 0;  background: linear-gradient(90deg,  var(--wd-bg-alt), transparent); }
.ref-slider::after  { right: 0; background: linear-gradient(-90deg, var(--wd-bg-alt), transparent); }
.ref-slider[data-at-start="false"]::before { opacity: 1; }
.ref-slider[data-at-end="false"]::after    { opacity: 1; }

/* Pfeil-Navigation */
.ref-nav {
  position: absolute; top: 50%; z-index: 3;
  width: 48px; height: 48px; padding: 0;
  border-radius: 50%; border: 1px solid var(--wd-border);
  background: #fff; color: var(--wd-magenta);
  box-shadow: var(--wd-shadow-md);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 200ms ease, color 200ms ease, opacity 200ms ease, border-color 200ms ease;
}
.ref-nav svg { width: 18px; height: 18px; display: block; }
.ref-nav:hover { background: var(--wd-gradient-h); color: #fff; border-color: transparent; }
.ref-nav:focus-visible { outline: 2px solid var(--wd-magenta); outline-offset: 3px; }
.ref-nav[disabled] { opacity: 0; pointer-events: none; }
.ref-nav--prev { left: -20px;  transform: translateY(-50%); }
.ref-nav--next { right: -20px; transform: translateY(-50%); }

.ref-hint {
  margin-top: 16px; text-align: center;
  font-size: 13px; color: var(--wd-muted);
}

.ref-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--wd-border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.ref-card:hover,
.ref-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--wd-shadow-md);
  border-color: var(--wd-magenta-light);
}
.ref-card:focus-visible { outline: 2px solid var(--wd-magenta); outline-offset: 3px; }
.ref-card__shot {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--wd-lavender);
  border-bottom: 1px solid var(--wd-border);
}
.ref-card__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 400ms ease;
}
.ref-card:hover .ref-card__shot img { transform: scale(1.04); }
.ref-card__foot { padding: 15px 17px 17px; }
.ref-card__domain {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin-bottom: 5px;
}
.ref-card__scope {
  display: block;
  font-size: 12.5px;
  color: var(--wd-muted);
  line-height: 1.4;
}
@media (prefers-reduced-motion: reduce) {
  .ref-card, .ref-card__shot img { transition: none; }
  .ref-card:hover { transform: none; }
  .ref-card:hover .ref-card__shot img { transform: none; }
  .ref-track { scroll-behavior: auto; }
}
/* Ab hier wird gewischt statt geklickt — Pfeile weg, Karten schmaler */
@media (max-width: 1360px) {
  .ref-nav--prev { left: 4px; }
  .ref-nav--next { right: 4px; }
}
@media (max-width: 820px) {
  .ref-track { grid-auto-columns: 260px; gap: 16px; }
  .ref-nav { display: none; }
}
@media (max-width: 520px) {
  /* Nächste Karte lugt hervor — zeigt, dass man wischen kann */
  .ref-track { grid-auto-columns: 78vw; }
}