/*! HTML5 Boilerplate v6.0.1 | MIT License | https://html5boilerplate.com/ */

fieldset,
hr {
  border: 0;
  padding: 0
}

.button,
hr {
  display: block
}

#lightbox a::before,
.button {
  -moz-transition: all .5s;
  -webkit-transition: all .5s
}

#scrolltitle span,
#title {
  text-transform: uppercase
}

#scrolltitle span,
#subtitle span {
  letter-spacing: .2em;
  line-height: 1.3
}

#belungskalender,
h2 {
  border-top: 1px solid #E0E1E0
}

.button,
blockquote,
h1 {
  text-align: center
}

.text-overflow,
.visuallyhidden {
  overflow: hidden;
  white-space: nowrap
}

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none
}

::selection {
  background: #b3d4fc;
  text-shadow: none
}

hr {
  height: 1px;
  border-top: 1px solid #ccc;
  margin: 1em 0
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle
}

fieldset {
  margin: 0
}

textarea {
  resize: vertical
}

.browserupgrade {
  margin: .2em 0;
  background: #ccc;
  color: #000;
  padding: .2em 0
}

#footermenu a.button:hover,
.button {
  color: #fff
}

@font-face {
  font-family: 'Brocha Book';
  src: url(webfont/brocha-book-webfont.eot);
  src: url(webfont/brocha-book-webfont.eot?#iefix) format('embedded-opentype'), url(webfont/brocha-book-webfont.woff2) format('woff2'), url(webfont/brocha-book-webfont.woff) format('woff'), url(webfont/brocha-book-webfont.ttf) format('truetype'), url(webfont/brocha-book-webfont.svg#svgFontName) format('svg')
}

@font-face {
  font-family: 'Brocha Book Italic';
  src: url(webfont/brocha-bookitalic-webfont.eot);
  src: url(webfont/brocha-bookitalic-webfont.eot?#iefix) format('embedded-opentype'), url(webfont/brocha-bookitalic-webfont.woff2) format('woff2'), url(webfont/brocha-bookitalic-webfont.woff) format('woff'), url(webfont/brocha-bookitalic-webfont.ttf) format('truetype'), url(webfont/brocha-bookitalic-webfont.svg#svgFontName) format('svg')
}

@font-face {
  font-family: 'Brocha Bold';
  src: url(webfont/brocha-bold-webfont.eot);
  src: url(webfont/brocha-bold-webfont.eot?#iefix) format('embedded-opentype'), url(webfont/brocha-bold-webfont.woff2) format('woff2'), url(webfont/brocha-bold-webfont.woff) format('woff'), url(webfont/brocha-bold-webfont.ttf) format('truetype'), url(webfont/brocha-bold-webfont.svg#svgFontName) format('svg')
}

* {
  box-sizing: border-box
}

body {
  font-family: 'Brocha Book', Verdana, Geneva, sans-serif;
  font-size: 20px;
  color: #5B5F5C;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  font-smoothing: antialiased
}

b,
blockquote,
h1,
h2,
h3,
h4,
h5,
h6,
i,
p,
q,
span,
strong {
  font-weight: 400!important;
  line-height: 160%
}

.price,
.ui-accordion .ui-accordion-header,
blockquote p,
h1,
h2,
h3 {
  font-size: 40px
}

h4 {
  margin: 0
}

.button,
b,
h4,
strong,
th {
  font-family: 'Brocha Bold', Verdana, Geneva, sans-serif
}

#accordion a,
#footermenu a:hover,
a,
blockquote {
  color: #76B1C2
}

blockquote p {
  font-family: 'Brocha Book Italic', Verdana, Geneva, sans-serif;
  quotes: "»" "«" "‘" "’"
}

blockquote p:before {
  content: open-quote
}

blockquote p:after {
  content: close-quote
}

a {
  text-decoration: none;
  color: #5B5F5C
}

#accordion a:hover {
  border-bottom: 1px solid #76B1C2
}

.button {
  background-color: #76B1C2;
  border-radius: 5px;
  width: auto;
  height: 50px;
  padding: 15px!important;
  transition: all .5s
}

#subtitle::before,
.button:hover {
  background-color: #5B5F5C
}

.icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  background-repeat: no-repeat;
  background-position: left center;
  display: inline-block;
  float: left
}

#readmore,
#title {
  width: 100%;
  color: #fff;
  text-align: center
}

#maintitle::before,
#subtitle::before {
  height: 100%;
  width: 0%;
  display: inline-block;
  position: absolute;
  content: "";
  z-index: 1
}

