html {
  font-size: 16px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #ECE6DF;
  position: relative;
  font-family: "Inter", sans-serif;
}

/* Header-Bereich */

.main-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 5.625rem;
  padding: 0 6.25%;
  background-color: rgba(46, 46, 46, 0.9);
}

.color-palette {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0;
}

.color-box {
  width: 20px;
  height: 36px;
  border-radius: 0;
}

.green { background-color: #495C45; }
.blue { background-color: #6E9B94; }
.yellow { background-color: #E2C45C; }
.orange { background-color: #D28940; }
.red { background-color: #A64838; }


.home-button {
  padding: 0.5rem 1rem;
  background-color: #D9D9D9;
  border: 2px solid black;
  border-radius: 0.75rem;
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 1.5625rem;
  cursor: pointer;
  transition: background-color 0.2s;
  z-index: 1000;
}

.home-button:hover {
  background-color: #c5c5c5;
}

/* Abschnitt Überschriften */

.title {
  color: #2E2E2E;
  font-size: 1.5625rem;
  font-weight: 700;
  margin-left: 6.25%;
  margin-top: 2.8125rem;
}

.subtitle {
  color: #2E2E2E;
  font-size: 1.25rem;
  font-weight: 700;
  margin-left: 6.25%;
  margin-top: 2.5rem;
}

/* Abschnitt Genre Auswahl */

.genre-buttons {
  display: flex;
  gap: 1.25rem;
  margin-left: 6.25%;
  margin-top: 3.75rem;
}

.genre {
  padding: 1rem 1.875rem;
  font-size: 1.875rem;
  font-weight: 700;
  color: white;
  border: none;
  box-shadow: 0 4px 4px rgba(0,0,0,0.25);
  cursor: pointer;
}

.drama { background-color: #495C45; }
.action { background-color: #6E9D96; }
.comedy { background-color: #E2C45C; }
.scifi { background-color: #D28940; }
.doku { background-color: #A64838; }

.genre.selected {
  filter: brightness(1.2);
  box-shadow: 0 0 0 3px black, 0 4px 4px rgba(0,0,0,0.25);
  color: #2E2E2E;
}

/* Abschnitt Slider */

.centered-year-label {
  color: #2E2E2E;
  font-size: 0.75rem;
  font-weight: 700;
  width: 100%;
  margin-left: 24.3%;
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
}

.slider-section {
  position: relative;
  width: 90%;
  max-width: 900px;
  margin-left: 5.55%;
  margin-top: 3.4375rem;
  text-align: center;
}

.year-labels {
  margin-bottom: 0.625rem;
  padding: 0;
}

.year-labels span {
  color: #000;
  font-size: 2.5rem;
  font-weight: bold;
}

.slider-container {
  position: relative;
  height: 3rem;
}

/* Slider Hintergrundspur */

.track {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 871px;
  height: 25px;
  background-color: #FDBABA;
  border-radius: 15px;
  transform: translateY(-50%);
  z-index: 1;
  transition: background-color 0.3s ease;
}

/* Slider Styling */

input[type="range"] {
  appearance: none;             
  -webkit-appearance: none;     
  -moz-appearance: none;
  width: 100%;
  height: 3rem;
  position: absolute;
  top: 0;
  left: 15px;
  background: transparent;
  z-index: 3;
}

/* Slider Button */

input[type="range"]::-webkit-slider-thumb {
  appearance: none;              
  -webkit-appearance: none;     
  -moz-appearance: none;
  width: 3rem;
  height: 3rem;
  background: #EE6161;
  border-radius: 50%;
  box-shadow: 0px 4px 4px 2px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  position: relative;
  z-index: 5;
}

/* Zahlanzeige über Slider */

.thumb-label {
  position: absolute;
  top: -2.5rem;
  background: transparent;
  font-weight: 700;
  font-size: 1.25rem;
  color: black;
}

/* Abschnitt Dropdown */

.dropdown {
  width: 190px;
  position: relative;
  margin-left: 5.55%;
  margin-top: 3.125rem;
}

.dropdown-toggle {
  color: #2E2E2E;
  font-size: 1rem;
  font-weight: 700;
  height: 3.125rem;
  background-color: white;
  border-radius: 25px;
  outline: 2px solid black;
  padding: 1rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Pfeil im Dropdown */

.dropdown-arrow {
  width: 12px;
  height: 12px;
  background-color: #2E2E2E;
  clip-path: polygon(100% 0%, 50% 100%, 0% 0%);
  transition: transform 0.3s ease;
}

.dropdown.open .dropdown-arrow {
  transform: rotate(180deg);
}

/* Abschnitt Dropdown Menu */

.dropdown-menu {
  position: absolute;
  top: 60px;
  width: 100%;
  background-color: white;
  border: 2px solid black;
  border-radius: 25px;
  z-index: 5;
  display: none;
  flex-direction: column;
}

.dropdown-menu div.selected {
  background-color: rgba(8, 157, 40, 0.19);
  border-radius: 25px;
}

.dropdown.open .dropdown-menu {
  display: flex;
}

.dropdown-menu div {
  color: #2E2E2E;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  line-height: 1.1;
}

.dropdown-menu div:hover {
  border-radius: 25px;
  background-color: rgba(8, 157, 40, 0.19);
}

/* Abschnitt Bild Filmstreifen */
 
.filmstrip {
  position: fixed;
  top: 1247px;
  bottom: 1247px;
  right: 20px;
  height: 50vh;
  width: auto;
  z-index: -999;
  transform: rotate(90deg);
  transform-origin: top right;
  opacity: 0.4;
}

/* Abschnitt Filmkarten */

#movies {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6.25%;
}

.movies {
  display: flex;
  justify-content: center;
  gap: 5rem;
  flex-wrap: wrap;
}

.movie {
  width: 200px;
  perspective: 1000px;
}

.movie-inner {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s;
  cursor: pointer;
}

.movie.flipped .movie-inner {
  transform: rotateY(180deg);
}

/* Vorder- und Rückseite der Filmkarte */

.movie-front, .movie-back {
  position: absolute;
  width: 100%;
  height: 400px;
  backface-visibility: hidden;
  border-radius: 8px;
  overflow: hidden;
  background-color: #e0e0e0;
}

.movie-front img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.movie-title {
  font-weight: bold;
  margin-top: 0.5rem;
  text-align: center;
}

.rating {
  font-size: 1rem;
  color: #333;
  margin-left: 5%;
}

.desc {
  text-decoration: none;
  color: black;
  font-size: 0.9rem;
  text-align: center;
}

.movie-back {
  transform: rotateY(180deg);
  border-radius: 8px;
  overflow-y: auto;
}

.movie-back h3 {
  margin-top: 10px;
  text-align: center;
}

.movie-back p {
  margin-left: 5px;
}

.movie-back::-webkit-scrollbar {
  width: 5px;
}

.movie-back::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 5px;
}

/* Such-und Shuffle-Buttons */

.genretext {
  color: #2E2E2E;
  font-size: 1.5625rem;
  font-weight: 700;
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.shuffle-btn {
  width: 190px;
  margin-left: 5.55%;
  margin-top: 1rem;
  line-height: 1.1;
  padding: 15px;
  font-size: 1rem;
  border: 2px solid #000;
  border-radius: 25px;
  cursor: pointer;
  background-color: white;
  font-weight: 700;
}

.shuffle-btn2 {
  width: 190px;
  margin-left: 78%;
  margin-top: 0rem;
  padding: 15px;
  line-height: 1.1;
  font-size: 1rem;
  font-weight: 700;
  border: 2px solid #000;
  border-radius: 25px;
  cursor: pointer;
  background-color: white;
  display: none;
  z-index: 1000;
}

/* Responsive Design: Smartphones */

@media (max-width: 600px) {
  .genre-buttons {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .genre {
    width: 90%;
    font-size: 22px;
    padding: 12px;
  }

  .slider-container {
    width: 100%;
    margin: 0 auto;
  }

  .dropdown {
    width: 90%;
    margin: 0 auto;
  }

  .movie {
    height: auto;
    width: 90%;
    margin: 10px auto;
  }

  .movies-container {
    flex-direction: column;
    align-items: center;
  }
}


/* Smartphones (Portrait, max. 600px) */
@media (max-width: 600px) {
  .main-header {
    flex-direction: column;
    align-items: center;
    height: auto;
    padding: 1rem;
  }

  .color-palette {
    margin-bottom: 0.5rem;
  }

  .home-button {
    margin: 1rem 0;
  }

  .title,
  .subtitle {
    margin-left: 1rem;
    margin-right: 1rem;
    text-align: center;
    font-size: 1.2rem;
  }

  .genre-buttons {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-left: 0;
    margin-top: 2rem;
  }

  .genre {
    width: 80%;
    font-size: 1.2rem;
    padding: 12px;
  }

  .centered-year-label {
    font-size: 1rem;
    margin-left: 0;
    text-align: center;
  }

  .slider-section {
    width: 95%;
    margin: 2rem auto;
  }

  .track {
    width: 100% !important;
    left: 0;
  }

  .dropdown,
  .shuffle-btn {
    width: 90%;
    margin: 1rem auto;
    display: block;
  }

  .shuffle-btn2 {
    width: 90%;
    margin: 2rem auto 1rem auto;
    display: none;
    text-align: center;
  }

  .movies {
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    width: 100%; 
    gap: 2rem;
  }

  .movie {
    width: 90%;
    max-width: 300px; 
    height: 400px; 
    perspective: 1000px;
    margin-bottom: 0; 
    position: relative;
  }

  .filmstrip {
    display: none;
  }
}