/* Logo-Raster: zentrierter Fluss, unvollständige Reihen stehen mittig. */
.logo-3-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.logo-3-cell {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.5rem;
  padding: 1rem;
}

@media (min-width: 640px) {
  .logo-3-cell { flex-basis: 33.3333%; }
}

@media (min-width: 1024px) {
  .logo-3-grid--cols-3 .logo-3-cell { flex-basis: 33.3333%; }
  .logo-3-grid--cols-4 .logo-3-cell { flex-basis: 25%; }
  .logo-3-grid--cols-5 .logo-3-cell { flex-basis: 20%; }
  .logo-3-grid--cols-6 .logo-3-cell { flex-basis: 16.6667%; }
}

/* Wenige Logos (z. B. Agenturpartner) nicht über die volle Breite verteilen. */
@media (min-width: 1024px) {
  .logo-3-grid--cols-3 { max-width: 48rem; margin-inline: auto; }
  /* Partnerreihe (4) steht in den Spalten 2 bis 5 des 6er-Kundenrasters. */
  .logo-3-grid--cols-4 { max-width: 66.6667%; margin-inline: auto; }
}

.logo-3-heading { text-wrap: balance; }
.logo-3-grid { margin-top: 1rem; }

/* Optischer Ausgleich (UX-Prüfung 15.10.2026): jedes Logo bekommt dieselbe Fläche statt derselben Box,
   breite Wortmarken und kompakte Signets wirken so gleich schwer. --w/--h setzt das Template aus den
   Dateimaßen, --f korrigiert Ausreißer. Ohne sqrt()-Unterstützung gelten nur max-width/max-height. */
.logo-3-cell { min-width: 0; }

