/* Skills styles */

.termine {
    background-color: var(--primary-bgr);
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    height: 100%;
}

.termine-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: inherit;
    color: var(--primary-bgr-less-translucent);
    backdrop-filter: grayscale() brightness();
}

.termine-container h2 {
    background-color: var(--primary-color-less-translucent-c8);
    backdrop-filter: blur(3px);
    position: relative;
    padding: calc(var(--font-size) * 1);
    /*margin-bottom: calc(var(--font-size) * 6);*/
}

.termine-container h2 span {
  color: var(--primary-accent);
}

.termine-container .kursplan {
    position: relative;
    width: 100%;
}

.termine-container .kursplan h3 {
  background-color: var(--primary-color-less-translucent-c8);
  backdrop-filter: blur(3px);
  padding: calc(var(--font-size) * .5) calc(var(--font-size) * .625);
  margin-bottom: calc(var(--font-size) * 2.5);
  font-weight: bold;
}

.kursplan .kurs {
  background-color: var(--primary-color-less-translucent-c8);
  backdrop-filter: blur(3px);
  margin-bottom: calc(var(--font-size) * 2);
  padding: calc(var(--font-size) * .5) calc(var(--font-size) * .625);
  display: block;
  width: 100%;
  box-shadow: 1px 3px 5px #202020, 0 2px 9px rgba(255, 255, 255, 0.1) inset, 0 -2px 9px rgba(0, 0, 0, 0.1) inset;
  /*box-shadow: 1px 3px 5px #101010, 0 2px 9px rgba(255, 255, 255, 0.1) inset, 0 -2px 9px rgba(0, 0, 0, 0.1) inset;*/
  transition: transform 150ms ease-in-out;
  -webkit-transition: transform 150ms ease-in-out;
}

.kursplan a.kurs:hover,
.kursplan a.kurs:active {
  box-shadow: 0px 0px 0px #202020, 0 0px 0px rgba(255, 255, 255, 0.1) inset, 0 0px 0px rgba(0, 0, 0, 0.1) inset;
  /*transform: scale(1.04);
  -webkit-transform: scale(1.04);*/
  transition: transform 150ms ease-in-out;
  -webkit-transition: transform 150ms ease-in-out;}

.kursplan a.kurs:focus {
  outline: calc(var(--font-size) * .1) dotted #101010;
  outline-offset: calc(var(--font-size) * -0.1);
}

.kursplan .kurs,
.kursplan .kurs h4,
.kursplan .kurs p,
.kursplan .kurs span,
.kursplan .kurs > span > time,
.kursplan .kurs > span {
  font-family: var(--primary-font);
  font-size: calc(var(--font-size) * 1);
}

.kursplan a.kurs {
  color: var(--primary-bgr-less-translucent);
}

.kursplan time {
  font-weight: bold;
  display: inline-block;
}

.kursplan h4 time {
  padding-bottom: calc(var(--font-size) * .5);
  display: inline-block;
}

.kursplan h4 span {
  display: block;
  font-weight: bold;
  line-height: 130%;
}

.kursplan .kurs p {
  font-weight: normal;
  padding: calc(var(--font-size) * .5) 0;
  line-height: normal;
}

.kursplan .kurs span {
  display: block;
}

.kursplan .col {
  width: 100%;
  float: left;
  outline: 0px solid var(--secondary-accent);
}

.kursplan > hr,
.kursplan .col hr {
  border: none;
  background-color: var(--secondary-accent-translucent);
  height: calc(var(--font-size) * .219);
  border-radius: calc(var(--font-size) * .0625);
  margin: calc(var(--font-size) * 3);
  width: calc(100% - (var(--font-size) * 6));
}

.kursplan .col hr {
  margin-top: calc(var(--font-size) * 3);
}

.kursplan > hr:last-child {
  display: none;
}

@media screen and (min-width: 640px) {
  .kursplan .kurs {
    width: 46%;
    display: inline-block;
    vertical-align: top;
  }
  .kursplan .col .kurs:nth-child(odd) {
    margin: 0% 0% calc(var(--font-size) * 2.5) 4%;
  }
  .kursplan .col .kurs:nth-child(even) {
    margin: 0% 4% calc(var(--font-size) * 2.5) 0%;
  }
  .kursplan .col hr {
    margin-top: calc(var(--font-size) * .5);
  }
  .kursplan a.kurs:hover,
  .kursplan a.kurs:active {
    transform: scale(1.04);
    -webkit-transform: scale(1.04);
  }
}

@media screen and (min-width: 1380px) {
  .kursplan .col {
    padding: 0px 1.2%;
    width: 16.66667%;
  }
  .kursplan .col:first-child {
    padding-left: 0%;
  }
  .kursplan .col:last-child {
    padding-right: 0%;
  }
  .kursplan > hr {
    display: block !important;
    margin-top: calc(var(--font-size) * 4);
    margin-bottom: calc(var(--font-size) * 4);
  }
  .kursplan .col hr {
    display: none;
  }
  .kursplan .kurs {
    width: 100%;
  }
  .kursplan .col .kurs:nth-child(odd) {
    margin: 0% 0% calc(var(--font-size) * 2.5) 0%;
  }
  .kursplan .col .kurs:nth-child(even) {
    margin: 0% 4% calc(var(--font-size) * 2.5) 0%;
  }
  .kursplan .wochentag {
    margin-bottom: calc(var(--font-size) * 2.5);
  }
  .termine-container h2 {
    margin-bottom: calc(var(--font-size) * 0);    
  }
  .kursplan a.kurs:hover,
  .kursplan a.kurs:active {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
  }
}


/*@media only screen and (min-width: 948px) {

}*/

/*@media only screen and (min-width: 1080px) {

}*/

/*@media only screen and (min-width: 1280px) {
  .skills-icons {
    grid-template-columns: repeat(4, 1fr);
  }
}*/


/* Background images */
.termine {
    background-image: url("../assets/images/jugend_005_640.jpg");
}

@media only screen and (min-height: 660px) {
  .termine {
    background-image: url("../assets/images/jugend_005_1024.jpg");
  }
}

@media only screen and (min-width: 768px) and (max-height: 432px) {
  .termine {
    background-image: url("../assets/images/jugend_005_768.jpg");
  }
}

@media only screen and (min-width: 1024px) {
  .termine {
    background-image: url("../assets/images/jugend_005_1024.jpg");
  }
}

@media only screen and (min-width: 1280px) {
  .termine {
    background-image: url("../assets/images/jugend_005_1280.jpg");
  }
}

@media only screen and (min-width: 1920px) {
  .termine {
    background-image: url("../assets/images/jugend_005_1920.jpg");
  }
}