/* 2HOT2PAY — Referenzen-Kacheln (Startseite, Abschnitt "Was andere sagen").
   Eigene Datei, damit Startseite (site.css) und Landing Pages (landing.css) unberührt bleiben und der
   Block später auf Landing Pages eingebunden werden kann (Partial sections/references).
   Quelle der Kacheln: src/references.json. Ruhezustand: alle Logos weiß/einfarbig auf dunkler Kachel.
   Aufleuchten (Hover/Fokus am Computer, Lauflicht am Handy per js/references.js): Originalfarben,
   pinke Lichtkante läuft einmal um die Kachel. Ohne Bewegung (prefers-reduced-motion): nur der Zustand. */

@property --refs-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.refs { margin-top: var(--sp-16); --refs-gap: var(--sp-3); --refs-logo-h: 48px; }
.refs__title { text-align: center; }
.refs__grid {
  list-style: none; margin: var(--sp-8) auto 0; padding: 0; max-width: 1040px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--refs-gap);
}
.refs__item { flex: 0 0 calc((100% - var(--refs-gap)) / 2); min-width: 0; }
@media (min-width: 900px) {
  .refs { --refs-gap: var(--sp-4); --refs-logo-h: 60px; }
  .refs__item { flex-basis: calc((100% - 3 * var(--refs-gap)) / 4); }
}

.refs__tile {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 10; border-radius: var(--r-card); background: var(--surface);
  border: 1px solid var(--border); isolation: isolate; -webkit-tap-highlight-color: transparent;
  transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.refs__tile:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

/* Pinke Lichtkante: Rahmen aus einem Kegelverlauf, nur der Rand (Maske), unsichtbar bis zum Aufleuchten. */
.refs__tile::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--refs-angle), transparent 0deg 200deg, var(--pink) 290deg, var(--neon-core) 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0;
}

.refs__logo {
  display: block; height: auto; max-width: 100%; opacity: .86;
  filter: brightness(0) invert(1);
  transition: filter .45s var(--ease-out), opacity .45s var(--ease-out);
}
.refs__tile--gray .refs__logo { filter: grayscale(1) brightness(1.5); }
.refs__logo--xw { width: 84%; }
.refs__logo--w { width: 70%; }
.refs__logo--m { width: auto; height: var(--refs-logo-h); max-width: 70%; }
.refs__logo--s { width: auto; height: calc(var(--refs-logo-h) * 1.15); }

/* Aufgeleuchtet: Lauflicht am Handy (.is-lit), Tastaturfokus, Antippen. */
.refs__tile.is-lit, .refs__tile:focus-visible, .refs__tile:active {
  border-color: var(--pink-line); box-shadow: 0 0 28px rgba(255, 46, 126, .28);
}
.refs__tile--light.is-lit, .refs__tile--light:focus-visible, .refs__tile--light:active { background-color: #f3f0f1; }
.refs__tile.is-lit .refs__logo, .refs__tile:focus-visible .refs__logo, .refs__tile:active .refs__logo { filter: none; opacity: 1; }
/* Computer mit Maus: dasselbe beim Überfahren. */
@media (hover: hover) {
  .refs__tile:hover { border-color: var(--pink-line); box-shadow: 0 0 28px rgba(255, 46, 126, .28); }
  .refs__tile--light:hover { background-color: #f3f0f1; }
  .refs__tile:hover .refs__logo { filter: none; opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Die Kante läuft einmal herum und blendet dann aus; der Zustand (Rand, Schein, Farbe) bleibt. */
  .refs__tile.is-lit::before, .refs__tile:focus-visible::before { animation: refs-edge 1.3s linear 1 forwards; }
  @media (hover: hover) { .refs__tile:hover::before { animation: refs-edge 1.3s linear 1 forwards; } }
  /* Auftauchen nacheinander: js/references.js setzt .refs--armed (versteckt) und beim Reinscrollen .refs--in. */
  .refs--armed .refs__item { opacity: 0; transform: translateY(22px) scale(.97); }
  .refs--in .refs__item { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
}
@keyframes refs-edge {
  0% { --refs-angle: 0deg; opacity: 0; }
  12% { opacity: 1; }
  82% { opacity: 1; }
  100% { --refs-angle: 360deg; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .refs__tile, .refs__logo { transition: none; }
}