/* ===== Logo Slider (Kunden) – gescoptet auf .nsm-logos ===== */
.nsm-logos{
  --purple:#7F37CA;
  --purple-deep:#7F30D6;
  --purple-ink:#170526;
  --yellow:#FFDE32;
  --orange:#FFC240;
  --white:#ffffff;
  --ease:cubic-bezier(.22,1,.36,1);

  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  position:relative;
  overflow:hidden;
  background:var(--purple-ink);
  color:var(--white);
  font-family:'Archivo',system-ui,sans-serif;
  padding:var(--nsm-logos-ptop,80px) 0 68px;
}
/* dezenter Glow oben, damit es nahtlos unter einem dunklen Hero sitzt */
.nsm-logos::before{content:"";position:absolute;left:50%;top:-40%;width:120%;height:90%;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(127,55,202,.28),transparent 70%);pointer-events:none;}

.nsm-logos .wrap{max-width:1240px;margin:0 auto;padding:0 36px;width:100%;}

.nsm-logos .logos-head{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:44px;text-align:center;}
.nsm-logos .logos-head .kick{font-weight:800;text-transform:uppercase;letter-spacing:.16em;font-size:13.5px;color:rgba(255,255,255,.72);white-space:nowrap;}
.nsm-logos .logos-head .kick b{color:var(--yellow);font-weight:800;}
.nsm-logos .logos-head .rule{height:1px;flex:1;max-width:180px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22));}
.nsm-logos .logos-head .rule.r{background:linear-gradient(90deg,rgba(255,255,255,.22),transparent);}

/* Marquee-Viewport mit weichem Rand-Fade.
   background/border/padding/color explizit zurücksetzen, damit die ungescopte
   .marquee-Regel aus widgets.css (gelbes Hero-Laufband) hier NICHT durchschlägt. */
.nsm-logos .marquee{position:relative;z-index:2;overflow:hidden;background:transparent;border:0;padding:0;margin:0;color:inherit;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
.nsm-logos .track{display:flex;align-items:center;width:max-content;gap:0;animation:nsmlogosscroll var(--nsm-logos-dur,42s) linear infinite;will-change:transform;}
@keyframes nsmlogosscroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.nsm-logos .track{animation:none;}}

.nsm-logos .logo-set{display:flex;align-items:center;}

/* Logo-Kachel: feste Box (Kachel-Größe) + Logo-Füllung/Zoom.
   hellere Karte (#2A163A), damit dunkle Logos nicht im Grund verschwinden. */
.nsm-logos .slide{flex:0 0 auto;width:var(--nsm-logos-w,220px);height:var(--nsm-logos-h,118px);margin:0 12px;display:flex;align-items:center;justify-content:center;padding:var(--nsm-logos-pad,16px 20px);border:1px solid rgba(255,255,255,.10);border-radius:18px;background:#2A163A;overflow:hidden;transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);}
.nsm-logos a.slide{text-decoration:none;color:inherit;}
.nsm-logos .slide img{width:100%;height:100%;object-fit:contain;display:block;opacity:.85;transform:scale(var(--nsm-logos-fill,1));transform-origin:center;transition:opacity .3s var(--ease),filter .3s var(--ease);}
.nsm-logos .slide-ph{font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.42);text-align:center;}

/* Graustufen-Optik (umschaltbar) – dauerhaft */
.nsm-logos.is-grayscale .slide img{filter:grayscale(1);opacity:.8;}

/* Hover: leichtes Anheben + subtiler Glow/Border, Logo auf volle Deckkraft.
   Das Band läuft dabei weiter (kein Pausieren). */
.nsm-logos .slide:hover{transform:translateY(-4px);border-color:rgba(255,222,50,.45);box-shadow:0 14px 34px -16px rgba(0,0,0,.65),0 0 0 1px rgba(255,222,50,.12);}
.nsm-logos .slide:hover img{opacity:1;filter:none;}

/* CTA-Fußnote */
.nsm-logos .logos-note{position:relative;z-index:2;text-align:center;margin-top:46px;font-size:14.5px;color:rgba(255,255,255,.6);font-weight:600;}
.nsm-logos .logos-note b{color:#fff;font-weight:800;}
.nsm-logos .logos-note a{color:var(--yellow);text-decoration:none;}
.nsm-logos .logos-note a:hover{color:var(--orange);}

@media(max-width:560px){
  .nsm-logos .wrap{padding:0 20px;}
  .nsm-logos .slide{width:168px;height:96px;margin:0 8px;padding:18px 20px;}
  .nsm-logos .logos-head .rule{max-width:60px;}
}