@charset "UTF-8";
/* CSS Document */
/* ################ Einbindung Google Webfonts ################### */
/* dosis-regular - latin */
@font-face {
  font-family: "Dosis";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/dosis-v25-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local(""), url("../fonts/dosis-v25-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/dosis-v25-latin-regular.woff2") format("woff2"), url("../fonts/dosis-v25-latin-regular.woff") format("woff"), url("../fonts/dosis-v25-latin-regular.ttf") format("truetype"), url("../fonts/dosis-v25-latin-regular.svg#Dosis") format("svg");
  /* Legacy iOS */
}

/* dosis-500 - latin */
@font-face {
  font-family: "Dosis";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/dosis-v25-latin-500.eot");
  /* IE9 Compat Modes */
  src: local(""), url("../fonts/dosis-v25-latin-500.eot?#iefix") format("embedded-opentype"), url("../fonts/dosis-v25-latin-500.woff2") format("woff2"), url("../fonts/dosis-v25-latin-500.woff") format("woff"), url("../fonts/dosis-v25-latin-500.ttf") format("truetype"), url("../fonts/dosis-v25-latin-500.svg#Dosis") format("svg");
  /* Legacy iOS */
}

/* dosis-700 - latin */
@font-face {
  font-family: "Dosis";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/dosis-v25-latin-700.eot");
  /* IE9 Compat Modes */
  src: local(""), url("../fonts/dosis-v25-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/dosis-v25-latin-700.woff2") format("woff2"), url("../fonts/dosis-v25-latin-700.woff") format("woff"), url("../fonts/dosis-v25-latin-700.ttf") format("truetype"), url("../fonts/dosis-v25-latin-700.svg#Dosis") format("svg");
  /* Legacy iOS */
}

/* ################ Farben ################### */
/*
    weiss: #ffffff 
    türkis: #2F989A
    black: #000000
    grau: #90BC47
*/
/* diese Variablen kann man nur in SCSS verwenden! - Farben sind nur Beispiel, statt Farbangaben dann den Variablennamen benutzen - Beispiel: color: $col_bordeaux; */
/* ################ Media Queries ################### */
/* diese Variablen kann man nur in SCSS verwenden! Mediaqueries immer in em oder px angeben - nie in rem!!! */
/*456px*/
/*564px*/
/*760px*/
/*1016px*/
/*1272px*/
/*1432px*/
/*1800px*/
/* ################ Allgemeines ################### */
html,
body {
  width: 100%;
  height: 100%;
  /*overflow-x: hidden;*/
  font-size: 16px;
  /* Root-Größe, auf der sich alle anderen Größenangaben, die in rem angegeben werden (also auch margin, Padding etc., beziehen: 1rem = 16px */
}

/*Durch folgende Mediaqueries ändern sich Schriftgrößen und Abstände - sofern in rem angegeben automatisch bei den verschiedenen Displaygrößen, damit spart man sehr viel Schreibarbeit und Code*/
/*@media screen and (min-width: $media-s){
        font-size: 17px;
    }*/
@media screen and (min-width: 47.5em) {
  html,
  body {
    font-size: 17px;
  }
}

@media screen and (min-width: 63.5em) {
  html,
  body {
    font-size: 18px;
  }
}

@media screen and (min-width: 79.5em) {
  html,
  body {
    font-size: 20px;
  }
}

@media screen and (min-width: 89.5em) {
  html,
  body {
    font-size: 22px;
  }
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*Schriften, Schriftgröße, Abstände, Schriftfarben */
body {
  font-family: Dosis, Helvetica, Arial, sans-serif;
  /* Achtung! Hier kommt die Schrift für den Fließtext rein, also die, die am meisten verwendet wird!*/
  font-style: normal;
  font-weight: 400;
  /* Font-Weight für Fließtext - Entwurfabhängig!*/
  color: #000000;
  /* Grundschriftfarbe */
  text-align: center;
  /*zentriert den wrap außen, wird vererbt! ggf. mit text-align: left zurücksetzen!*/
  margin-right: auto;
  /*für Zentrierung */
  margin-left: auto;
  position: relative;
  background-color: #ffffff;
  overflow-x: hidden;
  /* bei hidden liegt die Scrollleiste obendrüber*/
}

span {
  display: inline-block;
}

/*LINKS*/
ul > li {
  list-style-type: none;
}

a:link {
  color: #2f989a;
  text-decoration: none;
}

a:hover {
  transform: scale(1.1);
  font-weight: 500;
  transition: all 0.5s ease-in-out;
}

address {
  font-style: normal;
  text-align: start;
}

.active {
  font-weight: 500;
  text-decoration: underline !important;
}

/*SCHATTEN*/
/*ZENTRIERUNG*/
article,
section {
  text-align: start;
}

#button {
  display: inline-block;
  background-color: #2f989a;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}

#button:hover {
  cursor: pointer;
  background-color: #333;
}