.icon_calendar {
  background-image: url(../img/icon_calendar.svg)
}

.icon_email {
  background-image: url(../img/icon_email.svg)
}

.icon_phone {
  background-image: url(../img/icon_phone.svg)
}

.icon_anchor {
  background-image: url(../img/icon_anchor.svg)
}

.icon_person {
  background-image: url(../img/icon_person.svg)
}

.icon_animal {
  background-image: url(../img/icon_animal.svg)
}

.icon_kitchen {
  background-image: url(../img/icon_kitchen.svg)
}

.icon_coffee {
  background-image: url(../img/icon_coffee.svg)
}

.icon_water {
  background-image: url(../img/icon_water.svg)
}

.icon_bluetooth {
  background-image: url(../img/icon_bluetooth.svg)
}

.icon_wifi {
  background-image: url(../img/icon_wifi.svg)
}

.icon_bed {
  background-image: url(../img/icon_bed.svg)
}

.icon_bath {
  background-image: url(../img/icon_bath.svg)
}

.icon_shower {
  background-image: url(../img/icon_shower.svg)
}

.icon_warm {
  background-image: url(../img/icon_warm.svg)
}

.icon_tv {
  background-image: url(../img/icon_tv.svg)
}

.icon_music {
  background-image: url(../img/icon_music.svg)
}

.icon_light {
  background-image: url(../img/icon_light.svg)
}

.icon_bank {
  background-image: url(../img/icon_bank.svg)
}

.icon_egg {
  background-image: url(../img/icon_egg.svg)
}

.icon_car {
  background-image: url(../img/icon_car.svg)
}

.icon_beach {
  background-image: url(../img/icon_beach.svg)
}

.icon_wellness {
  background-image: url(../img/icon_wellness.svg)
}

header {
  margin-top: 80px
}

#title {
  position: absolute;
  z-index: 200;
  top: 40%
}

#maintitle,
#subtitle {
  position: relative;
  display: inline-block;
  margin-top: 10px
}

#subtitle span {
  display: inline-block;
  position: relative;
  z-index: 1;
  font-size: 1.2vw;
  padding: 5px 10px
}

#subtitle::before {
  right: 0;
  animation: animationsubtitle;
  animation-duration: .5s;
  animation-timing-function: ease-out;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards
}

@keyframes animationsubtitle {
  0% {
    width: 0%
  }
  100% {
    width: 100%
  }
}

#maintitle span {
  display: inline-block;
  position: relative;
  font-size: 5vw;
  letter-spacing: .1em;
  padding: 0 20px;
  z-index: 1;
  line-height: 1.3
}

#maintitle::before {
  left: 0;
  background-color: #76B1C2;
  animation: animationmaintitle;
  animation-duration: .5s;
  animation-timing-function: ease-out;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards
}

@keyframes animationmaintitle {
  0% {
    width: 0%
  }
  100% {
    width: 100%
  }
}

#scrolltitle {
  display: none;
  z-index: 999;
  position: fixed;
  top: 20px;
  left: 50%;
  width: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%)
}

#rabatt {
  position: absolute;
  right: 35px;
  bottom: 35px;
  z-index: 100;
  transform: scale(1) rotate(10deg);
  transition: all .5s;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(91,95,92, 0.5);
  animation: pulse 2s infinite;
}

#rabatt:hover {
  transform: scale(1.1) rotate(5deg);
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(91,95,92, 0.5);
  }
  70% {
      -webkit-box-shadow: 0 0 0 50px rgba(91,95,92, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(91,95,92, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(91,95,92, 0.5);
    box-shadow: 0 0 0 0 rgba(91,95,92, 0.5);
  }
  70% {
      -moz-box-shadow: 0 0 0 50px rgba(91,95,92, 0);
      box-shadow: 0 0 0 50px rgba(91,95,92, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(91,95,92, 0);
      box-shadow: 0 0 0 0 rgba(91,95,92, 0);
  }
}



#lightbox a::before,
.modalbg:target .dialog {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%)
}

#scrolltitle span {
  color: #fff;
  display: inline-block;
  position: relative;
  z-index: 1;
  font-size: 1.2vw;
  padding: 5px 10px;
  background-color: #76B1C2
}

#readmore {
  position: absolute;
  z-index: 201;
  bottom: 30px
}

#readmore a {
  color: #fff
}

#accordion h2:hover,
.preise h4 {
  color: #76B1C2
}

#pagecontent {
  max-width: 1400px;
  margin: 0 auto
}

