body {
  font-family: "Open Sans", sans-serif;
}



table.comicGreen {
    font-family: sans-serif, cursive, sans-serif;
    border: 2px solid #4F7849;
    background-color: #EEEEEE;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    max-width: 60ch; /* 60 Zeichen Tabellengröße (ch = "character unit") */
    transform: translateX(64px); /* verschiebt tabelle 8 zeichen nach rechts */
  }
  table.comicGreen td, table.comicGreen th {
    border: 1px solid #4F7849;
    padding: 3px 2px;
    
  }
   /* Unterschiedliche Breiten in Prozent */
 table.comicGreen th.spalte1 {
    width: 25%; /* Spalte 1 Spielnummer nimmt 10% der Tabellenbreite ein */
    color:#000000; 
  }
table.comicGreen th.spalte2 {
    width: 25%;     /* Spalte 2 Paarung nimmt 30% der Tabellenbreite ein */
    color:#000000;
  }
table.comicGreen th.spalte3 {
    width: 25%; /* Spalte 3  Spiel1 nimmt 30% der Tabellenbreite ein */
    color:#000000;
  }
table.comicGreen th.spalte4 {
    width: 15%; /* Spalte 4 Spiel2 nimmt 20% der Tabellenbreite ein */
    color:#000000;
  }
  table.comicGreen tbody td {
    font-size: 14px;
    font-weight: normal;
    color: #000000;
  }
  table.comicGreen tr:nth-child(even) {
    background: #CEE0CC;
  }
  table.comicGreen thead {
    background: #4F7849;
  }
  table.comicGreen thead th {
    font-size: 16px;
    color: #ffffff;
    text-align: left;
  }
  table.comicGreen tfoot td {
    font-size: 21px;
  }
  button[type=button] {
    background-color: rgb(229, 234, 229);
    cursor: pointer;
    width: 10em;
    padding: .3em 0;
    border-radius: 0.7em;
    display: inline-flex; 
    margin: 10px auto;
    justify-content: center;
    
}

button[type=button]:hover {
    background-color: rgba(123, 87, 2, 0.881);
    box-shadow: 2px 2px 2px grey;
}