html, body {
      height: 100%;
      margin: 0;
    }

body {
      display: flex;
      flex-direction: column;
      /*overflow-x: hidden;*/
      word-wrap: break-word;
      overflow-wrap: anywhere;
    }

h1 {
      font-family: "Inter", sans-serif;
      font-optical-sizing: auto;
      font-weight: 600;
      font-style: normal;
      font-size: 1.5em;
      margin-bottom: 0.5em;
      margin-top: 0px;
    }

a {
      /*color: #71BF44;*/
      color: #32cd32;
      text-decoration: underline;
    }
    
a:hover {
      color: black;
      text-decoration: underline;
    }

a:active {
      color: black;
      text-decoration: none;
    }

a:visited {
      color: #32cd32;
      text-decoration: underline;
    }

a:visited:hover {
      color: black;
      text-decoration: underline;
    }

/* Releases-Expand */    

a.releases {
      color: black;
      text-decoration: none;
    }
    
a.releases:hover {
      color: black;
      text-decoration: underline;
    }

a.releases:active {
      color: #32cd32;
      text-decoration: none;
    }

a.releases:visited {
      color: black;
      text-decoration: none;
    }

a.releases:visited:hover {
      color: black;
      text-decoration: underline;
    }


p {
      font-family: "Inter", sans-serif;
      font-optical-sizing: auto;
      font-weight: 300;
      font-style: normal;
      font-size: 1.5em;
      margin: 0px;
      margin-bottom: 20px;
    }

.p-no-margin {
      font-family: "Inter", sans-serif;
      font-optical-sizing: auto;
      font-weight: 300;
      font-style: normal;
      font-size: 1.5em;
      margin: 0px;
    }

.footer {
      font-family: "Inter", sans-serif;
      font-optical-sizing: auto;
      font-weight: 300;
      font-style: normal;
      font-size: 0.7em;
      text-align: left;
      margin: 0px;
    }

.calendar-p {
      font-family: "Inter", sans-serif;
      font-optical-sizing: auto;
      font-weight: 300;
      font-style: normal;
      font-size: 1.5em;
      margin: 0px;
    }

/* #container { 
      width: 100%; 
      max-width: 1600px; 
      margin: auto; 
      margin-top: 20px;
      margin-bottom: 20px;
      flex: 1;
     } */

.container { 
    /*
      width: calc(100% - 40px); */
      width: 100%;
      max-width: 1600px; 
      margin: auto;
      padding: 20px;
      box-sizing: border-box;
      margin-bottom: 40px;
      flex: 1;
     }

.hidden { display: none; }

#collapsible {
      height: auto;
      overflow: hidden;
      transition: height 0.4s ease;
    }

#collapsible.collapsed {
      height: 100px;
    }

a.toggle-link {
      display: inline-block;
    }

/* Hide elements with class 'hide-on-small' when screen width is below 600px */
@media (max-width: 1200px) {
      .hide-on-small {
        display: none;
      }
    }



/* VIELE BILDER - 33% - 50% - 100% */

.image-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* This adds a 10px space between the images */
    align-items: flex-start; /* Align items to the top */
    box-sizing: border-box;
}

img.responsive {
    width: calc(33.333% - 6.7px); /* Adjust width to account for the gap */
    height: auto; /* maintain aspect ratio */
}

@media (max-width: 900px) {
    img.responsive {
        width: calc(50% - 5px); /* Adjust width to account for the gap */
    }
}

@media (max-width: 600px) {
    img.responsive {
        width: 100%;
    }
}



/* BILD zentriert 50% */
/*
.image-center-container {
    width: 100%;
    text-align: center;
    align-content: center;
}

img.center {
    display: block;
    width: 50%; /* Adjust width to account for the gap */
    /*min-width: 800px;
    margin-left: auto;
    margin-right: auto;
    height: auto; /* maintain aspect ratio */
/*}

@media (max-width: 900px) {
    img.center {
        width: 100%;
        min-width: 100%;
        margin: 0px;
    }
}
*/

/* BILD links 50% */
/*
.image-left-container {
    width: 100%;
    text-align: left;
    align-content: left;
}

img.left {
    display: block;
    width: 50%; /* Adjust width to account for the gap */
    /*min-width: 800px;
    margin-left: 0;
    margin-right: auto;
    height: auto; /* maintain aspect ratio */
/*}

@media (max-width: 900px) {
    img.left {
        width: 100%;
        min-width: 100%;
        margin: 0px;
    }
}
*/

/* VIDEO DIV (ohne styling) */

.video-div {
    position: relative;
    width: 100%; 
    height: 0; 
    padding-bottom: 56.25%; 
    margin-top: 15px;
    margin-bottom: 15px;
}

.video-iframe {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
}

/* VIDEO zentriert 50% */
/*
.video-center-container {
    width: 100%;
    text-align: center;
    align-content: center;
}

.video-center {
    display: block;
    width: 50%; /* Adjust width to account for the gap */
/*    min-width: 800px;
    margin-left: auto;
    margin-right: auto;
    height: auto; /* maintain aspect ratio */
/*}

@media (max-width: 900px) {
    .video-center {
        width: 100%;
        min-width: 100%;
        margin: 0px;
    }
}
/*

/* VIDEO linksanliegend 50% */

/*.video-left-container {
    width: 100%;
    text-align: left;
    align-content: left;
}

.video-left {
    display: block;
    width: 50%; /* Adjust width to account for the gap */
    /* min-width: 800px;
    margin-left: 0;
    margin-right: auto;
    height: auto; /* maintain aspect ratio */
/*}

@media (max-width: 900px) {
    .video-left {
        width: 100%;
        min-width: 100%;
        margin: 0px;
    }
}/*

/* CONTENT in DIVs 50%*/

.column-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* This adds space between the columns */
    margin-bottom: 20px;
    margin-top: 20px;
    /*margin-top: 20px;*/
}

.column {
    flex: 1;
    min-width: calc(50% - 20px); /* Adjusting for the gap */
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}

.row {
    margin-bottom: 20px;
  }

@media screen and (max-width: 900px) {
    .column {
        flex: 100%;
        min-width: 100%; /* Full width on smaller screens */
    }
}



/* Auflistungen 33-66% (Calendar und Releases) */

.list-container {
    margin-bottom: 20px;
    margin-top: 20px;
}

.list-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* This adds space between the columns */
    padding-bottom: 20px;
    margin-bottom: 20px;
    border: 0px;
    border-bottom: 1px solid #32cd32;
  }

.list-rightcolumn {
    flex: 0 0 calc(67.33% - 20px);
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
    vertical-align: top;
}

.list-leftcolumn {
    flex: 0 0 calc(33.33% - 20px);
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
    vertical-align: top;
}

@media screen and (max-width: 700px) {
    .list-leftcolumn,
    .list-rightcolumn {
        flex: 100%;
        min-width: 100%; /* Full width on smaller screens */
    }
}