.swiper-container {
  width: calc(100vw - 160px);
  height: calc(100vh - 160px)
}

.swiper-slide {
  background-size: cover
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%2376B1C2'%2F%3E%3C%2Fsvg%3E");
  left: 25px;
  right: auto
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%2376B1C2'%2F%3E%3C%2Fsvg%3E");
  right: 25px;
  left: auto
}

.swiper-pagination {
  position: relative;
  height: 80px;
  display: block;
  text-align: center;
  padding-top: 30px
}

.swiper-pagination-bullet {
  width: 40px;
  height: 2px;
  display: inline-block;
  border-radius: 0;
  background: #000;
  opacity: .2;
  margin: 5px
}

.col1,
.col2 {
  width: 50%;
  float: left
}

.swiper-pagination-bullet-active {
  background: #76B1C2;
  opacity: 1
}

#headline {
  margin-bottom: 140px
}

.col1 {
  padding-right: 5%
}

.col2 {
  padding-left: 5%
}

.ausstattung ul {
  list-style: none;
  margin: 10px 0 20px;
  padding: 0
}

.ausstattung ul li {
  background-repeat: no-repeat;
  padding: 0 0 20px 35px
}

#lightbox {
  margin-bottom: 140px
}

#lightbox a {
  display: inline-block;
  float: left;
  width: calc(100%/6);
  height: auto;
  position: relative;
  overflow: hidden;
  background-color: #5B5F5C
}

#lightbox a::before {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  opacity: 0;
  z-index: 1;
  transition: all .5s;
  transform: translate(-50%, -50%);
  background-image: url(../img/icon_accordion_plus_white.svg);
  background-color: #76B1C2;
  background-repeat: no-repeat;
  background-position: center
}

.close .modalbg,
.modalbg {
  z-index: 99999;
  display: block;
  -transition-delay: .2s;
  bottom: 0
}

#lightbox a img {
  max-width: 100%;
  -moz-transition: all .5s;
  -webkit-transition: all .5s;
  transition: all .5s;
  opacity: 1
}

#lightbox a:hover img {
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  opacity: .5
}

#lightbox a:hover::before {
  opacity: 1
}

.ui-accordion .ui-accordion-header {
  padding: .5em .5em .5em 1em;
  outline: 0;
  background-image: url(../img/icon_accordion_plus.svg);
  background-repeat: no-repeat;
  background-position: center left
}

.ui-accordion .ui-accordion-header.ui-accordion-header-active {
  background-image: url(../img/icon_accordion_minus.svg)
}

table {
  width: 100%;
  margin-bottom: 40px;
  border-collapse: collapse
}

td,
th {
  padding: 10px
}

td {
  text-align: right
}

tr {
  border-bottom: 1px solid #E0E1E0
}

.preise h4 {
  display: block;
  text-align: center;
  margin: 80px 0 40px
}

.preise h4:first-of-type {
  margin: 20px 0 40px
}

blockquote {
  width: 60%;
  margin: 200px auto
}

#belungskalender {
  overflow: scroll;
  max-height: 50vh;
}

#openModal h3 {
  margin-bottom: 0
}

iframe {
  border: 0;
  /*margin-left: -30px;*/
  height: 500px;
  /*margin-top: -2235px;*/
  width: 940px;
}

.modalbg {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0);
  -moz-transition: all 2s ease-out;
  -webkit-transition: all 2s ease-out;
  -o-transition: all 2s ease-out;
  transition: all 2s ease-out;
  -webkit-transition-delay: .2s;
  -moz-transition-delay: .2s;
  -o-transition-delay: .2s;
  pointer-events: none
}

.modalbg .dialog {
  width: 980px;
  position: relative;
  top: -1000px;
  padding: 5px 20px 13px;
  background: #fff;
  box-shadow: 0 0 50px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 0 50px rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, .2)
}

.modalbg:target {
  display: block;
  pointer-events: auto;
  background: rgba(240, 240, 240, .9);
  -moz-transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out
}

.close .modalbg:target,
.modalbg:target .dialog {
  -moz-transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out
}

.modalbg:target .dialog {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all .2s ease-out;
  -webkit-transition-delay: .2s;
  -moz-transition-delay: .2s;
  -o-transition-delay: .2s;
  -transition-delay: .2s
}

.close {
  background-color: #5B5F5C;
  background-image: url(../img/icon_close.svg);
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  right: -20px;
  top: -20px;
  width: 40px;
  height: 40px
}

