body {
        background-color: #1200b4;
        font-family: Felix Titling;
        color: #f70000;
        background-image: url('ruinen.JPG'); /* Dateiname anpassen */
        background-size: cover; /* Bild füllt den Hintergrund */
        #background-position: center; /* Bild zentrieren */
        filter: grayscale(0.7) contrast(1.2) brightness(0.9);
        animation: bg-move 2s infinite alternate;
        overflow: hidden;
                      
    }

    @keyframes bg-move {
        #0% { background-position: center; }
        #100% { background-position: 52% 48%; }
    }

    .film-overlay {
    pointer-events: none;
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 1;
    background: repeating-linear-gradient(
        to bottom,
        rgba(224, 9, 9, 0.685) 0px,
        rgba(90, 3, 3, 0.863) 1px,
        transparent 1px,
        transparent 10px
    );
    mix-blend-mode: lighten;
    animation: overlay-move 1.7s infinite linear;
}

@keyframes overlay-move {
    0% { background-position-y: 0; }
    100% { background-position-y: 30px; }
}

/* Optional: Körnung mit CSS-Noise-Generator */
.film-overlay::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://www.transparenttextures.com/patterns/noise.png');
    opacity: 0.2;
    pointer-events: none;
    animation: grain 0.5s steps(2) infinite;
}

@keyframes grain {
    0% { opacity: 0.15; }
    100% { opacity: 0.25; }
}

    h1 {
        color: blue;
        text-align: center;
    }
    
@keyframes flackern {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
  }
  20%, 22%, 24%, 55% {
    opacity: 0.1;
  }
}

.flackernd {
  animation: flackern 1s infinite;
  font-size: 3em; /* Schriftgröße nach Wunsch anpassen */
  font-weight: bold; /* Text wird fett */
}