*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,sans-serif;color:#24303d;line-height:1.7;background:#fff}
.wrap{max-width:1200px;margin:auto;padding:0 24px}
header{position:sticky;top:0;background:#0f172a;z-index:99}
.top{display:flex;justify-content:space-between;align-items:center;padding:18px 0}
.brand{text-decoration:none}.logo{font-size:34px;font-weight:700;color:#fff}.sub{color:#0ea5a4}
.brand{

    transition:.3s;

}

.brand:hover{

    transform:translateY(-2px);

    opacity:.9;

}
nav a{color:#fff;margin-left:28px;text-decoration:none}
nav a{

    position:relative;

    transition:.3s;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:#0ea5a4;

    transition:.3s;

}

nav a:hover::after{

    width:100%;

}
.cta,.btn{background:#0ea5a4;color:#fff;padding:16px 34px;font-size:1.05rem;border-radius:10px}
.hero{
    padding:90px 0 70px;
    background:linear-gradient(135deg,#0f172a,#314760);
    color:#fff;
}
.claim{color:#5eead4;font-weight:bold}
.hero h1{
    font-size:52px;
    max-width:760px;
    line-height:1.15;
    margin-bottom:28px;
}

.hero p{

    max-width:620px;

    font-size:1.2rem;

    line-height:1.9;

    opacity:.9;

    margin-bottom:40px;

}
.valuestrip{text-align:center;padding:18px;background:#f7fafc;font-weight:600}
.sec{padding:90px 0}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:32px}
.card{padding:34px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.08);border-top:4px solid #0ea5a4}
.about{display:grid;grid-template-columns:2fr 1fr;gap:40px}
.box{background:#f8fafc;padding:24px;border-radius:14px}
.contact{background:#0f172a;color:#fff;padding:70px 0}
footer{background:#08101d;color:#fff;padding:50px 0}
.footergrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
footer a{color:#5eead4;text-decoration:none;display:block;margin:6px 0}
@media(max-width:850px){

.top{
    display:block;
}

.about{
    display:block;
}

.footergrid{
    display:block;
}

.wrap{
    padding-left:32px;
    padding-right:32px;
}

.hero{
    padding:60px 0 45px;
}

.hero h1{
    font-size:2.6rem;
    line-height:1.15;
}

.hero p{
    font-size:1.1rem;
    line-height:1.7;
}

nav{
    margin-top:18px;
}

nav a{
    margin-right:18px;
    margin-left:0;
}

}
#leistungen,
#about,
#kontakt{
    scroll-margin-top: 180px;
}
html{
    scroll-behavior: smooth;
}

.card{

    transition:.35s;

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}
footer a{

    transition:.25s;

}

footer a:hover{

    color:#5eead4;

    padding-left:4px;

}
.btn{
    text-decoration: none;
}
.btn{
    transition: all 0.25s ease;
}

.btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}
@media (max-width:768px){

    .wrap{

        padding-left:18px;
        padding-right:18px;

    }
    .hero h1{
        font-size:2.2rem;
        line-height:1.15;
    }

}
@media(max-width:850px){

#leistungen,
#about,
#kontakt{

    scroll-margin-top:75px;

}

}