@charset "UTF-8";
/****************************** 
Fonts 
******************************/
/* oswald-300 - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/oswald-v17-latin-300.eot");
  /* IE9 Compat Modes */
  src: local("Oswald Light"), local("Oswald-Light"), url("../fonts/oswald-v17-latin-300.eot?#iefix") format("embedded-opentype"), url("../fonts/oswald-v17-latin-300.woff2") format("woff2"), url("../fonts/oswald-v17-latin-300.woff") format("woff"), url("../fonts/oswald-v17-latin-300.ttf") format("truetype"), url("../fonts/oswald-v17-latin-300.svg#Oswald") format("svg");
  /* Legacy iOS */ }
/* oswald-regular - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/oswald-v17-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local("Oswald Regular"), local("Oswald-Regular"), url("../fonts/oswald-v17-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/oswald-v17-latin-regular.woff2") format("woff2"), url("../fonts/oswald-v17-latin-regular.woff") format("woff"), url("../fonts/oswald-v17-latin-regular.ttf") format("truetype"), url("../fonts/oswald-v17-latin-regular.svg#Oswald") format("svg");
  /* Legacy iOS */ }
/* oswald-600 - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/oswald-v17-latin-600.eot");
  /* IE9 Compat Modes */
  src: local("Oswald SemiBold"), local("Oswald-SemiBold"), url("../fonts/oswald-v17-latin-600.eot?#iefix") format("embedded-opentype"), url("../fonts/oswald-v17-latin-600.woff2") format("woff2"), url("../fonts/oswald-v17-latin-600.woff") format("woff"), url("../fonts/oswald-v17-latin-600.ttf") format("truetype"), url("../fonts/oswald-v17-latin-600.svg#Oswald") format("svg");
  /* Legacy iOS */ }
/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/montserrat-v13-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local("Montserrat Regular"), local("Montserrat-Regular"), url("../fonts/montserrat-v13-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat-v13-latin-regular.woff2") format("woff2"), url("../fonts/montserrat-v13-latin-regular.woff") format("woff"), url("../fonts/montserrat-v13-latin-regular.ttf") format("truetype"), url("../fonts/montserrat-v13-latin-regular.svg#Montserrat") format("svg");
  /* Legacy iOS */ }
/* montserrat-500 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/montserrat-v13-latin-500.eot");
  /* IE9 Compat Modes */
  src: local("Montserrat Medium"), local("Montserrat-Medium"), url("../fonts/montserrat-v13-latin-500.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat-v13-latin-500.woff2") format("woff2"), url("../fonts/montserrat-v13-latin-500.woff") format("woff"), url("../fonts/montserrat-v13-latin-500.ttf") format("truetype"), url("../fonts/montserrat-v13-latin-500.svg#Montserrat") format("svg");
  /* Legacy iOS */ }
/* montserrat-600 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url("./assets/fonts/montserrat-v13-latin-600.eot");
  /* IE9 Compat Modes */
  src: local("Montserrat SemiBold"), local("Montserrat-SemiBold"), url("./assets/fonts/montserrat-v13-latin-600.eot?#iefix") format("embedded-opentype"), url("./assets/fonts/montserrat-v13-latin-600.woff2") format("woff2"), url("./assets/fonts/montserrat-v13-latin-600.woff") format("woff"), url("./assets/fonts/montserrat-v13-latin-600.ttf") format("truetype"), url("./assets/fonts/montserrat-v13-latin-600.svg#Montserrat") format("svg");
  /* Legacy iOS */ }
/* montserrat-700 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url("./assets/fonts/montserrat-v13-latin-700.eot");
  /* IE9 Compat Modes */
  src: local("Montserrat Bold"), local("Montserrat-Bold"), url("./assets/fonts/montserrat-v13-latin-700.eot?#iefix") format("embedded-opentype"), url("./assets/fonts/montserrat-v13-latin-700.woff2") format("woff2"), url("./assets/fonts/montserrat-v13-latin-700.woff") format("woff"), url("./assets/fonts/montserrat-v13-latin-700.ttf") format("truetype"), url("./assets/fonts/montserrat-v13-latin-700.svg#Montserrat") format("svg");
  /* Legacy iOS */ }
:root {
  --content-width: 479px; }

.hinweis {
  background: #000;
  color: #fff;
  padding: 2px 5px; }

@media (min-width: 1280px) {
  .desktop-hinweis {
    display: block; } }
@media (max-width: 700px) {
  .desktop-hinweis {
    display: none; } }
@media (min-width: 768px) and (max-width: 5120px) {
  :root {
    --content-width: 320px; }

  body input + label {
    right: 40%; } }
*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

body, p {
  font-family: 'Montserrat';
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5rem; }

hr {
  margin: 5vh 0; }

table {
  margin-bottom: 10%; }

