/* ══════════════════════════════════════════════════════════════════════════
   3D-Ansicht (Punktwolken-Modell) — Drohnen-Blick.de
   Wird nur auf der Startseite geladen. Die Bedienung entspricht dem
   Viewer aus dem Kundenexport; Farben und Typografie folgen der Website.
   ═════════════════════════════════════════════════════════════════════════ */

.sv {
  --sv-dark: #131416;
  --sv-gold: var(--db-gold, #B8922A);
  --sv-gold-light: var(--db-gold-light, #D4A843);
  --sv-head: var(--db-font-head, 'Montserrat', sans-serif);
  --sv-body: var(--db-font-body, 'Inter', sans-serif);
  --sv-ease: var(--db-ease, cubic-bezier(0.22, 1, 0.36, 1));
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: transparent;
  transition: background .4s ease;
}
/* Laden: halbdurchsichtig, damit die goldene Vorschau-Animation durchscheint */
.sv[data-state="loading"],
.sv[data-state="preparing"] { background: rgba(19, 20, 22, .82); }
.sv[data-state="ready"],
.sv[data-state="error"] { background: var(--sv-dark); }

/* Karte im 3D-Zustand: Vorschau-Animation und Etikett treten zurueck */
.verm-canvas-card.is-3d #cloud-canvas { opacity: 0; transition: opacity .6s ease; }
.verm-canvas-card.is-3d .verm-canvas-tag { opacity: 0; transition: opacity .25s ease; }

/* ── Zeichenfläche ────────────────────────────────────────────────────── */
.sv-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  outline: none;
  opacity: 0;
  transition: opacity .6s ease;
  touch-action: pan-y;
  background: var(--sv-dark);
  pointer-events: none;            /* vor dem Laden liegt der Knopf oben */
}
.sv[data-state="ready"] .sv-canvas { opacity: 1; pointer-events: auto; }
.sv[data-place="overlay"] .sv-canvas,
.sv:fullscreen .sv-canvas { touch-action: none; }
.sv.is-active .sv-canvas { cursor: grab; }
.sv.is-active .sv-canvas.is-dragging { cursor: grabbing; }

/* ── Startzustand ─────────────────────────────────────────────────────── */
.sv-start { display: grid; justify-items: center; gap: 12px; padding: 18px; text-align: center; }
.sv[data-state="loading"] .sv-start,
.sv[data-state="preparing"] .sv-start,
.sv[data-state="ready"] .sv-start,
.sv[data-state="error"] .sv-start { display: none; }

.sv-play {
  display: inline-flex; align-items: center; gap: 14px;
  height: 56px; padding: 0 26px 0 8px;
  border: 1px solid #fff; border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--db-ink, #1C1C1E);
  font-family: var(--sv-head); font-size: 15px; font-weight: 600; line-height: 1;
  white-space: nowrap; cursor: pointer;
  box-shadow: 0 12px 30px -10px rgba(28, 28, 30, .5);
  transition: transform .3s var(--sv-ease), box-shadow .3s var(--sv-ease);
}
/* hidden muss gegen display:inline-flex gewinnen (Browser ohne WebGL2/WebGPU) */
.sv-play[hidden],
.sv[data-state="unsupported"] .sv-play { display: none; }
.sv-play:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(28, 28, 30, .55); }
.sv-play:focus { outline: none; }
.sv-play:focus-visible { outline: 3px solid var(--sv-gold); outline-offset: 3px; }
.sv-play-icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--sv-gold), var(--sv-gold-light));
  color: #fff;
  transition: transform .3s var(--sv-ease);
}
.sv-play:hover .sv-play-icon { transform: scale(1.06); }
.sv-play-icon svg { width: 17px; height: 17px; display: block; }
.sv-size { color: var(--db-ink-3, #8E8E93); font-weight: 600; }

.sv-note {
  max-width: 34ch; margin: 0;
  font-family: var(--sv-body); font-size: 12.5px; line-height: 1.45;
  color: var(--db-ink-2, #48484A);
}
.sv-note--warn {
  padding: 8px 14px; border-radius: 12px;
  border: 1px solid rgba(184, 146, 42, .45);
  background: rgba(245, 237, 213, .75);
  color: #6b5a1e;
}
.sv-note[hidden] { display: none; }

/* ── Ladezustand ──────────────────────────────────────────────────────── */
.sv-progress { display: none; width: min(300px, 78%); text-align: center; color: #fff; }
.sv[data-state="loading"] .sv-progress,
.sv[data-state="preparing"] .sv-progress { display: block; }
.sv-progress-label {
  font-family: var(--sv-head); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .92);
}
.sv-bar {
  width: 100%; height: 4px; margin: 12px 0 9px;
  border-radius: 2px; background: rgba(255, 255, 255, .16); overflow: hidden;
}
.sv-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--sv-gold), var(--sv-gold-light));
  transition: width .2s linear;
}
.sv-progress-sub {
  font-family: var(--sv-body); font-size: 12.5px; color: rgba(255, 255, 255, .7);
  font-variant-numeric: tabular-nums;
}
.sv-cancel {
  margin-top: 14px; padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px;
  background: rgba(255, 255, 255, .08); color: #fff;
  font-family: var(--sv-head); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  transition: background .2s ease;
}
.sv-cancel:hover { background: rgba(255, 255, 255, .18); }
.sv-cancel:focus { outline: none; }
.sv-cancel:focus-visible { outline: 3px solid var(--sv-gold-light); outline-offset: 3px; }

