@import url(https://db.onlinewebfonts.com/c/38025932dce48e268882d955f7a66826?family=Alte+Haas+Grotesk);

@font-face {
    font-family: "Alte Haas Grotesk";
    src: url("https://db.onlinewebfonts.com/t/38025932dce48e268882d955f7a66826.eot");
    src: url("https://db.onlinewebfonts.com/t/38025932dce48e268882d955f7a66826.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/38025932dce48e268882d955f7a66826.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/38025932dce48e268882d955f7a66826.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/38025932dce48e268882d955f7a66826.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/38025932dce48e268882d955f7a66826.svg#Alte Haas Grotesk")format("svg");
}

@font-face {
    font-family: 'ABCHoneymoon';
    src: url('../fonts/ABCHoneymoonMix-Regular-Trial.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }


body {
    padding: 0;
    margin: 0;
    font-family: "Alte Haas Grotesk";
    font-optical-sizing: auto;

}

.honey {
    font-family: "ABCHoneymoon";

}

.intro-video {
    position: fixed;
    inset: 0;
    z-index: 15;
    background: black;
    overflow: hidden;
    transition: opacity 4s ease;
}

.intro-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.intro-video.fade-out {
    opacity: 0;
    pointer-events: none;
}

.siteTitle {
    /* font-family: "ABCHoneymoon";
    font-size: 8em; */
    position: fixed;
    z-index: 20;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
           /* border: 1px solid green; */  
    /* white-space: nowrap; */
}
.titelmobile{
    display: none;
}

.siteTitle.clickable {
    cursor: pointer;
}

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

.itemcontainer{
    /* border: 1px solid blue; */
    height: 45vh;
    width: 100vw;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
 
}
.scrollcontainer{
    /* border: 1px solid green; */
    flex: 1;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;

}

.scrollcontainer img {
   
    height: 100%;
    width: auto;
    max-width: 100%;
    flex-shrink: 0;
}



.artwork-title-link {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

.workdescription-link {
    display: block;
    text-decoration: none;
    color: inherit;
}


.workdescription{
    height: auto;
    width: 100vw; 
    display: flex;   
    word-break: break-word;
    /* /* /* background-color: black;
    border-radius: 1px solid red; */
}

.Upcoming {
    height: auto;
    width: 95vw; 
    display: flex;   
    word-break: break-word;
   
}

.upcoming-banner {
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 2em;
  line-height: 2em;

}


.upcoming-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  animation: marquee 60s linear infinite;
}

.up-item {
  display: inline-block;
  white-space: nowrap;
  padding-right: 2em; 
  font-size: 0.9em;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.category{
    flex-basis: 15%;    
    height: 100%;
    margin-bottom: 1.75vh;
    /* border: 1px solid blue; */
    display: inline-block;
    line-height: 1em;
    font-size: 1.4em;
    line-height: 0.9em;
    margin-top: 1.25vh; 
    
 
}

.desktop-off {
    display: none;
          }

          .upcoming-mobile {
  display: none;
  word-break: none;
}

.category span {
    display: block;
    text-align: center;
    pointer-events: none;
}

/* .categoryUpcoming {
margin-left: -20px;
} */

/* .upcoming {
    margin-left: 20px;
} */

.details {
        display: inline;  
        font-size: 0.9em;         
        flex-basis: 85%;
        line-height: 1.2em;  
        margin-top: 1.5vh;
        margin-bottom: 1.75vh;
        margin-left:1.5vw;
       
        /* border: 1px solid blue; */


}

.details span {
    display: inline;
    margin-right: 2em;
}

summary {
    list-style: none;
  }
summary::-webkit-details-marker {
    display: none;
  }
 .detailsTab{
   padding-left: 15vw;
   font-size: 3em;
   width: 100vw;
 }
 .detailsTabTab{
   padding-left: 10vw;
   font-size: 3em;
 }



.artwork-title {
    text-transform: uppercase;
}

.place {
    text-decoration: underline;
}

.specs .label {
    text-decoration: underline;
    white-space: nowrap;
    /* border: 1px solid red; */
}

.heartcontainer {
    position: fixed;
    bottom: 0;
    right: 5vh;

    /* border: 1px solid red; */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.heartbutton {
    position: relative;
    width: 7vw;
    display: inline-block;
}

.heartbutton img {
    display: block;
    width: 100%;
    height: auto;
}

.herzlinks {
    transform: rotate(-10deg);
}

.herzrechts {
    transform: rotate(10deg);
}

.herzclicklinks {
    position: absolute;
    top: 30%;
    left: 45%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-size: 1.2em;
        margin:0;

}

.herzclickrechts {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(5deg);
    font-size: 1.2em;
    margin:0;

}

/*Works Section */



.spec-item {
    padding-right: 2em;
    /* border: 1px red solid; */
        color: inherit;
        white-space: nowrap;

}

.spec-item:last-child {
    padding-right: 0em;
}

.worksitemcontainer{
    /* border: 1px solid blue; */
    height: auto;
    width: 100vw;
    position: relative;
}

.workscrollcontainer {
    height: 100vh;
    width: 100vw;
    /* border: 1px solid pink; */
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
}



.workdescriptionoverlay{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 95vw;
    /* padding: 20px; */
    display: flex;
    z-index: 10;
    color: white;
    mix-blend-mode: difference;
    margin-bottom: 1.25vh;

}

.workdescription-mobile{
    display: none;
}



/*Press Section */





.introtext {

    /* border: 1px solid green; */
    width:75vw;
    height: auto;
    font-size: 1.75em;
    margin-bottom: 2vh;
    margin-top: 2vh;
    margin-left: 15vw;
    margin-right: 5vw;
    line-height: 1.25em;
}






.pressdetails {
    width: 75vw;
    height: auto;
    margin: 5vh;
    display: flex;
    gap: 3em;              
    white-space: nowrap;    
    overflow: hidden;  
  
    }
    
    .pressdetails span {
        display: inline-block;
    }

    .pressdetailsImprint {
        width: 75vw;
        margin: 5vh;
        /* border: 1px solid ; */
        
    }
    
    .imprintLine {
        display: flex;
        gap: 3em;
        white-space: nowrap;
        cursor: default;
    }
    
    /* nur IMPRINT klickbar machen */
    .imprintTrigger {
        text-decoration: underline;
        cursor: pointer;
    }
    
    /* wichtig: nur das erste Element soll sich wie summary verhalten */
    .imprintLine::-webkit-details-marker {
        display: none;
    }
    
    /* optional: Inhalt darunter */
    .imprintContent {
        margin-top: 1em;
    }


.pressitemcontainer{
    /* border: 1px solid red; */
    
    height: auto;
    width: 100vw;
    position: relative;
}

.close {
    font-family: "ABCHoneymoon";
    color: white;
    font-size: 1.25em;
    text-align: center;
    display: block;
}




@media only screen and (min-width: 601px) {
    .siteTitle{
        width: 100%;
    }
    .heartcontainer_work_mobile{
        display: none;
    }
}


@media only screen and (max-width: 600px) {

    html, body {
        font-size: 3vw;
        
      }

      .siteTitle {
 
              /* writing-mode: vertical-rl; */
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              /* display: flex;
              align-items: center;
              justify-content: center; */
              /* height: 95vh;  */
          
          }
          .titeldesktop{
    display: none;
}
.titelmobile{
    display: block;
    height: 100vh;

}

          .details {       
            flex-basis: 100%;
            line-height: 1.2;  
            margin-left: 5vw;
            /* margin-right: 3em; */
            /* border: 1px solid blue; */
    }

    .details span {
        margin-inline-end: 2em;
    }

   

    .workdescriptionoverlay {
        display: none;
      }
    
 
      .workdescription-mobile {
        display: flex;
        flex-shrink: 0;
        width: auto;
        height: 100vh;
        margin-left: 2vh;
        color: black;
        /* margin-bottom: 25vh; */
        /* box-sizing: border-box; */
        flex-direction: row;
        justify-content: center;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        transform: rotate(180deg);


    /* display: inline-flex;
    flex: none;
    align-self: flex-start;
    max-height: max-content; */
    /* align-self: flex-start;
    min-height: 0;
    height: auto; */

    /* transform: rotate(-90deg); */
    /* transform-origin: top left; */

    }
    .category-turned{
        /* width: 15vh; */
        flex-basis: 15%;  
        margin-bottom: 1.75vh;
        font-size: 1.4em;
        line-height: 0.9em;
        margin-top: 1.25vh;
    }
    .details-turned{
        /* width:85vh; */
        flex-basis: 85%;  
        margin-left: 5vw;
    font-size: 0.9em;
    line-height: 1.2em;
    margin-top: 1.5vh;
    margin-bottom: 1.75vh;
    }
          .mobile-off {
            display: none !important;
            /* border: 1px solid yellow; */
          }
          .close {
    color: black;
}


  .upcoming-mobile {
    display: block;
    margin-left: auto;   
   
    word-break: keep-all;
  }

  .categoryUpcoming {
    margin-left: -20px; /* dein linker shift bleibt */
  }

  .herzclicklinks {

    font-size:0.9em;


}

.herzclickrechts {

    font-size: 0.9em;


}

.heartbutton {

    width: 11vw;
  
}

.pressdetails {
    width: 90vw;
    margin: 5vw;

    flex-wrap: wrap;
    white-space: normal;

    gap: 1em;
    overflow: visible;
  }

    .imprintLine {
    display: flex;
    flex-wrap: wrap;
    white-space: normal;
    gap: 0.5em 1.5em;
  }

  .imprintLine span {
    display: inline-block;
  }

  .break {
  flex-basis: 100%;
}

.introtext {

    font-size: 1.5em;

}




 
    }