/* Modul „logos“ (module/logos). Nur Tokens: --bm-* (Website), --bb-* (Bausteine,
   Ton-Regel). Werte übernommen aus seiten/module/d2d.css (Marken-Leiste,
   Logo-Band aus „Portfolio Kunden“, helles Laufband). Breakpoints der
   Hausliste: 640 / 1024 (max: 639). Kein Browser-JS: Laufband = CSS-Animation,
   Pause = Kontrollkästchen im Knopf-Gewand (:has). */

.bb-m-logos {
  --bb-m-logos-hoehe: clamp(5rem, 7vw, 7rem);
  --bb-m-logos-logo: clamp(1.75rem, 2.4vw, 2.5rem);
  --bb-fokus-versatz: var(--bm-fokus-versatz-innen);
  overflow-x: clip;   /* das Band darf bis an den Fensterrand laufen, nie querscrollen */
  scroll-margin-top: 6rem;
}
.bb-m-logos--dicht {
  --bb-m-logos-hoehe: clamp(3.75rem, 5vw, 4.5rem);
  --bb-m-logos-logo: clamp(1.5rem, 2vw, 2rem);
}
/* Kunden- und Partner-Logos: feste Logohöhe (Richtwert 36–44 px), schmales Band. */
.bb-m-logos--einfarbig {
  --bb-m-logos-hoehe: clamp(4.5rem, 6vw, 6rem);
  --bb-m-logos-logo: 36px;
}
@media (min-width: 1024px) {
  .bb-m-logos--einfarbig { --bb-m-logos-logo: 44px; }
}
.bb-m-logos--laufband {
  --bb-sektion-abstand: var(--bm-sektion-halb);
  --bb-kopf-abstand: 0rem;
}
.bb-m-logos--laufband .bb-kopf__titel { font-size: var(--bm-t-h3); letter-spacing: var(--bm-sp-leicht); }
.bb-m-logos--laufband .bb-kopf { margin-bottom: 0; }

/* ── Marke ──────────────────────────────────────────────────────────────── */
.bb-m-logos__marke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-width: 2.75rem; /* Zielgröße (WG-A11Y) */
  color: var(--bb-text-ruhig);
  text-decoration: none;
  transition: color var(--bm-dauer-kurz) var(--bm-ease), opacity var(--bm-dauer-kurz) var(--bm-ease),
    filter var(--bm-dauer-kurz) var(--bm-ease);
}
.bb-m-logos__wort {
  font-family: var(--bm-font);
  font-size: var(--bm-t-h4);
  font-weight: var(--bm-g-mittel);
  line-height: var(--bm-zh-titel);
  letter-spacing: var(--bm-sp-leicht);
  text-align: center;
  overflow-wrap: break-word;
  hyphens: manual;
  text-wrap: balance;
}
.bb-m-logos--dicht .bb-m-logos__wort { font-size: var(--bm-t-body); font-weight: var(--bm-g-fett); }
.bb-m-logos__bild {
  display: block;
  height: var(--bb-m-logos-logo);
  width: auto;
  max-width: min(10rem, 100%);
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.62;
  transition: inherit;
}
a.bb-m-logos__marke:is(:hover, :focus-visible) { color: var(--bb-text); }
a.bb-m-logos__marke:is(:hover, :focus-visible) .bb-m-logos__bild { filter: none; opacity: 1; }
a.bb-m-logos__marke:focus-visible { outline: var(--bm-fokus-breite) solid var(--bb-fokus); outline-offset: var(--bm-fokus-versatz-innen); }

/* Einfarbig: auf Hell dunkel, auf Dunkel hell – allein per Filter (die
   Prüfung im Build sortiert Logos mit deckendem Hintergrund vorher aus). */
.bb-m-logos--einfarbig .bb-m-logos__bild,
.bb-m-logos--einfarbig a.bb-m-logos__marke:is(:hover, :focus-visible) .bb-m-logos__bild { filter: brightness(0); opacity: 0.72; max-width: 11rem; }
.bb-m-logos--einfarbig a.bb-m-logos__marke:is(:hover, :focus-visible) .bb-m-logos__bild { opacity: 1; }
.bb-m-logos:is([data-ton='dunkel'], [data-ton='bild']).bb-m-logos--einfarbig .bb-m-logos__bild,
.bb-m-logos:is([data-ton='dunkel'], [data-ton='bild']).bb-m-logos--einfarbig a.bb-m-logos__marke:is(:hover, :focus-visible) .bb-m-logos__bild { filter: brightness(0) invert(1); }

/* ── Raster (stehend) ───────────────────────────────────────────────────── */
.bb-m-logos__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--bb-linie);
}
@media (min-width: 640px) {
  .bb-m-logos__raster { grid-template-columns: repeat(min(var(--bb-m-logos-anzahl), 3), minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .bb-m-logos__raster { grid-template-columns: repeat(min(var(--bb-m-logos-anzahl), 6), minmax(0, 1fr)); }
}
.bb-m-logos__raster > li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: var(--bb-m-logos-hoehe);
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--bb-linie);
}
/* Eine oder zwei Marken: linksbündig in Spalten fester Breite, Linie nur unter den Marken. */
.bb-m-logos__raster--wenig {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), max-content));
  justify-content: start;
  column-gap: var(--bb-raster-luecke);
  border-bottom: 0;
}
.bb-m-logos__raster--wenig > li { justify-content: flex-start; padding-inline: 0; border-bottom: 1px solid var(--bb-linie); }
/* Kunden-Logos: stehende Reihe ohne Linien, bündig mit dem Titel. */
.bb-m-logos--einfarbig .bb-m-logos__raster {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(2rem, 5vw, 4.5rem);
  border-bottom: 0;
}
.bb-m-logos--einfarbig .bb-m-logos__raster > li { justify-content: flex-start; padding-inline: 0; border: 0; }

