/* Interaktive Hausansicht (WIDURO)
   Quelle: Hausanimation-V2/css/parallax.css (Stand 03.11.2026).
   Angepasst fuer die Einbindung in Contao:
     - Standalone-Reset (* und body) entfernt, box-sizing auf .haus-hero begrenzt
     - Bodenbild auf /files/template/img/hausansicht/ground.webp umgestellt
     - z-index 5 auf .haus-dot, __wave, __core (Davids Ergaenzung vom 29.10.2026)
   Seit V2 ist der Boden eine eigene Ebene (.haus-layer--ground) und bleibt
   beim Haus-Shift stehen - der fruehere Gegen-Versatz auf .haus-ground entfaellt.
   Rahmen fest 1296x433 px (Davids Endformat). */

:root{
  --haus-accent: #00969b;
  --haus-tip-bg: #ffffff;
  --haus-tip-fg: #111111;
  --haus-dot-size: 1.05%;
  --haus-shift-x: 9%;   /* Haus-Ebene (inkl. Marker), Boden bleibt stehen */
}

/* ---------- Bühne ---------- */
.haus-hero,
.haus-hero *{ box-sizing: border-box; }

.haus-hero{
  position: relative;
  width: 1296px;
  height: 433px;
  margin: 0 auto;
  overflow: hidden;
  background: #dfe7ec;
  perspective: 1600px;
  perspective-origin: 50% 60%;
  touch-action: pan-y;
}

.haus-scene{
  position: absolute;
  /* Szene behält das Seitenverhältnis der Grafiken (1672/760) und wird
     im 1296×433-Rahmen oben/unten beschnitten statt gestaucht. */
  left: 0; right: 0; top: -20.4%; bottom: -15.65%;
  transform-style: preserve-3d;
  will-change: transform;
}

.haus-layer{ position: absolute; inset: 0; will-change: transform; }
.haus-layer img{ display: block; width: 100%; height: 100%; }

.haus-layer--bg{ transform: translateZ(-700px) scale(1.62, 1.78); }
.haus-layer--bg img{ object-fit: fill; }

.haus-layer--tree{ transform: translateZ(-250px) scale(1.303, 1.432); }
.haus-layer--tree img{ object-fit: fill; }

.haus-layer--ground{ transform: translateZ(200px) scale(0.875); transform-origin: 50% 60%; }
.haus-layer--plate{ transform: translateZ(200px) translate(var(--haus-shift-x, 9%), 0) scale(0.875); transform-origin: 50% 60%; }

/* ---------- Boden & Schatten ---------- */
.haus-ground{
  position: absolute; inset: 0;
  transform: scale(1.05);
  transform-origin: 50% 100%;
  background-image: url(/files/template/img/hausansicht/ground.webp);
  background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 68%, rgba(0,0,0,1) 78%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 68%, rgba(0,0,0,1) 78%);
}

.haus-shadow{ position: absolute; left: 6%; top: 74%; width: 88%; height: 11%; will-change: opacity; }
.haus-shadow span{
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(22,28,22,.40), rgba(22,28,22,.15) 52%, rgba(22,28,22,0) 76%);
  filter: blur(12px);
}

/* ---------- Haus ---------- */
.haus-house{ position: absolute; inset: 0; }
.haus-house > img{ display: block; width: 100%; height: 100%; object-fit: contain; }

.haus-glint{ position: absolute; inset: 0; opacity: .5; pointer-events: none; }
.haus-glint span{
  position: absolute; border-radius: 50%; filter: blur(2px);
  background: radial-gradient(ellipse at 52% 46%, rgba(255,255,255,.72), rgba(255,255,255,.18) 52%, rgba(255,255,255,0) 76%);
}

/* ---------- Marker ---------- */
.haus-hotspots{ position: absolute; inset: 0; }

.haus-dot{
  position: absolute;
  z-index: 5;
  width: var(--haus-dot-size);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: block;
  text-decoration: none;
}
.haus-dot__wave,
.haus-dot__core{
  position: absolute; z-index: 5; inset: 0; border-radius: 50%;
  background: var(--haus-accent);
}
.haus-dot__wave{ animation: hausPing 2.2s cubic-bezier(0,0,.2,1) infinite; }
.haus-dot__wave--b{ animation-delay: .7s; }
.haus-dot__core{
  box-shadow: 0 0 0 .22em rgba(255,255,255,.45), 0 1px 6px rgba(0,0,0,.3);
  animation: hausCore 2.2s ease-in-out infinite;
}

.haus-dot__tip{
  position: absolute;
  left: 50%; bottom: 230%;
  transform: translateX(-50%);
  background: var(--haus-tip-bg);
  color: var(--haus-tip-fg);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .01em;
  padding: 7px 10px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
  pointer-events: none;
  opacity: 0;
  transition: opacity .14s ease;
}
.haus-dot:hover .haus-dot__tip,
.haus-dot:focus-visible .haus-dot__tip{ opacity: 1; }

@keyframes hausPing{
  0%{ transform: scale(1); opacity: .55 }
  70%,100%{ transform: scale(3.2); opacity: 0 }
}
@keyframes hausCore{
  0%,100%{ transform: scale(1) }
  50%{ transform: scale(1.18) }
}

/* ---------- Lens Flare ---------- */
.haus-flare{
  /* an die Szene gekoppelt, damit Lichter unabhängig vom Format sitzen */
  position: absolute; left: 0; right: 0; top: -5.57%; bottom: -4.33%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .42;
  will-change: opacity;
}
.haus-flare__sun{
  position: absolute; left: -9%; top: 24%; width: 36%; height: 46%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,238,206,.55), rgba(255,226,178,.20) 42%, rgba(255,214,150,0) 72%);
  will-change: transform;
}
.haus-flare__ghosts{ position: absolute; inset: 0; will-change: transform; }
.haus-flare__ghosts span{
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--c), var(--a)), rgba(var(--c), 0) 70%);
}

@media (prefers-reduced-motion: reduce){
  .haus-dot__wave, .haus-dot__core{ animation: none; }
}