/* 1. Variablen zentral definieren */
:root {
  --haupt-farbe: rgba(0, 139, 123, 1);
  --haupt-farbe-40: rgba(0, 139, 123, 0.4);
  --haupt-farbe-25: rgba(0, 139, 123, 0.25);
  --haupt-farbe-20: rgba(0, 139, 123, 0.2);
  --haupt-farbe-10: rgba(0, 139, 123, 0.1);
  --haupt-farbe-akzent: rgba(90, 135, 130, 1);

  --zweit-farbe: rgba(185, 47, 137, 1);
  --zweit-farbe-40: rgba(185, 47, 137, 0.4);
  --zweit-farbe-25: rgba(185, 47, 137, 0.25);
  --zweit-farbe-20: rgba(185, 47, 137, 0.2);
  --zweit-farbe-10: rgba(185, 47, 137, 0.1);
  --zweit-farbe-akzent: rgba(187, 118, 163, 1);
}

/* Styles, die NUR für den Druck gelten */
@media print {
  .no-print {
    display: none !important;
  }
}
/* ----------------------------------- */

h1 {
  font-size: clamp(0.5rem, 3vh, 4rem); /* Skaliert zw. 0.5rem und 4rem */
}

h2 {
  font-size: clamp(0.3rem, 2vh, 3rem);
}

h3 {
  font-size: clamp(0.15rem, 1vh, 2rem);
}

body {
  font-family: sans-serif;
  margin: 1rem;
  background: #f9f9f9;
  padding-bottom: 5px; /* Höhe des Footers */
}

.center-flex-container {
  display: flex;
  justify-content: center;
}

.message-box {
  text-align: center;
  font-size: 2rem;
  background-color: var(--haupt-farbe-25);
  border: none;
  padding: 1rem;
  border-radius: 5px;
  margin-bottom: 1rem;
}

input {
  padding: 6px;
  border: 1px solid #bbb;
  border-radius: 4px;
  text-align: center;
  background-color: #fff;
}

button {
  margin: 0.5rem 0.5rem;
  padding: 0.4rem 1rem;
  background-color: var(--haupt-farbe);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.navigation_button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.5rem 1.5rem;
  padding: 1rem 1rem;
  background-color: var(--haupt-farbe);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: clamp(300px, 40vw, 500px);
  height: clamp(10px, min(5vh, 5vw), 500px);
  font-size: clamp(0.5em, 3vh, 1em);
}

.button-container {
  text-align: center;
  border: 1px solid #ccc;
  background: white;
  padding: 0.5rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
  border-radius: 6px;
}

.logout-button {
  background-color: var(--zweit-farbe);
}

form {
  border: 1px solid #ccc;
  background: white;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border-radius: 6px;
}

<!------------------------
  Styling
  des
  Drag-and-Drop
  für
  den
  Spielplan
  -----------------------------
  > #matchList {
  list-style-type: none;
  padding-left: 0;
}

.match-item {
  cursor: grab;
  padding: 10px;
  background: #f0f0f0;
  border: 1px solid #ccc;
  margin-bottom: 4px;
  border-radius: 6px;
  transition: all 0.2s;
}

.sortable-ghost {
  opacity: 0.4;
  background: #d0e6ff;
}

<!------------------------ Styling der Result-Entry-Seite ----------------------------->
/* Grundlayout */
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 2rem;
  color: #333;
}

/* Container für jede Gruppe */
.group-container {
  margin-bottom: 2vh;
  padding: 1vh 1vw 1vh 1vw;
  background-color: #fff;
  border-left: 6px solid var(--haupt-farbe);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Flexbox für Spieltabellen nebeneinander */
.group-tables {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  width: 100%;
  justify-content: center; /* Zentriert die Tabellen */
  height: auto;
}

/* Jede Spiel-Tabelle in der Turnierleitungsansicht*/
.match-form {
  background-color: #fafafa;
  padding: 0.5rem;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  flex: 0 0 14%; /* Keine Flex-Wachstum/Shrink, feste Breite */
  max-width: 16em;
  height: auto;
}

/* Jede Spiel-Tabelle in der Schiedsrichteransicht*/
.match-form-referee {
  background-color: #fafafaf1;
  padding: 0.5rem;
  border-radius: 8px;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.241);
  flex: 0 0 auto;
  width: clamp(50%, 100%, 720px);
  height: auto;
  font-size: clamp(1em, 2em, 2vh);
  font-weight: bold;

  margin-bottom: 10vh;
}

/* Tabellen-Design */
.table-wrapper.locked {
  opacity: 0.33;
  pointer-events: none; /* verhindert auch Hover/Cursor */
  position: relative;
  height: 100%;
}

.table-wrapper.unlocked {
  opacity: 1;
  pointer-events: auto;
  height: 100%;
}

.entry-grid {
  display: grid;
  height: 100%;
  width: 100%;
  border: 0px solid #ccc;

  grid-template-columns: 1fr;
  grid-template-rows: 7fr 1fr;

  font-size: 1em;
}

.reults-grid {
  display: grid;
  height: 100%;
  width: 100%;
  border: 0px solid #ccc;

  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr 1fr 1fr 1fr 1fr;
}

.results-red {
  border-radius: 4px;
  padding: 5px;
  background-color: var(--zweit-farbe-20) !important;
  border: 1px solid var(--zweit-farbe) !important;
  margin: 0 1vw;
}

