/* ==========================================================================
   DIE FUNDGRUBE — Scroll-Opener „durch die Regale"
   --------------------------------------------------------------------------
   Die erste Fassung hatte zwei Türen, die aufgingen. Das war brav und
   vorhersehbar. Jetzt passiert etwas, das zum Laden gehört:

     Aus dem Schwarz kondensiert eine Zahl — sie fällt nicht herein, sie
     entsteht. Während sie sinkt, taucht dahinter eine WAND AUS ECHTEN
     PRODUKTFOTOS auf. Beim Weiterscrollen fährt die Kamera durch diese Wand
     hindurch: Die Kacheln driften nach außen, jede in ihrer eigenen Tiefe,
     und dahinter liegt der Markt.

   Das ist die „digitale Schatzsuche" aus dem Auftrag — und es benutzt echtes
   Material, keine Dekoration.

   Zwei Regeln bleiben:
   1. Ohne JavaScript oder bei „Bewegung reduzieren" existiert die Bühne nicht.
   2. Die Zahl ist ein Gestaltungsmittel, kein Preisversprechen — sie hängt an
      keinem Artikel und löst keine Bestellung aus.
   ========================================================================== */

.oz{
  position:relative;height:230vh;
  /* Die Buehne traegt das Marktfoto SELBST. Die klebende Ebene darin loest
     sich am Ende und wandert nach oben weg — dahinter lag bisher nur eine
     dunkle Flaeche, und genau die sah man als schwarzen Block vor dem Hero.
     Jetzt liegt dort dasselbe Foto: der Uebergang bleibt im Bild. */
  background:linear-gradient(rgba(74,10,2,.55),rgba(74,10,2,.75)),
             url(../img/motive/sonderposten-gross.webp) center/cover no-repeat #7E1004;
}
/* 360vh waren dreieinhalb Bildschirmhöhen Scrollen, bevor der erste Satz kam.
   Das ist auf dem Handy eine Zumutung — 230vh reichen für dieselbe Bewegung. */
@media (max-width:640px){.oz{height:170vh}}
.oz__fix{
  position:sticky;top:0;height:100vh;overflow:hidden;margin-top:calc(var(--kopf-hoehe) * -1);padding-top:var(--kopf-hoehe);
  display:grid;place-items:center;
  /* Frueher lief das nach aussen auf fast Schwarz. Jetzt bleibt Markenrot
     stehen — zusammen mit dem Marktfoto darunter wirkt der Uebergang in den
     Hero ruhig statt wie ein Loch. */
  background:radial-gradient(130% 100% at 50% 46%,#8E1206 0%,#4A0A02 78%);
  perspective:1100px;perspective-origin:50% 48%;
}

/* ---- Die Wand aus echten Produktfotos ---- */
.oz__wand{
  position:absolute;inset:0;z-index:2;
  transform-style:preserve-3d;
  will-change:transform;
}
.oz__k{
  position:absolute;top:50%;left:50%;
  width:18vmin;height:18vmin;border-radius:10px;overflow:hidden;
  box-shadow:0 10px 34px -12px rgba(0,0,0,.8);
  will-change:transform,opacity;opacity:0;
  border:1px solid rgba(255,200,20,.14);
}
.oz__k img{width:100%;height:100%;object-fit:cover;display:block}
/* Jede Kachel trägt ein kleines gelbes Eck — der Preisschild-Bezug der Marke. */
.oz__k::after{
  content:"";position:absolute;right:0;top:0;
  border-width:0 16px 16px 0;border-style:solid;
  border-color:transparent var(--gelb) transparent transparent;opacity:.85;
}

/* ---- Der Blick in den Markt, ganz hinten ---- */
.oz__blick{
  position:absolute;inset:0;z-index:1;
  background-size:cover;background-position:center;
  will-change:transform,opacity;opacity:0;
}
.oz__blick::after{content:"";position:absolute;inset:0;background:rgba(74,10,2,.38)}

/* ---- Die Zahl, die aus dem Nichts entsteht ---- */
.oz__preis{
  position:relative;z-index:6;text-align:center;color:#fff;
  will-change:transform,opacity,filter;
}
.oz__zahl{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(4.6rem,20vw,15rem);line-height:.86;letter-spacing:-.055em;
  color:var(--gelb);
  /* Tiefe durch gestapelte Kanten in Markenrot — kein WebGL nötig, läuft
     auf jedem Telefon und sieht aus wie ein geprägtes Preisschild. */
  text-shadow:
    0 2px 0 #C4170B, 0 4px 0 #B0140A, 0 6px 0 #9C1209, 0 8px 0 #880F08,
    0 10px 0 #741006, 0 12px 0 #600D05, 0 30px 46px rgba(0,0,0,.6);
}
.oz__euro{font-size:.4em;vertical-align:super;margin-left:.05em;opacity:.9}
.oz__wort{
  display:block;margin-top:.65rem;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1rem,3.4vw,1.9rem);letter-spacing:-.02em;color:#fff;opacity:0;
}
.oz__unter{
  display:block;margin-top:.5rem;color:#F5D9C8;
  font-size:clamp(.86rem,2.2vw,1.05rem);max-width:36ch;margin-inline:auto;
}

