:root {
  --colorBG: #123526;
  /* --colorBG: white; */
  --colorText: #f0f3d9;
  --colorInput: #f6f9dd;
  --colorTextHeadline: #9ea874;
  --colorButtons: #7e7034;
  --colorWhite: white;
  --colorHeaderBG: #0d1f1a;
  --borderRadius: 5px;
  --padding: 20px;

  --greenDark: #474a2c;
  --greenMidDark: #636940;
  --greenMid: #59a96a;
  --greenMidLight: #9bdeac;
  --greenLight: #b4e7ce;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  font-size: 20px;
  scroll-behavior: smooth;
  letter-spacing: 1px;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  background-color: var(--colorBG);
}

a {
  text-decoration: none;
  color: var(--colorWhite);
}

span {
  font-weight: 800;
}

.button {
  padding: 10px 20px;
  border-radius: var(--borderRadius);
  background-color: var(--colorButtons);
  color: var(--colorText);
  cursor: pointer;
  font-size: 2em;
  transition: 0.3s all ease-in-out;
}

.button:hover {
  scale: 1.02;
}

h1 {
  color: var(--colorText);
  font-size: 5em;
  margin-bottom: 20px;
  font-weight: 600;
}

h2 {
  color: var(--colorText);
  font-size: 4em;
  margin-bottom: 20px;
  font-weight: 600;
}

h3 {
  color: var(--colorButtons);
  margin-bottom: 30px;
  font-size: 2em;
  font-weight: 500;
}

p {
  color: var(--colorText);
  margin-bottom: 20px;
}

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

.hero {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-color: var(--colorHeaderBG);
}

.hero .text {
  width: 50%;
  padding-left: 100px;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  z-index: 6;
}

.hero .text img {
  margin-bottom: 20px;
}

.hero .klaus {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  object-fit: contain;
  object-position: top;
  z-index: 5;
}

.hero .spirale {
  position: absolute;
  right: 20%;
  z-index: 4;
  bottom: 300px;
  height: 50%;
  object-fit: contain;
  opacity: 0.1;
}

.about {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 100px;
}

.about .row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.about .row:nth-child(even) {
  flex-direction: row;
}

.about .row:nth-child(even) .img-container {
  align-items: flex-end;
}

.about .row .text-abschnitt {
  width: 60%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: justify;
}

.about .row .text-abschnitt p {
  margin-bottom: 10px;
}

.about .row .img-container {
  /* width: 30%; */
  /* height: 400px; */
  /* height: 60%; */
  display: flex;
  flex-direction: column;
  width: 35%;
  justify-content: center;
  align-items: flex-start;
  aspect-ratio: 16/11;
}

.about img {
  /* width: 100%; */
  /* height: 500px; */
  /* width: 38%; */
  width: 100%;
  height: 100%;

  border-radius: var(--borderRadius);
  object-fit: cover;
  /* background-color: var(--colorHeaderBG); */
  object-position: top;
}

.about .logo {
  object-fit: contain;
}

.shows .list {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 30px;
}

.shows .list .item {
  width: 30%;
  margin: 0 50px;
}

.shows .list .item img {
  width: 100%;
  /* height: 350px; */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background-color: var(--colorHeaderBG);
  margin-bottom: 20px;
}

.events {
  background-color: var(--colorBG);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 100px;
}