.results-green {
  border-radius: 4px;
  padding: 5px;
  background-color: var(--haupt-farbe-20) !important;
  border: 1px solid var(--haupt-farbe) !important;
  margin: 0 1vw;
}

.admin-entry-grid-without-button {
  display: grid;
  height: 100%;
  width: 100%;
  border: 0px solid #ad3333;

  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.entry-grid-without-button {
  display: grid;
  height: 100%;
  width: 100%;
  border: 0px solid #ad3333;

  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-wrapper-ko {
  border: 0px solid black;
  display: grid;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;

  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr 1fr;

  font-size: 1em;
}

.entry-grid-ko {
  display: grid;
  height: 90%;
  width: 90%;
  border: 0px solid #ad3333;
  margin: 0 auto;

  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr 1fr 1fr 1fr 1fr;
}

.cell {
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.1vh solid #ccc;
  font-size: 1em;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.colored-cell {
  background: #e9f0fa;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.1vh solid #ccc;
  font-size: 1em;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.colored-cell-ko {
  background: var(--haupt-farbe-10);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.1vh solid #ccc;
  font-size: 1em;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inputfelder */
.match-form input[type="number"],
.match-form-referee input[type="number"] {
  width: 66%;
  height: 66%;
  padding: 6px;
  border: 1px solid #bbb;
  border-radius: 4px;
  text-align: center;
  background-color: #fff;
  font-size: 1em;
}

.match-form input[type="number"]:focus,
.match-form-referee input[type="number"]:focus {
  outline: none;
  border-color: var(--haupt-farbe);
  box-shadow: 0 0 3px var(--haupt-farbe);
}

.red-input {
  width: 66%;
  height: 66%;
  border-radius: 4px;
  background-color: var(--zweit-farbe-20) !important;
  border: 1px solid var(--zweit-farbe) !important;
  color: var(--zweit-farbe) !important;
  box-sizing: border-box;
}

.green-input {
  width: 66%;
  height: 66%;
  border-radius: 4px;
  background-color: var(--haupt-farbe-20) !important;
  border: 1px solid var(--haupt-farbe) !important;
  color: #006622 !important;
  box-sizing: border-box;
}

.neutral-input {
  width: 66%;
  height: 66%;
  border-radius: 4px;
  background-color: #ffffff !important;
  border: 1px solid #ccc !important;
  color: #000000 !important;
  box-sizing: border-box;
}

/* Speichern-Button */
/* Speichern-Button-Container */
.entry-grid-button {
  display: grid;
  height: 100%;
  width: 100%;
  border: 0px solid var(--haupt-farbe);
  display: flex;
  align-items: center;
  justify-content: center;
}
.entry-grid-button button {
  width: 33%;
  height: 66%;
  font-size: 1em;
  background-color: var(--haupt-farbe);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.virtual-entry-grid-button button {
  width: 66%;
  height: 66%;
  font-size: 1em;
  background-color: var(--haupt-farbe-20);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.admin-entry-grid-button {
  display: grid;
  height: 100%;
  width: 100%;
  border: 0px solid #45ad33;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
}
.admin-entry-grid-button button {
  width: 66%;
  height: 66%;
  font-size: 1em;
  background-color: var(--haupt-farbe);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

<!------------------------ ----------------------------- > table {
  height: 100%;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* Wichtig für gleichmäßige Spalten */
}

th,
td {
  min-width: 6em;
  max-width: 12em;
  height: 0.25vh;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
}

.without-bottom-border {
  border-bottom: none;
}
.without-top-border {
  border-top: none;
}
.without-top-bottom-border {
  border-top: none;
  border-bottom: none;
}

.without-left-right-border {
  border-left: none !important;
  border-right: none !important;
  height: 0.1em;
}

th.marquee,
td.marquee {
  height: 1.5em; /* gewünschte Höhe */
  vertical-align: middle; /* optional, damit Inhalt vertikal zentriert ist */
  max-width: 100px; /* oder was sinnvoll ist */
  overflow: hidden;
  position: relative;
  padding: 0; /* optional */
}

.marquee {
  overflow: hidden;
  width: 100%;
  height: 100%; /* Test mit fester Höhe, anpassen an deine Bedürfnisse */

  display: flex; /* Macht .marquee zu einem Flex-Container */
  justify-content: center; /* Zentriert Flex-Items (hier: .marquee-viewport) horizontal */
  align-items: center; /* Optional: Zentriert Flex-Items vertikal (falls .marquee eine feste Höhe hat) */
}
.marquee-viewport {
  overflow: hidden;
  line-height: 2.5em; /* Oder deine gewünschte Höhe */
  width: 80%;
  height: 100%; /* Wenn .marquee eine feste Höhe hat, sonst anpassen */

  display: flex;
  align-items: center; /* Vertikale Zentrierung (falls der Text kleiner als die Höhe ist) */
}

.marquee-inner {
  white-space: nowrap;
  display: inline-block; /* Oder flex, je nachdem, was besser passt */
  flex-shrink: 0; /* Verhindert Schrumpfung des Textes */
}

/* Für sehr kleine Bildschirme */
@media (max-width: 720px) {
  th,
  td {
    font-size: 1vh;
    min-width: 0.01em;
    max-width: 3em;
  }
  button {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.4rem 1rem;
    background-color: var(--haupt-farbe);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
  }
}