/* =====================================================================
   Schritt 3.24 – stärkere Lesbarkeit und repariertes Profil-Layout
   ===================================================================== */

/* ---------------------------------------------------------------------
   Zähler und Status-Badges: größer, kräftiger und kontrastreicher
   --------------------------------------------------------------------- */

body.premium-site
  :is(
    .counter,
    .spectator-match-status,
    .admin-match-status,
    .qualification-badge,
    .referee-match-field,
    .referee-match-status,
    .sport-badge
  ) {
  min-height: 34px !important;
  padding:
    7px
    12px !important;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--design-primary) 28%,
      rgba(48, 76, 105, 0.22)
    ) !important;
  border-radius: 999px !important;
  color:
    color-mix(
      in srgb,
      var(--design-primary) 74%,
      #172b42
    ) !important;
  background:
    color-mix(
      in srgb,
      var(--design-primary) 13%,
      var(--design-surface)
    ) !important;
  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.36),
    0 5px 13px
      rgba(18, 58, 99, 0.08) !important;
  font-size: 0.72rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.015em !important;
  line-height: 1 !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

body.premium-site
  .section-heading
  .counter {
  min-width: 72px;
  justify-content: center;
}

/* Geplante beziehungsweise noch offene Spiele. */

body.premium-site
  :is(
    .spectator-match-status,
    .admin-match-status,
    .qualification-badge-open
  ) {
  color: #263b52 !important;
  border-color: #bdc9d6 !important;
  background: #e5ebf1 !important;
}

/* Laufend, pausiert und abgeschlossen bleiben klar unterscheidbar. */

body.premium-site
  :is(
    .status-running,
    .state-running
  )
  :is(
    .spectator-match-status,
    .admin-match-status
  ) {
  color: #07543b !important;
  border-color: #8dd4b5 !important;
  background: #ccefe0 !important;
}

body.premium-site
  .status-paused
  :is(
    .spectator-match-status,
    .admin-match-status
  ) {
  color: #70410b !important;
  border-color: #e3ba67 !important;
  background: #f9e7bd !important;
}

body.premium-site
  .status-completed
  :is(
    .spectator-match-status,
    .admin-match-status
  ) {
  color: #34465a !important;
  border-color: #b7c3cf !important;
  background: #dfe5eb !important;
}

/* Dark Mode verwendet bewusst dunkle, satte Badges statt blasser Pillen. */

html[data-theme="dark"]
  body.premium-site
  :is(
    .counter,
    .spectator-match-status,
    .admin-match-status,
    .qualification-badge,
    .referee-match-field,
    .referee-match-status,
    .sport-badge
  ) {
  color: #f5f9ff !important;
  border-color:
    rgba(158, 193, 229, 0.30) !important;
  background:
    linear-gradient(
      145deg,
      #314966,
      #253b56
    ) !important;
  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.13),
    0 7px 17px
      rgba(0, 0, 0, 0.18) !important;
  text-shadow:
    0 1px 1px
    rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="dark"]
  body.premium-site
  :is(
    .status-running,
    .state-running
  )
  :is(
    .spectator-match-status,
    .admin-match-status
  ) {
  color: #e3fff3 !important;
  border-color:
    rgba(83, 211, 158, 0.43) !important;
  background:
    linear-gradient(
      145deg,
      #126548,
      #0d4d39
    ) !important;
}

html[data-theme="dark"]
  body.premium-site
  .status-paused
  :is(
    .spectator-match-status,
    .admin-match-status
  ) {
  color: #fff4d2 !important;
  border-color:
    rgba(236, 183, 75, 0.47) !important;
  background:
    linear-gradient(
      145deg,
      #76500f,
      #5e3d09
    ) !important;
}

html[data-theme="dark"]
  body.premium-site
  .status-completed
  :is(
    .spectator-match-status,
    .admin-match-status
  ) {
  color: #eef4fb !important;
  border-color:
    rgba(159, 180, 202, 0.32) !important;
  background:
    linear-gradient(
      145deg,
      #465a70,
      #35485d
    ) !important;
}

/* ---------------------------------------------------------------------
   Spielinformationen: Feld, Kontext, Gegner und Teamnamen
   --------------------------------------------------------------------- */

