/* Startseite (25.10.2026, Philipp: „ich will auch ne zeile mit über 100 Kunden … im Slide“, Vorlage
   assi/2026-10-25 vorlage-startseite-logoleiste.webp): Logoleiste zwischen Intro (Mission/Passion/Vision) und Kartenraster.
   Satz mittig, darunter die Kundenlogos als Endlosband (drei gleiche Sätze, Band läuft um ein Drittel, dann nahtlos von vorn),
   Ränder weich ausgeblendet, hält beim Überfahren an. Logos aus den Kundenlogo-Kacheln von /kreativagentur/, auf den Inhalt
   zugeschnitten (public/bilder/kundenlogos/); --h je Logo = Höhe bei gleicher Fläche wie ein 3:1-Logo mit 34 px. */
.kl{background:#fff;overflow:clip}
.kl__wrap{width:80%;max-width:1620px;margin:0 auto;padding:0 0 clamp(56px,6vw,96px)}
.kl__text{margin:0 0 clamp(24px,2.8vw,44px);font-size:15px;line-height:1.6;color:#5e5e5e;text-align:center;text-wrap:balance}
.kl__text strong{font-weight:600;color:#0a0a0a}
.kl__band{--s:1.15;--abstand:clamp(48px,6vw,104px);overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.kl__spur{display:flex;align-items:center;width:max-content;margin:0;padding:0;list-style:none;animation:kl-laufen 42s linear infinite}
.kl__spur li{flex:0 0 auto;margin-right:var(--abstand);line-height:0}
.kl__spur img{display:block;width:auto;height:calc(var(--h) * var(--s))}
.kl__band:hover .kl__spur{animation-play-state:paused}
@keyframes kl-laufen{from{transform:translate3d(0,0,0)}to{transform:translate3d(-33.3333%,0,0)}}

@media (max-width:759px){
  .kl__band{--s:.8;--abstand:40px}
  .kl__spur{animation-duration:30s}
  .kl__text{font-size:14px}
}
/* Ohne Bewegung: ein Satz, mittig umbrechend */
@media (prefers-reduced-motion:reduce){
  .kl__band{-webkit-mask-image:none;mask-image:none}
  .kl__spur{animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:24px 0}
  .kl__spur li{margin:0 calc(var(--abstand) / 3)}
  .kl__spur li[aria-hidden="true"]{display:none}
}

/* Satz links neben den Logos (Philipp 25.10.2026: „überschrift nach links neben die logos“), mobil darüber */
.kl__wrap{display:flex;align-items:center;gap:clamp(32px,4vw,72px)}
.kl__text{flex:0 0 auto;max-width:none;margin:0;font-size:16px;text-align:left;white-space:nowrap}  /* zweizeilig über <br> (Philipp 25.10.2026: „text zweizeilig“) */
.kl__band{flex:1 1 auto;min-width:0}
@media (max-width:759px){
  .kl__wrap{flex-direction:column;align-items:stretch;gap:20px}
  .kl__text{max-width:none;font-size:14px}
}

/* Google-Bewertung unter „Wir gestalten Erlebnisse“ (Philipp 25.10.2026: „★★★★★ 35 Bewertungen mit 5,0 mit G-Logo darunter“,
   danach „farblos, einzeilig“: G-Logo und Sterne schwarz, alles in einer Zeile) */
.hero-bewertung{display:flex;width:max-content;max-width:100%;align-items:center;gap:10px;margin:-8px 0 8px;color:#0a0a0a;text-decoration:none}
.hero-bewertung__g{width:20px;height:20px;flex:none}
.hero-bewertung__g path{fill:currentColor}
.hero-bewertung__text{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.2;color:#5e5e5e;white-space:nowrap}
.hero-bewertung__text strong{font-weight:600;color:#0a0a0a}
.hero-bewertung__sterne{color:#0a0a0a;font-size:14px;letter-spacing:2px;line-height:1}
.hero-bewertung:hover .hero-bewertung__text>span:last-child{text-decoration:underline;text-underline-offset:3px}
.hero-bewertung:focus-visible{outline:2px solid #0a0a0a;outline-offset:4px;border-radius:6px}