/* CSS Document */

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

body {
    width: 100%;
    margin: 0 auto;
    background-color:white;
}

.offset-sm-1 {
    margin-left: 5%;
}

.float-right {float: right;}

a[href^="tel:"] {
    color:#f5c20c;
    font-weight: normal;
    text-decoration: none;
}

a[href^="mailto:"] {
    color:#f5c20c;
    font-weight: normal;
    text-decoration: none;
}

.home-vermietung a:hover, .listestell a:hover {color:#00428f; text-decoration: none;}
.home-vermietung a, .listestell a {color: rgba(227,12,26, 1); text-decoration: none;}

.zoom-in {cursor: zoom-in;}

.bg-white {background-color: #ffffff;}
.bg-blue {background-color: #00428f;}
.bg-grey {background-color: #707173;}
.bg-dgrey {background-color: #4d4e50;}
.bg-gelb {background-color: greenyellow;}
.bg-pink {background-color: hotpink;}
.bg-green {background-color: darkgreen;}
.bg-red {background-color: lightcoral;}
.bg-gelb {background-color: orange; padding: 1rem;}

.font-blue {color: #00428f;}
.font-red {color: rgba(227,12,26, 1);}
.font-grey {color: #707173;}

.bold {font-weight: bold;}

.ml-2 {
    margin-left: 1rem;
}
.mt--2 {margin-top: -1.5rem;}

.nav-logo {width: 15vw; height: auto;}
.navbar-light .navbar-nav .nav-link {
    color: rgba(0, 0, 0, 1);
}
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
    color: rgba(0,66,143, 1);
    font-weight: 600;
}
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .nav-link.active {
    color: rgba(227,12,26, 1);
    font-weight: 600;
}

.border-r {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

#titel_blau { color:white;}
#titel_blau h1 {padding: .6rem 0;
font-weight: 600;}
.titel {padding: .6rem 0;}
#slider_start {width:100vw;padding:0; margin: 0;}
#footer {color:white; padding-top: 1rem;}

.sm-center {
    text-align: center;
}
.pl-5 { padding: 1rem;}


.bg-muenzer {
    background-image:url(../img/bg_footer.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}

.listestell ul{
    padding-left: 2rem;
}


#footer-bottom {text-align: center;}
#footer-bottom ul li{
    list-style: none;
    display: inline;
    padding-right: .2rem;
}

.lif:after {content: "  |";}
#footer-bottom a {color:#ffffff; font-style: italic; text-decoration: none;}
#footer-bottom a:hover {color:#f5c20c; font-weight: 400;}
#footer-bottom a.active {color:#e30c1a; text-decoration: none;}

.logo-footer {margin-left: -2rem;}
.karte-footer {max-width: 25vw; height: auto; padding:1rem;}

/* ############# Reisemobile und vans ############### */
.bravia_logo_titel {
    margin-right: 10vw;
    margin-left: 0;
    margin-top: -5vh;
    border:2px solid white;
    margin-bottom:0;
    padding: 0;
    position: absolute;
}
.vw10 {
    margin-left: 10vw;
}


.big-free-left {
    background-image: url(../img/bg_blue.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left top;
    margin: 0;
    color:white;
    font-style: italic;
    padding: 0 2rem 0 2rem;
}

.big-free-right {
    background-image: url(../img/bg_van_grau_ot.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left bottom;
    margin: 0;
    color:black;
    font-weight: bolder;
    padding: 0 2rem 0 2rem;
}

.ueber-uns-left {
    background-image: url(../img/bg_blue.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left top;
    margin: 0;
    color:white;
    padding: 0 2rem 0 2rem;
}

.ueber-uns-left h5 {font-style: italic;}

.ueber-uns-right {
    background-image: url(../img/ueber-uns/muenzer-foto.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left tbottom;
    margin: 0;
    color:black;
    font-weight: bolder;
    padding: 0 2rem 0 2rem;
}

.service-right {
    background-image: url(../img/service/service-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left tbottom;
    margin: 0;
    color:black;
    font-weight: bolder;
    padding: 0 2rem 0 2rem;
}


.h2-rsv {
    text-align: center;
    line-height: 4rem;
    padding: 2rem 0 ;
}

.mehr {
    position: relative;
    float: right;
    color: #00428f;
    font-weight: normal;
    font-size: 2rem;
    padding: .8rem;
    background-color: white;
    border: none;
    margin-top: -3rem;
}

.mehr-l {
    position: relative;
    float: left;
    color: #00428f;
    font-weight: normal;
    font-size: 2rem;
    padding: .8rem;
    background-color: white;
    border: none;
    margin-top: -2rem;
}

.mehr::before, .mehr-l::before,
.mehr::after, .mehr-l::after{
    position: absolute;
    content: '';
    width: 33px;
    height: 20px;
}

.mehr::before, .mehr-l::before{
    left:0;
    top:0;
    border-left:3px solid #707173;
    border-top:3px solid #707173;
}
.mehr::after, .mehr-l::after{
    right:0;
    bottom:0;
    border-right:3px solid #707173;
    border-bottom:3px solid  #707173;
}

.bravia-mobil {
    background-image: url(../img/599/bg-bravia-mobil.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left top;
    margin: 0;
    color:black;
    font-weight: bolder;
    padding: 0 2rem 0 2rem;
}


#bravia-mobil ul li {list-style: none; line-height: 3rem; padding-left: 10vw; font-weight: 600;}

.panel-heading {
    background-color: #00418f;
    padding: .8rem;
}
.panel-heading a {color:white; text-decoration: none;}
.panel-heading a:hover {color: #e30c1a;}

#icons p {
    line-height: 1rem;
    padding-top: .3rem;
}

#mietmobile-uebersicht .col-md-6:nth-child(1) {
    padding-right:2rem;
}
#mietmobile-uebersicht .col-md-6:nth-child(2) {
    padding-left:2rem;
}

.text-right {
    text-align: right;
}

.md { display: none;}

.img-bg {
    background-image: url("img/599/fotogalerie/bravia-swan-van-599-3.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}



/* *************************** tab */

.tab {
    overflow: hidden;
    border-bottom: 1px solid #ccc;
    background-color: none;
}

/* .tablinks {
    background-color: red;
} */

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: .5rem 1rem;
    transition: 0.3s;
    font-size: 1.2rem;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

#defaultOpen {
    color:white;
    background-color: #00428f;
}

.tab button:nth-of-type(2) {
    color:white;
    background-color: #238bd2;
}

.tab button:nth-of-type(3) {
    color:white;
    background-color: #87c9f6;
    border-radius: 0 1rem 0 0;
    -webkit-border-radius: 0 1rem 0 0;
    -moz-border-radius: 0 1rem 0 0;
    -ms-border-radius: 0 1rem 0 0;
    -o-border-radius: 0 1rem 0 0;
}

.tab button:hover,
#defaultOpen button:hover {
    background-color: #333;
}
  
.tab button.active {
    background-color: none;
}
  
.tabcontent {
    display: none;
    padding: 1rem;
    
}

#tabs ul {
    list-style: none;
}
/* #tabs button {
    border-radius: 0 1rem 0 0 ;
    -webkit-border-radius: 0 1rem 0 0 ;
    -moz-border-radius: 0 1rem 0 0 ;
    -ms-border-radius: 0 1rem 0 0 ;
    -o-border-radius: 0 1rem 0 0 ;
} */
/* *************************** ende tab */
 




/* ############################################################################ form */

form {
    background-color: #F5F5F5;
    color: #222222;
   }
 
   span.pflichtfeld {
    font-size: 0.90rem;
    color: #222222
   }
 
   span.hilfetext {
    font-family: Arial, Tahoma, Sans-Serif;
    font-size: 0.80rem;
    font-style: Oblique;
    color: #009500;
    padding-left:.7rem;
   }
 
   blockquote {
    width: 385px;
    padding-bottom: 10px;
    padding-left:2rem;
   }
 
   img#captcha {
    vertical-align: Top;
    cursor: Pointer;
    transform: scale(1.2,1.2);
    margin: 3px 0 0 10px;
   }
 
 
   
    input[type="text"],
		  input[type="password"],
		  input[type="search"],
		  input[type="number"],
		  input[type="email"],
		  input[type="date"],
		  input[type="time"],
		  input[type="checkbox"],
		  input[type="submit"],
		  input[type="reset"],
		  button[type="button"],
		  button[type="submit"],
		  textarea,
		  select {
		   border: Solid 1px #9A9A9A;
		   font-family: Verdana, Arial, Sans-Serif;
		   font-size: 0.95rem;
		   transition: box-shadow 0.3s;
		  }

		  input[type="text"]:focus,
		  input[type="password"]:focus,
		  input[type="search"]:focus,
		  input[type="number"]:focus,
		  input[type="email"]:focus,
		  input[type="date"]:focus,
		  input[type="time"]:focus,
		  input[type="submit"]:focus,
		  input[type="reset"]:focus,
		  input[type="checkbox"]:focus,
		  button[type="button"]:focus,
		  button[type="submit"]:focus,
		  textarea:focus,
		  select:focus {
		   border:0; outline:0; /* Chromium */
		   border: Solid 1px rgb(226,12,25);
		   box-shadow: 0px 0px 3px 0px rgb(34,132,230);
		  }

		  input[type="button"],
		  input[type="submit"],
		  input[type="reset"],
		  button[type="button"],
		  button[type="reset"] {
		   border: Solid 1px #9A9A9A;
		   background-color: #E1E1E1;
		   font-size: 0.95rem;
		   transition: background-color 0.4s;
		  }

		  input[type="button"]:hover,
		  input[type="submit"]:hover,
		  input[type="reset"]:hover,
		  button[type="button"]:hover,
		  button[type="reset"]:hover {
		   border: Solid 1px #0078D7;
		   background-color: #E5F1FB;
		  }

		  input[type="checkbox"]:checked + label,
		  input[type="radio"]:checked + label {
		   color: rgb(226,12,25);
		  }

		  label:hover {
		   color: rgb(34,132,230);
		  }
 
   option:nth-child(even) {
    background-color: #E5F1FB;
   }
 
   .bg-blau {
     background-color:#00428f;
     color: white;
     padding:1rem;
     text-align: center;
   }
 
   #anfrage .col,
   #anfrage .col-auto {
     margin: .5rem .2rem;
   }
 
   #anfrage .btn {
     color: #fff;
     background-color: #00428f;
     border-color:#00428f;
   }
   #anfrage .btn:hover {
     color: #fff;
     background-color: #707173;
     border-color: #00428f;
   }
   #anfrage .btn-check:focus + .btn, .btn:focus {
     color: #fff;
     background-color: #00428f;
     border-color: #00428f;
     box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
   }
 
   #anfrage .pr-2 {
     margin-right:2rem;
   }
 
   #anfrage .my-auto {
     margin-top: auto !important;
   margin-bottom: auto !important;
   }
   #anfrage .pointer {
     cursor: pointer;
   }

	.echo {
		font-size: 1.2rem;
		color: red;
		font-weight: 400;
		line-height: 1.4rem;
		font-style: normal;
		text-align: center;
	}

.red {
	color: red;
}


/* ############################################################################ ende form */
  

/* +++++++++++++++ image thumb preview */


/* +++++++++++++++ ende image thumb preview */

@media (max-width: 576px) {    
    .offset-sm-1 { margin-left: 0%; }
    #footer-bottom { text-align: left;}
    #footer-bottom ul li{
        list-style: none;
        display: list-item;
    }
    .lif:after {content: "";}
    .pl-sm-2 {
        padding-left: 1.5rem;
    }
    .pl-2 {
        padding: 0 1.5rem 0 1.5rem;
    }
    .muenzer-karte {
        width: 50vw;
        height: auto;
    }
    .mt-sm-3 {margin-top: 2rem;}
    .mt-xs-2 {margin-top: 1rem;}
    #bravia-mobil ul li {list-style: none; line-height: 2.5rem; }
    
    /*.karte-footer {max-width: 50vw;}*/
    .bravia_logo_titel {
        margin-right: 0;
        margin-left: 10vw;
        margin-top: 0;
        border:2px solid white;
        margin-bottom:0;
        margin-bottom:5vw;
        position:relative;
    }
    .sm-left-2 {padding-left: 3.5rem;}
    .service-right {display: none;}

    #icons p {
        line-height: 1rem;
        padding-top: .3rem;
        font-size: .7rem;
    }
    .icon img {max-width:3rem; height:auto;}

    #mietmobile-uebersicht .col-md-6:nth-child(1) {
        padding-right:0rem;
    }
    #mietmobile-uebersicht .col-md-6:nth-child(2) {
        padding-left:0rem;
    }

    .btn {margin-bottom: 1.5rem;}
    
    .sm { display: none; }
    .md { display: block;}
	
	#anker {
		margin-top: 0rem;
	}
}



