* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body, html {
    height: 100%;
    width: 100%;
  }
  
  .container {
    display: flex;
    height: 100%;
    width: 100%;
  }
  
  #bereich-a {
    width: 72.5%;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  #bereich-b {
    width: 27.5%;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .top {
    height: 80px;
    display: grid;
    grid-template-columns: 50% 5% 7.5% 10%;
  }
  
  .top > div {
    background-color: #ccc; /* Beispiel für Formularfelder */
  }
  
  .bottom {
    flex-grow: 1;
    display: grid;
    grid-template-columns: 27.5% 7.5% 7.5% 7.5% 5% 7.5% 10%;
  }
  
  .bottom > div {
    background-color: #ddd; /* Beispiel für die Unterteile */
  }
  
  #bereich-b .top {
    height: 80px;
    display: grid;
    grid-template-columns: 100%;
  }
  
  #bereich-b .top > div {
    background-color: #bbb; /* Beispiel für Formularfelder */
  }
  
  #bereich-b .bottom {
    flex-grow: 1;
    background-color: #f5f5f5; /* Beispiel für unteren Bereich */
  }

  table {
    width: 100%;
    border-collapse: collapse; /* Für eine saubere Darstellung */
  }
  
  th, td {
    border: 1px solid #ddd; /* Beispiel für einen Rahmen */
    padding: 8px;
    text-align: center; /* Beispiel für Textzentrierung */
  }