/* ===========================================================================
   Laufband der Siegel-Leiste (Max-Auftrag 17.10.2026, Session VERTRAUENSLEISTE)
   ENTWURF für den Anbau am Ende von css/bbi-site.css.

   Aufbau: Reihe 1 eigene Nachweise und Profile, Zwischenbalken "Bekannt aus",
   Reihe 2 Presse. Die Kennzahlen der Startseite stehen still darunter.

   Grundzustand ist Stillstand: ohne Skript, bei "Bewegung reduzieren", nach
   "Anhalten" und mit Tastaturfokus in einer Reihe steht die Reihe umgebrochen
   und vollständig sichtbar da (WCAG 2.2.2 Pausieren, 2.4.11 Fokus nicht
   verdeckt). Bewegt wird nur über transform (DESIGN-STANDARD 7b Regel 1).
   Die Dauerbewegung selbst ist eine bewusste Ausnahme zu 7b Regel 2 und 4
   (dort nur kurze Einblendungen) auf ausdrücklichen Max-Auftrag vom 17.10.
   Kein Verlauf an den Rändern (Brand-Verbot "keine Farbverläufe"): die Reihen
   laufen über die volle Breite und treten am Bildrand ein und aus.
   =========================================================================== */
.siegel-band.lb { --lb-abstand: clamp(32px, 3.6vw, 54px); --lb-logo-h: 30px; }
.siegel-band.lb .wrap { padding-top: 0; padding-bottom: 0; }
.lb-reihen { display: flex; flex-direction: column; gap: clamp(12px, 1.8vw, 20px);
  padding: clamp(1.6rem, 2.8vw, 2.4rem) 0 clamp(1.3rem, 2.2vw, 1.9rem); }
.lb-reihe { overflow: hidden; }

/* Stehende Fassung: umbrochen, mittig, alles sichtbar */
.lb-spur {
  list-style: none; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); max-width: 1320px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  column-gap: var(--lb-abstand); row-gap: 16px;
}
.lb-spur > li { flex: none; margin: 0; }
.lb-spur > .lb-klon { display: none; }
.lb-spur .siegel { min-height: 60px; }
.lb-spur .siegel img { max-height: none; max-width: none; height: var(--lb-logo-h); width: auto; }
.lb-spur .siegel.siegel-gestapelt { gap: 6px; }
.lb-spur .siegel.siegel-gestapelt img { width: 46px; height: 46px; }
.lb-spur .siegel img.siegel-hochkant { height: 60px; }
.lb-spur .siegel img.siegel-quadrat { height: 54px; width: 54px; }
.lb-spur .siegel .g-zeichen { width: 32px; height: 32px; }
.lb-spur .siegel .g-zahl { font-size: 1.25rem; }
.lb-spur .siegel .s-sub { font-size: 0.72rem; }
.lb-spur .siegel > a { display: inline-flex; align-items: center; border-radius: 4px; }
.lb-spur .siegel > a:focus-visible { outline: 2px solid var(--bbi-blue); outline-offset: 4px; }

/* Logos optisch angleichen: Grundhöhe, flache Wortmarken kleiner, zweizeilige größer */
.lb-spur .siegel img.lb-h-s { height: calc(var(--lb-logo-h) - 10px); }
.lb-spur .siegel img.lb-h-l { height: calc(var(--lb-logo-h) + 6px); }
/* Google-Eintrag als Link aufs Profil: sieht aus wie vorher, nur klickbar */
.lb-spur .siegel-google > a { gap: 14px; color: inherit; text-decoration: none; }

/* Presse-Reihe: Logo, darunter das Jahr des Beitrags (Fundstelle, Rechtsrecherche 17.10.).
   Wortmarken etwas flacher als die Siegel, damit keine Zeitung lauter wirkt als die
   eigenen Nachweise. */
.lb-spur .siegel-presse { min-height: 52px; }
.lb-spur .siegel-presse > a, .lb-spur .siegel-presse > .lb-ohne-link {
  flex-direction: column; gap: 5px; color: inherit; text-decoration: none; display: inline-flex; align-items: center;
}
.lb-spur .siegel-presse img { height: calc(var(--lb-logo-h) - 8px); }
.lb-spur .siegel-presse img.lb-h-s { height: calc(var(--lb-logo-h) - 14px); }
.lb-spur .siegel-presse img.lb-h-l { height: calc(var(--lb-logo-h) + 2px); }
.lb-jahr { font-size: 0.68rem; font-weight: 600; color: var(--bbi-gray); line-height: 1; font-variant-numeric: tabular-nums; }
/* Konii liefert nur eine weiße Wortmarke für dunklen Grund: unverändert auf dunkler Kachel */
.lb-spur .siegel img.lb-dunkel { background: var(--bbi-blue); padding: 4px 8px; border-radius: 4px; box-sizing: content-box; }

