/* v19 */  
/*
  mobile first
*/
:root {
  --main-width: 98%;
  --main-bg-color:  rgba(71,47,250,0.18);
  --title1-font-size: 20px;
  --title2-font-size: 16px;
  --dialog-font-size: 16px;
  --tahit-font-size: 14px;
  --title2-tahit-pd: 16px;
  --tahit-pd-bottom: 24px;
  --padding-within-row: 8px;
  --spacer-height: 4px;
}
  
  
  
@media only screen and (min-width: 361px) {
  :root {
     --main-width: 98%;
    --main-bg-color:  rgba(71,47,250,0.18);
    --title1-font-size: 20px;
    --title2-font-size: 16px;
    --dialog-font-size: 18px;
    --tahit-font-size: 14px;
    --title2-tahit-pd: 16px;
    --tahit-pd-bottom: 24px;
    --padding-within-row: 8px;
    --spacer-height: 4px;
  }
  
}



.text-container {
  /* die Höhe muss je nach device angepaßt werden */
  height: 400px;
  overflow-y:scroll;
}

.div-tahit {
  display: flex;
  justify-content: center;
  padding-top: var(--title2-tahit-pd);
  text-align: center;
  font-size: var(--tahit-font-size); 
  width: var(--main-width);
}

.div-title1 {
  width: var(--main-width);
  padding-top: var(--dialog-font-size);
  text-align: center;
  font-size: var(--title1-font-size);
}

.div-title2 {
  width: var(--main-width);
  padding: var(--title2-tahit-pd) 0;
  padding-bottom: var(--tahit-pd-bottom);
  text-align: center;
  font-size: var(--title2-font-size);
}

.div-row {
  display: flex;
  padding: 0;
  background-color: var(--main-bg-color);
  width: var(--main-width);
}

.div-initial {   
  display: flex;
  vertical-align:top;
  padding: var(--padding-within-row);
  width: 6%;
}

.div-speaker {
  display: flex;
  vertical-align:top;
  padding: var(--padding-within-row);
  width: 47%;
}

.div-spacer {
  height: var(--spacer-height);
  width: var(--main-width);
}