@media screen and (min-width: 769px) and (max-width: 991px) {
    .navbar-toggler {margin-right: 1.5rem; margin-bottom: .4rem;}
}



@media (max-width: 768px) {    
    .nav-logo {width: 30vw; height: auto;}
    .navbar-toggler {margin-right: 1.5rem; margin-bottom: .4rem;}
     
    .mehr, .mehr-l {
        margin-top: 0rem;
        float: left;
        margin-bottom: 1.5rem;
    }
    .logo-footer {margin-left: 1rem;}
    .sm-left-2 {padding-left: 3.5rem;}
    .karte-footer {padding-left: 3.5rem;max-width: 50vw;}
    .placeholder {display: none;}
    .big-free-right, .ueber-uns-right {
        min-height: 30rem;
    }
    
}

/* wieder raus wenn nicht geht*/
@media (min-width: 993px) and (max-width: 1316px) {
  /* body {
      background-color: #238bd2;
  } */
  .container {max-width: 90vw;}
  .navbar-light .navbar-nav .nav-link {
      font-size: 0.95rem;
      /* color:purple; */
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.2rem;
    padding-left: 0.2rem;
  }
  #navbarDropdown {
    padding-right: 0.2rem;
    padding-left: 0.2rem;
    padding-top: 0.55rem;
  }
  .navbar-expand-lg .navbar-nav .nav-item:nth-child(7) {
    padding-top: 0.1rem;
  }

}
/* end raus */

