/*
 * Realdot Brillen-AR – Frontend
 * Alles unter .rd-brille, Klassen rd-brille__… (BEM), Zustände is-…, Variablen --rd-brille-….
 * Farben einfach ändern: Brillen-AR → Farben & Design. Alles Weitere: Custom CSS.
 */
/* =====================================================================
   Plugin-CSS – alles unter .rd-brille, Klassen rd-brille__…
   ===================================================================== */
.rd-brille {
  /* Kontraste gegen Weiß: accent 4,6:1 (weiße Schrift darauf ebenso),
     text-muted 6,3:1, line-ui 3,3:1 (Rahmen Bedienelemente). */
  --rd-brille-accent: #E42313;          /* FORSEC-Rot aus dem Logo */
  --rd-brille-text: #1F1F22;
  --rd-brille-text-muted: #5F5F66;
  --rd-brille-line: #E4E4E8;
  --rd-brille-line-ui: #8E8E97;
  --rd-brille-radius: 6px;
  --rd-brille-stage-light: linear-gradient(160deg, #F6F6F7 0%, #ECECEE 60%, #E4E4E7 100%);
  --rd-brille-stage-dark: radial-gradient(65% 55% at 50% 45%, #25252A 0%, #121214 60%, #09090A 100%);
  --rd-brille-toolbar-light: rgba(255,255,255,.92);
  --rd-brille-toolbar-dark: rgba(28,28,32,.86);
  --rd-brille-info-bg: #fff;
  color: var(--rd-brille-text);
  line-height: 1.45;
}
.rd-brille *, .rd-brille *::before, .rd-brille *::after { box-sizing: border-box; }

/* Reset gegen fremdes CSS (Theme, andere Plugins).
   Zielt auf die EIGENEN Klassen: Spezifität (0,2,0) schlägt typische Theme-Regeln
   wie „button {…}“ oder „.uk-section button {…}“ (0,1,1). Steht vor den
   Komponenten-Regeln (ebenfalls 0,2,0) → die gewinnen bei Gleichstand. */
.rd-brille :is(.rd-brille__tool, .rd-brille__dot, .rd-brille__close, .rd-brille__round-button, .rd-brille__thumb, .rd-brille__load, .rd-brille__tip-start) {
  margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; line-height: inherit;
  text-transform: none; letter-spacing: normal; text-shadow: none; text-decoration: none; box-shadow: none;
  min-width: 0; min-height: 0; width: auto; height: auto; border-radius: 0; -webkit-appearance: none; appearance: none; }
.rd-brille :is(.rd-brille__group) { margin: 0; padding: 0; border: 0; min-width: 0; }
.rd-brille :is(.rd-brille__legend) { float: none; width: auto; margin: 0; padding: 0; border: 0; font: inherit; color: inherit; }
.rd-brille :is(.rd-brille__thumbs) { margin: 0; padding: 0; list-style: none; }
.rd-brille :is(.rd-brille__info-title, .rd-brille__info-text, .rd-brille__tip-title, .rd-brille__tip-text) { margin: 0; }
.rd-brille :where(img, svg) { max-width: none; }

.rd-brille :focus-visible { outline: 3px solid #111; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(255,255,255,.9); }
.rd-brille .rd-brille__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rd-brille [hidden] { display: none !important; }

/* ---------- Bühne ---------- */
.rd-brille .rd-brille__stage { position: relative; aspect-ratio: 1 / 1; border-radius: var(--rd-brille-radius); overflow: hidden;
  background: var(--rd-brille-stage-light); }
.rd-brille[data-stage="dark"] .rd-brille__stage { background: var(--rd-brille-stage-dark); }
.rd-brille .rd-brille__viewer { width: 100%; height: 100%; --poster-color: transparent; }
.rd-brille .rd-brille__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }

.rd-brille .rd-brille__progress { position: absolute; left: 50%; top: 50%; width: 36%; height: 4px; transform: translate(-50%, -50%);
  background: rgba(0,0,0,.12); border-radius: 2px; overflow: hidden; }
.rd-brille[data-stage="dark"] .rd-brille__progress { background: rgba(255,255,255,.18); }
.rd-brille .rd-brille__progress-bar { display: block; height: 100%; width: 0; background: var(--rd-brille-text); transition: width .2s; }
.rd-brille[data-stage="dark"] .rd-brille__progress-bar { background: #fff; }
.rd-brille .rd-brille__progress.is-done { display: none; }

/* ---------- Hinweis-Punkte (3D, aus dem GLB) ---------- */
.rd-brille .rd-brille__hotspot { position: relative; width: 44px; height: 44px; }
.rd-brille .rd-brille__dot { position: absolute; inset: 0; cursor: pointer; }
.rd-brille .rd-brille__dot::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 3px solid #fff;
  background: rgba(31,31,34,.55); box-shadow: 0 1px 4px rgba(0,0,0,.35); transition: transform .15s, background-color .15s; }
.rd-brille .rd-brille__dot::after { content: ""; position: absolute; inset: 10px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9); animation: rd-brille-pulse 2.4s ease-out infinite; }
.rd-brille .rd-brille__dot:hover::before { transform: scale(1.12); }
.rd-brille .rd-brille__dot[aria-expanded="true"]::before { background: var(--rd-brille-accent); transform: scale(1.12); }
.rd-brille .rd-brille__dot[aria-expanded="true"]::after { animation: none; opacity: 0; }
@keyframes rd-brille-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rd-brille .rd-brille__dot::after { animation: none; opacity: 0; } }
.rd-brille .rd-brille__hotspot:not([data-visible]) { opacity: .28; }
.rd-brille .rd-brille__hotspot:not([data-visible]) .rd-brille__dot { pointer-events: none; }
.rd-brille .rd-brille__hotspot:not([data-visible]) .rd-brille__dot::after { animation: none; opacity: 0; }
.rd-brille .rd-brille__hotspot:not([data-visible]) .rd-brille__info { display: none; }
.rd-brille.is-hints-off .rd-brille__hotspot, .rd-brille.is-hints-off .rd-brille__info--bottom { display: none; }

