:root {
    --maincolor-rot: #e30613;
    --maincolor-grau: #3b4041;
    --maincolor-hellgrau: #919eb1;
    --maincolor-schrift: #444f50;
    }


 Flackern der Topbar verhindern */

.top-bar {
  display: none !important;
	}
.top-bar ul {
  	border: none;
    }
    
.title-bar {
  	padding: 0.5rem;
  	background:var(--maincolor-rot);
  	color: #fff; 
  	}    
@media screen and (min-width: 1024px) {
   .top-bar {
    display: block !important;
  }

   .title-bar {
    display: none !important;
  }
}


* {
	line-height:140%;
	margin:0;
	padding:0;
	font-size:16px;
	}
body {
	background: #fff;
  	cursor: auto;
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 400;
  	line-height: 1.5;
  	margin: 0;
  	padding: 0;
	}
:active, :focus {
	outline: none
	border: 0; 
	}

/**************************/
/**************************/
.inhalt {
  	padding: 40px 3vw;
    }
.kastenlinks {
    margin-left:8vw;
    padding:3vw 0 5vw 20px;
    }
.kastenrechts{
    margin-right:8vw;
    padding:3vw 0 3vw 40px;
    }

/**************************/
/******** Header **********/
/**************************/
.header {
    -webkit-transition: all 0.5s ease;
 	transition: all 0.5s ease;
	position: fixed;
  	width: 100%;	
	background:#fff;
  	height: 130px;
    z-index: 120;
	}

#logo {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    margin-top:0;
    padding:0 0 7px 0;
    width:180px;
    opacity: 1;
	}
.abstand {
    padding-top:120px;
    }

.rot {
    display: block;
  	background:var(--maincolor-rot);
    padding:0;
    margin:0;
    }
.grau {
  	background:var(--maincolor-grau);
    padding:0;
    margin:0;
    }
.hellgrau {
  	background:var(--maincolor-hellgrau);
    padding:0;
    margin:0;
    }
.header .grid-x, .footer .grid-x {
    display: flex;
    align-items: flex-end;
    }
/**************************/
/******** scrolled  *******/
/**************************/
.scrolled .header{
    -webkit-transition: all 0.4s ease;
 	transition: all 0.4s ease;
  	height: 100px;

	}
.scrolled  #logo {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    margin-top:0;
    width:100px;
    opacity: 1;
	}
.scrolled  .abstand {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    padding-top:80px;
    }
.scrolled ul#menu {
    margin-top:40px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    }
.scrolled ul#menu ul.menu {
    margin-top:24px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    }
/**************************/
/******** Teaser ************/
/**************************/
.teaser {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap:20px;
    padding:0 20px;
    }
.teaser .item{
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
    }
.item img{
    width: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    }
.flaeche {
    min-width:290px;
    align-self: center;
    position: absolute;
    z-index: 10;
    background: #fff;
    padding:20px 10px 20px 10px;
    -webkit-box-shadow: 0px 3px 15px 3px rgba(0,0,0,0.32); 
    box-shadow: 0px 3px 15px 3px rgba(0,0,0,0.32);z-index: 100;
    }
.flaeche h3, h3.angebot {
    color:var(--maincolor-rot)!important; 
}
/**************************/
/******** Footer   ********/
/**************************/

.footer {
	height:auto;
	padding:30px 0 100px 0;
	}
.footer p {
	text-decoration:none;
	color: var(--maincolor-schrift);
    font-size:1.0em;
	margin:0 0 0 0;
	}
.footer a, .footer a:visited {
	font-size:100%;
    font-weight:400;
	color: var(--maincolor-schrift);
    text-transform: none;
	}
.footer a:hover, .footer a:visited:hover {
	color: var(--maincolor-hellgrau);
	}
.footer .logo-sw {
	max-width:180px;
    padding: 0 0 5px 0;
    margin:0;
	}
.footer .kastenlinks {
    margin-left: 6vw;
    padding: 5vw 0 5vw 0;
    }

#back-top img {
    position: fixed;
    right: 0;
    bottom: 20vh;
	width:3vw;
	}

