/* Alert Bar Styles */

.alert-bar {
  /* Einheitliche Positionierung für alle Geräte */
  position: sticky;
  /* Direkt unter dem Header positionieren */
  top: calc(var(--header-height) + var(--safe-area-top, 0px));
  z-index: 1500;
  /* Höher als der Header (1000), aber niedriger als der Spacer (2000) */

  /* Initial versteckt, wird per JS gesteuert */
  display: none;
  /* Wichtig: Kein Platz im Layout einnehmen, wenn nicht sichtbar */

  /* Layout */
  width: 100%;
  padding: 4px 10px;

  /* Aussehen */
  background-color: var(--accent-yellow);
  color: #000;
  font-size: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);

  /* Flexbox für Inhalt und Schließen-Button */
  align-items: center;
  justify-content: space-between;

  /* Animation für Fade-In/Out */
  transition: opacity 0.3s ease-in-out;
}

.alert-bar--visible {
  display: flex;
  /* Nur hier setzen wir display: flex */
  opacity: 1;
}

.alert-bar__content {
  flex: 1;
  overflow: hidden;
  position: relative;
  /* Für absolute Positionierung der Nachrichten */
  height: 22px;
  /* Feste Höhe für die Nachrichten */
}

.alert-bar__message-container {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  /* Zentrierte Nachrichten */
}

.alert-bar__message {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  /* Initial unsichtbar */
  transition: all 0.25s ease-out;
  /* Schnellere, weichere Transition */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Text abschneiden mit ... */
  max-width: 100%;
  text-align: center;
  display: none;
  /* Initial versteckt */
  transform: scale(0.95);
  /* Etwas kleiner starten für stärkeren Effekt */
  filter: brightness(1);
  /* Normale Helligkeit initial */
  font-weight: normal;
  /* Start mit normaler Schriftdicke */
}

.alert-bar__message.active {
  opacity: 1;
  display: block;
  transform: scale(1);
  /* Normale Größe wenn aktiv */
  animation: messageHighlight 0.25s ease-out;
  /* Schnellere, dynamischere Animation */
}

/* Zusätzliche Animation nur bei mehreren Nachrichten */
.alert-bar--multi-message .alert-bar__message.active {
  animation:
    messageHighlight 0.25s ease-out,
    messageFade 5s ease-in 0.25s forwards;
}

@keyframes messageHighlight {
  0% {
    filter: brightness(1);
    transform: scale(0.95);
    font-weight: normal;
    color: red;
    opacity: 1;
  }

  50% {
    filter: brightness(1.15);
    transform: scale(1.05);
    font-weight: normal;
    color: red;
    opacity: 1;
  }

  100% {
    filter: brightness(1);
    transform: scale(1);
    font-weight: normal;
    color: #000;
    opacity: 1;
  }
}

@keyframes messageFade {
  0% {
    opacity: 1;
  }

  90% {
    opacity: 0.3;
  }

  100% {
    opacity: 0.3;
  }
}

/* Alle Nachrichten haben den gleichen Stil (schwarz) */

.alert-bar__close {
  background: none;
  border: none;
  color: #000;
  /* Schwarzer Text */
  font-size: 18px;
  cursor: pointer;
  padding: 0 5px;
  margin-left: 10px;
}

.alert-bar__close:hover {
  opacity: 0.7;
  /* Leicht transparent beim Hover */
}

/* Keine Animation mehr nötig, da wir jetzt Fade-Effekt verwenden */

/* Anpassung für die ChfTotalBox ist nicht mehr nötig, da die Alert-Bar im normalen Dokumentfluss ist */
/* Die ChfTotalBox wird automatisch nach unten verschoben, wenn die Alert-Bar sichtbar ist */

/* Keine gerätespezifischen Media Queries mehr nötig, da wir eine einheitliche
   Positionierungsstrategie mit CSS-Variablen verwenden, die auf allen Geräten funktioniert */

/* Debugging-Hilfe: Fügt einen farbigen Rahmen hinzu, um die Grenzen der Alert-Bar zu sehen */
.debug .alert-bar {
  border: 2px solid red;
}