#button:active {
  background-color: #555;
}

#button.show {
  opacity: 1;
  visibility: visible;
}

#button img {
  width: 50%;
  padding-top: 0.7rem;
}

/* ABSTÄNDE*/
h2 {
  padding-bottom: 2.5rem;
}

h3 {
  padding: 1.3rem 0 0.5rem 0;
}

.formular > h2 {
  padding-right: 1rem;
  padding-left: 1rem;
}

main,
.wrap-kontakt {
  padding-bottom: 5rem;
}

.wohnmobile {
  padding-left: 1rem;
  padding-right: 1rem;
}

article,
section {
  padding: 0 1rem 5rem 1rem;
}

.wrap-slider {
  padding-top: 4rem;
}

.wrap-willkommen-text {
  padding-bottom: 1.7rem;
}

.wrap-willkommen-text p:nth-child(1),
.wrap-willkommen-text p:nth-child(2) {
  padding-bottom: 1rem;
}

.aktuelles > article,
.wrap-unser-angebot > article,
.first-article > article,
.wrap-stellplaetze-preise > section,
.gruppe-2 {
  padding: 0;
}

.first-article {
  margin-top: 6rem;
  padding: 0 1rem 5rem 1rem;
}

@media only screen and (max-width: 600px) {
  .first-article {
    margin-top: 4rem;
  }
}

.wohnmobile > .first-article {
  padding-left: 0rem;
  padding-right: 0rem;
}

.aktuelles-text span {
  padding-bottom: 0.5rem;
  display: inline-block;
}

.wohnmobil-slider {
  margin-bottom: 4rem;
}

