/* =========================================================
   POOL PROMOTION — CLIENTS
   ========================================================= */

.clients-page {
  position: relative;

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

  margin: 0 auto;

  padding-top: 90px;
  padding-bottom: 120px;
}

/* =========================================================
   LETTER GROUP
   ========================================================= */

.clients-group {
  display: grid;

  grid-template-columns:
    17px
    minmax(0, 1fr);

  column-gap: 4px;

  width: 100%;

  margin: 0 0 5px;
  padding: 0;
}

/* =========================================================
   LETTER
   ========================================================= */

.clients-letter {
  margin: 0;
  padding: 0;

  color: var(--berry);

  font-size: 17px;
  line-height: 1.35;

  font-weight: 700;
}

/* =========================================================
   LIST
   ========================================================= */

.clients-list {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  min-width: 0;

  margin: 0;
  padding: 0;
}

/* =========================================================
   CLIENT
   ========================================================= */

.clients-client {
  display: block;

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

  margin: 0;
  padding: 0;

  color: #fff;

  font-size: 18px;
  line-height: 1.35;

  font-weight: 400;
  overflow-wrap: anywhere;

  transition:
    color .2s ease,
    opacity .2s ease;
}

/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  .clients-group:hover
  .clients-client:not(:hover) {
    opacity: .3;
  }

  a.clients-client:hover,
  a.clients-client:focus-visible {
    color: var(--berry);
  }

}

/* =========================================================
   RESPONSIVE PAGE WIDTH
   ========================================================= */

@media (max-width: 1260px) {

  .clients-page {
    width: calc(100% - 60px);

    padding-top: 70px;
    padding-bottom: 100px;
  }

}

/* =========================================================
   MOBILE
   NUR NOCH 2 SPALTEN

   | MAJOR | INDEPENDENT |
   ========================================================= */

@media (max-width: 700px) {

  .clients-page {
    width: calc(100% - 40px);

    padding-top: 45px;
    padding-bottom: 90px;
  }

  /* -------------------------------------------------------
     TYPO
     ------------------------------------------------------- */

  .clients-letter {
    font-size: 17px;
    line-height: 1.35;

    font-weight: 700;
  }

  .clients-client {
    font-size: 18px;
    line-height: 1.35;
  }

}

/* =========================================================
   CLIENT ROSTER — eine Liste in Spalten (aktuell)
   Große und kleine Labels als EINE Liste.
   Der Browser verteilt die Buchstabengruppen von oben nach
   unten auf die Spalten; eine Gruppe wird nie getrennt.
   Zwischen den Buchstaben steht eine Leerzeile, die Buchstaben
   sind so groß wie die Zahlen bei Airplay Peaks.
   ========================================================= */

.clients-all {
  columns: 6;
  column-gap: 30px;   /* vorher 42px → mehr Platz für die Namen */
  width: 100%;
}

.clients-all .clients-group {
  break-inside: avoid;
  margin: 0 0 var(--letter-gap, 24px);   /* = eine Leerzeile (18px × 1.35) */
}

@media (max-width: 1260px) {
  .clients-all { columns: 5; }
}
@media (max-width: 1000px) {
  .clients-all { columns: 4; column-gap: 34px; }
}
@media (max-width: 700px) {
  .clients-all { columns: 2; column-gap: 30px; }
}
@media (max-width: 420px) {
  .clients-all { column-gap: 20px; }
}

/* Buchstaben im Stil der Airplay-Peaks-Zahlen (.chart-position) –
   Aufteilung der Liste bleibt wie vorher */
.clients-all .clients-group {
  grid-template-columns: var(--big-letter-col, 34px) minmax(0, 1fr);
  column-gap: 8px;
}
.clients-all .clients-letter {
  color: var(--berry);
  font-size: 38px;
  line-height: .8;
  font-weight: 600;
  letter-spacing: -.05em;
  padding-top: 3px;
}

/* Bricht ein Name um, stehen seine Zeilen eng zusammen –
   zwischen den Namen bleibt etwas Luft. So sieht man, was
   zusammengehört (Abstand pro Name bleibt etwa wie vorher). */
.clients-all .clients-client {
  line-height: 1.12;
  padding: 2px 0 3px;
}

@media (max-width: 1100px) {
  .clients-all .clients-letter { font-size: 34px; }
}
@media (max-width: 700px) {
  .clients-all .clients-group { --big-letter-col: 28px; column-gap: 8px; }
  .clients-all .clients-letter { font-size: 30px; }
}