.rd-brille .rd-brille__info { position: absolute; top: 50%; left: 50px; transform: translateY(-50%); width: 230px;
  padding: 11px 36px 11px 14px; background: var(--rd-brille-info-bg); border-radius: var(--rd-brille-radius);
  box-shadow: 0 6px 22px rgba(0,0,0,.18); font-size: .86rem; text-align: left; cursor: auto; }
.rd-brille .rd-brille__hotspot.is-left .rd-brille__info { left: auto; right: 50px; }
.rd-brille .rd-brille__info-title { margin: 0 0 3px; font-size: .95rem; line-height: 1.3; font-weight: 700; color: var(--rd-brille-text); }
.rd-brille .rd-brille__info-text { color: var(--rd-brille-text-muted); }
.rd-brille .rd-brille__info--bottom { top: auto; left: 10px; right: 10px; bottom: 66px; width: auto; transform: none; z-index: 3; padding-right: 40px; }
.rd-brille .rd-brille__close { position: absolute; right: 2px; top: 2px; width: 32px; height: 32px; display: grid; place-items: center;
  font-size: 1.25rem; line-height: 1; color: var(--rd-brille-text-muted); cursor: pointer; border-radius: 4px; }

/* ---------- QR-Karte oben rechts (wie Tür-Konfigurator) ---------- */
.rd-brille .rd-brille__qr-card { position: absolute; top: 10px; right: 10px; z-index: 5; display: flex; gap: 10px; align-items: center;
  max-width: calc(100% - 20px); padding: 8px 30px 8px 8px; background: #fff; border-radius: 8px; box-shadow: 0 6px 22px rgba(0,0,0,.18); }
.rd-brille .rd-brille__qr { width: 84px; height: 84px; flex: none; }
.rd-brille .rd-brille__qr svg { width: 100%; height: 100%; display: block; }
.rd-brille .rd-brille__qr-text { max-width: 150px; font-size: .78rem; color: var(--rd-brille-text-muted); line-height: 1.35; }
.rd-brille .rd-brille__qr-title { display: block; margin-bottom: 3px; color: var(--rd-brille-text); font-size: .87rem; line-height: 1.25; }
.rd-brille .rd-brille__qr-card .rd-brille__close { width: 28px; height: 28px; }

.rd-brille .rd-brille__actions { position: absolute; top: 10px; right: 10px; z-index: 4; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.rd-brille .rd-brille__round-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px;
  padding: 0 12px; border-radius: 999px; background: #fff; color: var(--rd-brille-text); font-weight: 700;
  font-size: .88rem; box-shadow: 0 2px 10px rgba(0,0,0,.2); cursor: pointer; }
.rd-brille .rd-brille__round-button svg { width: 20px; height: 20px; flex: none; }
.rd-brille .rd-brille__round-button--icon { padding: 0; width: 44px; }

/* ---------- Werkzeugleiste unten (wie Tür-Konfigurator) ---------- */
.rd-brille .rd-brille__toolbar { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 4;
  display: flex; align-items: center; gap: 2px; max-width: calc(100% - 20px); overflow-x: auto; scrollbar-width: none;
  padding: 4px; border-radius: 999px; background: var(--rd-brille-toolbar-light); box-shadow: 0 2px 12px rgba(0,0,0,.14); }
.rd-brille .rd-brille__toolbar::-webkit-scrollbar { display: none; }
.rd-brille[data-stage="dark"] .rd-brille__toolbar { background: var(--rd-brille-toolbar-dark); box-shadow: 0 2px 14px rgba(0,0,0,.5); }
.rd-brille .rd-brille__tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  height: 38px; min-width: 38px; padding: 0 12px; border-radius: 999px;
  color: var(--rd-brille-text); font-size: .86rem; cursor: pointer; white-space: nowrap; }
