@font-face {
  font-family: 'Poppins Regular';
  src: url(../fonts/Poppins-Regular.ttf);
}

@font-face {
  font-family: 'Yuji Syuku';
  src: url(../fonts/YujiSyuku-Regular.ttf);
}

:root {
  --main-bg-color: #171A26;
  --main-color: #70FFFD;
  --accent-color: #FFE357;
}

body {
  background-color: var(--main-bg-color);
  font-family: 'Yuji Syuku';
  margin: 0rem;
}

html {
  scroll-behavior: smooth;
}

h1 {
  color: var(--main-bg-color);
  text-align: center;
  font-size: 72px;
  margin-bottom: 5rem;
}

h2 {
  color: #ffffff;
}

h3 {
  color: var(--accent-color);
}

h1,
h2,
h3 {
  text-transform: uppercase;
}

p,
span {
  color: #ffffff;
  font-family: 'Poppins Regular';
}

a {
  color: var(--accent-color);
  text-decoration: none;
  font-family: 'Poppins Regular';
  font-size: 16px;
}

a:hover {
  color: #ffe357b4;
}

li {
  color: #ffffff;
  list-style-type: none;
}

/*header*/

#flashMessageContainer {
  animation-name: messageFadeout;
  animation-delay: 0.5s;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: -30em;
  top: 5em;
  background-color: var(--accent-color);
  color: var(--main-bg-color);
  width: 20em;
  height: 5em;
  border-radius: 5px;
  z-index: 60;
}

#flashMessageContainer p {
  font-size: 14px;
  color: black;
  margin: auto;
}

@keyframes messageFadeout {
  0% {
    left: -30em;
  }

  10% {
    left: 3em;
  }

  85% {
    left: 3em;
  }

  100% {
    left: -30em;
    visibility: hidden;
  }
}

/*Navbar*/

.nav {
  filter: drop-shadow(0px 5px 25px rgba(0, 0, 0, 0.1));
  background-color: var(--main-bg-color);
  position: fixed;
  z-index: 20;
  width: 100%;
}

.nav ul {
  text-align: center;
  border-top: 0rem;
  margin: 0rem;
}

.nav li {
  display: inline-flex;
  text-align: center;
  padding-left: 3rem;
  padding-right: 3rem;
}

.nav a {
  color: #ffffff;
  text-transform: uppercase;
  padding-bottom: 2rem;
}

.nav img {
  height: 100px;
  width: auto;
  padding-top: 1rem;
  filter: drop-shadow(0px 5px 25px rgba(0, 0, 0, 0.35));
}

/*nav-Dropdown*/

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--main-bg-color);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 30;
}

.dropdown-content a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  color: var(--main-color);
}

.dropdown:hover .dropdown-content {
  display: block;
}


/* main */

.main {
  border: 3rem;
  padding-top: 9rem;
}

/*Hero-Section*/

.hero {
  background-image: url("../img/proberaum.jpg");
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: row;
  justify-content: end;
}

.hero p {
  text-align: start;
}

.heroitem {
  background-color: rgb(23, 26, 38, .5);
  border: black;
  overflow: hidden;
  position: relative;
}

.heroitem-slide {
  display: flex;
  align-items: center;
  max-width: 45rem;
  height: 45vh;
}

.heroitem-slide .item {
  /* padding: 5rem;
    padding-bottom: 9rem; */
  min-width: 35rem;
  max-width: 35rem;
  padding: 5rem;
}

.buttonPrev {
  /* color: var(--main-bg-color); */
  background-repeat: no-repeat;
  background-color: rgb(255, 227, 87, .0);
  border: none;
  padding: 10px 15px;
  display: inline-block;

}

.buttonPrev img {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  width: 60%;
  height: auto;
}

.buttonNext {
  /*background-image: url("../nextButton.png");*/
  /* color: var(--main-bg-color); */
  background-color: rgb(255, 227, 87, .0);
  background-repeat: no-repeat;
  border: none;
  padding: 10px 15px;
  display: inline-block;

}

.buttonNext img {
  width: 60%;
  height: auto;
}

#prevBtn {
  position: absolute;
  top: 50%;
  z-index: 10;
  left: 0.5%;
  font-size: 18px;
  cursor: pointer;
}

#nextBtn {
  position: absolute;
  top: 50%;
  z-index: 10;
  right: 0.5%;
  font-size: 18px;
  cursor: pointer;
}


/*Title*/

.pagetitle {
  background-color: var(--accent-color);
  width: auto;
  padding: 4rem;
}

.pagetitle p {
  color: var(--main-bg-color);
  text-align: center;
  font-size: 24px;
}


/*Inhalt*/

.content {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 10rem;
}

.content h2 {
  color: var(--main-color);
}

.textplakat {
  display: grid;
  justify-items: center;
  width: 100%;
  padding-top: 10rem;
  margin-left: 5%;
  margin-right: 5%;
}

.textplakat p {
  max-width: 40rem;
}

