/* ============================================================================
   SPECTATOR.CSS – Zuschaueransicht (AUFGERÄUMT & STABIL)
   Funktioniert mit TwentySeventeen + Elementor
   ============================================================================ */

/* ===============================
   Grundlayout
   =============================== */

.tm-spectator-toolbar {
  margin-bottom: 1rem;
}

.tm-tabs {
  margin-bottom: 0.5rem;
}

/* ===============================
   Tabs – gut lesbar
   =============================== */

.tm-tab-button {
  border: 1px solid #bbb;
  background: #e4e6eb;
  color: #222;
  padding: 8px 18px;
  margin-right: 6px;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  font-weight: 500;
}

.tm-tab-button:hover {
  background: #d6dae0;
  color: #000;
}

.tm-tab-active {
  background: #ffffff;
  color: #000;
  border-bottom: 1px solid #ffffff;
  font-weight: 700;
}

/* ===============================
   Tab-Container
   =============================== */

.tm-tab-content {
  display: none;
  border: 1px solid #ccc;
  border-top: none;
  padding: 12px;
}

.tm-tab-content-active {
  display: block;
}

/* ===============================
   Tabellen – allgemein
   =============================== */

.tm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  table-layout: fixed;
}

.tm-table th,
.tm-table td {
  border-bottom: 1px solid #ddd;
  padding: 6px 8px;
  text-align: left;
  vertical-align: middle;
}

/* ===============================
   Spaltenbreiten – Spiele
   =============================== */

/* Zeit */
.tm-table th:nth-child(2),
.tm-table td:nth-child(2) {
  width: 120px;
  white-space: nowrap;
}

/* Runde – mit Abstand zur Zeit */
.tm-table th:nth-child(3),
.tm-table td:nth-child(3) {
  width: 160px;          /* etwas breiter */
  white-space: nowrap;
  padding-left: 40px;    /* ← DAS ist der sichtbare Abstand */
}


/* Gruppe */
.tm-table th:nth-child(4),
.tm-table td:nth-child(4) {
  width: 80px;
  text-align: center;
}

/* Teamnamen */
.tm-table th:nth-child(5),
.tm-table td:nth-child(5),
.tm-table th:nth-child(7),
.tm-table td:nth-child(7) {
  width: 30%;
  white-space: nowrap;
}

/* Ergebnis */
.tm-table th:nth-child(6),
.tm-table td:nth-child(6) {
  width: 90px;
  text-align: center;
  font-weight: 600;
}

/* Status */
.tm-table th:nth-child(8),
.tm-table td:nth-child(8) {
  width: 110px;
  text-align: center;
}

/* ===============================
   Gruppen-Tabellen
   =============================== */

.tm-standings th,
.tm-standings td {
  text-align: left;
}

.tm-standings th:nth-child(3),
.tm-standings th:nth-child(4),
.tm-standings td:nth-child(3),
.tm-standings td:nth-child(4) {
  text-align: center;
}

/* ===============================
   THEME-AUSBRUCH (TwentySeventeen / Elementor)
   =============================== */

/* Root: bricht aus dem Theme aus */
#tm-spectator-root {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}

/* Innerer Container: zentriert & begrenzt */
.tm-spectator-inner {
  max-width: 1200px;   /* 👈 HIER feinjustieren */
  margin: 0 auto;
  padding: 0 16px;
}

/* Tabelle füllt den Container */
.tm-spectator-inner .tm-table {
  width: 100%;
}

/* ===============================
   Responsive
   =============================== */

@media (max-width: 768px) {
  .tm-table {
    font-size: 0.9rem;
  }

  .tm-tab-button {
    padding: 6px 12px;
    font-size: 0.9rem;
  }
}

/* ===============================
   Zuschauer – Spielnummer-Spalte fixieren
   =============================== */

/* Erste Spalte (laufende Nummer) */
#tm-spectator-root .tm-table th:first-child,
#tm-spectator-root .tm-table td:first-child {
  width: 42px;              /* kompakt */
  text-align: right;
  padding-right: 10px;
  color: #666;
  font-variant-numeric: tabular-nums;
}

