* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }


  body {
  height: 100vh;
  background-image: url("HintergrundBild.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  }




h1 {
  text-align: center;
  margin: 0 0 20px;
  color: #ffffff;

}

.topbar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.topbar label {
  font-weight: bold;
  font-size: 25px;
  color: #ffffff;
}

.topbar input[type="date"] {
  padding: 6px 8px;
  border: 1px solid #064fd6;
  border-radius: 6px;
  font-size: 18px;
}



  .home-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background-color: #266bf5;
  color: #ffffff;
  font-weight: bold;
  cursor: pointer;
}



.del-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background-color: #f70703; /* Hintergrundfarbe (Rot) */
  color: #ffffff;            /* Schriftfarbe (Weiß) */
  font-weight: bold;
  cursor: pointer;           /* Mauszeiger als Hand */
}

.del-btn:hover {
  background-color: #fd6767; /* Hover-Farbe (dunkleres Rot) */
  color: #fff;               /* Schriftfarbe beim Hover */
}

.home-btn:hover {
background-color: #7583fc; /* Farbe beim Hover */
}



.team-name-wrapper {
  margin: 0;
  padding: 0;
}

.team-name-input {
  width: 100%;
  font-size: 32px;
  font-weight: 700;
  border: none;
  outline: none;
  background: transparent;
  text-align: center;
  padding: 0;
  margin: 0;
  color: #1c78ce;
}

.team-name-input::placeholder {
  font-size: 20px;
color: #002066;
}




.tables {
  display: flex;              /* Team 1, VS, Team 2 nebeneinander */
  justify-content: center;    /* horizontal mittig */
  align-items: center;        /* vertikal zentriert zur gesamten Kartenhöhe */
  gap: 10px;                  /* Abstand zwischen den Elementen */
}


.team-card {
  width: 500px;
  background: #fff;
  border: 1px solid #dde6f2;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
}

.team-card h2 {
  margin: 12px;
  color: #003366;
  text-align: center;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

thead th {
  background: #e6f0ff;
  color: #003366;
  padding: 8px;
  font-weight: bold;
  border-bottom: 1px solid #ccd6ea;
}

tbody td {
  border-bottom: 1px solid #eef3fb;
  padding: 6px;
  font-size: 13px;
}

.col-name { width: 60%; text-align: left; padding-left: 10px; }
.col-birthday { width: 20%; text-align: center; padding-left: 10px; }
.col-score { width: 20%; text-align: center; padding-right: 10px; }

.name-cell { position: relative; }
.name-input {
  width: 95%;
  padding: 6px 8px;
  border: 1px solid #b7c3d9;
  border-radius: 6px;
  font-size: 13px;
}

.suggestions {
  position: absolute;
  top: 34px;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ccd6ea;
  border-radius: 6px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  display: none;
}

.suggestion-item {
  padding: 6px 8px;
  cursor: pointer;
  font-size: 13px;
}

.suggestion-item:hover,
.suggestion-item.active {
  background: #f0f6ff;
}

.summary {
  display: grid;
  grid-template-columns: 80% 20%;
  border-top: 1px solid #ccd6ea;
}

.summary-label {
  padding: 8px;
  font-weight: bold;
  color: #003366;
  border-top: 1px solid #eef3fb;
  text-align: left;
}

.summary-value {
  padding: 8px;
  text-align: center;
  border-top: 1px solid #eef3fb;
}

/* Fixe Höhe: Kopfzeile + 11 Spielerzeilen */
tbody tr { height: 32px; }



.vs-box {
  width: 40px;                /* Boxbreite */
  height: 40px;               /* Boxhöhe */
  display: flex;              /* Inhalt zentrieren */
  justify-content: center;
  align-items: center;
  border: 2px solid #5a77c5;     /* Rahmen */
  border-radius: 4px;         /* leicht abgerundet */
  font-weight: bold;
  background-color: #f9f9f9;  /* optional Hintergrund */
}



.promo-image-wrapper {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.promo-image-wrapper img {
  max-width: 100%;
  width: 300px;      /* optional – begrenzt die Größe */
  height: 85px;
  border-radius: 12px; /* optional */
  display: none;
}