#header {
      background: url("../../images/befehle.webp") no-repeat center;
      min-width: 100%;
      min-height: 400px;
      height: 30vh;
      background-size: cover;
      z-index: 0;
      display: flex;
      align-items: center;
      background-attachment: scroll;
  }

  html,
  body {
      height: 100%;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
  }

  body>section,
  body>.navbar,
  body>footer {
      flex-shrink: 0;
  }

  #contacts {
      flex: 1 0 auto;
  }

  .table-wrapper {
      background-color: rgba(30, 30, 30, 0.8);
      border-radius: 8px;
      overflow: hidden;
      margin-top: 1em;
  }

  #commandsTable {
      width: 100%;
      border-collapse: collapse;
      color: white;
  }

  #commandsTable th,
  #commandsTable td {
      padding: 15px;
      text-align: left;
      border: none;
      /* statt: border: 1px solid ... */
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  #commandsTable th {
      background-color: #2e2e2e;
      color: white;
      font-weight: bold;
      border-bottom: 2px solid #e0b800;
      /* gelbe Linie als Akzent */
  }

  #commandsTable th {
      background-color: #2e2e2e;
      color: white;
      font-weight: bold;
  }

  #commandsTable td:nth-child(2) {
      color: #e0b800;
      font-family: Consolas, monospace;
  }

  #commandsTable tbody tr:last-child td {
      border-bottom: none;
  }

  .search-container {
      position: relative;
      width: 50%;
      max-width: 500px;
      margin: 20px auto;
  }

  /* Hover-Effekt */
  tbody tr:hover {
      background-color: rgba(255, 255, 255, 0.05);
  }

  /* ----- Mobile Overrides (bis 768px) ----- */
  @media (max-width: 768px) {
      .search-container input {
          padding-left: 3rem;
          /* mehr Platz links fürs Icon */
      }

      .search-container .search-icon {
          left: 2rem;
          /* Icon weiter nach rechts schieben */
      }
  }

  .search-input {
      width: 100%;
      padding: 12px 12px 12px 40px;
      /* Platz für Icon links */
      font-size: 16px;
      border-radius: 6px;
      border: 2px solid #ccc;
      background-color: #1e1e1e;
      color: white;
      transition: border-color 0.3s;
      box-sizing: border-box;
  }

  .search-input:focus {
      outline: none;
      border-color: #e0b800;
  }

  .search-icon {
      position: absolute;
      top: 50%;
      left: 12px;
      transform: translateY(-50%);
      color: #aaa;
      font-size: 16px;
      pointer-events: none;
  }

  /* --- Mobile‐Optimierungen ab max-width 768px --- */
  @media (max-width: 768px) {

      /* Suchleiste auf volle Breite */
      .search-container {
          width: 100% !important;
          max-width: none !important;
          padding: 0 1em;
      }

      /* Tabelle soll nicht mehr abschnitten */
      .table-wrapper {
          overflow: visible !important;
      }

      /* In der Kopfzeile und den Zellen die dritte Spalte (Beschreibung) verstecken */
      #commandsTable th:nth-child(3),
      #commandsTable td:nth-child(3) {
          display: none;
      }

      /* Zeilen klickbar machen */
      #commandsTable tbody tr {
          cursor: pointer;
      }

      /* Stil für eingefügte Beschreibung‐Zeile */
      .description-row td {
          padding: 12px 15px;
          background-color: #292929;
          color: #fff;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }
  }