/* Ported from the SVG/CSP fix (0d39e1f); external CSS controls the inline paths. */
.balken-chevron .bar {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: balken-reveal 5s cubic-bezier(.22,.85,.34,1) infinite;
}
/* Von innen nach aussen: der kleinste Balken (bar-12) startet sofort, jeder
   groessere 0,1 s spaeter. */
.balken-chevron .bar-0  { animation-delay: 1.2s; }
.balken-chevron .bar-1  { animation-delay: 1.1s; }
.balken-chevron .bar-2  { animation-delay: 1s; }
.balken-chevron .bar-3  { animation-delay: .9s; }
.balken-chevron .bar-4  { animation-delay: .8s; }
.balken-chevron .bar-5  { animation-delay: .7s; }
.balken-chevron .bar-6  { animation-delay: .6s; }
.balken-chevron .bar-7  { animation-delay: .5s; }
.balken-chevron .bar-8  { animation-delay: .4s; }
.balken-chevron .bar-9  { animation-delay: .3s; }
.balken-chevron .bar-10 { animation-delay: .2s; }
.balken-chevron .bar-11 { animation-delay: .1s; }
.balken-chevron .bar-12 { animation-delay: 0s; }
@keyframes balken-reveal {
  0%   { transform: scaleY(0)    translateY(6%); }
  10%  { transform: scaleY(1.1)  translateY(-1.8%); }
  16%  { transform: scaleY(0.96) translateY(0.6%); }
  22%  { transform: scaleY(1.02) translateY(-0.2%); }
  27%  { transform: scaleY(1)    translateY(0%); }
  78%  { transform: scaleY(1)    translateY(0%); }
  88%  { transform: scaleY(0.04) translateY(4.5%); }
  100% { transform: scaleY(0)    translateY(6%); }
}
/* Wer Bewegung abbestellt hat, bekommt den Faecher stehend — sichtbar bleibt er. */
@media (min-width: 600px) and (max-width: 1199px) {
  .balken-chevron { display: none; }
  .balken-chevron .bar { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .balken-chevron .bar { animation: none; transform: none; }
}