body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    background-size: cover; /* Stellt sicher, dass das Bild den gesamten verfügbaren Raum bedeckt */
    background-repeat: no-repeat; /* Verhindert das Wiederholen des Hintergrundbildes */
    background-attachment: fixed; /* Hintergrund bleibt beim Scrollen fest */
    position: relative;
}

#background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0); /* Schwarz mit 50% Deckkraft */
    z-index: 1; /* Hinter dem Inhalt, aber über dem Hintergrund */
}

#content {
    position: relative;
    z-index: 2;
}

#header {
    margin-top: 50px;
}


#website-logo {
    height: 250px; /* Höhe des Logos */
    width: auto; /* Breite automatisch anpassen */
    margin-top: 0px; /* Abstand von oben */
    /* Weitere Stil-Anpassungen nach Bedarf */
}

#header h1 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Elegante, professionelle Schriftart */
    font-size: 32px; /* Anpassbare Größe */
    color: white; /* Dunkelgraue Farbe für Seriosität */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Subtiler Schatten */
    text-transform: uppercase; /* Großbuchstaben */
    font-weight: 600; /* Mittlere Schriftstärke */
    letter-spacing: 1px; /* Leichter Buchstabenabstand */
    margin-top: 80px;
}

#search-container {
    margin-top: 20px;
}

#search-input {
    width: 50%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 4px;
}

#search-engine {
    padding: 10px;
    border-radius: 4px;
    margin-right: 5px;
}

button {
    color: white;
    padding: 10px 20px;
    background-color: #4285f4;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #357ae8;
}

#links-container {
    margin-top: 30px;
}

a {
    margin: 0 10px;
    text-decoration: none;
    color: #1a0dab;
}

#seppo-button {
    position: fixed; /* Fixiert die Position im Viewport */
    top: 10px;
    right: 10px;
/*    background-color: #FFB400;*/
/*    color: black;*/
/*    background-color: #232229;*/
    color: #FFB400;
    padding: 10px 15px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
/*    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);*/
    z-index: 1000; /* Stellt sicher, dass der Button über anderen Elementen liegt */
}

#seppo-button:hover {
    background-color: #FFB400;
    color: black;
}

#bottom-left-buttons {
    position: fixed;
    bottom: 5px;
    left: 5px;
    display: flex;
    gap: 2px; /* Minimaler Abstand */
    font-size: 12px;
}

#impressum-button,
#report-button {
    background-color: transparent;
    color: #FFB400; /* Gelber Text */
    padding: 2px 4px; /* Noch kompakter */
    text-decoration: none;
    font-weight: normal;
    transition: opacity 0.2s ease-in-out;
    opacity: 0.7; /* Leicht unauffällig */
}

#impressum-button:hover,
#report-button:hover {
    opacity: 1; /* Beim Hover besser sichtbar */
}

/* Responsives Design */
@media screen and (max-width: 768px) {
    body #search-input {
        width: 90%;
        padding: 20px 30px;
        font-size: 18px;
    }

    body #website-logo {
        height: 400px;
    }
}

@media screen and (max-width: 480px) {
    body #search-input {
        width: 95%;
        padding: 25px 35px;
        font-size: 20px;
    }

    body #website-logo {
        height: 450px;
    }
}