/* ================================================================
   KG Echte Fründe – Lade-Overlay (Konfetti + Logo)
   Wird bei Seitenübergängen und länger laufenden Aktionen eingeblendet.
   ================================================================ */

@keyframes kg-confetti-fall {
  0%   { transform: translateY(-40px) rotate(0deg);   opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(60vh) rotate(320deg);  opacity: 0; }
}

@keyframes kg-logo-bounce-in {
  0%   { transform: scale(.3) translateY(-10px); opacity: 0; }
  55%  { transform: scale(1.12) translateY(0);   opacity: 1; }
  75%  { transform: scale(.95); }
  100% { transform: scale(1); }
}

@keyframes kg-logo-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes kg-underline-sweep {
  0%   { transform: scaleX(0); transform-origin: left; }
  45%  { transform: scaleX(1); transform-origin: left; }
  55%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

#kg-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg, #f5f7fa);
  font-family: var(--font, 'Segoe UI', Arial, sans-serif);
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility 0s linear 0s;
}

#kg-loading-overlay.kg-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}

#kg-loading-overlay .kg-confetti-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

#kg-loading-overlay .kg-confetti-piece {
  position: absolute;
  top: 0;
  animation-name: kg-confetti-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

#kg-loading-overlay .kg-loading-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

#kg-loading-overlay .kg-logo-wrap {
  animation: kg-logo-bounce-in .9s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

#kg-loading-overlay .kg-logo-wrap img {
  width: 96px;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .18));
  animation: kg-logo-bob 2.6s ease-in-out .9s infinite;
}

#kg-loading-overlay .kg-loading-text {
  position: relative;
  color: var(--text, #2c2c2c);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding-bottom: 6px;
}

#kg-loading-overlay .kg-loading-text .kg-underline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--primary, #22a7d2);
  animation: kg-underline-sweep 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  #kg-loading-overlay .kg-confetti-piece,
  #kg-loading-overlay .kg-logo-wrap,
  #kg-loading-overlay .kg-logo-wrap img,
  #kg-loading-overlay .kg-underline {
    animation: none !important;
  }
}

/* ================================================================
   Bildergruppen-Preload (Galerien, Raster mit vielen Bildern)
   Container mit [data-kg-image-preload] bleiben ausgeblendet, bis ihre
   Bilder geladen sind (statt einzeln nacheinander aufzupoppen); einzelne
   Bilder blenden zusätzlich sanft ein statt hart zu erscheinen. Siehe
   assets/js/loading-overlay.js für die Steuerung.
   ================================================================ */
[data-kg-image-preload] {
  transition: opacity .35s ease;
}

[data-kg-image-preload].kg-images-pending {
  opacity: 0;
}

[data-kg-image-preload] img {
  opacity: 0;
  transition: opacity .35s ease;
}

[data-kg-image-preload] img.kg-img-loaded {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  [data-kg-image-preload],
  [data-kg-image-preload] img {
    transition: none;
  }
}