/* ==========================================
   RÜBSAM CONSULTING – REFERENZEN
   ========================================== */

/* GRUNDFARBEN UND BEREICH */

.references-section {
  --reference-background: #d8e2ed;
  --reference-line: #b3c2d3;
  --reference-text: #40536b;

  background: var(--reference-background);
  border-bottom: 1px solid var(--reference-line);
}

.references-section .wrap {
  width: min(1260px,
      calc(100% - 2 * clamp(24px, 5vw, 80px)));
}

.references-layout {
  display: grid;
  grid-template-columns:
    clamp(190px, 19vw, 240px) minmax(0, 1fr);

  align-items: center;
  column-gap: clamp(14px, 3vw, 42px);

  min-height: 165px;
  padding-block: 25px;
}

/* ÜBERSCHRIFT */

.references-layout h2 {
  font-size: 21px;
  font-weight: 730;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: #071f52;
}

/* ==========================================
   KARUSSELL – SICHTBARER BEREICH
   ========================================== */

.references-mask {
  min-width: 0;
  overflow: hidden;

  mask-image: linear-gradient(90deg,
      transparent,
      #000 4%,
      #000 96%,
      transparent);
}

.references-mask.has-loop {
  overflow: hidden;
  cursor: grab;

  /* Vertikales Scrollen erlaubt.
     Horizontales Wischen steuert JavaScript. */
  touch-action: auto;
  user-select: none;
  -webkit-user-select: none;
}

.references-mask:focus-visible {
  outline-offset: -3px;
}

.references-mask img {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ==========================================
   ENDLOSSCHLEIFE
   ========================================== */

.references-track {
  display: flex;
  width: max-content;
}

.reference-group {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* EINZELNE REFERENZ */

.reference-group li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-width: clamp(180px, 15vw, 215px);
  min-height: 100px;

  padding: 12px 16px;
  gap: 10px;

  border-inline-end: 1px solid var(--reference-line);

  color: var(--reference-text);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  box-sizing: border-box;
}

/* ==========================================
   UNTERNEHMENSKACHELN
   ========================================== */

.reference-group .reference-company {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 8px;

  background: transparent;
  transition: background-color .2s ease;
}

/* LOGOS */

.reference-company img,
.reference-group li img {
  display: block;

  width: 100%;
  max-width: 145px;

  height: 48px;
  max-height: 48px;

  object-fit: contain;
  margin-inline: auto;

  pointer-events: none;
  user-select: none;
}

/* ==========================================
   LOGOS – SANFTER FARBWECHSEL OHNE FARBSTICHE
   ========================================== */

/* app.js erzeugt je Logo eine zweite Bildschicht.
   Der CI-Farbfilter bleibt konstant; nur die Deckkraft
   der beiden Bildschichten wird animiert. */
.references-mask .reference-company > .reference-logo-original {
  opacity: 0;
  filter: none;
  transition: opacity .28s ease;
}

.references-mask .reference-company > .reference-logo-tint {
  opacity: 1;
  filter: grayscale(1) invert(.20) sepia(.75) saturate(1.4)
          hue-rotate(167deg) brightness(.95);
  transition: opacity .28s ease;
}

/* MÖLLER-SVG hat eine weiße Hintergrundfläche.
   Der bisherige Multiply-Effekt bleibt nur auf der
   eingefärbten Ebene bestehen. */
.references-mask .reference-company > .reference-logo-tint[src$="moeller-stone-care.svg"] {
  filter: grayscale(1) sepia(.8) saturate(1.4)
          hue-rotate(172deg);
  mix-blend-mode: multiply;
}

/* Desktop: Farbige Ebene ein-, getönte Ebene ausblenden. */
@media (hover: hover) {
  .references-mask:not(.is-dragging)
  .reference-company:hover > .reference-logo-original {
    opacity: 1;
  }

  .references-mask:not(.is-dragging)
  .reference-company:hover > .reference-logo-tint {
    opacity: 0;
  }
}

/* Smartphone: erster Tipp setzt .is-selected bereits
   durch die vorhandene Touch-Logik in app.js. */
.references-mask.is-touch:not(.is-dragging)
.reference-company.is-selected > .reference-logo-original,
.references-mask:not(.is-dragging)
.reference-company:focus-within > .reference-logo-original {
  opacity: 1;
}

.references-mask.is-touch:not(.is-dragging)
.reference-company.is-selected > .reference-logo-tint,
.references-mask:not(.is-dragging)
.reference-company:focus-within > .reference-logo-tint {
  opacity: 0;
}

/* ==========================================
   LOGO UND BRANCHE
   ========================================== */

/* Branche und Button liegen in derselben Zeile.
   Dadurch springt beim Wechsel nichts. */

.reference-group .reference-company:has(> .reference-industry) {
  display: grid;

  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 48px 34px;

  align-content: center;
  justify-items: center;
  gap: 8px;
}

/* LOGO OBEN */

.reference-company>img {
  grid-column: 1;
  grid-row: 1;
}

/* BRANCHE UND BUTTON UNTEN */

.reference-company>.reference-industry,
.reference-company>.reference-site-link {
  grid-column: 1;
  grid-row: 2;

  align-self: center;
  justify-self: center;
}

/* ==========================================
   BRANCHENLABELS – DEZENT UND ECKIG
   ========================================== */

.reference-industry {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: max-content;
  max-width: 100%;

  min-height: 25px;
  padding: 5px 10px;
  box-sizing: border-box;

  background: rgba(7, 31, 82, .05);
  border-radius: 0;

  color: #52657b;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .01em;

  text-transform: none;
  white-space: nowrap;

  opacity: 1;
  pointer-events: none;

  transition: opacity .2s ease;
}

/* ==========================================
   WEBSEITENBUTTON
   ========================================== */

/* Standardmäßig verborgen */

.reference-company .reference-site-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: fit-content;
  min-width: 95px;
  min-height: 30px;

  padding: 5px 14px;
  box-sizing: border-box;

  background: transparent;
  border: 1px solid #071f52;
  border-radius: 0;

  color: #071f52;

  font-size: 10px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: .015em;

  white-space: nowrap;
  text-decoration: none;

  opacity: 0;
  pointer-events: none;

  transform: translateY(4px);
  cursor: pointer;

  transition:
    opacity .2s ease,
    transform .2s ease,
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease;
}

