/* Vollbild-Ladeoverlay – Schnullerzeit.de */
#app-loader {
  position: fixed; inset: 0; z-index: 99999; display: none;
  background: radial-gradient(1200px 600px at 30% -10%, #fff, #fff9fb 60%, #fefefe);
  backdrop-filter: blur(2px);
  align-items: center; justify-content: center; flex-direction: column;
  font: 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: #2a2a2a;
}
#app-loader.show { display: flex; }

#app-loader .card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 22px 22px 18px;
  box-shadow: 0 12px 44px rgba(0,0,0,.10);
  text-align: center;
  width: min(520px, calc(100% - 32px));
}

/* Logo im Loader: Schnullerzeit Pastell-Verlauf */
#app-loader .logo {
  width: 42px; height: 42px; margin: 0 auto 10px; border-radius: 12px;
  background: linear-gradient(180deg, #ff9dbd 0%, #7cc6ff 100%);
  box-shadow: 0 8px 20px rgba(255,157,189,.25);
}

#app-loader h3 {
  margin: 6px 0 8px;
  font-size: 18px;
  color: #2a2a2a;
}
#app-loader p  {
  margin: 0;
  color: #555;
}

#app-loader .bar {
  margin: 16px auto 6px;
  height: 6px;
  width: 100%;
  max-width: 360px;
  border-radius: 999px;
  background: #f3f6f9;
  overflow: hidden;
}
#app-loader .bar > i {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #ff9dbd, #7cc6ff);
  border-radius: inherit;
  animation: loaderPulse 1.4s ease-in-out infinite;
}

#app-loader .hint {
  font-size: 12px;
  color: #666;
  margin-top: 6px;
}

/* Animations-Keyframes */
@keyframes loaderPulse {
  0%   { width: 10%; opacity:.9; }
  50%  { width: 75%; opacity:1; }
  100% { width: 10%; opacity:.9; }
}

/* Mini-Top-Loader (Seitenwechsel) */
#top-loader {
  position: fixed;
  left: 0; top: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #ff9dbd, #7cc6ff);
  z-index: 99998;
  transition: width .2s ease, opacity .25s ease;
}