@import url('../../fonts/font-loader.css');
/* ================================================== *
 * MARK: Resets
 * -------------------------------------------------- */
:root{
    --cvh-sec-space-y: var(--cvh-space-xl);
}

.cvh--subhead{
    text-transform: uppercase;
}

:is(h1,[class^=cvh--emulate-h1],[class*=" cvh--emulate-h1"]){
    font-weight: 700;
}

div:is(.cvh--section-inner,[class^=cvh--section-inner-],[class*=" cvh--section-inner-"]):where(:not(aside>div:where(.cvh--section-inner,[class^=cvh--section-inner-],[class*=" cvh--section-inner-"]))) {
    padding-top:    var(--cvh-sec-space-y );
    padding-bottom: var(--cvh-sec-space-y );
    padding-left:   var(--cvh-sec-space-x );
    padding-right:  var(--cvh-sec-space-x );
}

div.cvh--section-inner-xs {
    padding-top:    var(--cvh-space-xs);
    padding-bottom: var(--cvh-space-xs);
}

div.cvh--section-inner-s {
    padding-top:    var(--cvh-space-s);
    padding-bottom: var(--cvh-space-s);
}

div.cvh--section-inner-m {
    padding-top:    var(--cvh-space-m);
    padding-bottom: var(--cvh-space-m);
}

div.cvh--section-inner-l {
    padding-top:    var(--cvh-space-l);
    padding-bottom: var(--cvh-space-l);
}
div.cvh--section-inner-xl {
    padding-top:    var(--cvh-space-xl);
    padding-bottom: var(--cvh-space-xl);
}
div.cvh--section-inner-xxl {
    padding-top:    var(--cvh-space-xxl);
    padding-bottom: var(--cvh-space-xxl);
}

/* ================================================== *
 * MARK: 1. Block Varianten
 *
 *  
  *
 *
 * MARK: 1. Projekte Block
 * -------------------------------------------------- */

.cvh--grid.cvh--grid-auto-3-col:has( div > .cvh--project-wrapper ){
    gap: clamp(0px, 2vw + 6rem, 100cqw * 11);
}

.cvh--project-wrapper{
    aspect-ratio: 3/4;
    max-width: 450px;
    width: 100%;

    position: relative;
    overflow: clip;
}

.cvh--project-wrapper .text-wrapper{
    position: absolute;
    inset: auto 15% 0 15%;
    background-color: var(--primary);
    padding: 2rem;
    pointer-events: none;
}

.cvh--project-wrapper :is(h1,h2,h3,h4,h5,h6){
    color: #fff !important;
    font-size: var(--h3);
    margin: 0;
}

.cvh--project-wrapper .content{
    color: #fff !important;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease-in-out;
}

.cvh--project-wrapper p{
    overflow: hidden;
    color: #fff !important;
}

.cvh--project-wrapper::before{
    content: '';
    inset: 0;
    position: absolute;
    opacity: 0;
    transition: opacity .5s ease-in-out;
    background-color: #0000004e;
    pointer-events: none;

}
.cvh--project-wrapper:hover::before{
    opacity: 1;
}

.cvh--project-wrapper:hover .content{
    grid-template-rows: 1fr;
}

@media screen and (pointer: coarse) {
    .cvh--project-wrapper::before{
        opacity: 1;
    }
    
    .cvh--project-wrapper .content{
        grid-template-rows: 1fr;
    }
}
/* ================================================== *
 * MARK: 1.2. Personen Block
 * -------------------------------------------------- */

.cvh--employee-wrapper {
    width: fit-content;
    gap: 0;
    box-shadow: 10px 10px 20px -5px rgb(155, 155, 155);
}

.cvh--employee-wrapper .text-ctn{
    width: 100%;
    padding: 2rem;
}

/* ================================================== *
 * MARK: 1.3. Download Block
 * -------------------------------------------------- */

 .cvh--download-box.wp-block-columns > .wp-block-column > .wp-block-group{
    min-height: 100%;
    display: flex;
    align-items: stretch;
}


/* ================================================== *
 * MARK: 1.4. Hover Img
 * -------------------------------------------------- */


.cvh--hover-image figure{
    position: relative;
    overflow: hidden;
}
.cvh--hover-image figcaption{
    position: absolute;
    inset: auto 0 0 0;
    
    background-color:rgba(229, 230, 233, .5);
    color: #000;
    
    margin: 0;
    padding: 1rem 0;
    
    text-align: center;
    font-size: 2rem;
    pointer-events: none;

    opacity: 0;

    transition: opacity .3s ease-in-out;
}
.cvh--hover-image:hover figcaption{
    opacity: 1;
}


/* ================================================== *
 * MARK: 2. Block Anpassungen
 * -------------------------------------------------- 
 *
 *
 * ================================================== *
 * MARK: 2.1. List Block
 * -------------------------------------------------- */

:where(main,footer) ul:not(nav ul) li:before {
    line-height: .7;
    font-size: 3rem;
    color: var(--primary);
}


.wp-block-group.cvh--colored-group{
    padding: 2rem;
}



/* ================================================== *
 * MARK: 3. Breadcrumb
 * -------------------------------------------------- */
#cvh--site-breadcrumb{
    margin: 4rem 0 0 0;
    font-size: 1.4rem;
}

#cvh--site-breadcrumb .breadcrumb-item span{
    text-transform: uppercase;
}

#cvh--site-breadcrumb .breadcrumb li:not(:last-child)::after {
    color: var(--primary);
    margin-left: 10px;
    margin-right: 10px;
}

#cvh--site-breadcrumb .breadcrumb-item a{
    color: #040404;    
}

#cvh--site-breadcrumb .breadcrumb-item:not(.active) span{
    font-weight: bold;
}

#cvh--site-banner #cvh--site-breadcrumb{
    z-index: 10;
    align-self: flex-end;
    margin: 0 0 4rem 0;
    font-size: 1.4rem;
}

#cvh--site-banner #cvh--site-breadcrumb :is( .breadcrumb-item a,.breadcrumb-item.active span){
    color: #fff;    
}


/* ================================================== *
 * MARK: 4. Banner Overlay
 * -------------------------------------------------- */


.cvh--banner-overlay[data-has-overlay]{
    padding: 0;
    margin: 0 0 8rem 0;
}
.cvh--banner-overlay[data-has-overlay]::before{
    display: none;
}

.cvh--banner-overlay[data-has-overlay] :is(h1,h2,h3,h4,h5,h6,[class^=cvh--emulate-h],[class*=" cvh--emulate-h"]){
    color: #ffffff;
}


/* ================================================== *
 * MARK: 5. Footer
 * -------------------------------------------------- */


#cvh--site-copyright .cvh--section-inner-xs{
    padding-block: calc(var(--cvh-space-m) - 0.5em);
}

#cvh--site-footer-nav-ctn li::after{
    content: unset;
}
#cvh--site-footer-nav-ctn li a{
    padding-inline: var(--cvh-space-xs);
}

cvh-menu li.current-menu-item{
    color: var(--cvh-color-link-dark-hover);
}