/* =====================================================================
   Schritt 3.21 – Lesbarkeit, optische Korrekturen und Smartphone-Layouts
   ===================================================================== */

/* ---------------------------------------------------------------------
   Ablaufnavigation: deutlich größer und immer lesbar
   --------------------------------------------------------------------- */

body.premium-site.app-tournament-admin
  .tournament-workflow {
  display: grid !important;
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    ) !important;
  gap: 9px !important;
  width: 100%;
  padding: 10px !important;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--design-primary) 20%,
      rgba(129, 164, 198, 0.18)
    ) !important;
  border-radius: 18px !important;
  background:
    color-mix(
      in srgb,
      var(--design-surface) 94%,
      transparent
    ) !important;
  box-shadow:
    0 14px 34px
    rgba(8, 25, 45, 0.16) !important;
  overflow: visible !important;
}

body.premium-site.app-tournament-admin
  .tournament-workflow a {
  display: grid !important;
  grid-template-columns:
    34px
    minmax(0, 1fr) !important;
  gap: 9px !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 52px !important;
  padding:
    8px
    11px !important;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--design-primary) 16%,
      rgba(129, 164, 198, 0.18)
    ) !important;
  border-radius: 13px !important;
  color:
    color-mix(
      in srgb,
      var(--design-primary) 76%,
      #18324d
    ) !important;
  background:
    color-mix(
      in srgb,
      var(--design-primary) 7%,
      var(--design-surface)
    ) !important;
  font-size: 0.76rem !important;
  font-weight: 950 !important;
  line-height: 1.2;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: normal;
  word-break: keep-all;
}

body.premium-site.app-tournament-admin
  .tournament-workflow a:hover,
body.premium-site.app-tournament-admin
  .tournament-workflow a:focus-visible {
  color: #fff !important;
  border-color: transparent !important;
  background:
    linear-gradient(
      125deg,
      var(--design-primary),
      var(--design-secondary)
    ) !important;
  box-shadow:
    0 12px 26px
    color-mix(
      in srgb,
      var(--design-primary) 24%,
      transparent
    ) !important;
}

body.premium-site.app-tournament-admin
  .tournament-workflow a span {
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  grid-row: auto !important;
  place-items: center !important;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--design-primary) 22%,
      transparent
    ) !important;
  border-radius: 11px !important;
  color: #fff !important;
  background:
    linear-gradient(
      145deg,
      var(--design-primary),
      var(--design-secondary)
    ) !important;
  font-size: 0.74rem !important;
  font-weight: 950 !important;
  box-shadow:
    0 7px 16px
    color-mix(
      in srgb,
      var(--design-primary) 18%,
      transparent
    );
}

body.premium-site.app-tournament-admin
  .tournament-workflow a:hover span,
body.premium-site.app-tournament-admin
  .tournament-workflow a:focus-visible span {
  border-color:
    rgba(255, 255, 255, 0.22) !important;
  background:
    rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  .tournament-workflow {
  border-color:
    rgba(129, 164, 198, 0.16) !important;
  background:
    rgba(13, 27, 44, 0.96) !important;
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  .tournament-workflow a {
  color: #e6f0fb !important;
  border-color:
    rgba(129, 164, 198, 0.17) !important;
  background: #172940 !important;
}

/* ---------------------------------------------------------------------
   Allgemein bessere kleine Überschriften im Dark Mode
   --------------------------------------------------------------------- */

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  :is(
    .eyebrow,
    .playing-field-block-heading span,
    .playing-field-block-heading small,
    .group-card-heading span,
    .playing-field-statistics span,
    .playing-field-select-field > span
  ) {
  color: #9eb2c9 !important;
}

/* ---------------------------------------------------------------------
   Gruppentabellen: kein Weiß-auf-Weiß und kein unnötiger Scrollbalken
   --------------------------------------------------------------------- */

body.premium-site.app-tournament-admin
  .group-grid {
  gap: 16px !important;
}

body.premium-site.app-tournament-admin
  .group-card {
  container-type: inline-size;
  min-width: 0;
  padding: 13px !important;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--design-primary) 18%,
      #d6e0e9
    ) !important;
  border-radius: 17px !important;
  background:
    color-mix(
      in srgb,
      var(--design-surface) 97%,
      #fff
    ) !important;
  overflow: hidden;
}