/* ==========================================
   DESKTOP – HOVER
   ========================================== */

@media (hover: hover) {

  /* Einzelne Kachel hervorheben */

  .reference-group .reference-company:hover {
    background: rgba(255, 255, 255, .22);
  }

  /* Branche ausblenden */

  .reference-company:hover>.reference-industry {
    opacity: 0;
  }

  /* Webseitenbutton einblenden */

  .reference-company:hover .reference-site-link {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Button wird bei direktem Hover blau */

  .reference-company .reference-site-link:hover {
    background: #1671ff;
    border-color: #1671ff;
    color: #ffffff;
  }
}

/* ==========================================
   TASTATURBEDIENUNG
   ========================================== */

.reference-company:has(.reference-site-link:focus-visible) {
  background: rgba(255, 255, 255, .35);
}

.reference-company:has(.reference-site-link:focus-visible)>.reference-industry {
  opacity: 0;
}

.reference-company:has(.reference-site-link:focus-visible) .reference-site-link {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.reference-company .reference-site-link:focus-visible {
  outline: 2px solid #071f52;
  outline-offset: 3px;
}

/* ==========================================
   MANUELLES ZIEHEN
   ========================================== */

.references-mask.is-dragging .reference-company {
  background: transparent;
}

/* Beim Ziehen keine Buttons anzeigen */

.references-mask.is-dragging .reference-site-link {
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
}

/* Branche beim Ziehen wieder sichtbar */

.references-mask.is-dragging .reference-industry {
  opacity: 1;
}

/* OFFENE ZIEH-HAND */

.references-mask.has-loop:not(.is-dragging) .reference-company,
.references-mask.has-loop:not(.is-dragging) .reference-company img {
  cursor: grab !important;
}

/* KLICK-HAND AUSSCHLIESSLICH AUF BUTTONS */

.references-mask.has-loop:not(.is-dragging) .reference-site-link {
  cursor: pointer !important;
}

/* GESCHLOSSENE ZIEH-HAND */

.references-mask.has-loop.is-dragging,
.references-mask.has-loop.is-dragging * {
  cursor: grabbing !important;
}

/* ==========================================
   CALL-TO-ACTION-KACHEL
   ========================================== */

/* Ihr Unternehmen als Nächstes? */

.reference-company--cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 10px;
  text-align: center;
}

.reference-cta-title {
  margin: 0;

  color: #071f52;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

/* CTA-Button bleibt immer sichtbar */

.reference-company--cta .reference-site-link--cta {
  opacity: 1;
  pointer-events: auto;
  transform: none;

  min-width: 145px;
  min-height: 32px;
  font-size: 11px;
}

/* ==========================================
   TOUCH – SMARTPHONE UND TABLET
   ========================================== */

/* Aktive Firmenkachel auf Smartphone und Tablet */
.references-mask.is-touch .reference-group 
.reference-company.is-selected {
  background: rgba(255, 255, 255, .22);
}

/* Die is-touch-Klasse wird durch app.js gesetzt. */

/* Nur zwei Zeilen: Logo und Beschriftung */

.references-mask.is-touch .reference-group .reference-company:has(> .reference-industry) {
  grid-template-rows: 48px 34px;
  gap: 8px;
  min-height: 100px;
}

/* Normalzustand: Branche sichtbar */

.references-mask.is-touch .reference-company>.reference-industry {
  grid-row: 2;
  opacity: 1;
}

/* Webseitenbutton zunächst unsichtbar.
   Er darf das Wischen nicht blockieren. */

.references-mask.is-touch .reference-company>.reference-site-link:not(.reference-site-link--cta) {
  grid-row: 2;

  opacity: 0;
  pointer-events: none;
  transform: none;
}

/* Nach dem ersten Tippen:
   Branche ausblenden */

.references-mask.is-touch .reference-company.is-selected>.reference-industry {
  opacity: 0;
}

/* Webseitenbutton für drei Sekunden anzeigen */

.references-mask.is-touch .reference-company.is-selected>.reference-site-link:not(.reference-site-link--cta) {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* Beim Wischen zur normalen Ansicht zurück */

.references-mask.is-touch.is-dragging .reference-company>.reference-industry {
  opacity: 1;
}

.references-mask.is-touch.is-dragging .reference-company>.reference-site-link:not(.reference-site-link--cta) {
  opacity: 0;
  pointer-events: none;
}

/* ==========================================
   TABLET
   ========================================== */

@media (max-width: 900px) {

  .references-layout {
    grid-template-columns:
      minmax(165px, 210px) minmax(0, 1fr);

    column-gap: 20px;
  }

  .references-layout h2 {
    font-size: 19px;
  }

  .reference-group li {
    min-width: 180px;
    min-height: 95px;
  }

  .reference-group li img,
  .reference-company img {
    max-width: 140px;
    height: 46px;
    max-height: 46px;
  }
}

/* ==========================================
   SMARTPHONE
   ========================================== */

@media (max-width: 760px) {

  .references-layout {
    grid-template-columns: minmax(0, 1fr);

    min-height: 0;
    gap: 18px;
    padding-block: 22px;
  }

  .references-layout h2 {
    font-size: 19px;
    max-width: 300px;
  }

  .references-mask {
    width: 100%;
    min-width: 0;
  }

  .reference-group li {
    min-width: 170px;
    min-height: 95px;

    padding: 10px 12px;
    gap: 8px;
  }

  .reference-group li img,
  .reference-company img {
    max-width: 135px;
    height: 45px;
    max-height: 45px;
  }

  .reference-company .reference-site-link {
    font-size: 10px;
    min-height: 28px;
    padding: 4px 11px;
  }
}

/* ==========================================
   SEHR KLEINE SMARTPHONES
   ========================================== */

@media (max-width: 380px) {

  .references-layout {
    gap: 14px;
    padding-block: 20px;
  }

  .references-layout h2 {
    font-size: 18px;
  }

  .reference-group li {
    min-width: 155px;
    min-height: 90px;
    padding: 8px 10px;
  }

  .reference-group li img,
  .reference-company img {
    max-width: 125px;
    height: 42px;
    max-height: 42px;
  }

  .reference-company .reference-site-link {
    font-size: 9px;
    min-width: 85px;
  }
}

/* ==========================================
   DESKTOP – KACHELN ETWAS TIEFER
   ========================================== */

@media (min-width: 761px) {

  .reference-group .reference-company {
    padding-top: 18px;
    padding-bottom: 6px;
  }
}

/* ==========================================
   REDUZIERTE BEWEGUNG
   ========================================== */

@media (prefers-reduced-motion: reduce) {

  .reference-group .reference-company,
  .reference-company .reference-site-link,
  .reference-company > img,
  .reference-industry {
    transition: none;
  }
}