* {
    box-sizing: border-box;
}

/* .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
    padding-left: 0px;
    padding-right: 0px;
}
*/

body {
    background-image: url("assets/img/bg/iphone_sommer_22.jpg");
	background-attachment: fixed;
	background-size: contain; /* oder cover je nach Layoutziel */
	background-repeat: no-repeat;
	background-color:#499dc7;
    margin: 0px;
    font-size: 14px;
    text-align: left;
	z-index: -10; 
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
   body {
    background-image: url("assets/img/bg/bg-start-fruehling-23.jpg");
	background-size: cover;
    background-attachment: fixed;
   }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    body {
    background-image: url("assets/img/bg/bg-start-fruehling-23.jpg");
	background-size: cover;
    background-attachment: fixed;
   }
}


.clear-float{
    clear: both;
}

.container {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    margin-bottom: 0px;
    padding: 20px;
    padding-bottom: 0px;
}

.container a {
	padding-right: 5px;
}

	
.abstand{
    margin: 0px 10px 0px 10px;
}


/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .abstand{
        margin: 0px;
    }
    
}


/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .container {
        padding: 50px;
   }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .container {
        padding: 50px 100px 50px 100px;
   }
}

#overlay {
    position: fixed;
    z-index:-1;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background-color: #fff;
    opacity: 0.2;
}
  
/* Styles für Header */
.header-top{
    margin-bottom: 150px;
}

.header-top img{
    width: 200px;
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .header-top img {
        width:200px;
   }

   .header-top{
    margin-bottom: 150px;
}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .header-top img {
        width: 200px;
   }

   .header-top{
    margin-bottom: 50px;		
		}
}

.header_beschriftung {
    position: relative;
    margin-bottom: 100px;
	position: relative;
    z-index: 1;
    margin-top: 40px; /* falls nötig mehr Abstand nach oben */
}


/* Navi Footer */

.meta-wrapper {
	position: relative;
    z-index: 10;
	color: #444;
    text-align: center;
    font-size: 0.8em;
}

.meta-wrapper a {
	position: relative;
    z-index: 10;
	color: #333;
	text-decoration: none;
}

.meta-wrapper a:hover { 
	position: relative;
    z-index: 10;
	color:#cd0000;
	text-decoration:underline;
}

.navi-wrapper {
    position: absolute;
    bottom: -100px;
    text-align: left;
}

.navi-wrapper a {
	position: relative;
    z-index: 10;
	color: #333;
    text-decoration: none;
    padding-right: 30px;
    font-size: 1.1em;
}

.navi-wrapper a:hover { 
	position: relative;
    z-index: 10;
	color:#cd0000;
    padding-right: 30px;
    font-size: 1.1em;
}

.navi-wrapper-weiss {
	position: relative;
    z-index: 10;
    position: absolute;
    bottom: -100px;
    text-align: left;
}

.navi-wrapper-weiss a {
	position: relative;
    z-index: 10;
	color: #fff;
    text-decoration: none;
    padding-right: 30px;
    font-size: 1.1em;
}

.navi-wrapper-weiss a:hover { 
	position: relative;
    z-index: 10;
	color:#cd0000;
    padding-right: 30px;
    font-size: 1.1em;
}





/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .navi-wrapper {
        bottom: -8px;
    }
    .navi-wrapper-weiss {
        bottom: -8px;
    }
}


/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .navi-wrapper {
        bottom: -80px;
    }
    .navi-wrapper-weiss {
        bottom: -80px;
    }
}

/*Ende Navi Footer */


/* Styles Teaser */
.tsr {
    margin-bottom: 30px;
}

.tsr img{
    margin-bottom: 20px;
}

.teaser-1 {
    background-color:#f1f1f1;
    margin-bottom: 30px;
}

.teaser-1 p{
    padding: 15px;
    color: #3f3f3f;
}

.teaser-1-bild {
    background-image: url("assets/img/teaser/tuv.jpg");
    background-repeat:no-repeat;
    background-position: 50% 0%;
    margin-bottom: 30px;
    min-height: 300px;
    background-color: #e0e0e0;
}

.teaser-2 {
    background-color:rgb(20, 53, 65);
    margin-bottom: 30px;
}

.teaser-2 p {
    color: white;
    margin: 0;
    padding: 20px;
    font-size: 1.1em;
    font-weight: 100;
    text-align: center; 

    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);    
}