/* ── Bedien-Ebene des Viewers ─────────────────────────────────────────── */
.sv-ui {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0; visibility: hidden;      /* unsichtbar heißt auch: nicht mit Tab erreichbar */
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.sv[data-state="ready"] .sv-ui { opacity: 1; visibility: visible; transition: opacity .4s ease; }
.sv-ui > * { pointer-events: auto; }

.sv-title {
  position: absolute; left: 16px; top: 14px; pointer-events: none;
  font-family: var(--sv-head); font-size: 13px; font-weight: 600; letter-spacing: .06em;
  color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
.sv-title small {
  display: block; margin-top: 3px;
  font-family: var(--sv-body); font-size: 11px; font-weight: 400; letter-spacing: 0;
  color: rgba(255, 255, 255, .62);
}

.sv-compass {
  position: absolute; right: 14px; top: 14px;
  width: 56px; height: 56px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%;
  background: rgba(19, 20, 22, .72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer;
}
.sv-compass svg { width: 100%; height: 100%; display: block; }
.sv-needle { transform-origin: 28px 28px; transition: transform .08s linear; }

.sv-tools { position: absolute; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.sv-btn {
  width: 40px; height: 40px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px;
  background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .88);
  display: grid; place-items: center; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.sv-btn:hover { background: rgba(184, 146, 42, .26); border-color: var(--sv-gold); color: #fff; }
.sv-btn:focus { outline: none; }
.sv-btn:focus-visible { outline: 3px solid var(--sv-gold-light); outline-offset: 2px; }
.sv-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sv-compass:focus { outline: none; }
.sv-compass:focus-visible { outline: 3px solid var(--sv-gold-light); outline-offset: 2px; }

.sv-hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  max-width: calc(100% - 120px);
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(19, 20, 22, .78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--sv-body); font-size: 12px; line-height: 1.35;
  color: rgba(255, 255, 255, .88); text-align: center;
  pointer-events: none;
  opacity: 0; transition: opacity .25s ease;
}
.sv-hint.is-on { opacity: 1; }
.sv-hint b { color: var(--sv-gold-light); font-weight: 600; }

/* ── Hilfe und Fehler ─────────────────────────────────────────────────── */
.sv-panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(400px, 92%); max-height: calc(100% - 32px); overflow: auto;
  padding: 18px 20px; border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(19, 20, 22, .95);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #fff; text-align: left;
}
.sv-panel[hidden] { display: none; }
.sv-panel h3 {
  margin: 0 0 12px; font-family: var(--sv-head); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sv-gold-light);
}
.sv-panel table { border-collapse: collapse; width: 100%; }
.sv-panel td { padding: 4px 12px 4px 0; vertical-align: top; font-family: var(--sv-body); font-size: 13px; line-height: 1.4; }
.sv-panel td:first-child {
  white-space: nowrap; font-family: var(--sv-head); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .62);
}
.sv-panel-x {
  position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #fff;
  font-size: 15px; line-height: 1; cursor: pointer;
}
.sv-panel-x:hover { background: rgba(255, 255, 255, .18); }
.sv-panel-x:focus { outline: none; }
.sv-panel-x:focus-visible { outline: 3px solid var(--sv-gold-light); outline-offset: 2px; }

.sv-error { border-left: 3px solid var(--sv-gold); }
.sv-error p { margin: 0 0 14px; font-family: var(--sv-body); font-size: 13.5px; line-height: 1.5; }
.sv-error-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sv-act {
  padding: 10px 18px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--sv-head); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.sv-act--gold { background: linear-gradient(135deg, var(--sv-gold), var(--sv-gold-light)); color: #fff; }
.sv-act--ghost { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .5); }
.sv-act[hidden] { display: none; }
.sv-act:focus { outline: none; }
.sv-act:focus-visible { outline: 3px solid var(--sv-gold-light); outline-offset: 3px; }

/* ── Vollbild (Desktop) ───────────────────────────────────────────────── */
.sv:fullscreen { border-radius: 0; background: var(--sv-dark); }
.sv:-webkit-full-screen { border-radius: 0; background: var(--sv-dark); }

/* ── Vollbild-Ebene (Touch-Geräte und Browser ohne Vollbild-API) ──────── */
.sv-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: var(--sv-dark);
  display: none;
  overscroll-behavior: none;
}
.sv-overlay.is-on { display: block; }
.sv-overlay .sv { position: absolute; inset: 0; border-radius: 0; }
.sv-overlay .sv-ui {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.sv-overlay .sv-compass { top: calc(max(14px, env(safe-area-inset-top)) + 54px); right: 14px; }
.sv-overlay .sv-tools { bottom: max(14px, env(safe-area-inset-bottom)); }
.sv-overlay .sv-hint { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 4px); }
.sv-close {
  position: absolute; right: 14px; top: max(14px, env(safe-area-inset-top));
  z-index: 4; width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px;
  background: rgba(19, 20, 22, .72); color: #fff;
  display: grid; place-items: center; cursor: pointer;
}
.sv-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sv-close:focus { outline: none; }
.sv-close:focus-visible { outline: 3px solid var(--sv-gold-light); outline-offset: 2px; }
.sv-placeholder { position: absolute; inset: 0; background: var(--sv-dark); border-radius: inherit; }

