:root {
  --primary-color: #b91548;
  --secondary-color: #5b7896;
  --third-color: #aec7db;
  --black-color:#1c1a1a;
  --black-color-old: #111010;
  --white-color:#fbfbfa;
  --grefy-color: #9d9d9c;
  --lightgrey-color: #F3F3F3;
  --body-bg: #FAF9F6;
  --body-color:#22262a;
}

/*Basic Body und abstaende*/
.site-grid .grid-child{
  margin-top:2vh;
  margin-bottom:2vh;f
}
body{
      max-width: 100vw !important;
    overflow-x: hidden;
  font-family:Montserrat !important;

}


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

  body{
   word-break: break-word;
}
}

.site-grid{
   max-width: 100vw !important;
    overflow-x: hidden;
}
.container-bottom-a {
  display:block;
}
.container-bottom-b{display:block;
                      }
.bottom-b, .bottom-a{
   margin-left: calc(-50vw + 50% + 10px);
    margin-right: calc(-50vw + 50%);
    max-width: calc(100vw - 20px);
    padding-top: 30px;
    padding-bottom: 20px;
}
.icons{
  display:none;
}
.jmodedit{
  display:none;
}

figure {
    margin: 0 0 0em;
}
/*this gives rows seperation*/
.row>* {
    padding-right: calc(var(--gutter-x)* .5);
    padding-left: calc(var(--gutter-x)* .5);
    padding-bottom: calc(var(--gutter-x)* .5);
  padding-top: calc(var(--gutter-x)* .5);

}
/*deactivate card*/
.card{
  border:0px !important;
}

.card-header {
  display:none !Important;
    color: var(--card-cap-color);
    background-color: unset !important;
  border-bottom: 0px solid !important;
}

.card-body{
  padding:0px !important;
}

/*barrierefreiheit*/

.bfh div{
    display:grid;
}

.first{
  order:1 !important;
}

.second{
  order:2 !important;
}

.third{
  order:3 !important;
}

.row{
  list-style:none;
      padding-left: 0rem;
}

.row li{
  display:grid;
}

.hiddenelement{
  transform: scale(0); /*ist visuell 0px groß */
}

.tomainbtn{
  position:absolute !important;
  top:10px;
  left:10px;
  background:var(--white-color);
  color:var(--black-color) !important;
  padding:10px;
  border:1px solid !important;
  z-index:200;
      transform: scale(0); /*ist visuell 0px groß */
  border-radius:20px !important;
}
.tomainbtn:focus{
      transform: scale(1); /*Wenn mit TAB im Focus wird er sichtbar */
}

/*hideon*/

.hideonphone{
  display:block;
}
.hideonpc{
  display:none;
}

@media only screen and (max-width: 576px) {
.hideonphone{
  display:none !important;
}
  .hideonpc{
  display:block !important;
}
}


/*basics*/

/*fonts */ 
/* open-sans-regular - latin */
@font-face {src: url('/media/templates/site/cassiopeia/fonts/MaxPro-Book.woff2') format('woff2'); font-display: swap; font-family: 'MaxPro'; font-style: normal; font-weight: 400}

/* open-sans-regular - latin */
@font-face {src: url('/media/templates/site/cassiopeia/fonts/open-sans-v40-latin-regular.woff2') format('woff2'); font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 400}

/* open-sans-regular - latin */
@font-face {src: url('m/media/templates/site/cassiopeia/fonts/montserrat-v30-latin-regular.woff2') format('woff2'); font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 400}



a {color:var(--primary-color);}
a:hover{color:var(--secondary-color);}
a:focus {color:var(--third-color);}

.centertext{
text-align:center;
}

.abstandshalter{
padding:20px;
}

.flexwrapper{
  display:flex;
}

@media
 only screen and (max-width: 600px) {
  .flexwrapper{
  display:block;
}

   .calltoactionwrapper .flexwrapper{
  display:flex;
}
}


