/* ================= WERBESPOT ================= */

#spot {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(55% 60% at 18% 20%, rgba(0, 230, 118, .12), transparent 68%),
    radial-gradient(50% 55% at 85% 75%, rgba(198, 255, 0, .10), transparent 66%),
    var(--bg-deep);
  display: grid;
  place-items: center;
  padding: 12vh 24px;
}

.spot-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: 1100px;
}

.spot-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 7vw, 96px);
  line-height: .98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-align: center;
  color: var(--cream);
  z-index: 2;
}

/* ---- Phone-Mockup ---- */
.phone-wrap {
  position: relative;
  z-index: 2;
  will-change: transform, opacity;
}
.phone {
  position: relative;
  width: min(340px, 78vw);
  aspect-ratio: 9 / 19;
  border-radius: 44px;
  border: 10px solid #131f18;
  background: #000;
  overflow: hidden;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    0 30px 80px rgba(0, 0, 0, .6),
    0 0 90px rgba(0, 230, 118, .22);
  transition: transform .35s ease, box-shadow .35s ease;
}
.phone:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .1),
    0 40px 100px rgba(0, 0, 0, .65),
    0 0 130px rgba(0, 230, 118, .32);
}
.spot-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Sound-Toggle ---- */
.sound-toggle {
  position: absolute;
  left: 50%; bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: rgba(7, 19, 12, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  pointer-events: none; /* Klick geht ans Phone */
  transition: opacity .3s ease;
}
.phone.sound-on .sound-toggle .hint { display: none; }

/* ---- Deko-Früchte: alle 9 Zutaten, in 3 Tiefen-Ebenen gestaffelt ---- */
.spot-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.deco {
  position: absolute;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .5));
  will-change: transform;
}
/* hintere Ebene: klein, unscharf, halbtransparent (Schärfentiefe-Effekt) */
.deco.far {
  filter: blur(2px) drop-shadow(0 10px 16px rgba(0, 0, 0, .4));
  opacity: .65;
}
.deco.mid {
  filter: blur(.6px) drop-shadow(0 14px 20px rgba(0, 0, 0, .45));
  opacity: .85;
}

/* vordere Ebene (groß, scharf) */
.d1 { width: 150px; left: 7%;  top: 14%; transform: rotate(-12deg); }
.d2 { width: 130px; right: 8%; top: 20%; transform: rotate(16deg); }
.d4 { width: 165px; left: 9%;  bottom: 10%; transform: rotate(8deg); }

/* mittlere Ebene */
.d3 { width: 105px; left: 13%; top: 44%; transform: rotate(6deg); }
.d5 { width: 115px; right: 12%; bottom: 14%; transform: rotate(-10deg); }
.d6 { width: 100px; right: 14%; top: 46%; transform: rotate(12deg); }

/* hintere Ebene */
.d7 { width: 80px; left: 22%; top: 26%; transform: rotate(-18deg); }
.d8 { width: 85px; right: 23%; top: 68%; transform: rotate(9deg); }
.d9 { width: 78px; left: 24%; bottom: 24%; transform: rotate(20deg); }

@media (max-width: 760px) {
  .spot-inner { gap: 32px; }
  .d1 { width: 84px; left: 2%; }
  .d2 { width: 76px; right: 3%; }
  .d4 { width: 96px; left: 3%; }
  .d5 { width: 70px; right: 4%; }
  .d3, .d6, .d7, .d8, .d9 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .phone, .phone:hover { transition: none; transform: none; }
}