/*
plugin.bootstrap_package.settings.scss.primary = #118937
plugin.bootstrap_package.settings.scss.secondary = #CCCCCC
plugin.bootstrap_package.settings.scss.tertiary = #7f7f7f
*/
:root {
    --var-primary: #118937;
    --var-primary: #007d5d;



    --var-secondary: #CCCCCC;
    --var-tertiary: #7f7f7f;
    --var-small-border-color: var(--var-primary);
}

.row {
    --bs-gutter-x: 40px;
    --bs-gutter-y: 0;
}
.frame-container {
    --bs-gutter-x: 0px;
}
.gallery-item-size-2r {
    --bs-gutter-x: 20px;
}

.btn { border-radius: 0px; }

.text-justify {
    
    text-align: justify;
    
}
.body {
    font-family: 'OpenSans',Arial,Helvetica,Verdana,sans-serif;
}

/*
.section.section-default .frame-container-default {    max-width: unset;    border: 1px solid red; }
*/


/* Conteiner Leistungen */

@media (min-width: 992px) {
    .section-default .container-leistungen h2 {
        font-size: calc(3.0vw);
        font-weight: 600;
    }
}



@media (min-width:1200px) {
    .section-default p {
        font-size: calc(1.25vw);
    }
    .section-default h1 {
        font-size: calc(2.5vw);
    }
    .section-default h2 {
        font-size: calc(2.5vw);
    }

    .section-default li {
        font-size: calc(1.0vw);
    }

}

@media (min-width:768px) {

    .flex-muster {
        display: flex;
        flex-direction: row;
        align-content: space-between;
        flex-wrap: wrap;
    }

}

.border-right-white {
    border-right: 2px solid #fff;
}

/* VIEL AUF DER PFANNE */
.flex {
    display: flex;
}
.text-white .frame p {
    color: white;
}
.text-white .frame hr {
    color: white;
}
.mittig {
    min-height: 100%;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: space-around;
    align-items: center;
    justify-content: center;

}


.col-background-primary .col-ce {
    background-color: var(--var-primary) !important;
}
/* hr nicht anzeigne */
.frame-type-div hr {
    opacity: 0;
}


/* Viel auf der Pfanne */
.height-50 {
    min-height: calc(50vh);
}
.height-60 {
    min-height: calc(60vh);
}
.height-70 {
    min-height: calc(70vh);
}
.height-80 {
    min-height: calc(80vh);
}
.height-90 {
    min-height: calc(90vh);
}

/* Zimmerei Bedachtung Holzrahmenbau 3 col mobile*/
@media (max-width: 992px) {

    .frame-container-default {
        max-width: 100%;
    }
    #c68 .frame-container .frame-container-default {
        max-width: 100%;
    }


}




/* hover gallery */


.hover-gal .gallery-row {
    border: 1px solid red;
    display: none;
}
.hover-gal .element-header  {
    border: 1px solid red;
    color: white;
    font-weight: 900;
    opacity: 0;
    display: flex;
    height: calc(25vw);
    align-items: center;
    padding-left: 20px;
}
.hover-gal .element-header:hover  {

    color: white;
    font-weight: 900;
    opacity: 1;
    background: rgba(10,90,10,.5);
}
.hover-gal .frame-type-image {
    width: calc(25vw);
    height: calc(25vw);
    border: 1px solid red;
    display: flex;
    flex-direction: row;
    align-items: center;
}
@media (max-width:768px) {
    .hover-gal .element-header  {
        border: 1px solid red;
        color: white;
        font-weight: 900;
        opacity: 1;
        display: flex;
        height: calc(100vw);
        align-items: center;
        padding-left: 20px;
        width: calc(100vw);
    }
    .hover-gal .frame-type-image {
        width: calc(100vw);
        height: calc(100vw);
        border: 1px solid red;
        display: flex;
        flex-direction: row;
        align-items: center;
    }


}

/* Hover Gallery was nicht mobil angezeigt werden soll */
.not-mobile {
}
@media (max-width:768px) {
    .not-mobile {
        display: none;
    }
}




/* 3 kacheln Bild und Text untent */
.text-padding {

}
.textpic-item.textpic-text {
    /*--bs-gutter-x: 40px;*/
    padding: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 2rem;
    padding-right: 2rem;

}