.verticalcenter{
  position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
/*text*/
h1{
color: var(--primary-color);
  font-family: 'MaxPro',sans-serif !important; 
text-transform: uppercase;
}
h2{
  color:var(--black-color);
  text-transform:uppercase;
  font-weight:500;
}
h1 a, h2 a, h3 a, h4 a{
text-decoration:none !Important;
}
p{fonts-size:16px;line-height:1.6;}
h3{
  font-weight:500;
}

/*Color*/
.primarycolor{
  color: var(--primary-color);
}
.white{
color:var(--white-color);
}

.primarybg{
  padding:40px;
background-color: var(--primary-color);
}

.secondarybg{
  padding:40px;
background-color: var(--secondary-color);
}

.blackbg{
    padding:40px;
/*background: var(--black-color);
background: linear-gradient(129deg,rgba(17, 16, 16, 1) 0%, rgba(17, 16, 16, 1) 50%, rgba(4, 4, 36, 1) 64%, rgba(17, 16, 16, 1) 79%, rgba(17, 16, 16, 1) 100%);*/
  color:var(--white-color);

background-color: var(--black-color);
opacity: 1;
background-image:  linear-gradient(#161515 1.5px, transparent 1.5px), linear-gradient(to right, #161515 1.5px, #1c1a1a 1.5px);
background-size: 30px 30px;
}

.greybg{
    padding:40px;
background-color: var(--lightgrey-color);
}

@media
 only screen and (max-width: 800px) {
  .primarybg,.secondarybg, .greybg, .blackbg {
    padding:20px;
  }
}

@media
 only screen and (max-width: 400px) {
  .primarybg,.secondarybg, .greybg, .blackbg {
    padding:10px;
  }
}

/*boxen*/

.fullwidthox {
    margin-left: calc(-50vw + 50% + 10px);
    margin-right: calc(-50vw + 50%);
    max-width: calc(100vw - 20px);
    padding-top: 30px;
    padding-bottom: 20px;
}

.centerbox{
width:fit-content;
margin:auto;
}

.width60{
width:60%;
margin:auto;
}

@media
 only screen and (max-width: 1600px) {
  .width60{
    width:80%;
}
}

@media
 only screen and (max-width: 600px) {
  .width60{
    width:98%;
    
}
}

.width80{
  width:80%;
margin:auto;
}

@media
 only screen and (max-width: 1000px) {
.width80{
  width:90%;
}
}

@media
 only screen and (max-width: 600px) {
.width80{
  width:97%;
  overflow-x:hidden;
}
}

/*btn*/
button{
  color: var(--black-color);
  border:1px solid var(--black-color);
  background:transparent;
   padding:10px 15px 10px 15px;
   border-radius:20px;
}

button:hover{
  background: rgba(0, 0, 0, 0.05);
}
button i{
  margin-right:5px;
}

.primarybtn{
    padding:10px 15px 10px 15px;
    background-color:var(--primary-color);
  width:fit-content;
  border-radius:20px;
  border:0px solid;
    color:var(--white-color);
    text-decoration:none;

}
.primarybtn:after{
  content:"›";
  margin-left:20px;
}


.primarybtn:hover{
  opacity:0.8;
    background-color:var(--primary-color);
  color:white;
}

.secondarybtn{
    padding:10px 15px 10px 15px;
    background-color:var(--secondary-color);
  width:fit-content;
  border-radius:20px;
  border:0px solid;
    color:var(--primary-color);
    text-decoration:none;

}
.secondary:hover{
  opacity:0.8;
}


.whitebtn{
    padding:10px 15px 10px 15px;
    background-color:var(--white-color);
  width:fit-content;
  border-radius:20px;
    color:var(--primary-color);
    text-decoration:none;

}

.btn-secondary{
   background-color:var(--primary-color);
  color:var(--white-color);
  }
.btn-secondary:hover{
   background-color:var(--primary-color);
  color:var(--white-color);
   opacity:0.8;
  }
.btn-secondary:focus{
     background-color:var(--primary-color);
  color:var(--white-color);
   opacity:0.8;
  }
.readmore span{
  display:none;
}

/* nav (weiß) mit Cassiopeia Collap / Dropdown */


.container-header {
  position:absolute;
  width:100%;
}
.navbar-brand{
        position: absolute !important;
    left: 20px;
}
.brand-logo img{
  height:60px;
  width:auto;
float:left;
}


.container-header {
    background-color: transparent !important;
    color:var(--black-color);
    background-image: none;
}
.container-header .navbar-toggler {
    border: 0px solid #fff;
    color:  var(--white-color);
    cursor: pointer;
  width:100%;
  text-align:right;
}

.nav-item{
  color:var(--black-color);
}

.container-header .container-nav .container-search:only-child{
  margin:auto !Important;
}

.metismenu.mod-menu .mm-toggler:after {
    border-left: 0.3em solid transparent;
    border-right: 0.3em solid transparent;
    border-top: 0.3em solid;
  }

/*nav toggle stays right */
.navbar{
  display:block !important;
  text-align:right;
}
.container-header .container-nav {
    justify-content: flex-end !important;
}

.headerless .container-header{
  background:var(--black-color) !important;
  padding-bottom:30px;
}

.headerless .site-grid{
  margin-top:50px;
}

@media only screen and (max-width: 768px) {
  .headerless .container-header{
  padding-bottom:100px;
   }
  }

/* Footer */
.footer{
   background-color: var(--third-color);
    background-image: none;
}

.footer a{
   text-decoration:none;
}

.footer a:hover{
      text-decoration: underline;
}


.footer .mod-custom {
width:100%;
}

/*Screen kleiner als 200 */
@media
 only screen and (max-width: 200px) {
h1, h2, h3{
  font-size:0.8em !important;
    word-wrap: break-word !important;
}
  }

p{    text-align: justify;}
@media
 only screen and (max-width: 200px) {
p{
  font-size:0.8em !important;
  word-wrap: break-word !important;

}
  }


  .offline-card .header{
    background-color: #ad003f;
    background-image: none;
    background-image: none;
    }

    .btn-primary {
    background-color: #ad003f;
    border:0px solid;
    color:var(--white-color);
}
.offline-card .logo-icon{
  display:none;
}

.offline-card .header h1 img{
  display:none !Important;
}
.offline-card .header h1{
    background-image: url(https://www.kutzner-beratung.com/images/kutzner_logo_w.png);
    height: 5vw;
    width: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }


/*slick slider */
/* Slider */

.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
}

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-slider .shadowbox{
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 15px 0px;
}
.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
  padding-bottom:2vh;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
.slick-track .slick-slide .flexwrapper p{
  color:var(--black-color);
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

.customer-logos img:hover{
  filter:brightness(0.4);
}

.customer-logos img{
  filter:brightness(0.6);
}

.customer-logos{
  margin-bottom:20px;
}

/*slider controle*/
  .slick-prev, .slick-next {
    position: absolute;
    top: 50%;
    display: block;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
        
        color:var (--primary-color) !important;
    background-color: transparent !important;
    box-shadow:none!important;
        padding:10px;
        font-size:0;

        width: fit-content;
    height: auto;
    aspect-ratio: 1;
    border:0px;
        
}


      .slick-next:before {
    content: '❯';
        color: var(--primary-color);
        padding:5px;

}

            .slick-prev:before {
    content: '❮';
        color: var(--primary-color);
              padding:5px;


}
      
      .slick-next:before, .slick-prev:before {
      font-family: 'slick';
    font-size: 40px ;
    line-height: 1;
    opacity: .75;
        }
      
      .slick-next {
    right: -50px;
}

 .slick-prev {
    left: -50px;
}



.slick-track
{
    display: flex !important;
}

.slick-slide
{
    height: inherit !important;
}

/*header*/
.headerwrapper h1{
  font-size:6em;
}

@media only screen and (max-width: 768px) {
.headerwrapper h1{
  font-size:3em;
}
}

/*home */
.overlaytext {
float:Right; width:fit-content; text-align:right;
}
.overlaytexttwo{
  max-width:40%; 
  float:right;
}

@media only screen and (max-width: 768px) {
.overlaytext {
float:none !Important; 
  width:fit-content; 
  text-align:left;
}
.overlaytexttwo{
  max-width:80%; 
  float:none !Important;;
}
}


 .blackbg h2{
    color:var(--white-color);
  }

  .blackbg .bigh2{
    font-size:8em;
  }
@media only screen and (max-width: 600px) {
   .blackbg .bigh2{
    font-size:3em;
  }
}

.bigh2{
    font-size:8em;
  }

  .overlaywrapper{
    position:relative;
    padding:0px !Important;
  
  }

    .overlaywrapper .overlay{
    position:absolute;
      left:0px;
      top:0px;
      z-index:3;
  
  }

  .overlaytext{
margin-right:-100px;
    z-index:2;
    position:relative;
    width:100% !important;
  }


/*referenzen home*/

.referenzentitlewrapper .bigh2{
  font-size:10em;
  text-align:center;
  z-index:2;
  margin-bottom:-60px;
  position:relative;
}
.referenzenwrapper{
 /* max-width:90%;
  margin:auto;*/
}
@supports (display:grid) {
    .referenzenwrapper{
        grid-template-columns: repeat(3, minmax(200px, 2fr));
        grid-gap: 3rem;
      }

   @media only screen and (max-width:1000px ) {
 .referenzentitlewrapper .bigh2{
font-size:6em;
   }
}
 @media only screen and (max-width:768px ) {
 .referenzenwrapper{
        grid-template-columns: repeat(1, minmax(100px, 2fr));
        grid-gap: 1rem;
      }
    .referenzentitlewrapper .bigh2{
font-size:3em;
        margin-bottom:-40px;
   }
}
   @media only screen and (max-width:300px ) {
 .referenzenwrapper{
        grid-template-columns: repeat(1, minmax(100px, 1fr));
        grid-gap: 1rem;
      }
         .referenzentitlewrapper .bigh2{
font-size:1.5em;
              margin-bottom:-0px;
   }
}
  
  .referenzenwrapper li {
    position:relative;
  }
.referenzenwrapper li h4{
    background: var(--white-color) !important;
    padding: 0px 1px;
    font-size: 2rem;
    color: var(--black-color);
    width: fit-content;
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    /* overflow-wrap: break-word; */
    word-break: break-word;
    hyphens: auto;


}

   .referenzenwrapper .titlewrapper{
                        order: 2;
           z-index:2;
            position: absolute;
            text-align: left;
            bottom: 5%;
            left: 5%;
            padding-right: 5% !important;
                        display: block;
            /* background: linear-gradient(0deg, rgba(17, 16, 16, 0.53) 44%, rgba(17, 16, 16, 0) 94%); */
            opacity: 1;
          width: fit-content;
  }
  .referenzenwrapper li:hover figure, .referenzenwrapper li:focus figure{
      /*  filter: brightness(0.5);*/
  }
  
.referenzenwrapper li:hover h4,.referenzenwrapper li:focus h4{

  
}
 @media only screen and (max-width:768px ) {
  .referenzenwrapper li h4{

  }
     .referenzenwrapper li figure, .referenzenwrapper li figure{
        /*filter: brightness(0.5);*/
  }
   }

.referenzenwrapper li figure{
aspect-ratio:1;
  overflow:hidden;
  
}

.referenzenwrapper li figure img{
height:100%;
  width:auto;
  max-width:unset !important;
  
}

/*rot ohne kurven*/
.referenzenwrapper li:nth-child(even) figure{
  overflow:hidden;
 box-shadow:  inset 0 0 0 1000px rgba(184,21,72,.6);
    border-radius:0px !important;
  background:var(--body-bg:--body-bg);
}
/*
  .referenzenwrapper li:nth-child(even):hover figure{
    border-radius:40px !important;
    transition:0.5s;
}*/
  
.referenzenwrapper li:nth-child(even) figure img{
opacity:0.8;
}

/*nüx*/
.referenzenwrapper li:nth-child(odd) figure {
transition:0.5s;
}

/*  .referenzenwrapper li:nth-child(odd):hover figure,.referenzenwrapper li:nth-child(odd):focus figure {
border-radius:40px;
    transition:0.5s;
}*/

/*all rund*/
.referenzenwrapper li:nth-child(1n+4) figure{
    border-radius: 20px;
    overflow:hidden;
  transition:0.5s;
  
}

/*  .referenzenwrapper li:nth-child(1n+4):hover figure,  .referenzenwrapper li:nth-child(1n+4):focus figure{
    border-radius: 60px;
    overflow:hidden;
    transition:0.5s;
  
}*/

/*oben rund*/
.referenzenwrapper  li:nth-child(2n+5) figure{
    border-radius: 200px 200px 0px 0px !important;
    overflow:hidden;
  transition:0.5s;
  
}

/*  .referenzenwrapper  li:nth-child(3n+8):hover figure, .referenzenwrapper  li:nth-child(3n+8):focus figure {
    border-radius: 200px 200px 200px 200px !important;
    transition:0.5s;
  
}*/

  /*simplerefferenzen*/
@supports (display:grid) {
    .simplereferenzenwrapper{
        grid-template-columns: repeat(3, minmax(200px, 2fr));
        grid-gap: 3rem;
      }

 @media only screen and (max-width:768px ) {
 .simplereferenzenwrapper{
        grid-template-columns: repeat(1, minmax(100px, 2fr));
        grid-gap: 3rem;
      }
}


  .simplereferenzenwrapper li {
    position:relative;
    overflow:hidden;
  }
.simplereferenzenwrapper li h4{
    background: var(--white-color) !important;
    padding: 0px 1px;
    font-size: 2rem;
    color: var(--black-color);
    width: fit-content;
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    /* overflow-wrap: break-word; */
    word-break: break-word;
    hyphens: auto;


}

    .simplereferenzenwrapper .titlewrapper{
                        order: 2;
           z-index:2;
            position: absolute;
            text-align: left;
            bottom: 5%;
            left: 5%;
            padding-right: 5% !important;
                        display: block;
            /* background: linear-gradient(0deg, rgba(17, 16, 16, 0.53) 44%, rgba(17, 16, 16, 0) 94%); */
            opacity: 1;
          width: fit-content;
  }
  
  .simplereferenzenwrapper li:hover figure, .simplereferenzenwrapper li:focus figure{
        /*filter: brightness(0.5) grayscale(0.3);*/
      transition:0.5s;
  }
  
.simplereferenzenwrapper li:hover h4,simplereferenzenwrapper li:focus h4{
  /*opacity:1;
      transform: scale(1);
  transition:0.5s;*/

  
}

.simplereferenzenwrapper li figure{
aspect-ratio:1/1;
  overflow:hidden;
              display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
  
}

.simplereferenzenwrapper li figure img{
height:100%;
  width:auto;
  max-width:unset !important;
  
}



    .imgbg{
      background-image:url("/images/home/bremen_stadtmusikanten_1.webp");
    background-size:cover;
    background-repeat:no-repeat;
    background-position:top;
    padding:40px;
    color:var(--white-color);
        box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, .3);
      min-height:40vh;
          background-attachment: fixed;
          text-shadow: 4px 3px 7px black;
    }
   .imgbg h2{
     color:var(--white-color)
   }

/*accordion*/
  details{
  background-color: var(--white-color);
  color: var(--black-color);
    margin-bottom:10px;
    padding:10px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 15px 0px;
  }

summary {
  padding: .5em 1.3rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  transition: height 1s ease;
  text-transform: uppercase;
}

summary::-webkit-details-marker {
  display: none;
}

summary:after{
  content: "\002B";
  font-weight:bold;
}
.foldout{
  background-color:var(--white-color);
  }
details[open] summary {
    /*border-bottom: 1px solid #aaa;
    margin-bottom: .5em;*/
}

details[open] summary:after{
  content: "\00D7";
}

details[open] div{
  padding: .5em 1em;
}
  .accordion summary, .foldout{
    /*font-size:1rem;*/
  }

/*social media*/
  
 .socialmediaheaderwrapper{
  background:var(--black-color);
    width:100%;
    padding:50px;
    background-size:contain;
    background-position:center;
   background-color:#1c1a1a;
opacity: 1;
background-image:  linear-gradient(#161515 1.5px, transparent 1.5px), linear-gradient(to right, #161515 1.5px, #1c1a1a 1.5px);
background-size: 30px 30px;
  }
 .socialmediaheaderwrapper h1{
   color:var(--white-color);
 }

.animationswrapper {
  top: 0;
  left: 0;
  width: 100%;
  height: 60vh;      /* füllt den Bildschirm */
  background: no-repeat center center;
  background-size: contain;
  transition: background-image 0.1s ease-out;
  z-index: -1;       /* liegt hinter anderem Inhalt */
      
       
    }

    .leistungswrapper{
    padding:5px;
  }
    .leistungswrapper h2,.leistungswrapper h3 {
  color:var(--primary-color)!Important;
  }
  .leistungswrapper i{
      color:var(--primary-color)!Important;
  }
    .leistungswrapper li{
      display:block !Important;
    }
    .leistungsinnerwrapper{
    background:var(--white-color);
    color:var(--black-color)!Important;
    padding:10px;
    border-radius:5px;
          align-content: end;
        color:var(--white-color); 
      display:grid;
          box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 15px 0px;
      height:100%;
      align-content: baseline;
  }

  /*Reveal on scroll*/
    
  .reveal {
  position: relative;
  opacity: 0;
}
.reveal.active {
  opacity: 1;
}
  
.active.fade-bottom {
  animation: fade-bottom  0.5s ease-in;
}
.active.fade-left {
  animation: fade-left  0.5s ease-in;
}
.active.fade-right {
  animation: fade-right 0.5s ease-in;
}

  .active.fade-blend {
  animation: fade-blend 1s ease-in;
}

  .homeheader .headertext  {
  animation: fade-bottom  0.5s ease-in;
}


@keyframes fade-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

  @keyframes fade-blend {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
  
@keyframes fade-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@media only screen and (max-width: 768px) {
  .homeheader h2{
    text-align:center;
  }
  .container-header .grid-child{
    padding:0px !important;
  }
  }
  i:before{
        line-height: 1.5;
    margin-right:4px;
  }


    /*Webdesign*/

   .responsivewrapper{
     position: relative;
    overflow:hidden;
    width:100%;
    height:60vh;
    }
  @media only screen and (max-width: 450px) {
  .responsivewrapper{
     height:50vh;
  }
}
  

.responsivewrapper img{
  /*box-shadow:rgba(100, 100, 111, 0.2) 0px 7px 15px 0px;*/
 }
    .responsivewrapper .pcansicht{
    position:absolute;
      width:70%;
      /*left:0;
      right:0;*/
      margin-left:auto;
      margin-right:auto;
      /*top: 50%;
      left: 50%;*/
      transform: translate(30%, 60%);


        animation: movepc 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);

  animation-iteration-count: 1;
  animation-fill-mode: both;
      z-index:1;
    }

  @keyframes movepc {

  to {
    transform: translate(10%, 50%);

  }
}

      .responsivewrapper .handyansicht{
    position:absolute;
      width:20%;
      right:20px;
      top: 30%;

                animation: movehandy 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);

  animation-iteration-count: 1;
  animation-fill-mode: both;
      z-index:1;
    }

    @keyframes movehandy {

  to {
    transform: translate(20%, 30%);

  }
}

  
      .responsivewrapper .tablettansicht{
    position:absolute;
      width:20%;
           margin-left:auto;
      margin-right:auto;
      left: 50%;
        bottom:10%;
      /*transform: translate(-20%, -10%);*/

        animation: movetablett 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);

  animation-iteration-count: 1;
  animation-fill-mode: both;
      z-index:1;
    }


  @keyframes movetablett {

  to {
    transform: translate(10%, 20%);

  }
}


  
     .webdesignheaderwrapper{
  background:var( --black-color);
    width:100%;
    padding:50px;
    padding-top:20vh;
       magin-bottom:20vh;
  }
 .webdesignheaderwrapper h1{
   color:var(--white-color);
 }

    .barrierefreiheitwrappper .backgroundimage{
  background:url("/images/defaultimg1.webp");
      background-size:cover;
      background-repeat:no-repeat;
  }
  .barrierefreiheitwrappper{
   padding:0px !important; 
  }

    .barrierefreiheitwrappper .second{
margin:auto; 
padding:60px;
      
  }

    /*footer*/

    #mod-custom128{
      width:100% !important;
    }
    footer{
      background:var(--black-color) !important;
    }

    /*call to action*/
   /* .neontext{
text-shadow:
  0 0 7px #cfcfcf, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #b91548, 0 0 82px #b91548, 0 0 92px #b91548, 0 0 102px #b91548
  } */

  .calltoactionwrapper h2{
font-size:4em;
    text-align:left;
        text-shadow: 5px 4px 8px black;
        -webkit-text-stroke: 1px #515151;
    
  }

  @media only screen and (max-width: 768px) {
   .calltoactionwrapper h2{
font-size:2.5em;
    
  }
}
  
  .calltoactionwrapper{
    background:url("/images/banner_clicktoaction_2.webp"); 
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    min-height:50vh;
    position:relative;
  }

  .calltoactionwrapper .width60{
            text-align: center;
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%) scale(1);
        margin: auto;
        width: 100%;
        transition: 0.3s;
  }
.bubblewrapper{
	position: relative;
font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;


}

  bubblewrapper:hover{
    filter: brightness(1.2) !important;


}
  
  .bubblewrapper:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 28px solid transparent;
	border-top-color: var(--primary-color);
	border-bottom: 0;
	border-right: 0;
	margin-left: -14px;
	margin-bottom: -27px;
}
    /*animation */
      .animationsheaderrvideo{
width:60%;
    margin:auto;
    background:grey;
    height:50vh;
    
  }

  .animationsheaderwrapper h1{
    margin-top:-50px;
      }


    /*always dropdown nav*/
    @media (width >= 992px) {
    .navbar-expand-lg .navbar-toggler {
        display: block !Important;
    }

       .container-header .mod-menu {
        flex-direction: column;
        flex: 1;
        display: flex;
    }
}


    /*agl*/
    /* nav always collaps */
