/* Ein gemeinsamer Wartungshinweis für Spiel und Informationsseiten. Die Leiste
   nimmt ihren Platz ein: Navigation und Spielflächen werden nicht überdeckt. */
#wartungs-leiste {
  position: sticky;
  top: 0;
  z-index: 120;
  flex: none;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  width: 100%;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 3px 0;
  overflow: hidden;
  border: 0;
  border-bottom: 2px solid #151108;
  border-radius: 0;
  background: repeating-linear-gradient(-45deg, #f5c83c 0 10px, #171309 10px 20px);
  color: #171309;
  font: 800 13px/1.2 var(--mono, ui-monospace, monospace);
  letter-spacing: .055em;
  animation: wartung-ein .35s ease-out both;
}
#wartungs-leiste[hidden] { display: none !important; }
#wartungs-leiste .wartung-icon { display: grid; place-items: center; align-self: stretch; background: #f5c83c; }
#wartungs-leiste .wartung-icon svg { display: block; width: 22px; height: 22px; }
#wartungs-leiste .wartung-fenster { min-width: 0; height: 28px; overflow: hidden; background: #f5c83c; }
#wartungs-leiste .wartung-marquee { display: flex; width: max-content; height: 100%; animation: wartung-lauf 90s linear infinite; }
#wartungs-leiste .wartung-gruppe { display: flex; flex: none; align-items: center; gap: 32px; padding-right: 32px; }
#wartungs-leiste .wartung-gruppe > span { white-space: nowrap; }
#wartungs-leiste .wartung-ruhig { display: none; }
#wartungs-leiste:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
#wartungs-leiste:is(:hover, :focus-within, .wartung-paused) .wartung-marquee { animation-play-state: paused; }
#wartungs-leiste .wartung-lesetext { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.wartung-sichtbar .admin-navigation { top: 56px; }
html.wartung-sichtbar .welt-profil-vorschau { top: 36px; }
@keyframes wartung-ein { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes wartung-lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Die statische Fassung bleibt auch auf dem Handy vollständig lesbar. */
@media (prefers-reduced-motion: reduce) {
  #wartungs-leiste { animation: none; }
  #wartungs-leiste .wartung-marquee { display: none; animation: none; }
  #wartungs-leiste .wartung-ruhig { display: flex; align-items: center; justify-content: center; height: 100%; padding-inline: 4px; font-size: clamp(8px, 2.1vw, 12px); line-height: 1.12; letter-spacing: 0; text-align: center; }
}
html[data-animationen=aus] #wartungs-leiste { animation: none; }
html[data-animationen=aus] #wartungs-leiste .wartung-marquee { display: none; animation: none; }
html[data-animationen=aus] #wartungs-leiste .wartung-ruhig { display: flex; align-items: center; justify-content: center; height: 100%; padding-inline: 4px; font-size: clamp(8px, 2.1vw, 12px); line-height: 1.12; letter-spacing: 0; text-align: center; }