/* ----------------------------------------------------------------------------------------*/
/* ----------------------------------------desktop------------------------------------------*/
/* ----------------------------------------------------------------------------------------*/

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    background-color: #c2c2c2; /* Hintergrundfarbe */
    font-family: Helvetica; /*Schriftart*/
    font-weight: bold; /*Schriftstaerke*/
    margin-left: 2vw; /*Abstand Body links*/
    margin-right: 2vw; /*Abstand Body rechts*/
    margin-top: unset;
    padding-bottom: 30vh; /*Abstand zum unteren Rand der Seite*/
    color: white; /*Schrift Farbe*/
    a {
    color: white; /* Standardfarbe für Links */
    text-decoration: none; /* Unterstreichung entfernen */       
}
    a:hover{
            color: dimgrey;
    }
}

header {
    margin-bottom: unset;
    margin-top: 20px; /*Abstand Header oben*/
    position: relative;
    line-height: 1.4;
}

header a {
    text-decoration: none;
    color: unset;
}

header a:hover {
    
}

#logo {
    height: 33px; /*Logo Groesse*/
}

#information {
    list-style-type: none;
    column-count: 2;
    column-gap: 50px; /*Abstand zwischen Adresse und Mail*/
    padding: unset;
    float: right;
    margin: unset;
    position: absolute;
    bottom: 0;
    right: -75px; /*Abstand Info zur rechten Kante*/
    font-size: 0.83em;
}

.exhibition {
    display: inline-block;
    width: 100%;
    font-size: 0.83em;
}


.imprint {
    margin-top: :50px;
    display: inline-block;
    width: 50%;
    font-size: 0.83em;
}


main ul {
    margin-top: 16px;
    list-style-type: none;
    column-count: 3;
    width: 70%;
    float: right;
    line-height: 1.4;
}

/* Container für zwei Spalten */
.two-columns {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Die rechte Spalte ist doppelt so breit wie die linke */
    gap: 20px; /* Abstand zwischen den Spalten */
    width: 70%; /* Gesamtbreite des Containers */
    float: right;
    line-height: 1.4;
}

.two-columns2 {
   margin-top: 2px;
    display: block;
    gap: 20px; /* Abstand zwischen den Spalten */
    width: 70%; /* Gesamtbreite des Containers */
    float: right;
    line-height: 1.4;
}

/* Container */
#videoloopgrace {
    margin-top: 120px;
    margin-bottom: 30px;
  display: flex;
  justify-content: center; /* horizontal mittig */
  align-items: center;     /* falls du später vertikal zentrieren willst */
          /* Abstand nach oben und unten */
}

#videoloopgrace video {
  width: 600px;            /* fixe Breite (z. B. 600 px, kannst du anpassen) */
  height: auto;            /* Höhe passt sich automatisch an */
  object-fit: cover;
  display: block;
       filter: brightness(1.01);
}

#image-loop-2503-container {
    width: 100%; /* Same width as your video/image */
    max-width: 800px; /* Same max-width */
    
    /* Define a fixed height for the container. IMPORTANT: Adjust this value */
    /* This height should be large enough to accommodate your tallest image comfortably, */
    /* without being cropped, but not so large it creates excessive empty space. */
    height: 450px; /* <-- **Adjust this height as needed** */
    
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    
    margin: 60px auto 20px auto; /* Existing margins: top, right/left auto, bottom */
    overflow: hidden; /* Hide any overflow if images are slightly larger than the container */
    /* border: 1px solid red; Uncomment for debugging to see the container bounds */
}


.image-loop-2503 {
    max-width: 100%; /* Ensure image scales down to container width */
    max-height: 100%; /* Ensure image scales down to container height */
    
    /* This is key: 'contain' scales the image down to fit *entirely* within the container, */
    /* preserving its aspect ratio. It will not crop the image. */
    object-fit: contain; 
    
    display: block; /* Remove any extra space below the image */
}

/* Updated: Container for the looping images to maintain fixed dimensions */
#image-loop-2502-container {
    width: 50%; /* Same width as your video/image */
    max-width: 800px; /* Same max-width */
    
    /* Define a fixed height for the container. IMPORTANT: Adjust this value */
    /* This height should be large enough to accommodate your tallest image comfortably, */
    /* without being cropped, but not so large it creates excessive empty space. */
    height: 450px; /* <-- **Adjust this height as needed** */
    
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    
    margin: 60px auto 20px auto; /* Existing margins: top, right/left auto, bottom */
    overflow: hidden; /* Hide any overflow if images are slightly larger than the container */
    /* border: 1px solid red; Uncomment for debugging to see the container bounds */
}


.image-loop-2502 {
    max-width: 100%; /* Ensure image scales down to container width */
    max-height: 100%; /* Ensure image scales down to container height */
    
    /* This is key: 'contain' scales the image down to fit *entirely* within the container, */
    /* preserving its aspect ratio. It will not crop the image. */
    object-fit: contain; 
    
    display: block; /* Remove any extra space below the image */
}






