/* ==========================================================================
   ANIMATIONSSCHICHT ÜBER DEN TECHNIKGRAFIKEN
   --------------------------------------------------------------------------
   Legt eine SVG-Ebene über die Detailgrafiken und zeigt, was im Bauteil
   tatsächlich passiert: Strom fließt zur Ladestation, Wasser läuft durch die
   Leitung, Wärme steigt aus dem Estrich auf, Schall wird von der Wand gedämpft.

   Die Koordinaten stehen in project-data.js (Prozentwerte auf dem Bild).
   Bei "Bewegung reduzieren" im Betriebssystem wird die Ebene nicht gerendert.
   ========================================================================== */

.viz-anim{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:3; overflow:visible;
}

/* ---------- Farbwelt ---------- */
.an-water   { --an:#3E8FB0; --an-soft:#7FC0DA; }
.an-electric{ --an:#C9922F; --an-soft:#EFC978; }
.an-heat    { --an:#B85C39; --an-soft:#E0997A; }
.an-air     { --an:#8FA5AC; --an-soft:#C3D3D8; }
.an-sound   { --an:#5E6B4A; --an-soft:#9DAA85; }
.an-sun     { --an:#D9B45E; --an-soft:#F3E0AE; }

/* ---------- Fließendes Medium entlang einer Leitung ---------- */
.an-flow{
  stroke:var(--an); stroke-width:3.2; stroke-linecap:round;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.55));
  animation-name:anFlow; animation-timing-function:linear; animation-iteration-count:infinite;
  opacity:.92;
}
@keyframes anFlow{ to{ stroke-dashoffset:-60; } }

/* ---------- Fallende Tropfen ---------- */
.an-drop{
  fill:var(--an); opacity:0;
  animation-name:anDrop; animation-timing-function:cubic-bezier(.45,0,.75,.6);
  animation-iteration-count:infinite;
}
@keyframes anDrop{
  0%   { transform:translate(0,0); opacity:0; }
  10%  { opacity:.95; }
  80%  { opacity:.8; }
  100% { transform:translate(var(--dx,0), var(--dy,20px)); opacity:0; }
}

/* ---------- Konzentrische Wellen (Schall) ---------- */
.an-wave{
  stroke:var(--an); stroke-width:1.6; fill:none; opacity:0;
  animation-name:anWave; animation-timing-function:ease-out; animation-iteration-count:infinite;
}
@keyframes anWave{
  0%   { r:1px;  opacity:var(--op,.5); }
  100% { r:var(--r,14px); opacity:0; }
}

/* ---------- Aufsteigende Bögen (Wärme) ---------- */
.an-arc{
  stroke:var(--an); stroke-width:2.2; stroke-linecap:round; fill:none; opacity:0;
  animation-name:anArc; animation-timing-function:ease-out; animation-iteration-count:infinite;
}
@keyframes anArc{
  0%   { transform:translateY(0);      opacity:0; }
  22%  { opacity:.62; }
  100% { transform:translateY(-13px);  opacity:0; }
}

/* ---------- Lichtstrahlen ---------- */
.an-ray{
  stroke:var(--an-soft); stroke-width:2.4; stroke-linecap:round; opacity:.1;
  animation-name:anRay; animation-timing-function:ease-in-out; animation-iteration-count:infinite;
}
@keyframes anRay{ 0%,100%{ opacity:.08; } 50%{ opacity:.46; } }

/* ---------- Rotierender Ventilator ---------- */
.an-spin{
  stroke:rgba(255,255,255,.75); stroke-width:2.4; fill:none;
  stroke-dasharray:14 44; stroke-linecap:round;
  transform-box:view-box;
  animation-name:anSpin; animation-timing-function:linear; animation-iteration-count:infinite;
}
@keyframes anSpin{ to{ transform:rotate(360deg); } }

/* ---------- Pulsierender Lichtpunkt ---------- */
.an-glow{
  transform-box:view-box;
  animation-name:anGlow; animation-timing-function:ease-in-out; animation-iteration-count:infinite;
}
.an-glow-in{  stop-color:var(--an-soft); stop-opacity:.75; }
.an-glow-out{ stop-color:var(--an);      stop-opacity:0;   }
@keyframes anGlow{
  0%,100%{ transform:scale(.75); opacity:.35; }
  50%    { transform:scale(1.15); opacity:.9; }
}

/* ---------- Lichtwischer über den Schichtaufbau ---------- */
.an-sweep{
  animation-name:anSweep; animation-timing-function:ease-in-out; animation-iteration-count:infinite;
  opacity:.0;
}
@keyframes anSweep{
  0%   { transform:translateX(0);           opacity:0; }
  18%  { opacity:.55; }
  82%  { opacity:.55; }
  100% { transform:translateX(var(--sx,50px)); opacity:0; }
}

/* ---------- Legende unter der Grafik ---------- */
.viz-anim-key{
  display:flex; flex-wrap:wrap; gap:.35rem 1.1rem;
  margin:.9rem 0 0; padding:0; list-style:none;
  font-size:.72rem; letter-spacing:.04em; color:var(--muted);
}
.viz-anim-key li{ display:flex; align-items:center; gap:.45rem; }
.viz-anim-key i{
  width:1.4rem; height:2px; border-radius:2px; background:var(--an,#3E8FB0); flex:none;
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  .viz-anim{ display:none; }
}

/* --------------------------------------------------------------------------
   Bildbox exakt auf das Bild legen.
   Vorher war der Rahmen breiter als die Abbildung (max-height am Bild), dadurch
   saß die Animationsebene neben statt auf den Leitungen.
   -------------------------------------------------------------------------- */
.viz-photo{
  position:relative; display:inline-block; width:auto; max-width:100%;
  line-height:0; margin-inline:auto;
}
.viz-photo img{
  display:block; width:auto; height:auto;
  max-width:100%; max-height:46vh;
}
.stage-visual{ text-align:center; }

/* Etwas kräftigere Linien, damit die Bewegung auch auf hellem Grund trägt */
.an-flow{ stroke-width:3.6; }
.an-drop{ r:1.35; }
.an-arc{ stroke-width:2.6; }

/* Grafik so groß wie möglich zeigen, ohne über die native Auflösung zu gehen */
.viz-photo{ width:min(100%, 760px); }
.viz-photo img{ width:100%; max-height:none; }
.stage-visual{ display:flex; align-items:center; justify-content:center; }

/* Wärmebögen kräftiger */
.an-arc{ stroke-width:3; }
@keyframes anArc{
  0%   { transform:translateY(0);     opacity:0; }
  18%  { opacity:.85; }
  100% { transform:translateY(-15px); opacity:0; }
}

/* Wellen etwas kräftiger, damit sie auf strukturiertem Untergrund tragen */
.an-wave{ stroke-width:2; }
.an-sweep{ mix-blend-mode:screen; }

/* Hinweis unter einer Grafik, deren Beschriftung von der Baubeschreibung abweicht */
.viz-note{
  margin:.9rem auto 0; max-width:62ch;
  font-size:.75rem; line-height:1.6; color:var(--muted);
  border-left:2px solid var(--stone); padding-left:.9rem; text-align:left;
}

/* Bild und Hinweis untereinander, nicht nebeneinander */
.stage-visual{ flex-direction:column; align-items:center; justify-content:center; }
.stage-visual > *{ flex:0 0 auto; max-width:100%; }
.viz-photo{ width:min(100%, 780px); }

/* --------------------------------------------------------------------------
   Seitenverhaeltnis-Korrektur (ab V5)
   Die runden Elemente sitzen jetzt in einer Gruppe, die das Seitenverhaeltnis
   des Bildes herausrechnet. Dreh- und Skalier-Animationen beziehen sich
   deshalb auf die eigene Form, nicht mehr auf die viewBox.
   -------------------------------------------------------------------------- */
.an-glow, .an-spin{ transform-box:fill-box; transform-origin:center; }
.an-drop{ r:1.0; }

/* Die neuen Detailgrafiken sind 3:2 und tragen ihre eigene Legende.
   Sie duerfen deshalb die volle Breite der Buehne nutzen. */
.viz-photo{ width:min(100%, 920px); }

/* Detailgrafik ist antippbar und oeffnet sich im Vollbild */
.viz-photo img{ cursor:zoom-in; }
.viz-photo img:focus-visible{ outline:2px solid var(--olive); outline-offset:3px; }
.viz-photo::after{
  content:"Zum Vergrößern tippen";
  position:absolute; right:.6rem; bottom:.6rem; z-index:4;
  font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:rgba(27,33,31,.62); backdrop-filter:blur(2px);
  padding:.28rem .5rem; border-radius:3px; line-height:1.2;
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.viz-photo:hover::after{ opacity:1; }
@media (hover:none){ .viz-photo::after{ opacity:1; } }

/* Detailgrafik im Vollbild: auf schmalen Geraeten wird die Grafik so hoch
   dargestellt, dass die Beschriftung lesbar bleibt, und laesst sich seitlich
   verschieben. */
@media (max-width:820px){
  .lightbox.is-detail .lb-figure{
    max-width:100%; overflow-x:auto; overflow-y:hidden;
    align-items:flex-start; justify-content:flex-start;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  }
  .lightbox.is-detail .lb-figure figcaption::after{
    content:"↔ seitlich scrollen"; display:block; margin-top:.5rem;
    font-size:.72rem; letter-spacing:.06em; color:rgba(255,255,255,.55);
  }
  .lightbox.is-detail .lb-figure img{
    height:66vh; width:auto; max-width:none; max-height:none;
  }
  .lightbox.is-detail .lb-figure figcaption{
    position:sticky; left:0; max-width:88vw; margin-inline:auto;
  }
}

/* Einzelbild: Blaettern und Zaehler entfallen */
.lightbox.is-detail .lb-nav,
.lightbox.is-detail .lb-count{ display:none; }

/* ==========================================================================
   ZONEN – die Schichtliste zeigt auf die Stelle im Bild
   ========================================================================== */
.viz-zones{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:4; pointer-events:none; overflow:visible;
}
.vz-dim{ fill:#10140f; opacity:0; transition:opacity .32s ease; }
.viz-zones.is-on .vz-dim{ opacity:.62; }

.vz-mark{ pointer-events:none; }
.vz-mark.is-clickable .vz-hit{ pointer-events:auto; cursor:pointer; }
.vz-hit{ fill:transparent; }
.viz-zones{ --zdim:.62; }

.vz-ring{
  fill:none; stroke:var(--c,#fff); stroke-width:.7;
  opacity:0; transition:opacity .3s ease;
  filter:drop-shadow(0 0 1.4px rgba(0,0,0,.55));
}
.vz-mark.is-active .vz-ring,
.vz-mark.is-flash .vz-ring{ opacity:1; }
.vz-mark.is-flash .vz-ring{ transition:opacity .28s ease; }

/* Schichtblock ganz oben in der rechten Spalte */
.layer-block{ margin:0 0 1.9rem; }
.layer-block .panel-sub{ margin-top:0; }
.layer-hint{
  margin:-.35rem 0 .7rem; font-size:.74rem; color:var(--muted);
  display:flex; align-items:center; gap:.4rem;
}
.layer-hint::before{
  content:""; width:.5rem; height:.5rem; border-radius:50%;
  background:var(--olive); flex:none;
}
.ll-swatch{
  position:relative; width:20px; height:20px; border-radius:3px;
  display:flex; align-items:center; justify-content:center;
}
.ll-swatch b{
  font-size:.62rem; font-weight:600; line-height:1; color:#fff;
  text-shadow:0 0 2px rgba(0,0,0,.75); font-variant-numeric:lining-nums;
}
.layer-legend button{ position:relative; }
.layer-legend button.is-sel{
  background:#fff; border-color:var(--olive);
  box-shadow:inset 3px 0 0 var(--slab-bg);
}
.layer-legend button.is-sel .ll-name{ font-weight:600; }
.layer-legend button .ll-th:empty{ display:none; }
.vz-mark.is-flash .vz-ring{
  stroke-width:1.25;
  filter:drop-shadow(0 0 2.2px rgba(255,255,255,.85)) drop-shadow(0 0 1px rgba(0,0,0,.5));
}
.vz-mark.is-clickable .vz-hit{ pointer-events:auto; cursor:pointer; }
.ll-swatch{ box-shadow:inset 0 0 0 1px rgba(29,35,33,.16); }
.ll-swatch.is-light b{ color:#22271f; text-shadow:0 0 2px rgba(255,255,255,.8); }

/* ==========================================================================
   GEBÄUDE-EXPLORER: Umschalter Wohnanlage / Doppelhaus
   ========================================================================== */
.explorer-views{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
  margin:0 0 1rem;
}
.vswitch{
  display:flex; flex-direction:column; gap:.15rem; align-items:flex-start;
  padding:.7rem 1.1rem; min-width:min(100%, 15rem);
  background:var(--sand); border:1px solid transparent; border-radius:var(--radius);
  cursor:pointer; text-align:left; transition:background .25s, border-color .25s, box-shadow .25s;
}
.vswitch strong{
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); font-weight:600;
}
.vswitch small{ font-size:.75rem; color:var(--muted); }
.vswitch:hover{ background:#fff; border-color:var(--stone-deep); }
.vswitch.is-active{
  background:#fff; border-color:var(--olive);
  box-shadow:inset 3px 0 0 var(--olive);
}
.vswitch.is-active strong{ color:var(--olive); }
.explorer-parallax img.is-swapping{ opacity:.15; }
.explorer-parallax img{ transition:opacity .3s ease; }
@media (min-width:640px){ .vswitch{ min-width:16rem; } }

/* Auf schmalen Geräten stehen die Punkte enger beieinander –
   kleinere Punkte, damit sie sich nicht überlagern. */
@media (max-width:780px){
  .hotspot{ width:34px; height:34px; }
  .hotspot .dot{ width:20px; height:20px; font-size:.58rem; }
  .hotspot .dot::before{ inset:-6px; }
}