.offline-card h1 img{
display:none !Important;
}
.offline-card  img{
max-width:200px;
  margin:auto;
}


.offline-card .header{
  height:100vh;
      background: #efefef;
    color: black;
}

.offline-card{
  max-width:80%;
font-size:18px;
}

.card{
  background:transparent;
}

:root {--primary-color: #e88a2e; 
 
  --secondary-color: #bfd3e9;
  --third-color: #bcb09d;
  --grey-color: #9d9d9c;
  --body-bg: #FAF9F6;
  --body-color:#22262a;
}


body{
      max-width: 100vw !important;
    overflow-x: hidden;

}

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

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

.site-grid{
   max-width: 100vw !important;
    overflow-x: hidden;
}

.icons{
  display:none;
}
.jmodedit{
  display:none;
}
/*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 {
    color: var(--card-cap-color);
    background-color: unset !important;
  border-bottom: 0px solid !important;
}

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

/*hideon*/

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

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


/*basics*/
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;
}
}


.verticalcenter{
  position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
/*text*/
h1{
  color:#0097b2;
     text-shadow: 2px 2px 4px #3237371c;
      -webkit-text-stroke: 0.5px #066070;
}
h2{
  font-weight:600;
}

h3{
  font-weight:400;
}

h1 a, h2 a, h3 a, h4 a{
text-decoration:none !Important;
}

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

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

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

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

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

@media
 only screen and (max-width: 400px) {
  .primarybg,.secondarybg, .greybg {
    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: 1200px) {
  .width60{
    width:80%;
}
}

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

.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: black;
  border:1px solid black;
  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(--secondary-color);
  width:fit-content;
  border-radius:20px;
  border:0px solid;
    color:#212121;
    text-decoration:none;
   box-shadow: 2px 1px 4px #949dbc;

}


.primarybtn:hover{
  opacity:0.8;
    background-color:var(--secondary-color);
  color:#212121;
  box-shadow: 2px 1px 6px #949dbc;
}
.primarybtn:focus{
  border:1px solid black;
}

.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:white;
  width:fit-content;
  border-radius:20px;
    color:var(--primary-color);
    text-decoration:none;

}

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

/* nav (weiß) mit Cassiopeia Collap / Dropdown */
.container-header {
    background-color: #efefef;
    color:black;
    background-image: none;
      box-shadow: 0px 1px 13px 3px #a6a6a6;
}
.container-header .navbar-toggler {
    border: 0px solid #fff;
    color:  var(--primary-color);
    cursor: pointer;
}

.nav-item{
  color:black;
}

.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: space-between !important;
  padding-bottom:10px;
}

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

.footer a{
   text-decoration:none;
}

.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;
}
  }

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

}
  }
/*Barrierefreiheit*/ 
.first{
  order:1 !important;
}

.second{
  order:2 !important;
}

.third{
  order:3 !important;
}

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

.row li{
  display:grid;
}

/*home*/
.leistungenwrapper h3{
  margin-top:10px;
  margin-bottom:10px;
  text-align:center;
}


/*footer*/
.footer{
  background:#373737;
  color:white;
}

/*logo*/
.logowrapper{
  max-width: 20vw;
}

.righttextbox{
  margin-left:10px;
}


/*blog*/
.view-category li figure{
  order:1;
}


.view-category  li .item-content{
  order:2;
}

.view-category  li{
display:grid;
}

view-category .onlycategory{
  display:block;
}
.view-article .onlycategory{
  display:none !Important;
}


.view-article .onlyarticle{
    display:block ;
}
 .view-category .onlyarticle{
  display:none !Important;
}


.blog-items .blog-item{
      background: #FCFCFC;
    border-radius: 20px;
    box-shadow: 3px 5px 8px #cfc8c8;
}

.blog-items .blog-item .item-content{
  padding-right:10px;
  padding-left:10px;
  padding-bottom:5px;
}

.blog-item .item-image {
    margin-top: 0px !important;
  }

.layout-blog .item-page{
width:60%;
margin:auto;
}


@media
 only screen and (max-width: 1200px) {
  .layout-blog .item-page{
    width:80%;
}
}

@media
 only screen and (max-width: 600px) {
  .layout-blog .item-page{
    width:98%;
    overflow-x:hidden;
}
}

.readmore a{
  background:transparent !important;
    color:black;
  font-weight:bold;
  border:0px solid black;
}
.readmore a:hover{
  text-decoration:underline !important;
      color:black;
  font-weight:bold;
  }
.readmore a:focus{
  background:transparent !important;
    color:black;
  font-weight:bold;
  border:0.5px solid black;
      box-shadow: none !important;
}

.readmore a:active{
  background:transparent !important;
    color:black;
  font-weight:bold;
  border:0.8px solid black;
      box-shadow: none !important;
}


/*kontakt */

.container-header .mod-menu .active a{
 border-bottom: 2px solid #0097b2;
  font-weight:500;
}

.container-header .mod-menu li a:hover{
 border-bottom: 2px solid black;
}

.container-header .mod-menu li a:focus{
border:1px solid #0097b2; 
   border-bottom: 2px solid #0097b2;
}


.visforms{
  margin:auto;
}

.visforms h1{
  display:none !Important;
}
@media only screen and (max-width: 800px) {
.visforms{
 width:80%;
}
}

.visCSSlabel  {
  margin-top:0px !important;
}
.mod-visform1{
  display:flex !important;
}
.visCSSinput{
  width:100% !Important;
}
.fieldset-1 div{
  margin-top:10px;
  margin-bottom:10px;
}
.fieldset-1{
  --gutter-x: 1em;
    --gutter-y: 0;
    display: flex !important;
    flex-wrap: wrap;
  margin-left: calc(var(--gutter-x)*-.5);
    margin-right: calc(var(--gutter-x)*-.5);
    margin-top: calc(var(--gutter-y)*-1);
}


.fieldset-1 div{
      flex-shrink: 0;
    margin-top: var(--gutter-y);
    max-width: 100%;
    padding-left: calc(var(--gutter-x)*.5);
    padding-right: calc(var(--gutter-x)*.5);
    width: 100%;
}
/*textarea kleiner*/
.visform textarea{
  height:200px !Important;
}
#mod-visform1, #mod-visform2{
  width:80%;
  margin:auto !important;
}
.vis_mandatory{
      color: var(--main-color) !important;
}
.visform input.error, .visform textarea.error, .visform select.error {
    border: 1px dotted  var(--main-color) !important;
}
.visform:not(.bt5):not(.bt4mcindividual):not(.uikit3):not(.uikit2) label.error{
  background-color:var(--main-color) !important;

}
.visform:not(.bt5):not(.bt4mcindividual):not(.uikit3):not(.uikit2) p.errorcontainer:after{
  border-top: 12px solid var(--main-color) !important;
}

.visform .btn{
    padding:10px 20px 10px 20px !Important;
    background-color:var(--secondary-color);
  width:fit-content;
  border-radius:20px;
  color:black !Important;
  min-width:80%;
  text-align:center;
}

/*visform datenschutz anpassen, dazu Klassen bei Visform Feld ergänzen */
.datenschutzlabel{
  display:none;
}
.datenschutzinput{
  width:100%;
    text-align:center;
}
