/* reset some initial settings */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  display: block;
  font-style: italic;
}

/*basic styles*/
body {
  background: #aaf195;
  min-height: 100svh;
  text-rendering: optimizeSpeed;
  cursor: default;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

/*root variables colors etc */

:root {
  --boxcolor--1: #8633d4;
  --boxcolor--2: #270053;
  --boxcolor--3: #eb6567;
  --boxcolor--4: #fee591;
  --boxcolor--5: #49adbd;
  --boxcolor--6: #7676e0;
  --boxcolor--7: rgb(39, 0, 83);
  --accentcolor--1: #0066cc;
  --accentcolor--2: #0099cc;
  --accentcolor--romantic: #e64f81;
  --boxshadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  --kindofwhite: #fffafa;
  --buttonfill: #fffafa;
  --kindofblack: #333333;
  --main--width--large: clamp(600px, 80vw, 850px);
  --main--font: lacher, Arial, Helvetica, sans-serif;
  --rolle--width--small: 40%;
  --rolle--width--large: 30%;
}

/* utility classes */
.padding--bottom--small {
  padding-bottom: 10px;
}

.padding--bottom--medium {
  padding-bottom: 15px;
}

.padding--bottom--large {
  padding-bottom: 20px;
}

.padding--top--small {
  padding-top: 10px;
}

.padding--top--medium {
  padding-top: 15px;
}

.padding--top--large {
  padding-top: 20px;
}

.text--black {
  color: var(--kindofblack);
  font-weight: normal;
}

.text--white {
  color: var(--kindofwhite);
  font-weight: 100;
}

.text--red {
  color: var(--accentcolor--romantic);
  font-weight: 100;
}

.text--small {
  font-size: 11px;
  hyphens: auto;
}

.text--medium {
  font-size: 13px;
  hyphens: auto;
}

.text--large {
  font-size: 15px;
  hyphens: auto;
}

.text--left {
  text-align: left;
}

.text--block {
  text-align: justify;
  text-align-last: none;
  hyphens: auto;
}

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

.text--focus {
  font-size: 15px;
}

.text--bold {
  font-weight: bold;
}

.text--bg--1 {
  background-color: var(--boxcolor--5);
  padding: 5px;
}

.text--bg--2 {
  background-color: var(--boxcolor--6);
  padding: 5px;
}

.no-hover {
  pointer-events: none;
}

.hidden {
  display: none !important;
}

/*---------------------POPUP COOKIES START-------------------------*/
#hinweiscontainer {
  position: fixed; /* Sit on top of the page content */
  display: block; /* visible by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 8%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4); /* Black background with opacity */
  z-index: 7; /* Specify a stack order in case you're using a different order for other elements */
  /* Add a pointer on hover */
}

#hinweis {
  margin: 0px auto;
  width: 80%;
  height: auto;
  background-color: #fbef69;
}

#hinweis .hinweisHeadline {
  font-family: acumin-pro-condensed, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  text-align: center;
  color: #1f1f1f;
}

#hinweis .hinweistext {
  font-family: freight-sans-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  text-align: center;
  margin: 0px 10px 0px 10px;
  color: #000000;
  cursor: help;
}

#hinweis a {
  color: #a30002;
  text-decoration: none;
}

.hinweisbutton button {
  background-color: #ffffff;
  margin: 5px auto;
  width: 60%;
  border: none;
  cursor: pointer;
  display: inline;
}

.hinweisbutton button:hover {
  background-color: #eeeeee;
}

/*styles*/

@font-face {
  font-family: lemon;
  src: url("../fonts/lemon.otf");
}

@font-face {
  font-family: lacher;
  src: url("../fonts/corbel.ttf");
}

.headline1 {
  font-family: lemon;
  font-size: 30px;
}

.headline2 {
  font-family: lemon;
  font-size: 25px;
}

.headline3 {
  font-family: lemon;
  font-size: 20px;
}

.titel_stueck {
  font-family: din-2014, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 30px;
}

.basic {
  font-family: var(--main--font);
  line-height: 15px;
}

