/* Eigenständige Website-Abläufe mit großzügiger Bildbühne. */
.motion-demo{--motion-green:#95c12b;--motion-pine:#33410c;--motion-ink:#383838;--motion-screen-height:100svh;--motion-header-height:80px;--motion-tabs-height:64px;max-width:1200px;width:100%;margin:20px auto 0;text-align:center;font:inherit;color:var(--motion-ink)}
.motion-demo *{box-sizing:border-box}
.motion-topic-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 auto 6px;padding:4px 0;position:sticky;top:var(--motion-header-height);z-index:4;background:#fff}
.motion-demo[data-motion-kind=efficiency] .motion-topic-controls{grid-template-columns:repeat(4,minmax(0,1fr))}
.motion-demo .motion-topic-controls button{font-family:inherit;appearance:none;display:flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:9px 12px;border:1px solid #ddd;border-radius:8px;background:#fff;color:var(--motion-ink);font-size:16px;font-weight:600;line-height:1.4;cursor:pointer;text-transform:none;letter-spacing:normal;transition:border-color .2s,background .2s}
.motion-demo .motion-topic-controls button svg{width:24px;height:24px;flex:none;color:var(--motion-pine)}
.motion-demo .motion-topic-controls button:hover{background:#fafbf7;border-color:#9dad7e}
.motion-demo .motion-topic-controls button[aria-pressed=true]{background:#f2f6e8;border-color:var(--motion-green);box-shadow:inset 0 -2px var(--motion-green)}
.motion-demo button:focus-visible{outline:3px solid var(--motion-pine);outline-offset:4px}
.motion-illustration{position:relative;display:grid;grid-template-rows:minmax(0,1fr);height:var(--motion-stage-height,clamp(220px,calc(var(--motion-screen-height) - var(--motion-header-height) - var(--motion-tabs-height) - 38px),540px));min-height:0;border-radius:12px;background:linear-gradient(180deg,#fafbf7 0%,#fff 90%);padding:8px 0;overflow:hidden;isolation:isolate}
.motion-scene-label{font-size:18px!important;line-height:1.45!important;font-weight:500!important;padding:0 16px;max-width:900px;margin:10px auto 0!important;color:#526044}
.motion-scene{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;max-width:100%;max-height:100%;aspect-ratio:auto;overflow:hidden;margin:0;object-fit:contain;transition:opacity .3s}
.motion-wall{stroke:#bbc2b0;stroke-width:1.5;stroke-linejoin:round}
.motion-back-wall{fill:#f0f1eb}
.motion-left-wall{fill:#e6e8de}
.motion-third-wall{fill:#e6e8de}
.motion-chair-base{fill:none;stroke:#72786e;stroke-width:2.5;stroke-linecap:round}
.motion-chair-seat{fill:#3f4540;stroke:#28312b;stroke-width:1.2;transition:fill .5s,stroke .5s}
.motion-chair-back{fill:#303631;stroke:#28312b;stroke-width:1.2;transition:fill .5s,stroke .5s}
.motion-chair-arm{stroke:#69715f;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.motion-chair-halo{fill:#95c12b33;stroke:#95c12b;stroke-width:1.5;opacity:0;transition:opacity .3s}
.motion-asset-link{opacity:0;transition:opacity .3s}
.motion-material-surface>polygon{fill:#e6e8de;transition:fill .28s}
.motion-material-surface>polygon:first-child{fill:#f0f1eb}
.motion-wall-selection{fill:none;stroke:#95c12b;stroke-width:2.5;stroke-linejoin:round;opacity:0;transition:opacity .3s}
.motion-divided-walls,.motion-vertical-accent{opacity:0;transition:opacity .5s}
.motion-upper-walls{fill:#e7dec9}
.motion-lower-walls{fill:#9dbbb0}
.motion-division-guide,.motion-vertical-guide{fill:none;stroke:#779540;stroke-width:3;stroke-dasharray:5 5;opacity:0;transition:opacity .3s}
.motion-division-guide polyline{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1s ease}
.motion-skirting-guide{stroke:#95c12b;stroke-width:5;stroke-dasharray:3 8;opacity:0;transition:opacity .3s}
.motion-skirting{stroke:#646c56;stroke-width:6;stroke-linecap:butt;stroke-linejoin:round;opacity:0;transition:opacity .3s}
.motion-skirting polyline{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.2s ease}
.motion-door-indicator{fill:none;stroke:#98a089;opacity:.5;transition:opacity .35s}
[data-topic=assets][data-phase="1"] .motion-chair-halo,[data-topic=assets][data-phase="1"] .motion-asset-link{opacity:1}
[data-topic=assets][data-phase="2"] .motion-chair-seat,[data-topic=assets][data-phase="3"] .motion-chair-seat{fill:#a8c463;stroke:#779438}
[data-topic=assets][data-phase="2"] .motion-chair-back,[data-topic=assets][data-phase="3"] .motion-chair-back{fill:#95c12b;stroke:#779438}
[data-topic=assets][data-phase="2"] .motion-chair-halo{opacity:.4}
[data-topic=materials][data-phase="1"] .motion-wall-selection,[data-topic=materials][data-phase="2"] .motion-wall-selection,[data-topic=materials][data-phase="3"] .motion-wall-selection{opacity:1}
[data-topic=materials][data-material-step="1"] .motion-material-surface>polygon:nth-child(1),[data-topic=materials][data-material-step="2"] .motion-material-surface>polygon:nth-child(-n+2),[data-topic=materials][data-material-step="3"] .motion-material-surface>polygon{fill:#b6c694}
[data-topic=divide][data-phase="1"] .motion-division-guide{opacity:1}
[data-topic=divide][data-phase="1"] .motion-division-guide polyline,[data-topic=divide][data-phase="2"] .motion-division-guide polyline,[data-topic=divide][data-phase="3"] .motion-division-guide polyline{stroke-dashoffset:0}
[data-topic=divide][data-phase="2"] .motion-divided-walls,[data-topic=divide][data-phase="3"] .motion-divided-walls{opacity:1}
[data-topic=divide][data-phase="2"] .motion-vertical-guide{opacity:1}
[data-topic=divide][data-phase="3"] .motion-vertical-accent{opacity:1}
[data-topic=skirting][data-phase="1"] .motion-skirting-guide{opacity:1}
[data-topic=skirting][data-phase="2"] .motion-skirting,[data-topic=skirting][data-phase="3"] .motion-skirting{opacity:1}
[data-topic=skirting][data-phase="2"] .motion-skirting polyline,[data-topic=skirting][data-phase="3"] .motion-skirting polyline{stroke-dashoffset:0}
[data-topic=skirting][data-phase="1"] .motion-door-indicator,[data-topic=skirting][data-phase="2"] .motion-door-indicator,[data-topic=skirting][data-phase="3"] .motion-door-indicator{opacity:1}
.motion-status{flex:1;min-width:200px;font-size:16px!important;line-height:1.6!important;margin:0!important;color:var(--motion-ink)}
.motion-plan-floor{fill:#fff;transition:fill .6s}
.motion-defined-spaces path{stroke-width:2.5;stroke:#8ba744;stroke-dasharray:100;stroke-dashoffset:100;fill-opacity:0;transition:stroke-dashoffset 1s,fill-opacity .6s}
.motion-space-one{fill:#dbe7bf}
.motion-space-two{fill:#e7d9c5}
.motion-space-three{fill:#d4e0db}
.motion-space-four{fill:#e5d9cc}
.motion-space-five{fill:#dde2bf}
.motion-space-hall{fill:#ece9df}
.motion-space-points{opacity:0;transition:opacity .3s}
.motion-selected-contour{stroke-dasharray:100;stroke-dashoffset:100;opacity:0;transition:stroke-dashoffset 1s,opacity .35s}
.motion-created-walls,.motion-floor-slab{opacity:0;transition:opacity .2s}
.motion-wall-face-y{fill:#e0e5d6;stroke:#e0e5d6;stroke-width:.5}
.motion-wall-face-x{fill:#c2ccaf;stroke:#c2ccaf;stroke-width:.5}
.motion-wall-cap{fill:#f7f8f1;stroke:#f7f8f1;stroke-width:.5}
.motion-wall-outline{fill:none;stroke:#8f9c7d;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.motion-plan-wall-fill{fill:#e3e7dc;stroke:#e3e7dc;stroke-width:.5}
.motion-plan-wall-outline{fill:none;stroke:#a4ae97;stroke-width:1.3}
.motion-door-arcs{fill:none;stroke:#a4ae97;stroke-width:1.3}
.motion-floor-edge{fill:#c7bda6;stroke:#b7ad95;stroke-width:1}
.motion-source-plan,.motion-plan-grid{transition:opacity .5s}
.motion-completed-check{opacity:0;transition:opacity .4s}
[data-topic=spaces][data-phase="1"] .motion-space-points{opacity:1}
[data-topic=thickness][data-phase="2"] .motion-selected-contour,[data-topic=thickness][data-phase="3"] .motion-selected-contour,[data-topic=walls][data-phase="0"] .motion-selected-contour,[data-topic=walls][data-phase="1"] .motion-selected-contour{opacity:1;stroke-dashoffset:0}
[data-topic=walls][data-phase="2"] .motion-created-walls,[data-topic=walls][data-phase="3"] .motion-created-walls,[data-topic=walls][data-phase="2"] .motion-floor-slab,[data-topic=walls][data-phase="3"] .motion-floor-slab{opacity:1}
[data-topic=walls][data-phase="2"] .motion-plan-floor,[data-topic=walls][data-phase="3"] .motion-plan-floor{fill:#e8deca}
[data-topic=walls][data-phase="2"] .motion-defined-spaces path,[data-topic=walls][data-phase="3"] .motion-defined-spaces path{fill-opacity:.4}
[data-topic=walls][data-phase="2"] .motion-plan-grid,[data-topic=walls][data-phase="3"] .motion-plan-grid{opacity:0}
[data-topic=walls][data-phase="2"] .motion-source-plan,[data-topic=walls][data-phase="3"] .motion-source-plan{opacity:.2}
.motion-illustration[data-phase="3"] .motion-completed-check{opacity:1}
.motion-is-inactive *{animation-play-state:paused!important}
@media(max-width:740px){
  .motion-demo[data-motion-kind=efficiency] .motion-topic-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .motion-topic-controls{gap:8px}
  .motion-demo .motion-topic-controls button{font-size:15px;min-height:52px;padding:10px;gap:8px}
  .motion-illustration{padding:8px 0}
  .motion-scene-label{font-size:16px!important;padding:0 12px}
  .motion-status{min-width:calc(100% - 47px)}
}
@media(max-width:520px){
  .motion-demo[data-motion-kind=spaces] .motion-topic-controls{grid-template-columns:repeat(3,minmax(0,1fr))}
  .motion-demo[data-motion-kind=spaces] .motion-topic-controls button{flex-direction:column;justify-content:center;min-height:68px;padding:6px 4px;font-size:12px;line-height:1.25;gap:4px}
  .motion-demo[data-motion-kind=efficiency] .motion-topic-controls button{min-height:48px;font-size:13px;padding:6px 8px;line-height:1.3;gap:6px}
  .motion-demo .motion-topic-controls button svg{width:22px;height:22px}
  .motion-scene-label{font-size:15px!important;padding:0 12px}
  .motion-illustration{min-height:0;padding:6px 0}
}
@media(max-width:360px){
  .motion-demo[data-motion-kind=efficiency] .motion-topic-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .motion-demo[data-motion-kind=efficiency] .motion-topic-controls button{justify-content:center;min-height:48px;padding:6px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .motion-demo *,.motion-demo *:before,.motion-demo *:after{animation:none!important;transition:none!important}
}
.motion-sr-only{position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;flex:none!important}

.motion-illustration[role=button]:focus-visible{outline:3px solid #33410c;outline-offset:5px}
.motion-room-names{opacity:0;transition:opacity .4s}
.motion-room-name{fill:#526044;font-family:inherit;font-size:28px;font-weight:600;text-anchor:middle;dominant-baseline:middle}
.motion-room-mobile{display:none}
@media(max-width:900px){.motion-room-name{font-size:40px}}
@media(max-width:520px){.motion-room-name{font-size:56px}.motion-room-single{display:none}.motion-room-mobile{display:inline}}
[data-topic=spaces][data-phase="2"] .motion-room-names,[data-topic=spaces][data-phase="3"] .motion-room-names,[data-topic=thickness] .motion-room-names,[data-topic=walls] .motion-room-names{opacity:1}
.motion-plan-windows>path{fill:#e1edf1;stroke:#8fa4ae;stroke-width:2}
.motion-plan-windows .motion-plan-window-line{fill:none;stroke:#8fa4ae;stroke-width:3}
.motion-window-glass{fill:#d7e7ee;fill-opacity:.3;stroke:none}
.motion-window-frame{fill:none;stroke:#8d9ea5;stroke-width:4;stroke-linejoin:round}

.motion-tools{position:absolute;right:10px;top:10px;z-index:5;display:flex}
.motion-demo .motion-tools button{appearance:none;display:grid;place-items:center;width:32px;height:32px;min-width:0;min-height:0;border:1px solid #d5ddc8;border-radius:50%;padding:0;background:#fff;color:#33410c;font-family:inherit;font-size:18px;font-weight:600;line-height:1;cursor:pointer;text-transform:none}
.motion-demo .motion-tools button:hover{background:#edf3e0}
.motion-demo .motion-tools button:disabled{opacity:.45;cursor:default}
.motion-demo .motion-restart{font-size:24px!important}
.motion-viewport{position:relative;min-width:0;min-height:0;display:grid;place-items:center;overflow:hidden}
.motion-illustration{cursor:pointer}
.motion-illustration:focus-visible{outline:3px solid #33410c;outline-offset:4px}
.motion-thickness-boundaries{opacity:0;transition:opacity .25s}
.motion-changing-wall{stroke:#4d8ac3;stroke-width:2.8;stroke-linejoin:round}
.motion-thickness-handles{fill:#4d8ac3;stroke:none}
[data-topic=thickness][data-phase="1"] .motion-thickness-boundaries,[data-topic=thickness][data-phase="2"] .motion-thickness-boundaries,[data-topic=thickness][data-phase="3"] .motion-thickness-boundaries{opacity:1}
.motion-webgl{position:absolute;inset:0;opacity:0;pointer-events:none}
.motion-webgl[hidden]{display:none!important}
.motion-webgl-canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab;border-radius:8px}
.motion-webgl-canvas:active{cursor:grabbing}
.motion-webgl-canvas:focus-visible{outline:3px solid #33410c;outline-offset:-4px}
.motion-orbit-hint{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);padding:3px 9px;border-radius:14px;background:#ffffffe8;color:#526044;font-size:12px;line-height:1.4;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .3s}

/* SVG builds the architecture completely before the matched WebGL handoff. */
[data-topic=walls] .motion-scene{transition:none}
[data-handoff=complete] .motion-webgl{pointer-events:auto}
[data-handoff=complete] .motion-orbit-hint{opacity:1}
.motion-space-volumes{opacity:0;transition:opacity .2s;pointer-events:none}
[data-topic=walls][data-phase="2"] .motion-space-volumes,[data-topic=walls][data-phase="3"] .motion-space-volumes{opacity:1}
.motion-space-volume-face{fill:inherit;fill-opacity:.18;stroke:none}
.motion-space-volume-edge{fill:none;stroke:#89a35e;stroke-width:1.6;stroke-opacity:.45;stroke-linejoin:round}
.motion-volume-labels{opacity:0;pointer-events:none}
.motion-volume-name{fill:#526044;stroke:#fff;stroke-opacity:.83;stroke-width:8;paint-order:stroke;stroke-linejoin:round;font-family:inherit;font-size:48px;font-weight:600;text-anchor:middle;dominant-baseline:middle}
@media(max-width:900px){.motion-room-name[data-room-label=storage],.motion-room-name[data-room-label=wash]{font-size:32px}}
@media(max-width:520px){.motion-room-name[data-room-label=storage],.motion-room-name[data-room-label=wash]{font-size:48px}}

/* Each Space completes independently before the next boundary is traced. */
[data-topic=spaces] .motion-defined-spaces path{transition:stroke-dashoffset 1s linear,fill-opacity .2s}
[data-topic=spaces][data-phase="0"] .motion-defined-spaces path,[data-topic=spaces][data-phase="0"] .motion-room-name{transition:none}
[data-topic=spaces] .motion-defined-spaces path[data-space-state=drawing],[data-topic=spaces] .motion-defined-spaces path[data-space-state=complete]{stroke-dashoffset:0}
[data-topic=spaces] .motion-defined-spaces path[data-space-state=complete],[data-topic=thickness] .motion-defined-spaces path,[data-topic=walls] .motion-defined-spaces path{fill-opacity:.8;stroke-dashoffset:0}
[data-topic=spaces] .motion-room-names{opacity:1}
[data-topic=spaces] .motion-room-name[data-space-state=waiting],[data-topic=spaces] .motion-room-name[data-space-state=drawing]{opacity:0}
[data-topic=spaces] .motion-room-name[data-space-state=complete]{opacity:1}
.motion-room-name{transition:opacity .2s}
.motion-demo-cursor{opacity:0;pointer-events:none;transition:opacity .15s}
.motion-cursor-body{fill:#fff;stroke:#33410c;stroke-width:1.5;stroke-linejoin:round}
.motion-cursor-press{fill:#95c12b44;stroke:#95c12b;stroke-width:1.6;opacity:0}
.motion-demo-cursor[data-pressed=true] .motion-cursor-press{opacity:1}
.motion-caption{min-height:0!important;display:block!important}