/* @package warschauer */

html {
}

body {
  padding: 0;
  margin: 0;
  /* background: #222; */
  color: black;
  font-family: 'Sofia Pro', sans-serif;
  font-size: 14px;
}


/* MAIN & DEFAULT */

a {
  color: black;
  text-decoration: none;
  position: relative;
}

button {
  background: unset;
  border: unset;
  cursor: pointer;
}

#main_wrap {
  display: grid;
  grid-template: 80px auto / 162px 1fr 100px;
  width: 100vw;
  /* min-height: 100vh; */
}


#alle_Leute {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  grid-row: 1/4;
  grid-column: 1/3
}

#alle_Contente {
  display: none;
  grid-row: 2;
  grid-column: 2;
  position: relative;
}

/* HEADER */

#header #logo {
  height: 65px;
  width: 75px;
  background: url(../img/fernseher.jpg) center / contain no-repeat;
}

#header_title {
  grid-row: 1;
  grid-column: 2;
  margin-top: 24px;
}

/* MENU */

#menu {
  grid-row: 2;

}

#menu ul {
  list-style: none;
  margin: 12px;
  padding: 0;
}
#menu ul li a {
  color: black;
  text-decoration: none;
  position: relative;
  margin: 3px;
  display: inline-block;
}

#menu ul li:first-of-type a {
  margin-bottom: 42px;
}

.sprach_link.active::after {
  content: "\2714";
  margin-left: 5px;
}

/* GALLERY */

.item_button {
  background: unset;
  border: unset;
  display: grid;
  grid-template: 1fr / min-content 1fr;
  max-width: 240px;
  max-height: 300px;
  margin: 12px;
  margin-bottom: 42px;
}
.item_button img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.button_name {
  /* writing-mode: sideways-lr; */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: left;
  font-size: 16px;
  width: 38px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin-right: 6px;
  margin-top: 1px;
}

.item_default_pic {
  background: url(../img/schwan_gruen.jpeg) top / contain no-repeat;
  width: 150px;
  height: 100%;
}

.item_button:nth-of-type(2n+1) .item_default_pic{
  background: url(../img/schwan_weiss.jpeg) top / contain no-repeat;
}

.item_sprachen {
  display: inline-block;
  text-transform: uppercase;
  margin-top: 12px;
  font-size: 12px;
  /*! display: flex; */
  /*! flex-wrap: nowrap; */
  white-space: nowrap;
}

.item_sprachen > span::after {
  content: " / ";
}

.item_sprachen > span:last-of-type::after {
  content: "";
}


/* CONTENT */

#alle_Contente .schliessen {
  font-size: 42px;
  padding: 0;
  margin: 12px 0;
}


.item_content {
  display: none;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: min-content auto;
}
.item_content h2 {
  /* grid-column */
}

.item_content p {
  grid-column: span 2;
}


/* AUDIO CONTROLS */

.audio_kontrolle {
  position: relative;
  /* height: 100px; */
  width: 100%;
  display: flex;
  flex-direction: column;
}
.audio_kontrolle .abspieler {
  display: inline-block;
  background: white;
  cursor: pointer;
  border-style: none;
  position: relative;
  margin-top: 8px;
  padding: 0;
}
.audio_kontrolle .abspieler::after {
  content: "abspielen";
  display: block;
  background: black;
  color: white;
  border-style: none;
  /*! position: absolute; */
  left: 0;
  top: 0;
  width: 100%;
  padding: 16px 10px;
  box-sizing: border-box;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: padding .4s ease;
}
.audio_kontrolle .abspieler.thinner::after {
  padding: 4px 10px;
}
.audio_kontrolle .abspieler.spielt::after {
  content: "pausieren";
}
.audio_kontrolle .zeitleiste {
  /* position: relative; */
  height: 10px;
  width: 100%;
  top: 12px;
  padding: 0;
  background-color: white;
  border: 1px solid black;
  cursor: pointer;
  display: none;
  margin: 10px 0;
}
.audio_kontrolle .zeitleiste:focus {
  outline: none;
}
.audio_kontrolle .audio_zeit {
  width: 0%;
  height: 100%;
  background-color: black;
  transition: width .2s linear;
}



/* PDF */

.embed_pdf {
  display: none;
  width: 100%;
  height: 92vh;
  grid-column: span 2;
}




@media only screen and (max-width: 414px) {


  #header_title {
    margin-top: 24px;
  }

  #alle_Leute {
    /* grid-row: 2; */
    /* grid-column: 2; */
    grid-row: 3;
    grid-column: 1/32;
    max-width: 100vw;
  }

  .item_button {
    /* max-width: 240px; */
    /* max-height: 300px; */
    max-width: unset;
    max-height: unset;
    width: 100%;
    min-height: 230px;
  }

  #main_wrap {
    /* grid-template: 80px auto / 162px 1fr 100px; */
    grid-template: 80px auto / 96px 1fr 100px;
  }

  /* main_style.css | http://localhost/wordpress-w-str/wp-content/themes/warschauer/css/main_style.css?ver=1.0 */

  #alle_Contente {
    /* grid-row: 2; */
    /* grid-column: 2; */
    grid-row: 3;
    grid-column: 1/3;
    width: 100vw;
  }

  .item_content h2 {
    font-size: 18px;
    margin-left: 4px;
  }

  .audio_kontrolle .abspieler::after {
    margin: 6px;
  }

  .audio_kontrolle .abspieler {
    margin-right: 12px;
  }

    #header_title {
      /* margin-top: 24px; */
      margin-top: 18px;
      font-size: 22px;
    }


  #alle_Contente .schliessen {
    /* margin: 12px 0; */
    margin: 12px 0 12px 2px;
  }

}


/* fin */