/* =============================================================================
   Ladeanzeige - der Kasten zu ladeanzeige.js

   Oben mittig unter dem Kopf, ueber dem Inhalt, ohne ihn zu sperren: wer
   waehrend eines Exports woanders hinklickt, soll das duerfen. Der Kasten
   sagt drei Dinge: was laeuft (Text), dass es laeuft (wandernder Balken aus
   fortschritt.css) und wie lange schon (Uhr). Die Uhr ist die Antwort auf
   "haengt das?": eine Zahl, die weiterlaeuft, ist das Gegenteil einer toten
   Seite.

   Farben aus app.css, Hell- und Dunkelthema laufen mit.
   ============================================================================= */

.ladeanzeige {
  position: fixed;
  top: calc(var(--kopfhoehe, 48px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  width: min(460px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px 12px;
  padding: 14px 16px 15px;
  background: var(--flaeche);
  color: var(--schrift);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--gruen);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-hoch);
  animation: ladeanzeige-auf 160ms ease-out;
}
.ladeanzeige[hidden] { display: none; }

.ladeanzeige-text {
  margin: 0;
  font-size: var(--text-gross);
  font-weight: 600;
  line-height: 1.3;
}
.ladeanzeige-zeit {
  font-size: var(--text-klein);
  color: var(--schrift-hell);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ladeanzeige .balken { grid-column: 1 / -1; }
.ladeanzeige-hinweis {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--text-klein);
  color: var(--hinweis-schrift);
}

/* Nach der Zeitgrenze laeuft nichts mehr sichtbar: der Balken steht voll und
   gedeckt, der Rand wird gelb. Ein wandernder Balken neben "sollte begonnen
   haben" waere ein Widerspruch. */
.ladeanzeige[data-zustand="zeitgrenze"] { border-left-color: var(--gelb); }
.ladeanzeige[data-zustand="zeitgrenze"] .balken-fuellung { width: 100%; opacity: .45; }

@keyframes ladeanzeige-auf {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to   { opacity: 1; transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ladeanzeige { animation: none; }
}

@media print {
  .ladeanzeige { display: none !important; }
}