.teaser-3 {
    margin-bottom: 30px;
}
.teaser-3 p, .teaser-3 h1, .teaser-3 h2, .teaser-3 h3, .teaser-3 h4, .teaser-3 h5{
    margin: 0px;
    padding-bottom: 15px;
}

.teaser-3 a{
    margin: 0px;
    padding-bottom: 15px;
}


.teaser-4{
    margin-bottom: 30px;
    padding: 20px;
    background-color: #fff;
}

.teaser-4 ul{
    margin-left:-22px;
}

.teaser-5{
margin-bottom: 30px;
padding: 50px;
background-color: #fff;
text-align: center;
}


/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .teaser-1, .teaser-bild, .teaser-2, .teaser-3 {
        margin-bottom: 30px;
   }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .teaser-1, .teaser-bild, .teaser-2, .teaser-3 {
        margin-bottom: 0px;
   }
}

.hintergrund-farbe-dunkel{
    background: rgba(76,76,76,1);
	background: -moz-radial-gradient(center, ellipse cover, rgba(76,76,76,1) 0%, rgba(19,19,19,1) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(76,76,76,1)), color-stop(100%, rgba(19,19,19,1)));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(76,76,76,1) 0%, rgba(19,19,19,1) 100%);
	background: -o-radial-gradient(center, ellipse cover, rgba(76,76,76,1) 0%, rgba(19,19,19,1) 100%);
	background: -ms-radial-gradient(center, ellipse cover, rgba(76,76,76,1) 0%, rgba(19,19,19,1) 100%);
	background: radial-gradient(ellipse at center, rgba(76,76,76,1) 0%, rgba(19,19,19,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=1 );
    
    margin-bottom: 30px;
}

.hintergrund-farbe-hell{
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9f9f9+0,f2f2f2+47,f9f9f9+100 */
    background: #f9f9f9; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #f9f9f9 0%, #f2f2f2 47%, #f9f9f9 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #f9f9f9 0%,#f2f2f2 47%,#f9f9f9 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #f9f9f9 0%,#f2f2f2 47%,#f9f9f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#f9f9f9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

    margin-bottom: 30px;
}

.hintergrund-farbe-weiss{
     background: #fff; 
     margin-bottom: 30px;
 }

.teaser-icon{
    display: block;
    background: none;
    float:left;
}

.teaser-icon img{
    width: 70%;
    margin: auto;
}

.teaser-icon div{
    padding: 30px;
}

.teaser-icon h3, .teaser-icon h5{
    text-align: center;
}

.long-teaser {
    position: relative;
    overflow: hidden;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 30px;
}
.long-teaser img{
    background-size: cover;
    min-height: 200px;
    margin-bottom: 20px;
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .long-teaser img{
        min-height: 100%;
        margin-bottom: 0px;
   }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .long-teaser img{
        min-height: 100%;
        margin-bottom: 0px;
   }
}

.long-teaser p, .long-teaser h1, .long-teaser h2, .long-teaser h3, .long-teaser h4, .long-teaser h5{
    color: #3f3f3f;
}


.teaser-rechts-links-body{
    margin-bottom: 60px;
}

.teaser-rechts-links{
    display:block;
    float: none;
    text-align: left;
}

.teaser-rechts-links p{
    margin-bottom: 15px; 
    
}
  

.teaser-rechts-links img {
    float: none;
    margin-top: 15px;
    margin-bottom: 15px;
}



/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .teaser-rechts-links img {
        margin-top: 0px;
        margin-bottom: 0px;   
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .teaser-rechts-links img {
        margin-top: 0px;
        margin-bottom: 0px;    
    }    

    .teaser-rechts-links-body{
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        justify-content: space-between;
        margin-bottom: 60px;
    }
}


/* Styles für Headlines, Copy, Img und Link */
h1 {
    color: #333;
    font-size: 2em;
    line-height: 1.2em;
    font-weight: 200;
    margin: 0px 0px 20px 0px;
    letter-spacing: 0.02em;
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    h1 {
       font-size:2em;
   }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    h1 {
       font-size:3em;
   }
}

h2 {
    color: #333;
    font-size: 1.8em;
    line-height: 1em;
    font-weight: 300;
    margin: 0px 0px 15px 0px;
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    h2 {
       font-size:1.8em;
   }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    h2 {
       font-size:2.4em;
   }
}