/* Zeit-Spalte etwas Luft nach links */
#tm-spectator-root .tm-table th:nth-child(2),
#tm-spectator-root .tm-table td:nth-child(2) {
  padding-left: 8px;
}

/* Tabs bündig an Content (kein "schwebender" Abstand) */
.tm-tabs { margin-bottom: 0; }
.tm-tab-content { border-top: none; margin-top: 0; padding-top: 12px; }

/* Runde-Blöcke im Spiele- und Gruppen-Tab */
.tm-round-block { margin: 18px 0 28px; }
.tm-round-title {
  margin: 0 0 10px;
  font-size: 1.15rem;
  font-weight: 700;
  border-bottom: 2px solid #e6e6e6;
  padding-bottom: 6px;
}
.tm-group-title {
  margin: 14px 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
}

/* Standings-Zahlen sauber ausrichten */
.tm-standings th.tm-num,
.tm-standings td.tm-num {
  text-align: center;
  white-space: nowrap;
  width: 110px;
}

/* Nummern-/Zeitspalten sauber */
#tm-spectator-root .tm-col-num { width: 42px; text-align: right; padding-right: 10px; color:#666; }
#tm-spectator-root .tm-col-time { width: 130px; white-space: nowrap; }
#tm-spectator-root .tm-col-group { width: 70px; text-align:center; }
#tm-spectator-root .tm-col-score { width: 90px; text-align:center; font-weight: 600; }
#tm-spectator-root .tm-col-status { width: 110px; text-align:center; }

/* Zeit mit <br> soll gut aussehen */
#tm-spectator-root .tm-col-time br { line-height: 1.2; }


/* ===============================
   Gruppenansicht – clean & professionell
   =============================== */

.tm-round-block {
  margin-bottom: 36px;
}

.tm-group-title {
  margin: 16px 0 8px;
  font-size: 1rem;
  font-weight: 700;
}

.tm-standings {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 0.95rem;
}

.tm-standings th {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: #666;
  border-bottom: 2px solid #ddd;
  padding: 8px;
}

.tm-standings td {
  padding: 8px;
  border-bottom: 1px solid #eee;
}

.tm-standings tr:nth-child(even) {
  background: #fafafa;
}

.tm-standings .tm-num {
  text-align: center;
  width: 110px;
  font-weight: 600;
}


/* Trennlinie unter den Tabs (über der Tabelle / Vorrunde) */
#tm-spectator-root .tm-tab-content {
  border-top: 1px solid #ddd;
}

/* Team 1 rechtsbündig, näher am Stand */
#tm-spectator-root .tm-table td:nth-child(5),
#tm-spectator-root .tm-table th:nth-child(5) {
  text-align: right;
  padding-right: 16px;
}


/* Mehr Abstand zwischen Zeit und Runde */
#tm-spectator-root .tm-table td:nth-child(2),
#tm-spectator-root .tm-table th:nth-child(2) {
  padding-right: 64px;
}

/* ===============================
   Gruppenansicht – Spaltenbreiten
   =============================== */

/* Team-Spalte: viel Platz */
.tm-standings th:first-child,
.tm-standings td:first-child {
  width: 65%;
  text-align: left !important;
  padding-right: 12px;
}

/* Tore */
.tm-standings th:nth-child(2),
.tm-standings td:nth-child(2) {
  width: 20%;
  text-align: right;
  white-space: nowrap;
}

/* Punkte */
.tm-standings th:nth-child(3),
.tm-standings td:nth-child(3) {
  width: 15%;
  white-space: nowrap;
}


/* ===============================
   Zuschauer – Turnierüberschrift
   =============================== */

#tm-title {
  color: #af0505;
  font-weight: 550;
}

/* =========================================================
   MOBILE VIEW – Zuschaueransicht (≤ 768px)
   ========================================================= */