.img-invite {
     display: block;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1px;
    margin-bottom: 10px;
    object-fit: cover; /* Ensures the image covers the container area */
    object-position: center center; /* Center the image */
    clip-path: inset(8px); /* Crops 5px from all sides */
}




.img-arnaud {
    display: block;
   width: 32%;
   margin-left: auto;
   margin-right: auto;
   margin-top: 1px;
   margin-bottom: 0px;
   object-fit: cover; /* Ensures the image covers the container area */
   object-position: center center; /* Center the image */
       clip-path: inset(8px); /* Crops 5px from all sides */

}

.state {
    display: inline-block;
}

.title {
    display: inline-block;
    position: absolute;
    left: 14vw; /*Abstand Ausstellungstitel links*/
    
}

.title2 {
    display: inline-block;
    position: absolute;
    left: 14vw; /*Abstand Ausstellungstitel links*/
    
}



.date {
    width: 70%;
    float: right;
   
    
}

.date2 {
    width: 70%;
    float: right;
    
    
}

.docu {
    width: 70%;
    float: right;
    text-decoration: white;
    color: white;
}

docu :hover {
    text-decoration: underline;
}

#mobile-br {
    display: none;
}

/* Neuer Abstand für das zweite Exhibition */
.exhibition + .exhibition {
    margin-top: 80px; /* Increased top margin for more space */
}

.underline-link {
    text-decoration: underline;
}


.imprint {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: none; /* Standardmäßig versteckt */
    font-size: 0.83em;
    display: none;
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-box {
  position: relative;
  background: white;
  padding: 2rem;
  max-width: 90%;
  width: 800px;
    height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertikale Zentrierung */
  align-items: center;     /* Horizontale Zentrierung */
  text-align: center;
  font-family: inherit
  border-radius: 0px;
    display: none;      /* Sichtbar: show Unsichtbar: none */
}

.popup-close {
  position: absolute;
  top: 20px;
  right: 20px;
  border: none;
  background: none;
  font-size: 1rem;
  color: #c2c2c2;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
    font-weight: bold;
}

.popup-text {
  margin-top: 2rem;
  font-family: inherit;
  font-size: 1rem;
  color: #c2c2c2;
}

/* ----------------------------------------------------------------------------------------*/
/* ----------------------------------------mobile------------------------------------------*/
/* ----------------------------------------------------------------------------------------*/

@media only screen and (max-width: 680px) {
    
    
      .exhibition + .exhibition {
        margin-top: 40px;  /* Increased top margin for mobile */
    }
    
    .state {
        order: 1;
        margin-top: 80px;
    }
    
     .date {
        text-align: left;
        width: 100%;
        order: 2;
         line-height: 0.6;
    }
    
         .date2 {
        text-align: left;
        width: 100%;
        order: 2;
        line-height: ;
    }
    
    
    .title {
        position: relative;
        left: unset;
        display: block;
        order: 3;
        line-height: 0.5;
    }

      .title2 {
        position: relative;
        left: unset;
        display: block;
        order: 3;
        line-height: 1;
    }
    
    .img-arnaud {
        width: 100%;
        order: 4;
        margin-top: 10px; /*Abstand Bild nach oben*/
        margin-bottom: 10px; /*Abstand Bild nach unten*/
    }
    
    
    /* Updated: Mobile adjustments for the image loop container */
    #image-loop-2502-container {
        width: 100%;
        margin-top: 120px;
        margin-bottom: 20px;
        height: 300px; /* <-- **Adjust this height for mobile as needed** */
    }
    
        #image-loop-2503-container {
        width: 100%;
        margin-top: 30px;
        margin-bottom: -40px;
        
    }
    
    
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    body {
        margin-bottom: 1vh; /*Abstand zum unteren Rand der Seite*/
    }


    .two-columns {
        display: inline;
        order: 5;
    }

    
      .two-columns2 {
        display: inline;
        order: 5;
          width: 100%;
          margin-bottom: 50px;
    }

    #information {
        column-count: 1;
        position: relative;
        right: unset;
        text-align: right;
    }

    #logo {
        height: 35px; /*Logo Groesse*/
        margin-top: -4px;
    }

    header li:nth-child(3) {
        padding-top: 1em;
    }

    main ul {
      column-count: 1;
      text-align: left;
      width: 100%;
      order: 2;
      padding-left: unset;
    }

    main ul li {
        display: inline;
        white-space: nowrap;
    }

    main ul li::after {
        content: ",";
    }

    main ul li:last-child:after {
        content: "";
    }

    .exhibition {
        display: flex;
        flex-flow: column;
    }

   
    
     .docu {
        text-align: left;
        width: 100%;
        order: 5;
    }


    .img-invite {
        width: 100%;
        order: 5;
        margin-top: 10px; /*Abstand Bild nach oben*/
        margin-bottom: 10px; /*Abstand Bild nach unten*/
    }

    

    #mobile-br {
        display: block;
    }
    
}

.left-column {
    max-width: 700px; /* Begrenzt die maximale Breite des Textes */
}