dl, ol, ul {
  margin-top: 0;
  margin-bottom: 1rem;
  list-style-type: none;
}
ol, ul {
  padding-left: 0;
}

#joodbForm .searchbox {
    display: inline-flex
;
    flex-wrap: wrap;
    margin: 0px 0;
    clear: both;
}

.joodb table th, .joodb .header {
    background: #fff;
}

<style>
  /* Styling für den übergeordneten th, um Padding zu entfernen und Höhe zu kontrollieren */
  th { /* Wenn dieser Stil nur für DIESEN th gelten soll, geben Sie ihm eine Klasse, z.B. <th class="custom-header"> und verwenden Sie .custom-header */
    background-color: transparent; /* Der th selbst ist transparent, die Farben kommen von innen */
    padding: 0; /* Standard-Padding des th entfernen */
    border: none; /* Optional: Standard-Rand des th entfernen */
    height: 80px; /* Beispielhöhe für die gesamte Kopfzeile, anpassen! */
    overflow: hidden; /* Verhindert, dass Inhalte über den Rand hinausgehen */
  }

  /* Der Wrapper, der Text- und Logo-Bereich nebeneinander legt */
  .header-content-wrapper {
    display: flex; /* Legt die Kindelemente nebeneinander */
    align-items: center; /* Zentriert die Inhalte vertikal */
    width: 100%; /* Füllt die gesamte Breite des th aus */
    height: 100%; /* Füllt die gesamte Höhe des th aus */
  }

  /* Der Bereich für den Text */
  .text-area {
    background-color: #3f68a6; /* Blauer Hintergrund für den Textbereich */
    color: white; /* Textfarbe */
    padding: 10px 15px; /* Innenabstand um den Text */
    font-size: 1.2em; /* Beispiel: Schriftgröße */
    font-weight: bold; /* Beispiel: Schrift fett */
    <!--flex-basis: 70%;--> /* Nimmt 70% der Breite ein. Hier anpassen für die Trennlinie! */
    flex-shrink: 0; /* Verhindert, dass dieser Bereich schrumpft */
    box-sizing: border-box; /* Stellt sicher, dass Padding in die Breite eingerechnet wird */
    display: flex; /* Für vertikale Zentrierung des Textes selbst, falls notwendig */
    align-items: center;
  }

  /* Optional: Eine vertikale Trennlinie zwischen blau und weiß */
  .text-area::after {
    content: '';
    display: block;
    <!--width: 1px;--> /* Breite der Linie */
    height: 80%; /* Höhe der Linie relativ zum Eltern-Container */
    background-color: white; /* Farbe der Linie */
    <!--margin-left: 0px;--> /* Abstand zur Schrift */
    /* position: relative; right: -1px; /* Kann für Pixelgenauigkeit nötig sein */
  }

  /* Der Bereich für das Logo */
  .logo-area {
    background-color: white; /* Weißer Hintergrund für den Logo-Bereich */
    flex-grow: 1; /* Nimmt den gesamten restlichen Platz ein */
    display: flex; /* Zum Zentrieren des Logos innerhalb dieses Bereichs */
    justify-content: flex-end; /* Logo am rechten Rand ausrichten */
    align-items: center; /* Vertikale Zentrierung des Logos */
    padding: 10px; /* Optional: Innenabstand um das Logo */
    box-sizing: border-box;
  }

  /* Das Bild selbst */
  .logo-area img.database-image { /* Spezifischer Selektor für Ihr Bild */
    max-height: 100%; /* Stellt sicher, dass das Logo nicht über den Bereich hinausragt */
    width: auto; /* Behält das Seitenverhältnis bei */
    max-width: 150px; /* Beispiel: Maximale Breite des Logos, anpassen! */
    /* Die ursprünglichen inline-Styles sollten nun hierher verschoben werden */
    margin: 0; /* Margins entfernen, da Flexbox das Layout übernimmt */
    border: none; /* Border entfernen */
    padding: 0; /* Padding entfernen */
    float: none; /* Wichtig: float entfernen, da Flexbox verwendet wird */
    display: block; /* Entfernt zusätzlichen Platz unter dem Bild */
  }

  /* Stellen Sie sicher, dass andere Styles für th nicht in Konflikt stehen */
  /* Wenn Sie globale th-Styles haben, müssen Sie dies möglicherweise überschreiben oder spezifischer gestalten */
</style>