@import "../lib/bs/5.3.3/bootstrap.min.css";

@import "set/navbar.incl.css?v=0.7";

@import "set/footer.incl.css?v=0.15";

@import "set/layout.incl.css?v=0.6";

@import "https://lib.nicdn.de/fa/6.7.2/css/all.min.css";


@import "https://font.nicdn.de/roboto.css";
@import "https://font.nicdn.de/roboto-condensed.css";
@import "https://font.nicdn.de/open-sans.css";


:root {

    --header-height-distance-top: 80px;
    --bs-primary: #93da07;
    --bs-primary-rgb: 147, 218, 7;

    --bg-scroller-color: #93da07;

    --border-color-success: #93da07;

    --footer-color: #6c757d;



}


:root {
    /* -------------------- NAVIGATION TOGGLER ---------------------------------------------------------------------- */
/*
    --navigation-nav-down-background-color: rgba(255, 255, 255, 0.4);
*/
    --navigation-nav-down-background-color: rgba(26, 26, 26, 0.4) !important;


    .navbar {
        --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    .navbar-toggler {
        --bs-navbar-toggler-border-color:white;
    }
}
/*
[data-bs-theme=dark] {
    --navigation-nav-down-background-color: rgba(26, 26, 26, 0.4) !important;
}
*/

body {
    overflow-wrap: break-word;

}
.bg-img-001 {
    background-image: url("../img/logo_001.png?v=0.3");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-attachment: fixed;
}
/* -------------------- MAIN ---------------------------------------------------------------------------------------- */
.main-wrapper {
    z-index:1;
    position: relative;
    margin-bottom: 600px;
    background-color: #ffffff;
}
[data-bs-theme=dark] {
    .main-wrapper {
        background-color: #1a1a1a;
    }
}

/* ------ md iPad Hochkant ------*/
@media (min-width: 576px) and (max-width: 992px) {
    .main-wrapper {
        margin-bottom: 750px;
    }
}
/* ------ lg - iPad Quer ------
@media (min-width: 992px) and (max-width: 1400px) {
    .main-wrapper {
        margin-bottom: 800px;
    }
}
*/
@media (min-width: 992px) {
    .main-wrapper {
        margin-bottom: 525px;
    }
}

/* -------------------- SEITENHINTERGRUND VIDEO --------------------------------------------------------------------- */
.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -2;
    overflow: hidden;
    min-height: 100vh;
}
.bg-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 1;
    z-index: 1;
    object-fit: cover;
}
.overlay:after {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    left: 0;
    top: 0;
    content: "";
}
.overlay:after {
    background: rgba(0,0,0,.3);
}

/* -------------------- OFFCANVAS ----------------------------------------------------------------------------------- */
.offcanvas-title svg {
    width:100%;
}
.offcanvas-title svg path {
    fill: var(--bs-primary);
}
.offcanvas-header .btn-close {
    color: white;
}
.offcanvas .nav-item {
    font-size: 1.3rem;
}


/* -------------------- BOX ----------------------------------------------------------------------------------------- */
.box .background-cover .transparent {
    background: rgba(0,0,0,.3);
}


/* -------------------- HEADLINE TOP -------------------------------------------------------------------------------- */
.headline {
    margin-bottom: 10rem;
}