/* Mobile first gridwrapper, for larger screens in MEDIA QUERY at the bottom of css-file */

.grid--wrapper {
  display: grid;
  place-content: center;
  gap: 10px;
  grid-auto-columns: 1fr;
  grid-template-areas:
    "news"
    "about"
    "goal"
    "slider"
    "aboutpic"
    "play"
    "staff"
    "schedule"
    "press"
    "social"
    "linktree";
  width: 80%;
  margin: 0 auto;
}

/* Mobile first header definition, for larger screens in MEDIA QUERY at the bottom of css-file*/

#box--header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: rgba(255, 255, 255, 0.7) url("../img/lb_header.png") no-repeat
    center;
  background-size: contain;
  width: 80%;
  height: clamp(200px, 35vh, 400px);
  margin: 10px auto;
  padding: 15px;
}

#box--header img {
  max-width: 100%;
}

/*darkmode toggle selbst gemacht */

.darkmodetoggle {
  position: absolute;
  top: 10px;
  right: 10px;
}

.toggleButton {
  width: 50px;
  height: 50px;
}

.sun {
  border: solid 2px #f9b233;
  padding: 5px;
  border-radius: 50%;
  background: var(--kindofwhite) url(../img/toggleSun.png) no-repeat;
  background-size: 80%;
  opacity: 1;
  background-position: center;
}

.moon {
  border: solid 2px #faddaa;
  padding: 5px;
  border-radius: 50%;
  background: #0f0941 url(../img/toggleMoon.png) no-repeat;
  background-size: 80%;
  opacity: 1;
  background-position: center;
}

/*darkmode switch tutorial */

/* button form */
label {
  width: 80px;
  height: 40px;
  position: absolute;
  top: 10px;
  right: 10px;
  display: block;
  background: #ebebeb;
  border-radius: 200px;
  box-shadow: inset 0px 1px 10px rgba(0, 0, 0, 0.2),
    inset 0px -1px 10px rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: 300ms;
}

/* kreis innerhalb der button form */
label:after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 32px;
  height: 32px;
  background: linear-gradient(180deg, #ffcc89, #d8860b);
  border-radius: 16px;
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
  transition: 300ms;
}

/* hide checkbox */
input {
  width: 0;
  height: 0;
  visibility: hidden;
}

/* was passiert, wenn checkbox checked */
input:checked + label {
  background: #242424;
}

input:checked + label:after {
  left: 76px;
  transform: translateX(-100%);
  background: linear-gradient(180deg, #777, #3a3a3a);
}

/* stretch-effect when actibe */
label:active:after {
  width: 45px;
}

/* sun and moon symbols svg */
label svg {
  position: absolute;
  top: 4px;
  width: 32px;
  height: 32px;
  z-index: 5;
}

label svg.sonne {
  left: 4px;
  stroke: #fff;
  transition: 1000ms;
}

label svg.mond {
  left: 44px;
  stroke: #7e7e7e;
  transition: 2000ms;
}

/* change color of icon on checked */
input:checked + label svg.sonne {
  stroke: #7e7e7e;
  transition: 2000ms;
}

input:checked + label svg.mond {
  stroke: #fcda6d;
  transition: 2000ms;
}

/* mobile first navibar with burger-menu, for larger screens in MEDIA QUERY at the bottom of css-file  */

#box--navbar {
  position: sticky;
  top: 10px;
  width: 80%;
  height: 30px;
  background-color: transparent;
  margin: 10px auto;
  background-color: var(--accentcolor--1);
  z-index: 1000;
}

#box--navbar ul {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: -moz-fit-content;
  width: fit-content;
  background-color: #0066cc;
  color: var(--kindofwhite);
  font-family: lemon;
  font-size: 25px;
  line-height: 40px;
  list-style: none;
  padding: 10px;
  transform: translateX(-200%);
  transition: transform 0.5s ease-in-out;
}

#box--navbar ul[data-visible="true"] {
  transform: none;
}