.logo-3-img {
  --area: 3600;
  --f: 1;
  --ar: calc(var(--w, 3) / var(--h, 1));
  display: block;
  width: calc(max(sqrt(var(--area) * var(--ar)) * 1px, min(120px, var(--ar) * 28px)) * var(--f));
  height: auto;
  max-width: min(150px, 100%);
  max-height: 3.5rem;
  object-fit: contain;
  filter: grayscale(1) contrast(1.4) brightness(var(--b, 0.8));
  opacity: 0.9;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

/* Korrekturfaktoren aus gemessener Tintenfläche je Logo (Messskript: Recherche/2026-10-15-ux-pruefung-logo-raster.md):
   f = f_alt * (Median / eigene Tinte)^0.25, begrenzt auf 0,8 bis 1,4. Faktor 1 ist weggelassen. */
.logo-3-img[src*="/electrolux-professional."], .logo-3-img[src*="csm_electrolux-professional_"] { --f: 1.16; } /* Electrolux Professional */
.logo-3-img[src*="/suco."], .logo-3-img[src*="csm_suco_"] { --f: 1.14; } /* SUCO */
.logo-3-img[src*="/fliegl-fahrzeugbau-marke."], .logo-3-img[src*="csm_fliegl-fahrzeugbau-marke_"] { --f: 0.97; } /* Fliegl Fahrzeugbau */
.logo-3-img[src*="/blaser."], .logo-3-img[src*="csm_blaser_"] { --f: 1.05; } /* Blaser Jagdwaffen */
.logo-3-img[src*="/roto-marke."], .logo-3-img[src*="csm_roto-marke_"] { --f: 0.97; } /* Roto */
.logo-3-img[src*="/bvbs."], .logo-3-img[src*="csm_bvbs_"] { --f: 1.37; } /* Bundesverband Bausysteme */
.logo-3-img[src*="/fliegl-agro-center."], .logo-3-img[src*="csm_fliegl-agro-center_"] { --f: 1.11; } /* Fliegl Agro-Center */
.logo-3-img[src*="/bott."], .logo-3-img[src*="csm_bott_"] { --f: 0.96; } /* bott */
.logo-3-img[src*="/hangler-marke."], .logo-3-img[src*="csm_hangler-marke_"] { --f: 0.96; } /* Hangler Fahrzeugbau */
.logo-3-img[src*="/world-translation-marke."], .logo-3-img[src*="csm_world-translation-marke_"] { --f: 1.22; } /* World Translation */
.logo-3-img[src*="/fliegl-agrartechnik."], .logo-3-img[src*="csm_fliegl-agrartechnik_"] { --f: 0.88; } /* Fliegl Agrartechnik */
.logo-3-img[src*="/schreinerei-stuetzle-mono."], .logo-3-img[src*="csm_schreinerei-stuetzle-mono_"] { --f: 1.04; } /* Schreinerei Stützle */
.logo-3-img[src*="/timberspace."], .logo-3-img[src*="csm_timberspace_"] { --f: 1.23; } /* TIMBERSPACE */
.logo-3-img[src*="/tierschutzverein-wangen-t."], .logo-3-img[src*="csm_tierschutzverein-wangen-t_"] { --f: 1.14; } /* Tierschutzverein Wangen */
.logo-3-img[src*="/zuka."], .logo-3-img[src*="csm_zuka_"] { --f: 0.86; } /* zuka */
.logo-3-img[src*="/charmant-wortmarke."], .logo-3-img[src*="csm_charmant-wortmarke_"] { --f: 1.11; } /* Charmant */
.logo-3-img[src*="/strolit."], .logo-3-img[src*="csm_strolit_"] { --f: 0.82; } /* Strolit */
.logo-3-img[src*="/cellofoam."], .logo-3-img[src*="csm_cellofoam_"] { --f: 1.12; } /* Cellofoam */
.logo-3-img[src*="/we-are-light."], .logo-3-img[src*="csm_we-are-light_"] { --f: 1.15; } /* we are light */
.logo-3-img[src*="/starcode."], .logo-3-img[src*="csm_starcode_"] { --f: 0.9; } /* starcode */
.logo-3-img[src*="/punkt-pixel."], .logo-3-img[src*="csm_punkt-pixel_"] { --f: 1.1; } /* Punkt + Pixel */
.logo-3-img[src*="/tbke-positiv."], .logo-3-img[src*="csm_tbke-positiv_"] { --f: 0.8; } /* Team by Krämer Eckl */
.logo-3-img[src*="/werbebuero-march."], .logo-3-img[src*="csm_werbebuero-march_"] { --f: 0.8; } /* Werbebüro March */
.logo-3-img[src*="/magnet-agentur."], .logo-3-img[src*="csm_magnet-agentur_"] { --f: 0.97; } /* MAGNET Agentur */

/* Tonwert angleichen: hellgraue Logos dunkler, das T im Tierschutzverein-Logo ist in der Datei dunkel gesetzt. */
.logo-3-img[src*="/fliegl-agrartechnik."], .logo-3-img[src*="csm_fliegl-agrartechnik_"],
.logo-3-img[src*="/hangler-marke."], .logo-3-img[src*="/punkt-pixel."],
.logo-3-img[src*="world-translation-marke"] { --b: 0.55; }
.logo-3-img[src*="/strolit."], .logo-3-img[src*="csm_strolit_"],
.logo-3-img[src*="world-translation-marke"] { --b: 0.4; }

.logo-3-cell:hover .logo-3-img,
.logo-3-cell:focus-within .logo-3-img {
  filter: none;
  opacity: 1;
}

/* Alte Kleinformat-Logos (115x67): nie hochskalieren, height/width auto halten die natürliche Größe als Obergrenze. */
.logo-legacy {
  max-width: min(115px, 100%);
}

/* Hochformat-Logos: mehr Höhe, damit sie optisch so groß wirken wie Querformate. */
.logo-tall {
  max-height: 3.25rem;
}

@media (max-width: 639px) {
  .logo-3-img[src*="/zuka."] { --f: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-3-img { transition: none; }
}