#karte_container
{ text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr; 
  justify-content: center; /* Zentriert die Boxen horizontal */
  }  

  .box1 {
    padding: 2px;
    width: 95%;
    text-align: left;
    grid-column: 1 / -1;
    justify-self: center;
  }
  .box_leer {
    padding: 0px;
    text-align: left;
    grid-column: 1 / -1;
    background-color: white;
    min-height: 5px;
    max-height: 5px;
    width: 700px;
    justify-self: center;
  }

  .box2 {
    padding: 2px;
    width: 95%;
    text-align: center;
    grid-column: 1 / -1;
    justify-self: center;
  }

  .box3,
  .box4 {
    padding: 2px;
    width: 500px;
    border: 2px solid blue;
    justify-self: center;
    text-align: left;
  }
  .box3 .titel,
  .box4 .titel {
    text-align: center;
    font-size: 14pt; 
    font-family: Arial;
  }
  
  .tab_norm {
    margin: 0 auto;
    padding: 0px;
    border: 1px solid;
  }
  .td_mittig {
    padding: 4px;
    border: 1px solid;
    white-space: nowrap;
    text-align: center;
  }
  .td_links {
    padding: 4px;
    border: 1px solid;
    white-space: nowrap;
    text-align: left;
  }

a     { color: #3800d0; font-style: italic; font-weight: bold; font-size: 12pt; text-decoration: none; background-color: transparent; border: none }
a:hover { color: red; font-style: italic; font-weight: bold; font-size: 13pt; text-decoration: none; background-color: transparent; border: none }

/* Bei Bildschirmen bis 1000 Pixel */
@media (max-width: 1000px) {
  #karte_container {
    display: block;
    /* display: grid; Sicherstellen, dass es ein Grid-Container ist */
    /* grid-template-columns: 1fr;  Eine Spalte für kleinere Bildschirme */
  }
  .box1,
  .box2 {
    margin: 0 auto;
  }

  .box3,
  .box4 {
    width: 100%; /* Boxen nehmen 90% der Breite ein */
    max-width: 500px; /* Begrenzung der Breite */
    margin-left: auto;
    margin-right: auto;
  }
}