/* Karte im Zustand „geladen, Bedienung im Vollbild" (Touch) */
.sv-open {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: none; align-items: center; gap: 10px;
  height: 44px; padding: 0 20px;
  border: 1px solid #fff; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: var(--db-ink, #1C1C1E);
  font-family: var(--sv-head); font-size: 13px; font-weight: 600;
  cursor: pointer; box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .6);
}
.sv[data-state="ready"][data-touch="1"][data-place="card"] .sv-open { display: inline-flex; }
.sv[data-state="ready"][data-touch="1"][data-place="card"] .sv-hint,
.sv[data-state="ready"][data-touch="1"][data-place="card"] .sv-tools { display: none; }
.sv-open:focus { outline: none; }
.sv-open:focus-visible { outline: 3px solid var(--sv-gold); outline-offset: 3px; }

/* Aktiver Zustand: Rahmen zeigt, dass Mausrad und Tasten im Modell landen */
.sv.is-active::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid rgba(212, 168, 67, .9); pointer-events: none;
}
.sv[data-place="overlay"].is-active::after,
.sv:fullscreen.is-active::after { display: none; }

/* Eigener Mauszeiger der Startseite über dem Modell ausblenden */
html.sv-hover #cursor-dot,
html.sv-hover #cursor-ring { opacity: 0 !important; }

.sv:focus { outline: none; }
.sv:focus-visible { outline: 3px solid var(--sv-gold-light); outline-offset: -3px; }

.sv-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 640px) {
  .sv-play { height: 48px; font-size: 14px; padding: 0 20px 0 6px; }
  .sv-play-icon { width: 36px; height: 36px; }
  .sv-title { font-size: 12px; }
  .sv-hint { font-size: 11.5px; max-width: calc(100% - 28px); }
}

@media (prefers-reduced-motion: reduce) {
  .sv, .sv-canvas, .sv-ui, .sv-hint, .sv-play, .sv-play-icon,
  .verm-canvas-card #cloud-canvas { transition-duration: .01ms !important; }
}