.metismenu.mod-menu{
  background:#22262a;
  text-align:left; 
  min-width:15vw;
}

@media only screen and (max-width: 900px) {
.metismenu.mod-menu{
  min-width:40vw;
}
}

  @media only screen and (max-width: 768px) {
.metismenu.mod-menu{
  min-width:60vw;
}
}
.navbar .navbar-collapse{

}

.navbar-collapse{
   opacity: 0;
    position: relative;
}
.navbar .show{
   opacity: 1;
  margin-right:unset ;
}


.container-header .navbar-collapse.show{
  display:block;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.navbar-brand{
  width:100px;
  position:absolute !important;
  top:0px;
}

.brand-logo{
  display:block;
}
.container-header {
    background-color: transparent;
    color:black;
    background-image: none;
}

.container-header .navbar-toggler{
  background:var(--primary-color-darker);
}

  .navbar-toggler:focus{
    border:0px solid var(--white-color) !Important;
     box-shadow: none !important;
  }

    .navbar-toggler:focus{
    border:0px solid var(--white-color) !Important;
     box-shadow: none !important;
  }
  
/*.container-header .navbar-toggler:after{
  content:"Menu";
}*/
.navbar{
    background:var(--primary-color-darker);
position: absolute;
    top: 10px;
    right: 20px;
      border-radius: 30px;
  display:block!important;
  text-align:right !important;
}

.navbar ul{
  display:block !important;
  position:relative !important; 
}

.metismenu.mod-menu .metismenu-item{
  display:block !important;
}
.navbar  .metismenu.mod-menu .metismenu-item>button{
 /* display:none !Important; */
}

.metismenu.mod-menu .mm-collapse {
    display: block !important;
  background:#22262a;
  /*border-left:1px solid white;*/
      display: flex !important;
  flex-wrap: wrap;
  max-width:30vw;
}

  @media only screen and (max-width: 600px) {
.metismenu.mod-menu .mm-collapse {
      display: block !important;
  }
}

  .metismenu.mod-menu .mm-collapse .mm-collapse  {
    border-left:0px solid var(--white-color);
 
}



   .metismenu.mod-menu .mm-collapse  li{
    width:50%;
   }

     @media only screen and (max-width: 758px) {
 .metismenu.mod-menu .mm-collapse  li{
    width:100%;
   }
}
  
  
  .metismenu.mod-menu  .mm-collapse .mm-collapse:not(.mm-show){
    display:none !important;
  }
  
  .metismenu.mod-menu .mm-collapse a {
color:var(--white-color) !Important;
}


    /*reveal on load*/
.fade-left-onload {
  animation: fade-left  0.5s ease-in;
}

  .fade-bottom-onload {
  animation: fade-bottom  0.5s ease-in;
}

  /*typewriter animation*/
  .active.typewriter {
 color: #fff;
  overflow: hidden; /* Ensures the content is not revealed until the animation */

  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 1s steps(30, end),
     blink-caret .5s step-end infinite;
}

 /* .typewriter h1,  .typewriter h2 {
  color: #fff;
  overflow: hidden; 
  white-space: nowrap; 
  margin: 0 auto; 
  letter-spacing: .15em; 
  animation: 
    typing 2s steps(30, end),
     blink-caret .5s step-end infinite;
}*/

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { }
  50% { }
}

  .typewriter h2{
    font-size:3em;
  }


  /*print*/

  .prinheaderwrapper{
                background: var(--black-color);
            width: 100%;
            padding: 50px;
            padding-top: 20vh;
    color:whie !Important;
  }

   .prinheaderwrapper h1,  .prinheaderwrapper p{
     color:var(--white-color) !Important;
   }
  .printleistungen .leistungsinnerwrapper {
    aspect-ratio:1;
    text-align:center;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
     box-shadow:inset 0 0 0 1000px rgba(184,21,72,.1);
    transition:0.3s;
    position:relative;
  }
 .printleistungen .leistungsinnerwrapper:hover{
     box-shadow:inset 0 0 0 1000px rgba(184,21,72,.0);
   transition:0.3s;
    }

  .printleistungen .leistungsinnerwrapper h3{
         top: 50% !important;
  transform: translate(-50%, -50%) !important;
            text-align: center;
        position: absolute;
                left: 50%;
    text-shadow: 3px 3px 4px #3b3939;
    color:white !Important;
 
  }
    .printleistungen .Tassen{
      background-image:url('/images/print/kutzner_Design_print_tassen.webp');
    }

      .printleistungen .Sticker{
      background-image:url('/images/print/kutzner_Design_print_sticker.webp');
    }

   .printleistungen .Postkarten{
      background-image:url('/images/print/kutzner_Design_print_postkarte.webp');
    }

     .printleistungen .flyer{
      background-image:url('/images/print/kutzner_Design_print_flyer.webp');
    }

      .printleistungen .Fensterfolien{
      background-image:url('/images/print/kutzner_Design_print_fensterfolie.webp');
    }

        .printleistungen .Ausstattung{
      background-image:url('/images/print/kutzner_Design_print_ausstattung.webp');
    }

         .printleistungen .Aufsteller{
      background-image:url('/images/print/kutzner_Design_print_aufsteller.webp');
    }

       .printleistungen .Werbetafeln{
      background-image:url('/images/print/mockup_print_zeitungsanzeige_1.webp');
    }

        .printleistungen .Plakate{
      background-image:url('/images/print/kutzner_Design_print_plakate.webp');
    }

          .printleistungen .Planen{
      background-image:url('/images/print/kutzner_Design_print_planen.webp');
    }

            .printleistungen .Hefte{
      background-image:url('/images/print/kutzner_Design_print_plakate.webp');
    }

  .printleistungen .Mehr{
      background-image:url('/images/print/kutzner_Design_print_papier.webp');
    }


  .flatlaywrapper{
background: linear-gradient(0deg, rgba(217, 217, 217, 1) 0%, rgba(217, 217, 217, 1) 70%, rgba(250, 249, 246, 1) 70%, rgba(250, 249, 246, 1) 100%);
  }

  .printheaderwrapper h1{
color:var(--white-color) !Important;
      text-align:Center;
      margin-bottom:20px;
      
    }
    .printheaderwrapper{
background-color:var(--black-color);
      background-size:cover;
      min-height:50vh;
      background-repeat:no-repeat;
      position:relative;
      overflow:hidden;
      padding:20px;
      }

    .printheaderbg{
    background-image:url("/images/print/printtest4.png");
      background-size:cover;
    height:150%; 
      aspect-ratio:1;
      background-repeat:no-repeat;
      position:absolute;
          bottom: -75%; /*hälfte der height*/ 
         animation: movepaper 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);
  animation-iteration-count: 1;
  animation-fill-mode: both;
      z-index:1;
      transform-origin: center;
      left: 0;
