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

body, html {
    height: 100%;
    font-family: Arial, sans-serif; /* Serifenlose Schrift */
}

/* Hintergrundbild */
.background {
    background-image: url('background.jpg'); /* Hintergrundbild */
    background-size: cover;
    background-position: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

/* Container für das Logo und den Text darunter */
.logo-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

/* Logo in der Mitte */
.logo img {
    max-width: 600px; /* Maximale Breite des Logos */
    height: auto;
}

/* Text unter dem Logo */
.logo-text {
    color: white;
    font-size: 1.5rem;
    text-align: center;
    margin-top: 5vh; /* Abstand von 5% der Bildschirmhöhe zum Logo */
    font-family: Arial, sans-serif; /* Serifenlose Schrift wie im Footer */
}

/* Buttons am oberen Rand */
.top-bar {
    position: absolute;
    top: 20px;
    right: 20px; /* Rechtsbündig ausgerichtet */
    display: flex;
    gap: 20px;
}

.top-bar a {
    padding: 10px 20px;
    border: 2px solid white;
    color: white;
    text-decoration: none;
    background-color: transparent;
    border-radius: 3px; /* Eckigerer Button */
    text-align: center;
}

/* Schwarzer Balken am unteren Rand */
.footer {
    background-color: black;
    color: white;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    font-size: 14px;
}

.footer .address {
    font-size: 14px;
}

.footer .social-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer a {
    color: white;
    text-decoration: none;
}

.footer .social-links i {
    font-size: 20px;
}

/* Responsive Anpassung */
@media(max-width: 768px) {
    .footer {
        flex-direction: column;
        text-align: center;
        height: auto;
        padding: 10px 0;
    }
    .footer .address {
        margin-bottom: 15px;
    }

    .top-bar {
        flex-direction: column;
        right: 50%;
        transform: translateX(50%);
    }

    .logo img {
        width: 100%; /* Logo wird bei kleineren Bildschirmen größer */
    }

    .logo-text {
        margin-top: 10vh; /* Weniger Abstand bei kleineren Bildschirmen */
        font-size: 1.2rem; /* Kleinere Schriftgröße */
    }
}

@media(max-width: 480px) {
    .logo img {
        width: 100%; /* Logo wird bei sehr kleinen Bildschirmen noch größer */
        max-width: 300px;
    }
    

    .top-bar {
        right: 10px;
        transform: none;
    }
    .top-bar {
        flex-direction: column;
        right: 50%;
        transform: translateX(50%);
    }

    .logo-text {
        font-size: 1rem; /* Noch kleinere Schriftgröße */
    }
}