/* ===========================================================
   Roomtour Viewer — Stylesheet
   Alle Klassen sind mit .rt- vorangestellt, damit nichts mit
   dem übrigen CSS deiner Website kollidiert.
   =========================================================== */

.rt-tour{
  --rt-bg:#F3F2EE;
  --rt-ink:#1A1A1A;
  --rt-muted:#6B6B66;
  --rt-accent:#B4622F;
  --rt-white:#FFFFFF;
  --rt-shadow: 0 10px 30px rgba(20,20,18,0.10);
  --rt-shadow-sm: 0 4px 14px rgba(20,20,18,0.08);
  --rt-radius: 22px;
  --rt-pill: 999px;
  --rt-hotspot: 32px;
  --rt-duration: 320ms;

  position:relative;
  font-family:-apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color:var(--rt-ink);
  -webkit-font-smoothing:antialiased;
}
.rt-tour *{ box-sizing:border-box; }

/* ---------- Bildrahmen ---------- */
.rt-frame{
  position:relative;
  width:100%;
  aspect-ratio:3/2;
  border-radius:var(--rt-radius);
  overflow:hidden;
  box-shadow:var(--rt-shadow);
  background:#E8E6E0;
}
.rt-stage{
  position:absolute; inset:0;
  transform-origin:50% 50%;
  transition:opacity var(--rt-duration) ease,
             transform var(--rt-duration) cubic-bezier(.4,0,.2,1);
}
.rt-photo{ width:100%; height:100%; object-fit:cover; display:block; }
.rt-empty{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; color:rgba(255,255,255,0.92);
  text-align:center; padding:24px;
}

/* Übergänge: Vorwärts = hineingehen, Rückwärts = herausgehen,
   Drehen = seitlich schwenken, Überblenden = neutral */
.rt-stage.rt-out-forward { opacity:0; transform:scale(calc(1 + var(--rt-zoom, .16))); }
.rt-stage.rt-in-forward  { opacity:0; transform:scale(calc(1 + var(--rt-zoom, .16) * .45)); }
.rt-stage.rt-out-backward{ opacity:0; transform:scale(calc(1 - var(--rt-zoom, .16) * .6)); }
.rt-stage.rt-in-backward { opacity:0; transform:scale(calc(1 - var(--rt-zoom, .16) * .42)); }
.rt-stage.rt-out-turn-left { opacity:0; transform:translateX(14%) scale(1.04); }
.rt-stage.rt-in-turn-left  { opacity:0; transform:translateX(-12%) scale(1.04); }
.rt-stage.rt-out-turn-right{ opacity:0; transform:translateX(-14%) scale(1.04); }
.rt-stage.rt-in-turn-right { opacity:0; transform:translateX(12%) scale(1.04); }
.rt-stage.rt-out-fade{ opacity:0; }
.rt-stage.rt-in-fade { opacity:0; }

/* ---------- Punkte ---------- */
.rt-hotspot{
  position:absolute;
  transform:translate(-50%,-50%);
  width:var(--rt-hotspot); height:var(--rt-hotspot);
  border-radius:50%;
  border:1.5px solid #fff;
  background:rgba(26,26,26,0.32);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding:0;
  -webkit-tap-highlight-color:transparent;
}
.rt-hotspot::before{
  content:'';
  position:absolute; inset:0;
  border-radius:50%;
  border:1.5px solid #fff;
  animation:rt-pulse 2.6s ease-out infinite;
  animation-delay:var(--rt-delay, 0s);
  pointer-events:none;
}
.rt-tour[data-pulse="off"] .rt-hotspot::before{ animation:none; opacity:0; }
.rt-hotspot:hover, .rt-hotspot:focus-visible{ background:rgba(26,26,26,0.55); }
.rt-hotspot:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

