/*!
 * Start Bootstrap - Creative v5.0.1 (https://startbootstrap.com/template-overviews/creative)
 * Copyright 2013-2018 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-creative/blob/master/LICENSE)
 */


:root {
    --cblack2: #999;
}

.dropdown-toggle.active-dropdown::after {
    transform: rotate(-90deg);
}
/*=-====Bootstrapthemes.co btco-hover-menu=====*/

.navbar-light .navbar-nav .nav-link {
    color: rgb(64, 64, 64);
}

.btco-hover-menu a, .navbar > li > a {
    text-transform: capitalize;
    padding: 10px 15px;
}

.btco-hover-menu .active a,
.btco-hover-menu .active a:focus,
.btco-hover-menu .active a:hover,
.btco-hover-menu li a:hover,
.btco-hover-menu li a:focus,
.navbar > .show > a, .navbar > .show > a:focus, .navbar > .show > a:hover {
    color: #000;
    background: transparent;
}

#rechtliches {
    padding: 6.25rem 0 3.4375rem;
}

/*submenu style start from here*/

.btn-password-eye {
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
    border-radius: var(--bs-border-radius) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.dropdown-menu {
    padding: 0px 0;
    margin: 0 0 0;
    border: 0px solid transition !important;
    border: 0px solid rgba(0,0,0,.15);
    border-radius: 0px;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}


/*first level*/
/* .btco-hover-menu .collapse ul > li:hover > a{background: #f5f5f5;} */
/* .btco-hover-menu .collapse ul ul > li:hover > a, .navbar .show .dropdown-menu > li:hover{background: rgba(240,95,64,.9)} */

/*second level*/
.btco-hover-menu .collapse ul ul ul > li:hover > a {
    background: white
}

/*third level*/
.btco-hover-menu .collapse ul ul, .btco-hover-menu .collapse ul ul.dropdown-menu {
    background: white
}

    .btco-hover-menu .collapse ul ul ul, .btco-hover-menu .collapse ul ul ul.dropdown-menu {
        background: white
    }

        .btco-hover-menu .collapse ul ul ul ul, .btco-hover-menu .collapse ul ul ul ul.dropdown-menu {
            background: white
        }

/*Drop-down menu work on hover*/
.btco-hover-menu {
    background: none;
    margin: 0;
    padding: 0;
    min-height: 20px
}

@media only screen and (max-width: 1240px) {
    .btco-hover-menu .show > .dropdown-toggle::after {
        transform: rotate(-90deg);
    }
}

@media only screen and (min-width: 1240px) {

    .btco-hover-menu .collapse ul li {
        position: relative;
    }

        .btco-hover-menu .collapse ul li:hover > ul {
            display: block
        }

    .btco-hover-menu .collapse ul ul {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 250px;
        display: none
    }
        /*******/
        .btco-hover-menu .collapse ul ul li {
            position: relative
        }

            .btco-hover-menu .collapse ul ul li:hover > ul {
                display: block
            }

        .btco-hover-menu .collapse ul ul ul {
            position: absolute;
            top: 0;
            left: 100%;
            min-width: 250px;
            display: none
        }
            /*******/
            .btco-hover-menu .collapse ul ul ul li {
                position: relative
            }

                .btco-hover-menu .collapse ul ul ul li:hover ul {
                    display: block
                }

            .btco-hover-menu .collapse ul ul ul ul {
                position: absolute;
                top: 0;
                left: -100%;
                min-width: 250px;
                display: none;
                z-index: 1
            }
}

body, html {
    width: 100%;
    min-height: 100vh;
    background-color: #f3f3f3;
}

body {
    font-family: Open Sans,'Helvetica Neue',Arial,sans-serif
}

hr {
    max-width: 50px;
    border-width: 3px;
    border-color: var(--main-color);
}


/*Account Edit*/

.list-link.active {
    color: black !important;
}

.list-link {
    color: var(--main-color) !important;
}

.card-body.accountEdit {
    padding: 2rem !important;
}

.list-link.active::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2rem;
    border-right: 4px solid var(--main-color);
}

.registerForm, .loginForm hr {
    max-width: none;
}


a {
    color: var(--main-color);
    -webkit-transition: all .2s;
    transition: all .2s;
    text-decoration: none !important;
}

    a:hover {
        color: var(--main-color);
        text-decoration: none !important;
    }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif
}

.bg-dark {
    background-color: #212529 !important
}

section {
    padding: 6rem 0;
}

.margin-top {
    margin-top: 10px;
}

.margin-bottom {
    margin-bottom: 80px;
}

.sectionLight {
    padding: 6rem 0;
}

.section-heading {
    margin-top: 10px;
}

::-moz-selection {
    color: #fff;
    background: #212529;
    text-shadow: none
}

::selection {
    color: #fff;
    background: #212529;
    text-shadow: none
}

img::-moz-selection {
    color: #fff;
    background: 0 0
}

img::selection {
    color: #fff;
    background: 0 0
}

img::-moz-selection {
    color: #fff;
    background: 0 0
}