body.premium-site.app-tournament-admin
  .group-card-heading {
  min-height: 48px;
  margin:
    -13px
    -13px
    11px !important;
  padding:
    10px
    12px !important;
  border-bottom:
    1px solid
    color-mix(
      in srgb,
      var(--design-primary) 14%,
      #dbe4ec
    );
  color: #18324d !important;
  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--design-primary) 13%,
        var(--design-surface)
      ),
      color-mix(
        in srgb,
        var(--design-secondary) 8%,
        var(--design-surface)
      )
    ) !important;
}

body.premium-site.app-tournament-admin
  .group-card-heading span {
  color: #53687e !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.08em;
}

body.premium-site.app-tournament-admin
  .group-card-heading strong {
  display: grid !important;
  width: 36px !important;
  height: 36px !important;
  place-items: center !important;
  border:
    2px solid
    color-mix(
      in srgb,
      var(--design-primary) 28%,
      transparent
    ) !important;
  border-radius: 12px !important;
  color: #fff !important;
  background:
    linear-gradient(
      145deg,
      var(--design-primary),
      var(--design-secondary)
    ) !important;
  box-shadow:
    0 8px 18px
    color-mix(
      in srgb,
      var(--design-primary) 20%,
      transparent
    ) !important;
  font-size: 0.95rem !important;
}

body.premium-site.app-tournament-admin
  .group-card
  .ranking-table-wrapper {
  width: 100%;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.premium-site.app-tournament-admin
  .group-card
  .ranking-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 0.72rem !important;
}

body.premium-site.app-tournament-admin
  .group-card
  .ranking-table th {
  height: 35px;
  padding:
    7px
    6px !important;
  color: #53687e !important;
  background:
    color-mix(
      in srgb,
      var(--design-primary) 9%,
      var(--design-surface)
    ) !important;
  font-size: 0.58rem !important;
}

body.premium-site.app-tournament-admin
  .group-card
  .ranking-table td {
  height: 39px;
  padding:
    8px
    6px !important;
  color: #18324d !important;
  border-bottom-color:
    color-mix(
      in srgb,
      var(--design-primary) 10%,
      #dfe6ed
    ) !important;
  background: transparent !important;
  font-size: 0.70rem !important;
}

body.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  .ranking-position {
  width: 42px !important;
  color:
    color-mix(
      in srgb,
      var(--design-primary) 82%,
      #18324d
    ) !important;
  font-weight: 950 !important;
}

