/* non-selectable text */
.dropdown-options, .dropdown-selected,
.lang-container, .speaker,
.letter-container, .reading-letter,
.letter-sound, .read-word,
.read-match-word, .option,
.option-word, .cell, .word,
img, .option-audio,
.unselectable {
  user-select: none;
}




/* Progress-bar for a chapter */
.chapter-letter {
  position: fixed;
  left: 10px;
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  color: white;
}



/* Audio buttons */
.speaker-task-background {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s;
  cursor: pointer;
}

.speaker-task-background {
  background-color: var(--speaker-task);
}

.speaker-background {
  background-color: var(--speaker);
}
/* Audio buttons end here */


/* Containers */
.letter-sound-container, /* Hören Sie. */
.audio-image, /* Hören Sie. - audio and picture */
.audio-sounds /* Hören Sie. - audio and picture (sound or syllable) */ {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.random-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* Hovers */
.speaker-task-background:hover,
.speaker-background:hover,
.lang-background:hover {
  opacity: 0.8;
  cursor: pointer;
}

.image-item:hover, .card:hover, .letter-container-sound:hover,
.check-button:hover, .read-match-word:hover,
.option:hover,.option-word:hover,
.show-background:hover, .show-background-markieren:hover {
  box-shadow: 3px 3px 3px lightgray;
  cursor: pointer;
}

/* Progress-bar container */
.progress-container {
  width: calc(100% - 2px);
  height: 20px;
  background-color: var(--background);
  border: 1px solid var(--border);
  display: block;
  opacity: 0;
  transition: opacity 0.3s;
}

/* Progress-bar container, visible */
.progress-container.visible {
  opacity: 1;
}

/* Progress-bar */
.progress-bar {
  height: 100%;
  background-color: var(--correct);
  width: 0%;
  transition: width 0.5s ease;
}

/* Check button */
.check-button,
.show-background, .show-background-markieren {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 170px;
  height: 45px;
  cursor: pointer;
  border-width: 0;
  background-color: var(--check-button);
  transition: box-shadow .3s ease;
}

.show-background, .show-background-markieren {
  opacity: 0.3;
}

.img-check {
  width: 20px;
  height: 20px;
}

.read-match-word,
.option,
.option-word {
  display: flex;
  width: fit-content;
  padding: 10px;
  border: 1px solid var(--border);
  background-color: var(--background);
  transition: box-shadow .3s ease;
}

.picto {
  width: 40px;
  height: 40px;
  margin-left: 20px;
}

.check-button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.show-img {
  width:30px;
}


/* Settings for separate exercises */

/* Presentation */
#presentation {
  position: relative;
  max-width: 500px;
  overflow: hidden;
}

#pres-controls {
  display: flex;
  align-items: center;
  max-width: 500px;
  margin-top: -20px;
  gap: 10px;
  width: 100%;
}

#pres-progressContainer {
  flex: 1;
  height: 10px;
  background: var(--background);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
}

#pres-progress {
  height: 100%;
  width: 0%;
  background: var(--check-button);
}

#pres-playPause {
  background: var(--check-button);
  border: none;
  cursor: pointer;
}

#pres-playPauseIcon {
  height: 30px;
  padding: 5px 10px;
}

#presentation img {
  height: auto;
  width: 100%;
}

#presentation p {
  text-align: center;
}










/* Hören Sie. /
Hören Sie und sprechen Sie nach. */
.letter-container {
  width: 250px;
  height: 250px;
  background-color: var(--reading-card);
  display: flex;
  justify-content: center;
  align-items: center;
}

.letter {
  font-size: 80pt;
  opacity: 0.6;
}

.listen-image {
  width: 170px;
  height: 140px;
  border: 1px solid var(--border);
}





/* Markieren Sie A/a. */
.sentences {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px 0;
}

.sentence {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0 20px;
}

.words {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 60px;
}

.column {
  display: flex;
  flex-direction: column;
}

.word {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
}