@media (max-width: 768px) {

  /* Tabelle auflösen */
  .tm-table,
  .tm-table thead,
  .tm-table tbody,
  .tm-table th,
  .tm-table tr,
  .tm-table td {
    display: block;
    width: 100%;
  }

  /* Tabellenkopf ausblenden */
  .tm-table thead {
    display: none;
  }

  /* Jede Zeile = Karte */
  .tm-table tr {
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
  }

  /* Zellen untereinander */
  .tm-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border: none;
    text-align: right;
    white-space: normal;
  }

  /* Label links */
  .tm-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #666;
    text-align: left;
    padding-right: 12px;
  }

  /* Spielnummer kleiner */
  .tm-col-num {
    justify-content: flex-end;
    font-size: 0.8rem;
    color: #999;
  }

  /* Ergebnis hervorheben */
  .tm-col-score {
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 800;
    padding: 10px 0;
  }

  /* Status kleiner */
  .tm-col-status {
    font-size: 0.85rem;
    color: #555;
  }

  /* Runde-Überschrift kompakter */
  .tm-round-title {
    font-size: 1.05rem;
    margin-bottom: 10px;
  }

  /* Tabs mobil */
  .tm-tabs {
    display: flex;
    gap: 6px;
  }

  .tm-tab-button {
    flex: 1;
    text-align: center;
    padding: 8px;
    font-size: 0.9rem;
  }
  
  /* Spielnummer nicht als eigene Zeile anzeigen */
  .tm-table td.tm-col-num {
    display: none;
  }  
}

/* ===============================
   Zuschauer – Tabs nebeneinander erzwingen
   =============================== */

.tm-tabs {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: 0;
}

/* Tabs dürfen NICHT umbrechen */
.tm-tab-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: auto !important;
  margin: 0;
}

/* =========================================================
   MOBILE – FINAL CLEAN CARD LAYOUT (≤ 768px)
   ========================================================= */
@media (max-width: 768px) {

  /* ========== GENERELL ========== */

  .tm-table,
  .tm-table tbody,
  .tm-table tr,
  .tm-table td {
    display: block;
    width: 100%;
  }

  .tm-table thead {
    display: none;
  }

  .tm-table tr {
    position: relative;
    margin-bottom: 18px;
    padding: 14px 14px 16px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
  }

  .tm-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border: none;
    font-size: 0.9rem;
    color: #222;
    white-space: nowrap;
  }

  .tm-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #666;
  }

  /* ========== SPIELE ========== */

  /* Spielnummer oben rechts */
  .tm-table tr .tm-col-num {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 0.75rem;
    color: #999;
    display: block;
  }

  .tm-col-num::before {
    content: "Spiel ";
  }

  /* Zeit / Runde / Gruppe ruhig */
  .tm-col-time,
  td[data-label="Runde"],
  .tm-col-group {
    font-size: 0.85rem;
    color: #555;
  }

  /* Stand als Zentrum */
  .tm-col-score {
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 800;
    padding: 10px 0;
    margin: 8px 0;
  }

  .tm-col-score::before {
    content: "Stand";
    position: absolute;
    left: 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
  }

  /* Teamzeilen etwas stärker */
  td[data-label="Team 1"],
  td[data-label="Team 2"] {
    font-weight: 500;
  }

  /* Status dezenter */
  .tm-col-status {
    font-size: 0.85rem;
    color: #555;
  }

  /* ========== GRUPPEN ========== */

  .tm-standings,
  .tm-standings tbody,
  .tm-standings tr,
  .tm-standings td {
    display: block;
    width: 100%;
  }

  .tm-standings thead {
    display: none;
  }

  .tm-standings tr {
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
  }

  /* Teamname oben */
  .tm-standings td:first-child {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Tore & Punkte als 2-Spalten-Zeile */
  .tm-standings td:nth-child(2),
  .tm-standings td:nth-child(3) {
    display: inline-flex;
    width: 48%;
    justify-content: space-between;
    font-size: 0.9rem;
    font-weight: 600;
  }

  .tm-standings td:nth-child(2)::before {
    content: "Tore";
    font-weight: 500;
    color: #666;
  }

  .tm-standings td:nth-child(3)::before {
    content: "Punkte";
    font-weight: 500;
    color: #666;
  }
}
/* =========================================================
   MOBILE PATCH – Spiele & Gruppen sauber trennen (≤ 768px)
   ========================================================= */
