/* Allgemeines Styling für die Seite */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    text-align: center;
    padding: 50px;
}

/* Überschrift */
h1 {
    color: #333;
    margin-bottom: 30px;
}

/* Navigation */
ul.navigation {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 20px; /* Abstand zwischen den Listenelementen */
    margin-bottom: 40px;
    padding: 0;
}

.navigation li a {
    text-decoration: none;
    color: #008CBA;
    font-weight: bold;
    font-size: 25px; /* gewünschte Schriftgröße */
    border: 1px solid #ccc; /* leichte graue Umrandung */
    padding: 10px 15px; /* Abstand zwischen Text und Rand */
    border-radius: 5px; /* abgerundete Ecken */
    background-color: #fff; /* sorgt für klare Abgrenzung */
}

.navigation li a:hover {
    color: #005f75;
    border-color: #005f75;
}

/* Styling für die Buttons */
button {
    display: block;
    margin: 10px auto;
    padding: 10px 20px;
}

/* Features Liste ohne Aufzählungspunkte */
.features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.features li {
    margin-bottom: 0.5em;
}

footer {
  background: #f4f4f4;
  text-align: center;
  padding: 10px;
  font-size: 0.9em;
}
/* Responsive Anpassungen */
@media (max-width: 768px) {
    body {
        padding: 20px;
    }
    
    h1 {
        font-size: 28px;
        margin-bottom: 20px;
    }
    
    ul.navigation {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
    }
    
    .navigation li a {
        font-size: 20px;
        padding: 8px 10px;
    }
}