/* Erzeugt von material/gestaltung/wohin/bauen.py aus szene.css und der Zeitachse. Nicht von Hand ändern. */
/* Szene „Welche Unterlagen wohin gehören“ (Abschnitt #cloud). Flächenfarben --sz-* stammen aus
 * css/datenweg.css, die Grundteile (.boden, .quader, .karte, .schatten, .wolke, .karte-zeile)
 * ebenfalls. Ohne .bereit zeigt die Szene das fertige Bild (ohne Skript, reduzierte Bewegung). */

.wohin-szene {
  margin-top: 24px; border: var(--rahmen); border-radius: var(--r-karte);
  overflow: hidden; background: var(--sz-boden);
}
.wohin-bild { display: block; width: 100%; height: clamp(180px, 25vw, 360px); }

.weg { stroke: var(--sz-kabel); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; transition: stroke 0.2s ease, stroke-width 0.2s ease; }
.weg--vertrag { stroke-dasharray: 5 6; }
.impuls { stroke: var(--c-akzent); stroke-width: 4; stroke-linecap: round; fill: none; opacity: 0; }
.gabel { fill: var(--sz-karte-top); stroke: var(--sz-kabel); stroke-width: 2; }

.haus .f-top { fill: var(--sz-f-top); }
.dach { fill: var(--c-akzent); stroke: var(--sz-kante); stroke-linejoin: round; }
.dach-giebel { fill: var(--sz-f-rechts); stroke: var(--sz-kante); stroke-linejoin: round; }
.tuer { fill: var(--sz-schlitz); }
.fenster { fill: var(--c-akzent); }

.person { fill: var(--sz-zeile); }
.schloss { fill: var(--c-text-sekundaer); }
.schloss-buegel { fill: none; stroke: var(--c-text-sekundaer); stroke-width: 2.5; }
.siegel { fill: var(--sz-gelb); }
.siegel-seite { fill: var(--sz-gelb-seite); }
.siegel-zeichen { stroke: var(--sz-gelb-seite); stroke-width: 2; stroke-linecap: round; }

/* Hervorheben: Maus über einer Spalte oder Fokus darin */
.dok { transition: transform 0.25s ease; }
.wohin:has(.ort--cloud:hover, .ort--cloud:focus-within) .dok--a,
.wohin:has(.ort--beides:hover, .ort--beides:focus-within) .dok--b,
.wohin:has(.ort--haus:hover, .ort--haus:focus-within) .dok--c { transform: translateY(-8px); }
.wohin:has(.ort--cloud:hover, .ort--cloud:focus-within) .weg--a,
.wohin:has(.ort--beides:hover, .ort--beides:focus-within) :is(.weg--b-haus, .weg--b-cloud),
.wohin:has(.ort--haus:hover, .ort--haus:focus-within) .weg--c { stroke: var(--c-akzent); stroke-width: 3.5; }
.ort { transition: border-color 0.2s ease; }
.ort:hover, .ort:focus-within { border-top-color: var(--c-akzent); }

@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .dok, .weg, .ort { transition: none; }
}

/* Zeitachse */
.wohin-szene .weg--a{stroke-dasharray:187.2;}.bereit .weg--a{stroke-dashoffset:187.2;}.zeigt .weg--a{animation:zeichne-a 0.9s cubic-bezier(.5,0,.3,1) 0.2s both;}@keyframes zeichne-a{from{stroke-dashoffset:187.2}to{stroke-dashoffset:0}}.impuls--a{stroke-dasharray:16 227;stroke-dashoffset:16;}.zeigt .impuls--a{animation:impuls-a 0.8s linear 1.10s both;}@keyframes impuls-a{0%{opacity:1;stroke-dashoffset:16}90%{opacity:1}100%{opacity:0;stroke-dashoffset:-187}}
.wohin-szene .weg--b-haus{stroke-dasharray:153.6;}.bereit .weg--b-haus{stroke-dashoffset:153.6;}.zeigt .weg--b-haus{animation:zeichne-b-haus 0.9s cubic-bezier(.5,0,.3,1) 1.2s both;}@keyframes zeichne-b-haus{from{stroke-dashoffset:153.6}to{stroke-dashoffset:0}}.impuls--b-haus{stroke-dasharray:16 194;stroke-dashoffset:16;}.zeigt .impuls--b-haus{animation:impuls-b-haus 0.8s linear 2.10s both;}@keyframes impuls-b-haus{0%{opacity:1;stroke-dashoffset:16}90%{opacity:1}100%{opacity:0;stroke-dashoffset:-154}}
.bereit .weg--b-cloud{opacity:0;}.zeigt .weg--b-cloud{animation:einblenden 0.6s ease 1.9s both;}
.wohin-szene .weg--c{stroke-dasharray:146.4;}.bereit .weg--c{stroke-dashoffset:146.4;}.zeigt .weg--c{animation:zeichne-c 0.9s cubic-bezier(.5,0,.3,1) 2.4s both;}@keyframes zeichne-c{from{stroke-dashoffset:146.4}to{stroke-dashoffset:0}}.impuls--c{stroke-dasharray:16 186;stroke-dashoffset:16;}.zeigt .impuls--c{animation:impuls-c 0.8s linear 3.30s both;}@keyframes impuls-c{0%{opacity:1;stroke-dashoffset:16}90%{opacity:1}100%{opacity:0;stroke-dashoffset:-146}}
.bereit .gabel{opacity:0;}.zeigt .gabel{animation:einblenden 0.3s ease 1.55s both;}
.zeigt .ziel--cloud .wolke{animation:ankunft-wolke 0.9s ease 1.80s both;}@keyframes ankunft-wolke{0%{stroke:var(--sz-zeile)}40%{stroke:var(--c-akzent);stroke-width:2.5}100%{stroke:var(--sz-zeile)}}
.zeigt .fenster{animation:licht 0.9s ease 2.80s both;}@keyframes licht{from{fill:var(--sz-f-rechts)}to{fill:var(--c-akzent)}}.bereit .fenster{fill:var(--sz-f-rechts);}
.bereit .siegel-hub{opacity:0;transform:translateY(-10px);}.zeigt .siegel-hub{animation:siegel 0.5s cubic-bezier(.3,1.6,.5,1) 2.20s both;}@keyframes siegel{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}