/* Place your CSS styles in this file */

body {
    background-color: lightblue;
  }
  
  html * {
    font-family: "Source Sans Pro", sans-serif;
  }

  * {
    box-sizing: border-box;
  }

  p {
    font-family: verdana;
  }
  
  .quoteBox {
    background: white;
    color: rgb(94, 93, 93);
    padding: 0.25rem 1rem;
    border: 0.3vw solid rgb(180, 178, 178);
  }

  p.q1 {
    text-align: left;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: normal;
    font-size: 2vw;
  }
  p.q2 {
  text-align: left;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: normal;
  font-size: 1.5vw;
  }

  .clickBox {
    height : 3vw; 
    width:auto; 
    font-size:1.5vw; 
    font-weight: bold;
    margin-top: 1vw;
  }

  
  button {
    width: 100px;
    height: 100px;
  }

  .picInfoBox {
    display: flex;
    justify-content: space-between;
    background: white;
    color: rgb(94, 93, 93);
    padding: 0.25rem 1rem;
    border: 0.3vw solid rgb(180, 178, 178);
    align-items: flex-start; /* Damit beide Boxen oben ausgerichtet sind */
}

.picBox {
    width: 66vw;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.picBox img {
    max-width: 100%;
    height: auto;
    display: block;
}

.infoBox {
    width: 33vw;
    max-height: 100%; /* Setzen Sie die maximale Höhe auf die Höhe der picBox */
    overflow-y: auto; /* Scrollleiste bei Überlauf anzeigen */
    display: flex;
    flex-direction: column;
    background: white;
    color: rgb(94, 93, 93);
    padding: 0.25rem 1rem;
    border: 0.3vw solid rgb(180, 178, 178);
    margin-left: 1rem;
    margin-bottom: 0.25rem;
}

.infoItem {
    margin-bottom: 1rem;
    font-size: 1.5vw;
    border: none;
}


.comment {
  margin-bottom: 1vh;
}

  .responsive {
    width: 32vw;    
    height: auto;
  }
  
  p.title_main {
    text-align: center;
    color: white;
    font-weight: bold;
    font-style: italic;
    font-size: 40px;
  }

  p.title_sub1 {
    text-align: center;
    color: white;
    font-weight: bold;
    font-style: italic;
    font-size: 2.7vw;
  }

  p.title_sub2 {
    text-align: right;
    color: white;
    font-weight: bold;
    font-style: italic;
    font-size: 25px;
  }

  p.title_sub3 {
    text-align: left;
    color: white;
    font-weight: bold;
    font-style: italic;
    font-size: 25px;
  }

  
  .row::after {
    content: "";
    clear: both;
    display: table;
  }
  
  [class*="col-"] {
    float: left;
    padding: 15px;
    /* border: 1px solid red; */
  }
  
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}


   
   /* Login Formular */
  .login-form {
    width: 20rem;
    max-width: 90%;
    margin: auto;
    display: block;
}

.form-control {
  margin: 1rem 0;
}

.form-control label,
.form-control input,
.form-control textarea {
  display: block;
  width: 100%;
  margin-bottom: 0.25rem;
}

.form-control input,
.form-control textarea {
  border: 1px solid #a1a1a1;
  font: inherit;
  border-radius: 2px;
}

.form-control input:focus,
.form-control textarea:focus {
  outline-color: #00695c;
}

.btn {
  display: inline-block;
  padding: 0.25rem 1rem;
  text-decoration: none;
  font: inherit;
  border: 1px solid #00695c;
  color: #00695c;
  background: white;
  border-radius: 3px;
  cursor: pointer;
  width: 20rem;
  max-width: 100%;
  height: 2.5rem;
  margin: auto;  
}

.btn:hover,
.btn:active {
  background-color: #00695c;
  color: white;
}

.btn.danger {
  color: red;
  border-color: red;
}

.btn.danger:hover,
.btn.danger:active {
  background: red;
  color: white;
}



 
/* lector Elemente */


.wortBox {
  text-align: left;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: bold;
  font-size: 2.3vw;
  background: white;
  color: black;
  padding: 0.25rem 1rem;
  border: 0.5vw solid #00695c;
  /* color: #00695c; */
  cursor: pointer;
  width: 21vw;
  height: 4.4vw;
  margin: auto; 
  top: 10vw; 
  }

  .wordNew {    
    position: absolute;
    font-weight: bold;
    font-size: 3vw;
    background: lightblue;
    color: black;  
    border: none; 
    
    width: 5vw;
    height: 4.4vw;
    margin: auto; 
    top: 15vw; 
    cursor: pointer;
    }

.weiter, .fragen {
  font-size: 1.2vw;
  font-weight: bold;
  border: 0.2vw solid #00695c;
}

.fragen {
border-radius: 2vw
}

.satzBox {
  text-align: left;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: bold;
  font-size: 1.7vw;
  background: white;
  color: black;
  padding: 0.25rem 1rem;
  border: 0.5vw solid #00695c;
  /* color: #00695c; */
  /* cursor: pointer; */
  width: 90vw;
  min-height: 5vw;
  margin: auto; 
  top: 34vw; 
  }

  #frage, #antwort {
    text-align: left;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: bold;
    font-size: 1.7vw;
    background: white;
    color: black;
    padding: 0.25rem 1rem;
    border: 0.5vw solid #00695c;
    /* color: #00695c; */
    cursor: pointer;
    width: 50vw;
    min-height: 5vw;
    margin: auto; 
    top: 100vh; 
    }
  
  #antwortNr {
    border: 2px solid black;
    background: white;
    height: 2.7vw;
    width: 2.7vw;
    }





  @media (orientation: portrait) {
  
    #kommentarText {
      width: 100%;
      font-size: 1.4vw; 
    }

  #aiImage {
    position: absolute; 
    left: 5vw;
    width: 90vw;
    height: 90vw
  }

  #save2galery {
    top: calc(120vw + 90vw)
  }
  #lector2puzzleButton {
    top: calc(120vw + 90vw)
  }

  #lector2puzzleWait  {
    top: calc(120vw + 90vw)
  }

  #go2galery {
    top: calc(125vw + 90vw)
  }
  #newAll2 {
    top: calc(129vw + 90vw)
  }
  }

  @media (orientation: landscape) {

  #kommentarText {
    width: 100%;
    font-size: 1.3vw;
  }

  p.title_sub1 {
    text-align: center;
    color: white;
    font-weight: bold;
    font-style: italic;
    font-size: 3vw;
  }

  #aiImage {
    position: absolute; 
    left: calc(0.5 * (100vw - 90vh));
    width: 90vh;
    height: 90vh
  }

  #save2galery {
    top: calc(113vw + 90vh)
  }

  #lector2puzzleButton {
    top: calc(113vw + 90vh)
  }

  #lector2puzzleWait {
    top: calc(113vw + 90vh)
  }

  #go2galery {
    top: calc(118vw + 90vh)
  }
  #newAll2 {
    top: calc(122vw + 90vh)
  }
}

#welcome {
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 3vw;
  width: 100vw;
} 

.galeryImg {
  width: 29vw;
  height: 29vw;
  border: 2px solid black;
}

.footer {  
  color: grey;  
  font-size: 1vw;  
}

.go2puzzleButton, .delPicButton {  
  color: grey;  
  font-size: 1vw;
  width: 12.5vw;
  height: 2.5vw;
  background-color: rgb(213, 249, 250); 
  cursor: pointer; 
}
.delPicButton {
  color: red;
}



/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
    .dropdown-content a:hover {background-color: #718b88;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

#lectorSelect {
  background-color: #00695c;
  color: white;
  border: none;
}