.headline::before {
    content: "";
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    height: 50px;
    width: 100px;
    border-color: var(--core-color-2-28);
    border-style: solid;
    border-width: .5rem .5rem 0 0;
}
.headline .headline-content-title {
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.headline .headline-content-title-sub {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

@media (max-width: 768px) {

}


/* -------------------- FONT ---------------------------------------------------------------------------------------- */
p,
li,
.accordion-button {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 1.3rem;
}




/* -------------------- FONT SIZE ----------------------------------------------------------------------------------- */
@media (min-width: 1200px) {
    .fs-1 {
        font-size: 4.5rem !important;
    }
    .fs-4 p {
        font-size: 1.6rem !important;
    }
}


.accordion-button:not(.collapsed) {
    background-color: rgba(var(--core-color-1-24-rgb), 0.8) !important;
    color: #000000;
    font-weight: 700;
}

/* ----------- CHECKS ----------------------------------------------------------------------------------------------- */
.list-with-checks {
    list-style: none;
    margin: 0;
    padding: 0;
}

.list-with-checks li {
    position: relative;
    padding-left: 1.6em;
    margin-bottom:15px;
}

.list-with-checks li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    color: var(--bs-primary);
    position: absolute;
    left: 0;
    top: 0.15em;
}

/* ------------------------------ */

/* -------------------- COLORS -------------------------------------------------------------------------------------- */
.text-success {
    color: rgba(var(--core-color-2-28-rgb), 0.8) !important;
}



/* -------------------- SEITENHINTERGRUND --------------------------------------------------------------------------- */
.bg-canvas {
    position: absolute;
    top: -80px;
    left: -1px;
    width: calc(100% + 1px);
    z-index: -1;
}

@media (min-width: 1200px) {
    .bg-canvas {
        top: -150px;
    }
}
@media (min-width: 1800px) {
    .bg-canvas {
        top: -200px;
    }
}
@media (min-width: 2100px) {
    .bg-canvas {
        top: -250px;
    }
}


.bg-canvas-path {
    stroke: #000;
    stroke-miterlimit: 10;
}

/* -------------------- HEADLINE WRAPPER ---------------------------------------------------------------------------- */
.headline-wrapper {

}

/* -------------------- SVG LAYOUT WAVE ----------------------------------------------------------------------------- */
.svg-layout-wave {
    height: 60px;
}
.svg-layout-wave path {
    fill: #fff;
}
[data-bs-theme=dark] {
    .svg-layout-wave path {
        fill: #1a1a1a;
    }
}

/* -------------------- IMAGE BACKGROUND COVER ---------------------------------------------------------------------- */
.background-cover {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}



/* -------------------- PRODUKTE EINZELANSICHT ---------------------------------------------------------------------- */
.product-image {
    position: relative;
}
.product-image-container {
    width: 100%;
    height: 250px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.product-hover-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.2);
    opacity: 0;
    transition: opacity .3s;
}
.product-releated:hover .product-hover-overlay {
    opacity: 1;
}
.product-hover-overlay .product-hover-overlay-link {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}


/* -------------------- PRODUKTE STARTSEITE ------------------------------------------------------------------------- */

.service-card {
    padding: 1.5rem;
    border-radius: .5rem;
    background-color: #fff;
    transition: all .3s ease;
    border: 1px solid rgba(0,0,0,.1);
    height: 100%;
    color: rgba(var(--core-color-2-28-rgb), 1.0);
}
.service-card:hover {
    box-shadow: 0 10px 15px #0000001a;
    transform:translateY(-5px)
}

/* -------------------- CAROUSEL STARTSEITE ------------------------------------------------------------------------- */
.carousel-indicators [data-bs-target] {
    background-color: #000;
    border: 1px solid #000;
}

/* -------------------- Kundenstimmen ------------------------------------------------------------------------------- */
.avatar-lg {
    height: 5.5rem;
    width: 5.5rem;
}
.avatar {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.avatar img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
/*    height: 100%;*/
    display: block;
}



/* -------------------- Kundenstimmen ------------------------------------------------------------------------------- */
.z-index-1 {
    z-index: 1;
}



/* -------------------- BORDER -------------------------------------------------------------------------------------- */
.border-success {
    border-color: var(--border-color-success) !important;
}


/* -------------------- BORDER -------------------------------------------------------------------------------------- */
.bg-info {
    background: rgba(var(--core-color-1-24-rgb), 0.8) !important;
    color: var(--core-color-1-24-text) !important;
}
.bg-success {
    background: rgba(var(--core-color-2-28-rgb), 0.8) !important;
    color: var(--core-color-2-28-text) !important;
}

