@charset "UTF-8";

@font-face {
    font-family: 'OpenSans';
    src: url('../components/fonts/OpenSans-VariableFont.ttf');
}
:root{
  --color-basic: #505155;
  --color-secondary: #505155;
  --color-font-basic: #505155;
  --color-font-basic-light: #1a1b1f66;
  --color-bg:#534f4c;
  --color-light-bg:#f1f1f1;
  --color-light-blue-bg: #0496d8;
  --cassiopeia-color-primary: #0496d8;
  --color-font-basic: #505155;
  --body-color: #505155;
  --content-block-margin: clamp(40px,15vh,90px);
  --content-h1-font-size: clamp(1.3rem, 30vw, 2.3rem);
  --content-h2-font-size: clamp(1.2rem, 6vw, 1.6rem);
  --content-h3-font-size: clamp(1rem, 6vw, 1.4rem);
  --content-p-font-size: clamp(1rem, 1.8vw, 1.2rem);
  --body-font-family: 'OpenSans', sans-serif;
  --cassiopeia-font-family-headings:'OpenSans', sans-serif;
  --body-font-weight: 400;
  --box-shadow:rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
  --horizontal-site-padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  font-family: var(--body-font-family);
  font-size: var(--content-p-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  color: var(--body-color);
  text-align: var(--body-text-align);
  background-color: var(--body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
main h1{
  font-size: var(--content-h1-font-size);
}
h1{
  color:var(--color-basic);
  position: relative;
  padding: 0;
  margin: 0;
  font-weight: 300;
  /* font-size: 40px; */
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  margin-bottom: 25px;
}
main h1 {
    text-align: center;
    font-size:30px;
    font-weight:300;
    /* color:#222;  */
    letter-spacing:1px;
    text-transform: uppercase;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto 0;
    grid-gap: 20px;
    align-items: center;
    margin-bottom: 20px;
}

main h1:after,main h1:before {
    content: " ";
    display: block;
    border-bottom: 1px solid var(--color-secondary);
    border-top: 1px solid var(--color-secondary);
    height: 3px;
    background-color:var(--color-secondary);
}
main a{
  text-decoration: none;
  color:inherit;
}
main h2{
  font-size: var(--content-h2-font-size);
  color:var(--color-basic);
  margin-bottom: 30px;
}
main h3{
  font-size: var(--content-h3-font-size);
}
main p{
  font-size: var(--content-p-font-size);
}
/* BASICS END */

.grid-child {
  max-width: none;
  width: 100%;
}

/* Header / Logo + Menü */


  .container-header .navbar-brand a img{
    width:300px;
  }
  header.container-header{
    background-color: var(--color-bg) !important;
    background-image:none !important;
  }
  header.container-header .header{
    display: grid;
    grid-template-columns: 300px 1fr;
  }
  header.container-header .container-nav{
    display: flex;
    flex-wrap: none;
    justify-content: flex-end;
    align-items:center;
    padding-bottom: 0;
  }
  header.container-header .fa-bars::before{
    font-weight: 200;
  }
  header.container-header .container-nav .dj-megamenu-clean > li > a.dj-up_a{
    color:#fff;
    text-transform:uppercase;
    transition: all ease .4s;
    font-weight: 500;
  }
  header.container-header .container-nav .dj-megamenu-clean > li > a::after{
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    top: 100%;
    left: 0;
    background: #fff;
    transition: transform 0.5s;
    transform: scaleX(0);
    transform-origin: right;
  }
  header.container-header .container-nav .dj-megamenu-clean > li >  a:hover , header.container-header .container-nav .dj-megamenu-clean > li.active > a , header.container-header .container-nav .dj-megamenu-clean > li ul li a:hover , header.container-header .container-nav .dj-megamenu-clean > li ul li.active > a{
    /* transform: translateY(3px); */
  }
  header.container-header .container-nav .dj-megamenu-clean > li > a:hover::after , header.container-header .container-nav .dj-megamenu-clean > li.active > a::after {
    transform: scaleX(1);
    transform-origin: left;
  }
  header.container-header .quick-contact-bar{
    display: flex;
    flex-wrap: none;
    justify-content: center;
    align-items: center;
    padding-bottom: 0;
  }
  @media screen and (max-width:980px){
    header.container-header .quick-contact-bar{
      display: none;
    }
    header.container-header .header{
      display: grid;
      grid-template-columns: 250px 1fr;
    }
    header.container-header .container-nav {
      justify-content: flex-end;
    }
  }
  header.container-header .quick-contact-bar > .container-topbar{
    height:auto;
  }
  body a.btn-lz, body button.btn-lz{
    width: auto;
    height: 40px;
    padding: 10px 25px;
    border: 2px solid var(--color-basic);
    font-weight: 400;
    font-size: var(--content-p-font-size)!important;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    text-decoration: none;


    background: var(--color-basic);
    color: #fff;
    line-height: 42px;
    padding: 0;
    border: none;
  }
  body a.btn-lz span , body button.btn-lz span{
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      padding:0 15px;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  body a.btn-lz:before,
  body a.btn-lz:after ,
  body button.btn-lz:before,
  body button.btn-lz:after {
    position: absolute;
    content: "";
    height: 0%;
    width: 2px;
    background:var(--color-basic);
  }
  body a.btn-lz:before ,
  body button.btn-lz:before {
    right: 0;
    top: 0;
    transition: all .7s ease;
  }
  body a.btn-lz:after,
  body button.btn-lz:after {
    left: 0;
    bottom: 0;
    transition: all .7s ease;
  }
  body a.btn-lz:hover,
  body button.btn-lz:hover{
    color: var(--color-basic);
    background: #fff;
  }
  body a.btn-lz:hover:before,
  body button.btn-lz:hover:before {
    transition: all .7s ease;
    height: 100%;
  }
  body button.btn-lz:hover:after,
  body a.btn-lz:hover:after {
    transition: all .7s ease;
    height: 100%;
  }
  body a.btn-lz span:before,
  body a.btn-lz span:after,
  body button.btn-lz span:before,
  body button.btn-lz span:after {
    position: absolute;
    content: "";
    background: var(--color-basic);
  }
  body a.btn-lz span:before,
  body button.btn-lz span:before {
    left: 0;
    top: 0;
    width: 0%;
    height: 2px;
    transition: all .7s ease;
  }
  body a.btn-lz span:after,
  body button.btn-lz span:after {
    right: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    transition: all .7s ease;
  }
  body a.btn-lz span:hover:before,
  body button.btn-lz span:hover:before {
    width: 100%;
  }
  body a.btn-lz span:hover:after,
  body button.btn-lz span:hover:after {
    width: 100%;
  }

  .container-header .topbar{
    background-color: var(--color-secondary);
    margin:0px 0 10px 0;
    font-size: 13px;
    letter-spacing: 5px;
    color: #666;
    text-align: center;
    padding:15px;
    box-shadow: var(--box-shadow);
  }

/* Header / Logo + Menü END */


/* Content  */

  .site-grid{
    display: block !important;
    grid-template-rows: none;
    grid-template-columns: none !important;
    /* grid-template-areas:none; */
  }
  .grid-child {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: none;
    width: 100%;
  }
  .site-grid > div:first-of-type , .site-grid > div:last-of-type{
    padding: 0;
  }
  .site-grid > div{
    padding: var(--content-block-margin) 0;
  }
  .site-grid p{
    font-size: var(--content-p-font-size);
  }
  .site-padding{
    padding: var(--horizontal-site-padding);
  }
  .navi-padding{
    padding:25px 50px;
  }
  @media screen and (max-width:768px){
    .site-padding{
      padding: 0 15px;
    }
    .navi-padding{
      padding:15pxpx;
    }
  }

  .site-padding > div > div.n2-section-smartslider{
    box-shadow: var(--box-shadow);
  }
  .blog-item {
    overflow: visible;
  }
  figure.flex-format-img{
    height:100%;
  }
  figure.flex-format-img img{
    height:100%;
    object-fit: cover;
    object-position: center;
  }
  .bg-gray-light{
    background-color:var(--color-light-bg);
    box-shadow: var(--box-shadow);
    padding:40px 0;
  }
  .bg-blue-light{
    background-color:var(--color-light-blue-bg);
    /* background-image: url('/images/kundenordner/bg-neu.jpg'); */
    background-position: center;
    background-size: cover;
    box-shadow: var(--box-shadow);
    color: #333;
  }
  .overflow-cut{
    padding:40px 0;
    overflow: clip;
  }
  .bg-blue-light.background-icon-right .container > .background-icon-padding{
    padding-right:225px;
    position: relative;
  }
  .bg-blue-light.background-icon-right .container > .background-icon-padding::after{
    content: '\f559' !important;
    font-family: "Font Awesome 6 Pro";
    font-weight:200;
    color:#0496d888;
    position: absolute;
    right: 0;
    top: -114px;
    font-size: 263px;
    transform: rotate(15deg);
  }
  .pl-1{
    padding-left: 10px;
  }
  @media screen and (max-width:768px){
    .bg-blue-light.background-icon-right .container > .background-icon-padding{
      padding-right:50px;
    }
    .bg-blue-light.background-icon-right .container > .background-icon-padding::after{
      content: '\f05a' !important;
      font-family: "Font Awesome 6 Pro";
      font-weight:300;
      color:#0496d888;
      position: absolute;
      right: 0;
      top: -40px;
      font-size: 400px;
      transform: rotate(15deg);
    }
  }
  ul.check-list {
      list-style: none;
      padding: 0;
      display: block;
  }
  ul.check-list li {
    color: RGBA(0,0,0,0.5);
    line-height: 1.5;
    font-size:1.2em;
      padding-left: 2em;
      display: block;
      margin-top: 15px;
  }
  ul.check-list li::before {
      display: inline-block !important;
      content: '\f058' !important;
      font-family: "Font Awesome 6 Pro";
      color:var(--color-basic) !important;
      position: absolute;
      font-weight: 200;
      font-size: 1.3em;
      margin-right: 1em;
      transform: translate(-1.3em, -4px);
  }
  .start-content h1.blue{
    /* color:var(--color-basic);font-weight: 400; */
  }
  main .blog-items {
    margin: 0 0 var(--content-block-margin) 0;
    grid-template-columns: 100%;
  }
  main .blog-items:last-of-type {
    margin: 0;
  }
  main .blog-items > .blog-item{
    margin: 0 0 var(--content-block-margin) 0;
  }
  main .blog-items > .blog-item:last-of-type {
    margin: 0;
  }
  .background-img{
    min-height: 600px;
    background-size: cover;
    background-position: 50% 30%;
    padding:40px 15px;
    display: grid;
    justify-content: center;
    align-items: start;
    position: relative;
    box-shadow: var(--box-shadow);
  }
  .background-img::after{
    content:" ";
    display: block;
    background-color: #3334;
    height:100%;
    width:100%;
    position: absolute;
    z-index: 2;
  }
  .background-img .container {
    display: grid;
    justify-content: center;
    align-items: center;
  }
  .background-img .d-flex-center{
    color:#fff;
    font-size: 4em;

    text-align: center;
    z-index: 5;
  }
  .background-img .d-flex-center p{
    font-size: var(--content-h2-font-size);
  }
  .start-content-row{
    /* background-color: var(--color-light-bg); */
    /* box-shadow: var(--box-shadow); */
  }
  .start-content-row > .text-col{
    padding:10px;
    display: grid;
    justify-content: center;
    align-items: center;
  }
  .start-content-row figure{
    margin:0;
    overflow: hidden;
    border-radius: 20px;
  }
  .start-content-row figure > img{
    box-shadow: var(--box-shadow);
    min-height:auto;
    height:100%;
    width:100%;
    object-fit: cover;
    transition: all ease .6s;
  }
  .start-content-row:hover figure > img{
    transform:scale(1.3);
  }
  @media screen and (min-width:768px){
    .main-content > div.img-col{
      display: grid;
      justify-content: flex-end;
    }
  }
  .service-card .card{
    border:none;
    position: relative;
    box-shadow: var(--box-shadow);
  }
  .service-card .card .card-header{
    background-color: #fff0;
    padding:0;
    border:none;
    height:250px;
    overflow: clip;
  }
  .service-card .card .card-header img{
    height:250px;
    width:100%;
    object-fit:cover;
    transition: all ease .4s;
  }
  .service-card .card .card-body{
    position: absolute;
    width:100%;
    height:auto;
    background-color: #0005;
  }
  .service-card .card .card-body p{
    color:#fff;
    margin:0;
    letter-spacing: 1px;
  }
  /* .service-card .card .card-body p i{
    transition: all ease .4s;
    transform: translate(15px , 2px);
  }
  .service-card a:hover .card-header img{
    transform:scale(1.1);
  }
  .service-card a:hover .card .card-body p i{
    transform: translate(25px , 2px);
  } */
  .services-container .row {
    justify-content: center;
  }
  .services-container .row > div{
    margin-bottom: 30px;
  }
  main .table > :not(caption) > * > * {
    padding: .5rem .5rem;
    /* background-color: #fff0; */
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
  }
/* Content  END*/

/* Footer */

  .contact-footer{
    padding: 30px 0 0 0;
    background-color:var(--color-light-bg);
    box-shadow: var(--box-shadow);
    background-image: url('../images/shutterstock_129446675.jpg');
    background-repeat: repeat;
    background-position: 50% 50%;
  }
  .contact-footer .hgd-bottom-box{
    margin-bottom: 30px;
  }
  .contact-footer .footer-logo img{
    width:250px;
    max-width:100%;
  }
  .contact-footer .hgd-bottom-box h3{
    font-size:var(--content-h2-font-size);
    font-weight: normal;
    margin-bottom: 15px;
  }
  .contact-footer .hgd-bottom-box p, .contact-footer .hgd-bottom-box a{
    font-size:16px;
  }
  .contact-footer .hgd-bottom-box a{
    color:inherit !important;
    text-decoration: none;
  }
  .contact-footer .hgd-bottom-box i{
  }
  .contact-footer .hgd-bottom-box p{
    margin:0 !important;
  }
  .contact-footer .hgd-bottom-box ul.menu{
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .contact-footer .hgd-bottom-box table tr , .contact-footer .hgd-bottom-box table tr td{
    border:none !important;
  }
  .container-bottom-a > *, .container-bottom-b > *, .container-top-a > *, .container-top-b > * {
    margin: 0;
  }
  .table > :not(caption) > * > * {
    padding: 0;
  }
  .table {
    color: var(--body-color);
  }
/* Footer END*/

/* Copyright */

  .footer{
    margin-top:0 !important;
    background-image:none;
    background-color:#fff0;
    color:var(--color-font-basic-light);
    font-size: 14px;
    text-align: center;
  }

  .footer .grid-child {
    padding: 40px 0;
  }

/* Copyright END*/