/* V10.20 — MSK water laboratory, journey and scale comparison */
.detail-shell--water{--water:#7bd9ee;--water-deep:#071c25;--water-ink:#eaf9fb;background:#eef4f2}
.detail-shell--water :is(.water-meter,.water-journey,.water-compare,.water-hotspots,.water-check,.water-result){border-radius:26px}
.detail-shell--water .signature{padding-right:calc(7vw + 140px)}
.detail-shell--water .signature strong{max-width:980px;font-size:clamp(46px,5vw,84px)!important;line-height:.96!important}

/* Photographic measuring station */
.water-lab-hero{min-height:720px;height:94svh;background:#061b24;color:#fff}
.water-lab-hero>img{object-position:52% center;filter:brightness(.68) saturate(.72) contrast(1.08)!important;transform:scale(1.02)!important}
.water-lab-hero::after{background:linear-gradient(90deg,rgba(3,18,25,.88),rgba(3,18,25,.38) 52%,rgba(3,18,25,.58)),linear-gradient(0deg,rgba(3,18,25,.92),transparent 56%)!important}
.water-lab-hero .detail-photo-break__copy{left:6%;bottom:10%;z-index:5;max-width:650px}
.water-lab-hero .detail-photo-break__copy p{max-width:480px;margin:20px 0 0;color:rgba(235,250,252,.74);font-size:15px;line-height:1.6}
.water-lab-hero__light{position:absolute;z-index:3;inset:0;pointer-events:none;background:radial-gradient(circle 260px at 67% 43%,rgba(139,231,248,.2),transparent 72%);animation:waterLight 8s ease-in-out infinite alternate}
@keyframes waterLight{from{opacity:.55;transform:translate(-1.5%,1%)}to{opacity:1;transform:translate(1.5%,-1%)}}
.water-lab-hero__ripples{position:absolute;z-index:4;left:66%;top:43%;width:230px;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.water-lab-hero__ripples i{position:absolute;inset:42%;border:1px solid rgba(158,231,244,.45);border-radius:50%;opacity:0;animation:waterRipple 6s ease-out infinite}.water-lab-hero__ripples i:nth-child(2){animation-delay:2s}.water-lab-hero__ripples i:nth-child(3){animation-delay:4s}
@keyframes waterRipple{0%{opacity:.55;transform:scale(.2)}68%{opacity:.08}100%{opacity:0;transform:scale(5)}}
.water-meter{position:absolute;z-index:6;right:6%;top:50%;width:min(38vw,510px);padding:26px;border:1px solid rgba(144,221,236,.4);background:rgba(3,22,30,.82);box-shadow:0 30px 75px rgba(0,0,0,.43),inset 0 1px rgba(255,255,255,.06);backdrop-filter:blur(16px);transform:translateY(-50%)}
.water-meter__head small{color:var(--water);font:750 10px/1.2 var(--body);letter-spacing:.13em}.water-meter__head strong{display:block;margin:10px 0 20px;font:400 clamp(28px,3vw,44px)/1 var(--display)}
.water-meter__display{display:grid;grid-template-columns:88px 1fr;gap:20px;align-items:center;margin-bottom:20px}
.water-meter__symbol{display:grid;place-items:center;width:88px;aspect-ratio:1;border:1px solid rgba(148,224,238,.48);border-radius:50%;background:radial-gradient(circle,rgba(123,217,238,.18),transparent 68%);color:#d7f8fd;font:400 31px/1 var(--display);box-shadow:0 0 35px rgba(104,213,235,.15);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.water-meter__scale{position:relative;height:46px;border-radius:999px;background:linear-gradient(90deg,#68cbe0,#d5c97a,#bd765e);overflow:hidden}.water-meter__scale i{position:absolute;left:var(--meter-level,68%);top:0;bottom:0;width:3px;background:#fff;box-shadow:0 0 18px #fff;transition:left .8s cubic-bezier(.2,.8,.2,1)}.water-meter__scale b{position:absolute;inset:8px;border:1px solid rgba(255,255,255,.22);border-radius:999px}.water-meter__scale em{position:absolute;left:16px;right:16px;bottom:7px;display:flex;justify-content:center;color:rgba(1,18,24,.72);font:750 9px/1 var(--body);font-style:normal;letter-spacing:.08em}
.water-meter>p{margin:0;color:rgba(232,247,249,.74);font-size:14px;line-height:1.6}.water-meter__tabs{display:flex;gap:8px;margin-top:22px}.water-meter__tabs button{flex:1;padding:12px;border:1px solid rgba(127,218,235,.25);border-radius:999px;background:rgba(255,255,255,.03);color:rgba(235,249,251,.72);font:700 12px/1 var(--body);cursor:pointer}.water-meter__tabs button:hover,.water-meter__tabs button:focus-visible,.water-meter__tabs button[aria-pressed="true"]{border-color:var(--water);background:rgba(123,217,238,.16);color:#fff}.water-lab-hero.is-changing .water-meter__symbol{transform:scale(.76) rotate(-10deg)}

/* Scroll driven journey through the machine */
.water-journey{position:relative;display:grid;grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);gap:5vw;align-items:center;min-height:860px;padding:110px 7vw;color:var(--water-ink);background:radial-gradient(circle at 75% 45%,rgba(53,163,187,.2),transparent 30%),linear-gradient(135deg,#061820,#0a2832);overflow:hidden}
.water-journey::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(133,218,234,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(133,218,234,.05) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,transparent 5%,#000 72%,transparent)}
.water-journey__copy,.water-journey__machine{position:relative;z-index:2}.water-journey__copy>small,.water-compare__head>small{color:var(--water);font:750 10px/1.2 var(--body);letter-spacing:.15em}.water-journey__copy h2,.water-compare__head h2{margin:18px 0 24px;font:400 clamp(48px,5vw,80px)/.92 var(--display);letter-spacing:-.04em}.water-journey__copy h2 em,.water-compare__head h2 em{color:var(--water);font-weight:400}.water-journey__copy>p,.water-compare__head>p{max-width:570px;color:rgba(229,247,249,.7);font-size:16px;line-height:1.72}
.water-journey__stages{display:flex;flex-wrap:wrap;gap:6px;margin-top:30px}.water-journey__stages span{padding:8px 11px;border:1px solid rgba(126,215,232,.14);border-radius:999px;color:rgba(221,244,248,.5);font:650 10px/1 var(--body);transition:.35s}.water-journey__stages span.is-current{border-color:rgba(126,215,232,.72);background:rgba(123,217,238,.13);color:#fff;box-shadow:0 0 22px rgba(123,217,238,.12)}
.water-journey__machine{padding:22px;border:1px solid rgba(127,217,235,.22);border-radius:28px;background:rgba(2,16,22,.55);box-shadow:0 35px 80px rgba(0,0,0,.3)}.water-journey__machine svg{display:block;width:100%;height:auto}.water-journey__machine :is(.machine-shell,.water-tank,.pump,.boiler,.valve,.brew-head){fill:rgba(95,190,211,.035);stroke:rgba(161,229,241,.32);stroke-width:2}.water-journey__machine text{fill:rgba(184,231,239,.48);font:700 12px var(--body);letter-spacing:2px}.water-pipe{fill:none;stroke:rgba(143,218,232,.17);stroke-width:22;stroke-linecap:round}.water-pipe-flow{fill:none;stroke:#74d6eb;stroke-width:5;stroke-linecap:round;stroke-dasharray:12 22;animation:waterFlow 2.4s linear infinite;filter:drop-shadow(0 0 8px #5fcce4)}@keyframes waterFlow{to{stroke-dashoffset:-68}}.water-drop{fill:#b9f4ff;stroke:#fff;stroke-width:2}.deposits circle{fill:#c7a66b;stroke:#f0d39a;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2);transition:opacity .5s,transform .7s cubic-bezier(.2,.8,.2,1)}.water-journey.has-deposits .deposits circle{opacity:.78;transform:scale(1)}.water-journey__status{display:grid;grid-template-columns:55px 1fr;gap:4px 15px;margin:0 20px 15px;padding:18px;border-top:1px solid rgba(122,215,233,.16)}.water-journey__status>span{grid-row:1/3;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;border:1px solid rgba(122,215,233,.5);color:var(--water);font:600 22px/1 var(--display)}.water-journey__status strong{font:400 25px/1.1 var(--display)}.water-journey__status p{margin:3px 0 0;color:rgba(225,245,248,.63);font-size:12px;line-height:1.5}

/* User controlled scale comparison */
.water-compare{padding:100px 7vw;color:#eef9fa;background:linear-gradient(145deg,#0a242d,#102e36 55%,#071a22)}.water-compare__head{max-width:920px}.water-compare__stage{position:relative;height:360px;margin-top:46px;border:1px solid rgba(133,219,235,.22);border-radius:26px;background:radial-gradient(circle at 50% 50%,rgba(121,215,235,.08),transparent 60%),#061820;overflow:hidden}.water-compare__pipe{position:absolute;left:7%;right:7%;top:50%;height:126px;border:12px solid #718b91;border-radius:70px;transform:translateY(-50%);box-shadow:inset 0 0 0 12px #172e35,inset 0 0 28px rgba(0,0,0,.72),0 25px 55px rgba(0,0,0,.24)}.water-compare__pipe span{position:absolute;left:35px;right:35px;top:50%;height:33px;border-radius:999px;background:linear-gradient(90deg,#70d6eb,#b4f2fb,#5bc7df);transform:translateY(-50%);box-shadow:0 0 24px rgba(99,212,235,.45)}.water-compare__damage{position:absolute;inset:0;clip-path:inset(0 0 0 var(--compare));background:#0c242a}.water-compare__pipe--scaled{border-color:#887762;box-shadow:inset 0 0 0 25px #b99c6e,inset 0 0 32px rgba(47,29,9,.72),0 25px 55px rgba(0,0,0,.28)}.water-compare__pipe--scaled span{height:14px;opacity:.74}.water-compare__pipe--scaled i{position:absolute;width:45px;height:30px;border-radius:50%;background:#d3b57e;box-shadow:inset 0 0 0 6px rgba(111,79,39,.28)}.water-compare__pipe--scaled i:nth-child(1){left:9%;top:12%}.water-compare__pipe--scaled i:nth-child(2){left:27%;bottom:8%}.water-compare__pipe--scaled i:nth-child(3){left:52%;top:6%}.water-compare__pipe--scaled i:nth-child(4){right:20%;bottom:4%}.water-compare__pipe--scaled i:nth-child(5){right:7%;top:18%}.water-compare__divider{position:absolute;z-index:3;left:var(--compare);top:0;bottom:0;width:2px;background:#d8faff;box-shadow:0 0 22px 5px rgba(113,218,239,.35);transform:translateX(-1px)}.water-compare__labels{position:absolute;z-index:4;left:25px;right:25px;bottom:22px;display:flex;justify-content:space-between;color:rgba(226,247,249,.66);font:650 11px/1 var(--body)}
.water-compare__control{display:grid;grid-template-columns:150px 1fr 190px;gap:20px;align-items:center;margin-top:25px;padding:18px 22px;border:1px solid rgba(131,218,235,.16);border-radius:18px;background:rgba(255,255,255,.03)}.water-compare__control>span{font:650 12px/1 var(--body)}.water-compare__control input{width:100%;accent-color:#72d5e9}.water-compare__control strong{text-align:right;color:var(--water);font:650 13px/1 var(--body)}.water-compare__note{max-width:860px;margin:19px 0 0;color:rgba(227,246,249,.68);font-size:14px;line-height:1.65}

/* Technical hotspots */
.water-hotspots{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:28px;align-items:center;margin-top:42px;padding:28px;border:1px solid rgba(58,113,133,.2);border-radius:26px;background:linear-gradient(145deg,rgba(40,106,127,.09),rgba(255,255,255,.36))}.water-hotspots__machine svg{display:block;width:100%;height:auto;fill:rgba(42,102,121,.025);stroke:rgba(37,92,111,.38);stroke-width:2}.water-hotspots__machine .hotspot circle:first-child{fill:rgba(82,179,203,.07);stroke:rgba(51,145,169,.42);stroke-dasharray:6 8;transform-box:fill-box;transform-origin:center;animation:hotspotPulse 5s ease-in-out infinite}.water-hotspots[data-step="0"] .hotspot--0 circle,.water-hotspots[data-step="1"] .hotspot--1 circle,.water-hotspots[data-step="2"] .hotspot--2 circle{stroke:#278ba5;fill:rgba(64,170,196,.18);filter:drop-shadow(0 0 12px rgba(54,166,193,.35))}@keyframes hotspotPulse{50%{transform:scale(1.08)}}.water-hotspots__readout small{color:#317e94;font:750 10px/1 var(--body);letter-spacing:.12em}.water-hotspots__readout strong{display:block;margin:10px 0 12px;color:#112d36;font:400 clamp(29px,3vw,43px)/1 var(--display)}.water-hotspots__readout p{margin:0;color:#44616a;font-size:14px;line-height:1.62}.water-hotspots__readout div{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}.water-hotspots__readout button{padding:10px 12px;border:1px solid rgba(45,110,130,.22);border-radius:999px;background:rgba(255,255,255,.52);color:#284e5b;font:650 11px/1 var(--body);cursor:pointer}.water-hotspots__readout button[aria-pressed="true"],.water-hotspots__readout button:hover{border-color:#2b91ab;background:#d9f0f4;color:#0b3b49}

/* Water check as a short laboratory sequence */
.detail-shell--water .water-check{position:relative;overflow:hidden;border-color:rgba(44,113,134,.2);background:linear-gradient(150deg,#f9fcfb,#e7f1ef);box-shadow:0 28px 70px rgba(37,85,99,.11)}.water-analysis-sequence{display:none;position:absolute;z-index:6;inset:0;place-items:center;background:rgba(238,248,247,.94);backdrop-filter:blur(8px)}.water-analysis-sequence span{margin-top:80px;color:#315f6c;font:650 13px/1 var(--body);letter-spacing:.05em}.water-analysis-sequence i{position:absolute;width:65px;height:65px;border:2px solid rgba(45,138,163,.32);border-radius:50%;animation:analysisRing 1.35s ease-out infinite}.water-analysis-sequence i:nth-child(2){animation-delay:.28s}.water-analysis-sequence i:nth-child(3){animation-delay:.56s}@keyframes analysisRing{0%{opacity:.75;transform:scale(.2)}100%{opacity:0;transform:scale(1.65)}}.water-check.is-analyzing .water-analysis-sequence{display:grid}.water-result{border:1px solid rgba(50,121,140,.2);background:#fff;box-shadow:0 20px 50px rgba(34,80,92,.09);animation:waterResult .7s cubic-bezier(.2,.8,.2,1) both}@keyframes waterResult{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}.water-result::before{content:"MASCHINENFREUNDLICH";display:inline-flex;margin-bottom:18px;padding:8px 11px;border-radius:999px;background:#d9f0eb;color:#246555;font:750 9px/1 var(--body);letter-spacing:.1em}.water-result[data-state="watch"]::before{content:"BEOBACHTEN";background:#f1ead2;color:#79652e}.water-result[data-state="action"]::before{content:"HANDLUNGSBEDARF";background:#f1ded8;color:#8a4839}

@media(min-width:1051px){.detail-shell--water .detail-body{padding-right:calc(7vw + 138px)}}
@media(max-width:1050px){.detail-shell--water .signature{padding-right:7vw}.detail-shell--water .signature strong{max-width:900px;font-size:clamp(44px,6.2vw,66px)!important}.water-journey{grid-template-columns:1fr;min-height:0}.water-meter{right:5%;width:min(46vw,500px)}.water-hotspots{grid-template-columns:1fr}}
@media(max-width:760px){.water-lab-hero{height:auto;min-height:940px}.water-lab-hero .detail-photo-break__copy{left:6%;right:6%;top:9%;bottom:auto}.water-meter{left:5%;right:5%;top:auto;bottom:5%;width:auto;transform:none}.water-lab-hero__ripples{left:67%;top:46%;width:170px}.water-journey,.water-compare{padding:80px 6vw}.water-journey__machine{padding:10px}.water-compare__stage{height:280px}.water-compare__pipe{height:92px}.water-compare__control{grid-template-columns:1fr}.water-compare__control strong{text-align:left}.water-hotspots{padding:18px}.water-meter__display{grid-template-columns:70px 1fr}.water-meter__symbol{width:70px}}
@media(max-width:520px){.water-lab-hero{min-height:880px}.water-meter{padding:19px}.water-meter__head strong{font-size:29px}.water-journey__copy h2,.water-compare__head h2{font-size:43px}.water-journey__status{margin:0;padding:15px}.water-compare__stage{height:230px}.water-compare__pipe{left:4%;right:4%;height:76px;border-width:9px}.water-compare__pipe--scaled{box-shadow:inset 0 0 0 18px #b99c6e,inset 0 0 25px rgba(47,29,9,.72)}.water-hotspots__readout div{display:grid;grid-template-columns:1fr}.water-hotspots__readout button{min-height:43px}}
@media(prefers-reduced-motion:reduce){.water-lab-hero__light,.water-lab-hero__ripples i,.water-pipe-flow,.water-hotspots__machine .hotspot circle:first-child,.water-analysis-sequence i{animation:none!important}.water-lab-hero__ripples{display:none}}