#box--navbar a {
  text-decoration: none;
  color: var(--kindofwhite);
}

#mobile-nav-toggle {
  background-color: transparent;
  border: none;
}

.burgerbutton {
  background: transparent;
  cursor: pointer;
}

.burgerline {
  transition: transform 200ms ease-in 200ms, rotate 200ms ease-in,
    opacity 0ms 200ms;
  transform-origin: center;
}

.burgerbutton[data-visible="true"] .burgerline {
  transition: transform 200ms ease-in, rotate 200ms ease-in 200ms,
    opacity 0ms 200ms;
}

/* .burgerbutton[data-visible="true"] :is(.top, .bottom) {
    y: 45;
} */

.burgerbutton[data-visible="true"] .top {
  transform: translateY(20px);
  rotate: 45deg;
}

.burgerbutton[data-visible="true"] .middle {
  opacity: 0;
}

.burgerbutton[data-visible="true"] .bottom {
  transform: translateY(-20px);
  rotate: -45deg;
}

/* article-definitions (seperate elements without connection to each other) */
article {
  padding: 15px;
  font-family: Arial, Helvetica, sans-serif;
}

article img {
  max-width: 100%;
  font-style: italic;
}

/*some grid-boxes*/

.box--outofall {
  grid-area: outofall;
  display: grid;
  align-items: center;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: auto;
  background-color: var(--boxcolor--3);
  box-shadow: var(--boxshadow);
}

.box--outofall--svg {
  grid-column: span 1;
  width: 100%;
  height: 100%;
  z-index: 1;
  stroke: #fff;
  stroke-width: 1px;
  order: 2;
}

.box--outofall--content {
  grid-column: span 4;
  order: 1;
}

/* box impressum */

#box--impressum {
  width: 800px;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 10px auto;
  padding: 15px;
  border: none;
}

#box--impressum a {
  color: #1f00cc;
}

/* box news */
.box--news {
  grid-area: news;
  display: grid;
  align-items: center;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: auto;
  background-color: var(--boxcolor--1);
  box-shadow: var(--boxshadow);
}

.box--news--pic {
  position: relative;
  grid-column: span 1;
  width: 80%;
  rotate: -20deg;
  padding: 2%;
  z-index: 1;
}

.box--news--content {
  grid-column: span 4;
}

/* box about */
.box--about {
  grid-area: about;
  background-color: rgb(39, 0, 83);
  color: var(--kindofwhite);
  box-shadow: var(--boxshadow);
}

.box--about--pic {
  grid-area: aboutpic;
  background-color: rgb(199, 211, 248);
  box-shadow: var(--boxshadow);
  padding: 0;
  height: 10svh;
  background: url("../img/bg_blume.png") repeat;
  /* background-size: cover; */
}

/* boxes play */

.box--play--logo {
  grid-area: playlogo;
  box-shadow: var(--boxshadow);
  background: url("../img/aphrodite.png") no-repeat;
}

.box--play {
  grid-area: play;
  background-color: var(--boxcolor--4);
  box-shadow: var(--boxshadow);
}

.box--play--pic {
  display: none;
  grid-area: playpic;
  background-color: rgb(199, 211, 248);
  background: url("../img/bg_dots_pink.png") repeat;
  box-shadow: var(--boxshadow);
}

/* starring-galery */
.box--staff--container {
  grid-area: staff;
  background-color: var(--boxcolor--2);
  color: var(--kindofwhite);
  box-shadow: var(--boxshadow);
}

.starring--headline {
  grid-area: starringheadline;
  text-align: center;
  width: 100%;
}

.box--rollen {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.rolle {
  /*seperate definition in mediaquery*/
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 40%;
}

.rolle--image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: opacity 500ms ease;
  object-position: center;
}

.rolle--change {
  opacity: 0;
  transition: opacity 500ms ease;
}

.rolle:nth-of-type(1) {
  grid-area: rolle1;
  background: green url("../img/rollen/rudolfbg.png");
  background-size: cover;
  background-position: center;
}

