*{box-sizing:border-box}html{scroll-behavior:smooth}body{--bg:#f7f6f2;--paper:#fff;--ink:#122b40;--muted:#465663;--line:#d9dfdf;--accent:#a5875c;margin:0;background:var(--bg);color:var(--ink);font:16px/1.75 system-ui,-apple-system,"Segoe UI",sans-serif}body.dark{--bg:#101a24;--paper:#1b2936;--ink:#f2f3ef;--muted:#ccd5da;--line:#354756;--accent:#d3b58a}a{color:inherit}.container{max-width:1180px;width:calc(100% - 44px);margin:auto}.site-header{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.header-inner{max-width:1240px;margin:auto;min-height:85px;padding:10px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{flex-shrink:0;display:flex;align-items:center;font-weight:700;text-decoration:none}.logo{max-width:205px;max-height:62px;width:auto;height:auto;object-fit:contain}.site-header nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.site-header nav a{font-size:13px;text-decoration:none;font-weight:600}.controls{display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:13px}.controls a{text-decoration:none}.controls button{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:5px;padding:7px 10px;cursor:pointer}#mobile{display:none}.intro{background:var(--paper);padding:64px 0 58px;border-bottom:1px solid var(--line)}.kicker{font-size:11px;letter-spacing:.22em;font-weight:700;color:var(--accent)}.intro h1{font-size:clamp(34px,5vw,58px);line-height:1.13;letter-spacing:-.025em;margin:15px 0 0}.content{padding:55px 0 85px;max-width:980px}.content>h1{display:none}.content h2{font-size:clamp(24px,3vw,34px);line-height:1.3;margin:48px 0 18px}.content h3{font-size:22px;margin:32px 0 12px}.content p{color:var(--muted);margin:0 0 17px;overflow-wrap:anywhere}.content figure{margin:28px 0 38px;text-align:center}.content figure img{display:block;max-width:100%;width:auto;height:auto;max-height:570px;margin:auto;border-radius:6px}.content a{color:var(--accent);text-underline-offset:3px}.downloads{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}.downloads a{border:1px solid var(--line);padding:13px;background:var(--paper);overflow-wrap:anywhere}.footer{background:#10283e;color:#f5f5f2;padding:17px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;font-size:13px}.footer nav{display:flex;justify-content:flex-end;gap:10px 22px;flex-wrap:wrap}.footer nav a{text-decoration:none}.translation-note{padding:12px 16px;border-left:3px solid var(--accent);background:var(--paper);margin-bottom:25px}.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:50;background:white;color:black;padding:10px}@media(max-width:1050px){#mobile{display:block}.site-header nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);padding:18px 25px;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start}.site-header nav.open{display:flex}}@media(max-width:650px){.header-inner{min-height:72px;padding:8px 15px;gap:8px}.logo{max-width:150px;max-height:50px}.footer-inner{align-items:flex-start;flex-direction:column}.footer nav{justify-content:flex-start}.intro{padding:44px 0}.content{padding-top:32px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Produktarchiv: direkte Verweise auf die erhaltenen Original-Unterseiten */
.archive-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.7rem;list-style:none;padding:0;margin:1.2rem 0 1.8rem}.archive-links li{margin:0}.archive-links a{display:block;padding:.85rem 1rem;border:1px solid currentColor;border-radius:8px;text-decoration:none}.archive-links a:hover,.archive-links a:focus-visible{text-decoration:underline;outline-offset:3px}