.oz__marke{position:absolute;z-index:7;text-align:center;opacity:0;will-change:transform,opacity}
.oz__marke svg{height:clamp(46px,10vw,84px);width:auto;margin:0 auto}

.oz__wink{
  position:absolute;left:50%;bottom:1.6rem;z-index:8;transform:translateX(-50%);
  color:#F5D9C8;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
}
.oz__wink i{
  display:block;width:2px;height:26px;border-radius:2px;
  background:linear-gradient(var(--gelb),transparent);
  animation:ozWink 1.8s ease-in-out infinite;
}
@keyframes ozWink{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(7px);opacity:1}}

/* Stand vorher halb im Scrollbalken und war auf dem Handy kaum zu treffen.
   Jetzt mit echtem Abstand, groesserer Flaeche und Rand fuer Geraete mit
   abgerundeten Ecken. */
.oz__ueber{
  position:absolute;z-index:9;
  right:max(1.25rem,env(safe-area-inset-right));
  top:max(1.25rem,env(safe-area-inset-top));
  background:rgba(0,0,0,.5);color:#fff;border:1px solid rgba(255,255,255,.34);
  padding:.7rem 1.25rem;border-radius:999px;font-size:.86rem;font-weight:600;cursor:pointer;
  backdrop-filter:blur(6px);min-height:44px;
}
.oz__ueber:hover{background:rgba(0,0,0,.68)}

html:not(.js) .oz,html.fg-notaus .oz{display:none}
@media (prefers-reduced-motion:reduce){.oz{display:none}}
/* Auf kleinen Geräten weniger Kacheln sichtbar → größere Fläche je Kachel */
@media (max-width:640px){.oz__k{width:30vmin;height:30vmin}}
/* Groesser und einheitlich — zehn ruhige Flaechen statt vieler kleiner. */
.oz__k{width:22vmin;height:22vmin;border-radius:14px}

/* ==========================================================================
   Aktions-Einblendungen beim Scrollen
   Bewusst OHNE erfundene Prozentangaben: Ein „-30 %" ohne Artikel dahinter
   wäre eine Preisangabe über Ware, die es nicht gibt. Was hier steht, ist die
   Sprache des Marktes und stimmt immer.
   ========================================================================== */
.pop{
  position:fixed;z-index:70;pointer-events:none;
  display:flex;align-items:center;gap:.5rem;
  padding:.5rem .9rem;border-radius:999px;
  font-family:var(--font-display);font-weight:700;font-size:.86rem;
  background:var(--gelb);color:var(--tinte);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.5);
  opacity:0;transform:translateY(14px) scale(.9) rotate(-3deg);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.pop--rot{background:var(--rot);color:#fff}
.pop--gruen{background:var(--gruen);color:#fff}
.pop.ist-da{opacity:1;transform:translateY(0) scale(1) rotate(-2deg)}
.pop__zeichen{font-size:1.05rem;line-height:1}
@media (prefers-reduced-motion:reduce){.pop{display:none}}
@media (max-width:600px){.pop{font-size:.78rem;padding:.42rem .75rem}}