.close .modalbg {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0);
  -moz-transition: all 2s ease-out;
  -webkit-transition: all 2s ease-out;
  -o-transition: all 2s ease-out;
  transition: all 2s ease-out;
  -webkit-transition-delay: .2s;
  -moz-transition-delay: .2s;
  -o-transition-delay: .2s;
  pointer-events: none
}

.close .modalbg .dialog {
  width: 400px;
  position: relative;
  top: -1000px;
  padding: 5px 20px 13px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 10px #000;
  -moz-box-shadow: 0 0 10px #000;
  -webkit-box-shadow: 0 0 10px #000
}

.close .modalbg .dialog .ie7 {
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#000', Direction=135, Strength=3)
}

.close .modalbg:target {
  display: block;
  pointer-events: auto;
  background: rgba(4, 10, 30, .8);
  transition: all .2s ease-out
}

.close .modalbg:target .dialog,
.close:hover {
  -moz-transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out
}

.close .modalbg:target .dialog {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transition: all .2s ease-out;
  -webkit-transition-delay: .2s;
  -moz-transition-delay: .2s;
  -o-transition-delay: .2s;
  -transition-delay: .2s
}

.close:hover {
  background-color: #76B1C2;
  transition: all .2s ease-out
}

#footermenu a,
#footermenu li,
#footermenu span {
  line-height: initial!important
}

#footermenu {
  min-height: 80px;
  width: 100vw;
  background-color: rgba(240, 240, 240, .9);
  position: fixed;
  bottom: 0;
  display: none
}

#footermenu ul {
  list-style: none;
  margin: 0 40px;
  padding: 0;
  text-align: center
}

#footermenu ul li {
  display: inline-block;
  float: left;
  padding: 15px 15px 15px 35px;
  background-repeat: no-repeat;
  background-position: left center
}

#footermenu ul li:first-of-type {
  padding: 15px 15px 15px 28px
}

#footermenu ul li:last-of-type {
  text-align: right;
  float: right
}

#footermenu a,
#footermenu span {
  height: 50px;
  display: inline-block;
  padding: 15px 15px 15px 0
}

#footermenu .button {
  margin: 0
}

#footermenu strong {
  font-size: 40px;
  line-height: 0
}

.mainpadding {
  padding: 80px
}

.text-center {
  text-align: center
}

.img-responsive {
  max-width: 100%
}

.text-overflow {
  text-overflow: ellipsis;
  max-width: 200px;
  display: inline-block
}

.fade {
  -moz-transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out
}

.hidden {
  display: none!important
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  width: 1px
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  -webkit-clip-path: none;
  clip-path: none;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
  white-space: inherit
}

.invisible {
  visibility: hidden
}

.clearfix:after,
.clearfix:before {
  content: " ";
  display: table
}

.clearfix:after {
  clear: both
}

@media screen and (max-width:1500px) {
  #footermenu ul {
    margin: 0
  }
}

@media screen and (max-width:1400px) {
  body {
    font-size: 18px
  }
  header {
    margin-top: 60px
  }
  .mainpadding {
    padding: 60px
  }

  #rabatt {
    width: 180px;
    height: 180px;
  }

  .swiper-container {
    width: calc(100vw - 120px);
    height: calc(100vh - 120px)
  }
  .swiper-button-prev {
    left: 16px
  }
  .swiper-button-next {
    right: 16px
  }
  #footermenu strong,
  .price,
  .ui-accordion .ui-accordion-header,
  blockquote p,
  h1,
  h2,
  h3 {
    font-size: 30px
  }
  .swiper-pagination {
    padding-top: 20px
  }
  #readmore {
    bottom: 20px
  }
}

@media screen and (max-width:1270px) {
  #footermenu a,
  #footermenu span {
    height: 50px;
    display: inline-block;
    padding: 15px 0
  }
  #footermenu .button {
    margin-left: 10px
  }
  #footermenu li:last-of-type span {
    margin-right: 10px
  }
  .icon {
    margin-right: 5px
  }
  #footermenu ul li {
    width: 20%
  }
  #footermenu ul li:last-of-type {
    width: 40%
  }
  .footerliouterwrap {
    width: 99%;
    height: 100%
  }
  .footerliwrap {
    position: relative
  }
  .footerlicontent {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left
  }
}

@media screen and (max-width:1070px) {
  #footermenu ul li {
    width: 15%
  }
  #footermenu ul li:last-of-type {
    width: 55%
  }
}