td {
  padding-bottom: 5px;
  padding-right: 10px; }

h1, h2, h3 {
  text-align: center;
  margin-bottom: 1rem;
  font-family: 'Oswald'; }

h1 {
  font-size: 1.6rem;
  line-height: 2.2rem; }

.like-h1 {
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 2rem;
  font-family: 'Oswald';
  font-weight: bold; }

h2 {
  font-size: 1.3rem;
  line-height: 2.2rem; }

h3 {
  font-size: 1.2rem;
  line-height: 2.2rem; }

h4 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  font-family: 'Oswald'; }

a:active, a:focus {
  outline: none; }

.logo-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  .logo-nav div {
    width: 100%;
    margin: 0 auto; }

.logo-home {
  padding-top: 30px;
  width: 80px;
  height: 64px;
  margin: 0 auto; }

.zentriert {
  text-align: center; }

.fahrplan-button {
  padding: 15px 25px;
  border: 2px solid #000;
  text-decoration: none;
  font-size: 1.0rem;
  margin: 10% auto; }

.startbild {
  margin-bottom: 5vh; }

/****************************** 
Hamburger Menü
******************************/
body input + label {
  position: absolute;
  top: 40px;
  right: 40px;
  height: 20px;
  width: 15px;
  z-index: 5; }
  body input + label span {
    position: absolute;
    width: 100%;
    height: 2px;
    top: 50%;
    margin-top: -1px;
    left: 0;
    display: block;
    background: #000;
    -webkit-transition: .5s;
    transition: .5s; }
  body input + label span:first-child {
    top: 3px; }
  body input + label span:last-child {
    top: 16px; }
body label:hover {
  cursor: pointer; }
body input:checked + label span {
  opacity: 0;
  top: 50%; }
body input:checked + label span:first-child {
  opacity: 1;
  -webkit-transform: rotate(405deg);
  transform: rotate(405deg); }
body input:checked + label span:last-child {
  opacity: 1;
  -webkit-transform: rotate(-405deg);
  transform: rotate(-405deg); }
body input ~ nav {
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /*height: 36px;*/
  z-index: 3;
  -webkit-transition: .5s;
  transition: .5s;
  -webkit-transition-delay: .5s;
  transition-delay: .5s;
  overflow: hidden; }
  body input ~ nav > ul {
    text-align: center;
    position: absolute;
    top: 10%;
    left: 20%;
    right: 20%; }
    body input ~ nav > ul > li {
      opacity: 0;
      -webkit-transition: .5s;
      transition: .5s;
      -webkit-transition-delay: 0s;
      transition-delay: 0s; }
      body input ~ nav > ul > li > a {
        text-decoration: none;
        text-transform: uppercase;
        color: #000;
        font-weight: 700;
        font-family: sans-serif;
        display: block;
        padding: 10px; }
body input:checked ~ nav {
  height: 100%;
  -webkit-transition-delay: 0s;
  transition-delay: 0s; }
  body input:checked ~ nav > ul > li {
    opacity: 1;
    -webkit-transition-delay: .5s;
    transition-delay: .5s; }

#burger {
  display: none; }

@media (min-width: 1280px) {
  body input + label {
    right: 40%; } }
/******************************
Home Grid 
******************************/
.haupt-grid {
  display: grid;
  grid-template-columns: repeat(3, 33.333%);
  /*grid-template-rows: repeat(6, 85px);*/
  grid-column-gap: 10px;
  /*grid-row-gap: 40px;*/
  grid-template-areas: "jagdschloss prora prora" "sellin logo binz" "sellin-strand baabe baabe" "parkplatz-suelitz parkplatz-suelitz ralswiek" "veranstaltungen veranstaltungen veranstaltungen" "coronainfo coronainfo coronainfo"; }

.jagdschloss {
  grid-area: jagdschloss; }

.prora {
  grid-area: prora; }

.binz {
  grid-area: binz; }

.sellin {
  grid-area: sellin; }

.sellin-strand {
  grid-area: sellin-strand; }

.baabe {
  grid-area: baabe; }

.ralswiek {
  grid-area: ralswiek; }

.parkplatz-suelitz {
  grid-area: parkplatz-suelitz; }

.veranstaltungen {
  grid-area: veranstaltungen;
}

.coronainfo {
  grid-area: coronainfo;
}

.va,
.kalender {
  text-transform: uppercase;
  display: inline;
}

.va {
  color: #fff;
  background: #a6192e;
  padding: 2px 4px;
}

.kalender {
  color: #a6192e;
}

.spezial-grid {
  margin-bottom: 2vh;
  display: grid;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(1, 80px);
  grid-column-gap: 10px;
  grid-row-gap: 40px;
  grid-template-areas: "links rechts"; }

.spezial-grid-links {
  grid-area: links; }

