/** {
    border: 1px white solid;
}
*/
body {
    margin: 0;
    height: 100vh;
    display: grid;
    place-items: center;
    color: white;
    font-size: 2vmax;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(to bottom, #422, #200);
  }

#titel {
    font-size: 10vmin;
}

#highscoreAnzeige,
a {
    display: grid;
    place-items: center;
    padding: 8px;
    border: 1px solid black;
    border-radius: 10px;
    background-color: white;
    color: #422;

}

#startScreen {
    display: grid;
    place-items: center;
    width: 90vw;
}

.normal {
    font-size: 3vmin;
    display: grid;
    place-items: center;
}

button {
    background-color: #644;
    height: 10vmax;
    width: 10vmax;
    border-radius: 25%;
    color: white;
    font-size: 2vmax;
}

#intro {
    display: grid;
    place-items: center;
}

#introButton {
    background-color: #644;
    height: fit-content;
    width: fit-content;
    border-radius: 5%;
    font-size: 2vmax;
    padding: 25%;
}

.leuchtfeld {
    width: 25vmin;
    height: 25vmin;
}

#red {
    background-color: red;
    border-top-left-radius: 75%;
    border: 5px solid #422;
}

#blue {
    background-color: blue;
    border-top-right-radius: 75%;
    border: 5px solid #422;
}

#green {
    background-color: green;
    border-bottom-left-radius: 75%;
    border: 5px solid #422;
}

#yellow {
    background-color: yellow;
    border-bottom-right-radius: 75%;
    border: 5px solid #422;
}

.red {
    background-color: red;
    color: red;
}

.blue {
    background-color: blue;
    color: blue;
}

.green {
    background-color: green;
    color: green;
}

.yellow {
    background-color: yellow;
    color: yellow;
}

#redLetter {
    color: red;
}

#blueLetter {
    color: blue;
}

#greenLetter {
    color: green;
}

#yellowLetter {
    color: yellow;
}


.aus {
    opacity: 0.5;
}

.reihe {
    display: flex;
    justify-content: center;
}

#ende {
    padding: 5vmax;
    position: absolute;
    transform: translate(-50% -50%);
    color: #fff;
    font-size: xx-large;
    border-radius: 25%;
    border: 1px solid white;
    display: grid;
    place-items: center;
    text-align: center;
}

p {
    text-align: center;
    color: #fff;
    font-size: xx-large;
}

#tabellenDiv {
    width: 90vw;
    justify-items: center;
}


td {
    width: 10px;
    height: 10px;
    border: 1px solid white;
    border-radius: 5px;
    opacity: 0;
}

.sichtbar {
    opacity: 0.5;
    max-width: 10px;
}

.bright {
    opacity: 1;
}

#spielmodus {
    display: grid;
}
.sensoHintergrund {
    background: 
      radial-gradient(circle at 0 0, red 0%, transparent 70%),
      radial-gradient(circle at 100% 0, blue 0%, transparent 70%),
      radial-gradient(circle at 0 100%, green 0%, transparent 70%),
      radial-gradient(circle at 100% 100%, yellow 0%, transparent 70%);
  }
  

  /* Basis-Styles (werden für alle Ausrichtungen angewendet) */
/* Ihr vorhandener CSS-Code bleibt hier */

/* Media Query für Portrait-Modus (vertikale Ausrichtung) */
@media screen and (orientation: portrait) {
  /* Anpassungen für vertikale Ausrichtung */
 
  
  #spielmodus {
    grid-template-columns: 1fr; /* Eine Spalte */
  }
  
  .leuchtfeld {
    width: 35vmin;
    height: 35vmin;
  }
  
  #ende {
    width: 80vw;
    max-height: 60vh;
  }
  
  p {
    font-size: large;
  }
  
  #introButton {
    padding: 15%;
  }
}

/* Media Query für Landscape-Modus (horizontale Ausrichtung) */
@media screen and (orientation: landscape) {
  /* Anpassungen für horizontale Ausrichtung */
   
  #spielmodus {
    grid-template-columns: 1fr 1fr; /* Zwei Spalten */
  }
  
  .leuchtfeld {
    width: 20vmin;
    height: 20vmin;
  }
  #ende {
    width: 50vw;
    max-height: 80vh;
  }
  
  #introButton {
    padding: 10%;
  }
}

/* Media Query für kleine Bildschirme */
@media screen and (max-width: 480px) {
  #titel {
    font-size: 8vmin;
  }
  
  p {
    font-size: medium;
  }
  
  button {
    height: 8vmax;
    width: 8vmax;
  }
}

/* Media Query für große Bildschirme */
@media screen and (min-width: 1200px) {
  body {
    font-size: 1.5vmax;
  }
  
  .normal {
    font-size: 2vmin;
  }
}