.rolle:nth-of-type(2) {
  grid-area: rolle2;
  background: rgb(226, 126, 126) url("../img/rollen/katibg.png");
  background-size: cover;
  background-position: center;
}

.rolle:nth-of-type(3) {
  grid-area: rolle3;
  background: pink url("../img/rollen/gertrudbg.png");
  background-size: cover;
  background-position: center;
}

.rolle:nth-of-type(4) {
  grid-area: rolle4;
  background: purple url("../img/rollen/wischbg.png");
  background-size: cover;
}

.rolle:nth-of-type(5) {
  grid-area: rolle5;
  background: yellow url("../img/rollen/gesinebg.png");
  background-size: cover;
}

.rolle:nth-of-type(6) {
  grid-area: rolle6;
  background: blue url("../img/rollen/lieselottebg.png");
  background-size: cover;
}

.rolle:nth-of-type(7) {
  grid-area: rolle7;
  background: yellowgreen url("../img/rollen/radlerbg.png");
  background-size: cover;
}

.rolle:nth-of-type(8) {
  grid-area: rolle8;
  background: lightgoldenrodyellow url("../img/rollen/claudettebg.png");
  background-size: cover;
}

.rolle:nth-of-type(9) {
  grid-area: rolle9;
  background: darkgoldenrod url("../img/rollen/ilsebg.png");
  background-size: cover;
}

.rolle:nth-of-type(10) {
  grid-area: rolle10;
  background: lightseagreen;
  background-size: cover;
}

.rolle:nth-of-type(11) {
  grid-area: rolle11;
  background: limegreen;
  background-size: cover;
}

.rolle:nth-of-type(12) {
  grid-area: rolle12;
  background: deeppink;
  background-size: cover;
}

/* box schedule */
.box--schedule {
  grid-area: schedule;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--boxcolor--1);
  color: var(--kindofwhite);
  box-shadow: var(--boxshadow);
}

.box--schedule--pic {
  display: none;
  grid-area: schedulepic;
  background-color: var(--boxcolor--1);
  color: var(--kindofwhite);
}

.box--schedule table {
  width: 100%;
  align-self: center;
  font-family: var(--main--font);
  text-align: left;
  line-height: 15px;
  border-collapse: collapse;
}

.box--schedule th {
  font-family: lemon;
  font-weight: 100;
  text-align: left;
}

.box--schedule td {
  vertical-align: top;
  padding: 5px;
}

.box--schedule tr:hover {
  background-color: #49adbd;
}

/* box goal */
.box--goal {
  grid-area: goal;
  background-color: var(--boxcolor--3);
  box-shadow: var(--boxshadow);
}

.box--goal--pic {
  display: none;
  grid-area: goalpic;
  background-color: rgb(199, 211, 248);
  box-shadow: var(--boxshadow);
}

/* image-slider for whatever place */

.box--slider {
  grid-area: slider;
  position: relative;
  box-shadow: var(--boxshadow);
  height: 300px;
}