h3 {
    color: #333;
    font-size: 1.4em;
    line-height: 1.5em;
    font-weight: 300;
    margin: 0px 0px 15px 0px;
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    h3 {
       font-size:1.4em;
   }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    h3 {
       font-size:1.8em;
   }
}

h4 {
    color: #333;
    font-size: 1.2em;
    line-height: 1.4em;
    font-weight: 300;
    margin: 0px 0px 15px 0px;
}

ul{
    color: #333;
    font-size: 1em;
    line-height: 2em;
    font-weight: 300;
}


/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    h4 {
       font-size:1.2em;
   }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    h4 {
       font-size:1.4em;
   }
}

h5 {
    color: #333;
    font-size: 1em;
    line-height: 1.4em;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0px 0px 10px 0px;
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    h5 {
       font-size:1em;
   }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    h5 {
       font-size:0.9em;
   }
}

p {
    color: #333;
    font-size: 1em;
    line-height: 1.8em;
    font-weight: 400;
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    p {
       font-size:1.2em;
       margin: 0px;
   }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    p {
       font-size:1em;
   }
}

a {
    color: #11609f;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    padding-right: 30px;
}

.button{
    background-color: #11609f;
    display: inline-block;
    position: relative;
    height: 40px;
    padding-left: 20px;
    padding-right: 20px;
    cursor: pointer;
    color: #fff;
    border: none;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 3px;
    text-align: center;
    text-decoration: none;
}


.button a{
    color: #fff;
    text-align: center;
   
}

.button:hover{
    background-color: #999;
    color: #fff;
    border: none;
}


.button-white{
    background-color: #fff;
    display: inline-block;
    position: relative;
    height: 40px;
    padding-left: 20px;
    padding-right: 20px;
    cursor: pointer;
    color: #121212;
    border: none;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 3px;
    text-align: center;
    text-decoration: none;
}


.button-white a{
    color: #121212;
    text-align: center;
   
}

.button-white:hover{
    background-color: #999;
    color: #fff;
    border: none;
}

    


a:hover{
    color: rgb(35, 38, 87);
    text-decoration: none;
}

.mail {
    color: #f1f1f1;
    display: inline-block;
}

.mail:hover {
    color: #f1f1f1;
    text-decoration: underline;
  }

.mail-red {
    color: #cd0000;
    display: inline-block;
}

.mail-red:hover {
    color: #cd0000;
    text-decoration: underline;
}

/* Lets add an arrow after each link */
.arrow:after {
    position: absolute;
   /* Prevent underline of arrow */
    padding-left:5px;
   /* Add a little space between text and arrow */
    content: "\2794";
   /* Unicode hex for »
    */
}

img{
    display: block;
    width: 100%;
}

.stern{
    font-size: 0.8em;
    color: #777; 
}

.stern-dark{
    font-size: 0.8em;
    color: #444; 
}

.copy-mittig-light{
    margin-bottom: 30px;
    text-align: center;
    display: inline-block;
    }
    
.copy-mittig-light p, .copy-mittig-light h3{
    color: #f1f1f1; 
}
        
.copy-mittig-dark{
    margin-bottom: 30px;
    text-align: center;
    display: inline-block;
}
        
.copy-mittig-dark p{
    color: #121212;
}

.copy-mittig h1, .copy-mittig h2, .copy-mittig h3, .copy-mittig h4{
    color: #121212;
}

/* Ende Headlines, Copy, Img und Link */


/* Teaser BIG Hell*/

.teaser-big{
    margin-bottom: 30px;
}


.teaser-big h1, .teaser-big h2, .teaser-big h3{
    letter-spacing: 0.05em;
    text-transform: uppercase;
}


.teaser-big h5{
    color: #ffcc00;
}

.teaser-big img {
    width: 100%; 
    height: auto;
    position: relative;
    display: block;
    margin-bottom: 30px;
}

.teaser-big span {
    top: 0px;
    left: 0px;
    width: 50%;
    margin-bottom: 30px;
    padding: 0;
}