@media (max-width: 768px) {

  /* -----------------------------------------
     1) Desktop-Spalten-Paddings auf Mobile killen
     (verursacht "Runde eingerückt" usw.)
     ----------------------------------------- */
  #tm-spectator-root .tm-table td,
  #tm-spectator-root .tm-table th {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* -----------------------------------------
     2) Nur SPIELE: Card-Layout / Labels
     -> Ziel: SOLL-Spielkarte
     ----------------------------------------- */

  /* Spiele-Tabelle: nur die Match-Tabellen, nicht Standings */
  #tm-spectator-root #tmVorrunde .tm-table,
  #tm-spectator-root #tmVorrunde .tm-table tbody,
  #tm-spectator-root #tmVorrunde .tm-table tr,
  #tm-spectator-root #tmVorrunde .tm-table td {
    display: block;
    width: 100%;
  }

  #tm-spectator-root #tmVorrunde .tm-table thead {
    display: none;
  }

  #tm-spectator-root #tmVorrunde .tm-table tr {
    position: relative;
    margin-bottom: 18px;
    padding: 14px 14px 16px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
  }

  #tm-spectator-root #tmVorrunde .tm-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border: none;
    font-size: 0.9rem;
    color: #222;
    white-space: nowrap;
  }

  /* Standard-Label links */
  #tm-spectator-root #tmVorrunde .tm-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #666;
    margin-right: 12px;
  }

  /* Spielnummer oben rechts: "Spiel 1" mit sauberem Abstand */
  #tm-spectator-root #tmVorrunde .tm-table td.tm-col-num {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    text-align: center;
    display: block;
    padding: 0;
    font-size: 2rem;
    color: #999;
  }

  /* WICHTIG: Bei der Nummer KEIN normales Label anzeigen */
  #tm-spectator-root #tmVorrunde .tm-table td.tm-col-num::before {
    content: "Spiel ";
    font-weight: 600;
    color: #999;
    margin-right: -2px; /* Abstand zwischen "Spiel" und "1" */
  }

  /* Zeit / Runde / Gruppe nicht eingerückt, ruhiger */
  #tm-spectator-root #tmVorrunde .tm-table td.tm-col-time,
  #tm-spectator-root #tmVorrunde .tm-table td[data-label="Runde"],
  #tm-spectator-root #tmVorrunde .tm-table td.tm-col-group {
    font-size: 0.85rem;
    color: #555;
  }

  /* Stand zentriert und groß – Label "Stand" NICHT als ::before doppelt */
  #tm-spectator-root #tmVorrunde .tm-table td.tm-col-score {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    font-weight: 800;
    padding: 10px 0;
    margin: 8px 0;
  }

  /* Das normale data-label ausschalten */
  #tm-spectator-root #tmVorrunde .tm-table td.tm-col-score::before {
    content: "Stand";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    font-weight: 600;
    color: #666;
  }

  /* Extra Platz damit "Stand" und "0:0" nicht kleben */
  #tm-spectator-root #tmVorrunde .tm-table td.tm-col-score {
    padding-left: 70px;
  }

  /* -----------------------------------------
     3) Nur GRUPPEN: Standings als Team-Card
     -> KEIN "Spiel" oben rechts
     -> Teamname MUSS sichtbar sein
     ----------------------------------------- */

  /* Gruppen-Tabelle separat behandeln */
  #tm-spectator-root #tmGroupTables .tm-standings,
  #tm-spectator-root #tmGroupTables .tm-standings tbody,
  #tm-spectator-root #tmGroupTables .tm-standings tr,
  #tm-spectator-root #tmGroupTables .tm-standings td {
    display: block;
    width: 100%;
  }

  #tm-spectator-root #tmGroupTables .tm-standings thead {
    display: none;
  }

  #tm-spectator-root #tmGroupTables .tm-standings tr {
    position: relative;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
  }

  /* WICHTIG: Falls irgendwo "Spiel" per ::before an tr hängt, hier hart aus */
  #tm-spectator-root #tmGroupTables .tm-standings tr::before {
    content: none !important;
    display: none !important;
  }

  /* Teamname wieder sichtbar + eine Zeile */
  #tm-spectator-root #tmGroupTables .tm-standings td:first-child {
    display: block;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    color: #222;
    margin-bottom: 14px;
    white-space: nowrap;
  }

  /* Tore / Punkte als 2 Spalten */
  /* Container-Zeile */
  #tm-spectator-root #tmGroupTables .tm-standings tr {
    text-align: center;
  }

  /* Tore + Punkte als gemeinsame Einheit */
  #tm-spectator-root #tmGroupTables .tm-standings td:nth-child(2),
  #tm-spectator-root #tmGroupTables .tm-standings td:nth-child(3) {
    display: inline-flex;
    justify-content: center;
    gap: 6px;
    width: auto;
    margin: 0 10px;
    font-weight: 700;
  }

  #tm-spectator-root #tmGroupTables .tm-standings td:nth-child(2)::before {
    content: "Tore";
    font-weight: 600;
    color: #666;
    margin-right: 10px;
  }

  #tm-spectator-root #tmGroupTables .tm-standings td:nth-child(3)::before {
    content: "Punkte";
    font-weight: 600;
    color: #666;
    margin-right: 10px;
  }
}

