/* Spatial cutaways: responsive house sections with an explicit basement and outdoor zone. */
.cutaway-stage{aspect-ratio:auto;min-height:0;height:auto;overflow:hidden;background:#0b1b2f;border:1px solid #31475f55;border-radius:22px}
.cutaway-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:21px 23px 0}
.cutaway-top>span{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.1em;color:#a1b8d4}
.cutaway-top i{width:5px;height:5px;border-radius:50%;background:#80addd;box-shadow:0 0 10px #80addd77;flex:none}
.cutaway-stage .motion-button{font-size:9px;padding:7px 10px;gap:6px;min-height:30px;white-space:nowrap}
.cutaway-canvas{position:relative;width:100%;margin-top:7px}
.cutaway-svg{display:block;width:100%;height:auto;overflow:visible}
.cutaway-mobile{display:none}
.cutaway-svg text{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;fill:#b2c5da}
.cutaway-svg .floor-label{font-size:16px;letter-spacing:1.6px;fill:#a6b7c9;font-weight:500}
.cutaway-svg .basement-label{font-size:18px;letter-spacing:1.1px;fill:#c8d9e8;font-weight:600}
.cutaway-svg .outside-label{font-size:15px;letter-spacing:1.6px;fill:#8f9e9b}
.cutaway-svg .outdoor-location{fill:#a0c4d9;font-size:15px;letter-spacing:2px}
.cutaway-svg .cutaway-object-label{font-size:16.5px;fill:#b8cbdc;letter-spacing:.1px}
.cutaway-pipe-track{fill:none;stroke:#9eafc4;stroke-width:8;opacity:.13}
.cutaway-stage .flow-path{stroke-width:3.6;stroke-dasharray:10 10;filter:none}
.cutaway-stage .flow-warm{stroke:#f18d7d;animation-direction:normal}
.cutaway-stage .flow-cold{stroke:#75abe1;animation-direction:normal}
.cutaway-stage .flow-solar{stroke:#ecc873;stroke-width:3.3}
.cutaway-stage .flow-electric{stroke:#d2cfb1;stroke-width:2.6;stroke-dasharray:5 8;animation-duration:3.4s}
.tap-water-line{stroke:#efc0aa;stroke-width:2;stroke-dasharray:3 5;opacity:.8}
.solar-coil{stroke:#efc771;stroke-width:3;fill:none}
.cutaway-stage .thermal-zone{fill:#f5a28c;filter:none;animation-duration:5s}
.cutaway-stage .heat-rise{stroke:#eab09f;stroke-width:1.8;animation-duration:4.3s}
.cutaway-flue{fill:none;stroke:#94928b;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.fuel-conveyor{stroke:#9f8e70;stroke-width:8;stroke-dasharray:3 4;fill:none}
.cutaway-fan{transform-box:fill-box;transform-origin:center;animation:fan-spin 4.6s linear infinite}
.outside-air{stroke-dasharray:7 4;animation:flow-move 2.5s linear infinite}
.node-hit{fill:transparent;stroke:transparent;stroke-width:1}
.node-face{fill:#153b60;stroke:#94bfe2;stroke-width:1.5;transition:fill .2s,stroke .2s}
.cutaway-node{cursor:pointer}
.cutaway-node text{font-size:17px;fill:#e7f3ff;font-weight:600;pointer-events:none}
.cutaway-node[data-selectable=solar] .node-face{fill:#68512b;stroke:#e7c47c}
.cutaway-node:hover .node-face,.cutaway-node.is-selected .node-face{fill:#3977aa;stroke:#d7edff;stroke-width:2.6}
.cutaway-node[data-selectable=solar]:hover .node-face,.cutaway-node[data-selectable=solar].is-selected .node-face{fill:#9a752c;stroke:#ffe7a9}
.cutaway-component.is-selected{filter:drop-shadow(0 0 8px #7ab7f65c)}
.optional-tank>rect{stroke-dasharray:5 3}
.cutaway-legend{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px 18px;padding:4px 20px 18px;border-bottom:1px solid #ffffff12;margin:0 20px}
.cutaway-legend>span{display:flex;align-items:center;gap:6px;font-size:12px;color:#99b1ce;line-height:1.6}
.cutaway-legend i{width:7px;height:7px;border-radius:2px;display:block;background:var(--legend-color)}
.cutaway-navigation{padding:17px 20px 0}
.cutaway-navigation>p{font-size:10px;color:#809bbd;margin-bottom:11px}
.component-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.component-chip{display:flex;align-items:center;gap:9px;padding:10px 11px;border-radius:10px;border:1px solid #405a794f;background:#132c47;color:#c6d7eb;text-align:left;min-height:52px;transition:background .2s,border-color .2s;min-width:0}
.component-chip>.component-number{display:grid;place-items:center;border:1px solid #54769c;background:#1e3c5c;color:#accae9;border-radius:50%;width:23px;height:23px;font-size:8px;flex:none;font-weight:600}
.component-chip>strong{font-size:10px;font-weight:550;line-height:1.55;min-width:0}
.component-chip small{display:block;font-size:6.2px;letter-spacing:.06em;color:#7391b5;font-weight:450;margin-top:2px}
.component-chip:hover,.component-chip[aria-pressed=true]{background:#224566;border-color:#749bc2}
.component-chip[aria-pressed=true]>.component-number{background:#638caf;color:#fff;border-color:#94bde0}
.component-chip[data-hotspot=solar]>.component-number{border-color:#b99a63;color:#e5c68d;background:#57452c}
.component-chip[data-hotspot=solar][aria-pressed=true]{background:#3e392d;border-color:#be9d5d}
.component-chip[data-hotspot=solar][aria-pressed=true]>.component-number{background:#b18a3f;border-color:#efcf8d;color:#fff}
.cutaway-stage .diagram-info{position:static;inset:auto;max-width:none;margin:15px 20px 0;padding:15px 16px;background:#10263e;border:1px solid #4a62833a;border-radius:10px;pointer-events:auto;min-height:108px;backdrop-filter:none}
.cutaway-stage .diagram-info>span{font-size:12px;letter-spacing:.07em;color:#7f9ec0;line-height:1.7}
.cutaway-stage .diagram-info p{font-size:14px;line-height:1.85;margin-top:7px;color:#c0d1e5}
.cutaway-footnote{padding:15px 22px 20px}
.cutaway-footnote>p{font-size:14px;line-height:1.9;color:#829ab8;max-width:none}
.cutaway-footnote>a{display:inline-block;font-size:12px;color:#b7cde5;text-decoration:underline;margin-top:8px}
.cutaway-footnote>span{display:block;font-size:14px;line-height:1.9;color:#6d86a3;margin-top:10px}
.cutaway-stage.stage-paused .cutaway-top i{box-shadow:none}
.cutaway-stage.stage-paused .outside-air{opacity:.4}
.simulation-layout>.sim-panel{position:sticky;top:116px}
@media(max-width:1150px){.component-chip{padding:9px 8px;gap:7px}.component-chip>strong{font-size:9px}.component-chip small{font-size:5.7px}.component-chip>.component-number{width:20px;height:20px;font-size:7px}.cutaway-top{padding-inline:20px}.cutaway-top>span{font-size:12px;letter-spacing:.08em}.cutaway-stage .motion-button{font-size:8px}.cutaway-stage .diagram-info p{font-size:14px}.cutaway-footnote>p{font-size:14px}.cutaway-legend>span{font-size:12px}}
@media(max-width:900px){.simulation-layout>.sim-panel{position:static}.cutaway-stage .diagram-info p{font-size:14px}.component-chip{padding:12px;gap:10px;min-height:58px}.component-chip>strong{font-size:12px}.component-chip small{font-size:7px}.component-chip>.component-number{width:26px;height:26px;font-size:10px}.cutaway-top>span{font-size:12px}.cutaway-top{padding:23px 25px 0}.cutaway-stage .motion-button{font-size:9px}.cutaway-legend>span{font-size:12px}.cutaway-navigation>p{font-size:11px}.cutaway-footnote>p{font-size:14px}.cutaway-footnote>a{font-size:12px}.cutaway-footnote>span{font-size:14px}}
@media(max-width:680px){.cutaway-stage{border-radius:17px;aspect-ratio:auto;height:auto;min-height:0}.cutaway-desktop{display:none}.cutaway-mobile{display:block}.cutaway-top{padding:18px 16px 0;gap:9px}.cutaway-top>span{font-size:6px;letter-spacing:.065em;line-height:1.8;gap:6px;max-width:165px}.cutaway-stage .motion-button{padding:6px 8px;font-size:8px;min-height:29px}.cutaway-stage .motion-button>span{display:inline}.cutaway-canvas{margin-top:8px}.cutaway-svg .floor-label{font-size:18px;letter-spacing:1px}.cutaway-svg .basement-label{font-size:21px;letter-spacing:.9px}.cutaway-svg .outside-label{font-size:15px;letter-spacing:1px}.cutaway-svg .outdoor-location{font-size:16px}.cutaway-svg .cutaway-object-label{font-size:16px}.cutaway-stage .flow-path{stroke-width:4}.cutaway-stage .flow-electric{stroke-width:3}.cutaway-legend{gap:7px 12px;padding:6px 0 15px;margin:0 16px;justify-content:flex-start}.cutaway-legend>span{font-size:8px;gap:5px}.cutaway-legend i{width:6px;height:6px}.cutaway-navigation{padding:15px 15px 0}.cutaway-navigation>p{font-size:10px;margin-bottom:11px}.component-chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.component-chip{padding:10px 9px;gap:8px;min-height:49px;border-radius:8px}.component-chip>.component-number{width:23px;height:23px;font-size:8px}.component-chip>strong{font-size:10px;line-height:1.5}.component-chip small{font-size:6px;letter-spacing:.035em;margin-top:2px}.cutaway-stage .diagram-info{margin:13px 15px 0;padding:13px 14px;min-height:125px;max-width:none;position:static;border-radius:8px}.cutaway-stage .diagram-info>span{font-size:7px;line-height:1.8;letter-spacing:.035em}.cutaway-stage .diagram-info p{font-size:11px;line-height:1.9;margin-top:7px}.cutaway-footnote{padding:13px 16px 18px}.cutaway-footnote>p{font-size:9px;line-height:1.85}.cutaway-footnote>a{font-size:9px}.cutaway-footnote>span{font-size:8px;line-height:1.85;margin-top:10px}}
@media(max-width:360px){.cutaway-top>span{font-size:5.2px;max-width:141px}.cutaway-stage .motion-button{font-size:7px;padding:6px}.component-chip>strong{font-size:9px}.component-chip small{font-size:5.5px}.component-chip{gap:6px;padding-inline:8px}.cutaway-stage .diagram-info p{font-size:10px}}
@media(prefers-reduced-motion:reduce){.cutaway-fan,.outside-air{animation:none!important}.cutaway-node,.component-chip,.node-face{transition:none!important}}

.solar-return-line{fill:none;stroke:#b19c65;stroke-width:2;stroke-dasharray:5 6;opacity:.65}.cutaway-stage .flow-warm,.cutaway-stage .flow-cold{stroke-linecap:round}
/* Beschriftungen der Bauteile bekommen einen dunklen Rand, damit kreuzende Leitungen die Schrift nicht durchstreichen */
.cutaway-svg .cutaway-object-label{paint-order:stroke;stroke:#14263f;stroke-width:5px;stroke-linejoin:round}