@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(fonts/poppins-400.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(fonts/poppins-600.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:700;font-display:swap;src:url(fonts/poppins-700.woff2) format('woff2')}
:root{--ink:#0E1A21;--text:#1C2830;--leise:#5B6870;--linie:#D8DEE1;--flaeche:#F1F4F5;--akzent:#0A5873;--akzent-dunkel:#073F53;--weiss:#fff}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{font-family:Poppins,"PingFang SC","Microsoft YaHei",Arial,sans-serif;font-size:17px;line-height:1.65;color:var(--text);background:var(--weiss);font-variant-numeric:tabular-nums}
a{color:var(--akzent)}
a:hover{color:var(--akzent-dunkel)}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.entwurf{background:#C8382E;color:#fff;text-align:center;font-size:13px;font-weight:600;padding:6px 16px}
header.kopf{border-bottom:1px solid var(--linie)}
header.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.marke{font-weight:700;font-size:19px;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.marke span{color:var(--akzent);font-weight:600}
.marke small{display:block;font-size:12px;font-weight:400;color:var(--leise);letter-spacing:.08em;margin-top:2px}
nav.haupt{display:flex;align-items:center;gap:24px;font-size:15px;margin-left:auto}
nav.haupt a{color:var(--text);text-decoration:none}
nav.haupt a:hover{color:var(--akzent)}
.sprachen{display:flex;gap:10px;padding-left:20px;border-left:1px solid var(--linie)}
.sprachen a,.sprachen strong{font-size:14px}
.sprachen strong{color:var(--ink)}
section{padding:96px 0}
section.flaeche{background:var(--flaeche)}
h1{font-weight:700;font-size:clamp(2.3rem,5.2vw,3.7rem);line-height:1.08;letter-spacing:-.025em;color:var(--ink)}
h2{font-weight:700;font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1.15;letter-spacing:-.02em;color:var(--ink);margin-bottom:40px}
h3{font-weight:600;font-size:1.15rem;line-height:1.35;color:var(--ink);margin-bottom:10px}
.hero{padding:80px 0 72px}
.hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:64px;align-items:center}
.hero .lead{font-size:1.22rem;line-height:1.6;color:var(--leise);margin:28px 0 36px;max-width:36em}
.knoepfe{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.knopf{display:inline-block;background:var(--akzent);color:#fff;text-decoration:none;font-weight:600;padding:14px 26px;border-radius:6px}
.knopf:hover{background:var(--akzent-dunkel);color:#fff}
.knopf.hell{background:#fff;color:var(--ink)}
.knopf.hell:hover{background:var(--flaeche);color:var(--ink)}
.textlink{font-weight:600;text-decoration:underline;text-underline-offset:4px}
.hero figure img{width:100%;aspect-ratio:1/1;object-fit:cover}
.zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;border-top:2px solid var(--ink);padding-top:28px}
.zahlen .nr{display:block;font-weight:700;font-size:2.3rem;line-height:1.1;color:var(--akzent);margin-bottom:8px}
.zahlen p{font-size:15px;color:var(--leise);line-height:1.5}
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.drei > div{border-top:1px solid var(--ink);padding-top:22px}
.drei p{color:var(--leise)}
.kategorien{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.kategorien ul{list-style:none;columns:2;column-gap:32px}
.kategorien li{break-inside:avoid;padding:12px 0;border-bottom:1px solid var(--linie);font-weight:600;color:var(--ink)}
.regel{border-top:2px solid var(--akzent);border-bottom:2px solid var(--akzent);padding:28px 0}
.regel p{color:var(--text)}
.wasser{padding:0}
.wasser img{width:100%;max-height:620px;object-fit:cover;object-position:50% 25%}
.wasser figcaption{max-width:1120px;margin:0 auto;padding:14px 24px 0;font-size:14px;color:var(--leise)}
.intro{font-size:1.15rem;color:var(--leise);max-width:40em;margin:-16px 0 40px}
.leistungen{border-top:2px solid var(--ink)}
.leistung{display:grid;grid-template-columns:1fr 240px;gap:48px;padding:32px 0;border-bottom:1px solid var(--linie)}
.leistung p{color:var(--leise);max-width:42em}
.preis{text-align:right}
.preis strong{display:block;font-size:1.5rem;font-weight:700;color:var(--ink);line-height:1.2}
.preis span{font-size:14px;color:var(--leise)}
.hinweis{font-size:14px;color:var(--leise);margin-top:28px;max-width:52em}
.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;list-style:none;counter-reset:s}
.schritte li{counter-increment:s}
.schritte li::before{content:"0" counter(s);display:block;font-weight:700;font-size:2.4rem;line-height:1;color:var(--akzent);margin-bottom:16px}
.schritte p{color:var(--leise)}
.ueber{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:start}
.ueber p+p{margin-top:18px}
dl.werdegang{border-top:2px solid var(--ink)}
dl.werdegang div{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--linie);font-size:15px}
dl.werdegang dt{color:var(--leise);white-space:nowrap}
dl.werdegang dd{color:var(--ink)}
.kontakt{background:var(--ink);color:#E7ECEE}
.kontakt h2{color:#fff}
.kontakt p{max-width:36em;font-size:1.15rem}
.kontakt .mail{display:inline-block;margin:28px 0 32px;font-size:clamp(1.4rem,3vw,2rem);font-weight:700;color:#fff;text-decoration:underline;text-underline-offset:6px;word-break:break-all}
.kontakt .adresse{margin-top:28px;font-size:14px;color:#9FB0B8}
footer.fuss{padding:28px 0;font-size:14px;color:var(--leise)}
footer.fuss .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer.fuss a{color:var(--leise)}
footer.fuss nav{display:flex;gap:20px}
.recht{padding:72px 0 96px}
.recht .wrap{max-width:760px}
.recht h1{font-size:2.4rem;margin-bottom:32px}
.recht p{margin-bottom:18px}
ul.leitfaeden{list-style:none;border-top:2px solid var(--ink);margin-bottom:28px}
ul.leitfaeden li{padding:24px 0;border-bottom:1px solid var(--linie)}
ul.leitfaeden a{text-decoration:none}
ul.leitfaeden a:hover h3{color:var(--akzent)}
ul.leitfaeden p{color:var(--leise);max-width:46em}
.recht .intro{margin:0 0 40px}
.leitfaden{padding:64px 0 96px}
.leitfaden .wrap{max-width:760px}
.leitfaden .pfad{font-size:14px;margin-bottom:16px}
.leitfaden h1{font-size:clamp(2rem,4.4vw,2.9rem);margin-bottom:16px}
.leitfaden .meta{font-size:14px;color:var(--leise);margin-bottom:32px}
.leitfaden .antwort{font-size:1.2rem;line-height:1.6;color:var(--ink);padding:24px 0;border-top:2px solid var(--akzent);border-bottom:2px solid var(--akzent);margin-bottom:16px}
.leitfaden h2{font-size:1.55rem;margin:56px 0 16px}
.leitfaden h3{margin-top:28px}
.leitfaden p+p{margin-top:16px}
.leitfaden ol{padding-left:1.4em}
.leitfaden ol li{margin-bottom:10px;padding-left:4px}
.leitfaden .cta{margin-top:64px;padding-top:32px;border-top:2px solid var(--ink)}
.leitfaden .cta h2{margin-top:0}
.leitfaden .cta p{margin-bottom:24px;color:var(--leise)}
:lang(zh-Hans) h1,:lang(zh-Hans) h2{letter-spacing:0}
:lang(zh-Hans) body,body:lang(zh-Hans){line-height:1.8}
.leitfaden ul{padding-left:1.2em}
.leitfaden ul li{margin-bottom:10px;padding-left:4px}
.leitfaden .weblink a{font-weight:600;text-underline-offset:4px}
.preisbox{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:8px 0 8px}
.preisbox strong{font-size:1.6rem;font-weight:700;color:var(--ink)}
.preisbox span{color:var(--leise);font-size:15px}
.leistung h3 a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--linie)}
.leistung h3 a:hover{color:var(--akzent);border-color:var(--akzent)}
@media (max-width:900px){
 .hero .wrap,.kategorien,.ueber{grid-template-columns:1fr;gap:48px}
 .hero figure{max-width:420px}
 .zahlen{grid-template-columns:1fr 1fr}
 .drei,.schritte{grid-template-columns:1fr}
}
@media (max-width:640px){
 body{font-size:16px}
 .wrap{padding:0 16px}
 section{padding:64px 0}
 .hero{padding:48px 0 56px}
 header.kopf .wrap{flex-wrap:wrap;gap:8px 16px;padding-top:12px;padding-bottom:10px;min-height:0}
 nav.haupt{order:3;width:100%;margin-left:0;gap:16px;font-size:14px;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
 .sprachen{order:2;margin-left:auto;padding-left:0;border-left:0}
 .kategorien ul{columns:1}
 .leistung{grid-template-columns:1fr;gap:12px}
 .preis{text-align:left}
 .zahlen{gap:24px 20px}
 .zahlen .nr{font-size:1.9rem}
 dl.werdegang div{grid-template-columns:1fr;gap:2px}
 .wasser figcaption{padding:12px 16px 0}
}