right: 0;
margin: auto
    }



    @keyframes movepaper {
  to {

    transform: rotate(95deg);
  }
}


    .printheadercircle{
      width:10vw;
      aspect-ratio:1;
      background:grey;
      border-radius:200px;
      margin:auto;
      margin-top:-40px;
      z-index:2;
      position:relative;
    }


  /*3d design*/
  .dreiddesignheader{
background:var(--black-color);
    padding:20px;
    min-height:80vh;
      background-image:url("/images/dreiddesign/background-3ddesign-2.webp");
      background-size:cover;
  background-repeat:no-repeat;
        background-attachment: fixed;

  }


  /*.dreiddesignbg{
    background-image:url("/images/dreiddesign/background-3ddesign-2.webp") !important;
      background-size:cover;
  background-repeat:no-repeat;
  }*/
  
  /*illustration*/

  .contentend{
    align-content:end; 
  }

   @media only screen and (max-width: 758px) {
  .contentend{
        align-content: unset;
  }
}
.paperbg{
  background-image:url("/images/Illustration/ripped_paper14.webp");
  min-height:50vh;
  background-size:cover;
  background-repeat:no-repeat;
  aspect-ratio:2;
  }

    .illustrationheader{
    background:var(black-color);
    text-align:center;
    min-height:100vh;
      background-image:url("/images/Illustration/level_14.jpg");
      background-size:cover;
      backgound-repeat:no-repeat;
       animation-name: illustrationheaderAninmation;
  animation-duration: 1.5s;
      display:flex;
      justify-content:center;
      background-position:center;
      
  }

  @keyframes illustrationheaderAninmation {
  0%{ background-image:url("/images/Illustration/ill_sw_angepasst.webp");}
    
  100%{ background-image:url("/images/Illustration/level_14.jpg");}
}
.illustrationheader h1{    -webkit-text-stroke: 1px white;}

    .illustrationtext{
      max-width:30%;
          float:right;
      margin-right:20px;
      background:var(--white-color);
      padding:40px;
      z-index:2;
      margin-top:-200px;
      border-radius:20px 20px 0px 0px;
    }
    .stickybox { position: sticky; position: -webkit-sticky; top: 0; }

     .dogsvg .st0 {
        fill: none;
        stroke: #191919;
        stroke-miterlimit: 10;
       
        stroke-dasharray: 2338.5;
   stroke-dashoffset: 2338.5;
   animation: dashdraw 3s;
        animation-fill-mode: forwards ;
      }
      
       @keyframes dashdraw { 
         to { stroke-dashoffset: 0;}
       }

      .dogwrapper{
background:grey;
        
      }


  /*3d */
  /*.blackgradient{
width:100%;
  padding:20px;
  min-height:10vh;
background: #FAF9F6;
background: linear-gradient(0deg,rgba(250, 249, 246, 1) 8%, rgba(17, 16, 16, 1) 92%, rgba(17, 16, 16, 1) 100%);
} */


  /*corperate*/
    .corperateheader{
      padding:5vw;
      background:var(--black-color);
    }
      .corperateheader h1{
        color:var(--white-color);
      }
     .corperateheader p{
        color:var(--white-color);
      }
  .corperateheader .textbox{
    /*padding-top:10vh;*/
  }


  /* Referenz blog */
  .layout-cassiopeiareferenzenblog .site-grid .container-component{
        grid-column-end: full-end !Important;
        grid-column-start: full-start !important;
    padding-right:5vw;
        padding-left:5vw;
  }

  
    .layout-cassiopeiareferenzenblog .blog-items {
        grid-gap: 3em;
       }
 .layout-cassiopeiareferenzenblog  .readmore{
   position:absolute;
   right:5%;
   bottom:5%;
   padding;:0px;
   margin:0px;
 }
  
 .layout-cassiopeiareferenzenblog .categorytag{
   padding:2px 4px 2px 4px;
   border-radius:5px;
 }
  
    .layout-cassiopeiareferenzenblog .blog-item .item-image{
      margin-bottom:0px !Important;
      filter:brightness(.9);
    }

    .layout-cassiopeiareferenzenblog li {
    position:relative;
  }

 .layout-cassiopeiareferenzenblog li .item-content .category-name span{
   display:none !Important;
 }

   .layout-cassiopeiareferenzenblog li .item-content .category-name {
        opacity: 0;
    transform: scale(0);
 }

     .layout-cassiopeiareferenzenblog li .item-content .category-name a {
        opacity: 1;
    transform: scale(1);
 }
 
  
