/* ============================================================================ LOADING-SPINNER — reines CSS/JS, keine Abhängigkeiten. Wird von spinner.js als Fullscreen-Overlay in injiziert (analog zum Footer-Muster in footer.js) und über window.showLoading()/hideLoading() gesteuert. ============================================================================ */ .loading-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; /* Bewusst nur ein leichter Schleier + Weichzeichnung des Hintergrunds (nicht komplett verdeckt) — der Spinner soll wie eine kurze Unschärfe über der aktuellen Seite wirken, nicht wie ein neuer Screen. */ background: rgba(255, 255, 255, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Fallback für Browser ohne backdrop-filter-Unterstützung: etwas deckender, damit der Hintergrund trotzdem ausreichend beruhigt wirkt. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .loading-overlay { background: rgba(255, 255, 255, 0.9); } } .loading-overlay.is-hidden { display: none; } .loading-overlay-text { font-size: 0.95rem; font-weight: 600; color: var(--text-dark, #1a1a1a); text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8); } .loader-container { --uib-size: 45px; --uib-color: var(--primary-orange, #ff8800); --uib-speed: 2.5s; display: flex; flex-direction: column; align-items: center; justify-content: center; height: var(--uib-size); width: var(--uib-size); } .slice { position: relative; height: calc(var(--uib-size) / 6); width: 100%; } .slice::before, .slice::after { --uib-a: calc(var(--uib-speed) / -2); --uib-b: calc(var(--uib-speed) / -6); content: ''; position: absolute; top: 0; left: calc(50% - var(--uib-size) / 12); height: 100%; width: calc(100% / 6); border-radius: 50%; background-color: var(--uib-color); flex-shrink: 0; animation: orbit var(--uib-speed) linear infinite; transition: background-color 0.3s ease; } .slice:nth-child(1)::after { animation-delay: var(--uib-a); } .slice:nth-child(2)::before { animation-delay: var(--uib-b); } .slice:nth-child(2)::after { animation-delay: calc(var(--uib-a) + var(--uib-b)); } .slice:nth-child(3)::before { animation-delay: calc(var(--uib-b) * 2); } .slice:nth-child(3)::after { animation-delay: calc(var(--uib-a) + var(--uib-b) * 2); } .slice:nth-child(4)::before { animation-delay: calc(var(--uib-b) * 3); } .slice:nth-child(4)::after { animation-delay: calc(var(--uib-a) + var(--uib-b) * 3); } .slice:nth-child(5)::before { animation-delay: calc(var(--uib-b) * 4); } .slice:nth-child(5)::after { animation-delay: calc(var(--uib-a) + var(--uib-b) * 4); } .slice:nth-child(6)::before { animation-delay: calc(var(--uib-b) * 5); } .slice:nth-child(6)::after { animation-delay: calc(var(--uib-a) + var(--uib-b) * 5); } @keyframes orbit { 0% { transform: translateX(calc(var(--uib-size) * 0.25)) scale(0.73684); opacity: 0.65; } 5% { transform: translateX(calc(var(--uib-size) * 0.235)) scale(0.684208); opacity: 0.58; } 10% { transform: translateX(calc(var(--uib-size) * 0.182)) scale(0.631576); opacity: 0.51; } 15% { transform: translateX(calc(var(--uib-size) * 0.129)) scale(0.578944); opacity: 0.44; } 20% { transform: translateX(calc(var(--uib-size) * 0.076)) scale(0.526312); opacity: 0.37; } 25% { transform: translateX(0%) scale(0.47368); opacity: 0.3; } 30% { transform: translateX(calc(var(--uib-size) * -0.076)) scale(0.526312); opacity: 0.37; } 35% { transform: translateX(calc(var(--uib-size) * -0.129)) scale(0.578944); opacity: 0.44; } 40% { transform: translateX(calc(var(--uib-size) * -0.182)) scale(0.631576); opacity: 0.51; } 45% { transform: translateX(calc(var(--uib-size) * -0.235)) scale(0.684208); opacity: 0.58; } 50% { transform: translateX(calc(var(--uib-size) * -0.25)) scale(0.73684); opacity: 0.65; } 55% { transform: translateX(calc(var(--uib-size) * -0.235)) scale(0.789472); opacity: 0.72; } 60% { transform: translateX(calc(var(--uib-size) * -0.182)) scale(0.842104); opacity: 0.79; } 65% { transform: translateX(calc(var(--uib-size) * -0.129)) scale(0.894736); opacity: 0.86; } 70% { transform: translateX(calc(var(--uib-size) * -0.076)) scale(0.947368); opacity: 0.93; } 75% { transform: translateX(0%) scale(1); opacity: 1; } 80% { transform: translateX(calc(var(--uib-size) * 0.076)) scale(0.947368); opacity: 0.93; } 85% { transform: translateX(calc(var(--uib-size) * 0.129)) scale(0.894736); opacity: 0.86; } 90% { transform: translateX(calc(var(--uib-size) * 0.182)) scale(0.842104); opacity: 0.79; } 95% { transform: translateX(calc(var(--uib-size) * 0.235)) scale(0.789472); opacity: 0.72; } 100% { transform: translateX(calc(var(--uib-size) * 0.25)) scale(0.73684); opacity: 0.65; } } /* Bewegungsreduzierung respektieren: Animation einfrieren statt kreisen lassen. Der Text-Slot bleibt die primäre Rückmeldung für diese Nutzer:innen. */ @media (prefers-reduced-motion: reduce) { .slice::before, .slice::after { animation: none; opacity: 1; } }