/* Alle body schriften grün */
.section .section-default .frame-background-none {
    --frame-color: var(--var-primary);
    --frame-link-color: var(--var-primary);
    --frame-link-hover-color: var(--var-primary);
}
.section .section-default .frame-background-none h2,
.section .section-default .frame-background-none p
{
    --frame-color: var(--var-primary);
    --frame-link-color: var(--var-primary);
    --frame-link-hover-color: var(--var-primary);
}

/* Sommerfest Sponsorenbilder vertikal mittig wenn verschiedene Höhen haben */
.bilder-vertikal-mitte .gallery-row {
    border: 1px solid orange;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gallery-gap);
    align-content: center;
    align-items: center;
}


/* SIEBERICHS ------------------------ */

/* Slider Startseite */
.carousel-item .carousel-item-header {
    display: none;
}
.carousel-item .carousel-item-bodytext p {
    color: var(--var-primary);
    font-size: 3rem;
    font-weight: 900;
}
.carousel .carousel-content-inner {
    border: 1px solid red;
}
@media (min-width: 992px) {
    .carousel-item-type-text .carousel-text-inner {
        border: 1px solid red;
        display: flex;
        flex-direction: row-reverse;
    }
}
/* Slider mit Bild und Text */
.carousel-content-inner {
    max-width: 100%;
}


@media (min-width: 576px){
    .carousel .carousel-content-inner {
        display: flex;
        flex-direction: row-reverse;
        /* min-width: 100%; */
        align-content: flex-start;
        align-items: flex-start;
    }

    .carousel-content-inner {
        border: 1px solid red;
        display: flex;

    }
    .carousel-content-inner .carousel-text {
        color: var(--var-primary);
        font-size: 3rem;
        font-weight: 900;
        margin-right: 0rem;
        margin-top: 3rem;
        
        text-shadow: 2px 2px 2px rgba(45, 31, 40, 0.53);
    }
    .carousel-content-inner .carousel-text p{
        color: var(--var-primary);
        font-size: 3rem;
        font-weight: 900;
        border: 1px solid red;
    }

    .carousel-content-inner .carousel-text .carousel-header {
        display: none;

    }
    .carousel-content-inner .carousel-image {
        border: 1px solid red;
        margin: auto;
        margin-left: 0px;
        margin-bottom: 0px;
        max-width: 30%;
    }

}
/* ENDE */

/* Abstand zwischen container ohne margin und pading */
.frame.frame-space-before-extra-small {
    margin-top: 0rem;
    padding-top: 0rem;
}
.frame.frame-space-after-extra-small {
    margin-bottom: 0rem;
    padding-bottom: 0rem;
}


/* Footer Sektion */
.footer-section-content {
    background-color: var(--var-primary);
    --frame-color: #ffffff;
    --frame-background: var(--var-primary);
    --frame-link-color: white;
    --frame-link-hover-color: #dddddd;
}

/* Überschrift im Slider */
.carousel-item-header  {
    /* font-family: "Arial"; */
    /*font-family: "Unterschrift";*/
}

.text-quaternary span {
    font-family: "Unterschrift";
    font-weight: bold;
    color: #333;
    font-size: 2.5rem;
}
.text-quaternary  {
    font-family: "Unterschrift";
    font-weight: bold;
    color: #333;
    font-size: 2.5rem;
}

/* Header in 3 col grün */
.frame-background-secondary .element-header {
    color: var(--var-primary);
}


/* 3cols auf startseite gleiche höhe alle elemente */
:root {
    --col-border: 10px solid orange;
}

.element-001 .ce-col  {
}

/* Abstand und gleiche Höhe */
.element-001 .ce-col .frame-background-primary:nth-of-type(1)
{
    height: 100%;
    /*background-color: var(--var-primary);*/
}

.element-001 .ce-col:nth-of-type(1)
{

}
.element-001 .ce-col:nth-of-type(2)
{

}
.element-001 .ce-col:nth-of-type(3)
{

}

.element-001 .frame-type-textpic {
    margin-top: 0px;
    padding-top:0px;
    border-top:10px solid var(--var-primary);
}


