/* Allgemeine Website Einstellungen */



/* Projekte Startseite */

.projekte_startseite {
    display: flex;
    justify-content: center;
    padding: 20px;
    gap: 30px;
}

.projekte_startseite .links{
    width: 15%;
}

.projekte_startseite .links span:first-child{
    text-transform: uppercase;
    color: var( --e-global-color-primary );
}

.projekte_startseite .links .pro_start_span2{
    font-weight: bold;
    font-size: 36px;
    color: var( --e-global-color-primary );
}

.projekte_startseite .links p{
    padding-top: 20px;
}

.projekte_startseite .rechts{
    width: 840px;
    display: flex;
    flex-wrap: wrap;
    max-height: 500px;
    gap: 30px;
    justify-content: center;
}

.projekte_startseite .rechts .spalte_1{
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    position: relative;
}

.projekte_startseite .rechts .spalte_1 a{
    height: 45%;
}

.projekte_startseite .rechts .spalte_2{
    flex: 2;
}

.projekte_startseite .img-1, .projekte_startseite .img-2{
    flex: 1;
    width: 350px;
    height: auto;
}



.projekte_startseite .img-2 {
    bottom: 0px;
}

.projekte_startseite .img-3 img{
    max-height: 500px;
    width: 421px;
    height: 500px;
}


/* Projeke */

.projekte_referenzen {
    max-width: 1160px !important;
    margin: 0 auto;
    display: flex;
    gap: 35px;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-bottom: 150px;
}

.projekt_box {
    flex-basis: 45%;
    box-shadow: 0px 0px 10px #00000061 !important;
    background-color: var(--wp--preset--color--dunkelgrau);
    color: white;
}

.projekt_box_img {
    height: 300px;
    width: calc(100% - 100px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin: 50px auto 0;
}

.projekt_box .item_link {
    display: flex;
    justify-content: end;
    color: white;
    text-decoration: underline;
}

.post_link_anfrage {
    display: flex;
    justify-content: end;
}

.post_link_anfrage a{
    --spitze: 12px;
    background: var(--wp--preset--color--orange, #ff7a00);
    color: #fff;
    display: inline-block;
    padding: 6px calc(16px + var(--spitze)) 6px calc(16px + var(--spitze));
    text-decoration: none;
    clip-path: polygon(
            var(--spitze) 0,
            calc(100% - var(--spitze)) 0,
            100% 50%,
            calc(100% - var(--spitze)) 100%,
            var(--spitze) 100%,
            0 50%
    );
}

.projekt_box_text {
    height: 200px;
    padding: 25px 50px;
    display: flex;
    justify-content: space-around;
    text-decoration: none;
    flex-direction: column;
}

.fuhrpark_mehr_laden {
    max-width: 1160px !important;
    margin: 0 auto;
    display: flex;
    background-color: var(--wp--preset--color--dunkelgrau);
    color: white;
    font-weight: 900;
    padding: calc(0.667em + 2px) 200px;
    text-decoration: none;
    border: none;
    font-size: inherit;
    cursor: pointer;

    margin-bottom: 150px;
    text-transform: uppercase;
}

.fuhrpark_mehr_laden:hover {
    background-color: var(--wp--preset--color--orange);
}


.projekt_box_text h1, .projekt_box_text h2 {
    padding-bottom: 20px;
    color: var(--wp--preset--color--orange);
    font-size: 25px;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
}

.projekt_box_text_bottom {
    display: flex;
    justify-content: space-between;
}

a.projekt_box, a.projekt_box:hover {
    text-decoration: none !important;
    color: inherit;
}

.projekt_box_text p {
    font-weight: bold;
    margin-bottom: 0px;
    font-size: 16px;
}

.projekt_box_text_links p{

}

.projekt_box_text_rechts div{
    height: 50px;
    width: 100%;
}

.projekt_box_text_rechts p {

}

p.projekt_box_text_zeitraum {
    background-image: url("/wp-content/uploads/2022/03/Icon_Termin.svg");
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 40px;
    margin-bottom: 15px;
    font-size: 14px !important;
    color: ;
}

p.projekt_box_text_ort {
    background-image: url("/wp-content/uploads/2022/03/Icon_Adresse_black.svg");
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 40px;
    font-size: 13px !important;
}

#projekte_referenzen_filter_box {
    height: auto;
    width: 100%;
    color: var(--wp--preset--color--dunkelgrau);
    margin-bottom: 75px;
    padding: 25px 50px;
    box-sizing: border-box;
}

#projekte_referenzen_filter {
    height: 100%;
    gap: 20px;
    align-items: center;
    justify-content: center;
    color: white;
    padding: 25px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.projekte_filter_daten {
    display: flex;
    font-size: 18px;
    color: white;
    text-transform: uppercase;
    font-weight: 400;
    margin: 0;
}

.projekte_hidden {
    display: none;
}

.projekte_filter_box input{
    display: none;
}
input[type=checkbox]:checked:before {
    color: var( --e-global-color-primary );
}


.cool-link {
    display: inline-block;
    color: var(--wp--preset--color--dunkelgrau);
    cursor: pointer;
    text-decoration: none;
    font-size: 25px;
    text-transform: uppercase;
}

.cool-link::after {
    cursor: pointer;
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: var(--wp--preset--color--orange);
    transition: width .3s;
}

.cool-link:hover::after {
    cursor: pointer;
    width: 100%;

}

.projekt_filter_current::after {
    width: 100%;

}

.hidebutton {
  display: none;
}

/* Einzelner Beitrag */

.einzelner_beitrag {
    display: flex;
}

.einzelner_beitrag .einzelner_beitrag_text_box {
    width: 640px;
    min-width: 640px;
    height: 750px;
    background-image: url("/wp-content/uploads/2022/03/AdobeStock_227966226.webp");
    align-content: center;
    align-items: center;
    order: 2;
}

.related_box .projekt_box_text_rechts {
    display: flex;
}

.related_box p {
    flex: 100%;
}

.einzelner_beitrag .projekt_box_text_zeitraum, .einzelner_beitrag .projekt_box_text_ort {
    font-size: 16px !important;
}

.einzelner_beitrag_text_box h2.single-post-title.entry-title{
    color: #1B3042;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-bottom: 0px;
    border-bottom: none;
    text-transform: none;
    font-size: 32px;
}

.einzelner_beitrag_kat {
    background-color: #1B3042;
    color: white;
    width: fit-content;
    font-size: 18px;
    padding: 0px 5px;
    text-transform: uppercase;
}

.einzelner_beitrag #custom-bg{
    height: 750px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.einzelner_beitrag .thumbnail {
    flex: auto;
    height: 750px;
}

.einzelner_beitrag .thumbnail img {
    height: 750px;
    width: auto;
}

.einzelner_beitrag_text_box_box {
    width: 100%;
    height: 100%;
    padding: 0% 10% 0% 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#related-posts {
    background-image: url(/wp-content/uploads/2022/03/AdobeStock_227966226.webp);
    width: 100%;
    max-width: 100%;
    margin-bottom: 150px;
    padding-top: 100px;
}

#related-posts .text {
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
    color: #1B3042;
    text-transform: none;
    padding-bottom: 20px;
}

