#hero {
  display: flex;
  flex-direction: column;
   align-items: flex-start;
  gap: 1rem;
    & img {
        border-radius: 1em;
        }
     
    & #img-wrapper::after {
    display:block;
    
    padding-left: 0;   
    }
       
    }


@media (min-width: 700px) {
  #hero {
    flex-direction: row;
    
  }
}
#primairy-data
{
    container-type: inline-size;
margin-top: 0;

    width: 100%;
}

#primairy-data > li
{ display: flex;
flex-direction: row;
margin-bottom: 0.3em;
align-items: flex-start;
 & .label {
        flex: 0 0 17ch;
        display: block;
        line-height: 1.3em;
    }
    
    & .label::first-letter {
        text-transform: uppercase;
    }
}



@container (max-width: 600px) {
  #primairy-data > li {
      
    flex-direction: column; /* jouw 'small' gedrag */
  }
    #primairy-data > li .label {
    color: rgb(75,75,75);    
    flex: none;
  }
}

.inline-value {
    display: flex;
    flex-wrap: wrap;
    gap: 0ch 0.6ch;

    li:not(:last-child)::after {
        content: ",";
        }
    }


/*manuscript items */
.manuscriptgroup {
    display: flex;
    align-items: flex-start;
    gap: 1em;
    counter-increment: msgroup;
    margin-bottom: 1.5em;
    background-color: white;
    position: relative;
    padding: 1em;
    border-radius: 1em;
    box-shadow: 0 2px 8px 0 #0003;
    
    
}
.manuscriptgroup h3 {margin-top:0;margin-bottom: 0.4em;}




.manuscriptgroup > svg {
    color: rgba(var(--expertbluergb) / 0.1);
    width: clamp(4em, 8vw, 8em);
    height: auto;
    flex: 0 0 clamp(4em, 8vw, 8em);
    transition: all 0.6s ease;

}
.manuscriptgroup > img {
    width: clamp(4em, 8vw, 8em);
    height: auto;
    border-radius: 0.5em;
    flex: 0 0 clamp(4em, 8vw, 8em);
    
}


.manuscriptgroup:hover > svg {
    color: rgba(var(--expertbluergb) / 0.2);
    
}

.manuscriptgroup:hover > img {
    filter: brightness(110%);


}

.manuscriptgroup:hover::after {
    color: rgb(var(--vebredrgb) / 0.2);
}

.manuscriptgroup::after {
    content: counter(msgroup, decimal-leading-zero);
    font-family: "Bricolage Grotesque";
    font-variant-numeric: tabular-nums;
    color: rgb(var(--vebredrgb) / 0.1);
    transition: color 0.6s ease;
    position: absolute;
    font-size: clamp(2em, 5vw, 4em);;
    right: 0.2em;
    bottom: 0em;
    /*transform: translateY(-50%);*/
}

.manuscriptgroup span.role {
    padding-left: 1ch;
    font-size: 0.8em;
}

.manuscriptgroup ul  {
    
    margin: 0;
    padding: 0;
    
}

.manuscriptgroup ul li {
    line-height: 1.5em;
    
    list-style-position: inside;
    padding-left: 0;
    
}

.manuscriptgroup li.small {
    display: None;
}

.manuscriptgroup li.large a:hover {text-decoration: None;}


.function {
    font-size: O.9em;
    padding-left: 1ch;
    &::before {content: "(";}
    &::after {content: ")";}
    }


/*de map leaflet */
#myLeafletMap {
    height: 350px;
    min-width: 325px;
    max-width:1000px;
    border-radius:5px;
    z-index:2;
}

#myLeafletMap svg {
    fill: var(--vebred);
}

/*references */
#references li {
    display: flex;
    & .label {
        flex: 0 0 25ch;
    }
    
    & .label::first-letter {
        text-transform: uppercase;
    }
    }

 #references > ul > .ref_small {
     display: none;
     &::after {display: none;}
 }
  

 @media (max-width: 700px) {
  #references ul>li>ul>li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    line-height: 1.2;
    
  }
 #references > ul > .ref_small {
     display: list-item;
 }
  #references > ul > .ref_large {
     display: none;
 } 
  
  #references li .label {
    flex: none;
    width: auto;
    display: block;
    line-height: 1.2;
    margin: 0;
    padding: 0;
  }
}


/*stcv doorkijk */


section#stcv
{
  
}
.stcv_list {
    display: flex;
    flex-wrap: nowrap;
    gap: 2rem;
    overflow-x: auto;
    list-style: none;
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
    padding: 1em;
}


.stcv_item {
    flex: 0 0 250px;
    font-size: 0.9em;
    background-color:white;
    border-radius:1em;
    padding:1em;
    box-shadow: 0 2px 8px 0 #0003;
}


.stcv_item a {
    display: block;
    text-decoration: none;
    color: inherit;
}


.stcv_image {
    height: 14em;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;

}


.stcv_image img {
    width: auto;
    border-radius: 0.5em;
    height: 100%;
    object-fit: cover;
    
   transition: filter 0.6s ease;
}

.stcv_image svg {
    color: rgba(var(--expertbluergb) / 0.1);  /*werkt wel */
     /*werkt wel */
    height: 8em;
    transition: color 0.6s ease;}
   


.stcv_title, .stcv_impressum {
    display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
 
    
}


.stcv_item > a:hover svg {
   color: rgba(var(--expertbluergb) / 0.2);
    }
.stcv_item > a:hover img {
    filter: brightness(110%);
   }



#jump-to-section {
    background-color: var(--paperbeige);
    padding: 1em;
    border-radius:1em;
    font-size: 0.9em;
    opacity: 0;
    width: 14vw;
    position: fixed;
    bottom: 25%;
    right: 1.2em;
    z-index: 9999;
    transition: opacity 0.6s ease-out, transform 1.2s ease-out;
    @media (max-width: 1200px) {
        display: none;
    }
    }
#jump-to-section  ul li:first-child {
    font-weight: bold;
    margin-bottom: 1em;
}

 .highlight::after {
    content: "";
    display: inline-block;
    position: absolute;
    height: 1.8em;
    width: 4em;
    background: url("../images/manicule.svg") no-repeat center;
    transform: translateY(0em);
    background-size: contain;
}