.layout-cassiopeiareferenzenblog li .item-content{
  order:2;

  color:var(--white-color);
  z-index:2;
      position: absolute;
  width:100%;
    text-align:left;
  bottom:5%;
  left:5%;
    padding-right:5% !important;
  display:grid;
 /* left:0px;
  bottom:0px;
  padding:15px;
  padding-top:50px;*/
  /*background: linear-gradient(0deg,rgba(17, 16, 16, 0.53) 44%, rgba(17, 16, 16, 0) 94%);*/

 /* top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); */
opacity:1; 
}
.layout-cassiopeiareferenzenblog li .item-content .page-header{
  order:2;
  }

  .layout-cassiopeiareferenzenblog li .item-content .categorytag{
  order:1;
      margin-bottom:10px;
  }
  .layout-cassiopeiareferenzenblog li:hover .item-content,  .layout-cassiopeiareferenzenblog li:focus .item-content{
    opacity:1;
    transition:0.5s;
}
  
/*.layout-cassiopeiareferenzenblog li:nth-child(2n+5) .item-content{
  text-align:left !Important;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);


}

  .layout-cassiopeiareferenzenblog li:nth-child(3) .item-content{
  text-align:center !Important;
  top:0px;
  bottom:unset !important;


} */
  

 
     .layout-cassiopeiareferenzenblog li:hover figure, .layout-cassiopeiareferenzenblog li:focus figure {
        filter: brightness(0.4);
  }


     .layout-cassiopeiareferenzenblog li figure{
aspect-ratio:1;
  overflow:hidden;
       background:grey;
  
}

   .layout-cassiopeiareferenzenblog li figure img{
height:100% !important;
  width:auto !important;
  max-width:unset !important;
  
}
.layout-cassiopeiareferenzenblog li .item-content h2 a, .layout-cassiopeiareferenzenblog li .item-content h2{
  background:var(--white-color) !important;
  padding:0px 1px;
  font-size:2.5rem;
  color:var(--black-color);
  width:fit-content;
  display:inline;
  -webkit-box-decoration-break: clone;
box-decoration-break: clone;
  overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
  
}
  @media screen and (width <= 600px) {
  .layout-cassiopeiareferenzenblog li .item-content h2 a, .layout-cassiopeiareferenzenblog li .item-content h2{ 
    font-size:1.5rem;
  }
}

  /*rot ohne kurven*/