@media (max-width: 768px) {

  /* Mehr Abstand zwischen Tore und Punkte */
  #tm-spectator-root #tmGroupTables .tm-standings td:nth-child(2) {
    margin-right: 4%;
  }

}
@media (max-width: 768px) {

  /* Spielnummer oben rechts – EINZIGE Quelle */
  #tm-spectator-root #tmVorrunde .tm-table td.tm-col-num {
    position: absolute;
    top: 10px;
    right: 12px;
    display: block;
    font-size: 0.75rem;
    color: #999;
    padding: 0;
  }

  /* data-label für Spielnummer ausschalten */
  #tm-spectator-root #tmVorrunde .tm-table td.tm-col-num::before {
    content: "Spiel ";
    font-weight: 600;
    margin-right: 6px;
  }
}
@media (max-width: 768px) {

  /* Mehr Luft unter "Spiel 1" */
  #tm-spectator-root #tmVorrunde .tm-table tr {
    padding-top: 32px; /* vorher ~14px */
  }

}

@media (max-width: 768px) {

  /* Container für Team 1 – Stand – Team 2 */
  #tm-spectator-root #tmVorrunde .tm-table tr {
    display: flex;
    flex-direction: column;
  }

  /* Neue Ergebnis-Zeile */
  #tm-spectator-root #tmVorrunde .tm-table tr {
    --result-gap: 10px;
  }

  /* Team 1, Stand, Team 2 in eine Reihe */
  #tm-spectator-root #tmVorrunde .tm-table td[data-label="Team 1"],
  #tm-spectator-root #tmVorrunde .tm-table td.tm-col-score,
  #tm-spectator-root #tmVorrunde .tm-table td[data-label="Team 2"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    white-space: nowrap;
  }

  /* Ergebnis-Zeile selbst */
  #tm-spectator-root #tmVorrunde .tm-table td.tm-col-score {
    margin: 0 var(--result-gap);
    font-size: 1.3rem;
    font-weight: 800;
  }

  /* Labels "Team 1 / Team 2 / Stand" ausblenden */
  #tm-spectator-root #tmVorrunde .tm-table
  td[data-label="Team 1"]::before,
  #tm-spectator-root #tmVorrunde .tm-table
  td[data-label="Team 2"]::before,
  #tm-spectator-root #tmVorrunde .tm-table
  td.tm-col-score::before {
    content: none;
  }

  /* Ganze Zeile zentrieren */
  #tm-spectator-root #tmVorrunde .tm-table tr {
    text-align: center;
  }

}

@media (max-width: 768px) {
  #tm-spectator-root #tmVorrunde .tm-table td.tm-col-num {
    position: absolute;
    top: 10px;
    right: 12px;          /* oder left / center */
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
  }

  #tm-spectator-root #tmVorrunde .tm-table td.tm-col-num::before {
    content: "Spiel";
    font-size: 0.9rem;
    margin-right: -6px;
    color: #666;
  }
}