/* Gemeinsamer Stil f�r den Hintergrund und Text */
body {
    background-color: #000;
    color: #fff;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    justify-content: center;
    align-items: center;
    
}

/* Stil f�r den Main */
main {
    padding: 0px; /* Urspr�ngliches Padding f�r den Hauptinhalt */
    margin: 0 auto; /* Zentriert den Container */
    max-width: 1200px; /* Maximalbreite des Containers */
    width: 95%; /* Maximalbreite Texte */
    align-items: center;
    text-align: center;
}

.text-center, .centered, .center-text {
    text-align: center;
}

.bold-text {
    font-weight: bold;
}
.bild  {
    align-items: center;
}

.blue-text {
    color: blue;
}

.large-text {
    font-size: 24pt;
}

.medium-text {
    font-size: 18pt;
}

.kursiv-text {
    font-style: italic;
}
h1 {
    text-align: center;
    color: blue;
}

@keyframes blink {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

.blink {
    animation: blink 0.75s infinite;
}

.blinklangsam {
    animation: blink 1.5s infinite;
}

/* Maximale Breite f�r Textcontainer */
.container {
    max-width: 1200px;
    margin: 0 auto; /* Zentriert den Container */
    padding: 0 5px; /* Innenabstand um sicherzustellen, dass der Text nicht direkt am Rand klebt */
}

/* Stil f�r den Kopfbereich */
header {
    background-color: #000;
    color: #fff;
    padding: 20px;
    text-align: center;
    position: relative; /* Position f�r Blitz-Animation */
    display: flex;
    flex-direction: column; /* Elemente vertikal ausrichten */
    align-items: center; /* Zentrieren der Elemente */
}

.header-images {
    display: flex;
    justify-content: center; /* Zentrieren der Bilder */
    align-items: center;
    margin-bottom: 5px; /* Abstand zwischen den Bildern und den Men�punkten */
}

.header-images .reloaded {
    width: 500px; /* Breite des Reloaded-Bildes */
    margin-right: 40px; /* Mehr Platz rechts von Reloaded */
}

.header-images .solid-rock {
    width: 150px; /* Breite des Solid Rock-Bildes */
    margin-right: 20px; /* Mehr Platz links von solid-rock */
}

/* Stil f�r die Auswahlfenster */
.menu-wrapper {
    display: flex;
    justify-content: center;
    background-color: black;
}

.menu-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%; /* �ndern Sie die Breite nach Bedarf */
    overflow-x: hidden; /* Horizontales Scrollen verhindern */
}

.menu-item, .link-item {
    color: white;
    text-decoration: none;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease; /* �bergangseffekt hinzuf�gen */
    padding: 10px 10px; /* Gleichbleibender Abstand um den Text */
    white-space: nowrap; /* Verhindert das Umbruchverhalten */
}

.link-item {
    font-size: 22px;
    text-align: center;
}

.menu-item:hover, .link-item:hover {
    font-weight: bold; /* Fette Schrift hinzuf�gen */
    color: blue;
}

/* Aktiven Men�punkt markieren */
.active {
    font-weight: bold; /* Fette Schrift f�r aktiven Men�punkt */
}

/* Stil f�r die Blitzbilder */
.lightning-img {
    display: none;
    position: absolute;
    width: 120px;
    height: 120px;
    pointer-events: none; /* Um Klicks auf die Blitzbilder zu verhindern */
    animation: lightning-animation 0.2s ease-in-out infinite alternate;
}

@keyframes lightning-animation {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.2;
    }
}

/* Stil f�r den Body */
.band-image {
    align-items: center;
    text-align: center;
    width: 300px;
}

.reloaded {
    width: 300px; /* Anpassung der Breite f�r kleinere Bildschirme */
    align-items: center;
    text-align: center;
}

/* Stil f�r die Fu�zeile */
footer {
    background-color: #000;
    padding: 10px;
    text-align: center; /* Zentriert den Text im Footer */
    margin: 20px auto; /* Zentriert den Footer */
    max-width: 1200px; /* Maximalbreite des Footers */
    color: #fff;
}

.footer-content {
    margin: 0 auto; /* Zentriert den Inhalt des Footers */
    max-width: 800px; /* Maximalbreite des Inhalts */
}

.footer-line {
    border-top: 1px solid white;
    margin-top: 20px; /* Abstand oberhalb der Linie */
}
.footer-item {
    color: white;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease; /* �bergangseffekt hinzuf�gen */
    padding: 5px 5px; /* Gleichbleibender Abstand um den Text */
    white-space: nowrap; /* Verhindert das Umbruchverhalten */
}

