body {
    background-image: url('../Image/Design_Auerhahn_1.jpg'); /* Pfad zum Hintergrundbild */
    background-color: rgba(0, 0, 0, 0.65); /* Dunkelt das Bild per Blend ab */
    background-blend-mode: multiply;
    background-size: cover; /* Bild wird skaliert, um den gesamten Hintergrund zu bedecken */
    background-position: center; /* Bild wird zentriert */
    background-repeat: no-repeat; /* Bild nicht wiederholen */
    min-height: 100vh; /* Mindestens Viewport-Hoehe */
    margin: 0; /* Entfernt Standardabstand */
}    

.overlay {
    background-color: rgba(0, 0, 0, 0.65); /* Schwarz mit 65% Transparenz */
    position: relative; /* Overlay folgt der Inhaltshoehe */
    min-height: 100vh;
    z-index: 1; /* Sicherstellen, dass das Overlay über dem Bild liegt */
}

.content {
    position: relative; /* Relativ zur Overlay */
    color: white; /* Textfarbe */
    text-align: center;
    padding: 20px;
    z-index: 2; /* Sicherstellen, dass der Text über dem Overlay erscheint */
}

@keyframes pulse-green {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(57, 255, 106, 0);
        background-color: rgba(57, 255, 106, 0.12);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 22px rgba(57, 255, 106, 0.9);
        background-color: rgba(57, 255, 106, 0.28);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(57, 255, 106, 0);
        background-color: rgba(57, 255, 106, 0.12);
    }
}

.pulse-blue {
    animation: pulse-blue 1.2s ease-in-out infinite;
}

.pulse-red {
    animation: pulse-red 1.2s ease-in-out infinite;
}

@keyframes pulse-blue {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(78, 168, 255, 0);
        background-color: rgba(78, 168, 255, 0.12);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 22px rgba(78, 168, 255, 0.9);
        background-color: rgba(78, 168, 255, 0.28);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(78, 168, 255, 0);
        background-color: rgba(78, 168, 255, 0.12);
    }
}

@keyframes pulse-red {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(255, 90, 90, 0);
        background-color: rgba(255, 90, 90, 0.12);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 22px rgba(255, 90, 90, 0.9);
        background-color: rgba(255, 90, 90, 0.28);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(255, 90, 90, 0);
        background-color: rgba(255, 90, 90, 0.12);
    }
}

@keyframes pulse-gold {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(255, 200, 60, 0);
        background-color: rgba(255, 200, 60, 0.12);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 22px rgba(255, 200, 60, 0.9);
        background-color: rgba(255, 200, 60, 0.28);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(255, 200, 60, 0);
        background-color: rgba(255, 200, 60, 0.12);
    }
}

.btn.pulse-green {
    color: #39ff6a !important;
    border-color: #39ff6a !important;
    text-shadow: 0 0 12px rgba(57, 255, 106, 0.85);
    animation: pulse-green 1.2s ease-in-out infinite;
    display: inline-block;
    will-change: transform, box-shadow;
}

.btn.pulse-blue {
    color: #4ea8ff !important;
    border-color: #4ea8ff !important;
    text-shadow: 0 0 12px rgba(78, 168, 255, 0.85);
    animation: pulse-blue 1.2s ease-in-out infinite;
    display: inline-block;
    will-change: transform, box-shadow;
}

.btn.pulse-red {
    color: #ff5a5a !important;
    border-color: #ff5a5a !important;
    text-shadow: 0 0 12px rgba(255, 90, 90, 0.85);
    animation: pulse-red 1.2s ease-in-out infinite;
    display: inline-block;
    will-change: transform, box-shadow;
}

.btn.pulse-gold {
    color: #ffc83c !important;
    border-color: #ffc83c !important;
    text-shadow: 0 0 12px rgba(255, 200, 60, 0.85);
    animation: pulse-gold 1.2s ease-in-out infinite;
    display: inline-block;
    will-change: transform, box-shadow;
}