/* ═══════════════════════════════════════════════════════════
   Seiten-CSS, shop.html
   Eigenes Bauteil: Produktkachel im Wartezustand (.teaser-card).
   Kein echtes Produkt, keine Marke, nur ein ruhiger Platzhalter.
   ═══════════════════════════════════════════════════════════ */

.teaser-grid{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
}

.teaser-card{
  position:relative; min-width:0; overflow:hidden;
  border-radius:var(--r); border:1px dashed rgba(255,255,255.28);
  background:rgba(255,255,255.04);
  padding:2.1rem 1.4rem 1.6rem; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
}
.teaser-card [data-ico]{color:rgba(255,255,255.55)}
.teaser-card__lbl{
  font-family:var(--ff-d); font-weight:700; font-size:.98rem; color:rgba(255,255,255.86);
}
.teaser-card__soon{
  font-family:var(--ff-d); font-size:.64rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255.5);
  border:1px solid rgba(255,255,255.28); border-radius:999px;
  padding:.25rem .7rem;
}

/* ruhiger Schimmer, läuft diagonal über die Karte, kein Produkt behauptet */
.teaser-card__shimmer{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255.09) 50%, transparent 70%);
  background-size:220% 100%;
  animation:teaser-shimmer 4.5s ease-in-out infinite;
}
@keyframes teaser-shimmer{
  0%{background-position:140% 0}
  60%,100%{background-position:-40% 0}
}

.teaser-note{
  margin-top:1.4rem; font-size:.82rem; text-align:center;
  color:rgba(255,255,255.55);
}

@medianot all{
  .teaser-card__shimmer{animation:none; background:none}
}