/**
 * FIX Kreis-Logo-Loader (portable) – gleiche Animation wie FixLoaderX.
 * Themes: .fixx-theme-wohnen (Grün) · .fixx-theme-nk (Blau) · .fixx-theme-location (Violett)
 *
 * Nur der Farbring rotiert – Buchstabe und Orb bleiben ruhig (kein Scale-Pulse).
 */
:root {
  --fixx-wohnen-base: #2f6b57;
  --fixx-wohnen-glow: #10b981;
  --fixx-nk-base: #0b147a;
  --fixx-nk-glow: #3b82f6;
  --fixx-location-base: #6d28d9;
  --fixx-location-glow: #8b5cf6;
  --fixx-size: 84px;
}

.fixx-theme-wohnen {
  --fixx-base: var(--fixx-wohnen-base);
  --fixx-glow: var(--fixx-wohnen-glow);
}

.fixx-theme-nk,
.fixx-theme-nebenkosten {
  --fixx-base: var(--fixx-nk-base);
  --fixx-glow: var(--fixx-nk-glow);
}

.fixx-theme-location {
  --fixx-base: var(--fixx-location-base);
  --fixx-glow: var(--fixx-location-glow);
}

.fixx-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.fixx-overlay[hidden],
.fixx-overlay.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.fixx-scene {
  width: var(--fixx-size);
  height: var(--fixx-size);
  display: grid;
  place-items: center;
}

.fixx-orb {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--fixx-base) 14%, transparent),
    0 10px 28px color-mix(in srgb, var(--fixx-base) 18%, transparent);
}

.fixx-ring {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--fixx-base) 16%, transparent);
  border-top-color: var(--fixx-base);
  border-right-color: var(--fixx-glow);
  animation: fixx-spin 0.9s linear infinite;
  will-change: transform;
}

.fixx-letter {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: calc(var(--fixx-size) * 0.46);
  font-weight: 700;
  line-height: 1;
  color: var(--fixx-base);
  user-select: none;
  pointer-events: none;
}

.fixx-logo {
  position: absolute;
  inset: 14%;
  width: 72%;
  height: 72%;
  object-fit: contain;
  border-radius: 50%;
  pointer-events: none;
}

@keyframes fixx-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fixx-ring {
    animation: none;
    border-color: color-mix(in srgb, var(--fixx-base) 35%, transparent);
    border-top-color: var(--fixx-base);
  }
}