/* ── Laufband ───────────────────────────────────────────────────────────── */
.bb-m-logos__huelle { position: relative; }
.bb-m-logos__band {
  display: flex;
  overflow: hidden;
  border-block: 1px solid var(--bb-linie);
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--bb-text) 6%, var(--bb-text) 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--bb-text) 6%, var(--bb-text) 94%, transparent);
}
.bb-m-logos__spur {
  display: flex;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: bb-m-logos-lauf var(--bb-m-logos-dauer, var(--bm-dauer-laufband)) var(--bm-ease-linear) infinite;
}
.bb-m-logos__spur > li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: clamp(10rem, 16vw, 15rem);
  min-height: var(--bb-m-logos-hoehe);
  padding: 0.75rem clamp(1.5rem, 3vw, 3rem);
  white-space: nowrap;
}
@media (max-width: 639px) {
  .bb-m-logos--einfarbig .bb-m-logos__spur > li { min-width: 8.5rem; padding-inline: 1rem; }
  .bb-m-logos--einfarbig .bb-m-logos__bild { max-width: 7.5rem; }
}
/* Pause: Hover, Fokus, Knopf. */
.bb-m-logos__band:hover .bb-m-logos__spur,
.bb-m-logos__band:focus-within .bb-m-logos__spur,
.bb-m-logos__huelle:has(.bb-m-logos__halt-schalter:checked) .bb-m-logos__spur { animation-play-state: paused; }
@keyframes bb-m-logos-lauf {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* Laufband über die ganze Fensterbreite, ohne Linien (Kunden-Logos). */
.bb-m-logos--einfarbig.bb-m-logos--laufband .bb-m-logos__band {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  border-block: 0;
}

/* ── Pause-Knopf (WCAG 2.2.2): Kontrollkästchen im Knopf-Gewand ──────────── */
.bb-m-logos__halt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  /* links: unten rechts schwebt die Pill „Frag KI“ (hilfe.css). */
  margin: 0.25rem auto 0 0;
  border-radius: var(--bm-radius-pille);
  color: var(--bb-text-ruhig);
  cursor: pointer;
  transition: color var(--bm-dauer-kurz) var(--bm-ease);
}
.bb-m-logos__halt:hover { color: var(--bb-text); }
.bb-m-logos__halt:has(:focus-visible) { outline: var(--bm-fokus-breite) solid var(--bb-fokus); outline-offset: var(--bm-fokus-versatz-innen); }
.bb-m-logos__halt-schalter,
.bb-m-logos__halt-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
}
.bb-m-logos__halt-zeichen--spiel,
.bb-m-logos__halt:has(:checked) .bb-m-logos__halt-zeichen--pause { display: none; }
.bb-m-logos__halt:has(:checked) .bb-m-logos__halt-zeichen--spiel { display: block; }

/* ── Hell: schmales Band ohne Kasten, Titel klein und mittig ─────────────── */
.bb-m-logos--hell {
  --bb-m-logos-hoehe: clamp(3.5rem, 5vw, 4.5rem);
  --bb-m-logos-logo: 30px;
  /* unten keine eigene Luft: die folgende Sektion bringt ihre mit; oben Platz
     für den Bereichs-Umschalter der Startbühne (ragt halb über die Kante). */
  --bb-sektion-abstand: calc(var(--bm-knopf-punkt) / 2 + var(--bm-sektion-halb));
  padding-block-end: 0;
}
@media (min-width: 1024px) {
  .bb-m-logos--hell { --bb-m-logos-logo: 36px; }
}
.bb-m-logos__titel {
  margin: 0 0 0.75rem;
  font-family: var(--bm-font);
  font-size: var(--bm-t-klein);
  font-weight: var(--bm-g-mittel);
  line-height: var(--bm-zh-mittel);
  color: var(--bb-text-ruhig);
  text-align: center;
}
.bb-m-logos--hell .bb-m-logos__band { border-block: 0; }
.bb-m-logos--hell .bb-m-logos__spur > li { min-width: 0; padding: 0.5rem clamp(1.5rem, 3vw, 3rem); }
.bb-m-logos--hell .bb-m-logos__bild { max-width: 10rem; }
.bb-m-logos--hell .bb-m-logos__raster { justify-items: center; }

/* ── Bewegung reduzieren: stehend und umbrechend, Knopf entfällt ─────────── */
@media (prefers-reduced-motion: reduce) {
  .bb-m-logos__marke, .bb-m-logos__bild, .bb-m-logos__halt { transition: none; }
  .bb-m-logos__band { flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .bb-m-logos__spur { flex-wrap: wrap; justify-content: center; flex: 1 1 100%; animation: none; }
  .bb-m-logos__spur[aria-hidden='true'] { display: none; }
  .bb-m-logos--einfarbig .bb-m-logos__spur > li[aria-hidden='true'] { display: none; }
  .bb-m-logos--einfarbig.bb-m-logos--laufband .bb-m-logos__band { width: auto; margin-inline: 0; }
  .bb-m-logos__halt { display: none; }
}