.events .calendar-wrapper {
  width: 45%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.events .calendar-wrapper .calendar {
  width: 100%;
  border-radius: 10px;
  background-color: var(--colorBG);
  overflow-y: auto;
  min-height: 500px;
  max-height: 500px;
}

.events .calendar-wrapper .calendar .header {
  width: 100%;
  display: flex;
  align-items: center;
  background-color: var(--colorButtons);
  margin-bottom: 5px;
}
.events .calendar-wrapper .calendar .header p {
  margin-bottom: 0;
}

.events .calendar-wrapper .calendar .header .date {
  width: 250px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.events .calendar-wrapper .calendar .header .info {
  width: calc(100% - 250px);
  padding: 10px;
}

.events .calendar-wrapper .calendar .item {
  width: 100%;
  height: 100px;
  background-color: var(--colorText);
  display: flex;
  margin-bottom: 5px;
}

.events .calendar .item .date {
  width: 250px;
  background-color: var(--colorButtons);
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.events .calendar .item .date .date-text {
  font-size: 2rem;
  margin-bottom: 0;
}
.events .calendar .item .date .time-text {
  margin-bottom: 0;
}
.events .calendar .item .info {
  width: calc(100% - 250px);
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.events .calendar .item .info .name-text {
  margin-bottom: 0;
  font-weight: bold;
  color: black;
}
.events .calendar .item .info .location-text {
  margin-bottom: 0;
  color: black;
}

.events .booking {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.newsletter {
  width: 100%;
  padding: 100px;
  padding-bottom: 100px;

  padding-top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--colorBG);
}

.newsletter-panel {
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 20px;
  overflow: hidden;
  max-width: 1500px;
  background-color: var(--colorHeaderBG);
}
.newsletter-panel .left {
  width: 60%;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.newsletter-panel h3 {
  font-size: 12px;
  padding: 10px 20px;
  color: var(--colorText);
  background-color: var(--colorButtons);
  border-radius: 10px;
  width: 40%;
}
.newsletter-panel h2 {
  font-size: 2em;
}

.newsletter-panel .input {
  width: 100%;
  height: 50px;
  border-radius: 10px;
  background-color: var(--colorText);
  margin-bottom: 10px;
  padding: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.newsletter-panel .input input {
  background-color: transparent;
  padding: 10px;
  border-radius: 10px;
  width: calc(100% - 170px);
  border: none;
}

.newsletter-panel .input input[type="submit"] {
  width: 150px;
  border-radius: 10px;
  color: var(--colorText);
  background-color: var(--colorButtons);
  height: 100%;
  border: none;
  cursor: pointer;
  font-size: 20px;
}

.newsletter-panel .row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20px;
}

.newsletter-panel .row input[type="checkbox"] {
  /* ...existing styles */
  appearance: none;
  background-color: #fff;
  margin: 0;
  font: inherit;
  color: var(--colorBG);
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid var(--colorHeaderBG);
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  display: grid;
  margin-right: 20px;
  place-content: center;
}

.newsletter-panel .row input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--colorBG);
}

.newsletter-panel .row input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.newsletter-panel .row p {
  margin-bottom: 0;
}

.newsletter-panel .right {
  width: 30%;
  height: 100%;
}

.newsletter-panel .right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery .list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.gallery .list .video-wrapper {
  width: 45%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery .list .video-wrapper .video {
  width: 100%;
  border-radius: 10px;
  background-color: var(--colorHeaderBG);
  height: 500px;
}

.gallery .list .video-wrapper .video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  aspect-ratio: unset;
}

.gallery .list .image-list {
  width: 45%;
  height: 500px;
  display: grid;
  grid-template-columns: calc(50% - 10px) calc(50% - 10px);
  grid-template-rows: calc(50% - 10px) calc(50% - 10px);
  column-gap: 20px;
  row-gap: 20px;
}

.gallery .list .image-list .img {
  background-color: var(--colorHeaderBG);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: 0.3s all ease-in-out;
}

.gallery .list .image-list .img:hover {
  scale: 1.03;
}

.gallery .list .image-list .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact .form {
  width: 80%;
  padding: 20px;
  border-radius: 20px;
  background-color: var(--colorHeaderBG);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.contact .form .buttons {
  width: 35%;
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-right: 2px solid var(--colorText);
}

.contact .form .buttons .item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}

.contact .form .buttons .item i {
  font-size: 2rem;
  color: var(--colorText);
  margin-bottom: 10px;
}

.contact .form .buttons .item .headline {
  margin-bottom: 0;
  font-weight: bold;
  /* color: var(--colorBG); */
}

.contact .form .buttons .item .info {
  margin-bottom: 0;
  /* color: var(--colorBG); */
}

.contact .form .input-list {
  width: 60%;
  height: 100%;
}

.contact .form .input {
  width: 100%;

  margin-bottom: 20px;
}

.contact .form .input input {
  background-color: var(--colorText);
  width: 100%;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  height: 60px;
}

.contact .form .input textarea {
  background-color: var(--colorText);
  width: 100%;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  height: 200px;
  min-height: 200px;
  max-height: 200px;
}

.contact .form label {
  color: var(--colorText);
  margin-bottom: 10px;
}

.contact .form input[type="check"] {
  margin-bottom: 10px;
}

.contact .button-list {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-direction: row;
}

.contact .button-list .contact-button {
  width: 90px;
  height: 90px;
  aspect-ratio: 1/1;
  border-radius: 100%;
  cursor: pointer;
  background-color: var(--colorButtons);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px;
  transition: 0.3s all ease-in-out;
}

.contact .button-list .contact-button i {
  color: var(--colorText);
  font-size: 50px;
}

.contact .button-list .contact-button:hover {
  scale: 1.04;
}