/* MSK Wasser: photographic measurement and machine states. */
.detail-shell--water{--water:#a5dcee;--water-ink:#edf8fa;background:#071923!important;color:#f2f7f8!important}
.detail-shell--water .water-photo-hero{position:relative;display:flex!important;align-items:center!important;min-height:100svh!important;height:auto!important;padding:150px 7vw 105px!important;overflow:hidden!important;background:#071923!important;isolation:isolate}
.water-photo-hero::before{content:"";position:absolute;z-index:-2;inset:0;background:url('../assets/editorial/water-pouring-inspired-2026.png') center/cover no-repeat;filter:saturate(.76) brightness(.8)}
.water-photo-hero::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#061923 0%,rgba(6,25,35,.92) 30%,rgba(6,25,35,.35) 72%),linear-gradient(0deg,#071923,transparent 27%)}
.water-photo-hero .detail-copy{position:relative;z-index:1;max-width:760px;color:#fff}
.water-photo-hero h1{color:#fff!important}.water-photo-hero h1 em{color:#b7e4ef!important}.water-photo-hero .detail-lead{max-width:650px;color:#e0edef;opacity:1!important;text-shadow:0 2px 18px #041018}
.water-photo-hero .hero-proof span{color:#d8e8ec;border-color:rgba(174,224,237,.4)}
.detail-shell--water .signature{background:#081f2a;color:#f1f8f9}.detail-shell--water .signature em{color:#a5dcee}
.detail-shell--water .detail-body{background:linear-gradient(180deg,#091d28,#0b222e 38%,#071923);color:#edf5f7}
.detail-shell--water .detail-section{border-color:rgba(160,218,231,.15)}
.detail-shell--water .section-label,.detail-shell--water .section-content h2,.detail-shell--water .section-content>p{color:#edf5f7}
.detail-shell--water .fact,.detail-shell--water .tool-card,.detail-shell--water .faq details{border:1px solid rgba(156,213,228,.17);background:rgba(189,229,239,.045)}
.detail-shell--water .fact strong,.detail-shell--water .tool-card strong{color:#f3f9fa}.detail-shell--water .fact p,.detail-shell--water .tool-card p{color:#cadce1;opacity:1}
.detail-shell--water .fact b,.detail-shell--water .tool-card small{color:#a5dcee}
.detail-shell--water .water-check{background:#dceaf0;color:#172b34;box-shadow:0 24px 60px rgba(0,0,0,.22)}
.detail-shell--water .water-result,.detail-shell--water .water-result-grid article{background:#f2f8fa;color:#19313a}
.detail-shell--water .water-result--dh::before{display:none}
.detail-shell--water .water-check--dh{max-width:900px;margin:24px 0;padding:clamp(22px,3vw,38px)}
.water-check--dh .water-field input{min-height:56px;font-size:17px}
.water-check--dh .ghost-cta{color:#174d63;border-color:rgba(25,95,119,.38)}
.water-check--dh .ghost-cta:hover{background:rgba(25,95,119,.09)}
.water-check--dh .water-result>strong{color:#152e39}
.water-check--dh .water-result>p{color:#48616d}
.water-google-link{display:inline-flex;align-items:center;justify-content:center;margin:10px 0 6px;padding:13px 19px;border:1px solid #245b6e;border-radius:13px;background:#173f50;color:#fff!important;font-weight:750;text-decoration:none;transition:background .2s,transform .2s}
.water-google-link:hover{background:#245f76;transform:translateY(-2px)}
.water-google-link[hidden]{display:none}
.water-check--dh .water-source-note{margin:8px 0 0;color:#37515b;font-size:12px;line-height:1.55}
.water-check--dh .water-source-note a{color:#175d75;text-decoration:underline}
.water-check--dh [data-water-matches]{display:grid;gap:10px;margin-top:20px}
.water-dh-card{padding:18px 20px;border:1px solid rgba(38,91,109,.2);border-radius:18px;background:#fff}
.water-dh-card small{display:block;color:#316b80;font-size:11px;font-weight:800;letter-spacing:.12em}
.water-dh-card strong{display:block;margin:6px 0;color:#12313d;font:500 clamp(31px,3vw,47px)/1.05 var(--display)}
.water-dh-card p{margin:5px 0 10px;color:#47616c;font-size:13px}
.water-dh-card a{color:#185d77;font-weight:700;text-decoration:underline}
.water-dh-card span{color:#657c85;font-size:12px}
.water-manual{margin-top:20px;padding:18px;border:1px solid rgba(38,91,109,.23);border-radius:16px;background:#fff}
.water-manual[hidden]{display:none}
.water-manual label{display:block;margin-bottom:10px;color:#173642;font-weight:700}
.water-manual>div{display:flex;gap:10px}
.water-manual input{min-width:0;flex:1;padding:12px;border:1px solid #9cb9c3;border-radius:10px;background:#fff;color:#142f39}
.water-manual button{padding:12px 17px;border:0;border-radius:10px;background:#155572;color:#fff;font-weight:700;cursor:pointer}
.detail-shell--water .water-form p,.detail-shell--water .water-field label{color:#203640}
.detail-shell--water .faq summary{color:#eef7f8}.detail-shell--water .faq details p{color:#d2e2e5;opacity:1}
.detail-shell--water .final-cta{background:linear-gradient(130deg,#102d3b,#071c26);color:#f5fafb}.detail-shell--water .related{background:#071923}

.water-measure-section{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(350px,1.2fr);gap:5vw;align-items:center;padding:105px 7vw;background:radial-gradient(circle at 72% 38%,rgba(68,152,178,.19),transparent 34%),#061721;color:#edf8fa}
.water-measure-copy>small,.water-scale-heading>small,.water-compare__head>small{color:#a5dcee;font:750 11px/1.2 var(--body);letter-spacing:.14em}
.water-measure-copy h2,.water-scale-heading h2{margin:17px 0 22px;font:400 clamp(45px,5vw,82px)/.94 var(--display);letter-spacing:-.035em}.water-measure-copy h2 em,.water-scale-heading h2 em{color:#a5dcee;font-weight:400}
.water-measure-copy>p,.water-scale-heading>p{max-width:650px;color:#c4d9df;font:400 16px/1.7 var(--body)}
.water-measure-tabs{display:flex;gap:8px;margin:28px 0}.water-measure-tabs button,.water-scale-buttons button{border:1px solid rgba(165,220,238,.28);border-radius:15px;background:rgba(255,255,255,.035);color:#e5f3f5;cursor:pointer;transition:background .3s,border-color .3s,transform .3s}
.water-measure-tabs button{flex:1;min-width:0;padding:13px 9px;font:700 17px/1 var(--body)}.water-measure-tabs button span{display:block;margin-top:6px;color:#a8c6ce;font:600 10px/1.2 var(--body)}
.water-measure-tabs button[aria-pressed="true"],.water-scale-buttons button[aria-pressed="true"]{border-color:#a5dcee;background:rgba(122,206,228,.16);color:#fff}.water-measure-tabs button:hover,.water-scale-buttons button:hover{transform:translateY(-2px)}
.water-measure-result{min-height:234px;padding:23px 25px;border:1px solid rgba(165,220,238,.23);border-radius:22px;background:rgba(255,255,255,.045)}
.water-measure-result small,.water-scale-readout small{color:#a5dcee;font:750 10px/1.2 var(--body);letter-spacing:.13em}.water-measure-result strong,.water-scale-readout strong{display:block;margin:10px 0;font:400 clamp(27px,3vw,42px)/1.07 var(--display)}
.water-measure-result p,.water-scale-readout p{margin:0;color:#d0e1e5;font:400 14px/1.58 var(--body)}.water-measure-result>span{display:block;margin:12px 0;color:#9bbac4;font:600 10px/1.45 var(--body)}
.water-measure-result button{padding:0;border:0;border-bottom:1px solid #a5dcee;background:none;color:#c9edf6;font:700 12px/1.3 var(--body);cursor:pointer}.water-measure-result button[hidden]{display:none}
.water-measure-scene{position:relative;min-height:680px;border:1px solid rgba(169,220,235,.26);border-radius:28px;background:#0a1720;overflow:hidden;box-shadow:0 34px 90px rgba(0,0,0,.36)}
.water-measure-photos{position:absolute;inset:0}.water-measure-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 52%;opacity:0;transition:opacity .55s ease}.water-measure-photos img.is-visible{opacity:1}
.water-measure-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,16,23,.72),transparent 36%);pointer-events:none}
.water-measure-counter{position:absolute;z-index:2;left:22px;bottom:22px;display:grid;gap:4px;padding:15px 19px;border:1px solid rgba(200,235,244,.4);border-radius:16px;background:rgba(5,24,32,.83);backdrop-filter:blur(12px)}
.water-measure-counter small{color:#afdfeb;font:700 9px/1 var(--body);letter-spacing:.13em}.water-measure-counter strong{font:400 29px/1.05 var(--display)}.water-measure-counter em{color:#c3d8de;font:600 11px/1.25 var(--body);font-style:normal}

.water-scale-section{padding:105px 7vw;background:linear-gradient(145deg,#081c27,#0b2834 60%,#071923);color:#edf8fa}.water-scale-heading{max-width:1000px}
.water-scale-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.45fr);gap:22px;align-items:stretch;margin-top:38px}
.water-scale-scene{position:relative;aspect-ratio:1672/941;border:1px solid rgba(172,223,235,.25);border-radius:24px;background:#101a20;overflow:hidden;box-shadow:0 26px 70px rgba(0,0,0,.35)}
.water-scale-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;pointer-events:none}
.water-scale-base{display:block}.water-scale-overlay{opacity:0;transition:opacity .55s ease}.water-scale-overlay.is-visible{opacity:1}
.water-scale-controls{display:flex;flex-direction:column;gap:14px}.water-scale-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.water-scale-buttons button{min-height:70px;padding:12px;text-align:left;font:650 13px/1.25 var(--body)}.water-scale-buttons button b{display:block;margin-bottom:5px;color:#a5dcee;font:700 10px/1 var(--body)}
.water-scale-readout{flex:1;padding:23px;border:1px solid rgba(165,220,238,.24);border-radius:22px;background:rgba(255,255,255,.045)}

.water-compare{background:linear-gradient(140deg,#071923,#102f3d 55%,#071923)!important}.water-compare__stage{width:min(100%,740px);height:auto!important;aspect-ratio:586/658;margin:40px auto 0!important;max-height:none;touch-action:none;cursor:ew-resize}
.water-compare__base,.water-compare__clean,.water-compare__clean img{position:absolute;inset:0;width:100%;height:100%}.water-compare__base,.water-compare__clean img{object-fit:cover;object-position:center}.water-compare__clean{clip-path:inset(0 calc(100% - var(--compare)) 0 0)}
.water-compare__divider{left:var(--compare)!important;width:2px!important;box-shadow:0 0 22px rgba(200,239,248,.5)}.water-compare__divider span{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:56px;height:56px;border:1px solid #d8f4f9;border-radius:50%;background:#102c38;color:#e5f8fb;font:700 28px/1 var(--body);transform:translate(-50%,-50%);box-shadow:0 12px 25px rgba(0,0,0,.35)}
.water-compare__labels{top:20px;bottom:auto!important}.water-compare__labels span{padding:8px 12px;border:1px solid rgba(218,244,249,.32);border-radius:999px;background:rgba(5,25,33,.83);color:#effaff}
.water-compare__stage input{position:absolute;z-index:5;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}.water-compare__stage input:focus-visible{opacity:.02;outline:3px solid #fff;outline-offset:-3px}
.water-compare__note{margin:21px auto 0!important;width:min(100%,1000px)}

@media(max-width:1000px){.water-measure-section{grid-template-columns:1fr}.water-measure-scene{min-height:620px}.water-scale-layout{grid-template-columns:1fr}.water-scale-controls{display:grid;grid-template-columns:1fr 1fr}.water-scale-readout{min-height:145px}}
@media(max-width:700px){.detail-shell--water .water-photo-hero{padding:130px 6vw 75px!important;min-height:760px!important}.water-photo-hero::before{background-position:59% center}.water-photo-hero::after{background:linear-gradient(90deg,rgba(6,25,35,.92),rgba(6,25,35,.58)),linear-gradient(0deg,#071923,transparent 40%)}.water-measure-section,.water-scale-section,.water-compare{padding:75px 6vw!important}.water-measure-scene{min-height:560px}.water-scale-controls{display:block}.water-scale-readout{margin-top:12px}.water-scale-scene{aspect-ratio:1.2}.water-scale-scene img{object-fit:cover}.water-compare__stage{aspect-ratio:586/658}.water-measure-tabs button span{font-size:9px}}
@media(max-width:480px){.water-measure-scene{min-height:460px}.water-measure-tabs{gap:5px}.water-measure-tabs button{font-size:14px;padding:10px 5px}.water-measure-tabs button span{font-size:8px}.water-scale-buttons button{min-height:62px}.water-compare__labels{left:8px;right:8px}.water-compare__labels span{font-size:9px;padding:6px}}
@media(prefers-reduced-motion:reduce){.water-measure-photos img,.water-scale-overlay{transition:none}.water-measure-tabs button,.water-scale-buttons button{transition:none}}

.water-guidance{margin:24px 0 36px;max-width:1000px;overflow:hidden;border:1px solid rgba(165,220,238,.29);border-radius:24px;background:linear-gradient(140deg,rgba(21,60,75,.94),rgba(7,30,41,.96));box-shadow:0 22px 55px rgba(0,0,0,.19);color:#eaf6f8}
.water-guidance__intro{padding:clamp(25px,3vw,40px);border-bottom:1px solid rgba(165,220,238,.17)}
.water-guidance__intro small,.water-guidance__cards span{color:#a5dcee;font:750 10px/1.3 var(--body);letter-spacing:.14em}
.water-guidance__intro h3{max-width:720px;margin:12px 0 16px;color:#f2fbfd;font:400 clamp(30px,3.4vw,49px)/1.05 var(--display)}
.water-guidance__intro p,.water-guidance__cards p,.water-guidance__action p{max-width:750px;margin:0;color:#c8dce2;font:400 15px/1.7 var(--body)}
.water-guidance__cards{display:grid;grid-template-columns:1fr 1fr}
.water-guidance__cards article{padding:clamp(23px,2.7vw,36px);border-right:1px solid rgba(165,220,238,.17)}
.water-guidance__cards article:last-child{border-right:0}
.water-guidance__cards h4{margin:12px 0;color:#f2fbfd;font:400 clamp(24px,2.3vw,34px)/1.1 var(--display)}
.water-guidance__action{display:grid;grid-template-columns:minmax(140px,.28fr) 1fr;gap:24px;align-items:start;padding:clamp(23px,2.7vw,36px);border-top:1px solid rgba(165,220,238,.24);background:rgba(165,220,238,.075)}
.water-guidance__action strong{color:#b9e4ef;font:700 12px/1.3 var(--body);letter-spacing:.07em;text-transform:uppercase}
@media(max-width:760px){.water-guidance__cards{grid-template-columns:1fr}.water-guidance__cards article{border-right:0;border-bottom:1px solid rgba(165,220,238,.17)}.water-guidance__cards article:last-child{border-bottom:0}.water-guidance__action{grid-template-columns:1fr;gap:10px}}

/* Direct Ortsuche und Rechner für selbst gemessene Wasserhärte. */
.detail-shell--water .water-check--simple{max-width:1100px;padding:0;background:#e2f0f4;border:1px solid rgba(165,220,238,.45)}
.water-tool-grid{display:grid;grid-template-columns:1fr 1fr}
.water-tool-search,.water-cycle{min-width:0;padding:clamp(25px,3vw,42px)}
.water-tool-search{background:linear-gradient(145deg,#e7f4f8,#d6eaf0)}
.water-cycle{background:linear-gradient(145deg,#153744,#0c2732);color:#eef9fb}
.water-tool-kicker{display:block;margin-bottom:15px;font:750 10px/1.2 var(--body);letter-spacing:.17em;color:#32718b}
.water-cycle .water-tool-kicker{color:#a5dcee}
.water-tool-grid h3{margin:0 0 18px;font:400 clamp(30px,3vw,45px)/1.04 var(--display);letter-spacing:-.03em}
.water-tool-grid h3 em{color:#286e88;font-weight:400}
.water-cycle h3 em{color:#a5dcee}
.water-tool-grid p{max-width:470px;margin:0 0 28px;font:400 15px/1.65 var(--body);color:#3d5c68}
.water-cycle p{color:#c0d9e1}
.water-tool-grid form{display:grid;gap:11px}
.water-tool-grid label{font:700 12px/1.3 var(--body);color:#1d3a46}
.water-cycle label{color:#eaf7fa}
.water-tool-input-row{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.water-tool-input-row input,.water-cycle input[type=date]{min-width:0;width:100%;min-height:52px;padding:13px 15px;border:1px solid rgba(28,91,113,.28);border-radius:13px;background:#fff;color:#19333f;font:650 16px/1.3 var(--body);outline:none}
.water-tool-input-row input:focus-visible,.water-cycle input[type=date]:focus-visible{border-color:#3692ae;box-shadow:0 0 0 3px rgba(79,170,200,.22)}
.water-tool-input-row .primary-cta{flex:none;width:100%;justify-content:center;white-space:nowrap;cursor:pointer;border-color:#19485b;background:#19485b;color:#fff}
.water-cycle .water-tool-input-row .primary-cta{background:#a5dcee;color:#092532;border-color:#a5dcee}
.water-tool-note{display:block;margin-top:25px;color:#4b6874;font:500 12px/1.6 var(--body)}
.water-cycle-date-label{margin-top:8px}
.water-cycle input[type=date]{max-width:250px;min-height:46px;font-size:14px}
.water-cycle-meter{margin-top:28px}
.water-cycle-meter>span{display:block;margin-bottom:10px;font:750 10px/1.2 var(--body);letter-spacing:.16em;color:#a5dcee}
.water-cycle-meter__track{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.water-cycle-meter__track i{height:10px;border-radius:30px;background:rgba(175,221,234,.19);transition:background .35s,box-shadow .35s,transform .35s}
.water-cycle-meter[data-level="1"] i:first-child{background:#9bddd1;box-shadow:0 0 17px rgba(155,221,209,.5);transform:scaleY(1.2)}
.water-cycle-meter[data-level="2"] i:nth-child(-n+2){background:#d6daa0;box-shadow:0 0 17px rgba(214,218,160,.4);transform:scaleY(1.2)}
.water-cycle-meter[data-level="3"] i:nth-child(-n+3){background:#e6b47d;box-shadow:0 0 17px rgba(230,180,125,.38);transform:scaleY(1.2)}
.water-cycle-meter[data-level="4"] i{background:#e8968b;box-shadow:0 0 17px rgba(232,150,139,.45);transform:scaleY(1.2)}
.water-cycle-meter>small{display:flex;justify-content:space-between;margin-top:8px;color:#a9c7d1;font:600 11px/1.3 var(--body)}
.water-cycle-meter>small b{font-weight:400}
.water-cycle-result{margin-top:21px;padding:19px 21px;border:1px solid rgba(165,220,238,.28);border-radius:17px;background:rgba(165,220,238,.08)}
.water-cycle-result>span{display:block;margin-bottom:8px;font:750 10px/1.3 var(--body);letter-spacing:.14em;color:#a5dcee}
.water-cycle-result>strong{display:block;font:400 clamp(27px,2.4vw,39px)/1.08 var(--display);color:#fff}
.water-cycle-result>p{margin:10px 0 0;font-size:13px;line-height:1.55;color:#c7dde4}
.water-cycle-result[data-level="4"]{border-color:rgba(232,150,139,.5);background:rgba(232,150,139,.1)}
.water-cycle-result[data-level="4"]>span{color:#f0aba2}
.water-tool-caveat{margin:0;padding:17px clamp(25px,3vw,42px);border-top:1px solid rgba(28,91,113,.17);color:#31505c;font:500 12px/1.65 var(--body)}
@media(max-width:920px){.water-tool-grid{grid-template-columns:1fr}.water-tool-search,.water-cycle{padding:30px}}
@media(max-width:600px){.water-tool-input-row{flex-direction:column}.water-tool-input-row .primary-cta{width:100%}.water-tool-grid h3{font-size:36px}}

/* The technical drawing and its explanation need the same dark reading surface. */
.detail-shell--water .water-hotspots{background:linear-gradient(140deg,#102d39,#173d4a 58%,#0c2834);border-color:rgba(163,219,232,.35);box-shadow:0 22px 55px rgba(3,26,35,.18)}
.detail-shell--water .water-hotspots__machine svg{fill:rgba(159,219,233,.035);stroke:rgba(160,225,240,.55)}
.detail-shell--water .water-hotspots__machine .hotspot circle:first-child{fill:rgba(74,178,204,.12);stroke:rgba(135,216,234,.66)}
.detail-shell--water .water-hotspots__readout small{color:#a5e6f4}
.detail-shell--water .water-hotspots__readout strong{color:#f3fbfc}
.detail-shell--water .water-hotspots__readout p{color:#d2e7ec}
.detail-shell--water .water-hotspots__readout button{border-color:rgba(174,225,236,.4);background:rgba(201,237,244,.08);color:#e4f4f7}
.detail-shell--water .water-hotspots__readout button[aria-pressed="true"],.detail-shell--water .water-hotspots__readout button:hover{border-color:#b9edf7;background:#d9f0f4;color:#0b3340}