* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: #1b263b;
    background: #ffffff;
}


/* Kopfbereich */

header {

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 25px 8%;

    background: white;

}


/* Logo */

.logo img {
    height: 180px;
    width: auto;
    display: block;
}



/* Navigation */

nav a {

    margin-left: 25px;

    text-decoration: none;

    color: #102a43;

    font-weight: bold;

    transition: color 0.3s ease;

}


nav a:hover {

    color: #3aaa35;

}



/* Startbereich */

.hero {

    min-height: 560px;

    display: flex;

    align-items: center;

    padding: 0 8%;


    background:

    linear-gradient(
    rgba(16,42,67,0.78),
    rgba(16,42,67,0.78)
    ),

    url("flotte.jpg");


    background-size: cover;

    background-position: center;

    color:white;

}


.hero-text {

    max-width: 650px;

}


.hero h1 {

    font-size: 60px;

    margin-bottom: 10px;

}


.hero h2 {

    font-size: 32px;

}


.hero p {

    font-size: 18px;

    line-height: 1.6;

}



/* Button */

.demo-btn {

    display:inline-block;

    margin-top:25px;

    background:#3aaa35;

    color:white;

    padding:16px 34px;

    border-radius:10px;

    text-decoration:none;

    font-weight:bold;

    transition: all 0.3s ease;

}

.demo-btn:hover {

    background:#2e8d2c;

    transform: translateY(-2px);

    box-shadow:0 8px 20px rgba(0,0,0,0.18);

}


/* Allgemeine Bereiche */

section {

    padding:70px 8%;

}


section h2 {

    text-align:center;

    font-size:36px;

    margin-bottom:40px;

}



/* Module */

.card {

    background:#f4f7f8;

    padding:30px;

    border-radius:15px;

    border:1px solid #e5e7eb;

    transition:0.3s;

}



.card {

    background:#f4f7f8;

    padding:30px;

    border-radius:15px;

    transition:0.3s;

}


.card:hover {

    transform:translateY(-5px);

    box-shadow:0 10px 25px rgba(0,0,0,0.12);

}



.card h3 {

    color:#102a43;

}


.card strong {

    color:#3aaa35;

}



/* Vorteile */

.highlights {

    display:flex;

    gap:30px;

    background:#f8fafc;

}



.highlight {

    flex:1;

    background:white;

    padding:30px;

    border-radius:15px;

    border:1px solid #edf2f7;

    box-shadow:0 5px 20px rgba(0,0,0,0.08);

}



.highlight h3 {

    color:#102a43;

}



/* Vision */

.advantages {

    background:#102a43;

    color:white;

    text-align:center;

}



/* Kontakt */

.contact {

    text-align:center;

}



/* Fußzeile */

footer {

    background:#0b1d2a;

    color:white;

    text-align:center;

    padding:25px;

}



/* Handy Ansicht */

@media(max-width:800px) {


header {

    flex-direction:column;

    gap:20px;

}


nav a {

    margin:10px;

}


.hero h1 {

    font-size:42px;

}


.highlights {

    flex-direction:column;

}

}
.status {

    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 15px;

}


.available {

    background: #d9f7d6;
    color: #2e8d2c;

}


.development {

    background: #fff2cc;
    color: #9a6700;

}


.planned {

    background: #e8eef5;
    color: #102a43;

}
.footer-links {

    margin-top:15px;

}


.footer-links a {

    color:white;

    text-decoration:none;

    margin:0 12px;

    font-size:14px;

}


.footer-links a:hover {

    color:#3aaa35;

}
.why{

    background:#f8fafc;

}

.why h2{

    margin-bottom:50px;

}