.poster img {
  align-items: flex-end;
  width: 36.5vw;
  height: 95vh;
  object-fit: cover;
}

.contentimg img {
  width: 44vw;
  height: 70vh;
  object-fit: cover;
}

.flexright {
  display: flex;
  flex-direction: row;
  justify-content: end;
  max-width: 100%;
}

.contenttext {
  min-width: 35vw;
  margin: 10vw;
}

/*Main Video-Style*/

.videocont {
  display: flex;
  flex-direction: column;
}

.videocont h2 {
  color: var(--main-color);
}

.videotitle {
  margin-left: 3rem;
}

.videocont video {
  background-color: rgb(0, 0, 0, 1);
  width: 100%;
  height: 720px;
}

.source {
  color: var(--accent-color);
}

/*Main Button Style*/

.contbt {
  background-color: var(--accent-color);
  width: fit-content;
  padding: 1rem;
  cursor: pointer;
}

.contbt a {
  color: var(--main-bg-color);
}

.contbt:hover {
  background-color: rgb(255, 227, 87, .90);
}

/*events*/

.content.event-content {
  padding-bottom: 3rem;
}

.eventtext {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.event-list {
  display: grid;
  row-gap: 2rem;
}

.event-list h2 {
  margin: 0;
}

.sing-event {
  display: grid;
  grid-template-columns: 3rem 1fr;
}

.sing-event span {
  text-transform: uppercase;
}

.event-date {
  max-width: 4rem;
  font-size: 20px;
}

.event-date span {
  display: block;
  line-height: 20px;
}

.event-loc {
  font-size: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/*news*/

.newstext {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: 5rem;
  margin-bottom: 15rem;
}

.newstext h2 {
  background-color: var(--accent-color);
  color: var(--main-bg-color);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.news-info {
  margin-top: 10rem;
  margin-left: 3rem;
  margin-bottom: 3rem;
}

.newsItem {
  width: 45rem;
}

.newsItem img {
  width: 45rem;
}

.newsItem video {
  width: 45rem;
}

/*Video*/

.media {
  margin-top: 1rem;
}

.videocont {
  margin-bottom: 5rem;
}

.v-meta {
  display: grid;
  grid-template-columns: 2fr 3fr;
}

.v-info {
  margin-top: 2rem;
  margin-left: 3rem;
}

.v-info p {
  margin: 0.1rem 0;
}

.v-info h2 {
  margin: 0 0 0.5rem 0;
}

.v-slider {
  margin: 2rem 2rem 0 2rem;
  width: calc(100% - 5rem);
  height: 10rem;
  display: grid;
  grid-template-columns: 2.5rem 1fr 2.5rem;
}

.v-slider-control {
  height: 10rem;
  width: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
  transition: background-color 0.4s;
  cursor: pointer;
}

.v-slider-control:hover {
  background-color: rgba(0, 0, 0, 0.15);
}

.v-slider-content {
  display: flex;
  flex-direction: row;
  overflow-x: hidden;
  max-width: 100%;
}

.v-slider-content img {
  height: 10rem;
}


/*gallary*/

.gallary-grid {
  position: relative;
}

.gallary-grid-container {
  justify-content: center;
  display: grid;
  grid-template-columns: repeat(5, auto);
  width: 100%;
  padding: 0rem;
  margin: 0rem;
}

.gallary-grid-item {
  width: 17vw;
  height: 30vh;
  padding: 1rem;
}

.gallary-grid-item img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.gallary-grid-item:hover img {
  opacity: 0.3;
}

/*Book Room*/

.date-time {
  display: flex;
  flex-direction: row;
}

.date label {
  color: #FFE357;
}

/* Planer */

.weekdays-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.weekdays-header span {
  color: #fff;
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.planer h2 {
  color: var(--main-bg-color);
}

.grid-container {
  background-color: #ffffff;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 100%;
}

.grid-item {
  color: var(--main-bg-color);
  aspect-ratio: 1/1;
  border: 1px solid var(--main-color);
  padding: 20px;
  font-size: 18px;
  text-align: end;
  overflow: auto;
}

.month h2 {
  align-items: center;
}

.month ul {
  text-align: center;
}

.month li {
  display: inline-flex;
  padding-left: 1rem;
  padding-right: 1rem;
}

/*login*/

label {
  color: var(--main-color);
  margin-bottom: 0.5rem;
}

.login-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding-top: 5rem;
  padding-bottom: 13rem;
}

.login-container h2 {
  color: var(--main-color);
}

.login-item {
  margin: 1rem;

}

.login-item label {
  display: block;
}

.login-bt {
  display: flex;
  flex-direction: row;
}

.login-item .contbt a {
  color: var(--main-bg-color);
}

.login-item a {
  color: var(--accent-color);
}

/*Table Styling*/

thead {
  color: var(--main-color);
}

tbody {
  color: #ffffff;
}

/*Type Styling*/

/*Hier spreche ich den Typen an, damit der im Design angezeigt wird
und man nicht immer an die id denken muss*/

input[type=text],
input[type=mail],
input[type=password],
input[type=email],
input[type=textarea],
input[type=datetime],
input[type=what],
input[type=datetime-local] {
  width: 20rem;
  padding: 0.5rem;
}

input[type=submit],
input[type=file] {
  background-color: var(--accent-color);
  color: var(--main-bg-color);
  font-family: 'Poppins Regular';
  font-size: 16px;
  min-width: 9rem;
  padding: 1rem;
  border: none;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: rgb(255, 227, 87, .90);
}

input[type=file]:hover {
  background-color: rgb(255, 227, 87, .90);
}

/*Overview*/

.overview {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: 5rem;
  margin-bottom: 10rem;
}

.overview th {
  padding-left: 5rem;
}

.overview td {
  padding-left: 5rem;
}

select {
  background-color: var(--accent-color);
  color: var(--main-bg-color);
  font-family: 'Poppins Regular';
  font-size: 16px;
  padding: 1rem;
  border: none;
  cursor: pointer;
}

/*Options lassen sich in Firefox nur mit System Fonts darstellen
https://bugzilla.mozilla.org/show_bug.cgi?id=1536148#c19

Auf Chromium Systemen funktioniert es anscheinend (getestet auf Vivaldi)
*/


/*Footer*/

.footer {
  width: 100%;
}

.footer a {
  color: #ffffff;
  text-transform: uppercase;
}

.footer ul {
  text-align: center;

}

.footer li {
  display: inline-flex;
  padding: 2rem;
}

.footer a:hover,
.nav a:hover {
  color: var(--main-color);
}

/*error*/

.error {
  display: flex;
  margin-bottom: 65vh;
  justify-content: center;
  margin-left: 5rem;
  margin-right: 5rem;
}

@media all and (max-width:1200px) {

  /*Main*/

  /* p {
    font-size: 12px;
  } */

  h2 {
    font-size: 18px;
  }

  h1 {
    font-size: 50px;
  }


  /*Nav Leiste*/

  .nav li {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .nav a {
    font-size: 14px;
  }

  .nav img {
    height: 80px;
  }

  /*hero-section*/

  .hero p {
    font-size: 12px;
  }

  .heroitem-slide {
    max-width: 100vw;
  }

  .heroitem-slide .item {
    min-width: 20rem;
    max-width: 20rem;
    padding: 35vw;
  }

  .buttonPrev img,
  .buttonNext img {
    width: 55%;
    height: auto;
  }

  /*pagetitle*/

  .pagetitle {
    padding: 2rem;
  }

  .pagetitle p {
    font-size: 20px;
  }

  .contentimg img {
    height: 60vh;
  }

  /*gallery 1200*/
  .gallary-grid-container {
    grid-template-columns: repeat(2, auto);
  }

  .gallary-grid-item {
    width: 40vw;
    height: 40vw;
  }

  /*Planer*/
  .grid-item {
    font-size: 12px;
    padding: 10px;
  }
}

@media all and (max-width: 767px) {

  /*body*/
  /* 
  p {
    font-size: 12px;
  } */

  h2 {
    font-size: 18px;
  }

  h1 {
    font-size: 36px;
    margin-bottom: 6rem;
  }

  .main {
    padding-top: 0rem;
  }

  /*Nav Leiste*/

  .nav {
    position: relative;
  }

  .nav li {
    display: block;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .nav img {
    height: 0px;
  }

  /*hero-section*/

  .heroitem {
    visibility: hidden;
  }

  .heroitem-slide {
    flex-direction: column;
  }

  /*pagetitle*/

  .pagetitle p {
    font-size: 18px;
  }

  /*conten*/

  .content {
    display: block;
    padding-bottom: 1rem;
  }

  .contbt {
    font-size: 12px;
    padding: 0.5;
  }

  .poster img {
    width: 100vw;
    height: 50vh;
  }

  .contentimg img {
    width: 100vw;
    height: 50vh;
  }

  .videocont video {
    height: 560px;
  }


  /*events*/

  .eventtext {
    margin-left: 1rem;
    margin-bottom: 2rem;
  }

  /*news*/

  .newstext {
    margin-top: 0rem;
  }

  .news-info {
    margin-top: 5rem;
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .newsItem {
    width: 90%;
  }

  .newsItem img {
    align-items: center;
    width: 100%;
  }

  .newsItem video {
    width: 100%;
  }

  /*gallery*/
  .gallary-grid-container {
    grid-template-columns: repeat(1, auto);
  }

  .gallary-grid-item {
    width: 80vw;
    height: 70vw;
  }

  /* room planner */

  .month h2 {
    font-size: 14px;
  }

  .month .buttonNext img,
  .month .buttonPrev img {
    max-width: 50px;
    max-height: auto;
  }

  .month .buttonNext,
  .month .buttonPrev {
    padding: 5px 10px;
  }

  .grid-item {
    text-align: center;
  }

  .grid-item div {
    display: none;
  }

  /*error*/

  .error {
    margin-bottom: 40vh;
  }


}