.layout-cassiopeiareferenzenblog li:nth-child(even) figure{
  overflow:hidden;
 box-shadow:  inset 0 0 0 1000px rgba(184,21,72,.6);
    border-radius:0px !important;
  background:var(--body-bg:--body-bg);
}

 /* .layout-cassiopeiareferenzenblog li:nth-child(even):hover figure{
    border-radius:40px !important;
    transition:0.5s;
}*/
  
 .layout-cassiopeiareferenzenblog li:nth-child(even) figure img{
opacity:0.8;
}

/*nüx*/
.layout-cassiopeiareferenzenblog li:nth-child(odd) figure {
transition:0.5s;
}

  /*  .layout-cassiopeiareferenzenblog li:nth-child(odd):hover figure, .layout-cassiopeiareferenzenblog li:nth-child(odd):focus figure {
border-radius:40px;
    transition:0.5s;
}
*/
/*all rund*/
.layout-cassiopeiareferenzenblog li:nth-child(1n+4) figure{
    border-radius: 20px;
    overflow:hidden;
  transition:0.5s;
  
}

/*  .layout-cassiopeiareferenzenblog li:nth-child(1n+4):hover figure,   .layout-cassiopeiareferenzenblog li:nth-child(1n+4):focus figure{
    border-radius: 60px;
    overflow:hidden;
    transition:0.5s;
  
}
*/
/*oben rund*/
.layout-cassiopeiareferenzenblog  li:nth-child(2n+5) figure{
    border-radius: 200px 200px 0px 0px !important;
    overflow:hidden;
  transition:0.5s;
  
}

