/* Container */
.loader-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Open Sans', sans-serif;
}

/* Ladebalken */
.loader-wrapper {
  width: 400px;
  height: 20px;
  background: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;

  /* verschwindet nach 4 Sekunden */
  animation: hideBar 0.4s ease forwards;
  animation-delay: 4s;
}

@keyframes hideBar {
  to { opacity: 0; width: 0; }
}

.loader-bar {
  height: 100%;
  width: 0;
  background: #2ecc71;
  animation: fillBar 4s linear forwards;
}

@keyframes fillBar {
  from { width: 0; }
  to   { width: 100%; }
}

/* Status während des Ladens */
.loader-status {
  font-size: 20px;
  color: #000000;
  opacity: 1;
  animation: hideStatus 0.3s ease forwards;
  animation-delay: 4s;
}

@keyframes hideStatus {
  to { opacity: 0; }
}

/* Haken mit Pop-Effekt */
.loader-check {
  font-size: 28px;
  color: #000000; /* jetzt schwarz */
  opacity: 0;
  transform: scale(0.3);
  animation: popCheck 0.4s ease-out forwards;
  animation-delay: 4s;
}

@keyframes popCheck {
  0%   { opacity: 0; transform: scale(0.3); }
  60%  { opacity: 1; transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1); }
}

/* Text nach Abschluss */
.loader-text {
  font-size: 20px;
  color: #000000; /* jetzt schwarz */
  opacity: 0;
  animation: showText 0.4s ease forwards;
  animation-delay: 4.2s;
}

@keyframes showText {
  to { opacity: 1; }
}

/* Grafik, die anstelle des Ladebalkens erscheint */
.loader-image {
  display: block;
  margin-top: 20px;
  width: 296px;
  height: 57.6px;
  opacity: 0;
  animation: showImage 0.6s ease forwards;
  animation-delay: 4.3s;
}

@keyframes showImage {
  to { opacity: 1; }
}