/* =========================
   SKW Kino-Programm Layout
   ========================= */
.skw_cinema {
  background-color: #D8D8D8;
  padding: 20px;
}
.skw_cinemaProgram {
  padding-top: 20px;
}
.skw_leftFloat {
  float: left;
}
.skw_rightFloat {
  float: right;
}
.skw_bild_text {
  float: left;
  margin-right: 30px;
  font-size: 0.8em;
}
.skw_cinemaText {
  font-size: 0.8em;
}
.skw_film_list {
  padding-bottom: 20px;
  padding-top: 20px;
}
.skw_film_list_image {
  width: 150px;
}
.skw_cinemaImageProgram {
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 215px;
  height: 215px;
  margin: 0px 10px 10px 0px;
}

/* =========================
   Responsive Kino Grid
   ========================= */
#skw_cinema {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 20px 0;
  width: 100% !important;
}

#skw_cinema .skw_cinema-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Kino-Ort */
#skw_cinema .skw_cinemaOrt {
  background-color: #b51a26;
  color: #ffffff;
  width: 100%;
  text-align: center;
  padding: 6px 10px;
  margin: 0; /* kein Abstand nach unten */
  border-radius: 0; /* keine runden Ecken */
  font-weight: bold;
}

/* Bildcontainer */
#skw_cinema .skw_cinemaImage {
  position: relative;
  width: 100%;
  padding-top: 100%; /* quadratisch */
  background-size: cover;
  background-position: center;
  border-radius: 0; /* keine runden Ecken */
  overflow: hidden;
}

#skw_cinema .skw_cinemaImage a {
  display: block;
  position: absolute;
  inset: 0;
  text-decoration: none;
}

#skw_cinema .skw_cinemaImage a:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

#skw_cinema .skw_cinemaImage span {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 0.9em;
}

/* =========================
   Responsive Breakpoints
   ========================= */

/* Tablet quer – 3 Spalten */
@media (max-width: 1199px) {
  #skw_cinema {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet hochkant – 2 Spalten */
@media (max-width: 767px) {
  #skw_cinema {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

/* Handy hochkant – 1 Spalte */
@media (max-width: 479px) {
  #skw_cinema {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* =========================
   Movie Section
   ========================= */
#skw_movie {
  height: 100%;
  display: flex;
}
.skw_movieContainer {
  padding: 0;
  height: 100%;
  font-size: 0.9em;
}
#skw_movie hr {
  padding: 10px 0;
  margin: 10px 0 0 0;
}
.skw_movieTop {
  float: left;
  border-right: 1px solid #e3e3e3;
  margin-right: 15px;
}
.skw_moviePicture {
  max-width: 200px;
  float: left;
  padding: 0 0 10px 0;
}
.skw_movieTitle {
  font-size: 1.2em;
  color: #337ab7;
  font-weight: bold;
  padding-bottom: 10px;
}
.skw_movieDesc {
  text-align: justify;
  font-size: 0.9em;
}
.skw_info {
  padding: 10px 0 0 0;
  text-align: left;
  font-size: 0.8em;
}
.skw_movieCredits {
  font-size: 0.7em;
  width: 200px;
}
.skw_movieBottom {
  margin: 20px 0 0 0;
  width: 100%;
  font-size: 1.0em;
}
.skw_movieEvents {
  margin: 20px;
}
.skw_movieLinks {
  margin: 0;
}

/* =========================
   Signup Container
   ========================= */
#skw_signupContainer h1 {
  color: #b51a26;
  margin: 0 0 10px 0;
  font-size: 1.6em;
}
.skw_signupHead {
  margin-bottom: 15px;
}
.skw_signupMoviePic img.skw_movie-pic {
  max-width: 180px;
  height: auto;
}
.skw_signupMovieInfo {
  padding: 0 0 10px 20px;
}

/* =========================
   Formular
   ========================= */
.skw_btn.skw_rot {
  background-color: #b51a26;
  color: #ffffff;
}
.skw_form-error {
  color: red;
  font-size: 0.9em;
  margin-top: 5px;
}

/* Responsiv für Handy */
@media (max-width: 768px) {
  .skw_signupMoviePic img.skw_movie-pic {
    max-width: 100%;
    margin-bottom: 15px;
  }
  .skw_signupMovieInfo {
    padding: 0;
  }
}