/* 

   .lazy-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.lazy-section.loaded {
    opacity: 1;
    transform: translateY(0);
}




.loading-spinner {
  border: 4px solid #f3f3f3; 
  border-top: 4px solid #fb5252; 
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 20px auto; 
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-fallback {
  text-align: center;
  padding: 40px 20px;
  color: #666;
  min-height: 100px;
} 

  */

  /* spinne Styling */
.loading-fallback {
    text-align: center;
    padding: 20px;
    color: #666;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px; /* Ensure fallback has enough space for spinne */
    opacity: 1;
    transition: opacity 0.3s ease; /* Smooth fade-out for spinne */
}

.spinne {
    width: 50px;
    height: 50px;
    border: 4px solid #fb5252; /* Brand color */
    border-top-color: transparent; /* Creates spinning effect */
    border-radius: 50%;
    animation: spin 1s linear infinite; /* Rotate animation */
    margin: auto;
}

/* spinne Animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* When section is loaded, hide spinne */
.lazy-section.loaded .loading-fallback {
    opacity: 0;
    pointer-events: none; /* Prevent interaction with hidden spinne */
}

/* Lazy section transition */
.lazy-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s; /* Smooth content fade-in */
}

.lazy-section.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* Accessibility: No animation for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
    .spinne {
        animation: none; /* Stop spinning */
        border: 4px solid #fb5252; /* Static circle */
    }
}