/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .teaser-big span {
    top: 0;
    padding: 60px; 
    margin-bottom: 0px;
	position: absolute;

    }

    .teaser-big h1, .teaser-big h2, .teaser-big h3, .teaser-big h4{
        color: #f1f1f1;
    }


    ul.first  {
        list-style-type: disc;
        color: #f1f1f1;
        margin-left: -24px; 
        margin-top: 20px;
	    line-height: 1.8em;
}

    }

    .teaser-big img {
        margin-bottom: 0px;
    }

    .copy-hell{
        color: #f1f1f1;
    }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .teaser-big span {
        top: 0;
        padding: 60px; 
        margin-bottom: 0px;
 }

    .teaser-big h1, .teaser-big h2, .teaser-big h3, .teaser-big h4{
        color: #f1f1f1;
    }

    ul.first  {
        list-style-type: disc;
        color: #f1f1f1;
         margin-left: -24px; 
         margin-bottom: 20px;
    }

    .teaser-big img {
         margin-bottom: 0px;
    }

    .copy-hell{
        color: #f1f1f1;
    }

    .copy-dunkel{
        color: #121212;
    }
}

/* Ende Teaser BIG HELL*/

/* Teaser BIG DARK*/

.teaser-big-dark{
    margin-bottom: 30px;
}


.teaser-big-dark h1, .teaser-big-dark h2, .teaser-big-dark h3{
    letter-spacing: 0.05em;
    text-transform: uppercase;
}


.teaser-big-dark h5{
    color: #ffcc00;
}

.teaser-big-dark img {
    width: 100%; 
    height: auto;
    position: relative;
    display: block;
    margin-bottom: 30px;
}

.teaser-big-dark span {
    top: 0px;
    left: 0px;
    width: 50%;
    margin-bottom: 30px;
    padding: 0;
}



/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .teaser-big-dark span {
        position: absolute;
    }
}


ul.first  {
    list-style-type: disc;
    margin-left: -24px; 
    line-height: 1.8em;
    color: #f2f2f2;
     margin-top: 20px;
}


/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .teaser-big-dark span {
    top: 0;
    padding: 60px; 
    margin-bottom: 0px;
    }

    .teaser-big-dark h1, .teaser-big-dark h2, .teaser-big-dark h3, .teaser-big-dark h4{
        color: #121212;
    }

    .teaser-big-dark img {
        margin-bottom: 0px;
    }

    .copy-dark{
        color: #121212;
    }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .teaser-big-dark span {
        top: 0;
        padding: 60px; 
        margin-bottom: 0px;
 }

    .teaser-big-dark h1, .teaser-big-dark h2, .teaser-big-dark h3, .teaser-big-dark h4{
        color: #121212;
    }

    ul.first  {
        list-style-type: disc;
        color: #121212;
         margin-left: -24px; 
         margin-bottom: 20px;
    }

    .teaser-big-dark img {
         margin-bottom: 0px;
    }

    .copy-dark{
        color: #121212;
    }
}

/* Ende Teaser BIG DARK*/




.wohnmobile-bg{
	background-image:url(assets/img/bg/bg-wohnmobile-sommer_23.jpg);
	height: 100%;
	width: 100%;
	position: fixed;
	right: 0px;
	top:0px;
	background-size: cover;
	background-position: center center;
	z-index: -1;
	opacity: 1;
}


.anfahrt-bg {
	background-image:url(assets/img/bg/bg-anfahrt.jpg);
	height: 100%;
	width: 100%;
	position: fixed;
	right: 0px;
	top:0px;
	background-size: cover;
	background-position: center center;
	z-index: -1;
    opacity: 1;
}

.service-bg {
	background-image:url(assets/img/bg/bg-service.jpg);
	height: 100%;
	width: 100%;
	position: fixed;
	right: 0px;
	top:0px;
	background-size: cover;
	background-position: center center;
	z-index: -1;
    opacity: 1;
}


.womo-park-bg {
	background-image:url(assets/img/bg/gelb.png);

	background-color: #f4f3df;
	height: 100%;
	width: 100%;
	position: fixed;
	right: 0px;
	top:0px;
	background-size: cover;
	background-position: center center;
	z-index: -1;
    opacity: 1;
}


.nav ul{
    text-decoration: none;
}



.container-womo{
	background-image:url(assets/img/bg/gelb.png);
	width: 100%;
    height: 100%;
    margin: 0 auto;
    margin-bottom: 0px;
    padding: 20px;
    padding-bottom: 0px;
}


table th {
    padding-right: 20px; /* oder ein anderer Wert nach Wunsch */
    text-align: left; /* Optional, für bessere Optik */
  }