:root{--navy:#083c5a;--blue:#087ca5;--cyan:#38bfd0;--ink:#193443;--muted:#58717d;--pale:#edf7f8;--line:#d9e8eb;--gold:#f3b642}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);line-height:1.55;background:#fff}a{color:inherit;text-decoration:none}.wrap{max-width:1180px;margin:auto;padding:0 24px}.top{min-height:58px;background:#062f49;color:#e9f8fc;font-size:13px;border-bottom:3px solid var(--gold)}.top .wrap{min-height:55px;display:flex;align-items:center;justify-content:space-between;gap:18px}.top span{opacity:.9}.top .urgent{display:flex;align-items:center;gap:12px;background:#f3b642;color:#173746;padding:7px 12px;border-radius:7px;font-weight:700;box-shadow:0 2px 9px #001c2c55}.top .urgent-title{font-size:12px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}.top .urgent a{color:#173746;font-weight:800;white-space:nowrap}.top .urgent a:hover{text-decoration:underline}.top .phone-icon{font-size:19px;line-height:1}.header{height:92px;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative}.brand{display:flex;align-items:center;gap:13px;color:var(--navy)}.drop{width:43px;height:52px;background:linear-gradient(145deg,#4bd0d7,#087ca5);border-radius:65% 35% 58% 42%/55% 40% 60% 45%;transform:rotate(15deg);position:relative}.drop:after{content:'';position:absolute;inset:9px 11px auto auto;width:8px;height:20px;background:#fff8;border-radius:100%;transform:rotate(10deg)}.brand strong{display:block;font-size:16px;line-height:1.18;letter-spacing:.01em}.brand small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.nav{display:flex;flex:1;justify-content:flex-end;gap:24px;align-items:center;font-size:14px;font-weight:700;color:#294858}.nav>ul,.nav>div{flex:1}.nav>div{display:flex;justify-content:flex-end}.nav ul{display:flex;flex:1;width:100%;justify-content:flex-end;gap:18px;align-items:center;list-style:none;margin:0;padding:0}.nav ul>li:has(>a[href*="kundenportal.wasser-wem-nord.de"]){order:99;margin-left:auto}.nav>a.portal{order:99;margin-left:auto}.nav li{list-style:none;position:relative}.nav .visually-hidden,.nav .visually-hidden-focusable:not(:focus):not(:focus-within){position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.nav li>ul{display:none;position:absolute;top:calc(100% - 2px);left:0;min-width:220px;flex-direction:column;align-items:stretch;gap:0;padding:8px 0;margin:0;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 26px #083c5a24;z-index:50}.nav li:hover>ul,.nav li:focus-within>ul,.nav li.show>ul,.nav ul.show{display:flex}.nav li>ul li{width:100%}.nav li>ul a{display:block;padding:9px 15px;white-space:nowrap}.nav li>ul a:hover{background:var(--pale)}.nav li:has(>a[href*="kundenportal.wasser-wem-nord.de"])>a{border:1px solid var(--line);border-radius:7px;padding:10px 13px;color:var(--blue);background:#fff;white-space:nowrap}.nav li:has(>a[href*="kundenportal.wasser-wem-nord.de"])>a:after{content:" ↗"}.nav li:has(>a[href*="kundenportal.wasser-wem-nord.de"])>a:hover{background:var(--pale)}.nav li>ul ul{top:0;left:100%}.nav .mod-menu__toggle-sub{border:0;background:transparent;color:var(--blue);padding:4px 6px;cursor:pointer}.nav .mod-menu__toggle-sub .icon-chevron-down{display:inline-block;border-right:2px solid currentColor;border-bottom:2px solid currentColor;width:7px;height:7px;transform:rotate(45deg);vertical-align:3px}.nav a:hover{color:var(--blue)}.portal,.nav a[href*="kundenportal.wasser-wem-nord.de"]{border:1px solid var(--line);border-radius:7px;padding:10px 13px;color:var(--blue);background:#fff;white-space:nowrap}.nav a[href*="kundenportal.wasser-wem-nord.de"]:after{content:" ↗"}.nav a[href*="kundenportal.wasser-wem-nord.de"]:hover{background:var(--pale)}.mobile{display:none;border:1px solid var(--line);border-radius:7px;padding:8px 11px;background:#fff;color:var(--navy);font-size:13px;font-weight:700;cursor:pointer}.hero{position:relative;overflow:hidden;background:linear-gradient(110deg,#073e5b 0%,#087da0 54%,#16a8b4 100%);color:white}.hero:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 82% 15%,#a5f3ef55,transparent 27%),radial-gradient(ellipse at 70% 120%,#35c8d366,transparent 40%)}.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;min-height:405px;gap:40px;padding-top:40px;padding-bottom:40px}.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#b0edf0;font-weight:700}.hero h1{font-size:48px;letter-spacing:-.035em;line-height:1.08;margin:14px 0 18px;max-width:570px}.hero p{max-width:510px;color:#e0f6f7;font-size:17px;margin:0 0 24px}.actions{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;gap:8px;background:white;color:var(--navy);font-weight:700;padding:12px 17px;border-radius:7px;font-size:14px}.btn.ghost{border:1px solid #ffffff80;color:white;background:#ffffff13}.water-art{height:310px;position:relative;display:flex;align-items:center;justify-content:center}.plant-scene{position:absolute;inset:5px 0 3px;overflow:hidden;border-radius:46% 46% 8px 8px/34% 34% 8px 8px;background:linear-gradient(160deg,#ffffff1f,#06476533)}.scene-sun{position:absolute;width:95px;height:95px;background:#d7fbf2;border-radius:50%;right:46px;top:13px;opacity:.88}.ground{position:absolute;left:-5%;right:-5%;bottom:0;height:31%;background:linear-gradient(180deg,#56c8c4,#0b7894);clip-path:polygon(0 25%,100% 0,100% 100%,0 100%)}.plant-building{position:absolute;bottom:30%;left:9%;width:38%;height:34%;background:#e9f7f5;border-radius:5px 5px 0 0;box-shadow:inset 0 10px #9bdad8}.plant-building:before{content:"";position:absolute;left:-8px;right:-8px;top:-12px;height:13px;background:#b9ece5;clip-path:polygon(7% 0,93% 0,100% 100%,0 100%)}.plant-building:after{content:"";position:absolute;left:12%;right:12%;top:26%;height:54%;background:repeating-linear-gradient(90deg,#1685a0 0 4px,transparent 4px 15px)}.stack{position:absolute;left:22%;bottom:64%;width:12px;height:47px;background:#e8f7f3;border-radius:3px 3px 0 0;box-shadow:0 -8px 0 -3px #b9ece5}.stack:after{content:"";position:absolute;left:9px;top:-19px;width:26px;height:22px;border-top:3px solid #d5f5ef;border-radius:50%;transform:rotate(-18deg);opacity:.8}.tank{position:absolute;bottom:26%;right:9%;width:35%;height:35%;border:7px solid #c7f0eb;border-bottom-width:4px;border-radius:50% 50% 8px 8px/28% 28% 8px 8px;background:linear-gradient(180deg,#57d0cf 0 47%,#138ca4 48%);box-shadow:0 8px 0 #0b7189}.tank:before{content:"";position:absolute;left:-10px;right:-10px;top:-8px;height:12px;border-radius:50%;background:#e0faf4}.tank:after{content:"";position:absolute;left:18%;right:18%;top:33%;height:3px;background:#d7fbf2;box-shadow:0 12px 0 #d7fbf2}.pipe{position:absolute;right:36%;bottom:30%;width:16%;height:38%;border:6px solid #d2f3ed;border-bottom:0;border-left:0;border-radius:0 18px 0 0}.stream{position:absolute;left:0;right:0;bottom:17%;height:24px;background:#bcefe8;clip-path:polygon(0 20%,30% 60%,55% 24%,80% 70%,100% 31%,100% 100%,0 100%);opacity:.95}.stat-card{position:absolute;right:0;bottom:20px;background:white;color:var(--navy);border-radius:10px;padding:12px 15px;box-shadow:0 12px 30px #00364a3d;z-index:2;font-size:12px}.stat-card strong{display:block;font-size:16px}.quick{position:relative;margin-top:-1px;background:var(--pale);padding:29px 0 32px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.card{display:flex;align-items:center;gap:16px;background:white;border:1px solid #e4eff0;border-radius:10px;padding:20px;box-shadow:0 8px 22px #0b58700b;transition:.2s}.card:hover{transform:translateY(-3px);box-shadow:0 12px 28px #0b587019}.icon{display:grid;place-items:center;width:47px;height:47px;border-radius:12px;background:#e2f5f5;color:#0781a2;flex:none;font-size:23px}.card h3{font-size:18px;color:var(--navy);margin:0 0 3px}.card p{font-size:13px;margin:0;color:var(--muted)}.arr{margin-left:auto;color:var(--blue);font-size:22px}.section{padding:70px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:25px}.kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);font-weight:700}.section h2{margin:6px 0 0;font-size:31px;color:var(--navy);letter-spacing:-.025em}.text-link{font-size:14px;color:var(--blue);font-weight:700}.news-grid{display:grid;grid-template-columns:1.35fr .9fr .9fr;gap:17px}.news{border:1px solid var(--line);border-radius:10px;padding:22px;background:#fff;min-height:160px}.news.feature{background:linear-gradient(135deg,#eff9f9,#e4f5f7);border:0}.label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--blue)}.news h3{margin:10px 0 7px;font-size:19px;color:var(--navy)}.news p{margin:0;color:var(--muted);font-size:14px}.date{font-size:12px;color:#79909a;margin-top:18px}.about{background:#f4f8f8}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}.mapbox{height:285px;border-radius:12px;background:linear-gradient(145deg,#d7eff0,#bce1e1);position:relative;overflow:hidden;display:grid;place-items:center}.mapbox:before{content:'';width:330px;height:220px;border:3px solid #138da5;border-radius:48% 38% 48% 35%;transform:rotate(-19deg);background:repeating-linear-gradient(30deg,transparent 0 28px,#ffffff70 29px 31px)}.pin{position:absolute;color:#086b88;font-size:25px}.pin.one{top:74px;left:41%}.pin.two{top:151px;left:59%}.pin.three{top:116px;left:25%}.about p{color:var(--muted)}.factrow{display:flex;gap:25px;margin-top:23px}.fact strong{display:block;color:var(--navy);font-size:21px}.fact span{font-size:12px;color:var(--muted)}.hotline{background:#fff7e8;border-top:1px solid #f5e1ba;border-bottom:1px solid #f5e1ba}.hotline .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:22px;padding-bottom:22px}.hotline h2{font-size:21px;margin:0;color:#704c12}.hotline p{margin:2px 0 0;color:#796640;font-size:13px}.numbers{display:flex;gap:13px}.number{background:white;border:1px solid #f0dfbd;border-radius:8px;padding:10px 14px;color:#624710;font-size:12px}.number strong{font-size:17px;display:block}.number b{color:#a16c05}.footer{background:#073a55;color:#d4e9ed;padding:42px 0 20px}.footgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}.footer h3{color:white;font-size:15px;margin:0 0 12px}.footer p,.footer a{font-size:13px;color:#c1dce1}.footer p{margin:5px 0}.footlinks{display:grid;gap:7px}.legal{border-top:1px solid #ffffff2c;padding-top:16px;margin-top:28px;display:flex;justify-content:space-between;color:#a8c8d0;font-size:12px}.mobile-menu{display:none}
@media(max-width:900px){.nav{gap:13px;font-size:13px}.hero h1{font-size:41px}.water-art{transform:scale(.9)}.news-grid{grid-template-columns:1fr 1fr}.news.feature{grid-column:span 2}}
@media(max-width:700px){.top .wrap{justify-content:center;padding-top:6px;padding-bottom:6px}.top> .wrap>span{display:none}.top .urgent{width:100%;justify-content:center;flex-wrap:wrap;gap:5px 9px;padding:7px}.top .urgent-title{font-size:11px}.top .urgent a{font-size:12px}.top .urgent>span[aria-hidden="true"]{display:none}.header{height:74px}.nav{display:none}.nav.is-open{display:flex;position:absolute;z-index:30;top:74px;left:0;right:0;background:#fff;padding:16px 24px;box-shadow:0 12px 24px #083c5a24;flex-direction:column;align-items:stretch}.nav ul{flex:1;width:100%;flex-direction:column;align-items:stretch;gap:0}.nav ul>li:has(>a[href*="kundenportal.wasser-wem-nord.de"]){margin-left:0}.nav>a.portal{margin-left:0}.nav li a{display:inline-block;padding:9px 0}.nav li>ul,.nav li:hover>ul,.nav li:focus-within>ul,.nav li.show>ul,.nav ul.show{position:static;min-width:0;width:100%;border:0;border-radius:0;box-shadow:none;padding:0 0 0 14px}.nav li>ul a{padding:8px 0;white-space:normal}.nav .mod-menu__toggle-sub{padding:6px 10px}.nav.is-open{display:flex;position:absolute;z-index:30;top:74px;left:0;right:0;background:#fff;padding:16px 24px;box-shadow:0 12px 24px #083c5a24;flex-direction:column;align-items:stretch}.nav ul{flex:1;width:100%;flex-direction:column;align-items:stretch;gap:0}.nav ul>li:has(>a[href*="kundenportal.wasser-wem-nord.de"]){margin-left:0}.nav>a.portal{margin-left:0}.nav li a{display:inline-block;padding:9px 0}.nav li>ul,.nav li:hover>ul,.nav li:focus-within>ul,.nav li.show>ul,.nav ul.show{position:static;min-width:0;width:100%;border:0;border-radius:0;box-shadow:none;padding:0 0 0 14px}.nav li>ul a{padding:8px 0;white-space:normal}.nav .mod-menu__toggle-sub{padding:6px 10px}.mobile{display:block}.mobile{display:block;border:1px solid var(--line);padding:8px 11px;border-radius:7px;color:var(--navy);font-size:13px;font-weight:bold}.hero .wrap{grid-template-columns:1fr;min-height:auto;padding-top:52px;padding-bottom:0;gap:0}.hero h1{font-size:39px}.hero p{font-size:16px}.water-art{height:230px;margin:0 -24px;transform:none}.scene-sun{width:70px;height:70px;right:28px;top:5px}.plant-building{left:5%;width:39%;height:31%}.tank{right:5%;width:37%;height:32%}.stack{left:20%;height:35px}.stat-card{right:0;bottom:12px;padding:10px 12px}.stat-card strong{font-size:14px}.quick{padding:20px 0}.cards{grid-template-columns:1fr;gap:10px}.card{padding:15px}.section{padding:48px 0}.section-head{align-items:start;flex-direction:column}.section h2{font-size:27px}.news-grid{grid-template-columns:1fr}.news.feature{grid-column:auto}.about-grid{grid-template-columns:1fr;gap:28px}.mapbox{height:235px}.factrow{gap:14px}.hotline .wrap{align-items:start;flex-direction:column}.numbers{width:100%;flex-direction:column}.number{display:flex;align-items:center;justify-content:space-between;gap:10px}.number strong{font-size:15px}.footgrid{grid-template-columns:1fr;gap:24px}.legal{flex-direction:column;gap:8px}}