.slider--track-container {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.slider--track {
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
  transition: transform 0.7s ease-in-out;
}

.slider--slide {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-images {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.slider--button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  padding: 5px;
  border: none;
  border-radius: 50%;
  background-color: #ffffffbb;
  backdrop-filter: blur(2px);
  font-family: var(--main--font);
  font-size: 20px;
  cursor: pointer;
}

.slider--button-left {
  left: 3%;
  z-index: 5;
}

.slider--button-right {
  right: 3%;
}

.slider--nav {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  background-color: #ffffff55;
  backdrop-filter: blur(2px);
}

.slider--indicator {
  background-color: #33333366;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.slider--indicator.current-slide {
  background-color: #333333;
}

/* SLIDER ENDE */

.box--goal a {
  color: var(--kindofblack);
  text-decoration: none;
  cursor: pointer;
}

/* box press */
.box--press {
  grid-area: press;
  background-color: var(--boxcolor--5);
  box-shadow: var(--boxshadow);
}

/* box social */
.box--social {
  grid-area: social;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background-color: var(--boxcolor--6);
  box-shadow: var(--boxshadow);
}

.box--social img {
  width: 64px;
}

/* box linktree */
.box--linktree {
  grid-area: linktree;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
  height: 30px;
  margin-bottom: 10px;
  background-color: var(--kindofblack);
  color: var(--kindofwhite);
}

/*Termine als Böxli */

.termine_wrapper {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: none;
  padding: 1.1rem;
  border: solid var(--kindofwhite) 2px;
  font-family: var(--main--font);
  text-align: center;
  margin-bottom: 2rem;
}

.termine_datum {
  font-size: 1.3rem;
  font-weight: bold;
}

.termine_spielort {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.termine_zeiten {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.termine_vvk {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.termine_preis {
  font-size: 1.3rem;
  font-weight: bold;
}

.barzahlung {
  font-size: 1.1rem;
  font-weight: bold;
}

/* MEDIA QUERY FOR LARGER SCREENS */
@media screen and (width > 700px) {
  .text--small {
    font-size: 13px;
  }

  .text--medium {
    font-size: 15px;
  }

  .text--large {
    font-size: 17px;
  }

  .text--focus {
    font-size: 17px;
  }

  .grid--wrapper {
    display: grid;
    gap: 15px;
    grid-auto-columns: 1fr;
    grid-template-areas:
      "news news news news news"
      "about about about aboutpic aboutpic"
      "slider slider goal goal goal"
      "play play play playpic playpic"
      "staff staff staff staff staff"
      "schedulepic schedule schedule schedule schedule"
      "press press press press social"
      "linktree linktree linktree linktree linktree";
    width: var(--main--width--large);
    margin: 0 auto;
  }

  #box--header {
    width: var(--main--width--large);
    background-size: contain;
    height: clamp(300px, 40vh, 450px);
  }

  #box--navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--main--width--large);
    margin: 15px auto;
    background-color: var(--accentcolor--1);
    position: sticky;
    top: 10px;
  }

  #box--navbar ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    background-color: var(--accentcolor--1);
    color: var(--kindofwhite);
    font-family: lemon;
    font-size: 25px;
    line-height: normal;
    list-style: none;
    padding: 0 10px;
    transform: none;
  }

  #box--navbar a {
    color: var(--kindofwhite);
    text-decoration: none;
    text-align: center;
    transition: background-color 0.5s linear;
    padding: 0 10px;
  }

  #box--navbar a:hover {
    background-color: var(--accentcolor--2);
  }

  #mobile-nav-toggle {
    display: none;
  }

  .box--gallery {
    display: block;
  }

  .box--about--pic {
    grid-area: aboutpic;
    background-color: rgb(199, 211, 248);
    box-shadow: var(--boxshadow);
    padding: 0;
    height: auto;
    background: url("../img/bg_blume.png") repeat;
    background-position: center;
  }

  .box--play--pic {
    display: block;
    grid-area: playpic;
    background-color: rgb(199, 211, 248);
    box-shadow: var(--boxshadow);
    padding: 0;
    background: url("../img/WEB_Schaffner.png");
    background-position: center;
  }

  .box--schedule--pic {
    display: block;
    grid-area: schedulepic;
    background-color: var(--boxcolor--first);
    background: url("../img/bg_blumen_yellow.png") repeat;
    box-shadow: var(--boxshadow);
  }

  .box--goal--pic {
    display: block;
    grid-area: goalpic;
    background-color: rgb(199, 211, 248);
    background-image: url("../img/4.jpg");
    background-size: cover;
    box-shadow: var(--boxshadow);
  }

  .box--social {
    grid-area: social;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background-color: var(--boxcolor--6);
  }

  .box--social img {
    width: 100%;
  }

  .box--gallery {
    grid-area: gallery;
    background-color: var(--boxcolor--2);
    color: var(--kindofwhite);
  }

  .rolle {
    width: 30%;
  }

  .box--slider {
    grid-area: slider;
    position: relative;
    box-shadow: var(--boxshadow);
    height: 100%;
  }
}