@media screen and (max-width:800px) {
  body {
    font-size: 16px
  }
  header {
    margin-top: 30px
  }
  #title {
    top: 32%
  }
  .mainpadding {
    padding: 30px
  }

  #rabatt {
    width: 150px;
    height: 150px;
  }

  .swiper-container {
    width: calc(100vw - 60px);
    height: calc(100vh - 60px)
  }
  .swiper-button-prev {
    left: 16px
  }
  .swiper-button-next {
    right: 16px
  }
  #footermenu strong,
  .price,
  .ui-accordion .ui-accordion-header,
  blockquote p,
  h1,
  h2,
  h3 {
    font-size: 30px
  }
  .swiper-button-next,
  .swiper-button-prev {
    display: none
  }
  .swiper-pagination {
    padding-top: 5px
  }
  #maintitle span {
    font-size: 7vw
  }
  #scrolltitle span,
  #subtitle span {
    font-size: 2vw
  }
  #footermenu ul li {
    width: auto
  }
  #footermenu ul li:last-of-type {
    text-align: left;
    float: left;
    padding-left: 5px;
    white-space: nowrap
  }
  .footerliouterwrap {
    width: 100%;
    height: 100%
  }
  .footerliwrap {
    position: relative
  }
  .footerlicontent {
    white-space: initial;
    overflow: visible;
    text-overflow: none
  }
  #belungskalenderli {
    /*display: none!important*/
  }
}

@media screen and (max-width:600px) {
  #footermenu ul li,
  .col1,
  .col2 {
    float: none;
    width: 100%
  }
  body {
    font-size: 14px
  }
  header {
    margin-top: 20px
  }
  .mainpadding {
    padding: 20px
  }
  .swiper-container {
    width: calc(100vw - 40px);
    height: calc(100vh - 40px)
  }
  .swiper-pagination {
    height: 40px
  }
  #maintitle span {
    padding: 0 5px
  }
  #subtitle span {
    padding: 0 5px 8px
  }
  #footermenu strong,
  .price,
  .ui-accordion .ui-accordion-header,
  blockquote p,
  h1,
  h2,
  h3 {
    font-size: 20px
  }
  #readmore {
    display: none
  }
  #headline {
    margin-bottom: 60px
  }
  #lightbox {
    margin-bottom: 70px
  }
  .col1 {
    padding-right: 0
  }
  .col2 {
    padding-left: 0
  }
  #footermenu ul li,
  #footermenu ul li:first-of-type {
    padding: 0 15px 0 35px
  }
  .ui-accordion .ui-accordion-header {
    background-size: 14px
  }
  #lightbox a {
    width: calc(100%/4)
  }
  #pagecontent {
    padding-top: 0
  }
  blockquote {
    width: 100%;
    margin: 60px auto
  }
  #footermenu {
    position: relative;
    display: block
  }
  #footermenu ul li {
    display: block;
    margin-left: 10px;
    text-align: left
  }
  #footermenu ul li:last-of-type {
    padding-bottom: 10px
  }
  #footermenu ul li:last-of-type span:first-of-type {
    padding-right: 5px
  }
  #footermenu a,
  #footermenu span {
    height: 45px
  }
  #footermenu .button {
    margin: 0
  }
  .modalbg:target .dialog {
    -webkit-transform: translate(-50%, -50%) scale(.4);
    -moz-transform: translate(-50%, -50%) scale(.4);
    -ms-transform: translate(-50%, -50%) scale(.4);
    -o-transform: translate(-50%, -50%) scale(.4);
    transform: translate(-50%, -50%) scale(.4)
  }
}

@media screen and (max-width:400px) {
  .swiper-container {
    width: calc(100vw - 40px);
    height: 40vh
  }

  #rabatt {
    width: 120px;
    height: 120px;
    bottom: calc(40vh + 80px);
  }

  #lightbox a {
    width: calc(100%/3)
  }
  .modalbg .dialog {
    position: absolute
  }
  @media print {
    blockquote,
    img,
    pre,
    tr {
      page-break-inside: avoid
    }
    *,
    :after,
    :before {
      background: 0 0!important;
      color: #000!important;
      box-shadow: none!important;
      text-shadow: none!important
    }
    a,
    a:visited {
      text-decoration: underline
    }
    a[href]:after {
      content: " (" attr(href) ")"
    }
    abbr[title]:after {
      content: " (" attr(title) ")"
    }
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
      content: ""
    }
    pre {
      white-space: pre-wrap!important
    }
    blockquote,
    pre {
      border: 1px solid #999
    }
    thead {
      display: table-header-group
    }
    h2,
    h3,
    p {
      orphans: 3;
      widows: 3
    }
    h2,
    h3 {
      page-break-after: avoid
    }
  }
}