/* Hinweisleiste (pco-topbar): Groesse und Animation, gesteuert ueber CSS-Variablen
   aus templates/base/_topmessage_options.html.twig. Ergaenzt topmessage-bar.css. */
.pco-topbar.pco-topbar {
  position: relative;
  overflow: hidden;
  min-height: var(--pco-topbar-height, 44px);
  padding: 8px 16px;
  font-size: var(--pco-topbar-size, 19px);
  font-weight: 600;
}
.pco-topbar.pco-topbar .pco-topbar__icon { font-size: 1.2em; }
.pco-topbar.pco-topbar .pco-topbar__button { font-size: 0.75em; padding: 3px 14px; }

/* Lichtstreifen: heller Streifen laeuft alle 4 s ueber die Leiste (bewusst kein Blinken) */
.pco-topbar::after {
  content: "";
  display: var(--pco-topbar-shine, block);
  position: absolute;
  top: 0;
  left: -40%;
  width: 30%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  pointer-events: none;
  animation: pco-topbar-shine 4s ease-in-out infinite;
}
.pco-topbar--aktion::after {
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
}
@keyframes pco-topbar-shine {
  0%, 60% { left: -40%; }
  100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .pco-topbar::after { animation: none; display: none; }
}

@media (max-width: 767px) {
  .pco-topbar.pco-topbar { font-size: var(--pco-topbar-size-mobile, 16px); min-height: 44px; }
}