/* Grundlegende Einstellungen für den gesamten Viewport */
html{
    
    height: 100%; /* Stellt sicher, dass HTML und Body die volle Höhe einnehmen */
    margin: 0;
    padding: 0;

    /* Das Hintergrundbild festlegen */
    background: url('pix/back.jpg') no-repeat left top fixed;
    background-size: contain;
    
    /* Standard-Hintergrundfarbe, falls das Bild nicht geladen werden kann */
    background-color: #000000;
}



.flex-container {
    display: flex; /* Aktiviert Flexbox */
    justify-content: space-around; /* Verteilt den verfügbaren Platz gleichmäßig */    
}

.flex-container > div {    
    padding: 15px;
    /*margin-top: 20%; /* Abstand von oben */
    flex: 1; /* Erlaubt den Divs, den verfügbaren Platz gleichmäßig einzunehmen */
}


img {
    display: block;
    max-width: 100%;
    height: auto;
}


#bandtext {    
    font-family:'Courier New', Courier, monospace;
    font-size: 12pt;
    text-align: left;    
    padding: 10px;        
    color: white;
    text-shadow: 2px 2px 4px #000000;    
}

#fb {    
    margin-top: 15px;    
}

#logo{
     
    left: 400px;
}

@media (max-width: 600px) {
    .flex-container {
        flex-direction: column; /* Ändert die Ausrichtung von horizontal zu vertikal */
    }

    #bandtext, #fb, #log, #bandfoto {
        margin: 10px 0; /* Fügt vertikalen Abstand hinzu, entfernt horizontalen */
    }
}



.video-container {
    width: 100%;
    max-width: 800px; /* Optionale Maximalbreite */
    margin: 0 auto;
}

.video-container video {
    width: 100%;
    height: auto;
}

#videotext {    
    font-family:'Courier New', Courier, monospace;
    font-size: 10pt;
    text-align: left;    
    padding: 10px;        
    color: white;
    text-shadow: 2px 2px 4px #000000;    
}