/* ============================================================
   produkt-page.css — Produkt-Detail-Seite
   Externalisiert 2026-05-21 aus inline <style> in produkt.html
   (CSP-Sprint Phase 3.2b, rueckwirkend mit Restauration nach
   fe5528c-Datenverlust angewendet).

   Aktuell genutzt: 360°-Viewer-Styles (ID-basierter Container,
   wird per produkt-page.js init360Viewer() befuellt). Der
   360°-Viewer ist derzeit deaktiviert (VIEWER360_PRODUKT_ID = -1),
   die Styles bleiben aber drin fuer spaetere Reaktivierung.
   ============================================================ */

/* ── 360°-Viewer Container ──────────────────────────── */
.viewer360-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ── Ladeanzeige (waehrend Bilder vorgeladen werden) ─ */
.viewer360-lade {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--surface, #1a1a1a);
  border-radius: var(--radius, 8px);
  z-index: 10;
  color: var(--muted, #888);
  font-size: 0.85rem;
}

.viewer360-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border, #333);
  border-top-color: #830e25;
  border-radius: 50%;
  animation: viewer360Spin 0.8s linear infinite;
}

@keyframes viewer360Spin {
  to { transform: rotate(360deg); }
}

/* ── Hauptbild (das aktuelle Frame) ─────────────────── */
.viewer360-bild {
  width: 90%;
  height: 90%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  display: block;
  margin: auto;
  user-select: none;
  -webkit-user-drag: none;
  /* Drag laeuft auf dem Container, nicht dem Bild */
  pointer-events: none;
}

/* ── 360°-Badge oben rechts ────────────────────────── */
.viewer360-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #830e25;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 9px;
  border-radius: 20px;
  z-index: 5;
  pointer-events: none;
}

/* ── Hinweis-Text unter dem Bild ───────────────────── */
.viewer360-hinweis {
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted, #888);
  margin-top: 8px;
  letter-spacing: 0.03em;
}

/* ── Cursor-Verhalten beim Ziehen ──────────────────── */
.viewer360-aktiv {
  cursor: grab;
}

.viewer360-aktiv.zieht {
  cursor: grabbing;
}