/* ==========================================================================
   Baustein: Kundennamen-Leiste (Sektion 2)
   Datei: css/bausteine/kundennamen-leiste.css
   Gebraucht auf: index.html
   Bauvorschrift: DESIGN.md, Baustein "Kundennamen-Leiste", N17
   Regeln: docs/entwicklung.md. Klassen-Präfix dieser Datei siehe unten,
   Tokens und Rollen kommen aus css/style.css und werden hier nicht neu definiert.

   ABWEICHUNG VON DER BAUVORSCHRIFT (2026-09-09)
   DESIGN.md beschreibt die Leiste als "umbrechend", also als mittig gesetzte,
   mehrzeilige Zeile. Gebaut ist sie als umlaufendes Marquee, einzeilig. Alles
   andere bleibt: Haarlinie oben und unten, mindestens 72 px, Abstand 27 px,
   Rolle `label`, Farbe --muted, Trenner das 4-px-Quadrat in --blue um 45 Grad.
   Die Übernahme gehört in eine Phase-4-Session.

   POSITION (2026-09-14): Die Leiste steht auf Weisung Christian Hansmann direkt vor
   der Referenzen-Sektion, nicht mehr unter der Hero-Bühne. Der margin-top von 10 px
   stammt aus der Vorlage (Abstand zur Bühne) und bleibt, er fällt zwischen zwei
   Sektionen mit eigener Polsterung nicht ins Gewicht.

   Bewegung, D10: Die Animation läuft ohne JavaScript. Bei
   prefers-reduced-motion: reduce bewegt sich nichts, dann fällt die Leiste auf
   die umbrechende Fassung der Bauvorschrift zurück und zeigt alle Namen. Zeigen
   im Stillstand ist Pflicht, weil der globale Reduce-Block in css/style.css
   Animationen nur auf 0.01 ms kürzt: ohne diesen Rückfall stünde die Spur am
   Anfang und der Rest wäre abgeschnitten.
   ========================================================================== */

/* Präfix: .trust-strip, .trust-bar, .trust-viewport, .trust-track, .trust-set */
/* Seit D20 (2026-09-14) ist die Sektion der Kopf der Referenzen-Fläche: --paper,
   gerundete Kante und Versatz kommen aus style.css (.surface). Die Leiste selbst ist
   .trust-bar und trägt die Haarlinien, sie läuft weiter von Kante zu Kante. Der
   margin-top von 10 px aus der Vorlage ist entfallen, das Sektionspolster übernimmt. */
.trust-strip { padding-top: var(--sec-top); }
.trust-bar {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  min-height: 72px;
  display: flex; align-items: center;
  padding: 18px 0;
  color: var(--muted);
}
/* Eigenes Element für Ausschnitt und weiche Kanten. Die Maske darf nicht auf
   .trust-strip sitzen, sonst faden die Haarlinien oben und unten an den Rändern
   mit aus, und die stehen in der Bauvorschrift. */
.trust-viewport {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* Die Spur trägt beide Sätze und wird um genau 50 Prozent verschoben. Das ist
   lückenlos, solange beide Sätze identisch sind und der Abstand zwischen ihnen
   im Satz steckt (padding-right), nicht als gap auf der Spur. */
.trust-track {
  display: flex; width: max-content;
  animation: trust-scroll 60s linear infinite;
}
.trust-set {
  flex: none;
  display: flex; align-items: center;
  gap: 27px; padding-right: 27px;
}
.trust-set i {
  width: 4px; height: 4px; background: var(--blue);
  transform: rotate(45deg); flex: none;
}
@keyframes trust-scroll { to { transform: translateX(-50%); } }

/* Anhalten beim Überfahren, damit ein Name gelesen werden kann */
.trust-bar:hover .trust-track { animation-play-state: paused; }

@media (max-width: 640px) {
  .trust-bar { min-height: 64px; padding: 14px 0; }
  .trust-set { gap: 16px; padding-right: 16px; }
  .trust-track { animation-duration: 44s; }
}

/* Reduzierte Bewegung: zurück auf die umbrechende Fassung der Bauvorschrift.
   Der zweite Satz ist nur für den Umlauf da und fällt weg, sonst stünde jeder
   Name doppelt auf der Seite. */
@media (prefers-reduced-motion: reduce) {
  .trust-bar { padding: 18px 24px; }
  .trust-viewport {
    overflow: visible;
    -webkit-mask-image: none; mask-image: none;
  }
  .trust-track {
    animation: none; width: auto;
    flex-wrap: wrap; justify-content: center; flex: 1;
  }
  .trust-set {
    flex: 0 1 auto; flex-wrap: wrap; justify-content: center; padding-right: 0;
  }
  .trust-set + .trust-set { display: none; }
}