.letter-in-word {
  font-size: 28px;
  border: 1px solid white;
}

.letter-in-word:hover {
  background-color: var(--selected);
  cursor: pointer;
}

.examples {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.word img {
  width: 40px;
  height: 40px;
  padding-right: 10px;
}





/* SVL  */
.reading-words {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 20px;
}

.reading-word1,
.reading-word2 {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.reading-word1 {
  gap: 10px;
}

.left-card {
  margin-left: 10px;
}

.reading-card1,
.reading-card2 {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--reading-card);
  height: 120px;
}

.reading-card1 {
  padding: 0 20px;
}

.reading-card2:hover {
  background-color: var(--selected);
}

.reading-letter.left {
  padding-left: 30px;
}

.reading-letter.right {
  padding-right: 30px;
}

.reading-letter {
  font-size: 5rem;
  margin: 0 0;
  opacity: 0.6;
}

.reading-card1 .reading-letter {
  opacity: 0.1;
}





/* Welche Wörter beginnen mit A? Hören Sie und klicken Sie das Bild an. */
.image-item {
  box-sizing: content-box;
  width: 150px;
  height: 120px;
  padding: 10px;
  border: 1px solid var(--border);
  background-color: var(--letter);
  transition: box-shadow .3s ease;
}





/* Welchen Laut hören Sie? Klicken Sie den Laut an. */
.sounds {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.letter-container-sound {
  width: 200px;
  height: 200px;
  background-color: var(--reading-card);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: box-shadow .3s ease;
}

.letter-sound {
  font-size: 60pt;
  opacity: 0.6;
}





/* Wo hören Sie A/a im Wort? Klicken Sie das graue Feld an. */
.places {
  width: 170px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 3px;
}

.place {
  width: 50%;
  height: 30px;
  background-color: var(--place);
}

.place:hover {
  cursor: pointer;
}

.no-cursor {
  width: 50%;
  height: 30px;
  background-color: var(--place);
  cursor: default;
}

.beispiel {
  background-color: var(--selected);
}





/* Hören Sie und lesen Sie. */
.audio-word-container, .word-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.audio-word {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 10px;
}

.read-word {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.syllable {
  border: 1px solid var(--selected);
  border-radius: 25px;
  padding: 5px 10px;
  pointer-events: none;
}





/* Lesen Sie. Was passt zusammen? */ 
.dropzones {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin: 0 10px;
}

.dropzone {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-height: 74px;
  min-width: 74px;
  padding: 10px;
  border: 1px solid var(--border);
}

.options.random-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 1;
  min-height: 100px;
  width: 600px;
  overflow: visible;
}

.dropzone,
.options.random-container {
  position: relative;
}

.option.hide {
  display: none;
}

.options {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.option-audio {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.option {
  touch-action: none;
}

.name-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}




/* Hören Sie und lesen Sie mit. */
.lesen-mit-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 20px;
}





/* Welches Wort sehen Sie im Satz? Klicken Sie das Wort an. */
.lesen-sentence {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.sentence-word-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.sentence-word {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.answers {
  display: flex;
  flex-wrap: nowrap;
}




/* Welche Wörter hören Sie? Klicken Sie die Wörter an. 
Welche Wörter hören Sie im Text? Klicken Sie die Wörter an. */ 
.audio-task {
  margin: 20px 0;
}

.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}





/* Suchen Sie und markieren Sie die Wörter. */
.matrix-arrows {
  display: grid;
  grid-template-columns: calc(100% - 30px) 30px;
  grid-template-rows: 30px calc(100% - 30px);
}

.matrix {
  display: grid;
  grid-template-columns: repeat(7, 50px);
  grid-gap: 5px;
  grid-column-start: 1;
}

.matrix-8 {
  grid-template-columns: repeat(8, 50px);
}

.word-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0 40px;
  list-style: none;
}

.cell {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  cursor: pointer;
}

.cell.selected {
  background-color: var(--selected);
}

.cell.correct {
  background-color: var(--correct);
}

.cell.incorrect {
  background-color: var(--incorrect);
}

.word-found {
  text-decoration: line-through;
  color: var(--border);
}

.arrow {
  place-self: center;
}

.arrow-right {
  width: 80px;
  rotate: 180deg;
  padding-top: 10px;
}

.arrow-down {
  height: 24px;
  rotate: 270deg;
  padding-top: 10px;
}





/* Hotspot */
.hotspot-container {
  position: relative;
  display: inline-block;
}

.hotspot-container-mobile {
  display: none;
}
 
.hotspot {
  position: absolute;
  background-color: var(--selected);
  border-radius: 5px;
  display: block;
  opacity: 0;
}
 
 
.target-image {
  box-sizing: content-box;
  width: 700px;
  height: auto;
  padding: 10px;
  border: 1px solid var(--white);
}
 
.target-image.correct {
  background-color: var(--correct);
  border: 1px solid var(--border);
}
 
.target-image.incorrect {
  background-color: var(--incorrect);
  border: 1px solid var(--border);
}

.hotspot-correct {
  background-color: var(--correct);
  opacity: 0.5;
}
 
.hotspot-incorrect {
  background-color: var(--incorrect);
  opacity: 0.5;
}



/* Schreiben Sie A/a. Achten Sie auf das große A und das kleine a. */
.write-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.write-sentence {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* .write-sentence-content {
    margin: 0 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  } */

/* .write-sentence p {
  margin: 10px 0;
} */

.write-input {
  font-family: "Quicksand", sans-serif;
  font-weight: 400;
  text-align: center;
  height: 10px;
  font-size: 24px;
  border: 1px solid var(--border);
  width: 40px !important;
  height: 40px;
}

.write-input.word {
  width: 170px !important;
}

.nowrap {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}



.selected {
  background-color: var(--selected); 
}  

.correct {
  background-color: var(--correct)
}  
  
.incorrect {
  background-color: var(--incorrect)
}

.correct-answers {
  background-color: var(--correct-answers);
}



/* Mobile version */

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

  .progress-bar-chapter {
    height: 20px;
  }

  .chapter-letter {
    font-size: 1rem;
    left: 5px;
  }



  audio {
    width: 100%;
  }
  
  .random-container {
    gap: 10px;
  }

  .options.random-container {
    width: 100%;
  }

  .progress-container {
    height: 15px;
  }

  .check-button-container {
    gap: 10px;
  }
  
  .lesen-sentence p,
  .sentence-word p {
    margin: 0 0;
  }
  
  .letter-in-word {
    font-size: 1.5rem;
  }
  
  .words {
    gap: 5px 40px;
  }
  
  .sentences {
    gap: 0 0;
  }
  
  .sentence-word {
    gap: 0 10px;
  }
  
  .reading-word1{
    gap: 5px;
  }

  .reading-card1 {
    padding: 0 10px;
  }
  
  .reading-card1, .reading-card2 {
    height: 70px;
  }
  
  .reading-letter {
    font-size: 2rem;
  }

  .letter-container-sound {
    width: 150px;
    height: 150px;
  }

  .letter-sound {
    font-size: 50pt;
  }

  .matrix {
    grid-template-columns: repeat(7, 40px);
    grid-gap: 3px; 
  }

  .matrix-8 {
    grid-template-columns: repeat(8, 40px);
  }
  
  .cell {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  
  .word-list {
    margin: 0 0;
  }
  
  /* li {
    font-size: 1.2rem;
  } */

  .image-container {
    gap: 20px 10px;
  }

  .dropzones {
    gap: 20px 30px;
  }

  .lesen-mit-container {
    gap: 10px;
  }

  /* .lesen-sentence p {
    font-size: 1.2rem;
  } */

  /*  Hotspot */
  .hotspot-container {
    display: none;
  }

  .hotspot-container-mobile {
    position: relative;
    display: inline-block;
  }
  
  .target-image {
    width: 300px;
    padding: 10px;
    border: 1px solid var(--white);
  }
}