:root {
  --white: #ECECEC;
  --button-bg: #0000FF;
  --button-font-disabled: #629AFF;
}


* {
  box-sizing: border-box;
  font-family: inherit; 
  font-size: inherit; 
}

html{
  font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
  Arial, sans-serif, Apple Color Emoij, Segoe UI Emoji,Segoe UI Symbol;
}

body {
  margin: 0;
  padding: 0;
  background-color: #FAFAFA;
  font-size: 1.3em;
}

#app-container {
  max-width: 96vw;
  overflow: hidden;
  margin: 1rem auto;
}

#menu{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 5px 0px 5px 5px;
  height: 3.6rem;
}

#btn-import{
  height: 3.5rem;
  width: 10.0rem;
}

#grid-container {
  display: grid;
  grid-template-columns: 25% 1fr 25%;
  grid-template-rows: 4.5em;
  gap: 0 10px;
  grid-template-areas: "btnStart bertwertungantwort btnWeiter";
}

#grid-container .btnStart {
  grid-area: btnStart;
}

#grid-container .bertwertungantwort {
  grid-area: bertwertungantwort;
}

#grid-container .btnWeiter {
  grid-area: btnWeiter;
}

#frage {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border: solid black 3px;
  border-radius: 10px;
  padding: 10px;
  margin: 5px 0 2px 0;
}

.antworten {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.antwort {
  width: 100%;
  overflow: hidden;
  background-color: var(--button-bg);
  color: var(--white);
  border: solid rgb(0, 0, 0) 0px;
  padding: 1rem;
  margin: 0px;
  margin-bottom: 3px;
  font-size: 1.3em;
  text-align: left;
}

button {
  display: grid;
  place-items: left;
  color: var(--white);
  background-color: var(--button-bg);
  padding: 0px;
  margin: 0px;
  font-size: 1.3em;
}

button[disabled] {
  background-color: var(--button-bg);
  color: var(--button-font-disabled);
}


#btn-start, #btn-weiter, #btn-import, #btn-editor {
  display: flex;
  align-items: center;
  justify-content: center;
}


#bertwertung-antwort {
  overflow: hidden;
  color: rgb(0, 0, 0);
  border: solid rgb(0, 0, 0) 1px;
  border-radius: 10px;
  padding: 5px;
  margin: 0px;
  margin-top: 5px;
}

#einstellungen {
  display: flex;
  align-items: center;
  padding: 5px;
  margin: 0px;
  background-color: white;
}

#automatisch-weiter {
  transform: scale(3);
  margin: 20px 20px 20px 20px;
}

.buchstabeUnterstrichen {
  text-decoration: underline;
}

/*       Quiz-Editor  */
#quiz-editor {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f9f9f9;
  margin-top: 20px;
}

#quiz-editor h3 {
  margin-bottom: 20px;
}

#quiz-editor label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

#quiz-editor input[type="text"],
#quiz-editor select {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

#quiz-editor-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}


#quiz-editor button {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  background-color: var(--button-bg);
  color: var(--white);
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#quiz-editor button:hover {
  background-color: #005bb5;
}


/*        M E D I A  Q U E R I E S  */

@media screen and (min-width: 280px) and (min-height: 653px) {
  #grid-container {
    grid-template-rows: 7.5em;
  } 
}

@media screen and (min-width: 320px) and (min-height: 658px) {
  #grid-container {
    grid-template-rows: 9.0em;
  } 
}

@media screen and (min-width: 360px) and (min-height: 640px) {
  #grid-container {
    grid-template-rows: 7.6em;
  } 
}

@media screen and (min-width: 768px) and (min-height: 1024px) {
  #grid-container {
    grid-template-rows: 4.5em;
  } 
}

@media screen and (min-width: 1280px) and (min-height: 800px) {
  #grid-container {
    grid-template-rows: 4.5em;
  } 
}

/* Barrierefreiheit */
.antwort:focus,
#btn-start:focus,
#btn-weiter:focus,
#btn-import:focus,
#btn-editor:focus,
#btn-speichern:focus,
#btn-neue-frage:focus,
#btn-exportieren:focus,
input[type="text"]:focus,
select:focus {
  background-color: yellow;
  color: black;
}

@media screen and (forced-colors: active) {
  
  button, .antwort {
    border: 3px solid white;
  }

  .antwort:focus,
  #btn-start:focus,
  #btn-weiter:focus {
    border: 7px solid white;
    transition: border-width 0.2s, background-color 0.2s, color 0.2s; 
  }
}