ul.kurzmenu {
	list-style-type:none;
	}
ul.kurzmenu li{
	padding:0;
    margin:3px 0 2px 0;
	}
ul.kurzmenu li a{
	color: var(--maincolor-schrift);
	font-weight:400;
	font-size:1.0em;
    padding:6px 0 6px 0;
	text-decoration:none;
	}
ul.kurzmenu li a:hover, ul.kurzmenu li a.current {
	color: var(--maincolor-hellgrau);
	}


/**************************/
/******** Formatierung ****/
/**************************/
h1 {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 800;
    color: var(--maincolor-schrift);
	font-size:2.2em;
	}
.kastenrechts h1 {
	font-size:3vw;
	}

h2 {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 800;
    color: var(--maincolor-schrift);
	font-size:2.0em;
	line-height:150%;
	}

.rot h3,.rot h3 a, .hellgrau h3, .hellgrau h1{
    color:#fff;
    }
.item h1, .item h2, .item h3, .item p, .item p a, h3.info {
      color:var(--maincolor-schrift);
    }
.item p a {
    display: block;
    margin-top:15px;
    }
h3 {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 800;
    color: var(--maincolor-schrift);
	font-size:1.5em;
	line-height:150%;
	}
h3 a {
    font-size: 100%;
}
p, .hinweis  p{
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 400;
    color: var(--maincolor-schrift);
	font-size:1.0em;
	line-height:160%;
    hyphens: auto;
	}

p a, p a:visited {
	font-size:100%;
    color:var(--maincolor-schrift);
	}
p a:hover, p a:visited:hover {
    color: var(--maincolor-hellgrau);
	}
p b {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 600;
    font-size: 99%;
    }




/**************************/
/******** Abstände ********/
/**************************/

h1 {
	margin:10px 0 0 0;
	}
h2 {
	 margin:-4px 0 0 0;
	}

h3 {
	margin:10px 0 10px 0;
	}
.flaeche h3 {
    margin:0;
    }
p {
	margin:15px 0 20px 0;
	}
.header p, .footer p, .footer ul {
    margin:auto 0;
    padding: auto 0;
    }
hr.abstandshalter {
    height:1px;
    border:none;
    color: #fff;
    margin:35px 0;
    }

/**********************************************/

.swiper .swiper-slide img {
    width: 100vw;
    }

.swiper-button-next, .swiper-button-prev {
    color: #fff !important;
    }





@media only screen and (max-width: 1024px)  {
.inhalt {
  	padding: 40px 15px;
    }
.kastenrechts h1 {
	font-size:2.2em;
	}
.abstand {
    padding-top:120px;
    }
hr.abstandshalter {
    margin:25px 0;
    }
.teaser {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap:20px;
    padding:0 20px;
    }
.kastenlinks {
    margin-left:8vw;
    padding:30px 0 30px 0;
    }
.kastenrechts{
    margin-left:8vw;
    margin-right:20px;
    padding:30px 0 30px 0;
    }
.footer .text-right {
    text-align: left;
    }
}


/**********************************************/
@media only screen and (max-width: 640px) {

hr.abstand {
    padding:0;
    margin:10px 0;
    }
hr.abstandshalter {
    margin:15px 0;
    }
.scrolled  .abstand {
    padding-top:0;
    }
.scrolled .header{
    top:0;
  	height: 120px;
	}
.kastenlinks, .kastenrechts{
    margin-left:20px;
    padding:30px 0 30px 0;
    }
h1, .kastenrechts h1 {
	font-size:1.6em;
	}
h2 {
	font-size:1.2em;
	}
h3  {
	font-size:1.2em;
	}
p {
	font-size:0.95em;
	line-height:160%;
	}

.footer p {
    hyphens: none !important;
    white-space: nowrap;
    }
.footer p a {
    white-space: nowrap;
    }

#back-top img {
	width:30px;
	}

/**************************/
/******** Teaser ************/
/**************************/
.teaser {
    grid-template-columns: 1fr ;
    }


/**********************************************/
@media only screen and (max-width: 640px) { 
    .header p {
    display: none;
    }

    
}