body.premium-site
  :is(
    .spectator-match-topline small,
    .referee-match-card-topline small,
    .playing-field-match-label small,
    .fixture-card small
  ) {
  color:
    color-mix(
      in srgb,
      var(--design-primary) 42%,
      #465b70
    ) !important;
  font-size: 0.69rem !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

body.premium-site
  :is(
    .spectator-match-context,
    .referee-match-context,
    .fixture-context
  ) {
  min-height: 28px;
  padding:
    7px
    9px !important;
  border-radius: 8px;
  color: #344a60 !important;
  background:
    color-mix(
      in srgb,
      var(--design-primary) 7%,
      var(--design-surface)
    ) !important;
  font-size: 0.70rem !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

body.premium-site
  :is(
    .spectator-match-teams,
    .referee-match-teams,
    .playing-field-teams,
    .fixture-teams
  )
  strong {
  color: #172f48 !important;
  font-size: 0.92rem !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
}

body.premium-site
  :is(
    .spectator-match-versus,
    .referee-match-versus,
    .playing-field-teams > span,
    .fixture-teams > span
  ) {
  color: #586d83 !important;
  font-size: 0.67rem !important;
  font-weight: 950 !important;
}

html[data-theme="dark"]
  body.premium-site
  :is(
    .spectator-match-topline small,
    .referee-match-card-topline small,
    .playing-field-match-label small,
    .fixture-card small
  ) {
  color: #d3dfec !important;
}

html[data-theme="dark"]
  body.premium-site
  :is(
    .spectator-match-context,
    .referee-match-context,
    .fixture-context
  ) {
  color: #e6eff9 !important;
  border:
    1px solid
    rgba(139, 173, 207, 0.13);
  background: #1a3048 !important;
}

html[data-theme="dark"]
  body.premium-site
  :is(
    .spectator-match-teams,
    .referee-match-teams,
    .playing-field-teams,
    .fixture-teams
  )
  strong {
  color: #f5f9ff !important;
  text-shadow:
    0 1px 1px
    rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"]
  body.premium-site
  :is(
    .spectator-match-versus,
    .referee-match-versus,
    .playing-field-teams > span,
    .fixture-teams > span
  ) {
  color: #b7c7d8 !important;
}

/* ---------------------------------------------------------------------
   Profilkopf auf Smartphone: Navigation und Profilkarte strikt trennen
   --------------------------------------------------------------------- */

@media (max-width: 899px) {
  body.personal-profile-page
    .profile-app-header {
    position: relative;
    z-index: 8;
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr)
      auto !important;
    gap:
      12px
      16px !important;
    align-items: start !important;
    min-height: 0 !important;
    padding:
      max(
        20px,
        env(safe-area-inset-top)
      )
      max(
        14px,
        env(safe-area-inset-right)
      )
      22px
      max(
        14px,
        env(safe-area-inset-left)
      ) !important;
    overflow: hidden;
  }

  body.personal-profile-page
    .profile-app-header
    > div:first-child {
    min-width: 0;
  }

  body.personal-profile-page
    .profile-app-header
    .header-actions {
    position: static !important;
    z-index: 3;
    display: flex !important;
    align-self: start;
    justify-self: end;
    margin: 0 !important;
  }

  body.personal-profile-page
    .profile-app-header
    .header-actions
    .button {
    min-width: 88px;
    min-height: 44px;
    padding:
      9px
      13px !important;
    border:
      1px solid
      rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    background:
      rgba(7, 27, 46, 0.44) !important;
    box-shadow:
      0 8px 20px
      rgba(0, 0, 0, 0.20) !important;
    backdrop-filter: blur(12px);
    font-size: 0.72rem !important;
    font-weight: 950 !important;
    white-space: nowrap;
  }

  body.personal-profile-page
    .profile-app-shell {
    position: relative;
    z-index: 4;
    margin-top: 0 !important;
    padding-top:
      14px !important;
  }

  body.personal-profile-page
    .profile-app-identity {
    margin-top: 0 !important;
  }
}

@media (max-width: 600px) {
  body.personal-profile-page
    .profile-app-header {
    gap: 9px 10px !important;
    padding-bottom: 18px !important;
  }

  body.personal-profile-page
    .profile-app-header
    .eyebrow {
    margin-bottom: 5px;
    font-size: 0.61rem !important;
  }

  body.personal-profile-page
    .profile-app-header h1 {
    margin: 0;
    font-size:
      clamp(
        1.45rem,
        7vw,
        1.78rem
      ) !important;
    line-height: 1.08;
  }

  body.personal-profile-page
    .profile-app-header
    .subtitle {
    display: none !important;
  }

  body.personal-profile-page
    .profile-app-shell {
    width:
      calc(
        100% -
        max(
          10px,
          env(safe-area-inset-left)
        ) -
        max(
          10px,
          env(safe-area-inset-right)
        )
      ) !important;
  }

  body.personal-profile-page
    .profile-app-identity {
    padding: 18px !important;
  }
}

/* Im Querformat bleibt eine kompakte Kopfzeile mit erreichbarem
   Turniere-Button sichtbar. */

body.is-phone-landscape.personal-profile-page
  .profile-app-header {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    auto !important;
  min-height: 0 !important;
  padding:
    max(
      9px,
      env(safe-area-inset-top)
    )
    max(
      14px,
      env(safe-area-inset-right)
    )
    10px
    max(
      14px,
      env(safe-area-inset-left)
    ) !important;
}

body.is-phone-landscape.personal-profile-page
  .profile-app-header
  .eyebrow,
body.is-phone-landscape.personal-profile-page
  .profile-app-header
  .subtitle {
  display: none !important;
}

body.is-phone-landscape.personal-profile-page
  .profile-app-header h1 {
  margin: 5px 0 0;
  font-size: 1.3rem !important;
  line-height: 1.1;
}

body.is-phone-landscape.personal-profile-page
  .profile-app-shell {
  margin-top: 0 !important;
  padding-top:
    10px !important;
}

/* Profilkarte selbst etwas kompakter und besser lesbar. */

body.personal-profile-page
  .profile-online-label {
  color:
    rgba(255, 255, 255, 0.88) !important;
  font-size: 0.66rem !important;
  font-weight: 950 !important;
}

body.personal-profile-page
  .profile-app-identity h2 {
  font-weight: 950 !important;
}

body.personal-profile-page
  .profile-app-identity p {
  color:
    rgba(255, 255, 255, 0.88) !important;
  font-size: 0.76rem !important;
  font-weight: 700;
}

body.personal-profile-page
  .profile-hero-stats span {
  color:
    rgba(255, 255, 255, 0.76) !important;
  font-weight: 950 !important;
}

body.personal-profile-page
  .profile-hero-stats strong {
  font-weight: 950 !important;
}