body.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  .ranking-team {
  min-width: 0 !important;
  color: #18324d !important;
  font-size: 0.74rem !important;
  font-weight: 900 !important;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

body.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  .ranking-points {
  width: 48px !important;
  color:
    color-mix(
      in srgb,
      var(--design-primary) 84%,
      #18324d
    ) !important;
  font-weight: 950 !important;
}

/* Platz 1 und 2 nur mit klarer Akzentlinie statt heller Vollfläche. */

body.premium-site.app-tournament-admin
  .large-group-overview:not(.neutral-group-overview)
  .group-card
  tbody
  tr:nth-child(-n + 2) {
  background:
    color-mix(
      in srgb,
      var(--design-success) 9%,
      var(--design-surface)
    ) !important;
  box-shadow:
    inset 4px 0 0
    var(--design-success);
}

body.premium-site.app-tournament-admin
  .wm-large-group-overview
  .group-card
  tbody
  tr:nth-child(3) {
  background:
    color-mix(
      in srgb,
      var(--design-warning) 10%,
      var(--design-surface)
    ) !important;
  box-shadow:
    inset 4px 0 0
    var(--design-warning);
}

/* Kleine Gruppenkarten zeigen nur die wichtigsten Spalten. */

@container (max-width: 560px) {
  body.premium-site.app-tournament-admin
    .group-card
    .ranking-table
    :is(
      th:nth-child(4),
      td:nth-child(4),
      th:nth-child(5),
      td:nth-child(5),
      th:nth-child(6),
      td:nth-child(6),
      th:nth-child(7),
      td:nth-child(7),
      th:nth-child(8),
      td:nth-child(8)
    ) {
    display: none !important;
  }

  body.premium-site.app-tournament-admin
    .group-card
    .ranking-table
    th:nth-child(1),
  body.premium-site.app-tournament-admin
    .group-card
    .ranking-table
    td:nth-child(1) {
    width: 42px !important;
  }

  body.premium-site.app-tournament-admin
    .group-card
    .ranking-table
    th:nth-child(3),
  body.premium-site.app-tournament-admin
    .group-card
    .ranking-table
    td:nth-child(3) {
    width: 48px !important;
  }

  body.premium-site.app-tournament-admin
    .group-card
    .ranking-table
    th:nth-child(9),
  body.premium-site.app-tournament-admin
    .group-card
    .ranking-table
    td:nth-child(9) {
    width: 48px !important;
  }
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  .group-card {
  border-color:
    rgba(129, 164, 198, 0.17) !important;
  background:
    linear-gradient(
      180deg,
      #111f31,
      #0d1929
    ) !important;
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  .group-card-heading {
  border-bottom-color:
    rgba(129, 164, 198, 0.14) !important;
  color: #eef5ff !important;
  background:
    linear-gradient(
      135deg,
      #1b3048,
      #162b3f
    ) !important;
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  .group-card-heading span {
  color: #a8bad0 !important;
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  .group-card
  .ranking-table th {
  color: #c9d8e8 !important;
  background: #1a2d43 !important;
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  .group-card
  .ranking-table td {
  color: #eef5ff !important;
  border-bottom-color:
    rgba(129, 164, 198, 0.12) !important;
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  :is(
    .ranking-team,
    .ranking-position,
    .ranking-points
  ) {
  color: #eef5ff !important;
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  .large-group-overview:not(.neutral-group-overview)
  .group-card
  tbody
  tr:nth-child(-n + 2) {
  background:
    color-mix(
      in srgb,
      var(--design-success) 13%,
      #111f31
    ) !important;
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  .wm-large-group-overview
  .group-card
  tbody
  tr:nth-child(3) {
  background:
    color-mix(
      in srgb,
      var(--design-warning) 14%,
      #111f31
    ) !important;
}

/* Auch kompakte Gruppentabellen im Turnierbaum kontrastfest. */

body.premium-site.app-tournament-admin
  .bracket-group-card {
  color: #18324d !important;
  background:
    var(--design-surface) !important;
}

body.premium-site.app-tournament-admin
  .bracket-group-card h4 {
  color: #fff !important;
  background:
    linear-gradient(
      125deg,
      var(--design-primary),
      var(--design-secondary)
    ) !important;
}

body.premium-site.app-tournament-admin
  .bracket-group-card td {
  color: #18324d !important;
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  .bracket-group-card {
  color: #eef5ff !important;
  background: #111f31 !important;
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  .bracket-group-card td {
  color: #eef5ff !important;
}

/* ---------------------------------------------------------------------
   Spielplan-Zusammenfassung: vier gleichwertige Karten
   --------------------------------------------------------------------- */

body.premium-site.app-tournament-admin
  .playing-field-settings-readonly {
  display: grid !important;
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    ) !important;
  gap: 11px !important;
  align-items: stretch !important;
}

body.premium-site.app-tournament-admin
  .playing-field-settings-readonly
  .playing-field-statistics {
  display: contents !important;
}

body.premium-site.app-tournament-admin
  .playing-field-settings-readonly
  :is(
    .playing-field-select-field,
    .playing-field-statistics > div
  ) {
  display: grid !important;
  gap: 5px !important;
  min-width: 0;
  min-height: 112px;
  align-content: center !important;
  padding:
    14px
    15px !important;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--design-primary) 17%,
      #d7e0e9
    ) !important;
  border-radius: 15px !important;
  color: #18324d !important;
  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--design-primary) 7%,
        var(--design-surface)
      ),
      var(--design-surface)
    ) !important;
  box-shadow:
    0 10px 24px
    rgba(18, 58, 99, 0.08) !important;
}

body.premium-site.app-tournament-admin
  .playing-field-settings-readonly
  :is(
    .playing-field-select-field span,
    .playing-field-statistics span
  ) {
  color: #63768b !important;
  font-size: 0.66rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.055em;
  line-height: 1.25;
  text-transform: uppercase;
}

body.premium-site.app-tournament-admin
  .playing-field-settings-readonly
  :is(
    .playing-field-select-field strong,
    .playing-field-statistics strong
  ) {
  color:
    color-mix(
      in srgb,
      var(--design-primary) 82%,
      #18324d
    ) !important;
  font-size: 1.55rem !important;
  line-height: 1;
}

body.premium-site.app-tournament-admin
  .playing-field-settings-readonly
  .playing-field-select-field a {
  color:
    color-mix(
      in srgb,
      var(--design-primary) 82%,
      #18324d
    ) !important;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.35;
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  .playing-field-settings-readonly
  :is(
    .playing-field-select-field,
    .playing-field-statistics > div
  ) {
  color: #eef5ff !important;
  border-color:
    rgba(129, 164, 198, 0.16) !important;
  background:
    linear-gradient(
      145deg,
      #172940,
      #111f31
    ) !important;
  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  .playing-field-settings-readonly
  :is(
    .playing-field-select-field span,
    .playing-field-statistics span
  ) {
  color: #a7b9ce !important;
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  .playing-field-settings-readonly
  :is(
    .playing-field-select-field strong,
    .playing-field-statistics strong,
    .playing-field-select-field a
  ) {
  color: #eef5ff !important;
}

/* ---------------------------------------------------------------------
   Feld-Badge und Spielkarten: Feld 1 bleibt immer einzeilig
   --------------------------------------------------------------------- */

body.premium-site.app-tournament-admin
  .playing-field-card {
  gap: 12px !important;
  padding: 14px !important;
}

body.premium-site.app-tournament-admin
  .playing-field-card-topline {
  display: grid !important;
  grid-template-columns:
    auto
    minmax(0, 1fr) !important;
  gap:
    10px
    12px !important;
  align-items: start !important;
}

body.premium-site.app-tournament-admin
  .playing-field-name {
  display: inline-flex !important;
  width: max-content !important;
  min-width: max-content !important;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding:
    6px
    10px !important;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--design-primary) 25%,
      transparent
    ) !important;
  border-radius: 10px !important;
  color: #fff !important;
  background:
    linear-gradient(
      145deg,
      var(--design-primary),
      var(--design-secondary)
    ) !important;
  box-shadow:
    0 7px 16px
    color-mix(
      in srgb,
      var(--design-primary) 20%,
      transparent
    );
  font-size: 0.69rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-transform: uppercase;
  white-space: nowrap !important;
  word-break: keep-all !important;
}

body.premium-site.app-tournament-admin
  .playing-field-match-label {
  display: flex !important;
  min-width: 0;
  gap: 7px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  text-align: right;
}

body.premium-site.app-tournament-admin
  .playing-field-match-label small {
  color: #63768b !important;
  font-size: 0.65rem !important;
  font-weight: 900 !important;
  white-space: nowrap;
}

body.premium-site.app-tournament-admin
  .qualification-badge {
  min-height: 25px !important;
  padding:
    5px
    8px !important;
  border-radius: 999px !important;
  font-size: 0.52rem !important;
  line-height: 1 !important;
}

body.premium-site.app-tournament-admin
  .qualification-badge-open {
  color: #42566c !important;
  border-color:
    color-mix(
      in srgb,
      var(--design-primary) 18%,
      #cfd9e3
    ) !important;
  background:
    color-mix(
      in srgb,
      var(--design-primary) 8%,
      var(--design-surface)
    ) !important;
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  .playing-field-match-label small {
  color: #a7b9ce !important;
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  .qualification-badge-open {
  color: #e3edf8 !important;
  border-color:
    rgba(129, 164, 198, 0.20) !important;
  background: #22364e !important;
}

body.premium-site.app-tournament-admin
  .playing-field-teams {
  gap: 10px !important;
}

body.premium-site.app-tournament-admin
  .playing-field-teams strong {
  color: #18324d !important;
  font-size: 0.76rem !important;
  line-height: 1.35 !important;
}

body.premium-site.app-tournament-admin
  .playing-field-teams > span {
  color: #6b7d90 !important;
  font-size: 0.61rem !important;
  font-weight: 900 !important;
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  .playing-field-teams strong {
  color: #eef5ff !important;
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  .playing-field-teams > span {
  color: #a7b9ce !important;
}

/* ---------------------------------------------------------------------
   Smartphone-Hochformat
   --------------------------------------------------------------------- */

@media (max-width: 620px) {
  body.premium-site.app-tournament-admin
    .page {
    width:
      calc(
        100% -
        14px
      ) !important;
  }

  body.premium-site.app-tournament-admin
    .tournament-workflow {
    display: flex !important;
    gap: 8px !important;
    padding: 8px !important;
    overflow-x: auto !important;
    scroll-snap-type:
      x mandatory;
    scrollbar-width: thin;
    scrollbar-color:
      color-mix(
        in srgb,
        var(--design-primary) 35%,
        #72849a
      )
      transparent;
  }

  body.premium-site.app-tournament-admin
    .tournament-workflow a {
    grid-template-columns:
      32px
      auto !important;
    min-width: 138px !important;
    min-height: 50px !important;
    flex: 0 0 auto;
    padding:
      8px
      10px !important;
    font-size: 0.72rem !important;
    scroll-snap-align: start;
  }

  body.premium-site.app-tournament-admin
    .tournament-workflow a span {
    width: 32px !important;
    height: 32px !important;
  }

  body.premium-site.app-tournament-admin
    .group-grid {
    grid-template-columns: 1fr !important;
  }

  body.premium-site.app-tournament-admin
    .group-card {
    padding: 11px !important;
  }

  body.premium-site.app-tournament-admin
    .group-card-heading {
    margin:
      -11px
      -11px
      10px !important;
  }

  body.premium-site.app-tournament-admin
    .group-card
    .ranking-table th {
    font-size: 0.55rem !important;
  }

  body.premium-site.app-tournament-admin
    .group-card
    .ranking-table td {
    font-size: 0.68rem !important;
  }

  body.premium-site.app-tournament-admin
    .playing-field-settings-readonly {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;
    gap: 9px !important;
  }

  body.premium-site.app-tournament-admin
    .playing-field-settings-readonly
    :is(
      .playing-field-select-field,
      .playing-field-statistics > div
    ) {
    min-height: 96px;
    padding:
      12px
      11px !important;
  }

  body.premium-site.app-tournament-admin
    .playing-field-settings-readonly
    :is(
      .playing-field-select-field span,
      .playing-field-statistics span
    ) {
    font-size: 0.58rem !important;
  }

  body.premium-site.app-tournament-admin
    .playing-field-settings-readonly
    :is(
      .playing-field-select-field strong,
      .playing-field-statistics strong
    ) {
    font-size: 1.35rem !important;
  }

  body.premium-site.app-tournament-admin
    .playing-field-card-topline {
    grid-template-columns:
      auto
      minmax(0, 1fr) !important;
  }

  body.premium-site.app-tournament-admin
    .playing-field-name {
    min-height: 30px;
    padding:
      6px
      9px !important;
    font-size: 0.64rem !important;
  }

  body.premium-site.app-tournament-admin
    .playing-field-match-label {
    align-content: flex-start;
  }

  body.premium-site.app-tournament-admin
    .playing-field-teams {
    grid-template-columns:
      minmax(0, 1fr)
      auto
      minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  body.premium-site.app-tournament-admin
    .playing-field-teams strong:last-child {
    text-align: right !important;
  }

  body.premium-site.app-tournament-admin
    .playing-field-grid {
    grid-template-columns: 1fr !important;
    padding: 9px !important;
  }

  body.premium-site.app-tournament-admin
    .playing-field-block-heading {
    gap: 8px !important;
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}

/* Sehr schmale Geräte: 2×2 bleibt lesbar, aber Teamzeilen dürfen umbrechen. */

@media (max-width: 380px) {
  body.premium-site.app-tournament-admin
    .playing-field-settings-readonly {
    grid-template-columns: 1fr !important;
  }

  body.premium-site.app-tournament-admin
    .playing-field-settings-readonly
    :is(
      .playing-field-select-field,
      .playing-field-statistics > div
    ) {
    min-height: 86px;
  }

  body.premium-site.app-tournament-admin
    .playing-field-teams {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  body.premium-site.app-tournament-admin
    .playing-field-teams strong:last-child {
    text-align: left !important;
  }

  body.premium-site.app-tournament-admin
    .playing-field-teams > span {
    justify-self: start;
  }
}

/* ---------------------------------------------------------------------
   Smartphone-Querformat
   --------------------------------------------------------------------- */

body.is-phone-landscape.premium-site.app-tournament-admin
  .tournament-workflow {
  display: grid !important;
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    ) !important;
  overflow: visible !important;
}

body.is-phone-landscape.premium-site.app-tournament-admin
  .tournament-workflow a {
  min-width: 0 !important;
  min-height: 46px !important;
  padding:
    6px
    8px !important;
  font-size: 0.67rem !important;
}

body.is-phone-landscape.premium-site.app-tournament-admin
  .tournament-workflow a span {
  width: 30px !important;
  height: 30px !important;
}

body.is-phone-landscape.premium-site.app-tournament-admin
  .playing-field-settings-readonly {
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    ) !important;
}

body.is-phone-landscape.premium-site.app-tournament-admin
  .playing-field-settings-readonly
  :is(
    .playing-field-select-field,
    .playing-field-statistics > div
  ) {
  min-height: 84px;
  padding:
    10px
    11px !important;
}

body.is-phone-landscape.premium-site.app-tournament-admin
  .playing-field-settings-readonly
  :is(
    .playing-field-select-field span,
    .playing-field-statistics span
  ) {
  font-size: 0.54rem !important;
}

body.is-phone-landscape.premium-site.app-tournament-admin
  .playing-field-settings-readonly
  :is(
    .playing-field-select-field strong,
    .playing-field-statistics strong
  ) {
  font-size: 1.25rem !important;
}

body.is-phone-landscape.premium-site.app-tournament-admin
  .group-grid {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    ) !important;
}

body.is-phone-landscape.premium-site.app-tournament-admin
  .playing-field-grid {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    ) !important;
}

body.is-phone-landscape.premium-site.app-tournament-admin
  .playing-field-card {
  min-height: 126px;
}

/* Extra-Monitor und Vollbild übernehmen dieselben Kontraste. */

.presentation-stage
  .group-card
  .ranking-table td,
[data-presentation-target]:fullscreen
  .group-card
  .ranking-table td {
  color: #eef5ff !important;
}

.presentation-stage
  .group-card-heading strong,
[data-presentation-target]:fullscreen
  .group-card-heading strong {
  color: #fff !important;
  background:
    linear-gradient(
      145deg,
      var(--design-primary),
      var(--design-secondary)
    ) !important;
}


/* ---------------------------------------------------------------------
   Gruppentabellen bleiben im Handy-Hochformat echte kompakte Tabellen.
   Das ältere Ranglisten-Kartenlayout gilt hier bewusst nicht.
   --------------------------------------------------------------------- */

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table,
body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table tbody {
  display: table !important;
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table thead {
  display: table-header-group !important;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table tbody {
  display: table-row-group !important;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table tbody tr {
  display: table-row !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  background:
    color-mix(
      in srgb,
      var(--design-primary) 3%,
      var(--design-surface)
    ) !important;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table tbody td {
  position: static !important;
  display: table-cell !important;
  width: auto !important;
  min-width: 0 !important;
  height: 39px !important;
  min-height: 0 !important;
  padding:
    8px
    6px !important;
  border: 0 !important;
  border-bottom:
    1px solid
    color-mix(
      in srgb,
      var(--design-primary) 10%,
      #dfe6ed
    ) !important;
  color: #18324d !important;
  background: transparent !important;
  font-size: 0.69rem !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table tbody td::before {
  display: none !important;
  content: none !important;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table tbody td.ranking-position {
  color:
    color-mix(
      in srgb,
      var(--design-primary) 84%,
      #18324d
    ) !important;
  font-weight: 950 !important;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table tbody td.ranking-team {
  min-width: 0 !important;
  padding-inline:
    8px !important;
  color: #18324d !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  text-align: left !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table tbody td.ranking-points {
  color:
    color-mix(
      in srgb,
      var(--design-primary) 84%,
      #18324d
    ) !important;
  font-weight: 950 !important;
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  .group-card
  .ranking-table tbody tr {
  background: #111f31 !important;
}

html[data-theme="dark"]
  body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table tbody td {
  color: #eef5ff !important;
  border-bottom-color:
    rgba(129, 164, 198, 0.12) !important;
  background: transparent !important;
}

html[data-theme="dark"]
  body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table tbody
  :is(
    td.ranking-position,
    td.ranking-team,
    td.ranking-points
  ) {
  color: #eef5ff !important;
}


/* Im Smartphone-Hochformat nur Platz, Team, Spiele und Punkte anzeigen. */

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  :is(
    th:nth-child(4),
    td:nth-child(4),
    th:nth-child(5),
    td:nth-child(5),
    th:nth-child(6),
    td:nth-child(6),
    th:nth-child(7),
    td:nth-child(7),
    th:nth-child(8),
    td:nth-child(8)
  ) {
  display: none !important;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  th:nth-child(1),
body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  td:nth-child(1) {
  width: 42px !important;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  th:nth-child(3),
body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  td:nth-child(3),
body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  th:nth-child(9),
body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  td:nth-child(9) {
  width: 48px !important;
}