/* Zwischenbalken "Bekannt aus" mit Anhalten-Knopf am rechten Ende */
.lb-trenner {
  display: flex; align-items: center; gap: 14px; box-sizing: border-box;
  width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px);
}
.lb-trenner::before, .lb-trenner::after { content: ""; flex: 1 1 0; height: 1px; background: var(--bbi-blue-20); }
.lb-trenner::after { order: 2; }
.lb-titel {
  margin: 0; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bbi-blue); white-space: nowrap;
}
.lb-knopf {
  order: 3; display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 32px; padding: 4px 10px; margin: 0;
  font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--bbi-gray);
  background: #fff; border: 1px solid var(--bbi-blue-20); border-radius: 4px; cursor: pointer;
}
.lb-knopf:hover { color: var(--bbi-blue); border-color: var(--bbi-blue); }
.lb-knopf:focus-visible { outline: 2px solid var(--bbi-blue); outline-offset: 2px; }
.lb-knopf svg { width: 14px; height: 14px; fill: currentColor; }
.lb-knopf .lb-ico-start { display: none; }
.siegel-band.lb-pausiert .lb-knopf .lb-ico-start { display: block; }
.siegel-band.lb-pausiert .lb-knopf .lb-ico-pause { display: none; }
.lb-knopf[hidden] { display: none; }

/* Kennzahlen der Startseite: stehen still, eigene Trennlinie oben */
.siegel-band.lb .trust-zahlen { margin-top: 0; }

/* Laufmodus: nur wenn bbi-laufband.js die Klasse lb-an setzt, Bewegung erlaubt
   ist, nicht angehalten wurde und kein Tastaturfokus in der Reihe steht. Ohne
   :has()-Unterstützung greift die Regel nicht, die Reihe steht dann still. */
@media (prefers-reduced-motion: no-preference) {
  .siegel-band.lb-an:not(.lb-pausiert) .lb-reihe:not(:has(:focus-visible)) .lb-spur {
    flex-wrap: nowrap; justify-content: flex-start; width: max-content; max-width: none;
    margin: 0; padding: 0; column-gap: 0; overflow: visible; scroll-snap-type: none;
    animation: lb-lauf var(--lb-dauer, 60s) linear var(--lb-start, 0s) infinite;
  }
  .siegel-band.lb-an:not(.lb-pausiert) .lb-reihe:not(:has(:focus-visible)) .lb-spur > li {
    margin-inline-end: var(--lb-abstand);
  }
  .siegel-band.lb-an:not(.lb-pausiert) .lb-reihe:not(:has(:focus-visible)) .lb-spur > .lb-klon {
    display: flex;
  }
  /* Maus über einer Reihe hält sie an, damit man ein Logo in Ruhe lesen kann */
  .siegel-band.lb-an .lb-reihe:hover .lb-spur,
  .siegel-band.lb-aus-sicht .lb-spur { animation-play-state: paused; }
}
@keyframes lb-lauf { to { transform: translate3d(var(--lb-weg, -50%), 0, 0); } }

/* Google-Sterne, neu (17.10.2026): EIN Bild mit fünf Sternen statt fünf
   Einzelbildern. Vorher steckte der Teilstern in einem 60-%-Rahmen, und die
   allgemeine Regel max-width: 100% presste sein goldenes Bild auf 12 statt
   20 px; gemessen live auf / am 17.10. (Teilstern 12 px in 20 px Umriss, im
   Bewertungsblock 12,6 in 21 px). Jetzt schneidet ein inneres SVG-Fenster die
   goldene Lage bei 4,6 von 5 ab, die Sterne liegen deckungsgleich. */
.g-sterne5 { display: inline-flex; flex: none; line-height: 0; }
.g-sterne5 > svg { width: 85px; height: 17px; max-width: none; display: block; }
.g-sterne5 .g-leer path { fill: #F2F2F2; stroke: #8A9099; stroke-width: 1.4; }
.g-sterne5 .g-voll path { fill: #FBBC05; stroke: #B8860B; stroke-width: 1.4; }
.g-sterne5.gross > svg { width: 105px; height: 21px; }
.siegel-band.lb .siegel .g-wert { align-items: center; }

@media (max-width: 600px) {
  .siegel-band.lb { --lb-abstand: 28px; --lb-logo-h: 24px; }
  .lb-spur .siegel { min-height: 50px; gap: 8px; }
  .lb-spur .siegel.siegel-gestapelt img { width: 38px; height: 38px; }
  .lb-spur .siegel img.siegel-hochkant { height: 50px; }
  .lb-spur .siegel img.siegel-quadrat { height: 44px; width: 44px; }
  .lb-spur .siegel .g-zeichen { width: 28px; height: 28px; }
  .lb-spur .siegel .g-zahl { font-size: 1.15rem; }
  .lb-spur .siegel .s-sub { white-space: nowrap; }
  .g-sterne5 > svg { width: 75px; height: 15px; }
  .lb-titel { font-size: 0.7rem; letter-spacing: 0.12em; }
  .lb-knopf { padding: 4px 8px; }
  /* Stehende Fassung am Handy: eine wischbare Zeile statt Umbruch. Umbrochen
     wären es rund 1.000 px Höhe für 20 Logos (gemessen im Prototyp 17.10.),
     das Muster folgt der wischbaren Reihe aus Welle 14 (Abschnitt 14.1). */
  .lb-spur {
    flex-wrap: nowrap; justify-content: flex-start; max-width: none;
    overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--bbi-blue-20) transparent;
  }
  .lb-spur > li { scroll-snap-align: start; }
}