/* Gutter mobil zweite Spalte */
@media (max-width:576px) {
    .section-default .element-001 .frame-type-textpic {
        /* border-top: 10px solid transparent; */
        /* border-radius: 0px; */
        margin-left: 20px;
        margin-right: 20px;
        /* border-right: 20px solid white; */
    }
    .element-001 .ce-col:nth-of-type(2)
    {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }

}

@media (max-width:576px) {
    .section-default > .frame-background-primary:nth-of-type(1)
    {
        border: 0px solid red;
        margin-left: 20px;
        margin-right: 20px;
    }
    .section-default > .row
    {
        border: 0px solid red;

    }
    .section-default .frame-type-text
    {
        border: 0px solid red;
        margin-left: 20px;
        margin-right: 20px;

    }
    /* Leistungen */
    .row.container-leistungen .text-end,
    .row.container-leistungen
    .text-right {
        text-align: left !important;
    }


}

.olMap {
    height: calc(30vh);
    min-height: 300px;
}


/* Navigation */

@media (min-width:992px) {

    /* Logo größer */
    .navbar-mainnavigation .navbar-brand-image {
        position: relative;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    #page-header {
       
        border-bottom: 20px solid var(--var-primary);
    }
    
    
    .nav-link-text {
        color: var(--var-primary);
        text-transform: uppercase;
        font-weight: 600;
        font-size: 0.9rem;
    }
    .dropdown-item li :hover {
        color: var(--bs-dropdown-link-active-color);
        text-decoration: none;
        background-color: var(--bs-dropdown-link-active-bg);
    }
    .navbar-mainnavigation .navbar-nav>li>.nav-link:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: transparent;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
}


.navbar-mainnavigation>.navbar-nav .nav-link, .navbar-mainnavigation>.container>.collapse>.navbar-nav .nav-link, .navbar-mainnavigation>.container-fluid>.collapse>.navbar-nav .nav-link, .navbar-mainnavigation>.container-sm>.collapse>.navbar-nav .nav-link, .navbar-mainnavigation>.container-md>.collapse>.navbar-nav .nav-link, .navbar-mainnavigation>.container-lg>.collapse>.navbar-nav .nav-link, .navbar-mainnavigation>.container-xl>.collapse>.navbar-nav .nav-link, .navbar-mainnavigation>.container-xxl>.collapse>.navbar-nav .nav-link {
    padding-right: 0rem;
    padding-left: 1rem;
}

.navbar-mainnavigation .navbar-collapse {
    margin-top: 2rem;
}


.navbar-mainnavigation .navbar-brand-image img {
    position: relative;
    top: 20%;
    transform: translate(0,0%);
    width: 440px;
    height: auto;
}


}



.h100 .ce-col .frame {
    border: 1px solid red;
    display: flex;
    height: 100%;
}
@media (max-width:768px) {
    .h100 .ce-col .frame-backgroundimage-container {
    border: 1px solid red;
    display: flex;
    height: 100%;
    min-height: calc(33vh);
}
}

.container-leistungen .frame-type-text {
    color: white;
}
.container-leistungen .frame-type-text p,
.container-leistungen .frame-type-text h1,
.container-leistungen .frame-type-text h2,
.container-leistungen .frame-type-text h3,
.container-leistungen .frame-type-text h4,
.container-leistungen .frame-type-text h5
{
    color: white;
}
.container-leistungen .frame-type-text a{
    color: white;
}

.frame-background-primary p,
.frame-background-primary a,
.frame-background-primary h1,
.frame-background-primary h2,
.frame-background-primary h3,
.frame-background-primary h4,
.frame-background-primary h6{ color: white; }

                         
                          
.footer-section-content p,
.footer-section-content a,
.footer-section-content h1,
.footer-section-content h2,
.footer-section-content h3,
.footer-section-content h4,
.footer-section-content h6{ color: white; }

@media(min-width: 768px) {
    
    .footer-section-content .footer-section-content-column-left .gallery-item img, 
     .footer-section-content-column-left .gallery-item picture {
        max-width: 64px;
        height: auto;
}

.footer-section-content .footer-section-content-column-left .frame  { padding-bottom: 1rem; }
.footer-section-content .footer-section-content-column-left  { padding-bottom: 0rem; }



.footer-section-content .footer-section-content-column-left  {
    justify-content: right;
    justify-content: right;
}
.footer-section-content .footer-section-content-column-left  .gallery-row {
     justify-content: right;
}

}