/* -------------------- LIST ITEM IMAGE - LEISTUNGEN ---------------------------------------------------------------- */
.list-item-image {
    color: var(--core-color-2-31) !important;
}

.list-item-image .row {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-tertiary-bg-rgb),var(--bs-bg-opacity)) !important;
}

.list-item-image .image {
    position: relative;
    overflow: hidden;
    /* clips the window through which the element is visible  */
    clip-path: polygon(
            190px 0, /* start 190px from top left */
            100%   0, /* to top right */
            100%   100%, /* to bottom right */
            0      100% /* to bottom left */
    );

    filter: grayscale(90%);
    -webkit-filter: grayscale(90%); /* Für ältere WebKit-Browser */

    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für Safari ältere iOS */
    -moz-transition: all 0.5s ease; /* Optional für alte Firefox-Versionen */
    -o-transition: all 0.5s ease; /* Optional für alte Opera-Versionen */
}

.list-item-image:hover .image {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

[data-bs-theme=dark] {
    .list-item-image {
        color: var(--bs-heading-color) !important;
    }
}

/* -------------------- CARD PLAIN PROJEKTE ------------------------------------------------------------------------- */
.card-plain .card-header-image {
    height: 300px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* -------------------- BTN ----------------------------------------------------------------------------------------- */
.btn {
    -webkit-clip-path: polygon(.5rem 0,100% 0,100% 100%,0 100%);
    clip-path: polygon(.5rem 0,100% 0,100% 100%,0 100%);
    border-radius: 0;
}
.btn-dark.btn-transparent {
    background-color: rgba(0,0,0,.25);
}


.btn-outline-dark {
    -webkit-clip-path: unset;
    clip-path: unset;
    border-radius: inherit;
}

/* -------------------- EINZELANSICHT EG PRODUKTE ------------------------------------------------------------------- */
.text-highlight h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 3.5rem !important;
}

.text-highlight h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 3.0rem !important;
}

/* -------------------- SHOW ON HOVER ------------------------------------------------------------------------------- */
.show-on-hover .show-on-hover-element {
    visibility: hidden;
}
.show-on-hover:hover .show-on-hover-element {
    visibility: visible;
}


/* -------------------- BLOCKKQUOTE --------------------------------------------------------------------------------- */
blockquote {
    border-left: 5px solid var(--bs-primary);
    padding-left: 1rem;
    margin: 1rem 0;
    font-style: italic;
    color: var(--bs-secondary-color);
    margin-top:25px;
    margin-bottom:25px;
}

/* -------------------- CCM19 --------------------------------------------------------------------------------------- */
.ccm-widget .ccm-modal--body,
.ccm-widget .ccm-modal--footer {
    background-color: rgba(var(--bs-tertiary-bg-rgb),1) !important;
}
.ccm-widget--text::after {
    background-image: linear-gradient(to top,var(--bs-tertiary-bg) 50%,#fff0 100%);
}
.ccm-widget .ccm--p,
.ccm-widget .ccm--h1,
.ccm-widget--language-switch,
.ccm-widget--language-select,
.ccm-widget .ccm-dismiss-button {
    color: var(--bs-secondary-color) !important;
}
.ccm-modal--footer .ccm-link-container a:link, .ccm-modal--footer .ccm-link-container a:visited, .ccm-powered-by a:link, .ccm-powered-by a:visited {
    color: #000000;
    padding-bottom:10px;
}
[data-bs-theme=dark] {
    .ccm-modal--footer .ccm-link-container a:link, .ccm-modal--footer .ccm-link-container a:visited, .ccm-powered-by a:link, .ccm-powered-by a:visited {
        color: var(--bs-secondary-color) !important;
    }
}


/* -------------------- SM ------------------------------------------------------------------------------------------ */
.show-md {
    display: none;
}
.hide-md {
    display: unset;
}
@media (max-width: 768px) {
    .show-md {
        display: unset;
    }
    .hide-md {
        display: none;
    }
}