#mainNav {
    border-bottom: 1px solid rgba(33,37,41,.1);
    background-color: #fff;
    font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
    -webkit-transition: all .2s;
    transition: all .2s
}

    #mainNav .navbar-brand {
        font-weight: 700;
        text-transform: uppercase;
        color: var(--main-color);
        font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif
    }

        #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
            color: var(--main-color);
        }

    #mainNav .navbar-nav > li.nav-item > a.nav-link, #mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
        font-size: .9rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #212529;
    }

        #mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover, #mainNav .navbar-nav > li.nav-item > a.nav-link:hover {
            color: var(--main-color);
        }

        #mainNav .navbar-nav > li.nav-item > a.nav-link.active, #mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active {
            color: var(--main-color); !important;
            background-color: var(--main-color);
        }

            #mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover, #mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active:hover {
                background-color: var(--main-color);
            }

@media (min-width:1240px) {
    #mainNav {
        border-color: var(--main-color);
        background-color: var(--main-color);
    }

        #mainNav .navbar-brand {
            color: #fff;
        }

            #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
                color: #fff;
            }

        #mainNav .navbar-nav > li.nav-item > a.nav-link {
            padding: .5rem 1rem
        }

            #mainNav .navbar-nav > li.nav-item > a.nav-link, #mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
                color: #fff;
            }

                #mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover, #mainNav .navbar-nav > li.nav-item > a.nav-link:hover {
                    color: #fff;
                }

        #mainNav.navbar-shrink {
            border-bottom: 1px solid rgba(33,37,41,.1);
            background-color: #fff;
        }

            #mainNav.navbar-shrink .navbar-brand {
                color: var(--main-color);
            }

                #mainNav.navbar-shrink .navbar-brand:focus, #mainNav.navbar-shrink .navbar-brand:hover {
                    color: var(--main-color);
                }

            #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link, #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus {
                color: #212529
            }

                #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus:hover, #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:hover {
                    color: var(--main-color);
                }
}

.navbarpadding {
    padding-top: 12%;
}

.maxheight-50vh {
    max-height: 50vh;
}

header.masthead {
    padding-top: 10rem;
    padding-bottom: calc(10rem - 56px);
    background-image: var(--backgroundImagePath);
    background-position: center center;
    background-size: cover;
    min-height: 100vh;
    z-index: 0;
}

    header.masthead hr {
        margin-top: 30px;
        margin-bottom: 30px
    }

    header.masthead h1 {
        font-size: 2rem
    }

    header.masthead p {
        font-weight: 300
    }

@media (min-width:768px) {
    header.masthead p {
        font-size: 1.15rem
    }
}

@media (min-width:1240px) {
    header.masthead {
        /*height: 100vh;*/
        
        /*padding-top: 0;
        padding-bottom: 0*/
    }

        header.masthead h1 {
            font-size: 3rem
        }
}

@media (min-width:1200px) {
    header.masthead h1 {
        font-size: 4rem
    }
}

.btn-image {
    height: 200px;
    display: flex;
    /* The direction in which lines of text are stacked */
    flex-direction: column;
    align-items: center;
}

.btn-image i {
    height: 150px;
    font-size: 80px;
    padding-top: 20%;
}

.btn-image span {
    bottom: 0;
    font-size: 18px;
}

.ordercontainer {
    display: flex;
    justify-content: space-around;
    align-items: center;
}



.service-box {
    max-width: 400px
}

.portfolio-box {
    position: relative;
    display: block;
    max-width: 650px;
    margin: 0 auto
}

    .portfolio-box .portfolio-box-caption {
        position: absolute;
        bottom: 0;
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
        opacity: 0;
        color: #fff;
        background: rgba(240,95,64,.9);
        -webkit-transition: all .2s;
        transition: all .2s
    }

        .portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
            position: absolute;
            top: 50%;
            width: 100%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            text-align: center
        }

            .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category, .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
                padding: 0 15px;
                font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif
            }

            .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
                font-size: 14px;
                font-weight: 600;
                text-transform: uppercase
            }

            .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
                font-size: 18px
            }

    .portfolio-box:hover .portfolio-box-caption {
        opacity: 1
    }

    .portfolio-box:focus {
        outline: 0
    }

@media (min-width:768px) {
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
        font-size: 16px
    }

    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
        font-size: 22px
    }
}

.text-primary {
    color: var(--main-color) !important;
}

.btn {
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
    border-radius: unset;
}

.btn-xl {
    padding: 1rem 2rem
}