/*  .layout-cassiopeiareferenzenblog li:nth-child(3n+8):hover figure,  .layout-cassiopeiareferenzenblog  li:nth-child(3n+8):focus figure {
    border-radius: 200px 200px 20px 20px !important;
    transition:0.5s;
  
}
  */
  .layout-cassiopeiareferenzenblog .unterseitenwrapper .mod-articlescategories{
    display:ruby;
    width:100%;
        justify-content: space-around;
  }
   .layout-cassiopeiareferenzenblog .unterseitenwrapper{
     text-align:center;
   }

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

}
    .layout-cassiopeiareferenzenblog .unterseitenwrapper li{
              display: inline-flex;
    }

    .layout-cassiopeiareferenzenblog .unterseitenwrapper a{
    border:1px solid var(--black-color);
      background:var(--black-color);
      color:#f7f7f7;
      padding:10px 20px;
      border-radius:10px;
    }

  .layout-cassiopeiareferenzenblog .unterseitenwrapper a:hover{
  filter: brightness(0.9);
        border:1px solid #ad003f;
  }
  .layout-cassiopeiareferenzenblog .unterseitenwrapper a:focus{
  font-weight:bold;
    border:1px solid #ad003f;
  }

  .layout-cassiopeiareferenzenblog .unterseitenwrapper a:active{
  border:2px solid var(--black-color);
  }

  /*kontaktheaderwrapper*/

       .kontaktheaderwrapper{
  background:var( --black-color);
    width:100%;
    padding:50px;
    padding-top:10vh;
       magin-bottom:20vh;
  }
.kontaktheaderwrapper p{
   color:var(--white-color);
  font-size:18px;
 }
         .kontaktheaderwrapper h1 {
              color:var(--white-color);
           position:relative;
         }
  .kontaktheaderwrapper a{
    color:white;
  }

  .kontaktheaderwrapper .flexwrapper i{
    color:var(--white-color);
  }


  .kontaktformularwrapper{
    background:#efefef;
    padding:10px;
    padding-top:50px;
    position:absolute;
top:10px;
    border-radius:10px;
       box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 15px 0px;
    z-index:2;
  }

  .kontaktformularouterwrapper{
    position:relative;
  }

      .halfsize{
      width:50% !important;
    }

  
}


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

   .halfsize{
      width:100% !important;
    }
  
    .kontaktformularwrapper{
    position:relative;
  }
}

  /*slider*/
  .sliderbox{
padding:20px;
  box-shadow: inset 0 0 0 1000px rgb(127 16 51 / 20%);
  background-image:url("/images/defaultimg1.webp");
  background-size:cover;
  background-repeat:no-repeat;
  aspect-ratio:1;
  border-radius:10px;
}
    .leistungenslider  .sliderbox a{
          display: block;
      align-content: end;
      height:100%;
      text-decoration:none !important;
      
}
  .sliderboxsocialmedia{
  background-image:url("/images/Referenzen/elsner_insta_1.webp"); 
  }
  
  .sliderboxprint{
  background-image:url("/images/Referenzen/elsnerdatensystemeflyer.webp"); 
  }

  .sliderboxweb{
background-image:url("/images/Referenzen/orangesealines.webp"); 
  }

  .sliderboxcorperate{
background-image:url("/images/home/meetingraum.webp"); 
    
  }

    .sliderboxillustration{
background-image:url("/images/Referenzen/social_media_pulli.webp"); 
    
  }

    .sliderbox3d{
background-image:url("/"); 
    
  }

      .sliderboxanimation{
background-image:url("/"); 
    
  }
  

  .sliderbox:hover{
      box-shadow:inset 0 0 0 1000px rgba(185,21,72,0.1);
  }
  
 .leistungenslider .sliderbox .slidertext{
    padding-top:10vh;
    color:white !Important;
  }
   .leistungenslider .sliderbox .slidertext h2{
    color:white !Important;
  }
      .slick-prev:before, .slick-next:before{
       color:black !important;
       background:white;
       border-radius:20px;
     padding: 8px;
    font-family: sans-serif;
    font-size: 18px;
       box-shadow:rgba(100, 100, 111, 0.2) 0px 2px 2px 0px;
  }
.slick-prev:hover::before, .slick-next:hover::before  {
box-shadow:rgba(100, 100, 111, 0.6) 0px 2px 5px 0px;
  background:#efefef;
} 

  .slick-prev:active::before, .slick-next:active::before  {
            background: #000000;
            color: white !important;
} 

  .slick-prev:focus::before, .slick-next:focus::before  {
border:1px solid black;
} 
  
  
        .slick-next:before{
     content: 'Vor ❯';
  }
          .slick-prev:before{
     content: '❮ Zurück';
  }
       
 .slick-prev{
    bottom: -10% !important;
    left: unset;
    top: unset !important;
    right: 10%;
        transform: unset !important;
     aspect-ratio: unset !Important;
  }

   .slick-next{
      right: 5% !important;
    top: unset !important;
    bottom: -10% !important;
        transform: unset !important;
        aspect-ratio: unset !Important;
    
      }

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

.slick-next {
    right: -25px;
}

.slick-prev {
    left: -25px;
}
}

  .leistungenslider .slick-slide{
    align-content: end !Important;
    
  }


.problemslider {

}
  .problemslider .sliderbox{
padding:20px;
  aspect-ratio:unset !important;
  border-radius:10px;
    background:#efefef;
    color:black !important;;
      box-shadow:none !Important;
    overflow:hidden;

    background-color: #efefef;
opacity: 1;
/*background-image: linear-gradient(#bad0dd 1.5px, transparent 1.5px), linear-gradient(to right, #bad0dd 1.5px, #efefef 1.5px);
background-size: 30px 30px; */
}

    .problemslider  .sliderbox h2{
      color:var(--black-color) !important;
      margin-bottom:30px;
    }


  .imgwidthiconswrapper h2{
    font-size:6em;
        margin-bottom: -70px;
    z-index: 2;
    position: relative;
    -webkit-text-stroke: 0.2px white;
  }

 .imgwidthiconswrapper{

 }


  /*blog*/
  .blogheader{
        width:100%;
    padding:50px;
  }

  /*fotosundvideos*/
  .fotosundvideosheader{
     background:var(--black-color);
    width:100%;
    padding:50px;
    color:#efefef;
  }

    .fotosundvideosheader h1{
      color:white;
    }
    .container{
    position:relative;

      }