.unser-angebot {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.wrap-unser-angebot > article {
  padding-bottom: 4.5rem;
}

.wrap-unser-angebot > article:last-child,
.wrap-mietangebot-ausstattung > section:last-child,
.wohnmobile {
  padding-bottom: 0rem;
}

form {
  padding: 1rem;
}

.technisch,
.mietpreise,
.gruppe-1,
.wrap-mietpreise,
.mietangebot,
.wrap-mietangebot-ausstattung > section {
  padding: 0 0 5rem 0;
}

.wrap-mietangebot-ausstattung > section {
  padding-bottom: 2.5rem;
}

footer,
.success {
  padding-bottom: 1rem;
}

.footer-flexbox-text,
.wrap-footer-copyright {
  padding: 0 1rem;
}

.footer-flexbox-text div:last-child {
  padding-bottom: 1.3rem;
}

@media only screen and (min-width: 450px) {
  .first-article,
  .wohnmobile > .first-article,
  .aktuelles,
  .unser-angebot,
  .footer-flexbox-text,
  form,
  .formular > h2,
  .service,
  .technisch,
  .mietpreise,
  .datenschutz,
  .success {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .wohnmobile {
    padding-left: 0rem;
    padding-right: 0rem;
  }
}

@media only screen and (min-width: 760px) {
  article,
  section {
    padding-bottom: 7rem;
  }
  main {
    padding-bottom: 7rem;
  }
  .first-article,
  .wohnmobile > .first-article,
  .aktuelles,
  .unser-angebot,
  .footer-flexbox-text,
  form,
  .formular > h2,
  .service,
  .technisch,
  .mietpreise,
  .datenschutz,
  .success {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .wrap-willkommen-text {
    padding: 0;
  }
}

@media only screen and (min-width: 1016px) {
  .first-article,
  .wohnmobile > .first-article,
  .aktuelles,
  .unser-angebot,
  .footer-flexbox-text,
  form,
  .formular > h2,
  .service,
  .technisch,
  .mietpreise,
  .datenschutz,
  .success {
    padding-left: 5rem;
    padding-right: 5rem;
  }
  .first-article {
    margin-top: 9rem;
  }
}

@media only screen and (min-width: 1272px) {
  .first-article,
  .wohnmobile > .first-article,
  .aktuelles,
  .unser-angebot,
  form,
  .formular > h2,
  .service,
  .technisch,
  .mietpreise,
  .datenschutz,
  .success {
    padding-left: 7rem;
    padding-right: 7rem;
  }
}

/* KONTAKT*/
.wrap-kontakt {
  padding-top: 1.2rem;
}

form {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.formular {
  padding-left: 0rem;
  padding-right: 0rem;
  padding-bottom: 0rem;
}

@media only screen and (min-width: 1440px) {
  .wrap-kontakt {
    padding-top: 2.2rem;
  }
}

/*ÜBERSCHRIFTEN*/
.top {
  /*h2 ganz oben vom main*/
  color: #2f989a;
  font-weight: 700;
  font-size: 2rem;
}

h2 {
  color: #2f989a;
  font-weight: 500;
}

.unser-angebot h2 {
  color: white;
}

h3 {
  font-weight: 400;
  color: #2f989a;
}

.wrap-unser-angebot h3,
.mietpreise h3 {
  color: white;
}

.gruppe-1 h3 {
  color: #000000;
}

.mietangebot h3,
.wrap-mietangebot-ausstattung h3 {
  color: #2f989a;
}

h4 {
  font-weight: 500;
  color: #2f989a;
}

@media only screen and (min-width: 700px) {
  h2 {
    font-size: 1.5rem;
  }
  h3 {
    font-size: 1.3rem;
  }
  .footer-flexbox-text h3 {
    font-size: 0.8rem;
  }
}

@media only screen and (min-width: 1272px) {
  .top {
    font-size: 2.5rem;
  }
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.5rem;
  }
}

/*########## STARTSEITE ##########*/
/*Header*/
header {
  position: relative;
}

/*Navigation*/
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4rem;
  width: 100%;
  position: fixed;
  background-color: white;
  z-index: 100;
  top: 0;
}

.logo {
  width: auto;
  height: 100%;
  margin: 0;
}

.logo > a {
  display: inline-block;
  width: auto;
  height: 80%;
}

.logo > a:hover {
  transform: none;
}

.logo > a > img {
  width: auto;
  height: 100%;
}

nav ul {
  position: absolute;
  top: 4rem;
  right: 0;
  text-align: end;
  background-color: white;
  width: 100vw;
}

nav > ul > li {
  padding: 1rem;
  font-size: 1.5rem;
}

nav > ul > li > a {
  text-decoration: none;
  padding: 2rem 0rem;
}

nav > ul > li > a:hover {
  font-weight: 500;
  transform: scale(1.1);
}

nav > ul > li > a:active {
  text-decoration: none;
  padding: 2rem 0rem;
}

nav > ul > li > a:visited {
  text-decoration: none;
  padding: 2rem 0rem;
  color: #2f989a;
}

nav label {
  display: block;
  padding: 1rem 0rem;
}

label span {
  height: 2px;
  width: 34px;
  background-color: #2f989a;
  display: block;
  margin: 0.5rem;
  padding-right: 1rem;
  transition: 0.5s;
}

nav ul,
nav input {
  display: none;
  /*in inaktiviertem Zustand nicht sichtbar*/
}

nav input:checked + label span:first-child {
  transition: all 0.5s;
  transform: rotate(45deg);
  margin: 0;
}

nav input:checked + label span:nth-of-type(2) {
  display: none;
}

nav input:checked + label span:last-child {
  transition: all 0.25s;
  transform: rotate(-45deg);
  margin: 0;
}

nav input:checked ~ ul {
  display: grid;
  /*nach Aktivierung sichtbar*/
  align-items: center;
  z-index: 2;
}

@media only screen and (min-width: 800px) {
  nav ul {
    display: block;
    position: static;
    background-color: rgba(255, 255, 255, 0);
    height: revert;
  }
  nav > ul > li {
    padding-right: 2rem;
    display: inline-block;
    font-size: 1.1rem;
  }
  nav label,
  nav input {
    display: none;
  }
}

nav > ul > li.active > a {
  font-weight: bolder;
}

/*Slider*/
.slider {
  max-width: 4000px;
}

.wrap-slider {
  position: relative;
  z-index: -10;
  padding-top: 38%;
  width: 100%;
  margin-top: 4rem;
}

.wrap-slider.kontakt {
  background: url("../img/header_rechteck.svg") left top no-repeat, url("../img/headerbild-1920.jpg") left top no-repeat;
  background-size: contain;
}

.wrap-slider.wohnmobile {
  background: url("../img/header_rechteck.svg") left top no-repeat, url("../img/headerbild_2-1920.jpg") left top no-repeat;
  background-size: contain;
}

.wrap-slider.stellplaetze {
  background: url("../img/header_rechteck.svg") left top no-repeat, url("../img/headerbild_3-1920.jpg") left top no-repeat;
  background-size: contain;
}

.gruener-verlauf {
  background-image: url("../img/header_rechteck.svg");
  background-position: left;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 10;
  top: -2rem;
}

.fahrbahn-unanimiert {
  height: 1rem;
  width: 100vw;
  background-color: #2f989a;
}

.wrap-h1 {
  position: absolute;
  top: 35vw;
  left: 1.5rem;
  text-align: start;
  z-index: 10;
}

.wrap-h1 h1 {
  font-size: 1.3rem;
}

.wrap-h1 p {
  font-size: 0.8rem;
}

@media only screen and (min-width: 400px) {
  .wrap-h1 {
    top: 33vw;
  }
  .wrap-h1 h1 {
    font-size: 1.5rem;
  }
  .wrap-h1 p {
    font-size: 1rem;
  }
}

@media only screen and (min-width: 500px) {
  .wrap-h1 {
    top: 30vw;
  }
  .wrap-h1 h1 {
    font-size: 1.8rem;
  }
  .wrap-h1 p {
    font-size: 1.2rem;
  }
}

@media only screen and (min-width: 681px) {
  .wrap-h1 {
    top: 21vw;
    left: 2rem;
  }
  .wrap-h1 h1 {
    font-size: 1.6rem;
  }
  .wrap-h1 p {
    font-size: 1.1rem;
  }
}

@media only screen and (min-width: 940px) {
  .wrap-h1 {
    top: 19vw;
    left: 3rem;
  }
  .wrap-h1 h1 {
    font-size: 2rem;
  }
  .wrap-h1 p {
    font-size: 1.3rem;
  }
}

@media only screen and (min-width: 1400px) {
  .wrap-h1 h1 {
    font-size: 2.5rem;
  }
  .wrap-h1 p {
    font-size: 1.6rem;
  }
}

h1 {
  margin: 0;
  font-size: 1.5rem;
}

.h2-startseite {
  font-size: 1rem;
  font-weight: normal;
  color: black;
  padding: 0;
}

@media only screen and (min-width: 361px) {
  .wrap-startseite-h1 {
    top: 2.5rem;
  }
}

/*Headerbild*/
.startbild {
  width: 100%;
  height: auto;
}

.startbild img {
  width: 100%;
  height: auto;
}

/*Randleiste*/
.randinfos {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.randinfos div {
  background-color: #2f989a;
  color: white;
  padding: 0.5rem 0.5rem 0.5rem 4rem;
  background-repeat: no-repeat;
  background-position: 0.6rem center;
  width: 13rem;
  text-align: end;
  position: fixed;
  right: -10rem;
  background-size: 12.8%;
  z-index: 20;
}

.tel {
  margin-bottom: 0.5rem;
  background-image: url("../img/telefon_header.svg");
  position: fixed;
  top: 5rem;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  transition-duration: 0.5s;
  transition-delay: 0s;
  -webkit-transition-delay: 2s;
  -o-transition-delay: 2s;
  transition-delay: 2s;
  -webkit-animation: showup 2s ease;
  animation: showup 2s ease;
  overflow: hidden;
  z-index: 3;
}

.mail {
  margin-bottom: 0.5rem;
  background-image: url("../img/mail.svg");
  position: fixed;
  top: 7.5rem;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  transition-duration: 0.5s;
  transition-delay: 0s;
  -webkit-transition-delay: 2s;
  -o-transition-delay: 2s;
  transition-delay: 2s;
  -webkit-animation: showup 2s ease;
  animation: showup 2s ease;
  overflow: hidden;
  z-index: 3;
}

.tel:hover,
.mail:hover {
  right: 0rem;
  -webkit-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-touch-callout: none;
  /* damit IPad u. IPhone hover können*/
}

.randinfos a {
  color: white;
}

/*Animation*/
.animation {
  z-index: 10;
  position: relative;
}

.wohnmobil {
  width: 23%;
  height: auto;
  position: absolute;
  bottom: 1rem;
  animation-name: wohnmobil;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  z-index: 1;
}

.wohnmobil img {
  width: 100%;
  height: auto;
}

@keyframes wohnmobil {
  0% {
    margin-left: -10%;
  }
  99% {
    margin-left: 99%;
    opacity: 1;
  }
  100% {
    margin-left: 77%;
    opacity: 0;
  }
}

.fahrbahn {
  height: 1rem;
  width: 100vw;
  background-color: #2f989a;
  position: absolute;
  bottom: 1rem;
  animation-name: fahrbahn;
  animation-duration: 4s;
  animation-timing-function: linear;
  z-index: 1;
}

@keyframes fahrbahn {
  0% {
    margin-left: -100%;
  }
  99% {
    margin-left: -1%;
  }
  100% {
    margin-left: 0%;
  }
}

@media only screen and (min-width: 450px) {
  .wohnmobil {
    width: 15%;
  }
  @keyframes wohnmobil {
    99% {
      opacity: 1;
    }
    100% {
      margin-left: 85%;
      opacity: 0;
    }
  }
  @keyframes fahrbahn {
    0% {
      margin-left: -95%;
    }
    100% {
      margin-left: -5%;
    }
  }
}

@media only screen and (min-width: 750px) {
  .wohnmobil {
    width: 12%;
  }
  @keyframes wohnmobil {
    99% {
      opacity: 1;
    }
    100% {
      margin-left: 88%;
      opacity: 0;
    }
  }
}

@media only screen and (min-width: 1100px) {
  .wohnmobil {
    width: 10%;
  }
  @keyframes wohnmobil {
    99% {
      opacity: 1;
    }
    100% {
      margin-left: 90%;
      opacity: 0;
    }
  }
}

@media only screen and (min-width: 1900px) {
  .wohnmobil {
    width: 10%;
  }
}

/*WILLKOMMENSTEXT*/
.oeffnungszeiten span {
  width: 2rem;
  color: #195152;
}

@media only screen and (min-width: 760px) {
  .text-flex {
    display: flex;
    justify-content: space-between;
  }
  .wrap-willkommen-text {
    width: 66.66%;
  }
  .oeffnungszeiten {
    align-items: flex-end;
    align-self: flex-start;
  }
  .oeffnungszeiten h3 {
    padding-top: 0rem;
  }
}

/*Aktuelles*/
.aktuelles figure {
  width: 100%;
  height: auto;
  padding: 0 2rem;
}

.aktuelles figure img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  box-shadow: 5px 4px 8px rgba(0, 0, 0, 0.4);
}

@media only screen and (min-width: 400px) {
  .aktuelles figure {
    width: 60%;
    margin: 0 auto;
    padding: 0;
  }
}

@media only screen and (min-width: 600px) {
  .aktuelles > article {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .aktuelles figure {
    width: 27%;
    margin: 0;
  }
  .aktuelles-text h3 {
    padding-top: 0;
  }
  .aktuelles-text {
    width: 66.66%;
  }
}

@media only screen and (min-width: 1030px) {
  .aktuelles figure {
    width: 20%;
  }
}

/*Unser Angebot*/
.unser-angebot {
  background-color: #90bc47;
  color: white;
}

.wrap-unser-angebot figure {
  width: 100%;
  padding: 0 2rem;
}

.wrap-unser-angebot figure img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  box-shadow: 5px 4px 8px rgba(0, 0, 0, 0.4);
}

.wrap-unser-angebot a {
  color: black;
  padding: 0.4rem 0;
  border-radius: 40px;
  text-align: center;
  background-color: white;
  display: inline-block;
  width: 100%;
  margin-top: 1.3rem;
}

@media only screen and (min-width: 400px) {
  .wrap-unser-angebot figure {
    width: 60%;
    padding: 0;
    margin: 0 auto;
  }
}

@media only screen and (min-width: 600px) {
  .wrap-unser-angebot {
    display: flex;
    justify-content: space-between;
  }
  .wrap-unser-angebot > article {
    width: 30%;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .wrap-unser-angebot > article p {
    flex: 1 1 auto;
  }
  .wrap-unser-angebot figure {
    width: 100%;
    margin: 0;
  }
}

@media only screen and (min-width: 1272px) {
  .wrap-unser-angebot > article {
    width: 27%;
  }
}

/*FOOTER*/
footer {
  text-align: start;
}

footer figure {
  width: 100%;
  height: auto;
}

footer figure img {
  width: 100%;
  height: auto;
}

.footer-flexbox-text a {
  color: #000000;
}

.footer-flexbox-text span {
  width: 5rem;
}

.wrap-footer-copyright {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.wrap-footer-copyright,
.wrap-footer-copyright a {
  font-size: 0.9rem;
  color: #2f989a;
  font-weight: 500;
}

.wrap-footer-copyright p {
  display: inline-block;
}

@media only screen and (min-width: 620px) {
  .footer-flexbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .footer-flexbox figure {
    width: 25%;
  }
  .footer-flexbox-text {
    display: flex;
    font-size: 0.8rem;
    justify-content: space-around;
    width: 75%;
    padding: 0;
  }
  .copyright,
  .kontakt-footer {
    display: inline-block;
  }
  .kontakt-footer {
    margin-left: 2rem;
  }
}

/*######### KONTAKT ########*/
.wrap-kontakt div:nth-child(2) a {
  color: black;
}

.wrap-karte {
  width: 100%;
  height: 50vw;
}

.karte,
.map {
  width: 100%;
  height: 100%;
  z-index: 0;
}

.wrap-kontakt > div:last-child span {
  width: 2rem;
  color: #2f989a;
}

form {
  background-color: #90bc47;
  padding-bottom: 2rem;
}

.anrede-h {
  position: absolute;
  z-index: -1;
}

form label {
  padding: 1rem 0 0.5rem 0;
}

form input {
  padding: 0.2rem;
}

form input[type="checkbox"] {
  width: auto;
}

form label,
form input,
textarea,
.wrap-vorname,
.wrap-nachname {
  width: 100%;
  display: inline-block;
}

form p {
  padding-bottom: 1rem;
}

form a {
  color: white !important;
}

form input[type="submit"] {
  background-color: #000000;
  color: #ffffff;
  border: none;
}

form input[type="submit"]:hover {
  background-color: #ffffff;
  color: #000000;
  transform: scale(1.1);
  transition: all 0.5s ease-in-out;
}

@media only screen and (min-width: 450px) {
  .wrap-kontakt {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

@media only screen and (min-width: 900px) {
  .wrap-kontakt {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .wrap-felder-neben {
    display: flex;
    justify-content: space-between;
  }
  .wrap-vorname,
  .wrap-nachname {
    width: 40%;
    display: inline-block;
  }
  form input[type="submit"] {
    width: 20%;
  }
}

@media only screen and (min-width: 1020px) {
  .wrap-kontakt {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

/*############### STELLPLÄTZE #################*/
.wrap-unterseite-h1 {
  position: absolute;
  top: 11vw;
  left: 0.6rem;
  text-align: start;
  z-index: 10;
}

.wrap-unterseite-h1 h1 {
  font-size: 0.9rem;
}

.wrap-unterseite-h1 p {
  font-size: 0.7rem;
}

@media only screen and (min-width: 500px) {
  .wrap-unterseite-h1 {
    top: 13vw;
  }
  .wrap-unterseite-h1 h1 {
    font-size: 1.5rem;
  }
  .wrap-unterseite-h1 p {
    font-size: 0.8rem;
  }
}

@media only screen and (min-width: 650px) {
  .wrap-unterseite-h1 {
    left: 1.2rem;
  }
  .wrap-unterseite-h1 h1 {
    font-size: 1.8rem;
  }
  .wrap-unterseite-h1 p {
    font-size: 1rem;
  }
}

@media only screen and (min-width: 900px) {
  .wrap-unterseite-h1 h1 {
    font-size: 2.3rem;
  }
  .wrap-unterseite-h1 p {
    font-size: 1.3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .wrap-unterseite-h1 {
    left: 2.2rem;
  }
  .wrap-unterseite-h1 h1 {
    font-size: 2.5rem;
  }
  .wrap-unterseite-h1 p {
    font-size: 1.5rem;
  }
}

.wrap-stellplaetze-text p:last-child,
.wrap-wohnmobile-text p:last-child {
  padding: 1rem 0 1.3rem 0;
}

.wrap-stellplaetze-text + figure,
.wrap-wohnmobile-text + figure,
.mietangebot figure,
.wrap-mietangebot-flex figure {
  width: 100%;
  height: auto;
  padding: 0 2rem 1.7rem 2rem;
}

.wrap-stellplaetze-text + figure img,
.wrap-wohnmobile-text + figure img,
.mietangebot figure img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  box-shadow: 5px 4px 8px rgba(0, 0, 0, 0.4);
}

.wrap-stellplaetze-preise section {
  padding-bottom: 0rem;
}

.stellplaetze > figure {
  width: 100%;
  height: auto;
  padding-bottom: 0rem;
}

.stellplaetze figure img {
  width: 100%;
  height: auto;
}

.service {
  padding-top: 5rem;
  padding-bottom: 0rem;
}

.wrap-service-text p:last-child {
  padding: 1rem 0rem 1.3rem 0rem;
}

.wrap-service > ul > li {
  list-style-type: disc;
}

.wrap-service > ul {
  padding: 1rem 0 0 1rem;
}

@media only screen and (min-width: 400px) {
  .wrap-stellplaetze-text + figure,
  .wrap-wohnmobile-text + figure,
  .mietangebot figure,
  .wrap-mietangebot-flex figure {
    width: 60%;
    height: auto;
    padding: 0rem;
    margin: auto;
  }
}

@media only screen and (min-width: 600px) {
  .first-article > article,
  .wrap-mietangebot-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .wrap-stellplaetze-text p:last-child,
  .wrap-wohnmobile-text p:last-child {
    padding-bottom: 0rem;
  }
  .wrap-stellplaetze-text + figure,
  .wrap-wohnmobile-text + figure,
  .mietangebot figure,
  .wrap-mietangebot-flex figure {
    width: 27%;
    margin: 0;
  }
  .wrap-stellplaetze-text,
  .wrap-wohnmobile-text,
  .mietpreise-liste {
    width: 66.66%;
  }
  .wrap-stellplaetze-preise {
    padding-top: 1.2rem;
    display: flex;
    justify-content: space-between;
  }
}

@media only screen and (min-width: 1016px) {
  .wrap-service {
    display: flex;
    justify-content: space-between;
  }
  .wrap-service-text {
    width: 66.66%;
  }
}

@media only screen and (min-width: 1200px) {
  .wrap-stellplaetze-preise section:last-child {
    width: 33.33%;
  }
}

/*################ WOHNMOBILE ####################*/
.technisch h3 {
  padding: 0 0 1.3rem 0;
}

.mietpreise h3 {
  padding-top: 0;
}

.mietangebot h3 {
  padding-bottom: 1.3rem;
}

.first-article figure {
  padding-bottom: 0rem;
}

.gruppe-1 figure,
.gruppe-2 figure,
.gruppe-0 figure {
  width: 100%;
  height: auto;
}

.gruppe-2 figure,
.gruppe-1 figure,
.gruppe-0 figure {
  padding: 2rem 1rem;
}

.gruppe-1 figure:first-child img,
.gruppe-2 figure:first-child img,
.gruppe-0 figure:first-child img {
  width: 100%;
  height: auto;
}

.technisch ul span {
  width: 8rem;
}

.daten {
  padding-bottom: 1.3rem;
}

.ausstattung li {
  list-style-type: disc;
  margin-left: 1rem;
}

/*WEITERLESEN 0*/
.checkbox0 {
  display: none;
}

.wrap-button-ausrichten-0,
.wrap-button-ausrichten-2-0 {
  display: inline-block;
  text-align: left;
  grid-column-start: 3;
  padding: 0.5rem 0.5rem 1.5rem 0rem;
}

.button0 {
  color: #2f989a;
  font-weight: bolder;
  cursor: pointer;
}

.weiterlesen0,
.wrap-button-ausrichten-2-0 {
  display: none;
}

@media only screen and (min-width: 456px) {
  .wrap-button-ausrichten-2-0 {
    display: none;
  }
}

.checkbox0:checked ~ .weiterlesen0,
.checkbox0:checked ~ .wrap-button-ausrichten-2-0 {
  display: block;
}

.checkbox0:checked ~ .wrap-button-ausrichten-0 {
  display: none;
}

@media only screen and (min-width: 480px) {
  .weiterlesen0 {
    grid-column-start: 3;
  }
}

@media only screen and (max-width: 915px) {
  .wrap-button-ausrichten,
  .wrap-button-ausrichten-0,
  .wrap-button-ausrichten-0,
  .wrap-button-ausrichten-2-0 {
    grid-column-start: 1;
  }
}

@media only screen and (min-width: 915px) {
  .wrap-button-ausrichten,
  .wrap-button-ausrichten-0 {
    grid-column-start: 3;
  }
}

.checkbox {
  display: none;
}

.wrap-button-ausrichten,
.wrap-button-ausrichten-2 {
  display: inline-block;
  text-align: left;
  grid-column-start: 3;
  padding: 0.5rem 0.5rem 1.5rem 0rem;
}

.button {
  color: #2f989a;
  font-weight: bolder;
  cursor: pointer;
}

.weiterlesen,
.wrap-button-ausrichten-2 {
  display: none;
}

@media only screen and (min-width: 456px) {
  .wrap-button-ausrichten-2 {
    display: none;
  }
}

.checkbox:checked ~ .weiterlesen,
.checkbox:checked ~ .wrap-button-ausrichten-2 {
  display: block;
}

.checkbox:checked ~ .wrap-button-ausrichten {
  display: none;
}

@media only screen and (min-width: 480px) {
  .weiterlesen {
    grid-column-start: 3;
  }
}

/*WEITERLESEN 2*/
.checkbox2 {
  display: none;
}

.wrap-button-ausrichten-carado2,
.wrap-button-ausrichten-2-carado2 {
  display: inline-block;
  text-align: left;
  grid-column-start: 3;
  padding: 0.5rem 0.5rem 1.5rem 0rem;
}

.button2 {
  color: #2f989a;
  font-weight: bolder;
  cursor: pointer;
}

.weiterlesen2,
.wrap-button-ausrichten-2-carado2 {
  display: none;
}

@media only screen and (min-width: 456px) {
  .wrap-button-ausrichten-2-carado2 {
    display: none;
  }
}

.checkbox2:checked ~ .weiterlesen2,
.checkbox2:checked ~ .wrap-button-ausrichten-2-carado2 {
  display: block;
}

.checkbox2:checked ~ .wrap-button-ausrichten-carado2 {
  display: none;
}

@media only screen and (min-width: 480px) {
  .weiterlesen2 {
    grid-column-start: 3;
  }
}

@media only screen and (max-width: 915px) {
  .wrap-button-ausrichten,
  .wrap-button-ausrichten-2,
  .wrap-button-ausrichten-carado2,
  .wrap-button-ausrichten-2-carado2 {
    grid-column-start: 1;
  }
}

@media only screen and (min-width: 915px) {
  .wrap-button-ausrichten,
  .wrap-button-ausrichten-2 {
    grid-column-start: 3;
  }
}

/*WEITERLESEN 3*/
.checkbox3 {
  display: none;
}

.wrap-button-ausrichten-forster3,
.wrap-button-ausrichten-3-forster3 {
  display: inline-block;
  text-align: left;
  grid-column-start: 3;
  padding: 0.5rem 0.5rem 1.5rem 0rem;
}

.button3 {
  color: #2f989a;
  font-weight: bolder;
  cursor: pointer;
}

.weiterlesen3,
.wrap-button-ausrichten-3-forster3 {
  display: none;
}

@media only screen and (min-width: 456px) {
  .wrap-button-ausrichten-3-forster3 {
    display: none;
  }
}

.checkbox3:checked ~ .weiterlesen3,
.checkbox3:checked ~ .wrap-button-ausrichten-3-forster3 {
  display: block;
}

.checkbox3:checked ~ .wrap-button-ausrichten-forster3 {
  display: none;
}

@media only screen and (min-width: 480px) {
  .weiterlesen3 {
    grid-column-start: 3;
  }
}

@media only screen and (max-width: 915px) {
  .wrap-button-ausrichten,
  .wrap-button-ausrichten-2,
  .wrap-button-ausrichten-carado2,
  .wrap-button-ausrichten-2-carado2,
  .wrap-button-ausrichten-forster3,
  .wrap-button-ausrichten-3-forster3 {
    grid-column-start: 1;
  }
}

@media only screen and (min-width: 915px) {
  .wrap-button-ausrichten,
  .wrap-button-ausrichten-2,
  .wrap-button-ausrichten-forster3,
  .wrap-button-ausrichten-3-forster3 {
    grid-column-start: 3;
  }
}

.wohnmobil-slider {
  background-color: #90bc47;
  padding: 1rem 1.5rem;
}

.wrap-mietpreise .gruppe1,
.wrap-mietpreise .gruppe2 {
  border: 1px solid #90bc47;
  box-shadow: 5px 4px 8px rgba(0, 0, 0, 0.4);
}

.wrap-mietpreise .gruppe1 div,
.wrap-mietpreise .gruppe2 div {
  background-color: #90bc47;
  color: white;
}

.gruppe1 {
  margin-bottom: 1.3rem;
}

.gruppe2 {
  margin-bottom: 2.5rem;
}

.gruppe1 > *,
.gruppe2 > * {
  padding: 0.8rem;
}

.wrap-gruppen-flex span {
  width: 7.5rem;
}

.wrap-mietangebot-flex {
  padding-bottom: 1.3rem;
}

.wrap-mietangebot-flex li,
.mietpreise-liste li {
  list-style-type: disc;
  margin-left: 1rem;
}

.mietangebot figure {
  padding-bottom: 0rem;
}

.mietpreise-liste {
  padding-bottom: 1.3rem;
}

@media only screen and (min-width: 350px) {
  .gruppe1,
  .gruppe2 {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media only screen and (min-width: 456px) {
  .technisch h4 {
    padding-bottom: 1.3rem;
  }
  .wrap-gruppe-0,
  .wrap-gruppe-1,
  .wrap-gruppe-2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .gruppe-0 div figure,
  .gruppe-0 div .daten,
  .gruppe-1 div figure,
  .gruppe-1 div .daten,
  .gruppe-2 div figure,
  .gruppe-2 div .daten {
    width: 50%;
  }
}

@media only screen and (min-width: 550px) {
  .wrap-gruppen-flex {
    display: flex;
    justify-content: center;
    padding-bottom: 2.5rem;
  }
  .gruppe1,
  .gruppe2 {
    margin: 0rem;
    width: 40%;
  }
  .gruppe1 {
    margin-right: 4rem;
  }
}

@media only screen and (min-width: 600px) {
  .wrap-mietangebot-flex {
    padding-bottom: 0;
  }
  .wrap-mietangebot-ausstattung {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

@media only screen and (min-width: 480px) {
  .wrap-gruppe-0,
  .wrap-gruppe-1,
  .wrap-gruppe-2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: start;
    grid-column-gap: 1rem;
  }
  .gruppe-0 div figure,
  .gruppe-0 div .daten,
  .gruppe-1 div figure,
  .gruppe-1 div .daten,
  .gruppe-2 div figure,
  .gruppe-2 div .daten {
    width: 100%;
  }
  .gruppe-2 figure,
  .gruppe-1 figure,
  .gruppe-0 figure {
    padding: 0 1rem 0 0;
    grid-column-start: 1;
    grid-column-end: 3;
  }
  .daten,
  .weiterlesen {
    grid-column-start: 3;
    grid-column-end: 5;
  }
  .ausstattung {
    grid-column-start: 1;
    grid-column-end: 3;
  }
}

@media only screen and (min-width: 915px) {
  .gruppe-2 figure,
  .gruppe-1 figure,
  .gruppe-0 figure {
    grid-column-start: 1;
    grid-column-end: 2;
  }
  .daten,
  .weiterlesen {
    grid-column-start: 2;
    grid-column-end: 3;
  }
  .ausstattung {
    grid-column-start: 3;
    grid-column-end: 6;
  }
}

/*################ DATENSCHUTZ  IMPRESSUM ###############*/
.datenschutz {
  text-align: left;
}

.datenschutz h2 {
  margin-top: 6rem;
}

@media only screen and (max-width: 600px) {
  .datenschutz h2 {
    margin-top: 4rem;
  }
}

.wrap-datenerfassung p,
.datenschutz-padding {
  padding-bottom: 0.5rem;
}

.impressum h2:nth-child(3),
.impressum h2:nth-child(4),
.impressum h2:nth-child(5),
.impressum h2:nth-child(6),
.impressum h2:nth-child(7),
.impressum h2:nth-child(8),
.impressum h2:nth-child(9),
.impressum h2:nth-child(10),
.impressum h2:nth-child(11) {
  padding-bottom: 0.5rem;
  margin-top: 2rem;
}

.wrap-stellplaetze-text li {
  list-style: disc inside;
}