:root{
    --primary:#163A5F;      /* Dunkelblau: Vertrauen, Stabilität */
    --secondary:#FEA918;    /* Firmenfarbe: Energie, Innovation */
    --light:#F5F7FA;        /* Hintergrund */
    --text:#3F3F3F;         /* Text */
    --white:#FFFFFF;
}


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{

    font-family:"Segoe UI",Arial,sans-serif;
    background:var(--light);
    color:var(--text);

}


/* HEADER */

header{

    background:linear-gradient(135deg,#163A5F,#0b263f);
    padding:15px 40px;
    box-shadow:0 8px 25px rgba(0,0,0,.15);

}


.logo{

    display:flex;
    align-items:center;
    gap:30px;

}


.logo img{

    height:40px;
    width:auto;

}


.company h1{

    color:white;
    font-size:1.7rem;
    letter-spacing:.5px;

}


.company span{

    display:block;
    margin-top:8px;
    color:#cbd8e0;
    font-size:1rem;

}



/* HERO */

.hero{

    max-width:1250px;
    margin:auto;

    padding:45px 30px;

    display:grid;
    grid-template-columns:1fr 450px;

    gap:40px;

    align-items:center;

}



.badge{

    display:inline-block;

    background:var(--secondary);
    color:white;

    padding:10px 20px;

    border-radius:30px;

    margin-bottom:25px;

    font-weight:600;

}



.hero h2{

    color:var(--secondary);

    font-size:2.6rem;

    line-height:1.2;

    margin-bottom:10px;

}



.hero p{

    font-size:1.15rem;

    line-height:1.4;

    color:#666;

}



.buttons{

    margin-top:40px;

    display:flex;

    gap:15px;

}



.btn-primary,
.btn-secondary{

    padding:14px 30px;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}



.btn-primary{

    background:var(--primary);

    color:white;

}



.btn-primary:hover{

    background:#245b91;

}



.btn-secondary{

    border:2px solid var(--primary);

    color:var(--primary);

}



.btn-secondary:hover{

    background:var(--primary);

    color:white;

}



/* SVG NETWORK */

.network-svg{

    width:340px;

    max-width:100%;

}



.network-svg line{

    stroke:#00A8C6;

    stroke-width:3;

    stroke-dasharray:8 8;

    animation:moveLine 8s linear infinite;

}



.network-svg .node{
    fill:#FEA918;
}

.network-svg .center{
    fill:#163A5F;
}



@keyframes moveLine{

    from{

        stroke-dashoffset:80;

    }

    to{

        stroke-dashoffset:0;

    }

}



@keyframes pulse{

    0%,100%{

        r:12;

    }

    50%{

        r:16;

    }

}



/* LEISTUNGEN */

#leistungen{

    max-width:1250px;

    margin:auto;

    padding:0 30px 80px;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

}



.card{

    background:white;

    padding:35px;

    border-radius:15px;

   border-top:5px solid #FEA918;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.3s;

}



.card:hover{

    transform:translateY(-8px);

}



.card h3{

    color:var(--primary);

    margin-bottom:15px;

}



.card p{

    line-height:1.4;

    color:#666;

}

#partner{

    max-width:1250px;
    margin:0 auto 80px;
    padding:40px 30px;
    text-align:center;

}


#partner h2{

    color:#163A5F;
    font-size:1.5rem;
    margin-bottom:15px;

}


#partner p{

    max-width:750px;
    margin:0 auto 35px;

    color:#666;

    line-height:1.7;

}


.partner-logos{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:45px;

}


.partner-logo{

    font-size:1.15rem;

    font-weight:600;

    color:#163A5F;

    transition:.3s;

    cursor:default;

    letter-spacing:.5px;

}


.partner-logo:hover{

    color:#FEA918;

    transform:scale(1.08);

}

/* FOOTER */

footer{

    background:var(--primary);

    color:white;

    text-align:center;

    padding:35px;

}



footer a{

    color:white;

    text-decoration:none;

    margin:0 15px;

}



footer a:hover{

    color:var(--secondary);

}



/* MOBILE */

@media(max-width:900px){


    header{

        text-align:center;

    }


    .logo{

        flex-direction:column;

    }


    .hero{

        grid-template-columns:1fr;

        text-align:center;

    }


    .hero h2{

        font-size:2.3rem;

    }


    .buttons{

        justify-content:center;

        flex-wrap:wrap;

    }


    .network-svg{

        display:none;

    }

}