header-alert suche-icon

.important-info-wrapper
{

}

#important-info-box {
   transition: all 0.3s;
   padding: 0px 30px 4vh 30px;
   container-name: importantInfoBoxContainer;
   container-type: inline-size;
}

#important-info-box.hidden {
  height: 0px;
  overflow: hidden;
  visibility: hidden;
  padding: 0px 30px;
}
#important-info-box .important-info-title {
    font-size: calc(var(--fliesstext-size));
    line-height:  1.1em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    margin-bottom: var(--bottomGap);
}
#important-info-box .important-info-date {
    font-size: calc(var(--fliesstext-size));
    line-height:  1.1em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    margin-bottom: var(--bottomGap);
}
#important-info-box .important-info-artist {
    font-size: calc(var(--fliesstext-size));
    line-height:  1.1em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    margin-bottom: var(--bottomGap);
    color: var(--semmel-red);
}



.important-info-liste-wrapper, .important-info-short-liste-wrapper {
    display: grid;
    container-type: inline-size;
    gap: 2rem;
  }

  .important-info-liste .important-info-title,
  .important-info-content-wrapper .important-info-title{
    font-size: var(--titelSize);
    font-size: var(--image_sub_text);

    font-size: calc(var(--titelSize)*1.4);
    line-height:  1.2em;

    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin-bottom: var(--bottomGap);
}

.header-alert.hinweis-icon,  .header-alert.suche-icon {
  background: var(--semmel-red);
  width: var(--button-size);
  border-radius: 100rem;
  aspect-ratio: 1 / 1;
  justify-self: end;
}

.header-alert::after {
  content: '';
  background-color: white;
  mask-repeat: no-repeat;
  width: var(--button-size);
  height: var(--button-size);
  background-repeat: no-repeat;
  background-position: right center;
  transition: all .3s ease;
  position: relative;
  display: flex;
  mask-repeat: no-repeat;
}

.header-alert {
  cursor: pointer;
}


.important-info-short-liste-wrapper .important-info {
  transition: all .2s ease-in-out;
}

.important-info-short-liste-wrapper .important-info:hover {
  transform: scale(1.02);
}

.important-info-short-liste-wrapper .important-info:hover > .important-info-title {
  color: var(--semmel-red);
}





a.important-info-link:hover:after {
  transform: rotate(90deg);
  background-color: var(--semmel-red);
}


a.important-info-link {
  font-size: .8em;
  line-height: 1em;
  font-weight: 500;
  text-transform: uppercase;
  _padding: 5px;
  _border: solid 1px #000;
  _border-radius: 100em;
  position: relative;
  padding-right: calc(var(--button-size) * 1.0);
  display: block;
  width: fit-content;
  margin-bottom: 15px;
  font-weight:600;
}

a.important-info-link::after {
  content: '';
  width: calc(var(--button-size) * .5);
  height: calc(var(--button-size) * .5);
  background-repeat: no-repeat;
  background-position: left center;
  transition: all .3s ease;
  display: flex;
  background-color: black;
  mask-repeat: no-repeat;
  right: calc(var(--button-size) * 0.4);
  top: -2px;
  position: absolute;
  mask-image: url('data:image/svg+xml;charset=UTF-8,<svg id="pfeil-icon" class="pfeil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><polygon display="inline" style="enable-background:accumulate; fill:white;" points="70.6,47.6 47.6,24.6 36.1,36.1 59.1,59.1 36.1,82.1 47.6,93.6 70.6,70.6 82.1,59.1"/></svg>');
}



@container importantInfoBoxContainer ( min-width: 600px ) {
  .important-info-short-liste-wrapper {
    grid-template-columns: 1fr 1fr;
  }
}

@container importantInfoBoxContainer ( min-width: 800px ) {
  .important-info-short-liste-wrapper {
    grid-template-columns: 1fr 1fr 1fr;
  }
}  


@container importantInfoBoxContainer ( min-width: 1671px ) {
  .important-info-short-liste-wrapper {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
} 



.important-info-wrapper .newsHeader {
  margin-top: 5vh;
}


/*--------------------------LIST-----------------------------------------*/

.important-info-liste-wrapper {
	container-name: importantInfoContainerr;
    container-type: inline-size;
}

.important-info-image img {
  width: 100%;
}


.important-info-liste-wrapper  .important-info {
  border-bottom:1px solid var(--lightlineColor);
  margin:2vh 0;
  padding: 2vh 0;
  padding-top:0;
}

.important-info-links {
  margin-top: 5vh;
}  



@container importantInfoContainerr (min-width: 200px) {
  .important-info-image {
     display:none;
  }
}

@container importantInfoContainerr (min-width: 600px) {
    .important-info-image {
        _width: 100%;
        display:flex;
    }
    .important-info-content-wrapper {
        _width: 100%;
        _padding-left: 0px;
    }
    /*
    .important-info 
    {
        padding-right: 30px;
        padding-left: 30px;
    }
    */
    .important-info {
        _display: block;
    }
    .news-links {
        display: block;
    }
}


@container importantInfoContainerr (min-width: 700px) {
    .important-info-image {
        _width: 50%;
    }
    .important-info-content-wrapper {
        _width: 50%;
    }
    /*
    .important-info 
    {
        padding-right: 30px;
        padding-left: 30px;
    }
    */
    .important-info {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 2rem;
    }
    .important-info-content-wrapper {

        _padding-left: 25px;
     }
     .news-links
     {
         display:grid;
         grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
     }   
     .news-links>a{
       display:none;
     }
     .newsTitel {
      font-size: calc(var(--titelSize)*1.2);
      }
}
@container importantInfoContainerr (min-width: 1200px) {
    .newsTitel {
    font-size: calc(var(--titelSize)*1.4);
    }
}
@container importantInfoContainerr (min-width: 1800px) {
    .important-info-image {
        _width: 25%;
    }
    .important-info-content-wrapper {
        _width: 75%;
    }
    .important-info 
    {
        padding-right: 30px;
        padding-left: 30px;
    }
    .important-info {
        _display: flex;
    }
    .important-info-content-wrapper {

        _padding-left: 25px;
    }
    .news-links
    {
        display: block;
    }


        
}

@container importantInfoContainerr (min-width: 1900px) {
    .important-info
    {
        padding-right: 0px;
        padding-left: 0px;
    }

    .important-info {
        _display: flex;
    }
    .important-info-content-wrapper {
        padding-left: 25px;
    }

    .news-links
    {
        display: block;
    }
}


/*--------------------------READER-----------------------------------------*/
.important-info-wrapper, .important-info-liste-wrapper {
  padding: 30px;
}

.important-info-wrapper-reader .important-info-title, .important-info-content-wrapper .important-info-title {
  margin-top: 0px;
  margin-bottom: 5px;
}

.important-info:hover > .important-info-wrapper-reader .important-info-title, .important-info:hover >  .important-info-content-wrapper .important-info-title {
  color: var(--semmel-red);
}


.important-info-wrapper-reader {
  container-name: importantInfoWrapperReaderContainerr;
  container-type: inline-size;
}

@container importantInfoWrapperReaderContainerr (min-width: 1900px) {
  .important-info-content
  {
      padding-right: 0px;
      padding-left: 0px;
  }
}  

@container importantInfoWrapperReaderContainerr (min-width: 900px) {
  .important-info-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
}
}