:root{--bar:40px;--off:8px;--barbg:linear-gradient(90deg,#b8bdc1 0%,#b1b5b9 50%,#9a9ea2 85%,#85888c 100%);--bg:#f6f6f4;--ink:#141414;--mute:#545454;--dark:#181818;--dark2:#232323;--acc:#e30613;--line:#d6d6d3;--link:#b1000e}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:120px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{position:relative;margin:0;font:17px/1.6 "Avenir Next",Avenir,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--link)}a:focus-visible,button:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px 0 calc(var(--bar) + 18px)}
header.top{position:sticky;top:0;z-index:5;background:#fff;color:var(--ink);}
header.top>.wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;flex-wrap:wrap}
.logo{display:flex;align-items:center}.logo img{display:block;height:48px;width:auto}
nav a{color:var(--ink);text-decoration:none;margin-left:20px;font-size:.95rem}nav a:hover{color:var(--acc);text-decoration:underline}
.hero{background:var(--bg);color:var(--ink);padding:44px 0 64px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.12;margin:0 0 18px;font-weight:800}
.hero p{color:var(--mute);max-width:34em;margin:0 0 28px}
.herologo{display:block;width:100%;max-width:420px;height:auto;margin-left:auto}
.btn{display:inline-block;padding:13px 22px;border-radius:3px;font-weight:700;text-decoration:none;margin:0 10px 10px 0}
.btn.p{background:var(--acc);color:#fff}.btn.s{border:2px solid var(--ink);color:var(--ink)}
.btn:hover{filter:brightness(1.08)}
section{padding:64px 0}
h2{font-size:1.9rem;line-height:1.2;margin:0 0 14px}
.lead{max-width:44em;color:var(--mute)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:32px 0 0;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;border-top:4px solid var(--acc);padding-top:12px}
.steps li:before{content:counter(s);font-weight:800;font-size:1.6rem;display:block}
.steps b{display:block;margin-bottom:4px}
#leistungen{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.svc{display:grid;grid-template-columns:minmax(200px,1fr) 2.2fr;gap:36px;padding:36px 0;border-top:1px solid var(--line)}
.svc:first-of-type{border-top:0}
.svc h3{margin:0;font-size:1.3rem;line-height:1.25;position:sticky;top:80px;align-self:start}
.svc p{margin:0 0 14px}
.svc ul{margin:0;padding-left:1.1em;columns:2;column-gap:32px}.svc li{margin-bottom:5px;break-inside:avoid}
.note{font-size:.92rem;color:var(--mute)}
.contact{background:var(--dark2);color:#fff}
.contact a{color:#fff}.contact .btn.p{color:#fff}.contact .lead{color:#d0d0d0}
.contact dl{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;margin:24px 0}.contact dt{color:#ababab}.contact dd{margin:0}
footer{background:var(--dark);color:#bdbdbd;padding:26px 0;font-size:.92rem}footer a{color:#fff;margin-right:18px}
.doc{padding:48px 0}.doc h1{font-size:2rem}.doc h2{font-size:1.25rem;margin-top:28px}.doc p,.doc li{max-width:46em}
@media(max-width:820px){.hero .wrap,.svc,.steps{grid-template-columns:1fr}.herologo{display:block;width:100%;max-width:420px;height:auto;margin-left:auto}.svc h3{position:static}.svc ul{columns:1}nav a{margin:0 14px 0 0}}
.contact a:focus-visible,footer a:focus-visible{outline-color:#fff}
.svc>div::after,section>.wrap::after{content:'';display:block;clear:both}
body::before{content:"";position:absolute;z-index:1;left:0;top:0;bottom:0;width:var(--bar);background:var(--barbg)}
.band{position:relative;z-index:2;margin-left:var(--off);background:linear-gradient(90deg,#e2001f,#cd001c 50%,#b90017);color:#fff;padding:6px 0;box-shadow:0 5px 9px -1px rgba(0,0,0,.38)}
.band::before{content:"";position:absolute;left:0;bottom:100%;width:calc(var(--bar) - var(--off));height:14px;background:linear-gradient(to top,#8f0014 0%,#cf001c 45%,#e2001f 100%);clip-path:polygon(0 100%,100% 0,100% 100%)}
.band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 28px}.band .motto{font-size:clamp(.9rem,1.8vw,1.1rem);font-weight:500}.band strong{margin-left:auto}
.band strong{font-size:clamp(.95rem,2vw,1.2rem);font-weight:600;letter-spacing:.01em}
@media(max-width:820px){:root{--bar:16px;--off:3px}.wrap{padding-left:calc(var(--bar) + 14px)}}
header.top::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--bar);background:var(--barbg)}
.herobox{max-width:420px;margin-left:auto;text-align:center}.herobox .herologo{margin:0 auto}
.hero .herobox p{margin:16px 0 0;max-width:none;font-size:clamp(1.05rem,2vw,1.3rem);font-weight:500;color:var(--ink)}
@media(max-width:820px){.herobox{margin:0;max-width:300px;text-align:left}.herobox .herologo{margin:0}}
@media(max-width:820px){header.top>.wrap{min-height:56px}.band .motto{font-size:.8rem}.band .wrap{gap:0 12px}}