.spezial-grid-rechts {
  grid-area: rechts; }

.footer-grid {
  margin-top: 2vh;
  margin-bottom: 10vh;
  display: grid;
  grid-template-columns: repeat(3, 33.333%);
  grid-template-rows: repeat(2, 80px);
  grid-column-gap: 10px;
  grid-row-gap: 40px;
  grid-template-areas: "galerie faq about" "kontakt impressum datenschutz"; }

.galerie {
  grid-area: galerie; }

.faq {
  grid-area: faq; }

.about {
  grid-area: about; }

.kontakt {
  grid-area: kontakt; }

.impressum {
  grid-area: impressum; }

.datenschutz {
  grid-area: datenschutz; }

.top-grid {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 80px;
  grid-column-gap: 10px;
  grid-row-gap: 40px;
  grid-template-areas: "top-grid-full"; }

.top-grid-full {
  grid-area: top-grid-full;
}

.gridbild {
  position: relative;
  z-index: -99;
  margin-top: -9px; }
  .gridbild img,
  .va-kalender {
    border: 8px solid #fff;
    outline: 1px solid #000;
    text-align: center;
  }

.ruegen-app,
.va-kalender {
  padding: 10px 0;
}

.name {
  font-size: 13px;
  color: #000;
  text-transform: uppercase;
  font-family: 'Oswald';
  text-align: center; }
  .name span {
    background: #fff;
    padding: 1px 5px; }



/******************************
Fahrplan Accordion
******************************/
.fahrplan-accordion {
  margin: 25px 0; }

.accordion {
  background-color: #fff;
  color: #444;
  border: 1px solid #000;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  outline: none;
  font-size: 15px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  margin-bottom: 10px; }

.active, .accordion:hover {
  background-color: #ccc; }

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px; }

.active:after {
  content: "\2212"; }

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.2s ease-out;
  transition: max-height 0.2s ease-out;
  width: 80%; }

.accordion-inhalt {
  padding: 20px 0;
  font-family: 'Helvetica'; }

.uhr-anmerkungen {
  display: block; }

.uhr:after {
  content: ' Uhr';
  margin-right: 15px;
  font-size: 12px; }

/******************************
FAQ Accordion
******************************/
.faq-accordion {
  margin: 25px 0; }

.faq-frage {
  background-color: #fff;
  color: #444;
  border: 1px solid #000;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  outline: none;
  font-size: 15px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  margin-bottom: 10px; }

.active, .faq-frage:hover {
  background-color: #ccc; }

.faq-frage:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px; }

.active:after {
  content: "\2212"; }

.faq-panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.2s ease-out;
  transition: max-height 0.2s ease-out;
  width: 99%; }

.faq-antwort {
  padding: 10px 0 25px 0; }

li {
  list-style: none; }

a {
  color: currentColor;
  text-decoration: none; }

strong, b {
  font-weight: 600;
  font-family: 'Oswald'; }

img {
  width: 100%; }

.page {
  padding: 2vh 5vw 2vh; }

.page > * {
  max-width: var(--content-width);
  margin: 0 auto; }

.header a {
  position: relative;
  text-transform: uppercase;
  font-size: .875rem;
  letter-spacing: .05em;
  padding: .5rem 0;
  font-weight: 700; }

.header .logo {
  display: block;
  margin-bottom: 1.5rem;
  padding: .5rem 0; }

.header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.menu a {
  margin: 0 .75rem; }

.menu a[aria-current] {
  border-bottom: 2px solid #000; }

@media screen and (min-width: 40rem) {
  .header .logo {
    margin-bottom: 0; }

  .header {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }

  .menu {
    margin-right: -.75rem; } }
main {
  min-height: calc(100vh - 10rem);
  margin: 0 auto; }

.intro {
  text-align: center; }

.tags {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  font-size: .75rem;
  font-weight: 600; }

.text {
  line-height: 1.5em; }

.text p,
.text figure,
.text ul,
.text ol {
  margin-bottom: 1.5em; }

.text > *:first-child {
  margin-top: 0; }

.text a, .intro a {
  position: relative;
  white-space: nowrap;
  font-weight: 500;
  z-index: 1;
  display: inline-block;
  border-bottom: 2px solid #000; }

.text figure {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem; }

.text img {
  width: 100%; }

.footer {
  padding: 1.5rem 0;
  border-top: 2px solid #000;
  text-align: center;
  max-width: var(--content-width);
  margin: 0 auto;
  line-height: 1.5em; }

.footer a {
  display: inline;
  font-size: .875rem; }

.footer > a {
  width: 16.5rem;
  padding-top: .8rem; }

.social a {
  margin: 0 .75rem;
  padding: .5rem 1rem;
  border: 2px solid #000;
  width: 7.5rem; }

.social a:hover {
  background: #000;
  color: #fff; }