/* Standard-Schrift für Desktop */

body

 {
    margin: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font: 0.7em sans-serif;
    font-style: normal;
    background-color: #e9e7e7;
    color: #525252;
   
 }

h1
 {
    font: 1em sans-serif;
    margin-top: 10%;
    display: flex;
    justify-content: left;
    align-items: center;
    color: #525252;
}

/* Bild passt sich der Breite des Containers an */
  img.responsive {
    max-width: 100%; /* nie breiter als der Container */
    height: auto;    /* Höhe proportional anpassen */
    display: block;  /* entfernt kleine Lücken unter dem Bild */
  }

 table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px auto;
      font-family: Arial, sans-serif;
      font-weight: 400;
    }
    th, td {
      border: 1px solid #333;
      padding: 5px;
      text-align: center;
    }
    th {
      background-color: #c2c1c1;
    }
    tr:nth-child(even) {
      background-color: #e6e3e3;
    }
a {
    font: 1em sans-serif;          /* Schriftgröße vergrößern */
    color: #525252c4;            /* Linkfarbe ändern (Blau) */
    text-decoration: none;     /* Unterstreichung entfernen */
    font-weight: bold;         /* Fett darstellen */
}

.mannschaften {
  width: 100%;
}

.wrap {
  width: 100%;
}

    /* Für kleine Bildschirme untereinander anzeigen */
@media (max-width: 768px) {
  table {
    font-size: 12px; /* Schrift kleiner */
  }
  th, td {
    padding: 4px; /* Weniger Abstand */
  }

.container {
            flex-direction: column;
        }
        .image-container, .table-container {
            height: auto;
        }
    }

    /* Für kleine Bildschirme untereinander anzeigen */
@media (max-width: 900px) {
  table {
    width: 100%;
    font-size: 12px; /* Schrift kleiner */
  }
  th, td {
    padding: 4px; /* Weniger Abstand */
  }

.container {
            flex-direction: column;
        }
        .image-container, .table-container {
            height: auto;
        }
    }

/* Ab Desktop-Größe (z. B. ab 1024px) anzeigen */
@media screen and (min-width: 1024px) {

  body{
    margin: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font: 1em sans-serif;
    font-style: normal;
    background-color: #e9e7e7;
   
 }

  img {
    width: 20%;
}

  h1 {
    font: 1.3em sans-serif;
    margin-top: 0;
    display: flex;
    justify-content: left;
    align-items: center;  
    margin-top: 5%;
    margin-bottom: auto;
}

.wrap {
  width: 40%;
}

  a {
    font: 1em sans-serif;          /* Schriftgröße vergrößern */
    color: #525252c4;            /* Linkfarbe ändern (Blau) */
    text-decoration: none;     /* Unterstreichung entfernen */
    font-weight: bold;         /* Fett darstellen */
}

.mannschaften {
  width: 20%;
}

 table {
    font-size: 18px; /* Schrift kleiner */
  }
  th, td {
    padding: 4px; /* Weniger Abstand */
  }

.gametable {
  width: 50%;
  
}

}