/* loading-overlay.css — Initialer App-Loading-Screen (vollflaechig, Gradient-BG).
 aus base.css extrahiert.

 Wird beim App-Start sichtbar bis init.js den Loading-State abschliesst.
 Error-State (.loading-failed) zeigt rote Spinner-Animation + Fehler-Buttons. */

#loading-overlay {
  position: fixed;
  inset: 0;
  padding-top: env(safe-area-inset-top, 0px);
  background: linear-gradient(160deg, var(--loading-grad-start) 0%, var(--loading-grad-mid) 50%, var(--loading-grad-end) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.9);
  z-index: var(--z-popover);
  transition: opacity var(--duration-slower) var(--ease-soft);
}
#loading-overlay.hidden { opacity: 0; pointer-events: none; }
.loading-center { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.loading-ring {
  width: 160px; height: 160px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  position: relative;
}
.loading-ring::before {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.5);
  border-right-color: rgba(255, 255, 255, 0.15);
  animation: lod-spin var(--duration-spinner) var(--ease-linear) infinite;
}
.loading-logo { width: 96px; height: 96px; opacity: 0.9; }
.loading-text { font-size: 22px; font-weight: var(--fw-medium); letter-spacing: 0.5px; }
.loading-dots { display: flex; gap: var(--space-2); }
.loading-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  animation: loadingDot var(--duration-shimmer) var(--ease-inout-soft) infinite;
}
.loading-dots span:nth-child(2) { animation-delay: var(--duration-normal); }
.loading-dots span:nth-child(3) { animation-delay: var(--duration-slower); }
/* Responsive Loading */
@media (max-width: 1399px) {
  .loading-ring { width: 160px; height: 160px; }
  .loading-logo { width: 96px; height: 96px; }
}
@media (max-width: 999px) {
  .loading-ring { width: 170px; height: 170px; }
  .loading-logo { width: 105px; height: 105px; }
  .loading-text { font-size: 24px; }
}
@media (max-width: 599px) {
  .loading-ring { width: 180px; height: 180px; }
  .loading-ring::before { border-width: 3px; inset: -5px; }
  .loading-logo { width: 110px; height: 110px; }
  .loading-text { font-size: 28px; letter-spacing: 1px; }
  .loading-dots span { width: 9px; height: 9px; }
  .loading-dots { gap: var(--space-2-5); }
}
/* Status-Text unter den Dots */
.loading-status {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.5);
  min-height: 1.2em;
  text-align: center;
  transition: opacity var(--duration-slow) var(--ease-soft);
}
/* Error-State: Dots werden versteckt, Fehlermeldung + Buttons gezeigt */
.loading-error {
  text-align: center;
  max-width: 320px;
}
.loading-error.hidden { display: none; }
.loading-error-msg {
  font-size: var(--font-size-base);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  margin-bottom: var(--space-5);
}
.loading-error-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.loading-error-btn {
  padding: var(--space-2-5) var(--space-5);
  border-radius: var(--radius-md);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.12);
  color: white;
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  min-height: 44px;
  transition: background var(--duration-fast);
}
.loading-error-btn:hover { background: rgba(255, 255, 255, 0.2); }
.loading-error-btn--secondary { border-color: rgba(255, 255, 255, 0.3); background: transparent; font-weight: var(--fw-regular); }
.loading-error-btn--secondary:hover { background: rgba(255, 255, 255, 0.08); }
/* Error-State: Spinner stoppen, Ring rot */
#loading-overlay.loading-failed .loading-ring::before { animation: none; border-top-color: rgba(255, 120, 120, 0.7); }
@keyframes loadingDot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.2); }
}