/* Grundlegende Styles */
body, html {
    height: 100%;
    margin: 0;
    background-image: url('/static/images/Schriftengerade-VK-Hintergrund.webp');
    background-position: center;
    background-repeat: no-repeat; /* Geändert von repeat zu no-repeat für ein sauberes Erscheinungsbild */
    background-size: cover;
}

/* Header- und Footer-Styles */
header, footer {
    background-color: transparent;
    height: 10%; /* Einheitliche Höhe für Header und Footer */
    te
    }

/* Hauptinhalt-Styles */
.section-container {
    height: 70%; /* Verbleibende Höhe für den Hauptinhalt */
    overflow-y: auto; /* Ermöglicht Scrollen innerhalb des Containers, falls nötig */
}

/* Logo-Styles */
.logo {
    max-width: 250px; /* Anpassbare Größe für das Logo */
}

/* Runde Bild-Styles */
.rounded-circle {
    border-radius: 50%;
    max-width: 340px; /* Standardgröße */
}

/* Icon-Styles */
.icon {
    color: white; /* Farbe der Icons */
    margin-right: 15px; /* Abstand zwischen den Icons */
    font-size: 25px; /* Größe der Icons */
}

.icon:last-child {
    margin-right: 0; /* Kein Abstand nach dem letzten Icon */
}
    h1 {
        font-size: 40px !important; /* Kleinere Schriftgröße für <h1> auf Handys */
        font-weight: 400 !important;
    }

/* Media Queries für kleinere Bildschirme */
@media (max-width: 767px) {
    .rounded-circle {
        max-width: 170px; /* Kleinere Größe für Handys */
    }

    h1 {
        font-size: 35px !important; /* Kleinere Schriftgröße für <h1> auf Handys */
        font-weight: 500 !important;
    }
}

/* Link-Farben anpassen */
a {
    color: #AFCA0B; /* Standard-Linkfarbe */
}

/* Hover-Farbe für Links */
a:hover {
    color: #AFCA0B; /* Hover-Farbe */
}

/* Fokus-Farbe für Links */
a:focus {
    color: #AFCA0B; /* Fokus-Farbe */
}

.custom-border {
    border: solid;
    border-width: 5px;
    border-color: #AFCA0B; /* Anpassen der Rahmenfarbe */
    border-radius: 20px;
    background-color: #AFCA0B;
}