.rd-brille .rd-brille__tool--icon { padding: 0; width: 38px; }
.rd-brille .rd-brille__tool svg { width: 18px; height: 18px; flex: none; }
.rd-brille .rd-brille__tool:hover { background: rgba(0,0,0,.06); }
.rd-brille[data-stage="dark"] .rd-brille__tool { color: #EBEBF0; }
.rd-brille[data-stage="dark"] .rd-brille__tool:hover { background: rgba(255,255,255,.12); }
.rd-brille .rd-brille__tool.is-active { background: var(--rd-brille-accent); color: #fff; font-weight: 600; }
.rd-brille .rd-brille__divider { width: 1px; height: 20px; margin: 0 4px; flex: none; background: rgba(0,0,0,.15); }
.rd-brille[data-stage="dark"] .rd-brille__divider { background: rgba(255,255,255,.2); }
.rd-brille .rd-brille__icon-light { display: none; } .rd-brille[data-stage="dark"] .rd-brille__icon-light { display: block; }
.rd-brille[data-stage="dark"] .rd-brille__icon-dark { display: none; }

/* AR-Hinweis (Hand) wie 2025 */
.rd-brille .rd-brille__ar-prompt { position: absolute; left: 50%; bottom: 70px; animation: rd-brille-sway 2s infinite ease-in-out alternate; }
.rd-brille .rd-brille__ar-prompt img { animation: rd-brille-circle 4s linear infinite; }
@keyframes rd-brille-circle { from { transform: translateX(-50%) rotate(0) translateX(50px) rotate(0); } to { transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg); } }
@keyframes rd-brille-sway { from { transform: translateX(100px); } to { transform: translateX(-100px); } }

/* ---------- Vorschaubilder ---------- */
.rd-brille .rd-brille__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.rd-brille .rd-brille__thumb { display: block; width: 72px; height: 72px; border: 1px solid var(--rd-brille-line); border-radius: var(--rd-brille-radius);
  background: #fff; cursor: pointer; overflow: hidden; }
.rd-brille .rd-brille__thumb[aria-current="true"] { border: 2px solid var(--rd-brille-text); }
.rd-brille .rd-brille__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rd-brille .rd-brille__thumb-3d { display: grid; place-items: center; height: 100%; background: #F2F2F4; font-weight: 700; font-size: .8rem; text-align: center; }
.rd-brille .rd-brille__thumb-3d svg { width: 28px; height: 28px; display: block; margin: 0 auto 2px; }

/* ---------- Farben ---------- */
.rd-brille .rd-brille__options { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rd-brille-line); display: grid; gap: 14px; }
.rd-brille .rd-brille__legend { margin-bottom: 6px; font-size: .9rem; font-weight: 700; }
.rd-brille .rd-brille__value { font-weight: 400; color: var(--rd-brille-text-muted); }
.rd-brille .rd-brille__swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-brille .rd-brille__swatch-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.rd-brille .rd-brille__swatch-label { display: block; width: 44px; height: 44px; border-radius: 50%; padding: 4px; cursor: pointer; border: 2px solid transparent; }
.rd-brille .rd-brille__swatch-color { display: block; width: 100%; height: 100%; border-radius: 50%; border: 1px solid var(--rd-brille-line-ui); }
.rd-brille .rd-brille__swatch-input:checked + .rd-brille__swatch-label { border-color: var(--rd-brille-text); }
.rd-brille .rd-brille__swatch-input:focus-visible + .rd-brille__swatch-label { outline: 3px solid #111; outline-offset: 2px; }
.rd-brille .rd-brille__swatch--lens .rd-brille__swatch-color { background-image: linear-gradient(var(--c), var(--c)),
  repeating-conic-gradient(#fff 0 25%, #D9D9DE 0 50%); background-size: auto, 10px 10px; }

@media (max-width: 520px) {
  .rd-brille .rd-brille__tool { height: 34px; min-width: 34px; padding: 0 9px; font-size: .8rem; }
  .rd-brille .rd-brille__tool--icon { width: 34px; padding: 0; }
  .rd-brille .rd-brille__toolbar { bottom: 8px; }
  .rd-brille .rd-brille__info--bottom { bottom: 56px; }
}

/* ---------- Video in der Galerie ---------- */
.rd-brille .rd-brille__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.rd-brille .rd-brille__thumb--video { position: relative; background: #111; }
.rd-brille .rd-brille__thumb--video video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.rd-brille .rd-brille__play { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 1px 6px rgba(0,0,0,.35); }
.rd-brille .rd-brille__play::after { content: ""; position: absolute; left: 12px; top: 9px; border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #1F1F22; }

/* ---------- AR-Knopf (im Slot von model-viewer, links neben dem QR-Symbol) ---------- */
.rd-brille .rd-brille__ar-button { position: absolute; top: 10px; right: 62px; z-index: 4; }
.rd-brille .rd-brille__ar-button--solo { right: 10px; }

/* ---------- AR-Diagnose (?rd-ar-test) ---------- */
.rd-brille .rd-brille__diagnose { position: absolute; left: 10px; top: 10px; z-index: 7; max-width: calc(100% - 20px); margin: 0; padding: 8px 10px;
  background: rgba(0,0,0,.82); color: #fff; font: 12px/1.5 ui-monospace, Menlo, monospace; border-radius: 6px; white-space: pre-wrap; }

/* ---------- Erst nach Klick laden (Poster) ---------- */
.rd-brille .rd-brille__poster { position: absolute; inset: 0; display: grid; place-items: center; background-size: contain;
  background-position: center; background-repeat: no-repeat; }
.rd-brille .rd-brille__load { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--rd-brille-accent); color: #fff; font-weight: 700; box-shadow: 0 4px 16px rgba(0,0,0,.25); cursor: pointer; }
.rd-brille .rd-brille__load svg { width: 20px; height: 20px; }

/* ---------- AR-Hinweis (Handy, vor dem Start) ---------- */
.rd-brille .rd-brille__tip { position: absolute; left: 10px; right: 10px; bottom: 66px; z-index: 6; padding: 14px 44px 14px 16px;
  background: var(--rd-brille-info-bg); color: var(--rd-brille-text); border-radius: var(--rd-brille-radius); box-shadow: 0 8px 28px rgba(0,0,0,.28); font-size: .88rem; }
.rd-brille .rd-brille__tip-title { margin: 0 0 4px; font-weight: 700; }
.rd-brille .rd-brille__tip-text { margin: 0 0 10px; color: var(--rd-brille-text-muted); }
.rd-brille .rd-brille__tip-start { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--rd-brille-accent); color: #fff; font-weight: 700; cursor: pointer; }

/* ---------- Hinweis für Redakteure (nur mit Bearbeitungsrechten sichtbar) ---------- */
.rd-brille-hinweis { padding: 10px 12px; border: 1px dashed #b32d2e; color: #b32d2e; font-size: 14px; }