/* ==========================================================================
   Kundenleiste: Logo-Laufband plus Kennzahlen.

   Eigene Datei, weil sie von zwei Seiten mit voellig unterschiedlichem
   CSS-Aufbau gebraucht wird: / haelt ihr CSS inline, /training laedt
   page.css. Bis 04.08.2026 stand der Block doppelt, einmal hier und einmal
   inline auf der Startseite. Der Fix am Laufband landete nur in einer der
   beiden Fassungen, live liefen zwei Logo-Zeilen uebereinander.

   Setzt die Tokens aus page.css bzw. dem Inline-CSS der Startseite voraus
   (--schwarz, --line-on-dark, --text-on-dark, --t-int, --ease).
   ========================================================================== */

/* --- Kundenleiste + Kennzahlen ----------------------------------------
   Sitzt direkt unter dem Hero und sichert das Versprechen ab, bevor der
   Leser weiterscrollt. Aufbau nach den Referenzen utewagner.de/webinar und
   wachstumspartner.io/perpetuum.

   ⚠️ Die Logodateien sind WEISS auf transparentem Grund. Sie funktionieren
   deshalb ausschliesslich auf dunklem Untergrund. `.proofbar` traegt darum
   fest `--schwarz`, das ist keine Stilfrage, sondern Voraussetzung dafuer,
   dass man sie ueberhaupt sieht.

   Kein Graustufenfilter noetig: die Dateien sind bereits monochrom und
   verletzen die Sechs-Farben-Regel aus DT-DESIGN.md L113 nicht. Wer spaeter
   ein farbiges Logo ergaenzt, setzt `filter:grayscale(1) brightness(0)
   invert(1)` auf genau dieses Bild, dann passt es sich ein.
--------------------------------------------------------------------- */
.proofbar{
  padding:clamp(32px,4vw,52px) 0;
  background:var(--schwarz);color:var(--text-on-dark);
}
.proofbar__label{
  text-align:center;font-size:.75rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-on-dark-mute);margin-bottom:26px;
}
/* --- Laufband ----------------------------------------------------------
   Alle Logos in EINER Reihe, endlos durchlaufend. Der Satz steht zweimal im
   Markup, die zweite Haelfte ist `aria-hidden`, damit Screenreader die Namen
   nicht doppelt vorlesen. Animiert wird ausschliesslich `transform`, nie
   `margin` oder `left` (AI-Slop-Blacklist, DT-DESIGN.md L118).

   WICHTIG: `.proofbar__track` MUSS `display:flex` sein. Ohne das sind die
   beiden Saetze zwei Bloecke untereinander und man sieht zwei Logo-Zeilen
   statt einer. Genau dieser Fehler war live.

   Verschoben wird um -100 % der EIGENEN Breite, nicht um -50 %. -50 %
   waere richtig, wenn beide Saetze in einem gemeinsamen animierten
   Element haengen. Hier animiert jeder Satz fuer sich: Satz 1 wandert um
   seine volle Breite nach links, Satz 2 rueckt exakt an dessen Startplatz.
   Der Abstand zur naechsten Kopie steckt als `padding-right` IM Satz, denn
   ein `gap` auf dem Track wuerde am Umschlagpunkt einen sichtbaren Versatz
   von genau einer Luecke erzeugen.
--------------------------------------------------------------------- */
.proofbar__track{
  display:flex;
  overflow:hidden;
  /* Weiche Kanten links und rechts, damit die Logos nicht abgeschnitten
     wirken, sondern aus dem Nichts kommen. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.proofbar__logos{
  display:flex;align-items:center;flex:none;
  width:max-content;
  gap:var(--marquee-luecke,clamp(30px,3.4vw,58px));
  padding-right:var(--marquee-luecke,clamp(30px,3.4vw,58px));
  /* Dauer skaliert mit der Anzahl der Logos: --marquee-dauer im Markup
     setzen, falls Logos dazukommen. */
  animation:proofbar-lauf var(--marquee-dauer,22s) linear infinite;
  will-change:transform;
}
@keyframes proofbar-lauf{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-100%,0,0)}
}
/* Anhalten, wenn der Nutzer hinsieht. Ein Band, das man nicht lesen kann,
   ist Dekoration statt Beweis. */
.proofbar__track:hover .proofbar__logos,
.proofbar__track:focus-within .proofbar__logos{animation-play-state:paused}

@media (prefers-reduced-motion: reduce){
  /* Kein Band, sondern ein ruhiger Umbruch. Der doppelte Satz wird
     ausgeblendet, sonst stehen alle Logos zweimal da. Der Track faellt auf
     Block zurueck, damit der eine Satz die volle Breite umbrechen kann. */
  .proofbar__track{display:block;-webkit-mask-image:none;mask-image:none}
  .proofbar__logos{
    animation:none;width:auto;flex-wrap:wrap;justify-content:center;
    padding-right:0;
  }
  .proofbar__logos[aria-hidden="true"]{display:none}
}
.proofbar__logo{
  /* Optisch gleiche Groesse ueber sehr unterschiedliche Seitenverhaeltnisse
     (2,9:1 bis 5,6:1). Hoehe fixiert, Breite gedeckelt, damit ein sehr
     breites Logo die schmalen nicht erschlaegt. */
  height:clamp(32px,3.2vw,46px);
  width:auto;max-width:230px;object-fit:contain;
  opacity:.78;
  transition:opacity var(--t-int) var(--ease);
}
.proofbar__logo:hover{opacity:1}
/* Textfassung als Rueckfallebene, falls fuer einen Kunden keine Datei existiert */
.proofbar__name{
  font-size:clamp(15px,1.35vw,19px);font-weight:600;letter-spacing:.04em;
  color:var(--text-on-dark-mute);white-space:nowrap;
}

/* Kennzahlen innerhalb der dunklen Leiste */
.proofbar .proofstats,.proofbar .proofstats>div{border-color:var(--line-on-dark)}
.proofbar .proofstats__label{color:var(--text-on-dark-mute)}
.proofbar__disclaimer{margin-top:18px;font-size:.8125rem;color:var(--grau)}

.proofstats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border-top:1px solid var(--line);margin-top:clamp(26px,3.4vw,40px);
}
@media(min-width:820px){.proofstats{grid-template-columns:repeat(4,1fr)}}
.section--dark .proofstats,.section--dark .proofstats>div{border-color:var(--line-on-dark)}
.proofstats>div{
  padding:22px 20px 22px 0;border-bottom:1px solid var(--line);
}
@media(min-width:820px){
  .proofstats>div{border-bottom:0;border-right:1px solid var(--line);padding-left:24px}
  .proofstats>div:first-child{padding-left:0}
  .proofstats>div:last-child{border-right:0}
}
.proofstats__num{
  font-size:clamp(26px,2.8vw,36px);font-weight:600;line-height:1.05;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-bottom:6px;
}
.proofstats__label{font-size:.875rem;line-height:1.45;color:var(--text-mute)}