body, html {
    height: 100%;
    width: 100%; /* Breite auf 100% setzen */
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Verhindert Scrollen */
    background: linear-gradient(270deg, #004287, #00b0eb, #4f2778);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite, wave 5s ease-in-out infinite, pulse 8s ease-in-out infinite; /* Drei Animationen */
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    25% { background-position: 100% 50%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
    100% { background-position: 0% 50%; }
}

@keyframes wave {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

.container {
    text-align: center;
    color: white;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
}

h1 {
    font-size: 3em;
    margin: 0;
}

p {
    font-size: 1.5em;
}

/* Media Queries für kleinere Bildschirme */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5em; /* Kleinere Schriftgröße für h1 */
    }

    p {
        font-size: 1.2em; /* Kleinere Schriftgröße für p */
    }

    .container {
        padding: 20px; /* Weniger Padding für kleinere Displays */
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2em; /* Noch kleinere Schriftgröße für h1 */
    }

    p {
        font-size: 1em; /* Noch kleinere Schriftgröße für p */
    }

    .container {
        padding: 15px; /* Weniger Padding für sehr kleine Displays */
    }
}