.footer-item:hover {
    font-weight: bold; /* Fette Schrift hinzuf�gen */
    color: blue;
}


/* Media Query f�r Bildschirme kleiner als 768px */
@media screen and (max-width: 768px) {

    /* �nderung im HEADER */
    .header-images .reloaded {
        width: 250px; /* Anpassung der Breite f�r kleinere Bildschirme */
        margin-right: 10px; /* Mehr Platz rechts von Reloaded */
    }

    .header-images .solid-rock {
        width: 60px; /* Anpassung der Breite f�r kleinere Bildschirme */
        margin-right: 10px; /* Mehr Platz links von solid-rock */
    }

    /* Die H�he des Headers anpassen, um den Inhalt der Men�punkte zu ber�cksichtigen */
    header {
        padding: 5px; /* Passe die H�he des Headers entsprechend an */
    }

    .lightning-img {
        width: 100px;
        height: 100px;
    }

    /* �ndere die Anzeige des Men�containers auf flex, um die Men�punkte nebeneinander anzuordnen */
    .menu-container {
        display: flex;
        flex-wrap: wrap; /* Erlaube den Zeilenumbruch der Men�punkte */
        justify-content: center; /* Zentriere die Men�punkte horizontal */
    }

    /* �ndere die Breite der Men�punkte, um Platz f�r mehrere nebeneinander zu schaffen */
    .menu-item {
        font-size: 14px;
        padding: 5px 5px; /* Gleichbleibender Abstand um den Text */
        width: 18%; /* Du kannst die Breite entsprechend deinen Anforderungen anpassen */
        margin: 1px; /* F�ge einen kleinen Abstand zwischen den Men�punkten hinzu */
    }
    

    main {
        padding-top: 0px; /* �ndere das Padding nach Bedarf */
        padding-bottom: 0px; /* �ndere das Padding nach Bedarf */
    }


    .band-image .reloaded {
        width: 200px; /* Anpassung der Breite f�r kleinere Bildschirme */
        text-align: center;
        align-items: center;

    }

    img {
        -webkit-user-select: none; /* Safari */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE10+/Edge */
        user-select: none; /* Standard */
    }
}

/* Stil f�r die Inhalte der Bandseite */
.band-member {
    text-align: center;
    padding: 10px;
}

.band-member b {
    display: block;
    font-size: 1.2em;
    margin-bottom: 5px;
}

.gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
}

.gallery-band {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
}

.gallery-band img {
    border: 2px solid #fff;
    max-width: 100%;
    align-items: center;
    transition: transform 0.3s, border-color 0.3s;
}

.gallery img.large {
    width: 400px;
    align-items: center;
}

.gallery img.small {
    width: 200px;
    align-items: center;
}

.gallery-band img.small {
    width: 200px;
    align-items: center;
}

.gallery-band img.small:hover {
    transform: scale(1.1);
    border-color: blue;
    cursor: pointer;
}

.names {
    text-align: center;
    padding: 20px;
}

.names a {
    color: #fff;
    text-decoration: none;
    font-size: 1.2em;
    margin: 0 10px;
}

.names a:hover {
    text-decoration: underline;
}

.back-link {
    text-align: center;
    margin-top: 20px;
}

/* Stil für die Galerie-Vorschaubilder */

.gallery-item {
    text-align: center;
    align-items: center;
}

.gallery-fotoauswahl {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
    width: 300px;
}

.gallery-fotoauswahl img {
    border: 2px solid #fff;
    max-width: 100%;
    transition: transform 0.3s, border-color 0.3s;
}

.gallery-fotoauswahl img:hover {
    transform: scale(1.1);
    border-color: blue;
    cursor: pointer;
}

.gallery-foto {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 10px;
    max-width: 400px;

}

.gallery-foto img {
    border: 2px solid #fff;
    align-items: center;
    max-width: 100%;

}

.bildunterschrift {
    margin-top: 4px;
    color: white;
}



/* Stil f�r Eingabegruppen auf der G�stebuchseite */
.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
}

.input-group input[type="text"],
.input-group input[type="email"],
.input-group textarea,
.input-group input[type="submit"] {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #fff;
    background-color: #333;
    color: #fff;
}

.input-group textarea {
    height: 150px;
}

.input-group input[type="submit"] {
    cursor: pointer;
    background-color: #007bff;
    border: 1px solid #007bff;
    transition: background-color 0.3s ease;
}

.input-group input[type="submit"]:hover {
    background-color: #0056b3;
}