@media (max-width: 992px) {
    .nav-logo {width: 20vw; height: auto;}
    .border-r {display: none;}
    .navbar-nav {margin-left: 2rem;}
    #bravia-mobil ul li {list-style: none; line-height: 2.5rem; padding-left: 4.8rem;}
    #bravia-mobil h4 {font-weight: 600; font-size: calc(1.1rem + 0.3vw); ;}
}




/* bildergalerie */

.gallery-wrapper .image-wrapper a {
  padding: 0.5em;
  display: block;
  width: 100%;
  text-decoration: none;
  color: #333;
  /* box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); */
  transition: all 200ms ease-in-out;
}

/* .gallery-wrapper .image-wrapper a:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); 
} */
.gallery-wrapper .image-wrapper a img {
  width: 100%;
}

.image-wrapper .image-title {
  font-size:.8rem;
}

.gallery-lightboxes .image-lightbox {
  position: fixed;
  top: 15%;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0ms ease-in-out;
  z-index: 12;
}
.gallery-lightboxes .image-lightbox:target {
  opacity: 1;
  visibility: visible;
}
.gallery-lightboxes .image-lightbox:target .image-lightbox-wrapper {
  opacity: 1;
  transform: scale(1, 1) translateY(0);
}
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper {
  transform: scale(0.95, 0.95) translateY(-30px);
  transition: opacity 500ms ease-in-out, transform 500ms ease-in-out;
  opacity: 0;
  margin: 1em auto;
  max-width: 75%;
  padding: 0.5em;
  display: inline-block;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  position: relative;
  -webkit-transform: scale(0.95, 0.95) translateY(-30px);
  -moz-transform: scale(0.95, 0.95) translateY(-30px);
  -ms-transform: scale(0.95, 0.95) translateY(-30px);
  -o-transform: scale(0.95, 0.95) translateY(-30px);
}
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper .close {
  width: 1.5em;
  height: 1.5em;
  background: #000;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-radius: 50%;
  box-shadow: 0 0 0 2px white inset, 0 0 5px rgba(0, 0, 0, 0.5);
  position: absolute;
  right: -1em;
  top: -1em;
}
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper .close:before {
  content: "";
  display: block;
  width: 10px;
  height: 2px;
  background: #fff;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1px 0 0 -5px;
  transform: rotate(-45deg);
}
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper .close:after {
  content: "";
  display: block;
  width: 10px;
  height: 2px;
  background: #fff;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1px 0 0 -5px;
  transform: rotate(45deg);
}
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper .arrow-left {
  position: absolute;
  top: 0;
  right: 50%;
  bottom: 0;
  left: 0;
}
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper .arrow-left:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-bottom: 0;
  border-right: 0;
  border-radius: 4px 0 0 0;
  position: absolute;
  top: 50%;
  right: 100%;
  cursor: pointer;
  transform: rotate(-45deg) translateY(-50%);
}
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper .arrow-right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
}
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper .arrow-right:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0 4px 0 0;
  position: absolute;
  top: 50%;
  left: 100%;
  cursor: pointer;
  transform: rotate(45deg) translateY(-50%);
}
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper img {
  margin: 0 auto;
  max-height: auto;
  /* max-height: 70vh; */
}

