hr {
  border: none;             /* Entfernt den Standardrahmen */
  height: 3px;              /* Höhe der Linie */
  background-color: #333;   /* Farbe der Linie */
  width: 100%;               /* Breite der Linie (in diesem Fall 80% des Containers) */
  margin-left:auto;
  margin-right:auto;
  opacity: 0.7;             /* Transparenz der Linie */
}

table {
  background-color: transparent;
}

/* Optional: Hintergrund der Zellen im tbody ebenfalls auf transparent setzen */
table tbody tr td {
  background-color: transparent;
}


.elementdisabled {
  pointer-events: all; /* Blockiert Interaktionen */
  cursor: not-allowed; /* Zeigt an, dass es deaktiviert ist */
}


.scroll-container {
  width: 800px;               /* Container nimmt die volle Breite des Bildschirms ein */
  overflow-x: auto;           /* Ermöglicht horizontales Scrollen, wenn nötig */
  border: 1px solid #ccc;     /* Optional: Rahmen für bessere Sichtbarkeit */
  white-space: nowrap;        /* Verhindert den Umbruch, damit das Bild horizontal scrollbar bleibt */
}

.scroll-container img {
  max-width: none;            /* Entfernt die maximale Breitenbegrenzung */
  height: auto;               /* Beibehaltung des Seitenverhältnisses */
}
  
  #coords {
    position: absolute;
  
    top: 10px;
    left: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5px;
    z-index: 100;
    pointer-events: none;
  }
   
  
  #exitbutton {
   
    position: fixed; /* Sit on top of the page content */
    top: 30px; 
    left: 30px;
  
  }
  
  #terminal {
      position: fixed; /* Sit on top of the page content */
      display: block; /* Hidden by default */
      width: 100%; /* Full width (cover the whole page) */
      height: 100%; /* Full height (cover the whole page) */
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: scroll;
      background-color: rgba(0,0,0,0.6); /* Black background with opacity */
      z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
      cursor: pointer; /* Add a pointer on hover */
    }
  
    #terminal::-webkit-scrollbar {
      width: 3em;
    }
     
    #terminal::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    }
     
    #terminal::-webkit-scrollbar-thumb {
      background-color: darkgrey;
      outline: 1px solid slategrey;
    }
  
   
  #terminalContent {
      position: absolute;

      top: 50%;
      left: 50%;

      text-align: center;

      font-size: 20px;
      color: white;
      /*overflow: scroll;*/
      transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
    }
  
    #terminalContent::-webkit-scrollbar {
      width: 1em;
    }
     
    #terminalContent::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    }
     
    #terminalContent::-webkit-scrollbar-thumb {
      background-color: darkgrey;
      outline: 1px solid slategrey;
    }
  
  
  
  
  
  #aufgabe {
      position: fixed; /* Sit on top of the page content */
      display: none; /* Hidden by default */
      width: 100%; /* Full width (cover the whole page) */
      height: 100%; /* Full height (cover the whole page) */
      
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      background-color: rgba(0, 0, 0, 0.2); /* Black background with opacity */
      z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
      cursor: pointer; /* Add a pointer on hover */
    }
  
  
  #aufgabeContent {
     /* display: none; */
  
  
     margin: 0 auto;
      padding:5px;
      background-color: rgb(255, 255, 255, 0.9);
      width: 80%;
      height: 80%;
      border-radius: 39px;
      margin-top: 5%;
      overflow: auto;
      text-align:left;
    }
  
  
  #eigentlicheAufgabe {
  
    /*
    display: flex;
    justify-content: center;
    align-items: center;
    */
  
    margin: 0 auto;
  
      top: 50%;
      left: 50%;
      font-size: 30px;
      color: rgb(0, 0, 0);
      transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
      text-align:left;
      
    }
  
  
   
    #dialog {
      position: fixed; /* Sit on top of the page content */
      /*display: none; *//* Hidden by default */
      display: block;
  
      width: 100%; /* Full width (cover the whole page) */
      height: 100%; /* Full height (cover the whole page) */

      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      


      background-color: rgba(255, 255, 255, 0.6); /* Black background with opacity */
      z-index: 1; /* Specify a stack order in case you're using a different order for other elements */
      cursor: pointer; /* Add a pointer on hover */
    }
  
  
  
  #dialogContent {
      position: relative;
      background: #ffffff;
      /* Text zentrieren */
      margin: 0 auto;

      color: #000000;
      /*text-align: center;*/
      text-align:left;
      width: 600px;
      height: 300px;
      top: 20%;
      border-radius: 39px;
      padding: 0px;
      z-index: 3;

     

      border: #000000 solid 4px;
  }
  
  #dialogContent:after {
      content: '';
      position: absolute;
      display: block;
      width: 0;
      z-index: 1;
      border-style: solid;
      border-color: transparent #ffffff;
      border-width: 21px 0 21px 28px;
      top: 49%;
      right: -28px;
      z-index: 3;
      margin-top: -21px;
  }
  
  #dialogContent:before {
      content: '';
      position: absolute;
      width: 0;
      z-index: 0;
      border-style: solid;
      border-color: transparent #000000;
      border-width: 25px 0 25px 32px;
      top: 49%;
      right: -34px;
      margin-top: -25px;
      z-index: 3;
      display: block;
  }
  
  
  
  .dialogimage-container {
    position: fixed; /* Positionierung relativ zum Viewport */
    bottom: 0; /* Abstand vom unteren Rand des Viewports */
    right: 0; /* Abstand vom rechten Rand des Viewports */
    z-index: 2;
    width: auto;
    height: 90%;
    display: block;
  }
  
  
  #dialogme {
    position: relative; /* Sit on top of the page content */
    /*display: none; *//* Hidden by default */
    display: block;
  
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */

    background-color: rgba(255, 255, 255, 0.6); /* Black background with opacity */
    z-index: 3; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
  }
  
  
  
  #dialogmeContent {
    position: relative;
    background: #eeffa0;
    /* Text zentrieren */
    margin: 0 auto;
  
    color: #000000;
    text-align: center;

    width: 600px;
    height: 300px;

    top: 20%;
    border-radius: 39px;


    padding: 0px;
    z-index: 3;
    border: #000000 solid 4px;
  }
  
  
  
  .dialogText {


    width: 100%;

    padding: 30px;
    z-index: 3;
 
  }
   
  
  
  
  #infoPoint {
    position: fixed; /* Sit on top of the page content */
    
    display: block;
  
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-color: rgba(0, 0, 0, 0.6); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
  }
  
  
  
  #infoPointContent {
    position: relative;
    background: rgba(255, 255, 255, 0.9);
    
    /* Text zentrieren */
    margin: 0 auto;
  
    color: #000000;
    text-align: left;
    width: 60%;
    height: 80%;
    top: 50px;
    border-radius: 39px;
    padding: 100px;
    border: #000000 solid 4px;

    /*
    padding-top: 50px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
    */

    
  
    overflow: auto; 
  }
  


  .background-container {
    position: relative;
    width: 80%;
    height: 60%;
    overflow: hidden;
    border: 2px solid white;
    border-radius: 15px;
}

.background-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/gifs/feuerwerk00007.gif'), url('../images/gifs/feuerwerk00009.gif'), url('../images/gifs/feuerwerk00008.gif');
    background-size: cover, contain, contain;
    background-position: center, left, right;
    background-repeat: no-repeat, no-repeat, no-repeat;
    z-index: 1;
    opacity: 0.8; /* Transparenz */
}

.foreground-text {
    position: relative;
    z-index: 2;
    color: white;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}