/* ==========================================================================
   Shop. Ein Produkt, gross auf einer dunklen Buehne, in der Sprache der Garage:
   Tinte, Gelb nur fuer Preis und Knopf, Cyan fuer die Mono-Marken, schwebender Staub.
   Der Anhaenger wackelt von selbst leicht und neigt sich zur Maus.
   Farben und Schriften kommen aus style.css (--ink, --yellow, --cyan ...).
   ========================================================================== */
body { background-image: none; }
.shop-seite { position: relative; }
.shop-staub { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.shop-seite > *:not(.shop-staub) { position: relative; z-index: 1; }
.shop-marke { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); margin: 0; }
.shop-marke b { color: var(--yellow); font-weight: 500; }
.shop-status-leiste:empty { display: none; }
.shop-status-leiste { max-width: 760px; margin: 20px auto 0; padding: 0 20px; }

/* ---------- Ein Produkt ---------- */
/* Die Hoehe ergibt sich aus dem Inhalt, nicht aus dem Fenster: sonst bliebe bei hohen,
   schmalen Fenstern viel Leere um den Anhaenger. */
.stueck { display: grid; grid-template-rows: auto auto auto; padding: 28px 5vw 40px; }
.stueck-buehne { position: relative; display: grid; place-items: center; perspective: 1000px; padding: clamp(28px, 7vh, 90px) 0; }
.stueck-schein { position: absolute; width: 46%; aspect-ratio: 1.8; border-radius: 50%; background: radial-gradient(closest-side, rgba(245,224,0,.1), rgba(245,224,0,0)); filter: blur(14px); pointer-events: none; }
/* Aussen wackelt es von selbst, innen neigt es sich zur Maus. Zwei Ebenen, damit sich beides
   nicht gegenseitig ueberschreibt. */
.stueck-wackeln { transform-style: preserve-3d; animation: stueck-wackeln 7s ease-in-out infinite; }
@keyframes stueck-wackeln {
  0%, 100% { transform: rotateX(6deg) rotateY(-10deg) rotateZ(-2deg) translateY(0); }
  33%      { transform: rotateX(2deg) rotateY(6deg) rotateZ(1deg) translateY(-10px); }
  66%      { transform: rotateX(8deg) rotateY(-2deg) rotateZ(-1deg) translateY(-4px); }
}
.stueck-foto { display: block; width: min(40vw, 560px, 50svh); height: auto; border-radius: 24px; box-shadow: 0 60px 120px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06); transition: transform .6s cubic-bezier(.16,1,.3,1); will-change: transform; }
.stueck-foto.ist-frei { width: min(72vw, 760px); border-radius: 0; box-shadow: none; filter: drop-shadow(0 38px 36px rgba(0,0,0,.75)); }
.stueck-leer { width: min(40vw, 560px, 50svh); aspect-ratio: 4 / 3; border-radius: 24px; background: var(--panel); display: grid; place-items: center; color: var(--muted); }
.stueck-leer svg { width: 30%; }

.stueck-fuss { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "titel kaufen" "text kaufen" "hinweis kaufen"; align-items: end; column-gap: 28px; border-top: 1px solid var(--line); padding-top: 24px; }
.stueck-titel { grid-area: titel; }
.stueck-kaufen { grid-area: kaufen; }
.stueck-text { grid-area: text; }
.stueck-fuss .stueck-titel { font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: .95; letter-spacing: -.04em; margin: 0 0 14px; max-width: 18ch; overflow-wrap: normal; hyphens: manual; }
.stueck-text { font-family: var(--font-body); line-height: 1.6; color: rgba(244,244,242,.8); max-width: 58ch; margin: 0; white-space: pre-line; }
.stueck-kaufen { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.stueck-hinweis { grid-area: hinweis; margin-top: 22px; padding: 16px 18px; border: 1px solid var(--line); border-left: 2px solid var(--cyan); border-radius: 4px; max-width: 58ch; background: rgba(19,19,25,.6); }
.stueck-hinweis .shop-marke { margin-bottom: 8px; }
.stueck-hinweis p:not(.shop-marke) { margin: 0 0 10px; font-family: var(--font-body); line-height: 1.55; color: var(--paper); }
.stueck-hinweis a { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); text-decoration: none; }
.stueck-hinweis a:hover { text-decoration: underline; }
.stueck-preis { display: flex; align-items: baseline; gap: 12px; }
.stueck-preis b { font-size: 2.2rem; color: var(--yellow); letter-spacing: -.02em; }
.stueck-preis span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.stueck-reihe { display: flex; gap: 10px; }
.stueck-groesse { background: var(--panel); color: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 0 18px; font: inherit; }
.stueck-knopf { background: var(--yellow); color: var(--ink); border: 0; border-radius: 999px; font: inherit; font-weight: 700; font-size: 1rem; padding: 16px 30px; cursor: pointer; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.stueck-knopf:hover { transform: translateY(-2px); }
.stueck-knopf:disabled { background: transparent; color: var(--yellow); box-shadow: inset 0 0 0 1px var(--yellow); cursor: default; transform: none; }

@media (max-width: 760px) {
  .stueck { padding: 24px 18px 36px; min-height: 0; }
  .stueck-foto, .stueck-leer { width: 88vw; }
  .stueck-fuss { grid-template-columns: 1fr; grid-template-areas: "titel" "kaufen" "hinweis" "text"; row-gap: 18px; }
  .stueck-fuss .stueck-titel { margin: 0; }
  .stueck-kaufen { align-items: stretch; }
  .stueck-hinweis { margin-top: 0; }
  .stueck-foto.ist-frei { width: 94vw; }
  .stueck-knopf { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .stueck-wackeln { animation: none; transform: rotateX(4deg) rotateY(-6deg); }
  .stueck-foto { transition: none; }
}

/* Solange der Warenkorb leer ist, bleibt sein runder Knopf weg. Er laege sonst ueber dem
   Kaufen-Knopf, und zum Start ist ohnehin noch nichts kaufbar. */
.cart-toggle:has(.cart-count[data-empty="true"]) { display: none; }