@media (max-width: 768px) {
  .gallery-wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0 1em;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
    grid-gap: 1em;
  }
}


/* @media screen and (min-width: 577px) and (max-width: 991px) {
  .anker {    
    display: block;
    position: relative;
    top: -15rem;
    visibility: hidden;
  }
  
} */

@media screen and (min-width: 768px) and (max-width: 991px) {
  .gallery-wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0 1em;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
    grid-gap: 1em;
  }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {}


  
@media (min-width: 992px) {
  .gallery-wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0 1em;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
    grid-gap: 1em;
  }
}
  
@media (min-width: 1200px) {
  .gallery-wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0 1em;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15%, 1fr));
    grid-gap: 1em;
  }
  
}





/* ENDE bildergalerie */


#gutscheine {
    background-image: url("../img/bg-gutscheine.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.bg-blue {
     background-color: #00428f;
}

.aktion {
    -webkit-animation: background 7s cubic-bezier(0.42, 0.0, 0.58, 1.0) infinite;
    animation: background 7s cubic-bezier(0.42, 0.0, 0.58, 1.0) infinite; 
    transition: all 2s;
    padding: 2rem 0;
    color: white;
}

@-webkit-keyframes background {
  0% { background-color: #00428f; }
  20% { background-color: orange }  
  40% { background-color: #00428f; }    
  60% { background-color: orange; }       
  80% { background-color: #00428f; }        
  100% { background-color: orange; }
}

@keyframes background {
   0% { background-color: #00428f; }
  20% { background-color: orange }  
  40% { background-color: #00428f; }    
  60% { background-color: orange; }       
  80% { background-color: #00428f; }        
  100% { background-color: orange; }
}