/* Basis Layout und Textfarben */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
    background-color: #000000; /* Schwarzer Hintergrund */
    color: #ffffff; /* Weiße Schrift */
}

/* Wrapper für das Layout */
.wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    text-align: center;
}

/* Zentriertes Logo */
.logo-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.logo {
    margin: 0 20px;
    height: 84px; /* Originalgröße für Desktop */
    width: auto;
}

/* Inhalt */
.content-section {
    flex: 1;
    padding: 40px 20px;
    color: #ffffff;
    text-align: center; /* Zentriere den Text */
}

/* Logo in der Content-Section */
.content-section img {
    height: 84px; /* Originalgröße für Desktop */
    width: auto;
}

/* Fußzeile */
.footer-section {
    background-color: #000000;
    padding: 15px;
    color: #d9d9d9;
    border-top: solid 1px #333333;
}

/* Mobile Optimierung */
@media only screen and (max-width: 768px) {
    /* Beide Logos in der Titelleiste um 50% und dann nochmals um 30% verkleinert */
    .logo {
        height: 29.4px; /* 50% und dann nochmals 30% kleiner von der ursprünglichen 84px */
        width: auto;
        margin-bottom: 10px;
    }

    /* Logo in der Content-Section um 50% und nochmals 30% verkleinert */
    .content-section img {
        height: 44px; /* 50% und dann nochmals 30% kleiner von der ursprünglichen 84px */
        width: auto;
        margin-top: 20px;
    }

    .content-section {
        padding: 20px;
        font-size: 1em;
        text-align: center;
    }

    h1, h2 {
        font-size: 1.2em;
        line-height: 1.4; /* Mehr Abstand zwischen den Zeilen für Lesbarkeit */
    }

    .footer-section {
        font-size: 0.9em;
        padding: 10px;
    }
}