/* Stage styles for the service pages and the services overview (loaded only there): service stages, OTDR, climate,
   energy, x-ray, overview building, portrait compositions and the video stage. Split from site.css to keep the
   render-blocking CSS of all other pages small. */
/* Service pages, layout "stage": one motif, short copy, depth in details. Palette and geometry only from the CD. */
.service-stage{background:var(--black);color:var(--white);padding:clamp(90px,9vw,150px) 0}.service-stage .section-top{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.6)}.service-stage .section-top>span:last-child{white-space:nowrap}
.stage-layout{display:grid;grid-template-columns:.382fr .618fr;gap:clamp(45px,6vw,110px);align-items:center;margin-top:clamp(60px,6vw,100px)}
.stage-copy h2{font-size:clamp(40px,4.6vw,78px);font-weight:400;line-height:1.06;letter-spacing:-.06em;margin:0 0 30px}.stage-copy p{font-size:clamp(17px,1.4vw,21px);line-height:1.6;color:rgba(255,255,255,.72);max-width:420px;margin:0}
.stage-device{position:relative;display:grid;grid-template-columns:minmax(190px,.9fr) minmax(48px,.42fr) minmax(210px,1.1fr);padding:clamp(26px,3vw,52px);border:1px solid rgba(255,255,255,.16)}
.stage-device::before,.stage-device::after{content:'';position:absolute;left:-1px;top:-1px;background:var(--white);transform:translate(-50%,-50%)}.stage-device::before{width:17px;height:1px}.stage-device::after{width:1px;height:17px}
.stage-switch{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));border:1px solid rgba(255,255,255,.45)}
.stage-switch button{display:grid;grid-template-columns:30px 1fr;align-content:center;column-gap:8px;text-align:left;background:none;border:0;border-top:1px solid rgba(255,255,255,.2);color:var(--white);padding:20px 22px;min-height:96px;transition:background .45s var(--ease),color .45s var(--ease)}.stage-switch button:first-child{border-top:0}
.stage-switch button span{font-size:10px;letter-spacing:.12em;opacity:.6;grid-row:1/3;padding-top:8px}.stage-switch button strong{font-weight:400;font-size:clamp(21px,1.8vw,29px);letter-spacing:-.04em;line-height:1.15}.stage-switch button small{font-size:12px;line-height:1.4;opacity:.62;margin-top:6px}
.stage-switch button:hover{background:rgba(255,255,255,.06)}.stage-switch button[aria-pressed=true]{background:var(--cotton);color:var(--black)}.stage-switch button[aria-pressed=true] span,.stage-switch button[aria-pressed=true] small{opacity:.85}.stage-switch button:focus-visible{outline:2px solid var(--white);outline-offset:-5px}.stage-switch button[aria-pressed=true]:focus-visible{outline-color:var(--black)}
.stage-wires{width:100%;height:100%;overflow:visible}.stage-wires path{fill:none;stroke:rgba(255,255,255,.24);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1 2}.stage-wires path.is-on{stroke:var(--white);stroke-dasharray:none}
.service-stage.is-signal .stage-wires path.is-on{stroke-dasharray:100;animation:wire-signal .9s var(--ease) both}@keyframes wire-signal{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.stage-targets{list-style:none;margin:0;padding:0;display:grid;grid-template-rows:repeat(4,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.2)}
.stage-targets li{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid rgba(255,255,255,.2);padding:14px 0 14px 24px;position:relative;opacity:.65;transition:opacity .45s var(--ease)}.stage-targets li::before{content:'';position:absolute;left:0;top:50%;width:9px;height:9px;border:1px solid currentColor;transform:translate(-50%,-50%)}
.stage-targets li.is-on{opacity:1}.stage-targets li.is-on::before{background:var(--blue);border-color:var(--blue)}.stage-targets li span{font-size:clamp(19px,1.6vw,26px);letter-spacing:-.035em}.stage-targets li strong{font-weight:400;font-size:11px;letter-spacing:.13em;text-transform:uppercase;text-align:right}
.stage-caption{font-size:11px;line-height:1.65;color:rgba(255,255,255,.55);margin:24px 0 0 auto;max-width:61.8%}
.stage-overview{margin-top:clamp(45px,5vw,75px);border-top:1px solid rgba(255,255,255,.18);overflow-x:auto}.stage-overview summary{cursor:pointer;list-style:none;padding:20px 30px 20px 0;font-size:15px;position:relative}.stage-overview summary::-webkit-details-marker,.deep summary::-webkit-details-marker{display:none}.stage-overview summary span,.deep summary span{position:absolute;right:0;top:50%;transform:translateY(-50%);transition:transform .25s}.stage-overview[open] summary span,.deep[open] summary span{transform:translateY(-50%) rotate(45deg)}
.stage-overview table{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:10px}.stage-overview th,.stage-overview td{text-align:left;font-weight:400;padding:12px 12px 12px 0;border-bottom:1px solid rgba(255,255,255,.14);white-space:nowrap}.stage-overview thead th{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.service-benefits{background:var(--white);padding:clamp(90px,9vw,150px) 0 clamp(60px,6vw,100px)}.service-benefits>.wrap>.eyebrow{max-width:430px;line-height:1.8}
.benefit-lines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(30px,4vw,70px);margin-top:clamp(50px,5vw,80px)}.benefit-lines article{border-top:1px solid var(--black);padding-top:26px}.benefit-lines h3{font-weight:400;font-size:clamp(26px,2.4vw,40px);line-height:1.12;letter-spacing:-.05em;margin:34px 0 18px}.benefit-lines p{font-size:17px;line-height:1.6;margin:0;max-width:340px}
.lead-section{background:var(--white);padding:clamp(40px,4vw,70px) 0 clamp(90px,9vw,150px)}.lead-row{display:grid;grid-template-columns:.618fr 1fr;gap:26px clamp(40px,6vw,110px);padding:clamp(55px,5vw,85px) 0;border-top:1px solid var(--line)}.lead-row>.eyebrow{grid-column:1/-1}
.lead-image,.service-image-figure{margin:0}.lead-image{margin-top:clamp(30px,3vw,50px);max-width:520px}.lead-image img,.service-image-figure img{display:block;width:100%;height:auto}.lead-image figcaption,.service-image-figure figcaption{font-size:11px;line-height:1.6;margin-top:12px;color:rgba(33,34,39,.7)}.service-image{background:var(--white);padding:0 0 clamp(40px,4vw,70px)}.lead-row h2{font-size:clamp(34px,3.6vw,62px);font-weight:400;line-height:1.08;letter-spacing:-.055em;margin:0}.lead-text{font-size:clamp(20px,1.75vw,27px);line-height:1.45;letter-spacing:-.025em;margin:0 0 34px;max-width:720px}
.deep{border-top:1px solid var(--line);max-width:720px}.deep summary{cursor:pointer;list-style:none;font-size:14px;padding:18px 30px 18px 0;position:relative}.deep p{font-size:16px;line-height:1.75;margin:0 0 18px;color:rgba(33,34,39,.82)}.deep[open]{padding-bottom:8px}
.process-band{background:var(--blue);padding:clamp(90px,9vw,150px) 0}.process-band h2{font-size:clamp(40px,5vw,86px);font-weight:400;line-height:1.06;letter-spacing:-.06em;margin:clamp(50px,5vw,80px) 0}
.process-band .process-intro{font-size:clamp(19px,1.6vw,24px);line-height:1.5;letter-spacing:-.02em;max-width:780px;margin:-20px 0 clamp(50px,5vw,80px)}.process-band ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--black)}.process-band li{padding:30px clamp(20px,2.5vw,40px) 10px 0;border-right:1px solid var(--line)}.process-band li+li{padding-left:clamp(20px,2.5vw,40px)}.process-band li:last-child{border-right:0}
.process-band li>span{font-size:10px;letter-spacing:.12em}.process-band h3{font-size:clamp(26px,2.4vw,40px);font-weight:400;letter-spacing:-.05em;line-height:1.12;margin:40px 0 16px}.process-band p{font-size:17px;line-height:1.6;max-width:340px;margin:0}
.evidence-compact{background:var(--white);padding:clamp(80px,8vw,130px) 0 20px}.evidence-compact-grid{display:grid;grid-template-columns:.382fr .618fr;gap:clamp(40px,6vw,110px);align-items:end}.evidence-compact-grid>div>p{font-size:16px;line-height:1.65;max-width:440px;margin:22px 0 0;color:rgba(33,34,39,.75)}
.photo-slim{margin:0;min-width:0}.photo-slim-frame{aspect-ratio:21/9;background:var(--cotton);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,2.5vw,36px)}.photo-slim-frame .photo-cross{font-size:32px;margin:0}.photo-slim-frame p{font-size:14px;line-height:1.6;max-width:520px;margin:0}.photo-slim figcaption{font-size:11px;line-height:1.6;margin-top:12px}
body:not(.has-js) .stage-switch button{pointer-events:none}
.layer-device{grid-template-columns:minmax(0,1fr);gap:24px}.plan-stage svg{display:block;width:100%;height:auto}.plan-stage text{font-family:var(--type)}
.layer-stage .stage-switch{grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr))}.layer-stage .stage-switch button{border-top:0;border-left:1px solid rgba(255,255,255,.2);min-height:92px;padding:16px 18px}.layer-stage .stage-switch button:first-child{border-left:0}
.layer-text{font-size:15px;line-height:1.55;color:rgba(255,255,255,.78);min-height:3.1em;margin:0;max-width:640px}
.plan-layer{transition:opacity .6s var(--ease)}
.layer-stage[data-step="0"] .plan-layer[data-layer="1"],.layer-stage[data-step="0"] .plan-layer[data-layer="2"],.layer-stage[data-step="1"] .plan-layer[data-layer="2"]{opacity:0}
.layer-overview{margin:0 0 20px;padding-left:22px;font-size:14px;line-height:1.7;color:rgba(255,255,255,.8)}.layer-overview li{margin:8px 0}.layer-overview strong{font-weight:400;color:white;margin-right:6px}
body:not(.has-js) .layer-text{display:none}
.lead-link{margin:0 0 30px}
.packet{opacity:0}.layer-stage.is-running .packet{opacity:1}.layer-stage.is-running .packet-rest{opacity:0}.packet-route{opacity:.9}
@media(max-width:520px){.plan-stage{overflow-x:auto;padding-bottom:10px}.plan-stage svg{min-width:580px}.plan-stage::after{content:'Grafik horizontal ansehen \2194\FE0E';display:block;font-size:10px;color:rgba(255,255,255,.6);padding-top:8px;position:sticky;left:0;width:fit-content}.plan-stage:focus-visible{outline:2px solid white;outline-offset:4px}.layer-device{padding:12px}.layer-stage .stage-switch{grid-template-columns:1fr}.layer-stage .stage-switch button{border-left:0;border-top:1px solid rgba(255,255,255,.2);min-height:64px;padding:12px 16px}.layer-stage .stage-switch button:first-child{border-top:0}.layer-stage .stage-switch button strong{font-size:20px}.layer-text{font-size:14px;padding:0 4px}}
@media(prefers-reduced-motion:reduce){.plan-layer{transition:none}}
@media(max-width:800px){.stage-layout,.lead-row,.evidence-compact-grid{grid-template-columns:1fr}.stage-device{grid-template-columns:1fr;padding:22px}.stage-switch{grid-template-rows:none}.stage-switch button{min-height:76px;padding:16px 18px}.stage-wires{display:none}.stage-targets{grid-template-rows:none;grid-template-columns:1fr 1fr;column-gap:22px;margin-top:22px;border-top:0}.stage-targets li{flex-direction:column;align-items:flex-start;gap:6px;padding:16px 0 16px 20px}.stage-targets li strong{text-align:left}.stage-caption{max-width:none;margin-left:0}
.benefit-lines{grid-template-columns:1fr;gap:34px}.benefit-lines h3{margin:22px 0 12px}.process-band ol{grid-template-columns:1fr}.process-band li,.process-band li+li{border-right:0;border-bottom:1px solid var(--line);padding:26px 0}.process-band h3{margin:20px 0 10px}.photo-slim-frame{aspect-ratio:auto;min-height:220px}}
@media(max-width:520px){.hero-subline{font-size:21px;margin:-12px 0 35px}.stage-copy h2{font-size:40px}.stage-targets li span{font-size:19px}.lead-row h2{font-size:31px}.lead-text{font-size:20px}.process-band h2{font-size:42px}}
@media(prefers-reduced-motion:reduce){.stage-switch button,.stage-targets li,.stage-overview summary span,.deep summary span{transition:none}.service-stage.is-signal .stage-wires path.is-on{animation:none;stroke-dasharray:none}}
/* OTDR scroll story */
.otdr-scroll{padding:0}.otdr-sticky{padding:clamp(90px,9vw,150px) 0}.otdr-scroll.is-live{height:420svh}.otdr-scroll.is-live .otdr-sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding:calc(var(--navheight) + 18px) 0 24px}.otdr-sticky>.wrap{width:100%}
.otdr-layout{display:grid;grid-template-columns:.382fr .618fr;gap:clamp(40px,5vw,90px);align-items:center;margin-top:clamp(30px,3vw,50px)}
.otdr-copy h2{font-size:clamp(40px,4.4vw,74px);font-weight:400;line-height:1.06;letter-spacing:-.06em;margin:0 0 22px}.otdr-intro{font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:rgba(255,255,255,.72);max-width:420px;margin:0}
.otdr-steps{list-style:none;margin:28px 0 0;padding:0}.otdr-steps li{border-top:1px solid rgba(255,255,255,.18);padding:18px 0;display:grid;grid-template-columns:34px 1fr;column-gap:8px}.otdr-steps li>span{font-size:10px;letter-spacing:.12em;opacity:.6;grid-row:1/3;padding-top:9px}
.otdr-steps h3{font-weight:400;font-size:clamp(22px,1.9vw,30px);letter-spacing:-.04em;line-height:1.15;margin:0 0 8px}.otdr-steps p{font-size:15px;line-height:1.55;color:rgba(255,255,255,.74);margin:0;max-width:440px}
.otdr-scroll.is-live .otdr-steps{position:relative;min-height:190px}.otdr-scroll.is-live .otdr-steps li{position:absolute;inset:0 0 auto;opacity:0;transition:opacity .45s var(--ease)}.otdr-scroll.is-live .otdr-steps li.is-active{opacity:1}
.otdr-figure{min-width:0}.otdr-figure svg{display:block;width:100%;height:auto}.otdr-scroll.is-live .otdr-figure svg{max-height:58svh}.otdr-figure text{font-family:var(--type)}
.otdr-scroll.is-live .otdr-trace{stroke-dasharray:1000}.otdr-pulse{opacity:0}
.otdr-lbl{transition:opacity .45s var(--ease)}.otdr-scroll:not(.reached-2) .lbl-conn,.otdr-scroll:not(.reached-3) .lbl-fault,.otdr-scroll:not(.reached-4) .lbl-ruler{opacity:0}
.otdr-nav{display:none}.otdr-scroll.is-live .otdr-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:16px}.otdr-nav button{background:none;border:0;border-top:2px solid rgba(255,255,255,.25);color:white;text-align:left;padding:10px 0 4px;font-size:10px;letter-spacing:.12em;min-height:36px}.otdr-nav button[aria-pressed=true]{border-top-color:white}.otdr-nav button:focus-visible{outline:2px solid white;outline-offset:3px}
.otdr-scroll .stage-caption{max-width:none;margin:14px 0 0}
@media(max-width:800px){.otdr-layout{grid-template-columns:1fr}.otdr-figure{order:-1}}@media(max-width:520px){.otdr-figure{overflow-x:auto;padding-bottom:6px}.otdr-figure svg{min-width:580px}.otdr-figure::after{content:'Grafik horizontal ansehen \2194\FE0E';display:block;font-size:10px;color:rgba(255,255,255,.6);padding-top:8px;position:sticky;left:0;width:fit-content}}
@media(prefers-reduced-motion:reduce){.otdr-lbl,.otdr-scroll .otdr-steps li{transition:none}}
.otdr-deep-section{padding:0 0 clamp(70px,7vw,120px)}.otdr-deep{margin-top:0}.otdr-deep summary{font-size:17px}.otdr-deep p{font-size:16px;line-height:1.75;color:rgba(255,255,255,.8);max-width:820px;margin:0 0 20px}.otdr-deep p strong{font-weight:400;color:white;display:block;font-size:19px;letter-spacing:-.02em;margin-bottom:4px}
.layer-stage:not([data-step="0"]) .dim-after{opacity:.3}
/* Climate isotherm motif */
.climate-device{grid-template-columns:minmax(0,1fr);gap:22px}.climate-controls{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:14px 14px;align-items:end}.climate-time{grid-column:1/-1}.climate-play{border-style:dashed}
.climate-time>span{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--blue)}.climate-time output{color:white}
.climate-time input{appearance:none;width:100%;height:28px;background:transparent;margin:6px 0 0;cursor:ew-resize}.climate-time input::-webkit-slider-runnable-track{height:1px;background:rgba(255,255,255,.45)}.climate-time input::-webkit-slider-thumb{appearance:none;background:white;width:14px;height:14px;border-radius:50%;margin-top:-6.5px}.climate-time input::-moz-range-track{height:1px;background:rgba(255,255,255,.45)}.climate-time input::-moz-range-thumb{background:white;width:14px;height:14px;border:0;border-radius:50%}
.climate-controls .room-toggle{min-height:40px;padding:0 16px;white-space:nowrap}.climate-time input:focus-visible{outline:2px solid white;outline-offset:4px}
.climate-art{display:block;width:100%;height:auto}.climate-art text{font-family:var(--type)}.climate-art .blind,.climate-art .blind-label{transition:opacity .5s var(--ease)}
body:not(.has-js) .climate-controls{display:none}
@media(max-width:800px){.climate-controls{grid-template-columns:1fr 1fr 1fr}}@media(max-width:520px){.climate-device{padding:12px}.climate-controls{grid-template-columns:1fr}.climate-controls .room-toggle{white-space:normal}}
@media(prefers-reduced-motion:reduce){.climate-art .blind,.climate-art .blind-label{transition:none}}
/* Energy flow motif */
.energy-device{grid-template-columns:minmax(0,1fr);gap:22px}.energy-art{display:block;width:100%;height:auto}.energy-art text{font-family:var(--type)}
.energy-controls{display:flex;flex-wrap:wrap;gap:10px}.energy-controls .room-toggle{min-height:40px;padding:0 14px}
.energy-state{font-size:15px;line-height:1.55;color:white;border-top:1px solid rgba(255,255,255,.2);padding-top:16px;margin-top:26px;max-width:420px;min-height:3.2em}
.energy-art .flow{opacity:.18;stroke-dasharray:4 10;transition:opacity .4s var(--ease),stroke-width .4s}.energy-art .flow.is-on{opacity:1}.energy-stage.is-visible .energy-art .flow.is-on{animation:energy-flow 1.1s linear infinite}
@keyframes energy-flow{to{stroke-dashoffset:-28}}
.energy-art .meter-fill{transform-box:fill-box;transform-origin:50% 100%;transition:transform .6s var(--ease)}.energy-stage.is-over .meter-fill{fill:#EEE6E0}
.energy-art .car-note,.energy-art .limit-note{transition:opacity .4s}.energy-art .store-fill{transform-box:fill-box;transform-origin:50% 100%}.energy-art .pv-icon{transition:opacity .4s}.energy-stage.is-visible .energy-art .flow.is-on.is-reverse{animation-direction:reverse}
.energy-clock{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin:26px 0 0}.energy-clock+.energy-state{margin-top:10px}
body:not(.has-js) .energy-clock{display:none}
body:not(.has-js) .energy-controls,body:not(.has-js) .energy-state{display:none}
@media(max-width:520px){.energy-device{padding:12px}.energy-controls .room-toggle{flex:1 1 calc(50% - 10px)}}
@media(prefers-reduced-motion:reduce){.energy-stage .energy-art .flow.is-on{animation:none;stroke-dasharray:none}.energy-art .flow,.energy-art .meter-fill{transition:none}}
/* X-ray motif */
.xray-device{grid-template-columns:minmax(0,1fr);gap:22px}.xray-art{display:block;width:100%;height:auto}.xray-art text{font-family:var(--type)}
.xray-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 18px;align-items:end}.xray-reveal>span{display:flex;justify-content:space-between}.xray-controls .room-toggle{min-height:40px;padding:0 16px;white-space:nowrap}
.xray-state{font-size:15px;line-height:1.55;color:white;border-top:1px solid rgba(255,255,255,.2);padding-top:16px;margin-top:26px;max-width:440px}
.xray-art .fault-mark{transition:opacity .3s}.xray-stage.has-fault .mt-led{animation:mt-blink .7s steps(2) 6}.xray-stage.has-fault .mt rect{stroke:#EEE6E0;stroke-width:3}
@keyframes mt-blink{50%{opacity:.15}}
.xray-views{grid-column:1/-1;display:flex;gap:10px}.xray-views .room-toggle{min-height:40px;padding:0 22px;min-width:90px}.xray-scenes[hidden],.xray-controls [hidden]{display:none}
.xray-scenes{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px}.xray-scenes>span{font-size:11px;color:var(--blue);margin-right:6px}.xray-scenes .room-toggle{min-height:36px;padding:0 14px}
.xray-art .room-wash,.xray-art .ceil-light,.xray-art .ceil-lum{transition:opacity .6s var(--ease),fill .6s}.xray-art .key{transition:fill .3s}
.xray-art[data-scene="op"] .key[data-key="op"],.xray-art[data-scene="endo"] .key[data-key="endo"],.xray-art[data-scene="clean"] .key[data-key="clean"]{fill:#D6E0D9}
.xray-art .room-wash,.xray-art .ceil-light path{transition:fill-opacity .6s var(--ease),fill .6s}
.xray-art[data-scene="endo"] .room-wash{fill:#C9D2D6;fill-opacity:.13}.xray-art[data-scene="endo"] .ceil-light{opacity:.12}.xray-art[data-scene="endo"] .ceil-lum{opacity:.3}
.xray-art[data-scene="clean"] .room-wash{fill-opacity:.17}.xray-art[data-scene="clean"] .ceil-light path{fill-opacity:.2}
body:not(.has-js) .xray-controls,body:not(.has-js) .xray-state{display:none}body:not(.has-js) .xr-install{opacity:1!important}body:not(.has-js) .xray-view[hidden]{display:block}body:not(.has-js) .xr-room{opacity:.35!important}
@media(max-width:800px){.xray-controls{grid-template-columns:1fr}}@media(max-width:520px){.xray-device{padding:12px}}
@media(prefers-reduced-motion:reduce){.xray-stage.has-fault .mt-led{animation:none}}
/* Services overview: building motif and chapters */
.overview-device{grid-template-columns:minmax(0,1fr)}.overview-map{position:relative}.overview-building:not([hidden]),.spot-set:not([hidden]){animation:overview-in .5s var(--ease)}@keyframes overview-in{from{opacity:0}to{opacity:1}}.spot-set{position:absolute;inset:0}.overview-art{display:block;width:100%;height:auto}
.overview-scenarios{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}.overview-scenarios .room-toggle{min-height:40px;padding:0 18px}
.overview-scenario-text{font-size:15px;line-height:1.55;color:rgba(255,255,255,.82);border-top:1px solid rgba(255,255,255,.2);padding-top:16px;margin-top:22px;min-height:7.8em}
.spot{position:absolute;transform:translate(-50%,-50%);z-index:1;display:block}.spot-num{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--cotton);color:var(--black);font-size:12px;letter-spacing:.06em;box-shadow:0 0 0 6px rgba(238,230,224,.18);transition:transform .3s var(--ease),opacity .3s,box-shadow .3s}
.spot.is-dim .spot-num{opacity:.28;box-shadow:none}.spot:hover .spot-num,.spot:focus-visible .spot-num{transform:scale(1.12);opacity:1}.spot:focus-visible{outline:none}.spot:focus-visible .spot-num{outline:2px solid white;outline-offset:4px}
.spot-tip{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translate(-50%,6px);width:230px;background:var(--white);color:var(--black);padding:14px 16px;font-size:13px;line-height:1.45;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease);z-index:2}.spot-tip strong{display:block;font-weight:400;font-size:17px;letter-spacing:-.02em;margin-bottom:6px}.spot-tip small{font-size:13px}
.spot:hover .spot-tip,.spot:focus-visible .spot-tip{opacity:1;transform:translate(-50%,0)}.spot.tip-left .spot-tip{left:auto;right:-10px;transform:translate(0,6px)}.spot.tip-right .spot-tip{left:-10px;transform:translate(0,6px)}.spot.tip-left:hover .spot-tip,.spot.tip-left:focus-visible .spot-tip,.spot.tip-right:hover .spot-tip,.spot.tip-right:focus-visible .spot-tip{transform:none}
.overview-chapters{background:var(--white);padding:clamp(90px,9vw,150px) 0}.chapters-title{font-size:clamp(40px,5vw,86px);font-weight:400;line-height:1.06;letter-spacing:-.06em;margin:clamp(50px,5vw,80px) 0}
.chapter{border-top:1px solid var(--line);scroll-margin-top:110px}.chapter:last-child{border-bottom:1px solid var(--line)}.chapter>a{display:grid;grid-template-columns:.618fr .382fr;gap:clamp(30px,5vw,90px);align-items:center;padding:clamp(34px,4vw,60px) 0}
.chapter:nth-child(odd)>a{grid-template-columns:.382fr .618fr}.chapter:nth-child(odd) .chapter-visual{order:2}
.chapter-visual{background:var(--black);aspect-ratio:16/9;position:relative;overflow:hidden}.chapter-visual img{position:absolute;left:5%;top:6%;width:90%;height:88%;object-fit:contain;transition:transform .8s var(--ease)}.chapter>a:hover .chapter-visual img{transform:scale(1.03)}
.chapter-copy h3{font-size:clamp(30px,3.2vw,54px);font-weight:400;letter-spacing:-.055em;line-height:1.08;margin:22px 0 16px}.chapter-copy p{font-size:clamp(17px,1.4vw,21px);line-height:1.5;max-width:460px;margin:0 0 28px}
@media(max-width:800px){.chapter>a,.chapter:nth-child(odd)>a{grid-template-columns:1fr}.chapter:nth-child(odd) .chapter-visual{order:0}.spot-num{width:30px;height:30px;font-size:11px}.spot-tip{display:none}}
@media(prefers-reduced-motion:reduce){.spot-num,.spot-tip,.chapter-visual img{transition:none}.overview-building,.spot-set{animation:none!important}}
/* Portrait compositions of the stage graphics for phones and small tablets */
.art-mobile{display:none}
@media(max-width:800px){.art-desktop{display:none}.art-mobile{display:block}.plan-stage:has(.art-mobile){overflow:visible;padding-bottom:0}.plan-stage:has(.art-mobile)::after{content:none}.plan-stage .art-mobile svg{min-width:0;width:100%;max-width:480px;margin:0 auto;height:auto;max-height:none}}

@media(max-width:800px){.otdr-figure:has(.art-mobile){overflow:visible;padding-bottom:0}.otdr-figure:has(.art-mobile)::after{content:none}.otdr-figure .art-mobile svg{min-width:0;width:100%;max-width:480px;margin:0 auto}}
.spot-set[hidden]{display:none!important}
/* Video stage: fixed aspect ratio (no layout shift), poster first, marked placeholder until approval */
.video-stage{background:var(--white);padding:clamp(60px,6vw,110px) 0}.video-figure{margin:clamp(24px,3vw,40px) 0 0}
.video-frame{position:relative;aspect-ratio:var(--video-ratio,16/9);background:var(--black);overflow:hidden}.video-frame video{display:block;width:100%;height:100%;object-fit:cover}
.video-tag{position:absolute;top:14px;right:16px;font-size:10px;letter-spacing:.12em;color:white;background:rgba(33,34,39,.72);padding:6px 9px}
.video-toggle{position:absolute;left:16px;bottom:16px;min-height:40px;padding:0 18px;border:0;background:var(--white);color:var(--black);font:inherit;font-size:13px;letter-spacing:.02em;cursor:pointer}.video-toggle:focus-visible{outline:2px solid white;outline-offset:3px}
.video-figure figcaption{font-size:11px;line-height:1.6;margin-top:12px;color:rgba(33,34,39,.7)}
.video-text{margin-top:14px;border-top:1px solid var(--line)}.video-text summary{display:flex;justify-content:space-between;padding:14px 0;font-size:14px;cursor:pointer;list-style:none}.video-text summary::-webkit-details-marker{display:none}.video-text p{font-size:15px;line-height:1.65;max-width:720px;margin:0 0 14px;color:rgba(33,34,39,.8)}
.video-placeholder .video-frame{background:var(--cotton);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,2.5vw,36px)}.video-placeholder .photo-cross{font-size:32px;margin:0}.video-placeholder .video-frame p{font-size:clamp(15px,1.3vw,19px);line-height:1.6;max-width:560px;margin:0;color:var(--black)}.video-placeholder .video-tag{position:static;align-self:flex-start;background:none;color:rgba(33,34,39,.7);padding:0}
.video-placeholder{max-width:61.8%;margin-left:auto}.video-placeholder .video-frame{aspect-ratio:21/9}
@media(max-width:800px){.video-placeholder{max-width:none}.video-placeholder .video-frame{aspect-ratio:auto;min-height:220px;gap:20px}}
body:not(.has-js) .scenario-film[hidden]{display:block}
@media(max-width:600px){.stage-overview[open]{overflow-x:auto}}
@media(max-width:360px){.service-stage .section-top>span:last-child{white-space:normal;text-align:right}}
.lead-image img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 45%}
/* Layer steps: side by side only where long words fit (from 1300 px, number above the word); below that stacked */
@media(min-width:801px) and (max-width:1299px){.layer-stage .stage-switch{grid-template-columns:1fr}.layer-stage .stage-switch button{border-left:0;border-top:1px solid rgba(255,255,255,.2);min-height:72px;padding:14px 18px}.layer-stage .stage-switch button:first-child{border-top:0}}
@media(min-width:1300px){.layer-stage .stage-switch button{grid-template-columns:1fr;align-content:start}.layer-stage .stage-switch button span{grid-row:auto;padding:0 0 10px}.layer-stage .stage-switch button strong{font-size:clamp(22px,1.7vw,28px)}}
.layer-stage .stage-switch button strong,.layer-stage .stage-switch button small{min-width:0;overflow-wrap:break-word}
/* Service areas (worlds) and everyday examples (moments), used by the KNX page */
.service-worlds{background:var(--cotton);padding:clamp(90px,9vw,150px) 0}
.worlds-head{display:grid;grid-template-columns:.618fr .382fr;gap:clamp(30px,5vw,90px);align-items:end;margin:clamp(50px,5vw,80px) 0 clamp(50px,5vw,80px)}
.worlds-head h2{font-size:clamp(40px,5vw,86px);font-weight:400;line-height:1.06;letter-spacing:-.06em;margin:0}
.worlds-head p{font-size:clamp(17px,1.4vw,21px);line-height:1.55;margin:0;max-width:460px}
.worlds-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,50px)}
.worlds-grid article{border-top:1px solid var(--black);padding-top:24px;min-width:0}
.worlds-grid h3{font-size:clamp(26px,2.4vw,40px);font-weight:400;letter-spacing:-.05em;line-height:1.12;margin:34px 0 16px}
.worlds-grid p{font-size:16px;line-height:1.6;margin:0 0 22px}
.worlds-grid ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.worlds-grid li{font-size:13px;line-height:1.45;padding:10px 0;border-bottom:1px solid var(--line)}
.service-moments{background:var(--green);padding:clamp(90px,9vw,150px) 0}
.moments-layout{display:grid;grid-template-columns:.382fr .618fr;gap:clamp(40px,6vw,110px);align-items:start}
.moments-layout h2{font-size:clamp(36px,4vw,66px);font-weight:400;line-height:1.08;letter-spacing:-.055em;margin:34px 0 26px}
.moments-layout>div>p{font-size:15px;line-height:1.6;max-width:360px;margin:0;color:rgba(33,34,39,.8)}
.moments-layout ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--black)}
.moments-layout li{font-size:clamp(20px,1.9vw,28px);letter-spacing:-.03em;line-height:1.35;padding:22px 0;border-bottom:1px solid var(--line)}
.process-band ol{grid-template-columns:repeat(var(--steps,3),minmax(0,1fr))}
.process-band li>ul{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--line);max-width:340px}
.process-band li>ul>li{font-size:13px;line-height:1.45;padding:9px 0;border-bottom:1px solid var(--line);border-right:0}
.process-band li>ul>li+li{padding-left:0}
@media(max-width:1300px){.process-band ol.process-many{grid-template-columns:repeat(2,minmax(0,1fr))}.process-many>li:nth-child(2){border-right:0}.process-many>li:nth-child(3){padding-left:0}.process-many>li:nth-child(n+3){border-top:1px solid var(--line)}.worlds-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:50px}}
@media(max-width:800px){.worlds-head,.moments-layout{grid-template-columns:1fr}.worlds-grid,.process-band ol.process-many{grid-template-columns:1fr}.process-many>li:nth-child(n+3){border-top:0}.worlds-grid h3{margin:20px 0 12px}}