/* ===== Preloader isoliert: KEIN body{background...} verwenden! ===== */

.preloader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 99999;
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease, visibility .35s ease;
}

.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-card {
  width: min(520px, calc(100vw - 48px));
  padding: 26px 26px 18px;
  border-radius: 18px;
  background: rgba(28, 28, 28, 0.78);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 14px 40px rgba(0,0,0,0.55);
  text-align: center;
}

.preloader-anim {
  display: grid;
  place-items: center;
  margin-top: 2px;
}

.pl {
  width: 150px;
  height: 150px;
}

/* Farben */
.pan__body { fill: #efefef; }
.pan__handle { fill: #efefef; opacity: .95; }
.pan__shadow { fill: rgba(0,0,0,0.22); }

.food__main { fill: #ff3b30; }
.food__side { fill: #ff4d3a; opacity: .95; }
.food__side2 { fill: #ff6a57; opacity: .9; }

/* Flamme: größer & breiter + animiert (Flackern & Atmen) */
.flame__outer { fill: #ff9f0a; transform-origin: 64px 92px; animation: flameFlicker 0.12s infinite alternate, flameBreathe 1.35s ease-in-out infinite; }
.flame__inner { fill: #ffd60a; transform-origin: 64px 92px; animation: flameFlicker2 0.10s infinite alternate, flameBreathe 1.35s ease-in-out infinite; }

/* Food flippt leicht */
.food { transform-origin: 64px 52px; animation: foodFlip 1.1s ease-in-out infinite; }

/* Rauch über der Pfanne */
.smoke__puff {
  fill: rgba(220, 220, 220, 0.22);
  filter: blur(0.2px);
  transform-origin: center;
}
.s1 { animation: smokeRise 1.6s ease-in-out infinite; }
.s2 { animation: smokeRise 1.9s ease-in-out infinite .2s; }
.s3 { animation: smokeRise 1.75s ease-in-out infinite .35s; }

.preloader-texts { margin-top: 10px; }
.preloader-title {
  font-weight: 700;
  font-size: 20px;
  color: rgba(255,255,255,0.92);
  letter-spacing: .2px;
}
.preloader-sub {
  margin-top: 6px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.7);
}

/* dots */
.dots span { display: inline-block; width: 6px; text-align: center; animation: dotJump 1s infinite; }
.dots span:nth-child(2){ animation-delay: .15s; }
.dots span:nth-child(3){ animation-delay: .3s; }

.preloader-bar {
  height: 8px;
  margin-top: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
}
.preloader-bar__fill {
  height: 100%;
  width: 35%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff7a18, #ffb800);
  animation: barMove 1.2s ease-in-out infinite;
}

/* während preloader sichtbar: scroll lock */
body.preloader-lock { overflow: hidden; }

/* Animations */
@keyframes barMove {
  0% { transform: translateX(-40%); width: 30%; opacity: .75; }
  50% { transform: translateX(50%); width: 55%; opacity: 1; }
  100% { transform: translateX(140%); width: 30%; opacity: .75; }
}

@keyframes dotJump {
  0%, 80%, 100% { transform: translateY(0); opacity: .55; }
  40% { transform: translateY(-3px); opacity: 1; }
}

@keyframes flameFlicker {
  from { transform: translateY(0) scaleX(1.18) scaleY(1.08) rotate(-1deg); opacity: .95; }
  to   { transform: translateY(1px) scaleX(1.28) scaleY(1.16) rotate(1deg); opacity: 1; }
}
@keyframes flameFlicker2 {
  from { transform: translateY(0) scaleX(1.05) scaleY(1.00) rotate(1deg); opacity: .95; }
  to   { transform: translateY(1px) scaleX(1.12) scaleY(1.08) rotate(-1deg); opacity: 1; }
}
@keyframes flameBreathe {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255,159,10,.35)); }
  50%      { filter: drop-shadow(0 0 12px rgba(255,159,10,.55)); }
}

@keyframes foodFlip {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(10deg); }
}

@keyframes smokeRise {
  0%   { transform: translateY(0) scale(1); opacity: 0.0; }
  15%  { opacity: 0.35; }
  60%  { opacity: 0.25; }
  100% { transform: translateY(-18px) scale(1.35); opacity: 0; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .flame__outer, .flame__inner, .food, .dots span, .preloader-bar__fill, .smoke__puff {
    animation: none !important;
  }
  .preloader { transition: none; }
}