.socialmediaslider .slick-track{

      }
  
  .socialmediaslider .sliderbox{
    aspect-ratio:9/16;
    background:grey;
                border-radius: 20px;
        padding: 0px !important;
    overflow:hidden;

    }
    .socialmediaslider .sliderbox video{
    aspect-ratio:9/16;
max-width:100%;

    }
  
 .overlaywrappersm {
        aspect-ratio:9/16;
    border:3px solid black;
     position:absolute;
     min-height: 100%;
    z-index: 20;
     border-radius:20px;
     magin:Auto;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    background-image:url("https://kutznerdesign.microdigitalisierung.de/images/socialmedia/overlay2.png");
    background-size:cover;
    background-repeat:no-repeat;
     
    }


      .socialmediaslider  .socialmediaslider .slick-list{
    padding:0px !important;
        }

     .socialmediaslider  .slide:nth-child(2) {

}

      .socialmediaslider  .slick-slide {
  opacity: 0.5;
  transform: scale(0.9);
  transition: all 0.3s ease;
        filter: blur(20px);
}
  
      .socialmediaslider  .slick-center {
    filter: blur(0px);
      transform: scale(1);
      opacity: 1;
    
}

  .socialmediaslider .slick-next{
     top: 50% !important;
  right: 12% !important;
  transform: translate(-50%, -50%) !important;
  }

    .socialmediaslider .slick-prev{
     top: 50% !important;
  left: 12% !important;
  transform: translate(-50%, -50%) !important;
      z-index:10;
  }

   .imgreferencewrapper figure{
    background:grey;
    border:1px solid white;
    overflow:hidden;
    }

 .imgreferencewrapper .roundsquare{border-radius:60px; aspect-ratio:1;}

  .imgreferencewrapper img:hover{filter: saturate(1.1) contrast(1.1);}


   .weiterethemenwrapper li{
    background:white;
    padding-right:0px;
    padding-left:0px;
    padding-top:0px;
    padding-bottom:20px;
    box-shadow:rgba(100, 100, 111, 0.2) 0px 7px 15px 0px;
    border-radius:5px;
       overflow:hidden;
     margin:5px;
    }
    .weiterethemenwrapper li figure{
width:100%;
      height:25vh;
      overflow:hidden;
      
    }


  .weiterethemenwrapper li .innercontent{
padding:20px;
    
  }

  

.weiterethemenwrapper li figure img{
width:100%;
      height:auto;
  max-height:unset !important;
      
    }


  /*blog*/
  .com-content-article{
    display:Grid;
  }
 .layout-blog main .com-content-article__body{
   order:2;
 }
  .layout-blog main .item-content{
   order:2;
  

 }

  .view-category .blog .text-muted{
    display:none;
  }

  
   .layout-blog main .item-image{
   order:1;
     float:None !Important;
     width:100%;
         overflow: hidden;
    
        aspect-ratio: 4 / 3;
 }

  .view-category .layout-blog main .item-image{
    aspect-ratio: 4 / 3;
  }

    .view-category .blog h2{
    margin-top:10px !important;
  }

     .layout-blog main .item-image img{
 width:100%;
 }

  .layout-blog main .readmore{
        float: right;
    width: fit-content;
 }

  .layout-blog .readmore span{
    display:block;
  }
    .layout-blog main .readmore .btn-secondary{
 width:100%;
 }
   .ansprechpartnerwrapper img, .ansprechpartnerwrapper figure{
    oder:1;
     }
.ansprechpartnerwrapper figure{
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
}
  .ansprechpartnerwrapper .ansprechpartnertext{
    order:2;
      }

.ansprechpartnerwrapper i{
  font-size:18px;
  padding:3px;
}
.ansprechpartnertext{
    z-index: 2;
    position: relative;
    width: 80%;
  padding:10px;
background:white;
  border-radius:10px;
      transition:1s;
  text-align:center;
  margin:Auto;
  margin-top:-50px;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  text-align:center !Important;
  }
      .ansprechpartnertext p{
      text-align:center;
            margin-bottom: 5px;
  }
  .ansprechpartnerwrapper{
  border:10px solid var (--body-bg);
      min-height:30vh;
    position:relative;
          transition:1s;
    display:grid;
  }


    .ansprechpartnerwrapper:hover .ansprechpartnertext{
 
    

  }
.ansprechpartnerwrapper img{
   transition:1s;
 } 
   .ansprechpartnerwrapper:hover img {
        transition:1s;
           transform: scale(1.08); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        
     }  


  .blogartikeltitelbild{
   background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    min-height:50vh;
    padding:5vw;
    color:white !important;
                background: var(--black-color);
    margin-bottom:50px;
    transform:scale(1.1);
  }
.blogartikeltitelbild h1{
  color:White !important;
}

  .layout-blog h2 {
    color:var(--primary-color);
            margin-top: 50px !important;
    margin-bottom: 20px !important;
  }

  .layout-blog .article-info {
        display: flex;
    width: 100%;
    color:White !Important;
    font-size:18px;
  }

  .layout-blog .article-info .createdby,   .layout-blog .article-info .published{
    padding:5px;
  }

ul li::marker{
color:var(--primary-color) !Important;
 }



  /*authorenbox blog*/
    .authorbox {
      margin-top:50px;
    }
  .authorbox h3, .authorbox p{
    font-size:16px !important;
    color:#7d7d7d;
  }

  /*homeheader*/
  
.homeheader{
height:100vh;
  background-color:grey;
  background-size:cover;
  background-repeat:no-repeat;
  background-image:url("/images/home/titelbild-test-2.webp");
  background-position:center;
  position:relative;
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.5) !important;

  background-position-y: 0px;
   background-position-x: 0px;
  animation: homeheaderanimation 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);

  animation-iteration-count: 1;
  animation-fill-mode: both;
  background-position-x: 0px;
}

  @keyframes homeheaderanimation {
  to {

    background-position-x: -300px;
  }
    
}

  .homeheader h1{
color:white;  
font-family: 'MaxPro';
    text-transform:uppercase;
font-size:6em;
    text-align:center;
}

  .homeheader h2{
color:white;
    
  }

.homeheader .arrow{

      position: absolute;
    bottom: 10vh;
    width: 100%;
    margin: auto;
    text-align: center;
    color: White;
    animation-name: scrollicon;
    max-height: 10vh;
}


  .homeheader .arrow svg{
   max-width:100px;
}

 .homeheader .arrow:hover .pfeil{
transform: translate(0px, 10px);
    transition: 0.3s;
   opacity:0.9;
  }

 /* .homeheader .headertext{
        margin-right: 20px;
    margin-left: auto;
    } */

    .homeheader .headertext  {
  animation: headeranimation  0.5s ease-in;
}
  @keyframes headeranimation {
  0% {
    padding-top: 50px;
    opacity: 0;
  }
  100% {
    padding-top: 0px;
    opacity: 1;
  }
}



  .subheading{
    font-size:20px;
    font-weight:normal;
  }