/* WG Bausteine: Widget „logos“. Quelle: startseite-2026/v3/parts/logos.html (style-Block unverändert, nur Medienpfade auf assets/media). */
/* ================= LOGOS (v3) ================= */
#logos.v3-sec{padding:clamp(40px,5vw,64px) 0 clamp(72px,8vw,112px)}
#logos .logos-line{display:flex;justify-content:center;margin:0 0 clamp(28px,3.4vw,40px)}
#logos .logos-line .v3-pill{margin:0}
#logos .logos-grid{list-style:none;margin:0 auto;padding:0;max-width:1080px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line);-webkit-mask-image:radial-gradient(ellipse 62% 120% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 62% 120% at 50% 50%,#000 55%,transparent 100%)}
#logos .logos-item{display:flex;align-items:center;justify-content:center;height:108px;padding:0 14px;background:var(--bg)}
#logos .logos-item img{display:block;width:calc(var(--lw,120) * 1px);height:auto;max-width:100%;object-fit:contain;filter:brightness(0);opacity:.55;transition:opacity .35s var(--ease)}
#logos .logos-item:hover img{opacity:.85}
@media (max-width:900px){
  #logos .logos-grid{grid-template-columns:repeat(3,minmax(0,1fr));-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 60%,transparent 100%)}
  #logos .logos-item{height:86px;padding:0 10px}
  #logos .logos-item img{width:calc(var(--lw,120) * .7px)}
  #logos .logos-item--nur-desktop{display:none}
}
@media (max-width:420px){
  #logos .logos-item{height:74px;padding:0 8px}
  #logos .logos-item img{width:calc(var(--lw,120) * .6px)}
}
/* Einblenden nur am Logo, damit die Kachelflaeche (Haarlinien-Raster) nie als graue Flaeche durchscheint */
.js #logos .logos-item.wgfx-in{opacity:1;transform:none}
.js #logos .logos-item.wgfx-in img{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:inherit}
.js #logos .logos-item.wgfx-in.is-in img{opacity:.55;transform:none}
.js #logos .logos-item.wgfx-in.is-in:hover img{opacity:.85;transition-delay:0s}
/* Schmale Wortmarke (Lux-Team) etwas breiter und kräftiger, damit sie neben den Bildmarken nicht leichter wirkt */
#logos .logos-item--wide{padding:0 4px}
#logos .logos-item--wide img,.js #logos .logos-item--wide.wgfx-in.is-in img{opacity:.72}
html.wgb-late #logos .logos-item.wgfx-in img{opacity:.55;transform:none;transition:none}
html.wgb-late #logos .logos-item--wide.wgfx-in img{opacity:.72}
@media (prefers-reduced-motion:reduce){#logos .logos-item img,.js #logos .logos-item.wgfx-in img{transition:none}.js #logos .logos-item.wgfx-in img{opacity:.55;transform:none}}