/* Ladebildschirm im Stil des bisherigen Terrassenplaners (Farben, Logo, Jahresringe). */
:root {
  --braun: #b0864b;
  --gruen: #95c11c;
  --sand: #f5f0e8;
  --grau: #dcdcdc;
  --text: #3a3a3a;
}
html, body { margin: 0; height: 100%; background: var(--sand); }
#ladebild {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  background: var(--sand); overflow: hidden;
  font-family: Roboto, "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text);
}
.ladebild-ringe {
  position: absolute; left: 50%; top: 58%; width: 140vmax; height: 140vmax; transform: translate(-50%, -50%);
  background: repeating-radial-gradient(circle at center,
    transparent 0 22px, rgba(176, 134, 75, 0.07) 22px 24px, transparent 24px 41px, rgba(149, 193, 28, 0.06) 41px 42px);
  pointer-events: none;
}
.ladebild-logo { position: relative; width: min(340px, 70vw); height: auto; }
.ladebild-karte {
  position: relative; width: min(380px, calc(100vw - 32px)); box-sizing: border-box; padding: 22px 26px 18px;
  background: rgba(255, 255, 255, 0.92); border-radius: 6px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); text-align: center;
}
.ladebild-titel { margin: 0 0 14px; font-size: 17px; font-weight: 500; color: var(--braun); }
.ladebild-balken { height: 6px; border-radius: 3px; background: var(--grau); overflow: hidden; }
.ladebild-fuellung { height: 100%; width: 0; border-radius: 3px; background: var(--braun); transition: width 0.25s ease-out; }
.ladebild-balken.unbestimmt .ladebild-fuellung { width: 35%; animation: ladebild-wandern 1.4s ease-in-out infinite; }
@keyframes ladebild-wandern { from { transform: translateX(-110%); } to { transform: translateX(300%); } }
.ladebild-prozent { margin: 10px 0 0; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--braun); min-height: 1.2em; }
.ladebild-status { margin: 4px 0 0; font-size: 13px; color: #6b6b6b; min-height: 1.2em; }
.ladebild-erneut {
  margin-top: 14px; padding: 8px 18px; border: 0; border-radius: 4px; background: var(--gruen); color: #fff;
  font: inherit; font-size: 14px; cursor: pointer;
}
#ladebild.fehler .ladebild-titel { color: #b3261e; }
#ladebild.fehler .ladebild-balken { display: none; }
#ladebild.ausblenden { opacity: 0; transition: opacity 0.2s ease-out; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .ladebild-fuellung, #ladebild.ausblenden { transition: none; }
  .ladebild-balken.unbestimmt .ladebild-fuellung { animation: none; width: 100%; opacity: 0.4; }
}