.btn-primary {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

    .btn-primary:active, 
    .btn-primary:focus, 
    .btn-primary:hover{
        color: #fff;
        background-color: #ee4b28 !important
    }

    .btn-primary:active, .btn-primary:focus {
        -webkit-box-shadow: 0 0 0 .2rem rgba(240,95,64,.5) !important;
        box-shadow: 0 0 0 .2rem rgba(240,95,64,.5) !important
    }


.btn-outline-primary {
    color: var(--main-color);
    border-color: var(--main-color);
    border: 1px solid;
}

    .btn-outline-primary:active, .btn-outline-primary:focus, .btn-outline-primary:hover {
        color: #fff;
        background-color: #ee4b28 !important
    }

    .btn-outline-primary:active, .btn-outline-primary:focus {
        -webkit-box-shadow: 0 0 0 .2rem rgba(240,95,64,.5) !important;
        box-shadow: 0 0 0 .2rem rgba(240,95,64,.5) !important
    }


h2.section-heading.text-white {
    color: black !important;
}

.navbar-link-footer {
    color: #FFF !important;
    display: grid;
    padding: 5px;
}

    .navbar-link-footer:hover {
        color: var(--main-color) !important;
    }

.btn-link {
    color: var(--main-color);
}


    .btn-link:hover {
        color: var(--main-color);
    }

.badge-primary {
    background-color: var(--main-color);
    margin-left: 10px;
}

.shop {
    height: -moz-available; /* WebKit-based browsers will ignore this. */
    height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
    height: fill-available;
}

.flex-wrap-shop {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}


.list-group-item.active {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.ol-zoom {
    top: 4.5em !important;
}

.card-columns {
    column-count: 4;
}

.btn {
    white-space: normal !important;
}

.pointer {
    cursor: pointer;
}

.ol-popup {
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 250px;
    text-align: center;
}

    .ol-popup:after, .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
    }

    .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
    }

.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}

    .ol-popup-closer:after {
        content: "✖";
    }

.boldText {
    font-weight: bold;
}

.companyColor {
    color: var(--main-color);
}

.spacer {
    height: 20px;
}

.spacerMedium {
    height: 100px;
}

.spacerBig {
    height: 500px;
}

.cardBread {
    display: inline-flex;
}



.backgroundWhite {
    background-color: #FFFFFF;
}

.accountText {
    text-align: left;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.registerI {
    margin: 5px;
    display: block;
    visibility: hidden;
}


.cartItems {
    float: left;
    border-top: 0px !important;
}

.cartBorder {
    border-top: 2px solid #dee2e6;
}

.cartBorderThin {
    border-top: 1px solid #dee2e6;
}

.sumInCartBlock {
    position: absolute;
    display: inline-flex;
}

@media all and (min-width:1240px) {
    .sumInCartBlock {
        position: inherit;
        display: inline-flex;
    }
}

.filterProducts {
    display: initial;
}

@media all and (min-width:1240px) {
    .filterProducts {
        display: none;
    }
}


.filterProductsNot {
    display: none;
}

@media all and (min-width:1240px) {
    .filterProductsNot {
        display: initial;
    }
}

.maxWidth85 {
    max-width: 85%;
}

.cartTable {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 75% !important;
    margin-bottom: 1rem;
    background-color: transparent;
    border-collapse: collapse;
    box-sizing: border-box;
    text-align: center !important;
}

    .cartTable button.btn.btn-info {
        margin-bottom: 3px;
    }

    .cartTable button.btn.btn-danger {
        margin-bottom: 3px;
    }


    .cartTable td {
        height: 50px;
    }

.validation-summary-valid.col-12.col-md-6.offset-md-3.text-left.alert.alert-danger {
    display: none;
}

.field-validation-valid {
    display: none;
}

.validationSum ul {
    list-style-type: none;
}

.productNumberInput {
    max-width: 50px;
    height: 36px;
}

.card-deckCustom {
    display: block;
}

@media (min-width: 576px) {
    .card-deck .card {
        margin-bottom: 15px;
    }
}

.youtube-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

    .youtube-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.youtube-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
}

.yt-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position:relative;
    z-index:2;
}

.yt-overlay-background {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.4;
}

.play-button {
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #ff0000;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 0.25rem;
}

.zoom-hint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(128, 128, 128, 0.7); /* Grauer Hintergrund mit Transparenz */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    text-align: center; /* Text zentrieren */
    display: none; /* Standardmäßig ausgeblendet */
    z-index: 1000; /* Über der Karte anzeigen */
}


/* Grundlegende Stile für das Accordion */
.accordion {
    border: 1px solid #ddd;
    border-radius: 0.25rem;
}

.accordion-item {
    border-bottom: 1px solid #ddd;
}

    .accordion-item:last-child {
        border-bottom: none;
    }

.accordion-header {
    margin: 0;
}

.accordion-button {
    width: 100%;
    padding: 1rem 1.25rem;
    text-align: left;
    background-color: #f8f9fa;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .accordion-button:focus {
        background-color: #e9ecef;
    }

    .accordion-button:not(.collapsed) {
        background-color: #e9ecef;
    }

    .accordion-button::after {
        content: '\25be'; /* Pfeil nach unten */
        float: right;
        transition: transform 0.2s ease-in-out;
    }

    .accordion-button:not(.collapsed)::after {
        transform: rotate(-180deg); /* Pfeil nach oben */
    }

.accordion-collapse {
    display: none;
}

    .accordion-collapse.show {
        display: block;
    }

.accordion-body {
    padding: 1rem 1.25rem;
    background-color: white;
    border-top: 1px solid #ddd;
}