/* Independent, intentionally minimal welcome page */
.welcome-hero{padding:clamp(54px,8vw,112px) 0;background:var(--paper);min-height: min(680px,80vh);display:flex;align-items:center}.welcome-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,90px);align-items:center}.welcome-copy h1{font-size:clamp(42px,5.2vw,72px);line-height:1.08;letter-spacing:-.04em;margin:18px 0 26px;max-width:700px}.welcome-copy>p{max-width:590px;font-size:clamp(17px,1.6vw,20px);line-height:1.7;color:var(--muted)}.welcome-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}.welcome-actions a{display:inline-flex;align-items:center;justify-content:center;gap:14px;text-decoration:none;font-weight:650;padding:12px 20px;border-radius:4px}.welcome-primary{background:#10283e;color:#fff}.welcome-secondary{border:1px solid var(--line);color:var(--ink)}.welcome-visual{border-radius:8px;overflow:hidden;background:var(--bg);box-shadow:0 20px 50px #00000013}.welcome-visual img{display:block;width:100%;height:clamp(260px,32vw,420px);object-fit:contain}.welcome-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:28px;padding-bottom:32px}.welcome-bottom p{margin:0;color:var(--muted)}.welcome-bottom a{color:var(--ink);font-weight:600;text-decoration:none}.welcome-bottom a:hover,.welcome-bottom a:focus-visible{text-decoration:underline}.welcome-actions a:focus-visible,.welcome-bottom a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}body.dark .welcome-primary{background:#d3b58a;color:#101a24}@media(max-width:800px){.welcome-grid{grid-template-columns:1fr}.welcome-hero{min-height:0}.welcome-visual img{height:300px}.welcome-bottom{flex-direction:column;align-items:flex-start}}

/* ZANNI GROUP company page — editorial image/text composition */
.editorial-section.text-only{display:block}.editorial-section.text-only .editorial-copy{max-width:850px;margin:auto}
.editorial-content{max-width:1180px;padding-top:36px}
.editorial-section{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(26px,5vw,76px);align-items:center;padding:clamp(30px,5vw,70px) 0;border-bottom:1px solid var(--line)}
.editorial-section:last-child{border-bottom:0}
.editorial-section.media-right{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.editorial-section.media-right .editorial-copy{grid-column:1;grid-row:1}
.editorial-section.media-right .editorial-media{grid-column:2;grid-row:1}
.editorial-copy{min-width:0}.editorial-copy h2{margin:0 0 24px;font-size:clamp(26px,3vw,38px);line-height:1.2;letter-spacing:-.02em}
.editorial-copy p{max-width:66ch}.editorial-copy ul{padding-left:1.35rem;color:var(--muted);margin:0 0 20px}.editorial-copy li{margin-bottom:7px}
.editorial-content .editorial-media{margin:0;display:flex;align-items:center;justify-content:center;min-height:260px;background:var(--paper);border:1px solid var(--line);border-radius:9px;overflow:hidden;padding:clamp(16px,3vw,38px)}
.editorial-content .editorial-media img{display:block;width:100%;height:auto;max-height:430px;object-fit:contain;margin:0;border-radius:0}
.editorial-content .editorial-photo{padding:0;background:transparent;border:0}.editorial-content .editorial-photo img{max-height:500px;object-fit:contain}
.editorial-content .linkline{margin-top:24px}.editorial-content .linkline a{font-weight:650;text-decoration-thickness:1px}
@media(max-width:780px){.editorial-section,.editorial-section.media-right{grid-template-columns:1fr;gap:22px;padding:38px 0}.editorial-section.media-right .editorial-copy,.editorial-section.media-right .editorial-media{grid-column:1;grid-row:auto}.editorial-section .editorial-copy{grid-row:1}.editorial-section .editorial-media{grid-row:2;min-height:0}.editorial-content .editorial-media img{max-height:360px}}

/* Editorial refinement, 2026 */
.welcome-visual{box-shadow:none;border:1px solid var(--line);border-radius:10px;padding:clamp(12px,2vw,28px)}
.welcome-visual img{object-fit:contain}
.editorial-content .editorial-section.text-only .editorial-copy{margin:0;max-width:850px}
.editorial-content .editorial-section .editorial-copy h1{font-size:clamp(26px,3vw,38px);line-height:1.2}
.editorial-content .editorial-section .editorial-media figure{margin:0;width:100%}
.editorial-content .editorial-section .editorial-media img{width:100%;height:auto;object-fit:contain}

/* Topic pages: heading, related content and original media remain together */
.topic-content{display:grid;gap:clamp(2.5rem,5vw,5rem);padding-block:clamp(2rem,4vw,4rem)}
.topic-section{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(1.5rem,4vw,4.5rem);align-items:start}
.topic-section:not(:has(.topic-media)){grid-template-columns:minmax(0,1fr)}
.topic-section.topic-reverse .topic-media{grid-column:1;grid-row:1}
.topic-section.topic-reverse .topic-copy{grid-column:2;grid-row:1}
.topic-copy{min-width:0;max-width:78ch}.topic-copy h2{margin:0 0 1.2rem}.topic-copy h3{margin:1.5rem 0 .45rem}.topic-copy p{line-height:1.75;margin:.6rem 0 1rem}.topic-media{min-width:0;display:grid;gap:1rem}.topic-media figure{margin:0}.topic-media img{width:100%;height:auto;max-height:500px;object-fit:contain;display:block}.topic-section+ .topic-section{border-top:1px solid var(--line,#b8b8b840);padding-top:clamp(2rem,4vw,4rem)}
@media(max-width:780px){.topic-section,.topic-section:not(:has(.topic-media)){grid-template-columns:minmax(0,1fr)}.topic-section.topic-reverse .topic-media,.topic-section.topic-reverse .topic-copy{grid-column:auto;grid-row:auto}.topic-media{order:2}}

/* 2026 dark/light contrast and brand-logo correction */
.site-header,.site-header nav,.site-header nav a,.site-header .controls,.site-header .controls a{
 color:var(--ink);
}
.site-header nav a:hover,.site-header nav a:focus-visible,
.site-header nav a[aria-current="page"]{color:var(--accent);text-decoration:underline;text-underline-offset:5px}
.brand-logo{display:flex;align-items:center;justify-content:center}
.brand-logo .logo{max-width:205px;max-height:70px;object-fit:contain}
body.dark .site-header{background:#172636;color:#f2f3ef}
body.dark .site-header nav{background:#172636}
body.dark .site-header nav a,body.dark .site-header .controls a{color:#f2f3ef}
body.dark .site-header nav a:hover,body.dark .site-header nav a[aria-current="page"]{color:#e1c294}
body.dark .site-header .controls button{background:#26384a;color:#fff;border-color:#526476}
body.dark .site-header .controls button:hover{background:#354d63}
body.dark .water-page .water-card:not(.water-tech-cards .water-card):not(.water-valve-cards .water-card),
body.dark .water-page .water-valve-note{
 background:#253747;color:#f2f3ef;border-color:#526476;
}
body.dark .water-page .water-card:not(.water-tech-cards .water-card):not(.water-valve-cards .water-card) h3,
body.dark .water-page .water-valve-note h3{color:#fff}
body.dark .water-page .water-card:not(.water-tech-cards .water-card):not(.water-valve-cards .water-card) p,
body.dark .water-page .water-valve-note p{color:#dce5ed}
/* Image cards intentionally stay light in both themes: force dark ink on light background */
body.dark .water-page .water-tech-cards .water-card,
body.dark .water-page .water-valve-cards .water-card:not(.water-valve-note){
 background:#f6f2e9;color:#122b4b;
}
body.dark .water-page .water-tech-cards .water-card .card-content,
body.dark .water-page .water-valve-cards .water-card:not(.water-valve-note) .card-content,
body.dark .water-page .water-tech-cards .water-card h3,
body.dark .water-page .water-valve-cards .water-card:not(.water-valve-note) h3{color:#122b4b}
body.dark .water-page .water-tech-cards .water-card p,
body.dark .water-page .water-valve-cards .water-card:not(.water-valve-note) p{color:#213c5a}
body.dark .water-page .water-tags li{background:#253747;color:#f2f3ef;border-color:#526476}
/* General-purpose legibility for any light cards on dark pages */
body.dark [style*="background:#f6f2e9"]{color:#122b4b}
body.dark .welcome-secondary{color:var(--ink)}
@media(max-width:650px){.brand-logo .logo{max-width:150px;max-height:55px}}

/* Product archive: featured innovation button */
.archive-feature-link{margin:1.4rem 0 1rem}
.archive-feature-button{display:inline-flex;align-items:center;justify-content:center;padding:.78rem 1.35rem;border:1px solid currentColor;border-radius:6px;text-decoration:none;font-weight:700;line-height:1.35;transition:background .2s,color .2s,transform .2s}
.archive-feature-button:hover,.archive-feature-button:focus-visible{background:var(--accent,#b89c68);color:var(--bg,#101b2c);transform:translateY(-1px)}

/* Start page: original panoramic retention image and lightweight blog */
.retention-banner{width:100%;background:#101f2b;overflow:hidden}
.retention-banner img{display:block;width:100%;height:auto;aspect-ratio:2048/718;object-fit:cover}
.blog-showcase{padding:clamp(3rem,6vw,5.5rem) 0;background:var(--bg);border-top:1px solid var(--line)}
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:0;min-height:360px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper)}
.blog-photo{background:#0c4358 url('img/Wasser-1.jpg') center/cover no-repeat;min-height:340px}
.blog-panel{min-width:0;padding:clamp(1.5rem,4vw,3rem);display:flex;flex-direction:column;justify-content:center;gap:.75rem}
.blog-panel h2{margin:.2rem 0 0;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.2}
.blog-intro{color:var(--muted);margin:0 0 .5rem}.blog-live{min-height:110px}.blog-live h3{margin:0 0 .5rem;font-size:1.3rem;line-height:1.35}.blog-live p{margin:.3rem 0;color:var(--muted)}
.blog-date{font-size:.84rem}.blog-controls{display:flex;gap:1rem;align-items:center;margin-top:.4rem}.blog-controls[hidden]{display:none}
.blog-controls button{cursor:pointer;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:6px;padding:.25rem .85rem;font-size:1.3rem}.blog-controls button:hover{background:var(--bg)}
.blog-count{font-size:.85rem;color:var(--muted)}.blog-more{display:inline-block;align-self:flex-start;margin-top:.7rem;padding:.65rem 1rem;background:var(--ink);color:var(--paper);border-radius:5px;text-decoration:none;font-weight:650}
.blog-more:hover{opacity:.85}
@media(max-width:740px){.blog-layout{grid-template-columns:1fr}.blog-photo{min-height:200px;max-height:270px}.blog-panel{padding:1.5rem}.retention-banner img{min-height:145px;object-fit:cover}}

/* Full-width JUMBO BLOCK blog carousel (2026-10-26) */
.blog-showcase{position:relative;background:#06374a url('img/Wasser-1.jpg') center center/cover no-repeat;padding:clamp(2.5rem,4vw,4rem) 0;color:#fff;border:0;isolation:isolate}
.blog-showcase::before{content:"";position:absolute;inset:0;background:rgba(0,30,44,.25);z-index:-1}
.blog-slider-inner{max-width:1250px;margin:0 auto;padding:0 clamp(12px,2.4vw,28px)}
.blog-showcase h2{color:#fff;text-align:center;font-family:Georgia,serif;font-weight:400;font-size:clamp(2rem,3.2vw,3rem);margin:0 0 2rem}
.blog-carousel{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;gap:8px;align-items:center}
.blog-viewport{overflow:hidden;min-width:0}
.blog-track{display:flex;gap:18px;align-items:stretch;transition:transform .4s ease;will-change:transform}
.blog-card{flex:0 0 calc((100% - 54px)/4);min-width:0;background:#fff;color:#252525;display:flex;flex-direction:column;text-align:center;box-shadow:0 3px 12px #0002}
.blog-card-image{display:block;width:100%;height:125px;object-fit:cover;background:#e1e9eb}
.blog-card-content{display:flex;flex:1;flex-direction:column;align-items:center;padding:16px 12px 18px}
.blog-card time{font-size:.82rem;color:#686868;margin-bottom:.65rem}
.blog-card h3{font-size:1.15rem;line-height:1.25;font-weight:400;margin:0 0 .8rem;color:#242424;overflow-wrap:anywhere}
.blog-card a{margin-top:auto;color:#956f6f;text-decoration:none;font-size:.94rem}
.blog-card a:hover,.blog-card a:focus-visible{text-decoration:underline}
.blog-arrow{color:#fff;background:transparent;border:0;cursor:pointer;font-size:2.5rem;line-height:1;padding:0 2px;min-height:48px}
.blog-arrow:hover,.blog-arrow:focus-visible{color:#e6c6a0}
.blog-arrow:disabled{opacity:.25;cursor:default}
.blog-slider-footer{text-align:center;margin:1.5rem 0 0}.blog-slider-footer a{color:#fff;text-decoration:underline;text-underline-offset:4px}
.blog-loading{color:#fff;min-height:230px;display:flex;align-items:center;justify-content:center;width:100%}
@media(max-width:900px){.blog-card{flex-basis:calc((100% - 18px)/2)}}
@media(max-width:560px){.blog-carousel{grid-template-columns:26px minmax(0,1fr) 26px;gap:3px}.blog-card{flex-basis:100%}.blog-showcase h2{margin-bottom:1.25rem}.blog-arrow{font-size:2rem}.blog-card-image{height:160px}}
@media(prefers-reduced-motion:reduce){.blog-track{transition:none}}


/* Mobile layout corrections — 2026-10-26 */
html,body{max-width:100%;overflow-x:clip}
img,video,iframe,svg{max-width:100%}
.container,.header-inner,.content,.welcome-grid,.welcome-copy,.welcome-visual,.topic-section,.topic-copy,.topic-media,.editorial-section,.editorial-copy,.editorial-media{min-width:0}
.content,.content *, .topic-copy *, .editorial-copy *{overflow-wrap:anywhere}
.content pre,.content code{white-space:pre-wrap;overflow-wrap:anywhere}
.content table{display:block;max-width:100%;overflow-x:auto}
@media(max-width:1050px){
 .site-header .header-inner{width:100%;max-width:100%;box-sizing:border-box;display:flex;flex-wrap:nowrap;gap:8px;min-width:0}
 .site-header .brand{flex:0 1 auto;min-width:0;max-width:calc(100% - 145px)}
 .site-header .brand-logo{min-width:0;max-width:100%}
 .site-header .logo,.site-header .brand-logo .logo{display:block;width:auto;max-width:100%;height:auto;max-height:48px}
 .site-header .controls{flex:0 0 auto;margin-left:auto;gap:5px;white-space:nowrap}
 .site-header .controls button{padding:5px 7px;min-width:30px;line-height:1.35}
 .site-header nav#nav{box-sizing:border-box;width:100%;max-width:100vw;max-height:calc(100dvh - 72px);overflow-y:auto;overflow-x:hidden;z-index:20}
 .site-header nav#nav a{white-space:normal;overflow-wrap:anywhere}
}
@media(max-width:420px){
 .site-header .header-inner{padding:8px 9px;gap:5px}
 .site-header .brand{max-width:calc(100% - 130px)}
 .site-header .controls{gap:3px;font-size:12px}
 .site-header .controls button{padding:5px;min-width:28px}
 .container{width:calc(100% - 28px)}
}
@media(max-width:780px){
 .welcome-grid,.editorial-section,.editorial-section.media-right,.topic-section,.topic-section:not(:has(.topic-media)),.blog-layout{grid-template-columns:minmax(0,1fr)}
 .content h2,.content h3,.content p,.content li{max-width:100%;overflow-wrap:anywhere}
 .content figure,.content img{max-width:100%}
 .downloads,.archive-links{grid-template-columns:minmax(0,1fr)}
 .welcome-copy h1,.intro h1{overflow-wrap:anywhere}
}
/* Keep heterogeneous product and content cards inside the viewport. */
@media(max-width:650px){
 .water-page [class*="cards"],.water-page [class*="grid"],
 .content [class*="cards"],.content [class*="grid"]{grid-template-columns:minmax(0,1fr)}
 .water-page [class*="card"],.content [class*="card"]{min-width:0;max-width:100%;box-sizing:border-box;overflow-wrap:anywhere}
 .water-page [class*="card"] img,.content [class*="card"] img{max-width:100%;height:auto}
 .water-page [class*="card"] h2,.water-page [class*="card"] h3,
 .water-page [class*="card"] p,.content [class*="card"] h2,
 .content [class*="card"] h3,.content [class*="card"] p{overflow-wrap:anywhere;word-break:normal}
 .blog-card{min-width:0}
}