/* Gemeinsamer Produkt-Viewer für System und Selbsteinbau. */
.climate-viewer{--climate-accent:#a45a38;--climate-water:#c9794b;--viewer-line:#e0e4e4;--viewer-ink:#243a48;--viewer-muted:#667078;position:relative;border:1px solid var(--viewer-line);border-radius:20px;background:#f5f6f4;overflow:hidden;scroll-margin-top:102px}.climate-viewer[data-mode=cool]{--climate-accent:#397d9c;--climate-water:#398faf}.climate-header{display:flex;justify-content:space-between;align-items:center;gap:28px;padding:30px 34px;background:#fff;border-bottom:1px solid var(--viewer-line)}.climate-header .eyebrow{color:#71818b;font-size:12px;letter-spacing:.15em;margin-bottom:10px}.climate-header h2{font-size:29px;letter-spacing:-.03em;color:var(--viewer-ink)}.climate-modes{display:flex;flex-shrink:0;background:#f0f3f3;padding:4px;border-radius:11px;gap:4px}.climate-modes button{display:flex;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:10px 17px;border:0;border-radius:8px;background:transparent;color:#68747b;font-size:14px;font-weight:600;transition:background .18s,color .18s,box-shadow .18s}.climate-modes button svg{width:17px;height:17px}.climate-modes button[aria-pressed=true]{background:#fff;color:var(--viewer-ink);box-shadow:0 2px 6px #1b34400d}.climate-modes button[aria-pressed=true] svg{color:var(--climate-accent)}.climate-content{display:grid;grid-template-columns:275px minmax(0,1fr);align-items:center;gap:18px;padding-left:34px}.climate-explanation{padding:30px 0}.climate-season{display:block;color:var(--climate-accent);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}.climate-explanation h3{font-size:32px;line-height:1.15;letter-spacing:-.035em;color:var(--viewer-ink);margin-bottom:15px}.climate-explanation>p{font-size:14px;line-height:1.85;max-width:255px;color:var(--viewer-muted)}.climate-steps{list-style:none;display:grid;gap:19px;padding:22px 0 0;margin:25px 0 0;border-top:1px solid var(--viewer-line)}.climate-steps li{display:flex;gap:12px}.climate-steps li>span{font:400 13px Outfit;color:#8c999e;padding-top:2px}.climate-steps strong{font-size:13px;font-weight:600;display:block;color:#3b4c56}.climate-steps p{font-size:12px;line-height:1.75;max-width:225px;margin-top:4px;color:#748087}.climate-visual{min-width:0;position:relative;padding-bottom:24px;align-self:stretch;display:flex;flex-direction:column;justify-content:center}.climate-stage{position:relative;height:440px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 48%,#fff9,transparent 70%)}.climate-canvas{display:block;width:100%;height:100%;position:relative;z-index:1;opacity:0;outline-offset:-5px!important;cursor:grab}.climate-canvas:active{cursor:grabbing}.climate-stage[data-ready=true] .climate-canvas{opacity:1}.climate-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:30px;opacity:.5}.climate-stage[data-ready=true] .climate-poster,.climate-stage[data-ready=true] .climate-loading{display:none}.climate-loading{position:absolute;bottom:25px;left:24px;right:24px;padding:12px 18px;text-align:center;font-size:14px;color:var(--viewer-muted);border:1px solid var(--viewer-line);background:#fffffff2;border-radius:10px;z-index:4}.climate-anchor{position:absolute;z-index:2;pointer-events:none;display:flex;gap:6px;align-items:center;opacity:0;white-space:nowrap;font-size:12px;color:#53616a;transform:translate(-50%,-50%)}.climate-anchor span{background:#f9faf8ed;padding:4px 8px;border-radius:4px}.climate-anchor i{width:4px;height:4px;background:var(--climate-water);border-radius:50%}.climate-stage[data-ready=true] .climate-anchor{opacity:1}.climate-stage-note{position:absolute;left:24px;top:20px;z-index:2;color:#819097;font-size:12px;letter-spacing:.04em}.climate-layer-labels{position:absolute;top:20px;right:22px;z-index:2;display:grid;gap:8px}.climate-layer-labels span{font-size:12px;color:#53616a;background:#ffffffde;padding:3px 9px;border-left:2px solid #bdc9c9}.climate-controls{display:flex;justify-content:center;align-items:center;gap:10px;padding:0 20px;flex-wrap:wrap;position:relative;z-index:3}.climate-tools{display:inline-flex;align-items:center;gap:2px;background:#fff;border:1px solid #dce2e3;border-radius:11px;padding:4px;box-shadow:0 5px 20px #243a4806}.climate-tools button{display:flex;justify-content:center;align-items:center;gap:7px;min-width:40px;min-height:40px;padding:8px;border:0;border-radius:7px;background:transparent;color:#60717b;font-size:13px;line-height:1;font-weight:500}.climate-tools button:hover{background:#edf1f1;color:#233d4d}.climate-tools button[aria-pressed=true]{background:#e9eff1;color:#234a60}.climate-tools .climate-layer-button{padding-inline:12px}.climate-tools svg,.climate-touch-control svg{width:18px;height:18px;flex-shrink:0}.climate-tool-divider{height:20px;width:1px;background:#e1e6e7;margin-inline:3px}.climate-touch-control{display:none;align-items:center;justify-content:center;gap:8px;border:1px solid #243e50;border-radius:10px;padding:11px 16px;min-height:46px;background:#243e50;color:white;font-size:14px;font-weight:500}.climate-touch-control[aria-pressed=true]{background:white;color:#243e50}.climate-help{color:#7f8b93;font-size:12px;text-align:center;margin:11px 20px 0;line-height:1.6}.climate-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 34px;border-top:1px solid var(--viewer-line);background:#fff9}.climate-legend{display:flex;align-items:center;flex-wrap:wrap;gap:18px;color:#67747c;font-size:12px}.climate-legend span{display:flex;align-items:center;gap:7px}.climate-legend i{width:6px;height:6px;flex-shrink:0;border-radius:50%}.climate-water-dot{background:var(--climate-water)}.climate-energy-dot{background:#c6a682}.climate-footer>p{font-size:12px;line-height:1.65;color:#8b959a;max-width:245px}.climate-fallback{padding:24px;font-size:14px}.climate-tools button:disabled,.climate-touch-control:disabled{opacity:.4;cursor:default}.climate-stage[data-error=true] .climate-canvas{display:none}.climate-stage[data-error=true] .climate-poster{opacity:1}.climate-stage[data-error=true] .climate-stage-note{display:none}.climate-viewer[data-touch=true] .climate-touch-control{display:flex}.climate-viewer[data-interacting=true] .climate-stage{box-shadow:inset 0 0 0 1px #aec0c8}.climate-viewer[data-interacting=true] .climate-help{color:#3b657d}
@media(max-width:1050px){.climate-header{padding:26px}.climate-header h2{font-size:25px}.climate-content{grid-template-columns:230px minmax(0,1fr);padding-left:26px;gap:10px}.climate-explanation h3{font-size:28px}.climate-stage{height:400px}.climate-footer{padding:16px 26px}.climate-footer>p{max-width:185px}.climate-modes button{padding:10px 14px}}
/* Die kompakte Fassung verwendet dieselben Bedienelemente und dieselbe Szene. */
.climate-viewer-compact .climate-header{padding:21px 22px;gap:12px;flex-wrap:wrap}.climate-viewer-compact .climate-header .eyebrow{display:none}.climate-viewer-compact .climate-header h2{font-size:22px}.climate-viewer-compact .climate-modes button{font-size:13px;padding:10px 12px}.climate-viewer-compact .climate-content{display:flex;flex-direction:column;padding:0;gap:0}.climate-viewer-compact .climate-visual{order:0;width:100%;padding:0 0 18px}.climate-viewer-compact .climate-stage{height:310px}.climate-viewer-compact .climate-explanation{order:1;align-self:stretch;border-top:1px solid var(--viewer-line);padding:22px}.climate-viewer-compact .climate-season{font-size:12px;margin-bottom:9px}.climate-viewer-compact .climate-explanation h3{font-size:23px;margin-bottom:9px}.climate-viewer-compact .climate-explanation h3 br{display:none}.climate-viewer-compact .climate-explanation>p{font-size:13px;max-width:none}.climate-viewer-compact .climate-steps{display:none}.climate-viewer-compact .climate-footer{padding:14px 22px;flex-wrap:wrap;gap:8px}.climate-viewer-compact .climate-footer>p{max-width:none}.climate-viewer-compact .climate-help{font-size:12px}
@media(max-width:700px){.climate-viewer{border-radius:16px}.climate-header,.climate-viewer-compact .climate-header{display:block;padding:22px 20px 17px}.climate-header .eyebrow{font-size:12px;margin-bottom:9px}.climate-header h2,.climate-viewer-compact .climate-header h2{font-size:24px;line-height:1.15;max-width:290px}.climate-modes{margin-top:18px;width:100%;gap:4px}.climate-modes button,.climate-viewer-compact .climate-modes button{flex:1;min-height:42px;padding:9px 12px;font-size:14px}.climate-content{display:flex;flex-direction:column;gap:0;padding:0}.climate-visual,.climate-viewer-compact .climate-visual{order:0;width:100%;padding-bottom:18px}.climate-stage,.climate-viewer-compact .climate-stage{height:275px}.climate-controls{padding:0 14px;gap:10px;flex-direction:column}.climate-touch-control{width:100%;max-width:268px}.climate-tools{max-width:100%;padding:3px;justify-content:center}.climate-tools button{min-height:44px;min-width:44px}.climate-tools .climate-layer-button{padding-inline:10px}.climate-help,.climate-viewer-compact .climate-help{font-size:12px;margin:10px 18px 0;min-height:16px}.climate-explanation,.climate-viewer-compact .climate-explanation{order:1;align-self:stretch;padding:22px 20px;border-top:1px solid var(--viewer-line)}.climate-explanation h3,.climate-viewer-compact .climate-explanation h3{font-size:24px;line-height:1.16;margin-bottom:10px}.climate-explanation h3 br{display:none}.climate-season,.climate-viewer-compact .climate-season{font-size:12px;margin-bottom:10px}.climate-explanation>p,.climate-viewer-compact .climate-explanation>p{max-width:none;font-size:14px;line-height:1.8}.climate-steps{display:none}.climate-stage-note{left:18px;top:15px;font-size:12px}.climate-layer-labels{top:15px;right:16px;gap:5px}.climate-layer-labels span{font-size:12px;padding:2px 7px}.climate-anchor{font-size:12px}.climate-footer,.climate-viewer-compact .climate-footer{padding:15px 20px;flex-direction:column;align-items:start;gap:8px}.climate-footer>p{max-width:none;font-size:12px}.climate-legend{font-size:12px;gap:17px}.climate-loading{left:16px;right:16px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.climate-viewer *{transition:none!important;scroll-behavior:auto}}

@media(max-width:360px){.climate-layer-button span{display:none}.climate-tools .climate-layer-button{padding:8px}.climate-tool-divider{margin-inline:2px}}

/* Vier echte Lagen; die Legende bleibt außerhalb des Modells. */
.climate-steps li[hidden],.climate-layer-labels[hidden]{display:none}
.climate-layer-labels{position:static;display:grid;grid-template-columns:repeat(2,max-content);justify-content:center;gap:9px 22px;padding:0 18px 20px}
.climate-layer-labels span{display:flex;align-items:center;gap:7px;background:none;border:0;padding:0;color:#5e6c73;font-size:12px}
.climate-layer-labels i{display:block;width:9px;height:9px;border-radius:2px;flex-shrink:0;border:1px solid #00000012}
.layer-wood{background:#bb965b}.layer-register{background:var(--climate-water)}.layer-base{background:#bcb4a5}.layer-finish{background:#e9e5de}
@media(max-width:700px){.climate-layer-labels{gap:9px 14px;padding:0 14px 18px}.climate-layer-labels span{font-size:12px}.climate-viewer[data-layers=true] .climate-stage{height:300px}}

/* Beschriftung mit festem Anschlusspunkt statt frei schwebendem Punkt. */
.climate-anchor{display:block;width:0;height:0;transform:none}
.climate-anchor span{position:absolute;transform:translate(-50%,-50%);border:1px solid #e0e5e5;background:#f9faf8f5;line-height:1.3}
.climate-anchor i{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:4px;height:4px}
.climate-anchor-line{position:absolute;left:0;top:0;height:1px;background:#98a4aaa6;transform-origin:0 50%;font-weight:normal}