/* General Styles */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 18px;
    color: #333;
}

header, footer {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: #F2C020;
    text-decoration: none;
}

nav ul li a:hover {
    text-decoration: underline;
}

section {
    max-width: 70%;
    margin: 0 auto;
    padding: 60px 0;
}

section a {
   color: #F2C020;
   text-decoration: none;
}

section a:hover {
    color: #fff;
    text-decoration: underline;
}

h2 {
    text-align: center;
    color: #333;
    border-bottom: 3px solid #F2C020;
    display: inline-block;
    padding-bottom: 10px;
}

/* Dates */
#dates {
    background-color: #fff;
    text-align: center;
    overflow: hidden;
    padding: 0;
    margin: 0 auto; /* Center the section horizontally */
}

.full-width-image {
    width: 100%;    /* Makes the image full width */
    height: auto;   /* Maintains the aspect ratio */
    display: block; /* Removes any default inline spacing */
}


/* Live Section */
#live {
    background-color: #fff;
    padding: 40px 0;
    text-align: left;
    width: 70%;
    margin: 0 auto;
}

#live h2 {
    color: #333;
    font-size: 28px;
    text-align: center;
    border-bottom: 2px solid #F2C020;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Countdown Timer */
#countdown {
    font-size: 24px; /* Set the font size for the countdown */
    color: #000;
    text-align: left;
    margin-bottom: 20px; /* Add some space between the countdown and the list */
}

/* Live Section List */
.live-list {
    list-style-type: none; /* Remove the default list style */
    padding: 0;
    font-size: 24px; /* Match the font size with the countdown */
}

.live-list li {
    margin-bottom: 10px; /* Add some spacing if more items are added */
    color: #000; /* Set the text color */
}

.live-list span {
 font-size: 16pt;
}

.live-list .old {
   color: #bbb; /* Set the text color */ 
   margin-top: 50px;
   text-decoration: line-through;
}

/* About Section */
#about p {
    text-align: left;
}

#about p a {
    color: #F2C020;
    text-decoration: none;
}

#about p a:hover {
    text-decoration: underline;
}


#band {

}

h2 {
    margin-bottom: 20px; /* Abstand zwischen der Überschrift und den Bildern */
}

.band-blocks {
    display: grid;
/*    grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
grid-template-columns: repeat(5, 2fr); /* 3 Spalten */
    gap: 20px; /* Abstand zwischen den Bildern */
    justify-content: center;
    max-width: 1200px; /* Maximalbreite des gesamten Bereichs */
    margin: 0 auto; /* Zentrieren des Band-Blocks */
}

.band-member {
    text-align: center;
}

.band-member img {
    max-width: 100%;
    height: auto;
}

.band-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 10px; /* Abstand zwischen Bild und Info */
}

.band-info .top {
    background-color: #fff;
    color: #333;
    width: 100%;
    padding: 10px;
}


.band-info .bottom {
    background-color: #fff;
    color: #000;
    width: 100%;
    padding: 10px;
}

/* Footer */
footer ul {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: flex;
    justify-content: center;
}

footer ul li {
    margin: 0 15px;
}

footer ul li a {
    color: #F2C020;
    text-decoration: none;
}

footer ul li a:hover {
    text-decoration: underline;
}


/* Kontakt Section */
#kontakt-container{
 background-color: #000;
 max-width: 100%;
}

#kontakt {
    background-color: #000; /* Set the background color to black */
    color: #000; /* Set the text color to black */
    padding: 20px 0;
    text-align: left;
    width: 70%;
    margin: 0 auto; /* Center the section content */
}

#kontakt h2 {
    color: #fff;
    margin-bottom: 30px; /* Space between the headline and the blocks */
    font-size: 28px;
    text-align: center; /* Center-align the headline */
    border-bottom: 2px solid #F2C020; /* Underline the headline */
    padding-bottom: 10px; /* Add some padding below the headline */
}

/* Flexbox container for the blocks */
.kontakt-blocks {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* Allows blocks to wrap on smaller screens */
}

.kontakt-block {
    padding: 20px;
    margin: 10px;
    width: 18%; /* Reduce the width to keep blocks next to each other */
    min-width: 200px; /* Ensures a minimum block width */
    text-align: center; /* Center-align the text inside the blocks */
}

.kontakt-block .icon {
    font-size: 40px; /* Adjust size based on the icon you choose */
    margin-bottom: 10px;
}

.kontakt-block p {
    color: #fff;
    font-size: 18px;
    margin: 10px 0;
}

.kontakt-block a {
    color: #F2C020; /* Accent color for the email addresses */
    text-decoration: none;
}

.kontakt-block a:hover {
    text-decoration: underline;
}

/* Social Media Icons */

.social-icon a{
    color: #F2C020; /* Use the accent color for the icons */
    font-size: 20px; /* Size of the icons */
    margin: 0; /* Space between the icons */
    text-decoration: none; /* Remove underline */
}

.social-icon a:hover {
    color: #fff; /* Change color on hover */
}

/* Invisible Container Styles */
.invisible-container {
    display: none; /* Hide containers by default */
    width: 70%;
    margin: 20px auto; /* Center the containers */
    font-size: 18px; /* Match font size with the Über uns section */
    color: #000; /* Set text color to black */
    background-color: #f9f9f9; /* Optional: Light background color */
    padding: 20px;
    border-radius: 8px; /* Optional: Rounded corners */
}

.invisible-container h2 {
    color: #F2C020; /* Accent color for the headings */
    font-size: 24px; /* Slightly larger font for section headings */
    margin-bottom: 15px; /* Space below headings */
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .kontakt-blocks {
        flex-direction: column; /* Stacks the blocks vertically on smaller screens */
    }

    .kontakt-block {
        width: 80%; /* Increase the width on smaller screens */
        margin: 10px auto; /* Center the blocks */
    }
}