.weitere_posts_space {
    height: 75px;
    background-color: white;
    width: 80%;
    margin: 0 auto;
}

#related-posts .text:before {
    content: "";
}


#related-posts .oceanwp-row.clr {
    background-color: white;
}

#related-posts .projekt_box_text {
    background-color: white;
}

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

    .projekt_box_text_bottom {
        flex-direction: column;
    }

    #related-posts {
        padding-top: 50px;
    }

    .weitere_posts_space {
        width: 100%;
    }

    p.projekt_box_text_zeitraum, p.projekt_box_text_ort {
        font-size: 16px;
        padding-left: 30px;
    }

    .projekte_referenzen {
        gap: 25px;
    }

    .single-post .headerbild_text .projekt_box_text_zeitraum, .single-post .headerbild_text .projekt_box_text_ort {
        width: 12%;
        margin: 0 auto;
    }

    .single-post .headerbild_text .projekt_box_text_ort {
        margin-top: 10px !important;
    }

    .projekte_startseite {
        flex-direction: column;
    }

    .projekte_startseite .links, .projekte_startseite .rechts {
        width: 100%;
    }


}



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

    .einzelner_beitrag #custom-bg {
        height: 500px;
    }

    .einzelner_beitrag {
        flex-wrap: wrap;
    }

    .einzelner_beitrag .einzelner_beitrag_text_box {
        width: 100%;
        min-width: auto;
        height: 300px;
        background-image: url(/wp-content/uploads/2022/03/AdobeStock_227966226.webp);
        align-content: center;
        align-items: center;z

    }

    .einzelner_beitrag .einzelner_beitrag_text_box_box {
        padding: 0% 10% 0% 25%;
    }

    .single-post .headerbild_text .projekt_box_text_zeitraum, .single-post .headerbild_text .projekt_box_text_ort {
        width: 18%;
        margin: 0 auto;
    }

    .projekt_box.weitere_posts {
        flex-basis: 80%;
    }

    #projekte_referenzen_filter_box {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 25px;
    }

    .projekt_box.weitere_posts {
        flex-basis: 45%;
    }

    .projekt_box.weitere_posts, .projekt_box {
        flex-basis: 90%;
    }

    .projekt_box.weitere_posts {
        flex-basis: 80%;
    }

    #projekte_referenzen_filter_box {
        width: 100%;
    }

    #projekte_referenzen_filter {
        flex-direction: column;
    }

}



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


    .projekt_box_img {
        height: 150px;
        margin: 25px auto 0;
        width: calc(100% - 50px);
    }

    .projekt_box_text {
        padding: 25px;
    }

    .einzelner_beitrag .einzelner_beitrag_text_box_box {
        padding: 0% 10% 0% 15%;
    }

    .projekte_startseite .img-1 div {
        min-height: 110px;
    }

    .single-post .headerbild_text .projekt_box_text_zeitraum, .single-post .headerbild_text .projekt_box_text_ort {
        width: 28%;
        margin: 0 auto;
    }

    .projekte_startseite {
        display: block;
    }

    .projekte_startseite .img-2 {
        position: relative;
    }

    .projekte_startseite .img-2 div {
        min-height: 200px;
        margin-top: 20px;
    }

    .projekte_startseite .img-1, .projekte_startseite .img-2 {
        width: 100%;
    }

    .projekte_startseite .rechts {
        max-height: unset;
        flex-direction: column;
    }

}