/* Referenzlogos – ruhiges Raster statt Karussell.
   Nicht von Elementor erzeugt. Gehört zu build_refs.py; ein erneuter Abzug
   mit mirror.py entfernt die Sektion aus index.html, das Script setzt sie
   wieder ein.

   Jedes Logo trägt --w und --h aus dem Build: gleiche optische Fläche je
   Logo, gerechnet aus dem sichtbaren Bildinhalt (Hyatt sind 60 % der Datei
   leerer Rand, der zählt nicht mit). Gleiche Höhe wäre falsch – die
   Seitenverhältnisse reichen von 1:1 (V-ZUG) bis 11:1 (Haarklinik).

   --ul und --um sind Längen, keine Faktoren: sie sagen, wie breit eine
   --w-Einheit ist. Dadurch lassen sie sich aus der Fensterbreite rechnen,
   und die Ankerzeile bleibt über jede Breite hinweg eine Zeile. */

.frec-refs {
  --ul: 1px;
  --um: 1px;
  display: flex;
  flex-direction: column;
  gap: 46px;
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  margin: 5% 0;
  padding: 5% 4%;
}

.frec-refs__claim {
  margin: 0;
  font-family: "Sora", Sans-serif;
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
  color: #0b0b0b;
}

.frec-refs__lead,
.frec-refs__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.frec-refs__lead { gap: 34px 40px; }
/* 34 px Spalte, nicht 42: bei 42 fällt in mehreren Breiten (u. a. 1325 px)
   genau ein Logo allein in die letzte Zeile, was wie ein Fehler aussieht. */
.frec-refs__more { gap: 30px 34px; }

/* aspect-ratio statt fixer Höhe: wird ein Logo schmaler als seine Box
   (max-width), sinkt die Höhe mit, statt Leerraum stehen zu lassen. */
.frec-refs__logo {
  display: block;
  width: calc(var(--w) * var(--u));
  aspect-ratio: var(--w) / var(--h);
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center center;
}

.frec-refs__lead .frec-refs__logo { --u: var(--ul); }
.frec-refs__more .frec-refs__logo { --u: var(--um); }

/* Die fünf Anker summieren sich auf 800 --w-Einheiten. Damit sie in einer
   Zeile bleiben, muss 800 × --ul + 4 Spalten in die Innenbreite passen
   (92 vw, die Sektion hat 4 % Polster je Seite). */
@media (min-width: 1025px) {
  .frec-refs { --ul: min(1px, (92vw - 168px) / 800); }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .frec-refs {
    --ul: min(0.90px, (92vw - 132px) / 800);
    --um: min(0.86px, var(--ul));
    gap: 38px;
  }
  .frec-refs__lead { gap: 30px 30px; }
  .frec-refs__more { gap: 26px 34px; }
}

@media (max-width: 767px) {
  /* Anker gross halten – sie sind die Aussage. Der Rest rückt zusammen,
     sonst wird der Block länger als ein Bildschirm. */
  .frec-refs {
    /* 2 + 2 + 1: die zwei breitesten Anker sind 183 + 183 = 366 Einheiten. */
    --ul: min(0.88px, (92vw - 24px) / 366);
    gap: 30px;
    margin-top: 10%;
    padding: 10% 4%;
  }
  .frec-refs__lead { gap: 20px 20px; }

  /* Auf dem Handy als Raster statt Flex: 27 Logos gehen glatt in 3 Spalten
     auf, und es fällt nie ein einzelnes Logo in die letzte Zeile. Mit Flex
     passiert genau das je nach Gerätebreite (375 px, 430 px) und sieht wie
     ein Fehler aus. --um ist so gerechnet, dass auch das breiteste Logo
     (Haarklinik, 166 Einheiten) in eine Spalte passt – sonst würde
     max-width es stauchen und die gleiche optische Fläche wäre dahin. */
  .frec-refs__more {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
    gap: 18px 16px;
  }
  .frec-refs { --um: min(0.72px, (92vw - 32px) / 498); }

  /* V-ZUG ist quadratisch und steht als einziges in der letzten Zeile am
     besten – deshalb dort ans Ende statt eines angeschnittenen Schriftzugs. */
  .frec-refs__lead > .frec-refs__logo:nth-child(2) { order: 2; }
}

/* Grosse Handys quer / kleine Tablets: 4 Spalten, 27 gehen als 6 × 4 + 3 auf. */
@media (min-width: 480px) and (max-width: 767px) {
  .frec-refs__more { grid-template-columns: repeat(4, 1fr); }
  .frec-refs { --um: min(0.72px, (92vw - 48px) / 664); }
}