.rt-dot{ width:7px; height:7px; border-radius:50%; background:#fff; }
.rt-glyph{ color:#fff; font-size:14px; font-weight:700; line-height:1; }
.rt-glyph-info{ font-size:13px; font-style:italic; font-family:Georgia, serif; }

/* --- Gestaltung der Infopunkte --- */
.rt-hotspot.rt-pin-light{
  background:rgba(255,255,255,0.94);
  border-color:rgba(26,26,26,0.18);
}
.rt-hotspot.rt-pin-light .rt-glyph{ color:var(--rt-ink); }
.rt-hotspot.rt-pin-light::before{ border-color:rgba(255,255,255,0.95); }
.rt-hotspot.rt-pin-light:hover, .rt-hotspot.rt-pin-light:focus-visible{ background:#fff; }

.rt-hotspot.rt-pin-accent{
  background:var(--rt-accent);
  border-color:#fff;
}
.rt-hotspot.rt-pin-accent:hover, .rt-hotspot.rt-pin-accent:focus-visible{ filter:brightness(1.12); }

.rt-hotspot.rt-pin-pill{
  width:auto; height:auto;
  border-radius:var(--rt-pill);
  padding:7px 14px;
  background:rgba(255,255,255,0.94);
  border-color:transparent;
  box-shadow:var(--rt-shadow-sm);
}
.rt-hotspot.rt-pin-pill::before{ display:none; }
.rt-hotspot.rt-pin-pill:hover, .rt-hotspot.rt-pin-pill:focus-visible{ background:#fff; }
.rt-pill-text{
  color:var(--rt-ink);
  font-size:12px; font-weight:700; line-height:1;
  white-space:nowrap;
}

.rt-label{
  position:absolute;
  top:calc(100% + 9px); left:50%;
  transform:translateX(-50%);
  font-size:12px; font-weight:700;
  color:var(--rt-ink);
  white-space:nowrap;
  background:var(--rt-white);
  padding:5px 11px;
  border-radius:var(--rt-pill);
  box-shadow:var(--rt-shadow-sm);
  opacity:0; pointer-events:none;
  transition:opacity 0.15s ease;
}
.rt-hotspot:hover .rt-label, .rt-hotspot:focus-visible .rt-label{ opacity:1; }

@keyframes rt-pulse{
  0%{ transform:scale(1); opacity:0.6; }
  100%{ transform:scale(2.1); opacity:0; }
}

/* ---------- Infotext ---------- */
.rt-note{
  position:absolute;
  bottom:calc(100% + 14px); left:50%;
  transform:translateX(-50%);
  background:var(--rt-white); color:var(--rt-ink);
  font-size:12.5px; line-height:1.45; font-weight:400;
  text-align:left;
  padding:10px 13px;
  width:max-content; max-width:200px;
  border-radius:14px;
  box-shadow:var(--rt-shadow-sm);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.15s ease;
}
.rt-note-title{ display:block; font-weight:700; margin-bottom:3px; }
.rt-note::after{
  content:'';
  position:absolute;
  bottom:-13px; left:50%;
  transform:translateX(-50%);
  width:1.5px; height:13px;
  background:var(--rt-white);
  box-shadow:var(--rt-shadow-sm);
}
.rt-hotspot:hover .rt-note,
.rt-hotspot:focus-visible .rt-note,
.rt-note.rt-open,
.rt-note.rt-always{ opacity:1; visibility:visible; }

/* --- Gestaltung des Textfeldes --- */
.rt-note.rt-note-dark{
  background:rgba(26,26,26,0.92);
  color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,0.28);
}
.rt-note.rt-note-dark::after{ background:rgba(26,26,26,0.92); box-shadow:none; }

.rt-note.rt-note-minimal{
  background:rgba(255,255,255,0.96);
  box-shadow:none;
  border:1px solid rgba(26,26,26,0.16);
  border-radius:8px;
}
.rt-note.rt-note-minimal::after{
  background:rgba(26,26,26,0.28);
  box-shadow:none; width:1px;
}

/* Nahe am Rand kippt der Text nach innen */
.rt-hotspot[data-edge="left"] .rt-note{ left:0; transform:none; }
.rt-hotspot[data-edge="left"] .rt-note::after{ left:14px; transform:none; }
.rt-hotspot[data-edge="right"] .rt-note{ left:auto; right:0; transform:none; }
.rt-hotspot[data-edge="right"] .rt-note::after{ left:auto; right:14px; transform:none; }
.rt-hotspot[data-vedge="top"] .rt-note{ bottom:auto; top:calc(100% + 14px); }
.rt-hotspot[data-vedge="top"] .rt-note::after{ bottom:auto; top:-13px; }

/* ---------- Szenen-Schild ---------- */
.rt-plate{
  position:absolute;
  left:20px; bottom:20px;
  background:var(--rt-white);
  border-radius:var(--rt-pill);
  box-shadow:var(--rt-shadow-sm);
  padding:10px 18px;
  font-size:14px; font-weight:700;
  pointer-events:none;
}
.rt-plate span{
  display:block;
  font-size:11px; font-weight:400;
  color:var(--rt-muted);
  margin-top:1px;
}

/* ---------- Zurück-Schaltfläche ---------- */
.rt-home{
  position:absolute;
  right:20px; bottom:20px;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--rt-white);
  border:none;
  border-radius:var(--rt-pill);
  box-shadow:var(--rt-shadow);
  padding:11px 18px 11px 15px;
  font-size:13.5px; font-weight:700;
  font-family:inherit; color:var(--rt-ink);
  cursor:pointer;
  opacity:0; transform:translateY(8px);
  pointer-events:none;
  transition:opacity 0.2s ease, transform 0.2s ease;
}
.rt-home.rt-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.rt-home.rt-home-left{ right:auto; left:20px; }
.rt-home:hover{ color:var(--rt-accent); }
.rt-home svg{ width:15px; height:15px; flex-shrink:0; }

/* ---------- Szenenleiste ---------- */
.rt-chips{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:8px; margin-top:20px;
}
.rt-chips button{
  background:var(--rt-white);
  border:none;
  border-radius:var(--rt-pill);
  box-shadow:var(--rt-shadow-sm);
  padding:10px 18px;
  font-size:13px; font-weight:700;
  font-family:inherit; color:var(--rt-ink);
  cursor:pointer;
}
.rt-chips button:hover{ color:var(--rt-accent); }
.rt-chips button.rt-active{ background:var(--rt-ink); color:var(--rt-white); }

@media (max-width:640px){
  .rt-tour{ --rt-hotspot:36px; }
  .rt-frame{ border-radius:16px; }
  .rt-plate{ left:12px; bottom:12px; padding:8px 14px; font-size:13px; }
  .rt-home{ right:12px; bottom:12px; padding:9px 14px 9px 12px; font-size:12.5px; }
  .rt-home.rt-home-left{ left:12px; right:auto; }
  .rt-note{ max-width:min(220px, 60vw); }
}

@media (prefers-reduced-motion: reduce){
  .rt-hotspot::before{ animation:none; }
  .rt-stage{ transition:opacity 0.2s ease; }
  .rt-stage[class*="rt-out-"], .rt-stage[class*="rt-in-"]{ transform:none; }
}